/* ============================================================
   Kazan Racecourse case study — page sheet.
   Loaded AFTER styles.css and case-study.css. Scoped to
   body.case-study--kazan. Rebuilds the page from Figma 69:498
   (1440×13312): full-viewport hero, horizontal marquee, centered
   editorial intro, a blue gradient "canvas" (logo → typography →
   palette → photo grid) with a noise overlay, a final collage and
   the tempo signature. Fixed 1440 canvas / 16px root (from
   case-study.css); flow layout, margins approximate by design.
   ============================================================ */

:root {
  --kz-mont: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --kz-oran: "Oranienbaum", Georgia, serif;
  --kz-content: 1168px;          /* centered content column */
  --kz-accent: #6fb3d0;          /* carolina blue — caption tint */
}

/* Header at Figma y=110 (shared .cs-header uses the old 243px offset → pull
   up 219px for this page). The added subtitle makes the header taller than
   Figma's 104px frame, so the hero's own margin-top is trimmed below. */
/* Top/bottom balance: page-tail matches the universal 157px page-top gap. */
body.case-study--kazan .cs-page { padding-bottom: var(--cs-gap); }

/* ---- Header subtitle (under the CLIENT value) ---- */
.kz-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  text-transform: uppercase;
  margin-top: 12px;
}

/* ---- Hero: full-viewport width, Figma 1440×810 ratio ----
   Height capped by --cs-vh-cap (case-study.css) so hero + marquee always
   fit one screen. The hero photo was re-cropped (its top 10% is gone), and
   the taller viewport-capped box crops from the top, so the frame is
   bottom-pinned (100%) — the hooves are the lowest thing in the shot, and
   pinning the bottom keeps them (plus a strip of sand) in frame at every
   width, with the rider's helmet still fully visible. */
/* <picture> defaults to display:inline and would otherwise force the
   block-level, negative-margined .kz-hero into an anonymous block box
   split around it. display:contents makes the wrapper produce no box of
   its own — .kz-hero (and its width/margin breakout above) lays out
   exactly as if <picture> weren't there, i.e. a truly transparent wrapper. */
.kz-hero-picture {
  display: contents;
}

.kz-hero {
  display: block;
  width: max(100vw, 100%);
  margin-left: min(0px, calc(50% - 50vw));
  height: min(56.25vw, var(--cs-vh-cap)); /* 810 / 1440 */
  margin-top: var(--cs-gap);     /* header → hero = 157px */
  object-fit: cover;
  object-position: 50% 100%;
}

/* ---- Horizontal marquee (the vertical word-rail, laid flat) ---- */
.kz-marquee {
  position: relative;
  width: max(100vw, 100%);        /* full-viewport band — the track crosses the screen. See
                                      .ab-hero in case-study.css for why this is max()/min(),
                                      not a plain 100vw/calc() breakout. */
  margin-left: min(0px, calc(50% - 50vw));
  margin-top: 14px;              /* doubles the gap below the hero (C2) */
  overflow: hidden;
  padding: 14px 0;               /* band ≈ 46px tall */
}

.kz-marquee-track {
  display: flex;
  width: max-content;
  color: var(--color-accent);    /* entire marquee — words AND dots — accent */
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
  animation: kz-scroll var(--kz-marquee-dur, 60s) linear infinite;
}

@keyframes kz-scroll {
  to { transform: translateX(-50%); }
}

.kz-marquee-seq {
  display: flex;
  align-items: center;
  gap: var(--rail-gap);
  padding-right: var(--rail-gap); /* completes the loop junction */
}

.kz-word {
  display: inline-block;
  transition: transform 120ms ease-out;
}

.kz-word:hover { transform: scale(1.06); }

.kz-dot {
  flex: none;
  width: var(--rail-dot);
  height: var(--rail-dot);
  border-radius: 50%;
  background: currentColor;
}

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

