/* ==========================================================================
   Cherry On Top — hero preview
   Same system as the live site: palette sampled from the logo (mint
   ground, cherry pink, deep plum ink), Bricolage Grotesque for display,
   Instrument Sans for body, Instrument Serif italic for accents.
   ========================================================================== */

:root {
  --paper: #e4f1ef;
  --paper-2: #f2faf8;
  --paper-3: #d3e8e5;

  --ink: #14101d;
  --ink-2: #3b3448;
  --ink-3: #6b6478;

  --cream: #fff6f0;
  --cherry: #e8385f;
  --cherry-2: #c62348;
  --cherry-3: #ff5c7f;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --edge: clamp(1.25rem, 5vw, 5rem);
  --header-h: 5rem;
}

@media (min-width: 768px) {
  :root {
    --header-h: 6.5rem;
  }
}

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

html {
  background: var(--paper);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1,
h2,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

/* height:auto matters as much as max-width — images carry width/height
   attributes, and without it the intrinsic height sticks. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--cherry);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--cherry-3);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  margin: 0;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  background: var(--cherry);
  color: #fff;
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.edge {
  padding-inline: var(--edge);
}

.label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Leading 0.95, not tighter: below that, descenders of one line land in
   the ascenders of the next at this size. */
.display-hero {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-size: clamp(2.5rem, 4.7vw, 5.25rem);
}

.eyebrow {
  color: var(--ink-3);
}

.lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-2);
}

/* Film grain. One inline SVG turbulence, no image request. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 0, not above the content: drawn over the photos it laid a grey haze
     across them. Now it only textures the mint ground. */
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding-inline: 1.4rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.3s,
    border-color 0.3s,
    color 0.3s,
    box-shadow 0.3s,
    transform 0.3s var(--ease-out-expo);
  will-change: transform;
}

.btn > span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: transform 0.3s var(--ease-out-expo);
}

.btn--lg {
  height: 3.5rem;
  padding-inline: 1.9rem;
  font-size: 0.95rem;
}

.btn--cherry {
  background: var(--cherry);
  color: #fff;
  box-shadow: 0 12px 32px -12px rgba(232, 56, 95, 0.75);
}

.btn--cherry:hover {
  background: var(--cherry-3);
}

.btn--outline {
  background: rgba(242, 250, 248, 0.55);
  color: var(--ink);
  border: 1px solid rgba(20, 16, 29, 0.18);
}

.btn--outline .icon {
  color: var(--cherry);
}

.btn--outline:hover {
  border-color: var(--cherry);
  background: #fff;
}

/* --------------------------------------------------------------------------
   Header
   Tall with a big logo on load; condenses once the page moves.
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.45s,
    border-color 0.45s,
    backdrop-filter 0.45s;
}

.header.is-stuck {
  background: rgba(228, 241, 239, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: rgba(20, 16, 29, 0.1);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
  transition: height 0.5s var(--ease-out-expo);
}

.header.is-stuck .header__bar {
  height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand img {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(20, 16, 29, 0.08),
    0 6px 18px -8px rgba(198, 35, 72, 0.45);
  transition:
    width 0.5s var(--ease-out-expo),
    height 0.5s var(--ease-out-expo);
}

.header.is-stuck .brand img {
  width: 40px;
  height: 40px;
}

.brand__text {
  display: none;
  line-height: 1;
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: font-size 0.5s var(--ease-out-expo);
}

.header.is-stuck .brand__name {
  font-size: 1.02rem;
}

.brand__sub {
  display: block;
  margin-top: 0.35rem;
  color: var(--ink-3);
}

.nav {
  display: none;
  align-items: center;
  gap: 0.15rem;
}

.nav a {
  position: relative;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.25s;
}

.nav a:hover {
  color: var(--ink);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.2rem;
  height: 1px;
  background: var(--cherry);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out-expo);
}

.nav a:hover::after {
  transform: scaleX(1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.header__phone,
.header__cta {
  display: none;
}

.header__call {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--cherry);
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 10px 24px -12px rgba(232, 56, 95, 0.8);
}

.burger {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(20, 16, 29, 0.2);
}

.burger span {
  position: relative;
  display: block;
  width: 20px;
  height: 12px;
}

.burger i {
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: all 0.3s var(--ease-out-expo);
}

.burger i:nth-child(1) {
  top: 0;
}
.burger i:nth-child(2) {
  top: 5px;
}
.burger i:nth-child(3) {
  top: 10px;
}

.burger[aria-expanded="true"] i:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}
.burger[aria-expanded="true"] i:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] i:nth-child(3) {
  top: 5px;
  transform: rotate(-45deg);
}

/* Starts below the fixed header and scrolls if the list is taller than
   the screen — centring it lets the first link slide up under the brand. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(228, 241, 239, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 6.5rem;
  padding-bottom: 2rem;
  overflow-y: auto;
}

.sheet[hidden] {
  display: none;
}

.sheet a.sheet__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(20, 16, 29, 0.12);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.sheet__num {
  color: var(--cherry);
}

.sheet__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 1.5rem);
  padding-bottom: 3rem;
  overflow: hidden;
  background: var(--paper);
  /* Sideways swipes swing a cherry; vertical swipes still scroll. */
  touch-action: pan-y pinch-zoom;
}

/* Soft colour fields, the "sweet" part of the palette. */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__glow i {
  position: absolute;
  border-radius: 999px;
  filter: blur(110px);
}

.hero__glow i:nth-child(1) {
  left: 30%;
  top: -10%;
  width: 70vh;
  height: 70vh;
  background: rgba(232, 56, 95, 0.13);
}

.hero__glow i:nth-child(2) {
  left: -15%;
  bottom: -25%;
  width: 60vh;
  height: 60vh;
  background: rgba(159, 217, 232, 0.4);
}

/* ---- background cherries ------------------------------------------------
   Phones: they hang behind the top of the photo, clear of the copy.
   Tablet and up: positioned against the whole hero (their column goes
   static), beside the copy and behind the headline. --cw lives on the
   hero so the photo column can size its own gap from it. */
.hero {
  --cw: min(86vw, 360px);
}

.cherries {
  position: absolute;
  z-index: 1;
  /* Phones: the knot sits in the gap between the call button and the
     review badges, so the cherries hang behind the badges instead of
     adding their own block above the photo. 11.4rem = two rows of
     badges, the row gap and the grid gap; 4.6% of the box is the
     knot's own offset from the top of the SVG. */
  top: calc(-11.4rem - var(--cw) * 0.046);
  left: calc(50% - var(--cw) / 2);
  width: var(--cw);
  aspect-ratio: 480 / 520;
  pointer-events: none;
  /* Big but quiet: they're the backdrop, the work is the subject. */
  opacity: 0.7;
}

.cherries svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero.is-over-cherry {
  cursor: grab;
}

.hero.is-grabbing,
.hero.is-grabbing * {
  cursor: grabbing !important;
}

.stem__line,
.stem__fill,
.stem__shine {
  fill: none;
  stroke-linecap: round;
}

.stem__line {
  stroke: #4c5d1b;
  stroke-width: 6.5;
}

.stem__fill {
  stroke: url(#stem-grad);
  stroke-width: 3.8;
}

.stem__shine {
  stroke: #d2e38f;
  stroke-width: 1.1;
  stroke-opacity: 0.6;
}

/* No position here on purpose: from tablet up the cherries must resolve
   against .hero, so nothing between them and it may be positioned. */
.hero__grid {
  display: grid;
  width: 100%;
  gap: 2.75rem;
  align-items: center;
}

.hero__copy {
  position: relative;
  z-index: 3;
}

/* No outline any more: plain ink with the faintest neutral lift. */
.hero__title {
  margin-top: 1.25rem;
  color: var(--ink);
  text-shadow: 0 0.04em 0.12em rgba(20, 16, 29, 0.1);
}

.hero__title .accent {
  color: var(--cherry-2);
}

/* "& the DMV" gets its own line on desktop only, where the long line
   would otherwise run into the big cherry. */
.hero__br {
  display: none;
}

.hero__lead {
  max-width: 26rem;
  margin-top: 1.25rem;
  font-size: 0.98rem;
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* ---- review platforms ---------------------------------------------------- */
/* Phones: Google across the top, Yelp and MapQuest side by side. */
.reviews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

.reviews li:first-child {
  grid-column: 1 / -1;
}

/* minmax(0, …) so a badge can't force its column wider than half the
   row; the tighter padding is what lets score + stars stay on one line
   at 360–390px. Wider screens get the roomier padding back below. */
.reviews {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.reviews .review {
  gap: 0.55rem;
  padding-inline: 0.6rem 0.7rem;
}

.review {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.6rem;
  height: 100%;
  padding: 0.55rem 1rem 0.55rem 0.8rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(20, 16, 29, 0.08);
  box-shadow: 0 10px 26px -18px rgba(20, 16, 29, 0.45);
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

a.review {
  transition:
    transform 0.3s var(--ease-out-expo),
    box-shadow 0.3s;
}

a.review:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -18px rgba(20, 16, 29, 0.5);
}

.review__logo {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.review__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1;
}

.review__top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.review__score {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.review__name {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.review__meta {
  font-size: 0.75rem;
  color: var(--ink-3);
}

.review__mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  flex-shrink: 0;
}

.review__mark svg {
  width: 1.05rem;
  height: 1.05rem;
}

.review__mark--yelp {
  background: #d32323;
}

.review__mark--mq {
  background: var(--ink);
  border-radius: 999px;
}

/* Gold, the way Google draws them. */
.stars {
  position: relative;
  display: inline-flex;
}

.stars__row {
  display: flex;
  gap: 1px;
}

.stars__row svg {
  width: 14px;
  height: 14px;
}

.stars__row--track {
  fill: rgba(20, 16, 29, 0.14);
}

.stars__row--fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  fill: #fbbc04;
}

/* Same size as Google's row: five 14px stars with 1px gaps. */
.stars-5 {
  width: 74px;
  height: 14px;
  fill: #fbbc04;
}

.stars-5--yelp {
  fill: #d32323;
}

/* ---- the photo ------------------------------------------------------------
   The work is the point, so it gets the full column height. Capped by
   viewport height too, so on a short laptop it shrinks instead of
   running under the fold. */
.hero__art {
  position: relative;
  /* Just enough room above the photo for the cherries' lower half. */
  padding-top: calc(var(--cw) * 0.12);
}

.shots {
  position: relative;
  width: min(100%, 480px);
  margin-inline: auto;
}

/* Main photo: a plain rounded frame (the arched top is gone), edged in
   the brand pink. */
.arch {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 6px solid var(--cherry);
  border-radius: 2.25rem;
  background: var(--paper-3);
  box-shadow:
    0 50px 90px -40px rgba(20, 16, 29, 0.55),
    0 0 0 1px rgba(20, 16, 29, 0.08);
  transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 8px), 0)
    rotate(calc(var(--mx, 0) * 0.6deg));
  will-change: transform;
}

.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.1);
}

/* Second frame, tilted over the photo's lower-left corner. It moves a
   little more than the photo with the cursor, so the two read as layers. */
