/* ===========================================================================
   about-cinematic.css  --  "MERIDIAN"  (Pass 5: Cinematic 3D)
   Art direction for about.php only. Namespaced `.abt-` throughout so it can
   never leak onto the header, footer, or any other internal page, and never
   edits css/tideline.css, css/custom.css or any homepage file.

   This pass keeps the proven Tideline/Meridian tokens and mechanisms
   (ivory/sand/gold/charcoal, Sora + DM Sans, mask-reveal headlines, the
   curtain-wipe story stage, the horizontal shelf, the rolling-digit
   odometer, the shared cursor/magnetic button, the homepage's own WebGL
   coastal shimmer) but layers a rounded, glassy, depth-driven "cinematic 3D"
   surface language on top -- floating cards, tilt-on-hover panels, ambient
   gold/coast glow, glass pill bars -- deliberately picked up from the
   homepage's own luxevo-hero (giant two-tone wordmark, rounded floating
   image card, floating pill bar) so the hero reads as a sibling of the
   homepage's without being a copy of it. Every other section then carries
   that same rounded/glass/glow language so the page reads as one system.

   Effect budget: one WebGL ripple surface (hero), mask reveals, one
   pointer-tilt hook (hero card + Why panels, both already wired through
   TL.tilt), one fade/rise reveal hook for card grids, the story curtain-wipe,
   the shelf, the odometer, one cursor, one magnetic button. Nothing stacks
   beyond that.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. TOKENS
   --------------------------------------------------------------------------- */

.abt {
  --ivory:    #fbf9f5;
  --page:     #ffffff;   /* matches the header (include/header.php) */
  --sand:     #e9e0d2;
  --sand-ink: #b9ad99;
  --gold:     #ca9e4e;
  --gold-rgb: 202, 158, 78;
  --charcoal: #14171a;
  --charcoal-rgb: 20, 23, 26;
  --ink-2:    #4e565c;
  --coast:    #3e5c69;
  --coast-rgb: 62, 92, 105;
  --hair:     #e6ded0;
  --hair-dark: rgba(251, 249, 245, .16);

  --display-f: "Sora", "Jost", sans-serif;
  --body-f:    "DM Sans", "Inter", sans-serif;

  --t-display: clamp(3rem, 1.1rem + 7vw, 7.75rem);
  --t-h2:      clamp(2.25rem, 1.3rem + 3.8vw, 4.25rem);
  --t-h3:      clamp(1.375rem, .95rem + 2.2vw, 2.25rem);
  --t-body:    clamp(.9375rem, .89rem + .22vw, 1.0625rem);
  --t-meta:    .75rem;

  --s1: 8px;  --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px;
  --s6: 48px; --s7: 64px; --s8: 96px;
  --section-y: clamp(88px, 8.5vw, 148px);

  --gutter: clamp(20px, 5vw, 80px);
  --measure: 1440px;

  --r-sm:   14px;
  --r-md:   22px;
  --r-lg:   30px;
  --r-pill: 999px;

  --shadow-soft: 0 14px 40px -18px rgba(var(--charcoal-rgb), .28);
  --shadow-1:    0 30px 80px -24px rgba(var(--charcoal-rgb), .38);
  --glow-gold:   0 20px 50px -18px rgba(var(--gold-rgb), .5);

  --glass-lt:   rgba(255, 255, 255, .68);
  --glass-dk:   rgba(var(--charcoal-rgb), .46);
  --glass-br:   rgba(255, 255, 255, .5);
  --glass-br-dk: rgba(255, 255, 255, .16);

  --e-mask:  cubic-bezier(.76, 0, .24, 1);
  --e-out:   cubic-bezier(.16, 1, .3, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --t-ui:    360ms;
  --t-rev:   900ms;
  --t-scene: 1300ms;

  position: relative;
  font-family: var(--body-f);
  color: var(--charcoal);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.abt :where(*, *::before, *::after) { box-sizing: border-box; }
.abt :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote) { margin: 0; }
.abt :where(ul, ol) { list-style: none; padding: 0; }
.abt img { display: block; max-width: 100%; }
.abt a { text-decoration: none; color: inherit; }

/* legacy-theme neutralisation, same rationale as css/tideline.css:95 */
.abt :where(span, div, li, b, i, strong, em) { color: inherit; }
.abt :where(a):hover, .abt :where(a):focus { color: inherit; }
.abt-section:nth-child(even) { background: inherit; }

.abt-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ---------------------------------------------------------------------------
   1. GRID + TYPE PRIMITIVES
   --------------------------------------------------------------------------- */

.abt-section { padding-block: var(--section-y); position: relative; overflow: clip; }
.abt-wrap {
  position: relative; z-index: 1;
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.abt-meta {
  display: block;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.abt-h2 { font-family: var(--display-f); font-size: var(--t-h2); font-weight: 300; line-height: .98; letter-spacing: -.035em; color: var(--charcoal); }
.abt-h2 em { font-style: normal; font-weight: 600; }
.abt-body { font-size: var(--t-body); line-height: 1.65; color: var(--ink-2); max-width: 60ch; }

/* short gold accent bar rather than a full hairline -- the section-opening
   flourish for this pass */
.abt-rule {
  display: block; width: 56px; height: 3px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold), rgba(var(--gold-rgb), .35));
  transform: scaleX(0); transform-origin: left; margin-bottom: var(--s6);
}
html:not(.abt-on) .abt-rule { transform: none; }

html.abt-on .abt [data-abt-mask] { clip-path: inset(100% 0 0 0); }
html.abt-on .abt [data-abt-reveal] { opacity: 0; transform: translateY(28px); }

.abt-more {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.abt-more svg { width: 18px; height: 18px; transition: transform var(--t-ui) var(--e-out); }

@media (max-width: 767px) { .abt { --gutter: 20px; } }

/* =========================================================================
   2. HERO  --  full-bleed photograph, giant two-tone wordmark, the
   homepage's own WebGL coastal shimmer, a rounded floating photo card with
   pointer-tilt (TL.tilt) and a glass "fact pill" -- the deliberate echo of
   the homepage's luxevo-hero (bold Sora wordmark, gold accent, rounded
   image card, floating pill bar) without duplicating its white/rounded-card
   layout: here everything sits on a graded cinematic photograph.
   ========================================================================= */

.abt-hero {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--page);
  padding: 0; /* the legacy theme pads every <section> 60px on mobile */
}
/* one soft warm wash behind the photos -- the only ambient colour */
.abt-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -8vw; top: 6%; width: 62vw; height: 100%;
  background: radial-gradient(closest-side, rgba(var(--gold-rgb), .14), rgba(233, 224, 210, .35) 55%, transparent 100%);
}

