/* ============================================================================
   Parks Wealth Partners
   Synthesis of four owned TMN builds:
     Eagle    cinematic image-led hero, overlay legibility, CTA clarity, pacing
     FCA      asymmetric headline + portrait, controlled blue photo treatment
     Genesis  proof placed early, restricted here to verified facts only
     Mills    confident photography, direct CTA
   Pathway contributes structural cleanliness only.

   Newsreader display with Libre Franklin text. One accent. Pill controls,
   square everything else. Light page with deliberate dark movements. No mono,
   no gold, no metric tiles, no scroll cues, no decorative dots.
   ========================================================================== */

:root{
  --ink:#06182B; --ink-soft:#0E2440;
  --navy:#0E3A60; --navy-2:#145A8A;
  --accent:#A44B30; --accent-hi:#E28763;
  --paper:#F6F4EF; --paper-soft:#EEEDE8; --paper-warm:#E8E1D4;
  --fg:#14213D; --fg-muted:#596477;
  --on-ink:#E7EAF0; --on-ink-mut:#9FB0C4;
  --hairline:#D5D0C6; --hairline-d:#1B3556;
  --sans:'Libre Franklin',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --max:1320px; --gut:clamp(1.25rem,4vw,2.25rem);
  --ease:cubic-bezier(.22,1,.36,1); --head-h:76px; --flag-h:0px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px)}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--fg);
     background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
