@property --wd{syntax:"<number>";inherits:true;initial-value:100}

/* Self-hosted fonts (Latin subsets from Google Fonts, axes trimmed to the ranges used; Reem Kufi cut to the Arabic name). */
@font-face{font-family:"Anybody";src:url(/assets/fonts/anybody-latin-v13.woff2) format("woff2");font-weight:400 900;font-stretch:50% 150%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";src:url(/assets/fonts/onest-latin-v11.woff2) format("woff2");font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";src:url(/assets/fonts/martianmono-latin-v6.woff2) format("woff2");font-weight:400 600;font-stretch:87.5% 100%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Reem Kufi";src:url(/assets/fonts/reemkufi-name-v28.woff2) format("woff2");font-weight:500 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}

/* Layout: a living molten field sits fixed behind the page; every surface is liquid glass floating on it; the Moroccan horseshoe arch frames the people. */
:root{
  color-scheme:dark;
  --ink:#0d0807;          /* ground: burnt near-black, red-biased */
  --char:#1c110f;         /* raised dark surface / no-blur fallback */
  --red:#e8281e;          /* brand red */
  --red-hi:#ff4a36;
  --red-lo:#c21a12;
  --flame:#ff7a30;        /* hottest highlight */
  --saffron:#f5c518;      /* stamps & notes */
  --cream:#f7efe6;        /* primary text */
  --muted:#c9b9ae;        /* secondary text, warm grey */
  --paper:#faf5ee;        /* receipt paper */
  --paper-ink:#1a1210;
  --paper-muted:#5e5147;
  --arch-red:#a8161b;     /* matches the studio backdrop in the hero video */
  --line:rgba(247,239,230,.14);
  --tint:rgba(34,17,14,.46);
  --hi:rgba(255,255,255,.55);

  --display:"Anybody","Arial Narrow",Impact,system-ui,sans-serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --arabic:"Reem Kufi","Noto Kufi Arabic","Geeza Pro","Arabic Typesetting",sans-serif;

  --r-xl:34px;--r-lg:24px;--r-md:16px;
  --gutter:clamp(16px,4vw,56px);
  --max:1440px;
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--cream);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
picture{display:contents}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--red);color:var(--cream)}
:focus-visible{outline:2px solid var(--saffron);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:12px;background:var(--cream);color:var(--ink);font-weight:600}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
.mono{font-family:var(--mono);font-stretch:87.5%}
.nc{text-transform:none}

/* ---------- molten field ---------- */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.field-fallback{position:fixed;inset:-10%;z-index:0;pointer-events:none;display:none;
  background:
    radial-gradient(38% 34% at 22% 24%,rgba(232,40,30,.5),transparent 70%),
    radial-gradient(30% 28% at 78% 18%,rgba(255,122,48,.32),transparent 70%),
    radial-gradient(42% 38% at 70% 82%,rgba(150,20,14,.5),transparent 70%),
    var(--ink);
  animation:drift 26s ease-in-out infinite alternate}
.no-gl #field{display:none}
.no-gl .field-fallback{display:block}
@keyframes drift{to{transform:translate3d(-4%,3%,0) scale(1.08)}}
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

.page{position:relative;z-index:1;overflow-x:clip}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- liquid glass ---------- */
.glass{position:relative;isolation:isolate;border-radius:var(--r-lg);
  background:linear-gradient(155deg,rgba(255,244,236,.14),rgba(255,244,236,.035) 34%,rgba(255,244,236,.02) 66%,rgba(255,244,236,.08)),var(--tint);
  -webkit-backdrop-filter:blur(20px) saturate(175%);backdrop-filter:blur(20px) saturate(175%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 1px rgba(0,0,0,.3),0 22px 50px -24px rgba(0,0,0,.8)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.62),rgba(255,255,255,.1) 24%,rgba(255,255,255,0) 46%,rgba(255,255,255,.04) 70%,rgba(255,255,255,.32));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.lit::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--sx,50%) var(--sy,50%),rgba(255,226,206,.17),transparent 62%)}
.lit:hover::after{opacity:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(34,17,14,.92)}
}
/* Large or repeated surfaces skip the live blur: the field behind them is already soft, so a warmer tint reads
   the same at a fraction of the GPU cost. The blur stays on the nav and the hero, where it is seen moving. */
