/* Bret Slaton Homes concept
   Design language: Classic Authority. Display: Alegreya. Body: Signika Negative.
   Color is the prospect's own: logo green #95b96c, site blue #1776ac,
   dark bands deepened from that blue. */

:root{
  --ink:            #0d1c26;
  --ink-2:          #123246;
  --ink-3:          #0a161e;
  --paper:          #ffffff;
  --cream:          #f4f2ed;
  --line:           #dcdcd4;
  --line-dark:      rgba(255,255,255,.16);

  --green:          #95b96c;
  --green-deep:     #7ea256;
  --green-text:     #45632a;
  --blue:           #1776ac;
  --blue-text:      #0f5c85;

  --text-dark:      #14181c;
  --text-body:      #4b5a64;
  --text-light:     #f2f6f8;
  --text-light-mut: #9fb3bf;

  --font-display:   'Alegreya', Georgia, serif;
  --font-body:      'Signika Negative', 'Helvetica Neue', Arial, sans-serif;

  --wrap:           min(90%, 1180px);
  --wrap-wide:      min(94%, 1420px);
  --nav-h:          76px;
  --pad-y:          clamp(4.5rem, 9vw, 8.5rem);
  --ease:           cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text-body);
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.72;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{
  font-family:var(--font-display);
  color:var(--text-dark);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0;
}
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:var(--wrap); margin-inline:auto; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--ink); color:#fff; padding:.75rem 1.15rem; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

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

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.65rem;
  min-height:48px; padding:.85rem 1.6rem;
  border-radius:999px; border:1px solid transparent;
  font-family:var(--font-body); font-size:.95rem; font-weight:500;
  letter-spacing:.01em; text-decoration:none;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn--green{ background:var(--green); color:#101a0b; }
.btn--green:hover{ background:var(--green-deep); }
.btn--ghost{ border-color:rgba(255,255,255,.42); color:var(--text-light); }
.btn--ghost:hover{ border-color:var(--green); color:var(--green); }
.btn--sm{ min-height:42px; padding:.55rem 1.2rem; font-size:.88rem; }

.link{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--blue-text); text-decoration:none;
  font-weight:500; font-size:.95rem; letter-spacing:.01em;
  padding-block:.45rem;
  border-bottom:1px solid rgba(15,92,133,.3);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.link__arrow{ width:22px; height:1px; background:currentColor; position:relative; transition:width .3s var(--ease); }
.link__arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.link:hover{ color:var(--green-text); border-color:rgba(69,99,42,.45); }
.link:hover .link__arrow{ width:32px; }

.kicker{
  font-size:.76rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green-text); margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.85rem;
}
.kicker::before{ content:""; width:34px; height:2px; background:var(--green); flex:none; }
.kicker--light{ color:var(--green); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  background:transparent;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(13,28,38,.95) 0%, rgba(13,28,38,.78) 55%, rgba(13,28,38,.4) 100%);
  transition:opacity .35s var(--ease);
}
.nav.is-solid{ background:var(--ink); box-shadow:0 10px 30px -18px rgba(0,0,0,.7); }
.nav.is-solid::before{ opacity:0; }
.nav__inner{
  position:relative;
  width:var(--wrap-wide); margin-inline:auto;
  min-height:var(--nav-h);
  display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.4rem);
}
.brand{ display:block; flex:none; }
.brand__plate{
  display:block; background:var(--blue);
  padding:.5rem .7rem; border-radius:4px;
}
.brand__plate img{ width:auto; height:38px; max-width:180px; object-fit:contain; }
.nav__links{ margin-left:auto; display:flex; gap:clamp(1rem,2vw,2rem); }
.nav__links a{
  color:var(--text-light); text-decoration:none;
  font-size:.94rem; font-weight:400; letter-spacing:.01em;
  padding-block:.5rem; border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.nav__links a:hover{ color:var(--green); border-color:var(--green); }
.nav__cta{ flex:none; }
.burger{
  display:none; flex:none;
  width:48px; height:48px; padding:12px;
  background:none; border:0; cursor:pointer; color:var(--text-light);
}
.burger span{ display:block; height:1.5px; background:currentColor; margin:5px 0; transition:transform .3s var(--ease), opacity .2s; }

/* ---------- drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:300;
  background:rgba(6,15,20,.72);
  opacity:0; transition:opacity .35s var(--ease);
}
.drawer[hidden]{ display:none; }
.drawer.is-open{ opacity:1; }
.drawer__panel{
  position:absolute; inset:0 0 0 auto;
  width:min(88vw, 420px);
  background:var(--ink);
  padding:calc(var(--nav-h) + 1.2rem) clamp(1.6rem,6vw,2.6rem) 2.4rem;
  display:flex; flex-direction:column;
  transform:translateX(6%); opacity:.4;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
  overflow-y:auto;
}
.drawer.is-open .drawer__panel{ transform:none; opacity:1; }
.drawer__close{
  position:absolute; top:14px; right:clamp(1rem,4vw,1.8rem);
  width:48px; height:48px; display:grid; place-items:center;
  background:none; border:1px solid var(--line-dark); border-radius:999px;
  color:var(--text-light); cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.drawer__close:hover{ border-color:var(--green); color:var(--green); }
.drawer__links{ display:flex; flex-direction:column; }
.drawer__links a{
  font-family:var(--font-display); font-size:clamp(1.5rem,6vw,1.95rem);
  color:var(--text-light); text-decoration:none;
  padding-block:.62rem; border-bottom:1px solid var(--line-dark);
}
.drawer__links a:hover{ color:var(--green); }
.drawer__foot{ margin-top:auto; padding-top:2rem; color:var(--text-light-mut); font-size:.92rem; }
.drawer__phone{
  display:inline-block; font-family:var(--font-display); font-size:1.4rem;
  color:var(--green); text-decoration:none; margin-bottom:.5rem;
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:var(--ink);
  min-height:100vh; min-height:100svh;
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:stretch;
}
.hero__text{
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + clamp(2rem,5vw,4rem)) clamp(2rem,5vw,5rem) clamp(3rem,6vw,5rem);
  padding-left:max(clamp(2rem,5vw,5rem), calc((100vw - min(94vw, 1420px))/2));
}
.hero h1{
  color:var(--text-light);
  font-size:clamp(2.6rem, 5.1vw, 4.5rem);
  line-height:1.04; letter-spacing:-.025em;
  max-width:16ch;
  margin-bottom:1.35rem;
}
.hero__sub{
  color:var(--text-light-mut);
  font-size:clamp(1.05rem,1.35vw,1.22rem);
  line-height:1.66; max-width:46ch;
  margin-bottom:2.2rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.4rem; }
.hero__meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.3rem;
  padding-top:1.4rem; border-top:1px solid var(--line-dark);
  font-size:.92rem; color:var(--text-light-mut); max-width:44ch;
}
.hero__meta a{
  font-family:var(--font-display); font-size:1.35rem; color:var(--green);
  text-decoration:none; letter-spacing:.01em;
}
.hero__media{ position:relative; overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(13,28,38,.85) 0%, rgba(13,28,38,.25) 32%, rgba(13,28,38,0) 55%);
  pointer-events:none;
}

/* ---------- intro ---------- */
.intro{ background:var(--paper); padding-block:var(--pad-y); }
.intro__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.intro__lead h2{
  font-size:clamp(1.9rem,3.3vw,3rem);
  max-width:15ch;
}
.intro__body{ max-width:62ch; }
.intro__body p{ font-size:clamp(1.02rem,1.15vw,1.13rem); }
.intro__note{
  margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid var(--line);
  color:var(--text-dark); font-weight:400;
}
.awards{ margin-top:clamp(3rem,6vw,5.5rem); }
.awards__title{
  font-family:var(--font-body); font-size:.76rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-body);
  margin:0 0 1.6rem; text-align:center;
}
.awards__row{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(1.6rem,4vw,3.4rem);
}
.awards__row img{ height:clamp(70px,7vw,96px); width:auto; }

