/* ================================================================
   BUTTONS
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  line-height: 1;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  min-height: 44px; /* a11y touch target */
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.btn--primary:hover {
  background: var(--color-wood-deep);
  border-color: var(--color-wood-deep);
}

.btn--wood {
  background: var(--color-wood);
  color: var(--color-paper);
  border-color: var(--color-wood);
}
.btn--wood:hover { background: var(--color-wood-deep); border-color: var(--color-wood-deep); }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line-strong);
}
.btn--ghost:hover {
  background: var(--color-paper-2);
  border-color: var(--color-ink);
}

.btn--whatsapp {
  background: var(--color-sage);
  color: var(--color-paper);
  border-color: var(--color-sage);
}
.btn--whatsapp:hover { background: hsl(110, 18%, 28%); border-color: hsl(110, 18%, 28%); }

.btn__arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-default);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ================================================================
   NAV / STICKY HEADER
   ================================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding: var(--space-4) 0;
  background: hsla(38, 30%, 97%, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-normal) var(--ease-default),
              padding var(--duration-normal) var(--ease-default);
}
.nav.scrolled {
  border-bottom-color: var(--color-line);
  padding: var(--space-3) 0;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-ink);
}
.nav__brand picture {
  display: inline-block;
  line-height: 0;
}
.nav__brand img {
  display: block;
  height: clamp(36px, 5vw, 50px);
  width: auto;
  max-width: none;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.nav__brand:hover img { opacity: 0.78; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}

.nav__link {
  font-size: 0.95rem;
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
  text-decoration: none;
  position: relative;
  transition: color var(--duration-fast) var(--ease-default);
}
.nav__link:hover { color: var(--color-ink); }
.nav__link.active { color: var(--color-ink); }
.nav__link.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 1.5px;
  background: var(--color-wood);
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line-strong);
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 20px;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--duration-fast) var(--ease-default),
              opacity var(--duration-fast) var(--ease-default);
}
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 21px; }
.nav__toggle span:nth-child(3) { top: 26px; }
.nav__toggle.active span:nth-child(1) { transform: translateX(-50%) translateY(5px) rotate(45deg); }
.nav__toggle.active span:nth-child(2) { opacity: 0; }
.nav__toggle.active span:nth-child(3) { transform: translateX(-50%) translateY(-5px) rotate(-45deg); }

/* Mobile sticky phone/WhatsApp pill */
.contact-pill {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-sticky);
  background: var(--color-ink);
  border-radius: var(--radius-full);
  padding: 0.55rem 0.6rem 0.55rem 1.1rem;
  box-shadow: var(--shadow-lg);
  align-items: center;
  gap: var(--space-3);
}
.contact-pill__text {
  color: var(--color-paper);
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}
.contact-pill__cta {
  background: var(--color-sage);
  color: var(--color-paper);
  border-radius: var(--radius-full);
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

/* ================================================================
   FOOTER
   ================================================================ */

.footer {
  background: var(--color-ink);
  color: hsla(38, 25%, 92%, 0.85);
  padding: var(--space-20) 0 var(--space-8);
  position: relative;
  isolation: isolate;
}
.footer__mark {
  display: block;
  height: clamp(56px, 8vw, 80px);
  width: auto;
  max-width: none;
  margin-bottom: var(--space-5);
  filter: invert(1) brightness(1.05);
  opacity: 0.92;
}
.footer h4 {
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-16);
}
.footer__brand-line {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-paper);
  letter-spacing: var(--tracking-tight);
  max-width: 28ch;
  margin-bottom: var(--space-4);
}
.footer__brand-line em { color: var(--color-wood-soft); font-style: italic; }
.footer__lede { font-size: 0.95rem; max-width: 32ch; }
.footer__nav-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.footer__nav-list a { color: hsla(38, 25%, 92%, 0.85); text-decoration: none; font-size: 0.92rem; }
.footer__nav-list a:hover { color: var(--color-wood-soft); }
.footer__contact-item { font-size: 0.92rem; margin-bottom: var(--space-2); }
.footer__contact-item a { color: hsla(38, 25%, 92%, 0.85); text-decoration: none; }
.footer__contact-item a:hover { color: var(--color-wood-soft); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-8);
  border-top: 1px solid hsla(38, 25%, 92%, 0.15);
  font-size: 0.85rem;
  color: hsla(38, 25%, 92%, 0.6);
}

