/* Palette. Every foreground/background pair below was MEASURED, not eyeballed — the numbers in the
   comments are real WCAG 2.x contrast ratios for the combinations this stylesheet actually renders.
   --brass-deep was #8a5f2b, which is 4.97:1 on --cream but only 4.43:1 on --cream-2. .eyebrow is
   brass-deep and every section.alt is cream-2, so every eyebrow in an alt section was a real 1.4.3
   failure on the shipped page. #815726 clears it on BOTH creams (4.99 / 5.61) and makes the
   white-on-brass CTAs better too (6.32:1).
   (No brand name may appear in this comment: this sheet is copied verbatim into every scaffolded
   tenant and tests/tenant-scaffold.test.js greps the emitted CSS for cross-brand strings.)
   --field is a dedicated FORM CONTROL boundary: --line is rgba(13,27,42,.12) ~= 1.4:1, which is
   fine for a decorative card edge but fails 1.4.11 for an input the user has to find. */
:root{--navy:#0d1b2a;--navy-2:#152a3f;--cream:#f6f1e6;--cream-2:#ece4d3;--brass:#b8894a;--brass-deep:#815726;--brass-hover:#6d4a20;--brass-lt:#d9a768;--ink:#1a1a1a;--muted:#5c6773;--line:rgba(13,27,42,.12);--field:#6b7683;--radius:14px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0 0 .5em;line-height:1.15;letter-spacing:-.02em;color:var(--navy);font-weight:700}
h1{font-size:clamp(2rem,7vw,3.4rem)}h2{font-size:clamp(1.5rem,4.5vw,2.2rem)}h3{font-size:1.15rem}
p{margin:0 0 1em}
/* WCAG 1.4.10 Reflow: nothing may scroll horizontally at 320px. The contact address is a single
   34-character unbreakable token, and inside the 20px-padded prose column on a 320px screen it ran
   7px past the viewport on /privacy and /terms — measured, in a real browser, at 320x800.
   break-word (not anywhere) only breaks a word that cannot otherwise fit, so ordinary copy is
   untouched. It is an inherited property, so setting it on the block containers covers the inline
   <a> that actually overflowed. */
p,li,dt,dd,h1,h2,h3,summary,figcaption,address{overflow-wrap:break-word}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;min-height:44px;display:flex;align-items:center}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--navy);color:var(--cream);padding:10px 16px;border-radius:8px}
/* Focus indicator: a DUAL ring, because this site puts focusable controls on four different
   backgrounds (cream, cream-2, white cards, navy header/footer/hero) and no single colour clears
   1.4.11's 3:1 against all of them — the old single brass-deep ring measured 2.62:1 on --navy-2.
   The brass band carries the contrast on the dark surfaces (8.02:1 on navy, 6.74:1 on navy-2) and
   the navy band carries it on the light ones (15.4:1 on cream, 17.4:1 on white). The box-shadow
   spread exactly fills the 2px outline-offset, so the two bands abut with no gap. */
:focus-visible{outline:3px solid var(--brass-lt);outline-offset:2px;box-shadow:0 0 0 2px var(--navy)}
/* Windows high-contrast / forced-colors throws away both custom colours; keep a system-coloured
   ring rather than leaving those users with no visible focus at all. */
@media(forced-colors:active){:focus-visible{outline:3px solid Highlight;box-shadow:none}}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

header.site{background:var(--navy);color:var(--cream);position:sticky;top:0;z-index:20}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;min-height:64px}
.brand{display:flex;align-items:center;min-height:44px;gap:10px;color:var(--cream);text-decoration:none;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem}
/* The mark is a WORDMARK (assets/site/logo-wordmark.png, 535x260 = 2.058:1), not an avatar. The
   path stays brand-neutral because this generator also renders TENANT trees, and BW-42 fails the
   build on any cross-brand string in the emitted CSS/HTML. Fixing BOTH
   axes in CSS re-imposes a box the artwork does not fit and squeezes the letters; a circular crop
   cuts the ends off it. So: pin the HEIGHT, let the width follow the intrinsic ratio. The width/
   height attributes on the <img> carry that same ratio purely to reserve the box before load, and
   site.test.js pins them to the asset's real pixel ratio so this cannot be re-broken. */
