/* ═══════════════════════════════════════════════════════════════════════
   BRYCE'S PATIOS — design system
   Canvas: warm off-white · Contrast: obsidian charcoal
   Display: Fraunces (architectural serif) · UI: Inter
   Materials: limestone · sandstone · moss · slate · obsidian
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root{
  /* surfaces */
  --canvas:#F7F4EE;
  --paper:#FDFBF7;
  --obsidian:#0F1113;
  --obsidian-2:#171A1D;

  /* ink */
  --ink:#14171A;
  --ink-2:#3B4147;
  --ink-3:#757B82;
  --ink-inv:#F7F4EE;
  --ink-inv-2:#A9AEB4;

  /* lines */
  --line:rgba(20,23,26,.13);
  --line-strong:rgba(20,23,26,.26);
  --line-inv:rgba(247,244,238,.14);
  --line-inv-strong:rgba(247,244,238,.30);

  /* material accents */
  --limestone:#DED8CB;
  --sandstone:#C9A87F;
  --moss:#55613E;
  --moss-soft:#A9B68C;
  --slate:#4A545E;
  --clay:#B0714A;

  /* type */
  --serif:'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* layout */
  --wrap:1240px;
  --gut:clamp(1.25rem, 4.5vw, 3.5rem);
  --nav-h:76px;

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.4,0,.2,1);

  /* radii — restrained, architectural */
  --r-sm:3px;
  --r-md:5px;
  --r-lg:8px;

  --shadow:0 1px 2px rgba(20,23,26,.04), 0 12px 32px -12px rgba(20,23,26,.14);
  --shadow-lg:0 2px 4px rgba(20,23,26,.05), 0 32px 64px -24px rgba(20,23,26,.24);
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

/* Fixed nav would cover the top of any in-page anchor target — reserve its height. */
[id]{scroll-margin-top:calc(var(--nav-h) + 1.5rem)}
section[id], .section{scroll-margin-top:calc(var(--nav-h) + 2rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
p{margin:0}
h1,h2,h3{margin:0; font-weight:400; letter-spacing:-.02em}
fieldset{margin:0; padding:0; border:0}
legend{padding:0}
:focus-visible{outline:2px solid var(--moss); outline-offset:3px; border-radius:2px}
.section--dark :focus-visible{outline-color:var(--moss-soft)}
[hidden]{display:none !important}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--ink-inv);
  padding:.75rem 1.25rem; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
}
.skip-link:focus{left:1rem; top:1rem}

/* ── Type ─────────────────────────────────────────────────────────────── */
.h2{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-variation-settings:'SOFT' 0,'WONK' 0;
  font-size:clamp(2rem, 4.6vw, 3.4rem);
  line-height:1.06;
  letter-spacing:-.025em;
  color:var(--ink);
  text-wrap:balance;
}
.h2--light{color:var(--ink-inv)}

.lede{
  font-size:clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height:1.62;
  color:var(--ink-2);
  text-wrap:pretty;
}
.section--dark .lede{color:var(--ink-inv-2)}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.6875rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--moss);
  margin-bottom:1.25rem;
}
.eyebrow--light{color:var(--moss-soft)}
.eyebrow__pin{width:.75rem; height:.75rem; fill:currentColor; flex:none}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.6rem;
  font-size:.8125rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .25s var(--ease-io), color .25s var(--ease-io),
             border-color .25s var(--ease-io), transform .25s var(--ease-io);
  white-space:nowrap;
}
.btn--solid{background:var(--ink); color:var(--ink-inv); border-color:var(--ink)}
.btn--solid:hover{background:#000; border-color:#000; transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--ink-inv); border-color:rgba(247,244,238,.45)}
.btn--ghost:hover{background:rgba(247,244,238,.12); border-color:var(--ink-inv)}
.btn--quiet{background:transparent; color:var(--ink-2); border-color:var(--line-strong)}
.btn--quiet:hover{border-color:var(--ink); color:var(--ink)}
.btn--sm{padding:.65rem 1.1rem; font-size:.6875rem}
.btn--lg{padding:1.05rem 2rem; font-size:.875rem}
.btn--block{width:100%}
.section--dark .btn--solid{background:var(--ink-inv); color:var(--ink); border-color:var(--ink-inv)}
.section--dark .btn--solid:hover{background:#fff; border-color:#fff}
.section--dark .btn--quiet{color:var(--ink-inv-2); border-color:var(--line-inv-strong)}
.section--dark .btn--quiet:hover{color:var(--ink-inv); border-color:var(--ink-inv)}

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

.section{padding-block:clamp(4.5rem, 10vw, 8.5rem)}
.section--dark{background:var(--obsidian); color:var(--ink-inv)}
.section--dark .h2,.section--dark h3{color:var(--ink-inv)}

.section__head{max-width:62ch; margin-bottom:clamp(2.5rem, 5vw, 4.5rem)}
.section__head--center{margin-inline:auto; text-align:center}
.section__head--center .eyebrow{justify-content:center}
.section__sub{margin-top:1.25rem; font-size:1.0625rem; color:var(--ink-2); text-wrap:pretty}
.section--dark .section__sub{color:var(--ink-inv-2)}

/* ── Wordmark ─────────────────────────────────────────────────────────── */
.wordmark{display:inline-flex; align-items:center; gap:.6rem; flex:none; white-space:nowrap}
.wordmark__mark{width:1.15rem; height:1.15rem; fill:var(--ink); flex:none; transition:fill .3s var(--ease-io)}
.wordmark__text{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-variation-settings:'SOFT' 0,'WONK' 0;
  font-size:1.2rem; font-weight:600; letter-spacing:-.01em; line-height:1;
  color:var(--ink); transition:color .3s var(--ease-io);
}
.wordmark__thin{font-weight:300; font-style:italic}
.wordmark--light .wordmark__mark{fill:var(--ink-inv)}
.wordmark--light .wordmark__text{color:var(--ink-inv)}

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .4s var(--ease-io), border-color .4s var(--ease-io),
             backdrop-filter .4s var(--ease-io);
  border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  height:var(--nav-h);
  display:flex; align-items:center; gap:2rem;
}
/* Transparent nav needs its own grounding: the hero photo's top edge can be
   bright foliage, which leaves white nav text floating on mid-tone noise.
   A soft top-down scrim anchors the bar without turning it into a solid slab. */
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(9,10,12,.72) 0%,
    rgba(9,10,12,.42) 58%,
    rgba(9,10,12,0) 100%);
  opacity:1; transition:opacity .4s var(--ease-io);
}
.nav.is-solid::before{opacity:0}
.nav.is-solid{
  background:rgba(247,244,238,.88);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line);
}
/* transparent state sits over the dark hero */
.nav:not(.is-solid) .wordmark__mark{fill:var(--ink-inv)}
.nav:not(.is-solid) .wordmark__text{color:var(--ink-inv)}
.nav:not(.is-solid) .nav__links a{color:rgba(247,244,238,.82)}
.nav:not(.is-solid) .nav__links a:hover{color:var(--ink-inv)}
.nav:not(.is-solid) .nav__phone{color:rgba(247,244,238,.82)}
.nav:not(.is-solid) .nav__phone:hover{color:var(--ink-inv)}
.nav:not(.is-solid) .btn--solid{background:var(--ink-inv); color:var(--ink); border-color:var(--ink-inv)}
.nav:not(.is-solid) .nav__burger span{background:var(--ink-inv)}

