/* ==========================================================================
   Grain & Co — styles.css
   Built from Figma "Refined Design 02 V2" (node 152:2)
   Static state only — no animation/motion yet (to be added later).

   Layout note: the Figma frame authors every element with absolute pixel
   positions nested many layers deep. Rather than fight fragile cross-section
   offset math, each content block below is reproduced as its own self
   contained section at the Figma-specified width/height/colors/typography,
   stacked in the page's natural reading order. Decorative/overlapping
   elements *within* a section keep Figma's exact local absolute coordinates.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400&display=swap');

/* ---- Self-hosted fonts ----------------------------------------------------
   Cinzel and Mundial are the real Figma fonts, licensed and supplied as
   local files in css/fonts/. Jost (small uppercase labels only) stays on
   Google Fonts above — it's free and wasn't supplied locally.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mundial';
  src: url('fonts/MundialThin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('fonts/MundialHair.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('fonts/MundialLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('fonts/MundialLightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('fonts/MundialRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('fonts/MundialItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('fonts/MundialDemibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('fonts/MundialDemiboldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('fonts/MundialBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('fonts/MundialBoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('fonts/MundialBlack.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('fonts/MundialBlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --c-page-bg: #f2f0e7;
  --c-app-bg: #f5f1e8;
  --c-subtle-bg: #ede9df;
  --c-ink: #2b2a26;
  --c-ink-soft: #636363;
  --c-gold: #977653;
  --c-gold-mid: #937758;
  --c-tan: #a18d81;
  --c-tan-light: #c8b190;
  --c-border-warm: #9d8e83;
  --c-divider: #d8d1c5;
  --c-nav-btn: #d7d0c4;
  --c-footer-bg: #e8e2d8;
  --c-cream: #f5f1e8;
  --c-white: #ffffff;

  --f-serif: 'Cinzel', serif;
  --f-sans: 'Mundial', sans-serif;
  --f-label: 'Jost', sans-serif;

  --canvas-w: 1920px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar { display: none; }
body {
  background: var(--c-page-bg);
  font-family: var(--f-sans);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.scale-wrap { width: 100%; }
.page {
  position: relative;
  width: 100%;
  max-width: var(--canvas-w);
  margin: 0 auto;
  background: var(--c-page-bg);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ---- Reusable primitives ------------------------------------------------ */
.eyebrow {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-gold);
}
.eyebrow--on-dark { color: var(--c-tan-light); }

.hr-mark { display: block; width: 81px; height: 1px; }
.hr-mark img { width: 100%; height: 100%; display: block; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 32px;
  background: var(--c-tan);
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s ease, border-color .45s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
@media (max-width: 480px) {
  .btn {
    white-space: normal;
    height: auto;
    min-height: 46px;
    padding: 12px 24px;
    text-align: center;
    line-height: 1.4;
  }
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  transform: translateY(102%);
  transition: transform .45s cubic-bezier(.65,0,.35,1);
  z-index: -1;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(43, 42, 38, 0.18);
}
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(43,42,38,0.14); }
.btn--ghost {
  background: rgba(250, 249, 247, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.57);
  color: var(--c-tan);
}
.btn--ghost:hover { color: var(--c-cream); border-color: var(--c-ink); }
.btn--nav {
  background: var(--c-nav-btn);
  border: 1px solid var(--c-cream);
  color: var(--c-ink);
  height: 38px;
  padding: 0 22px;
}
.btn--nav:hover { color: var(--c-cream); border-color: var(--c-ink); }
.btn--nav::before { background: var(--c-gold); }
.btn--outline { background: transparent; border: 1px solid var(--c-tan); color: var(--c-tan); }
.btn--outline:hover { color: var(--c-cream); border-color: var(--c-ink); }
.btn--sm { height: 40px; padding: 0 24px; font-size: 10px; }

.heading-xl {
  font-family: var(--f-serif);
  font-weight: 400;
  color: var(--c-ink);
  text-align: center;
  margin: 0;
}
.heading-lg {
  font-family: var(--f-serif);
  font-weight: 400;
  color: var(--c-ink);
  margin: 0;
}
.heading-xl--on-dark, .heading-lg--on-dark { color: var(--c-white); }

.body-copy {
  font-family: var(--f-sans);
  font-weight: 300;
  color: var(--c-ink-soft);
  font-size: 21px;
  line-height: 37px;
  margin: 0;
}
.body-copy--on-dark { color: var(--c-white); font-weight: 400; }
.body-copy--center { text-align: center; }

/* ---- Scroll reveal (fade in + rise) -------------------------------------
   Applied via [data-reveal]; JS toggles .is-revealed when the element
   crosses into view. .no-js keeps everything visible if GSAP fails to load.
   ------------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   HOMEPAGE-ONLY logo entrance: big + white over the hero, shrinking and
   crossfading to black as it settles into the shared nav's centred logo
   slot on scroll (see initHeroLogoAnim in main.js). Interior pages don't
   render this element at all — they just show .site-nav__logo, static,
   always dark, with no animation.
   ========================================================================== */
.hero-logo-anim {
  position: fixed;
  left: 50%;
  top: 165px;
  width: clamp(220px, 60vw, 560px);
  transform: translateX(-50%);
  z-index: 101;
  transform-origin: 50% 0%;
  pointer-events: none;
}
.hero-logo-anim__img { width: 100%; height: auto; display: block; }
.hero-logo-anim__img--dark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  filter: brightness(0) saturate(100%);
}
.no-js .hero-logo-anim { display: none; }

