/* DeskDuo: colour chapters in the mood board palette. Flat fields, square media, round buttons, one accent mark. */
@font-face { font-family: "Open Sauce One"; src: url("fonts/open-sauce-one-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sauce One"; src: url("fonts/open-sauce-one-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Open Sauce One"; src: url("fonts/open-sauce-one-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Mood board: #e7e2e3, #691223, #e6003e, #262626, #ffffff, plus the pink inside the #691223 swatch */
  --ground: #e7e2e3;
  --ink: #262626;
  --wine: #691223;
  --red: #e6003e;
  --white: #ffffff;
  --pink: #facfda;

  /* Headings: Architype Bayer-Type in the brand guide; Italiana stands in until the web licence is bought.
     Details: Rumble Brave Script in the guide; Yesteryear stands in. */
  --font: "Open Sauce One", system-ui, sans-serif;
  --font-head: "Italiana", "Open Sauce One", sans-serif;
  --font-script: "Yesteryear", cursive;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.4rem + 4vw, 5.25rem);
  --step-display: clamp(3.75rem, 1rem + 8vw, 9rem);

  --m: clamp(16px, 4vw, 56px);
  --gap: clamp(120px, 14vw, 200px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--red); color: var(--white); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bayer-Type is a lowercase alphabet, so the big type is set in lowercase */
.display, .head, .sub-lg, .ticket-name, .tile-face span, .cta-word, .foot-email {
  font-family: var(--font-head); font-weight: 400; text-transform: lowercase;
}
.display { font-size: var(--step-display); line-height: .95; letter-spacing: -0.01em; }
.head { font-size: var(--step-head); line-height: 1; letter-spacing: 0; }
.lead { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.01em; }
.sub { font-size: var(--step-lead); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; }
.sub-lg { font-size: var(--step-head); line-height: 1; }
.script { font-family: var(--font-script); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* The accent mark: a four-point sparkle, drawn from the logo */
.spark { display: block; aspect-ratio: 283 / 364; fill: currentColor; }

/* Buttons: one shape, fully round, flat fill */
.btn {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0 30px;
  border-radius: 999px; font-weight: 500; text-decoration: none; font-size: var(--step-body);
  transition: transform .25s var(--ease), background-color .2s, color .2s;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-wine { background: var(--wine); color: var(--white); }
.btn-wine:hover { background: var(--red); }
.btn-light { background: var(--white); color: var(--wine); }
.btn-light:hover { background: var(--pink); }

/* Nav */
.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px var(--m);
}
.logo { display: block; text-decoration: none; }
.logo img { height: 34px; width: auto; }
.nav nav { display: flex; gap: 32px; }
.nav nav a, .nav-menu { text-decoration: none; font-weight: 500; position: relative; }
.nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav nav a:hover::after, .nav nav a:focus-visible::after { transform: scaleX(1); }
.nav-menu { display: none; }

/* HERO: two giant discs, cropped by the right edge; the sparkle sits where they meet */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, 1fr); align-items: center;
  padding: 120px var(--m) 80px;
}
.hero-copy { grid-column: 1 / 7; position: relative; z-index: 2; }
.hero-copy .line { display: block; }
.hero-sub { max-width: 30ch; margin-top: 32px; }
.hero-typed { margin-top: 12px; color: var(--red); font-size: clamp(2rem, 1rem + 2.2vw, 3.25rem); line-height: 1.1; min-height: 1.1em; }
.caret { display: inline-block; width: 2px; height: .8em; margin-left: 4px; background: currentColor; vertical-align: -.05em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.trail { position: absolute; z-index: 3; width: 14px; pointer-events: none; color: var(--pink); }

/* MARQUEE: one slow red strip, faster when you scroll */
.marquee { background: var(--red); color: var(--white); overflow: hidden; padding: 22px 0; }
.marquee-track { display: flex; align-items: center; gap: 40px; width: max-content; font-family: var(--font-head); font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); line-height: 1; text-transform: lowercase; white-space: nowrap; }
.marquee-track .spark { width: .5em; height: .64em; flex: none; color: var(--pink); }

/* Script accents: one handwritten note under each heading */
.accent { font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem); line-height: 1; color: var(--red); transform: rotate(-4deg); transform-origin: left; margin-top: 20px; white-space: nowrap; }
.about .accent { color: var(--pink); }
.services .accent { color: var(--white); }
.hero-copy .btn { margin-top: 40px; }
.hero-shapes { position: absolute; inset: 0; pointer-events: none; --D: min(80vh, 56vw); }
.disc { position: absolute; border-radius: 50%; width: var(--D); aspect-ratio: 1; top: 50%; }
.disc-wine { background: var(--wine); left: 46%; transform: translateY(-50%); overflow: hidden; }
/* The woman sits in the left half of the wine desk, so the red desk overlaps her blazer, not her face */
.disc-wine img { position: absolute; width: 200%; max-width: none; height: auto; left: -92%; top: -20%; filter: grayscale(1) contrast(1.08); }
.disc-red { background: var(--red); left: 70%; transform: translateY(-38%); mix-blend-mode: multiply; }
.lab { position: absolute; z-index: 2; font-weight: 500; font-size: var(--step-lead); line-height: 1.1; max-width: 9ch; color: var(--white); }
.lab-wine { background: var(--wine); padding: 6px 12px; border-radius: 999px; max-width: none; left: calc(46% + var(--D) * .14); top: calc(50% - var(--D) * .12); }
.lab-overlap { left: calc(70% + var(--D) * .05); top: calc(50% - .4em); max-width: none; font-size: clamp(2rem, 1rem + 2.4vw, 3.5rem); }
.lab-red { left: calc(70% + var(--D) * .25); top: calc(50% + var(--D) * .4); }
.hero-spark { position: absolute; z-index: 2; color: var(--white); width: calc(var(--D) * .075); left: calc(70% + var(--D) * .24); top: calc(50% - var(--D) * .26); }

/* ABOUT: inset wine panel */
.about { padding: 20px; }
.panel {
  position: relative; overflow: hidden; background: var(--wine); color: var(--white);
  min-height: 110svh; display: grid; grid-template-columns: repeat(12, 1fr);
  padding: 56px calc(var(--m) - 20px);
}
.about-left { grid-column: 1 / 7; position: relative; }
.about-left .head { max-width: 10ch; }
.desk-photo { position: absolute; left: 0; bottom: -56px; width: min(38vw, 640px); }
.desk-photo .shutter { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--pink); }
.desk-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; filter: grayscale(1) contrast(1.08); }
.about-right { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 64px; align-items: flex-start; padding-top: 8px; }
.desk-block { max-width: 34ch; }
.desk-block .sub { margin-bottom: 16px; display: flex; gap: 12px; align-items: flex-start; }
.desk-block .spark { width: 18px; flex: none; margin-top: 2px; }
.desk-block .spark.red { color: var(--red); }
.desk-block .spark.white { color: var(--white); }

