/* Design tokens: ORYZO AI style (refero) — "darkroom product editorial" */
:root{
  color-scheme: dark;
  --color-warm-cream:#ffedd7; --color-walnut-shadow:#100904; --color-bark-brown:#382416;
  --color-cork-border:#40372e; --color-driftwood:#6c5f51; --color-ember-accent:#dc5000;
  --cream-muted:#c7b6a2; /* solid muted cream for secondary copy (contrast ≥ 7:1 on walnut) */

  --font:"Inter","Söhne","Neue Haas Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --text-display:clamp(40px,6.4vw,92px);  /* hero lockup, scaled up from 51px */
  --text-heading:clamp(32px,4.2vw,51px);
  --text-heading-sm:24px;
  --text-body:clamp(20px,2.2vw,29px);
  --text-lg:18px;

  --radius-cards:12px; --radius-pill:36px; --radius-ghost:22.5px; --radius-full:9999px;
  --gutter:clamp(18px,3vw,41px);
  --dash:1px dashed var(--color-cork-border);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--color-walnut-shadow)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (min-width:900px) and (min-height:700px){html{scroll-snap-type:y proximity}}
body{margin:0;background:var(--color-walnut-shadow);color:var(--color-warm-cream);
  font:500 14px/1.2 var(--font);font-feature-settings:"ss01" on;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:1px dashed var(--color-warm-cream);outline-offset:4px}
::selection{background:var(--color-bark-brown);color:var(--color-warm-cream)}

/* ---------- Type: two voices ---------- */
.up,h1,h2,h3,.label{text-transform:uppercase;font-weight:500;letter-spacing:0}
h1,h2,h3{margin:0;color:var(--color-warm-cream)}
.display{font-size:var(--text-display);line-height:.9}
h2{font-size:var(--text-heading);line-height:.98;max-width:16ch} /* .9 in the source; nudged so Spanish accents don't collide */
h3{font-size:var(--text-heading-sm);line-height:1.09}
.label{font-size:12px;line-height:1.1}
.body{font-size:var(--text-body);line-height:1.26;font-weight:400;text-transform:none;max-width:30ch}
.desc{font-size:var(--text-lg);line-height:1.33;font-weight:400;text-transform:none;color:var(--cream-muted)}
.ember{color:var(--color-ember-accent)}
.muted{color:var(--cream-muted)}
.legal{font:500 10px/1.2 Arial,system-ui,sans-serif;text-transform:uppercase;color:var(--cream-muted)}

