/*
Theme Name: Luxe 2026
Theme URI: https://luxehabitat.com.au
Author: Luxe Habitat
Author URI: https://luxehabitat.com.au
Description: A refined WordPress theme for Luxe Habitat — a luxury interiors, architecture & bespoke-furniture house in Australia. Warm gold-and-forest palette, Playfair Display editorial headings, General Sans body, and a modular template-part architecture.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: luxe2026
Tags: custom-menu, featured-images, translation-ready, luxury, interiors, furniture, architecture
*/

/* ============================================================
   Design tokens — Luxe Habitat
   ============================================================ */
:root {
  --white: #ffffff;
  --ink: #1a1918; /* charcoal near-black */
  --ink-2: #2b2a28;
  --forest: #142a1d; /* deep green — dark cards / button text */
  --body: #4a4844; /* body copy grey */
  --gold: #d9b667; /* primary brass */
  --gold-2: #c6a15c; /* deep gold — outline buttons, accents */
  --bronze: #9c7c3e; /* bronze labels */
  --cream: #f3e7c9; /* section / footer background */
  --paper: #fbf7ed; /* warm off-white */

  --line: rgba(26, 25, 24, 0.12);
  --line-soft: rgba(26, 25, 24, 0.08);
  --line-lt: rgba(255, 255, 255, 0.18);

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "General Sans", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1512px;
  --gutter: 36px;
  --radius: 8px;
  --header-h: 92px;
}

/* ============================================================
   Base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.14;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--ink);
}
p {
  margin: 0;
}
svg.icon {
  display: block;
  flex: none;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Accessibility helpers */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  width: auto;
  height: auto;
  clip: auto;
  margin: 0;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  font-size: 14px;
}

/* Eyebrow / label */
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.eyebrow--gold {
  color: var(--gold);
}
.eyebrow--bronze {
  color: var(--bronze);
}
.eyebrow--light {
  color: var(--white);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
  white-space: nowrap;
}
.btn svg.icon {
  width: 20px;
  height: 20px;
}
.btn--gold {
  background: var(--gold);
  color: var(--forest);
}
.btn--gold:hover {
  background: var(--gold-2);
}
.btn--ghost {
  background: transparent;
  border-color: rgba(198, 161, 92, 0.55);
  color: var(--gold-2);
}
.btn--ghost:hover {
  background: var(--gold-2);
  color: var(--white);
  border-color: var(--gold-2);
}
.btn--ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}
.btn--ghost-light:hover {
  background: var(--white);
  color: var(--ink);
}
/* Homepage hero "View Our Portfolio" — transparent gold-outline button with a
   subtle border glow that fills gold (dark text) on hover. Scoped to the home
   hero so other ghost-light buttons stay unchanged; proportions inherit from
   .btn so it stays aligned with the adjacent gold button. */
body.home .hero__cta .btn--ghost-light {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 16px rgba(217, 182, 103, 0.32);
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
body.home .hero__cta .btn--ghost-light:hover,
body.home .hero__cta .btn--ghost-light:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--forest);
  box-shadow: 0 0 22px rgba(217, 182, 103, 0.5);
}

/* Section rhythm */
.section {
  padding: 120px 0;
}
.section--tight {
  padding: 96px 0;
}

/* Split section head: heading left, description + CTA right */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 40px 80px;
  align-items: flex-end;
  margin-bottom: 60px;
}
.section-head__title {
  margin: 18px 0 0;
}
.section-head h2 {
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.12;
}
.section-head__aside p {
  color: var(--body);
  font-size: 20px;
  line-height: 1.5;
}
.section-head__aside .btn {
  margin-top: 26px;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 36px 0 24px; /* Figma: 100px logo, 36 top / 24 bottom = 160px band */
  transition:
    background 0.35s ease,
    padding 0.35s ease,
    box-shadow 0.35s ease;
}
/* Sit below the WordPress admin bar when logged in, so the header never
   tucks under it (no gap/overlap at the very top). */
body.admin-bar .site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}
.site-header__inner {
  display: flex;
  align-items: center; /* wide horizontal logo — vertically centred with the nav */
  justify-content: space-between;
  gap: 32px;
}
/* Solid backdrop: front page once scrolled, and inner (dark) pages. */
.site-header.is-scrolled,
.site-header--solid {
  background: rgba(20, 19, 18, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Slim the bar only after scrolling the front page. */
.site-header.is-scrolled {
  padding: 14px 0;
}
.site-header.is-scrolled .site-header__inner {
  align-items: center;
}
.site-header.is-scrolled .main-nav {
  margin-top: 0;
}

.brand,
.custom-logo-link {
  display: inline-flex;
  align-items: center;
}
.brand img,
.custom-logo {
  height: 54px;
  width: auto;
}
.site-header.is-scrolled .brand img,
.site-header.is-scrolled .custom-logo {
  height: 42px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 0;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em; /* Figma: 0.48px on 16px */
  text-transform: uppercase;
  color: var(--white);
  padding: 6px 0;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 0;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav__list a:hover {
  color: var(--gold);
}
.nav__list a:hover::after {
  width: 100%;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 32px;
}
.header-tools a {
  color: var(--white);
  display: inline-flex;
  transition: color 0.25s ease;
}
.header-tools a:hover {
  color: var(--gold);
}
.header-tools .icon {
  stroke-width: 1.5;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 6px;
  color: var(--white);
  cursor: pointer;
}
.nav-toggle svg {
  width: 28px;
  height: 28px;
}
/* Swap hamburger → X while the overlay menu is open. */
.nav-toggle__close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  padding: calc(var(--header-h) + 40px) var(--gutter) 120px;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 16, 14, 0.55) 0%,
    rgba(18, 16, 14, 0.28) 38%,
    rgba(18, 16, 14, 0.72) 100%
  );
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
}
.hero .eyebrow {
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.22em;
  font-size: 15px;
}
.hero h1 {
  font-size: clamp(46px, 6.6vw, 100px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--white);
  margin: 22px 0 40px;
}
.hero__cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero__scroll {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  z-index: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* ============================================================
   Stats bar
   ============================================================ */
.stats {
  background: var(--cream);
  padding: 64px 0;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.stat {
  text-align: center;
}
.stat__value {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(46px, 4.4vw, 65px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat__label {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* ============================================================
   Philosophy
   ============================================================ */
.philosophy .wrap {
  max-width: 1120px;
}
.philosophy__grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 72px;
  align-items: center;
}
.philosophy__art {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 420 / 540;
}
.philosophy__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.philosophy__title {
  font-size: clamp(38px, 4vw, 56px);
  margin: 20px 0 26px;
}
.philosophy__body {
  color: var(--body);
  font-size: 17px;
  line-height: 1.7;
  max-width: 30ch;
}
.philosophy .btn {
  margin-top: 34px;
}

/* ============================================================
   Disciplines (2x2 — two rows: content panel + media panel)
   ============================================================ */
.disciplines {
  display: block;
}
.disc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* Discipline 2 places its content panel on the right (desktop). */
@media (min-width: 1001px) {
  .disc-row--content-right .disc--content {
    order: 2;
  }
}
.disc {
  position: relative;
  min-height: 760px;
  padding: 96px 60px 60px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Photo feature tile */
.disc--feature {
  color: var(--white);
  text-align: center;
  justify-content: flex-start;
}
.disc__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.disc__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 18, 15, 0.34) 0%,
    rgba(20, 18, 15, 0.5) 55%,
    rgba(20, 18, 15, 0.82) 100%
  );
}
.disc__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.disc__eyebrow {
  letter-spacing: 0.16em;
  margin-bottom: 22px;
}
.disc--feature h2 {
  color: var(--white);
  font-size: clamp(40px, 3.6vw, 60px);
}
.disc__lead {
    margin: 22px auto 50px;
    max-width: 34ch;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
}

/* service list, pinned bottom */
.disc__services {
  margin-top: auto;
}
.svc-list {
  list-style: none;
  margin: 50px 0 26px;
  padding: 0;
}
.svc-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-lt);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}
.svc-list li:first-child {
  border-top: 1px solid var(--line-lt);
}

/* Recent-work dark tile */
.disc--work {
  background: var(--ink);
  color: var(--white);
  text-align: center;
}
.disc--work h2 {
  color: var(--white);
  font-size: clamp(34px, 3vw, 42px);
}
.disc__sub {
  margin-top: 12px;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
}
/* Image set — a normal vertical column. On mobile / tablet / no-JS this is the
   whole layout: content, then the four images stacked one below another. */
