/* ══════════════════════════════════════════════════════════════════════
   SSK Mechanics — page.php stylesheet

   These rules used to live in an inline <style> block at the BOTTOM of
   page.php, i.e. after the markup they style. Every one of the ~130
   generated pages therefore painted its hero unstyled for a frame and
   then reflowed when the parser reached the block — a self-inflicted
   layout shift on the site's highest-traffic templates. Moving them to
   an enqueued stylesheet in <head> removes that shift and lets the file
   be cached and versioned by filemtime.

   Sections:
     1. Page hero (shared band)
     2. Landing hero (--landing: generated category/location/brand pages)
     3. Quick-buy panel
     4. Checkout hero trust strip
     5. Content + prose
     6. Bottom CTA band
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Page hero ───────────────────────────────────────────────────── */
.ssk-pg-hero{background:linear-gradient(135deg,#0d0e10,#16181d);color:#fff;padding:clamp(48px,7vw,80px) 20px clamp(36px,5vw,60px);text-align:center}
.ssk-pg-hero__inner{max-width:900px;margin:0 auto}
.ssk-pg-hero__eyebrow{display:inline-block;font-size:11px;font-weight:700;color:#d6001c;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
.ssk-pg-hero__title{font-family:'Barlow Condensed','Impact',Arial,sans-serif;font-size:clamp(28px,4.5vw,48px);font-weight:800;margin:0 0 12px;line-height:1.1;color:#fff}
.ssk-pg-hero__lead{color:rgba(255,255,255,.7);font-size:clamp(14px,1.8vw,17px);margin:0 auto 8px;max-width:600px}
.ssk-pg-hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.ssk-pg-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 24px;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;transition:all .15s}
.ssk-pg-btn--red{background:#d6001c;color:#fff!important}
.ssk-pg-btn--red:hover{background:#a80016}
.ssk-pg-btn--ghost{background:rgba(255,255,255,.1);color:#fff!important;border:1px solid rgba(255,255,255,.2)}
.ssk-pg-btn--wa{background:#25D366;color:#fff!important}

/* ── 2. Landing hero ────────────────────────────────────────────────────
   The visual language is deliberately identical to the guides archive
   (.ssk-pg-hero--guides in articles.css): two blurred brand-colour glows
   over a masked technical grid. That file only loads on article
   templates, so the primitives are redeclared here rather than
   cross-imported — page.php must not depend on an article stylesheet.

   Mobile-first, fluid sizing throughout; no fixed widths that could
   force a horizontal scrollbar at 320px. Tap targets >= 48px.
   ─────────────────────────────────────────────────────────────────────── */
.ssk-pg-hero--landing{position:relative;overflow:hidden;text-align:left;padding:clamp(32px,6vw,68px) 20px clamp(32px,5vw,60px)}
.ssk-pg-hero__bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.ssk-pg-hero__glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35}
.ssk-pg-hero__glow--1{width:clamp(240px,40vw,420px);height:clamp(240px,40vw,420px);background:var(--ssk-red,#d6001c);top:clamp(-180px,-18vw,-100px);right:clamp(-120px,-10vw,-60px)}
.ssk-pg-hero__glow--2{width:clamp(200px,32vw,320px);height:clamp(200px,32vw,320px);background:#2b6fd6;bottom:clamp(-160px,-16vw,-90px);left:clamp(-80px,-8vw,-40px);opacity:.25}
.ssk-pg-hero__grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(ellipse at top left,#000 0%,transparent 70%);
  mask-image:radial-gradient(ellipse at top left,#000 0%,transparent 70%)}

.ssk-pg-hero__inner--landing{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,40px);align-items:start;text-align:left}
.ssk-pg-hero__copy{min-width:0}
.ssk-pg-hero--landing .ssk-pg-hero__eyebrow{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;background:rgba(214,0,28,.14);border:1px solid rgba(214,0,28,.32);font-size:11px;font-weight:700;color:#ff5a6e;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px;line-height:1}
.ssk-pg-hero--landing .ssk-pg-hero__title{font-size:clamp(28px,5vw,46px);margin:0 0 12px;max-width:22ch}
.ssk-pg-hero--landing .ssk-pg-hero__lead{margin:0 0 4px;max-width:56ch;font-size:clamp(14px,1.7vw,16.5px);line-height:1.6}
.ssk-pg-hero--landing .ssk-pg-hero__cta{justify-content:flex-start;margin-top:22px}
/* Both hero buttons clear the 48px minimum on their own, without relying
   on the text inside them to push the box open. */
.ssk-pg-hero--landing .ssk-pg-btn{min-height:48px;padding-block:0}

.ssk-pg-hero--landing .ssk-pg-hero__trust{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:flex-start;list-style:none;margin:22px 0 0;padding:0}
.ssk-pg-hero--landing .ssk-pg-hero__trust li{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:13px;font-weight:600;color:rgba(255,255,255,.78);white-space:nowrap}
.ssk-pg-hero--landing .ssk-pg-hero__trust .ssk-icon{color:#ff5a6e;flex:0 0 auto}

@media (max-width:520px){
  .ssk-pg-hero--landing .ssk-pg-hero__trust{display:grid;grid-template-columns:1fr;gap:10px}
  .ssk-pg-hero--landing .ssk-pg-hero__trust li{white-space:normal;line-height:1.35}
}

@media (min-width:900px){
  .ssk-pg-hero__inner--landing{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:center}
}

/* ── 3. Quick-buy panel ─────────────────────────────────────────────── */
.ssk-qbuy{position:relative;z-index:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:clamp(14px,2.5vw,20px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);min-width:0}
.ssk-qbuy__head{margin-bottom:12px}
.ssk-qbuy__title{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:21px;font-weight:800;color:#fff;line-height:1.1}
.ssk-qbuy__sub{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-top:3px}
.ssk-qbuy__grid{display:grid;grid-template-columns:1fr;gap:8px}
.ssk-qbuy__item{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 12px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff!important;text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.ssk-qbuy__item:hover,.ssk-qbuy__item:focus-visible{background:rgba(214,0,28,.16);border-color:rgba(214,0,28,.5);transform:translateX(2px)}
.ssk-qbuy__item:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ssk-qbuy__icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:rgba(214,0,28,.18);color:#ff7183}
.ssk-qbuy__icon .ssk-icon{width:20px;height:20px}
.ssk-qbuy__body{display:block;min-width:0;flex:1 1 auto}
/* Long axle-level labels must wrap, never clip or push the card wide. */
.ssk-qbuy__name{display:block;font-size:13.5px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.ssk-qbuy__meta{display:flex;align-items:baseline;gap:7px;margin-top:2px;font-size:12px;color:rgba(255,255,255,.62)}
.ssk-qbuy__meta strong{color:#fff;font-size:13px;font-weight:800}
.ssk-qbuy__go{flex:0 0 auto;color:rgba(255,255,255,.45);font-size:17px;line-height:1}
.ssk-qbuy__item:hover .ssk-qbuy__go{color:#fff}
.ssk-qbuy__all{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;margin-top:10px;border-radius:10px;border:1px dashed rgba(255,255,255,.22);font-size:13px;font-weight:700;color:rgba(255,255,255,.78)!important;text-decoration:none;transition:border-color .15s,color .15s}
.ssk-qbuy__all:hover,.ssk-qbuy__all:focus-visible{border-color:rgba(214,0,28,.6);color:#fff!important}

/* Two tile columns once there is room, so six services stay on three rows
   instead of a six-row tower that pushes the CTA off a laptop screen. */
@media (min-width:560px) and (max-width:899px){
  .ssk-qbuy__grid{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  .ssk-qbuy__item{transition:none}
  .ssk-qbuy__item:hover{transform:none}
}
@media (prefers-contrast:more){
  .ssk-qbuy__item{border-color:rgba(255,255,255,.5)}
  .ssk-pg-hero--landing .ssk-pg-hero__trust li{color:#fff}
  .ssk-qbuy__meta,.ssk-qbuy__sub{color:rgba(255,255,255,.85)}
}
/* The glows are decoration; on a forced-colours display they paint as
   solid blocks over the text, so drop them entirely. */
@media (forced-colors:active){
  .ssk-pg-hero__bg{display:none}
}

/* ── 4. Checkout hero trust strip (replaces the CTA buttons — no exit links mid-payment) ── */
.ssk-pg-hero__trust{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.ssk-pg-hero__trust-item{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap}

/* ── 5. Content ─────────────────────────────────────────────────────── */
.ssk-pg-fullwidth{width:100%}
.ssk-pg-content{max-width:1180px;margin:0 auto;padding:clamp(32px,4vw,56px) 20px}
.ssk-pg-content--narrow{max-width:820px}
.ssk-prose{line-height:1.75;font-size:16px;color:#16181d}
.ssk-prose h1{display:none}
.ssk-prose h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(22px,3vw,32px);font-weight:800;margin:1.4em 0 .4em;line-height:1.15;color:#16181d}
.ssk-prose h3{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(18px,2.5vw,24px);font-weight:700;margin:1.2em 0 .3em;color:#16181d}
.ssk-prose p{margin:0 0 1em;color:#333}
.ssk-prose ul,.ssk-prose ol{margin:0 0 1em 1.4em;color:#444}
.ssk-prose li{margin-bottom:.5em}
.ssk-prose a{color:#d6001c;font-weight:600}
.ssk-prose strong{font-weight:700;color:#16181d}
.ssk-content-cols{display:flex;gap:28px;flex-wrap:wrap;margin:1.5em 0}
.ssk-content-cols>div{flex:1;min-width:240px;background:#f0f4f8;border-radius:12px;padding:20px 22px}
.ssk-content-cols h3{margin-top:0}
.ssk-prose details.ssk-faq-item{background:#f0f4f8;border:1px solid #e3e7ee;border-radius:10px;margin-bottom:8px;padding:14px 18px}
.ssk-prose details.ssk-faq-item summary{font-weight:700;cursor:pointer;font-size:15px;list-style:none}
.ssk-prose details.ssk-faq-item summary::-webkit-details-marker{display:none}
.ssk-prose details.ssk-faq-item p{margin:10px 0 0;color:#5a6473;font-size:14px}
/* Embedded booking wizard inside a mixed page — give it breathing room */
.ssk-pg-content .ssk-bk{margin-top:40px}

/* ── 6. Bottom CTA band ─────────────────────────────────────────────── */
.ssk-pg-cta-band{background:#0d0e10;padding:clamp(40px,5vw,64px) 20px;text-align:center}
.ssk-pg-cta-band__inner{max-width:1180px;margin:0 auto}
.ssk-pg-cta-band h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(26px,3.5vw,40px);font-weight:800;color:#fff;margin:0 0 12px}
.ssk-pg-cta-band p{color:rgba(255,255,255,.7);font-size:16px;margin:0 0 24px}
.ssk-pg-cta-band .ssk-pg-btn{min-height:48px;padding-block:0}
@media(max-width:680px){.ssk-content-cols{flex-direction:column;gap:14px}}


/* ── Diagnostics entry point ───────────────────────────────────────────
   For the visitor who cannot name the job. Deliberately styled apart from
   the service tiles above it — dashed edge, no solid fill — so it reads as
   "none of the above" rather than as one more thing to buy. */
.ssk-qbuy__diag{display:flex;align-items:center;gap:12px;min-height:56px;margin-top:10px;padding:10px 12px;border-radius:11px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.24);color:#fff!important;text-decoration:none;transition:background .18s ease,border-color .18s ease}
.ssk-qbuy__diag:hover,.ssk-qbuy__diag:focus-visible{background:rgba(214,0,28,.14);border-color:rgba(214,0,28,.55);border-style:solid}
.ssk-qbuy__diag:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ssk-qbuy__diag-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:rgba(255,255,255,.09);color:#fff}
.ssk-qbuy__diag-body{display:block;min-width:0;flex:1 1 auto}
.ssk-qbuy__diag-body strong{display:block;font-size:13.5px;font-weight:800;line-height:1.3}
.ssk-qbuy__diag-body span{display:block;margin-top:2px;font-size:12px;color:rgba(255,255,255,.62);overflow-wrap:anywhere}

/* Reviews link in the trust row — underline on hover only, so the row still
   reads as a list of facts rather than a row of links. */
.ssk-pg-hero__trust-link{color:inherit!important;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease}
.ssk-pg-hero__trust-link:hover,.ssk-pg-hero__trust-link:focus-visible{border-bottom-color:currentColor}

/* ── Shimmer, for anything still fetching ──────────────────────────────
   One class for every pending state on the site, so a loading row never
   again renders as an empty box the customer reads as "broken". */
.ssk-skel{position:relative;overflow:hidden;border-radius:8px;background:rgba(255,255,255,.07);color:transparent!important}
.ssk-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent)}
.ssk-skel--dark{background:rgba(0,0,0,.06)}
.ssk-skel--dark::after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.07),transparent)}

/* ── Entrance motion ───────────────────────────────────────────────────
   Composited properties only (opacity + translate), so no layout and no CLS.
   Entirely inside no-preference: reduced-motion gets the finished state
   immediately, not a slower version of the animation. */
@media (prefers-reduced-motion: no-preference){
  @keyframes ssk-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes ssk-shimmer{to{transform:translateX(100%)}}

  .ssk-pg-hero--landing .ssk-pg-hero__eyebrow,
  .ssk-pg-hero--landing .ssk-pg-hero__title,
  .ssk-pg-hero--landing .ssk-pg-hero__lead,
  .ssk-pg-hero--landing .ssk-pg-hero__cta,
  .ssk-pg-hero--landing .ssk-pg-hero__trust{animation:ssk-rise .42s cubic-bezier(.22,.61,.36,1) both}
  .ssk-pg-hero--landing .ssk-pg-hero__title{animation-delay:.05s}
  .ssk-pg-hero--landing .ssk-pg-hero__lead{animation-delay:.10s}
  .ssk-pg-hero--landing .ssk-pg-hero__cta{animation-delay:.15s}
  .ssk-pg-hero--landing .ssk-pg-hero__trust{animation-delay:.20s}

  .ssk-qbuy{animation:ssk-rise .42s cubic-bezier(.22,.61,.36,1) .12s both}
  .ssk-qbuy__item{animation:ssk-rise .3s ease-out both}
  .ssk-qbuy__item:nth-child(1){animation-delay:.20s}
  .ssk-qbuy__item:nth-child(2){animation-delay:.25s}
  .ssk-qbuy__item:nth-child(3){animation-delay:.30s}
  .ssk-qbuy__item:nth-child(4){animation-delay:.35s}
  .ssk-qbuy__item:nth-child(5){animation-delay:.40s}
  .ssk-qbuy__item:nth-child(6){animation-delay:.45s}

  .ssk-qbuy__item:hover,.ssk-qbuy__item:focus-visible{transform:translateX(3px)}
  .ssk-qbuy__diag:hover,.ssk-qbuy__diag:focus-visible{transform:translateX(3px)}
  .ssk-skel::after{animation:ssk-shimmer 1.25s ease-in-out infinite}
}

/* ── HERO PHOTO — generated pages (category/location/brand/system/b2b),
   PageHero.php (2026-08-09). .ssk-pg-hero__bg already has z-index:0 of its
   own, establishing a stacking context for its children — glow-1/glow-2/
   grid already paint in that DOM order with no z-index of their own, so
   the photo+scrim only need a z-index below them, added here without
   touching the existing .ssk-pg-hero__glow/__grid rules above. ────────── */
.ssk-pg-hero__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
}
.ssk-pg-hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(13,14,16,.88) 0%, rgba(13,14,16,.55) 100%);
}
.ssk-pg-hero__glow{ z-index:2; }
.ssk-pg-hero__grid{ z-index:3; }
