/*
Theme Name: 1440 Shop Base
Theme URI: https://1440core.com
Description: 1440 Core base child theme for GeneratePress — the design system + reusable polished components for shop/client sites. Lightweight, fast, modern CSS (flexbox/grid/custom-props), no page-builder bloat.
Author: 1440 Core
Template: generatepress
Version: 0.6.1
*/

/* ===================== DESIGN TOKENS =====================
   Neutral base palette — rebrand a client by swapping brand/ink/cta (+ fonts). */
:root{
  /* color */
  --brand:#3B82C4; --brand-dark:#2C6397; --brand-soft:#E7F1FA;
  --ink:#23282F; --ink-700:#343A41; --ink-600:#4A525B;
  --muted:#6B7A8D; --line:#E3E9F0; --white:#FFFFFF;
  --bg-soft:#F5F8FC; --bg-soft2:#EEF3F9;
  --cta:#1DA64F; --cta-dark:#15863F; --success:#16A34A; --star:#FFB020;
  --cta-glow:29,166,79;              /* CTA shadow/glow color (RGB triplet) — rebrand via skin */
  --brand-glow:59,130,196;           /* brand shadow/glow color (RGB triplet of --brand) — rebrand via skin */
  --on-dark:rgba(255,255,255,.75);   /* muted body text on .section-dark bands (works in any skin) */

  /* type */
  --font-heading:"Plus Jakarta Sans",sans-serif; --font-body:"Inter",sans-serif;

  /* radius */
  --radius:16px; --radius-sm:11px; --radius-xs:8px; --radius-pill:999px;

  /* elevation (from the agreed mockup) */
  --shadow-sm:0 2px 8px rgba(12,35,64,.06);
  --shadow:0 10px 30px rgba(12,35,64,.10);
  --shadow-lg:0 24px 60px rgba(12,35,64,.18);
  --shadow-cta:0 8px 20px rgba(var(--cta-glow),.32);

  /* motion */
  --dur:.18s; --ease:cubic-bezier(.2,.7,.3,1);

  /* layout — Robert's numbers: 1900 max, 5% desktop / 2% tablet-mobile side padding */
  --maxw:1900px; --pad-x:5%; --gap:24px; --section-y:75px;
}
@media (max-width:1024px){ :root{ --pad-x:2%; } }
@media (max-width:767px){ :root{ --pad-x:max(16px,2%); } } /* floor so phone text isn't cramped */

/* ===================== BASE ===================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--ink);line-height:1.12;letter-spacing:-.02em;margin:0 0 .4em;}
h1{font-size:clamp(1.9rem,1.1rem + 2.6vw,2.8rem);font-weight:800;line-height:1.08;}
h2{font-size:clamp(1.45rem,1rem + 1.6vw,1.95rem);font-weight:700;line-height:1.14;}
h3{font-size:clamp(1.1rem,1rem + .4vw,1.25rem);font-weight:700;}
a{color:var(--brand);text-decoration:none;transition:color var(--dur) var(--ease);}
a:hover{color:var(--brand-dark);}
img{max-width:100%;height:auto;}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px;}

/* ===================== LAYOUT ===================== */
.container-1440{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);}
.section-wrapper{position:relative;width:100%;}
.section{position:relative;width:100%;padding-top:75px;padding-bottom:75px;} /* composed default = .section-wrapper + .padding-75-tb */
.section-dark{background:var(--ink);color:var(--on-dark);}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:#fff;}
.section-dark p,.section-dark .lead{color:var(--on-dark);}
.section-soft{background:var(--bg-soft);}
.stack{display:flex;flex-direction:column;}
.row{display:flex;flex-direction:row;}
.center{align-items:center;justify-content:center;}
.wrap{flex-wrap:wrap;}
.text-center{text-align:center;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);}
@media (max-width:1024px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:767px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

/* split hero/about, media, service icons, lists */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:stretch;}
@media (max-width:860px){ .split-grid{grid-template-columns:1fr;align-items:center;} }
.media-img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg);display:block;object-fit:cover;}
/* split-grid media fills the full content height (top padding -> bottom padding) */
.hero-media,.why-media{position:relative;}
.hero-media .media-img,.why-media .media-img{height:100%;}
@media (max-width:860px){ .hero-media .media-img,.why-media .media-img{height:auto;aspect-ratio:16/10;} }
.icon-badge{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:14px;background:var(--brand-soft);color:var(--brand);}
.icon-badge svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.trust-row{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;}
.check-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px;}
.check-list li{display:flex;gap:11px;align-items:flex-start;color:var(--ink);}
/* Green check drawn in CSS (masked SVG) so list items stay plain, editable text — no inline markup. */
.check-list li::before{content:"";flex:0 0 auto;width:22px;height:22px;margin-top:2px;background-color:var(--cta);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;}
/* legacy: style an inline svg if any list item still carries one, and suppress the ::before check there so it never doubles */
.check-list svg{flex:0 0 auto;width:22px;height:22px;stroke:var(--cta);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;}
.check-list li:has(> svg)::before{display:none;}
.stat-badge{display:inline-flex;align-items:center;gap:12px;}
.stat-badge .num{font-family:var(--font-heading);font-weight:800;font-size:1.7rem;color:var(--cta);line-height:1;}

