/* ==========================================================================
   SHIVANSH INTERIORS — Design System
   Tokens: warm architectural neutrals, ink black, single luxury gold accent.
   Signature device: "drafting marks" — thin gold leader-lines and plan
   annotations (No. 01, PLAN A) borrowed from architectural drawing sets,
   used because the content genuinely is an indexed set of services/plans.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Manrope:wght@300;400;500;600;700&display=swap');

:root{
  --white:#FDFBFA;
  --ink:#141014;
  --ink-70:rgba(20,16,20,.7);
  --ink-55:rgba(20,16,20,.55);
  --ink-35:rgba(20,16,20,.35);
  --line:rgba(20,16,20,.12);
  --line-soft:rgba(20,16,20,.07);
  --gold:#EEBA2B;
  --gold-dim:#84640B;
  --gold-10:rgba(238,186,43,.14);
  --stone:#F5F1E8;
  --stone-dark:#EAE2D0;
  --charcoal:#4A0F1D;
  --charcoal-2:#5B1528;
  --cream-ink:rgba(245,241,232,.7);

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --container:1360px;
  --gutter:clamp(24px, 6vw, 96px);
  --gutter-sm:clamp(20px, 4vw, 48px);

  --ease:cubic-bezier(.16,1,.3,1);
  /* Three deliberate speeds, nothing else — every transition in this
     file uses one of these. Previously there were 11 different
     hand-picked durations (.2s through 1s) with no system behind
     them; consolidating removes the "why is this one different"
     accidental variance the eye picks up on even without consciously
     clocking it. */
  --dur-fast:.35s;   /* small state changes: icon nudges, underlines, colour swaps */
  --dur-base:.5s;    /* the default: button/card hovers, most component transitions */
  --dur-slow:.7s;    /* larger movement: drawer, modal, panel-scale reveals */
  --dur-reveal:.9s;  /* scroll-triggered entrance reveals only */

  /* Spacing scale — every padding/margin/gap in this file should
     trace back to one of these. Not a hard rule for every single
     value (a few compositional one-offs are legitimate), but the
     default, not the exception. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;
  --sp-11:80px; --sp-12:96px;

  --radius-pill:999px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
input,textarea{font:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:.002em}
:focus-visible{outline:2px solid var(--gold-dim);outline-offset:3px}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Type scale ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim);
}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--gold)}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{display:none}
.eyebrow--light{color:var(--gold)}

h1,.h1{font-size:clamp(2.6rem, 5.4vw, 5.2rem);letter-spacing:-.01em}
h2,.h2{font-size:clamp(2.1rem, 3.6vw, 3.4rem);letter-spacing:-.01em}
h3,.h3{font-size:clamp(1.4rem, 2vw, 1.9rem)}
h4,.h4{font-size:1.15rem;font-family:var(--sans);font-weight:600;letter-spacing:.01em}

p{color:var(--ink-70)}
.lede{font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:300;color:var(--ink-70);max-width:46ch}

.italic{font-style:italic}
.serif{font-family:var(--serif)}

/* ---------- Buttons (fully rounded, per brief) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1.05em 2.15em;
  border-radius:var(--radius-pill);
  font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
  transition:background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:15px;height:15px;flex:none;transition:transform var(--dur-base) var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.btn--primary{background:var(--gold);color:var(--ink);border:1px solid var(--gold)}
.btn--primary:hover{background:var(--gold-dim);border-color:var(--gold-dim);box-shadow:0 14px 30px -12px rgba(169,135,28,.55)}

.btn--secondary{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--secondary:hover{background:var(--ink);color:var(--white)}

.btn--on-dark{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.5)}
.btn--on-dark:hover{background:var(--white);color:var(--ink);border-color:var(--white)}

.btn--ghost-gold{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.btn--ghost-gold:hover{background:var(--gold);color:var(--ink)}

.btn--sm{padding:.8em 1.5em;font-size:.72rem}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease)}
.reveal-stagger.is-visible > *{opacity:1;transform:none}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.55s}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-stagger > *{opacity:1 !important;transform:none !important}
}

/* ---------- Entrance cascade (nav + hero, plays once on load) ----------
   Separate from .reveal on purpose: .reveal is scroll-triggered by
   IntersectionObserver in main.js, but the nav and hero are visible
   the instant the page loads, so this is a pure-CSS animation with a
   staggered animation-delay per element instead — no JS wiring needed. */
@keyframes riseIn{
  from{opacity:0;filter:blur(14px);transform:translateY(26px)}
  to{opacity:1;filter:blur(0);transform:translateY(0)}
}
.rise{opacity:0;animation:riseIn var(--dur-reveal) var(--ease) forwards}
@media (prefers-reduced-motion: reduce){
  .rise{opacity:1;animation:none;filter:none;transform:none}
}

/* ---------- Animated mesh gradient ("Almoayyed" / Bloom Field) ----------
   4 colour blobs as layered radial-gradients over a solid backdrop, plus
   a fractal-noise grain layer blended with `overlay`. Centres are CSS
   custom properties (--bx1..4 / --by1..4) written every frame by
   mesh-gradient.js; the values here are the exact rest-frame fallback,
   so the panel still renders correctly with JS disabled. */
