/* ============================================================
   QUILLON — LIQUID layer
   Floating glass island navbar · liquid-glass surfaces ·
   custom cursor · refined hover · tasteful easter eggs
   Loads AFTER quillon.css / fx.css / dark-mode.css — wins the cascade.
   ============================================================ */

@property --sheen{ syntax:'<percentage>'; inherits:false; initial-value:50%; }

:root{
  --glass-tint:    rgba(250,248,243,.72);
  --glass-tint-2:  rgba(243,240,232,.55);
  --glass-edge:    rgba(255,255,255,.66);
  --glass-line:    rgba(26,23,18,.09);
  --glass-blur:    blur(15px) saturate(1.35);
  --glass-shadow:
      inset 0 1px 0 rgba(255,255,255,.7),
      inset 0 0 0 1px rgba(255,255,255,.04),
      0 1px 2px rgba(26,20,10,.05),
      0 10px 26px -12px rgba(26,20,10,.22),
      0 30px 60px -32px rgba(26,20,10,.34);
}
[data-theme="dark"]{
  --glass-tint:    rgba(28,25,21,.62);
  --glass-tint-2:  rgba(20,18,15,.5);
  --glass-edge:    rgba(234,229,217,.14);
  --glass-line:    rgba(234,229,217,.10);
  --glass-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 1px 2px rgba(0,0,0,.4),
      0 14px 32px -14px rgba(0,0,0,.55),
      0 36px 70px -34px rgba(0,0,0,.6);
}

/* ============================================================
   1 · FLOATING GLASS ISLAND NAVBAR
   (keeps existing markup — restyles .nav into a detached island)
   ============================================================ */
.nav{
  inset:auto;
  top:clamp(.6rem, 1.3vw, 1.05rem);
  left:50%;
  width:min(100% - 1.4rem, 1180px);
  transform:translateX(-50%) translateY(0) scale(1);
  transform-origin:top center;
  padding:.62rem .62rem .62rem 1.35rem;
  border:1px solid var(--glass-line);
  border-radius:20px;
  background:linear-gradient(180deg, var(--glass-tint), var(--glass-tint-2));
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  border-bottom:1px solid var(--glass-line);
  transition:width .6s var(--ease), padding .6s var(--ease),
             transform .6s var(--ease), background .5s var(--ease),
             box-shadow .5s var(--ease), border-color .5s var(--ease);
  overflow:visible;
  isolation:isolate;
}
/* moving sheen that tracks the cursor across the island (easter egg: light refraction) */
.nav::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:radial-gradient(120px 80px at var(--nx,50%) var(--ny,0%),
            rgba(255,255,255,.5), transparent 70%);
  opacity:0; transition:opacity .5s var(--ease); mix-blend-mode:soft-light;
}
.nav:hover::before{ opacity:1; }
[data-theme="dark"] .nav::before{ background:radial-gradient(120px 80px at var(--nx,50%) var(--ny,0%), rgba(143,176,162,.28), transparent 70%); }
.nav > *{ position:relative; z-index:1; }

/* scrolled / compact: tighten + lift, more solid glass */
.nav.scrolled{
  background:linear-gradient(180deg, rgba(250,248,243,.86), rgba(244,241,233,.72));
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  padding-block:.5rem;
  border-bottom:1px solid var(--glass-line);
}
.nav.nav--compact{
  width:min(100% - 1.4rem, 920px);
  transform:translateX(-50%) translateY(-2px) scale(.985);
}

/* island over a dark section (paper.js toggles .on-dark) → dark glass, light text */
.nav.on-dark:not(.scrolled){
  background:linear-gradient(180deg, rgba(30,27,22,.5), rgba(18,16,12,.42));
  border-color:rgba(234,229,217,.14);
  color:var(--on-ink);
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 14px 34px -16px rgba(0,0,0,.5),
      0 36px 70px -34px rgba(0,0,0,.55);
}
.nav.on-dark:not(.scrolled)::before{ background:radial-gradient(120px 80px at var(--nx,50%) var(--ny,0%), rgba(143,176,162,.3), transparent 70%); }

