@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400..800&display=swap");

/* ==========================================================================
   ELEVENTH VISUALS — the system, blended
   A photographer with two bodies of work and one pair of eyes, on one page.
   The wedding world gives the page its ground: paper, cream, walnut, Cormorant.
   The portraits-and-city world gives it its two dark moments: olive-deep,
   sage hairlines, cream ink, and a strip of Syne that runs underneath it all.
   There is no switch: weddings, portraits, ceremonies and the city are mixed
   in every band of the page, because that is how she photographs them.
   Built from her own five-colour card: olive, sage, walnut, cream, taupe.
   Studio: Sarajevo, Bosnia and Herzegovina. Shoots across Bosnia.
   ========================================================================== */

:root {
  /* ---- Palette, straight off her card ---- */
  --olive: #4B5136;
  --sage: #8A8F73;
  --walnut: #6B4426;
  --cream: #E8DCC5;
  --taupe: #CBB9A3;

  /* ---- Derived, and named as derived ---- */
  --olive-deep: #383D28;
  --paper: #F5EFE4;
  --ink-warm: #23211A;
  --line-warm: #C2BBA3;

  /* ---- Roles: one page, one set of them. The light ground is the page's
     default voice — the dark bands read the same names off the block below. ---- */
  --surface: #F5EFE4;
  --surface-alt: #E8DCC5;
  --surface-3: #CBB9A3;
  --ink: #23211A;
  --ink-muted: #6B4426;
  --accent: #6B4426;
  --accent-ink: #F5EFE4;
  --line: #C2BBA3;
  --field: #EFE7D8;
  --ring: #4B5136;
  --plate: #F5EFE4;
  --deep-line: #5C6244;

  /* ---- Faces ---- */
  --font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* The freestyle face. It is allowed in exactly two places — the marquee strip
     and the tilted sticker — so the city half of her work still has a voice
     without ever setting a heading against the serif. */
  --font-funky: "Syne", "Space Mono", ui-monospace, monospace;
  --display: var(--font-serif);
  --display-weight: 400;

  /* ---- Space, 4px base ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---- Measure ---- */
  --wrap: 1360px;
  --pad: clamp(16px, 4.2vw, 64px);
  --gap: clamp(10px, 1.4vw, 24px);
  --sect: clamp(64px, 9vw, 160px);

  /* ---- Type scale. One scale for the whole page: big enough to carry a
     photograph, small enough that a heading never outweighs the frame beside
     it. The display face is a serif, so it needs less size than a wide sans. ---- */
  --t-mono: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);  /* 12 → 13, never smaller */
  --t-body-s: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  --t-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-lede: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.9vw, 1.875rem);
  --t-h2: clamp(1.75rem, 1.15rem + 2.4vw, 3.375rem);
  --t-h1: clamp(2.5rem, 1rem + 6.2vw, 6.25rem);
  --t-display: clamp(2.5rem, 0.4rem + 7.4vw, 7.5rem);

  /* ---- Corners, edges, depth ---- */
  --r-card: 6px;
  --r-field: 4px;
  --r-btn: 999px;
  --edge: 1px solid var(--line);
  --hair: 1px;
  --shadow: 0 1px 2px rgb(35 33 26 / .05), 0 12px 32px rgb(35 33 26 / .06);
  --lift: -3px;

  /* ---- Motion: two curves, six durations, one attribute ---- */
  --ease-silk: cubic-bezier(.22, 1, .36, 1);
  --ease-snap: cubic-bezier(.16, 1, .3, 1);
  --dur-quick: 160ms;
  --dur-base: 320ms;
  --dur-slow: 760ms;
  --dur-shutter: 620ms;
  --dur-marquee: 28s;
  --dur-now: var(--dur-base);
  --ease-now: var(--ease-silk);
  --stagger: 22ms;
  --reveal-shift: 24px;
}

/* ---- The dark bands. Two sections of the page stand on olive-deep: the city
   she travels to, and the invitation at the end. Rather than restyle a single
   component, the block reads the SAME role names off this one rule, so every
   component that lands inside it is already correct — and the contrast pairs
   are the sanctioned ones: cream on olive-deep 8.30:1, taupe on olive-deep
   5.90:1. Taupe on --olive (4.35:1) stays banned, so the panel inside the band
   lifts its muted ink to cream. ---- */
.sec--deep, .cta--band, .foot--deep {
  --surface: var(--olive-deep);
  --surface-alt: var(--olive);
  --surface-3: var(--sage);
  --ink: var(--cream);
  --ink-muted: var(--taupe);
  --accent: var(--cream);
  --accent-ink: var(--olive-deep);
  --line: var(--deep-line);
  --field: #2F3322;
  --ring: var(--taupe);
  --plate: var(--olive-deep);
  background: var(--olive-deep);
  color: var(--cream);
}
.sec--deep .b4 { --ink-muted: var(--cream); background: var(--olive); }

/* ==========================================================================
   Reset and base
   ========================================================================== */

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

/* The attribute wins over every display a component sets for itself: a
   .btn that is hidden is hidden. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.62;
  overflow-x: clip;
  transition: background-color var(--dur-base) var(--ease-now), color var(--dur-base) var(--ease-now);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd, fieldset, hr, address, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

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

::selection { background: var(--accent); color: var(--accent-ink); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sec { padding-block: var(--sect); }
.sec--tight { padding-block: clamp(40px, 5vw, 88px); }
.sec--flush-top { padding-block-start: 0; }
.sec--alt { background: var(--surface-alt); }
.sec--deep .lede, .sec--deep .meta, .sec--deep .facts { color: var(--cream); }
.sec--deep .label, .sec--deep .eyebrow { color: var(--cream); }
.sec--deep .muted { color: var(--taupe); }

.rule {
  border: 0;
  border-top: var(--hair) solid var(--line);
  margin-block: clamp(20px, 2.6vw, 34px) clamp(26px, 3.6vw, 48px);
}

.divider { border: 0; border-top: var(--hair) solid var(--line); margin-block: var(--s-6); }
.divider--short { width: clamp(48px, 8vw, 120px); }
.divider--accent { border-top-color: var(--accent); }

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
}
.head > * { min-width: 0; }
.head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(18px, 4vw, 56px);
  align-items: end;
}
.head--split > * { min-width: 0; }

.cols { display: grid; gap: clamp(20px, 3vw, 56px); }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols--3-6 { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr); align-items: start; }
.cols--4-7 { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
.cols--5-6 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
.cols--085 { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(26px, 5vw, 80px); align-items: start; }
.cols > * { min-width: 0; }

.stack { display: grid; gap: var(--s-5); }
.stack--tight { gap: var(--s-3); }
.stack--wide { gap: var(--s-7); }

/* ==========================================================================
   Type
   ========================================================================== */

.display, h1, h2, h3 { font-family: var(--display); font-weight: var(--display-weight); }
/* Sentence case, every time. The blend does not shout: the serif carries the
   size, and the two worlds are told apart by the photograph, not by capitals. */

h1, .h1 {
  font-size: var(--t-h1);
  line-height: 1;
  letter-spacing: -.012em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h2, .h2 {
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -.008em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h3, .h3 {
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

/* A freestyle mark: a tilted, hand-placed label. Used for asides the page is
   thinking out loud about, and it is the only thing on the page that tilts. */
.sticker {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-funky);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: 1.2;
  letter-spacing: .01em;
  transform: rotate(-2.2deg);
  box-shadow: var(--shadow);
}
.sticker--quiet { background: var(--surface-alt); color: var(--ink); }
.sticker--tilt-r { transform: rotate(1.8deg); }
.sticker-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; padding-block: var(--s-4); }

.serif { font-family: var(--font-serif); }
.sans { font-family: var(--font-sans); }
.mono { font-family: var(--font-mono); }
.italic { font-style: italic; }
.w300 { font-weight: 300; }
.w400 { font-weight: 400; }
.w500 { font-weight: 500; }

.lede {
  font-size: var(--t-lede);
  font-weight: 300;
  line-height: 1.42;
  color: var(--ink-muted);
  max-width: 40ch;
}
.lede--serif { font-family: var(--font-serif); font-size: var(--t-h3); line-height: 1.28; }

.body { font-size: var(--t-body); font-weight: 300; line-height: 1.62; }
.body-s { font-size: var(--t-body-s); font-weight: 300; line-height: 1.6; }
.muted { color: var(--ink-muted); }
.measure { max-width: 62ch; }
.measure--narrow { max-width: 44ch; }
.balance { text-wrap: balance; }

.label,
.eyebrow,
.meta {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  line-height: 1.6;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow { letter-spacing: .22em; }
.meta { letter-spacing: .08em; text-transform: none; }
.meta--caps { text-transform: uppercase; letter-spacing: .08em; }

.facts { display: grid; gap: var(--s-2); margin: 0; }
.facts li {
  display: flex;
  gap: var(--s-3);
  font-size: var(--t-body-s);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-muted);
  min-width: 0;
}
.facts li::before { content: "—"; flex: none; color: var(--accent); }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-body-s);
  font-weight: 400;
  color: var(--accent);
  text-decoration: none;
  border-bottom: var(--hair) solid transparent;
  transition: border-color var(--dur-now) var(--ease-now), gap var(--dur-now) var(--ease-now);
}
.link-arrow::after { content: "→"; transition: transform var(--dur-now) var(--ease-now); }
.link-arrow:hover { border-bottom-color: var(--accent); }
.link-arrow:hover::after { transform: translateX(4px); }

.link-quiet {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--hair);
  transition: background-size var(--dur-base) var(--ease-now);
}
.link-quiet:hover { background-size: 100% var(--hair); }

/* The wordmark. Type, not a drawing, and no numeral anywhere. Both words are
   the same face at the same size, because they are one name: ELEVENTH in
   Cormorant at 500, VISUALS in Cormorant at 400 in the accent colour, divided
   by a hairline. It reads as a masthead at 14px and at 34px. */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  text-decoration: none;
  white-space: nowrap;
  /* A serif has more font above and below its capitals than 1em: at
     line-height 1 the top of an E and the tail of a V are clipped by any
     ancestor that hides its overflow. */
  line-height: 1.22;
}
.brand__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.15em;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-indent: .2em;
}
.brand__kind {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-indent: .2em;
  color: var(--accent);
  padding-inline-start: .5em;
  border-inline-start: var(--hair) solid var(--line);
}
.brand--lg .brand__name { font-size: 1.5em; letter-spacing: .16em; text-indent: .16em; }
.brand--lg .brand__kind { font-size: 1.5em; letter-spacing: .16em; text-indent: .16em; padding-inline-start: .42em; }
.brand--xs .brand__name { font-size: 1em; }
.brand--xs .brand__kind { font-size: 1em; }

/* ==========================================================================
   Copy that only fits when there is room for it
   ========================================================================== */

.show-sm { display: none; }

/* ==========================================================================
   Reserved frames — the space her wedding work will fill.
   A mat, a hairline of sage, a label that says exactly what goes there.
   Nothing is depicted; nothing pretends to be a photograph.
   ========================================================================== */

.reserved {
  position: relative;
  display: grid;
  place-content: center;
  gap: var(--s-2);
  padding: var(--s-5);
  text-align: center;
  overflow: hidden;
  background-color: var(--surface-3);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 8px,
    var(--sage) 8px 9px
  );
  color: var(--ink-warm);
  transition: background-color var(--dur-now) var(--ease-now);
}
/* the ghosted 11 is a texture, not content: a pseudo-element, so it stays out
   of the accessibility tree and out of the document */
.reserved::after {
  content: "11";
  position: absolute;
  inset: auto auto -0.18em 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(6rem, 18vw, 15rem);
  line-height: .8;
  color: var(--ink-warm);
  opacity: .07;
  pointer-events: none;
  user-select: none;
}
.reserved__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.7;
  background: var(--surface-3);
  padding: var(--s-2) var(--s-3);
}
.reserved__count {
  position: absolute;
  inset: var(--s-3) var(--s-3) auto auto;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.offer__media .reserved,
.mosaic__media .reserved,
.card__media .reserved { width: 100%; height: 100%; }
.reserved--sm { padding: var(--s-3); }
.reserved--sm .reserved__label { padding: var(--s-1) var(--s-2); }
.reserved--flat { background-image: none; background-color: var(--surface-alt); }

/* ==========================================================================
   01 · Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-3) clamp(18px, 2vw, 30px);
  border: var(--hair) solid var(--accent);
  border-radius: var(--r-btn);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-sans);
  font-size: var(--t-body-s);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-now) var(--ease-now),
    color var(--dur-now) var(--ease-now),
    border-color var(--dur-now) var(--ease-now),
    transform var(--dur-now) var(--ease-now),
    box-shadow var(--dur-now) var(--ease-now);
}
.btn:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow); background: color-mix(in srgb, var(--accent) 92%, var(--ink)); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--ghost {
  background: none;
  color: var(--ink);
  /* The edge, not a hairline. --line is a rule colour: at 1.5:1 on paper the
     button had no border at all until you touched it. --accent is walnut on the
     light bands and cream on the dark ones, so the outline reads at 7.4:1 and
     8.3:1 without a single new colour. */
  border-color: var(--accent);
}
.btn--ghost:hover { background: var(--surface-alt); border-color: var(--ink); color: var(--ink); }

.btn--text {
  background: none;
  border-color: transparent;
  color: var(--accent);
  padding-inline: 0;
  min-height: 0;
  border-radius: 0;
  border-bottom: var(--hair) solid var(--accent);
}
.btn--text:hover { transform: none; box-shadow: none; background: none; gap: var(--s-3); }

.btn--sm { min-height: 38px; padding: var(--s-2) var(--s-4); font-size: var(--t-mono); }
.btn--block { width: 100%; }

.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 15px; height: 15px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--accent-ink);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin var(--dur-slow) linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   02 · Navigation — the switch lives here
   ========================================================================== */

