/*
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, .12);
  --line-soft: rgba(26, 25, 24, .08);
  --line-lt:   rgba(255, 255, 255, .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: -.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: .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: .06em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .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, .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, .4); color: var(--white); }
.btn--ghost-light:hover { background: var(--white); color: var(--ink); }

/* 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 .35s ease, padding .35s ease, box-shadow .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: flex-start;        /* logo is taller than the nav; nav sits near the crest */
  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, .92);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .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: 100px; width: auto; }
.site-header.is-scrolled .brand img,
.site-header.is-scrolled .custom-logo { height: 56px; }

.main-nav { display: flex; align-items: center; gap: 32px; margin-top: 7px; }
.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 .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 .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; }

/* ============================================================
   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, .55) 0%, rgba(18, 16, 14, .28) 38%, rgba(18, 16, 14, .72) 100%);
}
.hero__inner { position: relative; z-index: 1; max-width: 1100px; }
.hero .eyebrow { color: rgba(255, 255, 255, .9); letter-spacing: .22em; font-size: 15px; }
.hero h1 {
  font-size: clamp(46px, 6.6vw, 100px);
  line-height: 1.06;
  letter-spacing: -.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: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .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: -.03em;
  color: var(--ink);
}
.stat__label {
  margin-top: 14px;
  font-size: 15px; font-weight: 600; letter-spacing: .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, .34) 0%, rgba(20, 18, 15, .5) 55%, rgba(20, 18, 15, .82) 100%);
}
.disc__inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.disc__eyebrow { letter-spacing: .16em; margin-bottom: 22px; }
.disc--feature h2 { color: var(--white); font-size: clamp(40px, 3.6vw, 60px); }
.disc__lead { margin: 22px auto 0; 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: 0 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: .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: .04em; color: rgba(255, 255, 255, .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 pinned mode: the content stays pinned while the image column scrolls
   naturally upward through a fixed window — like scrolling a gallery beside the
   fixed content. No overlap, no transitions. Only active when JS adds .is-pinned,
   so no-JS / reduced-motion keeps the plain stacked column above. */
@media (min-width: 1001px) {
  .disciplines.is-pinned .disc__slides {
    position: relative;
    width: min(400px, 100%);
    aspect-ratio: 370 / 320;       /* the fixed viewing window */
    overflow: hidden;
    border-radius: var(--radius);
  }
  .disciplines.is-pinned .disc__track { will-change: transform; }
  .disciplines.is-pinned .disc__slide { border-radius: 0; } /* the window rounds the frame */
}

/* ============================================================
   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 .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: .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: .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: .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: .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: .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: .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, .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 .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: .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
   ============================================================ */
/* Sit closer to the section above — the previous section's bottom padding
   already supplies the gap, so trim this section's top padding. Matches the
   Client Insights spacing for a consistent rhythm across the site. */
.section.contact-cta { padding-top: clamp(8px, 2vw, 20px); }

.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; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { padding: 0; background: var(--white); }
.footer-card {
  max-width: var(--wrap);
  margin: 0 auto;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 56px 60px 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 44px;
}
.footer__brand img { height: 92px; 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: -.02em; color: var(--ink); transition: color .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: .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 .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); }
.site-header--light .main-nav.is-open { background: rgba(255, 255, 255, .98); }
.site-header--light .main-nav.is-open .nav__list li { border-bottom: 1px solid var(--line); }

/* 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: -.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, .82); }
.about-video .section-head__title { color: var(--white); }
.about-video .section-head__aside p { color: rgba(255, 255, 255, .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 .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, .12); border: 1px solid rgba(255, 255, 255, .55); color: var(--white);
  transition: background .3s ease;
}
.about-video__player:hover .about-video__play { background: rgba(255, 255, 255, .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: .06em; text-transform: uppercase;
  background: transparent; border: 1px solid rgba(198, 161, 92, .5); color: var(--gold-2);
  cursor: pointer; transition: background .3s ease, color .3s ease, border-color .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; }
.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 .3s ease, box-shadow .3s ease; }
.process-card:hover { border-color: rgba(198, 161, 92, .5); box-shadow: 0 24px 60px -34px rgba(34, 31, 26, .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, .5); border-top-right-radius: 8px; transition: background .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: .06em; text-transform: uppercase; color: var(--bronze); }
.team-card__text { color: var(--ink-2); font-size: 14px; line-height: 1.6; }

/* 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 .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: .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.team,
.section.portfolio {
  padding-top: clamp(48px, 5vw, 70px);
  padding-bottom: clamp(48px, 5vw, 70px);
}

/* 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: .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 .8s ease, transform .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: -.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); }
.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 .7s cubic-bezier(.4, 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 .6s cubic-bezier(.2, .6, .2, 1);
}
.insta__card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 19, 18, 0) 45%, rgba(20, 19, 18, .45) 100%);
  opacity: 0;
  transition: opacity .5s ease;
}
.insta__icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.8);
  z-index: 1;
  color: var(--white);
  opacity: 0;
  transition: opacity .45s ease, transform .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, .3);
  cursor: pointer;
  transition: width .4s ease, background .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; }

@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, .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, .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, .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: .04em; margin: 0 0 12px;
}
.rw-card__loc .icon { width: 16px; height: 16px; }
.rw-card__desc { color: rgba(255, 255, 255, .66); font-size: 16px; line-height: 1.6; margin: 0; }

/* 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: -.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; }

/* ============================================================
   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: 64px; }
  .site-header.is-scrolled { padding: 12px 0; }
  .site-header.is-scrolled .brand img, .site-header.is-scrolled .custom-logo { height: 52px; }
  .main-nav { display: none; margin-top: 0; }
  .nav-toggle { display: inline-flex; }
  .main-nav.is-open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(20, 19, 18, .97); padding: 12px 28px 24px;
  }
  .main-nav.is-open .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .main-nav.is-open .nav__list li { border-bottom: 1px solid var(--line-lt); }
  .main-nav.is-open .nav__list a { display: block; padding: 15px 0; }
  .main-nav.is-open .header-tools { padding-top: 16px; }
  .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; }
  .footer-card { padding: 40px 26px 28px; }
  .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; }