/* ============================================================
   Watson AM, shared styles
   Light = cream surface (brand default for reading).
   Dark  = ink surface, cream text, so identity holds in both modes.
   ============================================================ */
/* brand wordmark face */
@font-face{
  font-family:"XB Niloofar";
  src:url("assets/watson-am.woff2") format("woff2");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

/* self-hosted text faces (subset to latin + latin-ext, woff2) */
/* Fraunces, variable font (optical sizing + weight), latin + latin-ext */
@font-face{font-family:"Fraunces";src:url("assets/fonts/fraunces-latin-full-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url("assets/fonts/fraunces-latin-ext-full-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";src:url("assets/fonts/fraunces-latin-full-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url("assets/fonts/fraunces-latin-ext-full-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";src:url("assets/fonts/ibm-plex-sans-v23-latin_latin-ext-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("assets/fonts/ibm-plex-sans-v23-latin_latin-ext-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("assets/fonts/ibm-plex-sans-v23-latin_latin-ext-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("assets/fonts/ibm-plex-mono-v20-latin_latin-ext-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("assets/fonts/ibm-plex-mono-v20-latin_latin-ext-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#1A1814;
  --cream:#F4EFE2;
  --forest:#1E3A2E;
  --mustard:#C4A04A;
  --slate:#5A584F;
  --rule:#B8AC8C;

  --bg:var(--cream);
  --surface:#FBF8F0;
  --text:var(--ink);
  --text-dim:var(--slate);
  --accent:var(--forest);
  --meta:#9A7C2F;            /* mustard, darkened for AA on cream */
  --hair:rgba(26,24,20,.14);
  --hair-strong:rgba(26,24,20,.22);

  --maxw:1180px;
  --gut:clamp(20px,5vw,64px);
  --r:4px;

  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"IBM Plex Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--f-display);font-weight:500;line-height:1.08;letter-spacing:-.01em;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--meta);margin:0 0 18px}
.muted{color:var(--text-dim)}
.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:var(--cream);padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ---- screen-reader-only helper ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- buttons: the exhibit system ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:13px 22px;border-radius:0;
  border:1px solid transparent;position:relative;
  transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .15s ease;
  white-space:nowrap;cursor:pointer}
.btn:active{transform:translateY(0) scale(.99)}
/* primary: the stamped document. a hard offset shadow behind the button
   (--stamp: mustard on cream, ink on mustard fills); hover and click press
   it down onto the page */
.btn-primary{background:var(--forest);color:#F4EFE2;border-color:var(--forest);
  --stamp:var(--mustard);box-shadow:4px 4px 0 0 var(--stamp)}
.btn-primary:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--stamp)}
.btn-primary:active{transform:translate(4px,4px);box-shadow:0 0 0 0 var(--stamp)}
/* ghost: exhibit brackets at two corners (--brk); the frame completes on
   hover. full-size pseudos revealed via clip-path, so nothing animates layout */
.btn-ghost{background:transparent;color:var(--text);border-color:transparent;--brk:var(--text)}
/* both pseudos carry a full border and are clipped to opposite corners:
   uniform border rendering keeps the two brackets pixel-identical.
   2px stroke: buttons often sit at fractional positions (flex centring),
   where a 1px hairline antialiases unevenly between the two corners */
.btn-ghost::before,
.btn-ghost::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:2px solid var(--brk);
  /* --snap-x/y: sub-pixel nudge set by site.js so the strokes land on the
     device-pixel grid regardless of the button's fractional layout position */
  transform:translate(var(--snap-x,0px),var(--snap-y,0px));
  transition:clip-path .3s ease,border-color .2s ease}
.btn-ghost::before{clip-path:inset(0 calc(100% - 13px) calc(100% - 13px) 0)}
.btn-ghost::after{clip-path:inset(calc(100% - 13px) 0 0 calc(100% - 13px))}
.btn-ghost:hover::before,
.btn-ghost:hover::after{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .btn,.btn-ghost::before,.btn-ghost::after{transition:none}
}

/* ---- header / nav ---- */
.site-head{position:sticky;top:0;z-index:100;background:#1E3A2E;color:#F4EFE2;
  border-bottom:2px solid #B8AC8C}
.site-head .brand{position:absolute;left:clamp(16px,2.4vw,32px);top:50%;transform:translateY(-50%);z-index:3}
.site-head .nav-right{position:absolute;right:clamp(16px,2.4vw,32px);top:50%;transform:translateY(-50%);z-index:3}
.site-head .brand b{color:#F4EFE2}
.site-head .brand .am{color:var(--mustard)}
.site-head .btn-primary{background:var(--mustard);color:#16140F;border-color:var(--mustard);--stamp:rgba(22,20,15,.85)}
.nav{display:flex;align-items:center;justify-content:flex-start;height:68px;gap:clamp(24px,3vw,40px)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto}
/* wordmark: XB Niloofar (add the font file to assets/ and an @font-face to fully match brand); falls back to the display serif */
.brand b{font-family:"XB Niloofar",var(--f-display);font-weight:400;font-size:22px;letter-spacing:-.015em;position:relative;top:2px}
.brand .am{font-family:inherit;font-size:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;text-transform:none}
.brand span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.brand .brand-mark{height:42px;width:auto;display:block;align-self:center;margin-right:8px}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;
  /* keep a minimum gap from the absolutely-positioned wordmark on narrower big screens;
     collapses to 0 (links align to content edge) once the container edge clears 240px */
  margin-left:max(0px, 290px - max(var(--gut), (100vw - var(--maxw))/2 + var(--gut)))}
.nav-links a{font-family:var(--f-display);font-weight:400;font-size:16px;letter-spacing:-.005em;text-decoration:none;color:#F4EFE2;transition:color .15s ease}
.nav-links a:hover{color:#fff}
.nav-links a[aria-current="page"]{color:var(--mustard)}
.nav-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav-cta-item{display:none} /* shown only inside the open mobile menu */
.nav-toggle{display:none;background:none;border:1px solid var(--mustard);color:var(--mustard);border-radius:0;
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle svg{width:20px;height:20px}
/* the scrim behind the open mobile menu: a slight blur + tint over the page,
   sitting just under the sticky header (z-100) so the bar and the menu panel
   stay sharp above it. Injected by site.js; a tap on it closes the menu. */
.nav-scrim{position:fixed;inset:0;z-index:99;background:rgba(22,20,15,.22);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .28s ease}
.nav-scrim.is-open{opacity:1}
@media (prefers-reduced-motion:reduce){.nav-scrim{transition:none}}

/* ---- generic section ---- */
section{padding-block:clamp(64px,9vw,120px)}
.sec-head{max-width:54ch;margin-bottom:clamp(36px,5vw,56px)}
.sec-head h2{font-size:clamp(28px,4.2vw,42px)}
.sec-head p{margin-top:18px;color:var(--text-dim);max-width:60ch;font-size:clamp(16px,1.6vw,18px)}

/* ---- home hero ---- */
.hero{padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(56px,7vw,96px)}
/* video hero: full-bleed clip behind a forest tint, text on the left */
.hero.has-video{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(540px,78vh,760px);padding-top:clamp(72px,9vw,120px);padding-bottom:clamp(72px,9vw,120px)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% top;z-index:0}
.hero.has-video .container{position:relative;z-index:2;width:100%}
.hero-content{max-width:640px}
@media (max-width:720px){
  .hero.has-video{min-height:clamp(440px,72vh,560px)}
  .hero-video{object-position:center center}
}
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none}
  .hero.has-video{background:#16261D url("assets/headergreen.webp") center/cover no-repeat}
}
/* the italic mustard accent is rationed to one moment per page: the hero h1.
   Section headings stay roman; this rule serves that single hero moment.
   Headings are large display, so the bright mustard carries contrast on every surface. */
h1 em,h2 em,h3 em,h4 em{color:var(--mustard)}
.hero h1{font-size:clamp(38px,6vw,68px);font-weight:500;letter-spacing:-.02em;max-width:13ch}
.hero h1 em{font-style:italic;font-weight:400}
.hero h1 .nb{white-space:nowrap}
/* phone hero heading. This block must sit AFTER the three base rules above:
   they share specificity, so source order decides, and an earlier media block
   silently loses (the bug that kept the 13ch cap and 38px size on phones). */
@media (max-width:720px){
  .hero h1{font-size:clamp(24px,7.4vw,38px);max-width:none}
  .hero h1 .nb{white-space:normal}
}
.hero .sub{margin-top:24px;font-size:clamp(16px,1.6vw,18px);color:var(--text-dim);max-width:46ch;line-height:1.55}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---- interior page hero ---- */
.page-hero{padding-top:clamp(52px,6vw,88px);padding-bottom:clamp(40px,5vw,60px);border-bottom:1px solid var(--hair)}
.page-hero h1{font-size:clamp(36px,6vw,62px);font-weight:500;letter-spacing:-.02em;max-width:16ch}
.page-hero h1 em{font-style:italic;font-weight:400}
.page-hero .lede{margin-top:22px;font-size:clamp(16px,1.7vw,19px);color:var(--text-dim);max-width:58ch;line-height:1.55}
.lenders-hero h1{font-size:clamp(30px,4.4vw,46px)}
.ph-cta{margin-top:26px}
.error-hero .cta-row{margin-top:34px}

/* ---- track record numbers ---- */
.numbers{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,56px);align-items:center}
.numbers .feature .fig{font-family:var(--f-display);font-weight:500;font-size:clamp(72px,12vw,140px);line-height:.9;letter-spacing:-.03em;color:var(--forest)}
.numbers .feature .cap{margin-top:18px;font-size:15px;color:var(--text-dim);max-width:34ch}

/* ---- case files: interactive grid ---- */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.case-card{font:inherit;text-align:left;background:var(--surface);color:var(--text);border:1px solid var(--hair-strong);
  border-radius:0;padding:22px 22px 20px;cursor:pointer;position:relative;overflow:hidden;
  transition:border-color .2s ease,transform .15s ease;display:flex;flex-direction:column;gap:0}
.case-card:hover{transform:translateY(-2px);border-color:var(--rule)}
.case-card .cframe{position:absolute;inset:7px;border:1px solid var(--rule);border-radius:0;pointer-events:none;transition:border-color .2s ease}
.case-card[aria-expanded="true"]{border-color:var(--forest)}
.case-card[aria-expanded="true"] .cframe{border-color:var(--meta)}
.cc-file{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);position:relative}
.cc-fig{font-family:var(--f-display);font-weight:500;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.01em;margin:14px 0 0;position:relative}
.cc-title{font-family:var(--f-display);font-size:17px;font-weight:500;margin-top:6px;position:relative;line-height:1.2}
.cc-meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--text-dim);margin-top:12px;position:relative}
.cc-cue{position:relative;margin-top:auto;padding-top:16px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:7px}
.cc-cue .pl{width:13px;height:13px;position:relative;flex:0 0 auto;margin-top:-4px}
.cc-cue .pl::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  border-right:2px solid var(--meta);border-bottom:2px solid var(--meta);
  transform:translate(-50%,-50%) rotate(45deg);transition:transform .25s ease}
.case-card[aria-expanded="true"] .cc-cue .pl::before{transform:translate(-50%,-10%) rotate(225deg)}

/* full-width detail panel injected between cards */
.case-detail{grid-column:1/-1;border:1px solid var(--forest);border-radius:0;
  background:var(--bg);padding:0;overflow:hidden;
  opacity:0;transform:translateY(-10px);
  transition:opacity .35s ease,transform .35s ease,border-color .2s ease}
.case-detail.open{opacity:1;transform:none}
.case-detail[hidden]{display:none}
.case-detail .inner{padding:clamp(26px,3.4vw,40px);opacity:0;transform:translateY(-8px);
  transition:opacity .35s ease .05s,transform .35s ease .05s}
.case-detail.open .inner{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.case-detail,.case-detail .inner{transition:none}}
.cd-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(26px,4vw,52px);align-items:start}
.cd-head .file{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.cd-head h3{font-size:clamp(24px,3vw,32px);margin:10px 0 0;max-width:20ch}
.cd-head .summary{margin-top:18px;color:var(--text-dim);line-height:1.6;max-width:56ch}
.cd-rows{margin:0;display:grid;grid-template-columns:auto 1fr;gap:11px 18px;align-content:start}
.cd-rows dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);align-self:center}
.cd-rows dd{margin:0;text-align:right;font-size:15px;font-weight:500}
.case-note{margin-top:26px;font-size:13px;color:var(--text-dim);max-width:64ch}
.case-sources{display:none}

