/* ════════════════════════════════════════════════════════════════
   THE LUXURY CAR ZONE — v4 "Three-Page" — primary colours only
   Brand: Cinzel (display) + Gotham/Montserrat (body).
   Luxury Orange #f97931 · Jet Black #0D0D0D · Premium White.
   Only tints/shades of these three appear anywhere on the site.
   All scroll motion is a pure function of progress → reversible.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* brand — primary only */
  --orange: #f97931;
  --orange-soft: #ffb37a;
  --ink: #0D0D0D;
  --white: #FFFFFF;
  --mist: #F5F6F7;

  /* semantic aliases */
  --porcelain: #FFFFFF;
  --bone: #F5F6F7;
  --charcoal: #0D0D0D;
  --slate: #6A6D72;
  --amber: #f97931;
  --asphalt: #0D0D0D;
  --edge: linear-gradient(90deg, var(--orange), var(--orange-soft));

  --f-display: 'Cinzel', Georgia, serif;
  --f-sans: 'Gotham', 'Montserrat', system-ui, sans-serif;

  --r-plate: 8px;
  --gutter: clamp(20px, 5vw, 90px);
  --sec-gap: clamp(96px, 13vh, 170px);

  /* unified type scale — same heading & body size in every section */
  --fs-h2: clamp(1.8rem, 3.4vw, 3rem);
  --fs-body: clamp(0.98rem, 1.05vw, 1.08rem);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* NOTE: `scroll-behavior: smooth` must NOT be set on html/body.
   ScrollTrigger jumps the scroller to 0 to measure element offsets on every
   refresh; with smooth behaviour that jump is animated instead of immediate,
   so it measures against the wrong position and every trigger's start/end
   ends up offset by however far the page happened to be scrolled. That is
   what made sections animate early, late, or not at all. Smooth scrolling
   for anchor links is done per-call in JS instead. */

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.locked {
  overflow: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
}

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

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--orange);
  color: #fff;
}

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

.f-display {
  font-family: var(--f-display);
}

em {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 600;
  color: var(--orange);
}

main {
  position: relative;
  z-index: 1;
}

/* ── section rhythm — alternating tones + subtle fade seams ────── */
/* light sections meeting a dark neighbour get a small edge fade so
   tones melt into each other (Apple-style). Band is short (~92px) so
   it sits inside a section's top/bottom padding and never touches copy. */
/* .seam-from-dark {
  background-image: linear-gradient(180deg, var(--ink), rgba(13, 13, 13, 0) 92px);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 92px;
} */

/* .seam-to-dark {
  background-image: linear-gradient(0deg, var(--ink), rgba(13, 13, 13, 0) 92px);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 92px;
} */

.seam-from-dark.seam-to-dark {
  /* background-image: linear-gradient(180deg, var(--ink), rgba(13,13,13,0) 92px), linear-gradient(0deg, var(--ink), rgba(13,13,13,0) 92px); */
  /* background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  background-size: 100% 92px, 100% 92px; */
}

/* ── structural grid lines with scan highlight ────────────────── */
.grid-lines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.grid-lines i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(106, 109, 114, .16) 12%, rgba(106, 109, 114, .16) 88%, transparent);
}

.grid-lines i:nth-child(1) {
  left: 25%;
}

.grid-lines i:nth-child(2) {
  left: 50%;
}

.grid-lines i:nth-child(3) {
  left: 75%;
}

.grid-lines i::before,
.grid-lines i::after {
  content: "";
  position: absolute;
  left: -3px;
  width: 7px;
  height: 1px;
  background: rgba(106, 109, 114, .28);
}

.grid-lines i::before {
  top: 20%;
}

.grid-lines i::after {
  bottom: 20%;
}

.grid-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 26vh;
  top: 0;
  background: linear-gradient(180deg, transparent, rgba(249, 121, 49, .06), transparent);
  transform: translateY(var(--scan, -30vh));
  will-change: transform;
}

/* ── monogram watermark utility — sparing, low-opacity ─────────── */
.mono-wm {
  position: absolute;
  aspect-ratio: 1290/789;
  -webkit-mask: url(../assets/tlcz-mono-mask.png) center/contain no-repeat;
  mask: url(../assets/tlcz-mono-mask.png) center/contain no-repeat;
  pointer-events: none;
}

.mono-wm.on-light {
  background: var(--ink);
  opacity: .045;
}

.mono-wm.on-dark {
  background: var(--white);
  opacity: .06;
}

/* ── shared atoms ─────────────────────────────────────────────── */
.eyebrow {
  align-items: center;
  gap: 10px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

/* ── LUXURY BUTTONS — sweep + arrow micro-interaction ─────────── */
.btn {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), color .4s, border-color .4s, box-shadow .4s, letter-spacing .4s;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}

.btn::after {
  content: "→";
  font-family: var(--f-sans);
  font-weight: 400;
  transform: translateX(-4px);
  opacity: .55;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s;
}

.btn:hover {
  letter-spacing: .09em;
}

.btn:hover::before {
  transform: translateX(0);
}

.btn:hover::after {
  transform: translateX(2px);
  opacity: 1;
}

.btn:active {
  transform: scale(.97);
}

.btn-primary {
  background: var(--ink);
  color: #fff;
}

.btn-primary::before {
  background: var(--edge);
}

.btn-primary:hover {
  color: var(--ink);
  box-shadow: 0 14px 40px -14px rgba(249, 121, 49, .5);
}

.btn-light {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 12px 40px -18px rgba(13, 13, 13, .6);
}

.btn-light::before {
  background: var(--ink);
}

.btn-light:hover {
  color: var(--white);
}

.btn-orange {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 14px 44px -16px rgba(249, 121, 49, .55);
}

.btn-orange::before {
  background: var(--ink);
}

.btn-orange:hover {
  color: var(--orange);
}

.btn-ghost {
  border: 1px solid rgba(13, 13, 13, .28);
  color: inherit;
}

.btn-ghost::before {
  background: var(--ink);
}

.btn-ghost:hover {
  color: var(--white);
  border-color: var(--ink);
}

.btn-glass {
  color: var(--white);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .32);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.btn-glass::before {
  background: var(--white);
}

.btn-glass:hover {
  color: var(--ink);
  border-color: var(--white);
}

/* section rail — highlighted eyebrow tag */
.rail {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 var(--gutter) 34px;
}

.rail-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.rail-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

.dark .rail-label,
.on-dark-section .rail-label {
  color: var(--white);
}

.rail-line {
  flex: 1;
  height: 1px;
  background: rgba(13, 13, 13, .16);
  transform-origin: left center;
}

.js .rail-line {
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .15s;
}

.js .rail.in .rail-line {
  transform: scaleX(1);
}

/* a rail that is not driven by [data-reveal] would keep the collapsed
   scaleX(0) forever — draw it immediately instead */
.js .rail.is-static .rail-line {
  transform: none;
  transition: none;
}

.sec-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
  line-height: 1.05;
  max-width: 20ch;
  margin: 0 var(--gutter) clamp(20px, 3vh, 34px);
  text-wrap: balance;
}

.sec-title em {
  font-weight: 600;
}

.sec-sub {
  margin: 0 var(--gutter) clamp(36px, 5.5vh, 64px);
  max-width: 56ch;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--slate);
}

/* reveal system — toggles both directions */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2, .8, .2, 1);
}

.js [data-reveal].in {
  opacity: 1;
  transform: none;
}

.js [data-reveal][data-delay="1"] {
  transition-delay: .1s;
}

