/* ==========================================================================
   Header, sections 02–07, footer.
   Layouts are asymmetric on purpose: no section repeats the previous one's
   column structure, and nothing is boxed in a card.
   ========================================================================== */

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

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(0.7rem, 1.6vw, 1.1rem) var(--gutter);
  /* backdrop-filter is deliberately not transitioned — animating it is a
     known source of WebKit compositing glitches on iOS. */
  transition: padding 380ms var(--ease-out), background-color 380ms var(--ease-out),
    box-shadow 380ms var(--ease-out), color 320ms var(--ease-out);
}

/* Glass, and always present. It condenses as soon as the page moves rather
   than sliding away — on a one-page site the order button is the reason the
   header exists, so hiding it on scroll costs more than it saves. */
.site-header.is-scrolled {
  padding-block: clamp(0.45rem, 1vw, 0.7rem);
  /* Lighter than --paper on purpose: at the page's own cream the bar is
     invisible against the sections it floats over whenever blur is missing. */
  background: rgb(255 252 245 / 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 rgb(42 24 16 / 0.12), 0 12px 30px -26px rgb(42 24 16 / 0.65);
  color: var(--ink);
}

/* No backdrop-filter (older WebKit, or a browser that refuses it behind a
   scroll container): fall back to a bar you can actually see. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .site-header.is-scrolled {
    background: rgb(255 252 245 / 0.96);
  }

  html[data-hero-scheme='dark'] .site-header.is-scrolled:not(.is-past-hero) {
    background: rgb(26 14 9 / 0.92);
  }
}

.site-header.is-scrolled .site-header__logo img {
  width: clamp(2.5rem, 4.2vw, 3.3rem);
}

/* Over the berry flavours the glass has to darken instead, or a cream bar
   floats on a near-black hero. */
html[data-hero-scheme='dark'] .site-header.is-scrolled:not(.is-past-hero) {
  background: rgb(26 14 9 / 0.55);
  box-shadow: 0 1px 0 rgb(255 246 226 / 0.1), 0 10px 30px -24px rgb(0 0 0 / 0.8);
  color: var(--paper);
}

html[data-hero-scheme='dark'] .site-header.is-scrolled:not(.is-past-hero) .site-header__logo img,
html[data-hero-scheme='dark'] .site-header.is-scrolled:not(.is-past-hero) .nav-toggle__bars i {
  filter: brightness(0) invert(1);
}

.site-header__logo {
  flex: none;
  display: block;
}

.site-header__logo img {
  width: clamp(3rem, 5.4vw, 4.2rem);
  height: auto;
  transition: filter 320ms var(--ease-out);
}

/* The badge is dark artwork on transparency: on the berry flavours it needs
   to become a light monochrome mark to stay visible. */
html[data-hero-scheme='dark'] .site-header:not(.is-past-hero) .site-header__logo img,
html[data-hero-scheme='dark'] .site-header:not(.is-past-hero) .nav-toggle__bars i {
  filter: brightness(0) invert(1);
}

html[data-hero-scheme='dark'] .site-header:not(.is-past-hero) {
  color: var(--paper);
}

.site-nav {
  display: flex;
  gap: clamp(1.1rem, 2.4vw, 2.4rem);
  margin-left: auto;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}

.site-nav a {
  position: relative;
  padding-block: 0.35rem;
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}

.site-nav a:hover::after,
.site-nav a[aria-current='true']::after {
  transform: scaleX(1);
}

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

.order-btn--compact {
  padding: 0.62em 1.15em;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.order-btn--compact .icon,
.order-btn--compact [data-icon] svg {
  width: 1.05em;
  height: 1.05em;
}

.nav-toggle {
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
}

.nav-toggle__bars {
  display: grid;
  gap: 5px;
  width: 1.35rem;
}

.nav-toggle__bars i {
  height: 1.5px;
  background: currentColor;
  transition: transform 300ms var(--ease-out), opacity 200ms var(--ease-out);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars i:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars i:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* Full-bleed editorial menu rather than a stacked list of links. */
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 6rem var(--gutter) 3rem;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}

.nav-sheet.is-open {
  opacity: 1;
}

.nav-sheet[hidden] {
  display: none;
}

.nav-sheet nav {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 2vh, 1rem);
}

.nav-sheet nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 11vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.nav-sheet nav a span {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink-45);
}

