/* 2033 Eureka Canyon Road — property site
   Lance Hulsey, Broker · KW Thrive SC
   Palette restricted to the LanceHulseyBroker brand: #31507a #ce011f #6380a8 #828282 #000 #fff
   plus achromatic paper/ink neutrals. */

:root{
  --ink:#0e141c;
  --ink-2:#1c2530;
  --ink-3:#3b4552;
  --paper:#f6f3ee;
  --paper-2:#ece7df;
  --paper-3:#e2dbd0;
  --blue:#31507a;
  --blue-dark:#243c5d;
  --blue-light:#6380a8;
  --red:#ce011f;
  --gray:#828282;
  --rule:rgba(14,20,28,.16);
  --rule-light:rgba(255,255,255,.22);
  --serif:"Source Serif 4","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --maxw:1240px;
  --gut:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-.015em;line-height:1.08}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

/* ---------- primitives ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:760px}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin:0 0 18px;
}
.eyebrow--muted{color:var(--gray)}
.eyebrow--light{color:rgba(255,255,255,.72)}
.label{
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray);display:block;margin-bottom:7px;
}
.lede{font-size:clamp(19px,2.1vw,23px);line-height:1.52;color:var(--ink-2)}
.small{font-size:13.5px;line-height:1.6;color:var(--ink-3)}
.muted{color:var(--gray)}
.serif{font-family:var(--serif)}

.btn{
  display:inline-block;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:16px 30px;border:1px solid var(--ink);color:var(--ink);background:transparent;
  transition:background .25s ease,color .25s ease,border-color .25s ease;cursor:pointer;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--solid:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.btn--light{border-color:rgba(255,255,255,.45);color:#fff}
.btn--light:hover{background:#fff;color:var(--ink);border-color:#fff}

.tlink{
  display:inline-block;text-decoration:none;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;padding-bottom:4px;
  border-bottom:1px solid var(--red);color:var(--ink);
}
.tlink:hover{color:var(--red)}

/* ---------- topbar + nav ---------- */
.topbar{
  background:var(--ink);color:rgba(255,255,255,.66);
  font-size:11.5px;letter-spacing:.08em;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:40px}
.topbar a{color:rgba(255,255,255,.9);text-decoration:none}
.topbar a:hover{color:#fff}
.topbar .tb-r{display:flex;gap:22px;align-items:center}
@media(max-width:720px){.topbar .tb-l{display:none}.topbar .wrap{justify-content:center}}

.nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--rule);transition:background .3s ease,border-color .3s ease}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.nav-brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.nav-brand img{height:30px;width:auto}
.nav-brand .nb-t{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.1;letter-spacing:-.01em}
.nav-brand .nb-s{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-top:2px}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2vw,30px);list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.nav-links a{
  text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);padding:6px 0;border-bottom:1px solid transparent;
  white-space:nowrap;
}
.nav-links a:hover{border-bottom-color:var(--red);color:var(--ink)}
.nav-links a.is-cta{border:1px solid var(--ink);padding:11px 20px}
.nav-links a.is-cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:23px;height:1.5px;background:var(--ink);margin:5px 0;transition:transform .3s,opacity .3s}
.nav.is-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.is-open .nav-toggle span:nth-child(2){opacity:0}
.nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:960px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;background:var(--paper);
    flex-direction:column;align-items:flex-start;gap:0;
    border-bottom:1px solid var(--rule);max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .nav.is-open .nav-links{max-height:520px}
  .nav-links li{width:100%;border-top:1px solid var(--rule)}
  .nav-links a{display:block;padding:17px var(--gut);font-size:13px;border:0}
  .nav-links a.is-cta{border:0;color:var(--red)}
  .nav-brand .nb-t{font-size:14px}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:88vh;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero__media{position:absolute;inset:0;background:var(--ink)}