.js [data-reveal][data-delay="2"] {
  transition-delay: .2s;
}

.js [data-reveal][data-delay="3"] {
  transition-delay: .3s;
}

/* split helpers */
.w {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.w>i {
  display: inline-block;
  font-style: inherit;
}

/* ── scroll progress ──────────────────────────────────────────── */
.progress-edge {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--edge);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 200;
}

/* ── preloader ────────────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

html:not(.js) #preloader {
  display: none;
}

.pre-center {
  text-align: center;
}

.pre-icon {
  margin: 0 auto 26px;
  opacity: 0;
  transform: scale(.7);
}

.pre-word {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 4.6vw, 3rem);
  letter-spacing: .14em;
  white-space: nowrap;
}

.pre-tag {
  margin-top: 18px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: 0;
}

.pre-foot {
  position: absolute;
  inset: auto var(--gutter) 34px;
  display: flex;
  justify-content: flex-end;
  font-family: var(--f-sans);
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--ink);
}

.pre-line {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 24px;
  height: 2px;
  background: var(--edge);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
}

/* ── nav — glass, multi-page ──────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px var(--gutter);
  transition: background .45s ease, color .45s ease, box-shadow .45s ease, padding .45s ease;
}

.nav.solid {
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(26px) saturate(1.7);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: inset 0 -1px 0 rgba(13, 13, 13, .08), 0 10px 34px -20px rgba(13, 13, 13, .3);
  padding-block: 11px;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
}

.nav-brand span {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-brand img {
  flex: none;
}

.nav-brand em {
  color: var(--orange);
}

.nav.on-dark:not(.solid) {
  color: var(--white);
}

.nav-links {
  display: flex;
  gap: 28px;
}

.nav-links a {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .78;
  position: relative;
  padding-block: 4px;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.nav-links a:hover,
.nav-links a.active {
  opacity: 1;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.btn-book {
  white-space: nowrap;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .3s, color .3s, transform .3s;
}

.btn-book:hover {
  background: var(--orange);
}

.btn-book:active {
  transform: scale(.96);
}

.nav.on-dark:not(.solid) .btn-book {
  background: var(--white);
  color: var(--ink);
}

.nav.on-dark:not(.solid) .btn-book:hover {
  background: var(--orange);
  color: #fff;
}

/* ── hamburger + mobile drawer ─────────────────────────────────── */
/* The burger and the drawer are desktop-hidden; below 980px the inline
   links and the Book button move inside the drawer instead, so the bar
   itself only ever carries the brand and the toggle. */
.nav-burger {
  display: none;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 11px 9px;
  border-radius: 8px;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}

.nav-burger i {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}

/* the bar sits above the drawer, so it takes the drawer's colours once open
   rather than the (now hidden) page behind it — otherwise `.solid` leaves a
   pale glass strip floating across the dark panel */
.nav.drawer-open {
  color: var(--white);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.nav.drawer-open .nav-burger i:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.nav.drawer-open .nav-burger i:nth-child(2) {
  opacity: 0;
  transform: scaleX(.4);
}

.nav.drawer-open .nav-burger i:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 96px var(--gutter) calc(var(--gutter) + 8px);
  background: var(--ink);
  color: var(--white);
  overflow-y: auto;
  opacity: 0;
  transition: opacity .34s ease;
}

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

/* `hidden` is removed a frame before `.open` is added so the fade actually
   runs — display cannot be transitioned */
.nav-drawer.mounted {
  display: flex;
}

.nav-drawer.open {
  opacity: 1;
}

.drawer-links {
  display: flex;
  flex-direction: column;
}

.drawer-links a {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 8vw, 2.6rem);
  line-height: 1.1;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  opacity: .85;
  transition: color .3s ease, opacity .3s ease;
}

.drawer-links a.active,
.drawer-links a:hover {
  color: var(--orange);
  opacity: 1;
}

.drawer-book {
  margin-top: 30px;
  width: 100%;
  justify-content: center;
  text-align: center;
}

.drawer-foot {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--f-sans);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.drawer-foot a {
  color: var(--white);
  font-weight: 600;
}

@media (max-width: 980px) {
  .nav {
    gap: 14px;
  }

  /* both the inline links and the Book button now live in the drawer */
  .nav-links,
  .nav .btn-book {
    display: none;
  }

  .nav-burger {
    display: flex;
  }
}

@media (max-width: 430px) {
  .nav-brand span {
    font-size: 12.5px;
  }
}

@media (max-width: 380px) {
  .nav-brand span {
    display: none;
  }
}

/* ── page intro band — facility.html / process.html ──────────── */
.page-hero {
  position: relative;
  padding: clamp(100px, 13vh, 136px) var(--gutter) clamp(26px, 3.4vh, 44px);
  background: var(--mist);
  overflow: clip;
}

.page-hero .rail {
  margin-bottom: 22px;
}

.page-hero h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  letter-spacing: -.015em;
  line-height: 1.0;
  max-width: 16ch;
  text-wrap: balance;
}

.page-hero h1 em {
  font-weight: 600;
}

.page-hero p {
  margin-top: 22px;
  max-width: 56ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  color: var(--slate);
}

.page-hero .mono-wm {
  right: -4%;
  top: -10%;
  width: 46vw;
}

.page-hero.dark {
  background: var(--ink);
  color: var(--white);
}

.page-hero.dark p {
  color: rgba(255, 255, 255, .72);
}

/* ── 01 hero — centered gradient display ──────────────────────── */
.hero-wrap {
  position: relative;
  background: var(--ink);
}

.scrub .hero-wrap {
  height: 320vh;
}

.hero-pin {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
}

.scrub .hero-pin {
  position: sticky;
  top: 0;
}

.hero-pin video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 25%, rgba(13, 13, 13, .55) 100%), linear-gradient(180deg, rgba(13, 13, 13, .45) 0%, rgba(13, 13, 13, .1) 40%, rgba(13, 13, 13, .6) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--gutter);
}

.hero-eyebrow {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: .1em;
  text-transform: none;
  color: rgba(255, 255, 255, .94);
  margin-bottom: 28px;
}

.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 2px;
  background: var(--edge);
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 6px;
}

.hero-title {
  position: relative;
  display: inline-block;
}

.hero-title h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 9rem);
  letter-spacing: 0;
  line-height: .98;
  text-wrap: balance;
}

