/* Blackwood Carpentry — Palette extracted from badge.jpg + wordmark.jpg
   Cream (#f5f1e4) bg · Slate ink (#293a41) primary · Wood brown (#7d6547) accent
   Amber (#f9af37) highlight · Sage stone (#86877b) muted · Soft cream (#fbf8e6) surface
*/

:root {
  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 7rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;

  /* ==== COLOR — sage-olive + wood + warm beige, derived from logo on sage field ==== */
  /* No white. No navy. Brown-green is the lead. */

  /* Sage-olive — primary surface family (the green the badge sits on) */
  --color-bg: #969678;                 /* dominant sage-olive */
  --color-bg-deep: #7e7e62;            /* deeper sage for contrast bands */
  --color-bg-soft: #a8a886;             /* lifted sage */
  /* Card surfaces use warm beige (badge interior) for contrast against sage */
  --color-surface: #ece6cf;
  --color-surface-2: #f0ecd6;
  --color-surface-offset: #7e7e62;     /* deeper sage band for offset sections */

  /* Forest ink — deep warm-dark (not navy). Pulled toward green/charcoal. */
  --color-ink: #2c3a2a;                 /* deep forest ink */
  --color-ink-deep: #1d281b;            /* near-black with green undertone */
  --color-ink-soft: #44523f;

  /* Text */
  --color-text: #2c3a2a;
  --color-text-muted: #4a5444;
  --color-text-faint: #6b7565;
  --color-text-inverse: #f0ecd6;        /* warm beige for inverse text */

  /* Warm beige — used SPARINGLY for inverse text + highlights, never as page bg */
  --color-beige: #f0ecd6;               /* warm beige from badge interior */
  --color-beige-soft: #e3dfc4;
  --color-beige-deep: #cfc9a8;

  /* Wood brown — from the wordmark letterforms */
  --color-brown: #7d6547;
  --color-brown-deep: #5a4730;
  --color-brown-soft: #96826e;

  /* Wheat / warm amber — from the badge ground band (softer than #f9af37) */
  --color-amber: #e0a85a;               /* warm wheat accent */
  --color-amber-deep: #b07e30;
  --color-amber-soft: #ecc788;

  /* Borders + dividers tinted with forest ink */
  --color-border: rgba(44, 58, 42, 0.22);
  --color-divider: rgba(44, 58, 42, 0.14);

  /* Legacy aliases (kept so any lingering class refs map sanely) */
  --color-navy: var(--color-ink);
  --color-navy-deep: var(--color-ink-deep);
  --color-navy-soft: var(--color-ink-soft);
  --color-sage: var(--color-bg-deep);
  --color-sage-deep: #5f6055;
  --color-sage-soft: var(--color-bg-soft);
  --color-stone: var(--color-bg-deep);
  --color-stone-deep: #5f6055;
  --color-stone-soft: var(--color-beige-deep);

  --color-accent: var(--color-amber);

  /* Fonts */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-smallcaps: 'Alegreya Sans SC', 'Inter', sans-serif;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Shadow — tinted with forest ink */
  --shadow-sm: 0 1px 3px rgba(29, 40, 27, 0.14);
  --shadow-md: 0 8px 24px rgba(29, 40, 27, 0.18);
  --shadow-lg: 0 20px 50px rgba(29, 40, 27, 0.26);

  /* Layout */
  --content-narrow: 720px;
  --content-default: 1080px;
  --content-wide: 1280px;
  --header-h: 160px;
}