.ticker {
  background: var(--surface-alt);
  border-bottom: var(--edge);
  overflow: hidden;
  max-height: 34px;
  transition: max-height var(--dur-base) var(--ease-now), opacity var(--dur-base) var(--ease-now);
}
.ticker__in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  min-height: 33px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: var(--edge);
  transition: box-shadow var(--dur-base) var(--ease-now), background-color var(--dur-base) var(--ease-now);
}
.nav.is-stuck { box-shadow: var(--shadow); }
.nav.is-stuck .ticker { max-height: 0; opacity: 0; visibility: hidden; border-bottom-color: transparent; }

.nav__in {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 76px;
}
.nav__mark {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-body-s);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.nav__mark .brand__kind { color: var(--accent); }

.nav__mid { display: flex; align-items: center; margin-inline: auto; min-width: 0; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.nav__links a {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-muted);
  padding-block: var(--s-3);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: color var(--dur-now) var(--ease-now), background-size var(--dur-base) var(--ease-now);
}
.nav__links a:hover { color: var(--ink); background-size: 100% 2px; }

.nav__right { display: flex; align-items: center; gap: var(--s-3); flex: none; }

/* The menu is the bar's navigation at every width. The inline .nav__links
   below is what a page with room to spare may show instead of it. */
.nav__menu { display: block; position: relative; }
.nav__menu summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: var(--edge);
  border-radius: var(--r-btn);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__menu summary::marker { content: ""; }
.nav__menu[open] summary { border-color: var(--accent); }
.nav__menu:not([open]) .nav__panel { display: none; }
.nav__panel {
  position: absolute;
  top: calc(100% + var(--s-2));
  right: 0;
  z-index: 50;
  width: min(340px, 86vw);
  padding: var(--s-2);
  background: var(--surface);
  border: var(--edge);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.nav__panel a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-bottom: var(--edge);
  text-decoration: none;
  font-size: var(--t-body-s);
}
.nav__panel a:last-of-type { border-bottom: 0; }
.nav__panel a:hover { background: var(--surface-alt); }
/* the image tiles beside the links, from Cecilie Bahnsen's menu */
.nav__tile {
  flex: none;
  width: 48px;
  height: 62px;
  object-fit: cover;
  background: var(--surface-3);
  border-radius: 2px;
}
.nav__panel .btn { margin-top: var(--s-2); width: 100%; }
.nav__panel small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* The shutter switch — two bodies of work, one control */
.switch {
  display: inline-flex;
  align-items: stretch;
  border: var(--edge);
  border-radius: var(--r-btn);
  overflow: hidden;
  background: var(--surface);
}
.switch__seg {
  appearance: none;
  border: 0;
  background: none;
  color: var(--ink-muted);
  min-height: 44px;
  padding: var(--s-2) clamp(12px, 1.4vw, 20px);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-now) var(--ease-now), color var(--dur-now) var(--ease-now);
}
.switch__seg + .switch__seg { border-left: var(--edge); }
.switch__seg:hover { background: var(--surface-alt); color: var(--ink); }
.switch__seg[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.switch__seg[aria-pressed="true"]:hover { background: var(--accent); color: var(--accent-ink); }

/* ==========================================================================
   03 · Hero
   ========================================================================== */

.hero { padding-block-start: clamp(40px, 7vw, 104px); }
.hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--s-8);
  align-items: end;
}
.hero__head > * { min-width: 0; }
.hero h1 { max-width: 15ch; margin-block: clamp(16px, 2.4vw, 30px) 0; }
.hero__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); padding-block-end: .3em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__trust {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* the entrance: one character at a time, Adovasio's device */
.js [data-split] .wd,
.js [data-split] .sp { display: inline-block; white-space: pre; }
.js [data-split] .wd > span {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(.18em);
  animation: letter-in var(--dur-slow) var(--ease-silk) forwards;
}
@keyframes letter-in { to { opacity: 1; transform: none; } }

.rise { opacity: 1; }
.js .rise { opacity: 0; transform: translateY(var(--reveal-shift)); animation: rise-in var(--dur-slow) var(--ease-silk) forwards; }
@keyframes rise-in { to { opacity: 1; transform: none; } }

/* the full-bleed band under the hero */
.hero__band {
  margin-block-start: clamp(26px, 4vw, 52px);
  border-block: var(--edge);
  background: var(--surface-alt);
}
.hero__band img { width: 100%; height: clamp(320px, 52vw, 680px); object-fit: cover; object-position: 50% 42%; }

/* the shot list — six frames from the two worlds, staggered down the band.
   Each cell keeps the 4:5 house ratio, so nothing is cropped into a slice and
   the photographs stay the size they were made. */
.shotlist {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
  padding: var(--gap);
  align-items: start;
}
.shotlist .reserved { min-height: 0; }
.shotlist__cell { display: flex; flex-direction: column; gap: var(--s-2); min-height: 0; }
.shotlist__cell .reserved { aspect-ratio: 4 / 5; }
.shotlist__cell:nth-child(even) { padding-block-start: clamp(12px, 3vw, 44px); }

/* the caption plate that names what you are looking at */
.plate {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  max-width: min(460px, 88%);
  margin: calc(-1 * clamp(26px, 4vw, 52px)) 0 0 var(--pad);
  padding: var(--s-4) var(--s-5);
  background: var(--plate);
  border: var(--edge);
  border-radius: var(--r-card);
  position: relative;
}
.plate img, .plate .plate__thumb {
  width: 46px; height: 46px;
  flex: none;
  object-fit: cover;
  background: var(--surface-3);
}
.plate p { font-size: var(--t-body-s); line-height: 1.5; }
.plate small {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Hero variant B — type-led, no image anywhere */
.hero--type { text-align: left; }
.hero--type h1 { max-width: 20ch; }
.hero--type .hero__under {
  margin-block-start: clamp(30px, 4vw, 60px);
  padding-block-start: var(--s-5);
  border-top: var(--edge);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

/* ==========================================================================
   04 · Forms — every control custom, every one 44px and 16px
   ========================================================================== */

.form { display: grid; gap: var(--s-5); }

.field { display: grid; gap: var(--s-2); min-width: 0; }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.field__help { font-size: var(--t-body-s); color: var(--ink-muted); }
.field__msg {
  display: none;
  font-size: var(--t-body-s);
  line-height: 1.4;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field input[type="search"],
.field input[type="password"],
.field textarea,
.field select {
  width: 100%;
  min-height: 44px;
  padding: var(--s-3) var(--s-4);
  background: var(--field);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-field);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  transition: border-color var(--dur-now) var(--ease-now), background-color var(--dur-now) var(--ease-now);
}
.field textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); opacity: .7; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--accent); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
  border-color: var(--ring);
}
.field select {
  appearance: none;
  padding-inline-end: var(--s-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
                    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field--ok input, .field--ok textarea, .field--ok select { border-color: var(--olive); }
.field--ok .field__msg { display: block; color: var(--olive); }
.field--error input, .field--error textarea, .field--error select { border-color: var(--walnut); }
.field--error .field__msg { display: block; color: var(--walnut); }
.field--disabled { opacity: .5; }
.field--disabled input, .field--disabled textarea, .field--disabled select { cursor: not-allowed; }

/* custom checkbox and radio */
.check { display: flex; align-items: flex-start; gap: var(--s-3); min-height: 44px; padding-block: var(--s-2); font-size: var(--t-body-s); cursor: pointer; }
.check input[type="checkbox"], .check input[type="radio"] {
  appearance: none;
  flex: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  background: var(--field);
  border: var(--hair) solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color var(--dur-now) var(--ease-now), border-color var(--dur-now) var(--ease-now);
}
.check input[type="radio"] { border-radius: 50%; }
.check input[type="checkbox"]:checked, .check input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
.check input[type="checkbox"]:checked {
  background-image: linear-gradient(45deg, transparent 44%, var(--accent-ink) 44% 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, var(--accent-ink) 44% 56%, transparent 56%);
  background-size: 9px 9px, 6px 6px;
  background-position: 50% 62%, 30% 68%;
  background-repeat: no-repeat;
}
.check input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--accent); background: var(--accent); }
.check input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.check input:disabled { cursor: not-allowed; opacity: .5; }
.check span { min-width: 0; }

/* segmented choice / filter row */
.segs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.seg {
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  background: var(--surface);
  border: var(--edge);
  border-radius: var(--r-btn);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--dur-now) var(--ease-now), color var(--dur-now) var(--ease-now), border-color var(--dur-now) var(--ease-now);
}
.seg:hover { border-color: var(--accent); color: var(--ink); }
.seg[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* two-up and chip grids */
.twoup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.twoup > * { min-width: 0; }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.chip {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: var(--s-3);
  background: var(--field);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-field);
  font-size: var(--t-body-s);
  cursor: pointer;
  min-width: 0;
  transition: background-color var(--dur-now) var(--ease-now), border-color var(--dur-now) var(--ease-now), color var(--dur-now) var(--ease-now);
}
.chip input { flex: none; margin: 0; }
.chip span { min-width: 0; }
.chip:hover { border-color: var(--accent); }
.chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* file drop zone */
.drop {
  position: relative;
  display: grid;
  place-content: center;
  gap: var(--s-1);
  min-height: 96px;
  padding: var(--s-5);
  text-align: center;
  background: var(--field);
  border: var(--hair) dashed var(--line);
  border-radius: var(--r-field);
  transition: border-color var(--dur-now) var(--ease-now), background-color var(--dur-now) var(--ease-now);
}
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--surface-alt); }
.drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.drop__label { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; }
.drop__hint { font-size: var(--t-body-s); color: var(--ink-muted); }
.file-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--surface);
  border: var(--edge);
  border-radius: var(--r-field);
  font-size: var(--t-body-s);
}
.file-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row__size { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--t-mono); color: var(--ink-muted); }
.file-row button {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--accent); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .1em; text-transform: uppercase;
  padding: var(--s-1) var(--s-2);
}

.notice {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border: var(--edge);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-field);
  background: var(--surface-alt);
  font-size: var(--t-body-s);
}
.notice--warn { border-left-color: var(--walnut); }
.notice--ok { border-left-color: var(--olive); }
.notice__title { font-weight: 500; }

/* the four-step wizard */
.wiz {
  display: grid;
  gap: var(--s-5);
  padding: clamp(20px, 2.6vw, 36px);
  background: var(--surface);
  border: var(--edge);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.wiz__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.wiz__count { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .16em; }
.rail { height: 2px; background: var(--line); overflow: hidden; }
.rail span {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--accent);
  transition: width var(--dur-base) var(--ease-now);
}
/* The step is an ordinary fieldset box: its own border is the rule and the pill
   is a plain grid item. It used to be a <legend>, which Chrome lays out inside
   the fieldset's border area — that hid the rule and left the pill sitting on
   the line above it with no padding at all. */
.step { display: grid; gap: var(--s-4); margin-block-start: var(--s-4); padding-block-start: var(--s-5); border-top: var(--edge); }
.step__tag {
  display: block;
  justify-self: start;
  padding: var(--s-1) var(--s-3);
  background: var(--surface-alt);
  border: var(--hair) dashed var(--line);
  border-radius: var(--r-btn);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.step__q { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--t-h3); line-height: 1.14; }
.step[hidden] { display: none; }
.wiz__nav { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.wiz__nav .btn:last-child { margin-inline-start: auto; }
.sum {
  padding: var(--s-4);
  background: var(--surface-alt);
  border: var(--hair) dashed var(--line);
  border-radius: var(--r-field);
  font-size: var(--t-body-s);
  color: var(--ink-muted);
}
.wiz--done { text-align: left; }
.wiz__fail { margin-block-start: var(--s-3); color: var(--walnut); }
.wiz__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wiz--done .divider { border-top-color: var(--accent); border-top-width: 2px; }

/* ==========================================================================
   05 · Cards — one hover behaviour, shared by all three
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: var(--edge);
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  transition:
    transform var(--dur-now) var(--ease-now),
    border-color var(--dur-now) var(--ease-now),
    box-shadow var(--dur-now) var(--ease-now);
}
.card:hover { transform: translateY(var(--lift)); border-color: var(--accent); box-shadow: var(--shadow); }
.card__media {
  position: relative;
  flex: none;
  overflow: hidden;
  background: var(--surface-alt);
  border-bottom: var(--edge);
}
.card__media img, .card__media .reserved {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-silk);
}
.card:hover .card__media img { transform: scale(1.03); }
.card__body { display: flex; flex: 1; flex-direction: column; gap: var(--s-3); padding: clamp(16px, 1.8vw, 24px); min-width: 0; }
.card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.card__title { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--t-h3); line-height: 1.14; }
.card__desc { font-size: var(--t-body-s); line-height: 1.55; color: var(--ink-muted); }
.card__foot {
  margin-block-start: auto;
  padding-block-start: var(--s-3);
  border-top: var(--edge);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.card--link { padding: clamp(18px, 2vw, 28px); gap: var(--s-4); justify-content: space-between; }
.card--link .card__title { font-size: var(--t-h3); }

/* the route card: picture, count, name, description, footer */
.route .card__media { aspect-ratio: 4 / 5; }
.route .card__media .reserved { position: absolute; inset: 0; }
.route__count {
  padding: var(--s-1) var(--s-3);
  background: var(--surface-alt);
  border: var(--edge);
  border-radius: var(--r-btn);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   06 · Proof
   ========================================================================== */

.quote-big { display: grid; gap: var(--s-5); }
.quote-big__glyph {
  font-family: var(--font-serif);
  font-size: clamp(90px, 16vw, 220px);
  line-height: .68;
  color: var(--line);
}
.quote-big blockquote {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: var(--t-h2);
  line-height: 1.18;
  letter-spacing: -.015em;
  max-width: 18em;
}
.quote-big__by {  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.voices, .ribbon {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  scroll-padding-inline: var(--s-4);
  overscroll-behavior-x: contain;
}
.voices:focus-visible, .ribbon:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.voices {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  padding-block-end: var(--s-2);
  scroll-snap-type: x proximity;
}
.voices::-webkit-scrollbar, .ribbon::-webkit-scrollbar { height: 3px; }
.voices::-webkit-scrollbar-thumb, .ribbon::-webkit-scrollbar-thumb { background: var(--line); }
.voices::-webkit-scrollbar-track, .ribbon::-webkit-scrollbar-track { background: transparent; }
/* A review card is a small piece of paper: a quotation mark, the words in the
   serif at reading size, and who said it. Never a face that is not hers. */
.rcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 0 0 clamp(240px, 26vw, 320px);
  min-width: 0;
  padding: clamp(18px, 2vw, 26px);
  background: var(--surface);
  border: var(--edge);
  border-radius: var(--r-card);
  scroll-snap-align: start;
  transition: border-color var(--dur-now) var(--ease-now), box-shadow var(--dur-now) var(--ease-now), transform var(--dur-now) var(--ease-now);
}
.rcard:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(var(--lift)); }
.rcard__mark {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 3vw, 3rem);
  line-height: .55;
  color: var(--accent);
}
.rcard__q {
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.375rem);
  line-height: 1.4;
  letter-spacing: 0;
  text-wrap: pretty;
}
.rcard__who {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: auto;
  padding-block-start: var(--s-4);
  border-top: var(--edge);
  font-size: var(--t-body-s);
  line-height: 1.4;
  color: var(--ink);
}
.rcard__who small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* The reviews as a grid of small cards, three across. */
.voices--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); overflow: visible; padding-block-end: 0; }
.voices--grid .rcard { flex: none; }
.face {
  display: grid;
  place-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background-color: var(--surface-3);
  background-image: repeating-linear-gradient(45deg, transparent 0 5px, var(--sage) 5px 6px);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-warm);
  overflow: hidden;
}
.face--lg { width: 64px; height: 64px; font-size: 14px; }

.logostrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) clamp(24px, 4vw, 64px);
  padding-block: var(--s-5);
  border-block: var(--edge);
}
.logostrip__item {
  display: grid;
  place-content: center;
  min-height: 40px;
  padding: var(--s-2) var(--s-4);
  border: var(--hair) dashed var(--line);
  border-radius: var(--r-field);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
}

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.stat { display: grid; gap: var(--s-2); padding-block: var(--s-4); border-top: var(--edge); }
.stat__n { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--t-h2); line-height: 1; }
.stat__l { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }

.score {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border: var(--edge);
  border-radius: var(--r-btn);
  background: var(--surface);
}
.score__n { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-body-s); }
.score__stars { letter-spacing: .12em; color: var(--accent); }
.score__src { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

/* ==========================================================================
   07 · Content sections
   ========================================================================== */

.media-text { display: grid; gap: clamp(24px, 4vw, 72px); align-items: center; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.media-text--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.media-text--flip .media-text__body { order: -1; }
.media-text__body { display: grid; gap: var(--s-5); min-width: 0; }
.media-text__fig { min-width: 0; }
.media-text__fig img, .media-text__fig .reserved { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }

.fig { display: grid; gap: var(--s-3); }
.fig img, .fig .reserved { width: 100%; border-radius: var(--r-card); }
.fig figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  font-size: var(--t-body-s);
  color: var(--ink-muted);
}
.fig figcaption span { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; }

.routes-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }

/* the argument that sticks while the steps scroll past it */
.is-sticky { position: sticky; top: 110px; }
.is-sticky > * + * { margin-block-start: var(--s-4); }

/* numbered rows — services */
.rows { border-top: var(--edge); }
.rows li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: clamp(12px, 2vw, 28px);
  align-items: baseline;
  padding-block: clamp(16px, 2vw, 24px);
  border-bottom: var(--edge);
  transition: background-color var(--dur-now) var(--ease-now), padding-inline var(--dur-now) var(--ease-now);
}
.rows li > * { min-width: 0; }
.rows li:hover { background: var(--surface); padding-inline: var(--s-4); }
.rows__n { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .12em; color: var(--ink-muted); }
.rows li:hover .rows__n { color: var(--accent); }
.rows__body h3 { margin-block-end: var(--s-2); }
.rows__cta { white-space: nowrap; }

/* process steps */
.flow { border-top: var(--edge); }
.flow__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(14px, 2.2vw, 26px);
  align-items: start;
  padding-block: clamp(20px, 2.6vw, 32px);
  border-bottom: var(--edge);
}
.flow__n {
  display: grid;
  place-content: center;
  width: 46px; height: 46px;
  flex: none;
  border: var(--hair) solid var(--olive);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--ink);
  transition: background-color var(--dur-slow) var(--ease-silk), color var(--dur-slow) var(--ease-silk), border-color var(--dur-slow) var(--ease-silk);
}
.flow__item.is-in .flow__n { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.flow__body { min-width: 0; }
.flow__meta { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin-block-end: var(--s-2); }
.flow__name { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--t-h3); line-height: 1.14; }
.flow__note { margin-block-start: var(--s-2); font-size: var(--t-body-s); color: var(--ink-muted); max-width: 44ch; }

/* feature list */
.features { display: grid; gap: var(--s-4); }
.features li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s-4);
  font-size: var(--t-body-s);
  min-width: 0;
}
.features__tick {
  display: grid;
  place-content: center;
  width: 28px; height: 28px;
  border: var(--hair) solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
}
.features strong { display: block; font-weight: 500; color: var(--ink); }

/* FAQ */
.faq { border-top: var(--edge); }
.faq details { border-bottom: var(--edge); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: clamp(16px, 2vw, 24px);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-now) var(--ease-now);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary:hover { color: var(--accent); }
.faq summary .faq__sign {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-body-s);
  color: var(--ink-muted);
  transition: transform var(--dur-base) var(--ease-now);
}
.faq details[open] summary .faq__sign { transform: rotate(45deg); }
.faq details:not([open]) > p { display: none; }
.faq details p {
  max-width: 62ch;
  padding-block-end: clamp(16px, 2vw, 24px);
  font-size: var(--t-body-s);
  color: var(--ink-muted);
}

/* package / price table */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.table-wrap:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.data { font-size: var(--t-body-s); min-width: 520px; }
.data th, .data td { padding: var(--s-4) var(--s-3); text-align: left; border-bottom: var(--edge); vertical-align: top; }
.data thead th {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 400;
  border-bottom-color: var(--accent);
}
.data td:first-child { font-weight: 400; }
.data tbody tr:hover { background: var(--surface-alt); }
.data__price { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }

/* ==========================================================================
   08 · CTA sections
   ========================================================================== */

.cta { border-radius: var(--r-card); padding: clamp(26px, 4.4vw, 64px); background: var(--surface); border: var(--edge); }
.cta--band { background: var(--olive); color: var(--cream); border-color: var(--olive); border-radius: 0; }
.cta--band .lede, .cta--band .label, .cta--band .eyebrow { color: var(--cream); }
.cta--band .label, .cta--band .eyebrow { color: var(--cream); }
.cta--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: clamp(18px, 2.4vw, 28px);
  border-block: var(--edge);
  border-radius: 0;
  background: none;
}
.cta--inline .cta__line { display: grid; gap: var(--s-2); min-width: 0; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(22px, 4vw, 56px); align-items: center; }
.cta__grid > * { min-width: 0; }
.cta h2 { max-width: 16ch; margin-block-start: var(--s-3); }
.cta__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); min-width: 0; }
.cta__meta { display: grid; width: 100%; border-top: var(--edge); }
.cta__meta > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  padding-block: var(--s-3);
  border-bottom: var(--edge);
  font-size: var(--t-body-s);
}
.cta__meta > div > * { min-width: 0; }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.cta--band .cta__meta, .cta--band .cta__meta > div { border-color: var(--sage); }

/* ==========================================================================
   09 · Footers
   ========================================================================== */

.foot { background: var(--surface); border-top: var(--edge); }
.foot--big { background: var(--surface-alt); }
.foot__in { padding-block: var(--sect) var(--s-6); }
.foot__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  padding-block-end: clamp(20px, 2.6vw, 32px);
  border-bottom: var(--edge);
}
.foot__mark { font-size: var(--t-body-s); text-decoration: none; }
.foot__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.foot__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin-block-start: clamp(24px, 3vw, 44px); }
.foot__grid > div { min-width: 0; }
.foot__links { display: grid; gap: var(--s-2); margin-block-start: var(--s-3); font-size: var(--t-body-s); }
.foot__links a { text-decoration: none; color: var(--ink-muted); transition: color var(--dur-now) var(--ease-now); }
.foot__links a:hover { color: var(--ink); }
/* .foot__claim is gone: her line ("Photographs of the day you had, not the
   day you planned.") was cut from the footer, and the wordmark now carries
   the rule that used to stand above it — see the footer rules at the end. */
.foot__bigmark { overflow: hidden; margin-block-start: clamp(30px, 4vw, 60px); }
.foot__bigmark span {
  display: block;
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: var(--t-display);
  line-height: 1.2;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: var(--line);
}
.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin-block-start: clamp(20px, 2.6vw, 34px);
  padding-block-start: var(--s-4);
  border-top: var(--edge);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.legal > * { min-width: 0; }
.legal a { text-decoration: none; }
.legal a:hover { color: var(--ink); }
.foot--min { padding-block: var(--s-6); }
.foot--min .foot__in { padding-block: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }

/* ==========================================================================
   10 · Small parts
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: var(--edge);
  border-radius: var(--r-btn);
  background: var(--surface-alt);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.badge--sage { background: var(--sage); border-color: var(--sage); color: var(--ink-warm); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.crumbs li { display: flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pager a, .pager span {
  display: grid;
  place-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: var(--edge);
  border-radius: var(--r-btn);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-decoration: none;
  color: var(--ink-muted);
  transition: background-color var(--dur-now) var(--ease-now), color var(--dur-now) var(--ease-now);
}
.pager a:hover { border-color: var(--accent); color: var(--ink); }
.pager [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* the marquee strip — from Spoils Trophy */
.marquee {
  overflow: hidden;
  background: var(--surface-alt);
  border-block: var(--edge);
  padding-block: var(--s-3);
}
.marquee__track { display: flex; width: max-content; animation: marquee var(--dur-marquee) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  padding-inline-end: var(--s-5);
  font-family: var(--font-funky);
  font-weight: 500;
  font-size: var(--t-body-s);
  letter-spacing: .04em;
  color: var(--ink-muted);
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* the polaroid ribbon — rows of tilted frames, from Spoils Trophy */
.ribbon { display: flex; gap: var(--gap); overflow-x: auto; padding-block: var(--s-5); scroll-snap-type: x proximity; }
.ribbon figure {
  flex: 0 0 clamp(150px, 17vw, 220px);
  padding: var(--s-3) var(--s-3) var(--s-6);
  background: var(--surface);
  border: var(--edge);
  border-radius: 2px;
  box-shadow: var(--shadow);
  transform: rotate(-1.4deg);
  scroll-snap-align: start;
  transition: transform var(--dur-now) var(--ease-now);
}
.ribbon figure:nth-child(even) { transform: rotate(1.6deg); }
.ribbon figure:hover { transform: rotate(0deg) translateY(var(--lift)); }
.ribbon img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface-alt); }
.ribbon figcaption { margin-block-start: var(--s-3); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

/* the mosaic — six frames from both worlds, at the size each frame asks for */
.mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.mosaic figure { display: grid; gap: var(--s-3); min-width: 0; }
.mosaic__media { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--surface-alt); }
.mosaic__media img, .mosaic__media .reserved { width: 100%; height: 100%; object-fit: cover; }
.mosaic figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); font-size: var(--t-body-s); font-weight: 400; }
.mosaic figcaption span { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.mosaic .amp { font-family: var(--font-serif); font-style: italic; font-size: 1.6em; line-height: 0; color: var(--accent); }

.slot-a, .slot-b, .slot-c, .slot-d, .slot-e, .slot-f { grid-column: span 2; }
/* One order for one page: the wide wedding frame opens it, a tall city frame
   answers it, and the rest alternate so no three in a row are from one world. */
.slot-a { grid-column: span 4; order: 1; }
.slot-d { grid-column: span 2; order: 2; }
.slot-b { grid-column: span 3; order: 3; }
.slot-e { grid-column: span 3; order: 4; }
.slot-c { grid-column: span 4; order: 5; }
.slot-f { grid-column: span 2; order: 6; }
.slot-a .mosaic__media { aspect-ratio: 16 / 9; }
.slot-b .mosaic__media, .slot-d .mosaic__media,
.slot-e .mosaic__media, .slot-f .mosaic__media { aspect-ratio: 4 / 5; }
.slot-c .mosaic__media { aspect-ratio: 3 / 2; }
/* life: her photographs lead */

/* the statement band — the two worlds side by side, one promise over both */
.band { padding-block-start: var(--sect); }
.band__stage { position: relative; }
.band__stage > img, .band__stage > .reserved { width: 100%; height: clamp(300px, 46vw, 620px); object-fit: cover; }
.band__stage > .reserved { height: clamp(300px, 46vw, 620px); }
.band__stage--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; background: var(--surface-alt); }
.band__half { position: relative; margin: 0; min-width: 0; }
.band__half img { width: 100%; height: clamp(340px, 48vw, 640px); object-fit: cover; }
.band__half + .band__half img { border-inline-start: var(--edge); }
.band__half figcaption {
  position: absolute;
  inset: auto auto clamp(14px, 2vw, 26px) clamp(14px, 2vw, 26px);
  max-width: calc(100% - 2 * clamp(14px, 2vw, 26px));
  padding: var(--s-1) var(--s-3);
  background: var(--plate);
  border-radius: var(--r-field);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
/* SEE ME's bracketed pull-quote, kept as a watermark rather than content */
.band__stage::before {
  content: "\300C\3000\300D";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  font-family: var(--font-serif);
  font-size: clamp(80px, 20vw, 260px);
  line-height: .6;
  color: var(--plate);
  opacity: .14;
  pointer-events: none;
  user-select: none;
}
.band__line { z-index: 1; }
.band__line {
  position: absolute;
  max-width: min(240px, 42vw);
  padding: var(--s-2) var(--s-3);
  background: var(--plate);
  border-radius: var(--r-field);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.6;
}
.band__line--tl { top: clamp(16px, 3vw, 36px); left: clamp(16px, 3vw, 36px); }
.band__line--l { top: 38%; left: clamp(16px, 3vw, 36px); }
.band__line--bc { bottom: clamp(78px, 9vw, 120px); left: 50%; transform: translateX(-50%); text-align: center; }
.band__line--r { top: 62%; right: clamp(16px, 3vw, 36px); text-align: right; }

/* the bento — the local-roots band */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 26px); margin-block-start: clamp(28px, 4vw, 52px); }
.bento figure { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.bento img { width: 100%; object-fit: cover; border-radius: var(--r-card); }
.b1 { grid-column: span 7; } .b1 img { aspect-ratio: 16 / 10; }
.b2 { grid-column: span 5; } .b2 img { aspect-ratio: 4 / 3; }
.b3 { grid-column: span 5; grid-row: 2; } .b3 img { aspect-ratio: 4 / 3; }
.b4 {
  grid-column: span 7; grid-row: 2;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-4);
  min-width: 0;
  padding: clamp(20px, 2.6vw, 34px);
  background: var(--olive);
  color: var(--cream);
  border-radius: var(--r-card);
}
.b4 .lede { color: var(--cream); }
.b4 .label, .b4 .eyebrow { color: var(--cream); }
.b4 .btn { align-self: flex-start; }
.bento figcaption { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

/* the offer cards */
.offers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-block-start: clamp(18px, 2.4vw, 28px); }
.offer {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  padding: clamp(14px, 1.6vw, 20px);
  background: var(--surface);
  border: var(--edge);
  border-radius: var(--r-card);
  transition: transform var(--dur-now) var(--ease-now), border-color var(--dur-now) var(--ease-now), box-shadow var(--dur-now) var(--ease-now);
}
.offer:hover { transform: translateY(var(--lift)); border-color: var(--accent); box-shadow: var(--shadow); }
.offer[hidden] { display: none; }
.offer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.offer__code { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .14em; color: var(--ink-muted); }
.offer__media { position: relative; overflow: hidden; border-radius: var(--r-field); }
.offer__media img, .offer__media .reserved { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.offer__name { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--t-h3); line-height: 1.16; }
.offer__facts { font-size: var(--t-body-s); line-height: 1.5; color: var(--ink-muted); }
.offer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  margin-block-start: auto;
  padding-block-start: var(--s-3);
  border-top: var(--edge);
  font-size: var(--t-body-s);
}
.offer__price { font-family: var(--font-mono); font-weight: 700; }
.offer__when { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

/* ==========================================================================
   11 · Her own additions — real frames, Sarajevo, two languages, her prices
   ========================================================================== */

/* Real photographs in the hero shot list: six frames, still staggered. */
.shotlist__cell img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--surface-3);
}

