/* ============================================================
   AROBICA — marketing site
   Brand tokens inlined (so the file is self-contained), then
   kit layout + bespoke component styles.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Ojuju:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');

:root {
  --espresso:#1B1714; --espresso-900:#14100D; --espresso-800:#1B1714;
  --espresso-700:#2A211B; --espresso-600:#3A2E25; --espresso-500:#4D3E32;
  --crema:#F4EDE3; --crema-50:#FBF7F0; --crema-100:#F4EDE3; --crema-200:#E8DDCC;
  --crema-300:#D9C9B2; --crema-400:#C3AE92;
  --amber:#C9882A; --amber-bright:#D9962F; --amber-deep:#8F5E16; --amber-soft:rgba(201,136,42,0.14);
  --fg-1:#1B1714; --fg-2:#5A4D42; --fg-3:#8A7B6C;
  --on-dark-1:#F4EDE3; --on-dark-2:#C9BCAD; --on-dark-3:#9A8C7C;
  --border-light:#D9C9B2; --border-dark:#3A2E25;

  --font-display:'Fraunces','Times New Roman',Georgia,serif;
  --font-hero:'Ojuju','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --text-display:clamp(3rem,7vw,5.5rem);
  --text-h1:clamp(2.4rem,5vw,4rem);
  --text-h2:clamp(1.9rem,3.4vw,2.9rem);
  --text-h3:clamp(1.35rem,2vw,1.75rem);
  --text-lead:clamp(1.15rem,1.5vw,1.4rem);
  --text-body:1.0625rem; --text-small:0.875rem; --text-eyebrow:0.75rem;
  --text-figure:clamp(4rem,11vw,9rem);

  --w-reg:400; --w-med:500; --w-semi:600; --w-bold:700;
  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px;
  --shadow-sm:0 1px 2px rgba(27,23,20,0.06);
  --shadow-md:0 8px 24px rgba(27,23,20,0.10);
  --shadow-lg:0 24px 60px rgba(27,23,20,0.18);
  --shadow-amber:0 14px 50px rgba(201,136,42,0.28);
  --ease:cubic-bezier(0.33,0,0.0,1);
  --dur:0.33s;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--crema); color:var(--fg-1); font-family:var(--font-body);
  font-size:var(--text-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
button { font-family:var(--font-body); cursor:pointer; }
a { color:inherit; text-decoration:none; }

/* ---------- type helpers ---------- */
.eyebrow { font-family:var(--font-body); font-size:var(--text-eyebrow); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--amber-deep); }
.band-dark .eyebrow, .band-darker .eyebrow { color:var(--amber); }
.band-amber .eyebrow { color:#1B1714; opacity:.66; }
.display { font-family:var(--font-hero); font-optical-sizing:auto; font-size:var(--text-display);
  font-weight:600; line-height:1.04; letter-spacing:-.01em; margin:0; }
h1,.h1 { font-family:var(--font-hero); font-size:var(--text-h1); font-weight:600; line-height:1.05; letter-spacing:-.01em; margin:0; }
h2,.h2 { font-family:var(--font-hero); font-size:var(--text-h2); font-weight:600; line-height:1.1; letter-spacing:-.005em; margin:0; }
h3,.h3 { font-family:var(--font-hero); font-size:var(--text-h3); font-weight:500; line-height:1.2; margin:0; }
.lead { font-family:var(--font-body); font-size:var(--text-lead); font-weight:400; line-height:1.5; color:var(--fg-2); }
.band-dark .lead, .band-darker .lead { color:var(--on-dark-2); }
.body { font-family:var(--font-body); font-size:var(--text-body); line-height:1.6; color:var(--fg-2); }
.small { font-family:var(--font-body); font-size:var(--text-small); line-height:1.5; }
.figure { font-family:var(--font-display); font-optical-sizing:auto; font-size:var(--text-figure);
  font-weight:600; line-height:.92; letter-spacing:-.02em; color:var(--amber); }
.serif { font-family:var(--font-display); }
.amber { color:var(--amber); }

/* font tweak: display tier -> serif */
body[data-font="serif"] .display,
body[data-font="serif"] h1, body[data-font="serif"] h2, body[data-font="serif"] h3 {
  font-family:var(--font-display); letter-spacing:-.01em;
}

/* ---------- bands ---------- */
.band { position:relative; width:100%; overflow:hidden; }
.band-dark  { background:var(--espresso); color:var(--on-dark-1); }
.band-darker{ background:var(--espresso-900); color:var(--on-dark-1); }
.band-light { background:var(--crema); color:var(--fg-1); }
.band-alt   { background:var(--crema-200); color:var(--fg-1); }
.band-amber { background:var(--amber); color:#1B1714; }
.wrap { max-width:1240px; margin:0 auto; padding:0 40px; position:relative; z-index:1; }
.pad  { padding-top:var(--sp-8); padding-bottom:var(--sp-8); }
.pad-sm { padding-top:var(--sp-6); padding-bottom:var(--sp-6); }

.grain::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(27,23,20,.05) 0.5px,transparent 0.5px); background-size:4px 4px; }
.glow::after { content:""; position:absolute; pointer-events:none; z-index:0;
  width:760px; height:760px; right:-180px; top:-220px; border-radius:50%;
  background:radial-gradient(circle,rgba(201,136,42,0.22),rgba(201,136,42,0) 62%); }
