/* ==========================================================================
   Longines boutique LP — section & motion styles (Phase 3, v3)
   Light editorial ground; dark reserved for the climaxes (hero, timeline,
   Majetek, sport). One signature motion moment per section — GSAP layers
   reveals on top; everything here must be legible with motion off.
   ========================================================================== */

/* ---------- NAV ----------------------------------------------------------
   Always present: transparent + paper-white over the hero film, then turns
   solid (paper ground, ink type, hairline) once the page scrolls. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  color: var(--c-paper);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-ui) ease, background var(--dur-ui) ease,
              border-color var(--dur-ui) ease;
}
.nav.is-solid {
  color: var(--c-ink);
  background: color-mix(in srgb, var(--c-paper) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--c-line);
}
.nav__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.35rem var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.nav__logo { grid-column: 2; justify-self: center; color: currentColor; display: block; }
.logo-mark {
  display: block; height: 1.7rem; aspect-ratio: 119 / 30;
  background: currentColor;
  -webkit-mask: url("../assets/longines.com-3.svg") center / contain no-repeat;
  mask: url("../assets/longines.com-3.svg") center / contain no-repeat;
}
.footer__logo .logo-mark { height: 1.6rem; margin-inline: auto; }
.nav__cta { grid-column: 1; justify-self: start; }
.nav__lang { grid-column: 3; justify-self: end; display: flex; gap: 0.4rem; align-items: center; font-size: var(--fs-small); }
.nav__lang button { color: currentColor; opacity: 0.55; letter-spacing: 0.08em; transition: opacity var(--dur-hover) ease; }
.nav__lang button[aria-pressed="true"] { opacity: 1; }
.nav__lang span { opacity: 0.35; }
.nav__lang button[disabled] { cursor: default; }

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

/* ---------- PANELS -------------------------------------------------------- */
#stack { position: relative; }

.panel {
  position: relative;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
}
.panel--dark  { background: var(--c-ink);  color: var(--c-paper); }
.panel--light { background: var(--c-paper); color: var(--c-text); }

.panel > .panel__media { position: absolute; inset: 0; z-index: 0; }
.panel__media img,
.panel__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* hero stays put while the next section slides up over it (the one "překrytí") */
#hero { position: sticky; top: 0; }
#hero > .panel__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,26,43,0.88) 0%, rgba(14,26,43,0.35) 42%, rgba(14,26,43,0.30) 100%);
}

.panel__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding: clamp(6rem, 12vh, 10rem) var(--gutter) clamp(4rem, 8vh, 7rem);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-3);
  min-height: 100svh;
}
.panel__inner.center { align-items: center; text-align: center; }
.panel__inner.narrow { max-width: 68ch; }

/* ---------- CINEMATIC SCENES (the Majetek chapter + film invitation) -----
   Each scene is its own composition: typographic arrival, full-bleed image
   moments with a bottom scrim, and a mirrored editorial split. Copy over
   imagery never exceeds a label + a few lines + CTA. */
.scene__year {
  font-family: var(--font-display); font-size: clamp(5.5rem, 13vw, 11rem); line-height: 0.9;
  color: var(--c-ink); margin: 0;
}
.scene__label { font-size: var(--fs-small); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-soft); }
.scene__text { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.7; max-width: 46ch; }
.scene__text--light { color: var(--c-paper); opacity: 0.95; }
.scene--bleed .scene__label,
.boutique .scene__label { color: color-mix(in srgb, var(--c-paper) 70%, transparent); }
.scene__close {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.25;
  color: var(--c-paper); max-width: 24ch; margin-top: var(--space-2);
}
.scene--bleed > .panel__media::after,
.boutique > .panel__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,26,43,0.92) 0%, rgba(14,26,43,0.55) 32%, rgba(14,26,43,0.08) 62%, rgba(14,26,43,0) 100%);
}
.scene__foot { justify-content: flex-end; gap: var(--space-2); padding-bottom: clamp(3.5rem, 9vh, 6rem); }
.scene__foot .btn { margin-top: var(--space-2); }

.xl { font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02; font-weight: 400; }

/* ---------- BOUTIQUE PHOTOGRAPHY BAND (placeholders for the shoot) -------
   UNUSED: #boutique-photos was removed from the page. Kept so the band can be
   restored when the real boutique shoot arrives. .boutique__frame itself is
   still live — the Master band and the ambassador portraits both use it. */
