/* =====================================================================
   Prairie SkyShine — Marketing Site
   site.css  ·  builds on brand/colors_and_type.css (design tokens)
   Voice & palette must stay in lockstep with the design system.
   ===================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* shared type bits ---------------------------------------------------- */
.overline {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--steel-500);
}
.display {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.98; letter-spacing: -0.005em;
}
.serif-italic { font-family: var(--font-serif); font-style: italic; }
.horizon-rule { height: 2px; background: var(--horizon); border: none; }

/* buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 14px; border-radius: var(--radius-sm);
  padding: 13px 22px; border: 1px solid transparent; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--sky-300); color: var(--ink); }
.btn-primary:hover { background: #fff; }
.btn-steel { background: var(--steel-blue); color: #fff; box-shadow: var(--shadow-sm); }
.btn-steel:hover { background: var(--steel-700); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.32); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 60; background: var(--bg-dusk);
  box-shadow: 0 2px 18px rgba(0,0,0,0.28);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-top: 14px; padding-bottom: 14px; }
.nav .brand img { height: 40px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
.nav .links { display: flex; align-items: center; gap: 26px; }
.nav .links a {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 13px; color: rgba(238,242,246,0.82);
  text-decoration: none; transition: color .15s ease;
}
.nav .links a:hover { color: #fff; }
.nav .links a.call { color: var(--sky-300); }
.nav .menu-btn { display: none; background: none; border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm); padding: 9px; color: #fff; cursor: pointer; }
.nav .menu-btn svg { width: 20px; height: 20px; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; background: #0b1015; color: #fff; overflow: hidden; }
.hero .bg { position: absolute; inset: 0; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.hero .scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,16,21,0.55) 0%, rgba(20,30,42,0.42) 45%, rgba(11,16,21,0.92) 100%); }

/* 3D bead scene — scroll-driven crossfade (shine-3d.js).
   Opens on the Sabres photo; scrolling dissolves it into the molecular
   bead scene while the hero stays pinned, then the page continues. */
.hero-pin { position: relative; }
#shine3d { position: absolute; inset: 0; width: 100%; height: 100%; display: none; opacity: 0; }
.hero--3d #shine3d { display: block; }
.hero--3d { position: sticky; top: 0; }
.hero--3d .bg img { will-change: transform; }
.hero .molecular-tag { position: absolute; right: 26px; bottom: 22px; z-index: 2; opacity: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sky-300); text-shadow: 0 1px 8px rgba(0,0,0,0.6); pointer-events: none; }
@media (max-width: 760px) {
  .hero .molecular-tag { right: 14px; bottom: 16px; font-size: 9px; max-width: 60vw; text-align: right; }
}
.hero .wrap { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 104px; max-width: 1180px; }
.hero .inner { max-width: 720px; }
.hero .overline { color: var(--sky-300); letter-spacing: 0.26em; }
.hero h1 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  color: #fff; font-size: clamp(40px, 7vw, 76px); line-height: 0.94; margin-top: 14px;
  letter-spacing: -0.01em; text-shadow: 0 3px 22px rgba(0,0,0,0.55); }
.hero .tag { font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2.6vw, 24px);
  color: var(--off-white); margin-top: 20px; max-width: 560px; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero .verticals { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 12px; color: rgba(238,242,246,0.86); }
.hero .verticals span { padding: 0 14px 0 0; margin-right: 14px; position: relative; }
.hero .verticals span + span::before { content: ""; position: absolute; left: -14px; top: 50%;
  transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--sky-400); }

/* =========================================================
   SECTION SCAFFOLD
   ========================================================= */
section { padding: 84px 0; }
.section-head { max-width: 720px; }
.section-head h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1; margin-top: 10px; color: var(--fg1); letter-spacing: -0.01em; }
.section-head p { color: var(--fg2); font-size: 16px; margin-top: 14px; }

/* WHY / it's just me -------------------------------------------------- */
.why { background: var(--paper); }
.why .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.why .lede { font-size: 17px; line-height: 1.62; color: var(--fg2); margin-top: 18px; }
.why .lede em { font-family: var(--font-serif); font-style: italic; color: var(--steel-600); }
.why .owner-shot { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center 45%;
  border-radius: var(--radius-sm); border: 1px solid var(--border); box-shadow: var(--shadow-sm); margin-top: 22px; }
.why .diff { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.why .row { display: flex; gap: 13px; align-items: flex-start; }
.why .ic { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--steel-50);
  border: 1px solid var(--steel-100); display: flex; align-items: center; justify-content: center; }
