/* Ascertainty — merged site additions.
   The Design's own styles are inline in index.html; this file only adds
   the smooth-scroll plumbing and the immersive Krea-clip band. */

/* responsive: nav fits small screens, hero mark recedes behind text */
@media(max-width:560px){
  #nav{ gap:6px !important; padding:8px 10px !important; }
  #nav .nav-word{ display:none; }
  #nav button, #nav a[href^="http"]{ font-size:12px !important; padding:7px 11px !important; }
  .hero-mark{ opacity:.4; }
}

/* light-section relief backdrop (fixed, behind the glass cards) */
#paper-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(45vw 45vw at 12% 16%, rgba(232,137,59,.05), transparent 70%),
             radial-gradient(50vw 50vw at 88% 74%, rgba(91,168,212,.06), transparent 72%),
             linear-gradient(176deg,#F8F5EF 0%,#F4EFE6 46%,#EEE8DC 100%); }
#relief-faint, #relief-reveal{ position:absolute; inset:0;
  background:url(assets/relief.png) 0 0 / 560px 560px repeat; }
#relief-faint{ opacity:.13; }
#relief-reveal{ opacity:.6;
  -webkit-mask-image:radial-gradient(circle 340px at var(--mx,50%) var(--my,45%), #000 0%, #000 20%, transparent 70%);
          mask-image:radial-gradient(circle 340px at var(--mx,50%) var(--my,45%), #000 0%, #000 20%, transparent 70%); }
@media(prefers-reduced-motion:reduce){ #relief-reveal{ display:none; } }

/* Lenis smooth scroll */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }

/* ── immersive Grain clip band (glass-pane "Mac window", gated playback) ── */
.immersive{ position:relative; width:100vw; margin-left:calc(50% - 50vw); height:100vh; overflow:hidden;
  background:radial-gradient(120% 90% at 72% 35%, #11151d 0%, #0A0B0D 52%, #060709 100%); display:flex; align-items:center; }
.immersive-inner{ width:100%; max-width:1120px; margin:0 auto; padding:0 clamp(22px,5vw,48px);
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,5vw,64px); align-items:center; }
.icopy-col{ position:relative; min-height:230px; }
.icopy{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.icopy .ieyebrow{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#5BA8D4; font-weight:600; margin-bottom:16px; }
.icopy .ihead{ font-size:clamp(28px,3.6vw,46px); font-weight:700; letter-spacing:-.03em; line-height:1.05; color:#FBFCFD; }
.icopy .isub{ margin-top:16px; font-size:clamp(15px,1.4vw,18px); line-height:1.6; color:#9BA1AC; max-width:42ch; }
.ipane{ position:relative; border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 50px 110px -50px rgba(0,0,0,.85), 0 0 90px -20px rgba(91,168,212,.30);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.ipane-bar{ display:flex; gap:7px; padding:11px 14px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08); }
.ipane-bar span{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.18); }
.ipane-stage{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#0A0B0D; } /* central square crop */
.iclip{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .6s ease; background:#0A0B0D; }
.iprogress{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; gap:10px; z-index:4; }
.iprogress button{ width:9px; height:9px; padding:0; border:none; border-radius:999px; background:rgba(255,255,255,.25); cursor:pointer; transition:width .3s,background .3s; }
.iprogress button:hover{ background:rgba(255,255,255,.55); }
.iprogress button.on{ width:24px; background:#5BA8D4; }
@media(max-width:820px){ .immersive-inner{ grid-template-columns:1fr; gap:24px; } .icopy-col{ min-height:200px; } }