/* =====================================================================
   Wealth Elements — stylesheet (v4, 2026-07-16)
   Built against the live site's computed styles, then scaled +10% per
   Dean's 2026-07-16 feedback ("everything a few steps larger").

   MEASURED FROM LIVE @1920 (the baseline this file scales from):
     H1 63.04px / H2 47.92px / H3 39.52px / pillar H 26.08px
     body copy 16px (most) · "Life moves fast" intro block 22.72px
     content band ~1341px · row-feature images 694x400 (aspect 1.736)
     Dean's photo 694x729 · data bands 594x441, bleeding to the right edge
     header full-bleed (logo x=0, Book Connect Meeting hard right)
     nav CTA font-weight 300 · footer links 16px wt 300 · badge ~224px

   THE +10% RULE: root font-size is 17.6px (= 16 x 1.1), so every rem
   value below is already +10% over the live site. The vw terms in the
   clamp()s are likewise x1.1 so the uplift holds at narrow widths too.
   Hard px font-sizes are written pre-multiplied. If you ever need to
   return to a true carbon copy, set root back to 16px and divide the vw
   terms by 1.1 — do not touch the individual rules.
   ===================================================================== */

/* ---------- self-hosted brand fonts ---------- */
@font-face{font-family:'Trade Gothic WE';src:url('../brand-assets/fonts/TradeGothic.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
/* The real TradeGothic-Bold.ttf face is DELIBERATELY NOT DECLARED. Dean, 2026-09-15:
   the genuine bold cut read "way too much". Without a 700 face the browser
   synthesises bold from the 400 cut — which is what this site did at his July
   sign-off, and what live does too (live loads its Adobe face at 400 only).
   The repaired file is kept in brand-assets/fonts/ for the Adobe-kit option. */
@font-face{font-family:'Franklin Gothic WE';src:url('../brand-assets/fonts/FranklinGothic-Book.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Franklin Gothic WE';src:url('../brand-assets/fonts/FranklinGothic-Book.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Franklin Gothic WE';src:url('../brand-assets/fonts/FranklinGothic-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Franklin Gothic WE';src:url('../brand-assets/fonts/FranklinGothic-Medium.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap;}

:root{
  --teal:#02403D; --sage:#B3CFCD; --lime:#D9FF00; --white:#fff;
  --grey:#E4E9E9; --magenta:#BA479E; --midteal:#3FA8A3;
  /* live's TextShape annotation colours (our-approach h1): circle #3CACB4,
     marker rgb(247,75,223). The pink is NOT the brand magenta. */
  --circle-teal:#3CACB4; --pink:#F74BDF;
  /* Live's hand-drawn circle path, verbatim from its TextShape SVG. viewBox is the
     path's own bounds (x -7->288, y 0->42.8) plus room for the stroke's round caps.
     Used as a mask (see .circ) so one path serves every colourway. */
  --circ-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-9%20-2%20306%2047%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M94.3%2C38.7%20C155.1%2C40.7%20288%2C38.2%20288%2C18.9%20C288%2C2.6%20200.4%2C0%20137.8%2C0%20S-7%2C2.6%20-7%2C18.4%20S61.8%2C42.8%20210.5%2C40.7%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --ink:#111111; --muted:#4d6b68;
  --font-head:'Trade Gothic WE','Helvetica Neue',Arial,sans-serif;
  --font-body:'Franklin Gothic WE','Helvetica Neue',Arial,sans-serif;
  /* live content band ~1341px -> +10% (row-feature needs 1410 inner + 64 padding) */
  --maxw:1480px; --textw:836px;
  /* the Dean split runs wider than the standard band on live (1399 vs 1283) */
  --maxw-wide:1604px;
}
*{box-sizing:border-box;}
/* +10% uplift lives here: 16 x 1.1. Every rem in this file inherits it. */
html{scroll-behavior:smooth;font-size:17.6px;}
body{margin:0;font-family:var(--font-body);font-weight:300;color:var(--teal);background:#fff;font-size:24.2px;line-height:1.70;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:var(--teal);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4,h5{font-family:var(--font-head);font-weight:400;color:var(--teal);margin:0 0 .4em;letter-spacing:normal;}
/* vw terms are live's x1.1 so the uplift holds below the clamp ceiling */
/* HEADING BOLD — 700 WITH NO 700 FACE DECLARED, so the browser synthesises
   bold from the regular cut. Settled 2026-09-15 after Dean saw all three
   options in one afternoon:
     400/500, the regular cut            -> "seems its changed font"
     700 synthesised from the 400 cut    -> WHERE WE ARE. His July sign-off
                                            state, and what live did too.
     700 with the real bold face present -> "way too much"
   There is NO rung between the first two, because we hold only two font files.
   ⭐ The only way to get a genuine intermediate weight is licensing the Adobe
   Fonts Trade Gothic kit, which is what the Squarespace site used. The repaired
   TradeGothic-Bold.ttf stays in brand-assets/fonts/ but is deliberately not
   declared above — re-declaring it is what produced "way too much".
   The body `strong` stays 600: that is Franklin Gothic, which has real faces at
   every weight and is untouched by any of this. */
h1 strong,h2 strong,h3 strong,h4 strong{font-weight:700;}
h1{font-size:clamp(2.6rem,5.06vw,3.94rem);line-height:1.155;}
h2{font-size:clamp(2.05rem,3.85vw,3.0rem);line-height:1.20;}
h3{font-size:clamp(1.7rem,2.97vw,2.47rem);line-height:1.23;}
h4{font-size:clamp(1.35rem,2.2vw,1.735rem);line-height:1.26;}
p{margin:0 0 1.1em;}
strong{font-weight:600;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.wrap.wide{max-width:var(--maxw-wide);}
.narrow{max-width:var(--textw);margin:0 auto;}
/* live sets some intros in the FULL content band (1400px), not the narrow 836px
   measure — using .narrow there wraps a one-line heading onto two */
.intro-wide{max-width:none;margin:0 auto;}
.lead-22{font-size:1.42rem;line-height:1.7;}
.center{text-align:center;}
.section{padding:96px 0;}
.section-sm{padding:60px 0;}
.lead{font-size:1.12rem;}

/* ---------- text highlight pills (Squarespace text-highlight) ---------- */
.hl{border-radius:.45em;padding:.02em .26em;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
/* Text is TEAL, not black (Dean 2026-07-16: "left text is see through where ours is black").
   The trap: live's class is `sqsrte-text-color--black`, but it computes to rgb(2,64,61) — that's
   Squarespace's theme "black", i.e. the site's darkest colour, which for this brand is the dark
   teal. v4 read the class name and hardcoded #111 (true neutral black), which reads hard and
   opaque against the sage pill where live's teal reads soft. The pill itself already matched
   (both opaque sage rgb(179,207,205) = live's --text-highlight-color at alpha 1). */
.hl-sage{background:var(--sage);color:var(--teal);}
.hl-lime{background:var(--lime);color:var(--teal);}
/* about's "whatever your vision…" marker: live = #3CACB4 with TEAL text, not white */
.hl-teal{background:var(--circle-teal);color:var(--teal);}
/* live uses magenta for "what's possible" — v3 had it as mid-teal.
   Two magenta variants exist on live and they are NOT interchangeable:
   home's "what's possible" has WHITE text; how-we-help's "balance right between
   now and down the track." has TEAL text (`.sqsrte-text-color--black`). */
.hl-magenta{background:var(--magenta);color:#fff;}
.hl-magenta-ink{background:var(--magenta);color:var(--teal);}
/* our-approach's "security." marker is rgb(247,75,223) — a vivid pink that is NOT
   the brand magenta (#BA479E). Taken from live's TextShape `--stroke`. */
.hl-pink{background:var(--pink);color:var(--teal);}
.hl-white{background:#fff;color:var(--midteal);}

/* circle annotations (hand-drawn ellipse around words) */
/* Sharpie circle — live's ACTUAL hand-drawn path, not a geometric ellipse.
   Lifted verbatim from live's TextShape SVG (data-shape="circle"). What makes it
   read as a real pen stroke is the OVERSHOOT: the path starts at x=94 and finishes
   at x=210 having gone the whole way round, so the ends cross rather than meet.
   A `border-radius:50%` box (what v4 used) can never do that — it's a shape, not a
   stroke (Dean 2026-07-16: "thicker and looking like an actual sharpy circle").
   Live's stroke = 0.1em of a 32px shape = 3.2px, round cap + join; v4's was 2.5px.
   Delivered as a MASK so the one path serves all three colourways and no markup
   changes. mask-size:100% 100% stretches it to each span, so the rendered stroke
   scales with the text — larger headings get a proportionally heavier pen, which is
   what you'd expect and reads naturally. */
.circ{position:relative;display:inline-block;padding:.05em .35em;}
.circ::before{content:"";position:absolute;inset:-.18em -.3em;pointer-events:none;
  background-color:var(--magenta);
  -webkit-mask-image:var(--circ-mask);mask-image:var(--circ-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.circ-sage::before{background-color:var(--sage);}
/* #3CACB4 = live's TextShape circle stroke */
.circ-teal::before{background-color:var(--circle-teal);}
/* live circles "committed to the vision." in #F250CF — a vivid pink ~= --pink,
   NOT the brand magenta the bare .circ base would give */
.circ-pink::before{background-color:var(--pink);}

/* ---------- buttons — pills, Franklin 500, not uppercase ---------- */
.btn{display:inline-block;font-family:var(--font-body);font-weight:500;font-size:17.6px;letter-spacing:normal;text-transform:none;padding:16px 53px;border-radius:300px;border:0;cursor:pointer;transition:all .18s ease;line-height:1.2;text-align:center;}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--lime);color:var(--teal);}
.btn-primary:hover{background:#c8ec00;}
.btn-teal{background:var(--teal);color:var(--lime);}
.btn-teal:hover{background:#03554f;}
.btn-sage{background:var(--sage);color:var(--teal);}
.btn-sage:hover{background:#c2d9d7;}
.btn-wide{display:block;width:100%;max-width:462px;}
/* outlined lime pill — the live footer's CTA treatment */
.btn-outline{background:transparent;color:var(--lime);border:2px solid var(--lime);}
.btn-outline:hover{background:var(--lime);color:var(--teal);}
/* outlined TEAL pill — important-information's document buttons on live
   (transparent bg, 2px teal border, teal text, full column width, 518x71) */
.btn-outline-teal{background:transparent;color:var(--teal);border:2px solid var(--teal);display:block;width:100%;text-transform:uppercase;padding:26px 20px;}
.btn-outline-teal:hover{background:var(--teal);color:#fff;}

/* ---------- header — fixed transparent overlay, teal on scroll ---------- */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:60;background:transparent;transition:background .25s ease;}
.site-header.scrolled{background:var(--teal);box-shadow:0 2px 18px rgba(0,0,0,.15);}
/* Full-bleed, matching live: logo hard left (x=0), CTA hard right (x=viewport
   edge). Do NOT reintroduce max-width here — the boxed 1280 version was the
   "logo to the left, everything else to the right" defect. */
.nav{display:flex;align-items:center;gap:30px;max-width:none;margin:0;padding:22px 24px;}
/* flex:none is load-bearing — without it the logo is a shrinkable flex item and
   gets squeezed narrower as the viewport tightens (449px at 1920 but only 218px
   at 1180), distorting the mark. Same for the nav CTA. */
.nav .logo{flex:none;}
.nav .logo img{height:44px;width:auto;}
.nav .spacer{flex:1;}
/* 20px — Dean 2026-07-16 ("make the top right area text bigger"). Live is 16px
   and the global +10% gave 17.6, which still read small against the hero.
   This is a deliberate nav-only exception to the +10% rule. Watch the logo
   collision below ~1180px if you push it further. */
.nav a.navlink{color:#fff;font-family:var(--font-body);font-weight:400;font-size:20px;padding-bottom:2px;white-space:nowrap;}
.nav a.navlink:hover{color:var(--lime);text-decoration:none;}
.nav a.navlink.current{border-bottom:1px solid #fff;}
/* live's nav CTA is weight 300 — lighter than the 500 used elsewhere */
.nav .btn{padding:14px 30px;font-weight:300;font-size:20px;white-space:nowrap;flex:none;}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.7rem;cursor:pointer;}

/* ---------- hero — full-bleed image, heading block centre-left ---------- */
/* Hero height — Dean 2026-07-16 ("reduce the image to the current site, all screens").
   THE BUG: v4 used min-height:78vh, tying the hero to VIEWPORT HEIGHT. Live never
   does — its hero is content-driven (`min-height:1vh` + a fixed padding-top, sized
   by its content), so it ignores screen height entirely. On a 1440-tall monitor
   78vh gave 1123px against live's 720. NEVER put vh back here.
   Measured live heights (independent of viewport height — 1920x1080 and 1920x700
   both gave 720): inner 514@768 · 663@1280 · 720@1920 · 721@2560 (plateaus, because
   --sqs-site-max-width caps the content at 1400). Home runs 160px taller throughout
   (its padding-top is 271 vs 110): 675@768 · 824@1280 · 880@1920 · 881@2560.
   These are min-heights, so tall content still grows the section — same as live.
   Live's curve is non-monotonic at the mobile end (717@390 vs 675@768, pure heading
   reflow); that wiggle is not worth reproducing, so mobile gets its own rule below. */
.hero{position:relative;color:#fff;min-height:clamp(560px,calc(549px + 8.91vw),720px);display:flex;align-items:center;background-size:cover;background-position:center;}
/* the home hero is the tall one */
.hero.home{min-height:clamp(700px,calc(710px + 8.91vw),881px);}
/* Scrim: a FLAT 80% teal wash, matching live exactly. Live does this with
   `.section-background-overlay` = background rgb(2,64,61) at opacity .8.
   Two earlier attempts were both too transparent and let the photo dominate:
   v3's flat .38, and v4's left-to-right gradient (.72 -> .18) — that gradient
   misread Dean's "light fading" as a fade ACROSS the image, when he meant
   fading the image BACK so the text stands out. Keep it flat; keep it .8. */
.hero::after{content:"";position:absolute;inset:0;background:rgba(2,64,61,.8);}
.hero .hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:120px 32px 110px;}
/* Hero H1s are a deliberate EXCEPTION to the +10% rule — Dean 2026-07-16:
   "left [live] is slightly smaller which is correct… the main white headings".
   Sized to live exactly: 59px @1280 -> capped 63.04px (live's measured values).
   Only the hero h1s — every other heading keeps the +10%. */
.hero h1{font-size:clamp(2.6rem,4.61vw,63.04px);color:#fff;margin-left:2%;
  /* Holds index's H1 to 4 rows. At 69.3px that needed >=1040px; scaled to 63.04
     it needs ~946, and 990 leaves headroom (the self-hosted Trade Gothic sets
     slightly wider than live's Adobe cut). Verify the line count if edited. */
  max-width:990px;}
/* live's hero highlight: teal text at weight 700 (not #111 / 600) */
.hero h1 .hl-sage{color:var(--teal);}
/* EVERY <strong> in a hero h1 is 700, not the global strong's 600. Scoping this to
   `.hl-sage strong` (as v4 did) left about's heading half-bold: the highlighted words
   at 700 and the rest at 600. Live's hero h1s are bold THROUGHOUT on about,
   how-we-help, our-approach, meet-dean and contact — home is the only one that
   isn't (there, only the highlighted phrase is <strong>). */
.hero h1 strong{font-weight:700;}
/* width-driven like .hero — not vh (see the note above) */
.hero.small{min-height:clamp(460px,calc(430px + 6.7vw),590px);}
/* compact band — live's important-information band is 392px with the h1 at y=194 */
.hero.flat{min-height:auto;background:var(--teal);padding-top:110px;}
.hero.flat h1{margin-left:0;}
.hero.flat::after{display:none;}
/* WE pattern strip along the hero's bottom edge */
.hero .pattern-strip{position:absolute;left:0;right:0;bottom:0;z-index:3;}

.pattern-strip{height:44px;background-image:url('../brand-assets/images/border-pattern.png');background-repeat:repeat-x;background-size:auto 44px;background-position:center;}

/* ---------- marquee — lime bg, Trade Gothic teal, wavy separators ---------- */
.marquee{background:var(--lime);color:var(--teal);overflow:hidden;white-space:nowrap;padding:34px 0;}
.marquee .track{display:inline-block;animation:marquee 28s linear infinite;}
.marquee .item{font-family:var(--font-head);font-weight:400;font-size:36.1px;vertical-align:middle;}
.marquee svg{vertical-align:middle;margin:0 26px;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- section colour variants ---------- */
.bg-teal{background:var(--teal);color:#fff;}
.bg-teal h1,.bg-teal h2,.bg-teal h3,.bg-teal h4{color:#fff;}
.bg-teal a:not(.btn){color:var(--lime);}
.bg-sage{background:var(--sage);color:var(--teal);}
.bg-lime{background:var(--lime);color:var(--teal);}
.bg-lime h1,.bg-lime h2,.bg-lime h3{color:var(--teal);}
.bg-white{background:#fff;}

/* ---------- generic 2-col heading|text row (e.g. "Doing well", "Sound familiar?") ---------- */
.split-head{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start;}
.split-head .btn{margin-top:18px;}
.split-head ul{margin:0;padding-left:1.2em;}
.split-head li{font-size:1.42rem;line-height:1.65;margin-bottom:.9em;}
/* 1.42rem = 25px = live's 22.72px intro copy x1.1. This block was the one
   real type miss in v3: it rendered at 16px because 1rem is root-relative. */
.split-head p{font-size:1.42rem;line-height:1.75;}
.split-head p.big,.split-head .big p{font-size:1.42rem;}

/* ---------- pillars (home) ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.pillar{text-align:center;max-width:352px;margin:0 auto;}
.pillar img{width:95px;height:95px;object-fit:contain;margin:0 auto 18px;}
/* 1.63rem = 28.7px = live's 26.08px x1.1 */
.pillar h3{font-size:1.63rem;line-height:1.2;margin-bottom:.5em;}
.pillar p{font-size:1rem;line-height:1.6;}

/* ---------- image masks (copied from the live site's SVG clipPaths) ---------- */
.mask-pinch{clip-path:url(#weMaskPinch);}
.mask-arch{clip-path:url(#weMaskArch);}

/* ---------- editorial rows (image + text) ----------
   Live is NOT a 50/50 split: text 518 | gap 70 | image 694, and the images
   are 694x400 LANDSCAPE. v3 forced aspect-ratio:1/1, which cropped them
   square and pinched the mask — that was the "images are squashed" defect. */
.row-feature{display:grid;grid-template-columns:.746fr 1fr;gap:77px;align-items:center;margin-bottom:96px;}
.row-feature:last-child{margin-bottom:0;}
.row-feature img{width:100%;aspect-ratio:694/400;object-fit:cover;}
.row-feature .txt h3{margin-bottom:.6em;}
.row-feature .txt p{font-size:1rem;line-height:1.75;}
/* .rev puts the image first in the DOM, so mirror the column ratio too */
.row-feature.rev{grid-template-columns:1fr .746fr;}
.row-feature.rev .txt{order:-1;}
.row-feature .btn{margin-top:10px;}

.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
/* NEVER set grid-template-columns as an inline style on .split — inline outranks
   the 900px media query, the section stops stacking on phones and overflows.
   Use a modifier class like this one instead. */
.split.cols-32{grid-template-columns:3fr 2fr;}
.split .txt p{font-size:1rem;line-height:1.75;}
/* Dean's photo: live is 694x729 (portrait-ish), not a 576 square.
   1.09fr matches live's 694:636 image-to-text ratio. */
.split.dean{grid-template-columns:1.09fr 1fr;gap:77px;}
.split.dean .photo{position:relative;}
.split.dean .photo img.portrait{width:100%;aspect-ratio:694/729;object-fit:cover;}
/* the lime asterisk that overlaps the photo's right edge on live */
.split.dean .star{position:absolute;top:16%;right:-59px;width:118px;height:auto;z-index:2;aspect-ratio:auto;}

/* ---------- testimonial slideshow (single quote, arrows) ---------- */
.quote-slider{position:relative;padding:40px 80px;max-width:1480px;margin:0 auto;}
.quote-slide{display:none;text-align:center;}
.quote-slide.active{display:block;}
/* Dean: "make this client review much larger" — was 16px */
.quote-slide p.q{font-size:1.42rem;line-height:1.55;color:var(--teal);margin-bottom:1.2em;}
.quote-slide .who{font-weight:600;color:var(--sage);font-size:1rem;}
.quote-arrow{position:absolute;top:45%;background:none;border:0;cursor:pointer;color:var(--teal);font-size:2.2rem;line-height:1;padding:8px;opacity:.7;}
.quote-arrow:hover{opacity:1;}
.quote-arrow.prev{left:0;}
.quote-arrow.next{right:0;}

/* ---------- big pull quote (lime) ----------
   LEFT-aligned, with the data bands bleeding off the right edge — matching live.
   v4 had this centred in a 900px box with an invented magenta pill+circle `.deco`;
   live has neither. Live @1920: quote text x=370, 1047 wide, 16px/27.2 teal ·
   "Book a call" a SAGE pill 400x71 at x=370 · Data+bands3.png 418x523 at
   x=1487 -> right edge 1905. Values below are live x1.1. */
.pullquote{position:relative;overflow:hidden;}
.pq-row{display:flex;align-items:center;gap:64px;
  padding-left:max(32px,calc((100% - var(--maxw)) / 2 + 32px));padding-right:0;}
/* padding-left carries the hanging open quote mark (live indents the text 117px
   from the band's left edge; x1.1 = 129) */
/* 1281 = 1152 text measure + 129 padding, so the CONTENT box lands on live's 1047x1.1 */
/* padding-right mirrors the left gutter so the closing quote mark has somewhere
   to live that the text can never occupy — see .qmark.close below. */
.pullquote .inner{position:relative;flex:1;min-width:0;max-width:1281px;margin:0;padding:0 110px 0 129px;}
.pullquote h3{color:var(--teal);}
.pullquote .who{font-size:1rem;margin:1.6em 0 1.8em;}
.pullquote .qmark{position:absolute;font-family:var(--font-head);font-weight:700;font-size:9rem;line-height:1;color:rgba(255,255,255,.75);user-select:none;}
.pullquote .qmark.open{left:0;top:-18px;}
/* The closing mark used to sit at right:-10px, which put it ON TOP of whichever
   line of the quote ran furthest right (Dean, 2026-09-15: "move the commas over
   so it's not on the text"). It now sits in a right gutter that mirrors the
   129px left one, so the text measure can never reach it at any width.
   NOTE: live has NO decorative quote marks in this section at all — these are
   ours, so there is no live measurement to match here. */
.pullquote .qmark.close{right:0;top:-18px;}
/* max-width:30% matters between the 900px breakpoint and ~1400: a fixed 460px
   image eats the row and crushes the quote to ~200px. aspect-ratio + cover keep
   the crop honest as it shrinks.
   margin-left:auto pins the bands to the right edge. Without it, `.inner`'s
   max-width leaves slack above ~2200px and the bands stop short of the bleed.
   object-position is LOAD-BEARING: this is a 1330x789 LANDSCAPE source being
   cover-cropped into a 418x523 PORTRAIT box, so ~53% of its width is discarded.
   Squarespace has a focal point set on the image (13.4096% 52.0033%), which keeps
   the bars' rounded left ends in frame. The CSS default of `50% 50%` crops from the
   centre and slices the ends off both sides — Dean: "the bars are cut off on ours". */
.pullquote .pq-bands{width:460px;max-width:30%;flex:none;margin-left:auto;aspect-ratio:418/523;object-fit:cover;object-position:13.4096% 52.0033%;}

/* ---------- how-we-help: teal statement section w/ bg image ---------- */
/* ---------- how-we-help: teal statement section w/ bg image ----------
   LEFT-aligned with the WE mark hanging to the left of the heading — the mark
   IS the word "We" ("[WE] keep you focused"). v4 had this centred with the mark
   stacked above and a circle round the heading; none of that is on live.
   Live @1920: mark 153x73 at x=318 · H1 "keep you focused" 63.04px SAGE bold at
   x=488, 1047 wide · H3s 39.52px at x=488 · mark sits 21px above the H1's top.
   All values below are live x1.1. */
.statement{position:relative;background:var(--teal);color:#fff;overflow:hidden;}
.statement .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16;}
/* --stmt-h is the heading size, declared once so the mark's offset below can be
   expressed as a fraction of it. */
.statement{--stmt-h:clamp(2.6rem,5.06vw,3.94rem);}
.statement .inner{position:relative;z-index:2;display:flex;align-items:flex-start;gap:19px;
  text-align:left;max-width:var(--maxw);margin:0 auto;padding:0 32px;}
/* the WIDE mark (176x84), not icons/we-mark.png — that one is a square canvas
   with the mark letterboxed inside, so its box would be ~2x too tall here */
.statement .we-mark{width:168px;height:auto;flex:none;}
/* Mark alignment — CENTRED ON THE TEXT'S INK (Dean, 2026-09-15, second pass:
   "line up the WE with the text so it's in the middle").
   Two earlier attempts failed because they aligned the mark to the LINE BOX.
   A line box is not the text: it carries half-leading above and descender space
   below, so a mark centred on the box reads high. Measured at fs 69.344px:
     line-height 1.155      -> box 80.09px, half-leading 5.4px
     font ascent 67px       -> baseline sits 72.4px below the box top
     ink ascent 50 / descent 13  (the real top of "k" to the foot of "p","y")
     => the INK centre is 0.7769 x fs below the box top, not 0.5 x box.
   The mark is a FIXED 80.18px tall (168px wide on a 176x84 source) and does NOT
   scale with the fluid heading, so the offset cannot be a plain ratio — it is
   (ink centre) minus (half the mark), which is why the px term is subtracted.
   Goes NEGATIVE below ~1030px viewport, which is correct and intended.
   If the mark's width or the line-height ever changes, RE-MEASURE — do not
   scale these constants by hand. */
.statement .we-mark{margin-top:calc(var(--stmt-h) * 0.7769 - 40.09px);}
.statement .txtcol{flex:1;min-width:0;max-width:1152px;margin-top:0;}
.statement .big-line{font-family:var(--font-head);font-weight:400;
  font-size:var(--stmt-h);line-height:1.155;margin:0;}
.statement .big-line .word{color:var(--sage);font-weight:700;}
.statement h3{color:#fff;margin-top:1em;}

/* ---------- wealth tiers (how-we-help) ---------- */
.tier{display:grid;grid-template-columns:1fr 1fr;gap:72px;padding:70px 0;align-items:start;}
.tier + .tier{border-top:1px solid rgba(2,64,61,.18);}
.tier h3 .eyebrow{background:#fff;color:var(--midteal);border-radius:.45em;padding:.02em .26em;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.tier .txt p{font-size:1rem;line-height:1.75;}
/* live's tier images are 636x359 landscape — the 1/1 here was the same
   square-crop defect as .row-feature (Dean: "images are squashed") */
.tier .txt img{margin-top:34px;width:100%;aspect-ratio:636/359;object-fit:cover;}
.tier h4{color:var(--muted);}
.tier .label{font-weight:600;font-size:1rem;margin:1.4em 0 .6em;}
.tier ul{list-style:none;margin:0;padding:0;}
.tier li{font-size:.95rem;line-height:1.6;margin-bottom:.75em;padding-left:1.7em;position:relative;}
.tier li::before{content:"\2192";position:absolute;left:0;color:var(--midteal);font-weight:600;}

/* ---------- our-approach: journey map + steps ----------
   The map is a Lottie animation (vector, plays once, builds left->right), not a
   still. Source of truth = `Marketing & Brand/05 Website files/Our Approach/
   WealthElements-Animation.json`, copied to brand-assets/animations/journey-map.json.
   Live renders it 1282x486 (aspect 2.638) via a dotlottie-player pulled from unpkg
   with the .lottie hosted on lottie.host; ours is self-hosted end to end (no CDN,
   no third-party runtime) using the vendored lottie_light build. 1410 = 1282 x1.1.
   aspect-ratio reserves the box so nothing reflows while the JSON loads. */
.journey-map{position:relative;max-width:1410px;margin:0 auto;aspect-ratio:881/334;}
.journey-map svg{display:block;width:100%;height:100%;}
/* the still shows until Lottie mounts, and STAYS if JS or the fetch fails */
.journey-fallback{width:100%;height:auto;display:block;}
.journey img{width:100%;max-width:1410px;margin:0 auto;}
.step{display:grid;grid-template-columns:5fr 7fr;gap:64px;padding:56px 0;align-items:start;}
.step + .step{border-top:1px solid var(--lime);}
/* The numbered badge is CENTRED ON the lime icon, not parked against its edge.
   It used to be an in-flow flex item pulled back with `margin-left:-38px`, which
   landed it on the icon's right-hand edge — Dean, 2026-09-15: the vectors should
   sit "behind and in the middle of the green circle with the number on it".
   Taking it out of flow and centring it on the icon is exact and cannot drift:
   the icon is the first flex item so its box starts at x=0, and `align-items:
   center` means the icon's vertical centre IS the titleblock's, hence top:50%.
   ⚠ If the icon's 64px width changes, change the 32px here to half of it. */
.step .titleblock{display:flex;align-items:center;gap:14px;position:relative;}
.step .titleblock img.icon{width:64px;height:64px;object-fit:contain;position:relative;z-index:1;}
.step .titleblock .num{position:absolute;left:32px;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:34px;height:34px;border-radius:50%;background:var(--sage);color:var(--teal);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:600;font-size:.72rem;flex:none;}
/* DARK GREEN mark here, not the lime one (Dean 2026-07-16). Uses the WIDE variant —
   `icons/we-mark.png` is a square canvas with the mark letterboxed, so at height:32
   the visible bars were only ~15px tall. 38px = live's 35 x1.1. */
.step .titleblock img.wemark{height:38px;width:auto;}
/* Live's step headings are a plain <h2><strong> — full h2 size at weight 700, NOT
   the shrunken clamp(1.6rem,2.4vw,2.1rem) v4 used (which capped at ~37px against
   live's 47.92). Dean 2026-07-16: "just a size and boldness update". */
.step .titleblock h2{margin:0;font-size:clamp(2.05rem,3.85vw,3.0rem);font-weight:700;}
.step .meta{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:1rem;margin:1.2em 0 .5em;}
.step .fee{font-size:1rem;}
.step .fee strong{text-transform:uppercase;}
.step .desc p{font-size:1rem;line-height:1.7;}
.step .desc .label{font-weight:600;font-size:.95rem;text-transform:uppercase;margin:1.2em 0 .5em;}
.step ul{list-style:none;margin:0;padding:0;}
.step li{font-size:.95rem;line-height:1.6;margin-bottom:.6em;padding-left:1.6em;position:relative;}
.step li::before{content:"\2713";position:absolute;left:0;color:var(--midteal);}
.step ol{margin:0;padding-left:1.3em;}
.step ol li{padding-left:.3em;}
.step ol li::before{display:none;}

/* ---------- about: expect tiles ---------- */
/* Live @1920: tiles 400 wide, tile H2 26.08px, body 16px/27.2, icons 68px wide at
   natural height. v4 had 19/16px text and 44px squared icons — Dean 2026-07-16:
   "left hand side is the right size". Values below are live x1.1. */
.expect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 64px;margin-top:56px;}
.expect img{width:75px;height:auto;margin-bottom:14px;}
.expect h3{font-size:1.63rem;margin-bottom:.5em;}
.expect p{font-size:1rem;line-height:1.7;}

/* meet-dean: qualifications card */
.qual-card{background:#fff;padding:36px 40px;}
.qual-card h4{font-size:1rem;margin-bottom:.8em;}
.qual-card ul{list-style:none;margin:0;padding:0;}
/* live's qual items are 16px (x1.1 = 1rem) — .8rem read undersized */
.qual-card li{font-size:1rem;line-height:1.5;margin-bottom:.8em;border-bottom:1px solid rgba(2,64,61,.1);padding-bottom:.8em;}
.qual-card li:last-child{border-bottom:0;}
/* live's in-card badge is 165px — x1.1 (Dean: "adviser ratings logo larger") */
.badge-ar{width:181px;margin-top:28px;}

/* Q&A (Dean Unplugged) */
.qa .q{font-weight:600;font-size:1rem;margin-bottom:.2em;}
.qa .a{font-size:1rem;line-height:1.7;margin-bottom:1.6em;}

/* ---------- contact form section (recurring, teal — 2 columns) ---------- */
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start;}
.contact-grid h2{color:var(--sage);}
.contact-grid .sub{color:#fff;font-family:var(--font-head);font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.3;}
.wform label{display:block;font-size:.78rem;font-weight:500;color:#fff;margin:0 0 8px;}
.wform label .req{font-weight:300;color:rgba(255,255,255,.75);font-size:.7rem;}
.wform .group-label{font-size:.8rem;color:#fff;margin-bottom:10px;}
.wform .form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.wform .field{margin-bottom:22px;}
.wform input{width:100%;padding:13px 24px;border-radius:300px;border:1px solid rgba(255,255,255,.8);background:transparent;color:#fff;font-family:var(--font-body);font-size:.8rem;}
.wform textarea{width:100%;padding:16px 24px;border-radius:26px;border:1px solid rgba(255,255,255,.8);background:transparent;color:#fff;font-family:var(--font-body);font-size:.8rem;}
.wform input:focus,.wform textarea:focus{outline:none;border-color:var(--lime);}
.wform .btn{margin-top:6px;}

/* ---------- footer (teal) — rebuilt 2026-07-16 to Dean's intended-look
   screenshot: logo + tagline left, two link columns each with an outlined
   lime pill, large Adviser Ratings badge right. ---------- */
.site-footer{background:var(--teal);color:#fff;padding:70px 0 40px;}
/* :not(.btn) matters — the bare `.site-footer a` rule outranked .btn-primary
   on specificity and was painting the footer CTA white on lime. That was the
   bad-contrast defect; don't drop the guard. */
.site-footer a:not(.btn){color:#fff;}
.site-footer a:not(.btn):hover{color:var(--lime);text-decoration:none;}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:48px;align-items:start;}
/* Width-driven with height:auto — NOT height:56px. The global `img{max-width:100%}`
   clamps the width to this grid column (~440px) while a fixed height holds at 56,
   which squashed the mark to aspect 7.86 against its natural 10.20. Driving from
   width lets max-width shrink both dimensions together, so the aspect survives at
   every viewport. 440px = live's 400px footer logo x1.1 -> renders ~440x43. */
.footer-brand img.logo{width:440px;height:auto;max-width:100%;margin-bottom:24px;}
.footer-tag{max-width:34ch;font-weight:600;font-size:1rem;line-height:1.5;margin:0;}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.footer-col a.flink{font-family:var(--font-body);font-weight:300;font-size:1rem;text-transform:uppercase;letter-spacing:.02em;text-decoration:underline;text-underline-offset:5px;}
.footer-col .btn{margin-top:12px;padding:13px 32px;}
.footer-badge{justify-self:end;}
.footer-badge img{width:246px;height:auto;border-radius:12px;}
.footer-rule{border:0;border-top:1px solid rgba(255,255,255,.18);margin:40px 0 28px;}
.footer-legal{font-size:.82rem;color:rgba(255,255,255,.7);line-height:1.7;}
.footer-legal a{color:rgba(255,255,255,.85);text-decoration:underline;}
.footer-meta{font-size:.82rem;color:rgba(255,255,255,.7);margin-top:16px;line-height:1.7;}

/* ---------- data-bands row — bleeds to the RIGHT viewport edge ----------
   On live the bands run hard to the edge (right:1905 of a 1920 viewport) and
   are 594x441. v3 boxed them inside the 1280 wrap, which is why they looked
   small and floated in the middle. Left padding tracks the content band so
   the text still lines up with every other section; right padding is 0.
   Uses 100% (not 100vw) so the scrollbar can't cause a horizontal overflow. */
.bands-row{display:flex;align-items:center;gap:64px;
  padding-left:max(32px,calc((100% - var(--maxw)) / 2 + 32px));padding-right:0;}
.bands-row .txt{flex:1;min-width:0;}
.bands-row img{width:653px;max-width:46%;flex:none;margin-left:auto;}
/* our-approach's set (data-bands4). Live: 536x318 at right:1905 — object-fit:contain,
   so the WHOLE image shows uncropped (its natural 1.686 ≈ the box's 1.684). 590 = 536x1.1;
   natural aspect gives the height, so no aspect-ratio/cover needed here. */
.bands-row img.bands-4{width:590px;max-width:38%;}
/* about's set — SAME FILE, different treatment again: live crops it to 594x564
   (aspect 1.053, cover) with focal 9.61% 43.2%. 653 = 594x1.1. */
.bands-row img.bands-4-about{width:653px;max-width:40%;aspect-ratio:594/564;object-fit:cover;object-position:9.61% 43.2%;}

/* ---------- important-information — two-column legal layout ----------
   Live @1920: FSG + Privacy in a 518 col left (x=253), Complaints + Terms in an
   812 col right (x=840). Body text 16px — the bare-<p> 24.2px inheritance was
   what made v4's version look oversized. Values x1.1. */
.legal-grid{display:grid;grid-template-columns:570px 1fr;gap:76px;align-items:start;}
.legal p{font-size:1rem;line-height:1.7;}

.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.media-grid img{width:100%;height:260px;object-fit:cover;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  html{font-size:16px;}
  body{font-size:19px;}
  .grid-3,.grid-2,.split,.split.dean,.split.cols-32,.split-head,.row-feature,.row-feature.rev,.tier,.step,.contact-grid,.expect-grid,.media-grid,.footer-top,.legal-grid{grid-template-columns:1fr;}
  .media-grid{grid-template-columns:1fr 1fr;}
  .row-feature{gap:36px;}
  .row-feature.rev .txt{order:0;}
  .split.dean{gap:36px;}
  .split.dean .star{right:-20px;width:80px;}
  /* ---------- mobile navigation (rebuilt 2026-09-15) ----------
     What was wrong before: the logo kept its 44px desktop height, which at a
     10.2 aspect is 449px wide — WIDER THAN A 390px PHONE, so the wordmark was
     silently clipped. The open menu had no background, so the links sat on top
     of the hero image and the page text, unreadable. And the CTA stayed in the
     closed bar, crowding the burger.
     ⚠ There is no live site to measure against any more (Squarespace was
     retired 2026-09-15), so this is a judgement call, not a copy. */

  /* 26px x 10.202 = 265px, which leaves room for the burger inside the 342px
     of usable width at 390. Do not raise it without re-checking that sum. */
  .nav .logo img{height:26px;}
  .nav{gap:16px;padding:16px 20px;}

  /* Closed: logo + burger only. The CTA reappears inside the open menu. */
  .nav .navlink,.nav .btn{display:none;}
  .nav-toggle{display:block;padding:4px 8px;font-size:1.9rem;line-height:1;}

  /* Open: a solid teal panel, so nothing shows through from the page beneath.
     The background sits on .nav rather than on .site-header via :has(), which
     would have been neater but is not supported everywhere yet — and a menu
     that is transparent on an older phone is exactly the defect being fixed. */
  .nav.open{flex-wrap:wrap;background:var(--teal);box-shadow:0 2px 18px rgba(0,0,0,.15);}
  /* order is LOAD-BEARING. The burger is last in the DOM, so once the menu
     wraps it lands at the BOTTOM of the panel, under the CTA — you open the
     menu and the control you just pressed jumps to the far end. Pushing the
     links and CTA to a later order keeps logo + burger together on the first
     line, where the finger already is. */
  .nav.open .navlink{display:block;width:100%;font-size:22px;padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.16);order:1;}
  .nav.open .navlink:last-of-type{border-bottom:0;}
  .nav.open .btn{display:block;width:100%;text-align:center;margin:14px 0 6px;order:2;}
  /* The menu can exceed the screen once open — let it scroll rather than
     trapping links off the bottom. */
  .nav.open{max-height:calc(100vh - 32px);overflow-y:auto;}
  .section{padding:64px 0;}
  /* vw, not vh — matches live at 768 (inner 514, home 676). Still a MINIMUM, so a
     heading that reflows to more lines grows the hero, exactly as live's does. */
  .hero{min-height:clamp(430px,67vw,560px);}
  .hero.home{min-height:clamp(560px,88vw,700px);}
  .hero.small{min-height:clamp(400px,58vw,500px);}
  .hero h1{margin-left:0;max-width:none;}
  .marquee .item{font-size:24px;}
  /* stack the bands under the quote and restore symmetric padding */
  .pq-row{flex-direction:column;align-items:flex-start;gap:32px;padding-left:32px;padding-right:32px;}
  .pullquote .inner{padding:0 0 0 56px;max-width:none;}
  .pullquote .qmark{font-size:5rem;}
  .pullquote .qmark.close{display:none;}
  /* On mobile the bands show WHOLE, at their own landscape aspect. The desktop
     rule crops a 1330x789 landscape source into a PORTRAIT box with object-fit
     cover, which is right when it bleeds off the edge beside the quote — but
     stacked on a phone that same crop slices the ends off the bars and reads as
     a broken graphic (Dean, 2026-09-15). Overriding aspect-ratio alone is not
     enough; object-fit and object-position have to go too, or the crop persists. */
  /* FLUSH TO THE RIGHT EDGE, as on desktop (Dean, 2026-09-15: "that gap it's
     meant to be flush"). Once .pq-row stacks it gains 32px of side padding, which
     inset the graphic from the screen edge. width:calc(100% + 32px) with a matching
     negative right margin cancels exactly that padding — do not hard-code 390 or a
     percentage here, it must track the row's own padding. height:auto keeps the
     natural aspect, so nothing is cropped. */
  .pullquote .pq-bands{width:calc(100% + 32px);max-width:none;margin-right:-32px;
    aspect-ratio:auto;height:auto;object-fit:contain;object-position:right center;}
  .quote-slider{padding:20px 40px;}
  /* stack the bands under the copy and restore symmetric padding */
  .bands-row{flex-direction:column;align-items:flex-start;gap:36px;padding-left:32px;padding-right:32px;}
  .bands-row img{width:calc(100% + 32px);max-width:none;margin-right:-32px;margin-left:0;}
  /* The desktop percentage caps are shares of a SIDE-BY-SIDE row. Once the row
     stacks they become shares of the full width, so bands-4 rendered 124px wide
     on a 390px phone — a stamp-sized graphic marooned at the right. These two
     need the percentage cap lifted, and bands-4-about needs its crop dropped
     for the same reason as the pull-quote bands above. */
  .bands-row img.bands-4{width:calc(100% + 32px);max-width:none;}
  .bands-row img.bands-4-about{width:calc(100% + 32px);max-width:none;aspect-ratio:auto;
    height:auto;object-fit:contain;object-position:right center;}
  /* The three tier eyebrows (WEALTH MILESTONES: / OPTIMISED: / IN ACTION:) are
     ALL CAPS, so they use none of the descender space the inline box reserves,
     and the padding carried over from Squarespace is 0.544px — effectively none.
     Measured, the white sits 6.5px above the capitals and 6.5px below the
     baseline, i.e. geometrically even; but with a 12px corner radius eating the
     top corners and no real padding, it READS as tight on top (Dean, 2026-09-15:
     "no space above and space below with the text"). Real vertical padding and a
     gentler radius fix the impression the geometry alone did not.
     ⚠ Scoped to phone width on purpose — the desktop treatment is signed off. */
  .tier h3 .eyebrow{padding:.2em .42em;border-radius:.3em;}
  /* statement: stack the mark above the copy (still left-aligned). Side-by-side,
     the 168px mark eats 43% of a 390px viewport and leaves ~139px for a 41.6px
     heading — no overflow, but it wraps to shreds. */
  .statement .inner{flex-direction:column;gap:20px;}
  /* margin-top:0 is LOAD-BEARING: the desktop rule offsets the mark to sit on the
     heading's ink centre, and that calc assumes the mark is 80.18px tall and beside
     the text. Here it is 110px wide, above the text, and the offset is meaningless. */
  .statement .we-mark{width:110px;margin-top:0;}
  .statement .txtcol{margin-top:0;max-width:none;}
  .footer-top{gap:36px;}
  .footer-badge{justify-self:start;}
  .footer-badge img{width:200px;}
}


/* ---------- enquiry form: honeypot, status line, APP 5 collection notice
   (added 2026-09-15 with the go-live wiring to /api/enquiry) ---------- */
/* The honeypot must be invisible to people but reachable by a naive bot, so
   it is positioned off-canvas rather than display:none. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-status{font-size:.78rem;color:#fff;margin:14px 0 0;min-height:1.1em;}
.form-status.is-error{color:var(--lime);}
.form-notice{font-size:.72rem;color:var(--sage);margin-top:14px;line-height:1.65;}
.form-notice a{color:var(--sage);text-decoration:underline;}
.wform button[disabled]{opacity:.6;cursor:default;}

/* ---------- meet-dean photo strip (added 2026-09-15) ----------
   Three-up row below Dean Unplugged, measured off live @1440: it runs the FULL
   viewport width (not the 1480 content band) with ~29px side gutters, three
   441px columns at aspect 1.332 (= 4:3, the sources' own ratio, so nothing is
   cropped) and 20px between them. Gutter and gap carry the +10% uplift: 32 / 22.
   Do NOT box this inside .wrap — live deliberately runs it wider than the band. */
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  padding:0 32px 96px;}
.photo-strip img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;}
@media (max-width:900px){
  .photo-strip{grid-template-columns:1fr;padding-bottom:60px;}
}

/* ---------- education library (added 2026-09-15) ----------
   Cards, dates and a search box. Deliberately built from the site's existing
   vocabulary — the white-on-grey card of .qual-card, the .expect-grid column
   rhythm — rather than a new visual language. */
.edu-search{margin:48px 0 40px;max-width:620px;}
.edu-search label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px;}
/* Pill input, matching .wform's shape but on a light ground. */
.edu-search input{width:100%;padding:15px 26px;border-radius:300px;
  border:1px solid rgba(2,64,61,.28);background:#fff;color:var(--teal);
  font-family:var(--font-body);font-size:1rem;}
.edu-search input:focus{outline:none;border-color:var(--midteal);}
.edu-count{font-size:.82rem;color:var(--muted);margin:12px 0 0;min-height:1.2em;}

.edu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:8px;}
.edu-card{background:#fff;padding:34px 34px 30px;display:flex;flex-direction:column;
  border:1px solid rgba(2,64,61,.10);transition:border-color .15s ease;}
.edu-card:hover{border-color:var(--midteal);}
.edu-meta{font-size:.8rem;color:var(--muted);margin:0 0 .9em;letter-spacing:.01em;}
.edu-cat{color:var(--midteal);font-weight:600;}
.edu-card h3{font-size:1.5rem;line-height:1.28;margin:0 0 .55em;}
.edu-card h3 a{color:var(--teal);}
.edu-card h3 a:hover{color:var(--midteal);text-decoration:none;}
/* The whole card is the target, so the pointer and the link agree. */
.edu-card h3 a::after{content:"";position:absolute;inset:0;}
.edu-card{position:relative;}
.edu-sum{font-size:1rem;line-height:1.7;margin:0 0 1.2em;flex:1;}
.edu-more{font-size:.92rem;font-weight:600;color:var(--midteal);margin:0;}
.edu-more::after{content:" \2192";}

.edu-empty{font-size:1rem;color:var(--muted);margin-top:36px;}
.edu-empty a{text-decoration:underline;}

@media (max-width:1200px){
  .edu-grid{grid-template-columns:repeat(2,1fr);gap:32px;}
}
@media (max-width:900px){
  .edu-grid{grid-template-columns:1fr;gap:24px;}
  .edu-search{margin:36px 0 28px;}
  .edu-card{padding:28px 26px 24px;}
}

/* ---------- education: "coming soon" state (Dean, 2026-09-15) ----------
   The library is published but empty, so the page must say so plainly rather
   than leave a visitor clicking placeholder cards. Remove .is-soon from a card
   the moment real, signed-off content replaces it. */
.edu-flag{display:inline-block;background:var(--lime);color:var(--teal);
  font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:.45em 1.1em;border-radius:300px;margin:0 0 1.1em;}
.edu-card.is-soon{opacity:.72;}
.edu-card.is-soon:hover{border-color:rgba(2,64,61,.10);}
/* The whole-card link is disabled while there is nothing to open, so the
   pointer does not promise something the click cannot deliver. */
.edu-card.is-soon h3 a{pointer-events:none;color:var(--muted);}
.edu-card.is-soon h3 a::after{content:none;}
.edu-more-soon{color:var(--muted);font-style:italic;}
.edu-more-soon::after{content:none;}