:root {
  /* Colors */
  /* Cream / off-white base. The accent is darkened from the photo amber so it
     still clears text contrast on a light surface, and the ink is a warm
     near-black rather than pure black so it sits calmly on cream. */
  --bg-color: #f6f2ea;
  --bg-surface: #efe9de;
  --bg-surface-light: #e6ded0;
  /* Veiled variants let the scroll-driven background wash read through */
  --bg-surface-veil: rgba(239, 233, 222, 0.72);
  --bg-surface-light-veil: rgba(230, 222, 208, 0.8);
  --text-main: #1f1b16;
  --text-muted: #6b6154;
  --accent-gold: #9a5121;
  --accent-gold-glow: rgba(168, 90, 38, 0.18);
  --accent-slate: #46687d;
  --accent-slate-glow: rgba(70, 104, 125, 0.16);
  --accent-urgent: #b0392b;
  --accent-urgent-glow: rgba(176, 57, 43, 0.14);
  --line-color: rgba(31, 27, 22, 0.12);
  /* text/iconography that sits on top of the accent fill */
  --on-accent: #fdfaf5;

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --container-w: 1200px;
  --nav-height: 80px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --trans-fast: 0.2s var(--ease-out);
  --trans-base: 0.4s var(--ease-out);
  --trans-slow: 0.8s var(--ease-out);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth; font-size: 16px;
  /* iOS Safari inflates text in landscape unless this is pinned */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
  background-color: var(--bg-color); color: var(--text-main);
  font-family: var(--font-body); line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* kills the grey flash iOS paints over every tapped link */
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; transition: var(--trans-fast); }
ul { list-style: none; }
.container { max-width: var(--container-w); margin: 0 auto; padding: 0 var(--space-md); }

/* BACKGROUND OVERLAYS */
.hero-noise, .cta-noise {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}


/* TYPOGRAPHY */
.section-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.85rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-gold);
  margin-bottom: var(--space-sm); position: relative;
}
.section-tag::before {
  content: ''; display: inline-block; width: 20px; height: 1px;
  background-color: var(--accent-gold); vertical-align: middle; margin-right: 10px;
}
.section-title {
  font-family: var(--font-display); font-size: clamp(2.5rem, 9vw, 4rem); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: var(--space-sm);
}
.section-sub { color: var(--text-muted); font-size: 1.125rem; max-width: 600px; margin-bottom: var(--space-lg); }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 1rem 2rem; font-family: var(--font-mono); font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid transparent;
  cursor: pointer; position: relative; overflow: hidden; z-index: 1;
}
.btn-primary { background-color: var(--accent-gold); color: var(--on-accent); font-weight: 500; }
.btn-primary::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: var(--text-main); transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--trans-base); z-index: -1;
}
.btn-primary:hover::before { transform: scaleY(1); }
.btn-ghost { border-color: var(--line-color); color: var(--text-main); background-color: transparent; }
.btn-ghost:hover { border-color: var(--text-main); background-color: var(--line-color); }

/* NAV */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height);
  z-index: 100; border-bottom: 1px solid transparent;
  transition: background-color var(--trans-base), border-color var(--trans-base), transform var(--trans-base);
}
.nav.nav-hidden { transform: translateY(-100%); }
.nav.scrolled {
  background-color: rgba(246, 242, 234, 0.86); border-color: var(--line-color);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.nav-inner {
  max-width: var(--container-w); margin: 0 auto; padding: 0 var(--space-md);
  height: 100%; display: flex; justify-content: space-between; align-items: center;
}
.nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; }
.site-logo {
  height: 50px;
  /* Required: the <img> carries width/height attributes for CLS, and without
     this the attribute width would win and squash the logo. */
  width: auto;
  /* artwork is already black, so on cream it needs no inversion */
}
.logo-mark {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  background-color: var(--accent-gold); color: var(--on-accent); font-weight: bold;
}
.nav-links { display: flex; gap: var(--space-md); font-family: var(--font-mono); font-size: 0.9rem; text-transform: uppercase; }
.nav-links a:not(.nav-cta):hover { color: var(--accent-gold); }
.nav-cta { border: 1px solid var(--accent-gold); padding: 0.5rem 1rem; color: var(--accent-gold); }
.nav-cta:hover { background-color: var(--accent-gold); color: var(--on-accent); }
.nav-hamburger { display: none; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; z-index: 102; }
.nav-hamburger span { display: block; width: 24px; height: 2px; background-color: var(--text-main); transition: var(--trans-base); }
.mobile-menu {
  position: fixed; inset: 0; background-color: var(--bg-color); z-index: 101;
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--trans-base);
}
.mobile-menu.active { opacity: 1; pointer-events: auto; }
.mobile-menu ul { text-align: center; display: flex; flex-direction: column; gap: var(--space-md); }
.mobile-menu a { font-family: var(--font-display); font-size: 3rem; text-transform: uppercase; }

