/* Pelton Builders — shared site styles (v9: snap-deck home + multi-page subpages) */
:root{
  --cream:#F7F2E9;
  --bone:#FBF7EF;
  --sand:#E8DCC4;
  --clay:#B86A4A;
  --clay-text:#9C5535;       /* darker variant for small text — WCAG AA on --bone */
  --clay-soft:#D89978;
  --charcoal:#2A2520;
  --ink:#1F1A14;
  --muted:#7A6B58;
  --line:#E2D7C2;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bone);color:var(--ink);
  line-height:1.7;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;border-radius:.5rem}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{
  font-family:'Lora','Georgia',serif;
  font-weight:500;line-height:1.15;letter-spacing:-.02em;
  color:var(--charcoal);
}
h1{font-size:clamp(2.25rem,4.4vw,3.75rem)}
h2{font-size:clamp(1.875rem,3.4vw,3rem)}
h3{font-size:clamp(1.25rem,2vw,1.75rem)}
p{text-wrap:pretty}

.container{max-width:1240px;margin:0 auto;padding:0 1.5rem}
@media(min-width:1024px){.container{padding:0 2.5rem}}

section{padding:5.5rem 0}
@media(min-width:768px){section{padding:8rem 0}}
@media(min-width:1024px){section{padding:10rem 0}}
section.hero{padding:0}
/* When a section follows .page-intro--minimal it should not stack its own top
   padding on top of the intro spacing. */
section.section-flush-top{padding-top:0}

.eyebrow{
  font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--clay-text);
  margin-bottom:1rem;
}
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.75rem;background:var(--charcoal);color:var(--bone);
  font-weight:500;font-size:.9375rem;border-radius:999px;
  transition:all .25s ease;border:none;cursor:pointer;
}
.btn-primary:hover{background:var(--clay);transform:translateY(-1px)}

.img-wide{aspect-ratio:16/10;object-fit:cover;width:100%;height:100%}
.img-frame{overflow:hidden;border-radius:.5rem;position:relative}

/* HEADER — overlays full-screen hero on home, solid on subpages (.subpage) */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:all .3s ease;background:transparent;
}
header .nav-row{display:flex;align-items:center;justify-content:space-between;height:88px}
header .logo{display:inline-flex;align-items:center}
header .logo img{height:42px;width:auto;border-radius:0;transition:opacity .25s ease}
header .logo .logo-on-light{display:none}
header.scrolled .logo .logo-on-dark{display:none}
header.scrolled .logo .logo-on-light{display:inline-block}
header nav.main{display:none;gap:2.75rem}
header nav.main a{
  color:#fff;font-size:.8125rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  transition:color .2s,opacity .2s;opacity:.92;
}
header nav.main a:hover,header nav.main a.is-active{color:var(--clay-soft);opacity:1}

.header-right{display:flex;align-items:center}
.header-socials{display:none;align-items:center;gap:.5rem;margin-left:.5rem;padding-left:.5rem}
.header-socials a{
  color:#fff;opacity:.85;
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  transition:color .2s,opacity .2s,background .2s;
}
.header-socials a:hover{opacity:1;color:var(--clay-soft);background:rgba(255,255,255,.08)}
.header-socials svg{width:17px;height:17px}
@media(min-width:1024px){.header-socials{display:inline-flex}}

/* Phone link in header. Mobile: icon-only 44×44 tap target (visible always so
   users can call without opening the drawer). Desktop: full number with leading
   icon, sits between the nav and the social column with the same vertical rule
   pattern. */
.header-phone{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:#fff;
  transition:color .2s ease,opacity .2s ease;
}
.header-phone svg{width:18px;height:18px;color:currentColor}
.header-phone-text{display:none}
header.scrolled .header-phone,
body.subpage header .header-phone{color:var(--charcoal)}
header.scrolled .header-phone:hover,
body.subpage header .header-phone:hover{color:var(--clay-text)}

@media(min-width:1024px){
  .header-phone{
    width:auto;height:auto;
    gap:.55rem;
    margin-left:1.75rem;padding:.5rem 0 .5rem 1.75rem;
    border-left:1px solid rgba(255,255,255,.25);
    font-size:.8125rem;font-weight:500;letter-spacing:.04em;
    color:#fff;opacity:.92;
  }
  .header-phone:hover{opacity:1;color:var(--clay-soft)}
  .header-phone svg{width:14px;height:14px}
  .header-phone-text{display:inline}
  header.scrolled .header-phone,
  body.subpage header .header-phone{
    color:var(--charcoal);border-left-color:rgba(0,0,0,.12);
  }
  header.scrolled .header-phone:hover,
  body.subpage header .header-phone:hover{color:var(--clay-text)}
}

