/* ==============================================================
   CORCORAN COMMUNICATIONS, shared stylesheet for every page.
   Strategic Growth palette only. Extracted from index.html so the
   palette lives in ONE place and cannot drift across pages.

   What lives here: tokens, base, buttons, tiles, sections, cards,
   grids, dark panels and gradient fields, the sticky nav and its
   mobile menu, breadcrumbs, the page hero, steps, stats, FAQ,
   contact cards, the About page photo blocks, and the footer.

   What does NOT live here: anything only the homepage uses (the
   hero dashboard mockup, the agent-network diagram, the promise
   band, the story portraits, the proof block, the logo wall).
   Those stay inline in index.html.

   Gradients are permitted on SECTION BACKGROUNDS ONLY (decided
   2026-08-11). Text, buttons, cards, icons and borders stay solid.
   Every field is a palette color at low alpha over a solid
   Midnight base, so no off-palette hex enters the system.
   ============================================================== */

:root{
  --midnight:#082A4A; --signal:#0B6BD3;
  --green:#15B77E;    --green-ink:#062018; --green-text:#0E7A55;
  --mint:#DDF7EC;     --cloud:#F3F8FC;     --white:#fff;
  --slate:#4A5A6A;    --line:#D8E4EF;      --on-dark:#B6C9DD;
  --surface:rgba(255,255,255,.05);
  --surface-hi:rgba(255,255,255,.09);
  --hairline:rgba(255,255,255,.13);
  --lift:0 1px 2px rgba(8,42,74,.05), 0 10px 28px rgba(8,42,74,.08);
  --lift-hi:0 2px 4px rgba(8,42,74,.07), 0 18px 44px rgba(8,42,74,.13);
  --lift-xl:0 4px 10px rgba(8,42,74,.10), 0 30px 70px rgba(8,42,74,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--slate);background:var(--cloud);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding:0 30px}
h1,h2,h3{line-height:1.1;letter-spacing:-.025em;color:var(--midnight)}
a{color:var(--signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.dark :focus-visible,.nav :focus-visible{outline-color:var(--mint)}

/* ---------- pill buttons, ServiceNow shape ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:var(--green-ink);padding:15px 30px;border-radius:999px;text-decoration:none;font-size:.88rem;font-weight:700;letter-spacing:.01em;transition:background .2s,color .2s,border-color .2s}
/* Hover leaves green for a Fresh Mint fill with Midnight ink, 12.91:1.
   The secondary button keeps a translucent wash rather than the same
   mint fill, so primary and secondary do not collide on hover. */
.btn:hover{background:var(--mint);color:var(--midnight)}
.btn-ghost{background:transparent;border:1.5px solid var(--mint);color:var(--mint);padding:13.5px 28px}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:var(--mint)}
.btn-sm{padding:13px 28px;font-size:.92rem}
/* Nav CTA carries Midnight ink rather than #062018, 5.63:1 on green.
   Signal Blue would be 2.00:1 here and is not usable on a green fill. */
.nav .btn{color:var(--midnight)}
.nav .btn:hover{color:var(--midnight)}

/* APPROVED, UNCHANGED: 2px line icons, Signal Blue on Fresh Mint. */
.tile{width:56px;height:56px;border-radius:15px;background:var(--mint);color:var(--signal);display:flex;align-items:center;justify-content:center;flex:none}
.tile svg{width:27px;height:27px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
/* The same icon tile on a Midnight panel. A solid Fresh Mint block
   glares on a dark band, so the fill becomes the translucent card
   surface and the strokes go Fresh Mint, with one Growth Green accent
   stroke per icon. The accent is set here rather than on the SVG so no
   hex is written into the markup. */
.tile-dark{background:var(--surface);border:1px solid var(--hairline);color:var(--mint)}
.tile-dark svg .ico-accent{stroke:var(--green)}

section{padding:120px 0}
.sec-head{max-width:780px;margin:0 auto 60px;text-align:center}
.sec-title{font-size:clamp(2.1rem,3.7vw,2.875rem);color:var(--signal);margin-bottom:14px}
.sec-sub{color:var(--slate);font-size:.8rem;letter-spacing:.15em;font-weight:700}

.card{background:var(--white);border-radius:16px;padding:38px 34px;box-shadow:var(--lift);transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--lift-hi)}
.card h3{font-size:1.24rem;margin:22px 0 12px}
/* Card body text. The labeled paragraphs carry their own size and color,
   so they are excluded here rather than left to lose the cascade: .card p
   is (0,1,1) and a bare component class is (0,1,0), so .card p silently
   defeated .tag, .role and .card-more on every card. Excluding them costs
   nothing, because the color they inherit is the same one this rule sets:
   body is --slate and .dark is --on-dark. */
.card p:not(.tag):not(.role):not(.card-more){font-size:.97rem;color:var(--slate)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
/* Four across for benefit tiles and four-step processes. Steps down to
   two before it reaches the single-column mobile breakpoint, because
   four cards at 1100px are too narrow to read. */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.grid4 .card{padding:32px 26px}
.grid4 .card h3{font-size:1.12rem}

/* A one-sentence, jargon-free definition that sits above a section
   heading. The sentence is body size and Midnight, so it reads as
   something written to you rather than as a caption. Only the label is
   eyebrow sized. Green label on light panels, Fresh Mint on dark, since
   Signal Blue is 2.82:1 on Midnight. */
.plain{max-width:860px;margin:0 auto 40px;text-align:center;font-size:1.2rem;line-height:1.7;color:var(--midnight)}
.plain-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;line-height:1.4;color:var(--green-text);margin-bottom:12px}
.dark .plain{color:var(--white)}
.dark .plain-label{color:var(--mint)}

.tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-text);margin:20px 0 0}
.card .tag + h3{margin-top:6px}

