/* ============================================================================
   Theme: navy on light.
   Loaded after site.css, so these rules win on equal specificity.
   Direction from the operator: off the dark palette. The page ground is white
   and very light grey. Deep navy carries the bar, the headings and the panel
   surfaces. Amber is untouched: prices, numbered markers, tags.
   The token remap is the load-bearing part. Every surface that was drawn with
   var(--ink) becomes navy here, without hunting down each selector.
   ========================================================================== */

:root{
  --paper:#FAFAFA;
  --paper-2:#FFFFFF;
  --paper-3:#F1F1F2;

  --navy:#0B2545;
  --navy-2:#12395F;
  --navy-3:#1E4D7B;

  /* the remap: near-black surfaces become navy */
  --ink:#0B2545;
  --ink-2:#12395F;

  /* body text stays near-black on light, not white on dark */
  --text:#14181C;
  --muted:#545C68;
  --muted-2:#6E7683;
  --amber-text:#8A5A05;

  --line:rgba(11,37,69,.14);
  --line-2:rgba(11,37,69,.07);

  --sh-1:0 1px 2px rgba(11,37,69,.07);
  --sh-2:0 20px 48px -24px rgba(11,37,69,.30);

  --on-navy:#FFFFFF;
  --on-navy-2:rgba(255,255,255,.80);
  --on-navy-3:rgba(255,255,255,.60);

  --r-sm:12px; --r-md:18px; --r-lg:22px; --r-xl:28px;
}

body{ background:var(--paper); color:var(--text); }

/* ---------- type: headings carry the primary colour ---------------------- */
h1, h2, h3, h4, legend{ color:var(--navy); }
.lede{ color:var(--muted); }
.stat p, .step p, .area p, .svc-body, .hub-card p, .faq-a, .book-note, .tiny{ color:var(--muted); }
.sec--dark .lede, .sec--dark p, .closing .lede, .closing p{ color:var(--on-navy-2); }
.sec--dark h1, .sec--dark h2, .sec--dark h3, .closing h1, .closing h2, .closing h3{ color:var(--on-navy); }

