:root{
  --sand:        #F1EBE1;
  --sand-2:      #E9E0D1;
  --forest:      #1E2E26;

  --rule:        #D5CBBA;
  --rule-forest: #38493F;

  --ink:         #181D1A;
  --ink-2:       #59635B;
  --ink-3:       #6F6A5E;
  --on-forest:   #EDE5D7;
  --on-forest-2: #9DAB9E;
  --on-video:    #FFFFFF;

  --rust:        #B85433;
  --on-rust:     #FFFFFF;

  --content:     1280px;
  --gutter:      80px;
  --gap:         24px;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:"Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video,svg{ display:block; max-width:100% }
figure{ margin:0 }

picture{ display:block }
a{ color:inherit }
p{ margin:0 }

.h1{
  overflow-wrap:break-word;
  font-size:clamp(2.5rem, 5.3vw, 4.75rem);
  font-weight:600;
  line-height:.96;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}
.h2{
  font-size:clamp(2rem, 4.45vw, 4rem);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
.h3{
  font-size:clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.015em;
  margin:0;
}
.lede{ font-size:1.125rem; line-height:1.5 }
.base{ font-size:1.125rem; line-height:1.55 }
.small{ font-size:.875rem; line-height:1.5 }

.mono-label,
.mono-data{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-weight:400;
}
.mono-label{ font-size:.6875rem; line-height:1.5; letter-spacing:.15em; text-transform:uppercase }
.mono-data { font-size:.71875rem; line-height:1.5; letter-spacing:.02em }

.muted   { color:var(--ink-2) }
.muted-3 { color:var(--ink-3) }

.section{ padding:var(--gutter) 0 }
.section--ruled{ border-top:1px solid var(--rule) }

.wrap{
  width:min(var(--content), 100% - var(--gutter) * 2);
  margin-inline:auto;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 26px;
  border:0;
  border-radius:0;
  font-family:inherit;
  font-size:.90625rem;
  font-weight:500;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary{ background:var(--rust); color:var(--on-rust) }
.btn--primary:hover,
.btn--primary:focus-visible{ background:var(--forest) }

.btn--ghost{
  background:transparent;
  color:var(--on-forest);
  box-shadow:inset 0 0 0 1px var(--on-forest);
}
.btn--ghost:hover,
.btn--ghost:focus-visible{ background:var(--on-forest); color:var(--forest) }

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

.hero{
  position:relative;

  height:100vh;
  height:100dvh;
  min-height:560px;
  overflow:hidden;
  background:var(--forest);
  isolation:isolate;
}
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.hero__scrim-bottom{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(28,46,38,0)    0%,
    rgba(28,46,38,.45) 55%,
    rgba(28,46,38,.88) 100%
  );
}
.hero__scrim-top{
  position:absolute;
  inset:0 0 auto 0;
  height:180px;
  z-index:1;
  background:linear-gradient(to bottom, rgba(28,46,38,.55), rgba(28,46,38,0));
}

.brand{ display:flex; align-items:center; gap:12px }
.brand__mark{
  flex:0 0 auto;
  width:40px;
  height:40px;
  background:currentColor;
  -webkit-mask:url(assets/logo_mark.svg) center / contain no-repeat;
          mask:url(assets/logo_mark.svg) center / contain no-repeat;
}
.brand__word{ display:block; width:174px; height:32px }

.hero__logo{
  position:absolute;
  top:34px;
  left:var(--gutter);
  z-index:3;
  color:var(--on-video);
}

.hero__contacts{
  position:absolute;
  top:28px;
  right:var(--gutter);
  z-index:3;
  display:flex;
  align-items:center;
  gap:24px;
  padding:12px 22px;
  border-radius:2px;
  background:rgba(30,46,38,.82);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--on-forest);
}
.hero__contacts a{ text-decoration:none; white-space:nowrap }
.hero__contacts a:hover{ text-decoration:underline; text-underline-offset:3px }

.hero__bottom{
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  bottom:120px;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:60px;
  color:var(--on-video);
}
.hero__copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:26px;
  max-width:1000px;
}

.hero__kinds{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:260px;
}
.hero__kinds-label{ color:rgba(237,229,215,.65) }
.hero__kinds-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid rgba(237,229,215,.25);
}
.hero__kinds-list li{
  padding:11px 0;
  border-bottom:1px solid rgba(237,229,215,.25);
  font-size:1.0625rem;
  line-height:1.35;
}

.hero__copy .h1{
  font-size:clamp(2.75rem, 6.1vw, 5.5rem);
}
.hero__lede{
  max-width:780px;
  font-size:clamp(1.25rem, 2.45vw, 2.25rem);
  line-height:1.35;
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px }

.facts__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
  margin-top:44px;
}
.fact{ display:flex; flex-direction:column; gap:8px }

.fact .h3{ margin-top:16px }

.fact__media{
  aspect-ratio:2 / 3;
  background:var(--sand-2);
  overflow:hidden;
}
.fact__media picture,
.fact__media img{ width:100%; height:100%; object-fit:cover }

.finish__head{ padding-bottom:18px }

.finish__cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  margin-top:44px;
  align-items:start;
}
.finish__copy{ display:flex; flex-direction:column; gap:14px; align-items:flex-start }
.finish__copy p{ max-width:520px }
.finish__copy .btn{ margin-top:10px }

.finish__right{ display:flex; flex-direction:column; gap:24px }