header.scrolled,
body.subpage header{
  background:rgba(251,247,239,.96);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
header.scrolled nav.main a,
body.subpage header nav.main a{color:var(--charcoal)}
header.scrolled nav.main a:hover,
header.scrolled nav.main a.is-active,
body.subpage header nav.main a:hover,
body.subpage header nav.main a.is-active{color:var(--clay)}
header.scrolled .header-socials,
body.subpage header .header-socials{border-left-color:rgba(0,0,0,.12)}
header.scrolled .header-socials a,
body.subpage header .header-socials a{color:var(--charcoal)}
header.scrolled .header-socials a:hover,
body.subpage header .header-socials a:hover{color:var(--clay);background:rgba(0,0,0,.04)}
body.subpage header .logo .logo-on-dark{display:none}
body.subpage header .logo .logo-on-light{display:inline-block}
@media(min-width:1024px){header nav.main{display:flex}}

.menu-btn{
  background:transparent;border:0;color:#fff;cursor:pointer;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
}
header.scrolled .menu-btn,body.subpage header .menu-btn{color:var(--charcoal)}
@media(min-width:1024px){.menu-btn{display:none}}

/* HERO — full-screen photo with slideshow */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;color:#fff;margin-top:0}
.hero .bg{position:absolute;inset:0;background:#1a1612}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero .slide.active{opacity:1}
.hero .slide img{
  width:100%;height:100%;object-fit:cover;object-position:center bottom;
  border-radius:0;transform:scale(1.04);
}
.hero .slide[data-i="1"] img{object-position:center center}
.hero-dots{
  position:absolute;right:2.5rem;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.6rem;z-index:4;
}
@media(max-width:1023px){.hero-dots{right:1.5rem}}
@media(max-width:767px){.hero-dots{right:1rem;top:1.25rem;flex-direction:row;transform:none}}
.hero-dots button{
  width:8px;height:8px;border-radius:50%;border:0;
  background:rgba(255,255,255,.4);cursor:pointer;padding:0;
  transition:background .25s,transform .25s;
}
.hero-dots button.active{background:#fff;transform:scale(1.25)}
.hero .scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.18) 14%,
    rgba(0,0,0,0)   30%,
    rgba(0,0,0,0)   55%,
    rgba(0,0,0,.55) 78%,
    rgba(0,0,0,.95) 100%);
}
.hero-inner{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:.75rem;
}
.hero-inner .hero-sub{margin-bottom:0;line-height:1.45;max-width:min(34rem,calc(100% - 5rem))}
@media(max-width:767px){.hero-inner .hero-sub{max-width:100%}}
.hero-tag{
  display:inline-block;
  font-size:.75rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#fff;opacity:.85;
  margin-bottom:1.25rem;
}
.hero-title{
  font-family:'Lora',serif;color:#fff;
  font-size:clamp(2.25rem,5.4vw,4.5rem);
  font-weight:500;line-height:1.05;letter-spacing:-.02em;
  margin-bottom:1.25rem;max-width:24ch;
}
.hero-sub{font-size:1.0625rem;color:rgba(255,255,255,.95);max-width:34rem;line-height:1.6}

/* Hero text "panel" — no longer a single rectangle. The wrapper just provides
   layout. Each text line gets its own tight blur-box that hugs the glyphs as
   closely as possible (true per-letter blur isn't possible in CSS without
   SVG masks; per-line is the practical compromise). */
.hero-panel{
  align-self:flex-start;
  max-width:min(42rem,100%);
  padding:0;
}
.hero-panel .hero-sub{max-width:none}

/* Inline blur-box shared by tag, h1 lines, sub line. Tight padding so it
   reads as "darkness right behind the words", not a card. */
.hero-panel .hero-tag,
.hero-panel .hero-title > span,
.hero-panel .hero-sub > span{
  display:inline-block;
  padding:.05em .35em;
  background:rgba(20,15,10,.22);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  border-radius:.2rem;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-panel .hero-tag,
  .hero-panel .hero-title > span,
  .hero-panel .hero-sub > span{background:rgba(20,15,10,.55)}
}

/* H1 has two lines stacked via <br>; tighten line-height so the padded boxes
   read as one block rather than getting visually disjoint. */
.hero-title{line-height:1.18}
.hero-panel .hero-title > span{margin-bottom:.05em}

/* The long sub line wraps; switching its inner span to inline + clone lets
   the blur box wrap with the text instead of being one giant rectangle. */
.hero-panel .hero-sub > span{display:inline}

/* Hero accent rule above the eyebrow tag — visual echo of the section-end CTA. */
.hero-rule{
  display:block;width:32px;height:2px;background:var(--clay);
  margin-bottom:1.4rem;
}

/* Hero CTAs — outlined pill that fills with white on hover (text → charcoal),
   plus a quiet phone-icon link inline next to it. */
.hero-actions{
  margin-top:1.75rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
}
@media(min-width:768px){.hero-actions{margin-top:2.25rem}}

.hero-cta{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:1rem 2.1rem;
  font-family:'Lora','Georgia',serif;
  font-size:1rem;font-weight:500;letter-spacing:.005em;
  color:#fff;background:transparent;
  border:1.5px solid rgba(255,255,255,.85);
  border-radius:999px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s ease,border-color .4s ease;
}
.hero-cta::before{
  content:"";position:absolute;inset:0;
  background:#fff;
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.6,.05,.4,.95);
  z-index:-1;
}
.hero-cta:hover,.hero-cta:focus-visible{
  color:var(--charcoal);border-color:#fff;outline:none;
}
.hero-cta:hover::before,.hero-cta:focus-visible::before{transform:translateX(0)}
.hero-cta-arrow{
  font-family:'Inter',sans-serif;font-size:.95rem;
  display:inline-block;transition:transform .4s ease;
}
.hero-cta:hover .hero-cta-arrow{transform:translateX(4px)}