/* ==========================================================================
   HERO
   (Header/nav now lives in the unified .site-nav component — see the
   "Unified site navigation" block further down — shared verbatim between
   the homepage and every other page.)
   ========================================================================== */
.hero {
  position: relative;
  width: 100%;
}
.hero__pin {
  position: relative;
  width: 100%;
  height: 860px;
  min-height: 100vh;
  overflow: hidden;
  background: #0d0d0d;
}
.hero__bg {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  object-fit: cover;
  object-position: center 30%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0) 70%);
}
.hero__counter {
  position: absolute;
  right: clamp(24px, 6vw, 94px);
  top: clamp(20px, 4vw, 40px);
  font-family: var(--f-label);
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.25);
}
.hero__content {
  position: absolute;
  left: 50%;
  top: clamp(360px, 62vh, 600px);
  width: 92%;
  max-width: 780px;
  box-sizing: border-box;
  transform: translateX(-50%) translateY(24px);
  text-align: center;
  color: var(--c-white);
  opacity: 0;
}
.no-js .hero__content { opacity: 1; transform: translateX(-50%); }
.hero__heading {
  font-size: clamp(27px, 5.6vw, 39px);
  line-height: clamp(34px, 7vw, 50px);
}
.hero__copy {
  margin-top: 25px;
}
.hero__ctas {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 16px;
}
@media (min-width: 540px) {
  .hero__ctas { gap: 29px; }
}

/* ==========================================================================
   SECTION: "Every part matters" (01 / Recognition)
   ========================================================================== */
.intro {
  position: relative;
  width: 100%;
  background: var(--c-page-bg);
}
.intro__pin {
  width: 100%;
  min-height: 100vh;
  padding: clamp(90px, 16vw, 150px) 0 clamp(70px, 14vw, 160px);
  background: var(--c-page-bg);
  box-sizing: border-box;
}
.intro__grid {
  display: flex;
  align-items: center;
  gap: clamp(36px, 5vw, 90px);
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .intro__grid { padding: 0 40px; }
}
@media (max-width: 960px) {
  .intro__grid { flex-direction: column; }
}
.intro__text {
  flex: 1 1 500px;
  min-width: 0;
  padding-top: 10px;
}
@media (max-width: 960px) {
  .intro__text { flex: 1 1 100%; width: 100%; }
}
.intro__eyebrow { display: block; }
.intro__eyebrow-sub {
  display: block;
  max-width: 433px;
}
.intro__heading-stack {
  position: relative;
  margin: 56px 0 0;
  min-height: 100px;
}
.intro__heading {
  width: 100%;
  font-size: clamp(26px, 4.2vw, 39px);
  line-height: clamp(34px, 5.4vw, 50px);
}
.intro__heading--stage {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.intro__heading--stage.is-active { opacity: 1; }
.intro__rule { margin: 28px 0 0; }
.intro__copy-stack {
  position: relative;
  margin: 49px 0 0;
  min-height: 112px;
}
.intro__copy {
  width: 100%;
}
.intro__copy--stage {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.intro__copy--stage.is-active { opacity: 1; }
.intro__stages {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin: 44px 0 0;
}
@media (max-width: 480px) {
  .intro__stages { gap: 14px 24px; }
}
.intro__stage {
  font-family: var(--f-label);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(43, 42, 38, 0.3);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(43, 42, 38, 0.12);
  transition: color .5s ease, border-color .5s ease;
}
.intro__stage.is-active {
  color: var(--c-gold);
  border-color: var(--c-gold);
}
.intro__art-sticky {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}
@media (max-width: 960px) {
  .intro__art-sticky { flex: 1 1 100%; justify-content: center; width: 100%; }
}
.intro__art-frame {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 760 / 460;
  overflow: hidden;
  background: var(--c-subtle-bg);
}
.intro__art-frame img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 300%;
  aspect-ratio: 3 / 1;
  transform: translateY(-50%);
  will-change: transform;
}

/* ==========================================================================
   SECTION: Timber texture band ("you do not need to become…")
   ========================================================================== */
.pitch {
  position: relative;
  width: 100%;
  min-height: 647px;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 90px 24px;
}
.pitch__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pitch__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,0.51) 70%, rgba(13,13,13,0) 100%);
}
.pitch__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 915px;
  margin: 0 auto;
  text-align: center;
}
.pitch__heading {
  color: var(--c-white);
  font-size: clamp(26px, 4.6vw, 39px);
  line-height: clamp(34px, 6.2vw, 52.8px);
}
.pitch__rule { margin: 24px auto 0; }
.pitch__copy {
  margin: 30px auto 0;
  width: 100%;
  max-width: 780px;
  color: var(--c-white);
  font-family: var(--f-sans);
  font-weight: 400;
}
.pitch__ctas {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ==========================================================================
   STATEMENT: "a premium timber frame system…"
   ========================================================================== */
.statement {
  position: relative;
  width: 100%;
  padding: clamp(90px, 15vw, 160px) 24px clamp(64px, 11vw, 120px);
  background: var(--c-app-bg);
  text-align: center;
  box-sizing: border-box;
}
.statement__heading {
  width: 100%;
  max-width: 1068px;
  margin: 0 auto;
  font-size: clamp(27px, 4.4vw, 41px);
  line-height: clamp(35px, 5.6vw, 50.4px);
}
.statement__rule { margin: 28px auto 0; }
.statement__copy {
  width: 100%;
  max-width: 1137px;
  margin: 24px auto 0;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(16px, 2vw, 21px);
  line-height: clamp(26px, 3.4vw, 37px);
  color: var(--c-ink-soft);
}
.statement__cta { margin-top: 40px; }

/* ==========================================================================
   GALLERY: Finish / Weather / Timber & Insulation / Internal Layer
   ========================================================================== */
.gallery {
  position: relative;
  width: 100%;
  height: 540px;
  display: flex;
  margin-bottom: 170px;
}
.gallery__tile {
  position: relative;
  height: 540px;
  overflow: hidden;
  flex: 1 1 0%;
  cursor: pointer;
}
@media (max-width: 900px) {
  .gallery { flex-wrap: wrap; height: auto; margin-bottom: 90px; }
  .gallery__tile { flex: 1 1 50%; height: 320px; }
}
@media (max-width: 540px) {
  .gallery { flex-direction: column; }
  .gallery__tile { flex: 0 0 260px; height: 260px; }
}
.gallery__media { position: absolute; inset: 0; }
.gallery__media img,
.gallery__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 1.4s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}
.gallery__media video { opacity: 0; }
.gallery__tile:hover .gallery__media img,
.gallery__tile:hover .gallery__media video { transform: scale(1.12); }
.gallery__tile.is-playing .gallery__media img { opacity: 0; }
.gallery__tile.is-playing .gallery__media video { opacity: 1; }
.gallery__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,0.72) 0%, rgba(13,13,13,0.1) 45%, rgba(13,13,13,0) 70%);
  transition: opacity .5s ease;
}
.gallery__tile:hover .gallery__scrim { opacity: 0.85; }
.gallery__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity .7s cubic-bezier(.22,1,.36,1);
}
.gallery.has-hover .gallery__tile:not(:hover)::after { opacity: 0.22; }
.gallery__label {
  position: absolute;
  left: 50%;
  bottom: 51px;
  transform: translateX(-50%);
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--c-white);
  white-space: nowrap;
  transition: transform .5s cubic-bezier(.22,1,.36,1), letter-spacing .5s ease;
}
.gallery__tile:hover .gallery__label { transform: translateX(-50%) translateY(-6px); letter-spacing: 5px; }