.glow-bl::after { right:auto; left:-220px; top:auto; bottom:-260px; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:15px; border-radius:4px; padding:14px 28px;
  border:1.5px solid transparent; min-height:48px; white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn:active { transform:translateY(1px); }
.btn svg { width:18px; height:18px; }
.btn-amber { background:var(--amber); color:#1B1714; border-color:var(--amber); }
.btn-amber:hover { background:var(--amber-bright); border-color:var(--amber-bright); }
.btn-ghost { background:transparent; color:var(--fg-1); border-color:var(--crema-400); }
.btn-ghost:hover { color:var(--amber-deep); border-color:var(--amber-deep); }
.btn-ghost-d { background:transparent; color:var(--on-dark-1); border-color:var(--espresso-500); }
.btn-ghost-d:hover { color:var(--amber); border-color:var(--amber); }
.btn-dark { background:#1B1714; color:var(--on-dark-1); border-color:#1B1714; }
.btn-dark:hover { background:#000; }

/* ---------- chips ---------- */
.chip { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500;
  border-radius:8px; padding:9px 14px; border:1px solid var(--crema-300);
  background:var(--crema-50); color:var(--fg-1); }
.chip svg { width:15px; height:15px; color:var(--amber-deep); }
.band-dark .chip, .band-darker .chip { background:var(--espresso-700); border-color:var(--espresso-600); color:var(--on-dark-1); }
.band-dark .chip svg, .band-darker .chip svg { color:var(--amber); }
.band-amber .chip { background:rgba(27,23,20,.06); border-color:rgba(27,23,20,.2); color:#1B1714; }
.band-amber .chip svg { color:#1B1714; }
.chip-row { display:flex; flex-wrap:wrap; gap:10px; }
.chip-dot { width:7px; height:7px; border-radius:50%; background:var(--amber); display:inline-block; }

/* ---------- nav ---------- */
.nav { position:sticky; top:0; z-index:50; width:100%;
  background:rgba(20,16,13,.72); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--espresso-600); }
.nav-inner { max-width:1240px; margin:0 auto; padding:0 40px; height:74px; display:flex; align-items:center; gap:28px; }
.nav-logo { height:26px; }
.nav-links { display:flex; gap:26px; margin-left:18px; }
.nav-links a { font-size:14px; font-weight:500; color:var(--on-dark-2); transition:color var(--dur) var(--ease); }
.nav-links a:hover { color:var(--amber); }
.nav-spacer { flex:1; }
.nav-toggle { display:none; align-items:center; justify-content:center; width:44px; height:44px;
  background:transparent; border:none; padding:0; margin-left:6px; -webkit-tap-highlight-color:transparent; }
.nav-mobile { display:none; }
@media (max-width:980px){
  .nav-links{ display:none; }
  .nav-cta-d{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-spacer{ flex:1; }
  .nav-mobile{ display:flex; flex-direction:column; gap:6px;
    position:fixed; left:0; right:0; top:74px; z-index:49;
    max-height:0; overflow:hidden; padding:0 22px;
    background:rgba(20,16,13,.97); backdrop-filter:blur(14px) saturate(1.2);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
    border-bottom:1px solid var(--espresso-600);
    transition:max-height var(--dur) var(--ease), padding var(--dur) var(--ease), opacity var(--dur) var(--ease);
    opacity:0; }
  .nav-open .nav-mobile{ max-height:calc(100vh - 74px); opacity:1; padding:14px 22px 24px; overflow:auto; }
  .nav-mobile-links{ display:flex; flex-direction:column; }
  .nav-mobile-links a{ font-family:var(--font-body); font-size:18px; font-weight:500; color:var(--on-dark-1);
    padding:15px 4px; border-bottom:1px solid var(--espresso-600); transition:color var(--dur) var(--ease); }
  .nav-mobile-links a:hover, .nav-mobile-links a:active{ color:var(--amber); }
  .nav-mobile-cta{ margin-top:18px; width:100%; }
}

/* ---------- section head ---------- */
.section-head { max-width:680px; }
.section-head h2 { margin:14px 0 0; }
.section-head .lead { margin-top:16px; }
.center { text-align:center; margin-left:auto; margin-right:auto; }

/* ---------- grids ---------- */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:980px){ .grid-3,.grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .grid-3,.grid-2,.grid-4{ grid-template-columns:1fr; } .wrap{ padding:0 22px; } .nav-inner{ padding:0 22px; } }

.divider-v { width:1px; align-self:stretch; background:var(--border-dark); }
.band-light .divider-v, .band-alt .divider-v { background:var(--border-light); }

/* ---------- fade-up ---------- */
.fade-up { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.fade-up.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .fade-up{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ---------- real photo ---------- */
.img { position:relative; border-radius:var(--r-lg); overflow:hidden; background:#14100D; }
.img img { width:100%; height:100%; object-fit:cover; display:block; }
.img .cap { position:absolute; left:18px; bottom:14px; right:18px; color:var(--on-dark-2);
  font-size:12.5px; letter-spacing:.02em; z-index:2; }
.img .scrim-b { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg,rgba(20,16,13,.6) 0%,rgba(20,16,13,0) 40%); }

/* photo placeholder (for shots we don't have) */
.photo { position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(135deg,#241c16,#0f0b09); display:flex; align-items:center; justify-content:center; }
.photo.light-ph { background:linear-gradient(135deg,#e6d8c3,#cdb89a); }
.photo .ph-inner { display:flex; flex-direction:column; align-items:center; gap:10px; color:rgba(244,237,227,.55); text-align:center; padding:20px; }
.photo.light-ph .ph-inner { color:rgba(27,23,20,.42); }
.photo .ph-inner svg { width:30px; height:30px; }
.photo .ph-inner span { font-size:12px; letter-spacing:.04em; max-width:220px; line-height:1.4; }
.photo .photo-img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* ============================================================
   HERO  — three treatments via body[data-hero]
   ============================================================ */
.hero { position:relative; min-height:calc(100vh - 74px); display:flex; align-items:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(15,11,9,.92) 0%,rgba(15,11,9,.74) 38%,rgba(15,11,9,.2) 72%,rgba(15,11,9,.5) 100%); }
.hero .wrap { z-index:2; width:100%; }
.hero-copy { max-width:660px; }
.hero-photo-card { display:none; }

/* default = "photo" (full-bleed) — already styled above */

/* "split" — photo lives in a right card, dark solid background */
body[data-hero="split"] .hero-bg { display:none; }
body[data-hero="split"] .hero-scrim { display:none; }
body[data-hero="split"] .hero { background:var(--espresso); }
body[data-hero="split"] .hero .wrap { display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:center; }
body[data-hero="split"] .hero-photo-card { display:block; border-radius:var(--r-lg); overflow:hidden;
  height:560px; box-shadow:var(--shadow-amber); }
body[data-hero="split"] .hero-photo-card img { width:100%; height:100%; object-fit:cover; }
body[data-hero="split"] .hero-copy { max-width:none; }
@media (max-width:980px){ body[data-hero="split"] .hero .wrap{ grid-template-columns:1fr; }
  body[data-hero="split"] .hero-photo-card{ height:340px; } }

/* "minimal" — solid espresso, centered, icon-tile mark, no photo */
body[data-hero="minimal"] .hero-bg { display:none; }
body[data-hero="minimal"] .hero-scrim { display:none; }
body[data-hero="minimal"] .hero { background:var(--espresso); }
body[data-hero="minimal"] .hero::after { content:""; position:absolute; z-index:0; width:900px; height:900px;
  left:50%; top:40%; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle,rgba(201,136,42,.18),rgba(201,136,42,0) 62%); }
body[data-hero="minimal"] .hero .wrap { display:flex; flex-direction:column; align-items:center; text-align:center; }
body[data-hero="minimal"] .hero-copy { max-width:780px; align-items:center; display:flex; flex-direction:column; }
body[data-hero="minimal"] .hero-mark { display:block; }
body[data-hero="minimal"] .hero-chips, body[data-hero="minimal"] .hero-cta { justify-content:center; }
.hero-mark { display:none; }

/* ============================================================
   PILLARS (experience)
   ============================================================ */
.pillar { background:var(--crema-50); border:1px solid var(--crema-300); border-radius:14px; padding:30px 28px;
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pillar:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pillar .pk { font-family:var(--font-display); font-weight:600; font-size:30px; color:var(--amber-deep); }
.pillar h3 { margin:14px 0 8px; }
.pillar p { margin:0; color:var(--fg-2); font-size:16px; line-height:1.6; }

/* ============================================================
   STEPS (how it works)
   ============================================================ */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
@media (max-width:980px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .steps{ grid-template-columns:1fr; } }
.step .num { font-family:var(--font-display); font-weight:600; font-size:26px; color:var(--amber-deep); }
.band-dark .step .num { color:var(--amber); }
.step .rule { height:1px; background:var(--border-light); margin:16px 0 18px; }
.band-dark .step .rule { background:var(--border-dark); }
.step .si { display:flex; align-items:center; gap:12px; }
.step h3 { margin:0; font-family:var(--font-display); font-size:22px; font-weight:600; }
.step p { margin:10px 0 0; color:var(--fg-2); font-size:15.5px; line-height:1.6; }
.band-dark .step p { color:var(--on-dark-2); }

/* ============================================================
   MENU CARDS (the coffee)
   ============================================================ */
.menu-card { background:var(--crema-50); border:1px solid var(--crema-300); border-radius:14px; padding:18px 20px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px; box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur) var(--ease); }
.menu-card:hover { box-shadow:var(--shadow-md); }
.menu-card .mn { font-family:var(--font-display); font-weight:600; font-size:21px; color:var(--fg-1); }
.menu-card .mo { font-size:13px; color:var(--fg-3); margin-top:3px; }
.menu-card .mp { font-family:var(--font-display); font-weight:600; font-size:21px; color:var(--amber-deep); white-space:nowrap; }

/* ============================================================
   MACHINE spec
   ============================================================ */
.spec { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.spec .cell { padding:20px 26px; border-bottom:1px solid var(--border-dark); }
.spec .cell:nth-child(odd) { padding-left:0; }
.spec .cell:nth-child(even) { border-left:1px solid var(--border-dark); }
.spec .cell .sv { font-family:var(--font-display); font-weight:600; font-size:34px; color:var(--amber); }
.spec .cell .sl { font-size:14px; color:var(--on-dark-2); margin-top:4px; }

/* ============================================================
   FIND A KIOSK (consumer locator)
   ============================================================ */
.loc-tabs { display:flex; gap:10px; flex-wrap:wrap; }
.loc-tab { font-family:var(--font-body); font-size:14px; font-weight:600; padding:10px 18px; border-radius:999px;
  border:1px solid var(--crema-300); background:var(--crema-50); color:var(--fg-2);
  transition:all var(--dur) var(--ease); }
.loc-tab:hover { border-color:var(--amber-deep); color:var(--amber-deep); }
.loc-tab.on { background:var(--espresso); color:var(--on-dark-1); border-color:var(--espresso); }
.loc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .loc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .loc-grid{ grid-template-columns:1fr; } }
.loc-card { background:var(--crema-50); border:1px solid var(--crema-300); border-radius:14px; padding:22px 22px;
  display:flex; flex-direction:column; gap:10px; min-height:152px; transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.loc-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.loc-card .lc-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.loc-card .lc-city { font-family:var(--font-display); font-weight:600; font-size:22px; }
.loc-card .lc-where { font-size:14.5px; color:var(--fg-2); line-height:1.5; }
.loc-card .lc-meta { font-size:13px; color:var(--fg-3); margin-top:auto; }
.loc-card .lc-link { color:var(--amber-deep); font-weight:600; text-decoration:none;
  transition:color var(--dur) var(--ease); }
.loc-card .lc-link:hover { text-decoration:underline; }
.status { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.status .d { width:7px; height:7px; border-radius:50%; }
.status.live { background:rgba(31,138,91,.12); color:#1F8A5B; }
.status.live .d { background:#1F8A5B; }
.status.soon { background:var(--amber-soft); color:var(--amber-deep); }
.status.soon .d { background:var(--amber); }
.status.planned { background:rgba(27,23,20,.06); color:var(--fg-3); }
.status.planned .d { background:var(--fg-3); }

/* ============================================================
   ECONOMICS / CALCULATOR
   ============================================================ */
.lockups { display:flex; gap:0; align-items:stretch; }
.lockup { padding:0 40px; display:flex; flex-direction:column; justify-content:center; gap:8px; }
.lockup:first-child { padding-left:0; }
.lockup + .lockup { border-left:1px solid var(--border-dark); }
.lockup .lf { font-family:var(--font-display); font-weight:600; font-size:clamp(3rem,6vw,5rem); line-height:.9;
  letter-spacing:-.02em; color:var(--amber); }
.lockup .lc { font-size:15px; color:var(--on-dark-2); max-width:15ch; }

.calc { background:var(--espresso-700); border:1px solid var(--espresso-600); border-radius:var(--r-lg);
  padding:34px 34px 30px; }
.calc .crow { margin-bottom:26px; }
.calc .clabel { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.calc .clabel .cl { font-size:14px; font-weight:600; color:var(--on-dark-2); letter-spacing:.02em; }
.calc .clabel .cv { font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--on-dark-1); }
.calc input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:999px;
  background:var(--espresso-500); outline:none; }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
  width:24px; height:24px; border-radius:50%; background:var(--amber); cursor:pointer;
  border:3px solid var(--espresso-700); box-shadow:0 2px 6px rgba(0,0,0,.4); transition:background var(--dur) var(--ease); }
.calc input[type="range"]::-webkit-slider-thumb:hover { background:var(--amber-bright); }
.calc input[type="range"]::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--amber);
  cursor:pointer; border:3px solid var(--espresso-700); }
.calc .ticks { display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:var(--on-dark-3); }
.calc .result { border-top:1px solid var(--espresso-600); margin-top:6px; padding-top:24px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.calc .result .big { font-family:var(--font-display); font-weight:600; font-size:clamp(3.2rem,6vw,4.6rem);
  line-height:.9; color:var(--amber); letter-spacing:-.02em; }
.calc .result .rlabel { font-size:13px; color:var(--on-dark-3); margin-top:8px; }
.calc .result .sub { text-align:right; }
.calc .result .sub .sv { font-family:var(--font-display); font-weight:600; font-size:26px; color:var(--on-dark-1); }
.calc .result .sub .sl { font-size:13px; color:var(--on-dark-3); }

/* ============================================================
   TRACTION
   ============================================================ */
.trax { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
@media (max-width:980px){ .trax{ grid-template-columns:1fr 1fr; row-gap:36px; } }
@media (max-width:680px){ .trax{ grid-template-columns:1fr; } }
.trax .tcell { padding:0 30px; }
.trax .tcell:first-child { padding-left:0; }
.trax .tcell + .tcell { border-left:1px solid var(--border-light); }
@media (max-width:980px){ .trax .tcell{ border-left:none !important; padding-left:0; padding-right:24px; } }
.trax .tk { font-family:var(--font-display); font-weight:600; font-size:22px; margin:16px 0 8px; }
.trax .tk-link { color:inherit; text-decoration:none; transition:color var(--dur) var(--ease); }
.trax .tk-link:hover { color:var(--amber-deep); }
.trax .tv { color:var(--fg-2); font-size:15.5px; line-height:1.6; }

/* ---------- where to place ---------- */
.place-card { position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1/1.08; box-shadow:var(--shadow-md); }
.place-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.place-card .pscrim { position:absolute; inset:0; background:linear-gradient(0deg,rgba(20,16,13,.86) 0%,rgba(20,16,13,.12) 54%,rgba(20,16,13,0) 100%); }
.place-card .ptxt { position:absolute; left:24px; right:24px; bottom:22px; color:var(--crema); z-index:2; }
.place-card .ptxt h3 { font-family:var(--font-display); font-size:26px; font-weight:600; margin:0 0 6px; }
.place-card .ptxt p { font-size:14px; line-height:1.45; color:var(--on-dark-2); margin:0; }

/* ---------- form ---------- */
.form-card { background:var(--crema-50); border-radius:14px; padding:30px 30px 26px; box-shadow:var(--shadow-md); }
.field label { font-family:var(--font-body); font-size:13px; font-weight:600; color:#1B1714; margin-bottom:6px; display:block; }
.field input, .field select, .field textarea { font-family:var(--font-body); font-size:15px; color:#1B1714;
  background:rgba(255,255,255,.6); border:1.5px solid rgba(27,23,20,.22); border-radius:4px; padding:13px 15px;
  outline:none; width:100%; transition:border-color var(--dur) var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--amber-deep); }
.field textarea { resize:vertical; min-height:70px; }
.field .err { color:#B23B2E; font-size:12px; margin-top:5px; display:block; }
.field input.invalid, .field select.invalid { border-color:#B23B2E; }

/* ---------- footer ---------- */
.foot-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:880px){ .foot-grid{ grid-template-columns:1fr 1fr; row-gap:36px; } }
.foot-col .fh { font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-dark-2); }
.foot-col .fl { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.foot-col .fl a { font-size:14px; color:var(--on-dark-3); transition:color var(--dur) var(--ease); }
.foot-col .fl a:hover { color:var(--amber); }

/* ---------- economics mode (calc vs static) ---------- */
.econ-static { display:none; }
body[data-econ="static"] .econ-calc { display:none; }
body[data-econ="static"] .econ-static { display:block; }

/* ---------- section header alignment (tweak) ---------- */
body[data-head="center"] .band-light .section-head,
body[data-head="center"] .band-alt .section-head {
  margin-left:auto; margin-right:auto; text-align:center;
}
body[data-head="center"] .band-light .section-head .lead,
body[data-head="center"] .band-alt .section-head .lead { margin-left:auto; margin-right:auto; }

/* ---------- responsive two-col collapses ---------- */
@media (max-width:980px){
  .coffee-grid, .machine-grid, .econ-grid, .form-grid { grid-template-columns:1fr !important; }
  .machine-grid { gap:36px !important; }
  .econ-grid, .form-grid, .coffee-grid { gap:40px !important; }
}
@media (max-width:560px){
  .menu-grid, .form-row, .spec { grid-template-columns:1fr !important; }
  .spec .cell { padding-left:0 !important; border-left:none !important; }
  .lockups { flex-direction:column; gap:24px; }
  .lockup { padding:0 !important; }
  .lockup + .lockup { border-left:none; border-top:1px solid var(--border-dark); padding-top:24px !important; }
}

/* ---------- mobile spacing + density ---------- */
@media (max-width:768px){
  .pad { padding-top:var(--sp-6); padding-bottom:var(--sp-6); }
  .wrap { padding:0 22px; }
  .hero { min-height:auto; padding-top:64px; padding-bottom:64px; }
  .hero-scrim { background:linear-gradient(0deg,rgba(15,11,9,.94) 0%,rgba(15,11,9,.6) 60%,rgba(15,11,9,.5) 100%); }
  .hero-mark { height:60px !important; width:60px !important; margin-bottom:22px !important; }
  .calc { padding:24px 22px 22px; }
  .form-card { padding:24px 22px 22px; }
  .hero-cta .btn, .nav-mobile-cta { width:100%; }
  .hero-cta { width:100%; }
}
@media (max-width:560px){
  .calc .result { flex-direction:column; align-items:flex-start; gap:18px; }
  .calc .result .sub { text-align:left; }
  .pillar { padding:24px 22px; }
}

/* ============================================================
   MOTION — "bring the photography to life"
   All continuous motion is gated behind (prefers-reduced-motion: no-preference)
   ============================================================ */

/* scroll progress bar */
.scroll-progress { position:fixed; top:0; left:0; height:2px; width:100%; z-index:60;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--amber-deep),var(--amber),var(--amber-bright));
  box-shadow:0 0 12px rgba(201,136,42,.6); pointer-events:none; }

/* nav condenses + darkens once you leave the hero */
.nav { transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.nav-inner { transition:height var(--dur) var(--ease); }
.nav.scrolled { background:rgba(16,12,10,.92); border-bottom-color:var(--espresso-500); }
.nav.scrolled .nav-inner { height:62px; }
.nav-logo { transition:height var(--dur) var(--ease); }
.nav.scrolled .nav-logo { height:23px; }

@media (prefers-reduced-motion: no-preference){

  /* --- Ken Burns: slow living drift on full-bleed photography --- */
  @keyframes kenburns-a {
    0%   { transform:scale(1.06) translate3d(0,0,0); }
    100% { transform:scale(1.16) translate3d(-2.2%,-1.6%,0); }
  }
  @keyframes kenburns-b {
    0%   { transform:scale(1.07) translate3d(0,0,0); }
    100% { transform:scale(1.15) translate3d(2%,-1.4%,0); }
  }
  @keyframes kenburns-c {
    0%   { transform:scale(1.05) translate3d(0,0,0); }
    100% { transform:scale(1.13) translate3d(1.6%,1.8%,0); }
  }

  .hero-bg img { animation:kenburns-a 30s var(--ease) infinite alternate; will-change:transform; }
  .photo .photo-img.kb { animation:kenburns-c 34s var(--ease) infinite alternate; will-change:transform; }
  .kb-soft { animation:kenburns-b 32s var(--ease) infinite alternate; will-change:transform; }
  .place-card img { animation:kenburns-a 36s var(--ease) infinite alternate; will-change:transform; }
  .place-card:nth-child(2n) img { animation-name:kenburns-b; animation-duration:40s; }
  .place-card:nth-child(3n) img { animation-name:kenburns-c; animation-duration:44s; }

  /* --- breathing amber glow on dark bands --- */
  @keyframes glow-breathe {
    0%   { opacity:.7;  transform:scale(.96); }
    100% { opacity:1;   transform:scale(1.08); }
  }
  .glow::after { animation:glow-breathe 9s ease-in-out infinite alternate; will-change:opacity,transform; }
  .glow-bl::after { animation-duration:11s; animation-delay:-3s; }

  /* --- hero icon mark gentle float --- */
  @keyframes mark-float { 0%{ transform:translateY(0); } 100%{ transform:translateY(-7px); } }
  .hero-mark { animation:mark-float 4.5s ease-in-out infinite alternate; }

  /* --- kiosk render: amber halo pulse --- */
  @keyframes halo-pulse {
    0%   { box-shadow:0 24px 60px -28px rgba(201,136,42,.45), 0 0 0 rgba(201,136,42,0); }
    100% { box-shadow:0 24px 80px -24px rgba(201,136,42,.75), 0 0 64px -12px rgba(201,136,42,.35); }
  }
  .halo-pulse { animation:halo-pulse 6s ease-in-out infinite alternate; }
}

/* parallax: img sits taller than frame so it can travel without gaps */
.hero-bg { will-change:transform; }
.hero-bg img { position:absolute; left:0; top:-14%; width:100%; height:128%; object-fit:cover; }
.parallax { will-change:transform; }

/* --- hand-drawn underline that draws itself under the amber hero word --- */
.amber-underline { position:relative; white-space:nowrap; }
.amber-underline::after { content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.09em;
  background:var(--amber); border-radius:2px; transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1s var(--ease) .55s; }
.amber-underline.drawn::after { transform:scaleX(1); }

/* --- figure reveal: amber numerals rise + blur-in when scrolled to --- */
.fig-reveal { opacity:0; transform:translateY(12px); filter:blur(6px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.fig-reveal.in { opacity:1; transform:none; filter:none; }

/* --- richer image reveal for fade-up cards holding photography --- */
.place-card.fade-up { transform:translateY(26px) scale(.985); clip-path:inset(0 0 0 0 round var(--r-lg)); }
.place-card.fade-up.in { transform:none scale(1); }

/* --- place card hover: lift + lighten the live photo --- */
.place-card { transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.place-card img { transition:filter var(--dur) var(--ease); }
.place-card:hover { transform:translateY(-4px); }
.place-card:hover img { filter:brightness(1.08) saturate(1.06); }

/* --- button arrow nudges on hover --- */
.btn svg { transition:transform var(--dur) var(--ease); }
.btn:hover svg { transform:translateX(3px); }

@media (prefers-reduced-motion:reduce){
  .scroll-progress { display:none; }
  .amber-underline.drawn::after { transform:scaleX(1); transition:none; }
  .fig-reveal { opacity:1; transform:none; filter:none; transition:none; }
}

/* ---------- tweaks mount ---------- */
#tweaks-root { position:fixed; inset:0; pointer-events:none; z-index:2147483000; }
#tweaks-root > * { pointer-events:auto; }