.card.glass,.lang.glass,.socials .glass,.ticker.glass,.slot.glass,.cv.glass,.now.glass,.plaque.glass,.mailbox.glass,.local.glass,
.eyebrow.pill.glass,.case-facts .glass,.case-cover .glass,.next-card.glass,.case-cta.glass,.lost.glass{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(155deg,rgba(255,244,236,.15),rgba(255,244,236,.04) 34%,rgba(255,244,236,.025) 66%,rgba(255,244,236,.09)),rgba(48,20,16,.58)}
@media (prefers-reduced-transparency:reduce){
  .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--char)}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;
  font:600 15px/1 var(--body);letter-spacing:.01em;white-space:nowrap;
  transition:transform .4s var(--spring),box-shadow .4s ease}
.btn svg{width:18px;height:18px}
.btn-red{background:linear-gradient(180deg,var(--red-hi),var(--red) 55%,var(--red-lo));color:var(--cream);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 5px rgba(0,0,0,.25),0 14px 32px -12px rgba(232,40,30,.9)}
.btn-red:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 5px rgba(0,0,0,.25),0 20px 40px -12px rgba(255,90,50,.95)}
.btn.glass{border-radius:999px}
.btn.glass:hover{transform:translateY(-3px)}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:50;top:calc(env(safe-area-inset-top,0px) + 14px);left:0;right:0;margin-inline:auto;
  width:max-content;max-width:calc(100% - 24px);display:flex;align-items:center;gap:6px;padding:6px}
.nav-glass{position:absolute;inset:0;z-index:-1;border-radius:999px}
.mark{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;
  background:linear-gradient(180deg,var(--red-hi),var(--red-lo));color:var(--cream);
  font:900 15px/1 var(--display);font-stretch:125%;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px -6px rgba(232,40,30,.9);transition:transform .45s var(--spring)}