/* ---- Centered editorial intro ---- */
.kz-intro {
  max-width: 915px;
  margin: 0 auto;
  min-height: 933px;             /* Figma block2 1180..2113; paragraphs centered */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.kz-intro p + p { margin-top: 27px; }

/* ============================================================
   Gradient canvas: full-viewport bleed behind the logo row,
   typography and palette, easing back light behind the photo
   grid. Noise tile overlaid at ~20% (overlay blend).
   ============================================================ */
.kz-canvas {
  position: relative;
  width: max(100vw, 100%);
  margin-left: min(0px, calc(50% - 50vw));
  padding: 1px 0 0;              /* padding-top:1 prevents margin-collapse; no bottom pad */
  /* White → light blue → white, NO navy. The canvas now ends at the tote row
     (poster/business/collage/footer are white, outside this element).
     Stops are % of the canvas (canvas_top ≈2253, height ≈8139):
       white hold ~150px into canvas → ~2%
       fully #6FB3D0 by the logo block bottom (569 canvas-rel) → ~7%
       holds through text-logo, card, type, palette and the photo rows
       eases back to fully white by the canvas bottom = the poster-row top */
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 2%,
    #cfe4ee 4.5%,
    #6fb3d0 7%,      /* light blue solid by the logo row */
    #6fb3d0 87%,     /* holds through the whole gradient body */
    #a9d0e2 92%,
    #dcecf3 96%,
    #ffffff 100%     /* fully white by the poster-row top */
  );
  overflow: hidden;
}

.kz-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/kazan-racecourse/figma/noise.png");
  background-size: 512px 512px;
  opacity: 0.2;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.kz-canvas > * {
  position: relative;
  z-index: 1;
}

/* Fixed-height blocks (Figma stacks blocks of set height; content is
   vertically centered within each). Photo grid keeps its own flow. */
.kz-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.kz-block--logos    { min-height: 569px; }  /* 2113..2682 */
.kz-block--textlogo { min-height: 933px; }  /* 2682..3615 */
.kz-block--card     { min-height: 933px; }  /* 3615..4548 */
.kz-block--type     { min-height: 927px; }  /* 4548..5475 */
.kz-block--palette  { min-height: 927px; }  /* 5475..6402 */

/* Caption shared style (Montserrat, light, translucent) */
.kz-caption {
  font-family: var(--kz-mont);
  font-weight: 400;
  font-size: 16.7px;
  color: rgba(255, 249, 255, 0.7);
  text-align: center;
}

/* ---- Main logo row ---- */
.kz-logos {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 301px;
}

.kz-logos img {
  width: 325px;
  height: 260px;
  display: block;
}

/* Caption centered in the 301px gap between the logos, mid-height (C3). */
.kz-logos-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* ---- Text logo grid ---- */
.kz-textlogo {
  position: relative;
  text-align: center;
}

.kz-textlogo img {
  display: block;
  width: 1168px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Caption centered on the grid's empty middle band (between rows) (C4). */
.kz-textlogo-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* ---- Photo card (marble notebook) ---- */
.kz-card {
  width: 1300px;                 /* imagery column 1168 → 1300 (C6) */
  height: 867px;                 /* 779 × 1.113 */
  border-radius: 33px;
  overflow: hidden;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
}

.kz-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---- Typography specimen ---- */
.kz-type {
  width: var(--kz-content);
  margin: 0 auto;
}

.kz-type-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.kz-type-name {
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  color: #081b35;
}

.kz-type-name.kz-oran { font-family: var(--kz-oran); }
.kz-type-name.kz-mont { font-family: var(--kz-mont); }

.kz-charset {
  width: 584px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px 8px;
  text-align: center;
  color: #081b35;
}

.kz-charset.kz-oran span { font-family: var(--kz-oran); font-size: 23px; }
.kz-charset.kz-mont span { font-family: var(--kz-mont); font-size: 20px; }

.kz-type-captions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 44px 0;
  font-family: var(--kz-mont);
  font-size: 20px;
  color: rgba(255, 249, 255, 0.5);
}

