/* ==========================================================================
   Verve Spaces — minimalist luxury stylesheet
   ========================================================================== */

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

:root{
  --ivory:#f6f2ea;
  --ivory-2:#efe8db;
  --paper:#fbf9f5;
  --line:#e0d6c4;
  --ink:#241f1a;
  --ink-soft:#5c5348;
  --brown:#7c6248;
  --brown-dark:#5a4632;
  --brass:#a9814f;
  --brass-light:#c9a86a;
  --brass-text:#7a5a34;
  --near-black:#1c1712;
  --footer-brown:#3a2a1a;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --container: 1220px;
  --radius: 2px;
  --transition: 420ms cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:18px;
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  margin:0 0 .5em;
  color:var(--near-black);
  letter-spacing:.01em;
}
p{ margin:0 0 1em; }
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
section{ position:relative; }

/* ---------- utility ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brass-text);
  font-weight:500;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:32px;
  height:1px;
  background:var(--brass);
  display:inline-block;
}
.lede{
  font-size:21px;
  line-height:1.7;
  color:var(--ink-soft);
  max-width:640px;
}
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-0{ margin-top:0; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  padding:17px 30px;
  border:1px solid var(--near-black);
  color:var(--near-black);
  background:transparent;
  border-radius:var(--radius);
  transition:background var(--transition), color var(--transition), border-color var(--transition);
  cursor:pointer;
  white-space:nowrap;
}
.btn svg{ width:15px; height:15px; transition:transform var(--transition); flex:none; }
.btn:hover{ background:var(--near-black); color:var(--ivory); }
.btn:hover svg{ transform:translateX(4px); }
.btn.light{ border-color:rgba(246,242,234,.55); color:var(--ivory); }
.btn.light:hover{ background:var(--ivory); color:var(--near-black); }
.btn.solid{ background:var(--near-black); color:var(--ivory); }
.btn.solid:hover{ background:var(--brown-dark); border-color:var(--brown-dark); }
.btn.brass{ border-color:var(--brass); color:var(--near-black); }
.btn.brass:hover{ background:var(--brass); border-color:var(--brass); color:var(--near-black); }

.section-head{ max-width:680px; margin-bottom:40px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(29px,4vw,43px); }

.pill-tag{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper);
  background:rgba(28,23,18,.72);
  padding:7px 14px;
  border-radius:1px;
  font-weight:500;
}

/* ---------- reveal on scroll ----------
   Content is visible by default. The hidden/animated state is only ever
   applied once JavaScript has confirmed it can run (html.js) — so a slow,
   blocked or failed script never leaves real content invisible. */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity 900ms ease, transform 900ms ease; }
.js .reveal.in{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:20px 0;
  transition:padding var(--transition), box-shadow var(--transition);
  /* The header is a solid, opaque bar from the very first paint — on
     purpose. It used to be transparent over the hero photo until scroll,
     which on some phones read as "the menu isn't there" (near-black nav
     text and a brass logo can disappear into a busy photo depending on
     what's behind them). Making it solid always removes that dependency
     entirely: the logo and menu are guaranteed visible the instant the
     page paints, on every device, with nothing left to a browser's
     handling of transparency/scroll timing.
     Also forces this fixed element onto its own GPU layer immediately,
     instead of on first scroll — some mobile Safari versions otherwise
     leave a position:fixed element unpainted until a scroll repaint. */
  background:rgba(246,242,234,.97);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 24px -18px rgba(28,23,18,.3);
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header.solid,
.site-header.menu-open{
  padding:14px 0;
  box-shadow:0 8px 30px -20px rgba(28,23,18,.4);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:50px; width:auto; transition:height var(--transition); }
.site-header.solid .brand img{ height:44px; }
.brand-word{ display:none; }

.nav-desktop{ display:flex; align-items:center; gap:38px; }
.nav-desktop a{
  font-size:14.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--near-black);
  position:relative;
  padding:6px 0;
}
.nav-desktop a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--brass);
  transition:right var(--transition);
}
.nav-desktop a:hover::after,
.nav-desktop a.active::after{ right:0; }
.nav-desktop a.active{ color:var(--brown-dark); }

.header-cta{ display:flex; align-items:center; gap:22px; }
.header-cta .tel{ display:none; font-size:14.5px; letter-spacing:.06em; }