/* "Learn more" link at the foot of a service card. Signal Blue on the
   white card, Fresh Mint on dark panels, since Signal Blue drops to
   2.82:1 on Midnight. The arrow is CSS content, so it never lands in
   the page text or in an audit's word count. */
.card-more{margin-top:18px;font-size:.92rem;font-weight:700}
.card-more a{color:var(--signal);text-decoration:none}
.card-more a::after{content:" \2192"}
.card-more a:hover{text-decoration:underline}
.dark .card-more a{color:var(--mint)}

/* ---------- dark sections ----------
   Background gradients are built ONLY from palette colors at low alpha
   over a solid Midnight base, so no off-palette hex enters the system.
   Stops fade to rgba(color,0) rather than `transparent`, which some
   browsers interpolate through black and smear gray. */
.dark{background-color:var(--midnight);color:var(--on-dark)}
.field-hero{
  background-image:
    radial-gradient(1100px 780px at 6% 112%, rgba(21,183,126,.26) 0%, rgba(21,183,126,0) 68%),
    radial-gradient(980px 640px at 96% -12%, rgba(11,107,211,.28) 0%, rgba(11,107,211,0) 66%);
}
.field-blue{
  background-image:
    radial-gradient(900px 620px at 88% 0%, rgba(11,107,211,.24) 0%, rgba(11,107,211,0) 66%);
}
.field-green{
  background-image:
    radial-gradient(900px 640px at 10% 104%, rgba(21,183,126,.24) 0%, rgba(21,183,126,0) 66%);
}
.field-both{
  background-image:
    radial-gradient(820px 560px at 4% 106%, rgba(21,183,126,.22) 0%, rgba(21,183,126,0) 64%),
    radial-gradient(820px 560px at 96% -6%, rgba(11,107,211,.22) 0%, rgba(11,107,211,0) 64%);
}
.dark .sec-title{color:var(--white)}   /* Signal Blue is 2.82:1 here */
.dark .sec-sub{color:var(--on-dark)}
.dark h2,.dark h3{color:var(--white)}
.dark .card{background:var(--surface);border:1px solid var(--hairline);box-shadow:none}
.dark .card:hover{background:var(--surface-hi);border-color:rgba(255,255,255,.22);box-shadow:none}
.dark .card p:not(.tag):not(.role):not(.card-more){color:var(--on-dark)}

