/* ============================================================
   NEW IMAGE CONSTRUCTION & REMODELING — Design System
   ============================================================ */

:root{
  --void:#0a0908;
  --ink:#141210;
  --ink-soft:#262220;
  --charcoal:#3a3532;
  --orange:#e2842d;
  --orange-deep:#c96a1a;
  --gold:#f0b54a;
  --ember:#8e3a1f;
  --tan:#e2c6b7;
  --tan-deep:#d4ac96;
  --cream:#f7f3ee;
  --cream-deep:#efe6dc;
  --white:#ffffff;
  --graphite:#5c564c;
  --line:#e5dcd0;

  --font-head:'Jost', 'Century Gothic', 'Avenir Next', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --section-pad: clamp(5rem, 8vw, 7.5rem);
  --container-w: 1240px;

  --ease: cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ overflow-x:clip; scroll-behavior:smooth; }
body{
  overflow-x:clip;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

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(--font-head); font-weight:600; text-transform:uppercase; letter-spacing:.01em; line-height:1.15; margin:0; color:var(--ink); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

.container{ max-width:var(--container-w); margin:0 auto; padding:0 1.5rem; }
.section{ padding:var(--section-pad) 0; }
@media (max-width:720px){
  :root{ --section-pad:4rem; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-head);
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange-deep); font-weight:600; margin:0 0 1rem;
}
.eyebrow::before{ content:''; width:28px; height:2px; background:var(--orange); }

.section-title{ font-size:clamp(2.1rem,4.6vw,3.6rem); max-width:22ch; letter-spacing:-.01em; }
.section-lede{ font-size:1.1rem; color:var(--graphite); max-width:56ch; margin-top:1rem; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.9rem; border-radius:2px; border:1.5px solid var(--ink);
  background:transparent; color:var(--ink);
  font-family:var(--font-head);
  font-size:.85rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.btn:hover{ background:var(--ink); color:var(--white); transform:translateY(-2px); }
.btn .arrow{ width:15px; height:9px; flex:none; transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-solid{ background:var(--orange); border-color:var(--orange); color:var(--white); }
.btn-solid:hover{ background:var(--orange-deep); border-color:var(--orange-deep); }
.btn-light{ border-color:var(--white); color:var(--white); }
.btn-light:hover{ background:var(--white); color:var(--ink); }
.btn-row{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------------- Header / Nav ---------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.75rem;
  transition:padding .3s var(--ease);
}
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(20,18,16,0);
  transition:background .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header.is-scrolled::before{
  background:rgba(14,12,10,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(246,241,234,.09);
}
.site-header.is-scrolled{ padding:.55rem 1.75rem; }
.site-header.is-scrolled .logo img{ height:38px; }
.logo img{ transition:height .3s var(--ease); }

/* Over the cinematic hero the header stays weightless — the film's own
   top scrim carries the contrast, so no panel is needed. */
.site-header.is-over-hero::before{ background:rgba(20,18,16,0); backdrop-filter:none; border-bottom-color:transparent; }

.logo{ display:flex; align-items:center; gap:.6rem; z-index:2; }
.logo img{ height:46px; width:auto; }

.main-nav{
  display:flex; align-items:center; gap:2.1rem;
}
.main-nav a{
  color:var(--white); font-family:var(--font-head);
  font-size:.85rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.4rem 0; position:relative;
}
.main-nav a:not(.btn)::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--orange); transition:width .25s var(--ease);
}
.main-nav a:not(.btn):hover::after{ width:100%; }
.main-nav .nav-cta{
  border:1.5px solid var(--orange); color:var(--white);
  padding:.7rem 1.4rem; border-radius:2px;
}
.main-nav .nav-cta:hover{ background:var(--orange); color:var(--ink); }

.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; background:transparent; border:none; z-index:2;
}
.menu-toggle span{ display:block; width:24px; height:2px; background:var(--white); transition:transform .25s var(--ease), opacity .25s var(--ease); }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .menu-toggle{ display:flex; }
  .main-nav{
    position:fixed; inset:0; z-index:1;
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:1.4rem; padding:2rem 2rem;
    background:var(--ink);
    transform:translateX(100%); transition:transform .35s var(--ease);
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ font-size:1.4rem; }
  .main-nav .nav-cta{ margin-top:1rem; }
}

/* ============================================================
   CINEMATIC HERO — scroll-scrubbed video sequence
   Base rules below describe the STATIC fallback (no JS, reduced
   motion, save-data). `.is-cinema` upgrades it to the sticky,
   scroll-driven experience; JS adds that class only when safe.
   ============================================================ */
/* The sticky media layer is scoped to the hero alone now — it used to
   also span the "Our Philosophy" line after it, which meant that section
   needed ~100svh of already-solid buffer for the sticky release to clear
   invisibly (a `position:sticky` element releases over its own last
   ~100vh, tied to its height, not something a shorter box can avoid).
   That buffer read as a dead, unexplained gap rather than a pause, so
   the philosophy line is now a plain section below, with the same
   scroll-reveal every other section on the page uses — no sticky
   hand-off to manage, nothing to keep in sync. */
.cinema{
  --hero-track:520svh;
  --hero-pan:20%;          /* object-position Y,  driven by JS  */
  --hero-pan-still:60%;
  --hero-zoom:1;           /* slow push, driven by JS           */
  --hero-fg:#f6f1ea;
  position:relative;
  background:var(--void);
  color:var(--hero-fg);
  isolation:isolate;
}
.hero-cinema{ position:relative; z-index:1; }
.hero-stage{ position:relative; }

/* ---- skip link ---- */
.hero-skip{
  position:absolute; top:5.2rem; left:50%; transform:translate(-50%,-460%);
  z-index:40; padding:.7rem 1.2rem; background:var(--white); color:var(--ink);
  font-family:var(--font-head); font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; border-radius:2px;
  transition:transform .25s var(--ease);
}
.hero-skip:focus-visible{ transform:translate(-50%,0); }

