:root{
  --paper:#f6f4ef;
  --paper2:#ece8df;
  --ink:#171717;
  --muted:#6e6b65;
  --line:#d7d2c8;
  --white:#fff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
img,video{display:block;width:100%;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin-top:0}

.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  height:78px;
  padding:0 3.5vw;
  display:flex;
  align-items:center;
  gap:34px;
  color:#fff;
  border-bottom:1px solid transparent;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.site-header.scrolled,
.site-header.light-header{
  color:var(--ink);
  background:rgba(246,244,239,.94);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-color:var(--line);
}
.brand{
  font-family:Manrope,sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  white-space:nowrap;
}
nav{
  display:flex;
  gap:23px;
  margin-left:auto;
  font-size:.86rem;
}
nav a{opacity:.82}
nav a:hover,nav a.active{opacity:1}
.mini-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:.68rem;
  line-height:1.45;
  opacity:.78;
}

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:#fff;
  background:#111;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.63),rgba(0,0,0,.06) 72%),
    linear-gradient(0deg,rgba(0,0,0,.42),transparent 58%);
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:1050px;
  padding:0 4vw 10vh;
}
.eyebrow{
  margin-bottom:22px;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.18em;
}
.eyebrow.dark{color:#6d6961}
h1{
  margin-bottom:26px;
  font-family:Manrope,sans-serif;
  font-size:clamp(4rem,10vw,10rem);
  line-height:.88;
  letter-spacing:-.065em;
}
.hero-content>p:not(.eyebrow){
  max-width:660px;
  font-size:clamp(1rem,1.5vw,1.24rem);
  line-height:1.65;
}
.primary-button{
  display:inline-block;
  margin-top:22px;
  padding:14px 20px;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-size:.88rem;
  font-weight:600;
}

.section{
  padding:125px 4vw;
  border-bottom:1px solid var(--line);
}
.section-heading{
  max-width:1150px;
  margin-bottom:58px;
}
.section-heading h2,
.contact h2,
.budget-message h2{
  margin:0;
  font-family:Manrope,sans-serif;
  font-size:clamp(2.6rem,5.8vw,5.7rem);
  line-height:1.02;
  letter-spacing:-.05em;
}
.section-heading.compact{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}

.offer{background:var(--paper)}
.offer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.offer-grid article{
  min-height:285px;
  padding:34px 28px 42px 0;
  border-bottom:1px solid var(--line);
}
.offer-grid article:not(:last-child){border-right:1px solid var(--line)}
.offer-grid article:not(:first-child){padding-left:28px}
.offer-grid span,
.service-grid span{
  font-size:.7rem;
  color:var(--muted);
}
.offer-grid h3{
  margin:18px 0 12px;
  font-family:Manrope,sans-serif;
  font-size:1.7rem;
}
.offer-grid p,
.service-grid p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
}

