/* =========================================================
   Stonebrook Outdoor Co.
   1  Font + tokens          7  Hero            13 Booking
   2  Reset + base           8  Trust           14 FAQ
   3  Layout containers      9  What we do      15 Connect + form
   4  Buttons + bits        10  Featured        16 Footer
   5  Motion system         11  Before/After    17 Responsive
   6  Header + nav          12  Reviews         18 Reduced motion
   ========================================================= */

/* ---------- 1. font + tokens ---------- */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* palette */
  --spruce:#1E3A32;
  --pine:#12211C;
  --copper:#B4552A;
  --copper-deep:#8F4220;
  --granite:#4A4F4C;
  --moss:#7C9A6E;
  --limestone:#F4F0E8;
  --birch:#FDFCFA;

  --r:25px;
  --gutter:clamp(18px,1.9vw,30px);
  --wide:min(1390px, 100% - 2 * var(--gutter));
  --inset:min(1154px, 100% - 2 * var(--gutter));
  /* content width inside each panel while collapsed; the expanded state keeps
     this exact width so widening the panel never reflows its children */
  --panel-cw:calc(min(1154px, 100vw - var(--sbw,0px) - 2 * var(--gutter)) - 2 * clamp(22px,3.6vw,52px));
  --panel-cw-moss:calc(min(1154px, 100vw - var(--sbw,0px) - 2 * var(--gutter)) - 2 * clamp(20px,2.4vw,34px));
  --narrow:min(914px, 100% - 2 * var(--gutter));

  /* type scale, anchored to the 1440 Figma frame */
  --fs-h1:clamp(2.5rem, 6.806vw, 6.125rem);
  --fs-h2:clamp(1.85rem, 4.583vw, 4.125rem);
  --fs-h3:clamp(1.6rem, 2.92vw, 2.625rem);
  --fs-card:clamp(1.9rem, 4.44vw, 4rem);
  --fs-card-sm:clamp(1.15rem, 2.5vw, 2.25rem);
  --fs-faq:clamp(1.1rem, 1.944vw, 1.75rem);
  --fs-body:clamp(1rem, 1.18vw, 1.0625rem);
  --fs-sm:0.9375rem;
  --fs-xs:0.75rem;

  --sp-sec:clamp(58px, 6.95vw, 100px);

  /* running-bond paver courses, drawn as an inline SVG tile */
  --tex-page:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20d%3D%22M-1%201L1%20-1M0%2014%20L14%200M13%2015%20L15%2013%22%20stroke%3D%22rgb%2874%2C79%2C76%29%22%20stroke-opacity%3D%22.055%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
  --tex-dark:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2260%22%20viewBox%3D%220%200%20120%2060%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgb%28253%2C252%2C250%29%22%20stroke-opacity%3D%22.085%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%20.5H120M0%2030.5H120%22%2F%3E%3Cpath%20d%3D%22M30.5%200V30M90.5%200V30%22%2F%3E%3Cpath%20d%3D%22M.5%2030V60M60.5%2030V60%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --tex-moss:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2260%22%20viewBox%3D%220%200%20120%2060%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgb%2818%2C33%2C28%29%22%20stroke-opacity%3D%22.14%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%20.5H120M0%2030.5H120%22%2F%3E%3Cpath%20d%3D%22M30.5%200V30M90.5%200V30%22%2F%3E%3Cpath%20d%3D%22M.5%2030V60M60.5%2030V60%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --tex-size:120px 60px;
  --tex-page-size:14px 14px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}

/* ---------- 2. reset + base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:110px;
  overflow-x:clip;
}
body{
  margin:0;
  overflow-x:clip;
  /* colour first, then the grain: the shorthand would wipe the image out */
  background-color:var(--limestone);
  background-image:var(--tex-page);
  background-size:var(--tex-page-size);
  background-attachment:fixed;
  color:var(--granite);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,blockquote,address{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
address{font-style:normal}
cite{font-style:normal}
::selection{background:var(--moss);color:var(--pine)}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--spruce);color:var(--birch);padding:14px 22px;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

:focus-visible{outline:2.5px solid var(--copper);outline-offset:3px;border-radius:4px}

/* headings */
.h2,.h3{
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--spruce);
}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3)}
.h2--moss{color:var(--moss)}
.h2--light,.h3--light{color:var(--birch)}
.h2--center{text-align:center}

/* image placeholder (LQIP blurs up behind the real file) */
.ph{position:relative;overflow:hidden;background-size:cover;background-position:center;background-color:#dcd8cf}
.ph__img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.ph__img.is-ready{opacity:1}

/* ---------- 3. layout containers ---------- */
.wrap{width:var(--wide);margin-inline:auto}
.inset{width:var(--inset);margin-inline:auto}
.narrow{width:var(--narrow);margin-inline:auto}

/* ---------- 4. buttons + small parts ---------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:.7em;
  padding:16px 28px;
  border-radius:var(--r);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.085em;
  text-transform:uppercase;
  line-height:1;
  overflow:hidden;
  isolation:isolate;
  transition:color .38s var(--ease), transform .38s var(--ease), box-shadow .38s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:translateY(101%);
  transition:transform .55s var(--ease-io);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:active{transform:scale(.975)}
.btn__t{position:relative}
.btn__a{display:block;width:1.05em;overflow:hidden;flex:none}
.btn__a i{display:flex;width:200%;transform:translateX(-50%);transition:transform .55s var(--ease-io)}
.btn__a svg{width:1.05em;height:1.05em;flex:none}
.btn:hover .btn__a i,.btn:focus-visible .btn__a i{transform:translateX(0)}

.btn--copper{background:var(--copper);color:var(--birch)}
.btn--copper::before{background:var(--pine)}
.btn--light{background:var(--birch);color:var(--spruce)}
.btn--light::before{background:var(--spruce)}
.btn--light:hover,.btn--light:focus-visible{color:var(--birch)}
.btn--ghost{color:var(--birch);box-shadow:inset 0 0 0 1.5px rgba(253,252,250,.55);background:rgba(253,252,250,.07);backdrop-filter:blur(6px)}
.btn--ghost::before{background:var(--birch)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--spruce);box-shadow:inset 0 0 0 1.5px var(--birch)}
.btn--outline{color:var(--spruce);box-shadow:inset 0 0 0 1.5px rgba(30,58,50,.32)}
.btn--outline::before{background:var(--spruce)}
.btn--outline:hover,.btn--outline:focus-visible{color:var(--birch);box-shadow:inset 0 0 0 1.5px var(--spruce)}
.btn--sm{padding:15px 26px;font-size:.75rem}

/* round icon button */
.rnd{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--spruce);
  box-shadow:inset 0 0 0 1.3px rgba(30,58,50,.4);
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
.rnd svg{width:15px;height:15px}
.rnd:hover{background:var(--spruce);color:var(--birch);box-shadow:inset 0 0 0 1.3px var(--spruce);transform:scale(1.08)}
.rnd--light{color:var(--birch);box-shadow:inset 0 0 0 1.3px rgba(253,252,250,.4)}
.rnd--light:hover{background:var(--birch);color:var(--pine);box-shadow:inset 0 0 0 1.3px var(--birch)}
.rnd[disabled]{opacity:.3;pointer-events:none}
.pcar__step{display:none}

/* pagination dots */
.dots{display:flex;align-items:center;gap:7px}
.dot{
  width:8px;height:8px;border-radius:99px;
  background:rgba(74,79,76,.3);
  transition:width .5s var(--ease),background .35s var(--ease);
}
.dot.is-on{width:34px;background:var(--copper)}

/* corner badge on cards */
.badge{
  position:absolute;top:22px;right:22px;z-index:3;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--birch);color:var(--spruce);
  transition:transform .5s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.badge svg{width:19px;height:19px}

.tag{
  position:absolute;top:20px;right:20px;z-index:3;
  padding:7px 14px;border-radius:99px;
  font-size:.625rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--birch);
  box-shadow:inset 0 0 0 1px rgba(253,252,250,.5);
  background:rgba(18,33,28,.32);
  backdrop-filter:blur(8px);
}

.ring{
  flex:none;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.4px var(--copper);
  color:var(--copper);
  transition:background .4s var(--ease),color .4s var(--ease);
}
.ring svg{width:20px;height:20px}