.nav-sheet__foot {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-45);
  border-top: 1px solid rgb(42 24 16 / 0.12);
  padding-top: 1.4rem;
}

.nav-sheet__foot a {
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }

  .site-header {
    justify-content: space-between;
  }

  .site-header__actions {
    margin-left: auto;
  }
}

@media (max-width: 420px) {
  /* Icon only, but the label stays in the accessibility tree. */
  .order-btn--compact span:not([data-icon]) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .order-btn--compact {
    padding: 0.7em;
  }
}

/* --------------------------------------------------------------------------
   02 — Story
   -------------------------------------------------------------------------- */

.story {
  padding-block: var(--section-y);
  position: relative;
}

.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.story__intro > * + * {
  margin-top: 1.15rem;
}

.story__title {
  font-size: var(--step-4);
  font-weight: 800;
  margin-top: 1.6rem;
}

.story__body {
  color: var(--ink-70);
  max-width: 40ch;
}

.story__signature {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--leaf);
  margin-top: 1.8rem;
}

/* The photograph runs off the right edge of the page. */
.story__figure {
  position: relative;
  margin-right: calc(var(--gutter) * -1);
}

.story__figure img {
  width: 100%;
  aspect-ratio: 4 / 3.1;
  object-fit: cover;
}

.story__figure::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to top, var(--paper) 4%, transparent);
  pointer-events: none;
}

/* VOĆE → UKUS → FLAŠA, as a run of editorial columns, not three cards. */
.journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
  z-index: 2;
}

.journey li {
  padding-top: 1.4rem;
  border-top: 1px solid rgb(42 24 16 / 0.18);
}

.journey__step {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--ink-45);
}

.journey__word {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  font-weight: 800;
  margin: 0.35rem 0 0.7rem;
  color: var(--leaf-deep);
}

.journey p {
  color: var(--ink-70);
  font-size: var(--step--1);
  line-height: 1.65;
  max-width: 34ch;
}

@media (max-width: 900px) {
  .story__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.2rem;
  }

  .story__figure {
    margin-inline: calc(var(--gutter) * -1);
    order: -1;
  }

  .story__figure img {
    aspect-ratio: 4 / 3;
  }

  .journey {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  .journey p {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   03 — Flavours
   -------------------------------------------------------------------------- */

.flavours {
  padding-block: var(--section-y);
  background: linear-gradient(180deg, var(--paper), var(--paper-warm));
}

.flavours__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.flavours__title {
  font-size: var(--step-4);
  font-weight: 800;
  margin-top: 1.2rem;
}

.flavours__sub {
  color: var(--ink-70);
  font-size: var(--step-1);
  max-width: 26ch;
  text-align: right;
}

.flavours__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.5rem);
}

/* The catalogue is no longer a multiple of the column count — nine products
   leave one alone on the last row. Straddling the middle two columns centres
   it under the grid instead of parking it against the left edge, and the rule
   fires only when it is genuinely alone (last child in column one). */
.flavours__grid > .flavour:last-child:nth-child(4n + 1) {
  grid-column: 2 / span 2;
}

.flavour {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0.5rem 1.4rem;
  border-top: 1px solid rgb(42 24 16 / 0.14);
}

/* Colour comes from the syrup itself, as a wash behind the bottle. */
.flavour::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 12%;
  width: min(15rem, 96%);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 68%);
  opacity: 0.16;
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  pointer-events: none;
}

.flavour:hover::before {
  opacity: 0.3;
  transform: scale(1.06);
}

.flavour__figure {
  /* One source of truth for the bottle's height, used by the box and the
     image alike. Percentage heights do not resolve reliably for a grid item,
     which previously left the image sized by `sizes` instead of by its
     container. */
  --fig-h: clamp(12rem, 22vw, 17.5rem);
  position: relative;
  height: var(--fig-h);
  display: grid;
  place-items: end center;
  margin-bottom: 1.2rem;
}