/* ---------- sticky dark nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--midnight);border-bottom:1px solid var(--hairline)}
/* The side padding matters: .nav .inner outranks .wrap, so whatever it sets
   here is the header's only inset. With 0 the wordmark sat against the
   viewport edge on every screen narrower than .wrap's 1240px max-width, and
   only touched it more gently above that, where the centering margin is
   0.5px at 1241. 30px matches .wrap, so the header lines up with the
   sections under it at every width. */
.nav .inner{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:17px 30px}
.nav-home{display:block;flex:none;line-height:0}
.nav img{display:block;width:230px;height:auto}
.nav ul{display:flex;gap:28px;list-style:none;font-size:1rem;font-weight:600}
.nav a{color:var(--on-dark);text-decoration:none}
.nav a:hover{color:var(--mint)}
/* The hamburger only exists below 1000px. Mint strokes on Midnight. */
.navtoggle{display:none;background:transparent;border:1px solid var(--hairline);border-radius:11px;color:var(--mint);padding:9px;cursor:pointer;flex:none}
.navtoggle:hover{border-color:var(--mint)}
.navtoggle svg{display:block;width:22px;height:22px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
.navtoggle .ico-close{display:none}
.navtoggle[aria-expanded="true"] .ico-open{display:none}
.navtoggle[aria-expanded="true"] .ico-close{display:block}
/* Between 1000 and 1150 the enlarged nav gets tight, so it steps down
   once before the mobile breakpoint moves it into the menu. */
@media(max-width:1150px){ .nav ul{gap:20px;font-size:.92rem} .nav img{width:200px} .grid4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:1000px){
  .navtoggle{display:inline-flex}
  .nav .inner{gap:14px}
  /* A tighter inset than the 30px above, because a phone has no width to
     spare, and it grows to clear an iOS notch when the phone is held
     sideways. The plain padding first is the fallback for browsers
     without max(). */
  .nav .inner{padding-left:20px;padding-right:20px;
    padding-left:max(20px,env(safe-area-inset-left,0px));
    padding-right:max(20px,env(safe-area-inset-right,0px))}
  /* The wordmark scales with the screen instead of holding 172px, which is
     what makes the logo, the button and the toggle still fit once the bar
     has padding again. */
  .nav img{width:min(172px,36vw)}
  .nav .btn-sm{white-space:nowrap}
  /* The links move into a Midnight panel under the bar instead of
     disappearing. With six pages the site needs real navigation on a
     phone. The panel is absolutely positioned against the sticky
     header, which is its containing block. */
  .nav-main{position:absolute;left:0;right:0;top:100%;display:none;background-color:var(--midnight);border-bottom:1px solid var(--hairline);box-shadow:0 24px 44px rgba(8,42,74,.45)}
  .nav-main.open{display:block}
  .nav-main ul{display:block;padding:6px 30px 18px;font-size:1rem}
  .nav-main li{border-bottom:1px solid var(--hairline)}
  .nav-main li:last-child{border-bottom:0}
  .nav-main a{display:block;padding:15px 2px}
  .nav .btn-sm{padding:11px 20px;font-size:.84rem}
}

/* ---------- breadcrumb ----------
   Sits at the top of a dark page hero, so it uses --on-dark (8.6:1 on
   Midnight) with a Fresh Mint hover. Never Signal Blue here. */
.crumb{font-size:.8rem;padding:30px 0 0}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:9px;color:var(--on-dark)}
.crumb a{color:var(--on-dark);text-decoration:none}
.crumb a:hover{color:var(--mint);text-decoration:underline}
.crumb li + li::before{content:"/";margin-right:9px;color:var(--on-dark);opacity:.55}
.crumb [aria-current="page"]{color:var(--mint);font-weight:600}