.stretch{position:absolute;inset:0;z-index:4}

/* ---------- 5. motion system ---------- */
[data-reveal]{
  opacity:0;
  transition:opacity .85s var(--ease) calc(var(--i,0) * 85ms),
             transform 1.05s var(--ease) calc(var(--i,0) * 85ms);
}
[data-reveal="up"]{transform:translate3d(0,46px,0)}
[data-reveal="left"]{transform:translate3d(-54px,0,0)}
[data-reveal="right"]{transform:translate3d(54px,0,0)}
[data-reveal].is-in{opacity:1;transform:none}

/* word-by-word clip reveal for headings */
.sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.09em;margin-bottom:-.09em}
.sw i{
  display:inline-block;font-style:inherit;
  transform:translateY(108%);
  transition:transform 1s var(--ease) calc(var(--w,0) * 55ms);
}
.is-in .sw i{transform:translateY(0)}

/* ---------- 6. header + nav ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .45s var(--ease),box-shadow .45s var(--ease),transform .5s var(--ease);
}
.hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,33,28,.55),rgba(18,33,28,0));
  transition:opacity .45s var(--ease);
}
.hdr.is-stuck{background:rgba(30,58,50,.93);backdrop-filter:blur(14px);box-shadow:0 12px 40px -22px rgba(18,33,28,.9)}
.hdr.is-stuck::before{opacity:0}


.hdr__inner{
  width:var(--wide);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);
  min-height:0;
  padding:17px 0;
  transition:padding .45s var(--ease);
}
.hdr.is-stuck .hdr__inner{padding:11px 0}
/* size the image directly: a percentage height against a shrink-to-fit
   anchor is circular, and the browser falls back to the intrinsic width */
.hdr__logo{flex:none;display:block;line-height:0}
.hdr__logo img{width:auto;max-width:none;height:clamp(76px,6.6vw,96px);transition:height .45s var(--ease)}
.hdr.is-stuck .hdr__logo img{height:clamp(44px,3.6vw,52px)}

.nav{margin-inline:auto}
.nav__list{display:flex;align-items:center;gap:clamp(18px,3.2vw,56px)}
.nav__item{position:relative;z-index:2}
.nav__item--has-menu{display:flex;align-items:center;gap:2px}
.nav__link{
  position:relative;display:inline-flex;align-items:center;
  padding:10px 0;
  color:var(--birch);
  font-weight:500;
  font-size:clamp(1rem,1.32vw,1.1875rem);
  transition:font-size .45s var(--ease);
}
.hdr.is-stuck .nav__link{font-size:clamp(.9375rem,1.18vw,1.0625rem)}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__item:hover .nav__link::after,.nav__link:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav__toggle{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 2px;color:var(--birch);
}
.nav__chev{width:12px;height:12px;transition:transform .4s var(--ease)}
.nav__item--has-menu:hover .nav__chev{transform:rotate(180deg)}
.nav__item--has-menu:hover .nav__toggle{color:var(--birch)}

.nav__menu{
  position:absolute;top:100%;left:-24px;margin-top:0;
  min-width:232px;width:max-content;max-width:min(340px,42vw);padding:12px;
  background:var(--birch);
  border-radius:var(--r);
  box-shadow:0 26px 60px -26px rgba(18,33,28,.55);
  z-index:3;
  opacity:0;visibility:hidden;
  transform:translateY(10px) scale(.97);
  transform-origin:top left;
  transition:opacity .38s var(--ease),transform .45s var(--ease),visibility .38s;
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.nav__menu a{
  display:block;padding:10px 16px;border-radius:16px;
  color:var(--spruce);font-size:1rem;font-weight:500;white-space:nowrap;
  opacity:0;transform:translateX(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.nav__item--has-menu:hover .nav__menu a,
.nav__item--has-menu:focus-within .nav__menu a{opacity:1;transform:none}
.nav__menu li:nth-child(1) a{transition-delay:.05s}
.nav__menu li:nth-child(2) a{transition-delay:.1s}
.nav__menu li:nth-child(3) a{transition-delay:.15s}
.nav__menu li:nth-child(4) a{transition-delay:.2s}
.nav__menu li:nth-child(5) a{transition-delay:.25s}
.nav__menu a:hover{background:var(--limestone);color:var(--copper-deep)}

.hdr__cta{flex:none}
.nav__foot{display:none}
.nav__social{display:flex;gap:12px}
.nav__social a{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:var(--birch);
  box-shadow:inset 0 0 0 1.2px rgba(253,252,250,.35);
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
}
.nav__social svg{width:20px;height:20px}
.nav__social a:hover{background:var(--copper);color:var(--birch);box-shadow:inset 0 0 0 1.2px var(--copper)}
.hdr__progress{position:relative;z-index:0;height:2px;background:var(--copper);transform:scaleX(0);transform-origin:left;will-change:transform}

.burger{display:none;flex:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:1.8px;background:var(--birch);transition:transform .45s var(--ease),opacity .3s}
.burger span:first-child{top:19px}
.burger span:last-child{top:25px}
.burger.is-on span:first-child{transform:translateY(3px) rotate(45deg)}
.burger.is-on span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ---------- 7. hero ---------- */
.hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:172px 0 clamp(38px,5vw,64px);
  overflow:hidden;
  background:var(--pine);
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__slide{
  position:absolute;inset:0;margin:0;
  opacity:0;
  transition:opacity 1.5s var(--ease);
}
.hero__slide.is-on{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hero__slide.is-on img{animation:kb 9s linear forwards}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1.14)}}

.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(18,33,28,.86) 0%,rgba(18,33,28,.55) 42%,rgba(18,33,28,.18) 72%,rgba(18,33,28,.42) 100%),
    linear-gradient(0deg,rgba(18,33,28,.62) 0%,rgba(18,33,28,0) 42%);
}

.hero__inner{
  width:var(--wide);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:48px;
}
.hero__title{
  max-width:15ch;
  font-size:var(--fs-h1);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--birch);
}
.hero__title em{font-style:normal;color:var(--moss)}
.hero__sub{
  margin-top:clamp(18px,2vw,26px);
  max-width:46ch;
  color:rgba(253,252,250,.88);
  font-size:clamp(1rem,1.25vw,1.125rem);
}
.hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,38px)}