/* ---------- services ---------- */
.svc{ padding-block:var(--pad-y); }
.svc--paper{ background:var(--paper); }
.svc--cream{ background:var(--cream); }
.svc__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.svc--flip .svc__media{ order:2; }
.svc__media{ margin:0; position:relative; }
.svc__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:14px;
}
.svc__label{
  font-size:.76rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green-text); margin-bottom:1rem;
}
.svc__text h2{ font-size:clamp(1.75rem,2.9vw,2.65rem); max-width:17ch; margin-bottom:1.2rem; }
.svc__text p{ max-width:52ch; margin-bottom:1.6rem; }

/* ---------- full bleed band ---------- */
.wide{ background:var(--cream); padding-bottom:clamp(3.5rem,7vw,6rem); }
.wide__media{ width:100%; }
.wide__media img{
  width:100%; height:clamp(340px, 58svh, 620px); object-fit:cover; object-position:center 55%;
}
.wide__panel{
  position:relative; margin-top:clamp(-6rem,-6vw,-3rem);
  background:var(--cream); border-radius:16px;
  padding:clamp(1.8rem,3.5vw,3rem) clamp(1.6rem,3.5vw,3.2rem) clamp(1.6rem,3vw,2.6rem);
  max-width:34rem;
}
.wide__panel h2{ font-size:clamp(1.75rem,2.9vw,2.65rem); max-width:14ch; margin-bottom:1.1rem; }
.wide__panel p{ max-width:46ch; margin-bottom:1.5rem; }