/* ---------- hero ---------- */
.hero{position:relative;background-color:var(--midnight);color:var(--white);padding:104px 0 0}
.gridfield{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
/* Measured: 56px keeps this 88 character headline at 3 lines in 950px.
   The accent clause stays INLINE. Forcing it to its own block adds a
   fourth line, which breaks the 3 line rule. */
.hero h1{font-size:clamp(2.2rem,4.4vw,3.5rem);color:var(--white);max-width:950px}
/* ServiceNow puts the first clause in green. Green here is reserved for
   CTAs and success markers, so the accent clause takes Fresh Mint. */
.hero h1 .accent{color:var(--mint)}
.hero .eyebrow{font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mint);font-weight:700;margin-bottom:22px}
.hero p.lead{font-size:1.12rem;color:var(--on-dark);margin:26px 0 34px;max-width:660px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero .proof{margin-top:30px;font-size:.84rem;color:var(--on-dark)}

/* Service-page hero: no dashboard mockup and no portrait, so it closes
   itself off at the bottom instead of running under an overlap. The
   breadcrumb supplies the top spacing. */
.hero--page{padding:0 0 104px}
.hero--page .eyebrow{margin-top:40px}
.hero--page h1{max-width:900px}
.hero--page p.lead{max-width:700px}

/* Copy left, decorative art right. The art is ornament, not content:
   it is aria-hidden and it disappears below 1000px, where the hero is a
   single column and the headline needs the full width. Deliberately
   separate class names from the homepage's .hero-body / .hero-portrait,
   which stay inline in index.html. */
.hero-split{display:flex;align-items:center;gap:56px}
.hero-copy-col{flex:1 1 auto;min-width:0;max-width:700px}
.hero-art{flex:0 0 400px;margin-left:auto}
.hero-art svg{width:100%;height:auto;display:block}

/* ---------- raised white panel ----------
   For a section that would otherwise sit light against a light
   neighbor. Backgrounds must alternate down the page and gradients are
   not an option here, so this is a solid palette color: white on the
   Cloud page, edged with the standard hairline. It is the same relation
   a card already has to the page, one step up in scale, which is why it
   reads as deliberate rather than as a wash. Fresh Mint was tried at
   full-section scale and looked washed out against the dark bands.
   Cards sitting on this panel take the hairline border too, or a white
   card on a white band would vanish. */
.band-panel{background-color:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-panel .card{border:1px solid var(--line)}
/* The county hub town list is a list, not a feature, so it also takes
   tighter padding than a full section. */
.band-towns{padding:84px 0}
.band-towns .sec-head{margin-bottom:38px}
@media(max-width:1000px){ .band-towns{padding:60px 0} }
/* Below 360px the three bar items stop fitting once the bar carries side
   padding again, so the button gives up some padding and the gaps tighten.
   That is what keeps 320px, the narrowest phone worth supporting, clear of
   the viewport edge. */
@media(max-width:360px){
  .nav .inner{gap:10px}
  .nav .btn-sm{padding:9px 12px;font-size:.78rem}
}

/* ---------- county hub town list ----------
   The compact list under the prose on a county hub. Shared by every
   county hub, so it lives here rather than inline on one page. */
.town-list{list-style:none;columns:4;column-gap:26px;line-height:2.15;max-width:860px;margin:30px auto 0;text-align:center;font-weight:700;color:var(--midnight)}
@media(max-width:1000px){ .town-list{columns:2} }

/* ---------- stat band ---------- */
.stats{padding-top:150px}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;padding:36px 32px;text-align:center}
/* tabular-nums for the count-up in site.js. The tile itself cannot jump,
   because this b is a block filling a 1fr grid cell whatever it says,
   but the digits are centered, and proportional glyphs make a rolling
   number twitch left and right as a 1 gives way to an 8. Tabular figures
   are all one width, so the number counts up in place. */
.stat b{display:block;font-size:clamp(2.6rem,4.6vw,3.6rem);font-weight:800;color:var(--green);letter-spacing:-.035em;line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums}
.stat span{color:var(--on-dark);font-size:.98rem}

/* ---------- about page ----------
   The About page is the only page where a photograph of a person is
   the content rather than decoration, so these do NOT reuse .hero-art
   (aria-hidden, hidden below 1000px). A face stays visible on a phone.
   Deliberately separate from the homepage's inline .hero-portrait and
   .story, which carry a name plate and a light-background border and
   are not what this page needs. */
.hero-photo{flex:0 0 420px;margin-left:auto}
/* greg-phillies.jpg is a landscape candid, not a circular headshot: the
   frame holds two people, the founder and the owner, and a circle crop
   fits one face.
   Rounded rectangle, mint border because Signal Blue is 2.82:1 on
   Midnight. 420px keeps 700px of copy plus the 56px gap inside the
   1180px wrap, so the copy column never has to shrink. */
.hero-photo img{width:100%;height:auto;aspect-ratio:3/2;border-radius:18px;object-fit:cover;border:3px solid var(--mint);display:block;box-shadow:0 0 0 14px rgba(221,247,236,.05),0 26px 56px rgba(8,42,74,.55)}
/* Names the two faces, which the hero copy implies but never labels.
   Sized and colored to match .hero .proof rather than .photo-figure
   figcaption: that one is --slate, a light-background color, and this
   caption sits on Midnight. */
.hero-photo figcaption{margin-top:18px;text-align:center;font-size:.84rem;line-height:1.6;color:var(--on-dark)}

/* Bio prose around greg-navy-wide.jpg. FLOATED, not a grid column: two
   columns leave whichever one runs shorter as dead space, and the
   513px-tall portrait greg-navy.jpg beside four paragraphs left a band
   of it above the text. Floated, the prose wraps down the side of the
   photo and then runs full width underneath, so neither has to match
   the other's height. greg-navy-wide.jpg is that portrait cropped
   landscape, which keeps the underhang short.
   Requires the figure to come first in the DOM. */
.person-split{display:block}
.person-split::after{content:"";display:block;clear:both}
.person-split p+p{margin-top:18px}
.photo-figure{float:right;width:380px;margin:5px 0 26px 48px}
.photo-figure img{width:100%;height:auto;border-radius:18px;border:1px solid var(--line);display:block;box-shadow:var(--lift)}
.photo-figure figcaption{margin-top:14px;font-size:.9rem;line-height:1.6;color:var(--slate)}

/* ruth-corcoran.jpg and the lead on the dark story band. Mint border, not
   Signal Blue: Signal Blue is 2.82:1 on Midnight and never carries an
   accent on a dark panel. */
.story-portrait{width:150px;height:150px;border-radius:50%;object-fit:cover;border:3px solid var(--mint);display:block;margin:0 auto 30px}
.story-lead{max-width:850px;margin:0 auto 46px;text-align:center;font-size:1.08rem;line-height:1.9;color:var(--on-dark)}
.story-lead a{color:var(--mint)}

/* Dated milestones. A .card on the dark band already supplies the
   surface, so the year is all this adds. */
.era{display:block;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--mint);margin-bottom:10px}

