/* =========================================================
   Terra Architecture + Interior — Design System
   Earthy / biophilic palette. Vanilla CSS, no build step.
   ========================================================= */

:root {
  /* Palette */
  --clay: #B5623A;
  --clay-dark: #8C4A2F;
  --clay-light: #E8C4A8;
  --sage: #7C8B6E;
  --sage-dark: #5F6B54;
  --sand: #EFE6D3;
  --cream: #FBF7EF;
  --charcoal: #262420;
  --charcoal-soft: #4A463F;
  --line: #E1D8C4;
  --white: #FFFFFF;

  /* Type */
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --max-width: 1180px;
  --radius: 6px;
  --shadow: 0 8px 30px rgba(38, 36, 32, 0.08);
  --shadow-lift: 0 16px 40px rgba(38, 36, 32, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--charcoal);
}
h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-dark);
  font-weight: 700;
  margin-bottom: 0.9em;
}

.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--sand { background: var(--sand); }
.section--charcoal { background: var(--charcoal); color: var(--cream); }
.section--charcoal h2, .section--charcoal h3 { color: var(--cream); }
.section-head { max-width: 680px; margin: 0 0 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.lede { font-size: 1.15rem; color: var(--charcoal-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--clay); color: var(--cream); }
.btn-primary:hover { background: var(--clay-dark); box-shadow: var(--shadow-lift); }
.btn-outline { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-outline:hover { background: var(--charcoal); color: var(--cream); }
.btn-light { background: var(--cream); color: var(--charcoal); }
.btn-light:hover { background: var(--white); box-shadow: var(--shadow-lift); }
.btn-whatsapp { background: #25D366; color: #08341C; }
.btn-whatsapp:hover { background: #1EBE59; }
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.btn-block { width: 100%; justify-content: center; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 239, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: var(--charcoal);
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 1.1;
}
/* The globe mark is used as the favicon only — the header/footer lockup is
   the TERRA wordmark set in type, per the client's direction. */
/* .brand-text is itself a <span>, so the tagline rule must target only the
   nested span — a bare `.brand span` would also shrink the TERRA wordmark. */
.brand-text { display: flex; flex-direction: column; }
.brand-text > span { font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-dark); font-weight: 700; margin-top: 2px; }
.brand strong { color: var(--clay); }
@media (max-width: 420px) { .brand { font-size: 1.15rem; } }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--charcoal-soft);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a.active { color: var(--clay-dark); border-color: var(--clay); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--charcoal); margin: 6px 0; transition: transform .2s, opacity .2s; }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    transition: max-height .25s ease;
  }
  .nav-links.open { max-height: 420px; }
  .nav-links a { width: 100%; padding: 14px 24px; border-bottom: 1px solid var(--line); }
  .nav-cta .btn span.hide-mobile { display: none; }
}
@media (min-width: 881px) {
  .nav-cta .call-only { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: var(--cream);
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(38,36,32,0.88) 0%, rgba(38,36,32,0.62) 45%, rgba(38,36,32,0.4) 100%);
  z-index: 1;
}
.hero-content { position: relative; z-index: 2; padding: 80px 24px 64px; max-width: var(--max-width); margin: 0 auto; width: 100%; }
.hero-content .eyebrow { color: var(--clay-light); }
.hero-content h1 { color: var(--cream); max-width: 820px; }
.hero-content .lede { color: rgba(251,247,239,0.88); max-width: 640px; }

.page-hero { min-height: 58vh; }

/* An illustrated hero — a drawing rather than a photograph — arrives with its
   own typography baked in. The standard scrim darkens those labels but does
   not clear them, so the page's <h1> lands on top of somebody else's text.
   This variant adds a left-to-right wash: the text column reads clean while
   the drawing stays legible on the right, where nothing is overlaid. */
.hero--illus::after {
  background:
    linear-gradient(90deg, rgba(38,36,32,0.93) 0%, rgba(38,36,32,0.78) 44%,
                           rgba(38,36,32,0.34) 76%, rgba(38,36,32,0.24) 100%),
    linear-gradient(0deg,  rgba(38,36,32,0.55) 0%, rgba(38,36,32,0.18) 62%);
}
@media (max-width: 760px) {
  /* No room for a side-by-side split on a phone — fall back to a flat wash. */
  .hero--illus::after { background: linear-gradient(0deg, rgba(38,36,32,0.92) 0%, rgba(38,36,32,0.72) 55%, rgba(38,36,32,0.6) 100%); }
}

