/* ==========================================================================
   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;
  --near-black:#1c1712;

  --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);
  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:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:500;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:32px;
  height:1px;
  background:var(--brass);
  display:inline-block;
}
.lede{
  font-size:19px;
  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:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  padding:16px 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:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(30px,4vw,44px); }

.pill-tag{
  font-size:11px;
  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:26px 0;
  transition:padding var(--transition), background var(--transition), box-shadow var(--transition), border-color var(--transition);
  border-bottom:1px solid transparent;
  /* Forces this fixed element onto its own GPU layer immediately, instead
     of on first scroll. Without it, some mobile Safari versions leave a
     position:fixed header unpainted (present in the DOM, invisible on
     screen) until a scroll event forces a repaint. */
  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{
  background:rgba(246,242,234,.96);
  backdrop-filter:blur(10px);
  padding:16px 0;
  border-bottom-color:var(--line);
  box-shadow:0 8px 30px -20px rgba(28,23,18,.4);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:40px; width:auto; transition:height var(--transition); }
.site-header.solid .brand img{ height:34px; }
.brand-word{ display:none; }

.nav-desktop{ display:flex; align-items:center; gap:38px; }
.nav-desktop a{
  font-size:13px;
  letter-spacing:.14em;
  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:13px; 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:14px; color:var(--ink-soft); }
.mobile-nav .mn-foot a{ font-family:var(--sans); font-size:14px; border:0; display:inline; padding:0; color:var(--brown-dark); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  min-height:100vh;
  /* iOS/Android address-bar collapse makes 100vh taller than the real
     visible area on first paint, which pushes this bottom-aligned content
     below the fold until the user scrolls. calc(var(--vh)) is corrected by
     main.js for browsers without dvh support; 100dvh (modern browsers)
     wins outright and needs no JS at all. Each line is ignored by browsers
     that don't understand it, so this only ever improves on 100vh. */
  min-height:calc(var(--vh, 1vh) * 100);
  min-height:100dvh;
  display:flex;
  align-items:flex-end;
  position:relative;
  padding-top:140px;
  padding-bottom:0;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  /* No transform here on purpose — a transform on an element that sits
     alongside a position:fixed header is a known trigger for mobile Safari
     failing to paint the fixed element until the page is scrolled. */
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,12,.34) 0%, rgba(20,16,12,.14) 38%, rgba(20,16,12,.62) 100%);
}
@media (max-width:600px){
  /* Shift the crop away from the wall signage so overlaid headline text
     never has to compete with lettering baked into the photo, and darken
     the whole frame a little more for legibility on small screens. */
  .hero-bg{ background-position:82% center; }
  .hero-bg::after{ background:linear-gradient(180deg, rgba(15,12,9,.5) 0%, rgba(15,12,9,.34) 34%, rgba(15,12,9,.74) 100%); }
}
.hero-inner{
  position:relative; z-index:2;
  width:100%;
  padding-bottom:96px;
  color:var(--paper);
}
.hero .eyebrow{ color:var(--brass-light); }
.hero .eyebrow::before{ background:var(--brass-light); }
.hero h1{
  color:var(--paper);
  font-weight:400;
  font-size:clamp(44px,7.2vw,92px);
  max-width:16ch;
  margin-bottom:26px;
}
.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:34px; }
.hero-meta{
  position:absolute; right:32px; bottom:96px; z-index:2;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  color:rgba(251,249,245,.8); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.scroll-cue{
  position:absolute; left:32px; bottom:36px; z-index:2;
  display:flex; align-items:center; gap:12px;
  color:rgba(251,249,245,.72); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:46px; background:rgba(251,249,245,.4); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--brass-light);
  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:196px 0 96px;
  background:var(--ivory-2);
  border-bottom:1px solid var(--line);
}
.page-hero h1{ font-size:clamp(38px,6vw,66px); font-weight:400; max-width:14ch; }
.page-hero .crumb{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:20px; display:block;
}
.page-hero .crumb a{ color:var(--brown-dark); }

/* ==========================================================================
   Intro / philosophy
   ========================================================================== */