/* ---------- process ---------- */
.step{position:relative}
.step-head{display:flex;align-items:baseline;gap:14px;margin:22px 0 12px}
.step-num{font-size:2.15rem;font-weight:800;color:var(--signal);letter-spacing:-.03em;line-height:1}
.step h3{margin:0;font-size:1.22rem}
.dark .step-num{color:var(--mint)}   /* Signal Blue is 2.82:1 on Midnight */
@media(min-width:1001px){
  .step:not(:last-child)::after{content:"";position:absolute;top:66px;left:100%;width:26px;border-top:2px dashed var(--line)}
}

/* ---------- FAQ ----------
   Native details, custom marker, mint chevron tile that flips when
   open. Padding moves onto the summary and answer so the whole row is
   a click target. */
details{background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--lift);margin-bottom:12px;transition:box-shadow .2s ease}
details:hover,details[open]{box-shadow:var(--lift-hi)}
summary{display:flex;align-items:center;gap:18px;cursor:pointer;font-weight:700;color:var(--midnight);font-size:1.05rem;padding:22px 26px;list-style:none;transition:color .2s ease}
summary::-webkit-details-marker{display:none}
summary:hover,details[open] summary{color:var(--signal)}
.faq-ico{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--signal);display:flex;align-items:center;justify-content:center;transition:transform .25s ease}
.faq-ico svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
details[open] .faq-ico{transform:rotate(180deg)}
details p{margin:0;padding:0 26px 24px;color:var(--slate);font-size:.97rem}
details[open] p{animation:faqIn .3s ease both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.contact{text-align:center}
/* The form is the only thing in this band. Phone and email stay, as one
   quiet line under the button rather than a second column: they are the
   same goal by another channel, not a competing action, and for local
   buyers a visible number is both a real conversion path and a trust
   signal. A column of equal weight made the eye choose; a sentence does
   not. The form is capped at 620px because that is a comfortable width
   to scan a field in, not because the band is narrow. */
.contact-alt{max-width:620px;margin:22px auto 0;color:var(--on-dark);font-size:.98rem}
.contact-alt a{color:var(--white);font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.contact-alt a:hover{color:var(--mint);text-decoration:underline}

/* ---------- audit request form ----------
   Lives in the contact band, so it sits on Midnight. Inputs are white
   with Midnight text, which is the most legible pairing we have and
   matches the card language. Labels are real and always visible, never
   placeholder only. Every control clears 52px so it is a comfortable
   thumb target, and the grid collapses to one column well before 375px.
   The website field is the point of the form, so it sits in a raised
   surface block. Growth Green stays on the button, where the palette
   rules put it, rather than being spent on a border. */
.audit-form{max-width:620px;margin:40px auto 0;text-align:left}
.af-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.af-field{margin:0;display:flex;flex-direction:column}
.af-wide{grid-column:1 / -1}
.af-field label{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);margin-bottom:8px}
.af-opt{text-transform:none;letter-spacing:0;font-weight:600;color:var(--on-dark)}
.af-field input,.af-field textarea{width:100%;font-family:inherit;font-size:1rem;line-height:1.5;color:var(--midnight);background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-height:52px}
.af-field textarea{min-height:92px;resize:vertical}
.af-field input:focus-visible,.af-field textarea:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.af-field input[aria-invalid="true"]{border-color:var(--green-text);border-width:2px}
.af-url{background:var(--surface);border:1px solid var(--hairline);border-radius:14px;padding:16px}
.af-hint{font-size:.82rem;color:var(--on-dark);margin-top:8px}
.af-error{margin:18px 0 0;background:var(--surface-hi);border:1px solid var(--hairline);border-radius:12px;padding:13px 16px;color:var(--white);font-size:.94rem}
.af-error a{color:var(--mint)}
.af-submit{margin-top:22px;width:100%;justify-content:center}
.af-thanks{max-width:620px;margin:40px auto 0;background:var(--surface);border:1px solid var(--hairline);border-radius:16px;padding:30px 28px;color:var(--white);font-size:1.06rem;line-height:1.7}
.af-thanks a{color:var(--mint)}
/* Off-screen rather than display:none, so bots still fill it in. */
.af-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
@media(max-width:1000px){
  .audit-form,.af-thanks{margin-top:36px}
  .af-grid{grid-template-columns:1fr;gap:16px}
}

/* ---------- footer ---------- */
/* The contact band runs straight into the footer, both dark, so a mint
   hairline marks the seam exactly as it does on the live site. */
footer.site{background-color:var(--midnight);border-top:1px solid var(--mint);color:var(--on-dark);padding:88px 0 40px;font-size:.88rem}
/* Five columns since 2026-08-13: the Services column carries links to
   every service page, so every page reaches every other page. */
.foot-grid{display:grid;grid-template-columns:1.15fr .8fr .9fr .9fr 1.7fr;gap:38px;padding-bottom:44px}
.foot-grid img{display:block;width:200px;height:auto;margin-bottom:18px}
.foot-home{display:block;line-height:0}
.foot-head{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);margin-bottom:16px}
.foot-links{list-style:none;line-height:2.15}
footer.site a{color:var(--on-dark);text-decoration:none}
footer.site a:hover{color:var(--mint);text-decoration:underline}
.foot-tag{margin-bottom:16px;max-width:30ch}
.foot-nap{line-height:1.95}
/* The NAP lines are links (map, tel, mailto) but must not read as a link
   list: they keep the footer's own text color, and the only thing a
   pointer or the keyboard changes is the underline. */
