/* --- Full-screen menu: editorial numbered list (shared across all pages) --- */
.nav-page { background-color: var(--black); }
.nav-grid {
  display: flex;
  align-items: center;
  position: relative;
  grid-template-columns: none;
  width: 100%;
  height: 100vh;
  padding-left: 10vw;
  background-color: var(--black);
}
.nav-content-space { display: none; }
.nav-content-menu-wrapper {
  counter-reset: navi;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--black);
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
}
.links.nav-link {
  counter-increment: navi;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.75rem;
  width: fit-content;
  white-space: nowrap;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--link-gray);
  line-height: 1;
  font-size: clamp(2.5rem, 7vw, 11vh);
  transition: color .45s ease;
}
.links.nav-link::before {
  content: "0" counter(navi);
  font-family: Lora, serif;
  font-size: clamp(1rem, 1.2vw, 1.6rem);
  letter-spacing: 1px;
  color: #ffffff;
  opacity: 0.3;
  transition: opacity .45s ease;
  margin-top: 0.9rem;
}
.links.nav-link:hover { color: #ffffff; }
.links.nav-link:hover::before { opacity: 0.85; }
.links.nav-link.w--current { color: #ffffff; }
.links.nav-link.w--current::before { opacity: 0.85; }

/* In-menu footer fills the bottom (typographic, no images) */
.nav-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding: 0 10vw 3rem;
  z-index: 5;
}
.nav-footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
.nav-footer-right { align-items: flex-end; text-align: right; }
.nav-footer-kicker {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: #ffffff;
  opacity: 0.45;
}
.nav-footer-link {
  color: var(--link-gray);
  font-family: Lora, serif;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color .3s ease;
}
.nav-footer-link:hover { color: #ffffff; }
.nav-social { display: flex; gap: 1.5rem; }

/* Tablet */
@media screen and (max-width: 991px) {
  .nav-grid { padding-left: 9vw; }
  .nav-content-menu-wrapper { gap: 0.9rem; }
  .links.nav-link { font-size: clamp(2.75rem, 6.5vw, 5rem); }
  .nav-footer { padding: 0 9vw 2.5rem; }
}
/* Mobile */
@media screen and (max-width: 767px) {
  .nav-grid { padding-left: 8vw; }
  .nav-content-menu-wrapper { gap: 0.75rem; }
  .links.nav-link { font-size: 2.6rem; padding-bottom: 0.4rem; }
  .nav-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 0 8vw 2rem;
  }
  .nav-footer-right { align-items: flex-start; text-align: left; }
}
/* Small phones */
@media screen and (max-width: 479px) {
  .nav-content-menu-wrapper { gap: 0.5rem; }
  .links.nav-link { font-size: 2.1rem; padding-bottom: 0.35rem; }
}

/* =====================================================================
   ABOUT PAGE polish (scoped to .about-page only — does not affect
   the homepage or any other page). Priority 1 + 2.
   ===================================================================== */

/* =====================================================================
   ALTERNATING SECTION RHYTHM — give the long dark page structure by
   alternating a raised "band" tone (#111) with pure black (#070707).
   Bands fall on an even cadence (every ~3rd block); the full-bleed photo
   sections stay black as natural breathers. Targeted by position so it
   stays robust against the nested Webflow markup. Scoped to .about-page.
   ===================================================================== */
.about-page .main-wrapper > * { background-color: #070707; }
.about-page .main-wrapper > *:nth-child(11),  /* "Unique Perspective" */
.about-page .main-wrapper > *:nth-child(14) { /* Equipment Bag        */
  background-color: #0d0d0d;   /* flat charcoal band (replaces the orange glow) */
  /* fade top & bottom into the black body so the band blends seamlessly */
  background-image: linear-gradient(180deg, #070707 0%, rgba(7, 7, 7, 0) 12%, rgba(7, 7, 7, 0) 88%, #070707 100%);
}
/* footer (nth-child 16): restored to its original tone, no glow. */
.about-page .main-wrapper > *:nth-child(16) { background-color: #131313; }
/* Photographic Abstractions slider: it's nested, so the base black rule
   doesn't reach it — strip its charcoal #111 panel to pure black. */
.about-page #abstractions { background-color: #070707; }
/* nth-child(5) = press keeps its Darkroom Wall glow. Credentials (2) and
   Beauty of Nature (8) are intentionally left fully black (#070707). */

/* P1 — Body copy: lift contrast off the dark grey, add a touch of size
   and breathing room so paragraphs read as deliberate, not faint. */
.about-page .body-text {
  color: #c9c9c9;
  font-size: 1.06rem;
  line-height: 188%;
}

/* P1 — Consistent red accent rule above every section heading, echoing
   the hero's red-line so the page feels connected top-to-bottom. */
.about-page .insipire-heading::before,
.about-page .about-slider-heading::before {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin-bottom: 1.15rem;
  background-color: #cb0000;
  border-radius: 100px;
}

/* P2 — Pull-quotes: give the artist statements presence so they stop
   floating in the black. Larger, brighter, more line height. */
.about-page .about-slider-subheading {
  color: #f2f2f2;
  font-size: 1.5rem;
  line-height: 2.35rem;
  background-position: 0 6px;
}

/* P2 — "CC Harris" signature reads as an intentional sign-off. */
.about-page .cc-haris-trademark-wrapper .bold-body-text {
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.95rem;
  opacity: 0.92;
}

@media screen and (max-width: 767px) {
  .about-page .about-slider-subheading {
    font-size: 1.3rem;
    line-height: 2rem;
  }
  .about-page .insipire-heading::before,
  .about-page .about-slider-heading::before {
    width: 48px;
    margin-bottom: 0.9rem;
  }
}

/* =====================================================================
   SECTION REDESIGNS (each block is self-contained — delete a block to
   revert just that section). All scoped to .about-page.
   ===================================================================== */

/* ===== REDESIGN 1 — Press section: editorial two-column spread =========
   Two press quotes side by side as large serif pull-quotes (no boxes),
   divided by a hairline, with masthead bylines. On the #0d0d0d band that
   fades into the black body. */
.about-page .section-about-newspaper {
  position: relative;
  overflow: hidden;
  padding-top: clamp(4rem, 9vw, 7.5rem);
  padding-bottom: clamp(4rem, 9vw, 7.5rem);
  background-color: #0d0d0d;
  background-image: linear-gradient(180deg, #070707 0%, rgba(7, 7, 7, 0) 12%, rgba(7, 7, 7, 0) 88%, #070707 100%);
}
.about-page .section-about-newspaper .padding-global { position: relative; z-index: 2; }
.about-page .section-about-newspaper .about-3-image-gallery-image-wrapper { display: none !important; }

/* ── "Collected works" gallery — generous top space ───────────────────────
   The 3rd gallery ("Colin's work is collected…") sits right after the full-bleed
   aurora image and felt cramped at the top. Restore the generous top padding the
   export gave it (the original used `.main-wrapper > *:nth-child(10)`, which the
   flat FSE markup has no equivalent for — so it's reproduced here, scoped to the
   collected-works gallery via the `cch-collected` marker class). */
.about-page .section-about-gallery.cch-collected {
  padding-top: clamp(6rem, 11vw, 12rem);
}

/* eyebrow, centred above the spread */
.about-page .press-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 auto 3.25rem;
}
.about-page .press-eyebrow .pe-rule { width: 56px; height: 2px; background: #cb0000; border-radius: 100px; flex: none; }
.about-page .press-eyebrow .pe-label {
  font-family: Inter, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9a9a9a;
}

/* two-column spread with a centre hairline */
.about-page .press-grid {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2.5rem, 6vw, 6rem);
  position: relative;
}
.about-page .press-grid::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14) 18%, rgba(255, 255, 255, 0.14) 82%, transparent);
}
.about-page .press-quote-col { display: flex; flex-direction: column; text-align: left; }
.about-page .press-quote-col .pq-mark {
  font-family: Lora, Georgia, serif;
  color: #cb0000;
  font-size: 3.4rem;
  line-height: 0.5;
  margin-bottom: 1.1rem;
}
.about-page .press-quote-col .pq-text {
  font-family: Lora, Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  line-height: 1.62;
  color: #ededed;
  margin: 0 0 auto;
}
.about-page .press-quote-col .pq-cite {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1rem;
  text-align: left;
}
.about-page .press-quote-col .pq-pub {
  font-family: Lora, Georgia, serif;
  font-size: 1.1rem;
  color: #ffffff;
  letter-spacing: 0.5px;
  position: relative;
  padding-left: 0.9rem;
}
.about-page .press-quote-col .pq-pub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 3px;
  height: 0.9em;
  background: #cb0000;
}
.about-page .press-quote-col .pq-meta {
  font-family: Inter, Arial, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #9a9a9a;
}
@media screen and (max-width: 767px) {
  .about-page .press-grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .about-page .press-grid::before { display: none; }
}