.photos { min-height: 0; }
.photos__band {
  position: relative; width: 100%; max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
}
.boutique__frame { position: relative; overflow: hidden; background: var(--c-paper-alt); border-radius: 2px; }
.boutique__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.photos__a { grid-column: 1 / 8; grid-row: 1; aspect-ratio: 16 / 10; }
.photos__b { grid-column: 9 / 13; grid-row: 1; aspect-ratio: 3 / 4; align-self: end; transform: translateY(clamp(2rem, 6vh, 4rem)); }
.photos__c { grid-column: 4 / 9; grid-row: 2; aspect-ratio: 4 / 3; margin-top: clamp(4rem, 10vh, 7rem); }
@media (max-width: 820px) {
  .photos__band { display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(3rem, 8vh, 5rem) var(--gutter); }
  .photos__a, .photos__c { aspect-ratio: auto; height: 40vh; margin: 0; }
  .photos__b { display: none; transform: none; }
}


/* ---------- MASTER COLLECTION — campaign band (the "news/ad" break) -------
   Not a .panel on purpose: a band shorter than the viewport, so it reads as an
   insert between the opening statement and the timeline instead of competing
   with the pin that follows. The packshot runs wide; the copy keeps its own
   opaque paper card overlapping it (never long text straight onto imagery). */
/* position + z-index are load-bearing: #hero is sticky and its .panel__inner
   sits at z-index 2, so a static section here lets the hero film and its
   headline paint straight through. Every .panel gets position: relative for
   the same reason — this band has to opt in explicitly. */
.master {
  position: relative;
  z-index: 2;
  /* navy band, not paper: the campaign needs to read as a break in the page.
     The section keeps .panel--light in the markup only so the CTA inside the
     paper card stays ink-on-paper — the band's own colour is set here. */
  background: var(--c-ink);
  padding: clamp(5rem, 12vh, 9rem) 0;
}
.master__band {
  position: relative;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
}
.master__media {
  grid-column: 7 / 13; grid-row: 1;
  /* deliberately shorter than the card beside it — the card overhanging the
     photograph top and bottom is what gives the band its depth */
  height: clamp(240px, 34vh, 380px);
  background: var(--c-ink);
}
.master__card {
  grid-column: 1 / 7; grid-row: 1; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-3);
  background: var(--c-paper);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  box-shadow: 0 20px 50px rgba(23, 40, 74, 0.10);
}
.master__eyebrow {
  margin: 0; font-size: var(--fs-small); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--c-blue);
}
.master__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h2);
  line-height: var(--lh-tight); color: var(--c-ink);
}
.master__text {
  margin: 0; font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text); max-width: 38ch;
}
@media (max-width: 820px) {
  /* card tucks under the image rather than over it — no text on photo */
  .master__band { display: flex; flex-direction: column; }
  .master__media { aspect-ratio: 4 / 3; width: 100%; }
  .master__card { width: calc(100% - var(--space-4)); margin: calc(var(--space-4) * -1) auto 0; }
}

/* ---------- MAJETEK DETAIL SLIDER -----------------------------------------
   Native scroll-snap strip: drags with touch and trackpad, no JS, so it can
   never interfere with the pinned timeline above. Cards are narrower than the
   viewport on purpose, so the next one always peeks. position/z-index are
   required — the sticky hero paints through anything static. */
.majetek-slider {
  position: relative; z-index: 2;
  background: var(--c-paper);
  padding: clamp(2rem, 5vh, 4rem) 0 clamp(4rem, 10vh, 7rem);
}
/* The .gslide--card variant is declared further down, immediately after the
   base .gslide rules — both are single-class selectors, so the card only wins
   on source order. Declaring it here silently lost every declaration. */

/* Arrows centre on the slide's PICTURE, not on the slide box: the caption
   below would otherwise drag them down past the bottom of the photograph.
   Media height is the slide width x 2/3, so half of it is width x 0.333. */