/* The full-bleed statement band, when a real frame is standing in it. */
.band__stage > img { object-position: 50% 32%; }

/* Her portrait beside the words. Never cropped to hide the face. */
.about-portrait {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(22px, 4vw, 68px);
  align-items: center;
}
.about-portrait > * { min-width: 0; }
.about-portrait__fig { position: relative; margin: 0; }
.about-portrait__fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--surface-alt);
}
.about-portrait__fig figcaption {
  margin-block-start: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.about-portrait__body { display: grid; gap: var(--s-5); }
.about-portrait__sig {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--accent);
}
@media (max-width: 860px) {
  .about-portrait { grid-template-columns: minmax(0, 1fr); }
  .about-portrait__fig { max-width: 340px; }
}

/* The language switch — the same control as the mode switch, quieter. */
.switch--lang { border-radius: var(--r-field); }
.switch--lang .switch__seg {
  min-height: 38px;
  padding: var(--s-1) clamp(9px, 1vw, 13px);
  letter-spacing: .16em;
}
.lang-note { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

/* The cities she drives to. BiH only: no travel, so the choice is a place. */
.cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--s-2); }
.city-note { font-size: var(--t-body-s); color: var(--ink-muted); }

/* Her prices, as a list: what it is, what it includes, the number. */
.pricelist { display: grid; border-top: var(--edge); }
.pricelist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-1) var(--s-6);
  align-items: baseline;
  padding-block: clamp(14px, 1.8vw, 22px);
  border-bottom: var(--edge);
}
.pricelist__name {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: var(--t-h3);
  line-height: 1.1;
}
.pricelist__note { grid-column: 1; max-width: 52ch; font-size: var(--t-body-s); line-height: 1.5; color: var(--ink-muted); }
.pricelist__price { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-body); white-space: nowrap; }
.pricelist__price small { display: block; font-size: var(--t-mono); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.pricelist__foot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding-block-start: var(--s-4); font-size: var(--t-body-s); color: var(--ink-muted); }

/* Reviews she has not collected yet: initials, never a borrowed face. */
.face--initial { background-image: none; background: var(--surface-alt); border: var(--edge); color: var(--ink); }

/* ==========================================================================
   Locomotion — locomotive-scroll (MIT) drives the whole page:
   the smooth scroll, the parallax on [data-scroll-speed], and the .is-in class
   that every reveal waits for. Nothing here is required to read the page: with
   no JavaScript the native scroll takes over and .js is never added, so every
   .reveal stays visible.
   ========================================================================== */

html.lenis { scroll-behavior: auto; }
[data-scroll-speed] { will-change: transform; }
/* A parallaxed frame needs a little slack inside its window, or it pulls away
   from its own edge. Both of these bands give it some. */
.hero__band { overflow: hidden; }
.band__stage--pair { overflow: hidden; }

/* ==========================================================================
   Motion utilities
   ========================================================================== */

.reveal { opacity: 1; }
.js .reveal { opacity: 0; }
.js .reveal.is-in {
  animation: reveal-in var(--dur-slow) var(--ease-silk) forwards;
}
@keyframes reveal-in { from { opacity: 0; transform: translateY(var(--reveal-shift)); } to { opacity: 1; transform: none; } }

/* the shutter — eleven blades, the signature */
.shutter {
  position: fixed;
  inset: -25%;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--olive) 0deg 24deg,
    transparent 24deg 32.73deg
  );
}
.shutter.is-firing { animation: shutter-fire var(--dur-shutter) var(--ease-snap) forwards; }
@keyframes shutter-fire {
  0% { opacity: 0; transform: scale(.35) rotate(0deg); }
  22% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.6) rotate(60deg); }
}

.motion-off, .motion-off * { animation: none !important; transition: none !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .slot-a, .slot-c { grid-column: span 7; }
  .slot-d, .slot-f { grid-column: span 5; }
  .slot-b, .slot-e { grid-column: span 6; }
}

@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__menu { display: block; }
  .nav__mid { margin-inline-end: 0; }
  .hero__head,
  .head--split,
  .cols--2, .cols--3, .cols--4,
  .cols--3-6, .cols--4-7, .cols--5-6, .cols--085,
  .cta__grid,
  .media-text, .media-text--flip { grid-template-columns: minmax(0, 1fr); }
  .media-text--flip .media-text__body { order: 0; }
  .media-text__fig { order: 1; }
  .cols--085 .is-sticky { position: static; }
  .routes-3 { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .b1, .b2, .b3, .b4 { grid-column: auto; grid-row: auto; }
  .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero--type .hero__under { grid-template-columns: minmax(0, 1fr); }
  .voices--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .mosaic { grid-template-columns: minmax(0, 1fr); }
  .slot-a .mosaic__media, .slot-b .mosaic__media, .slot-c .mosaic__media,
  .slot-d .mosaic__media, .slot-e .mosaic__media, .slot-f .mosaic__media { aspect-ratio: 4 / 3; }
  .band__stage { display: flex; flex-direction: column; gap: var(--s-3); }
  .band__line { position: static; max-width: none; transform: none; text-align: left; }
  .band__line--r { text-align: left; }
  .band__quote { display: none; }
  .band__half + .band__half img { border-inline-start: 0; border-block-start: var(--edge); }
  .rcard { flex: 0 0 78vw; }
  .voices--grid .rcard { flex: none; }
  .plate { margin-inline-start: var(--s-4); max-width: calc(100% - var(--s-8)); }
}

@media (max-width: 640px) {
  .hide-sm { display: none; }
  .show-sm { display: inline; }
  .nav__in { flex-wrap: wrap; min-height: 0; padding-block: var(--s-3); row-gap: var(--s-2); }
  .nav__mark { order: 1; margin-inline-end: auto; }
  .nav__mid { order: 2; margin-inline: 0; }
  /* Two controls on one phone row: the language switch keeps its two squares
     and the CTA takes what is left. */
  .nav__right { order: 3; width: 100%; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); }
  .nav__right .btn { flex: 1; }
  .nav__right .switch--lang .switch__seg { padding-inline: var(--s-3); }
}

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

@media (max-width: 560px) {
  .offers { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shotlist { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .shotlist__cell:nth-child(even) { padding-block-start: 0; }
  .shotlist__cell .reserved { min-height: clamp(120px, 34vw, 200px); }
  /* the counter would sit on top of the label in a mat this short */
  .reserved__count { position: static; inset: auto; }
  .hero h1 { max-width: 100%; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .twoup { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* A table is not readable at 360px. It becomes a list, and each cell keeps
     its column name through data-th, so nothing is lost and nothing scrolls. */
  .data { min-width: 0; }
  .data thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .data tr { display: block; padding-block: var(--s-4); border-bottom: var(--edge); }
  .data th, .data td { display: block; padding: 0; border: 0; }
  .data td + td { margin-block-start: var(--s-1); }
  .data td[data-th]::before {
    content: attr(data-th) "  ";
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .data tbody tr:hover { background: none; }
}

@media (max-width: 400px) {
  .chips { grid-template-columns: minmax(0, 1fr); }
  .nav__mark { font-size: var(--t-mono); }
  .nav__mark.brand--lg .brand__name,
  .nav__mark.brand--lg .brand__kind { letter-spacing: .1em; text-indent: .1em; }
  .nav__right .btn { padding-inline: var(--s-4); }
  .wiz { padding: var(--s-4); }
  .legal { flex-direction: column; align-items: flex-start; }
  .rows li { grid-template-columns: 40px minmax(0, 1fr); }
  .rows__cta { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   Honour the preference. Nothing moves, nothing hides.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .js .rise, .js [data-split] .wd > span { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; transform: none !important; }
  .shutter { display: none !important; }
  .card:hover, .offer:hover, .btn:hover, .ribbon figure:hover { transform: none !important; }
  .card:hover .card__media img { transform: none !important; }
  .ribbon figure { transform: none !important; }
}

/* ==========================================================================
   AWWWARDS PASS — motion, hover, rhythm (appended, overrides above)
   01 nav overlay · 02 buttons · 03 hero · 04 shotlist expand · 05 mosaic ·
   06 routes · 07 form custom · 08 faq smooth · 09 double green ·
   10 locomotion · 11 responsive guards
   ========================================================================== */

/* ---- scroll progress hairline ---- */
.scrollbar { position: absolute; inset: auto 0 0 0; height: 2px; background: transparent; z-index: 60; pointer-events: none; }
.scrollbar span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* ==========================================================================
   01 · NAV — burger + full-screen olive overlay, staggered links
   ========================================================================== */
.nav { transition: transform .55s var(--ease-silk), box-shadow var(--dur-base) var(--ease-now), background-color var(--dur-base) var(--ease-now); }
.nav--hidden { transform: translateY(-100%); }
.nav__menu summary { gap: var(--s-2); user-select: none; -webkit-user-select: none; transition: border-color var(--dur-base) var(--ease-now), background-color var(--dur-base) var(--ease-now), transform var(--dur-base) var(--ease-now); }
.nav__menu summary:hover { border-color: var(--accent); transform: translateY(-1px); }
.menu__bars { display: inline-grid; gap: 5px; width: 18px; }
.menu__bars i { display: block; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .5s var(--ease-silk), width .5s var(--ease-silk), opacity .3s; }
.menu__bars i:last-child { width: 70%; }
.nav__menu summary:hover .menu__bars i:last-child { width: 100%; }
.nav__menu[open] .menu__bars i:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav__menu[open] .menu__bars i:last-child { width: 100%; transform: translateY(-3.3px) rotate(-45deg); }
.menu__label { min-width: 4ch; }
.nav__menu[open] .menu__label { font-weight: 600; }

/* overlay panel: full-screen, olive-deep, cream ink */
.nav__panel {
  position: fixed;
  inset: 0;
  top: 0;
  z-index: 55;
  width: auto;
  min-height: 100svh;
  margin: 0;
  padding: clamp(110px, 14vh, 150px) clamp(20px, 6vw, 72px) clamp(28px, 5vh, 56px);
  background: var(--olive-deep);
  color: var(--cream);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(20px, 4vw, 56px);
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav__menu:not([open]) .nav__panel { display: none; }
.nav__menu.is-closing .nav__panel { display: grid; animation: menu-out .38s var(--ease-silk) forwards; }
.nav__menu[open]:not(.is-closing) .nav__panel { animation: menu-in .55s var(--ease-silk); }
@keyframes menu-in { from { opacity: 0; clip-path: inset(0 0 100% 0 round 0 0 24px 24px); } to { opacity: 1; clip-path: inset(0 0 0% 0 round 0 0 0 0); } }
@keyframes menu-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-18px); } }
.nav__panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(1100px 500px at 85% -10%, rgb(232 220 197 / .10), transparent 60%),
              radial-gradient(800px 500px at 0% 110%, rgb(138 143 115 / .16), transparent 60%);
}
.nav__panel-kicker { grid-column: 1 / -1; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); margin: 0; animation: menu-link-in .6s var(--ease-silk) both; }
.nav__panel a { border: 0; border-bottom: 1px solid var(--deep-line); padding: clamp(12px, 1.8vh, 20px) clamp(6px, 1vw, 12px); color: var(--cream); border-radius: 6px; opacity: 0; animation: menu-link-in .7s var(--ease-silk) forwards; }
.nav__menu[open]:not(.is-closing) .nav__panel a:nth-of-type(1) { animation-delay: .08s; }
.nav__menu[open]:not(.is-closing) .nav__panel a:nth-of-type(2) { animation-delay: .14s; }
.nav__menu[open]:not(.is-closing) .nav__panel a:nth-of-type(3) { animation-delay: .20s; }
.nav__menu[open]:not(.is-closing) .nav__panel a:nth-of-type(4) { animation-delay: .26s; }
.nav__menu[open]:not(.is-closing) .nav__panel a:nth-of-type(5) { animation-delay: .32s; }
@keyframes menu-link-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.nav__panel a > span:last-child { display: grid; gap: 2px; }
.nav__panel a small { color: var(--taupe); }
.nav__panel a > span:last-child > span:last-child { font-family: var(--display); font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); line-height: 1.05; letter-spacing: -.01em; transition: transform .45s var(--ease-silk); }
.nav__panel a:hover { background: rgb(232 220 197 / .07); }
.nav__panel a:hover > span:last-child > span:last-child { transform: translateX(10px); color: var(--cream); }
.nav__panel a:hover .nav__tile { transform: scale(1.06) rotate(-1.5deg); }
.nav__tile { transition: transform .6s var(--ease-silk); border-radius: 4px; }
.nav__panel .btn { grid-column: 1 / -1; width: auto; justify-self: start; margin-top: var(--s-4); padding-inline: clamp(26px, 3vw, 44px); min-height: 52px; opacity: 0; animation: menu-link-in .7s var(--ease-silk) .4s forwards; }
/* keep the toggle above the overlay */
.nav__menu summary { position: relative; z-index: 56; }
.nav__menu[open] summary { background: var(--cream); border-color: var(--cream); color: var(--olive-deep); }

/* ==========================================================================
   02 · BUTTONS — fill sweep + arrow nudge + shine (no markup change)
   ========================================================================== */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: linear-gradient(rgb(0 0 0 / .24), rgb(0 0 0 / .24));
  background-repeat: no-repeat;
  background-position: 50% 101%;
  background-size: 100% 0%;
  transition: background-size .55s var(--ease-silk), transform .45s var(--ease-silk), box-shadow .45s var(--ease-silk), border-color .35s, color .35s;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(35 33 26 / .08), 0 18px 40px rgb(35 33 26 / .16); background-size: 100% 102%; }
