/* hero */
.hero{
  position:relative;
  min-height:520px;
  height:calc(100vh - 110px);
  height:calc(100dvh - 110px);
  max-height:900px;
  overflow:hidden;
  color:#fff;
  background:#2b3a2a;
}
.hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(20,24,18,0) 35%,rgba(20,24,18,.7) 100%),linear-gradient(90deg,rgba(20,24,18,.35) 0%,rgba(20,24,18,0) 60%);
}
.hero__body{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  padding:0 var(--gutter) 24px;
}
.hero__title{
  margin:0 0 28px;
  font-family:var(--serif);
  font-weight:400;
  font-size:42px;
  font-size:4.2rem;
  line-height:1;
  letter-spacing:-.02em;
  text-shadow:0 1px 12px rgba(0,0,0,.25);
}
.hero__tabs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}
.hero__tab{
  flex:0 0 260px;
  scroll-snap-align:start;
  padding:18px 20px 40px;
  border-radius:5px;
  background:rgba(61,60,55,.3);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  font-family:var(--serif);
  font-size:17px;
  font-size:1.7rem;
  line-height:1.2;
  text-decoration:none;
  transition:background .25s ease;
}
.hero__tab:hover{background:rgba(61,60,55,.55)}

@media (min-width:769px){
  .hero__body{padding:0 32px 32px}
  .hero__title{font-size:80px;font-size:8rem;margin-bottom:40px}
  .hero__tab{flex-basis:296px}
}

/* statement */
.statement{padding:40px var(--gutter) 80px}
.statement__txt{
  margin:0;
  max-width:1240px;
  font-family:var(--serif);
  font-weight:300;
  font-size:30px;
  font-size:3rem;
  line-height:1.12;
  letter-spacing:-.015em;
  text-wrap:pretty;
}
@media (min-width:769px){
  .statement{padding:48px 32px 120px}
  .statement__txt{font-size:64px;font-size:6.4rem;line-height:1.1}
}

/* story split */
.story{padding:0 var(--gutter) 76px}
.story__grid{display:grid;gap:28px}
.story__grid>*{min-width:0}
.story__title{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:36px;
  font-size:3.6rem;
  line-height:1.05;
  letter-spacing:-.02em;
}
.story__small{width:200px;margin-bottom:16px;aspect-ratio:3/4;object-fit:cover}
.story__side p{margin:0 0 14px;max-width:300px}
.story__big img{width:100%;aspect-ratio:16/9;object-fit:cover}

@media (min-width:960px){
  .story{padding:0 32px 120px}
  .story__grid{grid-template-columns:repeat(12,1fr);column-gap:20px;row-gap:56px}
  .story__title{grid-column:5/-1;font-size:64px;font-size:6.4rem}
  .story__side{grid-column:1/4;grid-row:2}
  .story__big{grid-column:5/-1;grid-row:2}
}