.page-hero .hero-content { padding: 60px 24px 48px; }

/* ---------- Trust strip ---------- */
.trust-strip { padding: 52px 0; border-bottom: 1px solid var(--line); }
.trust-strip .container { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: space-between; }
.trust-strip .label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--charcoal-soft); font-weight: 700; white-space: nowrap; }
/* These are the brochure's brand-coloured client cards, not flat logos on a
   transparent ground — so they are shown at a readable size and in full
   colour. Greyscaling and shrinking them to a 40px strip made them unreadable. */
.logo-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.logo-row img {
  height: 104px; width: auto;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(38,36,32,0.10);
  transition: transform .18s ease;
}
.logo-row img:hover { transform: translateY(-3px); }
@media (max-width: 760px) {
  .trust-strip .container { justify-content: center; }
  .logo-row { justify-content: center; gap: 10px; }
  .logo-row img { height: 78px; }
}

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-grid .stat b { display: block; font-family: var(--font-display); font-size: 2.2rem; color: var(--clay); }
.stat-grid .stat span { font-size: 0.85rem; color: var(--charcoal-soft); }
@media (max-width: 700px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Grids / Cards ---------- */
.grid { display: grid; gap: 32px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card .card-media { aspect-ratio: 4/3; overflow: hidden; background: var(--sand); }
.card .card-media img { width: 100%; height: 100%; object-fit: cover; }
.card .card-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.card .card-body h3 { margin-bottom: 8px; }
.card .card-body p { color: var(--charcoal-soft); font-size: 0.95rem; flex: 1; }
.card .card-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--clay-dark);
}
.tag--sage { background: rgba(124,139,110,0.16); color: var(--sage-dark); }
.tag--status { background: var(--charcoal); color: var(--cream); }

.icon-badge {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--sand);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-size: 1.5rem;
}

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 8px; }
.step .num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--clay-light);
  display: block;
  margin-bottom: 8px;
}

/* ---------- Filter tabs (projects page) ---------- */
.filter-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-tabs button {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--charcoal-soft);
  transition: all .15s ease;
}
.filter-tabs button.active, .filter-tabs button:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }

/* ---------- Project case-study page ---------- */
.project-meta-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); margin-bottom: 48px; }
.project-meta-bar div span { display: block; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--charcoal-soft); margin-bottom: 4px; }
.project-meta-bar div strong { font-family: var(--font-display); font-size: 1.05rem; }
@media (max-width: 760px) { .project-meta-bar { grid-template-columns: repeat(2, 1fr); } }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 40px 0; }
@media (max-width: 760px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
.gallery-grid img {
  border-radius: var(--radius);
  aspect-ratio: 4/3;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-grid img:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* ---------- Lightbox (full-screen gallery viewer) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(20, 18, 16, 0.94);
  display: none;
  align-items: center; justify-content: center;
  padding: 40px 68px;
  opacity: 0;
  transition: opacity .22s ease;
}
/* Column layout so the caption sits BELOW the photo and can never overlap it. */
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox { flex-direction: column; gap: 16px; }
.lightbox img {
  max-width: 100%;
  min-height: 0;            /* lets the image shrink inside the flex column */
  flex: 0 1 auto;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  /* No transition on the image itself — swapping src mid-fade looks broken. */
}
.lightbox-caption {
  flex: 0 0 auto;
  margin: 0;
  color: rgba(251,247,239,0.82);
  font-size: 0.86rem; letter-spacing: 0.02em;
  text-align: center; max-width: 70%;
}
/* The floating WhatsApp bubble must not sit on top of the viewer. */
body.lb-locked .float-whatsapp { opacity: 0; pointer-events: none; }
.float-whatsapp { transition: opacity .2s ease, transform .15s ease; }
.lightbox-count {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  color: rgba(251,247,239,0.6);
  font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.lb-btn {
  position: absolute;
  background: rgba(251,247,239,0.10);
  border: 1px solid rgba(251,247,239,0.22);
  color: var(--cream);
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; line-height: 1;
  transition: background .15s ease, transform .15s ease;
}
.lb-btn:hover { background: rgba(251,247,239,0.22); transform: scale(1.06); }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 16px; top: 50%; margin-top: -23px; }
.lb-next { right: 16px; top: 50%; margin-top: -23px; }
@media (max-width: 620px) {
  .lightbox { padding: 20px 12px 70px; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
  .lb-btn { width: 40px; height: 40px; }
}
/* Body doesn't scroll behind the open lightbox */
body.lb-locked { overflow: hidden; }

.prose { max-width: 760px; }
.prose h2 { margin-top: 1.6em; }
.prose img { border-radius: var(--radius); margin: 1.4em 0; }
.prose blockquote {
  border-left: 3px solid var(--clay);
  margin: 1.8em 0;
  padding: 0.2em 0 0.2em 24px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--charcoal-soft);
}

/* ---------- Blog ---------- */
.post-meta { font-size: 0.85rem; color: var(--charcoal-soft); margin-bottom: 6px; }
.post-meta .dot { margin: 0 6px; }
.author-box { display: flex; gap: 16px; align-items: center; padding: 24px; background: var(--sand); border-radius: var(--radius); margin: 48px 0; }
.author-box img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.related-posts { margin-top: 60px; }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--sage);
  color: var(--cream);
  border-radius: 16px;
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-banner h2 { color: var(--cream); margin-bottom: 6px; }
.cta-banner p { color: rgba(251,247,239,0.85); margin: 0; }

