/* ==========================================================================
   PINEWORKS · OVERLAY SYSTEM v4
   One fixed ground. Everything else is a panel resting on it.

   Changed in v4 (Aug 2026):
   · Removed the scroll-linked drift. Nothing moves on scroll any more.
   · One spacing scale for the whole site, set here, inherited everywhere.
   · Killed the full-bleed hairlines that cut across the ground.
   · Hero no longer forced to a full viewport on desktop.
   Loaded last so it overrides each page's inline sheet.
   ========================================================================== */
:root{
  --sheet:rgba(20,21,24,.70);
  --card:rgba(20,21,24,.62);
  --stack:24px;   /* gap between two floating panels */
}

html,body{background:transparent !important;background-color:transparent !important}
.backdrop{background:#0f1013 !important;z-index:-3 !important}

/* ==========================================================================
   THE GROUND · fixed, never scrolls
   ========================================================================== */
.ground{
  position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,#1a1d22 0%,#141619 46%,#101114 100%),#101114;
}
.ground-horizon{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 60% at 50% -18%,rgba(242,240,235,.045),transparent 60%),
    radial-gradient(78% 52% at 50% 116%,rgba(241,104,82,.13),transparent 64%);
}
/* the motif holds the margins and steps back behind the reading column */
.ground-motif{
  position:absolute;inset:0;width:100%;height:100%;
  mask-image:radial-gradient(ellipse 54% 48% at 50% 46%,transparent 0%,rgba(0,0,0,.5) 60%,#000 90%);
  -webkit-mask-image:radial-gradient(ellipse 54% 48% at 50% 46%,transparent 0%,rgba(0,0,0,.5) 60%,#000 90%);
}
.ground-glaze{
  position:fixed;inset:0;z-index:150;pointer-events:none;
  background:radial-gradient(600px 480px at var(--mx,62%) var(--my,36%),
    rgba(255,255,255,.038),rgba(255,255,255,.012) 46%,transparent 74%);
}
@media(prefers-reduced-motion:reduce){.ground-glaze{display:none}}

/* the viewport is the inspection frame */
.ground-frame{position:absolute;inset:18px;border:1px solid rgba(242,240,235,.05)}
.ground-frame span{position:absolute;width:16px;height:16px;border:0 solid rgba(241,104,82,.5)}
.ground-frame span:nth-child(1){top:-1px;left:-1px;border-width:1px 0 0 1px}
.ground-frame span:nth-child(2){top:-1px;right:-1px;border-width:1px 1px 0 0}
.ground-frame span:nth-child(3){bottom:-1px;left:-1px;border-width:0 0 1px 1px}
.ground-frame span:nth-child(4){bottom:-1px;right:-1px;border-width:0 1px 1px 0}

/* live position readout · static chrome, changing value */
.ground-readout{
  position:absolute;left:34px;bottom:32px;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(242,240,235,.28);display:flex;align-items:center;gap:10px;
}
.ground-readout b{color:rgba(241,104,82,.75);font-weight:500}
.ground-readout .bar{width:76px;height:1px;background:rgba(242,240,235,.12);position:relative}
.ground-readout .bar i{position:absolute;inset:0 auto 0 0;width:0%;background:#f16852}
@media(max-width:840px){.ground-readout,.ground-frame{display:none}}

/* ==========================================================================
   NO FULL-BLEED BANDS · the ground must run unbroken behind everything
   ========================================================================== */
section{background:transparent !important;background-color:transparent !important}
footer{background:transparent !important}
.hero{background:transparent !important;background-color:transparent !important}
.hero-bg,.hero-watermark{display:none !important}
.work-process-zone{background:none !important}
.prem::before,.reviews::before,
.work-process-zone::before,.work-process-zone::after,
#work::after{display:none !important}
.cta-bg{background:
  radial-gradient(85% 100% at 50% 125%,rgba(241,104,82,.22),transparent 58%),
  radial-gradient(45% 45% at 50% 0%,rgba(242,240,235,.035),transparent 62%) !important}

/* Full-width 1px rules were left over from the banded layout. They cut
   straight across the ground and are the main reason the page reads as a
   stack of strips rather than panels floating on one surface. Panels keep
   their own border; sections do not get one. */
.hero,.sec,.split,.process,.story,.values,.vision,.response,
.contact-methods,.area,.trust-band,.hero-split,.legal-hero{
  border-top-color:transparent !important;
  border-bottom-color:transparent !important;
}

/* ==========================================================================
   SPACING IS NOT SET HERE ANY MORE.
   Every page carries its own vertical rhythm in its own <style> block, so a
   page can be adjusted on its own without moving the other fifteen. This
   file does texture and skin only: the ground, the panels, the nav.
   ========================================================================== */


/* ==========================================================================
   FLOATING PANELS (were full-width bands)
   ========================================================================== */
.ticker,.review-strip,.reviews,.prem,.cta,
.cta-strip,.faq,.process-strip,.plans,.includes,.what-is,.cure,.never,
.wash,.refer,.warranty,.packages,.kit,.other-svcs,.pane-intro,.selector-section{
  width:min(var(--maxw),calc(100% - 32px));
  margin-left:auto !important;margin-right:auto !important;
  margin-top:var(--stack) !important;margin-bottom:var(--stack) !important;
  background:var(--sheet) !important;
  border:1px solid var(--line) !important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 26px 64px rgba(0,0,0,.42);
}
.ticker,.review-strip .marquee,.reviews .marquee{
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}

/* sections that were only spacing stay flat on the ground */
.sec,.split,.process,.story,.values,.vision,.response,
.contact-methods,.area{background:transparent !important}

/* --- cards that rest directly on the ground ------------------------------ */
.svc-card,.work-card{
  background:var(--card) !important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 18px 44px rgba(0,0,0,.38);
}
.svc-card:hover,.work-card:hover{background:rgba(25,26,30,.78) !important}

/* --- nav becomes a floating bar, not a lid ------------------------------- */
nav{top:16px;background:transparent !important;border-bottom-color:transparent !important;backdrop-filter:none !important}
nav .nav-inner{
  width:min(var(--maxw),calc(100% - 32px));
  border:1px solid var(--line);
  background:rgba(18,19,22,.66);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:10px 14px 10px 18px;
  transition:background .4s ease,box-shadow .4s ease;
}
nav.scrolled .nav-inner{background:rgba(15,16,19,.92);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.menu{background:rgba(15,16,19,.92) !important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

.hero-frame{box-shadow:0 34px 90px rgba(0,0,0,.55)}
.hero-sub{color:#a4a4a0}

/* ==========================================================================
   MOTION POLICY
   Only opacity and transform may ever be transitioned. Nothing that affects
   layout (margin, padding, gap, height, width) is animated anywhere, and no
   transition uses the `all` keyword. If a gap appears to change while you
   scroll, something has broken this rule.
   ========================================================================== */
.reveal{transition-property:opacity,transform !important}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media(max-width:880px){

  body.page-quote .stepper{margin-bottom:24px !important}
  body.page-quote .hero-assure{gap:12px}

  /* ── tap targets · Apple and Google both want ~44px ────────────────────── */
  .bc-inner a,.bc-current{display:inline-flex;align-items:center;min-height:44px}
  .legal-nav a,.legal-nav .current{
    min-height:44px;display:inline-flex;align-items:center;padding:0 2px;
  }
  .sec-link,.svc-more,.opt-learn-below,.method-action{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .fc-dot{width:10px;height:10px;position:relative}
  .fc-dot::after{content:"";position:absolute;inset:-16px}   /* invisible 42px hit area */
  .foot-social,.menu-social{min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}

  /* ── readability · body copy was rendering at 9-10px in places ─────────── */
  p,li{font-size:max(1em,13px)}
  .cure-note,.step1-hint{font-size:12px !important}

  /* ── horizontal tab bars need a hint that they scroll ──────────────────── */
  .picker-bar,.selector-tabs{
    mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);
  }

  /* iOS zooms the page when a font-size under 16px gets focus */
  input,select,textarea{font-size:16px !important}
}