/* ============================================================
   Halo Concepts: the Values page (2026-10-16, Chad's brief).
   Loaded after calm.css: same tokens, nav, footer, type.
   The page IS the deck: the seven intro frames stacked on scroll, almost
   full screen under the nav, with a slim subject menu beside it (the
   homepage process deck's mechanics, values.js). Then the closing band.
   .deck-on is added by values.js only when GSAP runs; phones, tablets,
   no JS and reduced motion get the same cards as a plain grid.
   ============================================================ */

/* the nav stays put on this page, so the pinned deck never slides under it */
.v-page .nav.away{transform:none}

/* ---------- plain cards (default) ---------- */
.v-deck-sec{padding-block:clamp(48px,6vw,96px) clamp(72px,7vw,120px)}
.vdeck .head{margin:0 0 clamp(28px,3vw,44px);text-align:left;max-width:none}
.v-h1{margin-bottom:0}

.vcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vcard{background:#fff;border-radius:var(--r-m);overflow:hidden;display:flex;flex-direction:column}
.vcard-img{margin:0;overflow:hidden;aspect-ratio:16/9;background:var(--stone)}
.vcard-img img{width:100%;height:100%;object-fit:cover}
.vcard-txt{padding:clamp(24px,2.4vw,36px)}
.vcard .num{display:block;font-size:15px;font-weight:500;color:var(--brass-ink);margin-bottom:8px}
.vcard .h3{margin-bottom:10px}
.vcard p{color:var(--soft);max-width:36em}
.vnav{display:none}

/* ---------- the deck: almost full screen, menu beside (desktop, GSAP running) ---------- */
@media (min-width:1201px){
  .deck-on .v-deck-sec{padding:0}
  .deck-on .vdeck{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);gap:clamp(28px,2.4vw,44px);height:calc(100svh - var(--nav));padding-block:32px 16px} /* 32px on top: room for the back cards' peek */
  .deck-on .vdeck .head{margin:0;align-self:center}

  .deck-on .vnav{position:relative;display:flex;flex-direction:column;margin-top:24px;border-top:1px solid var(--hair)}
  .deck-on .vnav::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:var(--prog,0%);background:var(--ink)} /* fills as the cards land */
  .deck-on .vnav button{display:flex;align-items:center;gap:12px;text-align:left;padding:9px 0;border-bottom:1px solid var(--hair);font-size:15px;font-weight:500;color:var(--soft);transition:color .3s}
  .deck-on .vnav button i{font-style:normal;font-size:12px;color:var(--quiet);width:18px}
  .deck-on .vnav button svg{width:14px;height:14px;margin-left:auto;color:var(--brass-ink);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--ease)}
  .deck-on .vnav button:hover,.deck-on .vnav button[aria-current="step"]{color:var(--ink)}
  .deck-on .vnav button[aria-current="step"] svg{opacity:1;transform:none}
  .deck-on .vcards{position:relative;display:block;height:100%}
  .deck-on .vcard{position:absolute;inset:0;box-shadow:0 1px 0 rgba(43,40,37,.05),0 14px 28px rgba(43,40,37,.06);transform-origin:50% 0;will-change:transform}
  .deck-on .vcard-img{flex:1 1 auto;aspect-ratio:auto;min-height:0}
  .deck-on .vcard-txt{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:clamp(32px,3vw,64px);align-items:end;padding:clamp(20px,1.8vw,32px) clamp(28px,2.6vw,48px)}
  .deck-on .vcard .num{grid-column:1;margin-bottom:6px}
  .deck-on .vcard .h3{grid-column:1;font-size:clamp(34px,2.8vw,54px);letter-spacing:-.034em;line-height:1.04;margin:0}
  .deck-on .vcard p{grid-column:2;grid-row:1/span 2;font-size:clamp(17px,1.05vw,20px);max-width:36em}
}

/* ---------- close: the one dark band ---------- */
.v-cta{background:var(--black);color:#fff;padding-block:clamp(96px,9vw,168px)}
.v-cta-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,4vw,96px);align-items:end}
.v-cta .sub{color:rgba(255,255,255,.68);max-width:34em;margin-top:18px}
.v-btns{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.v-btn-light{background:#fff;color:var(--black)}
.v-btn-light:hover{background:#EDEDF0}
.v-mail{color:var(--brass-light)}

/* ---------- tablet, phone ---------- */
@media (max-width:1200px){
  .v-cta-in{grid-template-columns:1fr;align-items:start}
}
@media (max-width:720px){
  .vcards{grid-template-columns:1fr}
  .v-btns{flex-direction:column;align-items:flex-start}
}