.hero-title h1 .w>i,
.hero-title-b .w>i {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, .5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-title em .w>i,
.hero-title-b em .w>i {
  background: linear-gradient(180deg, var(--orange) 0%, rgba(249, 121, 49, .55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-title-b {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  height: max-content;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 7rem);
  letter-spacing: 0;
  line-height: 1.0;
  opacity: 0;
}

.scrub .hero-title-b {
  display: block;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
  justify-content: center;
}

/* ── 02 marquee — scroll-reactive trust strip, on ink ──────────── */
.marquees {
  background: var(--ink);
  overflow: clip;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.marquee-row {
  position: relative;
  padding: 26px 0;
  overflow: clip;
}

.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee-track span {
  display: flex;
  align-items: center;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(14px, 1.8vw, 22px);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
}

.marquee-track i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  margin: 0 30px;
  flex: none;
}

@media (max-width: 700px) {
  .marquee-track span {
    font-size: 15px;
  }

  .marquee-track i {
    margin: 0 18px;
  }
}

/* ── 02b about us — clean two-column, no pin ──────────────────── */
.about {
  position: relative;
  padding: var(--sec-gap) 0;
  overflow: clip;
}

.about-pin {
  position: relative;
  max-width: 1360px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  padding: 0 var(--gutter);
}

.about-kicker {
  margin-bottom: clamp(18px, 3vh, 30px);
}

.about-text .sec-title {
  margin: 0 0 20px;
  padding: 0;
}

.about-copy p {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.75;
  color: var(--slate);
  max-width: 46ch;
}

.about-copy p+p {
  margin-top: 18px;
}

.about-copy p:first-of-type {
  color: var(--ink);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 500;
}

.about-media {
  position: relative;
  align-self: stretch;
  min-height: 46vh;
  border-radius: var(--r-plate);
  overflow: hidden;
}

.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-frame {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(249, 121, 49, .4);
  border-radius: 6px;
  pointer-events: none;
}

.about-media figcaption {
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 2;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

@media (max-width: 900px) {
  .about-pin {
    grid-template-columns: 1fr;
  }

  .about-media {
    min-height: 40vh;
    order: -1;
  }
}

/* ── 03 signature — monogram-mask reveal ──────────────────────── */
.sig-wrap {
  position: relative;
}

.scrub .sig-wrap {
  height: 260vh;
}

.sig-pin {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  background: var(--ink);
}

.scrub .sig-pin {
  position: sticky;
  top: 0;
}

.sig-stage {
  position: absolute;
  inset: 0;
}

.sig-full {
  position: absolute;
  inset: 0;
}

.sig-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scrub .sig-full {
  opacity: 0;
}

.sig-reveal {
  position: absolute;
  inset: 0;
}

.sig-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scrub .sig-reveal {
  -webkit-mask: url(../assets/tlcz-mono-mask.png) center / var(--mono, 26%) no-repeat;
  mask: url(../assets/tlcz-mono-mask.png) center / var(--mono, 26%) no-repeat;
}

.sig-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(38% 34% at 50% 50%, rgba(249, 121, 49, .28), transparent 72%);
  opacity: 0;
}

/* always-on dim layer so the quote stays legible through every reveal phase */
.sig-dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 13, 13, .15) 0%, rgba(13, 13, 13, .58) 46%, rgba(13, 13, 13, .72) 100%);
}

.sig-quote {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  color: #fff;
  pointer-events: none;
}

.sig-kicker {
  color: rgba(255, 255, 255, .65);
  margin-bottom: 26px;
}

.sig-kicker::before {
  background: var(--orange);
}

.sig-quote blockquote {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 3.4rem);
  line-height: 1.28;
  max-width: 25ch;
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(0, 0, 0, .7);
}

.sig-quote em {
  color: var(--orange);
  font-weight: 600;
}

/* ── flip cards ───────────────────────────────────────────────── */
.flip {
  perspective: 1500px;
  cursor: pointer;
}

.flip-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.25, .8, .25, 1);
}

.flip.flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-face {
  position: absolute;
  inset: 0;
  border-radius: var(--r-plate);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-front>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}

.flip:hover .flip-front>img {
  transform: scale(1.04);
}

.flip-front figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 48px 26px 22px;
  color: #fff;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  background: linear-gradient(180deg, transparent, rgba(13, 13, 13, .8));
}

.flip-back {
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  background: linear-gradient(150deg, #17181b, #0a0a0b);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(26px, 3.4vw, 48px);
  border: 1px solid rgba(249, 121, 49, .2);
}

/* faint monogram watermark behind the flipped copy */
.flip-back::before {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -18%;
  width: 68%;
  aspect-ratio: 1290/789;
  background: var(--white);
  -webkit-mask: url(../assets/tlcz-mono-mask.png) center/contain no-repeat;
  mask: url(../assets/tlcz-mono-mask.png) center/contain no-repeat;
  opacity: .06;
  pointer-events: none;
}

.flip-back h3 {
  position: relative;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  font-weight: 700;
  transform: translateZ(38px);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 2px 0 rgba(0, 0, 0, .4), 0 3px 0 rgba(0, 0, 0, .3), 0 8px 18px rgba(0, 0, 0, .55);
}

.flip-back p {
  position: relative;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: rgba(255, 255, 255, .8);
  max-width: 44ch;
  transform: translateZ(18px);
}

.flip-hint {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(13, 13, 13, .28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), background .3s, border-color .3s;
}

.flip-hint svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.flip:hover .flip-hint {
  transform: rotate(90deg);
  background: var(--orange);
  border-color: var(--orange);
}

.flip-hint.on {
  border-color: rgba(249, 121, 49, .4);
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .flip-inner {
    transition: none;
  }
}

/* ── 04 specialists — 5-tile bento ────────────────────────────── */
.specialists {
  padding: var(--sec-gap) 0;
}

.sp-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  padding: 0 var(--gutter);
  margin-top: clamp(30px, 5vh, 56px);
}

.sp-tile {
  position: relative;
  border-radius: var(--r-plate);
}

.sp-a {
  grid-column: span 5;
  height: clamp(260px, 40vh, 380px);
}

.sp-b {
  grid-column: span 7;
  height: clamp(260px, 40vh, 380px);
}

.sp-c {
  grid-column: span 7;
  height: clamp(240px, 36vh, 340px);
}

.sp-d {
  grid-column: span 5;
  height: clamp(240px, 36vh, 340px);
}

/* Full-bleed 12-column tile against a 1.79:1 photo, so the box ratio decides
   how much of the frame survives. At the old clamp(190px, 26vh, 260px) the
   tile ran ~5.5:1 and cover threw away about two thirds of the image — that
   is the "squeezed" read. This keeps object-fit: cover (fill would genuinely
   distort) and just gives the crop room to breathe. */
.sp-e {
  grid-column: span 12;
  height: clamp(340px, 50vh, 540px);
}

.sp-e .flip-front figcaption {
  font-size: clamp(1.2rem, 2vw, 1.7rem);
}

@media (max-width: 860px) {

  .sp-a,
  .sp-b,
  .sp-c,
  .sp-d,
  .sp-e {
    grid-column: span 12;
    height: min(108vw, 440px);
  }
}

/* ── 05 services film ─────────────────────────────────────────── */
.svc-wrap {
  padding: var(--sec-gap) 0;
}

/* When pinned, the wrap's own top padding would sit above the sticky pin —
   the slide would start that many pixels before the pin actually stuck, and
   (with border-box) the same padding would eat into the pin's travel so it
   released early. The pin is a full viewport of its own, so drop it. */
.scrub .svc-wrap {
  padding-block: 0;
}

.svc-pin {
  display: flex;
  flex-direction: column;
  /* anchored to the top, not centred: the pin is a fixed 100svh box with
     `overflow: clip`, so centring meant any overflow was trimmed off BOTH
     ends and the heading above the track lost its top. Starting at the top
     keeps the head whole and lets the track absorb whatever is left. */
  justify-content: flex-start;
  overflow: clip;
  padding-block: clamp(16px, 3vh, 40px);
}

.scrub .svc-pin {
  height: 100svh;
  /* the pin is flush to the top of the viewport, so without this the fixed
     nav sits on top of the "Services" rail — the head starts below it */
  padding-top: clamp(72px, 9vh, 100px);
}

.svc-head {
  position: relative;
  flex: none;
}

.svc-head .sec-title {
  font-size: var(--fs-h2);
}

.svc-head .sec-sub {
  margin-bottom: clamp(24px, 4vh, 44px);
}

.svc-count {
  position: absolute;
  right: var(--gutter);
  top: 4px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--slate);
  background: var(--white);
  padding-left: 12px;
}

.svc-count b {
  color: var(--orange);
  font-weight: 700;
}