.shot {
  position: absolute;
  z-index: 3;
  left: -1%; /* phones: the tilted corner stays off the screen edge */
  bottom: 68%;
  width: 40%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 5px solid var(--cherry);
  border-radius: 1.1rem;
  background: var(--paper-3);
  box-shadow:
    0 28px 50px -24px rgba(20, 16, 29, 0.6),
    0 0 0 1px rgba(20, 16, 29, 0.08);
  transform: translate3d(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 14px), 0)
    rotate(calc(-6deg + var(--mx, 0) * 1.4deg));
  will-change: transform;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.1);
  object-position: 50% 40%;
}

/* Rotating seal on the photo's bottom edge. Ring and mark get their own
   classes: a ".seal svg" selector would also catch the mark and spin it. */
.seal {
  position: absolute;
  z-index: 4;
  right: 3%;
  bottom: 4%;
  display: grid;
  place-items: center;
  width: 6.75rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper-2);
  box-shadow:
    0 0 0 3px var(--cherry),
    0 22px 40px -18px rgba(20, 16, 29, 0.7);
  text-decoration: none;
  transform: translate3d(calc(var(--mx, 0) * 22px), calc(var(--my, 0) * 16px), 0);
  transition: box-shadow 0.3s;
}

.seal:hover {
  box-shadow:
    0 0 0 3px var(--cherry-3),
    0 22px 40px -18px rgba(20, 16, 29, 0.7);
}

.seal__ring {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  text-transform: uppercase;
  animation: seal-spin 24s linear infinite;
}

.seal:hover .seal__ring {
  animation-play-state: paused;
}

.seal__mark {
  grid-area: 1 / 1;
  width: 30%;
  height: 30%;
}

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

/* --------------------------------------------------------------------------
   Services band
   -------------------------------------------------------------------------- */
/* Above the gallery, so the drips hang over its top edge. */
.band {
  position: relative;
  z-index: 4;
}

.band__strip {
  position: relative;
  overflow: hidden;
  padding-block: 1.25rem;
  background: var(--cherry);
}

.band__track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}

.band__track ul {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.band__track li {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-inline: 2rem;
  white-space: nowrap;
}

.band__item {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #fff;
}

.band__mark {
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  color: rgba(255, 246, 240, 0.9);
}

@keyframes marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Melting edge. The SVG pattern tiles every 640px, so the three drops
   below are placed in px against it: each sits under one drip's tip. */
.drip {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  height: 64px;
  /* Clip sideways only: on a phone the far drops sit past the screen
     edge and would widen the page, but they still need to fall below. */
  overflow-x: clip;
  pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(198, 35, 72, 0.18));
}

.drip svg {
  display: block;
}

.drip i {
  position: absolute;
  width: 8px;
  height: 10px;
  margin-left: -4px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--cherry);
  opacity: 0;
  animation: drop 7.5s infinite;
}

/* Tips of the two longest drips in the first tile (the first one is on
   screen even on a phone), then a shorter one in the second tile. */
.drip i:nth-child(2) {
  left: 200px;
  top: 47px;
}

.drip i:nth-child(3) {
  left: 498px;
  top: 50px;
  animation-delay: 2.6s;
}

.drip i:nth-child(4) {
  left: calc(640px + 284px);
  top: 35px;
  animation-delay: 5.1s;
}

/* A drop swells at the tip, hangs a moment, then falls and fades. */
@keyframes drop {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.3);
  }
  40% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  55% {
    opacity: 1;
    transform: translateY(2px) scale(0.95, 1.15);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  85% {
    opacity: 1;
    transform: translateY(48px) scale(0.9, 1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(60px) scale(0.85);
  }
}

/* --------------------------------------------------------------------------
   The work
   -------------------------------------------------------------------------- */
.work {
  position: relative;
  overflow: hidden;
  /* Extra room up top for the drips. */
  padding-block: clamp(6rem, 10vw, 8.5rem) clamp(4.5rem, 8vw, 7rem);
  background: #fbf3e7;
}

.work__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.work__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-3);
}

.work__eyebrow span {
  width: 2.5rem;
  height: 1px;
  background: rgba(20, 16, 29, 0.3);
}

.display-lg {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-size: clamp(2.25rem, 5.5vw, 4.75rem);
}

.work__title {
  margin-top: 1.25rem;
  color: var(--ink);
  text-wrap: balance;
}

.work__title .accent {
  color: var(--cherry);
}

/* Phones wrap the heading themselves (balanced), so "the" never sits on a
   line of its own; from 640px it breaks before "sweetest". */
.work__br {
  display: none;
}

@media (min-width: 640px) {
  .work__br {
    display: inline;
  }
}

.work__lead {
  max-width: 30rem;
  margin-top: 1.25rem;
}

.work__ig {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.25s;
}

.work__ig svg {
  transition: transform 0.3s var(--ease-out-expo);
}

.work__ig:hover {
  color: var(--cherry-2);
}

.work__ig:hover svg {
  transform: translateX(4px);
}

.work__strips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3.5rem;
}

/* One 44×300 tile of melted cream, repeated down each side and mirrored
   for the right, drawn slim (26px). Same colour as the section, so it
   reads as the cream ground itself; a faint shadow lifts its wavy edge
   off the photos. Narrower still on phones. */
.cream-edge {
  position: absolute;
  z-index: 2;
  top: -0.5rem;
  bottom: -0.5rem;
  left: 0;
  width: 26px;
  background: url("img/cream-edge.f12e2be5.svg") repeat-y 0 0 / 26px 177px;
  filter: drop-shadow(2px 0 3px rgba(20, 16, 29, 0.07));
  pointer-events: none;
}

.cream-edge--r {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}

@media (max-width: 639px) {
  .cream-edge {
    width: 18px;
    background-size: 18px 123px;
  }
}

.strip {
  display: flex;
  width: max-content;
}

.strip__track {
  display: flex;
  animation: marquee var(--dur, 60s) linear infinite;
}

.strip--reverse .strip__track {
  animation-direction: reverse;
}

.strip:hover .strip__track {
  animation-play-state: paused;
}

.strip ul {
  display: flex;
  flex-shrink: 0;
  gap: 1rem;
  padding-right: 1rem;
}

.strip li {
  flex-shrink: 0;
  width: 56vw;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--paper-3);
  box-shadow: 0 0 0 1px rgba(20, 16, 29, 0.1);
}

.strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-expo);
}

.strip li:hover img {
  transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   The menu (services)
   Each package is an ice-cream treat sitting on top of its card, and the
   treats grow with the package. Cards take the colour of their flavour.
   -------------------------------------------------------------------------- */
.menu {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(5rem, 9vw, 8rem);
  background: var(--paper);
}

.menu__head {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.menu__title {
  margin-top: 1.25rem;
  color: var(--ink);
}

.menu__title .accent {
  color: var(--cherry);
}

.menu__lead {
  max-width: 34rem;
  margin-top: 1.25rem;
}

/* Row gap and top margin leave room for the treats rising out of the
   cards (about 60% of each treat sits above its card). */
.pkgs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8.5rem 1.25rem;
  margin-top: 9rem;
}

.pkg {
  --bg: #ffe6ec;
  --accent: #d42a55;
  --text: var(--ink);
  --muted: var(--ink-2);
  --line: rgba(20, 16, 29, 0.14);
  --panel: rgba(255, 255, 255, 0.6);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6.75rem 1.5rem 1.5rem;
  border-radius: 2rem;
  background: var(--bg);
  color: var(--text);
  box-shadow:
    0 0 0 1px rgba(20, 16, 29, 0.07),
    0 30px 60px -42px rgba(20, 16, 29, 0.5);
}

/* Where subgrid is supported, every row (tag, name, line, blurb, prices,
   list, button) lines up across the cards in a row, so the price boxes
   sit level however long each blurb is. Elsewhere the flex column above
   still works, just without the alignment. */
@supports (grid-template-rows: subgrid) {
  /* With subgrid, a gap on the parent would be shared out inside every
     card's rows, so the room for the treats moves onto each card's top
     margin instead. */
  .pkgs {
    row-gap: 0;
    margin-top: 0.5rem;
  }

  .pkg {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: 0;
    margin-top: 8.5rem;
  }

  .pkg__foot {
    align-self: end;
  }
}

.pkg--velvet {
  --bg: #fde4de;
  --accent: #b81f3c;
}

.pkg--cone {
  --bg: #f4e6ef;
  --accent: #7a1d45;
}

/* Phones: the cards stack like a deck. Each one scrolls until its bottom is
   in view, holds there while the next slides up over it, and eases back as
   it's covered. script.698d85f7.js adds .is-stacked and gives each card its height
   (--h) and how much of it is covered (--cover, 0 to 1). The grid becomes a
   plain block so the cards can stick inside it: a grid item can only stick
   within its own grid area. */
@media (max-width: 639px) {
  .pkgs.is-stacked {
    display: flow-root;
    margin-top: 0.5rem;
  }

  .pkgs.is-stacked .pkg {
    position: sticky;
    margin-top: 8.5rem;
    top: min(calc(var(--header-h) + 8rem), calc(100vh - var(--h, 100vh) - 1rem));
    top: min(calc(var(--header-h) + 8rem), calc(100svh - var(--h, 100svh) - 1rem));
    transform: scale(calc(1 - var(--cover, 0) * 0.06));
    transform-origin: 50% 0;
    filter: brightness(calc(1 - var(--cover, 0) * 0.12));
    box-shadow:
      0 0 0 1px rgba(20, 16, 29, 0.07),
      0 -22px 44px -28px rgba(20, 16, 29, 0.32),
      0 30px 60px -42px rgba(20, 16, 29, 0.5);
  }

  .pkgs.is-stacked .pkg--sundae {
    box-shadow:
      0 0 0 2px var(--cherry),
      0 -22px 44px -28px rgba(20, 16, 29, 0.45),
      0 40px 80px -40px rgba(20, 16, 29, 0.75);
  }
}

/* The top package: dark card, pink ring, and the only treat with a cherry. */
.pkg--sundae {
  --bg: #1b1323;
  --accent: #ff7a9c;
  --text: #fbf3f6;
  --muted: rgba(251, 243, 246, 0.74);
  --line: rgba(251, 243, 246, 0.18);
  --panel: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 2px var(--cherry),
    0 40px 80px -40px rgba(20, 16, 29, 0.75);
}

.pkg__treat {
  position: absolute;
  top: 0;
  left: 50%;
  width: 11rem;
  transform: translate(-50%, -60%);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.treat {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pkg:hover .pkg__treat {
  transform: translate(-50%, -64%) rotate(-3deg);
}

/* The cherry wobbles on its stem when the card is hovered. */
.treat__cherry {
  transform-box: view-box;
  transform-origin: 112px 46px;
}

.pkg--sundae:hover .treat__cherry {
  animation: wobble 0.9s ease-in-out;
}

@keyframes wobble {
  25% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-7deg);
  }
  75% {
    transform: rotate(4deg);
  }
}

/* Sits in the gap between the sundae's foot and the text, so the top
   package lines up row for row with the other three. */
.pkg__ribbon {
  position: absolute;
  top: 4.4rem;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: var(--cherry);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(232, 56, 95, 0.8);
}

.pkg__no {
  color: var(--accent);
}

.pkg__name {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.3vw, 2.05rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.pkg__kicker {
  margin-top: 0.45rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--accent);
}

.pkg__blurb {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Prices read like a menu board: tier, dotted leader, price. */
.pkg__prices {
  margin: 1.25rem 0 0;
  padding: 0.3rem 1rem;
  border-radius: 1.1rem;
  background: var(--panel);
}

.pkg__prices div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0;
}

.pkg__prices div + div {
  border-top: 1px solid var(--line);
}

.pkg__prices dt {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--muted);
}