/* ===================== TYPE ACCENTS ===================== */
.eyebrow{font-family:var(--font-heading);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);}
.lead{font-family:var(--font-body);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.7;color:var(--muted);}
.badge-pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-heading);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);padding:7px 14px;border-radius:var(--radius-pill);}

/* ===================== CARD ===================== */
.card{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.card .arrow{margin-top:auto;display:inline-flex;align-items:center;gap:.4em;color:var(--brand);font-family:var(--font-heading);font-weight:600;font-size:.9rem;transition:gap var(--dur) var(--ease),color var(--dur) var(--ease);}
.card:hover .arrow{gap:.7em;color:var(--brand-dark);}

/* ===================== BUTTONS ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-heading);font-weight:700;font-size:1rem;line-height:1;padding:.9em 1.5em;border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--cta);color:var(--white);box-shadow:var(--shadow-cta);}
.btn-primary:hover{background:var(--cta-dark);color:var(--white);box-shadow:0 12px 26px rgba(var(--cta-glow),.40);}
.btn-secondary{background:var(--brand);color:var(--white);box-shadow:0 8px 20px rgba(var(--brand-glow),.30);}
.btn-secondary:hover{background:var(--brand-dark);color:var(--white);}
.btn-outline{background:var(--white);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm);}
.btn-outline:hover{border-color:var(--brand);color:var(--brand);}
.btn-light{background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm);}
.btn-light:hover{background:var(--bg-soft);}
.btn-ghost{background:rgba(255,255,255,.10);color:var(--white);border-color:rgba(255,255,255,.30);}
.btn-ghost:hover{background:rgba(255,255,255,.18);color:var(--white);}
.btn-lg{font-size:1.08rem;padding:1.05em 1.8em;}

/* ===================== GLASS (Robert's signature header/footer) ===================== */
.glass{background:rgba(255,255,255,.80);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.glass-dark{background:rgba(35,40,47,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.sticky-top{position:sticky;top:0;z-index:100;}

/* ===================== HEADER (collapsing top bar + sticky nav) ===================== */
#site-chrome{position:sticky;top:0;z-index:300;}
.site-topbar{background:var(--ink);color:rgba(255,255,255,.72);font-size:.82rem;overflow:hidden;max-height:46px;transition:max-height .32s var(--ease),opacity .25s var(--ease);}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:40px;}
.tb-left,.tb-right{display:flex;align-items:center;gap:22px;}
.tb-item{display:inline-flex;align-items:center;gap:7px;}
.tb-item svg{width:15px;height:15px;stroke:var(--brand);fill:none;stroke-width:2;opacity:.9;}
.main-bar{background:rgba(255,255,255,.90);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .25s var(--ease);}
.mainbar-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-heading);font-weight:800;font-size:1.35rem;color:var(--ink);text-decoration:none;}
.brand-mark{flex:0 0 auto;width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--ink));display:grid;place-items:center;color:#fff;box-shadow:0 6px 16px rgba(var(--brand-glow),.35);}
.brand-mark svg{width:23px;height:23px;}
.brand-name{display:flex;flex-direction:column;line-height:1.05;}
.brand-name .hl{color:var(--brand);}
.brand-name small{font-family:var(--font-body);font-weight:500;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:-2px;}
.brand-name--plain{flex-direction:row;font-size:1.15rem;}
/* Per-client custom logo (replaces the text brand when set) */
.brand--logo{display:flex;align-items:center;}
.brand--logo .custom-logo-link{display:block;line-height:0;}
.brand--logo img,.brand--logo .custom-logo{height:52px;width:auto;max-width:240px;display:block;}
@media(max-width:860px){ .brand--logo img,.brand--logo .custom-logo{height:44px;} }
.main-nav .nav-list{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;}
.main-nav a{font-family:var(--font-heading);font-weight:600;font-size:.98rem;color:var(--ink-700);text-decoration:none;transition:color var(--dur) var(--ease);}
.main-nav a:hover{color:var(--brand);}
/* Services dropdown (auto-populated from the services CPT) */
.main-nav .has-sub{position:relative;}
.main-nav .has-sub>a{display:inline-flex;align-items:center;}
.sub-caret{width:.46em;height:.46em;margin-left:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--dur) var(--ease);}
.main-nav .nav-sub{position:absolute;top:100%;left:50%;margin-top:12px;background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:14px;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(max-content,1fr));gap:2px 20px;min-width:640px;max-width:calc(100vw - 32px);opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur);z-index:120;}
.main-nav .nav-sub::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px;}
.main-nav .has-sub:hover .nav-sub,.main-nav .has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s;}
.main-nav .has-sub:hover .sub-caret,.main-nav .has-sub:focus-within .sub-caret{transform:rotate(-135deg) translateY(2px);}
.main-nav .nav-sub li{margin:0;}
.main-nav .nav-sub a{display:block;padding:9px 12px;border-radius:9px;font-size:.9rem;font-weight:500;color:var(--ink-700);line-height:1.25;white-space:nowrap;}
.main-nav .nav-sub a:hover{background:var(--bg-soft);color:var(--brand);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-phone{font-family:var(--font-heading);font-weight:800;color:var(--ink);font-size:1.1rem;display:flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;}
.nav-phone svg{width:18px;height:18px;stroke:var(--cta);fill:none;stroke-width:2;}
.hamb{display:none;align-items:center;gap:7px;background:none;border:0;cursor:pointer;color:var(--ink);padding:4px 6px;font-family:var(--font-heading);font-weight:700;}
.hamb-label{display:none;font-size:1rem;}
/* elements that live ONLY inside the mobile drawer / overlay (hidden on desktop) */
.nav-backdrop,.drawer-head,.drawer-cta,.drawer-phone,.nav-mobile-book{display:none;}
html.nav-locked{overflow:hidden;}
/* collapse on scroll */
html.scrolled .site-topbar{max-height:0;opacity:0;}
html.scrolled .main-bar{box-shadow:0 6px 22px rgba(12,35,64,.09);}
/* responsive header — right-slide off-canvas drawer */
@media (max-width:1000px){
  .site-topbar .tb-right{display:none;}
  .hamb{display:inline-flex;}
  /* backdrop-filter would trap the fixed drawer inside the header bar — drop the glass on mobile */
  .main-bar{position:relative;backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;}
  #site-chrome.nav-open{z-index:500;}
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(14,28,45,.55);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);z-index:390;}
  #site-chrome.nav-open .nav-backdrop{opacity:1;visibility:visible;}
  .main-nav{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);background:var(--ink);box-shadow:-24px 0 60px rgba(0,0,0,.45);transform:translateX(100%);transition:transform .34s var(--ease);z-index:395;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding-top:env(safe-area-inset-top);}
  #site-chrome.nav-open .main-nav{transform:translateX(0);}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad-x);border-bottom:1px solid rgba(255,255,255,.1);}
  .brand--drawer,.brand--drawer .brand-name{color:#fff;}
  .brand--drawer .brand-mark{width:38px;height:38px;}
  .drawer-close{display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border-radius:11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;flex:0 0 auto;transition:background var(--dur) var(--ease);}
  .drawer-close:hover{background:rgba(255,255,255,.22);}
  .drawer-close svg{width:22px;height:22px;}
  .main-nav .nav-list{flex-direction:column;align-items:stretch;gap:0;padding:6px 0;margin:0;}
  .main-nav .nav-list li a{display:block;padding:15px var(--pad-x);color:#fff;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.07);}
  .main-nav .nav-sub,.sub-caret{display:none;} /* drawer: Services → archive (full list w/ images) */
  .main-nav .nav-list li a:hover{color:var(--brand);background:rgba(255,255,255,.04);}
  .drawer-cta{display:flex;flex-direction:column;gap:12px;padding:18px var(--pad-x) calc(26px + env(safe-area-inset-bottom));margin-top:auto;}
  .nav-mobile-book{display:inline-flex;width:100%;}
  .main-nav .drawer-phone{display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#fff;font-family:var(--font-heading);font-weight:800;font-size:1.1rem;text-decoration:none;padding:13px;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-sm);transition:background var(--dur) var(--ease);}
  .main-nav .drawer-phone:hover{background:rgba(255,255,255,.06);color:#fff;}
  .drawer-phone svg{width:19px;height:19px;stroke:var(--cta);}
  .nav-phone span{display:none;}
}
/* phones + small tablets: keep the top bar minimal (logo + Menu); Call/Book/Map live in the bottom bar */
@media (max-width:860px){
  .nav-cta .nav-search-toggle,.nav-cta .nav-phone,.nav-cta > .btn-primary{display:none;}
  .hamb-label{display:inline;}
  .hamb{color:var(--brand);}
}
@media (max-width:600px){ .site-topbar .tb-left{justify-content:center;width:100%;} .site-topbar .tb-left .tb-item:last-child{display:none;} }

/* ===================== FOOTER ===================== */
.site-footer{background:var(--ink);color:rgba(255,255,255,.7);padding-block:clamp(36px,4vw,52px) 0;border-top:1px solid rgba(255,255,255,.09);}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.35fr;gap:clamp(28px,4vw,48px);}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr;} }
.foot-brand .brand{color:#fff;margin-bottom:14px;}
.foot-brand p{color:var(--muted);font-size:.95rem;line-height:1.65;max-width:330px;margin:0;}
.foot-soc{display:flex;gap:12px;margin-top:18px;}
.foot-soc a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);}
.foot-soc a:hover{background:var(--brand);transform:translateY(-2px);}
.foot-soc svg{width:18px;height:18px;}