.nav__links{display:flex; gap:clamp(1rem,2vw,2rem); margin-left:auto; min-width:0}
.nav__links a{
  font-size:.78rem; font-weight:500; letter-spacing:.055em;
  color:var(--ink-2); position:relative; padding-block:.4rem;
  transition:color .25s var(--ease-io);
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__actions{display:flex; align-items:center; gap:1.25rem}
.nav__phone{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.8125rem; font-weight:500; color:var(--ink-2);
  transition:color .25s var(--ease-io);
}
.nav__phone svg{width:.85rem; height:.85rem; fill:currentColor}
.nav__phone:hover{color:var(--ink)}

.nav__burger{
  display:none; width:2.5rem; height:2.5rem;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:.4rem;
  margin-right:-.5rem;
}
.nav__burger span{
  display:block; width:1.4rem; height:1.5px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s var(--ease-io), background-color .3s;
}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.nav__progress{
  height:2px; width:100%; background:transparent; overflow:hidden;
}
.nav.is-solid .nav__progress{background:var(--line)}
.nav__progress::after{
  content:''; display:block; height:100%; width:100%;
  background:var(--moss); transform:scaleX(var(--p,0)); transform-origin:left;
  transition:transform .12s linear;
}
.nav:not(.is-solid) .nav__progress::after{background:var(--moss-soft)}

/* ── Mobile drawer ────────────────────────────────────────────────────── */
.drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--canvas);
  padding:calc(var(--nav-h) + 2rem) var(--gut) 2rem;
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transform:translateY(-8px);
  transition:opacity .35s var(--ease-io), transform .35s var(--ease);
}
.drawer.is-open{opacity:1; transform:none}
.drawer__links{display:flex; flex-direction:column}
.drawer__links a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(2rem, 9vw, 2.75rem); line-height:1.25;
  padding-block:.65rem; border-bottom:1px solid var(--line);
  letter-spacing:-.02em;
}
.drawer__num{
  font-family:var(--sans); font-size:.6875rem; font-weight:600;
  letter-spacing:.14em; color:var(--moss); flex:none;
}
.drawer__foot{display:flex; flex-direction:column; gap:1rem}
.drawer__tel{
  font-family:var(--serif); font-size:1.5rem; text-align:center; letter-spacing:-.01em;
}
.drawer__meta{
  text-align:center; font-size:.8125rem; color:var(--ink-3); line-height:1.6;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:calc(var(--nav-h) + 3rem);
  padding-bottom:2.5rem;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{position:absolute; inset:0; z-index:-1}
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  /* the old heroDrift keyframe scaled this photo from 1.06 to 1.14 over 28s.
     On a 920px source with a wall running through the frame, that crops an extra
     ~14% off every edge and the composition visibly falls apart the longer you
     look at it. Stills of real work do not need a slow zoom. */
}
@media (prefers-reduced-motion:no-preference){
  .hero__media img{animation:heroDrift 40s var(--ease-io) infinite alternate}
}
@keyframes heroDrift{
  from{transform:scale(1.00) translate3d(0,0,0)}
  to{transform:scale(1.02) translate3d(0,0,0)}
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top,
      rgba(9,10,12,.94) 0%,
      rgba(9,10,12,.82) 26%,
      rgba(9,10,12,.62) 50%,
      rgba(9,10,12,.52) 72%,
      rgba(9,10,12,.78) 100%);
}
.hero__content{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gut);
  color:var(--ink-inv);
}
.hero__title{
  font-family:var(--serif); font-optical-sizing:auto;
  font-variation-settings:'SOFT' 0,'WONK' 0;
  font-size:clamp(2.9rem, 8.4vw, 6.2rem);
  line-height:.98; letter-spacing:-.035em; font-weight:400;
  margin-bottom:1.75rem;
  text-wrap:balance;
  text-shadow:0 2px 30px rgba(9,10,12,.5), 0 1px 3px rgba(9,10,12,.32);
}
.hero__title em{font-style:italic; font-weight:300}
.hero__lede{
  max-width:34ch;
  font-size:clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height:1.6; color:rgba(247,244,238,.9);
  margin-bottom:2.5rem; text-wrap:pretty;
  text-shadow:0 1px 16px rgba(9,10,12,.6);
}
.hero .eyebrow--light{
  color:#C3CFA6;
  margin-bottom:2rem; /* +0.75rem over base: hero display type needs more air */
  text-shadow:0 1px 14px rgba(9,10,12,.7);
}
.hero__cta{display:flex; flex-wrap:wrap; gap:.875rem; margin-bottom:2.75rem}
/* Invert the primary CTA over the dark hero — a dark button on a dark scrim
   has almost no contrast, and the nav CTA is already inverted. */