.abt-hero-inner {
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(32px, 4vw, 56px) clamp(36px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 104px);
}

/* ---- copy ---- */
.abt-hero-meta {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s4);
}
.abt-hero-meta::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--gold); }

.abt-hero-title {
  font-family: var(--display-f); font-weight: 300;
  font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5.4rem);
  line-height: 1.02; letter-spacing: -.035em; color: var(--charcoal);
}
.abt-hero-line { display: block; }
.abt-hero-title em { font-style: normal; font-weight: 700; color: var(--gold); }

.abt-hero-sub {
  margin-top: var(--s5);
  max-width: 46ch;
  font-size: clamp(1rem, .94rem + .3vw, 1.15rem);
  line-height: 1.7; color: var(--ink-2);
}

.abt-hero-actions {
  margin-top: var(--s6);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4) var(--s5);
}
.abt-hero-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 52px; padding: 0 26px 0 30px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, #edaa1f 0%, var(--gold) 100%);
  color: #fff !important;
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  box-shadow: var(--glow-gold);
  transition: transform var(--t-ui) var(--e-out), box-shadow var(--t-ui) var(--e-out);
}
.abt-hero-btn svg { width: 18px; height: 18px; transition: transform var(--t-ui) var(--e-out); }
.abt-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -16px rgba(var(--gold-rgb), .65); }
.abt-hero-btn:hover svg { transform: translateX(4px); }

.abt-hero-call {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px;
  font-size: .95rem; font-weight: 500; color: var(--charcoal);
}
.abt-hero-call i {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--hair); color: var(--gold); font-size: .85rem;
  transition: background var(--t-ui) var(--e-out), color var(--t-ui) var(--e-out), border-color var(--t-ui) var(--e-out);
}
.abt-hero-call:hover i { background: var(--gold); border-color: var(--gold); color: #fff; }

.abt-hero-btn:focus-visible, .abt-hero-call:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* ---- layered photo pair ---- */
.abt-hero-media {
  position: relative;
  aspect-ratio: 5 / 6;
  /* header (88) + paddings + facts strip (~96) still fit one screen */
  max-height: min(620px, calc(100svh - 380px));
  min-height: 400px;
  margin-left: auto; width: 100%;
}
/* never clipped: a clip-path (from a reveal) would cut these rounded
   shapes' soft shadows into grey rectangles at the corners */
.abt .abt-hero-main, .abt .abt-hero-inset, .abt .abt-hero-badge,
.abt .abt-story-frames, .abt .abt-stats-band, .abt .abt-card-inner,
.abt .abt-reach-panel { clip-path: none !important; }

.abt-hero-main,
.abt-hero-inset { position: absolute; margin: 0; overflow: hidden; background: var(--sand); }
.abt-hero-main img,
.abt-hero-inset img { width: 100%; height: 100%; object-fit: cover; }

.abt-hero-main {
  inset: 0 0 12% 14%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.abt-hero-main img { object-position: 58% 50%; }

.abt-hero-inset {
  left: 0; bottom: 0;
  width: 46%; aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  border: 6px solid var(--page);
  box-shadow: var(--shadow-1);
}
.abt-hero-inset img { object-position: 55% 60%; }

.abt-hero-badge {
  position: absolute; right: clamp(16px, 2vw, 28px); bottom: calc(12% - 44px);
  width: 124px; height: 124px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--charcoal); color: var(--ivory);
  box-shadow: var(--shadow-1);
}
.abt-hero-badge b { font-family: var(--display-f); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--gold); letter-spacing: -.03em; }
.abt-hero-badge span { margin-top: 6px; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; color: rgba(251, 249, 245, .78); }