.brand img{height:48px;width:auto;border-radius:5px;background:var(--cream)}
.brand span{line-height:1.15}
.brand small{display:block;color:var(--brass-lt);font-size:.72rem;letter-spacing:.14em;font-weight:600}
nav.site ul{display:flex;flex-wrap:wrap;gap:0 22px;list-style:none;margin:0;padding:0}
/* 44px is the target size this site holds itself to (site.spec.js measures every non-inline a/
   button/summary on a phone). padding alone gave these ~38px, so the min-height is the guarantee
   and inline-flex is what lets it apply to a link at all. */
nav.site a{color:var(--cream);text-decoration:none;font-size:.95rem;padding:11px 2px;display:inline-flex;align-items:center;min-height:44px}
nav.site a:hover{color:var(--brass-lt)}
nav.site a[aria-current="page"]{color:var(--brass-lt);box-shadow:inset 0 -2px 0 var(--brass-lt)}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:999px;background:var(--brass-deep);color:#fff;font-weight:700;text-decoration:none;border:2px solid var(--brass-deep)}
.cta:hover{background:var(--brass-hover);border-color:var(--brass-hover)}
.cta.ghost{background:transparent;color:var(--cream);border-color:rgba(246,241,230,.5)}
.cta.ghost:hover{background:rgba(246,241,230,.12);color:var(--cream)}
.cta.dark{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.cta.dark:hover{background:var(--navy-2);border-color:var(--navy-2)}
/* Phone header. The primary nav used to be display:none here, which left a phone visitor with the
   brand and ONE button: Services, Service Areas, How It Works and FAQ were reachable only by
   scrolling to the footer, and there was nowhere at all to put the scheduling link. So instead of
   hiding it, the nav drops onto its own full-width row and WRAPS (never a horizontal scroller —
   that hides links off-screen). The header also stops being sticky below 800px: two rows pinned to
   the top of a 667px-tall phone would eat a sixth of the viewport on every scroll. */
@media(max-width:800px){
  header.site{position:static}
  .brand{order:1}
  .bar .cta{order:2;padding:10px 16px;font-size:.9rem}
  nav.site{order:3;width:100%;border-top:1px solid rgba(246,241,230,.16);margin-top:4px}
  nav.site ul{gap:0 18px}
  nav.site a{font-size:.92rem;padding:10px 2px}
}
@media(max-width:560px){.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.brand img{height:42px}}

/* The hero carries a photograph. The scrim is a gradient in THIS stylesheet, not an inline style:
   the server sends style-src 'self', so an inline style attribute is dropped and the headline would
   land unreadable on a bright sky. site.test.js asserts the no-inline-style rule.

   The photo is an <img class="hero-photo">, NOT a CSS background. This stylesheet is shared:
   scripts/tenant-site.mjs imports CSS from this file and writes it verbatim into every scaffolded
   tenant, and gate-templatization.sh runs brand isolation over that tree. A CSS background pointing
   at a file under /assets/ here bakes one tenant's asset path into every other tenant's stylesheet,
   where it also 404s. Layout classes live in CSS; asset paths live in the content file.
   An <img> also carries alt text and a reserved width/height box, neither of which a background can.
   (This comment ships inside the shared stylesheet, so it must name no brand either — the tenant
   scaffold test asserts exactly that, and it is what caught the first draft of this note.)

   The photo is bounded to the TOP of the hero rather than covering it. The hero is tall (it carries
   the whole quote widget), and a full-height cover on a narrow phone would zoom the shot down to a
   single window frame. A bounded band keeps the composition, then dissolves into navy. */
.hero{background:var(--navy);color:var(--cream);padding:64px 0 72px;position:relative;overflow:hidden;isolation:isolate}
.hero-photo{position:absolute;inset:0 0 auto 0;z-index:0;width:100%;height:min(640px,100%);max-width:none;object-fit:cover;object-position:48% 62%;-webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,0) 100%)}
/* Scrim weight is tuned for a BACKLIT photograph. The first pass was built against a bright midday
   shot and stacked ~.74 horizontally on top of ~.58 vertically; dropped onto a contre-jour frame it
   multiplied into near-black and the subject disappeared. These values keep the headline over 7:1
   while the crew stays legible. Re-check both numbers whenever imagery.homeHero changes. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(178deg,rgba(13,27,42,.42) 0%,rgba(13,27,42,.62) 36%,rgba(13,27,42,.9) 70%,var(--navy) 90%),linear-gradient(95deg,rgba(13,27,42,.68) 0%,rgba(13,27,42,.2) 58%,rgba(13,27,42,0) 100%);pointer-events:none}
.hero>.wrap{position:relative;z-index:2}
.hero-area .hero-photo{height:min(380px,100%);object-position:60% 44%}
@media(max-width:800px){.hero-photo{height:min(440px,100%);object-position:70% 34%}.hero-area .hero-photo{height:min(300px,100%)}}
/* Desktop only: the quote card is a single narrow column, so a photo bounded to 640px leaves the
   whole right half of the hero as dead navy below it — the page reads unfinished. There is room to
   run the photo the FULL height here (the mask still dissolves its bottom), which is the one place
   the bounded band is the wrong call. The phone rule above stays: there the card spans the width
   and a full-height cover would zoom into a single window frame. */