/* HERO */
/* svh = viewport with the browser chrome VISIBLE, so the hero always fits on
   iOS instead of hiding its last row behind the address bar. vh first as the
   fallback for anything older than iOS 15.4. */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: var(--nav-height); overflow: hidden; }
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--container-w); margin: 0 auto; padding: var(--space-xl) var(--space-md); }
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--text-muted); border: 1px solid var(--line-color); padding: 0.5rem 1rem; border-radius: 100px; margin-bottom: var(--space-md);
}
.hero-tag .dot { width: 8px; height: 8px; background-color: var(--accent-gold); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-gold-glow); } 70% { box-shadow: 0 0 0 10px rgba(168, 90, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(168, 90, 38, 0); } }
.hero-title { font-family: var(--font-display); font-size: clamp(2.6rem, 7.4vw, 6rem); line-height: 0.9; text-transform: uppercase; margin-bottom: var(--space-md); display: flex; flex-direction: column; }
.hero-title em { font-style: normal; color: transparent; -webkit-text-stroke: 1px var(--accent-gold); }
.hero-sub { font-size: 1.25rem; color: var(--text-muted); max-width: 700px; margin-bottom: var(--space-lg); }
.hero-actions { display: flex; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.hero-stats { position: relative; display: flex; align-items: center; gap: var(--space-md); border-top: 1px solid var(--line-color); padding-top: var(--space-md); }
.stat { position: relative; display: flex; flex-direction: column; }
.stat-num { font-family: var(--font-mono); font-size: 1.5rem; color: var(--accent-gold); line-height: 1; margin-bottom: 5px; }
.stat-label { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-divider { width: 1px; height: 40px; background-color: var(--line-color); }
.hero-scroll-hint {
  position: absolute; bottom: var(--space-md); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase;
}
.scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom, var(--accent-gold), transparent); animation: scrollDown 2s infinite cubic-bezier(0.65, 0, 0.35, 1); }
@keyframes scrollDown { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.1% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* MARQUEE */
.marquee-band {
  background-color: var(--accent-gold); color: var(--on-accent); padding: 1rem 0; overflow: hidden;
  font-family: var(--font-display); font-size: 2rem; white-space: nowrap; display: flex;
  transform: rotate(-1.5deg) scale(1.04); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.marquee-track { display: inline-flex; gap: 2rem; animation: marquee 20s linear infinite; }
.marquee-band span { text-transform: uppercase; }
.marquee-band .sep { font-size: 1rem; vertical-align: middle; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* PORTFOLIO: PROJECTS GALLERY */
.portfolio { position: relative; padding: var(--space-xl) 0; }
.portfolio > .container { position: relative; z-index: 1; }
/* Workshop pegboard: perforated wall with tools hung on it. The tools swing
   from their pegs as the page is scrolled (physics lives in main.js).
   No overflow clipping here: it would make this box the sticky wall's scroll
   container and pin it to the top of the section instead of the viewport. */
.portfolio-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.portfolio-fx::before {
  content: ''; position: absolute; inset: 0;
  background-size: 26px 26px;
  background-image: radial-gradient(rgba(31, 27, 22, 0.10) 1px, transparent 1.7px);
  mask-image: radial-gradient(120% 70% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 70% at 50% 40%, #000 30%, transparent 78%);
}
/* svh keeps the sticky wall a fixed height on iOS: dvh would resize it every
   time the address bar collapses, reflowing all eight tools mid-scroll. */
.tool-wall { position: sticky; top: 0; display: block; width: 100%; height: 100vh; height: 100svh; }
.tool {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2);
  transform-origin: 50% 8%; color: rgba(168, 90, 38, var(--o, 0.3)); will-change: transform;
}
/* Smaller and less intrusive on phones, still perfectly square */
@media (max-width: 700px) {
  .tool {
    width: calc(var(--s) * 0.72); height: calc(var(--s) * 0.72);
    margin-left: calc(var(--s) * -0.36);
  }
}
/* the peg it hangs from */
.tool::before {
  content: ''; position: absolute; left: 50%; top: -11px; width: 1px; height: 11px;
  background: linear-gradient(to bottom, transparent, rgba(168, 90, 38, 0.3));
}
.tool svg {
  width: 100%; height: 100%; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: var(--space-xl); }
.project-card { display: flex; flex-direction: column; gap: var(--space-sm); }
.project-info { padding-top: var(--space-sm); border-top: 1px solid var(--line-color); }
.project-title { font-family: var(--font-mono); font-size: 1rem; color: var(--accent-gold); text-transform: uppercase; margin-bottom: 5px; }
.project-desc { color: var(--text-muted); font-size: 1rem; }

/* BEFORE / AFTER SLIDER
   The "after" image sits underneath at full width and the "before" copy is
   laid exactly on top of it, then CLIPPED at the handle position.
   Clipping (rather than narrowing a wrapper) is what keeps the before image
   at full size as it is wiped away — narrowing the box would squeeze the
   photo instead, and it needs no width measurement to stay in sync. */
.ba {
  position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden;
  border: 1px solid var(--line-color); background-color: var(--bg-surface-light);
  --pos: 50%; touch-action: pan-y; isolation: isolate;
}
.ba-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba-before-wrap {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  will-change: clip-path;
}
.ba-tag {
  position: absolute; top: 12px; z-index: 3;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 100px;
  background-color: rgba(246, 242, 234, 0.82); color: var(--text-main);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line-color); pointer-events: none;
  transition: opacity var(--trans-fast);
}
.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; }
/* Each label fades out once its side is almost gone */
.ba[data-edge="start"] .ba-tag-before,
.ba[data-edge="end"] .ba-tag-after { opacity: 0; }

.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4;
  width: 2px; margin-left: -1px; background-color: var(--accent-gold);
  pointer-events: none; box-shadow: 0 0 14px rgba(168, 90, 38, 0.55);
}
.ba-handle i {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background-color: var(--accent-gold); border: 2px solid rgba(253, 250, 245, 0.85);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
/* the two chevrons on the knob */
.ba-handle i::before, .ba-handle i::after {
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px;
  border-top: 2px solid var(--on-accent); border-right: 2px solid var(--on-accent);
}
.ba-handle i::before { left: 9px; transform: translateY(-50%) rotate(-135deg); }
.ba-handle i::after  { right: 9px; transform: translateY(-50%) rotate(45deg); }

/* The real control: a full-bleed range input, invisible but fully
   keyboard- and screen-reader-accessible. */
.ba-range {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 44px; height: 100%; cursor: ew-resize;
}
.ba-range::-moz-range-thumb {
  width: 44px; height: 100%; border: none; background: transparent; cursor: ew-resize;
}
.ba-range:focus-visible { outline: none; }
.ba-range:focus-visible ~ .ba-handle i {
  box-shadow: 0 0 0 4px var(--accent-gold-glow), 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* SERVICES / EXPERTISE */
.services { position: relative; padding: var(--space-xl) 0; background-color: var(--bg-surface-veil); }
.services > .container { position: relative; z-index: 1; }
/* Work light drifting over brushed plaster */
.svc-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.svc-fx > span { position: absolute; inset: 0; display: block; }
.svc-sheen {
  background-image: repeating-linear-gradient(115deg, rgba(31, 27, 22, 0.05) 0 2px, transparent 2px 24px);
  background-size: 220px 220px;
  animation: svcSheen 22s linear infinite;
}
@keyframes svcSheen { from { background-position: 0 0; } to { background-position: 220px 440px; } }
.svc-light {
  background: radial-gradient(340px circle at var(--lx, 50%) var(--ly, 42%), rgba(168, 90, 38, 0.13), transparent 66%);
}
/* Explicit column counts (not auto-fit) so the four cards always fill every
   cell: 4x1, then 2x2, then a 3-wide row with the CTA banner spanning below. */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background-color: var(--line-color); border: 1px solid var(--line-color); }
@media (min-width: 700px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .service-cta { grid-column: 1 / -1; text-align: center; }
  .service-cta .svc-icon { display: flex; justify-content: center; }
  .service-cta p { margin: 0 auto; max-width: 46ch; }
}
.service-card { background-color: var(--bg-surface-veil); padding: var(--space-lg) var(--space-md); position: relative; transition: background-color var(--trans-base); }
.service-card:hover { background-color: var(--bg-surface-light-veil); }
.svc-num { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); margin-bottom: var(--space-md); }
.svc-icon { font-size: 2rem; margin-bottom: var(--space-md); filter: grayscale(1); transition: filter var(--trans-base); }
.service-card:hover .svc-icon { filter: grayscale(0); }
.service-card h3 { font-size: 1.5rem; margin-bottom: var(--space-sm); font-weight: 500; }
.service-card p { color: var(--text-muted); font-size: 0.95rem; }
.svc-bar { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background-color: var(--accent-gold); transition: width var(--trans-base); }
.service-card:hover .svc-bar { width: 100%; }
.svc-request {
  display: inline-block; margin-top: var(--space-sm); font-family: var(--font-mono);
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--accent-gold); border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.svc-request:hover { border-bottom-color: var(--accent-gold); }
/* Catch-all card: reads as an invitation rather than a fourth service */
.service-cta { background-color: rgba(168, 90, 38, 0.055); }
.service-cta:hover { background-color: rgba(168, 90, 38, 0.11); }
.service-cta .svc-num { color: var(--accent-gold); text-transform: uppercase; letter-spacing: 0.08em; }
.service-cta .svc-icon { color: var(--accent-gold); filter: none; }
.service-cta .svc-bar { background-color: var(--accent-gold); }

