/* Araujo's Mexican Grill · Brandcore sales deck
   One stylesheet, no override layers. Palette is taken from the restaurant's own
   signage (chile red, salsa green) on mesquite charcoal and masa cream. Every text
   colour below is paired with the background it sits on and clears WCAG AAA. */

@font-face { font-family: 'Barlow Condensed'; src: url('assets/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('assets/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/barlow-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/barlow-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/barlow-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/barlow-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/barlow-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Mesquite charcoal surfaces */
  --charcoal: #140E0B;
  --charcoal-2: #1F1712;
  --charcoal-3: #2A1F19;
  /* Masa cream surfaces */
  --cream: #F7F0E4;
  --cream-2: #FFFBF4;
  --cream-3: #EFE5D4;
  /* Text on charcoal (contrast vs #140E0B / #2A1F19) */
  --on-dark: #FBF6EE;        /* 17.8 / 14.9 */
  --on-dark-muted: #E2D4C2;  /* 13.2 / 11.0 */
  --corn: #F2BF6B;           /* 11.3 / 9.5  */
  --chile-hi: #FF8C73;       /*  8.4 / 7.1  */
  --salsa-hi: #A8D774;       /* 11.5 / 9.7  */
  /* Text on cream (contrast vs #F7F0E4 / #EFE5D4) */
  --ink: #1C140F;            /* 16.0 / 14.6 */
  --ink-muted: #4A3B31;      /*  9.5 / 8.6  */
  --chile-deep: #8F1A1A;     /*  8.0 / 7.2  */
  --salsa-deep: #24501A;
  --chile-btn: #9E1C1A;      /* white text 8.0 */
  /* Signage colours: decoration only, never text */
  --sign-red: #D8312B;
  --sign-green: #6FA63A;
  --line-dark: rgba(242, 191, 107, 0.22);
  --line-light: rgba(28, 20, 15, 0.14);

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad-x: clamp(20px, 5.4vw, 104px);
  --pad-top: clamp(16px, 3.2vh, 38px);
  --pad-bottom: clamp(84px, 10.4vh, 116px);
  --foot-y: clamp(26px, 3.7vh, 44px);
  --radius: 18px;
  --site-h: clamp(300px, 42vh, 440px);
  --compare-h: clamp(280px, 38vh, 400px);
}

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

html, body {
  margin: 0;
  background: var(--charcoal);
  color: var(--on-dark);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; opacity: 1; filter: none; }
button, input { font: inherit; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.nowrap { white-space: nowrap; }

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

/* ---------------------------------------------------------------
   Slide shell
   --------------------------------------------------------------- */
#deck { position: relative; width: 100%; overflow: hidden; }

.slide {
  position: relative;
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100svh;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 100% 0%, rgba(242, 191, 107, 0.06), transparent 70%),
    var(--charcoal);
  color: var(--on-dark);
}
.slide.active { display: flex; }

.slide.light {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(216, 49, 43, 0.05), transparent 70%),
    var(--cream);
  color: var(--ink);
}

.slide > header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(12px, 1.8vh, 20px);
  border-bottom: 1px solid var(--line-dark);
}
.slide.light > header { border-bottom-color: var(--line-light); }

.slide-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(16px, 3vh, 36px);
}

/* Client brand lockup: the restaurant's own emblem and wordmark, cut from the
   official white logo and set side by side on a charcoal sign plate. */