/* ---- Colour palette ---- */
.kz-palette {
  width: var(--kz-content);
  margin: 0 auto;
}

.kz-swatch-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 33px;
}

.kz-swatch {
  height: 334px;
  border-radius: 36px;
  padding: 33px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff9ff;
}

.kz-swatch--light { color: #081b35; }

.kz-swatch h4 {
  font-family: var(--kz-mont);
  font-weight: 700;
  font-size: 23px;
  text-transform: uppercase;
  line-height: 1.15;
}

.kz-spec {
  font-family: var(--kz-mont);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
}

.kz-palette-captions {
  display: flex;
  justify-content: space-between;
  margin: 22px 0;
  font-family: var(--kz-mont);
  font-size: 20px;
  color: rgba(255, 249, 255, 0.7);  /* readable on the light-blue bg */
}

/* ---- Photo grid ---- */
.kz-photos {
  width: 1300px;                /* imagery column 1168 → 1300 (C6) */
  margin: 0 auto;              /* starts right after the palette block */
}

.kz-prow {
  display: grid;
  gap: 67px;
  margin-top: 67px;
}

.kz-photos > :first-child { margin-top: 0; }

.kz-prow--eq { grid-template-columns: 1fr 1fr; }
.kz-prow--wl { grid-template-columns: 1.5fr 1fr; } /* wide left  */
.kz-prow--wr { grid-template-columns: 1fr 1.5fr; } /* wide right */

.kz-pcard {
  border-radius: 33px;
  overflow: hidden;
}

.kz-pcard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Row heights (× 1.113 for the 1300 column) */
.kz-prow--eq .kz-pcard   { height: 867px; }   /* building / notebook, fill edge-to-edge */
.kz-prow--full .kz-pcard { height: 867px; }
.kz-prow--wl .kz-pcard,
.kz-prow--wr .kz-pcard { height: 490px; }

/* Business-cards tail row (on white, below the gradient) */
.kz-photos--tail { margin-top: 67px; }              /* standard gap under the poster row */
.kz-photos--tail .kz-pcard--biz { height: 774px; }  /* 1300 / 1.68 (raw src ratio, exact) */

/* Poster row (on white): three 551×773 posters, 66px gaps → 1785 wide,
   centered in a full-viewport band so the outer posters crop off the edges. */
.kz-poster-row {
  width: max(100vw, 100%);
  margin-left: min(0px, calc(50% - 50vw));
  margin-top: 67px;              /* standard row gap under the tote row */
  overflow: hidden;
}

.kz-poster-inner {
  display: flex;
  justify-content: center;
  gap: 66px;
}

.kz-poster-inner img {
  flex: none;
  width: 551px;
  height: 773px;
  object-fit: cover;
  object-position: center;
  border-radius: 33px;
}

/* ---- Final collage (on white, below the canvas) ---- */
.kz-collage {
  width: 1300px;                 /* 1168 → 1300 (C6) */
  margin: 67px auto 0;           /* standard row gap under the business-cards row */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 75px;                     /* 67 × 1.113 */
  align-items: start;
}

.kz-collage img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 33px;
}

.kz-collage-left img { height: 1450px; }   /* 1302 × 1.113 (= 686+78+686) */

.kz-collage-right {
  display: flex;
  flex-direction: column;
  gap: 78px;                     /* 70 × 1.113 */
}

.kz-collage-right img { height: 686px; }   /* 616 × 1.113 */

/* ---- Footer: HOME · tempo · NEXT on one line (C9) ---- */
.kz-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* logo centered; links at the margins */
  align-items: center;                  /* link centers align with the logo */
  padding: 0 var(--cs-edge);
  margin-top: 160px;
}

.kz-footer .cs-nav-link:first-child { justify-self: start; }
.kz-footer .cs-nav-link:last-child  { justify-self: end; }

.kz-footer-logo {
  width: 98px;
  height: 52px;
  filter: brightness(0);  /* asset is white; render dark on the white tail */
}

