/* ═══════════════════════════════════════════════════════
   SR Design and Build — style.css
   Mobile-first. No dependencies. One stylesheet.
═══════════════════════════════════════════════════════ */

/* ── Fonts ──────────────────────────────────────────── */
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrumentserif-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrumentserif-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo Variable';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────── */
:root {
  --ink:   #0C0C0C;
  --ink-2: #141414;
  --ink-3: #1C1C1C;
  --paper: #F6F4F0;
  --on-ink: #F2F0EC;

  /* Light-section palette */
  --paper-ink:  #0F1420;
  --paper-dim:  #5C6270;
  --paper-line: rgba(15,20,32,0.10);
  --mist:       #F4F5F7;
  --mist-ink:   #0F1420;
  --brand-navy: #1B2B4B;
  --line:       rgba(242,240,236,.10);

  --g1: #B08D57;
  --g2: #E0CBA0;
  --g3: #6F5327;
  --gold: linear-gradient(100deg, #6F5327 0%, #B08D57 30%, #E0CBA0 50%, #B08D57 70%, #6F5327 100%);
  --gold-line: rgba(176,141,87,.20);
  --amber: var(--g1);
  --amber-ink: var(--ink);
  --gold-glow: rgba(176,141,87,.18);

  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Archivo Variable', system-ui, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --wrap:   1360px;
  --head-h: 72px;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;  --s7:3rem;  --s8:4rem;
  --s9:5rem;  --s10:6rem; --s11:8rem;

  --sec-py: clamp(3.5rem, 9vw, 7rem);
  --ease: cubic-bezier(0.22,1,0.36,1);
}

/* ── Reset ──────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference) {
  html { scroll-behavior:smooth; }
}
body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--on-ink);
  background: var(--ink);
  overflow-x: hidden;
}
@supports (overflow-x:clip) { body { overflow-x:clip; } }
img,video,svg { display:block; max-width:100%; }
ul,ol { list-style:none; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; background:none; border:none; font:inherit; color:inherit; }
input,select,textarea { font:inherit; }

/* ── Accessibility ──────────────────────────────────── */
.skip {
  position:absolute; top:-100%; left:var(--s4); z-index:9999;
  padding:var(--s2) var(--s4); background:var(--g1); color:var(--ink);
  font-weight:700; border-radius:2px;
}
.skip:focus { top:var(--s4); }
:focus-visible { outline:2px solid var(--g1); outline-offset:3px; }
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Layout ─────────────────────────────────────────── */
.wrap {
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--gutter);
}

/* ── Typography ─────────────────────────────────────── */
.ital {
  font-family:var(--serif); font-style:italic;
  background:none;
  -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor; color:inherit;
}

.eyebrow {
  font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; font-weight:600;
  color:var(--g1);
}
.h-display {
  font-family:var(--serif);
  font-size:clamp(2rem,5vw,3.75rem);
  line-height:1.1; font-weight:400;
}
.lede {
  font-size:clamp(1rem,2vw,1.25rem);
  line-height:1.65; font-weight:300;
}
.gold-text {
  background:none;
  -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor; color:inherit;
}

/* ── Section number watermark ───────────────────────── */
.sec-num {
  position:absolute;
  font-family:var(--serif);
  font-size:clamp(6rem,20vw,16rem);
  line-height:1; color:var(--on-ink); opacity:.045;
  pointer-events:none; user-select:none; font-weight:400;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:.75rem 1.75rem;
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  border-radius:2px;
  transition:box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn--solid {
  background:var(--gold); color:var(--ink);
  border:1px solid var(--g1);
  box-shadow:inset 0 1px 0 rgba(255,245,220,.28);
}
.btn--solid:hover {
  filter:brightness(1.09);
  box-shadow:inset 0 1px 0 rgba(255,245,220,.28), 0 4px 22px rgba(176,141,87,.22);
}
.btn--outline {
  background:transparent; color:var(--on-ink); border:1px solid rgba(176,141,87,.45);
}
.btn--outline:hover {
  border-color:var(--g1);
}
@media (prefers-reduced-motion:reduce) { .btn { transition:none; } }

/* ── Link arrow ─────────────────────────────────────── */
.link-arrow {
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  position:relative;
}
.link-arrow::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:1px; background:rgba(242,240,236,.45);
  transition:width .35s var(--ease);
}
.link-arrow:hover::after { width:100%; }

@media (max-width:767px) {
  .link-arrow {
    min-height:44px;
    align-items:flex-start;
    padding-top:.2em;
  }
  .link-arrow::after { bottom:auto; top:1.5em; }
}

/* ── Reveal ─────────────────────────────────────────── */
.js .reveal { opacity:0; }
.js .reveal.is-in  { animation:revealIn .85s var(--ease) var(--d,0ms) both; }
.js .reveal.is-done { animation:none; opacity:1; }
@keyframes revealIn {
  from { opacity:0; transform:translate3d(0,22px,0); }
  to   { opacity:1; transform:translate3d(0,0,0); }
}
@media (prefers-reduced-motion:reduce) {
  .js .reveal,.js .reveal.is-in,.js .reveal.is-done { animation:none; opacity:1; }
}

/* ═══════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════ */
.site-head {
  position:fixed; inset-block-start:0; inset-inline:0;
  z-index:100; height:var(--head-h);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .28s ease, border-color .28s ease;
}
.site-head.is-solid {
  background:#0A0F1A;
  border-bottom-color:rgba(255,255,255,.1);
}
/* Hide-on-scroll-down (mobile only, see main.js) */
@media (max-width:768px) {
  .site-head { transition:background .28s ease, border-color .28s ease, transform .28s var(--ease); }
  .site-head.is-hidden { transform:translateY(-100%); }
}
@media (max-width:768px) and (prefers-reduced-motion:reduce) {
  .site-head { transition:background .28s ease, border-color .28s ease; }
}