.btn:active { transform: translateY(-1px) scale(.985); box-shadow: var(--shadow); }
.btn::after {
  content: "→"; display: inline-block; font-family: var(--font-sans); font-weight: 400;
  max-width: 0; opacity: 0; transform: translateX(-10px);
  transition: max-width .45s var(--ease-silk), opacity .35s, transform .45s var(--ease-silk), margin .45s var(--ease-silk);
  margin-left: 0; overflow: hidden; white-space: nowrap;
}
.btn:hover::after { max-width: 2ch; opacity: 1; transform: none; margin-left: var(--s-1); }
/* The ghost fills with its own band's alt surface, never with --accent: a
   secondary button that turns the exact colour and shape of the primary one on
   hover is not a secondary button, it is a second primary. Keeping --surface-alt
   also means the label never has to change colour, so the fill can rise at its
   own speed without a single mid-sweep frame of cream on cream. */
.btn--ghost { background-image: linear-gradient(var(--surface-alt), var(--surface-alt)); }
.btn--ghost:hover { background-size: 100% 102%; color: var(--ink); border-color: var(--ink); }
.sec--deep .btn--ghost:hover, .sec--olive .btn--ghost:hover { color: var(--ink); border-color: var(--cream); }
.btn:focus-visible, .seg:focus-visible, .switch__seg:focus-visible, .nav__menu summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

/* ==========================================================================
   03 · HERO — tighter head, quieter side, band arrives earlier
   ========================================================================== */
.hero { padding-block-start: clamp(22px, 3.2vw, 52px); }
.hero__head { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: clamp(18px, 3vw, 52px); align-items: start; }
.hero__title { min-width: 0; }
.hero h1 { max-width: 12ch; line-height: .94; letter-spacing: -.022em; margin-block: clamp(12px, 1.6vw, 22px) 0; font-size: clamp(2.75rem, 1.1rem + 6.4vw, 6.5rem); }
.hero__side { gap: var(--s-4); padding-block: clamp(4px, 1vw, 14px) 0; border-top: 2px solid var(--ink); padding-block-start: var(--s-4); max-width: 34rem; justify-self: end; }
.hero__lede { font-size: clamp(.98rem, .92rem + .35vw, 1.13rem); line-height: 1.62; font-weight: 300; color: var(--ink-muted); max-width: 37ch; text-wrap: pretty; margin: 0; }
.hero__cta .btn { min-height: 48px; }
.hero__scroll { display: flex; align-items: center; gap: var(--s-3); margin: clamp(14px, 2vw, 26px) 0 0; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); }
.hero__scroll i { display: block; width: 56px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--accent); animation: scroll-cue 2.2s var(--ease-silk) infinite; }
@keyframes scroll-cue { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.hero__band { margin-block-start: clamp(20px, 2.8vw, 38px); }
.hero__band img { height: clamp(380px, 56vw, 700px); }

/* ==========================================================================
   04 · SHOTLIST — expanding awwwards gallery (desktop), calm grid (touch)
   ========================================================================== */
@media (min-width: 981px) {
  .shotlist { display: flex; align-items: stretch; }
  .shotlist__cell { flex: 1 1 0; min-width: 0; position: relative; transition: flex .85s var(--ease-silk); }
  .shotlist__cell:nth-child(even) { padding-block-start: 0; align-self: stretch; }
  .shotlist__cell:nth-child(even) img { margin-top: clamp(12px, 2.4vw, 36px); }
  [data-shotlist]:hover .shotlist__cell { flex: .82 1 0; }
  [data-shotlist] .shotlist__cell:hover, [data-shotlist] .shotlist__cell.is-active { flex: 2.5 1 0; z-index: 2; }
  [data-shotlist]:hover .shotlist__cell:not(:hover):not(.is-active) img { filter: saturate(.55) brightness(.94); }
}
.shotlist__cell { cursor: pointer; }
.shotlist__cell img { filter: saturate(.9) contrast(1.02); transform: scale(1.001); transition: transform 1.1s var(--ease-silk), filter .6s var(--ease-silk); }
.shotlist__cell:hover img, .shotlist__cell.is-active img { filter: none; transform: scale(1.045); }
.shotlist__cell::after {
  content: attr(data-shot);
  position: absolute; left: 10px; bottom: 10px;
  padding: 6px 12px; border-radius: 999px;
  background: rgb(245 239 228 / .92); color: var(--ink-warm);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-silk), transform .45s var(--ease-silk);
  pointer-events: none; white-space: nowrap;
}
.shotlist__cell:hover::after, .shotlist__cell.is-active::after { opacity: 1; transform: none; }

/* ==========================================================================
   05 · RECENT WORK mosaic — zoom, veil, view badge, sibling dim
   ========================================================================== */
.mosaic figure { transition: opacity .5s var(--ease-silk); }
@media (min-width: 981px) {
  [data-mosaic]:hover figure:not(:hover) { opacity: .42; }
}
.mosaic__media { isolation: isolate; }
.mosaic__media img { transform: scale(1.012); transition: transform 1.15s var(--ease-silk), filter .7s var(--ease-silk); filter: saturate(.96); }
.mosaic figure:hover .mosaic__media img { transform: scale(1.075) rotate(.35deg); filter: none; }
.mosaic__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgb(35 33 26 / .34), transparent 46%);
  opacity: 0; transition: opacity .6s var(--ease-silk);
}
.mosaic figure:hover .mosaic__media::after { opacity: 1; }
.mosaic__media::before {
  content: "view"; position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-50%, -40%) scale(.85);
  padding: 10px 22px; border-radius: 999px;
  background: var(--cream); color: var(--ink-warm);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  opacity: 0; transition: opacity .45s var(--ease-silk), transform .55s var(--ease-silk);
  pointer-events: none; white-space: nowrap;
}
.mosaic figure:hover .mosaic__media::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mosaic figcaption { transition: transform .5s var(--ease-silk); }
.mosaic figure:hover figcaption { transform: translateX(6px); }

/* ==========================================================================
   06 · ROUTES cards — deeper image hover, arrow foot slides
   ========================================================================== */
.route .card__media img { transform: scale(1.01); transition: transform 1.1s var(--ease-silk), filter .6s; }
.route:hover .card__media img { transform: scale(1.09); }
.route .card__foot { transition: color .35s, letter-spacing .5s var(--ease-silk); }
.route:hover .card__foot { color: var(--accent); letter-spacing: .16em; }
.offer__media img { transition: transform 1s var(--ease-silk); }
.offer:hover .offer__media img { transform: scale(1.07); }

/* ==========================================================================
   07 · AVAILABILITY FORM — spacing fixed, every input custom
   ========================================================================== */
.wiz { gap: var(--s-4); }
.wiz__top { align-items: center; padding-block-end: var(--s-1); }
.rail { height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--line) 70%, transparent); }
.rail span { border-radius: 3px; transition: width .65s var(--ease-silk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.step { gap: var(--s-4); padding-block-start: var(--s-4); }
.step__q { margin: 0; }
.twoup { gap: var(--s-3); }
.chips, .cities { gap: var(--s-2); }
.wiz__nav { margin-block-start: var(--s-2); padding-block-start: var(--s-4); border-top: var(--edge); align-items: center; }
.wiz__nav [data-wiz-next] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); background-image: linear-gradient(rgb(0 0 0 / .22), rgb(0 0 0 / .22)); background-size: 100% 0%; }
.wiz__nav [data-wiz-next]:hover { background-size: 100% 102%; }
/* step entrance */
.step.is-entering { animation: step-in .55s var(--ease-silk); }
@keyframes step-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* custom chip radios — no more native blue dot */
.chip { position: relative; padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 26px); transition: background-color .35s var(--ease-now), border-color .35s, color .35s, transform .35s var(--ease-silk), box-shadow .35s; }
.chip::before { content: ""; position: absolute; left: var(--s-3); top: 50%; width: 16px; height: 16px; translate: 0 -50%; border-radius: 50%; border: 1.5px solid var(--ink-muted); transition: border-color .3s, background-color .3s, box-shadow .3s; }
.chip::after { content: ""; position: absolute; left: calc(var(--s-3) + 5px); top: 50%; width: 6px; height: 6px; translate: 0 -50%; border-radius: 50%; background: var(--accent-ink); scale: 0; transition: scale .35s var(--ease-snap); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px rgb(35 33 26 / .16); }
.chip:has(input:checked)::before { border-color: var(--accent-ink); }
.chip:has(input:checked)::after { scale: 1; }
.chip:has(input:focus-visible)::before { outline: 2px solid var(--ring); outline-offset: 2px; }
/* timing radios become segmented pills */
.step .twoup .check { align-items: center; gap: var(--s-3); min-height: 48px; margin: 0; padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3); background: var(--field); border: var(--hair) solid var(--line); border-radius: var(--r-field); transition: border-color .3s, background-color .3s, transform .35s var(--ease-silk); }
.step .twoup .check:hover { border-color: var(--accent); transform: translateY(-1px); }
.step .twoup .check:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.check input[type="radio"] { appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 50%; border: 1.5px solid var(--ink-muted); background: transparent; display: grid; place-content: center; transition: border-color .3s; }
.check input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ink); scale: 0; transition: scale .3s var(--ease-snap); }
.check input[type="radio"]:checked { border-color: var(--accent-ink); background: transparent; box-shadow: none; }
.check input[type="radio"]:checked::before { scale: 1; }
/* custom selects (guests / hours) */
.select { position: relative; display: block; }
.select select {
  width: 100%; min-height: 52px; padding: var(--s-3) calc(var(--s-8) + 6px) var(--s-3) var(--s-4);
  background-color: var(--field); border: var(--hair) solid var(--line); border-radius: var(--r-field);
  color: var(--ink); font-family: var(--font-sans); font-size: 16px; font-weight: 300;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 17px) 50%;
  background-size: 7px 7px, 7px 7px; background-repeat: no-repeat;
  transition: border-color .3s, box-shadow .3s, background-color .3s, transform .3s var(--ease-silk);
}
.select select:hover { border-color: var(--accent); }
.select select:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); background-color: var(--surface); }
.select::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--accent); scale: 0 1; transition: scale .4s var(--ease-silk); }
.select:focus-within::after { scale: 1 1; }
.field--select .field__label { display: flex; align-items: center; gap: var(--s-2); }
.field--select .field__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* text inputs: taller, calmer, lift on focus */
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field textarea {
  min-height: 52px; border-radius: 8px; transition: border-color .3s, box-shadow .3s, background-color .3s, translate .3s var(--ease-silk);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); background: var(--surface); translate: 0 -1px; }
.field--error input, .field--error select, .field--error textarea { animation: field-shake .45s var(--ease-snap); }
@keyframes field-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
/* drop zone */
.drop { border-width: 1.5px; border-radius: 10px; transition: border-color .3s, background-color .3s, transform .35s var(--ease-silk); }
.drop:hover { transform: translateY(-1px); }
.drop.is-over { border-color: var(--accent); background: var(--surface); transform: scale(1.01); }

/* ==========================================================================
   08 · FAQ — buttery hover + smooth grid-rows open
   ========================================================================== */