/* ---- team ---- */
.team-intro-h{font-size:clamp(28px,4.2vw,42px);margin-bottom:34px}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,26px)}
.member{border:1px solid var(--hair-strong);border-radius:0;background:var(--surface);overflow:hidden}
.member .portrait{aspect-ratio:5/4;background:var(--forest);position:relative;overflow:hidden}
.member .portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.95)}
.member .portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,58,46,.12),rgba(26,24,20,.42));mix-blend-mode:multiply}
.member .body{padding:20px}
.member .role{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);margin:6px 0 0}
.member h3{font-size:21px;margin:0}
.member .bio{margin-top:12px;color:var(--text-dim);font-size:13.5px;line-height:1.55}
.member .contact{margin-top:16px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr}}
.team-hero h1,.team-hero .lede{max-width:none}
.member .contact a{color:var(--text-dim);text-decoration:none}
.member .contact a:hover{color:var(--text)}
.member-cell{display:flex;flex-direction:column}
.member-cell .member{flex:1 1 auto}
.member-link{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#D8B45E;text-decoration:none}
.member-link .arr{transition:transform .2s}
.member-link:hover .arr{transform:translateX(4px)}

/* ---- contact ---- */
/* contact hero: text left, form right; prefer-to-email block under the lede */
.contact-hero .ph-grid{align-items:start}
.hero-email{margin-top:clamp(26px,3.5vw,38px);padding-top:clamp(22px,3vw,30px);border-top:2px solid var(--rule)}
.hero-email h2{font-size:clamp(21px,2.4vw,27px)}
.hero-email p{margin-top:12px;color:var(--cream);max-width:none;line-height:1.55}
.hero-email .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.contact-offices{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,40px);margin-top:clamp(26px,3.5vw,38px);padding-top:clamp(22px,3vw,30px);border-top:2px solid var(--rule)}
.contact-offices h3{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);margin:0 0 12px;font-weight:500}
.contact-offices p{font-size:14px;line-height:1.8;color:var(--text-dim);margin:0}
.contact-offices a{color:var(--text-dim);text-decoration:none}
.contact-offices a:hover{color:var(--text)}
@media (max-width:900px){
  .contact-hero .ph-grid{display:flex;flex-direction:column;align-items:stretch}
  .contact-hero .ph-grid>div:first-child{display:contents}
  .contact-hero .ph-grid .ch-intro{order:1}
  .contact-hero .ph-grid>.reveal{order:3}
  .contact-hero .ph-grid .hero-email{order:4}
  .contact-hero .ph-grid .contact-offices{order:5}
}
.office h3{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);margin-bottom:12px;font-weight:500}
.office p{font-size:15px;line-height:1.7}
.office a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--hair-strong)}
.office a:hover{border-color:var(--text)}
.form{border:1px solid var(--rule);border-radius:0;background:var(--surface);padding:clamp(24px,3vw,36px)}
.form .field{display:grid;gap:7px;margin-bottom:18px}
.form label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#F4EFE2}
.form input,.form select,.form textarea{font:inherit;font-size:15px;color:var(--text);background:var(--bg);
  border:1px solid var(--rule);border-radius:0;padding:12px 14px;width:100%}