.mesh-gradient{
  position:absolute;inset:0;width:100%;height:100%;
  background-color:#F5F1E8;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.280'/></svg>"),
    radial-gradient(circle at var(--bx1, 66.94%) var(--by1, 46.43%), rgba(245, 241, 232, 1) 0%, rgba(245, 241, 232, 0.844) 19.02%, rgba(245, 241, 232, 0.5) 38.05%, rgba(245, 241, 232, 0.156) 57.07%, rgba(245, 241, 232, 0) 76.1%),
    radial-gradient(circle at var(--bx2, 34.69%) var(--by2, 66.31%), rgba(91, 21, 40, 1) 0%, rgba(91, 21, 40, 0.844) 12.73%, rgba(91, 21, 40, 0.5) 25.45%, rgba(91, 21, 40, 0.156) 38.18%, rgba(91, 21, 40, 0) 50.9%),
    radial-gradient(circle at var(--bx3, 48.93%) var(--by3, 19.32%), rgba(74, 15, 29, 1) 0%, rgba(74, 15, 29, 0.844) 16.75%, rgba(74, 15, 29, 0.5) 33.5%, rgba(74, 15, 29, 0.156) 50.25%, rgba(74, 15, 29, 0) 67%),
    radial-gradient(circle at var(--bx4, 80.23%) var(--by4, 87.54%), rgba(238, 186, 43, 1) 0%, rgba(238, 186, 43, 0.844) 10.28%, rgba(238, 186, 43, 0.5) 20.55%, rgba(238, 186, 43, 0.156) 30.83%, rgba(238, 186, 43, 0) 41.1%);
  background-size:120px 120px, auto, auto, auto, auto;
  background-blend-mode:overlay, normal, normal, normal, normal;
}

/* ---------- Testimonials: 2-up variant (trimmed home page) ---------- */
.testimonials--2{grid-template-columns:repeat(2,1fr);max-width:840px;margin-inline:auto}
@media (max-width:700px){.testimonials--2{grid-template-columns:1fr;max-width:480px}}

/* ---------- Parallax hero (Projects page) ----------
   GSAP/ScrollTrigger drives this; see parallax.js. Deliberately no
   opacity:0 / scale here as a static rule — the JS sets that hidden
   starting state itself, right before it defines the entrance tween.
   If the CDN fails, is blocked, or JS is off, these rules never run
   and the images simply sit fully visible in their natural asymmetric
   layout — a static collage rather than a broken/invisible one. */
.parallax-hero{
  position:relative;
  height:100vh;height:100svh;min-height:640px;
  background:var(--white);
  overflow:hidden;
}
.parallax-hero__crumb{
  position:absolute;top:130px;left:var(--gutter);z-index:6;
  display:flex;gap:10px;align-items:center;
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7);
}
.parallax-hero__crumb a:hover{color:var(--gold)}
.parallax-hero__crumb svg{width:11px;height:11px}

.parallax-hero__stage{position:absolute;inset:0}

.ph-img{
  position:absolute;margin:0;
  border-radius:24px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(74,15,29,.28);
  will-change:transform;
}
.ph-img .media{--ar:auto;height:100%;border:0;border-radius:24px}
.ph-img__inner{transition:transform var(--dur-base) var(--ease)}
@media (hover:hover){
  .ph-img:hover .ph-img__inner{transform:scale(1.045) rotate(.4deg)}
  .ph-img:hover{box-shadow:0 40px 90px -26px rgba(74,15,29,.36)}
}

.ph-img--1{left:4%;top:9%;width:19%;aspect-ratio:3/4;z-index:2}
.ph-img--2{left:76%;top:5%;width:16%;aspect-ratio:1/1;z-index:3}
.ph-img--3{left:2%;top:57%;width:21%;aspect-ratio:4/3;z-index:1}
.ph-img--4{left:69%;top:49%;width:22%;aspect-ratio:3/4;z-index:4}
.ph-img--5{left:55%;top:15%;width:11%;aspect-ratio:1/1;z-index:5}
.ph-img--6{left:37%;top:76%;width:13%;aspect-ratio:4/5;z-index:2}

.parallax-hero__content{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:10;text-align:center;max-width:640px;padding-inline:24px;width:100%;
}
.parallax-hero__content h1{margin-block:22px 22px;color:var(--white)}
.parallax-hero__content .lede{margin-inline:auto;color:rgba(255,255,255,.78)}
.parallax-hero__content .eyebrow{color:var(--gold)}
.parallax-hero__actions{display:flex;justify-content:center;gap:18px;margin-top:36px;flex-wrap:wrap}

@media (max-width:920px){
  .parallax-hero{height:auto;min-height:0;padding:120px var(--gutter) 64px;overflow:visible}
  .parallax-hero__crumb{position:static;margin-bottom:24px}
  .parallax-hero__content{position:static;transform:none;max-width:none;padding-inline:0}
  .parallax-hero__stage{
    position:static;margin-top:52px;
    display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  }
}