/* max-height is the guard, not the decoration: with `w` descriptors the
   browser derives an image's intrinsic size from `sizes`, so a bottle can
   otherwise resolve taller than its figure on very wide screens and print
   straight over the product name. */
.flavour__figure img {
  height: var(--fig-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgb(60 24 8 / 0.22));
  transition: transform 480ms var(--ease-scene);
}

.flavour:hover .flavour__figure img {
  transform: translateY(-8px) scale(1.03);
}

.flavour__name {
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.flavour__note {
  color: var(--ink-70);
  font-size: var(--step--1);
  line-height: 1.5;
  margin-top: 0.45rem;
  max-width: 26ch;
}

.flavour__meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  /* Grid cells stretch, so pinning the price to the bottom keeps prices and
     order buttons on one line across a row even when a name wraps. */
  margin-top: auto;
  padding-top: 0.7rem;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.flavour__price {
  font-family: var(--serif);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.flavour__order {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.62em 1.35em;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--order);
  box-shadow: inset 0 0 0 1px rgb(34 83 47 / 0.35);
  transition: background 260ms var(--ease-out), color 260ms var(--ease-out),
    box-shadow 260ms var(--ease-out);
}

.flavour__order svg {
  width: 1.1em;
  height: 1.1em;
}

.flavour:hover .flavour__order,
.flavour__order:hover,
.flavour__order:focus-visible {
  background: var(--order);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--order);
}

@media (max-width: 1000px) {
  .flavours__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Two columns: the leftover is any odd-numbered last child, and centring it
     means spanning the full width. */
  .flavours__grid > .flavour:last-child:nth-child(4n + 1) {
    grid-column: auto;
  }

  .flavours__grid > .flavour:last-child:nth-child(2n + 1) {
    grid-column: 1 / span 2;
  }

  .flavours__sub {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .flavour {
    padding-inline: 0;
  }

  .flavour__figure {
    --fig-h: clamp(11rem, 44vw, 15rem);
  }

  /* Kept on phones: with the hero description gone, this is the only place a
     flavour is described anywhere on a small screen. */
  .flavour__note {
    display: block;
    font-size: 0.78rem;
  }

  .flavour__order {
    padding-inline: 1.1em;
    letter-spacing: 0.1em;
  }
}

/* --------------------------------------------------------------------------
   04 — Production
   -------------------------------------------------------------------------- */

.process {
  position: relative;
  background: var(--night);
  color: var(--paper);
  padding-bottom: var(--section-y);
}

.process__media {
  position: relative;
  height: clamp(16rem, 42vw, 30rem);
  overflow: hidden;
}

.process__media img,
.process__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.process__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(26 16 8 / 0.45) 0%, rgb(26 16 8 / 0.1) 35%, var(--night) 97%);
}

.process__panel {
  position: relative;
  margin-top: clamp(-6rem, -8vw, -3rem);
  z-index: 2;
}

.process__panel .section-mark {
  color: rgb(251 246 236 / 0.6);
}

.process__title {
  font-size: var(--step-4);
  font-weight: 800;
  margin-top: 1.1rem;
  max-width: 16ch;
}

.process__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3rem) clamp(2rem, 6vw, 5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  counter-reset: process;
}

.process__list li {
  display: flex;
  gap: 1.2rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgb(251 246 236 / 0.18);
}

.process__list span {
  font-family: var(--serif);
  font-size: var(--step-1);
  font-weight: 700;
  color: rgb(251 246 236 / 0.6);
  flex: none;
}

