/* Jalisco's Mexican Restaurant x Brandcore
   A presentation drawn from the restaurant's own mark: oxblood, agave gold,
   crema and espresso. Type scales fluidly with the viewport so body copy
   stays at reading size from a 360px phone to a 2096px display. */

:root {
  --oxblood: #600d09;
  --wine: #8a1b10;
  --gold: #e2a049;
  --gold-soft: #edcb8e;
  --bronze: #6e420a;

  --crema: #fbf5ec;
  --crema-card: #fffbf5;
  --ink: #23130e;
  --ink-soft: #4b3830;
  --rule-light: rgba(110, 66, 10, 0.24);

  --espresso: #1a0e0a;
  --espresso-card: #25140f;
  --espresso-lift: #2e1912;
  --cream: #fbf3e7;
  --cream-soft: #e2d3c1;
  --rule-dark: rgba(226, 160, 73, 0.3);

  --serif: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --u: min(1vw, 1.7778vh);

  --body: clamp(16px, 1.55vh + 0.3vw, 22px);
  --body-sm: max(16px, calc(var(--body) * 0.92));
  --label: clamp(13px, 0.55vh + 0.25vw, 15px);
  --h3: clamp(19px, 2.1vh + 0.2vw, 26px);
  --h2: clamp(27px, 3.6vh + 0.4vw, 44px);
  --h1: clamp(38px, 5.4vh + 0.6vw, 66px);

  --gap: clamp(14px, 1.8vh, 26px);
  --pad-x: clamp(24px, 4vw, 72px);
  --pad-top: clamp(20px, 3.2vh, 40px);
  --pad-bottom: clamp(84px, 9vh, 108px);
  --radius: clamp(10px, 1.2vh, 16px);
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  height: 100%;
  background: var(--espresso);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 0.1em 0.36em;
  border-radius: 0.3em;
  background: rgba(96, 13, 9, 0.08);
  color: var(--oxblood);
  white-space: nowrap;
}

.ui-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.14em;
}

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- Stage ---------- */

#deck {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(226, 160, 73, 0.55) transparent;
}

#deck::-webkit-scrollbar { width: 10px; }
#deck::-webkit-scrollbar-thumb { background: rgba(226, 160, 73, 0.55); border-radius: 999px; }

.slide {
  display: none;
  position: relative;
  width: 100%;
  min-height: 100dvh;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  grid-template-rows: auto 1fr auto;
  row-gap: clamp(12px, 1.8vh, 24px);
  overflow: visible;
}

.slide.active { display: grid; }

.theme-light {
  background:
    radial-gradient(120% 90% at 0% 0%, #fffaf2 0%, rgba(255, 250, 242, 0) 62%),
    var(--crema);
  color: var(--ink);
}

.theme-dark {
  background:
    radial-gradient(90% 80% at 0% 0%, #2c150e 0%, rgba(44, 21, 14, 0) 65%),
    radial-gradient(70% 70% at 100% 100%, #241009 0%, rgba(36, 16, 9, 0) 70%),
    var(--espresso);
  color: var(--cream);
}

.slide-body { min-height: 0; }

/* ---------- Header / footer ---------- */

.slide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(8px, 1.1vh, 14px);
  border-bottom: 1px solid var(--rule-light);
}

.theme-dark .slide-head { border-bottom-color: var(--rule-dark); }

.brand-mark { height: clamp(38px, 5.2vh, 58px); width: auto; }

/* One co-brand lockup system: Jalisco's mark × Brandcore.io, on every slide. */
.head-lockup { display: flex; align-items: center; gap: clamp(10px, 1.1vw, 18px); min-width: 0; }
.head-x {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vh, 30px);
  line-height: 1;
  color: var(--gold);
}
.head-brandcore { height: clamp(18px, 2.7vh, 28px); width: auto; flex: none; }

.chapter {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
}

.chapter b {
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vh, 28px);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--wine);
}

.theme-dark .chapter { color: var(--cream-soft); }
.theme-dark .chapter b { color: var(--gold); }

.slide-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: clamp(8px, 1.2vh, 14px);
  border-top: 1px solid var(--rule-light);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.slide-foot span:last-child { white-space: nowrap; }

.theme-dark .slide-foot { border-top-color: var(--rule-dark); color: var(--cream-soft); }

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--h2);
  line-height: 1.04;
  text-wrap: balance;
  color: var(--ink);
}

h2 em { font-style: normal; color: var(--wine); }
.theme-dark h2 { color: var(--cream); }
.theme-dark h2 em { color: var(--gold); }

.kicker {
  margin-bottom: clamp(8px, 1.2vh, 14px);
  font-size: var(--label);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
}

.theme-dark .kicker { color: var(--gold); }

.lead {
  max-width: 60ch;
  font-size: var(--body);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.theme-dark .lead { color: var(--cream-soft); }

.source-line {
  margin-top: clamp(10px, 1.6vh, 18px);
  font-size: var(--label);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 72ch;
}

.theme-dark .source-line { color: var(--cream-soft); }

.nowrap { white-space: nowrap; }

/* ---------- Controls ---------- */

.controls {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(226, 160, 73, 0.55);
  border-radius: 999px;
  background: rgba(26, 14, 10, 0.96);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  color: var(--cream);
}

.controls button {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font-size: 19px;
  transition: background-color 0.18s;
}

.controls button:hover { background: rgba(226, 160, 73, 0.18); }

#counter {
  min-width: 4.4em;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

#play {
  border-left: 1px solid rgba(226, 160, 73, 0.35);
  border-radius: 0 999px 999px 0;
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* ---------- 01 · Cover ---------- */

.cover {
  padding: 0;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  grid-template-rows: 1fr;
  row-gap: 0;
  background: var(--crema);
}

.cover-copy {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding:
    clamp(24px, 4.5vh, 60px)
    var(--pad-x)
    clamp(80px, 9vh, 108px);
}

.cover-inner { width: 100%; max-width: 620px; }

.cover-collab {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: clamp(16px, 3vh, 34px);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bronze);
}

.brandcore-badge-logo { height: 22px; width: auto; }
.cover-collab-sep { color: var(--gold); font-size: 1.2em; }

.cover h1 {
  max-width: 13ch;
  font-size: var(--h1);
  line-height: 0.99;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.cover h1 em { font-style: normal; color: var(--wine); }

.cover .lead { margin-top: clamp(12px, 2vh, 22px); max-width: 44ch; }

.fact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(16px, 2.4vh, 28px);
}

.fact-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.95em;
  border: 1px solid rgba(110, 66, 10, 0.3);
  border-radius: 999px;
  background: var(--crema-card);
  font-size: var(--label);
  font-weight: 700;
  color: var(--ink);
}

.fact-chips .ui-icon { color: var(--wine); }
.fact-chips .chip-strong { border-color: var(--oxblood); background: var(--oxblood); color: var(--cream); }
.fact-chips .chip-strong .ui-icon { color: var(--gold-soft); }

.cover-prepared {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(16px, 2.6vh, 30px);
  font-size: var(--label);
  line-height: 1.45;
}

.cover-prepared img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 2px solid var(--gold);
}

.cover-prepared b { display: block; font-size: var(--body-sm); color: var(--ink); }
.cover-prepared span { display: block; color: var(--ink-soft); }