.majetek-slider .gallery__btn { top: calc(min(52vw, 900px) * 0.333); }
/* only a native-scroll strip has ends; the centre-stage loop never disables */
.gallery__btn[disabled] { opacity: 0.3; cursor: default; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .gallery__btn[disabled]:hover { background: var(--c-paper-pure); color: var(--c-ink); }
}
.gslide__title {
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3);
  line-height: var(--lh-tight); color: var(--c-ink); margin: 0 0 0.6rem;
}
.gslide__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); opacity: 0.85; margin: 0; }
/* the RAF beat's typographic plate is defined with the card rules below —
   .gslide--card .gslide__media outranks a lone .gslide__media--awaiting */

@media (max-width: 820px) {
  .majetek-slider .gallery__btn { top: calc(78vw * 0.333); }
}

/* small text bits */
.caption  { font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); margin-top: var(--space-2); }

/* media must clip its scaling/curtain-revealing image */
.panel__media { overflow: hidden; }
/* scroll-driven darken layer (added by JS) */
.scroll-shade { position: absolute; inset: 0; background: var(--c-ink); pointer-events: none; z-index: 1; }

/* ---------- HISTORY: horizontal pinned timeline (the showpiece) --------- */
.timeline-section { position: relative; background: var(--c-paper); color: var(--c-text); }
.timeline { position: relative; height: 100svh; overflow: hidden; }
/* stays visible for the whole pinned run, so it is sized as a standing header
   rather than a full-size title card */
.timeline__intro { position: absolute; z-index: 4; top: clamp(4.5rem, 11vh, 8rem); left: var(--gutter); max-width: 40ch; }
.timeline__intro .fillhead { font-size: clamp(1.15rem, 2vw, 1.75rem); }
.timeline__track { display: flex; height: 100%; width: max-content; will-change: transform; }
/* top padding clears the persistent section title above the track */
/* 92vw, not 100vw: a sliver of the next milestone stays visible at the right
   edge, which is what tells people the track runs sideways — no arrows needed */
.milestone { flex: 0 0 92vw; height: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: clamp(5rem, 13vh, 7.5rem) var(--gutter) 0; }
.milestone__media { position: relative; z-index: 2; height: min(60vh, 600px); overflow: hidden; border-radius: 2px; background: var(--c-paper-alt); will-change: transform; }
.milestone__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Paired frame (1963): two archive photos in one milestone cell. The wrapper
   drops its own clipping so the smaller frame can sit over the corner of the
   larger one; each frame clips its own image. The wrapper still takes the
   existing approach-scale from main.js, so both move together. */
.milestone__media--pair { overflow: visible; background: none; }
.milestone__frame {
  position: absolute; overflow: hidden; border-radius: 2px;
  background: var(--c-paper-alt);
}
.milestone__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.milestone__frame--a { top: 0; left: 0; width: 84%; height: 84%; }
.milestone__frame--b {
  right: 0; bottom: 0; width: 40%; height: 52%;
  border: clamp(0.4rem, 0.8vw, 0.75rem) solid var(--c-paper);
}
/* alternate the inset corner down the track so the pairs don't read as one
   repeated template */
.pair--mirror .milestone__frame--a { left: auto; right: 0; }
.pair--mirror .milestone__frame--b { right: auto; left: 0; }

/* Archive plates: the client's period scans are small (≈320–760px), so they are
   matted and shown at a size their resolution carries, like a document laid on
   the page — never blown up to fill a photographic frame. */
.milestone__media--doc {
  overflow: visible; background: none;
  display: flex; align-items: center; justify-content: center;
}
.milestone__doc {
  margin: 0; background: var(--c-paper-pure);
  padding: clamp(0.5rem, 1vw, 0.9rem);
  box-shadow: 0 16px 38px rgba(23, 40, 74, 0.13);
}
.milestone__doc img { width: 100%; height: auto; display: block; }
.milestone__media--doc:not(.doc--pair) > .milestone__doc { max-width: min(100%, 430px); }
/* two plates for one milestone (1935: caseback + Bern registration). Bottom
   aligned and overlapped so they read as one group rather than two images
   scattered across the cell. */
.doc--pair { align-items: flex-end; }
.doc--pair .milestone__doc { position: static; }
.doc--pair .doc--main  { width: 58%; }
.doc--pair .doc--inset {
  position: relative; z-index: 1;
  width: 42%; margin-left: -10%; margin-bottom: -7%;
}

.milestone__text { position: relative; z-index: 1; max-width: 44ch; }
/* oversized ink year, fully on paper — depth comes from its slower travel,
   never from clipping it behind the photograph */