.hero__copy > *{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.hero__copy > .hero__title{transform:none}
body.is-ready .hero__copy > *{opacity:1;transform:none}
body.is-ready .hero__sub{transition-delay:.5s}
body.is-ready .hero__btns{transition-delay:.62s}

/* hero photo meta card */
.shot{
  width:min(392px,42vw);
  opacity:0;transform:translateX(46px);
  transition:opacity 1s var(--ease) .55s,transform 1.1s var(--ease) .55s;
}
body.is-ready .shot{opacity:1;transform:none}
.shot__box{
  position:relative;
  padding:22px 24px 24px;
  border-radius:var(--r);
  background:rgba(18,33,28,.42);
  box-shadow:inset 0 0 0 1px rgba(253,252,250,.16);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:var(--birch);
  overflow:hidden;
}
.shot__top{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.shot__pin{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.3px rgba(253,252,250,.75);
}
.shot__pin svg{width:17px;height:17px}
.shot__loc{
  font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:500;
  color:rgba(253,252,250,.75);
}
.shot__go{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(253,252,250,.8);
  transition:color .35s var(--ease);
}
.shot__go svg{
  width:32px;height:32px;padding:8px;border-radius:50%;
  background:var(--birch);color:var(--spruce);
  transition:transform .45s var(--ease);
}
.shot__go:hover{color:var(--birch)}
.shot__go:hover svg{transform:rotate(45deg)}
.shot__title{
  font-size:clamp(1.35rem,1.94vw,1.75rem);
  font-weight:600;
  line-height:1.15;letter-spacing:-.01em;
}
.shot__text{margin-top:8px;font-size:.875rem;line-height:1.5;color:rgba(253,252,250,.78)}
.shot [data-shot]{display:block;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.shot.is-swapping [data-shot]{opacity:0;transform:translateY(12px)}
.shot.is-swapping [data-shot="title"]{transition-delay:.04s}
.shot.is-swapping [data-shot="text"]{transition-delay:.08s}

.shot__bar{display:flex;gap:8px;margin-top:16px;padding-inline:4px}
.shot__seg{position:relative;flex:1;height:16px;display:flex;align-items:center;cursor:pointer}
.shot__seg::before{content:"";width:100%;height:2.5px;border-radius:2px;background:rgba(253,252,250,.28)}
.shot__seg i{position:absolute;left:0;top:50%;margin-top:-1.25px;height:2.5px;width:0;border-radius:2px;background:var(--birch)}
.shot__seg.is-done i{width:100%}
.shot__seg.is-on i{animation:fill 7s linear forwards}
@keyframes fill{from{width:0}to{width:100%}}

.hero__hint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(253,252,250,.6);
  opacity:0;transition:opacity .8s var(--ease) 1.3s;
}
body.is-ready .hero__hint{opacity:1}
.hero__hint i{width:1px;height:26px;background:linear-gradient(rgba(253,252,250,.7),transparent);animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 8. trust ---------- */
.trust{padding:clamp(46px,5.4vw,78px) 0 clamp(22px,2.5vw,36px)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.trust__item{text-align:center}
.trust__n{
  display:block;
  font-size:var(--fs-h2);
  font-weight:600;
  line-height:1;letter-spacing:-.02em;
  color:var(--moss);
  font-variant-numeric:tabular-nums;
}
.trust__l{display:block;margin-top:12px;font-size:clamp(.875rem,1.18vw,1.0625rem);color:var(--granite)}

/* ---------- 9. what we do ---------- */
.svc{padding:clamp(26px,3vw,42px) 0 var(--sp-sec)}
.svc .h2{margin-bottom:clamp(26px,3.1vw,44px)}
.svc__viewport{container-type:inline-size;overflow:hidden;border-radius:var(--r);cursor:grab}
.svc__viewport.is-grabbing{cursor:grabbing}
.svc__track{
  --sw:20.99cqw;
  --swa:43.77cqw;
  --sg:2.086cqw;
  display:flex;
  gap:var(--sg);
  transform:translateX(calc(var(--slead,0cqw) - var(--sp,0) * (var(--sw) + var(--sg))));
  transition:transform .95s var(--ease-io);
}
.svc__card{
  position:relative;flex:0 0 var(--sw);
  height:clamp(360px,37.9vw,546px);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--spruce);
  /* must restate the reveal transition; a bare `transition` here would replace it */
  transition:flex-basis .95s var(--ease-io),
             opacity .9s var(--ease) calc(var(--i,0) * 110ms),
             transform 1.1s var(--ease) calc(var(--i,0) * 110ms);
}
.svc__card.is-active{flex-basis:var(--swa)}
.svc__media{position:absolute;inset:0}
.svc__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(18,33,28,.94) 0%,rgba(18,33,28,.6) 28%,rgba(18,33,28,.05) 62%);
}
.svc__card .ph__img{transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.svc__card:hover .ph__img{transform:scale(1.05)}
.svc__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(20px,2.2vw,32px);
  color:var(--birch);
}
.svc__t{
  font-size:var(--fs-card-sm);
  font-weight:600;
  line-height:1.05;letter-spacing:-.02em;
  transition:font-size .95s var(--ease-io);
}
.svc__card.is-active .svc__t{font-size:var(--fs-card)}
.svc__x{
  margin-top:10px;max-width:32ch;
  font-size:clamp(.8125rem,1.02vw,.9375rem);
  line-height:1.45;
  color:rgba(253,252,250,.84);
  transition:max-width .95s var(--ease-io);
}
.svc__card.is-active .svc__x{max-width:44ch}
.svc__card:hover .badge{background:var(--copper);color:var(--birch);transform:rotate(45deg)}
.svc__nav,.pcar__nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  margin-top:clamp(22px,2.4vw,34px);
}
.pager{grid-column:2;display:flex;justify-content:center;align-items:center;gap:18px}
.nav-cta{grid-column:3;justify-self:end}

/* ---------- 10. featured projects ---------- */
.feat{padding-bottom:var(--sp-sec)}
.panel{
  --pad:clamp(22px,3.6vw,52px);
  width:var(--inset);
  margin-inline:auto;
  border-radius:var(--r);
  overflow:hidden;
  padding:clamp(44px,5.4vw,78px) var(--pad) clamp(46px,6.2vw,90px);
  transition:width 1.15s var(--ease-io),
             border-radius 1.15s var(--ease-io),
             padding 1.15s var(--ease-io);
}
.panel--pine{
  background-color:var(--pine);
  background-image:var(--tex-dark);
  background-size:var(--tex-size);
  color:rgba(253,252,250,.82);
}
.panel--moss{
  --pad:clamp(20px,2.4vw,34px);
  background-color:var(--moss);
  background-image:var(--tex-moss);
  background-size:var(--tex-size);
  color:var(--spruce);
  padding-block:clamp(20px,2.4vw,34px);
  padding-inline:var(--pad);
}
.panel--moss.panel.is-open{
  --pad:max(20px, calc((100vw - var(--sbw,0px) - var(--panel-cw-moss)) / 2));
}
.panel.is-open{
  --pad:max(22px, calc((100vw - var(--sbw,0px) - var(--panel-cw)) / 2));
  width:100%;border-radius:0;
}

.panel__head{text-align:center;max-width:58ch;margin:0 auto clamp(30px,3.4vw,46px)}
.panel__head p{margin-top:16px;font-size:clamp(.9375rem,1.18vw,1.0625rem)}

.pcar{
  container-type:inline-size;
  position:relative;
  overflow:hidden;
  touch-action:pan-y;
  margin-inline:calc(-1 * var(--rail-bleed, clamp(22px,3.6vw,52px)));
  transition:margin 1.15s var(--ease-io),
             opacity .9s var(--ease) calc(var(--i,0) * 110ms),
             transform 1.1s var(--ease) calc(var(--i,0) * 110ms);
}
.pcar__track{
  --pcw:79.4cqw;
  --pgap:6.4cqw;
  display:flex;gap:var(--pgap);
  transform:translateX(calc(var(--lead,0cqw) - var(--i,0) * (var(--pcw) + var(--pgap))));
  transition:transform 1s var(--ease-io);
}
.pcar__card{
  position:relative;flex:0 0 var(--pcw);
  aspect-ratio:2.373;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--spruce);
  filter:brightness(.6) saturate(.82);
  transition:filter 1s var(--ease-io);
}
.pcar__card.is-on{filter:none}
.pcar__card .ph__img{transform:scale(1.07);transition:opacity .7s var(--ease),transform 1.5s var(--ease)}
.pcar__card.is-on .ph__img{transform:scale(1)}
.pcar__media{position:absolute;inset:0}
.pcar__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(18,33,28,.88) 0%,rgba(18,33,28,.3) 34%,rgba(18,33,28,0) 62%);
}
.pcar__t{
  position:absolute;left:clamp(20px,2.4vw,34px);bottom:clamp(18px,2.2vw,30px);right:clamp(20px,2.4vw,34px);z-index:2;
  font-size:clamp(1.15rem,2.08vw,1.875rem);
  font-weight:600;
  line-height:1.12;letter-spacing:-.015em;
  color:var(--birch);
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease) .18s,transform .8s var(--ease) .18s;
}
.pcar__card.is-on .pcar__t{opacity:1;transform:none}
.pcar__card .tag{opacity:0;transform:translateY(-8px);transition:opacity .6s var(--ease) .26s,transform .6s var(--ease) .26s}
.pcar__card.is-on .tag{opacity:1;transform:none}

.peek{
  position:absolute;top:50%;z-index:6;
  width:clamp(64px,7cqw,86px);aspect-ratio:1;
  border-radius:50%;
  display:grid;place-items:center;
  color:var(--birch);
  box-shadow:inset 0 0 0 1.4px rgba(253,252,250,.75);
  background:rgba(18,33,28,.2);
  backdrop-filter:blur(4px);
  font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  transform:translateY(-50%) scale(1);
  transition:background .4s var(--ease),color .4s var(--ease),transform .5s var(--ease),opacity .4s var(--ease),box-shadow .4s var(--ease);
}