/* ---- media layer ---- */
.hero-media{
  position:sticky; top:0; z-index:0;
  height:100vh; height:100dvh;
  overflow:clip; background:var(--void);
}
.hero-still{ position:absolute; inset:0; display:block; }
.hero-still img,
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.hero-video{ object-position:50% var(--hero-pan); }
.hero-still img{ object-position:50% var(--hero-pan-still); }
/* A slow push keeps the frame alive through the calm opening seconds, where
   the footage itself barely moves. Zoom only ever crops tighter than the
   computed band, so it cannot expose the film's burned-in lock-up. */
.hero-still img,
.hero-video{ transform:scale(var(--hero-zoom)); transform-origin:50% 50%; }
.hero-video{
  z-index:1; opacity:0; border:0; background:transparent;
  transition:opacity .9s var(--ease);
}
.is-video-ready .hero-video{ opacity:1; }
.is-video-failed .hero-video{ display:none; }

/* Readability without drowning the footage: a light top scrim for the
   header, a heavier bottom scrim for the copy, plus a soft vignette. */
.hero-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-scrim::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,9,8,.58) 0%, rgba(10,9,8,.16) 18%, rgba(10,9,8,0) 34%),
    linear-gradient(0deg, rgba(10,9,8,.88) 0%, rgba(10,9,8,.55) 22%, rgba(10,9,8,.12) 46%, rgba(10,9,8,0) 62%);
}
.hero-scrim::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(130% 92% at 50% 42%, rgba(10,9,8,0) 42%, rgba(10,9,8,.5) 100%);
}
.hero-grain{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---- chapters ---- */
.hero-chapters{ position:relative; z-index:4; }
.hero-chapter{
  display:flex; align-items:flex-end; min-height:76svh;
}
.hero-chapter-inner{
  width:100%; max-width:var(--container-w); margin:0 auto;
  padding:0 1.5rem 7vh;
}

.hero-kicker{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--font-head); font-size:.76rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.5rem;
}
.hero-kicker::after{
  content:''; flex:0 0 auto; width:44px; height:1px;
  background:linear-gradient(90deg, var(--orange), rgba(226,132,45,0));
}
.hero-index{ color:rgba(246,241,234,.5); font-variant-numeric:tabular-nums; }

.hero-wordmark{ color:var(--hero-fg); display:block; margin:0; }
.hero-wordmark-a,
.hero-wordmark-b{ display:block; }
.hero-wordmark-a{
  font-size:clamp(3rem,7.4vw,6.4rem); line-height:.94; letter-spacing:-.005em;
}
.hero-wordmark-b{
  font-size:clamp(.92rem,1.68vw,1.5rem); font-weight:500;
  letter-spacing:.34em; color:rgba(246,241,234,.78); margin-top:1rem;
}
.hero-tagline{
  font-family:var(--font-head); font-size:clamp(1rem,1.5vw,1.3rem);
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange);
  margin-top:1.6rem;
}
.hero-lede{
  font-size:clamp(.95rem,1.15vw,1.08rem); color:rgba(246,241,234,.72);
  max-width:46ch; margin-top:1.4rem;
}

.hero-title{
  color:var(--hero-fg);
  font-size:clamp(3.2rem,9vw,8rem); line-height:.9; letter-spacing:-.01em;
}
.hero-title--sm{ font-size:clamp(2.2rem,5.4vw,4.6rem); line-height:.98; }
.hero-line{
  font-size:clamp(1rem,1.45vw,1.35rem); color:rgba(246,241,234,.82);
  max-width:40ch; margin-top:1.5rem; line-height:1.5;
}

.hero-services{
  display:flex; flex-wrap:wrap; gap:.6rem 2.4rem; margin-top:1.8rem;
}
.hero-services a{
  display:inline-block; position:relative; padding:.25rem 0;
  font-family:var(--font-head); font-weight:600;
  font-size:clamp(1.1rem,2.1vw,1.9rem); letter-spacing:.06em; text-transform:uppercase;
  color:rgba(246,241,234,.86);
  transition:color .25s var(--ease);
}
.hero-services a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--orange); transition:width .3s var(--ease);
}
.hero-services a:hover{ color:var(--white); }
.hero-services a:hover::after{ width:100%; }

.hero-actions{ display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }

/* ---- chapter rail ---- */
.hero-rail{ display:none; }
.hero-rail ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem; }
.hero-rail button{
  display:flex; align-items:center; gap:.8rem;
  padding:.45rem 0; background:none; border:0; color:inherit;
}
.hero-rail-bar{
  display:block; width:22px; height:2px; flex:0 0 auto;
  background:rgba(246,241,234,.2); transition:width .3s var(--ease), background .3s var(--ease);
}
.hero-rail-text{
  font-family:var(--font-head); font-size:.64rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(246,241,234,.32);
  transition:color .3s var(--ease);
}
.hero-rail button:hover .hero-rail-bar{ background:rgba(246,241,234,.6); }
.hero-rail button:hover .hero-rail-text{ color:rgba(246,241,234,.85); }
.hero-rail li.is-current .hero-rail-bar{ width:42px; background:var(--orange); }
.hero-rail li.is-current .hero-rail-text{ color:var(--hero-fg); }

/* ---- scroll cue ---- */
.hero-cue{ display:none; }
.hero-cue-line{
  display:block; width:1px; height:44px; overflow:hidden;
  background:rgba(246,241,234,.22); position:relative;
}
.hero-cue-line::after{
  content:''; position:absolute; left:0; top:-44px; width:1px; height:44px;
  background:linear-gradient(180deg, rgba(226,132,45,0), var(--orange));
  animation:heroCue 2.6s var(--ease) infinite;
}
@keyframes heroCue{ 0%{ transform:translateY(0);} 60%,100%{ transform:translateY(88px);} }

/* ============================================================
   CINEMA MODE — enabled by JS
   ============================================================ */
.is-cinema .hero-cinema{ height:var(--hero-track); }
/* hero-media (the sticky video layer) is the first child of .hero-cinema
   now and takes up its own 100vh in that box's normal flow. hero-stage
   needs to sit on top of it from scroll position zero, not from 100vh
   down, so it gets pulled back up by the same amount — the same trick
   .hero-cinema itself used to need when hero-media was its own sibling. */