@media (max-width:920px){
  /* Homepage hero, mobile only — desktop's scattered 6-photo collage
     doesn't translate to a narrow screen the same way it works with
     room to breathe on wide viewports, so mobile gets a different,
     also-proven treatment instead: one full-bleed photo behind the
     text with a scrim, the same pattern already used successfully on
     the About/Projects page heroes. Desktop is untouched — none of
     this is scoped outside max-width:920px. */
  .hero.pin-collage{
    min-height:78vh;min-height:78svh;
    justify-content:flex-end;
    padding-top:0;
    color:var(--white);
  }
  .hero.pin-collage .hero__media{position:absolute;inset:0;order:initial}
  .hero.pin-collage .parallax-hero__stage{position:absolute;inset:0;display:block;margin-top:0}
  .hero.pin-collage .ph-img{display:none}
  .hero.pin-collage .ph-img--1{
    display:block;position:absolute;inset:0;z-index:0;
    width:100%;height:100%;aspect-ratio:auto;
  }
  .hero.pin-collage .ph-img--1 .media,
  .hero.pin-collage .ph-img--1 .media__zoom{width:100%;height:100%}
  .hero.pin-collage .hero__scrim{display:block}
  .hero.pin-collage .hero__content{order:initial}
  .hero.pin-collage .hero__kicker{color:var(--gold)}
  .hero.pin-collage .hero__sub{color:rgba(255,255,255,.78)}
  .hero.pin-collage h1{color:var(--white)}
  .hero.pin-collage .btn--secondary{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
  .hero.pin-collage .hero__scroll{display:none}
}

/* ---------- Placeholder media panels ----------
   Stand-ins for real photography: a warm, editorial gradient plus a
   fine-line motif from the studio's "drafting mark" system (arch,
   colonnade, armchair, botanical, floor plan), so each panel reads as
   an intentional graphic mark rather than a missing image. Swap the
   .media__zoom element for a real <img src="..." alt="..."> when
   photography is ready — see HTML comments beside each usage.
   z-index map: ::after (gradient, 0) < .media__zoom / real <img> (1)
   < ::before (gold corner frame, 2) — so a dropped-in photo always
   shows above the placeholder and beneath the corner accent. */
.media{
  position:relative;overflow:hidden;background:var(--stone);
  aspect-ratio:var(--ar, 4/5);
  border:1px solid var(--line);
}
.media::after{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:
    var(--motif, none),
    radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,.05) 1px, transparent 0),
    linear-gradient(var(--m1, 145deg), var(--c1,#171310) 0%, var(--c2,#4a3521) 48%, var(--c3,#0b0907) 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-position:center, 0 0, center;
  background-size:52% auto, 3px 3px, cover;
}
.media::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(90deg, transparent 0 92%, var(--gold-10) 92% 100%),
    linear-gradient(0deg, transparent 0 92%, var(--gold-10) 92% 100%);
  opacity:.6;
}
.media__zoom{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.media__zoom[data-load-failed]{display:none}
.media--a{--c1:#160509;--c2:#581223;--c3:#0D0305;--motif:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20200%20200%27%3E%3Cpath%20d=%27M60%20178V88a40%2040%200%200180%200v90%27%20fill=%27none%27%20stroke=%27rgba%28238,186,43,0.22%29%27%20stroke-width=%271.3%27/%3E%3C/svg%3E")}
.media--b{--c1:#140408;--c2:#3F0D18;--c3:#0B0204;--m1:70deg;--motif:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20200%20200%27%3E%3Cpath%20d=%27M70%2042h60M76%2042v106M124%2042v106M64%20148h72%27%20fill=%27none%27%20stroke=%27rgba%28238,186,43,0.22%29%27%20stroke-width=%271.3%27/%3E%3Cpath%20d=%27M88%2062v66M112%2062v66%27%20fill=%27none%27%20stroke=%27rgba%28238,186,43,0.22%29%27%20stroke-width=%271.3%27/%3E%3C/svg%3E")}
.media--c{--c1:#18050A;--c2:#671528;--c3:#0E0306;--m1:25deg;--motif:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20200%20200%27%3E%3Cpath%20d=%27M52%20122v-28a16%2016%200%200132%200v18h32v-18a16%2016%200%200132%200v28%27%20fill=%27none%27%20stroke=%27rgba%28238,186,43,0.22%29%27%20stroke-width=%271.3%27/%3E%3Cpath%20d=%27M52%20122v36h96v-36M52%20140h96M60%20158v14M148%20158v14%27%20fill=%27none%27%20stroke=%27rgba%28238,186,43,0.22%29%27%20stroke-width=%271.3%27/%3E%3C/svg%3E")}
.media--d{--c1:#130407;--c2:#340A14;--c3:#0B0204;--m1:200deg;--motif:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20200%20200%27%3E%3Cpath%20d=%27M100%20172V46%27%20fill=%27none%27%20stroke=%27rgba%28238,186,43,0.22%29%27%20stroke-width=%271.3%27/%3E%3Cpath%20d=%27M100%2066q26-16%2036%206q-26%2010-36-6M100%2098q-26-16-36%206q26%2010%2036-6M100%20130q23-13%2033%206q-23%209-33-6%27%20fill=%27none%27%20stroke=%27rgba%28238,186,43,0.22%29%27%20stroke-width=%271.3%27/%3E%3C/svg%3E")}
.media--stone{--c1:#F2D9DF;--c2:#EABDC8;--c3:#E09FAE;--motif:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20200%20200%27%3E%3Cpath%20d=%27M42%2042h116v116H42z%27%20fill=%27none%27%20stroke=%27rgba%28238,186,43,0.24%29%27%20stroke-width=%271.3%27/%3E%3Cpath%20d=%27M42%20100h116M100%2042v116%27%20fill=%27none%27%20stroke=%27rgba%2874,15,29,0.16%29%27%20stroke-width=%271%27/%3E%3C/svg%3E")}
.media--stone::before{opacity:.35}

/* ---------- Navbar ---------- */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:100;
  padding-block:26px;
  transition:padding var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.nav__logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:1.5rem;letter-spacing:.02em;color:var(--white);transition:color var(--dur-base) var(--ease)}
.nav__logo strong{font-weight:600}
.nav__mark{width:34px;height:34px;flex:none}
.nav__mark path{stroke:currentColor}

.nav__links{display:flex;align-items:center;gap:40px}
.nav__links a{
  position:relative;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.92);font-weight:500;padding-bottom:6px;
  transition:color var(--dur-base) var(--ease);
}
.nav__links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);
  transition:right var(--dur-fast) var(--ease);
}
.nav__links a:hover::after,.nav__links a.is-active::after{right:0}
.nav__links a.is-active{color:var(--gold)}

.nav__cta{margin-left:8px}
.nav__toggle{display:none;width:26px;height:18px;position:relative;color:var(--white);transition:color var(--dur-base) var(--ease)}
.nav__toggle::before{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}

/* ---------- Announcement marquee ----------
   Sits as a normal sibling immediately after <header class="nav">,
   NOT nested inside it. Originally lived inside the fixed header
   box as a second row (avoided a second position:fixed system,
   tracked nav's own height automatically) — but that meant it was
   permanently pinned to the top of the viewport at every scroll
   position, on top of a decorative element that doesn't need to stay
   visible the whole time someone's reading the page. Moved out to
   normal document flow instead: it scrolls away naturally with the
   rest of the content, while the nav above it keeps its own fixed
   behavior untouched. None of the rules below actually depended on
   being inside the fixed parent — no position, no z-index tied to
   .nav's stacking context — so nothing here needed to change, only
   where it sits in the document. */
.marquee{
  overflow:hidden;
  background:var(--charcoal);
  border-top:1px solid rgba(255,255,255,.08);
  padding-block:11px;
}
.marquee__track{
  display:flex;width:max-content;
  animation:marqueeScroll 30s linear infinite;
}
.marquee:hover .marquee__track{animation-duration:60s}
.marquee__seq{
  display:flex;flex-wrap:nowrap;align-items:center;flex:none;
  padding-inline:0;
}
.marquee__item{
  display:inline-flex;align-items:center;gap:20px;
  padding-inline:20px;
  font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;line-height:1.2;
}
.marquee__item::after{content:'';width:3px;height:3px;border-radius:50%;background:var(--gold-dim);flex:none}

@keyframes marqueeScroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

@media (max-width:600px){
  .marquee__track{animation-duration:24s}
  .marquee__item{font-size:.62rem;letter-spacing:.12em;gap:14px;padding-inline:14px}
}
@media (min-width:1440px){
  .marquee__track{animation-duration:36s}
}

@media (prefers-reduced-motion: reduce){
  .marquee__track{animation:none;width:100%;display:block}
  .marquee__seq:nth-child(n+2){display:none}
  .marquee__seq{
    display:block;width:100%;
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    text-align:center;
  }
}

.nav__toggle span{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease)}
.nav__toggle span:nth-child(1){top:0}
.nav__toggle span:nth-child(2){top:50%;transform:translateY(-50%)}
.nav__toggle span:nth-child(3){bottom:0}

.nav.is-scrolled{background:rgba(253,251,250,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--line-soft);box-shadow:0 8px 30px -20px rgba(74,15,29,.25);padding-block:18px}
.nav.is-scrolled .nav__logo,.nav.is-scrolled .nav__toggle{color:var(--ink)}
.nav.is-scrolled .nav__links a{color:var(--ink-70)}
.nav.is-scrolled .nav__links a.is-active{color:var(--gold-dim)}
.nav.is-scrolled .nav__cta .btn--on-dark{color:var(--ink);border-color:var(--ink)}
.nav.is-scrolled .nav__cta .btn--on-dark:hover{background:var(--ink);color:var(--white)}

/* page without dark hero (about/projects) — navbar starts solid */
.nav--solid .nav__row{position:relative}
.nav--solid .nav__row::before{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.96);
  z-index:-1;
}
.nav--solid{border-color:var(--line-soft);padding-block:18px}
.nav--solid .nav__logo,.nav--solid .nav__toggle{color:var(--ink)}
.nav--solid .nav__links a{color:var(--ink-70)}
.nav--solid .nav__links a.is-active{color:var(--gold-dim)}
.nav--solid .nav__cta .btn--on-dark{color:var(--ink);border-color:var(--ink)}
.nav--solid .nav__cta .btn--on-dark:hover{background:var(--ink);color:var(--white)}

