/* ReachHOA — one stylesheet. V4 tokens from the design README.
   Layout is intrinsic (auto-fit grids, clamp); the only width query is the 960px nav
   breakpoint the design specifies. The other @media rule is the reduced-motion
   preference query at the end, which switches every animation off. */

/* Plus Jakarta Sans ships as one variable file covering the 400-800 the design uses. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2-variations');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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');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}

:root{
  --navy-900:#071A3F;
  --navy-800:#0B2559;
  --footer:#040F28;
  --blue:#2456F0;
  --blue-hover:#3B7BFF;
  --blue-dark:#1A43C4;
  --blue-tint:#E6EEFF;
  --blue-light:#9FC1FF;
  --teal:#0FB59B;
  --teal-dark:#0A7E6C;/* corrected from #0B8F7A, see the V4 README corrections */
  --teal-tint:#E6FBF6;
  --teal-light:#5EEAD4;
  --amber:#C17C08;/* ring border only; corrected from #F59E0B, see the V4 README corrections */
  --amber-pill:#FEF3C7;
  --amber-text:#92400E;
  --amber-light:#FCD34D;
  --coral-text:#B3392C;
  --coral-tint:#FDE8E5;
  --white:#FFFFFF;
  --tint:#F3F6FC;
  --mock:#F8FAFE;
  --border:#E3E8F3;
  --divider:#EEF1F7;
  --btn-border:#D5DCEA;
  --ink:#0F1B33;
  --body:#3A465C;
  --muted:#5B6577;
  --on-dark:#FFFFFF;
  --on-dark-2:rgba(255,255,255,.78);
  --on-dark-3:rgba(255,255,255,.6);
  --on-dark-4:rgba(255,255,255,.45);
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:1160px;
  --gutter:clamp(20px,4vw,40px);
  --section-pad:clamp(64px,9vw,120px);
  --header-h:74px;
  --brand:linear-gradient(135deg,#3B7BFF,#0FB59B);
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--white);scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:17px;-webkit-font-smoothing:antialiased;text-wrap:pretty}
main{flex:1}
h1,h2,h3,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-dark);text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.on-dark :focus-visible,.header :focus-visible{outline-color:var(--on-dark)}