/* numbered list */
.numbered{padding:0 0 80px}
.numbered__title{
  margin:0 0 40px;
  padding:0 var(--gutter);
  font-family:var(--serif);
  font-weight:400;
  font-size:36px;
  font-size:3.6rem;
  line-height:1.05;
  letter-spacing:-.02em;
}
.numbered__list{margin:0;padding:0;list-style:none}
.numbered__row{
  display:grid;
  grid-template-columns:40px 1fr 88px;
  gap:6px 16px;
  padding:20px var(--gutter);
  border-top:1px solid var(--line);
}
.numbered__row:last-child{border-bottom:1px solid var(--line)}
.numbered__no,.numbered__tag{font-size:13px;font-size:1.3rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.numbered__tag{grid-column:2}
.numbered__no{grid-row:1}
.numbered__main{grid-column:2;min-width:0}
.numbered__h{
  margin:0 0 10px;
  font-family:var(--serif);
  font-weight:400;
  font-size:22px;
  font-size:2.2rem;
  line-height:1.15;
}
.numbered__thumb{
  grid-column:3;
  grid-row:1/span 2;
  width:88px;
  height:88px;
  object-fit:cover;
  transition:transform .6s ease;
}
.numbered__row:hover .numbered__thumb{transform:scale(1.1)}
.numbered__row{overflow:hidden}

@media (min-width:960px){
  .numbered__title{padding:0 32px;font-size:64px;font-size:6.4rem;margin-bottom:56px}
  .numbered__row{grid-template-columns:repeat(12,1fr);column-gap:20px;padding:24px 32px 36px}
  .numbered__no{grid-column:1}
  .numbered__tag{grid-column:2/4;grid-row:1}
  .numbered__main{grid-column:5/10;grid-row:1}
  .numbered__h{font-size:32px;font-size:3.2rem}
  .numbered__thumb{grid-column:12;grid-row:1;width:94px;height:94px;justify-self:end}
}

/* calculator + form */
.calc{display:grid;gap:40px;padding:80px var(--gutter);background:#efe9e1}
.calc>*{min-width:0}
.calc__title{
  margin:0 0 16px;
  font-family:var(--serif);
  font-weight:400;
  font-size:36px;
  font-size:3.6rem;
  line-height:1.05;
  letter-spacing:-.02em;
}
.calc__intro p{max-width:460px}
.calc__grid{width:100%;max-width:420px;border-collapse:collapse;margin-top:20px}
.calc__grid th,.calc__grid td{padding:10px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.calc__grid td{text-align:right;font-family:var(--serif);font-size:20px;font-size:2rem}
.calc__form{display:grid;gap:28px}
.calc__set{margin:0;padding:24px;border:1px solid var(--line);background:#f7f3ee;min-width:0}
.calc__legend{padding:0 8px;font-size:13px;font-size:1.3rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.calc__dims{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc__choice{margin:6px 0 4px}
.calc__result{margin-top:18px;padding:18px 0 0;border-top:1px solid #3d3c37}
.calc__surface{margin:0;font-size:13px;font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase}
.calc__price{margin:4px 0;font-family:var(--serif);font-size:34px;font-size:3.4rem;line-height:1.1}
.calc__note{margin:0;color:#5c5a53}
.calc__etat{margin:16px 0 0;padding:12px 14px;border-left:3px solid var(--leaf);background:#fff;font-weight:500}
.calc__etat.is-bad{border-left-color:#a8261d}

@media (min-width:960px){
  .calc{grid-template-columns:repeat(12,1fr);column-gap:20px;padding:96px 32px}
  .calc__intro{grid-column:1/5}
  .calc__form{grid-column:6/-1;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .calc__title{font-size:56px;font-size:5.6rem}
}

/* season */
.season{padding:80px var(--gutter)}
.season__title{
  margin:0 0 28px;
  font-family:var(--serif);
  font-weight:400;
  font-size:36px;
  font-size:3.6rem;
  line-height:1.05;
  letter-spacing:-.02em;
}
.season__scroll{overflow-x:auto;border-top:1px solid #3d3c37}
.season__table{width:100%;min-width:640px;border-collapse:collapse;text-align:center}
.season__table th{padding:12px 4px;font-size:12px;font-size:1.2rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.season__table td{padding:16px 4px;border-top:1px solid var(--line);font-family:var(--serif);font-size:30px;font-size:3rem}
.season__h td{font-family:var(--sans);font-size:14px;font-size:1.4rem;color:#5c5a53}
.season__note{max-width:720px;margin:20px 0 10px}
@media (min-width:960px){
  .season{padding:120px 32px}
  .season__title{font-size:64px;font-size:6.4rem}
}

/* one visit */
.visit{padding:0 var(--gutter) 80px}
.visit__title,.examples__title,.before__title,.days__title{
  margin:0 0 28px;
  font-family:var(--serif);
  font-weight:400;
  font-size:36px;
  font-size:3.6rem;
  line-height:1.05;
  letter-spacing:-.02em;
}
.visit__list{margin:0;padding:0;list-style:none;border-top:1px solid #3d3c37}
.visit__step{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.visit__time{font-family:var(--serif);font-size:24px;font-size:2.4rem;line-height:1}
.visit__h{margin:0 0 6px;font-size:16px;font-size:1.6rem;font-weight:600}
.visit__step p{margin:0;max-width:620px}

/* examples */
.examples{padding:0 var(--gutter) 80px}
.examples__table{width:100%;min-width:640px;border-collapse:collapse;border-top:1px solid #3d3c37}
.examples__table th,.examples__table td{padding:14px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-weight:400}
.examples__table th{font-size:12px;font-size:1.2rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.examples__table .num{text-align:right;white-space:nowrap;font-family:var(--serif);font-size:19px;font-size:1.9rem}
.examples__table th.num{font-family:var(--sans);font-size:12px;font-size:1.2rem}
.examples__note{max-width:720px;margin:18px 0 0;color:#5c5a53}

/* before first visit */
.before{display:grid;gap:20px;padding:64px var(--gutter);background:#efe9e1}
.before__list{margin:0;padding:0;list-style:none}
.before__list li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.before__no{flex:0 0 28px;font-family:var(--serif);font-style:italic;font-size:22px;font-size:2.2rem;line-height:1.1}

/* days */
.days{padding:80px var(--gutter)}
.days__grid{display:grid;gap:0;border-top:1px solid #3d3c37;margin-bottom:20px}
.days__cell{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.days__d{font-family:var(--serif);font-size:22px;font-size:2.2rem;line-height:1.1}

@media (min-width:960px){
  .visit,.examples{padding:0 32px 120px}
  .visit__title,.examples__title,.before__title,.days__title{font-size:56px;font-size:5.6rem}
  .visit__step{grid-template-columns:repeat(12,1fr);column-gap:20px}
  .visit__time{grid-column:1/3}
  .visit__step>div{grid-column:5/11}
  .before{grid-template-columns:repeat(12,1fr);column-gap:20px;padding:96px 32px}
  .before__col{grid-column:1/5}
  .before__list{grid-column:6/-1}
  .days{padding:120px 32px}
  .days__grid{grid-template-columns:repeat(5,1fr);border-top:0}
  .days__cell{grid-template-columns:1fr;padding:20px 16px 24px 0;border-top:1px solid #3d3c37;border-bottom:0}
}

/* weather */
.weather{padding:0 var(--gutter) 80px}
.weather__title,.gear__title,.pay__title{
  margin:0 0 28px;
  font-family:var(--serif);
  font-weight:400;
  font-size:36px;
  font-size:3.6rem;
  line-height:1.05;
  letter-spacing:-.02em;
}
.weather__grid{display:grid;gap:0;border-top:1px solid #3d3c37}
.weather__item{padding:18px 0;border-bottom:1px solid var(--line)}
.weather__h{margin:0 0 6px;font-family:var(--serif);font-weight:400;font-size:24px;font-size:2.4rem}
.weather__item p{margin:0;max-width:520px}

/* gear */
.gear{display:grid;gap:12px;padding:64px var(--gutter);background:#e8e1d6}
.gear__list{margin:0}
.gear__row{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.gear__row dt{font-weight:600}
.gear__row dd{margin:0}

/* pay */
.pay{padding:80px var(--gutter) 40px;max-width:860px}
.pay p{font-family:var(--serif);font-size:22px;font-size:2.2rem;line-height:1.35}
.pay .pay__small{font-family:var(--sans);font-size:15px;font-size:1.5rem;color:#5c5a53}

@media (min-width:960px){
  .weather{padding:0 32px 120px}
  .weather__title,.gear__title,.pay__title{font-size:56px;font-size:5.6rem}
  .weather__grid{grid-template-columns:repeat(4,1fr);column-gap:20px;border-top:0}
  .weather__item{border-top:1px solid #3d3c37;border-bottom:0;padding-right:12px}
  .gear{grid-template-columns:repeat(12,1fr);column-gap:20px;padding:96px 32px}
  .gear__head{grid-column:1/5}
  .gear__list{grid-column:6/-1}
  .gear__row{grid-template-columns:1fr 1.4fr;column-gap:20px}
  .pay{padding:120px 32px 40px}
}

/* scattered collage */
.scatter{display:grid;gap:32px;padding:40px var(--gutter) 100px}
.scatter>*{min-width:0}
.scatter__title{
  margin:0 0 20px;
  font-family:var(--serif);
  font-weight:400;
  font-size:40px;
  font-size:4rem;
  line-height:1.02;
  letter-spacing:-.02em;
}
.scatter__list{margin:0 0 20px;padding:0;list-style:none}
.scatter__list li{padding:12px 0;border-bottom:1px solid var(--line);max-width:460px}
.scatter__weak{max-width:460px;font-family:var(--serif);font-style:italic;font-size:19px;font-size:1.9rem;line-height:1.35}
.scatter__fig{margin:0}
.scatter__fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.scatter__fig figcaption{margin-top:10px;font-size:13px;font-size:1.3rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase}

@media (min-width:960px){
  .scatter{grid-template-columns:repeat(12,1fr);column-gap:20px;padding:40px 32px 140px}
  .scatter__text{grid-column:1/6;align-self:end}
  .scatter__title{font-size:72px;font-size:7.2rem}
  .scatter__fig--a{grid-column:8/12;grid-row:1;transform:translateY(-60px)}
  .scatter__fig--b{grid-column:6/9;grid-row:1;align-self:end;transform:translateY(90px);position:relative;z-index:1}
  .scatter__fig--b img{aspect-ratio:4/3}
  .scatter__text{grid-row:1}
}

/* old preloader stack, the stacked images were dropped */
@keyframes stack-in{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:none}
}