/* Bertch Capital — static site styles */

/* ABC Monument Grotesk — the typeface used on the original site.
   Regular = weight 300, Medium = weight 500 (matching the original @font-face). */
@font-face {
  font-family: "ABCMonumentGrotesk";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/ABCMonumentGrotesk-Regular.woff2") format("woff2"),
       url("fonts/ABCMonumentGrotesk-Regular.woff") format("woff");
}
@font-face {
  font-family: "ABCMonumentGrotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ABCMonumentGrotesk-Medium.woff2") format("woff2"),
       url("fonts/ABCMonumentGrotesk-Medium.woff") format("woff");
}

:root {
  --bg: #ffffff;  /* cream eliminated site-wide; to revert to cream set this back to #f7f6f2 */
  --bg-alt: #ffffff;
  --ink: #1b1d1a;
  --ink-soft: #4a4d47;
  --line: #e2e0d8;
  /* --green / --green-soft kept (saved) for possible future use */
  --green: #2f4a3c;
  --green-soft: #5c7163;
  --orange: #ff4800;        /* brand accent */
  --max: 1280px;
  --pad: clamp(20px, 5vw, 80px);
  --font: "ABCMonumentGrotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- Type scale (single source of truth for every font-size) ----
     Body/UI = fixed steps; Display = fluid steps (phone → desktop).
     Only the "Think Forward" footer marquee stays a deliberate one-off. */
  --text-xs:   13px;                    /* eyebrows, caps labels, fine print */
  --text-sm:   15px;                    /* captions, meta, small body */
  --text-base: 16px;                    /* default body */
  --text-md:   18px;                    /* lead paragraph, large body */
  --text-lg:   20px;                    /* subheads */
  --text-xl:   24px;                    /* card titles, small headings */
  --text-2xl:  30px;                    /* larger fixed headings */
  --display-xs:  clamp(20px, 2.3vw, 26px);
  --display-sm:  clamp(24px, 3.2vw, 34px);
  --display-md:  clamp(30px, 4.5vw, 48px);
  --display-lg:  clamp(40px, 7vw, 76px);
  --display-xl:  clamp(52px, 11vw, 110px);
  --display-2xl: clamp(60px, 15vw, 168px);
  --hero-mobile: 88px;   /* iPhone-only hero size — locked; fits About's "Strategic" with margin on all current iPhones */
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }   /* clamp the layout width to the screen so iOS can't leave the page wider than the viewport after a rotation (set on the ROOT so it propagates to the viewport and doesn't break position:sticky heroes) */

body {
  font-family: var(--font);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.38;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

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

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding: clamp(60px, 9vw, 140px) 0; }
.section--tight { padding: clamp(40px, 6vw, 90px) 0; }
.bg-alt { background: var(--bg-alt); }
.bg-green { background: var(--orange); color: #fff4ee; }

.eyebrow {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 22px;
}
.eyebrow .sl { color: var(--orange); }
.bg-green .eyebrow { color: #eef1ec; }

h1, h2, h3, h4 { font-weight: 300; line-height: 1.04; letter-spacing: -0.04em; }
h2.display { font-size: var(--display-lg); margin-bottom: 28px; line-height: 1.05; }
h3.display { font-size: var(--display-md); margin-bottom: 20px; line-height: 1.0; }

.lead { font-size: var(--text-lg); color: var(--ink-soft); max-width: 60ch; letter-spacing: -0.02em; }
p { margin-bottom: 1em; letter-spacing: -0.02em; }
p:last-child { margin-bottom: 0; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 246, 242, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.logo { font-weight: 500; letter-spacing: 0.16em; font-size: var(--text-sm); text-transform: uppercase; }
.logo span { color: var(--green-soft); }
.nav { display: flex; gap: clamp(16px, 2.4vw, 38px); align-items: center; }
.nav a { font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--ink-soft); transition: color .2s; }
.nav a:hover, .nav a.active { color: var(--ink); }
.nav-toggle { display: none; background: none; border: 0; font-size: var(--text-xl); cursor: pointer; line-height: 1; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: flex-end;
  color: #fff; overflow: hidden;
}
.hero img.hero-bg {
  position: absolute; left: 0; top: -4%; width: 100%; height: 104%;   /* BC-001: 4% hidden top overflow so the downward parallax can never expose the black hero bg (parallax travel ~3%, ~1% safety margin) */
  object-fit: cover; z-index: 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05) 55%, rgba(0,0,0,.15));
  z-index: 1;
}
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-bottom: min(clamp(140px, 11vw, 175px), 26vh); }   /* clear the fixed bottom nav pill (~88px) with room; vh cap avoids crowding on short/landscape screens */
.hero h1 {
  font-size: var(--display-2xl);
  font-weight: 300; line-height: 0.9; letter-spacing: -0.045em;
}
.hero h1 .stack { display: block; }
.hero .sub { margin-top: 24px; font-size: var(--text-lg); max-width: 46ch; color: rgba(255,255,255,.9); }
/* Portfolio hero: eyebrow + raised copy to match the About hero (Strategic Focus) — desktop only */
.hero.hero--portfolio .wrap { padding-bottom: clamp(190px,22vh,280px); }   /* same bottom padding as .about-hero__layer */
.hero--portfolio .eyebrow { color: rgba(255,255,255,.85); margin-bottom: 16px; }   /* white over the dark hero; same gap to the heading as About */
/* iPad portrait (601–900px): the hero text + subhead were crowding the fixed bottom nav pill — give more bottom room. */
@media (min-width: 601px) and (max-width: 900px) {
  .hero:not(.hero--portfolio) .wrap { padding-bottom: 220px; }   /* Home: +10px. Portfolio falls back to its clamp(190,22vh,280) so it matches the About page. */
}
/* iPad mini landscape (wide but short ≤~820px tall): the Home hero text was sitting too low and overlapping the nav pill. */
@media (min-width: 901px) and (max-width: 1199px) and (max-height: 820px) {
  .hero:not(.hero--portfolio) .wrap { padding-bottom: 200px; }
}

/* page hero (smaller, for inner pages) */
/* About hero: full-screen image that pans on scroll (GSAP pins it), then the video. */
.about-hero { position: relative; height: 100vh; background: #0b0e0b; color: #fff; }   /* JS adds .about-hero--pan to make it a tall native position:sticky scroll track */
.about-hero--pan { height: 180vh; }                                                   /* 100vh visible + 80vh of scroll to pan through (shorter = passes faster) */
.about-hero__sticky { position: relative; height: 100vh; overflow: hidden; }
.about-hero--pan .about-hero__sticky { position: sticky; top: 0; }
.about-hero__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.about-hero__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; will-change: transform; }
.about-hero--pan .about-hero__img { height: 200vh; }   /* taller than the window so it can pan */
.about-hero__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 55%); }
.about-hero__layer { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding-top: clamp(90px,14vh,150px); padding-bottom: clamp(190px,22vh,280px); }   /* raised ~2in: text sits higher in the hero */
.about-hero .eyebrow { color: rgba(255,255,255,.85); margin-bottom: 16px; }   /* tighter gap to the heading */
.about-hero h1 { color: #fff; font-size: var(--display-2xl); font-weight: 300; }
.about-hero .lead { color: rgba(255,255,255,.92); margin-top: 24px; max-width: 46ch; }
.about-video { width: 100%; line-height: 0; }
.about-video__vid { width: 100%; height: auto; display: block; }
@media (max-width: 760px) {
  .about-video { height: 100vh; }                 /* video fills the screen on phones */
  .about-video__vid { height: 100%; object-fit: cover; }
}
@media (max-width: 600px) {
  .about-hero__layer { padding-bottom: 180px; }   /* iPhone: match the Portfolio/Home hero gap above the nav pill */
  .about-hero .lead { max-width: 30ch; }
}

/* About "Sustainable practices": full-width background image with overlaid portrait. */
.susband { width: 100%; padding: clamp(36px,6vw,80px) 0 0; background: var(--bg-alt); }
.susband .eyebrow { margin-bottom: clamp(18px,3vw,34px); }
.susband__media { position: relative; width: 100%; }
.susband__bg { display: block; width: 100%; height: clamp(420px, 72vh, 880px); object-fit: cover; }
.susband__ov { position: absolute; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.susband__ov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.susband__ov--1 { width: clamp(160px, 22vw, 300px); aspect-ratio: 1333 / 2000; right: 9%; bottom: 16%; }

/* White text card overlaid on the upper-left of the sustainable image. */
.susband__card { position: absolute; top: clamp(20px, 4vw, 64px); left: clamp(20px, 4vw, 64px); z-index: 3; width: clamp(300px, 34vw, 560px); max-width: calc(100% - 40px); background: #fff; padding: clamp(28px, 3vw, 52px); border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,.18); }
.susband__star { display: block; color: var(--orange); font-size: var(--text-xl); line-height: 1; margin-bottom: clamp(16px, 2vw, 28px); }
.susband__card p { margin: 0 0 1em; }
.susband__btn { margin-top: clamp(12px, 2vw, 24px); }
@media (max-width: 600px) {
  /* Phones only: card and deer photo stack, both sitting ON the foggy background. */
  .susband__media { position: relative; display: block; padding: clamp(28px,7vw,48px) 0 clamp(48px, 11vw, 90px); }
  .susband__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .susband__card { position: relative; top: 0; left: 0; z-index: 3; width: auto; max-width: none; margin: 0 16px clamp(36px,9vw,64px); padding: 30px 24px; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.16); border-radius: 16px; }
  .susband__ov { position: relative; z-index: 2; display: block; margin: 0 16px; box-shadow: 0 24px 60px rgba(0,0,0,.28); border-radius: 16px; }
  .susband__ov--1 { width: auto; right: auto; bottom: auto; aspect-ratio: 1 / 1; }
}

/* Tablet portrait (iPad upright, ~601–900px): keep the desktop OVERLAY (card top-left, deer
   bottom-right over the full-bleed photo) but size both up to match the real site. */
@media (min-width: 601px) and (max-width: 900px) {
  .susband__card { width: clamp(320px, 50vw, 440px); border-radius: 20px; }   /* slightly bigger radius on iPad */
  .susband__ov { border-radius: 20px; }
  .susband__ov--1 { right: 6%; bottom: 14%; width: clamp(240px, 46vw, 360px); aspect-ratio: 4 / 5; }
}

/* Desktop: also cap the sustainable image height by WIDTH so it doesn't get too tall on a
   narrow-but-tall window. min() means wide windows keep the existing 72vh look untouched —
   the 60vw cap only bites once the window is narrow. */
@media (min-width: 901px) {
  .susband__bg { height: clamp(420px, min(72vh, 60vw), 880px); }
}

.page-hero { padding: clamp(70px, 12vw, 150px) 0 clamp(30px, 5vw, 60px); }
.page-hero h1 { font-size: var(--display-xl); font-weight: 300; }
.page-hero .lead { margin-top: 24px; }

/* ---------- two-column content ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.split--text-first { }
.stack-imgs { display: grid; gap: 16px; }
.stack-imgs.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- image grids ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.gallery--3 { grid-template-columns: repeat(3, 1fr); }
.gallery img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 2px; }
.figure-full img { width: 100%; border-radius: 2px; }

/* ---------- project cards ---------- */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
.card { display: block; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.10); }
.card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.card .body { padding: 22px 24px 26px; }
.card .body h3 { font-size: var(--text-xl); margin-bottom: 10px; }
.card .body p { color: var(--ink-soft); font-size: var(--text-sm); }
.card .more { margin-top: 14px; display: inline-block; font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }

/* Home "Our Projects" — square photo tiles, each with a morph pill (reuses .cta-pre__btn). */
.projsq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.projsq { position: relative; display: block; border-radius: 4px; overflow: hidden; }
.projsq__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.projsq__pill { position: absolute; left: 50%; bottom: clamp(18px, 2.2vw, 30px); transform: translateX(-50%); background: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.22); }
/* Resting state: the label was too close to the right edge (the arrow is collapsed, so only the base
   5px sits to its right). Give it more room. Hover keeps its own 26px padding (more specific). */
