@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/e8a278522288.woff2) format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url(/assets/fonts/8f6fdf5db3bb.woff2) format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/561da8545041.woff2) format('woff2');}
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/5190bac9999e.woff2) format('woff2');}

/* ================= tokens ================= */
:root{
  --milk:#FFFBEF;
  --ink:#232A46;
  --ink-soft:rgba(35,42,70,.72);
  --sun:#FFC838;
  --sun-deep:#F5B71E;
  --royal:#3B5BDB;
  --royal-deep:#3350C4;
  --kick:#C13E27;
  --kick-deep:#A83520;
  --royal-text:#3B5BDB;
  --kick-text:#C13E27;
  --shadow-c:var(--ink);
  --grass:#2F9E44;
  --navy:#1B2140;
  --navy-deep:#151A33;
  --paperline:rgba(59,91,219,.14);
  --card:#FFFFFF;
  --tape:rgba(235,215,160,.85);
  --shadow:4px 4px 0 var(--ink);
  --shadow-lg:7px 7px 0 var(--ink);
  --disp:'Bricolage Grotesque','Arial Black',sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --marker:'Permanent Marker',cursive;
}
@media (prefers-color-scheme: dark){
  :root{
    --milk:#14192C;
    --ink:#F3EEDD;
    --ink-soft:rgba(243,238,221,.72);
    --card:#1C2340;
    --tape:rgba(235,215,160,.28);
    --paperline:rgba(142,164,255,.16);
    --shadow:4px 4px 0 rgba(0,0,0,.55);
    --shadow-lg:7px 7px 0 rgba(0,0,0,.55);
    --royal-text:#8EA4FF; --kick-text:#FF7A5C; --shadow-c:rgba(0,0,0,.55);
  }
}
:root[data-theme="light"]{
  --milk:#FFFBEF; --ink:#232A46; --ink-soft:rgba(35,42,70,.72);
  --card:#FFFFFF; --tape:rgba(235,215,160,.85); --paperline:rgba(59,91,219,.14);
  --shadow:4px 4px 0 var(--ink); --shadow-lg:7px 7px 0 var(--ink);
  --royal-text:#3B5BDB; --kick-text:#C13E27; --shadow-c:var(--ink); color-scheme:light;
}
:root[data-theme="dark"]{
  --milk:#14192C; --ink:#F3EEDD; --ink-soft:rgba(243,238,221,.72);
  --card:#1C2340; --tape:rgba(235,215,160,.28); --paperline:rgba(142,164,255,.16);
  --shadow:4px 4px 0 rgba(0,0,0,.55); --shadow-lg:7px 7px 0 rgba(0,0,0,.55);
  --royal-text:#8EA4FF; --kick-text:#FF7A5C; --shadow-c:rgba(0,0,0,.55); color-scheme:dark;
}

