/* HArtfull IQ · Explore — calm, editorial, cinematic imagery. Depends on colors_and_type.css */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:root{--pad:clamp(96px,11vw,168px);--edge:clamp(20px,5vw,64px)}
.wrap{width:100%;max-width:var(--hiq-container);margin:0 auto;padding:0 var(--edge)}
.skiplink{position:fixed;left:50%;top:-100px;transform:translateX(-50%);z-index:99;background:var(--hiq-charcoal);color:var(--hiq-cream);padding:10px 18px;font-family:var(--hiq-font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:top .2s}
.skiplink:focus{top:12px}
:focus-visible{outline:2px solid var(--hiq-slate);outline-offset:3px}

/* reveal */
/* reveal — content is ALWAYS visible. Only position animates, so a stalled animation
   clock (hidden tab, in-app webview) leaves text merely 14px low, never invisible. */
.reveal{transition:transform 900ms var(--hiq-ease)}
.reveal.waiting{transform:translateY(14px);transition:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.reveal.waiting{transform:none;transition:none}}

/* ── HERO ── */
/* Every section shares .wrap's single left edge; only line-length caps differ,
   so the eye tracks one vertical spine down the page. */
.hero{padding:clamp(56px,9vh,104px) 0 var(--pad)}
.hero-logo{height:clamp(30px,3.4vw,40px);width:auto;margin-bottom:clamp(48px,8vh,96px);opacity:.92}
.hero-h{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.06;letter-spacing:-.02em;max-width:22ch}
.hero-h em{font-style:italic;font-weight:400;color:var(--hiq-slate)}
.hero-lede{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.7;color:var(--hiq-fg);max-width:56ch;margin:var(--hiq-space-6) 0 0}

/* video */
.video{margin:clamp(56px,8vh,96px) 0 0;max-width:960px}
.video-frame{position:relative;aspect-ratio:16/9;background:var(--hiq-cream-deep);border-radius:var(--hiq-radius-md);overflow:hidden;box-shadow:var(--hiq-shadow-card)}
.video-poster{width:100%;height:100%;object-fit:cover}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:linear-gradient(180deg,rgba(43,43,43,.04),rgba(43,43,43,.26))}
.video-tri{width:66px;height:66px;border-radius:50%;background:rgba(250,247,242,.94);display:grid;place-items:center;transition:transform var(--hiq-dur-slow) var(--hiq-ease),background var(--hiq-dur-base)}
.video-tri::after{content:"";width:0;height:0;margin-left:4px;border-left:16px solid var(--hiq-charcoal);border-top:10px solid transparent;border-bottom:10px solid transparent}
.video-label{font-family:var(--hiq-font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hiq-cream);text-shadow:0 1px 8px rgba(43,43,43,.5)}
.video-play:hover .video-tri{transform:scale(1.05);background:#fff}
.byline{display:flex;align-items:center;gap:14px;margin:var(--hiq-space-5) 0 0}
.byline img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 18%;filter:saturate(.92)}
.byline span{font-size:var(--hiq-size-small);line-height:1.45;color:var(--hiq-fg-muted)}
.byline strong{font-weight:500;color:var(--hiq-fg)}

/* start-exploring cue */
.cue{display:inline-flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:clamp(64px,9vh,112px);text-decoration:none}
.cue-label{font-family:var(--hiq-font-mono);font-size:var(--hiq-size-micro);letter-spacing:var(--hiq-tracking-eyebrow);text-transform:uppercase;color:var(--hiq-fg-muted)}
.cue-rule{width:1px;height:56px;background:linear-gradient(180deg,var(--hiq-slate-soft),transparent);transition:height var(--hiq-dur-slow) var(--hiq-ease)}
.cue:hover .cue-rule{height:76px}
.cue:hover .cue-label{color:var(--hiq-fg)}