.svc-track {
  display: flex;
  gap: clamp(20px, 2.4vw, 38px);
  padding: 0 var(--gutter) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.svc-plate {
  scroll-snap-align: center;
}

.scrub .svc-track {
  flex: 1;
  min-height: 220px;
  width: max-content;
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
  will-change: transform;
}

.svc-plate {
  position: relative;
  width: clamp(230px, 25vw, 360px);
  height: clamp(260px, 36vh, 400px);
  flex: none;
  border-radius: var(--r-plate);
}

.scrub .svc-plate {
  height: 100%;
  max-height: 400px;
}

.svc-plate .flip-front figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

@media (max-width: 700px) {
  .svc-plate {
    width: 80vw;
  }

  html:not(.scrub) .svc-plate {
    height: 56vh;
  }
}

@media (max-height: 820px) {
  .svc-head .sec-title {
    margin-bottom: 14px;
  }

  .svc-head .sec-sub {
    margin-bottom: 18px;
  }

  .svc-head .rail {
    margin-bottom: 16px;
  }
}

/* services on ink */
.svc-wrap.dark {
  background: var(--ink);
  color: var(--white);
}

.svc-wrap.dark .sec-title {
  color: var(--white);
}

.svc-wrap.dark .sec-sub {
  color: rgba(255, 255, 255, .62);
}

.svc-wrap.dark .svc-count {
  background: var(--ink);
  color: rgba(255, 255, 255, .55);
}

.svc-wrap.dark .svc-count b {
  color: var(--orange);
}

/* ── 06 facility ──────────────────────────────────────────────── */
.facility {
  position: relative;
  min-height: clamp(500px, 74vh, 760px);
  overflow: clip;
  display: flex;
  align-items: flex-end;
  color: var(--white);
}

.facility.on-page-hero {
  margin-top: 0;
}

.fac-media {
  position: absolute;
  inset: 0;
}

.fac-media img {
  width: 100%;
  height: 114%;
  object-fit: cover;
  will-change: transform;
}

.fac-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 13, .3), rgba(13, 13, 13, .05) 42%, rgba(13, 13, 13, .9) 96%);
}

.fac-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--gutter) clamp(64px, 9vh, 120px);
}

.fac-head {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 4.4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: clamp(40px, 6vh, 70px);
}

.fac-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 8vw, 130px);
}

.stat dd {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.stat-num {
  font-family: var(--f-display);
  font-size: clamp(3rem, 7.4vw, 6.6rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-suffix {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
}

.fac-specs {
  margin-top: clamp(30px, 5vh, 52px);
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

/* ── 07 insurance — dark, pinned fill, bento benefit cards ─────── */
.insurance {
  position: relative;
  background: var(--ink);
  color: var(--white);
  padding: clamp(90px, 12vh, 150px) var(--gutter);
  text-align: center;
  overflow: clip;
}

.ins-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ins-glow i {
  position: absolute;
  width: 68vw;
  height: 68vw;
  border-radius: 50%;
}

.ins-glow i:nth-child(1) {
  left: -18vw;
  top: 6%;
  background: radial-gradient(circle, rgba(249, 121, 49, .4), rgba(249, 121, 49, .1) 42%, transparent 66%);
}

.ins-glow i:nth-child(2) {
  right: -20vw;
  top: 38%;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 60%);
}

.ins-glow i:nth-child(3) {
  left: 24vw;
  bottom: -28vw;
  background: radial-gradient(circle, rgba(249, 121, 49, .24), transparent 66%);
}

.insurance>*:not(.ins-glow) {
  position: relative;
}

/* CSS-sticky pin, not a GSAP pin: a GSAP pin wraps the stage in a
   .pin-spacer, which stops it being a direct child of .insurance — it then
   loses the `position: relative` above and renders behind .ins-glow. */
.ins-pin {
  position: relative;
}

.ins-stage {
  position: relative;
  z-index: 1;
  padding-block: clamp(8px, 2.5vh, 34px);
}

.scrub .ins-pin {
  height: 175vh;
}

.scrub .ins-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 0;
}

.ins-eyebrow {
  justify-content: center;
  color: rgba(255, 255, 255, .8);
}

.ins-num {
  display: inline-block;
  position: relative;
  margin: clamp(6px, 1.5vh, 16px) auto 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(5.5rem, 19vw, 16rem);
  line-height: .95;
  letter-spacing: -.02em;
}

.ins-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .3);
}

.ins-fill {
  position: absolute;
  inset: 0;
  background: var(--edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.scrub .ins-fill {
  clip-path: inset(100% 0 0 0);
}

.ins-head {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  font-weight: 600;
  line-height: 1.14;
  max-width: 28ch;
  margin: clamp(30px, 4.5vh, 52px) auto 0;
  text-wrap: balance;
}

.ins-head em {
  color: var(--orange);
}

.ins-copy {
  margin: 26px auto 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .64);
}

.ins-line {
  margin: 18px auto 0;
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--orange);
}

.ins-adv {
  max-width: 1200px;
  margin: clamp(40px, 6vh, 72px) auto 0;
}

.ins-partner {
  justify-content: center;
  margin-bottom: 34px;
}

.ins-partner::before {
  display: none;
}

/* photo bento — asymmetric slots, photos held by <img> children so the
   grid stays declarative; flat panels break up the photo rhythm */
.ins-benefits {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* minmax, not a fixed height — a row that cannot grow clips its own copy,
     and `justify-content: flex-end` sends that overflow off the top edge */
  grid-auto-rows: minmax(clamp(150px, 19vh, 200px), auto);
  gap: clamp(14px, 1.5vw, 22px);
  text-align: left;
}

.ins-benefits li {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: clamp(18px, 1.8vw, 26px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .4s;
}

/* explicit slots — fills all four rows with no ragged tail */
.ins-benefits .b-hero { grid-column: 1 / span 4; grid-row: 1; }
.ins-benefits .b-tall { grid-column: 5 / span 2; grid-row: 1 / span 2; }
.ins-benefits .b-s1   { grid-column: 1 / span 2; grid-row: 2; }
.ins-benefits .b-s2   { grid-column: 3 / span 2; grid-row: 2; }
.ins-benefits .b-s3   { grid-column: 1 / span 2; grid-row: 3; }
.ins-benefits .b-wide { grid-column: 3 / span 4; grid-row: 3; }
.ins-benefits .b-s4   { grid-column: 1 / span 3; grid-row: 4; }
.ins-benefits .b-s5   { grid-column: 4 / span 3; grid-row: 4; }

.ins-benefits li img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .5s;
  /* knock the workshop lighting back so white copy always reads over it */
  filter: saturate(.8) contrast(1.02) brightness(.62);
}

.ins-benefits li.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(13, 13, 13, .5) 0%, rgba(13, 13, 13, .78) 55%, rgba(13, 13, 13, .96) 100%);
  transition: background .45s;
}