/* ===================== CONNECT (QR digital business card) ===================== */
.connect-wrap{min-height:60vh;display:flex;justify-content:center;align-items:flex-start;padding:48px var(--pad-x);background:var(--bg-soft);}
.connect-card{width:100%;max-width:460px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 26px;text-align:center;}
.connect-logo img{max-height:72px;width:auto;margin:0 auto 8px;}
.connect-name{font-size:1.55rem;margin:0 0 8px;}
.connect-tagline{color:var(--muted);margin:0 0 22px;}
.connect-save{width:100%;margin-bottom:14px;}
.connect-actions{display:flex;gap:10px;justify-content:center;margin-bottom:22px;}
.connect-actions .btn{flex:1;padding-inline:0;}
.connect-soc{display:flex;gap:14px;justify-content:center;margin:0 0 22px;}
.connect-soc a{width:42px;height:42px;border-radius:50%;background:var(--bg-soft);color:var(--ink-700);display:grid;place-items:center;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);}
.connect-soc a:hover{background:var(--brand);color:#fff;transform:translateY(-2px);}
.connect-soc svg{width:20px;height:20px;}
.connect-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:22px;font-weight:600;}
.connect-nap{border-top:1px solid var(--line);padding-top:16px;color:var(--ink-600);font-size:.95rem;line-height:1.5;}
.connect-nap p{margin:0 0 6px;}
.connect-nap a{color:var(--ink-700);}
.site-footer h4{color:#fff;font-family:var(--font-heading);font-size:.85rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:0 0 14px;}
.foot-col a{display:block;color:var(--muted);font-size:.95rem;padding:5px 0;text-decoration:none;transition:color var(--dur) var(--ease);}
.foot-col a:hover{color:#fff;}
.foot-visit a{line-height:1.5;}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--ink-600);margin-top:clamp(36px,4vw,52px);padding-block:22px;}
.foot-legal{color:var(--muted);font-size:.85rem;}