.milestone__year {
  font-family: var(--font-display); font-size: clamp(4rem, 10vw, 9rem); line-height: 0.95;
  display: block; color: var(--c-ink);
}
.milestone__head { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 400; color: var(--c-ink); margin: 0.6rem 0 1.1rem; }
.milestone__body { font-size: var(--fs-body); line-height: 1.7; opacity: 0.85; max-width: 40ch; }
/* 2px and a stronger track: at 1px/12% it was invisible, which defeated the
   point of using it as the progress indicator */
.timeline__rail { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(2rem, 5vh, 3.5rem); height: 2px; background: color-mix(in srgb, var(--c-ink) 20%, transparent); z-index: 4; }
.timeline__rail span { display: block; height: 100%; width: 100%; background: var(--c-ink); transform: scaleX(0); transform-origin: left; }
/* year ticks sitting just above the rail — the active one inks in */
.timeline__years {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: calc(clamp(2rem, 5vh, 3.5rem) + 0.85rem);
  z-index: 4; display: flex; justify-content: space-between;
  margin: 0; padding: 0; list-style: none;
}
.timeline__years li {
  font-size: var(--fs-small); letter-spacing: var(--tracking-wide);
  color: var(--c-ink); opacity: 0.32;
  transition: opacity var(--dur-ui) ease;
}
.timeline__years li.is-active { opacity: 1; }

/* timeline falls back to a vertical stack on small screens or reduced motion */
@media (max-width: 820px) {
  .timeline { height: auto; overflow: visible; }
  .timeline__intro { position: static; max-width: none; padding: clamp(4rem, 12vh, 6rem) var(--gutter) 0; }
  .timeline__track { flex-direction: column; width: 100%; }
  .milestone { flex: none; width: 100%; height: auto; grid-template-columns: 1fr; padding: clamp(3rem, 8vh, 5rem) var(--gutter); }
  .milestone__media { height: 42vh; order: -1; }
  .milestone__year { margin-left: 0; }
  .timeline__rail, .timeline__years { display: none; }
}

/* ---------- TYPOGRAPHY BLOCKS ------------------------------------------- */
.italic { font-style: italic; }
.ink { color: var(--c-ink); }

.hero { justify-content: flex-end; padding-bottom: clamp(4rem, 10vh, 8rem); gap: var(--space-3); }
.hero__title {
  font-size: clamp(3rem, 11vw, 9rem); line-height: 0.98; letter-spacing: 0.01em; font-weight: 400;
  text-transform: uppercase;
}
.hero__title .italic { text-transform: none; font-size: 0.62em; }
.hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.35rem); max-width: 40ch; opacity: 0.85; }

.big  { font-size: var(--fs-h2); max-width: 20ch; }
.mid  { font-size: clamp(1.5rem, 3vw, 2.4rem); max-width: 24ch; }
.body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 54ch; opacity: 0.9; }
.center-text { margin-inline: auto; }

