/* ============================================================
   ELEVATE YOUR SPACE
   Design tokens & global styles
   Palette proportions: 50% Icicle · 25% Martini · 15% Sea · 10% Clove
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,350;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,350;1,9..144,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Core palette */
  --icicle:      #DBDFE0;
  --icicle-50:   #ECEEEF;
  --icicle-100:  #F0F2F2;
  --icicle-200:  #C7CCCD;

  --martini:     #DDD0B6;
  --martini-50:  #FAF6EE;
  --martini-100: #F2EAD8;
  --martini-200: #C2B79C;
  --martini-300: #A39A82;

  --sea:         #32586E;
  --sea-50:      #EDF2F4;
  --sea-200:     #9BB1BC;
  --sea-300:     #6F95A8;
  --sea-700:     #274558;
  --sea-800:     #1B3140;

  --clove:       #4C3D31;
  --clove-50:    #F4EFEA;
  --clove-200:   #B4A496;
  --clove-300:   #8A786A;
  --clove-700:   #2C2117;
  --clove-800:   #1A130C;

  /* Semantic */
  --page-bg:     var(--icicle-50);
  --surface:     #FFFFFF;
  --ink:         var(--clove);
  --ink-muted:   #6E5F52;
  --rule:        rgba(76, 61, 49, 0.16);
  --rule-strong: rgba(76, 61, 49, 0.30);
  --accent:      var(--sea);

  /* Type */
  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Layout */
  --maxw:        1320px;
  --gutter:      clamp(20px, 5vw, 64px);
  --section-pad: clamp(56px, 8.5vh, 110px);
  --header-height: 88px;

  /* Geometry */
  --radius-card:  4px;
  --radius-frame: 6px;
  --radius-pill:  999px;

  /* Shadow */
  --shadow-sm:   0 2px 12px rgba(76, 61, 49, 0.06);
  --shadow-md:   0 14px 36px rgba(76, 61, 49, 0.08);
  --shadow-lg:   0 24px 60px rgba(76, 61, 49, 0.10);

  /* Motion */
  --transition:  0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset & base ───────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--page-bg);
  padding-top: var(--header-height);
  min-width: 320px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--sea-700); }

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}
h1 {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 350;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 350;
  line-height: 1.10;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
h3 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  font-variation-settings: normal;
}

em.accent, .italic-accent {
  font-style: italic;
  font-weight: 350;
  color: var(--accent);
}

/* Eyebrow / section label */
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow.with-rule {
  position: relative;
  padding-left: 40px;
}
.eyebrow.with-rule::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

p { line-height: 1.6; }

/* ── Container ──────────────────────────────────────────────── */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Reveal animation ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Header & nav ───────────────────────────────────────────── */
header.site-header {
  background: var(--page-bg);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--rule);
  height: var(--header-height);
}
.header-inner {
  max-width: var(--maxw);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* ── Brand mark (V10 Cascade SVG in nav bar) ───────────────────
   The cascade is the studio's primary lockup (per brand guide it's
   normally reserved for splash/hero moments, not headers — but the
   inline lockup felt too understated for nav use). Sized to fit
   within the header height with breathing room. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  flex-shrink: 0;
}
.brand-mark img {
  /* Source SVG is 520×320, so width auto-scales from height. At 70px
     tall, the cascade fits cleanly in the 88px header with breathing
     room above and below. */
  height: 70px;
  width: auto;
  display: block;
  transition: opacity var(--transition);
}
.brand-mark:hover img { opacity: 0.85; }

nav.primary-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
}
nav.primary-nav li { position: relative; }
nav.primary-nav li > a,
nav.primary-nav .dropbtn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  transition: color var(--transition);
  letter-spacing: 0;
  text-transform: none;
  display: inline-block;
}
nav.primary-nav li > a:hover,
nav.primary-nav .dropdown:hover .dropbtn,
nav.primary-nav li > a.active {
  color: var(--accent);
}
nav.primary-nav li > a.active {
  position: relative;
}
nav.primary-nav li > a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.7;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: -8px;
  background: var(--icicle-50);
  min-width: 220px;
  border-radius: var(--radius-card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
  z-index: 2000;
}
/* Invisible bridge that fills the 12px gap between the menu item and the
   dropdown panel. Lets the cursor cross without losing :hover and closing
   the menu. */
