/*
Theme Name: Pablos Performance
Theme URI: https://pablosperformance.com
Author: Pablos Performance
Description: Block theme for Pablos Performance mobile mechanic — Phoenix, AZ. Navy/amber design system, sticky header, scroll-zoom service-area map, fleet block, service price menu.
Version: 6.1.1
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: pablos
*/

/* ============================================================
   PABLOS PERFORMANCE v6 — Design System
   Changes from v5.1:
   - the animated navy→amber gradient no longer runs on every
     heading; it appears once, static, on the hero h1 only
   - one radius scale, one shadow scale, one motion curve
   - cards share a single hover contract: amber border,
     amber icon, 3px lift
   - new: service price chips, fleet block, service price menu,
     scroll-zoom service-area map panel, hero van
   Zero !important except the reduced-motion reset.
   ============================================================ */

:root{
  --bg:#fbfaf8;
  --card:#ffffff;
  --ink:#122437;
  --navy:#16324a;
  --navy-deep:#0f2438;
  --navy-line:#24405a;
  --amber:#e89c0c;
  --amber-hi:#f4b34d;
  --amber-ink:#231a05;
  --amber-soft:#fdf3dd;
  --amber-text:#b7780a;
  --line:#e7e3da;
  --muted:#5b6b79;
  --muted-dark:#93a8bb;
  --r-sm:10px;
  --r:14px;
  --r-lg:16px;
  --shadow:0 2px 10px rgba(18,36,55,.05);
  --shadow-lg:0 18px 40px -20px rgba(18,36,55,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-head:"Sora","Work Sans",system-ui,sans-serif;
  --font-body:"Work Sans",system-ui,Arial,sans-serif;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.65;margin:0;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.12;letter-spacing:-.015em;color:var(--navy);margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5.2vw,4rem);font-weight:800;line-height:1.02}