/* Layout */
.wrap{max-width:var(--measure);margin:0 auto;padding:var(--section-pad) var(--gutter)}
.band-tint{background:var(--tint)}
.band-navy{position:relative;overflow:hidden;background:var(--navy-900);color:var(--on-dark)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(36px,5vw,72px);align-items:center}
.cols--start{align-items:start;gap:clamp(32px,5vw,88px);grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.cols__text{max-width:60ch;min-width:0}
/* Firm library and Records put the mock on the left; source order keeps the prose
   first so the page still reads in order with CSS disabled. */
.cols--mock-left .cols__mock{order:-1}

/* Type */
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.eyebrow::before{content:"";width:20px;height:2px;border-radius:2px;background:currentColor}
.eyebrow--teal{color:var(--teal-dark)}
.eyebrow--light{color:var(--blue-light)}
.h1{margin-top:28px;max-width:18ch;font-weight:800;font-size:clamp(40px,5.4vw,68px);line-height:1.02;letter-spacing:-0.03em}
.h2{margin-top:18px;font-weight:800;font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-0.025em}
.h2--who{max-width:22ch;font-size:clamp(32px,3.8vw,48px);line-height:1.06}
.h2--contact{margin-top:22px;font-size:clamp(34px,4vw,54px);line-height:1.04;letter-spacing:-0.03em}
.h3{font-weight:700;font-size:clamp(24px,2.4vw,30px);line-height:1.15;letter-spacing:-0.02em}
.lead{margin-top:28px;max-width:56ch;font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:var(--on-dark-2)}
.copy{margin-top:22px;font-size:17px;line-height:1.6;color:var(--body)}
.copy+.copy{margin-top:16px}
.on-dark .copy{color:var(--on-dark-2)}
.mono{font-family:var(--mono)}

/* Buttons */
.btn{display:inline-block;border-radius:12px;font-size:16px;font-weight:700;line-height:normal;text-align:center;transition:transform .2s,background .2s,color .2s}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--blue);color:var(--on-dark);padding:16px 26px;box-shadow:0 14px 30px -10px rgba(36,86,240,.9)}
.btn--primary:hover{background:var(--blue-hover);color:var(--on-dark);transform:translateY(-2px)}
.btn--ghost{padding:16px 20px;font-weight:600;color:var(--on-dark);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
.btn--ghost:hover{background:rgba(255,255,255,.1);color:var(--on-dark)}
.btn--white{background:var(--white);color:var(--navy-800);padding:17px 28px;box-shadow:0 20px 40px -16px rgba(0,0,0,.6)}
.btn--white:hover{color:var(--navy-800);transform:translateY(-2px)}
.btn--nav{background:var(--blue);color:var(--on-dark);padding:10px 18px;border-radius:10px;font-size:14.5px;font-weight:600;box-shadow:0 8px 20px -8px rgba(36,86,240,.8)}
.btn--nav:hover{background:var(--blue-hover);color:var(--on-dark);transform:translateY(-1px)}

/* Header — sticky, translucent over the hero */
.header{position:sticky;top:0;z-index:50;background:rgba(7,26,63,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
/* The translucent header is designed to sit over the dark hero. Pages without one
   (the privacy page) use it solid, so the nav keeps its contrast over white. */
.header--solid{background:var(--navy-900);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav{max-width:var(--measure);margin:0 auto;padding:16px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
/* One finished lockup: mark, gap and wordmark all sit inside the 654x141 viewBox, so it
   is sized by height alone — scaling by width would crop the roof headroom the viewBox
   deliberately holds. 41px height renders the mark at the specified 28px.
   Both the lockup and the mark alone ship in the HTML; the 640px query below picks one,
   so the swap needs no JavaScript and no second request. */
.wordmark{display:inline-flex;align-items:center;line-height:0}
.wordmark:hover{text-decoration:none}
.wordmark__lockup{height:41px;width:auto;display:block}
.wordmark__mark{display:none;width:28px;height:28px}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2.5vw,28px);font-size:14.5px;font-weight:500;white-space:nowrap}
.nav__links a:not(.btn){color:var(--on-dark-2)}
.nav__links a:not(.btn):hover{color:var(--on-dark)}

/* Hero */
.hero{margin-top:calc(-1 * var(--header-h));padding-top:var(--header-h)}
.hero__wrap{position:relative;max-width:var(--measure);width:100%;margin:0 auto;padding:clamp(72px,9vw,120px) var(--gutter) clamp(180px,16vw,260px)}
.hero__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(40px,6vw,80px);align-items:center}
.hero__glow,.hero__orb,.hero__lines{position:absolute;pointer-events:none}
.hero__glow{inset:0;background:radial-gradient(900px 500px at 15% 10%,rgba(36,86,240,.55),transparent 60%),radial-gradient(700px 500px at 85% 80%,rgba(15,181,155,.35),transparent 60%)}
.hero__orb{right:-10%;top:-20%;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(59,123,255,.35),transparent 65%);filter:blur(30px);animation:drift 14s ease-in-out infinite}
.hero__lines{inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 40%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 30%,#000 40%,transparent 80%)}
.pill{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-light);background:rgba(59,123,255,.14);border:1px solid rgba(159,193,255,.3);padding:8px 14px;border-radius:999px}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(15,181,155,.25)}
.pill--teal{color:var(--teal-light);background:rgba(15,181,155,.14);border-color:rgba(94,234,212,.3);padding:6px 12px}
.pill--teal::before{display:none}
.shimmer{background:linear-gradient(90deg,#9FC1FF,#5EEAD4,#9FC1FF);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
.hero__actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero__stats{margin-top:40px;display:flex;gap:28px;flex-wrap:wrap}
.hero__stats>div{display:flex;flex-direction:column;gap:4px}
.hero__stats dt{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--blue-light)}
.hero__stats .is-teal{color:var(--teal-light)}
.hero__stats .is-amber{color:var(--amber-light)}
.hero__stats dd{margin:0;font-size:14px;color:rgba(255,255,255,.7)}
.hero__map{position:relative;max-width:520px;width:100%;margin:0 auto;animation:floatY 7s ease-in-out infinite}

/* Ohio map — geometry generated at build time, motion driven from here */
.omap{display:block;width:100%;height:auto;overflow:visible}
.omap__glow{fill:var(--blue-hover);opacity:.35}
.omap__counties{fill:rgba(255,255,255,.06);stroke:var(--blue-light);stroke-opacity:.45;stroke-width:1;stroke-linejoin:round}
.omap__outline{fill:none;stroke:var(--blue-light);stroke-width:2;stroke-linejoin:round}
.omap__pulse{fill:var(--blue-hover);opacity:.35;transform-origin:center}
.omap__dot{fill:#fff}
.omap--animate .omap__counties path{opacity:0;animation:omapIn .6s ease-out forwards;animation-delay:calc(var(--i) * 12ms)}
.omap--animate .omap__outline{stroke-dasharray:2400;stroke-dashoffset:2400;animation:omapDraw 2.2s .2s ease-out forwards}
.omap--animate .omap__pulse{animation:omapPulse 2.6s ease-out infinite;animation-delay:calc(var(--i) * .4s)}

/* Product mock frames */
.mock{background:var(--white);border:1px solid var(--border);border-radius:18px;box-shadow:0 40px 80px -40px rgba(7,26,63,.4);overflow:hidden;min-width:0}
.mock__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--border);font-size:13px;color:var(--muted);flex-wrap:wrap;background:var(--mock)}
.mock__crumb{font-weight:600;color:var(--ink)}
.mock__crumb span{opacity:.4;font-weight:400}
.mock__meta{font-family:var(--mono);font-size:11.5px}
.mock__meta--teal{color:var(--teal-dark)}
.mock__meta--chip{background:var(--tint);padding:4px 10px;border-radius:6px}
.mock__body{padding:clamp(22px,2.8vw,32px)}
.mock__body--tight{padding:clamp(20px,2.6vw,28px)}
.mock__title{font-size:15px;font-weight:700}
.mock__head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