/* Transparent state (default, floats over the hero video): light text */
.site-head .nav__list a { color:rgba(255,255,255,.82); }
.site-head .nav__list a:hover { color:#fff; }
.site-head .nav__list a::after { background:var(--g1); }
.site-head .nav__list a[aria-current="page"] { color:var(--g2); }
.site-head .social li a { color:rgba(255,255,255,.7); }
.site-head .social li a:hover { color:var(--g2); }
.site-head .head-insta { color:rgba(255,255,255,.75); }
.site-head .head-insta:hover { color:var(--g2); }
.site-head .head-call-icon { border-color:rgba(255,255,255,.4); color:#fff; }
.site-head .head-call-icon:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.site-head .head-phone { color:rgba(255,255,255,.92); }
.site-head .head-phone:hover { color:#fff; }
.site-head .burger__box i { background:#fff; }

/* Solid state: black bar, white text */
.site-head.is-solid .nav__list a { color:rgba(255,255,255,.82); }
.site-head.is-solid .nav__list a:hover { color:#fff; }
.site-head.is-solid .nav__list a::after { background:var(--g1); }
.site-head.is-solid .nav__list a[aria-current="page"] { color:var(--g2); }
.site-head.is-solid .social li a { color:rgba(255,255,255,.7); }
.site-head.is-solid .social li a:hover { color:var(--g2); }
.site-head.is-solid .head-insta { color:rgba(255,255,255,.75); }
.site-head.is-solid .head-insta:hover { color:var(--g2); }
.site-head.is-solid .head-call-icon { border-color:rgba(255,255,255,.4); color:#fff; }
.site-head.is-solid .head-call-icon:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.site-head.is-solid .head-phone { color:rgba(255,255,255,.92); }
.site-head.is-solid .head-phone:hover { color:#fff; }
.site-head.is-solid .burger__box i { background:#fff; }

/* Logo: always show white/gold version (works on both transparent and black bg) */
.brand__mark--color { display:none; }
.site-head.is-solid .brand__mark--white { display:block; }
.site-head.is-solid .brand__mark--color { display:none; }

/* Inner: logo | nav (center) | actions */
.site-head__inner {
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:var(--s4);
  height:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--gutter);
}

/* Brand */
.brand { display:flex; align-items:center; gap:var(--s3); flex-shrink:0; }
.brand__mark { height:32px; width:auto; transition:height .28s ease; }
.site-head.is-solid .brand__mark { height:32px; }
.brand__word { display:flex; align-items:center; gap:var(--s3); }
.brand__sr {
  font-family:var(--serif); font-size:1rem;
  font-weight:400; letter-spacing:.06em; color:var(--on-ink);
}
.brand__rule { display:block; width:1px; height:16px; background:rgba(242,240,236,.28); }
.brand__name {
  font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500;
  color:rgba(242,240,236,.55);
}

/* Desktop nav */
.nav { display:none; justify-content:center; }
.nav__list { display:flex; align-items:center; gap:clamp(1.5rem,3vw,3rem); }
.nav__list a {
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:rgba(242,240,236,.65);
  position:relative; transition:color .2s;
}
.nav__list a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--g1);
  transition:width .35s var(--ease);
}
.nav__list a:hover { color:var(--on-ink); }
.nav__list a:hover::after { width:100%; }
.nav__list a[aria-current="page"] { color:var(--g1); }
.nav__list a[aria-current="page"]::after { width:100%; }

/* Head actions */
.head-actions { display:flex; align-items:center; gap:var(--s3); flex-shrink:0; }

/* Social icons */
.social { display:none; align-items:center; gap:var(--s3); }
.social li a {
  display:flex; width:18px; height:18px;
  color:rgba(242,240,236,.45); transition:color .2s;
}
.social li a:hover { color:var(--g1); }
.social svg {
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.social .dot { fill:currentColor; stroke:none; }

/* Desktop CTAs */
.head-phone {
  display:none; align-items:center; gap:var(--s2);
  font-size:.8125rem; font-weight:700; letter-spacing:.01em;
  transition:color .2s;
}
.head-phone svg {
  width:16px; height:16px; flex-shrink:0;
  fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.head-start  { display:none; padding:.55rem 1.2rem; font-size:.625rem; }

/* Mobile call icon */
.head-call-icon {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border:1px solid var(--gold-line); border-radius:50%;
  color:var(--g1); transition:background .2s, border-color .2s;
}
.head-call-icon:hover { background:rgba(176,141,87,.1); border-color:var(--g1); }
.head-call-icon svg {
  width:15px; height:15px;
  fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

/* Burger */
.burger {
  display:flex; flex-direction:column; justify-content:center;
  align-items:center; width:44px; height:44px; gap:5px; padding:6px;
}
.burger__box { display:flex; flex-direction:column; gap:5px; width:22px; }
.burger__box i {
  display:block; height:1.5px; background:var(--on-ink);
  border-radius:2px;
  transition:transform .32s var(--ease), opacity .2s, width .32s var(--ease);
  transform-origin:center;
}
.burger__box i:last-child { width:14px; }
.burger[aria-expanded="true"] .burger__box i:first-child {
  transform:translateY(6.5px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__box i:last-child {
  width:22px; transform:translateY(-6.5px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════
   MOBILE DRAWER — fullscreen overlay
═══════════════════════════════════════════════════════ */
.drawer {
  position:fixed; inset:0; z-index:90;
  background:var(--ink);
  display:flex; flex-direction:column;
  padding:calc(var(--head-h) + var(--s8)) var(--gutter) var(--s8);
  overflow-y:auto;
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .26s var(--ease), visibility .26s;
  border-top:1px solid var(--gold-line);
}
.drawer.is-open { opacity:1; pointer-events:auto; visibility:visible; }

.drawer__nav ul { display:flex; flex-direction:column; gap:clamp(.5rem,2.4vh,1.35rem); }
.drawer__nav a {
  display:flex; align-items:baseline; gap:var(--s4);
  font-family:var(--serif); font-size:clamp(1.9rem,7.5vw,3.5rem);
  color:var(--on-ink); line-height:1.2;
  padding-block:.3rem;
  opacity:1; transform:none;
}
.drawer__nav a[aria-current] { color:var(--g1); }
@keyframes drawerLink {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
.drawer__num {
  font-family:var(--sans); font-size:.5625rem;
  letter-spacing:.16em; color:rgba(242,240,236,.3); font-weight:700;
  align-self:flex-start; margin-top:.65em;
}

.drawer__foot {
  margin-top:auto; padding-top:var(--s7);
  border-top:1px solid var(--gold-line);
  display:flex; flex-direction:column; gap:var(--s4);
}
.drawer__cta {
  display:flex; align-items:center; justify-content:center;
  padding:1.1rem 2rem;
  background:var(--gold); color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,245,220,.28);
  font-size:.8125rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; border-radius:2px; text-align:center;
}
.drawer__social-row { display:flex; gap:var(--s5); }
.drawer__social-row a {
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(242,240,236,.45); transition:color .2s;
}
.drawer__social-row a:hover { color:var(--on-ink); }

body.is-locked { overflow:hidden; }
body.is-locked .hero__video { visibility:hidden; }
body.is-locked .fab-call { opacity:0; pointer-events:none; }

/* ── Floating phone FAB (mobile only) ──────────────────── */
.fab-call {
  position:fixed;
  bottom:clamp(1rem,4vw,1.5rem);
  right:clamp(1rem,4vw,1.5rem);
  z-index:95;
  width:44px; height:44px; border-radius:50%;
  background:var(--g1); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 14px rgba(176,141,87,.3), 0 2px 8px rgba(0,0,0,.4);
  transition:transform .22s var(--ease), box-shadow .22s, opacity .2s;
}
.fab-call::before {
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  background:var(--g1);
  opacity:0;
  pointer-events:none;
}
.fab-call svg {
  width:19px; height:19px;
  fill:none; stroke:currentColor;
  position:relative;
  transform:translate(-1px,-1px);
}
.fab-call:hover,
.fab-call:focus-visible {
  transform:translateY(-2px);
  box-shadow:0 6px 28px var(--gold-glow), 0 3px 12px rgba(0,0,0,.45);
}
.fab-call:hover::before,
.fab-call:focus-visible::before {
  animation-play-state:paused;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes fab-pulse {
    0%   { transform:scale(1);    opacity:.32; }
    45%  { transform:scale(1.45); opacity:0;   }
    100% { transform:scale(1.45); opacity:0;   }
  }
  .fab-call::before {
    animation:fab-pulse 4s cubic-bezier(0.22,1,0.36,1) infinite;
  }
}
@media (min-width:768px) { .fab-call { display:none; } }
/* C3: hide FAB on contact page only (form already provides clear CTA) */
.page-contact .fab-call { display:none !important; }

@media (prefers-reduced-motion:reduce) {
  .is-open .drawer__nav a { animation:none; opacity:1; transform:none; }
}

/* ═══════════════════════════════════════════════════════
   HERO — full-bleed video, transparent header floats on top,
   centered logo lockup (clearandbrightsolutions.com-style)
═══════════════════════════════════════════════════════ */
.hero {
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  display:grid;
  align-items:center;
  justify-items:center;
}

.hero__vidwrap {
  position:absolute; inset:0; z-index:0;
  background:var(--ink-2) center/cover no-repeat;
  background-image:url('../img/hero-ontrak-poster.jpg?v=2');
}
.hero__video {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
@media (prefers-reduced-motion:reduce) {
  .hero__video { display:none; } /* poster (set on .hero__vidwrap) shows instead */
}
.hero__scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(19,19,19,.66) 0%,
    rgba(19,19,19,.34) 38%,
    rgba(19,19,19,.50) 62%,
    rgba(19,19,19,.82) 100%
  );
}

/* Autoplay-blocked overlay — shown only when the browser blocks autoplay */
.hero__vidwrap .hero__tap { display:none; }
.hero__vidwrap.needs-tap .hero__tap {
  display:flex; align-items:center; justify-content:center;
  position:absolute; inset:0; z-index:2;
  background:rgba(0,0,0,.28); cursor:pointer;
  animation:tap-fade-in .4s ease both;
}
@keyframes tap-fade-in { from { opacity:0 } to { opacity:1 } }
.hero__tap-btn {
  width:72px; height:72px; border-radius:50%;
  background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .2s, transform .15s;
}
.hero__vidwrap.needs-tap:hover .hero__tap-btn {
  background:rgba(255,255,255,.28); transform:scale(1.06);
}
.hero__tap-btn svg { width:28px; height:28px; fill:#fff; margin-left:4px; }

.hero__content {
  position:relative; z-index:2;
  max-width:820px;
  width:100%;
  padding:var(--s6) var(--gutter);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

.hero__logo { margin:0 0 var(--s6); }
.hero__logo img {
  display:block;
  width:clamp(240px, 25vw, 470px);
  max-width:62vw;
  margin-inline:auto;
  height:auto;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.45));
}

.hero__headline {
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(1.125rem, .6rem + .95vw, 1.375rem);
  line-height:1.5;
  color:rgba(242,240,236,.96);
  max-width:46ch;
}

.hero__cta {
  margin-top:var(--s6);
  display:flex; align-items:center; justify-content:center;
  gap:var(--s4);
}
.hero__cta .btn {
  padding:.9375rem 2.125rem;
  font-size:.8125rem;
  letter-spacing:.14em;
}

.hero__bullets {
  margin-top:var(--s5);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s3) var(--s6);
}
.hero__bullets li {
  display:flex; align-items:center; gap:var(--s2);
  font-size:.8125rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700;
  color:rgba(242,240,236,.88);
  white-space:nowrap;
}
.hero__bullets li::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--g1); flex-shrink:0;
}
.btn--amber {
  background:var(--amber); color:var(--amber-ink);
  border:1px solid var(--amber);
}
.btn--amber:hover { filter:brightness(1.08); }
.btn--ghost-white {
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.55);
}
.btn--ghost-white:hover { background:rgba(255,255,255,.12); }

@media (max-width:767px) {
  .hero { min-height:100vh; min-height:100svh; }
  .hero__content { padding:calc(var(--head-h) + var(--s4)) var(--gutter) var(--s5); }
  .hero__cta { flex-direction:column; align-items:stretch; width:100%; gap:12px; }
  .hero__cta .btn { width:100%; justify-content:center; padding:1.125rem 1.5rem; font-size:.8125rem; }
  .hero__logo { margin-bottom:var(--s5); }
  .hero__logo img { width:62vw; max-width:340px; }
  .hero__headline { font-size:1.0625rem; line-height:1.45; max-width:30ch; }
  .hero__cta { margin-top:var(--s5); }
  .hero__bullets { margin-top:var(--s5); gap:var(--s2) var(--s4); }
  .hero__bullets li { font-size:.6875rem; letter-spacing:.1em; }
  .brand__mark { height:28px; }
  .site-head.is-solid .brand__mark { height:28px; }
}


/* ═══════════════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════════════ */
.services {
  padding-block:var(--sec-py);
  background:var(--ink-2);
  position:relative; overflow:hidden;
}
.services .sec-num { top:var(--s5); right:var(--gutter); }
.services__top { margin-bottom:var(--s7); }
.services__h {
  font-family:var(--serif);
  font-size:clamp(2rem,5vw,3.25rem);
  font-weight:400; margin-top:var(--s3);
}

.svc-grid { display:grid; gap:var(--s4); }

/* Mobile: horizontal swipe carousel instead of stacked cards */
@media (max-width:899px) {
  .svc-grid {
    display:flex; gap:var(--s4);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none; -ms-overflow-style:none;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    padding-bottom:var(--s2);
  }
  .svc-grid::-webkit-scrollbar { display:none; }
  .svc-card { flex:0 0 min(80vw, 360px); scroll-snap-align:start; }
}

.svc-card {
  border:1px solid rgba(242,240,236,.07); border-radius:2px;
  overflow:hidden; transition:border-color .35s var(--ease);
}
.svc-card:hover { border-color:var(--g1); }
.svc-card__img {
  aspect-ratio:4/3; overflow:hidden; position:relative;
}
.svc-card__img::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(12,12,12,.52) 0%, transparent 55%);
  z-index:1;
}
.svc-card__img img {
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.88) contrast(1.04) brightness(.96);
  transition:transform .6s var(--ease);
}
@media (hover:hover) {
  .svc-card:hover .svc-card__img img { transform:scale(1.03); }
}
.svc-card__img--placeholder {
  background:repeating-linear-gradient(
    -45deg,
    rgba(242,240,236,.04) 0px,
    rgba(242,240,236,.04) 1px,
    transparent 1px,
    transparent 10px
  ), var(--ink-3);
  display:flex; align-items:center; justify-content:center;
}
.svc-card__placeholder-label {
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(242,240,236,.25);
  border:1px solid rgba(242,240,236,.12);
  padding:.45em 1em; border-radius:2px;
  pointer-events:none; user-select:none;
}
.svc-card__body {
  padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s3);
  background:var(--ink-3);
}
.svc-card__num {
  font-family:var(--serif); font-size:.6875rem;
  letter-spacing:.18em; color:var(--g1);
}
.svc-card__t {
  font-family:var(--sans); font-weight:700; letter-spacing:-0.01em;
  font-size:clamp(1.15rem,2.3vw,1.5rem); line-height:1.2;
}
.svc-card__d {
  font-size:.875rem; color:rgba(242,240,236,.6); line-height:1.65;
}

/* ═════════════════════════════════════════════════════
   HOW WE WORK — media + numbered process, light section
   (breaks up the two dark sections on either side)
═════════════════════════════════════════════════════ */
.how-work {
  padding-block:var(--sec-py);
  background:var(--paper);
}
.how-work__grid {
  display:grid; gap:var(--s8);
}
.how-work__media {
  position:relative;
  aspect-ratio:4/3;
  width:100%;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(15,20,32,.14);
  background:var(--ink-2);
}
.how-work__video {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.how-work__badge {
  position:absolute; top:var(--s4); left:var(--s4); z-index:2;
  background:var(--g1); color:var(--ink);
  font-size:.625rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.45rem .8rem; border-radius:2px;
}
.how-work .eyebrow {
  display:flex; align-items:center; gap:.75rem;
}
.how-work .eyebrow::before {
  content:''; flex-shrink:0;
  width:2rem; height:2px;
  background:var(--g1);
}
.how-work__h {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.25rem,5vw,3.5rem);
  line-height:1.05; margin-top:var(--s3);
  color:var(--paper-ink);
}
.how-work__h .ital { color:var(--g3); }
.how-work__sub {
  margin-top:var(--s5); max-width:52ch;
  font-size:1rem; line-height:1.7;
  color:var(--paper-dim);
}
.how-work__steps {
  margin-top:var(--s7);
  display:flex; flex-direction:column; gap:var(--s4);
}
.how-work__steps li {
  display:flex; align-items:center; gap:var(--s4);
}
.how-work__num {
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  width:36px; height:36px;
  background:var(--g1); color:var(--ink);
  font-size:.75rem; font-weight:700;
  border-radius:2px;
}
.how-work__steps li > span:last-child {
  font-size:.9375rem; font-weight:600; color:var(--paper-ink);
}
.how-work__cta { margin-top:var(--s8); }

@media (min-width:900px) {
  .how-work__grid { grid-template-columns:1fr 1fr; align-items:stretch; gap:clamp(3rem,6vw,5rem); }
  .how-work__media { aspect-ratio:auto; height:100%; min-height:480px; }
}

/* ═════════════════════════════════════════════════════
   CLIENT REVIEWS — written comments + drag slider
═════════════════════════════════════════════════════ */
.reviews {
  position:relative; overflow:hidden;
  padding-block:var(--sec-py);
  background:var(--ink); color:var(--on-ink);
}
.reviews::before {
  content:''; position:absolute; top:-34%; right:-14%;
  width:58vw; height:58vw; border-radius:50%;
  background:radial-gradient(circle, rgba(176,141,87,.11) 0%, rgba(176,141,87,0) 68%);
  pointer-events:none;
}
.reviews__top {
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:var(--s5);
  margin-bottom:var(--s7);
}
.reviews__h {
  font-family:var(--serif);
  font-size:clamp(2rem,5vw,3.25rem);
  font-weight:400; margin-top:var(--s3);
}
.reviews__score { display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.reviews__score-stars { color:var(--g1); font-size:.9375rem; letter-spacing:.2em; }
.reviews__score-n { font-family:var(--serif); font-size:1.75rem; line-height:1; color:var(--on-ink); }
.reviews__score-t {
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(242,240,236,.42);
}

/* ── Track ── */
.reviews__track {
  display:flex; gap:var(--s4);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline-start:var(--gutter);
  scrollbar-width:none; -ms-overflow-style:none;
  padding-inline:var(--gutter);
  margin-inline:calc(-1 * var(--gutter));
  padding-bottom:var(--s2);
}
.reviews__track::-webkit-scrollbar { display:none; }

/* ── Video review card ── */
.review-card {
  scroll-snap-align:start;
  flex:0 0 calc(100% - var(--s4));
  border:1px solid var(--gold-line); border-radius:2px; overflow:hidden;
  display:flex; flex-direction:column;
}
.review-card__vid {
  position:relative;
  height:clamp(260px, 52svh, 440px);
  overflow:hidden; cursor:pointer;
  background:var(--ink-3);
}
.review-card__vid img,
.review-card__vid video {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}
.review-card:hover .review-card__vid img,
.review-card:hover .review-card__vid video { transform:scale(1.03); }
.review-card__play {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,12,12,.35);
  transition:background .2s, opacity .18s;
  border:none; cursor:pointer; padding:0;
}
.review-card:hover .review-card__play { background:rgba(12,12,12,.2); }
.review-card__play-btn {
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.92);
  border:2px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s var(--ease), background .2s;
}
.review-card__play-btn svg { width:22px; height:22px; fill:#0A0F1A; margin-left:3px; }
.review-card:hover .review-card__play-btn {
  transform:scale(1.1); background:#fff;
}
.review-card__timeline {
  position:absolute; bottom:0; left:0; right:0;
  height:3px; background:rgba(255,255,255,.18);
  cursor:pointer; z-index:5;
  transition:height .15s;
}
.review-card__timeline:hover { height:5px; }
.review-card__timeline-fill {
  height:100%; width:0%;
  background:var(--g1);
  pointer-events:none;
}
.review-card.has-played .review-card__play { background:rgba(12,12,12,.08); }
.review-card.has-played:hover .review-card__play { background:rgba(12,12,12,.18); }
.review-card.is-playing .review-card__play { opacity:0; }
@media (hover: hover) {
  .review-card.is-playing:hover .review-card__play { opacity:1; background:rgba(12,12,12,.15); }
}
.review-card__info { padding:var(--s4) var(--s5); }
.review-card__name { font-family:var(--serif); font-size:1.0625rem; }
.review-card__loc {
  font-size:.6875rem; letter-spacing:.1em;
  color:rgba(242,240,236,.4); margin-top:var(--s1);
}
.review-card__q {
  font-size:.875rem; color:rgba(242,240,236,.6);
  line-height:1.6; margin-top:var(--s3);
  font-style:italic; font-family:var(--serif);
}

/* ── Dots ── */
.reviews__dots {
  display:flex; justify-content:center; gap:var(--s2);
  margin-top:var(--s5);
}
.reviews__dot {
  position:relative;
  width:6px; height:6px; border-radius:50%;
  background:rgba(242,240,236,.2);
  transition:background .2s, transform .2s;
  cursor:pointer; padding:0; border:none;
}
.reviews__dot::after {
  content:'';
  position:absolute; top:50%; left:50%;
  width:44px; height:44px;
  transform:translate(-50%,-50%);
}
.reviews__dot.is-active {
  background:var(--g1); transform:scale(1.4);
}
.reviews__next {
  display:flex; align-items:center; justify-content:center;
  position:absolute; right:var(--gutter); bottom:50%;
  transform:translateY(50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px);
  cursor:pointer;
  transition:background .2s, transform .2s;
  z-index:10;
}
.reviews__next svg {
  width:20px; height:20px; fill:none; stroke:#fff;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.reviews__next:hover { background:rgba(255,255,255,.28); transform:translateY(50%) scale(1.08); }
@media (min-width:768px) { .reviews__next { display:none; } }

@media (min-width:600px) {
  .review-card { flex:0 0 calc(50% - var(--s3)); }
}
@media (min-width:1024px) {
  .review-card { flex:1; }
  .review-card__vid { height:clamp(400px,50svh,540px); }
}

/* ═══════════════════════════════════════════════════════
   SECTION CTA WITH BG IMAGE (about page)
═══════════════════════════════════════════════════════ */
.work-cta {
  position:relative; overflow:hidden;
  min-height:clamp(280px,50vh,520px);
  display:flex; align-items:center;
}
.work-cta__bg { position:absolute; inset:0; z-index:0; }
.work-cta__bg img { width:100%; height:100%; object-fit:cover; }
.work-cta__bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(12,12,12,.92) 0%, rgba(12,12,12,.75) 45%, rgba(12,12,12,.25) 100%);
}
.work-cta__body {
  position:relative; z-index:1;
  padding:var(--sec-py) var(--gutter);
  max-width:var(--wrap); margin-inline:auto; width:100%;
}
.work-cta__h {
  font-family:var(--serif);
  font-size:clamp(2.25rem,7vw,4.5rem);
  font-weight:400; line-height:1.1; margin-top:var(--s3);
}
.work-cta__sub {
  margin-top:var(--s4);
  color:rgba(242,240,236,.6); max-width:42ch; font-size:.9375rem;
}
.work-cta__link { margin-top:var(--s7); display:inline-flex; }

/* ═══════════════════════════════════════════════════════
   THE ONTRAK STANDARD
═══════════════════════════════════════════════════════ */
.sr-std {
  padding-block:var(--sec-py);
  background:var(--ink-2);
  border-top:1px solid var(--gold-line);
}
.sr-std__layout {
  display:flex; flex-direction:column;
  gap:var(--s8); align-items:flex-start;
}
.sr-std__text { width:100%; }
.sr-std__h {
  font-family:var(--serif);
  font-size:clamp(2.5rem,8vw,4.75rem);
  font-weight:400; line-height:1.08; margin-top:var(--s3);
}
.sr-std__h em {
  font-style:italic;
  background:none;
  -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor; color:inherit;
}
.sr-std__counter {
  margin-top:var(--s5);
  font-family:var(--serif);
  font-size:clamp(1.125rem,3.5vw,1.625rem);
  font-style:italic;
  color:rgba(242,240,236,.45);
  line-height:1.3;
}
.sr-std__text .btn { margin-top:var(--s8); }

/* ── Arch frame ─────────────────────────────────────── */
.sr-std__vid-wrap {
  position:relative;
  width:min(100%,420px); aspect-ratio:4/5;
  border-radius:50% 50% 8px 8px / 28% 28% 2% 2%;
  overflow:hidden; background:var(--ink-3);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
  align-self:center; cursor:default;
}
/* Gold hairline mat — inset 10px, follows arch shape */
.sr-std__vid-wrap::before {
  content:''; position:absolute; inset:10px;
  border:1px solid var(--gold-line);
  border-radius:inherit; pointer-events:none; z-index:2;
}
/* ── Before/After horizontal wipe (arch frame) ─────── */
.sr-ba { position:relative; cursor:ew-resize; user-select:none; touch-action:pan-y; }
.sr-ba__before,
.sr-ba__after { position:absolute; inset:0; }
.sr-ba__before img,
.sr-ba__after img { width:100%; height:100%; object-fit:cover; display:block; }
.sr-ba__label {
  position:absolute; z-index:15;
  font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  background:rgba(12,12,12,.72); padding:var(--s2) var(--s3); border-radius:6px;
  color:rgba(242,240,236,.92); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:opacity .22s ease;
}
.sr-ba__label--before { top:18%; left:8%; }
.sr-ba__label--after  { top:18%; right:8%; }
.sr-ba__handle {
  position:absolute; top:0; bottom:0; left:50%;
  z-index:20; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none; width:2px;
  overflow:visible;
}
.sr-ba__handle-line {
  width:2px; height:100%; background:rgba(255,255,255,.82); flex-shrink:0;
}
.sr-ba__handle-grip {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%;
  background:var(--g1); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; gap:4px;
  box-shadow:0 0 20px rgba(0,0,0,.55), 0 0 10px rgba(176,141,87,.3);
  pointer-events:auto; cursor:ew-resize;
}
.sr-ba__handle-grip svg {
  width:14px; height:14px; stroke:var(--ink); fill:none;
  stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
}
/* Arch scroll reveal: scale from 92% */
@keyframes archReveal {
  from { opacity:0; transform:scale(.92); }
  to   { opacity:1; transform:scale(1); }
}
.sr-std__vid-wrap.reveal.is-in {
  animation:archReveal 700ms cubic-bezier(0.22,1,0.36,1) var(--d,0ms) both;
}

/* ── Desktop: side-by-side ──────────────────────────── */
@media (min-width:900px) {
  .sr-std__layout {
    flex-direction:row; align-items:center;
    gap:clamp(var(--s9),10vw,var(--s11));
  }
  .sr-std__text { flex:1 1 0; min-width:0; }
  .sr-std__vid-wrap {
    flex:0 0 auto;
    width:clamp(300px,28vw,420px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .sr-std__vid-wrap.reveal.is-in { animation:none; }
}

/* ═══════════════════════════════════════════════════════
   ABOUT — WHO WE ARE block
═══════════════════════════════════════════════════════ */
.about-who {
  padding-block:var(--sec-py);
  border-top:1px solid var(--gold-line);
}
.about-who__grid {
  display:grid; gap:var(--s8);
}
.about-who__fig {
  position:relative; overflow:hidden; border:1px solid var(--gold-line); border-radius:2px;
  aspect-ratio:4/5; max-width:480px; margin-inline:auto; width:100%;
}
.about-who__fig img { width:100%; height:100%; object-fit:cover; }
.about-who__h {
  font-family:var(--serif);
  font-size:clamp(1.75rem,4vw,2.75rem);
  font-weight:400; line-height:1.15; margin-top:var(--s3);
}
.about-who__h em {
  font-style:italic;
  background:none;
  -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor; color:inherit;
}
.about-who__body {
  display:flex; flex-direction:column; gap:var(--s4); margin-top:var(--s5);
}
.about-who__body p { font-size:.9375rem; color:rgba(242,240,236,.7); line-height:1.75; }
.about-who__cred {
  margin-top:var(--s6);
  font-size:.5625rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--g1);
}
@media (min-width:900px) {
  .about-who__grid { grid-template-columns:auto 1fr; align-items:center; gap:var(--s10); }
  .about-who__fig { width:clamp(260px,32vw,400px); aspect-ratio:4/5; margin-inline:0; }
}
/* ═══════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════ */
.faq { padding-block:var(--sec-py); background:var(--ink-2); position:relative; overflow:hidden; }
.faq .sec-num { bottom:var(--s5); right:var(--gutter); }
.faq__top { margin-bottom:var(--s7); }
.faq__h {
  font-family:var(--serif);
  font-size:clamp(2rem,5vw,3.25rem);
  font-weight:400; margin-top:var(--s3);
}
.faq__list { display:flex; flex-direction:column; }
@media (max-width:767px) {
  /* Clear the fixed call FAB so it doesn't sit on top of the last item's + icon */
  .faq__list { padding-bottom:76px; }
}
.faq__item { border-top:1px solid var(--gold-line); }
.faq__item:last-child { border-bottom:1px solid var(--gold-line); }
.faq__q {
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--s5); width:100%; padding:var(--s5) 0;
  text-align:left; font-size:clamp(.9375rem,2vw,1.0625rem); font-weight:500;
  color:var(--on-ink); transition:color .2s;
}
.faq__q:hover { color:var(--g1); }
.faq__icon {
  flex-shrink:0; width:26px; height:26px;
  border:1px solid var(--gold-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--g1); font-size:1.125rem; line-height:1;
  transition:transform .35s var(--ease), border-color .2s, background .2s;
}
.faq__item.is-open .faq__icon {
  transform:rotate(45deg);
  background:rgba(176,141,87,.1); border-color:var(--g1);
}
.faq__a {
  max-height:0; overflow:hidden;
  transition:max-height .45s var(--ease);
}
.faq__a-inner {
  padding-bottom:var(--s5);
  color:rgba(242,240,236,.65); font-size:.9375rem; line-height:1.75;
  max-width:70ch;
}

/* ═══════════════════════════════════════════════════════
   HOMEPAGE CONTACT FORM (index.html only)
═══════════════════════════════════════════════════════ */
.home-form { padding-block:var(--sec-py); background:var(--ink-3); }
.home-form__wrap { max-width:640px; }
.home-form__h {
  font-family:var(--serif);
  font-size:clamp(1.75rem,4vw,2.5rem);
  font-weight:400; margin-top:var(--s3);
}
.home-form__sub {
  margin-top:var(--s4); max-width:48ch;
  color:rgba(242,240,236,.55); font-size:.9375rem; line-height:1.6;
}
.home-form__form { margin-top:var(--s7); }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.site-foot {
  background:var(--ink);
  border-top:1px solid var(--gold-line);
}
.foot-cta {
  padding:var(--s8) var(--gutter);
  border-bottom:1px solid var(--gold-line);
  max-width:var(--wrap); margin-inline:auto;
  position:relative;
}
.foot-cta--img { border-bottom-color:transparent; }
.foot-cta--img::before {
  content:''; position:absolute; inset:0;
  background:rgba(10,15,26,.88);
  pointer-events:none;
}
.foot-cta__overlay {
  position:relative; z-index:1;
}
.foot-cta__h {
  font-family:var(--serif);
  font-size:clamp(1.75rem,4vw,2.75rem);
  font-weight:400; line-height:1.15;
}
.foot-cta__contact {
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s2) var(--s4); margin-top:var(--s5);
}
.foot-cta__contact a {
  font-family:var(--serif);
  font-size:clamp(1.0625rem,2vw,1.375rem);
  color:rgba(242,240,236,.65); transition:color .2s;
}
.foot-cta__contact a:hover { color:var(--g1); }
.foot-cta__sep { color:var(--gold-line); padding-inline:var(--s2); }

.foot-grid {
  display:grid; gap:var(--s8);
  padding:var(--s8) var(--gutter);
  max-width:var(--wrap); margin-inline:auto;
}
.foot-brand img { display:block; width:160px; height:auto; }
.foot-brand p {
  margin-top:var(--s4); font-size:.875rem;
  color:rgba(242,240,236,.35);
  font-style:italic; font-family:var(--serif);
}
.k {
  font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; font-weight:700;
  color:var(--g1);
}
.foot-col .k { margin-bottom:var(--s4); display:block; }
.foot-col ul { display:flex; flex-direction:column; gap:var(--s3); }
.foot-col a {
  font-size:.875rem; color:rgba(242,240,236,.5);
  position:relative; transition:color .2s;
}
.foot-col a::after {
  content:''; position:absolute; bottom:-1px; left:0;
  width:0; height:1px; background:rgba(242,240,236,.35);
  transition:width .35s var(--ease);
}
.foot-col a:hover { color:var(--on-ink); }
.foot-col a:hover::after { width:100%; }
.foot-col li span { font-size:.875rem; color:rgba(242,240,236,.35); }

.foot-base {
  padding:var(--s5) var(--gutter);
  border-top:1px solid var(--gold-line);
  max-width:var(--wrap); margin-inline:auto;
}
.foot-base__inner {
  display:flex; flex-direction:column;
  gap:var(--s4); align-items:flex-start;
}
.foot-base__marks { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); }
.foot-base__mark {
  display:flex; align-items:center; gap:var(--s2);
  font-size:.5rem; letter-spacing:.2em;
  text-transform:uppercase; font-weight:600;
  color:rgba(242,240,236,.35);
}
.foot-base__mark::before {
  content:''; display:block; width:4px; height:4px; flex-shrink:0;
  background:var(--g1); opacity:.5;
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}
.foot-base__copy { font-size:.6875rem; color:rgba(242,240,236,.22); }