/* ================================================================
   HERO — scroll-pinned cinematic frame sequence with overlay text
   ================================================================ */

.hero-ed {
  position: relative;
  isolation: isolate;
  /* Updated by js/frame-sequence.js, range 0..1. Subscribed by the
     content lift and scroll-cue fade. */
  --frame-progress: 0;
  /* Pull the hero up under the nav so the pin-inner is sticky-locked to
     viewport-top from scrollY=0 — the first scroll tick advances frames
     instead of moving the page. js/navigation.js publishes --nav-h. */
  margin-top: calc(-1 * var(--nav-h, 77px));
}

/* When the Aphyx mockup-preview banner is on the page (deployed to
   aphyx.live/demos/...), body gets padding-top:30px to clear the banner.
   Extend the hero's pull-up by that same 30px so it still starts at the
   very top of the viewport and the scroll-pin engages from scrollY=0. */
body:has(.aphyx-mockup-flag) .hero-ed {
  margin-top: calc(-1 * (var(--nav-h, 77px) + 30px));
}

/* Tall outer drives scroll distance: ~2× viewport */
.hero-ed__pin-wrap {
  height: 200vh;
  position: relative;
}

/* Sticky inner — stays fixed to the viewport while pin-wrap scrolls past.
   We use a solid dark background instead of the poster image so the
   canvas's left-to-right "drawing" reveal is visible against the dark
   on first paint. (The poster preload in <head> still warms the cache
   for the first frame the canvas will draw.) */
.hero-ed__pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  background-color: hsl(28, 25%, 6%);
}

/* Canvas fills the pin. On page load, the canvas reveals progressively
   from left to right via a clip-path animation, synced to the warm
   pencil-line sweep above it — so the image is "drawn in" by the line
   rather than fading in independently. Same 1.8s easing curve on both
   keeps the line at the leading edge of the reveal. */
.hero-ed__sequence {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Start fully clipped from the right (image invisible), animate to
     fully revealed. The slight 0.5% overshoot on the right edge clears
     any sub-pixel rounding so the final state has no clip artefact. */
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  animation: heroSketchClip 1.8s cubic-bezier(0.5, 0.05, 0.45, 0.95) forwards;
}

@keyframes heroSketchClip {
  0%   { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 -0.5% 0 0); -webkit-clip-path: inset(0 -0.5% 0 0); }
}

/* The pencil sweep is the visible "drawing edge" — it travels across the
   pin in the same 1.8s with the same easing curve so it sits at the
   leading edge of the clip reveal. The line is positioned BEHIND the
   overlay scrim (z:1) but ABOVE the canvas (z:0), so it reads as ink
   touching the page. */
.hero-ed__pin-inner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg,
    transparent 0%,
    hsla(34, 70%, 75%, 0.55) 18%,
    hsla(34, 80%, 82%, 0.85) 50%,
    hsla(34, 70%, 75%, 0.55) 82%,
    transparent 100%);
  box-shadow:
    0 0 12px hsla(34, 75%, 70%, 0.45),
    0 0 36px hsla(34, 85%, 72%, 0.25);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-12px);
  animation: heroSketchSweep 1.8s cubic-bezier(0.5, 0.05, 0.45, 0.95) forwards;
}

@keyframes heroSketchSweep {
  0%   { transform: translateX(-12px);    opacity: 0; }
  10%  { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(100vw);    opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ed__sequence {
    animation: none;
    clip-path: none;
    -webkit-clip-path: none;
  }
  .hero-ed__pin-inner::after { display: none; }
}

/* Scrim — strong dark wash on the LEFT half where the text sits, extending
   well past the column so even wide headlines sit on solid dark. The right
   side of the frame stays clean for the video. Plus a soft bottom vignette
   to anchor the CTA row. */
.hero-ed__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      hsla(28, 30%, 4%, 0.82) 0%,
      hsla(28, 30%, 4%, 0.72) 25%,
      hsla(28, 30%, 4%, 0.5) 50%,
      hsla(28, 30%, 4%, 0.22) 72%,
      transparent 88%),
    linear-gradient(180deg,
      transparent 0%,
      transparent 55%,
      hsla(28, 30%, 4%, 0.6) 100%);
}