/* "Sample data" label on every product mock � copy batch 01 item 6 */
.frame__caption{display:block;padding:6px clamp(20px,2.6vw,28px);text-align:right;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--muted);background:var(--mock);border-bottom:1px solid var(--border)}
.frame .frame__caption{grid-column:1 / -1}
.frame__caption--dark{background:none;color:var(--on-dark-3);border-bottom-color:rgba(255,255,255,.1)}

/* Hero product frame */
.frame{margin-top:calc(-1 * clamp(120px,12vw,200px));position:relative;z-index:2;background:var(--white);border:1px solid var(--border);border-radius:18px;box-shadow:0 40px 90px -30px rgba(7,26,63,.55),0 0 0 1px rgba(255,255,255,.4);display:grid;grid-template-columns:minmax(170px,210px) 1fr;overflow:hidden;color:var(--ink)}
.frame__side{background:var(--navy-800);color:var(--on-dark);padding:20px 16px;display:flex;flex-direction:column;gap:20px}
.frame__brand{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.frame__brand::before{content:"";width:18px;height:18px;border-radius:5px;background:var(--brand)}
.frame__label{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:rgba(255,255,255,.5);text-transform:uppercase;padding:0 10px 8px}
.frame__list{display:flex;flex-direction:column;gap:2px}
.frame__list li{display:flex;justify-content:space-between;gap:4px 8px;flex-wrap:wrap;padding:8px 10px;border-radius:8px;font-size:13px;color:rgba(255,255,255,.75)}
.frame__list li[aria-current]{background:rgba(59,123,255,.35);color:var(--on-dark)}
.frame__list .is-dim{color:var(--on-dark-4)}
.frame__list .tag{font-family:var(--mono);font-size:11px;opacity:.7}
.frame__main{display:flex;flex-direction:column;min-width:0}
.frame__cards{padding:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px;background:var(--mock)}
.card-sm{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:18px 20px}
.card-sm__head{display:flex;justify-content:space-between;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:13px;color:var(--muted);font-weight:600}
.card-sm__rows{margin-top:12px;display:flex;flex-direction:column}
.card-sm__rows li{display:flex;justify-content:space-between;align-items:center;gap:6px 10px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--divider);font-size:13.5px}
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.dot--teal{background:var(--teal)}
.dot--blue{background:var(--blue)}
.with-dot{display:flex;align-items:center;gap:8px}
.date{color:var(--muted);font-family:var(--mono);font-size:12px;white-space:nowrap}