.dots--light .dot{position:relative;overflow:hidden;background:rgba(253,252,250,.26)}
.dots--light .dot.is-on{width:46px;background:rgba(253,252,250,.26)}
.dots--light .dot i{position:absolute;inset:0;width:0;border-radius:99px;background:var(--copper)}
.dots--light .dot.is-on i{animation:fill 5.5s linear forwards}
.dots--light .dot:hover{background:rgba(253,252,250,.5)}

.peek--prev{left:2.6cqw}
.peek--next{right:2.6cqw}
.peek:hover{background:var(--birch);color:var(--spruce);transform:translateY(-50%) scale(1.09);box-shadow:inset 0 0 0 1.4px var(--birch)}
.peek[disabled]{opacity:0;pointer-events:none;transform:translateY(-50%) scale(.7)}

/* ---------- 11. before / after ---------- */
.ba-sec{padding-bottom:var(--sp-sec)}
.ba-sec .h2{margin-bottom:clamp(26px,3.1vw,44px)}
.ba{
  position:relative;
  aspect-ratio:2.35;
  border-radius:var(--r);
  overflow:hidden;
  cursor:ew-resize;
  touch-action:pan-y;
  user-select:none;
  background:var(--spruce);
}
.ba__base,.ba__clip{position:absolute;inset:0}
.ba__clip{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__before{position:absolute;inset:0}
.ba__base img,.ba__before img{width:100%;height:100%;object-fit:cover}
.ba__line{
  position:absolute;top:0;bottom:0;left:var(--pos);
  width:3px;margin-left:-1.5px;
  background:var(--birch);
  box-shadow:0 0 18px rgba(18,33,28,.5);
  pointer-events:none;
}
.ba__grab{
  position:absolute;top:50%;left:var(--pos);
  width:clamp(52px,4.6vw,64px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--birch);color:var(--spruce);
  display:grid;grid-auto-flow:column;place-content:center;gap:2px;
  box-shadow:0 10px 34px -10px rgba(18,33,28,.7);
  cursor:grab;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.ba__grab svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.ba__grab:hover{transform:translate(-50%,-50%) scale(1.08)}
.ba__grab:hover svg:first-child{transform:translateX(-2px)}
.ba__grab:hover svg:last-child{transform:translateX(2px)}
.ba.is-dragging .ba__grab{cursor:grabbing;transform:translate(-50%,-50%) scale(1.12)}
.ba__tag{
  position:absolute;bottom:18px;z-index:2;
  padding:7px 14px;border-radius:99px;
  font-size:.625rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--birch);background:rgba(18,33,28,.42);
  box-shadow:inset 0 0 0 1px rgba(253,252,250,.35);
  backdrop-filter:blur(8px);
  pointer-events:none;
}
.ba__tag--l{left:18px}
.ba__tag--r{right:18px}
.ba__cta{display:flex;justify-content:center;margin-top:clamp(22px,2.6vw,34px)}

/* ---------- 12. reviews ---------- */
.revs{padding-bottom:var(--sp-sec)}
.revs .h2{margin-bottom:clamp(26px,3.1vw,42px)}
.revs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.3vw,46px)}
.rev{max-width:44ch}
.rev__q{
  display:block;
  font-size:3.25rem;line-height:.6;
  font-weight:600;
  color:var(--spruce);
  margin-bottom:26px;
}
.rev__body p,.rev__who{transition:opacity .5s var(--ease),transform .6s var(--ease)}
/* quotes rotate and vary in length: reserve the tallest so the swap
   never resizes the row and pushes the rest of the page around */
.rev__body p{
  margin:0;
  min-height:calc(4 * 1.55em);
  font-size:clamp(.9375rem,1.18vw,1.0625rem);
  color:var(--granite);
}
.rev__who{display:block;margin-top:20px}
.rev__who b{
  display:block;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;color:var(--spruce);
}
.rev__who span{display:block;margin-top:3px;font-size:.8125rem;color:var(--granite)}
.rev.is-out .rev__body p,.rev.is-out .rev__who{opacity:0;transform:translateY(-10px)}

/* ---------- gallery ---------- */
.gal{padding-bottom:var(--sp-sec)}
.gal .h2{margin-bottom:clamp(24px,2.8vw,40px)}
.gal__grid{
  --gg:clamp(12px,1.4vw,20px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gg);
}
/* the media is absolutely positioned, so the tile carries no intrinsic
   height: every tile gets the same explicit ratio */
.gal__item{min-width:0;aspect-ratio:3/2}
.gal__btn{
  position:relative;display:block;width:100%;height:100%;
  border-radius:var(--r);overflow:hidden;
  background:var(--spruce);
  cursor:zoom-in;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.gal__media{position:absolute;inset:0;display:block}
.gal__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(18,33,28,.82) 0%,rgba(18,33,28,.18) 42%,rgba(18,33,28,0) 68%);
  opacity:0;transition:opacity .5s var(--ease);
}
.gal__btn .ph__img{transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.gal__btn:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(18,33,28,.6)}
.gal__btn:hover .ph__img,.gal__btn:focus-visible .ph__img{transform:scale(1.07)}
.gal__btn:hover .gal__media::after,.gal__btn:focus-visible .gal__media::after{opacity:1}
.gal__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:clamp(14px,1.4vw,20px);
  color:var(--birch);text-align:left;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .55s var(--ease);
}
.gal__cap b{font-size:.875rem;font-weight:600;line-height:1.3}
.gal__cap i{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--birch);color:var(--spruce);
}
.gal__cap svg{width:15px;height:15px}
.gal__btn:hover .gal__cap,.gal__btn:focus-visible .gal__cap{opacity:1;transform:none}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(16px,3vw,54px)}
.lb[hidden]{display:none}
.lb__scrim{position:absolute;inset:0;background:rgba(9,17,14,.93);opacity:0;transition:opacity .45s var(--ease);cursor:zoom-out}
.lb.is-on .lb__scrim{opacity:1}
.lb__fig{
  position:relative;margin:0;max-width:min(1180px,100%);
  opacity:0;transform:scale(.96) translateY(14px);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.lb.is-on .lb__fig{opacity:1;transform:none}
.lb__img{
  display:block;width:auto;max-width:100%;max-height:78vh;
  border-radius:var(--r);background:var(--spruce);
  transition:opacity .3s var(--ease);
}
.lb.is-swapping .lb__img{opacity:.25}
.lb__cap{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-top:16px;color:rgba(253,252,250,.82);font-size:var(--fs-sm);
}
.lb__cap em{font-style:normal;font-size:.75rem;letter-spacing:.1em;color:rgba(253,252,250,.5)}
.lb__x,.lb__nav{
  position:absolute;z-index:3;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;color:var(--birch);
  background:rgba(18,33,28,.5);
  box-shadow:inset 0 0 0 1.2px rgba(253,252,250,.32);
  backdrop-filter:blur(8px);
  transition:background .35s var(--ease),color .35s var(--ease),transform .4s var(--ease);
}
.lb__x{top:clamp(14px,2.4vw,30px);right:clamp(14px,2.4vw,30px)}
.lb__x svg{width:20px;height:20px}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__nav svg{width:20px;height:20px}
.lb__nav--prev{left:clamp(10px,2.2vw,30px)}
.lb__nav--next{right:clamp(10px,2.2vw,30px)}
.lb__x:hover,.lb__nav:hover{background:var(--birch);color:var(--pine)}
.lb__nav:hover{transform:translateY(-50%) scale(1.08)}
.lb__x:hover{transform:rotate(90deg)}

/* ---------- 13. booking ---------- */
.book{padding-bottom:var(--sp-sec)}
.book__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(22px,2.8vw,40px);align-items:center}
.book__copy{padding:clamp(10px,1.8vw,26px) clamp(6px,1vw,14px)}
.book__copy .h3{margin-bottom:18px}
.book__copy p{margin-bottom:26px;max-width:44ch;color:rgba(18,33,28,.82)}
.book__media{border-radius:var(--r);aspect-ratio:1.2;overflow:hidden}
.book__media img{width:100%;height:100%;object-fit:cover}