/* ABOUT */
.about { position: relative; padding: var(--space-xl) 0; background-color: var(--bg-surface-veil); border-top: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color); }
.about > .container { position: relative; z-index: 1; }
/* A slow blade of light passing across the wall */
.about-fx {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(115deg, transparent 38%, rgba(168, 90, 38, 0.09) 50%, transparent 62%);
  background-size: 280% 100%;
  animation: aboutSweep 16s ease-in-out infinite;
}
@keyframes aboutSweep { 0%, 100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.about-photo-frame { position: relative; aspect-ratio: 3/4; width: 80%; margin: 0 auto; background: #000; }
.about-carousel { width: 100%; height: 100%; position: relative; z-index: 2; overflow: hidden; background-color: var(--bg-surface-light); }
.loop-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: crossfade 18s infinite; }
.loop-1 { animation-delay: 0s; }
.loop-2 { animation-delay: 6s; }
.loop-3 { animation-delay: 12s; }
@keyframes crossfade {
  0% { opacity: 0; transform: scale(1.05); }
  5% { opacity: 1; transform: scale(1.03); }
  28% { opacity: 1; transform: scale(1); }
  33% { opacity: 0; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(0.98); }
}
.about-frame-accent { position: absolute; top: 20px; left: 20px; width: 100%; height: 100%; border: 1px solid var(--accent-gold); z-index: 1; pointer-events: none; }
.about-badge-float { position: absolute; bottom: -20px; right: -20px; background-color: var(--text-main); color: var(--on-accent); border: 1px solid var(--line-color); padding: 1rem; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.8rem; z-index: 3; }
.about-title { margin-bottom: var(--space-md); }
.about-title em { font-style: normal; color: var(--accent-gold); }
.about-body { font-size: 1.1rem; color: var(--text-muted); margin-bottom: var(--space-lg); }
.about-pillars { display: flex; flex-direction: column; gap: var(--space-md); }
.pillar { display: flex; gap: var(--space-sm); align-items: flex-start; }
.pillar-icon { font-family: var(--font-mono); color: var(--accent-gold); font-size: 1.2rem; margin-top: 4px; }
.pillar-text strong { display: block; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.02em; margin-bottom: 4px; }
.pillar-text span { color: var(--text-muted); font-size: 0.95rem; }

/* CONTACT CTA */
.contact-cta { padding: var(--space-xl) 0; position: relative; background-color: var(--bg-surface-veil); border-top: 1px solid var(--line-color); text-align: center; overflow: hidden; }
.cta-inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
/* A bloom that breathes behind the closing call to action */
.cta-fx {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(48% 58% at 50% 50%, rgba(168, 90, 38, 0.12), transparent 70%);
  animation: ctaBreathe 8s ease-in-out infinite;
}
@keyframes ctaBreathe {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.14); }
}
.cta-title { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 6rem); line-height: 0.9; text-transform: uppercase; margin-bottom: var(--space-md); }
.cta-title em { font-style: normal; color: transparent; -webkit-text-stroke: 1px var(--accent-gold); }
.cta-buttons { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-md); }