/* Status pills */
.tag-pill{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.tag-pill--amber{background:var(--amber-pill);color:var(--amber-text)}
.tag-pill--blue{background:var(--blue-tint);color:var(--blue-dark)}
.tag-pill--gray{background:var(--divider);color:var(--muted)}
.tag-pill--coral{background:var(--coral-tint);color:var(--coral-text)}
.count-pill{font-family:var(--mono);background:var(--amber-pill);color:var(--amber-text);padding:2px 8px;border-radius:6px}

/* Who it's for */
.who{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px}
.who__card{position:relative;overflow:hidden;border-radius:20px;padding:clamp(28px,3vw,40px);transition:transform .3s,box-shadow .3s}
.who__card::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%}
.who__card--firm{background:linear-gradient(160deg,#0B2559,#071A3F);color:var(--on-dark)}
.who__card--firm::before{background:radial-gradient(circle,rgba(59,123,255,.5),transparent 70%)}
.who__card--firm:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(7,26,63,.6)}
.who__card--board{background:linear-gradient(160deg,#E6FBF6,#F3F6FC);border:1px solid #D6EFE9}
.who__card--board::before{background:radial-gradient(circle,rgba(15,181,155,.3),transparent 70%)}
.who__card--board:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(15,181,155,.45)}
.who__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px}
.who__card--firm .who__icon{background:rgba(59,123,255,.25);color:var(--blue-light)}
.who__card--board .who__icon{background:var(--teal);color:var(--white)}
.who__card h3{position:relative;margin-top:22px}
.who__card p{position:relative;margin-top:14px;font-size:16.5px;line-height:1.6}
.who__card--firm p{color:var(--on-dark-2)}
.who__card--board p{color:var(--body)}
.who__foot{position:relative;margin-top:22px;font-size:14px;font-weight:600}
.who__card--firm .who__foot{color:var(--blue-light)}
.who__card--board .who__foot{color:var(--teal-dark)}

/* Feature tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
.tile{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:22px;transition:transform .25s,box-shadow .25s,border-color .25s}
.tile:hover{transform:translateY(-4px);box-shadow:0 24px 40px -24px rgba(7,26,63,.35);border-color:#C7D5F5}
.tile__icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px}
.tile__icon--blue{background:var(--blue-tint);color:var(--blue-dark)}
.tile__icon--teal{background:var(--teal-tint);color:var(--teal-dark)}
.tile__icon--amber{background:var(--amber-pill);color:var(--amber-text)}
.tile__icon--coral{background:var(--coral-tint);color:var(--coral-text)}
.tile h3{margin-top:16px;font-size:15.5px;font-weight:700;letter-spacing:-0.01em}
.tile p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted)}

/* Roster */
.roster{width:100%;margin-top:20px;border-collapse:collapse;font-size:14px}
.roster th{padding:8px 16px 8px 0;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted);text-align:left;white-space:nowrap}
.roster th:last-child{padding-right:0;text-align:right}
.roster td{padding:12px 16px 12px 0;border-bottom:1px solid var(--divider);color:var(--muted)}
.roster .owner{width:100%;max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:500}
.roster .review{padding-right:0;text-align:right}
.mock__actions{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.chip{font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:9px}
.chip--outline{border:1px solid var(--btn-border);color:var(--body)}
.chip--primary{background:var(--blue);color:var(--white);box-shadow:0 8px 18px -8px rgba(36,86,240,.8)}

/* Firm library — glass mock on the navy band */
.glass{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden;min-width:0}
.glass .mock__bar{background:none;border-bottom-color:rgba(255,255,255,.1);color:var(--on-dark-3)}
.glass .mock__crumb{color:var(--on-dark)}
.glass .mock__meta{color:var(--teal-light)}
.firm__label{font-family:var(--mono);font-size:13px;color:var(--on-dark-3)}
.firm__quote{margin-top:14px;padding:18px 20px;background:rgba(255,255,255,.06);border-left:3px solid var(--blue-hover);border-radius:0 10px 10px 0;font-size:15px;line-height:1.65;color:rgba(255,255,255,.9)}
.firm__list{margin:22px 0 0 18px;padding-left:18px;border-left:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;gap:12px;font-size:14px}
.firm__list li{display:flex;justify-content:space-between;gap:4px 12px;flex-wrap:wrap}
.firm__list .mono{font-size:12.5px}
.firm__list .is-blue{color:var(--blue-light)}
.firm__list .is-teal{color:var(--teal-light)}
.firm__list .is-dim{color:rgba(255,255,255,.55)}

/* Notice timeline */
.stages{margin-top:32px;position:relative}
.stages__list{display:grid;grid-template-columns:repeat(3,1fr)}
.stages__track,.stages__fill{position:absolute;left:14px;top:13px;height:4px;border-radius:2px}
.stages__track{right:14px;background:var(--border)}
.stages__fill{width:calc((100% - 28px) * 0.5);background:linear-gradient(90deg,#0FB59B,#2456F0);transform-origin:left;animation:barIn 1.2s .3s cubic-bezier(.2,.7,.2,1) both}
.stage{position:relative;display:flex;flex-direction:column;gap:14px;padding-right:8px}
.stage__n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;font-weight:600;background:var(--white);border:2px dashed var(--btn-border);color:var(--muted)}
.stage--done .stage__n{background:var(--teal);border:2px solid var(--teal);color:var(--white)}
.stage--current .stage__n{border:2px solid var(--amber);color:var(--amber-text);animation:ringPulse 1.8s ease-out infinite}
.stage__name{font-size:14px;font-weight:700;color:var(--muted)}
.stage--done .stage__name,.stage--current .stage__name{color:var(--ink)}
.stage__detail{margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.notice__foot{margin-top:30px;padding:14px 16px;border-radius:12px;background:var(--tint);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.notice__foot p{font-size:14px;color:var(--body);font-weight:500}
.notice__fine{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted)}

/* Records timeline */
.timeline{position:relative;display:flex;flex-direction:column}
.timeline::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:2px;background:linear-gradient(#0FB59B,#2456F0,#E3E8F3)}
.timeline li{position:relative;display:flex;justify-content:space-between;gap:4px 14px;flex-wrap:wrap;padding:12px 0 12px 30px;font-size:14.5px;color:var(--ink)}
.timeline li::before{content:"";position:absolute;left:0;top:16px;width:16px;height:16px;border-radius:50%;background:var(--white);border:3px solid var(--teal)}
.timeline li.is-blue::before{border-color:var(--blue)}
.timeline li.is-dim{color:var(--muted)}
.timeline li.is-dim::before{border-color:#C7D5F5}
.timeline .label{font-weight:500}
.timeline time{color:var(--muted);font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.retained{margin-top:20px;padding:12px 14px;border-radius:10px;background:var(--teal-tint);color:var(--teal-dark);font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}

/* Photographs */
.photos{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.photos li{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(160deg,#DCE6FF,#C7D5F5);display:flex;align-items:flex-end;padding:10px;position:relative;overflow:hidden;font-family:var(--mono);font-size:11px;color:var(--blue-dark);font-weight:500}
.photos li:last-child{background:linear-gradient(160deg,#D6F5EE,#B9EBDF);color:var(--teal-dark)}
.photos .lock{position:absolute;right:10px;top:10px;width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.7);display:grid;place-items:center;color:inherit}
.kv{margin-top:20px;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--body)}
.kv>div{display:flex;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--divider)}
.kv>div:last-child{padding-bottom:0;border-bottom:0}
.kv dd{margin:0;font-weight:600;color:var(--teal-dark)}
.kv .is-muted{color:var(--muted)}

/* Vocabulary */
.toggle{margin-top:28px;display:inline-flex;background:var(--white);border:1px solid var(--btn-border);border-radius:12px;padding:4px;font-size:14px;font-weight:600;gap:4px}
.toggle button{border:0;padding:10px 18px;cursor:pointer;border-radius:9px;background:transparent;color:var(--body);transition:background .25s,color .25s}
.toggle button[aria-pressed="true"]{background:var(--blue);color:var(--white)}
.toggle button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.statute-chip{font-family:var(--mono);font-size:11.5px;padding:4px 10px;border-radius:6px;background:var(--teal-tint);color:var(--teal-dark);transition:background .25s,color .25s}
.letter{max-width:60ch;font-size:16px;line-height:1.7;color:var(--ink)}
.letter__re{color:var(--muted);font-family:var(--mono);font-size:13px}
.letter__dear{margin-top:18px;font-weight:600}
.letter__body{margin-top:14px}
.letter mark{background:var(--teal-tint);color:var(--teal-dark);padding:0 5px;border-radius:4px;font-weight:600;transition:background .25s,color .25s}
.letter__caption{margin-top:22px;font-size:13px;color:var(--muted)}
/* Lots swaps the accent from teal to blue, per the design */
[data-vocab-state="lots"] .statute-chip,[data-vocab-state="lots"] .letter mark{background:var(--blue-tint);color:var(--blue-dark)}

/* Vocabulary swap: both variants share one grid cell so the toggle never reflows the
   page, and the inactive one is [hidden] so the page reads once with CSS disabled. */
.swap{display:grid}
.swap--inline{display:inline-grid;vertical-align:baseline}
.swap>[data-vocab]{grid-area:1/1;min-width:0}
.swap>[data-vocab][hidden]{display:block;visibility:hidden}

/* Small layout helpers, kept here rather than inline */
.frame-wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}
.frame__firm{margin-top:auto}
.wrap--who{padding-top:clamp(64px,8vw,104px)}
.mock__file{font-size:13px;color:var(--muted)}
.is-layered{position:relative}
.mock__body--letter{padding:clamp(24px,3vw,40px)}
.copy--narrow{max-width:52ch}

/* Contact */
.contact__wrap{position:relative;max-width:var(--measure);margin:0 auto;padding:clamp(80px,10vw,140px) var(--gutter);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(32px,5vw,88px);align-items:end}
.contact__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(800px 500px at 20% 100%,rgba(36,86,240,.6),transparent 60%),radial-gradient(600px 400px at 90% 0%,rgba(15,181,155,.4),transparent 60%)}
.contact__cta{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.contact__caption{font-size:14px;color:var(--on-dark-3)}
.contact__details{font-size:13.5px;color:var(--on-dark-3)}
.contact__details a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.contact__details a:hover{color:inherit}
.firm__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 400px at 90% 0%,rgba(36,86,240,.45),transparent 60%)}

/* Footer */
.footer{background:var(--footer);color:var(--on-dark-3)}
.footer__in{max-width:var(--measure);margin:0 auto;padding:32px var(--gutter);display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;font-size:13.5px}
.footer__brand{font-size:16px;font-weight:700;color:var(--on-dark)}
.footer a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.footer a:hover{color:var(--on-dark)}

/* Prose page (/privacy) */
.prose{max-width:44ch}
.prose h1{font-weight:800;font-size:clamp(36px,4.4vw,54px);line-height:1.04;letter-spacing:-0.03em}
.prose h2{margin-top:44px;font-weight:700;font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-0.02em}
.prose p,.prose address{margin-top:16px;font-size:17px;line-height:1.65;color:var(--body)}
.prose h1+p{margin-top:24px}
.prose h2+p,.prose h2+address{margin-top:14px}
.prose strong{font-weight:700;color:var(--ink)}
.prose address{font-style:normal}
.prose a{text-decoration:underline;text-underline-offset:3px}

/* Scroll reveal — the hidden state is applied only when JS is running, so a page
   without JS shows every section. */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:none}

@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}100%{transform:translate(0,0) scale(1)}}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(245,158,11,.55)}100%{box-shadow:0 0 0 14px rgba(245,158,11,0)}}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes omapIn{to{opacity:1}}
@keyframes omapDraw{to{stroke-dashoffset:0}}
@keyframes omapPulse{0%{transform:scale(.3);opacity:.6}100%{transform:scale(1.8);opacity:0}}