/* Overlaid text — stays readable throughout. Instead of fading out near
   the end, the whole block slowly shifts UP (so users feel forward
   momentum) while the colour-mix below keeps it legible over every frame.
   padding-top adds clearance for the nav (which now overlays the top of
   the hero) plus comfortable breathing room below it. */
.hero-ed__content {
  position: relative;
  z-index: 2;
  align-self: center;
  padding-top: calc(var(--nav-h, 77px) + clamp(1.5rem, 4vh, 3rem));
  padding-bottom: clamp(3rem, 8vh, 6rem);
  color: var(--color-paper);
  transform: translateY(calc(var(--frame-progress) * -64px));
}

/* All hero text is fixed paper-light. The left scrim gives it a dependable
   dark backdrop; a strong text-shadow is the safety net for any bright
   pixel that pokes through the scrim. */

.hero-ed__eyebrow {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: var(--weight-medium);
  color: hsla(38, 30%, 97%, 0.88);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  text-shadow:
    0 1px 2px hsla(28, 30%, 4%, 0.6),
    0 2px 12px hsla(28, 30%, 4%, 0.45);
  opacity: 0;
  transform: translateX(-32px);
  animation: heroSlideInLeft 800ms var(--ease-default) 150ms forwards;
}

.hero-ed__display {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-weight: 380;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--color-paper);
  /* Strong layered shadow — short crisp drop for edge contrast, a wider
     blurred halo for any rogue bright pixels. */
  text-shadow:
    0 1px 2px hsla(28, 30%, 4%, 0.55),
    0 3px 14px hsla(28, 30%, 4%, 0.5),
    0 6px 40px hsla(28, 30%, 4%, 0.4);
  font-variation-settings: "opsz" 144;
  max-width: 16ch;
}
.hero-ed__display-line {
  display: block;
  font-size: clamp(3rem, 12vw, 9rem);
  opacity: 0;
  transform: translateX(-48px);
  animation: heroSlideInLeft 1100ms var(--ease-default) forwards;
  animation-delay: calc(300ms + var(--i, 0) * 220ms);
}
/* Italic 'art' — bright warm cream so it lifts clear of the brown scrim
   (the previous wood-soft tan was too close in hue). The warm glow halo
   simulates a soft uplight against the dark backdrop. The art-flier JS
   hides this <em> during handoff. */
.hero-ed__display em {
  font-style: italic;
  font-weight: 420;
  color: hsl(34, 70%, 82%);
  text-shadow:
    0 1px 2px hsla(28, 30%, 4%, 0.55),
    0 0 26px hsla(34, 75%, 72%, 0.35);
  display: inline-block;
  opacity: 0;
  transform: translateY(0.15em) scale(0.86);
  animation: artLand 900ms var(--ease-default) 1100ms forwards;
}

.hero-ed__lede {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: hsla(38, 30%, 97%, 0.92);
  max-width: 52ch;
  margin-bottom: var(--space-8);
  text-shadow:
    0 1px 2px hsla(28, 30%, 4%, 0.6),
    0 2px 14px hsla(28, 30%, 4%, 0.45);
  opacity: 0;
  transform: translateX(-24px);
  animation: heroSlideInLeft 900ms var(--ease-default) 900ms forwards;
}

.hero-ed__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  opacity: 0;
  transform: translateX(-20px);
  animation: heroSlideInLeft 900ms var(--ease-default) 1050ms forwards;
}
/* Ghost button — light outline against the dark scrim, consistent across
   the full scrub. */