.hero-call{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.875rem;color:rgba(255,255,255,.85);
  border-bottom:1px solid transparent;
  padding-bottom:.05rem;
  transition:color .25s ease,border-color .25s ease;
}
.hero-call svg{width:14px;height:14px}
.hero-call:hover{color:#fff;border-color:rgba(255,255,255,.45)}

.hero .scroll-cue{
  position:absolute;right:2.5rem;top:calc(50% + 5rem);z-index:3;
  display:none;flex-direction:column;align-items:center;gap:.6rem;
  color:rgba(255,255,255,.85);
  font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;
  transition:color .2s,opacity .2s,transform .3s;
}
.hero .scroll-cue span{writing-mode:vertical-rl;transform:rotate(180deg)}
.hero .scroll-cue:hover{color:#fff}
.hero .scroll-cue svg{width:14px;height:14px;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(min-width:768px){.hero .scroll-cue{display:inline-flex}}
@media(max-width:1023px){.hero .scroll-cue{right:1.5rem}}

/* PAGE INTRO — for subpages (Homes/Process/Story) */
.page-intro{
  background:var(--bone);
  padding:9rem 0 4rem;
}
@media(min-width:768px){.page-intro{padding:11rem 0 5rem}}
/* Minimal variant — when there's only the crumb (no h1/lede), collapse both
   top and bottom padding. Header is 88px fixed; we need ~24-32px gap below it. */
.page-intro--minimal{padding:6.5rem 0 0}
@media(min-width:768px){.page-intro--minimal{padding:7rem 0 0}}
.page-intro--minimal .crumb{margin-bottom:0}
.page-intro .crumb{
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.25rem;
}
/* Breadcrumb is a <nav><ol> — flatten the list visually but keep semantics. */
.page-intro .crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline}
.page-intro .crumb li{display:inline-flex;align-items:baseline}
.page-intro .crumb li + li::before{
  content:"·";margin:0 .5rem;opacity:.5;color:var(--muted);
}
.page-intro .crumb a{color:var(--muted);transition:color .2s}
.page-intro .crumb a:hover{color:var(--clay-text)}
.page-intro .crumb [aria-current="page"]{color:var(--ink)}
.page-intro h1{margin-bottom:1.5rem;max-width:24ch}
.page-intro p.lede{color:var(--muted);max-width:42rem;font-size:1.125rem;line-height:1.6}

/* RECENT HOMES */
.homes{background:var(--bone)}
.homes-head{max-width:42rem;margin-bottom:3.5rem}
.homes-grid{display:grid;grid-template-columns:1fr;gap:3.5rem 2rem}
@media(min-width:768px){.homes-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.homes-grid{grid-template-columns:repeat(3,1fr)}}
.home-card .img-frame{margin-bottom:1.25rem;aspect-ratio:4/3;width:100%}
.img-frame.lb-trigger{
  border:0;padding:0;cursor:zoom-in;background:#000;
  transition:transform .35s ease;overflow:hidden;
}
.img-frame.lb-trigger img,
.img-frame.model-trigger img,
.landing-card .img-frame img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.img-frame.lb-trigger:hover img,
.img-frame.model-trigger:hover img{transform:scale(1.04)}
.home-meta{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted);font-size:.875rem}
.home-meta h3{font-family:'Lora',serif;font-size:1.25rem}
/* Section-end CTA — editorial close + a real designed button.
   The serif statement is a statement (not a link). The button is the action:
   outlined pill that fills with charcoal on hover, label set in Lora so it
   reads bespoke instead of generic. Arrow is Inter (geometric next to serif). */
.homes-cta{
  text-align:center;
  margin:6rem auto 0;max-width:46rem;
}
@media(min-width:768px){.homes-cta{margin-top:8rem}}

.homes-cta .cta-rule{
  display:block;width:32px;height:2px;
  background:var(--clay);
  margin:0 auto 1.75rem;
}
.homes-cta .eyebrow{margin-bottom:1.25rem}

.homes-cta .cta-statement{
  font-family:'Lora','Georgia',serif;font-weight:500;
  font-size:clamp(2rem,3.8vw,2.75rem);
  line-height:1.12;letter-spacing:-.02em;
  color:var(--charcoal);
  max-width:22ch;margin:0 auto 1.25rem;
}
.homes-cta .cta-helper{
  color:var(--muted);
  font-size:1.0625rem;line-height:1.65;
  max-width:34rem;margin:0 auto 2.5rem;
}

/* The button — outlined pill, charcoal stroke on bone, fills with charcoal
   on hover (left-to-right wipe). Text/border are Lora serif so it doesn't
   read as a stock SaaS pill. */
.homes-cta .cta-button{
  display:inline-flex;align-items:center;gap:1rem;
  padding:1.1rem 2.4rem;
  font-family:'Lora','Georgia',serif;
  font-size:1.0625rem;font-weight:500;letter-spacing:.005em;
  color:var(--charcoal);
  background:transparent;
  border:1.5px solid var(--charcoal);
  border-radius:999px;
  position:relative;overflow:hidden;
  isolation:isolate;
  transition:color .4s ease;
  cursor:pointer;
}
.homes-cta .cta-button::before{
  content:"";position:absolute;inset:0;
  background:var(--charcoal);
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.6,.05,.4,.95);
  z-index:-1;
}
.homes-cta .cta-button:hover,
.homes-cta .cta-button:focus-visible{color:var(--bone);outline:none}
.homes-cta .cta-button:hover::before,
.homes-cta .cta-button:focus-visible::before{transform:translateX(0)}
.homes-cta .cta-button:focus-visible{box-shadow:0 0 0 3px rgba(184,106,74,.25)}

.homes-cta .cta-arrow{
  font-family:'Inter',sans-serif;font-weight:400;font-size:1rem;
  display:inline-block;
  transition:transform .4s ease;
}
.homes-cta .cta-button:hover .cta-arrow,
.homes-cta .cta-button:focus-visible .cta-arrow{transform:translateX(5px)}

.homes-cta .cta-alt{
  margin-top:1.5rem;
  font-size:.875rem;color:var(--muted);
}
.homes-cta .cta-alt a{
  color:var(--charcoal);
  border-bottom:1px solid transparent;
  padding-bottom:.05rem;
  transition:border-color .25s ease,color .25s ease;
}
.homes-cta .cta-alt a:hover{color:var(--clay-text);border-color:var(--clay-text)}