@media(min-width:801px){.hero-photo{height:100%;object-position:48% 60%}}
.hero h1{color:var(--cream);max-width:14ch}
.hero .est{display:inline-block;margin-bottom:20px;padding:6px 14px;border:1px solid rgba(217,167,104,.45);border-radius:999px;color:var(--brass-lt);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.hero p.lede{font-size:1.15rem;color:#d7dee6;max-width:52ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero .areas-line{margin-top:30px;padding-top:22px;border-top:1px solid rgba(246,241,230,.16);color:#aebac7;font-size:.92rem}
.hero .areas-line a{color:var(--cream)}
.hero-quote{background:var(--cream);color:var(--ink);border-radius:var(--radius);padding:22px;margin-top:28px;max-width:540px;box-shadow:0 18px 44px rgba(0,0,0,.30)}
.hero-quote .hq-title{font-size:1.2rem;color:var(--navy);margin:0 0 6px}
.hero-quote .hq-sub{color:var(--muted);font-size:.95rem;margin:0 0 14px}
.hero-quote label{display:block;font-size:.78rem;font-weight:700;color:var(--navy);margin-bottom:12px;letter-spacing:.01em}
/* --field, not --line: an input's border IS its boundary, so 1.4.11 wants 3:1 against the card it
   sits on. --line is rgba(...,.12) ~= 1.4:1 — invisible to a low-vision user hunting for the box. */
.hero-quote input{display:block;width:100%;margin-top:5px;min-height:46px;padding:11px 12px;border:1px solid var(--field);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:1rem}
.hero-quote .hq-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* 320px is a real device width (iPhone SE 1st gen, and any phone at 200% zoom per 1.4.4). Two
   input columns inside a 20px-padded card leave ~130px each there — below the point where a name
   field is usable. One column under 400px. */
@media(max-width:400px){.hero-quote .hq-row{grid-template-columns:minmax(0,1fr)}}
.hero-quote .hq-file{border:1.5px dashed var(--brass-deep);border-radius:10px;padding:12px;text-align:center;color:var(--brass-deep);cursor:pointer;min-height:auto}
.hero-quote .hq-file input{margin-top:8px;color:var(--ink)}
.hero-quote .thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.hero-quote .thumbs:empty{display:none}
.hero-quote .thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}
.hero-quote .hq-submit{width:100%;margin-top:4px}
.hero-quote .hq-err{color:#b00020;font-size:.9rem;margin:10px 0 0}

section{padding:64px 0}
section.alt{background:var(--cream-2)}
.eyebrow{color:var(--brass-deep);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin:0 0 10px}
.lede{font-size:1.08rem;color:var(--muted);max-width:62ch}
.grid{display:grid;gap:18px;margin-top:34px}
/* minmax(0,1fr), never a bare 1fr: a grid track's default min-width is min-content, so one long
   unbroken string in a card pushes the track wider than its share and the whole grid overflows the
   viewport to the right. That is the same defect the 2026-07-27 fleet-wide centering sweep fixed. */
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* Proof strip — the dark 4-up band directly under the hero. Its job is silhouette: it stops the
   page reading as "hero, then seven identical card sections". Every cell is a fact about how the
   business runs, not a claim about how good it is. */
/* Marked up as a <dl>: every cell is a term and its value, so dt/dd states that relationship in the
   accessibility tree. It was <strong>/<span>, which looks identical and conveys nothing — a screen
   reader read four label/value pairs as eight unrelated fragments. */
.strip{background:var(--navy-2);color:var(--cream);padding:0}
.strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0}
.strip div{padding:24px 22px;border-left:1px solid rgba(246,241,230,.16)}
.strip div:first-child{border-left:0}
.strip dt{color:var(--brass-lt);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;font-weight:700}
.strip dd{margin:0;color:#c8d2dc;font-size:.95rem;line-height:1.5}
@media(max-width:900px){.strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.strip div:nth-child(3){border-left:0}}
@media(max-width:560px){.strip .wrap{grid-template-columns:minmax(0,1fr)}.strip div{border-left:0;border-top:1px solid rgba(246,241,230,.16)}.strip div:first-child{border-top:0}}

/* Asymmetric split: copy + a 2x2 audience grid on the left, a sticky navy recap panel on the right.
   top:88px clears the 64px sticky header plus breathing room. */
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start;margin-top:34px}
.split-panel{position:sticky;top:88px;background:var(--navy);color:var(--cream);border-radius:var(--radius);padding:28px}
.split-panel h3{color:var(--cream)}
.split-panel p{color:#c8d2dc;font-size:.98rem}
.mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mini-grid div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
/* h3, not <strong>: these four are subsections of the h2 above them, and a heading is how a screen
   reader user navigates to one. <strong> gave the page an outline with a hole in it. */
.mini-grid h3{color:var(--navy);margin:0 0 6px;font-size:1.05rem}
.mini-grid p{margin:0;color:var(--muted);line-height:1.55;font-size:.96rem}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:26px}.split-panel{position:static}}
@media(max-width:560px){.mini-grid{grid-template-columns:minmax(0,1fr)}}

