/* Have It For Breakfast · haveitforbreakfast.com
   Clean editorial base. The brand steps in at set moments: the hero sign-off, the torn trailer edges,
   the ransom-note strips, the paper prints and cards, and the end card.
   Guidelines v2.1: Anton (display only), Archivo Black (labels), Roboto Condensed (everything else).
   Brand moments move "on twos" (stepped, 12 fps feel). Everything else eases.

   Order: tokens and base → type → controls → nav → shared layers → sections 01 to 11 in page order
   → footer, form extras, consent → responsive (960, 640, 600) → reduced motion.
   Each section keeps all of its rules in one place. Breakpoint overrides live at the end, grouped by width. */

:root{
  --ink:#0A0A0A; --ink-2:#2B2A28; --grey:#6B6862; --rule:#E2DED7; --paper:#EFEBE4; --white:#FFFFFF; --red:#FF0000; --offwhite:#EFEBE4;
  --display:'Anton', Impact, sans-serif; --label:'Archivo Black', 'Arial Black', sans-serif; --text:'Roboto Condensed', 'Arial Narrow', sans-serif;
  --gutter:clamp(20px,3vw,40px); --max:1320px; --tear:clamp(34px,4.6vw,84px);
  --ease:cubic-bezier(.16,1,.3,1);
  /* one light source, top left: tight contact shadow plus soft fall-off */
  --lift:0 1px 1px rgba(10,10,10,.18), 0 3px 6px rgba(10,10,10,.10), 0 22px 40px -14px rgba(10,10,10,.35);
  --lift-dark:0 1px 1px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.35), 0 30px 50px -16px rgba(0,0,0,.7);
}
*{ box-sizing:border-box }
/* nothing may widen the page sideways (print shuffle, tilted strips) */
html{ -webkit-text-size-adjust:100%; overflow-x:clip }
html.lenis, html.lenis body{ height:auto } .lenis.lenis-smooth{ scroll-behavior:auto !important }
body{ margin:0; background:var(--white); color:var(--ink); font:400 18px/1.6 var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip }
img, video{ display:block; max-width:100% }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px }
.skip{ position:absolute; left:-9999px } .skip:focus{ left:16px; top:16px; z-index:100; background:var(--white); padding:8px 12px }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
section{ position:relative }
.g{ width:min(var(--max), 100% - 2*var(--gutter)); margin-inline:auto; position:relative }
.dark{ background:var(--ink); color:var(--white) }
.paper{ background:var(--paper) }

/* ---------- type ---------- */
.label{ font:400 11px/1.4 var(--label); letter-spacing:.16em; text-transform:uppercase; margin:0 0 20px }
.sec-label{ display:flex; gap:14px; align-items:center }
.sec-label span{ color:var(--grey) } .dark .sec-label span{ color:#7D7A74 }
.h2{ font:700 clamp(40px,4.8vw,76px)/1.02 var(--text); letter-spacing:-.02em; margin:0 0 28px; max-width:16ch }
.h2-wide{ max-width:20ch }
.h3{ font:700 clamp(24px,2vw,30px)/1.15 var(--text); letter-spacing:-.01em; margin:0 0 12px }
.intro{ font-size:clamp(20px,1.55vw,23px); line-height:1.5; max-width:46ch; margin:0; color:var(--ink-2) }
.dark .intro{ color:#C9C5BE }
.lead{ font-weight:700; font-size:22px; line-height:1.4 }
.muted{ color:var(--grey) } .dark .muted{ color:#9C988F }
em{ font-style:normal; color:var(--red) }
/* no widows: balance headings, keep the last line of copy from holding one word */
h1,h2,h3,.h2,.h3,.scrub,.q-tier{ text-wrap:balance }
p,li,blockquote{ text-wrap:pretty }

/* ---------- controls ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; height:50px; padding:0 24px; font:400 12px/1 var(--label); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border:1.5px solid var(--ink); cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s }
.btn-ink{ background:var(--ink); color:var(--white) } .btn-ink:hover{ background:transparent; color:var(--ink) }
.btn-line{ background:transparent; color:var(--ink) } .btn-line:hover{ background:var(--ink); color:var(--white) }
.btn-red{ background:var(--red); border-color:var(--red); color:var(--white) } .btn-red:hover{ background:var(--white); border-color:var(--white); color:var(--ink) }
.link{ display:inline-flex; gap:8px; font:400 12px/1 var(--label); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding-bottom:6px; border-bottom:1.5px solid currentColor }
.link i{ font-style:normal; transition:transform .35s var(--ease) } .link:hover i{ transform:translateX(5px) }
.arrow{ width:46px; height:46px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); font-size:18px; cursor:pointer; transition:background .25s, color .25s }
.arrow:hover{ background:var(--ink); color:var(--white) }
.arrow-light{ border-color:#5B5853; color:var(--white) } .arrow-light:hover{ background:var(--white); color:var(--ink); border-color:var(--white) }

/* ---------- nav ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:50; height:76px; display:flex; align-items:center; gap:32px; padding:0 var(--gutter); transition:transform .5s var(--ease), background .3s, box-shadow .3s }
.nav.solid{ background:rgba(255,255,255,.94); backdrop-filter:blur(8px); box-shadow:0 1px 0 var(--rule) }
.nav.on-dark.solid{ background:rgba(10,10,10,.92); box-shadow:0 1px 0 #222 }
.nav.hide{ transform:translateY(-100%) }
.nav-logo{ position:relative; display:block; width:104px }
.nav-logo img{ width:100%; height:auto; transition:opacity .3s }
.nav-logo .lg-light{ position:absolute; inset:0; opacity:0 }
.nav.on-dark .lg-dark{ opacity:0 } .nav.on-dark .lg-light{ opacity:1 }
/* over the hero collage the logo turns white, with a soft shadow, until the nav turns solid */
.nav:not(.solid):not(.on-dark) .lg-dark{ opacity:0 }
.nav:not(.solid):not(.on-dark) .lg-light{ opacity:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 2px 10px rgba(0,0,0,.45)) }
.nav-links{ display:flex; gap:28px; margin-left:auto }
.nav-links a{ font:500 15px/1 var(--text); text-decoration:none; position:relative; padding:6px 0 }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease) }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1) }
.nav.on-dark .nav-links a, .nav.on-dark .btn-line{ color:var(--white) }
.nav.on-dark .nav-cta{ background:var(--white); color:var(--ink); border-color:var(--white) }
.nav-cta{ height:42px }

/* ---------- torn edges (generated textures) ---------- */
.tear{ position:absolute; left:0; right:0; height:var(--tear); pointer-events:none; z-index:3; background:center top/100% 100% no-repeat }
.tear-up{ top:calc(-.6 * var(--tear)); background-image:url(assets/hifb_tear.png) }
.tear-down{ top:calc(-.6 * var(--tear)); background-image:url(assets/hifb_tear.png); transform:scaleY(-1) }

/* ---------- reveals (clean layer) ---------- */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
[data-reveal].in{ opacity:1; transform:none }
[data-split] .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em }
[data-split] .w > span{ display:inline-block; transform:translateY(105%); transition:transform 1s var(--ease); transition-delay:calc(var(--k) * 45ms) }
[data-split].in .w > span{ transform:none }
@keyframes rise{ to{ transform:none } }