/* ---------- 14. faq ---------- */
.faq{padding-bottom:var(--sp-sec)}
.faq .h2{margin-bottom:clamp(28px,3.4vw,48px)}
.faq__row{border-top:1px solid rgba(74,79,76,.32)}
.faq__row:last-child{border-bottom:1px solid rgba(74,79,76,.32)}
.faq__row h3{margin:0;font-size:inherit;font-weight:inherit}
.faq__q{
  position:relative;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(20px,2.3vw,30px) 4px;
  text-align:left;
  font-size:var(--fs-faq);
  font-weight:600;
  letter-spacing:-.012em;line-height:1.25;
  color:var(--spruce);
}
.faq__q span{transition:transform .55s var(--ease),color .35s var(--ease)}
.faq__q:hover span{transform:translateX(8px);color:var(--copper-deep)}
.faq__i{position:relative;flex:none;width:20px;height:20px}
.faq__i::before,.faq__i::after{
  content:"";position:absolute;top:50%;left:0;width:100%;height:2px;margin-top:-1px;
  background:var(--spruce);border-radius:2px;
  transition:transform .55s var(--ease-io),background .35s var(--ease);
}
.faq__i::after{transform:rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__i::before{transform:rotate(180deg)}
.faq__q[aria-expanded="true"] .faq__i::after{transform:rotate(180deg)}
.faq__q[aria-expanded="true"]{color:var(--copper-deep)}
.faq__q[aria-expanded="true"] .faq__i::before,
.faq__q[aria-expanded="true"] .faq__i::after{background:var(--copper-deep)}
.faq__a{height:0;overflow:hidden;visibility:hidden;transition:height .6s var(--ease-io),visibility 0s linear .6s}
.faq__row.is-open .faq__a{visibility:visible;transition:height .6s var(--ease-io),visibility 0s}
.faq__inner{padding:0 60px clamp(24px,2.6vw,34px) 4px}
.faq__inner p{
  margin:0;max-width:62ch;
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease) .1s,transform .65s var(--ease) .1s;
}
.faq__row.is-open .faq__inner p{opacity:1;transform:none}

/* ---------- 15. connect + form ---------- */
.cnx{
  display:grid;grid-template-columns:1.34fr 1fr;
  border-radius:var(--r) var(--r) 0 0;
  overflow:hidden;
}
.cnx__left{position:relative;min-height:clamp(460px,46vw,640px);display:flex;align-items:flex-end;isolation:isolate}
.cnx__photo{position:absolute;inset:0;z-index:-2}
.cnx__photo img{width:100%;height:100%;object-fit:cover;will-change:transform}
.cnx__over{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(0deg,rgba(18,33,28,.95) 0%,rgba(18,33,28,.66) 34%,rgba(18,33,28,.2) 68%),
    linear-gradient(90deg,rgba(18,33,28,.6) 0%,rgba(18,33,28,.15) 60%);
}
.cnx__body{width:100%;padding:clamp(34px,4vw,64px) clamp(24px,3.4vw,58px)}
.cnx__info{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.4vw,40px);
  margin-top:clamp(26px,3vw,42px);
}
.cnx__info li{display:flex;align-items:flex-start;gap:16px;color:var(--birch)}
.cnx__info b{
  display:block;margin-bottom:6px;
  font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;
  color:rgba(253,252,250,.62);
}
.cnx__info address,.cnx__info a{display:block;font-size:var(--fs-sm);line-height:1.5;color:var(--birch)}
.cnx__info a{transition:color .3s var(--ease)}
.cnx__info a:hover{color:var(--moss)}
.cnx__info li:hover .ring{background:var(--copper);color:var(--birch)}

.cnx__right{
  background-color:var(--spruce);
  background-image:var(--tex-dark);
  background-size:var(--tex-size);
  display:flex;align-items:center;
}
.form__wrap{width:100%;padding:clamp(38px,4.2vw,72px) clamp(24px,3.2vw,56px)}
.form__note{margin:14px 0 clamp(24px,2.8vw,36px);max-width:44ch;color:rgba(253,252,250,.68);font-size:var(--fs-sm)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form__demo{
  grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:0 0 4px;padding:14px 18px;
  border-radius:18px;
  background:rgba(180,85,42,.14);
  box-shadow:inset 0 0 0 1.4px rgba(180,85,42,.5);
  font-size:.8125rem;line-height:1.5;color:rgba(253,252,250,.86);
}
.form__demo-tag{
  flex:none;padding:5px 11px;border-radius:99px;
  background:var(--copper);color:var(--birch);
  font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}
.form__demo span:last-child{flex:1 1 16ch;min-width:0}
.field{position:relative}
.field--full{grid-column:1/-1}
.field input,.field textarea{
  width:100%;
  padding:26px 20px 12px;
  background:rgba(18,33,28,.55);
  border:1px solid rgba(253,252,250,.14);
  border-radius:var(--r);
  color:var(--birch);
  font-size:var(--fs-sm);
  transition:background .35s var(--ease),border-color .35s var(--ease);
  resize:vertical;
}
.field textarea{min-height:160px;padding-top:32px}
.field input:hover,.field textarea:hover{background:rgba(18,33,28,.72)}
.field label{
  position:absolute;left:21px;top:19px;
  font-size:var(--fs-sm);color:rgba(253,252,250,.6);
  pointer-events:none;
  transform-origin:left top;
  transition:transform .38s var(--ease),color .38s var(--ease);
}
.field textarea ~ label{top:24px}
.field input:focus ~ label,.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,.field textarea:not(:placeholder-shown) ~ label{
  transform:translateY(-11px) scale(.72);
  color:var(--moss);
}
.field textarea:focus ~ label,.field textarea:not(:placeholder-shown) ~ label{transform:translateY(-16px) scale(.72)}
.field em{
  position:absolute;inset:0;border-radius:var(--r);
  border:1.6px solid var(--copper);
  opacity:0;transform:scale(1.035);
  pointer-events:none;
  transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.field input:focus ~ em,.field textarea:focus ~ em{opacity:1;transform:scale(1)}
.field.is-bad input,.field.is-bad textarea{border-color:#C9603A}
.form__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.btn--submit .btn__t{transition:opacity .3s var(--ease)}
.form__msg{margin:0;font-size:var(--fs-sm);color:var(--moss);opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.form__msg.is-on{opacity:1;transform:none}
.form.is-sent .field{opacity:.45;pointer-events:none;transition:opacity .5s var(--ease)}

/* ---------- prototype disclosure ---------- */
.proto{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--pine);
  border-top:1px solid rgba(253,252,250,.16);
  color:rgba(253,252,250,.74);
  transform:translateY(102%);
  transition:transform .8s var(--ease);
}
.proto.is-up{transform:none}
.proto__in{
  width:var(--wide);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);
  padding:14px 0;
}
.proto__tag{
  flex:none;align-self:flex-start;
  padding:6px 12px;border-radius:99px;
  background:var(--copper);color:var(--birch);
  font-size:.625rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
}
.proto p{margin:0;font-size:.8125rem;line-height:1.5;max-width:110ch}
.proto b{color:var(--birch);font-weight:600}
.proto__x{
  flex:none;margin-left:auto;align-self:flex-start;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--birch);
  box-shadow:inset 0 0 0 1.2px rgba(253,252,250,.3);
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.proto__x svg{width:16px;height:16px}
.proto__x:hover{background:var(--birch);color:var(--pine);transform:rotate(90deg)}
body{padding-bottom:var(--proto-h,0px)}

/* ---------- about page ---------- */
/* banner */
.pb{position:relative;isolation:isolate;padding:clamp(150px,15vw,210px) 0 clamp(52px,6vw,84px);background:var(--pine)}
.pb__media{position:absolute;inset:0;z-index:-2}
.pb__media img{width:100%;height:100%;object-fit:cover}
.pb__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(18,33,28,.9) 0%,rgba(18,33,28,.62) 46%,rgba(18,33,28,.3) 100%),
    linear-gradient(0deg,rgba(18,33,28,.6) 0%,rgba(18,33,28,0) 46%);
}
.pb__inner{position:relative}
.pb__title{
  max-width:19ch;margin-top:18px;
  font-size:clamp(2.15rem,5.2vw,4.5rem);
  font-weight:600;line-height:1.06;letter-spacing:-.02em;color:var(--birch);
}
.pb__sub{
  margin-top:clamp(16px,1.8vw,24px);max-width:56ch;
  color:rgba(253,252,250,.84);font-size:clamp(1rem,1.25vw,1.125rem);
}
.crumbs ol{display:flex;align-items:center;gap:10px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(253,252,250,.58)}
.crumbs li+li::before{content:"/";margin-right:10px;color:rgba(253,252,250,.4)}
.crumbs a{transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--birch)}