.cover-stage {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 80% at 68% 30%, #4a120c 0%, rgba(74, 18, 12, 0) 62%),
    radial-gradient(120% 90% at 20% 100%, #2a0b07 0%, rgba(42, 11, 7, 0) 70%),
    linear-gradient(150deg, #3b0d08 0%, #1a0a07 68%, #120705 100%);
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  touch-action: none;
}

.scene-fallback {
  display: none;
  position: absolute;
  inset: 8% 8% 20%;
  place-items: center;
}

.scene-fallback img {
  width: 76%;
  max-width: 560px;
  padding: 8% 7%;
  border: 2px solid var(--gold);
  border-radius: 12px;
  background: var(--crema);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  transform: perspective(1000px) rotateY(-10deg) rotateX(3deg);
}

.no-webgl .scene-fallback { display: grid; }
.no-webgl #scene { display: none; }
.no-webgl .stage-plate { display: none; }

.stage-plate {
  position: absolute;
  right: 1.2%;
  bottom: 9%;
  z-index: 2;
  width: clamp(190px, 14vw, 320px);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(226, 160, 73, 0.7);
  background: var(--espresso);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
  transform: rotate(-1.4deg);
}

.stage-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 56% 52%;
}

.stage-plate figcaption {
  display: flex;
  gap: 0.7em;
  padding: 0.7em 0.9em;
  font-size: var(--label);
  line-height: 1.35;
  color: var(--cream);
  background: var(--espresso);
}

.stage-plate figcaption b {
  display: block;
  font-size: 0.82em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.stage-hint {
  position: absolute;
  left: 5%;
  bottom: 20%;
  z-index: 2;
  max-width: 24ch;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 243, 231, 0.62);
}

/* ---------- Shared split layouts ---------- */

.split,
.kitchen-body {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(20px, 3vw, 52px);
  align-items: center;
  min-height: 0;
}

.intro-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(18px, 3vw, 48px);
  align-items: end;
}

.copy-col h2 { margin-bottom: clamp(10px, 1.6vh, 18px); }

/* ---------- 02 · Kitchen ---------- */

.kitchen-body { align-items: center; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(14px, 2.2vh, 26px) 0 clamp(10px, 1.6vh, 18px);
  padding: clamp(10px, 1.6vh, 18px) 0;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}

.stat-row dt {
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vh, 40px);
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
}

.stat-row dd {
  margin-top: 0.45em;
  font-size: var(--label);
  line-height: 1.4;
  color: var(--cream-soft);
}

.food-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  height: clamp(340px, calc(100dvh - 330px), 760px);
  min-height: 0;
}

.food-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(226, 160, 73, 0.34);
  background: var(--espresso-card);
  min-height: 0;
}

.food-tile img { width: 100%; height: 100%; object-fit: cover; }

.food-tile figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 1.6em 0.95em 0.8em;
  background: linear-gradient(to top, rgba(12, 5, 3, 0.92), rgba(12, 5, 3, 0));
  font-size: var(--label);
  color: var(--cream-soft);
}

.food-tile figcaption b {
  font-family: var(--serif);
  font-size: clamp(17px, 2vh, 23px);
  font-weight: 600;
  color: var(--cream);
}

/* ---------- 03 · Quick wins ---------- */

.journey-body {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: clamp(14px, 2.2vh, 28px);
  align-content: center;
}

.win-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  gap: clamp(12px, 1.4vw, 22px);
  align-items: stretch;
}

.win-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: clamp(8px, 1.2vh, 13px);
  padding: clamp(16px, 2.2vh, 26px);
  border: 1px solid rgba(110, 66, 10, 0.22);
  border-top: 3px solid var(--oxblood);
  border-radius: var(--radius);
  background: var(--crema-card);
  box-shadow: 0 12px 30px rgba(96, 13, 9, 0.06);
}

.win-num {
  font-family: var(--serif);
  font-size: clamp(24px, 3vh, 34px);
  font-weight: 600;
  line-height: 1;
  color: var(--wine);
}

.win-card h3 {
  font-size: var(--h3);
  line-height: 1.14;
  color: var(--ink);
}

.win-card p { font-size: var(--body-sm); line-height: 1.5; color: var(--ink-soft); }
.win-card b { color: var(--ink); }

.win-fix {
  margin-top: 0;
  padding-top: clamp(9px, 1.4vh, 15px);
  border-top: 1px solid var(--rule-light);
}

.win-fix span {
  display: block;
  margin-bottom: 0.35em;
  font-size: var(--label);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
}

.win-fix p { font-size: var(--body-sm); font-weight: 600; color: var(--ink); }

/* ---------- 04 · Concept site ---------- */

.concept-body {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  gap: clamp(18px, 2.6vw, 42px);
  align-items: center;
  min-height: 0;
}

.feature-list {
  display: grid;
  gap: clamp(10px, 1.5vh, 16px);
  margin-top: clamp(14px, 2vh, 22px);
}

.feature-list li {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: 0.7em;
  padding-top: clamp(9px, 1.4vh, 14px);
  border-top: 1px solid var(--rule-dark);
}

.feature-num {
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vh, 22px);
  color: var(--gold);
}

.feature-list h3 {
  font-family: var(--sans);
  font-size: max(17px, calc(var(--body) * 0.96));
  font-weight: 700;
  line-height: 1.25;
  color: var(--cream);
}

.feature-list p {
  margin-top: 0.25em;
  font-size: var(--body-sm);
  line-height: 1.45;
  color: var(--cream-soft);
}

.showcase { position: relative; min-width: 0; }

.browser-frame {
  container-type: inline-size;
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: #140a07;
  border: 1px solid rgba(226, 160, 73, 0.5);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}

.browser-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  background: #140a07;
  color: var(--cream-soft);
}

.chrome-dots { display: flex; gap: 5px; }
.chrome-dots i { width: 8px; height: 8px; border-radius: 50%; background: #e0574c; }
.chrome-dots i:nth-child(2) { background: #e4ae3c; }
.chrome-dots i:nth-child(3) { background: #3fb15b; }

.chrome-url {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  max-width: 330px;
  margin: 0 auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: #24140f;
  font-size: 12px;
  font-weight: 600;
  color: var(--cream-soft);
  white-space: nowrap;
  overflow: hidden;
}

.concept-tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(226, 160, 73, 0.2);
  color: var(--gold-soft);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.detail-toggle {
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid rgba(226, 160, 73, 0.5);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.detail-toggle:hover { background: rgba(226, 160, 73, 0.16); }

/* The concept is a real, interactive miniature site. */

.site-concept {
  position: relative;
  height: clamp(360px, 51vh, 560px);
  overflow: hidden;
  background: #fffaf2;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(12px, 2.1cqw, 18px);
  line-height: 1.4;
}

.c-head {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.8em 1.4em;
  border-bottom: 1px solid rgba(110, 66, 10, 0.18);
  background: #fffdf8;
}

.c-logo { height: 2.5em; width: auto; }

.c-nav { display: flex; gap: 0.2em; margin-left: auto; }

.c-tab {
  min-height: 2.4em;
  padding: 0.35em 0.75em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.82em;
  font-weight: 700;
}

.c-tab:hover { background: rgba(96, 13, 9, 0.07); }
.c-tab.is-on { background: var(--oxblood); color: var(--cream); }

.c-order {
  padding: 0.55em 0.9em;
  border-radius: 0.4em;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.75em;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.c-panel { height: calc(100% - 5.4em); overflow: hidden; }

.c-panel[hidden] { display: none !important; }

.c-panel[data-panel="menu"]:not([hidden]) { display: flex; flex-direction: column; }

.c-menu-body { flex: 1; min-height: 0; }

.c-hero {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  grid-template-rows: minmax(0, 1fr);
  height: 62%;
  min-height: 0;
  overflow: hidden;
  background: var(--crema);
}

.c-hero img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }

.c-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5em;
  padding: 1.4em 1.6em;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(226, 160, 73, 0.22), transparent 65%),
    var(--crema);
}

.c-eyebrow {
  font-size: 0.74em;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
}

.c-hero h3,
.c-menu-head h3,
.c-visit h3 {
  font-family: var(--serif);
  font-size: 1.9em;
  font-weight: 600;
  line-height: 1.02;
  color: var(--oxblood);
}

.c-open {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8em;
  font-weight: 700;
  color: #2f6b3b;
}

.c-open::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #3f9a52;
}

.c-actions { display: flex; flex-wrap: wrap; gap: 0.45em; margin-top: 0.3em; }

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  padding: 0.45em 0.85em;
  border-radius: 0.4em;
  background: var(--oxblood);
  color: var(--cream);
  font-size: 0.74em;
  font-weight: 700;
  text-decoration: none;
}

.c-btn-ghost { background: transparent; color: var(--oxblood); border: 1px solid rgba(96, 13, 9, 0.4); }