/* ---------- Enquiry form (contact page) ---------- */
.form-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  margin-bottom: 7px;
}
.field .req { color: var(--clay); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--charcoal);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(181, 98, 58, 0.14);
}
.field input::placeholder, .field textarea::placeholder { color: #A79E8C; }
.form-note { font-size: 0.85rem; color: var(--charcoal-soft); margin-top: 14px; }
/* The honeypot: a real input that only a bot would fill in. Hidden from
   sighted users, screen readers and the tab order alike. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Enquiry checklist (contact page) ---------- */
.checklist { background: var(--white); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.checklist li { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.checklist li::before { content: "✓"; color: var(--sage-dark); font-weight: 700; flex-shrink: 0; }

.contact-block { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 28px; }
.contact-block .icon-badge { margin-bottom: 0; flex-shrink: 0; }
.contact-block h3 { margin-bottom: 4px; }
.contact-block a { color: var(--clay-dark); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: var(--sand); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.site-footer h4 { color: var(--cream); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 18px; }
.site-footer .brand { color: var(--cream); }
.site-footer .brand-text > span { color: var(--sage); }
.site-footer .brand strong { color: var(--clay-light); }
.site-footer p { color: rgba(239,230,211,0.7); font-size: 0.92rem; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer a { color: rgba(239,230,211,0.85); font-size: 0.92rem; }
.site-footer a:hover { color: var(--cream); }
.footer-bottom { border-top: 1px solid rgba(239,230,211,0.15); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; color: rgba(239,230,211,0.55); }

/* ---------- Floating WhatsApp ---------- */
.float-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  background: #25D366;
  color: #08341C;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  font-size: 1.6rem;
  transition: transform .15s ease;
}
.float-whatsapp:hover { transform: scale(1.08); }

/* =========================================================
   FEATURED PROJECT SHOWCASE — the on-load scroll reveal
   Homepage only. The image sits fixed behind a scrolling
   foreground, so the project "reveals" as the visitor scrolls.
   Swap which project appears by editing the FEATURED block at
   the top of scripts/gen_index.py (see README).
   ========================================================= */
.showcase {
  position: relative;
  height: 100vh;              /* no-JS / no-motion default: one static screen */
  margin-bottom: 0;
}
/* With JS the section grows a scroll runway — one screen to hold the opening
   project, then ~85vh of scroll per additional project in the reel.
   --layers is set inline by the generator from the SHOWCASE list length. */
.js .showcase { height: calc(100vh + (var(--layers, 1) - 1) * 85vh); }
.showcase-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Each project in the reel is a full-bleed layer stacked in the same box.
   Only the first is visible by default, so with no JS the landing is simply a
   single static featured project rather than every image piled on top of
   each other. */
.showcase-layers { position: absolute; inset: 0; z-index: 1; }
.showcase-layer { position: absolute; inset: 0; opacity: 0; }
.showcase-layer:first-child { opacity: 1; }

.showcase-media { position: absolute; inset: 0; z-index: 0; }
.showcase-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Opening scale-down only applies to the first layer's image. */
.showcase-layer:first-child .showcase-media img {
  transform: scale(1.18);
  animation: showcase-in 1.8s cubic-bezier(.16,.84,.44,1) forwards;
}
.showcase-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38,36,32,0.55) 0%, rgba(38,36,32,0.35) 40%, rgba(38,36,32,0.9) 100%);
}
@keyframes showcase-in { to { transform: scale(1); } }

/* The clay curtain that wipes away on load to unveil the image */
.showcase-curtain {
  position: absolute; inset: 0;
  background: var(--clay);
  z-index: 3;
  transform-origin: top;
  animation: curtain-lift 1.5s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes curtain-lift {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: top; }
}

.showcase-content {
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: var(--cream);
  padding: 0 24px;
  max-width: 900px;
}
/* Copy for layers 2+ rises in as that project becomes the active one.
   Scoped to .js so the no-JS landing keeps its first project readable. */
.js .showcase-layer:not(:first-child) .showcase-content {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 26px));
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
.js .showcase-layer:not(:first-child).is-active .showcase-content {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Project rail — which project you're on, and a way to jump between them */
.showcase-rail {
  position: absolute;
  right: 32px; top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex; flex-direction: column; gap: 14px;
  align-items: flex-end;
}
.showcase-rail button {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  color: rgba(251,247,239,0.55);
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 0;
  transition: color .25s ease;
}
.showcase-rail button i {
  display: block; width: 26px; height: 2px;
  background: rgba(251,247,239,0.45);
  transition: width .3s cubic-bezier(.16,.84,.44,1), background .25s ease;
}
.showcase-rail button:hover { color: rgba(251,247,239,0.9); }
.showcase-rail button.is-active { color: var(--cream); }
.showcase-rail button.is-active i { width: 52px; background: var(--clay-light); }
@media (max-width: 900px) { .showcase-rail { display: none; } }
.showcase-content .eyebrow { color: var(--clay-light); }
.showcase-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 1.02;
  color: var(--cream);
  margin: 0 0 18px;
}
.showcase-sub {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: rgba(251,247,239,0.9);
  max-width: 620px;
  margin: 0 auto 12px;
}
.showcase-meta {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 28px;
}
.showcase-meta span {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(251,247,239,0.4); color: rgba(251,247,239,0.92);
}

