/* Family "airy" (reference: Collard Carpentry). White, air, centred quiet titles, thin rules,
   outlined small-caps buttons, translucent cards on full-bleed photos, deep teal footer.
   Palette: white, sea-glass teal, sand, ink. Fonts: Outfit (display, nav, buttons), Karla (body). */

:root{
  --teal:#2E6B6E; --teal-d:#245557; --teal-deep:#1F4B4E; --sand:#F4EFE7; --sand-d:#E6DFD3;
  --ink:#1F2A2E; --body:#3B4549; --mute:#6B7478; --rule:#E4E0D8; --white:#fff;
  --display:'Outfit','Helvetica Neue',Arial,sans-serif; --text:'Karla','Helvetica Neue',Arial,sans-serif;
  --wrap:1200px; --gut:clamp(16px,4vw,48px); --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
.still,.still *{scroll-behavior:auto}
body{margin:0;background:var(--white);color:var(--body);font:400 17px/1.65 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--teal)}
h1,h2,h3{margin:0;color:var(--ink);font-family:var(--display);font-weight:300;letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* motion hooks */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s ease var(--reveal-delay,0ms),transform .8s ease var(--reveal-delay,0ms)}
.js [data-reveal].is-in,.still [data-reveal]{opacity:1;transform:none}
[data-zoom]{will-change:transform;transform-origin:50% 50%}
.still [data-zoom],.still [data-parallax]{transform:none!important}