@media (max-width:920px){
  .nav__toggle{display:block}

  /* Real backdrop — click-outside-to-close target, and visually
     dims whatever's still peeking past the drawer on short viewports. */
  .nav__backdrop{
    position:fixed;inset:0;z-index:1;
    background:rgba(31,6,12,.55);
    opacity:0;visibility:hidden;
    transition:opacity var(--dur-base) var(--ease), visibility 0s .4s;
  }
  .nav__backdrop.is-open{
    opacity:1;visibility:visible;
    transition:opacity var(--dur-base) var(--ease), visibility 0s 0s;
  }

  .nav__links{
    position:fixed;inset:0 0 auto 0;top:0;z-index:2;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--charcoal);
    padding:110px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
    max-height:100vh;max-height:100dvh;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateY(-100%);
    /* visibility (not just the off-screen transform) is what
       guarantees the closed drawer can never be tabbed into or
       accidentally hit-tested — opacity/transform alone can't fully
       rule that out. Delayed on close so the slide-out is still
       visible; instant on open so it's interactive immediately. */
    visibility:hidden;
    transition:transform var(--dur-slow) var(--ease), visibility 0s var(--dur-slow);
  }
  .nav__links.is-open{
    transform:translateY(0);
    visibility:visible;
    transition:transform var(--dur-slow) var(--ease), visibility 0s 0s;
  }
  #navLinks a{color:rgba(255,255,255,.68);font-size:1rem;width:100%;padding-block:16px;border-bottom:1px solid rgba(255,255,255,.1)}
  #navLinks a.is-active{color:var(--gold)}
  .nav__links a::after{display:none}
  .nav__cta{display:none}
  .nav__links .nav__cta-mobile{display:inline-flex;margin-top:24px}

  /* The floating WhatsApp button sits at z-index:200 — above the
     drawer's own stacking (z-index:100 on .nav). Left alone it would
     visually float on top of the open menu. Hide it while open. */
  body.nav-is-open .wa-float{
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--dur-fast) var(--ease), visibility 0s .3s;
  }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  color:var(--ink);overflow:hidden;background:var(--white);
}
.hero__media{position:absolute;inset:0}
.hero__media .media{aspect-ratio:auto;height:100%;--ar:auto}
.hero__scrim{position:absolute;inset:0;display:none;background:
  linear-gradient(180deg, rgba(74,15,29,.35) 0%, rgba(74,15,29,.15) 30%, rgba(74,15,29,.55) 72%, rgba(31,6,12,.92) 100%);
}
.hero__content{position:relative;z-index:2;padding:0 var(--gutter) clamp(64px,9vw,120px)}
.hero.pin-collage{justify-content:center}
.hero.pin-collage .hero__content{z-index:10;padding-bottom:0}
.hero__content .wrap{padding-inline:0}