/* ── Equipment — tinted band (matches the press section) ──────────────────
   Same treatment as `.section-about-newspaper`: a subtle #0d0d0d panel with
   top/bottom gradient bars fading into the #070707 body. `.section-about-equipment`
   is unique (0,2,0) so it beats the section-bg normalisation (0,1,0). NOTE: NO
   `overflow:hidden` here (unlike press) — the intro column uses position:sticky,
   which an overflow ancestor would break. The section's own decorative shadow
   SVGs (`.image-3`/`.image-4`) are hidden so the blend matches press exactly
   (no double fade); `.padding-global` z-index keeps the content above. */
.about-page .section-about-equipment {
  background-color: #0d0d0d;
  background-image: linear-gradient(180deg, #070707 0%, rgba(7, 7, 7, 0) 12%, rgba(7, 7, 7, 0) 88%, #070707 100%);
}
.about-page .section-about-equipment > .image-3,
.about-page .section-about-equipment > .image-4 { display: none; }
.about-page .section-about-equipment .padding-global { position: relative; z-index: 2; }

/* ===== REDESIGN 2 — Equipment: glossy glass cards ===================
   Each gear item is a frosted glass card with a top gloss sheen and a
   lift-on-hover, instead of hairline-divided rows. */
.about-page .about-equipment-content-wrapper {
  grid-row-gap: 1rem;
  gap: 1rem;
}
.about-page .about-equipment {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 1.5rem 1.9rem;
  display: grid;
  grid-template-columns: 1.6rem minmax(8.5rem, 12rem) 1fr;
  align-items: start;
  column-gap: 1.5rem;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* glossy sheen across the top of each card */
.about-page .about-equipment::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.about-page .about-equipment > * { position: relative; z-index: 1; }
.about-page .about-equipment:hover {
  transform: translateY(-3px);
  border-color: rgba(203, 0, 0, 0.45);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.about-page .about-equipment-star {
  width: 1.6rem;
  height: auto;
  margin-top: 0.25rem;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}
.about-page .about-equipment:hover .about-equipment-star {
  opacity: 0.95;
}
.about-page .about-equipment-star img {
  width: 22px !important;
  height: auto;
}
/* let the heading + description become grid cells of the card */
.about-page .about-equipment-content {
  display: contents;
}
.about-page .about-equipment-content .equipment-heading {
  align-self: start;
  margin: 0;
  font-family: Lora, Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.35;
  color: #ffffff;
}
.about-page .about-equipment-content .body-text:not(.equipment-heading) {
  align-self: start;
  margin: 0;
  color: #b8b8b8;
  line-height: 1.6;
}

/* ===== REDESIGN 3 — Beauty of Nature "Split editorial" ==============
   Tighter editorial text column on the left; a tall, prominent artwork
   on the right that fills the 100vh so the section no longer feels sparse. */
.about-page .section-about-slider2 .about-slider2-grid {
  align-items: center;
}
.about-page .about-slider2-subheading {
  display: block;
  order: -1;
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-family: Inter, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #cb0000;
}
.about-page .section-about-slider2 .about-slider-heading::before {
  display: none; /* kicker already provides the red accent here */
}
.about-page .section-about-slider2 .about-us-slider-image._100--height {
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* ===== Section background normalisation (conversion support) =========
   The export wraps every section in `.main-wrapper` and flattens stray
   Webflow section backgrounds to the page colour via
   `.about-page .main-wrapper > * { background-color: #070707 }`.
   The FSE theme has no `.main-wrapper`, so without this the inspiration
   section shows its raw Webflow `#111`. Replicate it on the block content
   wrapper. `:where()` keeps this at (0,1,0) specificity, so any section
   with an INTENTIONAL background (e.g. the press section's
   `.about-page .section-about-newspaper`, 0,2,0) still wins — exactly like
   the original. Only background-color is set, so background images stay. */
.about-page :where(.wp-block-post-content) > * {
  background-color: #070707;
}

/* ===== Inspiration -> Gallery overlap (scroll reveal) ================
   The inspiration section rises up and overlaps the gallery section above it
   as you scroll in (mirrors the effect on the original live site). The negative
   margin creates the overlap in layout (so the section below still flows with
   no gap); z-index keeps inspiration above the gallery (which is z-index:2); the
   GSAP scrub in blocks/about-inspiration/view.js animates it from flush -> overlap
   as it enters. The section's own top shadow (image-3) blends the seam. */
.about-page .section-about-inspiration {
  z-index: 3;
  position: relative;
}
/* Desktop only — on tablet/mobile the sections stack normally (the big negative
   margin would crowd the narrower layout). The GSAP scrub is guarded to match. */
@media screen and (min-width: 992px) {
  .about-page .section-about-inspiration {
    margin-top: -230px;
  }
}

/* ===== REDESIGN 4 — Inspiration "Sticky offset gallery" =============
   Stacked images -> a staggered left/right editorial collage that
   scrolls past the pinned heading. */
.about-page .section-about-inspiration .about-inspiration-image-wrappere.mob-none {
  grid-row-gap: 3rem;
}
.about-page .section-about-inspiration .about-inspiration-image-wrappere.mob-none .about-inspiration-image {
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.about-page .section-about-inspiration .about-inspiration-image-wrappere.mob-none .about-inspiration-image:nth-child(1) {
  width: 86%;
  align-self: flex-start;
}
.about-page .section-about-inspiration .about-inspiration-image-wrappere.mob-none .about-inspiration-image:nth-child(2) {
  width: 86%;
  align-self: flex-end;
  margin-top: -2rem;
}
.about-page .section-about-inspiration .about-inspiration-image-wrappere.mob-none .about-inspiration-image:nth-child(3) {
  width: 86%;
  align-self: flex-start;
  margin-top: -1rem;
}

/* Card layout — stack [star | heading-above-body] on tablet/iPad (≤1199px). The
   3-column card (star | heading | body) only has room for side-by-side heading+body
   on wide desktops; at ≥992px the section goes 2-column (intro | cards) so each
   card's body column collapsed to ~112px (1024) / ~190px (1180) and wrapped word-by-
   word. Stacking gives the body the full card width. ⚠️ NB: .about-equipment-content
   is display:contents by default, which nullified the previous flex-column attempt. */
@media screen and (max-width: 1199px) {
  .about-page .about-equipment {
    grid-template-columns: 1.6rem 1fr;
    column-gap: 1rem;
    padding: 1.25rem 1.4rem;
  }
  .about-page .about-equipment-content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .about-page .about-equipment-content .equipment-heading {
    flex: none;
  }
}
@media screen and (max-width: 767px) {
  /* The export paints the equipment BAND (#111) on .about-equipment-grid, but the
     grid lives inside the section's side padding, so the band was inset with black
     gaps L/R. Move the band to the full-width section and clear the inset child
     backgrounds so it runs edge-to-edge. */
  .about-page .section-about-equipment { background-color: #111; }
  .about-page .about-equipment-grid,
  .about-page .about-equipment-content-sticky,
  .about-page .about-equipment-content-wrapper { background-color: transparent; }
}

/* =====================================================================
   Bigger, more confident section headings (scoped to .about-page).
   ===================================================================== */
.about-page .insipire-heading {
  font-size: clamp(2.4rem, 4vw, 3.5rem) !important;
  line-height: 1.05;
}
.about-page .about-slider-heading {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem) !important;
  line-height: 1.08;
}
.about-page .about-tab-heading h2 {
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  line-height: 1.05;
}

/* =====================================================================
   CREDENTIALS BAND (after hero) — scoped to .about-page.
   ===================================================================== */
.about-credentials {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: #0a0a0a;
}
.about-credentials-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.25rem) 3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.about-credentials .cred-item {
  position: relative;
  padding-left: 1.25rem;
}
.about-credentials .cred-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 3px;
  height: 2.1rem;
  background: #cb0000;
  border-radius: 100px;
}
.about-credentials .cred-key {
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  font-family: Anton, Arial, sans-serif;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
}
.about-credentials .cred-suffix { color: #cb0000; }
.about-page .section-about-inspiration .about-inspiration-image { will-change: transform; }

/* More breathing room around the Photographic Abstractions section */
.about-page #abstractions .padding-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
/* More breathing room around the "Unique Perspective" section (felt tight), plus
   the same tinted band as the press section: a subtle #0d0d0d panel with top/bottom
   gradient bars fading into the #070707 body. `.section-about-slider3` is unique
   (0,2,0), so the tint beats the section-bg normalisation `:where(.wp-block-post-
   content) > *` (0,1,0); `.padding-global` z-index keeps the content above. */
.about-page .section-about-slider3 {
  position: relative;
  padding-top: clamp(7rem, 16vw, 17rem);
  padding-bottom: clamp(7rem, 16vw, 17rem);
  background-color: #0d0d0d;
  background-image: linear-gradient(180deg, #070707 0%, rgba(7, 7, 7, 0) 12%, rgba(7, 7, 7, 0) 88%, #070707 100%);
}
.about-page .section-about-slider3 .padding-global { position: relative; z-index: 2; }
/* The "collected works" gallery (nth-child 10) sat too close to the full-bleed
   image above it — add generous top space. */
.about-page .main-wrapper > *:nth-child(10) {
  padding-top: clamp(6rem, 11vw, 12rem);
}
/* smoother slider rendering */
.about-page #abstractions .about-us-slider-image {
  will-change: opacity;
  backface-visibility: hidden;
}
.about-credentials .cred-cap {
  margin-top: 0.5rem;
  font-family: Inter, Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9a9a9a;
}
@media screen and (max-width: 767px) {
  .about-credentials-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1rem;
    padding: 2rem 1.25rem;
  }
}

/* =====================================================================
   ABOUT HERO — give the section a positioning context so its bottom fade
   (.about-hero-shadow = position:absolute; inset:auto 0 0) pins to the bottom
   of the hero itself, not the first viewport. The Webflow base rule only sets
   this on mobile, so the desktop fade drifts mid-section once the hero grows
   taller than 100vh. Scoped to .about-page so nothing else is affected.
   ===================================================================== */
.about-page .section-about-hero {
  position: relative;
}

/* =====================================================================
   SCROLL-REVEAL — hidden state added by JS only (see inline script).
   ===================================================================== */
.about-page .reveal-up {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.about-page .reveal-up.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .about-page .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================================
   HOW IT WORKS page polish (scoped to .hiw-page only — does not affect
   any other page). Lighter-touch elevation that borrows the About page's
   editorial language: lifted body copy, a red accent rhythm above every
   heading, more-present "ghost" numerals, a cleaner timeline, and glassy
   hero cards. Self-contained — delete this whole block to fully revert.
   ===================================================================== */

/* FSE block stack: keep each section on the page black (mirrors About). */
.hiw-page :where(.wp-block-post-content) > * {
  background-color: #070707;
}

/* Body copy: lift off the dim grey for genuine legibility (matches About). */
.hiw-page .body-text {
  color: #c9c9c9;
  line-height: 1.75;
}

/* Hero positioning context: the bottom-fade graphic (.about-hero-shadow =
   position:absolute; inset:auto 0 0) must pin to the BOTTOM of the hero
   itself. Without a positioned ancestor it anchored far up the page, leaving
   a visible gap between the fade and the hero's bottom edge. Same fix the
   About hero needed. */
.hiw-page .section-hiw-hero {
  position: relative;
}

/* ---- HERO — refine the two glass cards ---------------------------------- */
.hiw-page .hiw-hero-cards {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.hiw-page .hiw-hero-cards:hover {
  transform: translateY(-3px);
  border-color: rgba(203, 0, 0, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.hiw-page .hiw-card-content .hiw-step-card-heading {
  font-family: Anton, Arial, sans-serif;
  color: #ffffff;
}
.hiw-page .hiw-card-content .hiw-step-card-heading::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: 0.9rem;
  background: #cb0000;
  border-radius: 100px;
}
.hiw-page .hiw-hero-button { border-color: rgba(255, 255, 255, 0.55); }

/* ---- TIMELINE / STEPS --------------------------------------------------- */
/* Lift the #1D1D1D ghost-numerals so they read as intentional, not broken. */
.hiw-page .number-step-icon {
  filter: brightness(2.9);
}
/* Reclaim the dead vertical space between steps. */
.hiw-page .timeline_item {
  padding-top: 54px;
  padding-bottom: 54px;
}
/* Centre line: a soft top→bottom gradient instead of flat grey, and retire
   the inert position:fixed progress-bar (it needs scrub JS this page lacks). */
.hiw-page .timeline_progress {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.04));
}
/* Scroll-progress fill — the spine draws downward (scaleY 0→1) as you move
   through the timeline; the inline GSAP script in how-it-works.html drives it
   and lights each node as the fill reaches it. Kept lean: a clean red, soft glow. */
.hiw-page .timeline_progress-bar {
  display: block;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-image: linear-gradient(180deg, #ff5a5a, #cb0000);
  box-shadow: 0 0 6px rgba(203, 0, 0, 0.4);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}
/* Drop the #0a0a0a fade bands at the top & bottom of the timeline — they
   read as a faint lighter panel against the page black. */
.hiw-page .overlay-fade-top,
.hiw-page .overlay-fade-bottom { display: none; }

/* Desktop timeline spine: keep the red scrub line visible behind the step nodes. */
.hiw-page .timeline_component {
  isolation: isolate;
  z-index: 0;
}
.hiw-page .timeline_progress {
  z-index: 0;
}
.hiw-page .timeline_item {
  z-index: 2;
  overflow: visible;
}
.hiw-page .timeline_centre,
.hiw-page .timeline_left,
.hiw-page .timeline_right {
  position: relative;
  z-index: 3;
}
/* Node circles sit dim on the spine, then light up red as the progress fill
   reaches them (the .is-active class is toggled by the inline GSAP script). */
.hiw-page .timeline_circle {
  background-color: #3a3a3a;
  box-shadow: 0 0 0 8px #0a0a0a, 0 0 0 9px rgba(255, 255, 255, 0.07);
  transition: background-color 0.45s ease, box-shadow 0.45s ease,
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hiw-page .timeline_circle.is-active {
  background-color: #ff3b3b;
  box-shadow: 0 0 0 7px #0a0a0a, 0 0 0 8px rgba(255, 59, 59, 0.5),
    0 0 16px rgba(255, 59, 59, 0.6);
  transform: scale(1.2);
}
/* Mobile steps spine (≤767px): the export hides the connector line on phones,
   leaving the stacked steps with nothing tying them together. Add a left-edge red
   progress rail that draws downward (scaleY 0→1) as you scroll — parity with the
   desktop timeline. Only renders while .hiw-steps-grid-mob is shown (≤767px); above
   that the grid is display:none so this is invisible. JS: hiw-hero/view.js. */
.hiw-page .hiw-steps-grid-mob { position: relative; padding-left: 1.9rem; }
.hiw-page .hiw-mob-spine {
  position: absolute;
  left: 3px;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  border-radius: 2px;
  overflow: hidden;
  z-index: 0;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.05));
}
.hiw-page .hiw-mob-spine-fill {
  display: block;
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, #ff5a5a, #cb0000);
  box-shadow: 0 0 6px rgba(203, 0, 0, 0.4);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hiw-page .hiw-mob-spine-fill { transform: scaleY(1); }
}

/* Red accent rule above each step heading (timeline + mobile grid). */
.hiw-page .timeline_item .hiw-step-card-heading,
.hiw-page .hiw-steps-grid-mob .hiw-step-card-heading {
  font-family: Anton, Arial, sans-serif;
  color: #ffffff;
}
.hiw-page .timeline_item .hiw-step-card-heading::before,
.hiw-page .hiw-steps-grid-mob .hiw-step-card-heading::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 0.85rem;
  background: #cb0000;
  border-radius: 100px;
}

/* ---- WHAT TO EXPECT — split editorial layout ---------------------------
   Heading + intro sit in a left column beside the points (instead of stacked
   above), and the eight points are lean numbered rows on the right. Far more
   compact than stacked cards, and reads as a deliberate editorial spread. */
.hiw-page .hiw-wte-content-wrapper {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
}
.hiw-page .wte-split {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* Left column — heading + intro stay in view (sticky) while the list scrolls. */
.hiw-page .wte-intro {
  text-align: left;
  position: sticky;
  top: clamp(2rem, 12vh, 7rem);
  align-self: start;
}
.hiw-page .wte-intro::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 1.1rem;
  background: #cb0000;
  border-radius: 100px;
}
.hiw-page .wte-intro .wte-heading {
  margin: 0 0 1rem;
  text-align: left;
  line-height: 1.05;
}
.hiw-page .wte-sub {
  margin: 0;
  max-width: 24rem;
  color: #b9b9b9;
  line-height: 1.7;
}
/* Right column — a single list of numbered rows divided by hairlines. */
.hiw-page .wte-list { display: flex; flex-direction: column; }
.hiw-page .wte-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 1.4rem;
  padding: 1.15rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: padding-left 0.3s ease;
}
.hiw-page .wte-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.hiw-page .wte-row:hover { padding-left: 0.4rem; }
.hiw-page .wte-row-num {
  font-family: Anton, Arial, sans-serif;
  font-size: 1.1rem;
  letter-spacing: 1px;
  color: #cb0000;
  padding-top: 0.15rem;
  transition: color 0.3s ease;
}
.hiw-page .wte-row:hover .wte-row-num { color: #ff5a5a; }
.hiw-page .wte-row-title {
  margin: 0 0 0.35rem;
  font-family: Inter, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
  color: #ffffff;
}
.hiw-page .body-text.wte-row-text {
  margin: 0;
  color: #bdbdbd;
  font-size: 0.97rem;
  line-height: 1.62;
}
/* Stacked below tablet — heading on top (sticky off), list underneath. */
@media screen and (max-width: 991px) {
  .hiw-page .wte-split { grid-template-columns: 1fr; gap: 1.75rem; }
  .hiw-page .wte-intro { position: static; top: auto; }
  .hiw-page .wte-sub { max-width: none; }
}
@media screen and (max-width: 767px) {
  .hiw-page .wte-row { grid-template-columns: 1.9rem 1fr; gap: 1rem; }
}

/* =====================================================================
   LIMITED EDITION — enquiry popup (scoped to .le-enquiry-page).
   One reusable modal, populated by JS with the clicked slide's piece and
   toggled via the .is-open class. Self-contained — delete to revert.
   ===================================================================== */
.le-enquiry-page .popup-wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.le-enquiry-page .popup-wrapper.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Modal card */
.le-enquiry-page .popup-form-wrapper {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: 90vh;
  margin: 0;
  padding: 2.25rem 2.25rem 2rem;
  background-color: #0c0c0e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  transform: translateY(24px) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  overflow: auto;
}
.le-enquiry-page .popup-wrapper.is-open .popup-form-wrapper { transform: none; }

/* Header */
.le-enquiry-page .popup-form-header { align-items: flex-start; margin-bottom: 1.4rem; }
.le-enquiry-page .popup-heading {
  margin: 0 0 0.4rem;
  font-family: Anton, Arial, sans-serif;
  font-size: 1.9rem;
  line-height: 1.05;
  color: #ffffff;
}
.le-enquiry-page .popup-subtitle {
  display: block; /* override the hidden .quote-none */
  max-width: 34ch;
  font-family: Inter, Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #9a9a9a;
}
.le-enquiry-page .popup-form-min-button {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.3s ease;
}
.le-enquiry-page .popup-form-min-button:hover {
  background-color: rgba(203, 0, 0, 0.25);
  border-color: rgba(203, 0, 0, 0.5);
  transform: rotate(90deg);
}

/* Selected piece — pulled above the form fields (context first) */
.le-enquiry-page .popup-selection {
  order: -1;
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.85rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}
.le-enquiry-page .popup-selection-imgwrap {
  width: 92px;
  height: 92px;
  flex: none;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.le-enquiry-page .popup-selected-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.le-enquiry-page .popup-selection-meta { display: flex; flex-direction: column; gap: 0.25rem; }
.le-enquiry-page .popup-selection-kicker {
  font-family: Inter, Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cb0000;
}
.le-enquiry-page .popup-selection-title {
  font-family: Lora, Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.1;
  color: #ffffff;
}
.le-enquiry-page .popup-selection-edition {
  font-family: Inter, Arial, sans-serif;
  font-size: 0.82rem;
  color: #9a9a9a;
}

/* Form fields — 2-column grid; Phone + Country share a row, the rest span full. */
.le-enquiry-page .popup-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.le-enquiry-page .popup-form > * { grid-column: span 2; }
.le-enquiry-page .popup-form > #Phone,
.le-enquiry-page .popup-form > #Country,
.le-enquiry-page .popup-form > .cc-phone,
.le-enquiry-page .popup-form > .cc-country { grid-column: span 1; }
.le-enquiry-page .popup-form-field {
  width: 100%;
  margin: 0;
  padding: 0.85rem 1rem;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #ffffff;
  font-family: Inter, Arial, sans-serif;
  font-size: 0.95rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.le-enquiry-page .popup-form-field::placeholder { color: #7d7d7d; }
.le-enquiry-page .popup-form-field:focus {
  outline: none;
  border-color: rgba(203, 0, 0, 0.6);
  background-color: rgba(255, 255, 255, 0.06);
}
.le-enquiry-page .form-collumn { width: 100%; }

/* Submit — white, matching the rest of the site's buttons. */
.le-enquiry-page .popup-form-button {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.95rem 1rem;
  background-color: #ffffff;
  color: #070707;
  border: 0;
  border-radius: 10px;
  font-family: Inter, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.le-enquiry-page .popup-form-button:hover {
  background-color: #ececec;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.le-enquiry-page .popup-form-button:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }

/* Success / error states inside the modal */
.le-enquiry-page .popup-form-success .success-message,
.le-enquiry-page .popup-form-success .w-form-fail { display: none; }
.le-enquiry-page .popup-form-success .success-message {
  padding: 2.25rem 1.25rem;
  text-align: center;
  color: #ffffff;
  font-family: Lora, Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.5;
}
.le-enquiry-page .popup-form-success .w-form-fail {
  margin-top: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
}

/* Edition badge overlaid on each slide's artwork (injected by JS). */
.le-enquiry-page .le-img-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}
.le-enquiry-page .le-edition-badge {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  z-index: 3;
  padding: 0.4rem 0.8rem;
  background: rgba(7, 7, 7, 0.66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  font-family: Inter, Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: #ffffff;
}

/* Mobile + tablet: the arrows overlap the artwork (looks broken), so move them
   OFF the image into a bottom control row that flanks the progress bar. */
@media screen and (max-width: 991px) {
  .le-enquiry-page .le-arrow-left.mob-none,
  .le-enquiry-page .le-arrow-right.mob-none {
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    top: auto;
    bottom: -3.6rem;
  }
  .le-enquiry-page .le-arrow-left.mob-none { left: 0.5rem; right: auto; }
  .le-enquiry-page .le-arrow-right.mob-none { right: 0.5rem; left: auto; }
  /* show + shrink + centre the progress bar so it sits between the two arrows */
  .le-enquiry-page .custom-slider-nav.cs-slider-dots {
    display: flex;
    left: 50%;
    right: auto;
    bottom: -2rem;
    width: auto;
    max-width: calc(100% - 8rem);
    transform: translateX(-50%);
  }
  /* room beneath the slider for the control row */
  .le-enquiry-page .section-le-hero { padding-bottom: 5rem; }
}

@media screen and (max-width: 767px) {
  /* single column — force EVERY child full-width (a lingering span 2 would
     otherwise spawn an implicit 2nd column and cram Phone + Country together) */
  .le-enquiry-page .popup-form { grid-template-columns: 1fr; }
  .le-enquiry-page .popup-form > *,
  .le-enquiry-page .popup-form > #Phone,
  .le-enquiry-page .popup-form > #Country,
  .le-enquiry-page .popup-form > .cc-phone,
  .le-enquiry-page .popup-form > .cc-country { grid-column: 1 / -1; }
  .le-enquiry-page .le-edition-badge { left: 0.6rem; top: 0.6rem; bottom: auto; font-size: 0.62rem; }
}

/* =====================================================================
   Country + phone pickers (flags via flagcdn) — see js/le-enquiry-fields.js.
   Dropdowns are appended to <body> (still under .le-enquiry-page) and
   fixed-positioned so the modal's overflow can't clip them.
   ===================================================================== */
.le-enquiry-page .cc-field { position: relative; }

/* Country — selected flag sits inside the input */
.le-enquiry-page .cc-country .cc-selected-flag {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 18px;
  display: none;
  z-index: 1;
  pointer-events: none;
  border-radius: 2px;
  overflow: hidden;
}
.le-enquiry-page .cc-country.has-flag .cc-selected-flag { display: block; }
.le-enquiry-page .cc-country.has-flag .cc-input { padding-left: 2.95rem; }
.le-enquiry-page .cc-selected-flag .cc-flag { width: 24px; height: 18px; display: block; }

/* Phone — dial-code button joined to the number input */
.le-enquiry-page .cc-phone { display: flex; align-items: stretch; }
.le-enquiry-page .cc-dialbtn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0 0.7rem;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  color: #ffffff;
  cursor: pointer;
  font-family: Inter, Arial, sans-serif;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}
.le-enquiry-page .cc-dialbtn:hover { background-color: rgba(255, 255, 255, 0.1); }
.le-enquiry-page .cc-dialbtn .cc-flag { width: 22px; height: 16px; border-radius: 2px; display: block; }
.le-enquiry-page .cc-dialbtn .cc-dial { color: #d8d8d8; }
.le-enquiry-page .cc-dialbtn .cc-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #9a9a9a;
  margin-left: 0.1rem;
}
.le-enquiry-page .cc-phone .cc-input { flex: 1; min-width: 0; border-radius: 0 10px 10px 0; }

/* Shared floating dropdown */
.le-enquiry-page .cc-dropdown {
  position: fixed;
  z-index: 10001;
  display: none;
  flex-direction: column;
  max-height: 300px;
  background-color: #111114;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.le-enquiry-page .cc-dropdown.is-open { display: flex; }
.le-enquiry-page .cc-dd-search { flex: none; padding: 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.le-enquiry-page .cc-dd-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #ffffff;
  font-family: Inter, Arial, sans-serif;
  font-size: 0.9rem;
}
.le-enquiry-page .cc-dd-input:focus { outline: none; border-color: rgba(203, 0, 0, 0.6); }
.le-enquiry-page .cc-dd-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  overflow-y: auto;
}
.le-enquiry-page .cc-dd-list::-webkit-scrollbar { width: 8px; }
.le-enquiry-page .cc-dd-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 8px; }
.le-enquiry-page .cc-dd-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  color: #e8e8e8;
  font-family: Inter, Arial, sans-serif;
  font-size: 0.9rem;
}
.le-enquiry-page .cc-dd-item:hover { background-color: rgba(255, 255, 255, 0.08); }
.le-enquiry-page .cc-dd-item .cc-flag { width: 24px; height: 18px; flex: none; border-radius: 2px; display: block; }
.le-enquiry-page .cc-dd-name { flex: 1; }
.le-enquiry-page .cc-dd-dial { color: #9a9a9a; }
.le-enquiry-page .cc-dd-empty { padding: 0.85rem; color: #888; text-align: center; font-size: 0.85rem; }

@media screen and (max-width: 479px) {
  .le-enquiry-page .popup-form-wrapper { padding: 1.6rem 1.4rem; }
  .le-enquiry-page .popup-heading { font-size: 1.55rem; }
}

/* =====================================================================
   WHAT YOU'LL RECEIVE — glass benefit cards (scoped to .le-enquiry-page).
   Replaces the off-brand green checkmarks with iconed, titled cards.
   ===================================================================== */
.le-enquiry-page .section-le-steps .le-step-heading-wrapper {
  align-items: center;
  text-align: center;
  gap: 0.9rem;
}
.le-enquiry-page .section-le-steps .wte-heading {
  font-family: Anton, Arial, sans-serif;
  color: #ffffff;
}
.le-enquiry-page .section-le-steps .le-step-heading-wrapper::before {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 0 auto 0.4rem;
  background: #cb0000;
  border-radius: 100px;
}
.le-enquiry-page .section-le-steps .le-text {
  max-width: 46rem;
  margin: 0 auto;
  color: #bdbdbd;
  line-height: 1.6;
}
.le-enquiry-page .le-step-grid {
  counter-reset: lestep;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1.6rem;
  grid-row-gap: 1.6rem;
  max-width: 78rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.le-enquiry-page .le-step-card {
  counter-increment: lestep;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.35rem;
  min-height: 360px;
  padding: clamp(2.25rem, 2.6vw, 3rem);
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}
/* top gloss sheen */
.le-enquiry-page .le-step-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  pointer-events: none;
}
/* ghost index numeral */
.le-enquiry-page .le-step-card::after {
  content: "0" counter(lestep);
  position: absolute;
  top: clamp(1.25rem, 2vw, 1.9rem);
  right: clamp(1.4rem, 2.2vw, 2rem);
  z-index: 0;
  font-family: Anton, Arial, sans-serif;
  font-size: 3.4rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.055);
  pointer-events: none;
}
.le-enquiry-page .le-step-card > * { position: relative; z-index: 1; }
.le-enquiry-page .le-step-card:hover {
  transform: translateY(-6px);
  border-color: rgba(203, 0, 0, 0.42);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.le-enquiry-page .le-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  color: #ffffff;
  background: radial-gradient(circle at 32% 28%, rgba(203, 0, 0, 0.42), rgba(203, 0, 0, 0.12));
  border: 1px solid rgba(203, 0, 0, 0.55);
  box-shadow: 0 0 22px rgba(203, 0, 0, 0.25);
}
.le-enquiry-page .le-step-card:hover .le-step-icon {
  box-shadow: 0 0 30px rgba(203, 0, 0, 0.45);
  border-color: rgba(255, 80, 80, 0.7);
}
.le-enquiry-page .le-step-icon svg { width: 33px; height: 33px; display: block; }
.le-enquiry-page .le-step-title {
  margin: 0.2rem 0 0;
  font-family: Anton, Arial, sans-serif;
  font-size: 1.85rem;
  line-height: 1.08;
  letter-spacing: 0.4px;
  color: #ffffff;
}
.le-enquiry-page .le-step-desc {
  margin: 0;
  color: #c4c4c4;
  font-size: 1.04rem;
  line-height: 1.72;
  text-align: left;
}
@media screen and (max-width: 991px) {
  .le-enquiry-page .le-step-grid {
    grid-template-columns: 1fr;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Desktop: the section becomes a full-height stage that pins while the cards
   rise into place (see the pinned ScrollTrigger scene in le-enquiry-fields.js). */
@media screen and (min-width: 992px) {
  .le-enquiry-page .section-le-steps {
    min-height: 100vh;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 4rem;
    padding-bottom: 4rem;
    display: flex;
    align-items: center;
  }
  .le-enquiry-page .section-le-steps .padding-global { width: 100%; }
}

/* Smooth hero entrance — the slider stays hidden until its first artwork is
   ready (class removed by JS), then fades in. Kills the load flicker/pop-in. */
.le-enquiry-page .limited-slider { transition: opacity 0.6s ease; }
html.le-hero-loading .limited-slider { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .le-enquiry-page .limited-slider { transition: none; }
}

/* ── Image protection ─────────────────────────────────────────────────────
   Deterrent layer (pairs with js/cch-image-protect.js): stops drag-to-save,
   text/long-press selection on artwork, and the iOS long-press "Save Image"
   menu. NOT DRM — anything on screen can still be screenshotted; this just
   raises the effort enough to stop casual saving. */
img,
.gallery-img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS: suppress the long-press "Save Image" menu */
}

/* Brief notice shown when someone tries to right-click / drag / save artwork. */
.cch-protect-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 1rem);
  max-width: calc(100vw - 2rem);
  background: rgba(17, 17, 17, 0.92);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  padding: 0.7rem 1.1rem;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cch-protect-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .cch-protect-toast { transition: opacity 0.25s ease; }
}

/* ── About gallery image hover — back photo rises to front (2026-06-23) ──────
   Each section overlaps two photos. On hover the BACK photo (.about-gallery-image)
   comes to the top — the z-index flip lives in the shared export css
   (`.about-gallery-image:hover { z-index: 3 }`). z-index can't tween, so we mask
   that instant flip with a subtle, eased scale + a soft shadow that fades in from
   transparent (resting look unchanged). The FRONT photo stays put.

   This replaces an old inline JS "displacement swap" in about-the-artist.html
   (REMOVED 2026-06-23) that slid the two photos past each other — the client
   disliked that "changing places" motion and it clashed with this lift. With the
   script gone there's no competing inline style, so no !important is needed.
   Desktop pointers + motion-allowed only. */
@media (hover: hover) {
  .about-page .about-gallery-image,
  .about-page .about-gallery-image.mob-none {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0); /* invisible at rest; lets the shadow tween in */
    transition: transform .55s cubic-bezier(.22, .61, .36, 1),
                box-shadow .55s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
  }
  .about-page .about-gallery-image:hover,
  .about-page .about-gallery-image.mob-none:hover {
    transform: scale(1.018);   /* subtle lift only — no slide */
    box-shadow: 0 12px 45px rgba(0, 0, 0, .4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-page .about-gallery-image,
  .about-page .about-gallery-image.mob-none { transition: none; }
}

/* Full-screen images (BOTH sections), paired with the gentle parallax script in
   about-the-artist.html. The Webflow IX2 effect moved the 100vh image far enough
   to expose black gaps OR (when over-sized to compensate) crop heavily. We replaced
   it with a tiny ±2% parallax, so only a small 60px overhang is needed — image stays
   full-screen edge-to-edge, gap-free, with almost no crop. Both wrappers unified so
   the layout + motion are identical. */
/* DESKTOP ONLY (≥992px): the full-bleed scroll-parallax treatment. The Webflow IX2
   moved the 100vh image far enough to expose black gaps, so we use a tiny ±2%
   parallax with a small 60px overhang — edge-to-edge, gap-free, almost no crop.
   ⚠️ Scoped to ≥992 on purpose: below that the EXPORT's own mobile layout governs
   (wrapper1 = flat 60vh/50vh, wrapper2 = a 50vh panel with its own +12vh spacing),
   so the two images sit exactly where the export places them — static, not pulled
   up over each other. The parallax JS is likewise gated to ≥992 (view.js). */
@media screen and (min-width: 992px) {
  .about-page .about-full-image-section-wrapper,
  .about-page .about-full-image-section-wrapper2 {
    overflow: hidden;
  }
  .about-page .about-full-image-section-wrapper2 {
    margin-top: -99vh;   /* desktop pull-up: image floats over "Beauty of nature",
                            leaving the empty box as breathing room (wrapper1 = -52vh). */
  }
  .about-page .about-full-image-desk {
    top: -60px;
    bottom: auto;
    height: calc(100% + 120px);  /* 60px spare top & bottom for the ±2% parallax */
    object-fit: cover;
    object-position: center;
    clip-path: none;             /* clean full-bleed rectangle (Webflow circular reveal removed) */
  }
}
/* ≤991 (tablet/mobile): honor "no parallax". The export gives wrapper2 a
   background-attachment:fixed image (a parallax feel); pin it to scroll so it's
   fully static. Everything else is left to the export's native mobile CSS. */
@media screen and (max-width: 991px) {
  .about-page .about-full-image-section-wrapper2 { background-attachment: scroll; }
}

/* ── Terms & Conditions: sticky side links (match Privacy Policy) ───────────
   Privacy's side nav is already sticky (`.policy_left_wrapper { position: sticky }`),
   but Terms carries a `terms_left` modifier that the Webflow export pinned to
   `position: static`, so its side links scrolled away. Restore sticky to match
   Privacy. (Both pages hide this nav on mobile via display:none, so desktop only.) */
.policy_left_wrapper.terms_left {
  position: sticky;
  top: 18.3rem;
}

/* ════════════════════════════════════════════════════════════════════════
   LEGAL PAGES — Privacy Policy + Terms & Conditions polish (2026-06-24).
   Scoped to .section_policy / .policy_* classes, which exist ONLY on these
   two pages, so nothing else on the site is affected. Pairs with the existing
   per-page GSAP scripts (scroll-spy active link + progress bar) which already
   add .is-active to the current side link.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Page header: brand eyebrow + Anton title + red accent ───────────── */
.policy_heading_wrapper {
  gap: 0.8rem;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  border-radius: 10px;
}
.policy_heading_wrapper::before {            /* eyebrow above the title */
  content: "Legal";
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #cb0000;
}
.policy_heading { font-family: Anton, Arial, sans-serif; font-weight: 400; letter-spacing: 0.05em; }
.policy_heading .bold-text { font-weight: 400; }
.policy_heading::after {                     /* red accent rule under the title */
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 1.15rem auto 0;
  background: #cb0000;
  border-radius: 100px;
}
.policy_heading_wrapper .text-block-5 { color: #cfcfcf; font-size: 1rem; }
.policy_heading_wrapper em { color: var(--text-gray); font-size: 0.82rem; font-style: normal; letter-spacing: 0.3px; }

/* ── 2. Readability: comfortable measure, size, rhythm for the legal copy ── */
.policy_right_wrapper { gap: 3rem; }
.policy_rich_text {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.78;
  color: #d2d2d2;
}
.policy_rich_text p { margin-bottom: 1.05rem; }
.policy_rich_text ul, .policy_rich_text ol { padding-left: 1.25rem; margin: 0.4rem 0 1rem; }
.policy_rich_text li { margin-bottom: 0.5rem; line-height: 1.7; }
.policy_rich_text strong { color: #fff; }
.policy_rich_text a {                        /* inline links → brand red */
  color: #e23b3b;
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 59, 59, 0.4);
  transition: color .25s ease, border-color .25s ease;
}
.policy_rich_text a:hover { color: #ff6a6a; border-bottom-color: #ff6a6a; }

/* ── 3. Section headings: red accent rule + tighter hierarchy ───────────── */
.policy_content {
  gap: 0.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);  /* soften the hard white hairline */
}
.policy_content_heading { font-size: 1.7rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.04em; }
h1.policy_content_heading::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 0.85rem;
  background: #cb0000;
  border-radius: 100px;
}

/* ── 4. Side nav: "Contents" label + active red indicator + track line ──── */
.policy_left_wrapper {
  gap: 0.1rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.policy_left_wrapper .bold-body-text {       /* the "Contents" label */
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 0.72rem;
  color: var(--text-gray);
  margin: 0 0 0.7rem -1rem;
  padding-left: 1rem;
}
.policy_nav_buttons { padding: 0.42rem 0; line-height: 1.4; }
.policy_nav_buttons.is-active::before {      /* brand-red bar on the active item */
  content: "";
  position: absolute;
  left: -1rem;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 2px;
  background: #cb0000;
  border-radius: 100px;
}

/* (Back-to-top: the legal pages now use the shared footer's in-footer arrow,
   identical to the rest of the site — no separate floating icon.) */

/* ── 6. Mobile (≤991px): the side nav is hidden by Webflow — bring it back as
   a horizontal, sticky, scrollable "chip" bar so phones get in-page nav too. ── */
@media screen and (max-width: 991px) {
  .policy_wrapper { flex-direction: column; }
  .policy_left_wrapper,
  .policy_left_wrapper.terms_left {
    display: flex;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 20;
    flex-flow: row nowrap;
    align-items: center;
    overflow-x: auto;
    gap: 0.5rem;
    margin: 0 0 2rem;
    padding: 0.7rem 1rem;
    background: #0d0d0d;
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .policy_left_wrapper .bold-body-text { display: none; }
  .policy_nav_buttons { flex: 0 0 auto; white-space: nowrap; font-size: 0.78rem; padding: 0.3rem 0; }
  .policy_nav_buttons.is-active::before { display: none; }
  .policy_heading { font-size: 2.4rem; }
}

/* Direct #sec-N loads (and the side-nav links) land below the fixed navbar. */
.section_policy .navigattion_way_policy { scroll-margin-top: 7rem; }

/* Site-wide scroll-progress bar is created + fully styled by
   js/cch-scroll-progress.js (self-contained so it works even where this
   stylesheet isn't loaded). Here we only retire the legal pages' old
   per-section #tc-bar so the new one is the single indicator. */
#tc-bar { display: none !important; }

/* ── Collectors Series marquee (Limited Edition pages) ───────────────────────
   The export scrolled this with a Webflow IX2 marquee interaction, which keys
   off per-page interaction data that doesn't survive the WordPress port (every
   page emits one data-wf-page, so the collection page's interaction never
   activates). Driven here by a self-contained CSS loop instead. The render
   outputs a uniform [star + heading] unit repeated as two identical halves, and
   each child carries a right margin (not flex gap) so translateX(-50%) lands the
   second half exactly on the first — a seamless, gap-perfect loop. */
.le-enquiry-page .le-carasoul-inner-wrapper {
  gap: 0;
  width: max-content;
  flex-wrap: nowrap;
  will-change: transform;
  animation: cch-le-marquee 32s linear infinite;
}
.le-enquiry-page .le-carasoul-inner-wrapper > * {
  flex: 0 0 auto;
  margin-right: 2.688rem;
}
@keyframes cch-le-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .le-enquiry-page .le-carasoul-inner-wrapper { animation: none; }
}

/* =====================================================================
   COMING SOON page — redesigned as the landing for the upcoming online
   gallery store (scoped to .coming-soon-page only). A full-height, dark
   editorial hero: a ghosted fine-art work behind a near-black veil, a red
   accent rhythm, Anton headline, "what's coming" points and a glassy
   notify-me form. Self-contained — delete this whole block to revert.
   ===================================================================== */
.coming-soon-page .section-coming-soon.cs-redesign {
  position: relative;
  margin: 0;
  padding: 9rem 0 6rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
  background-color: #070707;
}

/* Background art + near-black veil so the copy always reads */
.coming-soon-page .cs-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(15%) contrast(1.04);
  opacity: 0.5;
  z-index: 0;
}
.coming-soon-page .cs-bg-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7, 7, 7, 0.82) 0%, rgba(7, 7, 7, 0.58) 45%, rgba(7, 7, 7, 0.86) 100%),
    radial-gradient(120% 120% at 50% 38%, rgba(7, 7, 7, 0.22), rgba(7, 7, 7, 0.9));
}
.coming-soon-page .cs-redesign .padding-global {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Centered editorial column */
.coming-soon-page .cs-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

/* Eyebrow */
.coming-soon-page .cs-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}
.coming-soon-page .cs-eyebrow-line {
  width: 48px;
  height: 2px;
  background: #cb0000;
  flex: 0 0 auto;
}
.coming-soon-page .cs-eyebrow-text {
  font-family: Inter, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ededed;
}

/* Headline (Anton, like the rest of the site) */
.coming-soon-page .coming-soon-heading.cs-heading {
  font-family: Anton, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(3.2rem, 7vw, 6.75rem);
  line-height: 1.12;
  letter-spacing: -0.5px;
  text-transform: none;
  color: #ffffff;
  margin: 0 auto 1.6rem;
  max-width: 16ch;
}

/* Lede */
.coming-soon-page .cs-lede {
  font-family: Inter, Arial, sans-serif;
  font-size: 1.07rem;
  line-height: 1.78;
  color: #c4c4c4;
  max-width: 56ch;
  margin: 0 auto 2.25rem;
}

/* "What's coming" points */
.coming-soon-page .cs-features {
  list-style: none;
  margin: 0 auto 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.75rem;
  width: fit-content;
  max-width: 100%;
}
.coming-soon-page .cs-feature {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  font-family: Inter, Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #dadada;
  text-align: left;
}
.coming-soon-page .cs-feature .cs-feature-mark {
  color: #cb0000;
  flex: 0 0 auto;
}

/* Notify form — inline pill (button inside the field), sized to the headline */
.coming-soon-page .cs-notify {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.coming-soon-page .cs-notify-label {
  font-family: Inter, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  font-weight: 600;
  color: #9a9a9a;
  margin-bottom: 1rem;
}
/* Neutralise the Webflow shared `.cs-form{display:flex;justify-content:flex-start}`
   that lands on the .cs-form wrapper — it made the form shrink + sit left of centre. */
.coming-soon-page .cs-redesign .cs-form {
  display: block;
  width: 100%;
}
.coming-soon-page .cs-redesign .cs-form-inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 100px;
  padding: 0.45rem 0.45rem 0.45rem 0.5rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.coming-soon-page .cs-redesign .cs-form-inner:focus-within {
  border-color: rgba(203, 0, 0, 0.55);
  box-shadow: 0 0 0 4px rgba(203, 0, 0, 0.12);
}
.coming-soon-page .cs-redesign .cs-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: Inter, Arial, sans-serif;
  font-size: 1.05rem;
  text-align: left;
  padding: 0.95rem 1.5rem 0.95rem 1.75rem;
  margin: 0;
  height: auto;
}
.coming-soon-page .cs-redesign .cs-input::placeholder {
  color: #9a9a9a;
}
.coming-soon-page .cs-redesign .cs-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  background: #cb0000;
  color: #ffffff;
  border: none;
  border-radius: 100px;
  padding: 0.95rem 2.1rem;
  font-family: Inter, Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.coming-soon-page .cs-redesign .cs-submit:hover {
  background: #e10000;
  transform: translateY(-1px);
}
.coming-soon-page .cs-submit .cs-submit-arrow {
  transition: transform 0.3s ease;
}
.coming-soon-page .cs-redesign .cs-submit:hover .cs-submit-arrow {
  transform: translateX(3px);
}

/* Form success / error states (cch-forms.js toggles display) */
.coming-soon-page .cs-form .w-form-done,
.coming-soon-page .cs-form .w-form-fail {
  margin-top: 1.1rem;
  border-radius: 12px;
  padding: 0.95rem 1.25rem;
  font-family: Inter, Arial, sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
}
.coming-soon-page .cs-form .w-form-done {
  background: rgba(203, 0, 0, 0.1);
  border: 1px solid rgba(203, 0, 0, 0.4);
  color: #ffffff;
}
.coming-soon-page .cs-form .w-form-fail {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f0c0c0;
}

/* Entrance reveal (added by blocks/coming-soon/view.js) */
.coming-soon-page .reveal-up {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.coming-soon-page .reveal-up.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .coming-soon-page .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Responsive */
@media screen and (max-width: 767px) {
  .coming-soon-page .section-coming-soon.cs-redesign {
    padding: 7.5rem 0 4rem;
    min-height: auto;
  }
  .coming-soon-page .cs-features {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  /* On phones the pill stacks so input + button never crowd */
  .coming-soon-page .cs-redesign .cs-form-inner {
    flex-direction: column;
    border-radius: 18px;
    padding: 0.6rem;
    gap: 0.55rem;
  }
  .coming-soon-page .cs-redesign .cs-submit {
    width: 100%;
    padding: 0.85rem 1.6rem;
  }
}

/* ── LE archive card slide-in (paired with blocks/collection-archive/view.js) ──
   Port of the dead Webflow IX2 reveal. JS adds .cch-card-reveal + a per-card
   --cch-card-x (from-left or from-right, matching each card's slide-* class)
   then .is-in on scroll. No-JS/reduced-motion = visible (class never added). */
.oe-grid .le-cards.cch-card-reveal {
  opacity: 0;
  transform: translateX(var(--cch-card-x, 40px));
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.oe-grid .le-cards.cch-card-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .oe-grid .le-cards.cch-card-reveal { opacity: 1; transform: none; transition: none; }
}
@media screen and (max-width: 991px) {
  /* Cards are (near) full-width here — a horizontal slide would push past the
     viewport edge and create a horizontal scrollbar, so reveal with a rise. */
  .oe-grid .le-cards.cch-card-reveal { transform: translateY(34px); }
  .oe-grid .le-cards.cch-card-reveal.is-in { transform: none; }
}

/* ============================================================================
   MOBILE/TABLET HORIZONTAL-OVERFLOW FIXES (2026-06-30)
   ========================================================================== */

/* About — Equipment grid: on phones the single `1fr` column was expanded to its
   content's min-content (~382px) and overflowed the viewport by ~38px. minmax(0,1fr)
   lets the track shrink to the container; min-width:0 + max-width on the children
   stops any item forcing it wider. Scoped to .about-page + phone breakpoint only. */
@media screen and (max-width: 767px) {
  .about-page .about-equipment-grid { grid-template-columns: minmax(0, 1fr); }
  .about-page .about-equipment-grid > * { min-width: 0; }
  .about-page .about-equipment-image,
  .about-page .about-equipment-content-sticky { width: 100%; max-width: 100%; }
}

/* About - Latest Series: on tablet/mobile the Webflow tabs switch from the
   static grid to a slider. The slider mask was taking the tallest slide's
   height, leaving a large blank area under shorter images. Give every slide a
   stable responsive canvas and crop the artwork cleanly inside it. */
@media screen and (max-width: 767px) {
  .about-page #series .about-tab-slider {
    width: 100%;
    align-items: flex-start;
    margin-top: 2rem;
    padding-bottom: 2.75rem;
  }
  .about-page #series .about-slider,
  .about-page #series .about-us-slider-component,
  .about-page #series .w-slider-mask,
  .about-page #series .about-us-slider-slide,
  .about-page #series .about-slider-image-wrapper,
  .about-page #series .normal_auto {
    width: 100%;
    height: clamp(26rem, 74vh, 42rem);
  }
  .about-page #series .about-us-slider-image,
  .about-page #series .image-6 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 10px;
  }
  .about-page #series .custom-slider-nav {
    bottom: -2.2rem;
  }
}

@media screen and (max-width: 479px) {
  .about-page #series .about-category-tab-button-wrapper {
    grid-column-gap: 0.65rem;
    grid-row-gap: 0.75rem;
  }
  .about-page #series .tab-button {
    min-width: min(100%, 9.25rem);
    justify-content: center;
    text-align: center;
  }
  .about-page #series .about-tab-slider {
    margin-top: 1.75rem;
    padding-bottom: 2.5rem;
  }
  .about-page #series .about-slider,
  .about-page #series .about-us-slider-component,
  .about-page #series .w-slider-mask,
  .about-page #series .about-us-slider-slide,
  .about-page #series .about-slider-image-wrapper,
  .about-page #series .normal_auto {
    height: clamp(22rem, 68vh, 34rem);
  }
}