.is-cinema .hero-stage{
  position:sticky; top:0;
  height:100svh; height:100dvh;
  margin-top:-100vh; margin-top:-100dvh;
  overflow:clip;
}
.is-cinema .hero-chapters{ position:absolute; inset:0; margin:0; }
.is-cinema .hero-chapter{
  position:absolute; inset:0; min-height:0;
  opacity:0; pointer-events:none;
  transform-origin:0 100%;
  /* `filter` here makes the browser hold a filter buffer for all six
     viewport-sized chapters permanently, which measured at 43fps against
     60 without it. opacity and transform promote cheaply. */
  will-change:opacity, transform;
  backface-visibility:hidden;
}
.is-cinema .hero-chapter.is-off{ visibility:hidden; }
.is-cinema .hero-chapter.is-live{ pointer-events:auto; }
.is-cinema .hero-chapter-inner{ padding-bottom:12vh; }

.is-cinema .hero-rail{
  display:block; position:absolute; z-index:6;
  right:max(1.75rem, calc((100% - var(--container-w)) / 2 + 1.5rem));
  top:50%; transform:translateY(-50%);
}
.is-cinema .hero-cue{
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  position:absolute; z-index:6; left:50%; bottom:2.2rem; transform:translateX(-50%);
  font-family:var(--font-head); font-size:.68rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(246,241,234,.5);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.is-cinema.is-cue-off .hero-cue{ opacity:0; transform:translate(-50%,12px); pointer-events:none; }

/* Buffering hint for scrolling ahead of what has loaded */
.is-cinema .hero-media::after{
  content:''; position:absolute; z-index:5; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--orange), var(--gold));
  transform:scaleX(0); transform-origin:0 50%;
  opacity:0; transition:opacity .4s var(--ease);
}
.is-cinema.is-buffering .hero-media::after{ opacity:.8; animation:heroBuf 1.4s var(--ease) infinite; }
@keyframes heroBuf{ 0%{transform:scaleX(0);} 50%{transform:scaleX(.7);} 100%{transform:scaleX(1); opacity:0;} }

/* ---- responsive ---- */
@media (max-width:900px){
  .hero-cinema{ --hero-track:480svh; }
  /* A side rail would sit straight on top of the film's own lock-up, so
     narrow screens get a segmented bar along the bottom edge instead. */
  .is-cinema .hero-rail{
    right:auto; left:1.35rem; top:auto; bottom:1.5rem; transform:none;
  }
  .hero-rail ol{ flex-direction:row; gap:.45rem; }
  .hero-rail button{ padding:.6rem 0; }
  .hero-rail-text{
    position:absolute; width:1px; height:1px; margin:-1px;
    padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .hero-rail-bar{ width:26px; }
  .hero-rail li.is-current .hero-rail-bar{ width:26px; height:2px; }
  /* lift the cue clear of the bottom rail */
  .is-cinema .hero-cue{ bottom:4.4rem; gap:.7rem; }
  .hero-cue-line{ height:28px; }
  .is-cinema .hero-chapter-inner{ padding-bottom:5.6rem; }
  .hero-chapter-inner{ padding-left:1.35rem; padding-right:1.35rem; }
}

/* Portrait viewports show the full vertical composition, in which the
   film already renders the logo lock-up. Keep the <h1> for search and
   assistive tech, but don't print the same words twice on screen. */
@media (max-aspect-ratio: 29/20){
  .hero-wordmark,
  .hero-tagline{
    position:absolute; width:1px; height:1px; margin:-1px;
    padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .hero-chapter--intro .hero-lede{
    font-size:clamp(1.02rem,4.1vw,1.3rem); line-height:1.45;
    color:var(--hero-fg); max-width:24ch; margin-top:0;
  }
}

@media (max-width:560px){
  .hero-title{ font-size:clamp(2.2rem,12.5vw,4.4rem); }
  .hero-title--sm{ font-size:clamp(2rem,9vw,2.8rem); }
  .hero-services{ gap:.35rem 1.6rem; }
  .hero-actions{ gap:.7rem; }
  .hero-actions .btn{ flex:1 1 100%; }
}

/* ---- static fallback polish ---- */
.cinema:not(.is-cinema) .hero-chapter:first-child{ min-height:100svh; }
.cinema:not(.is-cinema) .hero-chapter{
  padding-top:6vh;
  background:linear-gradient(180deg, rgba(10,9,8,0), rgba(10,9,8,.55));
}

@media (prefers-reduced-motion: reduce){
  .hero-cue-line::after{ animation:none; }
  .is-cinema .hero-chapter{ transition:none; }
}

/* ============================================================
   HERO → PAGE BRIDGE
   Carries the film's darkness into the first editorial section so
   the two worlds read as one continuous scroll.
   ============================================================ */
.hero-outro{
  position:relative; text-align:center;
  padding:clamp(6rem,14vh,10rem) 0 clamp(6rem,13vh,9rem);
  background:linear-gradient(180deg, var(--void) 0%, #0d0b09 44%, #241d16 70%, #7d6c58 90%, var(--cream) 100%);
}
.hero-outro .eyebrow{ color:var(--gold); justify-content:center; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.hero-outro .eyebrow::before{ background:var(--orange); }
.hero-outro-statement{
  font-family:var(--font-head); text-transform:none; font-weight:500;
  font-size:clamp(1.6rem,3.6vw,2.6rem); line-height:1.4;
  max-width:20ch; margin:1.4rem auto 0; color:#f2ece3;
  /* This section's own background is a dark-to-cream gradient, so the
     text's exact position over it can shift a little across breakpoints
     and content changes — a soft dark shadow keeps it legible without
     needing pixel-perfect alignment between the two. */
  text-shadow:0 2px 16px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.6);
}
.hero-outro-statement .orange{ color:var(--orange); }

/* ---------------- Data-animate ---------------- */
[data-animate]{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-animate].is-visible{ opacity:1; transform:none; }
[data-animate-delay="1"]{ transition-delay:.08s; }
[data-animate-delay="2"]{ transition-delay:.16s; }
[data-animate-delay="3"]{ transition-delay:.24s; }
[data-animate-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  [data-animate]{ opacity:1; transform:none; transition:none; }
  .service-card[data-animate],
  .process-step[data-animate]{ transform:none; }
}

/* ---------------- Cards / Grids ---------------- */
.grid{ display:grid; gap:1.75rem; }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; } }

.service-card{
  position:relative; display:block; overflow:hidden;
  background:var(--white); border:1px solid var(--line); padding:2.2rem 1.8rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px -20px rgba(20,18,16,.25), 0 0 32px -6px rgba(226,132,45,.4);
  border-color:var(--orange);
}
.service-card .num{
  position:relative; display:inline-block; font-family:var(--font-head); font-size:.9rem; color:var(--orange); font-weight:600;
  transition:transform .3s var(--ease), color .3s var(--ease), text-shadow .3s var(--ease);
}
.service-card:hover .num{ color:var(--orange-deep); transform:scale(1.2); text-shadow:0 0 14px rgba(226,132,45,.55); }
.service-card h3{ font-size:1.2rem; margin:.7rem 0 .6rem; }
.service-card p{ color:var(--graphite); font-size:.95rem; }

/* Cards that fly in on scroll (rather than just fade+rise) get a touch of
   scale too, so the "landing" reads as more alive on the larger grids. */
.service-card[data-animate],
.process-step[data-animate]{ transform:translateY(28px) scale(.96); }
.service-card[data-animate].is-visible,
.process-step[data-animate].is-visible{ transform:none; }

/* ---------------- Process steps ---------------- */
.process-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; margin-top:3rem; }
.process-step{
  position:relative; overflow:hidden; padding:1.8rem 1.4rem; background:var(--white); border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.process-step:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px -20px rgba(20,18,16,.25), 0 0 32px -6px rgba(226,132,45,.4);
  border-color:var(--orange);
}
.process-step .step-num{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--white);
  font-family:var(--font-head); font-weight:600; margin-bottom:1rem;
  transition:background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.process-step:hover .step-num{ background:var(--orange); transform:scale(1.1); box-shadow:0 0 0 6px rgba(226,132,45,.18); }