.hero-ed .btn--ghost {
  color: var(--color-paper);
  border-color: hsla(38, 30%, 97%, 0.6);
  background: hsla(38, 30%, 97%, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-ed .btn--ghost:hover {
  background: hsla(38, 30%, 97%, 0.18);
  border-color: hsla(38, 30%, 97%, 0.9);
}

/* Scroll cue — fades out as scrubbing begins */
.hero-ed__cue {
  position: absolute;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 1.1rem;
  background: hsla(38, 30%, 97%, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid hsla(38, 30%, 97%, 0.4);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: var(--weight-medium);
  color: var(--color-paper);
  text-decoration: none;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px hsla(28, 30%, 4%, 0.5);
  opacity: clamp(0, 1 - var(--frame-progress) / 0.12, 1);
  animation: cueBob 2.4s var(--ease-in-out) infinite;
}
.hero-ed__cue-arrow {
  display: inline-block;
  font-family: var(--font-display);
  color: hsl(34, 70%, 82%);
}

@keyframes cueBob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 4px); }
}
@keyframes heroSlideInLeft {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes artLand {
  60%  { opacity: 1; transform: translateY(0) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Reduced motion: drop the pin, show the poster + text statically */
@media (prefers-reduced-motion: reduce) {
  .hero-ed__pin-wrap { height: 100vh; }
  .hero-ed__pin-inner { position: relative; }
  .hero-ed__sequence { display: none; }
  .hero-ed__overlay {
    background: linear-gradient(180deg,
      hsla(28, 30%, 6%, 0.25) 0%, hsla(28, 30%, 4%, 0.55) 100%);
  }
  .hero-ed__content,
  .hero-ed__cue { opacity: 1 !important; transform: none !important; }
  .hero-ed__cue { transform: translateX(-50%) !important; }
}

/* Mobile pass: text fills the full width, so the left-only scrim doesn't
   work. Switch to a vertical scrim that darkens the top + middle (where
   eyebrow / headline / lede / CTAs sit) while letting the bottom of the
   frame show. Tighter typography and padding for narrow screens. */
@media (max-width: 768px) {
  .hero-ed__pin-wrap { height: 180vh; }

  .hero-ed__pin-inner {
    background-position: center 50%;
  }

  .hero-ed__overlay {
    background:
      linear-gradient(180deg,
        hsla(28, 30%, 4%, 0.78) 0%,
        hsla(28, 30%, 4%, 0.68) 25%,
        hsla(28, 30%, 4%, 0.5) 55%,
        hsla(28, 30%, 4%, 0.32) 75%,
        hsla(28, 30%, 4%, 0.55) 100%);
  }

  .hero-ed__content {
    padding-top: clamp(4rem, 14vh, 7rem);
    padding-bottom: clamp(2.5rem, 8vh, 5rem);
  }
  .hero-ed__eyebrow { font-size: 0.8rem; letter-spacing: 0.1em; }
  .hero-ed__display-line { font-size: clamp(2.5rem, 11vw, 4rem); }
  .hero-ed__display { max-width: 14ch; }
  .hero-ed__lede { font-size: 1.02rem; max-width: 40ch; }
  .hero-ed__actions { gap: var(--space-2); }
  .hero-ed__actions .btn { padding: 0.7rem 1rem; font-size: 0.92rem; }

  .hero-ed__cue {
    bottom: clamp(0.9rem, 3vh, 1.5rem);
    font-size: 0.74rem;
    padding: 0.5rem 0.9rem;
  }

  .art-gallery {
    padding: clamp(4rem, 10vh, 6rem) 0 clamp(3rem, 8vh, 5rem);
  }
  .art-gallery__title { max-width: none; }
  .art-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .art-gallery__tile { aspect-ratio: 4 / 5; }
}

/* ================================================================
   ART GALLERY — receives the flying "Art" word from the hero
   ================================================================ */

.art-gallery {
  position: relative;
  padding: clamp(6rem, 14vh, 11rem) 0 clamp(4rem, 10vh, 8rem);
  background: var(--color-paper);
}

.art-gallery__eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  color: var(--color-wood);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.art-gallery__title {
  margin: 0 0 clamp(2rem, 5vh, 3.5rem);
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 96;
  max-width: 16ch;
}
.art-gallery__title em {
  font-style: italic;
  font-weight: 420;
  color: var(--color-wood-deep);
}

.art-gallery__lede {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink-soft);
  max-width: 56ch;
  margin: 0 0 clamp(2.5rem, 6vh, 4rem);
}

.art-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
@media (min-width: 900px) {
  .art-gallery__grid { grid-template-columns: repeat(4, 1fr); }
}
.art-gallery__tile {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, hsla(28, 18%, 88%, 0.7), hsla(28, 12%, 80%, 0.85)),
    var(--color-paper-3);
  display: grid;
  place-items: end;
  padding: var(--space-4);
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* Material strip — calm entrance + continuous breathing */
.materials {
  position: relative;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background: hsla(38, 30%, 97%, 0.45);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px hsla(28, 30%, 14%, 0.05);
}
/* Faint hairline grid behind the strip — adds editorial depth */
.materials::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(hsla(28, 30%, 14%, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, hsla(28, 30%, 14%, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 0;
}
.materials__rail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  position: relative;
  z-index: 1;
}
.materials__item {
  display: block;
  opacity: 0;
  transform: translateX(40px);
  animation: heroSlideInRight 850ms var(--ease-default) forwards;
  animation-delay: calc(1300ms + var(--i, 0) * 110ms);
}
.materials__swatch {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  position: relative;
  overflow: hidden;
  background: var(--color-paper-3);
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}
.materials__swatch::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(at 30% 30%, hsla(38, 35%, 97%, 0.35), transparent 65%),
    radial-gradient(at 75% 75%, hsla(28, 30%, 14%, 0.12), transparent 70%);
  pointer-events: none;
}
.materials__swatch::after {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 25% 25%, hsla(38, 35%, 97%, 0.18), transparent 55%);
  animation: materialBreathe 9s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i, 0) * -1.6s);
  pointer-events: none;
}
@keyframes materialBreathe {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.7; }
  50%      { transform: scale(1.08) translate(2%, 1%); opacity: 1; }
}
.materials__item:hover .materials__swatch {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.materials__swatch--walnut {
  background: linear-gradient(135deg, hsl(28, 38%, 26%) 0%, hsl(28, 42%, 38%) 60%, hsl(28, 35%, 48%) 100%);
}
.materials__swatch--linen {
  background: linear-gradient(135deg, hsl(38, 22%, 86%) 0%, hsl(36, 18%, 80%) 100%);
}
.materials__swatch--paper {
  background: linear-gradient(180deg, hsl(40, 35%, 95%) 0%, hsl(38, 28%, 88%) 100%);
}
.materials__swatch--ceramic {
  background: linear-gradient(140deg, hsl(34, 14%, 78%) 0%, hsl(28, 18%, 68%) 100%);
}
.materials__swatch--stone {
  background: linear-gradient(150deg, hsl(28, 8%, 32%) 0%, hsl(28, 6%, 50%) 100%);
}

.materials__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  line-height: 1.1;
}
.materials__caption {
  font-size: 0.9rem;
  color: var(--color-ink-mute);
  line-height: 1.4;
  margin-top: var(--space-1);
  max-width: 22ch;
}

