/* ============================================================
   CROSBY CONSTRUCTION — Heritage Cinematic design system
   Themed: light (default) ↔ dark via html[data-theme="dark"]
   Constants: --ink / --cream / --gold-btn (photo-overlay islands
   — hero, cards, CTA, lightbox — stay dark in BOTH themes)
   Type: Fraunces (display) · Space Grotesk (body)
   ============================================================ */

:root {
  /* light theme (default) — warm paper editorial */
  --bg: #F6F2EA;
  --bg-2: #EFE9DC;
  --bg-3: #E6DECD;
  --fg: #1C1814;
  --fg-dim: #6E6659;
  --line: rgba(28, 24, 20, 0.14);
  --gold: #9C7434;
  --gold-soft: rgba(156, 116, 52, 0.4);
  --nav-solid: rgba(246, 242, 234, 0.9);

  /* constants — identical in both themes */
  --ink: #0E0D0B;
  --cream: #F2EDE4;
  --cream-dim: #B8B0A2;
  --gold-btn: #C9A05C;
  --gold-btn-soft: rgba(201, 160, 92, 0.35);
  --line-dark: rgba(242, 237, 228, 0.12);
  --display: "Fraunces", Georgia, serif;
  --body: "Space Grotesk", system-ui, sans-serif;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --radius: 4px;
}

html[data-theme="dark"] {
  --bg: #0E0D0B;
  --bg-2: #171512;
  --bg-3: #1F1C17;
  --fg: #F2EDE4;
  --fg-dim: #B8B0A2;
  --line: rgba(242, 237, 228, 0.12);
  --gold: #C9A05C;
  --gold-soft: rgba(201, 160, 92, 0.35);
  --nav-solid: rgba(14, 13, 11, 0.88);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.65;
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.05rem);
  /* `clip` where supported: `hidden` on body makes it a scroll container, which
     silently kills every position:sticky on the page. `clip` doesn't. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--gold-btn); color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skiplink {
  position: fixed; top: -100px; left: 1rem; z-index: 400;
  background: var(--gold-btn); color: var(--ink);
  padding: 0.7rem 1.2rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600;
  transition: top 0.2s ease;
}
.skiplink:focus { top: 1rem; }

section[id], footer { scroll-margin-top: 80px; }

/* ---------- grain ---------- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 200;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
  will-change: transform;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
}

/* ---------- preloader (dark island, both themes) ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink);
  display: grid; place-items: center;
  transition: opacity 0.6s ease, visibility 0.6s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__word {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: var(--gold-btn);
  letter-spacing: 0.08em;
  display: flex;
}
.preloader__word span {
  opacity: 0;
  transform: translateY(0.4em);
  animation: plUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.preloader__word span:nth-child(1) { animation-delay: 0.05s; }
.preloader__word span:nth-child(2) { animation-delay: 0.10s; }
.preloader__word span:nth-child(3) { animation-delay: 0.15s; }
.preloader__word span:nth-child(4) { animation-delay: 0.20s; }
.preloader__word span:nth-child(5) { animation-delay: 0.25s; }
.preloader__word span:nth-child(6) { animation-delay: 0.30s; }
@keyframes plUp { to { opacity: 1; transform: translateY(0); } }

/* ---------- nav (sits over dark hero when transparent) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.1rem var(--pad);
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}
.nav.is-solid {
  background: var(--nav-solid);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  box-shadow: 0 1px 0 var(--line);
  padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.nav__brand { display: flex; flex-direction: column; line-height: 1; }
.nav__brand-mark {
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: 1.45rem; color: var(--cream); letter-spacing: 0.01em;
  transition: color 0.4s;
}
.nav__brand-sub {
  font-size: 0.58rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-btn); margin-top: 0.25rem; transition: color 0.4s;
}
.nav.is-solid .nav__brand-mark { color: var(--fg); }
.nav.is-solid .nav__brand-sub { color: var(--gold); }
.nav__links { display: flex; gap: 1.75rem; margin-left: auto; }
.nav__links a {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-dim); position: relative; padding: 0.25rem 0;
  transition: color 0.3s;
}
.nav.is-solid .nav__links a { color: var(--fg-dim); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold-btn);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__links a:hover { color: var(--cream); }
.nav.is-solid .nav__links a:hover { color: var(--fg); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__theme {
  margin-left: auto;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--gold-btn-soft);
  color: var(--gold-btn); font-size: 0.95rem; line-height: 1;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.nav__links + .nav__theme { margin-left: 0; }
.nav__theme:hover { background: var(--gold-btn); color: var(--ink); }
.nav__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--gold-btn-soft); color: var(--gold-btn);
  font-size: 0.8rem; letter-spacing: 0.06em;
  padding: 0.55rem 1rem; border-radius: 999px;
  transition: background 0.3s, color 0.3s;
  white-space: nowrap;
}
.nav.is-solid .nav__theme { border-color: var(--gold-soft); color: var(--gold); }
.nav.is-solid .nav__cta { border-color: var(--gold-soft); color: var(--gold); }
.nav__cta:hover, .nav.is-solid .nav__cta:hover { background: var(--gold-btn); color: var(--ink); }
.nav.is-solid .nav__theme:hover { background: var(--gold-btn); color: var(--ink); }
.nav__burger { display: none; background: none; border: 0; width: 34px; height: 30px; position: relative; }
.nav__burger span {
  position: absolute; left: 4px; right: 4px; height: 2px;
  background: var(--cream); transition: transform 0.3s, top 0.3s, background 0.4s;
}
.nav.is-solid .nav__burger span { background: var(--fg); }
.nav__burger span:first-child { top: 9px; }
.nav__burger span:last-child { top: 19px; }
.nav__burger.is-open span:first-child { top: 14px; transform: rotate(45deg); }
.nav__burger.is-open span:last-child { top: 14px; transform: rotate(-45deg); }

/* mobile menu (dark island) */
.mmenu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(14, 13, 11, 0.97);
  display: flex;
  overflow-y: auto;                       /* short/landscape viewports scroll instead of clipping */
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.mmenu.is-open { opacity: 1; visibility: visible; }
.mmenu nav {
  display: flex; flex-direction: column; gap: 1.5rem; text-align: center;
  margin: auto; padding: 3.5rem 1rem;     /* auto margins center when it fits, stay reachable when it doesn't */
}
.mmenu a {
  font-family: var(--display); font-size: 2rem; font-style: italic; color: var(--cream);
}
.mmenu__call {
  font-family: var(--body) !important; font-size: 1rem !important;
  font-style: normal !important; color: var(--gold-btn) !important;
  border: 1px solid var(--gold-btn-soft); border-radius: 999px;
  padding: 0.8rem 1.6rem; margin-top: 1rem;
}
@media (max-height: 600px) {
  .mmenu nav { gap: 1rem; padding: 2.5rem 1rem; }
  .mmenu a { font-size: 1.5rem; }
}