.brand-plate {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 0.85vw, 16px);
  padding: clamp(8px, 1vh, 11px) clamp(16px, 1.25vw, 24px) clamp(8px, 1vh, 11px) clamp(12px, 0.9vw, 16px);
  background: linear-gradient(180deg, #261B15 0%, #140E0B 100%);
  border: 1px solid rgba(242, 191, 107, 0.38);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(20, 14, 11, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.brand-emblem { width: auto; height: clamp(46px, 6vh, 66px); }
.brand-wordmark { width: auto; height: clamp(38px, 5vh, 56px); }

.header-tag {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.header-tag b {
  display: inline-grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  color: var(--corn);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.light .header-tag { color: var(--ink-muted); }
.light .header-tag b { color: var(--chile-deep); }

.page,
.slide-foot {
  position: absolute;
  bottom: var(--foot-y);
  font-family: var(--display);
  font-size: clamp(13px, 0.86vw, 16px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.page { right: var(--pad-x); }
.slide-foot {
  left: var(--pad-x);
  max-width: calc(50vw - 230px - var(--pad-x));
  text-decoration: none;
}
a.slide-foot { border-bottom: 1px solid rgba(242, 191, 107, 0.45); }
a.slide-foot:hover { color: var(--corn); }
.light .page, .light .slide-foot { color: var(--ink-muted); }
.light a.slide-foot { border-bottom-color: rgba(143, 26, 26, 0.4); }
.light a.slide-foot:hover { color: var(--chile-deep); }

/* ---------------------------------------------------------------
   Typography
   --------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 4.25vw, 84px); font-weight: 800; line-height: 0.98; }
h2 { font-size: clamp(34px, 3.6vw, 70px); line-height: 1.0; }
h3 { font-size: clamp(22px, 1.6vw, 30px); line-height: 1.08; }
h1 em, h2 em { font-style: normal; color: var(--chile-hi); }
.light h2 em { color: var(--chile-deep); }

.eyebrow, .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--corn);
}
.eyebrow { margin-bottom: clamp(10px, 1.8vh, 20px); }
.eyebrow::before {
  content: '';
  width: 30px;
  height: 2px;
  background: var(--sign-red);
}
.light .eyebrow, .light .kicker { color: var(--chile-deep); }

.lead {
  max-width: 58ch;
  margin-top: clamp(12px, 2.2vh, 24px);
  font-size: clamp(16px, 1.2vw, 23px);
  line-height: 1.5;
  color: var(--on-dark-muted);
}
.light .lead { color: var(--ink-muted); }

/* ---------------------------------------------------------------
   Browser frame (shared by slides 1, 4 and 5)
   --------------------------------------------------------------- */
.browser {
  overflow: hidden;
  background: #0F0B09;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(20, 14, 11, 0.38);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: clamp(32px, 3.5vh, 40px);
  padding: 0 14px;
  background: #1C1511;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.browser-dots { display: inline-flex; gap: 7px; }
.browser-dots i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.browser-dots i:nth-child(2) { background: #FEBC2E; }
.browser-dots i:nth-child(3) { background: #28C840; }
.browser-url {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 14px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  font-size: clamp(12px, 0.78vw, 14px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--on-dark-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-url .ui-icon { color: var(--salsa-hi); }

/* The concept mockup ships with its own drawn browser frame. Crop to the site
   itself (x 71-1304, y 72-733 of the 1376x768 file) so it is never double-framed. */
.site-crop {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1233 / 661;
  background: #141414;
}
.site-crop img {
  position: absolute;
  left: -5.758%;
  top: -10.893%;
  width: 111.598%;
  height: 116.188%;
  max-width: none;
  object-fit: fill;
}

/* ---------------------------------------------------------------
   Slide 1: cover
   --------------------------------------------------------------- */
.cover {
  padding: 0;
  background:
    radial-gradient(85% 55% at 16% 112%, rgba(216, 49, 43, 0.34), rgba(216, 49, 43, 0) 62%),
    radial-gradient(60% 50% at 0% 0%, rgba(242, 191, 107, 0.07), transparent 70%),
    var(--charcoal);
}
.cover.active {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}

#scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 56%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: clamp(28px, 5vh, 64px) clamp(36px, 3.4vw, 72px) clamp(72px, 9vh, 104px) var(--pad-x);
}
.cover-logo {
  width: auto;
  height: clamp(150px, 25vh, 272px);
  margin: 0 0 clamp(20px, 3.6vh, 42px) -0.5%;
}
.hero-copy h1 { max-width: none; white-space: nowrap; }
.hero-lead {
  max-width: 44ch;
  margin-top: clamp(16px, 2.6vh, 30px);
  font-size: clamp(17px, 1.28vw, 23px);
  line-height: 1.5;
  color: var(--on-dark-muted);
}
.location-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(18px, 3.2vh, 36px);
}
.location-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(242, 191, 107, 0.4);
  border-radius: 999px;
  background: rgba(20, 14, 11, 0.6);
  font-family: var(--display);
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.location-chips .ui-icon { color: var(--chile-hi); }

.hero-stage {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
}
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* A thin corn rule marks the seam between copy and photograph. */
.hero-stage::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sign-red), var(--corn) 50%, var(--sign-green));
  z-index: 2;
}
.hero-site {
  position: absolute;
  left: clamp(-110px, -5vw, -40px);
  bottom: clamp(84px, 11vh, 124px);
  width: min(660px, 78%);
  z-index: 3;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(242, 191, 107, 0.25);
}
.cover .page {
  z-index: 4;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(20, 14, 11, 0.86);
  color: var(--on-dark);
}

/* ---------------------------------------------------------------
   Slide 2: foundation (cream)
   --------------------------------------------------------------- */
.foundation .slide-body {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(28px, 4.2vw, 84px);
  align-items: center;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 24px);
  margin-top: clamp(20px, 4vh, 44px);
  padding-top: clamp(16px, 2.6vh, 28px);
  border-top: 1px solid var(--line-light);
}
.stat-row dt {
  font-family: var(--display);
  font-size: clamp(32px, 2.7vw, 52px);
  font-weight: 800;
  line-height: 1;
  color: var(--chile-deep);
}
.stat-row dd {
  margin-top: 8px;
  font-size: clamp(14px, 0.98vw, 18px);
  line-height: 1.35;
  color: var(--ink-muted);
}

.store-card {
  overflow: hidden;
  border-radius: 22px;
  background: var(--charcoal);
  color: var(--on-dark);
  box-shadow: 0 34px 70px rgba(28, 20, 15, 0.24);
}
.store-photo { height: clamp(210px, 38vh, 420px); }
.store-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
}
.store-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: clamp(14px, 1.9vh, 22px);
}
.store-cell {
  padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1vw, 20px);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--charcoal-2);
}
.cell-tag {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-size: clamp(13px, 0.86vw, 16px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--corn);
}
.store-cell b {
  display: block;
  font-family: var(--display);
  font-size: clamp(19px, 1.32vw, 25px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--on-dark);
}
.store-cell p {
  margin-top: 5px;
  font-size: clamp(14px, 0.95vw, 17px);
  line-height: 1.38;
  color: var(--on-dark-muted);
}

/* ---------------------------------------------------------------
   Slide 3: guest journey (charcoal)
   --------------------------------------------------------------- */
.journey .head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-areas: 'eyebrow .' 'title lead';
  column-gap: clamp(20px, 3vw, 64px);
  align-items: end;
}
.journey .head .eyebrow { grid-area: eyebrow; justify-self: start; }
.journey .head h2 { grid-area: title; }
.journey .head .lead { grid-area: lead; margin: 0; }
.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 28px);
  margin-top: clamp(22px, 4.2vh, 48px);
}
.growth-card {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
  padding: clamp(20px, 2.8vh, 32px) clamp(20px, 1.6vw, 30px);
  border: 1px solid var(--line-dark);
  border-top: 3px solid var(--sign-red);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--charcoal-3) 0%, var(--charcoal-2) 100%);
}
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-num {
  font-family: var(--display);
  font-size: clamp(30px, 2.3vw, 44px);
  font-weight: 800;
  line-height: 1;
  color: var(--corn);
}
.card-tag {
  padding: 6px 12px;
  border: 1px solid rgba(242, 191, 107, 0.4);
  border-radius: 999px;
  font-family: var(--display);
  font-size: clamp(13px, 0.86vw, 15px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.growth-card h3 { color: var(--on-dark); }
.growth-card p {
  flex: 1 1 auto;
  font-size: clamp(15px, 1.06vw, 20px);
  line-height: 1.5;
  color: var(--on-dark-muted);
}
.card-move {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: clamp(12px, 1.6vh, 16px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: clamp(15px, 0.98vw, 18px);
  line-height: 1.4;
  color: var(--on-dark);
}
.card-move .ui-icon { margin-top: 0.18em; color: var(--salsa-hi); font-size: 1.15em; }
.card-move b { color: var(--corn); font-weight: 600; }

/* ---------------------------------------------------------------
   Slide 4: website concept (cream)
   --------------------------------------------------------------- */
.concept .slide-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(calc(var(--site-h) * 1.8654 + 2px), 60%);
  gap: clamp(28px, 3.6vw, 72px);
  align-items: center;
}
.notes { display: grid; gap: clamp(10px, 1.6vh, 18px); margin-top: clamp(18px, 3.4vh, 38px); }
.notes li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: clamp(12px, 1.7vh, 18px) clamp(14px, 1.1vw, 20px);
  border: 1px solid var(--line-light);
  border-left: 3px solid var(--sign-red);
  border-radius: 12px;
  background: var(--cream-2);
}
.note-num {
  min-width: 1.3em;
  font-family: var(--display);
  font-size: clamp(22px, 1.6vw, 30px);
  font-weight: 800;
  line-height: 1;
  color: var(--chile-deep);
}
.notes b {
  display: block;
  font-family: var(--display);
  font-size: clamp(19px, 1.3vw, 24px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}
.notes p {
  margin-top: 4px;
  font-size: clamp(14px, 0.98vw, 18px);
  line-height: 1.42;
  color: var(--ink-muted);
}
.concept-frame .browser { width: 100%; }
.concept-frame figcaption,
.compare-frame figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--display);
  font-size: clamp(14px, 0.92vw, 17px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.concept-frame figcaption { justify-content: center; color: var(--ink-muted); }

/* ---------------------------------------------------------------
   Slide 5: proof (charcoal)
   --------------------------------------------------------------- */
.proof-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 3vw, 64px);
  align-items: end;
}
.proof-head .lead { margin: 0; }
.comparison {
  display: grid;
  grid-template-columns: repeat(2, min(calc(var(--compare-h) * 1.6 + 2px), calc(50% - 24px)));
  justify-content: center;
  gap: clamp(20px, 2.6vw, 48px);
  margin-top: clamp(20px, 3.6vh, 42px);
}
.compare-view {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #FFFFFF;
}
.compare-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.compare-view img.trim { transform: scale(1.016); transform-origin: left top; }
.compare-frame figcaption { color: var(--on-dark-muted); letter-spacing: 0.08em; }
.pill {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.pill.before { border: 1px solid rgba(226, 212, 194, 0.5); color: var(--on-dark); }
.pill.after { background: var(--salsa-hi); color: var(--charcoal); }

/* ---------------------------------------------------------------
   Slide 6: execution roadmap (cream)
   --------------------------------------------------------------- */
.exec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(20px, 3vw, 64px);
  align-items: end;
}
.exec-head .lead { margin: 0; }
.exec-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 26px);
  margin-top: clamp(18px, 3.4vh, 40px);
}
.exec-phase-card {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 14px);
  padding: clamp(18px, 2.6vh, 30px) clamp(18px, 1.5vw, 28px);
  border: 1px solid var(--line-light);
  border-top: 3px solid var(--sign-red);
  border-radius: var(--radius);
  background: var(--cream-2);
  box-shadow: 0 16px 36px rgba(28, 20, 15, 0.08);
  color: var(--ink);
}
.exec-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.exec-phase-num {
  font-family: var(--display);
  font-size: clamp(14px, 0.95vw, 17px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chile-deep);
}
.exec-duration-pill {
  padding: 5px 12px;
  border: 1.5px solid var(--chile-deep);
  border-radius: 999px;
  font-family: var(--display);
  font-size: clamp(13px, 0.86vw, 16px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chile-deep);
}
.exec-phase-card h3 { color: var(--ink); }
.exec-phase-card > p {
  font-size: clamp(15px, 1.04vw, 19px);
  line-height: 1.45;
  color: var(--ink-muted);
}
.exec-deliverables {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: clamp(10px, 1.6vh, 16px);
  border-top: 1px solid var(--line-light);
}
.exec-deliverables li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(14px, 0.98vw, 18px);
  font-weight: 500;
  line-height: 1.38;
  color: var(--ink);
}
.exec-deliverables .ui-icon { margin-top: 0.16em; color: var(--salsa-deep); stroke-width: 2.4; }