.foot-legal {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s3) var(--s5);
  align-self:stretch;
  margin-top:var(--s4); padding-top:var(--s4);
  border-top:1px solid var(--gold-line);
}
.foot-legal__policy {
  font-size:.6875rem; color:rgba(242,240,236,.35); transition:color .2s;
}
.foot-legal__policy:hover { color:var(--g1); }
.foot-legal__credit {
  font-size:.6875rem; color:rgba(242,240,236,.35);
}
.foot-legal__credit a {
  color:var(--g1); font-weight:600; transition:color .2s;
}
.foot-legal__credit a:hover { color:var(--g2); }

/* ═══════════════════════════════════════════════════════
   WORK PAGE
═══════════════════════════════════════════════════════ */
.page-band {
  padding-top:calc(var(--head-h) + var(--s8));
  padding-bottom:var(--s8);
  border-bottom:1px solid var(--gold-line);
}
.page-band__h {
  font-family:var(--serif);
  font-size:clamp(2.75rem,8vw,5.5rem);
  font-weight:400; line-height:1.06;
  margin-top:var(--s3);
}
.page-band__sub {
  margin-top:var(--s4); font-size:.9375rem;
  color:rgba(242,240,236,.55); max-width:48ch;
}

/* Before/After slider */
.ba-section {
  padding-block:var(--sec-py);
  background:var(--ink-2);
}
.ba-section__h {
  font-family:var(--serif);
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:400; margin-top:var(--s3); margin-bottom:var(--s6);
}
.ba-wrap { max-width:880px; }
.ba-slider {
  position:relative;
  aspect-ratio:4/3;
  max-height:58svh;
  overflow:hidden;
  border:1px solid var(--gold-line); border-radius:2px;
  cursor:ew-resize; user-select:none; touch-action:pan-y;
}
.ba-before,.ba-after {
  position:absolute; inset:0; width:100%; height:100%;
}
.ba-before img,.ba-after img {
  width:100%; height:100%; object-fit:cover; pointer-events:none; display:block;
}
.ba-after { clip-path:inset(0 50% 0 0); }
.ba-handle {
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background:var(--gold);
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  z-index:10;
}
.ba-handle__grip {
  width:44px; height:44px; border-radius:50%;
  background:var(--g1); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 20px rgba(0,0,0,.6), 0 0 12px rgba(176,141,87,.3);
}
.ba-handle__grip svg { width:18px; height:18px; fill:var(--ink); }
.ba-label {
  position:absolute; top:var(--s4);
  font-size:.5rem; letter-spacing:.2em;
  text-transform:uppercase; font-weight:700;
  background:rgba(12,12,12,.75);
  padding:var(--s1) var(--s3); border-radius:2px;
  color:rgba(242,240,236,.8);
}
.ba-label--before { left:var(--s4); }
.ba-label--after  { right:var(--s4); }