/* Card media. Negative margins pull the photo flush to the .card padding box; the radius lives on
   the wrapper so .card needs no overflow clipping. .card is a column flexbox with gap:8px, so the
   bottom compensation is 6px rather than 0. */
.card-media{margin:-24px -24px 6px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;background:var(--navy-2)}
.card-media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform .35s ease}
a.card:hover .card-media img{transform:scale(1.03)}
/* Reduced motion has to kill the TRANSFORM, not just the transition. Dropping the transition alone
   leaves the same 3% zoom, applied instantly — still motion, now janky. */
@media(prefers-reduced-motion:reduce){
  .card-media img{transition:none}
  a.card:hover .card-media img{transform:none}
  *,*::before,*::after{scroll-behavior:auto}
}

/* Service page media band: UNDER the h1, not behind it. White type over a photograph would need a
   per-image contrast check on every future photo; a band needs none and shifts no layout. */
.svc-media{margin:0 0 30px;border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 44px rgba(13,27,42,.16)}
.svc-media img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
@media(max-width:640px){.svc-media img{aspect-ratio:4/3}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:8px}
/* A card title is an h3 under a section heading and an h2 on the /services and /areas hubs, where
   the grid sits straight under the page h1. Same component, same size — the level is a structural
   fact for assistive tech, not a type scale. */