/* SERVICES: red field, rows hanging from an axis at column 5 */
.services { background: var(--red); color: var(--white); padding: 0 var(--m) 96px; }
.services-intro { display: flex; flex-direction: column; align-items: flex-start; padding: 200px 0 140px calc(33.33% + 32px); }
.services-intro .head { max-width: 12ch; }
.rows { display: flex; flex-direction: column; gap: clamp(72px, 9vw, 120px); }
.row { display: grid; grid-template-columns: 33.33% 1fr auto; gap: 32px; align-items: start; }
.row-text { grid-column: 2; max-width: 34ch; }
.row-text p { margin-top: 20px; }
/* Every service photo is the same arch, like a row of posts */
.row-photo { grid-column: 3; position: relative; width: 260px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 130px 130px 0 0; background: var(--wine); }
.row-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transform: scale(1.12); transition: transform .9s var(--ease); }
.row-spark { position: absolute; right: 18px; top: 22%; width: 26px; height: 34px; color: var(--white); opacity: 0; transform: scale(.96) rotate(-30deg); transition: transform .6s var(--ease), opacity .4s; }
.curtain { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.curtain i { position: absolute; inset: 0; transform-origin: top; }
.curtain i:first-child { background: var(--wine); } .curtain i:last-child { background: var(--red); }
.services .curtain i:last-child { background: var(--pink); }
.row .sub-lg { position: relative; display: inline-block; }
.row .sub-lg::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
@media (hover: hover) {
  .row:hover .row-photo img { transform: scale(1.2) !important; }
  .row:hover .row-spark { opacity: 1; transform: scale(1) rotate(0); }
  .row:hover .sub-lg::after { transform: scaleX(1); }
}

/* TRY: type your name, see a post made for you */
.try { background: var(--ground); color: var(--ink); padding: var(--gap) var(--m) 120px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: center; }
.try-copy { grid-column: 1 / 7; }
.try-copy .head { color: var(--wine); max-width: 14ch; }
.try-sub { margin-top: 32px; max-width: 34ch; }
.try-form { margin-top: 48px; display: flex; flex-direction: column; gap: 28px; max-width: 520px; }
.try-field { display: flex; flex-direction: column; gap: 10px; font-weight: 500; }
.try-field input {
  font: inherit; font-size: var(--step-lead); font-weight: 400; color: var(--ink);
  min-height: 60px; padding: 0 22px; border: 0; border-radius: 16px; background: var(--white);
}
.try-field input::placeholder { color: #8a8486; }
.try-field input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatches label { position: relative; cursor: pointer; }
.swatches input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.swatches span { display: block; width: 44px; height: 44px; border-radius: 50%; transition: transform .2s var(--ease); }
.swatches label:hover span { transform: scale(1.08); }
.swatches input:checked + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.swatches input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 3px; }
.chips.light span { background: var(--white); color: var(--ink); }
.chips.light label:hover span { background: var(--pink); }
.chips.light input:checked + span { background: var(--wine); color: var(--white); }

.ig { grid-column: 8 / 13; justify-self: center; width: 100%; max-width: 440px; background: var(--white); border-radius: 20px; overflow: hidden; --c: #691223; --on: #ffffff; }
.ig-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.ig-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--on); font-weight: 600; font-size: 16px; transition: background-color .4s; }
.ig-who { display: flex; flex-direction: column; line-height: 1.25; font-size: 15px; min-width: 0; }
.ig-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-who span { font-size: 14px; color: #5c5658; }
.ig-post { position: relative; aspect-ratio: 1; background: var(--c); color: var(--on); padding: 9%; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; overflow: hidden; transition: background-color .4s, color .4s; }
.ig-small { font-size: 15px; font-weight: 500; max-width: 26ch; }
.ig-big { font-weight: 600; font-size: clamp(30px, 3vw, 44px); line-height: 1.02; letter-spacing: -0.02em; max-width: 13ch; overflow-wrap: anywhere; }
.ig-post[data-kind="offer"] .ig-big { font-family: var(--font-head); font-weight: 400; font-size: clamp(44px, 4.6vw, 68px); line-height: .95; text-transform: lowercase; letter-spacing: 0; }
.ig-post[data-kind="offer"] { justify-content: space-between; }
.ig-post[data-kind="review"] .ig-big { font-family: var(--font-script); font-weight: 400; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.1; letter-spacing: 0; max-width: 14ch; }
.ig-post[data-kind="review"] { justify-content: center; }
.ig-post[data-kind="team"] .ig-big { font-family: var(--font-head); font-weight: 400; font-size: clamp(38px, 4vw, 58px); line-height: .95; letter-spacing: 0; }
.ig-post[data-kind="team"] { justify-content: flex-start; }
.ig-post[data-kind="team"] .ig-small { margin-top: auto; }
.ig-spark { position: absolute; top: 8%; right: 8%; width: 26px; color: var(--on); }
.ig-actions { display: flex; gap: 16px; padding: 14px 16px 8px; }
.ig-actions svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.ig-caption { padding: 0 16px 18px; font-size: 15px; line-height: 1.4; }
.ig-caption b { font-weight: 600; }

/* WORK: staggered tiles with empty cells */
.work { padding: 100px var(--m) 140px; background: var(--white); }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 16px; align-items: start; }
.work-head { grid-column: 3; grid-row: 1; align-self: start; }
.work-head p { margin-top: 24px; max-width: 26ch; }
.tile { display: flex; flex-direction: column; gap: 12px; }
.tile-face { position: relative; display: flex; align-items: flex-end; padding: 6%; aspect-ratio: 4 / 5; overflow: hidden; }
.tile.wide .tile-face { aspect-ratio: 3 / 2; }
.tile-face span { font-size: var(--step-head); line-height: .9; transition: transform .5s var(--ease); }
.tile-face .spark { position: absolute; top: 8%; right: 8%; width: clamp(18px, 2.2vw, 30px); opacity: 0; transform: scale(.4) rotate(-45deg); transition: opacity .3s, transform .5s var(--ease); }
.tile:hover .tile-face span { transform: translateY(-8px); }
.tile:hover .tile-face .spark { opacity: 1; transform: none; }
.cap { display: flex; justify-content: space-between; gap: 16px; font-size: var(--step-small); }
.cap span:first-child { font-weight: 500; }
.cap span:last-child { text-align: right; }
.t-a { grid-column: 1 / 3; grid-row: 1; }
.t-b { grid-column: 4; grid-row: 1; }
.t-c { grid-column: 2; grid-row: 2; }
.t-d { grid-column: 3; grid-row: 2; }
.t-e { grid-column: 3 / 5; grid-row: 3; }
.t-f { grid-column: 1; grid-row: 3; }
.t-g { grid-column: 1; grid-row: 4; }
.t-h { grid-column: 4; grid-row: 4; }
.f-wine { background: var(--wine); color: var(--white); }
.f-red { background: var(--red); color: var(--white); }
.f-ink { background: var(--ink); color: var(--white); }
.f-pink { background: var(--pink); color: var(--wine); }
.f-ground { background: var(--ground); color: var(--wine); }
.f-white { background: var(--white); color: var(--wine); }
.f-pink .spark, .f-ground .spark, .f-white .spark { color: var(--red); }
.f-wine .spark, .f-red .spark, .f-ink .spark { color: var(--white); }