/* ═══════════════════════════════════════════════════════
   WORK PAGE — RECENT PROJECTS
═══════════════════════════════════════════════════════ */
.projects {
  padding-block:var(--sec-py);
  background:var(--ink-2);
  position:relative; overflow:hidden;
}
.projects .sec-num { top:var(--s5); right:var(--gutter); }

/* Photo/video mosaic — CSS-columns masonry so tiles of mixed aspect
   ratios (tall/wide/square) stack without gaps, no JS needed. Swap
   each .cs-placeholder for a real <img>/<video> when media is ready;
   the layout re-flows on its own. */
.gallery {
  column-count:1; column-gap:var(--s4);
}
@media (min-width:600px) { .gallery { column-count:2; } }
@media (min-width:900px) { .gallery { column-count:3; } }
.gallery__item {
  position:relative;
  break-inside:avoid;
  margin-bottom:var(--s4);
  overflow:hidden;
  border-radius:2px;
  border:1px solid rgba(242,240,236,.07);
  transition:border-color .35s var(--ease);
}
.gallery__item:hover { border-color:var(--g1); }
.gallery__item--tall   { aspect-ratio:3/4; }
.gallery__item--wide   { aspect-ratio:4/3; }
.gallery__item--square { aspect-ratio:1/1; }
.gallery__item img,
.gallery__item video {
  width:100%; height:100%; object-fit:cover; display:block;
}