.process-step h4{ font-size:1.05rem; margin-bottom:.5rem; }
.process-step p{ font-size:.88rem; color:var(--graphite); }

/* A slim accent bar across the top of every card, brightening on hover,
   plus a soft diagonal shine that sweeps through on hover — the flat
   white cards read as "basic" without some light of their own. */
.service-card::before, .process-step::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--orange) 0%, var(--gold) 100%);
  opacity:.5; transition:opacity .3s var(--ease), height .3s var(--ease);
}
.service-card:hover::before, .process-step:hover::before{ opacity:1; height:4px; }
.service-card::after, .process-step::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%);
  transform:translateX(-130%);
  transition:transform .8s var(--ease);
}
.service-card:hover::after, .process-step:hover::after{ transform:translateX(130%); }

.area-band{ position:relative; background-size:cover; background-position:center; color:var(--white); overflow:clip; }
.area-band::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,9,8,.6) 0%, rgba(10,9,8,.8) 100%); }
.area-band .container{ position:relative; z-index:1; }

/* ---------------- Gallery ---------------- */
.masonry{
  columns:3 280px; column-gap:1.1rem;
}
.masonry figure{
  break-inside:avoid; margin:0 0 1.1rem; overflow:hidden; position:relative; background:var(--ink);
  cursor:zoom-in;
}
.masonry figure img{ width:100%; height:auto; display:block; transition:transform .5s var(--ease); }
.masonry figure:hover img{ transform:scale(1.045); }
.masonry figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.1rem .9rem;
  background:linear-gradient(0deg, rgba(10,9,7,.82), transparent);
  color:var(--white); font-family:var(--font-head);
  font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600;
  opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.masonry figure:hover figcaption{ opacity:1; transform:none; }
@media (max-width:720px){ .masonry{ columns:2 200px; } }
@media (max-width:460px){ .masonry{ columns:1; } }

.placeholder-figure{
  display:flex; align-items:center; justify-content:center; aspect-ratio:4/5;
  background:repeating-linear-gradient(135deg, var(--cream-deep), var(--cream-deep) 12px, var(--cream) 12px, var(--cream) 24px);
  border:1px dashed var(--orange); color:var(--graphite);
  font-family:var(--font-head);
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; text-align:center; padding:1.5rem;
}
/* An author `display` rule beats the UA stylesheet's `[hidden]{display:none}`
   at equal specificity, so the gallery filter's item.hidden=true was being
   silently ignored here — the "coming soon" card stayed visible under every
   filter instead of only "All" and "Painting". */
.placeholder-figure[hidden]{ display:none; }

.filter-bar{ display:flex; flex-wrap:wrap; gap:.6rem; margin:2.2rem 0 2.5rem; }
.filter-btn{
  padding:.55rem 1.15rem; border:1.5px solid var(--line); background:var(--white);
  font-family:var(--font-head);
  font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  border-radius:999px; color:var(--graphite); transition:all .25s var(--ease);
}
.filter-btn:hover{ border-color:var(--orange); color:var(--ink); }
.filter-btn.is-active{ background:var(--ink); border-color:var(--ink); color:var(--white); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:2000; background:rgba(10,9,7,.95);
  display:flex; align-items:center; justify-content:center; padding:2rem;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:100%; max-height:88vh; margin:0 auto; }
.lightbox-close{
  position:absolute; top:1.5rem; right:1.5rem; width:44px; height:44px;
  border:1.5px solid rgba(255,255,255,.4); background:transparent; color:var(--white);
  border-radius:50%; font-size:1.3rem; line-height:1;
}
.lightbox-cap{ position:absolute; bottom:1.6rem; left:0; right:0; text-align:center; color:#e9e0d3; font-family:var(--font-head); font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; }

/* ---------------- About ---------------- */
.about-block{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.about-block img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
@media (max-width:820px){ .about-block{ grid-template-columns:1fr; } }
.stat-row{ display:flex; gap:2.5rem; margin-top:2.2rem; flex-wrap:wrap; }
.stat strong{ display:block; font-family:var(--font-head); font-size:2.2rem; color:var(--orange-deep); }
.stat span{ font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--graphite); font-family:var(--font-head); }

.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:1rem; }
@media (max-width:720px){ .mv-grid{ grid-template-columns:1fr; } }
.mv-card{ background:var(--white); border:1px solid var(--line); padding:2.2rem; }
.mv-card h3{ color:var(--orange-deep); font-size:1.3rem; margin-bottom:.9rem; }
.mv-card p{ color:var(--graphite); }