.wa-quick-select { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; margin-top: var(--space-lg); }
.wa-quick-label { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.wa-quick-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.wa-chip {
  font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.65rem 1.2rem; border: 1px solid var(--line-color); border-radius: 100px;
  color: var(--text-main); transition: var(--trans-fast);
}
.wa-chip:hover { border-color: var(--accent-gold); color: var(--accent-gold); background-color: var(--accent-gold-glow); }
.wa-chip-urgent { border-color: rgba(209, 88, 74, 0.4); color: var(--accent-urgent); }
.wa-chip-urgent:hover { border-color: var(--accent-urgent); background-color: var(--accent-urgent-glow); }

/* FOOTER */
.footer { background-color: rgba(230, 222, 208, 0.8); padding: var(--space-xl) 0 var(--space-md); border-top: 1px solid var(--line-color); }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.footer-brand p { color: var(--text-muted); max-width: 300px; margin-top: var(--space-sm); }
.footer h4 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.05em; margin-bottom: var(--space-md); }
.footer ul { display: flex; flex-direction: column; gap: 10px; }
.footer ul li { color: var(--text-muted); }
.footer ul a:hover { color: var(--accent-gold); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-md); border-top: 1px solid var(--line-color); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }

/* RESPONSIVE */
@media (max-width: 700px) {
  :root { --space-xl: 4rem; --space-lg: 2.5rem; }
  .container { padding: 0 1.25rem; }
  .hero-inner { padding: var(--space-lg) 1.25rem; }
  .portfolio-grid { gap: var(--space-lg); }
  .hero-sub { font-size: 1.05rem; }
  .section-sub { font-size: 1rem; }
}