/* ---------- restoration ---------- */
.rest{ background:var(--ink); color:var(--text-light-mut); padding-block:var(--pad-y); }
.rest__grid{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,5rem); align-items:center;
}
.rest h2{ color:var(--text-light); font-size:clamp(1.9rem,3.3vw,3rem); max-width:14ch; margin-bottom:1.3rem; }
.rest p{ max-width:50ch; }
.rest .btn{ margin-top:1.6rem; }
.rest__media{ position:relative; padding-bottom:clamp(3rem,7vw,5.5rem); }
.rest__shot{ margin:0; }
.rest__shot img{ border-radius:14px; width:100%; object-fit:cover; }
.rest__shot--a img{ aspect-ratio:4/3; }
.rest__shot--b{
  position:absolute; right:0; bottom:0; width:52%;
  border:6px solid var(--ink); border-radius:18px;
}
.rest__shot--b img{ aspect-ratio:4/3; border-radius:12px; }

/* ---------- before / after ---------- */
.ba{ background:var(--cream); padding-block:var(--pad-y); }
.ba__head{ max-width:44ch; margin-bottom:clamp(2.2rem,4vw,3.4rem); }
.ba__head h2{ font-size:clamp(1.9rem,3.3vw,3rem); margin-bottom:1rem; }
.ba__intro{ max-width:46ch; }
.ba__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.6rem,4vw,3rem); }
.ba__item{ margin:0; }
.ba__frame{
  position:relative; aspect-ratio:3/2; overflow:hidden;
  border-radius:14px; background:#d9d7d0;
}
.ba__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s var(--ease);
}
.ba__img.is-on{ opacity:1; }
.ba__item figcaption{ padding-top:1.1rem; }
.ba__toggle{ display:inline-flex; gap:0; border:1px solid var(--line); border-radius:999px; overflow:hidden; margin-bottom:.85rem; }
.ba__toggle button{
  min-height:42px; padding:.5rem 1.15rem;
  background:transparent; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:.85rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--text-body);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.ba__toggle button:hover{ color:var(--text-dark); }
.ba__toggle button.is-active{ background:var(--ink); color:var(--text-light); }
.ba__item figcaption p{ font-size:.98rem; }

/* ---------- projects ---------- */
.proj{ background:var(--paper); padding-block:var(--pad-y); }
.proj__head{ margin-bottom:clamp(2rem,4vw,3rem); }
.proj__head h2{ font-size:clamp(1.9rem,3.3vw,2.9rem); max-width:18ch; }
.proj__rail{
  list-style:none; margin:0; padding:0 0 1.2rem;
  display:flex; gap:clamp(1rem,2vw,1.6rem);
  overflow-x:auto; scroll-snap-type:x proximity;
  padding-inline:max(5vw, calc((100vw - 1180px)/2));
  scroll-padding-inline-start:max(5vw, calc((100vw - 1180px)/2));
  -webkit-overflow-scrolling:touch;
}
.proj__rail::-webkit-scrollbar{ height:6px; }
.proj__rail::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
.proj__rail li{ flex:0 0 clamp(240px, 26vw, 340px); scroll-snap-align:start; }
.proj__rail img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:14px; }
.proj__rail span{
  display:block; padding-top:.75rem;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-body);
}

/* ---------- reviews ---------- */
.rev{ background:var(--ink-2); color:var(--text-light-mut); padding-block:var(--pad-y); }
.rev__lead{ margin:0 0 clamp(2.2rem,5vw,3.6rem); }
.rev__lead p{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  color:var(--text-light); font-size:clamp(1.55rem,3vw,2.5rem);
  line-height:1.24; letter-spacing:-.015em; max-width:22ch;
  margin-bottom:1.2rem;
}
.rev cite{
  display:block; font-style:normal; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--green);
}
.rev__pair{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.8rem,4vw,3.5rem); }
.rev__pair blockquote{ margin:0; padding-top:1.5rem; border-top:1px solid var(--line-dark); }
.rev__pair p{ font-size:1rem; max-width:44ch; margin-bottom:1rem; }

/* ---------- promise ---------- */
.promise{ background:var(--paper); padding-block:clamp(4rem,8vw,7rem); }
.promise__grid{ display:flex; align-items:flex-start; gap:clamp(1.5rem,4vw,3rem); max-width:52rem; }
.promise__mark{ color:var(--green); flex:none; width:clamp(58px,7vw,84px); }
.promise__mark svg{ width:100%; height:auto; }
.promise__quote{ margin:0; }
.promise__quote p{
  font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,2.15rem);
  line-height:1.3; letter-spacing:-.015em; color:var(--text-dark);
  margin-bottom:1.1rem;
}
.promise__quote cite{
  font-style:normal; font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-body);
}