/* ---------------- Contact ---------------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3.5rem; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-form{ display:flex; flex-direction:column; gap:1.2rem; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.form-grid label,.contact-form > label{
  display:flex; flex-direction:column; gap:.5rem; font-size:.82rem; font-weight:600;
  font-family:var(--font-head);
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);
}
.full-width{ grid-column:1/-1; }
input,textarea{
  font-family:var(--font-body); font-size:1rem; padding:.85rem 1rem; border:1.5px solid var(--line);
  background:var(--white); color:var(--ink); border-radius:2px; transition:border-color .2s var(--ease);
}
input:focus,textarea:focus{ border-color:var(--orange); }
textarea{ resize:vertical; min-height:140px; }
.form-status{ font-size:.88rem; min-height:1.2em; }
.form-status.is-success{ color:#2f7d3c; }
.form-status.is-error{ color:#b6462f; }

.contact-info-card{ background:var(--ink); color:var(--white); padding:2.6rem; }
.contact-info-card h3{ color:var(--white); font-size:1.3rem; margin-bottom:1.4rem; }
.contact-info-list{ display:flex; flex-direction:column; gap:1.2rem; }
.contact-info-list a,.contact-info-list span{ display:block; color:#e9e0d3; font-size:.95rem; font-family:var(--font-body); }
.contact-info-list strong{ display:block; color:var(--orange); font-family:var(--font-head); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.3rem; }
.contact-info-list a:hover{ color:var(--white); }
.map-wrap{ margin-top:1.6rem; border:1px solid rgba(255,255,255,.15); }
.map-wrap iframe{ width:100%; height:220px; border:0; filter:grayscale(.3); }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--ink); color:#cfc4b6; padding:4.5rem 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; }
@media (max-width:720px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer .logo img{ height:40px; }
.footer-tagline{ margin-top:1rem; font-size:.9rem; max-width:32ch; color:#a89c8a; }
.site-footer h4{ color:var(--white); font-family:var(--font-head); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-links{ display:flex; flex-direction:column; gap:.7rem; }
.footer-links a{ font-size:.9rem; color:#cfc4b6; }
.footer-links a:hover{ color:var(--orange); }
.footer-wordmark{
  font-family:var(--font-head); font-weight:600; text-transform:uppercase; letter-spacing:-.02em; line-height:.8;
  font-size:clamp(2.6rem, 10.2vw, 10rem); color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.12);
  white-space:nowrap; user-select:none; margin:1rem 0 -.08em; text-align:center; overflow:hidden;
}
.footer-wordmark span{ -webkit-text-stroke:1px rgba(226,132,45,.4); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  padding:1.4rem 0; border-top:1px solid rgba(255,255,255,.1); font-size:.78rem; color:#8b8071;
}

/* ---------------- Page hero (interior pages) ---------------- */
.page-hero{
  background:var(--ink); color:var(--white); padding:calc(var(--section-pad) + 5rem) 0 4rem;
}
.page-hero .eyebrow{ color:var(--orange); }
.page-hero h1{ color:var(--white); font-size:clamp(2.2rem,4.5vw,3.4rem); max-width:22ch; }
.page-hero p{ color:#d8cdbe; max-width:56ch; margin-top:1rem; font-size:1.05rem; font-family:var(--font-body); text-transform:none; }

.notice-band{
  background:var(--cream-deep); border:1px dashed var(--orange);
  padding:1.1rem 1.4rem; font-size:.88rem; color:var(--graphite); margin-top:2rem;
}

/* ============================================================
   SERVICE PAGES
   ============================================================ */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  font-family:var(--font-head); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(246,241,234,.72); margin-bottom:2.2rem;
}
.crumbs a:hover{ color:var(--orange); }
.crumbs span[aria-hidden]{ color:rgba(246,241,234,.3); }
.crumbs [aria-current]{ color:var(--hero-fg, #f6f1ea); }

.svc-hero{
  --hero-fg:#f6f1ea;
  position:relative; display:flex; align-items:flex-end;
  min-height:clamp(30rem,62svh,40rem);
  background:var(--void); color:var(--hero-fg); overflow:clip;
}
.svc-hero-media{ position:absolute; inset:0; z-index:0; }
.svc-hero-media img{ width:100%; height:100%; object-fit:cover; }
.svc-hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,9,8,.72) 0%, rgba(10,9,8,.25) 30%, rgba(10,9,8,0) 52%),
    linear-gradient(0deg, rgba(10,9,8,.93) 0%, rgba(10,9,8,.6) 30%, rgba(10,9,8,.08) 68%),
    /* The copy sits in the left column, which can land on a bright part of
       the photo; this keeps it legible without dimming the whole frame. */
    linear-gradient(90deg, rgba(10,9,8,.72) 0%, rgba(10,9,8,.34) 34%, rgba(10,9,8,0) 62%);
}
/* Painting has no photography yet, so its hero is a composed surface
   rather than a broken-looking empty frame. */