/* ==========================================================================
   RELATIONSHIP ROW: construction photo + "You speak to Grain" card
   ========================================================================== */
.relationship {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.relationship__photo {
  flex: 0 0 964px;
  height: 886px;
  overflow: hidden;
}
.relationship__photo img { width: 100%; height: 100%; object-fit: cover; }
.quote-card {
  flex: 1;
  background: rgba(211, 201, 191, 0.66);
  display: flex;
  align-items: center;
  padding: 100px 150px 100px 100px;
  box-sizing: border-box;
}
.quote-card__eyebrow { display: block; }
.quote-card__heading {
  margin-top: 16px;
  font-size: clamp(27px, 4.8vw, 45px);
  line-height: clamp(35px, 6.2vw, 54.28px);
}
.quote-card__rule { margin-top: 32px; }
.quote-card__copy {
  margin-top: 16px;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(16px, 2vw, 21px);
  line-height: clamp(26px, 3.4vw, 37px);
  color: var(--c-ink-soft);
}
.quote-card__cta { margin-top: 32px; }
@media (max-width: 1100px) {
  .relationship__photo { flex: 1 1 100%; height: 50vh; min-height: 320px; }
  .quote-card { flex: 1 1 100%; padding: 56px 32px; }
}
@media (max-width: 560px) {
  .quote-card { padding: 48px 24px; }
}

/* ==========================================================================
   "Where are you in your project?" + Accordion
   ========================================================================== */
.explore {
  background: var(--c-subtle-bg);
  padding: clamp(60px, 10vw, 90px) 24px clamp(70px, 12vw, 110px);
  text-align: center;
  box-sizing: border-box;
}
.explore__eyebrow { display: block; }
.explore__heading {
  margin: 20px auto 0;
  width: 100%;
  max-width: 673px;
  font-size: clamp(26px, 4.2vw, 39px);
  line-height: clamp(34px, 5.4vw, 50px);
}
.accordion {
  width: 100%;
  max-width: 947px;
  margin: 56px auto 0;
  text-align: left;
}
.accordion__item {
  border-bottom: 0.868px solid var(--c-border-warm);
}
.accordion__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 32px 0;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: padding-left .4s cubic-bezier(.22,1,.36,1);
}
.accordion__row:hover { padding-left: 10px; }
.accordion__label {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 23.4px;
  color: var(--c-ink);
  transition: color .3s ease;
}
.accordion__row:hover .accordion__label,
.accordion__row[aria-expanded="true"] .accordion__label { color: var(--c-gold); }
.accordion__icon {
  font-family: var(--f-label);
  font-weight: 300;
  font-size: 19px;
  line-height: 1;
  color: var(--c-tan-light);
  padding-left: 40px;
  display: inline-block;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.accordion__row[aria-expanded="true"] .accordion__icon { transform: rotate(135deg); color: var(--c-gold); }
.accordion__panel-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.22,1,.36,1);
}
.accordion__panel {
  padding: 0 0 28px;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 26px;
  color: var(--c-ink-soft);
  max-width: 700px;
  margin: 0;
}

/* ==========================================================================
   "From engineered frame supply…" + stage labels + process photo
   Pinned & scrubbed: .capability__pin is held in place by ScrollTrigger
   while the user scrolls through the section; stage labels blur/sharpen,
   the central photo crossfades and the proof cards light up in sync.
   ========================================================================== */