/* ---------- Fixed top navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:18px var(--gutter);
  background:linear-gradient(var(--color-walnut-shadow) 30%,rgba(16,9,4,0))}
.nav a{text-decoration:none;font-size:12px;line-height:1;text-transform:uppercase;font-weight:500}
.nav .wordmark{font-size:14px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:24px}
.nav ul a{padding:6px 0;border-bottom:1px dashed transparent}
.nav ul a:hover,.nav ul a[aria-current="true"]{border-bottom-color:var(--color-warm-cream)}
.nav .lang{border:1px solid var(--color-warm-cream);border-radius:var(--radius-ghost);padding:6px 12px}
@media (max-width:820px){.nav ul li.hide-sm{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;text-transform:uppercase;
  font:500 12px/1 var(--font);color:var(--color-warm-cream);white-space:nowrap;transition:background .2s,color .2s}
.btn.pill{background:var(--color-bark-brown);border-radius:var(--radius-pill);padding:14px 24px;font-size:14px}
.btn.pill:hover{background:#4a3020}
.btn.ghost{border:1px solid var(--color-warm-cream);border-radius:var(--radius-ghost);padding:8px 16px}
.btn.ghost:hover{background:var(--color-warm-cream);color:var(--color-walnut-shadow)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ulink{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---------- Slides ---------- */
.slide{position:relative;min-height:100svh;padding:110px var(--gutter) 68px;scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:center;border-top:var(--dash);overflow:hidden}
.slide-label{display:flex;align-items:center;gap:12px;margin-bottom:41px}
.slide-label::after{content:"";flex:1;border-top:var(--dash)}
.slide-label .ember{font-variant-numeric:tabular-nums}
.head{display:grid;gap:24px;margin-bottom:45px}
@media (min-width:900px){.head{grid-template-columns:1fr 1fr;align-items:end}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;padding:96px var(--gutter) 24px;scroll-snap-align:start;
  display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.hero .tagline{margin-bottom:14px}
.hero .object{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
/* The cup: base pose per section (--tx/--ty/--r0) plus scroll-driven motion set by deck.js (--spin/--py/--sc) */
.object img{transform:translate(var(--tx,0px),calc(var(--ty,0px) + var(--py,0px))) rotate(calc(var(--r0,0deg) + var(--spin,0deg))) scale(var(--sc,1));
  will-change:transform;transition:transform .2s ease-out}
@media (prefers-reduced-motion:reduce){.object img{transition:none}}
/* Hero video: muted ambient loop (deck.js); edges feathered into the walnut canvas.
   It drifts and scales with scroll like the cups, but never rotates. */
.hero-video{display:block;width:min(1100px,72vw);height:auto;--tx:14%;
  transform:translate(var(--tx,0px),calc(var(--ty,0px) + var(--py,0px))) scale(var(--sc,1));
  transition:transform .2s ease-out;will-change:transform;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
@media (prefers-reduced-motion:reduce){.hero-video{transition:none}}
.hero-bottom{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.info{max-width:460px;border-radius:var(--radius-cards);padding:24px;
  background:rgba(56,36,22,.55);border:1px solid var(--color-cork-border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.info h2{font-size:var(--text-heading-sm);line-height:1.09;max-width:none}
.info hr{border:0;border-top:var(--dash);margin:18px 0}
.info .actions{margin-top:24px}
.thumb{display:grid;gap:10px;width:200px;margin-bottom:58px;padding:14px;border-radius:var(--radius-cards);text-decoration:none;
  border:1px solid var(--color-cork-border);background:rgba(16,9,4,.6)}
.thumb:hover{border-color:var(--color-warm-cream)}
.thumb .row{display:flex;justify-content:space-between;align-items:center}
.thumb .play{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;border:1px solid var(--color-warm-cream);font-size:12px}
.vlabel{position:absolute;right:10px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:center;
  font-size:10px;white-space:nowrap;text-transform:uppercase;pointer-events:none}
@media (max-width:760px){
  .vlabel,.thumb{display:none}
  .hero-video{width:150vw;--tx:0px;--ty:-12%;opacity:.7}
}

/* ---------- Reveal (3 columns: text / object / text) ---------- */
.reveal3{display:grid;gap:41px;align-items:center}
.reveal3 .object img{width:min(100%,420px);margin:0 auto}
/* The cup is decoration: it must never catch clicks, and the copy beside it stays on top
   even when the rotated/scaled image spills over its column. */
.object{pointer-events:none}
.reveal3>:not(.object){position:relative;z-index:1}
@media (min-width:960px){.reveal3{grid-template-columns:1fr minmax(260px,32vw) 1fr;gap:18px}}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));margin-top:68px;border-top:var(--dash)}
.fact{padding:24px 18px 0 0}
.fact b{display:block;font-size:var(--text-heading);line-height:.9;font-weight:500;margin-bottom:10px}

/* ---------- Cards ---------- */
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr))}
.card{border:1px solid var(--color-cork-border);border-radius:var(--radius-cards);padding:24px;
  display:flex;flex-direction:column;gap:18px}
.card .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card .meta{margin-top:auto;padding-top:18px;border-top:var(--dash);display:grid;gap:8px}
.tags,.card .meta.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:10px;line-height:1.2;text-transform:uppercase;border:1px solid var(--color-driftwood);
  border-radius:var(--radius-full);padding:5px 10px;color:var(--color-warm-cream)}