.faq details { transition: background-color .4s var(--ease-now); border-radius: 0; }
.faq details:hover { background: color-mix(in srgb, var(--surface-alt) 55%, transparent); }
.faq details[open] { background: color-mix(in srgb, var(--surface-alt) 45%, transparent); }
.faq summary { align-items: center; padding-inline: var(--s-3); margin-inline: calc(-1 * var(--s-3)); border-radius: 8px; transition: color .3s, background-color .3s; }
.faq summary > span:first-child { transition: transform .45s var(--ease-silk); }
.faq summary:hover > span:first-child { transform: translateX(8px); }
.faq summary:hover { color: var(--ink); }
.faq summary .faq__sign {
  display: grid; place-content: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  transition: transform .55s var(--ease-silk), background-color .35s, color .35s, border-color .35s;
}
.faq summary:hover .faq__sign { border-color: var(--accent); color: var(--accent); transform: rotate(90deg); }
.faq details[open] summary .faq__sign { transform: rotate(135deg); background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.faq details:not([open]) > p { display: block !important; max-height: 0; opacity: 0; overflow: hidden; margin: 0; padding-block: 0; padding-inline: var(--s-3); transition: max-height .55s var(--ease-silk), opacity .4s, padding .45s var(--ease-silk); }
.faq details[open] > p, .faq details.is-open > p { display: block !important; overflow: hidden; margin: 0; padding-inline: var(--s-3); max-height: 420px; opacity: 1; padding-block-end: clamp(18px, 2.4vw, 30px); animation: faq-in .6s var(--ease-silk); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   09 · DOUBLE GREEN — city (deep) flows straight into business (olive)
   ========================================================================== */
.sec--olive {
  --surface: var(--olive);
  --surface-alt: #565C3C;
  --ink: var(--cream);
  --ink-muted: var(--taupe);
  --accent: var(--cream);
  --accent-ink: var(--olive-deep);
  --line: var(--deep-line);
  --field: #43482F;
  --ring: var(--taupe);
  --plate: var(--olive);
  background: var(--olive);
  color: var(--cream);
  position: relative;
}
.sec--olive::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 420px at 12% 0%, rgb(232 220 197 / .08), transparent 60%), radial-gradient(700px 420px at 95% 100%, rgb(0 0 0 / .14), transparent 60%); }
.sec--olive > * { position: relative; }
.sec--olive .lede, .sec--olive .facts, .sec--olive .label, .sec--olive .eyebrow { color: var(--cream); }
.sec--olive .muted, .sec--olive .fig figcaption { color: var(--taupe); }
.sec--olive .fig img { border: 1px solid var(--deep-line); }
.sec--deep + .sec--deep { margin-top: -1px; border-top: 1px solid var(--deep-line); padding-block-start: clamp(48px, 6vw, 110px); }
#city { padding-block-end: clamp(48px, 6vw, 110px); }
/* No ghost button lives in #business. The panel is cream inside an olive band,
   so a ghost in there would first need the light role tokens back — the rules
   that used to stand here painted cream on cream and are gone. */
#business .facts li::marker { color: var(--taupe); }

/* ==========================================================================
   10 · LOCOMOTION — clip reveals, stagger, marquee weight, band drift
   ========================================================================== */
.js .mosaic__media img, .js .bento img, .js .fig img, .js .about-portrait__fig img, .js .offer__media img { will-change: transform; }
.js .reveal.is-in .mosaic__media img { animation: img-in 1.2s var(--ease-silk); }
@keyframes img-in { from { clip-path: inset(8% 5% 8% 5% round 10px); transform: scale(1.08); } to { clip-path: inset(0 0 0 0 round 6px); transform: scale(1.012); } }
#offer-grid .offer { transition: transform .5s var(--ease-silk), border-color .35s, box-shadow .45s, opacity .5s; }
.js #offer-grid.is-in .offer:nth-child(2) { transition-delay: 70ms; }
.js #offer-grid.is-in .offer:nth-child(3) { transition-delay: 140ms; }
.js #offer-grid.is-in .offer:nth-child(4) { transition-delay: 210ms; }
.routes-3.reveal.is-in .card:nth-child(2) { animation-delay: 90ms; }
.routes-3.reveal.is-in .card:nth-child(3) { animation-delay: 180ms; }
.band__stage--pair img { will-change: transform; }
.marquee { border-block-color: var(--deep-line); }

/* ==========================================================================
   11 · Responsive guards
   ========================================================================== */
@media (max-width: 980px) {
  .hero__head { grid-template-columns: minmax(0, 1fr); }
  .hero__side { justify-self: start; max-width: 40rem; }
  .hero h1 { max-width: 14ch; }
  .nav__panel { grid-template-columns: minmax(0, 1fr); padding-top: clamp(100px, 12vh, 130px); }
  .nav__panel a > span:last-child > span:last-child { font-size: clamp(1.25rem, 1.1rem + 2.6vw, 1.7rem); }
}
@media (max-width: 560px) {
  .hero__scroll { display: none; }
  .faq summary { margin-inline: 0; }
  .faq details:not([open]) > p, .faq details[open] > p { padding-inline: 0; }
}

/* ---- fixes: grid-stretched buttons, mosaic parallax on phones ---- */
.stack .btn { justify-self: start; }
@media (max-width: 760px) {
  [data-mosaic] [data-scroll-speed] { transform: none !important; }
  /* hero shotlist parallax would push the 2-up phone grid over itself */
  [data-shotlist] [data-scroll-speed] { transform: none !important; }
  .shotlist__cell { position: relative; z-index: auto; }
}

/* ==========================================================================
   REFINEMENT PASS — client polish round
   01 logo · 02 menu beige · 03 business standout · 04 titles · 05 alignment ·
   06 new mosaic slots · 07 dash cleanup
   ========================================================================== */

:root {
  --brand-dark: #40260E;
  --beige: #E8DCC5;
  --beige-line: rgb(232 220 197 / .32);
  /* bigger, more present section titles */
  --t-h2: clamp(2.125rem, 1.35rem + 3.1vw, 4rem);
  --t-h3: clamp(1.375rem, 1.15rem + 1vw, 2rem);
}

/* ---- 07 · dash cleanup: single hyphen marker, never a double ---- */
.facts li::before { content: "-"; }

/* ---- 01 · header logo, same as footer, a touch darker ---- */
.nav__mark.brand--lg { font-size: var(--t-body-s); }
.brand--dark .brand__name { color: var(--ink); }
.brand--dark .brand__kind {
  color: var(--brand-dark);
  border-inline-start: var(--hair) solid var(--brand-dark);
}
.foot__mark .brand__kind { color: var(--accent); }

/* ---- 02 · menu overlay: beige button, beige hairlines ---- */
.nav__panel a { border-bottom: 1px solid var(--beige-line); }
.nav__panel a:last-of-type { border-bottom: 0; }
.nav__panel .nav__tile { border: 1px solid var(--beige-line); }
.nav__panel .btn {
  background: var(--beige);
  border-color: var(--beige);
  color: var(--olive-deep);
  background-image: linear-gradient(rgb(0 0 0 / .12), rgb(0 0 0 / .12));
}
.nav__panel .btn:hover {
  background: var(--beige);
  border-color: #fff;
  color: var(--olive-deep);
  background-size: 100% 102%;
}

/* ---- 04 · section titles that catch the eye ---- */
.sec h2 {
  font-weight: 500;
  letter-spacing: -.022em;
  line-height: 1.02;
  text-wrap: balance;
  max-width: 20ch;
}
.sec .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-alt) 60%, transparent);
}
.sec .eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.sec--deep .eyebrow, .sec--olive .eyebrow {
  border-color: var(--deep-line);
  background: rgb(232 220 197 / .08);
}
.sec--deep .eyebrow::before, .sec--olive .eyebrow::before { background: var(--cream); }
.head h2, .cols h2 { margin-block-start: var(--s-3); }
.rule { border-top-width: 2px; }
.sec .head .rule, .sec > .wrap > .rule { border-top-color: var(--accent); opacity: .55; }

/* ---- 05 · premium alignment: one straight left edge, even measures ---- */
.sec p, .sec li, .card__body, .offer, .rcard, .fig, .flow__body {
  text-align: left;
}
.lede, .body, .body-s, .card__desc, .offer__facts, .flow__note, .pricelist__note {
  text-wrap: pretty;
  hanging-punctuation: none;
}
.head--split .lede { justify-self: start; max-width: 30rem; }
.about-portrait__body p { max-width: 54ch; }
.card__body { gap: var(--s-3); }
.card__title, .offer__name { text-wrap: balance; max-width: 16ch; }
.mosaic figcaption, .fig figcaption, .bento figcaption { align-items: baseline; }
.cols--5-6, .cols--4-7, .cols--085 { align-items: start; }

/* ---- 06 · work mosaic grows from six to eight frames ---- */
.slot-g, .slot-h { grid-column: span 3; }
.slot-g { order: 7; }
.slot-h { order: 8; }
.slot-g .mosaic__media, .slot-h .mosaic__media { aspect-ratio: 3 / 2; }