.dropdown-content::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}
.dropdown-content a {
  display: block;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.dropdown-content a:first-child {
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}
.dropdown-content a:last-child {
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
}
.dropdown-content a:hover {
  background: var(--martini);
  color: var(--accent);
}
.dropdown:hover .dropdown-content { display: block; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 880px) {
  :root { --header-height: 72px; }
  body { padding-top: var(--header-height); }
  header.site-header { height: var(--header-height); }
  /* Cascade scaled down for the 72px mobile header */
  .brand-mark img { height: 56px; }
  .hamburger { display: flex; }
  nav.primary-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0; bottom: 0;
    background: var(--page-bg);
    padding: 32px var(--gutter);
    overflow-y: auto;
    z-index: 999;
  }
  nav.primary-nav.open { display: block; }
  nav.primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  nav.primary-nav li, nav.primary-nav li.dropdown {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--rule);
  }
  nav.primary-nav li:last-child { border-bottom: none; }
  nav.primary-nav li > a,
  nav.primary-nav .dropbtn {
    display: block;
    width: 100%;
    padding: 18px 0;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 350;
    color: var(--ink);
    text-align: left;
    font-variation-settings: "opsz" 24;
  }
  nav.primary-nav li > a.active {
    font-style: italic;
    color: var(--accent);
  }
  nav.primary-nav li > a.active::after { display: none; }
  .dropdown-content {
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--accent);
    border-radius: 0;
    margin: 4px 0 12px 16px;
    padding: 0;
    background: transparent;
    min-width: 0;
  }
  .dropdown-content a {
    padding: 10px 16px;
    font-size: 16px;
    font-family: var(--sans);
  }
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  white-space: nowrap;
  letter-spacing: 0;
}
.btn-primary {
  background: var(--sea);
  color: var(--icicle-50);
  border-color: var(--sea);
}
.btn-primary:hover {
  background: var(--sea-700);
  border-color: var(--sea-700);
  color: var(--icicle-50);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--icicle-50);
}
.btn-on-dark {
  background: var(--martini);
  color: var(--clove);
  border-color: var(--martini);
}
.btn-on-dark:hover {
  background: var(--martini-100);
  border-color: var(--martini-100);
  color: var(--clove);
}
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
  letter-spacing: 0.04em;
  text-transform: none;
}
.btn-text::after {
  content: '→';
  font-style: normal;
  transition: transform var(--transition);
}
.btn-text:hover { color: var(--sea-700); }
.btn-text:hover::after { transform: translateX(4px); }

/* When .btn-text sits on a hero photo (homepage secondary CTA), give it a
   drop shadow for legibility against varying photo tones. Pseudo-element
   arrow inherits the parent's text-shadow automatically. */
.hero .btn-text {
  text-shadow: 0 1px 8px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
}

/* ── Section dividers ───────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 auto 32px;
  max-width: 140px;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule-strong);
}
.divider span {
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}

/* ── Hero (Icicle base — clean, full-bleed image with subtle text overlay) ── */
.hero {
  position: relative;
  width: 100%;
  /* Hero fills the viewport between the fixed header and a matching
     header-height-tall band of empty space below it. On a 1080-tall
     screen with an 88px header, the hero is 904px tall and a clean
     88px white bar shows below it before the next section begins.
     Capped so the hero doesn't get absurdly tall on very large monitors.
     `100dvh` adapts on mobile Safari/Chrome as the URL bar shows/hides;
     falls back to 100vh on older browsers (rare). */
  height: min(calc(100vh - var(--header-height) * 2), 900px);
  height: min(calc(100dvh - var(--header-height) * 2), 900px);
  overflow: hidden;
  margin: 0 0 var(--section-pad);
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: contrast(1.04) saturate(0.92) brightness(1.02) sepia(0.08);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  /* Spotlight gradient: darkens through the middle (where the headline +
     lede sit) for text legibility, but fades back out at the bottom so
     the photo's natural tones meet the Icicle strip below. Earlier
     gradient peaked at 0.65 black at the very bottom edge, creating a
     hard contrast line that made the post-hero Icicle strip read as a
     prominent grey bar. The fade-out softens that boundary. */
  background: linear-gradient(180deg,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.30) 35%,
    rgba(0,0,0,0.42) 60%,
    rgba(0,0,0,0.18) 88%,
    rgba(0,0,0,0.04) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
}
.hero-overlay .eyebrow {
  color: var(--martini);
  margin-bottom: 18px;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
}
.hero-overlay h1 {
  color: var(--icicle-50);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(40px, 6.5vw, 88px);
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0 0 22px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.35);
}
.hero-overlay h1 em { color: var(--martini); font-style: italic; }
.hero-overlay p {
  color: rgba(236, 238, 239, 0.95);
  font-size: 18px;
  line-height: 1.55;
  max-width: 42ch;
  margin: 0 auto 32px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.35);
}
.hero-cta { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-cta .btn-on-dark { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); }