.hero .btn--solid{background:var(--ink-inv); color:var(--ink); border-color:var(--ink-inv)}
.hero .btn--solid:hover{background:#fff; border-color:#fff}
.hero .btn--ghost{color:var(--ink-inv); border-color:rgba(247,244,238,.5); padding-inline:1.6rem}
.hero .btn--ghost:hover{background:rgba(247,244,238,.14); border-color:var(--ink-inv)}
.hero__meta{
  margin-top:2.75rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.75rem;
  font-size:.75rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(247,244,238,.72);
}
.hero__meta li{position:relative; padding-left:1.1rem}
.hero__meta li::before{
  content:''; position:absolute; left:0; top:.5em;
  width:5px; height:5px; background:var(--moss-soft); border-radius:50%;
}

/* ── 01 Promise ───────────────────────────────────────────────────────── */
.promise__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 6vw, 6rem);
  align-items:center;
  padding-bottom:clamp(3rem, 6vw, 5rem);
  border-bottom:1px solid var(--line);
}
.promise__lead .eyebrow{margin-bottom:1rem}
.promise__body{display:flex; flex-direction:column; gap:1.25rem; padding-top:.5rem}

.pillars{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem, 4vw, 3.5rem);
  margin-top:clamp(3rem, 6vw, 5rem);
}
.pillar__num{
  display:block; font-family:var(--serif); font-style:italic;
  font-size:1.5rem; color:var(--moss); margin-bottom:.85rem; line-height:1;
}
.pillar__title{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:1.3125rem; line-height:1.25; margin-bottom:.65rem; letter-spacing:-.015em;
}
.pillar p{font-size:.9375rem; color:var(--ink-2); line-height:1.68; text-wrap:pretty}

/* ── 02 Featured work ─────────────────────────────────────────────────── */
.projects{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem, 3vw, 2.5rem);
}
.project{display:flex; flex-direction:column}
.project__media{
  overflow:hidden; border-radius:var(--r-md);
  aspect-ratio:3/2; background:var(--obsidian-2);
}
.project__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
  will-change:transform;
}
.project:hover .project__media img{transform:scale(1.055)}
.project__body{padding-top:1.5rem; display:flex; flex-direction:column; flex:1}
.project__place{
  font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--moss-soft); margin-bottom:.6rem;
}
.project__title{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:1.5rem; line-height:1.2; letter-spacing:-.018em; margin-bottom:.7rem;
}
.project__desc{font-size:.9375rem; color:var(--ink-inv-2); line-height:1.65; margin-bottom:1.1rem; text-wrap:pretty}
.tags{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:auto; column-gap:.3rem}
.tags li{
  font-size:.6875rem; font-weight:500; letter-spacing:.04em;
  padding:.3rem .55rem; border:1px solid var(--line-inv); border-radius:100px;
  color:var(--ink-inv-2); white-space:nowrap;
}
.work__note{
  margin-top:clamp(2.5rem, 5vw, 3.5rem);
  padding-top:1.75rem; border-top:1px solid var(--line-inv);
  font-size:.8125rem; color:var(--ink-inv-2); max-width:70ch; line-height:1.7;
}
.work__note--disclosure{
  margin-top:1.15rem; padding-top:0; border-top:0;
  font-size:.75rem; color:var(--ink-inv-3, var(--ink-inv-2));
  opacity:.72; max-width:66ch; line-height:1.6;
}

/* ── 03 Transformation ────────────────────────────────────────────────── */
.compare{margin:0}
.compare__stage{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  aspect-ratio:3/2;
  background:var(--obsidian-2);
  box-shadow:var(--shadow-lg);
  cursor:ew-resize;
  touch-action:pan-y;
  user-select:none;
  --pos:50%;
}
.compare__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none;
}
.compare__clip{
  position:absolute; inset:0;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
  will-change:clip-path;
}
.compare__handle{
  position:absolute; top:0; bottom:0; left:var(--pos);
  width:2px; margin-left:-1px;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 1px rgba(20,23,26,.18);
  cursor:ew-resize;
  display:flex; align-items:center; justify-content:center;
}
.compare__grip{
  display:grid; place-items:center;
  width:3rem; height:3rem; border-radius:50%;
  background:var(--paper);
  box-shadow:0 2px 12px rgba(20,23,26,.3);
  transition:transform .25s var(--ease);
}
.compare__handle:hover .compare__grip{transform:scale(1.08)}
.compare__handle:active .compare__grip{transform:scale(.96)}
.compare__grip svg{width:1.15rem; height:1.15rem; stroke:var(--ink); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round}