[data-theme="dark"] .nav.scrolled{
  background:linear-gradient(180deg, rgba(28,25,21,.78), rgba(18,16,13,.66));
  border-bottom:1px solid rgba(234,229,217,.08);
}

/* links: gliding indicator pill behind the active/hovered item */
.nav__links{ position:relative; }
.nav__ind{
  position:absolute; top:50%; left:0; height:2.1em; width:0;
  transform:translateY(-50%);
  border-radius:9px; pointer-events:none; z-index:0;
  background:var(--tick-glow);
  box-shadow:inset 0 0 0 1px rgba(34,80,63,.14);
  opacity:0;
  transition:transform .42s var(--ease), width .42s var(--ease), opacity .3s var(--ease), background .3s;
}
.nav.on-dark:not(.scrolled) .nav__ind{ background:rgba(143,176,162,.16); box-shadow:inset 0 0 0 1px rgba(143,176,162,.22); }
.nav__links a{ position:relative; z-index:1; padding:.42em .7em; border-radius:9px; }
/* the island carries its own indicator — retire the underline */
.nav__links a::after{ display:none; }

.nav__cta{ border-radius:13px; }
.theme-toggle{ border-radius:11px; }
.nav__burger{ border-radius:11px; }

@media(max-width:860px){
  .nav{ width:calc(100% - 1.2rem); padding:.55rem .55rem .55rem 1.05rem; border-radius:18px; }
  .nav.nav--compact{ width:calc(100% - 1.2rem); transform:translateX(-50%) scale(.99); }
}

/* ============================================================
   2 · LIQUID-GLASS SURFACES (used where there's depth behind)
   ============================================================ */
.glass{
  background:linear-gradient(180deg, var(--glass-tint), var(--glass-tint-2));
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:16px;
  box-shadow:var(--glass-shadow);
}

/* eyebrow chips floated over dark / aurora sections become glass pills */
[data-navdark] .eyebrow, [data-aurora] .eyebrow{
  padding:.5em .95em .5em .85em;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(143,176,162,.1), rgba(143,176,162,.04));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(143,176,162,.18);
}
[data-navdark] .eyebrow::before, [data-aurora] .eyebrow::before{ width:18px; }

/* the request form card → premium frosted panel over the hero wash */
.fcard{
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(252,250,245,.62)) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid var(--glass-edge) !important;
}
[data-theme="dark"] .fcard{
  background:linear-gradient(180deg, rgba(34,30,25,.7), rgba(24,21,17,.6)) !important;
  border:1px solid rgba(234,229,217,.1) !important;
}

/* mobile menu → liquid glass over the dark wash */
.navmenu{
  background:linear-gradient(180deg, rgba(19,17,11,.72), rgba(13,11,7,.82)) !important;
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  backdrop-filter:blur(28px) saturate(1.4);
}

/* ============================================================
   3 · CUSTOM CURSOR (fine-pointer only — wired in liquid.js)
   ============================================================ */
.qc{ position:fixed; left:0; top:0; z-index:9998; pointer-events:none;
     will-change:transform; opacity:0; transition:opacity .4s var(--ease); }