/* ---------- shared ---------- */
.section { padding: clamp(5rem, 10vw, 9rem) var(--pad); position: relative; }
.section__head { max-width: 1200px; margin: 0 auto clamp(2.5rem, 5vw, 4.5rem); }
.eyebrow {
  display: flex; align-items: center; gap: 0.9rem;
  font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem;
}
.rule { display: inline-block; width: 3.2rem; height: 1px; background: var(--gold); }
.h2 {
  font-family: var(--display); font-weight: 380;
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  line-height: 1.08; letter-spacing: -0.01em; color: var(--fg);
  max-width: 18ch;
}
.h2 em { font-style: italic; color: var(--gold); }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 350; color: var(--fg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.9rem; border-radius: 999px;
  font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s, color 0.3s, border-color 0.3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn--gold { background: var(--gold-btn); color: var(--ink); font-weight: 500; }
.btn--gold:hover { background: #DBB574; }
.btn--ghost { border-color: rgba(242, 237, 228, 0.3); color: var(--cream); }
.btn--ghost:hover { border-color: var(--gold-btn); color: var(--gold-btn); }

[data-reveal] { opacity: 0; transform: translateY(28px); }
.no-motion [data-reveal], .no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- hero (dark island) ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero__media { position: absolute; inset: -12% 0 0; z-index: 0; }
.hero__media img, .hero__media video {
  width: 100%; height: 112%; object-fit: cover; object-position: center 40%;
  will-change: transform;
}
.about__img img, .story__img img { will-change: transform; }
.hero__media video { position: absolute; inset: 0; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,13,11,0.55) 0%, rgba(14,13,11,0.15) 35%, rgba(14,13,11,0.82) 82%, var(--ink) 100%),
    radial-gradient(120% 60% at 20% 80%, rgba(14,13,11,0.55), transparent 60%);
}
.hero__content, .hero__foot { position: relative; z-index: 2; }
.hero__content {
  padding: 0 var(--pad) clamp(5rem, 9vh, 7rem);
  max-width: 1200px; margin: 0 auto; width: 100%;
}
.hero__kicker {
  display: flex; align-items: center; gap: 0.9rem;
  font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold-btn); margin-bottom: 1.6rem;
}
.hero__kicker .rule { background: var(--gold-btn); }
.hero__title {
  font-family: var(--display); font-weight: 340;
  font-size: clamp(2.9rem, 9.5vw, 7.5rem);
  line-height: 0.98; letter-spacing: -0.02em;
  margin-bottom: 1.6rem; color: var(--cream);
}
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: inline-block; transform: translateY(110%); }
.no-motion .hero__line > span, .no-js .hero__line > span { transform: none; }
.hero__line--italic { font-style: italic; color: var(--gold-btn); }
.hero__sub { max-width: 44ch; color: var(--cream-dim); margin-bottom: 2.2rem; }
.hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__foot {
  position: absolute; right: var(--pad); bottom: 2.2rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.hero__scrolltip {
  font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--cream-dim); writing-mode: vertical-rl;
}
.hero__scrollline { width: 1px; height: 54px; background: var(--line-dark); position: relative; overflow: hidden; }
.hero__scrollline::after {
  content: ""; position: absolute; left: 0; top: -40%;
  width: 100%; height: 40%; background: var(--gold-btn);
  animation: scrollhint 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes scrollhint { to { top: 110%; } }

/* ---------- marquee ---------- */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.1rem 0; overflow: hidden; background: var(--bg-2);
  transition: background 0.4s ease;
}
.marquee__track { display: flex; white-space: nowrap; width: max-content; animation: marquee 36s linear infinite; }
.marquee__track span {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1rem, 2vw, 1.5rem); color: var(--fg-dim);
}
@keyframes marquee { to { transform: translateX(-50%); } }
.no-motion .marquee__track { animation: none; }