/* The hero band is much wider than it is tall, so `cover` crops a narrow
   horizontal slice out of a 16:9 photograph. Centred, that slice lands on the
   shaded forest in the middle of the frame and reads almost black. Biasing the
   crop upward keeps the ridgeline, the sky and the bay haze in view at any
   window height. */
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(8,12,18,.86) 0%,rgba(8,12,18,.42) 38%,rgba(8,12,18,.10) 66%,rgba(8,12,18,.44) 100%);
}
.hero__inner{position:relative;width:100%;padding-bottom:clamp(46px,7vw,86px);padding-top:120px}
.hero h1{
  color:#fff;font-size:clamp(42px,7.4vw,104px);font-weight:400;line-height:.98;
  letter-spacing:-.03em;max-width:14ch;text-wrap:balance;
}
.hero h1 em{font-style:italic;font-weight:300}
.hero__loc{
  color:rgba(255,255,255,.82);font-size:11px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;margin:0 0 26px;
}
.hero__loc::before{content:"";display:inline-block;width:34px;height:1px;background:var(--red);vertical-align:middle;margin-right:14px}
.hero__meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 34px;
  margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.24);
}
.hero__price{font-family:var(--serif);font-size:clamp(26px,3.4vw,40px);color:#fff;font-weight:400;letter-spacing:-.02em}
.hero__meta .hm{color:rgba(255,255,255,.74);font-size:12.5px;letter-spacing:.06em}
.hero__meta .hm b{color:#fff;font-weight:500}
.hero__cue{
  position:absolute;right:var(--gut);bottom:clamp(46px,7vw,86px);
  writing-mode:vertical-rl;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.6);text-decoration:none;
}
.hero__cue::after{content:"";display:block;width:1px;height:52px;background:rgba(255,255,255,.4);margin:14px auto 0}
@media(max-width:720px){.hero__cue{display:none}.hero{min-height:82vh}}

/* ---- one-screen hero ----
   The hero and the spec ledger form a single flex column sized to the viewport
   minus the topbar (40) and nav (75), so a visitor landing on the page sees the
   headline, the price line and the whole ledger without scrolling. The ledger
   keeps its natural height and the hero absorbs whatever is left — no magic
   numbers to drift when the ledger copy changes. Type sizes are untouched; the
   headline simply sits higher on the photograph, which crops rather than scales.
   Below 900px the ledger stacks into rows and one-screen framing stops being
   desirable, so this applies at desktop widths only. */
@media(min-width:901px){
  /* A shorter hero lifts the whole composition up the page, and a tight gap
     under the price line pulls the spec ledger close to it so the headline,
     price and specs read as one group. The photograph crops; type never scales. */
  .hero{min-height:min(calc(100svh - 300px), 650px)}
  .hero__inner{padding-top:24px;padding-bottom:clamp(6px,1vh,14px)}
  .hero__cue{bottom:clamp(6px,1vh,14px)}
  .ledger .lg{padding:clamp(16px,1.8vh,22px) 24px}
}
/* Only on genuinely short windows does the headline scale, so it is never
   clipped by the top of the viewport on a small laptop. */
@media(min-width:901px) and (max-height:820px){
  .hero h1{font-size:min(7.4vw,11vh)}
}

/* ---------- ledger ---------- */
.ledger{background:var(--ink);color:#fff}
.ledger .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.ledger .lg{padding:38px 26px;border-left:1px solid rgba(255,255,255,.14)}
.ledger .lg:first-child{border-left:0;padding-left:0}
.ledger .lg:last-child{padding-right:0}
.ledger .lg .label{color:rgba(255,255,255,.5)}
.ledger .lg .v{font-family:var(--serif);font-size:clamp(20px,2.3vw,29px);font-weight:400;letter-spacing:-.02em;line-height:1.12}
.ledger .lg .n{font-size:12px;color:rgba(255,255,255,.5);margin-top:5px}
@media(max-width:900px){
  .ledger .wrap{grid-template-columns:repeat(2,1fr)}
  .ledger .lg{padding:26px 0;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .ledger .lg:nth-child(2n){padding-left:26px;border-left:1px solid rgba(255,255,255,.14)}
  .ledger .lg:nth-child(1),.ledger .lg:nth-child(2){border-top:0}
  .ledger .lg:nth-child(5){grid-column:1/-1}
}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,9vw,132px) 0}
.sec--tight{padding:clamp(48px,6vw,88px) 0}
.sec--paper2{background:var(--paper-2)}
.sec--ink{background:var(--ink);color:rgba(255,255,255,.82)}
.sec--ink h2,.sec--ink h3{color:#fff}
.sec--ink .label{color:rgba(255,255,255,.45)}

.sechead{display:grid;grid-template-columns:220px 1fr;gap:clamp(24px,5vw,64px);align-items:start;margin-bottom:clamp(34px,4.5vw,62px)}
.sechead h2{font-size:clamp(30px,4.2vw,54px);font-weight:400;letter-spacing:-.025em;max-width:20ch;text-wrap:balance}
.sechead .sh-l{padding-top:9px;border-top:2px solid var(--red)}
@media(max-width:820px){.sechead{grid-template-columns:1fr;gap:18px}}

/* editorial two-column body */
.edit{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.edit__body{max-width:64ch;font-size:18px}
.edit__body--plain>p:first-of-type::first-letter{float:none;font-size:inherit;padding:0;color:inherit;font-weight:inherit;font-family:inherit;line-height:inherit}
.edit__body:not(.edit__body--plain)>p:first-of-type::first-letter{
  float:left;font-family:var(--serif);font-size:4.4em;line-height:.82;
  padding:.06em .1em 0 0;color:var(--blue);font-weight:600;
}
.edit__aside{position:sticky;top:104px}
@media(max-width:820px){
  .edit{grid-template-columns:1fr}
  .edit__aside{position:static}
}

.pull{
  font-family:var(--serif);font-size:clamp(22px,2.9vw,34px);line-height:1.3;font-weight:400;
  letter-spacing:-.02em;color:var(--blue-dark);margin:clamp(34px,4vw,54px) 0;
  padding-left:26px;border-left:2px solid var(--red);max-width:24ch;
}

/* ---------- full-bleed plate ---------- */
.bleed{position:relative;margin:0;overflow:hidden;background:var(--ink)}
.bleed img{width:100%;height:clamp(320px,64vh,720px);object-fit:cover}
.bleed figcaption{
  position:absolute;left:var(--gut);bottom:26px;right:var(--gut);
  color:rgba(255,255,255,.9);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 1px 20px rgba(0,0,0,.7);
}
.bleed figcaption::before{content:"";display:inline-block;width:26px;height:1px;background:var(--red);vertical-align:middle;margin-right:12px}
.bleed--tall img{height:clamp(380px,78vh,860px)}

/* ---------- alternating feature rows ---------- */
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3.4vw,52px);align-items:center;margin-bottom:clamp(56px,7vw,110px)}
.row:last-child{margin-bottom:0}
.row__fig{grid-column:1/7;margin:0}
.row__txt{grid-column:8/13}
.row--flip .row__fig{grid-column:7/13;order:2}
.row--flip .row__txt{grid-column:1/6;order:1}
.row__fig img{width:100%;height:clamp(280px,42vw,520px);object-fit:cover}
.row__fig figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-top:12px}
.row__txt h3{font-size:clamp(24px,2.8vw,34px);font-weight:400;letter-spacing:-.02em;margin-bottom:18px}
@media(max-width:860px){
  .row__fig,.row__txt,.row--flip .row__fig,.row--flip .row__txt{grid-column:1/-1;order:initial}
  .row__txt{margin-top:22px}
}