/* ---- 03 · FOR BUSINESS standout: cream panel on the olive ground ---- */
.sec--business { position: relative; }
.business-panel {
  background: var(--cream);
  color: #2B2115;
  border-radius: 20px;
  padding: clamp(26px, 4vw, 60px);
  box-shadow: 0 2px 6px rgb(35 33 26 / .12), 0 30px 80px rgb(20 18 8 / .28);
  border: 1px solid rgb(232 220 197 / .5);
  position: relative;
  overflow: hidden;
}
.business-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--olive-deep), var(--sage), var(--taupe));
}
.business-panel h2 { color: #211708; max-width: 16ch; line-height: 1.08; padding-bottom: .08em; }
.business-panel .lede { color: #54432E; max-width: 42ch; }
.business-panel .facts li { color: #54432E; }
.business-panel .facts li::before { color: var(--olive); }
.business-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
}
.badge--business {
  background: var(--olive-deep);
  border-color: var(--olive-deep);
  color: var(--cream);
  font-size: var(--t-mono);
}
.business-kicker__note {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7A6749;
}
.business-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding-block: var(--s-3);
  border-block: 1px solid #C9B992;
}
.business-price span {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  line-height: 1.1;
  padding-bottom: .06em;
  letter-spacing: -.02em;
  color: #211708;
}
.business-price small {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6E5B3E;
}
.business-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.btn--solid {
  background: var(--olive-deep);
  border-color: var(--olive-deep);
  color: var(--cream);
  background-image: linear-gradient(rgb(255 255 255 / .12), rgb(255 255 255 / .12));
}
.btn--solid:hover { background-size: 100% 102%; color: var(--cream); }
.business-panel .link-quiet { color: #40260E; }
.business-fig { margin: 0; align-self: stretch; }
.business-fig img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #B9A67F;
  box-shadow: 0 18px 50px rgb(43 33 21 / .22);
}
.business-fig figcaption { color: #6E5B3E; }
.business-fig figcaption span {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* new landscape frames keep their faces: centre the detail, honour the wide */
.shotlist__cell img { object-position: 50% 40%; }
.route .card__media img, .offer__media img { object-position: 50% 35%; }
/* the graduated slots and the two friends frames are portraits inside a
   landscape window: sit the crop on the faces, not on the pavement */
.slot-g .mosaic__media img, .slot-h .mosaic__media img,
.slot-i .mosaic__media img, .slot-j .mosaic__media img,
.slot-k .mosaic__media img { object-position: 50% 32%; }

@media (max-width: 1180px) {
  .slot-g, .slot-h { grid-column: span 6; }
}
@media (max-width: 760px) {
  .slot-g .mosaic__media, .slot-h .mosaic__media { aspect-ratio: 4 / 3; }
  .business-fig img { min-height: 240px; }
}

/* ---- about read-more: on desktop the second paragraph simply sits in the
   column — there is room for it there, so no button is drawn at all. On
   phones the paragraph folds behind a pill button (640px block below, plus
   system.js, which opens the <details> for the desktop canvas). With no
   JavaScript the open attribute stands and the whole text is readable. ---- */
.about-more { display: block; }
.about-more > summary { display: none; }
.about-more > p { margin-block-start: var(--s-4); }
/* the second paragraph is part of the column now, so the signature needs its
   own air rather than sitting one line under it */
.about-portrait__sig { margin-block-start: var(--s-5); }

/* ==========================================================================
   MOBILE CALM-DOWN — one quiet column, nothing doubled
   The client asked for less on the phone: a small wordmark, no clutter,
   one straight left edge. So below 640px the header is a single 56px row
   (Eleventh + menu), the language switch, the dates button and the hero
   eyebrow are gone, and every section gets the same narrow rhythm.
   ========================================================================== */

@media (max-width: 640px) {
  /* ---- header: full small logo left, menu right, nothing else ---- */
  .ticker__in {
    min-height: 28px;
    font-size: .75rem;
    letter-spacing: .14em;
  }
  .nav__in {
    flex-wrap: nowrap;
    min-height: 56px;
    padding-block: 8px;
    gap: 10px;
    justify-content: space-between;
  }
  .nav__mark { order: 1; margin-inline-end: 0; font-size: .82rem; flex: none; }
  .nav__mark.brand--lg { font-size: .82rem; }
  .nav__mark .brand__name { letter-spacing: .14em; text-indent: .14em; }
  .nav__mark .brand__kind {
    display: inline;
    font-size: 1em;
    letter-spacing: .14em;
    text-indent: .14em;
    padding-inline-start: .5em;
  }
  .nav__mid { order: 2; margin-inline: 0; margin-left: auto; }
  .nav__menu summary {
    min-height: 38px;
    padding: 7px 14px;
  }
  /* per request: hide the language switch and the dates CTA on phones.
     Both stay one tap away inside the menu panel. */
  .nav__right { display: none; }
  .nav__panel {
    position: fixed;
    top: 96px;
    left: 12px;
    right: 12px;
    width: auto;
  }

  /* ---- hero: no eyebrow, smaller title, stacked buttons ---- */
  .hero { padding-block-start: 22px; }
  .hero .eyebrow { display: none; }
  .hero h1 {
    margin-block: 0;
    font-size: clamp(2.35rem, 12.5vw, 3.1rem);
    line-height: .98;
    letter-spacing: -.02em;
  }
  .hero__head { gap: 18px; }
  .hero__side {
    gap: 14px;
    padding-block-end: 0;
    border-top: 0;
    padding-block-start: 0;
  }
  .hero__lede { font-size: .99rem; line-height: 1.6; }
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .hero__cta .btn { width: 100%; }
  .hero__trust { font-size: .75rem; letter-spacing: .1em; }
  .hero__band { margin-block-start: 20px; }
  .hero__band img { height: clamp(200px, 64vw, 320px); }
  .shotlist { gap: 10px; padding: 10px; }
  .shotlist__cell { overflow: clip; border-radius: var(--r-card); }
  /* touch gets the same feedback as hover: tap a frame, it zooms and
     its caption pill appears; tapping it again clears it (see system.js) */
  .shotlist__cell:hover img { transform: none; }
  .shotlist__cell.is-active img { transform: scale(1.05); filter: none; }
  [data-shotlist]:has(.is-active) .shotlist__cell:not(.is-active) img { filter: saturate(.6) brightness(.96); }
  .shotlist__cell::after {
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 5px 10px;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .plate {
    margin: 12px 16px 0;
    max-width: none;
    padding: 12px 14px;
    gap: 12px;
  }

  /* ---- one rhythm for every section ---- */
  .sec { padding-block: 34px; }
  .sec--tight { padding-block: 26px; }
  .wrap { padding-inline: 16px; }
  .sec h2 { font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1.06; }
  .sec .lede { font-size: 1rem; line-height: 1.55; }
  .head--split, .cols--4-7, .cols--5-6, .cols--085, .cta__grid { gap: 16px; }
  .head .rule, .sec > .wrap > .rule { margin-block: 14px; }

  /* ---- about: the Istanbul paragraph folds into a pill on phones ---- */
  .about-more { display: block; }
  .about-more > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 10px 18px;
    margin-block-start: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--plate) 55%, transparent);
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-now) var(--ease-now),
                border-color var(--dur-now) var(--ease-now);
  }
  .about-more > summary::-webkit-details-marker { display: none; }
  .about-more > summary::marker { content: ""; }
  .about-more > summary:hover,
  .about-more > summary:active { background: var(--surface-alt); border-color: var(--ink-muted); }
  .about-more > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  /* A drawn +/− rather than a text glyph: one 12px box with two hairlines
     crossing in the middle, which turns to a single minus as it opens.
     The box is sized in three ways on purpose — width, height and flex-basis —
     so no flex context can shrink it to its 1px rule. */
  .about-more__icon {
    position: relative;
    flex: 0 0 12px;
    inline-size: 12px;
    min-inline-size: 12px;
    block-size: 12px;
    transition: transform var(--dur-base) var(--ease-now);
  }
  .about-more__icon::before,
  .about-more__icon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    background: currentColor;
  }
  .about-more__icon::before { inline-size: 12px; block-size: 1px; }
  .about-more__icon::after { inline-size: 1px; block-size: 12px; }
  .about-more[open] .about-more__icon { transform: rotate(90deg); }
  .about-more > p { margin-block-start: 12px; }
  .about-portrait__fig { max-width: 100%; }
  .about-portrait__sig { margin-block-start: 12px; }

  /* ---- quote form: much smaller on phones ---- */
  #quote-form .cols--4-7 { gap: 14px; }
  #quote-form .facts,
  #quote-form .stack .body-s,
  .wiz__top .label,
  .step__tag,
  .field__help,
  .drop__hint,
  .wiz .sum { display: none; }
  #quote-form .lede { font-size: .95rem; }
  .wiz { padding: 12px; gap: 10px; }
  .wiz__top { margin: 0; }
  .rail { margin-block: 6px; }
  .step__q { font-size: 1.02rem; margin-block: 0 8px; }
  .chips { grid-template-columns: 1fr 1fr; gap: 6px; }
  /* the custom dot lives at left:12px, so the text needs room for it —
     without this left padding the dot sits on top of the words */
  .chip {
    min-height: 44px;
    padding: 8px 10px 8px 36px;
    font-size: .86rem;
    line-height: 1.35;
    align-items: center;
    overflow-wrap: break-word;
  }
  .chip::before { left: 12px; }
  .chip::after { left: 17px; }
  .chip span { min-width: 0; line-height: 1.35; overflow-wrap: break-word; }
  .cities { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .cities .chip { min-height: 44px; }
  .twoup { gap: 10px; }
  .field textarea { min-height: 72px; }
  .drop { min-height: 64px; padding: 12px; }
  .wiz__nav { gap: 8px; }
  .wiz__nav .btn { flex: 1; min-height: 42px; padding-inline: 12px; }

  /* ---- hide what's not important on phones ---- */
  /* eight-row service list lives on desktop; routes cards cover it */
  #services { display: none; }
  /* decorative promise lines + scrolling marquee */
  .band__line, .band__quote, .marquee { display: none; }
  .band__stage { gap: 10px; }
  /* work mosaic: first four frames only */
  #work .mosaic figure:nth-of-type(n+5) { display: none; }
  .mosaic { gap: 14px; }
  .mosaic__media { aspect-ratio: 4 / 3; }
  /* prices: the starting list stays whole; the big offer cards become a
     swipe rail instead of being thrown away (see the rate-card pass below) */
  .pricelist__note { display: none; }
  /* The starting list is read, not studied: the rows tighten, the flag drops
     onto its own line so it cannot push the number around, and the number
     loses the shout — the KM figure at a calm 15px, the euro line beneath it
     smaller and quieter, both sitting on one right edge down the list. */
  .pricelist { border-top: 0; }
  .pricelist__row { align-items: start; gap: 3px 14px; padding-block: 13px; }
  .pricelist__name { font-size: .95rem; line-height: 1.3; }
  .pricelist__flag {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    margin: 4px 0 0;
    padding: 3px 9px;
    font-size: .72rem;
    letter-spacing: .08em;
  }
  .pricelist__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
  }
  .pricelist__price small {
    margin-top: 4px;
    padding-inline-end: 6px;
    border-inline-end: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .06em;
    line-height: 1.2;
    text-align: right;
  }
  /* the "usual pick" flag is a quiet aside on a phone, not a headline */
  .pricelist__flag {
    border-color: color-mix(in srgb, var(--line) 85%, transparent);
    background: none;
    color: var(--ink-muted);
    font-weight: 400;
  }
  /* three ways in: smaller, shorter cards on phones.
     the "start from the work" pill stays on desktop only */
  #routes .eyebrow { display: none; }
  .routes-3 { gap: 10px; }
  .route .card__media { aspect-ratio: 16 / 10; }
  .route .card__body { padding: 12px 14px; gap: 6px; }
  .route .card__top { gap: 6px 10px; }
  .route .card__title { font-size: 1.2rem; line-height: 1.15; }
  .route .card__desc { font-size: .88rem; line-height: 1.5; }
  .route .card__foot { padding-block-start: 8px; }
  /* city intro: shorter text, pictures untouched */
  #city .head--split { gap: 12px; }
  #city .head .lede { font-size: .95rem; line-height: 1.55; }
  /* reviews: three only */
  #reviews .rcard:nth-of-type(n+4) { display: none; }
  .voices--grid { gap: 10px; }
  .rcard { padding: 14px; }
  .rcard__q p { font-size: .95rem; line-height: 1.55; }
  /* process: keep the intro + button, hide the long steps */
  #process .flow { display: none; }
  #process .facts { display: none; }
  /* city: two frames + commission box, three ribbon cards */
  #city .b2, #city .b3 { display: none; }
  #city .ribbon figure:nth-of-type(n+4) { display: none; }
  .bento { gap: 12px; }
  .bento img { aspect-ratio: 4 / 3; height: auto; }
  .ribbon { gap: 10px; padding: 10px 16px 16px; }
  .ribbon figure { flex: 0 0 68vw; transform: none; }
  .ribbon img { aspect-ratio: 3 / 4; }
  /* faq stays whole on phones — nothing trimmed */
  .faq details { display: block; }
  /* closing CTA meta + footer columns */
  .cta__meta { display: none; }
  .cta__row .btn { width: 100%; }

  /* cards, offers: single column, same gaps */
  .offers { gap: 12px; }
  .offer { padding: 16px; }

  /* business panel: tighter, image first on phones */
  .business-panel { padding: 20px 16px; border-radius: 16px; }
  .business-panel .facts li:nth-of-type(n+2) { display: none; }
  .business-price span { font-size: 2.2rem; }
  .business-cta .btn { width: 100%; }
  .business-fig img { min-height: 0; aspect-ratio: 4 / 3; }

  /* footer: one column, left edge straight */
  .foot__in { padding-block: 34px 20px; }
  .foot__top { flex-direction: column; align-items: flex-start; gap: 14px; }
  .foot__actions { width: 100%; }
  .foot__actions .btn { width: 100%; }
  .foot__grid { display: none; }
}

/* ==========================================================================
   RATE-CARD PASS — her whole price list, and the phone it has to survive
   01 the market note · 02 the starting offer · 03 the price book ·
   04 the offer cards · 05 the eighth to eleventh work frames ·
   06 the phone menu · 07 the footer credit
   ========================================================================== */

/* ---- 01 · where these numbers sit, said plainly ---- */
.pricenote {
  max-width: 64ch;
  margin-block: clamp(18px, 2.4vw, 30px) 0;
  padding-inline-start: var(--s-4);
  border-inline-start: 2px solid var(--accent);
  font-size: var(--t-body-s);
  line-height: 1.62;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* ---- 02 · the starting offer: name, an optional flag, the number ---- */
.pricelist__lede {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-5);
  padding-block: var(--s-4) var(--s-3);
}
.pricelist__row { grid-template-columns: minmax(0, 1fr) auto auto; }
.pricelist__name { grid-column: 1; grid-row: 1; }
.pricelist__flag { grid-column: 2; grid-row: 1; align-self: center; margin-inline-end: clamp(8px, 1.4vw, 18px); }
.pricelist__price { grid-column: 3; grid-row: 1; justify-self: end; }
.pricelist__note { grid-column: 1 / -1; grid-row: 2; }

/* ---- 03 · the price book: every category, folded until it is asked for ---- */
.pricebook { margin-block-start: clamp(30px, 4vw, 56px); }
.pricebook > .label { display: block; margin-block-end: var(--s-4); }
.pgroup { border-top: var(--edge); }
.pgroup:last-of-type { border-bottom: var(--edge); }
.pgroup > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-2) clamp(10px, 1.6vw, 22px);
  padding-block: clamp(12px, 1.5vw, 18px);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-now) var(--ease-now), padding-inline var(--dur-now) var(--ease-now);
}
.pgroup > summary::-webkit-details-marker { display: none; }
.pgroup > summary::marker { content: ""; }
.pgroup > summary:hover { background: color-mix(in srgb, var(--surface-alt) 60%, transparent); padding-inline: var(--s-3); }
.pgroup > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.pgroup__n { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .14em; color: var(--ink-muted); }
.pgroup__name { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem); line-height: 1.15; }
.pgroup__meta { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.pgroup__sign { font-family: var(--font-mono); font-size: var(--t-body-s); color: var(--accent); transition: transform var(--dur-base) var(--ease-now); }
.pgroup[open] > summary .pgroup__sign { transform: rotate(45deg); }
.pgroup__body { padding-block-end: var(--s-5); }
.prow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--s-6);
  align-items: baseline;
  padding-block: clamp(9px, 1vw, 13px);
  border-top: 1px solid var(--line);
}
.prow__name { grid-column: 1; font-size: var(--t-body-s); }
.prow__price { grid-column: 2; justify-self: end; font-family: var(--font-mono); font-weight: 700; font-size: var(--t-body-s); white-space: nowrap; }
.prow__note { grid-column: 1 / -1; margin-block-start: 2px; max-width: 62ch; font-size: var(--t-body-s); line-height: 1.5; color: var(--ink-muted); }
.pgroup__note {
  max-width: 62ch;
  margin-block-start: var(--s-4);
  padding-inline-start: var(--s-4);
  border-inline-start: 2px solid var(--accent);
  font-size: var(--t-body-s);
  line-height: 1.58;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* ---- 04 · the offer cards: three across, six of them ---- */
.offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segs { margin-block-start: clamp(18px, 2.4vw, 28px); }

/* ---- 05 · the work mosaic grows from eight frames to eleven ---- */
.slot-i, .slot-j, .slot-k { grid-column: span 2; }
.slot-i { order: 9; }
.slot-j { order: 10; }
.slot-k { order: 11; }
.slot-i .mosaic__media, .slot-j .mosaic__media, .slot-k .mosaic__media { aspect-ratio: 4 / 5; }
.slot-i .mosaic__media img, .slot-j .mosaic__media img, .slot-k .mosaic__media img { object-position: 50% 26%; }

@media (max-width: 1180px) {
  .slot-i, .slot-j, .slot-k { grid-column: span 4; }
}
/* one column means one column: an item that still spans four tracks would
   push the whole mosaic sideways on a phone */
@media (max-width: 760px) {
  .mosaic > figure { grid-column: auto; }
  .slot-i .mosaic__media, .slot-j .mosaic__media, .slot-k .mosaic__media { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   06 · THE PHONE MENU — a sheet under the bar, not a full screen.
   The panel used to be fixed, inset:0, min-height:100svh with 100–130px of
   top padding, so five links and a button filled a whole phone. It is now a
   compact card anchored to the header, and the language switch — hidden with
   the rest of .nav__right on phones — lives inside it.
   ========================================================================== */

.nav__panel-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
}
/* the switch is a phone control: the bar keeps its own copy on desktop */
.nav__panel-lang { display: none; }
.nav__panel-lang-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--taupe);
}