.capability {
  position: relative;
  width: 100%;
  background: var(--c-app-bg);
  text-align: center;
  overflow: hidden;
}
.capability__pin {
  width: 100%;
  min-height: 100vh;
  padding-top: 53px; /* clears the compact sticky header */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.capability__heading {
  width: 100%;
  max-width: 1432px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  font-size: clamp(23px, 3.6vw, 35px);
  line-height: clamp(30px, 4.6vw, 44px);
}
.capability__stage-wrap {
  position: relative;
  width: 100%;
  max-width: 1560px;
  height: clamp(320px, 46vh, 400px);
  margin: 36px auto 0;
  padding: 0 24px;
  box-sizing: border-box;
}
@media (max-width: 1607px) {
  .capability__stage-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 18px 16px;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 28px auto 0;
    padding: 0 24px;
  }
}
.stage-label {
  position: absolute;
  width: 280px;
  text-align: center;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 32px;
  margin: 0;
  filter: blur(6px);
  opacity: 0.32;
  color: var(--c-ink);
  transition: filter .6s ease, opacity .6s ease, color .6s ease;
}
.stage-label.is-done { filter: blur(0); opacity: 0.55; }
.stage-label.is-active { filter: blur(0); opacity: 1; color: var(--c-gold); }
.stage-label--supply   { left: 155px;     top: 6%;  width: 210px; transform: translateX(-50%); }
.stage-label--erection { left: 155px;     top: 44%; transform: translateX(-50%); }
.stage-label--shell    { left: 155px;     top: 82%; transform: translateX(-50%); }
.stage-label--turnkey  { left: 1441px;    top: 44%; transform: translateX(-50%); }
.stage-label--managed  { left: 1441px;    top: 6%;  width: 210px; transform: translateX(-50%); }
@media (max-width: 1607px) {
  .stage-label,
  .stage-label--supply,
  .stage-label--erection,
  .stage-label--shell,
  .stage-label--turnkey,
  .stage-label--managed {
    position: static;
    left: auto; top: auto;
    width: auto;
    max-width: 140px;
    flex: 0 1 auto;
    transform: none;
    font-size: 14px;
    line-height: 19px;
  }
}
.capability__photo {
  position: absolute;
  left: 50%;
  top: 0;
  width: 460px;
  height: 100%;
  transform: translateX(-50%);
  overflow: hidden;
}
@media (max-width: 1607px) {
  .capability__photo {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 100%;
    max-width: 280px;
    height: 210px;
    order: -1;
    flex: 1 1 100%;
    margin: 0 auto;
  }
}
.capability__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s ease, transform 1.2s ease;
}
.capability__photo img.is-active { opacity: 1; transform: scale(1); }

.capability__proof { position: relative; width: 100%; max-width: 1540px; margin: 46px auto 0; padding: 0 24px; box-sizing: border-box; }

/* ==========================================================================
   PROOF GRID — one set of 3 cards per stage, swapped (not highlighted) as
   the stage changes: the outgoing set fades out while the incoming set,
   with fresh copy, fades in on top of it.
   ========================================================================== */
.proof__set {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.proof__set.is-active { opacity: 1; pointer-events: auto; }
.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px;
  text-align: left;
}
@media (max-width: 860px) {
  .proof__grid { grid-template-columns: 1fr; gap: 28px; }
}
.proof__card {
  padding-left: 22px;
  border-left: 2px solid var(--c-gold);
}
.proof__card-top-rule {
  display: block;
  width: 56px;
  height: 1px;
  margin-bottom: 18px;
  background: var(--c-gold);
}
.proof__card h4 {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--c-gold);
}
.proof__card p {
  margin-top: 12px;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 21px;
  color: var(--c-ink);
  opacity: 1;
}

/* ==========================================================================
   TIMELINE: "Each stage answers the question…" — pinned, with its photo
   sticking alongside it while a fuse travels left-to-right across the steps.
   ========================================================================== */
.timeline {
  position: relative;
  width: 100%;
  background: var(--c-subtle-bg);
  overflow: hidden;
}
.timeline__pin {
  width: 100%;
  padding-bottom: 40px;
}
.timeline__image {
  width: 100%;
  height: clamp(264px, 40.8vh, 408px);
  overflow: hidden;
}
.timeline__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.timeline__inner {
  width: 100%;
  max-width: 1540px;
  margin: 40px auto 0;
  padding: 0 24px;
  box-sizing: border-box;
  text-align: center;
}
.timeline__heading {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(24px, 3.8vw, 33px);
  line-height: clamp(31px, 5vw, 42px);
  text-align: center;
}
.timeline__track {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--c-divider);
  margin-top: 40px;
}
.timeline__track-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 1px;
  background: linear-gradient(90deg, var(--c-gold-mid), var(--c-gold));
  box-shadow: 0 0 10px 1px rgba(151, 118, 83, 0.55);
}
.timeline__dot {
  position: absolute;
  left: 0%;
  top: -5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 3px var(--c-subtle-bg), 0 0 0 4px var(--c-gold), 0 0 16px 3px rgba(151, 118, 83, 0.7);
  transform: translateX(-50%);
}
.timeline__steps {
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
}
.timeline__step {
  flex: 1;
  min-width: 0;
  text-align: center;
  transition: opacity .4s ease;
}
@media (max-width: 760px) {
  .timeline__steps { gap: 16px 0; }
  .timeline__step { flex: 1 1 33.33%; }
}
@media (max-width: 420px) {
  .timeline__step { flex: 1 1 50%; }
}
.timeline__step-num {
  display: block;
  font-family: var(--f-serif);
  font-size: 19px;
  letter-spacing: 1.2px;
  color: var(--c-tan-light);
  transition: color .4s ease;
}
.timeline__step--active .timeline__step-num { color: var(--c-gold-mid); }
.timeline__step-label {
  display: block;
  margin-top: 8px;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.39px;
  color: var(--c-border-warm);
  transition: color .4s ease;
}
.timeline__step--active .timeline__step-label { color: var(--c-ink); }
.timeline__detail {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 36px auto 0;
  min-height: 65px;
  text-align: center;
}
.timeline__detail-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: var(--c-ink-soft);
  opacity: 0;
  transition: opacity .5s ease;
}
.timeline__detail-text.is-active { opacity: 1; }