/* Latest Series — static category grid (shown desktop + tablet/iPad 768–991px;
   the slider replaces it below 767). The shared CSS sizes .about-category-image
   `width:100%; height:100%` with NO object-fit (defaults to `fill`). In the
   1fr 1fr auto-row grid the two cells are forced to equal height, so any image
   whose aspect differs from its neighbour gets STRETCHED — most visible on iPad
   portrait. Crop-to-fill instead of distort: keeps the export's equal-height
   2-up exactly, just stops the stretch (harmless on desktop). */
.about-page #series .about-category-image {
  object-fit: cover;
  object-position: center center;
}

/* ============================================================================
   LE collection hero slider — keep the framed artwork's true aspect ratio.
   The gallery <img>s now carry width/height attributes (for responsive srcset +
   CLS). The shared CSS sizes them `width:40rem` with NO height and
   `object-fit:fill`, so the browser used the attr height literally → a 640×516
   box that STRETCHED the artwork (natural ~1.51 rendered as ~1.24). Letting the
   height be auto makes it follow the aspect ratio again; object-fit:contain is a
   belt-and-suspenders guard so it never distorts even if max-height clamps. */
.le-slider-image {
  height: auto;
  object-fit: contain;
}
@media screen and (max-width: 767px) {
  .le-slider-image { height: auto; }
}