.burger{
  display:none;
  width:26px; height:18px; position:relative;
  background:none; border:0; cursor:pointer; padding:0;
}
.burger span{
  position:absolute; left:0; right:0; height:1px; background:var(--near-black);
  transition:transform var(--transition), opacity var(--transition), top var(--transition);
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:8px; }
.burger span:nth-child(3){ top:16px; }
.menu-open .burger span:nth-child(1){ top:8px; transform:rotate(45deg); }
.menu-open .burger span:nth-child(2){ opacity:0; }
.menu-open .burger span:nth-child(3){ top:8px; transform:rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:999;
  background:var(--ivory);
  display:flex; flex-direction:column;
  justify-content:center;
  padding:32px;
  transform:translateY(-100%);
  transition:transform 520ms cubic-bezier(.22,.61,.36,1);
}
.mobile-nav.open{ transform:translateY(0); }
.mobile-nav ul{ display:flex; flex-direction:column; gap:6px; }
.mobile-nav a{
  font-family:var(--serif);
  font-size:38px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  display:block;
}
.mobile-nav .mn-foot{ margin-top:40px; font-size:15.5px; color:var(--ink-soft); }
.mobile-nav .mn-foot a{ font-family:var(--sans); font-size:15.5px; border:0; display:inline; padding:0; color:var(--brown-dark); }

/* ==========================================================================
   Hero
   ========================================================================== */
/* Hero is deliberately split into two independent bands — a photo band and
   a solid text band below it — rather than one full-height photo with text
   overlaid. The old overlay approach tied the text's position to viewport
   HEIGHT while the signage's position in the photo was fixed, so on short
   browser windows (a very common case on laptops) the two would collide and
   the brass "VERVE SPACES" wall signage baked into the photo would get
   hidden behind the marketing headline. Sizing the photo band off viewport
   WIDTH (vw) instead of height, and putting the text on its own solid strip
   underneath, means the signage and the text can never overlap regardless
   of window height. */
.hero{ position:relative; padding-top:96px; }
.hero-media{
  position:relative;
  width:100%;
  height:clamp(540px,56vw,760px);
  overflow:hidden;
  background:var(--near-black);
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
  display:block;
}
.hero-scrim{
  position:absolute; inset:0;
  /* Dark scrim layered above the video so the overlaid text stays legible
     against a bright, moving background — darkest through the middle band
     where the copy now sits, easing off toward the very top and bottom,
     with a soft left-to-right fade for the eyebrow/heading. */
  background:
    linear-gradient(180deg, rgba(15,12,9,.3) 0%, rgba(15,12,9,.42) 30%, rgba(15,12,9,.55) 62%, rgba(15,12,9,.72) 100%),
    linear-gradient(90deg, rgba(15,12,9,.5) 0%, rgba(15,12,9,0) 60%);
}
/* Desktop/tablet: the text band sits transparently over the video, raised
   toward the upper-middle of the frame rather than pinned to the bottom
   edge, so the copy reads as an overlay on the footage (scrim above
   handles legibility). On narrow phones this same markup switches to a
   solid band stacked below an uncropped video strip — see the 600px
   breakpoint. */
.hero-textband{
  position:absolute; inset:0;
  display:flex; align-items:center;
}
.hero-inner{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  color:var(--paper);
}
.hero-copy{ max-width:640px; }
.hero .eyebrow{ color:var(--brass-light); font-size:16px; }
.hero .eyebrow::before{ display:none; }
.hero h1{
  color:var(--paper);
  font-weight:400;
  font-size:clamp(32px,4.4vw,58px);
  max-width:16ch;
  margin:16px 0 18px;
}
.hero h1 em{ font-style:italic; color:var(--brass-light); }
.hero p.lede{ color:rgba(251,249,245,.86); }
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; margin-top:26px; }
.hero-meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  color:rgba(251,249,245,.85); font-size:13px; letter-spacing:.13em; text-transform:uppercase;
  text-align:right; white-space:nowrap;
}
.scroll-cue{
  display:flex; align-items:center; gap:12px;
  color:var(--ink-soft); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  padding:22px 32px; max-width:var(--container); margin:0 auto;
}
.scroll-cue .line{ width:1px; height:32px; background:var(--line); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--brass);
  animation:scrollcue 2.2s infinite ease-in-out;
}
@keyframes scrollcue{ 0%{ top:-100%;} 60%{ top:100%;} 100%{ top:100%;} }