.projsq__pill.cta-pre__btn { padding-right: 24px; }
/* Morph the pill when hovering anywhere on the tile (desktop only). */
@media (hover: hover) {
  .projsq:hover .cta-pre__btn { background: var(--orange); color: #fff; padding: 0 26px; }
  .projsq:hover .cta-pre__circle { max-width: 0; opacity: 0; margin-right: 0; border-color: transparent; }
  .projsq:hover .cta-pre__label { color: #fff; }
  .projsq:hover .cta-pre__arrow { max-width: 26px; opacity: 1; margin-left: 14px; }
}
/* iPhone + iPad portrait: single column (Seaway first). iPad landscape + desktop stay 2-up. */
@media (max-width: 900px) {
  .projsq-grid { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 36px); }
  .projsq__pill { bottom: 22px; }   /* portrait: lift the pill ~4px off the photo bottom */
}
/* iPhone landscape (wide but short): keep TWO columns like iPad landscape, not the portrait single column. */
@media (max-width: 900px) and (max-height: 500px) {
  .projsq-grid { grid-template-columns: 1fr 1fr; gap: clamp(14px, 3vw, 28px); }
}
/* Equal eyebrow-to-photo gap across the home sections. Each section that ENDS in a photo is flush at the
   bottom (padding-bottom 0), so the gap down to the next section's eyebrow = that next section's base top
   padding only. Who We Are is already flush (.section:has(.wcarousel)); making Our Story and Our Projects
   flush too means the Who We Are, Our Projects, and Sustainability eyebrows all sit the SAME distance
   below the photo(s) above them, on every device (the base top padding scales by clamp). */
.os-section { padding-bottom: 0; }                 /* Our Story photo flush → Who We Are eyebrow gap */
.section:has(.projsq-grid) { padding-bottom: 0; }  /* Our Projects squares flush → Sustainability eyebrow gap */

/* ---------- stats / sustainability strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat figure { position: relative; border-radius: 3px; overflow: hidden; }
.stat img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.stat figcaption { margin-top: 12px; font-size: var(--text-sm); color: var(--ink-soft); }

/* ---- Sustainability accordion (JS adds .acc on .stats). Active on desktop, iPad landscape +
   portrait, and iPhone portrait — i.e. everywhere EXCEPT iPhone landscape (short screens). ---- */
@media (min-width: 901px), (min-height: 501px) {
  .stats.acc { display: block; }
  .stats.acc .stat { border-top: 1px solid var(--line); }
  .stats.acc .stat.is-open + .stat { border-top: none; }   /* open item's image separates it from the next row */
  .stats.acc .stat:last-child { border-bottom: 1px solid var(--line); }
  .stats.acc .stat__head { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 0; margin: 0; background: none; border: 0; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .stats.acc .stat__plus { flex: 0 0 auto; width: 31.5px; height: 31.5px; border-radius: 50%; border: 1px solid var(--line); position: relative; }   /* 0.75 × the 42px .cta-pre__circle ("Learn more") */
  .stats.acc .stat__plus::before, .stats.acc .stat__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--orange); }
  .stats.acc .stat__plus::before { width: 10.5px; height: 1.2px; transform: translate(-50%, -50%); }                      /* horizontal bar (always shown) */
  .stats.acc .stat__plus::after  { width: 1.2px; height: 10.5px; transform: translate(-50%, -50%); transition: transform .3s ease, opacity .3s ease; }  /* vertical bar → hidden when open = minus */
  .stats.acc .stat.is-open .stat__plus::after { opacity: 0; transform: translate(-50%, -50%) scaleY(0); }
  .stats.acc .stat__label { font-size: var(--text-md); line-height: 1.15; letter-spacing: -0.01em; color: #bdbdbd; transition: color .3s ease; }   /* 0.75 × the 24px "Sumner Ridge" card heading (.card h3) */
  .stats.acc .stat.is-open .stat__label { color: var(--ink); }
  .stats.acc .stat__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1); margin: 0; border-radius: 0; overflow: visible; }
  .stats.acc .stat.is-open .stat__panel { grid-template-rows: 1fr; }
  .stats.acc .stat__panelin { overflow: hidden; min-height: 0; }
  .stats.acc .stat__panel img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; margin-bottom: 22px; border-radius: 3px; }
}
/* iPad mini portrait: shorter open image (closer to the source photo's 2.3:1) so all four
   accordion items — first and last — stay fully on screen as you scroll through. */
@media (min-width: 601px) and (max-width: 900px) and (min-height: 501px) {
  .stats.acc .stat__panel img { aspect-ratio: 23 / 10; }
}
/* Sustainability layout: text + accordion stacked on phones/portrait, two columns (text left,
   accordion right) on desktop + iPad landscape — matches the real site. */
.sus-text { max-width: 820px; margin-bottom: 48px; }
@media (min-width: 901px) {
  .sus-layout { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 110px); align-items: start; }
  .sus-text { max-width: none; margin-bottom: 0; }
  .stats.acc .stat__panel img { aspect-ratio: 3 / 2; }
}