/* Middle grid column now holds the logo + the language toggle side by side
   (was the logo alone) — see the markup comment in kazan-racecourse.html.
   Gap matches the house 28px rhythm (rail-gap / showreel gap elsewhere). */
.kz-footer-mid {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* ============================================================
   Mobile + tablet (≤1199px) — spec P, task P1. Same query condition as
   case-study.css's shared block (a 402×874 phone reference, extended to
   1199px for the tablet band — see that file's comment for the "why
   extending is safe" reasoning). Kazan already inherits the shared
   body.case-study group from case-study.css automatically (its <body>
   carries both classes) — root font-size, .cs-page gutter/measure,
   stacked .cs-header, the shared .cs-nav-link size, --cs-gap — so this
   block only needs Kazan's OWN classes: .kz-hero, .kz-marquee, .kz-intro
   (its own class, NOT covered by the shared .cs-intro rule), the whole
   .kz-canvas (logo row → text-logo → marble card → type specimen →
   palette → photo grid), the collage, and .kz-footer (which isn't
   .cs-bottom-nav, so the shared stacking rule doesn't reach it either).

   Photo elements here (marble card, grid photos, collage) stay WITHIN
   the page/canvas gutter rather than bleeding to the viewport edge like
   other pages' hero-style photos — the spec's own "border-radius can
   stay at 33px" note for the photo grid only makes sense if the corners
   are still visible against a margin, so these are NOT given the
   100vw + negative-margin treatment; only .kz-hero and .kz-marquee are
   (matching every other page's hero/marquee, and already true on
   desktop).
   ============================================================ */
@media (max-width: 1199px) {

  /* ---- Hero, marquee ---- */
  .kz-hero {
    height: 56vh; /* was min(56.25vw, --cs-vh-cap) */
    margin-top: var(--cs-top-gap); /* Task 3: was var(--cs-gap) via the
      desktop rule — --cs-top-gap is declared/overridden in case-study.css,
      loaded before this sheet, so it's already in scope here. */
  }

  .kz-marquee-track {
    font-size: 0.71875rem;
  }

  /* ---- Intro: .kz-intro is Kazan's own class, not the shared .cs-intro
     — give it the same readability treatment by hand. Desktop centers
     the two paragraphs vertically inside a fixed 933px block (a Figma
     block height); min-height: auto drops that or the intro leaves a
     ~933px empty gap once its content no longer needs that much room.
     Switched from centered to left-aligned to match every other page's
     .cs-intro treatment — a multi-line paragraph reads easier
     left-aligned than centered at this width. ---- */
  .kz-intro {
    max-width: 100%;
    min-height: auto;
    display: block;
    text-align: left;
    font-size: 1rem;
    letter-spacing: 0.06em;
    line-height: 1.65;
  }

  .kz-intro p + p {
    margin-top: 1.25rem;
  }

  /* ---- Canvas: add the horizontal gutter here (the canvas itself is
     viewport-bleed on desktop with no side padding — every fixed-width
     child inside was centered independently instead). Everything below
     now reflows against this gutter-inset content box, so children can
     just use width: 100% rather than their own bleed math. ---- */
  .kz-canvas {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Fixed-height blocks: every .kz-block--* sets only min-height, all
     five values keyed to Figma block heights for the desktop stack
     (569–933px). Overriding the shared .kz-block base class here — with
     the extra body.case-study--kazan class, specificity 0,0,2 vs. each
     desktop variant's single-class 0,0,1 — wins regardless of source
     order and replaces the fixed vertical-centering box with real
     padding now that content, not a fixed height, determines each
     block's height. Without this the page becomes a column of huge
     empty gaps once the reflowed content is much shorter than the
     desktop block heights. */
  body.case-study--kazan .kz-block {
    min-height: auto;
    padding: 2.5rem 0;
  }

  /* ---- Main logo row: stack, each logo full width of the content box
     (both logos are shown together, not a swap — this is a deliberate
     white+dark comparison, kept as-is, just stacked). ---- */
  .kz-logos {
    width: 100%;   /* .kz-block's align-items: center means a flex item
                      with no explicit width only fit-content-sizes
                      against the available space — pinning it explicitly
                      removes any doubt about how that resolves */
    flex-direction: column;
    gap: 2.5rem;
  }

  .kz-logos img {
    width: 100%;
    height: auto;
  }

  /* Caption was absolutely centered in the (now gone) 301px gap between
     the two side-by-side logos — becomes a normal flow item below both. */
  .kz-logos-caption {
    position: static;
    transform: none;
    margin-top: 1rem;
  }

  /* ---- Text logo grid: the image already carries max-width: 100%;
     height: auto on its own desktop rule, so it already shrinks to fit
     once its container (now gutter-inset via .kz-canvas above) is
     narrower — no width override needed here, just the caption. ---- */
  .kz-textlogo {
    width: 100%;   /* same fit-content concern as .kz-logos above */
  }

  .kz-textlogo-caption {
    position: static;
    transform: none;
    margin-top: 1rem;
  }

  /* ---- Marble card: full width, height auto (kept, per client
     decision — this is the one photo explicitly kept from the canvas
     besides the grid/collage). Height auto means the child img can't
     resolve height: 100% against it (percentage heights against an
     auto-height containing block resolve to auto too) — so the img's
     own height goes to auto as well, rendering at its natural aspect
     ratio scaled to the card's full width, rather than the desktop
     object-fit: cover crop into a fixed 1300×867 box. ---- */
  .kz-card {
    width: 100%;
    height: auto;
  }

  .kz-card img {
    height: auto;
  }

  /* ---- Typography specimen: stack the name above its charset instead
     of side-by-side, let the charset wrap into 5 columns instead of 7,
     and shrink the glyph size so a row fits at ~362px. ---- */
  .kz-type {
    width: 100%;
  }

  .kz-type-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .kz-type-name {
    font-size: 2rem; /* was 60px flat */
  }

  .kz-charset {
    width: 100%;
    grid-template-columns: repeat(5, 1fr); /* was 7 at a fixed 584px */
    gap: 0.75rem 0.5rem;
    margin-top: 1.5rem;
  }

  .kz-charset.kz-oran span { font-size: 1.125rem; }  /* was 23px */
  .kz-charset.kz-mont span { font-size: 1rem; }       /* was 20px */

  .kz-type-captions {
    font-size: 0.75rem;
    margin: 1.5rem 0;
  }

  /* ---- Colour palette: two columns rather than four/eight. Each swatch
     keeps its CMYK/RGB/HEX spec beneath it at a legible, EXPLICIT 11px —
     this is delivered brand spec, so it's pinned, not left to shrink
     with everything else. height: auto (was a fixed 334px, which would
     read as a very tall, narrow strip at half the column width) with a
     comfortable min-height floor instead. ---- */
  .kz-palette {
    width: 100%;
  }

  .kz-swatch-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .kz-swatch {
    height: auto;
    min-height: 8rem;
    padding: 1rem 0.875rem;
    border-radius: 1rem;
  }

  .kz-swatch h4 {
    font-size: 0.9375rem;
  }

  .kz-spec {
    font-size: 11px;   /* delivered brand spec — legible, not scaled down
                           further just because the column narrowed */
    line-height: 1.4;
  }

  .kz-palette-captions {
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
    font-size: 0.75rem;
  }

  /* ---- Photo grid: single column. Photo budget, corrected — the "one
     cohesive grid unit" reading (matrix/showreel-style) was wrong for a
     single-column stack: at 402px each .kz-pcard renders as a standalone
     362×542 full-width photo, so 4 grid photos + 2 collage images really
     was 6 photos in a row, not one grid. Cut to the two strongest grid
     photos: bucket-hat.jpg and tshirt-closeup.jpg (.kz-prow--wl) — they
     show the identity applied to real product rather than environment,
     which reads better standalone than a building facade or a flat-lay
     notebook. .kz-prow--eq (building, notebook-red) is now hidden along
     with --full and --wr. */
  .kz-photos {
    width: 100%;
  }

  .kz-prow {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 1.25rem;
  }

  .kz-prow--wl .kz-pcard {
    height: 62vh;
  }

  .kz-prow--eq,
  .kz-prow--full,
  .kz-prow--wr {
    display: none;
  }

  /* Poster row and the business-card tail: neither is in the "keep"
     list — hidden outright, not deleted. */
  .kz-poster-row,
  .kz-photos--tail {
    display: none;
  }

  /* ---- Final collage: cut to 1 of its 3 images. Together with the 2
     surviving grid photos above, this gives a 3-photo tail right at the
     end of the page (palette + type specimen, both non-photo content,
     break it from anything before) — a deliberate closing run, not an
     open-ended "photos in a row" the client rule targets. Kept
     longsleeve-back.jpg (real product, same reasoning as the grid pick
     above) over tile-pattern.jpg (a texture/mood shot) and bag-door.jpg;
     .kz-collage-left is hidden entirely and only the first
     .kz-collage-right image survives. ---- */
  .kz-collage {
    width: 100%;
    margin-top: 2.5rem;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .kz-collage-left {
    display: none;
  }

  .kz-collage-right img {
    height: 62vh;
  }

  .kz-collage-right img:last-child {
    display: none;
  }

  /* ---- Footer: stack, matching the shared .cs-bottom-nav treatment
     (which this page can't use directly — .kz-footer is its own grid,
     not .cs-bottom-nav). The desktop 160px top margin isn't token-based
     (it's a Kazan-specific value, not var(--cs-gap)), so it needs its
     own explicit mobile value rather than picking up --cs-gap's new 4rem
     automatically. justify-self on the nav-link pseudo-selectors below
     has no effect once the container is flex (justify-self only applies
     in grid/block contexts), so nothing needs resetting there. ---- */
  .kz-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 1rem;
    padding: 0;
    margin-top: 4rem; /* was 160px */
  }
}

/* ============================================================
   Tablet band (768–1199px) — spec P, task P2. Kazan's version of
   case-study.css's supplementary block: raise the hero/photo heights for
   the wider part of the range (a 1199×800 hero at 56vh reads as a thin
   banner, not "one dominant photo"). .cs-page's 760px reading measure
   comes from the shared block in case-study.css — Kazan's <body> carries
   body.case-study too, so it applies automatically; not repeated here.

   The same elements are hidden here as in the ≤1199px block above (the
   display: none rules aren't re-scoped to a narrower range, so they
   already apply throughout 768–1199 too) — this block only needs to size
   the survivors: .kz-prow--eq and .kz-collage-left stay hidden, so they
   aren't listed below; listing them would be harmless but pointless.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
  .kz-hero {
    height: 70vh; /* was 56vh */
  }

  .kz-prow--wl .kz-pcard,
  .kz-collage-right img {
    height: 70vh; /* was 62vh */
  }
}

/* ============================================================
   Phone-only hero crop (≤767px), spec D task 2. The <picture> in
   kazan-racecourse.html swaps .kz-hero's source to hero-mobile.jpg (a
   1536×1920 portrait, already a tighter rider-focused crop) below this
   width; tablets (768–1199, block above) and desktop keep the wide
   2200×1320 crop and its 50% 100% (bottom-pinned, hooves-in-frame)
   object-position. That positioning was tuned for the WIDE crop, where
   the tall --cs-vh-cap-capped box crops from the top and the horse's
   hooves sit at the very bottom of the frame. The mobile crop is a
   different composition — already centred on the rider, not
   bottom-heavy — so pinning it to the bottom would cut the rider's head
   instead of protecting their feet. Centring is the safe default for a
   crop that's already framed by hand.
   ============================================================ */
@media (max-width: 767px) {
  .kz-hero {
    object-position: center;
  }
}