/* PROCESS */
.process{background:var(--cream)}
.process-head{max-width:42rem;margin:0 auto 5rem;text-align:center}
.process-head h2{margin-bottom:1.25rem}
.process-head p{color:var(--muted);font-size:1.125rem}
.stages{display:flex;flex-direction:column;gap:6rem}
@media(min-width:768px){.stages{gap:8rem}}
.stage{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media(min-width:1024px){
  .stage{grid-template-columns:repeat(12,1fr);gap:2.5rem}
  .stage .photo{grid-column:span 7}
  .stage .text{grid-column:9 / span 4}
  .stage.reverse .photo{grid-column:6 / span 7;grid-row:1}
  .stage.reverse .text{grid-column:1 / span 4;grid-row:1}
}
.stage .photo .img-frame{aspect-ratio:4/5}
.stage h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:1.25rem}
.stage p{color:var(--muted)}

/* STORY */
.story{background:var(--bone)}
.story-hero{margin-bottom:5rem}
.story-hero .img-frame{aspect-ratio:21/9;width:100%;display:block}
.story-hero .img-frame.lb-trigger{padding:0;border:0;cursor:zoom-in}
.story-hero img{width:100%;height:100%;object-fit:cover;object-position:center}
.story-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:1024px){.story-grid{grid-template-columns:5fr 7fr;gap:4rem}}
.story-grid .lead h2{margin-bottom:1.5rem}
.story-grid .lead p{color:var(--muted);max-width:24rem}
.story-body p{color:var(--ink);margin-bottom:1.25rem;line-height:1.8}
.story-body p:last-child{margin-bottom:0}
.story-photos{margin-top:5rem;display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:768px){.story-photos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.story-photos{grid-template-columns:repeat(3,1fr)}}
.story-photos .img-frame.lb-trigger{display:block;width:100%;height:100%}
.story-photos .img-frame{aspect-ratio:4/3}
.stat-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
}
.stat-row dt{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.25rem}
.stat-row dd{font-family:'Lora',serif;font-size:1.5rem;color:var(--clay)}

/* CONTACT */
.contact{background:var(--charcoal);color:var(--bone)}
.contact h2{color:var(--bone);margin-bottom:1.5rem}
.contact .head{max-width:42rem;margin-bottom:3.5rem}
.contact .head .eyebrow{color:var(--clay-soft)}
.contact .head p{color:rgba(251,247,239,.7);line-height:1.7}
.contact-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:1024px){.contact-grid{grid-template-columns:4fr 8fr;gap:3rem}}
.contact-info{display:flex;flex-direction:column;gap:1.5rem}
.info-row{display:flex;align-items:flex-start;gap:.75rem}
.info-row svg{width:1.125rem;height:1.125rem;color:var(--clay-soft);margin-top:.25rem;flex-shrink:0}
.info-row .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(251,247,239,.5);margin-bottom:.25rem}
.info-row .val,.info-row a{color:var(--bone);transition:color .2s}
.info-row a:hover{color:var(--clay-soft)}
.form{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:768px){.form{grid-template-columns:repeat(2,1fr)}}
.form .field-full{grid-column:1/-1}
.form label{
  display:block;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.1em;
  color:rgba(251,247,239,.6);margin-bottom:.5rem;
}
.form label .optional{
  text-transform:none;letter-spacing:0;
  font-size:.75rem;color:rgba(251,247,239,.35);
  margin-left:.25rem;font-weight:400;
}
.form .hint{
  margin-top:.4rem;
  font-size:.8125rem;line-height:1.5;
  color:rgba(251,247,239,.5);
  text-transform:none;letter-spacing:0;
}
.form input,.form textarea{
  width:100%;background:transparent;color:var(--bone);
  border:1px solid rgba(251,247,239,.2);border-radius:.5rem;
  padding:.85rem 1rem;font:inherit;transition:border-color .2s;
}
.form input::placeholder,.form textarea::placeholder{color:rgba(251,247,239,.32)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--clay-soft)}
.form input:user-invalid,.form textarea:user-invalid{border-color:#D6655A}
.form textarea{min-height:8rem;resize:vertical}

.form-submit{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem;
  margin-top:.25rem;
}
.form button{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.95rem 1.85rem;background:var(--clay);color:var(--bone);
  font-weight:500;border-radius:999px;border:none;cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .2s ease;
}
.form button:hover{background:var(--bone);color:var(--charcoal);transform:translateY(-1px)}
.form button[disabled]{opacity:.6;cursor:wait}
.form button .btn-arrow{font-family:'Inter',sans-serif;display:inline-block;transition:transform .3s ease}
.form button:hover .btn-arrow{transform:translateX(3px)}
.form .trust{
  font-size:.75rem;color:rgba(251,247,239,.45);
  margin:0;line-height:1.5;
  text-transform:none;letter-spacing:.01em;
}

/* Success state — replaces the form on submit. Same column inside contact-grid. */
.form-success{
  padding:2rem 0;
  animation:formSuccessIn .5s cubic-bezier(.22,1,.36,1) both;
}
.form-success .eyebrow{color:var(--clay-soft);margin-bottom:.75rem}
.form-success h3{
  font-family:'Lora','Georgia',serif;font-weight:500;
  font-size:clamp(1.625rem,2.4vw,2rem);line-height:1.15;letter-spacing:-.02em;
  color:var(--bone);margin-bottom:1rem;
}
.form-success p{color:rgba(251,247,239,.75);line-height:1.6;font-size:1rem}
.form-success p a{
  color:var(--bone);
  border-bottom:1px solid rgba(251,247,239,.3);
  padding-bottom:.05rem;
  transition:border-color .2s ease;
}
.form-success p a:hover{border-color:var(--clay-soft);color:var(--clay-soft)}
@keyframes formSuccessIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Footer — four-column hierarchy: Brand | Visit | Explore | Follow.
   Stacks vertically on mobile. Bottom row holds copyright + tagline. */
footer{background:var(--charcoal);color:rgba(251,247,239,.6);border-top:1px solid rgba(251,247,239,.1)}
footer .container{padding-top:4rem;padding-bottom:2.25rem}
@media(min-width:768px){footer .container{padding-top:5rem;padding-bottom:2.5rem}}

footer .footer-grid{
  display:grid;grid-template-columns:1fr;gap:2.5rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(251,247,239,.1);
}
@media(min-width:640px){
  footer .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem 3rem}
}
@media(min-width:1024px){
  footer .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem}
}