.pkg__prices dt::after {
  content: "";
  flex: 1;
  border-bottom: 2px dotted var(--line);
  transform: translateY(-3px);
}

.pkg__prices dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pkg__list {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.pkg__list li,
.vip__list li {
  display: flex;
  gap: 0.55rem;
  font-size: 0.87rem;
  line-height: 1.4;
  color: var(--muted);
}

.tick {
  width: 14px;
  height: 14px;
  margin-top: 0.15rem;
  flex-shrink: 0;
  color: var(--accent);
}

.pkg__foot {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.5rem;
}

.pkg__foot .label {
  color: var(--muted);
}

.pkg__foot .btn {
  width: 100%;
}

.pkg .btn--outline {
  background: rgba(255, 255, 255, 0.65);
}

/* ---- VIP plan: a loyalty punch card ---------------------------------------- */
.vip {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
  margin-top: 5.75rem;
  padding: 3.75rem 1.5rem 5rem;
  border-radius: 2rem;
  background: var(--cream);
  box-shadow:
    0 0 0 1px rgba(20, 16, 29, 0.07),
    0 30px 60px -42px rgba(20, 16, 29, 0.45);
}

.vip__kicker {
  color: var(--cherry-2);
}

/* The "Best deal" sticker sits half off the card's top edge, and the scoop
   leans out over its bottom edge. Both lift a little when the card is hovered. */
.vip__badge {
  position: absolute;
  top: -3.4rem;
  left: 0.4rem;
  width: 6.4rem;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 10px 14px rgba(20, 16, 29, 0.14));
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vip__badge text {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.vip__badge-best {
  font-size: 40px;
  fill: #e8385f;
}

.vip__badge-deal {
  font-size: 30px;
  fill: #fff6f0;
}

.vip__scoop {
  position: absolute;
  right: 0.75rem;
  bottom: -2.6rem;
  width: 8.5rem;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 14px 16px rgba(20, 16, 29, 0.16));
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vip__scoop-cherry {
  transform-box: fill-box;
  transform-origin: 70% 0;
}

.vip:hover .vip__badge {
  transform: rotate(-4deg) scale(1.04);
}

.vip:hover .vip__scoop {
  transform: translateY(-6px) rotate(-4deg);
}

.vip:hover .vip__scoop-cherry {
  animation: wobble 0.9s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .vip:hover .vip__scoop-cherry {
    animation: none;
  }
}

.vip__name {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.vip__blurb {
  max-width: 30rem;
  margin-top: 0.9rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.vip__punch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.5rem;
}

.vip__punch i {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px dashed rgba(20, 16, 29, 0.22);
  border-radius: 999px;
}

.vip__punch i.is-stamped {
  border: 2px solid var(--cherry);
  background: #ffe1e9;
  color: #2e7069;
}

.vip__punch i:nth-child(2) {
  transform: rotate(-12deg);
}

.vip__punch i:nth-child(3) {
  transform: rotate(9deg);
}

.vip__punch svg {
  width: 1.5rem;
  height: 1.5rem;
}

.vip__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.vip__amount {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.vip__note {
  font-size: 0.9rem;
  color: var(--ink-3);
}

.vip__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}


.vip__list {
  --accent: var(--cherry);
  --muted: var(--ink-2);
  display: grid;
  align-content: center;
  gap: 0.7rem 1.5rem;
}

.vip__list li {
  font-size: 0.93rem;
}

/* ---- add-ons, as toppings --------------------------------------------------- */
.toppings {
  position: relative;
  z-index: 1;
  margin-top: 4.5rem;
}

.toppings__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.toppings__title .accent {
  color: var(--cherry);
}

.toppings__lead {
  max-width: 34rem;
  margin-top: 0.6rem;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.toppings__list {
  display: grid;
  gap: 0 2.5rem;
  margin-top: 1.5rem;
}

.toppings__list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(20, 16, 29, 0.1);
}

.topping__name {
  font-size: 0.95rem;
  color: var(--ink);
}

.topping__dots {
  flex: 1;
  min-width: 1rem;
  border-bottom: 2px dotted rgba(20, 16, 29, 0.2);
  transform: translateY(-3px);
}

.topping__time {
  color: var(--ink-3);
}

.topping__price {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.toppings__note {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Proof: the numbers
   -------------------------------------------------------------------------- */
.proof {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 8vw, 7rem);
  background: var(--paper);
  border-top: 1px solid rgba(20, 16, 29, 0.08);
}

.proof .edge {
  position: relative;
  z-index: 1;
}

/* 1px gaps over a tinted ground draw the dividers between the cells. */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border-radius: 1.5rem;
  background: rgba(20, 16, 29, 0.1);
}

.stat {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--paper);
}

.stat dd {
  margin: 0;
}

.stat__value {
  order: -1;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: 1.25rem;
  color: var(--cherry);
}

.stat__sub {
  margin-top: 0.55rem;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.proof__row {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.rating {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem;
  border: 1px solid rgba(20, 16, 29, 0.12);
  border-radius: 1.5rem;
  background: var(--paper-2);
  text-decoration: none;
  transition: border-color 0.3s;
}

.rating:hover {
  border-color: rgba(232, 56, 95, 0.4);
}

.rating__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-3);
}

.rating__g {
  width: 1.1rem;
  height: 1.1rem;
}

.rating__score {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

.rating__value {
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rating__meta {
  padding-bottom: 0.35rem;
}

.rating__meta p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.stars--lg .stars__row svg {
  width: 18px;
  height: 18px;
}

.rating__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--cherry-2);
}

.rating__link svg {
  transition: transform 0.3s var(--ease-out-expo);
}

.rating:hover .rating__link svg {
  transform: translateX(4px);
}

.quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  border: 1px solid rgba(20, 16, 29, 0.12);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--cream), var(--paper-2));
}

.quote__mark {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--ink);
}

.quote__text {
  margin-top: 1.5rem;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.3;
  color: var(--ink);
}

.quote__sub {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   On the feed: the live Instagram profile, in a phone
   -------------------------------------------------------------------------- */
.feed {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 9vw, 8rem);
  background: linear-gradient(160deg, #fdeef2 0%, #fbf3e7 65%);
}

.feed__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

/* ---- TikTok / Instagram switch -------------------------------------------- */
.feed__tabs {
  display: inline-flex;
  gap: 0.3rem;
  margin-top: 1.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(20, 16, 29, 0.08);
}

.feed__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
  transition:
    background-color 0.25s,
    color 0.25s;
}

.feed__tab .icon {
  width: 1rem;
  height: 1rem;
}

.feed__tab span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-3);
}

.feed__tab:hover {
  color: var(--ink);
}

.feed__tab[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}

.feed__tab[aria-selected="true"] span {
  color: rgba(255, 255, 255, 0.6);
}

.feed__pane[hidden],
.phone__app[hidden],
.feed__like[hidden] {
  display: none;
}

.feed__pane,
.phone__app {
  animation: feed-in 0.45s var(--ease-out-expo);
}

@keyframes feed-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* TikTok's two colours for the handle underline and the glow. */
.feed__pane--tt .feed__handle a {
  background-image: linear-gradient(90deg, #25f4ee, #fe2c55);
}

.feed[data-feed="tt"] .feed__glow {
  background: conic-gradient(from 200deg, #25f4ee, #fe2c55, #ff9fb5, #25f4ee);
  opacity: 0.3;
}

.feed__handle {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.feed__handle a {
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #962fbf) left bottom / 0 4px no-repeat;
  transition: background-size 0.6s var(--ease-out-expo);
}

.feed__handle a:hover {
  background-size: 100% 4px;
}

.feed__bio {
  margin-top: 0.75rem;
  font-size: 1.35rem;
  color: var(--cherry);
}

.feed__lead {
  max-width: 28rem;
  margin-top: 1.25rem;
}

.feed__stats {
  display: flex;
  gap: 2.25rem;
  margin: 1.75rem 0 0;
}

.feed__stats div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.35rem;
}

.feed__stats dt {
  color: var(--ink-3);
}

.feed__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.feed__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.feed__art {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 1.5rem;
}

/* Instagram's own gradient, blurred right back, so it reads as theirs
   without shouting over the brand pink. */
.feed__glow {
  position: absolute;
  width: min(80%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #feda75);
  filter: blur(70px);
  opacity: 0.32;
}

.phone {
  position: relative;
  width: min(100%, 350px);
  padding: 10px;
  border-radius: 3rem;
  background: var(--ink);
  box-shadow:
    inset 0 0 0 2px #3a2f44,
    0 50px 90px -40px rgba(20, 16, 29, 0.65);
  transform: rotate(-3deg);
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feed__art:hover .phone {
  transform: rotate(0deg) translateY(-6px);
}

.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 2.4rem;
  background: #fff;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.phone__island {
  width: 92px;
  height: 26px;
  border-radius: 999px;
  background: #000;
}

.phone__sys {
  width: 54px;
  height: 12px;
}

.phone__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 40px;
  padding: 0 1rem;
  border-bottom: 1px solid #efefef;
  font-size: 0.95rem;
}

.phone__bar strong {
  flex: 1;
  font-weight: 700;
}

.phone__bar svg {
  width: 22px;
  height: 22px;
}

/* 416px is what the embed reports at this width; script.698d85f7.js replaces it
   with the live figure so the frame never scrolls or leaves a gap. */
.phone__feed {
  position: relative;
  height: 416px;
  background: #fff;
  transition: height 0.4s var(--ease-out-expo);
}

.phone__feed--tt {
  height: 400px;
}

.phone__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.6s;
}

.phone__embed--static,
.phone__feed.is-loaded .phone__embed {
  opacity: 1;
}

.phone__skeleton {
  position: absolute;
  inset: 0;
  padding: 14px 14px 0;
  transition: opacity 0.6s;
}

.phone__feed.is-loaded .phone__skeleton {
  opacity: 0;
}

.phone__skel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 120px;
}

.phone__skel-head b {
  width: 76px;
  height: 76px;
  border-radius: 50%;
}

.phone__skel-head span {
  display: grid;
  flex: 1;
  gap: 9px;
}

.phone__skel-head i {
  height: 11px;
  border-radius: 6px;
}

.phone__skel-head i:nth-child(1) { width: 60%; }
.phone__skel-head i:nth-child(2) { width: 45%; }
.phone__skel-head i:nth-child(3) { width: 35%; }

