/* =====================================================================
   HOME — Onyx-style editorial rhythm, reinterpreted for Heabeans:
   script-mark hero → split → statement → cards → split → banner →
   path → one-machine screen → script-mark outro. Every scene is one screen.
   Everything is visible without JS / with reduced motion; `html.js`
   enables load-in keyframes and `html.stages-on` enables scroll scenes.
   Strike lines and the service path are drawn with CSS custom properties
   (--s / --p) on the text itself, so they never need re-measuring.
   ===================================================================== */
:root{
  --pen:polygon(0% 52%, 3% 30%, 14% 6%, 34% 0%, 62% 12%, 86% 34%, 100% 50%, 86% 62%, 62% 84%, 34% 100%, 14% 94%, 3% 72%);
  --sec-y:clamp(96px, 14vh, 168px);
}

/* ---------- shared: strike line anchored to its own text ---------- */
.strike{ position:relative; display:inline-block; --s:1; }
.strike::after{
  content:""; position:absolute; left:-3%; right:-3%; top:54%;
  height:.1em; min-height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-soft));
  clip-path:var(--pen); rotate:-.6deg;
  transform:scaleX(var(--s)); transform-origin:0 50%;
  pointer-events:none;
}

/* ---------- 1. HERO ---------- */
.hero{
  position:relative; height:100vh; height:100svh; min-height:560px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--bg-raised); text-align:center;   /* matches the next section, so the framed photo hands off seamlessly */
}
/* scroll hold: the hero sticks for ~one swipe while its timeline plays, then releases */
.hero-stage{ position:relative; --hero-hold:160svh; }
.stages-on .hero-stage{ height:calc(100vh + var(--hero-hold)); height:calc(100svh + var(--hero-hold)); }
.stages-on .hero-stage .hero{ position:sticky; top:0; min-height:0; }
.hero-media{ will-change:transform, clip-path; }
@media (max-width:860px){ .hero-stage{ --hero-hold:60svh; } }   /* phones: half-length hero hold */
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 48%, rgba(12,10,7,.55) 0%, rgba(12,10,7,.2) 70%),
    linear-gradient(0deg, rgba(12,10,7,.9) 0%, rgba(12,10,7,.2) 38%, rgba(12,10,7,.25) 80%, rgba(12,10,7,.6) 100%);
}
.hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; padding:var(--header-h) var(--gutter) 0; }
.hero-mark{ width:clamp(220px, 28vw, 380px); height:auto; filter:drop-shadow(0 6px 30px rgba(0,0,0,.45)); }
.hero-title{ font-size:clamp(1.55rem, 1.1rem + 2.1vw, 2.7rem); margin-top:clamp(18px, 3vh, 30px); text-shadow:0 2px 24px rgba(0,0,0,.5); }
.hero-sub{ color:var(--ink-muted); font-size:var(--t-body); margin-top:14px; max-width:36ch; }
.hero-ctas{ display:flex; gap:12px; margin-top:clamp(24px, 4vh, 40px); flex-wrap:wrap; justify-content:center; }
/* hero-only pills: softer than the square site buttons, with a round icon chip */
.hero-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:7px 7px 7px 22px; border-radius:999px;
  font-size:15px; font-weight:600; white-space:nowrap;
  transition:transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}