.compare__badge{
  position:absolute; top:1.125rem;
  font-size:.625rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:100px;
  background:rgba(15,17,19,.66); color:var(--ink-inv);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  pointer-events:none;
}
.compare__badge--before{left:1.125rem}
.compare__badge--after{right:1.125rem; background:rgba(247,244,238,.9); color:var(--ink)}

.compare__controls{display:flex; gap:.5rem; justify-content:center; margin-top:1.5rem}
.compare__caption{
  text-align:center; margin-top:1.25rem;
  font-family:var(--serif); font-style:italic; font-size:1.0625rem; color:var(--ink-3);
}

.timeline{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem, 3vw, 2.5rem);
  margin-top:clamp(3.5rem, 7vw, 6rem);
  padding-top:clamp(2.5rem, 5vw, 3.5rem);
  border-top:1px solid var(--line);
}
.timeline__day{
  display:block; font-size:.6875rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--moss); margin-bottom:.85rem;
}
.timeline__title{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:1.1875rem; line-height:1.25; letter-spacing:-.015em; margin-bottom:.5rem;
}
.timeline__item p{font-size:.875rem; color:var(--ink-2); line-height:1.65; text-wrap:pretty}

/* ── 04 Craftsmanship ─────────────────────────────────────────────────── */
.craft__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem, 3vw, 2.25rem);
  align-items:start;
}
.craft__figure{margin:0; display:flex; flex-direction:column; gap:1.125rem; height:100%}
.craft__figure--wide{grid-column:span 2}
.craft__figure img{width:100%; object-fit:cover; border-radius:var(--r-md); display:block}
/* both figures hold the SAME aspect ratio. the previous rule let the narrow figure
   stretch to the wide one's height, which upscaled it about 2x and cropped it so hard
   the photo read as two unrelated stone textures. Matching the ratio keeps the bottoms
   aligned (the original intent) without distorting either image. */
.craft__figure img{aspect-ratio:3/2}
.craft__figure figcaption{
  font-size:.875rem; line-height:1.68; color:var(--ink-inv-2); max-width:52ch;
}
.craft__figure figcaption strong{color:var(--ink-inv); font-weight:600}

/* three craft principles + the film button, in a full-width band under the images */
.craft__side{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem, 3.5vw, 3rem);
  margin-top:clamp(.5rem, 1.5vw, 1.25rem);
}
.craft__list{display:contents}
.film-launch{grid-column:1 / -1; justify-self:start; max-width:30rem}
.craft__list h3{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:1.125rem; line-height:1.3; letter-spacing:-.015em; margin-bottom:.4rem;
}
.craft__list p{font-size:.875rem; color:var(--ink-inv-2); line-height:1.65; text-wrap:pretty}

.film-launch{
  display:flex; align-items:center; gap:1rem; text-align:left;
  padding:1rem 1.25rem;
  border:1px solid var(--line-inv); border-radius:var(--r-md);
  transition:border-color .3s var(--ease-io), background-color .3s var(--ease-io);
}
.film-launch:hover{border-color:var(--line-inv-strong); background:rgba(247,244,238,.04)}
.film-launch__play{
  display:grid; place-items:center; flex:none;
  width:2.75rem; height:2.75rem; border-radius:50%;
  background:var(--ink-inv); color:var(--ink);
  transition:transform .3s var(--ease);
}
.film-launch:hover .film-launch__play{transform:scale(1.07)}
.film-launch__play svg{width:1rem; height:1rem; fill:currentColor; margin-left:2px}
.film-launch__text{display:flex; flex-direction:column; gap:.15rem}
.film-launch__text strong{
  font-size:.875rem; font-weight:600; letter-spacing:.02em; color:var(--ink-inv);
}
.film-launch__text small{font-size:.75rem; color:var(--ink-inv-2)}

/* ── 05 About ─────────────────────────────────────────────────────────── */
.about__grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem, 6vw, 5.5rem); align-items:center;
}
.about__media{display:block}
.about__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-md); box-shadow:var(--shadow); display:block;
}
.about__body{display:flex; flex-direction:column; gap:1.25rem}
.about__body .eyebrow{margin-bottom:0}
.about__body .h2{margin-bottom:.25rem}

.about__promise{
  margin-top:1rem; padding:1.75rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
}
.about__promise-label{
  font-size:.6875rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--moss); margin-bottom:1rem;
}
.checklist{display:flex; flex-direction:column; gap:.7rem}
.checklist li{
  position:relative; padding-left:1.6rem;
  font-size:.9375rem; line-height:1.55; color:var(--ink-2); text-wrap:pretty;
}
.checklist li::before{
  content:''; position:absolute; left:0; top:.5em;
  width:.55rem; height:.3rem;
  border-left:1.5px solid var(--moss); border-bottom:1.5px solid var(--moss);
  transform:rotate(-45deg);
}