footer h3{
  font-family:'Inter',sans-serif;
  font-size:.6875rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(251,247,239,.42);
  margin-bottom:1.1rem;
}

footer .col-brand img{
  height:32px;width:auto;border-radius:0;
  filter:brightness(0) invert(1);
  display:block;
}
footer .col-brand p{
  margin-top:1.4rem;
  font-family:'Lora','Georgia',serif;
  font-size:.9375rem;line-height:1.6;
  color:rgba(251,247,239,.7);
  max-width:22rem;
}

footer .col-visit p,
footer .col-visit a{
  display:block;
  font-size:.9375rem;line-height:1.5;
  color:rgba(251,247,239,.75);
  margin-bottom:.5rem;
  transition:color .2s ease;
}
footer .col-visit a:hover{color:var(--clay-soft)}

footer .col-pages a,
footer .col-follow a{
  display:flex;align-items:center;gap:.55rem;
  font-size:.9375rem;line-height:1;
  color:rgba(251,247,239,.75);
  margin-bottom:.85rem;
  transition:color .2s ease;
}
footer .col-pages a:hover,
footer .col-follow a:hover{color:var(--bone)}
footer .col-follow svg{width:16px;height:16px;flex-shrink:0}

footer .footer-bottom{
  padding-top:1.75rem;
  display:flex;flex-direction:column;gap:.6rem;
  font-size:.75rem;letter-spacing:.02em;
  color:rgba(251,247,239,.42);
}
@media(min-width:768px){
  footer .footer-bottom{flex-direction:row;align-items:center;justify-content:space-between;gap:1.5rem}
}
footer .footer-bottom .tagline{
  font-family:'Lora','Georgia',serif;font-style:italic;
  color:rgba(251,247,239,.5);
}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(15,12,8,.94);
  display:none;align-items:center;justify-content:center;padding:2rem;
}
.lightbox.open{display:flex}
.lb-stage{position:relative;max-width:min(1400px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}
.lb-stage img{max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:.25rem;box-shadow:0 30px 80px rgba(0,0,0,.6);object-fit:contain;cursor:pointer;user-select:none}
.lb-meta{display:flex;align-items:baseline;justify-content:space-between;width:100%;color:rgba(255,255,255,.85);font-size:.875rem}
.lb-meta .lb-title{font-family:'Lora',serif;font-size:1.125rem;color:#fff;margin-right:.75rem}
.lb-meta .lb-sub{color:rgba(255,255,255,.6)}
.lb-meta .lb-count{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.lb-btn{
  position:fixed;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.92);border:0;
  color:#1a1a1a;width:56px;height:56px;border-radius:50%;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s,box-shadow .2s;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  z-index:101;
}
.lb-btn:hover{background:#fff;transform:translateY(-50%) scale(1.06);box-shadow:0 10px 30px rgba(0,0,0,.55)}
.lb-btn svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.4}
.lb-prev{left:1.5rem}
.lb-next{right:1.5rem}
@media(max-width:600px){.lb-btn{width:48px;height:48px}.lb-prev{left:.5rem}.lb-next{right:.5rem}}
.lb-close{
  position:absolute;top:1.5rem;right:1.5rem;
  background:transparent;border:0;color:#fff;cursor:pointer;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  opacity:.8;transition:opacity .2s;
}
.lb-close:hover{opacity:1}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* Respect users who prefer no motion. Disable scroll-smoothing, the reveal-on-scroll
   transition, and any other slow transitions. The hero slideshow opts out via JS
   (see site.js — checks matchMedia('(prefers-reduced-motion: reduce)')). */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero .slide{transition:none}
  .img-frame.lb-trigger img,.landing-card .img-frame img,.home-card .img-frame.model-trigger img{transition:none}
  .lb-btn,.btn-primary,.form button,.lightbox{transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* Mobile menu drawer (≤1023px). The header button toggles `.menu-open` on
   <header>; on desktop nav.main is already visible and unaffected. */
@media(max-width:1023px){
  header.menu-open{
    background:rgba(251,247,239,.98);
    backdrop-filter:blur(10px);
    box-shadow:0 1px 0 rgba(0,0,0,.04);
  }
  header.menu-open .logo .logo-on-dark{display:none}
  header.menu-open .logo .logo-on-light{display:inline-block}
  header.menu-open .menu-btn{color:var(--charcoal)}
  header.menu-open nav.main{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(251,247,239,.98);
    backdrop-filter:blur(10px);
    padding:.25rem 1.5rem 1.25rem;
    border-top:1px solid var(--line);
    box-shadow:0 12px 24px rgba(0,0,0,.06);
  }
  header.menu-open nav.main a{
    color:var(--charcoal);opacity:1;
    padding:1rem 0;font-size:1rem;letter-spacing:.16em;
    border-bottom:1px solid var(--line);
  }
  header.menu-open nav.main a:last-child{border-bottom:0}
  header.menu-open .header-socials{display:none}
}

/* Model card photo-count badge — sits over the bottom-right of the photo */
.home-card .img-frame.model-trigger{cursor:zoom-in}
.home-card .photo-count{
  position:absolute;bottom:.75rem;right:.75rem;
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(0,0,0,.62);color:#fff;
  padding:.4rem .7rem;border-radius:999px;
  font-size:.75rem;font-weight:500;letter-spacing:.02em;
  backdrop-filter:blur(4px);
  pointer-events:none;
  transition:background .25s ease;
}
.home-card .img-frame.model-trigger:hover .photo-count{background:rgba(0,0,0,.78)}
.home-card .photo-count svg{display:block;flex-shrink:0}

/* Light caption tag below lightbox subtitle (used by model-trigger on close-up details) */
.lb-meta .lb-sub{opacity:.7}

/* Section headers inside Custom / Multifamily */
.homes-head .eyebrow{margin-bottom:.85rem}
.homes-head h1,.homes-head h2{margin-bottom:1rem}
.homes-head .homes-lede{color:var(--muted);font-size:1.0625rem;line-height:1.6;max-width:42rem}

/* Multifamily section — secondary emphasis: lighter top padding, soft divider above */
.homes-secondary{padding-top:0;background:var(--bone)}
.homes-secondary > .container{
  padding-top:5.5rem;
  border-top:1px solid var(--line);
}
@media(min-width:768px){.homes-secondary > .container{padding-top:8rem}}
@media(min-width:1024px){.homes-secondary > .container{padding-top:9rem}}

/* Solo grid — single card. On wider screens it sits left-aligned (~1/2 width)
   so it doesn't look orphaned in a 3-column track. */
.homes-grid-solo{grid-template-columns:1fr}
@media(min-width:768px){
  .homes-grid-solo{grid-template-columns:repeat(2,1fr)}
  .homes-grid-solo > .home-card{grid-column:span 1}
}
@media(min-width:1024px){
  .homes-grid-solo{grid-template-columns:repeat(3,1fr)}
  /* card spans 1 of 3 — same proportional weight as in Custom grid */
}

/* ======================== Header dropdowns ======================== */
/* Desktop nav dropdowns — used by Custom Homes / Multifamily.
   Each .nav-item.has-dropdown wraps one trigger link + a .dropdown panel. */
header nav.main{align-items:center}
header nav.main .nav-item.has-dropdown{position:relative;display:inline-flex;align-items:center}
header nav.main .nav-item.has-dropdown > a{
  display:inline-block;
}
/* Carets hidden — keeping markup as a forward-compat hook only.
   All 5 nav items share identical typography and weight. */
header nav.main .nav-item.has-dropdown .caret{display:none}

header nav.main .dropdown{
  display:none;
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%);
  min-width:280px;
  background:rgba(251,247,239,.98);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:.5rem;
  padding:.5rem;
  margin-top:.65rem;
  box-shadow:0 14px 32px rgba(0,0,0,.08);
  z-index:60;
}
header nav.main .nav-item.has-dropdown:hover .dropdown,
header nav.main .nav-item.has-dropdown:focus-within .dropdown,
header nav.main .nav-item.has-dropdown.open .dropdown{
  display:block;
}
/* Dropdown link items — distinct style from main nav links */
header nav.main .dropdown a{
  display:block;
  padding:.7rem .9rem;
  font-size:.8125rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--charcoal);
  opacity:1;
  border-radius:.35rem;
  white-space:nowrap;
  font-weight:500;
}
header nav.main .dropdown a:hover{
  background:rgba(0,0,0,.04);
  color:var(--clay);
}

/* Mobile drawer — flatten dropdowns into a vertical stack with sub-items */
@media(max-width:1023px){
  header.menu-open nav.main .nav-item.has-dropdown{
    width:100%;
  }
  header.menu-open nav.main .nav-item.has-dropdown > a{
    display:block;
    padding:1rem 0;
    font-size:1rem;
    border-bottom:1px solid var(--line);
  }
  /* Hide caret in mobile drawer — items are flattened so it'd be misleading */
  header.menu-open nav.main .nav-item.has-dropdown .caret{display:none}

  /* Dropdown becomes a static block listing under its parent */
  header.menu-open nav.main .dropdown{
    display:block;
    position:static;
    transform:none;
    background:transparent;
    border:none;
    box-shadow:none;
    backdrop-filter:none;
    padding:.25rem 0 .5rem .85rem;
    margin:0;
    min-width:0;
  }
  header.menu-open nav.main .dropdown a{
    padding:.7rem 0;
    color:var(--muted);
    font-size:.9375rem;
  }
  header.menu-open nav.main .dropdown a:hover{
    background:transparent;color:var(--clay);
  }
}

/* Phone link inside the mobile drawer — visible only when the drawer is open.
   Uses serif Lora to differentiate from the uppercase nav links above it. */
.drawer-phone{display:none !important}
@media(max-width:1023px){
  header.menu-open nav.main .drawer-phone{
    display:inline-flex !important;align-items:center;gap:.6rem;
    color:var(--clay-text);
    font-family:'Lora','Georgia',serif;font-weight:500;
    font-size:1.0625rem;letter-spacing:.005em;text-transform:none;
    padding:1.1rem 0 .5rem;
    margin-top:.5rem;border-top:1px solid var(--line);border-bottom:0;
  }
  header.menu-open nav.main .drawer-phone svg{width:18px;height:18px}
}

/* Highlight active section parent link */
header nav.main .nav-item.has-dropdown.active > a{color:var(--clay-soft)}
header.scrolled nav.main .nav-item.has-dropdown.active > a,
body.subpage header nav.main .nav-item.has-dropdown.active > a{color:var(--clay-text)}

/* ======================== Homes landing (homes.html) ======================== */
.landing-grid{
  grid-template-columns:1fr;
  gap:2.5rem 2rem;
}
@media(min-width:768px){.landing-grid{grid-template-columns:repeat(2,1fr)}}
.landing-card{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:transform .35s ease;
}
.landing-card:hover{transform:translateY(-2px)}
.landing-card .img-frame{
  margin-bottom:1.5rem;aspect-ratio:5/4;width:100%;
  overflow:hidden;border-radius:.5rem;background:#000;
}
.landing-card .img-frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.landing-card:hover .img-frame img{transform:scale(1.03)}
.landing-meta .eyebrow{margin-bottom:.6rem}
.landing-meta h2{margin-bottom:.85rem;font-size:clamp(1.625rem,2.6vw,2.25rem)}
.landing-sub{
  color:var(--muted);
  line-height:1.6;
  margin-bottom:1.25rem;
  font-size:1rem;
}
.landing-cta{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--clay-text);font-size:.875rem;font-weight:500;
  border-bottom:1px solid var(--clay-text);
  padding-bottom:.15rem;
  transition:color .25s ease, border-color .25s ease;
}
.landing-card:hover .landing-cta{
  color:var(--charcoal);border-color:var(--charcoal);
}