/* page hero (interior pages) */
.page-hero{
  padding:0;
  background:var(--ivory-2);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.page-hero .container{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;
  padding-top:172px; padding-bottom:76px;
}
.page-hero h1{ font-size:clamp(36px,5.2vw,58px); font-weight:400; max-width:14ch; }
.page-hero .crumb{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:20px; display:block;
}
.page-hero .crumb a{ color:var(--brown-dark); }
.page-hero-media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:5/4; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ==========================================================================
   Intro / philosophy
   ========================================================================== */
.intro{ padding:80px 0; background:var(--ivory); }
.intro-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start; }
.intro-grid h2{ font-size:clamp(31px,4.4vw,49px); font-weight:400; }
.intro-media{ margin-top:34px; overflow:hidden; border-radius:var(--radius); }
.intro-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.intro-copy p{ font-size:19px; line-height:1.85; color:var(--ink-soft); }
.intro-copy p:first-of-type{ color:var(--ink); font-size:21px; }
.signature-row{
  display:flex; align-items:center; gap:22px; margin-top:34px; padding-top:34px; border-top:1px solid var(--line);
}
.signature-row img{ height:44px; width:auto; }
.signature-row span{ font-family:var(--serif); font-style:italic; font-size:20px; color:var(--brown-dark); }

/* ==========================================================================
   Expertise cards
   ========================================================================== */
.expertise{ padding:80px 0; background:var(--ivory-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.expertise-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.expertise-card{
  background:var(--ivory-2);
  display:flex; flex-direction:column;
  transition:background var(--transition);
}
.expertise-card:hover{ background:var(--paper); }
.expertise-media{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--line); }
.expertise-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s ease; }
.expertise-card:hover .expertise-media img{ transform:scale(1.06); }
.expertise-media .num{
  position:absolute; top:14px; left:14px; margin:0;
  padding:5px 11px;
  background:rgba(253,251,247,.92);
  font-family:var(--serif); font-size:14px; color:var(--brass-text); letter-spacing:.02em;
}
.expertise-body{ padding:30px 28px 36px; display:flex; flex-direction:column; flex:1; }
.expertise-card h3{ font-size:22px; margin-bottom:14px; }
.expertise-card .tagline{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--brown-dark); margin-bottom:12px; font-family:var(--sans); font-weight:500; }
.expertise-card p{ font-size:16.5px; line-height:1.7; color:var(--ink-soft); flex:1; }

/* ==========================================================================
   Process
   ========================================================================== */
.process{
  padding:84px 0;
  background:
    linear-gradient(120deg, rgba(15,12,9,.82) 15%, rgba(15,12,9,.62) 100%),
    url('../assets/img/studio-conference-wide.jpg') center/cover no-repeat;
}
.process .eyebrow{ color:var(--brass-light); }
.process .eyebrow::before{ background:var(--brass-light); }
.process h2{ color:var(--paper); }
.process .lede{ color:rgba(251,249,245,.86); }
.process-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.process-step{ position:relative; padding-top:28px; border-top:1px solid rgba(251,249,245,.25); }
.process-step .step-no{ font-family:var(--serif); font-size:44px; color:rgba(251,249,245,.22); position:absolute; top:-6px; right:0; line-height:1; }
.process-step h4{ font-size:20px; margin:20px 0 10px; color:var(--paper); }
.process-step p{ font-size:16.5px; color:rgba(251,249,245,.75); line-height:1.7; margin:0; }

/* ==========================================================================
   Work / Portfolio
   ========================================================================== */
.work-strip{ padding:80px 0; background:var(--ivory); }
.work-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:40px; flex-wrap:wrap; }
.work-head .section-head{ margin-bottom:0; }

.work-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:14vw; gap:22px; }
.work-item{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--ivory-2); }
.work-item img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms cubic-bezier(.22,.61,.36,1); }
.work-item:hover img{ transform:scale(1.07); }
.work-item .work-overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(0deg, rgba(20,16,12,.78) 0%, rgba(20,16,12,0) 55%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px; color:var(--paper);
  opacity:0; transition:opacity var(--transition);
}
.work-item:hover .work-overlay{ opacity:1; }
.work-item .work-cat{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-light); margin-bottom:6px; }
.work-item .work-title{ font-family:var(--serif); font-size:23px; }