/* ===================== BREADCRUMBS ===================== */
.crumbs{margin-bottom:4px;}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:3px 4px;list-style:none;margin:0;padding:0;font-family:var(--font-body);font-size:.84rem;}
.crumbs li{display:inline-flex;align-items:center;gap:4px;}
.crumbs a{color:var(--muted);text-decoration:none;transition:color var(--dur) var(--ease);}
.crumbs a:hover{color:var(--brand);}
.crumbs [aria-current="page"]{color:var(--ink-600);font-weight:600;}
.crumbs__sep{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.5;}
.section-dark .crumbs a{color:rgba(255,255,255,.62);}
.section-dark .crumbs a:hover{color:#fff;}
.section-dark .crumbs [aria-current="page"]{color:rgba(255,255,255,.9);}
.section-dark .crumbs__sep{color:rgba(255,255,255,.4);}

/* ===================== SERVICE PAGE (single-services) ===================== */
/* full-bleed: neutralise GP's constrained content wrappers for our own sections */
body.single-services #page.grid-container{max-width:100%;padding:0;margin:0;}
body.single-services #content.site-content{padding:0;}

.svc-hero{overflow:hidden;}
.svc-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:stretch;}
.svc-hero__grid.no-img{grid-template-columns:1fr;max-width:820px;}
@media (max-width:860px){ .svc-hero__grid{grid-template-columns:1fr;align-items:center;} }
/* Homepage hero subhead — a true subheading, not a second H1-weight line */
.hero-sub{font-size:clamp(1.15rem,2.2vw,1.55rem);font-weight:600;line-height:1.3;letter-spacing:-.005em;color:var(--on-dark);}
.hero-sub .text-brand{color:var(--brand);}
.svc-hero h1{color:#fff;margin:0;}
.svc-hero__sub{color:var(--on-dark);max-width:560px;margin:0;}
.svc-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2px;}
.svc-hero__trust{color:var(--muted);font-size:.9rem;gap:8px 20px;margin-top:2px;}
/* service-hero image uses the shared .hero-media fill component (single source) */

.svc-offer{background:var(--brand-soft);border-block:1px solid var(--line);}
.svc-offer__inner{display:flex;align-items:center;gap:20px;padding-block:clamp(20px,2.4vw,30px);}
.svc-offer__badge{flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:#fff;color:var(--cta);display:grid;place-items:center;box-shadow:var(--shadow-sm);}
.svc-offer__badge svg{width:28px;height:28px;}
.svc-offer__text{flex:1 1 auto;}
.svc-offer__text h2{font-size:1.3rem;margin:0 0 2px;}
.svc-offer__text p{margin:0;color:var(--ink-600);}
.svc-offer .btn{flex:0 0 auto;}
@media (max-width:700px){ .svc-offer__inner{flex-direction:column;align-items:flex-start;} .svc-offer .btn{width:100%;} }

.svc-body{max-width:860px;margin-inline:auto;}
.svc-body > * + *{margin-top:1.15em;}
.svc-body .wp-block-image{margin-block:1.9em;}
.svc-body .wp-block-image img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:var(--shadow);}
.svc-body h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:1.7em;}
.svc-body > h2:first-child{margin-top:0;}
.svc-body p{color:var(--ink-600);}
.svc-body p.lead{color:var(--muted);}
.svc-body .check-list{margin-block:1.3em;}
.svc-body .faq1440{margin-top:1.8em;}