.disc__slides {
  margin: 44px auto 0;
  width: min(370px, 100%);
}
.disc__track {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.disc__slide {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 370 / 320;
}
.disc__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.disc--work .btn {
  margin: 40px auto 0;
}

/* Desktop: the content panel stays pinned in view while its image column
   scrolls past as a normal vertical gallery — a natural page scroll, then it
   releases once the last image has cleared. Pure CSS (position: sticky): the
   images are a plain stacked column (no window, no overlap, no transform, no
   replacement). Tablet/mobile (<=1000px) stacks content then images normally. */
@media (min-width: 1001px) {
  .disc-row {
    align-items: start;
  }
  .disc--content {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100vh; /* fill the viewport while pinned so the column reads as one gallery */
  }
  .disc__slides {
    margin-bottom: 4px;
  }
}

/* ============================================================
   Products
   ============================================================ */
.products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.product-card {
  border-radius: var(--radius);
  overflow: hidden;
}
.product-card__media {
  aspect-ratio: 354 / 370;
  background: var(--cream);
  overflow: hidden;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.product-card:hover .product-card__media img {
  transform: scale(1.04);
}
.product-card__body {
  padding: 16px 16px 0;
}
.product-card__name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  color: var(--body);
  margin: 0;
}
.product-card__price {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
}

/* ============================================================
   Case study
   ============================================================ */
/* Client Insights sits closer to the section above it: the previous section's
   bottom padding already supplies the gap, so this section's top padding is
   trimmed. .section.case (0,2,0) beats the responsive .section padding, so one
   clamp scales cleanly across desktop, tablet and mobile. */
.section.case {
  padding-top: clamp(8px, 2vw, 20px);
}

.case__feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 723px);
  gap: 64px;
  align-items: stretch;
  margin-top: 20px;
}
.case__quote {
  display: flex;
  flex-direction: column;
}
.case__mark {
  font-family: var(--display);
  font-size: 64px;
  line-height: 0.6;
  color: var(--gold-2);
  height: 40px;
}
.case__quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.28;
  font-weight: 500;
  color: var(--ink);
  max-width: 20ch;
}
.case__cite {
  margin-top: auto;
  padding-top: 34px;
}
.case__cite strong {
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.case__cite span {
  display: block;
  margin-top: 6px;
  color: var(--body);
  font-size: 15px;
}
.case__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.case__art {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 460px;
}
.case__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Spec row */
.spec-row {
  margin-top: 80px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.spec {
  padding: 38px 40px;
  border-left: 1px solid var(--line);
}
.spec:first-child {
  border-left: 0;
  padding-left: 0;
}
.spec dt {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.spec dd {
  margin: 10px 0 0;
  font-size: 20px;
  color: var(--body);
}

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials {
  background: var(--ink);
  padding: 0;
  overflow: hidden;
}
.testimonials__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(680px, 50%);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.testimonials__track::-webkit-scrollbar {
  display: none;
}
.tcard {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 340px;
  min-height: 470px;
}
.tcard__body {
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
}
.tcard--dark .tcard__body {
  background: var(--forest);
}
.tcard--light .tcard__body {
  background: var(--white);
}
.tcard--light {
  order: 0;
}
.tcard__mark {
  font-family: var(--display);
  font-size: 56px;
  line-height: 0.5;
  height: 34px;
  color: var(--gold-2);
}
.tcard blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.4;
  font-weight: 500;
}
.tcard--dark blockquote {
  color: var(--white);
}
.tcard--light blockquote {
  color: var(--ink);
}
.tcard__cite {
  margin-top: 26px;
}
.tcard__cite strong {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tcard__cite span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
}
.tcard--dark .tcard__cite strong {
  color: var(--white);
}
.tcard--dark .tcard__cite span {
  color: rgba(255, 255, 255, 0.72);
}
.tcard--light .tcard__cite strong {
  color: var(--ink);
}
.tcard--light .tcard__cite span {
  color: var(--body);
}
.tcard .btn {
  margin-top: auto;
  align-self: flex-start;
}
.tcard__media {
  overflow: hidden;
}
.tcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Journal
   ============================================================ */
.journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.jcard {
  border-radius: var(--radius);
  overflow: hidden;
}
.jcard__media {
  display: block;
  aspect-ratio: 475 / 315;
  overflow: hidden;
  border-radius: var(--radius);
}
.jcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.jcard:hover .jcard__media img {
  transform: scale(1.04);
}
.jcard__body {
  padding: 26px 0 0;
}
.jcard__cat {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.jcard__title {
  margin: 14px 0 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink-2);
}
.jcard__excerpt {
  color: var(--body);
  font-size: 16px;
  line-height: 1.55;
}
.journal__more {
  display: flex;
  justify-content: center;
  margin-top: 52px;
}

/* ============================================================
   Contact CTA
   ============================================================ */
/* Balanced breathing room above and below the "Get In Touch" section, so it
   sits comfortably between the section above and the footer. (Home & Services
   keep their own tuned spacing via higher-specificity rules.) */
.section.contact-cta {
  padding-top: clamp(40px, 4vw, 56px);
  padding-bottom: clamp(40px, 4vw, 56px);
}

.contact-cta__grid {
  display: grid;
  grid-template-columns: 696px 1fr;
  gap: 72px;
  align-items: center;
}
.contact-cta__art {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 696 / 570;
}
.contact-cta__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-cta__title {
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 1.1;
  margin: 0 0 26px;
}
.contact-cta__body {
  color: var(--body);
  font-size: 18px;
  line-height: 1.6;
  max-width: 44ch;
  margin-bottom: 32px;
}

/* ============================================================
   Projects page — hero banner, filterable gallery, lightbox
   ============================================================ */
/* Shorter banner hero (not full-screen) with a gentle image zoom-in. */
.hero--projects {
  min-height: clamp(480px, 62vh, 640px);
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 96px;
}
.hero--projects .hero__bg {
  transform: scale(1.08);
  animation: proj-hero-zoom 2.4s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
@keyframes proj-hero-zoom {
  to { transform: scale(1); }
}
.hero--projects .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 19, 18, 0.5) 0%, rgba(20, 19, 18, 0.34) 45%, rgba(20, 19, 18, 0.52) 100%);
}
.hero--projects__eyebrow {
  color: rgba(255, 255, 255, 0.9);
}
.hero--projects__title {
  margin: 20px 0 22px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(44px, 5.4vw, 78px);
  line-height: 1.06;
  color: var(--white);
}
/* Hero content entrance (above the fold — plays on load via reveal). */
.hero--projects .hero__inner > * {
  opacity: 0;
  transform: translateY(22px);
  animation: proj-hero-up 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
.hero--projects .hero__inner > *:nth-child(1) { animation-delay: 0.15s; }
.hero--projects .hero__inner > *:nth-child(2) { animation-delay: 0.28s; }
.hero--projects .hero__inner > *:nth-child(3) { animation-delay: 0.42s; }
@keyframes proj-hero-up {
  to { opacity: 1; transform: none; }
}

/* Gallery section */
.section.projects-section {
  padding-top: clamp(40px, 4vw, 56px);
  padding-bottom: clamp(48px, 5vw, 70px);
}
.projects-filter {
  margin: 0 0 32px;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.project-card {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 354 / 361;
  background: var(--cream);
  cursor: pointer;
  /* smooth show/hide when filtering */
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 19, 18, 0) 55%, rgba(20, 19, 18, 0.34) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.project-card:hover img,
.project-card:focus-visible img {
  transform: scale(1.06);
}
.project-card:hover::after,
.project-card:focus-visible::after {
  opacity: 1;
}
.project-card__icon {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
  opacity: 0.9;
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.35s ease;
}
.project-card:hover .project-card__icon,
.project-card:focus-visible .project-card__icon {
  opacity: 1;
  transform: scale(1.12);
  color: var(--gold);
}
/* Filtered-out cards collapse out of the grid. */
.project-card.is-hidden {
  display: none;
}
/* Staggered reveal of the grid on scroll-in. */
.projects-grid.reveal .project-card {
  opacity: 0;
  transform: translateY(26px);
}
.projects-grid.reveal.is-in .project-card {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
  transition-delay: calc(var(--pi, 0) * 0.06s);
}

/* Lightbox */
body.lb-open {
  overflow: hidden;
}
.proj-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  background: rgba(12, 11, 10, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.proj-lightbox[hidden] {
  display: flex; /* keep in layout for the fade; JS toggles .is-open */
}
.proj-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s;
}
.proj-lightbox__stage {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  display: flex;
}
.proj-lightbox__img {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 0.84, 0.44, 1), opacity 0.4s ease;
}
.proj-lightbox.is-open .proj-lightbox__img {
  transform: none;
  opacity: 1;
}
.proj-lightbox__close,
.proj-lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.proj-lightbox__close:hover,
.proj-lightbox__nav:hover {
  background: rgba(217, 182, 103, 0.9);
  border-color: var(--gold);
  color: var(--forest);
}
.proj-lightbox__close {
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  width: 48px;
  height: 48px;
}
.proj-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
}
.proj-lightbox__prev { left: clamp(12px, 2.5vw, 32px); }
.proj-lightbox__next { right: clamp(12px, 2.5vw, 32px); }