/* ====================================================================
   v9: SNAP-DECK HOME PAGE
   Activated only when <html class="home"> + <body class="home">.
   Subpages keep regular flow.
   ==================================================================== */
/* Mobile: proximity snap (gentle — won't fight scroll inside tall sections).
   Desktop: mandatory snap (deck feel — every section snaps cleanly). */
html.home,
html.home body{
  scroll-snap-type:y proximity;
}
@media(min-width:768px){
  html.home,
  html.home body{scroll-snap-type:y mandatory}
}
@media (hover:hover) and (pointer:fine){
  html.home{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  html.home{scroll-behavior:auto}
}

/* Each top-level <section> in main becomes a snap target. Hero is included
   so the user lands aligned even if they refresh mid-scroll.
   Mobile: flexible height — content can grow past 100svh (cards stack tall),
   and snap just aligns the top of each section. Desktop: exact 100vh with
   centered content for the deck feel. */
html.home body.home > main > section{
  scroll-snap-align:start;
  scroll-snap-stop:normal;
  min-height:100svh;
  padding:0;
  display:flex;flex-direction:column;
}
@media(min-width:768px){
  html.home body.home > main > section{
    min-height:100vh;height:100vh;
    justify-content:center;
    overflow:hidden;
  }
}
/* If the contact section's content is taller than the viewport (long form),
   allow it to scroll internally rather than being clipped. */
html.home body.home > main > section#contact{
  height:auto;min-height:100svh;overflow:visible;
  justify-content:flex-start;
}
@media(min-width:768px){
  html.home body.home > main > section#contact{min-height:100vh}
}
/* Hero already has its own height/layout; respect it but add snap. */
html.home body.home > main > section.hero{
  display:block;min-height:100svh;
}