/* Desktop only, homepage collage hero specifically: text sits dark-on-light
   in the negative space between the scattered photos (not white-on-photo
   like the mobile/About treatment), but on wide viewports the photos sit
   close enough to the text that bright highlights near the edges can eat
   into contrast. A soft, blurred warm-white glow directly behind just the
   text block fixes this without touching the photos, adding an overlay
   across the whole hero, or darkening anything — the collage stays fully
   visible and natural everywhere except immediately behind the words. */
@media (min-width:921px){
  .hero.pin-collage .hero__content::before{
    content:'';position:absolute;z-index:-1;
    inset:-40px -60px;
    background:radial-gradient(ellipse at center, rgba(253,251,250,.82) 0%, rgba(253,251,250,.5) 55%, rgba(253,251,250,0) 100%);
    filter:blur(4px);
    pointer-events:none;
  }
}

.hero__kicker{color:var(--gold-dim);margin-bottom:22px}
.hero h1{max-width:14ch;margin-bottom:22px}
.hero__sub{color:var(--ink-70);font-weight:300;max-width:44ch;font-size:clamp(1rem,1.3vw,1.2rem);margin-bottom:44px}
.hero__actions{display:flex;flex-wrap:wrap;gap:18px}
.hero__scroll{
  position:absolute;right:var(--gutter);bottom:40px;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  color:var(--ink-55);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
}
.hero__scroll-line{width:1px;height:56px;background:linear-gradient(180deg, var(--gold-dim), transparent);position:relative;overflow:hidden}
.hero__scroll-line::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--gold-dim);animation:scrollLine 2.2s var(--ease) infinite}
@keyframes scrollLine{0%{top:-100%}60%{top:100%}100%{top:100%}}
@media (prefers-reduced-motion:reduce){.hero__scroll-line::after{animation:none;top:0}}

/* ---------- Section shells ---------- */
.section{padding-block:clamp(80px,10vw,150px);scroll-margin-top:110px}

/* Seam bridge removed: this used to blend the hero directly into
   #about via a small negative margin + mask reveal, assuming #about
   was the hero's immediate next sibling in the DOM. That's no longer
   true — the marquee now sits between them (moved there per this
   round's brief) — so the negative margin would pull #about up into
   the marquee's box instead, showing a stray strip of the marquee's
   background rather than the intended hero-blend. The marquee's own
   solid background now serves as the transition between hero and
   content instead, which is the correct read of the new order. */
#about{
  position:relative;z-index:1;
  background:var(--white);
}

.cta::before{
  content:'';position:absolute;top:0;left:0;right:0;height:110px;z-index:0;
  background:linear-gradient(180deg, var(--white) 0%, transparent 100%);
  pointer-events:none;
}
.section--stone{background:var(--stone)}
.section--charcoal{background:var(--charcoal);color:var(--white)}
.section--charcoal p{color:rgba(255,255,255,.65)}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(48px,6vw,84px)}
.section-head__title{max-width:22ch}
.section-head__title h2{margin-top:var(--sp-5)}
.section-head .lede{margin-top:18px}

.divider{height:1px;background:var(--line);border:0}
.divider--dark{background:rgba(255,255,255,.14)}

/* ---------- About / editorial split ---------- */
.split{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(32px,6vw,110px);align-items:center}
.split--reverse{grid-template-columns:1fr .85fr}
.split--reverse .split__media{order:2}
.split__media{position:relative}
.split__media .media{--ar:4/5}
.split__frame{position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--gold);z-index:-1}
.split__figure{position:absolute;bottom:-30px;left:-30px;background:rgba(253,251,250,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.4);border-radius:24px;padding:26px 30px;box-shadow:0 30px 60px -30px rgba(74,15,29,.35);max-width:240px}
.split--reverse .split__figure{left:auto;right:-30px}
.split__figure .num{font-family:var(--serif);font-size:2.6rem;color:var(--gold-dim);line-height:1}
.split__figure .cap{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-55);margin-top:8px}
.split__body h2{margin-block:var(--sp-5) 26px}
.split__body p + p{margin-top:18px}
.split__stats{display:flex;gap:clamp(24px,4vw,56px);margin-top:42px;flex-wrap:wrap}
.split__stats div{border-left:1px solid var(--line);padding-left:18px}
.split__stats .n{font-family:var(--serif);font-size:2.1rem;color:var(--ink)}
.split__stats .l{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-55);margin-top:2px}

@media (max-width:860px){
  .split,.split--reverse{grid-template-columns:1fr;gap:56px}
  .split--reverse .split__media{order:0}
  .split__figure{position:static;margin-top:-70px;margin-left:24px;width:fit-content}
  .split--reverse .split__figure{margin-left:auto;margin-right:24px}
}