/* Projects — responsive */
@media (max-width: 1000px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero--projects {
    min-height: clamp(420px, 56vh, 560px);
  }
}
@media (max-width: 680px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .project-card__icon {
    width: 30px;
    height: 30px;
  }
  .proj-lightbox__nav {
    width: 44px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero--projects .hero__bg,
  .hero--projects .hero__inner > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ------------------------------------------------------------
   Products / Luxury Collections — gallery card with label below
   (reuses the projects hero, tabs, filter + lightbox).
   ------------------------------------------------------------ */
.products-grid {
  gap: 22px 8px;
}
.product-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--white);
  border: 1px solid rgba(26, 25, 24, 0.08);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(20, 19, 18, 0.04);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.product-card.is-hidden {
  display: none;
}
.product-card__media {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  aspect-ratio: 354 / 361;
  overflow: hidden;
  background: var(--cream);
  cursor: pointer;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 19, 18, 0) 55%, rgba(20, 19, 18, 0.34) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.product-card__media:hover img,
.product-card__media:focus-visible img {
  transform: scale(1.06);
}
.product-card__media:hover::after,
.product-card__media:focus-visible::after {
  opacity: 1;
}
.product-card__media:hover .project-card__icon,
.product-card__media:focus-visible .project-card__icon {
  opacity: 1;
  transform: scale(1.12);
  color: var(--gold);
}
.product-card__label {
  padding: 15px 18px 17px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--body);
}
/* Staggered reveal on scroll-in. */
.products-grid.reveal .product-card {
  opacity: 0;
  transform: translateY(26px);
}
.products-grid.reveal.is-in .product-card {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
  transition-delay: calc(var(--pi, 0) * 0.06s);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  /* Full-width cream band: the background + vertical padding live on the footer
     itself (which spans the whole viewport), while .footer-card only constrains
     the inner content to the page width. Slightly tighter top so the footer
     reads as connected to the section above. */
  background: var(--cream);
  padding: 40px 0 40px;
}
.footer-card {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 60px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 44px;
}
.footer__brand img {
  height: 50px;
  width: auto;
}
.footer__about {
  margin-top: 22px;
  color: var(--body);
  font-size: 15px;
  line-height: 1.7;
  max-width: 42ch;
}
.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__links li {
  margin-bottom: 8px;
}
.footer__links a {
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color 0.25s ease;
}
.footer__links a:hover {
  color: var(--gold-2);
}
.footer__col-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--body);
  margin: 0 0 20px;
  font-family: var(--sans);
}
.footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 12px;
}
.footer__contact a svg {
  width: 20px;
  height: 20px;
}
.footer__contact a:hover {
  color: var(--gold-2);
}
.footer__socials {
  display: flex;
  gap: 16px;
  margin-top: 6px;
}
.footer__socials a {
  color: var(--ink);
  transition: color 0.25s ease;
}
.footer__socials a:hover {
  color: var(--gold-2);
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom,
.footer-bottom a {
  font-size: 14px;
  color: var(--body);
}
.footer-legal {
  display: flex;
  gap: 28px;
}
.footer-legal a {
  color: var(--ink);
}
.footer-legal a:hover {
  color: var(--gold-2);
}

/* ============================================================
   About page
   ============================================================ */
/* Light (white) header variant */
.site-header--light {
  background: var(--white);
  box-shadow: 0 1px 0 var(--line);
}
.site-header--light .nav__list a,
.site-header--light .header-tools a,
.site-header--light .nav-toggle {
  color: var(--ink);
}
.site-header--light .nav__list a:hover,
.site-header--light .header-tools a:hover {
  color: var(--gold-2);
}
/* The mobile overlay is always the solid dark-green field, on every header
   variant (its full styling lives in the max-width:1000px block below). */
.site-header--light .main-nav.is-open {
  background: var(--forest);
}
.site-header--light .main-nav.is-open .nav__list li {
  border: 0;
}

/* Split hero */
.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding-top: 160px; /* clear the fixed 160px header (matches Figma) */
  background: var(--white);
}
.about-hero__media {
  min-height: 78vh;
  overflow: hidden;
}
.about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vh clamp(30px, 4.5vw, 80px);
}
.about-hero .eyebrow {
  margin-bottom: 18px;
}
.about-hero__title {
  font-size: clamp(44px, 5.4vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.about-hero__sub {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  color: var(--bronze);
  font-size: clamp(26px, 2.9vw, 40px);
  line-height: 1.1;
  margin: 8px 0 26px;
}
.about-hero__body {
  color: var(--body);
  font-size: 18px;
  line-height: 1.6;
  max-width: 44ch;
}
.about-hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* Our Story */
.our-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.our-story__title {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.12;
  margin: 18px 0 30px;
}
.our-story__body p {
  color: var(--body);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 48ch;
}
.our-story__body p:last-child {
  margin-bottom: 0;
}
.our-story__art {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 756 / 720;
}
.our-story__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video / creative mastery */
.about-video {
  background: var(--forest);
  color: var(--white);
}
.about-video .eyebrow--light {
  color: rgba(255, 255, 255, 0.82);
}
.about-video .section-head__title {
  color: var(--white);
}
.about-video .section-head__aside p {
  color: rgba(255, 255, 255, 0.72);
}
.about-video__player {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(752px, 100%);
  aspect-ratio: 752 / 540;
  background: #4c6b54;
  border-radius: var(--radius);
  transition: transform 0.45s ease;
}
.about-video__player:hover {
  transform: scale(1.01);
}
.about-video__play {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
  transition: background 0.3s ease;
}
.about-video__player:hover .about-video__play {
  background: rgba(255, 255, 255, 0.22);
}

/* Category tabs (video + portfolio) */
.about-tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 42px;
}
.about-tab {
  height: 43px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(198, 161, 92, 0.5);
  color: var(--gold-2);
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}
.about-tab.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--forest);
}
.about-tab:hover:not(.is-active) {
  border-color: var(--gold);
  color: var(--gold);
}

/* Process */
.process__grid {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: 74px;
  align-items: start;
}
/* Desktop only — sticky split scroll: pin the intro (title + image) while the
   taller process-steps column scrolls past, then release naturally once the last
   step is reached and the grid ends. Pure CSS sticky = perfectly smooth, no JS,
   no jank, no overlap. Disabled ≤1000px, where the grid stacks to one column. */