/* ---- facts strip ---- */
.abt-hero-facts {
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.abt-hero-facts li {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-top: 1px solid var(--hair);
  font-size: .95rem; font-weight: 500; color: var(--charcoal);
}
.abt-hero-facts li + li { padding-left: var(--s4); border-left: 1px solid var(--hair); }
.abt-hero-facts i {
  flex-shrink: 0; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(var(--gold-rgb), .12); color: var(--gold); font-size: .95rem;
}

/* ---- small desktop: two columns are narrow, keep the title to 3 lines ---- */
@media (min-width: 992px) and (max-width: 1199px) {
  .abt-hero-inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 48px; }
  .abt-hero-title { font-size: 3.35rem; }
}

/* ---- tablet: stack, photos first-class but shorter ---- */
@media (max-width: 991px) {
  .abt-hero-inner { grid-template-columns: 1fr; gap: var(--s7); }
  .abt-hero-media { aspect-ratio: 4 / 3; max-height: none; min-height: 0; max-width: 680px; margin-inline: auto; }
  .abt-hero::before { width: 100vw; right: -30vw; top: 30%; height: 70%; }
  .abt-hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abt-hero-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ---- phone ---- */
@media (max-width: 575px) {
  .abt-hero-inner { padding-top: 28px; gap: var(--s6); }
  .abt-hero-title { font-size: clamp(2.2rem, 1.2rem + 5vw, 2.8rem); }
  .abt-hero-sub { margin-top: var(--s4); }
  .abt-hero-actions { margin-top: var(--s5); }
  .abt-hero-media { aspect-ratio: 1 / 1; }
  .abt-hero-inset { border-width: 4px; width: 44%; }
  .abt-hero-badge { width: 96px; height: 96px; right: 10px; bottom: calc(12% - 36px); }
  .abt-hero-badge b { font-size: 1.8rem; }
  .abt-hero-badge span { font-size: .55rem; }
  .abt-hero-facts li { font-size: .85rem; gap: var(--s2); padding-right: var(--s2); }
  .abt-hero-facts li + li { padding-left: var(--s3); }
  .abt-hero-facts li:nth-child(3) { padding-left: 0; }
  .abt-hero-facts i { width: 34px; height: 34px; font-size: .8rem; }
}

/* Gallery-inspired coverflow treatment for the About hero. The page keeps
   its own `.abt-` namespace and story-specific imagery. */
.abt-hero {
  isolation: isolate;
  padding: clamp(30px, 4vw, 50px) 0 clamp(60px, 6vw, 100px);
  overflow: hidden;
  text-align: center;
}
.abt-hero::before { display: none; }
/* Clear the fixed 70px mobile header (see css/gallery-cinematic.css). */
@media (max-width: 991px) {
  .abt-hero { padding-top: calc(70px + clamp(20px, 4vw, 40px)); }
}
.abt-brand-text {
  margin: 0 auto clamp(24px, 4vw, 44px);
  padding: 16px 0 14px;
  font-family: var(--display-f);
  font-size: clamp(48px, 10.25vw, 140px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -2.5px;
  color: var(--charcoal);
  white-space: nowrap;
  user-select: none;
}
.abt-brand-text span { color: var(--gold); }
.abt-stack {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1400px;
  height: clamp(320px, 55vh, 600px);
  margin: 0 auto;
  perspective: 1200px;
}
.abt-hero-card {
  position: absolute;
  width: clamp(250px, 48vw, 780px);
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--sand);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity 1.2s ease, box-shadow 1.2s ease;
  will-change: transform, opacity;
}
.abt-hero-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform .8s var(--e-out); }
.abt-hero-card.is-center { z-index: 3; transform: translateX(0) scale(1) translateZ(0); opacity: 1; box-shadow: 0 30px 60px rgba(0, 0, 0, .15); }
.abt-hero-card.is-left { z-index: 2; transform: translateX(-55%) scale(.8) translateZ(-100px) rotateY(12deg); opacity: .5; }
.abt-hero-card.is-right { z-index: 2; transform: translateX(55%) scale(.8) translateZ(-100px) rotateY(-12deg); opacity: .5; }
.abt-hero-card.is-hidden { z-index: 1; transform: translateX(0) scale(.5) translateZ(-300px); opacity: 0; pointer-events: none; }
.abt-hero-card.is-center:hover img { transform: scale(1.03); }
.abt-hero-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.abt-hero-facts { margin-top: clamp(32px, 4vw, 56px); padding-bottom: 0; }