.c-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 38%;
  border-top: 1px solid rgba(110, 66, 10, 0.18);
}

.c-quick div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2em;
  padding: 0.8em 1.3em;
  border-right: 1px solid rgba(110, 66, 10, 0.14);
}

.c-quick div:last-child { border-right: 0; }
.c-quick b { font-family: var(--serif); font-size: 0.95em; color: var(--oxblood); }
.c-quick span { font-size: 0.78em; line-height: 1.35; color: var(--ink-soft); }

.c-menu-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1em;
  padding: 1.2em 1.5em 0.8em;
}

.c-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25em; max-width: 68%; }

.c-chip {
  min-height: 2.1em;
  padding: 0.3em 0.7em;
  border: 1px solid rgba(110, 66, 10, 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.74em;
  font-weight: 700;
}

.c-chip.is-on { background: var(--oxblood); border-color: var(--oxblood); color: var(--cream); }

.c-menu-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7em;
  padding: 0 1.5em 2.4em;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@container (max-width: 620px) {
  .c-menu-body { grid-template-columns: 1fr; }
}

.c-cat {
  padding: 1em 1.2em;
  border: 1px solid rgba(110, 66, 10, 0.2);
  border-radius: 0.5em;
  background: var(--crema);
}

.c-cat.is-current {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(226, 160, 73, 0.5);
}

.c-cat h4 { font-size: 1.3em; color: var(--oxblood); }
.c-cat p { margin-top: 0.4em; font-size: 0.86em; line-height: 1.55; color: var(--ink-soft); }
.c-cat .c-note { margin-top: 0.5em; font-size: 0.76em; font-weight: 700; color: var(--bronze); }

.c-visit {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1.4em;
  height: 100%;
  padding: 1.5em 1.6em 2.6em;
}

.c-visit h3 { margin: 0.35em 0 0.6em; font-size: 1.35em; line-height: 1.2; }
.c-hours { font-size: 0.86em; line-height: 1.6; color: var(--ink-soft); }
.c-hours b { color: var(--ink); }
.c-visit .c-actions { margin-top: 1em; }

.c-map {
  position: relative;
  overflow: hidden;
  border-radius: 0.5em;
  background:
    linear-gradient(115deg, #efe4d2 0 46%, #f7efe2 46% 100%),
    #f4ead9;
  border: 1px solid rgba(110, 66, 10, 0.2);
}

.c-map::before,
.c-map::after {
  content: "";
  position: absolute;
  background: rgba(110, 66, 10, 0.16);
}

.c-map::before { inset: 58% -10% auto -10%; height: 2.2em; transform: rotate(-8deg); }
.c-map::after { inset: -10% auto -10% 62%; width: 1.8em; transform: rotate(10deg); }

.c-map-pin {
  position: absolute;
  left: 52%;
  top: 38%;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50% 50% 50% 0;
  background: var(--oxblood);
  transform: rotate(-45deg);
  box-shadow: 0 0 0 0.35em rgba(96, 13, 9, 0.16);
}

.c-map-road {
  position: absolute;
  left: 0.9em;
  top: 62%;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bronze);
  transform: rotate(-8deg);
}

.c-map-label {
  position: absolute;
  right: 0.9em;
  bottom: 0.9em;
  padding: 0.35em 0.6em;
  border-radius: 0.3em;
  background: #fffdf8;
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oxblood);
}

.c-foot {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.5em 1.5em;
  border-top: 1px solid rgba(110, 66, 10, 0.18);
  background: #fffdf8;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.c-live { color: var(--bronze); }

/* Phone mockup */

.phone {
  position: absolute;
  left: -2.5%;
  bottom: -34px;
  z-index: 3;
  width: 19%;
  max-width: 170px;
  aspect-ratio: 9 / 18.5;
  padding: 7px;
  border-radius: 26px;
  background: #120705;
  border: 1px solid rgba(226, 160, 73, 0.6);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55);
  transition: opacity 0.24s ease, visibility 0.24s ease;
}

.phone.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.phone::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 6px;
  border-radius: 999px;
  background: #2b1712;
  z-index: 2;
}

.phone-screen {
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #fffaf2;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 1.5em 0.8em 0.7em;
  font-size: clamp(6px, 0.72vw, 9px);
}

.p-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.p-head img { height: 2.6em; width: auto; }
.p-burger { width: 1.6em; height: 0.9em; border-top: 0.18em solid var(--ink); border-bottom: 0.18em solid var(--ink); }

.p-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.1em;
  padding: 2.6em 0.8em 0.7em;
  border-radius: 0.5em;
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  color: var(--cream);
  background:
    radial-gradient(90% 80% at 20% 0%, #7d1710 0%, rgba(125, 23, 16, 0) 65%),
    linear-gradient(150deg, #4a0d08, #1a0705);
}

.p-hero-logo { position: absolute; top: 0.55em; left: 0.7em; height: 1.7em; width: auto; }
.p-eyebrow { display: block; font-size: 0.58em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-soft); }
.p-hero strong { display: block; font-family: var(--serif); font-size: 1.2em; color: var(--cream); }

.p-open { font-size: 0.66em; font-weight: 700; color: #2f6b3b; }
.p-actions { display: grid; gap: 0.35em; }
.p-btn { display: grid; place-items: center; min-height: 2.3em; border-radius: 0.35em; background: var(--oxblood); color: var(--cream); font-size: 0.72em; font-weight: 700; text-decoration: none; }
.p-btn-ghost { background: transparent; border: 1px solid rgba(96, 13, 9, 0.35); color: var(--oxblood); }
.p-info { display: flex; flex-direction: column; gap: 0.1em; padding-top: 0.35em; border-top: 1px solid rgba(110, 66, 10, 0.18); font-size: 0.62em; color: var(--ink-soft); }
.p-info b { color: var(--oxblood); }
.p-nav { display: flex; justify-content: space-between; gap: 0.3em; margin-top: auto; padding-top: 0.4em; border-top: 1px solid rgba(110, 66, 10, 0.18); font-size: 0.62em; font-weight: 800; color: var(--bronze); }

/* On the desktop stage the phone overlaps the browser's lower-left corner, so
   the strip and footer text start clear of it rather than hiding behind it. */
@media screen and (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .c-panel[data-panel="inicio"] .c-quick div:first-child { padding-left: 15cqw; }
  .c-foot span:first-child { padding-left: 14cqw; }
}

.showcase-close { display: none; }

/* Expanded readable concept */

.concept.detail-open { overflow: visible; }

.slide.concept.detail-open { z-index: 80; }
.slide.concept.detail-open .slide-head,
.slide.concept.detail-open .slide-foot,
.slide.concept.detail-open .copy-col { visibility: hidden; }

.slide.concept.detail-open .concept-body { display: block; }

.slide.concept.detail-open .showcase {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 2.4vh 2.4vw 9vh;
  background: rgba(10, 4, 2, 0.94);
}

.slide.concept.detail-open .browser-frame { width: min(1180px, 95vw); }

.slide.concept.detail-open .site-concept {
  height: min(70vh, 640px);
  font-size: clamp(15px, 0.95vw, 19px);
}

.slide.concept.detail-open .c-panel { overflow-y: auto; }

.slide.concept.detail-open .phone { display: none; }

/* Expanded view on a desktop: browser and a legible phone side by side. */
@media screen and (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .slide.concept.detail-open .showcase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.4vw, 40px);
  }

  .slide.concept.detail-open .browser-frame { width: min(900px, 64vw); flex: 0 1 auto; }

  .slide.concept.detail-open .phone {
    display: block;
    position: relative;
    left: auto;
    bottom: auto;
    flex: none;
    width: auto;
    max-width: none;
    height: min(66vh, 600px);
    z-index: 1;
  }

  .slide.concept.detail-open .c-panel[data-panel="inicio"] .c-quick div:first-child { padding-left: 1.3em; }
  .slide.concept.detail-open .c-foot span:first-child { padding-left: 0; }

  .slide.concept.detail-open .phone-screen { font-size: 14px; padding: 1.9em 0.9em 0.8em; gap: 0.5em; }
  .slide.concept.detail-open .p-eyebrow { font-size: 11px; }
  .slide.concept.detail-open .p-open { font-size: 12.5px; }
  .slide.concept.detail-open .p-btn { font-size: 13px; }
  .slide.concept.detail-open .p-info { font-size: 12px; line-height: 1.4; }
  .slide.concept.detail-open .p-nav { font-size: 12px; }
  .slide.concept.detail-open .p-hero strong { font-size: 17px; }
}