@media (min-width: 1001px) {
  .process__intro {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}
.process__title {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.12;
  margin: 18px 0 22px;
}
.process__lead {
  color: var(--body);
  font-size: 18px;
  line-height: 1.6;
  max-width: 40ch;
  margin-bottom: 36px;
}
.process__art {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.process__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.process__cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.process-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 34px 40px;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.process-card:hover {
  border-color: rgba(198, 161, 92, 0.5);
  box-shadow: 0 24px 60px -34px rgba(34, 31, 26, 0.3);
}
.process-card__icon {
  display: inline-flex;
  color: var(--gold-2);
  margin-bottom: 22px;
}
.process-card__icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.3;
}
.process-card__title {
  font-family: var(--display);
  font-weight: 500;
  color: var(--bronze);
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.16;
  margin-bottom: 12px;
}
.process-card__text {
  color: var(--body);
  font-size: 16px;
  line-height: 1.625;
}
.process__cards > .btn {
  margin-top: 6px;
  width: 100%;
  justify-content: center;
  height: 50px;
}

/* Vision / Mission / Values */
.pillars__grid {
  display: grid;
  grid-template-columns: minmax(0, 570px) minmax(0, 1fr);
  gap: 84px;
  align-items: start;
}
.pillars__list {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.pillar__title {
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.08;
  margin: 16px 0 20px;
}
.pillar__text {
  color: var(--body);
  font-size: 18px;
  line-height: 1.6;
  max-width: 42ch;
}
.pillar__values {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.pillar__values li {
  font-size: 21px;
  color: var(--body);
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pillar__values li:last-child {
  border-bottom: 0;
}
.pillars__art {
  position: sticky;
  top: 120px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 756 / 900;
}
.pillars__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Team */
.team {
  background: var(--cream);
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.team-card__photo {
  position: relative;
  aspect-ratio: 354 / 370;
  background: #1f3d2b;
  border-radius: var(--radius);
  overflow: hidden;
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-card__linkedin {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: rgba(26, 25, 24, 0.5);
  border-top-right-radius: 8px;
  transition: background 0.3s ease;
}
.team-card__linkedin:hover {
  background: var(--gold);
  color: var(--forest);
}
.team-card__body {
  padding: 18px 2px 0;
}
.team-card__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
}
.team-card__role {
  margin: 6px 0 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bronze);
}
.team-card__text {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}

/* ============================================================
   Leadership — "Meet the Person Behind Every Project"
   Cream band: a featured founder (photo + bio) above a row of
   supporting-leader cards. Flows straight into the cream team
   band below it. Reveal + gentle image/stagger animations.
   ============================================================ */
.leaders {
  background: var(--cream);
}
/* Slightly tighter than the shared section-head rhythm, so the band sits a
   touch more compact without feeling cramped. */
.leaders .section-head {
  margin-bottom: 42px;
}

/* Featured founder — portrait left, bio right */
.leader-feature {
  display: grid;
  grid-template-columns: minmax(0, 568px) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
  margin-bottom: 42px;
}
.leader-feature__photo {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #f7f7f7;
}
.leader-feature__photo img {
  display: block;
  width: 100%;
  height: auto;
}
.leader-feature__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.05;
  color: var(--ink);
}
.leader-feature__role {
  margin: 14px 0 22px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--bronze);
}
.leader-feature__text p {
  margin: 0 0 16px;
  color: var(--body);
  font-size: 17px;
  line-height: 1.72;
}
.leader-feature__text p:last-child {
  margin-bottom: 0;
}

/* Supporting-leader cards */
.leaders__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.leader-card {
  padding: 34px 34px 38px;
  border: 1px solid rgba(156, 124, 62, 0.32);
  border-radius: 16px;
  background: transparent;
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.leader-card:hover {
  border-color: rgba(156, 124, 62, 0.6);
  transform: translateY(-4px);
}
.leader-card__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.1;
  color: var(--ink);
}
.leader-card__role {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bronze);
}
.leader-card__role .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.leader-card__text {
  margin: 0;
  color: var(--body);
  font-size: 15.5px;
  line-height: 1.68;
}

/* --- Reveal animations (premium, subtle) --- */
/* Featured block: hook the observer but drive our own staggered reveal,
   so the block itself doesn't fade as one lump. */
.leader-feature.reveal {
  opacity: 1;
  transform: none;
}
.leader-feature__photo {
  opacity: 0;
  transform: translateY(26px) scale(1.015);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.leader-feature.is-in .leader-feature__photo {
  opacity: 1;
  transform: none;
}
.leader-feature__photo img {
  transform: scale(1.06);
  transition: transform 1.3s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.leader-feature.is-in .leader-feature__photo img {
  transform: none;
}
.leader-feature__body > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.leader-feature.is-in .leader-feature__body > * {
  opacity: 1;
  transform: none;
}
.leader-feature.is-in .leader-feature__body > *:nth-child(1) { transition-delay: 0.12s; }
.leader-feature.is-in .leader-feature__body > *:nth-child(2) { transition-delay: 0.22s; }
.leader-feature.is-in .leader-feature__body > *:nth-child(3) { transition-delay: 0.32s; }

/* Supporting cards: staggered fade-up as the row enters. */
.leader-card.reveal {
  transition-delay: calc(var(--i, 0) * 0.11s);
}

@media (prefers-reduced-motion: reduce) {
  .leader-feature__photo,
  .leader-feature__photo img,
  .leader-feature__body > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Responsive --- */
@media (max-width: 1000px) {
  .leader-feature {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .leader-feature__photo {
    max-width: 460px;
  }
}
@media (max-width: 760px) {
  .leaders__grid {
    grid-template-columns: 1fr;
  }
  .leader-card {
    padding: 28px 26px 30px;
  }
}

/* Portfolio */
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.portfolio-card__media {
  aspect-ratio: 354 / 370;
  border-radius: var(--radius);
  overflow: hidden;
}
.portfolio-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.portfolio-card:hover .portfolio-card__media img {
  transform: scale(1.04);
}
.portfolio-card__body {
  padding: 16px 2px 0;
}
.portfolio-card__name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  color: var(--body);
}
.portfolio-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
}

/* Unify the vertical rhythm between About sections — trims the oversized
   240px section-to-section gaps to a consistent, premium ~140px while keeping
   comfortable breathing room. Scoped to the About-only section classes, and
   .section.<name> (0,2,0) beats the base/responsive .section padding at every
   breakpoint. Fluidly scales down on tablet/mobile. */
.section.our-story,
.section.about-video,
.section.process,
.section.pillars,
.section.leaders,
.section.team,
.section.portfolio {
  padding-top: clamp(48px, 5vw, 70px);
  padding-bottom: clamp(48px, 5vw, 70px);
}
/* Leadership band sits a little more compact than the shared rhythm. */
.section.leaders {
  padding-top: clamp(40px, 4vw, 54px);
  padding-bottom: clamp(40px, 4vw, 54px);
}

/* Homepage — bring every section into the same 70/48 rhythm as the rest of the
   site (was the un-optimised 120/88 default), so the page flows without large
   empty bands. Full-bleed sections (hero, stats, disciplines, testimonials) keep
   their own spacing; only the padded `.section` blocks are normalised. The
   contact CTA keeps its intentionally tight top — only its oversized bottom is
   trimmed — so nothing gains whitespace. */
body.home .section {
  padding-top: clamp(48px, 5vw, 70px);
  padding-bottom: clamp(48px, 5vw, 70px);
}
body.home .section.contact-cta {
  padding-top: clamp(8px, 2vw, 20px);
}

/* About — responsive */
@media (max-width: 1000px) {
  .about-hero {
    grid-template-columns: 1fr;
    padding-top: 100px;
  }
  .about-hero__media {
    min-height: 46vh;
  }
  .about-hero__content {
    padding: 52px var(--gutter);
  }
  .our-story__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-video__player {
    width: 100%;
  }
  .process__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .pillars__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pillars__list {
    gap: 48px;
  }
  .pillars__art {
    position: static;
    aspect-ratio: 16 / 11;
  }
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 20px;
  }
  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
  }
}
@media (max-width: 620px) {
  .about-hero__media {
    min-height: 40vh;
  }
  .team__grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 16px;
  }
  .team-card__text {
    display: none;
  }
  .portfolio__grid {
    grid-template-columns: 1fr;
  }
  .our-story__art {
    aspect-ratio: 4 / 3;
  }
  .process-card {
    padding: 26px 24px;
  }
}

/* ============================================================
   Content (blog / pages / 404)
   ============================================================ */
.page-body {
  padding: calc(var(--header-h) + 80px) 0 100px;
  min-height: 60vh;
}
.page-body .wrap {
  max-width: 820px;
}
.entry {
  margin-bottom: 60px;
}
.entry h1 {
  font-size: clamp(38px, 5vw, 56px);
  margin-bottom: 14px;
}
.entry h2 {
  font-size: 34px;
  margin-bottom: 12px;
}
.entry .meta {
  color: var(--bronze);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.entry p {
  color: var(--body);
  margin-bottom: 1em;
}
.pagination {
  margin-top: 40px;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Recognised By (industry recognition / awards)
   ============================================================ */
.awards {
  background: var(--white);
}
.awards__head {
  margin-bottom: 56px;
}
.awards__title {
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.12;
  margin: 16px 0 0;
}
.awards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.award {
  text-align: center;
  padding: 8px 44px;
}
.award + .award {
  border-left: 1px solid var(--line);
}
.award__logo {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 34px;
}
.award__logo img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
}
.award__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--bronze);
  margin: 0 auto 26px;
  max-width: 22ch;
  min-height: 2.5em;
}
.award__meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.award__meta div {
  color: var(--body);
  font-size: 15px;
}
.award__meta dt,
.award__meta dd {
  display: inline;
  margin: 0;
}
.award__meta dt {
  font-weight: 500;
}
.award__meta dt::after {
  content: ": ";
}