@media (max-width: 767px) {
  .abt-brand-text { font-size: clamp(34px, 8.5vw, 54px); letter-spacing: -1.5px; }
  .abt-stack { height: 350px; perspective: 800px; }
  .abt-hero-card { width: 70vw; }
  .abt-hero-card.is-left { transform: translateX(-40%) scale(.85) translateZ(-80px) rotateY(10deg); }
  .abt-hero-card.is-right { transform: translateX(40%) scale(.85) translateZ(-80px) rotateY(-10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .abt-hero-card, .abt-hero-card img { transition: none; }
}

/* classnames here are `.tl-` NOT `.abt-`: TL.startGL / GLSurface (both in
   js/tideline-core.js, js/tideline-gl.js) hardcode them -- same technique
   as the homepage's Bakkhali panorama shimmer, literally the same class. */
.tl-gl-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 200ms linear; }
.tl-gl-ready > .tl-gl-canvas { opacity: 1; }

/* =========================================================================
   3. STORY  --  "Sticky photo, scrolling story". Desktop: the photo column
   is position:sticky while the chapters scroll past; the active chapter is
   charcoal, the rest sand ink (colour, never opacity) and the photo
   crossfades to match. Below 992px it is a plain stack with one photo per
   chapter. Without JS all chapters read at full contrast.
   ========================================================================= */

.abt-story { background: var(--page); }

.abt-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}

/* ---- the pinned photo ---- */
.abt-story-visual {
  position: sticky;
  top: 112px; /* clears the fixed header (88px) with breathing room */
}
.abt-story-frames {
  position: relative;
  height: min(640px, calc(100vh - 160px));
  min-height: 460px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sand);
  box-shadow: var(--shadow-1);
}
.abt-story-frame {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transition: opacity .9s var(--e-out);
}
.abt-story-frame.is-active { opacity: 1; }
.abt-story-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.6s var(--e-out);
}
.abt-story-frame.is-active img { transform: scale(1); }
/* a soft fade at the foot so the caption reads on any photo */
.abt-story-frame::after {
  content: ""; position: absolute; inset: 55% 0 0 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--charcoal-rgb), .55));
}
.abt-story-frame figcaption {
  position: absolute; left: var(--s5); right: var(--s5); bottom: var(--s5); z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4);
  color: var(--ivory);
}
.abt-story-frame figcaption b {
  font-family: var(--display-f); font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem); line-height: 1; letter-spacing: -.03em;
}
.abt-story-frame figcaption span {
  font-size: var(--t-meta); font-weight: 600; letter-spacing: .16em;
  color: rgba(251, 249, 245, .8);
}

/* ---- the scrolling copy ---- */
.abt-story-meta { display: inline-flex; align-items: center; gap: var(--s2); }
.abt-story-meta::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--gold); }
.abt-story-head .abt-h2 { margin-top: var(--s4); max-width: 13ch; }
.abt-story-head .abt-h2 em { color: var(--gold); }
.abt-story-head .abt-body { margin-top: var(--s4); max-width: 42ch; }

.abt-story-list { margin-top: clamp(40px, 5vw, 64px); }
.abt-story-ch {
  /* tall enough that each chapter holds the photo for a beat of scrolling */
  min-height: 44vh;
  padding: var(--s6) 0;
  border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--charcoal);
  transition: color var(--t-ui) var(--e-out);
}
.abt-story-ch:last-child { border-bottom: 1px solid var(--hair); }
.abt-story-ch-photo { display: none; }

.abt-story-ch-year {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
  transition: color var(--t-ui) var(--e-out);
}
.abt-story-ch-year::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  transition: transform var(--t-ui) var(--e-out);
}
.abt-story-ch h3 {
  margin-top: var(--s3);
  font-family: var(--display-f); font-weight: 400;
  font-size: var(--t-h3); line-height: 1.12; letter-spacing: -.025em;
  color: inherit;
}
.abt-story-ch p {
  margin-top: var(--s3); max-width: 46ch;
  font-size: var(--t-body); line-height: 1.75; color: var(--ink-2);
  transition: color var(--t-ui) var(--e-out);
}

/* motion on: inactive chapters recede to sand ink */
html.abt-on .abt-story-ch:not(.is-active),
html.abt-on .abt-story-ch:not(.is-active) p,
html.abt-on .abt-story-ch:not(.is-active) .abt-story-ch-year { color: var(--sand-ink); }
html.abt-on .abt-story-ch:not(.is-active) .abt-story-ch-year::before { transform: scale(.5); }