/* On narrow phones, stack hero CTAs vertically so they always fit
   cleanly and align consistently rather than wrapping mid-line. */
@media (max-width: 480px) {
  .hero-cta {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

@media (max-width: 600px) {
  /* Same logic as desktop: hero fills viewport between the fixed header
     and a matching header-height-tall band of empty space below it.
     On mobile the header is 72px (set by the breakpoint at 880px), so
     the hero is 100vh - 144px and a matching 72px band sits below.
     Drop the 900px cap — phones are never tall enough for it to matter,
     and capping it would re-introduce empty space below the hero. */
  .hero { height: calc(100vh - var(--header-height) * 2); }
  .hero { height: calc(100dvh - var(--header-height) * 2); }
  /* Larger headline on mobile — previous floor of 34px never let the
     italic Fraunces have the visual weight it deserves on phones. The new
     min of 44px and stronger 12vw multiplier means it scales up properly
     on bigger phones without overflowing on smaller ones. The text wraps
     naturally to two lines on most phone widths, which actually reads
     better than a single tight line at smaller sizes. */
  .hero-overlay h1 { font-size: clamp(44px, 12vw, 64px); }
  .hero-overlay p { font-size: 15px; max-width: 32ch; }
}

/* ── Compact hero (for inner pages — shorter, cleaner) ─────── */
/* Default sized so a tight cards grid below fits within a 1080p viewport
   without scrolling. Inner pages with a slim text intro below the hero
   should add the .hero-tall modifier for a more substantial hero. */
.hero-compact { height: min(46vh, 460px); }
.hero-compact.hero-tall { height: min(70vh, 700px); }
.hero-compact .hero-overlay {
  align-items: flex-start;
  text-align: left;
  /* Stronger left-to-right gradient so left-aligned text always sits on a
     darkened region, regardless of what the underlying photo shows there.
     Vertical gradient peaks behind the text and fades out at the bottom
     edge so the transition into the Icicle strip below is gentle, not
     a hard contrast line. */
  background:
    linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.10) 80%),
    linear-gradient(180deg,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.30) 55%,
      rgba(0,0,0,0.20) 88%,
      rgba(0,0,0,0.05) 100%
    );
}
.hero-compact .hero-overlay-inner {
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero-compact .hero-overlay h1 {
  text-align: left;
  font-size: clamp(36px, 5.5vw, 72px);
  text-shadow: 0 2px 24px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.55);
}
.hero-compact .hero-overlay p {
  text-align: left;
  margin-left: 0;
  max-width: 50ch;
  text-shadow: 0 1px 12px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
}

@media (max-width: 600px) {
  /* On mobile, compact heroes should leave room for the intro section
     below to also be visible without scrolling. Targets viewport ~750px
     tall (typical phone): header 72px + hero 380px + gap 42px + intro
     section ~256px = ~750px. Longer copy may push the last line slightly
     below the fold; that's acceptable. The .hero-tall variant (used by
     all service/project/contact pages) gets these reduced numbers since
     they all have an intro section below. */
  .hero-compact { height: min(56vh, 440px); }
  .hero-compact.hero-tall { height: min(50vh, 380px); }
  /* Tighten left-aligned hero typography for mobile readability. */
  .hero-compact .hero-overlay h1 { font-size: clamp(34px, 9vw, 52px); }
  .hero-compact .hero-overlay p { font-size: 15px; max-width: 36ch; }
}