/* flat panels carry the monogram instead of a photograph */
.ins-benefits li.flat {
  background: linear-gradient(150deg, #17181b, #0b0b0c);
}

.ins-benefits li.flat::before {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -22%;
  width: 62%;
  aspect-ratio: 1;
  z-index: 0;
  background: var(--orange);
  opacity: .1;
  -webkit-mask: url(../assets/tlcz-mono-mask.png) center / contain no-repeat;
  mask: url(../assets/tlcz-mono-mask.png) center / contain no-repeat;
}

.ins-benefits li:hover {
  border-color: rgba(249, 121, 49, .55);
}

.ins-benefits li:hover img {
  transform: scale(1.05);
  filter: saturate(.95) contrast(1.04) brightness(.78);
}

.ins-benefits li.photo:hover::before {
  background: linear-gradient(180deg, rgba(13, 13, 13, .34) 0%, rgba(249, 121, 49, .3) 60%, rgba(13, 13, 13, .96) 100%);
}

.ins-benefits li > .ico,
.ins-benefits li > b,
.ins-benefits li > small {
  position: relative;
  z-index: 2;
}

.ins-benefits .ico {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(13, 13, 13, .35);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}

.ins-benefits .ico svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ins-benefits b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.2;
}

.ins-benefits small {
  font-family: var(--f-sans);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .8);
  line-height: 1.5;
}

.ins-benefits .b-tall {
  justify-content: flex-end;
}

.ins-benefits .b-tall b {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
}

.ins-benefits .b-tall small {
  max-width: 34ch;
}

@media (max-width: 900px) {
  .ins-benefits {
    grid-template-columns: repeat(4, 1fr);
  }

  .ins-benefits .b-hero { grid-column: 1 / span 4; grid-row: 1; }
  .ins-benefits .b-tall { grid-column: 1 / span 2; grid-row: 2 / span 2; }
  .ins-benefits .b-s1   { grid-column: 3 / span 2; grid-row: 2; }
  .ins-benefits .b-s2   { grid-column: 3 / span 2; grid-row: 3; }
  .ins-benefits .b-s3   { grid-column: 1 / span 2; grid-row: 4; }
  .ins-benefits .b-wide { grid-column: 3 / span 2; grid-row: 4; }
  .ins-benefits .b-s4   { grid-column: 1 / span 2; grid-row: 5; }
  .ins-benefits .b-s5   { grid-column: 3 / span 2; grid-row: 5; }
}

@media (max-width: 560px) {
  /* short cards sit two-across; the lead card and the long paragraph take a
     full row so the display face never wraps into a column of one-word lines */
  .ins-benefits {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(150px, auto);
  }

  .ins-benefits .b-hero,
  .ins-benefits .b-tall {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  /* grid-row has to be reset at class-class specificity — the desktop slots
     pin these to explicit rows and a plain `li` selector loses to them */
  .ins-benefits .b-s1,
  .ins-benefits .b-s2,
  .ins-benefits .b-s3,
  .ins-benefits .b-wide,
  .ins-benefits .b-s4,
  .ins-benefits .b-s5 {
    grid-column: span 1;
    grid-row: auto;
  }

  /* half-width cards are ~150px across — pull the type and chrome in so the
     copy has room to breathe instead of fragmenting */
  .ins-benefits li {
    padding: 16px 14px;
  }

  .ins-benefits .ico {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
  }

  .ins-benefits .ico svg {
    width: 15px;
    height: 15px;
  }

  .ins-benefits b {
    font-size: .95rem;
  }

  .ins-benefits small {
    font-size: 12px;
  }

  .ins-benefits .b-hero b,
  .ins-benefits .b-tall b {
    font-size: 1.2rem;
  }
}

.ins-close {
  margin-top: clamp(40px, 6vh, 64px);
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
}

.ins-close em {
  color: var(--orange);
}

/* ── 08 pricing — glass over background, Complete card first ──── */
.pricing {
  position: relative;
  padding: var(--sec-gap) 0;
  overflow: clip;
}

.price-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.price-bg::before,
.price-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.price-bg::before {
  width: 42vw;
  height: 42vw;
  left: -10vw;
  bottom: 6%;
  background: radial-gradient(circle, rgba(249, 121, 49, .16), transparent 65%);
}

.price-bg::after {
  width: 40vw;
  height: 40vw;
  right: -12vw;
  top: 20%;
  background: radial-gradient(circle, rgba(13, 13, 13, .08), transparent 65%);
}

.price-wm {
  position: absolute;
  right: 3%;
  top: 30%;
  width: 34vw;
}

.pricing .sec-title,
.pricing .sec-sub,
.pricing .rail {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}

.pricing .rail {
  margin-bottom: 34px;
}

.pricing .sec-title {
  margin-bottom: clamp(24px, 3.5vh, 40px);
}

.pricing .sec-sub {
  margin-bottom: clamp(48px, 7vh, 84px);
}

.price-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: clamp(16px, 2.2vw, 32px);
  padding: 0 var(--gutter);
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
}

.price-card {
  position: relative;
  border-radius: var(--r-plate);
  padding: clamp(30px, 3.6vw, 52px);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 24px 60px -30px rgba(13, 13, 13, .4);
}

.glass-orange {
  background: linear-gradient(180deg, rgba(249, 121, 49, .1), rgba(255, 255, 255, .55));
  border: 1px solid rgba(249, 121, 49, .3);
  color: var(--ink);
}

.glass-dark {
  background: linear-gradient(180deg, rgba(13, 13, 13, .94), rgba(13, 13, 13, .98));
  border: 1px solid rgba(249, 121, 49, .3);
  color: var(--white);
  box-shadow: 0 34px 80px -30px rgba(13, 13, 13, .6);
}

.price-tag {
  position: absolute;
  top: 26px;
  right: 26px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange);
  border-radius: 999px;
  padding: 7px 14px;
}

.price-level {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--slate);
}

.glass-dark .price-level {
  color: rgba(255, 255, 255, .62);
}

.price-num {
  font-family: var(--f-display);
  font-size: clamp(3rem, 6.2vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
  margin: 12px 0 28px;
  font-variant-numeric: tabular-nums;
}

.glass-orange .price-num {
  color: var(--orange);
}

.glass-dark .price-num {
  color: var(--orange);
}

.inc-list {
  list-style: none;
}

.inc-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(13, 13, 13, .1);
  font-size: 15px;
  line-height: 1.5;
}

.glass-dark .inc-list li {
  border-color: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .86);
}

.inc-list svg {
  width: 15px;
  height: 15px;
  flex: none;
  transform: translateY(2px);
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inc-list li:last-child {
  border-bottom: 0;
}

.inc-note {
  margin-top: 18px;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--slate);
  line-height: 1.7;
}

.glass-dark .inc-note {
  color: rgba(255, 255, 255, .5);
}

.price-cta {
  margin-top: 28px;
  width: 100%;
}

.price-notes {
  position: relative;
  max-width: 1240px;
  margin: clamp(40px, 6vh, 64px) auto 0;
  padding: 0 var(--gutter);
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 2.1;
}

.price-notes span {
  color: var(--slate);
}

@media (max-width: 860px) {
  .price-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .price-tag {
    position: static;
    display: inline-block;
    margin-bottom: 16px;
  }
}

/* ── 09 process — pinned, one by one ──────────────────────────── */
.process {
  position: relative;
}

/* The six steps used to live in a pinned, full-viewport strip that revealed
   them one at a time on scroll. That cost a whole extra viewport of height
   and the per-step delay made the section feel slow. They now sit in a plain
   3 x 2 grid that flows with the page — every step is on screen at once and
   each one just fades up. */
.proc-pin {
  position: relative;
  padding-block: clamp(56px, 8vh, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.proc-track {
  height: 1px;
  background: rgba(13, 13, 13, .12);
  margin: 0 var(--gutter) 38px;
  overflow: hidden;
}

.proc-track i {
  display: block;
  height: 100%;
  background: var(--edge);
  transform: scaleX(0);
  transform-origin: left center;
}

.proc-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 3vw, 48px) clamp(24px, 2.8vw, 44px);
  padding: 0 clamp(32px, 7vw, 120px);
  max-width: 1360px;
  margin: 0 auto;
}