.hero-btn:active{ transform:scale(.97); }
.hero-btn-ico{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  font-family:var(--f-mono); font-size:15px; line-height:1;
  transition:transform .35s var(--ease), background-color .35s var(--ease);
}
.hero-btn--glass{
  color:var(--ink); border:1px solid rgba(242,236,227,.38);
  background:rgba(20,17,13,.32); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.hero-btn--glass .hero-btn-ico{ background:rgba(242,236,227,.14); }
.hero-btn--glass:hover{ border-color:rgba(242,236,227,.75); background:rgba(20,17,13,.5); }
.hero-btn--solid{ color:var(--ink); background:var(--accent); border:1px solid var(--accent); }
.hero-btn--solid .hero-btn-ico{ background:rgba(20,17,13,.22); }
.hero-btn--solid:hover{ background:var(--accent-hover); }
.hero-btn--solid:hover .hero-btn-ico{ transform:translateX(3px); }
/* the "read on" arrow breathes downward in time with the scroll cue */
.hero-bob{ animation:bob 2.2s var(--ease) infinite; }
.hero-btn--glass:hover .hero-bob{ animation-play-state:paused; transform:translateY(3px); }
@keyframes bob{ 0%, 100%{ transform:translateY(-2px); } 55%{ transform:translateY(4px); } }
.hero-scroll{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:2; color:var(--ink-muted); padding-bottom:34px; }
.hero-scroll::after{ content:""; position:absolute; left:50%; bottom:0; width:1px; height:26px; background:currentColor; transform-origin:50% 0; animation:scrollCue 2.2s var(--ease) infinite; }
@keyframes scrollCue{ 0%{ transform:scaleY(0); opacity:1; } 60%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }

/* load-in: the mark is written left→right like a pen, then the line settles in (pure CSS) */
@keyframes writeOn{ from{ clip-path:inset(-10% 100% -10% 0); } to{ clip-path:inset(-10% 0 -10% 0); } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes settle{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.js .hero-media img{ animation:settle 2.4s var(--ease) both; }
.js .hero-mark{ animation:writeOn 1.6s cubic-bezier(.65,0,.35,1) .35s both; }
/* `backwards` (not `both`): once played, the animation lets go so the scroll timeline can drive opacity */
.js .hero-title{ animation:riseIn 1s var(--ease) 1.6s backwards; }
.js .hero-sub{ animation:riseIn 1s var(--ease) 1.8s backwards; }
.js .hero-ctas{ animation:riseIn 1s var(--ease) 2s backwards; }
.js .hero-scroll{ animation:riseIn 1s var(--ease) 2.3s backwards; }

/* the line that settles into the framed photo during the scroll hold (only exists with motion on) */
.hero-caption{ display:none; }
.stages-on .hero-caption{
  display:block; position:absolute; left:0; right:0; top:50%; z-index:2; transform:translateY(-50%);
  text-align:center; padding:0 var(--gutter); pointer-events:none; opacity:0;
}
.hero-caption-logo{ display:block; width:clamp(78px, 7.5vw, 116px); height:auto; margin:0 auto clamp(14px, 2.4vh, 24px); filter:drop-shadow(0 4px 20px rgba(0,0,0,.5)); }
.hero-caption .latin{ display:block; font-size:clamp(2.4rem, 1.2rem + 4.6vw, 5.6rem); color:var(--ink); text-shadow:0 4px 40px rgba(0,0,0,.55); }
.hero-caption .kr-title{ display:block; margin-top:12px; font-size:clamp(1.05rem, .9rem + .7vw, 1.5rem); color:var(--ink-muted); }

/* ---------- SCENES: one screen each; with motion on they hold while they play ---------- */
.stage{ position:relative; --hold:110svh; --hold-k:1; }
.stage-pin{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.stages-on .stage{ height:calc(100vh + var(--hold) * var(--hold-k)); height:calc(100svh + var(--hold) * var(--hold-k)); }
.stages-on .stage-pin{ position:sticky; top:0; height:100vh; height:100svh; min-height:0; }
[data-media]{ will-change:transform, clip-path; }

/* ---------- 2 & 5. SPLIT (text | image) ---------- */
.split{ display:grid; grid-template-columns:minmax(0, 42fr) minmax(0, 58fr); align-items:stretch; background:var(--bg-raised); }
.split--rev{ grid-template-columns:minmax(0, 58fr) minmax(0, 42fr); background:var(--bg); }
.split-text{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:calc(var(--header-h) + 24px) clamp(24px, 5vw, 80px) 40px; }
.split-latin{ display:block; font-size:clamp(2.8rem, 1.4rem + 4.6vw, 6.2rem); color:var(--ink); margin-bottom:24px; }
.split-title{ font-size:clamp(1.6rem, 1.1rem + 1.9vw, 2.7rem); max-width:15em; margin-bottom:22px; }
.split-title em{ font-style:normal; color:var(--accent-soft); }
.split-body{ color:var(--ink-muted); font-size:var(--t-body); line-height:1.8; max-width:40ch; margin-bottom:28px; }
.split-body:last-child{ margin-bottom:0; }
.split-media{ position:relative; overflow:hidden; margin:0; min-height:100%; }
.split:not(.split--rev) .split-media{ order:2; }   /* story: words left, photo right */
.split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.split-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.cf-latin{ color:var(--accent-soft); }
.cf-notes{ display:flex; flex-wrap:wrap; font-weight:700; font-size:.95rem; margin-bottom:16px; color:var(--ink); }
.cf-notes span + span::before{ content:"|"; color:var(--ink-faint); font-weight:400; margin:0 .8em; }

/* ---------- 3. PHILOSOPHY ---------- */
.phil-pin{ background:var(--bg-deep); justify-content:center; text-align:center; }
.phil-media{ position:absolute; inset:0; }
.phil-media img{ width:100%; height:100%; object-fit:cover; }
.phil-media::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 80% 70% at 50% 50%, rgba(12,10,7,.72) 0%, rgba(12,10,7,.88) 100%); }
.phil-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; padding-block:calc(var(--header-h) + 24px) 48px; }
.phil-latin{ font-size:clamp(1.5rem, 1rem + 2vw, 2.8rem); color:var(--accent-soft); margin-bottom:clamp(20px, 4vh, 40px); }
.phil-quote{ display:flex; flex-direction:column; align-items:center; gap:.5em; margin-bottom:clamp(24px, 4.5vh, 44px); font-weight:400; }
.phil-l1{ font-size:clamp(1.15rem, .9rem + 1.2vw, 1.9rem); color:var(--ink-muted); }
.phil-l1 .strike::after{ height:.16em; min-height:4px; top:52%; filter:drop-shadow(0 0 8px rgba(217,128,111,.55)); }
.phil-l2{ display:block; overflow:hidden; padding:.06em .1em .14em; font-size:clamp(2.3rem, 1rem + 6vw, 6.6rem); line-height:1.12; color:var(--ink); }
.phil-l2-in{ display:inline-block; }
.phil-body{ max-width:44ch; color:var(--ink-muted); font-size:var(--t-body); line-height:1.8; }

/* ---------- 4. PILLARS ---------- */
.pl-pin{ background:var(--bg); }
.pl-inner{ display:flex; flex-direction:column; justify-content:center; padding-top:calc(var(--header-h) + 16px); padding-bottom:32px; }
.sec-head{ text-align:center; margin-bottom:clamp(20px, 4vh, 44px); }
.sec-latin{ display:block; font-size:clamp(2.4rem, 1.4rem + 3.6vw, 5rem); margin-bottom:12px; }
.sec-title{ font-size:clamp(1.2rem, 1rem + 1vw, 1.9rem); color:var(--ink-muted); }
.pl-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(12px, 1.4vw, 20px); }
.pl-card{ position:relative; display:block; height:clamp(340px, 56svh, 600px); overflow:hidden; background:var(--bg-deep); isolation:isolate; }
.pl-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); z-index:-2; }
.pl-card::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(12,10,7,.94) 0%, rgba(12,10,7,.55) 45%, rgba(12,10,7,.15) 100%); }
.pl-body{ position:absolute; inset:auto 0 0 0; padding:clamp(20px, 2.4vw, 36px); display:flex; flex-direction:column; align-items:center; text-align:center; }
.pl-body h3{ font-size:clamp(2rem, 1.4rem + 2.2vw, 3.4rem); margin:8px 0 10px; line-height:1.1; }
.pl-body p{ color:#d7cdbd; font-size:.96rem; line-height:1.7; max-width:28ch; margin-bottom:20px; }
.pl-more{ font-size:14px; font-weight:600; padding:10px 20px; border:1px solid rgba(242,236,227,.55); transition:background-color .35s var(--ease), border-color .35s var(--ease); }
.pl-card:hover img{ transform:scale(1.05); }
.pl-card:hover .pl-more{ background:rgba(242,236,227,.1); border-color:var(--ink); }

/* ---------- 6a. SERVICE BANNER ---------- */
.sv-banner{ background:var(--bg-deep); align-items:flex-end; }
.sv-media{ position:absolute; inset:0; }
.sv-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.sv-media img.sv-mirror{ transform:scaleX(-1); object-position:50% 58%; }
.sv-banner::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(12,10,7,.95) 0%, rgba(12,10,7,.6) 38%, rgba(12,10,7,.15) 70%, rgba(12,10,7,.45) 100%); }
.sv-banner-inner{ position:relative; z-index:2; padding-bottom:clamp(40px, 8vh, 84px); }
.sv-latin{ display:block; font-size:clamp(2.6rem, 1.4rem + 5vw, 6.6rem); color:var(--accent-soft); margin-bottom:8px; }
.sv-title{ font-size:clamp(1.9rem, 1.2rem + 3vw, 4rem); line-height:1.2; }
.sv-lead{ max-width:48ch; color:#d7cdbd; font-size:var(--t-body); line-height:1.8; margin-top:18px; }

/* ---------- 6b. SERVICE STEPS ---------- */
.steps-pin{ background:var(--bg); }
.steps-inner{ padding-top:calc(var(--header-h) + 24px); padding-bottom:40px; }
.steps-head{ margin-bottom:clamp(36px, 7vh, 72px); }
.steps-title{ font-size:clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); margin-top:12px; }
.sv-steps{ list-style:none; position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(20px, 3vw, 48px); --p:1; }
.stages-on .sv-steps{ --p:0; }
.sv-rail{ position:absolute; left:0; right:0; top:7px; height:1px; background:var(--hairline-strong); }
.sv-fill{ position:absolute; inset:-1px 0; background:linear-gradient(90deg, var(--accent), var(--accent-soft)); transform:scaleX(var(--p)); transform-origin:0 50%; }
.sv-step{ position:relative; padding-top:34px; opacity:.35; transition:opacity .5s var(--ease); }
.sv-dot{ position:absolute; left:0; top:0; width:15px; height:15px; border-radius:50%; background:var(--bg); border:2px solid var(--ink-faint); transition:background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.sv-step h3{ font-size:clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem); margin:8px 0 10px; }
.sv-step p{ color:var(--ink-muted); line-height:1.75; max-width:30ch; }
.sv-step.on, html:not(.stages-on) .sv-step{ opacity:1; }
.sv-step.on .sv-dot, html:not(.stages-on) .sv-dot{ background:var(--accent); border-color:var(--accent-soft); box-shadow:0 0 0 6px rgba(171,70,55,.18); }
/* the consulting note is a call-out: tinted panel, accent rule, and a filled button */
.sv-tail{
  margin-top:clamp(36px, 6vh, 64px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px;
  padding:clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 32px);
  background:linear-gradient(90deg, rgba(171,70,55,.16), rgba(171,70,55,.04));
  border-left:3px solid var(--accent); border-radius:2px;
}
.sv-tail-text{ font-size:clamp(1.1rem, .95rem + .6vw, 1.45rem); color:var(--ink); }
.sv-tail-text strong{ font-weight:400; color:var(--accent-soft); }