.slide.concept.detail-open .showcase-close {
  display: block;
  position: absolute;
  top: 2vh;
  right: 2.4vw;
  min-height: 44px;
  padding: 0.6em 1.1em;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--espresso);
  color: var(--cream);
  font-size: 14px;
  font-weight: 700;
}

@media screen and (max-width: 600px) {
  .slide.concept.detail-open .showcase-close {
    top: auto;
    bottom: 2vh;
    right: 50%;
    transform: translateX(50%);
    min-height: 40px;
    font-size: 13px;
  }
}

.slide.concept.detail-open .detail-toggle { background: var(--gold); border-color: var(--gold); color: var(--espresso); }

/* ---------- 05 · Proof ---------- */

.proof-body {
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(12px, 1.8vh, 22px);
  align-content: center;
}

.comparison {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
  gap: clamp(20px, 3vw, 52px);
  align-items: center;
  min-height: 0;
}

.case-frame {
  display: flex;
  flex-direction: column;
  width: min(46%, 560px);
  border-radius: var(--radius);
  overflow: hidden;
  background: #140a07;
  box-shadow: 0 16px 36px rgba(35, 19, 14, 0.2);
}

.compare-frame {
  width: 100%;
  box-shadow: 0 0 0 2px var(--oxblood), 0 18px 40px rgba(35, 19, 14, 0.26);
}

.case-frame .chrome-url { max-width: 15em; margin: 0 0 0 4px; flex: 0 1 auto; }

.frame-tag {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid rgba(220, 202, 182, 0.5);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-soft);
  white-space: nowrap;
}

.compare-hint { border-color: var(--gold); color: var(--gold-soft); }

.compare {
  --pos: 50%;
  position: relative;
  width: 100%;
  height: clamp(230px, 38vh, 470px);
  overflow: hidden;
  background: #fff;
  user-select: none;
  -webkit-user-select: none;
}

.compare:focus-within { outline: 3px solid var(--gold); outline-offset: -3px; }

.cmp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

.cmp-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.cmp-label {
  position: absolute;
  top: 12px;
  z-index: 2;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.cmp-label-before { left: 12px; border: 1px solid rgba(220, 202, 182, 0.55); background: rgba(20, 10, 7, 0.9); color: var(--cream); }
.cmp-label-after { right: 12px; background: var(--gold); color: var(--espresso); }

.cmp-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 3;
  width: 3px;
  margin-left: -1.5px;
  background: var(--gold);
  box-shadow: 0 0 0 1px rgba(20, 10, 7, 0.35), 0 0 18px rgba(226, 160, 73, 0.7);
  pointer-events: none;
}

.cmp-handle .ui-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  padding: 11px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--espresso);
  color: var(--gold);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.compare:not(.is-touched) .cmp-handle .ui-icon { animation: cmp-nudge 2.6s ease-in-out 0.9s infinite; }

@keyframes cmp-nudge {
  0%, 62%, 100% { transform: translate(-50%, -50%) scale(1); }
  74% { transform: translate(-50%, -50%) scale(1.14); }
  86% { transform: translate(-50%, -50%) scale(1); }
}

.cmp-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}

.cmp-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.cmp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 100%; background: transparent; border: 0; }
.cmp-range::-moz-range-track { height: 100%; background: transparent; }
.cmp-range::-moz-range-thumb { width: 2px; height: 100%; background: transparent; border: 0; border-radius: 0; }

.case-frame figcaption {
  flex: 0 0 auto;
  padding: 0.8em 1.1em 0.9em;
  font-size: var(--body-sm);
  line-height: 1.45;
  color: var(--cream-soft);
}

.case-frame figcaption b { color: var(--cream); }

.principle-stack {
  display: grid;
  gap: clamp(12px, 2.2vh, 24px);
  align-content: center;
}

.principle-stack li {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  gap: 0.7em;
  padding-top: clamp(10px, 1.6vh, 16px);
  border-top: 1px solid var(--rule-light);
}

.pr-num {
  font-family: var(--serif);
  font-size: clamp(19px, 2.2vh, 26px);
  line-height: 1.1;
  color: var(--wine);
}

.principle-stack b {
  display: block;
  font-family: var(--serif);
  font-size: var(--h3);
  line-height: 1.15;
  color: var(--oxblood);
}

.principle-stack span:not(.pr-num) {
  display: block;
  margin-top: 0.3em;
  font-size: var(--body-sm);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ---------- 06 · Roadmap ---------- */

.roadmap-body {
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(14px, 2.2vh, 28px);
  align-content: center;
}

.roadmap h2 { font-size: var(--h2); }

.intro-side .lead { margin-bottom: clamp(10px, 1.6vh, 16px); }

.promise-row { margin: 0; padding: clamp(8px, 1.2vh, 12px) 0 0; border-bottom: 0; }
.promise-row dt { font-size: clamp(19px, 2.4vh, 28px); color: var(--gold); }
.promise-row dd { margin-top: 0.35em; }

.phase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  gap: clamp(12px, 1.4vw, 22px);
  align-items: stretch;
}

.phase-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: clamp(7px, 1.1vh, 12px);
  padding: clamp(16px, 2.2vh, 26px);
  border: 1px solid rgba(226, 160, 73, 0.24);
  border-radius: var(--radius);
  background: var(--espresso-card);
}

.phase-featured {
  border-color: var(--gold);
  background: var(--espresso-lift);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

.phase-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.phase-num {
  font-size: var(--label);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.phase-days {
  padding: 0.3em 0.75em;
  border: 1px solid rgba(226, 160, 73, 0.6);
  border-radius: 999px;
  font-size: var(--label);
  font-weight: 700;
  color: var(--gold-soft);
  white-space: nowrap;
}

.phase-featured .phase-days { background: var(--gold); border-color: var(--gold); color: var(--espresso); }

.phase-card h3 { font-size: var(--h3); line-height: 1.12; color: var(--cream); }
.phase-card > p { font-size: var(--body-sm); line-height: 1.5; color: var(--cream-soft); }

.phase-card .check-list {
  display: grid;
  gap: 0.55em;
  margin-top: 0;
  padding-top: clamp(9px, 1.4vh, 14px);
  border-top: 1px solid var(--rule-dark);
  font-size: var(--body-sm);
  line-height: 1.4;
  color: var(--cream);
}

.check-list li { display: grid; grid-template-columns: 1.4em 1fr; gap: 0.35em; align-items: start; }
.check-list .ui-icon { margin-top: 0.15em; stroke-width: 2.6; color: var(--wine); }
.theme-dark .check-list .ui-icon { color: var(--gold); }

/* ---------- 07 · Close ---------- */

.close-body { display: grid; align-content: center; min-height: 0; }

.close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(18px, 2.8vw, 44px);
  align-items: center;
}

.partner-col h2 { margin-bottom: clamp(12px, 1.8vh, 20px); }

.partner-card {
  padding: clamp(16px, 2.2vh, 26px);
  border: 1px solid rgba(110, 66, 10, 0.22);
  border-radius: var(--radius);
  background: var(--crema-card);
  box-shadow: 0 12px 30px rgba(96, 13, 9, 0.07);
}

.partner-bio { display: grid; grid-template-columns: auto 1fr; gap: clamp(12px, 1.6vw, 24px); align-items: center; }

.partner-portrait {
  width: clamp(104px, 15vh, 168px);
  height: clamp(104px, 15vh, 168px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 3px solid var(--gold);
}

.partner-kicker {
  font-size: var(--label);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
}

.partner-name { margin-top: 0.1em; font-size: clamp(24px, 3vh, 36px); line-height: 1.05; color: var(--ink); }
.partner-role { margin-top: 0.2em; font-size: var(--body-sm); font-weight: 700; color: var(--wine); }

.partner-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.2em;
  margin-top: 0.6em;
  font-size: var(--body-sm);
  font-weight: 600;
}

.partner-contacts li, .partner-contacts a { display: inline-flex; align-items: center; gap: 0.4em; }
.partner-contacts a { text-decoration: underline; text-decoration-color: rgba(96, 13, 9, 0.3); text-underline-offset: 0.2em; }
.partner-contacts .ui-icon { color: var(--wine); }

.partner-quote {
  margin: clamp(12px, 1.8vh, 18px) 0 clamp(10px, 1.4vh, 14px);
  padding-left: clamp(10px, 1vw, 16px);
  border-left: 3px solid var(--oxblood);
}

.partner-quote p { font-family: var(--serif); font-size: var(--body-sm); line-height: 1.5; color: var(--ink); }

.partner-promises { display: grid; gap: 0.4em; font-size: var(--body-sm); font-weight: 600; color: var(--ink-soft); }

.partner-brand-signoff {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em 0.9em;
  margin-top: clamp(12px, 1.8vh, 18px);
  padding: 0.55em 1.1em;
  border-radius: 999px;
  background: var(--espresso);
  color: var(--cream);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.partner-brand-signoff img { height: 20px; width: auto; }

.concierge-card {
  position: relative;
  padding: clamp(18px, 2.4vh, 28px);
  border-radius: var(--radius);
  background: var(--espresso);
  color: var(--cream);
  box-shadow: 0 18px 44px rgba(35, 19, 14, 0.3);
  overflow: hidden;
}

.concierge-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--oxblood), var(--gold));
}