.intro{ padding:120px 0; background:var(--ivory); }
.intro-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; align-items:start; }
.intro-grid h2{ font-size:clamp(32px,4.4vw,50px); font-weight:400; }
.intro-copy p{ font-size:17px; line-height:1.85; color:var(--ink-soft); }
.intro-copy p:first-of-type{ color:var(--ink); font-size:19px; }
.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:120px 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);
  padding:44px 30px 38px;
  display:flex; flex-direction:column;
  transition:background var(--transition);
}
.expertise-card:hover{ background:var(--paper); }
.expertise-card .num{ font-family:var(--serif); font-size:15px; color:var(--brass); margin-bottom:26px; }
.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:14px; font-family:var(--sans); font-weight:500; }
.expertise-card p{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); flex:1; }

/* ==========================================================================
   Process
   ========================================================================== */
.process{ padding:120px 0; }
.process-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.process-step{ position:relative; padding-top:28px; border-top:1px solid var(--line); }
.process-step .step-no{ font-family:var(--serif); font-size:44px; color:var(--line); position:absolute; top:-6px; right:0; line-height:1; }
.process-step h4{ font-size:19px; margin:20px 0 10px; }
.process-step p{ font-size:14px; color:var(--ink-soft); line-height:1.7; margin:0; }

/* ==========================================================================
   Work / Portfolio
   ========================================================================== */
.work-strip{ padding:120px 0; background:var(--ivory); }
.work-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:56px; 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:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-light); margin-bottom:6px; }
.work-item .work-title{ font-family:var(--serif); font-size:22px; }

.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:12px; letter-spacing:.12em; 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; }

/* 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:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(251,249,245,.7); margin-top:10px; }

/* ==========================================================================
   CTA card (book consultation)
   ========================================================================== */
.cta-band{ padding:120px 0; }
.cta-card{
  background:var(--near-black); 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;
}
.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(30px,4vw,44px); 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:34px; }
.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 .initials{ font-family:var(--serif); font-size:56px; color:var(--brass); }
.team-card h3{ font-size:21px; margin-bottom:4px; }
.team-card .role{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brown-dark); font-weight:500; }
.team-card .bio{ font-size:14px; color:var(--ink-soft); margin-top:12px; line-height:1.7; }

/* ==========================================================================
   Services page
   ========================================================================== */
.services-lead{ padding:190px 0 40px; background:var(--ivory-2); border-bottom:1px solid var(--line); }
.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:12.5px; letter-spacing:.1em; 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:96px 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:70px; align-items:start; }
.service-block h2{ font-size:clamp(28px,3.6vw,40px); font-weight:400; }
.service-block .tagline{ font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); font-weight:500; margin-bottom:16px; }
.service-block p.desc{ color:var(--ink-soft); font-size:16.5px; line-height:1.8; }
.checklist{ display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; margin-top:8px; }
.checklist li{ font-size:15px; 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:15px; 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:120px 0; }
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; }
.contact-info h2{ font-size:clamp(30px,4vw,44px); 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:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); padding-top:2px; }
.info-line .val{ font-size:16px; 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:12px; letter-spacing:.1em; 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:15.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(--near-black); color:rgba(251,249,245,.82); padding:96px 0 0; }
.footer-top{ display:grid; grid-template-columns:1.3fr .8fr .8fr 1fr; gap:50px; padding-bottom:70px; border-bottom:1px solid rgba(251,249,245,.14); }
.footer-brand img{ height:46px; margin-bottom:20px; }
.footer-brand p{ color:rgba(251,249,245,.6); font-size:14.5px; line-height:1.8; max-width:34ch; }
.footer-col h5{ font-size:12px; letter-spacing:.16em; 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:14.5px; color:rgba(251,249,245,.72); }
.footer-col a:hover{ color:var(--paper); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:12.5px; color:rgba(251,249,245,.5); 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){
  .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){
  .container{ padding:0 22px; }
  .hero{ padding-top:110px; }
  .hero-inner{ padding-bottom:56px; }
  .hero h1{ font-size:clamp(38px,10vw,52px); margin-bottom:18px; }
  .hero .lede{ font-size:16px; line-height:1.6; }
  .hero-actions{ margin-top:24px; gap:12px; }
  .hero-actions .btn{ padding:14px 22px; font-size:12px; }
  .hero-meta{ display:none; }
  .scroll-cue{ display:none; }
  .intro, .expertise, .process, .work-strip, .cta-band, .contact-wrap{ padding:80px 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; }
}