.phone__skel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 18px -14px 0;
}

.phone__skel-grid i {
  aspect-ratio: 1;
}

.phone__skel-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 18px;
}

.phone__skel-row i {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
}

.phone__skel-head b,
.phone__skel-head i,
.phone__skel-grid i,
.phone__skel-row i {
  background: linear-gradient(90deg, #f1f1f1 25%, #fafafa 45%, #f1f1f1 65%) 0 0 / 300% 100%;
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: -150% 0;
  }
}

.phone__fallback {
  position: absolute;
  inset: auto 1rem 1rem;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1rem;
  border-radius: 0.9rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.phone__feed.is-blocked .phone__fallback {
  display: flex;
}

.phone__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
}

.phone__btn {
  display: grid;
  place-items: center;
  height: 32px;
  border-radius: 8px;
  background: #efefef;
  color: #000;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.2s;
}

.phone__btn:hover {
  filter: brightness(0.94);
}

.phone__btn--follow {
  background: #0095f6;
  color: #fff;
}

.phone__btn--tt {
  background: #fe2c55;
  color: #fff;
}

/* TikTok's create button: a black key with cyan and red edges. */
.phone__plus {
  position: relative;
  width: 38px;
  height: 26px;
  border-radius: 8px;
  background: #000;
  box-shadow:
    -3px 0 0 #25f4ee,
    3px 0 0 #fe2c55;
}

.phone__plus::before,
.phone__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2.5px;
  margin: -1.25px 0 0 -6px;
  border-radius: 2px;
  background: #fff;
}

.phone__plus::after {
  transform: rotate(90deg);
}

.phone__tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 52px;
  padding-bottom: 4px;
  border-top: 1px solid #efefef;
}

.phone__tabs svg {
  width: 24px;
  height: 24px;
}

.phone__tabs img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #000;
}

/* Floating extras around the phone. */
.feed__like {
  position: absolute;
  z-index: 2;
  /* Up on the phone's top corner, clear of the username bar. */
  top: 0;
  left: 6%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem 0.65rem 0.65rem;
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(20, 16, 29, 0.5);
  font-size: 0.85rem;
  color: var(--ink-2);
  animation: bob 5s ease-in-out infinite;
}

.feed__like strong {
  color: var(--ink);
}

.feed__heart {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5c7f, #d62976);
}

.feed__heart--tt {
  background: linear-gradient(135deg, #25f4ee, #fe2c55);
}

.feed__heart svg {
  width: 1rem;
  height: 1rem;
}

.feed__sticker {
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: 10%;
  width: 4.5rem;
  height: 4.5rem;
  color: var(--ink);
  filter: drop-shadow(0 10px 14px rgba(20, 16, 29, 0.25));
  animation: bob-tilt 6s ease-in-out infinite;
}

@keyframes bob {
  50% {
    transform: translateY(-10px);
  }
}

@keyframes bob-tilt {
  0%,
  100% {
    transform: rotate(14deg);
  }
  50% {
    transform: rotate(8deg) translateY(-12px);
  }
}

/* --------------------------------------------------------------------------
   Book: the closing call to action
   -------------------------------------------------------------------------- */
.book {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(7rem, 11vw, 9rem);
  background: #120c1f;
  text-align: center;
}

.book__photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Plum top and bottom, a little thinner through the middle so the grille
   shows through behind the headline. */
.book__wash {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, #120c1f 0%, rgba(18, 12, 31, 0.85) 50%, #120c1f 100%);
}

.book__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 60vh;
  height: 60vh;
  border-radius: 50%;
  background: rgba(232, 56, 95, 0.25);
  filter: blur(130px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.book__inner {
  position: relative;
  z-index: 1;
}

.book__mark {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline: auto;
  color: #dff0ef;
}

/* The big closing line. Leading stays open enough for the descenders of
   "cherry on top" (y and p) to clear the line box. */
.display-xl {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-size: clamp(2.75rem, 10vw, 9rem);
}

/* Pinned to the text optical size to match the live site; left on auto,
   the font switches to its narrow display cut at this size. */
.book__title {
  margin-top: 2rem;
  color: #eef7f5;
  font-variation-settings: "opsz" 14;
}

.book__title .accent {
  color: var(--cherry-3);
}

.book__lead {
  max-width: 32rem;
  margin: 1.75rem auto 0;
  line-height: 1.65;
  color: rgba(223, 240, 239, 0.7);
  text-wrap: balance;
}

.book__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  max-width: 22rem;
  margin: 2.5rem auto 0;
}

.btn--cream {
  background: #f7ead8;
  color: #120c1f;
}

.btn--cream:hover {
  background: #fff;
}

.book__call {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: rgba(223, 240, 239, 0.5);
}

.book__call a {
  color: #eef7f5;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  overflow: hidden;
  padding: 5rem 0 2.5rem;
  border-top: 1px solid rgba(223, 240, 239, 0.1);
  background: #120c1f;
  color: rgba(223, 240, 239, 0.7);
}

.footer .edge {
  position: relative;
  z-index: 1;
}

.footer__grid {
  display: grid;
  gap: 3rem;
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.footer__brand img {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(223, 240, 239, 0.2);
}

.footer__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #eef7f5;
}

.footer__sub {
  display: block;
  margin-top: 0.4rem;
  color: rgba(159, 217, 232, 0.7);
}

.footer__about {
  max-width: 20rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(223, 240, 239, 0.55);
}

.footer__head {
  margin: 0;
  color: rgba(223, 240, 239, 0.4);
}

.footer__list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.footer__list a,
.footer__contact a {
  font-size: 0.875rem;
  color: rgba(223, 240, 239, 0.75);
  text-decoration: none;
  transition: color 0.25s;
}

.footer__list a:hover,
.footer__contact a:hover {
  color: #eef7f5;
}

.footer__list a.footer__book {
  color: var(--cherry-3);
}

.footer__hours {
  display: grid;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  max-width: 16rem;
}

.footer__hours div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
}

.footer__hours dt {
  color: rgba(223, 240, 239, 0.55);
}

.footer__hours dd {
  margin: 0;
  color: rgba(223, 240, 239, 0.82);
}

.footer__hours dd.is-closed {
  color: rgba(223, 240, 239, 0.32);
}

.footer__contact {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-style: normal;
}

.footer__contact a {
  overflow-wrap: anywhere;
}

.footer__contact p {
  color: rgba(223, 240, 239, 0.55);
  line-height: 1.6;
}

.footer__icons {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.footer__icons a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(223, 240, 239, 0.2);
  border-radius: 999px;
  color: rgba(223, 240, 239, 0.7);
  transition:
    border-color 0.25s,
    color 0.25s;
}

.footer__icons a:hover {
  border-color: var(--cherry);
  color: var(--cherry-3);
}

.footer__icons svg {
  width: 17px;
  height: 17px;
}

.footer__base {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(223, 240, 239, 0.1);
  font-size: 0.75rem;
  color: rgba(223, 240, 239, 0.4);
}

/* ==========================================================================
   About page
   ========================================================================== */
.nav a[aria-current="page"] {
  color: var(--ink);
}

.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.sheet a.sheet__link[aria-current="page"] {
  color: var(--cherry-2);
}

.btn--ink {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 12px 30px -14px rgba(20, 16, 29, 0.7);
}

.btn--ink .icon {
  color: var(--cherry-3);
}

.btn--ink:hover {
  background: #2a2236;
}

/* --------------------------------------------------------------------------
   About hero: the owner's story
   -------------------------------------------------------------------------- */
.story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--header-h) + 2.5rem) clamp(5rem, 9vw, 7rem);
  background: var(--paper);
}

.story__grid {
  display: grid;
  gap: 4rem;
  align-items: center;
}

.story__copy {
  position: relative;
  z-index: 1;
}

.story__title {
  margin-top: 1.25rem;
  color: var(--ink);
  text-shadow: 0 0.04em 0.12em rgba(20, 16, 29, 0.1);
}

.story__title .accent {
  color: var(--cherry-2);
}

.story__text {
  display: grid;
  gap: 1rem;
  max-width: 34rem;
  margin-top: 1.75rem;
}

.story__quote {
  max-width: 30rem;
  margin: 2rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--cherry);
}

.story__quote p {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  color: var(--ink);
}

.story__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.story__shots {
  position: relative;
  width: min(100%, 440px);
  margin-inline: auto;
}

/* Same frame as the homepage photo: rounded, edged in the brand pink. */
.story__photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 6px solid var(--cherry);
  border-radius: 2.25rem;
  background: var(--paper-3);
  box-shadow:
    0 50px 90px -40px rgba(20, 16, 29, 0.55),
    0 0 0 1px rgba(20, 16, 29, 0.08);
}

.story__photo img,
.story__second img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.1);
}

/* The same Lexus from outside, tilted over the top-right corner. */
.story__second {
  position: absolute;
  z-index: 2;
  top: -7%;
  right: 1%;
  width: 38%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 5px solid var(--cherry);
  border-radius: 1.1rem;
  background: var(--paper-3);
  box-shadow:
    0 28px 50px -24px rgba(20, 16, 29, 0.6),
    0 0 0 1px rgba(20, 16, 29, 0.08);
  transform: rotate(6deg);
}