/* ==========================================================================
   GUIDES SECTION (useful next reads)
   ========================================================================== */
.guides {
  background: rgba(211, 201, 191, 0.66);
  padding: 74px 24px 0;
  text-align: center;
  box-sizing: border-box;
}
.guides__eyebrow { display: block; }
.guides__rule { margin: 24px auto 0; }
.guides__heading {
  width: 100%;
  max-width: 895px;
  margin: 24px auto 0;
  font-size: clamp(27px, 4.6vw, 43px);
  line-height: clamp(35px, 6vw, 52.8px);
}
.guides__cards {
  display: flex;
  flex-wrap: wrap;
  margin-top: 67px;
}
.guide-card {
  position: relative;
  height: 520px;
  overflow: hidden;
  flex: 1;
  cursor: pointer;
}
@media (max-width: 860px) {
  .guides__cards { flex-direction: column; }
  .guide-card { height: 380px; flex: 0 0 380px; }
}
.guide-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.guide-card:hover img { transform: scale(1.12); }
.guide-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,0.82) 35%, rgba(13,13,13,0) 70%);
  transition: background .5s ease;
}
.guide-card:hover .guide-card__scrim { background: linear-gradient(to top, rgba(13,13,13,0.9) 45%, rgba(13,13,13,0.05) 75%); }
.guide-card__text {
  position: absolute;
  left: 48px;
  right: 40px;
  bottom: 40px;
  text-align: left;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.guide-card:hover .guide-card__text { transform: translateY(-8px); }
.guide-card__text h4 {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 28.6px;
  color: var(--c-cream);
}
.guide-card__text a {
  display: inline-block;
  margin-top: 23px;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 1.65px;
  text-transform: uppercase;
  color: var(--c-white);
}
.guide-card__arrow { display: inline-block; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.guide-card:hover .guide-card__arrow { transform: translateX(6px); }

/* ==========================================================================
   CLOSING CTA + FOOTER
   ========================================================================== */
.closing {
  padding: clamp(80px, 18vw, 155px) 24px;
  text-align: center;
  box-sizing: border-box;
}
.closing__heading {
  width: 100%;
  max-width: 990px;
  margin: 0 auto;
  font-size: clamp(28px, 5.4vw, 47px);
  line-height: clamp(36px, 7vw, 56.64px);
}
.closing__copy {
  width: 100%;
  max-width: 684px;
  margin: 24px auto 0;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(16px, 2vw, 21px);
  line-height: clamp(26px, 3.4vw, 37px);
  color: var(--c-ink);
}
.closing__cta { margin-top: 40px; }

.site-footer {
  background: var(--c-footer-bg);
  border-top: 0.868px solid rgba(43, 42, 38, 0.06);
  padding: 79px 0;
}
.site-footer__inner {
  position: relative;
  width: 100%;
  max-width: 1546px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-footer__tagline {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 19px;
  letter-spacing: 16px;
  white-space: nowrap;
}
.site-footer__rights {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.55px;
  white-space: nowrap;
  margin-left: auto;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 1.1px;
}
@media (max-width: 860px) {
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .site-footer__tagline { position: static; transform: none; order: -1; align-self: center; white-space: normal; text-align: center; letter-spacing: 8px; font-size: 16px; }
  .site-footer__rights { margin-left: 0; }
}

/* Note: the design canvas is a fixed 1920px wide, matching the Figma frame
   exactly. On narrower viewports the page scrolls horizontally rather than
   reflowing — a true responsive breakpoint pass can follow once the desktop
   version is signed off. */

/* ==========================================================================
   INTERIOR PAGES — shared, responsive scaffolding
   Everything below serves the pages generated from the sitemap/content
   document. It reuses the homepage's palette, type and motion language
   (fonts, colours, .btn, .heading-xl, .eyebrow, .hr-mark, [data-reveal],
   .accordion) but as fluid layout rather than the homepage's fixed 1920px
   canvas, and adds a working mobile menu — nothing above this line is
   touched, so the homepage is unaffected.
   ========================================================================== */
html { scroll-padding-top: 100px; }
.site-page { background: var(--c-page-bg); overflow-x: hidden; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 640px) { .wrap { padding: 0 40px; } }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-ink); color: var(--c-cream);
  padding: 12px 20px; font-family: var(--f-sans); font-size: 13px;
}
.skip-link:focus { left: 16px; top: 16px; }

.read { font-family: var(--f-sans); font-weight: 300; font-size: 16px; line-height: 1.75; color: var(--c-ink-soft); }
.read + .read { margin-top: 16px; }
.read--lg { font-size: 18px; line-height: 1.7; }

/* ---- Unified site navigation ---------------------------------------------
   One nav component, used identically on every page including the
   homepage: 3 links — logo — 3 links, with "Start a Conversation" pinned
   far right. Items with sub-pages (second-level navigation) expose a
   hover/click dropdown panel; the same hierarchy powers the mobile menu.
   `.on-dark` is the transparent/light-text state used while a hero with
   [data-hero] is still on screen (see initSiteNav in main.js); pages with
   no hero simply never get the class, so the nav renders solid from the
   first paint.
   ---------------------------------------------------------------------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(242, 240, 231, 0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(43, 42, 38, 0.08);
  transition: background-color .4s ease, box-shadow .4s ease;
}
.site-nav.on-dark {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
}
.site-nav__inner {
  position: relative; max-width: 1440px; margin: 0 auto; padding: 0 28px; height: 76px;
  display: flex; align-items: center;
}
/* The logo sits dead-centre of the bar (and so of the screen, since the bar
   itself is centred): both the logo and the CTA are taken out of flex flow
   and pinned by absolute position, so the two link groups — the only
   remaining flex children — split the *full* width evenly and their shared
   gap lands exactly on that same true centre. Doing this via flex alone
   (CTA as a normal flex sibling) is NOT equivalent: the CTA then only
   takes space on the right, which drags the groups' shared midpoint left
   of true centre by half the CTA's width. */
.site-nav__side { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.site-nav__side--left { justify-content: flex-end; margin-right: 92px; }
.site-nav__side--right { justify-content: flex-start; margin-left: 92px; }
.site-nav__group { display: flex; align-items: center; gap: 30px; }
.site-nav__item { position: relative; display: flex; align-items: center; gap: 4px; }
.site-nav__item > a {
  position: relative; font-family: var(--f-sans); font-size: 12px; letter-spacing: .65px;
  text-transform: uppercase; color: var(--c-ink); white-space: nowrap; transition: color .3s ease;
}
.site-nav.on-dark .site-nav__item > a { color: var(--c-white); }
.site-nav__item > a::after {
  content: ""; position: absolute; left: 0; bottom: -9px; width: 0; height: 1px;
  background: var(--c-gold); transition: width .35s cubic-bezier(.22,1,.36,1);
}
.site-nav__item > a:hover::after, .site-nav__item.is-open > a::after { width: 100%; }
.site-nav__item > a.is-active { color: var(--c-gold); }
.site-nav__caret {
  background: none; border: none; cursor: pointer; padding: 4px; color: var(--c-ink-soft);
  font-size: 8px; line-height: 1; transition: transform .3s ease, color .3s ease;
}
.site-nav.on-dark .site-nav__caret { color: rgba(255,255,255,.7); }
.site-nav__item:hover .site-nav__caret, .site-nav__item.is-open .site-nav__caret { transform: rotate(180deg); }
.site-nav__panel {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(6px);
  width: 220px; background: var(--c-page-bg); box-shadow: 0 18px 40px rgba(43,42,38,.14);
  padding: 10px 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.site-nav__item:hover .site-nav__panel, .site-nav__item.is-open .site-nav__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.site-nav__panel a {
  display: block; padding: 10px 24px; font-family: var(--f-sans); font-size: 11px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--c-ink); transition: color .2s ease, padding-left .2s ease;
}
.site-nav__panel a:hover { color: var(--c-gold); padding-left: 28px; }

.site-nav__logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: block; width: 136px;
}
.site-nav__logo-img { display: block; width: 100%; height: auto; transition: opacity .4s ease; }
.site-nav__logo-img--dark { position: absolute; inset: 0; filter: brightness(0) saturate(100%); opacity: 1; }
.site-nav__logo-img--light { opacity: 0; }
.site-nav.on-dark .site-nav__logo-img--dark { opacity: 0; }
.site-nav.on-dark .site-nav__logo-img--light { opacity: 1; }
/* On the homepage the standalone, scroll-animated logo (.hero-logo-anim)
   plays the light→dark / big→small moment and ends up sitting exactly over
   this slot — so the nav's own built-in logo stays invisible there instead
   of showing a flat duplicate underneath it. */
.site-nav__logo--for-anim { visibility: hidden; }
.no-js .site-nav__logo--for-anim { visibility: visible; }

.site-nav__cta-wrap {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 16px;
}
.site-nav.on-dark .site-nav__cta { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color: var(--c-white); }
.site-nav__burger {
  display: none; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px;
  width: 36px; height: 36px; flex: 0 0 auto; background: none; border: none; cursor: pointer;
}
.site-nav__burger span { display: block; width: 100%; height: 1px; background: var(--c-ink); transition: transform .3s ease, opacity .3s ease, width .3s ease; }
.site-nav.on-dark .site-nav__burger span { background: var(--c-white); }
.site-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); width: 100%; }
.site-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 100%; }