.concierge-badge {
  font-size: var(--label);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.concierge-header h3 {
  margin: 0.1em 0 0.25em;
  font-size: clamp(28px, 3.4vh, 40px);
  line-height: 1.05;
  color: var(--cream);
}

.concierge-header p:last-child { font-size: var(--body-sm); line-height: 1.5; color: var(--cream-soft); }

.screen-request { margin-top: clamp(10px, 1.6vh, 16px); }

.suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.suggestions button {
  min-height: 46px;
  padding: 0.6em 0.7em;
  border: 1px solid rgba(226, 160, 73, 0.6);
  border-radius: 8px;
  background: transparent;
  color: var(--cream);
  font-size: var(--label);
  font-weight: 700;
  line-height: 1.25;
}

.suggestions button:hover { background: rgba(226, 160, 73, 0.14); }
.suggestions button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--espresso); }

.custom-time {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.field-wrap label { display: block; margin-bottom: 0.35em; font-size: var(--label); font-weight: 600; color: var(--cream-soft); }

.date-control { position: relative; display: block; }

.date-control input {
  width: 100%;
  min-height: 46px;
  padding: 0.55em 2.6em 0.55em 0.7em;
  border: 1px solid rgba(251, 243, 231, 0.3);
  border-radius: 8px;
  background: var(--espresso-lift);
  color: var(--cream);
  color-scheme: dark;
  font-size: var(--label);
}

.date-control input::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }

.date-control button {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--gold-soft);
}

.date-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#picker-help { grid-column: 1 / -1; font-size: var(--label); color: var(--cream-soft); }

#contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 50px;
  margin-top: 10px;
  padding: 0.7em 1em;
  border-radius: 8px;
  background: var(--gold);
  color: var(--espresso);
  font-size: var(--body-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
}

#contact:hover { background: var(--gold-soft); }

.concierge-note { margin-top: 8px; font-size: var(--label); line-height: 1.45; color: var(--cream-soft); }

/* ---------- Screen shake / flash for the signature transition ---------- */

#flash {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--boom-x, 74%) var(--boom-y, 38%), #fff8e8 0%, #f6c273 14%, rgba(226, 160, 73, 0.35) 34%, rgba(226, 160, 73, 0) 58%);
  mix-blend-mode: screen;
}

/* The comal seam: warm heat that sweeps across the frame on ordinary cuts. */
#sweep {
  position: fixed;
  top: -6%;
  bottom: -6%;
  left: 0;
  z-index: 65;
  width: 62vw;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    rgba(226, 160, 73, 0) 0%,
    rgba(214, 98, 40, 0.14) 38%,
    rgba(240, 150, 66, 0.36) 66%,
    rgba(255, 226, 168, 0.8) 86%,
    rgba(255, 250, 238, 0.96) 91%,
    rgba(255, 170, 84, 0) 100%);
  transform: translateX(-70vw) skewX(-14deg);
}

body.sweeping.dir-fwd #sweep { animation: deck-sweep-fwd 0.66s cubic-bezier(0.55, 0.05, 0.25, 1) both; }
body.sweeping.dir-back #sweep { animation: deck-sweep-back 0.66s cubic-bezier(0.55, 0.05, 0.25, 1) both; }

@keyframes deck-sweep-fwd {
  0% { opacity: 1; transform: translateX(-70vw) skewX(-14deg); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(112vw) skewX(-14deg); }
}

@keyframes deck-sweep-back {
  0% { opacity: 1; transform: translateX(112vw) skewX(-14deg) scaleX(-1); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-70vw) skewX(-14deg) scaleX(-1); }
}

.boom-canvas {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
}

body.booming #flash { animation: deck-flash 0.8s cubic-bezier(0.16, 0.8, 0.3, 1) both; }
body.booming #deck { animation: deck-shake 0.62s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

@keyframes deck-flash {
  0% { opacity: 0.94; }
  20% { opacity: 0.55; }
  100% { opacity: 0; }
}

@keyframes deck-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10% { transform: translate3d(-11px, 6px, 0); }
  24% { transform: translate3d(9px, -7px, 0); }
  42% { transform: translate3d(-5px, 4px, 0); }
  60% { transform: translate3d(3px, -2px, 0); }
  78% { transform: translate3d(-2px, 1px, 0); }
}

/* Soft cut for reduced-motion / no-WebGL navigation */

body.soft-cut #flash { animation: deck-soft 0.42s ease-out both; background: var(--espresso); mix-blend-mode: normal; }

@keyframes deck-soft {
  0% { opacity: 0.55; }
  100% { opacity: 0; }
}

/* ---------- Small screens: one scrolling column ---------- */