/* ---- motto ---- */
.abt-story-quote { margin: clamp(48px, 6vw, 72px) 0 0; }
/* neutralise the theme's global blockquote (red box, italic, icon, bar) */
.abt-story-quote blockquote {
  margin: 0; padding: 0 0 0 var(--s5); background: none; border: 0;
  border-left: 2px solid var(--gold);
  font-style: normal; color: inherit; line-height: inherit; position: static;
}
.abt-story-quote blockquote::before,
.abt-story-quote blockquote::after { content: none; }
.abt-story-quote p {
  font-family: var(--display-f); font-weight: 300;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: 1.4; letter-spacing: -.015em;
  color: var(--charcoal);
}
.abt-story-quote figcaption {
  margin-top: var(--s3); padding-left: var(--s5);
  font-size: var(--t-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}

/* ---- tablet & phone: plain stack, a photo per chapter ---- */
@media (max-width: 991px) {
  .abt-story-grid { grid-template-columns: 1fr; }
  .abt-story-visual { display: none; }
  .abt-story-ch { min-height: 0; padding: var(--s6) 0; }
  .abt-story-ch-photo {
    display: block; margin: 0 0 var(--s4);
    aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden;
    background: var(--sand); box-shadow: var(--shadow-soft);
  }
  .abt-story-ch-photo img { width: 100%; height: 100%; object-fit: cover; }
  /* no pinned photo to follow on small screens -- every chapter stays full contrast */
  html.abt-on .abt-story-ch:not(.is-active),
  html.abt-on .abt-story-ch:not(.is-active) .abt-story-ch-year { color: var(--charcoal); }
  html.abt-on .abt-story-ch:not(.is-active) .abt-story-ch-year { color: var(--gold); }
  html.abt-on .abt-story-ch:not(.is-active) p { color: var(--ink-2); }
  html.abt-on .abt-story-ch:not(.is-active) .abt-story-ch-year::before { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .abt-story-frame, .abt-story-frame img { transition: none; }
}

/* =========================================================================
   4. NUMBERS  --  "Night band". One wide rounded night photograph of the
   hotel; a left-hand grade carries the heading and the four figures run
   along its foot, split by hairlines. Phone: photo on top, figures in a
   2x2 grid on charcoal beneath, inside the same rounded frame.
   ========================================================================= */

.abt-stats { background: var(--page); padding-top: 0; }

.abt-stats-band {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(520px, 44vw, 640px);
  border-radius: var(--r-lg);
  background: var(--charcoal); color: var(--ivory);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(40px, 5vw, 72px);
}
.abt-stats-photo { position: absolute; inset: 0; z-index: -2; }
.abt-stats-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
/* left grade for the heading, foot grade for the figures */
.abt-stats-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 12, 14, .88) 0%, rgba(10, 12, 14, .62) 40%, rgba(10, 12, 14, 0) 72%),
    linear-gradient(0deg, rgba(10, 12, 14, .88) 0%, rgba(10, 12, 14, .35) 32%, rgba(10, 12, 14, 0) 55%);
}

.abt-stats-head { max-width: 520px; }
.abt-stats-meta { display: inline-flex; align-items: center; gap: var(--s2); }
.abt-stats-meta::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--gold); }
.abt-stats-head .abt-h2 { margin-top: var(--s4); color: var(--ivory); }
.abt-stats-head .abt-h2 em { color: var(--gold); }
.abt-stats-head p {
  margin-top: var(--s4); max-width: 36ch;
  font-size: var(--t-body); line-height: 1.7; color: rgba(251, 249, 245, .78);
}

.abt-stats-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--s7);
  border-top: 1px solid rgba(251, 249, 245, .2);
}
.abt-stats-list li { padding: var(--s5) var(--s4) 0; }
.abt-stats-list li:first-child { padding-left: 0; }
.abt-stats-list li + li { border-left: 1px solid rgba(251, 249, 245, .2); }

.abt-stats-fig {
  display: flex; align-items: flex-start; gap: 2px;
  font-family: var(--display-f); font-weight: 300;
  font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem); line-height: 1; letter-spacing: -.035em;
  color: var(--ivory); font-variant-numeric: tabular-nums;
}
.abt-stats-fig b { font-weight: inherit; }
.abt-stats-fig sup { top: 0; font-size: .45em; line-height: 1; color: var(--gold); margin-top: .12em; }
.abt-stats-label {
  display: block; margin-top: var(--s3);
  font-size: var(--t-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(251, 249, 245, .72);
}

/* tablet: figures 2x2 over the photo */
@media (max-width: 991px) {
  .abt-stats-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abt-stats-list li { padding: var(--s4) var(--s4) var(--s4) 0; }
  .abt-stats-list li + li { border-left: 0; }
  .abt-stats-list li:nth-child(even) { padding-left: var(--s4); border-left: 1px solid rgba(251, 249, 245, .2); }
  .abt-stats-list li:nth-child(n+3) { border-top: 1px solid rgba(251, 249, 245, .2); }
}

/* phone: photo becomes a top strip, figures sit on charcoal beneath */
@media (max-width: 575px) {
  .abt-stats-band { min-height: 0; padding: 0; border-radius: var(--r-md); }
  .abt-stats-photo { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; }
  .abt-stats-band::before { content: none; }
  .abt-stats-photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, var(--charcoal) 0%, rgba(20, 23, 26, 0) 55%);
  }
  .abt-stats-head { margin-top: -64px; position: relative; padding: 0 var(--s4); }
  .abt-stats-list { margin: var(--s5) var(--s4) var(--s4); }
  .abt-stats-fig { font-size: 2.6rem; }
  .abt-stats-label { font-size: .66rem; letter-spacing: .12em; }
}