/* ── Section base ───────────────────────────────────────────── */
.section {
  padding: var(--section-pad) 0;
}
/* When a section immediately follows the page hero, ease off the top
   padding — the hero already provides ample breathing room. Applies to
   the "Our Approach" / "Our Philosophy" intro on each service detail
   page, and similar patterns elsewhere. */
.hero + .section,
.hero-compact + .section {
  padding-top: clamp(40px, 6vh, 80px);
}
/* Homepage hero specifically: the gap below it should equal the nav-bar
   height. With matching empty bands above (the fixed nav) and below
   (this rule), the hero feels vertically centered in the visible frame. */
.hero:not(.hero-compact) + .section {
  padding-top: var(--header-height);
}
/* And drop the hero's own bottom margin in that case so the spacing
   doesn't double up. */
.hero:has(+ .section),
.hero-compact:has(+ .section) {
  margin-bottom: 0;
}
/* Slim centered-intro sections (eyebrow + headline + one short paragraph)
   don't need full section padding below either — they sit between the
   hero and the next content section, and full padding on both creates a
   stacked-up gap. Affects belvin_project, mariners_street, and the
   service detail pages. Only fires when the narrow intro is the only
   content of the section — sections with a grid or other content after
   the intro (e.g. the Feng Shui Five Elements section) keep full pad. */
.section:has(> .container-narrow.text-center):not(:has(> .container)) {
  padding-bottom: clamp(28px, 4vh, 56px);
}
.section-header {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.section-header h2 { margin-bottom: 14px; }
.section-header .lede {
  max-width: 640px;
  margin: 0 auto;
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1.65;
}

/* Section variants */
.section-martini { background: var(--martini); }
.section-martini-soft { background: var(--martini-50); }
.section-sea { background: var(--sea); color: var(--icicle-50); }
.section-clove { background: var(--clove); color: var(--icicle-50); }

.section-sea h1, .section-sea h2, .section-sea h3,
.section-clove h1, .section-clove h2, .section-clove h3 { color: var(--icicle-50); }

.section-sea .eyebrow,
.section-clove .eyebrow { color: var(--martini); }

.section-sea p,
.section-clove p { color: rgba(236, 238, 239, 0.85); }

/* ── Services grid (3 columns of equal cards) ───────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 980px) {
  .services-grid { grid-template-columns: 1fr; gap: 24px; }
}
.service-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--rule);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.service-card-img {
  height: 240px;
  overflow: hidden;
}
.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.95);
  transition: transform 0.6s ease;
}
.service-card:hover .service-card-img img { transform: scale(1.05); }

.service-card-body {
  padding: 32px 30px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
}
.service-card-body h3 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144;
  margin: 0;
}
.service-card-body p {
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.65;
  flex: 1;
  margin: 0;
}
.service-card-body .btn-text { margin-top: 10px; align-self: flex-start; }

/* ── Two-column feature (about, project pages) ──────────────── */
.feature-pair {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.feature-pair.reverse { direction: rtl; }
.feature-pair.reverse > * { direction: ltr; }
@media (max-width: 900px) {
  .feature-pair, .feature-pair.reverse { grid-template-columns: 1fr; gap: 40px; direction: ltr; }
}
.feature-pair img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-md);
  filter: contrast(1.02) saturate(0.95);
}
@media (max-width: 900px) {
  .feature-pair img { height: 320px; }
}
.feature-text h2 { margin-bottom: 18px; }
.feature-text p {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 16px;
  max-width: 56ch;
}
.feature-text p:last-child { margin-bottom: 0; }
.feature-text .feature-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.feature-text .feature-list li {
  position: relative;
  padding: 14px 0 14px 26px;
  font-size: 15px;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule);
}
.feature-text .feature-list li:last-child { border-bottom: none; }
.feature-text .feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 12px;
  height: 1px;
  background: var(--accent);
}
.feature-text .btn { margin-top: 28px; }