/* ---------- futures ---------- */
.futures{border-top:1px solid var(--rule)}
.future{
  display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,340px);
  gap:clamp(20px,3.6vw,54px);align-items:start;
  padding:clamp(30px,4vw,50px) 0;border-bottom:1px solid var(--rule);
}
.future__n{
  font-family:var(--serif);font-size:clamp(38px,5vw,66px);line-height:.9;font-weight:400;
  color:transparent;-webkit-text-stroke:1px var(--blue-light);letter-spacing:-.03em;
}
.future__t{font-size:clamp(21px,2.4vw,29px);font-weight:400;letter-spacing:-.02em;margin-bottom:12px}
.future__t span{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.future__b{max-width:56ch;color:var(--ink-2)}
.future__img img{width:100%;height:210px;object-fit:cover}
@media(max-width:900px){
  .future{grid-template-columns:64px minmax(0,1fr)}
  .future__img{grid-column:1/-1;margin-top:6px}
  .future__img img{height:230px}
}

/* ---------- inventory ---------- */
.inv{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.inv li{
  display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(14px,3vw,40px);
  padding:20px 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.inv .it{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em}
.inv .id{color:var(--ink-2);font-size:16px}
@media(max-width:700px){.inv li{grid-template-columns:1fr;gap:4px}}

.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(30px,4vw,48px)}
.strip img{width:100%;height:clamp(150px,17vw,230px);object-fit:cover}
@media(max-width:700px){.strip{grid-template-columns:repeat(2,1fr)}}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,1.1vw,14px)}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--paper-3);cursor:zoom-in}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.045)}
.gal .g-6{grid-column:span 6;aspect-ratio:3/2}
.gal .g-4{grid-column:span 4;aspect-ratio:1/1}
.gal .g-3{grid-column:span 3;aspect-ratio:4/5}
.gal .g-8{grid-column:span 8;aspect-ratio:16/9}
.gal .g-12{grid-column:span 12;aspect-ratio:21/9}
@media(max-width:820px){
  .gal .g-6,.gal .g-4,.gal .g-3,.gal .g-8{grid-column:span 6}
  .gal .g-12{grid-column:span 12;aspect-ratio:3/2}
}
@media(max-width:520px){.gal figure{grid-column:span 12 !important;aspect-ratio:3/2 !important}}