h2{font-size:clamp(1.75rem,3.6vw,2.6rem);font-weight:700}
h3{font-size:1.3rem;font-weight:600}
p{margin:0 0 1em}
a{color:var(--navy);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--amber-text)}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:76px 0}
.center{text-align:center}
.muted{color:var(--muted)}
.kicker{display:block;font-family:var(--font-head);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-text);margin-bottom:.6em}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-body);font-weight:700;font-size:1.05rem;padding:15px 25px;border-radius:var(--r-sm);border:1.5px solid transparent;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease)}
.btn.primary{background:var(--amber);color:var(--amber-ink);box-shadow:0 10px 24px -12px rgba(232,156,12,.9)}
.btn.primary:hover{background:var(--amber-hi);color:var(--amber-ink);transform:translateY(-2px)}
.btn.navy{background:var(--navy);color:#ffd88a}
.btn.navy:hover{background:var(--navy-deep);color:#ffd88a;transform:translateY(-2px)}
.btn.ghost{border-color:currentColor;color:var(--amber-ink);background:transparent}
.btn.ghost:hover{background:var(--amber-ink);color:var(--amber)}
.hero .btn.navy{background:transparent;border-color:#3c5670;color:#eaf0f6}
.hero .btn.navy:hover{background:#17304a;border-color:#5b7a99}

/* ============================================================
   HEADER
   ============================================================ */
.pp-topbar{background:var(--navy-deep);color:#dbe4ec;font-size:.9rem;padding:8px 0}
.pp-topbar .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.pp-topbar a{color:#fff;font-weight:600}
.pp-topbar a:hover{color:var(--amber-hi)}
.pp-topbar .avail{color:var(--muted-dark)}

.pp-header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;transition:box-shadow .3s var(--ease)}
.pp-header.is-scrolled{box-shadow:0 8px 26px -14px rgba(18,36,55,.28)}
.pp-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 24px;flex-wrap:wrap}
/* ---------- Brand: per-letter wordmark ----------
   Each glyph is its own inline-block with its own gradient fill and a stagger
   index (--i, set inline in parts/header.html). No container box — the effect
   is carried entirely by the letters. Renders on every page via the header
   template part, so it stays restrained: hover-driven, nothing looping at idle. */
/* --pdx is the centre-to-centre distance between the two P's, measured at
   runtime by pp-theme.js (it changes with viewport and with which font has
   loaded). Default 0px: if JS never runs, the P's bob in place instead of
   swapping — no broken-looking jump. */
/* Logo treatment: Sora 800 is the heaviest face the theme loads, so weight is
   already maxed — the extra heft comes from size and from pulling the tracking
   in tight, which is what makes a wordmark read as a mark rather than as a
   sentence. Sized in rem so it scales with the root, not the header. */
/* Fluid, because the ceiling is set by how much room the nav leaves — and that
   changes with viewport. Measured against the live header with the compacted
   nav: at 950px the nav wraps above ~1.6rem, at 1024px above 2.1rem, at 1134px
   not until 2.3rem. So the wordmark takes 1.6rem where space is tight and grows
   to 2.1rem where it isn't, instead of one compromise size everywhere.
   Animation amplitudes are in em, so the motion scales with it automatically. */
.pp-brand{--pdx:0px;position:relative;z-index:0;display:inline-flex;align-items:baseline;gap:.34em;font-family:var(--font-head);font-weight:800;font-size:clamp(1.6rem,-.465rem + 3.48vw,2.1rem);letter-spacing:-.035em;color:var(--navy);white-space:nowrap}
.pp-word{display:inline-flex}

/* Ray of light: a hard, narrow shaft raked across the type, not a soft blob
   sitting behind it. Two stacked layers — a tight bright band with an amber
   trailing edge, plus a wide dim bloom that travels with it. Both are moved by
   background-position, so nothing but opacity and background-position animates.
   Timed to fire as blue connects at 12%, so the hit reads as the light. */
.pp-brand::before{content:"";position:absolute;top:-45%;left:-10%;width:120%;height:190%;
  z-index:-1;pointer-events:none;opacity:0;
  /* Amber, not white. The header background is flat #ffffff, so a white core
     renders as nothing at all — the shaft has to be warmer than the paper it
     falls on. Bright centre, deeper amber trailing edge for direction. */
  background:
    linear-gradient(100deg,rgba(244,179,77,0) 43%,rgba(248,200,120,.34) 47%,rgba(232,156,12,.66) 50%,rgba(183,120,10,.46) 53%,rgba(244,179,77,0) 57%),
    radial-gradient(ellipse 26% 130% at 50% 50%,rgba(244,179,77,.24),rgba(244,179,77,0) 70%);
  background-size:300% 100%,300% 100%;
  background-repeat:no-repeat;
  filter:blur(1.5px);
  animation:pp-ray 9s var(--ease) infinite}
@keyframes pp-ray{
  0%,8.5%{opacity:0;background-position:-130% 0,-130% 0}
  10%    {opacity:.85}
  12%    {opacity:1;background-position:40% 0,40% 0}
  17%    {opacity:.7}
  21%    {opacity:0;background-position:230% 0,230% 0}
  22%,100%{opacity:0;background-position:-130% 0,-130% 0}}

/* Baseline origin on every glyph, not just the P's — squash reads as weight
   only if the letter's feet stay planted. */
.pp-ltr{display:inline-block;will-change:transform;transform-origin:50% 100%;
  transition:transform .45s var(--ease),filter .45s var(--ease)}

/* Vertical gradient per glyph — navy deepening downward on "Pablos", amber on
   "Performance". @supports guards the transparent fill: without background-clip
   support, -webkit-text-fill-color:transparent would erase the wordmark. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pp-ltr{
    background-image:linear-gradient(180deg,var(--navy) 0%,var(--navy) 42%,var(--navy-deep) 100%);
    background-size:100% 260%;background-position:0 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    transition:transform .45s var(--ease),background-position .45s var(--ease),filter .45s var(--ease)}
  .pp-word-alt .pp-ltr{
    background-image:linear-gradient(180deg,var(--amber-hi) 0%,var(--amber) 42%,var(--amber-text) 100%)}
}
/* Fallback for the no-background-clip case: flat brand colors, still correct. */
.pp-word-alt .pp-ltr{color:var(--amber)}

/* Hover: a wave travels the wordmark left to right. Each letter lifts, brightens
   and pulls its gradient through itself, 34ms behind the one before it — 17
   letters, so the wave crosses in about 0.55s and the whole run settles by 1.1s. */
.pp-brand:hover .pp-ltr:not(.pp-p),.pp-brand:focus-visible .pp-ltr:not(.pp-p){
  animation:pp-ltr-wave .78s var(--ease) both;
  animation-delay:calc(var(--i) * 34ms)}
@keyframes pp-ltr-wave{
  0%  {transform:translateY(0) scale(1);           background-position:0 0;      filter:none}
  38% {transform:translateY(-6px) scale(1.07);     background-position:0 100%;   filter:drop-shadow(0 6px 10px rgba(18,36,55,.28)) brightness(1.12)}
  70% {transform:translateY(1px) scale(.995);      background-position:0 60%}
  100%{transform:translateY(0) scale(1);           background-position:0 0;      filter:none}}

/* ---------- The P's: kick, knockdown, scuffle, home ----------
   A looping 9s short. transform-origin is the baseline (50% 100%) — that is
   what makes squash-and-stretch read as weight instead of as scaling; the
   glyph's feet stay planted while it compresses and springs.

   Beats (percent of the 9s cycle):
     0-7    blue crouches and launches
     7-10   blue airborne, lands on amber's mark
     10-16  amber is struck, tumbles, ends up flat on its back
     16-28  amber rights itself with an overshoot
     28-41  the scuffle: alternating shoves, each recoiling the other
     41-53  both crouch, hop home, land with a squash
     53-100 rest, holding the wordmark correct and still

   Arc heights are capped by the header — 89px tall around a 35px wordmark —
   so anything taller sends the navy P into the navy topbar where it vanishes.
   Verified by sampling the whole timeline; see _preview/brand.html. */
/* The travelling P passes in FRONT of everything — the other letters (z-index 1)
   and the light ray (z-index -1). Explicit values so the stacking is not left to
   document order. */
.pp-ltr{position:relative;z-index:1}
.pp-p{position:relative;z-index:5;transform-origin:50% 100%}
.pp-p1{animation:pp-p1-story 9s var(--ease) infinite}
.pp-p2{animation:pp-p2-story 9s var(--ease) infinite}

/* BLUE — the aggressor. Winds up before it crouches (anticipation), hits hard
   and fast, then takes its time settling. Attacks sit ~1% apart, recoveries
   ~3%: even spacing is what made v1 read mechanical. */
@keyframes pp-p1-story{
  0%,3%  {transform:translate(0,0) rotate(0deg) scale(1,1)}
  4.2%   {transform:translate(-0.206em,0) rotate(3deg) scale(1.05,.96)}                        /* wind-up, leans AWAY */
  6%     {transform:translate(-0.069em,0) rotate(1deg) scale(1.26,.74)}                        /* crouch */
  7.2%   {transform:translate(calc(var(--pdx) * .14),-0.264em) rotate(-5deg) scale(.86,1.16)}   /* launch */
  9.5%   {transform:translate(calc(var(--pdx) * .55),-0.352em) rotate(-8deg) scale(.92,1.12)}  /* apex — scaleY capped; the stretch is what eats the topbar clearance */
  11.2%  {transform:translate(calc(var(--pdx) * .88),-0.088em) rotate(-3deg) scale(1.04,.99)}  /* dropping, foot out */
  12.2%  {transform:translate(var(--pdx),0) rotate(0deg) scale(1.38,.66)}                  /* CONTACT */
  13.2%  {transform:translate(calc(var(--pdx) + 0.275em),-0.132em) rotate(2deg) scale(.89,1.16)}   /* recoil off its own hit */
  15%    {transform:translate(var(--pdx),0) rotate(0deg) scale(1.02,.99)}
  17%,25%{transform:translate(var(--pdx),0) rotate(0deg) scale(1,1)}
  26.5%  {transform:translate(calc(var(--pdx) + 0.137em),0) rotate(3deg) scale(.99,1.01)}      /* braces — sees amber coming */
  29%    {transform:translate(calc(var(--pdx) + 0.961em),0) rotate(10deg) scale(.92,1.06)}    /* SHOVED */
  30.5%  {transform:translate(calc(var(--pdx) + 0.549em),0) rotate(5deg) scale(1.01,1)}
  32%    {transform:translate(calc(var(--pdx) - 0.412em),0) rotate(-9deg) scale(1.13,.92)}     /* shoves back */
  33.5%  {transform:translate(calc(var(--pdx) + 0.343em),0) rotate(3deg) scale(.97,1.03)}
  35%,37%{transform:translate(calc(var(--pdx) + 0.069em),0) rotate(0deg) scale(1,1)}           /* the glare — a held beat makes the flurry land */
  38.2%  {transform:translate(calc(var(--pdx) - 0.275em),0) rotate(-7deg) scale(1.09,.95)}
  39.2%  {transform:translate(calc(var(--pdx) + 0.481em),0) rotate(6deg) scale(.95,1.04)}
  40.2%  {transform:translate(calc(var(--pdx) - 0.137em),0) rotate(-4deg) scale(1.05,.97)}
  41.5%  {transform:translate(var(--pdx),0) rotate(0deg) scale(1,1)}
  44%    {transform:translate(var(--pdx),0) rotate(0deg) scale(1.24,.76)}                  /* crouch home */
  45.5%  {transform:translate(calc(var(--pdx) * .8),-0.309em) rotate(5deg) scale(.89,1.16)}
  48%    {transform:translate(calc(var(--pdx) * .4),-0.352em) rotate(3deg) scale(.92,1.12)}
  50.5%  {transform:translate(0,0) rotate(0deg) scale(1.34,.70)}                           /* land */
  52%    {transform:translate(0,-0.226em) rotate(0deg) scale(.96,1.06)}
  53.5%  {transform:translate(0,0) rotate(0deg) scale(1.02,.99)}
  55%,100%{transform:translate(0,0) rotate(0deg) scale(1,1)}}

/* AMBER — flinches before the hit lands (it sees it coming), takes the fall,
   tries to get up too early and flops back, then comes back swinging harder. */
@keyframes pp-p2-story{
  0%,9.5%{transform:translate(0,0) rotate(0deg) scale(1,1)}
  10.6%  {transform:translate(-0.137em,0) rotate(-7deg) scale(.97,1.04)}                          /* flinch */
  12.2%  {transform:translate(calc(var(--pdx) * -.24),-0.264em) rotate(-32deg) scale(1.1,.9)}     /* STRUCK */
  13.6%  {transform:translate(calc(var(--pdx) * -.6),-0.352em) rotate(-64deg) scale(1,1)}         /* tumbling */
  15.2%  {transform:translate(calc(var(--pdx) * -.88),0.088em) rotate(-93deg) scale(1.24,.78)}    /* hits the deck */
  16.2%  {transform:translate(calc(var(--pdx) * -.95),-0.044em) rotate(-87deg) scale(.95,1.05)}     /* bounces off it */
  17.5%,20%{transform:translate(calc(var(--pdx) * -.95),0.088em) rotate(-90deg) scale(1,1)}         /* flat out */
  21.5%  {transform:translate(calc(var(--pdx) * -.95),0.088em) rotate(-71deg) scale(1,1)}           /* false start */
  22.6%  {transform:translate(calc(var(--pdx) * -.95),0.088em) rotate(-87deg) scale(1.04,.97)}      /* flops back */
  24.2%  {transform:translate(calc(var(--pdx) * -.95),0.088em) rotate(-54deg) scale(1,1)}           /* up for real */
  25.6%  {transform:translate(calc(var(--pdx) * -.95),0) rotate(-20deg) scale(1,1)}
  27%    {transform:translate(calc(var(--pdx) * -.95),0) rotate(12deg) scale(.92,1.1)}          /* overshoots vertical */
  28.2%  {transform:translate(calc(var(--pdx) * -.95),0) rotate(-3deg) scale(1.03,.98)}
  29%    {transform:translate(calc(var(--pdx) * -1 + 1.03em),0) rotate(12deg) scale(1.15,.91)}  /* SHOVES */
  30.8%  {transform:translate(calc(var(--pdx) * -1 + 0.275em),0) rotate(-3deg) scale(.98,1.02)}
  32%    {transform:translate(calc(var(--pdx) * -1 - 0.343em),0) rotate(-10deg) scale(.93,1.06)}  /* takes one back */
  33.5%  {transform:translate(calc(var(--pdx) * -1 + 0.412em),0) rotate(6deg) scale(1.02,.99)}
  35%,37%{transform:translate(calc(var(--pdx) * -1 + 0.069em),0) rotate(0deg) scale(1,1)}         /* the glare */
  38.2%  {transform:translate(calc(var(--pdx) * -1 + 0.549em),0) rotate(8deg) scale(1.06,.96)}
  39.2%  {transform:translate(calc(var(--pdx) * -1 - 0.206em),0) rotate(-5deg) scale(.96,1.03)}
  40.2%  {transform:translate(calc(var(--pdx) * -1 + 0.343em),0) rotate(4deg) scale(1.03,.98)}
  41.5%  {transform:translate(calc(var(--pdx) * -.95),0) rotate(0deg) scale(1,1)}
  45%    {transform:translate(calc(var(--pdx) * -.95),0) rotate(0deg) scale(1.24,.76)}          /* crouch home */
  46.5%  {transform:translate(calc(var(--pdx) * -.75),-0.309em) rotate(-5deg) scale(.89,1.16)}
  49%    {transform:translate(calc(var(--pdx) * -.35),-0.352em) rotate(-3deg) scale(.92,1.12)}
  51.5%  {transform:translate(0,0) rotate(0deg) scale(1.34,.70)}                              /* land */
  53%    {transform:translate(0,-0.226em) rotate(0deg) scale(.96,1.06)}
  54.5%  {transform:translate(0,0) rotate(0deg) scale(1.02,.99)}
  56%,100%{transform:translate(0,0) rotate(0deg) scale(1,1)}}

/* The wake. The travelling P is moving fast enough to knock the letters it
   passes, so each one gets shoved aside IN THE DIRECTION OF TRAVEL and snaps
   back behind it — not one uniform thud on impact.

   The 70ms-per-letter stagger is what turns a block-move into a ripple: blue
   crosses a-b-l-o-s in roughly 450ms, so at 70ms apart each letter is hit as
   the P actually reaches it. Outbound shoves right (blue, left-to-right);
   the tumble-back shoves left (amber, right-to-left). */
.pp-ltr:not(.pp-p){animation:pp-ltr-wake 9s var(--ease) infinite;animation-delay:calc(var(--i) * 70ms)}
@keyframes pp-ltr-wake{
  0%,7%   {transform:translate(0,0) rotate(0deg) scale(1,1)}
  8.2%    {transform:translate(0.151em,-0.135em) rotate(2.5deg) scale(.97,1.03)}  /* blue blows past */
  9.6%    {transform:translate(-0.055em,0.045em) rotate(-1deg) scale(1.02,.98)}     /* snaps back */
  11%     {transform:translate(0.021em,0) rotate(.3deg) scale(1,1)}
  12.3%   {transform:translate(0,0.147em) rotate(0deg) scale(1.04,.96)}         /* the hit lands */
  13.6%   {transform:translate(-0.137em,-0.114em) rotate(-2deg) scale(.98,1.02)}      /* amber tumbles back through */
  15.2%   {transform:translate(0.048em,0.035em) rotate(.8deg) scale(1.01,.99)}
  16.6%   {transform:translate(-0.021em,0) rotate(0deg) scale(1,1)}
  18%,44% {transform:translate(0,0) rotate(0deg) scale(1,1)}
  46.5%   {transform:translate(-0.124em,-0.114em) rotate(-2deg) scale(.98,1.02)}    /* both hop home through them */
  48.5%   {transform:translate(0.048em,0.035em) rotate(.8deg) scale(1.01,.99)}
  50.5%   {transform:translate(0,0.091em) rotate(0deg) scale(1.02,.98)}
  52%,100%{transform:translate(0,0) rotate(0deg) scale(1,1)}}

.pp-nav{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
/* Tightened to buy horizontal room for the wordmark. min-height stays at 40px:
   that is the tap-target floor, and shrinking it would break thumb accuracy on
   mobile even though the labels would still fit. */
.pp-nav a{padding:8px 7px;color:var(--ink);font-weight:500;font-size:.92rem;border-radius:var(--r-sm);display:inline-flex;align-items:center;min-height:40px;white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease)}
.pp-nav a:hover,.pp-nav a[aria-current="page"]{background:var(--amber-soft);color:var(--navy)}
/* ---------- "Liquid Amber" CTA — the 2026 glass-gleam Book Now button ----------
   Solid amber base with a glassy top-highlight (inset white line) instead of
   a flat fill, plus a diagonal light sweep (::before) that drifts across on
   a slow loop and speeds up on hover, alongside a real color shift to a
   richer amber shade — so hover reads as both a shine AND a shade change,
   not just an animation. z-index keeps the label text above the sweep. */
/* Same treatment, smaller: gradient, pill radius, gleam and shadow all unchanged —
   only the type size, padding and shadow spread are scaled down. */
.pp-nav-cta{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--amber-hi) 0%,var(--amber) 60%,#d68a06 100%);border-radius:999px;font-weight:700;font-size:.8rem;padding:7px 15px;margin-left:6px;box-shadow:0 5px 13px -6px rgba(232,156,12,.8),inset 0 1px 0 rgba(255,255,255,.5);transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .2s var(--ease)}
.pp-nav-cta::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:1;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:skewX(-20deg);animation:pp-gleam 3.2s ease-in-out infinite}
.pp-nav-cta:hover{background:linear-gradient(180deg,#ffcf6b 0%,var(--amber-hi) 60%,var(--amber) 100%);transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(232,156,12,.9),inset 0 1px 0 rgba(255,255,255,.6)}
.pp-nav-cta:hover::before{animation-duration:1.1s}
@keyframes pp-gleam{0%{left:-60%}55%,100%{left:130%}}
/* WP's own global-styles utility class .has-ink-color ships with !important
   (theme.json preset support), and the nav block carries that class — it was
   silently forcing navy text onto this amber "Book Now" pill, making it read
   as inverted/wrong-contrast. Matched with !important here, same exception
   pattern as the .has-*-font-size overrides elsewhere in this file. Also
   pinned to z-index:2 so the label always sits above the gleam sweep. */
.pp-nav-cta a.wp-block-navigation-item__content{position:relative;z-index:2;color:var(--amber-ink) !important}

/* ---------- Header icon buttons (account + cart) — a little TLC ----------
   Matches the existing .pp-nav a:hover treatment (amber-soft pill + lift)
   so the account/cart icons read as part of the same header system instead
   of bare, unstyled default icons. */
.pp-header .wc-block-customer-account__link,
.pp-header .wc-block-mini-cart__button{border-radius:999px;padding:9px;color:var(--navy);transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.pp-header .wc-block-customer-account__link:hover,
.pp-header .wc-block-mini-cart__button:hover{background:var(--amber-soft);color:var(--amber-text);transform:translateY(-1px)}

.pp-finstrip{background:var(--amber-soft);border-bottom:1px solid #f0e2bc;color:#5a4409;font-size:.95rem;text-align:center;padding:10px 24px}
.pp-finstrip a{color:#96650a;text-decoration:underline}

/* ============================================================
   HERO — copy left, animated service van right
   ============================================================ */
.hero{background:var(--navy-deep);color:#eaf0f6;padding:84px 0 76px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:44px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(232,156,12,.12);border:1px solid rgba(232,156,12,.35);color:var(--amber-hi);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
/* the one place the gradient fill survives from v5 — static, hero only */
.hero h1{max-width:16ch;margin:0;background:linear-gradient(96deg,#fff 0%,#ffd88a 55%,var(--amber) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}
.hero .tag{font-size:1.15rem;line-height:1.6;max-width:52ch;color:#adbecd;text-wrap:pretty;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-trust{display:flex;flex-wrap:wrap;gap:14px;color:#8ba0b4;font-size:.9rem}
.hero-quote{margin:6px 0 0;padding-left:18px;border-left:2px solid var(--amber);max-width:52ch;font-size:1.05rem;line-height:1.5;color:var(--muted-dark);font-style:italic}
.hero-quote cite{display:block;margin-top:9px;font-style:normal;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#6f849a}

.pp-van{display:flex;flex-direction:column;align-items:center;gap:12px;animation:pp-drive 1.4s var(--ease) both}
[data-pp-van],[data-pp-tow]{display:block;width:100%}
[data-pp-tow]{max-width:150px;flex:none}
.pp-van svg{width:100%;max-width:470px;height:auto;display:block;animation:pp-bob 2.4s ease-in-out 1.4s infinite}
.pp-van figcaption{font-family:var(--font-head);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:#7b90a5}
.pp-van .pp-wheel{transform-box:fill-box;transform-origin:center;animation:pp-spin 1.1s linear infinite}
.pp-van .pp-road{animation:pp-dash 1.4s linear infinite}
@keyframes pp-drive{from{transform:translateX(150%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes pp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pp-spin{to{transform:rotate(360deg)}}
@keyframes pp-dash{to{stroke-dashoffset:-132}}
@keyframes pp-feed{0%{transform:translateX(0) scale(1);opacity:0}15%{opacity:1}70%{transform:translateX(24px);opacity:1}100%{transform:translateX(30px) scale(.2);opacity:0}}

/* ---------- new-customer offer band ---------- */
.offer{background:var(--navy);border-radius:var(--r);padding:24px 28px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;box-shadow:0 18px 40px -18px rgba(18,36,55,.45);transform:translateY(-30px)}
.offer .tagline{color:#cfdae5;font-size:1.02rem;line-height:1.55;max-width:76ch;margin:0;text-wrap:pretty}
.offer .tagline b{color:var(--amber-hi)}
.offer .tagline b.white{color:#fff}
.offer a.underline{color:#ffd88a;text-decoration:underline}

/* ============================================================
   SERVICE CARDS — one hover contract
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}
.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:13px;color:var(--amber-text);
  transition:border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.scard:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.scard-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.svc-icon{width:46px;height:46px;border-radius:12px;background:var(--amber-soft);display:flex;align-items:center;justify-content:center;color:inherit;transition:color .18s var(--ease)}
.scard h3{font-size:1.35rem;color:var(--navy);margin:0}
.scard p{color:var(--muted);line-height:1.6;flex:1;font-size:1rem;margin:0;text-wrap:pretty}
/* price chip — each service reads as a bookable product */
.price{background:#f6f4ef;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-family:var(--font-head);font-size:.78rem;font-weight:600;color:var(--navy);white-space:nowrap}
.scard .row{display:flex;gap:16px;align-items:center;padding-top:12px;border-top:1px solid #eeebe4}
.scard .row .quote{font-weight:600;color:var(--amber-text)}
.scard .row .more{color:var(--muted)}

/* ---------- fleet block ---------- */
.fleet{margin-top:34px;background:var(--navy);border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:30px;align-items:center;color:#eaf0f6}
.fleet h3{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;color:#fff}
.fleet p{color:#b8c6d3;line-height:1.6;max-width:56ch;text-wrap:pretty}
.fleet .kicker{color:var(--amber-hi)}
.fleet-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px}
.fleet-points div{border-left:2px solid var(--amber);padding-left:12px}
.fleet-points b{display:block;font-family:var(--font-head);font-size:.92rem;font-weight:600;color:#fff}
.fleet-points span{color:var(--muted-dark);font-size:.88rem;line-height:1.45}
.fleet-cta{display:flex;flex-direction:column;gap:13px;background:var(--navy-deep);border-radius:var(--r);padding:26px}
.fleet-cta .lead{color:#fff;font-size:1.08rem;line-height:1.5;font-weight:600;margin:0}
.fleet-cta p{color:var(--muted-dark);font-size:.95rem;margin:0}
.fleet-cta .btn.navy{border-color:#3c5670;background:transparent;color:#eaf0f6}
.fleet-cta .btn.navy:hover{background:#17304a}
.fleet-cta .fine{color:#7b90a5;font-size:.8rem}

/* ---------- stats ---------- */
.stats{background:var(--navy);color:#eaf0f6;padding:56px 0}
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:28px;text-align:center}
.stats .num{font-family:var(--font-head);font-size:3.2rem;line-height:1;font-weight:800;color:var(--amber)}
.stats .lbl{margin-top:8px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}

/* ---------- meet pablo ---------- */
.meet-pablo .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:48px;align-items:center}
.mp-photo{position:relative}
.mp-photo::after{content:"";position:absolute;inset:16px -16px -16px 16px;border:2px solid var(--amber);border-radius:var(--r)}
.mp-photo img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 14%;border-radius:var(--r);box-shadow:0 18px 40px -18px rgba(18,36,55,.4)}
.mp-text{display:flex;flex-direction:column;gap:15px;align-items:flex-start}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.88rem;color:#3f4f5e}

/* ---------- service price menu ---------- */
.estimate{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow)}
.est-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:0 40px}
.est-row{display:flex;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px dashed var(--line)}
.est-row .svc{color:var(--ink);font-size:1rem}
.est-row .dots{flex:1;border-bottom:1px dotted #cdd5dc;transform:translateY(-4px)}
.est-row .price{background:none;border:0;padding:0;font-family:var(--font-head);font-weight:600;color:var(--navy)}
.est-note{margin:20px 0 0;color:var(--muted);font-size:.88rem;line-height:1.6;border-top:1px solid #eeebe4;padding-top:16px;text-wrap:pretty}

/* ============================================================
   BOOKING STEPS + SERVICE-AREA MAP (side by side)
   ============================================================ */
.areas{background:var(--navy-deep);color:#eaf0f6;padding:76px 0 60px}
.areas .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:48px}
.areas .kicker{color:var(--amber-hi)}
.areas h2{color:#fff}
.areas p{color:var(--muted-dark)}
.steps-col{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.step{background:var(--navy);border:1px solid var(--navy-line);border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:8px;color:#3f5c78;
  transition:border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.step:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-3px);box-shadow:0 16px 30px -16px rgba(0,0,0,.6)}
.step .n{font-family:var(--font-head);font-size:1.9rem;line-height:1;font-weight:800;color:inherit}
.step h3{font-size:1.3rem;color:#fff;margin:0}
.step p{color:var(--muted-dark);line-height:1.55;font-size:.97rem;margin:0}

.metro-scroll{position:relative;height:508px;width:100%;max-width:571px}
.metro-stage{position:sticky;top:96px;height:500px;background:#122b42;border:1px solid var(--navy-line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.metro-head,.metro-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;background:var(--navy)}
.metro-head{border-bottom:1px solid #1d3450}
.metro-foot{border-top:1px solid #1d3450;padding:12px 18px}
.metro-head span,.metro-foot span{font-family:var(--font-head);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#7b90a5}
.metro-status{font-family:var(--font-head);font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0;white-space:nowrap}
.metro-map{position:relative;flex:1;min-height:0;padding:16px;overflow:hidden}
.metro-map svg{width:100%;height:100%;display:block;overflow:hidden}
.metro-bar{flex:1;height:2px;background:var(--navy-line);border-radius:2px;overflow:hidden}
.metro-bar i{display:block;height:100%;width:0;background:var(--amber)}

/* ---------- reviews ---------- */
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px}
.rcard p{margin:0;color:var(--muted);line-height:1.6;text-wrap:pretty}
.rcard .who{font-weight:600;color:var(--navy);font-size:.95rem}
.rcard .stars{color:var(--amber);font-size:1.05rem;letter-spacing:3px}
.placeholder-tag{align-self:flex-start;background:var(--amber-soft);color:#96650a;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:999px}

/* ---------- FAQ ---------- */
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:10px}
details summary{font-family:var(--font-head);font-size:1.12rem;font-weight:600;color:var(--navy);cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
details p{color:var(--muted);line-height:1.6;margin:10px 0 0}

/* ---------- closing CTA ---------- */
.cta-band{background:var(--amber);color:var(--amber-ink);padding:64px 0}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.cta-band h2{color:var(--amber-ink);font-weight:800;margin:0}
.cta-band p{font-size:1.05rem;color:#5a4409;margin:6px 0 0}
.cta-lead{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cta-band .tow{width:150px;flex:none}
.cta-band .tow .pp-bill{animation:pp-feed 2.4s ease-in infinite}
.cta-band .tow .pp-bill.b2{animation-delay:.9s}
.cta-band .tow .pp-body{animation:pp-bob 2.6s ease-in-out infinite}

/* ============================================================
   FOOTER
   ============================================================ */
.pp-footer{background:var(--navy-deep);color:#b8c6d3;padding:60px 0 28px}
.pp-footer .cols{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:34px}
.pp-footer h3{color:#fff;font-size:1.05rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* Same navy→amber gradient text-fill as the hero h1, scaled down for the
   footer brand heading — a small brand-consistency touch, not structural. */
.pp-footer .cols>div:first-child h3{background:linear-gradient(96deg,#fff 0%,#ffd88a 55%,var(--amber) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.18rem;letter-spacing:-.01em;text-transform:none;font-weight:700}
.pp-footer p{font-size:.95rem;line-height:1.6;color:var(--muted-dark);text-wrap:pretty}
.pp-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.95rem}
.pp-footer a{color:#b8c6d3}
.pp-footer a:hover{color:var(--amber)}
.pp-footer .pp-pay-icons{list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:7px;margin-top:6px}
.pp-pay-icons__icon{width:38px;height:26px;border-radius:4px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.pp-pay-icons__icon svg{width:100%;height:100%;display:block}
.pp-pay-es{display:block;margin-top:8px;color:var(--muted-dark);font-size:.9rem}
.pp-footer .legal{max-width:1180px;margin:26px auto 0;padding:18px 24px 0;border-top:1px solid #1d3450;color:#8ea3b8;font-size:.83rem;line-height:1.6;text-wrap:pretty}

/* floating click-to-call — the site's primary conversion, on every page */
.float-call{position:fixed;right:18px;bottom:18px;z-index:80;display:inline-flex;align-items:center;gap:9px;background:var(--amber);color:var(--amber-ink);font-family:var(--font-head);font-weight:700;font-size:1rem;padding:14px 20px;border-radius:999px;box-shadow:0 14px 30px -10px rgba(0,0,0,.55);transition:background .2s var(--ease),transform .2s var(--ease)}
.float-call:hover{background:var(--amber-hi);color:var(--amber-ink);transform:translateY(-2px)}

/* ---------- contact head: hood-up teardown illustration ---------- */
.page-head.with-art .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:40px;align-items:center}
.pp-teardown{width:100%;max-width:480px;justify-self:end}
.pp-teardown .pp-ping{transform-box:fill-box;transform-origin:center}
.pp-teardown svg{width:100%;height:auto;display:block}
.pp-teardown.has-photo{position:relative}
.pp-teardown.has-photo img{width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:0 20px 44px -20px rgba(0,0,0,.6)}
.pp-teardown.has-photo::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:2px solid var(--amber);border-radius:var(--r);z-index:-1}
.pp-teardown .pp-line{stroke-dasharray:1400;stroke-dashoffset:1400;animation:pp-draw 2.2s var(--ease) forwards}
.pp-teardown circle.pp-line{stroke-dasharray:240;stroke-dashoffset:240;animation:pp-draw 1.4s var(--ease) .5s forwards}
.pp-teardown .pp-scanbar{animation:pp-sweep 4.4s cubic-bezier(.5,0,.5,1) 1.4s infinite}
.pp-teardown .pp-scanline{animation:pp-sweepline 4.4s cubic-bezier(.5,0,.5,1) 1.4s infinite}
.pp-teardown .pp-hot{opacity:0;animation:pp-pop 4.4s ease-out 1.4s infinite}
.pp-teardown .pp-hot.h2{animation-delay:1.9s}
.pp-teardown .pp-hot.h3{animation-delay:2.5s}
.pp-teardown .pp-hot.h4{animation-delay:3.1s}
.pp-teardown .pp-ping{animation:pp-ping 1.8s ease-out infinite}
.pp-teardown .pp-blink{animation:pp-lamp 1.2s steps(2,end) infinite}
@keyframes pp-draw{to{stroke-dashoffset:0}}
@keyframes pp-sweep{0%{transform:translateX(0)}70%,100%{transform:translateX(570px)}}
@keyframes pp-sweepline{0%{transform:translateX(0);opacity:1}70%{transform:translateX(480px);opacity:1}71%,100%{opacity:0}}
@keyframes pp-pop{0%,8%{opacity:0;transform:translateY(4px)}16%,88%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes pp-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@keyframes pp-lamp{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .pp-teardown{justify-self:center;max-width:420px}
  section{padding:56px 0}
  .steps-col,.metro-stage{position:static}
  .metro-scroll{height:auto}
  .metro-stage{height:440px}
}
@media (max-width:768px){
  .pp-nav{flex-wrap:wrap}
  .offer{transform:none;margin-top:-30px}
  .float-call{right:12px;bottom:12px;padding:13px 18px}
}


/* ============================================================
   INNER PAGES — page head, panels, checklists, price callout,
   related cards, contact + intake form, vehicle fields, legal
   ============================================================ */
.page-head{background:var(--navy-deep);color:#eaf0f6;padding:72px 0 64px}
.page-head h1{color:#fff;max-width:20ch;margin:0 0 .4em}
.page-head p{color:#adbecd;font-size:1.12rem;line-height:1.6;max-width:60ch;margin:0 0 22px;text-wrap:pretty}
.page-head .kicker{color:var(--amber-hi)}
.page-head .btn.navy{background:transparent;border-color:#3c5670;color:#eaf0f6}
.page-head .btn.navy:hover{background:#17304a}
.content{padding:64px 0}

.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px)}
.panel.alt{background:var(--amber-soft);border-color:#f0e2bc}
.panel h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.6em}
.panel p{color:var(--muted);text-wrap:pretty}

.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.checklist li{position:relative;padding-left:30px;color:var(--ink);line-height:1.55}
.checklist li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--amber);box-shadow:inset 0 0 0 4px var(--card)}
.checklist.warn li::before{background:var(--navy);box-shadow:inset 0 0 0 4px var(--amber-soft)}

.price-callout{margin-top:32px;background:var(--navy);color:#eaf0f6;border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.price-callout .kicker{color:var(--amber-hi)}
.price-callout .big{font-family:var(--font-head);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;color:#fff;margin:0 0 .3em}
.price-callout .muted{color:var(--muted-dark);max-width:62ch;margin:0;font-size:.97rem;text-wrap:pretty}

.steps-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px;margin-top:32px}
.step.light{background:var(--card);border-color:var(--line);color:#c9cfd6}
.step.light h3{color:var(--navy)}
.step.light p{color:var(--muted)}
.step.light:hover{border-color:var(--amber);color:var(--amber);box-shadow:var(--shadow-lg)}

.faq-wrap{max-width:820px;margin:22px auto 0}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;margin-top:22px}
.rel-card{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.rel-card b{font-family:var(--font-head);font-size:1.08rem;color:var(--navy)}
.rel-card span{color:var(--muted);font-size:.93rem}
.rel-card:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* ---------- contact + intake ---------- */
.contact-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px;margin-bottom:30px}
.contact-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;transition:border-color .18s var(--ease),transform .18s var(--ease)}
.contact-card:hover{border-color:var(--amber);transform:translateY(-2px)}
.cc-icon{width:40px;height:40px;flex:none;border-radius:11px;background:var(--amber-soft);color:var(--amber-text);display:flex;align-items:center;justify-content:center}
.contact-card h3{font-size:.95rem;margin:0 0 2px;color:var(--navy)}
.contact-card p{margin:0;color:var(--muted);font-size:.95rem}

.contact-form{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,40px);box-shadow:var(--shadow)}
.contact-form h2{margin-bottom:.3em}
.book{display:flex;flex-direction:column;gap:16px}
.book label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--navy);font-size:.95rem}
.book input,.book select,.book textarea,.input{font-family:var(--font-body);font-size:1rem;font-weight:400;color:var(--ink);background:#fff;border:1px solid #d9d4c9;border-radius:var(--r-sm);padding:12px 14px;width:100%;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.book input:focus,.book select:focus,.book textarea:focus,.input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,156,12,.18);outline:none}
.book textarea{resize:vertical}
.book .checkbox{flex-direction:row;align-items:center;gap:10px;font-weight:400;color:var(--ink)}
.book .checkbox input{width:auto}
.book .btn{align-self:flex-start}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;align-items:stretch}
.form-grid>label{justify-content:space-between}
.pp-required{color:#c0392b}
.pp-error{display:none;color:#c0392b;font-weight:500;font-size:.85rem}
.book .invalid .pp-error{display:inline}
.pp-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pp-form-status{margin-top:14px;font-weight:600;color:var(--navy)}
.fine{font-size:.85rem;font-weight:400}

/* vehicle fields (assets/pp-vehicle.js renders into [data-pp-vehicles]) */
.pp-veh-fieldset{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:4px 0;display:flex;flex-direction:column;gap:14px}
.pp-veh-fieldset legend{font-family:var(--font-head);font-weight:600;color:var(--navy);padding:0 8px}
.pp-veh-fieldset>.muted{font-size:.92rem;margin:0;text-wrap:pretty}
.pp-veh-rows{display:flex;flex-direction:column;gap:16px}
.pp-veh{background:#faf8f4;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.pp-veh-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pp-veh-label{font-family:var(--font-head);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-text)}
.pp-veh-remove{background:none;border:0;color:var(--muted);font:inherit;font-size:.85rem;cursor:pointer;text-decoration:underline}
.pp-veh-remove:hover{color:#c0392b}
.pp-veh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:13px}
.pp-veh .field{display:flex;flex-direction:column;gap:6px}
.pp-veh label{font-weight:600;color:var(--navy);font-size:.88rem}
.pp-combo{position:relative}
.pp-opts{position:absolute;z-index:20;top:100%;left:0;right:0;margin-top:4px;max-height:230px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 18px 34px -18px rgba(18,36,55,.45);display:flex;flex-direction:column}
.pp-opt{text-align:left;background:none;border:0;padding:10px 13px;font:inherit;font-size:.95rem;color:var(--ink);cursor:pointer}
.pp-opt:hover,.pp-opt.is-active{background:var(--amber-soft)}
.pp-veh-msg{margin:0;font-size:.85rem;color:var(--muted);min-height:1px}
.pp-veh-msg.ok{color:#1e7a4d}
.pp-veh-msg.warn{color:#b3541e}
.pp-veh-add{align-self:flex-start;background:var(--amber-soft);border:1px solid #f0e2bc;color:#96650a;font-family:var(--font-head);font-weight:600;font-size:.92rem;padding:10px 16px;border-radius:999px;cursor:pointer;transition:background .18s var(--ease)}
.pp-veh-add:hover{background:#f8e9c8}

.fin-callout{background:var(--amber-soft);border:1px solid #f0e2bc;border-radius:var(--r);padding:24px}
.btn.steel{background:var(--navy);color:#ffd88a}
.btn.steel:hover{background:var(--navy-deep);color:#ffd88a}

.pay-strip{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:center;text-align:center}
.pay-label{font-family:var(--font-head);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pay-icons{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.pay-icon{width:44px;height:30px;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px rgba(18,36,55,.14)}
.pay-icon svg{width:100%;height:100%;display:block}
.pay-icon.visa,.pay-icon.mc,.pay-icon.amex,.pay-icon.discover,.pay-icon.cash,.pay-icon.check{background:#fff}
.pay-note{width:100%;color:var(--muted);font-size:.88rem}

/* legal pages */
.legal-body .legal-block{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);margin-bottom:18px;max-width:820px;margin-left:auto;margin-right:auto}
.legal-body h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.legal-body h3{font-size:1.1rem;margin-top:1.4em}
.legal-body p,.legal-body li{color:var(--muted);line-height:1.7}
.legal-body ul,.legal-body ol{padding-left:20px}

/* ---------- accessibility: reduced motion ----------
   Targeted, not a blanket freeze. Looping decoration stops; anything that
   *reveals* content lands on its finished frame so nothing disappears; hovers
   keep a short transition. Add class="pp-motion-always" to <html> to opt back
   in (the offline previews in _preview/ do this so you can see the motion). */
@media (prefers-reduced-motion:reduce){
  html:not(.pp-motion-always){scroll-behavior:auto}
  html:not(.pp-motion-always) .pp-van,
  html:not(.pp-motion-always) .pp-van svg,
  html:not(.pp-motion-always) .pp-van .pp-wheel,
  html:not(.pp-motion-always) .pp-van .pp-road,
  html:not(.pp-motion-always) .cta-band .tow .pp-bill,
  html:not(.pp-motion-always) .cta-band .tow .pp-body,
  html:not(.pp-motion-always) .pp-nav-cta,
  html:not(.pp-motion-always) .pp-nav-cta::before,
  html:not(.pp-motion-always) .pp-ltr,
  html:not(.pp-motion-always) .pp-brand::before,
  html:not(.pp-motion-always) .pp-p1,
  html:not(.pp-motion-always) .pp-p2,
  html:not(.pp-motion-always) .pp-teardown .pp-scanbar,
  html:not(.pp-motion-always) .pp-teardown .pp-scanline,
  html:not(.pp-motion-always) .pp-teardown .pp-ping,
  html:not(.pp-motion-always) .pp-teardown .pp-blink,
  html:not(.pp-motion-always) .stats .num,
  html:not(.pp-motion-always) .pp-veh-add{animation:none !important}
  html:not(.pp-motion-always) .pp-teardown .pp-line{stroke-dashoffset:0 !important;animation:none !important}
  html:not(.pp-motion-always) .pp-teardown .pp-hot{opacity:1 !important;animation:none !important}
  html:not(.pp-motion-always) .pp-van{opacity:1 !important;transform:none !important}
  html:not(.pp-motion-always) *,
  html:not(.pp-motion-always) *::before,
  html:not(.pp-motion-always) *::after{transition-duration:.12s !important}
}

/* ---------- WooCommerce product icons (no photo uploaded) ----------
   functions.php renders <a class="pp-product-icon"> for any tile that links
   to a DIFFERENT product (Shop grid, Related, Upsells) and a plain
   <div class="pp-product-icon"> for the single product page's own gallery
   image (no point linking a product to itself). Small 46px badge everywhere
   by default; the "div.product div.pp-product-icon" override below bumps
   ONLY that static div up to 220px on the single product page — it must
   stay scoped to the div selector, not the shared .pp-product-icon class,
   or it also inflates the small Related-Products tiles that share that page.
   Likewise hover/pointer styling is scoped to the "a." selector only, so a
   static div never looks clickable and a real link is never dead. */
a.pp-product-icon,div.pp-product-icon{width:46px;height:46px;aspect-ratio:1/1;max-height:none;margin:0 auto 14px;display:flex !important;align-items:center !important;justify-content:center !important;text-align:center;background:var(--amber-soft);border-radius:12px;color:var(--navy);transition:transform .2s var(--ease),color .2s var(--ease)}
a.pp-product-icon{cursor:pointer}
a.pp-product-icon:hover{color:var(--amber);transform:translateY(-3px)}
.pp-product-icon svg.pp-icon-svg{width:24px;height:24px;max-width:60%;max-height:60%;display:block;flex:none;margin:0 auto}
div.product div.pp-product-icon{width:220px;height:220px;max-width:100%;border-radius:var(--r);margin:0 auto 24px;cursor:default}
div.product div.pp-product-icon svg.pp-icon-svg{width:96px;height:96px}

/* ---------- Shop page: menu-style list rows ----------
   Scoped to .wp-block-woocommerce-product-collection (the block that only
   exists on the Shop/Product Catalog template) so none of this touches the
   single Product page's own icon treatment, or Related/Upsell product tiles
   elsewhere on the site — those keep the badge-style icon rules above.
   Icon shrinks to a small inline glyph next to the name instead of the big
   amber badge, name sits left, price is pushed right via space-between. */
.wp-block-woocommerce-product-collection .pp-shop-list-row{align-items:center;padding:16px 12px;border-bottom:1px solid var(--line)}
.wp-block-woocommerce-product-collection .pp-shop-list-row:first-child{padding-top:0}
/* Zebra striping — targets the <li> WooCommerce wraps each product in
   (.wc-block-product-template > li), not .pp-shop-list-row itself, since
   the row div is the <li>'s only child and never repeats as a sibling —
   nth-child has to count the actual repeating element. */
.wp-block-woocommerce-product-collection .wc-block-product-template > li:nth-child(odd){background:var(--amber-soft)}
.wp-block-woocommerce-product-collection .pp-shop-list-left{align-items:center;gap:14px}
.wp-block-woocommerce-product-collection .pp-shop-list-left .pp-product-icon{width:32px;height:32px;margin:0;flex:none;background:none;color:var(--amber)}
.wp-block-woocommerce-product-collection .pp-shop-list-left .pp-product-icon svg.pp-icon-svg{width:26px;height:26px}
.wp-block-woocommerce-product-collection .pp-shop-list-left .pp-product-icon:hover{color:var(--navy);transform:translateY(-2px)}
.wp-block-woocommerce-product-collection .pp-shop-list-left .wp-block-post-title{margin:0;text-align:left}
.wp-block-woocommerce-product-collection .pp-shop-list-right{align-items:center;gap:14px}
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price{margin:0;white-space:nowrap}
.wp-block-woocommerce-product-collection .pp-shop-list-button{margin:0}

/* ---------- Shop diagnostic-funnel banner ---------- */
.pp-shop-banner{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;background:var(--navy-deep);color:#eaf0f6;border-radius:var(--r);padding:24px 28px;margin-bottom:32px}
.pp-shop-banner strong{display:block;font-family:var(--font-head);font-size:1.1rem;color:#fff}
.pp-shop-banner p{margin:.3em 0 0;color:var(--muted-dark);max-width:52ch}
.pp-shop-banner .btn{flex:none}
/* ---------- Shop DIY-rescue banner ----------
   Renders below the product grid via woocommerce_after_shop_loop (functions.php).
   Deliberately amber, not navy, so it doesn't read as a repeat of the
   .pp-shop-banner above the grid — same layout, opposite color, so shoppers
   register it as a second, different offer instead of skimming past it. */
.pp-diy-banner{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;background:var(--amber-soft);border:1px solid var(--amber);border-radius:var(--r);padding:24px 28px;margin-top:36px}
.pp-diy-banner strong{display:block;font-family:var(--font-head);font-size:1.1rem;color:var(--navy)}
.pp-diy-banner p{margin:.3em 0 0;color:var(--muted);max-width:52ch}
.pp-diy-banner .btn{flex:none}

/* ---------- Order-received page: appointment CTA ---------- */
.pp-appt-cta{background:var(--amber-soft);border-radius:var(--r);padding:24px 28px;margin:28px 0;text-align:center}
.pp-appt-cta h3{margin:0 0 8px}
.pp-appt-cta p{max-width:52ch;margin:0 auto 16px}

/* ---------- Shop grid: override WordPress's built-in font-size presets ----------
   The Product Collection block ships with "Small"/"Medium" preset classes on
   the product title/price, smaller than the rest of the site's type scale.
   WP core's own .has-*-font-size rules use !important, so matching that is
   the only way to override — same justified exception as reduced-motion. */
.wp-block-post-title.has-medium-font-size{font-size:1.2rem !important;font-family:var(--font-head);color:var(--navy)}
.wp-block-woocommerce-product-price.has-small-font-size{font-size:1.05rem !important;font-family:var(--font-head);font-weight:600;color:var(--navy)}

/* ---------- junk car buying ---------- */
.junk{background:var(--amber-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.junk .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start}
.junk-lead p{color:#54452a;max-width:56ch}
.junk-offer{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0}
.junk-offer>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.junk-offer>div:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.jo-num{display:block;font-family:var(--font-head);font-size:clamp(1.2rem,1.55vw,1.5rem);font-weight:800;color:var(--navy);line-height:1.1;white-space:nowrap}
.jo-lbl{display:block;margin-top:4px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.junk-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.junk-lead .fine{color:#7a6642;max-width:60ch}
.junk-side{display:flex;flex-direction:column;gap:16px}
.junk-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow);
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.junk-card:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.junk-card h3{margin:0 0 14px}
.junk-list,.junk-steps{margin:0;padding:0 0 0 0;list-style:none;display:flex;flex-direction:column;gap:10px}
.junk-list li{position:relative;padding-left:26px;color:#43525f;font-size:.97rem;line-height:1.5}
.junk-list li::before{content:"";position:absolute;left:6px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--amber)}
.junk-steps{counter-reset:jstep}
.junk-steps li{counter-increment:jstep;position:relative;padding-left:34px;color:#43525f;font-size:.97rem;line-height:1.5}
.junk-steps li::before{content:counter(jstep);position:absolute;left:0;top:0;width:23px;height:23px;border-radius:999px;background:var(--navy);color:var(--amber-hi);
  font-family:var(--font-head);font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.junk-steps b{color:var(--navy)}
.junk-why{margin:2px 0 0;font-size:.93rem;line-height:1.6;color:#6b5936;border-left:3px solid var(--amber);padding-left:14px}
@media(max-width:900px){.junk .wrap{grid-template-columns:1fr}
  .junk-offer{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}}

/* ---------- "Get cash" nav pill — the /cash-for-cars entry point ----------
   Reads as the secondary companion to the amber "Book Now" pill: same 999px
   radius, same .8rem/700 type, same 1px hover lift — navy outline rather than
   amber fill, so only one button in the header claims primary action.

   Replaces a hover-swap that hid the real text under two pseudo-element labels
   ("I give up on it 🏳" → "Get cash 💵"). Using a plain text node instead fixes
   three things at once: the visible label no longer disagrees with the link's
   accessible name; touch devices have no hover, so phones had only ever shown
   "I give up on it"; and the label is no longer absolutely positioned, so the
   pill sizes to the nav's own 40px rhythm. The old 1px border sat outside a
   40px min-height and made this the only 42px item in the row, 1px high.
   The green (#0f5132/#eef7f0/#1a7a4a) and the emoji went with it — neither
   appears anywhere else in the navy/amber system. */
.pp-nav .pp-nav-junk a{
  height:40px;padding:7px 15px;margin-left:6px;
  border:1px solid rgba(22,50,74,.24);border-radius:999px;
  background:var(--card);font-weight:700;font-size:.8rem;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .2s var(--ease)}

/* Inverts to a navy fill with an amber label — the same contract .btn.navy and
   .btn.steel already use elsewhere. The current-page state takes the fill but
   not the lift; a permanently raised pill would reintroduce the misalignment. */
.pp-nav .pp-nav-junk a:hover,
.pp-nav .pp-nav-junk a:focus-visible,
.pp-nav .pp-nav-junk a[aria-current="page"]{background:var(--navy);border-color:var(--navy)}
.pp-nav .pp-nav-junk a:hover,
.pp-nav .pp-nav-junk a:focus-visible{transform:translateY(-1px)}

/* !important on color only, and for the same documented reason as the Book Now
   pill above: the Navigation block carries textColor:"ink", WordPress emits
   .has-ink-color{color:... !important} as a preset, and unmatched it would force
   near-black text onto the navy fill. */
.pp-nav .pp-nav-junk a.wp-block-navigation-item__content{color:var(--navy) !important}
.pp-nav .pp-nav-junk a.wp-block-navigation-item__content:hover,
.pp-nav .pp-nav-junk a.wp-block-navigation-item__content:focus-visible,
.pp-nav .pp-nav-junk a.wp-block-navigation-item__content[aria-current="page"]{color:#ffd88a !important}

/* ---------- Services dropdown ----------
   Core's Navigation block supplies the open/close behaviour and the keyboard
   handling; this is purely the skin. Twelve items is a tall list, so it is a
   single column with tight rows rather than a mega-menu. */
.pp-nav .wp-block-navigation__submenu-container{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 20px 44px -22px rgba(18,36,55,.42),0 2px 6px -2px rgba(18,36,55,.12);
  padding:8px;
  min-width:262px;
  margin-top:6px}
.pp-nav .wp-block-navigation__submenu-container li{width:100%}
.pp-nav .wp-block-navigation__submenu-container a{
  padding:9px 12px;
  border-radius:var(--r-sm);
  font-size:.92rem;
  font-weight:500;
  min-height:0;
  white-space:nowrap;
  width:100%}
.pp-nav .wp-block-navigation__submenu-container a:hover,
.pp-nav .wp-block-navigation__submenu-container a:focus-visible{
  background:var(--amber-soft);color:var(--navy)}

/* Last item is the catch-all back to the index — set it apart with a rule. */
.pp-nav .wp-block-navigation__submenu-container .pp-sub-all{
  border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.pp-nav .wp-block-navigation__submenu-container .pp-sub-all a{
  font-weight:700;color:var(--amber-text)}

/* Mobile: the overlay menu stacks, so drop the card treatment and let it flow. */
@media (max-width:768px){
  .pp-nav .wp-block-navigation__submenu-container{
    border:0;box-shadow:none;padding:0 0 0 12px;min-width:0;margin-top:0}
  .pp-nav .wp-block-navigation__submenu-container a{white-space:normal}
}