:root{
  color-scheme:light;
  --navy-900:#0B1729; --navy:#16294B; --navy-600:#27406B;
  --gold:#B8914F; --gold-soft:#D9C08A; --gold-deep:#7A5F30;
  --bone:#F5F2EA; --bone-deep:#EAE4D6; --white:#FFF;
  --ink:#1B2230; --slate:#4E5768;
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Newsreader','Lora',Georgia,serif;
  --label:'Jost',-apple-system,'Segoe UI',sans-serif;
  --wrap:1240px; --gut:clamp(22px,4.5vw,64px);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--bone);}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--body);font-size:18.5px;line-height:1.74;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}
.section{padding:clamp(64px,8vw,124px) 0;background:var(--bone);}
.section--white{background:var(--white);}
.section--deep{background:var(--bone-deep);}
.section--navy{background:var(--navy-900);}
.section--ink{background:var(--navy-900);}
.section--tight{padding:clamp(42px,5vw,70px) 0;}

.eyebrow{display:flex;align-items:center;gap:15px;font-family:var(--label);font-size:14px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 20px;}
.eyebrow::before,.eyebrow::after{content:"";height:1px;flex:0 0 36px;background:currentColor;opacity:.6;}
.eyebrow--center{justify-content:center;}
.eyebrow--light{color:var(--gold-soft);}

h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.13;margin:0 0 .5em;color:var(--navy);}
h2{font-size:clamp(33px,3.9vw,52px);}
h3{font-size:clamp(23px,2vw,27px);}
.lede{font-size:clamp(19px,1.4vw,21px);color:var(--slate);max-width:58ch;line-height:1.7;}
p{margin:0 0 1.15em;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--label);font-size:14.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:17px 34px;border:1px solid transparent;border-radius:1px;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s;}
.btn--gold{background:var(--gold);color:var(--navy-900);}
.btn--gold:hover{background:var(--gold-soft);transform:translateY(-2px);}
.btn--outline{border-color:rgba(255,255,255,.65);color:var(--white);}
.btn--outline:hover{border-color:var(--gold-soft);color:var(--gold-soft);transform:translateY(-2px);}
.btn--navy{background:var(--navy);color:var(--white);}
.btn--navy:hover{background:var(--navy-600);transform:translateY(-2px);}
.btn--ghost{border-color:rgba(22,41,75,.5);color:var(--navy);}
.btn--ghost:hover{background:var(--navy);color:var(--white);border-color:var(--navy);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ---- utility bar: bigger ---- */
.util{background:var(--navy-900);color:rgba(255,255,255,.86);font-family:var(--label);font-size:15px;letter-spacing:.02em;}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:52px;flex-wrap:wrap;}
.util a{text-decoration:none;font-weight:500;}
.util a:hover{color:var(--gold-soft);}
.util__r{display:flex;gap:30px;align-items:center;}
.util__ph{color:var(--gold-soft);font-size:18px;}
/* The founder line, moved down out of the header lockup. It is the only line
   here that names the person, so it carries the display face and the gold.
   gold-soft is the value the hero's emphasis and the trust band's headings
   already use, so this adds no colour to the palette.
   22px, not the 19 it was set at in the label face. Cormorant's ink sits much
   lower in its em than Jost's, so matching the number would have shrunk the
   line on sight. Measured off the browser's own rasterisation at weight 400:
     Jost 19px          cap 13.30   x-height 8.74
     Cormorant 21.5px   cap 13.44   x-height 8.30
     Cormorant 22px     cap 13.75   x-height 8.49
     Cormorant 22.5px   cap 14.06   x-height 8.69
   Cormorant's cap is 0.625 of its em against Jost's 0.700, and its x-height
   0.386 against 0.460, so no single size reproduces both. 21.5 matches the cap
   and 22.5 matches the x-height; 22 is the only size holding both inside half a
   pixel, at +0.45 on the cap and -0.25 on the x-height. It rounds toward the
   larger x-height on purpose, because the string is four capitals to twenty six
   lowercase and shrinking is the failure this size is guarding against. */
.util__who{font-family:var(--display);font-size:22px;color:var(--gold-soft);}
/* The divider is an upright bar, not a dash, a size down from the words either
   side so it reads as a hairline between two facts rather than as a character
   in the sentence. It was white; against gold words in a serif it read as a
   different family sitting in the middle of the line, so it is gold now too.
   .68 is chosen so the contrast does not move: white at .50 measured 5.23 and
   gold-soft at .68 measures 5.27, which keeps the family and the hue as the
   only things that changed. It fails 4.5 below .62, so this is not close to
   the edge. Still well under the words, which sit at full gold-soft and 10.14.
   18px holds the same ratio to 22 that 16 held to 19. */
.util__sep{font-family:var(--display);font-size:18px;color:rgba(217,192,138,.68);margin:0 10px;font-weight:400;}
.util__loc{font-size:16px;}
/* Two steps down, both set by where the line stops fitting rather than by
   taste. At 22px the line measures 328.8px, and the gutters leave 100vw minus
   60, so it needs 388.8px of viewport. Measured across the band: 22px holds one
   line at 390 and wraps at 375, where the widest that fits is 20px at 299.6
   against 315 available. Below 375 that fails too, and at 320, where only 260
   is left, 17px measures 256.8 and 16px measures 243.2; 16 is taken because
   3.2px of margin is not margin.
   Cormorant is the narrower face, so both steps buy more than the label face
   did: at 320 the line went from 258.8px to 243.2px at the same 16px. */
@media(max-width:389px){
  .util__who{font-size:20px;}
  .util__sep{font-size:16px;margin:0 9px;}
}
@media(max-width:374px){
  .util__who{font-size:16px;}
  .util__sep{font-size:14px;margin:0 8px;}
}

/* ---- header: bigger ---- */
.hdr{position:sticky;top:0;z-index:60;background:var(--bone);border-bottom:1px solid rgba(22,41,75,.13);}
/* The utility bar sticks with the header, desktop only.
   THESE TWO VALUES MUST STAY IN STEP:
     .util .wrap  min-height:52px   the bar's height at desktop
     .hdr         top:52px          where the header parks beneath it
   The 52 below is not a design number, it is a measurement of the rule above
   it, and nothing enforces the link. If the utility bar ever grows, by a
   larger font, more padding or another item on the line, the header will
   overlap it by the difference or leave a bone coloured gap of it. Change one
   and change the other in the same edit.
   z-index 61, one above the header's 60. Equal would not do: .util comes
   first in the document, so at a tie the header paints over it, and any
   fractional disagreement between the measured 52 and the bar's real height
   would be resolved by clipping the bar's bottom row rather than the
   header's top one. It is stacking against the header at 60 below it and the
   zoom overlay at 200 above it, and 61 keeps it between the two, so the
   overlay still covers the whole chrome.
   Above 1061px only. At 375 the bar wraps to three lines and stands 101.55px
   tall, and at 320 it wraps to five and stands 143.98px, so sticking it there
   would hold a fifth of a phone screen for the life of every scroll. Below
   the gate nothing here applies and the header sticks alone, exactly as
   before. */
@media(min-width:1061px){
  .util{position:sticky;top:0;z-index:61;}
  .hdr{top:52px;}
}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:104px;position:relative;}
.mark{display:flex;align-items:center;gap:16px;text-decoration:none;flex-shrink:0;}
.mark__badge{height:56px;width:auto;display:block;}
.mark__wm{display:flex;flex-direction:column;align-items:center;line-height:1;}
.mark__name{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:.14em;color:var(--navy);text-transform:uppercase;line-height:1;}
.mark__sub{font-family:var(--label);font-size:10px;font-weight:500;letter-spacing:.52em;color:var(--gold-deep);text-transform:uppercase;margin-top:6px;line-height:1;text-indent:.52em;}
@media(max-width:480px){.mark__name{font-size:21px;}.mark__badge{height:50px;}.mark__sub{letter-spacing:.32em;}}
.mark__name{font-family:var(--display);font-size:31px;font-weight:600;letter-spacing:.13em;color:var(--navy);text-transform:uppercase;display:block;line-height:1;}
.mark__sub{font-family:var(--label);font-size:11px;font-weight:500;letter-spacing:.34em;color:var(--gold-deep);text-transform:uppercase;display:block;margin-top:7px;line-height:1;}
/* The founder line, inside the .mark lockup so it moves with the logo and
   shares its link. It has to sit under the wordmark without competing with
   it, so it takes the label face at 11.5px with ordinary sentence case and
   near-normal tracking, against the wordmark's 31px uppercase display face
   at .13em and the sub-line's 11px uppercase at .34em. Sentence case is the
   whole trick: it is the only text in the lockup that is not uppercase, so
   it reads as a caption rather than as a third brand element. Slate rather
   than navy or gold, so it recedes from both. */
/* nowrap holds the line together wherever there is room for it, which is
   every width down to about 360. At 320 the lockup plus the menu button plus
   two gutters needs 382px against 320 available, so below 480 the line is
   allowed to wrap and .mark__wm is allowed to shrink rather than push the
   header wider than the screen. */
@media(max-width:480px){.mark__wm{min-width:0;}}
/* That block described the right behaviour and never got to perform it. .mark
   carries flex-shrink:0, so the lockup refused every offer of less width and
   .mark__wm's min-width:0 was never put under any pressure: the founder line
   stayed on one line at its full 187.3px and the whole 250.2px lockup pushed
   the menu button out of the header. At 320 that measured 30px gutter plus
   250.2 lockup plus 24 gap plus 47.8 button, which is 352 against 320, and
   every page on the site scrolled sideways by 32px.
   Letting .mark shrink is the whole fix. Nothing is hidden, nothing is
   resized: the badge, the wordmark, the founder line's type and the menu
   button are all untouched, and the founder line simply takes the second line
   the rule above already allowed it. The lockup goes to 188.2px at 320 and
   the button lands back inside the gutter. Reducing the internal gap or the
   badge was measured too and neither reaches: gap 16 to 10 gets 352 to 346,
   badge 50 to 40 gets 343, and both together still leave 337 against 320.
   flex-shrink is inert unless a line actually overflows, so this could sit
   unscoped, but 375 is the width the design is tuned at and the header there
   is 7px over its own gutter, which the shrink would absorb and change. 374
   is the widest scope that leaves 375 and everything above it identical, and
   below it the rule is self tuning rather than pinned to today's 352px. */
/* Re-measured after the founder line moved out of the lockup, which is what
   this guard was written for. It is NOT dead: at 320 it still takes the
   lockup from 198.66px to 188.16px, on all fifteen pages. What it no longer
   is, is load bearing. Disabled at 320 across all fifteen, every page still
   reports scrollWidth equal to clientWidth: the 51.5px the founder line took
   with it is more than the 32px overflow this was closing. Kept rather than
   removed, because it is self tuning and costs nothing, and because the
   lockup is one wordmark change away from needing it again. */
@media(max-width:374px){.mark{flex-shrink:1;min-width:0;}}
.nav{display:flex;align-items:center;gap:30px;}
.nav a{font-family:var(--label);text-decoration:none;font-size:19px;font-weight:400;color:var(--navy);padding:6px 0;position:relative;white-space:nowrap;}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .3s;}
.nav a:hover::after{right:0;}
.hdr .btn{padding:14px 26px;font-size:13.5px;}
.navtoggle{display:none;background:none;border:1px solid rgba(22,41,75,.3);border-radius:1px;padding:12px 15px;cursor:pointer;color:var(--navy);font-size:18px;line-height:1;}

/* ---- hero ---- */
.hero{position:relative;min-height:clamp(560px,88vh,880px);display:flex;align-items:center;overflow:hidden;background:var(--navy-900);}
.hero__media{position:absolute;inset:0;overflow:hidden;}
/* The scene is a photograph now, not drawn artwork. inset:-8% and the 116%
   box are unchanged, but the drift they made room for was removed on
   2026-09-15 at Niki's instruction. The picture now sits at its
   untransformed box, so the overhang no longer keeps a moving edge off
   the screen; it is simply unused margin. Removing it is a live option,
   measured and left unapplied, because it changes the crop. object-fit:cover
   is what the svg got free from preserveAspectRatio="xMidYMid slice"; an
   img has no such attribute, so the fit is declared here instead.
   object-position is the crop, and it is width scoped below because the
   hero is 2.18 wide at 1280 and 0.67 at 375: the same declaration cannot
   choose a sensible window in both.
   brightness went 1.05 to 1.18 because the owner wanted the right side
   lifted past the coastal reference rather than sat on it. Right third,
   composited: 129.3 and 0.619 before, 135.8 and 0.604 after, against a
   reference of 128.5 and 0.619. It has NOT moved since: the owner's
   second request for a brighter picture was taken entirely from the
   grade's right stops, for the reasons measured there.
   saturate did NOT move, and the note asking for it to come down if
   saturation rose was written from the wrong expectation. brightness()
   scales all three channels, so it leaves HSV saturation alone until
   channels clip; what it actually does here is lift the picture toward
   the overlays it is composited under, which pulls measured saturation
   DOWN. Holding 0.62 would therefore need saturate raised to 1.06, which
   was ruled out, so it stays at 1.04 and lands 0.015 under. */