.partners{background:var(--paper2)}
.partners-heading{max-width:950px}
.partner-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.partner-card{
  min-height:250px;
  display:grid;
  place-items:center;
  padding:34px;
  overflow:hidden;
  border:1px solid var(--line);
}
.partner-card.dark-logo{background:#111}
.partner-card.light-logo{background:#fff}
.partner-card img{
  width:auto;
  height:auto;
  max-width:78%;
  max-height:150px;
  object-fit:contain;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.service-grid article{
  min-height:245px;
  padding:34px 28px 44px 0;
  border-bottom:1px solid var(--line);
}
.service-grid article:not(:nth-child(3n)){border-right:1px solid var(--line)}
.service-grid article:nth-child(3n+2),
.service-grid article:nth-child(3n+3){padding-left:28px}
.service-grid h3{
  margin:18px 0 10px;
  font-size:1.45rem;
}

.contact{background:var(--paper2)}
.contact h2{
  max-width:900px;
  margin-bottom:50px;
}
.contact-intro{
  max-width:720px;
  margin:-28px 0 42px;
  color:var(--muted);
  line-height:1.75;
}
.contact-card{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.contact-card>div{padding:27px 26px 29px 0}
.contact-card>div:not(:last-child){border-right:1px solid var(--line)}
.contact-card>div:nth-child(2),
.contact-card>div:nth-child(3){padding-left:26px}
.contact-card span{
  display:block;
  margin-bottom:10px;
  color:var(--muted);
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.contact-card a,
.contact-card p{
  margin:0;
  font-family:Manrope,sans-serif;
  font-size:clamp(1.1rem,2vw,1.85rem);
}
.contact-contrast{
  background:#171717;
  color:#f6f4ef;
  border-bottom-color:#2f2f2f;
}
.contact-contrast .eyebrow.dark,
.contact-contrast .contact-intro,
.contact-contrast .contact-card span{color:#b8b5ae}
.contact-contrast .contact-card{
  border-top-color:#3b3b3b;
  border-bottom-color:#3b3b3b;
}
.contact-contrast .contact-card>div:not(:last-child){border-right-color:#3b3b3b}
.contact-contrast .contact-card a,
.contact-contrast .contact-card p{color:#f6f4ef}

.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.gallery figure{
  position:relative;
  min-height:550px;
  margin:0;
  overflow:hidden;
  background:#ddd;
}
.gallery figure.wide{
  grid-column:span 2;
  min-height:570px;
}
.gallery figure.tall{min-height:720px}
.gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.gallery figure:hover img{transform:scale(1.025)}
.gallery figcaption{
  position:absolute;
  left:20px;
  bottom:18px;
  color:#fff;
  font-weight:600;
  text-shadow:0 2px 18px rgba(0,0,0,.48);
}

footer{
  padding:34px 4vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#fff;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.8rem;
}
.footer-brand{color:var(--ink)}

.learn-page{padding-top:78px}
.learn-main{overflow:hidden}
.learn-intro{
  max-width:1150px;
  padding:110px 4vw 95px;
}
.learn-intro h1{
  margin-bottom:34px;
  color:var(--ink);
  font-size:clamp(3.2rem,7vw,7rem);
}
.learn-intro>p:last-child{
  max-width:760px;
  color:var(--muted);
  font-size:1.12rem;
  line-height:1.8;
}
.budget-steps{padding:0 4vw 100px}
.budget-card{
  min-height:530px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:6vw;
  padding:50px 0;
  border-top:1px solid var(--line);
}
.budget-copy{max-width:620px}
.budget-value{
  margin-bottom:25px;
  font-family:Manrope,sans-serif;
  font-size:clamp(4rem,8vw,8rem);
  line-height:.9;
  letter-spacing:-.06em;
}
.budget-copy h2{
  margin-bottom:20px;
  font-family:Manrope,sans-serif;
  font-size:clamp(2rem,4vw,4rem);
  letter-spacing:-.04em;
}
.budget-copy>p:last-child{
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.8;
}
.budget-photo{
  min-height:390px;
  overflow:hidden;
  background:#ddd;
  border:1px solid var(--line);
}
.budget-photo img{
  width:100%;
  height:100%;
  min-height:390px;
  object-fit:cover;
}
.budget-message{
  padding:135px 4vw;
  background:var(--paper2);
}
.budget-message h2{
  max-width:1000px;
  margin-bottom:35px;
}
.budget-message>p:not(.eyebrow){
  max-width:820px;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.85;
}
.free-advice{
  margin-top:46px;
  padding:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  background:var(--paper);
  border:1px solid var(--line);
}
.free-advice span{
  display:block;
  margin-bottom:10px;
  color:var(--muted);
  font-size:.68rem;
  letter-spacing:.16em;
}
.free-advice h3{
  margin-bottom:9px;
  font-family:Manrope,sans-serif;
  font-size:1.65rem;
}
.free-advice p{
  max-width:650px;
  margin-bottom:0;
  color:var(--muted);
  line-height:1.7;
}
.free-advice .primary-button{
  margin-top:0;
  white-space:nowrap;
}
.dark-button{
  background:var(--ink);
  color:#fff;
}

.shop-page{
  padding-top:78px;
  background:var(--paper2);
}
.shop-main{
  min-height:calc(100vh - 160px);
  display:grid;
  place-items:center;
}
.shop-hero{
  width:min(1100px,92vw);
  padding:120px 4vw;
}
.shop-hero h1{
  margin-bottom:28px;
  color:var(--ink);
  font-size:clamp(4rem,10vw,9rem);
}
.shop-hero>p:not(.eyebrow){
  color:var(--muted);
  font-size:1.15rem;
}

@media (max-width:900px){
  .mini-contact{display:none}
  .offer-grid{grid-template-columns:repeat(2,1fr)}
  .offer-grid article:nth-child(2){border-right:0}
  .offer-grid article:nth-child(3){padding-left:0}
  .service-grid{grid-template-columns:1fr 1fr}
  .service-grid article{padding:30px 22px}
  .service-grid article:not(:nth-child(3n)){border-right:0}
  .service-grid article:nth-child(odd){border-right:1px solid var(--line)}
  .budget-card{grid-template-columns:1fr}
}

@media (max-width:700px){
  .site-header{
    height:68px;
    padding:0 5vw;
  }
  nav{
    gap:14px;
    font-size:.75rem;
  }
  nav a:nth-child(1),
  nav a:nth-child(2){display:none}

  .section{padding:88px 5vw}
  .offer-grid,
  .partner-grid,
  .service-grid,
  .contact-card,
  .gallery{grid-template-columns:1fr}

  .offer-grid article,
  .offer-grid article:not(:first-child){
    min-height:auto;
    padding:28px 0;
    border-right:0;
  }
  .partner-card{min-height:210px}

  .service-grid article,
  .service-grid article:nth-child(n){
    min-height:auto;
    padding:30px 0;
    border-right:0;
  }

  .contact-card>div,
  .contact-card>div:nth-child(2),
  .contact-card>div:nth-child(3){
    padding:23px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .contact-contrast .contact-card>div:not(:last-child){
    border-right:0;
    border-bottom:1px solid #3b3b3b;
  }
  .contact-intro{margin-top:-18px}

  .gallery figure,
  .gallery figure.wide,
  .gallery figure.tall{
    grid-column:auto;
    min-height:460px;
  }
  .section-heading.compact{display:block}

  footer{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .learn-page{padding-top:68px}
  .learn-intro{padding:80px 5vw 65px}
  .budget-steps{padding:0 5vw 80px}
  .budget-card{
    min-height:auto;
    padding:38px 0;
  }
  .budget-photo,
  .budget-photo img{min-height:260px}
  .free-advice{
    flex-direction:column;
    align-items:flex-start;
  }

  .shop-page{padding-top:68px}
  .shop-hero{padding:80px 5vw}
}