.mark:hover{transform:rotate(-12deg) scale(1.06)}
.nav-links{position:relative;display:flex;align-items:center}
.nav-links a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font:500 14px/1 var(--body);color:var(--muted);transition:color .25s}
.nav-links .lang-link{font:600 11px/1 var(--mono);letter-spacing:.12em;padding:0 14px}
.nav-links a:hover,.nav-links a.is-active{color:var(--cream)}
.nav-links .menu-cta{display:none}
.nav-bubble{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;opacity:0;pointer-events:none;
  background:rgba(255,244,236,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .55s var(--ease),width .55s var(--ease),opacity .3s}
.nav-clock{display:inline-flex;align-items:center;gap:8px;padding:0 12px;font-size:11px;letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.pulse{width:8px;height:8px;border-radius:50%;background:#35d07f;box-shadow:0 0 0 0 rgba(53,208,127,.6);animation:pulse 2.2s ease-out infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(53,208,127,0)}100%{box-shadow:0 0 0 0 rgba(53,208,127,0)}}
.nav .btn{min-height:44px;padding:0 18px;font-size:14px}
.menu-btn{display:none;min-height:44px;padding:0 16px;border-radius:999px;font:600 14px/1 var(--body);background:rgba(255,244,236,.08);box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:860px){
  .nav{left:12px;right:12px;width:auto;justify-content:space-between}
  .nav-clock{margin-right:auto}
  .menu-btn{display:inline-flex;align-items:center}
  .nav-links{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:8px;border-radius:24px;
    background:linear-gradient(155deg,rgba(255,244,236,.14),rgba(255,244,236,.04)),rgba(34,17,14,.72);
    -webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 24px 50px -20px rgba(0,0,0,.8);
    visibility:hidden;opacity:0;translate:0 -8px;transition:opacity .25s,translate .35s var(--ease),visibility 0s .35s}
  .nav-links.open{visibility:visible;opacity:1;translate:0 0;transition:opacity .25s,translate .35s var(--ease)}
  .nav-links a{min-height:50px;padding:0 18px;font-size:17px;color:var(--cream)}
  .nav-links .lang-link{font-size:13px}
  .nav-links .menu-cta{display:inline-flex;color:var(--flame)}
  .nav-bubble{display:none}
}
@media (max-width:400px){.nav-clock{display:none}.nav{justify-content:flex-start}.nav .btn{margin-left:auto}}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:calc(env(safe-area-inset-top,0px) + clamp(96px,13vh,132px));padding-bottom:clamp(40px,6vw,84px)}
.hero-meta{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;margin-bottom:clamp(22px,3.4vw,40px)}
.status{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 14px;border-radius:999px;font:500 14px/1.2 var(--body)}
.role{font-size:11px;line-height:1.7;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(28px,4vw,72px);align-items:end}
.hero-copy{display:grid;gap:clamp(22px,3vw,36px);min-width:0}
/* The name is sized in CSS so its height is fixed before fonts or scripts load (no layout shift): the widest line,
   OTHMANE at normal width, measures 5.32em in Anybody 860, so 18.7cqi fills the column. The script then only
   stretches the shorter lines along the width axis, which never changes the height. */
.name-box{container-type:inline-size;min-width:0}
.name{position:relative;z-index:2;font-family:var(--display);font-weight:860;font-size:clamp(48px,10vw,150px);
  font-size:max(40px,min(18.7cqi,24vh,220px));font-size:max(40px,min(18.7cqi,24svh,220px));
  line-height:.84;letter-spacing:-.005em;text-transform:uppercase;user-select:none}
.name .line{display:block;white-space:nowrap;--wd:50;font-stretch:calc(var(--wd) * 1%)}
.name .outline,.outline{color:transparent;-webkit-text-stroke:max(1.5px,.016em) var(--cream)}
.name.masked{-webkit-mask:radial-gradient(circle at var(--mx,-999px) var(--my,-999px),transparent calc(var(--lr,100px) - 1px),#000 var(--lr,100px));
  mask:radial-gradient(circle at var(--mx,-999px) var(--my,-999px),transparent calc(var(--lr,100px) - 1px),#000 var(--lr,100px))}
.tagline{max-width:30ch;font:500 clamp(19px,1.9vw,26px)/1.3 var(--body);text-wrap:balance}
.tagline b{font-weight:600;color:var(--saffron)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* the glass lens that drifts over the name and refracts it */
.lens{position:absolute;left:0;top:0;z-index:2;width:calc(var(--lr,100px) * 2);height:calc(var(--lr,100px) * 2);border-radius:50%;overflow:hidden;
  pointer-events:none;opacity:0;transition:opacity .8s ease;will-change:transform;
  box-shadow:0 26px 50px -18px rgba(0,0,0,.65)}
.lens.on{opacity:1}
.lens::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 31% 23%,rgba(255,255,255,.55),rgba(255,255,255,0) 19%),radial-gradient(circle at 72% 84%,rgba(255,255,255,.16),rgba(255,255,255,0) 24%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 9px 12px 18px -10px rgba(255,255,255,.7),inset -12px -16px 26px -12px rgba(0,0,0,.6)}
.lens-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.name-clone{position:absolute;margin:0;z-index:auto;
  filter:drop-shadow(-2.5px 0 0 rgba(255,46,80,.85)) drop-shadow(2.5px 0 0 rgba(56,196,255,.7))}

/* arch window with the animated character */
.arch-stage{position:relative;z-index:3;width:clamp(250px,27vw,400px);justify-self:end}
.arch{position:relative;aspect-ratio:3/4.1;--bz:clamp(10px,1.1vw,15px)}
.arch::before{content:"";position:absolute;inset:10% -16% -8%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(232,40,30,.6),rgba(232,40,30,0));filter:blur(28px)}
.arch-bezel{position:absolute;inset:0;-webkit-clip-path:url(#archClip);clip-path:url(#archClip);
  background:linear-gradient(160deg,rgba(255,244,236,.3),rgba(255,244,236,.06) 42%,rgba(255,244,236,.16));
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%)}
.arch-window{position:absolute;inset:var(--bz);overflow:hidden;-webkit-clip-path:url(#archClip);clip-path:url(#archClip);
  background:radial-gradient(90% 70% at 50% 42%,#b81b1e,var(--arch-red) 45%,#7d0d10)}
.arch-window video,.arch-window img{position:absolute;left:50%;top:13%;height:88%;width:auto;max-width:none;translate:-50% 0;
  -webkit-mask:linear-gradient(transparent,#000 9%);mask:linear-gradient(transparent,#000 9%)}
.arch-rim{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.arch-rim.inner{inset:auto;left:var(--bz);top:var(--bz);width:calc(100% - 2 * var(--bz));height:calc(100% - 2 * var(--bz))}
.chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  font:600 13px/1 var(--body);letter-spacing:.01em;white-space:nowrap;
  translate:calc(var(--px,0) * var(--d) * 1px) calc(var(--py,0) * var(--d) * 1px);
  animation:pop .8s var(--spring) both,bob 7s ease-in-out infinite}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--dot)}
.c1{left:-22%;top:16%;rotate:-7deg;--d:16;--dot:var(--red);animation-delay:1s,0s}
.c2{right:-11%;top:47%;rotate:6deg;--d:-22;--dot:var(--saffron);animation-delay:1.15s,1.1s}
.c3{left:-16%;bottom:13%;rotate:4deg;--d:11;--dot:var(--flame);animation-delay:1.3s,2.2s}
@keyframes pop{from{scale:.3;opacity:0}}
@keyframes bob{50%{transform:translateY(-9px)}}
.seal{position:absolute;z-index:5;right:-9%;bottom:-5%;width:clamp(92px,8.6vw,122px);aspect-ratio:1;border-radius:50%;
  animation:pop .8s var(--spring) 1.45s both;transition:transform .5s var(--spring)}
.seal:hover{transform:scale(1.08) rotate(-8deg)}
.seal svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite}
.seal text{font:600 8.2px var(--mono);letter-spacing:.06em;fill:var(--cream);text-transform:uppercase}
.seal .core{position:absolute;inset:30%;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--red-hi),var(--red-lo));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.seal .core svg{width:46%;height:46%;fill:var(--cream)}
@keyframes spin{to{rotate:360deg}}
.vid-toggle{position:absolute;z-index:5;left:50%;bottom:calc(var(--bz) + 12px);translate:-50% 0;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(20,10,8,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.vid-toggle svg{width:14px;height:14px;fill:var(--cream)}
.vid-toggle .i-play{display:none}
.vid-toggle[aria-pressed="true"] .i-play{display:block}
.vid-toggle[aria-pressed="true"] .i-pause{display:none}

@media (max-width:760px){
  .hero-meta{justify-content:flex-start}
  .role{text-align:left}
  .hero-grid{grid-template-columns:minmax(0,1fr);row-gap:clamp(22px,6vw,34px)}
  .hero-copy{display:contents}
  /* name, promise and both CTAs first, so they all sit above the fold on a phone; the character follows */
  .name-box{order:1}
  .tagline{order:2}
  .hero-ctas{order:3}
  .arch-stage{order:4;justify-self:center;width:min(72vw,330px);margin-block:14px 6px}
  .c1{left:-12%}.c2{right:-10%}.c3{left:-8%}
  .seal{right:-6%}
}

/* ---------- ticker ---------- */
.ticker{position:relative;z-index:2;width:106%;margin:clamp(8px,2vw,24px) 0 clamp(8px,2vw,24px) -3%;rotate:-1.6deg;border-radius:0;overflow:hidden;padding:18px 0}
.ticker.glass{border-radius:0}
.ticker-track{display:flex;align-items:center;width:max-content;animation:scrollx 38s linear infinite}
.ticker span{padding-inline:22px;font:800 clamp(18px,2vw,26px)/1 var(--display);font-stretch:125%;text-transform:uppercase;white-space:nowrap}
.ticker .st{width:18px;height:18px;fill:var(--red);flex:none}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
.section{padding-block:clamp(80px,11vw,150px);scroll-margin-top:72px}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;margin-bottom:clamp(34px,5vw,64px)}
.eyebrow{display:flex;align-items:center;gap:10px;font:500 11px/1.4 var(--mono);font-stretch:87.5%;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.eyebrow .st{width:14px;height:14px;fill:var(--red);flex:none}
.sec-title{font-family:var(--display);font-weight:880;font-size:clamp(44px,9vw,132px);line-height:.86;letter-spacing:-.01em;text-transform:uppercase;--wd:112}
.sec-title .tl{display:block;white-space:nowrap;font-stretch:calc(var(--wd) * 1%)}
.sec-note{max-width:34ch;color:var(--muted);font-size:15px;line-height:1.55}

/* ---------- work bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.card{grid-column:span 12;display:flex;flex-direction:column;padding:10px;border-radius:var(--r-xl);
  transition:transform .7s var(--ease),box-shadow .5s ease}
.card.tilting{transition:transform .18s linear,box-shadow .5s ease}
.card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 1px rgba(0,0,0,.3),0 40px 90px -40px color-mix(in oklab,var(--c) 75%,transparent)}
.card-media{position:relative;overflow:hidden;border-radius:calc(var(--r-xl) - 10px);aspect-ratio:4/3;background:var(--char)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .card-media img{transform:scale(1.045)}
.flag{position:absolute;top:14px;right:14px;rotate:5deg;padding:8px 12px;border-radius:999px;background:var(--saffron);color:var(--ink);
  font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
.card-body{display:grid;gap:12px;padding:18px 12px 12px}
.card-head{display:flex;align-items:center;gap:12px}
.card h3{font:850 clamp(24px,2.3vw,34px)/1 var(--display);font-stretch:118%;text-transform:uppercase;letter-spacing:-.005em;min-width:0}
.where{margin-left:auto;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.go{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c);color:var(--on-c,var(--ink));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 20px -8px var(--c);transition:transform .5s var(--spring)}
.go svg{width:18px;height:18px}
.card:hover .go{transform:rotate(45deg) scale(1.08)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{padding:7px 10px;border-radius:999px;border:1px solid var(--line);font:500 10.5px/1 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tags li.key{border-color:color-mix(in oklab,var(--c) 60%,transparent);background:color-mix(in oklab,var(--c) 20%,transparent);color:var(--cream)}
.card p{max-width:62ch;color:var(--muted);font-size:14.5px;line-height:1.6}
@media (min-width:700px){
  .card{grid-column:span 6}
  .c-frita,.c-logo,.c-artistry{grid-column:span 12}
  .c-frita .card-media{aspect-ratio:16/10}
  .c-frita .card-media img{object-position:50% 38%}
  .c-logo,.c-artistry{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center}
  .c-logo .card-body,.c-artistry .card-body{padding:24px clamp(16px,2.4vw,36px)}
}
@media (min-width:1080px){
  .c-frita{grid-column:1 / 8;grid-row:1 / 3}
  .c-frita .card-media{aspect-ratio:auto;flex:1;min-height:0}
  .c-paylik,.c-can{grid-column:8 / 13}
  .c-buzz,.c-ep,.c-logo{grid-column:span 4;display:flex}
  .c-logo .card-body{padding:18px 12px 12px}
  .c-artistry{grid-column:1 / -1;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}

/* ---------- services: the menu ---------- */
.menu{container-type:inline-size;border-top:1px solid var(--line)}
.dish{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,60ch);gap:14px 40px;align-items:start;
  padding:clamp(22px,3vw,36px) clamp(8px,1.4vw,20px);border-bottom:1px solid var(--line)}
.dish::before{content:"";position:absolute;inset:6px 0;z-index:-1;border-radius:var(--r-lg);opacity:0;transition:opacity .45s ease;
  background:linear-gradient(155deg,rgba(255,244,236,.12),rgba(255,244,236,.03)),rgba(34,17,14,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.dish:hover::before{opacity:1}
.dish-side{display:grid;justify-items:start;align-content:start;gap:14px}
.dish-copy{display:grid;gap:12px}
.dish .dish-lead{color:var(--cream)}
.dish .dish-refs{font:500 10.5px/1.5 var(--mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dish-refs a{display:inline-flex;align-items:center;min-height:44px;color:var(--cream);text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:2px;text-underline-offset:5px}
.dish-refs a:hover{color:var(--c)}
.dish-name{grid-column:1 / -1;font:880 max(34px,6.9cqi)/.92 var(--display);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;
  --wd:108;font-stretch:calc(var(--wd) * 1%);transition:color .35s}
.dish:hover .dish-name{color:var(--c)}
.dish-note{align-self:start;justify-self:start;padding:9px 14px;border-radius:999px;background:var(--c);color:var(--on-c,var(--ink));
  font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;rotate:-2deg}
.dish p{color:var(--muted);font-size:15.5px;line-height:1.6}
@container (max-width:699px){
  .dish{grid-template-columns:minmax(0,1fr)}
  .dish-name{font-size:10cqi;--wd:88}
}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,7vw,110px);align-items:center}
.portrait{position:relative;width:100%;max-width:430px;justify-self:center}
.portrait .arch-window{background:radial-gradient(90% 70% at 50% 45%,#c30b18,#9a0610 55%,#720409)}
.portrait .arch-window img{top:7%;height:auto;width:100%;left:0;translate:none}
.plaque{position:absolute;z-index:3;left:50%;bottom:-26px;translate:-50% 0;display:grid;justify-items:center;gap:6px;padding:12px 22px;border-radius:18px;white-space:nowrap}
.plaque .ar{font:600 clamp(20px,2vw,26px)/1.2 var(--arabic)}
.plaque .mono{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.about-copy{display:grid;gap:22px;min-width:0}
.about-copy h2{font:880 clamp(40px,5.4vw,84px)/.9 var(--display);font-stretch:96%;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.about-copy p{max-width:60ch;color:var(--muted);font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.7}
.about-copy p b{color:var(--cream);font-weight:600}
.now{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:18px;font-size:15px;max-width:max-content}
.now .pulse{margin-left:2px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:26px;border-top:1px solid var(--line);max-width:620px}
.stats dt{order:2;font:500 10.5px/1.5 var(--mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stats dd{font:880 clamp(36px,4vw,56px)/1 var(--display);font-stretch:120%;color:var(--flame);font-variant-numeric:tabular-nums}
.stats div{display:flex;flex-direction:column;gap:8px}
@media (max-width:900px){.about{grid-template-columns:minmax(0,1fr)}.portrait{max-width:360px}}

/* ---------- résumé: the receipt ---------- */
.resume{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:clamp(44px,6vw,100px);align-items:start}
.printer{position:relative;max-width:460px;width:100%;justify-self:center}
.slot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px;padding-inline:18px;border-radius:18px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.slot::after{content:"";position:absolute;left:18px;right:18px;bottom:9px;height:4px;border-radius:4px;background:rgba(0,0,0,.65);box-shadow:0 1px 0 rgba(255,255,255,.12)}
.slot .led{width:7px;height:7px;border-radius:50%;background:var(--flame);box-shadow:0 0 10px var(--flame)}
.feed{position:relative;margin:-12px 16px 0;padding-bottom:16px;overflow:hidden;view-timeline:--print block}
.receipt{position:relative;background:var(--paper);color:var(--paper-ink);padding:40px clamp(18px,4vw,30px) 30px;
  font:400 12.5px/1.6 var(--mono);font-stretch:87.5%;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;transform:scaleY(-1);
  background:linear-gradient(45deg,var(--paper) 6px,transparent 0),linear-gradient(-45deg,var(--paper) 6px,transparent 0);background-size:16px 12px;background-repeat:repeat-x}
.receipt h3{font:600 15px/1.3 var(--mono);font-stretch:87.5%;letter-spacing:.14em;text-align:center}
.receipt .sub{text-align:center;font-size:10.5px;letter-spacing:.06em;margin-top:4px}
.receipt hr{border:0;border-top:2px dashed rgba(26,18,16,.3);margin:16px 0}
.r-label{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-align:center;margin-bottom:12px}
.r-row{display:flex;align-items:baseline;gap:8px}
.r-row b{font-weight:600}
.r-row .dots{flex:1;min-width:12px;border-bottom:2px dotted rgba(26,18,16,.35);translate:0 -4px}
.r-row .yr{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.r-sub{font-size:11px;color:var(--paper-muted);margin:2px 0 12px}
.r-total{display:flex;justify-content:space-between;gap:12px;font-weight:600;font-size:14px}
.barcode{height:36px;width:74%;margin:18px auto 8px;background:repeating-linear-gradient(90deg,var(--paper-ink) 0 2px,transparent 2px 5px,var(--paper-ink) 5px 8px,transparent 8px 11px,var(--paper-ink) 11px 12px,transparent 12px 14px)}
.thanks{text-align:center;font-size:10.5px;letter-spacing:.16em}
.stamp{position:absolute;top:14px;right:12px;rotate:9deg;padding:8px 12px;border-radius:999px;border:2px solid var(--red);color:var(--red);
  font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.side{display:grid;gap:38px;min-width:0}
.label{font:500 11px/1 var(--mono);font-stretch:87.5%;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.ingredients{display:flex;flex-wrap:wrap;gap:8px}
.ingredients li{padding:11px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,244,236,.04);font:600 13.5px/1 var(--body)}
.ingredients li.hot{background:linear-gradient(180deg,var(--red-hi),var(--red-lo));border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.langs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lang{display:grid;gap:10px;padding:18px;border-radius:20px}
.lang b{font:850 20px/1 var(--display);font-stretch:112%;text-transform:uppercase}
.lang small{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.meter{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.meter i{height:5px;border-radius:3px;background:rgba(255,244,236,.14)}
.meter i.on{background:linear-gradient(90deg,var(--red),var(--flame))}
.cv{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:24px;max-width:520px;transition:transform .45s var(--spring)}
.cv:hover{transform:translateY(-4px)}
.cv-ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(180deg,var(--red-hi),var(--red-lo));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.cv-ico svg{width:22px;height:22px;stroke:var(--cream)}
.cv b{display:block;font:850 clamp(18px,1.8vw,22px)/1.1 var(--display);font-stretch:112%;text-transform:uppercase}
.cv small{font:500 10.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:960px){.resume{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.langs{grid-template-columns:minmax(0,1fr)}.lang{grid-template-columns:auto 1fr;align-items:center;column-gap:16px}.lang .meter{grid-column:1 / -1}}

/* ---------- contact ---------- */
.contact{display:grid;justify-items:center;gap:30px;text-align:center;padding-block:clamp(100px,14vw,200px)}
.contact .eyebrow{margin:0}
.cook{font:900 clamp(64px,14.5vw,200px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em;--wd:86}
/* "À vos fourneaux." has a ten-letter word on its own line: a smaller step keeps it inside a phone screen */
.cook:lang(fr){font-size:clamp(40px,12.6vw,180px)}
.cook .w{display:inline-block;white-space:nowrap}
.cook .ch{display:inline-block;font-stretch:calc(var(--wd) * 1%);transition:--wd .6s var(--ease)}
.mailbox{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px;border-radius:32px;max-width:100%}
.mail-text{padding:0 14px 0 16px;font:500 clamp(16px,2vw,22px)/1.3 var(--body);user-select:all;overflow-wrap:anywhere}
.mailbox .btn{min-height:46px;padding:0 18px;font-size:14px}
.copy{background:rgba(255,244,236,.09);box-shadow:inset 0 0 0 1px var(--line)}
.copy:hover{transform:translateY(-2px)}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.socials a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font:600 14px/1 var(--body);transition:transform .4s var(--spring)}
.socials a:hover{transform:translateY(-3px) rotate(-1.5deg)}
.socials svg{width:14px;height:14px}
.local{font-size:13px;color:var(--muted)}
.pill{padding:10px 16px;border-radius:999px}
.contact .eyebrow.pill{color:var(--cream)}
.local time{color:var(--cream);font-variant-numeric:tabular-nums}

.foot{position:relative;z-index:1;border-top:1px solid var(--line);padding-block:26px calc(26px + env(safe-area-inset-bottom,0px))}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;font-size:12.5px;color:var(--muted)}
.foot b{color:var(--cream);font-weight:600}
.foot .ar{font:600 16px/1 var(--arabic);color:var(--cream)}
.foot a{display:inline-flex;align-items:center;min-height:44px}
.foot a:hover{color:var(--cream)}
.foot-nav{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.foot-nav b{font:500 10.5px/1 var(--mono);font-stretch:87.5%;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-right:4px}
.foot-nav a{color:var(--cream)}

/* ---------- case studies ---------- */
.case-hero{padding-top:calc(env(safe-area-inset-top,0px) + clamp(100px,14vh,140px));padding-bottom:clamp(30px,4vw,52px)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-bottom:10px;
  font:500 11px/1 var(--mono);font-stretch:87.5%;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li+li::before{content:"/";color:var(--line);color:rgba(247,239,230,.3)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--cream)}
.crumbs a:hover{color:var(--flame)}
.case-title{font:880 clamp(42px,7.2vw,112px)/.88 var(--display);font-stretch:100%;text-transform:uppercase;letter-spacing:-.01em;max-width:15ch;text-wrap:balance}
.case-title .tl{display:block}
.case-lede{max-width:54ch;margin-top:clamp(22px,3vw,34px);font:500 clamp(18px,1.6vw,22px)/1.5 var(--body);text-wrap:pretty}
.case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;margin-top:clamp(26px,4vw,44px)}
.case-facts div{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:20px}
.case-facts dt{order:-1;font:500 10.5px/1.4 var(--mono);font-stretch:87.5%;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.case-facts dd{font:600 15px/1.45 var(--body)}
.case-cover{margin-top:clamp(6px,1vw,12px)}
.case-cover .glass{padding:10px;border-radius:var(--r-xl)}
.case-cover img{width:100%;height:auto;border-radius:calc(var(--r-xl) - 10px);background:var(--char)}
.case-cover figcaption{margin-top:12px;font:500 11px/1.5 var(--mono);font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.case-body{display:grid;gap:clamp(44px,6vw,80px);padding-block:clamp(56px,8vw,110px) clamp(40px,6vw,80px)}
.case-sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:16px clamp(28px,5vw,88px);padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line)}
.case-sec .num{font:500 11px/1 var(--mono);font-stretch:87.5%;letter-spacing:.16em;color:var(--flame);margin-bottom:14px}
.case-sec h2{font:880 clamp(28px,3.3vw,50px)/.94 var(--display);font-stretch:104%;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.case-text{display:grid;gap:16px;min-width:0}
.case-text p{max-width:64ch;color:var(--muted);font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.72}
.case-text p b,.case-text p strong{color:var(--cream);font-weight:600}
.case-text q{color:var(--cream)}
.case-list{display:flex;flex-wrap:wrap;gap:8px}
.case-list li{padding:11px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,244,236,.04);font:600 13.5px/1 var(--body)}
.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:480px){.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}}
.swatch{display:flex;flex-direction:column;justify-content:flex-end;min-height:118px;padding:12px 14px;border-radius:18px;background:var(--sw);color:var(--on,#fff);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:500 10.5px/1.45 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase}
.swatch b{font:700 13px/1.3 var(--body);letter-spacing:0;text-transform:none}
.case-links{display:flex;flex-wrap:wrap;gap:12px;padding-bottom:clamp(30px,5vw,60px)}
.case-next{padding-block:clamp(40px,6vw,80px)}
.case-next h2{font:880 clamp(32px,4.4vw,64px)/.92 var(--display);font-stretch:110%;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:clamp(24px,3vw,40px)}
.next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(12px,1.4vw,20px)}
.next-card{display:grid;gap:14px;padding:10px 10px 18px;border-radius:var(--r-xl);transition:transform .5s var(--spring)}
.next-card:hover{transform:translateY(-4px)}
.next-card img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:calc(var(--r-xl) - 10px);background:var(--char)}
.next-card b{padding-inline:8px;font:850 clamp(20px,1.8vw,26px)/1 var(--display);font-stretch:118%;text-transform:uppercase}
.next-card small{padding-inline:8px;font:500 10.5px/1.4 var(--mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.case-cta{display:grid;justify-items:center;gap:22px;margin-block:clamp(20px,4vw,40px) clamp(60px,9vw,120px);padding:clamp(36px,6vw,72px) clamp(18px,4vw,48px);border-radius:var(--r-xl);text-align:center}
.case-cta h2{font:900 clamp(48px,9vw,128px)/.86 var(--display);font-stretch:86%;text-transform:uppercase;letter-spacing:-.01em}
.case-cta p{max-width:46ch;color:var(--muted)}
@media (max-width:800px){.case-sec{grid-template-columns:minmax(0,1fr)}}

/* ---------- 404 ---------- */
.lost{display:grid;justify-items:start;gap:22px;max-width:760px;margin:calc(env(safe-area-inset-top,0px) + clamp(110px,18vh,180px)) auto clamp(80px,12vw,140px);padding:clamp(28px,5vw,56px);border-radius:var(--r-xl)}
.lost h1{font:900 clamp(56px,12vw,150px)/.84 var(--display);font-stretch:90%;text-transform:uppercase;letter-spacing:-.01em}
.lost p{color:var(--muted);max-width:46ch}
.lost .hero-ctas{margin-top:6px}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:80;display:none;align-items:center;justify-content:center;pointer-events:none;
  width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:999px;opacity:1;
  background:rgba(255,244,236,.12);-webkit-backdrop-filter:blur(6px) saturate(180%);backdrop-filter:blur(6px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 6px 16px -6px rgba(0,0,0,.6);
  transition:width .45s var(--spring),height .45s var(--spring),margin .45s var(--spring),opacity .3s,background .3s}
.has-cursor .cursor{display:flex}
.cursor.is-link{width:46px;height:46px;margin:-23px 0 0 -23px}
.cursor.is-view{width:104px;height:104px;margin:-52px 0 0 -52px;background:rgba(232,40,30,.55)}
.cursor.is-hidden{opacity:0}
.cursor-label{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .2s}
.cursor.is-view .cursor-label{opacity:1}
.has-cursor .card{cursor:none}

/* ---------- scroll-driven motion (progressive) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sec-title{animation:title-stretch linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    .card{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .dish-name{animation:dish-lg linear both;animation-timeline:view();animation-range:entry 10% cover 48%}
    .receipt{animation:print linear both;animation-timeline:--print;animation-range:entry 0% entry 78%}
    .portrait{animation:rise-soft linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    @container (max-width:699px){.dish-name{animation-name:dish-sm}}
  }
}
@keyframes title-stretch{from{--wd:62}to{--wd:118}}
@keyframes dish-lg{from{--wd:50}to{--wd:150}}
@keyframes dish-sm{from{--wd:50}to{--wd:96}}
@keyframes rise{from{translate:0 70px;scale:.95;opacity:.35}to{translate:0 0;scale:1;opacity:1}}
@keyframes rise-soft{from{translate:0 60px;scale:.96}to{translate:0 0;scale:1}}
@keyframes print{from{translate:0 -44%}to{translate:0 0}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}