html.qc-on.qc-ready .qc{ opacity:1; }
.qc__ring{
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1.4px solid var(--tick);
  background:radial-gradient(circle, rgba(34,80,63,.07), transparent 60%);
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
             border-color .3s, background .3s, opacity .3s;
  mix-blend-mode:normal;
}
.qc__dot{
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:var(--tick);
  transition:width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), opacity .25s;
}
[data-theme="dark"] .qc__ring{ border-color:var(--tick-soft); background:radial-gradient(circle, rgba(143,176,162,.1), transparent 60%); }
[data-theme="dark"] .qc__dot{ background:var(--tick-soft); }
/* expand over interactive elements */
html.qc-hot .qc__ring{ width:54px; height:54px; margin:-27px 0 0 -27px; background:radial-gradient(circle, rgba(34,80,63,.12), transparent 62%); border-color:var(--tick); }
html.qc-hot .qc__dot{ opacity:0; }
/* press feedback */
html.qc-press .qc__ring{ width:26px; height:26px; margin:-13px 0 0 -13px; }
/* over document sheets: a soft amber "paper" read */
html.qc-paper .qc__ring{ border-color:var(--seal); background:radial-gradient(circle, rgba(176,138,78,.12), transparent 62%); }

html.qc-on, html.qc-on body{ cursor:none; }
html.qc-on a, html.qc-on button, html.qc-on input,
html.qc-on textarea, html.qc-on select, html.qc-on label{ cursor:none; }
@media(pointer:coarse){ .qc{ display:none !important; } html.qc-on, html.qc-on body{ cursor:auto; } }

/* ============================================================
   4 · REFINED HOVER / 3D TILT
   ============================================================ */
.pcard, .fcell, .wcard{ transition:transform .5s var(--ease), background .45s var(--ease), box-shadow .5s var(--ease); transform-style:preserve-3d; will-change:transform; }
.pcard{ position:relative; }

/* the principle / standard cards get a glass edge-light on hover */
.pcard::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  opacity:0; transition:opacity .5s var(--ease);
}
.pcard:hover::after{ opacity:1; }

/* coverage cells: hidden mono "tab" slides out on hover (easter egg) */
.fcell{ position:relative; overflow:hidden; }
.fcell__tab{
  position:absolute; top:0; right:0;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tick-soft); background:var(--tick-deep);
  padding:.4em .7em; border-radius:0 0 0 8px;
  transform:translateY(-110%); transition:transform .4s var(--ease);
}
.fcell:hover .fcell__tab{ transform:none; }

/* build list rows: a quiet page-tab peeks out on the active row (easter egg) */
.bitem{ position:relative; }
.bitem__tab{
  position:absolute; left:-10px; top:50%; width:6px; height:0;
  background:var(--tick-soft); border-radius:3px 0 0 3px;
  transform:translateY(-50%); transition:height .5s var(--ease); opacity:.7;
}
.bitem.on .bitem__tab{ height:42px; }

/* buttons: a soft liquid-glass glow that wakes on hover */
.btn{ position:relative; isolation:isolate; }
.btn--tick::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  box-shadow:0 0 0 0 var(--tick-glow);
  opacity:0; transition:opacity .5s var(--ease), box-shadow .6s var(--ease);
}
.btn--tick:hover::before{ opacity:1; box-shadow:0 10px 40px -8px rgba(34,80,63,.5); }

/* ============================================================
   5 · DELIVERY STAMP (easter egg — pack fully assembled)
   ============================================================ */
.stamp{
  position:absolute; z-index:6; right:clamp(1.5rem,4vw,3rem); top:clamp(1.5rem,5vh,3rem);
  display:flex; align-items:center; gap:.55em;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tick-soft);
  padding:.6em .9em; border:1.5px solid var(--tick-soft); border-radius:4px;
  background:rgba(143,176,162,.06);
  opacity:0; transform:rotate(-7deg) scale(1.25);
  transition:opacity .5s var(--ease), transform .55s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.stamp.show{ opacity:.92; transform:rotate(-7deg) scale(1); }
.stamp .dot{ width:7px; height:7px; border-radius:50%; background:var(--tick-soft); box-shadow:0 0 0 0 rgba(143,176,162,.5); animation:stampPulse 2.4s ease-out infinite; }
@keyframes stampPulse{ 0%{ box-shadow:0 0 0 0 rgba(143,176,162,.5);} 70%{ box-shadow:0 0 0 9px rgba(143,176,162,0);} 100%{ box-shadow:0 0 0 0 rgba(143,176,162,0);} }