/* Touch targets: iOS asks for ~44px minimum on anything tappable.
   Keyed to BOTH pointer type and width — a phone that reports a pointer (or a
   touch laptop) should still get thumb-sized targets. */
@media (hover: none), (max-width: 700px) {
  .wa-chip { padding: 0.85rem 1.3rem; }
  .svc-request { padding: 0.75rem 0 0.85rem; }
  .footer ul a, .footer-contact li { display: inline-block; padding: 0.35rem 0; }
  /* the three bars are only 18px tall, so the padding carries the target */
  .nav-hamburger { padding: 0.85rem; margin: -0.85rem; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  /* three-line headline: sized so the longest line stays unwrapped */
  .hero-title { font-size: clamp(2.05rem, 9.6vw, 3.2rem); }
  .hero-actions { flex-direction: column; }
  /* Steps stack, so the connector becomes a vertical timeline down the left */
  .hero-stats {
    flex-direction: column; align-items: flex-start;
    border-top: none; padding-top: 0; padding-left: 26px;
  }
  .stat-divider { display: none; }
  /* .stats-line-track / .stat-dot mobile overrides live after the FX block below,
     so they win over the base rules declared there. */
  .about-grid { grid-template-columns: 1fr; }
  .about-photo-frame { width: 100%; max-width: 400px; margin-bottom: var(--space-md); }
  .cta-buttons { flex-direction: column; }
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-md); }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