@media (min-width: 720px) {
  .materials__rail {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ed__eyebrow,
  .hero-ed__display-line,
  .hero-ed__lede,
  .hero-ed__actions,
  .materials__item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .materials__swatch::after { animation: none !important; }
}

/* Legacy .hero kept for old markup; unused on home now */
.hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 8rem); }

/* Section depth fields — quiet tinted backdrops for layout layering */
.section--field-wood,
.section--field-sage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section--field-wood::before,
.section--field-sage::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
}
.section--field-wood::before {
  top: -10%;
  right: -15%;
  width: 55vw;
  height: 55vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(circle at 50% 50%,
              hsla(28, 50%, 78%, 0.4) 0%,
              hsla(28, 45%, 85%, 0.18) 45%,
              transparent 70%);
}
.section--field-sage::before {
  top: 8%;
  left: -12%;
  width: 45vw;
  height: 45vw;
  max-width: 600px;
  max-height: 600px;
  background: radial-gradient(circle at 50% 50%,
              hsla(110, 22%, 78%, 0.32) 0%,
              hsla(110, 18%, 84%, 0.15) 45%,
              transparent 70%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wider);
  color: var(--color-wood);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.hero__eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--color-wood);
}
.hero h1 {
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  font-weight: 380;
}
.hero h1 em {
  font-style: italic;
  color: var(--color-wood-deep);
  font-weight: 420;
}
.hero__lede {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink-soft);
  max-width: 42ch;
  margin-top: var(--space-6);
}
.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}
.hero__meta {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.hero__meta-k {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  margin-bottom: var(--space-1);
}
.hero__meta-v {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
}
.hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--color-paper-3);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero__visual-img { width: 100%; height: 100%; object-fit: cover; }
.hero__visual-caption {
  position: absolute;
  left: var(--space-5); bottom: var(--space-5);
  background: hsla(38, 30%, 97%, 0.92);
  backdrop-filter: blur(8px);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  max-width: 22ch;
}