/* ============ SPLASH INTRO ============
   Splash backdrop is the sage-olive field from the new logo composite, so the
   badge sits on its native ground from frame 1. Badge zoom + sage backdrop
   fade run on the SAME 1800ms timeline (no delay), so the zoom carries
   continuously into the homepage — perceptually one camera push-in. */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  overflow: hidden;
  transition: opacity 1000ms cubic-bezier(0.55, 0, 0.2, 1);
  will-change: opacity;
}
/* ---- Splash ambient: individual cresting wave shapes sliding across ---- */
.splash-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.sp-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Canvas: radial wave ripples emanating outward from the badge center */
.sp-radial-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* While zooming out, the canvas fades with the splash */
#splash.is-zooming .splash-ambient { animation: sp-zoom-out 1100ms cubic-bezier(0.55, 0, 0.2, 1) forwards; }
@keyframes sp-zoom-out {
  0%   { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1.4);  opacity: 0; }
}
/* Badge sits above the ambient layer */
#splash .splash-badge { position: relative; z-index: 1; }
#splash .splash-badge {
  /* Responsive sizing: badge always fits within the viewport regardless of
     screen aspect ratio. We size against BOTH viewport width and height so
     the badge never overflows on wide desktops OR narrow phones.
     - min: 240px (tiny screens still get a readable badge)
     - preferred: 78vmin (78% of the smaller viewport axis — natural square-ish fit)
     - max: 720px (cap on giant monitors so it doesn't feel oversized) */
  width: clamp(240px, 78vmin, 720px);
  height: auto;
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.98);
  transform-origin: center center;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
/* Phase 1 — badge fades + scales in to full size and holds */
#splash.is-visible .splash-badge {
  opacity: 1;
  transform: scale(1);
}
/* Phase 2 — continuous push-in. Badge zoom and cream backdrop fade run
   on the SAME timeline (no delay). The badge keeps scaling well past the
   viewport edge while the cream simultaneously dissolves over the live
   homepage. Because the cream === badge bg color, the eye reads it as one
   uninterrupted zoom THROUGH the badge into the site. */
#splash.is-zooming .splash-badge {
  animation: splash-zoom-in 1200ms cubic-bezier(0.55, 0, 0.2, 1) forwards;
}
@keyframes splash-zoom-in {
  /* Smooth zoom that pushes through the badge and out into the homepage.
     Starts at rest size (1) and accelerates outward; opacity fades on the
     same clock as the cream backdrop so the transition reads as one
     continuous push into the site. */
  0%   { transform: scale(1);    opacity: 1; }
  55%  { transform: scale(2.4);  opacity: 1; }
  100% { transform: scale(6);    opacity: 0; }
}
/* Cream backdrop fades on the SAME clock as the zoom — no delay.
   Easing is biased so the cream stays opaque for the first ~40% (badge still
   readable) then dissolves smoothly over the remainder. */
#splash.is-zooming {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1800ms cubic-bezier(0.7, 0, 0.3, 1) 0ms;
}
/* Keep the page scrollable underneath — splash already covers it.
   Locking overflow created the perception of a "cut" when it released. */
body.splash-active { overflow: hidden; }
body.splash-active.splash-zooming { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  #splash { display: none !important; }
}

/* ============ LAYOUT ============ */
.wrap {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-inline: var(--space-6);
}
@media (min-width: 768px) { .wrap { padding-inline: var(--space-12); } }

section { padding-block: clamp(var(--space-12), 8vw, var(--space-24)); }

/* ============ HEADER / NAV ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #F6F2E0;
  border-bottom: 1px solid rgba(45, 58, 42, 0.12);
  transition: box-shadow 240ms ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
/* On mobile: 2-row stack — logo big and centered up top, controls (social + CTA + hamburger) in a row below.
   On desktop: classic 3-column row with nav on the left, logo dead-centered, controls on the right. */