.svc-cta .stack{gap:14px;max-width:680px;margin-inline:auto;}
.svc-cta h2{color:#fff;}
.svc-cta .lead{color:var(--on-dark);}
.svc-cta__btns{gap:14px;margin-top:4px;}

/* ===================== ARCHIVES + SEARCH ===================== */
/* full-bleed for our archive/taxonomy/search templates */
body.post-type-archive-services #page.grid-container,
body.post-type-archive-car-care #page.grid-container,
body.tax-car-care-category #page.grid-container,
body.search #page.grid-container{max-width:100%;padding:0;margin:0;}
body.post-type-archive-services #content.site-content,
body.post-type-archive-car-care #content.site-content,
body.tax-car-care-category #content.site-content,
body.search #content.site-content{padding:0;}

.arch-hero h1{color:#fff;margin:0;}

/* Rounded corners ONLY on INSET dark banners (ones that float with side margins), to match the
   site's rounded cards. Full-bleed bands that run edge-to-edge stay square — rounding corners at
   the viewport edge looks wrong. The single-article hero + CTA (cc-hero/cc-cta) are the inset
   dark banners; the archive/topic/service heroes run full-bleed, so they are intentionally left
   square. Solid-color backgrounds clip to the radius without needing overflow. */
.cc-hero,
.cc-cta{border-radius:var(--radius);}

.media-card{padding:0;gap:0;overflow:hidden;}
/* Show the FULL featured image (title ribbon is baked into the artwork) — 100% width, natural
   height, never cropped. Same-template images share a ratio, so card heights stay even. */
.media-card__media{display:block;background:var(--brand-soft);overflow:hidden;}
.media-card__media img{width:100%;height:auto;display:block;}
.media-card__ph{width:100%;aspect-ratio:16/9;display:grid;place-items:center;color:var(--brand);}
.media-card__ph svg{width:46px;height:46px;stroke-width:1.6;}
.media-card__body{display:flex;flex-direction:column;gap:9px;padding:22px 24px 24px;flex:1 1 auto;}
.media-card__body h3{margin:0;color:var(--ink);}
.media-card__body .eyebrow{font-size:.74rem;}
.media-card__body .arrow{margin-top:auto;}
/* auto-fit: empty tracks collapse so a short row's cards stretch to fill the width
   (2 articles share the row 50/50 instead of sitting at 33% with a gap). The min(100%,…)
   floor keeps a single column from overflowing on very narrow screens. Overrides the
   fixed .grid-3 tracks on the archive/topic article grids. */
.arch-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:stretch;}

.arch-pager{margin-top:clamp(28px,3vw,44px);display:flex;justify-content:center;}
.arch-pager .nav-links{display:flex;flex-wrap:wrap;justify-content:center;}
.arch-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;margin:0 3px;border-radius:10px;border:1px solid var(--line);color:var(--ink-700);font-family:var(--font-heading);font-weight:600;text-decoration:none;}
.arch-pager .page-numbers.current{background:var(--brand);color:#fff;border-color:var(--brand);}
.arch-pager a.page-numbers:hover{border-color:var(--brand);color:var(--brand);}

/* header search */
.nav-search-toggle{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border-radius:10px;background:transparent;border:0;cursor:pointer;color:var(--ink-700);transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.nav-search-toggle:hover{background:var(--bg-soft);color:var(--brand);}
.nav-search-toggle svg{width:20px;height:20px;}
.header-search{background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);}
.header-search[hidden]{display:none;}
.header-search form{display:flex;align-items:center;gap:12px;padding-block:16px;}
.header-search__ico{display:inline-grid;place-items:center;color:var(--muted);}
.header-search__ico svg{width:20px;height:20px;}
.header-search input[type=search]{flex:1 1 auto;border:0;background:transparent;font-family:var(--font-body);font-size:1.1rem;color:var(--ink);padding:6px 0;}
.header-search input[type=search]:focus{outline:none;}
.header-search .btn{flex:0 0 auto;}

/* inline search (results page) */
.search-inline{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;max-width:560px;width:100%;}
.search-inline input[type=search]{flex:1 1 220px;padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--line);font-family:var(--font-body);font-size:1rem;background:#fff;color:var(--ink);}

/* search results list */
.search-list{display:flex;flex-direction:column;gap:14px;max-width:900px;margin-inline:auto;}
.search-empty{max-width:900px;margin-inline:auto;}
.search-row{display:flex;align-items:center;gap:18px;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);text-decoration:none;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.search-row:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brand);}
.search-row__tag{flex:0 0 auto;font-family:var(--font-heading);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);padding:6px 11px;border-radius:var(--radius-pill);}
.search-row__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
.search-row__title{font-family:var(--font-heading);font-weight:700;color:var(--ink);}
.search-row__ex{color:var(--muted);font-size:.92rem;}
.search-row .arrow{flex:0 0 auto;color:var(--brand);font-weight:700;transition:transform var(--dur) var(--ease);}
.search-row:hover .arrow{transform:translateX(4px);}
@media (max-width:560px){ .search-row__ex{display:none;} }

/* ========================================================================
   UTILITY LIBRARY — single-purpose, stackable. Compose on any element.
   ======================================================================== */