/* =========================================================================
   5. WHY AMARABATI  --  "The Deck". Five wide cards, each position:sticky a
   little lower than the last, so each new card slides up and settles on
   top of the previous one. Earlier cards ease back (scale, JS, desktop
   only). Every card has its own ground so the stack reads as layers.
   Below 992px: a plain column of cards, nothing sticky.
   ========================================================================= */

.abt-why { background: var(--page); padding-top: calc(var(--section-y) * .6); }

.abt-why-head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end; gap: var(--s5) clamp(32px, 6vw, 96px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.abt-why-meta { display: inline-flex; align-items: center; gap: var(--s2); }
.abt-why-meta::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--gold); }
.abt-why-head .abt-h2 { margin-top: var(--s4); max-width: 15ch; }
.abt-why-head .abt-h2 em { color: var(--gold); }
.abt-why-head .abt-body { max-width: 44ch; }

/* ---- the deck ---- */
.abt-deck { display: flex; flex-direction: column; gap: clamp(24px, 4vh, 48px); }
.abt-card {
  --stack: 0;
  position: sticky;
  top: calc(112px + var(--stack) * 16px);
  transform-origin: 50% 0;
  will-change: transform;
  backface-visibility: hidden;
  --shade: 0;
}
/* covered cards dim as the next one slides over (JS drives --shade 0 -> 1) */
.abt-card-inner { position: relative; }
.abt-card-inner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: rgba(10, 12, 14, .28); opacity: var(--shade);
}
.abt-card--1 { --stack: 0; }
.abt-card--2 { --stack: 1; }
.abt-card--3 { --stack: 2; }
.abt-card--4 { --stack: 3; }
.abt-card--5 { --stack: 4; }

.abt-card-inner {
  --card-bg: #ffffff; --card-ink: var(--charcoal); --card-soft: var(--ink-2); --card-line: rgba(var(--charcoal-rgb), .2);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  height: min(540px, calc(100vh - 200px)); min-height: 420px;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--card-bg); color: var(--card-ink);
  box-shadow: 0 -10px 40px -24px rgba(var(--charcoal-rgb), .35), var(--shadow-soft);
  border: 1px solid rgba(var(--charcoal-rgb), .06);
}
.abt-card--2 .abt-card-inner { --card-bg: #f3ecdf; }
.abt-card--3 .abt-card-inner { --card-bg: var(--charcoal); --card-ink: var(--ivory); --card-soft: rgba(251, 249, 245, .74); --card-line: rgba(251, 249, 245, .18); }
.abt-card--4 .abt-card-inner { --card-bg: #e9dcc6; }
.abt-card--5 .abt-card-inner { --card-bg: var(--coast); --card-ink: var(--ivory); --card-soft: rgba(251, 249, 245, .8); --card-line: rgba(251, 249, 245, .22); }

.abt-card-text {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(32px, 4vw, 56px);
}
.abt-card-num {
  position: absolute; top: clamp(24px, 3vw, 40px); left: clamp(32px, 4vw, 56px);
  font-family: var(--display-f); font-weight: 700;
  font-size: clamp(4.5rem, 3rem + 4vw, 7.5rem); line-height: .85; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px var(--gold);
  user-select: none;
}
.abt-card-kicker {
  font-size: var(--t-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.abt-card--5 .abt-card-kicker, .abt-card--5 .abt-card-num { color: #f0cf8e; -webkit-text-stroke-color: #f0cf8e; }
.abt-card--5 .abt-card-num { color: transparent; }
.abt-card-text h3 {
  margin-top: var(--s3);
  font-family: var(--display-f); font-weight: 400;
  font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.75rem); line-height: 1.08; letter-spacing: -.03em;
  color: var(--card-ink);
}
.abt-card-text p {
  margin-top: var(--s3); max-width: 40ch;
  font-size: var(--t-body); line-height: 1.7; color: var(--card-soft);
}
.abt-card-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.abt-card-tags li {
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--card-line);
  font-size: .8rem; font-weight: 500; color: var(--card-ink);
}

.abt-card-photo { margin: 0; position: relative; overflow: hidden; }
.abt-card-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- tablet & phone: plain column, photo on top ---- */
@media (max-width: 991px) {
  .abt-why-head { grid-template-columns: 1fr; align-items: start; }
  .abt-card { position: relative; top: auto; will-change: auto; }
  .abt-card-inner { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .abt-card-photo { order: -1; aspect-ratio: 16 / 10; }
  .abt-card-num { position: static; margin-bottom: var(--s3); font-size: 3.5rem; }
}
@media (max-width: 575px) {
  .abt-card-inner { border-radius: var(--r-md); }
  .abt-card-text { padding: var(--s5) var(--s4); }
  .abt-card-num { font-size: 3rem; }
}

/* =========================================================================
   6. HOW TO REACH  --  "Route line". A wide, faintly dotted map-like panel
   holding a journey diagram: stops joined by a gold line that draws itself
   (.is-drawn) on entry and on every tab switch. Without JS both routes show
   fully drawn. Below 900px the route runs vertically.
   ========================================================================= */

.abt-reach { background: var(--page); }

.abt-reach-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s5); margin-bottom: clamp(32px, 4vw, 48px);
}
.abt-reach-meta { display: inline-flex; align-items: center; gap: var(--s2); }
.abt-reach-meta::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--gold); }
.abt-reach-head .abt-h2 { margin-top: var(--s4); }
.abt-reach-head .abt-h2 em { color: var(--gold); }