.card h2,.card h3{font-size:1.15rem}
.card p{color:var(--muted);margin:0}
.card a.more{margin-top:auto;padding-top:14px;color:var(--brass-deep);font-weight:700;text-decoration:none;font-size:.95rem}
.card a.more:hover{text-decoration:underline}
a.card{text-decoration:none}
.step{background:transparent;border:0;border-top:3px solid var(--brass);border-radius:0;padding:18px 0 0}
.step .n{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 13px;margin-bottom:4px;border-radius:999px;background:var(--brass-deep);color:#fff;font-weight:700;font-size:.72rem;letter-spacing:.14em;align-self:flex-start}
ul.checks{list-style:none;margin:0;padding:0}
ul.checks li{position:relative;padding:9px 0 9px 30px;border-bottom:1px solid var(--line);color:var(--muted)}
ul.checks li::before{content:"";position:absolute;left:2px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--brass)}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;padding:0;list-style:none}
.pills a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;text-decoration:none;font-weight:600;font-size:.95rem;display:inline-block;min-height:44px;line-height:24px}
.pills a:hover{border-color:var(--brass-deep);color:var(--brass-deep)}
details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:10px}
details summary{cursor:pointer;font-weight:700;color:var(--navy);min-height:44px;padding:11px 0}
details p{margin:10px 0 4px;color:var(--muted)}
.band{background:var(--navy);color:var(--cream);border-radius:var(--radius);padding:40px 32px;text-align:center}
.band h2{color:var(--cream)}
.band p{color:#c8d2dc;max-width:56ch;margin:0 auto 24px}
.band.with-photo{display:grid;grid-template-columns:.85fr 1.15fr;align-items:stretch;padding:0;text-align:left;overflow:hidden}
.band.with-photo img{width:100%;height:100%;min-height:270px;object-fit:cover;object-position:60% center}
.band.with-photo .band-copy{padding:38px 34px}
.band.with-photo p{margin:0 0 24px}
.band-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.band.with-photo .band-actions{justify-content:flex-start}
@media(max-width:800px){.band.with-photo{grid-template-columns:1fr}.band.with-photo img{min-height:190px;max-height:240px}.band.with-photo .band-copy{padding:30px 24px}}

/* Scheduling block (home page). Numbered because the three steps happen in order and the customer
   is being told where the hand-off to a human is — an <ol> says that, a styled <div> does not. */
ol.steps-ol{margin:0 0 24px;padding-left:1.3em;color:var(--muted);max-width:60ch}
ol.steps-ol li{margin-bottom:.55em}
.book-actions{display:flex;flex-wrap:wrap;gap:12px}

.photo-band{padding:0}
.photo-band figure{margin:0;position:relative}
.photo-band img{width:100%;height:clamp(210px,31vw,380px);object-fit:cover}
.photo-band figcaption{background:var(--navy);color:#c8d2dc;font-size:.86rem;letter-spacing:.02em;padding:12px 20px;text-align:center}
/* The horizontal padding is repeated on purpose. .crumbs is applied ALONGSIDE .wrap and comes later
   in this sheet, so a bare padding:20px 0 0 silently cancelled .wrap's own 0 20px and the
   breadcrumb ran flush into the left edge of every phone screen. */
.crumbs{padding:20px 20px 0;font-size:.88rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose{max-width:70ch}
.prose ul{padding-left:1.1em;color:var(--muted)}
.prose li{margin-bottom:.5em}
footer.site{background:var(--navy);color:#9fb0c0;padding:56px 0 32px;font-size:.92rem}
footer.site .foot-grid h2{color:var(--cream);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
footer.site a{color:#c8d2dc;text-decoration:none;display:block;padding:11px 0;min-height:44px}
footer.site a:hover{color:var(--brass-lt)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-bottom{margin-top:40px;padding-top:24px;border-top:1px solid rgba(246,241,230,.14);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:#7d8fa0;font-size:.86rem}
/* "Privacy · Terms" really is a run of inline text, which 2.5.8 exempts. The contact links are NOT
   — each sits alone in its own <p> and is a standalone target, so they get a real 44px box. */
.foot-bottom a{display:inline;min-height:0;padding:0}
footer.site a.inline{display:inline-block;min-height:44px;padding:10px 0}
.foot-blurb{color:#9fb0c0;max-width:34ch}
.foot-map{display:block;width:100%;max-width:34ch;aspect-ratio:16/10;border:0;border-radius:10px;margin-top:14px;background:var(--navy-2);filter:saturate(.9)}
@media(max-width:480px){.foot-map{max-width:none}}
.pt-tight{padding-top:32px}
.faq-list{margin-top:28px;max-width:70ch}
.h1-narrow{max-width:18ch}
.svc-grid{margin-top:26px;align-items:start}
.lede-dark{color:var(--ink)}
.h-sub{font-size:1.3rem;margin-top:1.2em}
.mt-8{margin-top:8px}
.hero-area{padding:48px 0 56px;margin-top:20px}