.story__verse {
  position: absolute;
  z-index: 3;
  left: -3%;
  bottom: -1.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.25rem 0.85rem 1rem;
  border: 1px solid rgba(20, 16, 29, 0.1);
  border-radius: 1.1rem;
  background: rgba(242, 250, 248, 0.92);
  box-shadow: 0 22px 40px -24px rgba(20, 16, 29, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.story__verse svg {
  width: 1.9rem;
  height: 1.9rem;
  color: var(--ink);
}

.story__verse span {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   How it works: three scoops
   -------------------------------------------------------------------------- */
.steps {
  position: relative;
  overflow: hidden;
  /* Extra room up top for the band's drips. */
  padding-block: clamp(6.5rem, 10vw, 8.5rem) clamp(5rem, 9vw, 7rem);
  background: #fbf3e7;
}

.steps .edge {
  position: relative;
  z-index: 1;
}

.steps__head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.steps__eyebrow {
  color: var(--cherry-2);
}

.steps__title {
  margin-top: 1.25rem;
  color: var(--ink);
}

.steps__title .accent {
  color: var(--cherry);
}

.steps__lead {
  max-width: 24rem;
}

/* Phones: a column, scoops on the left, joined top to bottom. */
.steps__list {
  --scoop: 4.25rem;
  --gap: 2.75rem;
  display: grid;
  gap: var(--gap);
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--scoop) minmax(0, 1fr);
  grid-template-areas:
    "scoop title"
    "scoop body"
    "scoop tag";
  grid-template-rows: auto auto 1fr;
  column-gap: 1.25rem;
  align-items: start;
}

.step--1 {
  --flavor: #ffc2d1;
  --ink-on: #b3173d;
}

.step--2 {
  --flavor: #f6dcb2;
  --ink-on: #8a4b12;
}

.step--3 {
  --flavor: #bfe6da;
  --ink-on: #1f5f57;
}

.step__scoop {
  grid-area: scoop;
  position: relative;
  z-index: 1;
  display: block;
  width: var(--scoop);
  aspect-ratio: 80 / 86;
  color: var(--flavor);
  filter: drop-shadow(0 10px 14px rgba(20, 16, 29, 0.12));
  transition:
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s;
}

.step__scoop svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Centred on the scoop's ball (36 of 86 units down), not the box. */
.step__num {
  position: absolute;
  left: 50%;
  top: 41.9%;
  font-family: var(--font-display);
  font-size: calc(var(--scoop) * 0.3);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink-on);
  transform: translate(-50%, -50%);
}

/* Dotted line from this scoop to the next one. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--scoop) / 2 - 1px);
  top: calc(var(--scoop) * 86 / 80 + 0.5rem);
  bottom: calc(var(--gap) * -1 + 0.5rem);
  width: 2px;
  background: repeating-linear-gradient(180deg, rgba(232, 56, 95, 0.5) 0 6px, transparent 6px 12px);
  transform-origin: top;
  transition: transform 0.6s var(--ease-out-expo);
}

.step__title {
  grid-area: title;
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.step__body {
  grid-area: body;
  max-width: 22rem;
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
}

.step__tag {
  grid-area: tag;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  border: 1px solid rgba(20, 16, 29, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink);
}

.step__tag .icon {
  color: var(--cherry);
}

/* Before the steps are seen: scoops shrunk, lines undrawn. They pop in
   one after another, each line drawing on toward the next scoop. */
.steps__list.is-armed:not(.is-in) .step__scoop {
  opacity: 0;
  transform: translateY(12px) scale(0.6);
}

.steps__list.is-armed:not(.is-in) .step::after {
  transform: scaleY(0);
}

.step--2 .step__scoop {
  transition-delay: 0.35s;
}

.step--3 .step__scoop {
  transition-delay: 0.7s;
}

.step--1::after {
  transition-delay: 0.2s;
}

.step--2::after {
  transition-delay: 0.55s;
}

.steps__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(20, 16, 29, 0.1);
}

.steps__pay .label {
  color: var(--ink-3);
}

.steps__pay ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.steps__pay li {
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(20, 16, 29, 0.1);
  border-radius: 999px;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   One car, one appointment
   -------------------------------------------------------------------------- */
.visit {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 9vw, 8rem);
  background: var(--paper-2);
}

.visit .edge {
  position: relative;
  z-index: 1;
}

.visit__head {
  max-width: 46rem;
}

.visit__title {
  margin-top: 1.25rem;
  color: var(--ink);
}

.visit__title .accent {
  color: var(--cherry);
}

.visit__lead {
  max-width: 34rem;
  margin-top: 1.25rem;
}

/* Every other frame rides lower, so the row reads as a sequence. */
.frames {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1rem;
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}

.frame:nth-child(even) {
  margin-top: 2.5rem;
}

.frame__img {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--paper-3);
  box-shadow:
    0 0 0 1px rgba(20, 16, 29, 0.1),
    0 24px 50px -30px rgba(20, 16, 29, 0.5);
}

.frame__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-expo);
}

.frame:hover .frame__img img {
  transform: scale(1.05);
}

.frame__no {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: rgba(242, 250, 248, 0.92);
  color: var(--ink);
  letter-spacing: 0.12em;
}

/* The last frame is the finished car: pink frame, cherry on top. */
.frame--done .frame__img {
  box-shadow:
    0 0 0 4px var(--cherry),
    0 30px 55px -28px rgba(198, 35, 72, 0.6);
}

.frame--done .frame__no {
  background: var(--cherry);
  color: #fff;
}

.frame__badge {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--ink);
  color: #dff0ef;
  box-shadow: 0 0 0 3px var(--cherry);
}

.frame__badge svg {
  width: 1.45rem;
  height: 1.45rem;
}

.frame figcaption {
  margin-top: 1.1rem;
}

.frame__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.frame__body {
  margin-top: 0.45rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.visit__note {
  margin-top: 3.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-3);
}

.visit__note a,
.areas__zip a {
  color: var(--cherry-2);
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Where we go: travel fees as rings around Baltimore
   -------------------------------------------------------------------------- */
.range {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 9vw, 8rem);
  background: var(--paper);
}

.range__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem;
}

.range__title {
  margin-top: 1.25rem;
  color: var(--ink);
}

.range__title .accent {
  color: var(--cherry);
}

.range__lead {
  max-width: 32rem;
  margin-top: 1.25rem;
}

/* ---- ZIP checker ----------------------------------------------------------- */
.zip {
  max-width: 30rem;
  margin-top: 2rem;
}

.zip[hidden] {
  display: none;
}

.zip__label {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--cherry-2);
}

.zip__field {
  position: relative;
  display: flex;
  align-items: center;
  height: 3.75rem;
  padding: 0.375rem 0.375rem 0.375rem 3rem;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(20, 16, 29, 0.1),
    0 18px 40px -26px rgba(20, 16, 29, 0.45);
  transition: box-shadow 0.3s;
}

.zip__field:focus-within {
  box-shadow:
    0 0 0 2px var(--cherry),
    0 18px 40px -26px rgba(198, 35, 72, 0.5);
}

.zip__icon {
  position: absolute;
  left: 1.15rem;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--cherry);
}

/* width 0 + flex 1, as in the FAQ search: a text field's built-in width
   would otherwise push the box past a phone's edge. */
.zip__field input {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--ink);
  outline: none;
}

.zip__field input::placeholder {
  letter-spacing: normal;
  color: var(--ink-3);
}

.zip__go {
  flex-shrink: 0;
  height: 100%;
  padding-inline: 1.4rem;
}

.zip__result {
  margin-top: 1rem;
  padding: 1.25rem 1.4rem;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(20, 16, 29, 0.08),
    0 18px 40px -30px rgba(20, 16, 29, 0.4);
  animation: zip-in 0.45s var(--ease-out-expo);
}

.zip__result[hidden] {
  display: none;
}

.zip__result.is-free {
  box-shadow:
    0 0 0 2px var(--cherry),
    0 18px 40px -30px rgba(198, 35, 72, 0.45);
}

@keyframes zip-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.zip__code {
  color: var(--ink-3);
}

.zip__miles {
  margin-top: 0.35rem;
  font-size: 1rem;
  color: var(--ink-2);
}

.zip__miles strong {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.zip__road {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.zip__fee {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(20, 16, 29, 0.08);
  font-size: 0.9rem;
  color: var(--ink-2);
}

.zip__fee strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.zip__result.is-free .zip__fee strong {
  color: var(--cherry-2);
}

.zip__next,
.zip__msg {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.zip__msg {
  margin-top: 0;
}

.zip__next a,
.zip__msg a,
.range__lead a {
  color: var(--cherry-2);
  text-underline-offset: 3px;
}

.zip__note {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-3);
}

.travel__fees div {
  transition: background-color 0.3s;
}

.travel__fees div.is-match {
  margin-inline: -0.75rem;
  padding-inline: 0.75rem;
  border-radius: 0.75rem;
  border-top-color: transparent;
  background: rgba(232, 56, 95, 0.1);
}

.travel__fees div.is-match + div {
  border-top-color: transparent;
}

.travel__fees div.is-match dt {
  color: var(--ink);
}

.travel {
  padding: 2rem 1.5rem;
  border: 1px solid rgba(20, 16, 29, 0.1);
  border-radius: 2rem;
  background: var(--paper-2);
  box-shadow: 0 30px 60px -45px rgba(20, 16, 29, 0.45);
}

.travel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.travel__lead {
  max-width: 26rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.rings {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.75rem;
  overflow: visible;
}

.ring {
  transform-box: view-box;
  transform-origin: 200px 200px;
  transition: transform 0.9s var(--ease-out-expo);
}

.ring--1 {
  fill: var(--cherry);
}

.ring--2 {
  fill: rgba(232, 56, 95, 0.45);
  transition-delay: 0.1s;
}

.ring--3 {
  fill: rgba(232, 56, 95, 0.26);
  transition-delay: 0.2s;
}

.ring--4 {
  fill: rgba(232, 56, 95, 0.1);
  transition-delay: 0.3s;
}

/* The band a checked ZIP falls in. */
.ring {
  transition:
    transform 0.9s var(--ease-out-expo),
    fill 0.4s;
}

.ring--2.is-hit {
  fill: rgba(232, 56, 95, 0.62);
}

.ring--3.is-hit {
  fill: rgba(232, 56, 95, 0.46);
}

.ring--4.is-hit {
  fill: rgba(232, 56, 95, 0.3);
}

.rings__edge.is-hit {
  stroke: var(--cherry);
  stroke-width: 2.5;
  stroke-dasharray: none;
}

.rings__edge {
  fill: none;
  stroke: rgba(232, 56, 95, 0.45);
  stroke-width: 1.5;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
}

.rings__axis {
  stroke: rgba(20, 16, 29, 0.12);
}

.rings__n {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--ink-3);
}

.rings text {
  text-anchor: middle;
}

.rings__fees text {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  fill: var(--ink);
  transition: opacity 0.5s 0.5s;
}

.rings__fees .is-free {
  fill: #fff;
}

.rings__pin {
  fill: var(--ink);
}

.rings__dot {
  fill: #fff;
}

.rings__mi text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  fill: var(--ink-3);
}

.rings__city {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: #fff;
}

.rings__towns circle {
  fill: var(--ink);
  stroke: #fff;
  stroke-width: 1.5;
}

/* A light halo keeps the names readable over the pink bands. */
.rings__towns text {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  fill: var(--ink-2);
  paint-order: stroke;
  stroke: rgba(242, 250, 248, 0.9);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.rings__towns .is-start {
  text-anchor: start;
}

.rings__towns .is-end {
  text-anchor: end;
}

.rings__towns .is-light {
  fill: #fff;
  stroke: none;
}

/* The checked ZIP: a cherry pin on a dotted line from Baltimore. Off
   until a ZIP is checked (a class, since Chrome ignores the hidden
   attribute on SVG elements). */
.rings__you {
  display: none;
}

.rings.has-pin .rings__you {
  display: inline;
}

.rings__you line {
  stroke: var(--cherry-2);
  stroke-width: 2;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
}

.rings__mark {
  fill: var(--cherry-2);
  stroke: #fff;
  stroke-width: 2;
}

/* The ZIP sits in a white pill above the pin, over any town name. */
.rings__tag {
  fill: #fff;
  stroke: var(--cherry-2);
  stroke-width: 1.5;
}

.rings__you text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  fill: var(--ink);
}

/* While a ZIP is pinned the town names step back. */
.rings__towns text {
  transition: opacity 0.3s;
}

.rings.has-pin .rings__towns text {
  opacity: 0.35;
}

.rings__drop.is-dropping {
  animation: pin-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pin-drop {
  from {
    opacity: 0;
    transform: translateY(-28px);
  }
}

.rings.is-armed:not(.is-in) .ring {
  transform: scale(0);
}

.rings.is-armed:not(.is-in) .rings__fees text {
  opacity: 0;
}

.travel__fees {
  margin: 1.5rem 0 0;
}

.travel__fees div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(20, 16, 29, 0.1);
}

.travel__fees dt {
  font-size: 0.9rem;
  color: var(--ink-2);
}

.travel__fees dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.travel__fees .is-free dd {
  color: var(--cherry-2);
}

/* --------------------------------------------------------------------------
   Areas we serve: town cards on a dotted ground
   -------------------------------------------------------------------------- */
.areas {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 9vw, 8rem);
  background: #fbf3e7;
  text-align: center;
}