/* Defer paint of off-screen sections so first-paint is fast.
   Only on desktop where sections are exact viewport height; on mobile,
   variable section heights make contain-intrinsic-size brittle.
   #contact excluded — its height:auto override fights the intrinsic-size. */
@media(min-width:768px){
  html.home body.home > main > section:not(.hero):not(#contact){
    content-visibility:auto;
    contain-intrinsic-size:100vh 100vh;
  }
}
/* Mobile: ensure sections grow with content rather than being capped. */
@media(max-width:767px){
  html.home body.home > main > section{height:auto}
}

/* Disable smooth scroll-behavior on the html base rule when in snap mode and
   user prefers reduced motion (already handled above, but explicit). */

/* ============== Section 2: "What we build" — Brands preview ============== */
/* Shared accent rule — clay 32×2px line above deck eyebrows. Mirrors the
   .homes-cta .cta-rule pattern so the visual signature is consistent. */
.deck-brands .cta-rule,
.deck-process .cta-rule,
.deck-story .cta-rule{
  display:block;width:32px;height:2px;background:var(--clay);
  margin:0 auto 1.4rem;
}
.deck-story .cta-rule{margin:0 0 1.4rem}

.deck-brands{background:var(--bone)}
.deck-brands .container{padding-top:3rem;padding-bottom:3rem}
.deck-brands .deck-head{max-width:42rem;margin:0 auto 2rem;text-align:center}
.deck-brands .deck-head h2{margin-bottom:.85rem}
.deck-brands .deck-head p{color:var(--muted);font-size:1rem;line-height:1.55}
.deck-brands .deck-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){
  .deck-brands .container{padding-top:3rem;padding-bottom:3rem}
  .deck-brands .deck-head{margin-bottom:3rem}
  .deck-brands .deck-head h2{margin-bottom:1rem}
  .deck-brands .deck-head p{font-size:1.0625rem;line-height:1.6}
  .deck-brands .deck-grid{grid-template-columns:1fr 1fr;gap:3rem}
}
/* Mobile: tighter card image (16/10, not 5/4) so 2 cards + head fit in
   one viewport. Desktop: keep the richer 5/4. */
.deck-brands .landing-card .img-frame{
  aspect-ratio:16/10;margin-bottom:.85rem;
}
@media(min-width:768px){
  .deck-brands .landing-card .img-frame{aspect-ratio:5/4;margin-bottom:1.25rem}
}
.deck-brands .landing-card{transform:none}
.deck-brands .landing-meta h2{font-size:clamp(1.25rem,2.4vw,2rem);margin-bottom:.4rem}
.deck-brands .landing-meta .eyebrow{margin-bottom:.4rem}
.deck-brands .landing-meta .landing-sub{font-size:.9375rem;line-height:1.5;margin-bottom:.85rem}
@media(min-width:768px){
  .deck-brands .landing-meta h2{margin-bottom:.6rem}
  .deck-brands .landing-meta .landing-sub{font-size:1rem;margin-bottom:1.25rem}
}