/* ============================================================
   7 · ELEVATION — document rendering, lighting, depth, type
   (pure craft uplift — no new elements, no added noise)
   ============================================================ */

/* ---- the signature document: more physical, more filmic ---- */
.sheet{
  background:
    linear-gradient(180deg, #ffffff 0%, #fdfcf7 52%, #f6f2e9 100%);
  border:1px solid rgba(26,24,19,.055);
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.95),
    0 1.5px 2px rgba(26,20,10,.04),
    0 8px 16px -8px rgba(26,20,10,.16),
    0 26px 44px -18px rgba(26,20,10,.24),
    0 56px 90px -44px rgba(26,20,10,.30);
}
/* layered light: top sheen + corner fall-off, replacing the flat overlay */
.sheet::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, transparent 7%),
    linear-gradient(118deg, rgba(255,255,255,.6) 0%, transparent 26%, transparent 70%, rgba(26,24,19,.055) 100%);
}
[data-theme="dark"] .sheet{
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.9),
    0 8px 18px -8px rgba(0,0,0,.5),
    0 30px 55px -22px rgba(0,0,0,.6),
    0 70px 110px -50px rgba(0,0,0,.7);
}
/* lit document glows a touch warmer */
.sheet.lit{
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.95),
    0 30px 60px -20px rgba(28,22,12,.42),
    0 0 0 1.5px var(--tick),
    0 0 44px -6px rgba(34,80,63,.35);
}

/* ---- hero: a soft overhead bloom so the stack sits in light ---- */
.hero{ isolation:isolate; }
.hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:-10% -10% auto -10%; height:80%;
  background:radial-gradient(60% 70% at 72% 4%, rgba(255,255,255,.85), transparent 60%),
             radial-gradient(40% 50% at 78% 0%, rgba(34,80,63,.06), transparent 70%);
  mix-blend-mode:normal;
}
[data-theme="dark"] .hero::after{
  background:radial-gradient(60% 70% at 72% 2%, rgba(86,78,60,.4), transparent 62%),
             radial-gradient(42% 52% at 78% 0%, rgba(58,138,106,.14), transparent 70%);
}

/* ---- dark sections: cinematic overhead key-light ---- */
.build__sticky::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(70% 60% at 30% -8%, rgba(143,176,162,.12), transparent 58%),
             radial-gradient(90% 80% at 50% 120%, rgba(0,0,0,.35), transparent 60%);
}
.build__list, .build__scene{ position:relative; z-index:1; }
.cover, .cta{ isolation:isolate; }
.cover::after, .cta::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(80% 60% at 50% -10%, rgba(143,176,162,.10), transparent 60%);
}
.cover > *, .cta > *{ position:relative; z-index:1; }

/* ---- typography: optical refinement on display heads ---- */
h1{ letter-spacing:-.022em; }
.hero h1{ line-height:1.0; }
.hero h1 .em{ letter-spacing:-.03em; }
h2{ letter-spacing:-.018em; }
.lede{ color:var(--t-body); }
.eyebrow{ font-weight:500; }

/* ---- a hair more breathing room on the signature sections ---- */
@media(min-width:861px){
  .shift{ padding-block:clamp(6rem,13vh,11rem); }
}

/* ---- matrix panel: lift it into real glass-on-dark light ---- */
.matrix{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 30px 60px -24px rgba(0,0,0,.5),
    0 80px 120px -60px rgba(0,0,0,.55);
}

/* ---- coverage cells: warmer rest state, deeper hover lift ---- */
.fcell:hover{ box-shadow:0 26px 50px -24px rgba(28,22,12,.6); }

/* ============================================================
   6 · REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .nav{ transition:none; }
  .qc{ display:none !important; }
  html.qc-on, html.qc-on body{ cursor:auto; }
  .stamp .dot{ animation:none; }
}