/* ── Region tag (accent block in about) ─────────────────────── */
.region-tag {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--martini-50);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ── Pull quote ─────────────────────────────────────────────── */
.pull-quote {
  text-align: center;
}
.pull-quote blockquote {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 880px;
  margin: 0 auto;
  font-variation-settings: "opsz" 144;
}
.section-sea .pull-quote blockquote { color: var(--martini); }

/* ── Testimonials ───────────────────────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 700px) { .testimonials-grid { grid-template-columns: 1fr; } }
.testimonial-card {
  background: var(--martini-50);
  padding: 40px 36px 36px;
  border-radius: var(--radius-card);
  position: relative;
  border: 1px solid rgba(76,61,49,0.10);
}
.testimonial-card::before {
  content: '\201C';
  font-family: var(--serif);
  font-style: italic;
  font-size: 90px;
  color: var(--accent);
  opacity: 0.20;
  position: absolute;
  top: 6px;
  left: 22px;
  line-height: 1;
}
.testimonial-card p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  margin: 14px 0 0;
  color: var(--ink);
  font-variation-settings: "opsz" 24;
}
.testimonial-card .author {
  display: block;
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-style: normal;
}

/* ── CTA section (consultation block) ───────────────────────── */
.cta-section {
  background: var(--sea);
  color: var(--icicle-50);
  text-align: center;
}
.cta-section h2 {
  color: var(--icicle-50);
  font-style: italic;
  font-size: clamp(32px, 4.5vw, 56px);
}
.cta-section h2 em { color: var(--martini); }
.cta-section .eyebrow { color: var(--martini); }
.cta-section p {
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 17px;
  color: rgba(236, 238, 239, 0.82);
}

/* ── Pricing strip ──────────────────────────────────────────── */
.pricing-strip {
  text-align: center;
}
.pricing-strip .rate {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 18px 0 12px;
}
.pricing-strip .rate .amount {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.pricing-strip .rate .per {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink-muted);
}
.pricing-strip .flat-note {
  margin: 8px auto 32px;
  font-size: 14px;
  font-style: italic;
  color: var(--accent);
  max-width: 540px;
  line-height: 1.6;
}

/* ── Form (contact) ─────────────────────────────────────────── */
.form-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--radius-frame);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
  padding: clamp(36px, 5vw, 60px);
}
.form-card h2 { margin-bottom: 8px; }
.form-card .lede {
  color: var(--ink-muted);
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 1.65;
}
.form-row { margin-bottom: 22px; }
.form-row label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--icicle-50);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-card);
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  resize: vertical;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
.form-row select { cursor: pointer; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(50, 88, 110, 0.10);
}
.form-row textarea { min-height: 140px; }
.form-card .form-submit {
  width: 100%;
  padding: 16px;
  background: var(--sea);
  color: var(--icicle-50);
  border: 1px solid var(--sea);
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  margin-top: 8px;
}
.form-card .form-submit:hover { background: var(--sea-700); }

.form-error {
  background: var(--martini-200);
  color: var(--clove);
  padding: 14px 20px;
  border-radius: var(--radius-card);
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.5;
}

/* ── Footer ─────────────────────────────────────────────────── */
footer.site-footer {
  background: var(--clove);
  color: var(--icicle-50);
  padding-top: 64px;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; gap: 36px; text-align: center; }
}

.footer-info h3 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: 30px;
  letter-spacing: -0.025em;
  color: var(--icicle-50);
  margin-bottom: 14px;
  font-variation-settings: "opsz" 48;
}
.footer-info h3 em { font-style: italic; color: var(--martini); }
.footer-info p {
  font-size: 14px;
  color: rgba(236, 238, 239, 0.65);
  line-height: 1.7;
  margin-bottom: 6px;
}
.footer-info p strong { color: rgba(236, 238, 239, 0.9); font-weight: 500; }

.footer-certs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.footer-certs .cert {
  width: 76px;
  flex-shrink: 0;
}
.footer-certs .cert img {
  width: 100%;
  height: auto;
  opacity: 0.55;
  transition: opacity var(--transition);
}
.footer-certs .cert img:hover { opacity: 0.85; }
@media (max-width: 600px) {
  .footer-certs { gap: 14px; }
  .footer-certs .cert { width: 58px; }
}
@media (max-width: 400px) {
  .footer-certs { gap: 10px; }
  .footer-certs .cert { width: 48px; }
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(236, 238, 239, 0.10);
  max-width: var(--maxw);
  margin: 0 auto;
}
.footer-copy {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--gutter);
  font-size: 12px;
  color: rgba(236, 238, 239, 0.45);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ── Magazine-style gallery (for project pages) ─────────────── */