/* fill-on-scroll headline (E7) */
.fillhead { font-size: var(--fs-h2); font-weight: 400; }
.fillhead span {
  background-image: linear-gradient(90deg, var(--c-ink) 0 50%, color-mix(in srgb, var(--c-ink) 18%, transparent) 50% 100%);
  background-size: 220% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.xl.fillhead { font-size: clamp(2.4rem, 6vw, 5rem); }

.scrollcue { font-size: var(--fs-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: 0.8; }
.scrollcue::after { content: " ↓"; }

/* opening statement — words ink in as you scroll (JS dims them; full ink without) */
.wordscrub {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.42;
  color: var(--c-ink); max-width: 34ch;
}

/* ---------- FULLSCREEN GALLERY (centre-stage slider) ---------------------
   The slider itself is live — it now runs the Majetek chapter. Only the
   .gallery SECTION wrapper below is unused, since #world ("Elegance is an
   attitude") was removed; kept in case a brand-world gallery returns. */
.gallery { min-height: 100svh; flex-direction: column; justify-content: center; }
.gallery .panel__inner.gallery__head {
  min-height: 0; padding-bottom: clamp(2rem, 5vh, 3.5rem);
}
.gallery__viewport { position: relative; width: 100%; }
/* default (no JS / reduced motion): native horizontal scroll with snap */
.gallery__track {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: max(var(--gutter), calc((100vw - min(58vw, 980px)) / 2));
}
.gallery__track::-webkit-scrollbar { display: none; }
/* enhanced (JS): slides are absolutely centred and individually positioned
   by wrapped distance — the infinite loop has no track translation at all */
.gallery__viewport.is-enhanced .gallery__track {
  display: block; position: relative; overflow: visible;
  scroll-snap-type: none; cursor: grab; padding-inline: 0;
}
.gallery__viewport.is-enhanced .gallery__track:active { cursor: grabbing; }
.gallery__viewport.is-enhanced .gslide { position: absolute; left: 50%; top: 0; will-change: transform; }
.gslide {
  flex: 0 0 auto; width: min(52vw, 900px); aspect-ratio: 16 / 10;
  margin: 0; overflow: hidden; border-radius: 2px; background: var(--c-paper-alt);
  scroll-snap-align: center; transform-origin: center; user-select: none;
}
.gslide img, .gslide video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* ---------- .gslide--card: a captioned centre-stage slide ------------------
   Same slider as the brand-world gallery above — same width, same loop, same
   arrows — with a title and a paragraph beneath the picture. It keeps .gslide's
   width so both galleries share one stage geometry; only the box below the
   image is new. MUST stay below the base .gslide rules: both selectors are one
   class, so this variant only wins on source order. */
.gslide--card {
  aspect-ratio: auto; overflow: visible; background: none;
  display: flex; flex-direction: column;
}
/* 3:2 — a touch squarer than the gallery's 16:10, because watch photography is
   portrait-ish and a letterbox crop cuts the case off top and bottom. Any
   taller (4:3) and the slide plus its caption no longer fits one screen. */
.gslide--card .gslide__media {
  aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--c-paper-alt); border-radius: 2px;
}
.gslide--card .gslide__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none;
}
/* The RAF beat has no archive photograph. A typographic plate — the squadron
   numbers on ink — reads as a deliberate break in a row of product shots,
   where an empty grey box just read as a missing image. Needs the two-class
   selector to outrank .gslide--card .gslide__media above. */
.gslide--card .gslide__media--awaiting {
  background: var(--c-ink);
  display: grid; place-items: center;
}
.gslide--card .gslide__media--awaiting span {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.75rem);
  letter-spacing: 0.06em;
  color: var(--c-paper);
}
/* caption is centred under the stage and kept to a readable measure — the
   slide itself is up to 900px wide, far too wide for a paragraph */
.gslide--card figcaption {
  padding-top: var(--space-3);
  text-align: center; max-width: 54ch; margin-inline: auto;
}
.gslide--card .gslide__text { margin-inline: auto; }
.gslide--card .btn { margin-top: var(--space-3); align-self: center; }
/* ---------- AMBASSADORS — three portraits, names on paper ---------------- */
.ambassadors { min-height: 0; flex-direction: column; }
.ambassadors__head { min-height: 0; padding-bottom: 0; align-items: flex-start; }
.ambassadors__row {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(5rem, 12vh, 9rem);
  align-items: start;
}
.ambassador--offset { margin-top: clamp(3rem, 8vh, 6rem); }   /* editorial stagger */
.ambassador .boutique__frame { aspect-ratio: 3 / 4; }
/* the three portraits link to the Carollinum article (per the client's doc), so
   they need to behave like links — quiet lift, name inks in */
.ambassador { display: block; color: inherit; }
.ambassador .boutique__frame,
.ambassador__name { transition: transform var(--dur-ui) var(--ease-out-strong), color var(--dur-ui) ease; }
@media (hover: hover) and (pointer: fine) {
  .ambassador:hover .boutique__frame { transform: translateY(-6px); }
  .ambassador:hover .ambassador__name { color: var(--c-ink); }
}
.ambassador:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
.ambassador__name {
  margin-top: 0.9rem; font-size: var(--fs-small); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-ink-soft);
}
@media (max-width: 820px) {
  .ambassadors__row { grid-template-columns: 1fr; row-gap: var(--space-4); padding-block: clamp(3rem, 8vh, 5rem); }
  .ambassador--offset { margin-top: 0; }
}
.gallery__btn {
  position: absolute; top: 50%; z-index: 5;
  width: 3.25rem; height: 3.25rem; display: grid; place-items: center;
  background: var(--c-paper-pure); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: 50%; font-size: 1.1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(23, 40, 74, 0.12);
  transform: translateY(-50%);
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out-strong);
}
.gallery__btn:active { transform: translateY(-50%) scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .gallery__btn:hover { background: var(--c-ink); color: var(--c-paper); }
}
.gallery__btn--prev { left: clamp(1rem, 4vw, 4rem); }
.gallery__btn--next { right: clamp(1rem, 4vw, 4rem); }
@media (max-width: 820px) {
  .gslide { width: 78vw; }
  .gallery__track { padding-inline: 11vw; }
}