footer.site .foot-nap a,footer.site .foot-bottom p a{color:inherit;text-decoration:none}
footer.site .foot-nap a:hover,footer.site .foot-nap a:focus,footer.site .foot-nap a:focus-visible,footer.site .foot-bottom p a:hover,footer.site .foot-bottom p a:focus,footer.site .foot-bottom p a:focus-visible{color:inherit;text-decoration:underline}
.foot-area ul{list-style:none;columns:3;column-gap:22px;line-height:1.95}
.foot-area p{margin-top:14px}
.foot-bottom{border-top:1px solid var(--hairline);padding-top:26px;text-align:center;font-size:.8rem;line-height:2}
.social{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.social a{border:1px solid var(--hairline);border-radius:999px;padding:7px 18px;font-size:.78rem;font-weight:600}
/* Qualified with footer.site so it outranks footer.site a:hover, which
   would otherwise underline the pills against this rule's intent. */
footer.site .social a:hover{border-color:var(--mint);text-decoration:none}

@media(max-width:1000px){
  section{padding:84px 0}
  .hero{padding:76px 0 0}
  .hero--page{padding:0 0 72px}
  .hero--page .eyebrow{margin-top:30px}
  .hero-split{display:block}
  .hero-copy-col{max-width:none}
  .hero-art{display:none}
  /* The photo is content, so it stays instead of disappearing the way
     .hero-art does, which is why the About hero needs flex here where
     the others get display:block. It shrinks and follows the copy.
     align-items:stretch, not flex-start: flex-start sizes each child to
     its own content, and at 320px the copy column's min-content width
     (set by the two CTA buttons, which do not wrap) is 273px against
     260px of available room, so the text pushed 13px past the wrap's
     right padding and the hero read 30px left, 17px right. Stretch
     holds both children to the wrap and the insets come back even. */
  .hero-split-photo{display:flex;flex-direction:column;align-items:stretch}
  /* No order property on purpose. The figure already follows the copy
     column in the DOM, so source order is the order we want: headline
     first on the phone screen, photo under the lead. This carried
     order:-1 until 2026-08-20, which floated the photo above the
     headline and pushed the H1 off the first screen.
     flex:0 0 auto, not the desktop 0 0 420px: in a column the basis is a
     HEIGHT, and 420px would leave a slab of dead space under the photo.
     The margin-top opens the gap under the copy column, a job the
     eyebrow's own margin-top did while the photo led. */
  .hero-photo{flex:0 0 auto;margin:38px 0 0}
  .hero-photo img{width:100%;margin:0}
  /* Left, not centered: the photo's left edge lines up with the copy
     stacked above it, and a centered caption breaks that edge. */
  .hero-photo figcaption{text-align:left;margin-top:14px}
  /* No float on a phone: 380px of photo would leave a column of
     prose too narrow to read beside it. */
  .photo-figure{float:none;width:100%;margin:0 0 34px}
  .grid3,.grid2,.grid4,.statgrid{grid-template-columns:1fr;gap:20px}

  .stats{padding-top:110px}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  .foot-area ul{columns:2}
}

@media(prefers-reduced-motion:reduce){
  .faq-ico{transition:none}
  details[open] p{animation:none}
  .card,.card:hover{transition:none;transform:none}
}