/* ==========================================================================
   refine.css — Ideal Pro Home Detailing
   Override-only. Loads AFTER site.css. No layout structure or content changes.

   Written against the real site.css, so this works by redefining your existing
   tokens wherever possible and matching specificity rather than reaching for
   !important. Only one block below needs it, and it is marked.

   1. Tokens        — blues deepened/desaturated, neutrals warmed
   2. Type scale    — headlines reduced, line-height opened
   3. Flat colour   — every gradient replaced
   4. Rings removed — .hero, .hero-visual, .cta-banner, .page-hero, .owner-panel
   5. Radius        — 10 / 14 / 18px
   6. Shadows       — reduced from 0 30px 70px / 0 20px 55px
   7. Padding       — cards and sections opened up
   8. Hero images   — .hero-photo vs .hero-mascot
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS — redefining yours, so the change flows through every page
   -------------------------------------------------------------------------- */
:root{
  --navy:#0a2a52;        /* was #052b70 */
  --deep:#071e3c;        /* was #031e54 */
  --royal:#17558f;       /* was #0f63c6 */
  --blue:#1e6aa8;        /* was #0a9ff0 — the big desaturation */
  --sky:#7fc4ee;         /* was #78c9f7 */
  --ice:#eef3f7;         /* was #e8f5ff — warmer */
  --ice2:#f7f5f2;        /* was #f5faff — warm off-white */
  --ink:#1c2733;         /* was #081d46 */
  --muted:#5a6672;       /* was #52647f */
  --line:#e3ded7;        /* was #d8e7f6 — warm hairline */
  --gold:#e0a21b;
  --success:#0a7a5e;

  --shadow:0 2px 4px rgba(16,32,48,.05),0 14px 32px rgba(16,32,48,.09);
  --shadow-sm:0 1px 2px rgba(16,32,48,.05),0 4px 10px rgba(16,32,48,.05);
  --shadow-md:0 1px 2px rgba(16,32,48,.05),0 8px 20px rgba(16,32,48,.07);

  --radius:14px;
  --radius-sm:10px;
  --radius-lg:18px;

  --pad-card:32px;
  --pad-section:112px;
}


/* --------------------------------------------------------------------------
   2. TYPE SCALE
   Was: h1 clamp(3.2rem,7vw,6.8rem) with line-height .98
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{line-height:1.1;letter-spacing:-.012em}
h1{font-size:clamp(2.6rem,4.6vw,4.1rem);line-height:1.06}
h2{font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.14}
h3{font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.28}
p{line-height:1.65}
.lead{font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.62;max-width:62ch}
.eyebrow{font-size:.78rem;letter-spacing:.13em;margin-bottom:12px}
.eyebrow:before{background:var(--blue);width:26px;height:2px}

.service-body h3{font-size:1.3rem}
.ba-caption h3{font-size:1.25rem}
.area-card h3{font-size:1.3rem}
.price-card h3{font-size:1.3rem}
.route-card h3{font-size:1.3rem}
.sidebar-card h2{font-size:1.5rem}
.content h2{font-size:2rem;margin-top:1.5em}
.content h3{font-size:1.35rem;margin-top:1.3em}
.page-hero h1{font-size:clamp(2.4rem,4.2vw,3.6rem)}
.owner-card strong{font-size:1.9rem}
.quote-total strong{font-size:2.8rem}
.trust-item b{font-size:1.3rem}
.metric strong{font-size:1.6rem}
.price-card .price-from{font-size:2.1rem;color:var(--royal)}


/* --------------------------------------------------------------------------
   3. FLAT COLOUR — every gradient in site.css, replaced
   Text colour is restated alongside each surface so nothing goes unreadable.
   -------------------------------------------------------------------------- */
.section-soft{background:var(--ice2)}
.section-dark{background:var(--deep)}

.hero{background:var(--ice)}
.hero h1 .shine{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--royal)}