/* CTA band */
.xform-cta {
  padding-block:var(--sec-py);
  background:var(--ink-2);
  border-top:1px solid var(--gold-line);
  text-align:center;
}
.xform-cta__h {
  font-family:var(--serif);
  font-size:clamp(2rem,6vw,3.5rem);
  font-weight:400; line-height:1.1;
}
.xform-cta__h em {
  font-style:italic;
  background:none;
  -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor; color:inherit;
}
.xform-cta__sub {
  margin-top:var(--s4);
  font-size:.9375rem; color:rgba(242,240,236,.5);
}
.xform-cta__actions {
  margin-top:var(--s7);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s3) var(--s5);
}
.xform-cta__tel {
  font-family:var(--serif); font-size:1.125rem;
  color:rgba(242,240,236,.55); transition:color .2s;
}
.xform-cta__tel:hover { color:var(--g1); }

/* ═══════════════════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════════════════ */
.about-hero {
  padding-top:calc(var(--head-h) + var(--s8));
  padding-bottom:var(--s8);
  border-bottom:1px solid var(--gold-line);
}
.about-hero__h {
  font-family:var(--serif);
  font-size:clamp(2.75rem,8vw,5.5rem);
  font-weight:400; line-height:1.06; margin-top:var(--s3);
}
.about-hero__sub {
  max-width:52ch; margin-top:var(--s5);
  font-size:clamp(1rem,2vw,1.25rem);
  color:rgba(242,240,236,.6); line-height:1.65;
}