/* PRICING: dark field, glass builder, ticket */
.pricing { background: var(--ink); color: var(--white); padding: 140px var(--m) var(--gap); overflow: hidden; }
.pricing-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 4vw, 56px); row-gap: 32px; align-items: end; margin-bottom: 72px; }
.pricing-head .head { grid-column: 1; }
.pricing-head .lead { grid-column: 2; grid-row: 1 / span 2; max-width: 38ch; }
.pricing-head .accent { grid-column: 1; margin-top: -12px; }
.builder { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.orbs { position: absolute; inset: -10% auto auto -6%; width: 46%; height: 110%; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; width: 70%; aspect-ratio: 1; }
.orb-wine { background: var(--wine); left: 0; top: 4%; }
.orb-red { background: var(--red); left: 34%; top: 38%; }

/* The one glass panel on the page (DeskDuo's choice) */
.glass {
  position: relative; z-index: 1;
  background: rgba(38, 38, 38, .4);
  -webkit-backdrop-filter: blur(30px) saturate(160%); /* taste-skill-ignore: client chose one glass panel */
  backdrop-filter: blur(30px) saturate(160%); /* taste-skill-ignore */
  border: 1px solid rgba(255, 255, 255, .28); /* taste-skill-ignore: glass edge */
  border-radius: 28px;
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 28px;
}
fieldset { border: 0; margin: 0; padding: 0; }
legend { font-weight: 500; margin-bottom: 12px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: var(--white); font-size: var(--step-small); font-weight: 500;
  transition: background-color .2s, color .2s, transform .2s var(--ease);
}
.chips label:hover span { background: rgba(255, 255, 255, .26); }
.chips input:checked + span { background: var(--white); color: var(--wine); }
.chips input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.chips label:active span { transform: scale(.96); }

.result { display: flex; flex-direction: column; gap: 48px; }
.ticket {
  position: relative; display: grid; grid-template-columns: 7fr 3fr;
  background: var(--white); color: var(--ink); min-height: 300px;
}
.ticket-main { padding: 36px 40px; display: flex; flex-direction: column; }
.ticket-name { font-size: var(--step-head); line-height: .95; color: var(--wine); }
.ticket-tag { margin-top: 8px; color: var(--red); font-weight: 500; }
.ticket-lines { margin-top: auto; padding-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.ticket-lines li { position: relative; padding-left: 20px; }
.ticket-lines li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 11px; height: 14px; background: var(--red);
  -webkit-mask: url("brand/spark.svg") center / contain no-repeat; mask: url("brand/spark.svg") center / contain no-repeat;
}
.ticket-lines li.add { color: var(--wine); font-weight: 500; }
.ticket-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px;
  padding: 32px 20px 0;
  border-left: 6px dotted var(--ink);
}
.ticket-price { font-family: var(--font-head); font-size: var(--step-head); line-height: 1; color: var(--wine); }
.ticket-per { font-size: var(--step-small); }
.ticket-cta {
  margin-top: auto; align-self: stretch; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; margin-left: -20px; margin-right: 0; padding: 8px 12px;
  background: var(--wine); color: var(--white); text-decoration: none; font-weight: 500; font-size: var(--step-small);
  transition: background-color .2s;
}
.ticket-cta:hover { background: var(--red); }
.notch { position: absolute; left: 70%; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); }
.notch-top { top: -14px; } .notch-bottom { bottom: -14px; }

