@font-face{font-family:"Geist";src:url(assets/Geist.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url(assets/ZillaSlab-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(assets/GeistMono.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--head:"tarif","Zilla Slab",sans-serif;--ink:#0e0e0e;--ink2:#171717;--black:#1a1a1a;--paper:#f6f5f2;--white:#fff;--o:#f05223;
--pad:clamp(20px,3.2vw,48px);--sec:clamp(96px,12vw,184px);--ease:cubic-bezier(.2,.7,.1,1);
--bg:var(--ink);--fg:#fff;--line:rgba(255,255,255,.14);--dim:#8c8c8c;--muted:#bdbdbd;--ph:var(--ink2)}
.t-light{--bg:#fff;--fg:var(--ink);--line:rgba(14,14,14,.13);--dim:#6b6b6b;--muted:#3a3a3a;--ph:#f1f0ed;background:var(--bg);color:var(--fg)}
.t-orange{--bg:var(--o);--fg:var(--ink);--line:rgba(14,14,14,.22);--dim:rgba(14,14,14,.66);--muted:#2b1208;--ph:rgba(14,14,14,.1);background:var(--bg);color:var(--fg)}
.t-orange .eyebrow i,.t-orange .count{background:var(--ink)}
.t-orange .count{background:none;color:var(--ink)}
.t-orange :focus-visible{outline-color:var(--ink)}
.t-dark{--bg:var(--ink);--fg:#fff;--line:rgba(255,255,255,.14);--dim:#8c8c8c;--muted:#bdbdbd;--ph:var(--ink2);background:var(--bg);color:var(--fg)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--ink);color:#fff;font-family:"Geist","Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
em,i,cite{font-style:normal}
.wrap{width:100%;max-width:1520px;margin:0 auto;padding:0 var(--pad)}
.mono{font-family:"Geist Mono",ui-monospace,Menlo,monospace;font-size:12px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;font-weight:400}
.dim{color:var(--dim)}
:focus-visible{outline:2px solid var(--o);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:99;background:var(--o);color:var(--ink);padding:10px 14px;border-radius:99px}
.skip:focus{left:12px}

/* display type */
/* headings: Tarif Medium (Adobe kit) with a self-hosted slab stand-in */
h1,h2,h3,.svc .st{font-family:var(--head);font-weight:500;text-transform:uppercase;font-synthesis:none}
.display{letter-spacing:-.012em;line-height:.92;margin:0}
.display em{color:var(--o)}
h1.display{font-size:clamp(52px,13vw,220px);line-height:.88}
.display.xl{font-size:clamp(42px,8vw,124px)}
.display.l{font-size:clamp(36px,5.6vw,88px)}
.display .ln{display:block}

/* pills */
.pill{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor;transition:transform .3s var(--ease)}
.pill:hover i{transform:scale(1.6)}
.pill-o{background:var(--o);color:var(--ink)}
.pill-o:hover{background:var(--fg);color:var(--bg)}
.pill-l{border:1px solid var(--line);color:var(--fg)}
.pill-l:hover{border-color:var(--fg)}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 clamp(28px,4vw,56px);color:var(--dim)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--o)}

/* nav — follows the section under it */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,border-color .4s,color .4s;border-bottom:1px solid transparent;color:var(--fg)}
.nav[data-theme=light]{--bg:#fff;--fg:var(--ink);--line:rgba(14,14,14,.13);--navbg:rgba(255,255,255,.86)}
.nav[data-theme=dark]{--bg:var(--ink);--fg:#fff;--line:rgba(255,255,255,.14);--navbg:rgba(14,14,14,.84)}
.nav[data-theme=orange]{--bg:var(--o);--fg:var(--ink);--line:rgba(14,14,14,.22);--navbg:rgba(240,82,35,.92)}
.nav.solid{background:var(--navbg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:40px;height:76px}
.brand{display:block;color:var(--black);transition:color .4s}
.brand .logo{display:block;height:36px;width:auto}
.nav[data-theme=dark] .brand{color:var(--o)}
.links{display:flex;gap:36px;margin-left:auto}
.links a{position:relative;opacity:.78;transition:opacity .3s}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--o);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav[data-theme=orange] .links a::after{background:var(--ink)}
.links a:hover{opacity:1}.links a:hover::after{transform:scaleX(1)}
.nav-cta{height:40px;padding:0 18px}
.nav[data-theme=orange] .pill-o{background:var(--ink);color:#fff}
.menu{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--fg);height:40px;padding:0 18px;border-radius:999px;cursor:pointer}
.sheet{background:var(--bg);color:var(--fg);border-top:1px solid var(--line);height:calc(100dvh - 76px)}
.sheet nav{display:flex;flex-direction:column;padding-top:32px;padding-bottom:32px}
.sheet a{font-size:44px;letter-spacing:-.03em;line-height:1.15;padding:10px 0;border-bottom:1px solid var(--line)}
.sheet a.pill{font-size:12px;border:0;margin-top:32px;align-self:flex-start;padding:0 22px}

/* hero */
.hero{min-height:100svh;display:flex;align-items:stretch;padding-top:76px}
.hero .wrap{display:flex;flex-direction:column;justify-content:space-between;gap:56px;padding-top:clamp(40px,7vh,96px);padding-bottom:clamp(36px,6vh,64px);position:relative}
.meta{display:flex;justify-content:space-between;gap:20px;color:var(--dim);padding-bottom:18px;border-bottom:1px solid var(--line)}
.hero-foot{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.lede{grid-column:1/span 5;margin:0;color:var(--muted);font-size:18px;max-width:46ch}
.ctas{grid-column:9/span 4;display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}


@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* marquee band */
.band-wrap{overflow:hidden;padding:clamp(28px,4vw,56px) 0;background:var(--ink)}
.band{background:var(--ink);color:var(--o);border-top:1px solid rgba(240,82,35,.35);border-bottom:1px solid rgba(240,82,35,.35);transform:rotate(-2deg);margin:0 -4vw;padding:18px 0;overflow:hidden}
.track{display:flex;align-items:center;gap:36px;width:max-content;animation:mq 38s linear infinite;font-size:clamp(34px,4.6vw,68px);letter-spacing:-.03em;line-height:1;white-space:nowrap}
.track span{display:inline-block}
.track i{width:14px;height:14px;border-radius:50%;background:var(--o);display:inline-block;flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* about */
.about{padding:calc(var(--sec) - 40px) 0 var(--sec)}
.about .cols{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(56px,8vw,120px);padding-top:32px;border-top:1px solid var(--line)}
.about .big{grid-column:1/span 6;margin:0;font-size:clamp(22px,2.1vw,30px);line-height:1.3;letter-spacing:-.015em;max-width:24ch}
.about .cols>div{grid-column:8/span 5}
.about .cols>div p{margin:0 0 32px;color:var(--muted);font-size:18px}

/* section heads */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(48px,6vw,88px)}
.sec-head .eyebrow{flex-basis:100%;margin-bottom:0}
.count{color:var(--o)}

/* work grid (orange) */
.work{padding:var(--sec) 0}

















/* process */
.process{padding:var(--sec) 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{border-top:1px solid var(--line);padding-top:24px}
.step .mono{color:var(--o)}
.step h3{font-size:clamp(26px,2.4vw,36px);letter-spacing:0;line-height:1;margin:56px 0 16px}
.step p{margin:0;color:var(--muted);font-size:16px;max-width:30ch}

/* services */
.services{border-top:1px solid rgba(255,255,255,.08)}
.services{padding:var(--sec) 0}
.services .sec-head h2{max-width:14ch}
.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc li{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease)}
.svc .n{grid-column:1/span 1;color:var(--o)}
.svc .st{grid-column:2/span 6;font-size:clamp(22px,2.6vw,38px);letter-spacing:0;line-height:1.05;transition:color .3s}
.svc .sd{grid-column:8/span 4;color:var(--dim);font-size:16px}
.svc .arr{grid-column:12;justify-self:end;color:var(--o);font-size:22px;opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .4s var(--ease)}
.svc li:hover{padding-left:12px}
.svc li:hover .st{color:var(--o)}
.svc li:hover .arr{opacity:1;transform:none}

/* contact */
.contact{padding:var(--sec) 0;border-top:1px solid rgba(255,255,255,.08)}
.ct-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:clamp(56px,7vw,104px);padding-top:32px;border-top:1px solid var(--line)}
.ct-links a:hover{color:var(--o)}
.big-pill{height:60px;padding:0 30px}
.ct-links{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.ct-links a{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.025em;line-height:1.2;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.ct-links a:hover{background-size:100% 1px}

/* footer */
.foot{padding:88px 0 28px;border-top:1px solid rgba(255,255,255,.08)}
.fcols{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.fcols>div{grid-column:span 3;display:flex;flex-direction:column;gap:6px}
.fcols>div.fstart{grid-column:10/span 3}
.fcols p{margin:0 0 14px}
.fcols a,.fcols span{color:#d0d0d0;font-size:16px}
.fcols a:hover{color:var(--o)}
.fbottom{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin:clamp(72px,10vw,140px) 0 40px}
.flogo{display:block;width:min(38%,450px);height:auto;color:var(--o)}
.ftag{margin:0;font-size:clamp(22px,2.4vw,36px);letter-spacing:-.025em;line-height:1.1;text-align:right}
.ftag em{color:var(--o)}
.legal{display:flex;justify-content:space-between;gap:16px;padding-top:20px;border-top:1px solid var(--line)}
.legal a:hover{color:var(--white)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:#0b0b0b;color:#fff;opacity:0;transition:opacity .3s var(--ease);touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:contain}
.lb[hidden]{display:none}
.lb.open{opacity:1}
.lb-stage{position:absolute;inset:0;overflow:hidden}
.lb-track{display:flex;height:100%;transform:translate3d(-100%,0,0);will-change:transform}
.lb-track.anim{transition:transform .38s var(--ease)}
.lb-pane{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;padding:72px clamp(16px,7vw,112px) 92px}
.lb-pane img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;pointer-events:none;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.lb-bar{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad);pointer-events:none}
.lb-bar>*{pointer-events:auto}
.lb-top{top:0;height:72px;padding-top:env(safe-area-inset-top)}
.lb-bot{bottom:0;min-height:92px;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid rgba(255,255,255,.1)}
.lb-count{color:#bdbdbd}.lb-count b{color:var(--o);font-weight:400}
.lb-cap{margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.lb-cap .nm{font-size:clamp(18px,1.8vw,24px);letter-spacing:-.02em}
.lb-cap .mono{color:#8c8c8c;font-size:11px}
.lb-hint{color:#6d6d6d;font-size:11px}
.lb-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(14,14,14,.5);color:#fff;cursor:pointer;padding:0;transition:background .3s,border-color .3s,color .3s}
.lb-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lb-btn:hover{background:var(--o);border-color:var(--o);color:var(--ink)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px}
.lb-prev{left:clamp(12px,2vw,32px)}.lb-next{right:clamp(12px,2vw,32px)}
html.lb-lock,html.lb-lock body{overflow:hidden}

/* reveal */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .hero .ln{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .hero.in .ln{opacity:1;transform:none}
.js .hero.in .ln+.ln{transition-delay:.12s}

/* tablet */
@media (max-width:1100px){
  .steps{grid-template-columns:repeat(2,1fr);row-gap:56px}
  .lede{grid-column:1/span 7}.ctas{grid-column:8/span 5}
}
/* phone */
@media (max-width:760px){
  body{font-size:16px}
  .links,.nav-cta{display:none}
  .menu{display:inline-flex;align-items:center}
  .nav-in{height:64px}.brand .logo{height:28px}
  .sheet{height:calc(100dvh - 64px)}
  .hero{padding-top:64px}
  .hero .wrap{gap:40px}
  .meta{flex-direction:column;gap:6px}
  h1.display{font-size:clamp(44px,15vw,80px);letter-spacing:-.01em}
  .display.xl{font-size:clamp(38px,11vw,60px)}.display.l{font-size:clamp(34px,10vw,52px)}
  .hero-foot{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
  .lede{font-size:16px}
  .ctas{justify-content:flex-start;width:100%;gap:10px}
  .ctas .pill{padding:0 16px}

  .band{padding:12px 0}
  .fbottom{flex-direction:column;align-items:flex-start}
  .flogo{width:74%}
  .ftag{text-align:left}
  .about .cols{display:flex;flex-direction:column;gap:28px}


  .steps{grid-template-columns:1fr;row-gap:40px}
  .step h3{margin-top:28px}
  .svc li{grid-template-columns:40px 1fr;gap:4px 12px;padding:24px 0}
  .svc .n{grid-column:1;grid-row:1}
  .svc .st{grid-column:2;grid-row:1}
  .svc .sd{grid-column:2;grid-row:2}
  .svc .arr{display:none}
  .ct-row{flex-direction:column;align-items:flex-start}
  .ct-links{align-items:flex-start}
  .fcols{display:flex;flex-direction:column;gap:36px}
  .legal{flex-direction:column}
  .lb-pane{padding:64px 0 104px}
  .lb-pane img{border-radius:0;box-shadow:none}
  .lb-nav{top:auto;bottom:calc(22px + env(safe-area-inset-bottom));transform:none;width:48px;height:48px}
  .lb-prev{left:auto;right:76px}.lb-next{right:var(--pad)}
  .lb-bot{align-items:flex-start;padding-top:18px;padding-right:140px}
  .lb-cap{flex-direction:column;gap:2px}
  .lb-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .rv,.js .hero .ln{opacity:1;transform:none}
}

/* work as real-world scenes: black vector world, full-colour work */
.sprite{position:absolute;width:0;height:0;overflow:hidden}






/* ambient orb: soft orange, grainy, follows the pointer */
.orb{position:fixed;left:0;top:0;width:clamp(320px,42vw,640px);aspect-ratio:1;margin:calc(clamp(320px,42vw,640px)/-2) 0 0 calc(clamp(320px,42vw,640px)/-2);z-index:45;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;transition:opacity .9s;opacity:0}
.orb.on{opacity:.62}
.orb i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,120,60,.95) 0,rgba(240,82,35,.55) 26%,rgba(240,82,35,.18) 48%,rgba(240,82,35,0) 68%);animation:orbIn 1.8s var(--ease) both}
.orb i::after{content:"";position:absolute;inset:0;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");-webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 40%,transparent 66%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 40%,transparent 66%);opacity:.55}
@keyframes orbIn{from{transform:scale(.35);opacity:0}to{transform:none;opacity:1}}
.lb-lock .orb{opacity:0}
@media (prefers-reduced-motion:reduce){.orb i{animation:none}}































.work-desc{max-width:44ch;color:rgba(255,255,255,.72);font-size:clamp(16px,1.3vw,19px);line-height:1.5;margin:0}



.foot .flogo{width:clamp(110px,14vw,190px)!important;height:auto!important;max-width:none!important}

/* services as cards */
.services .svc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;border-top:0}
.services .svc li{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:0;padding:26px 24px 24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#191919,#121212);position:relative;transition:transform .45s var(--ease),border-color .3s,box-shadow .45s var(--ease)}
.services .svc .n{color:var(--o);font-size:13px;letter-spacing:.08em}
.services .svc .st{font-size:clamp(22px,1.8vw,30px);line-height:1.05;margin-top:36px;min-height:2.1em}
.services .svc .sd{color:var(--dim);font-size:15px;line-height:1.45}
.services .svc .arr{display:block;position:absolute;top:22px;right:22px;opacity:1;transform:none;color:var(--o);font-size:20px;transition:transform .4s var(--ease)}
.services .svc li:hover{padding-left:24px;transform:translateY(-6px);border-color:rgba(240,82,35,.55);box-shadow:0 18px 50px -18px rgba(240,82,35,.45)}
.services .svc li:hover .arr{transform:translateX(4px)}
@media (max-width:1100px){.services .svc{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.services .svc{grid-template-columns:1fr;gap:12px}.services .svc li{min-height:0;padding:20px 20px 20px;gap:8px;border-radius:16px}.services .svc .st{margin-top:6px;min-height:0;font-size:24px}.services .svc .arr{top:18px;right:18px}}

.logo{height:46px!important}@media(max-width:700px){.logo{height:36px!important}}

/* ---------- work board (Pinterest-style masonry) ---------- */
.work .sec-head{margin-bottom:clamp(28px,4vw,56px)}
.board{--g:14px;columns:4 280px;column-gap:var(--g)}
.board.mz{columns:auto;display:flex;align-items:flex-start;gap:var(--g)}
.board .col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--g)}
.pin{margin:0 0 var(--g);break-inside:avoid;position:relative}
.board.mz .pin{margin:0}
.pa{display:block;position:relative;overflow:hidden;border-radius:8px;background:#161616;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.pa img{display:block;width:100%;height:auto;opacity:0;transform:scale(1.001);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.pa img.on{opacity:1}
.pin figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;display:flex;flex-direction:column;gap:3px;pointer-events:none;border-radius:0 0 8px 8px;
  background:linear-gradient(transparent,rgba(8,8,8,.82));opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.pin .nm{font-family:var(--head);font-weight:500;text-transform:uppercase;font-size:17px;line-height:1;color:#fff;letter-spacing:-.005em}
.pin .mono{font-size:10.5px;color:rgba(255,255,255,.72);letter-spacing:.06em;text-transform:uppercase}
.pin .nm::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--o);margin:0 8px 2px 0;vertical-align:middle}
@media (hover:hover){
  .pin:hover .pa img,.pa:focus-visible img{transform:scale(1.045)}
  .pin:hover figcaption,.pin:focus-within figcaption{opacity:1;transform:none}
}
@media (max-width:1100px){.board{columns:3 220px}}
@media (max-width:760px){.board{--g:8px;columns:2 140px}.pa{border-radius:6px}.pin figcaption{display:none}}
/* ---------- first view: exactly one screen ---------- */
.hero{height:100vh;height:100svh;min-height:0;box-sizing:border-box}
.hero .wrap{height:100%;justify-content:space-between}
.hero h1.display{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center;min-height:0}
.hero .hero-foot{flex:none}
@media (max-height:520px) and (orientation:landscape){.hero{height:auto;min-height:100svh}}
/* lightbox: edge to edge */
.lb{height:100vh;height:100dvh}
.lb-pane{padding:64px 72px 84px}
.lb-pane img{border-radius:2px}
@media (max-width:760px){.lb-pane{padding:58px 0 96px}}

.board.mz .pin .pa{display:block;height:100%}
.board.mz .pin .pa img{width:100%;height:100%;object-fit:cover}
.inkin{padding:clamp(80px,14vw,200px) 0 clamp(40px,6vw,90px);text-align:center}
.inkin h2{font-family:var(--head);font-weight:500;text-transform:uppercase;font-size:clamp(48px,11vw,170px);line-height:.92;letter-spacing:-.01em;margin:0;color:#fff}
.inkin h2 em{font-style:normal;color:var(--o)}

/* like button */
.board .pin{position:relative}
.like{position:absolute;right:10px;bottom:10px;z-index:3;display:flex;align-items:center;gap:6px;padding:7px 11px;border:0;border-radius:999px;background:rgba(10,10,10,.72);color:#fff;font:600 13px/1 Geist,system-ui,sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .15s ease,background .2s}
.like svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;transition:fill .2s,stroke .2s}
.like:hover{transform:scale(1.06)}
.like.on svg{fill:#F05223;stroke:#F05223}
.like.pop svg{animation:likepop .35s ease}
.like .lc:empty{display:none}
@keyframes likepop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
@media (max-width:640px){.like{right:7px;bottom:7px;padding:6px 9px;font-size:12px}.like svg{width:14px;height:14px}}

.orb{display:none!important}

/* ===== headline style v11 — from Eliezar's InDesign file: clean sans caps + PP Editorial Old italic accents ===== */
@font-face{font-family:"PP Editorial Old";src:url(assets/PPEditorialOld-Italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
:root{--hl:"Geist","Helvetica Neue",Arial,sans-serif;--acc:"PP Editorial Old","Times New Roman",Georgia,serif}
h1.display,h2.display,.inkin h2{font-family:var(--hl);font-weight:400;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;margin:0;color:#fff;text-wrap:balance}
.acc{font-family:var(--acc);font-style:italic;font-weight:400;text-transform:none;color:var(--o);font-size:1.1em;letter-spacing:-.01em;line-height:.8;padding:0 .015em}
h1.display{font-size:clamp(46px,8.2vw,168px);line-height:1.05}
h2.display{font-size:clamp(38px,6.6vw,128px)}
.display.hl-c,.about .eyebrow{text-align:center;justify-content:center}
.about h2.display{margin:0 auto}
.inkin h2{font-size:clamp(56px,11.5vw,220px);line-height:1}
.services .sec-head h2{max-width:none}
.ftag .acc{font-size:1.18em}
@media (max-width:760px){
  h1.display{font-size:clamp(40px,11.6vw,64px);line-height:1.04;letter-spacing:-.02em}
  .hero .ln{display:inline}
  h2.display{font-size:clamp(34px,9.6vw,52px);line-height:1.05}
  .inkin h2{font-size:clamp(48px,14.5vw,84px)}
  br.dk{display:none}
}

/* process step titles: Geist SemiBold per Eliezar Oct 26 4:45 PM */
.step h3{font-family:"Geist","Helvetica Neue",Arial,sans-serif!important;font-weight:600!important;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}

/* no titles on work, per Eliezar Oct 26 5:30 PM */
.pin figcaption,.lb-cap{display:none!important}

/* collapsed work board + show more / randomize */
.board.clip{max-height:min(1500px,160vh);overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.board-more{display:flex;justify-content:center;gap:12px;margin-top:28px}
.board-more [hidden]{display:none!important}
@media (max-width:739px){.board.clip{max-height:150vh}}

/* Oct 26 5:40 PM: LET THAT INK IN on one line, smaller */
.inkin h2{font-size:clamp(30px,7.2vw,120px)!important;white-space:nowrap;text-wrap:nowrap}
/* Oct 26 5:40 PM: process steps aligned - titles reserve 2 lines so text starts at the same height */
.step h3{font-size:clamp(20px,1.9vw,28px)!important;min-height:2.1em}
@media (max-width:739px){.step h3{min-height:0}}

/* Oct 26 5:44 PM: longer About intro, smaller + neater */
.about .big{grid-column:1/span 7;font-size:clamp(18px,1.5vw,22px);line-height:1.5;letter-spacing:-.01em;max-width:46ch}
.about .cols>div{grid-column:9/span 4}
.about .cols>div p{font-size:16px;line-height:1.55}

/* nav: Invites (free) */
.links a.nav-inv{display:inline-flex;align-items:center;gap:7px;opacity:1}
.nav-inv b{font-family:"Geist Mono",ui-monospace,monospace;font-weight:400;font-size:9.5px;letter-spacing:.1em;line-height:1;background:var(--o);color:var(--ink);padding:4px 6px 3px;border-radius:99px}
.sheet a.nav-inv{display:flex;align-items:center;gap:14px}
.sheet a.nav-inv b{font-size:11px;padding:6px 10px 5px}

/* straight-talk paragraph above contact (9:46 PM) */
.straight{padding:clamp(64px,8vw,120px) 0 clamp(64px,8vw,120px)}
@media (max-width:600px){.st-h{font-size:24px!important;text-wrap:balance}}
.st-h{font-family:var(--hl);font-weight:400;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;font-size:clamp(24px,2.6vw,40px);margin:0 0 18px;color:#fff}
.st-h .acc{text-transform:none}
.st-p{font-size:clamp(18px,1.5vw,22px);line-height:1.5;max-width:46ch;color:rgba(255,255,255,.72);margin:0}

/* step1 balance: col 1 wraps to same line count as others (Oct 27) */
@media (min-width:900px){.step:first-child p{max-width:min(330px,86%)}}

/* straight section as framed orange card (Oct 27) */
.straight{padding:clamp(48px,6vw,96px) 0}
.st-card{position:relative;background:#F05223;color:#000;border-radius:22px;padding:clamp(40px,5.5vw,84px) clamp(28px,5.5vw,88px)}
.st-card .st-h{color:#000}
.st-card .st-h .acc{color:#000}
.st-card .st-p{color:rgba(0,0,0,.82);max-width:52ch}
@media (max-width:600px){.st-card{border-radius:16px;padding:40px 26px}}

/* hero word-reveal animation (Oct 27) */
.hero h1 .hw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .12em;margin:0 -.08em -.12em}
.hero h1 .hwi{display:inline-block;transform:translateY(110%) rotate(4deg);transform-origin:0 100%;opacity:0;transition:transform 1s cubic-bezier(.16,1,.3,1) var(--d),opacity .6s ease var(--d)}
.hero h1 .hw-a{overflow:visible}
.hero h1 .hw-a .hwi{transform:translateX(1.2em);filter:blur(6px);transition:transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--d) + .1s),opacity .8s ease calc(var(--d) + .1s),filter .9s ease calc(var(--d) + .1s)}
.hero h1.hw-go .hwi{transform:none;opacity:1;filter:none}
@media (prefers-reduced-motion:reduce){.hero h1 .hwi{transform:none!important;opacity:1!important;filter:none!important;transition:none!important}}

/* hero repel springs (Oct 27) */
.hero h1 .hwi{padding:.05em .06em .1em;margin:-.05em -.06em -.1em}
.hero h1 .hw-a .hwi{padding:.15em .3em .2em;margin:-.15em -.3em -.2em}
.hero h1 .hw{will-change:transform}

/* show more/less: simple orange, no ring, no hover effect (Lazer, Oct 27 1:46 PM) */
.board-more .pill{border:0;outline:0;box-shadow:none;-webkit-appearance:none;appearance:none;background:var(--o);color:var(--ink);cursor:pointer;transition:none}
.board-more .pill:hover,.board-more .pill:focus,.board-more .pill:active{background:var(--o);color:var(--ink);transform:none}
.board-more .pill:hover i{transform:none}
.board-more .pill:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* quiet closing line in the footer (replaced the orange "agency without the attitude" card, Oct 28) */
.fnote{max-width:560px;margin:0 0 28px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.5);letter-spacing:0}
@media (max-width:600px){.fnote{font-size:13px}}

/* audit (Oct 28): bigger tap areas on phones without changing the look */
.like::after{content:"";position:absolute;inset:-9px -6px}
@media (hover:none),(max-width:760px){.fcols a{display:inline-flex;align-items:center;min-height:40px}.fcols>div{gap:0}.legal a{display:inline-flex;align-items:center;min-height:40px}}

/* hero rotating headline (Oct 29): the h1 alternates with a second line set, same word-reveal entrance */
.hero h1 .hstack{display:grid;justify-items:center;width:100%}
.hero h1 .hset{grid-area:1/1;display:block;width:100%}
.hero h1 .hset.off{visibility:hidden}
.hero h1.hw-go .hset.off .hwi{transform:translateY(110%) rotate(4deg);opacity:0;filter:none;transition:none}
.hero h1.hw-go .hset.off .hw-a .hwi{transform:translateX(1.2em);filter:blur(6px)}
.hero h1.hw-go .hset.out .hwi{transform:translateY(-110%) rotate(-3deg);opacity:0;transition:transform .7s cubic-bezier(.7,0,.84,0) var(--o,0s),opacity .5s ease calc(var(--o,0s) + .15s)}
.hero h1.hw-go .hset.out .hw-a .hwi{transform:translateX(-.6em);filter:blur(6px);transition:transform .7s cubic-bezier(.7,0,.84,0) var(--o,0s),opacity .5s ease var(--o,0s),filter .5s ease var(--o,0s)}
@media (prefers-reduced-motion:reduce){.hero h1 .hset.alt{display:none}}

/* tablet nav: keep "Let's talk" on one line */
.nav-cta{white-space:nowrap;flex:none}
@media (min-width:761px) and (max-width:1100px){.nav-in{gap:24px}.links{gap:22px}}

/* ===== centered hero at every width (Oct 29, Lazer: "centered aligned on everything ... bring in the text from both
   sides ... the same amount of empty space"). Headline, paragraph and buttons are one centered block, sitting in the
   middle of the space under the header with equal room above and below. Replaces the Oct 29 morning tablet block. ===== */
.hero{height:auto;min-height:100vh;min-height:100svh}
.hero .wrap{height:auto;justify-content:center;align-items:center;text-align:center;gap:clamp(30px,4.4vh,52px);padding-top:clamp(40px,7vh,88px);padding-bottom:clamp(40px,7vh,88px)}
.hero h1.display{flex:none;display:block;width:100%;text-align:center}
.hero h1 .hstack{justify-items:center;align-items:center}
.hero .hero-foot{display:flex;flex-direction:column;align-items:center;gap:28px;width:100%}
.hero .lede{max-width:46ch;margin:0 auto;text-align:center;text-wrap:balance}
.hero .ctas{justify-content:center;width:auto;flex-wrap:wrap}
/* tablet line breaks: three compact lines ("Branding and / Marketing for / Big Ambitions.") instead of a wide strip */
br.tb{display:none}
/* tablets, portrait and landscape: the text is brought in from both sides into a compact, bigger block, and the
   empty space around it is balanced (no tall empty screen) */
@media (min-width:600px) and (max-width:1180px) and (min-height:521px){
  .hero h1 .ln{display:inline}
  .hero h1 br.tb{display:inline}
  .hero h1.display{max-width:none;margin:0 auto;line-height:1.03;letter-spacing:-.02em;text-wrap:nowrap;white-space:nowrap}
  .hero .lede{font-size:18px;max-width:44ch}
  .hero .ctas{gap:12px;flex-wrap:nowrap}
}
@media (min-width:600px) and (max-width:1180px) and (min-height:521px) and (orientation:landscape){
  .hero h1.display{font-size:min(9vw,12.6vh,118px)}
}
@media (min-width:600px) and (max-width:1180px) and (min-height:521px) and (orientation:portrait){
  .hero{min-height:0}
  .hero .wrap{padding-top:clamp(80px,13.5vw,170px);padding-bottom:clamp(80px,13.5vw,170px);gap:clamp(36px,5vw,56px)}
  .hero h1.display{font-size:min(10.2vw,116px)}
}
@media (max-width:599px){
  .hero .ctas{gap:10px}
}

/* ===== REAL-SITE ALIGNMENT (Oct 29 10:45, Lazer: "just the big text should be centered and the body copy beneath";
   content in compact grids, small info aligned like real websites). Section heading + eyebrow + intro centered;
   cards/grids left-aligned inside; footer in columns. Backups *.bk_all / *.bk_all2. ===== */
html body .eyebrow{justify-content:center;text-align:center}
html body .sec-head{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(16px,1.8vw,24px);margin-bottom:clamp(36px,4.5vw,64px)}
html body .sec-head h2.display{margin-left:auto;margin-right:auto;text-align:center;max-width:20ch}
html body .work .sec-head h2.display{max-width:none}
html body .sec-head p{margin-left:auto;margin-right:auto;text-align:center}
html body .work-desc{max-width:52ch;text-wrap:balance}
html body .process,html body .services{padding:clamp(80px,9vw,140px) 0}
/* about: heading + body copy centered, compact */
html body .about .wrap{text-align:center}
html body .about .cols{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(22px,2.4vw,32px);margin-top:clamp(36px,4.5vw,64px)}
html body .about .big{max-width:62ch;margin:0 auto;text-wrap:pretty}
html body .about .cols>div{display:flex;flex-direction:column;align-items:center;max-width:56ch;margin:0 auto}
html body .about .cols>div p{margin-bottom:24px;text-wrap:balance}
/* process: tidy cards, 4 / 2 / 1 per row, text left */
html body .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
html body .step{text-align:left;border:1px solid var(--line);border-radius:18px;padding:24px 24px 26px;background:linear-gradient(180deg,#191919,#121212)}
html body .step h3{margin:22px 0 12px!important;min-height:2.1em!important}
html body .step p,html body .step:first-child p{max-width:none;font-size:15px;line-height:1.5}
@media (max-width:1100px){html body .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}}
@media (max-width:600px){html body .steps{grid-template-columns:1fr;gap:12px}
  html body .step{padding:20px 20px 22px;border-radius:16px}
  html body .step h3{margin:12px 0 8px!important;min-height:0!important}}
/* services: cards, 5 / 2 / 1 per row, text left; an odd last card spans the row on 2-col */
@media (max-width:1100px){html body .services .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .services .svc li:last-child:nth-child(odd){grid-column:1/-1}
  html body .services .svc .st{margin-top:16px;min-height:0}}
@media (max-width:600px){html body .services .svc{grid-template-columns:1fr}}
/* contact: heading centered, action row like before */
html body .contact .eyebrow{justify-content:center}
html body .contact h2.display{text-align:center;margin-left:auto;margin-right:auto}
/* footer: real-site columns */
html body .foot{padding:clamp(56px,6vw,88px) 0 24px}
html body .foot .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);row-gap:0;
  grid-template-areas:"brand c n s" "note c n s" "legal legal legal legal";text-align:left;align-items:start}
html body .fcols{display:contents}
html body .fcols>div{grid-column:auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
html body .fcols>div:nth-child(1){grid-area:c}
html body .fcols>div:nth-child(2){grid-area:n}
html body .fcols>div.fstart{grid-area:s}
html body .fcols p{margin:0 0 10px}
html body .fcols a{min-height:34px;display:inline-flex;align-items:center}
html body .fbottom{grid-area:brand;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;margin:0}
html body .foot .flogo{width:clamp(110px,10vw,150px)!important}
html body .ftag{text-align:left;font-size:clamp(20px,1.8vw,28px)}
html body .fnote{grid-area:note;margin:18px 0 0;max-width:44ch;text-align:left}
html body .legal{grid-area:legal;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 16px;margin-top:clamp(40px,4.5vw,64px)}
html body .legal a{min-height:36px;display:inline-flex;align-items:center}
@media (max-width:1100px){html body .foot .wrap{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"brand note note" "c n s" "legal legal legal";row-gap:36px}
  html body .fnote{margin:0;align-self:end}}
@media (max-width:760px){html body .foot .wrap{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"c n" "s s" "brand brand" "note note" "legal legal";row-gap:28px}
  html body .fnote{max-width:none}
  html body .legal{margin-top:4px}}
/* privacy: title block centered, policy text left like a real document */
html body .pp .wrap>p.mono,html body .pp h1{text-align:center}
html body .pp .lead{text-align:center;margin-left:auto;margin-right:auto;max-width:44ch;text-wrap:balance}

/* closing contact section on orange (Lazer, Oct 29 10:44) */
html body .contact.t-orange{border-top:0;padding:clamp(80px,9vw,140px) 0}
html body .t-orange h2.display{color:var(--ink)}
html body .t-orange .acc{color:var(--ink)}
html body .t-orange .eyebrow{color:rgba(14,14,14,.7)}
html body .contact.t-orange .ct-row{flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,2.4vw,30px);border-top:0;padding-top:0;margin-top:clamp(36px,4vw,56px)}
html body .contact.t-orange .pill-o{background:var(--ink);color:#fff}
html body .contact.t-orange .pill-o:hover{background:#fff;color:var(--ink)}
html body .contact.t-orange .pill-o i{background:var(--o)}
html body .contact.t-orange .ct-links{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px clamp(20px,3vw,44px)}
html body .contact.t-orange .ct-links a{color:var(--ink);font-size:clamp(20px,2vw,28px)}
html body .contact.t-orange .ct-links a:hover{color:#fff}
html body .contact.t-orange+*,html body .foot{border-top:0}

/* Oct 29 11:50 Lazer: note = full-width lower row under the columns; no script words in orange section */
html body .foot .wrap{grid-template-areas:"brand c n s" "note note note note" "legal legal legal legal"}
html body .fnote{max-width:none;width:100%;margin:clamp(36px,4vw,56px) 0 0;padding-top:clamp(24px,2.6vw,36px);border-top:1px solid rgba(255,255,255,.12);font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:rgba(255,255,255,.62)}
html body .legal{margin-top:clamp(24px,2.6vw,36px)}
@media (max-width:1100px){html body .foot .wrap{grid-template-areas:"brand brand brand" "c n s" "note note note" "legal legal legal"}html body .fnote{margin:0}}
@media (max-width:760px){html body .foot .wrap{grid-template-areas:"c n" "s s" "brand brand" "note note" "legal legal"}}
html body .t-orange h2.display .acc{font-family:inherit!important;font-style:normal!important;text-transform:inherit;letter-spacing:inherit;font-weight:inherit}

/* ===== HOME WORK TEASER (Oct 29, Lazer: portfolio moves to its own page /work; home shows a "See our work" teaser) */
html body .work.wtz{padding:var(--sec) 0 calc(var(--sec) * .8);overflow:hidden}
html body .wtz .sec-head{margin-bottom:clamp(36px,4.5vw,60px)}
html body .wtz .tz-btn{margin-top:clamp(6px,1vw,14px)}
.tz-strip{display:block;overflow:hidden;position:relative;cursor:pointer;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tz-track{display:flex;width:max-content}
.tz-set{display:flex;gap:14px;padding-right:14px;flex:0 0 auto}
.tz{display:block;flex:0 0 auto;height:clamp(150px,17vw,250px);border-radius:4px;overflow:hidden;background:var(--ink2)}
.tz img{height:100%;width:auto;max-width:none;display:block;transition:transform .7s var(--ease),filter .5s}
.tz-strip:hover .tz img{filter:brightness(.92)}
.tz-track.run{animation:tzmove var(--tzd,60s) linear infinite}
.tz-strip:hover .tz-track.run,.tz-strip:focus-visible .tz-track.run{animation-play-state:paused}
@keyframes tzmove{to{transform:translate3d(-50%,0,0)}}
@media (max-width:760px){.tz{height:120px}.tz-set{gap:10px;padding-right:10px}}
@media (prefers-reduced-motion:reduce){.tz-track.run{animation:none}}

/* Oct 29 4:05 PM: "Let that ink in." slogan merged under the See our work button, smaller */
.work .tz-slogan{font-family:var(--hl);font-weight:400;text-transform:uppercase;letter-spacing:-.02em;line-height:1;color:#fff;font-size:clamp(32px,5.2vw,76px);margin:clamp(28px,3.5vw,48px) 0 0;text-align:center;text-wrap:balance}
.work .tz-slogan .acc{text-transform:none}

/* Oct 29 4:32 PM Lazer: marquee band straight, not tilted */
.band{transform:none!important;margin:0!important}
.band-wrap{padding:0!important}

/* ftag white+smaller Oct30 */
html body .ftag{font-size:clamp(15px,1.2vw,19px);color:#fff}
html body .ftag .acc,html body .ftag em{color:#fff!important;font-size:1.12em}

/* invite banner */
.invbn{padding:clamp(40px,6vw,72px) 0}
.invbox{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:880px;margin:0 auto;padding:22px 26px;border:1px solid var(--line);border-radius:18px;color:var(--fg);text-decoration:none;transition:border-color .3s var(--ease),background .3s var(--ease)}
.invbox:hover{border-color:var(--o);background:rgba(240,82,35,.05)}
.ib-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.ib-k{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:11px}
.ib-k i{width:6px;height:6px;border-radius:50%;background:var(--o)}
.ib-h{font-size:clamp(20px,2.2vw,28px);font-weight:600;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
.ib-h .acc{font-size:1.15em}
.ib-p{color:var(--muted);font-size:14px;line-height:1.45}
.ib-go{flex:none}
.invbox:hover .ib-go{background:var(--fg);color:var(--bg)}
@media (max-width:640px){.invbox{flex-direction:column;align-items:flex-start;padding:20px}.ib-go{height:42px}}
.invbox,.invbox .ib-h{color:#fff}

/* tighter space around "Let that ink in." (Nov 2) */
.work.wtz{padding-bottom:clamp(40px,5vw,72px)}
.inkin{padding:clamp(32px,4vw,64px) 0 clamp(16px,2vw,32px)}
.inkin + .process{padding-top:clamp(48px,5.5vw,88px)}
section.work:has(+ .inkin){padding-bottom:clamp(32px,4vw,64px)}

/* invite banner: roomier (Nov 2) */
.invbox{padding:clamp(28px,3.4vw,44px) clamp(26px,3.6vw,52px);gap:clamp(24px,4vw,56px)}
.ib-txt{gap:12px}
.ib-p{max-width:46ch}
@media (max-width:640px){.invbox{padding:28px 24px;gap:22px}}

/* header over the orange contact section: orange parts turn black so nothing disappears (Nov 2) */
html body .nav[data-theme=orange] .logo path[style*="F05223"]{fill:#0e0e0e!important}
html body .nav[data-theme=orange] .links a.nav-inv{color:var(--ink)!important}
html body .nav[data-theme=orange] .nav-inv b{background:var(--ink);color:var(--o)}

/* Nov 3: even (justified) body copy in process steps */
.process .step p{text-align:justify;text-justify:inter-word;hyphens:none;-webkit-hyphens:none}

/* Nov 3: full-width footer wordmark "INK ABOUT IT." (serif, caps, 15% gray) */
@font-face{font-family:"Bellefair";src:url(assets/inv/Bellefair-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
.fwide{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(8px,1.5vw,20px)}
.fwide svg{display:block;width:100%;height:auto;overflow:visible}
.fwide text{font-family:"Geist","Helvetica Neue",Arial,sans-serif;font-size:160.8px;font-weight:300;fill:rgba(255,255,255,.15)}
html body .foot .wrap.fwide,html body .wrap.fwide{display:block!important}

/* invite banner: full width, 2-row header | body copy (same height, centered) | button (Nov 3) */
.invbox{max-width:none;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,64px)}
.ib-txt{display:contents}
.ib-h{font-size:clamp(22px,2.4vw,32px);line-height:1.1;white-space:nowrap}
.ib-p{max-width:48ch;margin:0;font-size:clamp(16px,1.46vw,21px);line-height:1.66;align-self:center}
@media (max-width:820px){.invbox{grid-template-columns:1fr;align-items:start;gap:18px}.ib-h{white-space:normal}.ib-p{max-width:none}}

/* Nov 3: footer wordmark in the site script font (PP Editorial Old Italic), same colour/opacity */
.fwide text{font-family:"PP Editorial Old",Georgia,serif;font-style:italic;font-weight:400;font-size:149.8px}

/* Nov 3 4:30: process = editorial rows (no boxes): big orange number | title | body, hairline dividers */
html body .process .steps{display:block!important;border-top:1px solid var(--line);margin-top:clamp(8px,1.5vw,20px)}
html body .process .step{display:grid!important;grid-template-columns:clamp(90px,11vw,170px) minmax(0,1fr) minmax(0,1.15fr);align-items:baseline;gap:clamp(16px,3vw,56px);border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:none!important;padding:clamp(26px,3.2vw,46px) 0!important;transition:padding-left .35s var(--ease,ease)}
html body .process .step .mono{font-family:"Geist","Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:clamp(40px,5.2vw,84px);line-height:.9;letter-spacing:-.03em;color:var(--o)}
html body .process .step h3{margin:0!important;min-height:0!important;font-size:clamp(22px,2.3vw,36px)!important}
html body .process .step p{margin:0;max-width:52ch!important;font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:var(--muted)}
@media (hover:hover){html body .process .step:hover{padding-left:14px!important}html body .process .step:hover h3{color:var(--o)}}
@media (max-width:820px){html body .process .step{grid-template-columns:auto minmax(0,1fr);row-gap:10px}html body .process .step p{grid-column:2}}
@media (max-width:480px){html body .process .step{grid-template-columns:1fr;row-gap:12px;padding:26px 0!important}html body .process .step p{grid-column:1}html body .process .step .mono{font-size:44px}}

/* Nov 3 4:47: invite banner heading orange */
html body .invbox .ib-h{color:var(--o,#F05223)!important}

/* Nov 3 4:52: footer title case */
.fwide text{font-size:188.8px;text-transform:none}

/* Nov 3 5:06: invite box orange on hover */
html body .invbox{transition:background-color .3s ease,border-color .3s ease}
html body .invbox:hover,html body .invbox:focus-visible{background:#F05223!important;border-color:#F05223!important}
html body .invbox:hover .ib-h,html body .invbox:focus-visible .ib-h{color:#0d0d0d!important}
html body .invbox:hover .ib-p,html body .invbox:focus-visible .ib-p{color:#0d0d0d!important}
html body .invbox:hover .ib-go,html body .invbox:focus-visible .ib-go{background:#0d0d0d!important;color:#fff!important;border-color:#0d0d0d!important}
html body .invbox:hover .ib-go i,html body .invbox:focus-visible .ib-go i{background:#F05223!important}

/* no-slab Nov 9: back to the simple font */
:root{--head:"Geist","Helvetica Neue",Arial,sans-serif}

/* header logo intro animation (Nov 11) */
.brand .logo.inkanim{transform-origin:50% 60%;animation:lgScale 1.6s cubic-bezier(.16,1,.3,1) both}
.brand .logo.inkanim .la,.brand .logo.inkanim .lm{transform:translateY(64px);animation:lgRise .95s cubic-bezier(.16,1,.3,1) both}
.brand .logo.inkanim .lm{transform:translateY(32px);animation-duration:.8s}
.brand .logo.inkanim .la1{animation-delay:.15s}.brand .logo.inkanim .la2{animation-delay:.25s}.brand .logo.inkanim .la3{animation-delay:.35s}
.brand .logo.inkanim .lm1{animation-delay:.75s}.brand .logo.inkanim .lm2{animation-delay:.815s}.brand .logo.inkanim .lm3{animation-delay:.88s}.brand .logo.inkanim .lm4{animation-delay:.945s}.brand .logo.inkanim .lm5{animation-delay:1.01s}
.brand .logo.inkanim .ldot{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0);animation:lgDot .5s cubic-bezier(.34,1.8,.5,1) 1.45s both}
@keyframes lgRise{to{transform:translateY(0)}}
@keyframes lgScale{from{transform:scale(1.045)}to{transform:scale(1)}}
@keyframes lgDot{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.brand .logo.inkanim,.brand .logo.inkanim *{animation:none!important;transform:none!important}}