@media (max-width: 640px) {
  /* anchor the panel to .nav__in instead of the viewport */
  .nav__menu { position: static; }
  .nav__panel {
    position: absolute;
    inset: auto 10px auto 10px;
    top: calc(100% + 6px);
    bottom: auto;
    min-height: 0;
    max-height: calc(100svh - 108px);
    padding: 10px;
    gap: 0;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgb(20 18 8 / .42);
    overscroll-behavior: contain;
  }
  .nav__panel::before { border-radius: 14px; }
  /* the kicker gets the whole width; the language pair sits under it, right */
  .nav__panel-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 10px;
    padding: 2px 6px 9px;
    border-bottom: 1px solid var(--beige-line);
  }
  .nav__panel-kicker { grid-column: 1 / -1; letter-spacing: .14em; padding: 0; }
  .nav__panel-lang { grid-column: 2; justify-self: end; display: flex; align-items: center; gap: 8px; }
  .nav__panel-lang .switch__seg {
    min-height: 32px;
    padding: 0 11px;
    letter-spacing: .12em;
  }
  /* five rows, a third of the height they took before */
  .nav__panel a { padding: 7px 8px; gap: 10px; border-radius: 8px; }
  .nav__panel .nav__tile { width: 34px; height: 44px; border-radius: 3px; }
  .nav__panel a small { letter-spacing: .12em; }
  .nav__panel a > span:last-child > span:last-child { font-size: 1.02rem; line-height: 1.12; }
  .nav__panel .btn {
    width: 100%;
    min-height: 42px;
    margin-top: 8px;
    padding-inline: 16px;
    justify-self: stretch;
  }

  /* The offer cards swipe sideways rather than disappearing. It is a flex
     rail, not a grid: in a grid every card shares one implicit row, so the
     tallest card (the full-day wedding) sets the height of all of them and
     the short ones — portrait, graduation — render as a card at the top of a
     tall empty box. As flex items each card is exactly as tall as its own
     content, and the row is as tall as the tallest card. */
  #offer-grid {
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -16px;
    padding: 4px 16px 10px;
  }
  #offer-grid::-webkit-scrollbar { display: none; }
  #offer-grid .offer {
    flex: 0 0 76%;
    display: flex;
    scroll-snap-align: start;
    padding: 14px;
    gap: 10px;
  }
  #offer-grid .offer__name { font-size: 1.15rem; }
  #offer-grid .offer__facts { font-size: .82rem; }
  .segs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -16px;
    padding: 2px 16px 4px;
  }
  .segs::-webkit-scrollbar { display: none; }
  .seg { flex: none; }

  /* the price book, tightened for a phone */
  .pricenote { margin-block-start: 16px; font-size: .88rem; }
  .pricelist__lede { padding-block: 12px 10px; gap: 4px 14px; }
  .pricelist__row { grid-template-columns: minmax(0, 1fr) auto; }
  .pricelist__name { grid-column: 1; grid-row: 1; }
  .pricelist__flag { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin: 6px 0 0; }
  .pricelist__price { grid-column: 2; grid-row: 1; }
  .prow { gap: 2px 14px; }
  .prow__price { font-size: .84rem; }
  .pgroup > summary { gap: 4px 10px; }
  .pgroup__meta { grid-column: 3; grid-row: 1; }
  .pgroup__sign { grid-column: 4; grid-row: 1; justify-self: end; }
  .pgroup__name { font-size: 1.12rem; }
  .pgroup__body { padding-block-end: 18px; }
  .pgroup__note { margin-block-start: 14px; }
}

/* ---- 07 · the footer credit ---- */
.legal__credit a { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   CONTACT MENU — appended. Two invitations used to be sentences only: the
   promise in the hero ("I answer personally") and the number under the wizard
   ("Rather talk?"). Each is now the same small <details>, so there is no
   JavaScript to open it and no script to fail: the four real ways to reach her
   sit inside, and the panel drops OVER the page instead of pushing it, so
   nothing moves when it opens. The panel is anchored to the line it belongs
   to, not to the word inside it, which keeps it inside the column on a phone.
   ========================================================================== */

/* The line the menu hangs from is lifted as a whole. The hero's own entrance
   animation leaves a transform behind on .rise, and a transform is a stacking
   context: without an explicit z-index here the panel would be painted UNDER
   the photo band that follows it in the document. 30 keeps it above every
   piece of page furniture while still passing beneath the sticky nav (40). */
.hero__trust,
.contact-line { position: relative; z-index: 30; }

.cmenu { display: inline-block; }
.cmenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.cmenu__trigger::-webkit-details-marker { display: none; }
.cmenu__trigger::marker { content: ""; }

/* The same circle and the same plus as the FAQ, one size down: the page
   already taught the visitor that a plus opens. */
.cmenu__sign {
  flex: none;
  display: grid;
  place-content: center;
  width: 1.65em;
  height: 1.65em;
  border: var(--hair) solid var(--line);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: .92em;
  line-height: 1;
  color: var(--ink-muted);
  transition: transform .5s var(--ease-silk), background-color var(--dur-base) var(--ease-now),
              color var(--dur-base) var(--ease-now), border-color var(--dur-base) var(--ease-now);
}
.cmenu__trigger:hover .cmenu__sign { border-color: var(--accent); color: var(--accent); }
.cmenu[open] .cmenu__sign {
  transform: rotate(135deg);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.cmenu__panel {
  position: absolute;
  z-index: 1;
  top: calc(100% + 12px);
  left: 0;
  width: max-content;
  min-width: 246px;
  max-width: min(340px, calc(100vw - 2 * var(--pad)));
  padding: var(--s-2);
  background: var(--surface);
  border: var(--edge);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  /* the trigger may sit in mono, uppercase, letterspaced type: the panel is
     its own voice again */
  font-family: var(--font-sans);
  font-size: var(--t-body-s);
  font-weight: 300;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  color: var(--ink);
  animation: cmenu-in .4s var(--ease-silk) both;
}
@keyframes cmenu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.cmenu__kicker {
  padding: var(--s-2) var(--s-3) var(--s-3);
  margin-block-end: var(--s-1);
  border-block-end: var(--hair) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cmenu__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding: 11px var(--s-3);
  border-radius: var(--r-field);
  text-decoration: none;
  transition: background-color var(--dur-quick) var(--ease-now);
}
.cmenu__item:hover { background: var(--surface-alt); }
.cmenu__key {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cmenu__val { color: var(--ink); transition: color var(--dur-quick) var(--ease-now); }
.cmenu__item:hover .cmenu__val { color: var(--accent); }

/* On a phone the panel is as wide as its longest row needs and no wider, so
   "eleventhvisuals@gmail.com" still fits the column without pushing the page. */
@media (max-width: 560px) {
  .cmenu__panel { min-width: 0; }
  .cmenu__kicker { letter-spacing: .14em; }
  .cmenu__item { gap: var(--s-3); padding-inline: var(--s-2); }

  /* The quote form drops its small print on a phone, and that line used to be
     small print — a bare number, when tapping a number is what a phone already
     does. It is four real ways in now, so it stays. One id, three classes:
     one more than the rule that hides it. */
  #quote-form .stack .body-s.contact-line { display: block; }
}

/* ==========================================================================
   CLIENT ROUND 2 — the overlap pass
   01 the hero plate · 02 the step pill · 03 the promise band · 04 recent work ·
   05 what it costs · 06 the price list · 07 the price book · 08 the footer
   ========================================================================== */

/* ---- 01 · THE HERO PLATE never loses to a hovering shot list cell.
   The plate is pulled up over the band on purpose, and it carries the caption
   for the six frames above it. A hovered cell lifts itself to z-index 2, which
   used to paint its photograph straight through the first line of that
   caption. The plate is page furniture: it stands above the band, always. ---- */
.plate { position: relative; z-index: 4; }

/* ---- 02 · THE STEP PILL: room for the word inside it, and a word that sits
   on the middle of the pill rather than in its top third. ---- */
.step__tag { padding: var(--s-2) var(--s-4); line-height: 1.4; }

/* ---- 03 · THE PROMISE BAND arrives sooner. The list above it already closes
   with its own air, so the band does not need a second full section gap. ---- */
.band { padding-block-start: clamp(32px, 4.2vw, 74px); }

/* ---- 04 · RECENT WORK: no parallax, one baseline, nothing over the caption.
   The mosaic is a dense grid, and the parallax each figure carried slid frames
   over the captions of the row above — a lone caption with a photograph on top
   of it. Two rules fix the section for good:
     a) no parallax inside the mosaic, at any width;
     b) every figure fills its grid row, so the pictures in a row end on the
        same line and every caption in that row sits on one baseline. ---- */
[data-mosaic] [data-scroll-speed] { transform: none !important; }
.mosaic { align-items: stretch; }
.mosaic figure { grid-template-rows: 1fr auto; }
.mosaic__media { height: 100%; }
.mosaic figcaption {
  min-height: 2.5em;
  align-content: flex-start;
  line-height: 1.4;
}
/* Between 761px and 1180px the grid is twelve tracks wide and the pairs are
   lopsided — a seven-track 16:9 frame beside a five-track 4:5 one. Both now
   ask for a height that is within a few percent of the other, so filling the
   row costs the wide frame almost nothing. */
@media (min-width: 761px) and (max-width: 1180px) {
  .slot-a .mosaic__media, .slot-c .mosaic__media { aspect-ratio: 4 / 3; }
  .slot-d .mosaic__media, .slot-f .mosaic__media { aspect-ratio: 1 / 1; }
}

/* ---- 05 · WHAT IT COSTS: the argument beside the heading was set at lede
   size and ran seven lines, which pushed the heading down and left a hole
   above it. It is body type now, four lines, and the heading owns the row. ---- */
#prices .head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: clamp(18px, 3vw, 46px); }
#prices .head--split .lede {
  max-width: 40ch;
  font-size: clamp(.98rem, .92rem + .35vw, 1.13rem);
  line-height: 1.62;
  color: var(--ink-muted);
}
#prices .head h2 { max-width: 14ch; }

/* ---- 06 · WHAT IT COSTS, built as a rate card ----------------------------
   The starting offer is a paper card on the beige ground. Name, note, flag
   and number sit in four columns: the note is short enough to scan, the badge
   has a column of its own instead of floating in the middle of the row, and
   every number lands on the same right edge. The market note that used to
   open the section as a slab of grey closes it as small print now, with the
   currency and travel lines it belongs beside. ---- */
.pricelist {
  background: var(--surface);
  border: var(--edge);
  border-radius: 14px;
  padding-inline: clamp(16px, 2.4vw, 34px);
}
.pricelist__lede {
  gap: var(--s-2) var(--s-5);
  padding-block: clamp(16px, 2vw, 24px) clamp(12px, 1.6vw, 18px);
  border-bottom: var(--edge);
}
.pricelist__row { transition: background-color .35s var(--ease-now); }
.pricelist__row:hover { background: color-mix(in srgb, var(--surface-alt) 55%, transparent); }
.pricelist__row:last-of-type { border-bottom: 0; }

@media (min-width: 641px) {
  .pricelist__row {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(6rem, 1fr) auto auto;
    gap: 0 clamp(12px, 1.8vw, 26px);
    align-items: baseline;
    padding-block: clamp(12px, 1.5vw, 17px);
  }
  .pricelist__name { grid-column: 1; grid-row: 1; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); line-height: 1.25; }
  .pricelist__note { grid-column: 2; grid-row: 1; max-width: 46ch; }
  .pricelist__flag { grid-column: 3; grid-row: 1; align-self: center; margin: 0; }
  .pricelist__price { grid-column: 4; grid-row: 1; justify-self: end; text-align: right; }
}
/* under 980px the four columns cannot hold: the name takes the row with its
   number, and the note and the flag share the line beneath it */
@media (min-width: 641px) and (max-width: 980px) {
  .pricelist__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
  .pricelist__name { grid-column: 1; grid-row: 1; }
  .pricelist__price { grid-column: 2; grid-row: 1; }
  .pricelist__note { grid-column: 1; grid-row: 2; }
  .pricelist__flag { grid-column: 2; grid-row: 2; justify-self: end; }
}
.pricelist__price small { display: inline; margin-inline-start: .55em; letter-spacing: .08em; }
.pricelist__foot {
  display: grid;
  gap: var(--s-1);
  padding-block: clamp(14px, 1.8vw, 20px);
  border-top: var(--edge);
  font-size: var(--t-body-s);
}
/* the market context, quiet, under the card */
.pricenote {
  max-width: 76ch;
  margin-block: clamp(16px, 2vw, 26px) 0;
  font-size: var(--t-body-s);
  line-height: 1.62;
}

/* ---- 07 · THE PRICE BOOK: the same categories, folded tighter, and the
   same circled sign the FAQ and the contact menu already taught. ---- */
.pgroup > summary { padding-block: clamp(9px, 1.1vw, 14px); }
.pgroup__name { font-size: clamp(1.1rem, .98rem + .6vw, 1.4rem); }
.pgroup__meta { font-weight: 700; color: var(--ink); }
.pgroup__body { padding-block-end: var(--s-4); }
.prow { padding-block: clamp(7px, .85vw, 11px); }
.pgroup__note { margin-block-start: var(--s-3); }
.pgroup__sign {
  display: grid;
  place-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: var(--t-body-s);
  line-height: 1;
  color: var(--accent);
  transition: transform .55s var(--ease-silk), background-color .35s, color .35s, border-color .35s;
}
.pgroup > summary:hover .pgroup__sign { border-color: var(--accent); transform: rotate(90deg); }
.pgroup[open] > summary .pgroup__sign { transform: rotate(135deg); background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---- 08 · THE FOOTER carried the section padding twice — once on the footer
   itself, once inside .foot__in — so it closed on ~150px of nothing. The
   footer's own padding is gone and the block below the legal line is a
   deliberate 20–40px. ---- */
.foot.sec { padding-block: 0; }
.foot__in { padding-block: clamp(38px, 5.4vw, 84px) clamp(20px, 3vw, 40px); }
/* the claim line is gone, so the wordmark carries the rule that used to sit
   above it — the footer still closes on a hairline, not on empty space */
.foot__bigmark {
  margin-block-start: clamp(28px, 3.4vw, 52px);
  padding-block-start: clamp(20px, 2.6vw, 34px);
  border-top: var(--edge);
}
.legal { margin-block-start: clamp(16px, 2vw, 26px); padding-block-start: var(--s-3); }

/* ---- 09 · BUTTON LABELS: a line box tall enough to hold the glyphs it sets.
   At 1.1 the ink of a descender sat outside the line box, and the button's
   overflow clip cut it. Nothing visible on screen, but it is a real edge. ---- */
.btn { line-height: 1.3; }

/* ---- 10 · WHAT IT COSTS ON A PHONE. The rule that puts the argument beside
   the heading was never scoped to a width, so it outranked the 980px "every
   split head is one column" rule and kept two columns all the way down: on a
   phone the heading was crushed into a one-character column beside a 23rem
   paragraph that ran off the screen. Under 640px the argument is dropped and
   the heading owns the row. ---- */
@media (max-width: 640px) {
  #prices .head--split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #prices .head--split .lede { display: none; }
  #prices .head h2 { max-width: none; }
}