/* The one width query the design calls for: secondary nav links hide below 960px,
   leaving the wordmark and the call to action. */
@media (max-width:959px){
  .nav__links a:not(.btn){display:none}
}

/* The hero product frame's sidebar is 170px wide; below this the main pane has too
   little room and its rows clip, so the frame stacks instead. */
@media (max-width:639px){
  .frame{grid-template-columns:1fr}
  .frame__side{flex-direction:row;flex-wrap:wrap;gap:12px 24px;align-items:flex-start}
  .frame__firm{margin-top:0}
  /* The 190px lockup plus the call to action needs 431px of nav; below that the header
     wrapped onto two rows on every common phone. The mark alone carries the brand here,
     at the 28px the package specifies and well over its 16px minimum. */
  .wordmark__lockup{display:none}
  .wordmark__mark{display:block}
  /* the call to action is now the tallest thing in the nav, so the header loses 3px */
  :root{--header-h:71px}
}

/* Preference query, not a layout breakpoint. Switches off scroll reveal, the map
   stagger / draw-on / city pulses, the hero float and orb drift, the timeline bar
   and the current-stage ring, and makes in-page anchors jump instead of glide. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .omap--animate .omap__counties path{opacity:1}
  .omap--animate .omap__outline{stroke-dasharray:none;stroke-dashoffset:0}
  .omap--animate .omap__pulse{opacity:.35}
  .btn:hover,.tile:hover,.who__card:hover{transform:none}
}