.areas__dots {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(20, 16, 29, 0.13) 1.2px, transparent 1.7px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 55%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 55%, #000 30%, transparent 78%);
  pointer-events: none;
}

.areas__inner {
  position: relative;
  z-index: 1;
}

.areas__pin {
  position: relative;
  width: 4.25rem;
  margin-inline: auto;
}

.areas__pin svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 12px 14px rgba(198, 35, 72, 0.3));
  animation: pin-bob 3.2s ease-in-out infinite;
}

.areas__pin i {
  display: block;
  width: 2.25rem;
  height: 0.5rem;
  margin: 0.35rem auto 0;
  border-radius: 50%;
  background: rgba(20, 16, 29, 0.16);
  animation: pin-shadow 3.2s ease-in-out infinite;
}

@keyframes pin-bob {
  50% {
    transform: translateY(-7px);
  }
}

@keyframes pin-shadow {
  50% {
    transform: scale(0.75);
    opacity: 0.6;
  }
}

.areas__eyebrow {
  margin-top: 1.5rem;
  color: var(--cherry-2);
}

.areas__title {
  margin-top: 1rem;
  color: var(--ink);
}

.areas__title .accent {
  color: var(--cherry);
}

.areas__lead {
  max-width: 36rem;
  margin: 1.25rem auto 0;
}

/* Baltimore down to Alexandria: three stops joined by a dotted line. */
.route {
  display: grid;
  gap: 2.75rem;
  max-width: 58rem;
  margin: 3.5rem auto 0;
  padding: 0;
  list-style: none;
}

.route .town:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 1.15rem);
  width: 2px;
  height: 1.2rem;
  margin-left: -1px;
  background: repeating-linear-gradient(180deg, rgba(198, 35, 72, 0.55) 0 4px, transparent 4px 8px);
}

.areas__note {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--ink-3);
}

.areas__note a {
  color: var(--cherry-2);
  text-underline-offset: 4px;
}

.town {
  position: relative;
  padding: 1.05rem 0.6rem 1.1rem;
  border-radius: 1.1rem;
  background: var(--cherry-2);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 26px -16px rgba(124, 10, 43, 0.7);
}

/* One or two soft drips under each card, shifted per card so no two melt
   the same way. Not repeated: on a narrow card the second simply falls
   outside and isn't drawn. Kept inside the corners. */
.town::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: calc(100% - 1px);
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16'%3E%3Cpath d='M36 0C43 0 45.5 2 45.5 6V10A4.5 4.5 0 0 0 54.5 10V6C54.5 2 57 0 64 0ZM160 0C165 0 166.5 1.5 166.5 4.5V6A3 3 0 0 0 172.5 6V4.5C172.5 1.5 174 0 179 0Z' fill='%23c62348'/%3E%3C/svg%3E")
    no-repeat var(--dx, 0) 0 / 240px 16px;
  pointer-events: none;
}

.town:nth-child(4n + 2) {
  --dx: 40px;
}

.town:nth-child(4n + 3) {
  --dx: -20px;
}

.town:nth-child(4n) {
  --dx: 60px;
}

.town__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.town__pin {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: #ffd6e0;
}

.town__county {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
}

.areas__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  max-width: 22rem;
  margin: 3.5rem auto 0;
}

.areas__zip {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--ink-3);
}

/* Phones: the rings are drawn smaller, so their labels get bigger. */
@media (max-width: 639px) {
  .rings__fees text {
    font-size: 19px;
  }

  .rings__mi text {
    font-size: 13px;
  }

  .rings__towns text {
    font-size: 14.5px;
  }

  .rings__you text {
    font-size: 17px;
  }
}

@media (min-width: 640px) {
  .story__ctas,
  .areas__ctas {
    flex-direction: row;
  }

  .areas__ctas {
    justify-content: center;
    max-width: none;
  }

  .travel {
    padding: 2.5rem;
  }

  .town {
    padding: 1.2rem 1rem 1.25rem;
  }

  .town__name {
    font-size: 1.2rem;
  }
}

@media (min-width: 768px) {
  .route {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }

  .route .town:not(:last-child)::before {
    left: calc(100% + 0.6rem);
    top: 50%;
    width: calc(3rem - 1.2rem);
    height: 2px;
    margin: -1px 0 0;
    background: repeating-linear-gradient(90deg, rgba(198, 35, 72, 0.55) 0 5px, transparent 5px 10px);
  }
}

@media (min-width: 1024px) {
  .story {
    padding-top: calc(var(--header-h) + 3.5rem);
  }

  .story__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 5rem;
  }

  .story__art {
    order: -1;
  }

  .story__shots {
    width: min(100% - 3rem, 520px);
    margin-left: 0;
  }

  .story__second {
    right: -14%;
  }

  .steps__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  /* Desktop: a row, the line running scoop to scoop across the gaps. */
  .steps__list {
    --scoop: 6.5rem;
    --gap: 3rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 4.5rem;
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "scoop"
      "title"
      "body"
      "tag";
    grid-template-rows: auto auto auto 1fr;
  }

  .step__title {
    margin-top: 1.5rem;
  }

  .step:not(:last-child)::after {
    left: calc(var(--scoop) + 0.75rem);
    right: calc(var(--gap) * -1 + 0.75rem);
    top: calc(var(--scoop) * 36 / 80 - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(232, 56, 95, 0.5) 0 6px, transparent 6px 12px);
    transform-origin: left;
  }

  .steps__list.is-armed:not(.is-in) .step::after {
    transform: scaleX(0);
  }

  /* Titles, copy and tags line up across the three steps. */
  @supports (grid-template-rows: subgrid) {
    .steps__list {
      gap: 0 var(--gap);
    }

    .step {
      grid-row: span 4;
      grid-template-rows: subgrid;
    }
  }

  .frames {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .frame:nth-child(even) {
    margin-top: 3.5rem;
  }

  .range__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 5rem;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .areas__pin svg,
  .areas__pin i {
    animation: none;
  }
}

/* ==========================================================================
   FAQ page
   ========================================================================== */
/* One ice-cream flavour per topic, shared by the scoops and the dots. */
.flavor-1 {
  --flavor: #ffc2d1;
}

.flavor-2 {
  --flavor: #f6dcb2;
}

.flavor-3 {
  --flavor: #bfe6da;
}

.flavor-4 {
  --flavor: #d3dbf7;
}

.flavor-5 {
  --flavor: #dcebb5;
}

.flavor-6 {
  --flavor: #e6d3f3;
}

/* --------------------------------------------------------------------------
   Hero: the question, and a search box
   -------------------------------------------------------------------------- */
.ask {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--header-h) + 2.5rem) clamp(3.5rem, 6vw, 5rem);
  background: var(--paper);
}

.ask__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.ask__copy {
  position: relative;
  z-index: 1;
}

.ask__title {
  margin-top: 1.25rem;
  color: var(--ink);
  text-shadow: 0 0.04em 0.12em rgba(20, 16, 29, 0.1);
}

.ask__title .accent {
  color: var(--cherry-2);
}

.ask__lead {
  max-width: 32rem;
  margin-top: 1.25rem;
}

.ask__search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 34rem;
  height: 3.75rem;
  margin-top: 2rem;
  padding: 0 1.25rem 0 3.25rem;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(20, 16, 29, 0.1),
    0 18px 40px -26px rgba(20, 16, 29, 0.45);
  transition: box-shadow 0.3s;
}

.ask__search[hidden] {
  display: none;
}

.ask__search:focus-within {
  box-shadow:
    0 0 0 2px var(--cherry),
    0 18px 40px -26px rgba(198, 35, 72, 0.5);
}

.ask__search svg {
  position: absolute;
  left: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--cherry);
}

/* The ring on the box is the focus state, so the field itself has none.
   width 0 + flex 1: a text field's built-in width (about 20 characters)
   would otherwise push the box past the edge of a phone. */
.ask__search input {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
}

.ask__search input::placeholder {
  color: var(--ink-3);
}

.ask__count {
  flex-shrink: 0;
  margin-left: 0.75rem;
  color: var(--ink-3);
  letter-spacing: 0.12em;
}

/* Small phones: the placeholder needs the room, so the count only shows
   once there's a search to count. */
@media (max-width: 479px) {
  .ask__search {
    padding-right: 1rem;
  }

  .ask__count.is-idle {
    display: none;
  }
}

.ask__pop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.ask__pop .label {
  margin-right: 0.25rem;
  color: var(--ink-3);
}

.ask__pop a {
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(20, 16, 29, 0.14);
  border-radius: 999px;
  background: rgba(242, 250, 248, 0.6);
  font-size: 0.85rem;
  color: var(--ink-2);
  text-decoration: none;
  transition:
    border-color 0.25s,
    background-color 0.25s,
    color 0.25s;
}

.ask__pop a:hover {
  border-color: var(--cherry);
  background: #fff;
  color: var(--ink);
}

.ask__art {
  display: none;
}

.qmark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 30px 40px rgba(198, 35, 72, 0.25));
}

.qmark__hook {
  fill: none;
  stroke: url(#qmark-grad);
  stroke-width: 30;
  stroke-linecap: round;
}

.qmark__shine {
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.45;
  stroke-width: 6;
  stroke-linecap: round;
}

.qmark__stem {
  fill: none;
  stroke: #4c5d1b;
  stroke-width: 4;
  stroke-linecap: round;
}

/* The cherries swing a little from their knot. */
.qmark__fruit {
  transform-box: view-box;
  transform-origin: 122px 234px;
  animation: qmark-swing 4.5s ease-in-out infinite;
}

@keyframes qmark-swing {
  0%,
  100% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(6deg);
  }
}

/* --------------------------------------------------------------------------
   Questions
   -------------------------------------------------------------------------- */
.faq {
  position: relative;
  padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(5rem, 9vw, 8rem);
  background: #fbf3e7;
}

.faq__grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0, …): the topic strip is wider than a phone and scrolls
     inside itself; it mustn't widen the column. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

/* Phones: the topics become a strip of chips that sticks under the
   header. The help card waits for the closing section instead. */
.faq__side {
  position: sticky;
  top: 4.25rem;
  z-index: 5;
  margin-inline: calc(var(--edge) * -1);
  padding: 0.75rem var(--edge);
  background: rgba(251, 243, 231, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20, 16, 29, 0.08);
}

.faq__label,
.faq__help {
  display: none;
}