.nav {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  min-height: var(--header-h);
  gap: 8px;
  padding-block: 10px;
}
.nav-left  { display: none; }
.nav-right { display: flex; align-items: center; gap: 10px; justify-self: center; }
.nav-logo  { justify-self: center; }
@media (min-width: 900px) {
  .nav {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
    height: var(--header-h);
    padding-block: 0;
    gap: var(--space-6);
  }
  .nav-left  { display: flex; align-items: center; gap: var(--space-6); justify-self: start; }
  .nav-right { gap: var(--space-4); justify-self: end; }
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
}
.nav-logo img {
  /* True transparent PNG — no blend hack needed, sits directly on the beige bar. */
  height: 96px;
  width: auto;
  object-fit: contain;
  display: block;
}
@media (min-width: 900px) {
  .nav-logo img { height: 120px; }
}
@media (min-width: 900px) {
  :root { --header-h: 140px; }
}
.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
}
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-links a {
  text-decoration: none;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  padding-block: var(--space-2);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--color-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover::after,
.nav-links a.is-active::after { transform: scaleX(1); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.7rem 1.2rem;
  background: #7B6346;
  color: #F6F2E0;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav-cta:hover { background: var(--color-ink); color: #F6F2E0; }
/* Compact CTA variant for the mobile header bar — sits next to the social icons without crowding the centered logo. */
.nav-cta--compact {
  padding: 0.55rem 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media (min-width: 900px) {
  .nav-cta--compact { padding: 0.7rem 1.2rem; font-size: var(--text-sm); letter-spacing: 0.02em; }
}

/* Mobile menu */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-ink);
  border-radius: var(--radius-sm);
}
@media (min-width: 900px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 24px; height: 24px; }

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-deep);
  border-bottom: 1px solid var(--color-divider);
  padding: calc(var(--header-h) + var(--space-4)) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  visibility: hidden;
  opacity: 0;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
  z-index: 49;
  overflow-y: auto;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 280ms ease, visibility 0s;
}
@media (min-width: 900px) { .mobile-menu { display: none; } }
/* legacy translate rule removed */
.mobile-menu a {
  text-decoration: none;
  color: var(--color-beige);
  font-size: var(--text-lg);
  font-family: var(--font-display);
  font-weight: 500;
  padding-block: var(--space-2);
  border-bottom: 1px solid rgba(240, 236, 214, 0.16);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu .nav-cta { align-self: flex-start; margin-top: var(--space-2); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-text-inverse);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media video, .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26, 38, 44, 0.55) 0%,
    rgba(26, 38, 44, 0.55) 60%,
    rgba(26, 38, 44, 0.88) 100%
  );
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-20);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-smallcaps);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-amber);
  margin-bottom: var(--space-6);
}
@media (min-width: 900px) {
  .hero-eyebrow { font-size: 1.35rem; }
}
/* Uppercased opener inside hero-sub: keeps the descriptive sentence flow but gives the categories an emphatic, signage-like read. */
.hero-sub-lead {
  font-family: var(--font-smallcaps);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-inverse);
}
.hero-eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--color-amber);
}
.hero h1 {
  font-size: var(--text-hero);
  line-height: 1.0;
  font-weight: 400;
  margin-bottom: var(--space-6);
  max-width: 18ch;
  letter-spacing: -0.02em;
}
.hero h1 em {
  font-style: italic;
  color: var(--color-amber);
}
.hero-sub {
  font-size: var(--text-lg);
  color: rgba(245, 241, 228, 0.82);
  max-width: 56ch;
  margin-bottom: var(--space-10);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 1rem 1.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  min-height: 48px;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-amber);
  color: var(--color-ink-deep);
  border-color: var(--color-amber);
}
.btn-primary:hover {
  background: var(--color-amber-deep);
  border-color: var(--color-amber-deep);
  color: var(--color-bg);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: rgba(245, 241, 228, 0.4);
}
.btn-outline:hover {
  background: rgba(245, 241, 228, 0.12);
  border-color: var(--color-text-inverse);
}
.btn-dark {
  background: var(--color-ink);
  color: var(--color-text-inverse);
  border-color: var(--color-ink);
}
.btn-dark:hover { background: var(--color-ink-deep); transform: translateY(-1px); }