.site-nav__mobile {
  position: fixed; inset: 0; top: 76px; z-index: 99; background: var(--c-page-bg);
  transform: translateX(100%); transition: transform .4s cubic-bezier(.22,1,.36,1);
  overflow-y: auto; padding: 8px 24px 48px; visibility: hidden;
}
.site-nav__mobile.is-open { transform: translateX(0); visibility: visible; }
.site-nav__mobile-group { padding: 18px 0; border-bottom: 1px solid var(--c-divider); }
.site-nav__mobile-group:first-child { padding-top: 6px; }
.site-nav__mobile-heading {
  display: block; font-family: var(--f-serif); font-weight: 400; font-size: 19px; color: var(--c-ink); margin-bottom: 4px;
}
.site-nav__mobile-group a + a {
  display: block; padding: 8px 0 8px 14px; font-family: var(--f-sans); font-weight: 300; font-size: 14px;
  letter-spacing: .4px; color: var(--c-ink-soft); border-left: 1px solid var(--c-divider); margin-top: 4px;
}
.site-nav__mobile .btn { margin-top: 20px; width: 100%; }

@media (max-width: 1220px) {
  .site-nav__side { display: none; }
  .site-nav__cta { display: none; }
  .site-nav__burger { display: flex; }
  .site-nav__logo { left: 28px; top: 50%; transform: translateY(-50%); }
}

