/* PREVIEW v5 2026-09-16 · premium pass. Restraint: finer lines, calmer space, slower easing, one accent.
 * Loaded last on every page. Overrides only; no markup or wording changes.
 */
:root {
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --hair: rgba(41, 34, 25, 0.12);
  --hair-soft: rgba(41, 34, 25, 0.07);
  --shadow-card: 0 1px 1px rgba(41,34,25,0.03), 0 2px 6px -2px rgba(41,34,25,0.05), 0 24px 48px -24px rgba(41,34,25,0.14);
}

/* ---------- grain: a fixed, very faint paper texture ---------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .13 0 0 0 0 .1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- typography ---------- */
body { line-height: 1.72; font-feature-settings: "kern", "liga"; }
h1, h2, h3 { font-optical-sizing: auto; text-wrap: balance; }
p { text-wrap: pretty; }
h1 { letter-spacing: -0.03em; line-height: 0.98; }
.hero-center h1 { font-size: clamp(3rem, 7vw, 6.2rem); max-width: 14ch; }
h2 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.02; letter-spacing: -0.024em; margin-bottom: 26px; }
.close h2 { font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -0.024em; }
.sys h3, .qa h3, .door h3, .build h3, .step h3, .f-out h3, .reel figcaption b { letter-spacing: -0.012em; }
.eyebrow { font-size: 11.5px; letter-spacing: 0.26em; font-weight: 600; margin-bottom: 28px; }
.hero-sub { font-size: clamp(1.08rem, 1.3vw, 1.2rem); line-height: 1.65; }
.band-head p, .section-head p { line-height: 1.72; }
label { font-size: 11.5px; letter-spacing: 0.16em; }

/* ---------- space ---------- */
section { padding-top: clamp(104px, 12.5vw, 200px); }
.section-head { margin-bottom: clamp(48px, 5.5vw, 80px); }
.band.overlap { padding: clamp(104px, 12vw, 180px) 0; }
.showcase { margin-top: clamp(104px, 12.5vw, 200px); padding: clamp(96px, 11vw, 170px) 0; }
.close { margin-top: clamp(120px, 14vw, 220px); padding-top: clamp(110px, 13vw, 190px); }
@media (max-width: 600px) {
  section { padding-top: 92px; }
  .band.overlap { padding: 92px 0; }
  .section-head { margin-bottom: 40px; }
}

/* ---------- hairlines and surfaces ---------- */
.step, .sys, .qa { border-top-width: 1px; border-top-color: var(--hair); }
.sys:last-of-type, .qa:last-of-type { border-bottom-width: 1px; border-bottom-color: var(--hair); }
.js-enh .sys::before, .js-enh .qa::before, .js-enh .step::before, .js-enh .fact::before { height: 1px; top: -1px; }
.door, .build, .form-card, .f-src, .f-out, .diagram { border: 1px solid var(--hair-soft); box-shadow: var(--shadow-card); }
.door:hover { transform: translateY(-3px); box-shadow: 0 1px 1px rgba(41,34,25,0.03), 0 30px 60px -28px rgba(41,34,25,0.22); }
.door, .build, .f-src { transition: transform 0.9s var(--ease-out), box-shadow 0.9s var(--ease-out); }
input, select, textarea { border-width: 1px; border-color: var(--hair); background: rgba(247,242,233,0.7); transition: border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(193,78,43,0.55); box-shadow: 0 0 0 4px rgba(193,78,43,0.10); }

/* header glass, only once the page has moved */
header.site.scrolled {
  background: rgba(247,242,233,0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--hair-soft);
}
.nav-links a:not(.btn) { color: var(--body-warm); transition: color 0.4s var(--ease-out); }
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links a:not(.btn)::after { height: 1px; transition: right 0.7s var(--ease-out); }

/* ---------- buttons: a clear primary, a quiet secondary ---------- */
.btn {
  letter-spacing: 0.005em; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 2px rgba(110,40,15,0.18), 0 10px 24px -12px rgba(193,78,43,0.55);
  transition: transform 0.7s var(--ease-out), background 0.4s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.btn:hover, .btn.mag:hover { transform: translateY(-1px) !important; background: var(--ember-deep); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 2px rgba(110,40,15,0.2), 0 16px 32px -14px rgba(162,63,31,0.6); }
.btn.mag { transform: none !important; }
.btn:active { transform: translateY(0) !important; }
.btn.light { box-shadow: 0 1px 2px rgba(60,20,8,0.2), 0 12px 28px -14px rgba(40,12,4,0.45); }
.textlink {
  font-weight: 600; border-bottom: 0; padding-bottom: 4px;
  background: linear-gradient(var(--hair), var(--hair)) left bottom / 100% 1px no-repeat,
              linear-gradient(var(--ember), var(--ember)) left bottom / 0% 1px no-repeat;
  transition: background-size 0.8s var(--ease-out), color 0.4s var(--ease-out);
}
.textlink:hover { background-size: 100% 1px, 100% 1px; color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }

/* ---------- icons: one stroke weight ---------- */
.sys .ico * { stroke-width: 1.4; }
.f-src .ic svg, .phone svg { stroke-width: 1.6; }
.f-src .ic { background: transparent; border: 1px solid var(--hair); }

/* ---------- video cards: cleaner ---------- */
.reel .frame { border-radius: 26px; box-shadow: 0 0 0 1px rgba(246,240,228,0.08), 0 40px 80px -40px rgba(10,5,2,0.8); }
html.scrub .reel .frame { transform: perspective(1400px) rotateX(calc((1 - var(--p, 1)) * 14deg)) scale(calc(0.9 + 0.1 * var(--p, 1))); transition: none; }
.reel .snd { padding: 8px 13px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; background: rgba(20,14,10,0.45); border-color: rgba(246,240,228,0.16); }
.reel figcaption b { font-size: 1.3rem; }
.showcase { background: radial-gradient(1100px 620px at 50% -10%, #4A2215 0%, #251A13 58%, #1C140F 100%); }

/* ---------- headline masks (scroll): words rise out of a clip, not a fade ---------- */
html.scrub h2.sh .sw { display: inline-block; overflow: clip; vertical-align: top; padding: 0.02em 0.08em 0.22em 0; margin: -0.02em -0.08em -0.22em 0; opacity: 1; transform: none; }
html.scrub h2.sh .sw > span { display: inline-block; transform: translate3d(0, calc((1 - var(--w)) * 140%), 0); opacity: clamp(0, calc((var(--w) - 0.25) * 3), 1); will-change: transform; }

/* ---------- cursor light (desktop, set up by premium.js) ---------- */
.cursor-light {
  position: absolute; left: 0; top: 0; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%;
  pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1.2s var(--ease-out);
  background: radial-gradient(closest-side, rgba(240,135,92,0.16), rgba(240,135,92,0));
  will-change: transform;
}
.showcase .cursor-light { mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(240,135,92,0.22), rgba(240,135,92,0)); }
.has-light:hover .cursor-light { opacity: 1; }

/* the old third hero glow was noise; fewer layers read calmer */
.hero-live .glow.g3 { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cursor-light { display: none; }
  html.scrub h2.sh .sw > span { transform: none; }
}