@media (max-width: 640px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* ============ TRUST STRIP ============ */
.trust {
  background: #7B6346;
  color: #F6F2E0;
  padding-block: var(--space-8);
  border-top: 3px solid rgba(0, 0, 0, 0.18);
  border-bottom: 3px solid rgba(0, 0, 0, 0.18);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
  align-items: center;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.trust-item svg {
  width: 36px;
  height: 36px;
  color: var(--color-amber);
  flex-shrink: 0;
}
.trust-item h3 {
  font-family: var(--font-smallcaps);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #F6F2E0;
  margin-bottom: 2px;
}
.trust-item p {
  font-size: var(--text-sm);
  color: rgba(246, 242, 224, 0.86);
  margin: 0;
}
.trust-item svg { color: #F6F2E0; }

/* ============ SECTION HEADINGS ============ */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-smallcaps);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-brown);
  margin-bottom: var(--space-4);
}
@media (min-width: 900px) {
  .section-eyebrow { font-size: 1.35rem; }
}
.section-title {
  font-size: var(--text-2xl);
  line-height: 1.05;
  font-weight: 400;
  margin-bottom: var(--space-6);
  max-width: 22ch;
}
.section-title em {
  font-style: italic;
  color: var(--color-brown);
}
.section-intro {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 62ch;
  margin-bottom: var(--space-12);
}

/* ============ SERVICES GRID ============ */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  isolation: isolate;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 360ms ease,
              border-color 360ms ease,
              background-color 360ms ease;
}
/* Amber gradient sheen that wipes across the card on hover */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
              rgba(224, 168, 90, 0.00) 0%,
              rgba(224, 168, 90, 0.18) 45%,
              rgba(196, 106, 58, 0.10) 100%);
  opacity: 0;
  transition: opacity 380ms ease;
  pointer-events: none;
  z-index: -1;
}
/* Amber accent strip slides in along the top edge on hover */
.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-amber), var(--color-rust, #C46A3A));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.service-card:hover,
.service-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -18px rgba(58, 45, 28, 0.45),
              0 8px 18px -10px rgba(196, 106, 58, 0.30);
  border-color: var(--color-amber);
}
.service-card:hover::before,
.service-card:focus-within::before { opacity: 1; }
.service-card:hover::after,
.service-card:focus-within::after { transform: scaleX(1); }

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-deep);
  color: var(--color-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 360ms ease,
              color 360ms ease,
              transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.service-icon svg {
  width: 28px;
  height: 28px;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover .service-icon,
.service-card:focus-within .service-icon {
  background: var(--color-amber);
  color: var(--color-bg-deep);
  transform: translateY(-4px) scale(1.06);
}
.service-card:hover .service-icon svg,
.service-card:focus-within .service-icon svg {
  transform: rotate(-6deg) scale(1.05);
}

.service-card h3 {
  font-size: var(--text-lg);
  font-weight: 500;
  transition: color 320ms ease;
}
.service-card:hover h3,
.service-card:focus-within h3 { color: var(--color-brown); }

.service-card p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0;
}
.service-card .service-more {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-brown);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color 240ms ease, gap 240ms ease;
}
.service-card .service-more::after {
  content: '→';
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover .service-more,
.service-card:focus-within .service-more {
  color: var(--color-rust, #C46A3A);
  gap: var(--space-3);
}
.service-card:hover .service-more::after,
.service-card:focus-within .service-more::after { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card::before,
  .service-card::after,
  .service-icon,
  .service-icon svg,
  .service-card h3,
  .service-card .service-more,
  .service-card .service-more::after { transition: none; }
}

/* ============ FEATURED WORK (HOME) ============ */
.featured {
  background: var(--color-bg-deep);
}
.featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .featured-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--space-4);
  }
  /* 5 items, two balanced rows: row 1 = 2 wider items (3 cols each), row 2 = 3 items (2 cols each). All same aspect ratio so heights stay equal within each row but the grid feels editorial. */
  .featured-grid > *:nth-child(1),
  .featured-grid > *:nth-child(2) { grid-column: span 3; }
  .featured-grid > *:nth-child(3),
  .featured-grid > *:nth-child(4),
  .featured-grid > *:nth-child(5) { grid-column: span 2; }
}
.featured-item {
  --mx: 50%;
  --my: 50%;
  --shift-x: 0px;
  --shift-y: 0px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4/3;
  background: var(--color-ink-deep);
  isolation: isolate;
  transform: translate3d(var(--shift-x), var(--shift-y), 0);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.featured-item:hover {
  box-shadow:
    0 28px 60px -22px rgba(28, 22, 14, 0.6),
    0 8px 20px -10px rgba(196, 106, 58, 0.35),
    0 0 0 1px rgba(224, 168, 90, 0.55);
  z-index: 4;
}

/* Cinematic spotlight that tracks the cursor */
.featured-item::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 320px at var(--mx) var(--my),
      rgba(240, 216, 138, 0.30),
      rgba(224, 168, 90, 0.12) 28%,
      transparent 58%);
  opacity: 0;
  transition: opacity 360ms ease;
  z-index: 2;
  mix-blend-mode: soft-light;
}
.featured-item:hover::after { opacity: 1; }