.why .ic svg { width: 21px; height: 21px; color: var(--steel-600); }
.why .row h4 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 15px; color: var(--fg1); }
.why .row p { font-size: 13.5px; line-height: 1.5; color: var(--fg2); margin-top: 4px; }

/* SERVICES ------------------------------------------------------------ */
.services { background: var(--paper-2); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.card .ph { height: 168px; background: var(--paper-3); position: relative; overflow: hidden; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }
.card .ph-empty { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; text-align: center; color: var(--neutral-500);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  background: repeating-linear-gradient(45deg, var(--paper-2) 0, var(--paper-2) 8px, var(--paper-3) 8px, var(--paper-3) 16px); }
.card .ph-empty svg { width: 22px; height: 22px; color: var(--neutral-400); }
.card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.card .hd { display: flex; align-items: center; gap: 11px; }
.card .hd .ic { width: 32px; height: 32px; border-radius: var(--radius-xs); background: var(--steel-blue);
  display: flex; align-items: center; justify-content: center; flex: none; }
.card .hd .ic svg { width: 18px; height: 18px; color: #fff; }
.card .hd h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 19px; color: var(--fg1); }
.card .body p { font-size: 13.5px; line-height: 1.5; color: var(--fg2); margin-top: 11px; }
.card .pkg { margin-top: auto; padding-top: 14px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.02em; color: var(--steel-600); text-transform: uppercase; }
.card .pkg span { color: var(--neutral-400); }

/* CERAMIC band -------------------------------------------------------- */
.ceramic { background: var(--bg-dusk); color: var(--fg-on-dark); position: relative; }
.ceramic::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--horizon); }
.ceramic .grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 52px; align-items: center; }
.ceramic .badge { background: #fff; border-radius: var(--radius-sm); padding: 30px; display: flex;
  align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.ceramic .badge img { max-height: 170px; max-width: 100%; width: auto; height: auto; }
.ceramic .overline { color: var(--sky-300); }
.ceramic h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 4vw, 42px); line-height: 1; color: #fff; margin-top: 10px; letter-spacing: -0.005em; }
.ceramic p { color: rgba(238,242,246,0.82); font-size: 15.5px; line-height: 1.6; margin-top: 16px; max-width: 520px; }
.ceramic .points { margin-top: 20px; display: flex; flex-direction: column; gap: 11px; }
.ceramic .points li { list-style: none; display: flex; align-items: flex-start; gap: 11px;
  font-size: 14.5px; color: var(--off-white); }
.ceramic .points svg { width: 18px; height: 18px; color: var(--sky-300); flex: none; margin-top: 2px; }

/* HOW IT WORKS -------------------------------------------------------- */
.how .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.how .step { padding: 26px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); }
.how .step .num { font-family: var(--font-display); font-weight: 700; font-size: 38px; color: var(--steel-200); line-height: 1; }
.how .step h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 18px; color: var(--fg1); margin-top: 8px; }
.how .step p { font-size: 14px; line-height: 1.55; color: var(--fg2); margin-top: 9px; }

/* CONTACT / CTA ------------------------------------------------------- */
.contact { background: var(--steel-600); color: #fff; position: relative; }
.contact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--horizon); }
.contact .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.contact .overline { color: var(--sky-300); }
.contact h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(32px, 4.8vw, 50px); line-height: 0.96; color: #fff; margin-top: 10px; letter-spacing: -0.01em; }
.contact .tag { font-family: var(--font-serif); font-style: italic; font-size: 18px;
  color: rgba(238,242,246,0.9); margin-top: 16px; max-width: 460px; }
.contact .lines { display: flex; flex-direction: column; gap: 16px; }
.contact .lines a, .contact .lines div { display: inline-flex; align-items: center; gap: 13px;
  color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; }
.contact .lines svg { width: 20px; height: 20px; color: var(--sky-300); flex: none; }
.contact .lines .phone { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: 0.01em; }
.contact .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.contact .refer { margin-top: 22px; font-size: 13.5px; color: rgba(238,242,246,0.78); max-width: 420px; line-height: 1.5; }
.contact .refer b { color: #fff; font-weight: 600; }

/* FOOTER -------------------------------------------------------------- */
.footer { background: var(--bg-dusk); color: rgba(238,242,246,0.7); padding: 48px 0 38px; }
.footer .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.footer .brand img { height: 46px; width: auto; }
.footer .brand p { margin-top: 14px; font-size: 13px; line-height: 1.55; max-width: 320px; }
.footer .cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer h5 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 12px; color: rgba(238,242,246,0.55); margin-bottom: 14px; }
.footer a { display: block; color: rgba(238,242,246,0.82); text-decoration: none; font-size: 14px;
  margin-bottom: 10px; transition: color .15s ease; }