/* ============================================================
   @Luxe_Habitat on Instagram (social feed carousel)
   ============================================================ */
.instagram {
  background: var(--cream);
}
/* A touch more breathing room above the Instagram band so the transition from
   the section above feels cleaner. Marquee, layout and design stay the same. */
body.home .section.instagram {
  padding-top: clamp(100px, 8.8vw, 140px);
}
.instagram__head {
  margin-bottom: 44px;
  align-items: center;
}
.instagram__head .section-head__title {
  font-size: clamp(30px, 3.4vw, 52px);
}
.instagram__head .section-head__aside {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.insta {
  --insta-gap: 12px;
}
.insta__viewport {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  overflow: hidden;
}
.insta__track {
  display: flex;
  gap: var(--insta-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.1, 1);
  will-change: transform;
}
.insta__item {
  flex: 0 0 auto;
  width: var(--insta-card, min(80vw, 340px));
}
.insta__card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 354 / 370;
  background: #e7dcc2;
}
.insta__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.insta__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 19, 18, 0) 45%,
    rgba(20, 19, 18, 0.45) 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}
.insta__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 1;
  color: var(--white);
  opacity: 0;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
.insta__card:hover img {
  transform: scale(1.06);
}
.insta__card:hover::after {
  opacity: 1;
}
.insta__card:hover .insta__icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.insta__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin: 34px auto 0;
}
.insta__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(156, 124, 62, 0.3);
  cursor: pointer;
  transition:
    width 0.4s ease,
    background 0.4s ease;
}
.insta__dot.is-active {
  width: 30px;
  background: var(--bronze);
}

/* No-JS / reduced-motion: let the feed scroll manually instead of animating. */
.no-js .insta__viewport,
.insta--static .insta__viewport {
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.insta--static .insta__track {
  transition: none;
  transform: none !important;
}
.insta--static .insta__item {
  scroll-snap-align: start;
}
.insta--static .insta__dots {
  display: none;
}

/* Continuous seamless marquee (JS adds .insta--marquee). The track is doubled
   and translated by exactly one set-width (--insta-set, set in JS) so it loops
   infinitely with no pause, reset, or visible jump. Duration (--insta-dur) is
   derived from a constant px/second speed. */
.insta--marquee .insta__track {
  width: max-content;
  transition: none;
  transform: none;
  animation: insta-scroll var(--insta-dur, 30s) linear infinite;
}
@keyframes insta-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-1 * var(--insta-set, 50%)), 0, 0);
  }
}
.insta--marquee .insta__dots {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .insta--marquee .insta__track {
    animation: none;
    transform: none;
  }
}

@media (max-width: 900px) {
  .awards__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .awards__head {
    margin-bottom: 40px;
    text-align: left;
  }
  .award {
    padding: 34px 0 0;
  }
  .award + .award {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .award__logo {
    justify-content: flex-start;
  }
  .award {
    text-align: left;
  }
  .award__name {
    min-height: 0;
    margin-left: 0;
  }
  .award__meta {
    align-items: flex-start;
  }
  .instagram__head .section-head__aside {
    justify-content: flex-start;
  }
}

/* ============================================================
   Services page
   ============================================================ */
/* Hero lede + non-animated hero (Services): a static, centred intro. */
.hero__lede {
  margin: 0 auto 40px;
  max-width: 60ch;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
.hero--services h1 {
  margin: 22px 0 24px;
}

/* Intro / section head above the disciplines. Match the site's 70/48 section
   rhythm on top (after the full-viewport hero); keep a tighter lead-in to the
   disciplines below, whose colour tiles carry their own internal padding. */
.section.svc-intro {
  padding-top: clamp(48px, 5vw, 70px);
  padding-bottom: clamp(20px, 3vw, 40px);
}

/* Discipline rows — feature tile stays put beside the taller card column. */
.svc-disc-row + .svc-disc-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
@media (min-width: 1001px) {
  .svc-disc-row .disc--feature {
    position: sticky;
    top: 84px;
    align-self: start;
  }
}

/* Recent-work tile as a vertical stack of project cards. */
.disc--cards {
  justify-content: flex-start;
}
.disc--cards .disc__inner {
  height: auto;
}
.rw-list {
  margin: 44px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: left;
}
.rw-card {
  display: block;
}
.rw-card__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 370 / 300;
  margin-bottom: 20px;
}
.rw-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rw-card__badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(20, 19, 18, 0.62);
  color: var(--gold);
  backdrop-filter: blur(4px);
}
.rw-card__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  color: var(--white);
  margin: 0 0 8px;
}
.rw-card__loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.rw-card__loc .icon {
  width: 16px;
  height: 16px;
}
.rw-card__desc {
  color: rgba(255, 255, 255, 0.66);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   Services — Furniture full-width discipline banner (Discipline III)
   Full-bleed image + subtle dark overlay, content centred both axes.
   Height ~matches the discipline feature tiles above. Gentle image
   reveal + parallax + staggered fade-up text (JS parallax in main.js).
   ============================================================ */
.svc-furn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(440px, 55vw, 820px);
}
/* Neutralise the base .reveal transform so the full-width band never shifts;
   our own image / parallax / text animations run off .is-in. */
.svc-furn.reveal {
  opacity: 1;
  transform: none;
}
.svc-furn__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  height: 120%;
  z-index: 0;
  will-change: transform;
}
.svc-furn__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.14);
  opacity: 0;
  transition:
    transform 1.7s cubic-bezier(0.16, 0.84, 0.44, 1),
    opacity 1.2s ease;
}
.svc-furn.is-in .svc-furn__img {
  transform: scale(1);
  opacity: 1;
}
.svc-furn__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      ellipse 58% 52% at 50% 50%,
      rgba(20, 19, 18, 0.52) 0%,
      rgba(20, 19, 18, 0) 72%
    ),
    linear-gradient(
      180deg,
      rgba(20, 19, 18, 0.42) 0%,
      rgba(20, 19, 18, 0.28) 45%,
      rgba(20, 19, 18, 0.5) 100%
    );
}
.svc-furn__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 48px var(--gutter);
  text-align: center;
}
.svc-furn__eyebrow {
  display: inline-block;
  margin-bottom: 20px;
}
.svc-furn__title {
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 3.6vw, 60px);
  line-height: 1.08;
}
.svc-furn__desc {
  margin: 18px auto 0;
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  line-height: 1.6;
}
/* Staggered fade-up for the centred content. */
.svc-furn__inner > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.svc-furn.is-in .svc-furn__inner > * {
  opacity: 1;
  transform: none;
}
.svc-furn.is-in .svc-furn__eyebrow { transition-delay: 0.14s; }
.svc-furn.is-in .svc-furn__title  { transition-delay: 0.26s; }
.svc-furn.is-in .svc-furn__desc   { transition-delay: 0.40s; }

@media (max-width: 1000px) {
  .svc-furn {
    min-height: clamp(400px, 62vw, 620px);
  }
}
@media (max-width: 620px) {
  .svc-furn {
    min-height: 420px;
  }
  .svc-furn__desc {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-furn__img,
  .svc-furn__inner > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .svc-furn__bg {
    transform: none !important;
  }
}

/* Values — one heading + stacked value blocks beside a sticky image. */
.svc-values__head {
  margin-bottom: 8px;
}
.svc-values__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
  color: var(--ink);
}
.svc-value {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.svc-value:first-of-type {
  border-top: 1px solid var(--line);
  margin-top: 34px;
}
.svc-value__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--ink);
}
.svc-value__desc {
  color: var(--body);
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
}

/* Project gallery — a horizontal feed of varied-height frames.
   Use the shared 70/48 section rhythm (was the oversized default 120). */
.section.svc-gallery-section {
  padding-top: clamp(48px, 5vw, 70px);
  padding-bottom: clamp(48px, 5vw, 70px);
}
.svc-gallery-section .section-head {
  margin-bottom: 44px;
}

/* Services contact CTA — bring into the same rhythm as the sections above it
   (scoped to this page so About's shared contact block is untouched). */