/* Placeholder visual when no real image is available */
.hero__visual--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-paper-3) 0%, var(--color-wood-tint) 50%, var(--color-sage-tint) 100%);
}
.hero__visual-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.4;
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.25fr 1fr; }
  .hero__meta { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   CARDS — generic + package + portfolio + style
   ================================================================ */

.card {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default);
}
.card:hover {
  border-color: var(--color-line-strong);
  transform: translateY(-2px);
}

/* Package tier card */
.tier {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
}
.tier--featured {
  border-color: var(--color-wood);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.tier__badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-wood);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
}
.tier__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.tier__sub {
  font-size: 0.92rem;
  color: var(--color-ink-mute);
  margin-bottom: var(--space-6);
}
.tier__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.tier__price-num {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.tier__price-unit {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-ink-mute);
}
.tier__price-note {
  font-size: 0.85rem;
  color: var(--color-ink-mute);
  margin-bottom: var(--space-6);
}
.tier__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.tier__list li {
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.5;
}
.tier__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55rem;
  width: 0.6rem; height: 0.6rem;
  border-bottom: 1.5px solid var(--color-wood);
  border-left: 1.5px solid var(--color-wood);
  transform: rotate(-45deg);
}
.tier__list--excluded li::before {
  border: none;
  width: 0.6rem; height: 1.5px;
  background: var(--color-ink-mute);
  top: 0.7rem;
  transform: none;
}
.tier__list--excluded li {
  color: var(--color-ink-mute);
  text-decoration: line-through;
  text-decoration-color: var(--color-line-strong);
}
.tier__divider {
  height: 1px;
  background: var(--color-line);
  margin: var(--space-4) 0;
}
.tier__action { margin-top: auto; }
.tier__action .btn { width: 100%; justify-content: center; }

/* Portfolio card */
.portfolio-card {
  display: block;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper-2);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-normal) var(--ease-default);
}
.portfolio-card:hover { transform: translateY(-2px); }
.portfolio-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--color-paper-3) 0%, var(--color-wood-tint) 100%);
  object-fit: cover;
}
.portfolio-card--tall .portfolio-card__img { aspect-ratio: 3 / 4; }
.portfolio-card--wide .portfolio-card__img { aspect-ratio: 16 / 10; }
.portfolio-card__body { padding: var(--space-4) var(--space-1) 0; }
.portfolio-card__tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-wood);
  margin-bottom: var(--space-1);
}
.portfolio-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
}
.portfolio-card__meta {
  font-size: 0.85rem;
  color: var(--color-ink-mute);
  margin-top: var(--space-1);
}