/* ---- Jump links (two-click answer access on long pages) ----------------- */
.jumplinks { position: sticky; top: 76px; z-index: 40; background: var(--c-subtle-bg); border-bottom: 1px solid var(--c-divider); }
.jumplinks__inner {
  max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: flex; gap: 28px;
  overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.jumplinks__inner::-webkit-scrollbar { display: none; }
.jumplinks a {
  flex: 0 0 auto; font-family: var(--f-label); font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--c-ink-soft); transition: color .25s ease;
}
.jumplinks a:hover { color: var(--c-gold); }

/* ---- Sub-page hero / intro band ------------------------------------------ */
.subhero { padding: 158px 0 76px; text-align: center; background: var(--c-app-bg); }
.subhero--tight { padding-bottom: 54px; }
.subhero__eyebrow { display: block; }
.subhero__heading { margin: 18px auto 0; max-width: 880px; font-size: clamp(30px, 4vw, 44px); line-height: 1.24; }
.subhero__rule { margin: 26px auto 0; }
.subhero__copy { margin: 22px auto 0; max-width: 700px; }
.subhero__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.subhero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0 0 18px;
  font-family: var(--f-label); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--c-ink-soft);
}

/* ---- Generic sections ----------------------------------------------------- */
.section { padding: 92px 0; }
.section--tight { padding: 60px 0; }
.section--alt { background: var(--c-app-bg); }
.section--subtle { background: var(--c-subtle-bg); }
.section--band { background: rgba(211, 201, 191, 0.4); }
.section__head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.section__head--left { margin-left: 0; text-align: left; }
.section__eyebrow { display: block; }
.section__heading { margin-top: 14px; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.28; }
.section__rule { margin: 22px auto 0; }
.section__head--left .section__rule { margin-left: 0; }
.subsection {
  margin: 0 0 16px; font-family: var(--f-serif); font-weight: 400;
  color: var(--c-ink); font-size: clamp(21px, 2.4vw, 27px); line-height: 1.3;
}

/* ---- Split (image + text), stacks on mobile ------------------------------ */
.split { display: flex; align-items: center; gap: 56px; }
.split--reverse { flex-direction: row-reverse; }
.split__media { flex: 1 1 46%; aspect-ratio: 4 / 3; overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split__text { flex: 1 1 46%; }
.split__text .eyebrow { display: block; }
.split__text h3 {
  margin: 12px 0 0; font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(23px, 2.6vw, 29px); color: var(--c-ink); line-height: 1.3;
}
.split__text .hr-mark { margin: 20px 0; }
.split__text p + p { margin-top: 14px; }
.split + .split { margin-top: 80px; }
@media (max-width: 860px) {
  .split, .split--reverse { flex-direction: column; gap: 32px; }
  .split__media, .split__text { flex: 1 1 100%; }
  .split + .split { margin-top: 56px; }
}

/* ---- Tile cards (projects, guides) ---------------------------------------- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.tile-card { position: relative; display: block; height: 420px; overflow: hidden; }
.tile-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.tile-card:hover img { transform: scale(1.12); }
.tile-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,13,.82) 32%, rgba(13,13,13,0) 72%); }
.tile-card__meta { position: absolute; left: 28px; right: 24px; bottom: 28px; color: var(--c-white); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.tile-card:hover .tile-card__meta { transform: translateY(-6px); }
.tile-card__kicker {
  display: block; font-family: var(--f-label); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--c-tan-light); margin-bottom: 8px;
}
.tile-card__title { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: 21px; line-height: 1.26; }
.tile-card__link { display: inline-block; margin-top: 14px; font-family: var(--f-sans); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--c-white); }
.tile-card__arrow { display: inline-block; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.tile-card:hover .tile-card__arrow { transform: translateX(6px); }

/* ---- Info / proof-style cards --------------------------------------------- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 36px; }
.info-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.info-card { padding-left: 20px; border-left: 2px solid var(--c-gold); }
.info-card__rule { display: block; width: 48px; height: 1px; margin-bottom: 16px; background: var(--c-gold); }
.info-card h3, .info-card h4 { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: 19px; color: var(--c-gold); }
.info-card p { margin-top: 10px; font-family: var(--f-sans); font-weight: 300; font-size: 14px; line-height: 23px; color: var(--c-ink); }

/* ---- Package comparison cards --------------------------------------------- */
.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.package-card { background: var(--c-app-bg); padding: 32px 26px; display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.package-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(43,42,38,.1); }
.package-card__num { font-family: var(--f-label); font-size: 11px; letter-spacing: 2px; color: var(--c-gold); text-transform: uppercase; }
.package-card h3 { margin: 14px 0 0; font-family: var(--f-serif); font-weight: 400; font-size: 22px; color: var(--c-ink); line-height: 1.3; }
.package-card__suits { margin-top: 10px; font-family: var(--f-sans); font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--c-tan); }
.package-card__copy { margin-top: 16px; font-family: var(--f-sans); font-weight: 300; font-size: 14px; line-height: 22px; color: var(--c-ink-soft); flex: 1; }
.package-card__link { margin-top: 20px; display: inline-block; font-family: var(--f-sans); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--c-gold); }

/* ---- Check / bullet list ---------------------------------------------------- */
.check-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.check-list li { position: relative; padding-left: 28px; font-family: var(--f-sans); font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--c-ink-soft); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 1px; background: var(--c-gold); }