.work-item.w2{ grid-column:span 2; }
.work-item.w3{ grid-column:span 3; }
.work-item.w4{ grid-column:span 4; }
.work-item.h2{ grid-row:span 2; }

/* work.html filters */
.work-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:50px; }
.work-filters button{
  font-family:var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  padding:10px 20px; border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  cursor:pointer; border-radius:20px; transition:all var(--transition);
}
.work-filters button:hover, .work-filters button.active{ background:var(--near-black); color:var(--ivory); border-color:var(--near-black); }
.work-item[data-cat]{ transition:opacity 400ms ease, transform 400ms ease; }
.work-item.hide{ display:none; }

/* ---------- work.html: project case studies ----------
   Each project is its own section — a banner shot, a short brief, then a
   plain, evenly-filled grid of that project's photos. No column/row
   spanning here on purpose: mixed spans are what caused the old single
   mega-grid to leave ragged, half-empty gaps whenever the image count
   didn't divide evenly. A banner (1 image) plus an auto-fill grid (any
   number of uniform tiles) can never produce a dangling gap. */
.project-block{ padding:44px 0 56px; scroll-margin-top:110px; }
.project-block[hidden]{ display:none; }
.project-block:not(:last-of-type){ border-bottom:1px solid var(--line); }
.project-head{ max-width:760px; margin-bottom:26px; }
.project-head h2{ font-size:clamp(27px,3.6vw,39px); font-weight:400; }
.project-head .lede{ font-size:17.5px; margin-top:10px; }
.proj-meta{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:16px; }
.proj-meta span{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); }
.proj-meta span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brass); flex:none; }

.project-banner.work-item{ display:block; width:100%; aspect-ratio:2.2/1; margin-bottom:18px; }
.project-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.project-grid .work-item{ aspect-ratio:4/3; }

@media (max-width:600px){
  .project-banner.work-item{ aspect-ratio:4/3; }
  .project-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:2000; background:rgba(15,12,9,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 320ms ease;
  padding:40px;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:min(1100px,92vw); max-height:82vh; object-fit:contain; box-shadow:0 40px 100px rgba(0,0,0,.5); }
.lightbox .lb-cap{ position:absolute; left:0; right:0; bottom:28px; text-align:center; color:var(--paper); font-family:var(--serif); font-size:18px; }
.lightbox .lb-close{
  position:absolute; top:28px; right:32px; width:42px; height:42px; border:1px solid rgba(251,249,245,.4); border-radius:50%;
  background:none; color:var(--paper); cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center;
}
.lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid rgba(251,249,245,.4); background:none; color:var(--paper); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lightbox .lb-prev{ left:24px; } .lightbox .lb-next{ right:24px; }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats{ background:var(--near-black); color:var(--paper); padding:88px 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
.stats-grid .num{ font-family:var(--serif); font-size:clamp(36px,5vw,58px); color:var(--brass-light); }
.stats-grid .lab{ font-size:13px; letter-spacing:.15em; text-transform:uppercase; color:rgba(251,249,245,.75); margin-top:10px; }

/* ==========================================================================
   CTA card (book consultation)
   ========================================================================== */
.cta-band{ padding:80px 0; }
.cta-card{
  color:var(--paper);
  border-radius:4px;
  padding:72px 64px;
  display:grid; grid-template-columns:1.3fr 0.7fr; gap:48px; align-items:center;
  position:relative; overflow:hidden;
  background:
    linear-gradient(125deg, rgba(28,23,18,.92) 0%, rgba(58,42,26,.85) 38%, rgba(90,70,50,.75) 68%, rgba(122,90,52,.65) 100%),
    url('../assets/img/mrgroup-billiards2.jpg') center/cover no-repeat;
}
.cta-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 20%, rgba(169,129,79,.28), transparent 55%);
}
.cta-card h2{ color:var(--paper); font-weight:400; font-size:clamp(29px,4vw,43px); position:relative; }
.cta-card p{ color:rgba(251,249,245,.75); position:relative; max-width:46ch; }
.cta-card .cta-actions{ position:relative; display:flex; justify-content:flex-end; }