/* Style chip / card */
.style-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--color-paper);
  transition: border-color var(--duration-normal) var(--ease-default);
}
.style-card:hover { border-color: var(--color-wood); }
.style-card__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-wood);
  margin-bottom: var(--space-3);
}
.style-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
.style-card p {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
}
.style-card__link {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: var(--weight-medium);
  color: var(--color-wood);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.style-card__link:hover { color: var(--color-wood-deep); }

/* Founder quote block */
.quote {
  max-width: 56ch;
  margin: 0 auto;
  text-align: center;
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-wood-soft);
  display: block;
  margin-bottom: var(--space-3);
}
.quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
  color: var(--color-ink);
  font-style: italic;
  font-weight: 400;
}
.quote__attr {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

/* Showroom card */
.showroom {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  background: var(--color-paper-2);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
}
.showroom__address {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  line-height: 1.3;
}
.showroom__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}
.showroom__meta strong { color: var(--color-ink); font-weight: var(--weight-semibold); }
.showroom__visual {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--color-paper-3) 0%, var(--color-wood-tint) 50%, var(--color-sage-tint) 100%);
  border-radius: var(--radius-md);
}
@media (min-width: 900px) {
  .showroom { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* ================================================================
   FILTERS (portfolio)
   ================================================================ */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
}
.filter-chip {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  min-height: 40px;
}
.filter-chip:hover { border-color: var(--color-ink); color: var(--color-ink); }
.filter-chip.active {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}

/* Asymmetric portfolio grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 700px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
  .portfolio-grid > .portfolio-card:nth-child(7n + 1) { grid-column: span 2; }
  .portfolio-grid > .portfolio-card:nth-child(7n + 1) .portfolio-card__img { aspect-ratio: 16 / 9; }
}

/* ================================================================
   LIGHTBOX
   ================================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: hsla(28, 30%, 14%, 0.88);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  overflow-y: auto;
}
.lightbox.open { display: flex; }
.lightbox__inner {
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  max-width: var(--container-lg);
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: var(--space-8);
  position: relative;
}
.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-line-strong);
  background: var(--color-paper);
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--color-ink);
}
.lightbox__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.lightbox__meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-wood);
  margin-bottom: var(--space-6);
}
.lightbox__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (min-width: 700px) {
  .lightbox__gallery { grid-template-columns: repeat(2, 1fr); }
}
.lightbox__photo {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--color-paper-3) 0%, var(--color-wood-tint) 100%);
  border-radius: var(--radius-md);
}

/* ================================================================
   FORMS
   ================================================================ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.form__row--2 { grid-template-columns: 1fr; }
.form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.form__field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}
.form__field input,
.form__field select,
.form__field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.95rem;
  min-height: 44px;
  transition: border-color var(--duration-fast) var(--ease-default);
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--color-wood);
}
.form__field textarea { min-height: 7rem; resize: vertical; }
.form__field [aria-invalid="true"] { border-color: var(--color-error); }
.form-success {
  display: none;
  font-size: 0.9rem;
  color: var(--color-success);
  padding: var(--space-3) var(--space-4);
  background: var(--color-sage-tint);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-success);
}
.form-success.show { display: block; }

/* ================================================================
   BTO CALCULATOR (packages page)
   ================================================================ */

.calculator {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
.calc__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  margin-bottom: var(--space-3);
  display: block;
}
.calc__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.calc__option {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: var(--weight-medium);
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  padding: 0.6rem 1rem;
  cursor: pointer;
  color: var(--color-ink-soft);
  transition: all var(--duration-fast) var(--ease-default);
  min-height: 44px;
}
.calc__option:hover { border-color: var(--color-ink); color: var(--color-ink); }
.calc__option.active {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.calc__result {
  background: var(--color-wood-tint);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-self: stretch;
}
.calc__result-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-wood-deep);
}
.calc__result-range {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  line-height: 1.1;
}
.calc__result-note { font-size: 0.85rem; color: var(--color-ink-soft); }
.calc__result-cta { margin-top: var(--space-3); }
@media (min-width: 800px) {
  .calculator { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
}

/* ================================================================
   FAQ
   ================================================================ */

.faq {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-line);
}
.faq__item {
  border-bottom: 1px solid var(--color-line);
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-wood);
  transition: transform var(--duration-fast) var(--ease-default);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item-body {
  padding: 0 0 var(--space-5);
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  max-width: 70ch;
}

/* ================================================================
   PAGE HEADER (for non-home pages)
   ================================================================ */

.page-hero {
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
}
.page-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  color: var(--color-wood);
  margin-bottom: var(--space-4);
}
.page-hero h1 {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--color-ink);
  max-width: 18ch;
}
.page-hero h1 em { font-style: italic; color: var(--color-wood-deep); }
.page-hero__lede {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  max-width: 52ch;
}