.lb{position:fixed;inset:0;z-index:200;background:rgba(8,11,16,.96);display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px)}
.lb.is-on{display:flex}
.lb img{max-width:100%;max-height:82vh;object-fit:contain}
.lb__cap{position:absolute;left:0;right:0;bottom:clamp(16px,3vw,34px);text-align:center;color:rgba(255,255,255,.72);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:0 20px}
.lb button{position:absolute;background:none;border:0;color:rgba(255,255,255,.75);cursor:pointer;font-size:28px;line-height:1;padding:16px}
.lb .lb-x{top:8px;right:10px;font-size:22px}
.lb .lb-p{left:4px;top:50%;transform:translateY(-50%)}
.lb .lb-n{right:4px;top:50%;transform:translateY(-50%)}
.lb button:hover{color:#fff}

/* ---------- plates (maps) ---------- */
.plates{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.5vw,54px)}
.plate{margin:0}
.plate .pf{background:#fff;border:1px solid var(--rule);padding:clamp(14px,2vw,26px)}
.plate .pf img{width:100%;height:auto}
.plate figcaption{margin-top:14px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.plate figcaption b{display:block;font-family:var(--serif);font-size:15px;color:var(--ink);font-weight:600;margin-bottom:4px}
@media(max-width:820px){.plates{grid-template-columns:1fr}}

/* ---------- data table ---------- */
.data{width:100%;border-collapse:collapse;font-size:15.5px}
.data th,.data td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.data th{
  width:38%;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);padding-top:18px;
}
.data td{font-family:var(--serif);font-size:17px}
.data tr:first-child th,.data tr:first-child td{border-top:1px solid var(--rule)}
.data--sm td{font-family:var(--sans);font-size:15px}
@media(max-width:640px){
  .data th{width:auto;display:block;border-bottom:0;padding:16px 0 2px}
  .data td{display:block;padding:0 0 16px}
}

.grp{margin-bottom:clamp(38px,5vw,64px)}
.grp>h3{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:16px;
}

/* ---------- forms ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.split__fig{position:relative;min-height:420px;background:var(--ink)}
.split__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__body{padding:clamp(34px,5vw,76px)}
@media(max-width:900px){.split{grid-template-columns:1fr}.split__fig{min-height:280px}}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;margin-top:26px}
.field{display:flex;flex-direction:column}
.field--full{grid-column:1/-1}
.field label{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-bottom:8px}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);padding:10px 0;border-radius:0;
  transition:border-color .25s ease;width:100%;
}
.field textarea{resize:vertical;min-height:86px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--red)}
.on-ink .field label{color:rgba(255,255,255,.5)}
.on-ink .field input,.on-ink .field select,.on-ink .field textarea{color:#fff;border-bottom-color:rgba(255,255,255,.26)}
.on-ink .field input:focus,.on-ink .field select:focus,.on-ink .field textarea:focus{border-bottom-color:var(--red)}
.on-ink .field select option{color:var(--ink)}
.form-note{font-size:12px;color:var(--gray);margin-top:20px;line-height:1.55;max-width:52ch}
.on-ink .form-note{color:rgba(255,255,255,.5)}
@media(max-width:620px){.form-grid{grid-template-columns:1fr}}

/* ---------- broker ---------- */
.broker{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(26px,4vw,58px);align-items:start}
.broker img.hs{width:100%;height:auto;filter:grayscale(1);transition:filter .5s ease}
.broker:hover img.hs{filter:grayscale(0)}
.broker h3{font-size:clamp(24px,2.7vw,32px);font-weight:400;letter-spacing:-.02em}
.broker .bk-role{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:10px 0 20px}
.broker .bk-c{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);font-size:14px}
.broker .bk-c a{text-decoration:none;border-bottom:1px solid var(--rule)}
.broker .bk-c a:hover{border-bottom-color:var(--red)}
@media(max-width:700px){.broker{grid-template-columns:1fr}.broker img.hs{max-width:220px}}