/* Amber corner bracket that draws in on hover */
.featured-item .corner {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 28px;
  height: 28px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translate(-6px, -6px);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
              transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
}
.featured-item .corner::before,
.featured-item .corner::after {
  content: '';
  position: absolute;
  background: var(--color-amber);
}
.featured-item .corner::before { top: 0; left: 0; width: 100%; height: 2px; }
.featured-item .corner::after  { top: 0; left: 0; width: 2px; height: 100%; }
.featured-item:hover .corner { opacity: 1; transform: translate(0, 0); }

/* Image — silky zoom + saturation lift */
.featured-item img,
.featured-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(0.85) brightness(0.94);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 600ms ease;
}
.featured-item:hover img,
.featured-item:hover video {
  transform: scale(1.09);
  filter: saturate(1.08) brightness(1.0);
}

@media (prefers-reduced-motion: reduce) {
  .featured-item { transform: none !important; transition: none; }
  .featured-item::after, .featured-item .corner { transition: none; }
  .featured-item img, .featured-item video { transition: none; transform: none; filter: none; }
}
.featured-item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
  padding-top: var(--space-12);
  background: linear-gradient(to top,
    rgba(20, 14, 8, 0.95) 0%,
    rgba(20, 14, 8, 0.78) 30%,
    rgba(20, 14, 8, 0.35) 65%,
    transparent 100%);
  color: var(--color-text-inverse);
  transform: translateY(8px);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
}
.featured-item:hover .caption { transform: translateY(0); }
.featured-item .caption span {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: 6px;
  position: relative;
  padding-bottom: 4px;
}
.featured-item .caption span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 100%;
  background: var(--color-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 540ms cubic-bezier(0.22, 1, 0.36, 1) 60ms;
}
.featured-item:hover .caption span::after { transform: scaleX(1); }
.featured-item .caption h4 {
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.25;
}

/* ============ ABOUT / PROCESS / SPLIT ============ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }
.split.reverse > *:first-child { order: 1; }
@media (min-width: 900px) { .split.reverse > *:first-child { order: 2; } }

.split-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}
.split-media img, .split-media video {
  max-width: 100%; max-height: 100%; object-fit: contain;
  mix-blend-mode: multiply;
}
.split-media video {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: normal;
}

/* ============ PROCESS STEPS ============ */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  counter-reset: step;
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  counter-increment: step;
  padding: var(--space-6);
  border-top: 2px solid var(--color-amber);
}
.step::before {
  content: '0' counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-amber);
  margin-bottom: var(--space-3);
}
.step h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.step p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0;
}

