/* ===========================================================
   Adelaide Cleaning Co. — PPC landing pages
   Palette derived from the client's real Google Business Profile
   logo lockup (navy + gold). System font stacks only: zero font
   downloads, zero CLS, faster LCP.
   =========================================================== */

:root{
  --navy:#14243F;
  --navy-deep:#0D1930;
  --navy-soft:#1E3556;
  --gold:#C9A227;
  --gold-bright:#E0B93C;
  --gold-ink:#7A6010;          /* gold dark enough for text on light (5.9:1) */
  --cream:#FAF7F0;
  --cream-2:#F3EEE3;
  --ink:#16202F;
  --muted:#4F5C74;             /* 7.0:1 on white */
  --muted-light:#C6CEDC;       /* on navy */
  --border:#E4DDD0;
  --white:#fff;
  --ok:#1F7A4D;
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(20,36,63,.06),0 2px 8px rgba(20,36,63,.06);
  --shadow-md:0 4px 12px rgba(20,36,63,.08),0 12px 32px rgba(20,36,63,.10);
  --shadow-lg:0 18px 50px rgba(13,25,48,.22);
  --serif:ui-serif,Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1140px;
  --hdr-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.015em;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

/* every major section is anchor-linkable; offset for the sticky header */
[id]{scroll-margin-top:calc(var(--hdr-h) + 16px)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.section{padding:76px 0}
.section--cream{background:var(--cream)}
.section--navy{background:var(--navy);color:var(--white)}
.section--navy h2,.section--navy h3{color:var(--white)}

.eyebrow{
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px;
}
.section--navy .eyebrow{color:var(--gold-bright)}
h2.sec-title{font-size:clamp(28px,4vw,42px);margin-bottom:14px}
.sec-sub{font-size:18px;color:var(--muted);max-width:62ch;margin-bottom:38px}
.section--navy .sec-sub{color:var(--muted-light)}
.sec-head{margin-bottom:8px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:999px;border:2px solid transparent;
  font-weight:700;font-size:16.5px;text-decoration:none;letter-spacing:-.01em;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--gold{background:var(--gold);color:var(--navy);box-shadow:0 4px 14px rgba(201,162,39,.34)}
.btn--gold:hover{background:var(--gold-bright);box-shadow:0 6px 20px rgba(201,162,39,.44)}
.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{background:var(--navy-soft)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:var(--white)}
.btn--block{width:100%}
.btn--lg{padding:18px 32px;font-size:17.5px}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;background:var(--white);
  border-bottom:1px solid var(--border);
}
.hdr__in{display:flex;align-items:center;gap:22px;height:var(--hdr-h)}

/* Logo lockup = the real ACC icon + LIVE TEXT for the name.
   The full logo image carried internal whitespace, so its 74px box filled the
   76px header and the visible ink never optically aligned with the nav/phone.
   Setting the wordmark as text puts alignment under flexbox control and keeps
   the type crisp at any size. */
.hdr__logo{flex:0 0 auto;display:flex;align-items:center;gap:11px;text-decoration:none}
.hdr__logo img{width:46px;height:46px;border-radius:8px;display:block;flex:0 0 auto}
/* Two stacked lines rather than one long one: "Cleaning Co." is the widest
   string, so the lockup drops from ~276px to ~150px and hands the difference
   back to the nav. */
.hdr__word{display:flex;flex-direction:column;justify-content:center}
.hdr__word-l1,.hdr__word-l2{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  letter-spacing:-.015em;white-space:nowrap;line-height:1.08;font-size:18px;
}
.hdr__word-l2{color:var(--gold-ink)}
.hdr__nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.hdr__nav a{
  text-decoration:none;font-size:15px;font-weight:600;color:var(--ink);
  white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent;
}
.hdr__nav a:hover{color:var(--navy);border-bottom-color:var(--gold)}
.hdr__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* Header phone: must be an obvious, high-contrast tappable control (>=4.5:1). */
.hdr__phone{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:11px 18px;border-radius:999px;border:2px solid var(--navy);
  color:var(--navy);font-weight:800;font-size:16px;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.hdr__phone:hover{background:var(--navy);color:var(--white)}
.hdr__phone svg{width:17px;height:17px;flex:0 0 auto}

/* Header quote CTA: hidden until the hero form scrolls out of view, so it is
   never a no-op button and stays out of the tab order until it is useful. */
.hdr__cta{
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
  padding:12px 22px;font-size:15.5px;
}
.hdr__cta.is-shown{opacity:1;visibility:visible;transform:none}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--navy-deep);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 35%}
/* Weighted only to the left, where the copy sits. The previous ramp stayed
   above .78 all the way to 56% and buried the client's best trust asset —
   a real cleaner in a real Adelaide kitchen — under a flat navy wash. */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(13,25,48,.95) 0%,rgba(13,25,48,.90) 26%,
    rgba(13,25,48,.70) 44%,rgba(13,25,48,.34) 66%,
    rgba(13,25,48,.20) 100%);
}
.hero__in{
  display:grid;grid-template-columns:1fr 448px;gap:56px;align-items:center;
  padding:60px 0 66px;
}
.hero__copy{color:var(--white);max-width:600px}