/* ---------- CTA band ---------- */
.band{background:var(--blue-dark);color:#fff;text-align:center;padding:clamp(52px,7vw,96px) 0}
.band h2{font-size:clamp(26px,3.6vw,44px);font-weight:400;letter-spacing:-.025em;color:#fff;margin-bottom:16px;text-wrap:balance}
.band p{color:rgba(255,255,255,.76);max-width:58ch;margin:0 auto 30px}
.band .band-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
.foot{background:#000;color:rgba(255,255,255,.6);font-size:13px;padding:clamp(48px,6vw,80px) 0 34px}
.foot a{color:rgba(255,255,255,.82);text-decoration:none}
.foot a:hover{color:#fff}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,54px);padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot__logos{display:flex;align-items:center;gap:22px;margin-bottom:20px}
.foot__logos img{height:34px;width:auto}
.foot__logos img.kw{height:26px}
.foot h4{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px}
.foot__legal{padding-top:26px;font-size:11.5px;line-height:1.75;color:rgba(255,255,255,.42);max-width:110ch}
.foot__legal p{margin-bottom:10px}
@media(max-width:820px){.foot__top{grid-template-columns:1fr;gap:30px}}

/* ---------- page hero (interior) ---------- */
.phero{position:relative;background:var(--ink);color:#fff;padding:clamp(60px,8vw,120px) 0 clamp(44px,6vw,80px);overflow:hidden}
.phero__bg{position:absolute;inset:0;opacity:.3}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(34px,5.4vw,68px);font-weight:400;letter-spacing:-.03em;color:#fff;max-width:18ch;text-wrap:balance}
.phero p{color:rgba(255,255,255,.74);max-width:56ch;margin-top:20px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

.hide{display:none !important}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:10px 14px;z-index:999}