/* ---------- 7. MACHINES TEASER ---------- */
.mc-teaser{ background:var(--bg-deep); }
.mc-media{ position:absolute; inset:0; }
.mc-media img{ width:100%; height:100%; object-fit:cover; object-position:60% 50%; }
.mc-teaser::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(12,10,7,.92) 0%, rgba(12,10,7,.7) 38%, rgba(12,10,7,.15) 75%), linear-gradient(0deg, rgba(12,10,7,.6), rgba(12,10,7,0) 40%); }
.mc-inner{ position:relative; z-index:2; width:100%; }
.mc-label{ letter-spacing:.42em; color:var(--ink-muted); display:block; margin-bottom:22px; }
.mc-title{ font-size:clamp(2rem, 1.2rem + 3.2vw, 4.2rem); margin-bottom:22px; }
.mc-body{ max-width:42ch; color:var(--ink-muted); font-size:var(--t-body); line-height:1.8; margin-bottom:34px; }
.mc-ctas{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- 8. OUTRO ---------- */
.outro{ position:relative; padding:clamp(120px, 22vh, 220px) 0; background:radial-gradient(ellipse 60% 55% at 50% 40%, rgba(171,70,55,.16) 0%, rgba(171,70,55,0) 70%), var(--bg-deep); text-align:center; overflow:hidden; }
.outro-inner{ display:flex; flex-direction:column; align-items:center; }
.outro-mark{ width:clamp(210px, 24vw, 330px); height:auto; margin-bottom:clamp(28px, 5vh, 48px); }
.outro-title{ font-size:clamp(1.6rem, 1.1rem + 2vw, 2.8rem); margin-bottom:16px; }
.outro-body{ color:var(--ink-muted); font-size:var(--t-body); max-width:40ch; margin-bottom:34px; }
.outro-ctas{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.js .outro-mark{ clip-path:inset(-10% 100% -10% 0); transition:clip-path 1.6s cubic-bezier(.65,0,.35,1) .1s; }
.js .outro-title, .js .outro-body, .js .outro-ctas{ opacity:0; transform:translateY(18px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js .outro-title{ transition-delay:1.3s; }
.js .outro-body{ transition-delay:1.45s; }
.js .outro-ctas{ transition-delay:1.6s; }
.outro.in .outro-mark{ clip-path:inset(-10% 0 -10% 0); }
.outro.in .outro-title, .outro.in .outro-body, .outro.in .outro-ctas{ opacity:1; transform:none; }

/* ---------- mobile: every scene still fits one screen ---------- */
@media (max-width:860px){
  /* split: the photo becomes the backdrop and the words sit low over it */
  .split, .split--rev{ display:flex; align-items:flex-end; }
  .split-media{ position:absolute; inset:0; min-height:0; }
  .split-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,10,7,.97) 0%, rgba(12,10,7,.86) 42%, rgba(12,10,7,.35) 75%, rgba(12,10,7,.55) 100%); }
  .split-text{ width:100%; padding:calc(var(--header-h) + 16px) var(--gutter) clamp(36px, 7vh, 64px); justify-content:flex-end; }
  .split-latin{ font-size:clamp(2.4rem, 11vw, 3.2rem); margin-bottom:14px; }
  .split-title{ font-size:clamp(1.35rem, 6vw, 1.7rem); margin-bottom:14px; }
  .split-body{ font-size:.98rem; line-height:1.7; margin-bottom:20px; }
  .cf-notes{ font-size:.88rem; margin-bottom:10px; }
  .split-ctas .btn{ padding:12px 20px; }
  /* pillars: a deck — the three cards share one place and take turns */
  .pl-inner{ padding-bottom:24px; }
  .pl-grid{ grid-template-columns:1fr; }
  .pl-card{ height:auto; aspect-ratio:16 / 13; }
  .stages-on .stage:not(.unpinned) .pl-inner{ height:100%; }
  .stages-on .stage:not(.unpinned) .pl-grid{ position:relative; flex:1; min-height:0; display:block; overflow:hidden; }
  .stages-on .stage:not(.unpinned) .pl-card{ position:absolute; inset:0; height:auto; aspect-ratio:auto; }
  .sv-media img.sv-mirror{ object-position:38% 50%; }
  .sv-lead{ font-size:.98rem; line-height:1.7; }
  .steps-inner{ padding-top:calc(var(--header-h) + 12px); padding-bottom:24px; }
  .steps-head{ margin-bottom:22px; }
  .steps-title{ font-size:1.45rem; margin-top:8px; }
  .sv-steps{ grid-template-columns:1fr; gap:18px; padding-left:34px; }
  .sv-step > .label{ display:none; }   /* the lit dots already number the visits on a phone */
  .sv-rail{ left:7px; right:auto; top:8px; bottom:8px; width:1px; height:auto; }
  .sv-fill{ inset:0 -1px; background:linear-gradient(180deg, var(--accent), var(--accent-soft)); transform:scaleY(var(--p)); transform-origin:50% 0; }
  .sv-step{ padding-top:0; }
  .sv-step h3{ font-size:1.3rem; margin:0 0 4px; }
  .sv-step p{ font-size:.93rem; line-height:1.6; }
  .sv-dot{ left:-34px; top:7px; }
  .sv-tail{ margin-top:20px; padding:14px 16px; gap:12px; }
  .sv-tail-text{ font-size:1.05rem; }
  .sv-tail .btn{ padding:11px 18px; font-size:14px; }
  .mc-teaser{ align-items:flex-end; }
  .mc-inner{ padding-bottom:clamp(40px, 8vh, 72px); }
  .mc-teaser::after{ background:linear-gradient(0deg, rgba(12,10,7,.95) 0%, rgba(12,10,7,.75) 45%, rgba(12,10,7,.3) 100%); }
}
@media (max-width:480px){
  .hero-ctas{ gap:10px; }
  .hero-btn{ font-size:14px; padding-left:18px; }
}

@media (prefers-reduced-motion: reduce){
  .js .hero-media img, .js .hero-mark, .js .hero-title, .js .hero-sub, .js .hero-ctas, .js .hero-scroll{ animation:none; }
  .hero-scroll::after, .hero-bob{ animation:none; }
  .hero-btn, .hero-btn-ico, .pl-card img{ transition:none; }
  .js .outro-mark{ clip-path:none; transition:none; }
  .js .outro-title, .js .outro-body, .js .outro-ctas{ opacity:1; transform:none; transition:none; }
}

/* =====================================================================
   LIGHT ACT — the café. Coffee, the on-site visit and its steps sit on paper
   instead of roastery-dark. Components read their colours from tokens, so the
   scope mostly just re-points them; the few photo overlays are re-tinted below.
   ===================================================================== */
.theme-light{
  --paper:236,228,214;
  --bg:#ece4d6; --bg-raised:#e4dacb;
  --ink:#1d1813; --ink-muted:#5b5147; --ink-faint:#8d8275;
  --hairline:rgba(29,24,19,.12); --hairline-strong:rgba(29,24,19,.22);
  --accent-soft:#b4503e;
  color:var(--ink);
}
.theme-light .stage-pin{ background:var(--bg); }
.theme-light .split-title em{ color:var(--accent); }
.theme-light .btn-line{ border-color:rgba(29,24,19,.4); color:var(--ink); }
.theme-light .btn-line:hover{ border-color:var(--ink); background:rgba(29,24,19,.06); }
/* the visit banner: the photo fades into paper where the words sit */
.theme-light .sv-banner::after{
  background:
    linear-gradient(0deg, rgba(var(--paper),1) 0%, rgba(var(--paper),.9) 26%, rgba(var(--paper),.35) 52%, rgba(var(--paper),0) 72%);
}
.theme-light .sv-lead{ color:var(--ink-muted); }
.theme-light .sv-title{ color:var(--ink); }
.theme-light .sv-tail{ background:linear-gradient(90deg, rgba(171,70,55,.12), rgba(171,70,55,.03)); }
.theme-light .sv-step.on .sv-dot, html:not(.stages-on) .theme-light .sv-dot{ box-shadow:0 0 0 6px rgba(171,70,55,.14); }

/* ---------- TONE SHIFT: an empty beat where the room changes colour ---------- */
.tone-pin{ background:var(--bg-deep); justify-content:center; text-align:center; }
.tone-light{ position:absolute; inset:0; background:#ece4d6; opacity:0; }
/* "bean" shift: a paper-coloured coffee bean that opens into the whole room (motion only) */
.tone-bean{ display:none; }
.stages-on .tone[data-shift="bean"] .tone-bean{
  display:block; position:absolute; left:50%; top:50%; z-index:1;
  width:clamp(84px, 13vmin, 140px); aspect-ratio:1 / 1.32; border-radius:50%;
  background:#ece4d6; box-shadow:0 0 60px rgba(255,196,140,.18);
}
.tone-bean svg{ position:absolute; inset:0; width:100%; height:100%; }
.tone-bean path{ fill:none; stroke:#0c0a07; stroke-width:3.2; stroke-linecap:round; }
/* "espresso" shift: portafilter, two streams, and the shot rising with a crema edge (motion only) */
.tone-espresso{ display:none; }
.stages-on .tone[data-shift="espresso"] .tone-espresso{ display:block; position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.tone-espresso .pf{ position:absolute; left:50%; top:calc(var(--header-h) + 3vh); width:clamp(170px, 22vw, 290px); }
.tone-espresso .pf svg{ display:block; width:100%; height:auto; overflow:visible; }
.pf-head{ fill:#2a221c; } .pf-gasket{ fill:#4a3f36; } .pf-ear{ fill:#2a221c; }
.pf-handle{ fill:#1d1813; } .pf-basket{ fill:#3a2f27; } .pf-spout{ fill:#2a221c; }
.tone-espresso .stream{
  position:absolute; top:64.5%; width:clamp(3px, .35vw, 5px); height:100vh; height:100svh;
  border-radius:3px; transform-origin:50% 0;
  background:linear-gradient(180deg, #7a4a28 0%, #3a2214 30%, #1a100a 100%);
}
.tone-espresso .s1{ left:46.4%; translate:-50% 0; } .tone-espresso .s2{ left:53.6%; translate:-50% 0; }
.stages-on .tone[data-shift="espresso"] .tone-light{ opacity:1; }   /* arrives as paper, like the scene before it */
.stages-on .tone[data-shift="bean"] .tone-light{ opacity:0; }       /* arrives dark, like the scene before it; the bean brings the paper */
.tone-espresso .pool{ position:absolute; left:0; right:0; top:0; height:220%; background:#0c0a07; z-index:2; }
.tone-espresso .pool-wave{ position:absolute; left:0; bottom:100%; width:200%; height:clamp(26px, 4vh, 44px); margin-bottom:-1px; }
.pool-wave .crema{ fill:#8a5a34; } .pool-wave .shot{ fill:#0c0a07; }
.tone-inner{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; color:var(--ink); }
.tone-mark{
  display:block; width:clamp(190px, 22vw, 300px); aspect-ratio:295 / 152; margin-bottom:clamp(22px, 4vh, 40px);
  background-color:currentColor;
  -webkit-mask:url("logo-script.png") center / contain no-repeat; mask:url("logo-script.png") center / contain no-repeat;
}
.tone-latin{ display:block; font-size:clamp(2.4rem, 1.3rem + 4vw, 5.2rem); color:var(--accent); margin-bottom:16px; }
.tone-title{ font-size:clamp(1.3rem, 1rem + 1.4vw, 2.2rem); line-height:1.4; }
/* without motion each shift simply shows the colour it leads into */
.tone[data-to="light"] .tone-light{ opacity:1; }
.tone[data-to="light"] .tone-inner{ color:#1d1813; }

@media (max-width:860px){
  /* light split on a phone: the photo dissolves into paper behind dark words */
  .theme-light .split-media::after{
    background:linear-gradient(0deg, rgba(var(--paper),.99) 0%, rgba(var(--paper),.93) 44%, rgba(var(--paper),.3) 72%, rgba(var(--paper),0) 100%);
  }
  .theme-light .sv-banner::after{
    background:linear-gradient(0deg, rgba(var(--paper),1) 0%, rgba(var(--paper),.92) 40%, rgba(var(--paper),.3) 64%, rgba(var(--paper),0) 82%);
  }
}

/* ---------- phones: light scroll ----------
   Only the hero, philosophy and the two colour shifts pin, at half length; every other scene
   scrolls freely (class .unpinned, set by stages.js on narrow screens) while its motion still
   follows the scroll. Desktop is untouched: these rules only exist under 860px. */
@media (max-width:860px){
  .stage{ --hold-k:.5; }
  .stages-on .stage.unpinned{ height:auto; }
  .stages-on .stage.unpinned .stage-pin{ position:relative; height:auto; min-height:100vh; min-height:100svh; }
  /* the colour shifts keep more room than the other pinned scenes, so the pour can be watched */
  .stage[data-mhold]{ --hold-k:1.15; }
}

/* ---------- desktop: the footer toggle doesn't exist ---------- */
.foot-toggle{ display:none; }

/* ---------- phones: "커피 이야기를, 매장에서 시작하세요" is the last screen;
   the company details fold into a strip at its foot and open on tap / drag up ---------- */
@media (max-width:860px){
  .home .outro{
    min-height:calc(100vh - 56px); min-height:calc(100svh - 56px);
    display:flex; align-items:center; padding:calc(var(--header-h) + 24px) 0 32px;
  }
  .home .site-footer{ padding:0; border-top:1px solid var(--hairline); }
  .home .foot-toggle{
    display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:56px;
    border:0; background:transparent; color:var(--ink-muted);
    font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; touch-action:pan-x;
  }
  .home .foot-toggle i{
    width:9px; height:9px; border-left:1.5px solid currentColor; border-top:1.5px solid currentColor;
    transform:translateY(2px) rotate(45deg); transition:transform .45s var(--ease);
  }
  .home .foot-toggle[aria-expanded="true"] i{ transform:translateY(-2px) rotate(225deg); }
  .home .foot-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
  .home .foot-body.open{ grid-template-rows:1fr; }
  .home .foot-body-in{ overflow:hidden; min-height:0; }
  .home .foot-body-in > .wrap{ padding-top:20px; padding-bottom:24px; }
  /* tighter rhythm so the opened details fit under the grown header in one screen */
  .home .site-footer .footer-top{ gap:28px; padding-bottom:22px; }
  .home .site-footer .footer-col h4{ margin-bottom:10px; }
  .home .site-footer .footer-col a, .home .site-footer .footer-col p{ margin-bottom:5px; }
  .home .site-footer .footer-biz{ gap:4px 14px; padding:18px 0 12px; }
  .home .site-footer .footer-logo{ display:none; }   /* the closing screen already carries the mark */
}
@media (max-width:860px) and (prefers-reduced-motion: reduce){
  .home .foot-body, .home .foot-toggle i{ transition:none; }
}
/* phones: a bigger portafilter set clear of the header, with streams thick enough to read */
@media (max-width:860px){
  .tone-espresso .pf{ width:min(64vw, 300px); top:calc(var(--header-h) + 7vh); }
  .tone-espresso .stream{ width:6px; }
}
/* phones: the pour gets a longer run than the bean (the bean's pace is right) */
@media (max-width:860px){
  .stage.tone[data-shift="espresso"][data-mhold]{ --hold-k:1.9; }
}
/* phones: with the company details open, the header grows a band and the logo glides to the centre, larger */
@media (max-width:860px){
  .home .site-header::before{
    content:""; position:absolute; left:0; right:0; top:100%; height:36px; z-index:-1;
    background:#14110d; border-bottom:1px solid var(--hairline);
    transform:scaleY(0); transform-origin:50% 0; transition:transform .55s var(--ease);
  }
  .home .site-header .brand{ display:block; transition:transform .6s var(--ease); }
  .foot-crest .home .site-header, .home.foot-crest .site-header{ background:#14110d; border-bottom-color:transparent; }
  .foot-crest .home .site-header::before, .home.foot-crest .site-header::before{ transform:scaleY(1); }
  .foot-crest .home .site-header .brand, .home.foot-crest .site-header .brand{
    transform:translate(calc(50vw - var(--gutter) - 30px), 18px) scale(1.55);
  }
}
@media (max-width:860px) and (prefers-reduced-motion: reduce){ .home .site-header::before, .home .site-header .brand{ transition:none; } }