/* Essential: linen, greige, charcoal. Light, CSS-only motion. */

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gutter);transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease)}
.top.solid{background:rgba(243,238,230,.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(36,34,31,.12);padding-block:8px}
.brand img{width:92px;height:auto;transition:width .5s var(--ease)}
.top.solid .brand img{width:64px}
.top-link{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.top-link:hover{opacity:.65}

/* 1. hero */
.hero{justify-content:flex-start;overflow:hidden;background:var(--greige-soft);color:var(--charcoal)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;animation:drift 26s ease-in-out infinite alternate}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(243,238,230,.9) 0%,rgba(243,238,230,.62) 32%,rgba(243,238,230,0) 62%),
  linear-gradient(90deg,rgba(243,238,230,.5) 0%,rgba(243,238,230,0) 60%)}
.hero-in{position:relative;padding-top:clamp(120px,19vh,200px);padding-bottom:80px}
.hero-eyebrow{margin-bottom:22px;animation:fadeUp 1.1s var(--ease) .2s both}
.hero-h{font-size:clamp(46px,7.6vw,124px);max-width:11em}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:inline-block;animation:lineUp 1.4s var(--ease) both}
.ln:nth-child(1)>span{animation-delay:.3s}
.ln:nth-child(2)>span{animation-delay:.5s}
@keyframes lineUp{from{transform:translateY(108%)}to{transform:none}}
.hero-p{margin-top:28px;max-width:27em;animation:fadeUp 1.1s var(--ease) .9s both}
.hero-cta{margin-top:34px;animation:fadeUp 1.1s var(--ease) 1.1s both}
.hero-foot{position:absolute;left:var(--gutter);bottom:26px;display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--linen);text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero-foot i{display:block;width:56px;height:1px;background:var(--linen);transform-origin:left;animation:grow 2.6s var(--ease) infinite}
@keyframes grow{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

/* 2. what we bring */
.bring{background:var(--greige-soft);overflow:hidden}
.bring::before{content:"";position:absolute;inset:0;background:url("img/bring.webp") center/cover}
.bring::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,238,230,.9) 0%,rgba(243,238,230,.74) 55%,rgba(243,238,230,.6) 100%)}
.bring>.wrap{position:relative;z-index:1}
.bring>.wrap{padding-block:clamp(80px,10vh,110px) clamp(64px,8vh,90px)}
.bring .eyebrow{margin-bottom:clamp(12px,2.4vh,26px)}
.rows{border-bottom:1px solid rgba(36,34,31,.3)}
.row{display:grid;grid-template-columns:64px 1fr minmax(180px,300px);align-items:center;gap:0 24px;border-top:1px solid rgba(36,34,31,.3);padding:clamp(6px,1.5vh,20px) 0;transition:opacity .5s var(--ease)}
.rows:hover .row:not(:hover){opacity:.4}
.num{font-size:13px;letter-spacing:.18em;opacity:.7}
.word{font-size:clamp(54px,min(8.4vw,11.5vh),128px);line-height:1;transition:transform .7s var(--ease);display:inline-block;white-space:nowrap}
.row:hover .word{transform:translateX(clamp(8px,1.6vw,26px))}
.desc{font-size:15.5px;line-height:1.5;max-width:20em;justify-self:end;text-align:left}
.promise{margin-top:clamp(18px,3.6vh,46px);font-size:clamp(24px,min(3.4vw,5.2vh),46px);line-height:1.15;position:relative;padding-top:22px}
.promise::before{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--charcoal);transform-origin:left;transform:scaleX(0)}
@supports (animation-timeline:view()){
  .row{animation:rowIn linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  .promise::before{animation:rule linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
  .promise{animation:rowIn linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  @keyframes rowIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
  @keyframes rule{to{transform:scaleX(1)}}
}
@supports not (animation-timeline:view()){.promise::before{transform:none;opacity:.45}}

/* 3. inquiry */
.ask{background:var(--charcoal);color:var(--linen);--accent:var(--charcoal)}
.ask-grid{display:grid;grid-template-columns:1fr minmax(0,560px);gap:clamp(36px,6vw,96px);align-items:center}
.ask-copy .eyebrow{margin-bottom:22px;opacity:.7}
.city{font-size:clamp(34px,min(4.6vw,7.4vh),68px);line-height:1.08}
.ask-copy .lede{margin-top:clamp(16px,3vh,30px);opacity:.88}
.ask-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ask-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,22,20,.78) 0%,rgba(24,22,20,.62) 100%)}
.ask>.wrap{position:relative;z-index:2;padding-block:clamp(80px,10vh,110px) clamp(16px,3vh,40px)}
.card{position:relative;color:var(--linen)}
.card-eyebrow{opacity:.7;margin-bottom:8px}
.card-h{font-size:clamp(32px,min(4vw,6vh),50px);margin-bottom:clamp(14px,2.4vh,22px)}
.card form{display:grid;gap:clamp(12px,2.2vh,20px)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.card .chip input:checked+span{background:var(--linen);color:var(--charcoal);border-color:var(--linen)}
.card .btn.solid{justify-self:start;margin-top:4px;background:var(--linen);color:var(--charcoal);border-color:var(--linen);--fill:var(--greige-soft);--fillText:var(--charcoal)}
.card input:focus,.card select:focus,.card textarea:focus{border-bottom-color:var(--linen)}
.card input[type=date]{color-scheme:dark}
.card-thanks{font-size:clamp(30px,3.4vw,44px);margin-bottom:12px}
.foot{margin-top:auto;border-top:1px solid rgba(243,238,230,.18);position:relative;z-index:2;background:rgba(24,22,20,.8)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;padding-block:14px 62px}
.foot-in img{width:84px;height:auto}
.foot a{text-decoration:none;border-bottom:1px solid rgba(243,238,230,.4)}

@media (max-width:900px){
  .ask-grid{grid-template-columns:1fr}
  .row{grid-template-columns:40px 1fr;gap:2px 14px}
  .desc{grid-column:2;justify-self:start;padding-bottom:6px}
}
@media (max-width:560px){
  .grid2{grid-template-columns:1fr}
  .hero-h{font-size:clamp(42px,12.4vw,64px)}
  .hero-img{object-position:46% 55%}
  .word{font-size:clamp(46px,15vw,76px)}
  .foot-in{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .row,.promise{animation:none!important;opacity:1!important;transform:none!important}
  .promise::before{transform:none!important;opacity:.45}
  .hero-img{animation:none}
}