/* Home page — "The Unlock" (concept B). Loaded by index.html only.
   Fraunces is the brand display face; this page uses it for the hero, the
   services band and the proof numbers. */
:root{ --display:'Fraunces',Georgia,serif; }

/* ---- Hero ---- */
.hero-unlock{padding:clamp(40px,7vw,96px) 40px clamp(56px,8vw,104px);background:var(--cream)}
.hu-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.hu-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)}
.hu-h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,7vw,96px);line-height:.98;letter-spacing:-.025em;margin:22px 0 0;max-width:13ch}
.hu-h1 em{font-style:italic;color:var(--orange-ink)}
.hero-unlock .hero-sub{margin-top:28px}
.hu-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hu-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .2s,background .2s,color .2s}
.hu-btn:hover{transform:translateY(-2px)}
.hu-btn-solid{background:var(--navy);color:var(--cream)}
.hu-btn-solid:hover{background:var(--navy-700)}
.hu-btn-line{border:1.5px solid var(--navy);color:var(--navy)}
.hu-btn-line:hover{background:var(--navy);color:var(--cream)}
.hu-btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.hu-stage{position:relative;aspect-ratio:1/1;max-width:560px;width:100%;justify-self:center;touch-action:pan-y}
.hu-stage::after{content:"";position:absolute;left:18%;right:18%;bottom:4%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,39,59,.22),rgba(0,39,59,0));pointer-events:none}
.hu-fallback{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain;transition:opacity .5s}
#hu-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s;cursor:grab}
.hu-stage.is-dragging #hu-canvas{cursor:grabbing}
.hu-stage.is-3d .hu-fallback{opacity:0}
.hu-stage.is-3d #hu-canvas{opacity:1}
.hu-hint{position:absolute;right:0;top:4%;padding:8px 12px;border-radius:10px;background:#fff;border:1px solid var(--cream-200);font-size:13px;color:var(--navy-700);opacity:0;transition:opacity .6s .4s;pointer-events:none}
.hu-stage.is-3d .hu-hint{opacity:1}

/* ---- Services band: the mark opens (--open: 0 → 1, set by unlock.js) ---- */
.unlock{--open:0;position:relative;overflow:hidden;background:var(--navy);color:var(--cream);padding:clamp(64px,9vw,112px) 40px}
.ul-half{position:absolute;top:50%;width:clamp(220px,28vw,400px);height:auto;pointer-events:none;opacity:.95;transition:transform .1s linear}
.ul-left{left:0;clip-path:inset(0 50% 0 0);transform:translate(calc(18vw - var(--open) * 26vw),-50%) rotate(calc(var(--open) * -14deg))}
.ul-right{right:0;clip-path:inset(0 0 0 50%);transform:translate(calc(-18vw + var(--open) * 26vw),-50%) rotate(calc(var(--open) * 14deg))}
.ul-inner{position:relative;z-index:1;max-width:820px;margin:0 auto;text-align:center;opacity:calc(.25 + var(--open) * .75)}
.ul-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ff855a}
.ul-h2{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.4vw,52px);line-height:1.1;letter-spacing:-.02em;margin:14px auto 0;max-width:20ch}
.ul-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:40px;text-align:left}
.ul-card{display:block;padding:20px 22px;border-radius:14px;border:1px solid rgba(241,240,234,.2);color:var(--cream);text-decoration:none;transition:background .2s,transform .2s}
.ul-card:hover{background:rgba(241,240,234,.07);transform:translateY(-2px)}
.ul-card:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.ul-card h3{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-.01em}
.ul-card p{margin-top:6px;font-size:15px;line-height:1.55;color:rgba(241,240,234,.78)}
.ul-card.is-accent{background:var(--orange);border-color:var(--orange);color:var(--navy-900)}
.ul-card.is-accent p{color:var(--navy-900)}
.ul-card.is-accent:hover{background:#ff6d1f}
.ul-all{display:inline-flex;align-items:center;min-height:44px;margin-top:28px;font-weight:700;color:var(--cream)}

/* ---- Proof: cream, editorial numbers ---- */
.proof.proof-light{background:var(--cream);color:var(--navy);padding:clamp(56px,7vw,80px) 40px;border-bottom:1px solid var(--cream-200)}
.proof-light .proof-grid{max-width:var(--wrap);text-align:left}
.proof-light .stat .n{font-family:var(--display);font-weight:400;color:var(--navy);font-size:clamp(52px,7vw,80px)}
.proof-light .stat .l{opacity:1;color:var(--navy-700)}

@media (max-width:860px){
  .hu-grid{grid-template-columns:1fr}
  .hu-stage{max-width:300px}
  .hu-hint{display:none}
  .ul-grid{grid-template-columns:1fr}
  .ul-half{opacity:.25}
}
@media (max-width:560px){
  .hero-unlock,.unlock,.proof.proof-light{padding-left:20px;padding-right:20px}
}
@media (prefers-reduced-motion:reduce){
  .ul-half,.hu-btn,.ul-card{transition:none}
  .hu-btn:hover,.ul-card:hover{transform:none}
}