.process__list h3 {
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.process__list p {
  color: rgb(251 246 236 / 0.72);
  font-size: var(--step--1);
  line-height: 1.65;
  max-width: 36ch;
}

@media (max-width: 800px) {
  .process__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .process__panel {
    margin-top: -3rem;
  }
}

/* --------------------------------------------------------------------------
   05 — Serving
   -------------------------------------------------------------------------- */

.serving {
  position: relative;
  isolation: isolate;
  color: var(--paper);
  display: grid;
}

.serving__figure {
  grid-area: 1 / 1;
  height: clamp(28rem, 78vh, 46rem);
}

.serving__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The vertical anchor is what does the work here. This band is wider than
     the photograph at desktop widths, so `cover` crops height only and the
     horizontal value has no effect until the band goes narrow on phones —
     where it keeps the glass in frame. Dropping the window to 72% lifts the
     bottle's label clear of the headline, which sits bottom-left. */
  object-position: 60% 72%;
}

/* The left scrim is a compositional device, not just a legibility fix: it puts
   the bottle's near edge in shadow so the headline has a dark ground of its
   own, and leaves the label and the glass — the two things worth looking at —
   at full brightness on the right. */
.serving::after {
  content: '';
  grid-area: 1 / 1;
  background:
    linear-gradient(90deg, rgb(18 9 4 / 0.88) 0%, rgb(18 9 4 / 0.6) 32%, rgb(18 9 4 / 0) 66%),
    linear-gradient(180deg, rgb(26 16 8 / 0.5) 0%, rgb(26 16 8 / 0) 26%, rgb(16 8 3 / 0.55) 68%, rgb(16 8 3 / 0.94) 100%);
  z-index: 1;
}

/* Below ~900px the band is narrower than the photograph and `cover` starts
   cropping width instead of height. The bottle and the glass together are
   wider than what is left, so one of them has to go: the bottle wins, because
   a glass clipped by the frame edge reads as a crop while a bottle clipped
   through its label reads as a mistake — "ALTIVITAMIN" at the default 60%. */
@media (max-width: 900px) {
  .serving__figure img {
    object-position: 47% 72%;
  }
}

.serving__copy {
  grid-area: 1 / 1;
  z-index: 2;
  align-self: end;
  padding-bottom: clamp(2.5rem, 7vw, 5rem);
}

.serving__eyebrow {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  color: rgb(255 236 210 / 0.9);
}

.serving__title {
  font-size: var(--step-4);
  font-weight: 800;
  margin-top: 0.5rem;
}

.serving__note {
  margin-top: 1.1rem;
  font-size: var(--step-1);
  color: rgb(251 246 236 / 0.82);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   06 — Instagram
   -------------------------------------------------------------------------- */

.social {
  padding-block: var(--section-y);
  background: var(--paper-warm);
}

.social__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.social__title {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  font-weight: 800;
  margin-top: 1.1rem;
  word-break: break-word;
}

.social__body {
  color: var(--ink-70);
  margin-top: 0.9rem;
  max-width: 32ch;
}

.social__grid .text-link {
  margin-top: 1.6rem;
  color: var(--leaf-deep);
}

.social__grid .text-link svg {
  width: 1.1em;
  height: 1.1em;
}

/* Offset mosaic — deliberately uneven so it reads as a wall, not a widget. */
.social__mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.4vw, 1rem);
}

.social__mosaic li {
  overflow: hidden;
}

.social__mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

/* The tall tile is a portrait crop of a landscape photograph, so centring it
   sliced the bottle down the middle of its label. Anchored left of centre the
   bottle stays whole and the glass carries the right edge. */
.social__mosaic li:nth-child(1) img {
  object-position: 40% 55%;
}

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

.social__mosaic {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 3 / 2.05;
}

/* One tall frame anchors the wall; four landscape tiles fill in around it. */
.social__mosaic li:nth-child(1) {
  grid-area: 1 / 1 / 3 / 2;
}
.social__mosaic li:nth-child(2) {
  grid-area: 1 / 2;
}
.social__mosaic li:nth-child(3) {
  grid-area: 1 / 3;
}
.social__mosaic li:nth-child(4) {
  grid-area: 2 / 2;
}
.social__mosaic li:nth-child(5) {
  grid-area: 2 / 3;
}