.exec-phase-card.featured {
  border-color: rgba(242, 191, 107, 0.3);
  border-top-color: var(--sign-red);
  background: linear-gradient(180deg, #261B15 0%, var(--charcoal) 100%);
  box-shadow: 0 26px 54px rgba(28, 20, 15, 0.28);
  color: var(--on-dark);
}
.featured .exec-phase-num { color: var(--corn); }
.featured .exec-duration-pill { border-color: var(--corn); color: var(--corn); }
.featured h3 { color: var(--on-dark); }
.exec-phase-card.featured > p { color: var(--on-dark-muted); }
.featured .exec-deliverables { border-top-color: rgba(255, 255, 255, 0.12); }
.featured .exec-deliverables li { color: var(--on-dark); }
.featured .exec-deliverables .ui-icon { color: var(--salsa-hi); }

.exec-footer-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 26px);
  margin-top: clamp(14px, 2.6vh, 30px);
}
.exec-footer-bar span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  border-left: 3px solid var(--sign-green);
  font-family: var(--display);
  font-size: clamp(13px, 0.86vw, 15px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.exec-footer-bar b {
  font-family: var(--sans);
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* ---------------------------------------------------------------
   Slide 7: close (charcoal)
   --------------------------------------------------------------- */
.close .slide-body {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: center;
}
.partner-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 1.5vw, 28px);
  align-items: start;
  margin-top: clamp(20px, 3.4vh, 40px);
  padding: clamp(18px, 2.4vh, 28px);
  border: 1px solid var(--line-dark);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--charcoal-3) 0%, var(--charcoal-2) 100%);
}
/* Portrait: equal edge-to-edge square cover crop, no white framing. */
.partner-avatar {
  width: clamp(112px, 12.4vh, 136px);
  height: clamp(112px, 12.4vh, 136px);
  border-radius: 18px;
  object-fit: cover;
  object-position: center 18%;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}