/* ---------- about ---------- */
.about__grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.about__img { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/4.6; }
.about__img img { width: 100%; height: 112%; object-fit: cover; }
.about__copy p + p { margin-top: 1.2rem; }
.about__copy .lead { margin-bottom: 1.4rem; }
.about__badges {
  display: flex; gap: 0.7rem; flex-wrap: wrap; list-style: none;
  margin: 1.8rem 0 2.4rem;
}
.about__badges li {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-soft);
  padding: 0.5rem 1rem; border-radius: 999px;
}
.stats { display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); border-top: 1px solid var(--line); padding-top: 2rem; }
.stat { display: block; }
.stat__num, .stat__suffix {
  font-family: var(--display); font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 400; color: var(--fg); line-height: 1; display: inline;
}
.stat__num + .stat__suffix { color: var(--gold); }
.stat__label { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-dim); margin-top: 0.6rem; }

/* ---------- services ---------- */
.services { background: var(--bg-2); transition: background 0.4s ease; }
.services__list {
  max-width: 1200px; margin: 0 auto; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.service {
  background: var(--bg-2); padding: 2rem 1.8rem 2.2rem;
  position: relative; overflow: hidden;
  transition: background 0.35s ease;
}
.service:hover { background: var(--bg-3); }
.service::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; z-index: 2;
  background: var(--gold-btn); transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.service:hover::before { transform: scaleY(1); }
.service__no {
  font-size: 0.68rem; letter-spacing: 0.22em; color: var(--gold);
  display: block; margin-bottom: 1.1rem;
  position: relative; z-index: 2; transition: color 0.35s ease;
}
.service--new::after {
  content: "New"; position: absolute; top: 1.7rem; right: 1.5rem; z-index: 2;
  font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); background: var(--gold-btn); font-weight: 600;
  padding: 0.24rem 0.6rem; border-radius: 999px;
}
.service h3 {
  font-family: var(--display); font-weight: 420; font-size: 1.35rem;
  margin-bottom: 0.5rem; color: var(--fg);
  position: relative; z-index: 2; transition: color 0.35s ease;
}
.service p {
  font-size: 0.88rem; color: var(--fg-dim);
  position: relative; z-index: 2; transition: color 0.35s ease;
}