.button{border-radius:var(--radius-sm);border-width:1px;transition:background-color .16s,border-color .16s,color .16s}
.button:hover{transform:none}
.button-primary{background:var(--royal);color:#fff;border-color:var(--royal);box-shadow:none}
.button-primary:hover{background:#114878;border-color:#114878}
.button-secondary{background:#fff;color:var(--navy);border-color:var(--line)}
.button-secondary:hover{background:var(--ice2);border-color:#d6cfc5}
.button-light{background:#fff;color:var(--navy)}
.button-light:hover{background:#f0f4f8}
.button-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.button-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.85)}

.icon-badge{background:var(--royal);border-radius:var(--radius-sm);border-width:2px;box-shadow:var(--shadow-sm)}
.check-list li:before{background:var(--royal)}
.owner-panel{background:var(--navy)}
.cta-banner{background:var(--navy)}
.page-hero{background:var(--navy)}
.contact-card{background:var(--navy)}
.quote-card-head{background:var(--navy)}
.quote-total{background:var(--navy)}
.quote-progress span.active,.quote-progress span.done{background:var(--royal)}
.mobile-action-bar .mobile-quote{background:var(--royal);color:#fff}
.route-card.featured{background:var(--ice2)}
.service-zone-note{background:var(--navy)}
.pricing-table th{background:var(--navy)}

/* Kept as a gradient on purpose — this one is a legibility scrim, not decoration */
.media-card:after{background:linear-gradient(transparent,rgba(7,30,60,.42))}

.utility-bar{background:var(--deep);color:#d9e8f4}
.site-header{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--line)}
.nav-link{color:var(--navy)}
.nav-link:hover,.nav-link.active{color:var(--royal)}
.accent{color:var(--royal)}
.section-dark .accent,.cta-banner .accent,.owner-panel .accent,.page-hero .accent{color:var(--sky)}
.text-link{color:var(--royal)}
.stars{color:var(--gold);letter-spacing:.06em}
.proof-pill{background:#fff;border-color:var(--line)}
.route-tags span{background:var(--ice);border-color:#cfd9e2}
.note{background:#fdf8ea;border-left-color:var(--gold);color:#5c4b18}
.premium-chip{background:#fdf6e3;border-color:#e8d4a0;color:#5c4b18}


/* --------------------------------------------------------------------------
   4. DECORATIVE RINGS AND BLOBS — removed
   -------------------------------------------------------------------------- */
.hero:before,
.hero:after,
.hero-visual:before,
.cta-banner:before,
.page-hero:after,
.owner-panel:after{content:none;display:none}

/* The floating "Instant quotes • Easy booking" pill: kept, flattened */
.hero-visual:after{background:var(--navy);border-width:1px;border-color:rgba(255,255,255,.9);box-shadow:var(--shadow-md);border-radius:var(--radius-sm);padding:10px 16px;font-size:.82rem}


/* --------------------------------------------------------------------------
   5. RADIUS — 10 small / 14 standard / 18 large
   -------------------------------------------------------------------------- */
.service-card,.ba-card,.review-card,.process-card,.owner-card,.sidebar-card,
.price-card,.route-card,.area-card,.form-card,.quote-card,.contact-card,
.cta-banner,.owner-panel,.media-card,.service-hero-img,.trust-grid,
.service-zone-note,.pricing-table,.quote-result{border-radius:var(--radius-lg)}

.field input,.field select,.field textarea,.select-card,.faq-item,
.metric,.swatch,.do-dont>div,.quote-card-head,.water-frame:before{border-radius:var(--radius)}

.ba-label,.icon-badge,.pricing-method div,.button{border-radius:var(--radius-sm)}

/* Pills stay fully round — they read as tags, not panels */
.proof-pill,.route-tags span,.premium-chip,.quote-progress span{border-radius:999px}


/* --------------------------------------------------------------------------
   6. SHADOWS — reduced. Was 0 30px 70px and 0 20px 55px.
   -------------------------------------------------------------------------- */
.service-card,.ba-card,.review-card,.price-card,.route-card,
.process-card,.owner-card{box-shadow:var(--shadow-md)}
.service-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.media-card,.form-card,.quote-card,.trust-grid,.service-hero-img{box-shadow:var(--shadow)}
.site-header{box-shadow:var(--shadow-sm)}
.mobile-action-bar{box-shadow:0 -1px 2px rgba(16,32,48,.05),0 -8px 20px rgba(16,32,48,.08)}
.mobile-menu{box-shadow:var(--shadow)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--royal);box-shadow:0 0 0 3px rgba(23,85,143,.12)}


/* --------------------------------------------------------------------------
   7. PADDING — cards were 26px, sections 96px
   -------------------------------------------------------------------------- */
.section{padding:var(--pad-section) 0}
.section-head{margin-bottom:52px}

.service-body{padding:var(--pad-card)}
.ba-caption{padding:26px var(--pad-card)}
.review-card,.process-card,.owner-card,.sidebar-card,
.price-card,.route-card,.area-card{padding:var(--pad-card)}
.form-card,.contact-card{padding:36px}
.quote-body{padding:36px}
.quote-card-head{padding:32px}
.owner-panel{padding:56px}
.cta-banner{padding:56px}
.page-hero{padding:78px 0 70px}
.service-zone-note{padding:36px}
.trust-item{padding:28px 18px}
.header-inner{height:74px}
.utility-inner{height:40px}

.card-grid,.ba-grid,.review-grid,.process-grid,.route-grid,.price-grid{gap:26px}


/* --------------------------------------------------------------------------
   8. HERO IMAGES
   site.css sets `.hero-visual img` to height:610px + object-fit:cover + a 6px
   border, which crops the 1024x1536 mascot PNGs. Split into two classes.
   -------------------------------------------------------------------------- */
.hero-photo{
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center;
  width:min(100%,480px);
  height:auto;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.hero-mascot{
  aspect-ratio:auto;
  width:min(100%,440px);
  max-height:620px;
  border-radius:0;
  box-shadow:none;
  background:none;
  margin-inline:auto;
}
/* The only !important in this file. site.css targets `.hero-visual img`, which
   is the same specificity as `.hero-mascot`; the mascot must win wherever it
   sits in the markup, so these three declarations are forced. */
.hero-mascot{height:auto!important;object-fit:contain!important;border:0!important}

/* Untagged images inside .hero-visual: don't crop those either */
.hero-visual img:not(.hero-photo){height:auto;object-fit:contain;border:0;border-radius:0;box-shadow:none}


/* --------------------------------------------------------------------------
   9. QUALITY FLOOR
   -------------------------------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

.field input,.field select,.field textarea{border-width:1px;border-color:var(--line)}
.select-card{border-width:1px;border-color:var(--line)}
.select-card:hover,.select-card.selected{border-color:var(--royal);background:var(--ice)}

.review-meta{color:var(--muted)}
.faq-question{color:var(--navy)}

@media(max-width:980px){
  :root{--pad-section:80px;--pad-card:26px}
  .owner-panel,.cta-banner{padding:40px 28px}
}
@media(max-width:650px){
  :root{--pad-section:68px;--pad-card:24px}
  .section-head{margin-bottom:34px}
  .hero h1{font-size:2.6rem}
  .page-hero h1{font-size:2.4rem}
  .owner-panel,.cta-banner{padding:36px 24px}
  .hero-mascot{width:min(100%,320px)}
}

@media(prefers-reduced-motion:reduce){
  .service-card:hover{transform:none}
}