/* ---------- Services ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.service-card{
  background:var(--white);padding:clamp(32px,3vw,52px) clamp(28px,3vw,40px);
  display:flex;flex-direction:column;gap:20px;min-height:320px;
  transition:background-color var(--dur-base) var(--ease);
}
.service-card:hover{background:var(--stone)}
.service-card__top{display:flex;justify-content:space-between;align-items:flex-start}
.service-card__index{font-family:var(--serif);font-size:1rem;color:var(--gold-dim);letter-spacing:.04em}
.service-card__icon{width:38px;height:38px;color:var(--ink-35);transition:color var(--dur-base) var(--ease)}
.service-card:hover .service-card__icon{color:var(--gold-dim)}
.service-card h3{margin-top:auto}
.service-card p{font-size:.95rem}
.service-card__link{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-top:auto;padding-top:6px}
.service-card__link svg{width:13px;height:13px;transition:transform var(--dur-fast) var(--ease)}
.service-card:hover .service-card__link svg{transform:translateX(4px)}

@media (max-width:920px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.services{grid-template-columns:1fr}}

/* ---------- Why choose us ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr)}
.pillar{padding:0 clamp(16px,2vw,32px);text-align:left;border-left:1px solid var(--line)}
.pillar:first-child{border-left:0;padding-left:0}
.pillar__icon{width:40px;height:40px;color:var(--gold-dim);margin-bottom:22px}
.pillar h4{margin-bottom:10px}
.pillar p{font-size:.92rem}
@media (max-width:920px){
  .pillars{grid-template-columns:repeat(2,1fr);row-gap:48px}
  .pillar:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:560px){
  .pillars{grid-template-columns:1fr;row-gap:40px}
  .pillar{border-left:0;padding-left:0}
}

/* ---------- Testimonials ---------- */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.testi{padding:clamp(30px,3vw,42px) clamp(26px,2.6vw,36px);background:var(--white);border:1px solid var(--line);position:relative}
.testi__stars{display:flex;gap:6px;color:var(--gold-dim);margin-bottom:22px}
.testi__stars svg{width:14px;height:14px}
.testi p{font-family:var(--serif);font-style:italic;font-size:1.18rem;color:var(--ink);line-height:1.5}
.testi__who{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.testi__mono{width:42px;height:42px;border-radius:50%;background:var(--stone-dark);display:flex;align-items:center;justify-content:center;font-family:var(--serif);color:var(--gold-dim);font-size:1rem;flex:none}
.testi__who .name{font-size:.88rem;font-weight:600}
.testi__who .role{font-size:.76rem;color:var(--ink-55)}
@media (max-width:920px){.testimonials{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}

/* ---------- CTA band ---------- */
.cta{
  position:relative;overflow:hidden;
  padding-block:clamp(80px,10vw,130px);
  background:var(--charcoal);color:var(--white);text-align:center;
}
.cta__grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(238,186,43,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(238,186,43,.09) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at center, black, transparent 72%);
}
.cta__inner{position:relative;z-index:2;max-width:760px;margin-inline:auto}
.cta h2{margin-block:22px 34px}
.cta__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:18px}

/* ---------- Footer ---------- */
.footer{background:var(--charcoal-2);color:rgba(255,255,255,.72);padding-top:clamp(64px,7vw,100px)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(32px,4vw,60px);padding-bottom:64px}
.footer__logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:1.4rem;color:var(--white);margin-bottom:18px}
.footer__mark{width:30px;height:30px}
.footer__mark path{stroke:var(--gold)}
.footer p{color:rgba(255,255,255,.55);font-size:.92rem;max-width:32ch}
.footer h5{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin-bottom:20px;font-weight:600}
.footer__links li{margin-bottom:13px}
.footer__links a{font-size:.92rem;color:rgba(255,255,255,.62);transition:color var(--dur-base) var(--ease), padding-left var(--dur-base) var(--ease)}
.footer__links a:hover{color:var(--gold);padding-left:4px}
.footer__contact li{display:flex;gap:12px;margin-bottom:15px;font-size:.92rem;color:rgba(255,255,255,.62)}
.footer__contact svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--gold)}
.footer__social{display:flex;gap:12px;margin-top:22px}
.footer__social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease)}
.footer__social a:hover{border-color:var(--gold);background:var(--gold-10)}
.footer__social svg{width:16px;height:16px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:.8rem;color:rgba(255,255,255,.45)}
@media (max-width:920px){.footer__grid{grid-template-columns:1fr 1fr;row-gap:48px}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}

/* ---------- WhatsApp float button ---------- */
.wa-float{
  position:fixed;right:26px;bottom:calc(26px + env(safe-area-inset-bottom, 0px));z-index:200;
  width:60px;height:60px;border-radius:50%;
  background:var(--charcoal);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold);
  box-shadow:0 18px 34px -14px rgba(74,15,29,.5);
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.wa-float:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 22px 40px -12px rgba(74,15,29,.55)}
.wa-float svg{width:26px;height:26px}
.wa-float__ring{position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--gold);opacity:.6;animation:waPulse 2.6s var(--ease) infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-float__ring{animation:none;display:none}}
@media (max-width:560px){.wa-float{width:54px;height:54px;right:18px;bottom:calc(18px + env(safe-area-inset-bottom, 0px))}}

/* ---------- Page hero (About / Projects — shorter, non full-bleed-video style) ---------- */
.page-hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;color:var(--white);background:var(--charcoal);overflow:hidden;border-radius:24px 24px 0 0}
.page-hero__media{position:absolute;inset:0}
.page-hero__media .media{--ar:auto;height:100%}
.page-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(20,8,14,.42) 0%, rgba(18,8,13,.6) 35%, rgba(20,8,14,.92) 100%)}
@media (max-width:760px){
  /* .page-hero__content's top padding is a fixed 160px, which eats a
     much larger share of a short mobile hero (~62vh on a typical
     phone) than it does on tall desktop viewports — so the heading
     lands proportionally higher up, in a region the desktop-tuned
     gradient above doesn't cover strongly enough. Front-loaded
     specifically for that. */
  .page-hero__scrim{background:linear-gradient(180deg, rgba(20,8,14,.58) 0%, rgba(18,8,13,.72) 22%, rgba(20,8,14,.92) 100%)}
}
.page-hero__content{position:relative;z-index:2;padding:160px var(--gutter) 64px}
.page-hero__content .eyebrow{color:var(--gold)}
.page-hero__content .wrap{padding-inline:0}
.crumb{display:flex;gap:10px;align-items:center;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:20px}
.crumb a:hover{color:var(--gold)}
.crumb svg{width:11px;height:11px}
.page-hero h1{max-width:16ch}
.page-hero p.lede{color:rgba(255,255,255,.72);margin-top:18px}