picture{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:#E7C8BC;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;padding:12px 20px;font-weight:600}
.skip:focus{left:12px;top:12px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:760px}
.mid{max-width:1000px}
.sec{padding:clamp(4.25rem,6.5vw,6.75rem) 0}
.sec-sm{padding:clamp(2.25rem,3.5vw,3.25rem) 0}
.on-ink{background:var(--ink);color:var(--on-ink)}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{color:#fff}
.on-ink p{color:var(--on-ink)}
.on-ink .muted{color:var(--on-ink-mut)}
.on-paper-soft{background:linear-gradient(135deg,#F0EFEA 0%,var(--paper-soft) 100%)}
.dark,.abyss,.tint,.stone,.field{background:transparent}

/* ── Type ────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.022em;line-height:1.1;font-weight:600;text-wrap:balance}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.028em}
h3,h4{font-family:var(--sans)}
.d1{font-size:clamp(2.65rem,4.8vw,4.15rem);line-height:1;letter-spacing:-.035em;max-width:17ch}
.d2{font-size:clamp(2.15rem,3.4vw,3.15rem);line-height:1.02;letter-spacing:-.032em}
.d3{font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.24}
.d4{font-size:1.02rem;line-height:1.32}
.lede{font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.55;color:var(--fg-muted);max-width:56ch;text-wrap:pretty}
.on-ink .lede{color:var(--on-ink)}
p{text-wrap:pretty;max-width:68ch}
p + p{margin-top:.9em}
.muted{color:var(--fg-muted)}
.eyebrow{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);font-weight:500;margin-bottom:1rem;display:block}
.on-ink .eyebrow{color:var(--on-ink-mut)}
.hairline{height:1px;border:0;background:var(--hairline)}

/* ── Controls ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:15px 28px;border-radius:999px;
     font-weight:500;font-size:.97rem;white-space:nowrap;
     transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary,.btn-dark{background:var(--ink);color:var(--paper)}
.btn-primary:hover,.btn-dark:hover{background:var(--ink-soft);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--hairline);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.on-ink .btn-primary,.hero .btn-primary,.phero .btn-primary,.band .btn-primary{background:var(--paper);color:var(--ink)}
.on-ink .btn-primary:hover,.hero .btn-primary:hover,.band .btn-primary:hover{background:#fff;transform:translateY(-2px)}
.on-ink .btn-ghost,.hero .btn-ghost,.phero .btn-ghost,.band .btn-ghost{border-color:rgba(255,255,255,.34);color:#fff}
.on-ink .btn-ghost:hover,.hero .btn-ghost:hover,.band .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.9rem}
.tlink{font-weight:500;color:var(--accent);border-bottom:1px solid rgba(164,75,48,.42);padding-bottom:2px;transition:border-color .2s var(--ease)}
.tlink:hover{border-bottom-color:var(--accent)}
.tlink .arw{display:none}
.on-ink .tlink,.band .tlink{color:var(--accent-hi);border-bottom-color:rgba(226,135,99,.48)}
.tlink-inline{color:var(--accent);border-bottom:1px solid rgba(164,75,48,.38)}
.tlink-inline:hover{border-bottom-color:var(--accent)}

/* ── Header ──────────────────────────────────────────────────────────────── */
.hdr{position:absolute;top:0;left:0;right:0;z-index:60;background:transparent;transition:background .3s var(--ease)}
.hdr.opaque{position:sticky;background:rgba(246,244,239,.94);border-bottom:1px solid var(--hairline);
            backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* Pages with a hero open with the header overlaid, so the revealed state must stay
   out of flow. Sticky would insert the header box and push the whole document down
   the moment the wordmark appears. Interior pages keep sticky, where the header is
   in flow from first paint and nothing moves. */
.hdr.overlay.opaque{position:fixed}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:var(--head-h);
        position:relative}
/* True-centre the nav against the header, not against whatever the wordmark happens
   to occupy. This keeps it in the same place whether the wordmark is showing or
   held back over the hero. Only above 1200px, where there is room to clear both. */
@media(min-width:1200px){
  .hdr-in > .nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
}
.brand{display:block;flex:none;line-height:0}
.brand img{width:clamp(150px,15vw,178px)}
.brand .lg-white{display:none}
.hdr:not(.opaque) .brand .lg-ink{filter:brightness(0) invert(1)}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{font-size:.93rem;font-weight:500;color:#fff;opacity:.86;position:relative;padding-block:4px}
.nav a:hover,.nav a[aria-current]{opacity:1}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent-hi)}
.hdr.opaque .nav a{color:var(--fg)}
.hdr.opaque .nav a[aria-current]::after{background:var(--accent)}
.hdr-right{display:flex;align-items:center;gap:1.4rem;flex:none}
.hdr-tel{font-size:.93rem;color:#fff;opacity:.82}
.hdr-tel:hover{opacity:1}
.hdr.opaque .hdr-tel{color:var(--fg-muted)}
.hdr-right > .btn{display:none}
.burger{display:none;width:44px;height:44px;position:relative;margin-left:auto}
.burger span{position:absolute;left:11px;width:22px;height:1.5px;background:#fff;transition:.25s var(--ease)}
.hdr.opaque .burger span{background:var(--ink)}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:59;background:var(--ink);padding:calc(var(--head-h) + 1.5rem) var(--gut) 2rem;
        display:flex;flex-direction:column;opacity:0;visibility:hidden;overflow-y:auto;
        /* visibility flips instantly on open so focus can enter, and is delayed on close so the fade finishes */
        transition:opacity .25s var(--ease),visibility 0s linear .25s}
.drawer.open{opacity:1;visibility:visible;transition:opacity .25s var(--ease),visibility 0s}
.drawer a{font-size:1.35rem;font-weight:500;color:#fff;padding-block:.85rem;border-bottom:1px solid var(--hairline-d)}
.drawer .btn{margin-top:1.5rem;align-self:flex-start;background:var(--paper);color:var(--ink)}
.drawer-meta{margin-top:auto;padding-top:1.5rem;color:var(--on-ink-mut);font-size:.95rem;line-height:2}

/* ── Hero: Eagle. Owned photography, ink wash, content bottom-left ───────── */
.hero{position:relative;min-height:clamp(600px,92svh,880px);display:flex;align-items:flex-end;
      background:var(--ink);color:#fff;isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2}
/* <picture> is inline by default, so img{height:100%} would resolve against its
   content height and leave the plate short of the hero. */
.hero-media picture{display:block;width:100%;height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 44%;
  filter:saturate(.86) brightness(.94)}
/* Watermark wash: the photograph sits under the ink, never competing with the type. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,24,43,.55) 0%,rgba(6,24,43,.34) 38%,rgba(6,24,43,.93) 100%),
             linear-gradient(90deg,rgba(6,24,43,.88) 0%,rgba(6,24,43,.42) 58%,rgba(6,24,43,.12) 100%)}
.hero-in{width:100%;max-width:var(--max);margin-inline:auto;padding:0 var(--gut) clamp(3rem,7vh,5rem)}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{color:#DCE5EE;max-width:50ch;margin-top:1.1rem}
/* The old H1 is now the deck under the short hook line, which is what it always
   read like. Sits close to the headline so the pair reads as one statement. */
.hero-deck{color:#DCE5EE;max-width:38ch;margin-top:.85rem;
           font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.45}
.hero-bg,.credbar,.stats,.stat,.portrait-tag{display:none !important}

/* Verified context closes the photograph as a separate proof band. It is not a
   cluster of floating metrics inside the hero, and the 5 facts read as one line
   of evidence across the same page grid. */
.hero-proof{background:linear-gradient(90deg,var(--ink) 0%,#0A2039 100%);color:#fff;border-top:1px solid rgba(255,255,255,.18);
            border-bottom:1px solid rgba(255,255,255,.12)}
.hero-proof-list{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.72fr)
                 minmax(0,.94fr) minmax(0,1.35fr) minmax(0,1.05fr);padding-block:0}
.hero-proof-list li{min-width:0;padding:1.15rem clamp(.9rem,1.7vw,1.35rem);
                    border-left:1px solid rgba(255,255,255,.14)}
.hero-proof-list li:first-child{border-left:0;padding-left:0}
.hero-proof-list li:last-child{padding-right:0}
.hero-proof-list b{display:block;color:#fff;font-size:.9rem;font-weight:600;
                   line-height:1.25;letter-spacing:-.01em}
.hero-proof-list span{display:block;margin-top:.22rem;color:var(--on-ink-mut);
                      font-size:.76rem;line-height:1.35}
.hero-proof-list a{display:block}
.hero-proof-list a b{width:max-content;max-width:100%;border-bottom:1px solid rgba(255,255,255,.42)}
.hero-proof-list a:hover b{border-bottom-color:#fff}

/* ── Hero composition: copy sits right of the scene on desktop ────────────────
   The Deerfield plate carries its town and beach on the left and centre, and its
   calm ocean on the right. Putting the copy over the ocean keeps the subject
   readable and gives the type a quiet ground, so the directional wash reverses
   with it. Mobile keeps one full-width reading column and the original order. */
/* Mobile: the type spans the full column, so the left-heavy wash of the base rule
   would bury the scene entirely. Use a vertical-only wash and bias the crop toward
   the pier so the place is actually legible behind the copy. */
@media(max-width:899px){
  .hero-media img{object-position:62% 46%}
  .hero::after{
    background:linear-gradient(180deg,rgba(6,24,43,.62) 0%,rgba(6,24,43,.52) 34%,rgba(6,24,43,.90) 100%)}
}
/* The oversized wordmark is a desktop-only composition device. Mobile keeps the
   compact header logo and never shows a second one. */
.hero-mark{display:none}
/* Mobile: one reading column in the order a person should read it, regardless of
   which desktop column each piece belongs to. */
@media(max-width:899px){
  .hero-in{display:flex;flex-direction:column}
  .hero-top,.hero-copy,.hero-brand,.hero-actions{display:contents}
  .hero h1{order:1}
  .hero-deck{order:2}
  .hero .lede{order:3}
  .hero-primary{order:4}
  .hero-secondary{order:5}
  .hero-primary,.hero-secondary{width:100%;justify-content:center;margin-top:.75rem}
  .hero-proof-list{display:block;padding-block:.35rem}
  .hero-proof-list li{padding:.72rem 0;border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .hero-proof-list li:first-child{border-top:0}
  .hero-proof-list li:last-child{padding-right:0}
}

@media(min-width:900px){
  /* Two independent columns so each stacks on its own rhythm and both land on the
     same baseline: wordmark, action and proof at left over the town, headline and
     lede at right over the ocean. Flex order places them without moving the h1
     from the front of the document. */
  /* Both columns stretch to the same height and distribute their own content, so the
     top of the wordmark lands on the top of the headline and the proof line lands on
     the foot of the lede. Symmetrical without either side being padded out. */
  /* Sit the pair high under the header rather than resting on the hero floor. */
  /* Sit the pair high under the header, and bring the frame in to meet it so the
     bigger composition fills the hero instead of floating above dead space. */
  /* Content keeps its own rhythm and the frame comes in to meet it, so the pair fills
     the hero without either column stretching its internal gaps. */
  /* The hero runs on a wider rail than the page grid so each column sits nearer
     its own edge of the frame. At the common 1280 viewport --max never binds, so
     the side padding is what actually holds the columns in; both levers move.
     The proof band shares the rail or the two would step against each other. */
  .hero-in,.hero-proof-list{max-width:1560px;
                            padding-inline:clamp(.75rem,1.25vw,1.25rem)}
  .hero{align-items:flex-start;min-height:clamp(470px,56svh,515px)}
  /* The hook line is 5 words now, so the block is shorter than it was. Measured from
     the hero's own top edge (the header is transparent over it) this centres the
     composition instead of hanging it under the nav with dead water below. */
  .hero-in{display:flex;flex-direction:column;gap:clamp(1.35rem,2.8vh,1.85rem);
           padding-top:calc(var(--head-h) + clamp(3rem,5.5vh,4.25rem));
           padding-bottom:clamp(2rem,5vh,3.25rem)}
  /* The right column already sits flush to the rail, so the only way to push the
     block further right is to narrow it and open the gutter. 59/41 with a wider
     gap moves its start out and separates the two columns. The right track still
     has to clear "for what comes next" on one line, so it cannot go much under
     41fr before the headline breaks to 3 lines. */
  .hero-top,.hero-actions{display:grid;grid-template-columns:minmax(0,59fr) minmax(0,41fr);
                         gap:clamp(2.5rem,6.5vw,5.5rem)}
  .hero-top{align-items:start}
  .hero-brand{grid-column:1;grid-row:1;display:flex;flex-direction:column;
              align-items:flex-start;gap:clamp(1.35rem,2.5vh,1.8rem)}
  /* Centre the headline block against the full left rail, top of the lockup to the
     foot of the credentials, rather than hanging it from the top. */
  .hero-copy{grid-column:2;grid-row:1;align-self:center}
  .hero-actions{align-items:center}
  /* Pull the primary right inside its own column so the pair reads as one unit
     across the gutter instead of sitting at opposite edges of the hero. */
  .hero-primary{grid-column:1;justify-self:start;min-width:min(100%,318px)}
  .hero-secondary{grid-column:2;justify-self:start;min-width:min(100%,255px)}
  /* 5 words instead of 12, so the hook can carry real size against the wordmark. */
  .hero .d1{font-size:clamp(2.35rem,3.35vw,3.05rem);line-height:1.04;text-wrap:balance}
  /* Sits a touch above the flex flow and a touch under full column width. The
     matching positive margin-bottom keeps the lede where it would otherwise be,
     so nudging the wordmark up does not drag the whole left stack with it. */
  .hero-mark{display:block;width:94%;height:auto;margin-top:-1.2rem;margin-bottom:1.2rem;
             /* One tight edge shadow and one restrained pool preserve the
                letterforms without softening the original artwork. */
             filter:drop-shadow(0 1px 1px rgba(6,24,43,.66))
                    drop-shadow(0 7px 24px rgba(6,24,43,.58))}
  .hero h1{max-width:none}
  .hero-brand .lede{max-width:49ch;margin-top:0;font-size:1.02rem}
  /* Dark enough on the right to carry the copy, dark enough at the far left to carry
     the white wordmark, and lifted through the middle so the beach still reads. */
  .hero::after{
    background:linear-gradient(180deg,rgba(6,24,43,.46) 0%,rgba(6,24,43,.26) 36%,rgba(6,24,43,.90) 100%),
               linear-gradient(270deg,rgba(6,24,43,.84) 0%,rgba(6,24,43,.52) 28%,
                               rgba(6,24,43,.40) 52%,rgba(6,24,43,.86) 100%),
               /* pooled behind the lockup so the letterforms and rule snap off the buildings */
               radial-gradient(58% 46% at 24% 26%,rgba(6,24,43,.62) 0%,rgba(6,24,43,0) 72%)}
  /* Opening state: the hero wordmark is the only logo. The header link keeps its
     space so revealing it causes no layout jump, and stays reachable by keyboard. */
  .hdr:not(.opaque) .brand{opacity:0;transition:opacity .3s var(--ease)}
  .hdr:not(.opaque) .brand:focus-visible{opacity:1}
  .hdr.opaque .brand{opacity:1;transition:opacity .3s var(--ease)}
}
@media(prefers-reduced-motion:reduce){
  .hdr .brand{transition:none !important}
}


.phero{position:relative;background:linear-gradient(120deg,var(--ink) 0%,#0B2946 100%);color:#fff;
       padding-top:calc(var(--head-h) + clamp(2.5rem,5vw,4rem));padding-bottom:clamp(2.25rem,4vw,3.25rem)}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
              background:linear-gradient(90deg,var(--accent-hi),rgba(226,135,99,0) 58%)}
.phero h1{color:#fff;max-width:20ch}
.phero .lede{color:#DCE5EE;max-width:58ch;margin-top:.9rem}
.phero-media{display:none}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.85rem;color:#9FB0C4;margin-bottom:1rem}
.crumbs a{color:#9FB0C4}.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.5}

/* ── Grids and ruled rows ────────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,2.5vw,2.5rem)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,2.5vw,2.25rem)}
.grid-split,.split-wide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,4.5rem);align-items:start}
.split-wide > :first-child h2{max-width:16ch}
.measure-h{max-width:22ch}
.entries{border-bottom:1px solid var(--hairline)}
.entry{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(.5rem,3vw,3rem);
       border-top:1px solid var(--hairline);padding:1.5rem 0;align-items:start}
.entry h3{margin:0;max-width:22ch}
.entry p{color:var(--fg-muted);font-size:.98rem;max-width:64ch}
.on-ink .entries,.on-ink .entry{border-color:var(--hairline-d)}
.on-ink .entry p{color:var(--on-ink)}

/* ── Homepage clients: one image-led anchor with two quieter chapters ────── */
.clients-section{background:
  radial-gradient(80% 70% at 8% 0%,rgba(164,75,48,.055),transparent 62%),
  var(--paper)}
.clients-section .measure-h{max-width:none;margin-bottom:clamp(1.6rem,2.6vw,2.2rem)}

/* The 5 questions frame the 3 situations below them: a prospect recognises their
   own question first, then reads which of the 3 chapters they sit in. Hairline
   rows, no tiles, so it stays inside the paper-and-ink system. */
.questions{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
           column-gap:clamp(1.6rem,4vw,4rem);row-gap:0;align-items:start;
           margin-bottom:clamp(2.4rem,4vw,3.4rem)}
.questions .leadin{font-family:var(--serif);font-size:clamp(1.3rem,1.9vw,1.7rem);
                   line-height:1.25;letter-spacing:-.02em;color:var(--fg);max-width:20ch}
.qlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.qlist li{padding:.85rem 0 .85rem 1.6rem;border-bottom:1px solid var(--hairline);
          position:relative;font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.4;
          color:var(--fg)}
.qlist li::before{content:"";position:absolute;left:0;top:1.32em;width:.55rem;height:1px;
                  background:var(--accent)}
.qclose{grid-column:2;margin-top:1.2rem;color:var(--fg-muted);max-width:52ch}
@media(max-width:899px){
  .questions{grid-template-columns:minmax(0,1fr);row-gap:1.5rem}
  .questions .leadin{max-width:24ch}
  .qclose{grid-column:1}
}
/* 2 audience cards. The earlier 2x2 grid put one image card across both rows beside
   2 plain cards, so at 2 cards row 2 was left empty. Single row of 2 equal image
   cards instead. Restore the spanning card only if a third audience returns. */
.client-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;
             min-height:clamp(540px,46vw,650px);border:1px solid var(--hairline);
             background:var(--hairline)}
.client-card{min-width:0;background:var(--paper-soft);padding:clamp(2rem,3.6vw,3.4rem);
             display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.client-card-featured{padding:0;display:grid;
                      grid-template-rows:minmax(230px,1.05fr) minmax(0,.95fr);
                      background:var(--paper)}
.client-media,.client-media picture{width:100%;height:100%;overflow:hidden}
.client-media{position:relative;background:var(--ink)}
.client-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,24,43,.02),rgba(6,24,43,.28))}
.client-media img{width:100%;height:100%;object-fit:cover;object-position:center 47%;
                  filter:saturate(.7) contrast(1.03);transition:transform .8s var(--ease)}
.client-copy{padding:clamp(2rem,3.5vw,3.25rem)}
.client-card h3{font-family:var(--serif);font-size:clamp(1.65rem,2.35vw,2.35rem);
                line-height:1.05;font-weight:500;letter-spacing:-.03em;max-width:15ch}
.client-card p{margin-top:1rem;color:var(--fg-muted);font-size:.98rem;max-width:60ch}
@media(hover:hover){.client-card-featured:hover .client-media img{transform:scale(1.025)}}

/* The first-meetings sequence is a single editorial run, not three boxes. */
.process-entries{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.92fr) minmax(0,1.08fr);
                 border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.process-entries .entry{display:block;border-top:0;border-left:1px solid var(--hairline);
                        padding:clamp(1.6rem,2.5vw,2.4rem)}
.process-entries .entry:first-child{border-left:0;padding-left:0}
.process-entries .entry:last-child{padding-right:0}
.process-entries .entry h3{font-size:1.12rem;margin-bottom:.75rem}
.card{background:none;border:0;padding:0;display:block}
.card .num{display:none}
.tags{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin-top:.75rem}
.tags li{font-size:.86rem;color:var(--fg-muted)}
.tags li + li::before{content:"/";margin-right:1rem;color:var(--hairline)}
.checks li{position:relative;padding-left:1.4rem;margin-bottom:.6rem;color:var(--fg-muted);font-size:.97rem;max-width:62ch}
.checks li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--accent)}
.on-ink .checks li{color:var(--on-ink)}
.on-ink .checks li::before{background:var(--accent-hi)}
.steps{border-bottom:1px solid var(--hairline)}
.step{border-top:1px solid var(--hairline);padding:1.4rem 0;display:grid;
      grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(.5rem,3vw,3rem);align-items:start}
.step-n{display:none}
.step p{color:var(--fg-muted);font-size:.98rem;max-width:64ch}
.step-meta{display:block;font-size:.87rem;color:var(--fg-muted);margin-top:.4rem}

/* ── Who I Serve: full-width three-column chapter (binding) ──────────────── */
/* Each column is a real grid item. The previous version put every heading,
   paragraph and list into one grid via display:contents and pinned only the
   column, so auto-placement walked each item to the next free ROW and the three
   columns came out as a diagonal staircase with dead space above the checks.
   3fr also left the heading column too narrow for the longest heading. */
.situation{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr);
           gap:clamp(1.25rem,3vw,3.25rem);align-items:start}
.situation-head h2{max-width:18ch;margin:0;text-wrap:balance}
.situation-head .leadin{max-width:34ch;margin-top:.9rem;font-size:.98rem;color:var(--fg-muted)}
.situation-copy{max-width:60ch;color:var(--fg-muted)}
.situation-copy p + p{margin-top:1.15rem}
.situation > .checks{margin-top:0}
.situation-media{display:none}

/* ── About: FCA asymmetric portrait, controlled blue treatment ───────────── */
.bio{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.75rem,4vw,4rem);align-items:start}
.bio-text p + p{margin-top:.9em}
.bio-portrait{margin:0 0 1.25rem;background:var(--navy);max-width:340px}
.bio-portrait picture{display:block}
.bio-portrait img{width:100%;display:block;mix-blend-mode:luminosity;opacity:.92}
.bio-portrait figcaption{padding:.85rem 1rem;color:#DCE5EE;font-size:.88rem;line-height:1.4;background:var(--ink)}
.bio-portrait figcaption span{display:block;color:#9FB0C4;margin-top:.15rem}
.bio-family{margin:2rem 0 0;background:var(--navy);max-width:460px}
.bio-family picture{display:block}
.bio-family img{width:100%;height:auto;display:block;mix-blend-mode:luminosity;opacity:.92}
.bio-family figcaption{padding:.7rem 0 0;color:var(--fg-muted);font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;background:var(--paper)}
.rail{border-top:1px solid var(--hairline)}
.rail div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--hairline)}
.rail dt{font-size:.88rem;color:var(--fg-muted)}
.rail dd{font-size:.92rem;color:var(--ink)}

/* ── Working band: owned photography, Mills confidence ───────────────────── */
.band{position:relative;min-height:clamp(390px,38vw,500px);display:flex;align-items:center;
      background:var(--ink);color:#fff;isolation:isolate;overflow:hidden}
/* <picture> is inline by default, so the plate must be positioned on the wrapper
   and the img told to fill it, or the band image drops into normal flow. */
.band > img,.band > picture{position:absolute;inset:0;z-index:-2;opacity:.72}
.band > img,.band > picture img{width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block}
.band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,24,43,.98) 0%,rgba(6,24,43,.91) 38%,
                             rgba(6,24,43,.55) 68%,rgba(6,24,43,.28) 100%)}
.band .wrap > div{padding-left:clamp(1.25rem,2.5vw,2.25rem);border-left:2px solid var(--accent-hi)}
.band h2{color:#fff;max-width:16ch}
.band p{color:#DCE5EE;max-width:52ch;margin-top:.9rem}

/* ── Insights index ──────────────────────────────────────────────────────── */
.pubs{border-top:1px solid var(--hairline)}
.pub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,4fr) auto;gap:clamp(.5rem,2vw,2rem);
     padding:1.15rem 0;border-bottom:1px solid var(--hairline);align-items:baseline}
.pub-cat{font-size:.87rem;color:var(--fg-muted)}
.pub h3{font-size:1.05rem;margin-bottom:.2rem;max-width:44ch}
.pub p{color:var(--fg-muted);font-size:.93rem;max-width:62ch}
.pub-status{font-size:.85rem;color:var(--fg-muted);white-space:nowrap}
.post{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,4fr);gap:1.5rem;padding:1.15rem 0;border-bottom:1px solid var(--hairline)}
.post-meta{font-size:.87rem;color:var(--fg-muted)}
.empty-state{border:1px solid var(--hairline);padding:1.5rem;background:var(--paper-soft)}

/* ── Reference table ─────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;max-width:100%;min-width:0;margin-top:1.25rem;
          border-top:2px solid var(--ink);border-bottom:1px solid var(--hairline);-webkit-overflow-scrolling:touch}
.tbl{font-size:.94rem;min-width:520px}
.tbl th,.tbl td{text-align:left;padding:.7rem 1.1rem .7rem 0;border-bottom:1px solid var(--hairline);vertical-align:top}
.tbl thead th{font-size:.87rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600;color:var(--ink)}
.tbl caption{caption-side:top;text-align:left;padding:0 0 .7rem;font-size:.87rem;color:var(--fg-muted);max-width:70ch}

/* ── Questions ───────────────────────────────────────────────────────────── */
.faq-section{background:linear-gradient(180deg,var(--paper) 0%,#F1F0EB 100%)}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;padding:1.3rem 2.4rem 1.3rem 0;position:relative;font-size:1.05rem;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--fg-muted);border-bottom:1.5px solid var(--fg-muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 2.5rem 1.25rem 0;color:var(--fg-muted);font-size:.98rem;max-width:70ch}
.faq .ans a{color:var(--accent);border-bottom:1px solid rgba(164,75,48,.38)}

/* ── Form ────────────────────────────────────────────────────────────────── */
.form{display:grid;gap:1rem}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field label{display:block;font-size:.9rem;font-weight:500;color:var(--ink);margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:1rem;padding:.75rem .9rem;
  border:1px solid var(--hairline);border-radius:2px;background:#fff;color:var(--fg);transition:border-color .2s var(--ease)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
/* Mouse focus keeps the border cue; keyboard focus always gets the 2px ring above. */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:#7A8496}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-note{font-size:.87rem;color:var(--fg-muted);max-width:58ch}

/* The dedicated contact page uses the same ruled control language as the
   closing inquiry strip, with enough room for the longer intake form. */
.contact-page .grid-split{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.contact-page .btn{min-height:48px;padding:12px 22px;font-size:.9rem}
.contact-form{max-width:760px;border-top:2px solid var(--ink);padding-top:1.5rem;gap:1.2rem}
.contact-form > h2{margin-bottom:.2rem}
.contact-form .field label{font-size:.8rem;color:var(--fg-muted);margin-bottom:.18rem}
.contact-form .field input,.contact-form .field select,.contact-form .field textarea{
  padding:.55rem 0 .6rem;border:0;border-bottom:1px solid #AAA69E;border-radius:0;
  background:transparent;font-size:.95rem}
.contact-form .field textarea{min-height:96px}
.contact-form .field input:focus,.contact-form .field select:focus,.contact-form .field textarea:focus{
  border-bottom-color:var(--accent)}
.contact-form .field input:focus-visible,.contact-form .field select:focus-visible,
.contact-form .field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.contact-form .btn{justify-self:start}

/* ── Service areas: two region-led lists (binding) ───────────────────────── */
.regions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem);margin-top:.5rem}
.region h3{font-family:var(--serif);font-size:clamp(1.45rem,2vw,1.8rem);font-weight:500;
           letter-spacing:-.025em;padding-bottom:.8rem;border-bottom:2px solid var(--ink)}
.region li{border-bottom:1px solid var(--hairline)}
.region a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem 0;font-size:.98rem;color:var(--ink);
          transition:color .2s var(--ease),padding-left .3s var(--ease)}
.region a:hover,.region a:hover .co{color:var(--accent)}
.region a:hover{padding-left:.35rem}
.region a .co{font-size:.87rem;color:var(--fg-muted);text-align:right}
.market-grid{display:none}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ftr{background:linear-gradient(135deg,var(--ink) 0%,#081E37 100%);color:var(--on-ink-mut);
     padding:clamp(3.25rem,5vw,4.75rem) 0 1.75rem;border-top:2px solid var(--accent-hi)}
.ftr-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(1.5rem,3vw,2.75rem);padding-bottom:2rem}
.ftr h3{font-size:.9rem;font-weight:600;color:#fff;margin-bottom:.7rem}
.ftr a{font-size:.92rem;color:var(--on-ink-mut);display:inline-block;padding-block:.28rem}
.ftr a:hover{color:#fff}
.ftr .brand .lg-ink{display:none}
.ftr .brand .lg-white{display:block}
.ftr .brand img{width:clamp(160px,17vw,190px)}
.ftr-legal{border-top:1px solid var(--hairline-d);padding-top:1.4rem;font-size:.83rem;line-height:1.65;color:#93A6BA}
/* The global p{max-width:68ch} keeps body copy readable, but the disclosure block
   is a legal notice and runs the full measure. */
.ftr-legal p{max-width:none}
.ftr-legal p + p{margin-top:.7em}
.ftr-legal strong{color:var(--on-ink)}
.ftr-legal a{font-size:inherit;color:var(--on-ink);padding:0;border-bottom:1px solid var(--hairline-d)}
.ftr-base{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;justify-content:space-between;margin-top:1.25rem;
          padding-top:1.1rem;border-top:1px solid var(--hairline-d);font-size:.83rem;color:#93A6BA}
.ftr-base a{font-size:inherit;padding:0;border:0}
.spec-flag{background:var(--paper-warm);color:var(--fg-muted);border-bottom:1px solid var(--hairline);font-size:.82rem;text-align:center;padding:.5rem var(--gut)}

/* ── Institutional conversion strip ─────────────────────────────────────────
   Scheduling leads. The fallback form is a quiet ruled row, not a second hero
   or a white-box card dropped onto a dark field. */
.contact-band{padding:clamp(3.5rem,5.2vw,5rem) 0;background:var(--paper-soft);
              border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.contact-call{display:grid;grid-template-columns:minmax(0,1fr) auto;
              gap:clamp(2rem,4vw,4.5rem);align-items:end}
.contact-call-copy{display:grid;grid-template-columns:minmax(230px,.88fr) minmax(290px,1.12fr);
                   gap:clamp(1.75rem,3.4vw,3.75rem);align-items:end}
.contact-band h2{font-size:clamp(1.95rem,2.8vw,2.65rem);max-width:14ch}
.contact-band .lede{font-size:1rem;line-height:1.55;max-width:48ch}
.contact-call-actions{display:flex;gap:.65rem;align-items:center;justify-content:flex-end}
.contact-call-actions .btn,.form-short .btn{min-height:48px;padding:12px 21px;font-size:.9rem}
.contact-call-actions .btn-ghost{border-color:#BDB8AE}

.form-short{display:grid;grid-template-columns:minmax(115px,.72fr) minmax(145px,1fr)
            minmax(170px,1.12fr) minmax(230px,1.55fr) auto;
            gap:clamp(1rem,2vw,1.6rem);align-items:end;margin-top:clamp(2rem,3vw,2.75rem);
            padding-top:clamp(1.35rem,2.2vw,1.8rem);border-top:1px solid var(--hairline)}
.form-short-heading{align-self:start;padding-top:.2rem}
.form-short-h{font-family:var(--serif);font-size:1.3rem;line-height:1.1;font-weight:500;
              letter-spacing:-.025em;color:var(--ink)}
.form-short .field{min-width:0;margin:0}
.form-short label{display:block;font-size:.78rem;font-weight:500;color:var(--fg-muted);margin-bottom:.15rem}
.form-short input,.form-short textarea{width:100%;min-height:42px;padding:.45rem 0 .5rem;
  font:inherit;font-size:.92rem;line-height:1.4;color:var(--fg);background:transparent;
  border:0;border-bottom:1px solid #AAA69E;border-radius:0;transition:border-color .2s var(--ease)}
.form-short input:focus,.form-short textarea:focus{border-bottom-color:var(--accent)}
.form-short input:focus-visible,.form-short textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:4px;border-bottom-color:var(--accent)}
.form-short textarea{resize:vertical;height:42px;min-height:42px;max-height:8rem}
.form-short .btn{align-self:end;justify-self:start;width:fit-content;min-width:126px;white-space:nowrap}
.form-short .form-note{grid-column:2 / -1;margin:0;font-size:.74rem;line-height:1.5;
                       color:var(--fg-muted);max-width:none}

.verify-band{padding-block:clamp(3rem,4.5vw,4.25rem)}
.verify-band .d2{font-size:clamp(1.9rem,2.8vw,2.55rem)}
.verify-band .btn{min-height:48px;padding:12px 22px;font-size:.9rem}

@media(min-width:881px){
  .sec:not(.on-ink) .split-wide > :last-child{border-left:1px solid var(--hairline);
                                               padding-left:clamp(1.75rem,3vw,3rem)}
}

/* ── Motion: reveal on entry, one authored moment ────────────────────────── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.06s}.rv-d2{transition-delay:.12s}.rv-d3{transition-delay:.18s}.rv-d4{transition-delay:.24s}
html:not(.js) .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1000px){.ftr-top{grid-template-columns:1fr 1fr}}
/* The full wordmark, five navigation labels, and phone number need more room
   than the content grids below. Collapse only the header before any label is
   allowed to wrap, while keeping the two-column hero through tablet landscape. */
@media (max-width:1099px){
  .nav,.hdr-tel{display:none}
  .burger{display:block}
  .contact-call{grid-template-columns:minmax(0,1fr)}
  .contact-call-copy{max-width:900px}
  .contact-call-actions{justify-content:flex-start}
  .form-short{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .form-short-heading,.form-short .field-message{grid-column:1 / -1}
  .form-short .form-note{grid-column:2}
}
@media (max-width:880px){
  .nav,.hdr-tel{display:none}
  .burger{display:block}
  .hero{min-height:clamp(520px,80svh,700px)}
  .grid-3,.grid-2,.grid-split,.split-wide,.situation,.bio,.entry,.step,.regions{grid-template-columns:minmax(0,1fr)}
  .contact-page .grid-split{grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,8vw,4rem)}
  .contact-form{max-width:none}
  .split-wide,.grid-split{gap:1rem}
  .entry,.step{gap:.4rem}
  .regions{gap:1.75rem}
  .situation{gap:1.25rem}
  .situation-head h2,.situation-head .leadin,.situation-copy{max-width:none}
  .situation > .checks{margin-top:0}
  .split-wide > :first-child h2,.entry h3{max-width:none}
  .pub{grid-template-columns:minmax(0,1fr);gap:.25rem}
  .post{grid-template-columns:1fr;gap:.25rem}
  .bio-portrait{max-width:260px}
  .client-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;min-height:0}
  .client-card-featured{grid-row:auto;grid-template-rows:minmax(240px,42vw) auto}
  .process-entries{grid-template-columns:minmax(0,1fr)}
  .process-entries .entry{border-left:0;border-top:1px solid var(--hairline);padding:1.45rem 0}
  .process-entries .entry:first-child{border-top:0}
  .process-entries .entry:last-child{padding-right:0}
}
@media (max-width:560px){
  body{font-size:16px}
  .btn{width:100%;justify-content:center}
  .form-2{grid-template-columns:1fr}
  .ftr-top{grid-template-columns:1fr 1fr;gap:1.5rem 1.25rem}
  .ftr-top > :first-child{grid-column:1 / -1}
  .ftr-top > :first-child p:not(:last-child){display:none}
  .ftr-base{flex-direction:column;gap:.4rem}
  .client-card,.client-copy{padding:1.5rem}
  .client-card-featured{grid-template-rows:220px auto}
  .client-card h3{font-size:1.75rem}
  .band .wrap > div{padding-left:1rem}
  .contact-call-copy{grid-template-columns:minmax(0,1fr)}
  .contact-call-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .form-short{grid-template-columns:minmax(0,1fr);gap:1rem}
  .form-short-heading,.form-short .field-message,.form-short .form-note{grid-column:1}
  .form-short textarea{height:76px;min-height:76px}
  .form-short .btn{width:100%;min-width:0}
}
@media print{
  .hdr,.drawer,.burger,.btn-row,form,.spec-flag{display:none !important}
  body,.on-ink,.hero,.phero,.band,.ftr{background:#fff !important;color:#000 !important}
  .hero::after,.band::after,.hero-media,.band > img,.band > picture{display:none !important}
  .hero h1,.phero h1,.band h2,.on-ink h2,.ftr h3{color:#000 !important}
  .sec{padding:1rem 0 !important;break-inside:avoid}
  a::after{content:" (" attr(href) ")";font-size:.7em;color:#555}
}


/* ── Mobile refinements ──────────────────────────────────────────────────── */
@media (max-width:560px){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn{width:100%;white-space:normal;text-align:center}
  .hero-facts{max-width:none}
  .hero .d1{font-size:clamp(1.75rem,6.9vw,2.2rem)}
}

/* The header is absolute over the hero, so hero content must clear it or the
   headline slides underneath the wordmark once the copy grows. */
.hero-in{padding-top:calc(var(--head-h) + 1.25rem)}
@media (min-width:900px){
  .hero-in{padding-top:calc(var(--head-h) + clamp(2.25rem,4vh,3rem))}
}
@media (max-width:560px){
  .hero{min-height:auto}
  .hero-in{padding-top:calc(var(--head-h) + 1.75rem);padding-bottom:2.5rem}
  .hero .lede{margin-top:.9rem}
  .hero-facts{margin-top:1.75rem}
}

/* Wordmark carries the header. Sized up substantially per Trevor. */
.brand img{width:clamp(200px,21vw,300px)}
.ftr .brand img{width:clamp(220px,24vw,340px)}
.hdr-in{height:auto;min-height:var(--head-h);padding-block:.9rem}
:root{--head-h:88px}
@media (max-width:560px){
  .brand img{width:min(210px,58vw)}
  .ftr .brand img{width:min(230px,64vw)}
}


/* ── Hero background video ───────────────────────────────────────────────────
   The still stays the LCP element and the poster. Video is layered over it and
   only fades in once it can actually play, so a slow connection, a blocked
   request, or reduced-motion all just leave the photograph in place. Desktop
   only: the src is set from JS, so phones never download it. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;pointer-events:none;transition:opacity .9s var(--ease)}
.hero-video{object-position:center 44%;filter:saturate(.86) brightness(.94)}
.hero-video.on{opacity:1}
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none !important}
}