.partner-details b {
  display: block;
  font-family: var(--display);
  font-size: clamp(26px, 1.9vw, 36px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--on-dark);
}
.partner-role {
  display: block;
  margin-top: 4px;
  font-family: var(--display);
  font-size: clamp(14px, 0.92vw, 17px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--corn);
}
.partner-quote {
  margin-top: 12px;
  font-size: clamp(15px, 1.02vw, 19px);
  font-style: italic;
  line-height: 1.5;
  color: var(--on-dark-muted);
}
.partner-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.partner-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(242, 191, 107, 0.36);
  border-radius: 999px;
  font-size: clamp(14px, 0.92vw, 17px);
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
}
.partner-contact a:hover { border-color: var(--corn); color: var(--corn); }
.partner-contact .ui-icon { color: var(--corn); }

.request {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vh, 16px);
  padding: clamp(22px, 3.2vh, 38px) clamp(22px, 2vw, 38px);
  border-top: 5px solid var(--sign-red);
  border-radius: 22px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.45);
}
.request .kicker { color: var(--chile-deep); }
.request h3 { font-size: clamp(36px, 2.8vw, 54px); line-height: 1; color: var(--ink); }
.request > p { font-size: clamp(15px, 1.02vw, 19px); line-height: 1.48; color: var(--ink-muted); }
.screen-request { display: grid; gap: clamp(10px, 1.5vh, 16px); }
.suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.suggestions button {
  min-height: 46px;
  padding: 10px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.suggestions button:hover { background: var(--chile-btn); border-color: var(--chile-btn); color: #FFFFFF; }
.picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.picker-col { display: flex; flex-direction: column; gap: 6px; }
.request label {
  font-family: var(--display);
  font-size: clamp(13px, 0.86vw, 15px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.date-control { position: relative; display: flex; align-items: center; }
.request input {
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 8px 48px 8px 14px;
  border: 1.5px solid rgba(28, 20, 15, 0.3);
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--ink);
  font-size: 16px;
  color-scheme: light;
}
.request input::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.date-control button {
  position: absolute;
  right: 4px;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--chile-deep);
  cursor: pointer;
}
.date-control button:hover { background: rgba(143, 26, 26, 0.08); }
.date-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#picker-help { font-size: 15px; font-weight: 600; color: var(--chile-deep); }
a#contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--chile-btn);
  color: #FFFFFF;
  font-family: var(--display);
  font-size: clamp(16px, 1.08vw, 20px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(158, 28, 26, 0.3);
  transition: transform 0.15s ease, background 0.15s ease;
}
a#contact:hover { background: #861614; transform: translateY(-1px); }
.request small { font-size: clamp(13px, 0.86vw, 15px); line-height: 1.45; color: var(--ink-muted); }
.print-contact { display: none; }

/* ---------------------------------------------------------------
   Controls
   --------------------------------------------------------------- */
.controls {
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 2.4vh, 28px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  transform: translateX(-50%);
  border: 1px solid rgba(242, 191, 107, 0.34);
  border-radius: 999px;
  background: rgba(20, 14, 11, 0.94);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--on-dark);
  font-size: 18px;
  cursor: pointer;
}
.controls button:hover { background: rgba(242, 191, 107, 0.14); }
#counter {
  min-width: 64px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--on-dark);
}
#play {
  padding: 0 18px 0 16px;
  border-left: 1px solid rgba(242, 191, 107, 0.26);
  border-radius: 0 999px 999px 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--corn);
}
.controls button:focus-visible,
.slide a:focus-visible,
.slide button:focus-visible,
.slide input:focus-visible {
  outline: 3px solid var(--corn);
  outline-offset: 2px;
}
.light a:focus-visible, .light button:focus-visible, .request a:focus-visible,
.request button:focus-visible, .request input:focus-visible { outline-color: var(--chile-deep); }

