/* ============ TOKENS ============ */
:root{
  color-scheme: dark;
  --ink:#0B0A0A; --ink-2:#100F0E; --coal:#171514; --coal-2:#1F1C1B; --line:#2C2927; --char:#4A4946;
  --mute:#85807A; --soft:#B8B1A7; --white:#F6F2EC; --cream:#E1D7C4; --cream-2:#ECE5D7; --paper-ink:#1A1715;
  --fox:#F37121; --burnt:#CC4A27; --amber:#F9A13A;
  --display:'Antonio','Bebas Neue','Arial Narrow',Impact,sans-serif;
  --body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --max:1480px;
  /* the side padding grows on wide screens so every section's content sits in one centered column.
     Backgrounds and imagery still run edge to edge. */
  --gutter:max(clamp(20px,5vw,88px), calc((100vw - var(--max)) / 2));
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --nav-h:78px;
  --grain:none;
}
@media (min-width:1800px){:root{--max:1600px}}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:auto;scrollbar-gutter:stable}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--body);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility}
body.is-locked{overflow:hidden}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--fox);color:var(--ink)}
:focus-visible{outline:2px solid var(--fox);outline-offset:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
em.o,.o{color:var(--fox);font-style:normal}

/* grain + vignette over everything, cheap: one fixed layer */
.grain{position:fixed;inset:-10%;z-index:95;pointer-events:none;background-image:var(--grain);background-size:180px;opacity:.55;mix-blend-mode:overlay;animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ============ TYPE ============ */
.display{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.86;letter-spacing:-.005em}
.wide{font-family:var(--body);font-stretch:125%;text-transform:uppercase;letter-spacing:.2em;font-weight:500;font-size:12px}
.eyebrow{font-family:var(--body);font-stretch:125%;text-transform:uppercase;letter-spacing:.24em;font-size:11.5px;font-weight:500;color:var(--soft);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--fox)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.h-sec{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(52px,8.2vw,138px);line-height:.9;letter-spacing:-.005em;text-wrap:balance}
.h-sec em{color:var(--fox);font-style:normal}
.lead{font-size:clamp(18px,1.45vw,22px);line-height:1.5;color:var(--soft);max-width:34em;text-wrap:pretty}

/* ============ BUTTONS ============ */
.btn{--h:58px;position:relative;display:inline-flex;align-items:center;gap:14px;height:var(--h);padding:0 30px 0 28px;font-family:var(--body);font-stretch:125%;font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;isolation:isolate}
.btn--fox{color:var(--ink);clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.btn--fox::before,.btn--fox::after{content:"";position:absolute;inset:0;z-index:-1}
.btn--fox::before{background:var(--fox)}
.btn--fox::after{background:var(--white);transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease)}
.btn--fox:hover::after,.btn--fox:focus-visible::after{transform:scaleX(1);transform-origin:left}
.btn .arr{width:18px;height:10px;flex:none;transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.tlink{position:relative;display:inline-flex;align-items:center;gap:12px;height:58px;font-family:var(--body);font-stretch:125%;font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--white)}
.tlink::after{content:"";position:absolute;left:0;right:30px;bottom:14px;height:1px;background:var(--fox);transform-origin:left;transition:transform .5s var(--ease)}
.tlink:hover::after{transform:scaleX(.25)}
.tlink .arr{width:18px;height:10px;transition:transform .45s var(--ease)}
.tlink:hover .arr{transform:translateX(6px)}
/* label roll: hover copy swaps */
.roll{display:inline-grid;overflow:hidden;line-height:1.25;height:1.25em}
.roll>span,.roll::after{grid-area:1/1;transition:transform .5s var(--ease)}
.roll::after{content:attr(data-alt);transform:translateY(105%)}
a:hover>.roll>span,button:hover>.roll>span,a:focus-visible>.roll>span{transform:translateY(-105%)}
a:hover>.roll::after,button:hover>.roll::after,a:focus-visible>.roll::after{transform:translateY(0)}

/* ============ NAV ============ */
.nav{position:fixed;left:0;right:0;top:0;z-index:80;height:calc(var(--nav-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;display:flex;align-items:center;gap:28px;transition:transform .6s var(--ease),background-color .4s,color .4s,border-color .4s;border-bottom:1px solid transparent;color:var(--white)}
.nav.is-scrolled{background:rgba(11,10,10,.78);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-color:rgba(255,255,255,.06)}
.nav.is-hidden{transform:translateY(-102%)}
.nav.is-light{color:var(--paper-ink)}
.nav.is-light.is-scrolled{background:rgba(236,229,215,.82);border-color:rgba(26,23,21,.08)}
.nav__brand{display:flex;align-items:center;gap:14px;height:100%;min-width:0}
.nav__logo{height:40px;width:auto;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.nav__mark{position:absolute;height:36px;width:auto;opacity:0;transform:scale(.7) rotate(-8deg);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.nav__brandwrap{position:relative;display:flex;align-items:center}
.nav.is-compact .nav__logo{opacity:0;transform:translateX(-8px)}
.nav.is-compact .nav__mark{opacity:1;transform:none}
.nav.is-light .nav__logo{filter:invert(1) hue-rotate(180deg) saturate(3) brightness(.9)}
.nav__where{position:absolute;left:52px;display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:var(--body);font-stretch:125%;font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.nav__where i{width:18px;height:1px;background:var(--fox)}
.nav__where b{font-weight:600;display:inline-block;overflow:hidden;height:1.3em;line-height:1.3em}
.nav__where b span{display:block;transition:transform .5s var(--ease)}
.nav.is-compact .nav__where{opacity:.9;transform:none}
.nav__links{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2.6vw,44px)}
.nav__links>a,.nav__links>button{position:relative;font-family:var(--body);font-stretch:125%;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:10px 0;display:inline-flex;align-items:center;gap:10px}
.nav__links>a::after,.nav__links>button::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--fox);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav__links>a:hover::after,.nav__links>button:hover::after,.nav__links>button[aria-expanded=true]::after{transform:scaleX(1);transform-origin:left}
.nav__plus{position:relative;width:9px;height:9px}
.nav__plus::before,.nav__plus::after{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:currentColor;transition:transform .45s var(--ease)}
.nav__plus::after{transform:rotate(90deg)}
[aria-expanded=true] .nav__plus::after{transform:rotate(0)}
.nav .btn{--h:46px;padding:0 22px 0 20px;font-size:11.5px}
.nav__burger{display:none;width:46px;height:46px;position:relative;margin-left:auto}
.nav__burger span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease),width .5s}
.nav__burger span:nth-child(1){top:18px}
.nav__burger span:nth-child(2){top:27px;right:19px}
.nav__burger[aria-expanded=true] span:nth-child(1){top:22px;transform:rotate(45deg)}
.nav__burger[aria-expanded=true] span:nth-child(2){top:22px;right:11px;transform:rotate(-45deg)}

/* ============ MEGA MENU ============ */
.mega{position:fixed;inset:0;z-index:70;display:grid;grid-template-columns:minmax(360px,.9fr) 1.1fr;background:var(--ink);visibility:hidden;clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .8s var(--ease-io),visibility 0s .8s}
.mega.is-open{visibility:visible;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .8s var(--ease-io),visibility 0s}
.mega__list{padding:calc(var(--nav-h) + 56px + env(safe-area-inset-top,0px)) var(--gutter) 48px;display:flex;flex-direction:column;border-right:1px solid var(--line);position:relative;z-index:2;background:var(--ink)}
.mega__list .eyebrow{margin-bottom:34px}
.mega__item{display:block;padding:14px 0 16px;border-bottom:1px solid var(--line);position:relative}
.mega__item:first-of-type{border-top:1px solid var(--line)}
.mega__name{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(46px,5.4vw,88px);line-height:.92;display:flex;align-items:baseline;gap:18px;color:rgba(246,242,236,.28);transition:color .45s var(--ease),transform .6s var(--ease)}
.mega__name .arr{width:30px;height:18px;opacity:0;transform:translateX(-14px);transition:all .5s var(--ease);color:var(--fox)}
.mega__desc{font-size:15px;color:var(--mute);max-width:30em;transition:color .45s}
.mega__item.is-on .mega__name{color:var(--white);transform:translateX(10px)}
.mega__item.is-on .mega__name .arr{opacity:1;transform:none}
.mega__item.is-on .mega__desc{color:var(--soft)}
.mega__more{margin-top:auto;padding-top:34px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:var(--mute)}
.mega__more b{color:var(--white);font-weight:500;width:100%;font-stretch:125%;text-transform:uppercase;font-size:11px;letter-spacing:.22em}
.mega__more a{border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.mega__more a:hover{color:var(--white);border-color:var(--fox)}
.mega__stage{position:relative;overflow:hidden;background:var(--ink-2)}
.mega__close{position:absolute;right:var(--gutter);top:calc(18px + env(safe-area-inset-top,0px));z-index:5;height:44px;display:flex;align-items:center;gap:12px;font-stretch:125%;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.mega__close i{width:22px;height:22px;position:relative}
.mega__close i::before,.mega__close i::after{content:"";position:absolute;left:0;right:0;top:10px;height:1.5px;background:var(--fox);transform:rotate(45deg)}
.mega__close i::after{transform:rotate(-45deg)}

/* ============ MOBILE SHEET ============ */
.sheet{position:fixed;inset:0;z-index:70;background:var(--ink);padding:calc(var(--nav-h) + 20px + env(safe-area-inset-top,0px)) var(--gutter) calc(30px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;visibility:hidden;clip-path:circle(0% at calc(100% - 44px) 40px);transition:clip-path .8s var(--ease-io),visibility 0s .8s;overflow-y:auto}
.sheet.is-open{visibility:visible;clip-path:circle(150% at calc(100% - 44px) 40px);transition:clip-path .8s var(--ease-io),visibility 0s}
.sheet__links>li{border-bottom:1px solid var(--line)}
.sheet__links>li>a,.sheet__links>li>button{display:flex;width:100%;justify-content:space-between;align-items:center;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(48px,13vw,72px);line-height:1;padding:12px 0 10px;text-align:left}
.sheet__links small{font-family:var(--body);font-stretch:125%;font-size:10.5px;letter-spacing:.2em;color:var(--mute);font-weight:500}
.sheet__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.sheet__sub.is-open{grid-template-rows:1fr}
.sheet__sub>div{overflow:hidden}
.sheet__sub a{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-top:1px solid var(--line);font-family:var(--display);font-weight:600;font-size:30px;text-transform:uppercase;color:var(--soft)}
.sheet__sub a span{font-family:var(--body);font-size:13px;text-transform:none;color:var(--mute);font-weight:400;max-width:55%;text-align:right;line-height:1.35}
.sheet__foot{margin-top:auto;padding-top:30px;display:grid;gap:18px}
.sheet__foot p{color:var(--mute);font-size:15px}
.avail{display:inline-flex;align-items:center;gap:10px;font-stretch:125%;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.avail i{width:7px;height:7px;border-radius:50%;background:var(--fox);box-shadow:0 0 0 0 rgba(243,113,33,.6);animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(243,113,33,.55)}80%,100%{box-shadow:0 0 0 12px rgba(243,113,33,0)}}

/* mobile thumb CTA */
.thumb{position:fixed;left:50%;width:max-content;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;transform:translate(-50%,160%);transition:transform .6s var(--ease);display:none}
.thumb.is-on{transform:translate(-50%,0)}

/* ============ INTRO ============
   The homepage intro: four of them, picked in Fox HQ > Motion + feel (see template-parts/chrome/intro.php).
   Everything is timed in CSS from the first frame; --T is the whole run. --u is one unit of a 1440 wide
   screen (a 560 wide one on tall screens), so the staging holds on every size. */
@property --cfn { syntax: '<integer>'; inherits: true; initial-value: 0; }
@property --cfr { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --cfa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.intro{position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:none;--u:calc(100vw / 1440);--T:3.5s;--iE:cubic-bezier(.16,1,.3,1);--pop:cubic-bezier(.2,1.8,.4,1)}
@media (max-aspect-ratio:1/1){.intro{--u:calc(100vw / 560)}}
.intro.is-done{display:none}
.intro.is-skip{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.intro .ia{display:none;position:absolute;inset:0}
.intro.is-tada .ia--tada,.intro.is-pardon .ia--pardon,.intro.is-spot .ia--spot,.intro.is-estimate .ia--estimate{display:block}
.ia--tada *,.ia--pardon *,.ia--spot *{position:absolute;margin:0;animation-duration:var(--T);animation-timing-function:linear;animation-fill-mode:both}
.intro img{max-width:none;height:auto}
/* the speech bubble every fox shares */
.intro .ib{white-space:nowrap;padding:calc(var(--u) * 14) calc(var(--u) * 22);background:#F3EDE4;color:var(--ink);border:calc(var(--u) * 4) solid var(--ink);border-radius:calc(var(--u) * 22);font:600 max(15px,calc(var(--u) * 32))/1.1 var(--body);letter-spacing:0;box-shadow:calc(var(--u) * 8) calc(var(--u) * 9) 0 var(--fox);opacity:0}
.intro .ib::after{content:"";position:absolute;top:100%;right:calc(var(--u) * 26);width:calc(var(--u) * 22);height:calc(var(--u) * 22);background:inherit;border-right:calc(var(--u) * 4) solid var(--ink);border-bottom:calc(var(--u) * 4) solid var(--ink);transform:translateY(-50%) rotate(45deg)}
.intro .ib.tl::after,.intro .ip-b::after{right:auto;left:calc(var(--u) * 26)}
@keyframes cfiBub{0%{opacity:0;transform:scale(.4) rotate(4deg)}.1%{opacity:1;animation-timing-function:var(--pop)}100%{opacity:1;transform:none}}

/* ---------- A · TA-DA. The build line types out and the bar fills, the promise lands, then the fox bites the
   corner of the loading screen and yanks it off like a tablecloth. Everything after the pre-roll (--pre) runs on --T. ---------- */
.ia--tada{--mx:calc(100% - var(--u) * 160);--my:calc(100% - var(--u) * 125)}
.ia--tada .it-cloth,.ia--tada .it-streak,.ia--tada .it-biter,.ia--tada .it-peek,.ia--tada .ib,.ia--tada .it-dot,.ia--tada .it-folds{animation-delay:var(--pre,2.1s)}
.ia--tada .it-cloth{inset:0;z-index:2;background:radial-gradient(120% 90% at 50% 42%,#1a1716,#0B0A0A 70%);box-shadow:inset 0 0 0 1px rgba(246,242,236,.06),0 0 90px 10px rgba(0,0,0,.7);transform-origin:100% 100%;animation-name:itCloth}
@keyframes itCloth{0%,10%{transform:none}16%{transform:translate(calc(var(--u) * 3),calc(var(--u) * 2)) skewX(-.4deg)}18%{transform:translate(calc(var(--u) * 9),calc(var(--u) * 5)) skewX(-1deg)}20%{transform:translate(calc(var(--u) * 4),calc(var(--u) * 2))}22%{transform:translate(calc(var(--u) * 14),calc(var(--u) * 6)) skewX(-1.4deg)}24%{transform:translate(calc(var(--u) * 7),calc(var(--u) * 3)) skewX(-.6deg)}31.4%{transform:translate(calc(var(--u) * 30),calc(var(--u) * 10)) skewX(-3deg);animation-timing-function:cubic-bezier(.6,0,.9,.5)}36.6%,100%{transform:translateX(125%) skewX(-30deg)}}
/* the screen bunched in his teeth: creases fan out from the corner he's holding, harder on every tug */
.ia--tada .it-folds{inset:0;opacity:0;animation-name:itFolds;
  background:conic-gradient(from 0deg at var(--mx) var(--my),transparent 0 244deg,
    rgba(246,242,236,.12) 246.5deg,rgba(0,0,0,.6) 249deg,transparent 252deg 257deg,
    rgba(246,242,236,.09) 258deg,rgba(0,0,0,.5) 260deg,transparent 263deg 268deg,
    rgba(246,242,236,.14) 270deg,rgba(0,0,0,.65) 272.5deg,transparent 276deg 281deg,
    rgba(246,242,236,.08) 282deg,rgba(0,0,0,.45) 283.6deg,transparent 286deg 292deg,
    rgba(246,242,236,.13) 294deg,rgba(0,0,0,.6) 296.5deg,transparent 300deg 306deg,
    rgba(246,242,236,.09) 307.5deg,rgba(0,0,0,.5) 309.5deg,transparent 312.5deg 319deg,
    rgba(246,242,236,.1) 321deg,rgba(0,0,0,.45) 323deg,transparent 326deg 333deg,
    rgba(246,242,236,.07) 334deg,rgba(0,0,0,.35) 335.5deg,transparent 338deg 360deg);
  -webkit-mask:radial-gradient(circle at var(--mx) var(--my),#000 0,#000 calc(var(--u) * 90),rgba(0,0,0,.55) calc(var(--u) * 380),transparent calc(var(--u) * 820));
  mask:radial-gradient(circle at var(--mx) var(--my),#000 0,#000 calc(var(--u) * 90),rgba(0,0,0,.55) calc(var(--u) * 380),transparent calc(var(--u) * 820))}
@keyframes itFolds{0%,13%{opacity:0}16%{opacity:.6}18%{opacity:1}20%{opacity:.55}22%{opacity:1}24%{opacity:.7}31.4%,100%{opacity:1}}
/* the pre-roll, centered on the screen (it flies off with it) */
.ia--tada .it-load{left:50%;top:50%;width:min(calc(var(--u) * 900),92vw);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;animation:none}
.ia--tada .it-load>*{position:relative;animation-duration:1s;animation-delay:0s;animation-timing-function:linear}
.ia--tada .it-type{display:flex;align-items:baseline;font:500 max(14px,calc(var(--u) * 22))/1 var(--mono);letter-spacing:0;color:var(--cream);animation:itTypeOut .18s 1.5s both}
.ia--tada .it-typed{position:relative;display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:itType 1s steps(27,end) .25s both}
.ia--tada .it-caret{position:relative;font-weight:500;color:var(--fox);animation:itCaret .5s steps(1,end) infinite}
@keyframes itType{from{width:0}to{width:27ch}}
@keyframes itCaret{0%{opacity:1}50%{opacity:0}}
@keyframes itTypeOut{to{opacity:0;transform:translateY(calc(var(--u) * -10))}}
.ia--tada .it-bar{width:min(calc(var(--u) * 420),70vw);height:3px;margin-top:calc(var(--u) * 26);background:rgba(246,242,236,.12);overflow:hidden;animation:itBarOut .3s 1.55s both}
.ia--tada .it-bar i{position:absolute;inset:0;background:var(--fox);transform-origin:0 50%;transform:scaleX(0);animation:itFill 1.15s cubic-bezier(.45,.05,.3,1) .3s both}
@keyframes itFill{0%{transform:scaleX(0)}55%{transform:scaleX(.62)}72%{transform:scaleX(.9)}82%{transform:scaleX(.93)}100%{transform:scaleX(1)}}
@keyframes itBarOut{0%{box-shadow:none}30%{box-shadow:0 0 22px 2px rgba(243,113,33,.7)}100%{box-shadow:0 0 10px rgba(243,113,33,.25)}}
.ia--tada .it-pct{margin-top:calc(var(--u) * 12);font:500 max(11px,calc(var(--u) * 13))/1 var(--mono);letter-spacing:.2em;color:var(--mute);counter-reset:cfn var(--cfn);animation:itPct 1.15s cubic-bezier(.45,.05,.3,1) .3s both,itPctOut .2s 1.5s both}
.ia--tada .it-pct::after{content:counter(cfn) "%"}
@keyframes itPct{0%{--cfn:0}55%{--cfn:62}72%{--cfn:90}82%{--cfn:93}100%{--cfn:100}}
@keyframes itPctOut{to{opacity:0}}
/* the promise: lands where the build line was, big */
.ia--tada .it-say{position:absolute;left:50%;bottom:calc(100% - max(14px,calc(var(--u) * 22)) - 4px);width:max-content;max-width:92vw;text-align:center;font:700 max(40px,calc(var(--u) * 104))/.9 var(--display);text-transform:uppercase;letter-spacing:-.005em;color:var(--white);opacity:0;transform-origin:50% 100%;transform:translateX(-50%) scale(.92);animation:itSay .45s var(--pop) 1.58s both}
.ia--tada .it-say em,.ia--tada .it-say br{position:static;font-style:normal;color:var(--fox)}
@keyframes itSay{0%{opacity:0;transform:translateX(-50%) scale(.84);filter:blur(6px)}60%{opacity:1;filter:none}100%{opacity:1;transform:translateX(-50%) scale(1)}}
.ia--tada .it-streak{left:0;right:0;top:var(--sy);z-index:3;height:3px;background:linear-gradient(90deg,transparent,rgba(246,242,236,.85),transparent);opacity:0;animation-name:itStreak;animation-delay:calc(var(--pre,2.1s) + var(--sd,0s))}
@keyframes itStreak{0%,32%{opacity:0;transform:translateX(-30%)}34%{opacity:1}40%,100%{opacity:0;transform:translateX(60%)}}
/* his art has the screen's corner in his teeth (the same dark as the screen); it sits in the screen's corner */
.ia--tada .it-biter{right:0;bottom:0;z-index:4;width:calc(var(--u) * 460);transform-origin:63% 71%;animation-name:itBite}
@keyframes itBite{0%,9%{transform:translateY(105%)}9.1%{animation-timing-function:cubic-bezier(.2,1.3,.4,1)}16%{transform:none}18%{transform:translate(calc(var(--u) * 8),calc(var(--u) * 5)) rotate(4deg)}20%{transform:translate(calc(var(--u) * 2),calc(var(--u) * 1))}22%{transform:translate(calc(var(--u) * 14),calc(var(--u) * 7)) rotate(-3deg)}24%{transform:translate(calc(var(--u) * 5),calc(var(--u) * 2))}31.4%{transform:translate(calc(var(--u) * 26),calc(var(--u) * 10)) rotate(-9deg);animation-timing-function:cubic-bezier(.6,0,.9,.5)}36.6%,100%{transform:translateX(calc(100vw + 20%)) rotate(12deg)}}
.ia--tada .it-peek{right:calc(var(--u) * -40);bottom:calc(var(--u) * -70);z-index:4;width:calc(var(--u) * 300);transform-origin:50% 100%;animation-name:itPeek}
@keyframes itPeek{0%,40%{transform:translateX(calc(var(--u) * 420)) rotate(-14deg)}40.1%{animation-timing-function:cubic-bezier(.2,1.4,.4,1)}45%{transform:rotate(-14deg)}63%{transform:rotate(-14deg)}67%{transform:rotate(-2deg) translateY(calc(var(--u) * 10))}74%,90%{transform:rotate(-4deg) translateY(calc(var(--u) * 10))}90.1%{animation-timing-function:cubic-bezier(.6,0,.9,.4)}97%,100%{transform:translateX(calc(var(--u) * 420)) rotate(8deg)}}
.ia--tada .ib{right:calc(var(--u) * 200);bottom:calc(var(--u) * 230);z-index:5;transform-origin:100% 100%}
.ia--tada .it-b1{animation-name:itB1}
.ia--tada .it-b2{animation-name:itB2}
@keyframes itB1{0%,45%{opacity:0;transform:scale(.4) rotate(4deg)}45.1%{opacity:1;animation-timing-function:var(--pop)}49%,66%{opacity:1;transform:none}68%,100%{opacity:0;transform:scale(.8)}}
@keyframes itB2{0%,72%{opacity:0;transform:scale(.4) rotate(-4deg)}72.1%{opacity:1;animation-timing-function:var(--pop)}76%,88%{opacity:1;transform:none}91%,100%{opacity:0;transform:scale(.8)}}
/* the headline's last period drops off the page, then pops back */
.ia--tada .it-dot{position:fixed;z-index:1;display:none;background:var(--fox);transform-origin:20% 100%;animation-name:itDot}
.cfi-dot .ia--tada .it-dot{display:block}
.cfi-dot.cfi-tada #heroTitle .ln:last-child em:last-of-type{visibility:hidden}
@keyframes itDot{0%,36.6%{transform:none}40%{transform:rotate(-12deg) translateY(calc(var(--u) * -8))}44%{transform:rotate(8deg)}48%{transform:rotate(-3deg)}52%,60%{transform:none}62.5%{transform:rotate(18deg)}64.5%{transform:rotate(-8deg)}67%{transform:translateX(calc(var(--u) * 6)) rotate(40deg);animation-timing-function:cubic-bezier(.5,0,1,.6)}80%{transform:translate(calc(var(--u) * 60),110vh) rotate(200deg);opacity:1}80.1%,94%{opacity:0;transform:scale(0)}94.1%{opacity:1;transform:scale(0);animation-timing-function:var(--pop)}100%{opacity:1;transform:none}}
/* the dishes: everything on the homepage rattles when the cloth goes, then settles */
.cfi-tada .nav,.cfi-tada .hero__eyebrow,.cfi-tada #heroTitle,.cfi-tada #heroDisc,.cfi-tada #heroLead,.cfi-tada #heroCtas,.cfi-tada #build,.cfi-tada #heroGeo{animation:cfiWob .8s calc(3.5s * .366 + 2.1s + var(--wd,0s)) linear;transform-origin:50% 100%}
.cfi-tada .nav{--amp:.5}.cfi-tada .hero__eyebrow{--amp:1.2;--wd:.02s}.cfi-tada #heroTitle{--amp:1.6;--wd:.04s}.cfi-tada #heroDisc{--amp:2.2;--wd:.05s}.cfi-tada #heroLead{--amp:1.4;--wd:.09s}.cfi-tada #heroCtas{--amp:2.6;--wd:.03s}.cfi-tada #build{--amp:1.8;--wd:.07s}.cfi-tada #heroGeo{--amp:.6}
@keyframes cfiWob{0%{transform:none}15%{transform:rotate(calc(var(--amp,1) * -1deg)) translateY(-8px)}37%{transform:rotate(calc(var(--amp,1) * .8deg))}62%{transform:rotate(calc(var(--amp,1) * -.45deg))}85%{transform:rotate(calc(var(--amp,1) * .2deg))}100%{transform:none}}

/* ---------- B · PARDON ME. The fox slurps the loading bar like spaghetti, then burps the screen away. ---------- */
.ia--pardon{--bw:min(calc(var(--u) * 460),74vw);--mx:calc(50vw - var(--bw) / 2);--my:50vh;--fw:calc(var(--u) * 280)}
@media (max-aspect-ratio:1/1){.ia--pardon{--bw:52vw;--mx:42vw;--fw:calc(var(--u) * 240)}.ia--pardon .ip-num{left:calc(var(--mx) + var(--bw) * .62);font-size:72px}}
.ia--pardon .ip-cover{inset:0;background:var(--ink);--cfr:0px;-webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),transparent var(--cfr),#000 calc(var(--cfr) + 1px));mask-image:radial-gradient(circle at var(--mx) var(--my),transparent var(--cfr),#000 calc(var(--cfr) + 1px));animation-name:ipCover}
@keyframes ipCover{0%,61%{--cfr:0px;opacity:1}61.1%{animation-timing-function:cubic-bezier(.2,.7,.3,1)}74%{--cfr:160vmax;opacity:1}82%,100%{--cfr:160vmax;opacity:0}}
.ia--pardon .ip-num{left:50%;bottom:calc(50% + var(--u) * 26);transform:translateX(-50%);font:700 max(64px,calc(var(--u) * 150))/.8 var(--display);color:var(--cream);font-variant-numeric:tabular-nums;counter-reset:cfn var(--cfn);animation-name:ipNum,ipFade}
.ia--pardon .ip-num::before{content:counter(cfn)}
.ia--pardon .ip-num::after{content:"%";color:var(--fox);font-size:.5em;vertical-align:.62em;margin-left:.06em}
@keyframes ipNum{0%{--cfn:0}15%,29%{--cfn:37}49%,100%{--cfn:0}}
@keyframes ipFade{0%,55%{opacity:1}60%,100%{opacity:0}}
.ia--pardon .ip-strand{left:var(--mx);top:calc(var(--my) - var(--u) * 13);width:var(--bw);height:max(18px,calc(var(--u) * 26));overflow:hidden;animation-name:ipFade}
.ia--pardon .ip-noodle{position:absolute;left:0;top:calc(50% - var(--u) * 4);width:100%;height:max(5px,calc(var(--u) * 8));display:flex;animation-name:ipSlurp}
@keyframes ipSlurp{0%,29%{transform:none}29.1%{animation-timing-function:cubic-bezier(.45,0,.7,1)}49%,100%{transform:translateX(-102%)}}
.ia--pardon .ip-noodle i{position:relative !important;flex:1;height:100%;background:#2d2826;animation:ipWig .14s linear infinite;animation-delay:calc(var(--k) * -.03s)}
.ia--pardon .ip-noodle i.f{background:var(--fox);box-shadow:0 0 12px rgba(243,113,33,.7)}
@keyframes ipWig{0%,100%{transform:translateY(0)}25%{transform:translateY(calc(var(--u) * -6))}75%{transform:translateY(calc(var(--u) * 6))}}
/* his mouth (at 93% / 79% of the logo) sits right on the end of the bar */
.ia--pardon .ip-fox{left:calc(var(--mx) - var(--fw) * .93);top:calc(var(--my) - var(--fw) * .756);width:var(--fw);z-index:2;transform-origin:93% 79%;animation-name:ipFox}
@keyframes ipFox{0%,15%{transform:translateX(-100vw)}15.1%{animation-timing-function:cubic-bezier(.2,1.1,.4,1)}24%{transform:none}27%{transform:rotate(4deg)}29%{transform:none}31%,35%,39%,43%{transform:scale(1.05) translateX(calc(var(--u) * 4))}33%,37%,41%,45%{transform:none}47%{transform:scale(1.06) translateX(calc(var(--u) * 6))}49%{transform:none}52%{transform:scale(1.12,.9)}55%{transform:scale(.97,1.05)}57%,60.5%{transform:none}61%{transform:translateX(calc(var(--u) * -24)) rotate(-12deg) scale(1.04)}66%{transform:translateX(calc(var(--u) * -10)) rotate(-4deg)}72%,90%{transform:none}90.1%{animation-timing-function:cubic-bezier(.6,0,.9,.4)}98%,100%{transform:translateX(-100vw)}}
.ia--pardon .ip-ring{left:var(--mx);top:var(--my);width:calc(var(--u) * 200);height:calc(var(--u) * 200);margin:calc(var(--u) * -100) 0 0 calc(var(--u) * -100);border-radius:50%;border:calc(var(--u) * 6) solid var(--fox);box-shadow:0 0 40px rgba(243,113,33,.8),inset 0 0 30px rgba(243,113,33,.6);opacity:0;animation-name:ipRing}
@keyframes ipRing{0%,61%{opacity:0;transform:scale(.1)}61.1%{opacity:1;animation-timing-function:cubic-bezier(.2,.7,.3,1)}74%{opacity:.9;transform:scale(18)}78%,100%{opacity:0;transform:scale(20)}}
.ia--pardon .ip-burp{left:calc(var(--mx) + var(--u) * 22);top:calc(var(--my) - var(--u) * 78);z-index:3;font:700 max(40px,calc(var(--u) * 84))/1 var(--hand);color:var(--fox);text-shadow:3px 4px 0 var(--ink);opacity:0;transform-origin:0 100%;animation-name:ipBurp}
@keyframes ipBurp{0%,61%{opacity:0;transform:scale(.3) rotate(-10deg)}61.1%{opacity:1;animation-timing-function:var(--pop)}65%{opacity:1;transform:rotate(-8deg) scale(1.1)}76%{opacity:1;transform:translate(calc(var(--u) * 30),calc(var(--u) * -60)) rotate(-4deg)}82%,100%{opacity:0;transform:translate(calc(var(--u) * 40),calc(var(--u) * -90)) rotate(-2deg)}}
.ia--pardon .ip-b{left:calc(var(--mx) - var(--fw) * .62);top:calc(var(--my) - var(--fw) * .756 - var(--u) * 80);z-index:3;transform-origin:0 100%;animation-name:ipB}
@keyframes ipB{0%,74%{opacity:0;transform:scale(.4) rotate(-4deg)}74.1%{opacity:1;animation-timing-function:var(--pop)}78%,89%{opacity:1;transform:none}92%,100%{opacity:0;transform:scale(.8)}}

/* ---------- C · MISSED A SPOT. The fox wipes the screen clean with his tail. His nose print is still on the glass. ---------- */
.ia--spot{--nx:calc(50vw + var(--u) * 150);--ny:48vh;--pw:calc(var(--u) * 460);--tw:calc(var(--u) * 720)}
@media (max-aspect-ratio:1/1){.ia--spot{--nx:calc(50vw + var(--u) * 90);--ny:52vh;--pw:calc(var(--u) * 420);--tw:calc(var(--u) * 1100)}}
.ia--spot .is-cover{inset:0;background:radial-gradient(90% 80% at 50% 45%,#161312,#0B0A0A 70%);--cfa:0deg;-webkit-mask-image:conic-gradient(from 270deg at 50% 118%,transparent 0deg var(--cfa),#000 var(--cfa));mask-image:conic-gradient(from 270deg at 50% 118%,transparent 0deg var(--cfa),#000 var(--cfa));animation-name:isCover}
@keyframes isCover{0%,21%{--cfa:0deg;opacity:1}21.1%{animation-timing-function:cubic-bezier(.45,0,.35,1)}36.5%{--cfa:181deg;opacity:1}44%,100%{--cfa:181deg;opacity:0}}
/* squished against the glass: his nose (93% / 79% of the logo) lands on the nose print */
.ia--spot .is-press{left:calc(var(--nx) - var(--pw) * .93);top:calc(var(--ny) - var(--pw) * .756);width:var(--pw);z-index:2;transform-origin:93% 79%;animation-name:isPress}
@keyframes isPress{0%{transform:translateY(calc(var(--u) * 60)) scale(.55);opacity:0}2%{opacity:1}9%{transform:scale(.9);animation-timing-function:cubic-bezier(.6,0,1,.6)}11%{transform:scale(1.32,.9)}16%{transform:scale(1.28,.92) translateY(calc(var(--u) * 10))}17.5%{transform:scale(.9);animation-timing-function:cubic-bezier(.4,0,.8,.4)}21%,100%{transform:translateY(120vh) scale(.9);opacity:1}}
.ia--spot .is-smudge{left:calc(var(--nx) - var(--u) * 110);top:calc(var(--ny) - var(--u) * 65);width:calc(var(--u) * 220);height:calc(var(--u) * 130);opacity:0;z-index:1;animation-name:isSmudge}
.ia--spot .is-smudge::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(235,240,245,.62),rgba(235,240,245,.32) 55%,transparent);filter:blur(4px)}
.ia--spot .is-smudge i{position:absolute;top:42%;width:17%;height:24%;border-radius:50%;background:rgba(20,18,18,.8);filter:blur(1.5px);animation:none}
.ia--spot .is-smudge i:first-child{left:30%;transform:rotate(20deg)}
.ia--spot .is-smudge i:last-child{right:30%;transform:rotate(-20deg)}
@keyframes isSmudge{0%,10.5%{opacity:0;transform:scale(.7)}11%,58%{opacity:1;transform:none}60.5%,100%{opacity:0;transform:scale(.4) rotate(-20deg)}}
.ia--spot .is-sparkle{left:var(--nx);top:var(--ny);width:calc(var(--u) * 60);height:calc(var(--u) * 60);margin:calc(var(--u) * -30) 0 0 calc(var(--u) * -30);opacity:0;z-index:3;animation-name:isSpark}
.ia--spot .is-sparkle::before,.ia--spot .is-sparkle::after{content:"";position:absolute;left:50%;top:0;width:calc(var(--u) * 6);height:100%;margin-left:calc(var(--u) * -3);background:#fff;border-radius:99px;box-shadow:0 0 12px #fff}
.ia--spot .is-sparkle::after{transform:rotate(90deg)}
@keyframes isSpark{0%,59%{opacity:0;transform:scale(0) rotate(0)}61%{opacity:1;transform:scale(1.2) rotate(45deg)}66%,100%{opacity:0;transform:scale(0) rotate(90deg)}}
/* the tail: a windshield wiper the size of the screen, pivoting from below the bottom edge */
.ia--spot .is-wiper{width:var(--tw);left:calc(50vw - var(--tw) * .74);top:calc(100vh + var(--u) * 50 - var(--tw) * 1.435);z-index:2;transform-origin:74% 97%;animation-name:isWipe}
@keyframes isWipe{0%,18.9%{transform:rotate(-120deg);opacity:0}19%{transform:rotate(-120deg);opacity:1}21%{transform:rotate(-96deg);animation-timing-function:cubic-bezier(.45,0,.35,1)}36.5%{transform:rotate(92deg);animation-timing-function:cubic-bezier(.5,0,.9,.5)}42%{transform:rotate(130deg);opacity:1}42.1%,100%{transform:rotate(130deg);opacity:0}}
.ia--spot .is-peek{left:calc(var(--nx) - var(--u) * 40);bottom:0;width:calc(var(--u) * 250);z-index:2;transform-origin:50% 100%;animation-name:isPeek}
@keyframes isPeek{0%,38%{transform:translateY(120%)}38.1%{animation-timing-function:cubic-bezier(.2,1.5,.4,1)}44%,53%{transform:rotate(-6deg)}56%,64%{transform:rotate(-12deg) translateX(calc(var(--u) * -8))}67%{transform:translateY(calc(var(--u) * 10))}69%,80%{transform:none;animation-timing-function:cubic-bezier(.6,0,.9,.4)}88%,100%{transform:translateY(120%) rotate(6deg)}}
/* the flick: from beside him, the tip swipes right across the nose print */
.ia--spot .is-flick{--fh:calc(100vh - var(--ny) + var(--u) * 40);height:var(--fh);width:auto;left:calc(var(--nx) + var(--u) * 150 - var(--fh) * .5);top:calc(var(--ny) - var(--u) * 20);z-index:3;transform-origin:74% 97%;animation-name:isFlick}
@keyframes isFlick{0%,52%{transform:translate(50vw,30vh) rotate(40deg)}52.1%{animation-timing-function:cubic-bezier(.3,0,.3,1)}55%{transform:rotate(22deg)}58%{transform:rotate(-30deg)}61%{transform:rotate(12deg)}63%,100%{transform:translate(50vw,30vh) rotate(50deg)}}
.ia--spot .ib{left:calc(var(--nx) + var(--u) * 170);bottom:calc(var(--u) * 190);z-index:4;transform-origin:0 100%;animation-name:isB}
.ia--spot .ib::after{right:auto;left:calc(var(--u) * 26)}
@media (max-aspect-ratio:1/1){.ia--spot .ib{left:auto;right:calc(var(--u) * 24);bottom:calc(var(--u) * 250);transform-origin:100% 100%}.ia--spot .ib::after{left:auto;right:calc(var(--u) * 26)}}
@keyframes isB{0%,43%{opacity:0;transform:scale(.4) rotate(4deg)}43.1%{opacity:1;animation-timing-function:var(--pop)}47%,70%{opacity:1;transform:none}73%,100%{opacity:0;transform:scale(.8)}}

/* ---------- D · THE ESTIMATE. Stuck at 99%; the fox crosses out "4 minutes" and writes "now." ---------- */
.intro.is-estimate{background:var(--ink);animation:introBg var(--T,2.7s) linear forwards;--fw:clamp(140px,15vw,210px);--bw:min(520px,74vw)}
@keyframes introBg{0%,81.4%{background-color:var(--ink);visibility:visible}81.5%,99%{background-color:transparent;visibility:visible}100%{background-color:transparent;visibility:hidden;pointer-events:none}}
.intro .ia--estimate .intro__stage,.intro .ia--estimate .intro__rip{position:absolute;inset:0}
@keyframes introOut{0%,81.4%{opacity:1}81.5%,100%{opacity:0}}
.ia--estimate .intro__stage{animation:introOut var(--T,2.7s) linear forwards}
.intro__n{position:absolute;left:50%;bottom:calc(50% + 22px);transform:translateX(-50%);margin:0;font:700 clamp(84px,13vw,176px)/.8 var(--display);letter-spacing:-.01em;color:var(--white);font-variant-numeric:tabular-nums;white-space:nowrap;animation:introIn .25s var(--iE) both,introN var(--T,2.7s) linear forwards}
.intro__n em{font-style:normal;color:var(--fox);font-size:.5em;margin-left:.06em;vertical-align:.62em}
@keyframes introIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes introN{0%,62.5%{transform:translateX(-50%)}63.3%{transform:translate(-50%,-8px) scale(1.07);color:#FFD9A8}67%,100%{transform:translateX(-50%) scale(1);color:var(--white)}}
.intro__bar{position:absolute;left:calc(50% - var(--bw) / 2);top:50%;width:var(--bw);height:3px;margin-top:-1.5px;background:#221e1c;animation:introBar var(--T,2.7s) linear forwards}
.intro__bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--fox);box-shadow:0 0 14px rgba(243,113,33,.8)}
@keyframes introBar{0%,62.5%{transform:none;background:#221e1c}63.3%,75.9%{transform:none;background:var(--fox);animation-timing-function:cubic-bezier(.7,0,.2,1)}81.4%{transform:scaleX(7);background:var(--fox)}81.5%,100%{transform:scaleX(7);opacity:0}}
/* the two lines under the bar share a spot: the loading line, then the estimate that gets corrected */
.intro__msg,.intro__eta{position:absolute;left:50%;top:calc(50% + 26px);margin:0;white-space:nowrap;font-family:var(--mono);font-size:clamp(11px,1vw,13px);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.intro__eta{top:calc(50% + 30px);font-size:clamp(13px,1.2vw,16px);letter-spacing:.1em}
.intro__msg{transform:translateX(-50%);animation:introIn .25s .05s var(--iE) both,introMsgOut var(--T,2.7s) linear forwards}
@keyframes introMsgOut{0%,29.6%{opacity:1}33.3%,100%{opacity:0}}
.intro__eta{transform:translateX(-50%);opacity:0;animation:introEta var(--T,2.7s) linear forwards}
@keyframes introEta{0%,33.3%{opacity:0;transform:translate(-50%,8px)}38.9%,100%{opacity:1;transform:translateX(-50%)}}
.intro__eta s{position:relative;text-decoration:none;color:var(--white)}
.intro__eta s::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:3px;margin-top:-1px;border-radius:2px;background:var(--fox);transform:rotate(-4deg) scaleX(0);transform-origin:0 50%;animation:introStrike var(--T,2.7s) linear forwards}
@keyframes introStrike{0%,55.5%{transform:rotate(-4deg) scaleX(0)}55.6%{animation-timing-function:cubic-bezier(.5,0,.2,1)}61.5%,100%{transform:rotate(-4deg) scaleX(1)}}
.intro__eta b{position:absolute;left:100%;bottom:48%;margin-left:-.3em;font:600 clamp(36px,3.4vw,50px)/1 var(--hand);letter-spacing:0;text-transform:none;color:var(--fox);transform-origin:0 100%;opacity:0;animation:introNow var(--T,2.7s) linear forwards}
@keyframes introNow{0%,61.4%{opacity:0;transform:rotate(-8deg) scale(.4)}61.5%{opacity:1;animation-timing-function:cubic-bezier(.2,1.8,.4,1)}65.9%,100%{opacity:1;transform:rotate(-8deg) scale(1)}}
/* the fox: peeks up from the bottom corner, nods, ducks out */
.intro__fox{position:absolute;left:calc(50% + var(--bw) / 2 - var(--fw) * .55);bottom:0;width:var(--fw);height:auto;transform:translateY(110%);animation:introFox var(--T,2.7s) linear forwards}
@keyframes introFox{0%,40.7%{transform:translateY(110%) rotate(0)}40.8%{animation-timing-function:cubic-bezier(.2,1.5,.4,1)}48.1%{transform:translateY(34%) rotate(-4deg)}55.5%{transform:translateY(34%) rotate(-4deg)}58.5%{transform:translateY(31%) rotate(3deg)}61.5%{transform:translateY(34%) rotate(-2deg)}66.7%{transform:translateY(34%) rotate(-2deg);animation-timing-function:cubic-bezier(.4,0,.3,1)}68.5%{transform:translateY(40%) rotate(2deg)}70.4%{transform:translateY(34%) rotate(0)}72.2%{transform:translateY(34%) rotate(0);animation-timing-function:cubic-bezier(.6,0,.9,.4)}77.8%,100%{transform:translateY(115%) rotate(6deg)}}
.intro__say{position:absolute;right:calc(50% - var(--bw) / 2 + var(--fw) * .5);bottom:calc(var(--fw) * .5);margin:0;max-width:min(280px,56vw);width:max-content;padding:10px 15px;background:var(--cream-2);color:var(--ink);border:2.5px solid var(--ink);border-radius:15px;font:600 clamp(15px,1.3vw,18px)/1.25 var(--body);letter-spacing:0;text-transform:none;box-shadow:5px 6px 0 var(--fox);transform-origin:100% 100%;opacity:0;animation:introSay var(--T,2.7s) linear forwards}
.intro__say::after{content:"";position:absolute;right:14px;top:100%;width:15px;height:15px;background:inherit;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:translateY(-50%) rotate(45deg)}
@keyframes introSay{0%,48%{opacity:0;transform:scale(.5) rotate(4deg)}48.1%{opacity:1;animation-timing-function:cubic-bezier(.2,1.8,.4,1)}51.8%{opacity:1;transform:none}70.4%{opacity:1;transform:none}73.5%,100%{opacity:0;transform:scale(.8) rotate(-3deg)}}
@media (max-width:760px){
  .intro{--fw:clamp(120px,34vw,160px)}
  .intro__fox{left:auto;right:12px}
  .intro__say{right:calc(12px + var(--fw) * .62);bottom:calc(var(--fw) * .5);font-size:15px;padding:9px 12px}
  .intro__eta{font-size:10.5px;letter-spacing:.06em}
  .intro__eta b{font-size:32px}
}
.intro__rip{position:absolute;inset:0;pointer-events:none}
.intro__rip i{position:absolute;left:0;right:0;height:50.2%;background:var(--ink);opacity:0;animation:introRipIn var(--T,2.7s) linear forwards}
.intro__rip i:first-child{top:0;border-bottom:2px solid var(--fox);box-shadow:0 1px 22px -2px rgba(243,113,33,.9);--dir:-102%}
.intro__rip i:last-child{bottom:0;border-top:2px solid var(--fox);box-shadow:0 -1px 22px -2px rgba(243,113,33,.9);--dir:102%}
@keyframes introRipIn{0%,81.4%{opacity:0;transform:none}81.5%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.76,0,.24,1)}100%{opacity:1;transform:translateY(var(--dir))}}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* ============ THREAD ============ */
.thread{position:absolute;left:0;top:0;width:100%;z-index:40;pointer-events:none;overflow:visible}
.thread path.base{fill:none;stroke:rgba(243,113,33,.14);stroke-width:1}
.thread path.draw{fill:none;stroke:var(--fox);stroke-width:1.4;stroke-linejoin:miter}
.thread .tip{fill:#FFD9A8}
.thread .glow{fill:url(#tipglow)}

/* ============ CURSOR ============ */
.cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:0;height:0}
.cursor__in{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;background:var(--fox);color:var(--ink);display:grid;place-items:center;text-align:center;font-stretch:125%;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.25;padding:10px;transform:scale(0);transition:transform .45s var(--ease)}
.cursor.is-on .cursor__in{transform:scale(1)}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;min-height:max(100svh,660px);padding:calc(var(--nav-h) + 6vh) var(--gutter) 0;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.hero__ghost{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__ghostword{position:absolute;left:-2vw;bottom:-6vw;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:34vw;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(246,242,236,.12);white-space:nowrap;will-change:transform}
.hero__fox{position:absolute;right:-9vw;top:4vh;width:min(76vw,1180px);opacity:.1;filter:grayscale(1) contrast(1.4) brightness(1.2);-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 45%,#000 40%,transparent 75%);mask-image:radial-gradient(ellipse 60% 60% at 50% 45%,#000 40%,transparent 75%)}
.hero__geo{position:absolute;inset:0;width:100%;height:100%}
.hero__geo line,.hero__geo path,.hero__geo rect{fill:none;stroke:var(--fox);stroke-width:1;vector-effect:non-scaling-stroke}
.hero__geo .dim{stroke:rgba(246,242,236,.12)}
.hero__inner{position:relative;max-width:var(--max);width:100%;margin:auto 0;padding:4vh 0 9vh}
.hero__title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(76px,12.8vw,236px);line-height:.84;letter-spacing:-.008em;margin:26px 0 30px}
.hero__title .ln{display:block;overflow:hidden;padding:.16em 0 .14em;margin:-.16em 0 -.12em}
.hero__title .ln>span{display:inline-block}
.hero__title em{color:var(--fox);font-style:normal}
.ol{color:transparent;-webkit-text-stroke:1.5px var(--white)}
.hero__disc{font-stretch:125%;text-transform:uppercase;letter-spacing:.3em;font-size:clamp(11px,1vw,14px);font-weight:500;color:var(--soft);display:flex;flex-wrap:wrap;gap:6px 0}
.hero__disc span{display:inline-flex;align-items:center}
.hero__disc span:not(:last-child)::after{content:"";width:5px;height:5px;background:var(--fox);transform:rotate(45deg);margin:0 18px}
.hero__lead{margin-top:18px;font-size:clamp(20px,1.9vw,28px);line-height:1.35;color:var(--white);font-weight:300;max-width:22em}
.hero__ctas{margin-top:38px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 34px}
.build{position:absolute;right:0;bottom:9vh;display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:2}
.build__we{font-stretch:125%;text-transform:uppercase;letter-spacing:.3em;font-size:11px;color:var(--mute);display:flex;align-items:center;gap:12px}
.build__we i{width:7px;height:7px;border-radius:50%;background:#e2352b;animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.build__frame{position:relative;height:clamp(58px,6vw,96px);padding:0 20px;display:flex;align-items:center;overflow:hidden;min-width:220px;justify-content:flex-end}
.build__frame::before,.build__frame::after{content:"";position:absolute;width:16px;height:16px;border:1.5px solid var(--fox)}
.build__frame::before{left:0;top:0;border-right:0;border-bottom:0}
.build__frame::after{right:0;bottom:0;border-left:0;border-top:0}
.build__track{position:relative;height:100%}
.build__word{position:absolute;right:0;top:50%;white-space:nowrap;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(44px,4.6vw,78px);line-height:1;transform:translateY(-50%)}
.build__word.is-final{color:var(--fox)}
.build__tc{font-family:var(--mono);font-size:10.5px;color:var(--mute);letter-spacing:.1em}
.hero__foot{position:relative;margin-bottom:calc(9vw + 14px);display:flex;justify-content:space-between;align-items:flex-end;color:var(--mute);pointer-events:none}
.scrollcue{display:flex;align-items:center;gap:14px;font-stretch:125%;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase}
.scrollcue i{position:relative;width:1px;height:42px;background:rgba(246,242,236,.15);overflow:hidden}
.scrollcue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--fox);animation:drip 2s var(--ease) infinite}
@keyframes drip{to{top:110%}}

/* ============ FOOTER ============ */
.foot{position:relative;z-index:5;background:#050404;border-top:1px solid #1b1918;padding:70px var(--gutter) calc(30px + env(safe-area-inset-bottom,0px))}
.foot__top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;max-width:var(--max)}
.foot__mark{width:60px;display:block;transition:transform .5s var(--ease)}
.foot__mark:hover{transform:rotate(-8deg) scale(1.05)}
.foot__mark.wink img{animation:wink .6s var(--ease)}
@keyframes wink{40%{transform:scaleY(.8) rotate(-6deg)}}
.foot__name{font-size:34px;margin-top:18px}
.foot__tag{color:var(--mute);margin-top:6px}
.foot__col{display:flex;flex-direction:column;gap:9px;color:var(--soft);font-size:15px}
.foot__col b{color:var(--white);font-size:10.5px;margin-bottom:8px}
.foot__col a:hover{color:var(--fox)}
.foot__soc{margin:14px 0 20px}
/* social tiles: chamfered like the buttons; on hover the tile fills orange, the glyph pops and the name tags in above */
.soc{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.soc li{list-style:none}
.soc__a{position:relative;display:grid;place-items:center;width:46px;height:46px;color:var(--cream,#E1D7C4);background:#0e0d0c;isolation:isolate;
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));transition:color .3s var(--ease),transform .4s var(--ease)}
.soc__a::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(135deg,#4a3f39,#26211f 60%,#3a2a20);clip-path:inherit}
.soc__a::after{content:"";position:absolute;inset:1px;z-index:-1;background:#0e0d0c;clip-path:polygon(0 0,calc(100% - 10.6px) 0,100% 10.6px,100% 100%,10.6px 100%,0 calc(100% - 10.6px));transition:background .35s var(--ease)}
.soc__a svg{width:20px;height:20px;transition:transform .45s var(--ease)}
.soc__a:hover,.soc__a:focus-visible{color:#0B0A0A!important;transform:translateY(-3px)}
.soc__a:hover::before,.soc__a:focus-visible::before{background:var(--fox)}
.soc__a:hover::after,.soc__a:focus-visible::after{background:var(--fox)}
.soc__a:hover svg{transform:scale(1.12) rotate(-6deg)}
.soc li{position:relative}
.soc li::after{content:attr(data-l);position:absolute;left:50%;top:calc(100% + 7px);transform:translate(-50%,-6px);pointer-events:none;opacity:0;white-space:nowrap;
  font:500 10.5px var(--mono,'JetBrains Mono',monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--fox);transition:opacity .25s,transform .35s var(--ease)}
.soc li:hover::after,.soc li:focus-within::after{opacity:1;transform:translate(-50%,0)}
.soc__hint{margin-top:10px;font:600 17px/1.2 'Caveat',cursive;color:var(--fox);transform:rotate(-2deg);transform-origin:left}
.sheet__soc .soc__a{width:52px;height:52px}.sheet__soc .soc__a svg{width:22px;height:22px}
@media (hover:none){.soc li::after{display:none}}
.foot__areas{margin-top:48px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;font-size:14px;color:var(--soft);max-width:var(--max)}.foot__areas b{color:var(--white);font-size:10.5px;margin-right:6px}.foot__areas a:hover{color:var(--fox)}.foot__areas .foot__all,.foot__col .foot__all{color:var(--mute)}
.foot__areas+.foot__bot{margin-top:28px}
.foot__bot{margin-top:60px;padding-top:22px;border-top:1px solid #1b1918;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;font-size:12.5px;color:var(--mute);max-width:var(--max)}

@media (max-width:1080px){.foot__top{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}}
@media (max-width:760px){.foot__top{grid-template-columns:1fr}}

@media (max-width:1080px){
  .nav__links,.nav .btn--start{display:none}
  .nav__burger{display:block}
  .mega{display:none}
  .thumb{display:inline-flex}
}
@media (max-width:760px){
  :root{--nav-h:66px}
  .nav__logo{height:32px}
  .nav__mark{height:30px}
  .nav__where{left:44px}
  .hero{padding-top:calc(var(--nav-h) + 40px);min-height:auto}
  .hero__inner{margin:0;padding-bottom:0}
  .hero__title{font-size:clamp(64px,19vw,120px);margin:20px 0 22px}
  .hero__fox{width:150vw;right:-62vw;top:6vh;opacity:.11}
  .hero__ghostword{font-size:60vw;bottom:auto;top:52%}
  .hero__disc{letter-spacing:.22em}
  .hero__disc span:not(:last-child)::after{margin:0 10px}
  .build{position:relative;right:auto;bottom:auto;align-items:flex-start;margin:44px 0 0;min-height:150px}
  .build__frame{justify-content:flex-start;padding:0 16px;min-width:0;width:100%}
  .build__word{right:auto;left:0}
  .hero__ctas{gap:6px 26px}
  .hero__foot{margin:34px 0 26px}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  *{scroll-behavior:auto!important}
}

/* ---------- back to top ---------- */
.totop{position:fixed;right:clamp(16px,2.2vw,32px);bottom:calc(clamp(16px,2.2vw,32px) + env(safe-area-inset-bottom,0px));z-index:60;width:56px;height:56px;padding:0;background:none;border:0;cursor:pointer;opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1)}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop svg{display:block;width:100%;height:100%;overflow:visible}
.totop__rail{fill:rgba(11,10,10,.82);stroke:#2b2725;stroke-width:1.5;transition:fill .25s}
.totop__run{fill:none;stroke:var(--fox,#F37121);stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:0 1;filter:drop-shadow(0 0 4px rgba(243,113,33,.6))}
.totop__arrow path{fill:none;stroke:#ECE5D7;stroke-width:2.4;stroke-linecap:square;transition:stroke .25s}
.totop__arrow{transform-origin:28px 28px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.totop:hover .totop__rail,.totop:focus-visible .totop__rail{fill:var(--fox,#F37121)}
.totop:hover .totop__arrow path,.totop:focus-visible .totop__arrow path{stroke:#0B0A0A}
.totop:hover .totop__arrow{transform:translateY(-3px)}
.totop:focus-visible{outline:2px solid var(--fox,#F37121);outline-offset:4px}
.totop.is-end .totop__arrow{animation:totopNudge 1.4s cubic-bezier(.16,1,.3,1) 2}
.totop.is-launch .totop__arrow{animation:totopLaunch .6s cubic-bezier(.5,0,.2,1)}
@keyframes totopNudge{0%,100%{transform:none}40%{transform:translateY(-6px)}}
@keyframes totopLaunch{0%{transform:none;opacity:1}45%{transform:translateY(-34px);opacity:0}46%{transform:translateY(22px);opacity:0}100%{transform:none;opacity:1}}
.totop__say{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(8px,-50%);white-space:nowrap;padding:8px 12px;background:#0B0A0A;border:1px solid #2b2725;color:#ECE5D7;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.totop:hover .totop__say{opacity:1;transform:translate(0,-50%)}
@media (hover:none){.totop__say{display:none}}
@media (max-width:640px){.totop{width:46px;height:46px}}
@media (prefers-reduced-motion:reduce){.totop,.totop__arrow{transition:none}.totop.is-end .totop__arrow,.totop.is-launch .totop__arrow{animation:none}}
body.is-locked .totop{opacity:0;pointer-events:none}
.foot__up{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:var(--mute);font:inherit;cursor:pointer;transition:color .2s}
.foot__up svg{width:11px;height:11px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.foot__up:hover,.foot__up:focus-visible{color:var(--fox,#F37121)}.foot__up:hover svg{transform:translateY(-3px)}
body:has(.totop) .foot__bot{padding-right:84px}@media (max-width:640px){body:has(.totop) .foot__bot{padding-right:64px}}

/* the Reel link in the menu */
.nav__reel{display:inline-flex;align-items:center;gap:8px}
.nav__reel i{width:15px;height:15px;border-radius:50%;background:var(--fox);display:inline-grid;place-items:center;flex:none;transition:transform .3s var(--ease)}
.nav__reel i::after{content:"";margin-left:2px;border-left:5px solid var(--ink);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.nav__reel:hover i{transform:scale(1.2)}

/* arriving on a case study from the reel: the held frame, fading into the page */
.rl-arrive{position:fixed;inset:0;z-index:89;background:#000 center/cover no-repeat;pointer-events:none;transition:opacity .9s var(--ease) .15s}
.rl-arrive.is-gone{opacity:0}

/* ---------- one thing floating at a time (phones) ---------- */
@media (max-width:760px){
  .totop{display:none}                               /* the footer has Back to top, and the bar is the one ask */
  html.cf-bar-on .cfa-roam,html.cfl-nudge-on .cfa-roam{opacity:0!important;visibility:hidden!important;transition:opacity .3s,visibility 0s .3s}
}
@media (min-width:761px){html.cfl-nudge-on .cfa-roam{opacity:0!important;visibility:hidden!important;transition:opacity .3s,visibility 0s .3s}}
/* phones: the intro's speech bubbles sit over the fox, clear of the See the work button */
@media (max-aspect-ratio:1/1) and (max-width:760px){.ia--tada .ib{right:calc(var(--u) * 26);bottom:calc(var(--u) * 345)}}
/* expertise menu: room between each name and its line, and the names get the column's width so they don't wrap */
.mega__item{align-self:stretch;max-width:620px}
.mega__name{line-height:.9}
.mega__desc{display:block;margin-top:12px;line-height:1.5}

/* ============ COMIC MODE switch (the rest of comic mode lives in comic.css, loaded only when it is on) ============ */
.cmx{position:relative;display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 12px 0 6px;margin-left:clamp(14px,1.6vw,26px);border:1px solid rgba(246,242,236,.16);border-radius:999px;color:var(--soft);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.cmx img{width:26px;height:26px;object-fit:contain;flex:none;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.cmx__l b{font-weight:500;color:var(--white)}
.cmx__l i{font-style:normal;color:var(--fox);margin:0 2px}
.cmx__on,html.cf-comic .cmx__off{display:none}
html.cf-comic .cmx__on{display:inline}
.cmx__a{color:var(--fox);transition:transform .3s}
.cmx:hover,.cmx:focus-visible{border-color:var(--fox);color:var(--white)}
.cmx:hover img{transform:rotate(-14deg) scale(1.12)}
.cmx:hover .cmx__a{transform:translateX(3px)}
.cmx::after{content:attr(title);position:absolute;left:50%;top:calc(100% + 8px);transform:translate(-50%,-4px);padding:4px 9px;background:var(--fox);color:var(--ink);font-family:var(--hand);font-size:17px;letter-spacing:0;text-transform:none;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s}
.cmx--nav:hover::after{opacity:1;transform:translate(-50%,0) rotate(-3deg)}
html.cf-comic .cmx::after{display:none}
/* the header has room for the full label on wide screens; otherwise "Comic mode" (or "Contain the fox" once it is on), and the rest stays for screen readers */
.cmx--nav .cmx__l>i,.cmx--nav .cmx__off{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.cf-comic .cmx--nav .cmx__l>b,html.cf-comic .cmx--nav .cmx__l>i{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:1500px){.cmx--nav .cmx__l>i,.cmx--nav .cmx__off,html.cf-comic .cmx--nav .cmx__l>b,html.cf-comic .cmx--nav .cmx__l>i{position:static;width:auto;height:auto;overflow:visible;clip:auto}}
@media (max-width:1180px){.cmx--nav .cmx__l b,html.cf-comic .cmx--nav .cmx__on{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.cmx--nav{padding:0 10px 0 6px}}
.cmx--sheet{align-self:flex-start;width:fit-content;margin:0 0 18px;height:44px;padding:0 16px 0 8px;font-size:11px}
.cmx--sheet .cmx__l>:not(.cmx__on){display:inline}
html.cf-comic .cmx--sheet .cmx__on{display:inline}
html.cf-comic .cmx--sheet .cmx__off{display:none}
@media (max-width:1080px){.cmx--nav{display:none}}