.footer a:hover { color: var(--sky-300); }
.footer .legal { margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: rgba(238,242,246,0.5); }
.footer .legal b { color: rgba(238,242,246,0.78); font-weight: 600; }

/* =====================================================================
   RETRO-FUTURISM LAYER  (P0: funnel, proof, promo, motion)
   Dark-dominant, chrome hairlines, glacier glow, glass, machined edges.
   ===================================================================== */

/* scroll-reveal -------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* nav: glass + CTA ----------------------------------------------------- */
.nav { background: rgba(20,30,42,0.72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(156,210,228,0.14); }
.nav .links a.nav-cta {
  color: var(--ink); background: var(--sky-300); padding: 9px 16px; border-radius: var(--radius-sm);
  letter-spacing: 0.06em; transition: background .15s ease, box-shadow .15s ease;
}
.nav .links a.nav-cta:hover { background: #fff; color: var(--ink); box-shadow: 0 0 0 3px rgba(156,210,228,0.3); }

/* hero: HUD grid + trust row + scroll cue ------------------------------ */
.hero .grid-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(156,210,228,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156,210,228,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 78%);
}
.hero-trust { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(238,242,246,0.82); }
.hero-trust svg { width: 15px; height: 15px; color: var(--sky-300); }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; text-decoration: none; animation: bob 1.8s ease-in-out infinite; }
.scroll-cue svg { width: 18px; height: 18px; }
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* stats strip ---------------------------------------------------------- */
.stats { background: var(--bg-dusk); padding: 30px 0; position: relative; }
.stats::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--horizon); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stat { text-align: center; padding: 6px 8px; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: -11px; top: 14%; bottom: 14%; width: 1px; background: rgba(156,210,228,0.18); }
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1; color: #fff; display: inline-flex; align-items: baseline; gap: 2px; }
.stat .num .plus, .stat .num .suffix { color: var(--sky-300); font-size: 0.62em; }
.stat .num .upto { color: rgba(238,242,246,0.6); font-size: 0.34em; text-transform: uppercase;
  letter-spacing: 0.1em; margin-right: 6px; align-self: center; font-family: var(--font-mono); }
.stat .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase;
  color: rgba(238,242,246,0.66); margin-top: 10px; line-height: 1.4; }

/* proof: reels + quotes ------------------------------------------------ */
.proof { background: var(--paper); }
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.reel figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--steel-600); margin-top: 12px; }
.reel .frame { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg-dusk); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.reel video, .reel .frame > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,16,21,0) 55%, rgba(11,16,21,0.55) 100%); }
.reel .ba-tag { position: absolute; top: 10px; left: 10px; z-index: 2; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(20,30,42,0.7);
  border: 1px solid rgba(156,210,228,0.4); padding: 4px 8px; border-radius: var(--radius-xs); }
.reel .play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 50%; background: rgba(156,210,228,0.92); color: var(--ink);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(0,0,0,0.4); transition: transform .15s ease; }
.reel:hover .play { transform: translate(-50%,-50%) scale(1.08); }
.reel .play svg { width: 22px; height: 22px; margin-left: 2px; }
/* before / after feature */
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 40px; }
.ba-item .frame { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); background: var(--bg-dusk); }
.ba-item .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-label { position: absolute; top: 12px; left: 12px; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; padding: 5px 11px; border-radius: var(--radius-xs); }
.ba-label.before { background: rgba(26,26,26,0.8); color: #fff; }
.ba-label.after { background: var(--sky-300); color: var(--ink); }
.ba-arrow { display: flex; align-items: center; justify-content: center; color: var(--steel-400); }
.ba-arrow svg { width: 30px; height: 30px; }
.ba-caption { text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 15px;
  color: var(--fg2); margin-top: 16px; }

.work-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 40px; }
.work figcaption { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--steel-600); margin-top: 10px; line-height: 1.4; }
.work .frame { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg-dusk); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.work .frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.work:hover .frame img { transform: scale(1.05); }
.work .frame::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,16,21,0) 62%, rgba(11,16,21,0.34) 100%); }

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.qcard { background: var(--paper); border: 1px solid var(--border); border-left: 3px solid var(--sky-400);
  border-radius: var(--radius-sm); padding: 22px; box-shadow: var(--shadow-sm); }