/* Gentle entrance for the active slide's content. */
@media (prefers-reduced-motion: no-preference) {
  .slide.active .slide-body > *,
  .slide.active .hero-copy > *,
  .slide.active .hero-site {
    animation: deck-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .slide.active .slide-body > :nth-child(2),
  .slide.active .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .slide.active .slide-body > :nth-child(3),
  .slide.active .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .slide.active .hero-copy > :nth-child(4) { animation-delay: 0.22s; }
  .slide.active .hero-copy > :nth-child(5) { animation-delay: 0.28s; }
  .slide.active .hero-site { animation-delay: 0.3s; }
  @keyframes deck-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------------------------------------------------------------
   Tablet and phone: slides become natural-height pages that scroll
   --------------------------------------------------------------- */
@media (max-width: 900px), (max-height: 600px) {
  .slide {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: 16px 20px 112px;
    overflow: visible;
  }
  .slide-body { flex: none; padding-top: 22px; }
  .page { display: none; }
  .slide-foot { position: static; display: inline-block; max-width: none; margin-top: 24px; align-self: flex-start; }
}

@media (max-width: 900px) {
  .cover.active { display: flex; flex-direction: column; }
  #scene { width: 100%; height: 70%; }
  .hero-copy { padding: 20px 0 0; }
  .cover { padding: 16px 20px 112px; }
  .cover-logo { height: clamp(120px, 22vw, 190px); }
  h1 { font-size: clamp(38px, 9vw, 64px); }
  h2 { font-size: clamp(32px, 7.4vw, 52px); }
  .hero-copy h1 { white-space: normal; }
  .hero-stage { margin-top: 28px; height: auto; }
  .hero-stage::before { display: none; }
  .hero-photo { height: clamp(360px, 92vw, 640px); border-radius: 20px; }
  .hero-site { position: relative; left: auto; bottom: auto; width: 92%; margin: -96px auto 0; }

  .brand-emblem { height: 44px; }
  .brand-wordmark { height: 36px; }
  .header-tag { font-size: 13px; gap: 10px; }

  .journey .head { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'eyebrow' 'title' 'lead'; row-gap: 0; }
  .journey .head .lead { margin-top: 16px; }
  .foundation .slide-body,
  .concept .slide-body,
  .close .slide-body,
  .proof-head,
  .exec-head { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .journey-grid, .exec-cards-grid, .exec-footer-bar { grid-template-columns: minmax(0, 1fr); }
  .comparison { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .concept .slide-body { grid-template-columns: minmax(0, 1fr); }
  .proof-head .lead, .exec-head .lead { margin-top: 0; }
}

@media (max-width: 560px) {
  .slide, .cover { padding-left: 16px; padding-right: 16px; }
  .slide > header { gap: 12px; }
  .brand-plate { padding: 7px 12px 7px 9px; gap: 8px; }
  .brand-emblem { height: 38px; }
  .brand-wordmark { height: 31px; }
  .header-tag { font-size: 0; gap: 0; }
  .header-tag b { font-size: 13px; }
  .stat-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .stat-row div { display: flex; align-items: baseline; gap: 14px; }
  .stat-row dd { margin: 0; }
  .store-grid { grid-template-columns: minmax(0, 1fr); }
  .partner-card { grid-template-columns: minmax(0, 1fr); }
  .suggestions, .picker-grid { grid-template-columns: minmax(0, 1fr); }
  .location-chips li { font-size: 14px; }
  .controls { bottom: 10px; }
  #play { padding: 0 12px; font-size: 13px; }
  .compare-frame figcaption { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------
   Print: one slide per 16:9 page, colours kept, no screen controls
   --------------------------------------------------------------- */
@media print {
  @page { size: 13.333in 7.5in; margin: 0; }
  html, body { background: #FFFFFF; }
  #deck { overflow: visible; }
  .controls, #scene, .screen-request { display: none !important; }
  .slide, .slide.active {
    display: flex !important;
    width: 13.333in;
    height: 7.5in;
    min-height: 0;
    break-after: page;
    page-break-after: always;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .cover, .cover.active { display: grid !important; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .slide * { animation: none !important; }
  .print-contact {
    display: block;
    font-size: 13pt;
    font-weight: 700;
    color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}