/* ANIMATIONS */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--trans-slow), transform var(--trans-slow); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* FIRST-IMPRESSION FX */

/* Preloader curtain */
.preloader {
  position: fixed; inset: 0; z-index: 999;
  background-color: var(--bg-color);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.7s var(--ease-out);
}
.preloader.done { transform: translateY(-101%); }
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; width: min(300px, 70vw); }
.preloader-logo { height: 60px; width: auto; animation: preloaderPulse 1.4s ease-in-out infinite; }
@keyframes preloaderPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.preloader-track { width: 100%; height: 1px; background-color: var(--line-color); overflow: hidden; }
.preloader-fill { display: block; height: 100%; width: 0; background-color: var(--accent-gold); }
.preloader-count { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--text-muted); }
body.is-loading { overflow: hidden; }

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 200;
  background-color: var(--accent-gold); transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}

/* Nothing animates in until the curtain lifts */
body:not(.loaded) .reveal.active { opacity: 0; transform: translateY(30px); }

/* Hero entrance cascade */
#hero-tag.reveal { transition-delay: 0.05s; }
#hero-title.reveal { transition-delay: 0.1s; }
#hero-sub.reveal { transition-delay: 0.35s; }
#hero-actions.reveal { transition-delay: 0.45s; }
#hero-stats.reveal { transition-delay: 0.6s; }

.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero-title .line-inner { display: block; transform: translateY(110%); transition: transform 1.1s var(--ease-out); }
.hero-title .line-2 .line-inner { transition-delay: 0.15s; }
.hero-title .line-3 .line-inner { transition-delay: 0.3s; }
body.loaded .hero-title .line-inner { transform: translateY(0); }

/* Hero cursor spotlight */
.hero-spotlight {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(650px circle at var(--mx, 72%) var(--my, 28%), rgba(168, 90, 38, 0.07), transparent 60%);
}

/* The work van sitting faintly behind the hero: it is the tool of the trade,
   so it reads as texture rather than a photo. Masked so it never competes
   with the headline on the left. */