/* two column split */
.split{padding:var(--sp-sec) 0 0}
.split__grid{display:grid;grid-template-columns:1fr .82fr;gap:clamp(30px,4.4vw,72px);align-items:center}
.split--flip .split__media{order:-1}
.split__copy .h2{margin-bottom:20px}
.split__copy p{margin-bottom:16px;max-width:52ch}
.split__media{border-radius:var(--r);overflow:hidden;aspect-ratio:1.34}
.split__media img{width:100%;height:100%;object-fit:cover}

.area__list{margin:26px 0 18px;display:grid;gap:16px}
.area__list li{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:baseline;padding-bottom:16px;border-bottom:1px solid rgba(74,79,76,.22)}
.area__list b{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--spruce)}
.area__list span{font-size:var(--fs-sm);line-height:1.6}
.area__note{font-size:var(--fs-sm);color:var(--granite)}

/* process */
.proc{padding:var(--sp-sec) 0 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,34px)}
.step{position:relative;padding-top:26px;border-top:1px solid rgba(253,252,250,.22)}
.step__n{
  display:block;margin-bottom:16px;
  font-size:clamp(1.6rem,2.4vw,2.25rem);font-weight:600;line-height:1;
  color:var(--moss);
}
.step h3{margin-bottom:10px;font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:600;color:var(--birch);line-height:1.25}
.step p{font-size:.875rem;line-height:1.6;color:rgba(253,252,250,.74)}

/* values */
.vals{padding:var(--sp-sec) 0 0}
.vals .h2{margin-bottom:clamp(26px,3vw,42px)}
.vals__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px)}
.val{padding:clamp(24px,2.6vw,36px);border-radius:var(--r);background:var(--birch);box-shadow:0 24px 50px -40px rgba(18,33,28,.5)}
.val__i{
  display:grid;place-items:center;width:44px;height:44px;margin-bottom:20px;
  border-radius:50%;background:var(--moss);color:var(--pine);
}
.val__i svg{width:22px;height:22px}
.val h3{margin-bottom:10px;font-size:1.25rem;font-weight:600;color:var(--spruce)}
.val p{font-size:.9375rem;line-height:1.6}

.careers{padding:var(--sp-sec) 0 0}

/* closing cta */
.endcta{padding:var(--sp-sec) 0}
.endcta__box{text-align:center}
.endcta__box p{margin-top:14px;color:var(--granite)}
.endcta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(24px,2.6vw,34px)}

/* about: links out to the detail pages */
.more{padding:var(--sp-sec) 0 0}
.more__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)}
.more__card{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(26px,3vw,44px);border-radius:var(--r);
  background:var(--birch);box-shadow:0 24px 50px -40px rgba(18,33,28,.5);
}
.more__card h2{margin-bottom:12px;font-size:clamp(1.25rem,1.94vw,1.75rem);font-weight:600;line-height:1.2;letter-spacing:-.012em;color:var(--spruce)}
.more__card p{margin-bottom:24px;font-size:.9375rem;line-height:1.6}
.more__link{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:var(--copper-deep);
}
.more__link svg{width:16px;height:16px;transition:transform .45s var(--ease)}
.more__card:hover .more__link svg{transform:translateX(6px)}

/* process: compact numbered cards, two per row */
.stages{padding:var(--sp-sec) 0 0}
.stage__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,1.6vw,24px);
}
.stage{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"num when" "num title" "num body";
  column-gap:clamp(16px,1.6vw,22px);
  padding:clamp(22px,2.2vw,30px);
  border-radius:var(--r);
  background:var(--birch);
  box-shadow:0 24px 50px -42px rgba(18,33,28,.55);
}
.stage__n{
  grid-area:num;align-self:start;
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--spruce);color:var(--birch);
  font-size:.9375rem;font-weight:600;
}
.stage__when{
  grid-area:when;margin-bottom:6px;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--copper-deep);
}
.stage h2{
  grid-area:title;margin-bottom:8px;
  font-size:clamp(1.15rem,1.53vw,1.375rem);font-weight:600;
  line-height:1.2;letter-spacing:-.012em;color:var(--spruce);
}
.stage p{grid-area:body;font-size:.9375rem;line-height:1.6}

/* service area: town columns */
.towns{padding:var(--sp-sec) 0 0}
.towns .h2{margin-bottom:clamp(26px,3vw,42px)}
.towns__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
.town{padding:clamp(24px,2.6vw,36px);border-radius:var(--r);background:var(--birch);box-shadow:0 24px 50px -40px rgba(18,33,28,.5)}
.town h3{margin-bottom:8px;font-size:1.25rem;font-weight:600;color:var(--spruce)}
.town__note{display:block;margin-bottom:20px;font-size:.8125rem;line-height:1.5;color:var(--granite)}
.town ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.town li{
  position:relative;padding-left:16px;font-size:.875rem;color:var(--granite);
}
.town li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--moss)}
.towns__more{margin-top:clamp(22px,2.4vw,32px);max-width:70ch;font-size:var(--fs-sm)}

/* gallery page: filters */
.gal--page{padding:var(--sp-sec) 0 0}
.filts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(22px,2.6vw,34px)}
.filt{
  padding:11px 20px;border-radius:99px;
  box-shadow:inset 0 0 0 1.4px rgba(30,58,50,.26);
  font-size:.8125rem;font-weight:500;color:var(--spruce);
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
}
.filt:hover{box-shadow:inset 0 0 0 1.4px var(--spruce)}
.filt.is-on{background:var(--spruce);color:var(--birch);box-shadow:inset 0 0 0 1.4px var(--spruce)}
.gal__item[hidden]{display:none}
.filts__none{padding:40px 0;color:var(--granite)}

/* projects page */
.pjs{padding:var(--sp-sec) 0 0}
.pj__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.8vw,44px)}
.pj{display:flex;flex-direction:column}
.pj__media{
  position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;background:var(--spruce);
}
.pj__media .ph__img{transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.pj:hover .pj__media .ph__img{transform:scale(1.04)}
.pj__body{padding:clamp(18px,1.9vw,26px) 2px 0}
.pj__body h2{
  font-size:clamp(1.25rem,1.94vw,1.75rem);font-weight:600;
  line-height:1.15;letter-spacing:-.015em;color:var(--spruce);
}
.pj__place{
  display:inline-flex;align-items:center;gap:7px;margin:8px 0 12px;
  font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--copper-deep);
}
.pj__place svg{width:14px;height:14px}
.pj__body p{max-width:52ch;font-size:.9375rem;line-height:1.6}
.pj__meta{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(74,79,76,.22);
}
.pj__meta b{
  display:block;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--granite);margin-bottom:3px;
}
.pj__meta span{font-size:.875rem;color:var(--spruce);font-weight:500}

/* contact page */
.cform{padding:var(--sp-sec) 0 0}
.cform__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(26px,3.4vw,60px);align-items:start}
.cform__aside{display:grid;gap:clamp(24px,2.8vw,40px)}
.cinfo{display:grid;gap:22px}
.cinfo li{display:flex;align-items:flex-start;gap:16px}
.cinfo b{
  display:block;margin-bottom:6px;
  font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--granite);
}
.cinfo address,.cinfo a{display:block;font-size:1rem;line-height:1.55;color:var(--spruce)}
.cinfo a{transition:color .3s var(--ease)}
.cinfo a:hover{color:var(--copper-deep)}
.cinfo li:hover .ring{background:var(--copper);color:var(--birch)}
.cblock h2{margin-bottom:16px;font-size:1.125rem;font-weight:600;color:var(--spruce)}
.cblock .area__list{margin:0}
.cblock .hours__list + .area__note,
.cblock .area__list + .area__note{margin-top:16px}
.cform__card{
  padding:clamp(26px,3vw,44px);
  border-radius:var(--r);
  background-color:var(--spruce);
  background-image:var(--tex-dark);
  background-size:var(--tex-size);
}
.cform__card .form__note{margin-bottom:22px}