.hero__scene{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;object-position:50% 44%;filter:saturate(1.04) brightness(1.18);}
/* THE OVERLAY IS A POOL, NOT A SWEEP, since 2026-09-15. It is an ellipse
   sitting behind the text rather than a gradient crossing the picture, so
   the photograph is uncovered everywhere the text is not. Niki's values,
   chosen in the lab and applied as given.
   ITS COLOUR IS rgba(18,48,71) AND THAT IS NOT --navy-900. Every overlay
   before it, and the text-shadow below it still, used rgba(11,23,41). The
   two differ on purpose: the pool is a wash with no edge to find, the
   shadow is a hard local backing under the glyphs. Do not unify them.
   What it gives back, composited, HSV mean value by third at 1280:
       the sweep, 43b1022    53.6 / 77.3 / 162.3   right-third sat 0.449
       the pool, NOW        105.8 / 113.1 / 174.0  right-third sat 0.472
   The left third nearly doubles. That is the whole point of the change and
   it is also the whole cost of it, because the left third is where the
   text is. WHAT IT COSTS, worst glyph ink, shadow composited, at
   1920 / 1280 / 375, measured against the same commit with one pipeline.
   Three columns: the sweep at 43b1022, the pool as first shipped at
   37% wide centred at 33%, and the pool as it is NOW, 48% wide centred
   at 37%. The phone rule did not change between the last two.
       headline white   5.74 / 5.47 / 11.51  ->  3.15 / 2.62 / 8.15  ->  5.47 / 4.69 / 8.15
       gold lifetime    5.11 / 4.86 /  8.39  ->  3.40 / 3.39 / 5.67  ->  4.46 / 4.35 / 5.67
       subhead white   10.90 / 11.64 / 10.25 ->  8.25 / 4.49 / 9.12  ->  8.01 / 5.07 / 9.12
       eyebrow          4.98 / 5.62 /  6.83  ->  8.64 / 8.08 / 7.20  ->  8.55 / 7.98 / 7.20
       button label     6.16 at every width, unchanged: it is navy on a
                        solid gold fill and no overlay reaches it.
       right third     162.3 at 1280 ->  174.1  ->  163.2
                       (1920: 173.9 -> 162.9)
   HISTORY: as first shipped the headline and the gold word were under
   4.50 at both desktop widths, and that was accepted rather than
   overlooked; Niki chose the values with the figures in front of her.
   She then asked for the coverage fixed at laptop width, keeping the
   look, and the pool was widened: radius 37 -> 48, centre 33 -> 37,
   nothing else. Headline and subhead now clear 4.50 at both desktop
   widths. THE GOLD WORD DOES NOT, at 4.35 at 1280: it cannot be had
   without a centre past 40, which drops the headline to 3.3, and it is
   recorded rather than chased. The h1 is 60px, so the large-text 3.00
   applies to it and the gold clears that comfortably.
   The widening cost the right third almost exactly what the pool had
   given it: 163.2 at 1280 against 162.3 under the sweep. What the pool
   still keeps that the sweep never had is the LEFT third: 103.2 against
   53.6, nearly double, because a sweep anchored at .90 covered the
   whole left edge and an ellipse only covers the text. That is where the
   picture came back and where it stays.
   The eyebrow's rule and comment are as committed in 4b7bda6 and were
   not touched; its figures moved only because the pool under it moved.
   EVERYTHING FROM HERE TO THE RULE IS HISTORY. It describes the sweep
   that the pool replaced and the drawn artwork before that. It is kept
   because it records why each lever was chosen and what it cost, and
   those arguments still apply if the overlay is ever reshaped again.
   Its stop positions and its right-third figures name gradients this
   file no longer carries.
   The grade carried the text on the left and stayed out of the picture on
   the right. Every stop was re-derived against the photograph at the
   hero's real 2.18 aspect; nothing carried over from the drawn artwork.
   THE COASTAL REFERENCE OF 128.5 AND 0.619 IS RETIRED. It was the target
   while the open question was whether the picture was too dark. The owner has
   since asked for the right third brighter twice, so it is a milepost showing
   how far the picture has travelled, not a value to hit.
   Right third, composited, HSV mean value and mean saturation. The paired
   figures are HISTORY: they were taken at the two drift keyframes, and
   the drift was removed on 2026-09-15. There is one position now, so
   one figure. Re-measured at the fixed box, 1280 wide:
      reference                       128.5 / 0.619
      .42 / .28    was, two keyframes 136.2 / 0.601  and  138.8 / 0.616
      .10 / .03    was, two keyframes 194.9 / 0.635  and  198.7 / 0.650
      shipped stops, fixed, NOW       140.2 / 0.406
   The NOW row does not sit between the old pair, and the gap is not the
   drift: it is 34.1 of value at the from keyframe alone, re-measured as
   140.0 there. The ROWS ABOVE DESCRIBE A GRADIENT THIS FILE DOES NOT
   CARRY. They name a 100 percent stop at .03; the shipped rule has three
   stops and ends at .10 at 88 percent. Treat the old numbers as a record
   of an intent, not as values to reproduce.
   So the picture now sits about 60 points of value above the reference and
   slightly warmer than it, rather than beside it.
   The right stops are the whole of this change and brightness did not move.
   Measured, the two levers are not interchangeable. Matched at the same
   value, taking it from the filter costs saturation and contrast both:
      brightness 1.30 with .22 / .06    183.8 value   0.606 sat   min 5.38
      brightness 1.18 with .20 / .02    183.3 value   0.630 sat   min 5.75
   The grade wins on both axes, and it is the lever the owner named.
   The 100 percent stop keeps a floor of .03 rather than going to zero. At
   zero the sun's core clips: 0.17 percent of the right third pins at 250 or
   above and goes flat white. At the shipped stops nothing clips at the fixed
   position: 0.000 percent of the right third reaches 250, and the
   brightest channel anywhere in it is 231.
   The 72 percent stop, not the 100 percent one, is what the headline sits
   against. The h1's right edge reaches about 65 percent across, inside the
   40 to 72 interpolation, so this stop and not the sun sets the floor. It
   costs the subhead nothing, because the subhead ends at 38 percent.
   .10 is not the brightest that clears. .06 / .03 reaches 200.4 value and
   still passes, but only at 4.71, a margin of 0.21. The gold gate below
   rejected a 0.12 margin as too thin and took the next step out for 0.69;
   this takes the same view. HISTORY: the 5.00 recorded here for the
   headline white was a two keyframe worst case, and it read 5.35 at 1280
   once the drift came out. Both of those predate the overlay change of
   2026-09-15, which reshaped this gradient; see the block above the rule.
   The sweep's own last figures, now HISTORY too: headline white 5.13 at
   1280 and 6.01 at 1920, gold em 5.05 and 4.81, eyebrow 5.20 and 4.69.
   Re-measured from that same commit with the current pipeline they read
   5.47 and 5.74, 4.86 and 5.11, 5.62 and 4.98, a mean disagreement of
   0.4 which is the clientWidth caveat the record already carries.
   END OF HISTORY. The pool's figures are at the top of this comment.
   WHERE THE TEXT SITS IN THE POOL, which is the thing to look at if
   these numbers ever need explaining. Pool alpha under the two ends of
   the widest line, which is headline line 2, hero-relative x in
   percent. First as shipped at 37%/33%, then NOW at 48%/37%:
       1920  starts 20.7%  a=0.64 -> 0.64   ends 60.4%  a=0.27 -> 0.55
       1280  starts  5.4%  a=0.27 -> 0.37   ends 65.1%  a=0.13 -> 0.44
       under the worst pixel of "build" at 1280:  a=0.15 -> 0.44
   The pool is above alpha 0.05 out to 82.8 percent at both widths now,
   against 68.1 and 66.6 before, so the headline ends well inside it.
   WHY THE CENTRE WENT RIGHT AND NOT LEFT. The record above said the
   binding problem at 1280 was the left end. Measured properly it is
   BOTH ends: "build" at 65 percent binds first, and a centre moved
   left takes the pool off it (4.58 at 54/33, 3.61 at 54/27); a centre
   moved past 38 takes it off "Protecting" instead (3.32 at 40/40).
   The subhead is the line that lives on the left, and it clears 4.50
   at any radius over 42, so it never decided the centre. 1280 is still
   the tighter desktop width, 4.69 against 5.47. */
.hero__grade{position:absolute;inset:0;background:radial-gradient(ellipse 48% 89% at 37% 48%,rgba(18,48,71,0.88) 0%,rgba(18,48,71,0.546) 50%,rgba(18,48,71,0) 100%);}
/* HISTORY: a vignette lived here. radial-gradient(120% 92% at 50% 42%,
   transparent 42%, rgba(6,16,13,.28) 100%), cut from .52 because the heavy
   version read as a dark ring on the photograph rather than as depth. It was
   worth about 0.5 of contrast on the text corners. REMOVED 2026-09-15 with
   the pool, which covers the text directly and leaves the vignette darkening
   nothing but the four corners of a picture the owner has twice asked to see
   more of. The div went with it, in drop_hero_vignette(); there is no element
   carrying this class on any page. Both removals assert against the source. */
/* The grade is width scoped for the same reason object-position is: the two
   widths are not the same picture. At 1280 wide and 800 tall the hero is 2.74
   and the text sits inside the left 45 percent, so the right stops can stay
   light because nothing is written over there. Note the desktop hero's aspect
   moves with viewport height, because min-height is calc(100vh - 339px) above
   1061px; the retired 2.18 figure in this comment was taken at a taller window.
   At 375 the hero is 0.67 and the crop keeps only source x 37 to 63 percent,
   so the sun at x 73.5 and most of the pine at x 58 to 74 fall outside the
   frame entirely. The phone band is dune and fairway, not the sunset.
   Re-measured for the navy grade against the golf photograph. Glyph ink only,
   text-shadow composited in. The three rows are HISTORY, taken as a worst
   pixel across both drift keyframes; the drift was removed 2026-09-15:
       desktop stops used here   subhead  7.39   headline  5.28   eyebrow 2.30
       these stops               subhead 10.88   headline 10.69   eyebrow 5.59
       the retired green stops   subhead  9.85   headline  8.09   eyebrow 3.53
   Re-measured at the fixed position, these stops, hero box 375x562:
       these stops, fixed        subhead 10.04   headline 11.17   eyebrow 5.40
   And again after the overlay change of 2026-09-15, which re-cut the tail
   of this gradient past the subhead and gave the eyebrow a text-shadow:
       these stops, NOW          subhead 10.50   headline 11.33   eyebrow 6.40
   EVERY ROW ABOVE IS HISTORY. This block no longer carries a sweep at
   all; the rule below is the phone's pool, 102% by 105% at 42% 50%,
   which is wide enough to read as an overall darkening rather than as a
   shape. Re-measured at 375x562 with the pool and the phone's own
   text-shadow, worst glyph ink, shadow composited:
       the pool, NOW             subhead  9.12   headline  8.15   eyebrow 7.20
   Lower than the sweep on the headline and the subhead and higher on the
   eyebrow, and comfortable on all three. This width was never the tight
   one and still is not; 1280 is, which is new.
   So the desktop overlay is still the wrong overlay for this width, which
   is why this block exists, and the reason has not changed with the shape:
   at 375 the subhead reaches 85 percent across and the button 73, against
   60 percent for the headline at 1920, so there is almost nothing to give
   back and an ellipse narrow enough to read as a pool would leave the
   subhead on bare photograph. HISTORY, from the sweep: the mid stop
   moving out to 55 percent is what carried the eyebrow. It USED TO have no text-shadow, unlike the headline and the
   subhead, which is why it was the first thing to fail here and the one
   worth tuning against. It was given the headline's shadow on 2026-09-15
   and is no longer the weak one at this width: 6.40 here against a
   headline of 11.33. It is still the weakest figure at 1920, at 4.69, so
   it remains the thing to watch, just not the thing this block tunes.
   Right third, composited, HSV mean value and mean saturation. Was 88.9 /
   0.336 and 86.1 / 0.333 at the two drift keyframes, against 92.9 / 0.424
   and 90.3 / 0.432 for the green stops. The drift was removed 2026-09-15
   and at the fixed box it read 87.1 / 0.371. The overlay change later the
   same day eased the tail of this gradient past the subhead and took it
   to 90.4 / 0.387. ALL OF THAT IS HISTORY: the sweep became a pool the
   same day and this rule is a radial now. The pool reads 110.8 / 0.335
   in the right third, by thirds 102.7 / 92.7 / 110.8, against the sweep's
   48.2 / 54.5 / 90.8. This width gives back more than twice as much
   picture on the left as it did, and it is the width that can afford it:
   worst glyph ink here is headline 8.15, subhead 9.12, gold 5.67 and
   eyebrow 7.20, nothing under 4.50 and nothing close to it. Value is held within 4 percent, so the
   owner's twice-stated wish for a brighter right third is not spent here. The
   saturation drop is the navy itself, not a heavier overlay.
   The vignette was tried here first and was the wrong tool: at 120% by 92% it
   does not reach the glyphs, and raising it to .44 moved the worst pixel by
   0.00. It was removed from the site entirely on 2026-09-15; see the
   tombstone above the desktop rule. 760px is the breakpoint the hero
   eyebrow already turns at, and it is also where the hero text-shadow
   changes: the phone carries a denser three-shadow stack, declared in a
   SECOND 760px block placed after the base rules, because @media adds no
   specificity and this block sits before them and would lose. */
@media(max-width:760px){
  .hero__grade{background:radial-gradient(ellipse 102% 105% at 42% 50%,rgba(18,48,71,0.94) 0%,rgba(18,48,71,0.583) 35%,rgba(18,48,71,0) 100%);}
}
.hero__inner{position:relative;z-index:4;width:100%;}
.hero__col{max-width:700px;}
@media(min-width:900px){.hero__col{max-width:none;}.hero h1{font-size:min(5.9vw,78px);}.hero__sub{max-width:44ch;}}
/* The headline names the audience, so it is too long for one line. It wraps
   on purpose. max-width sets the measure so the two lines come out close to
   even, and text-wrap:balance evens them further where supported. Browsers
   without balance still get a sensible two line wrap from the measure alone. */