.page-template-page-services .contact-cta {
  padding-top: clamp(48px, 5vw, 70px);
  padding-bottom: clamp(48px, 5vw, 70px);
}
.svc-gallery {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  overflow-x: auto;
  padding: 4px var(--gutter) 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.svc-gallery__item {
  margin: 0;
  flex: 0 0 auto;
  width: clamp(240px, 24vw, 370px);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: start;
}
.svc-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Contact CTA — two actions side by side. */
.contact-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 30px;
}

/* ============================================================
   Services dropdown (nav)
   ============================================================ */
.nav__has-sub {
  position: relative;
}
.nav__has-sub > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav__has-sub > a .icon {
  width: 15px;
  height: 15px;
  transition: transform 0.3s ease;
}
.nav__has-sub:hover > a .icon,
.nav__has-sub:focus-within > a .icon {
  transform: rotate(180deg);
}
/* The submenu arrow button is a mobile-drawer control only (see @media below). */
.nav__sub-toggle {
  display: none;
}
.nav__sub {
  position: absolute;
  top: 100%;
  left: -18px;
  margin: 0;
  padding: 10px;
  min-width: 210px;
  list-style: none;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(20, 19, 18, 0.16);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
  z-index: 20;
}
/* invisible bridge so the pointer can travel from the label to the panel */
.nav__sub::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__sub li {
  border: 0;
}
.nav__sub a {
  display: block;
  padding: 11px 16px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
  transition: background 0.25s ease, color 0.25s ease;
}
.nav__sub a::after {
  display: none;
}
.nav__sub a:hover {
  background: var(--cream);
  color: var(--bronze);
}

/* ============================================================
   Architecture page
   ============================================================ */
/* Hero — image left, editorial title right (light header sits over it). */
.arch-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 100vh;
}
.arch-hero__media {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.arch-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.arch-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 40px) clamp(40px, 5vw, 96px) 60px;
}
.arch-hero__title {
  font-size: clamp(52px, 6.6vw, 100px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 24px 0 0;
}
.arch-hero__sub {
  margin-top: 34px;
  max-width: 42ch;
  font-size: 20px;
  line-height: 1.55;
  color: var(--body);
}

/* Architectural services — header + stacked text-left / image-right rows. */
.arch-services__head {
  margin-bottom: clamp(48px, 5vw, 72px);
}
.arch-services__title {
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.12;
  margin: 16px 0 0;
}
/* Base / tablet / mobile: the rows are a plain stacked column (unchanged). */
.arch-rows__track {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 7vw, 112px);
}
.arch-rows__dots {
  display: none;
}
.arch-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 84px);
  align-items: center;
}

/* Desktop only: auto horizontal carousel (activated by JS adding .is-carousel,
   so no-JS desktop keeps the plain stacked column). One row per slide. */