/* type helpers */
.eyebrow{margin:0 0 14px;font:500 11px/1.4 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.eyebrow--c{text-align:center}
.title-c{text-align:center;font-size:clamp(1.7rem,2.6vw,2.25rem);line-height:1.2;margin:0 auto 18px;max-width:22ch}
.lede-c{text-align:center;max-width:56ch;margin:0 auto 48px;color:var(--mute);font-size:17px}
.lede{font-size:clamp(17px,1.4vw,19px);color:var(--body);max-width:58ch}
.card__title{font:700 15px/1.4 var(--text);letter-spacing:.01em;color:var(--ink);margin:0 0 10px}

/* buttons: outlined small caps, Collard style */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 26px;border:1px solid var(--ink);color:var(--ink);background:transparent;text-decoration:none;font:500 11px/1.2 var(--display);letter-spacing:.2em;text-transform:uppercase;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn:hover,.btn:focus-visible{background:var(--ink);color:#fff}
.btn--solid{background:var(--teal);border-color:var(--teal);color:#fff}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--teal-d);border-color:var(--teal-d)}
.btn--sm{padding:11px 22px;min-height:44px;font-size:10.5px}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btns--c{justify-content:center}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* skip link + callbar */
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;font:500 13px var(--display);text-decoration:none}
.skip-link:focus{top:12px}
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;min-height:56px;align-items:center;justify-content:center;background:var(--teal);color:#fff;text-decoration:none;font:500 13px var(--display);letter-spacing:.16em;text-transform:uppercase;box-shadow:0 -4px 20px rgba(31,42,46,.12)}

/* header: left nav | centred logo | right nav + phone */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:box-shadow .4s var(--ease)}
.is-scrolled .hdr{box-shadow:0 1px 0 var(--rule),0 8px 30px rgba(31,42,46,.05)}
.hdr__in{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:1360px;margin:0 auto;padding:18px var(--gut);transition:padding .4s var(--ease)}
.is-scrolled .hdr__in{padding-top:10px;padding-bottom:10px}
.hdr__nav{display:flex;align-items:center;gap:26px}
.hdr__nav--l{justify-self:start}
.hdr__nav--r{justify-self:end}
.hdr__nav a{font:500 11px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:12px 0;border-bottom:1px solid transparent;transition:border-color .3s}
.hdr__nav a:hover{border-color:var(--teal)}
.hdr__nav .hdr__call{color:var(--teal);letter-spacing:.08em;font-size:13px;margin-left:8px}
.logo{display:inline-block;line-height:0}
.logo svg{width:100%;height:auto}
.hdr__logo{width:216px;justify-self:center;transition:width .4s var(--ease)}
.is-scrolled .hdr__logo{width:168px}
.hdr__toggle{display:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;justify-self:start;position:relative}
.hdr__bar{position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),top .3s var(--ease)}
.hdr__bar:nth-child(1){top:17px}
.hdr__bar:nth-child(2){top:25px}
.menu-open .hdr__bar:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-open .hdr__bar:nth-child(2){top:21px;transform:rotate(-45deg)}
.hdr__phone{display:none;justify-self:end;min-height:44px;align-items:center;padding:0 4px;font:500 12px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--teal);text-decoration:none}
.menu{display:none;border-top:1px solid var(--rule);background:#fff;padding:8px var(--gut) 20px}
.menu a{display:block;padding:14px 0;border-bottom:1px solid var(--rule);font:500 13px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.menu .menu__call{color:var(--teal);letter-spacing:.06em;font-size:16px;border:0}

/* hero */
.hero__text{max-width:760px;margin:0 auto;padding:clamp(40px,5.5vw,72px) var(--gut) clamp(36px,4.5vw,56px);text-align:center}
.hero__text .eyebrow{margin-bottom:18px}
.hero h1{font-size:clamp(2.3rem,5.2vw,4.1rem);line-height:1.08;margin:0 0 22px}
.hero .lede{margin:0 auto 32px}
.hero .btns{justify-content:center}
.hero__media{overflow:hidden;max-height:80vh}
.hero__img{width:100%;height:auto;max-height:80vh;object-fit:cover}

/* sections */
main > section{padding:clamp(64px,8vw,112px) var(--gut)}
.lead__row,.more__list,.steps__row,.values__row,.work__grid,.work__wide,.faq__list,.areas__list{max-width:var(--wrap);margin-left:auto;margin-right:auto}

/* lead services */
.lead{padding-bottom:clamp(56px,7vw,96px)}
.lead .title-c{margin-bottom:48px}
.lead__row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.card{display:flex;flex-direction:column;align-items:flex-start}
.card__media{overflow:hidden;margin-bottom:26px;width:100%}
.card .btn{margin-top:auto}
.card__img{width:100%;transition:transform 1.2s var(--ease)}
.card:hover .card__img{transform:scale(1.03)}
.card__text{font-size:16px;color:var(--body);margin-bottom:22px}
.card__title{align-self:stretch}

/* full-bleed bands with a floating card */
.band{position:relative;overflow:hidden;min-height:620px;display:flex;align-items:center;padding:clamp(56px,7vw,96px) var(--gut)}
.band__bg{position:absolute;left:0;right:0;top:-14%;bottom:-14%;background:var(--sand-d) center/cover no-repeat;will-change:transform}
.band__in{position:relative;width:100%;max-width:var(--wrap);margin:0 auto}
.band__in--c{display:flex;justify-content:center}
.float{max-width:520px;padding:clamp(36px,4.5vw,64px) clamp(28px,4vw,56px);background:rgba(255,255,255,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-align:center;box-shadow:0 30px 80px rgba(31,42,46,.08)}
.float h2{font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.18;margin-bottom:18px}
.float p{font-size:16px;margin-bottom:18px}
.float .btn,.float .btns{margin-top:8px}
.float--c{max-width:600px}
.band--intro .float{margin-left:clamp(0px,4vw,56px)}

/* everything else */
.more .lede-c{margin-bottom:28px}
.more__list{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.more__item{display:flex;gap:24px;align-items:flex-start;padding:28px 0;border-top:1px solid var(--rule)}
.more__item:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
.more__media{flex:0 0 150px;overflow:hidden}
.more__body p{font-size:16px;margin:0;color:var(--body)}
.more__body .card__title{margin-bottom:8px}
.more__call{color:var(--teal);font-weight:700;text-decoration:none;white-space:nowrap}

/* approach */
.steps{border-top:1px solid var(--rule)}
.steps__row{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;counter-reset:step}
.step{border-top:1px solid var(--ink);padding-top:22px}
.step__n{display:block;font:300 34px/1 var(--display);color:var(--teal);margin-bottom:18px}
.step p{font-size:16px;margin:0}

/* quote line */
.quote{text-align:center;padding-top:clamp(40px,5vw,64px)!important;padding-bottom:clamp(64px,8vw,112px)!important}
.quote__line{max-width:30ch;margin:0 auto 20px;font:300 clamp(1.5rem,2.6vw,2.2rem)/1.3 var(--display);color:var(--ink)}
.quote__by{font:500 11px var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin:0}

/* values on sand */
.values{background:var(--sand)}
.values__row{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.value p{font-size:16px;margin:0}
.value__drop{display:block;color:var(--teal);margin-bottom:16px}

/* work */
.work__wide{margin:0 auto 32px}
.work__media{overflow:hidden}
.work__img{width:100%;transition:transform 1.2s var(--ease)}
.work__item:hover .work__img,.work__wide:hover .work__img{transform:scale(1.03)}
.work figcaption{padding:14px 0 0;font-size:15px;color:var(--mute);line-height:1.5}
.work figcaption strong{display:block;font:700 15px/1.4 var(--text);color:var(--ink)}
.work__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.work__item{margin:0}
.work__ask{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:32px;background:var(--sand)}
.work__ask p{font-size:16px}

/* faq */
.faq{border-top:1px solid var(--rule)}
.faq__list{max-width:760px}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__item:first-child{border-top:1px solid var(--rule)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;font:400 19px/1.35 var(--display);color:var(--ink)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";flex:0 0 12px;width:12px;height:12px;border-right:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);transform:rotate(45deg);transition:transform .3s var(--ease);margin-right:4px}
.faq__item[open] summary::after{transform:rotate(-135deg)}
.faq__item p{margin:0 0 22px;font-size:16px;max-width:64ch}

/* areas */
.areas{padding-top:0!important}
.areas .lede-c{margin-bottom:28px}
.areas__list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 0;max-width:900px}
.areas__list li{font:400 17px/1.4 var(--display);color:var(--ink);padding:0 22px;position:relative}
.areas__list li + li::before{content:"";position:absolute;left:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--teal)}

/* estimate form on sand */
.estimate{background:var(--sand)}
.estimate__in{max-width:760px;margin:0 auto}
.estimate .lede-c{margin-bottom:36px}
.qform__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.qform__field{display:flex;flex-direction:column;gap:6px}
.qform__field--wide{grid-column:1/-1}
.qform__field span{font:500 11px/1.4 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.qform input,.qform select,.qform textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid #CFC8BB;background:#fff;color:var(--ink);font:400 16px var(--text);border-radius:0;appearance:none;-webkit-appearance:none}
.qform select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232E6B6E' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:36px}
.qform textarea{resize:vertical;min-height:110px}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px rgba(46,107,110,.18)}
.qform__hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.qform__submit{margin-top:24px;width:100%;min-height:52px;border:1px solid var(--teal);background:var(--teal);color:#fff;cursor:pointer;font:500 12px var(--display);letter-spacing:.22em;text-transform:uppercase;transition:background .3s}
.qform__submit:hover{background:var(--teal-d)}
.qform__submit:disabled{opacity:.6;cursor:wait}
.qform__status{min-height:1.4em;margin:14px 0 0;font-size:15px;text-align:center}
.qform__status.is-ok{color:var(--teal-d)}
.qform__status.is-err{color:#9A3F2E}
.qform__alt{margin:10px 0 0;text-align:center;font-size:15px;color:var(--mute)}
.qform__alt a{color:var(--teal);font-weight:700;text-decoration:none}

/* footer: deep teal, centred brand device */
.ftr{background:var(--teal-deep);color:rgba(255,255,255,.82);padding:clamp(56px,7vw,88px) var(--gut) 40px;text-align:center}
.ftr__in{max-width:860px;margin:0 auto}
.ftr__logo{width:240px;margin:0 auto 22px}
.ftr__tag{font:300 18px/1.5 var(--display);color:#fff;margin:0 0 28px}
.ftr .nap{font-style:normal;font-size:15px;line-height:1.8;margin:0 0 6px}
.ftr .nap a{color:#fff;text-decoration:none}
.ftr .nap__name{color:#fff}
.ftr__hours{font-size:15px;margin:0 0 28px}
.ftr__legal{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin-bottom:22px}
.ftr__legal a{color:#fff;font:500 11px var(--display);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.3)}
.ftr__copy{font-size:13px;margin:0;color:rgba(255,255,255,.6)}

/* legal pages */
.legal{padding:clamp(48px,6vw,80px) var(--gut) clamp(64px,8vw,112px)}
.legal__inner{max-width:760px;margin:0 auto}
.legal__crumb{font:500 11px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.legal__crumb a{color:var(--teal);text-decoration:none}
.legal h1{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:0 0 28px}
.legal h2{font-size:1.5rem;margin:36px 0 12px}
.legal ul,.legal ol{list-style:disc;padding-left:22px;margin:0 0 1em}

/* tablet */
@media (max-width:1100px){
  .lead__row{gap:28px}
  .steps__row{grid-template-columns:repeat(2,1fr)}
  .work__grid{grid-template-columns:repeat(2,1fr)}
  .more__list{column-gap:40px}
}

/* phone + small tablet */
@media (max-width:899px){
  html{scroll-padding-top:72px}
  .ftr{padding-bottom:96px}
  .callbar{display:flex}
  .hdr__nav{display:none}
  .hdr__toggle{display:block}
  .hdr__phone{display:inline-flex}
  .hdr__in{padding:12px var(--gut)}
  .hdr__logo,.is-scrolled .hdr__logo{width:168px}
  .menu-open .menu{display:block}
  .hero__text{padding-top:40px;padding-bottom:36px}
  .hero .btns{flex-direction:column;align-items:stretch}
  .hero__media,.hero__img{max-height:62vh}
  .hero__img{min-height:300px}
  main > section{padding-left:16px;padding-right:16px}
  .lead__row{grid-template-columns:1fr;gap:44px}
  .card__media{margin-bottom:20px}
  .band{display:block;min-height:0;padding:0 0 40px}
  .band__bg{position:relative;top:auto;bottom:auto;height:300px;transform:none!important}
  .band__in{padding:0 16px;margin-top:-72px}
  .float,.float--c{max-width:none;padding:32px 22px}
  .band--intro .float{margin-left:0}
  .float .btn{width:100%}
  .btns--c{flex-direction:column;align-items:stretch}
  .more__list{grid-template-columns:1fr}
  .more__item{display:block;padding:22px 0}
  .more__media{width:150px;margin-bottom:14px}
  .more__item:nth-last-child(-n+2){border-bottom:0}
  .more__item:last-child{border-bottom:1px solid var(--rule)}
  .more__media{flex-basis:110px}
  .steps__row{grid-template-columns:1fr;gap:28px}
  .values__row{grid-template-columns:1fr;gap:32px}
  .work__grid{grid-template-columns:1fr;gap:28px}
  .work__ask{padding:26px 20px}
  .areas__list li{padding:0 14px;font-size:16px}
  .qform__grid{grid-template-columns:1fr}
  .ftr__logo{width:210px}
}