.hero h1{font-family:var(--display);font-size:clamp(34px,6.6vw,60px);color:var(--white);font-weight:500;line-height:1.06;margin-bottom:26px;max-width:13em;text-wrap:balance;}
/* The headline sits on photographic artwork that runs from near black to
   white, so no flat colour is legible across all of it. The shadow is on the
   whole h1, not just the emphasis, so the white and gold words get the same
   treatment and the line reads as one object. It darkens the backdrop right
   behind the glyphs, which is what makes gold-soft viable here.
   The value changed on 2026-09-15 with the pool, from 0 2px 18px at .95
   over 0 1px 4px at .9 to what is written below: wider, centred, and at
   full alpha. A pool has no hard edge, so the shadow is now the only thing
   putting a defined backing under these glyphs and it is doing more of
   the work than it was under the sweep. Measured, it is worth 1.25 of
   contrast to the headline at 1920 and 1.22 at 1280: with it 3.15 and
   2.62, without it 1.90 and 1.40.
   ITS COLOUR IS rgba(11,23,41) AND THE POOL'S IS rgba(18,48,71). They are
   different colours on purpose and were specified that way. Do not unify.
   The literals are written as they were given, 1.00 and 0.91 rather than
   1 and .91, so a diff against the lab's values is exact. They parse the
   same and nothing depends on the spelling.
   The phone overrides this, further down the file, with a denser stack.
   The EYEBROW does not share it any more, and its own rule says why. */
.hero h1{text-shadow:0 0 35px rgba(11,23,41,1.00), 0 1px 7px rgba(11,23,41,0.91);}
/* This line does NOT share the headline's shadow, and that is measured
   rather than preferred. A shadow's blur has to scale with the glyph: the
   headline is 60px with heavy strokes, this is 14px Jost with strokes
   barely over a pixel, letterspaced .22em. Giving it the headline's 35px
   blur spreads the ink far wider than the glyph and lands almost none of
   it at the edge where the eye reads the shape, and it measures WORSE
   than what it replaced: 2.86 at 1920 against a base of 3.21. So this
   goes the other way, tighter and denser, 8/3/1 all at full alpha.
   HISTORY: this line had no shadow at all until 2026-09-15, which is why
   it measured worst on the page at 4.15 and 3.70. It was then given the
   headline's old 18px/4px shadow, which carried it under the sweep and
   read 3.21 / 2.86 / 2.53 at 1920 / 1280 / 375 once the pool went in.
   NOW, worst glyph ink with the shadow composited: 8.64 / 8.08 / 7.20.
   THE GOLD IS DELIBERATELY UNCHANGED. The record used to say this line's
   problem was partly its colour and that a half-step lighter gold buys
   more than further shadow work. Measured under the pool that is false:
   a lighter #F0E4C8 alone reads 4.50 / 4.01 / 3.54 and fails twice,
   while re-shaping the shadow alone clears the floor by 2.7 at its worst
   width. An outline was tried and rejected on looks: 1.2px of navy on a
   14px face eats the stem and the line reads grey and mechanical. A
   backing pill was tried and rejected for reading as a UI chip in a hero
   with no other boxed element. One value serves all three widths.
   Scoped to .hero so the other 24 eyebrows, which sit on flat colour,
   are untouched. */
.hero .eyebrow{text-shadow:0 0 8px rgba(11,23,41,1), 0 0 3px rgba(11,23,41,1), 0 0 1px rgba(11,23,41,1);}
/* The gold falls on the single word "lifetime", in the middle of the
   sentence. Cormorant Garamond ships a genuine drawn italic at weight 400,
   already loaded by the existing Google Fonts request, and the browser maps
   this h1's weight 500 down to that real face rather than shearing the
   upright. A true italic over one word reads as emphasis, so italics are on.
   The shadow above stays on the h1 rather than here, so the white and the
   gold get the same treatment. */
.hero h1 em{font-style:italic;color:var(--gold-soft);}
/* The subhead carries gold on three short runs above 1061px, so it needs the
   same backdrop the headline gets. The shadow goes on the paragraph rather
   than the em, matching how the h1 does it, so the white text between the
   runs is carried too and the block reads as one object.
   The emphasis was one continuous run from "protect" through "income" and is
   now three, on the verbs alone. That moved the closing period: it used to
   sit outside the em and render white against a gold run ending in "income",
   which read as a mistake. The whole tail is white now, so the period is
   consistent where it stands.
   IF THIS IS EVER REVERTED to the single continuous run, move the period
   INSIDE the em. A white period hard against a gold run is the bug that
   change would bring back. */
.hero__sub{color:rgba(255,255,255,.93);font-size:clamp(19px,1.55vw,23px);line-height:1.62;max-width:44ch;margin-bottom:38px;text-shadow:0 0 35px rgba(11,23,41,1.00), 0 1px 7px rgba(11,23,41,0.91);}
/* Upright at every width, unlike the headline. The rule that forces gold
   text upright is scoped to .hero h1 em and cannot reach here, so without
   this declaration the browser default would italicise all three runs. It is
   written against the element rather than the run, so splitting one em into
   three did not need it touched. */
.hero__sub em{font-style:normal;}
/* The gold is width gated, and the gate is a measurement rather than a
   preference. At 1280 the subhead sits in the dark left third of the hero
   where the overlay runs near 0.86 alpha; at 375 the same text spans nearly
   the full width and crosses the brightest part of the picture.
   The table that used to sit here was measured against the drawn artwork the
   hero carried before the photograph, and it is gone rather than corrected,
   because the picture it described is not the picture on the page.
   RE-MEASURED FROM SCRATCH when the subhead was shortened, because a
   different wrap puts different pixels behind every word. Nothing carried
   over. Composited pixels, worst glyph pixel with the shadow, per run. The paired
   figures are HISTORY, taken at both drift keyframes in a 1265x561 and a
   375x562 hero; the drift was removed 2026-09-15:
      1280 gold   protect 9.86 / 9.78   grow 8.36 / 8.28    create 10.06 / 10.06
      1280 white  body 13.91 / 13.78
      375  white  protect 8.22 / 7.08   grow 11.64 / 12.60  create 14.73 / 14.51
      375  white  body 5.18 / 5.76
   Re-measured at the fixed position, hero box 1280x461 and 375x562:
      1280 gold   protect 8.73   grow 7.02    create 8.90
      1280 white  body 12.03
      375  white  protect 12.61  grow 15.23   create 15.76
      375  white  body 10.04
   And again after the overlay change of 2026-09-15:
      1280 gold   protect 8.84   grow 7.21    create 9.03
      1280 white  body 12.27
      1920 gold   protect 8.04   grow 8.20    create 8.24
      1920 white  body 12.35
      375  white  protect 12.74  grow 15.23   create 15.76
      375  white  body 10.50
   ALL OF THE ABOVE IS HISTORY: the sweep became a pool later the same
   day and this paragraph now sits in the pool's left falloff rather than
   under a flat .90 anchor. Re-measured against the pool as first
   shipped, 37% wide at 33%, same method:
      1280 gold   protect 5.68   grow 6.67    create 6.65
      1280 white  body 4.49
      1920 gold   protect 7.29   grow 5.18    create 7.46
      1920 white  body 8.25
      375  white  body 9.12
   HISTORY: that 1280 body figure was one hundredth under the floor and
   was recorded rather than fixed. The pool was then widened to 48% at
   37% on Niki's instruction, and NOW, same method:
      1280 gold   protect 5.68   grow 7.17    create 6.65
      1280 white  body 5.07
      1920 gold   protect 7.07   grow 6.03    create 7.26
      1920 white  body 8.01
      375  white  body 9.12   (phone rule unchanged)
   Nothing under 4.50. The 1920 body gave up 0.24 to the centre moving
   right, and "protect" at 1280 did not move at all, because the
   left end of the paragraph was already outside the old radius and is
   at nearly the same alpha under the new one.
   The tightest gold run is no longer the same word at both widths: at
   1280 it is "protect", which now sits furthest LEFT and therefore
   deepest into the pool's left falloff, and at 1920 it is still "grow".
   The wrap argument below still decides which run is worst, but the
   direction has flipped with the overlay: under the sweep the worst run
   was the one furthest right, into the light side; under the pool the
   risk is at BOTH ends, because an ellipse falls away on both sides and
   a sweep only fell away on one.
   "grow" is still the tightest run at 1280, which is the wrap argument
   below holding, and every run gained a little from the new tail rather
   than losing: the subhead ends at 41.4 percent across at 1280, well left
   of where the fade now starts to move. 1920 is added because that is
   where the hero is now judged; there the three runs converge, because a
   wider measure re-wraps the paragraph and no one verb lands last.
   The 375 body figure is no longer 5.18: the earlier runs were measured
   against a hero 99px taller, and the shorter box puts different pixels
   behind the last line. Nothing here is under 4.50.
   The runs are 19px, so they are normal size text needing 4.5 to 1, not the
   3 to 1 a headline can claim. Three runs means three backdrops rather than
   one, and the wrap decides which is worst: the paragraph is 44ch, so
   whichever verb lands at the END of a line sits furthest right, deepest into
   the light side of the grade, and that one is the tightest. It is "grow"
   now. It used to be "protect", which the shorter copy moved into the middle
   of line one, where it gained about 2.8. Below the gate the ems simply
   inherit the subhead white, and the binding figure at 375 is the white body
   text at 5.18, not any verb. */
@media(min-width:1061px){.hero__sub em{color:var(--gold-soft);}}
/* A short gold rule between the headline and the subhead. Decoration, so it
   is a div with aria-hidden rather than an hr: an hr carries the separator
   role and would announce itself in the middle of the sentence the headline
   and subhead make together. Nothing here is focusable.
   Its 22px top margin meets the h1's 26px bottom margin and the larger of
   the two wins, so the gap above the rule stays 26px and only the 18px below
   it is new space. */
.hero__rule{width:62px;height:2px;background:var(--gold);margin:22px 0 18px;}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
/* A hairline between the button and the video marker. flex:0 0 auto because a
   1px flex item with no basis is the first thing a tight line gives up. */
.hero__hair{width:1px;height:46px;background:rgba(255,255,255,.28);flex:0 0 auto;}
/* Video play marker. There is no video yet, so this is a marker and not a
   control: no anchor, no button, no handler, nothing focusable. A focusable
   control that does nothing is a trap for anyone arriving by keyboard or
   screen reader, and the second line is what carries the honesty instead.
   .videomark is the single hook: display:none on it removes the whole thing
   when the marker becomes a real player. */
.videomark{display:inline-flex;align-items:center;gap:13px;margin-left:8px;}
.videomark__ic{width:38px;height:38px;color:var(--gold-soft);flex:0 0 auto;}
.videomark__t{display:flex;flex-direction:column;gap:3px;}
.videomark__a{font-family:var(--label);font-size:15px;font-weight:500;letter-spacing:.04em;color:var(--white);line-height:1.2;}
.videomark__b{font-family:var(--label);font-size:13px;font-weight:400;letter-spacing:.02em;color:rgba(255,255,255,.82);line-height:1.2;}
/* The hero text all carried this shadow over the artwork when this was
   written; the marker sits lower in the frame, over the ridge and the tree
   line, and needs one too. NEEDS REVISITING before VIDEO_MARKER is set True.
   This value predates the pool and no longer matches any hero rule: the
   headline and subhead now use a 35px and 7px stack, denser on phones, and
   the eyebrow a tight 8px, 3px, 1px stack. It is not copied from either on
   purpose. A shadow's blur has to scale with the glyph, and the marker is
   13px and 15px label type, closer to the eyebrow than the headline, so the
   right value has to be measured over the pool with the marker present. */
.videomark{text-shadow:0 2px 18px rgba(11,23,41,.95),0 1px 4px rgba(11,23,41,.9);}
@media(max-width:560px){
  .hero__hair{display:none;}
  .videomark{margin-left:0;}
  /* At phone widths the gold button goes full width. History: the video
     marker used to wrap below it, into the bottom left of the hero, which is
     exactly where the centred scroll cue sits, and the cue crossed the
     marker's second line by about 13px. The cue moved to the bottom right
     rather than the marker being shrunk, since the marker carried meaning.
     The marker is no longer emitted (VIDEO_MARKER in build.py), so that
     reason is gone. The move still matters for a different one: the full
     width button now ends lowest in the hero, and a centred cue would sit
     on its bottom edge. Measured on Sep 17 at 375 wide, the moved cue still
     overlaps the button's bottom right corner, because the base rule's
     translateX(-50%) still applies and pulls it 13px left of right:8px.
     Only the homepage hero cue moves; the hub .phead cues are untouched. */
  .hero .scrollcue{left:auto;right:8px;}
}
.hero__aside{font-family:var(--label);font-size:19px;color:rgba(255,255,255,.82);letter-spacing:.01em;}
.hero__aside a{color:var(--gold-soft);font-weight:600;font-size:24px;letter-spacing:.02em;white-space:nowrap;}

/* Every full width band now sits on navy-900, the same value the utility bar
   and the footer already use, so the chrome and the bands read as one
   palette rather than two. Only these background declarations move. The
   --navy custom property itself is untouched: it still colours every
   heading on every page, the nav links, the ghost buttons and every
   hairline, and changing it would recolour the whole site. */