/* ---------- brand layer: torn strips, landing on twos ---------- */
.strip{ display:inline-block; font:400 clamp(30px,4.2vw,64px)/1 var(--display); text-transform:uppercase; letter-spacing:.005em; padding:.2em .5em .16em; color:var(--ink); background:url(assets/strip_white0.webp) center/100% 100% no-repeat; filter:drop-shadow(0 2px 1px rgba(10,10,10,.18)) drop-shadow(0 10px 14px rgba(10,10,10,.18)); opacity:0 }
.strip:nth-of-type(3n+2){ background-image:url(assets/strip_white1.webp) } .strip:nth-of-type(3n){ background-image:url(assets/strip_white2.webp) }
.strip.s-black{ background-image:url(assets/strip_black0.webp); color:var(--offwhite) }
.strip.s-black:nth-of-type(odd){ background-image:url(assets/strip_black1.webp) }
.strip.s-red{ color:var(--red); text-shadow:.05em .05em 0 var(--ink) }
.strip.s-black.s-red{ text-shadow:.05em .05em 0 #000 }
[data-strips].in .strip{ animation:slam .25s steps(3,end) forwards; animation-delay:calc(var(--n) * 170ms) }
@keyframes slam{ 0%{ opacity:0; transform:scale(1.32) rotate(calc(var(--rot) * 3)) } 34%{ opacity:1 } 100%{ opacity:1; transform:scale(1) rotate(var(--rot)) } }

/* shared media frame with a play button (episode cards) */
.media{ position:relative; display:block; overflow:hidden; background:#DDD }
.media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .7s var(--ease), transform 1s var(--ease) }
.media:hover img{ filter:none; transform:scale(1.04) }
.play{ position:absolute; left:24px; bottom:24px; width:64px; height:64px; border-radius:50%; background:var(--white); display:grid; place-items:center; transition:transform .4s var(--ease), background .3s }
.play svg{ width:24px; fill:var(--ink); margin-left:3px }
.media:hover .play{ transform:scale(1.08); background:var(--red) } .media:hover .play svg{ fill:var(--white) }

/* ---------- 01 hero · the sign-off, with the headline in place of the logo ---------- */
.hero.hx{ padding:0; min-height:0; background:#d9d5cf; overflow:hidden }
.hx-stage{ position:relative; height:100svh; min-height:620px; overflow:hidden }
.hx-box{ position:absolute; left:50%; top:50%; width:max(100%, calc(max(100svh,620px) * 16 / 9)); aspect-ratio:16/9; transform:translate(-50%,-50%) }
.hx-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.hx-type{ position:absolute; left:51%; top:52%; transform:translate(-50%,-50%); width:56%; text-align:center }
.hx-title{ font:400 calc(var(--bw,1600px) * .052)/.96 var(--display); text-transform:uppercase; margin:0; isolation:isolate }
.hx-title > span{ display:block; position:relative }
/* underline: the end-title brush stroke, 20% slimmer, its top 20% tucked behind the last line */
.hx-ul{ position:absolute; left:48%; width:calc(var(--bw,1600px) * .34); height:calc(var(--bw,1600px) * .34 * 132 / 673); top:calc(100% - .1em); object-fit:fill; transform:translate(-50%,-20%); z-index:-1; clip-path:inset(0 100% 0 0) }
.hx-sub{ margin-top:calc(var(--bw,1600px) * .05) }
.hx-sub p{ font-size:calc(var(--bw,1600px) * .0105); line-height:1.45; max-width:58ch; margin:0 auto calc(var(--bw,1600px) * .01); color:var(--ink-2) }
.hx-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.hx-band{ display:none }
/* the sequence: hidden until it plays; reduced motion shows the end state */
.hx.ready .hx-title > span{ opacity:0 }
.hx.ready .hx-sub{ opacity:0 }
.hx.go .hx-title > span{ animation:hxslam .25s steps(3,jump-none) forwards; animation-delay:calc(var(--n) * .17s) }
.hx.go .hx-ul{ animation:hxwipe .25s steps(3,jump-none) .78s forwards }
.hx.go .hx-sub{ animation:hxon .01s steps(1) 1.1s forwards }
@keyframes hxslam{ 0%{ opacity:1; transform:scale(1.32) rotate(-2deg) } 100%{ opacity:1; transform:none } }
@keyframes hxwipe{ to{ clip-path:inset(0 0 0 0) } }
@keyframes hxon{ to{ opacity:1 } }

/* ---------- 02 trailer · full-bleed silent loop, torn paper top and bottom ---------- */
.tr-bleed{ position:relative; z-index:2; padding:0; background:transparent; color:#fff; margin-top:calc(-1 * var(--tear));
  -webkit-clip-path:polygon(0.00% calc(var(--tear) * 0.733), 0.50% calc(var(--tear) * 0.733), 1.00% calc(var(--tear) * 0.740), 1.50% calc(var(--tear) * 0.748), 2.00% calc(var(--tear) * 0.756), 2.50% calc(var(--tear) * 0.756), 3.00% calc(var(--tear) * 0.763), 3.50% calc(var(--tear) * 0.756), 4.00% calc(var(--tear) * 0.740), 4.50% calc(var(--tear) * 0.771), 5.00% calc(var(--tear) * 0.824), 5.50% calc(var(--tear) * 0.855), 6.00% calc(var(--tear) * 0.870), 6.50% calc(var(--tear) * 0.870), 7.00% calc(var(--tear) * 0.847), 7.50% calc(var(--tear) * 0.855), 8.00% calc(var(--tear) * 0.901), 8.50% calc(var(--tear) * 0.924), 9.00% calc(var(--tear) * 0.916), 9.50% calc(var(--tear) * 0.908), 10.00% calc(var(--tear) * 0.916), 10.50% calc(var(--tear) * 0.954), 11.00% calc(var(--tear) * 0.939), 11.50% calc(var(--tear) * 0.947), 12.00% calc(var(--tear) * 0.939), 12.50% calc(var(--tear) * 0.962), 13.00% calc(var(--tear) * 0.977), 13.50% calc(var(--tear) * 0.969), 14.00% calc(var(--tear) * 0.939), 14.50% calc(var(--tear) * 0.954), 15.00% calc(var(--tear) * 0.931), 15.50% calc(var(--tear) * 0.870), 16.00% calc(var(--tear) * 0.809), 16.50% calc(var(--tear) * 0.794), 17.00% calc(var(--tear) * 0.756), 17.50% calc(var(--tear) * 0.725), 18.00% calc(var(--tear) * 0.733), 18.50% calc(var(--tear) * 0.725), 19.00% calc(var(--tear) * 0.695), 19.50% calc(var(--tear) * 0.702), 20.00% calc(var(--tear) * 0.664), 20.50% calc(var(--tear) * 0.649), 21.00% calc(var(--tear) * 0.634), 21.50% calc(var(--tear) * 0.588), 22.00% calc(var(--tear) * 0.573), 22.50% calc(var(--tear) * 0.626), 23.00% calc(var(--tear) * 0.618), 23.50% calc(var(--tear) * 0.664), 24.00% calc(var(--tear) * 0.695), 24.50% calc(var(--tear) * 0.672), 25.00% calc(var(--tear) * 0.725), 25.50% calc(var(--tear) * 0.725), 26.00% calc(var(--tear) * 0.718), 26.50% calc(var(--tear) * 0.733), 27.00% calc(var(--tear) * 0.733), 27.50% calc(var(--tear) * 0.710), 28.00% calc(var(--tear) * 0.687), 28.50% calc(var(--tear) * 0.725), 29.00% calc(var(--tear) * 0.702), 29.50% calc(var(--tear) * 0.656), 30.00% calc(var(--tear) * 0.687), 30.50% calc(var(--tear) * 0.740), 31.00% calc(var(--tear) * 0.779), 31.50% calc(var(--tear) * 0.786), 32.00% calc(var(--tear) * 0.779), 32.50% calc(var(--tear) * 0.763), 33.00% calc(var(--tear) * 0.802), 33.50% calc(var(--tear) * 0.847), 34.00% calc(var(--tear) * 0.855), 34.50% calc(var(--tear) * 0.847), 35.00% calc(var(--tear) * 0.855), 35.50% calc(var(--tear) * 0.870), 36.00% calc(var(--tear) * 0.901), 36.50% calc(var(--tear) * 0.901), 37.00% calc(var(--tear) * 0.916), 37.50% calc(var(--tear) * 0.908), 38.00% calc(var(--tear) * 0.939), 38.50% calc(var(--tear) * 0.947), 39.00% calc(var(--tear) * 0.931), 39.50% calc(var(--tear) * 0.931), 40.00% calc(var(--tear) * 0.947), 40.50% calc(var(--tear) * 0.908), 41.00% calc(var(--tear) * 0.870), 41.50% calc(var(--tear) * 0.817), 42.00% calc(var(--tear) * 0.809), 42.50% calc(var(--tear) * 0.786), 43.00% calc(var(--tear) * 0.756), 43.50% calc(var(--tear) * 0.771), 44.00% calc(var(--tear) * 0.771), 44.50% calc(var(--tear) * 0.748), 45.00% calc(var(--tear) * 0.763), 45.50% calc(var(--tear) * 0.740), 46.00% calc(var(--tear) * 0.718), 46.50% calc(var(--tear) * 0.725), 47.00% calc(var(--tear) * 0.702), 47.50% calc(var(--tear) * 0.672), 48.00% calc(var(--tear) * 0.679), 48.50% calc(var(--tear) * 0.702), 49.00% calc(var(--tear) * 0.710), 49.50% calc(var(--tear) * 0.718), 50.00% calc(var(--tear) * 0.710), 50.50% calc(var(--tear) * 0.679), 51.00% calc(var(--tear) * 0.649), 51.50% calc(var(--tear) * 0.634), 52.00% calc(var(--tear) * 0.634), 52.50% calc(var(--tear) * 0.641), 53.00% calc(var(--tear) * 0.649), 53.50% calc(var(--tear) * 0.656), 54.00% calc(var(--tear) * 0.725), 54.50% calc(var(--tear) * 0.725), 55.00% calc(var(--tear) * 0.756), 55.50% calc(var(--tear) * 0.786), 56.00% calc(var(--tear) * 0.779), 56.50% calc(var(--tear) * 0.809), 57.00% calc(var(--tear) * 0.786), 57.50% calc(var(--tear) * 0.794), 58.00% calc(var(--tear) * 0.817), 58.50% calc(var(--tear) * 0.817), 59.00% calc(var(--tear) * 0.794), 59.50% calc(var(--tear) * 0.763), 60.00% calc(var(--tear) * 0.809), 60.50% calc(var(--tear) * 0.840), 61.00% calc(var(--tear) * 0.824), 61.50% calc(var(--tear) * 0.794), 62.00% calc(var(--tear) * 0.740), 62.50% calc(var(--tear) * 0.718), 63.00% calc(var(--tear) * 0.718), 63.50% calc(var(--tear) * 0.702), 64.00% calc(var(--tear) * 0.687), 64.50% calc(var(--tear) * 0.656), 65.00% calc(var(--tear) * 0.656), 65.50% calc(var(--tear) * 0.672), 66.00% calc(var(--tear) * 0.679), 66.50% calc(var(--tear) * 0.687), 67.00% calc(var(--tear) * 0.702), 67.50% calc(var(--tear) * 0.740), 68.00% calc(var(--tear) * 0.718), 68.50% calc(var(--tear) * 0.725), 69.00% calc(var(--tear) * 0.748), 69.50% calc(var(--tear) * 0.771), 70.00% calc(var(--tear) * 0.794), 70.50% calc(var(--tear) * 0.809), 71.00% calc(var(--tear) * 0.809), 71.50% calc(var(--tear) * 0.855), 72.00% calc(var(--tear) * 0.847), 72.50% calc(var(--tear) * 0.885), 73.00% calc(var(--tear) * 0.901), 73.50% calc(var(--tear) * 0.885), 74.00% calc(var(--tear) * 0.885), 74.50% calc(var(--tear) * 0.847), 75.00% calc(var(--tear) * 0.870), 75.50% calc(var(--tear) * 0.863), 76.00% calc(var(--tear) * 0.840), 76.50% calc(var(--tear) * 0.870), 77.00% calc(var(--tear) * 0.893), 77.50% calc(var(--tear) * 0.878), 78.00% calc(var(--tear) * 0.893), 78.50% calc(var(--tear) * 0.870), 79.00% calc(var(--tear) * 0.870), 79.50% calc(var(--tear) * 0.840), 80.00% calc(var(--tear) * 0.756), 80.50% calc(var(--tear) * 0.710), 81.00% calc(var(--tear) * 0.718), 81.50% calc(var(--tear) * 0.710), 82.00% calc(var(--tear) * 0.702), 82.50% calc(var(--tear) * 0.664), 83.00% calc(var(--tear) * 0.634), 83.50% calc(var(--tear) * 0.603), 84.00% calc(var(--tear) * 0.595), 84.50% calc(var(--tear) * 0.595), 85.00% calc(var(--tear) * 0.611), 85.50% calc(var(--tear) * 0.618), 86.00% calc(var(--tear) * 0.611), 86.50% calc(var(--tear) * 0.603), 87.00% calc(var(--tear) * 0.603), 87.50% calc(var(--tear) * 0.588), 88.00% calc(var(--tear) * 0.603), 88.50% calc(var(--tear) * 0.588), 89.00% calc(var(--tear) * 0.618), 89.50% calc(var(--tear) * 0.618), 90.00% calc(var(--tear) * 0.603), 90.50% calc(var(--tear) * 0.618), 91.00% calc(var(--tear) * 0.649), 91.50% calc(var(--tear) * 0.695), 92.00% calc(var(--tear) * 0.695), 92.50% calc(var(--tear) * 0.679), 93.00% calc(var(--tear) * 0.679), 93.50% calc(var(--tear) * 0.656), 94.00% calc(var(--tear) * 0.649), 94.50% calc(var(--tear) * 0.672), 95.00% calc(var(--tear) * 0.695), 95.50% calc(var(--tear) * 0.756), 96.00% calc(var(--tear) * 0.748), 96.50% calc(var(--tear) * 0.748), 97.00% calc(var(--tear) * 0.763), 97.50% calc(var(--tear) * 0.786), 98.00% calc(var(--tear) * 0.779), 98.50% calc(var(--tear) * 0.756), 99.00% calc(var(--tear) * 0.748), 99.50% calc(var(--tear) * 0.786), 100.00% calc(var(--tear) * 0.817), 100% 100%, 0% 100%);
  clip-path:polygon(0.00% calc(var(--tear) * 0.733), 0.50% calc(var(--tear) * 0.733), 1.00% calc(var(--tear) * 0.740), 1.50% calc(var(--tear) * 0.748), 2.00% calc(var(--tear) * 0.756), 2.50% calc(var(--tear) * 0.756), 3.00% calc(var(--tear) * 0.763), 3.50% calc(var(--tear) * 0.756), 4.00% calc(var(--tear) * 0.740), 4.50% calc(var(--tear) * 0.771), 5.00% calc(var(--tear) * 0.824), 5.50% calc(var(--tear) * 0.855), 6.00% calc(var(--tear) * 0.870), 6.50% calc(var(--tear) * 0.870), 7.00% calc(var(--tear) * 0.847), 7.50% calc(var(--tear) * 0.855), 8.00% calc(var(--tear) * 0.901), 8.50% calc(var(--tear) * 0.924), 9.00% calc(var(--tear) * 0.916), 9.50% calc(var(--tear) * 0.908), 10.00% calc(var(--tear) * 0.916), 10.50% calc(var(--tear) * 0.954), 11.00% calc(var(--tear) * 0.939), 11.50% calc(var(--tear) * 0.947), 12.00% calc(var(--tear) * 0.939), 12.50% calc(var(--tear) * 0.962), 13.00% calc(var(--tear) * 0.977), 13.50% calc(var(--tear) * 0.969), 14.00% calc(var(--tear) * 0.939), 14.50% calc(var(--tear) * 0.954), 15.00% calc(var(--tear) * 0.931), 15.50% calc(var(--tear) * 0.870), 16.00% calc(var(--tear) * 0.809), 16.50% calc(var(--tear) * 0.794), 17.00% calc(var(--tear) * 0.756), 17.50% calc(var(--tear) * 0.725), 18.00% calc(var(--tear) * 0.733), 18.50% calc(var(--tear) * 0.725), 19.00% calc(var(--tear) * 0.695), 19.50% calc(var(--tear) * 0.702), 20.00% calc(var(--tear) * 0.664), 20.50% calc(var(--tear) * 0.649), 21.00% calc(var(--tear) * 0.634), 21.50% calc(var(--tear) * 0.588), 22.00% calc(var(--tear) * 0.573), 22.50% calc(var(--tear) * 0.626), 23.00% calc(var(--tear) * 0.618), 23.50% calc(var(--tear) * 0.664), 24.00% calc(var(--tear) * 0.695), 24.50% calc(var(--tear) * 0.672), 25.00% calc(var(--tear) * 0.725), 25.50% calc(var(--tear) * 0.725), 26.00% calc(var(--tear) * 0.718), 26.50% calc(var(--tear) * 0.733), 27.00% calc(var(--tear) * 0.733), 27.50% calc(var(--tear) * 0.710), 28.00% calc(var(--tear) * 0.687), 28.50% calc(var(--tear) * 0.725), 29.00% calc(var(--tear) * 0.702), 29.50% calc(var(--tear) * 0.656), 30.00% calc(var(--tear) * 0.687), 30.50% calc(var(--tear) * 0.740), 31.00% calc(var(--tear) * 0.779), 31.50% calc(var(--tear) * 0.786), 32.00% calc(var(--tear) * 0.779), 32.50% calc(var(--tear) * 0.763), 33.00% calc(var(--tear) * 0.802), 33.50% calc(var(--tear) * 0.847), 34.00% calc(var(--tear) * 0.855), 34.50% calc(var(--tear) * 0.847), 35.00% calc(var(--tear) * 0.855), 35.50% calc(var(--tear) * 0.870), 36.00% calc(var(--tear) * 0.901), 36.50% calc(var(--tear) * 0.901), 37.00% calc(var(--tear) * 0.916), 37.50% calc(var(--tear) * 0.908), 38.00% calc(var(--tear) * 0.939), 38.50% calc(var(--tear) * 0.947), 39.00% calc(var(--tear) * 0.931), 39.50% calc(var(--tear) * 0.931), 40.00% calc(var(--tear) * 0.947), 40.50% calc(var(--tear) * 0.908), 41.00% calc(var(--tear) * 0.870), 41.50% calc(var(--tear) * 0.817), 42.00% calc(var(--tear) * 0.809), 42.50% calc(var(--tear) * 0.786), 43.00% calc(var(--tear) * 0.756), 43.50% calc(var(--tear) * 0.771), 44.00% calc(var(--tear) * 0.771), 44.50% calc(var(--tear) * 0.748), 45.00% calc(var(--tear) * 0.763), 45.50% calc(var(--tear) * 0.740), 46.00% calc(var(--tear) * 0.718), 46.50% calc(var(--tear) * 0.725), 47.00% calc(var(--tear) * 0.702), 47.50% calc(var(--tear) * 0.672), 48.00% calc(var(--tear) * 0.679), 48.50% calc(var(--tear) * 0.702), 49.00% calc(var(--tear) * 0.710), 49.50% calc(var(--tear) * 0.718), 50.00% calc(var(--tear) * 0.710), 50.50% calc(var(--tear) * 0.679), 51.00% calc(var(--tear) * 0.649), 51.50% calc(var(--tear) * 0.634), 52.00% calc(var(--tear) * 0.634), 52.50% calc(var(--tear) * 0.641), 53.00% calc(var(--tear) * 0.649), 53.50% calc(var(--tear) * 0.656), 54.00% calc(var(--tear) * 0.725), 54.50% calc(var(--tear) * 0.725), 55.00% calc(var(--tear) * 0.756), 55.50% calc(var(--tear) * 0.786), 56.00% calc(var(--tear) * 0.779), 56.50% calc(var(--tear) * 0.809), 57.00% calc(var(--tear) * 0.786), 57.50% calc(var(--tear) * 0.794), 58.00% calc(var(--tear) * 0.817), 58.50% calc(var(--tear) * 0.817), 59.00% calc(var(--tear) * 0.794), 59.50% calc(var(--tear) * 0.763), 60.00% calc(var(--tear) * 0.809), 60.50% calc(var(--tear) * 0.840), 61.00% calc(var(--tear) * 0.824), 61.50% calc(var(--tear) * 0.794), 62.00% calc(var(--tear) * 0.740), 62.50% calc(var(--tear) * 0.718), 63.00% calc(var(--tear) * 0.718), 63.50% calc(var(--tear) * 0.702), 64.00% calc(var(--tear) * 0.687), 64.50% calc(var(--tear) * 0.656), 65.00% calc(var(--tear) * 0.656), 65.50% calc(var(--tear) * 0.672), 66.00% calc(var(--tear) * 0.679), 66.50% calc(var(--tear) * 0.687), 67.00% calc(var(--tear) * 0.702), 67.50% calc(var(--tear) * 0.740), 68.00% calc(var(--tear) * 0.718), 68.50% calc(var(--tear) * 0.725), 69.00% calc(var(--tear) * 0.748), 69.50% calc(var(--tear) * 0.771), 70.00% calc(var(--tear) * 0.794), 70.50% calc(var(--tear) * 0.809), 71.00% calc(var(--tear) * 0.809), 71.50% calc(var(--tear) * 0.855), 72.00% calc(var(--tear) * 0.847), 72.50% calc(var(--tear) * 0.885), 73.00% calc(var(--tear) * 0.901), 73.50% calc(var(--tear) * 0.885), 74.00% calc(var(--tear) * 0.885), 74.50% calc(var(--tear) * 0.847), 75.00% calc(var(--tear) * 0.870), 75.50% calc(var(--tear) * 0.863), 76.00% calc(var(--tear) * 0.840), 76.50% calc(var(--tear) * 0.870), 77.00% calc(var(--tear) * 0.893), 77.50% calc(var(--tear) * 0.878), 78.00% calc(var(--tear) * 0.893), 78.50% calc(var(--tear) * 0.870), 79.00% calc(var(--tear) * 0.870), 79.50% calc(var(--tear) * 0.840), 80.00% calc(var(--tear) * 0.756), 80.50% calc(var(--tear) * 0.710), 81.00% calc(var(--tear) * 0.718), 81.50% calc(var(--tear) * 0.710), 82.00% calc(var(--tear) * 0.702), 82.50% calc(var(--tear) * 0.664), 83.00% calc(var(--tear) * 0.634), 83.50% calc(var(--tear) * 0.603), 84.00% calc(var(--tear) * 0.595), 84.50% calc(var(--tear) * 0.595), 85.00% calc(var(--tear) * 0.611), 85.50% calc(var(--tear) * 0.618), 86.00% calc(var(--tear) * 0.611), 86.50% calc(var(--tear) * 0.603), 87.00% calc(var(--tear) * 0.603), 87.50% calc(var(--tear) * 0.588), 88.00% calc(var(--tear) * 0.603), 88.50% calc(var(--tear) * 0.588), 89.00% calc(var(--tear) * 0.618), 89.50% calc(var(--tear) * 0.618), 90.00% calc(var(--tear) * 0.603), 90.50% calc(var(--tear) * 0.618), 91.00% calc(var(--tear) * 0.649), 91.50% calc(var(--tear) * 0.695), 92.00% calc(var(--tear) * 0.695), 92.50% calc(var(--tear) * 0.679), 93.00% calc(var(--tear) * 0.679), 93.50% calc(var(--tear) * 0.656), 94.00% calc(var(--tear) * 0.649), 94.50% calc(var(--tear) * 0.672), 95.00% calc(var(--tear) * 0.695), 95.50% calc(var(--tear) * 0.756), 96.00% calc(var(--tear) * 0.748), 96.50% calc(var(--tear) * 0.748), 97.00% calc(var(--tear) * 0.763), 97.50% calc(var(--tear) * 0.786), 98.00% calc(var(--tear) * 0.779), 98.50% calc(var(--tear) * 0.756), 99.00% calc(var(--tear) * 0.748), 99.50% calc(var(--tear) * 0.786), 100.00% calc(var(--tear) * 0.817), 100% 100%, 0% 100%) }
.tr-fibre-wrap{ position:relative; height:0; z-index:6 }
.tr-fibre{ position:absolute; left:0; right:0; top:calc(-1 * var(--tear)); height:var(--tear); pointer-events:none; background:url(assets/tear_fibre.png) center top/100% 100% no-repeat }
/* the poster sits behind the video, so the trailer never shows an empty black box */
.tr-stage{ position:relative; height:min(86svh, 56.25vw); min-height:460px; overflow:hidden; background:#0A0A0A url(assets/trailer_poster.webp?v=2) center/cover no-repeat }
.tr-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.tr-shade{ position:absolute; inset:0; background:rgba(10,10,10,.38) }
.tr-copy{ position:relative; z-index:2; height:100%; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; padding-bottom:clamp(64px,9vw,120px) }
.tr-copy .label{ color:#fff }
.tr-copy .h2{ color:#fff; max-width:12ch }
.tr-h{ max-width:none; white-space:nowrap }
.tr-lede{ font-size:21px; color:rgba(255,255,255,.82); margin:14px 0 0 }
.tr-play{ display:flex; align-items:center; gap:16px; color:#fff; text-decoration:none; flex:none }
.tr-btn{ width:clamp(76px,7vw,104px); aspect-ratio:1; border-radius:50%; background:#fff; display:grid; place-items:center; transition:transform .4s var(--ease), background .3s }
.tr-btn svg{ width:34%; fill:var(--ink); margin-left:6% }
.tr-cta{ font:400 12px/1.4 var(--label); letter-spacing:.16em; text-transform:uppercase }
.tr-play:hover .tr-btn, .tr-play:focus-visible .tr-btn{ transform:scale(1.08); background:var(--red) }
.tr-play:hover .tr-btn svg, .tr-play:focus-visible .tr-btn svg{ fill:#fff }
.tr-tear-bottom{ top:auto; bottom:-2px; background-image:url(assets/hifb_tear_white.png); z-index:4 }
/* trailer player */
.tr-dialog{ padding:0; border:0; background:#000; width:min(92vw,1280px); max-width:none; aspect-ratio:16/9; overflow:visible }
.tr-dialog::backdrop{ background:rgba(10,10,10,.88) }
.tr-dialog video{ width:100%; height:100%; display:block; background:#000 }
.tr-close{ position:absolute; top:-52px; right:0; width:44px; height:44px; border:0; border-radius:50%; background:#fff; color:var(--ink); font:400 28px/1 var(--text); cursor:pointer }
.tr-close:hover,.tr-close:focus-visible{ background:var(--red); color:#fff }

/* ---------- 03 premise ---------- */
.premise{ padding:40px 0 140px; overflow-x:clip }
.scrub-wrap{ height:190vh }
.scrub-pin{ position:sticky; top:0; height:100vh; display:flex; align-items:center }
.scrub-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(32px,5vw,80px); align-items:center }
.scrub{ font:700 clamp(40px,5.4vw,88px)/1.03 var(--text); letter-spacing:-.025em; margin:0; max-width:17ch }
.scrub .sw{ color:#D6D2CB; transition:color .25s linear } .scrub .sw.on{ color:var(--ink) }
/* AI company cards stack as the statement lights up */
.ai-stack{ list-style:none; margin:0; padding:0; position:relative; height:calc(7 * var(--step) + var(--ch)); --step:clamp(40px,4vw,54px); --ch:clamp(130px,11vw,160px) }
.ai-card{ position:absolute; left:0; right:8%; top:calc(var(--i) * var(--step)); height:var(--ch); margin:0; background:#FBFAF7 url(assets/hifb_paper.jpg) center/cover; box-shadow:0 1px 1px rgba(10,10,10,.12), 0 -6px 16px rgba(10,10,10,.10), 0 14px 26px rgba(10,10,10,.14);
  display:flex; align-items:flex-start; gap:14px; padding:clamp(10px,1vw,14px) 20px; box-sizing:border-box; z-index:var(--i);
  --r:0deg; --dx:0px; transform:translate(var(--dx), -36px) rotate(var(--r)) scale(1.05); opacity:0 }
.ai-card:nth-child(1){ --r:-1.6deg; --dx:0px } .ai-card:nth-child(2){ --r:1.3deg; --dx:14px } .ai-card:nth-child(3){ --r:-0.7deg; --dx:4px } .ai-card:nth-child(4){ --r:1.8deg; --dx:20px }
.ai-card:nth-child(5){ --r:-1.2deg; --dx:8px } .ai-card:nth-child(6){ --r:0.8deg; --dx:18px } .ai-card:nth-child(7){ --r:-1.5deg; --dx:2px } .ai-card:nth-child(8){ --r:1.1deg; --dx:12px }
.ai-card img{ width:clamp(22px,2vw,28px); height:clamp(22px,2vw,28px); flex:none }
.ai-card b{ font:400 clamp(20px,1.8vw,26px)/1.1 var(--display); text-transform:uppercase; letter-spacing:.01em; color:var(--ink) }
.ai-card.on{ opacity:1; transform:translate(var(--dx), 0) rotate(var(--r)) scale(1); transition:transform .25s steps(3,jump-none), opacity .17s steps(2,jump-none) }
.premise-grid{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(40px,7vw,120px); align-items:start }
.premise-text p, .premise-close p{ margin:0 0 22px; max-width:60ch }
/* photos: paper prints that shuffle */
.prints{ position:relative; margin:0; aspect-ratio:4/5 }
.print{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff; padding:clamp(10px,1.1vw,16px) clamp(10px,1.1vw,16px) clamp(40px,4vw,60px); box-sizing:border-box;
  box-shadow:0 1px 1px rgba(10,10,10,.14), 0 18px 34px rgba(10,10,10,.2); transform:rotate(var(--r,0deg)) translate(var(--x,0),var(--y,0)); transition:transform .25s steps(3,jump-none) }
.print:nth-of-type(1){ --r:-2.2deg } .print:nth-of-type(2){ --r:1.6deg; --x:10px } .print:nth-of-type(3){ --r:-.6deg; --x:-6px; --y:6px }
.print.top{ z-index:3 } .print.mid{ z-index:2 } .print.low{ z-index:1 }
.print.leave{ z-index:4; transform:rotate(9deg) translate(70%,-6%); transition:transform .33s steps(4,jump-none) }
.prints figcaption{ position:absolute; left:0; right:0; bottom:clamp(12px,1.4vw,20px); z-index:5; display:flex; justify-content:space-between; padding:0 clamp(16px,1.6vw,24px); font:400 11px/1.4 var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); pointer-events:none }
.strips-quote{ margin:140px 0 120px; display:flex; flex-direction:column; align-items:flex-start; gap:6px }
.strips-quote .strip:nth-of-type(1){ --n:0; --rot:-1.2deg } .strips-quote .strip:nth-of-type(2){ --n:1; --rot:.8deg; margin-left:4vw }
.strips-quote .strip:nth-of-type(3){ --n:2; --rot:-.6deg; margin-left:1vw } .strips-quote .strip:nth-of-type(4){ --n:3; --rot:1deg; margin-left:6vw }
.strips-quote .strip:nth-of-type(5){ --n:4; --rot:-.8deg; margin-left:2vw }
.strips-quote cite{ margin-top:18px; font:400 11px/1 var(--label); letter-spacing:.16em; text-transform:uppercase; font-style:normal; color:var(--grey) }
.premise-close{ columns:2; column-gap:clamp(40px,6vw,96px) }
.premise-close p{ break-inside:avoid }
.join{ break-inside:avoid; padding-top:12px }
.socials{ display:flex; flex-wrap:wrap; gap:8px 20px }
.socials a{ font:400 11px/1 var(--label); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding:6px 0; border-bottom:1.5px solid transparent; transition:border-color .3s }
.socials a:hover{ border-color:currentColor }

/* ---------- 04 talks · pinned paper sheets ---------- */
.talks{ padding:150px 0 150px; overflow-x:clip }
.sec-head{ margin-bottom:72px }
.stack{ padding-bottom:6vh }
.sheet{ position:sticky; top:calc(118px + var(--i) * 20px); margin-bottom:24vh; min-height:360px; padding:clamp(28px,3.4vw,52px) clamp(28px,4vw,60px); display:grid; grid-template-rows:auto 1fr auto auto; color:var(--ink);
  background:linear-gradient(rgba(246,243,238,.84), rgba(246,243,238,.84)), url(assets/hifb_paper.jpg) center/cover; box-shadow:var(--lift-dark);
  transform:rotate(var(--tilt)) scale(var(--sc,1)); transform-origin:50% 0; transition:filter .2s linear; max-width:1080px }
.sheet:last-child{ margin-bottom:0 }
.sheet header{ display:flex; justify-content:space-between; align-items:baseline; padding-bottom:16px; border-bottom:1.5px solid var(--ink) }
.sheet-num{ font:400 34px/1 var(--display) }
.sheet header .label{ margin:0 }
.sheet h3{ font:700 clamp(28px,2.9vw,46px)/1.06 var(--text); letter-spacing:-.015em; margin:28px 0 18px; max-width:22ch }
.sheet p{ margin:0 0 24px; color:var(--ink-2) }
.sheet .link{ justify-self:start }

/* ---------- 05 about ---------- */
.about{ padding:150px 0 120px; overflow-x:clip }
/* credentials sit beside the headline */
.about-head{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(36px,6vw,100px); align-items:end }
.creds{ margin-top:clamp(36px,4vw,56px) }
.creds .label{ margin-bottom:14px }
.creds ul{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1.5px solid var(--ink) }
.creds li{ padding:16px 18px 18px 0; border-bottom:1px solid var(--rule); display:flex; flex-direction:column; gap:4px }
.creds b{ font:400 22px/1.05 var(--display); text-transform:uppercase }
.creds span{ font-size:15px; color:var(--grey) }
.about-head .creds{ margin:0 }
.about-head .creds ul{ grid-template-columns:1fr }
.about-head .creds li{ flex-direction:row; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 0 }
.about-head .creds span{ text-align:right }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1.5px solid var(--ink); margin-bottom:88px }
.stat{ padding:28px 24px 0 0 }
.stat b{ display:block; font:400 clamp(52px,5.6vw,92px)/1 var(--display); font-variant-numeric:tabular-nums }
.stat span{ display:block; margin-top:12px; font:400 11px/1.5 var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); max-width:24ch }
.about-cols{ columns:2; column-gap:clamp(40px,6vw,96px); margin-bottom:120px }
.about-cols p{ margin:0 0 22px; break-inside:avoid; color:var(--ink-2) }
.stage{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:0 clamp(40px,6vw,96px); align-items:start; margin-bottom:120px }
.stage > .label{ grid-column:1/-1 }
.stage-list{ list-style:none; margin:0; padding:0; border-top:1.5px solid var(--ink) }
.stage-list li{ display:grid; grid-template-columns:48px 1fr auto; align-items:baseline; gap:16px; padding:22px 0; border-bottom:1px solid var(--rule); cursor:default; transition:padding .45s var(--ease), color .3s }
.stage-list span{ font:400 11px/1 var(--label); letter-spacing:.14em; color:var(--grey) }
.stage-list b{ font:700 clamp(26px,2.6vw,40px)/1.05 var(--text); letter-spacing:-.015em }
.stage-list i{ font-style:normal; color:var(--grey) }
.stage-list li:hover{ padding-left:14px }
.stage-preview{ position:fixed; left:0; top:0; width:min(320px,26vw); aspect-ratio:4/3; z-index:40; pointer-events:none; overflow:hidden; box-shadow:var(--lift); opacity:0; transform:translate(-50%,-50%) scale(.9); transition:opacity .3s var(--ease), transform .4s var(--ease) }
.stage-preview.show{ opacity:1; transform:translate(-50%,-50%) scale(1) }
.stage-preview img{ width:100%; height:100%; object-fit:cover; object-position:50% 22% }
.stage-note{ padding-top:22px }
.clients .label{ color:var(--grey) }
.client-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--rule) }
.client-list li{ font:700 clamp(20px,1.8vw,28px)/1 var(--text); letter-spacing:-.01em; color:#A19D96; padding:26px 0; border-bottom:1px solid var(--rule); transition:color .3s }
.client-list li:hover{ color:var(--ink) }

/* ---------- 06 podcast, shorts and articles ---------- */
.podcast{ padding:40px 0 140px; border-top:1px solid var(--rule) }
.podcast .sec-head{ padding-top:110px }
.rail-head{ display:flex; justify-content:space-between; align-items:end; margin-bottom:22px }
.rail-head .label{ margin:0 } .rail-ctrl{ display:flex; gap:8px }
.rail{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(280px,27vw,400px); gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px max(var(--gutter), (100vw - var(--max))/2) 24px; scrollbar-width:none; cursor:grab; overscroll-behavior-x:contain }
.rail::-webkit-scrollbar{ display:none }
.rail.dragging{ cursor:grabbing; scroll-snap-type:none } .rail.dragging a{ pointer-events:none }
.ep{ scroll-snap-align:start; text-decoration:none; display:block }
.ep .media{ aspect-ratio:16/9 }
.ep-meta{ display:flex; justify-content:space-between; margin:16px 0 8px; font:400 11px/1 var(--label); letter-spacing:.14em; text-transform:uppercase }
.ep-meta span:last-child{ color:var(--grey) }
.ep h3{ font:700 20px/1.2 var(--text); margin:0; letter-spacing:-.005em }
.ep:hover .media img{ filter:none; transform:scale(1.04) }
.rail-foot{ margin-top:12px }
.shorts{ margin-top:140px; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(32px,5vw,80px); align-items:end }
.shorts-head .h3{ max-width:14ch }
.shorts-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.short{ text-decoration:none; display:block }
.short:nth-child(even){ transform:translateY(40px) }
.short-media{ aspect-ratio:9/16; overflow:hidden; background:#CFC9BF; box-shadow:var(--lift) }
.short-media video{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
.short:hover video{ transform:scale(1.03) }
.short p{ font:700 16px/1.25 var(--text); margin:14px 0 0 }
/* articles from Substack */
.articles{ margin-top:140px; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(32px,5vw,80px); align-items:start }
.articles-head .h3{ margin:14px 0 26px; max-width:18ch }
.article-list{ list-style:none; margin:0; padding:0; border-top:1.5px solid var(--ink) }
.article-list li{ border-bottom:1px solid var(--rule) }
.article-list a{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:6px 24px; padding:22px 0; color:var(--ink); text-decoration:none }
.article-date{ grid-row:span 2; font:400 11px/1.6 var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); padding-top:6px }
.article-list b{ font:700 clamp(22px,2vw,28px)/1.15 var(--text); letter-spacing:-.01em }
.article-sum{ color:var(--grey); font-size:17px; line-height:1.5 }
.article-list a:hover b, .article-list a:focus-visible b{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px }

/* ---------- 07 quiz (module styles live in quiz/quiz.css) ---------- */
#ai-native{ padding:140px 0 !important; background:var(--paper) !important }
#ai-native h2{ font-size:clamp(46px,5.4vw,88px) !important }
#ai-native h2 em{ text-shadow:none !important }
#ai-native .q-eyebrow{ border-color:rgba(10,10,10,.14) !important }
/* title as a ransom note */
.q-ransom{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:6px 0 28px }
.q-ransom .strip{ font-size:clamp(40px,5vw,78px) }
.q-ransom .strip:nth-of-type(1){ --n:0; --rot:-1.4deg } .q-ransom .strip:nth-of-type(2){ --n:1; --rot:.9deg; margin-left:3vw }
.q-ransom .strip:nth-of-type(3){ --n:2; --rot:-.7deg; margin-left:.6vw } .q-ransom .strip:nth-of-type(4){ --n:3; --rot:1.2deg; margin-left:5vw }
.q-scifi{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:8px 0 14px }
.q-scifi .strip{ font-size:clamp(26px,2.6vw,40px); opacity:1 }
.q-scifi .strip:nth-of-type(1){ --rot:-1.5deg } .q-scifi .strip:nth-of-type(2){ --rot:.8deg }

/* ---------- 08 testimonials ---------- */
.voices{ padding:150px 0 130px; overflow-x:clip }
.voice{ min-height:340px; display:grid; grid-template-columns:3fr 9fr; gap:48px; align-items:start; margin-top:40px }
.voice-name{ font:400 12px/1.4 var(--label); letter-spacing:.16em; text-transform:uppercase; padding-top:16px }
.voice blockquote{ font:700 clamp(30px,3.3vw,52px)/1.13 var(--text); letter-spacing:-.015em; margin:0 }
.voice blockquote .w{ display:inline-block; overflow:hidden; vertical-align:top }
.voice blockquote .w > span{ display:inline-block; transform:translateY(105%); animation:rise .8s var(--ease) forwards; animation-delay:calc(var(--k) * 18ms) }
.voice-who{ margin-top:26px; font:400 11px/1.5 var(--label); letter-spacing:.14em; text-transform:uppercase; color:#9C988F }
.voice-foot{ display:flex; align-items:center; gap:18px; margin-top:56px }
.voice-foot .label{ margin:0 }
.voice-bar{ flex:1; height:1.5px; background:#2A2927; position:relative; overflow:hidden }
.voice-bar i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--white) }
.voice-bar i.run{ width:100%; transition:width 7s linear }

/* ---------- 09 faq ---------- */
.faq{ padding:150px 0 140px }
.faq-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,6vw,96px); align-items:start }
.faq-side{ position:sticky; top:120px }
.faq-list{ border-top:1.5px solid var(--ink) }
.qa{ border-bottom:1px solid var(--rule) }
.qa button{ width:100%; display:flex; justify-content:space-between; gap:24px; align-items:center; background:none; border:0; padding:26px 0; text-align:left; cursor:pointer; font:700 clamp(20px,1.6vw,24px)/1.25 var(--text); color:var(--ink) }
.qa .pm{ position:relative; flex:0 0 18px; height:18px }
.qa .pm::before, .qa .pm::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:var(--ink); transition:transform .45s var(--ease) }
.qa .pm::after{ transform:rotate(90deg) }
.qa.open .pm::after{ transform:rotate(0) }
.qa .ans{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease) }
.qa.open .ans{ grid-template-rows:1fr }
.qa .ans > div{ overflow:hidden }
.qa .ans p{ margin:0 0 26px; max-width:62ch; color:var(--ink-2) }

/* ---------- 10 book ---------- */
.book{ padding:150px 0 170px; overflow-x:clip }
.book-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,6vw,96px); align-items:start }
.book-side{ position:sticky; top:120px }
.facts{ margin:40px 0 0; border-top:1px solid #2A2927 }
.facts div{ display:grid; grid-template-columns:120px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid #2A2927 }
.facts dt{ font:400 11px/1.6 var(--label); letter-spacing:.14em; text-transform:uppercase; color:#8F8B84 }
.facts dd{ margin:0; font-weight:500 }
.inq{ display:grid; grid-template-columns:1fr 1fr; gap:26px 28px }
.inq .full{ grid-column:1/-1 }
.inq fieldset{ border:0; margin:0; padding:0 }
.inq legend, .inq label{ display:block; font:400 11px/1.4 var(--label); letter-spacing:.14em; text-transform:uppercase; color:#8F8B84; margin-bottom:10px }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chips label{ margin:0; cursor:pointer }
.chips input{ position:absolute; opacity:0; pointer-events:none }
.chips span{ display:inline-block; padding:11px 16px; border:1.5px solid #3D3B38; color:var(--white); font:500 15px/1 var(--text); letter-spacing:0; text-transform:none; transition:background .25s, color .25s, border-color .25s }
.chips label:hover span{ border-color:#8F8B84 }
.chips input:checked + span{ background:var(--white); color:var(--ink); border-color:var(--white) }
.chips input:focus-visible + span{ outline:2px solid var(--red); outline-offset:2px }
.inq input[type=text], .inq input[type=email], .inq select, .inq textarea{ width:100%; background:transparent; border:0; border-bottom:1.5px solid #3D3B38; color:var(--white); font:400 18px/1.4 var(--text); padding:10px 0; border-radius:0; transition:border-color .25s }
.inq select{ appearance:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") right 4px center no-repeat }
.inq select option{ color:var(--ink) }
.inq textarea{ min-height:110px; resize:vertical }
.inq input:focus, .inq select:focus, .inq textarea:focus{ outline:0; border-color:var(--white) }
.inq ::placeholder{ color:#5E5B56 }
.inq .hp{ position:absolute; left:-9999px }
.inq-actions{ display:flex; align-items:center; gap:24px; flex-wrap:wrap }
.inq-alt{ margin:0; color:#8F8B84; font-size:16px }
.inq-status{ grid-column:1/-1; margin:0; min-height:1.5em; font-weight:500 }
.inq-legal{ font-size:13px; color:#A8A49D; margin:4px 0 0 } .inq-legal a{ color:inherit }
.inq-done{ max-width:60ch; padding:24px 0 }
.inq-done .h3{ margin:0 0 12px }

/* ---------- 11 end card and footer ---------- */
.endcard{ position:relative; background:linear-gradient(rgba(242,239,233,.62),rgba(242,239,233,.62)), url(assets/hifb_paper.jpg) center/cover no-repeat; padding:150px 0 40px; overflow:hidden }
.endcard-strips{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; width:max-content; margin:0 auto }
.endcard-strips .strip{ font-size:clamp(30px,4vw,58px) }
.endcard-strips .s-big{ font-size:clamp(48px,7vw,104px) }
.endcard-strips .strip:nth-of-type(1){ --n:0; --rot:-2deg } .endcard-strips .strip:nth-of-type(2){ --n:1; --rot:1deg }
.endcard-strips .strip:nth-of-type(3){ --n:2; --rot:-1deg } .endcard-strips .strip:nth-of-type(4){ --n:3; --rot:1.5deg }
/* the logo brushes on; the red underline is tucked under "Breakfast", like the hero */
.endcard-logo{ position:relative; width:min(46vw,520px); margin:90px auto 120px; isolation:isolate }
.endcard-logo img{ width:100%; clip-path:inset(0 100% 0 0) }
.endcard-logo > img:first-child{ position:relative; z-index:1 }
.endcard-logo .underline{ position:absolute; left:9%; width:72%; bottom:-6%; height:auto; z-index:0; clip-path:inset(0 100% 0 0) }
.endcard-logo.in img{ animation:brush .66s steps(8,end) 1s forwards }
.endcard-logo.in .underline{ animation:ulwipe .25s steps(3,jump-none) 1.8s forwards }
@keyframes ulwipe{ to{ clip-path:inset(0 0 0 0) } }
@keyframes brush{ to{ clip-path:inset(0 0 0 0) } }
.foot-row{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:24px; border-top:1px solid rgba(10,10,10,.16); font:400 11px/1.6 var(--label); letter-spacing:.14em; text-transform:uppercase }
.foot-row nav{ display:flex; gap:22px; flex-wrap:wrap }
.foot-row a{ text-decoration:none } .foot-row a:hover{ text-decoration:underline }
/* AI disclosure and legal links */
.foot-legal{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; padding-top:22px; border-top:1px solid rgba(10,10,10,.18); margin-bottom:18px }
.foot-legal p{ max-width:62ch; font-size:14px; line-height:1.5; color:var(--ink-2); margin:0 }
.foot-legal p a{ color:inherit }
.foot-legal nav{ display:flex; gap:20px; flex-wrap:wrap; font:400 11px/1.4 var(--label); letter-spacing:.14em; text-transform:uppercase }
.foot-legal nav a{ color:var(--ink); text-decoration:none } .foot-legal nav a:hover{ text-decoration:underline }

/* ---------- analytics consent box ---------- */
.consent{ position:fixed; left:50%; bottom:20px; z-index:90; width:min(720px, calc(100vw - 32px)); transform:translate(-50%, 140%); transition:transform .3s steps(3,jump-none);
  display:flex; align-items:center; gap:20px; padding:18px 20px; background:#FBFAF7 url(assets/hifb_paper.jpg) center/cover; color:var(--ink);
  box-shadow:0 1px 1px rgba(10,10,10,.14), 0 18px 34px rgba(10,10,10,.22) }
.consent.show{ transform:translate(-50%, 0) }
.consent p{ margin:0; font-size:16px; line-height:1.45 }
.consent a{ color:var(--ink) }
.consent-btns{ display:flex; gap:8px; flex:none }
.consent .btn{ min-height:44px; padding:0 18px; font-size:11px; white-space:nowrap }
.consent-no{ background:transparent; border:2px solid var(--ink); color:var(--ink) }

/* ---------- responsive ---------- */
@media (max-width:960px){
  body{ font-size:17px }
  .nav{ height:64px } .nav-links{ display:none } .nav-cta{ margin-left:auto } .nav-logo{ width:84px }
  .tr-stage{ height:78svh; min-height:520px }
  .tr-copy{ flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:28px }
  .tr-lede{ font-size:17px }
  .tr-close{ top:-50px; right:4px }
  .scrub-wrap{ height:160vh }
  .scrub-grid, .premise-grid, .about-head, .faq-grid, .book-grid, .stage, .shorts, .articles{ grid-template-columns:1fr }
  .ai-stack{ --step:30px; --ch:96px; margin-top:8px } .ai-card b{ font-size:18px }
  .print.leave{ transform:rotate(7deg) translate(18%,-4%) }
  .strips-quote .strip{ margin-left:0 !important }
  .premise-close, .about-cols{ columns:1 }
  .sheet{ top:calc(84px + var(--i) * 12px); min-height:300px }
  .about-head .creds{ margin-top:8px }
  .creds ul{ grid-template-columns:1fr 1fr }
  .stats{ grid-template-columns:1fr 1fr; gap:0 } .stat{ padding-bottom:24px }
  .client-list{ grid-template-columns:repeat(3,1fr) }
  .stage-preview{ display:none }
  .shorts-row{ grid-template-columns:repeat(2,1fr) }
  .short:nth-child(even){ transform:translateY(24px) }
  .articles{ margin-top:90px } .article-list a{ grid-template-columns:1fr } .article-date{ grid-row:auto }
  .voice{ grid-template-columns:1fr; gap:12px }
  .faq-side, .book-side{ position:static }
  .inq{ grid-template-columns:1fr }
  .foot-legal{ flex-direction:column; align-items:flex-start }
}
@media (max-width:640px){
  .hx-stage{ height:74svh; min-height:520px }
  .hx-box{ width:max(100%, calc(max(74svh,520px) * 9 / 16)); aspect-ratio:9/16 }
  .hx-type{ width:88%; top:46% }
  .hx-title{ font-size:calc(var(--bw,400px) * .095) }
  .hx-ul{ width:calc(var(--bw,400px) * .70); height:calc(var(--bw,400px) * .70 * 132 / 673) }
  .hx-sub{ display:none }
  .hx-band{ display:block; position:relative; padding:18px 22px 34px; background:linear-gradient(rgba(242,239,233,.7),rgba(242,239,233,.7)), url(assets/hifb_paper.jpg) center/cover }
  .hx-band:before{ content:''; position:absolute; left:0; right:0; top:-22px; height:24px; background:url(assets/hifb_tear_paper.png) center bottom/100% 100%; transform:scaleY(-1) }
  .hx-band .label{ font-size:10px }
  .hx-band p{ font-size:16px; line-height:1.5; margin:10px 0 18px; color:var(--ink-2) }
  .hx-band .hx-cta{ justify-content:flex-start }
  .consent{ flex-direction:column; align-items:stretch; bottom:12px } .consent-btns .btn{ flex:1 }
}
@media (max-width:600px){ .tr-h{ white-space:normal } }

/* ---------- reduced motion: every effect off, every element in its end state ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-delay:0s !important; transition:none !important }
  .strip{ opacity:1 }
  [data-reveal]{ opacity:1; transform:none } [data-split] .w > span{ transform:none }
  .hx-ul{ clip-path:none }
  .scrub .sw{ color:var(--ink) } .scrub-wrap{ height:auto } .scrub-pin{ position:static; height:auto; padding:80px 0 }
  .ai-card{ opacity:1; transform:translate(var(--dx),0) rotate(var(--r)) }
  .print, .print.leave{ transition:none }
  .voice blockquote .w > span{ transform:none }
  .endcard-logo img, .endcard-logo .underline{ clip-path:none }
  .consent{ transition:none }
}