.svc-hero-media--plain{
  background:
    radial-gradient(120% 90% at 22% 14%, rgba(226,132,45,.20) 0%, rgba(226,132,45,0) 58%),
    radial-gradient(90% 80% at 84% 82%, rgba(142,58,31,.26) 0%, rgba(142,58,31,0) 60%),
    linear-gradient(160deg, #191511 0%, var(--void) 62%);
}
.svc-hero-inner{ position:relative; z-index:1; padding-top:9rem; padding-bottom:4.2rem; width:100%; }
.svc-num{
  font-family:var(--font-head); font-size:.86rem; font-weight:700;
  letter-spacing:.3em; color:var(--gold); margin-bottom:.9rem;
}
.svc-title{
  color:var(--hero-fg); font-size:clamp(2.6rem,6.4vw,5.2rem);
  line-height:.94; letter-spacing:-.01em; max-width:16ch;
}
.svc-tagline{
  margin-top:1.4rem; max-width:44ch;
  font-size:clamp(1.02rem,1.5vw,1.28rem); color:rgba(246,241,234,.8);
}

/* ---- intro: copy + a sticky contact card ---- */
.svc-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr); gap:4rem; align-items:start; }
@media (max-width:920px){ .svc-grid{ grid-template-columns:1fr; gap:2.6rem; } }
.svc-copy p{ font-size:1.06rem; line-height:1.75; color:var(--graphite); max-width:66ch; }
.svc-copy p + p{ margin-top:1.15rem; }
.svc-copy p:first-child{
  font-size:1.2rem; line-height:1.65; color:var(--ink-soft);
}
.svc-aside{ position:sticky; top:6rem; }
@media (max-width:920px){ .svc-aside{ position:static; } }
.svc-card{
  background:var(--ink); color:var(--white); padding:2.4rem 2rem;
  border-top:3px solid var(--orange);
}
.svc-card h2{ color:var(--white); font-size:1.25rem; }
.svc-card > p{ margin-top:.9rem; color:#cfc4b6; font-size:.95rem; }
.svc-facts{ margin:1.8rem 0 2rem; display:grid; gap:1rem; }
.svc-facts dt{
  font-family:var(--font-head); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange);
}
.svc-facts dd{ margin:.25rem 0 0; font-size:.95rem; color:#e9e0d3; }
.svc-facts dd a:hover{ color:var(--orange); }
.svc-card .btn{ width:100%; }

/* ---- gallery band ---- */
.svc-gallery{ background:var(--ink); color:var(--white); }
.svc-gallery .eyebrow{ color:var(--gold); }
.svc-gallery .section-title{ color:var(--white); }

/* ============================================================
   CAROUSEL
   Native scroll-snap does the moving, so it works with a swipe, a
   trackpad and the keyboard before any JavaScript loads. The buttons
   and dots are enhancements over that.
   ============================================================ */
.carousel{ position:relative; }
.carousel-viewport{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-behavior:smooth;
  border-radius:2px;
}
.carousel-viewport::-webkit-scrollbar{ display:none; }
.carousel-viewport:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; }
.carousel-track{
  display:flex; gap:1.1rem; margin:0; padding:0; list-style:none;
}
.carousel-slide{
  flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;
  position:relative; background:var(--void);
}
.carousel-slide img{
  width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; display:block;
}
@media (min-width:880px){
  /* A sliver of the neighbouring frames reads as a reel rather than a slideshow. */
  .carousel-slide{ flex-basis:78%; }
  .carousel-viewport{ scroll-padding-inline:11%; }
  .carousel-slide img{ aspect-ratio:16/10; }
}

.carousel-ui{
  display:flex; align-items:center; gap:1.2rem; margin-top:1.6rem;
}
.carousel-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:50px; height:50px; flex:0 0 auto;
  border:1.5px solid rgba(246,241,234,.28); background:transparent;
  color:var(--white); border-radius:50%;
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.carousel-btn svg{ width:20px; height:20px; }
.carousel-btn:hover:not(:disabled){ border-color:var(--orange); background:var(--orange); color:var(--ink); }
.carousel-btn:disabled{ opacity:.3; cursor:default; }
.carousel-status{
  font-family:var(--font-head); font-size:.82rem; font-weight:600;
  letter-spacing:.16em; color:rgba(246,241,234,.7); font-variant-numeric:tabular-nums;
}
.carousel-status [data-carousel-index]{ color:var(--white); }
.carousel-sep{ margin:0 .45rem; color:rgba(246,241,234,.35); }

.carousel-dots{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:1.3rem 0 0; padding:0; list-style:none;
}
.carousel-dots button{
  display:block; width:30px; height:2px; padding:0; border:0;
  background:rgba(246,241,234,.24);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.carousel-dots button:hover{ background:rgba(246,241,234,.55); }
.carousel-dots li.is-current button{ background:var(--orange); transform:scaleY(2.5); }
@media (max-width:560px){
  .carousel-dots button{ width:20px; }
  .carousel-btn{ width:44px; height:44px; }
}

/* ---- walk-through films ---- */
.svc-film{ background:var(--ink-soft); color:var(--white); }
.svc-film .eyebrow{ color:var(--gold); }
.svc-film .section-title{ color:var(--white); }
.svc-film .section-lede{ color:#cfc4b6; }
.svc-film-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.6rem; margin-top:2.6rem; max-width:760px;
}
@media (max-width:640px){ .svc-film-grid{ grid-template-columns:1fr; max-width:380px; } }
.svc-film-grid figure{ margin:0; }
.svc-film-grid video{
  /* The source clips are 480x640; a framed column keeps them from being
     upscaled into mush across a wide screen. */
  width:100%; aspect-ratio:3/4; background:var(--void);
  border:1px solid rgba(246,241,234,.12); display:block;
}
.svc-film-grid figcaption{
  margin-top:.9rem; font-size:.85rem; color:#a89c8a; line-height:1.5;
}

/* ---- more services ---- */
.svc-more{ background:var(--cream-deep); }
.svc-more-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:2.6rem;
}
@media (max-width:820px){ .svc-more-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .svc-more-grid{ grid-template-columns:1fr; } }
.svc-more-card{
  display:block; background:var(--white); border:1px solid var(--line);
  padding:1.7rem 1.5rem;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.svc-more-card:hover{
  transform:translateY(-4px); border-color:var(--orange);
  box-shadow:0 18px 36px -22px rgba(20,18,16,.32);
}
.svc-more-card .num{
  font-family:var(--font-head); font-size:.82rem; font-weight:600; color:var(--orange);
}
.svc-more-card h3{ font-size:1.08rem; margin-top:.5rem; }

@media (prefers-reduced-motion: reduce){
  .carousel-viewport{ scroll-behavior:auto; }
  .carousel-dots li.is-current button{ transform:none; }
  .svc-more-card:hover{ transform:none; }
}

/* Service index: titles and the per-service links added alongside them. */
.svc-readmore{ margin-top:1.4rem; }
.svc-readmore a{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-head); font-size:.8rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--orange-deep);
  border-bottom:1px solid transparent; padding-bottom:.2rem;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.svc-readmore a:hover{ color:var(--ink); border-bottom-color:var(--orange); }
.section-title a{ transition:color .25s var(--ease); }
.section-title a:hover{ color:var(--orange-deep); }

/* ============================================================
   SERVICES DROPDOWN
   "Services" stays a link to the index; a separate button opens the
   submenu, so keyboard and touch users can reach the children without
   being navigated away first.
   ============================================================ */