.swatches{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:auto auto auto;
  grid-auto-flow:column;
  column-gap:var(--gap);
  row-gap:9px;
}
.swatch,
.swatch figcaption{ display:contents }
.swatch__chip{
  aspect-ratio:195 / 137;
  overflow:hidden;
  background:var(--sand-2);
}
.swatch__chip picture,
.swatch__chip img{ width:100%; height:100%; object-fit:cover }
.swatch__name{ display:block }
.swatch__sheen{ display:block; color:var(--ink-3) }

.finish__photo{
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--sand-2);
}
.finish__photo picture,
.finish__photo img{ width:100%; height:100%; object-fit:cover }

.works__grid{ display:flex; flex-direction:column; gap:var(--gap); margin-top:28px }

.works__row{ display:grid; gap:var(--gap) }

.works__row--1{ grid-template-columns:1791fr 747fr }
.works__row--2{ grid-template-columns:747fr 747fr 1791fr }

.shot{ overflow:hidden; background:var(--sand-2) }
.shot picture,
.shot img{ width:100%; height:100%; object-fit:cover }
.shot--p{ aspect-ratio:747 / 1000 }
.shot--l{ aspect-ratio:1791 / 1000 }

.lead__panel{
  background:var(--sand-2);
  padding:56px;
  display:flex;
  flex-direction:column;
  gap:30px;
}
.lead__head{ display:flex; flex-direction:column; gap:12px }
.lead__head p{ max-width:620px }

.lead__form{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:20px;
  align-items:end;
}
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-bottom:10px;
  border-bottom:1px solid var(--rule);
}
.field label{ color:var(--ink-3) }
.field input{
  border:0;
  background:transparent;
  padding:0;
  font-family:inherit;
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
}
.field input::placeholder{ color:var(--ink-3) }
.field input:focus{ outline:none }
.field:focus-within{ border-bottom-color:var(--rust) }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }

.lead__status{
  grid-column:1 / -1;
  margin:0;
  min-height:1.4em;
  font-size:.875rem;
  line-height:1.4;
}
.lead__status.is-err{
  padding:12px 16px;
  background:rgba(184,84,51,.10);
  border-left:3px solid var(--rust);
  color:var(--rust);
}

.lead__done{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:26px 30px;
  background:var(--forest);
  color:var(--on-forest);
}
.lead__done[hidden]{ display:none }
.lead__done:focus{ outline:none }
.lead__done svg{ flex:0 0 auto; width:26px; height:26px; margin-top:1px }
.lead__done-title{
  margin:0 0 4px;
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-.01em;
}
.lead__done-sub{ margin:0; font-size:1.125rem; line-height:1.5; color:var(--on-forest-2) }
.lead__done-sub a{ color:var(--on-forest); text-underline-offset:3px }

.btn[disabled]{ opacity:.6; cursor:default }

.footer{
  background:var(--forest);
  color:var(--on-forest);
  padding:80px 0 44px;
}
.footer__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:60px;
}
.footer__brand{ display:flex; flex-direction:column; gap:16px }

.footer__brand p{ max-width:420px; color:var(--on-forest-2) }

.footer__contacts{ display:flex; gap:48px; flex-wrap:wrap }
.footer__contact{ display:flex; flex-direction:column; gap:8px }
.footer__contact dt{ color:var(--on-forest-2); margin:0 }
.footer__contact dd{ margin:0 }
.footer__contact a{ text-decoration:none }
.footer__contact a:hover{ text-decoration:underline; text-underline-offset:3px }

.footer__bottom{
  margin-top:56px;
  padding-top:26px;
  border-top:1px solid var(--rule-forest);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:var(--on-forest-2);
}

@media (max-width:1200px){
  .finish__cols{ gap:40px }
}

@media (max-width:1000px){
  :root{ --gutter:48px }

  .hero__contacts{ gap:16px; padding:10px 16px }

  .finish__cols{ grid-template-columns:1fr; gap:44px }
  .finish__copy p{ max-width:none }

  .lead__form{ grid-template-columns:1fr 1fr; }
  .lead__form .btn{ grid-column:1 / -1; justify-self:start }
}

@media (max-width:760px){
  :root{ --gutter:24px; --gap:16px }

  .section{ padding:56px 0 }

  .hero{
    height:auto;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:104px var(--gutter) 56px;
  }
  .hero__bottom{
    position:static;
    left:auto; right:auto; bottom:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
  }
  .hero__copy{ max-width:none; min-width:0; gap:18px; width:100% }
  .hero__copy .h1{ font-size:clamp(1.9rem, 8.2vw, 2.6rem); line-height:1.04 }
  .hero__lede{ max-width:none; font-size:clamp(1rem, 4.3vw, 1.25rem) }

  .hero__ctas{ width:100%; gap:10px }
  .hero__ctas .btn{ flex:1 1 150px }

  .hero__kinds{ min-width:0; width:100% }
  .hero__kinds-list li{ padding:9px 0; font-size:1rem }

  .hero__contacts{ display:none }

  .facts__grid{ grid-template-columns:1fr }

  .swatches{ grid-template-columns:repeat(3, 1fr); gap:10px }

  .works__row--1,
  .works__row--2{ grid-template-columns:1fr }

  .lead__panel{ padding:32px 24px }
  .lead__form{ grid-template-columns:1fr }

  .footer{ padding:56px 0 32px }
  .footer__top{ flex-direction:column; gap:40px }
  .footer__contacts{ gap:28px }
  .footer__bottom{ margin-top:40px; flex-direction:column; align-items:flex-start }
}

@media (max-width:480px){
  .hero__ctas{ flex-direction:column; align-items:stretch; gap:10px }
  .hero__ctas .btn{ flex:0 0 auto; width:100% }

  .finish__copy .btn{ align-self:stretch; width:100% }

  .lead__form .btn{ justify-self:stretch; width:100% }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
}