/* ── 06 Service area ──────────────────────────────────────────────────── */
.area__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2.5rem, 6vw, 6rem); align-items:start;
}
.area__intro{display:flex; flex-direction:column; gap:1.25rem}
.area__intro .eyebrow{margin-bottom:0}
.area__local{display:flex; flex-direction:column; gap:1.1rem; margin-top:.35rem}
.area__local dt{
  font-family:var(--sans); font-size:.6875rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:.3rem;
}
.area__local dd{font-size:.875rem; line-height:1.6}

.area__ask{
  font-size:.9375rem; color:var(--moss-soft); font-style:italic;
  padding-top:1.25rem; border-top:1px solid var(--line-inv);
}
.area__lists{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.5rem}
.area__state{
  font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-inv-2); margin-bottom:1.25rem;
  padding-bottom:.85rem; border-bottom:1px solid var(--line-inv);
}
.area__towns{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:1.25rem; row-gap:.1rem;
}
.area__towns--plain{grid-template-columns:repeat(2,minmax(0,1fr))}
.area__towns li{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:1.0625rem; line-height:1.5; color:var(--ink-inv);
  padding-block:.3rem;
}
.area__towns a{
  color:var(--ink-inv); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease-io), color .25s var(--ease-io);
}
.area__towns a:hover{border-color:var(--moss-soft); color:#fff}
.area__soon{color:var(--ink-inv-2)}

/* ── 07 Estimate ──────────────────────────────────────────────────────── */
.form-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.75rem, 4vw, 3rem);
  box-shadow:var(--shadow);
}
.form-progress{margin-bottom:clamp(2rem, 4vw, 2.75rem)}
.form-progress__track{
  height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:1.25rem;
}
.form-progress__fill{
  height:100%; width:33.333%; background:var(--moss);
  transition:width .5s var(--ease);
}
.form-progress__steps{display:flex; justify-content:space-between; gap:1rem}
.form-progress__steps li{
  display:flex; align-items:center; gap:.5rem;
  font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); transition:color .3s var(--ease-io);
}
.form-progress__steps li span{
  display:grid; place-items:center;
  width:1.4rem; height:1.4rem; border-radius:50%;
  border:1px solid var(--line-strong);
  font-size:.625rem; font-weight:700;
  transition:background-color .3s var(--ease-io), color .3s var(--ease-io), border-color .3s var(--ease-io);
}
.form-progress__steps li.is-active{color:var(--ink)}
.form-progress__steps li.is-active span{background:var(--ink); border-color:var(--ink); color:var(--ink-inv)}
.form-progress__steps li.is-done span{background:var(--moss); border-color:var(--moss); color:#fff}

.step-panel{display:none}
.step-panel.is-active{display:block; animation:panelIn .45s var(--ease) both}
@keyframes panelIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.step-panel__legend{display:block; margin-bottom:2rem}
.step-panel__num{
  display:block; font-size:.6875rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--moss); margin-bottom:.75rem;
}
.step-panel__q{
  display:block; font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(1.375rem, 2.6vw, 1.875rem); line-height:1.2;
  letter-spacing:-.02em; margin-bottom:.5rem;
}
.step-panel__hint{display:block; font-size:.875rem; color:var(--ink-3)}

.field{display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.5rem}
.field label{
  font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:var(--ink);
}
.field__opt{
  font-weight:400; color:var(--ink-3); font-size:.75rem; letter-spacing:.04em;
}
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem;
  background:var(--canvas);
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  font-size:.9375rem; color:var(--ink);
  transition:border-color .25s var(--ease-io), background-color .25s var(--ease-io);
  appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233B4147' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:.7rem;
  padding-right:2.5rem;
}
.field textarea{resize:vertical; min-height:6rem; line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--moss); background:var(--paper);
  box-shadow:0 0 0 3px rgba(85,97,62,.12);
}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#B4432F}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
.field-error{
  font-size:.8125rem; color:#B4432F; margin-top:-.15rem;
}