.nav-item{ display:flex; align-items:center; gap:.3rem; }
.nav-sub-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; border:0; background:transparent;
  color:var(--white); opacity:.7;
  transition:opacity .2s var(--ease), transform .25s var(--ease);
}
.nav-sub-toggle svg{ width:15px; height:15px; }
.nav-sub-toggle:hover{ opacity:1; }
.nav-item.is-open > .nav-sub-toggle{ transform:rotate(180deg); opacity:1; }
.nav-sub{ list-style:none; margin:0; padding:0; }
.nav-sub a{
  display:block; white-space:nowrap;
  font-family:var(--font-head); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--white);
}

@media (min-width:901px){
  .nav-item{ position:relative; }
  /* Keeps the pointer inside the item while it crosses the gap to the panel. */
  .nav-item::after{
    content:''; position:absolute; top:100%; left:-1rem; right:-1rem; height:1rem;
  }
  .nav-sub{
    position:absolute; top:calc(100% + 1rem); left:50%; z-index:3;
    min-width:14.5rem; padding:.5rem 0;
    background:rgba(14,12,10,.94);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(246,241,234,.1);
    box-shadow:0 26px 50px -26px rgba(0,0,0,.85);
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translate(-50%,-8px);
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  /* Opened only by `is-open`. A `:focus-within` rule here would also match
     the toggle itself, so Escape would close the panel and the returning
     focus would immediately reopen it. */
  .nav-item.is-open > .nav-sub{
    opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
  }
  .nav-sub a{
    padding:.62rem 1.3rem; font-size:.78rem;
    color:rgba(246,241,234,.78);
    border-left:2px solid transparent;
    transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  }
  .nav-sub a:hover,
  .nav-sub a:focus-visible{
    color:var(--white); background:rgba(226,132,45,.12); border-left-color:var(--orange);
  }
}

@media (max-width:900px){
  /* The panel can now hold twelve rows, so it has to be able to scroll —
     and `safe` keeps the first row reachable once it overflows. */
  .main-nav{ overflow-y:auto; justify-content:center; justify-content:safe center; }
  .main-nav > *{ flex:0 0 auto; }
  .nav-item{ flex-wrap:wrap; width:100%; gap:.6rem; }
  .nav-sub-toggle{ width:38px; height:38px; }
  .nav-sub-toggle svg{ width:22px; height:22px; }
  .nav-sub{
    flex:0 0 100%; overflow:hidden;
    max-height:0;
    transition:max-height .32s var(--ease), opacity .24s var(--ease);
    opacity:0;
  }
  /* Seven rows at ~2.1rem; the ceiling only has to clear the real height. */
  .nav-item.is-open > .nav-sub{ max-height:26rem; opacity:1; }
  .nav-sub a{
    font-size:1rem; padding:.5rem 0 .5rem 1.1rem;
    color:rgba(246,241,234,.72);
    border-left:1px solid rgba(246,241,234,.18);
  }
  .nav-sub a:hover{ color:var(--orange); border-left-color:var(--orange); }
}

@media (prefers-reduced-motion: reduce){
  .nav-sub{ transition:none; }
  .nav-sub-toggle{ transition:none; }
}

/* ============================================================
   SERVICE MOSAIC (home)
   Seven services in a four-column grid left an empty twelfth cell and
   seven white text boxes. The tiles now carry the project photography
   the site already has, and the spans below fill the grid exactly:

     K K B C
     K K F P
     E E W W
   ============================================================ */
.services-mosaic{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:15.5rem;
  gap:1rem;
}
.service-tile--feature{ grid-column:span 2; grid-row:span 2; }
.service-tile--wide{ grid-column:span 2; }

.service-tile{
  position:relative; display:block; overflow:hidden;
  background:var(--ink); color:var(--white);
  isolation:isolate;
}
.service-tile img,
.service-tile-plain{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
/* Painting has no photography in the repo, so its tile is a composed
   surface rather than a conspicuous gap in the grid. */
.service-tile-plain{
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(226,132,45,.26) 0%, rgba(226,132,45,0) 58%),
    radial-gradient(95% 85% at 82% 88%, rgba(142,58,31,.34) 0%, rgba(142,58,31,0) 62%),
    linear-gradient(158deg, #211a14 0%, var(--void) 68%);
}
.service-tile::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg,
    rgba(10,9,8,.92) 0%, rgba(10,9,8,.72) 26%, rgba(10,9,8,.28) 55%, rgba(10,9,8,.05) 100%);
  transition:opacity .4s var(--ease);
}
.service-tile-body{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:block; padding:1.5rem 1.4rem 1.35rem;
}
.service-tile .num{
  display:block; font-family:var(--font-head); font-size:.76rem; font-weight:700;
  letter-spacing:.26em; color:var(--gold); margin-bottom:.5rem;
}
.service-tile-title{
  display:block; font-family:var(--font-head); font-weight:600;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.1;
  font-size:1.22rem; color:var(--white);
}
.service-tile--feature .service-tile-title{ font-size:1.9rem; }
.service-tile-desc{
  display:block; margin-top:.55rem; max-width:34ch;
  font-size:.9rem; line-height:1.5; color:rgba(246,241,234,.78);
}
/* A hairline that grows across the tile on hover, echoing the nav. */
.service-tile-body::before{
  content:''; position:absolute; left:1.4rem; top:0; width:0; height:2px;
  background:var(--orange); transition:width .45s var(--ease);
}
.service-tile:hover img{ transform:scale(1.045); }
.service-tile:hover::after{ opacity:.88; }
.service-tile:hover .service-tile-body::before{ width:2.6rem; }
.service-tile:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

@media (max-width:1040px){
  .services-mosaic{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:14rem; }
  /* K K / B C / F P / E E / W W — ten cells, still no gap. */
  .service-tile--feature{ grid-column:span 2; grid-row:span 1; }
  .service-tile--feature .service-tile-title{ font-size:1.6rem; }
}
@media (max-width:560px){
  .services-mosaic{ grid-template-columns:minmax(0,1fr); grid-auto-rows:12.5rem; gap:.8rem; }
  .service-tile--feature,
  .service-tile--wide{ grid-column:span 1; grid-row:span 1; }
  .service-tile-body{ padding:1.2rem 1.15rem 1.1rem; }
  .service-tile-body::before{ left:1.15rem; }
}