/* sun-wall sections never dim, so their tokens stay light in dark mode */
.hero, .hello{--shadow-c:#232A46; --ink:#232A46; --ink-soft:rgba(35,42,70,.72); --card:#FFFFFF; --shadow:4px 4px 0 #232A46; --shadow-lg:7px 7px 0 #232A46}

/* ================= base ================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth; color-scheme:light dark; -webkit-text-size-adjust:100%; text-size-adjust:100%}
a,button,input{touch-action:manipulation}
button,.btn{-webkit-user-select:none; user-select:none}
.btn,.sticker-btn,.opts button,.crow,.faq-q{-webkit-tap-highlight-color:transparent}
body{
  margin:0; background:var(--milk); color:var(--ink);
  font-family:var(--body); font-size:17.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--disp); font-optical-sizing:auto; margin:0; line-height:1; text-wrap:balance}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0}
:focus-visible{outline:3px solid var(--royal-text); outline-offset:3px; border-radius:4px}
.lineup :focus-visible, .chart :focus-visible, .mq :focus-visible{outline-color:var(--sun)}
.hero :focus-visible, .hello :focus-visible{outline-color:#232A46}
.fitg :focus-visible{outline-color:var(--sun)}
.fitg .slip :focus-visible{outline-color:var(--royal)}
.chart .chart-panel :focus-visible{outline-color:var(--royal)}
.footer :focus-visible{outline-color:var(--sun)}
section{scroll-margin-top:68px}
.wrap{max-width:1140px; margin:0 auto; padding:0 clamp(20px,4vw,44px)}
.eyebrow{
  font-weight:700; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow .dot{width:10px; height:10px; border-radius:50%; background:currentColor; flex:none}
.sect{padding:clamp(52px,9vw,120px) 0}
h2.big{font-size:clamp(38px,5.6vw,66px); font-weight:800; letter-spacing:-.015em; line-height:.98}
.sub{margin-top:16px; font-size:19px; color:var(--ink-soft); max-width:58ch}
.marker{font-family:var(--marker)}

/* buttons: sticker-slab style */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:17px; padding:14px 26px;
  border:2.5px solid var(--ink); border-radius:12px; text-decoration:none;
  background:var(--card); color:var(--ink); box-shadow:var(--shadow);
  transition:transform .13s ease, box-shadow .13s ease;
}
@media (hover:hover){ .btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--shadow-c)} }
.btn:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--shadow-c)}
.btn[hidden]{display:none !important}
.btn-kick{background:var(--kick); color:#FFF7EA; border-color:var(--ink)}
.btn-sun{background:var(--sun); color:#232A46; border-color:#232A46; box-shadow:4px 4px 0 #232A46}
@media (hover:hover){ .btn-sun:hover{box-shadow:6px 6px 0 #232A46} }
.btn-sun:active{box-shadow:0 0 0 #232A46}
.btn-sm{font-size:15px; padding:10px 18px; border-radius:10px}

/* squiggle underline */
.sq{position:relative; display:inline-block; white-space:nowrap}
.sq svg{position:absolute; left:-2%; bottom:-.16em; width:104%; height:.34em; overflow:visible}
.sq path{fill:none; stroke:var(--kick); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340}
.sq.drawn path{transition:stroke-dashoffset .9s ease .15s; stroke-dashoffset:0}

/* ================= nav ================= */
.nav{position:sticky; top:0; z-index:60; background:var(--milk); border-bottom:2.5px solid var(--ink)}
.nav .wrap{display:flex; align-items:center; gap:24px; height:66px}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto}
.logo svg{width:34px; height:34px; flex:none}
.logo b{font-family:var(--disp); font-weight:800; font-size:19.5px; letter-spacing:-.01em; white-space:nowrap}
.nav-links{display:flex; gap:22px}
.nav-links a{font-weight:600; font-size:14.5px; text-decoration:none; opacity:.85; padding:6px 2px; border-bottom:2.5px solid transparent}
@media (hover:hover){ .nav-links a:hover{opacity:1; border-bottom-color:var(--kick)} }
.nav .btn{white-space:nowrap; flex:none}
@media (max-width:420px){ .nav .wrap{gap:12px} .logo b{font-size:17px} }

/* ================= hero (sun wall) ================= */
.hero{
  position:relative; background:var(--sun); color:#232A46; overflow:hidden;
  border-bottom:2.5px solid #232A46;
}
.hero-decor{position:absolute; inset:0; pointer-events:none; opacity:.5}
.hero .wrap{position:relative; z-index:2; padding-top:clamp(64px,8vw,110px); padding-bottom:clamp(120px,14vw,170px)}
.hero-copy{max-width:760px; position:relative; z-index:3}
.hero .eyebrow{color:#232A46}
.hero h1{
  font-size:clamp(46px,8.2vw,104px); font-weight:800; letter-spacing:-.022em; line-height:.96;
  color:#232A46;
}
.hero .sub{color:rgba(35,42,70,.8); font-size:clamp(18px,2vw,21px); margin-top:22px; max-width:56ch}
.hero-ctas{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap}
.hero .btn{border-color:#232A46; box-shadow:4px 4px 0 #232A46; color:#232A46}
@media (hover:hover){ .hero .btn:hover{box-shadow:6px 6px 0 #232A46} }
.hero .btn:active{box-shadow:0 0 0 #232A46}
.hero .btn-kick{color:#FFF7EA}
.hero .btn-plain{background:#FFFBEF}

/* sticker sheet */
.sheet{
  position:absolute; right:clamp(16px,3.5vw,48px); bottom:clamp(30px,4vw,48px); z-index:4;
  background:#FFFFFF; border:2.5px solid #232A46; border-radius:16px;
  box-shadow:6px 6px 0 #232A46; padding:14px 16px 12px; width:264px;
  color:#232A46;
}
.sheet-tip{font-family:var(--marker); font-size:15px; transform:rotate(-2deg); display:block; margin-bottom:10px}
.sheet-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
.sticker-btn{border-radius:50%; padding:2px; transition:transform .12s ease}
@media (hover:hover){ .sticker-btn:hover{transform:scale(1.14) rotate(-6deg)} }
.sticker-btn:active{transform:scale(.9)}
.sticker-btn svg{display:block; width:100%; height:auto}
.sheet-count{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(35,42,70,.75); display:block; margin-top:9px}
.stick{
  position:absolute; z-index:2; pointer-events:none;
  filter:drop-shadow(2px 3px 0 rgba(35,42,70,.28));
}
.stick{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.stick svg{display:block; width:100%; height:auto; pointer-events:none}
.stick.slap{animation:slap .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes slap{
  0%{transform:scale(2.1) rotate(14deg); opacity:0}
  55%{transform:scale(.92) rotate(var(--rot)); opacity:1}
  100%{transform:scale(1) rotate(var(--rot))}
}

/* ================= marquee ================= */
.mq{background:var(--navy); color:#FFFBEF; border-bottom:2.5px solid #232A46; overflow:hidden; padding:13px 0}
.mq{touch-action:pan-y; -webkit-user-select:none; user-select:none; cursor:grab}
.mq.drag{cursor:grabbing}
.mq-track{display:flex; gap:0; width:max-content}
.mq-item{display:inline-flex; align-items:center; gap:18px; padding:0 18px; font-family:var(--disp); font-weight:700; font-size:15.5px; letter-spacing:.14em; white-space:nowrap}
.mq-item svg{width:14px; height:14px; flex:none; color:var(--sun)}

/* ================= box score ================= */
.score-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.score{
  background:var(--card); border:2.5px solid var(--ink); border-radius:14px;
  box-shadow:var(--shadow); padding:24px 22px 20px; position:relative;
  transform:rotate(var(--tilt,0deg));
}
.score:nth-child(1){--tilt:-.7deg}
.score:nth-child(2){--tilt:.5deg}
.score:nth-child(3){--tilt:-.4deg}
.score:nth-child(4){--tilt:.6deg}
.score .num.zero{color:var(--kick)}
@keyframes tick{50%{transform:scale(1.07)}}
.num.ticked{display:inline-block; animation:tick .22s ease}
.score .num{font-family:var(--disp); font-weight:800; font-variant-numeric:tabular-nums; font-size:clamp(44px,5vw,62px); line-height:1}
.score .lbl{font-weight:600; font-size:14px; margin-top:8px; color:var(--ink-soft); line-height:1.45}
.score .marker{display:block; margin-top:12px; font-size:19px; line-height:1.15; color:var(--kick); transform:rotate(-1.5deg); transform-origin:left center}
.score .marker.yrs{color:var(--royal)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .score .marker{color:#FF7A5C}
  :root:not([data-theme="light"]) .score .marker.yrs{color:#8EA4FF}
}
:root[data-theme="dark"] .score .marker{color:#FF7A5C}
:root[data-theme="dark"] .score .marker.yrs{color:#8EA4FF}

/* ================= why us ================= */
.promise-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.pcard{
  position:relative; background:var(--card); border:2.5px solid var(--ink); border-radius:14px;
  box-shadow:var(--shadow); padding:30px 28px 28px;
  transform-origin:50% -12px;
  transition:transform .22s cubic-bezier(.34,1.4,.5,1), box-shadow .22s ease;
}
@media (hover:hover){ .pcard:hover{transform:perspective(900px) rotateX(7deg); box-shadow:5px 11px 0 var(--shadow-c)} }
.pcard .gclip{position:absolute; inset:0; overflow:hidden; border-radius:11px; pointer-events:none; z-index:0}
.pcard .gnum{
  position:absolute; right:-8px; bottom:-30px; pointer-events:none;
  font-family:var(--disp); font-weight:800; font-size:132px; line-height:1;
  color:var(--royal); opacity:.09;
}
.pcard .tape{z-index:2}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pcard .gnum{opacity:.17} }
:root[data-theme="dark"] .pcard .gnum{opacity:.17}
.pcard .badge, .pcard h3, .pcard p{position:relative; z-index:1}
.pcard .tape{
  position:absolute; top:-12px; left:50%; width:96px; height:24px;
  background:var(--tape); transform:translateX(-50%) rotate(-2.5deg);
  border-left:1px dashed rgba(0,0,0,.12); border-right:1px dashed rgba(0,0,0,.12);
}
.pcard h3{font-size:24px; font-weight:800; letter-spacing:-.01em; margin-bottom:10px; line-height:1.12}
.pcard p{font-size:16.5px; color:var(--ink-soft)}
.pcard .badge{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--royal-text); margin-bottom:14px}

/* ================= lineup (royal) ================= */
.lineup{background:var(--royal); color:#FFFBEF; border-top:2.5px solid #232A46; border-bottom:2.5px solid #232A46}
.lineup .eyebrow{color:var(--sun)}
.lineup h2.big{color:#FFFBEF}
.lineup .sub{color:rgba(255,251,239,.78)}
.tcard-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(28px,4vw,44px)}
.tcard{
  position:relative; background:#FFFBEF; color:#232A46; border:2.5px solid #232A46;
  border-radius:16px; box-shadow:6px 6px 0 #232A46; overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover){ .tcard:hover{transform:translate(-3px,-4px) rotate(-.5deg); box-shadow:9px 10px 0 #232A46} }
.tcard::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%);
  transform:translateX(-130%);
}
@media (hover:hover){ .tcard:hover::after{transform:translateX(130%); transition:transform .65s ease .05s} }
.tcard.tilting{transition:transform .08s linear}
.tcard.untilt{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.tcard-top{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 12px; border-bottom:2.5px solid #232A46; font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase}
.tcard-top span{white-space:nowrap}
.tcard-art > svg:not(.art-bg){height:100%; width:auto; max-width:100%; flex:none}
.tcard-top .yr{color:var(--kick)}
.tcard-art{position:relative; overflow:hidden; height:118px; display:flex; align-items:center; justify-content:center; border-bottom:2.5px solid #232A46; padding:14px}
.tcard-art .art-bg{position:absolute; inset:0; width:100%; height:100%}
.tcard-art img{position:relative; z-index:1; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.tcard-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.tcard-body h3{font-size:19px; font-weight:800; line-height:1.05}
.tcard-meta{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(35,42,70,.75); line-height:1.7}
.tcard-body p{font-size:15px; color:rgba(35,42,70,.78)}
.tcard-foot{padding:10px 16px; border-top:2px dashed rgba(35,42,70,.25); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(35,42,70,.75); transition:color .15s ease}
.tcard.rookie{background:transparent; color:#FFFBEF; border-color:transparent; box-shadow:none}
.rookie-ants{position:absolute; inset:-2.5px; width:calc(100% + 5px); height:calc(100% + 5px); pointer-events:none; z-index:2}
.rookie-ants rect{fill:none; stroke:#FFFBEF; stroke-width:2.5; stroke-dasharray:6 7}
.tcard.rookie:focus-visible .rookie-ants rect{animation:ants 1.1s linear infinite}
@media (hover:hover){ .tcard.rookie:hover .rookie-ants rect{animation:ants 1.1s linear infinite} }
@keyframes ants{to{stroke-dashoffset:-26}}
@media (hover:hover){ .tcard.rookie:hover .tcard-foot{color:var(--sun)} }
@media (hover:hover){ .tcard.rookie:hover{background:rgba(255,251,239,.07)} }
.tcard.rookie .tcard-top{border-bottom-style:dashed; }
.tcard.rookie .tcard-top .yr{color:var(--sun)}
.tcard.rookie .tcard-art{border-bottom-style:dashed}
.tcard.rookie h3{color:#FFFBEF}
.tcard.rookie .tcard-meta{color:rgba(255,251,239,.65)}
.tcard.rookie p{color:rgba(255,251,239,.8)}
.tcard.rookie .tcard-foot{color:rgba(255,251,239,.6); border-top-color:rgba(255,251,239,.35)}
.tcard.rookie::after{display:none}

/* ================= scouting report ================= */
.scout-list{list-style:none; margin:clamp(28px,4vw,44px) 0 0; padding:0; max-width:820px}
.scout-list li{
  display:flex; gap:18px; align-items:flex-start; padding:20px 4px;
  border-bottom:2px dashed var(--paperline);
}
.scout-ic{flex:none; width:38px; height:38px; margin-top:2px}
.scout-list h3{font-family:var(--body); font-weight:700; font-size:19px; line-height:1.3}
.scout-list p{font-size:16px; color:var(--ink-soft); margin-top:3px}
.scout-note{
  margin-top:26px; max-width:820px; background:var(--card); border:2.5px solid var(--ink);
  border-radius:14px; box-shadow:var(--shadow); padding:20px 24px;
  font-size:16.5px;
}
.scout-note .marker{color:var(--kick-text); margin-right:8px}

/* ================= star chart (navy) ================= */
.chart{background:var(--navy); color:#FFFBEF; border-top:2.5px solid #232A46; border-bottom:2.5px solid #232A46}
.chart .eyebrow{color:var(--sun)}
.chart h2.big{color:#FFFBEF}
.chart .sub{color:rgba(255,251,239,.75)}
.chart-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,4.5vw,60px); margin-top:clamp(28px,4vw,44px); align-items:start}
.chart-rows{display:flex; flex-direction:column}
.crow{
  display:grid; grid-template-columns:40px 1fr 52px; gap:14px; align-items:center;
  text-align:left; padding:13px 12px; border-radius:12px; width:100%;
  border:2px solid transparent; transition:background .15s ease, border-color .15s ease;
}
@media (hover:hover){ .crow:hover{background:rgba(255,251,239,.07)} }
.crow[data-active="true"]{background:rgba(255,251,239,.1); border-color:rgba(255,200,56,.75)}
.crow .cn{
  width:34px; height:34px; border-radius:50%; border:2.5px solid rgba(255,251,239,.5);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-weight:800; font-size:15px;
}
.crow[data-done="true"] .cn{background:var(--sun); color:#232A46; border-color:var(--sun)}
.crow .ct{font-weight:700; font-size:17px; line-height:1.25}
.crow .cs{width:44px; height:44px; justify-self:center}
.crow .cs svg{width:100%; height:100%; display:block}
.crow .star-empty{opacity:.4}
.star-pop{animation:starPop .5s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes starPop{0%{transform:scale(0) rotate(-45deg)}70%{transform:scale(1.28) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.chart-panel{
  position:sticky; top:96px; background:#FFFBEF; color:#232A46; border:2.5px solid #232A46;
  border-radius:16px; box-shadow:7px 7px 0 rgba(0,0,0,.4); padding:30px 30px 26px;
  min-height:300px; display:flex; flex-direction:column;
}
.chart-panel .cp-step{font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--kick); margin-bottom:10px}
.chart-panel h3{font-size:clamp(24px,2.6vw,31px); font-weight:800; line-height:1.05; margin-bottom:10px}
.chart-panel p{font-size:17px; color:rgba(35,42,70,.78); max-width:46ch}
.chart-panel .marker{display:block; margin-top:14px; font-size:16px; color:var(--royal); transform:rotate(-1.5deg)}
.cp-actions{margin-top:auto; padding-top:24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.confetti-host{position:relative}
.cf{position:absolute; width:8px; height:12px; top:-12px; pointer-events:none; animation:cfall var(--t) ease-in forwards; border-radius:2px}
@keyframes cfall{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--dx),var(--dy)) rotate(var(--r)); opacity:0}}

/* ================= permission slip (on grass) ================= */
.fitg{background:#1F7A33; border-top:2.5px solid #232A46; border-bottom:2.5px solid #232A46}
.fitg h2.big{color:#FFFBEF}
.fitg .eyebrow{color:#FFFBEF}
.fitg .eyebrow .dot{background:var(--sun)}
.fitg .sub{color:rgba(255,251,239,.85)}
.slip-wrap{max-width:780px; margin:clamp(30px,4vw,48px) auto 0}
.slip{
  position:relative; background:#FFFEFA; color:#232A46; border:2.5px solid #232A46; border-radius:6px;
  box-shadow:8px 9px 0 rgba(0,0,0,.32);
}
.slip-clip{position:absolute; top:-21px; left:50%; transform:translateX(-50%); width:112px; z-index:4; pointer-events:none}
.slip .slip-head{border-bottom-color:#232A46}
.slip .slip-head .f{color:rgba(35,42,70,.7)}
.slip .slip-prog{background:rgba(35,42,70,.14)}
.slip .slip-q{color:var(--royal)}
.slip h3{color:#232A46}
.slip .opts button{background:#FFF6DE; border-color:#232A46; color:#232A46}
.slip .opts .box{border-color:#232A46; background:#FFFFFF}
@media (hover:hover){ .slip .opts button:hover{box-shadow:3px 3px 0 #232A46} }
.slip .slip-back{color:#232A46}
.slip .slip-result p{color:rgba(35,42,70,.82)}
.slip .slip-sign{color:rgba(35,42,70,.7); border-top-color:rgba(59,91,219,.25)}
.opts button:focus-visible{transform:translate(-2px,-2px); box-shadow:3px 3px 0 #232A46}
.opts button:focus-visible .box::after{
  content:"✓"; position:absolute; inset:-7px auto auto -1px;
  font-family:var(--marker); font-size:24px; color:var(--kick);
}
@media (hover:hover){ .opts button:hover .box::after{
  content:"✓"; position:absolute; inset:-7px auto auto -1px;
  font-family:var(--marker); font-size:24px; color:var(--kick);
} }
.opts button.picked{background:#FFE9B8}
.opts button.picked .box::after{
  content:"✓"; position:absolute; inset:-7px auto auto -1px;
  font-family:var(--marker); font-size:24px; color:var(--kick);
  animation:checkPop .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes checkPop{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
.opts.locked{pointer-events:none}
.slip-stub{
  margin:0 clamp(24px,4vw,40px); padding:14px 2px 18px; border-top:2px dashed rgba(59,91,219,.3);
  font-family:var(--marker); font-size:15px; color:rgba(35,42,70,.68); transform:rotate(-.4deg);
}
.stamp.t-kick{color:var(--kick)}
.stamp.t-royal{color:var(--royal)}
.stamp.t-ink{color:#232A46}
.stamp.t-slate{color:#5A6382}
.verdict.t-kick{color:var(--kick)}
.verdict.t-royal{color:var(--royal)}
.verdict.t-ink{color:#232A46}
.verdict.t-slate{color:#5A6382}
.slip-head{padding:20px 28px 16px; border-bottom:2.5px solid var(--ink); display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap}
.slip-head .t{font-family:var(--marker); font-size:clamp(18px,2.4vw,24px); transform:rotate(-1deg)}
.slip-head .f{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.slip-prog{height:5px; background:var(--paperline)}
.slip-prog i{display:block; height:100%; width:0%; background:var(--kick); transition:width .3s ease}
.slip-body{padding:clamp(26px,4vw,40px) clamp(24px,4vw,40px)}
.slip-q{font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--royal); display:block; margin-bottom:10px}
.slip h3{font-family:var(--disp); font-weight:800; font-size:clamp(23px,3vw,29px); letter-spacing:-.01em; margin-bottom:22px; line-height:1.06}
.opts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.opts button{
  width:100%; display:flex; gap:14px; align-items:flex-start; text-align:left;
  font-size:17px; font-weight:500; padding:14px 16px;
  border:2px solid var(--ink); border-radius:10px; background:var(--milk);
  transition:transform .12s ease, box-shadow .12s ease;
}
@media (hover:hover){ .opts button:hover{transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink)} }
.opts .box{
  flex:none; width:22px; height:22px; margin-top:2px; border:2.5px solid var(--ink); border-radius:5px;
  position:relative; background:var(--card);
}
@media (hover:hover){ .opts button:hover .box::after{
  content:"✓"; position:absolute; inset:-7px auto auto -1px;
  font-family:var(--marker); font-size:24px; color:var(--kick);
} }
.slip-back{margin-top:22px; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.6}
@media (hover:hover){ .slip-back:hover{opacity:1} }
.fade-in{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.slip-result{position:relative; padding-right:8px}
.slip-result h3{margin-bottom:12px}
.slip-result .verdict{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--kick); display:block; margin-bottom:10px}
.slip-result p{font-size:17.5px; color:var(--ink-soft); max-width:52ch}
.slip-sign{margin-top:24px; padding-top:16px; border-top:2px dashed var(--paperline); display:flex; gap:12px; align-items:baseline; font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft)}
.slip-sign .marker{font-size:22px; color:var(--royal); text-transform:none; letter-spacing:0; transform:rotate(-2deg)}
.slip-acts{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap}
.slip-acts-top{margin-top:18px; align-items:center; gap:8px 18px}
.slip-call{display:inline-block; padding:10px 0; font-weight:700; font-size:16.5px; color:#3350C4; white-space:normal; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}
.slip-call span{white-space:nowrap}
.slip .slip-result p.slip-help{margin-top:10px; font-size:15.5px; color:rgba(35,42,70,.68)}
.slip-result .slip-again{margin-top:8px}
.slip-restart{display:inline-flex; align-items:center; min-height:44px; padding:0 12px 0 0; background:none; border:0; font:inherit; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#232A46; opacity:.65; cursor:pointer}
@media (hover:hover){ .slip-restart:hover{opacity:1} }
.stamp{
  position:absolute; top:-6px; right:-4px; z-index:3; pointer-events:none;
  font-family:var(--disp); font-weight:800; font-size:clamp(19px,2.6vw,26px);
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  padding:10px 18px; border:4px solid currentColor; border-radius:8px;
  transform:rotate(-10deg); opacity:.92; mix-blend-mode:multiply;
}
.stamp.in{animation:stampIn .38s cubic-bezier(.2,1.4,.4,1)}
@keyframes stampIn{0%{transform:scale(2.4) rotate(-10deg); opacity:0}65%{transform:scale(.94) rotate(-10deg); opacity:1}100%{transform:scale(1) rotate(-10deg)}}
.shake{animation:shake .3s ease}
@keyframes shake{0%,100%{transform:none}30%{transform:translate(2px,1px) rotate(.3deg)}60%{transform:translate(-2px,-1px) rotate(-.3deg)}}

/* ================= faq ================= */
.faq{max-width:840px}
.faq-item{border-bottom:2px dashed var(--paperline)}
.faq-item:last-child{border-bottom:0}
.faq-q{width:100%; display:flex; justify-content:space-between; align-items:baseline; gap:20px; text-align:left; padding:22px 2px; font-weight:700; font-size:19.5px}
.faq-q .fx{font-family:var(--disp); font-weight:800; font-size:22px; color:var(--kick-text); transition:transform .25s ease; flex:none; line-height:1}
.faq-item[data-open="true"] .fx{transform:rotate(45deg)}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease}
.faq-item[data-open="true"] .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 2px 24px; font-size:17px; color:var(--ink-soft); max-width:64ch}

/* ================= hello (sun) ================= */
.hello{background:var(--sun); color:#232A46; border-top:2.5px solid #232A46; text-align:center}
.hello .eyebrow{color:#232A46; justify-content:center}
.hello h2.big{color:#232A46; max-width:18ch; margin:0 auto}
.nametag{
  width:min(360px,88%); margin:38px auto 0; background:#FFFFFF; border:2.5px solid #232A46;
  border-radius:18px; box-shadow:7px 7px 0 #232A46; overflow:hidden;
  --tilt:-2deg; transform:rotate(var(--tilt)); color:#232A46;
}
.nametag-top{background:var(--kick); color:#FFF7EA; padding:14px 10px 10px}
.nametag-top b{font-family:var(--disp); font-weight:800; font-size:34px; letter-spacing:.02em; display:block; line-height:1}
.nametag-top span{font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; opacity:.9}
.nametag-body{padding:26px 26px 30px}
.nametag-body .line{border-bottom:3px solid #232A46; padding-bottom:6px}
.nametag-body .marker{font-size:26px; color:var(--royal); transform:rotate(-1deg); display:inline-block}
.hello .acts{display:flex; gap:16px; justify-content:center; margin-top:36px; flex-wrap:wrap}
.hello .note{margin-top:22px; font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(35,42,70,.65)}

/* ================= footer ================= */
.footer{background:var(--navy); color:#FFFBEF; border-top:2.5px solid #232A46; padding:60px 0 36px}
.footer-top{display:flex; justify-content:space-between; gap:44px; flex-wrap:wrap; padding-bottom:40px; border-bottom:2px dashed rgba(255,251,239,.25)}
.footer .logo b{color:#FFFBEF; font-size:22px}
.footer .tag{margin-top:14px; font-size:16.5px; color:rgba(255,251,239,.72); max-width:32ch; font-style:italic}
.fcols{display:flex; gap:clamp(34px,6vw,90px); flex-wrap:wrap}
.fcol span{display:block; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sun); margin-bottom:12px}
.fcol p, .fcol a{display:block; font-size:15.5px; color:rgba(255,251,239,.85); text-decoration:none; line-height:1.75}
@media (hover:hover){ .fcol a:hover{color:var(--sun)} }
.footer-bottom{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:24px}
.footer-bottom span{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,251,239,.5)}

/* ================= stays / goes away ================= */
.sg{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:34px}
.sg-col{background:var(--card); border:2.5px solid var(--ink); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.sg-head{padding:14px 22px; font-family:var(--disp); font-weight:800; font-size:19px; letter-spacing:.01em; color:#FFF7EA; display:flex; align-items:center; gap:10px}
.sg-col.stays .sg-head{background:var(--grass)}
.sg-col.goes .sg-head{background:var(--kick)}
.sg-col ul{list-style:none; margin:0; padding:10px 22px 18px}
.sg-col li{display:flex; gap:12px; align-items:baseline; padding:9px 0; font-size:16.5px; border-bottom:1.5px dashed var(--paperline)}
.sg-col li:last-child{border-bottom:none}
.sg-col li .ic{font-weight:800; flex:none; width:20px; text-align:center}
.sg-col.stays li .ic{color:var(--grass)}
.sg-col.goes li .ic{color:var(--kick-text)}
.sg-col.goes li{color:var(--ink-soft)}
.sg-col.goes li s{text-decoration-color:rgba(214,74,49,.6); text-decoration-thickness:2px}

/* ================= founder photos ================= */
.note-photos{display:flex; gap:clamp(20px,3vw,38px); justify-content:center; align-items:flex-start; flex-wrap:wrap; margin-bottom:clamp(34px,4vw,54px)}
.photo{
  position:relative; margin:0; background:#FFFFFF; border:2.5px solid #232A46; border-radius:8px;
  padding:10px 10px 12px; box-shadow:7px 7px 0 rgba(35,42,70,.3); width:min(252px,44%);
  --tilt:-2.5deg; transform:rotate(var(--tilt)); transition:transform .25s ease;
}
@media (hover:hover){ .photo:hover{transform:rotate(0deg) scale(1.02)} }
.photo.p2{--tilt:2.2deg; margin-top:28px}
.photo img{display:block; width:100%; border-radius:4px; border:1px solid rgba(35,42,70,.15)}
.photo .tape{position:absolute; top:-13px; left:50%; width:92px; height:24px; background:var(--tape); transform:translateX(-50%) rotate(-3deg); border-left:1px dashed rgba(0,0,0,.12); border-right:1px dashed rgba(0,0,0,.12); z-index:2}
.photo figcaption{font-family:var(--marker); font-size:15.5px; margin-top:10px; text-align:center; color:#232A46; transform:rotate(-1deg)}
@media (max-width:700px){ .photo{width:min(240px,72%)} .photo.p2{margin-top:0} }
.staffcard-body img{width:56px; height:56px; object-fit:cover; border-radius:12px; border:2.5px solid #232A46; flex:none}

/* ================= founder note ================= */
.note-card{
  position:relative; max-width:720px; margin:0 auto; background:var(--card);
  border:2.5px solid var(--ink); border-radius:14px; box-shadow:var(--shadow-lg);
  padding:clamp(30px,4.5vw,46px); --tilt:-.5deg; transform:rotate(var(--tilt));
}
.note-card .tape{position:absolute; top:-13px; left:50%; width:110px; height:26px; background:var(--tape); transform:translateX(-50%) rotate(-2deg); border-left:1px dashed rgba(0,0,0,.12); border-right:1px dashed rgba(0,0,0,.12)}
.note-card p{font-size:18px; line-height:1.7; color:var(--ink); margin-bottom:16px}
.note-card p:last-of-type{margin-bottom:0}
.note-sig{display:flex; align-items:baseline; gap:14px; margin-top:22px; flex-wrap:wrap}
.note-sig .marker{font-size:30px; color:var(--royal-text); transform:rotate(-2deg)}
.note-sig small{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)}

/* ================= rise-in ================= */
.rise{opacity:0; transform:translateY(18px) rotate(calc(var(--tilt, 0deg) + 1deg))}
.rise.in{opacity:1; transform:translateY(0) rotate(var(--tilt, 0deg)); transition:opacity .5s ease var(--d,0s), transform .55s cubic-bezier(.22,1,.36,1) var(--d,0s)}
@keyframes heroIn{from{opacity:0; transform:translateY(16px)}}
.hero-copy > *{animation:heroIn .6s cubic-bezier(.22,1,.36,1) backwards}
.hero-copy > *:nth-child(1){animation-delay:.05s}
.hero-copy > *:nth-child(2){animation-delay:.14s}
.hero-copy > *:nth-child(3){animation-delay:.23s}
.hero-copy > *:nth-child(4){animation-delay:.32s}
.hero-copy > *:nth-child(5){animation-delay:.41s}

/* ================= nametag input ================= */
.nametag-body input{
  display:block; width:100%; margin:0; padding:0; border:none; border-radius:0; background:transparent; text-align:center; outline:none;
  -webkit-appearance:none; appearance:none; line-height:1.3;
  font-family:var(--marker); font-size:26px; color:var(--royal); transform:rotate(-1deg); transform-origin:center;
}
.tag-meas{position:absolute; left:-9999px; top:0; visibility:hidden; white-space:pre; font-family:var(--marker); font-size:26px}
.nametag-body input::placeholder{color:var(--royal); opacity:.5}
.nametag-body input:focus{outline:none}
.nametag:focus-within{box-shadow:7px 7px 0 #232A46, 0 0 0 4px #3B5BDB}
.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}

/* ================= draggable stickers ================= */
.stick{transition:opacity .3s ease}
.stick.grab{pointer-events:auto; cursor:grab; touch-action:none}
.stick.grab:active{cursor:grabbing}
@media (hover:hover){ .stick.grab:hover{filter:drop-shadow(3px 5px 1px rgba(35,42,70,.35))} }
.stick.ghost{opacity:.85; z-index:6; pointer-events:none}
.hero.aiming{cursor:crosshair}
.hero.aiming .hero-copy a{pointer-events:none}
.sticker-btn.peeled{outline:2.5px dashed #232A46; outline-offset:2px; border-radius:50%}
.sticker-btn.peeled svg{opacity:.22}
button.mq-item{cursor:pointer; border-radius:6px; transition:color .14s ease}
@media (hover:hover){ button.mq-item:hover{color:var(--sun)} }
.mq-run{display:flex}
@media (prefers-reduced-motion: reduce){ .mq-run[aria-hidden="true"]{display:none} }

/* ================= hello objects / staff card ================= */
.hello-objects{display:flex; gap:38px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:38px}
.hello-objects .nametag{margin:0}
.staffcard{
  width:min(330px,88%); background:#FFFFFF; border:2.5px solid #232A46; border-radius:18px;
  box-shadow:7px 7px 0 #232A46; overflow:hidden; --tilt:2deg; transform:rotate(var(--tilt)); color:#232A46; text-align:left;
}
.staffcard-top{background:var(--royal); color:#FFFBEF; padding:9px 14px; font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.34em; text-transform:uppercase; text-align:center}
.staffcard-body{padding:18px 20px; display:flex; gap:16px; align-items:center}
.staffcard-body svg{width:54px; height:54px; flex:none}
.staffcard-name{font-weight:700; font-size:18px; line-height:1.2}
.staffcard-meta{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(35,42,70,.68); margin-top:5px; line-height:1.65}
.staffcard-note{border-top:2px dashed rgba(35,42,70,.22); padding:9px 14px 11px; font-family:var(--marker); font-size:15.5px; color:var(--royal); transform:rotate(-1deg)}

/* ================= sq ellipse ================= */
.sqe{position:relative; display:inline-block; white-space:nowrap}
.sqe svg{position:absolute; left:-6%; top:-14%; width:112%; height:132%; overflow:visible; pointer-events:none}
.sqe path{fill:none; stroke:var(--kick); stroke-width:6; stroke-linecap:round; stroke-dasharray:1400; stroke-dashoffset:1400}
.sqe.drawn path{transition:stroke-dashoffset 1.1s ease .25s; stroke-dashoffset:0}

/* ================= candor + note extras + copy button ================= */
.candor{margin-top:26px; background:#FFFBEF; color:#232A46; border:2.5px solid #232A46; border-radius:14px; box-shadow:6px 6px 0 #232A46; padding:20px 24px; font-size:16.5px}
.candor .marker{color:var(--kick); margin-right:8px}
.note-mail{margin-top:6px; font-size:15px}
.note-mail a{font-weight:700; color:var(--royal-text)}
.copied{font-family:var(--marker); color:#1F7A33}
.slip .btn:not(.btn-kick), .chart-panel .btn:not(.btn-kick):not(.btn-sun){
  background:#FFFFFF; color:#232A46; border-color:#232A46; box-shadow:4px 4px 0 #232A46;
}
@media (hover:hover){ .slip .btn:not(.btn-kick):hover, .chart-panel .btn:not(.btn-kick):not(.btn-sun):hover{box-shadow:6px 6px 0 #232A46} }
.slip .btn:not(.btn-kick):active, .chart-panel .btn:not(.btn-kick):not(.btn-sun):active{box-shadow:0 0 0 #232A46}
.faq-a > div{visibility:hidden; transition:visibility .3s}
.faq-item[data-open="true"] .faq-a > div{visibility:visible}
.btn:active, .opts button:active, .sticker-btn:active, .crow:active{transition-duration:.05s}

/* ================= responsive ================= */
@media (max-width:1140px){
}
@media (max-width:1020px){
  .score-grid{grid-template-columns:1fr 1fr}
  .chart-grid{grid-template-columns:1fr}
  .chart-panel{position:static}
}
@media (max-width:700px){
  .nav-links{display:none}
  .promise-grid{grid-template-columns:1fr}
  .sg{grid-template-columns:1fr}
  .tcard-grid{grid-template-columns:1fr}
  .tcard.rookie{grid-column:auto}
  .score-grid{grid-template-columns:1fr 1fr; gap:16px}
  .sheet{position:relative; right:auto; bottom:auto; width:calc(100% - 40px); margin:40px 20px 92px; box-shadow:4px 4px 0 #232A46}
  .hero .wrap{padding-bottom:84px}
  .crow .ct{font-size:15.5px}
}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .mq{cursor:auto}
  .mq-track{width:auto; flex-wrap:wrap; transform:none !important}
  .mq-run{flex-wrap:wrap; justify-content:center; row-gap:6px}
  .sq path, .sqe path{stroke-dashoffset:0}
  .tcard.rookie:hover .rookie-ants rect, .tcard.rookie:focus-visible .rookie-ants rect{animation:none}
}
@media (max-width:520px){
  .sqe{white-space:normal}
  .sqe svg{display:none}
}

/* ===== v9b: verified mobile audit fixes ===== */
/* buttons on always-light surfaces keep navy ink in dark mode */
.hello .btn, .slip .btn, .chart-panel .btn{border-color:#232A46; box-shadow:4px 4px 0 #232A46}
@media (hover:hover){ .hello .btn:hover, .slip .btn:hover, .chart-panel .btn:hover{box-shadow:6px 6px 0 #232A46} }
.hello .btn:active, .slip .btn:active, .chart-panel .btn:active{box-shadow:0 0 0 #232A46}
/* quiz verdict label takes its tier colour */
.slip-result .verdict.t-royal{color:var(--royal)}
.slip-result .verdict.t-ink{color:#232A46}
.slip-result .verdict.t-slate{color:#5A6382}
/* photo tape always sits on a white print */
.photo .tape{background:rgba(235,215,160,.85)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nav .logo svg rect:first-child{stroke:#F3EEDD}
  :root:not([data-theme="light"]) .mq{border-bottom-color:rgba(243,238,221,.22)}
  :root:not([data-theme="light"]) .chart{border-top-color:rgba(243,238,221,.22); border-bottom-color:rgba(243,238,221,.22)}
  :root:not([data-theme="light"]) .photo{box-shadow:7px 7px 0 rgba(0,0,0,.55)}
  :root:not([data-theme="light"]) .pcard .tape, :root:not([data-theme="light"]) .note-card .tape{background:rgba(235,215,160,.55)}
}
:root[data-theme="dark"] .nav .logo svg rect:first-child{stroke:#F3EEDD}
:root[data-theme="dark"] .mq{border-bottom-color:rgba(243,238,221,.22)}
:root[data-theme="dark"] .chart{border-top-color:rgba(243,238,221,.22); border-bottom-color:rgba(243,238,221,.22)}
:root[data-theme="dark"] .photo{box-shadow:7px 7px 0 rgba(0,0,0,.55)}
:root[data-theme="dark"] .pcard .tape, :root[data-theme="dark"] .note-card .tape{background:rgba(235,215,160,.55)}

/* sentence-aware headline breaks; nav and trust line on tablets and landscape phones */
.snt{display:inline-block}
.trust i{font-style:normal}
.note-sig small, .hello .note{text-wrap:balance}
.nav .logo{min-height:44px}
.nav-links a{white-space:nowrap}
@media (max-width:860px){ .nav-links{display:none} }
@media (min-width:701px) and (max-width:1020px){
  .hero-copy > p:last-child{max-width:calc(100% - 300px)}
  .trust span{display:block}
  .trust span::first-letter{text-transform:uppercase}
  .trust i{display:none}
}
@media (hover:none) and (orientation:landscape) and (max-height:430px){ .nav{position:static} section{scroll-margin-top:0} }
/* step chart docks under the tapped row on stacked layouts */
.chart-rows > .chart-panel{margin:10px 0 16px; min-height:0}
@media (max-width:1020px){ .chart-grid{overflow-anchor:none} #cpBtn{min-width:206px} }

@media (max-width:700px){
  .note-photos{flex-wrap:nowrap; gap:14px}
  .photo{width:47%; padding:7px 7px 9px}
  .photo.p2{margin-top:22px}
  .photo figcaption{font-size:13px}
  .slip-back{display:inline-flex; align-items:center; min-height:44px; margin-top:10px; padding-right:12px}
  .fcol a{display:flex; align-items:center; min-height:44px; line-height:1.3}
  .note-mail a{display:inline-block; padding:10px 0}
  .tcard-top,.tcard-foot,.staffcard-meta,.note-sig small,.slip-head .f,.sheet-count,.nametag-top span{font-size:12px}
  .slip-head .f{letter-spacing:.09em}
  .pcard .badge,.fcol span{font-size:12.5px}
  .tcard.rookie .tcard-top,.tcard.rookie .tcard-art,.tcard.rookie .tcard-foot{margin-inline:5px}
  .tcard.rookie .tcard-top,.tcard.rookie .tcard-art{border-bottom-color:rgba(255,251,239,.45)}
  .sheet-tip{font-size:14.5px}
}
@media (max-width:520px){
  h2.big{font-size:clamp(28px,8.8vw,38px)}
  .photo figcaption, .sg li span{text-wrap:balance}
  .slip-sign{flex-wrap:wrap; align-items:center; gap:6px 12px}
  .slip-sign span{white-space:nowrap}
  /* box score: one column, number beside the words, markers legible */
  .score-grid{grid-template-columns:1fr; gap:14px}
  .score{display:grid; grid-template-columns:74px 1fr; column-gap:14px; align-items:center; padding:16px 18px}
  .score .num{grid-row:1 / span 2; font-size:46px; text-align:center}
  .score .lbl{margin-top:0}
  .score .marker{grid-column:2; margin-top:6px; font-size:17px}
  .note-card .note-mail{font-size:15px}
  .note-mail a{overflow-wrap:anywhere}
  .hello h2.big{font-size:clamp(27px,8.6vw,36px); max-width:none}
  .hello h2.big .sqe{white-space:nowrap}
  .hero-ctas .btn,.hello .acts .btn,.slip-acts .btn,.cp-actions .btn{flex:1 1 auto; text-align:center}
  .hello .acts .btn-sm{font-size:17px; padding:14px 26px; border-radius:12px}
  #cpCta{order:-1}
  /* dot-separated lines: one claim per line, never a stranded dot */
  .trust span{display:block}
  .trust span::first-letter{text-transform:uppercase}
  .trust i{display:none}
  .hello .note .seg{display:block}
  .hello .note .dot{display:none}
  .nametag-body{padding:22px 16px 26px}
}
@media (max-width:360px){
  .note-card .note-mail{font-size:13.5px}
  .staffcard,.hello-objects .nametag{width:100%}
  .staffcard-body{padding:16px 14px; gap:12px}
  .nav .wrap{gap:8px; padding:0 14px}
  .nav .logo{gap:8px}
  .nav .logo svg{width:28px; height:28px}
  .nav .logo b{font-size:15px}
  .nav .btn{padding:8px 12px}
}

/* ===== v9c: regression-pass fixes ===== */
.note-photos{margin-top:clamp(28px,4vw,44px)}
@media (max-width:799px){ .hello-objects .staffcard{order:-1} }
@media (max-width:660px){
  /* quiz result: the stamp gets its own row instead of landing on the headline */
  .slip-result{padding-top:78px; padding-right:0}
  .stamp{top:2px; right:auto; left:0; font-size:17px; padding:8px 14px; border-width:3px}
}
@media (hover:none){
  .fcol a{display:flex; align-items:center; min-height:44px; line-height:1.3}
  .note-mail a{display:inline-block; padding:10px 0}
}
@media (max-width:520px){
  .staffcard{width:min(330px,100%)}
  .hello-objects .nametag{width:min(360px,100%)}
  .staffcard-meta{white-space:nowrap}
}
@media (max-width:360px){ .staffcard-meta{letter-spacing:.05em} }
.nametag-body input::placeholder{opacity:.72}
/* years line: one line where it fits (tablets), a clean two-line break elsewhere */
.score .marker.yrs .yj{display:none; font-style:normal}
@media (min-width:768px) and (max-width:1020px){ .score .marker.yrs br{display:none} .score .marker.yrs .yj{display:inline} }
/* ===== v9e ===== */
@media (max-width:319px){ .staffcard-meta{white-space:normal} }
@media (max-width:700px){ .sheet-count{min-height:3.2em} }
/* ===== v9f ===== */
@media (min-width:1021px){ .tcard-art{height:150px} .tcard-body h3{font-size:22px} .tcard-body p{font-size:16px} }
/* ===== v9g: brand cards link out ===== */
a.tcard .tcard-foot{display:flex; justify-content:space-between; align-items:center; gap:10px}
a.tcard .tcard-foot .go{color:var(--kick); white-space:nowrap; transition:transform .15s ease}
@media (hover:hover){ a.tcard:not(.rookie):hover .tcard-foot .go{transform:translate(2px,-2px)} }
.lineup a.tcard:focus-visible{outline:3px solid var(--sun); outline-offset:4px; border-radius:16px}
/* ===== v9h ===== */
.score .lbl .hl{font-weight:800; color:var(--ink); white-space:nowrap; text-decoration:underline; text-decoration-color:var(--sun); text-decoration-thickness:3px; text-underline-offset:4px}
.score.wide .num{font-size:clamp(34px,3.5vw,46px); line-height:1.3; white-space:nowrap}
.score .marker.yrs{font-size:17px}
@media (max-width:1020px){ .score.wide .num{font-size:clamp(34px,5.4vw,46px)} }
@media (max-width:520px){ .score.wide{grid-template-columns:auto 1fr} .score.wide .num{font-size:32px; line-height:1; text-align:left} }
/* ===== v10a ===== */
/* 13b micro-type: nothing meant to be read under 13px; chrome labels 12.5px */
.hero .trust{margin-top:20px; font-size:15px; font-weight:600; color:rgba(35,42,70,.84); letter-spacing:.02em}
.tcard-top,.tcard-foot,.sheet-count,.pcard .badge,.slip-head .f,.slip-q,.slip-result .verdict,.slip-sign,.chart-panel .cp-step,.nametag-top span,.note-sig small{font-size:12.5px}
.tcard-top{letter-spacing:.06em}
.tcard-foot{letter-spacing:.1em}
.tcard-meta,.staffcard-meta{font-size:13px}
.staffcard-meta{letter-spacing:.06em}
.nametag-top span{opacity:1}
.hello .note{color:rgba(35,42,70,.84)}
@media (max-width:700px){ .tcard-top,.tcard-foot,.note-sig small,.slip-head .f,.sheet-count,.nametag-top span{font-size:12.5px} .tcard-meta,.staffcard-meta{font-size:13px} }
@media (max-width:360px){ .staffcard-meta{font-size:12.5px; letter-spacing:.03em} }

/* 13c laptop viewports: CTAs and the trust line sit above the fold at 1366x768 and 1280x720 (phones untouched) */
.hero .trust{width:max-content; max-width:calc(100vw - 2 * clamp(20px,4vw,44px))}
@media (max-width:1240px){ .hero .trust{width:auto; max-width:none} }
@media (min-width:1021px) and (max-width:1240px){
  .trust span{display:block}
  .trust span::first-letter{text-transform:uppercase}
  .trust i{display:none}
}
@media (min-width:1021px) and (max-height:820px){
  .hero .wrap{padding-top:44px; padding-bottom:112px}
  .hero h1{font-size:clamp(60px,6.2vw,84px)}
  .hero .sub{margin-top:16px; font-size:19.5px}
  .hero-ctas{margin-top:24px}
  .hero .trust{margin-top:16px}
}
@media (min-width:1021px) and (max-height:700px){
  .hero .wrap{padding-top:30px; padding-bottom:96px}
  .hero h1{font-size:clamp(54px,5.4vw,72px)}
  .hero .eyebrow{margin-bottom:10px}
}

/* 9 founder note follows #why on the same paper */
#note{padding-top:0}

/* 13d scouting report: the disqualifier is its own dashed box */
.scout-list li:last-child{border-bottom:none}
.scout-nofit{display:flex; gap:18px; align-items:flex-start; max-width:820px; margin-top:22px; padding:18px 20px; border:2.5px dashed var(--kick-text); border-radius:14px}
.scout-nofit .nf-label{display:block; font-weight:700; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--kick-text); margin-bottom:4px}
.scout-nofit h3{font-family:var(--body); font-weight:700; font-size:19px; line-height:1.3}
.scout-nofit p{font-size:16px; color:var(--ink-soft); margin-top:3px}

/* 7 star chart: static rows with their text showing */
.chart-rows{list-style:none; margin:0; padding:0}
.crow{grid-template-columns:40px 1fr 48px; column-gap:16px; row-gap:4px; align-items:start; padding:18px 8px; border:0; border-bottom:2px dashed rgba(255,251,239,.18); border-radius:0; cursor:default}
.crow:last-child{border-bottom:0}
@media (hover:hover){ .crow:hover{background:transparent} }
.crow .cn{grid-column:1; grid-row:1 / span 3}
.crow .ct{grid-column:2; grid-row:1; font-family:var(--disp); font-weight:800; font-size:21px; line-height:1.15; color:#FFFBEF; min-height:34px; display:flex; align-items:center}
.crow .cb{grid-column:2; grid-row:2; font-size:16.5px; line-height:1.55; color:rgba(255,251,239,.84); max-width:56ch}
.crow .cnote{grid-column:2; grid-row:3; justify-self:start; font-size:16px; color:var(--sun); transform:rotate(-1deg); transform-origin:left center; margin-top:4px}
.crow .cs{grid-column:3; grid-row:1 / span 3; width:44px; height:44px; justify-self:end}
.chart-panel{min-height:0}
.cp-count{font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:rgba(35,42,70,.75)}
@media (max-width:700px){
  .crow{grid-template-columns:34px 1fr 36px; column-gap:12px; padding:16px 2px}
  .crow .ct{font-size:19px}
  .crow .cs{grid-row:1; width:34px; height:34px}
  .crow .cb,.crow .cnote{grid-column:2 / -1}
  .crow .cb{font-size:16px}
}

/* 10 contact form on the always-light sun wall */
.hello{color-scheme:light}
.hello h2.big{max-width:20ch}
.hello .tag-note{margin-top:20px; text-transform:none; letter-spacing:.02em; font-family:var(--marker); font-size:16px; font-weight:400; color:rgba(35,42,70,.84)}
.hello-form{max-width:720px; margin:30px auto 0; text-align:left; scroll-margin-top:84px}
.hello-form h3{font-size:clamp(22px,2.6vw,27px); font-weight:800; line-height:1.1; margin-bottom:18px; outline:none}
.hello-form .btn{justify-self:start}
.hello-form label small{font-size:14px; opacity:.85}
.hello-form .fine a{color:#232A46; font-weight:700}
.fit-note{font-size:15px; font-weight:600; color:#1F7A33}
.fit-note[hidden]{display:none}
.fit-note button{font-size:15px; font-weight:700; color:#232A46; text-decoration:underline; text-underline-offset:3px; min-height:44px; padding:0 4px}
.hello-or{margin-top:34px; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:rgba(35,42,70,.84)}
.hello .acts{margin-top:16px}
@media (max-width:520px){ .hello-form .btn{justify-self:stretch; width:100%} .hello h2.big{max-width:none} }

/* 13f nametag reads as a field you can type in */
.nametag-body .line{position:relative; border-bottom:3px dashed rgba(35,42,70,.62); background:rgba(59,91,219,.07); border-radius:8px 8px 0 0; padding:9px 30px 6px; cursor:text}
.nametag-body .line::after{content:""; position:absolute; right:7px; bottom:9px; width:18px; height:18px; pointer-events:none; opacity:.7;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232A46' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.2-4.6L16.6 4a2 2 0 0 1 2.8 0l.6.6a2 2 0 0 1 0 2.8L8.6 18.8 4 20z'/%3E%3Cpath d='M14.5 6.1l3.4 3.4'/%3E%3C/svg%3E") center/contain no-repeat}
.nametag-body .line:focus-within{border-bottom-style:solid; border-bottom-color:#232A46; background:rgba(59,91,219,.11)}
.nametag-body .line:focus-within::after{opacity:0}
.nametag-body input{cursor:text; caret-color:#C13E27}
.nametag-body input::placeholder{opacity:.6}

/* 14 phones: compact sticker sheet; the lineup becomes one snap-scrolling row */
.swipe-hint{display:none}
@media (max-width:700px){
  .hero .wrap{padding-bottom:30px}
  .sheet{width:auto; max-width:276px; margin:0 20px 44px; padding:12px 14px 10px}
  .sheet-tip{margin-bottom:8px}
  .swipe-hint{display:block; margin-top:14px; font-size:16px; color:var(--sun); transform:rotate(-1deg); transform-origin:left center}
  .tcard-grid{display:flex; gap:14px; margin-top:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-inline:calc(-1 * clamp(20px,4vw,44px)); padding:8px clamp(20px,4vw,44px) 18px; scroll-padding-inline:clamp(20px,4vw,44px)}
  .tcard-grid::-webkit-scrollbar{display:none}
  .tcard-grid > .tcard{flex:0 0 min(78%,300px); scroll-snap-align:start}
  .tcard-foot{letter-spacing:.06em}
}
/* ===== v10c ===== */
/* T08 measured contrast. Text green: #1E7B34 on #FFFBEF 5.2:1, #6FD08A on #14192C 9:1 (same values as shared.css) */
:root{--grass-text:#1E7B34}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--grass-text:#6FD08A} }
:root[data-theme="dark"]{--grass-text:#6FD08A}
.sg-col.stays li .ic{color:var(--grass-text)}
.lineup .eyebrow,.lineup .swipe-hint{color:#FFFBEF}
.lineup .eyebrow .dot{background:var(--sun)}
.lineup .sub{color:rgba(255,251,239,.92)}
.tcard.rookie .tcard-top .yr{color:#FFFBEF}
.tcard.rookie .tcard-meta,.tcard.rookie p,.tcard.rookie .tcard-foot{color:rgba(255,251,239,.9)}
.fitg .sub{color:#FFFBEF}

/* OWN-05 the finish card follows the steps on desktop (.confetti-host{position:relative} was overriding the sticky rule) */
@media (min-width:1021px){ .chart-panel.confetti-host{position:sticky; top:96px} }

/* OWN-03 say-hi links land on the form card; html{scroll-padding-top} clears the sticky nav */
.hello-form{scroll-margin-top:8px}

/* OWN-02 attached-answers chip, under the form heading */
.fit-note{display:flex; align-items:center; flex-wrap:wrap; gap:0 8px; justify-self:start; margin:0; padding:8px 8px 8px 14px; background:#E6F4E8; border:2px solid #1E7B34; border-radius:14px; font-size:15px; font-weight:600; color:#17602A}
.fit-note[hidden]{display:none}
.fit-note button{margin:-6px 0}

/* OWN-01 phones tap to dial, so the digits only show where they are needed and the buttons stay on two rows */
@media (max-width:700px){ .hello .acts .tel-num{display:none} }

/* OWN-07 the closing line is a sentence now, so it is set as one */
.hello .note:not(.tag-note){text-transform:none; letter-spacing:.01em; font-size:15px}

/* OWN-13 desktop: smaller polaroids and tighter gaps so the letter starts on the first screen of the founder note (190px keeps both captions on two lines) */
@media (min-width:1021px){
  #note .note-photos .photo{max-width:190px}
  #note .note-photos{margin-top:28px; margin-bottom:22px}
}
/* ===== v10e ===== */
.mq{position:relative}
/* ===== v10g ===== */
#why .sub, #lineup .sub, #how .sub, #fit .sub, .pcard p, .note-card p, .tcard-body p, .scout-list p, .scout-note, .crow .cb, .chart-panel p, .faq-a p, .slip-result p{text-wrap:pretty}
.slip-result .slip-name{margin-top:10px}
/* ===== v10i ===== */
.photo figcaption{text-wrap:balance}

/* ================= v10 shared: skip link, audience switch, forms ================= */
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--card); color:var(--ink); border:2.5px solid var(--ink); border-radius:10px; padding:10px 16px; font-weight:700; text-decoration:none}
.skip:focus{top:10px}
.aud{display:flex; gap:4px; padding:4px; border:2.5px solid var(--ink); border-radius:12px; background:var(--card)}
.aud a{font-weight:700; font-size:14.5px; text-decoration:none; padding:7px 14px; border-radius:8px; white-space:nowrap; color:var(--ink)}
.aud a[aria-current="page"]{background:var(--navy); color:#FFFBEF}
@media (hover:hover){ .aud a:not([aria-current]):hover{background:var(--sun); color:#232A46} }
.aud-bar{display:none}
.nav .wrap{gap:18px}
.nav .nav-links{gap:18px}
@media (max-width:1180px){ .nav .nav-links{display:none} }
@media (max-width:760px){
  .aud-inline{display:none}
  .aud-bar{display:flex; border-radius:0; border-width:0 0 2.5px 0; padding:6px clamp(14px,4vw,44px); gap:6px; background:var(--milk)}
  .aud-bar a{flex:1; text-align:center; min-height:44px; display:flex; align-items:center; justify-content:center; border:2px solid var(--ink); font-size:15px}
}
.footer-bottom a{color:inherit}

/* forms (Netlify) */
.ff-form{display:grid; gap:16px; text-align:left}
.ff-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:640px){ .ff-form .row2{grid-template-columns:1fr} }
.ff-form label{display:block; font-weight:700; font-size:14.5px; margin-bottom:6px; color:#232A46}
.ff-form label small{font-weight:500; opacity:.75}
.ff-form input[type=text],.ff-form input[type=email],.ff-form input[type=tel],.ff-form select,.ff-form textarea{
  width:100%; font:inherit; font-size:17px; color:#232A46; background:#FFFFFF;
  border:2.5px solid #232A46; border-radius:10px; padding:12px 14px; min-height:50px;
}
.ff-form textarea{min-height:120px; resize:vertical}
.ff-form select{-webkit-appearance:none; appearance:none; padding-right:42px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 7l5 6 5-6' fill='none' stroke='%23232A46' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px}
.ff-form input:focus-visible,.ff-form select:focus-visible,.ff-form textarea:focus-visible{outline:3px solid var(--royal); outline-offset:2px}
.ff-form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.ff-form .fine{font-size:14px; color:rgba(35,42,70,.75)}
.ff-form .checks{display:flex; flex-wrap:wrap; gap:10px}
.ff-form .checks label{display:inline-flex; align-items:center; gap:8px; margin:0; font-weight:600; font-size:15px; background:#FFFFFF; border:2px solid #232A46; border-radius:999px; padding:8px 14px; min-height:44px; cursor:pointer}
.ff-form .checks input{width:18px; height:18px; accent-color:#3B5BDB}
.formcard{background:#FFFBEF; color:#232A46; border:2.5px solid #232A46; border-radius:18px; box-shadow:7px 7px 0 #232A46; padding:clamp(20px,3.5vw,36px)}

.formcard, .ff-form{color-scheme:light}

/* footer legibility */
.fcol span{font-size:12.5px}
.footer-bottom span{font-size:13px}

/* review fixes */
:root{--grass-text:#1E7B34}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--grass-text:#6FD08A} :root:not([data-theme="light"]) .aud a[aria-current="page"]{background:var(--sun); color:#232A46} }
:root[data-theme="dark"]{--grass-text:#6FD08A}
:root[data-theme="dark"] .aud a[aria-current="page"]{background:var(--sun); color:#232A46}
html{scroll-padding-top:76px}
section{scroll-margin-top:0}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
.photo img{height:auto}
.footer .tag{font-style:normal}
a[href^="tel:"]{white-space:nowrap}
@media (hover:none) and (orientation:landscape) and (max-height:430px){ html{scroll-padding-top:0} }

/* ================= logo menu ================= */
.logo-menu{position:relative; margin-right:auto}
.logo-menu > summary{list-style:none; cursor:pointer; margin-right:0; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none}
.logo-menu > summary::-webkit-details-marker{display:none}
.logo-menu .chev{width:16px; height:16px; flex:none; margin-left:-3px; transition:transform .15s ease; opacity:.8}
.logo-menu[open] .chev{transform:rotate(180deg)}
.nav-menu{position:absolute; left:0; top:calc(100% + 12px); z-index:80; min-width:250px; display:flex; flex-direction:column; gap:2px; padding:10px; background:var(--card); color:var(--ink); border:2.5px solid var(--ink); border-radius:14px; box-shadow:var(--shadow-lg)}
.nav-menu a{display:flex; align-items:center; min-height:44px; padding:6px 14px; border-radius:9px; font-weight:700; font-size:16.5px; text-decoration:none; color:var(--ink)}
.nav-menu a.sub{font-weight:600; font-size:15.5px; min-height:40px}
.nav-menu a[aria-current="page"]{background:var(--navy); color:#FFFBEF}
@media (hover:hover){ .nav-menu a:not([aria-current]):hover{background:var(--sun); color:#232A46} }
.nav-menu-h{margin:8px 14px 2px; padding-top:10px; border-top:2px dashed var(--paperline); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav-menu a[aria-current="page"]{background:var(--sun); color:#232A46} }
:root[data-theme="dark"] .nav-menu a[aria-current="page"]{background:var(--sun); color:#232A46}
@media (max-width:420px){ .nav-menu{min-width:0; width:calc(100vw - 2 * clamp(20px,4vw,44px))} }

/* ===== accessibility and robustness fixes from the 9/19 independent audit ===== */
.nav-menu a.sub{margin-top:0; max-width:none; min-height:44px}          /* the global .sub rule was leaking in */
.nav-menu{max-height:calc(100vh - 84px); max-height:calc(100dvh - 84px); overflow-y:auto; overscroll-behavior:contain}
.nav-menu-h{font-size:12.5px}
@media (max-width:359px){ .nav .wrap{gap:8px} .nav .btn-sm{padding:10px; font-size:13.5px} .logo-menu .chev{display:none} }
.ff-form ::placeholder{color:rgba(35,42,70,.7); opacity:1}
.ff-form label small{font-size:13px}
.footer-bottom a{display:inline-block; padding:12px 0}
html:has(dialog[open]){overflow:hidden}
#tagInput::placeholder{opacity:.85}
html:not(.js) [data-dialog]{display:none}
/* without JavaScript the owners FAQ answers stay readable, and the JS-built banner and its caption stay out of the way */
html:not(.js) .faq-a{grid-template-rows:1fr}
html:not(.js) .faq-a > div{visibility:visible}
html:not(.js) .mq, html:not(.js) .sheet-tip{display:none}

/* ================= v10 pages: home, partners, privacy ================= */
.home-hero .wrap{padding-top:clamp(36px,4.5vw,64px); padding-bottom:clamp(44px,6vw,80px)}
.home-hero .hero-copy{max-width:860px}
.home-hero h1{font-size:clamp(36px,5.4vw,68px)}
.home-hero .sub{margin-top:16px; font-size:clamp(17px,1.6vw,19.5px)}
.doors{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:clamp(24px,3vw,40px); position:relative; z-index:3}
@media (max-width:820px){ .doors{grid-template-columns:1fr} }
.door{display:flex; flex-direction:column; gap:10px; text-decoration:none; border:2.5px solid #232A46; border-radius:18px; box-shadow:7px 7px 0 #232A46; padding:clamp(22px,3vw,34px); transition:transform .13s ease, box-shadow .13s ease}
@media (hover:hover){ .door:hover{transform:translate(-3px,-3px); box-shadow:10px 10px 0 #232A46} }
.door:active{transform:translate(3px,3px); box-shadow:2px 2px 0 #232A46}
.door-partners{background:var(--royal); color:#FFFBEF}
.door-owners{background:#FFFBEF; color:#232A46}
.door-k{font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.92}
.door-h{font-family:var(--disp); font-weight:800; font-size:clamp(26px,3.2vw,38px); line-height:1.04; letter-spacing:-.01em}
.door-p{font-size:17px; line-height:1.5; opacity:.95}
.door-go{margin-top:auto; padding-top:8px; font-weight:700; font-size:17px; display:inline-flex; align-items:center; gap:8px}
.door-go i{font-style:normal; transition:transform .13s ease}
@media (hover:hover){ .door:hover .door-go i{transform:translateX(4px)} }

.brandrow{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:clamp(28px,4vw,44px)}
@media (max-width:980px){ .brandrow{grid-template-columns:repeat(3,1fr)} }
@media (max-width:600px){ .brandrow{grid-template-columns:repeat(2,1fr); gap:14px} }
.brand{display:flex; flex-direction:column; gap:6px; text-decoration:none; background:var(--card); border:2.5px solid var(--ink); border-radius:14px; box-shadow:var(--shadow); padding:12px 12px 14px; transition:transform .13s ease, box-shadow .13s ease}
@media (hover:hover){ .brand:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--shadow-c)} }
.brand-art{display:flex; align-items:center; justify-content:center; border-radius:9px; border:2px solid #232A46; height:104px; padding:14px}
.brand-art img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.brand b{font-family:var(--disp); font-weight:800; font-size:17px; line-height:1.1; margin-top:6px}
.brand small{font-size:13.5px; font-weight:600; color:var(--ink-soft)}
.score-grid.score-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){ .score-grid.score-3{grid-template-columns:1fr} }

.prose{max-width:780px}
.prose h2{font-size:26px; font-weight:800; margin:38px 0 10px; line-height:1.15}
.prose p{margin-top:12px}
.prose a{color:var(--royal-text); font-weight:600}

/* ---------- partners ---------- */
.phero{background:var(--royal); color:#FFFBEF; border-bottom:2.5px solid #232A46}
.phero .wrap{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,56px); align-items:center; padding-top:clamp(48px,6vw,84px); padding-bottom:clamp(56px,7vw,96px)}
@media (max-width:900px){ .phero .wrap{grid-template-columns:minmax(0,1fr)} }
.phero .eyebrow, .phero h1{color:#FFFBEF}
.phero h1{font-size:clamp(40px,6vw,76px)}
.phero .sub{color:rgba(255,251,239,.92)}
.phero .btn-sun{color:#232A46}
.phero .trust{margin-top:20px; font-size:15px; font-weight:600; color:rgba(255,251,239,.9); letter-spacing:.01em}
.pphoto{position:relative; border:2.5px solid #232A46; border-radius:18px; box-shadow:8px 8px 0 #232A46; overflow:hidden; background:#FFFBEF; transform:rotate(1.2deg)}
.pphoto img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.pphoto figcaption{position:absolute; left:12px; bottom:12px; background:#FFFBEF; color:#232A46; border:2px solid #232A46; border-radius:8px; padding:4px 10px; font-family:var(--marker); font-size:15px}
figure{margin:0}

.pstrip{background:var(--navy); color:#FFFBEF; border-bottom:2.5px solid #232A46; padding:22px 0 24px}
.pstrip-h{text-align:center; font-weight:700; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--sun); margin-bottom:16px}
.pstrip-vp{position:relative; overflow:hidden}
.pstrip-vp::before,.pstrip-vp::after{content:""; position:absolute; top:0; bottom:0; width:clamp(28px,6vw,90px); z-index:2; pointer-events:none}
.pstrip-vp::before{left:0; background:linear-gradient(90deg,var(--navy),rgba(27,33,64,0))}
.pstrip-vp::after{right:0; background:linear-gradient(270deg,var(--navy),rgba(27,33,64,0))}
.pstrip-track{display:flex; gap:16px; width:max-content; will-change:transform}
.pchip{flex:none; display:flex; align-items:center; justify-content:center; gap:12px; height:84px; min-width:170px; max-width:260px; padding:12px 22px; background:var(--chip,#FFFFFF); color:#232A46; border:2.5px solid #232A46; border-radius:14px; font-family:var(--disp); font-weight:800; font-size:17px; line-height:1.1; text-align:center}
.pchip.lbl{max-width:320px}
.pchip.lbl span{white-space:nowrap; padding-left:12px; border-left:2px solid rgba(35,42,70,.25)}
.pchip.tall img{height:58px}
@media (max-width:600px){ .pchip.lbl{max-width:260px} .pchip.tall img{height:46px} }
.pchip img{height:44px; max-height:none; width:auto; max-width:200px; object-fit:contain; display:block}
@media (max-width:600px){ .pchip{height:62px; min-width:0; padding:8px 14px; font-size:14.5px; max-width:200px} .pchip img{height:34px; max-width:150px} }
@media (prefers-reduced-motion:reduce){ .pstrip-vp::before,.pstrip-vp::after{display:none} .pstrip-track{flex-wrap:wrap; justify-content:center; width:auto; padding:0 16px !important} }

.creds{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:clamp(28px,4vw,44px)}
@media (max-width:980px){ .creds{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .creds{grid-template-columns:1fr} }
.cred{background:var(--card); border:2.5px solid var(--ink); border-radius:14px; box-shadow:var(--shadow); padding:20px}
.cred .ck{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--grass); color:#fff; font-weight:800; border:2.5px solid #232A46; margin-bottom:12px}
.cred h3{font-size:21px; font-weight:800; line-height:1.1}
.cred p{margin-top:8px; font-size:16px; color:var(--ink-soft)}

.ways{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(28px,4vw,44px)}
@media (max-width:980px){ .ways{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .ways{grid-template-columns:1fr} }
.way{background:#FFFBEF; color:#232A46; border:2.5px solid #232A46; border-radius:16px; box-shadow:6px 6px 0 #232A46; padding:22px}
.way .when{font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:#3350C4}
.way h3{font-size:24px; font-weight:800; margin-top:8px; line-height:1.08}
.way p{margin-top:10px; font-size:16.5px; color:rgba(35,42,70,.8)}
.band-royal{background:var(--royal); color:#FFFBEF; border-top:2.5px solid #232A46; border-bottom:2.5px solid #232A46}
.band-royal .eyebrow, .band-royal h2{color:#FFFBEF}
.band-royal .sub{color:rgba(255,251,239,.9)}
.band-royal :focus-visible{outline-color:var(--sun)}

.progs{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:clamp(28px,4vw,44px)}
@media (max-width:860px){ .progs{grid-template-columns:1fr} }
.prog{display:grid; min-width:0; perspective:1800px}
.prog-face{display:flex; flex-direction:column; min-width:0; background:var(--card); color:var(--ink); border:2.5px solid var(--ink); border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden}
.prog-photo{position:relative; aspect-ratio:16/9; background:#DCE6FF; border-bottom:2.5px solid var(--ink)}
.prog-photo img.ph{width:100%; height:100%; object-fit:cover; display:block}
.prog-logo{position:absolute; left:14px; bottom:-22px; background:#FFFFFF; border:2.5px solid #232A46; border-radius:12px; padding:8px 12px; height:60px; display:flex; align-items:center; box-shadow:3px 3px 0 #232A46}
.prog-logo img{max-height:40px; max-width:150px; width:auto; height:auto; display:block}
.prog-body{padding:36px 22px 22px}
.prog-body h3{font-size:26px; font-weight:800; line-height:1.05}
.prog-meta{margin-top:6px; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--royal-text)}
.prog-body p{margin-top:10px; font-size:16.5px; color:var(--ink-soft)}
.prog-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding:0; list-style:none}
.prog-tags li{font-size:13.5px; font-weight:600; border:2px solid var(--ink); border-radius:999px; padding:4px 11px}
.prog.wide{grid-column:1 / -1}
@media (min-width:701px){ .prog.wide .prog-front{flex-direction:row} .prog.wide .prog-photo{flex:0 0 46%; aspect-ratio:auto; border-bottom:none; border-right:2.5px solid var(--ink)} .prog.wide .prog-body{padding:28px} .prog.wide .prog-logo{bottom:14px} }

.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:clamp(28px,4vw,44px)}
@media (max-width:980px){ .quotes{grid-template-columns:1fr} }
.quote{position:relative; background:var(--card); border:2.5px solid var(--ink); border-radius:16px; box-shadow:var(--shadow); padding:26px 22px 20px}
.quote:nth-child(odd){transform:rotate(-.5deg)} .quote:nth-child(even){transform:rotate(.4deg)}
.quote blockquote{margin:0; font-size:18px; line-height:1.5}
.quote blockquote::before{content:"\201C"; font-family:var(--disp); font-weight:800; font-size:54px; line-height:.6; color:var(--kick-text); display:block; margin-bottom:6px}
.quote figcaption{margin-top:14px; font-weight:700; font-size:14.5px; color:var(--ink-soft)}

.psteps{counter-reset:ps; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:clamp(28px,4vw,44px) 0 0; padding:0; list-style:none}
@media (max-width:980px){ .psteps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .psteps{grid-template-columns:1fr} }
.psteps li{counter-increment:ps; background:var(--card); border:2.5px solid var(--ink); border-radius:14px; box-shadow:var(--shadow); padding:20px}
.psteps li::before{content:counter(ps); display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--sun); color:#232A46; border:2.5px solid #232A46; font-family:var(--disp); font-weight:800; font-size:20px; margin-bottom:12px}
.psteps h3{font-size:20px; font-weight:800; line-height:1.12}
.psteps p{margin-top:8px; font-size:16px; color:var(--ink-soft)}

.request{background:var(--sun); color:#232A46; border-top:2.5px solid #232A46; --ink:#232A46; --ink-soft:rgba(35,42,70,.75); --card:#FFFFFF; --shadow-c:#232A46}
.request .eyebrow,.request h2{color:#232A46}
.request .sub{color:rgba(35,42,70,.82)}
.request-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,4vw,56px); align-items:start}
@media (max-width:900px){ .request-grid{grid-template-columns:minmax(0,1fr)} }
.request .alt{margin-top:22px; font-size:16.5px}
.request .alt a{font-weight:700}
.request :focus-visible{outline-color:#232A46}

.sg-col.provide .sg-head{background:var(--royal)}
.sg-col.provide li .ic{color:var(--royal-text)}

.quote.feature{grid-column:1 / -1; transform:none; background:var(--sun); color:#232A46; border-color:#232A46; box-shadow:7px 7px 0 #232A46; padding:clamp(24px,3.5vw,40px)}
.quote.feature blockquote{font-family:var(--disp); font-weight:700; font-size:clamp(21px,2.4vw,29px); line-height:1.25; max-width:56ch}
.quote.feature blockquote::before{color:#232A46}
.quote.feature figcaption{color:rgba(35,42,70,.8); font-size:16px}

/* review fixes */
@media (max-width:760px){ .score-grid.score-3 .score{grid-template-columns:auto 1fr; column-gap:16px} .score-grid.score-3 .num{font-size:34px; text-align:left; white-space:nowrap} }
.prog-photo img.ph[src*="soccer-stars"]{object-position:50% 0}
.prog-photo img.ph[src*="karate-zoo"]{object-position:50% 12%}
.phero :focus-visible{outline-color:var(--sun)}
.quotes{align-items:start}
@media (min-width:981px){ .quotes{grid-template-columns:repeat(2,1fr)} }
@media (min-width:641px) and (max-width:860px){ .progs{grid-template-columns:repeat(2,1fr)} .prog.wide{grid-column:1 / -1} }
.ff-form ::placeholder{color:rgba(35,42,70,.62); opacity:1}
@media (max-width:760px){ .door{padding:18px 20px; gap:6px} .door-h{font-size:24px} .door-p{font-size:16px} }

/* ---------- case studies ---------- */
.cases{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px; margin-top:clamp(28px,4vw,44px); align-items:stretch}
@media (max-width:900px){ .cases{grid-template-columns:minmax(0,1fr)} }
.case{background:var(--card); color:var(--ink); border:2.5px solid var(--ink); border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden}
.case-top{padding:20px 24px 18px; border-bottom:2.5px solid #232A46; color:#232A46}
.case.turnkey .case-top{background:var(--sun)}
.case.vendor .case-top{background:#C9E7D1}
.case-kind{font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase}
.case-top h3{font-size:clamp(26px,3vw,34px); font-weight:800; line-height:1.05; margin-top:8px}
.case-top p{margin-top:8px; font-size:16.5px; color:rgba(35,42,70,.85)}
.case-body{padding:22px 24px 24px}
.case-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 18px; padding:0; list-style:none}
.case-stats li{border:2px solid var(--ink); border-radius:12px; padding:10px 12px}
.case-stats b{display:block; font-family:var(--disp); font-weight:800; font-size:clamp(24px,2.6vw,32px); line-height:1}
.case-stats span{display:block; margin-top:4px; font-size:13.5px; line-height:1.3; color:var(--ink-soft)}
@media (max-width:420px){ .case-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.case-body h4{font-family:var(--disp); font-weight:800; font-size:18px; margin:18px 0 6px}
.case-body p{font-size:16.5px; color:var(--ink-soft)}
.case-body p + p{margin-top:10px}
.case-quote{margin:18px 0 0; padding:14px 16px; border-left:5px solid var(--kick-text); background:var(--milk); border-radius:0 10px 10px 0}
.case-quote blockquote{margin:0; font-size:16.5px; line-height:1.5}
.case-quote figcaption{margin-top:8px; font-weight:700; font-size:14px; color:var(--ink-soft)}
.case-note{margin-top:14px; font-size:13.5px; color:var(--ink-soft)}
.pchip[style*="--chip"]{border-color:rgba(255,251,239,.4)}

/* ---------- round two: photos, doodles, icons ---------- */
.phero{position:relative; overflow:hidden}
.phero .hero-decor{opacity:1}
.pphoto{overflow:visible}
.pphoto img{border-radius:14px}
.pphoto .tape, .polaroid .tape, .case-photo .tape{position:absolute; left:50%; top:-13px; width:96px; height:26px; margin-left:-48px; background:var(--tape,rgba(235,215,160,.85)); transform:rotate(-3deg); z-index:2; border-left:1px dashed rgba(35,42,70,.18); border-right:1px dashed rgba(35,42,70,.18)}
.pphoto figcaption{left:auto; right:12px; transform:rotate(-2deg)}

.pwall{background:var(--milk); padding:clamp(34px,5vw,60px) 0 0; overflow:hidden}
.pwall-row{display:flex; justify-content:center; gap:clamp(12px,2vw,26px); padding:16px clamp(16px,3vw,40px) 6px; max-width:1320px; margin:0 auto}
.polaroid{position:relative; flex:1 1 0; min-width:0; max-width:240px; background:#FFFFFF; color:#232A46; border:2.5px solid #232A46; border-radius:8px; box-shadow:5px 5px 0 #232A46; padding:9px 9px 6px}
.polaroid img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:3px; border:1px solid rgba(35,42,70,.18)}
.polaroid figcaption{font-family:var(--marker); font-size:clamp(13px,1.35vw,17px); text-align:center; padding:8px 2px 4px; line-height:1.1}
.polaroid.r1{transform:rotate(-3deg)} .polaroid.r2{transform:rotate(2deg) translateY(10px)} .polaroid.r3{transform:rotate(-1.5deg)} .polaroid.r4{transform:rotate(3deg) translateY(8px)} .polaroid.r5{transform:rotate(-2deg)}
@media (max-width:760px){ .pwall-row{justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:18px; scrollbar-width:none} .pwall-row::-webkit-scrollbar{display:none} .polaroid{flex:0 0 58%; max-width:none; scroll-snap-align:center} }

.way{position:relative}
.way-ic{width:44px; height:44px; padding:7px; border-radius:50%; background:var(--sun); color:#232A46; border:2.5px solid #232A46; display:block; margin-bottom:12px}
.way:nth-child(odd){transform:rotate(-.4deg)} .way:nth-child(even){transform:rotate(.35deg)}

.case-photo{position:relative; margin:0; border-bottom:2.5px solid #232A46}
.case-photo img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.case-photo figcaption{position:absolute; left:14px; bottom:12px; background:#FFFBEF; color:#232A46; border:2px solid #232A46; border-radius:8px; padding:4px 10px; font-family:var(--marker); font-size:15px; transform:rotate(-1.5deg)}
.case.turnkey{transform:rotate(-.3deg)} .case.vendor{transform:rotate(.3deg)}
.cred{position:relative}
.cred:nth-child(odd){transform:rotate(-.5deg)} .cred:nth-child(even){transform:rotate(.45deg)}

/* ---------- sample schedule dialog ---------- */
.case-more{margin-top:18px}
.sched{width:min(980px,94vw); max-height:88vh; padding:0; border:2.5px solid #232A46; border-radius:18px; box-shadow:9px 9px 0 #232A46; background:#FFFBEF; color:#232A46; overflow:hidden; color-scheme:light}
.sched::backdrop{background:rgba(21,26,51,.62)}
.sched-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 24px 16px; background:var(--sun); border-bottom:2.5px solid #232A46}
.sched-head h3{font-size:clamp(22px,3vw,30px); font-weight:800; line-height:1.05}
.sched-head p{margin-top:6px; font-size:15px; color:rgba(35,42,70,.85)}
.sched-x{flex:none; width:44px; height:44px; border:2.5px solid #232A46; border-radius:12px; background:#FFFFFF; font-size:22px; font-weight:800; line-height:1; color:#232A46; box-shadow:3px 3px 0 #232A46}
.sched-body{overflow:auto; max-height:calc(88vh - 120px); padding:18px 20px 22px; -webkit-overflow-scrolling:touch}
.sched-grid{display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)); gap:12px; min-width:820px}
.sday{background:#FFFFFF; border:2px solid #232A46; border-radius:12px; overflow:hidden}
.sday h4{font-family:var(--disp); font-weight:800; font-size:17px; padding:9px 12px; background:#232A46; color:#FFFBEF}
.sslot{padding:10px 12px 12px}
.sslot + .sslot{border-top:2px dashed rgba(35,42,70,.2)}
.sslot b{display:block; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#3350C4; margin-bottom:6px}
.sslot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
.sslot li{font-size:14px; line-height:1.25; padding:5px 8px; border-radius:7px; background:#F1EEE3; border-left:5px solid var(--c,#232A46)}
.sched-key{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:16px; font-size:13px; font-weight:600}
.sched-key span{display:inline-flex; align-items:center; gap:6px}
.sched-key i{width:12px; height:12px; border-radius:3px; background:var(--c); display:inline-block}
.sched-note{margin-top:12px; font-size:13.5px; color:rgba(35,42,70,.78)}
@media (max-width:700px){ .sched-grid{grid-template-columns:1fr; min-width:0} .sched-body{padding:14px} }

/* ---------- where we run ---------- */
.where{background:var(--navy); color:#FFFBEF; border-top:2.5px solid #232A46; border-bottom:2.5px solid #232A46}
.where .eyebrow{color:var(--sun)} .where h2{color:#FFFBEF} .where .sub{color:rgba(255,251,239,.85)}
.where :focus-visible{outline-color:var(--sun)}
.where-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,4vw,56px); align-items:center; margin-top:clamp(28px,4vw,44px)}
@media (max-width:900px){ .where-grid{grid-template-columns:minmax(0,1fr)} }
.where-map{width:100%; height:auto; display:block}
.where-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 20px; padding:0; list-style:none}
.where-stats li{background:#FFFBEF; color:#232A46; border:2.5px solid #232A46; border-radius:12px; box-shadow:4px 4px 0 rgba(0,0,0,.45); padding:12px 14px}
.where-stats b{display:block; font-family:var(--disp); font-weight:800; font-size:clamp(26px,3vw,36px); line-height:1}
.where-stats span{display:block; margin-top:4px; font-size:13.5px; line-height:1.3; color:rgba(35,42,70,.8)}
.hoods{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.hoods li{font-size:14px; font-weight:600; border:2px solid rgba(255,251,239,.55); border-radius:999px; padding:5px 12px}
.hoods li.nj{border-color:var(--sun); color:var(--sun)}
.hoods li.bx{border-color:#8FD3A0; color:#8FD3A0}
.where h3{font-family:var(--disp); font-weight:800; font-size:18px; margin:18px 0 10px}
.sday h4,.sched-head h3{margin:0}
.case-body h4{margin-bottom:6px}
@media (max-width:480px){ .where-stats{gap:8px} .where-stats li{padding:10px 8px} .where-stats span{font-size:13px; letter-spacing:-.01em} }

/* round three */
@media (min-width:981px){ .quotes{grid-template-columns:repeat(3,1fr)} }
.quote blockquote{font-size:17.5px}
@media (min-width:901px){ .where-stats{grid-template-columns:1fr; gap:14px; max-width:420px} .where-stats li{display:flex; align-items:center; gap:18px; padding:16px 20px} .where-stats b{font-size:54px; min-width:118px} .where-stats span{margin-top:0; font-size:17px} .where-grid p.sub{max-width:420px} }
.quotes{display:block; columns:3 290px; column-gap:22px}
.quotes .quote{break-inside:avoid; margin:0 0 22px; display:inline-block; width:100%}

/* ================= home v2: photo stack, doors with pictures, marquee, photo cards, stickers ================= */
.hh-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(24px,4vw,64px); align-items:center}
@media (max-width:900px){ .hh-grid{grid-template-columns:minmax(0,1fr); gap:26px} }
.home-hero h1 .sqe svg{top:-10%; height:124%}

.stack{position:relative; width:min(100%,380px); aspect-ratio:1/1.04; justify-self:end; margin-top:8px}
@media (max-width:900px){ .stack{justify-self:center; width:min(84%,320px)} }
.snap{position:absolute; inset:5% 5% 7% 5%; margin:0; display:flex; flex-direction:column; background:#FFFFFF; color:#232A46; border:2.5px solid #232A46; border-radius:8px; box-shadow:5px 5px 0 #232A46; padding:10px 10px 0; transform:rotate(var(--r)); transition:transform .34s cubic-bezier(.3,1.2,.5,1)}
.snap img{display:block; width:100%; flex:1 1 auto; min-height:0; object-fit:cover; border-radius:3px; border:1px solid rgba(35,42,70,.18)}
.snap figcaption{font-family:var(--marker); font-size:clamp(15px,1.5vw,19px); line-height:1.1; text-align:center; padding:9px 4px 11px}
.snap .tape, .door-pic .tape{position:absolute; left:50%; top:-13px; width:92px; height:25px; margin-left:-46px; background:rgba(235,215,160,.88); transform:rotate(-3deg); z-index:2; border-left:1px dashed rgba(35,42,70,.18); border-right:1px dashed rgba(35,42,70,.18)}
.snap.toss{transform:translate(118%,-8%) rotate(21deg)}
@keyframes deal{ from{opacity:0; transform:translateY(-38px) rotate(calc(var(--r) * 3)) scale(1.12)} to{opacity:1; transform:rotate(var(--r))} }
@media (prefers-reduced-motion:no-preference){ .snap{animation:deal .5s cubic-bezier(.34,1.4,.64,1) backwards; animation-delay:calc(var(--i) * .13s + .15s)} .stack.touched .snap{animation:none} }
.stack-btn{position:absolute; inset:0; z-index:5; width:100%; height:100%; cursor:pointer; border-radius:12px}
.stack-tip{position:absolute; right:0; top:-12px; z-index:6; font-family:var(--marker); font-size:16px; line-height:1; transform:rotate(3deg); background:#FFFBEF; color:#232A46; border:2px solid #232A46; border-radius:8px; padding:5px 10px; pointer-events:none; transition:opacity .3s ease}
.stack.touched .stack-tip{opacity:0}

.home-hero .doors{margin-top:14px}
.door{position:relative}
.door-k, .door-h{padding-right:clamp(112px,14vw,176px)}
.door-pic{position:absolute; right:18px; top:-24px; width:clamp(104px,13vw,156px); background:#FFFFFF; border:2.5px solid #232A46; border-radius:7px; padding:6px; box-shadow:4px 4px 0 #232A46; transform:rotate(5deg); transition:transform .18s ease}
.door-pic img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:3px}
.door-pic.tallpic{width:clamp(86px,10vw,120px); transform:rotate(-5deg)}
.door-pic.tallpic img{aspect-ratio:5/7}
.door-pic em{display:block; font-style:normal; font-family:var(--marker); font-size:13px; line-height:1.05; text-align:center; color:#232A46; padding:5px 0 1px}
.door-pic .tape{width:58px; height:18px; margin-left:-29px; top:-10px}
@media (hover:hover){ .door:hover .door-pic{transform:rotate(-3deg) scale(1.07)} .door:hover .door-pic.tallpic{transform:rotate(4deg) scale(1.07)} }
@media (max-width:760px){ .door-pic{right:12px; top:-18px; width:96px} .door-pic.tallpic{width:78px} .door-k, .door-h{padding-right:104px} }

.hmq{cursor:default; border-top:0}
.hmq .mq-item svg{width:14px; height:14px; flex:none; color:var(--sun)}

.pxrow{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; margin-top:clamp(28px,4vw,44px)}
.px{display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink); background:var(--card); border:2.5px solid var(--ink); border-radius:14px; box-shadow:var(--shadow); padding:10px 10px 14px; transform:rotate(var(--r)); transition:transform .16s ease, box-shadow .16s ease}
.px-photo{position:relative; display:block; margin-bottom:26px}
.px-photo img.ph{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:8px; border:2px solid #232A46}
.px-logo{position:absolute; left:8px; bottom:-20px; height:46px; display:flex; align-items:center; background:#FFFFFF; border:2.5px solid #232A46; border-radius:10px; padding:6px 9px; box-shadow:3px 3px 0 #232A46; transition:transform .16s ease}
.px-logo img{display:block; max-height:30px; max-width:112px; width:auto; height:auto}
.px b{font-family:var(--disp); font-weight:800; font-size:17px; line-height:1.1}
.px small{font-size:13.5px; font-weight:600; color:var(--ink-soft)}
@media (hover:hover){ .px:hover{transform:rotate(0deg) translate(-2px,-5px) scale(1.02); box-shadow:7px 8px 0 var(--shadow-c)} .px:hover .px-logo{transform:rotate(-5deg) scale(1.07)} }
.px:active{transform:rotate(0deg) translate(2px,2px); box-shadow:1px 1px 0 var(--shadow-c)}
.swipe-hint{display:none}
@media (max-width:980px){ .pxrow{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){
  .swipe-hint{display:block; margin-top:14px; font-family:var(--marker); font-size:16px; color:var(--ink-soft)}
  .pxrow{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:8px calc(-1 * clamp(20px,4vw,44px)) 0; padding:12px clamp(20px,4vw,44px) 20px}
  .pxrow::-webkit-scrollbar{display:none}
  .px{flex:0 0 62%; scroll-snap-align:center}
}

.stkband{background:var(--royal); color:#FFFBEF; border-top:2.5px solid #232A46; border-bottom:2.5px solid #232A46; text-align:center}
.stkband h2{color:#FFFBEF; max-width:16ch; margin:0 auto}
.stickers{list-style:none; margin:clamp(28px,4vw,44px) auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(16px,3vw,44px)}
.stk{position:relative; flex:none; width:clamp(148px,18vw,210px); aspect-ratio:1/1; border-radius:50%; border:3px solid #232A46; box-shadow:6px 6px 0 #232A46; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 9%; color:#232A46; transform:rotate(var(--r))}
.stk::before{content:""; position:absolute; inset:8px; border-radius:50%; border:2px dashed rgba(35,42,70,.45); pointer-events:none}
.stk:first-child{width:clamp(164px,21vw,246px)}
.stk b{font-family:var(--disp); font-weight:800; font-size:clamp(27px,3.4vw,44px); line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap}
.stk span{margin-top:7px; font-size:clamp(13px,1.15vw,15px); font-weight:600; line-height:1.2; max-width:13ch}
.s-sun{background:var(--sun)} .s-milk{background:#FFFBEF} .s-grass{background:#9AD9A8}
.s-kick{background:var(--kick); color:#FFF7EA} .s-kick::before{border-color:rgba(255,247,234,.6)}
.stickers.armed .stk{opacity:0; transform:rotate(var(--r)) scale(.35)}
.stickers.armed.popped .stk{opacity:1; transform:rotate(var(--r)) scale(1); transition:transform .55s cubic-bezier(.34,1.56,.64,1), opacity .2s ease}
.stickers.armed.popped .stk:nth-child(2){transition-delay:.12s} .stickers.armed.popped .stk:nth-child(3){transition-delay:.24s} .stickers.armed.popped .stk:nth-child(4){transition-delay:.36s}

.pickband{background:var(--sun); color:#232A46; text-align:center; --ink:#232A46; --ink-soft:rgba(35,42,70,.75); --card:#FFFFFF; --shadow-c:#232A46; --shadow:4px 4px 0 #232A46}
.pickband h2{color:#232A46}
.pickband :focus-visible{outline-color:#232A46}
.pick-ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:28px}
.pickband .btn{font-size:18px; padding:16px 28px; border-color:#232A46; box-shadow:4px 4px 0 #232A46; color:#232A46}
.pickband .btn-kick{color:#FFF7EA}
.pickband .btn-plain{background:#FFFBEF}

/* home v2 fixes */
.stack-tip{display:inline-flex; align-items:center; gap:6px}
.stack-tip svg{width:20px; height:20px; flex:none; margin-bottom:-6px}
.home-hero .door{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(12px,2vw,22px); align-items:start}
.door-txt{display:flex; flex-direction:column; gap:10px; min-width:0; height:100%}
.home-hero .door-k, .home-hero .door-h{padding-right:0}
.home-hero .door-pic{position:relative; right:auto; top:auto; margin-top:-46px; align-self:start}
@media (max-width:760px){ .home-hero .door-pic{margin-top:-36px} .door-txt{gap:6px} }
.stk span{width:100%; max-width:none; text-align:center}
.home-hero h1 .sqe path{stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){ .home-hero h1 .sqe path{animation:drawsq 1.1s ease 1s backwards} }
@keyframes drawsq{ from{stroke-dashoffset:1400} to{stroke-dashoffset:0} }
.home-hero h1 .sqe{white-space:nowrap}
.home-hero h1 .sqe svg{display:block}
.stk{padding:0 clamp(14px,1.6vw,22px)}

/* quotes v3: highlights, big short quotes, colored cards */
.quote mark{background:var(--sun); color:#232A46; border-radius:3px; padding:0 3px; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.quote.big blockquote{font-family:var(--disp); font-weight:700; font-size:clamp(21px,2.1vw,27px); line-height:1.22}
.quote.c-sun{background:var(--sun); color:#232A46; border-color:#232A46; box-shadow:4px 4px 0 #232A46}
.quote.c-sun mark{background:#FFFBEF}
.quote.c-sun blockquote::before{color:#232A46}
.quote.c-sun figcaption{color:rgba(35,42,70,.82)}
.quote.c-royal{background:var(--royal); color:#FFFBEF; border-color:#232A46; box-shadow:4px 4px 0 #232A46}
.quote.c-royal blockquote::before{color:var(--sun)}
.quote.c-royal figcaption{color:rgba(255,251,239,.88)}
.quote.c-grass{background:#9AD9A8; color:#232A46; border-color:#232A46; box-shadow:4px 4px 0 #232A46}
.quote.c-grass mark{background:#FFFBEF}
.quote.c-grass blockquote::before{color:#232A46}
.quote.c-grass figcaption{color:rgba(35,42,70,.82)}

.quotes.qcols{display:grid; columns:auto; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start}
.quotes.qcols .qcol{display:flex; flex-direction:column; gap:22px; min-width:0}
.quotes.qcols .quote{display:block; width:auto; margin:0}
@media (max-width:980px){ .quotes.qcols{grid-template-columns:repeat(2,minmax(0,1fr))} .quotes.qcols .qcol:last-child{grid-column:1 / -1; flex-direction:row; flex-wrap:wrap} .quotes.qcols .qcol:last-child .quote{flex:1 1 260px} }
@media (max-width:640px){ .quotes.qcols{grid-template-columns:minmax(0,1fr)} .quotes.qcols .qcol:last-child{flex-direction:column} .quotes.qcols .qcol:last-child .quote{flex:none} }

/* review fixes (round five) */
.sched[open]{display:flex; flex-direction:column}
.sched-head{flex:none}
.sched-body{flex:1 1 auto; min-height:0; max-height:none}
@media (max-width:700px){ .sched-head{padding:14px 16px 12px} .sched-head h3{font-size:21px} .sched-head p{font-size:14px; margin-top:4px} .sched-x{width:40px; height:40px} }
#requestForm{scroll-margin-top:8px}

/* ===== audit fixes (round five, part two) ===== */
.sched-body{overscroll-behavior:contain}
.sched-body:focus-visible{outline:3px solid #232A46; outline-offset:-3px}
.sched :focus-visible{outline-color:#232A46}
@media (max-width:700px){ .sched-x{width:44px; height:44px} }
.sslot b{font-size:13px}
.sslot li small{font-size:13px; white-space:nowrap}
.door-k, .pstrip-h, .case-kind{font-size:13px}
.pwall{padding-bottom:clamp(34px,5vw,60px)}
.pwall-row:focus-visible{outline:3px solid var(--royal-text); outline-offset:4px; border-radius:8px}
.pstrip-top{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin:0 16px 16px; color:var(--sun)}
.pstrip-top .pstrip-h{margin:0}
.request h2{font-size:clamp(34px,4vw,50px)}
.where-map .lab-m{display:none}
@media (max-width:600px){ .where-map .lab-d{display:none} .where-map .lab-m{display:block} }
@media (max-width:400px){ .where-stats{grid-template-columns:1fr} .where-stats li{display:flex; align-items:baseline; gap:12px} .where-stats span{margin-top:0} }
@media (max-width:520px){
  .home-hero .door{column-gap:12px}
  .home-hero .door-txt{display:contents}
  .home-hero .door-pic{grid-column:2; grid-row:1 / span 2}
  .home-hero .door-k{grid-column:1; grid-row:1}
  .home-hero .door-h{grid-column:1; grid-row:2}
  .home-hero .door-p, .home-hero .door-go{grid-column:1 / -1}
  .home-hero .door-p{margin-top:8px}
}
html:not(.js) .pstrip-track{flex-wrap:wrap; justify-content:center; width:auto}
html:not(.js) .pstrip-vp::before, html:not(.js) .pstrip-vp::after{display:none}
.hmq{position:relative}

/* ===== round six: shorter partners page ===== */
.cred-lead{margin-top:clamp(24px,3vw,36px); font-size:18px; color:var(--ink-soft); max-width:64ch}
.credrow{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 12px}
.credrow li{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:16px; background:var(--card); border:2.5px solid var(--ink); border-radius:999px; box-shadow:var(--shadow); padding:8px 16px 8px 9px}
.credrow .ck{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex:none; border-radius:50%; background:var(--grass); color:#fff; font-weight:800; font-size:14px; border:2px solid #232A46}
.swipe-hint.light{color:rgba(255,251,239,.88)}
.ways:focus-visible{outline:3px solid var(--sun); outline-offset:6px; border-radius:10px}
@media (max-width:700px){
  .ways, .progs{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:calc(-1 * clamp(20px,4vw,44px)); margin-right:calc(-1 * clamp(20px,4vw,44px)); margin-top:4px; padding:12px clamp(20px,4vw,44px) 20px}
  .ways::-webkit-scrollbar, .progs::-webkit-scrollbar{display:none}
  .ways > .way{flex:0 0 78%; scroll-snap-align:center}
  .progs > .prog, .progs > .prog.wide{flex:0 0 84%; scroll-snap-align:center; grid-column:auto}
  /* the hidden new-tab note is absolutely placed; anchor it to its card so the row can clip it */
  .progs > .prog, .ways > .way{position:relative}
  .credrow li{font-size:15px}
  /* home: doors come before the photo stack on phones */
}
@media (max-width:900px){
  .home-hero > .wrap{display:flex; flex-direction:column}
  .home-hero .hh-grid{display:contents}
  .home-hero .hero-copy{order:1}
  .home-hero .hh-shot{order:2}
  .home-hero .doors{order:3}
  .home-hero .stack{order:4; align-self:center; margin-top:34px}
}

/* phones: steps read as a compact numbered list, and sections sit a little closer together */
@media (max-width:560px){
  .psteps{gap:12px}
  .psteps li{display:grid; grid-template-columns:40px 1fr; column-gap:14px; padding:16px 16px 16px 14px; align-items:start}
  .psteps li::before{grid-row:1 / span 2; margin-bottom:0}
  .psteps h3{align-self:center; min-height:40px; display:flex; align-items:center}
  .psteps p{grid-column:2; margin-top:2px}
}

/* five ways: three on top, two wider below, so no empty corner. 701-980px: two columns, the fifth spans. */
@media (min-width:981px){
  .ways{grid-template-columns:repeat(6,1fr)}
  .ways > .way{grid-column:span 2}
  .ways > .way:nth-child(4), .ways > .way:nth-child(5){grid-column:span 3}
}
@media (min-width:701px) and (max-width:980px){ .ways > .way:nth-child(5){grid-column:1 / -1} }

.nb{white-space:nowrap}
/* wide program card: with the tags gone, keep the photo a sensible height and center the words beside it */
@media (min-width:701px){ .prog.wide .prog-photo{max-height:300px} .prog.wide .prog-body{align-self:center} }

/* the finish line: the last step is the fun one, on a sun-yellow card like the colored quotes */
.psteps li:last-child{background:var(--sun); color:#232A46; border-color:#232A46; box-shadow:5px 5px 0 #232A46}
.psteps li:last-child::before{background:#FFFBEF}
.psteps li:last-child h3{color:#232A46}
.psteps li:last-child p{color:rgba(35,42,70,.9)}

/* reduced motion on phones: two swipeable logo rows instead of a wrapped wall that pushes the page down two screens */
@media (prefers-reduced-motion:reduce) and (max-width:700px){
  .pstrip-vp{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .pstrip-vp::-webkit-scrollbar{display:none}
  .pstrip-track{flex-wrap:nowrap; justify-content:flex-start; width:max-content}
}
/* the sample-week grid needs less width on tablets so Friday is not cropped */
@media (min-width:701px) and (max-width:900px){ .sched-grid{grid-template-columns:repeat(5,minmax(112px,1fr)); min-width:620px} .sslot li small{white-space:normal} }
.sslot li{overflow-wrap:break-word}

/* Chrome sized the program photos by the image ratio and WebKit by the box: the box decides in both */
.prog-photo img.ph{position:absolute; inset:0}

/* the partners credibility line: core.html sizes .hero .trust to its content above 1240px, which gave it a
   single 120-character row on desktop. Comfortable reading tops out near 75 characters. */
.phero .trust{max-width:62ch}

/* ================= home: the first phone screen =================
   Desktop already opened on a picture; phones did not, because the doors were moved above the photo
   stack and the stack is what carried the image. A letterbox photograph now sits between the headline
   and the doors on phones only, borrowing the partners hero's card: caption laid over the picture
   rather than under it, so it costs no vertical room. On desktop the stack still does the job and
   this card is never rendered. */
.hh-shot{display:none}
@media (max-width:900px){
  .hh-shot{display:block; position:relative; margin:18px 0 0; border:2.5px solid #232A46; border-radius:16px;
           box-shadow:6px 6px 0 #232A46; background:#FFFBEF; transform:rotate(-1deg)}
  .hh-shot img{display:block; width:100%; height:auto; aspect-ratio:2.2/1; object-fit:cover; object-position:50% 34%; border-radius:13px}
  .hh-shot figcaption{position:absolute; right:12px; bottom:12px; background:#FFFBEF; color:#232A46; border:2px solid #232A46;
                      border-radius:8px; padding:4px 10px; font-family:var(--marker); font-size:15px; transform:rotate(-2deg)}
  .hh-shot .tape{position:absolute; left:50%; top:-13px; width:92px; height:25px; margin-left:-46px; background:rgba(235,215,160,.88);
                 transform:rotate(-3deg); z-index:2; border-left:1px dashed rgba(35,42,70,.25); border-right:1px dashed rgba(35,42,70,.25)}
}
/* the photograph is the picture now, so the partners door gives its stamp-sized copy back as vertical
   room and every word of both doors stays on screen. */
@media (max-width:760px){
  .home-hero .wrap{padding-top:18px}
  .home-hero h1{font-size:34px}
  .home-hero .sub{margin-top:10px; font-size:16.5px}
  .home-hero .hh-shot{margin-top:16px}
  .home-hero .doors{margin-top:26px; gap:14px}
  .home-hero .door{padding:15px 17px}
  .home-hero .door-k{font-size:12px; letter-spacing:.08em}
  .home-hero .door-h{font-size:21px}
  .home-hero .door-p{font-size:15.5px}
  /* the parachute photograph covers the partners story, so that door gives its stamp-sized copy back.
     The owners door keeps the founder's 2001 card: it is the one image on the page that says a person
     is behind this, which is exactly what a seller is looking for. */
  .home-hero .door-partners .door-pic{display:none}
  .home-hero .door-partners{grid-template-columns:minmax(0,1fr)}
  .home-hero .door-owners .door-pic.tallpic{width:clamp(68px,19vw,86px); margin-top:-12px}
}
/* the home header's button belongs to phones, where the audience switch bar is not shown and the doors
   sit below the photograph. Above 760px the switch is back in the header and the doors are already in view. */
.nav-cta-phone{display:none}
@media (max-width:760px){ .nav-cta-phone{display:inline-flex} }

/* the smallest phones cannot hold the photograph and two whole doors, and the doors matter more */
@media (max-width:360px){
  .hh-shot img{aspect-ratio:2.7/1; object-position:50% 26%}   /* the tighter band would otherwise crop the children's heads */
  .home-hero h1{font-size:30px}
}

/* a plain section that follows another plain section shares its background, so the seam
   needs one padding, not two (was 120 + 120 = 240px of empty paper on desktop) */
.sect.seam{padding-top:clamp(24px,3vw,40px)}
.sect.seam-out{padding-bottom:clamp(34px,5vw,60px)}

/* ================= partners: program flip cards =================
   Each card stacks a front (photo and summary) and a back (ages and a request button) in ONE grid cell, so the
   card is as tall as its taller face and nothing jumps when it turns. The front's flip button stretches over the
   whole face. Both faces swap visibility at the half-way point, the moment the card is edge-on, so the turn reads
   right even where a browser flattens the 3D and ignores backface-visibility (Playwright's WebKit does). Reduced
   motion swaps the faces without turning. Without JavaScript the back sits under the front as one long card. */
.prog-inner{display:grid; position:relative; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transition:transform .62s cubic-bezier(.45,.05,.55,.95)}
.prog.flipped .prog-inner{transform:rotateY(180deg)}
.prog-face{grid-area:1 / 1; -webkit-backface-visibility:hidden; backface-visibility:hidden; transition:visibility 0s linear .31s}
.prog-front{position:relative; transform:rotateY(0deg) translateZ(1px); transition:visibility 0s linear .31s, transform .13s ease, box-shadow .13s ease}
.prog-back{transform:rotateY(180deg) translateZ(1px); visibility:hidden}
.prog.flipped .prog-front{visibility:hidden}
.prog.flipped .prog-back{visibility:visible}
.prog-front .prog-body{flex:1 1 auto; display:flex; flex-direction:column}
@media (hover:hover){ html.js .prog:not(.flipped) .prog-front:hover{transform:rotateY(0deg) translateZ(1px) translate(-3px,-3px); box-shadow:10px 10px 0 var(--shadow-c)} }
.prog-flip{align-self:flex-start; margin-top:auto; padding:14px 0 0; display:inline-flex; align-items:center; gap:8px; background:none; border:0; font:inherit; font-weight:700; font-size:15.5px; color:var(--royal-text); cursor:pointer; text-align:left}
.prog-flip i{font-style:normal; font-size:19px; line-height:1; display:inline-block; transition:transform .3s ease}
@media (hover:hover){ .prog-front:hover .prog-flip i{transform:rotate(180deg)} .prog-front:hover .prog-flip .ul{text-decoration:underline; text-underline-offset:3px} }
.prog-flip::after{content:""; position:absolute; inset:0; z-index:3; border-radius:15px}   /* the whole front is the button */
.prog-flip:focus-visible{outline:none}
.prog-flip:focus-visible::after{outline:3px solid var(--royal-text); outline-offset:-7px}

.pb-top{display:flex; align-items:center; gap:14px; padding:16px 20px; background:var(--royal); color:#FFFBEF; border-bottom:2.5px solid #232A46}
.pb-logo{flex:none; display:flex; align-items:center; height:52px; padding:6px 10px; background:#FFFFFF; border:2.5px solid #232A46; border-radius:11px; box-shadow:3px 3px 0 #232A46}
.pb-logo img{display:block; max-height:36px; max-width:112px; width:auto; height:auto}
.pb-h{font-size:clamp(22px,2.4vw,26px); font-weight:800; line-height:1.05; color:#FFFBEF; margin:0; min-width:0}
.pb-h:focus{outline:none}
.pb-h:focus-visible{outline:3px solid var(--sun); outline-offset:3px; border-radius:4px}
.pb-body{flex:1 1 auto; display:flex; flex-direction:column; padding:16px 22px 22px}
.pb-k{font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--royal-text); margin:0}
.pb-ages{list-style:none; margin:8px 0 0; padding:0}
.pb-ages li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:2px dashed var(--paperline)}
.pb-ages li:last-child{border-bottom:0}
.pb-ages b{font-family:var(--disp); font-weight:800; font-size:18px; line-height:1.15; min-width:0}
.pb-ages span{flex:none; font-weight:700; font-size:14px; white-space:nowrap; border:2px solid var(--ink); border-radius:999px; padding:3px 11px}
.pb-one{margin:4px 0 0; font-family:var(--disp); font-weight:800; font-size:clamp(34px,4vw,44px); line-height:1}
.pb-p{margin:12px 0 0; font-size:16px; color:var(--ink-soft)}
.pb-acts{margin-top:auto; padding-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px}
.pb-ask{text-align:center; line-height:1.25}
@media (min-width:861px){ .prog:not(.wide) .pb-acts{flex-direction:column; align-items:flex-start} }
.pb-flipback{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 2px; background:none; border:0; font:inherit; font-weight:700; font-size:15px; color:var(--ink); cursor:pointer; text-decoration:none}
.pb-flipback i{font-style:normal; font-size:18px}
.pb-flipback .ul{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px}
@media (max-width:860px){ .pb-ask{flex:1 1 100%; font-size:16px; padding:12px 18px} .pb-top{padding:13px 18px} .pb-logo{display:none} .pb-h{font-size:22px} .pb-body{padding:12px 18px 16px} .pb-ages b{font-size:17px} .pb-p{font-size:15.5px} .pb-acts{padding-top:14px; gap:4px 18px} }
@media (min-width:701px){ .prog.wide .pb-body{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); column-gap:28px; align-content:center} .prog.wide .pb-k, .prog.wide .pb-one{grid-column:1} .prog.wide .pb-p{grid-column:2; grid-row:1 / span 2; margin:0; align-self:center} .prog.wide .pb-acts{grid-column:1 / -1; margin-top:0} }
@media (prefers-reduced-motion:reduce){
  .prog-inner, .prog-face, .prog-front{transition:none}
  .prog.flipped .prog-inner, .prog-back{transform:none}
  .prog-flip i{transition:none}
}
html:not(.js) .prog-inner{display:flex; flex-direction:column; transform:none; background:var(--card); border:2.5px solid var(--ink); border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden}
html:not(.js) .prog-face{border:0; border-radius:0; box-shadow:none; transform:none; visibility:visible}
html:not(.js) .prog-back{flex:1 1 auto; border-top:2px dashed var(--paperline)}
html:not(.js) .prog-flip, html:not(.js) .pb-flipback, html:not(.js) .pb-top{display:none}

/* request form: a phone line first, then the short form, then the optional details folded away */
#requestForm:focus{outline:none}
.talk{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 20px; padding-bottom:18px; border-bottom:2px dashed rgba(35,42,70,.2); font-weight:700; font-size:17px; color:#232A46}
.ask-note{margin:-6px 0 18px; font-weight:700; font-size:16px; color:#232A46}
.request .talk-call{background:#FFFFFF; color:#232A46; border-color:#232A46; box-shadow:3px 3px 0 #232A46; gap:8px; min-height:44px}
.talk-call svg{width:18px; height:18px; flex:none}
@media (hover:hover){ .request .talk-call:hover{box-shadow:5px 5px 0 #232A46} }
.ff-form .row-end{align-items:end}
.more{border:2.5px solid #232A46; border-radius:12px; background:#FFFFFF; color:#232A46}
.more > summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:10px 12px 10px 16px; cursor:pointer; font-weight:700; font-size:16.5px; color:#232A46; border-radius:9px; -webkit-tap-highlight-color:transparent}
.more > summary::-webkit-details-marker{display:none}
.more > summary small{font-weight:500; font-size:14px; opacity:.75}
.more-ic{flex:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--sun); border:2px solid #232A46; transition:transform .2s ease}
.more-ic svg{width:18px; height:18px; color:#232A46}
.more[open] .more-ic{transform:rotate(180deg)}
@media (hover:hover){ .more > summary:hover{background:#FFF6DE} }
.more > summary:focus-visible{outline:3px solid #232A46; outline-offset:3px}
.more[open] > summary{border-bottom:2px dashed rgba(35,42,70,.2); border-radius:9px 9px 0 0}
.more-body{display:grid; gap:16px; padding:16px 16px 18px}
@media (max-width:640px){ .more-body{padding:14px 12px 16px} }
@media (prefers-reduced-motion:reduce){ .more-ic{transition:none} }