@media (min-width: 1001px) {
  .arch-rows.is-carousel {
    position: relative;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
  }
  .arch-rows.is-carousel.is-grabbing {
    cursor: grabbing;
  }
  .arch-rows.is-carousel .arch-rows__track {
    flex-direction: row;
    gap: 0;
    will-change: transform;
  }
  .arch-rows.is-carousel .arch-row {
    flex: 0 0 100%;
    min-width: 100%;
  }
  /* slides are managed by the carousel — always visible (bypass reveal states) */
  .arch-rows.is-carousel .arch-row__text > *,
  .arch-rows.is-carousel .arch-row__media,
  .arch-rows.is-carousel .arch-row__list li {
    opacity: 1 !important;
    transform: none !important;
  }
  .arch-rows.is-carousel .arch-rows__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 52px;
  }
}
/* Animated pill/dot pagination. */
.arch-rows__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(156, 124, 62, 0.3);
  cursor: pointer;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.1, 1), background 0.5s ease;
}
.arch-rows__dot.is-active {
  width: 34px;
  background: var(--bronze);
}
.arch-row__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.arch-row__desc {
  color: var(--body);
  font-size: 20px;
  line-height: 1.55;
  margin: 0 0 26px;
  max-width: 44ch;
}
.arch-row__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.arch-row__list li {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  color: var(--ink);
}
.arch-row__list li:first-child {
  border-top: 1px solid var(--line);
}
.arch-row__media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 756 / 800;
}
.arch-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Feel The Difference — cream, sticky intro + reason cards. */
.arch-why {
  background: var(--cream);
}
.arch-why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
.arch-why__intro {
  position: sticky;
  top: 110px;
}
.arch-why__title {
  font-size: clamp(38px, 4vw, 64px);
  line-height: 1.1;
  margin: 16px 0 40px;
}
/* Optional lead paragraph under the heading (Interior Design "Trust Us"). */
.arch-why__lead {
  color: var(--body);
  font-size: 20px;
  line-height: 1.55;
  margin: 0 0 40px;
  max-width: 44ch;
}
.page-template-page-interior-design .arch-why__title {
  margin-bottom: 22px;
}
.arch-why__art {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.arch-why__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.arch-why__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.arch-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(28px, 2.4vw, 42px);
}
.arch-card__icon {
  display: inline-flex;
  color: var(--gold);
  margin-bottom: 22px;
}
.arch-card__icon .icon {
  width: 30px;
  height: 30px;
}
.arch-card__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.2;
  color: var(--bronze);
  margin: 0 0 12px;
}
.arch-card__desc {
  color: var(--body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* ---- Architecture — premium motion & micro-interactions ---- */
/* Image zoom on hover (figures clip; images ease). Kept subtle. */
.arch-hero__media,
.arch-row__media,
.arch-why__art {
  overflow: hidden;
}
.arch-row__media img,
.arch-why__art img {
  transition: transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: transform;
}
.arch-row:hover .arch-row__media img,
.arch-why__art:hover img {
  transform: scale(1.05);
}
/* Reason cards lift + icon nudge on hover. */
.arch-card {
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
}
.arch-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(20, 19, 18, 0.09);
}
.arch-card__icon .icon {
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.arch-card:hover .arch-card__icon .icon {
  transform: scale(1.12) rotate(-4deg);
}
/* Service list rows get a hovering gold accent. */
.arch-row__list li {
  transition: color 0.3s ease, padding-left 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.arch-row__list li:hover {
  color: var(--bronze);
  padding-left: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero — staggered entrance on load; image settles from a slow zoom. */
  html.js .arch-hero__content > * {
    opacity: 0;
    transform: translateY(30px);
    animation: archUp 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  html.js .arch-hero__content .eyebrow {
    animation-delay: 0.12s;
  }
  html.js .arch-hero__title {
    animation-delay: 0.26s;
  }
  html.js .arch-hero__sub {
    animation-delay: 0.48s;
  }
  html.js .arch-hero__media img {
    animation: archSettle 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }

  /* Service rows — the container triggers; its children reveal in sequence. */
  .arch-row.reveal {
    opacity: 1;
    transform: none;
  }
  .arch-row__text > *,
  .arch-row__media {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .arch-row__media {
    transform: translateY(30px) scale(1.03);
  }
  .arch-row.is-in .arch-row__text > *,
  .arch-row.is-in .arch-row__media {
    opacity: 1;
    transform: none;
  }
  .arch-row.is-in .arch-row__title {
    transition-delay: 0.06s;
  }
  .arch-row.is-in .arch-row__desc {
    transition-delay: 0.15s;
  }
  .arch-row.is-in .arch-row__list {
    transition-delay: 0.24s;
  }
  .arch-row.is-in .arch-row__media {
    transition-delay: 0.1s;
  }
  /* list items ripple in after the block */
  .arch-row__list li {
    opacity: 0;
    transform: translateY(14px);
  }
  .arch-row.is-in .arch-row__list li {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease, color 0.3s ease, padding-left 0.35s ease;
  }
  .arch-row.is-in .arch-row__list li:nth-child(1) { transition-delay: 0.3s; }
  .arch-row.is-in .arch-row__list li:nth-child(2) { transition-delay: 0.38s; }
  .arch-row.is-in .arch-row__list li:nth-child(3) { transition-delay: 0.46s; }
  .arch-row.is-in .arch-row__list li:nth-child(4) { transition-delay: 0.54s; }

  /* Feel The Difference — cards stagger up one after another. */
  .arch-why__cards.reveal {
    opacity: 1;
    transform: none;
  }
  .arch-why__cards .arch-card {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 0.45s ease;
  }
  .arch-why__cards.is-in .arch-card {
    opacity: 1;
    transform: none;
  }
  .arch-why__cards.is-in .arch-card:nth-child(1) { transition-delay: 0.05s; }
  .arch-why__cards.is-in .arch-card:nth-child(2) { transition-delay: 0.16s; }
  .arch-why__cards.is-in .arch-card:nth-child(3) { transition-delay: 0.27s; }
  .arch-why__cards.is-in .arch-card:nth-child(4) { transition-delay: 0.38s; }
}

@keyframes archUp {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes archSettle {
  from {
    transform: scale(1.09);
  }
  to {
    transform: scale(1);
  }
}

/* Architecture + dropdown — tablet / mobile */
@media (max-width: 1000px) {
  .arch-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .arch-hero__media {
    aspect-ratio: 16 / 11;
  }
  .arch-hero__content {
    padding: 36px var(--gutter) 48px;
  }
  .arch-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .arch-row__media {
    order: -1;
    aspect-ratio: 4 / 3;
  }
  .arch-why__grid {
    grid-template-columns: 1fr;
  }
  .arch-why__intro {
    position: static;
  }
  .arch-why__title {
    margin-bottom: 28px;
  }

  /* Testimonials — stack the cards vertically instead of forcing an awkward
     horizontal side-scroll on touch devices (they scroll with the page). */
  .arch-testimonials .testimonials__track {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 18px;
  }
  .arch-testimonials .tcard {
    min-height: 0;
  }
}

/* ============================================================
   Contact page
   ============================================================ */
.section.contact-hero {
  padding: calc(var(--header-h) + 56px) 0 clamp(36px, 4vw, 48px);
}
.contact-hero .section-head {
  margin-bottom: 0;
  align-items: flex-end;
}
.section.contact-info {
  padding: 0 0 clamp(64px, 7vw, 110px);
}
.section.contact-enquiry {
  padding: 0 0 clamp(80px, 8vw, 120px);
}

/* Info cards */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.cinfo {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 38px 34px;
  min-height: 272px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
}
.cinfo:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(20, 19, 18, 0.07);
}
.cinfo__title {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.cinfo__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cinfo__body p,
.cinfo__body a {
  color: var(--body);
  font-size: 20px;
  line-height: 1.45;
  margin: 0;
}
.cinfo__body a {
  transition: color 0.25s ease;
}
.cinfo__body a:hover {
  color: var(--bronze);
}

/* Enquiry form + map */
.cform__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 646px);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.cform__title {
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.1;
  margin: 16px 0 20px;
}
.cform__lead {
  color: var(--body);
  font-size: 20px;
  line-height: 1.55;
  margin: 0 0 40px;
  max-width: 46ch;
}
.cform {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cform__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cfield {
  position: relative;
}
.cfield input,
.cfield textarea,
.cfield select {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cfield textarea {
  resize: vertical;
  min-height: 128px;
  line-height: 1.5;
}
.cfield input:focus,
.cfield textarea:focus,
.cfield select:focus {
  outline: none;
  border-color: var(--gold-2);
  box-shadow: 0 0 0 3px rgba(217, 182, 103, 0.18);
}
.cfield input::placeholder,
.cfield textarea::placeholder {
  color: transparent;
}
/* Floating labels */
.cfield > label {
  position: absolute;
  left: 16px;
  top: 18px;
  padding: 0 5px;
  font-size: 16px;
  color: rgba(74, 72, 68, 0.62);
  background: var(--paper);
  pointer-events: none;
  transition: transform 0.25s ease, font-size 0.25s ease, color 0.25s ease;
}
.cfield input:focus + label,
.cfield input:not(:placeholder-shown) + label,
.cfield textarea:focus + label,
.cfield textarea:not(:placeholder-shown) + label {
  transform: translateY(-30px);
  font-size: 12px;
  color: var(--bronze);
}
/* Phone with +61 prefix */
.cfield--phone {
  display: flex;
  gap: 10px;
}
.cfield__prefix {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 16px;
  font-weight: 600;
  color: var(--ink);
}
.cfield__prefix .icon {
  color: var(--body);
}
.cfield--phone input {
  flex: 1;
}
.cfield--phone input::placeholder {
  color: rgba(74, 72, 68, 0.62);
}
/* Selects */
.cfield--select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 50px;
  color: var(--ink);
  cursor: pointer;
}
.cfield--select select:invalid {
  color: rgba(74, 72, 68, 0.62);
}
.cfield--select > .icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--body);
  pointer-events: none;
}
.cform__submit {
  margin-top: 8px;
  align-self: flex-start;
  border: 0;
  cursor: pointer;
}
.cform__notice {
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 24px;
}
.cform__notice--ok {
  background: rgba(20, 42, 29, 0.08);
  color: var(--forest);
}
.cform__notice--err {
  background: rgba(156, 42, 42, 0.09);
  color: #9c2a2a;
}
/* Map */
.cform__map {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 646 / 806;
  background: var(--cream);
}
.cform__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Contact — responsive */
@media (max-width: 1000px) {
  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .cform__grid {
    grid-template-columns: 1fr;
  }
  .cform__map {
    aspect-ratio: 16 / 12;
    order: -1;
  }
}
@media (max-width: 560px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }
  .cinfo {
    min-height: 0;
    gap: 24px;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1200px) {
  :root {
    --gutter: 28px;
  }
  .disc {
    padding: 72px 44px 48px;
    min-height: 680px;
  }
  .contact-cta__grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .svc-disc-row .disc--cards {
    min-height: 0;
  }
}
@media (max-width: 1000px) {
  /* Compact header on smaller screens (nav collapses to a toggle). */
  .site-header {
    padding: 18px 0;
  }
  .site-header__inner {
    align-items: center;
  }
  .brand img,
  .custom-logo {
    height: 46px;
  }
  .site-header.is-scrolled {
    padding: 12px 0;
  }
  .site-header.is-scrolled .brand img,
  .site-header.is-scrolled .custom-logo {
    height: 52px;
  }
  .nav-toggle {
    display: inline-flex;
  }
  /* Logo sits below the open drawer so the menu overlay always displays on top
     of the branding (no logo/menu overlap). */
  .site-header .brand,
  .site-header .custom-logo-link {
    position: relative;
    z-index: 95;
  }
  /* Toggle stays above the drawer so the X remains tappable to close. */
  .nav-toggle {
    position: relative;
    z-index: 97;
  }
  /* Lock the page behind the full-screen menu. */
  body.menu-open {
    overflow: hidden;
  }

  /* Dimmed backdrop behind the drawer — the visible sliver of the page.
     Tapping it closes the menu. */
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(8, 14, 10, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.42s ease, visibility 0s linear 0.42s;
  }
  .nav-scrim.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.42s ease, visibility 0s;
  }

  /* Off-canvas drawer — slides in from the right, ~84% wide, page visible
     behind it. Pre-rendered off-screen so the slide animates both ways. */
  .main-nav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 84%;
    max-width: 440px;
    z-index: 96;
    margin-top: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 104px 0 36px;
    background: var(--forest);
    box-shadow: -18px 0 55px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.42s cubic-bezier(0.16, 0.84, 0.44, 1),
      visibility 0s linear 0.42s;
  }
  .main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform 0.42s cubic-bezier(0.16, 0.84, 0.44, 1),
      visibility 0s;
  }

  /* Nav items — left-aligned vertical list with roomy, tappable rows. */
  .main-nav .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .main-nav .nav__list > li {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .main-nav.is-open .nav__list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 28px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff !important;
  }
  .main-nav .nav__list a::after {
    display: none;
  }
  .main-nav.is-open .nav__list > li > a:hover,
  .main-nav.is-open .nav__list > li > a:focus-visible {
    color: var(--gold) !important;
  }

  /* Services row: the text stays a link to the Services page (fills the row),
     with a separate arrow button beside it that toggles the submenu. The
     submenu wraps full-width below both. */
  .main-nav .nav__has-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .main-nav .nav__has-sub > a {
    flex: 1 1 auto;
  }
  /* Hide the desktop inner chevron on mobile — the arrow button replaces it. */
  .main-nav .nav__has-sub > a .icon {
    display: none;
  }
  .main-nav .nav__sub-toggle {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 58px;
    padding: 0;
    background: none;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
  }
  .main-nav .nav__sub-toggle .icon {
    width: 18px;
    height: 18px;
    transition: transform 0.35s ease;
  }
  .main-nav .nav__sub-toggle:hover .icon,
  .main-nav .nav__sub-toggle:focus-visible .icon {
    color: var(--gold);
  }
  .main-nav .nav__has-sub.is-expanded .nav__sub-toggle .icon {
    transform: rotate(180deg);
  }
  .main-nav .nav__sub {
    flex: 0 0 100%;
  }

  /* Submenu — reset the desktop dropdown (absolute / faded / floating panel)
     back into an inline block, then hide by default with a smooth height
     expand/collapse. Indented below Services. */
  .main-nav .nav__sub {
    display: block;
    position: static;
    top: auto;
    left: auto;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    overflow: hidden;
    max-height: 0;
    background: rgba(0, 0, 0, 0.16);
    transition: max-height 0.4s ease;
  }
  .main-nav .nav__sub::before {
    display: none;
  }
  .main-nav .nav__has-sub.is-expanded > .nav__sub {
    max-height: 240px;
  }
  .main-nav .nav__sub li {
    border: 0;
  }
  .main-nav.is-open .nav__sub a {
    display: block;
    padding: 15px 28px 15px 46px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72) !important;
  }
  .main-nav.is-open .nav__sub a:hover,
  .main-nav.is-open .nav__sub a:focus-visible {
    color: var(--gold) !important;
  }

  /* Utility icons — a compact row pinned to the bottom of the drawer. */
  .main-nav .header-tools {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 26px;
    margin-top: auto;
    padding: 24px 28px 0;
  }
  .main-nav.is-open .header-tools a {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  .main-nav.is-open .header-tools a:hover,
  .main-nav.is-open .header-tools a:focus-visible {
    color: var(--gold) !important;
  }
  .main-nav .header-tools .icon {
    width: 24px;
    height: 24px;
  }
  .section {
    padding: 88px 0;
  }
  .section-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .philosophy__grid {
    grid-template-columns: 340px 1fr;
    gap: 44px;
  }
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .journal__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .disc-row {
    grid-template-columns: 1fr;
  }
  .disc {
    min-height: 620px;
  }
  .case__feature {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .case__art {
    min-height: 380px;
  }
  .contact-cta__grid {
    grid-template-columns: 1fr;
  }
  .contact-cta__art {
    aspect-ratio: 16 / 11;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .tcard {
    grid-template-columns: 1fr 260px;
  }
  .testimonials__track {
    grid-auto-columns: minmax(88%, 88%);
  }
}
@media (max-width: 620px) {
  :root {
    --gutter: 20px;
  }
  .stats__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .philosophy__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .philosophy__art {
    aspect-ratio: 4 / 3;
    max-height: 360px;
  }
  /* Bespoke Furniture — mobile only: swipeable horizontal carousel.
     Native scroll-snap gives momentum swipe + smooth snapping, one card at a
     time with a peek of the next. Card design/content is unchanged. */
  .products__grid {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding-bottom: 4px;
    overscroll-behavior-x: contain;
  }
  .products__grid::-webkit-scrollbar {
    display: none;
  } /* WebKit */
  .products__grid > .product-card {
    flex: 0 0 82%; /* one card + a peek of the next */
    scroll-snap-align: start;
  }
  /* Client Insights specs — mobile only: 1 column × 4 full-width rows,
     divided by horizontal lines. Same label/value styling as desktop. */
  .spec-row {
    grid-template-columns: 1fr;
  }
  .spec {
    padding: 22px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    text-align: center;
  }
  .spec:first-child {
    border-top: 0;
    padding-left: 0;
  }
  .site-footer {
    padding: 30px 0 28px;
  }
  .footer-card {
    padding: 0 26px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .tcard {
    grid-template-columns: 1fr;
  }
  .tcard__media {
    min-height: 240px;
    order: -1;
  }
  .testimonials__track {
    grid-auto-columns: minmax(100%, 100%);
  }
  .hero h1 {
    margin: 18px 0 32px;
  }
  .disc {
    padding: 64px 24px 44px;
    min-height: 560px;
  }
  .footer-bottom {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Hero — cinematic intro (GSAP). Scoped to .hero only.
   All other sections are unaffected.
   ============================================================ */
.hero__line {
  display: block;
}
.hero__line-inner {
  display: block;
}

/* Understated hero-button hover (300ms via .btn's existing transition). */
.hero .btn {
  will-change: transform;
}
.hero .btn:hover {
  transform: scale(1.03);
}

/* Pre-animation states — applied only when JS is present AND motion is
   welcome, so no-JS and reduced-motion visitors always see a complete hero.
   The heading lines start faded out; GSAP fades + slides each one up. */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero--anim .hero__bg {
    opacity: 0;
  }
  html.js .hero--anim .eyebrow,
  html.js .hero--anim .hero__cta,
  html.js .hero--anim .hero__scroll {
    opacity: 0;
  }
  html.js .hero--anim .hero__line-inner {
    opacity: 0;
    will-change: transform, opacity;
  }
}

/* Heading settled — guarantee the lines are visible at rest (safety). */
html.hero-lines-in .hero .hero__line-inner {
  opacity: 1;
  will-change: auto;
}

/* Whole intro finished (or safety fallback) — guarantee full visibility. */
html.hero-anim-done .hero__bg,
html.hero-anim-done .hero .eyebrow,
html.hero-anim-done .hero .hero__cta,
html.hero-anim-done .hero .hero__scroll {
  opacity: 1;
}

/* Default Header (Top of Page) */
.site-header {
  background: transparent;
  box-shadow: none;
  transition: all 0.35s ease;
}

.site-header .nav__list > li > a,
.site-header .header-tools a,
.site-header .nav-toggle {
  color: #fff;
}

/* Scrolled Header */
.site-header.is-scrolled {
  background: #fff !important;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

.site-header.is-scrolled .nav__list > li > a,
.site-header.is-scrolled .header-tools a,
.site-header.is-scrolled .nav-toggle {
  color: #1a1918 !important;
}

.site-header.is-scrolled .nav__list > li > a:hover,
.site-header.is-scrolled .header-tools a:hover {
  color: var(--gold-2);
}
/* About page starts transparent */
.site-header.site-header--light {
  background: #fff !important;
  box-shadow: none;
}

.site-header.site-header--light .nav__list > li > a,
.site-header.site-header--light .header-tools a,
.site-header.site-header--light .nav-toggle {
  color: #1a1918 !important;
  background: #fff !important;
}

/* White after scroll */
.site-header.site-header--light.is-scrolled {
  background: #fff !important;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08);
}

.site-header.site-header--light.is-scrolled .nav__list > li > a,
.site-header.site-header--light.is-scrolled .header-tools a,
.site-header.site-header--light.is-scrolled .nav-toggle {
  color: #1a1918 !important;
}
/* Mobile Menu — appearance is driven ONLY by the drawer's own `.is-open` state,
   never by a separate body flag. This is the fix for the "menu turns white after
   navigation" bug: previously these overrides keyed on `body.menu-open`, so if
   that flag ever desynced from `.main-nav.is-open` (e.g. a back/forward-cache
   restore), the light/scrolled header rules — including their `background:#fff`
   pills — took over and the drawer lost its colours. Now every rule tracks the
   single source of truth (`.main-nav.is-open`), carries enough specificity +
   !important to beat those header rules, and clears their white backgrounds, so
   the drawer looks identical on every open, on every page, every time. */
@media (max-width: 1000px) {
  /* Header bar sits above the drawer: transparent, light X, on every variant.
     Keyed off the open drawer via :has() so it can't desync either. */
  .site-header:has(.main-nav.is-open) {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .site-header:has(.main-nav.is-open) .nav-toggle {
    color: #fff !important;
    background: transparent !important;
  }

  /* Top-level items — white text, and NO leftover white pill background. */
  .site-header .main-nav.is-open .nav__list > li > a {
    color: #fff !important;
    background: transparent !important;
  }
  .site-header .main-nav.is-open .nav__list > li > a:hover,
  .site-header .main-nav.is-open .nav__list > li > a:focus-visible {
    color: var(--gold) !important;
  }
  /* Submenu — muted tone, transparent background. */
  .site-header .main-nav.is-open .nav__sub a {
    color: rgba(255, 255, 255, 0.72) !important;
    background: transparent !important;
  }
  .site-header .main-nav.is-open .nav__sub a:hover,
  .site-header .main-nav.is-open .nav__sub a:focus-visible {
    color: var(--gold) !important;
  }
  /* Utility icons. */
  .site-header .main-nav.is-open .header-tools a {
    color: rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
  }
  .site-header .main-nav.is-open .header-tools a:hover,
  .site-header .main-nav.is-open .header-tools a:focus-visible {
    color: var(--gold) !important;
  }
}