@media screen and (max-width: 1100px), screen and (max-aspect-ratio: 1/1) {
  :root {
    --body: clamp(16px, 1.2vh + 0.55vw, 20px);
    --h2: clamp(30px, 4.6vh, 46px);
    --h1: clamp(40px, 6.4vh, 58px);
    --pad-bottom: 104px;
  }

  .cover { grid-template-columns: 1fr; grid-template-rows: 40dvh auto; }
  .cover-stage { grid-row: 1; }
  .cover-copy { grid-row: 2; align-items: flex-start; padding: 26px 24px 24px; }
  .cover-inner { max-width: none; }
  .cover h1 { max-width: 16ch; font-size: clamp(38px, 8.2vw, 58px); }
  .cover .lead { max-width: 56ch; }
  .cover-collab { margin-bottom: 18px; }
  .stage-plate {
    position: static;
    grid-row: 3;
    width: auto;
    margin: 0 24px 104px;
    transform: none;
  }
  .stage-photo { aspect-ratio: 16 / 9; }
  .stage-hint { display: none; }
  .scene-fallback { inset: 4% 6% 10%; }
  .scene-fallback img { width: 72%; }

  .slide { padding: 20px 24px var(--pad-bottom); }
  .brand-mark { height: 44px; }
  .chapter { font-size: 13px; }
  .chapter b { font-size: 20px; }

  .kitchen-body, .concept-body, .close-grid, .intro-row { grid-template-columns: 1fr; }
  .kitchen-body, .concept-body, .close-grid { gap: 24px; }
  .intro-row { gap: 14px; align-items: start; }
  .kitchen-body { align-items: start; }
  .close-body { align-content: start; }
  .journey-body, .proof-body, .roadmap-body { align-content: start; }

  .concept-body { display: flex; flex-direction: column; align-items: stretch; }
  .concept-body .showcase { order: 1; }
  .concept-body .copy-col { order: 2; }

  .food-grid { grid-template-columns: 1fr 1fr; height: auto; grid-template-rows: none; }
  .food-tile { aspect-ratio: 5 / 4; }

  .win-grid, .phase-grid, .principle-row { grid-template-columns: 1fr; }
  .comparison { grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
  .case-frame { width: 100%; }
  .compare { height: clamp(210px, 52vw, 340px); }
  .principle-stack { gap: 12px; }

  .feature-list { margin-top: 14px; }

  .site-concept { font-size: 15px; height: 430px; }
  .c-head { gap: 0.5em; padding: 0.6em 0.8em; }
  .c-logo { height: 2.2em; }
  .c-nav { gap: 0; }
  .c-tab { padding: 0.35em 0.5em; font-size: 0.72em; }
  .c-order { font-size: 0.62em; padding: 0.5em 0.6em; }
  .c-hero { grid-template-columns: 1fr 1fr; }
  .c-hero-copy { padding: 0.9em; }
  .c-hero h3 { font-size: 1.45em; }
  .c-hero img { min-height: 0; }
  .c-quick div { padding: 0.6em 0.8em; }
  .c-visit { gap: 0.8em; padding: 1em; }
  .c-menu-head { flex-direction: column; align-items: flex-start; gap: 0.5em; padding: 0.9em 1em 0.6em; }
  .c-chips { max-width: 100%; justify-content: flex-start; }
  .c-menu-body { padding: 0 1em 0.9em; }
  .c-cat { padding: 0.9em 1em; }

  .phone { width: 118px; right: -4px; bottom: -12px; font-size: 6px; }

  .slide.concept.detail-open .site-concept { height: min(70vh, 600px); font-size: 16px; }
  .slide.concept.detail-open .browser-frame { width: 96vw; }

  .partner-bio { grid-template-columns: 104px 1fr; }
  .partner-portrait { width: 104px; height: 104px; }
  .custom-time { grid-template-columns: 1fr; }
  .concierge-col { order: 2; }

  .controls {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: none;
    justify-content: center;
    padding: 4px;
    background: rgba(26, 14, 10, 0.99);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
  }

  .controls button { height: 46px; }
  #counter { min-width: 3.8em; }
}

@media screen and (max-width: 640px) {
  .phone { display: none; }
  .head-brandcore, .head-x { display: none; }
}

@media screen and (max-width: 600px) {
  .slide-foot { flex-wrap: wrap; row-gap: 2px; }
  .slide-foot span:first-child { flex: 1 1 100%; }
}

@media screen and (max-width: 440px) {
  :root { --pad-x: 18px; }
  .slide { padding: 16px 18px var(--pad-bottom); }
  .brand-mark { height: 38px; }
  .chapter { font-size: 13px; gap: 0.3em; }
  .chapter b { font-size: 18px; }
  .cover { grid-template-rows: 40dvh auto; }
  .cover-copy { padding: 22px 18px 24px; }
  .cover h1 { font-size: clamp(36px, 10.4vw, 46px); }
  .cover .lead { font-size: 16px; }
  .cover-collab { font-size: 13px; }
  .brandcore-badge-logo { height: 18px; }
  .fact-chips li { font-size: 13px; }
  .cover-prepared img { width: 42px; height: 42px; }
  .stage-plate { margin: 0 18px 104px; }
  .frame-tag { font-size: 11px; letter-spacing: 0.12em; }
  .detail-toggle { font-size: 12px; }
  .stage-plate figcaption { font-size: 13px; padding: 0.55em 0.7em; }

  .food-tile figcaption { font-size: 12px; padding: 1.4em 0.6em 0.55em; }
  .food-tile figcaption b { font-size: 17px; }
  .food-tile figcaption span { display: none; }

  h2 { font-size: clamp(28px, 8vw, 36px); }
  .win-card, .phase-card { padding: 16px; }
  .win-card h3 { font-size: 21px; }
  .win-card p, .win-fix p { font-size: 16px; }
  .stat-row { gap: 8px; }
  .stat-row dt { font-size: 24px; }
  .stat-row dd { font-size: 13px; line-height: 1.35; }

  .compare { height: clamp(190px, 56vw, 240px); }
  .cmp-label { top: 8px; padding: 3px 9px; font-size: 12px; }
  .cmp-label-before { left: 8px; }
  .cmp-label-after { right: 8px; }
  .case-frame .chrome-url { display: none; }
  .case-frame .chrome-dots { margin-right: auto; }
  .principle-stack span:not(.pr-num) { font-size: 16px; }
  .partner-brand-signoff { border-radius: 16px; }

  .site-concept { height: 400px; font-size: 14px; }
  .c-hero { grid-template-columns: 1fr; height: 66%; }
  .c-hero img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.62; object-position: 62% 50%; }
  .c-hero { position: relative; }
  .c-hero-copy { position: relative; z-index: 1; background: linear-gradient(100deg, rgba(251, 245, 236, 0.94) 0%, rgba(251, 245, 236, 0.82) 52%, rgba(251, 245, 236, 0.22) 100%); }
  .c-quick { height: 34%; }
  .c-quick b { font-size: 0.85em; }
  .c-quick span { font-size: 0.6em; }
  .phone { display: none; }

  .c-head { flex-wrap: wrap; }
  .c-nav { margin-left: 0; order: 3; width: 100%; }
  .c-order { margin-left: auto; }

  .partner-bio { grid-template-columns: 84px 1fr; gap: 12px; }
  .partner-portrait { width: 84px; height: 84px; }
  .partner-name { font-size: 24px; }
  .partner-contacts { font-size: 15px; }
  .partner-quote p { font-size: 16px; }
  .partner-promises { font-size: 16px; }
  .concierge-card { padding: 16px; }
  .suggestions { grid-template-columns: 1fr; }
  .slide-foot { font-size: 13px; }
}

@media screen and (max-height: 780px) and (min-width: 1101px) {
  :root { --pad-top: 18px; --pad-bottom: 78px; }
  .slide { row-gap: 10px; }
  .cover-copy { padding-top: 20px; padding-bottom: 80px; }
  .stage-hint { display: none; }
  .compare { height: clamp(200px, 34vh, 280px); }
  .partner-portrait { width: 104px; height: 104px; }
  .partner-quote { margin: 10px 0; }
  .principle-row { padding-top: 10px; }
}

/* ---------- Motion ---------- */