.month-title { margin-bottom: 20px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal li { min-height: 76px; background: rgba(255, 255, 255, .07); padding: 8px; font-size: var(--step-small); line-height: 1.2; display: flex; flex-direction: column; gap: 4px; }
.cal li .d { opacity: .7; }
.cal li.post { background: var(--white); color: var(--ink); }
.cal li.post.reel { background: var(--red); color: var(--white); }
.cal li.post.ad { background: var(--pink); }
.cal li .k { font-weight: 600; color: var(--wine); }
.cal li.reel .k { color: var(--white); }
.cal-note { margin-top: 16px; font-size: var(--step-small); max-width: 52ch; }

.price-list { margin-top: 120px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 4vw, 56px); row-gap: 32px; }
.price-list .sub { grid-column: 1; }
.prices { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; }
.prices div { display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; }
.prices dt { font-weight: 500; color: var(--pink); }
.fine { grid-column: 2; font-size: var(--step-small); max-width: 60ch; }

/* HOW IT WORKS: tiles that grow */
.process { background: var(--pink); color: var(--ink); padding: 140px var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 10px; align-items: end; }
.process-title { grid-column: 1 / 7; grid-row: 1; align-self: start; max-width: 11ch; position: relative; z-index: 1; color: var(--wine); }
.steps { grid-column: 1 / 13; grid-row: 1; display: grid; grid-template-columns: 2fr 2fr 2fr 3fr 3fr; gap: 10px; align-items: end; }
.step { display: flex; flex-direction: column; gap: 10px; }
.step-tile { display: flex; align-items: flex-end; padding: 18px; transform-origin: bottom; }
.step-tile span { font-weight: 600; font-size: var(--step-lead); line-height: 1.05; letter-spacing: -0.02em; max-width: 12ch; }
.s1 .step-tile { height: 26vh; } .s2 .step-tile { height: 34vh; } .s3 .step-tile { height: 44vh; }
.s4 .step-tile { height: 54vh; } .s5 .step-tile { height: 64vh; }
.step .sub { margin-top: 8px; }
.step p { max-width: 26ch; min-height: 3lh; }