@media (prefers-reduced-motion: reduce){
  .service-tile img,
  .service-tile::after,
  .service-tile-body::before{ transition:none; }
  .service-tile:hover img{ transform:none; }
}

/* Two-column section header: the title alone left a wide empty band to
   its right on desktop. The lede and the section's link now fill it. */
.section-head{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:2.5rem 3.5rem; align-items:end;
}
.section-head .section-title{ max-width:18ch; }
.section-head .section-lede{ margin-top:0; max-width:46ch; }
.section-head-aside{
  display:flex; flex-direction:column; align-items:flex-start; gap:1.6rem;
  padding-bottom:.35rem;
}
@media (max-width:900px){
  .section-head{ grid-template-columns:minmax(0,1fr); gap:1.4rem; align-items:start; }
  .section-head .section-title{ max-width:22ch; }
  .section-head-aside{ gap:1.4rem; }
}

/* ============================================================
   PAGE ASSISTANT — a floating "NI" button opening a small quick-help
   chat. Entirely client-side: replies are keyword-matched against a
   fixed list of real facts about the business (no backend, no real
   AI — a static site has nowhere safe to hold an API key). It also
   still lists this page's own sections as a "jump to" shortcut.
   ============================================================ */
.ai-fab{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:1400;
  width:56px; height:56px; border-radius:50%; border:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--gold), var(--orange) 55%, var(--orange-deep));
  color:var(--white); font-family:var(--font-head); font-weight:700;
  font-size:1rem; letter-spacing:.02em;
  box-shadow:0 10px 26px rgba(20,18,16,.32);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ai-fab:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 14px 32px rgba(20,18,16,.4); }
.ai-fab[aria-expanded="true"]{ transform:scale(.94); }

.ai-fab-panel{
  position:fixed; right:1.5rem; bottom:5.4rem; z-index:1399;
  width:min(340px, calc(100vw - 2.5rem)); max-height:min(78vh, 560px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--cream); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 20px 48px rgba(20,18,16,.28);
  transform:translateY(8px) scale(.98); opacity:0; pointer-events:none;
  transition:transform .22s var(--ease), opacity .22s var(--ease);
}
.ai-fab-panel:not([hidden]){ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.ai-fab-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.1rem; background:var(--ink); color:var(--white); flex:0 0 auto;
}
.ai-fab-panel-title{
  font-family:var(--font-head); font-weight:600; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase; margin:0;
}
.ai-fab-panel-title span{ color:var(--gold); }
.ai-fab-close{
  border:0; background:none; color:rgba(255,255,255,.7); font-size:1.3rem;
  line-height:1; padding:.1rem .3rem; border-radius:4px;
}
.ai-fab-close:hover{ color:var(--white); }

/* ---- chat thread ---- */
.ai-fab-messages{
  flex:1 1 auto; min-height:180px; overflow-y:auto;
  padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.65rem;
}
.ai-msg{
  max-width:86%; padding:.6rem .8rem; border-radius:10px;
  font-size:.88rem; line-height:1.45;
}
.ai-msg a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.ai-msg.is-bot{
  align-self:flex-start; background:var(--white); border:1px solid var(--line);
  color:var(--ink); border-bottom-left-radius:2px;
}
.ai-msg.is-user{
  align-self:flex-end; background:var(--orange); color:var(--white);
  border-bottom-right-radius:2px;
}

.ai-fab-chips{
  display:flex; flex-wrap:wrap; gap:.45rem;
  padding:0 1.1rem .8rem; flex:0 0 auto;
}
.ai-fab-chips button{
  border:1px solid var(--orange); background:none; color:var(--orange-deep);
  border-radius:999px; padding:.4rem .8rem; font-size:.78rem; font-weight:600;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.ai-fab-chips button:hover{ background:var(--orange); color:var(--white); }

.ai-fab-form{
  display:flex; gap:.5rem; padding:.8rem 1.1rem;
  border-top:1px solid var(--line); flex:0 0 auto;
}
.ai-fab-input{
  flex:1 1 auto; min-width:0; border:1px solid var(--line); border-radius:8px;
  padding:.6rem .75rem; font-family:var(--font-body); font-size:.88rem;
  background:var(--white); color:var(--ink);
}
.ai-fab-input:focus-visible{ outline:2px solid var(--orange); outline-offset:1px; }
.ai-fab-send{
  flex:0 0 auto; width:38px; height:38px; border-radius:8px; border:0;
  background:var(--orange); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease);
}
.ai-fab-send:hover{ background:var(--orange-deep); }
.ai-fab-send svg{ width:16px; height:10px; }

/* ---- on-page jump list, tucked under a native disclosure ---- */
.ai-fab-onpage{ flex:0 0 auto; border-top:1px solid var(--line); }
.ai-fab-onpage summary{
  cursor:pointer; list-style:none; padding:.7rem 1.1rem;
  font-family:var(--font-head); font-weight:600; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--graphite);
}
.ai-fab-onpage summary::-webkit-details-marker{ display:none; }
.ai-fab-onpage summary::after{ content:'+'; float:right; }
.ai-fab-onpage[open] summary::after{ content:'\2212'; }
.ai-fab-list{
  list-style:none; margin:0; padding:0 .5rem .5rem; max-height:180px; overflow-y:auto;
}
.ai-fab-list li + li{ margin-top:.15rem; }
.ai-fab-list button{
  display:block; width:100%; text-align:left; border:0; background:none;
  padding:.6rem .75rem; border-radius:6px;
  font-family:var(--font-body); font-size:.86rem; color:var(--ink);
  transition:background .2s var(--ease);
}
.ai-fab-list button:hover, .ai-fab-list button:focus-visible{ background:var(--cream-deep); }
.ai-fab-empty{ padding:0 .75rem .75rem; font-size:.85rem; color:var(--graphite); }

@media (max-width:560px){
  .ai-fab{ right:1rem; bottom:1rem; width:52px; height:52px; font-size:.92rem; }
  .ai-fab-panel{ right:1rem; bottom:4.9rem; }
}