/* ---- the switch ---- */
.abt-reach-switch {
  display: inline-flex; padding: 5px; gap: 4px;
  border-radius: var(--r-pill); background: #efe7da;
}
.abt-reach-switch[hidden] { display: none; }
.abt-reach-switch button {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-2);
  font: 600 .9rem/1 var(--body-f); cursor: pointer;
  transition: background var(--t-ui) var(--e-out), color var(--t-ui) var(--e-out), box-shadow var(--t-ui) var(--e-out);
}
.abt-reach-switch button i { color: var(--gold); font-size: .9em; }
.abt-reach-switch button[aria-selected="true"] { background: var(--charcoal); color: var(--ivory); box-shadow: var(--shadow-soft); }
.abt-reach-switch button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- the panel ---- */
.abt-reach-panel {
  position: relative;
  padding: clamp(28px, 5vw, 72px) clamp(24px, 5vw, 72px) clamp(24px, 3vw, 40px);
  border-radius: var(--r-lg);
  background-color: #fff;
  background-image: radial-gradient(rgba(var(--gold-rgb), .22) 1px, transparent 1.4px);
  background-size: 22px 22px;
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-soft);
}
.abt-route-wrap[hidden] { display: none; }
.abt-route-wrap + .abt-route-wrap { margin-top: var(--s7); }
.abt-reach-panel.is-tabbed .abt-route-wrap + .abt-route-wrap { margin-top: 0; }
.abt-route-title {
  margin-bottom: var(--s5);
  font-size: var(--t-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.abt-reach-panel.is-tabbed .abt-route-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- the route (horizontal) ----
   Every item is a 4-row grid: [mode label] [node / line] [name / time] [sub]
   so the line always sits exactly on the node centres. */
.abt-route {
  --stop-w: clamp(140px, 14vw, 200px);
  --node: 28px;
  display: grid; align-items: start;
}
.abt-route--2 { grid-template-columns: var(--stop-w) minmax(0, 1fr) var(--stop-w); }
.abt-route--3 { grid-template-columns: var(--stop-w) minmax(0, 1fr) var(--stop-w) minmax(0, 1fr) var(--stop-w); }

.abt-route > li {
  display: grid; grid-template-rows: 48px var(--node) auto auto;
  justify-items: center; text-align: center; min-width: 0;
}

.abt-route-stop { position: relative; z-index: 1; }
.abt-route-node {
  grid-row: 2; position: relative;
  width: var(--node); height: var(--node); border-radius: 50%;
  background: #fff; border: 2px solid var(--gold);
  display: grid; place-items: center;
  transition: transform .5s var(--e-out);
}
.abt-route-node::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.abt-route-stop--end .abt-route-node {
  width: 48px; height: 48px; margin-top: -10px; border: 0;
  background: linear-gradient(135deg, #edaa1f, var(--gold)); color: #fff;
  box-shadow: 0 0 0 8px rgba(var(--gold-rgb), .18), var(--glow-gold);
}
.abt-route-stop--end .abt-route-node::after { content: none; }
.abt-route-stop--end .abt-route-node i { font-size: 1.1rem; }

.abt-route-stop b {
  grid-row: 3; margin-top: var(--s4);
  font-family: var(--display-f); font-weight: 500;
  font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); letter-spacing: -.02em; line-height: 1.15; color: var(--charcoal);
}
.abt-route-stop > span:last-child { grid-row: 4; margin-top: 4px; font-size: .88rem; color: var(--ink-2); }

.abt-route-leg { position: relative; z-index: 0; }
.abt-route-mode {
  grid-row: 1; align-self: end; margin-bottom: var(--s3);
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: .92rem; font-weight: 600; color: var(--charcoal); white-space: nowrap;
}
.abt-route-mode i { color: var(--gold); }
.abt-route-line {
  grid-row: 2; align-self: center; justify-self: stretch;
  position: relative; height: 3px; border-radius: 3px;
  /* reach from node edge to node edge, through the half-width stop columns */
  margin-inline: calc(var(--stop-w) / -2 + var(--node) / 2);
  background-image: repeating-linear-gradient(90deg, var(--hair) 0 8px, transparent 8px 14px);
}
.abt-route-line i {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), #edaa1f);
  transform-origin: left center; transform: scaleX(0);
  transition: transform .8s var(--e-inout);
}
.abt-route-time {
  grid-row: 3; margin-top: var(--s3);
  padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(var(--gold-rgb), .12);
  font-size: .8rem; font-weight: 600; color: #8a6a2c; white-space: nowrap;
}

/* drawing sequence: stop, leg, stop, leg, stop */
.abt-route-stop .abt-route-node { transform: scale(.4); }
.is-drawn .abt-route-node { transform: none; }
.is-drawn .abt-route-line i { transform: none; }
.is-drawn .abt-route > li:nth-child(2) .abt-route-line i { transition-delay: .1s; }
.is-drawn .abt-route > li:nth-child(3) .abt-route-node { transition-delay: .8s; }
.is-drawn .abt-route > li:nth-child(4) .abt-route-line i { transition-delay: .9s; }
.is-drawn .abt-route > li:nth-child(5) .abt-route-node { transition-delay: 1.6s; }

/* ---- tip + foot ---- */
.abt-route-tip {
  display: flex; gap: var(--s3); align-items: flex-start;
  margin-top: clamp(32px, 4vw, 48px); padding-top: var(--s4);
  border-top: 1px solid var(--hair);
  font-size: .95rem; line-height: 1.65; color: var(--ink-2);
}
.abt-route-tip span { max-width: 80ch; }
.abt-route-tip i { color: var(--gold); margin-top: 4px; }

.abt-reach-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5);
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--hair);
}
.abt-reach-foot address { margin: 0; font-style: normal; font-size: .85rem; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.abt-reach-dir {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px;
  font-size: .95rem; font-weight: 600; color: var(--charcoal) !important;
  border-bottom: 1px solid var(--gold);
}
.abt-reach-dir svg { width: 16px; height: 16px; color: var(--gold); transition: transform var(--t-ui) var(--e-out); }
.abt-reach-dir:hover svg { transform: translate(2px, -2px); }
.abt-reach-dir:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* ---- vertical route below 900px ---- */
@media (max-width: 899px) {
  .abt-route, .abt-route--2, .abt-route--3 { display: flex; flex-direction: column; }
  .abt-route > li {
    grid-template-rows: none; grid-template-columns: 48px minmax(0, 1fr);
    justify-items: start; text-align: left; column-gap: var(--s4);
  }
  .abt-route-stop .abt-route-node { grid-row: 1 / span 2; grid-column: 1; justify-self: center; }
  .abt-route-stop--end .abt-route-node { margin-top: -6px; }
  .abt-route-stop b { grid-row: 1; grid-column: 2; margin-top: 0; }
  .abt-route-stop > span:last-child { grid-row: 2; grid-column: 2; }

  .abt-route-leg { min-height: 96px; align-content: center; }
  .abt-route-line {
    grid-row: 1 / span 2; grid-column: 1; justify-self: center; align-self: stretch;
    width: 3px; height: auto; margin: -6px 0;
    background-image: repeating-linear-gradient(180deg, var(--hair) 0 8px, transparent 8px 14px);
  }
  .abt-route-line i { transform-origin: center top; transform: scaleY(0); }
  .is-drawn .abt-route-line i { transform: none; }
  .abt-route-mode { grid-row: 1; grid-column: 2; align-self: end; margin: var(--s4) 0 var(--s2); white-space: normal; }
  .abt-route-time { grid-row: 2; grid-column: 2; align-self: start; margin: 0 0 var(--s4); }
}
@media (max-width: 575px) {
  .abt-reach-switch { width: 100%; }
  .abt-reach-switch button { flex: 1; justify-content: center; padding: 0 12px; }
  .abt-reach-panel { border-radius: var(--r-md); }
}

@media (prefers-reduced-motion: reduce) {
  .abt-route-node, .abt-route-line i { transition: none !important; }
}

/* =========================================================================
   CURSOR -- reuses TL.cursor from js/tideline-core.js verbatim (the exact
   same cursor the homepage uses, not a lookalike). Classnames are `.tl-`
   because that module hardcodes them; literal colour fallbacks because the
   element is appended straight to <body>, outside `.abt`'s custom-property
   scope.
   ========================================================================= */
.tl-cursor {
  position: fixed; top: 0; left: 0; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border-radius: 50%; background: var(--gold, #ca9e4e); color: #fff;
  display: grid; place-items: center; pointer-events: none; z-index: 9998;
  opacity: 0; transform: scale(.3);
  transition: opacity 360ms ease, transform 360ms cubic-bezier(.16,1,.3,1);
  font-family: "DM Sans", "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.tl-cursor-label { color: #fff; }
.tl-cursor.is-on { opacity: 1; transform: scale(1); }
@media (hover: none), (pointer: coarse) { .tl-cursor { display: none !important; } }

@media (prefers-reduced-motion: reduce), (max-width: 991px) {
  .abt-hero-main img, .abt-hero-inset { transform: none !important; }
}