/* ============ CTA BANNER ============ */
.cta-banner {
  background: var(--color-brown);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(249, 175, 55, 0.24), transparent 60%);
}
.cta-banner .wrap { position: relative; z-index: 1; }
.cta-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) { .cta-content { grid-template-columns: 2fr 1fr; gap: var(--space-12); } }
.cta-banner h2 {
  font-size: var(--text-2xl);
  font-weight: 400;
  margin-bottom: var(--space-4);
  max-width: 24ch;
}
.cta-banner h2 em { font-style: italic; color: var(--color-amber); }
.cta-banner p {
  font-size: var(--text-lg);
  color: rgba(245, 241, 228, 0.85);
  max-width: 56ch;
  margin: 0;
}
.cta-banner .cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 480px) and (max-width: 899px) { .cta-banner .cta-actions { flex-direction: row; } }
@media (min-width: 900px) { .cta-banner .cta-actions { align-items: flex-end; } }

/* ============ GALLERY ============ */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4/3;
}
.gallery-item.tall { aspect-ratio: 3/4; }
.gallery-item.wide { aspect-ratio: 16/9; }
@media (min-width: 640px) { .gallery-item.span-2 { grid-column: span 2; } }
.gallery-item img,
.gallery-item video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover img,
.gallery-item:hover video { transform: scale(1.04); }
.gallery-item .caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--space-5);
  background: linear-gradient(to top, rgba(26, 38, 44, 0.9), transparent);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ============ CONTACT FORM ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.2fr; gap: var(--space-16); } }

.contact-info { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-item {
  display: flex; gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-divider);
}
.contact-item:last-child { border-bottom: none; }
.contact-item svg {
  width: 24px; height: 24px;
  color: var(--color-brown);
  flex-shrink: 0;
  margin-top: 4px;
}
.contact-item h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.contact-item a, .contact-item p {
  font-size: var(--text-lg);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
  margin: 0;
}
.contact-item a:hover { color: var(--color-amber-deep); }

.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
}
.form-row { margin-bottom: var(--space-5); }
.form-row.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 600px) { .form-row.two-col { grid-template-columns: 1fr 1fr; } }
.form-row label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--color-beige);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--color-text);
  font-family: var(--font-body);
}
.form-row textarea { min-height: 140px; resize: vertical; }
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--color-amber);
  box-shadow: 0 0 0 3px rgba(249, 175, 55, 0.22);
}
.form-submit {
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--color-brown);
  color: var(--color-beige);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 220ms ease, opacity 220ms ease;
}
.form-submit:hover { background: var(--color-ink); }
.form-submit:disabled { opacity: 0.7; cursor: progress; }
.form-submit .submit-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(246, 242, 224, 0.35);
  border-top-color: var(--color-beige);
  display: none;
  animation: bw-spin 800ms linear infinite;
}
.form-submit.is-loading .submit-spinner { display: inline-block; }
@keyframes bw-spin { to { transform: rotate(360deg); } }

/* Honeypot — hidden from real users, visible to bots */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status message under submit button */
.form-status {
  margin-top: var(--space-4);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.45;
  min-height: 0;
  display: none;
}
.form-status.is-pending,
.form-status.is-success,
.form-status.is-error { display: block; }
.form-status.is-pending {
  background: rgba(160, 122, 74, 0.14);
  color: var(--color-brown-deep);
  border: 1px solid rgba(160, 122, 74, 0.32);
}
.form-status.is-success {
  background: rgba(124, 144, 92, 0.18);
  color: #3a4a28;
  border: 1px solid rgba(124, 144, 92, 0.45);
}
.form-status.is-error {
  background: rgba(196, 106, 58, 0.14);
  color: #6a3315;
  border: 1px solid rgba(196, 106, 58, 0.45);
}
.form-fineprint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  text-align: center;
}

/* ============ FOOTER ============ */
.site-footer {
  background: var(--color-brown-deep);
  color: rgba(245, 241, 228, 0.82);
  padding-block: var(--space-16) var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-16); } }