/* Hover: an example of that work fades up behind the card. The number, title
   and one-line description stay on top of a scrim so they read against any
   photo — dark or light, either theme. */
.service__shot {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
.service__shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.09);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.service__shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(14, 13, 11, 0.74) 0%, rgba(14, 13, 11, 0.56) 45%, rgba(14, 13, 11, 0.86) 100%);
}
.service:hover .service__shot, .service:focus-within .service__shot { opacity: 1; }
.service:hover .service__shot img, .service:focus-within .service__shot img { transform: scale(1); }
.service:hover .service__no, .service:focus-within .service__no { color: var(--gold-btn); }
.service:hover h3, .service:focus-within h3 { color: var(--cream); }
.service:hover p, .service:focus-within p { color: var(--cream-dim); }
/* Touch/coarse pointers never hover — don't leave the photo permanently hidden
   or permanently on; the card just stays in its clean text state. */
@media (hover: none) {
  .service__shot { display: none; }
}

/* ---------- metal color library (Best Buy Metals) ---------- */
.colors__blurb { max-width: 62ch; color: var(--fg-dim); margin-top: 1.4rem; }
.colors__blurb strong { color: var(--fg); font-weight: 500; }
.colors__grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
/* The photo rides down with you: it pins under the nav and stays put while the
   swatches, panel profiles and notes scroll past on the right. */
.colors__preview { position: sticky; top: calc(4.6rem + 1.6rem); }
.colors__seal {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--gold-btn); color: var(--ink); font-weight: 600;
  padding: 0.38rem 0.8rem; border-radius: 999px;
}
.colors__stage {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 3/2; background: var(--bg-2);
}
.colors__stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s ease;
}
.colors__stage img.is-front { opacity: 1; }
.colors__cap { margin-top: 0.9rem; display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.colors__cap-name { font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--fg); }
.colors__cap-sub { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); }
.colors__rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem 0.6rem; }
.swatch {
  background: none; border: 0; padding: 0.4rem 0.2rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  border-radius: var(--radius);
}
.swatch__chip {
  width: 52px; height: 52px; border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 42%, rgba(0,0,0,0.18) 88%),
    var(--sw);
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
}
.swatch:hover .swatch__chip { transform: scale(1.1); }
.swatch.is-on .swatch__chip {
  border-color: var(--gold-btn);
  box-shadow: 0 0 0 3px var(--gold-btn-soft), inset 0 0 0 1px rgba(0,0,0,0.12);
}
.swatch__name {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim); text-align: center; line-height: 1.35;
  transition: color 0.3s;
}
.swatch:hover .swatch__name, .swatch.is-on .swatch__name { color: var(--fg); }
.swatch:focus-visible { outline: 2px solid var(--gold-btn); outline-offset: 2px; }
/* dark chips (Black, Burnished Slate) need a light edge on the dark theme */
html[data-theme="dark"] .swatch__chip {
  box-shadow: inset 0 0 0 1px rgba(242, 237, 228, 0.22), 0 2px 8px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .swatch.is-on .swatch__chip {
  box-shadow: 0 0 0 3px var(--gold-btn-soft), inset 0 0 0 1px rgba(242, 237, 228, 0.22);
}
.colors__facts { margin-top: 1.8rem; display: grid; gap: 1.1rem; }
.fact h4 {
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.4rem; font-weight: 500;
}
.fact p { font-size: 0.84rem; color: var(--fg-dim); line-height: 1.6; }
.fact strong { color: var(--fg); font-weight: 500; }
.colors__note { font-size: 0.82rem; color: var(--fg-dim); margin-top: 1.4rem; max-width: 46ch; }
.colors__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.btn--line { border-color: var(--line); color: var(--fg-dim); gap: 0.55rem; }
.btn--line:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- work / gallery ---------- */
.work__filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 2rem; }
.chip {
  background: none; border: 1px solid var(--line); color: var(--fg-dim);
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.55rem 1.2rem; border-radius: 999px;
  transition: all 0.3s ease;
}
.chip:hover { border-color: var(--gold-soft); color: var(--fg); }
.chip.is-active { background: var(--gold-btn); border-color: var(--gold-btn); color: var(--ink); font-weight: 500; }
.work__grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 775/517; cursor: pointer; border: 0; padding: 0; background: var(--bg-2);
  /* no opacity/transform transition here — GSAP owns those (transition+tween conflict) */
}
.card.is-hidden { display: none; }
.card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
  filter: saturate(0.92);
}
.card:hover img { transform: scale(1.06); filter: saturate(1.05); }
.card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(14,13,11,0.85));
  opacity: 0.9; transition: opacity 0.4s;
}
.card__meta {
  position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem;
  text-align: left;
}
.card__title {
  font-family: var(--display); font-size: 1.15rem; font-weight: 420; color: var(--cream);
}
.card__tag {
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-btn); border: 1px solid var(--gold-btn-soft);
  padding: 0.3rem 0.7rem; border-radius: 999px; white-space: nowrap;
  background: rgba(14,13,11,0.55);
}
.card__badge {
  position: absolute; top: 1rem; left: 1rem;
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--gold-btn); color: var(--ink); font-weight: 600;
  padding: 0.32rem 0.7rem; border-radius: 999px;
}
.work__note { max-width: 1200px; margin: 1.6rem auto 0; font-size: 0.8rem; color: var(--fg-dim); }