/* ---------- Bertch Timeline (pinned scrollytelling) ---------- */
.tl { position: relative; }
.tl__pin { padding: clamp(40px, 7vw, 90px) var(--pad); }
.tl__title { font-weight: 300; letter-spacing: -0.03em; line-height: 1; font-size: var(--display-lg); margin: 0 0 clamp(26px, 4vw, 46px); }
.tl__radio { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--orange); position: relative; }
.tl__radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--orange); }
.tl__yearrow { display: flex; align-items: center; gap: 14px; }
.tl__year { font-size: var(--display-md); color: var(--ink); font-weight: 300; line-height: 1; }
.tl__desc { color: #222; max-width: 42ch; margin-top: 16px; }

/* Default (mobile / no-JS): a clean stacked list of every entry; nav hidden. */
.tl__nav { display: none; }
.tl__item { display: block; padding: 30px 0; border-top: 1px solid var(--line); }
.tl__photo img { width: 100%; max-width: 320px; aspect-ratio: 1208 / 1620; object-fit: cover; border-radius: 3px; display: block; margin-top: 18px; filter: grayscale(1); }

/* Mobile timeline: a plain stacked list of years — no photos (matches the real site). */
@media (max-width: 899px) {
  .tl__photo { display: none; }
  .tl__item { position: relative; border-top: 0; padding: 0 0 clamp(30px, 7vw, 46px); }
  .tl__desc { margin-top: 12px; margin-left: 32px; }   /* indent the description to line up under the year (dot 18px + 14px gap) */

  /* Continuous vertical grey line linking the dots (matches the real site). */
  .tl__item::before { content: ""; position: absolute; left: 8.5px; top: 0; bottom: 0; width: 1px; background: var(--line); z-index: 0; }
  /* the first .tl__item isn't the parent's first child (title + nav precede it), so target by type.
     start/stop the line at the dot's centre, which sits at half the year's height (= display-md/2). */
  .tl__item:first-of-type::before { top: clamp(15px, 2.25vw, 24px); }                   /* begin at the first dot, not above it */
  .tl__item:last-of-type::before { bottom: auto; height: clamp(15px, 2.25vw, 24px); }   /* stop at the last dot, no dangling tail */
  .tl__yearrow { position: relative; z-index: 1; }               /* dot + year sit above the line */

  /* Scroll-focus dot (matches the real site): grey by default; as a year nears the focus line
     an orange ring grows from just-bigger-than-the-dot up to full, and the centre brightens
     grey -> orange. --f (0..1) is set per dot by the timeline IIFE on scroll; two adjacent
     dots cross-fade (the one leaving focus + the one entering). */
  .tl__radio { --f: 0; width: 18px; height: 18px; border: 0; overflow: visible;
    background: radial-gradient(circle at 50% 50%, #c4c4c4 0 4.5px, transparent 5px); }   /* 9px grey base dot */
  .tl__radio::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px solid var(--orange); transform-origin: 50% 50%;
    transform: scale(calc(0.65 + 0.35 * var(--f))); opacity: var(--f); }                  /* orange ring grows in */
  .tl__radio::after { content: ""; position: absolute; inset: auto; top: 50%; left: 50%;
    width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
    background: var(--orange); opacity: var(--f); }                                        /* orange centre brightens over the grey */
}

/* Desktop pinned mode (class added by JS): heading + active year (left), year nav (center),
   full-height photo flush to the right edge. Years cross-fade as you scroll. */
@media (min-width: 900px) {
  .tl--pinned .tl__pin { height: 100vh; padding: 0; }
  .tl--pinned .tl__title { position: absolute; top: 28%; left: var(--pad); z-index: 4; font-size: var(--display-lg); line-height: .9; max-width: 5em; }

  /* center year nav */
  .tl--pinned .tl__nav { display: flex; flex-direction: column; gap: clamp(14px, 2.6vh, 30px); position: absolute; left: calc(50% - 50px); top: 50%; transform: translate(-30%, -50%); z-index: 4; list-style: none; margin: 0; padding: 0; }   /* -50px keeps the year column clear of the right-edge image at narrower desktop widths */
  .tl--pinned .tl__nav::before { content: ""; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
  /* Scroll-focus year: same dot animation as mobile (grey -> orange ring grows + centre brightens).
     --f (0..1) per row is set by the timeline IIFE from the pin scroll progress; two adjacent rows
     cross-fade (matches the real site). */
  .tl--pinned .tl__nav li { --f: 0; position: relative; padding-left: 26px; font-size: var(--text-base); }
  .tl--pinned .tl__nav li::before { content: ""; position: absolute; left: -1px; top: 50%; margin-top: -4.5px;
    width: 9px; height: 9px; border-radius: 50%;
    background: color-mix(in srgb, var(--orange) calc(var(--f) * 100%), #c4c4c4); }   /* centre dot grey -> orange */
  .tl--pinned .tl__nav li::after { content: ""; position: absolute; left: 3.5px; top: 50%;
    width: 18px; height: 18px; transform: translate(-50%, -50%) scale(calc(0.65 + 0.35 * var(--f))); transform-origin: 50% 50%;
    border-radius: 50%; border: 1.5px solid var(--orange); opacity: var(--f); }                  /* ring grows in */
  /* Year text wipe: two stacked copies (orange over grey) slide vertically in a one-line clip.
     --f=0 shows grey; as --f→1 the pair slides DOWN so the orange descends in from the top. The
     row losing focus runs --f 1→0, so its orange slides up and out — opposite direction. */
  .tl--pinned .tl__navyear { display: inline-block; overflow: hidden; height: 1.2em; line-height: 1.2; vertical-align: bottom; }
  .tl--pinned .tl__navyear__in { display: block; transform: translateY(calc((var(--f) - 1) * 1.2em)); will-change: transform; }
  .tl--pinned .tl__navyear__o,
  .tl--pinned .tl__navyear__g { display: block; height: 1.2em; line-height: 1.2; }
  .tl--pinned .tl__navyear__o { color: var(--orange); }
  .tl--pinned .tl__navyear__g { color: #d9d9d9; }

  .tl--pinned .tl__item { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; pointer-events: none; }
  .tl--pinned .tl__item.is-active { opacity: 1; pointer-events: auto; }
  .tl--pinned .tl__text { position: absolute; left: var(--pad); top: 53%; width: min(34vw, 480px); }
  .tl--pinned .tl__desc { font-size: var(--text-base); }
  .tl--pinned .tl__photo { position: absolute; right: 0; top: 0; height: 100vh; width: min(46vw, 640px); }
  .tl--pinned .tl__photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; margin: 0; display: block; }
}

/* Short landscape viewports (iPad mini/Air landscape ~744–834px tall, small laptops):
   the big two-line "Bertch Timeline" title at top:28% would run down into the year group
   at top:53%. Cap the title height (vh-based) so it stays clear with a comfortable gap. */
@media (min-width: 900px) and (max-height: 860px) {
  .tl--pinned .tl__title { font-size: min(var(--display-lg), 11vh); }
}

/* ---------- team ---------- */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 44px); }
.member { position: relative; aspect-ratio: 4 / 5; background: var(--bg-alt); transition: border-radius .4s ease; }
.member__photo { position: absolute; inset: 0; overflow: hidden; transition: border-radius .4s ease; }   /* square at rest, rounded on hover */
.member__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* bio panel — a floating white card (rounded + drop shadow) that covers the photo */
.member__bio { position: absolute; inset: 0; z-index: 2; background: #fff; color: #111; box-shadow: 0 30px 70px rgba(0,0,0,.18); padding: clamp(24px, 3vw, 48px); display: flex; flex-direction: column; justify-content: flex-start; opacity: 0; pointer-events: none; transition: opacity .4s ease, border-radius .4s ease; }
/* "Partner" rises up out of a mask (bottom → up) */
.member__role { font-size: var(--display-sm); font-weight: 300; margin: 0 0 clamp(16px, 2vw, 28px); overflow: hidden; padding-bottom: .08em; }
.member__role span { display: inline-block; transform: translateY(115%); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
/* bio text rises + fades in just after */
.member__bio p:not(.member__role) { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.55; max-width: 40ch; transform: translateY(20px); opacity: 0; transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
/* name pill (bottom center), like the nav pill */
.member__pill { position: absolute; left: 50%; bottom: clamp(16px, 2.4vw, 26px); transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 12px; background: #fff; color: var(--ink); border: 0; border-radius: 999px; padding: 9px 12px 9px 20px; font-size: var(--text-sm); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.12); white-space: nowrap; }
.member__plus { position: relative; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; border: 1px solid #d9d9d9; transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
.member__plus::before, .member__plus::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--orange); }
.member__plus::before { width: 9px; height: 1.4px; }   /* horizontal bar */
.member__plus::after { width: 1.4px; height: 9px; }     /* vertical bar */
@media (hover: hover) and (min-width: 760px) {
  .member:hover .member__bio { opacity: 1; pointer-events: auto; }
  .member:hover, .member:hover .member__photo, .member:hover .member__bio { border-radius: 36px; }   /* corners round only on hover (container too, so no square corner shows) */
  .member:hover .member__bio .member__role span { transform: translateY(0); transition-delay: .12s; }
  .member:hover .member__bio p:not(.member__role) { transform: translateY(0); opacity: 1; transition-delay: .24s; }
  .member:hover .member__plus { transform: rotate(360deg); }   /* spins clockwise one full turn */
}
/* touch devices (phones AND tablets — no hover): tap the name pill to flip the bio card over the photo */
@media (hover: none) {
  .member.is-open .member__bio { opacity: 1; pointer-events: auto; }
  .member.is-open, .member.is-open .member__photo, .member.is-open .member__bio { border-radius: 36px; }
  .member.is-open .member__bio .member__role span { transform: translateY(0); transition-delay: .12s; }
  .member.is-open .member__bio p:not(.member__role) { transform: translateY(0); opacity: 1; transition-delay: .24s; }
  .member.is-open .member__plus { transform: rotate(360deg); }
}
/* Touch devices (phones + iPad, either orientation): the bio copy reads too small at 15px on the
   tap-to-open card — bump it up. Desktop (hover) keeps the smaller size. */
@media (hover: none) {
  .member__bio p:not(.member__role) { font-size: var(--text-md); line-height: 1.5; }
}

/* ---------- values ---------- */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }   /* 3 across on desktop + tablet landscape; 1 column below 860 (tablet portrait + phone). minmax(0,1fr) lets columns shrink so the grid can't push the 3rd column off-screen after a rotation */
.value .num { font-size: var(--text-xs); color: var(--orange); letter-spacing: .1em; margin-bottom: 10px; }
/* tighten the gap between the Values section and the Think Forward CTA below it */
.section:has(.values) { padding-bottom: clamp(24px, 4vw, 56px); }
.value h4 { font-size: var(--text-lg); margin-bottom: 10px; }
.value p { color: var(--ink-soft); font-size: var(--text-sm); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 14px 30px; border-radius: 999px;
  background: var(--orange); color: #fff; font-size: var(--text-sm); letter-spacing: .04em;
  border: 1px solid var(--orange); cursor: pointer; transition: background .2s, color .2s;
}
.btn:hover { background: transparent; color: var(--orange); }
.bg-green .btn { background: #fff; color: var(--orange); border-color: #fff; }
.bg-green .btn:hover { background: transparent; color: #f3f1ea; }
.btn-text { display: inline-block; font-size: var(--text-sm); letter-spacing: .06em; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* ---------- CTA band ---------- */
.cta { text-align: center; }
.cta h2 { font-size: var(--display-lg); font-weight: 300; margin-bottom: 26px; }

/* ---------- contact form ---------- */
.form { max-width: 620px; }
.form .field { margin-bottom: 22px; }
.form label { display: block; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.form input, .form textarea {
  width: 100%; padding: 14px 16px; font: inherit; font-size: var(--text-base);
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 3px; color: var(--ink);
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--green); }
.form textarea { min-height: 150px; resize: vertical; }
.form-note { font-size: var(--text-xs); color: var(--ink-soft); margin-top: 8px; }
#form-status { margin-top: 16px; font-size: var(--text-sm); }

/* ---------- footer ---------- */
/* (old green-footer rules removed — the orange footer is styled further down) */

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
/* When GSAP drives the motion it manages opacity/transform directly. */
.gsap .reveal { transition: none; }

/* (Initial cover is handled by the white intro layer + black wipe during load.) */

/* Line-by-line heading reveal (lines rise out of a masked row). */
.lp { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.lc { display: block; white-space: nowrap; }
/* Measurement helper: keep each word atomic (no mid-word/hyphen breaks) so line grouping matches the nowrap render. */
.mw { white-space: nowrap; }
/* Per-character mask (project titles rise left-to-right). */
.cw { white-space: nowrap; }   /* keep a word's letters together; break only between words */
.cp { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.cc { display: inline-block; }

/* Scroll progress bar. */
.scroll-progress {
  position: fixed; bottom: 0; left: 0; height: 4px; width: 100%;
  background: var(--orange); transform: scaleX(0); transform-origin: 0 50%;
  z-index: 200; pointer-events: none;
}

/* ---------- background video ---------- */
.media-video { width: 100%; display: block; border-radius: 2px; object-fit: cover; background: #11130f; }
.split .media-video { aspect-ratio: 4 / 3; height: 100%; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .split, .projects, .team, .values { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .gallery, .gallery--3 { grid-template-columns: repeat(2, 1fr); }
  .stack-imgs.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .timeline .row { grid-template-columns: 1fr; gap: 8px; }
  .nav { position: fixed; inset: 72px 0 auto 0; background: var(--bg); flex-direction: column; gap: 0; border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .3s; }
  .nav.open { transform: none; }
  .nav a { padding: 16px var(--pad); width: 100%; border-top: 1px solid var(--line); }
  .nav-toggle { display: block; }
}
@media (max-width: 560px) {
  .stats, .gallery, .gallery--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Recreated from the original: hero intro, expanding menu, marquee
   ============================================================ */

/* ---- Top centered logo ---- */
.toplogo { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); z-index: 450; color: #fff; line-height: 0; filter: drop-shadow(0 1px 12px rgba(0,0,0,.4)); }
.toplogo__svg { display: block; height: 24px; width: auto; }
.toplogo__svg path { fill: currentColor; }
body:has(.page-hero) .toplogo, body:has(.se-intro) .toplogo { color: var(--ink); filter: none; }

/* White intro layer that the black wipe rises over on first load */
.intro-white { position: fixed; inset: 0; background: #fff; z-index: 380; display: none; }
.gsap .intro-white { display: block; }
/* BC monogram shown at the bottom centre during the home load intro (orange on white, flips to
   white on black, fades at the reveal). JS drives color/opacity; hidden until the intro runs. */
.intromark { position: fixed; left: 50%; bottom: clamp(26px, 4vh, 48px); transform: translateX(-50%); z-index: 450; width: clamp(26px, 3vw, 34px); height: auto; color: #ff4800; opacity: 0; display: none; pointer-events: none; }
.intromark path { fill: currentColor; }
.gsap .intromark { display: block; }
/* During the load intro the hero floats above the white/black layers (its framed image
   shows on white, then on black) with a transparent surround until it expands. */
.intro-active .hero { z-index: 395; background: transparent; }
.intro-active .hero::after { opacity: 0; }
@media (max-width: 600px) { .toplogo { top: 18px; } .toplogo__svg { height: 20px; } }

/* ---- Hero: framed image that expands to fullscreen on load ---- */
.hero { overflow: hidden; background: #000; }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media .hero-bg { position: absolute; left: 0; top: -4%; width: 100%; height: 104%; object-fit: cover; }   /* BC-001: hidden top overflow (see .hero img.hero-bg) */

/* ---- Header: menu button + expanding panel ---- */
.site-header .wrap { position: relative; }
.menu-toggle { display: inline-flex; align-items: center; gap: 11px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--text-sm); letter-spacing: .04em; color: var(--ink); }
.menu-toggle .menu-label { line-height: 1; }
.menu-burger { position: relative; display: inline-block; width: 26px; height: 11px; }
.menu-burger i { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .4s cubic-bezier(.65,0,.35,1), opacity .3s; }
.menu-burger i:nth-child(1) { top: 0; }
.menu-burger i:nth-child(2) { bottom: 0; }
body.menu-open .menu-burger i:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
body.menu-open .menu-burger i:nth-child(2) { transform: translateY(-4.75px) rotate(-45deg); }

.nav-panel { position: absolute; left: 0; right: 0; top: 100%; background: rgba(247,246,242,.97); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.65,0,.35,1); }
body.menu-open .nav-panel { max-height: 90vh; }
.nav-panel a { padding: 16px var(--pad); font-size: var(--display-md); font-weight: 300; letter-spacing: -.03em; color: var(--ink); border-top: 1px solid var(--line); transition: color .2s; }
.nav-panel a:first-child { border-top: 0; }
.nav-panel a:hover { color: var(--green-soft); }
.nav-panel a.active { color: var(--green-soft); }
.gsap .nav-panel a { opacity: 0; }

/* ---- Legal pages (Privacy / Terms) ---- */
/* Tighten the gap between the page title and the body (about half of the default). */
body:has(.legal) .page-hero { padding-bottom: 12px; }
body:has(.legal) .section { padding-top: 20px; }
.legal { max-width: 780px; }
.legal p { margin-bottom: 1.1em; line-height: 1.6; color: var(--ink-soft); }
.legal-h { font-size: var(--text-md); font-weight: 500; letter-spacing: 0; margin: 1.8em 0 0.5em; color: var(--ink); line-height: 1.3; }
.legal a { color: var(--orange); }
.legal a:hover { text-decoration: underline; }

/* ---- Pre-footer CTA: image, Think Forward, Get in touch ---- */
.cta-pre { background: #fff; padding: clamp(48px, 9vw, 110px) 0; }
.cta-pre__img { width: 100%; margin-bottom: clamp(28px, 6vw, 52px); border-radius: 2px; overflow: hidden; }
.cta-pre__img img { display: block; width: 100%; aspect-ratio: 39 / 44; max-height: 400px; object-fit: cover; }   /* cap height: the tall 39/44 portrait crop blows up full-width on tablet portrait (~866px at 768) before the ≥861 side-by-side layout kicks in */
.cta-pre__title { font-size: var(--display-xl); font-weight: 300; line-height: 1.0; letter-spacing: -0.04em; margin: 0 0 clamp(26px, 5vw, 40px); }
.cta-pre__accent { color: var(--orange); }            /* "Forward" in brand orange, same line */
/* Default: outlined circle-arrow + label. Hover: morphs into a solid orange
   pill — label turns white, the circle collapses and the arrow slides to the right. */
.cta-pre__btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 5px 0 5px; border-radius: 999px; color: var(--ink); font-size: var(--text-base); letter-spacing: -0.01em; transition: background .42s cubic-bezier(.65,0,.35,1), color .3s ease, padding .42s cubic-bezier(.65,0,.35,1); }
.cta-pre__circle { flex: 0 0 auto; width: 42px; height: 42px; max-width: 42px; border-radius: 50%; border: 1px solid #d9d9d9; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-base); color: var(--orange); margin-right: 16px; overflow: hidden; transition: max-width .42s cubic-bezier(.65,0,.35,1), opacity .28s ease, margin .42s cubic-bezier(.65,0,.35,1), border-color .28s ease; }
.cta-pre__label { font-weight: 500; white-space: nowrap; transition: color .3s ease; } /* "Get in touch with us" bold */
.cta-pre__arrow { flex: 0 0 auto; max-width: 0; margin-left: 0; overflow: hidden; opacity: 0; color: #fff; font-size: var(--text-md); transition: max-width .42s cubic-bezier(.65,0,.35,1), opacity .28s ease, margin .42s cubic-bezier(.65,0,.35,1); }
.cta-pre__btn:hover { background: var(--orange); color: #fff; padding: 0 26px; }
.cta-pre__btn:hover .cta-pre__circle { max-width: 0; opacity: 0; margin-right: 0; border-color: transparent; }
.cta-pre__btn:hover .cta-pre__label { color: #fff; }
.cta-pre__btn:hover .cta-pre__arrow { max-width: 26px; opacity: 1; margin-left: 14px; }
.cta-pre__btn { cursor: pointer; }

/* "Let's talk" contact drawer — slides in from the right over a dimmed page. */
.drawer { position: fixed; inset: 0; z-index: 300; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__overlay { position: absolute; inset: 0; background: rgba(18,18,18,.55); opacity: 0; transition: opacity .45s ease; }
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; max-height: 100%; width: min(460px, 90vw); box-sizing: border-box; background: var(--orange); color: #111; padding: clamp(30px,5vw,58px) clamp(26px,4.4vw,62px) clamp(48px,7vh,86px); border-radius: 0 0 20px 20px; transform: translateX(100%); transition: transform .55s cubic-bezier(.65,0,.35,1); overflow-y: auto; }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__close { position: absolute; top: clamp(26px,4vw,50px); right: clamp(22px,4vw,50px); width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(0,0,0,.4); background: transparent; color: #111; font-size: var(--text-xl); line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease; }
.drawer__close:hover { background: #111; color: var(--orange); }
.drawer__title { font-size: var(--display-md); font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin: 0; }
.drawer__body { margin-top: 0; padding-top: clamp(48px,11vh,120px); display: flex; flex-direction: column; gap: clamp(20px,3vw,30px); }
.drawer .caps { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: var(--text-xs); margin-bottom: 8px; }
.drawer__link, .drawer__copy { color: #111; font-size: var(--text-md); font-weight: 300; line-height: 1.3; text-decoration: none; }
.drawer__link:hover { text-decoration: underline; }
.drawer__copy { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 10px; }
.drawer__copy-icon svg { width: 22px; height: 22px; display: block; }

/* Desktop: image (~40%) on the left, "Think Forward" + button on the right (matches live). */
@media (min-width: 861px) {
  .cta-pre .wrap { display: flex; align-items: center; gap: clamp(48px, 7vw, 125px); }
  .cta-pre__img { flex: 0 0 40%; width: 40%; margin-bottom: 0; }
  .cta-pre__img img { aspect-ratio: 1.8; }
  .cta-pre__text { flex: 1; }
  .cta-pre__title { font-size: var(--display-lg); }   /* desktop + tablet landscape: smaller than the phone size (was --display-xl, felt too big) */
}

/* ===== Home CTA: two layouts =====
   The home CTA (.cta-pre--overlap) sits below the full-bleed trees band.
   • Phone + portrait tablet (≤900px): the trees band is hidden — the CTA stands alone.
   • iPad landscape + desktop (≥901px): the trees band stays and the CTA's PORTRAIT photo
     pulls up to partially overlap it, with the title + link to the lower right. */
.fullbleed { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .fullbleed { display: none; }
}
@media (min-width: 901px) {
  .section:has(.fullbleed) { padding-bottom: 0; }   /* no cream strip below the trees photo */
  .cta-pre--overlap { position: relative; z-index: 2; padding-top: 0; }
  .cta-pre--overlap .wrap { align-items: flex-end; }   /* title tracks the image's lower edge (the look you liked at wide) */
  /* Overlap scales with WIDTH (like the image) so a narrow image doesn't over-collapse the row and drag the title up toward the trees. */
  .cta-pre--overlap .cta-pre__img { flex: 0 0 33%; width: 33%; align-self: flex-start; margin-top: clamp(-150px, -10vw, -80px); position: relative; z-index: 2; }
  .cta-pre--overlap .cta-pre__img img { aspect-ratio: 800 / 1088; max-height: none; }   /* portrait, like the original */
  .cta-pre--overlap .cta-pre__text { padding-bottom: clamp(40px, 6vh, 110px); }
}

/* ---- Footer: scrolling wordmark marquee ---- */
.site-footer { background: var(--orange); color: #111; overflow: hidden; padding: 40px 0 130px; }
.marquee { width: 100%; overflow: hidden; }
.marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: bc-marquee 16s linear infinite; }
/* Wordmark: "BertchCapital" (no space) + small ™ — matches the live SVG logo. line-height 1 keeps it tight to the top. */
.marquee__word { font-size: clamp(56px, 15vw, 220px); font-weight: 300; letter-spacing: -.04em; line-height: 1; color: #111; padding-right: clamp(24px, 5vw, 80px); white-space: nowrap; }
.marquee__word sup { font-size: 0.26em; vertical-align: text-top; position: relative; top: 1.08em; line-height: 1; letter-spacing: 0; font-weight: 300; }
@keyframes bc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
.footer-foot { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(28px, 5vw, 48px); }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a, .footer-meta { font-size: var(--text-base); font-weight: 300; color: #111; }
.footer-links a:hover { color: #000; text-decoration: underline; }
/* Phones: stack Privacy / Terms / ©2026 vertically, left-aligned (matches the live mobile footer). */
@media (max-width: 640px) {
  .footer-foot { flex-direction: column; align-items: center; gap: 6px; }
  .footer-links { flex-direction: column; gap: 6px; align-items: center; }
}
/* Desktop/tablet footer: one bottom row — ©2026 left, Privacy/Terms right, with the
   centred menu button sitting between them; and slow the (now much larger) wordmark. */
@media (min-width: 641px) {
  .site-footer { padding-bottom: 44px; }
  .footer-foot { justify-content: space-between; margin-top: clamp(28px, 5vw, 56px); }
  .footer-meta { order: -1; }                 /* ©2026 Bertch Capital on the left */
  .marquee__track { animation-duration: 30s; }
}
@media (min-width: 1100px) { .marquee__track { animation-duration: 48s; } }

/* ---- About load animation (staged wipe-up loader) ---- */
.aload { position: fixed; inset: 0; z-index: 9000; overflow: hidden; }
.aload__panel, .aload__hero { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform, opacity; }
.aload__panel--white  { background: #fff;          z-index: 4; }
.aload__panel--black  { background: #000; color: #fff; z-index: 3; }
.aload__panel--orange { background: var(--orange); color: #000; z-index: 2; }
.aload__hero { z-index: 1; color: #fff; }                 /* hero image + ghost mark, both fade out into the page */
/* The overlay image must match each page's hero load framing exactly so the fade is seamless. */
.aload__heroimg { position: absolute; left: 0; top: -4%; width: 100%; height: 104%; object-fit: cover; object-position: center; display: block; }   /* home + portfolio — matches .hero-bg rest framing (BC-001 overflow) */
.aload__heroimg--about { inset: auto; top: 0; left: 0; height: 200vh; object-position: center top; transform: translateY(-26%); }   /* about-hero--pan: 200vh @ yPercent -26 */
.aload__heroimg--shero { inset: auto; top: 0; left: 0; height: 260vh; object-position: center top; }                                  /* sustainability shero__img: 260vh @ top */
.aload__mark { width: clamp(171px, 42.75vw, 221px); height: auto; }   /* desktop cap 221px; iPhone stays at the 171px floor */
.aload__mark path { fill: currentColor; }
.aload__mark--ghost { opacity: .3; }                       /* semi-transparent white mark that fades into the page */

/* ---- Page-transition wipe ---- */
.page-wipe { position: fixed; inset: 0; z-index: 390; pointer-events: none; transform: translateY(100%); display: flex; align-items: center; justify-content: center; background: #000; }
.page-wipe__inner { position: absolute; inset: 0; background: #1a1a1a; transform: translateY(100%); }
.page-wipe__logo { position: relative; z-index: 1; color: #eef1ec; font-weight: 300; letter-spacing: -.03em; font-size: var(--display-lg); opacity: 0; }

/* ---- Orange expandable pill navigation ---- */
.navpill {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 120; display: flex; align-items: center; gap: 2px;
  background: #fff; border-radius: 999px; padding: 7px;
  box-shadow: 0 14px 36px rgba(0,0,0,.18); max-width: calc(100vw - 32px);
}
.navpill__toggle {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: var(--orange); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.navpill__arrow { font-size: var(--text-lg); line-height: 1; transition: transform .5s cubic-bezier(.65,0,.35,1); }
.navpill.is-open .navpill__arrow { transform: rotate(90deg); }
.navpill__current { padding: 0 18px 0 14px; font-size: var(--text-sm); font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.navpill.is-open .navpill__current { display: none; }
.navpill__links { display: flex; align-items: center; overflow: hidden; max-width: 0; transition: max-width .6s cubic-bezier(.65,0,.35,1); }
.navpill.is-open .navpill__links { max-width: 72vw; }
.navpill__links a { padding: 0 16px; font-size: var(--text-sm); font-weight: 500; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; transition: color .2s; }
.navpill__links a:hover, .navpill__links a.active { color: var(--orange); }
/* Desktop: keep the toggle + label inline inside the horizontal pill */
.navpill__bar { display: contents; }

/* ----- iPhone navigation: vertical stepper card + chevron toggle pill (matches the live site) ----- */
@media (max-width: 640px) {
  .navpill {
    bottom: 30px; left: 50%; transform: translateX(-50%);
    flex-direction: column-reverse; align-items: center; gap: 16px;
    background: transparent; box-shadow: none; padding: 0; border-radius: 0;
    max-width: calc(100vw - 32px);
  }

  /* Bottom toggle pill */
  .navpill__bar {
    display: inline-flex; align-items: center; cursor: pointer;
    background: #fff; border-radius: 70px; padding: 10px 28px 10px 10px;
    box-shadow: 0 8px 30px -8px rgba(0,0,0,.25);
  }
  .navpill__bar .navpill__current { cursor: pointer; }
  .navpill__toggle {
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 1px solid #d9d9d9; color: #111; flex: 0 0 auto;
  }
  .navpill__arrow { font-size: 0; width: 9px; height: 9px; transform: none; display: inline-block; transition: transform .4s cubic-bezier(.65,0,.35,1); }
  .navpill.is-open .navpill__arrow { transform: none; }   /* cancel the desktop rotate so only the chevron turns */
  .navpill__arrow::before {
    content: ""; display: block; width: 7px; height: 7px; margin: -2px 0 0 1px;
    border-right: 1.6px solid #111; border-bottom: 1.6px solid #111;
    /* --chev is set inline by script.js: -135deg = up (collapsed), 45deg = down (open) */
    transform: rotate(var(--chev, -135deg));
  }
  .navpill__current {
    display: inline-block; padding: 0; margin-left: 12px;
    font-size: var(--text-base); font-weight: 500; color: #111; white-space: nowrap;
  }
  .navpill.is-open .navpill__current { display: inline-block; }            /* keep "Close Navigation" visible */

  /* Menu card */
  .navpill__links {
    display: block; background: #fff; border-radius: 30px;
    box-shadow: 0 4px 30px -10px rgba(0,0,0,.25);
    padding: 0 44px; max-width: none; overflow: hidden;
    max-height: 0; transition: max-height .55s cubic-bezier(.65,0,.35,1), padding .55s cubic-bezier(.65,0,.35,1);
  }
  .navpill.is-open .navpill__links { max-width: none; max-height: 70vh; padding: 30px 44px; }
  .navpill__links a {
    display: block; position: relative; padding: 0 0 0 32px; margin: 0 0 30px;
    font-size: var(--text-base); font-weight: 500; color: #111; letter-spacing: -0.01em; white-space: nowrap;
  }
  .navpill__links a:last-child { margin-bottom: 0; }
  .navpill__links a::before {                          /* dot */
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 50%; background: #d9d9d9; z-index: 1;
  }
  .navpill__links a::after {                           /* connecting line */
    content: ""; position: absolute; left: 4px; top: 50%;
    width: 1px; height: calc(100% + 30px); background: #d9d9d9; opacity: .5; z-index: 0;
  }
  .navpill__links a:last-child::after { display: none; }
  .navpill__links a.active { color: #111; }            /* active: orange-ringed white dot, orange centre */
  .navpill__links a.active::before {
    background: #ff4800; box-shadow: 0 0 0 5px #fff, 0 0 0 6px #ff4800;
  }
}

/* ---- Who We Are: full-width image carousel ---- */
/* Who We Are slider — crossfade slideshow like Seaway/Sumner: counter pill lower-right, swipe,
   clickable dots. Difference from those: the dots stay in the lower-LEFT corner over the photo. */
/* Who We Are section ends flush at the image — no cream below it (all devices/orientations). */
.section:has(.wcarousel) { padding-bottom: 0; }
.wcarousel { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; }
.wcarousel__track { display: flex; height: 100%; transition: transform .8s cubic-bezier(.65,0,.35,1); }
.wcarousel__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
/* Touch: static "1 / N" counter pill lower-right (paired with the lower-left dots below). */
.wcarousel__count { position: absolute; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 3; background: var(--orange); color: #fff; font-size: var(--text-sm); font-weight: 500; line-height: 1; letter-spacing: .02em; padding: 11px 20px; border-radius: 999px; white-space: nowrap; }
/* Desktop: a brand-orange circle FOLLOWS THE CURSOR over the slider, showing ← current/total →.
   Click the left half of the slider = previous photo, right half = next (matches the real site).
   JS positions it on mousemove; the static pill + dots are hidden on desktop. */
.wcarousel__cursor { display: none; position: absolute; top: 0; left: 0; z-index: 4; width: 120px; height: 120px; border-radius: 50%; background: var(--orange); color: #fff; align-items: center; justify-content: center; gap: 9px; font-size: var(--text-sm); font-weight: 500; letter-spacing: .02em; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; transition: opacity .25s ease; }
.wcarousel__cur-arrow { font-size: var(--text-md); line-height: 1; opacity: .85; }
@media (hover: hover) {
  .wcarousel { cursor: none; }
  .wcarousel__count, .wcarousel__dots { display: none; }
  .wcarousel__cursor { display: flex; }
}
.wcarousel__dots { position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(20px, 2vw, 32px); display: flex; gap: 10px; z-index: 2; }
.wcarousel__dots button { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; -webkit-appearance: none; appearance: none; }
.wcarousel__dots button::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); transition: background .3s; }
.wcarousel__dots button.is-active::before { background: var(--orange); }

/* ---- Full-bleed hills image + Strategic Focus overlap ---- */
.fullbleed { width: 100%; overflow: hidden; margin-top: clamp(24px, 4vw, 48px); }
.fullbleed__img { display: block; width: 100%; height: clamp(280px, 38vh, 480px); object-fit: cover; }   /* full width, shorter band */

.sf { display: flex; align-items: flex-start; gap: clamp(28px, 5vw, 72px); }
.sf__img { flex: 0 0 auto; width: clamp(280px, 35vw, 440px); margin: 0; border-radius: 2px; overflow: hidden; position: relative; z-index: 3; }
.sf__img img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sf__text { flex: 1; min-width: 0; }   /* allow the column to shrink so the heading/lead wrap instead of overflowing the viewport */
@media (min-width: 860px) {
  .sf-section { padding-top: clamp(40px, 5vw, 80px); }
  .sf__img { margin-top: clamp(-240px, -16vw, -120px); }
  .sf__text { padding-top: 8px; }
}
@media (max-width: 860px) {
  .sf { flex-direction: column; gap: 24px; }
  .sf__img { width: 100%; }
}

/* ---- Our Story: text above, big image left of two thumbnails, hover-swap ---- */
.os__layout { display: grid; grid-template-columns: 0.42fr 1fr; gap: clamp(18px, 2.5vw, 40px); align-items: start; margin-top: 16px; }
.os__label { grid-column: 1; margin: 0; }
.os__main { grid-column: 2; }
.os__statement { font-size: clamp(30px, calc(4.4vw - 18px), 48px); font-weight: 300; line-height: 1.05; letter-spacing: -0.014em; color: var(--ink); margin: 0 0 clamp(48px, 6vw, 90px); max-width: 760px; }   /* matches the real site's fluid ramp for this statement (30px ≈1100px → 48px ≈1510px) rather than --display-md, which caps at 48 too early (~1067px) */
.os__gallery { display: flex; align-items: flex-start; gap: clamp(12px, 1.5vw, 22px); flex-wrap: nowrap; }   /* Our Story: top-aligned big + thumbs */
@media (max-width: 860px) { .os__layout { display: block; } .os__label, .os__main { grid-column: auto; } .os__label { margin-bottom: clamp(16px, 2.5vw, 24px); } .os__statement { margin-bottom: 36px; } }
.os__big { position: relative; flex: 0 0 auto; width: 48%; max-width: 440px; aspect-ratio: 486 / 649; overflow: hidden; border-radius: 2px; }
.os__big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s linear; }
.os__big img.is-active { opacity: 1; z-index: 2; }
.os__big img.is-prev { opacity: 1; z-index: 1; }   /* outgoing image held visible beneath the incoming left→right slide (portfolio galleries) */
.os__thumbs { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 auto; }
.os__thumb { flex: 1 1 0; max-width: 146px; aspect-ratio: 146 / 195; overflow: hidden; border-radius: 2px; padding: 0; border: 0; cursor: pointer; background: none; position: relative; }
.os__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(.65,0,.35,1); }
.os__thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--green); transition: box-shadow 0.25s; }
.os__thumb:hover img, .os__thumb:focus-visible img { transform: scale(1.06); }
.os__thumb:hover::after, .os__thumb:focus-visible::after { box-shadow: inset 0 0 0 2px var(--green); }
/* Our Story thumbnails — expand chip whenever the big+thumbs gallery is showing (≥901px = desktop
   AND iPad mini landscape). iPhone + iPad mini portrait use the swipe carousel instead.
   TO REVERT: delete this @media block. */
@media (min-width: 901px) {
  .os__main .os__thumb::after {
    content: ""; inset: auto 6px 6px auto; width: 22px; height: 22px; border-radius: 50%;
    box-shadow: none; background-color: rgba(27, 29, 26, 0.6);
    background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%204h6v6'/%3E%3Cpath%20d='M20%204l-8%208'/%3E%3Cpath%20d='M10%2020H4v-6'/%3E%3Cpath%20d='M4%2020l8-8'/%3E%3C/svg%3E");
  }
  .os__main .os__thumb:hover::after,
  .os__main .os__thumb:focus-visible::after { box-shadow: none; background-color: var(--orange); }
}
/* Our Story — peek carousel for iPhone + iPad mini (≤1133px). Transform-based (BC-002 safe): the
   active image is left-aligned and a sliver of the NEXT image peeks on the right to signal "swipe
   for more". Desktop (≥1134px) keeps the big + thumbnails gallery above. */
.os__swipe { display: none; }
.os__swipe-track { display: flex; gap: 10px; width: 100%; }   /* no permanent will-change/3d layer → no sub-pixel shimmer under Lenis; it composites only while sliding */
.os__swipe-slide { flex: 0 0 84%; aspect-ratio: 800 / 1068; border-radius: 2px; overflow: hidden; }
.os__swipe-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; user-select: none; }
/* (Keyed off width/height instead of `orientation` — more robust, and avoids a DevTools device-mode
   quirk where the orientation feature lags after a rotate. iPhone ≤600w, iPad mini portrait ~768w,
   iPad mini landscape ~1024w, iPhone landscape ≤500h.) */
/* iPad mini PORTRAIT (≈768w, tall): smaller slide so the tall image isn't overwhelming (still peeks). */
@media (min-width: 601px) and (max-width: 900px) and (min-height: 501px) { .os__swipe-slide { flex-basis: 74%; } }
/* iPhone portrait + iPad mini portrait (≤900w and tall): swipe carousel replaces the big+thumbs gallery. */
@media (max-width: 900px) and (min-height: 501px) {
  .os__main .os__gallery { display: none; }
  .os__swipe { display: block; overflow: hidden; margin-top: 18px; touch-action: pan-y; cursor: grab; }
  .os__swipe:active { cursor: grabbing; }
}
/* iPhone LANDSCAPE (short screens, ≤500h): show all three images at once, sized to fit the screen height. */
@media (max-height: 500px) {
  .os__main .os__gallery { display: none; }
  .os__swipe { display: block; overflow: hidden; margin-top: 0; }
  .os__swipe-track { justify-content: center; gap: 14px; }
  .os__swipe-slide { flex: 0 0 auto; width: auto; height: min(82vh, calc((100vw - 80px) / 3 * 1.335)); }
}
@media (max-width: 560px) {
  .os__statement { max-width: 28ch; }
  .os__gallery { flex-wrap: wrap; }
  .os__big { width: 100%; max-width: none; }
  .os__thumbs { flex-basis: 100%; }
}

/* ============================================================
   iPhone layout — matched measurement-for-measurement to the
   live bertchcapital.com at ~348px viewport width.
   (hero headline ~96px, big headings ~54px, statements ~30px,
    eyebrows 16px/regular, body 16px, 20px side gutters)
   ============================================================ */
@media (max-width: 600px) {
  /* Hero headline: large and tight, filling the width like the live site */
  .hero h1 { font-size: var(--hero-mobile); line-height: 0.82; letter-spacing: -0.05em; }
  .about-hero h1 { font-size: var(--hero-mobile); }
  .hero .wrap { padding-bottom: 180px; }          /* clear the bottom nav pill (more room than 120 — iOS 100vh pushes content under the fixed pill) */
  .hero.hero--portfolio .wrap { padding-bottom: 180px; }
  .hero .sub { font-size: var(--text-base); margin-top: 18px; }

  /* Big section headings: Our Projects / Sustainability / Strategic Focus (~54px) */
  h2.display { font-size: var(--display-lg); line-height: 1.04; margin-bottom: 20px; }
  h3.display { font-size: var(--display-md); }

  /* Eyebrow / section labels: 16px, regular weight, slight negative tracking */
  .eyebrow { font-size: var(--text-base); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 18px; }

  /* Statement copy (Our Story, "We are a boutique family office"): ~30px, tight leading */
  .os__statement { font-size: var(--display-sm); line-height: 1.05; margin-bottom: 34px; max-width: none; }

  /* Our Story gallery on phones: a single right-aligned portrait, thumbnails hidden (matches live) */
  .os__gallery { display: block; }
  .os__thumbs { display: none; }
  .os__big { width: 86%; max-width: none; margin-left: auto; }

  /* Who We Are carousel: slightly taller crop, matching the live mobile framing */
  .wcarousel { aspect-ratio: 1.56; }

  /* Our Projects cards: span (nearly) full width like the live site */
  .projects { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); gap: 26px; }
  .card { border-radius: 0; border-left: 0; border-right: 0; }
  .card .body { padding: 20px var(--pad) 26px; }

  /* Strategic Focus: stack cleanly (no overlap) on phones */
  .fullbleed__img { height: clamp(220px, 42vh, 320px); }
}

/* ============================================================
   Sustainability scrollytelling hero — full-screen, image pans
   on scroll while the title and copy cross-fade (GSAP pins it).
   ============================================================ */
.shero { position: relative; height: 100vh; background: #0b0e0b; color: #fff; }   /* JS adds .shero--sticky to make it a tall native position:sticky scroll track */
.shero--sticky { height: 280vh; }                                                /* 100vh visible + 180vh of scroll to pan through (shorter = passes faster, image keeps pace with scroll) */
.shero__sticky { position: relative; height: 100vh; overflow: hidden; }
.shero--sticky .shero__sticky { position: sticky; top: 0; }
.shero__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.shero__img {
  position: absolute; top: 0; left: 0; width: 100%; height: 260vh;
  object-fit: cover; object-position: center top;
}
.shero__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(8,12,8,.55), rgba(8,12,8,.12) 38%, rgba(8,12,8,.55));
}
.shero__layer {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pad);
}
.shero__eyebrow { color: #fff; margin-bottom: 18px; }
.shero__title {
  font-weight: 300; line-height: 0.92; letter-spacing: -0.045em;
  font-size: var(--display-2xl);
}
/* iPhone landscape (wide but very short ≤500px tall): the hero headlines filled the whole screen — shrink
   them. Placed here, AFTER all four hero-title base rules (.hero h1, .about-hero h1, .shero__title), so it
   wins the source-order tie for the About + Sustainability heroes too. */
@media (min-width: 601px) and (max-height: 500px) {
  .hero h1, .about-hero h1, .shero__title { font-size: clamp(38px, 7vw, 64px); }
  /* Same bottom clearance above the nav pill on About / Portfolio / Sustainability. About + Portfolio
     anchor to the bottom already; Sustainability's .shero__layer is vertically CENTERED (so its lower
     content overlapped the pill) — anchor it to the bottom too, all with the same padding. */
  .about-hero__layer,
  .hero.hero--portfolio .wrap { padding-bottom: 230px; }
  .shero__layer { justify-content: flex-end; padding-bottom: 230px; }
}
/* two-line break is now a <br>; the title is split into per-letter spans by data-chars,
   so we must NOT force every inner span to display:block */
.shero__scrub { align-items: center; justify-content: center; text-align: center; }
/* Three phrases stacked in the same centred spot — each fades in then out on scroll. */
.shero__phrase {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 90%; max-width: 760px; margin: 0; opacity: 0;
  font-weight: 300; letter-spacing: -0.02em; line-height: 1.08;
  font-size: var(--display-md);
}
/* Fallback (reduced motion / no JS): show all three phrases, stacked and static. */
.shero--static .shero__scrub { flex-direction: column; gap: 0.35em; }
.shero--static .shero__phrase { position: static; transform: none; opacity: 1; }

/* ============================================================
   Our Purpose — swipeable card carousel (phones only).
   Full-bleed background photo that cross-fades per card; a white
   card (title + copy) per slide; native scroll-snap swiping.
   Desktop keeps the .purpose-split sections instead.
   ============================================================ */
.purpose-carousel { display: none; }
@media (max-width: 1133px) {
  .purpose-split { display: none; }               /* hide the split layout on phones AND tablets — carousel covers up to the 1024px accordion breakpoint (was 640px, which left an iPad-portrait gap) */

  .purpose-carousel {
    display: block; position: relative; height: 90vh; min-height: 580px;
    overflow: hidden; background: #0b0e0b; color: #fff;
  }
  .pc__bgs { position: absolute; inset: 0; z-index: 0; }
  .pc__bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity .6s ease;
  }
  .pc__bg.is-active { opacity: 1; }
  .pc__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.5)); }

  /* Transform-based slider (BC-002 fix): the JS moves the row with translateX — no native
     overflow scroll for Lenis to desync. Drag/swipe to advance; neighbours peek + coverflow-scale. */
  .pc__track {
    position: relative; z-index: 1; height: 100%;
    display: flex; align-items: center; padding: 0;
    overflow: visible; will-change: transform; touch-action: pan-y;
    cursor: grab;
  }
  .pc__track:active { cursor: grabbing; }
  .pc__slide { flex: 0 0 86%; display: flex; justify-content: center; align-items: center; }
  .pc__card {
    background: #fff; color: var(--ink); border-radius: 12px;
    padding: 26px 24px; width: 100%; max-width: 340px;
    max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: 0 22px 55px -18px rgba(0,0,0,.5);
    transform-origin: center center; will-change: transform, opacity; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
  }
  .pc__card h3 { font-size: var(--text-2xl); font-weight: 300; letter-spacing: -.02em; line-height: 1.04; margin-bottom: 14px; }
  .pc__card p { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft); }

  .pc__dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 16px; display: flex; gap: 9px; justify-content: center; }
  .pc__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.55); cursor: pointer; transition: background .3s, transform .3s; }
  .pc__dot.is-active { background: var(--orange); transform: scale(1.15); }
}
/* iPad / tablet portrait: narrower slide so more of the neighbour cards peek in; phones keep 86%/340px. */
@media (min-width: 601px) and (max-width: 1023px) {
  .pc__slide { flex: 0 0 52%; }
  .pc__card { max-width: 400px; }
}
/* iPad landscape (~1024–1133px): carousel instead of the accordion — wider screen, so a
   smaller slide gives a big neighbour peek. (Preview; revert this band + the two breakpoints
   below + the matchMedia gate in script.js to put the accordion back on landscape.) */
@media (min-width: 1024px) and (max-width: 1133px) {
  .pc__slide { flex: 0 0 44%; }
  .pc__card { max-width: 520px; }
}

/* ============================================================
   Our Purpose — desktop accordion (>=1024px). A pinned full-screen
   white panel of 4 rows over a full-bleed photo; the open row
   expands (title left, copy right) while the others collapse to a
   title row, advancing as the user scrolls. The phone carousel and
   the in-between split sections are hidden here.
   ============================================================ */
.purpose-accordion { display: none; }
@media (min-width: 1134px) {
  .purpose-split { display: none; }

  .purpose-accordion {
    display: flex; align-items: center; justify-content: center;
    position: relative; height: 100vh; overflow: hidden; background: #0b0e0b;
  }
  .pa__bgs { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  /* Taller than the viewport so the photo can pan vertically as you scroll. */
  .pa__bg { position: absolute; top: 0; left: 0; width: 100%; height: 230vh; object-fit: cover; opacity: 0; transition: opacity .7s ease; will-change: transform; }
  .pa__bg.is-active { opacity: 1; }
  .pa__veil { display: none; }   /* the real site uses no overlay — keep the photo at full brightness */

  .pa__panel {
    position: relative; z-index: 1; width: min(1180px, 88vw);
    background: rgba(255, 255, 255, 0.75);   /* slightly transparent so the background photo shows through (tune to taste) */
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);   /* light frost keeps the dark text legible over the photo */
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 18px 60px -18px rgba(0,0,0,.55);
  }
  .pa__item {
    position: relative; height: 82px; overflow: hidden;
    border-bottom: 1px solid var(--line);
    transition: height .6s cubic-bezier(.65,0,.35,1);
  }
  .pa__item:last-child { border-bottom: 0; }
  .pa__item.is-open { height: 370px; }
  .pa__grid { display: flex; align-items: flex-start; gap: 40px; padding: 23px 50px; }
  .pa__item.is-open .pa__grid { padding-top: 60px; }   /* bigger gap above the open title + copy */
  .pa__head { display: flex; align-items: center; gap: 18px; flex: 0 0 50%; height: 36px; }
  .pa__icon {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid #d9d9d9; display: flex; align-items: center; justify-content: center;
    color: var(--orange); font-size: var(--text-sm); line-height: 1;
  }
  .pa__head h3 { font-size: 2.2rem; font-weight: 300; letter-spacing: -.02em; line-height: 1; margin: 0; transition: font-size .5s cubic-bezier(.65,0,.35,1); }
  /* The open row's title grows large (matches the real 4.25rem) and drops the icon. */
  .pa__item.is-open .pa__head { height: auto; align-items: flex-start; }
  .pa__item.is-open .pa__icon { display: none; }
  .pa__item.is-open .pa__head h3 { font-size: 4.25rem; line-height: .92; }
  .pa__body { flex: 1; opacity: 0; transition: opacity .45s ease .12s; }
  .pa__body p { font-size: var(--text-base); line-height: 1.38; color: #000; margin: 0 0 0 auto; max-width: 400px; }
  .pa__body p + p { margin-top: 1em; }
  .pa__item.is-open .pa__body { opacity: 1; }
}
.shero__cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3;
  font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.8);
}
.shero__cue span { display: inline-block; animation: shero-cue 2s ease-in-out infinite; }
@keyframes shero-cue { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }
/* Before GSAP initialises, keep the title readable and the image static */
.shero__img { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .shero__cue { display: none; } }
@media (max-width: 600px) {
  .shero__title { font-size: var(--hero-mobile); }
  .shero__phrase { font-size: var(--display-sm); width: 86%; }
}

/* ===== Portfolio page ===== */
.portfolio-intro { font-size: var(--display-sm); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; margin: 16px 0 0; max-width: 22em; }

/* Featured project cards: text + 3 portrait images */
/* Tighten the two inter-row gaps slightly: Seaway↔Sumner and Sumner↔Other Projects.
   Only the paddings that form those two gaps are trimmed (the space above Seaway is left as-is). */
.pf-project { padding-bottom: clamp(36px, 5vw, 76px); }
.pf-project + .pf-project { padding-top: calc(clamp(36px, 5vw, 76px) - 10px); }   /* Seaway↔Sumner: 10px tighter */
.pf-figure + .pf-project { padding-top: calc(clamp(60px, 9vw, 140px) + 30px); }   /* warehouse photo↔Seaway: 30px more */
.pf-other { padding-top: clamp(36px, 5vw, 76px); }
.pf-project__grid { display: flex; flex-direction: column; gap: clamp(24px, 4vw, 40px); }
.pf-project__title { font-size: var(--display-md); font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin: 0 0 16px; }
.pf-project__text p { font-size: var(--text-base); line-height: 1.55; color: #222; max-width: 46ch; }
/* Featured gallery: one large 3:4 image + two thumbnails to the right, hover swaps the big one. */
.pf-project__imgs .os__gallery { align-items: flex-start; justify-content: flex-end; gap: 1.8%; }   /* top-aligned + pushed right; thumbs intentionally a bit larger than the real site's 15% per Greg */
.pf-project__imgs .os__big { width: 37.6%; max-width: 416px; aspect-ratio: 3 / 4; }   /* big image scaled to 0.8 */
.pf-project__imgs .os__thumbs { flex: 0 0 36%; gap: 5%; align-items: flex-start; }
.pf-project__imgs .os__thumb { flex: 1 1 0; max-width: none; aspect-ratio: 3 / 4; }
/* Option A indicator (TRIAL — may revert): a small "expand" chip in the corner of each portfolio
   thumbnail so it reads as tappable on touch + desktop; turns orange on hover/focus.
   TO REVERT: replace this whole rule (and the :hover/:focus rule below) with
   `.pf-project__imgs .os__thumb::after { display: none; }`. */
.pf-project__imgs .os__thumb::after {
  display: block;
  inset: auto 6px 6px auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  box-shadow: none;
  background-color: rgba(27, 29, 26, 0.6);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%204h6v6'/%3E%3Cpath%20d='M20%204l-8%208'/%3E%3Cpath%20d='M10%2020H4v-6'/%3E%3Cpath%20d='M4%2020l8-8'/%3E%3C/svg%3E");
}
.pf-project__imgs .os__thumb:hover::after,
.pf-project__imgs .os__thumb:focus-visible::after { box-shadow: none; background-color: var(--orange); }
/* iPad mini (both orientations): all three images proportionately bigger — fills more of the gallery
   width while keeping the same big-to-thumb ratio (~47:17). */
@media (min-width: 641px) and (max-width: 1133px) {
  .pf-project__imgs .os__big { width: 43.2%; }   /* 54% scaled to 0.8 */
  .pf-project__imgs .os__thumbs { flex: 0 0 41%; }
}
@media (min-width: 861px) {
  /* Row layout; the grid keeps the standard .wrap gutter (it already has the .wrap class), so
     the title/text left-aligns with the rest of the page (intro, Sustainable Developments card). */
  .pf-project__grid {
    flex-direction: row; align-items: flex-start;   /* top-align the text block with the photos */
    gap: clamp(32px, 3vw, 48px);
  }
  .pf-project__text { flex: 0 0 26%; }
  .pf-project__imgs { flex: 1; }
}
/* Phone: the project photos become a one-at-a-time crossfade slideshow (swipe + clickable dots
   below + "1 / 3" counter pill), matching the Seaway/Sumner project pages. Desktop keeps the
   big-image + thumbnails layout. */
.os__count { display: none; }
.os__dots { display: none; }
@media (max-width: 640px) {
  .pf-project__imgs .os__gallery { display: block; }
  .pf-project__imgs .os__thumbs { display: none; }
  .pf-project__imgs .os__big { width: 100%; max-width: none; }   /* crossfade (default .os__big), not a horizontal scroller */
  .pf-project__imgs .os__count { display: block; }
  .pf-project__imgs .os__dots { display: flex; justify-content: center; gap: 10px; margin-top: clamp(14px, 4vw, 18px); }
}
/* Counter pill (bottom-right of the photo) */
.os__count { position: absolute; right: clamp(12px, 3vw, 16px); bottom: clamp(12px, 3vw, 16px); z-index: 2; background: var(--orange); color: #fff; font-size: var(--text-sm); font-weight: 500; line-height: 1; letter-spacing: .02em; padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
/* Clickable dots row below the photo */
.os__dots button { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; -webkit-appearance: none; appearance: none; }
.os__dots button::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.22); transition: background .3s; }
.os__dots button.is-active::before { background: var(--orange); }

/* Solid orange "Learn more" pill */
.pill-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding: 12px 22px; background: var(--orange); color: #fff; border-radius: 999px; font-size: var(--text-sm); font-weight: 500; text-decoration: none; width: max-content; transition: gap .25s ease; }
.pill-link:hover { gap: 18px; }
.pill-link__arrow { font-size: var(--text-base); line-height: 1; }

/* Other Projects: horizontal auto-scrolling strip */
.pf-other { overflow: hidden; }
.pf-strip { overflow: hidden; width: 100%; margin-top: 16px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }   /* JS moves the track via transform (auto-scroll + drag); pan-y keeps vertical page scroll on touch */
.pf-strip.is-dragging { cursor: grabbing; }
.pf-strip__track { display: inline-flex; will-change: transform; }
.pf-strip__track img { -webkit-user-drag: none; user-drag: none; }   /* don't let a mouse-drag grab the image */
.pf-tile { flex: 0 0 auto; width: clamp(255px, 30vw, 383px); margin-right: clamp(16px, 2vw, 28px); text-decoration: none; color: var(--ink); display: block; pointer-events: none; }   /* strip is a decorative showcase — tiles don't navigate; drag/swipe passes through to the strip */
.pf-tile img { width: 100%; aspect-ratio: 590 / 792; object-fit: cover; border-radius: 2px; display: block; }
.pf-tile__cap { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-size: var(--text-sm); }
.pf-tile__name { font-weight: 400; }
.pf-tile__year { color: #888; }
/* Other Projects tiles scaled ~1.2× bigger across all devices. */
@keyframes pf-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Sustainable Developments: white card over forest backdrop */
.pf-susdev { position: relative; padding: clamp(80px, 14vh, 150px) 0; overflow: hidden; }
.pf-susdev__bg { position: absolute; inset: 0; background: url(images/a85c4bb7b2b2b2671c0bc30938597741d7b9ba6b-2000x1178-1920w.jpg) center / cover; }
.pf-susdev__bg::after { content: ""; position: absolute; inset: 0; background: rgba(20,30,20,.12); }
.pf-susdev__card { position: relative; z-index: 1; background: #fff; border-radius: 16px; padding: clamp(26px, 3.6vw, 48px); display: flex; gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 1000px; margin: 0 auto; }
/* Reveal (class added on scroll-in; card is visible by default so it never ends up blank):
   1) white panel wipes down, 2) the video wipes down after it, 3) the heading fades in. */
@keyframes pf-susdev-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pf-susdev-fade { from { opacity: 0; } to { opacity: 1; } }
.pf-susdev__card.is-in { animation: pf-susdev-wipe 1.4s cubic-bezier(.65,0,.35,1) both; }
.pf-susdev__card.is-in .pf-susdev__img { animation: pf-susdev-wipe 1s cubic-bezier(.65,0,.35,1) 1s both; }
.pf-susdev__card.is-in .pf-susdev__title { animation: pf-susdev-fade .8s ease .7s both; }
@media (prefers-reduced-motion: reduce) {
  .pf-susdev__card.is-in,
  .pf-susdev__card.is-in .pf-susdev__img,
  .pf-susdev__card.is-in .pf-susdev__title { animation: none; }
}
.pf-susdev__text { flex: 1; }
.pf-susdev__title { font-size: var(--display-sm); font-weight: 300; letter-spacing: -0.02em; line-height: 1.04; margin: 0 0 16px; }
.pf-susdev__text p { font-size: var(--text-sm); line-height: 1.6; color: #333; max-width: 52ch; }
.pf-susdev__img { flex: 0 0 38%; }
.pf-susdev__img img, .pf-susdev__video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; display: block; }
@media (max-width: 760px) {
  .pf-susdev__card { flex-direction: column; align-items: flex-start; }
  .pf-susdev__img { flex-basis: auto; width: 100%; }
}
/* Tablet portrait (incl. iPad mini upright): float the card with equal margin on all four sides
   (left/right matches the top/bottom). The section padding becomes the sole inset, so zero the
   inner wrap's horizontal padding/max-width to keep the margins exactly symmetric. */
@media (min-width: 601px) and (max-width: 760px) {
  .pf-susdev { padding: clamp(80px, 14vh, 150px); }
  .pf-susdev > .wrap { max-width: none; padding-left: 0; padding-right: 0; }
}

/* Portfolio: tighten the gap around the full-width warehouse figure (~half). */
.pf-figure { padding-top: clamp(20px, 3vw, 46px); padding-bottom: clamp(20px, 3vw, 46px); margin-top: calc(-1 * clamp(30px, 4.5vw, 68px)); margin-bottom: calc(-1 * clamp(30px, 4.5vw, 68px)); }
@media (max-width: 760px) { .pf-figure .figure-full img { border-radius: 18px; } }   /* phone: rounded corners */

/* ===== Seaway West (project) page ===== */
.se-intro { padding: clamp(96px, 15vw, 168px) 0 clamp(18px, 3vw, 34px); }
.se-title { font-size: var(--display-xl); font-weight: 300; line-height: 1.0; letter-spacing: -0.04em; }
.se-lead { margin-top: clamp(18px, 2.5vw, 28px); font-size: var(--text-sm); font-weight: 300; max-width: 52ch; color: var(--ink); letter-spacing: -0.01em; }

/* Hero slideshow */
.se-slideshow { position: relative; width: 100%; aspect-ratio: 2480 / 1450; border-radius: clamp(12px, 1.4vw, 20px); overflow: hidden; background: #e7e5df; }
.se-slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.se-slideshow img.is-active { opacity: 1; }

/* About the project — label left, body right */
.se-about { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3vw, 30px); }
.se-about__body p { font-size: var(--display-xs); font-weight: 300; line-height: 1.3; letter-spacing: -0.02em; max-width: 30ch; }
.se-about__body p + p { margin-top: 1.1em; }
@media (min-width: 601px) and (max-width: 860px) {
  .se-about__body p { max-width: none; }   /* tablet portrait (iPad mini upright): let the body text run the full width, not a narrow phone column */
}
@media (min-width: 861px) {
  .se-about { grid-template-columns: 0.42fr 1fr; gap: clamp(30px, 5vw, 80px); }
  .se-about__body p { max-width: 46ch; }
}

/* Gallery 2x2 */
.se-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.se-gallery img { width: 100%; aspect-ratio: 1400 / 827; object-fit: cover; border-radius: 18px; display: block; }
@media (max-width: 900px) {
  .se-gallery { grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 33px); }   /* phones + tablet portrait (incl. iPad mini upright): 4 photos stacked, not a 2x2 grid */
  .se-gallery img { border-radius: 18px; }          /* rounded corners like the screenshot */
}

/* Tighten the gap between the gallery and the Floor Plans header by 30% (both widths):
   gallery section bottom padding + floor section top padding, each ×0.7. */
.section--tight:has(.se-gallery) { padding-bottom: clamp(28px, 4.2vw, 63px); }
.se-floor { padding-top: clamp(42px, 6.3vw, 98px); }

/* Floor Plans — heading + description left, animated SVG right */
.se-floor__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.se-floor__title { font-size: var(--display-md); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 18px; }
.se-floor__text p { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-soft); max-width: 40ch; }
.se-floor__canvas { width: 100%; }
.se-floor__canvas svg, .fp-svg { width: 100%; height: auto; max-height: 420px; display: block; overflow: visible; }
/* the plan reveals top-to-bottom (the orange outline traces as the wipe descends) */
@keyframes fp-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.fp-pending { font-size: var(--text-sm); color: var(--ink-soft); border: 1px dashed var(--line); padding: 40px; text-align: center; border-radius: 3px; }
@media (min-width: 861px) {
  .se-floor__grid { grid-template-columns: 0.5fr 1fr; gap: clamp(40px, 6vw, 90px); }
}

/* Seaway West hero slideshow — click-through arrow + tighter gap */
/* Image counter pill (bottom-right of the photo) — replaces the old next arrow */
.se-slideshow__count { position: absolute; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 2; background: var(--orange); color: #fff; font-size: var(--text-sm); font-weight: 500; line-height: 1; letter-spacing: .02em; padding: 11px 20px; border-radius: 999px; white-space: nowrap; }
/* Desktop: an orange circle follows the cursor over the hero — click the left half = previous, right half = next. */
.se-slideshow__cursor { display: none; position: absolute; top: 0; left: 0; z-index: 4; width: clamp(96px, 9vw, 120px); height: clamp(96px, 9vw, 120px); border-radius: 50%; background: var(--orange); color: #fff; align-items: center; justify-content: center; gap: 9px; font-size: var(--text-sm); font-weight: 500; letter-spacing: .02em; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; transition: opacity .25s ease; }
.se-slideshow__cur-arrow { font-size: var(--text-md); line-height: 1; opacity: .85; }
@media (hover: hover) {
  .se-slideshow { cursor: none; }                 /* replaced by the orange circle */
  .se-slideshow__cursor { display: flex; }
  .se-slideshow__count { display: none; }         /* the circle shows the count on desktop */
}
.se-hero-sec { padding-top: clamp(12px, 2vw, 28px); padding-bottom: clamp(12px, 2vw, 28px); margin-bottom: calc(-1 * clamp(28px, 4vw, 64px)); }

/* Fixed "Close" pill on project detail pages — returns to Portfolio */
.closepill { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 130; display: inline-flex; align-items: center; gap: 12px; background: #fff; border-radius: 999px; padding: 7px 24px 7px 7px; box-shadow: 0 14px 36px rgba(0,0,0,.18); color: var(--ink); }
.closepill__x { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #d9d9d9; display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); line-height: 1; }
.closepill__label { font-size: var(--text-sm); font-weight: 400; transition: color .2s ease; }
.closepill:hover .closepill__label { color: var(--orange); }
/* On project pages the Close pill takes the bottom-centre spot (matches the real site) */
body:has(.closepill) .navpill { display: none; }
@media (max-width: 600px) { .closepill { bottom: 18px; } }

/* Seaway/Sumner hero dots — centered row BELOW the photo (clickable to jump to a slide) */
.se-slideshow__dots { display: flex; justify-content: center; gap: 10px; margin-top: clamp(16px, 2.2vw, 24px); }
.se-slideshow__dots button { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; -webkit-appearance: none; appearance: none; }
.se-slideshow__dots button::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.22); transition: background .3s; }
.se-slideshow__dots button.is-active::before { background: var(--orange); }
.se-about-sec { padding-bottom: clamp(16px, 2.5vw, 34px); margin-bottom: calc(-1 * clamp(24px, 3.5vw, 56px)); }

/* Floor plan A/B switcher */
.fp-stage { display: grid; }
.fp-plan { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease; }
.fp-plan.is-active { opacity: 1; visibility: visible; }
.fp-which { margin-top: 18px; font-size: var(--text-sm); line-height: 1.6; color: var(--ink-soft); }
.fp-nav { display: flex; gap: 12px; margin-top: clamp(20px, 3vw, 32px); }
.fp-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #cfcdc6; background: transparent; color: var(--orange); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--text-base); line-height: 1; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.fp-arrow:hover { background: var(--orange); border-color: var(--orange); color: #fff; }