/* CTA: one word is the button */
.cta { background: var(--pink); }
.cta-band {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr;
  column-gap: 32px; min-height: 60svh; background: var(--wine); color: var(--white);
  text-decoration: none; overflow: hidden; padding: 40px var(--m) 32px;
  border-radius: 48px 48px 0 0; transition: background-color .3s, color .3s;
}
.cta-band:hover, .cta-band:focus-visible { background: var(--ground); color: var(--wine); }
.cta-note { grid-column: 1; grid-row: 1; display: block; max-width: 34ch; font-size: var(--step-lead); line-height: 1.25; }
.cta-arrow { grid-column: 2; grid-row: 1; justify-self: end; width: 48px; height: 48px; transition: transform .3s var(--ease); }
.cta-band:hover .cta-arrow { transform: translate(6px, -6px); }
.cta-word {
  grid-column: 1; grid-row: 2; align-self: end; margin: 56px 0 0 -0.04em;
  font-size: clamp(6rem, 19vw, 21rem); line-height: .8; letter-spacing: -0.02em;
}
.cta-spark { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; width: clamp(64px, 10vw, 160px); margin-bottom: 8px; color: var(--red); transition: transform .6s var(--ease); }
.cta-band:hover .cta-spark { transform: rotate(90deg) scale(1.1); }