/* ---------- the bar ------------------------------------------------------ */
.nav{
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 1px 0 rgba(0,0,0,.10);
}
.nav.is-scrolled{
  background:var(--navy);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.65);
}
.nav-brand, .nav-brand span{ color:#fff; }
.nav-brand svg{ color:#fff; }
.nav-links a{ color:var(--on-navy-2); }
.nav-links a:hover{ color:#fff; }
.nav-links a[aria-current="page"]{ color:#fff; }
.nav-menu summary{ color:#fff; border-color:rgba(255,255,255,.30); background:rgba(255,255,255,.10); }
.nav-menu summary i, .nav-menu summary span{ background-color:#fff; }
.nav-menu summary svg{ color:#fff; }

/* the one place a button keeps amber: it sits on the navy bar, so navy there
   would disappear. Everywhere else the primary action is navy. */
.nav .btn, .nav .btn--amber{ background:var(--amber); color:#241703; border-color:transparent; }
.nav .btn:hover, .nav .btn--amber:hover{ background:#F0AE33; }

/* the phone drawer stays light, with the action reading white on navy */
.nav-sheet{ background:#FFFFFF; border-color:var(--line); }
.nav-sheet a{ color:var(--navy); }
.nav-sheet a[aria-current="page"]{ color:var(--navy); }
.nav-sheet .btn, .nav-sheet a.btn{ background:var(--navy); color:#fff; }

/* ---------- buttons: primary is navy, amber stays the accent ------------ */
.btn--amber, .btn--ink{
  background:var(--navy);
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 24px -14px rgba(11,37,69,.55);
}
.btn--amber:hover, .btn--ink:hover{ background:var(--navy-2); }
.btn--ghost{ border-color:var(--line); color:var(--navy); background:transparent; }
.btn--ghost:hover{ border-color:var(--navy); background:rgba(11,37,69,.05); }
.closing .btn--ghost, .sec--dark .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.34); }
.closing .btn--ghost:hover, .sec--dark .btn--ghost:hover{ background:rgba(255,255,255,.10); }
.hero-link{ color:var(--amber-text); }
.hero-link:hover{ color:var(--navy); }

/* ---------- dark panels become navy ------------------------------------- */
.sec--dark > .wrap{ background:var(--navy); }
.scene{ background:var(--navy); }
.closing{ background:var(--navy); }
.review-bar{ background:var(--navy); color:var(--on-navy-2); }
.mobile-bar{ background:var(--navy); }
.mobile-bar a, .mobile-bar span{ color:#fff; }
.area-n{ color:var(--amber); }
.sec--dark .area h3{ color:#fff; }
.sec--dark .area p{ color:var(--on-navy-2); }
.sec--dark .report-list li{ color:var(--on-navy-2); }
.sec--dark .report-claim{ color:#fff; }

/* ---------- panels, cards, dividers ------------------------------------- */
.svc, .hub-card, .plan, .book-card, .report-frame, .statement, .choose-row{
  background:#fff;
  border-color:var(--line);
  box-shadow:var(--sh-1);
}
.plan--main{ border-color:rgba(11,37,69,.22); }
.plan-tag{ background:var(--amber); color:#241703; }
.plan-tag--alt{ background:var(--navy); color:#fff; }
.svc-line, .choose-k{ color:var(--navy); }
.svc-price b, .price, .choose-p, .book-row b{ color:var(--navy); }
.price small, .price-note span, .plan .price small{ color:var(--muted); }
.stat b, .step b{ color:var(--amber-text); }
.hero-price b{ color:var(--navy); }
.hero-price{ background:#fff; border-color:var(--line); color:var(--muted); }
.price-note, .guarantee{ background:rgba(11,37,69,.045); border-color:var(--line); }
.guarantee h3{ color:var(--navy); }
.book-row{ border-color:var(--line-2); }
.faq details{ border-color:var(--line); }
.faq summary{ color:var(--navy); }
.foot{ background:transparent; border-top:1px solid var(--line); }
.foot h4{ color:var(--navy); }
.foot-legal{ color:var(--muted); }
.eyebrow{ color:var(--amber-text); }

/* ---------- hero video, first thing under the bar ----------------------- */
.hero--video-first{ padding-top:calc(var(--banner-h) + var(--nav-h)); }
.hero-media--lead{
  width:100%;
  margin:0;
  border-radius:0;
  height:clamp(240px,46vw,540px);
  background:var(--navy);
}
.hero-media--lead video{ width:100%; height:100%; object-fit:cover; border-radius:0; }
.hero-media--lead figcaption{
  background:linear-gradient(transparent, rgba(6,18,34,.72));
  color:rgba(255,255,255,.88);
  border-radius:0;
}
.hero-media--lead figcaption b{ color:#fff; }
.hero--video-first .hero-in{ margin-top:clamp(28px,4.6vw,56px); }

/* ---------- the inner-page hero is a LIGHT band --------------------------
   site.css re-states .page-hero on paper in its Quiet-light block, so the
   --ink remap never reaches it. It carries navy headings on paper, which is
   what the direction asks for. Only .closing and the dark panels go navy.
   Measured before this fix: white on paper at 1.04:1, and raw amber at
   2.12:1. Both are corrected here, not argued with. */
.page-hero{ background:var(--paper); color:var(--text); }
.page-hero h1{ color:var(--navy); }
.page-hero .lede{ color:var(--muted); }
.page-hero .eyebrow{ color:var(--amber-text); }
.page-hero .btn--amber{ background:var(--navy); color:#fff; }
.page-hero .btn--amber:hover{ background:var(--navy-2); }
.page-hero .btn--ghost{ border-color:var(--line); color:var(--navy); }
.page-hero .hero-price{ background:#fff; border-color:var(--line); color:var(--muted); }
.page-hero .hero-price b{ color:var(--navy); }
.page-hero .hero-link{ color:var(--amber-text); }
.page-hero .hero-link:hover{ color:var(--navy); border-color:var(--navy); }

/* the closing band stays navy, and everything written on it stays legible */
.closing{ background:var(--navy); color:#fff; }
.closing h2{ color:#fff; }
.closing .lede, .closing p{ color:var(--on-navy-2); }
.closing small{ color:var(--on-navy-3); }
.closing .btn--amber{ background:var(--amber); color:#241703; }
.closing .btn--amber:hover{ background:#F0AE33; }
.closing .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.34); }
.closing .btn--ghost:hover{ background:rgba(255,255,255,.10); }

/* ---------- the footer sits on paper, and site.css paints it white ------ */
.foot{ background:transparent; color:var(--muted); }
.foot a{ color:var(--navy); }
.foot a:hover{ color:var(--navy-2); }
.foot h4{ color:var(--navy); }
.foot-brand .mark span{ color:var(--navy); }
.foot-legal{ color:var(--muted); }
.foot-legal b{ color:var(--navy); }

/* ---------- headings inside light cards must not stay white ------------- */
.plan h2, .plan h3, .svc h3, .hub-card h3, .book-card h3,
.send-extra h3, .guarantee h3, .statement h3{ color:var(--navy); }
.review-bar{ color:var(--on-navy-2); }
.review-bar b{ color:#fff; }

/* ---------- mobile: the home hero row was the odd one out ---------------
   site.css stretches .hero .btn-row .btn to a full line under 700px but
   leaves .hero-link at its natural width, so the secondary link hung off the
   left edge under a full-width button. Every other row either stretches both
   children or centres the pair. This stacks the hero row and centres both,
   which is also the bigger tap target for the phone. Desktop is untouched:
   measured at 1440px the pair still sits inline at 210px and 172px. */
@media (max-width:699px){
  .hero .btn-row{ flex-direction:column; align-items:center; justify-content:center; gap:14px; }
  .hero .btn-row .btn{ flex:0 0 auto; width:100%; }
  .hero .btn-row .hero-link{ align-self:center; text-align:center; }
}

/* ---------- hero composition, after the booking card came out ------------
   The card is gone, so the hero is one column and the choice sits in the
   copy: the two rows from the booking page, word for word, above the button.
   The complaint was that the paragraph was squeezed between the headline and
   the button, so the row gap opens and the paragraph gets room on both sides.
   Measured after: 26px above the paragraph, 30px below it, at 390 and 1440. */
.hero-in{ gap:clamp(18px,2.2vw,24px); }
.hero-in h1{ margin:0; }
.hero-in .lede{ margin-block:clamp(4px,1vw,10px); }
.choose--hero{ max-width:560px; margin-top:clamp(2px,.8vw,8px); }
.hero .btn-row{ margin-top:clamp(6px,1.4vw,14px); }
/* No narrower wrap on the hero. Tried it: capping .hero-in at 820px centres the
   wrap and pulls the hero's left edge off the line every section below it
   shares. The paragraph is capped by its own 52ch and the choice by 560px, so
   the horizontal rhythm stays intact without touching the wrap. */

/* ---------- the round menu button, made readable -------------------------
   The bars were 16px long, 1.6px thick, 5px apart, inside a 40px circle, which
   reads as a smudge on a phone. Thicker, longer, wider apart, and a stronger
   ring so the control is obvious. */
.nav-menu summary{
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:100px;
  background:rgba(255,255,255,.06);
}
.nav-menu summary i,
.nav-menu summary i::before,
.nav-menu summary i::after{
  width:18px; height:2.4px; border-radius:2px; background:#fff;
}
.nav-menu summary i::before{ top:-6px; }
.nav-menu summary i::after{ top:6px; }
.nav-menu[open] summary{ background:rgba(255,255,255,.18); }

/* ---------- "View details" on the two hero rows -------------------------- */
.choose-more{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px; font-size:.87rem; font-weight:600; color:var(--amber-text);
  border-top:1px solid var(--line-2); padding-top:10px;
}
.choose-more svg{ width:15px; height:15px; flex:none; transition:transform .18s ease; }
.choose-row:hover .choose-more{ color:var(--navy); }
.choose-row:hover .choose-more svg{ transform:translateX(3px); }

/* ---------- /what-we-do opens on the statement, not a title --------------
   The big line came out of that page, so the small "What we do" label is what
   carries the h1 now. site.css sizes .page-hero h1 for a display heading, so
   this pins it back to the eyebrow size and colour it shows everywhere else.
   Only matches an h1 that carries the eyebrow class, so no other page moves. */
.page-hero h1.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.13em; line-height:1.5;
  text-transform:uppercase; color:var(--amber-text); max-width:none;
}

/* With the section intro gone, the section's own top padding sat under the
   statement and left 106px of nothing on a phone, 174px on desktop. This trims
   only the top of the first section on that page. Class-scoped, nothing else
   moves: the id #both is also used on the pricing page, so a class it is. */
.sec--lead{ padding-top:clamp(22px,3vw,34px); }

/* ---------- pages that open straight into a section, no page hero --------
   /pricing lost its whole hero, so nothing carries the offset for the fixed
   nav any more. Without this the first card would sit under the bar. */
.sec--first{ padding-top:calc(var(--banner-h) + var(--nav-h) + clamp(24px,3.6vw,44px)); }

/* The heading that must exist for structure but should not be seen. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- the phone menu: mark the current page, and close with an X ----
   The sheet's links were all the same navy, so the page you are on was not
   marked at all. Colour alone is a weak cue, so weight moves with it too.
   And the icon stayed a hamburger while the menu was open, with no visible way
   to shut it: it now becomes an X while open. */
.nav-sheet a[aria-current="page"]{
  color:var(--amber-text); font-weight:700;
  background:rgba(11,37,69,.06); border-radius:12px;
}
.nav-menu[open] summary i{ background:transparent; }
.nav-menu[open] summary i::before{ top:0; transform:rotate(45deg); }
.nav-menu[open] summary i::after{ top:0; transform:rotate(-45deg); }
.nav-menu summary i, .nav-menu summary i::before, .nav-menu summary i::after{
  transition:transform .18s ease, top .18s ease, background-color .18s ease;
}

/* ---------- space under a section heading that sits above price cards ----
   Each plan card hangs a badge above its own top edge, and the heading had no
   bottom margin once its lede came out, so the badge and the heading were
   touching. This opens the gap. Scoped to a heading followed by the plans
   grid, which is the pricing layout, so the service pages do not move. */
.sec-head + .plans{ margin-top:clamp(30px,4vw,44px); }

/* ---------- the question groups on /questions ---------------------------
   Three FAQ groups sat in ordinary sections, so 56px of padding under one
   stacked on 56px above the next: 116px of nothing between groups on a phone,
   181px on desktop, and 79 to 110px above the first group. These groups are
   one continuous list, not three separate sections, so their padding comes
   down. Class-scoped: no other page's section padding moves. */
.sec--faq{ padding-block:clamp(16px,2vw,22px); }
/* The heading was stranded: 26px of grid gap above the list plus 20 to 30px of
   inline margin under the heading. The gap belongs to the wrapper, so it is
   tightened here; the inline margin on the list itself is edited in the page. */
.sec--faq .statement{ gap:14px; }

/* ---------- the six-area block, accordion treatment ---------------------
   Chosen from three built variants. The map stays above the list and the rows
   keep the class "area" and their data-hs key, so the existing hotspot script
   still lights the area being read. Each row carries the same checks the
   paragraph used to; they read as ticks instead of prose. */
.areas-map{ margin:0 0 clamp(22px,3.4vw,34px); }
.aA-row{ display:block; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15); border-radius:16px; padding:0 16px; }
/* The row keeps the class "area" for the diagram script, but the old block laid
   .area out as a two-column grid. Without this the opened checks were squeezed
   into the narrow right column beside the question. */
.areas-list .aA-row{ display:block; }
.aA-row + .aA-row{ margin-top:10px; }
.aA-row summary{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; padding:16px 0; color:#fff; font-weight:600; list-style:none; }
.aA-row summary::-webkit-details-marker{ display:none; }
.aA-row summary::marker{ content:''; }
.aA-q{ font-size:1.01rem; line-height:1.34; }
.aA-row summary::after{ content:'+'; margin-left:auto; color:var(--amber); font-size:1.25rem; line-height:1; flex:none; }
.aA-row[open] summary::after{ content:'\2013'; }
/* Two classes deep on purpose: site.css styles lists inside the dark card too, and
   a bare .aA-ul lost that fight, which left the checks indented under the number
   instead of under the question they belong to. */
.areas-list .aA-ul{ list-style:none; margin:0 0 18px; padding:14px 0 0 30px; display:grid; gap:11px;
  border-top:1px solid rgba(255,255,255,.12); }
.aA-ul li{ display:flex; gap:11px; align-items:flex-start; color:rgba(255,255,255,.86); font-size:.97rem; line-height:1.45; }
.aA-ul svg{ width:15px; height:15px; flex:none; margin-top:3px; color:var(--amber); }
.area-n{ font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; color:var(--amber); flex:none; padding-top:3px; }
/* On a phone every dark card runs edge to edge: no strips of page down either
   side. Applies to the six-area block and the "what you get" report block on both
   service pages, which are the dark cards on the site. The card keeps its own
   16px of inner padding, so the rows sit inside it rather than touching the glass. */
@media (max-width:699px){
  .sec--dark{ padding-inline:0; }
  .sec--dark > .wrap{ max-width:100%; border-radius:0; padding-inline:16px; }
}

/* ---------- touch targets, on NN/g's numbers ----------------------------
   1cm x 1cm is the stated minimum, and crowding is what actually causes
   mis-taps: the footer links were 16px tall and stacked 16px apart, so a thumb
   landing between two of them hit the wrong one. These are the controls that
   measured under the line. */
.nav-brand{ padding-block:8px; }                      /* 30px -> 46px tall */
.nav-menu summary{ width:44px; height:44px; }         /* was 38px */
.hero-link, .report-link{ display:inline-flex; align-items:center; min-height:44px; }

/* The footer's own links, on a phone only. Desktop keeps its compact columns.
   Two columns on a phone left the shorter list opposite empty space, so on a
   phone the lists stack into one column and each row is a full-width target
   with a hairline between, so the height reads as structure. */
@media (max-width:699px){
  .foot-wrap{ grid-template-columns:1fr; }
  .foot ul{ display:grid; gap:0; }
  .foot li a{ display:flex; align-items:center; min-height:44px; border-bottom:1px solid var(--line-2); }
  .foot li:last-child a{ border-bottom:0; }
}

/* ---------- keyboard focus ----------------------------------------------
   Buttons and disclosure controls already showed a 3px outline. Plain links
   fell back to the browser default, 1px near-black, which is invisible on the
   navy bar. Amber reads on both grounds. */
a:focus-visible, summary:focus-visible, .choose-row:focus-visible{
  outline:3px solid var(--amber); outline-offset:2px; border-radius:8px;
}

/* ---------- skip link ---------------------------------------------------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  padding:12px 18px; background:var(--navy); color:#fff;
  font-weight:600; border-radius:10px; text-decoration:none;
}
.skip-link:focus{
  left:12px; top:calc(var(--banner-h) + 8px);
  outline:3px solid var(--amber); outline-offset:2px;
}

/* ---------- 320px-class phones: no sideways scroll -----------------------
   Measured at 320px, the inspection page's body was 335px wide, so the whole
   page panned sideways and the fixed bars stretched with it. Cause: grid and
   flex children default to min-width:auto, which floors a column at its
   content's intrinsic width however narrow the screen gets. The column is
   pinned to minmax(0,1fr) and the media is allowed to shrink. */
#report .wrap, .wrap.report{ grid-template-columns:minmax(0,1fr); }
.report-copy, .report-frame, #report .wrap > *{ min-width:0; }
.report-frame img, .report-copy img{ width:100%; max-width:100%; height:auto; }
@media (max-width:699px){
  .foot li, .foot li a{ min-width:0; }
  .foot li a span{ overflow-wrap:anywhere; }
}

/* 320px nav: brand + menu + Book came to 333px inside 22px of side padding.
   Landing the padding and the gaps brings it to about 309. */
@media (max-width:400px){
  .nav .nav-in{ padding-left:14px; padding-right:14px; gap:8px; }
}

/* ---------- the two hero cards, written on PAS ---------------------------
   They are the first clickable things on the page, so each one now runs
   problem, then what it costs to leave alone, then what we do about it. The
   resolution line carries colour and weight so the card resolves instead of
   only describing the service. Line breaks are real lines, not a paragraph,
   because at this size a reader scans rather than reads. */
.choose-row .choose-d{ display:grid; gap:6px; }
.choose-d .cr-l{ display:block; }
.choose-d .cr-l--fix{ color:var(--navy); font-weight:600; }
@media (min-width:700px){ .choose-row .choose-d{ gap:7px; } }