.chips{display:flex; flex-wrap:wrap; gap:.55rem}
.chip{
  position:relative; display:inline-flex; align-items:center;
  padding:.6rem 1.05rem;
  border:1px solid var(--line-strong); border-radius:100px;
  font-size:.875rem; color:var(--ink-2);
  cursor:pointer; background:var(--canvas);
  transition:border-color .22s var(--ease-io), background-color .22s var(--ease-io),
             color .22s var(--ease-io), transform .22s var(--ease-io);
}
.chip:hover{border-color:var(--ink-3); transform:translateY(-1px)}
.chip input{position:absolute; opacity:0; pointer-events:none; width:0; height:0}
.chip:has(input:checked){
  background:var(--ink); border-color:var(--ink); color:var(--ink-inv);
}
.chip:has(input:focus-visible){outline:2px solid var(--moss); outline-offset:2px}
.chip--sm{padding:.45rem .9rem; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.chip--sm.is-active{background:var(--ink); border-color:var(--ink); color:var(--ink-inv)}

.step-nav{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  margin-top:2.25rem; padding-top:1.75rem; border-top:1px solid var(--line);
}
.form-consent{font-size:.75rem; color:var(--ink-3); margin-top:1.25rem; line-height:1.6}

.form-success{text-align:center; padding-block:1rem; animation:panelIn .5s var(--ease) both}
.form-success__tick{
  display:grid; place-items:center; margin:0 auto 1.5rem;
  width:3.25rem; height:3.25rem; border-radius:50%;
  background:var(--moss); color:#fff;
}
.form-success__tick svg{width:1.4rem; height:1.4rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.form-success h3{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:1.75rem; letter-spacing:-.02em; margin-bottom:.85rem;
}
.form-success > p{color:var(--ink-2); max-width:44ch; margin:0 auto 1.75rem; text-wrap:pretty}
.form-success__actions{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-bottom:1.75rem}
.form-success__summary{
  text-align:left; white-space:pre-wrap; word-break:break-word;
  background:var(--canvas); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:1.125rem 1.25rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.75rem; line-height:1.75; color:var(--ink-2);
  margin:0 0 1.5rem; max-height:14rem; overflow:auto;
}
.form-success__alt{font-size:.875rem; color:var(--ink-3)}
.form-success__alt a{color:var(--moss); border-bottom:1px solid currentColor}

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer{background:var(--obsidian-2); color:var(--ink-inv-2); padding-block:clamp(3rem, 6vw, 4.5rem) 2rem}
.footer__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(2rem, 4vw, 3rem);
  padding-bottom:clamp(2.5rem, 5vw, 3.5rem);
  border-bottom:1px solid var(--line-inv);
}
.footer__tag{
  margin-top:1rem; font-family:var(--serif); font-style:italic;
  font-size:1rem; color:var(--ink-inv-2);
}
.footer__social{display:flex; gap:.6rem; margin-top:1.5rem}
.footer__social a{
  display:grid; place-items:center;
  width:2.5rem; height:2.5rem; border-radius:50%;
  border:1px solid var(--line-inv); color:var(--ink-inv-2);
  transition:border-color .25s var(--ease-io), color .25s var(--ease-io),
             background-color .25s var(--ease-io), transform .25s var(--ease-io);
}
.footer__social a:hover{
  border-color:var(--ink-inv); color:var(--ink-inv);
  background:rgba(247,244,238,.06); transform:translateY(-2px);
}
.footer__social svg{width:1.05rem; height:1.05rem; fill:currentColor}
.footer__col h3{
  font-family:var(--sans); font-size:.6875rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-inv);
  margin-bottom:1.125rem;
}
.footer__col ul{display:flex; flex-direction:column; gap:.6rem}
.footer__col li{font-size:.875rem; line-height:1.5}
.footer__addr{font-style:normal; color:var(--ink-3)}
.footer__col a{transition:color .25s var(--ease-io)}
.footer__col a:hover{color:var(--ink-inv)}
.footer__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem;
  padding-top:1.75rem; font-size:.75rem; color:var(--ink-3);
}
.footer__fine{color:var(--ink-3)}

/* ── Sticky mobile CTA ────────────────────────────────────────────────── */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:none; gap:.6rem;
  padding:.75rem var(--gut) calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(247,244,238,.94);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(100%);
  transition:transform .4s var(--ease);
}
.sticky-cta.is-visible{transform:none}
.sticky-cta__call{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  flex:none; padding:.95rem 1.35rem;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.sticky-cta__call svg{width:.9rem; height:.9rem; fill:currentColor}
.sticky-cta__est{
  flex:1; display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.35rem;
  background:var(--ink); color:var(--ink-inv); border-radius:var(--r-sm);
  font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}

/* ── Film modal ───────────────────────────────────────────────────────── */
.film{
  position:fixed; inset:0; z-index:150;
  background:rgba(9,10,12,.96);
  display:flex; flex-direction:column;
  animation:filmIn .4s var(--ease-io) both;
}
@keyframes filmIn{from{opacity:0} to{opacity:1}}
.film__close{
  position:absolute; top:1.25rem; right:1.25rem; z-index:2;
  width:2.75rem; height:2.75rem; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(247,244,238,.1); color:var(--ink-inv);
  transition:background-color .25s var(--ease-io);
}
.film__close:hover{background:rgba(247,244,238,.2)}
.film__close svg{width:1.15rem; height:1.15rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}

.film__mute{
  position:absolute; top:1.25rem; right:4.5rem; z-index:2;
  width:2.75rem; height:2.75rem; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(247,244,238,.1); color:var(--ink-inv);
  transition:background-color .25s var(--ease-io);
}
.film__mute:hover{background:rgba(247,244,238,.2)}
.film__mute svg{width:1.3rem; height:1.3rem; fill:currentColor}
.film__mute svg .film__mute-x{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; opacity:0; transition:opacity .2s}
.film__mute.is-muted svg .film__mute-x{opacity:1}
.film__mute.is-muted svg path:first-child{opacity:.45}

.film__stage{position:relative; flex:1; overflow:hidden}
.film__slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.4s var(--ease-io);
}
.film__slide.is-active{opacity:1}
.film__slide img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  animation:filmPush 11s var(--ease-io) both;
  filter:saturate(1.04) contrast(1.03) brightness(1.02);
}
@keyframes filmPush{from{transform:scale(1.03)} to{transform:scale(1.09)}}
.film__slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(9,10,12,.82) 0%, rgba(9,10,12,.42) 34%, rgba(9,10,12,.02) 62%);
}
.film__ui{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(1.5rem, 5vw, 3.5rem) var(--gut);
}
.film__bar{height:2px; background:rgba(247,244,238,.2); border-radius:2px; overflow:hidden; margin-bottom:1.25rem}
.film__fill{height:100%; width:0; background:var(--ink-inv)}
.film__caption{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(1.125rem, 2.6vw, 1.75rem); line-height:1.3;
  letter-spacing:-.02em; color:var(--ink-inv); max-width:34ch;
}
body.is-locked{overflow:hidden}