/* ---------- story ---------- */
.story { background: var(--bg-2); transition: background 0.4s ease; }
.story__grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 4fr 6fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.story__img { overflow: hidden; border-radius: var(--radius); aspect-ratio: 1015/1024; }
.story__img img { width: 100%; height: 112%; object-fit: cover; }
.story__cap { margin-top: 0.9rem; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-dim); }
.story__copy p + p { margin-top: 1.2rem; }
.story__copy .h2 { margin-bottom: 1.4rem; }
.story__copy .btn { margin-top: 2rem; }
.story__video {
  display: flex; align-items: center; gap: 0.9rem;
  background: none; border: 0; color: var(--fg-dim);
  font-size: 0.82rem; letter-spacing: 0.1em; margin-top: 1.6rem;
  transition: color 0.3s;
}
.story__video:hover { color: var(--gold); }
.story__video-icon {
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--gold-soft); border-radius: 50%;
  color: var(--gold); font-size: 0.7rem;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.story__video:hover .story__video-icon { background: var(--gold-btn); color: var(--ink); transform: scale(1.08); }

/* video modal (dark island) */
.videomodal {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(14,13,11,0.94);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s;
}
.videomodal.is-open { opacity: 1; visibility: visible; }
.videomodal__frame { width: min(92vw, 1100px); aspect-ratio: 16/9; }
.videomodal__frame iframe { width: 100%; height: 100%; border: 0; }
.videomodal__close {
  position: absolute; top: 1.4rem; right: 1.6rem;
  background: none; border: 0; color: var(--cream); font-size: 1.4rem;
}

/* ---------- testimonial ---------- */
.quoteblock { max-width: 1000px; margin: 0 auto; text-align: center; }
.quoteblock__q {
  font-family: var(--display); font-weight: 350; font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.3rem); line-height: 1.35; color: var(--fg);
  position: relative;
}
.quoteblock__mark {
  display: block; font-size: clamp(4rem, 8vw, 7rem); line-height: 0.6;
  color: var(--gold); margin-bottom: 1.6rem; font-style: normal;
}
.quoteblock__by {
  margin-top: 2rem; font-size: 0.78rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold);
}