/* ---------- Filter bar (Projects) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:12px}
.filter-btn{
  padding:.8em 1.5em;border-radius:var(--radius-pill);border:1px solid var(--line);
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink-55);
  transition:all var(--dur-base) var(--ease);
  min-height:44px;display:inline-flex;align-items:center;
}
.filter-btn:hover{border-color:var(--ink)}
.filter-btn.is-active{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* ---------- Project grid (Projects page) ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px)}
.pcard{cursor:pointer}
.pcard__media{position:relative;overflow:hidden}
.pcard__media .media{--ar:4/5}
.pcard__media:hover .media__zoom{transform:scale(1.08)}
.pcard__tag{position:absolute;top:18px;left:18px;z-index:3;background:rgba(74,15,29,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--white);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.25)}
.pcard__meta{display:flex;justify-content:space-between;align-items:flex-start;margin-top:20px;gap:12px}
.pcard__meta h3{font-size:1.35rem}
.pcard__meta .loc{font-size:.78rem;color:var(--ink-55);letter-spacing:.04em;margin-top:6px;display:flex;align-items:center;gap:6px}
.pcard__meta .loc svg{width:13px;height:13px}
.pcard__arrow{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;transition:all var(--dur-base) var(--ease)}
.pcard__arrow svg{width:13px;height:13px;transition:transform var(--dur-base) var(--ease)}
.pcard:hover .pcard__arrow{background:var(--ink);border-color:var(--ink);color:var(--white)}
.pcard:hover .pcard__arrow svg{transform:rotate(45deg)}
@media (max-width:920px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.pgrid{grid-template-columns:1fr}}

/* ---------- Project modal / lightbox ---------- */
.pmodal{position:fixed;inset:0;z-index:300;visibility:hidden;opacity:0;transition:opacity var(--dur-base) var(--ease), visibility 0s .5s}
.pmodal.is-open{visibility:visible;opacity:1;transition:opacity var(--dur-base) var(--ease)}
.pmodal__scrim{position:absolute;inset:0;background:rgba(31,6,12,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pmodal__panel{
  position:relative;z-index:2;max-width:1040px;margin:5vh auto;background:var(--white);
  max-height:90vh;overflow-y:auto;
  transform:translateY(24px);transition:transform var(--dur-slow) var(--ease);
}
.pmodal.is-open .pmodal__panel{transform:translateY(0)}
.pmodal__close{position:absolute;top:20px;right:20px;z-index:5;width:44px;height:44px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -10px rgba(74,15,29,.3)}
.pmodal__close svg{width:16px;height:16px}
.pmodal__hero .media{--ar:16/8}
.pmodal__body{padding:clamp(28px,4vw,56px)}
.pmodal__top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.pmodal__top .loc{display:flex;align-items:center;gap:8px;color:var(--ink-55);font-size:.85rem;margin-top:10px}
.pmodal__top .loc svg{width:13px;height:13px}
.pmodal__facts{display:flex;gap:32px;flex-wrap:wrap;margin:28px 0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pmodal__facts div .l{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55);margin-bottom:6px}
.pmodal__facts div .v{font-family:var(--serif);font-size:1.15rem}
.pmodal__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.pmodal__gallery .media{--ar:1/1}
body.no-scroll{overflow:hidden}
@media (max-width:700px){.pmodal__gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- About page extras ---------- */
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.value-card{background:var(--white);padding:clamp(32px,3vw,48px);display:flex;gap:24px}
.value-card__n{font-family:var(--serif);font-size:2.2rem;color:var(--gold-dim);flex:none;line-height:1}
@media (max-width:700px){.values{grid-template-columns:1fr}}

.timeline{position:relative;padding-left:clamp(28px,4vw,60px);border-left:1px solid var(--line)}
.tl-item{position:relative;padding-bottom:56px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:calc(-1 * clamp(28px,4vw,60px) - 5px);top:6px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.tl-item .yr{font-family:var(--serif);font-size:1.6rem;color:var(--gold-dim);margin-bottom:8px}
.tl-item h4{margin-bottom:8px}
.tl-item p{max-width:56ch}

.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,32px)}
.team-card .media{--ar:4/5;margin-bottom:20px}
.team-card h4{margin-bottom:4px}
.team-card .role{font-size:.78rem;color:var(--gold-dim);letter-spacing:.04em}
@media (max-width:920px){.team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.team{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}

.awards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.award-card{background:var(--white);padding:36px;text-align:center}
.award-card svg{width:34px;height:34px;color:var(--gold-dim);margin-bottom:16px}
.award-card .yr{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55);margin-top:8px}
@media (max-width:760px){.awards{grid-template-columns:1fr}}

/* ---------- Utilities ---------- */
.text-center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-lg{margin-top:clamp(48px,6vw,84px)}
.max-w{max-width:640px}

/* ---------- Page loader ---------- */
.loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--charcoal);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  transition:opacity .7s var(--ease), visibility 0s .7s;
}
.loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader__mark{width:38px;height:38px;color:var(--gold)}
.loader__mark svg{width:100%;height:100%}
.loader__word{
  font-family:var(--serif);font-size:1.05rem;letter-spacing:.04em;color:var(--white);
  text-align:center;
}
.loader__bar{width:150px;height:1px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
.loader__bar-fill{position:absolute;inset:0 auto 0 0;width:0%;background:var(--gold);transition:width .35s var(--ease)}
.loader__pct{
  font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.2em;
  color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;
}
@media (prefers-reduced-motion: reduce){
  .loader{transition:opacity .01ms linear, visibility 0s linear}
}

/* ---------- Orbit gallery (Projects page) ---------- */
.orbit{overflow:hidden}
.orbit-stage{position:relative;width:100%;height:340px;margin-top:24px}
.orbit-track{position:relative;width:100%;height:100%}
.orbit-card{
  position:absolute;top:50%;left:50%;
  width:168px;height:214px;
  border-radius:16px;overflow:hidden;
  box-shadow:0 20px 44px -20px rgba(74,15,29,.4);
  cursor:pointer;
  opacity:0;
}
.orbit-card__img{width:100%;height:100%;object-fit:cover;display:block}

/* Below hover-capable / desktop widths: plain horizontal scroll-snap
   strip. No JS positions or animates anything here — deliberately.
   Cards are visible immediately, full stop. */
@media (max-width:900px), (hover:none){
  .orbit-stage{height:auto;margin-top:20px}
  .orbit-track{
    display:flex;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding:4px var(--gutter) 20px;
    margin-inline:calc(var(--gutter) * -1);
    -webkit-overflow-scrolling:touch;
  }
  .orbit-track::-webkit-scrollbar{display:none}
  .orbit-card{
    position:static;opacity:1;
    flex:none;width:min(240px,72vw);height:300px;
    scroll-snap-align:center;
  }
}

/* ---------- In Motion — video showcase (About page) ----------
   Adapted from a component originally built for a different (Shopify)
   project — ported to plain vanilla HTML/CSS/JS, every Shopify/product
   dependency removed (the "Shop the Look" card, theme-editor settings,
   layout-mode switching — this is one deliberate carousel, not a
   configurable component). Colors/fonts remapped to this site's own
   existing tokens rather than the original's separate theme-editor
   variables. See evs.js for the behavior half.

   PLACEHOLDER CONTENT: no real video files exist yet, so each card's
   poster image (a real photo already used elsewhere on this site)
   stands in for now — every card is built to take a real .mp4 the
   moment one exists; see the HTML comment in about.html for exactly
   what to swap. */

.evs{overflow:hidden}
.evs .section-head{margin-bottom:clamp(28px,4vw,48px)}

.evs-grid{
  display:flex;gap:16px;
  overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;user-select:none;
  padding:4px var(--gutter) 8px;
  margin-inline:calc(var(--gutter) * -1);
}
.evs-grid::-webkit-scrollbar{display:none}
.evs-grid.is-dragging{cursor:grabbing;scroll-snap-type:none}
.evs-card{
  flex:0 0 clamp(200px,22vw,260px);scroll-snap-align:start;
  display:block;position:relative;
  opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--evs-i,0) * 70ms);
}
@media (max-width:640px){
  .evs-card{flex-basis:68vw}
}