/* .about-story removed (D1) */

/* ═══════════════════════════════════════════════════════
   LEGAL (privacy policy) — simple prose block
═══════════════════════════════════════════════════════ */
.legal {
  padding-block:var(--sec-py);
}
.legal__updated {
  font-size:.8125rem; color:rgba(242,240,236,.4);
  margin-top:var(--s3);
}
.legal__body {
  max-width:68ch; margin-top:var(--s8);
}
.legal__body h2 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.25rem,2.5vw,1.625rem);
  margin-top:var(--s8);
}
.legal__body h2:first-child { margin-top:0; }
.legal__body p {
  margin-top:var(--s4);
  font-size:.9375rem; line-height:1.75;
  color:rgba(242,240,236,.65);
}
.legal__body ul {
  margin-top:var(--s4);
  padding-left:1.25em;
  font-size:.9375rem; line-height:1.75;
  color:rgba(242,240,236,.65);
}
.legal__body li { margin-top:var(--s2); }
.legal__body a { color:var(--g1); text-decoration:underline; text-underline-offset:2px; }
.legal__body a:hover { color:var(--g2); }

.about-values {
  padding-block:var(--sec-py);
  background:var(--ink); position:relative; overflow:hidden;
}
.about-values .sec-num { top:var(--s5); right:var(--gutter); }
.about-values__h {
  font-family:var(--serif);
  font-size:clamp(1.75rem,4vw,2.75rem);
  font-weight:400; margin-top:var(--s3); margin-bottom:var(--s7);
}
.values-grid { display:grid; gap:var(--s4); }
.value-card {
  padding:var(--s5); border:1px solid var(--gold-line); border-radius:2px;
  transition:border-color .3s;
}
.value-card:hover { border-color:rgba(176,141,87,.5); }
.value-card__num { display:block; font-family:var(--serif); font-size:.6875rem; letter-spacing:.18em; color:var(--g1); margin-bottom:var(--s3); }
.value-card__t { font-family:var(--serif); font-size:1.25rem; font-weight:400; margin-bottom:var(--s3); }
.value-card__d { font-size:.875rem; color:rgba(242,240,236,.6); line-height:1.65; }