/* vertical section padding scale (top + bottom) */
.padding-0-tb{padding-top:0;padding-bottom:0;}
.padding-25-tb{padding-top:25px;padding-bottom:25px;}
.padding-40-tb{padding-top:40px;padding-bottom:40px;}
.padding-50-tb{padding-top:50px;padding-bottom:50px;}
.padding-75-tb{padding-top:75px;padding-bottom:75px;}
.padding-100-tb{padding-top:100px;padding-bottom:100px;}
.padding-0-t{padding-top:0;}.padding-0-b{padding-bottom:0;}
.padding-25-t{padding-top:25px;}.padding-25-b{padding-bottom:25px;}
.padding-50-t{padding-top:50px;}.padding-50-b{padding-bottom:50px;}
.padding-75-t{padding-top:75px;}.padding-75-b{padding-bottom:75px;}
.padding-100-t{padding-top:100px;}.padding-100-b{padding-bottom:100px;}

/* object-fit image framing — where the crop focuses */
.object-center{object-position:center center;}
.object-top{object-position:center top;}
.object-bottom{object-position:center bottom;}
.object-left{object-position:left center;}
.object-right{object-position:right center;}
.object-top-left{object-position:left top;}
.object-top-right{object-position:right top;}
.object-bottom-left{object-position:left bottom;}
.object-bottom-right{object-position:right bottom;}

/* gap scale (for .stack / .row / grids) */
.gap-6{gap:6px;}.gap-8{gap:8px;}.gap-10{gap:10px;}.gap-12{gap:12px;}.gap-14{gap:14px;}.gap-16{gap:16px;}.gap-20{gap:20px;}.gap-24{gap:24px;}.gap-32{gap:32px;}.gap-40{gap:40px;}.gap-48{gap:48px;}

/* margin + alignment helpers */
.mx-auto{margin-inline:auto;}
.m-0{margin:0;}
.mt-6{margin-top:6px;}.mt-8{margin-top:8px;}.mt-10{margin-top:10px;}.mt-12{margin-top:12px;}.mt-16{margin-top:16px;}
/* flexbox control set (Elementor-style, stackable) */
.flex{display:flex;}
.flex-col{display:flex;flex-direction:column;}
.flex-row{display:flex;flex-direction:row;}
.flex-col-reverse{display:flex;flex-direction:column-reverse;}
.flex-row-reverse{display:flex;flex-direction:row-reverse;}
.items-start{align-items:flex-start;}
.items-center{align-items:center;}
.items-end{align-items:flex-end;}
.items-stretch{align-items:stretch;}
.items-baseline{align-items:baseline;}
.justify-start{justify-content:flex-start;}
.justify-center{justify-content:center;}
.justify-end{justify-content:flex-end;}
.justify-between{justify-content:space-between;}
.justify-around{justify-content:space-around;}
.justify-evenly{justify-content:space-evenly;}
.nowrap{flex-wrap:nowrap;}

/* content measure (max readable width — pair with .mx-auto) */
.measure-sm{max-width:540px;}
.measure{max-width:640px;}
.measure-lg{max-width:720px;}