/* ---------- CTA / form (dark island — blueprint bg, both themes) ---------- */
.cta { overflow: hidden; background: var(--ink); }
.cta__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.5; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, rgba(14,13,11,0.92) 30%, rgba(14,13,11,0.65));
}
.cta__inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.cta .h2 { color: var(--cream); }
.cta .h2 em { color: var(--gold-btn); }
.cta .eyebrow { color: var(--gold-btn); }
.cta .eyebrow .rule { background: var(--gold-btn); }
.cta__left > p { color: var(--cream-dim); }
.cta__left .h2 { margin-bottom: 1.2rem; }
.cta__contact { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cta__phone {
  font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  color: var(--gold-btn); font-weight: 400;
  transition: opacity 0.3s;
}
.cta__phone:hover { opacity: 0.8; }
.cta__mail { color: var(--cream); font-size: 1.05rem; }
.cta__mail:hover { color: var(--gold-btn); }
.cta__hours { font-size: 0.85rem; color: var(--cream-dim); margin-top: 0.8rem; }

.qform {
  background: rgba(23, 21, 18, 0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line-dark); border-radius: 8px;
  padding: clamp(1.5rem, 3vw, 2.5rem); position: relative;
}
.qform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; }
.field label, .field .field__label {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream-dim);
}
.fchips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fchip {
  background: rgba(14,13,11,0.6); border: 1px solid var(--line-dark);
  color: var(--cream-dim); border-radius: 999px;
  font-size: 0.78rem; font-weight: 300; letter-spacing: 0.04em;
  padding: 0.55rem 1rem;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.fchip:hover { border-color: var(--gold-btn-soft); color: var(--cream); }
.fchip.is-on { background: var(--gold-btn); border-color: var(--gold-btn); color: var(--ink); font-weight: 500; }
.field input, .field select, .field textarea {
  background: rgba(14,13,11,0.6); border: 1px solid var(--line-dark);
  border-radius: var(--radius); color: var(--cream);
  font-family: var(--body); font-size: 0.95rem; font-weight: 300;
  padding: 0.85rem 1rem; outline: none;
  transition: border-color 0.3s;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23C9A05C'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-btn); }
.field input.is-bad, .field select.is-bad, .field textarea.is-bad { border-color: #C0564B; }
.qform__submit { width: 100%; margin-top: 0.4rem; }
.qform__err { color: #E08B81; font-size: 0.85rem; margin-top: 0.9rem; }
.qform__done {
  position: absolute; inset: 0; border-radius: 8px;
  background: rgba(23, 21, 18, 0.97);
  display: grid; place-content: center; text-align: center; gap: 0.6rem;
  padding: 2rem; color: var(--cream);
}
/* author display rules beat the UA [hidden] rule — restate it explicitly */
.qform__done[hidden], .qform__err[hidden] { display: none; }
.qform__done-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; margin-top: 0.6rem; }
.qform__done-alt { font-size: 0.85rem; }
.qform__done-alt a { color: var(--gold-btn); }
.qform__reset {
  background: none; border: 0; color: var(--cream-dim);
  font-size: 0.78rem; letter-spacing: 0.08em; margin-top: 0.9rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.qform__reset:hover { color: var(--cream); }
.qform__done h3 { font-family: var(--display); font-size: 1.6rem; font-weight: 420; }
.qform__done p { color: var(--cream-dim); font-size: 0.92rem; }
.qform__done a { color: var(--gold-btn); }
.qform__check {
  width: 58px; height: 58px; margin: 0 auto 0.6rem;
  display: grid; place-items: center;
  border: 1px solid var(--gold-btn); border-radius: 50%;
  color: var(--gold-btn); font-size: 1.5rem;
  animation: pop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pop { from { transform: scale(0.4); opacity: 0; } }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 5rem) var(--pad) 2rem; }
.footer__grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem;
}
.footer__mark { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 1.7rem; color: var(--fg); }
.footer__sub { display: block; font-size: 0.6rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); margin: 0.35rem 0 1.1rem; }
.footer__brand p { font-size: 0.85rem; color: var(--fg-dim); }
.footer__col h4 {
  font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.9rem; font-weight: 500;
}
.footer__col a, .footer__col p { display: block; font-size: 0.9rem; color: var(--fg-dim); margin-bottom: 0.4rem; }
.footer__col a:hover { color: var(--gold); }
.footer__legal {
  max-width: 1200px; margin: 3rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem; color: var(--fg-dim); opacity: 0.7; letter-spacing: 0.08em;
}

/* ---------- lightbox (dark island) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 260;
  background: rgba(14,13,11,0.96);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__fig { max-width: min(92vw, 1200px); max-height: 84vh; display: flex; flex-direction: column; gap: 0.9rem; }
.lightbox__fig img {
  max-height: 76vh; width: auto; max-width: 100%; margin: 0 auto;
  border-radius: var(--radius);
}
.lightbox__fig figcaption {
  text-align: center; font-size: 0.78rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cream-dim);
}
.lightbox__close {
  position: absolute; top: 1.4rem; right: 1.6rem;
  background: none; border: 0; color: var(--cream); font-size: 1.4rem; z-index: 2;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(23,21,18,0.7); border: 1px solid var(--line-dark);
  color: var(--cream); width: 52px; height: 52px; border-radius: 50%;
  font-size: 1.1rem; transition: background 0.3s, color 0.3s;
}
.lightbox__nav:hover { background: var(--gold-btn); color: var(--ink); }
.lightbox__nav--prev { left: 1.4rem; }
.lightbox__nav--next { right: 1.4rem; }

/* ---------- mobile call bar ---------- */
.callbar {
  position: fixed; left: 0.9rem; right: 0.9rem; bottom: 0.9rem; z-index: 80;
  display: none; align-items: center; justify-content: center; gap: 0.6rem;
  background: var(--gold-btn); color: var(--ink);
  font-weight: 600; font-size: 0.92rem; letter-spacing: 0.03em;
  padding: 1rem; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .services__list { grid-template-columns: repeat(2, 1fr); }
  /* 15 items in 2 cols leaves an empty cell that exposes the divider bg — span it */
  .service:last-child { grid-column: 1 / -1; }
  .work__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__theme { margin-left: auto; }
  .nav__burger { display: block; }
  .about__grid, .story__grid, .cta__inner, .colors__grid { grid-template-columns: 1fr; }
  /* stacked layout — nothing to stick alongside */
  .colors__preview { position: static; }
  .about__img { aspect-ratio: 4/3; }
  .story__img { max-width: 420px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav__cta { display: none; }
  .work__grid { grid-template-columns: 1fr; }
  .services__list { grid-template-columns: 1fr; }
  .colors__rail { gap: 0.7rem 0.3rem; }
  .swatch__chip { width: 44px; height: 44px; }
  .qform__row { grid-template-columns: 1fr; }
  .callbar { display: flex; }
  .footer { padding-bottom: 6rem; }
  .stats { flex-wrap: wrap; gap: 1.6rem; }
  .hero__foot { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- mobile polish (touch ergonomics) ---------- */
/* Measured on a real 375px viewport: five form fields sat at 15.2px and 24 controls
   came in under the 44px touch minimum. Both fixes are phone-only so the desktop
   layout's visual density is untouched. */
@media (max-width: 860px) {
  /* iOS Safari zooms the whole page whenever a focused input is under 16px, and the
     user has to pinch back out. That landed squarely on the quote form, so hold the
     fields at exactly 16px on phones. 0.95rem stays on desktop where it can't bite. */
  .field input, .field select, .field textarea { font-size: 16px; }

  /* The burger and theme toggle are the only nav controls left once the links
     collapse, and both were small (34x30 and 38x38). Extend the hit area with a
     centered pseudo-element instead of resizing the box - the burger's bars are
     absolutely positioned against its height, so growing it would move them. */
  .nav__theme { position: relative; }
  .nav__burger::after, .nav__theme::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

  /* Filter chips and form chips: keep the padding, guarantee the height. */
  .chip, .fchip { min-height: 44px; display: inline-flex; align-items: center; }

  /* Footer phone and email are conversion links and were 24px tall. */
  .footer__col a { min-height: 44px; display: flex; align-items: center; margin-bottom: 0; }

  /* Dismiss controls were ~18px wide - the hardest thing on the page to hit. */
  .lightbox__close, .videomodal__close {
    width: 44px; height: 44px; display: grid; place-items: center;
  }

  /* Contact-block email and phone are conversion links too - the email sat at 28px.
     Padding rather than min-height so the flex column spacing stays even. */
  .cta__mail, .cta__phone { padding: 0.5rem 0; }
}