/* ============== Section 3: "How we work" — Process preview ============== */
.deck-process{background:var(--cream)}
.deck-process .container{padding-top:3rem;padding-bottom:3rem}
.deck-process .deck-head{max-width:42rem;margin:0 auto 3.5rem;text-align:center}
.deck-process .deck-head h2{margin-bottom:1rem}
.deck-process .deck-head p{color:var(--muted);font-size:1.0625rem;line-height:1.6}
.deck-process .stages-mini{
  display:grid;grid-template-columns:1fr;gap:2rem;
  max-width:64rem;margin:0 auto 3rem;
}
@media(min-width:768px){.deck-process .stages-mini{grid-template-columns:repeat(4,1fr);gap:2rem}}
.stage-mini{position:relative;padding-left:0}
@media(min-width:768px){
  .stage-mini{padding-left:1.25rem;border-left:1px solid var(--line)}
  .stage-mini:first-child{padding-left:0;border-left:0}
}
.stage-mini .stage-num{
  font-family:'Lora','Georgia',serif;
  font-size:1.625rem;color:var(--clay-text);
  margin-bottom:.4rem;line-height:1;
}
.stage-mini .stage-label{
  font-family:'Inter',sans-serif;font-size:.6875rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--charcoal);margin-bottom:.65rem;
}
.stage-mini .stage-line{font-size:.9375rem;color:var(--muted);line-height:1.55}
.deck-process .deck-cta{text-align:center}
.deck-process .deck-cta a{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:.95rem 2.1rem;
  font-family:'Lora','Georgia',serif;font-size:1rem;font-weight:500;
  color:var(--charcoal);background:transparent;
  border:1.5px solid var(--charcoal);border-radius:999px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s ease;
}
.deck-process .deck-cta a::before{
  content:"";position:absolute;inset:0;background:var(--charcoal);
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.6,.05,.4,.95);z-index:-1;
}
.deck-process .deck-cta a:hover,
.deck-process .deck-cta a:focus-visible{color:var(--bone);outline:none}
.deck-process .deck-cta a:hover::before,
.deck-process .deck-cta a:focus-visible::before{transform:translateX(0)}
.deck-process .deck-cta .arrow{
  font-family:'Inter',sans-serif;display:inline-block;
  transition:transform .35s ease;
}
.deck-process .deck-cta a:hover .arrow{transform:translateX(4px)}

/* ============== Section 4: "Our story" — Story preview ============== */
.deck-story{background:var(--bone)}
.deck-story .container{padding-top:3rem;padding-bottom:3rem}
.deck-story .deck-grid{
  display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;
}
@media(min-width:1024px){
  .deck-story .deck-grid{grid-template-columns:6fr 5fr;gap:4rem}
}
.deck-story .deck-photo .img-frame{
  aspect-ratio:16/10;width:100%;
  overflow:hidden;border-radius:.5rem;
}
.deck-story .deck-photo img{width:100%;height:100%;object-fit:cover}
.deck-story .deck-text .eyebrow{margin-bottom:1rem}
.deck-story .deck-text h2{margin-bottom:1.25rem}
.deck-story .deck-text p{
  color:var(--muted);line-height:1.7;margin-bottom:1.75rem;
  font-size:1.0625rem;
}
.deck-story .deck-text .deck-link{
  display:inline-flex;align-items:center;gap:.55rem;
  color:var(--clay-text);font-size:.9375rem;font-weight:500;
  border-bottom:1px solid var(--clay-text);padding-bottom:.15rem;
  transition:color .25s,border-color .25s;
}
.deck-story .deck-text .deck-link:hover{color:var(--charcoal);border-color:var(--charcoal)}

/* Contact section inside snap-deck: container needs its own padding since
   we stripped section padding for the deck. (justify-content set above.) */
html.home body.home > main > section#contact > .container{
  padding-top:6rem;padding-bottom:3rem;
}
@media(min-width:768px){
  html.home body.home > main > section#contact > .container{
    padding-top:8rem;
  }
}

/* 404 page wrapper */
.error-page{
  min-height:calc(100svh - 88px);
  padding-top:8rem;padding-bottom:6rem;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  background:var(--bone);
}
.error-page .inner{max-width:32rem;padding:0 1.5rem}
.error-page .cta-rule{
  display:block;width:32px;height:2px;background:var(--clay);
  margin:0 auto 1.75rem;
}
.error-page .eyebrow{margin-bottom:1rem}
.error-page h1{
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.15;letter-spacing:-.02em;
  color:var(--charcoal);margin-bottom:1rem;
}
.error-page p{color:var(--muted);line-height:1.6;margin-bottom:2.25rem}
.error-page a.btn{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:1rem 2.1rem;
  font-family:'Lora','Georgia',serif;font-size:1rem;font-weight:500;
  color:var(--charcoal);background:transparent;
  border:1.5px solid var(--charcoal);border-radius:999px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s ease;
}
.error-page a.btn::before{
  content:"";position:absolute;inset:0;background:var(--charcoal);
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.6,.05,.4,.95);z-index:-1;
}
.error-page a.btn:hover,
.error-page a.btn:focus-visible{color:var(--bone);outline:none}
.error-page a.btn:hover::before,
.error-page a.btn:focus-visible::before{transform:translateX(0)}
.error-page a.btn:focus-visible{box-shadow:0 0 0 3px rgba(184,106,74,.25)}
.error-page a.btn .arrow{
  font-family:'Inter',sans-serif;display:inline-block;
  transition:transform .35s ease;
}
.error-page a.btn:hover .arrow{transform:translateX(4px)}