.faq__nav ul {
  display: flex;
  gap: 0.5rem;
  margin-inline: calc(var(--edge) * -1);
  padding-inline: var(--edge);
  overflow-x: auto;
  scrollbar-width: none;
}

.faq__nav ul::-webkit-scrollbar {
  display: none;
}

.faq__nav a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(20, 16, 29, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    color 0.25s;
}

.faq__nav a:hover {
  color: var(--ink);
}

.faq__nav a.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.faq__dot {
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--flavor);
  box-shadow: inset 0 0 0 1px rgba(20, 16, 29, 0.08);
}

.faq__n {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-3);
}

.faq__nav a.is-active .faq__n {
  color: var(--cherry-3);
}

/* Room for the header and the sticky topic strip above a jumped-to item. */
.qgroup,
.q {
  scroll-margin-top: 9rem;
}

/* A gap rather than sibling margins: a topic hidden by the search then
   leaves no space behind. */
.faq__groups {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.qgroup[hidden],
.q[hidden] {
  display: none;
}

.qgroup__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.qgroup__scoop {
  flex-shrink: 0;
  width: 3rem;
  height: 3.2rem;
  color: var(--flavor);
  filter: drop-shadow(0 8px 10px rgba(20, 16, 29, 0.1));
}

.qgroup__no {
  color: var(--ink-3);
}

.qgroup__title {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* Each question is a card; the open one gets the pink ring. */
.q {
  border-radius: 1.25rem;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(20, 16, 29, 0.07),
    0 14px 30px -24px rgba(20, 16, 29, 0.35);
  transition: box-shadow 0.3s;
  interpolate-size: allow-keywords;
}

.q + .q {
  margin-top: 0.65rem;
}

.q[open] {
  box-shadow:
    0 0 0 2px var(--cherry),
    0 24px 44px -28px rgba(198, 35, 72, 0.45);
}

.q__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.1rem 1.1rem 1.1rem 1.25rem;
  border-radius: 1.25rem;
  list-style: none;
  cursor: pointer;
}

.q__sum::-webkit-details-marker {
  display: none;
}

.q__q {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color 0.25s;
}

.q[open] .q__q {
  color: var(--cherry-2);
}

/* A plus that turns into a cross on a cherry. */
.q__icon {
  position: relative;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(20, 16, 29, 0.18);
  border-radius: 999px;
  color: var(--ink);
  transition:
    transform 0.4s var(--ease-out-expo),
    background-color 0.3s,
    border-color 0.3s,
    color 0.3s;
}

.q__icon::before,
.q__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.75rem;
  height: 1.5px;
  margin: -0.75px 0 0 -0.375rem;
  background: currentColor;
}

.q__icon::after {
  transform: rotate(90deg);
}

.q__sum:hover .q__icon {
  border-color: var(--cherry);
}

.q[open] .q__icon {
  border-color: var(--cherry);
  background: var(--cherry);
  color: #fff;
  transform: rotate(45deg);
}

/* Opens smoothly where the browser can animate to height:auto; elsewhere
   it simply opens. */
.q::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size 0.45s var(--ease-out-expo),
    content-visibility 0.45s allow-discrete;
}

.q[open]::details-content {
  block-size: auto;
}

.q__a {
  display: grid;
  gap: 0.75rem;
  max-width: 46rem;
  padding: 0 1.25rem 1.35rem;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--ink-2);
}

.q__a strong {
  font-weight: 600;
  color: var(--ink);
}

.q__a a,
.faq__empty a {
  color: var(--cherry-2);
  text-underline-offset: 3px;
}

.faq__empty {
  padding: 2rem;
  border: 1px dashed rgba(20, 16, 29, 0.2);
  border-radius: 1.25rem;
  text-align: center;
  color: var(--ink-2);
}

.faq__help {
  padding: 1.75rem;
  border-radius: 1.5rem;
  background: #120c1f;
  color: rgba(223, 240, 239, 0.7);
}

.faq__mark {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  color: #dff0ef;
}

.faq__help-title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #eef7f5;
}

.faq__help-copy {
  margin: 0.4rem 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.faq__help .btn {
  width: 100%;
}

.faq__help .btn + .btn {
  margin-top: 0.6rem;
}

.faq__hours {
  margin-top: 1.25rem;
  color: rgba(223, 240, 239, 0.45);
  letter-spacing: 0.14em;
}

@media (min-width: 640px) {
  .q__sum {
    padding: 1.25rem 1.25rem 1.25rem 1.6rem;
  }

  .q__q {
    font-size: 1.18rem;
  }

  .q__a {
    padding: 0 1.6rem 1.5rem;
  }
}

/* Desktop: the topics and the help card stick beside the questions. */
@media (min-width: 1024px) {
  .ask__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.6fr);
    gap: 4rem;
  }

  .ask__art {
    display: block;
    width: min(100%, 18rem);
    margin-inline: auto;
  }

  .faq__grid {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 4.5rem;
  }

  .faq__side {
    top: calc(4.25rem + 2rem);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .faq__label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--ink-3);
  }

  .faq__nav ul {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .faq__nav a {
    padding: 0.65rem 0.85rem;
    border-color: transparent;
    border-radius: 0.85rem;
    background: none;
    font-size: 0.92rem;
  }

  .faq__nav a .faq__n {
    margin-left: auto;
  }

  .faq__nav a:hover {
    background: rgba(255, 255, 255, 0.55);
  }

  .faq__nav a.is-active {
    border-color: transparent;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 0 0 1px rgba(20, 16, 29, 0.07);
  }

  .faq__nav a.is-active .faq__n {
    color: var(--cherry);
  }

  .faq__help {
    display: block;
    margin-top: 2rem;
  }

  .qgroup,
  .q {
    scroll-margin-top: 6.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qmark__fruit {
    animation: none;
  }
}

/* ==========================================================================
   Gallery page
   ========================================================================== */
.work__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.gal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--header-h) + 2.5rem) clamp(3.5rem, 6vw, 5rem);
  background: var(--paper);
}

.gal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.gal__copy {
  position: relative;
  z-index: 1;
}

.gal__title {
  margin-top: 1.25rem;
  color: var(--ink);
  text-shadow: 0 0.04em 0.12em rgba(20, 16, 29, 0.1);
}

.gal__title .accent {
  color: var(--cherry-2);
}

.gal__lead {
  max-width: 34rem;
  margin-top: 1.25rem;
}

/* Three prints fanned like a hand of cards, pivoting at the bottom; on
   hover the hand opens right out. */
.gal__fan {
  display: none;
}

.gal__fan img {
  position: absolute;
  left: 50%;
  top: 0;
  width: 58%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 5px solid var(--cherry);
  border-radius: 1.25rem;
  background: var(--paper-3);
  box-shadow:
    0 30px 50px -26px rgba(20, 16, 29, 0.6),
    0 0 0 1px rgba(20, 16, 29, 0.08);
  transform-origin: 50% 100%;
  transition: transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.gal__fan img:nth-child(1) {
  transform: translate(-82%, 6%) rotate(-9deg);
}

.gal__fan img:nth-child(2) {
  transform: translate(-18%, 6%) rotate(9deg);
}

.gal__fan img:nth-child(3) {
  transform: translateX(-50%) rotate(-1.5deg);
}

.gal__fan:hover img:nth-child(1) {
  transform: translate(-88%, 4%) rotate(-15deg);
}

.gal__fan:hover img:nth-child(2) {
  transform: translate(-12%, 4%) rotate(15deg);
}

.gal__fan:hover img:nth-child(3) {
  transform: translate(-50%, -5%) rotate(0deg) scale(1.03);
}

/* --------------------------------------------------------------------------
   One row per car
   -------------------------------------------------------------------------- */
.cars {
  position: relative;
  overflow: hidden;
  /* Extra room up top for the band's drips. */
  padding-block: clamp(5.5rem, 9vw, 7.5rem) clamp(4.5rem, 8vw, 6.5rem);
  background: #fbf3e7;
}

.car {
  position: relative;
  z-index: 1;
  scroll-margin-top: 5rem;
}

.car + .car {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.car__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.car__make {
  color: var(--cherry-2);
}

.car__title {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.car__title .accent {
  color: var(--cherry);
}

.car__arrows {
  display: none;
  flex-shrink: 0;
  gap: 0.5rem;
}

.car__arrow {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(20, 16, 29, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  transition:
    border-color 0.25s,
    background-color 0.25s,
    opacity 0.25s;
}

.car__arrow svg {
  width: 1rem;
  height: 1rem;
}

.car__arrow:hover:not(:disabled) {
  border-color: var(--cherry);
  background: #fff;
}

.car__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.car__rail {
  position: relative;
  margin-top: 1.5rem;
}

/* Full-bleed and swipeable; a card always lands on the left edge. */
.car__row {
  --tile: 62vw;
  display: flex;
  gap: 1rem;
  padding: 0.5rem var(--edge) 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
}

.car__row::-webkit-scrollbar {
  display: none;
}

.car__row li {
  flex: 0 0 var(--tile);
  scroll-snap-align: start;
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 1.4rem;
  background: var(--paper-3);
  box-shadow:
    0 0 0 1px rgba(20, 16, 29, 0.1),
    0 24px 44px -30px rgba(20, 16, 29, 0.55);
  cursor: zoom-in;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-expo);
}

.tile:hover img {
  transform: scale(1.05);
}

.tile__zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: rgba(20, 16, 29, 0.55);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    opacity 0.3s,
    transform 0.3s var(--ease-out-expo),
    background-color 0.3s;
}

.tile__zoom svg {
  width: 1.15rem;
  height: 1.15rem;
}

.tile:hover .tile__zoom,
.tile:focus-visible .tile__zoom {
  background: var(--cherry);
  transform: scale(1.08);
}

.tile:focus-visible {
  outline-offset: 4px;
  border-radius: 1.4rem;
}

.cars__more {
  position: relative;
  z-index: 1;
  margin-top: 3.5rem;
  font-size: 0.95rem;
  color: var(--ink-3);
}

.cars__more a {
  color: var(--cherry-2);
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Photo viewer
   -------------------------------------------------------------------------- */
html.is-locked {
  overflow: hidden;
}

.lb {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgba(12, 8, 20, 0.9);
  color: #eef7f5;
}

.lb[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: lb-in 0.3s var(--ease-out-expo);
}

.lb::backdrop {
  background: rgba(12, 8, 20, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@keyframes lb-in {
  from {
    opacity: 0;
  }
}

.lb__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--edge);
}

.lb__count {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(238, 247, 245, 0.65);
}

.lb__tools {
  display: flex;
  gap: 0.5rem;
}

.lb__btn,
.lb__nav {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(238, 247, 245, 0.2);
  border-radius: 999px;
  background: rgba(238, 247, 245, 0.06);
  color: #eef7f5;
  transition:
    border-color 0.25s,
    background-color 0.25s;
}

.lb__btn svg {
  width: 1.2rem;
  height: 1.2rem;
}

.lb__nav svg {
  width: 1.05rem;
  height: 1.05rem;
}

.lb__btn:hover,
.lb__nav:hover {
  border-color: var(--cherry);
  background: rgba(232, 56, 95, 0.18);
}

.lb__btn[aria-pressed="true"] {
  border-color: var(--cherry);
  background: var(--cherry);
}

.lb__btn[aria-pressed="true"] .lb__plus {
  display: none;
}

/* Gestures are handled by the script, so the browser's own pan and
   pinch are switched off here. */
.lb__stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
}

.lb__stage.is-zoomed {
  cursor: grab;
}

.lb__stage.is-zoomed:active {
  cursor: grabbing;
}

.lb__img {
  max-width: none;
  border-radius: 0.9rem;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  transition:
    transform 0.35s var(--ease-out-expo),
    opacity 0.25s;
  will-change: transform;
  -webkit-user-drag: none;
}

.lb__img.is-dragging {
  transition: opacity 0.25s;
}

.lb__img.is-loading {
  opacity: 0;
}

.lb__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem var(--edge) 1.25rem;
}

.lb__cap {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
  color: rgba(238, 247, 245, 0.8);
}

@media (min-width: 640px) {
  .car__row {
    --tile: 34vw;
    gap: 1.25rem;
  }
}

@media (min-width: 768px) {
  .car__arrows {
    display: flex;
  }

  /* Bigger screens: arrows at the sides of the photo, placed against the
     whole viewer (so the caption bar stops being their box). */
  .lb__foot {
    position: static;
  }

  .lb__nav {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 3.5rem;
    height: 3.5rem;
    margin-top: -1.75rem;
  }

  .lb__nav--prev {
    left: var(--edge);
  }

  .lb__nav--next {
    right: var(--edge);
  }
}

@media (min-width: 1024px) {
  .work__links {
    align-items: flex-end;
  }

  .gal__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: 4rem;
  }

  .gal__fan {
    position: relative;
    display: block;
    width: min(80%, 24rem);
    aspect-ratio: 1 / 1.05;
    margin-inline: auto;
  }

  .car__row {
    --tile: 22.5vw;
  }
}