.trust{background:var(--navy-900);}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);}
.trust__i{padding:22px 36px;border-left:1px solid rgba(217,192,138,.28);}
.trust__i:first-child{border-left:0;padding-left:0;}
/* One icon per item, above its heading. Sized here rather than on the svg so
   the markup carries no dimensions, and coloured here so currentColor picks up
   the same gold-soft the heading below it uses. The svg itself, its stroke
   width and its colour are untouched by the compaction: only the box it is
   drawn into got smaller, from 30px to 24px, and the space under it from 16px
   to 10px. At 1.4 stroke on a 24 viewBox unit grid the marks stay crisp.
   The heading clamp came down from clamp(26px,2.3vw,33px) to clamp(24,1.95vw,28)
   when the band was compacted, and comes down again here. The copy changed and
   the longest heading with it: "Safety & growth" fitted a 206px column at 28px,
   but "Independent Guidance" measures 250.7px there at the same size and wrapped
   at both 1280 and 1440, with "Thousands of Clients" wrapping at 1440 too.
   Measured across the four headings in their own columns, the largest size that
   holds every one on a single line is 23px, and at 23 the longest measures 206.0
   against exactly 206 available. That is no margin at all, so the cap is 22,
   where the longest measures 197.0 and clears by 9px.
   Everything the band is designed around is untouched: navy-900, the Cormorant
   face, gold-soft, the white value text, the hairline dividers, four columns and
   all of the spacing. Only the size the type is set at moved.
   The floor drops with the cap because a clamp whose minimum exceeds its
   maximum returns the minimum, which would have pinned every width to 24px. The
   one column layout below 1060px has 315px to work in and does not need the
   reduction, so it is given its 24px back in that block. */
.trust__ic{width:24px;height:24px;color:var(--gold-soft);margin-bottom:10px;}
/* "20+ Years" read as though the numerals were set smaller than the letters
   beside them. They are not: Cormorant Garamond defaults to OLDSTYLE figures,
   which are drawn to the x-height with descenders, so they genuinely sit lower
   and measure shorter against a capital. Ink height off the raster at 4x, at
   this face and this size:
              default   lining-nums
     "20"      9.25px     14.25px
     "Y"      13.75px     13.75px
     "+"       7.50px      7.50px
   So the numerals were 0.673 of the cap and are now 1.036 of it. The Google
   Fonts build does carry the feature, checked by rendering the string both
   ways rather than assumed, so this is the real fix and nothing is scaled. An
   enlarged oldstyle figure would have kept the descender and the wrong shape;
   a lining figure is drawn to cap height to begin with.
   The "+" does not move, which is correct. It is a math symbol, not a figure,
   and the feature does not reach it.
   Scoped to .trust__k on purpose. The value lines below are Jost and carry
   "403(b), 401(k)", whose numerals are already lining and must not change. */
.trust__k{font-family:var(--display);font-size:clamp(20px,1.95vw,22px);color:var(--gold-soft);line-height:1.15;margin-bottom:8px;font-variant-numeric:lining-nums;}
.trust__v{font-family:var(--label);font-size:15.5px;color:rgba(255,255,255,.85);line-height:1.55;}

/* The strip was 232.11px at 1280 and read as chunky, and 128 of that was
   .section--tight paying 64px of padding at each end before any content.
   The rest is fixed: a 24.36px label, its 14px margin, and a 65.75px row
   whose height is the tallest mark, which was scaled up deliberately and is
   not being given back. So the padding is the only lever, and it is the only
   thing that moved: 64/64 becomes 34.56/32 at 1280, which lands the section
   at 170.67px. The cells never needed a min-height, because the row is
   already exactly as tall as its tallest logo and anything shorter would be
   inert.
   Longhand rather than the shorthand .section--tight uses, so the zero left
   and right padding that rule sets is left alone. */
.carriers{padding-top:clamp(26px,2.7vw,38px);padding-bottom:clamp(24px,2.5vw,34px);}
.carriers .wrap{text-align:center;}
/* The strip's label, back in service with new wording. This rule is the
   original one, untouched since 431e285: it was orphaned rather than deleted
   when the old label came out, so the returning label inherits exactly the
   type the removed one carried. */
.carriers__l{font-family:var(--label);font-size:14px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 14px;}
.carriers__n{font-family:var(--display);font-size:clamp(19px,1.7vw,25px);color:var(--navy);line-height:1.55;margin:0 auto;max-width:60ch;}
.carriers__n b{font-weight:500;}
.carriers__n em{font-style:italic;color:var(--slate);}
/* Left in place, matching nothing. The typed carrier names are gone from the
   strip, so no .carriers__c wrapper and no <b> is emitted any more. Kept
   rather than tidied out, so the reasoning below stays on the record. */
/* A carrier's logo sits beside its own name. inline-flex keeps the mark and
   the name together as one unit, so the marquee can never scroll a logo
   away from the carrier it belongs to. Every size is carried by the file's
   own width and height attributes and they are deliberately unequal: the
   four marks differ in aspect ratio, so an equal grid would read as uneven.
   Nothing here touches .carriers__track, so the marquee is untouched. */
/* vertical-align matters here. An inline-flex box takes its baseline from
   its first flex item, which is the <img>, and a replaced element's
   baseline is its bottom edge. Left alone, every group hangs its logo's
   bottom on the text baseline and the label rides up above the separator
   dots. Aligning the group to the middle instead puts labels, dots and
   marks on one optical line. */
.carriers__c{display:inline-flex;align-items:center;gap:10px;vertical-align:middle;}
/* Five equal segments across the wrap's full content width, four hairlines
   landing on the fifths. Before this the four marks totalled about 475px
   floating in a 1124px band, which left roughly 320px of dead space at each
   end and made the strip read as a small huddle rather than a band. flex:1 on
   every cell is what puts the dividers on the fifths and carries them to the
   edges whatever the marks measure. */
/* align-items:stretch, not center. Centred, every cell takes its own content
   height and the four hairlines come out at four different lengths, which
   reads as an accident. Stretched, all five match the tallest and the
   dividers are one length. Each cell centres its own contents, so the marks
   still sit on one optical line. */
.carriers__row{display:flex;align-items:stretch;}
.carriers__cell{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;border-left:1px solid rgba(122,95,48,.28);}
.carriers__cell:first-child{border-left:0;}
/* Each mark is sized as a percentage of its own cell rather than in pixels,
   and that is what holds their relative proportions together. The cells are
   equal, so one percentage per mark means all four scale by a single factor at
   every width, exactly as the old flex row did through its shared shrink. In
   pixels they would instead each clamp against max-width at their own
   threshold, and at 375 all four would land on the identical width, which is
   the one thing an equal grid must not do to marks of different aspect.
   The percentages are 1.5 times the previous rendered widths over the 224.96px
   cell the 1280 band gives: 171, 213, 171 and 158 against 114, 142, 114 and
   105. height:auto keeps each aspect ratio, so nothing is stretched to fill. */
.carriers__logo{display:block;width:auto;height:auto;max-width:100%;}
.carriers__cell [data-carrier="midland-national"]{width:76%;}
.carriers__cell [data-carrier="national-life"]{width:94.5%;}
.carriers__cell [data-carrier="nationwide"]{width:76%;}
.carriers__cell [data-carrier="security-benefit"]{width:70%;}
/* In the fifth segment now, not on its own line under the row. Four cells with
   nothing after them read as the complete list of who he represents, which is a
   claim rather than a display. The em styling is the one it already had. */
.carriers__row .carriers__n{margin:0;max-width:none;}
/* A fifth of 315px is 63px, and the line set at its 19px floor needs 86.8,
   so on phones it broke after "and" and left the cell twice the height of
   every mark beside it. Scaled to the viewport it holds one line: 12.4px at
   375 and the 11px floor at 320, against 63.2px and 52.2px of cell. */
@media(max-width:760px){
  .carriers__row .carriers__n{font-size:clamp(11px,3.3vw,17px);}
}
.head{max-width:62ch;margin-bottom:clamp(42px,4.5vw,64px);}
.head--c{margin-left:auto;margin-right:auto;text-align:center;}
.head--c .eyebrow{justify-content:center;}

/* ---- two pillars ---- */
.pil{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.p{background:var(--white);border:1px solid rgba(22,41,75,.14);border-radius:2px;padding:44px 38px 38px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s;}
.p:hover{transform:translateY(-6px);box-shadow:0 18px 46px rgba(11,23,41,.12);border-color:rgba(184,145,79,.5);}
.p__ic{width:40px;height:40px;color:var(--gold);margin-bottom:24px;}
.p h3{margin-bottom:14px;}
.p p{color:var(--slate);font-size:17.5px;margin-bottom:24px;}
.p ul{list-style:none;padding:0;margin:0 0 30px;}
.p li{position:relative;padding-left:24px;font-size:17px;color:var(--slate);margin-bottom:11px;line-height:1.55;}
.p li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:8px;border:1px solid var(--gold);border-radius:50%;}
.p__lk{margin-top:auto;font-family:var(--label);font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);text-decoration:none;display:inline-flex;align-items:center;gap:10px;}
.p__lk span{transition:transform .25s;}
.p:hover .p__lk span{transform:translateX(6px);}
.also{margin-top:34px;font-family:var(--label);font-size:16px;color:var(--slate);}
.also a{color:var(--navy);}

.ap__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(38px,5.5vw,84px);align-items:center;}

.ap__photo .ph{position:absolute;inset:0;background:radial-gradient(44% 32% at 62% 24%,rgba(240,206,140,.4) 0%,rgba(240,206,140,0) 66%),linear-gradient(178deg,#3C5E4A 0%,#5E7C52 26%,#8B9A5C 46%,#6E8250 62%,#2E4634 82%,#12211A 100%);}
.ap__photo .lbl{position:absolute;left:26px;bottom:22px;z-index:3;font-family:var(--label);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.58);}
.four{list-style:none;counter-reset:f;padding:0;margin:32px 0 0;}
.four li{counter-increment:f;position:relative;padding-left:60px;margin-bottom:28px;}
.four li:last-child{margin-bottom:0;}
.four li::before{content:counter(f);position:absolute;left:0;top:-2px;font-family:var(--display);font-size:20px;color:var(--gold-deep);border:1px solid rgba(184,145,79,.6);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;}
.four q{font-family:var(--display);font-size:clamp(22px,1.8vw,26px);color:var(--navy);line-height:1.34;quotes:none;display:block;}

.quote .wrap{text-align:center;}
.quote blockquote{font-family:var(--display);font-style:italic;font-size:clamp(30px,3.8vw,52px);line-height:1.26;margin:0 auto;max-width:20ch;color:var(--white);font-weight:400;}
.quote blockquote b{font-style:normal;font-weight:500;color:var(--gold-soft);}

/* ---- qualifier embed ---- */

.form{background:var(--white);border:1px solid rgba(22,41,75,.14);border-radius:2px;padding:40px 36px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.fld{margin-bottom:22px;}
.fld label{display:block;font-family:var(--label);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:9px;}
.fld input,.fld select,.fld textarea{width:100%;font-family:var(--body);font-size:17px;color:var(--ink);padding:14px 16px;border:1px solid rgba(22,41,75,.28);border-radius:1px;background:var(--bone);}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold);background:var(--white);}
.form .btn{width:100%;}
.cold{font-family:var(--label);font-size:13.5px;color:var(--slate);line-height:1.55;margin:18px 0 0;}

.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(22,41,75,.2);}
.step{padding:40px 36px 6px;border-left:1px solid rgba(22,41,75,.2);}
.step:first-child{border-left:0;padding-left:0;}
.step__n{font-family:var(--label);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px;}
.step p{color:var(--slate);font-size:17.5px;margin:0;}

.tg{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.t{background:var(--white);border:1px solid rgba(22,41,75,.14);border-radius:2px;padding:38px 36px;display:flex;flex-direction:column;}
.t__m{width:28px;height:28px;color:var(--gold);opacity:.6;margin-bottom:20px;}
.t p{font-family:var(--display);font-size:clamp(21px,1.6vw,24px);line-height:1.46;color:var(--navy);margin-bottom:26px;}
.t__by{margin-top:auto;padding-top:20px;border-top:1px solid rgba(22,41,75,.14);}
.t__n{display:block;font-family:var(--label);font-size:16px;font-weight:600;color:var(--navy);line-height:1.3;}
.t__r{display:block;font-family:var(--label);font-size:14.5px;color:var(--slate);margin-top:4px;line-height:1.45;}
.disc{font-family:var(--label);font-size:14px;color:var(--slate);margin-top:26px;}

.band__grid{display:grid;grid-template-columns:1.15fr .95fr;gap:clamp(36px,5vw,72px);align-items:center;}
.band h2{color:var(--white);}
.band p{color:rgba(255,255,255,.86);}
.box{background:rgba(255,255,255,.06);border:1px solid rgba(217,192,138,.32);border-radius:2px;padding:36px 34px;}
.box h3{color:var(--gold-soft);font-size:23px;}
.box ul{list-style:none;padding:0;margin:0;}
.box li{position:relative;padding-left:26px;font-size:16.5px;color:rgba(255,255,255,.86);margin-bottom:13px;line-height:1.55;}
.box li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border:1px solid var(--gold-soft);border-radius:50%;}

.ln{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid rgba(22,41,75,.16);}
.ln__l{font-family:var(--label);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);flex:0 0 96px;padding-top:5px;}
/* min-width:0 is the guard, not the fix. A flex item's automatic minimum size
   is its min-content width, and an email address is one unbreakable word, so
   .ln__v refused to shrink below the whole address and pushed it past the
   viewport. Pinned to 0 the item can shrink, and overflow-wrap lets the
   address break rather than overflow if a line is ever narrower than the
   address itself. Neither fires at any width the stacking below covers. */