/* the steps carry [data-reveal], so opacity/transform are owned by the shared
   reveal rule — only the desaturation is specific to this section */
.js .proc-strip li img {
  filter: grayscale(1);
  transition: filter .7s ease;
}

.js .proc-strip li.in img {
  filter: grayscale(0);
}

.proc-idx {
  display: block;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  color: var(--orange);
  margin-bottom: 12px;
}

.proc-strip img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 6px;
  transition: filter .6s ease;
}

.proc-strip b {
  display: block;
  margin-top: 14px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.proc-full {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.45;
}

@media (max-width: 860px) {
  .proc-strip {
    grid-template-columns: repeat(2, 1fr);
    padding-inline: var(--gutter);
  }
}

@media (max-width: 520px) {
  .proc-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 16px;
  }
}

/* ── brand promise (process.html closing statement) ───────────── */
.brand-promise {
  position: relative;
  /* the pinned steps already end on open space — no need to stack a full
     section gap on top of it */
  padding: clamp(56px, 8vh, 96px) var(--gutter) var(--sec-gap);
  text-align: center;
  overflow: clip;
}

.brand-promise .rail,
.brand-promise .sec-title,
.brand-promise p {
  margin-inline: auto;
}

.brand-promise .rail {
  justify-content: center;
  max-width: 640px;
}

.brand-promise .sec-title {
  max-width: 22ch;
}

.brand-promise p {
  max-width: 60ch;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.75;
  color: var(--slate);
  margin-top: 8px;
}

/* ── 10 testimonials — carousel, all reviews ───────────────────── */
.reviews {
  position: relative;
  padding: var(--sec-gap) 0;
  overflow: clip;
}

.reviews-mark {
  position: absolute;
  top: calc(var(--sec-gap) - 4vh);
  right: 4vw;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 30vw;
  line-height: .6;
  color: transparent;
  -webkit-text-stroke: 2px rgba(249, 121, 49, .1);
  pointer-events: none;
  z-index: 0;
}

.reviews-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 var(--gutter) clamp(28px, 4vh, 44px);
  flex-wrap: wrap;
}

.reviews-head .rail {
  margin: 0;
}

.reviews-nav {
  display: flex;
  gap: 10px;
}

.rev-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(13, 13, 13, .18);
  display: grid;
  place-items: center;
  transition: background .3s, border-color .3s, color .3s;
}

.rev-arrow:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.rev-arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quotes {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  padding: 0 var(--gutter) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.quotes::-webkit-scrollbar {
  display: none;
}

.quote {
  position: relative;
  flex: 0 0 clamp(270px, 32vw, 400px);
  scroll-snap-align: start;
  border-radius: var(--r-plate);
  padding: clamp(24px, 2.6vw, 38px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(245, 246, 247, .6));
  border: 1px solid rgba(13, 13, 13, .07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 20px 50px -32px rgba(13, 13, 13, .3);
}

.quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 3px;
  background: var(--orange);
}

.quote:nth-child(even)::before {
  background: var(--ink);
}

.q-rating {
  position: absolute;
  top: clamp(20px, 2.4vw, 32px);
  right: clamp(20px, 2.4vw, 32px);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--orange);
}

.q-rating i {
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 11px;
  color: var(--slate);
}

.quote blockquote {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.15vw, 1.12rem);
  line-height: 1.5;
  max-width: 36ch;
  text-wrap: pretty;
  padding-right: 36px;
}

.quote blockquote em {
  color: var(--orange);
  font-style: normal;
}

.quote figcaption {
  margin-top: 22px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.quote figcaption b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14.5px;
}

.quote figcaption span {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
}

.quote-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: clamp(24px, 3.5vh, 36px) 0 0;
  position: relative;
  z-index: 1;
}

.quote-dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(13, 13, 13, .18);
  transition: background .3s, transform .3s, width .3s;
}

.quote-dots button.on {
  background: var(--orange);
  width: 22px;
  border-radius: 4px;
}

@media (max-width: 700px) {
  .quote {
    flex-basis: 84vw;
  }
}

/* testimonials on ink */
.reviews.dark {
  background: var(--ink);
  color: var(--white);
}

.reviews.dark .reviews-mark {
  -webkit-text-stroke-color: rgba(249, 121, 49, .16);
}

.reviews.dark .quote {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px -36px rgba(0, 0, 0, .7);
}

.reviews.dark .quote blockquote {
  color: var(--white);
}

.reviews.dark .quote figcaption b {
  color: var(--white);
}

.reviews.dark .quote figcaption span {
  color: rgba(255, 255, 255, .55);
}

.reviews.dark .quote:nth-child(even)::before {
  background: rgba(255, 255, 255, .5);
}

.reviews.dark .rev-arrow {
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}

.reviews.dark .rev-arrow:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.reviews.dark .quote-dots button {
  background: rgba(255, 255, 255, .25);
}

.reviews.dark .quote-dots button.on {
  background: var(--orange);
}

/* ── FAQ accordion — native, zero-JS ────────────────────────────── */
.faq {
  position: relative;
  padding: var(--sec-gap) 0;
  overflow: clip;
}

.faq-list {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.faq-item {
  border-bottom: 1px solid rgba(13, 13, 13, .12);
}

.faq-item:first-child {
  border-top: 1px solid rgba(13, 13, 13, .12);
}

.faq-q {
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 2.6vh, 28px) 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  color: var(--ink);
  transition: color .3s;
}

.faq-q:hover {
  color: var(--orange);
}

.faq-chev {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(13, 13, 13, .2);
  display: grid;
  place-items: center;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), background .3s, border-color .3s;
}

.faq-chev svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .3s;
}

.faq-item.open .faq-chev {
  transform: rotate(135deg);
  background: var(--orange);
  border-color: var(--orange);
}

.faq-item.open .faq-chev svg {
  stroke: #fff;
}

/* smooth slide via 0fr → 1fr grid rows */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1);
}

.faq-item.open .faq-panel {
  grid-template-rows: 1fr;
}

.faq-panel > .faq-a {
  overflow: hidden;
  min-height: 0;
}

.faq-a {
  max-width: 72ch;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--slate);
}

.faq-a p {
  padding-bottom: clamp(22px, 3vh, 32px);
}

/* ── footer — dark, address + map, mega wordmark ───────────────── */
.footer {
  position: relative;
  background: var(--ink);
  color: var(--white);
  padding: clamp(70px, 10vh, 120px) var(--gutter) 0;
  overflow: clip;
}

.foot-brand {
  text-align: center;
  margin-bottom: clamp(48px, 7vh, 80px);
}

.foot-brand img {
  margin: 0 auto 20px;
}

.foot-word {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.foot-word em {
  color: var(--orange);
}

.foot-tag {
  margin-top: 14px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.foot-columns {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(28px, 4vw, 64px);
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 44px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  align-items: start;
}

.foot-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.foot-h {
  margin-bottom: 12px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
}

.foot-info p:not(.foot-h) {
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255, 255, 255, .94);
}

.foot-info a {
  transition: color .3s;
}

.foot-info a:hover {
  color: var(--orange);
}

.foot-map {
  position: relative;
  border-radius: 8px;
  overflow: clip;
  border: 1px solid rgba(255, 255, 255, .14);
  min-height: 260px;
  background: #1a1a1a;
}

.foot-map iframe {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
  filter: grayscale(.4) invert(.92) contrast(.9);
}

.foot-map-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(13, 13, 13, .7);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 999px;
}