.qcard .stars { display: flex; gap: 3px; color: var(--sky-400); margin-bottom: 12px; }
.qcard .stars svg { width: 16px; height: 16px; fill: currentColor; }
.qcard p { font-family: var(--font-serif); font-style: italic; font-size: 15.5px; line-height: 1.55; color: var(--fg1); }
.qcard cite { display: block; margin-top: 12px; font-family: var(--font-mono); font-style: normal; font-size: 11px;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg3); }
.proof-note { display: flex; align-items: center; gap: 9px; justify-content: center; margin-top: 30px;
  font-size: 13.5px; color: var(--fg2); }
.proof-note svg { width: 18px; height: 18px; color: var(--steel-500); }

/* promo band ----------------------------------------------------------- */
.promo { background: var(--steel-800); color: #fff; padding: 40px 0; position: relative; }
.promo::before, .promo::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--horizon); }
.promo::before { top: 0; } .promo::after { bottom: 0; }
.promo-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.seal { flex: none; width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--sky-300);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 50% 35%, rgba(156,210,228,0.18), transparent 70%); }
.seal .big { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: #fff; }
.seal .yrs { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--sky-300); }
.promo-copy .overline { color: var(--sky-300); }
.promo-copy h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1; margin-top: 8px; color: #fff; }
.promo-copy h2 .hl { color: var(--sky-300); }
.promo-copy p { color: rgba(238,242,246,0.82); font-size: 14.5px; line-height: 1.55; margin-top: 12px; max-width: 600px; }

/* quote funnel --------------------------------------------------------- */
.quote { background: var(--bg-dusk); color: var(--fg-on-dark); position: relative; }
.quote::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--horizon); }
.quote .grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.quote-pitch .overline { color: var(--sky-300); }
.quote-pitch h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1; color: #fff; margin-top: 10px; letter-spacing: -0.01em; }
.quote-pitch .tag { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: rgba(238,242,246,0.9);
  margin-top: 16px; max-width: 460px; }
.assurances { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.assurances li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--off-white); }
.assurances svg { width: 18px; height: 18px; color: var(--sky-300); flex: none; }
.assurances a { color: var(--sky-300); text-decoration: none; border-bottom: 1px solid rgba(156,210,228,0.4); }
.assurances a:hover { color: #fff; }

.quote-form { background: rgba(238,242,246,0.04); border: 1px solid rgba(156,210,228,0.18);
  border-radius: var(--radius-sm); padding: 28px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.quote-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote-form .field { margin-bottom: 16px; }
.quote-form label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(238,242,246,0.7); margin-bottom: 7px; }
.quote-form input, .quote-form select, .quote-form textarea {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: #fff; background: rgba(11,16,21,0.5);
  border: 1px solid rgba(156,210,228,0.22); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
.quote-form textarea { resize: vertical; }
.quote-form select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--sky-300) 50%), linear-gradient(135deg, var(--sky-300) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.quote-form select option { color: var(--ink); }
.quote-form input::placeholder, .quote-form textarea::placeholder { color: rgba(238,242,246,0.4); }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: none; border-color: var(--sky-300); box-shadow: 0 0 0 3px rgba(156,210,228,0.18); }
.quote-form .check { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); text-transform: none;
  letter-spacing: 0; font-size: 13.5px; color: rgba(238,242,246,0.85); margin: 4px 0 18px; cursor: pointer; }
.quote-form .check input { width: auto; }
.quote-form .submit { width: 100%; justify-content: center; font-size: 15px; padding: 15px; }
.quote-form .form-fine { font-size: 12px; color: rgba(238,242,246,0.55); margin-top: 12px; text-align: center; }

/* card hover lift (futuristic micro-interaction) ----------------------- */
.card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--steel-200); }

.cta-row.center { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 40px; }
.btn-disabled { background: transparent; color: var(--neutral-500); border: 1px dashed var(--neutral-400); cursor: default; pointer-events: none; }

/* PRICING -------------------------------------------------------------- */
.pricing { background: var(--paper); }
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.price-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 24px 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--steel-200); }
.price-card.feature { background: var(--bg-dusk); color: var(--fg-on-dark); border-color: transparent; position: relative; overflow: hidden; }
.price-card.feature::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--horizon); }
.pc-head { display: flex; align-items: center; gap: 11px; }
.pc-head .ic { width: 34px; height: 34px; border-radius: var(--radius-xs); background: var(--steel-blue);
  display: flex; align-items: center; justify-content: center; flex: none; }