/* FOOTER: contact as the headline */
.footer { background: var(--ground); color: var(--ink); min-height: 50svh; padding: 40px var(--m) 32px; display: flex; flex-direction: column; }
.foot-top { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; font-size: var(--step-small); align-items: start; }
.foot-top .logo { grid-column: 1 / 3; }
.foot-top .logo img { height: 26px; }
.foot-top p:nth-of-type(1) { grid-column: 3 / 6; }
.foot-top p:nth-of-type(2) { grid-column: 6 / 9; }
.to-top { grid-column: 11 / 13; justify-self: end; font-weight: 500; }
.foot-sign { position: relative; z-index: 1; margin-top: auto; padding-top: 48px; font-size: clamp(1.75rem, 1rem + 2vw, 3rem); color: var(--red); line-height: 1; }
.foot-email {
  display: block; text-decoration: none; margin-top: 8px;
  font-size: clamp(1.75rem, 3.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--wine);
  transition: color .2s;
}
.foot-email:hover { color: var(--red); }
.foot-email span { display: inline; }
.foot-meta { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: var(--step-small); }
.foot-meta p:last-child { text-align: right; }
.foot-meta a { text-underline-offset: 2px; }

/* Phone and tablet compositions */
@media (max-width: 900px) {
  .nav nav { display: none; }
  .nav-menu { display: inline; }
  .logo img { height: 26px; }
  .hero { display: block; padding-top: 15svh; min-height: 100svh; }
  .hero h1 { font-size: 16vw; }
  .hero-sub { font-size: 17px; margin-top: 24px; }
  .hero-copy .btn { margin-top: 24px; }
  .disc { width: 110vw; top: auto; }
  .disc-wine { left: -32vw; top: 69svh; transform: none; }
  .disc-red { left: 26vw; top: 77svh; transform: none; }
  .lab { font-size: 17px; }
  .lab-wine { left: 6vw; top: 77svh; }
  .lab-red { left: 70vw; top: 81svh; }
  .lab-overlap { left: 20vw; top: 93svh; font-size: 30px; }
  .hero-spark { width: 30px; left: 54vw; top: 87svh; }

  .about { padding: 10px; }
  .panel { display: flex; flex-direction: column; gap: 40px; padding: 40px 18px 0; min-height: 0; }
  .about-left .head { font-size: 11vw; }
  .about-right { gap: 36px; padding-bottom: 8px; }
  .desk-photo { position: relative; bottom: auto; width: 86vw; margin: 0 auto -22vw; order: 3; }
  .about-left { display: contents; }

  .services-intro { padding: 112px 0 80px; }
  .row { grid-template-columns: 1fr; gap: 20px; }
  .row-text, .row-photo { grid-column: 1; }
  .row-photo { width: min(100%, 400px); border-radius: 200px 200px 0 0; }
  .pricing-head .accent { margin-top: 20px; }
  .accent { padding-left: 6px; }
  .row-spark { transform: none; opacity: 1; }
  .hero-typed { font-size: 32px; margin-top: 8px; }
  .marquee { padding: 16px 0; }
  .rows { gap: 64px; }

  .try { display: block; padding: 96px var(--m); }
  .try-copy .head { font-size: 11vw; }
  .try-sub { margin-top: 24px; }
  .try-form { margin-top: 36px; }
  .ig { margin-top: 48px; }
  .ig-big { font-size: clamp(26px, 8vw, 40px); }

  .work-grid { grid-template-columns: 1fr 1fr; gap: 76px 10px; }
  .work-head { grid-column: 1 / 3; grid-row: auto; }
  .tile { grid-row: auto !important; }
  .tile.wide { grid-column: 1 / 3 !important; }
  .t-b, .t-d, .t-f, .t-h { grid-column: 2 !important; }
  .t-c, .t-g { grid-column: 1 !important; }
  .cap { flex-direction: column; gap: 2px; }
  .cap span:last-child { text-align: left; }
  .tile-face .spark { opacity: 1; transform: none; }

  .pricing-head { display: block; }
  .pricing-head .lead { margin-top: 20px; }
  .builder { grid-template-columns: 1fr; }
  .orbs { width: 80%; height: 40%; inset: 2% auto auto 4%; }
  .result { margin-top: 48px; }
  .ticket { grid-template-columns: 1fr; }
  .ticket-main { padding: 48px 22px 28px; }
  .ticket-lines { grid-template-columns: 1fr; }
  .ticket-stub { padding: 56px 20px 0; border-left: 0; border-top: 6px dotted var(--ink); }
  .ticket-price { font-size: clamp(56px, 15vw, 64px); }
  .ticket-cta { margin: 24px -20px 0; align-self: stretch; }
  .notch { display: none; }
  .cal { grid-template-columns: 1fr 1fr; gap: 6px; }
  .cal li:not(.post) { display: none; }
  .cal li { min-height: 0; padding: 10px; }
  .price-list { display: block; margin-top: 96px; }
  .prices { grid-template-columns: 1fr; margin-top: 24px; gap: 4px; }
  .fine { margin-top: 16px; }

  .process { display: block; padding: 96px var(--m); }
  .process-title { font-size: 11vw; margin-bottom: 40px; max-width: none; }
  .step p, .step-tile span { max-width: none; }
  .step p { min-height: 0; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .step-tile { align-items: flex-start; }
  .s1 .step-tile { height: 20vw; } .s2 .step-tile { height: 24vw; } .s3 .step-tile { height: 28vw; }
  .s4 .step-tile { height: 32vw; } .s5 .step-tile { height: 36vw; }
  .row-photo { width: 100%; max-width: none; aspect-ratio: 5 / 4; border-radius: 180px 180px 0 0; }
  .row-photo img { object-position: 50% 30%; }

  .cta-band { min-height: 46svh; grid-template-rows: auto auto 1fr; column-gap: 16px; padding-top: 32px; border-radius: 32px 32px 0 0; }
  .cta-note { font-size: 17px; max-width: 30ch; }
  .cta-arrow { width: 32px; height: 32px; }
  .cta-spark { grid-row: 2; width: 64px; margin: 24px 0 0; align-self: start; }
  .cta-word { grid-column: 1 / -1; grid-row: 3; margin-top: 24px; font-size: 36vw; }

  .footer { min-height: 0; padding-top: 56px; }
  .foot-top { display: flex; flex-direction: column; gap: 12px; }
  .foot-sign { margin-top: 0; padding-top: 72px; }
  .foot-email { font-size: 6.6vw; }
  .foot-meta { grid-template-columns: 1fr; gap: 10px; }
  .foot-meta p:last-child { text-align: left; }
}

@media (min-width: 600px) and (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 40px; align-items: end; }
  .s5 { grid-column: 1 / 3; }
  .s1 .step-tile { height: 18vw; } .s2 .step-tile { height: 24vw; } .s3 .step-tile { height: 30vw; }
  .s4 .step-tile { height: 36vw; } .s5 .step-tile { height: 26vw; }
  .hero-sub { max-width: none; }
  .tile-face { aspect-ratio: 1; } .tile.wide .tile-face { aspect-ratio: 2 / 1; }
  .cta-note { max-width: 40ch; font-size: var(--step-lead); }
  .row-photo { width: min(100%, 400px); aspect-ratio: 4 / 5; border-radius: 200px 200px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .row-photo img { transform: none; }
  .caret { animation: none; }
}