.foot-marques {
  margin-top: clamp(48px, 7vh, 72px);
  text-align: center;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.foot-legal {
  margin-top: 20px;
  text-align: center;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .5);
}

.foot-legal span {
  color: var(--orange);
}

.foot-mega {
  margin: clamp(30px, 5vh, 56px) calc(var(--gutter) * -1) 0;
  text-align: center;
  line-height: 0;
}

.foot-mega span {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: min(41vw, 84vh);
  line-height: .78;
  white-space: nowrap;
  margin-bottom: -0.045em;
  background-image: url(../assets/img/footer-backdrop.jpeg);
  background-size: cover;
  background-position: 50% 45%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* 2px white outline around the OUTSIDE of the letters only.
     -webkit-text-stroke cannot be used here: Cinzel builds each glyph from
     overlapping sub-paths (stem + serifs), and a text stroke outlines every
     contour — including the seams buried inside the letterform — so the
     letters came out with lines drawn through them. These chained
     drop-shadows work on the rendered silhouette instead, where those
     overlaps are already merged, so only the true outer edge is drawn.
     Four orthogonal passes compound into an even outline on the diagonals
     as well. */
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff);
  user-select: none;
}

@media (max-width: 860px) {
  .foot-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .foot-info {
    grid-template-columns: 1fr;
  }
}

/* ── booking dialog ───────────────────────────────────────────── */
#book-dialog {
  margin: auto;
  border: 0;
  padding: 0;
  border-radius: var(--r-plate);
  max-width: min(920px, calc(100vw - 32px));
  width: 100%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 40px 120px -30px rgba(13, 13, 13, .5);
}

#book-dialog::backdrop {
  background: rgba(13, 13, 13, .62);
  backdrop-filter: blur(6px);
}

.book-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
}

.book-media {
  min-height: 100%;
}

.book-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-body {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
}

.book-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(13, 13, 13, .15);
  font-size: 20px;
  line-height: 1;
  transition: border-color .3s, transform .3s;
}

.book-close:hover {
  border-color: var(--orange);
  transform: rotate(90deg);
}

.book-kicker {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--slate);
}

.book-body h3 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  margin: 10px 0 26px;
}

#book-form label {
  display: block;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 16px;
}

#book-form input,
#book-form select {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 12px 14px;
  font: 500 15px var(--f-sans);
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(13, 13, 13, .14);
  border-radius: 6px;
  transition: border-color .3s, box-shadow .3s;
}

#book-form input:focus,
#book-form select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249, 121, 49, .14);
}

.book-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.book-note {
  margin-top: 16px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
}

@media (max-width: 720px) {
  .book-grid {
    grid-template-columns: 1fr;
  }

  .book-media {
    display: none;
  }
}

/* ── reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .rail-line {
    transform: none;
    transition: none;
  }

  .flip-front>img {
    transition: none;
  }

  .btn {
    transition: none;
  }

  .grid-scan {
    display: none;
  }
}
/* ── page transition — grid shutter ────────────────────────────── */
#shutter {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
  visibility: hidden;
}

html.t-cover #shutter,
html.t-out #shutter {
  visibility: visible;
  pointer-events: auto;
}

.sh-row {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
}

.sh-row i {
  background: var(--ink);
  /* the 1px ring closes sub-pixel seams between adjacent blocks */
  box-shadow: 0 0 0 1px var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.sh-row:nth-child(even) i {
  transform-origin: right center;
}

/* no-JS / reduced-motion: never leave the page covered */
html.t-cover .sh-row i {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  #shutter {
    display: none;
  }
}

/* ══════════ CONTACT PAGE — contact.html ═══════════════════════ */

/* ── channels — four ways in ──────────────────────────────────── */
.ct-channels {
  position: relative;
  padding: var(--sec-gap) 0;
  overflow: clip;
}

.ct-channels .sec-title {
  margin: 0 var(--gutter) clamp(38px, 5vh, 62px);
}

.ct-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 26px);
  padding: 0 var(--gutter);
}

/* the <li> carries data-reveal (which owns opacity+transform for the reveal,
   and wins on specificity), so all hover motion lives on the inner element —
   same split the flip cards use with .flip > .flip-inner */
.ct-card {
  display: flex;
}

.ct-card-in {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(13, 13, 13, .12);
  background: var(--white);
  padding: clamp(24px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), border-color .4s, box-shadow .55s;
}

/* orange wash rises from the bottom edge on hover */
.ct-card-in::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(249, 121, 49, 0) 30%, rgba(249, 121, 49, .12) 100%);
  opacity: 0;
  transform: translateY(28%);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}

.ct-card-in:hover {
  transform: translateY(-6px);
  border-color: rgba(249, 121, 49, .55);
  box-shadow: 0 22px 48px -30px rgba(13, 13, 13, .5);
}

.ct-card-in:hover::before {
  opacity: 1;
  transform: translateY(0);
}

.ct-idx {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--orange);
}

.ct-ico {
  width: 46px;
  height: 46px;
  margin-top: 6px;
  border-radius: 50%;
  border: 1px solid rgba(13, 13, 13, .16);
  display: grid;
  place-items: center;
  transition: background .45s, border-color .45s, transform .6s cubic-bezier(.2, .8, .2, 1);
}

.ct-ico svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .45s;
}

.ct-card-in:hover .ct-ico {
  background: var(--orange);
  border-color: var(--orange);
  transform: rotate(-8deg) scale(1.06);
}

.ct-card-in:hover .ct-ico svg {
  stroke: #fff;
}

.ct-card-in h3 {
  margin-top: 8px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  line-height: 1.2;
}

.ct-card-in p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--slate);
}

.ct-lines {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ct-lines a {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
  width: fit-content;
  position: relative;
  padding-bottom: 2px;
}

.ct-lines a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.ct-lines a:hover {
  color: var(--orange);
}

.ct-lines a:hover::after {
  transform: scaleX(1);
}

/* ── visit — address, live status, map ────────────────────────── */
.ct-visit {
  position: relative;
  background: var(--ink);
  color: var(--white);
  padding: var(--sec-gap) var(--gutter);
  overflow: clip;
}

.ct-visit .mono-wm {
  right: -6%;
  top: 4%;
  width: 44vw;
}

.ct-visit-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 68px);
  align-items: start;
}

.ct-visit .rail {
  margin-inline: 0;
}

.ct-visit .sec-title {
  margin-bottom: 24px;
}

/* live open/closed pill — the dot breathes while open.
   the class sets display, which would otherwise beat the `hidden` attribute
   and flash the placeholder before the clock is read */
.ct-status[hidden] {
  display: none;
}

.ct-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  font-family: var(--f-sans);
  font-size: 12.5px;
  letter-spacing: .04em;
  margin-bottom: 30px;
}

.ct-status b {
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ct-status span:not(.ct-dot) {
  color: rgba(255, 255, 255, .62);
}

.ct-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  flex: none;
}

.ct-status.open .ct-dot {
  background: #35c46a;
  box-shadow: 0 0 0 0 rgba(53, 196, 106, .55);
  animation: ct-pulse 2.4s ease-out infinite;
}

.ct-status.shut .ct-dot {
  background: var(--orange);
}