/* ── PHILOSOPHY ── */
.premise{background:var(--hiq-bg-band);padding:var(--pad) 0;border-top:1px solid var(--hiq-rule);border-bottom:1px solid var(--hiq-rule)}
.premise-h{font-size:clamp(1.5rem,2.5vw,2.125rem);line-height:1.34;font-weight:400;letter-spacing:-.005em;max-width:34ch;margin:var(--hiq-space-5) 0 0}
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);max-width:720px;margin:clamp(56px,7vw,88px) 0}
.ledger-head{font-family:var(--hiq-font-serif);font-style:italic;font-size:var(--hiq-size-h3);color:var(--hiq-fg-muted);margin:0 0 var(--hiq-space-4);padding-bottom:var(--hiq-space-3);border-bottom:1px solid var(--hiq-rule)}
.ledger-col.finite .ledger-head{color:var(--hiq-fg)}
.ledger ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ledger li{font-size:var(--hiq-size-body);color:#5F6E72}
.ledger-col.finite li{color:var(--hiq-fg)}
.premise-turn{font-size:var(--hiq-size-body-lg);line-height:1.7;max-width:60ch;margin:0}
.tenets-label{margin:clamp(56px,7vw,88px) 0 var(--hiq-space-5)}
.tenets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.4vw,32px)}
.tenets li{display:flex;flex-direction:column;gap:12px;padding-top:var(--hiq-space-4);border-top:1px solid var(--hiq-slate-soft);font-family:var(--hiq-font-serif);font-size:1rem;line-height:1.42;color:var(--hiq-fg)}
.tenet-n{font-family:var(--hiq-font-mono);font-size:var(--hiq-size-micro);letter-spacing:.1em;color:var(--hiq-accent-system)}

/* ── EXPLORER ── */
.explorer{padding:var(--pad) 0 clamp(72px,9vw,120px)}
.explorer-h{font-size:clamp(1.375rem,2.1vw,1.875rem);font-weight:400;line-height:1.36;max-width:30ch;margin:var(--hiq-space-5) 0 0}
.stage{position:relative;margin-top:clamp(48px,6vw,80px)}
.track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;outline-offset:-3px}
.track::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;min-height:clamp(600px,86vh,920px);overflow:hidden;background:var(--hiq-cream-deep);--copyleft:max(var(--edge),calc((100vw - var(--hiq-container))/2 + var(--edge)));--copyw:clamp(300px,46vw,620px)}
.slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0 auto 0 0;width:min(100%,calc(var(--copyleft) + var(--copyw) + 220px));background:linear-gradient(96deg,rgba(24,20,17,.88) 0%,rgba(24,20,17,.82) 54%,rgba(24,20,17,.44) 80%,rgba(24,20,17,0) 100%)}
.slide-copy{position:relative;margin-left:var(--copyleft);width:var(--copyw);padding:clamp(56px,6vw,88px) 0;display:flex;flex-direction:column;justify-content:center;gap:var(--hiq-space-4);z-index:2}
.slide-cat{font-family:var(--hiq-font-mono);font-size:var(--hiq-size-micro);letter-spacing:var(--hiq-tracking-eyebrow);text-transform:uppercase;color:rgba(250,247,242,.62);margin:0}
.slide-name{font-size:clamp(1.875rem,3.1vw,2.75rem);line-height:1.12;color:var(--hiq-cream);margin:0}
.slide-quote{font-family:var(--hiq-font-serif);font-style:italic;font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.4;color:var(--hiq-blush-soft);margin:0}
.slide-desc{font-size:1.0625rem;line-height:1.68;color:rgba(250,247,242,.88);margin:0;max-width:46ch}
.slide-cta{align-self:flex-start;white-space:nowrap;margin-top:var(--hiq-space-3);background:var(--hiq-cream);color:var(--hiq-charcoal);font-family:var(--hiq-font-sans);font-size:var(--hiq-size-small);font-weight:500;letter-spacing:.01em;padding:16px 34px;border-radius:var(--hiq-radius-pill);min-height:52px;transition:background var(--hiq-dur-base) var(--hiq-ease),transform var(--hiq-dur-base) var(--hiq-ease)}
.slide-cta:hover{background:#fff;transform:translateY(-1px)}

.arrow{position:absolute;bottom:clamp(20px,3vw,36px);z-index:3;width:52px;height:52px;border-radius:50%;background:rgba(250,247,242,.14);backdrop-filter:blur(6px);border:1px solid rgba(250,247,242,.3);display:grid;place-items:center;transition:background var(--hiq-dur-base),opacity var(--hiq-dur-base)}
.arrow:hover{background:rgba(250,247,242,.28)}
.arrow::after{content:"";width:9px;height:9px;border-top:1.5px solid var(--hiq-cream);border-right:1.5px solid var(--hiq-cream)}
.arrow.prev{right:calc(clamp(16px,3vw,40px) + 62px)}
.arrow.prev::after{transform:rotate(-135deg);margin-left:-2px}
.arrow.next{right:clamp(16px,3vw,40px)}
.arrow.next::after{transform:rotate(45deg);margin-right:-2px}
.arrow[disabled]{opacity:0;pointer-events:none}

.rail{display:flex;gap:clamp(16px,3vw,40px);margin-top:clamp(28px,3.5vw,44px);flex-wrap:wrap}
.rail button{font-family:var(--hiq-font-mono);font-size:var(--hiq-size-micro);letter-spacing:var(--hiq-tracking-eyebrow);text-transform:uppercase;color:var(--hiq-fg-muted);padding:10px 0 12px;position:relative;transition:color var(--hiq-dur-base)}
.rail button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hiq-slate-soft);transform:scaleX(0);transform-origin:left;transition:transform var(--hiq-dur-slow) var(--hiq-ease),background var(--hiq-dur-base)}
.rail button:hover{color:var(--hiq-fg)}
.rail button[aria-current="true"]{color:var(--hiq-fg)}
.rail button[aria-current="true"]::after{transform:scaleX(1);background:var(--hiq-charcoal)}