/* ---------- contact ---------- */
.contact{ background:var(--cream); padding-block:var(--pad-y); }
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.2rem,5vw,5rem);
}
.contact__lead h2{ font-size:clamp(1.9rem,3.3vw,3rem); max-width:14ch; margin-bottom:1.2rem; }
.contact__lead p{ max-width:44ch; }
.contact__details{ margin:0; display:grid; gap:1.6rem; align-content:start; }
.contact__details > div{ padding-top:1.1rem; border-top:1px solid var(--line); }
.contact__details dt{
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-body); margin-bottom:.4rem;
}
.contact__details dd{ margin:0; color:var(--text-dark); font-size:1.05rem; }
.contact__details dd a{ color:var(--blue-text); text-decoration:none; border-bottom:1px solid rgba(15,92,133,.32); }
.contact__details dd a:hover{ color:var(--green-text); }

/* ---------- footer ---------- */
.foot{ background:var(--ink-3); color:var(--text-light-mut); padding-top:clamp(3.5rem,6vw,5rem); }
.foot__grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.brand__plate--foot{ display:inline-block; margin-bottom:1.2rem; }
.foot__brand p{ max-width:34ch; font-size:.96rem; }
.foot__nav{ display:flex; flex-direction:column; }
.foot__nav a{
  color:var(--text-light-mut); text-decoration:none; font-size:.96rem;
  padding-block:.65rem; border-bottom:1px solid var(--line-dark);
}
.foot__nav a:hover{ color:var(--green); }
.foot__contact a{ display:block; color:var(--text-light); text-decoration:none; padding-block:.4rem; }
.foot__contact a:hover{ color:var(--green); }
.foot__contact p{ margin-top:.8rem; font-size:.96rem; }
.foot__social{ margin-top:1.2rem; }
.foot__social a{ font-size:.92rem; color:var(--text-light-mut); }
.foot__base{
  border-top:1px solid var(--line-dark);
  padding-block:1.5rem;
  font-size:.86rem;
}

/* ---------- 404 ---------- */
.err{
  background:var(--ink); color:var(--text-light-mut);
  min-height:100svh; display:grid; place-items:center;
  padding:calc(var(--nav-h) + 3rem) 0 4rem; text-align:center;
}
.err__code{
  font-family:var(--font-display); font-size:clamp(5rem,18vw,12rem);
  line-height:1; color:rgba(149,185,108,.22); letter-spacing:-.03em;
}
.err h1{ color:var(--text-light); font-size:clamp(1.8rem,4vw,2.8rem); margin:.5rem 0 1.1rem; }
.err p{ max-width:44ch; margin-inline:auto; margin-bottom:2rem; }

/* ---------- motion ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); }
.js [data-hero]{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .js .reveal, .js [data-hero]{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .burger{ display:block; margin-left:auto; }
  .hero{ grid-template-columns:1fr; min-height:0; }
  .hero__text{
    padding:calc(var(--nav-h) + 2.6rem) 5vw 3rem;
    padding-left:5vw;
  }
  .hero__media{ height:clamp(300px, 52svh, 480px); }
  .hero__media::after{
    background:linear-gradient(180deg, rgba(13,28,38,.55) 0%, rgba(13,28,38,0) 45%);
  }
  .svc__grid, .intro__grid, .rest__grid, .contact__grid, .ba__grid, .rev__pair{
    grid-template-columns:1fr;
  }
  .svc--flip .svc__media{ order:0; }
  .svc__media img{ aspect-ratio:5/4; }
  .wide__panel{ margin-top:0; max-width:none; padding-inline:0; }
  .foot__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .foot__brand{ grid-column:1 / -1; }
}
@media (max-width:640px){
  :root{ --nav-h:68px; }
  .brand__plate img{ height:32px; }
  .hero h1{ font-size:clamp(2.15rem,9vw,2.9rem); max-width:14ch; }
  .hero__sub{ font-size:1.02rem; }
  .hero__cta .btn{ width:100%; justify-content:center; }
  .rest__media{ padding-bottom:0; }
  .rest__shot--b{ position:static; width:100%; border:0; margin-top:1rem; }
  .rest__shot--b img{ border-radius:14px; }
  .awards__row{ gap:1.4rem 2rem; }
  .awards__row img{ height:62px; }
  .foot__grid{ grid-template-columns:1fr; }
  .foot__contact a{ padding-block:.75rem; }
  .foot__social a{ padding-block:.65rem; }
  .contact__details dd a{ display:inline-block; padding-block:.55rem; }
  .promise__grid{ flex-direction:column; }
  .ba__toggle button{ padding:.5rem .95rem; }
}