@media screen and (prefers-reduced-motion: no-preference) {
  .slide.active { animation: deck-enter 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  body.dir-fwd .slide.active { animation-name: deck-enter-fwd; }
  body.dir-back .slide.active { animation-name: deck-enter-back; }

  @keyframes deck-enter-fwd {
    from { opacity: 0; transform: translateX(46px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes deck-enter-back {
    from { opacity: 0; transform: translateX(-46px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes deck-enter {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

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

/* ==========================================================
   ARGON STANDARD UPGRADES — Jalisco’s Restaurant
   Floating HUD badge · forensic audit cards · customer moment
   · interactive widget · pointer-captured compare slider
   ========================================================== */

/* ---------- 01 · Cover: floating HUD badge ---------- */

.hud-badge {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 42px);
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  max-width: min(86%, 420px);
  padding: 0.75em 1.1em;
  border: 1px solid rgba(226, 160, 73, 0.55);
  border-radius: 999px;
  background: rgba(26, 14, 10, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  color: var(--cream);
  font-size: var(--label);
  line-height: 1.35;
  pointer-events: none;
}

.hud-badge .hud-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(226, 160, 73, 0.22);
  animation: hud-pulse 2.4s ease-in-out infinite;
}

@keyframes hud-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(226, 160, 73, 0.22); }
  50% { box-shadow: 0 0 0 8px rgba(226, 160, 73, 0.08); }
}

.hud-copy b {
  display: block;
  font-family: var(--serif);
  font-size: 1.1em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.hud-copy span {
  display: block;
  margin-top: 0.2em;
  color: var(--cream-soft);
  white-space: normal;
}

@media screen and (max-width: 1100px), (max-aspect-ratio: 1/1) {
  .hud-badge { max-width: calc(100% - 32px); font-size: 12px; }
  .stage-hint { display: none; }
}

/* ---------- 02 · Kitchen: forensic audit panel ---------- */

.kitchen-body {
  grid-template-rows: 1fr auto;
  row-gap: clamp(14px, 2vh, 24px);
}

.kitchen-body > .copy-col,
.kitchen-body > .food-grid {
  grid-row: 1;
}

.kitchen-body > .source-line {
  grid-column: 1 / -1;
}

.audit-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  padding-top: clamp(10px, 1.4vh, 18px);
  border-top: 1px solid var(--rule-dark);
}

.audit-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 0.55em;
  padding: clamp(14px, 1.8vh, 22px);
  border: 1px solid rgba(226, 160, 73, 0.26);
  border-radius: var(--radius);
  background: var(--espresso-card);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.audit-card:hover {
  border-color: rgba(226, 160, 73, 0.6);
  transform: translateY(-2px);
}

.audit-card h3 {
  font-size: var(--h3);
  line-height: 1.14;
  color: var(--cream);
}

.audit-card p {
  font-size: var(--body-sm);
  line-height: 1.5;
  color: var(--cream-soft);
}

.audit-card p code {
  background: rgba(226, 160, 73, 0.12);
  color: var(--gold-soft);
}

.audit-badge {
  justify-self: start;
  padding: 0.28em 0.75em;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: max(11px, calc(var(--label) * 0.85));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.audit-critical .audit-badge {
  background: rgba(158, 27, 31, 0.28);
  border: 1px solid rgba(226, 106, 80, 0.6);
  color: #ff9d8f;
}

.audit-high .audit-badge {
  background: rgba(226, 160, 73, 0.18);
  border: 1px solid rgba(226, 160, 73, 0.5);
  color: var(--gold);
}

.audit-medium .audit-badge {
  background: rgba(251, 245, 236, 0.08);
  border: 1px solid rgba(251, 245, 236, 0.3);
  color: var(--cream-soft);
}

.audit-source {
  align-self: end;
  margin-top: 0.4em;
  padding-top: 0.6em;
  border-top: 1px dashed rgba(226, 160, 73, 0.24);
  font-family: var(--mono);
  font-size: max(10.5px, calc(var(--label) * 0.8));
  letter-spacing: 0.04em;
  color: rgba(251, 245, 236, 0.55);
}

@media screen and (max-width: 1100px), (max-aspect-ratio: 1/1) {
  .kitchen-body { grid-template-rows: auto auto auto; }
  .audit-panel { grid-template-columns: 1fr; }
}

/* ---------- 03 · Journey: customer moment + path replay ---------- */

.journey-body {
  grid-template-rows: auto auto;
  align-content: center;
}

.moment-frame {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  padding: clamp(18px, 2.6vh, 32px) clamp(18px, 2.4vw, 36px);
  border: 1px solid rgba(110, 66, 10, 0.26);
  border-radius: var(--radius);
  background: var(--crema-card);
  box-shadow: 0 18px 44px rgba(96, 13, 9, 0.07);
}

.moment-clock {
  display: inline-flex;
  align-items: baseline;
  gap: 0.06em;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(42px, 6.4vh, 78px);
  line-height: 1;
  color: var(--oxblood);
  font-variant-numeric: tabular-nums;
}

.moment-clock .clock-digit,
.moment-clock .clock-colon {
  display: inline-block;
}

.moment-clock .clock-colon {
  animation: clock-blink 1s steps(1) infinite;
  color: var(--gold);
}

@keyframes clock-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}

.moment-clock .clock-meridiem {
  margin-left: 0.18em;
  font-size: 0.34em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
}

.moment-copy .kicker { margin-bottom: 0.5em; }

.moment-copy h2 { margin-bottom: 0.4em; }

.moment-copy .lead { max-width: 52ch; }

.path-replay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(14px, 2vw, 30px);
  padding: clamp(16px, 2.2vh, 28px);
  border: 1px solid rgba(110, 66, 10, 0.22);
  border-radius: var(--radius);
  background: rgba(255, 251, 245, 0.7);
}

.path-col h3 {
  margin-bottom: 0.7em;
  font-family: var(--sans);
  font-size: var(--label);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.path-col h3 em {
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.25em;
  letter-spacing: 0;
  text-transform: none;
}

.path-today h3 { color: var(--wine); }
.path-today h3 em { color: var(--oxblood); }
.path-brandcore h3 { color: var(--bronze); }
.path-brandcore h3 em { color: var(--gold); }

.path-list {
  display: grid;
  gap: 0.5em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.path-step {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 0.8em;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(110, 66, 10, 0.14);
  font-size: var(--body-sm);
  line-height: 1.35;
  color: var(--ink-soft);
  opacity: 0.45;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.path-step.is-active {
  opacity: 1;
  transform: translateX(0);
  background: #fff;
  border-color: rgba(110, 66, 10, 0.32);
}

.path-today .path-step.is-active {
  border-color: rgba(158, 27, 31, 0.45);
  box-shadow: inset 3px 0 0 var(--wine);
}

.path-brandcore .path-step.is-active {
  border-color: rgba(226, 160, 73, 0.6);
  box-shadow: inset 3px 0 0 var(--gold);
}

.path-step .step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: rgba(110, 66, 10, 0.1);
  font-family: var(--mono);
  font-size: 0.78em;
  font-weight: 700;
  color: var(--bronze);
}

.path-today.is-done .path-step { color: var(--ink); }

.replay-btn {
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.8em 1.6em;
  border: 1px solid var(--oxblood);
  border-radius: 999px;
  background: var(--oxblood);
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--body-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 26px rgba(96, 13, 9, 0.28);
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.replay-btn::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  border: 2px solid var(--gold-soft);
  border-top-color: transparent;
  animation: replay-spin 0.9s linear infinite paused;
}

.replay-btn.is-running::before { animation-play-state: running; }

.replay-btn:hover {
  background: var(--wine);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(96, 13, 9, 0.34);
}

.replay-btn:active { transform: translateY(0) scale(0.99); }

@keyframes replay-spin {
  to { transform: rotate(360deg); }
}

@media screen and (max-width: 1100px), (max-aspect-ratio: 1/1) {
  .moment-frame { grid-template-columns: 1fr; gap: 14px; }
  .moment-clock { font-size: clamp(38px, 9vw, 56px); }
  .path-replay { grid-template-columns: 1fr; }
  .replay-btn { justify-self: stretch; width: 100%; }
}

/* ---------- 04 · Concept: argon interactive widget ---------- */

.showcase { min-width: 0; }

.argon-interactive-widget {
  display: grid;
  gap: clamp(10px, 1.4vh, 18px);
  padding: clamp(16px, 2.2vh, 28px);
  border: 1px solid rgba(226, 160, 73, 0.34);
  border-radius: clamp(12px, 1.6vh, 18px);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(226, 160, 73, 0.09) 0%, rgba(226, 160, 73, 0) 55%),
    var(--espresso-card);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.38);
}

.widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.widget-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.42em 0.95em;
  border: 1px solid rgba(226, 160, 73, 0.4);
  border-radius: 999px;
  background: rgba(226, 160, 73, 0.1);
  font-size: max(13px, calc(var(--label) * 0.92));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-soft);
}

.widget-status .status-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4caf6d;
  box-shadow: 0 0 0 3px rgba(76, 175, 109, 0.18);
}

.widget-status.is-closed .status-dot {
  background: #e0574c;
  box-shadow: 0 0 0 3px rgba(224, 87, 76, 0.18);
}

.widget-status.is-open .status-dot {
  animation: status-pulse 2.2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(76, 175, 109, 0.18); }
  50% { box-shadow: 0 0 0 7px rgba(76, 175, 109, 0.06); }
}

.widget-title {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vh, 24px);
  color: var(--cream);
}