.ln__v{font-size:18px;color:var(--navy);min-width:0;overflow-wrap:anywhere;}
/* The real fix: below the width where label and value stop fitting side by
   side, the label takes a line of its own and the value gets the wrap's full
   width. The address then renders whole and unbroken rather than split mid
   string, which is the point of a contact page.
   Measured, not guessed. The value column is the wrap's content width minus
   the 96px label and the 18px gap. questions@wellesconsulting.com sets 249.75px
   in Newsreader and 263.66px in Georgia, the widest font in .ln__v's stack, so
   the row needs 437.66px of viewport in the worst case and overflows at 437 and
   below. 460px clears that with room, and it is under the 520px the utility bar
   already restyles at, so no other breakpoint moves. */
@media(max-width:460px){
  .ln{flex-wrap:wrap;}
  .ln__l{flex-basis:100%;}
}
.ln__v a{text-decoration:none;}
.ln__v a:hover{color:var(--gold);}

.ft{background:var(--navy-900);color:rgba(255,255,255,.74);font-family:var(--label);font-size:15.5px;}
.ft__top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:46px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.15);}
.ft h4{font-family:var(--label);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 18px;font-weight:500;}
.ft ul{list-style:none;padding:0;margin:0;}
.ft li{margin-bottom:11px;}
.ft a{text-decoration:none;}
.ft a:hover{color:var(--gold-soft);}
.ft p{color:rgba(255,255,255,.74);}
.ftline{padding-top:28px;font-size:14px;color:rgba(255,255,255,.66);line-height:1.7;}
.dsc{margin-top:20px;}
.dsc__b{background:none;border:0;padding:0;cursor:pointer;font-family:var(--label);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);display:inline-flex;align-items:center;gap:8px;}
.dsc__b:hover{color:var(--gold-soft);}
.dsc__b span{transition:transform .3s;}
.dsc.open .dsc__b span{transform:rotate(45deg);}
.dsc__p{max-height:0;overflow:hidden;transition:max-height .4s ease;}
.dsc__p div{padding-top:20px;font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.55);max-width:55ch;}
.dsc__p p{color:rgba(255,255,255,.55);margin:0 0 13px;}

/* ---- inline qualifier (wq-) ---- */
.wq__opts[data-multi] .wq__opt i{border-radius:3px;}
.wq__opts[data-multi] .wq__opt.sel i::after{border-radius:1px;inset:3px;}
.wq__hint{font-family:var(--label);font-size:16px;color:var(--slate);margin:0 0 24px;line-height:1.55;}

.wq{max-width:760px;margin:0 auto;background:var(--white);border:1px solid rgba(22,41,75,.14);border-radius:2px;padding:clamp(30px,4vw,46px);}
.wq__bar{display:flex;gap:6px;margin-bottom:30px;}
.wq__bar i{flex:1;height:3px;background:rgba(22,41,75,.14);border-radius:2px;transition:background .35s;}
.wq__bar i.on{background:var(--gold);}
.wq__step{display:none;}
.wq__step.on{display:block;animation:wqf .35s ease;}
@keyframes wqf{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.wq__k{font-family:var(--label);font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 14px;}
.wq h3{font-family:var(--display);font-weight:500;font-size:clamp(25px,3vw,33px);line-height:1.2;color:var(--navy);margin:0 0 10px;}
.wq__hint{font-family:var(--label);font-size:16px;color:var(--slate);margin:0 0 24px;line-height:1.55;}
.wq__opts{display:grid;gap:11px;margin-bottom:26px;}
.wq__opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;background:var(--bone);border:1px solid rgba(22,41,75,.18);border-radius:2px;padding:16px 20px;font-family:var(--body);font-size:17px;color:var(--ink);line-height:1.4;transition:border-color .2s,background .2s,transform .2s;}
.wq__opt:hover{border-color:var(--gold);background:var(--white);transform:translateX(3px);}
.wq__opt.sel{border-color:var(--gold);border-width:2px;background:var(--white);padding:15px 19px;}
.wq__opt i{flex:0 0 20px;height:20px;border:1px solid rgba(22,41,75,.35);border-radius:50%;display:block;position:relative;}
.wq__opt.sel i{border-color:var(--gold);}
.wq__opt.sel i::after{content:"";position:absolute;inset:4px;background:var(--gold);border-radius:50%;}
.wq__row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-top:6px;}
.wq__btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--label);font-size:14.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:15px 30px;border:1px solid transparent;border-radius:1px;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s;}
.wq__btn--navy{background:var(--navy);color:var(--white);}
.wq__btn--navy:hover{background:var(--navy-600);transform:translateY(-2px);}
.wq__btn--gold{background:var(--gold);color:var(--navy-900);}
.wq__btn--gold:hover{background:var(--gold-soft);transform:translateY(-2px);}
.wq__btn--ghost{border-color:rgba(22,41,75,.45);color:var(--navy);background:none;}
.wq__btn--ghost:hover{background:var(--navy);color:var(--white);}
.wq__btn[disabled]{opacity:.35;cursor:not-allowed;transform:none;}
.wq__back{background:none;border:0;font-family:var(--label);font-size:15px;color:var(--slate);cursor:pointer;padding:8px 0;}
.wq__back:hover{color:var(--navy);}
.wq__res .m{width:46px;height:46px;color:var(--gold);margin-bottom:20px;}
.wq__res h3{margin-bottom:14px;}
.wq__res p{color:var(--slate);font-size:18px;margin:0 0 18px;}
.wq__res .lead{color:var(--ink);font-size:19px;}
.wq__res ul{list-style:none;padding:0;margin:0 0 26px;}
.wq__res li{position:relative;padding-left:26px;margin-bottom:11px;font-size:17px;color:var(--slate);line-height:1.5;}
.wq__res li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border:1px solid var(--gold);border-radius:50%;}
.wq__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px;}
.wq__note{font-family:var(--label);font-size:14px;color:var(--slate);margin-top:22px;padding-top:18px;border-top:1px solid rgba(22,41,75,.14);line-height:1.55;}
.wq__note a{color:var(--navy);}
.wq__mail{background:var(--bone);border:1px solid rgba(22,41,75,.14);border-radius:2px;padding:22px;margin-top:8px;}
.wq__mail label{display:block;font-family:var(--label);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:9px;}
.wq__mail input{width:100%;font-family:var(--body);font-size:17px;padding:13px 15px;border:1px solid rgba(22,41,75,.28);border-radius:1px;background:var(--white);color:var(--ink);}
.wq__mail input:focus{border-color:var(--gold);}
.wq__mail .wq__btn{margin-top:14px;width:100%;}
@media(max-width:560px){.wq__row{flex-direction:column-reverse;align-items:stretch;}.wq__row .wq__btn{width:100%;}}

.rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease-out,transform .55s ease-out;}
.rv.in{opacity:1;transform:none;}

@media(max-width:1060px){
  .nav{display:none;position:absolute;top:100%;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);flex-direction:column;align-items:stretch;gap:0;background:var(--bone);border-bottom:1px solid rgba(22,41,75,.15);padding:8px var(--gut) 24px;}
  .nav.open{display:flex;}
  .nav a{padding:17px 0;border-bottom:1px solid rgba(22,41,75,.1);font-size:18px;}
  .navtoggle{display:block;}
  .hdr .btn{display:none;}
  .pil,.tg,.steps,.frow,.fit,.ap__grid,.band__grid,.ft__top{grid-template-columns:1fr;}
  .step{border-left:0;padding-left:0;border-top:1px solid rgba(22,41,75,.2);}
  .step:first-child{border-top:0;}
  .steps{border-top:0;}
  .ap__photo{min-height:300px;order:-1;}
  .trust__grid{grid-template-columns:1fr;}
  .trust__i{border-left:0;border-top:1px solid rgba(217,192,138,.28);padding-left:0;padding-right:0;}
  .trust__i:first-child{border-top:0;}
  .trust__k{font-size:24px;}
  .util__r{gap:20px;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .rv{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* ---- multi-page routing ---- */
[data-goto]{cursor:pointer;}

.page{display:none;}
.page.on{display:block;animation:pgin .35s ease;}
@keyframes pgin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.nav a[aria-current="page"]{color:var(--gold-deep);}
.nav a[aria-current="page"]::after{right:0;}

/* ---- approach art ---- */
.ap__photo{position:relative;overflow:visible;min-height:0;background:transparent;}
.ap__chart{margin:0;}
.ap__chart figcaption{font-family:var(--label);font-size:13px;color:var(--slate);margin-top:12px;line-height:1.5;}
.zoom{position:fixed;inset:0;z-index:200;background:rgba(11,23,41,.92);display:none;align-items:center;justify-content:center;padding:4vw;cursor:zoom-out;}
.zoom.on{display:flex;}
.zoom img{max-width:100%;max-height:92vh;border-radius:2px;background:#fff;}

/* ---- testimonial avatars ---- */
.t__by{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:20px;border-top:1px solid rgba(22,41,75,.14);}
.t__av{flex:0 0 66px;width:66px;height:66px;border-radius:50%;object-fit:cover;object-position:center;box-shadow:0 0 0 1px rgba(22,41,75,.14),0 0 0 4px rgba(184,145,79,.28);}
.t__who{min-width:0;flex:1;}

/* ---- guides / articles (cluster pages) ---- */
.sub{font-family:var(--label);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 26px;}
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.guide{background:var(--white);border:1px solid rgba(22,41,75,.13);border-radius:2px;padding:34px 30px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s;text-decoration:none;}
.guide:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(11,23,41,.11);border-color:rgba(184,145,79,.5);}
.guide .tag{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px;}
.guide h3{margin-bottom:10px;}
.guide p{color:var(--slate);font-size:16.5px;margin-bottom:22px;}
.guide .lk{margin-top:auto;font-family:var(--label);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);display:inline-flex;gap:9px;align-items:center;}
.arts{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid rgba(22,41,75,.16);}
.art{padding:28px 30px 28px 0;border-bottom:1px solid rgba(22,41,75,.16);text-decoration:none;display:block;transition:background .2s;}
.art:nth-child(even){padding-left:30px;border-left:1px solid rgba(22,41,75,.16);}
.art:hover{background:var(--white);}
.art .meta{font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:9px;}
.art h3{font-size:clamp(20px,1.7vw,24px);margin:0 0 6px;}
.art p{color:var(--slate);font-size:16px;margin:0;}
.samplenote{font-family:var(--label);font-size:14.5px;color:var(--slate);background:rgba(184,145,79,.09);border:1px solid rgba(184,145,79,.3);border-radius:2px;padding:14px 18px;margin-bottom:34px;line-height:1.5;}
.crumb{font-family:var(--label);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:20px;}
.crumb a{text-decoration:none;color:var(--gold-deep);}
.phead{background:var(--bone-deep);}
.phead .wrap{padding-top:clamp(46px,6vw,84px);padding-bottom:clamp(46px,6vw,84px);}
/* The two hub page heads only. They filled the viewport, so a visitor saw
   what looked like an empty page with 1,300 words hidden below. Tighter
   padding lets the first section peek above the fold, and position:relative
   anchors the scroll cue the same way .hero does on the homepage. No other
   page carrying .phead is affected. */
.phead--fold{position:relative;}
.phead--fold .wrap{padding-top:clamp(32px,5.2vw,68px);padding-bottom:clamp(32px,5.2vw,68px);}
/* About only. This .phead holds a crumb and an eyebrow and no heading,
   because the page's h1 sits beside the portrait instead. Its bottom
   padding was therefore spacing nothing, and .phead and the section under
   it share one background, so 199.2px at 1280 read as a void rather than
   as air. The padding drops to zero and the section below supplies the
   whole gap, which lands at 77.6px at 1280 and 60px at 375. The adjacent
   sibling is deliberate: it reaches only the section that follows this one
   .phead, so the 12 other pages carrying .phead are untouched.
   flow-root is load bearing, not tidiness. Zeroing the padding leaves the
   wrap with no bottom padding and no border, and .phead has none either,
   so the eyebrow's 20px bottom margin collapsed straight out of both and
   opened a 20px gap BETWEEN the two sections. Both bands are bone-deep and
   the body behind them is bone, so that gap drew a pale line across the
   page: #F5F2EA showing between two #EAE4D6 bands. flow-root gives the
   wrap its own formatting context, so the margin stays inside the band it
   belongs to and the 20px still counts toward the gap. */
.phead--flush .wrap{padding-bottom:0;display:flow-root;}
.phead--flush + .section{padding-top:clamp(40px,4.5vw,64px);}
/* The cue is gold-soft on the homepage because it sits on navy, where it
   measures 10.14:1. On the hubs it sits on bone, where that same gold-soft
   measures 1.40:1 and is effectively invisible. gold-deep measures 4.72:1 on
   bone. Scoped to .phead--fold, so only the two hubs change and the homepage
   cue keeps its own colour. */
.phead--fold .scrollcue{color:var(--gold-deep);}
/* The hub page head h1 had no size rule of its own, so it inherited the
   browser default of 2em against an 18.5px root: 37px at every width,
   including phones. That is what pushed the scroll cue below the fold on a
   375 wide screen. This scales it down on narrow screens only. At 1280 the
   clamp is still capped at 37px, so desktop is unchanged, and it never goes
   below 27px. Scoped to .phead--fold, so the four other pages using .phead
   keep the size they have always had. */
.phead--fold h1{font-size:clamp(27px,4.6vw,37px);}

/* ---- carrier illustration ---- */
.illus{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(30px,4vw,60px);align-items:center;}
.illus h2{font-size:clamp(26px,2.6vw,36px);}
.illus__note{font-family:var(--label);font-size:14px;color:var(--slate);line-height:1.55;border-left:2px solid var(--gold);padding-left:16px;margin:22px 0 0;}
.illus__fig{margin:0;}
.illus__fig img{width:100%;height:auto;border:1px solid rgba(22,41,75,.16);border-radius:2px;display:block;}
.illus__fig figcaption{font-family:var(--label);font-size:13.5px;color:var(--slate);margin-top:12px;line-height:1.5;}
@media(max-width:1060px){.illus{grid-template-columns:1fr;}}

/* ---- SEO library ---- */
.libgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.lib{background:var(--white);border:1px solid rgba(22,41,75,.13);border-radius:2px;padding:32px 28px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s;}
.lib:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(11,23,41,.1);border-color:rgba(184,145,79,.5);}
.lib__h{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid rgba(22,41,75,.14);}
.lib h3{font-size:clamp(20px,1.7vw,23px);margin:0 0 6px;}
.lib__s{font-family:var(--label);font-size:14px;color:var(--gold-deep);margin:0;letter-spacing:.04em;}
.lib__l{list-style:none;padding:0;margin:0 0 18px;}
.lib__l li{position:relative;padding-left:22px;font-size:16px;color:var(--slate);margin-bottom:10px;line-height:1.5;}
.lib__l li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border:1px solid var(--gold);border-radius:50%;}
.lib .lk{margin-top:auto;font-family:var(--label);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);display:inline-flex;gap:9px;align-items:center;cursor:pointer;}
.lib .lk span{transition:transform .25s;}
.lib:hover .lk span{transform:translateX(6px);}
@media(max-width:1060px){.libgrid{grid-template-columns:1fr;}}

