/* Class Alpha Solutions SHELL (Oct 13 2026, uniform pass).
   One stylesheet for what every page of classalphasolutions.com shares: colors, one font,
   type scale, buttons, sticky header, phone menu, section spacing, FAQ rows, closing band,
   footer and the reveal. Home, Our work, the website offer and Privacy all load this, so the
   header and footer cannot drift apart. Page-only rules live in home.css (home) and
   site-pages.css (the other three). Light and bright only; never dark bands.
   Extracted unchanged from home.css; nothing here was redesigned. */
:root{
  --navy:#021A3E;--ink:#233250;--mute:#56637C;--red:#E01933;--red-d:#C8102E;--red-h:#9B1B30;--gold:#FBBC04;--gold-soft:#FFF3CF;
  --cream:#FAF7F2;--soft:#F6F5F4;--line:#E4E6E9;--white:#fff;
  --font:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.55;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
@media (min-width:768px){body{font-size:17px}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
.h-skip{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.h-skip:focus{left:8px}
.wrap{width:100%;max-width:1304px;margin:0 auto;padding-inline:24px}
@media (min-width:768px){.wrap{padding-inline:32px}}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px}

/* ---------- type scale (same on every page of this site) ---------- */
h1,h2,h3{font-family:var(--font);font-weight:600;color:var(--navy);text-transform:none;text-wrap:balance}
h1{font-size:40px;line-height:1.1;letter-spacing:-.022em}
h2{font-size:30px;line-height:1.12;letter-spacing:-.018em}
h3{font-size:24px;line-height:1.2;letter-spacing:-.012em}
@media (min-width:768px){h1{font-size:52px}h2{font-size:42px}}
@media (min-width:1025px){h1{font-size:56px}h2{font-size:44px}}
.h-lede{font-size:18px;line-height:1.45;color:var(--mute)}
@media (min-width:768px){.h-lede{font-size:21px}}
@media (min-width:1025px){.h-lede{font-size:24px;line-height:1.35}}

/* ---------- buttons (Guideline: 56px tall, 8px radius, 18px / 600) ---------- */
.h-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:15px 26px;border-radius:8px;font:600 18px/26px var(--font);letter-spacing:-.004em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .1s var(--ease),background-color .15s,border-color .15s,color .15s;-webkit-tap-highlight-color:transparent}
.h-btn:active{transform:scale(.97)}
.h-btn--red{background:var(--red);color:#fff}
.h-btn--ghost{background:#fff;color:var(--navy);border-color:var(--navy)}
.h-btn--white{background:#fff;color:var(--navy);border-color:transparent}
@media (hover:hover) and (pointer:fine){
  .h-btn--red:hover{background:var(--red-h)}
  .h-btn--ghost:hover{background:var(--navy);color:#fff}
  .h-btn--white:hover{background:var(--gold)}
}
.h-link{color:var(--navy);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.h-link:active{opacity:.7}
@media (hover:hover) and (pointer:fine){.h-link:hover{text-decoration-color:var(--red)}}

/* ---------- nav ---------- */
.h-nav{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.92);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid transparent;transition:border-color .2s}
.h-nav.is-stuck{border-bottom-color:var(--line)}
.h-nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.h-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font-weight:600;font-size:17px;line-height:1.1;letter-spacing:-.01em}
.h-brand img{width:38px;height:auto}
.h-brand small{display:block;font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--mute)}
.h-links{display:none;align-items:center;gap:6px}
.h-links a{padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:500;font-size:16px;color:var(--navy)}
.h-links a:active{opacity:.7}
.h-links .h-btn{min-height:46px;padding:9px 20px;font-size:16px;color:#fff;margin-left:8px}
@media (hover:hover) and (pointer:fine){.h-links a:not(.h-btn):hover{background:rgba(2,26,62,.06)}}
.h-menu{position:relative}
.h-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:1px solid var(--navy);border-radius:8px;font-weight:600;font-size:16px;color:var(--navy);background:#fff}
.h-menu summary::-webkit-details-marker{display:none}
.h-menu summary:active{opacity:.7}
.h-menu-panel{position:absolute;right:0;top:56px;min-width:260px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 12px 40px rgba(2,26,62,.14)}
.h-menu-panel a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:8px;text-decoration:none;font-weight:500;color:var(--navy)}
.h-menu-panel a:active{background:var(--soft)}
.h-menu-panel .h-btn{margin-top:6px;color:#fff;justify-content:center}
@media (min-width:900px){.h-links{display:flex}.h-menu{display:none}}

/* ---------- sections ---------- */
main>section{padding-block:48px}
@media (min-width:768px){main>section{padding-block:64px}}
@media (min-width:1025px){main>section{padding-block:68px}}
.h-head{text-align:center;max-width:760px;margin:0 auto 32px}
.h-head h2+p{margin-top:12px;font-size:18px;line-height:1.45;color:var(--mute)}
@media (min-width:1025px){.h-head{margin-bottom:44px}.h-head h2+p{font-size:20px}}
.h-soft{background:var(--soft)}
.h-cream{background:var(--cream)}

/* ---------- FAQ (Guideline style plus rows) ---------- */
.h-faq{max-width:820px;margin:0 auto}
.h-faq details{border-bottom:1px solid var(--line)}
.h-faq details:first-child{border-top:1px solid var(--line)}
.h-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px 4px;font-size:18px;font-weight:600;color:var(--navy);line-height:1.3}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary:active{opacity:.7}
.h-faq summary::after{content:"+";flex:0 0 32px;height:32px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:22px;font-weight:500;color:var(--navy);line-height:1}
.h-faq details[open] summary::after{content:"\2212";background:var(--gold)}
.h-faq details p{padding:0 48px 22px 4px;font-size:17px;line-height:1.55;color:var(--ink)}

/* ---------- closing band (Notion) + footer ---------- */
.h-close{background:var(--soft);text-align:center}
main>section.h-close{padding-block:64px}
@media (min-width:768px){main>section.h-close{padding-block:96px}}
.h-close h2{letter-spacing:-.025em}

.h-close p{margin-top:12px;font-size:18px;color:var(--mute)}
.h-close-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px}
.h-close-actions .h-btn{width:100%;max-width:340px}
@media (min-width:768px){.h-close-actions{flex-direction:row;justify-content:center}.h-close-actions .h-btn{width:auto}}
.h-foot{background:#fff;padding:56px 0 28px;font-size:15px}
.h-foot-grid{display:grid;gap:32px;grid-template-columns:1fr 1fr}
@media (min-width:900px){.h-foot-grid{grid-template-columns:1.4fr repeat(4,1fr)}}
.h-foot-brand{grid-column:1/-1}
@media (min-width:900px){.h-foot-brand{grid-column:auto}}
.h-foot-brand p{margin-top:12px;color:var(--mute);max-width:280px;line-height:1.45}
.h-foot-title{font-size:13px;font-weight:600;letter-spacing:0;color:var(--mute);margin-bottom:12px}
.h-foot ul{display:grid;gap:2px}
.h-foot li a{display:inline-flex;min-height:44px;align-items:center;text-decoration:none;color:var(--navy);font-weight:500}
@media (hover:hover) and (pointer:fine){.h-foot li a:hover{text-decoration:underline}}
.h-foot-base{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--mute);font-size:14px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.h-foot-base a{color:var(--mute)}

/* ---------- reveal (enhancement only; content is visible without JS) ---------- */
/* 10/14: content is ALWAYS visible (a missed fade-in left whole sections blank for Mike). Only a small slide-up remains. */
.js .rv{opacity:1;transform:translateY(10px);transition:transform .5s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.h-btn,.h-phone a{transition:none}}

/* ---------- hero base + pill + promise note (shared by every page; the phone peek stays in home.css) ---------- */
.h-hero{background:var(--cream);padding:40px 0 0;text-align:center}
@media (min-width:768px){.h-hero{padding-top:56px}}
@media (min-width:1025px){.h-hero{padding-top:64px}}
.h-pill{display:inline-block;background:var(--gold-soft);color:var(--navy);font-weight:600;font-size:15px;line-height:1;padding:9px 16px;border-radius:99px}
.h-hero h1{max-width:900px;margin:22px auto 0;text-wrap:balance}
.h-hero .h-lede{max-width:792px;margin:18px auto 0;text-wrap:pretty}
.h-hero-actions{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:30px}
.h-hero-actions .h-btn{width:100%;max-width:360px}
@media (min-width:768px){.h-hero-actions{margin-top:36px}.h-hero-actions .h-btn{width:auto}}
.h-hero-note{font-size:17px;color:var(--mute)}

.h-promise{max-width:1040px;margin:26px auto 0;background:var(--gold-soft);border-radius:14px;padding:20px 22px;display:grid;gap:6px}
@media (min-width:768px){.h-promise{grid-template-columns:auto 1fr;gap:6px 28px;align-items:center;padding:24px 28px}}
.h-promise h3{font-size:24px}
.h-promise p{font-size:16px;line-height:1.5;color:var(--ink)}
/* current page in the header */
.h-links a[aria-current="page"]:not(.h-btn){color:var(--red)}
.h-menu-panel a[aria-current="page"]{color:var(--red);background:var(--soft)}

/* =====================================================================
   CHARACTER PASS (Oct 14 2026, Mike: "more pizzazz, more on-brand character, some color")
   Same devices the Relentless client sites use, skinned in Class Alpha colors:
   accent eyebrow over each title, a short two-tone bar under it, a two-tone brand bar
   at the seams, gold/red accents. Shared here so every page of the site matches.
   ===================================================================== */
/* Google rating badge (a real link to the Google listing). Same artwork as before, navy ink. */
.rbadges{display:flex;justify-content:center;max-width:196px;margin:22px auto 0;padding:0}
.rbadges__item{display:block;width:100%;max-width:193px;line-height:0;color:var(--navy)}
.rbadge{display:block;width:100%;height:auto;aspect-ratio:193/60;color:var(--navy)}
.rbadge text{fill:currentColor;font-family:var(--font);font-weight:700;letter-spacing:normal}

.h-eyebrow{font-size:15px;line-height:1.2;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red-d);margin-bottom:12px}
.h-head h2::after,.h-map-copy h2::after,.h-mike-copy h2::after,.h-close h2::after{content:"";display:block;width:72px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--red) 50%,var(--gold) 50%);margin:18px 0 0}
.h-head h2::after,.h-close h2::after{margin-inline:auto}
.h-head h2+p{margin-top:16px}
.h-close p{margin-top:16px}
.h-btn--red{box-shadow:0 6px 16px rgba(224,25,51,.28)}
.h-nav::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,var(--red) 50%,var(--gold) 50%);pointer-events:none}
.h-foot{border-top:5px solid transparent;border-image:linear-gradient(90deg,var(--red) 50%,var(--gold) 50%) 1}
.h-hero{background-color:var(--cream);background-image:radial-gradient(560px 340px at 6% 0%,rgba(224,25,51,.07),transparent 70%),radial-gradient(620px 360px at 95% 4%,rgba(251,188,4,.18),transparent 70%)}
.h-pill{background:var(--gold-soft);box-shadow:inset 0 0 0 1.5px rgba(251,188,4,.7)}
.h-menu summary{border-color:var(--red);color:var(--navy)}
.h-close .h-eyebrow{margin:0 0 12px;font-size:15px;color:var(--red-d)}