@media (min-width: 1600px) {
  .car__row {
    --tile: 18vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb[open] {
    animation: none;
  }
}

/* ==========================================================================
   Legal pages: terms and privacy
   ========================================================================== */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.footer__legal a {
  color: rgba(223, 240, 239, 0.6);
  text-decoration: none;
  transition: color 0.25s;
}

.footer__legal a:hover {
  color: #eef7f5;
}

.footer__legal a[aria-current="page"] {
  color: var(--cherry-3);
}

.legal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--header-h) + 2.5rem) clamp(3rem, 5vw, 4rem);
  background: var(--paper);
}

.legal-hero__title {
  margin-top: 1.25rem;
  color: var(--ink);
}

.legal-hero__title .accent {
  color: var(--cherry-2);
}

.legal-hero__intro {
  max-width: 38rem;
  margin-top: 1.25rem;
}

.legal-hero__date {
  margin-top: 1.5rem;
  color: var(--ink-3);
}

.legal {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 9vw, 7rem);
  background: #fbf3e7;
}

.legal__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.legal__toc {
  padding: 1.25rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(20, 16, 29, 0.07);
}

.legal__toc .label {
  color: var(--ink-3);
}

.legal__toc ol {
  display: grid;
  gap: 0.1rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.legal__toc a {
  display: flex;
  gap: 0.65rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.65rem;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
  transition:
    background-color 0.25s,
    color 0.25s;
}

.legal__toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  flex-shrink: 0;
  padding-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-3);
}

.legal__toc a:hover,
.legal__toc a.is-active {
  background: #fff;
  color: var(--ink);
}

.legal__toc a.is-active {
  box-shadow: 0 0 0 1px rgba(20, 16, 29, 0.07);
}

.legal__toc a.is-active::before {
  color: var(--cherry);
}

.legal__body {
  max-width: 46rem;
}

/* The key points first, in a card with the pink ring. */
.legal__short {
  padding: 1.6rem 1.5rem;
  border-radius: 1.5rem;
  background: #fff;
  box-shadow:
    0 0 0 2px var(--cherry),
    0 24px 44px -30px rgba(198, 35, 72, 0.4);
}

.legal__short-label {
  color: var(--cherry-2);
}

.legal__short ul {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.legal__short li {
  display: flex;
  gap: 0.7rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.legal__short .icon {
  margin-top: 0.3rem;
  color: var(--cherry);
}

.legal__short strong,
.legal__sec strong {
  font-weight: 600;
  color: var(--ink);
}

.legal__sec {
  scroll-margin-top: 6rem;
  margin-top: 2.75rem;
  padding-top: 2.75rem;
  border-top: 1px solid rgba(20, 16, 29, 0.1);
}

.legal__sec h2 {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.legal__no {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--cherry-2);
}

.legal__sec p,
.legal__sec li {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-2);
}

.legal__sec p {
  margin-top: 1rem;
}

.legal__sec ul {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.legal__sec li {
  position: relative;
  padding-left: 1.4rem;
}

.legal__sec li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.72em;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--cherry);
}

.legal__sec a {
  color: var(--cherry-2);
  text-underline-offset: 3px;
}

@media (min-width: 640px) {
  .legal__short {
    padding: 2rem 2.25rem;
  }
}

/* Desktop: the contents list sticks beside the text. */
@media (min-width: 1024px) {
  .legal__grid {
    grid-template-columns: 16.5rem minmax(0, 46rem);
    gap: 5rem;
  }

  .legal__side {
    position: sticky;
    top: calc(4.25rem + 2rem);
  }

  .legal__toc {
    padding: 0;
    background: none;
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .feed__like {
    top: 0;
    font-size: 0.78rem;
  }

  .feed__sticker {
    right: -2%;
    bottom: 2%;
    width: 3.25rem;
    height: 3.25rem;
  }
}

@media (min-width: 380px) {
  .brand__text {
    display: block;
  }
}

@media (min-width: 640px) {
  .hero__ctas {
    flex-direction: row;
  }

  .work__strips,
  .strip ul {
    gap: 1.25rem;
  }

  .strip ul {
    padding-right: 1.25rem;
  }

  .strip li {
    width: 34vw;
  }

  .pkgs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vip__list,
  .toppings__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat {
    padding: 2.25rem;
  }

  .book__ctas {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }

  .footer__base {
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
  }

  .rating,
  .quote {
    padding: 2.5rem;
  }

  .reviews {
    display: flex;
    flex-wrap: wrap;
  }

  .reviews .review {
    gap: 0.7rem;
    padding-inline: 0.8rem 1rem;
  }
}

/* Tablet: copy on the left with the cherries hanging beside it, photo
   below. */
@media (min-width: 768px) {
  .header__phone,
  .header__cta {
    display: inline-flex;
  }

  .header__call {
    display: none;
  }

  .brand img {
    width: 64px;
    height: 64px;
  }

  .header.is-stuck .brand img {
    width: 44px;
    height: 44px;
  }

  .hero {
    --cw: min(52vw, 380px);
  }

  .hero__art {
    position: static;
    padding-top: 0;
  }

  .cherries {
    top: calc(var(--header-h) + 3rem);
    left: auto;
    right: -6vw;
  }

  /* Tablet up: the photo column overlaps the photo's edge a little. */
  .shot {
    left: -12%;
    bottom: 68%;
    width: 36%;
  }

  .seal {
    left: -7%;
    right: auto;
  }
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
  }

  .work__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .strip li {
    width: 21vw;
  }

  .vip {
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    margin-top: 6.5rem;
    padding: 4.5rem 2.75rem 2.75rem;
  }

  .vip__badge {
    top: -4.4rem;
    left: 0.75rem;
    width: 8.25rem;
  }

  .vip__scoop {
    right: 1.75rem;
    bottom: -3.25rem;
    width: 14rem;
  }

  .toppings__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .proof__row {
    grid-template-columns: 1fr 1.2fr;
  }

  .feed__grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  }

  .burger {
    display: none;
  }
}

/* Desktop: copy | cherries | photo. */
@media (min-width: 1200px) {
  /* --photo-h is the height the photo would need to fit under the header.
     On short laptop screens that gets small, so the photo is never
     allowed below 460px wide: a bigger photo beats a perfect fold. */
  .hero {
    --lead: 24.5rem;
    --photo-h: calc(100vh - var(--header-h) - 4rem);
    --photo-h: calc(100svh - var(--header-h) - 4rem);
    --cw: min(36vw, max(380px, calc((100vh - var(--header-h)) * 0.66)), 600px);
    --cw: min(36vw, max(380px, calc((100svh - var(--header-h)) * 0.66)), 600px);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 2.5rem;
  }

  /* Narrow enough that the big cherry can swing without crossing it. */
  .hero__lead {
    max-width: var(--lead);
  }

  .shots {
    width: min(100%, 560px, max(460px, 32vw, var(--photo-h) * 0.8));
    margin-right: 0;
  }

  .shot {
    left: -16%;
    bottom: 68%;
    width: 36%;
  }

  .seal {
    width: 8.5rem;
    left: -8%;
  }

  /* Centred on the gap between copy and photo (the pair's midpoint is at
     49% of the box). They're faded back now, so it's fine for the big
     cherry to sit behind the end of the copy. */
  .cherries {
    top: calc(var(--header-h) + 7rem);
    right: auto;
    left: calc(46% - var(--cw) * 0.49);
  }

  .hero__br {
    display: inline;
  }
}

@media (min-width: 1280px) {
  .pkgs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .hero {
    --lead: 27rem;
    --cw: min(36vw, calc((100vh - var(--header-h)) * 0.66), 700px);
    --cw: min(36vw, calc((100svh - var(--header-h)) * 0.66), 700px);
  }

  .display-hero {
    font-size: clamp(2.5rem, 4.7vw, 6rem);
  }

  .shots {
    width: min(100%, 660px, max(460px, 32vw, var(--photo-h) * 0.8));
  }
}

@media (max-height: 760px) and (min-width: 768px) {
  .hero {
    padding-top: calc(var(--header-h) + 0.75rem);
    padding-bottom: 2rem;
  }
}

/* Short laptop screens: the photo is now taller than the space under the
   header, so the hero runs past the fold. Keep a clear gap under the
   header, and pin the copy to the top so the CTAs and the Google badge
   stay in the first screen instead of being centred down out of it. */
@media (max-height: 760px) and (min-width: 1200px) {
  .hero {
    padding-top: calc(var(--header-h) + 1.75rem);
  }

  .hero__copy {
    align-self: start;
    padding-top: 1rem;
  }

  /* The headline is three lines here, so the gaps under it tighten to
     keep the call button and badges above the fold. */
  .hero__lead {
    margin-top: 1rem;
  }

  .hero__ctas,
  .reviews {
    margin-top: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* The filmstrips stop; they stay scrollable by hand so no photo is
     out of reach. */
  .strip {
    width: 100%;
    overflow-x: auto;
  }
}

/* ==========================================================================
   404
   ========================================================================== */
.nf {
  display: grid;
  align-content: center;
  min-height: 78vh;
  min-height: 78svh;
}

.nf__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}