/* ---- FAQ accordion ---- */
.ac{border-bottom:1px solid rgba(22,41,75,.16);}
.ac__b{width:100%;background:none;border:0;text-align:left;cursor:pointer;font-family:var(--display);font-size:clamp(20px,1.7vw,25px);color:var(--navy);padding:26px 48px 26px 0;position:relative;line-height:1.3;}
.ac__b::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--label);font-size:24px;color:var(--gold);transition:transform .3s;}
.ac.open .ac__b::after{transform:translateY(-50%) rotate(45deg);}
.ac__p{max-height:0;overflow:hidden;transition:max-height .4s ease;}
.ac__p div{padding:0 48px 26px 0;}
.ac__p p{color:var(--slate);font-size:16.5px;margin:0;}

/* ---- about ---- */
.about__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,5vw,72px);align-items:start;}
.about__photo{position:relative;border-radius:2px;overflow:hidden;min-height:clamp(380px,44vw,540px);background:var(--navy-900);}
.about__photo .ph{position:absolute;inset:0;background:radial-gradient(52% 40% at 50% 32%,rgba(240,206,140,.28) 0%,rgba(240,206,140,0) 70%),linear-gradient(170deg,#27406B 0%,#16294B 46%,#0B1729 100%);}
.about__photo .lbl{position:absolute;left:24px;bottom:20px;z-index:2;font-family:var(--label);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);}
/* The headshot fills the slot. The slot's height comes from its own
   min-height, not from the image, so the box is the same size before and
   after the photo loads and nothing can shift; the width and height
   attributes on the tag are read from the file at build time and are there to
   declare the intrinsic ratio, not to size anything.
   The image is portrait at 0.579 and the slot is 0.805 at 1280 and 0.984 at
   375, so cover crops height and never width: 28.1% of the frame goes at 1280
   and 41.2% at 375. object-position decides which 28% and which 41%.
   The Y figure reads backwards until you hold it still: a larger percentage
   slides the visible window down the image, so a feature near the top of the
   frame rises in the box. Centred at 50% his eyes sit near the middle. At 20%
   they land around 28% of the box at 1280 and 375 alike, inside the upper
   third at both, and there is still headroom above his hair. Measured against
   a one third guide rather than judged by eye: 12% put the eyes exactly on
   the line at 375, and 28% cleared it but cropped the top of his head.
   .ph and .lbl are still styled above: the build swaps them out of the about
   page, but they are what src itself still carries, and .ap__photo on the
   homepage uses the same two class names. */
.about__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;}
/* The licence line used to be a badge floated over the portrait at top left,
   12px uppercase in gold-soft, absolutely positioned with z-index:2. The new
   photograph put a bright window behind that corner and the gold stopped
   reading, so it moved into the bio under the role line. It now takes the role
   line's own type exactly, so it reads as a second line of the same block
   rather than a badge that has been relocated. The 26px gap that used to sit
   under the role line moves down here with it, which keeps the distance to the
   body copy unchanged. */
.about__lic{font-family:var(--label);font-size:15px;letter-spacing:.06em;color:var(--gold-deep);margin:0 0 26px;}
.about__role{font-family:var(--label);font-size:15px;letter-spacing:.06em;color:var(--gold-deep);margin:0 0 6px;}
.about__body p{font-size:18.5px;color:var(--ink);line-height:1.8;margin:0 0 20px;}

/* ---- booking ---- */
.bk__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,4vw,60px);align-items:start;}
.bk__aside{background:var(--white);border:1px solid rgba(22,41,75,.14);border-radius:2px;padding:34px 32px;}
.bk__badge{display:inline-block;font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);background:rgba(184,145,79,.1);border:1px solid rgba(184,145,79,.3);border-radius:2px;padding:6px 14px;margin-bottom:22px;}
.bk__meta{list-style:none;padding:0;margin:20px 0 0;}
.bk__meta li{position:relative;padding-left:30px;margin-bottom:14px;font-size:16.5px;color:var(--slate);line-height:1.5;}
.bk__meta li svg{position:absolute;left:0;top:2px;width:19px;height:19px;color:var(--gold);}
.bk__panel{background:var(--white);border:1px solid rgba(22,41,75,.14);border-radius:2px;padding:clamp(26px,3vw,38px);}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.cal__mo{font-family:var(--display);font-size:23px;color:var(--navy);}
.cal__nav{display:flex;gap:8px;}
.cal__nav button{width:44px;height:44px;min-width:44px;min-height:44px;border:1px solid rgba(22,41,75,.22);background:var(--bone);border-radius:2px;cursor:pointer;font-size:18px;line-height:1;color:var(--navy);}
.cal__nav button:hover:not([disabled]){border-color:var(--gold);background:var(--white);}
.cal__nav button[disabled]{opacity:.3;cursor:not-allowed;}
.cal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
.cal__dow span{text-align:center;font-family:var(--label);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);padding:6px 0;}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal__d{aspect-ratio:1;border:1px solid rgba(22,41,75,.14);background:var(--bone);border-radius:2px;font-family:var(--body);font-size:16px;color:var(--ink);cursor:pointer;}
.cal__d:hover:not([disabled]){border-color:var(--gold);background:var(--white);}
.cal__d[disabled]{cursor:default;background:var(--bone-deep);border-color:rgba(22,41,75,.10);color:var(--slate);}
.cal__d.sel{background:var(--navy);color:var(--white);border-color:var(--navy);}
.cal__d.empty{border:0;background:transparent;cursor:default;}
.slots{margin-top:26px;}
.slots__h{font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:0 0 14px;}
.slots__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.slot{padding:13px 10px;border:1px solid rgba(22,41,75,.22);background:var(--bone);border-radius:2px;font-family:var(--label);font-size:15px;color:var(--navy);cursor:pointer;}
.slot:hover{border-color:var(--gold);background:var(--white);}
.slot.sel{background:var(--gold);border-color:var(--gold);color:var(--navy-900);font-weight:600;}
.bk__form{margin-top:26px;border-top:1px solid rgba(22,41,75,.14);padding-top:24px;}
.bk__frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.bk__fld{margin-bottom:16px;}
.bk__fld label{display:block;font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:7px;}
.bk__fld input{width:100%;font-family:var(--body);font-size:16px;padding:13px 15px;border:1px solid rgba(22,41,75,.26);border-radius:1px;background:var(--bone);color:var(--ink);}
.bk__fld input:focus{border-color:var(--gold);background:var(--white);}
.bk__done{text-align:center;padding:20px 0;}
.bk__done svg{width:56px;height:56px;color:var(--gold);margin:0 auto 20px;}
/* ---- real booking calendar ------------------------------------------- */
/* 16px floor across the booking page. Several of these are site wide classes,
   so every rule here is scoped to #p-booking and changes no other page. */
#p-booking .sub{font-size:16px;}
#p-booking .bk__eh{font-size:16px;}
#p-booking .bk__steps li{font-size:16px;}
#p-booking .bk__meta li{font-size:16.5px;}
#p-booking .cal__dow span{font-size:16px;letter-spacing:.04em;}
#p-booking .slots__h{font-size:16px;}
#p-booking .btn{font-size:16px;}
.slot__why{font-size:16px;}
.daylist__c{font-size:16px;}
.bksel__h{font-size:16px;}
.cal__d{min-height:44px;min-width:44px;}
/* An available day must be readable as available at a glance. Fill alone is
   far too close to the unavailable fill (1.13:1), so three cues stack: a white
   fill, a soft gold border, and a heavier numeral. Gold is already the site's
   interactive accent, and the existing hover resolves to full gold. */
#p-booking .cal__d:not([disabled]):not(.empty){background:var(--white);border-color:var(--gold-soft);font-weight:600;}
#p-booking .cal__d:not([disabled]):not(.empty):hover{border-color:var(--gold);background:var(--white);}
#p-booking .cal__d[disabled]{font-weight:400;}
#p-booking .cal__d.sel{background:var(--navy);border-color:var(--navy);color:var(--white);}
.cal__note{font-size:16px;color:var(--slate);margin:12px 0 0;line-height:1.5;}
.cal__d[disabled]:hover{border-color:rgba(22,41,75,.10);background:var(--bone-deep);}
.cal__d.today{box-shadow:inset 0 0 0 1px var(--gold);}
.slot{min-height:44px;font-size:16px;}
.slot[disabled]{cursor:default;background:var(--bone-deep);border-color:rgba(22,41,75,.10);color:var(--slate);text-decoration:line-through;}
.slot[disabled]:hover{border-color:rgba(22,41,75,.10);background:var(--bone-deep);}
.slot__why{display:block;letter-spacing:0;text-transform:none;margin-top:2px;}

/* Status region covering loading, empty and error. */
.bkst{padding:26px 0;font-size:17px;color:var(--slate);line-height:1.55;}
.bkst h3{font-family:var(--display);font-size:22px;color:var(--navy);margin:0 0 8px;}
.bkst p{font-size:17px;margin:0 0 10px;}
.bkst a{color:var(--gold-deep);font-weight:600;}
.bkspin{display:inline-block;width:22px;height:22px;border:2px solid var(--bone-deep);border-top-color:var(--gold-deep);border-radius:50%;vertical-align:-5px;margin-right:10px;animation:bkspin 900ms linear infinite;}
@keyframes bkspin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.bkspin{animation-duration:2600ms;}}

/* Selected summary and the next step, which is deliberately not wired yet. */
.bksel{margin-top:26px;border-top:1px solid rgba(22,41,75,.14);padding-top:22px;}
.bksel__h{font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:0 0 8px;}
.bksel__t{font-family:var(--display);font-size:22px;color:var(--navy);margin:0 0 16px;line-height:1.3;}
.bksel__n{font-size:16px;color:var(--slate);margin:12px 0 0;line-height:1.5;}
.bksel button[disabled]{opacity:1;background:var(--bone-deep);border-color:rgba(22,41,75,.18);color:var(--slate);cursor:not-allowed;box-shadow:none;}

/* The two renderings. The grid is the default, the list takes over below 560. */
.bkmob{display:none;}
.daylist{display:block;}
.daylist__row{display:block;width:100%;text-align:left;min-height:56px;padding:14px 16px;margin-bottom:10px;border:1px solid rgba(22,41,75,.18);border-radius:2px;background:var(--bone);color:var(--ink);font-family:var(--body);font-size:17px;cursor:pointer;}
.daylist__row[aria-expanded="true"]{background:var(--navy);border-color:var(--navy);color:var(--white);}
.daylist__d{display:block;font-size:17px;line-height:1.3;}
.daylist__c{display:block;font-family:var(--label);color:var(--slate);margin-top:3px;}
.daylist__row[aria-expanded="true"] .daylist__c{color:var(--bone-deep);}
.daylist__times{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 16px;padding:2px 0 0;}
.daylist__times .slot{min-height:48px;width:100%;font-size:16px;}
.bkmore{width:100%;min-height:48px;margin-top:4px;border:1px solid rgba(22,41,75,.22);background:var(--white);border-radius:2px;font-family:var(--label);font-size:16px;color:var(--navy);cursor:pointer;}

@media(max-width:559px){
  .bkdesk{display:none;}
  .bkmob{display:block;}
}

.wq__opts[data-multi] .wq__opt i{border-radius:3px;}
.wq__opts[data-multi] .wq__opt.sel i::after{border-radius:1px;inset:3px;}
.wq__hint{font-family:var(--label);font-size:16px;color:var(--slate);margin:0 0 24px;line-height:1.55;}
.mailrow{max-width:460px;margin:0 auto;display:flex;gap:12px;flex-wrap:wrap;}
.mailrow input{flex:1;min-width:220px;font-family:var(--body);font-size:17px;padding:15px 16px;border:1px solid rgba(22,41,75,.28);border-radius:1px;background:var(--white);color:var(--ink);}

@media(max-width:1060px){
  .guides,.arts,.about__grid,.bk__grid{grid-template-columns:1fr;}
  .art,.art:nth-child(even){padding:26px 0;border-left:0;}
  .about__photo{min-height:320px;order:-1;}
}
@media(max-width:560px){.bk__frow{grid-template-columns:1fr;}}