.hero-van {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("assets/van.jpg");
  background-size: cover;
  background-position: 68% 55%;
  opacity: 0.22;
  filter: grayscale(35%) contrast(105%);
  mask-image: linear-gradient(100deg, transparent 6%, #000 52%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 6%, #000 52%, #000 82%, transparent 100%);
}
@media (max-width: 900px) {
  /* on a phone the headline covers most of the frame, so pull it back further */
  .hero-van { opacity: 0.16; background-position: 62% 60%; }
}

/* Floating gold embers (canvas) */
.hero-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* The page tints itself as the visitor scrolls: three fixed pools of colour
   fade in one after another behind the veiled section surfaces. */
.page-wash { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Scroll drives opacity (JS); the drift keyframes keep the colour breathing
   even when the page is standing still. Transform is left to CSS alone so the
   two never fight over the same property. */
.wash-layer { position: absolute; inset: -25%; display: block; opacity: 0; will-change: opacity, transform; }
.wash-1 { background: radial-gradient(40% 40% at 20% 20%, rgba(168, 90, 38, 0.16), transparent 70%); animation: washDriftA 34s ease-in-out infinite alternate; }
.wash-2 { background: radial-gradient(44% 44% at 82% 42%, rgba(150, 78, 34, 0.14), transparent 70%); animation: washDriftB 43s ease-in-out infinite alternate; }
.wash-3 { background: radial-gradient(48% 48% at 30% 78%, rgba(168, 90, 38, 0.13), transparent 70%); animation: washDriftC 38s ease-in-out infinite alternate; }
.wash-4 { background: radial-gradient(46% 46% at 72% 88%, rgba(70, 104, 125, 0.14), transparent 70%); animation: washDriftB 49s ease-in-out infinite alternate-reverse; }
@keyframes washDriftA {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to   { transform: translate3d(6%, 5%, 0) scale(1.18); }
}
@keyframes washDriftB {
  from { transform: translate3d(5%, 4%, 0) scale(1.14); }
  to   { transform: translate3d(-6%, -4%, 0) scale(1); }
}
@keyframes washDriftC {
  from { transform: translate3d(-5%, 4%, 0) scale(1.1); }
  to   { transform: translate3d(7%, -5%, 0) scale(1.24); }
}

/* Process steps: the connector line paints itself as the visitor scrolls.
   The existing 1px border-top (desktop) / ::before rule (mobile) is the unpainted
   track; the SVG stroke on top is the painted part. Endpoints and the fraction
   each dot sits at are measured in JS so labels of any width stay aligned. */
.stats-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stats-line-paint {
  fill: none; stroke: var(--accent-gold); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
/* Desktop already has the full-width border-top as its track. */
.stats-line-track { fill: none; stroke: var(--line-color); stroke-width: 1; display: none; }
.stat-dot {
  position: absolute; top: calc((var(--space-md) + 6px) * -1); left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background-color: var(--bg-color); border: 1px solid var(--text-muted);
  transition: background-color var(--trans-base), border-color var(--trans-base),
              box-shadow var(--trans-base), width var(--trans-base), height var(--trans-base);
}
.stat-dot.lit {
  background-color: var(--accent-gold); border-color: var(--accent-gold);
  box-shadow: 0 0 0 5px var(--accent-gold-glow);
}
@media (max-width: 900px) {
  .stats-line-track { display: block; }
  .stat-dot { top: 4px; left: -31.5px; }
}

/* Hero drifts away and fades as the visitor scrolls */
.hero-inner { will-change: transform, opacity; }
.marquee-track { will-change: transform; }

/* Section titles reveal letter by letter */
.section-title .lt, .cta-title .lt { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.section-title .lt-in, .cta-title .lt-in { display: inline-block; transform: translateY(115%); transition: transform 0.7s var(--ease-out); }
body.loaded .reveal.active .lt-in { transform: translateY(0); }

/* Staggered grid reveals */
.services-grid .service-card:nth-child(2) { transition-delay: 0.15s; }
.services-grid .service-card:nth-child(3) { transition-delay: 0.3s; }
.portfolio-grid .project-card:nth-child(even) { transition-delay: 0.15s; }

@media (prefers-reduced-motion: reduce) {
  .preloader { transition: none; }
  .marquee-track { animation: none; }
  .hero-title .line-inner { transform: none; transition: none; }
  .reveal { transition: none; }
  body:not(.loaded) .reveal.active { opacity: 1; transform: none; }
  .section-title .lt-in, .cta-title .lt-in { transform: none; transition: none; }
  .hero-embers { display: none; }
  .project-img-wrapper img { transform: none; filter: grayscale(0%) contrast(100%); }
  .stat-dot { transition: none; }
  /* No scroll loop runs, so settle the wash at a fixed mid-tint */
  .wash-layer { opacity: 0.55; animation: none; }
  .svc-sheen, .about-fx, .cta-fx { animation: none; }
  .cta-fx { opacity: 0.7; }
  .tool { transform: none !important; }
}