/* "before you write" link row */
.before{padding:var(--sp-sec) 0}
.before .h2{margin-bottom:clamp(22px,2.6vw,36px)}
.before__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.before__grid a{
  display:flex;flex-direction:column;height:100%;
  padding:clamp(20px,2.2vw,30px);border-radius:var(--r);
  background:var(--birch);box-shadow:0 24px 50px -42px rgba(18,33,28,.55);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.before__grid a:hover{transform:translateY(-4px);box-shadow:0 30px 56px -34px rgba(18,33,28,.5)}
.before__grid b{margin-bottom:8px;font-size:1.0625rem;font-weight:600;color:var(--spruce)}
.before__grid span{font-size:.875rem;line-height:1.55}
.before__grid i{
  display:grid;place-items:center;width:32px;height:32px;margin-top:18px;
  border-radius:50%;box-shadow:inset 0 0 0 1.2px rgba(30,58,50,.28);color:var(--spruce);
  transition:background .35s var(--ease),color .35s var(--ease),transform .4s var(--ease);
}
.before__grid i svg{width:15px;height:15px}
.before__grid a:hover i{background:var(--spruce);color:var(--birch);transform:translateX(4px)}

.hours__list{display:grid;gap:12px}
.hours__list li{
  position:relative;padding-left:18px;font-size:.9375rem;line-height:1.5;
}
.hours__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--moss);
}
.hours__list a{color:var(--copper-deep);transition:color .3s var(--ease)}
.hours__list a:hover{color:var(--spruce)}

/* services overview cards */
.svgrid{padding:var(--sp-sec) 0 0}
.svcard__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,26px)}
.svcard:first-child{grid-column:1 / -1}
.svcard__link{
  display:block;position:relative;height:100%;
  border-radius:var(--r);overflow:hidden;background:var(--spruce);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.svcard__link:hover{transform:translateY(-4px);box-shadow:0 30px 56px -30px rgba(18,33,28,.6)}
.svcard__media{position:absolute;inset:0;display:block}
.svcard__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(18,33,28,.92) 0%,rgba(18,33,28,.5) 44%,rgba(18,33,28,.08) 78%);
}
.svcard__link .ph__img{transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.svcard__link:hover .ph__img{transform:scale(1.05)}
.svcard__body{
  position:relative;z-index:2;display:flex;flex-direction:column;
  min-height:clamp(230px,24vw,300px);justify-content:flex-end;
  padding:clamp(22px,2.4vw,34px);color:var(--birch);
}
.svcard:first-child .svcard__body{min-height:clamp(260px,26vw,340px)}
.svcard__t{
  display:block;margin-bottom:8px;
  font-size:clamp(1.5rem,2.5vw,2.25rem);font-weight:600;
  line-height:1.1;letter-spacing:-.018em;
}
.svcard__x{display:block;max-width:42ch;font-size:.9375rem;line-height:1.55;color:rgba(253,252,250,.82)}
.svcard__go{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--moss);
}
.svcard__go svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.svcard__link:hover .svcard__go svg{transform:translateX(6px)}

/* service page: what is included */
.incs{padding:var(--sp-sec) 0 0}
.incs .h2{margin-bottom:clamp(24px,2.8vw,40px)}
.inc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,32px)}
.inc{display:grid;grid-template-columns:38px 1fr;gap:16px;align-items:start}
.inc__i{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--moss);color:var(--pine);
}
.inc__i svg{width:19px;height:19px}
.inc h3{margin-bottom:6px;font-size:1.0625rem;font-weight:600;color:var(--spruce);line-height:1.3}
.inc p{font-size:.9375rem;line-height:1.55}

/* service page: sibling links */
.sibs{padding:var(--sp-sec) 0 0}
.sibs__t{
  margin-bottom:16px;font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;color:var(--granite);
}
.sibs__list{display:flex;flex-wrap:wrap;gap:10px}
.sib{
  display:inline-block;padding:12px 20px;border-radius:99px;
  box-shadow:inset 0 0 0 1.4px rgba(30,58,50,.28);
  font-size:.875rem;font-weight:500;color:var(--spruce);
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
}
.sib:hover{background:var(--spruce);color:var(--birch);box-shadow:inset 0 0 0 1.4px var(--spruce)}
.sib.is-on{background:var(--moss);color:var(--pine);box-shadow:inset 0 0 0 1.4px var(--moss)}

/* careers: role cards */
.roles{padding:var(--sp-sec) 0 0}
.roles .h2{margin-bottom:clamp(24px,2.8vw,40px)}
.role__list{display:grid;gap:clamp(14px,1.6vw,20px)}
.role{
  padding:clamp(24px,2.6vw,36px);border-radius:var(--r);
  background:var(--birch);box-shadow:0 24px 50px -42px rgba(18,33,28,.55);
}
.role__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.role__head h3{font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:600;color:var(--spruce)}
.role__pay{
  padding:7px 14px;border-radius:99px;background:rgba(124,154,110,.24);
  font-size:.8125rem;font-weight:600;color:var(--spruce);white-space:nowrap;
}
.role p{max-width:64ch;font-size:.9375rem;line-height:1.6}
.role__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.role__tags li{
  padding:6px 13px;border-radius:99px;
  box-shadow:inset 0 0 0 1px rgba(74,79,76,.26);
  font-size:.75rem;color:var(--granite);
}

/* faq page: grouped questions */
.faq--page{padding:var(--sp-sec) 0 0}
.faq__group{
  margin:clamp(30px,3.4vw,48px) 0 6px;
  font-size:clamp(1.15rem,1.53vw,1.375rem);font-weight:600;
  letter-spacing:.005em;color:var(--copper-deep);
}
.faq__group:first-child{margin-top:0}

/* current page marker */
.nav__link.is-here::after{transform:scaleX(1);transform-origin:left}

/* ---------- 16. footer ---------- */
.ft{background-color:var(--pine);color:rgba(253,252,250,.72);padding:clamp(48px,5.4vw,78px) 0 26px}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(28px,3.4vw,56px)}
.ft__brand img{width:auto;height:clamp(96px,8.9vw,128px);max-width:none}
.ft__brand p{margin-top:20px;max-width:38ch;font-size:.8125rem;line-height:1.6;color:rgba(253,252,250,.6)}
.ft__social{display:flex;gap:12px;margin-top:26px}
.ft__social a{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--birch);
  box-shadow:inset 0 0 0 1.2px rgba(253,252,250,.35);
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.ft__social svg{width:19px;height:19px}
.ft__social a:hover{background:var(--copper);color:var(--birch);box-shadow:inset 0 0 0 1.2px var(--copper);transform:translateY(-3px)}
.ft__col h2{
  margin-bottom:18px;
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;
  color:var(--moss);
}
.ft__col li,.ft__col address{font-size:var(--fs-sm);line-height:2}
.ft__col a{position:relative;transition:color .3s var(--ease)}
.ft__col a:hover{color:var(--birch)}
.ft__hi{display:block;color:var(--copper)}
.ft__hi:hover{color:var(--birch)}
.ft__bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(36px,4vw,58px);padding-top:22px;
  border-top:1px solid rgba(253,252,250,.14);
  font-size:.75rem;color:rgba(253,252,250,.5);
}
.ft__bar small,.ft__bar a{font-size:.75rem}
.ft__bar ul{display:flex;gap:26px}
.ft__bar a{transition:color .3s var(--ease)}
.ft__bar a:hover{color:var(--birch)}

/* ---------- 17. responsive ---------- */
@media (max-width:1240px){
  .cform__card .form{grid-template-columns:1fr}
}

@media (max-width:1100px){
  .cnx{grid-template-columns:1fr}
  .cnx__left{min-height:clamp(420px,58vw,560px)}
  .ft__grid{grid-template-columns:1fr 1fr;row-gap:44px}
  .ft__brand{grid-column:1/-1}
}