/* ---------- Case ---------- */
.case{display:grid;gap:41px}
@media (min-width:960px){.case{grid-template-columns:6fr 5fr;align-items:start}}
.case blockquote{margin:31px 0 0;padding-top:24px;border-top:var(--dash)}
.clients{display:grid;gap:18px}
.case ul{margin:0;padding-left:18px;display:grid;gap:8px}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));border-top:var(--dash);border-left:var(--dash)}
@media (min-width:1000px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:24px;border-right:var(--dash);border-bottom:var(--dash);display:flex;flex-direction:column;gap:12px}
.stat b{font-size:var(--text-heading);line-height:.9;font-weight:500}
.stat .desc{font-size:15px}
.stat .label{margin-top:auto;padding-top:6px}

/* ---------- Timeline ---------- */
.timeline{list-style:none;margin:0;padding:0;border-top:var(--dash)}
.timeline li{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:24px 0;border-bottom:var(--dash)}
.timeline .who{display:grid;gap:10px}
.timeline .desc{max-width:62ch}
@media (max-width:640px){.timeline li{grid-template-columns:1fr;gap:10px}}

/* ---------- Process ---------- */
.process{display:grid;gap:45px}
@media (min-width:960px){.process{grid-template-columns:1fr 1fr;align-items:center}}
.steps{list-style:none;margin:31px 0 0;padding:0;counter-reset:s;border-top:var(--dash)}
.steps li{counter-increment:s;display:grid;grid-template-columns:45px 1fr;gap:12px;padding:18px 0;border-bottom:var(--dash)}
.steps li::before{content:"0" counter(s);font-size:12px;color:var(--color-ember-accent);padding-top:4px}
.steps h3{font-size:18px;line-height:1;margin-bottom:8px}
.diagram{margin:0;border:1px solid var(--color-cork-border);border-radius:var(--radius-cards);padding:18px}
.diagram svg{display:block;width:100%;height:auto}
.diagram figcaption{padding-top:14px;border-top:var(--dash);margin-top:14px}

/* ---------- Toolkit ---------- */
.kit{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.edu{list-style:none;margin:0;padding:0;display:grid}
.edu li{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:var(--dash);
  font-size:15px;font-weight:400;line-height:1.33}
.edu li:last-child{border-bottom:0}
.edu span{color:var(--cream-muted);text-transform:uppercase;font-size:10px;font-weight:500;white-space:nowrap;padding-top:3px}

/* ---------- Contact ---------- */
.offer .object img{--r0:28deg}
.contact .object img{--r0:64deg}
.contact .channels{display:grid;gap:10px;margin-top:31px;padding-top:24px;border-top:var(--dash)}
.contact .channels a{color:var(--color-ember-accent)}

/* ---------- Footer ---------- */
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:24px var(--gutter);border-top:var(--dash)}
footer a{text-decoration:none}

/* ---------- Toast (email copied) ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:60;transform:translate(-50%,12px);opacity:0;pointer-events:none;
  background:var(--color-bark-brown);color:var(--color-warm-cream);border:1px solid var(--color-cork-border);
  border-radius:var(--radius-pill);padding:12px 20px;font-size:12px;text-transform:uppercase;white-space:nowrap;
  transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Deck controls ---------- */
.deck-ctrl{position:fixed;right:var(--gutter);bottom:18px;z-index:40;display:flex;align-items:center;gap:4px;padding:4px;
  border-radius:var(--radius-full);border:1px solid var(--color-cork-border);background:rgba(16,9,4,.85)}
.deck-ctrl button{appearance:none;border:0;background:transparent;width:31px;height:31px;border-radius:50%;
  cursor:pointer;color:var(--color-warm-cream);font:500 14px/1 var(--font)}
.deck-ctrl button:hover{background:var(--color-bark-brown)}
.deck-ctrl button:disabled{color:var(--color-driftwood);cursor:default;background:transparent}
.deck-ctrl output{font-size:10px;text-transform:uppercase;font-variant-numeric:tabular-nums;padding:0 6px;min-width:56px;text-align:center}
@media (max-width:640px){.deck-ctrl{display:none}}

/* ---------- Appear on scroll ---------- */
.appear{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.appear.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.appear{opacity:1;transform:none;transition:none}}

@media print{
  .nav,.deck-ctrl{display:none}
  .slide,.hero{min-height:auto;break-inside:avoid;page-break-after:always}
  .appear{opacity:1;transform:none}
}