/* assurance — shorter, airy beat */
.assurance { min-height: 0; }
.assurance .panel__inner { min-height: 72svh; border-top: 1px solid var(--c-line); }

/* visit — headline, CTA, address. Now that the form is gone this holds four
   short lines, so a full-viewport panel centring them left a huge empty band
   above the headline. Size it to its content instead. */
#visit { min-height: 0; }
#visit .panel__inner {
  min-height: 0;
  padding-block: clamp(3rem, 6vh, 4.5rem);
  gap: var(--space-3);
}
.statement-line {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.3; color: var(--c-ink); max-width: 24ch;
}

/* ---------- LAYOUT HELPERS ---------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.grid-2 .panel__media { position: relative; min-height: min(70vh, 640px); border-radius: 2px; }
.grid-2 .panel__media.tall { min-height: min(80vh, 720px); }
/* A packshot, not a photograph: shown whole on its own white plate rather than
   cropped to fill the frame. main.js also skips the scale/drift tween on these,
   since a contained image would just float inside its box. */
.grid-2 .panel__media--plate { background: var(--c-paper-pure); }
.panel__media--plate img {
  object-fit: contain;
  padding: clamp(1.5rem, 3.5vw, 3.5rem);
}
.col { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---------- WATCH GRID (uncropped packshots on quiet tiles) -------------- */
.watch-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem); margin: var(--space-3) 0;
}
.watch { display: flex; flex-direction: column; gap: 0.4rem; color: var(--c-text); transition: transform var(--dur-press) var(--ease-out-strong); }
.watch:active { transform: scale(0.98); }
.watch__img {
  display: block; position: relative; aspect-ratio: 4 / 5; background: var(--c-paper-alt); border-radius: 2px;
  overflow: hidden; transition: transform 0.25s var(--ease-out-strong), background 0.25s ease;
}
/* watches are never cropped — contained, centred, breathing room around the case */
.watch__img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: clamp(0.9rem, 2vw, 1.6rem); display: block;
  transition: transform 0.45s var(--ease-out-strong);
}
/* Longines' own packshots come with transparent backgrounds and sit straight on
   the tile. The client's supplied JPEGs carry a solid white one, which shows as
   a rectangle — multiply drops that white into the tile's grey. */
.watch__img img.on-white { mix-blend-mode: multiply; }
/* "před & po": the story shot (a second photograph, never a recolour)
   sits over the packshot and fades in on hover */
.watch__img .watch__then {
  object-fit: cover; padding: 0; opacity: 0;
  transition: opacity 0.45s var(--ease-out-strong);
}
/* era meta line — the then→now pairing from the concept */
.watch__era { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); margin-top: 0.6rem; }