.mag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 280px;
  gap: 14px;
}
.mag-item {
  position: relative;
  border-radius: var(--radius-frame);
  overflow: hidden;
  background: var(--martini-50);
  cursor: zoom-in;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
}
.mag-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.mag-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.95);
}
.mag-full   { grid-column: span 4; }
.mag-half   { grid-column: span 2; }
.mag-half-t { grid-column: span 2; grid-row: span 2; }
.mag-qtr    { grid-column: span 1; }
@media (max-width: 980px) {
  .mag-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
  .mag-full   { grid-column: span 2; }
  .mag-half-t { grid-column: span 2; grid-row: span 2; }
  .mag-qtr    { grid-column: span 1; }
}
@media (max-width: 600px) {
  .mag-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .mag-full, .mag-half, .mag-half-t, .mag-qtr {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ── Lightbox (project pages) ───────────────────────────────── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 19, 12, 0.94);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox.active { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--radius-frame);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  object-fit: contain;
}
.lightbox-close {
  position: fixed;
  top: 24px; right: 32px;
  font-size: 30px;
  color: rgba(236, 238, 239, 0.8);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition);
}
.lightbox-close:hover { color: var(--martini); }
.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: rgba(236, 238, 239, 0.7);
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  line-height: 1;
  user-select: none;
  transition: color var(--transition);
}
.lightbox-nav:hover { color: var(--martini); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

/* ── City grid (service areas) ──────────────────────────────── */
.city-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 880px) { .city-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .city-grid { grid-template-columns: 1fr; } }
.city-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 28px 26px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.city-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.city-card .eyebrow { margin-bottom: 6px; }
.city-card h3 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: 24px;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144;
  margin: 0 0 10px;
}
.city-card p {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Thank you / utility pages ──────────────────────────────── */
.message-card {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) var(--gutter);
}
.message-card h1 {
  font-style: italic;
  color: var(--ink);
  margin-bottom: 24px;
}
.message-card p {
  color: var(--ink-muted);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 32px;
}

/* ── Stats inline (about) ───────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 600px) { .stats-row { grid-template-columns: 1fr; gap: 20px; } }
.stat .num {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.stat .label {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ── Five Elements grid (Feng Shui page) ───────────────────── */
.elements-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: clamp(28px, 4vw, 44px);
}
@media (max-width: 980px) {
  .elements-grid { grid-template-columns: repeat(2, 1fr); }
  .elements-grid .element-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 8px); justify-self: center; }
}
@media (max-width: 520px) {
  .elements-grid { grid-template-columns: 1fr; gap: 12px; }
  .elements-grid .element-card:last-child { max-width: none; }
}
.element-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 28px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.element-card::before {
  /* Color-keyed top stripe — element-specific colors set per modifier below */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--element-accent, var(--clove-300));
}
.element-card .glyph {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 44px;
  line-height: 1;
  color: var(--element-accent, var(--clove));
  letter-spacing: -0.02em;
}
.element-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.element-card .element-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.element-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}
/* Color keys per element. Each pulls from the existing brand palette
   tints to keep the section feeling part of the system. */
.element-card.wood   { --element-accent: #6E8B6E; }  /* soft sage — the only off-palette color, kept muted to harmonize */
.element-card.fire   { --element-accent: #B5443A; }  /* the same accent red used elsewhere on the site for misuse markers */
.element-card.earth  { --element-accent: var(--martini-200); }
.element-card.metal  { --element-accent: var(--clove-300); }
.element-card.water  { --element-accent: var(--sea); }



/* ── Utility ────────────────────────────────────────────────── */
.text-center { text-align: center; }
.muted { color: var(--ink-muted); }

/* Print: hide nav and footer if needed (light pass) */
@media print {
  header.site-header, .cta-section, footer.site-footer { display: none; }
}