/* Each line of the showcase copy rises in sequence after the curtain lifts */
.reveal-line { opacity: 0; transform: translateY(28px); animation: line-up .9s cubic-bezier(.16,.84,.44,1) forwards; }
.reveal-line:nth-child(1) { animation-delay: 1.15s; }
.reveal-line:nth-child(2) { animation-delay: 1.30s; }
.reveal-line:nth-child(3) { animation-delay: 1.45s; }
.reveal-line:nth-child(4) { animation-delay: 1.60s; }
.reveal-line:nth-child(5) { animation-delay: 1.75s; }
@keyframes line-up { to { opacity: 1; transform: translateY(0); } }

.scroll-cue {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  color: rgba(251,247,239,0.75);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0;
  animation: line-up .8s ease 2.1s forwards;
}
.scroll-cue i {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(180deg, rgba(251,247,239,0.8), rgba(251,247,239,0));
  animation: cue-slide 1.9s ease-in-out infinite;
}
@keyframes cue-slide { 0%,100% { transform: scaleY(.4); opacity:.4; } 50% { transform: scaleY(1); opacity:1; } }

@media (max-width: 700px) {
  .js .showcase { height: calc(100vh + (var(--layers, 1) - 1) * 70vh); }
}

/* ---------- Scroll-triggered reveals (used site-wide) ---------- */
/* Scoped to .js — a one-line inline script in <head> adds that class. Without
   JavaScript (or if the script fails) the rule never applies and every section
   renders plainly visible, so the content is never hidden behind an animation
   that didn't run. Crawlers and reader modes see it too. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .09s; }
[data-reveal-delay="2"] { transition-delay: .18s; }
[data-reveal-delay="3"] { transition-delay: .27s; }
[data-reveal-delay="4"] { transition-delay: .36s; }
[data-reveal-delay="5"] { transition-delay: .45s; }

/* Anyone who has asked their OS for less motion gets the page with no
   movement at all — content is simply visible from the start. */
@media (prefers-reduced-motion: reduce) {
  .js .showcase, .showcase { height: 88vh; }
  .showcase-sticky { position: relative; height: 88vh; }
  .showcase-curtain { display: none; }
  .showcase-layer:first-child .showcase-media img { animation: none; transform: none; }
  .showcase-layer:not(:first-child) { display: none; }  /* single static project */
  .showcase-rail, .scroll-cue { display: none; }
  .reveal-line { animation: none; opacity: 1; transform: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.small { font-size: 0.85rem; color: var(--charcoal-soft); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--clay); color: var(--cream); padding: 10px 16px; z-index: 999; }
.skip-link:focus { left: 12px; top: 12px; }