.widget-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(226, 160, 73, 0.24);
  border-radius: 999px;
  background: rgba(26, 14, 10, 0.55);
}

.widget-tab {
  min-height: 44px;
  padding: 0.55em 1.1em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cream-soft);
  font-family: var(--sans);
  font-size: max(14px, calc(var(--label) * 0.98));
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.widget-tab:hover { color: var(--cream); background: rgba(226, 160, 73, 0.12); }

.widget-tab.is-on {
  background: var(--gold);
  color: var(--espresso);
}

.widget-panels { position: relative; }

.widget-panel { display: grid; gap: clamp(12px, 1.6vh, 20px); }

.widget-panel[hidden] { display: none; }

.widget-panel h3 {
  font-family: var(--serif);
  font-size: var(--h3);
  color: var(--cream);
}

.est-controls {
  display: grid;
  gap: clamp(10px, 1.4vh, 16px);
}

.est-block { display: grid; gap: 0.5em; }

.est-label {
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-soft);
}

.est-btns { display: flex; flex-wrap: wrap; gap: 8px; }

.est-btn {
  min-width: 52px;
  min-height: 46px;
  padding: 0.5em 1.1em;
  border: 1px solid rgba(226, 160, 73, 0.32);
  border-radius: 10px;
  background: transparent;
  color: var(--cream);
  font-size: var(--body-sm);
  font-weight: 600;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.est-btn:hover { border-color: rgba(226, 160, 73, 0.7); background: rgba(226, 160, 73, 0.1); }

.est-btn.is-on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--espresso);
}

.est-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 34px;
  background: transparent;
  cursor: pointer;
}

.est-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) var(--fill, 38%), rgba(226, 160, 73, 0.22) var(--fill, 38%));
}

.est-range::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) var(--fill, 38%), rgba(226, 160, 73, 0.22) var(--fill, 38%));
}

.est-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;
  border-radius: 50%;
  border: 3px solid var(--espresso);
  background: var(--gold-soft);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.est-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--espresso);
  background: var(--gold-soft);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.est-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: max(10.5px, calc(var(--label) * 0.78));
  letter-spacing: 0.04em;
  color: rgba(251, 245, 236, 0.55);
}

.est-result {
  display: grid;
  gap: 0.4em;
  padding: clamp(14px, 1.8vh, 22px);
  border: 1px solid rgba(226, 160, 73, 0.5);
  border-radius: 12px;
  background: rgba(226, 160, 73, 0.09);
}

.est-result-title {
  font-family: var(--mono);
  font-size: max(11px, calc(var(--label) * 0.85));
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.est-result-body {
  font-family: var(--serif);
  font-size: clamp(18px, 2.3vh, 25px);
  line-height: 1.35;
  color: var(--cream);
}

.est-result-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.est-result-actions .ui-icon { width: 1.1em; height: 1.1em; }

.spec-list { display: grid; gap: 10px; }

.spec-list li {
  display: grid;
  gap: 0.15em;
  padding: 0.8em 1em;
  border: 1px solid rgba(226, 160, 73, 0.2);
  border-radius: 10px;
  background: rgba(26, 14, 10, 0.45);
}

.spec-list b { font-size: var(--body-sm); color: var(--gold-soft); }
.spec-list span { font-size: var(--body-sm); color: var(--cream-soft); line-height: 1.45; }

.hours-list { display: grid; gap: 8px; }

.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0.75em 1em;
  border: 1px solid rgba(226, 160, 73, 0.2);
  border-radius: 10px;
  background: rgba(26, 14, 10, 0.45);
  font-size: var(--body-sm);
}

.hours-row b { color: var(--gold-soft); white-space: nowrap; }

.hours-note {
  font-size: var(--body-sm);
  line-height: 1.5;
  color: var(--cream-soft);
}

.hours-note code { color: var(--gold-soft); background: rgba(226, 160, 73, 0.12); }

.widget-call {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.7em 1.4em;
  border-radius: 999px;
  background: var(--gold);
  color: var(--espresso);
  font-weight: 700;
  font-size: var(--body-sm);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.widget-call:hover { background: var(--gold-soft); }

@media screen and (max-width: 1100px), (max-aspect-ratio: 1/1) {
  .concept-body { display: grid; grid-template-columns: 1fr; }
  .widget-tabs .widget-tab { flex: 1 1 auto; text-align: center; padding-inline: 0.6em; }
}

/* ---------- 05 · Proof: pointer-captured compare slider ---------- */

.proof-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(18px, 2.6vw, 44px);
  align-items: center;
}

.proof-frame {
  display: grid;
  gap: 0.7em;
  margin: 0;
}

.proof-frame figcaption {
  font-size: var(--label);
  line-height: 1.45;
  color: var(--ink-soft);
}

.proof-frame figcaption b { color: var(--ink); }

.compare {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(110, 66, 10, 0.28);
  background: var(--espresso);
  aspect-ratio: 16 / 10;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}

.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.compare__img--before { z-index: 1; }

.compare__img--after {
  z-index: 2;
  clip-path: inset(0 0 0 var(--pos, 50%));
}

.compare__label {
  position: absolute;
  z-index: 4;
  padding: 0.35em 0.8em;
  border-radius: 999px;
  background: rgba(26, 14, 10, 0.82);
  color: var(--cream);
  font-family: var(--mono);
  font-size: max(11px, calc(var(--label) * 0.82));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.compare__label--before { top: 12px; left: 12px; }
.compare__label--after { top: 12px; right: 12px; }

.compare__handle {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom, rgba(226, 160, 73, 0.2), var(--gold), rgba(226, 160, 73, 0.2));
  pointer-events: none;
}

.compare__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(26, 14, 10, 0.85);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 4px rgba(26, 14, 10, 0.6);
  background-image: linear-gradient(90deg, transparent calc(50% - 7px), var(--cream) calc(50% - 7px), var(--cream) calc(50% - 5px), transparent calc(50% - 5px), transparent calc(50% + 5px), var(--cream) calc(50% + 5px), var(--cream) calc(50% + 7px), transparent calc(50% + 7px));
}

.compare__range {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

.compare__range:focus-visible {
  opacity: 1;
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

@media screen and (max-width: 1100px), (max-aspect-ratio: 1/1) {
  .proof-stage { grid-template-columns: 1fr; gap: 16px; }
  .compare { aspect-ratio: 4 / 3; }
}

/* ---------- 06 · Widget head: the deck.js "View larger" toggle ---------- */

/* deck.js owns the detail-open toggle (setDetail): the button text flips to
   "Close" and the slide's head, foot and copy column step out of the way. */

.widget-head .widget-title { flex: 1 1 auto; }

.widget-head .detail-toggle {
  margin-left: auto;
  min-height: 40px;
  padding: 0.5em 1.15em;
  border: 1px solid rgba(226, 160, 73, 0.45);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: max(13px, calc(var(--label) * 0.9));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Fullscreen readable view: the widget becomes the whole stage. */

.slide.concept.detail-open .argon-interactive-widget {
  width: min(1120px, 94vw);
  max-height: calc(100vh - 16vh);
  overflow-y: auto;
  padding: clamp(24px, 4vh, 44px);
  gap: clamp(14px, 2.2vh, 26px);
}

/* ---------- 07 · Estimator action buttons ---------- */

.est-result-actions a.est-action {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 44px;
  padding: 0.55em 1.2em;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold);
  color: var(--espresso);
  font-size: var(--body-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.est-result-actions a.est-action:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
}

.est-result-actions a.est-action--ghost {
  background: transparent;
  color: var(--gold-soft);
}

.est-result-actions a.est-action--ghost:hover {
  background: rgba(226, 160, 73, 0.14);
  color: var(--cream);
}

/* ---------- 08 · Audit cards: staggered entrance on each activation ---------- */

@media screen and (prefers-reduced-motion: no-preference) {
  .slide.kitchen.active .audit-card {
    animation: audit-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .slide.kitchen.active .audit-card:nth-child(2) { animation-delay: 0.12s; }
  .slide.kitchen.active .audit-card:nth-child(3) { animation-delay: 0.24s; }
}

@keyframes audit-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}