/* ── Reveal ───────────────────────────────────────────────────────────── */
[data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
}
[data-reveal].is-in{opacity:1; transform:none}


/* ── LEARN (guides) ───────────────────────────────────────────────────── */
.learn__figure{
  grid-column:1 / -1; margin:0;
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(1.75rem, 4vw, 3rem); align-items:center;
  background:var(--canvas); border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(1.25rem, 3vw, 2rem);
}
.learn__figure img{width:100%; height:auto; display:block; border-radius:var(--r-sm)}
.learn__figure figcaption{font-size:.9375rem; line-height:1.7; color:var(--ink-2); text-wrap:pretty}
.learn__figure figcaption strong{
  display:block; color:var(--ink); font-weight:600; margin-bottom:.4rem; font-size:1rem;
}

.learn{background:var(--paper)}
.learn__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem, 3vw, 2.25rem);
  align-items:start;
}
.guide{
  display:flex; flex-direction:column; gap:.9rem;
  padding:clamp(1.5rem, 3vw, 2rem);
  background:var(--canvas);
  border:1px solid var(--line); border-radius:var(--r-md);
  height:100%;
}
.guide__tag{
  font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--moss);
}
.guide__title{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:1.3125rem; line-height:1.22; letter-spacing:-.018em; margin:.1rem 0 .2rem;
}
.guide p{font-size:.9375rem; line-height:1.68; color:var(--ink-2); text-wrap:pretty}
.guide__thumb{
  display:block; margin:-.15rem 0 .15rem; overflow:hidden;
  border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--obsidian); aspect-ratio:16/10;
}
.guide__thumb-img{
  width:100%; height:100%; display:block; object-fit:cover;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.guide--link:hover .guide__thumb-img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){ .guide__thumb-img{transition:none} }
.guide__note{
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.875rem; color:var(--ink-3);
}
.guide__note strong{color:var(--ink); font-weight:600}
.guide__list{display:flex; flex-direction:column; gap:.55rem; margin:.1rem 0}
.guide__list li{
  font-size:.9375rem; line-height:1.6; color:var(--ink-2); text-wrap:pretty;
}
.guide__list strong{color:var(--ink); font-weight:600}
/* WS3: related-guides footer block on guide pages */
.related{margin:2.6rem 0 .4rem; padding-top:1.6rem; border-top:1px solid var(--line, rgba(20,23,26,.12))}
.related__h{font-size:1.05rem; font-weight:600; color:var(--ink); margin:0 0 .9rem}
.related__list{display:flex; flex-direction:column; gap:.65rem; margin:0; padding:0; list-style:none}
.related__list li{display:flex; flex-direction:column; gap:.15rem; font-size:.9375rem; line-height:1.5; color:var(--ink-2)}
.related__list a{color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(20,23,26,.22); align-self:flex-start}
.related__list a:hover{border-bottom-color:var(--ink)}
.related__tag{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.related__svc{margin:.2rem 0 0; font-size:.9375rem; color:var(--ink-2)}
.related__svc a{color:var(--ink); font-weight:600; border-bottom:1px solid rgba(20,23,26,.22); text-decoration:none}
.related__svc a:hover{border-bottom-color:var(--ink)}
.guide__checklist{display:flex; flex-direction:column; gap:.55rem}
.guide__checklist li{
  position:relative; padding-left:1.55rem;
  font-size:.9375rem; line-height:1.55; color:var(--ink-2); text-wrap:pretty;
}
.guide__checklist li::before{
  content:''; position:absolute; left:0; top:.45em;
  width:.55rem; height:.3rem;
  border-left:1.5px solid var(--moss); border-bottom:1.5px solid var(--moss);
  transform:rotate(-45deg);
}
.guide__cta{margin-top:auto; align-self:flex-start}
.guide--ask{background:var(--obsidian); border-color:var(--obsidian)}
.guide--ask .guide__title{color:var(--ink-inv)}
.guide--ask p{color:var(--ink-inv-2)}
.guide--ask .guide__tag{color:var(--moss-soft)}
@media (max-width:1024px){ .learn__grid{grid-template-columns:1fr 1fr} .learn__figure{grid-template-columns:1fr} }
/* ── Inner pages: breadcrumb, prose, Q&A, CTA band, linked cards ───────── */
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  font-size:.75rem; letter-spacing:.02em; color:var(--ink-3);
  margin-bottom:clamp(1.25rem, 2.5vw, 1.9rem);
}
.crumb a{color:var(--ink-3); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px}
.crumb a:hover{color:var(--ink); border-bottom-color:var(--line-strong)}
.crumb__sep{color:var(--line-strong); user-select:none}
.crumb [aria-current="page"]{color:var(--ink-2)}

.prose{
  font-size:1.0625rem; line-height:1.75; color:var(--ink-2);
  text-wrap:pretty; margin-top:1.1rem; max-width:62ch;
}
.prose:first-of-type{margin-top:1.35rem}
.prose strong{color:var(--ink); font-weight:600}
.prose--note{
  margin-top:1.5rem; padding-top:1.15rem;
  border-top:1px solid var(--line);
  font-size:.9375rem; line-height:1.65; color:var(--ink-2);
}