.price-card.feature .pc-head .ic { background: var(--sky-300); }
.pc-head .ic svg { width: 18px; height: 18px; color: #fff; }
.price-card.feature .pc-head .ic svg { color: var(--ink); }
.pc-head h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 17px; color: inherit; }
.price-card .from { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 21px; margin-top: 16px; color: var(--steel-600); letter-spacing: 0.01em; }
.price-card.feature .from { color: #fff; }
.price-card .from strong { color: var(--steel-700); }
.price-card.feature .from strong { color: var(--sky-300); }
.price-card .note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--fg3); margin-top: 8px; line-height: 1.4; }
.price-card.feature .note { color: rgba(238,242,246,0.6); }
.price-card p { font-size: 13.5px; line-height: 1.5; color: var(--fg2); margin-top: 12px; }
.price-card.feature p { color: rgba(238,242,246,0.82); }

/* CREDENTIALS / AUTHORITY ---------------------------------------------- */
.creds { background: var(--paper); }
.cred-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px; }
.cred figcaption { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--steel-600); margin-top: 12px; line-height: 1.4; }
.cred .frame { aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); background: var(--bg-dusk); }
.cred .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cred .frame.doc { background: var(--paper-2); padding: 10px; }
.cred .frame.doc img { object-fit: contain; }

/* MAINTENANCE PLANS ---------------------------------------------------- */
.plans { background: var(--paper-2); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; align-items: stretch; }
.plan-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 30px 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; }
.plan-card.feature { background: var(--bg-dusk); color: var(--fg-on-dark); border-color: transparent; box-shadow: var(--shadow-md); }
.plan-card.feature::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--horizon); }
.plan-card.soon { background: var(--paper-2); border-style: dashed; }
.plan-card .ribbon { position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); background: var(--sky-300);
  padding: 4px 9px; border-radius: var(--radius-xs); }
.plan-card .soon-ribbon { background: transparent; color: var(--neutral-500); border: 1px solid var(--neutral-400); }
.plan-card h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 21px; color: inherit; padding-right: 80px; }
.plan-card .price { margin-top: 14px; display: flex; align-items: baseline; gap: 5px; }
.plan-card .price .amt { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; color: var(--steel-700); }
.plan-card.feature .price .amt { color: #fff; }
.plan-card .price .per { font-family: var(--font-mono); font-size: 13px; color: var(--fg3); }
.plan-card.feature .price .per { color: var(--sky-300); }
.plan-card.soon .price .amt { font-size: 25px; color: var(--neutral-500); }
.plan-card .for { font-family: var(--font-serif); font-style: italic; font-size: 13.5px; color: var(--fg2); margin-top: 10px; }
.plan-card.feature .for { color: rgba(238,242,246,0.8); }
.plan-card ul { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--fg2); }
.plan-card.feature li { color: var(--off-white); }
.plan-card li svg { width: 17px; height: 17px; color: var(--steel-500); flex: none; margin-top: 2px; }
.plan-card.feature li svg { color: var(--sky-300); }
.plan-card.soon li svg { color: var(--neutral-400); }
.plan-card .btn { margin-top: 22px; justify-content: center; }

/* file upload field ---------------------------------------------------- */
.quote-form label .opt { text-transform: none; letter-spacing: 0; color: rgba(238,242,246,0.5); font-family: var(--font-body); }
.quote-form input[type="file"] { padding: 10px 12px; font-size: 13px; color: rgba(238,242,246,0.7); cursor: pointer; }
.quote-form input[type="file"]::file-selector-button { font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; color: var(--ink); background: var(--sky-300);
  border: none; border-radius: var(--radius-xs); padding: 8px 12px; margin-right: 12px; cursor: pointer; transition: background .15s ease; }
.quote-form input[type="file"]::file-selector-button:hover { background: #fff; }

/* MY PROCESS (dark authority band) ------------------------------------ */
.process { background: var(--bg-dusk); color: var(--fg-on-dark); position: relative; }
.process::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--horizon); }
.process .overline { color: var(--sky-300); }
.process .section-head h2 { color: #fff; }
.process .section-head p { color: rgba(238,242,246,0.8); }
.proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.proc { padding: 24px; border: 1px solid rgba(156,210,228,0.16); border-radius: var(--radius-sm);
  background: rgba(238,242,246,0.03); transition: border-color .18s ease, transform .18s ease; }
.proc:hover { border-color: rgba(156,210,228,0.4); transform: translateY(-3px); }
.proc .num { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--sky-300); }
.proc h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 16px; color: #fff; margin-top: 8px; }
.proc p { font-size: 13.5px; line-height: 1.5; color: rgba(238,242,246,0.78); margin-top: 8px; }
.proc-note { display: flex; align-items: center; gap: 9px; justify-content: center; margin-top: 30px;
  font-size: 13px; color: rgba(238,242,246,0.7); text-align: center; }
