/* page hero (dark photo) */
.phero{position:relative;min-height:clamp(560px,82vh,840px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.phero .bg{position:absolute;inset:0;z-index:0}
.phero .bg img{width:100%;height:100%;object-fit:cover}
.phero .bg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,13,13,.5) 0%,rgba(10,13,13,.12) 38%,rgba(10,13,13,.74) 100%),linear-gradient(75deg,rgba(10,13,13,.55) 0%,transparent 62%)}
.phero .inner{position:relative;z-index:5;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(44px,7vw,92px)}
.phero .eyebrow{color:var(--cream);opacity:.9;margin-bottom:18px}
.phero h1{font-family:var(--f-display);color:var(--cream);text-transform:uppercase;font-size:clamp(3rem,9vw,8.6rem);line-height:.84;text-wrap:balance;max-width:15ch}
.phero .lede{color:var(--cream);max-width:52ch;margin:24px 0 30px;opacity:.95}
.phero .cta-row{display:flex;flex-wrap:wrap;gap:14px}
.phero .drift{z-index:4}

/* intro */
.intro .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.intro h2{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2.4rem,5.6vw,5rem);line-height:.9;text-wrap:balance}
.intro p{margin-top:22px;font-size:1.2rem;max-width:46ch}
.intro .pic{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden}
.intro .pic img{width:100%;height:100%;object-fit:cover}

/* feature card */
.feature{background:var(--cream-2)}
.fcard{background:var(--red);color:var(--cream);border-radius:6px;overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr}
.fcard .body{padding:clamp(32px,4vw,60px)}
.fcard .tagline{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8;margin-bottom:18px}
.fcard h3{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2.4rem,4.4vw,4.2rem);line-height:.88}
.fcard .spec{font-family:var(--f-sub);text-transform:uppercase;letter-spacing:.04em;font-size:1.1rem;margin:14px 0 18px;color:#f3d9de}
.fcard .desc{opacity:.94;max-width:48ch;line-height:1.5}
.fcard ul{list-style:none;margin:24px 0 30px;display:grid;gap:11px}
.fcard li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;font-size:1.1rem}
.fcard li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--cream);margin-top:.55em}
.fcard .pic{position:relative;min-height:340px}
.fcard .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.btn-cream2{background:var(--cream);color:var(--ink)}
.btn-cream2:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.28)}

/* photo strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px);margin-top:clamp(12px,1.6vw,18px)}
.strip .ph{aspect-ratio:3/4;border-radius:3px;overflow:hidden}
.strip .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.strip .ph:hover img{transform:scale(1.05)}

/* quote form */
.quote{background:var(--ink);color:var(--cream)}
.quote .head{max-width:60ch;margin-bottom:clamp(30px,4vw,52px)}
.quote h2{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2.4rem,5.4vw,4.8rem);line-height:.9}
.quote .head p{margin-top:14px;opacity:.82;font-size:1.1rem}
.qform{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.field input,.field select,.field textarea{
  background:transparent;border:none;border-bottom:1.5px solid rgba(252,252,252,.32);
  color:var(--cream);font-family:var(--f-body);font-size:1.18rem;padding:10px 2px;transition:border-color .25s}
.field textarea{min-height:90px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(252,252,252,.4)}
.field select{cursor:pointer}
.field select option{background:var(--ink);color:var(--cream)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.field input:invalid:not(:placeholder-shown){border-color:#e87a8c}
.qform .submit{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.qform .note{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;opacity:.55}
.thanks{display:none;text-align:center;padding:clamp(40px,7vw,90px) 0}
.thanks.show{display:block}
.thanks .mano{width:clamp(90px,9vw,140px);margin:0 auto 24px}
.thanks .mano img{filter:brightness(0) invert(1);opacity:.9}
.thanks h3{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:.92}
.thanks p{opacity:.82;margin-top:12px;font-size:1.1rem}

/* faq */
.faq .inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,72px);align-items:start}
.faq h2{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2.4rem,5vw,4.4rem);line-height:.9}
.faq details{border-top:1.5px solid rgba(10,13,13,.16);padding:6px 0}
.faq details:last-child{border-bottom:1.5px solid rgba(10,13,13,.16)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;
  font-family:var(--f-sub);text-transform:uppercase;letter-spacing:.01em;font-size:1.35rem;line-height:1}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{position:relative;width:18px;height:18px;flex:none}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--red);transition:transform .3s var(--ease)}
.faq summary .pm::before{left:0;top:8px;width:18px;height:2px}
.faq summary .pm::after{left:8px;top:0;width:2px;height:18px}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq details .ans{padding:0 0 22px;max-width:52ch;color:#52504a;font-size:1.15rem}

@media (max-width:860px){
  .intro .inner,.faq .inner{grid-template-columns:1fr;gap:30px}
  .fcard{grid-template-columns:1fr}
  .fcard .pic{min-height:260px;order:-1}
  .strip{grid-template-columns:1fr 1fr}
  .qform{grid-template-columns:1fr}
}
@media (max-width:960px){
  .eyebrow{font-size:.68rem;letter-spacing:.22em}
  .intro p.eyebrow,.quote .head p.eyebrow,.phero p.eyebrow{font-size:.68rem}
}