.qa-list{display:flex; flex-direction:column; gap:.6rem; margin-top:1.75rem}
.qa{
  background:var(--canvas);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:0 clamp(1.1rem, 2.4vw, 1.5rem);
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.qa:hover{border-color:var(--line-strong)}
.qa[open]{background:var(--paper); border-color:var(--line-strong)}
.qa summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.15rem 2.6rem 1.15rem 0;
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:1.0625rem; line-height:1.35; letter-spacing:-.012em; color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:''; position:absolute; right:.35rem; top:1.45rem;
  width:.5rem; height:.5rem;
  border-right:1.5px solid var(--moss); border-bottom:1.5px solid var(--moss);
  transform:rotate(45deg); transform-origin:60% 60%;
  transition:transform .3s var(--ease);
}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa summary:focus-visible{outline:2px solid var(--moss); outline-offset:3px; border-radius:var(--r-sm)}
.qa p{
  padding:0 0 1.25rem; margin:0;
  font-size:.9375rem; line-height:1.7; color:var(--ink-2);
  text-wrap:pretty; max-width:68ch;
}

.cta-band__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(1.5rem, 3vw, 2.5rem);
}
.cta-band__inner > div:first-child{max-width:38ch}
.cta-band .section__sub{margin:.45rem 0 0}
.cta-band__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
}

a.guide--link{
  display:flex; text-decoration:none; color:inherit;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
a.guide--link:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
  box-shadow:var(--shadow);
}
a.guide--link:focus-visible{outline:2px solid var(--moss); outline-offset:3px}
.guide__cta-text{
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.8125rem; font-weight:600; letter-spacing:.04em;
  color:var(--moss);
  display:inline-flex; align-items:center; gap:.4rem;
  transition:gap .35s var(--ease), color .35s var(--ease);
}
a.guide--link:hover .guide__cta-text{gap:.7rem; color:var(--moss)}
.guide--ask .guide__cta-text{border-top-color:var(--line-inv); color:var(--moss-soft)}

@media (max-width:760px){
  .cta-band__inner{flex-direction:column; align-items:flex-start}
  .cta-band__actions{width:100%}
  .qa summary{font-size:1rem}
}

@media (max-width:760px){ .learn__grid{grid-template-columns:1fr} }

/* Above-the-fold action row on inner pages (no hero) */
.page-actions{
  display:flex; flex-wrap:wrap; gap:.85rem; align-items:center;
  margin:1.6rem 0 2.2rem;
}
.page-actions--center{justify-content:center; text-align:center}
.page-actions .btn{flex:0 1 auto}
.page-actions .btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.page-actions .btn--ghost:hover{background:rgba(20,23,26,.05); border-color:var(--ink)}

@media (max-width:560px){
  .page-actions{gap:.7rem}
  .page-actions .btn{flex:1 1 100%; justify-content:center}
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .nav__links{gap:1.1rem}
  .nav__links a{font-size:.75rem}
  .nav__phone{font-size:.75rem}
  .nav__actions{gap:.85rem}
}
@media (max-width:1024px){
  .promise__grid{grid-template-columns:1fr; gap:2.5rem}
  .pillars{grid-template-columns:1fr; gap:2rem}
  .projects{grid-template-columns:1fr; gap:3rem}
  .craft__grid{grid-template-columns:1fr}
  .craft__figure--wide{grid-column:1 / -1}
  .craft__figure:not(.craft__figure--wide) img{flex:none; min-height:0}
  .about__grid{grid-template-columns:1fr; gap:2.5rem}
  .about__media img{aspect-ratio:3/2}
  .area__grid{grid-template-columns:1fr; gap:3rem}
  .footer__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  :root{--nav-h:66px}
  .nav__links{display:none}
  .nav__phone{display:none}
  .nav__burger{display:flex}
  .nav__actions{margin-left:auto; gap:.75rem}
  .nav__actions .btn{display:none}
  .timeline{grid-template-columns:1fr 1fr; gap:2rem}
  .field-row{grid-template-columns:1fr}
  .sticky-cta{display:flex}
  body.has-sticky-cta{padding-bottom:5.5rem}
  .form-progress__steps li{font-size:0; gap:0}
  .form-progress__steps li span{font-size:.625rem}
  .footer__grid{grid-template-columns:1fr; gap:2.25rem}
  .compare__stage{aspect-ratio:4/3}
}

@media (max-width:560px){
  .hero{min-height:auto; padding-bottom:2rem}
  .hero__title{font-size:clamp(2.6rem, 13vw, 3.4rem)}
  .hero__cta{flex-direction:column; align-items:stretch}
  .hero__cta .btn{width:100%}
  .hero__meta{flex-direction:column; gap:.5rem}
  .craft__side{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .area__lists{grid-template-columns:1fr; gap:2rem}
  .form-card{padding:1.5rem 1.25rem}
  .step-nav{flex-direction:column-reverse; align-items:stretch}
  .step-nav .btn{width:100%}
  .step-nav > span{display:none}
  .compare__grip{width:2.5rem; height:2.5rem}
  .compare__badge{font-size:.5625rem; padding:.3rem .55rem}
  .form-success__actions{flex-direction:column}
  .form-success__actions .btn{width:100%}
}

/* ── Motion preferences ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1; transform:none}
  .hero__media img{animation:none; transform:scale(1.02)}
  .film__slide img{animation:none; filter:none}
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print{
  .nav,.sticky-cta,.film,.drawer,.hero__media,.compare__handle{display:none !important}
  body{background:#fff; color:#000}
  .section--dark{background:#fff; color:#000}
  .section--dark .h2,.section--dark h3,.project__desc{color:#000}
}