/* ==========================================================================
   Team
   ========================================================================== */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.team-card{ text-align:left; }
.team-photo{
  aspect-ratio:4/5; background:var(--ivory-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; overflow:hidden; position:relative;
}
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-photo .initials{ font-family:var(--serif); font-size:56px; color:var(--brass-text); }
.team-card h3{ font-size:22px; margin-bottom:4px; }
.team-card .role{ font-size:13.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brown-dark); font-weight:500; }
.team-card .bio{ font-size:15.5px; color:var(--ink-soft); margin-top:12px; line-height:1.7; }

/* ==========================================================================
   Services page
   ========================================================================== */
.services-lead{ padding:0; background:var(--ivory-2); border-bottom:1px solid var(--line); overflow:hidden; }
.services-lead .container{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;
  padding-top:172px; padding-bottom:56px;
}
.services-lead-media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:5/4; }
.services-lead-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.service-nav{
  position:sticky; top:78px; z-index:50; background:var(--ivory); border-bottom:1px solid var(--line);
  padding:18px 0; overflow-x:auto;
}
.service-nav ul{ display:flex; gap:30px; white-space:nowrap; }
.service-nav a{ font-size:13.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; padding:6px 0; border-bottom:2px solid transparent; }
.service-nav a:hover, .service-nav a.active{ color:var(--near-black); border-color:var(--brass); }

.service-block{ padding:68px 0; border-bottom:1px solid var(--line); }
.service-block:nth-child(even){ background:var(--ivory-2); }
.service-block .sb-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:50px; align-items:start; }
.service-block h2{ font-size:clamp(27px,3.6vw,39px); font-weight:400; }
.service-block .tagline{ font-size:15px; letter-spacing:.09em; text-transform:uppercase; color:var(--brass-text); font-weight:500; margin-bottom:16px; }
.service-block p.desc{ color:var(--ink-soft); font-size:18.5px; line-height:1.8; }
.sb-media{ margin-bottom:26px; overflow:hidden; border-radius:var(--radius); }
.sb-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; }
.checklist{ display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; margin-top:8px; }
.checklist li{ font-size:16.5px; color:var(--ink); padding-left:22px; position:relative; line-height:1.5; }
.checklist li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:1px; background:var(--brass); }
.scope-list{ columns:2; column-gap:30px; margin-top:8px; }
.scope-list li{ font-size:16.5px; color:var(--ink); padding-left:22px; position:relative; line-height:1.6; break-inside:avoid; margin-bottom:10px; }
.scope-list li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:1px; background:var(--brass); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-wrap{ padding:80px 0; }
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:50px; }
.contact-info h2{ font-size:clamp(29px,4vw,43px); font-weight:400; }
.info-line{ display:flex; gap:18px; padding:22px 0; border-top:1px solid var(--line); }
.info-line:last-child{ border-bottom:1px solid var(--line); }
.info-line .lab{ width:120px; flex:none; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-text); padding-top:2px; }
.info-line .val{ font-size:17px; color:var(--ink); line-height:1.6; }
.info-line .val a:hover{ color:var(--brown-dark); }
.social-row{ display:flex; gap:16px; margin-top:30px; }
.social-row a{ width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
.social-row a:hover{ background:var(--near-black); border-color:var(--near-black); color:var(--ivory); }

.form-card{ background:var(--paper); border:1px solid var(--line); padding:48px; border-radius:4px; }
.field{ margin-bottom:22px; }
.field label{ display:block; font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px; }
.field input, .field select, .field textarea{
  width:100%; border:0; border-bottom:1px solid var(--line); background:transparent;
  padding:12px 2px; font-family:var(--sans); font-size:16.5px; color:var(--ink);
  transition:border-color var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brass); }