/* .about-process + .timeline removed (D1) */

/* ═══════════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════════ */
.page-contact { background:var(--ink); }

.c-head {
  padding-top:calc(var(--head-h) + var(--s8));
  padding-bottom:var(--s8);
  border-bottom:1px solid var(--gold-line);
}
.c-head__grid { display:grid; gap:var(--s7); }
.c-head__h {
  font-family:var(--serif);
  font-size:clamp(2.5rem,7vw,4.5rem);
  font-weight:400; line-height:1.06; margin-top:var(--s3);
}
.c-head__note {
  font-size:.9375rem; color:rgba(242,240,236,.55);
  line-height:1.65; max-width:36ch; margin-bottom:var(--s5);
}
.c-tel {
  display:block; font-family:var(--serif);
  font-size:clamp(1.5rem,4vw,2.25rem);
  color:var(--on-ink); transition:color .2s;
}
.c-tel:hover { color:var(--g1); }
.c-mail {
  display:block; font-size:.875rem;
  color:rgba(242,240,236,.45); margin-top:var(--s3);
  transition:color .2s;
}
.c-mail:hover { color:var(--g1); }

.c-body { padding-block:var(--sec-py); }
.c-body__grid { display:grid; gap:var(--s8); }
.c-body__grid .form,
.c-body__grid .form-success { max-width:640px; width:100%; margin-inline:auto; }

/* Form */
.form { display:flex; flex-direction:column; gap:var(--s5); }
.form__h {
  font-family:var(--serif);
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:400; margin-bottom:var(--s2);
}
.field { display:flex; flex-direction:column; gap:var(--s2); }
.field label {
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:rgba(242,240,236,.55);
}
.opt { font-weight:400; color:rgba(242,240,236,.3); }

/* Wizard question labels read as an actual question, not a caption */
.field--chips label {
  display:block; margin-bottom:var(--s4);
  font-size:clamp(1.25rem,2.2vw,1.5rem);
  letter-spacing:0; text-transform:none;
  font-family:var(--serif); font-weight:400;
  color:var(--on-ink);
}
.field--chips label .opt { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; margin-left:var(--s2); }

/* Input with icon — icon overlays inside the field's left edge, so the
   field's outer box still aligns flush with the label above it */