@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr);row-gap:clamp(26px,3.4vw,40px)}
  .towns__grid{grid-template-columns:1fr;gap:16px}
  .inc__grid{grid-template-columns:repeat(2,1fr)}
  .before__grid{grid-template-columns:repeat(2,1fr)}
  .cform__grid{gap:clamp(22px,2.4vw,34px)}
  .town ul{grid-template-columns:repeat(3,1fr)}
  .vals__grid{grid-template-columns:1fr}
  .val{display:grid;grid-template-columns:44px 1fr;column-gap:20px;align-items:start}
  .val__i{grid-row:span 2;margin-bottom:0}
}

@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;align-items:start;gap:36px}
  .shot{width:min(430px,100%)}
  .trust__grid{grid-template-columns:repeat(2,1fr);gap:40px 24px}
  .trust__n{font-size:clamp(2.75rem,10.5vw,3.5rem)}
  .trust__l{font-size:1.0625rem;margin-top:10px}
  .revs__grid{grid-template-columns:1fr;gap:34px}
  .gal__grid{grid-template-columns:repeat(3,1fr)}
  .rev{max-width:56ch}
  .rev__body p{min-height:calc(3 * 1.55em)}
  .book__grid{grid-template-columns:1fr}
  .more__grid{grid-template-columns:1fr}
  .cform__grid{grid-template-columns:1fr;gap:34px}
  .before__grid{grid-template-columns:repeat(2,1fr)}
  .svcard__grid{grid-template-columns:1fr}
  .pj__grid{grid-template-columns:1fr;gap:30px}
  .cnx--page{border-radius:0}
  .svcard:first-child{grid-column:auto}
  .stage__grid{grid-template-columns:1fr}
  .split{padding-top:clamp(48px,9vw,72px)}
  .split__grid{grid-template-columns:1fr;gap:26px}
  .split--flip .split__media{order:0}
  .split__media{order:-1}
  .area__list li{grid-template-columns:1fr;gap:6px}
  .book__media{order:-1;aspect-ratio:16/10}
  .form{grid-template-columns:1fr}
  .cnx__info{grid-template-columns:1fr}
}

@media (max-width:820px){
  .hdr__inner{padding:16px 0}
  .burger{display:block;margin-left:6px}
  .hdr__logo img{height:58px}
  .hdr.is-stuck .hdr__logo img{height:46px}
  .hdr__cta{margin-left:auto;padding:11px 16px;font-size:.625rem;gap:.5em}
  .nav{
    position:fixed;inset:0;z-index:-1;
    margin:0;padding:104px var(--gutter) calc(40px + var(--proto-h, 0px));
    background:var(--spruce);
    overflow-y:auto;overflow-x:clip;
    overscroll-behavior:contain;
    display:flex;flex-direction:column;
    opacity:0;visibility:hidden;
    clip-path:circle(0% at calc(100% - 42px) 38px);
    transition:clip-path .75s var(--ease),opacity .3s var(--ease),visibility .3s;
  }
  .nav.is-open{opacity:1;visibility:visible;clip-path:circle(150% at calc(100% - 42px) 38px)}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__item{border-bottom:1px solid rgba(253,252,250,.12);opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .55s var(--ease)}
  .nav.is-open .nav__item{opacity:1;transform:none}
  .nav.is-open .nav__item:nth-child(1){transition-delay:.16s}
  .nav.is-open .nav__item:nth-child(2){transition-delay:.23s}
  .nav.is-open .nav__item:nth-child(3){transition-delay:.3s}
  .nav.is-open .nav__item:nth-child(4){transition-delay:.37s}
  .nav__item--has-menu{flex-wrap:wrap}
  .nav__link{flex:1;padding:20px 2px;font-size:1.375rem;font-weight:600}
  .nav__toggle{padding:20px 6px 20px 18px;margin-left:auto}
  .nav__menu{flex:1 1 100%}
  .nav__link::after{display:none}
  .nav__chev{width:18px;height:18px}
  .nav__item--has-menu.is-open .nav__chev{transform:rotate(180deg)}
  .nav__menu{
    position:static;min-width:0;padding:0 0 14px;
    background:none;box-shadow:none;border-radius:0;
    opacity:1;visibility:visible;transform:none;
    height:0;overflow:hidden;
    transition:height .5s var(--ease);
  }
  .nav__menu a{opacity:1;transform:none;transition-delay:0s !important;color:rgba(253,252,250,.72);padding:9px 2px;font-size:1rem}
  .nav__menu a:hover{background:none;color:var(--moss)}
  .nav__item--has-menu:hover .nav__menu,
  .nav__item--has-menu:focus-within .nav__menu{transform:none}

  .nav__foot{
    display:block;margin-top:auto;padding-top:34px;
    opacity:0;transform:translateY(18px);
    transition:opacity .5s var(--ease) .44s,transform .55s var(--ease) .44s;
  }
  .nav.is-open .nav__foot{opacity:1;transform:none}
  .nav__foot p{margin:22px 0 6px;font-size:.8125rem;line-height:1.5;color:rgba(253,252,250,.6)}
  .nav__mail{font-size:.8125rem;color:var(--copper)}
}

@media (max-width:760px){
  :root{--sp-sec:clamp(56px,13vw,84px)}
  .hero{padding-top:120px}
  .hero__hint{display:none}

  .svc__viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:0}
  .svc__viewport::-webkit-scrollbar{display:none}
  .svc__track{transform:none;gap:14px;padding-inline:0}
  .svc__card,.svc__card.is-active{flex-basis:82%;scroll-snap-align:start;height:clamp(400px,86vw,470px)}
  .svc__card .svc__t,.svc__card.is-active .svc__t{font-size:1.875rem}
  .svc__card .svc__x,.svc__card.is-active .svc__x{max-width:38ch}

  /* the inset-to-full-bleed move is only ~36px on a phone, so skip the
     animation entirely: full width from the start, no reflow, wider cards */
  .panel,.panel.is-open,.panel--moss.panel.is-open{
    --pad:clamp(18px,4.4vw,26px);
    width:100%;border-radius:0;
  }
  .pcar{--rail-bleed:clamp(18px,4.4vw,26px)}
  .pcar__track{--pcw:90cqw;--pgap:4cqw}
  .pcar__card{aspect-ratio:1.3}          /* 2.37 is a letterbox sliver at this width */
  .peek{display:none}                     /* replaced by the pager arrows below */
  .pcar__step{display:grid;width:38px;height:38px}
  .pcar__nav .pager{gap:14px}
  .pcar__card .tag{top:14px;right:14px}

  .ba{aspect-ratio:16/11}
  .ba__tag{bottom:12px;font-size:.5625rem;padding:6px 11px}
  .ba__tag--l{left:12px}
  .ba__tag--r{right:12px}

  .svc__nav,.pcar__nav{grid-template-columns:1fr;justify-items:center;gap:20px}
  .pager,.nav-cta{grid-column:1;justify-self:center}
  .proto__in{flex-wrap:wrap;padding:12px 0 14px}
  .proto p{font-size:.75rem;order:3;flex:1 1 100%}
  .proto__x{margin-left:auto}

  .steps{grid-template-columns:1fr;gap:22px}
  .town ul{grid-template-columns:repeat(2,1fr)}
  .stage__grid{grid-template-columns:1fr}
  .stage__n{width:40px;height:40px;font-size:.875rem}
  .before__grid{grid-template-columns:1fr}
  .form__demo{padding:13px 15px}
  .inc__grid{grid-template-columns:1fr;gap:16px}
  .role__head{gap:10px}
  .gal__grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .gal__cap{opacity:1;transform:none}
  .gal__media::after{opacity:1}
  .lb__nav{width:44px;height:44px}
  .lb__img{max-height:66vh}

  .faq__inner{padding-right:12px}
  .ft__grid{grid-template-columns:1fr;row-gap:36px}
  .ft__bar{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:14px}
  .ft__bar ul{gap:20px}
}

@media (max-width:560px){
  .hero__title{max-width:none}
  .hero__btns .btn{flex:1 1 auto;justify-content:center}
  .trust__grid{grid-template-columns:1fr;gap:30px}
  .rev__body p{min-height:calc(4 * 1.55em)}
  .shot__text{font-size:.8125rem}
}

/* ---------- 18. reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .sw i{transform:none !important}
  .hero__copy > *,.shot{opacity:1 !important;transform:none !important}
  .hero__slide.is-on img{animation:none}
  .hero__hint{display:none}
}