.field textarea{ resize:vertical; min-height:100px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.map-embed{ margin-top:60px; border:1px solid var(--line); }
.map-embed iframe{ width:100%; height:380px; border:0; display:block; filter:grayscale(.35) contrast(1.05); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--footer-brown); color:rgba(251,249,245,.82); padding:68px 0 0; }
.footer-top{ display:grid; grid-template-columns:1.3fr .8fr .8fr 1fr; gap:50px; padding-bottom:50px; border-bottom:1px solid rgba(251,249,245,.14); }
.footer-brand img{ height:58px; margin-bottom:20px; }
.footer-brand p{ color:rgba(251,249,245,.65); font-size:16.5px; line-height:1.8; max-width:34ch; }
.footer-col h5{ font-size:13px; letter-spacing:.15em; text-transform:uppercase; color:var(--brass-light); margin-bottom:22px; font-weight:500; }
.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col a{ font-size:15.5px; color:rgba(251,249,245,.76); }
.footer-col a:hover{ color:var(--paper); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:13.5px; color:rgba(251,249,245,.55); flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color:rgba(251,249,245,.5); }
.footer-bottom a:hover{ color:var(--paper); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .page-hero .container{ grid-template-columns:1fr; gap:36px; padding-top:150px; }
  .page-hero-media{ aspect-ratio:16/9; order:-1; }
  .services-lead .container{ grid-template-columns:1fr; gap:36px; padding-top:150px; }
  .services-lead-media{ aspect-ratio:16/9; order:-1; }
  .intro-grid{ grid-template-columns:1fr; gap:40px; }
  .expertise-grid{ grid-template-columns:repeat(3,1fr); }
  .process-row{ grid-template-columns:repeat(2,1fr); gap:50px 40px; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:44px 24px; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; gap:44px; }
  .service-block .sb-grid{ grid-template-columns:1fr; gap:34px; }
  .contact-grid{ grid-template-columns:1fr; }
  .cta-card{ grid-template-columns:1fr; text-align:left; }
  .cta-card .cta-actions{ justify-content:flex-start; }
}

@media (max-width:820px){
  .nav-desktop, .header-cta{ display:none; }
  .burger{ display:block; }
  .work-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:44vw; }
  .work-item.w2, .work-item.w3, .work-item.w4{ grid-column:span 2; }
  .work-item.h2{ grid-row:span 1; }
  .expertise-grid{ grid-template-columns:1fr 1fr; }
  .field-row{ grid-template-columns:1fr; }
  .checklist{ grid-template-columns:1fr; }
  .scope-list{ columns:1; }
}

@media (max-width:600px){
  .page-hero .container{ padding-top:118px; padding-bottom:40px; }
  .page-hero-media{ aspect-ratio:4/3; }
  .services-lead .container{ padding-top:118px; padding-bottom:40px; }
  .services-lead-media{ aspect-ratio:4/3; }
  .container{ padding:0 22px; }
  .brand img{ height:46px; }
  .site-header.solid .brand img{ height:40px; }
  .hero{ padding-top:86px; }
  /* A narrow phone is too short and narrow to overlay a full landscape
     video with a full hero's worth of copy and keep both legible, so the
     video runs as its own uncropped strip (exact 16:9, no crop, no
     letterboxing needed since the box now matches the video's own ratio)
     and the copy moves into a solid band directly beneath it — same
     near-black colour, so the two read as one continuous hero. */
  .hero-media{ height:auto; }
  .hero-video{ position:static; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
  .hero-scrim{
    background:linear-gradient(180deg, rgba(15,12,9,0) 60%, rgba(15,12,9,.5) 100%);
  }
  .hero-textband{ position:static; background:var(--near-black); padding:32px 0 40px; }
  .hero-inner{ display:block; padding-bottom:0; }
  .hero-copy{ max-width:none; }
  .hero h1{ font-size:clamp(30px,8.4vw,42px); margin:12px 0 14px; }
  .hero .lede{ font-size:16px; line-height:1.6; max-width:none; }
  .hero-actions{ margin-top:20px; gap:12px; }
  .hero-actions .btn{ padding:14px 22px; font-size:12px; }
  .hero-meta{ align-items:flex-start; text-align:left; margin-top:26px; padding-top:22px; border-top:1px solid rgba(251,249,245,.16); }
  .scroll-cue{ display:none; }
  .intro, .expertise, .process, .work-strip, .cta-band, .contact-wrap{ padding:56px 0; }
  .expertise-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .cta-card{ padding:44px 28px; }
  .form-card{ padding:30px 24px; }
  .work-grid{ grid-template-columns:1fr; grid-auto-rows:66vw; }
  .work-item.w2, .work-item.w3, .work-item.w4{ grid-column:span 1; }
}