.evs.is-in-view .evs-card{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .evs-card{opacity:1 !important;transform:none !important;transition:none !important}
}

.evs-media{
  position:relative;width:100%;aspect-ratio:9/16;
  overflow:hidden;border-radius:16px;
  background:var(--stone);
  transition:box-shadow var(--dur-base) var(--ease);
}
.evs-card:hover .evs-media{box-shadow:0 20px 44px -18px rgba(74,15,29,.4)}
.evs-card:hover .evs-video,
.evs-card:hover .evs-poster{transform:scale(1.04)}

.evs-video,.evs-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .6s var(--ease);
}
.evs-video::-webkit-media-controls,
.evs-video::-webkit-media-controls-enclosure,
.evs-video::-webkit-media-controls-panel,
.evs-video::-webkit-media-controls-play-button,
.evs-video::-webkit-media-controls-start-playback-button{
  display:none !important;-webkit-appearance:none;opacity:0 !important;pointer-events:none !important;
}
@media (prefers-reduced-motion: reduce){
  .evs-card:hover .evs-video,.evs-card:hover .evs-poster{transform:none}
}

.evs-skeleton{
  position:absolute;inset:0;z-index:5;
  background:linear-gradient(100deg, var(--stone) 20%, var(--white) 40%, var(--stone) 60%);
  background-size:200% 100%;
  animation:evsShimmer 1.6s ease-in-out infinite;
  transition:opacity .5s ease;pointer-events:none;
}
.evs-card.is-loaded .evs-skeleton{opacity:0}
@keyframes evsShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.evs-skeleton{animation:none}}

.evs-overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;gap:3px;
  background:linear-gradient(0deg, rgba(20,8,14,.75) 0%, rgba(20,8,14,0) 55%);
  pointer-events:none;transition:background var(--dur-base) var(--ease);
}
.evs-card:hover .evs-overlay{background:linear-gradient(0deg, rgba(20,8,14,.85) 0%, rgba(20,8,14,0) 60%)}
.evs-overlay__kicker{
  font-family:var(--sans);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.9;
}
.evs-overlay__title{font-family:var(--serif);font-size:1.05rem;color:var(--white);line-height:1.2}

.evs-sound{
  position:absolute;top:12px;right:12px;z-index:6;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,8,14,.5);color:var(--white);border:0;cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.evs-sound:hover,.evs-sound:focus-visible{background:rgba(20,8,14,.7)}
.evs-sound svg{width:14px;height:14px}

.evs-dot{
  position:absolute;top:0;left:0;z-index:4;
  width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  background:rgba(253,251,250,.92);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;will-change:transform;
}
.evs-dot.is-visible{opacity:1}
.evs-dot::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--charcoal)}
@media (hover:none){.evs-dot{display:none}}