/* text color + size utilities */
.text-white{color:#fff;}
.text-light{color:var(--on-dark);}
.text-muted{color:var(--muted);}
.text-ink{color:var(--ink);}
.text-brand{color:var(--brand);}
.fs-sm{font-size:.9rem;}
.fs-xs{font-size:.85rem;}
.lh-tight{line-height:1.3;}
.clip{overflow:hidden;}

/* ========================================================================
   COMPONENTS — reusable blocks, composed from the utilities above.
   ======================================================================== */
/* centered section intro: eyebrow + heading + lead */
.section-head{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:640px;margin-inline:auto;text-align:center;}
/* floating rating/stat badge over a media image */
.media-badge{position:absolute;left:-14px;bottom:-16px;padding:14px 18px;border-radius:14px;box-shadow:var(--shadow-lg);}
/* numbered process-step badge (sits in an .icon-badge box) */
.step-num{font-family:var(--font-heading);font-weight:800;font-size:1.3rem;}
/* dark closing CTA band inner */
.cta-band{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:660px;margin-inline:auto;text-align:center;}
/* pill variant for dark backgrounds */
.badge-pill.on-dark{color:#fff;background:rgba(255,255,255,.08);}

/* ========================================================================
   FRAMEWORK OVERRIDES — we control GP / GenerateBlocks / WP-core defaults.
   (Child CSS loads after GP's inline CSS, so equal-specificity rules win.)
   ======================================================================== */
/* GenerateBlocks container width = our max width (was --gb-container-width:1200px) */
:root{--gb-container-width:1900px;}

/* body background owned by us (was GP --base-2 #f7f8f9) */
body{background:var(--white);}

/* Gutenberg / block buttons adopt our CTA styling (kills GP #55555e + WP #32373c greys).
   Matches GP's own selector specificity so our rule wins by load order. */
a.wp-block-button__link:not(.has-background),
.wp-block-button__link,
.wp-element-button{
  background-color:var(--cta);color:#fff;border:0;border-radius:var(--radius-sm);
  padding:.9em 1.5em;font-family:var(--font-heading);font-weight:700;box-shadow:var(--shadow-cta);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
a.wp-block-button__link:not(.has-background):hover,
.wp-block-button__link:hover,.wp-element-button:hover{background-color:var(--cta-dark);color:#fff;transform:translateY(-2px);}

/* links never force-underlined by GP's underline_links default (we style links ourselves) */
.entry-content a,.svc-body a{text-decoration:none;}
.entry-content a:hover,.svc-body a:hover{text-decoration:underline;}

/* ========================================================================
   RESPONSIVE REFINEMENTS (2026-10-05) — mobile/tablet polish (base template).
   ======================================================================== */
body{overflow-x:clip;}   /* no horizontal scroll on phones */
p:empty{display:none;}   /* wpautop can inject stray empty <p> — never render them */
.split-grid > *:empty{display:none;}

/* Tablet + mobile (stacked): the media/image column ALWAYS leads the text in every split section */
@media (max-width:860px){
  .split-grid .hero-media,.split-grid .why-media,.svc-hero__grid .hero-media{order:-1;}
  .media-badge{left:12px;bottom:12px;}
  .split-grid .stack,.svc-hero__grid .stack{gap:14px;}   /* tighten the vertical rhythm on phones */
}

/* ===================== MOBILE STICKY ACTION BAR (Call / Book / Map) ===================== */
.mobile-actionbar{display:none;}
@media (max-width:860px){
  .mobile-actionbar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;position:fixed;left:0;right:0;bottom:0;z-index:360;
    padding:9px max(12px,env(safe-area-inset-left)) calc(9px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-right));
    background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(12,35,64,.12);}
  .mab-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px;border-radius:12px;
    font-family:var(--font-heading);font-weight:700;font-size:.8rem;line-height:1;text-decoration:none;transition:transform var(--dur) var(--ease);}
  .mab-btn:active{transform:translateY(1px);}
  .mab-btn svg{width:21px;height:21px;}
  .mab-call,.mab-map{background:var(--brand-soft);color:var(--brand-dark);}
  .mab-book{background:var(--cta);color:#fff;box-shadow:var(--shadow-cta);}
  body{padding-bottom:74px;}            /* clear the fixed bar so it never covers the footer */
  html.nav-locked .mobile-actionbar{display:none;}  /* hide it while the drawer is open */
}

/* ===================== 1440 LEADS FORM ===================== */
.lead-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,3vw,30px);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;}
.lead-form__title{margin:0 0 2px;}
.lead-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.lead-field{display:flex;flex-direction:column;gap:6px;}
.lead-field>span{font-size:.82rem;font-weight:600;color:var(--ink-700);}
.lead-field input,.lead-field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:.98rem;background:var(--bg-soft);color:var(--ink);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.lead-field input:focus,.lead-field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-glow),.16);background:#fff;}
.lead-form .btn{align-self:flex-start;margin-top:4px;}
.lead-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.lead-form__note{border-radius:var(--radius-sm);padding:11px 14px;font-weight:600;font-size:.92rem;margin:0;}
.lead-form__note--ok{background:rgba(var(--cta-glow),.12);color:var(--cta-dark);border:1px solid rgba(var(--cta-glow),.3);}
.lead-form__note--err{background:rgba(220,60,60,.1);color:#b42318;border:1px solid rgba(220,60,60,.3);}
@media(max-width:560px){ .lead-form__row{grid-template-columns:1fr;} }

/* ===================== ABOUT + CONTACT PAGE ===================== */
.about-story :where(h2,h3){margin-top:1.4em;margin-bottom:.4em;}
.about-story p{margin:0 0 1.1em;font-size:1.06rem;}
.about-story p.lead{font-size:1.2rem;color:var(--ink);}
.visit-grid{align-items:start;gap:40px;}
.visit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;}
.visit-list li{display:flex;flex-direction:column;gap:3px;}
.visit-list strong{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-family:var(--font-heading);}
.visit-list a,.visit-list span{font-size:1.12rem;color:var(--ink);text-decoration:none;font-weight:600;line-height:1.35;}
.visit-list a:hover{color:var(--brand);}
.visit-map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);}
.visit-map iframe{display:block;width:100%;height:320px;border:0;}