.proc-note svg { width: 17px; height: 17px; color: var(--sky-300); flex: none; }

/* FAQ / objections ----------------------------------------------------- */
.faq { background: var(--paper); }
.faq-list { margin-top: 36px; max-width: 840px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 20px 0; font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 16px; color: var(--fg1); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; color: var(--steel-500); flex: none; transition: transform .2s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--fg2); max-width: 700px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .why .grid, .ceramic .grid, .contact .grid, .quote .grid { grid-template-columns: 1fr; gap: 36px; }
  .svc-grid, .how .steps { grid-template-columns: repeat(2, 1fr); }
  .why .diff { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .stat:nth-child(3)::before { display: none; }
  .reels, .quotes { grid-template-columns: 1fr 1fr; }
  .quotes .qcard:last-child { grid-column: 1 / -1; }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .proc-grid { grid-template-columns: repeat(2, 1fr); }
  .cred-grid { grid-template-columns: repeat(2, 1fr); }
  .promo-inner { grid-template-columns: auto 1fr; }
  .promo-inner .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  section { padding: 60px 0; }
  .nav .links { display: none; }
  .nav .links.open { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column;
    align-items: flex-start; gap: 4px; background: var(--bg-dusk); padding: 16px 18px 22px; box-shadow: var(--shadow-md); }
  .nav .links.open a { padding: 10px 0; font-size: 15px; }
  .nav .links.open a.nav-cta { align-self: stretch; text-align: center; margin-top: 6px; }
  .nav .menu-btn { display: inline-flex; }
  .svc-grid, .how .steps, .why .diff, .reels, .quotes, .price-grid, .proc-grid { grid-template-columns: 1fr; }
  .quotes .qcard:last-child { grid-column: auto; }
  .ba { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); margin: -4px 0; }
  .hero .wrap { padding-top: 64px; padding-bottom: 72px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .quote-form { padding: 22px; }
  .quote-form .row2 { grid-template-columns: 1fr; gap: 0; }
  .promo-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 20px; }
  .promo-inner .btn { grid-column: auto; }
  .promo-copy p { margin-left: auto; margin-right: auto; }
}

/* =========================================================
   SCROLL STORY (scroll.js) — decorative layers & overrides.
   body.story is added only when GSAP boots successfully, so
   none of this affects the no-JS / reduced-motion page.
   ========================================================= */

/* GSAP owns entrances now — retire the legacy .reveal transitions */
body.story .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* one-time chrome streak across the hero headline (injected by scroll.js) */
.shine-streak { position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(238,242,246,0.35) 45%, rgba(156,210,228,0.5) 52%, rgba(255,255,255,0) 100%);
  pointer-events: none; mix-blend-mode: screen; }

/* glossy sheen that sweeps the ceramic badge panel (injected by scroll.js) */
.ceramic .badge { position: relative; overflow: hidden; }
.sheen-sweep { position: absolute; top: -12%; bottom: -12%; left: 0; width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(76,107,138,0.14) 45%, rgba(156,210,228,0.4) 52%, rgba(255,255,255,0) 100%);
  pointer-events: none; }

/* thin chrome progress line drawn down the process build sheet */
.process .proc-grid { position: relative; }
.proc-line { position: absolute; left: -22px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, #ccd4dc 0%, #ffffff 50%, #a7b4c3 100%);
  transform-origin: top center; border-radius: 1px; }
@media (max-width: 900px) { .proc-line { display: none; } }

/* services: quiet lift + shine on hover/tap (story mode only) */
body.story .services .card { transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; overflow: hidden; }
body.story .services .card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(26,26,26,0.16); }
body.story .services .card::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-12deg); pointer-events: none; transition: left 0.55s ease; }
body.story .services .card:hover::after { left: 130%; }

/* before/after wipe needs the after-frame to clip cleanly */
body.story .proof .ba-item .frame { will-change: clip-path; }

/* picture wrappers carry no box — img keeps existing layout rules */
picture{display:contents}