.hero__rating{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(255,255,255,.11);border:1px solid rgba(224,185,60,.4);
  padding:8px 15px;border-radius:999px;margin-bottom:22px;
  font-size:14.5px;font-weight:600;color:#fff;
}
.stars{color:var(--gold-bright);letter-spacing:1px;font-size:15px}
.hero h1{
  font-size:clamp(34px,5vw,55px);color:#fff;margin-bottom:18px;letter-spacing:-.022em;
}
.hero h1 em{font-style:normal;color:var(--gold-bright)}
.hero__sub{font-size:19px;color:#E8ECF4;margin-bottom:26px;max-width:52ch}
.hero__sub b{color:#fff;font-weight:700}

/* 2x2 grid, not flex-wrap: four chips of differing width wrapped 3+1, which
   read as a mistake. An even grid reads as deliberate. */
.hero__chips{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;
  max-width:530px;margin-bottom:26px;
}
.chip{
  display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  padding:9px 14px;border-radius:999px;
}
.chip svg{width:14px;height:14px;color:var(--gold-bright);flex:0 0 auto}

/* Desktop: show the READABLE number (tel: is a mobile affordance).
   Mobile: swap to a real tap-to-call button + a jump-to-form button. */
.hero__callline{font-size:16.5px;color:#DDE3EE}
.hero__callline a{color:#fff;font-weight:800;text-decoration:none;border-bottom:2px solid var(--gold-bright);white-space:nowrap}
.hero__callline span{display:block;font-size:14px;color:var(--muted-light);margin-top:4px}

/* ---------- quote form ---------- */
.qcard{
  background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:26px 26px 22px;
}
.qcard__head{margin-bottom:16px}
.qcard__title{font-size:23px;margin-bottom:6px}
.qcard__sub{font-size:14.5px;color:var(--muted)}
/* The incentive sits with the action, above the fold, per Ads LP-experience rules */
.qcard__offer{
  margin-top:11px;background:#FFF7E0;border:1px solid var(--gold);
  border-radius:9px;padding:9px 12px;font-size:14.5px;color:var(--ink);
}
.qcard__offer strong{color:var(--gold-ink)}
.qcard__steps{display:flex;align-items:center;gap:8px;margin-bottom:18px}
.qstep{
  flex:1;height:5px;border-radius:99px;background:var(--cream-2);
}
.qstep.is-on{background:var(--gold)}
.qstep-label{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap;letter-spacing:.04em}

.qpanel[hidden]{display:none}
/* Without JS the form is one long form, so a "Step 1 of 2" indicator and the
   "change" link would both be lies. Hide them unless scripting is available. */
html:not(.js) .qcard__steps,
html:not(.js) #changeSvc{display:none}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
/* Radio tiles. The input is visually hidden but still focusable, so keyboard
   and screen-reader users get a real radiogroup. */
.qfs{border:0;padding:0;margin:0;min-width:0}
.qlegend{
  display:block;font-size:13.5px;font-weight:700;color:var(--ink);
  margin-bottom:9px;padding:0;
}
.qpick{
  display:flex;align-items:center;gap:10px;text-align:left;width:100%;
  padding:14px;border-radius:12px;border:2px solid var(--border);
  background:var(--white);font-size:15px;font-weight:600;color:var(--ink);
  cursor:pointer;position:relative;
  transition:border-color .15s ease,background .15s ease,transform .12s ease;
}
.qpick input,.qbed input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;
}
.qpick:hover{border-color:var(--gold);background:#FFFDF6;transform:translateY(-1px)}
.qpick:has(input:checked){border-color:var(--gold);background:#FFF9E8}
.qpick:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.qpick svg{width:22px;height:22px;color:var(--gold-ink);flex:0 0 auto}

/* Bedroom count — one tap, four equal targets */
.qbeds{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.qbed{
  display:flex;align-items:center;justify-content:center;position:relative;
  padding:13px 6px;border-radius:11px;border:2px solid var(--border);
  background:var(--white);font-size:16px;font-weight:700;color:var(--ink);
  cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
.qbed:hover{border-color:var(--gold);background:#FFFDF6}
.qbed:has(input:checked){border-color:var(--gold);background:#FFF9E8;color:var(--gold-ink)}
.qbed:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}

/* Optional extras, collapsed by default */
.qmore{margin-bottom:14px;border-top:1px solid var(--border);padding-top:12px}
.qmore summary{
  list-style:none;cursor:pointer;font-size:14px;font-weight:700;color:var(--navy);
  display:flex;align-items:center;gap:8px;padding:4px 0;
}
.qmore summary::-webkit-details-marker{display:none}
.qmore summary::before{
  content:"+";display:inline-grid;place-items:center;width:20px;height:20px;
  border-radius:50%;background:var(--cream);border:1px solid var(--border);
  font-size:15px;line-height:1;color:var(--gold-ink);flex:0 0 auto;
}
.qmore[open] summary::before{content:"–"}
.qmore summary:hover{color:var(--gold-ink)}
.qmore__in{padding-top:12px}

.field{margin-bottom:13px}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.field .opt{font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:2px solid var(--border);border-radius:11px;
  font:inherit;font-size:16px;color:var(--ink);background:var(--white);
  transition:border-color .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.field textarea{min-height:74px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.qback{
  background:none;border:none;color:var(--muted);font-size:14px;font-weight:600;
  padding:8px 0;text-decoration:underline;
}
.qtrust{
  display:flex;align-items:center;gap:9px;background:var(--cream);
  border:1px solid var(--border);border-radius:11px;padding:11px 13px;margin-bottom:14px;
  font-size:13.5px;color:var(--ink);font-weight:600;
}
.qtrust .stars{font-size:14px}
/* Unboxed: a second gold panel directly under the offer strip made the card feel
   busy. Same message, a fraction of the visual weight. */
.qurgency{
  display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;
  font-size:13.5px;line-height:1.45;color:var(--muted);
}
.qurgency svg{width:16px;height:16px;color:var(--gold-ink);flex:0 0 auto;margin-top:2px}
.qurgency strong{color:var(--ink)}
.qecho{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:14px;color:var(--muted);margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--border);
}
.qecho strong{color:var(--ink)}
.qnote{font-size:13px;color:var(--muted);text-align:center;margin-top:11px;line-height:1.5}
.qnote__trust{display:inline-block;margin-top:5px;font-weight:600;color:var(--ink)}
.qnote__trust .stars{font-size:12px}
.qnote a{color:var(--navy);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Visible to screen readers only. Used for the "Call" verb in front of the phone
   number, so the accessible name comes from the live number text rather than a
   duplicated aria-label that a number-replacement script would leave stale. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- trust bar ---------- */
.trustbar{background:var(--navy);color:#fff;border-top:3px solid var(--gold)}
/* Five equal columns instead of flex-wrap, which stranded the 5th item alone
   on a second row directly under the hero. */
.trustbar__in{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px 10px;padding:20px 0;
}
.tb{display:flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:600;text-align:left}
.tb svg{width:19px;height:19px;color:var(--gold-bright);flex:0 0 auto}
.trustbar__note{
  border-top:1px solid rgba(255,255,255,.14);padding:11px 0 15px;
  text-align:center;font-size:13px;color:var(--muted-light);
}

/* ---------- service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{
  border:1px solid var(--border);border-radius:var(--radius);background:var(--white);
  padding:24px 22px;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  display:flex;flex-direction:column;
}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--gold)}
.svc__ico{
  width:46px;height:46px;border-radius:12px;background:var(--cream);
  display:grid;place-items:center;margin-bottom:15px;border:1px solid var(--border);
}
.svc__ico svg{width:23px;height:23px;color:var(--gold-ink)}
.svc h3{font-size:20px;margin-bottom:8px}
.svc p{font-size:15.5px;color:var(--muted);margin-bottom:14px;flex:1}
/* The cards already looked interactive (hover lift + link-styled price) but were
   inert. Now the whole card starts the quote with that service pre-selected. */
.svc{cursor:pointer}
.svc__cta{
  display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;
  font-size:14.5px;font-weight:700;color:var(--navy);letter-spacing:-.01em;
}
.svc__cta b{font-size:19px;color:var(--gold-ink)}
.svc__cta .arw{
  font-size:16px;color:var(--gold-ink);transition:transform .18s ease;display:inline-block;
}
.svc:hover .svc__cta .arw{transform:translateX(4px)}
.svc:hover .svc__cta{text-decoration:underline;text-decoration-color:var(--gold)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{position:relative;padding-top:8px}
.step__n{
  width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--navy);
  display:grid;place-items:center;font-weight:800;font-size:19px;margin-bottom:14px;
  font-family:var(--serif);
}
.step h3{font-size:18.5px;margin-bottom:7px}
.step p{font-size:15.5px;color:var(--muted-light)}

/* ---------- reviews ---------- */
.rev-top{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 22px;margin-bottom:26px;box-shadow:var(--shadow-sm);
}
.rev-score{font-family:var(--serif);font-size:40px;font-weight:600;color:var(--navy);line-height:1}
.rev-top__meta{font-size:15px;color:var(--muted)}
.rev-top__meta strong{color:var(--ink)}
/* stretch (not start) so the featured card matches the height of the four
   short reviews beside it; its content centres as a pull-quote rather than
   leaving a dead gap under a short card. */
.rev-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:stretch}
.rev-more{display:grid;gap:12px}
.rev-mini{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 18px;box-shadow:var(--shadow-sm);
}
.rev-mini .stars{font-size:13px}
.rev-mini p{font-size:15px;color:var(--ink);margin:3px 0 6px}
.rev-mini__who{font-size:13px;color:var(--muted);font-weight:600}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.rev .stars{margin-bottom:11px;font-size:16px}
.rev p{font-size:15.5px;color:var(--ink);margin-bottom:16px;flex:1}
.rev__who{display:flex;align-items:center;gap:11px;font-size:14px}
.rev__av{
  width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px;flex:0 0 auto;
}
.rev__name{font-weight:700;color:var(--ink)}
.rev__src{color:var(--muted);font-size:13px}

/* Featured review — MUST come after `.rev p{flex:1}` above, otherwise that rule
   wins on equal specificity and stretches both the tag and the quote, blowing
   two large gaps into the card. */
.rev--feature{justify-content:center;padding:30px}
.rev--feature > p{font-size:19px;line-height:1.62;flex:0 0 auto;margin-bottom:22px}
.rev--feature > p strong{color:var(--navy);font-weight:700}
.rev--feature .stars{font-size:19px;margin-bottom:14px}
.rev-feature__tag{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:14px;flex:0 0 auto;
}

/* ---------- editorial split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:stretch}
/* Fill the column height rather than floating a short landscape photo in the
   middle of ~380px of dead space. Focal point held left-of-centre, where the
   subject stands. */
.split__img{display:flex}
.split__img img{
  width:100%;height:100%;min-height:420px;object-fit:cover;object-position:38% 50%;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
}
.wlist{display:grid;gap:20px;margin-top:6px}
.witem{display:flex;gap:15px}
.witem__ico{
  width:42px;height:42px;border-radius:11px;background:var(--navy);
  display:grid;place-items:center;flex:0 0 auto;
}
.witem__ico svg{width:20px;height:20px;color:var(--gold-bright)}
.witem h3{font-size:18px;margin-bottom:5px}
.witem p{font-size:15.5px;color:var(--muted)}
.wlist-sub{
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-ink);border-top:1px solid var(--border);padding-top:18px;margin-top:2px;
}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tm{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.tm img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.tm__b{padding:15px 16px 17px}
.tm__n{font-family:var(--serif);font-size:19px;font-weight:600}
.tm__r{font-size:14px;color:var(--muted)}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.pc{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px 24px;box-shadow:var(--shadow-sm);position:relative;
}
.pc--feat{border:2px solid var(--gold);box-shadow:var(--shadow-md)}
.pc__badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:var(--navy);font-size:11.5px;font-weight:800;
  letter-spacing:.1em;padding:5px 15px;border-radius:999px;white-space:nowrap;
}
.pc__t{font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:4px}
.pc__amt{font-family:var(--serif);font-size:44px;font-weight:600;color:var(--navy);line-height:1.1}
.pc__amt sup{font-size:20px;top:-14px;position:relative}
.pc__note{font-size:14.5px;color:var(--muted);margin-bottom:18px}
.pc__list{list-style:none;padding:0;margin:0 0 22px;border-top:1px solid var(--border);padding-top:18px}
.pc__list li{display:flex;gap:10px;font-size:15.5px;margin-bottom:10px;align-items:flex-start}
.pc__list svg{width:17px;height:17px;color:var(--ok);flex:0 0 auto;margin-top:4px}
.price-foot{
  margin-top:22px;font-size:15px;color:var(--muted);text-align:center;
}

/* ---------- areas ---------- */
/* 20 suburbs in an even 5x4 grid. Flex-wrap produced ragged 9/7/1 rows with an
   orphan on the last line — the worst-looking block on the page. */
.areas{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.area{
  display:flex;align-items:center;gap:9px;background:var(--white);
  border:1px solid var(--border);border-radius:999px;padding:10px 16px;
  font-size:14.5px;font-weight:600;
}
.area::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.areas-note{
  margin-top:20px;text-align:center;font-size:16px;color:var(--muted);
}
.areas-note strong{color:var(--ink)}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto}
.qa{border-bottom:1px solid var(--border)}
.qa summary{
  list-style:none;cursor:pointer;padding:19px 40px 19px 0;position:relative;
  font-family:var(--serif);font-size:18.5px;font-weight:600;color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--gold-ink);border-bottom:2.5px solid var(--gold-ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.qa[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.qa__a{padding:0 10px 21px 0;color:var(--muted);font-size:16px}
.qa__a p+p{margin-top:11px}

/* ---------- cta band ---------- */
.ctaband{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-deep)}
.ctaband__bg{position:absolute;inset:0;z-index:-2}
.ctaband__bg img{width:100%;height:100%;object-fit:cover;object-position:55% 40%}
.ctaband__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(13,25,48,.93) 0%,rgba(13,25,48,.82) 40%,rgba(13,25,48,.55) 100%)}
.ctaband__in{
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  flex-wrap:wrap;padding:60px 0;color:#fff;
}
.ctaband h2{font-size:clamp(26px,3.4vw,38px);color:#fff;margin-bottom:10px}
.ctaband p{color:#D9E0EC;font-size:17.5px}
.ctaband__urg{
  margin-top:12px;font-size:15px;color:var(--gold-bright);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.ctaband__urg::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-bright);flex:0 0 auto;
}

/* ---------- footer ---------- */
.ft{background:var(--navy);color:#C6CEDC;padding:56px 0 0;font-size:15.5px}
.ft__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;padding-bottom:36px}
/* Footer lockup mirrors the header: real icon on a light tile (the icon is navy,
   so it would vanish straight onto the navy footer) + live text wordmark. */
.ft__brand{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.ft__brand img{
  width:52px;height:52px;border-radius:9px;flex:0 0 auto;
  background:var(--cream);padding:4px;box-sizing:border-box;
}
.ft__brand-word{display:flex;flex-direction:column;justify-content:center}
.ft__brand-main{
  font-family:var(--serif);font-size:21px;font-weight:600;color:#fff;
  letter-spacing:-.015em;line-height:1.05;white-space:nowrap;
}
.ft__brand-sub{
  font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-bright);border-top:1px solid rgba(201,162,39,.55);
  margin-top:5px;padding-top:4px;white-space:nowrap;
}
.ft p{margin-bottom:16px;max-width:44ch}
.ft__ct{display:grid;gap:9px}
.ft__ct a,.ft__ct span{display:flex;gap:10px;align-items:flex-start;color:#E4E9F1;text-decoration:none}
.ft__ct a:hover{color:var(--gold-bright)}
.ft__ct svg{width:17px;height:17px;color:var(--gold-bright);flex:0 0 auto;margin-top:4px}
.ft h3{font-size:16px;color:#fff;margin-bottom:14px;font-family:var(--sans);font-weight:700;letter-spacing:.02em}
.ft__links{display:grid;gap:9px}
.ft__links a{color:#C6CEDC;text-decoration:none}
.ft__links a:hover{color:var(--gold-bright);text-decoration:underline}
.ft__bot{
  border-top:1px solid rgba(255,255,255,.14);padding:20px 0 26px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:14px;
}
.ft__dis{font-size:13.5px;color:#9AA5B8;max-width:70ch;padding-bottom:22px}

/* ---------- draft / verification flags (preview only) ---------- */
.flag{
  display:inline-block;background:#5B3B00;color:#FFE9A8;font-size:11px;font-weight:700;
  letter-spacing:.05em;padding:2px 8px;border-radius:5px;vertical-align:middle;
  font-family:var(--sans);
}

/* ---------- mobile sticky action bar ---------- */
.mbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--border);
  box-shadow:0 -4px 20px rgba(20,36,63,.12);
}
.mbar .btn{flex:1;padding:14px 12px;font-size:16px}

/* ---------- scroll reveal (no-JS safe: only hides when .js is set) ---------- */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
/* Failsafe: JS adds .reveal-off if the observer never fires (or on load), which
   forces every element visible WITHOUT relying on a transition completing.
   Without this the page could render blank if compositing/animation stalls. */
.js.reveal-off .reveal{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ===========================================================
   Responsive
   =========================================================== */
/* Narrower desktops: the header must keep BOTH the phone and the quote CTA, so
   the logo and the nav give up width instead — never the phone. */
@media (max-width:1180px){
  .hdr__word-l1,.hdr__word-l2{font-size:17px}
  .hdr__logo img{width:42px;height:42px}
  .hdr__in{gap:16px}
}
@media (max-width:1080px){
  .hdr__nav{gap:14px}
  .hdr__nav a{font-size:14px}
  .hero__in{grid-template-columns:1fr 410px;gap:36px}
  /* 6 service cards divide evenly into 2 columns; the 3 review cards do NOT,
     so reviews stay at 3 columns to avoid a 2/1 orphan row. */
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .rev-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .team-grid{grid-template-columns:repeat(4,1fr);gap:14px}
  .split{gap:34px}
  .areas{grid-template-columns:repeat(4,1fr)}   /* 20 -> even 5 rows of 4 */
}

@media (max-width:900px){
  .hdr__nav{display:none}
  /* The header CTA is redundant once the sticky bottom bar owns the quote action,
     and because it now sits BEFORE the phone its reserved width would shove the
     phone off-screen. Header = Call, bottom bar = Quote. */
  .hdr__cta{display:none}
  /* The nav carried margin-left:auto; with it hidden the actions need to take
     over right-alignment or the phone floats mid-header. */
  .hdr__actions{margin-left:auto}
  .mbar{display:flex}
  body{padding-bottom:74px}
  .hero__in{grid-template-columns:1fr;gap:26px;padding:38px 0 44px}
  .hero__copy{max-width:none}
  .hero__bg img{object-position:62% 30%}
  /* Copy spans the full width here, so this stays heavier than desktop — but not
     so heavy that the photo disappears entirely. */
  .hero__bg::after{background:linear-gradient(180deg,rgba(13,25,48,.80) 0%,rgba(13,25,48,.86) 48%,rgba(13,25,48,.93) 100%)}
  /* 5 trust items can never divide evenly below 5 columns, so drop the 5th
     (it is repeated in the footer address) and run an even 2x2. */
  .trustbar__in{grid-template-columns:repeat(2,1fr);gap:12px 10px}
  .tb-opt{display:none}
  .steps{grid-template-columns:repeat(2,1fr);gap:26px}
  .split{grid-template-columns:1fr}
  .split__img{order:-1}
  .price-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  /* 3 review cards in 3 columns here left a 182px text measure (~25 chars/line),
     which is too narrow to read. Stack them instead — still an even grid. */
  .rev-grid{grid-template-columns:1fr;max-width:640px;margin:0 auto}
  .rev-layout{grid-template-columns:1fr;max-width:640px;margin:0 auto}
  /* Brand block spans the full width so the two link columns sit evenly beneath
     it, rather than leaving a 2/1 orphan row. */
  .ft__grid{grid-template-columns:1fr 1fr;gap:30px}
  .ft__grid > div:first-child{grid-column:1 / -1}
  .ctaband__in{padding:48px 0}
}

@media (max-width:720px){
  body{font-size:16.5px}
  .section{padding:56px 0}
  .hero__callline{display:none}                /* tel: is the mobile affordance */
  /* The header phone keeps its NUMBER visible on mobile — it is the page's
     primary secondary-CTA and must stay prominent, not shrink to an icon.
     The logo gives up width instead. */
  .hdr__phone{padding:12px 15px;font-size:15px}
  .svc-grid,.rev-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .areas{grid-template-columns:repeat(2,1fr);gap:8px}  /* 20 -> even 10 rows of 2 */
  .area{padding:9px 13px;font-size:14px}
  .hero__chips{grid-template-columns:1fr 1fr;max-width:none;gap:8px}
  .chip{font-size:13px;padding:8px 11px}
  .hdr__word-l1,.hdr__word-l2{font-size:15.5px}
  .hdr__logo img{width:38px;height:38px}
  .hdr__logo{gap:9px}
  /* 2 columns, not 1: six full-width tiles made step 1 a long scroll on a phone.
     Two columns keeps all six in view with tap targets still well over 44px. */
  .qgrid{grid-template-columns:1fr 1fr;gap:8px}
  .qpick{flex-direction:column;align-items:flex-start;gap:7px;padding:12px 11px;font-size:14px}
  .f2{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr}
  .qcard{padding:22px 18px 18px}
  .rev-score{font-size:34px}
  .ctaband__in{flex-direction:column;align-items:flex-start}
}

/* Small phones: the header phone pill takes priority over the wordmark, so the
   wordmark wraps to two lines instead of pushing the phone out of the header. */
@media (max-width:480px){
  .hdr__in{gap:10px}
  .hdr__logo{gap:8px}
  .hdr__logo img{width:36px;height:36px}
  .hdr__word-l1,.hdr__word-l2{font-size:14px}
  .hdr__phone{padding:12px 13px;font-size:14.5px}
}

@media (max-width:420px){
  .hero h1{font-size:31px}
  .hero__sub{font-size:17px}
  .chip{font-size:12px;padding:8px 9px;gap:6px}
}

/* print — strip the noise */
@media print{.hdr,.mbar,.qcard,.ctaband{display:none}}