/* ===================== SPECIALS ===================== */
.specials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;}
.special-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.special-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.special-card h3{margin:0;}
.special-save{display:inline-block;align-self:flex-start;background:var(--cta);color:#fff;font-family:var(--font-heading);font-weight:800;font-size:1.05rem;letter-spacing:.02em;padding:5px 14px;border-radius:999px;margin:0;}
.special-exp{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 4px;}
.special-card>p:not(.special-save):not(.special-exp){color:var(--ink-700);margin:0 0 4px;}
.special-card .btn{align-self:flex-start;margin-top:auto;}
.specials-fineprint{margin-top:28px;font-size:.82rem;color:var(--muted);text-align:center;}

/* ===================== REVIEWS STRIP ===================== */
.reviews-embed--placeholder{border:2px dashed var(--line);border-radius:var(--radius);padding:40px 24px;text-align:center;color:var(--muted);}
.reviews-embed--placeholder small{opacity:.85;}
/* in-house horizontal-scroll cards (ready for the Trustindex→own swap) */
.reviews-strip{display:flex;gap:20px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory;scrollbar-width:thin;}
.review-card{flex:0 0 min(340px,80vw);scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;}
.review-card .review-stars{color:#f5a623;letter-spacing:2px;font-size:1.05rem;}
.review-card .review-text{color:var(--ink-700);margin:0;}
.review-card .review-author{font-weight:700;font-family:var(--font-heading);margin:0;}

/* ===================== SPECIALS: strip + card media + service band ===================== */
.section-head--row{flex-direction:row;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;max-width:none;margin-inline:0;text-align:left;margin-bottom:30px;}
.section-head--row h2{margin:0;}
.section-head--row>.stack{align-items:flex-start;}
.specials-strip{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.special-card__media{margin:-28px -26px 6px;overflow:hidden;aspect-ratio:16/9;}
.special-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.special-details{font-size:.95rem;}
.special-code{font-size:.9rem;background:var(--bg-soft);border:1px dashed var(--line);border-radius:var(--radius-sm);padding:7px 12px;margin:2px 0 0;}
.special-card__cta{margin-top:auto;padding-top:8px;}
/* service-page special band (leads; the evergreen offer becomes secondary below it) */
.svc-special{background:linear-gradient(100deg,var(--ink),#2f3a44);border-top:4px solid var(--cta);border-bottom:1px solid rgba(255,255,255,.08);}
.svc-special__inner{display:flex;align-items:center;gap:26px;padding-block:clamp(22px,2.6vw,32px);flex-wrap:wrap;}
.svc-special__save{flex:0 0 auto;background:var(--cta);color:#fff;font-family:var(--font-heading);font-weight:800;font-size:1.5rem;line-height:1;padding:14px 22px;border-radius:14px;box-shadow:0 10px 24px rgba(var(--cta-glow),.35);}
.svc-special__text{flex:1 1 300px;}
.svc-special__text h2{margin:0 0 4px;color:#fff;}
.svc-special__text p{margin:0;color:rgba(255,255,255,.88);}
.svc-special__exp{font-weight:700;color:#fff;}
.svc-special__code{margin-top:8px!important;font-size:.92rem;color:#fff;}
@media(max-width:720px){ .svc-special__inner{gap:16px;} .svc-special__save{font-size:1.25rem;padding:10px 16px;} }

/* ===================== FLOATING BOOK BUTTON (desktop) ===================== */
.float-book{position:fixed;right:24px;bottom:24px;z-index:380;display:inline-flex;align-items:center;gap:9px;background:var(--cta);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:1rem;padding:14px 22px;border-radius:999px;box-shadow:0 12px 30px rgba(var(--cta-glow),.45);text-decoration:none;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.float-book:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(var(--cta-glow),.55);color:#fff;}
.float-book svg{width:19px;height:19px;flex:0 0 auto;}
@media(max-width:860px){ .float-book{display:none;} } /* mobile uses the sticky Call·Book·Map bar */

/* ===================== CAR CARE CATEGORY RAIL ===================== */
/* Right-hand topic column on desktop (plain always-open nav); a zero-JS <details>
   dropdown at the top on mobile. One shared list. Used by the Car Care archive,
   single articles, and the topic (taxonomy) pages. */
.cc-layout{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:start;}
.cc-layout__main{min-width:0;}
.cc-layout--article{max-width:1200px;margin-inline:auto;}
@media (min-width:861px){
  .cc-layout{grid-template-columns:minmax(0,1fr) 240px;}
  .cc-layout > .cat-rail{grid-column:2;grid-row:1;position:sticky;top:96px;}
  .cc-layout > .cc-layout__main{grid-column:1;grid-row:1;}
}
/* shared list */
.cat-list{list-style:none;margin:0;padding:0;}
.cat-list li{margin:0;}
.cat-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:var(--radius-xs);color:var(--ink-600);text-decoration:none;font-size:.95rem;line-height:1.3;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.cat-list a:hover{background:var(--bg-soft);color:var(--ink);}
.cat-list a.is-current{background:var(--brand);color:#fff;font-weight:600;}
.cat-list a .cnt{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;}
.cat-list a:hover .cnt{color:var(--ink-600);}
.cat-list a.is-current .cnt{color:rgba(255,255,255,.82);}
.cat-nav__h{font-family:var(--font-heading);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 10px 8px;}
/* mobile: collapsible dropdown */
.cat-dd{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white);overflow:hidden;}
.cat-dd > summary{list-style:none;cursor:pointer;padding:13px 16px;font-family:var(--font-heading);font-weight:700;font-size:.95rem;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.cat-dd > summary::-webkit-details-marker{display:none;}
.cat-dd > summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform var(--dur) var(--ease);margin-right:4px;}
.cat-dd[open] > summary::after{transform:rotate(-135deg);}
.cat-dd .cat-nav{padding:6px;border-top:1px solid var(--line);}
/* desktop: always-open column, mobile dropdown hidden */
.cat-nav--desk{display:none;}
@media (min-width:861px){
  .cat-dd{display:none;}
  .cat-nav--desk{display:block;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow-sm);}
}

/* ===================== MOTION SAFETY ===================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .btn:hover,.card:hover{transform:none;}
}