/* --- carrier strip (was note 3's marquee, now static) --- */
/* The marquee wrapper and the track are both gone from the markup. The row is
   five equal cells now, declared with the rest of the strip further up, so the
   rules that stood here matched nothing once the wrapper went and are removed
   rather than left orphaned. What the track was for, holding one row of four at
   375 through a shared shrink factor, is now done by sizing each mark as a
   percentage of its own equal cell. */
/* --- subtle tasteful hovers (note 4) --- */
.btn{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,background .2s,color .2s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(11,23,41,.16);}
.lk span{transition:transform .25s;}
.lk:hover span{transform:translateX(5px);}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover,.lk span{transition:none;transform:none;}}

.bk__expect{margin-top:22px;padding-top:20px;border-top:1px solid rgba(22,41,75,.14);}
.bk__eh{font-family:var(--label);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 12px;}
.bk__steps{margin:0;padding-left:0;list-style:none;counter-reset:bk;}
.bk__steps li{position:relative;padding-left:34px;margin-bottom:11px;font-size:15.5px;color:var(--slate);line-height:1.5;counter-increment:bk;}
.bk__steps li::before{content:counter(bk);position:absolute;left:0;top:-1px;width:22px;height:22px;border:1px solid var(--gold);border-radius:50%;font-family:var(--label);font-size:12px;color:var(--gold-deep);display:flex;align-items:center;justify-content:center;}

/* Phone hero shadows. Denser than the desktop value because at 375 the
   text crosses the brightest part of the crop. Placed after the base
   rules on purpose: @media adds no specificity, so document order is
   what decides, and the 760px block above the base rules would lose.
   The eyebrow is deliberately not in this selector list. */
@media(max-width:760px){
  .hero h1,.hero__sub{text-shadow:0 3px 34px rgba(11,23,41,1), 0 2px 12px rgba(11,23,41,1), 0 0 3px rgba(11,23,41,1);}
}

/* Phase 2: keep converted navigation links free of the browser's
   default underline. Scoped so the two tel: links stay underlined. */
a.xlink{text-decoration:none;}


/* ==================== polish pass ==================== */

/* 2 | Hero height. Shorter, so the top of the carrier strip peeks above the
   fold; a visible sliver is the strongest "there is more below" signal.
   The svh line is a progressive upgrade: browsers that don't know svh keep
   the vh rule above it. svh means the sliver survives mobile browser chrome. */
.hero{min-height:clamp(430px,calc(100vh - 220px),700px);}
.hero{min-height:clamp(430px,calc(100svh - 220px),700px);}
@media(max-width:1060px){
  .hero{min-height:clamp(400px,calc(100vh - 250px),620px);}
  .hero{min-height:clamp(400px,calc(100svh - 250px),620px);}
}

/* 2 | Scroll cue, sitting just inside the bottom of the hero. */
.scrollcue{position:absolute;left:50%;bottom:22px;z-index:5;
  transform:translateX(-50%);color:var(--gold-soft);opacity:.85;
  pointer-events:none;}
.scrollcue svg{display:block;}
.scrollcue.is-gone{opacity:0;}
@media(prefers-reduced-motion:no-preference){
  /* Both the fade-out and the bob are motion, so both are gated here.
     Under reduced motion the cue is simply present, then simply gone. */
  .scrollcue{transition:opacity .45s ease;}
  .scrollcue{animation:cueBob 2.6s ease-in-out infinite;}
  @keyframes cueBob{
    0%,100%{transform:translateX(-50%) translateY(0);opacity:.5;}
    50%{transform:translateX(-50%) translateY(5px);opacity:.95;}
  }
}

/* 3 + 4 | Gentle stagger within a group. Entry timing only. */
@media(prefers-reduced-motion:no-preference){
  .trust__i:nth-child(2){transition-delay:.09s;}
  .trust__i:nth-child(3){transition-delay:.18s;}
  .trust__i:nth-child(4){transition-delay:.27s;}
  .tg .t:nth-child(2){transition-delay:.08s;}
  .tg .t:nth-child(3){transition-delay:.16s;}
  .tg .t:nth-child(4){transition-delay:.24s;}
}

/* The quiz card carries .rv in the approved design, but the directive says
   leave the quiz alone, so it is always at its resting state. */
.wq.rv{opacity:1;transform:none;transition:none;}

/* ==================== mobile refinements ====================
   Mobile refinements, with one deliberate exception: the .hero__scene
   max-width release below now applies at every width. Everything else in this
   block is still scoped to 1060px and under. */

/* 3 | A comfortable side gutter on phones. Only the clamp MINIMUM moves, so
   nothing changes at >=667px, where 4.5vw already exceeds 30px. The hero art
   is positioned off .hero, not .wrap, so it stays full-bleed independently. */
:root{--gut:clamp(30px,4.5vw,64px);}

/* 2 | Hero art edge to edge, at every width.
   The base rule img,svg{max-width:100%} caps .hero__scene at 100% of the hero,
   which defeats its own width:116%; combined with inset:-8% that leaves a bare
   navy strip down the right edge. Releasing the cap lets the art cover with the
   8% overhang the design intended.
   The overhang also used to stop the drift animation exposing an edge. The
   drift was removed on 2026-09-15 at Niki's instruction, so that second job is
   gone and the overhang is now unused margin: at the fixed box the picture
   still reaches from source x 6.9 to 93.1 percent, nowhere near an edge. This
   release is still required, because without it the max-width cap would bring
   the navy strip straight back.
   This release used to be scoped to max-width:1060px. An earlier pass required
   desktop to stay pixel-identical, so the strip was knowingly left in place
   above that width and the note here said so. That constraint is now lifted on
   purpose: measured at 1280 the strip was 82px at the drift start and still
   51px at the drift end, never closing, and a pixel probe there returned the
   hero's own background rather than artwork. Those two figures are history now
   that there are no longer two keyframes, but the conclusion stands and the
   guard is removed rather than widened, so there is no width at which the cap
   can come back.
   The global img,svg reset is untouched; other images still rely on it. */
.hero__scene{max-width:none;}

/* 3b | The open mobile menu needs the gutter to actually land.
   The design pulls the dropdown outside the viewport with
   left/right:calc(var(--gut) * -1) and then pads it back by var(--gut), so the
   two cancel and the links sit hard against the screen edge at x=0 (and the
   panel overhangs the viewport by one gutter on each side). .wrap is already
   full width on mobile with the gutter as padding, so pinning the dropdown to
   0 makes it exactly viewport-wide and lets its own padding do the work. */
@media(max-width:1060px){
  .nav{left:0;right:0;}
}

/* 1 | Hero eyebrow on phones: drop the flanking rules, left align it, and
   hide the location, which the utility bar directly above already shows.
   .eb-loc stays in the DOM, so SEO and desktop are untouched. */
@media(max-width:760px){
  .hero .eyebrow{display:block;text-align:left;}
  .hero .eyebrow::before,.hero .eyebrow::after{display:none;}
  .hero .eyebrow .eb-loc{display:none;}
}

/* 4 | Utility bar on small screens.
   Cause of the "didn't load right" look: the row needs 448px but only ~315px
   is available at 375px wide, so .util .wrap wraps onto two lines. Because
   .util__r is a SINGLE flex child holding both the phone and the CTA, each
   wrapped line ends up containing exactly one flex item, so
   justify-content:space-between has nothing to distribute and both lines fall
   hard left, leaving the right half empty. The 18px gap is a row gap as well
   as a column gap, so the two lines also split 18px apart and the bar grows
   from its designed 52px to 74px.
   Fix: centre the lines so the stack reads as one deliberate element, tighten
   the leading and the row gap, and trade the fixed min-height for symmetric
   padding. Copy, colours and font sizes are untouched.
   Scoped to 520px, just below the ~508px width where the row stops fitting,
   so the single-line bar is never restyled. */
@media(max-width:520px){
  .util .wrap{
    justify-content:center;
    align-content:center;
    text-align:center;
    gap:2px 18px;
    line-height:1.35;
    min-height:0;
    padding-top:11px;
    padding-bottom:11px;
  }
  .util__r{justify-content:center;flex-wrap:wrap;gap:6px 18px;}
}

/* 5 | Desktop: the hero and the WHOLE trust band share one fixed budget. The
   band used to reserve one heading line and show its top edge; the owner asked
   for all of it inside the first screen, so the reserve is now the band's full
   height and the two terms that used to split it are gone.

   157px is the utility bar at 52px plus the sticky header at 105px, both
   measured, and both re-measured after the founder line changed face: the bar
   is still 52px at 1280 and 1440. .hdr .wrap carries min-height:104px and the
   lockup reaches 71.38px. The chrome term stops being 157 the moment the
   lockup passes 104px, and this rule names no element, so nothing will report
   that on its own. Re-measure it whenever the lockup grows.

   182px is the band, rounded up from a measured 181.33, and it is identical at
   1280 and 1440: the heading clamp tops out at 22px from 1129px of viewport
   upward, so the band stopped varying with width when that cap came down.
   It breaks down as 10 + 159.33 + 12, the section's own padding either side of
   a .trust__i that is 159.33px tall. Rounding up is deliberate, so the band
   lands 0.67px inside the fold rather than 0.33px outside it.

   The padding came down from 28 and 36, more off the bottom than the top as
   asked. Nothing inside the band moved: not the type sizes, not the icons, not
   the space between icon, heading and value. The item's own 22px padding is
   what keeps this from reading as cramped, so the real air above the icon is
   32px and below the value 34px.

   THE FLOOR IS 440, AND IT MOVED FOR A REASON THAT WAS NOT IN THE BRIEF. The
   note this was worked from put the hero's content at 393.1px and its touching
   point at roughly 420. Measured, .hero__col is 413.19px. The 20px difference
   is the gold rule added between the headline and the subhead two commits
   before this one, which this comment was never updated for. 420 would now
   leave 3.4px of air above and below the copy, which is touching, not air.
   440 reproduces the 13.45px of air that 420 was protecting when the content
   really was 393.1, and that is the whole derivation: same criterion, correct
   content height. Do not go under it.

   Where the band actually clears the fold, measured at 1280 and identical at
   1440, sweeping the viewport:

     900   hero 561   band bottom 899.3   fits
     850   hero 511   band bottom 849.3   fits
     800   hero 461   band bottom 799.3   fits
     790   hero 451   band bottom 789.3   fits
     780   hero 441   band bottom 779.3   fits
     775   hero 440   band bottom 778.3   3.3px short, floor is binding
     760   hero 440   band bottom 778.3   18.3px short
     742   hero 440   band bottom 778.3   36.3px short
     720   hero 440   band bottom 778.3   58.3px short

   778.33px of viewport is the exact threshold, which is 157 + 440 + 181.33.
   Below it the floor binds and the band cannot follow without the hero
   becoming a strip. That is the limit the brief named and it is real: closing
   the last 36px to reach 742 would need the floor at 404, which is 9px less
   than the copy itself.

   THE REVEAL THRESHOLD IS STILL LOAD BEARING, and this is the third time it
   has had to be checked. Every .trust__i paints at translateY(14px) and
   opacity 0 until an IntersectionObserver fires; site.js sets rootMargin
   '0px 0px -10% 0px' and threshold 0.1, so it wants 10% of a 159.33px item,
   15.93px, inside a root ending at 0.9 of the viewport. The item paints from
   157 + hero + padding-top + 14.

   Before this change that was 669px against a root ending at 0.9vh, so it
   needed 761px of viewport and the band sat at opacity 0 with transform
   matrix(1,0,0,1,0,14) at every viewport of 760 and under: geometrically
   present, completely invisible. Now it paints from 621px and needs 707.7,
   which is 53px better.

   Measured after the change rather than predicted, at scroll zero, at both
   widths: opacity 1 and transform none at 900, 850, 800, 780, 760, 742, 720
   and 715, and the last firing viewport is 708. At 706 and below it is back
   to opacity 0 and matrix(1,0,0,1,0,14). That floor cannot be pushed further
   from here: the only terms left are the floor, which is at its limit, and
   the band's top padding, which is already 10, and closing the last 7px of
   ratio would need it at 3.

   The 700px ceiling is unchanged. It starts binding above 1039px of viewport,
   past which the hero stops growing and the band simply shows more, which
   errs the safe way.

   Scoped to min-width:1061px so the tuned mobile hero is untouched, and the
   band's padding is scoped the same way for the same reason. */
@media(min-width:1061px){
  .trust{padding-top:10px;padding-bottom:12px;}
  .hero{min-height:clamp(440px,calc(100vh - 157px - 182px),700px);}
}
/* The scroll cue is seated in the hero's bottom air, and this change spent
   most of that air. The reason it is dropped below 800px of viewport was the
   video marker, and ONLY the video marker. History, measured when the marker
   was emitted: the gap between the cue and the bottom of the hero copy closed
   at about 826px of viewport and was already 0.8px at 800; at 800 the cue
   still drew with a clear gap under "coming soon"; at 780 its top sat on the
   marker's text.
   The marker is no longer emitted (VIDEO_MARKER is False), so that reason is
   gone. Measured on Sep 17 at 1280 wide: the centred cue spans x 627 to 653
   and the gold button, now the only thing in .hero__cta, ends at x 502, so
   the two are 125px apart horizontally and cannot meet at any height. This
   rule is left in place, but today it hides the cue on desktop windows under
   800px tall for no measured reason. Removing it is a separate decision. If
   VIDEO_MARKER is ever set True, the reason returns with it.
   Decoration either way: aria-hidden, and at these heights the fully visible
   band already says there is more below.
   Scoped to the same min-width as the rule above so mobile is untouched. */