.footer-brand img {
  width: 96px;
  height: auto;
  margin-bottom: var(--space-5);
  background: transparent;
}
.footer-brand p {
  font-size: var(--text-sm);
  color: rgba(245, 241, 228, 0.72);
  max-width: 38ch;
  margin: 0;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: var(--space-5);
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col a {
  text-decoration: none;
  color: rgba(245, 241, 228, 0.78);
  font-size: var(--text-sm);
}
.footer-col a:hover { color: var(--color-amber); }

.footer-bottom {
  padding-top: var(--space-6);
  border-top: 1px solid rgba(245, 241, 228, 0.12);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: rgba(245, 241, 228, 0.55);
  text-align: center;
}
@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ============ PAGE HEADER (interior pages) ============ */
.page-header {
  background: var(--color-ink);
  color: var(--color-text-inverse);
  padding-block: clamp(var(--space-16), 12vw, var(--space-24));
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid var(--color-brown);
}
.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(249, 175, 55, 0.12), transparent 70%);
  pointer-events: none;
}
.page-header .wrap { position: relative; z-index: 1; }
.page-header .eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: var(--space-5);
}
.page-header h1 {
  font-size: var(--text-2xl);
  line-height: 1.05;
  font-weight: 400;
  margin-bottom: var(--space-5);
  max-width: 22ch;
}
.page-header h1 em { font-style: italic; color: var(--color-amber); }
.page-header p {
  font-size: var(--text-lg);
  color: rgba(245, 241, 228, 0.8);
  max-width: 60ch;
  margin: 0;
}

/* ============ SERVICE DETAIL (in services page) ============ */
.service-row {
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-divider);
}
.service-row:last-child { border-bottom: none; }
.service-row-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 900px) { .service-row-grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }
.service-row.reverse .service-row-grid > *:first-child { order: 2; }
@media (max-width: 899px) { .service-row.reverse .service-row-grid > *:first-child { order: 0; } }

.service-row .media {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.service-row .media img,
.service-row .media video { width: 100%; height: 100%; object-fit: cover; }
.service-row h2 {
  font-size: var(--text-xl);
  font-weight: 400;
  margin-bottom: var(--space-4);
}
.service-row .number {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-brown);
  margin-bottom: var(--space-3);
  letter-spacing: 0.02em;
}
.service-row p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.service-row ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.service-row ul li {
  font-size: var(--text-sm);
  color: var(--color-text);
  padding-left: var(--space-6);
  position: relative;
}
.service-row ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 16px;
  height: 1.5px;
  background: var(--color-amber);
}

/* ============ SOCIAL ICONS ============ */
.social-icons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.social-icon {
  /* Filled brown chip — reads as a real button on the beige header bar. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #F6F2E0;
  background: #7B6346;
  border: none;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.social-icon svg { width: 18px; height: 18px; }
.social-icon:hover {
  background: var(--color-ink);
  color: #F6F2E0;
  transform: translateY(-1px);
}
.mobile-menu .social-icon { background: rgba(240, 236, 214, 0.14); color: var(--color-beige); }
.mobile-menu .social-icon:hover { background: var(--color-amber); color: var(--color-ink-deep); }
.nav .social-icons { display: inline-flex; gap: 8px; }

.mobile-menu .social-icons { margin-top: var(--space-4); }

.footer-social { margin-top: var(--space-5); }
.footer-social .social-icon {
  width: 42px;
  height: 42px;
  color: var(--color-beige);
  border-color: rgba(240, 236, 214, 0.30);
}
.footer-social .social-icon:hover {
  background: var(--color-amber);
  color: var(--color-brown-deep);
  border-color: var(--color-amber);
}
.footer-social .social-icon svg { width: 20px; height: 20px; }

/* ============ MICRO ============ */
/* Reveal only hides when JS is active (html.js class added inline at top). Without JS, content shows normally. */
html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

.muted { color: var(--color-text-muted); }
.center { text-align: center; }