/* ── LEAD CAPTURE ── */
.continue{background:var(--hiq-bg-band);border-top:1px solid var(--hiq-rule);padding:var(--pad) 0}
.continue-inner{max-width:960px}
.continue-h{font-size:clamp(1.625rem,2.6vw,2.25rem);line-height:1.26;margin:var(--hiq-space-5) 0 0;max-width:26ch}
.continue-lede{font-size:var(--hiq-size-body-lg);line-height:1.7;color:var(--hiq-fg-muted);margin:var(--hiq-space-5) 0 0;max-width:52ch}
/* the form — native, so it obeys the same restraint as the rest of the page.
   --cink is --hiq-slate's hue darkened to clear AA on the cream band (6.7:1);
   the system's own mid-tones all land near 3:1, which fine print can't use. */
.cform{--cink:#4A5457;margin-top:clamp(44px,5.5vw,64px);display:flex;flex-direction:column;gap:clamp(28px,3.4vw,40px)}
.cform[hidden]{display:none}
.crow{display:grid;gap:clamp(28px,3.4vw,40px)}
.crow.two{grid-template-columns:1fr 1fr}
.cfield{display:flex;flex-direction:column;gap:10px}
.cfield>span{font-family:var(--hiq-font-mono);font-size:var(--hiq-size-micro);letter-spacing:var(--hiq-tracking-eyebrow);text-transform:uppercase;color:var(--hiq-fg)}
.cfield>span em{font-style:normal;text-transform:lowercase;letter-spacing:.04em;font-size:11px;color:var(--hiq-fg)}
.cfield input,.cfield textarea,.cfield select{font-family:var(--hiq-font-sans);font-size:var(--hiq-size-body);line-height:1.6;color:var(--hiq-fg);background:transparent;border:none;border-bottom:1px solid var(--hiq-slate-soft);border-radius:0;padding:10px 0;min-height:46px;width:100%;transition:border-color var(--hiq-dur-base) var(--hiq-ease)}
.cfield textarea{resize:vertical;min-height:92px}
/* rotating examples — a real element, so it can crossfade instead of hard-swapping */
.cghostwrap{position:relative}
.cghost{position:absolute;left:0;top:0;padding:10px 0;font-family:var(--hiq-font-sans);font-size:var(--hiq-size-body);line-height:1.6;color:var(--cink);pointer-events:none;opacity:.72;transition:opacity 600ms var(--hiq-ease)}
.cghost.out{opacity:0}
.cghostwrap.filled .cghost{opacity:0;transition-duration:200ms}
.cfield input:hover,.cfield textarea:hover,.cfield select:hover{border-bottom-color:var(--hiq-slate)}
.cfield input:focus,.cfield textarea:focus,.cfield select:focus{outline:none;border-bottom-color:var(--hiq-charcoal)}
.cfield [aria-invalid="true"]{border-bottom-color:#8C5A5A}
.cselect{position:relative}
.cselect select{appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer}
.cselect::after{content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.5px solid var(--hiq-slate);border-bottom:1.5px solid var(--hiq-slate);transform:rotate(45deg);pointer-events:none}
.copt{display:flex;align-items:flex-start;gap:14px;max-width:56ch;cursor:pointer}
.copt input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:18px;height:18px;margin:4px 0 0;border:1px solid var(--hiq-slate);border-radius:3px;background:transparent;cursor:pointer;transition:background var(--hiq-dur-base),border-color var(--hiq-dur-base)}
.copt input:checked{background:var(--hiq-charcoal);border-color:var(--hiq-charcoal)}
.copt input:checked::after{content:"";display:block;width:10px;height:5px;margin:3px auto 0;border-left:1.5px solid var(--hiq-cream);border-bottom:1.5px solid var(--hiq-cream);transform:rotate(-45deg)}
.copt span{font-size:var(--hiq-size-small);line-height:1.6;color:var(--cink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.csubmit{align-self:flex-start;margin-top:var(--hiq-space-3);background:var(--hiq-charcoal);color:var(--hiq-cream);font-family:var(--hiq-font-sans);font-size:var(--hiq-size-small);font-weight:500;letter-spacing:.01em;padding:16px 46px;border-radius:var(--hiq-radius-pill);min-height:52px;transition:background var(--hiq-dur-base) var(--hiq-ease),transform var(--hiq-dur-base) var(--hiq-ease)}
.csubmit:hover{background:#1d1d1b;transform:translateY(-1px)}
.csubmit[disabled]{opacity:.5;pointer-events:none}
.cnote,.cerr{font-size:var(--hiq-size-small);line-height:1.6;color:var(--cink);margin:calc(var(--hiq-space-4) * -1 + 4px) 0 0;max-width:52ch}
.cerr{color:#8C5A5A}
.cerr a{color:inherit}
.cthanks{margin-top:clamp(44px,5.5vw,64px);padding-top:var(--hiq-space-6);border-top:1px solid var(--hiq-rule)}
.cthanks-h{font-family:var(--hiq-font-serif);font-size:var(--hiq-size-h2);margin:0 0 var(--hiq-space-3)}
.cthanks-p{font-size:var(--hiq-size-body-lg);line-height:1.65;color:var(--hiq-fg-muted);margin:0;max-width:48ch}
@media (max-width:680px){.crow.two{grid-template-columns:1fr}.csubmit{align-self:stretch;text-align:center}}

.onward{list-style:none;margin:clamp(64px,8vw,96px) 0 0;padding:0;display:flex;flex-direction:column}
.onward li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--hiq-space-4);padding:var(--hiq-space-5) 0;border-top:1px solid var(--hiq-rule)}
.onward li:last-child{border-bottom:1px solid var(--hiq-rule)}
.onward a{font-family:var(--hiq-font-serif);font-size:var(--hiq-size-h4);text-decoration:none;color:var(--hiq-fg)}
.onward a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hiq-slate)}
.onward span{font-size:var(--hiq-size-small);color:var(--hiq-fg-muted);margin-left:auto}

/* ── FOOTER ── */
.foot{padding:clamp(56px,7vw,88px) 0}
.foot .wrap{display:flex;flex-direction:column;gap:var(--hiq-space-3)}
.foot img{width:26px;height:auto;opacity:.6;margin-bottom:var(--hiq-space-3)}
.foot p{font-size:var(--hiq-size-small);color:var(--hiq-fg-muted);margin:0}
.foot a{color:var(--hiq-fg-muted);text-decoration-color:var(--hiq-slate-soft)}
.foot a:hover{color:var(--hiq-fg)}

/* ── RESPONSIVE ── */
@media (max-width:900px){
  .tenets{grid-template-columns:1fr 1fr;gap:var(--hiq-space-6)}
  .slide-copy{width:clamp(300px,58vw,520px)}
  .slide::after{width:min(100%,calc(var(--copyleft) + var(--copyw) + 160px));background:linear-gradient(96deg,rgba(24,20,17,.9) 0%,rgba(24,20,17,.84) 56%,rgba(24,20,17,.4) 82%,rgba(24,20,17,0) 100%)}
}
@media (max-width:680px){
  .ledger{grid-template-columns:1fr;gap:var(--hiq-space-7)}
  .fields{grid-template-columns:1fr}
  .slide{height:auto;min-height:min(92vh,760px);display:flex;align-items:flex-end}
  .slide-copy{margin-left:0;width:100%;padding:clamp(48px,16vh,140px) var(--edge) clamp(40px,6vh,56px);justify-content:flex-end}
  .slide::after{inset:0;width:100%;background:linear-gradient(180deg,rgba(24,20,17,.18) 0%,rgba(24,20,17,.28) 38%,rgba(24,20,17,.86) 82%)}
  .slide-desc{max-width:none}
  .arrow{width:44px;height:44px;bottom:auto;top:clamp(16px,3vh,28px)}
  .arrow.prev{right:calc(var(--edge) + 54px)}
  .arrow.next{right:var(--edge)}
  .onward span{margin-left:0;flex-basis:100%}
}