.form select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8AC8C' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:14px}
.form input::placeholder,.form textarea::placeholder{color:var(--text-dim);opacity:.8}
.form .field:hover input,.form .field:hover select,.form .field:hover textarea{border-color:var(--meta)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form .help{font-size:12px;color:var(--text-dim)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form button{margin-top:6px}
.form-note{margin-top:14px;font-size:12px;color:var(--text-dim);line-height:1.5}
.form .form-consent{display:flex;align-items:flex-start;gap:9px;margin:4px 0 2px;font-family:var(--f-body);font-size:12.5px;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--cream);cursor:pointer}
.form .form-consent input{flex:0 0 auto;width:auto;margin:2px 0 0 0;accent-color:var(--mustard);cursor:pointer}
.form .form-consent span{position:relative;top:-3px}

/* ---- footer ---- */
.foot{background:var(--forest);color:#E9E3D2}
.foot a{color:#E9E3D2}
.foot .cta-band{padding-block:clamp(48px,6vw,80px);border-bottom:1px solid rgba(184,172,140,.35)}
.foot .cta-band h2{font-size:clamp(28px,4.2vw,42px);color:#fff;max-width:32ch}
.foot .cta-band p{margin-top:14px;color:#E9E3D2;max-width:none}
.foot .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.foot .btn-primary{background:var(--mustard);color:#16140F;border-color:var(--mustard);--stamp:rgba(22,20,15,.85)}
.foot .btn-ghost{color:#F4EFE2;--brk:#D8B45E}
.foot .btn-ghost:hover{color:#D8B45E}
/* footer CTA ghost button: cream label, bright mustard brackets */
.foot .cta-band .btn-ghost{color:#F4EFE2;--brk:var(--mustard)}
.foot .cta-band .btn-ghost:hover{color:var(--mustard)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1.4fr;gap:clamp(32px,5vw,56px);padding-block:clamp(44px,5vw,64px)}
.foot-grid h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mustard);margin:0 0 16px;font-weight:500}
.foot-grid p,.foot-grid li{font-size:14px;line-height:1.7;color:#B8AC8C}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid a{text-decoration:none;color:#B8AC8C}
.foot-grid a:hover{color:#fff}
.foot-brand b{font-family:"XB Niloofar",var(--f-display);font-size:25px;font-weight:400;color:#fff;display:block;margin-bottom:10px}
.foot-brand .am{font-family:inherit;font-weight:inherit;color:var(--mustard)}
.foot-mark{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.foot-mark b{margin-bottom:0}
.foot-loc{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#B8AC8C}
.foot-grid .foot-brand .foot-tag{font-size:15px;line-height:1.6;color:#E9E3D2;margin:0 0 16px;max-width:34ch}
.foot-grid .foot-brand .foot-contact{font-size:14px;line-height:1.85;margin:0}
.foot-grid .foot-brand .foot-contact a{transition:color .15s ease}
.foot-grid .foot-brand .foot-contact a:hover{color:var(--mustard)}
.foot-li{display:inline-block;margin-left:16px;vertical-align:-2px}
.foot-li svg{width:15px;height:15px;display:block}
.foot-grid .foot-brand .foot-team{margin:16px 0 0;font-size:14px}
.foot-grid .foot-brand .foot-society{margin:10px 0 0;font-size:14px}
/* the Casebook and Society links carry the Oxford rule like every other text CTA */
.foot-grid .foot-brand .foot-team a,.foot-grid .foot-brand .foot-society a{display:inline-flex;align-items:center;gap:7px;color:#D8B45E;
  position:relative;border-bottom:2px solid currentColor;padding-bottom:3px}
.foot-grid .foot-brand .foot-team a::after,.foot-grid .foot-brand .foot-society a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor}
.foot-grid .foot-brand .foot-team a:hover,.foot-grid .foot-brand .foot-society a:hover{color:#E9E3D2}
.foot-grid .foot-brand .foot-team svg,.foot-grid .foot-brand .foot-society svg{width:14px;height:14px;transform:translateX(0);transition:transform .2s ease}
.foot-grid .foot-brand .foot-team a:hover svg,.foot-grid .foot-brand .foot-society a:hover svg{transform:translateX(4px)}
.foot-news-block h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mustard);margin:0 0 12px;font-weight:500}
.foot-news-block p{font-size:14px;line-height:1.7;color:#E9E3D2;margin:0;max-width:54ch}
.foot-news-block .news-form{margin-top:16px}
.foot-bottom{border-top:1px solid rgba(184,172,140,.35);padding-block:26px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:12px;color:#B8AC8C}
.foot-bottom .foot-legal{display:flex;gap:18px;font-family:var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.foot-bottom .foot-legal a{text-decoration:none}
.foot-bottom .foot-legal a:hover{color:var(--mustard)}
.foot-bottom{align-items:flex-start}
.foot-bottom .foot-risk{flex:0 1 40ch;line-height:1.5;color:#B8AC8C;text-align:right}
@media (max-width:640px){.foot-bottom .foot-risk{flex-basis:100%;text-align:left}}
/* footer newsletter */
.news-form{display:flex;gap:10px;flex-wrap:wrap}
.news-input{flex:1 1 200px;min-width:0;font:inherit;font-size:15px;color:#F4EFE2;background:#294B3C;
  border:1px solid #B8AC8C;border-radius:0;padding:12px 14px}
.news-input::placeholder{color:#C3B89A}
.news-input:focus{outline:2px solid var(--mustard);outline-offset:1px;border-color:var(--mustard)}
.news-consent{flex:1 1 100%;display:flex;align-items:flex-start;gap:8px;margin-top:4px;font-family:var(--f-body);font-size:11.5px;line-height:1.4;letter-spacing:0;text-transform:none;color:#B8AC8C}
.news-consent input{flex:0 0 auto;margin-top:2px;accent-color:var(--mustard);cursor:pointer}
.news-consent a{color:var(--mustard)}
.news-consent a:hover{color:var(--mustard)}
/* newsletter: in-place confirmation that replaces the signup form */
.news-confirm{margin-top:16px}
.foot-news-block .news-confirm-line{font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;line-height:1.4;text-transform:uppercase;color:var(--mustard);margin:0}
.foot-news-block .news-confirm-sub{font-size:14px;line-height:1.7;color:#E9E3D2;margin:8px 0 0;max-width:54ch}
/* contact enquiry: thank-you state that fills the form box */
.form-confirm{display:grid;gap:10px}
.form-confirm-title{font-family:var(--f-display);font-size:clamp(22px,3vw,30px);line-height:1.2;color:#F4EFE2;margin:0}
.form-confirm-body{font-size:15px;line-height:1.7;color:#E9E3D2;margin:0;max-width:46ch}
/* legal / privacy page */
.legal{padding-block:clamp(40px,5vw,72px)}
.legal-wrap{max-width:760px}
.legal .upd{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);margin:0 0 30px}
.legal h2{font-size:clamp(20px,2.4vw,26px);margin:46px 0 14px;padding-top:24px;border-top:1px solid var(--hair)}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:8px}
.legal h3{font-size:17px;font-family:var(--f-body);font-weight:600;margin:24px 0 8px}
.legal p{margin:0 0 14px;color:var(--text);line-height:1.72;font-size:16px}
.legal address{font-style:normal;margin:0 0 14px;line-height:1.72}
.legal ul{margin:0 0 16px;padding-left:20px}
.legal li{margin:0 0 8px;line-height:1.7}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal-table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:15px}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:12px 14px;border:1px solid var(--hair)}
.legal-table th{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--meta);background:var(--surface);font-weight:500}
.legal .closing-note{margin-top:38px;padding-top:24px;border-top:1px solid var(--hair);font-size:14px;color:var(--text-dim);font-style:italic;line-height:1.7}
@media (max-width:560px){.legal-table th,.legal-table td{padding:10px}}

/* ---- reveal motion (visible by default for no-JS + reduced motion) ----
   Rationed: .reveal marks the few featured moments (hero summary cards, the
   borrower-card plaques, the dossier cards, the CHF figure). Everything else
   is simply there; card grids use .stagger below instead. */
.reveal{opacity:1}
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

/* ---- grid stagger: children of a marked grid rise in sequence ----
   The animation carries no fill-forward state, so hover transforms on the
   cards are untouched once the entrance has played. site.js sets --stgr per
   child and adds .in when the grid scrolls into view; the delay is capped so
   long grids (the 12 case files) finish inside half a second. .case-detail is
   the injected case-file drawer, which manages its own open/close motion. */
html.js .stagger:not(.in)>*:not(.case-detail){opacity:0}
html.js .stagger.in>*:not(.case-detail){animation:stgrIn .5s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(min(var(--stgr,0),7)*60ms)}
@keyframes stgrIn{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion: reduce){
  html.js .stagger:not(.in)>*:not(.case-detail){opacity:1}
  html.js .stagger.in>*:not(.case-detail){animation:none}
}

/* ---- hero entrance: the one page-load moment (home only) ---- */
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .hero-content{animation:heroIn .8s cubic-bezier(.16,1,.3,1) .1s backwards}
@media (prefers-reduced-motion: reduce){.hero .hero-content{animation:none}}

/* fallback: if JS is off, reveal all hidden case detail inline
   (site.js stamps html.js when it runs, so :not(.js) means JS never ran) */
html:not(.js) .case-sources{display:block}

/* ============================================================
   Responsive
   ============================================================ */
/* seven nav items need more room than six did: tighten the row on narrower
   desktops, and collapse to the menu earlier (1020px, was 900px) */
@media (min-width:1021px) and (max-width:1200px){
  .nav-links{gap:18px;margin-left:max(0px, 250px - max(var(--gut), (100vw - var(--maxw))/2 + var(--gut)))}
  .nav-links a{font-size:15px}
}
@media (max-width:1020px){
  .nav-links{display:none;margin-left:0}
  .nav-toggle{display:inline-flex}
  /* CTA moves into the menu, so drop it from the header bar */
  .site-head .nav-right .btn-primary{display:none}
  .site-head.open .nav-links{display:flex;position:absolute;left:0;right:0;top:68px;flex-direction:column;
    align-items:flex-start;gap:0;background:#1E3A2E;border-top:2px solid #B8AC8C;border-bottom:2px solid #B8AC8C;padding:8px var(--gut) 18px}
  .site-head.open .nav-links li{width:100%}
  .site-head.open .nav-links a{display:flex;align-items:center;padding:15px 0;font-size:16px;color:#F4EFE2}
  .site-head.open .nav-links a::after{content:"";flex:1;height:1px;margin-left:14px;background:#B8AC8C;position:relative;top:1px}
  .site-head.open .nav-links a[aria-current="page"]{color:var(--mustard)}
  /* Submit a project, pinned to the bottom of the open menu */
  .site-head.open .nav-links .nav-cta-item{display:block;width:100%;margin-top:16px}
  .site-head.open .nav-links .nav-cta-item a{justify-content:center;padding:11px 20px;
    font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#16140F}
  .site-head.open .nav-links .nav-cta-item a::after{content:none}
}
@media (max-width:900px){
  .numbers{grid-template-columns:1fr;gap:40px}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .cd-grid{grid-template-columns:1fr;gap:28px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .case-grid{grid-template-columns:1fr}
  .form .two{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  /* keep the small-screen header to brand + menu toggle only */
  .site-head .btn-primary{display:none}
}

/* ---- two-door (home audience split) ---- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.door{position:relative;display:flex;flex-direction:column;border:1px solid var(--hair-strong);border-radius:0;
  background:var(--surface);padding:clamp(26px,3.2vw,40px);text-decoration:none;color:var(--text);
  transition:border-color .2s ease,transform .15s ease}
.door::before{content:"";position:absolute;inset:5px;border:1px solid var(--rule);pointer-events:none;transition:border-color .2s ease}
.door>*{position:relative}
.door:hover{border-color:var(--forest);transform:translateY(-2px)}
.door .de{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.door h3{font-size:clamp(24px,3vw,32px);margin:14px 0 0}
.door p{margin-top:14px;color:var(--text-dim);font-size:15px;line-height:1.6;flex:1 0 auto;transition:color .2s ease}
.door:hover p{color:var(--meta)}
.door .go{margin-top:22px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);display:inline-flex;align-items:center;gap:8px}
.door .go svg{width:16px;height:16px;transition:transform .2s ease}
.door:hover .go svg{transform:translateX(4px)}
@media (max-width:640px){.doors{grid-template-columns:1fr}}

/* ---- quotes / testimonials ---- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);align-items:stretch;
  max-width:1080px;margin-inline:auto}
.quote-card{position:relative;border:2px solid var(--rule);border-radius:0;background:#5A584F;box-shadow:7px 7px 0 0 var(--ink);
  padding:clamp(16px,1.8vw,22px) clamp(16px,1.8vw,22px) 16px;display:flex;flex-direction:column}
.quote-card .mark{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:58px;line-height:.55;color:var(--mustard);height:30px;position:relative;top:4px}
.quote-card blockquote{margin:14px 0 0;font-family:var(--f-display);font-weight:400;font-size:18px;line-height:1.5;color:var(--text);flex:1 0 auto}
.quote-card .by{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}
.quote-card .by .nm{font-weight:600;font-size:14.5px}
/* small text on the slate plaque (#5A584F) needs its own lighter steps:
   #E9E3D2 for neutrals and #EFD79A for mustard (both ≥4.5:1 on slate) */
.quote-card .by .ro{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:#E9E3D2;margin-top:3px;transition:color .18s ease}
.quote-card{transition:transform .12s ease, box-shadow .12s ease, border-color .18s ease}
.quote-card:hover{border-color:var(--mustard);transform:translate(3px,3px);box-shadow:4px 4px 0 0 var(--ink)}
.quote-card:hover .by .ro{color:#EFD79A}

/* ---- discreet inline link: the Oxford rule (thick line over thin) ---- */
.inline-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--meta);text-decoration:none;position:relative;
  border-bottom:2px solid currentColor;padding-bottom:4px;transition:color .2s ease}
.inline-link::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor}
.inline-link svg{transition:transform .2s ease}
.inline-link:hover{color:var(--text)}
.dossier-cta .inline-link:hover{color:#E9E3D2}
.inline-link:hover svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.inline-link,.inline-link svg{transition:none}}
/* in-prose article links: match body text, forest green, underlined (not the mono arrow style) */
.post-body p:not(.ce-cta) .inline-link{display:inline;font-family:inherit;font-size:inherit;font-weight:inherit;
  letter-spacing:normal;text-transform:none;gap:0;color:var(--forest);
  border-bottom:0;padding-bottom:0;
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.post-body p:not(.ce-cta) .inline-link::after{content:none}
.post-body p:not(.ce-cta) .inline-link:hover{text-decoration-thickness:2px;color:var(--forest)}

@media (max-width:900px){.quotes{grid-template-columns:1fr}}

/* ---- FAQ, numbered cards with tinted open state ---- */
.faq{counter-reset:faq;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.faq details{border:1px solid var(--rule);border-radius:0;background:var(--slate);
  overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.faq details[open]{border-color:var(--forest);box-shadow:0 14px 36px -22px rgba(26,24,20,.4)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;padding:22px 24px;
  font-family:var(--f-display);font-size:clamp(18px,2vw,21px);font-weight:500;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{counter-increment:faq;content:counter(faq,decimal-leading-zero);
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:#EFD79A;flex:0 0 auto;padding-top:6px}
.faq summary .ic{margin-left:auto;flex:0 0 auto;width:26px;height:26px;border:1px solid var(--hair-strong);
  border-radius:50%;position:relative;margin-top:2px;transition:border-color .2s ease,background .2s ease}
.faq details[open] summary .ic{border-color:var(--mustard);background:color-mix(in srgb,var(--mustard) 14%,transparent)}
.faq summary .ic::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  border-right:2px solid var(--meta);border-bottom:2px solid var(--meta);
  transform:translate(-50%,-70%) rotate(45deg);transition:transform .25s ease}
.faq details[open] summary .ic::before{transform:translate(-50%,-30%) rotate(225deg)}
.faq .ans{margin:0 24px 24px 56px;padding:16px 0 0;border-top:1px solid var(--rule);
  color:var(--cream);max-width:64ch;line-height:1.62}
@media (max-width:640px){.faq .ans{margin-left:24px}}

/* ---- track record: inline currency label on the figure ---- */
.numbers .feature .fig .cur{display:inline;font-family:var(--f-display);font-weight:500;font-size:.34em;
  letter-spacing:0;color:inherit;line-height:1;margin-right:.16em;vertical-align:baseline}
.numbers .feature .fig .cur.cur-after{margin-right:0;margin-left:.16em}

/* ---- borrowers hero: summary term-sheet card ---- */
.ph-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,64px);align-items:center}
.summary-card{border:1px solid var(--rule);border-radius:0;background:var(--surface);overflow:hidden;
  box-shadow:0 24px 60px -34px rgba(26,24,20,.45)}
.summary-card .sc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;background:var(--forest);color:#F4EFE2}
.summary-card .sc-head .t{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.summary-card .sc-head .s{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mustard);border:1px solid var(--mustard);border-radius:2px;padding:3px 7px}
.summary-card dl{margin:0}
.summary-card .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 20px;border-bottom:1px solid var(--rule)}
.summary-card .row:last-child{border-bottom:0}
.summary-card dt{margin:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.summary-card dd{margin:0;font-family:var(--f-display);font-weight:500;font-size:15px;text-align:right}
@media (max-width:900px){.ph-grid{grid-template-columns:1fr;gap:36px}}

/* ---- journey as a connected step flow (titles only) ---- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:8px}
.flow::before{content:"";position:absolute;top:7px;left:12%;right:12%;height:1px;background:var(--rule)}
.flow .node{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px}
.flow .node .dot{width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--rule);
  box-shadow:0 0 0 6px var(--bg);position:relative;z-index:1;transition:border-color .25s ease,background .25s ease}
.flow .node.active .dot{border-color:var(--mustard);background:var(--mustard)}
.flow-cursor{position:absolute;top:7px;left:12.5%;width:16px;height:16px;border-radius:50%;background:var(--mustard);
  box-shadow:0 0 0 5px var(--bg),0 0 16px rgba(196,160,74,.55);transform:translate(-50%,-50%);
  transition:left .12s linear;z-index:2;pointer-events:none}
.flow .node .when{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--meta);margin:22px 0 8px}
.flow .node h3{font-size:clamp(20px,2.4vw,27px);font-weight:500;transition:color .25s ease}
.flow .node.active h3{color:var(--mustard)}
@media (max-width:640px){
  .flow{grid-template-columns:1fr 1fr;gap:28px 0}
  .flow::before,.flow-cursor{display:none}
  .flow .node.active h3{color:inherit}
}

/* ---- step flow descriptions ---- */
.flow .node p{font-size:13px;color:#F4EFE2;line-height:1.45;margin-top:10px;max-width:24ch}

/* ---- FAQ collapses to one column on smaller screens ---- */
@media (max-width:768px){.faq{grid-template-columns:1fr}}

/* ---- borrowers: smaller hero title ---- */
.page-hero.hero-tight h1{font-size:clamp(30px,4.4vw,46px)}

/* ---- borrowers: centred divider line at the top of each section ---- */
.sep-bar{position:relative}
/* the measured rule: a hairline with surveyor's end ticks */
.sep-bar::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:clamp(140px,20vw,260px);height:9px;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  background:linear-gradient(var(--rule),var(--rule)) no-repeat center/100% 1px}
/* full-width divider directly under the video hero: plain 2px line, no ticks */
.hero.has-video + .sep-bar::before{left:0;transform:none;width:100%;height:2px;
  border-left:0;border-right:0;background:var(--rule)}
/* drop the full-width underline beneath the borrowers hero */
.page-hero.hero-tight{border-bottom:0}

/* a closing divider line below a section (e.g. the borrowers FAQ) */
.sep-bar-end{position:relative}
.sep-bar-end::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:clamp(140px,20vw,260px);height:9px;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  background:linear-gradient(var(--rule),var(--rule)) no-repeat center/100% 1px}
/* imprint & privacy heroes: divider spans the full width, plain line, no ticks */
.sep-bar-end.hero-rule-full::after{left:0;transform:none;width:100%;height:2px;
  border-left:0;border-right:0;background:var(--rule)}
/* ---- borrowers: short "how the model works" band ---- */
.offer-split{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
.offer-head{max-width:none;position:sticky;top:96px}
.offer-kicker{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,4.2vw,42px);line-height:1.15;letter-spacing:-.01em;color:var(--text)}
.offer-lead{margin-top:18px;max-width:none;font-size:clamp(16px,1.6vw,18px);line-height:1.65;color:var(--text-dim)}
.offer-note{margin-top:24px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.55;color:var(--meta)}
.offer-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,22px)}
/* cream retro cards on the green band */
.offer-item{--text:#1A1814;--text-dim:#5A584F;position:relative;border-radius:0;background:var(--cream);
  border:1px solid rgba(26,24,20,.22);padding:24px 22px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.offer-item::before{content:"";position:absolute;inset:5px;pointer-events:none;border:1px solid var(--rule);transition:border-color .18s ease}
.offer-item:hover{transform:translateY(-3px);border-color:var(--mustard);box-shadow:0 16px 40px -26px rgba(0,0,0,.5)}
.offer-item:hover::before{border-color:var(--mustard)}
.offer-item .oi-k{position:relative;display:block;font-family:var(--f-display);font-weight:500;font-size:clamp(18px,2vw,22px);letter-spacing:-.01em;color:var(--forest)}
.offer-item p{position:relative;margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--text-dim);max-width:62ch}
@media (max-width:860px){.offer-split{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}.offer-head{position:static}}

/* ---- borrowers: journey title runs full width on one line ---- */
#voices .sec-head h2{white-space:nowrap}
@media (max-width:640px){#voices .sec-head h2{white-space:normal}}
#journey .sec-head{max-width:none}
#journey .sec-head h2{max-width:none;white-space:nowrap}
@media (max-width:640px){#journey .sec-head h2{white-space:normal}}

/* ---- borrowers: hovering value card on the forest section ---- */
.borrower-card{--text:#1A1814;--text-dim:#5A584F;--meta:#9A7C2F;
  max-width:800px;margin-inline:auto;border-radius:14px;background:var(--cream);color:var(--text);
  padding:clamp(30px,4.2vw,52px);box-shadow:0 30px 70px -32px rgba(0,0,0,.55);
  transition:transform .25s ease,box-shadow .25s ease}
.borrower-card:hover{transform:translateY(-6px);box-shadow:0 44px 94px -34px rgba(0,0,0,.6)}
.borrower-card .bc-eyebrow{margin:0 0 16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.borrower-card h2{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,4.2vw,42px);line-height:1.12;letter-spacing:-.01em;color:var(--text);max-width:18ch}
.borrower-card h2 em{font-style:italic;font-weight:400}
.borrower-card p:not(.bc-eyebrow){margin-top:18px;font-size:clamp(15px,1.6vw,17px);line-height:1.65;color:var(--text-dim);max-width:64ch}
.borrower-card.bc-wide h2{max-width:none}
.borrower-card.bc-wide p:not(.bc-eyebrow){max-width:none}

/* ---- borrowers: "what Watson finances" icon cards ---- */
.finance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.fcard{position:relative;padding:26px 24px;background:#5A584F;border:2px solid var(--rule);border-radius:0;box-shadow:7px 7px 10px 0 var(--ink);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.fcard::before{content:"";position:absolute;inset:5px;border:1px solid var(--rule);pointer-events:none;transition:border-color .18s ease}
.fcard>*{position:relative}
.fcard:hover{transform:translate(3px,3px);border-color:var(--mustard);box-shadow:4px 4px 7px 0 var(--ink)}
.fcard:hover::before{border-color:var(--mustard)}
.fcard .fi{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:0;
  background:#5A584F;color:var(--mustard);border:1px solid var(--mustard);margin-bottom:18px;
  transition:transform .18s ease}
.fcard:hover .fi{transform:scale(1.06)}
.fcard:hover p{color:#EFD79A}
.fcard .fi svg{width:23px;height:23px;display:block}
.fcard h3{font-family:var(--f-display);font-size:19px;font-weight:500;line-height:1.18;letter-spacing:-.01em}
.fcard p{margin-top:9px;font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#E9E3D2}
.finance-note{margin-top:22px;font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--meta)}

/* ---- record: caveat note under the stat cards (index, lenders) ---- */
.record-note{margin-top:18px;font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;line-height:1.6;color:var(--meta)}
.record-note a:not(.inline-link){color:inherit;text-decoration:underline;text-underline-offset:2px}
/* the note closes the left record column, level with the bottom of the stat cards;
   margin-top:auto pins it there while the figure sits up under the intro text */
.record-col .record-note{margin-top:auto}
@media (max-width:880px){.finance-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.finance-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .fcard{padding:18px 14px}
  .fcard .fi{width:38px;height:38px}
  .fcard .fi svg{width:19px;height:19px}
  .fcard h3{font-size:16px}
  .fcard p{font-size:10px}}

/* ---- alternating forest surface: a scoped dark theme ---- */
.surface-forest{
  --bg:#1E3A2E;
  --surface:#294B3C;
  --text:#F4EFE2;
  --text-dim:#C3B89A;
  --accent:#A9C4B0;
  --meta:#D8B45E;
  --hair:rgba(244,239,226,.16);
  --hair-strong:rgba(244,239,226,.30);
  background:var(--bg);
  color:var(--text);
}
/* long-form subtexts read in full cream, not the muted secondary tone */
.surface-forest .lede,
.surface-forest .sub,
.surface-forest .sec-head p,
.surface-forest .offer-lead,
.surface-forest .record-intro-text,
.surface-forest .muted{color:#F4EFE2}
/* primary CTA needs to lift off the forest, so it goes mustard here */
.surface-forest .btn-primary{background:var(--mustard);color:#16140F;border-color:var(--mustard);--stamp:rgba(22,20,15,.85)}
.surface-forest .btn-ghost{color:#F4EFE2;--brk:var(--meta)} /* --meta re-scopes to #D8B45E here */
.surface-forest .btn-ghost:hover{color:var(--meta)}
/* hero investor-materials CTA: cream label, bright mustard brackets */
.hero .hero-cta .btn-ghost{color:#F4EFE2;--brk:var(--mustard)}
.hero .hero-cta .btn-ghost:hover{color:var(--mustard)}
/* phone CTA: mustard brackets wherever it appears; label stays AA-safe */
.btn-ghost[href^="tel:"]{color:var(--meta);--brk:var(--mustard)}
.surface-forest .btn-ghost[href^="tel:"],
.foot .btn-ghost[href^="tel:"]{color:#F4EFE2;--brk:var(--mustard)}
/* hard-coded forest values that would vanish on a forest ground */
.surface-forest .numbers .feature .fig{color:var(--mustard)}
/* track-record: intro stacked above the figure in the left column */
/* left column matches the cards' height: intro pinned top, figure pinned bottom */
.numbers-stacked{align-items:stretch}
.record-col{display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(20px,2.6vw,32px)}
.record-intro-text{color:var(--text-dim);font-size:clamp(16px,1.6vw,18px);line-height:1.65;max-width:52ch}
/* feature caption set in Fraunces, larger, as a confident line */
.numbers .feature-lead .cap{margin-top:2px;font-family:var(--f-display);font-weight:400;font-size:clamp(20px,2.3vw,28px);line-height:1.3;color:var(--text);max-width:24ch}
/* keep the headline figure mustard regardless of the section surface */
.numbers .feature-lead .fig{color:var(--mustard)}

/* borrowers "what Watson finances" intro runs full width */
#finance .sec-head,#finance .sec-head p{max-width:none}
.surface-forest .faq details[open]{border-color:var(--meta);box-shadow:none}
.surface-forest .door:hover,.surface-forest .case-card[aria-expanded="true"]{border-color:var(--meta)}

/* ---- track record: retro double-frame stat cards (home) ---- */
.stat-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.stat-card{position:relative;border-radius:0;padding:22px 20px 18px;
  background:#234A38;border:1px solid var(--rule);
  transition:transform .18s ease,background .18s ease,border-color .18s ease}
/* the inner line: second square frame for the retro plaque look */
.stat-card::before{content:"";position:absolute;inset:5px;pointer-events:none;
  border:1px solid rgba(184,172,140,.45);transition:border-color .18s ease}
.stat-card.wide{grid-column:1/-1}
.stat-card:hover{transform:translateY(-3px);background:#284F3D;border-color:var(--mustard)}
.stat-card:hover::before{border-color:rgba(196,160,74,.55)}
.stat-card .sv{position:relative;display:block;font-family:var(--f-display);font-weight:500;
  font-size:clamp(30px,3.3vw,40px);letter-spacing:-.01em;line-height:1;color:#F4EFE2}
.stat-card .sv .sv-note{font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(12px,1.1vw,14px);letter-spacing:0;color:var(--forest);margin-left:8px;vertical-align:baseline}
.stat-card .sk{position:relative;display:block;margin-top:10px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--rule);line-height:1.45}
@media (max-width:480px){.stat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card.wide{grid-column:1/-1}}

/* doctrine intro paragraph spans the full content width */
#doctrine .sec-head,#doctrine .sec-head p{max-width:none}


/* ============================================================
   Enquiry wizard (enquire.html)
   ============================================================ */
/* progress banner under the nav */
.enq-stepper{background:#1E3A2E;border-bottom:1px solid rgba(184,172,140,.35)}
.enq-stepper[hidden]{display:none}
.enq-steps{list-style:none;margin:0;padding:18px 0;display:flex;gap:0}
.enq-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;position:relative;color:rgba(184,172,140,.7)}
.enq-step::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:rgba(184,172,140,.32)}
.enq-step:first-child::before{display:none}
.enq-step.done::before,.enq-step.active::before{background:var(--mustard)}
.enq-step .n{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;background:#1E3A2E;
  border:1.5px solid rgba(184,172,140,.5);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:12px;transition:border-color .2s ease,background .2s ease,color .2s ease}
.enq-step .l{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1.2}
.enq-step.done{color:rgba(244,239,226,.85);cursor:pointer}
.enq-step.done .n{border-color:var(--mustard);color:var(--mustard)}
.enq-step.active{color:#fff}
.enq-step.active .n{border-color:var(--mustard);background:var(--mustard);color:#16140F}
@media (max-width:680px){.enq-step .l{display:none}.enq-steps{padding:14px 0}}

/* the form area: forest ground, a lifted-green question box, cream answers */
.enq{padding-block:clamp(36px,5vw,64px)}
.enq-shell{max-width:1040px}
.enq-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.92fr);gap:clamp(20px,3vw,36px);align-items:start}
.enq-layout[hidden]{display:none}
@media (max-width:860px){.enq-layout{grid-template-columns:1fr}}
/* "your enquiry" running summary */
.enq-summary{background:var(--surface);border:1px solid var(--rule);border-radius:0;padding:clamp(20px,2.4vw,28px);position:sticky;top:88px}
@media (max-width:860px){.enq-summary{position:static}}
.es-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.es-title{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.es-count{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--text-dim)}
.es-list{margin:0}
.es-empty{margin-top:14px;font-size:13px;color:var(--text-dim);line-height:1.5}
.es-empty[hidden]{display:none}
.es-row{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--rule)}
.es-row:last-child{border-bottom:0}
.es-row dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.es-row dd{margin:0;font-size:14.5px;color:#F4EFE2;line-height:1.4}
.es-sub{display:block;font-size:13.5px;color:#E4E9DF;line-height:1.45}
.es-sub .esl{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-right:6px}
.enq-box{background:var(--surface);border:1px solid var(--rule);border-radius:0;padding:clamp(26px,4vw,46px)}
.enq-eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.enq-q{font-family:var(--f-display);font-weight:500;font-size:clamp(22px,3vw,32px);line-height:1.12;letter-spacing:-.01em;color:#F4EFE2;margin-top:14px;max-width:20ch}
.enq-q:focus{outline:none}
.enq-help{margin-top:12px;color:#C7CFBF;font-size:15px;line-height:1.55;max-width:54ch}
.enq-help[hidden]{display:none}
.enq-options{margin-top:clamp(22px,3vw,32px);display:grid;gap:20px}
.enq-choices{display:grid;gap:12px}
.enq-fields{display:grid;gap:16px}
.enq-fields.cols{grid-template-columns:1fr 1fr}
.enq-fields.cols .enq-field.full{grid-column:1/-1}
@media (max-width:560px){.enq-fields.cols{grid-template-columns:1fr}}
/* answer cards, cream */
.enq-opt{display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer;font:inherit;
  background:var(--cream);color:var(--ink);border:1px solid rgba(26,24,20,.16);border-radius:0;
  padding:15px 18px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.enq-opt:hover{border-color:var(--rule);transform:translateY(-2px)}
.enq-opt .ot{font-family:var(--f-display);font-weight:500;font-size:17px;color:var(--forest)}
.enq-opt .od{font-size:13px;color:var(--slate);line-height:1.4}
.enq-opt[aria-pressed="true"]{border-color:var(--mustard);box-shadow:inset 0 0 0 2px var(--mustard)}
/* text fields (contact step), cream */
.enq-field{display:grid;gap:6px}
.enq-field label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#C7CFBF}
.enq-field label .opt{color:var(--text-dim);text-transform:none;letter-spacing:0}
.enq-hint{font-size:12px;line-height:1.45;color:var(--text-dim);max-width:56ch}
.enq-field.full .enq-hint{max-width:none}
.enq-field input,.enq-field textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--cream);
  border:1px solid rgba(26,24,20,.16);border-radius:0;padding:13px 15px;width:100%}
.enq-field textarea{resize:vertical;min-height:86px;line-height:1.5}
.enq-field input:focus,.enq-field textarea:focus{outline:2px solid var(--mustard);outline-offset:1px;border-color:var(--mustard)}
/* no up/down spinners on number inputs */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* unit suffix shown inside numeric intake boxes (€, %, months, years) */
.enq-inwrap{position:relative;display:block}
.enq-inwrap input{padding-right:62px}
.enq-unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--slate);pointer-events:none}
/* navigation: Continue is mustard when live, forest with a mustard edge when not */
.enq-nav{display:flex;align-items:center;gap:14px;margin-top:24px}
.enq-back{color:#F4EFE2;--brk:#D8B45E}
.enq-back[hidden]{display:none}
.enq-next{margin-left:auto;background:var(--mustard);color:#16140F;border-color:var(--mustard);--stamp:rgba(22,20,15,.85)}
.enq-next:disabled{background:#1E3A2E;color:rgba(244,239,226,.55);border-color:var(--mustard);cursor:not-allowed;
  box-shadow:none;transform:none}
.enq-next:disabled:hover,
.enq-next:disabled:active{transform:none;box-shadow:none}
.enq-privacy{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--text-dim)}
.enq-privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* confirmation */
.enq-done[hidden]{display:none}
.enq-done{max-width:600px;margin-inline:auto;text-align:center;background:var(--surface);
  border:1px solid var(--rule);border-radius:0;padding:clamp(36px,5vw,60px)}
.enq-done h1{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,4vw,46px);color:#F4EFE2}
.enq-done h1:focus{outline:none}
.enq-done p{margin-top:14px;color:#C7CFBF;font-size:16px;line-height:1.6}
.enq-done .btn{margin-top:26px}

/* ============================================================
   Forest across, cream cards.
   Green ground on every section site-wide, with content cards
   rendered as cream retro-plaques, mirroring the borrowers page.
   ============================================================ */

/* heroes already sit on forest: drop the hairline so the
   mid-width separator bar is the only divider, as on borrowers */
.surface-forest.page-hero{border-bottom:0}

/* ---- cream cards on the forest ground ---- */
.surface-forest .stat-card,
.surface-forest .case-card,
.surface-forest .member{
  --text:#1A1814;
  --text-dim:#5A584F;
  --meta:#9A7C2F;
  --hair:rgba(26,24,20,.14);
  --hair-strong:rgba(26,24,20,.22);
  background:var(--cream);
  color:var(--text);
  border-color:rgba(26,24,20,.22);
}

/* stat-card was a dark plaque: recolour its hardcoded light text */
.surface-forest .stat-card{background:var(--cream)}
.surface-forest .stat-card .sv{color:var(--forest)}
.surface-forest .stat-card .sk{color:var(--slate)}
.surface-forest .stat-card::before{border-color:var(--rule)}
.surface-forest .stat-card:hover{background:var(--cream);border-color:var(--mustard)}
.surface-forest .stat-card:hover::before{border-color:var(--mustard)}

/* doors: retro frame on a forest field, same hue as the section */
.surface-forest .door{--text:#F4EFE2;--text-dim:#B8AC8C;--meta:#D8B45E;--hair:rgba(244,239,226,.16);
  background:var(--forest);color:#F4EFE2;border-color:var(--rule)}
.surface-forest .door::before{border-color:var(--rule)}
.surface-forest .door:hover{border-color:var(--mustard)}
.surface-forest .door:hover::before{border-color:var(--mustard)}

/* member portrait stays a forest image well; body reads on cream */
.surface-forest .member .portrait{background:var(--forest)}

/* expanded case-file drawer keeps a visible outline on the green */
.surface-forest .case-detail{border-color:var(--meta)}

/* expanded card matches the forest-styled summary panel it opens below,
   rather than staying a cream plaque */
.surface-forest .case-card[aria-expanded="true"]{
  --text:#F4EFE2;--text-dim:#B8AC8C;--meta:#D8B45E;
  --hair:rgba(244,239,226,.16);--hair-strong:rgba(244,239,226,.30);
  background:var(--bg);color:var(--text);border-color:var(--meta);
}

/* ---- two doors: arrow rides with the eyebrow, CTA row removed ---- */
.door .de{display:inline-flex;align-items:center;gap:8px}
.door .de svg{width:15px;height:15px;transition:transform .2s ease}
.door:hover .de svg{transform:translateX(4px)}

/* ---- case files: top hero text and the closing note run full width ---- */
.cf-hero{border-bottom:0}
.cf-hero h1{max-width:none}
.cf-hero .lede{max-width:none}
.case-note{max-width:none}

/* ============================================================
   Round 3: homepage tweaks, borrower retro card, lenders rebuild
   ============================================================ */

/* track record: tighten the gap between the title and the content */
#record .sec-head{margin-bottom:18px}

/* "why borrowers choose Watson" now the cream retro plaque */
.borrower-card{position:relative;border-radius:0;border:1px solid rgba(26,24,20,.22)}
.borrower-card::before{content:"";position:absolute;inset:7px;border:1px solid var(--rule);pointer-events:none}
.borrower-card .bc-eyebrow,
.borrower-card h2,
.borrower-card p{position:relative}

/* lenders hero: fee line under the at-a-glance card */
.hero-fee{margin-top:16px;text-align:center;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}

/* ---- dossier doctrine card (home/approach, screenshot-style, cream) ---- */
.dossier-card{--text:#1A1814;--text-dim:#5A584F;--meta:#9A7C2F;
  --hair:rgba(26,24,20,.14);--hair-strong:rgba(26,24,20,.22);
  position:relative;background:var(--cream);color:var(--text);
  border:1px solid rgba(26,24,20,.22);padding:clamp(20px,2.4vw,30px)}
.dossier-card::before{content:"";position:absolute;inset:7px;border:1px solid var(--rule);pointer-events:none}
.dossier-card h3{position:relative;font-family:var(--f-display);font-style:normal;font-weight:500;
  font-size:clamp(21px,2.5vw,28px);letter-spacing:-.01em;margin:2px 0 6px;color:var(--text)}

/* ---- flip cards: how your capital is protected ---- */
.flip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.flip-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.flip-grid{grid-template-columns:1fr}}
.flip{font:inherit;text-align:left;background:none;border:0;padding:0;margin:0;cursor:pointer;
  display:block;min-height:268px;perspective:1100px}
.flip-inner{display:block;position:relative;width:100%;min-height:268px;transition:transform .62s cubic-bezier(.2,.7,.2,1);
  transform-style:preserve-3d}
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
@media (prefers-reduced-motion:reduce){.flip-inner{transition:none}}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--cream);color:#1A1814;border:1px solid rgba(26,24,20,.22);
  padding:24px 22px;display:flex;flex-direction:column}
.flip-face::before{content:"";position:absolute;inset:5px;border:1px solid var(--rule);pointer-events:none}
.flip-face.back{transform:rotateY(180deg)}
.flip .ff-k{position:relative;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#9A7C2F}
.flip .ff-t{position:relative;font-family:var(--f-display);font-weight:500;font-size:clamp(18px,2vw,22px);
  line-height:1.14;letter-spacing:-.01em;margin-top:12px;color:var(--forest)}
.flip .ff-d{position:relative;margin-top:10px;font-size:13.5px;line-height:1.55;color:#5A584F}
.flip .ff-cue{position:relative;margin-top:auto;padding-top:14px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:#9A7C2F;display:flex;align-items:center;gap:10px}
.flip .ff-cue svg{width:13px;height:13px;transition:transform .25s ease}
.flip:hover .ff-cue{color:var(--mustard)}
.flip:hover .ff-cue svg{animation:cueNudge .9s ease-in-out infinite}
@keyframes cueNudge{0%,100%{transform:translateX(3px)}50%{transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){.flip:hover .ff-cue svg{animation:none;transform:translateX(4px)}}
.flip:hover .flip-face{border-color:var(--mustard)}
.flip:focus-visible{outline:2px solid var(--mustard);outline-offset:3px}
@media (max-width:900px){.flip,.flip-inner{min-height:220px}}
@media (max-width:520px){.flip,.flip-inner{min-height:198px}}

/* ---- lenders: protection band, dossier note, flip CTA ---- */
#protection .sec-head,
#protection .sec-head p{max-width:none}
.dossier-col{display:flex;flex-direction:column}
.dossier-note{margin-top:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--meta)}
.dossier-card .dossier-lede{position:relative;margin:4px 0 0;color:var(--text-dim);
  font-size:clamp(14px,1.5vw,16px);line-height:1.6;max-width:none;white-space:nowrap}
.dossier-col .dossier-note-above{margin:0 0 14px}
.dossier-col .dossier-cta{margin-top:32px}
@media (max-width:900px){.dossier-card .dossier-lede{white-space:normal}}
.flip-cta{margin-top:clamp(28px,4vw,40px);text-align:center}

/* ---- approach: hero stamp, diligence phases, mustard hollow CTA ---- */

/* diligence-process CTA: hollow, mustard text and border */
.flip-cta .btn-ghost{color:#F4EFE2;--brk:var(--mustard)}
.flip-cta .btn-ghost:hover{color:var(--mustard)}

/* approach hero: big Fraunces 9 with stacked label */
.dd-hero{display:flex;align-items:center;justify-content:center}
.dd-stamp{display:inline-flex;flex-direction:column;align-items:center;text-align:center;
  border:2px solid var(--mustard);border-radius:6px;
  padding:clamp(16px,2.2vw,26px) clamp(28px,3.6vw,48px);transform:rotate(-4deg)}
.dd-stamp-top{width:100%;font-family:var(--f-mono);font-size:clamp(10px,1vw,12px);letter-spacing:.22em;
  color:var(--meta);border-bottom:1px solid rgba(196,160,74,.5);padding-bottom:9px;margin-bottom:6px}
.dd-stamp-9{font-family:var(--f-display);font-weight:500;font-size:clamp(74px,9vw,124px);line-height:.9;color:var(--mustard)}
.dd-stamp-mid{font-family:var(--f-mono);font-size:clamp(11px,1.1vw,14px);letter-spacing:.2em;color:#F4EFE2;margin-top:4px}
.dd-stamp-bot{width:100%;font-family:var(--f-mono);font-size:clamp(8px,.85vw,10px);letter-spacing:.18em;
  color:var(--text-dim);border-top:1px solid rgba(196,160,74,.5);padding-top:9px;margin-top:11px}
@media (max-width:900px){.dd-hero{justify-content:center;margin-top:8px}}

/* diligence: subtext full width, pipeline full width in two columns */
#diligence .sec-head,#diligence .sec-head p{max-width:none}
.dd-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);margin-top:14px}
.dd-ph-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);margin:0 0 16px;padding-bottom:11px;border-bottom:1px solid var(--hair-strong);display:flex;align-items:baseline;gap:9px}
.dd-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.dd-steps li{position:relative;padding-left:36px;transform-origin:left center;transition:transform .18s ease}
.dd-steps li:hover{transform:scale(1.03)}
.dd-steps li:hover .lab{color:var(--meta)}
@media (prefers-reduced-motion:reduce){.dd-steps li{transition:none}.dd-steps li:hover{transform:none}}
.dd-steps .num{position:absolute;left:0;top:2px;font-family:var(--f-mono);font-size:11px;color:var(--meta)}
.dd-steps .lab{display:block;font-size:14px;line-height:1.5;color:var(--text-dim)}
.dd-steps .lab b{display:block;font-family:var(--f-display);font-weight:500;font-size:16.5px;line-height:1.28;letter-spacing:-.01em;color:var(--text);margin-bottom:4px}
@media (max-width:860px){.dd-phases{grid-template-columns:1fr;gap:28px}}

/* security instruments as a single row of small boxes */
.instruments{margin-top:clamp(52px,7vw,88px)}
.instruments .inst-lt{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--meta);margin:0 0 16px}
/* rolling case-file ticker, title only */
.inst-ticker{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.inst-track{display:flex;width:max-content;gap:0;animation:inst-scroll 80s linear infinite}
.inst-ticker:hover .inst-track{animation-play-state:paused}
.inst-item{position:relative;flex:0 0 auto;padding:0 clamp(22px,3vw,40px);
  font-family:var(--f-display);font-weight:500;font-size:clamp(18px,2.2vw,26px);
  letter-spacing:-.01em;color:var(--cream);white-space:nowrap}
.inst-item::after{content:"";position:absolute;right:-4px;top:50%;width:7px;height:7px;
  transform:translateY(-50%) rotate(45deg);background:var(--mustard)}
.inst-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.instruments .inst-note{margin-top:18px;font-size:12px;color:var(--text-dim)}
@keyframes inst-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.inst-track{animation:none;flex-wrap:wrap;width:auto;row-gap:10px}}

/* ---- doctrine grid: full-width clickable rows (approach, home) ---- */
.dossier-wide{width:100%}
.doctrine-grid{position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  gap:0 clamp(16px,2vw,28px);margin-top:8px}
.doctrine-grid .dg{border-bottom:1px solid var(--hair)}
.doctrine-grid .dg>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;
  gap:3px;padding:9px 0}
.doctrine-grid .dg>summary::-webkit-details-marker{display:none}
.doctrine-grid .dg>summary:focus-visible{outline:2px solid var(--mustard);outline-offset:2px}
.doctrine-grid .dgk{font-size:13.5px;line-height:1.2;color:var(--text)}
.doctrine-grid .dg[open] .dgk{font-weight:600}
.doctrine-grid .dgv{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--meta)}
.doctrine-grid .dge{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--text-dim);max-width:34ch}
/* remove the divider lines beneath the bottom (second) row */
.doctrine-grid .dg:nth-last-child(-n+5){border-bottom:0}
@media (max-width:900px){.doctrine-grid{grid-template-columns:repeat(3,1fr)}
  .doctrine-grid .dg:nth-last-child(-n+5){border-bottom:1px solid var(--hair)}
  .doctrine-grid .dg:nth-last-child(-n+1){border-bottom:0}}
@media (max-width:600px){.doctrine-grid{grid-template-columns:repeat(2,1fr)}
  .doctrine-grid .dg:nth-last-child(-n+2){border-bottom:0}}

/* ---- struct-tabs: flat index-tab strip (borrowers, financing structures) ---- */
#structures .sec-head{max-width:none;margin-bottom:26px}
.struct-tabs{margin-top:8px}
.st-list{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-bottom:1px solid rgba(184,172,140,.4)}
.st-tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:5px;
  padding:14px 18px 14px 0;border-bottom:2px solid transparent;transition:border-color .15s ease}
.st-tab .st-n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--rule);
  display:inline-block;transition:color .15s ease,transform .15s ease}
.st-tab:hover .st-n{transform:translateX(4px)}
.st-tab .st-k,.st-tab .st-k2{font-family:var(--f-display);font-weight:500;font-size:15px;
  color:#F4EFE2;letter-spacing:-.005em;transition:color .15s ease}
.st-tab .st-k2{display:block;margin-top:1px}
.st-tab:hover .st-k,.st-tab:hover .st-k2{color:var(--meta)}
.st-tab.is-active{border-color:var(--mustard)}
.st-tab.is-active .st-n{color:var(--meta)}
.st-tab.is-active .st-k,.st-tab.is-active .st-k2{color:var(--meta);font-weight:600}
.st-tab:focus-visible{outline:2px solid var(--mustard);outline-offset:-2px}
.st-panel{margin:22px 0 0;font-size:15px;line-height:1.6;color:#F4EFE2;max-width:none;min-height:3.2em}
/* no JS: every definition stays readable instead of only the first */
html:not(.js) .st-panel[hidden]{display:block}
@media (max-width:900px){.st-list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.st-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:380px){.st-list{grid-template-columns:1fr}}

/* ============================================================
   Reveal-on-scroll for hover states, site-wide (touch only)
   On a real pointer the existing :hover effects stand unchanged.
   On touch (no hover) site.js adds .in-view to each card as it
   crosses the middle of the screen, so nothing has to be tapped.
   The card lift is deliberately left out here: on scroll only the
   colour changes and the arrows and icons move, never an up or down
   shift. The lift stays a pointer-only affordance.
   ============================================================ */

/* the scroll-active look: colour + arrow/icon motion, no lift, no lift-shadow */
.door.in-view{border-color:var(--mustard)}
.door.in-view::before{border-color:var(--mustard)}
.door.in-view p{color:var(--meta)}
.door.in-view .go svg{transform:translateX(4px)}
.door.in-view .de svg{transform:translateX(4px)}

.stat-card.in-view{border-color:var(--mustard);background:#284F3D}
.stat-card.in-view::before{border-color:rgba(196,160,74,.55)}
.surface-forest .stat-card.in-view{background:var(--cream);border-color:var(--mustard)}
.surface-forest .stat-card.in-view::before{border-color:var(--mustard)}

.quote-card.in-view{border-color:var(--mustard)}
.quote-card.in-view .by .ro{color:#EFD79A}

.offer-item.in-view{border-color:var(--mustard)}
.offer-item.in-view::before{border-color:var(--mustard)}

.fcard.in-view{border-color:var(--mustard)}
.fcard.in-view::before{border-color:var(--mustard)}
.fcard.in-view .fi{transform:scale(1.06)}
.fcard.in-view p{color:#EFD79A}

/* reduced motion: keep the colour shifts, drop the arrow/icon motion */
@media (prefers-reduced-motion:reduce){
  .door.in-view .go svg,
  .door.in-view .de svg,
  .fcard.in-view .fi{transform:none}
}

/* on touch, drop the sticky tap-triggered :hover so scroll is the only trigger,
   and so a tap never lifts a card */
@media (hover:none){
  .door:hover{border-color:var(--hair-strong);transform:none}
  .door:hover::before{border-color:var(--rule)}
  .door:hover p{color:var(--text-dim)}
  .door:hover .go svg{transform:none}
  .door:hover .de svg{transform:none}
  .surface-forest .door:hover{border-color:var(--rule)}
  .surface-forest .door:hover::before{border-color:var(--rule)}

  .stat-card:hover{transform:none;background:#234A38;border-color:var(--rule)}
  .stat-card:hover::before{border-color:rgba(184,172,140,.45)}
  .surface-forest .stat-card:hover{background:var(--cream);border-color:var(--rule)}
  .surface-forest .stat-card:hover::before{border-color:var(--rule)}

  .quote-card:hover{border-color:var(--rule);transform:none;box-shadow:7px 7px 0 0 var(--ink)}
  .quote-card:hover .by .ro{color:#E9E3D2}

  .offer-item:hover{transform:none;border-color:rgba(26,24,20,.22);box-shadow:none}
  .offer-item:hover::before{border-color:var(--rule)}

  .fcard:hover{transform:none;border-color:var(--rule);box-shadow:7px 7px 10px 0 var(--ink)}
  .fcard:hover::before{border-color:var(--rule)}
  .fcard:hover .fi{transform:none}
  .fcard:hover p{color:#E9E3D2}

  .borrower-card:hover{transform:none;box-shadow:0 30px 70px -32px rgba(0,0,0,.55)}
}

/* ============================================================
   Casebook (blog index)
   The case-file metaphor, applied to the blog. Filter chips name
   the three buckets (market, regulation, updates). Card styles are
   defined ready for the first entries; until then the empty state
   carries the page.
   ============================================================ */
.cb-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(30px,4vw,46px)}
.cb-chip{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-dim);background:transparent;border:1px solid var(--hair-strong);border-radius:0;
  padding:9px 16px;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}
.cb-chip:hover{border-color:var(--meta);color:var(--text)}
.cb-chip.is-on{background:var(--forest);color:#F4EFE2;border-color:var(--forest)}
.cb-chip.is-on:hover{color:#F4EFE2}
/* on a forest section (case files) the active chip flips to cream, since a
   forest chip would vanish into the ground */
.surface-forest .cb-chip.is-on{background:var(--cream);color:var(--forest);border-color:var(--cream)}
.surface-forest .cb-chip.is-on:hover{color:var(--forest)}

/* ---- case files: labelled filter rows above the grid (site.js builds them) ---- */
.cf-filters{margin-bottom:clamp(26px,3.5vw,40px);display:grid;gap:12px}
.cf-filter-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cf-filter-row .cb-filter{margin-bottom:0}
.cf-fl{flex:0 0 auto;min-width:9ch;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-dim)}

/* empty state, framed like a dossier cover */
.cb-empty{position:relative;border:1px solid var(--hair-strong);border-radius:0;background:var(--surface);
  padding:clamp(44px,6vw,78px) clamp(26px,4vw,52px);text-align:center}
.cb-empty::before{content:"";position:absolute;inset:7px;border:1px solid var(--hair);pointer-events:none}
.cb-empty>*{position:relative}
.cb-empty .ce-eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.cb-empty h2{font-size:clamp(24px,3.2vw,34px);margin:16px 0 0}
.cb-empty p{margin:16px auto 0;max-width:54ch;color:var(--text-dim);font-size:clamp(15px,1.6vw,17px);line-height:1.62}
.cb-empty .ce-cta{margin-top:28px;display:flex;justify-content:center}

/* article cards, ready for the first entries */
.cb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cb-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--hair-strong);border-radius:0;
  background:var(--surface);color:var(--text);padding:24px 24px 22px;text-decoration:none;
  transition:border-color .2s ease,transform .15s ease}
.cb-card::before{content:"";position:absolute;inset:6px;border:1px solid var(--hair);pointer-events:none;transition:border-color .2s ease}
.cb-card>*{position:relative}
.cb-card:hover{transform:translateY(-2px);border-color:var(--rule)}
.cb-card .cb-file{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.cb-card h3{font-size:clamp(20px,2.2vw,24px);margin:12px 0 0;line-height:1.18}
.cb-card .cb-excerpt{margin-top:10px;font-size:14px;line-height:1.55;color:var(--text-dim)}
.cb-card .cb-meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.cb-card[hidden]{display:none}
@media (max-width:640px){.cb-grid{grid-template-columns:1fr}}

/* ============================================================
   Featured case stack (home, #featured-case)
   The dossier motif made literal, as a stack of three case
   folders. Each is a cream sheet with a mono tab; the tabs peek
   at staggered depth, like folders filed on top of one another.
   Clicking a tab sends the front folder sliding down and tucking
   underneath the stack (site.js), cycling to the next case. All
   three bodies live in the DOM (crawlable); with JS off they fall
   back to a plain vertical list.
   ============================================================ */
.folder-stack{position:relative;max-width:820px;margin-inline:auto;padding-top:54px;--tab-step:190px}
.folder-stack__list{position:relative;list-style:none;margin:0;padding:0;min-height:clamp(300px,42vw,380px)}
.folder{position:absolute;left:0;right:0;top:0;list-style:none;transform-origin:50% 0;
  transition:transform .62s cubic-bezier(.42,.04,.22,1)}
/* resting slots: the front sheet flat, the two behind lifted up and shrunk.
   2D lift + scale, not perspective translateZ: browsers hit-test the 3D
   projection imprecisely, which put the tabs' click areas off their pixels.
   z-index keeps the front sheet painting over the ones tucked behind. */
.folder[data-pos="0"]{transform:translateY(0);z-index:3}
.folder[data-pos="1"]{transform:translateY(-24px) scale(.964);z-index:2}
.folder[data-pos="2"]{transform:translateY(-48px) scale(.929);z-index:1}
/* a folder behind the front one selects on click across its whole exposed face */
.folder:not([data-pos="0"]){cursor:pointer}
/* each folder's li box spans the whole stack even where nothing is painted,
   so the front folder's transparent box was swallowing clicks on the lower
   half of the tabs peeking out behind it. Only the painted parts (the tab
   and the sheet) take the hit; the li itself stays click-transparent. */
.folder{pointer-events:none}
.folder-tab,.folder-body{pointer-events:auto}
/* clicking a tab reassigns data-pos; the folders glide between resting slots on
   the .folder transform transition above (site.js's bringToFront) */

/* the folder tab: the sticking-out label, a real per-case select control */
.folder-tab{position:relative;z-index:2;display:inline-block;margin-left:clamp(18px,3vw,34px);
  background:var(--cream);border:1px solid rgba(26,24,20,.22);border-bottom:0;
  padding:10px 22px;font:inherit;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  line-height:1;text-transform:uppercase;white-space:nowrap;color:#9A7C2F;cursor:pointer;
  transition:color .2s}
/* fan the tabs out sideways so all three read as separate, clickable folder
   tabs. Offset is keyed to each folder's fixed DOM slot (nth-child), not its
   data-pos, so a tab keeps its horizontal position when the stack cycles.
   margin-left, not transform: <button> ignores transform in some engines. */
.folder:nth-child(1) .folder-tab{margin-left:clamp(18px,3vw,34px)}
.folder:nth-child(2) .folder-tab{margin-left:calc(clamp(18px,3vw,34px) + var(--tab-step))}
.folder:nth-child(3) .folder-tab{margin-left:calc(clamp(18px,3vw,34px) + var(--tab-step) * 2)}
/* mask the body's top border where the tab sits, so tab and folder read as one sheet */
.folder-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cream)}
.folder-tab:hover{color:#1A1814}
.folder-body{--text:#1A1814;--text-dim:#5A584F;--meta:#9A7C2F;--hair:rgba(26,24,20,.14);--hair-strong:rgba(26,24,20,.22);
  position:relative;z-index:1;background:var(--cream);color:var(--text);
  border:1px solid rgba(26,24,20,.22);padding:clamp(26px,4vw,48px);
  box-shadow:0 30px 70px -32px rgba(0,0,0,.55)}
.folder-body::before{content:"";position:absolute;inset:7px;border:1px solid var(--rule);pointer-events:none}
.folder-body>*{position:relative}
.folder-file{margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.folder-h{font-family:var(--f-display);font-weight:500;font-size:clamp(24px,3.4vw,36px);
  line-height:1.12;letter-spacing:-.01em;color:var(--text);margin-top:14px;max-width:22ch}
.folder-sum{margin-top:16px;font-size:clamp(15px,1.6vw,17px);line-height:1.6;color:var(--text-dim);max-width:60ch}
.folder-cta{margin-top:22px}
.folder-cta .inline-link{color:var(--meta)} /* cream ground: darkened mustard for small text */
.folder-stamp{position:absolute;top:clamp(18px,3vw,30px);right:clamp(18px,3vw,30px);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:#9A7C2F;border:2px solid currentColor;padding:6px 12px;transform:rotate(6deg)}
/* JS off: no stack behaviour, render the three folders as a readable column */
html:not(.js) .folder-stack{padding-top:0}
html:not(.js) .folder-stack__list{min-height:0}
html:not(.js) .folder{position:static;transform:none;margin-bottom:22px;cursor:auto}
html:not(.js) .folder-tab{cursor:default}
/* reduced motion: no 3D travel; the swap is instant */
@media (prefers-reduced-motion:reduce){
  .folder{transition:none}
}
/* narrow screens: the full "Case file no. 0X" tab labels can't fan three wide,
   so keep the 3D stack but shorten each tab to just its number and pull the fan
   in tight — the folders still cascade and cycle exactly as on desktop */
@media (max-width:680px){
  .folder-stack{--tab-step:clamp(76px,22vw,92px);padding-top:44px}
  .folder-tab{padding:9px 15px;letter-spacing:.14em}
  .folder-tab__lead{display:none}
}
@media (max-width:560px){.folder-stamp{position:static;display:inline-block;margin-bottom:14px;transform:rotate(0)}}

/* ---- why Watson (home): text left, Watson story CTA as a stamp on the right ---- */
.why-section{padding-block:clamp(44px,6vw,72px)}
.why-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(32px,5vw,64px)}
.why-text{max-width:640px}
.why-title{font-size:clamp(26px,3.6vw,36px);color:var(--text);margin-bottom:14px}
.why-line{font-family:var(--f-display);font-weight:400;font-size:clamp(19px,2.4vw,26px);line-height:1.5;color:var(--text)}
/* the story mark: the monogram (also a link to the story) above a third-type text CTA */
.story-stamp{justify-self:end;flex-shrink:0;display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-right:clamp(24px,4vw,56px);transform:rotate(-4deg)}
.story-logo{display:block;line-height:0}
.story-logo-img{width:clamp(48px,6vw,68px);height:auto;display:block;margin:0 auto}
.story-cta{width:100%;margin-top:14px}
.story-cta .inline-link{color:var(--meta);white-space:nowrap} /* --meta is the forest-safe mustard (brighter on dark surfaces) */
.story-cta .inline-link:hover{color:#E9E3D2}
@media (prefers-reduced-motion:reduce){.story-stamp{transition:none}}
@media (max-width:720px){.why-grid{grid-template-columns:1fr}.why-text{max-width:none}.story-stamp{justify-self:center;margin-right:0}}

/* ============================================================
   Casebook article figures
   In-article visual components for explainers and case-file
   anatomies: a key-numbers strip, a deal timeline, and the
   security-stack ladder. Static, no JS, no motion (nothing to
   reduce). Used inside .post-body on article pages; when and how
   is watson-casebook's article-blueprint.md.
   ============================================================ */
/* key-numbers strip: 2 to 4 stat blocks between hairlines */
.post-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;
  margin:30px 0;padding:22px 0;border-top:1px solid var(--hair-strong);border-bottom:1px solid var(--hair-strong)}
.post-figs .pf-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);margin:0}
.post-figs .pf-value{font-family:var(--f-display);font-size:clamp(22px,3vw,30px);line-height:1.15;color:var(--text);margin:6px 0 0}
.post-figs .pf-note{font-size:13px;line-height:1.5;color:var(--text-dim);margin:4px 0 0}
@media (max-width:560px){.post-figs{grid-template-columns:1fr 1fr}}

/* deal timeline: mono stage label + mustard dot on a hairline spine */
.post-timeline{list-style:none;margin:30px 0;padding:0}
.post-timeline li{position:relative;padding:0 0 22px 26px;border-left:1px solid var(--hair-strong)}
.post-timeline li:last-child{padding-bottom:0}
.post-timeline li::before{content:"";position:absolute;left:-4px;top:6px;width:7px;height:7px;background:var(--mustard)}
.post-timeline .tl-stage{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);margin:0 0 4px}
.post-timeline .tl-what{margin:0;font-size:15px;line-height:1.6;color:var(--text)}

/* security-stack ladder: stacked forest bars, one layer per bar */
.post-body .post-ladder{list-style:none;margin:30px 0;padding:0;display:grid;justify-items:start;gap:6px;counter-reset:pl}
.post-body .post-ladder li{--meta:#D8B45E;/* forest-safe small mustard, same re-point as .surface-forest */
  counter-increment:pl;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline;
  width:fit-content;max-width:100%;margin:0;background:var(--forest);color:#F4EFE2;padding:14px 18px}
.post-ladder li::before{content:counter(pl,decimal-leading-zero);grid-column:1;grid-row:1;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--meta)}
.post-ladder .pl-name{grid-column:2;font-family:var(--f-display);font-size:17px;line-height:1.3;margin:0}
.post-ladder .pl-gloss{grid-column:2;font-size:13.5px;line-height:1.55;color:#E9E3D2;margin:0}

/* ============================================================
   Art Deco doors (home "Choose the door that fits")
   Fine vertical fluting in the card's own line colour (--rule) at
   low opacity, drawn top->bottom on reveal, each line at its own
   speed (--d, set per line by site.js). A geometric sunburst sits
   in all four corners. The <i> fluting bars are built by site.js;
   the section reveal (.stagger -> .in) drives the draw.
   ============================================================ */
.door--deco{overflow:hidden}
.door--deco .deco-flutes{position:absolute;inset:18px;display:flex;justify-content:space-between;pointer-events:none;z-index:0}
.door--deco .deco-flutes i{display:block;width:1px;height:100%;background:var(--rule);opacity:.06;
  transform:scaleY(0);transform-origin:top center;will-change:transform}
.doors.in .door--deco .deco-flutes i{animation:flute-draw var(--d,1.4s) cubic-bezier(.22,.61,.36,1) forwards}
@keyframes flute-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* keep the copy above the fluting */
.door--deco .de,.door--deco h3,.door--deco p{position:relative;z-index:1}
/* corner sunbursts (one SVG in markup, rotated per corner) */
.door--deco .deco-corner{position:absolute;width:26px;height:26px;z-index:1;color:var(--meta);opacity:.85;
  pointer-events:none;transition:color .2s ease,opacity .2s ease}
.door--deco .deco-corner svg{width:100%;height:100%;display:block}
.door--deco .deco-corner--tl{top:12px;left:12px}
.door--deco .deco-corner--tr{top:12px;right:12px;transform:rotate(90deg)}
.door--deco .deco-corner--br{bottom:12px;right:12px;transform:rotate(180deg)}
.door--deco .deco-corner--bl{bottom:12px;left:12px;transform:rotate(270deg)}
.door--deco:hover .deco-corner{color:var(--mustard);opacity:1}
@media (prefers-reduced-motion:reduce){
  .doors.in .door--deco .deco-flutes i{animation:none;transform:scaleY(1)}
}