@keyframes ct-pulse {
  0% { box-shadow: 0 0 0 0 rgba(53, 196, 106, .5); }
  70% { box-shadow: 0 0 0 12px rgba(53, 196, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 196, 106, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ct-status.open .ct-dot { animation: none; }
}

.ct-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
  margin-bottom: 36px;
}

.ct-facts > div {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 14px;
}

.ct-facts dt {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}

.ct-facts dd {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: rgba(255, 255, 255, .78);
}

.ct-facts a {
  color: rgba(255, 255, 255, .78);
  transition: color .3s;
}

.ct-facts a:hover {
  color: var(--orange);
}

.ct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ct-map {
  position: relative;
  border-radius: 8px;
  overflow: clip;
  border: 1px solid rgba(255, 255, 255, .14);
  min-height: clamp(360px, 56vh, 560px);
  background: #1a1a1a;
}

.ct-map iframe {
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 56vh, 560px);
  border: 0;
  filter: grayscale(.4) invert(.92) contrast(.9);
  transition: filter .6s ease;
}

.ct-map:hover iframe {
  filter: grayscale(0) invert(.92) contrast(.95);
}

.ct-map-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  pointer-events: none;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(13, 13, 13, .7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 999px;
}

.ct-marques {
  position: relative;
  margin-top: clamp(46px, 7vh, 84px);
  padding-top: clamp(26px, 3.4vh, 40px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
  font-family: var(--f-sans);
  font-size: 12.5px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .5);
}

@media (max-width: 1080px) {
  .ct-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .ct-visit-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ct-grid {
    grid-template-columns: 1fr;
  }

  .ct-facts {
    grid-template-columns: 1fr;
  }
}

/* ══════════ TEAM PAGE — team.html ═════════════════════════════ */
/* CODE (17) reference stylesheet, pasted as-is. */

.work {
  position: relative;
  width: 100vw;
  overflow: hidden;
  background-color: #1a1d20;
}

.row {
  width: 100vw;
  display: flex;
}

.col {
  flex: 1;
  aspect-ratio: 1;
}

.img {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.img[data-origin="left"] {
  transform-origin: 0% 0%;
}

.img[data-origin="right"] {
  transform-origin: 100% 0%;
}

.work img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Names sit in the empty column next to each portrait. They are children of
   .img, so the reference animation scales and reveals them along with the
   photo — no change to .work / .row / .col / .img or to script behaviour. */
.who {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8%;
  pointer-events: none;
}

.who-l {
  left: auto;
  right: 100%;
  align-items: flex-end;
  text-align: right;
}

.who-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.95vw;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #fff;
}

.who-role {
  margin-top: .5vw;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: .95vw;
  letter-spacing: .04em;
  line-height: 1.45;
  color: rgba(255, 255, 255, .6);
}

/* The roster's mobile rework lives with the rest of the responsive rules at
   the foot of this file. The old max-width:700px block that used to sit here
   only nudged two vw font sizes, which the 980px rules now supersede. */

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — everything below the nav-drawer breakpoint.
   Kept last in the file so it settles the cascade without having to
   out-specify each section's own rules.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {

  /* ── the structural rules read as stray lines on a narrow screen ── */
  .grid-lines {
    display: none;
  }

  /* ── motion: a fade, and nothing else ──────────────────────────
     JS already drops the whole scrub path here, so what remains is the
     CSS-side transforms — reveals, hovers and parallax dressing. */
  .js [data-reveal],
  .js [data-reveal].in {
    transform: none;
  }

  .js [data-reveal] {
    opacity: 0;
    transition: opacity .5s ease;
  }

  .js [data-reveal].in {
    opacity: 1;
  }

  /* the staggers existed to choreograph a sequence; a plain fade needs none */
  .js [data-reveal][data-delay="1"],
  .js [data-reveal][data-delay="2"],
  .js [data-reveal][data-delay="3"] {
    transition-delay: 0s;
  }

  .js .rail-line {
    transform: none;
    transition: none;
  }

  .grid-scan,
  .progress-edge {
    display: none;
  }

  /* hover choreography has no meaning on touch, and the scale/rotate
     transitions fire on tap as a flash of movement */
  .ins-benefits li,
  .ins-benefits li img,
  .ins-benefits li.photo::before,
  .flip-front > img,
  .price-card,
  .ct-card,
  .sp-tile,
  .svc-plate {
    transition: none;
  }

  .ins-benefits li:hover,
  .ins-benefits li:hover img {
    transform: none;
  }

  .book-close:hover {
    transform: none;
  }

  /* ── 01 hero — fill the screen, no crop, no pin ──────────────── */
  /* svh is the *small* viewport box, so the section always fits between
     the browser chrome instead of being cut off by it.
     `.scrub` is normally absent below this breakpoint, but a desktop window
     dragged narrow keeps the class from load — match its specificity so the
     320vh pin height cannot survive the resize. */
  .hero-wrap,
  .scrub .hero-wrap {
    height: auto;
  }

  .hero-pin,
  .scrub .hero-pin {
    position: relative;
    height: 100svh;
    min-height: 540px;
  }

  .hero-content {
    padding-block: 96px 40px;
  }

  .hero-eyebrow {
    font-size: 15px;
    letter-spacing: .08em;
    margin-bottom: 18px;
  }

  .hero-title h1 {
    font-size: clamp(2.5rem, 12vw, 4.2rem);
    line-height: 1.02;
  }

  .hero-cta {
    margin-top: 30px;
    gap: 10px;
  }

  .hero-cta .btn {
    flex: 1 1 auto;
    min-width: 46%;
    justify-content: center;
    text-align: center;
  }

  /* ── section rhythm — the desktop gaps read as dead space here ── */
  :root {
    --sec-gap: clamp(52px, 7vh, 76px);
  }

  .proc-pin {
    padding-block: clamp(36px, 5vh, 56px);
  }

  .brand-promise {
    padding-block: clamp(36px, 5vh, 56px) var(--sec-gap);
  }

  .page-hero {
    padding-top: clamp(92px, 12vh, 116px);
  }

  .ins-adv {
    margin-top: clamp(28px, 4vh, 44px);
  }

  .ins-close {
    margin-top: clamp(28px, 4vh, 40px);
  }

  /* ── team roster — static stacked list, no pin, no scale ──────────
     initTeam() bails out below this same breakpoint, so nothing here has
     to fight a transform. Rows carry one or two portraits scattered over
     four columns, which is unreadable at ~94px a cell — so the row turns
     into a column and every portrait gets its own full-width line. The
     empty spacer columns drop out, the photo takes 44% of the line, and
     .who stays an absolutely-positioned child of .img (desktop structure
     untouched) widened to 127% (= 56/44) to fill the space beside it. */
  .work {
    background-color: #1a1d20;
  }

  .row {
    width: 100%;
    flex-direction: column;
  }

  .col-pad {
    display: none;
  }

  .row .col {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: auto;
    padding: clamp(7px, 1.8vw, 12px) var(--gutter);
  }

  .row .col .img {
    width: 44%;
    height: auto;
    aspect-ratio: 1;
  }

  .who {
    left: 100%;
    width: 127%;
    padding: 0 0 0 clamp(14px, 4.5vw, 26px);
  }

  /* every name sits to the right of its photo once the grid is a single
     column, so the mirrored variant would run the text off-screen */
  .who-l {
    left: 100%;
    right: auto;
    align-items: flex-start;
    text-align: left;
  }

  .who-name {
    font-size: clamp(1.05rem, 4.6vw, 1.45rem);
  }

  .who-role {
    margin-top: .45em;
    font-size: clamp(.75rem, 2.9vw, .9rem);
  }
}

@media (max-width: 560px) {
  .proc-strip b {
    font-size: 1rem;
  }

  .proc-full {
    font-size: 11.5px;
  }
}