@media (max-width: 900px) {
  .social__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .social__mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    aspect-ratio: 2 / 2.1;
  }

  .social__mosaic li:nth-child(1) {
    grid-area: 1 / 1 / 3 / 2;
  }
  .social__mosaic li:nth-child(2) {
    grid-area: 1 / 2;
  }
  .social__mosaic li:nth-child(3) {
    grid-area: 2 / 2;
  }
  .social__mosaic li:nth-child(4) {
    grid-area: 3 / 1;
  }
  .social__mosaic li:nth-child(5) {
    grid-area: 3 / 2;
  }
}

/* --------------------------------------------------------------------------
   07 — Closing
   -------------------------------------------------------------------------- */

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #3a2110 0%, var(--night) 62%);
  color: var(--paper);
  padding-block: clamp(4rem, 10vw, 7rem) 0;
  text-align: center;
}

.closing__inner {
  position: relative;
  z-index: 2;
}

.closing__eyebrow {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: rgb(255 224 186 / 0.85);
}

.closing__title {
  font-size: clamp(2.8rem, 1.2rem + 7vw, 6.5rem);
  font-weight: 900;
  margin-top: 0.4rem;
  letter-spacing: -0.03em;
}

.closing__body {
  margin: 1.1rem auto 0;
  font-size: var(--step-1);
  color: rgb(251 246 236 / 0.8);
  max-width: 40ch;
  text-wrap: balance;
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.8rem;
  margin-top: 2.2rem;
}

.order-btn--large {
  padding: 1.1em 2em;
  font-size: var(--step-1);
}

.closing__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--serif);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.closing__phone svg {
  width: 1.1em;
  height: 1.1em;
  opacity: 0.7;
}

.closing__pickup {
  margin-top: 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(251 246 236 / 0.55);
}

/* The last frame: the four hero flavours lined up on the horizon. */
.closing__scene {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 2.75rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  height: clamp(12rem, 30vw, 23rem);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

.closing__scene img {
  height: 100%;
  width: auto;
  filter: drop-shadow(0 20px 26px rgb(0 0 0 / 0.55));
  transform: translateY(var(--lift, 0)) rotate(var(--tilt, 0deg));
  transition: transform 600ms var(--ease-scene);
}

.closing__scene img:nth-child(1) {
  --lift: 1.2rem;
  --tilt: -5deg;
}
.closing__scene img:nth-child(2) {
  --lift: 0;
  --tilt: -1.5deg;
}
.closing__scene img:nth-child(3) {
  --lift: 0.4rem;
  --tilt: 2deg;
}
.closing__scene img:nth-child(4) {
  --lift: 1.6rem;
  --tilt: 4deg;
}
.closing__scene img:nth-child(5) {
  --lift: 2.2rem;
  --tilt: 7deg;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--paper-deep);
  color: var(--ink);
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.6rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.site-footer__brand img {
  width: 4.5rem;
  height: auto;
  flex: none;
}

.site-footer__brand p {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.45;
  max-width: 24ch;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.site-footer__phone {
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease-out);
}

.site-footer__phone:hover {
  border-color: currentColor;
}

/* Icon-only links, so each carries a visually-hidden label — an icon with no
   accessible name is a link that reads as nothing at all. The tap target is
   44px while the glyph is 20px: the padding does the reaching. */
.site-footer__social {
  display: flex;
  gap: 0.25rem;
  margin-left: -0.7rem;
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--ink-70);
  transition: color 220ms var(--ease-out), background-color 220ms var(--ease-out);
}

.site-footer__social svg {
  width: 1.25rem;
  height: 1.25rem;
}

.site-footer__social a:hover {
  color: var(--ink);
  background: rgb(42 24 16 / 0.07);
}

.site-footer__pickup {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-45);
  justify-self: end;
  text-align: right;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.3rem;
  border-top: 1px solid rgb(42 24 16 / 0.14);
  font-size: var(--step--1);
  color: var(--ink-45);
}

@media (max-width: 760px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__pickup {
    justify-self: start;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   Studio credit
   -------------------------------------------------------------------------- */

.credit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.credit a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease-out), color 220ms var(--ease-out);
}

.credit a:hover {
  border-color: currentColor;
}