.field__wrap { position:relative; }
.field__ico {
  position:absolute; left:var(--s4); top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--g1);
  pointer-events:none; z-index:1;
}
.field__ico--top { top:1.15rem; transform:none; }
.field__ico svg {
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.has-icon input,
.has-icon textarea,
.has-icon select { width:100%; padding-left:2.75rem; }
.has-icon .select { width:100%; }

.field input,.field textarea,.field select {
  width:100%; min-height:52px; padding:.875rem var(--s4);
  background:var(--ink-3); border:1px solid rgba(242,240,236,.1);
  border-radius:2px; color:var(--on-ink); font-size:16px;
  transition:border-color .2s, box-shadow .2s;
  -webkit-appearance:none; appearance:none;
}
.field textarea { min-height:140px; padding-top:var(--s4); resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus {
  outline:none; border-color:var(--g1);
  box-shadow:0 0 0 3px rgba(176,141,87,.12);
}
.field input::placeholder,.field textarea::placeholder { color:rgba(242,240,236,.25); }
.field.is-bad input,.field.is-bad textarea,.field.is-bad select { border-color:#C44040; }
.field__err { font-size:.6875rem; color:#E05555; }

.select { position:relative; }
.select select { padding-right:2.5rem; cursor:pointer; }
.select__arrow {
  position:absolute; right:var(--s4); top:50%;
  transform:translateY(-50%);
  color:rgba(242,240,236,.35); pointer-events:none; font-size:.75rem;
}

.form__submit { align-self:flex-start; margin-top:var(--s2); }
.form__submit svg {
  width:16px; height:16px; margin-right:.3rem;
  stroke:currentColor; fill:none; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.form__status { font-size:.875rem; min-height:1.4em; }
.form__status.is-ok  { color:#6DC678; }
.form__status.is-bad { color:#E05555; }
.form__fineprint { font-size:.6875rem; color:rgba(242,240,236,.25); line-height:1.55; }

/* ── Chip-select fields (tap instead of type) ───────────── */
.chip-group { display:flex; flex-wrap:wrap; gap:var(--s3); }
.chip {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
  padding:1.125rem 1.25rem;
  background:var(--ink-3); border:1px solid rgba(242,240,236,.12);
  border-radius:16px; color:rgba(242,240,236,.8);
  font-size:1rem; font-weight:600;
  transition:border-color .2s, background .2s, color .2s;
}
.chip svg {
  width:22px; height:22px; flex-shrink:0;
  stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
@media (hover:hover) { .chip:hover { border-color:rgba(176,141,87,.5); } }
.chip.is-active { background:var(--g1); border-color:var(--g1); color:var(--ink); }
.field.is-bad .chip { border-color:rgba(196,64,64,.45); }

/* ── Form speed badge + trust line ──────────────────────── */
.form-badge {
  display:inline-flex; align-items:center; gap:var(--s2);
  margin-top:var(--s4);
  padding:.4rem .875rem;
  background:rgba(176,141,87,.1); border:1px solid rgba(176,141,87,.3);
  border-radius:999px;
  font-size:.6875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--g2);
}
.form-badge svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
.form-trust {
  display:flex; align-items:flex-start; gap:var(--s2);
  margin-top:var(--s3);
  font-size:.75rem; line-height:1.5;
  color:rgba(242,240,236,.42);
}
.form-trust svg { width:14px; height:14px; margin-top:.1em; stroke:var(--g1); fill:none; stroke-width:2; flex-shrink:0; }

/* ── Name + phone, side by side ─────────────────────────── */
.field-row__label {
  display:block; margin-bottom:var(--s2);
  font-size:.9375rem; letter-spacing:.01em;
  font-weight:700; color:var(--on-ink);
}
.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.field-pair input {
  min-height:60px; padding:.9rem .875rem;
  font-size:1.0625rem;
}
@media (max-width:340px) {
  .field-pair { grid-template-columns:1fr; }
}

/* ── Multi-step wizard ──────────────────────────────────── */
.form-progress { display:flex; gap:var(--s2); margin-bottom:var(--s6); }
.form-progress__seg {
  flex:1; height:4px; border-radius:2px;
  background:rgba(242,240,236,.12);
  overflow:hidden; position:relative;
}
.form-progress__seg::after {
  content:''; position:absolute; inset:0;
  background:var(--g1);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.form-progress__seg.is-done::after,
.form-progress__seg.is-current::after { transform:scaleX(1); }

.form-step { display:none; }
.form-step.is-active { display:block; animation:formStepIn .4s var(--ease) both; }
@keyframes formStepIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
  .form-step.is-active { animation:none; }
}

.form-step__back {
  display:inline-flex; align-items:center; gap:.35rem;
  margin-bottom:var(--s5);
  font-size:.75rem; font-weight:600; letter-spacing:.04em;
  color:rgba(242,240,236,.4);
  transition:color .2s;
}
.form-step__back svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.form-step__back:hover { color:var(--g1); }

.form-step__skip {
  display:inline-block; margin-top:var(--s4);
  font-size:.75rem; color:rgba(242,240,236,.4);
  text-decoration:underline; text-underline-offset:3px;
  transition:color .2s;
}
.form-step__skip:hover { color:var(--g1); }

.chip-group--stack {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s4);
}
.chip-group--stack .chip {
  flex-direction:column; gap:var(--s2);
  width:100%; height:100%;
  padding:var(--s6) var(--s4);
  text-align:center;
}
.chip-group--stack .chip svg { width:26px; height:26px; }
@media (max-width:480px) {
  .chip-group--stack { grid-template-columns:1fr 1fr; gap:var(--s3); }
  .chip-group--stack .chip { padding:var(--s5) var(--s3); font-size:.9375rem; }
}

/* ── Success state ───────────────────────────────────────── */
.form-success { text-align:center; padding:var(--s7) 0; }
.form-success:not([hidden]) { animation:formStepIn .5s var(--ease) both; }
.form-success__check { width:64px; height:64px; margin:0 auto var(--s5); }
.form-success__check svg { width:100%; height:100%; overflow:visible; }
.form-success__circle {
  fill:none; stroke:var(--g1); stroke-width:2;
  stroke-dasharray:145; stroke-dashoffset:145;
  animation:formCircle .5s ease-out forwards;
}
.form-success__tick {
  fill:none; stroke:var(--g1); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:34; stroke-dashoffset:34;
  animation:formTick .35s ease-out .45s forwards;
}
@keyframes formCircle { to { stroke-dashoffset:0; } }
@keyframes formTick   { to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce) {
  .form-success__circle,.form-success__tick { animation:none; stroke-dashoffset:0; }
}
.form-success__h {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,3vw,1.875rem); color:var(--on-ink);
}
.form-success__sub {
  margin-top:var(--s3); max-width:40ch; margin-inline:auto;
  color:rgba(242,240,236,.55); font-size:.9375rem; line-height:1.6;
}
.form-success__phone {
  display:inline-flex; align-items:center; gap:var(--s2);
  margin-top:var(--s6);
  padding:.875rem 1.75rem;
  border:1px solid rgba(176,141,87,.4); border-radius:999px;
  color:var(--g2); font-weight:700; font-size:.9375rem;
  transition:border-color .2s, background .2s;
}
.form-success__phone svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
.form-success__phone:hover { border-color:var(--g1); background:rgba(176,141,87,.08); }

[data-placeholder] { border-bottom:1px dotted rgba(176,141,87,.5); }
.is-placeholder { color:rgba(242,240,236,.35); }

/* ── Coming-soon placeholder ────────────────────────────── */
.cs-placeholder {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s3);
  background:repeating-linear-gradient(
    -45deg,
    rgba(176,141,87,.05) 0px, rgba(176,141,87,.05) 1px,
    transparent 1px, transparent 10px
  ), #0C0C0C;
}
.cs-placeholder__icon { color:var(--g1); opacity:.22; display:block; }
.cs-placeholder__text {
  font-size:.5rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:rgba(176,141,87,.42);
}
.svc-card__img--placeholder::after { display:none; }

/* Contact aside */
.c-side { display:flex; flex-direction:column; gap:var(--s6); }
.c-side__block .k { margin-bottom:var(--s3); display:block; }
.c-side__block > p { font-size:.875rem; color:rgba(242,240,236,.6); line-height:1.65; }
.c-side__social { display:flex; flex-direction:column; gap:var(--s3); }
.c-side__social a {
  font-size:.875rem; color:rgba(242,240,236,.5);
  transition:color .2s; position:relative;
}
.c-side__social a::after {
  content:''; position:absolute; bottom:-1px; left:0;
  width:0; height:1px; background:var(--g1);
  transition:width .35s var(--ease);
}
.c-side__social a:hover { color:var(--on-ink); }
.c-side__social a:hover::after { width:100%; }

/* Map */
.c-map { padding-block:var(--sec-py); background:var(--ink-2); }
.c-map__frame {
  aspect-ratio:16/9; max-height:420px; overflow:hidden;
  border:1px solid var(--gold-line); border-radius:2px;
  margin-block:var(--s6);
}
.c-map__frame iframe {
  width:100%; height:100%; border:0;
  filter:grayscale(1) contrast(.9) brightness(.78);
}
.c-map__note { font-size:.875rem; color:rgba(242,240,236,.4); }

/* ═══════════════════════════════════════════════════════
   DESKTOP — layers on top of mobile-first base
═══════════════════════════════════════════════════════ */
@media (min-width:600px) {
  .svc-grid { grid-template-columns:repeat(3,1fr); }
  .values-grid { grid-template-columns:repeat(2,1fr); }
}

@media (min-width:768px) {
  .nav { display:flex; }
  .burger { display:none; }
  .social { display:flex; }
  .head-phone { display:flex; }
  .head-start { display:flex; }
  .head-call-icon { display:none; }

  /* Contact */
  .c-head__grid { grid-template-columns:1fr 1fr; align-items:end; }

  /* Footer 4-col */
  .foot-grid { grid-template-columns:auto repeat(3,1fr); }
  .foot-base__inner { flex-direction:row; justify-content:space-between; align-items:center; }

  /* BA */
  .ba-slider { aspect-ratio:16/9; max-height:none; }
}

@media (min-width:1024px) {
  /* Reviews row */

  /* About */
  .values-grid { grid-template-columns:repeat(4,1fr); }
}

/* Mobile overrides */
@media (max-width:767px) {
  .nav,.head-phone,.head-start,.social,.head-call-icon { display:none !important; }

  /* Fix header grid so burger sits on the far right */
  .site-head__inner { grid-template-columns:auto 1fr; }
  .head-actions { justify-self:end; }

  /* Readability: bump undersized mobile text to >=12px (task: font sizes) */
  .brand__name { font-size:.75rem; letter-spacing:.08em; }
  .svc-card__num { font-size:.8125rem; }
  .foot-base__mark { font-size:.75rem; letter-spacing:.14em; }

  /* Tap targets: grow hit area via box model, keep text position/appearance unchanged */
  .skip { display:inline-flex; align-items:center; min-height:44px; }

  .foot-col a {
    display:inline-flex; align-items:flex-start;
    min-height:44px; padding-top:.15em;
  }
  .foot-col a::after { bottom:auto; top:1.7em; }

  .foot-cta__contact a {
    display:inline-flex; align-items:flex-start;
    min-height:44px; padding-top:.15em;
  }
}

/* Very narrow phones — CTA stacks so button stays usable */
@media (max-width:374px) {
  .hero__cta {
    flex-direction:column;
    align-items:flex-start;
    gap:var(--s4);
  }
  .hero__cta .btn--solid {
    width:100%;
    justify-content:center;
  }
}

/* ═══════════════════════════════════════════════════════
   FOOTER WORDMARK (replaces logo img)
═══════════════════════════════════════════════════════ */
.foot-brand-name {
  display:block;
  font-family:var(--serif);
  font-size:1.5rem; font-weight:400;
  color:var(--on-ink);
}
.foot-brand-sub {
  display:block;
  font-family:var(--sans);
  font-size:.625rem;
  text-transform:uppercase; letter-spacing:.12em;
  color:rgba(242,240,236,.35);
  margin-top:var(--s2);
}

/* ── Mobile Instagram icon (next to the burger) ─────── */
.head-insta {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  transition:color .2s;
}
.head-insta svg {
  width:19px; height:19px;
  fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.head-insta .dot { fill:currentColor; stroke:none; }
@media (min-width:768px) { .head-insta { display:none; } }

/* ── Honeypot: bot bait, never shown to people ─────── */
.hp {
  position:absolute; left:-9999px;
  width:1px; height:1px; overflow:hidden;
}