/* ---- Numbered steps (stages, journey) -------------------------------------- */
.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 24px; padding: 26px 0; border-top: 1px solid var(--c-divider); }
.step:first-child { border-top: none; padding-top: 0; }
.step__num { flex: 0 0 auto; font-family: var(--f-serif); font-size: 27px; color: var(--c-gold); width: 54px; }
.step__body h4 { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: 18px; color: var(--c-ink); }
.step__body p { margin-top: 8px; font-family: var(--f-sans); font-weight: 300; font-size: 15px; line-height: 24px; color: var(--c-ink-soft); }

/* ---- Project reference meta ------------------------------------------------- */
.project-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; justify-content: center; font-family: var(--f-label); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--c-ink-soft); }
.project-credit { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--c-divider); font-family: var(--f-sans); font-size: 13px; line-height: 1.7; color: var(--c-ink-soft); font-style: italic; }

/* ---- FAQ wrapper (reuses .accordion) ---------------------------------------- */
.faq { width: 100%; max-width: 860px; margin: 0 auto; text-align: left; }

/* ---- Forms ------------------------------------------------------------------ */
.form { max-width: 740px; }
.form__row { margin-bottom: 22px; }
.form__row--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form label { display: block; font-family: var(--f-sans); font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--c-ink); margin-bottom: 8px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  width: 100%; padding: 13px 16px; background: var(--c-white); border: 1px solid var(--c-divider);
  font-family: var(--f-sans); font-size: 15px; color: var(--c-ink); transition: border-color .25s ease, box-shadow .25s ease;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(151,118,83,.14); }
.form textarea { min-height: 140px; resize: vertical; }
.form__helper { margin-top: 6px; font-family: var(--f-sans); font-size: 12px; color: var(--c-ink-soft); }
.form__options { display: flex; flex-wrap: wrap; gap: 10px; }
.form__option { position: relative; }
.form__option input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.form__option span {
  display: inline-flex; align-items: center; padding: 10px 18px; border: 1px solid var(--c-border-warm);
  font-family: var(--f-sans); font-size: 13px; color: var(--c-ink); transition: all .25s ease; cursor: pointer;
}
.form__option input:checked + span, .form__option input:focus-visible + span { background: var(--c-tan); color: var(--c-cream); border-color: var(--c-tan); }
.form__check { display: flex; align-items: flex-start; gap: 10px; }
.form__check input { margin-top: 4px; }
.form__check label { text-transform: none; font-weight: 300; letter-spacing: 0; font-size: 14px; }
.form__privacy { margin-top: 18px; font-family: var(--f-sans); font-size: 12px; line-height: 1.7; color: var(--c-ink-soft); }
.form__privacy a { color: var(--c-gold); text-decoration: underline; }
.form__note { margin-top: 14px; font-family: var(--f-sans); font-size: 12px; color: var(--c-ink-soft); }
@media (max-width: 640px) { .form__row--grid { grid-template-columns: 1fr; } }

/* ---- Closing CTA band (interior pages) -------------------------------------- */
.cta-band { padding: 104px 0; text-align: center; }
.cta-band--alt { background: var(--c-app-bg); }
.cta-band__heading { max-width: 800px; margin: 0 auto; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.32; }
.cta-band__copy { max-width: 620px; margin: 22px auto 0; }
.cta-band__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---- Footer ------------------------------------------------------------------ */
.footer { background: var(--c-footer-bg); border-top: 1px solid rgba(43,42,38,.08); padding: 72px 0 40px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand img { height: 26px; }
.footer__tagline { margin-top: 18px; max-width: 280px; font-family: var(--f-sans); font-weight: 300; font-size: 14px; line-height: 22px; color: var(--c-ink-soft); }
.footer__col h5 { margin: 0 0 16px; font-family: var(--f-label); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-gold); }
.footer__col a { display: block; padding: 7px 0; font-family: var(--f-sans); font-size: 13px; color: var(--c-ink); transition: color .2s ease; }
.footer__col a:hover { color: var(--c-gold); }
.footer__legal {
  margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(43,42,38,.08);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-family: var(--f-sans); font-size: 12px; color: var(--c-ink-soft);
}
.footer__legal button { font-family: var(--f-sans); font-size: 12px; color: var(--c-ink-soft); text-decoration: underline; cursor: pointer; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---- Legal / policy text pages ----------------------------------------------- */
.legal { max-width: 760px; margin: 0 auto; padding: 150px 24px 100px; }
.legal h1 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(30px, 4vw, 40px); color: var(--c-ink); margin: 0; }
.legal h2 { margin: 48px 0 16px; font-family: var(--f-serif); font-weight: 400; font-size: 22px; color: var(--c-ink); }
.legal p { margin: 0 0 16px; font-family: var(--f-sans); font-weight: 300; font-size: 16px; line-height: 1.75; color: var(--c-ink-soft); }
.legal .hr-mark { margin: 26px 0 36px; }
.legal__status {
  margin: 22px 0 0; padding: 14px 18px; background: var(--c-subtle-bg); border-left: 2px solid var(--c-gold);
  font-family: var(--f-sans); font-size: 13px; line-height: 1.6; color: var(--c-ink-soft);
}
.ph { color: var(--c-gold); border-bottom: 1px dashed var(--c-gold); padding-bottom: 1px; }

/* ---- Site directory ------------------------------------------------------------ */
.directory { padding: 150px 0 110px; }
.directory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 48px; margin-top: 56px; }
.directory-group h3 { margin: 0 0 18px; font-family: var(--f-serif); font-weight: 400; font-size: 19px; color: var(--c-gold); }
.directory-group a { display: block; padding: 8px 0; font-family: var(--f-sans); font-weight: 300; font-size: 15px; color: var(--c-ink); border-bottom: 1px solid var(--c-divider); }
.directory-group a:hover { color: var(--c-gold); }