@media(min-width:1061px) and (max-height:799px){
  .hero .scrollcue{display:none;}
}


/* ==================== booking form ==================== */
#p-booking .bkform__step{margin:4px 0 6px;}
#p-booking .bkform__intro{font-size:17px;color:var(--ink);line-height:1.55;margin:0 0 20px;}
#p-booking .bk__fld{margin-bottom:20px;}
/* Labels: the design's label face, lifted to 16px and darkened to ink. */
#p-booking .bk__fld label{font-size:16px;letter-spacing:.06em;color:var(--ink);margin-bottom:8px;}
#p-booking .bk__fld input{font-size:18px;min-height:52px;padding:13px 15px;border:1px solid rgba(22,41,75,.45);background:var(--white);}
#p-booking .bk__fld input:focus{border-color:var(--navy);}
#p-booking .bk__fld input[aria-invalid="true"]{border:2px solid #8C2F2F;padding:12px 14px;}
/* An error is words first. The colour and the thicker border only repeat it. */
#p-booking .bkerr{font-family:var(--label);font-size:16px;font-weight:500;color:#8C2F2F;line-height:1.45;margin:8px 0 0;}
#p-booking .bkerr::before{content:"Error: ";font-weight:600;}
/* The disclosure. Full ink on bone, never grey, next to the button. */
#p-booking .bkdisc{font-size:17px;color:var(--ink);line-height:1.55;margin:4px 0 18px;padding:14px 16px;background:var(--bone);border-left:3px solid var(--gold-deep);}
#p-booking .bkform__go{width:100%;min-height:56px;}
#p-booking .bkbusy{font-size:17px;color:var(--ink);margin:14px 0 0;line-height:1.5;}
#p-booking .bkbusy:empty{display:none;}
#p-booking .bkoff{font-size:17px;color:var(--ink);line-height:1.55;margin:14px 0 0;padding:14px 16px;background:var(--bone);border-left:3px solid var(--gold-deep);}
#p-booking .bkoff a,#p-booking .bkerr a{color:var(--navy);font-weight:600;}
#p-booking .bksel__t:focus{outline:none;}
/* The three end states. Taken sits above the calendar; success and failure
   replace the picker. Plain ink on white or bone, nothing thin or grey. */
#p-booking .bkres,#p-booking .bknote{font-size:18px;color:var(--ink);line-height:1.6;}
#p-booking .bkres h3,#p-booking .bknote h3{font-family:var(--display);font-size:clamp(26px,2.4vw,30px);color:var(--navy);line-height:1.25;margin:0 0 14px;}
#p-booking .bkres p,#p-booking .bknote p{font-size:18px;margin:0 0 14px;}
#p-booking .bkres a:not(.btn),#p-booking .bknote a{color:var(--navy);font-weight:600;}
/* Inline phone links keep their place in the sentence but get a 44px tall
   tap area: vertical padding on an inline box grows what can be tapped
   without moving a single line of text. */
#p-booking .bkres p a,#p-booking .bkoff a{display:inline-block;padding:13px 0;margin:-13px 0;}
#p-booking .bkres__mark{display:block;width:52px;height:52px;color:var(--gold-deep);margin:0 0 16px;}
#p-booking .bkres__call{width:100%;min-height:56px;margin-top:6px;}
#p-booking .bknote{background:var(--bone);border-left:4px solid var(--gold-deep);padding:20px 22px;margin:0 0 24px;}
#p-booking .bkres:focus,#p-booking .bknote:focus{outline:none;}
#p-booking .bkres:focus-visible,#p-booking .bknote:focus-visible{outline:3px solid var(--gold-deep);outline-offset:4px;}
#p-booking .bksel__t:focus-visible{outline:3px solid var(--gold-deep);outline-offset:4px;}
/* Focus. The site ring is 2px gold, about 2.9:1 on white. On the page that
   takes a person's details it is 3px gold-deep, well over 3:1. */
#p-booking a:focus-visible,#p-booking button:focus-visible,#p-booking input:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;}
/* Two calendar fixes found by measuring, not by looking.
   The selected day: "#p-booking .cal__d:not([disabled]):not(.empty)" is
   1,3,0 and paints the cell white, which outranks the 1,2,0 selected rule,
   so a chosen day drew its white numeral on white, 1.00:1. The selected
   state now matches that specificity plus one, hover included.
   The disabled month arrow: opacity .3 took the navy glyph to 1.83:1. It
   now reads as unavailable through its fill and border instead, at 5.74:1. */
#p-booking .cal__d.sel:not([disabled]):not(.empty),
#p-booking .cal__d.sel:not([disabled]):not(.empty):hover{background:var(--navy);border-color:var(--navy);color:var(--white);}
#p-booking .cal__nav button[disabled]{opacity:1;background:var(--bone-deep);border-color:rgba(22,41,75,.10);color:var(--slate);}


/* ==================== guide articles ====================
   Article pages reuse the site's chrome, palette and type variables. Body
   copy is set a little larger than the site default because this audience
   skews older, and the measure is held to a comfortable reading width. */

/* 63ch measures ~70 characters in Newsreader, inside the 65 to 75 target.
   The ch unit is the width of "0", which is wider than this font's average
   character, so the rendered count runs above the ch value. */
.art-body{max-width:63ch;font-family:var(--body);font-size:19.5px;line-height:1.85;color:var(--ink);}
.art-body > h2{font-family:var(--display);font-weight:500;font-size:clamp(27px,2.6vw,34px);
  line-height:1.2;color:var(--navy);margin:1.7em 0 .5em;}
.art-body > h2:first-child{margin-top:0;}
.art-body > h3{font-family:var(--display);font-weight:500;font-size:clamp(22px,1.9vw,26px);
  line-height:1.25;color:var(--navy);margin:1.5em 0 .4em;}
.art-ol{list-style:none;counter-reset:aol;padding:0;margin:0 0 1.5em;}
.art-body .art-ol li{counter-increment:aol;position:relative;padding-left:38px;
  margin-bottom:14px;line-height:1.6;color:var(--slate);}
.art-body .art-ol li::before{content:counter(aol);position:absolute;left:0;top:1px;
  width:26px;height:26px;border:1px solid rgba(184,145,79,.6);border-radius:50%;
  background:none;font-family:var(--label);font-size:13px;font-weight:600;
  color:var(--gold-deep);display:flex;align-items:center;justify-content:center;}
.art-body p{margin:0 0 1.15em;}
.art-body ul{list-style:none;padding:0;margin:0 0 1.5em;}
.art-body li{position:relative;padding-left:26px;margin-bottom:11px;line-height:1.6;color:var(--slate);}
.art-body li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;
  border:1px solid var(--gold);border-radius:50%;}
.art-body strong{font-weight:600;color:var(--navy);}

/* Inline callout for the cross-links in the copy. Same card language as .p
   and .guide, with a gold edge so it reads as an aside, not body text. */
.callout{background:var(--white);border:1px solid rgba(22,41,75,.14);
  border-left:3px solid var(--gold);border-radius:2px;
  padding:22px 26px;margin:1.9em 0;}
.callout a{display:block;text-decoration:none;color:var(--slate);font-size:17.5px;line-height:1.6;}
.callout strong{color:var(--navy);}
.callout__ar{color:var(--gold-deep);font-weight:600;white-space:nowrap;}
.callout:hover{border-color:rgba(184,145,79,.5);}

/* Common questions */
.faq{margin:0 0 1.5em;}
.faq__q{font-family:var(--label);font-size:17px;font-weight:600;color:var(--navy);
  margin:0 0 .35em;line-height:1.45;}
.faq__a{margin:0;color:var(--slate);}

.art-note{font-family:var(--label);font-size:14.5px;color:var(--slate);line-height:1.6;margin:0 0 .6em;}
.art-cta{margin:2.4em 0 0;}

/* Article list on the resources index: one column where a section has a
   single article, so it does not sit in a half-empty two column grid. */
.arts--one{grid-template-columns:1fr;}

/* About page disclosures: the quiz pages' .ac accordion in a readable
   measure. The answer keeps the About body size rather than the quiz's
   16.5px, because this rule sits later in the sheet than .ac__p p at equal
   specificity. */
.disclose{max-width:68ch;}
.disclose p{color:var(--slate);font-size:17.5px;line-height:1.7;margin:0;}
/* The pattern's plus sign turns through a transition on ::after, and the
   reduced-motion catch-all's universal selector matches elements only, so
   the turn kept running under reduce: measured at 300ms of rotation with the
   panel already snapped open. Guarded here for every .ac on the site. */
@media(prefers-reduced-motion:reduce){.ac__b::after{transition:none;}}
/* The gap under the last disclosure row is the shared .section padding,
   102.4px at 1280 and 64px at 375, which every section on every page uses
   and which is not touched. This class is on the About disclosures section
   alone. Its bottom lands at 40.96px at 1280 and 26px at 375, so about 60
   percent of the gap goes and the page still breathes before the navy band.
   Longhand, so the section's top padding and the zero sides stay. */
.about__disclosures{padding-bottom:clamp(26px,3.2vw,46px);}
.libsec{margin-bottom:clamp(48px,5vw,76px);}
.libsec:last-of-type{margin-bottom:0;}
.libsec__line{color:var(--slate);font-size:17.5px;margin:0 0 14px;max-width:60ch;}

@media(max-width:700px){
  .art-body{font-size:18.5px;line-height:1.8;}
  .callout{padding:20px 22px;}
}


/* ==================== logo glint ====================
   ONE beam crossing the whole lockup: monogram, then WELLES, then CONSULTING.
   Not three glints firing together.

   The trick is a shared coordinate system. Every layer sizes its gradient to
   the FULL lockup width (--lw) and offsets its own background-position by that
   layer's left offset inside .mark (--bp0 at rest, --bp1 on hover, both in
   lockup space). Because all three layers run the same duration and easing
   over positions expressed in the same space, the highlight is a single beam
   travelling left to right rather than three independent flashes.

   --lw, --bp0 and --bp1 are measured in the shared JS and set on each host
   element; the pseudo element and the text layers inherit them. If that JS
   never runs, --lw falls back to 0px, the gradient has zero width, and no
   glint renders at all. That is the intended failure mode.

   Monogram: masked to the PNG's own alpha, so the light lands on the glyph.
   Wordmark: an aria-hidden duplicate per line with the gradient clipped to the
   letterforms, transparent at rest, so the real text is never restyled. */

.mark__badgewrap{position:relative;display:block;flex:0 0 auto;line-height:0;}
.mark__name,.mark__sub{position:relative;}

.mark__badgewrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(105deg,
    rgba(217,192,138,0) 44%,
    rgba(217,192,138,.55) 50%,
    rgba(217,192,138,0) 56%);
  -webkit-mask-image:var(--logo-mask);
          mask-image:var(--logo-mask);
  -webkit-mask-size:contain;
          mask-size:contain;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-position:center;
          mask-position:center;
}

/* Wordmark shine, carried by ::after content rather than duplicate spans.
   Generated content is not part of the DOM, so the header link's text reads
   "Welles Consulting" once. The pseudo elements inherit font, size, weight,
   letter-spacing and text-transform from their parent, so the shine sits
   exactly on the real glyphs. Generated content is not selectable, so the
   user-select rule the spans needed is gone. */
.mark__name::after,
.mark__sub::after{
  position:absolute;left:0;top:0;
  pointer-events:none;
  white-space:nowrap;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* Gold-soft over the navy WELLES. */
.mark__name::after{
  content:"Welles";
  background-image:linear-gradient(105deg,
    rgba(217,192,138,0) 44%,
    rgba(217,192,138,.9) 50%,
    rgba(217,192,138,0) 56%);
}
/* Gold-soft would vanish on the gold CONSULTING, so a warm near-white at
   lower opacity reads as sheen rather than a colour change. */
.mark__sub::after{
  content:"Consulting";
  background-image:linear-gradient(105deg,
    rgba(245,235,216,0) 44%,
    rgba(245,235,216,.7) 50%,
    rgba(245,235,216,0) 56%);
}

/* Shared beam geometry and the single timeline.

   The transition is deliberately gated behind .glint-ready. --lw and --bp0 are
   measured in JS after first paint, so without the gate the position would
   transition from the 0px fallback to its resting value on every page load:
   a 1200ms animation nobody asked for, and a window in which an early hover
   would start the beam from the wrong place. The JS adds .glint-ready on the
   frame after measuring, so the resting position is set instantly and only
   hover animates. */
.mark__badgewrap::after,
.mark__name::after,
.mark__sub::after{
  opacity:0;
  background-repeat:no-repeat;
  background-size:var(--lw,0px) 100%;
  background-position-x:var(--bp0,0px);
  background-position-y:0;
}
.mark.glint-ready .mark__badgewrap::after,
.mark.glint-ready .mark__name::after,
.mark.glint-ready .mark__sub::after{
  transition:background-position-x 1200ms cubic-bezier(.22,.61,.36,1),
             opacity 320ms ease-out;
}
.mark.glint-ready:hover .mark__badgewrap::after,
.mark.glint-ready:hover .mark__name::after,
.mark.glint-ready:hover .mark__sub::after{
  opacity:1;
  background-position-x:var(--bp1,0px);
  transition:background-position-x 1200ms cubic-bezier(.22,.61,.36,1),
             opacity 160ms ease-out;
}

/* Off entirely, including the duplicate text layers. */
@media(prefers-reduced-motion:reduce){
  .mark__badgewrap::after,
  .mark__name::after,
  .mark__sub::after{display:none;}
}

:root{--logo-mask:url("/assets/logo-79476498.png");}