/* hover: the piece comes gently forward — nothing recolours a product shot */
@media (hover: hover) and (pointer: fine) {
  .watch:hover .watch__img { transform: translateY(-4px); background: color-mix(in srgb, var(--c-paper-alt) 70%, #fff); }
  .watch:hover .watch__img img { transform: scale(1.05); }
  .watch:hover .watch__img .watch__then { opacity: 1; }
}
/* the model name leads the card, so it sits clearly above the description */
.watch b {
  font-family: var(--font-display); font-weight: 400; color: var(--c-ink);
  font-size: clamp(1.2rem, 1.5vw, 1.35rem); margin-top: 0.4rem;
}
/* Card copy sits between the old caption (13px) and section body text (17px):
   big enough to read, small enough that the model name still leads the tile.
   Runs the full width of its tile rather than a 30ch column. */
.watch__line {
  font-size: 0.9375rem; line-height: 1.65;
  opacity: 0.8; max-width: none;
}
.watch i { font-size: var(--fs-small); font-style: normal; letter-spacing: 0.02em; opacity: 0.55; }

/* ---------- BUTTONS & LINK HOVERS (E6) ---------------------------------- */
.btn {
  align-self: flex-start; display: inline-block;
  padding: 0.95rem 2rem; border: 1px solid currentColor; border-radius: var(--radius-btn);
  font-size: var(--fs-small); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out-strong);
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible,
.nav__cta:focus-visible,
.nav__lang button:focus-visible,
.gallery__btn:focus-visible,
.link-hover:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
.panel--light .btn { color: var(--c-ink); }
@media (hover: hover) and (pointer: fine) {
  .panel--dark .btn:hover { background: var(--c-paper); color: var(--c-ink); }
  .panel--light .btn:hover { background: var(--c-ink); color: var(--c-paper); }
}
.center .btn { align-self: center; }

.ghost { font-size: var(--fs-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: currentColor; }

.link-hover, .nav__cta, .nav__lang button { position: relative; }
.link-hover::after, .nav__cta::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  .link-hover:hover::after, .nav__cta:hover::after { transform: scaleX(1); }
}
.link-hover { align-self: flex-start; }

/* ---------- FORM --------------------------------------------------------
   UNUSED: the on-page concierge form was removed — booking hands off to the
   form on carollinum.cz. Kept in case booking is ever brought back on-page. */
.form { gap: var(--space-2); }
.form label { display: grid; gap: 0.4rem; font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.form input {
  font: inherit; text-transform: none; letter-spacing: normal;
  padding: 0.8rem 0; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  color: inherit; border-radius: 0;
}
.form input:focus { outline: none; border-bottom-color: currentColor; }
.form .btn { margin-top: var(--space-2); }
.form__status { font-family: var(--font-display); font-size: 1.15rem; opacity: 0.95; }

/* ---------- FOOTER ------------------------------------------------------- */
.footer { position: relative; z-index: 1; background: var(--c-ink); color: var(--c-paper); }
.footer__inner { max-width: var(--maxw); margin-inline: auto; padding: clamp(3rem, 8vh, 6rem) var(--gutter); display: grid; gap: 0.7rem; text-align: center; place-items: center; }
.footer__logo { display: block; }
.footer .muted { color: color-mix(in srgb, var(--c-paper) 55%, transparent); font-size: var(--fs-small); max-width: 52ch; }

/* Reveal initial states are set by GSAP (in the motion branch only), so content
   stays visible when motion is off — no CSS hiding, no JS-failure special-casing. */

/* ---------- RESPONSIVE --------------------------------------------------- */
@media (max-width: 820px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2 .panel__media { min-height: 42vh; order: -1; }
  .form-grid .form { order: 0; }
  .panel__inner { padding-top: clamp(5rem, 14vh, 8rem); }
  .nav__inner { padding: 1rem var(--gutter); }
  .nav__cta { font-size: 0.7rem; letter-spacing: 0.08em; }
  .logo-mark { height: 1.35rem; }
  .footer__logo .logo-mark { height: 1.4rem; }
  .watch-grid { grid-template-columns: repeat(2, 1fr); }
  .milestone__year { margin-left: 0; font-size: clamp(3rem, 14vw, 5rem); }
  .scene__year { font-size: clamp(3.5rem, 16vw, 6rem); }
}
@media (max-width: 460px) {
  /* one column: the description is the card's only copy now, so hiding it here
     left a phone with nothing but a photo and a name */
  .watch-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- REDUCED MOTION: linear flow, everything legible -------------- */
@media (prefers-reduced-motion: reduce) {
  #hero { position: relative; }               /* no sticky cover */
  .fillhead span { background-position: 0 0; }
  html { scroll-behavior: auto; }
  /* timeline → vertical stack (no pin / horizontal) */
  .timeline { height: auto; overflow: visible; }
  .timeline__intro { position: static; max-width: none; padding: clamp(4rem, 12vh, 6rem) var(--gutter) 0; }
  .timeline__track { flex-direction: column; width: 100%; }
  .milestone { flex: none; width: 100%; height: auto; grid-template-columns: 1fr; padding: clamp(3rem, 8vh, 5rem) var(--gutter); }
  .milestone__media { height: 42vh; order: -1; }
  .milestone__year { margin-left: 0; }
  .timeline__rail, .timeline__years { display: none; }
}