/*
Theme Name: Appliance Repair Brand Engine
Description: Shared multi-city appliance repair brand site engine — pure PHP, no page builders. Brand name, accent color, logo, and content are all set per-site in Site Settings / seed data; this codebase is reused as-is across brand sites (Bosch, Thermador, etc).
Author: In-house
Version: 1.0.0
Text Domain: bosch-repair
*/

:root{
	--color-red: #e2001a;
	--color-red-dark: #b50014;
	--color-ink: #1c1c1c;
	--color-ink-soft: #4a4a4a;
	--color-bg: #ffffff;
	--color-bg-alt: #f5f6f7;
	--color-border: #e3e5e8;
	--color-white: #ffffff;
	--color-success: #1e8e3e;
	--color-warning: #b45309;
	--color-danger: #b50014;
	--radius: 6px;
	--container: 1180px;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; width: 100%; scroll-padding-top: var(--header-height, 112px); }
body{
	margin:0;
	font-family: var(--font);
	color: var(--color-ink);
	background: var(--color-bg);
	line-height: 1.55;
	font-size: 16px;
	overflow-x: hidden;
	width: 100%;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--color-red-text); text-decoration:none; }
a:hover{ text-decoration: underline; }
h1,h2,h3,h4{ line-height:1.2; margin:0 0 .5em; font-weight:700; font-family: var(--font-heading, var(--font)); }
.is-spacious h1, .is-spacious h2{ letter-spacing:.01em; }
h1{ font-size: clamp(28px, 4vw, 44px); }
h2{ font-size: clamp(22px, 3vw, 32px); }
h3{ font-size: 20px; }
p{ margin:0 0 1em; color: var(--color-ink-soft); }
ul{ padding-left: 1.2em; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section{ padding: 64px 0; }
.is-spacious .section{ padding: 88px 0; }
.section-alt{ background: var(--color-bg-alt); }
/* Marble Section Texture (Site Settings -> Style) — opt-in via
   bosch_marble_texture, off by default. CSS-only veined-marble look using
   layered soft gradients, no image asset. */
.has-marble-texture .section-alt{
	background-color: var(--color-bg-alt);
	background-image:
		linear-gradient(125deg, transparent 40%, rgba(0,0,0,.035) 41%, transparent 43%),
		linear-gradient(35deg, transparent 60%, rgba(0,0,0,.03) 61%, transparent 63%),
		linear-gradient(200deg, transparent 25%, rgba(0,0,0,.025) 26%, transparent 29%);
	background-size: 100% 100%;
}
.section-head{ max-width: 720px; margin: 0 auto 40px; text-align:center; }
.is-spacious .section-head{ margin-bottom:56px; }
.section-head p{ margin:0; }
/* Brass Divider Under Headings (Site Settings -> Style) — opt-in via
   bosch_gold_divider, off by default. */
.has-gold-divider .section-head h2{ position:relative; padding-bottom:18px; }
.has-gold-divider .section-head h2::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:64px; height:3px; border-radius:2px; background: linear-gradient(90deg, #9c7a2e, #e8c874, #9c7a2e); }
/* Chrome Divider Under Headings (Site Settings -> Style) — opt-in via
   bosch_chrome_divider, off by default. */
.has-chrome-divider .section-head h2{ position:relative; padding-bottom:18px; }
.has-chrome-divider .section-head h2::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:64px; height:3px; border-radius:2px; background: linear-gradient(90deg, #8a8d90, #f2f4f5, #8a8d90); }
/* Frost Divider Under Headings (Site Settings -> Visual Effects) — opt-in
   via bosch_frost_divider, off by default. Ice-blue gradient bar, evoking
   refrigeration/frost. */
.has-frost-divider .section-head h2{ position:relative; padding-bottom:18px; }
.has-frost-divider .section-head h2::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:64px; height:3px; border-radius:2px; background: linear-gradient(90deg, #4a90b8, #cfeeff, #4a90b8); }
/* Precision Grid Background (Site Settings -> Visual Effects) — opt-in via
   bosch_precision_grid, off by default. Faint blueprint-style grid lines
   over alternating section backgrounds, for a precision-engineering look. */
.has-precision-grid .section-alt{
	background-color: var(--color-bg-alt);
	background-image:
		linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
	background-size: 32px 32px;
}
/* Gold Foil Heading Text (Site Settings -> Style) — opt-in via
   bosch_gold_foil_heading, off by default. */
.has-gold-foil-heading .section-head h2{ background: linear-gradient(100deg, #7a5f22 10%, #b9902f 35%, #e0b955 50%, #b9902f 65%, #7a5f22 90%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.eyebrow{ display:inline-block; color: var(--color-accent-2-text, var(--color-red-text)); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:13px; margin-bottom:10px; }
.hero .eyebrow{ color: var(--color-accent-2-on-dark, var(--color-accent-2)); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 14px 28px; border-radius: var(--radius-btn, var(--radius)); font-weight:700; border:2px solid transparent; cursor:pointer; font-size:16px; transition: all .15s ease; }
.btn:hover{ text-decoration:none; }
.btn-primary{ background: var(--color-red); color:#fff; }
.btn-primary:hover{ background: var(--color-red-dark); }
/* Button Shine Effect (Site Settings -> Style) — a light sweep on hover,
   opt-in per brand via bosch_button_shine, off by default. */
.has-button-shine .btn-primary{ position:relative; overflow:hidden; }
.has-button-shine .btn-primary::after{ content:""; position:absolute; top:0; left:-60%; width:35%; height:100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events:none; }
.has-button-shine .btn-primary:hover::after{ left:130%; }
@media (prefers-reduced-motion: reduce){ .has-button-shine .btn-primary::after{ display:none; } }
/* Retro Press Buttons (Site Settings -> Style) — opt-in via
   bosch_retro_press, off by default. A raised, stamped-metal button that
   visibly presses down on click. */
.has-retro-press .btn-primary{ box-shadow: 0 3px 0 rgba(0,0,0,.28); transition: transform .1s ease, box-shadow .1s ease; }
.has-retro-press .btn-primary:hover{ transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,.28); }
.has-retro-press .btn-primary:active{ transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,.28); }
.btn-outline{ background:transparent; border-color:#fff; color:#fff; }
.btn-outline:hover{ background:#fff; color: #fff; }
.btn-outline-dark{ background:transparent; border-color: var(--color-ink); color: var(--color-ink); }
.btn-outline-dark:hover{ background: var(--color-ink); color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:14px; }

/* Header */
.site-header{ position: fixed; top:0; left:0; right:0; width:100%; z-index: 50; background:#fff; border-bottom:1px solid var(--color-border); }
body{ padding-top: var(--header-height, 112px); }
.topbar{ background: var(--color-ink); color:#fff; font-size:13px; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:6px; }
.topbar a{ color:#fff; font-weight:600; }
.topbar-phone{ display:flex; align-items:center; gap:6px; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 20px; }
.site-logo{ font-weight:800; font-size: clamp(14px, 3.6vw, 20px); color: var(--color-ink); display:flex; align-items:baseline; flex-wrap:wrap; }
.site-logo .logo-ink{ color: var(--color-ink); }
.site-logo .logo-accent{ color: var(--color-red-text); }
.site-logo .logo-tld{ color: var(--color-ink-soft); font-weight:600; }
.site-logo-image img{ max-height: var(--logo-height, 75px); width:auto; display:block; }
.site-logo-wrap{ display:flex; flex-direction:column; gap:2px; }
.site-logo-tagline{ font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color: var(--color-ink-soft); }
.site-logo-mobile{ display:none; }
.site-logo-mobile img{ max-height: var(--mobile-logo-height, 30px); width:auto; display:block; }
.footer-logo{ display:flex; align-items:center; flex-wrap:wrap; margin:0; }
.footer-logo .logo-ink{ color:#fff; }
.footer-logo .logo-tld{ color:#9a9a9a; }
.footer-logo-image{ max-height: var(--footer-logo-height, 80px); width:auto; display:block; }
.main-nav{ display:flex; gap: 22px; align-items:center; flex-wrap:wrap; }
.main-nav a{ color: var(--color-ink); font-weight:600; font-size:15px; }
.main-nav a:hover{ color: var(--color-red-text); text-decoration:none; }
.header-cta{ display:flex; align-items:center; gap:12px; }
.header-phone{ font-weight:800; font-size:17px; color: var(--color-ink); white-space:nowrap; }
.nav-toggle{ display:none; align-items:center; justify-content:center; background:none; border:1px solid var(--color-border); border-radius:6px; width:44px; height:44px; padding:0; font-size:20px; line-height:1; cursor:pointer; flex-shrink:0; }
.nav-toggle.is-active{ background: var(--color-ink); color:#fff; border-color: var(--color-ink); }

/* Scrolled header — fixed header swaps to the solid brand color with a
   reversed logo once the page is scrolled past the top; see .is-scrolled
   toggled by main.js and bosch_sticky_logo_html() in inc/helpers.php. */
.site-logo-sticky{ display:none; }
.site-logo-sticky-image{ max-height: var(--sticky-logo-height, 35px); width:auto; display:block; }
.site-header.is-scrolled{ background: var(--sticky-header-bg, var(--color-red)); border-bottom-color: var(--sticky-header-bg, var(--color-red-dark)); }
.site-header.is-scrolled .site-logo-wrap > .site-logo-image,
.site-header.is-scrolled .site-logo-wrap > .site-logo:not(.site-logo-sticky),
.site-header.is-scrolled .site-logo-mobile{ display:none; }
.site-header.is-scrolled .site-logo-sticky{ display:flex; }
.site-header.is-scrolled .site-logo-sticky .logo-ink,
.site-header.is-scrolled .site-logo-sticky .logo-accent{ color:#fff; }
.site-header.is-scrolled .site-logo-sticky .logo-tld{ color: rgba(255,255,255,.75); }
.site-header.is-scrolled .site-logo-tagline{ color: rgba(255,255,255,.85); }
.site-header.is-scrolled .main-nav a{ color:#fff; }
.site-header.is-scrolled .main-nav a:hover{ color: rgba(255,255,255,.75); }
.site-header.is-scrolled .header-phone{ color:#fff; }
.site-header.is-scrolled .btn-schedule{ background: var(--color-ink); }
.site-header.is-scrolled .btn-schedule{ background: transparent; border: 1px solid var(--color-ink);}
.site-header.is-scrolled .btn-schedule:hover{ background:#000; }
/* .btn-schedule is also .btn-primary, so a light Brand Accent Color (e.g.
   JennAir's gold #c6a15b) flips its text dark via ".accent-is-light
   .btn-primary" below — correct up top, where the button's background IS
   that accent color. But scrolled, the button goes transparent/ink-bordered
   (two rules up) showing the dark header bar through it, so that same dark
   text becomes invisible. This selector's extra ".is-scrolled" class gives
   it higher specificity than ".accent-is-light .btn-primary", so it wins
   and restores white text by default; ".sticky-header-light" below is even
   more specific and correctly overrides back to dark ink on the rarer
   brand that also configures a light scrolled-header background. */
.site-header.is-scrolled .btn-schedule{ color:#fff; }
.site-header.is-scrolled .nav-toggle{ border-color: rgba(255,255,255,.6); color:#fff; }
.site-header.is-scrolled .nav-toggle.is-active{ background:#fff; color: var(--color-red-text); border-color:#fff; }
/* Scrolled Header Background Color can be a light color (e.g. a gold/yellow
   brand accent) — the white text above is unreadable on that, so switch to
   dark ink text instead. Driven automatically by bosch_hex_is_light() on the
   configured color, see inc/helpers.php. */
.sticky-header-light .site-header.is-scrolled{ border-bottom-color: rgba(0,0,0,.12); }
.sticky-header-light .site-header.is-scrolled .site-logo-sticky .logo-ink,
.sticky-header-light .site-header.is-scrolled .site-logo-sticky .logo-accent{ color: var(--color-ink); }
.sticky-header-light .site-header.is-scrolled .site-logo-sticky .logo-tld{ color: rgba(0,0,0,.6); }
.sticky-header-light .site-header.is-scrolled .site-logo-tagline{ color: rgba(0,0,0,.7); }
.sticky-header-light .site-header.is-scrolled .main-nav a{ color: var(--color-ink); }
.sticky-header-light .site-header.is-scrolled .main-nav a:hover{ color: rgba(0,0,0,.6); }
.sticky-header-light .site-header.is-scrolled .header-phone{ color: var(--color-ink); }
.sticky-header-light .site-header.is-scrolled .nav-toggle{ border-color: rgba(0,0,0,.4); color: var(--color-ink); }
.sticky-header-light .site-header.is-scrolled .nav-toggle.is-active{ background: var(--color-red); color:#fff; border-color: var(--color-ink); }
/* bosch_sticky_header_bg_color() is its own, independently-configurable
   setting — a brand can have a dark primary accent (fine as white button
   text normally) but still choose a light color for the scrolled header
   background specifically. .btn-schedule goes transparent-over-that-
   background in the scrolled state, so its text needs to follow the sticky
   header's own lightness, not the primary accent's. */
.sticky-header-light .site-header.is-scrolled .btn-schedule{ color: var(--color-ink); }
/* Same problem, sitewide: primary buttons/icons sit white text/icons on
   var(--color-red) (Brand Accent Color) or var(--color-accent-2) — fine for
   a dark accent, unreadable for a light one (e.g. Liebherr's gold #f1db48).
   accent-is-light / accent-2-is-light are computed per-brand in
   bosch_style_body_classes(), inc/helpers.php. */
.accent-is-light .btn-primary,
.accent-is-light #schedule-appointment button,
.accent-is-light #schedule-appointment input[type="submit"],
.accent-is-light .contact-fab-toggle,
.accent-is-light .back-to-top:hover,
.accent-is-light .bosch-modal-close:hover,
.accent-is-light .site-header.is-scrolled .nav-toggle.is-active{ color: var(--color-ink); }
/* The scrolled header's "Schedule a Visit" button (.btn-schedule, also
   .btn-primary) goes transparent-with-ink-border in the scrolled state — see
   the sticky-header-light rule above for its (light-background-dependent)
   text color there. On HOVER the background always flips to solid black
   (.site-header.is-scrolled .btn-schedule:hover, further up this file),
   regardless of any brand color — so hover text is unconditionally white.
   Higher specificity than both rules above so it wins for this one state. */
.site-header.is-scrolled .btn-schedule:hover{ color:#fff; }
.accent-2-is-light .bosch-form-step.is-active .bosch-form-step-num,
.accent-2-is-light .bosch-form-step.is-done .bosch-form-step-num,
.accent-2-is-light .why-item .ic,
.accent-2-is-light .expertise-fico,
.accent-2-is-light .filter-pill.is-active{ color: var(--color-ink); border: 1px solid var(--color-red);}

/* Ice Facet Card Corners (Site Settings -> Visual Effects) — opt-in via
   bosch_ice_facet_corners, off by default. One clipped diagonal corner,
   like a cut ice facet. */
.has-ice-facet-corners .card{ clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
/* Stainless Brushed Buttons (Site Settings -> Visual Effects) — opt-in via
   bosch_stainless_button, off by default. Static brushed-steel diagonal
   gradient fill instead of a flat accent color. */
.has-stainless-button .btn-primary{ background: linear-gradient(115deg, var(--color-red) 0%, var(--color-red-dark) 35%, var(--color-red) 55%, var(--color-red-dark) 80%, var(--color-red) 100%); background-size:220% 220%; }
.has-stainless-button .btn-primary:hover{ background-position: 70% 30%; }
/* Crystal Heading Accent (Site Settings -> Visual Effects) — opt-in via
   bosch_crystal_heading, off by default. Icy-clear gradient heading text —
   stops kept mid-tone (never near-white) and paired with a text-shadow for
   edge definition, same fix applied to Gold Foil Heading after it was found
   to blend into a light background. */
.has-crystal-heading .section-head h2{ background: linear-gradient(100deg, #4a90b8 10%, #8fd0e8 35%, #c7ecf5 50%, #8fd0e8 65%, #4a90b8 90%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 1px 1px rgba(0,0,0,.15); }
/* Craftsman Corner Brackets (Site Settings -> Visual Effects) — opt-in via
   bosch_bracket_corners, off by default. Small technical-drawing-style
   corner brackets on two opposite corners of each card. */
.has-bracket-corners .card{ position:relative; }
.has-bracket-corners .card::before,
.has-bracket-corners .card::after{ content:""; position:absolute; width:16px; height:16px; pointer-events:none; }
.has-bracket-corners .card::before{ top:8px; left:8px; border-top:2px solid var(--color-accent-2, var(--color-red)); border-left:2px solid var(--color-accent-2, var(--color-red)); }
.has-bracket-corners .card::after{ bottom:8px; right:8px; border-bottom:2px solid var(--color-accent-2, var(--color-red)); border-right:2px solid var(--color-accent-2, var(--color-red)); }
/* Accent Focus Ring (Site Settings -> Visual Effects) — opt-in via
   bosch_focus_ring_accent, off by default. Real accessibility feature, not
   purely decorative — a clearly visible focus ring for keyboard navigation,
   beyond whatever the browser default happens to be. */
.has-focus-ring-accent a:focus-visible,
.has-focus-ring-accent button:focus-visible,
.has-focus-ring-accent input:focus-visible,
.has-focus-ring-accent select:focus-visible,
.has-focus-ring-accent textarea:focus-visible{ outline: 3px solid var(--color-accent-2, var(--color-red)); outline-offset: 2px; }

/* Union Stitch Card Border (Site Settings -> Visual Effects) — opt-in via
   bosch_stitch_border, off by default. Double dashed inset border, like
   stitched denim or a warranty tag. */
.has-stitch-border .card{ border-style: dashed; position:relative; }
.has-stitch-border .card::before{ content:""; position:absolute; inset:6px; border:1px dashed var(--color-border); pointer-events:none; border-radius: calc(var(--radius-card, var(--radius)) - 2px); }
/* Vintage Emboss Heading (Site Settings -> Visual Effects) — opt-in via
   bosch_emboss_heading, off by default. Pressed-metal nameplate look via a
   light-above/dark-below double text-shadow instead of a flat color. */
.has-emboss-heading .section-head h2{ color: var(--color-ink); text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 -1px 1px rgba(0,0,0,.25); }
/* Riveted Corner Tabs (Site Settings -> Visual Effects) — opt-in via
   bosch_rivet_corners, off by default. Small hardware-style rivet dots,
   toolbox/workshop-panel feel. */
.has-rivet-corners .card{ position:relative; }
.has-rivet-corners .card::before,
.has-rivet-corners .card::after{ content:""; position:absolute; width:6px; height:6px; border-radius:50%; background: var(--color-border); box-shadow: inset 0 1px 1px rgba(0,0,0,.25); pointer-events:none; }
.has-rivet-corners .card::before{ top:10px; left:10px; }
.has-rivet-corners .card::after{ top:10px; right:10px; }
/* Workshop Amber Glow (Site Settings -> Visual Effects) — opt-in via
   bosch_amber_glow, off by default. Warm indicator-light glow on hover. */
.has-amber-glow .btn-primary{ position:relative; z-index:0; }
.has-amber-glow .btn-primary::before{ content:""; position:absolute; inset:-8px; z-index:-1; border-radius:inherit; background: radial-gradient(circle, rgba(255,176,59,.65), transparent 70%); opacity:0; transition: opacity .35s ease; }
.has-amber-glow .btn-primary:hover::before{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .has-amber-glow .btn-primary::before{ transition:none; } }
/* Nameplate Divider (Site Settings -> Visual Effects) — opt-in via
   bosch_nameplate_divider, off by default. A small bordered chip instead of
   a gradient bar, styled like a metal appliance nameplate. */
.has-nameplate-divider .section-head h2{ position:relative; padding-bottom:20px; }
.has-nameplate-divider .section-head h2::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:46px; height:6px; border:1px solid var(--color-accent-2, var(--color-red)); border-radius:2px; }
/* Architect's Brass Inlay Divider (Site Settings -> Visual Effects) —
   opt-in via bosch_brass_inlay_divider, off by default. Thin double-line
   brass divider with a small center diamond mark. */
.has-brass-inlay-divider .section-head h2{ position:relative; padding-bottom:22px; }
.has-brass-inlay-divider .section-head h2::before,
.has-brass-inlay-divider .section-head h2::after{ content:""; position:absolute; bottom:8px; width:26px; height:1px; background: var(--color-accent-2, var(--color-red)); }
.has-brass-inlay-divider .section-head h2::before{ left:calc(50% - 34px); }
.has-brass-inlay-divider .section-head h2::after{ left:calc(50% + 8px); }
.has-brass-inlay-divider .section-head{ position:relative; }
.has-brass-inlay-divider .section-head::after{ content:""; position:absolute; left:50%; top: calc(100% - 24px); transform:translate(-50%,-50%) rotate(45deg); width:7px; height:7px; background: var(--color-accent-2, var(--color-red)); }
/* Onyx Corner Fold (Site Settings -> Visual Effects) — opt-in via
   bosch_onyx_corner_fold, off by default. A small folded-corner accent in
   the top-right of each card, revealing a brass underside. */
.has-onyx-corner-fold .card{ position:relative; overflow:hidden; }
.has-onyx-corner-fold .card::after{ content:""; position:absolute; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 26px 26px 0; border-color: transparent var(--color-accent-2, var(--color-red)) transparent transparent; }
/* Blueprint Guide Lines — Hero only (Site Settings -> Visual Effects) —
   opt-in via bosch_blueprint_lines, off by default. Sparse vertical
   hairlines evoking architectural reference/guide lines. */
.has-blueprint-lines .hero{ position:relative; overflow:hidden; }
.has-blueprint-lines .hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 25%); }
.has-blueprint-lines .hero-grid{ position:relative; z-index:1; }
/* Champagne Foil Button Sheen (Site Settings -> Visual Effects) — opt-in
   via bosch_champagne_shine, off by default. Warm brass/champagne light
   sweep on hover. */
.has-champagne-shine .btn-primary{ position:relative; overflow:hidden; }
.has-champagne-shine .btn-primary::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background: linear-gradient(100deg, transparent, rgba(240,210,150,.55), transparent); transform: skewX(-20deg); transition: left .55s ease; }
.has-champagne-shine .btn-primary:hover::after{ left:130%; }
/* Signature Underline Reveal (Site Settings -> Visual Effects) — opt-in via
   bosch_signature_underline, off by default. Thin brass underline that
   draws in beneath section headings on page load. */
.has-signature-underline .section-head h2{ position:relative; padding-bottom:16px; }
.has-signature-underline .section-head h2::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:0; height:2px; background: var(--color-accent-2, var(--color-red)); animation: bosch-signature-draw 1.1s ease-out .2s forwards; }
@keyframes bosch-signature-draw{ from{ width:0; } to{ width:64px; } }
@media (prefers-reduced-motion: reduce){ .has-signature-underline .section-head h2::after{ animation:none; width:64px; } }

@media (max-width: 900px){
	.header-inner{ flex-wrap:wrap; }
	.site-logo-wrap{ order:1; }
	.header-cta{ order:2; gap:14px; }
	.main-nav{ display:none; order:3; width:100%; flex-direction:column; align-items:stretch; gap:0; padding: 8px 0 16px; border-top:1px solid var(--color-ink); }
	.main-nav.is-open{ display:flex; }
	.main-nav a{ display:block; width:100%; padding:14px 12px; border-bottom:1px solid var(--color-ink); }
	.nav-toggle{ display:flex; border-color: rgba(255,255,255,.6); color:#fff; }
	/* --mobile-header-bg (.site-header rule further down) defaults to white
	   when a brand hasn't set one — mobile-header-light is true in that case
	   too (bosch_style_body_classes()), so the hamburger nav-toggle needs to
	   default to dark ink there instead of the white/dark-header assumption
	   above. Two classes beats the one above on specificity, not just source
	   order, so this correctly wins whichever background is actually active. */
	.mobile-header-light .nav-toggle{ border-color: var(--color-ink); color: var(--color-ink); }
	.main-nav.is-open a{
		color:white;
	}
	.container{ padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
	/* Mobile-only logo + header background swap — both are opt-in via Site
	   Settings; with neither set this whole block is inert (no mobile logo
	   in the DOM to show, and the bg var falls back to the existing white). */
	.site-header{ background: var(--mobile-header-bg, #fff); }
	.has-mobile-logo .site-logo-mobile{ display:block; }
	.has-mobile-logo .site-logo-wrap > .site-logo-image,
	/* :not(.site-logo-sticky) matters here — the scrolled-state logo anchor
	   also carries the plain .site-logo class (class="site-logo
	   site-logo-sticky"), so without this exclusion this rule and
	   ".site-header.is-scrolled .site-logo-sticky{ display:flex; }" tie on
	   specificity and this one wins by being later in the file, hiding the
	   scrolled logo entirely on mobile and leaving only the tagline visible. */
	.has-mobile-logo .site-logo-wrap > .site-logo:not(.site-logo-sticky){ display:none; }
}

@media (max-width: 640px){
	.topbar .container > span:first-child{ display:none; }
	.topbar .container{ justify-content:center; }
}

.btn-schedule{ display:inline-flex; align-items:center; gap:8px; }
.btn-schedule-icon{ display:none; flex-shrink:0; }

@media (max-width: 480px){
	.header-phone{ display:none; }
	.header-cta{ gap:12px; }
	.btn-schedule{ border:1px solid var(--color-ink); padding:0; width:44px; height:44px; justify-content:center; border-radius:50%; flex-shrink:0; }
	.btn-schedule .btn-label{ display:none; }
	.btn-schedule-icon{ display:block; width:19px; height:19px; }
	.header-inner{ gap:10px; }
}

/* Hero */
.hero{ background: linear-gradient(135deg, var(--color-ink) 0%, #2c2c2c 100%); color:#fff; padding: 72px 0; }
/* Brushed-Steel Hero Texture (Site Settings -> Style) — a faint diagonal
   line texture over the hero, opt-in per brand via bosch_steel_texture. */
.has-steel-texture .hero{ position:relative; overflow:hidden; }
.has-steel-texture .hero::before{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 7px); mix-blend-mode: overlay; pointer-events:none; z-index:1; }
.has-steel-texture .hero-grid{ position:relative; z-index:2; }
/* Glass Door Sheen (Site Settings -> Visual Effects) — opt-in via
   bosch_glass_sheen, off by default. A slow diagonal light reflection sweep
   across the hero, like light glinting off a glass refrigerator door. */
.has-glass-sheen .hero{ position:relative; overflow:hidden; }
.has-glass-sheen .hero::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); transform: skewX(-20deg); animation: bosch-glass-sheen 7s ease-in-out infinite; pointer-events:none; z-index:1; }
.has-glass-sheen .hero-grid{ position:relative; z-index:2; }
@keyframes bosch-glass-sheen{ 0%{ left:-60%; } 45%, 100%{ left:130%; } }
@media (prefers-reduced-motion: reduce){ .has-glass-sheen .hero::after{ animation:none; } }
.hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items:center; }
/* Mirrors the two hero columns (form/text) purely visually — DOM order and
   reading order stay the same, only physical left/right placement flips —
   so the same markup works for either form position with no template edits. */
.form-left .hero-grid{ direction: rtl; }
.form-left .hero-grid > *{ direction: ltr; }

.hero-text{ background: var(--hero-text-bg, transparent) !important; padding: 25px 25px !important; border-radius: var(--radius-card, var(--radius)); }

@keyframes bosch-form-slide-in{ from{ opacity:0; transform: translateX(60px); } to{ opacity:1; transform: translateX(0); } }
@keyframes bosch-hero-text-slide-in{ from{ opacity:0; transform: translateX(-60px); } to{ opacity:1; transform: translateX(0); } }
@media (prefers-reduced-motion: no-preference){
	.form-animate .booking-card{ animation: bosch-form-slide-in .7s cubic-bezier(.16,1,.3,1) both; }
	.form-animate .hero-text{ animation: bosch-hero-text-slide-in .7s cubic-bezier(.16,1,.3,1) both; }
}
.hero h1{ color:#fff; }
.hero-sub{ color:#d8d8d8; font-size:18px; max-width:560px; }
.hero-badges{ display:flex; gap:18px; flex-wrap:wrap; margin: 22px 0 26px; }
.hero-badge{ display:flex; align-items:center; gap:8px; font-size:14px; color:#eaeaea; font-weight:600; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-media{ border-radius: var(--radius-card, var(--radius)); overflow:hidden; }

/* Hero: Editorial Style — corner frame/tags, pulsing kicker dot, and a
   frosted-glass answer panel in place of the plain badges row. */
.hero-editorial{ position:relative; overflow:hidden; }
.hero-tag-corner, .hero-tag-corner-bl{ position:absolute; z-index:2; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.hero-tag-corner{ top:22px; right:28px; }
.hero-tag-corner-bl{ bottom:22px; left:28px; }
.hero-corner{ position:absolute; width:26px; height:26px; z-index:2; border-color:rgba(255,255,255,.32); }
.hero-corner.tl{ top:16px; left:16px; border-top:1px solid; border-left:1px solid; }
.hero-corner.tr{ top:16px; right:16px; border-top:1px solid; border-right:1px solid; }
.hero-corner.bl{ bottom:16px; left:16px; border-bottom:1px solid; border-left:1px solid; }
.hero-corner.br{ bottom:16px; right:16px; border-bottom:1px solid; border-right:1px solid; }

.hero-kicker{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:.04em; color:#eaeaea; margin-bottom:14px; }
.hero-pulse-dot{ position:relative; width:8px; height:8px; border-radius:50%; background: var(--color-red); flex:none; }
.hero-pulse-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background: var(--color-red); animation: bosch-pulse-dot 1.8s ease-out infinite; }
@keyframes bosch-pulse-dot{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(2.6); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .hero-pulse-dot::after{ animation:none; display:none; } }

.hero-answer{ margin:20px 0 26px; padding:16px 18px; font-size:14.5px; line-height:1.6; color:#f0f0f0; background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius: var(--radius-card, var(--radius)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width:600px; }

.hero-meta{ display:flex; gap:28px; flex-wrap:wrap; margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); }
.hero-meta-item{ display:flex; flex-direction:column; font-size:13px; color:#c9c9c9; }
.hero-meta-item strong{ font-size:24px; color:#fff; line-height:1.15; margin-bottom:2px; }

@media (max-width:640px){
	.hero-tag-corner, .hero-tag-corner-bl{ display:none; }
	.hero-corner{ display:none; }
}

/* Homepage Hero Style: Bold Statline (bosch_hero_editorial = '2') — an
   accent-color "stamp" kicker, a huge faint decorative quote mark for an
   editorial-magazine feel, and a single bold divided trust line in place of
   both the checkmark badges row and the corner-frame treatment. */
.hero-bold{ position:relative; overflow:hidden; }
.hero-bold-watermark{
	position:absolute; top:-0.32em; left:24px; z-index:0;
	font-family: var(--font-heading, var(--font)); font-size:320px; line-height:1;
	color: rgba(255,255,255,.05); font-weight:800; pointer-events:none; user-select:none;
}
.hero-bold .hero-grid{ position:relative; z-index:1; }
.hero-bold-kicker{
	display:inline-block; background: var(--color-accent-2, var(--color-red)); color:#fff;
	font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
	padding:7px 14px; margin-bottom:18px;
}
.accent-2-is-light .hero-bold-kicker{ color: var(--color-ink); }
.hero-statline{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin: 22px 0 26px; }
.hero-statline span{ font-size:14px; font-weight:700; color:#f2f2f2; letter-spacing:.02em; position:relative; padding-left:18px; }
.hero-statline span:first-child{ padding-left:0; }
.hero-statline span:not(:first-child)::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:2px; height:14px; background: var(--color-accent-2, var(--color-red)); }
@media (max-width:640px){ .hero-bold-watermark{ font-size:160px; } }

/* Booking form */
.booking-card{ background:#fff; color: var(--color-ink); border-radius: var(--radius-card, 10px); padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.booking-card h3{ margin-bottom:4px; }
.booking-card .form-note{ font-size:12px; color: var(--color-ink-soft); margin-bottom:12px; }
/* Iframe mode: the vendor template already carries its own heading, copy
   and step styling, so the card is just a thin frame around it. */
.booking-card.is-iframe-form{ padding:6px; background:transparent; box-shadow:none; }
.booking-card.is-iframe-form .lead-form-embed{ min-height:0; }

/* Service-ticket style booking card — opt-in (Site Settings -> Style ->
   Booking Form: Service-Ticket Style). Styles OUR wrapper around the
   embedded form only; the iframe/script inside is a third-party embed and
   can't be restyled (cross-origin), so this dresses up the frame instead. */
.has-ticket-form .booking-card,
.has-ticket-form .booking-card.is-iframe-form{
	position:relative;
	background:#fff;
	border:1px solid var(--color-border);
	box-shadow: 0 4px 20px rgba(0,0,0,.08);
	padding:38px 22px 26px;
}
.has-ticket-form .booking-card::before{
	content:'BOOKING FORM';
	position:absolute; top:14px; left:22px;
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size:10px; font-weight:700; letter-spacing:1.5px;
	color: var(--color-ink-soft);
}
.has-ticket-form .booking-card .lead-form-embed{
	border-top: 2px dashed var(--color-border);
	border-bottom: 2px dashed var(--color-border);
	padding: 20px 0;
	margin: 6px 0 4px;
}
.has-ticket-form .booking-card::after{
	content:'';
	display:block;
	height:9px;
	margin-top:14px;
	background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px, currentColor 5px 6px, transparent 6px 9px, currentColor 9px 12px, transparent 12px 14px, currentColor 14px 17px, transparent 17px 20px);
	color: var(--color-ink);
	opacity:.5;
}

/* Booking-form step indicator */
.bosch-form-steps{ display:flex; align-items:flex-start; gap:6px; margin-bottom:20px; }
.bosch-form-step{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; position:relative; }
.bosch-form-step:not(:last-child)::after{
	content:''; position:absolute; top:13px; left:56%; width:88%; height:2px;
	background: var(--color-border); z-index:0;
}
.bosch-form-step.is-done:not(:last-child)::after{ background: var(--color-accent-2, var(--color-red)); }
.bosch-form-step-num{
	position:relative; z-index:1;
	width:26px; height:26px; border-radius:50%; flex-shrink:0;
	display:flex; align-items:center; justify-content:center;
	font-size:12px; font-weight:800;
	background: var(--color-bg-alt); color: var(--color-ink-soft);
	border:2px solid var(--color-border);
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.bosch-form-step-label{ font-size:11px; font-weight:600; color: var(--color-ink-soft); letter-spacing:.02em; }
.bosch-form-step.is-active .bosch-form-step-num{ background: var(--color-accent-2, var(--color-red)); border-color: var(--color-accent-2, var(--color-red)); color:#fff; }
.bosch-form-step.is-active .bosch-form-step-label{ color: var(--color-ink); }
.bosch-form-step.is-done .bosch-form-step-num{ background: var(--color-accent-2, var(--color-red)); border-color: var(--color-accent-2, var(--color-red)); color:#fff; }
.has-dark-booking-card .bosch-form-step-num{ background:#332e2b; border-color:rgba(255,255,255,.18); color:#b8b2ab; }
.has-dark-booking-card .bosch-form-step-label{ color:#b8b2ab; }
.has-dark-booking-card .bosch-form-step.is-active .bosch-form-step-label{ color:#f5f2ee; }
.has-dark-booking-card .bosch-form-step:not(:last-child)::after{ background: rgba(255,255,255,.18); }
.booking-cta-only{ text-align:center; }
.booking-cta-only .btn{ margin-top:4px; }
.form-row{ margin-bottom:14px; }
.form-row label{ display:block; font-weight:600; font-size:13px; margin-bottom:6px; }
.form-row input, .form-row select, .form-row textarea{
	width:100%; padding:12px 14px; border:1px solid var(--color-border); border-radius: 6px; font-size:15px; font-family: var(--font); background:#fff;
}
.form-row textarea{ resize: vertical; min-height:80px; }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-success{ background:#e9f7ee; border:1px solid var(--color-success); color:#155724; padding:14px; border-radius:6px; margin-bottom:14px; font-weight:600; }
.form-error{ background:#fdecea; border:1px solid var(--color-danger); color:#7a0c0c; padding:14px; border-radius:6px; margin-bottom:14px; font-weight:600; }

/* Best-effort styling for the proleadservice.com embedded widget. Only takes
   effect if the widget renders plain DOM inside #schedule-appointment rather
   than a Shadow DOM / iframe — deeper branding may need to be set from the
   proleadservice.com dashboard itself. */
.lead-form-embed{ min-height: 80px; }
/* Iframe embed mode (proleadservice.com "?template=" version) — it's a
   cross-origin document, so none of the #schedule-appointment rules below
   reach inside it; the vendor's own template controls its look and its
   built-in step UI. */
.lead-form-embed iframe.schedule{ width:100%; border:0; display:block; border-radius: var(--radius-card, 10px); overflow:hidden; }
#schedule-appointment{ font-family: var(--font); }
#schedule-appointment input,
#schedule-appointment select,
#schedule-appointment textarea{
	width:100%; height:46px; padding:10px 12px; border:1px solid var(--color-border); border-radius: var(--radius-btn, 6px); font-size:14px; font-family: var(--font); background:#fff; margin-bottom:10px;
}
#schedule-appointment textarea{
	min-height:45px; max-height:160px; resize:none;
}
/* Selects styled as their own thing (cream/beige) rather than matching the
   graphite inputs — sidesteps browsers that ignore custom dark backgrounds
   on the native open dropdown list (which would otherwise leave dark text
   unreadable against a dark control), and reads as an intentional touch
   rather than a hack. */
#schedule-appointment select{
	background:#f5f1e8; color:#2b2620; border-color:#e3dcc9;
}
#schedule-appointment select:focus{ background:#efe8d8; }
#schedule-appointment button,
#schedule-appointment input[type="submit"]{
	display:inline-flex; align-items:center; justify-content:center; width:100%; padding:12px 24px; border-radius: var(--radius-btn, var(--radius)); font-weight:700; border:2px solid transparent; cursor:pointer; font-size:15px; background: var(--color-red); color:#fff;
}
#schedule-appointment button:hover,
#schedule-appointment input[type="submit"]:hover{ background: var(--color-red-dark); }
#schedule-appointment label{ display:block; font-weight:600; font-size:12px; margin-bottom:4px; }

/* Graphite booking card (Site Settings -> Style -> Graphite Booking Card) —
   a dark card instead of white, for sitting on a dark/photo hero. */
.has-dark-booking-card .booking-card{ background:#262220; color:#f2efea; box-shadow: 0 20px 60px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08); }
.has-dark-booking-card .booking-card h3{ color:#f5f2ee; }
.has-dark-booking-card .booking-card .form-note{ color:#b8b2ab; }
.has-dark-booking-card .booking-card .form-note a{ color: var(--color-accent-2-on-dark, var(--color-red)); }
/* The widget renders its own markup we don't fully control — "Category"-
   style field headings can come through as plain text, not <label>, and the
   widget's own CSS sometimes wins on specificity. Set color broadly on the
   container (covers anything we haven't explicitly targeted) and force the
   label/heading-style text specifically, since dark-on-dark here is a
   readability bug, not a style preference. */
.has-dark-booking-card #schedule-appointment{ color: var(--color-accent-2-on-dark, #e6e1da); }
.has-dark-booking-card #schedule-appointment label,
.has-dark-booking-card #schedule-appointment p,
.has-dark-booking-card #schedule-appointment span,
.has-dark-booking-card #schedule-appointment div,
.has-dark-booking-card #schedule-appointment h1,
.has-dark-booking-card #schedule-appointment h2,
.has-dark-booking-card #schedule-appointment h3,
.has-dark-booking-card #schedule-appointment h4{ color: var(--color-accent-2-on-dark, #e6e1da) !important; }
.has-dark-booking-card #schedule-appointment input,
.has-dark-booking-card #schedule-appointment textarea{ background:#332e2b; border-color:rgba(255,255,255,.14); color:#f5f2ee !important; }
/* Selects stay beige/cream even in the dark card — native dropdown lists in
   several browsers ignore a dark custom background, so fighting for dark
   selects here just risks dark-text-on-dark again. Beige reads as a
   deliberate accent instead. */
.has-dark-booking-card #schedule-appointment select{ background:#f5f1e8 !important; color:#2b2620 !important; border-color:#e3dcc9; }
.has-dark-booking-card #schedule-appointment select:focus{ background:#efe8d8 !important; }
.has-dark-booking-card #schedule-appointment option{ color:#1c1c1c; }

/* Cards / Grids */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } .hero-grid{ grid-template-columns:1fr; } }
@media (max-width: 600px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } .form-grid-2{ grid-template-columns:1fr; } }

.card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-card, var(--radius)); padding: 26px; transition: box-shadow .15s ease, transform .15s ease; }
.card:hover{ box-shadow: 0 10px 30px rgba(0,0,0,.08); transform: translateY(-2px); }
/* Elevated Card Shadow (Site Settings -> Style) — opt-in via
   bosch_elevated_cards, off by default. A deeper, warm-toned lift on hover. */
.has-elevated-cards .card{ box-shadow: 0 12px 28px rgba(60,30,10,.08); transition: box-shadow .3s ease, transform .3s ease; }
.has-elevated-cards .card:hover{ box-shadow: 0 30px 60px rgba(60,30,10,.16); transform: translateY(-6px); }
/* Heritage Double-Frame Cards (Site Settings -> Style) — opt-in via
   bosch_heritage_frame, off by default. An inset gold double-border. */
.has-heritage-frame .card{ position:relative; border-color: rgba(156,122,46,.35); }
.has-heritage-frame .card::before{ content:""; position:absolute; inset:7px; border:1px solid rgba(156,122,46,.28); border-radius: calc(var(--radius-card, var(--radius)) - 4px); pointer-events:none; }
/* Decorative Corner Ribbon (Site Settings -> Style) — opt-in via
   bosch_corner_ribbon, off by default. A small diagonal accent-color
   flourish across the top-left corner, boutique/artisan-label style. */
.has-corner-ribbon .card{ position:relative; overflow:hidden; }
.has-corner-ribbon .card::after{ content:""; position:absolute; top:14px; left:-30px; width:90px; height:6px; background: var(--color-accent-2, var(--color-red)); transform:rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
/* Noir Card Mode (Site Settings -> Style) — opt-in via bosch_noir_cards,
   off by default. Near-black cards with a thin brass edge. */
.has-noir-cards .card{ background: var(--color-ink); border-color: rgba(232,200,116,.28); }
.has-noir-cards .card h3{ color:#fff; }
.has-noir-cards .card p{ color: rgba(255,255,255,.72); }
/* Error-code card title — was hardcoded to var(--color-ink) inline, which
   made it unreadable (dark text on a dark card) once Noir Card Mode is on. */
.error-code-title{ color: var(--color-ink); }
.has-noir-cards .error-code-title{ color: rgba(255,255,255,.72); }
.has-noir-cards .card:hover{ border-color: rgba(232,200,116,.55); }
/* Metallic Button Glow (Site Settings -> Style) — opt-in via
   bosch_metallic_glow, off by default. A warm brass glow pulses in behind
   primary buttons on hover, on top of whatever the normal hover color
   change already does. */
.has-metallic-glow .btn-primary{ position:relative; z-index:0; }
.has-metallic-glow .btn-primary::before{ content:""; position:absolute; inset:-8px; z-index:-1; border-radius:inherit; background: radial-gradient(circle, rgba(232,200,116,.65), transparent 70%); opacity:0; transition: opacity .35s ease; }
.has-metallic-glow .btn-primary:hover::before{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .has-metallic-glow .btn-primary::before{ transition:none; } }
.has-borderless-cards .card,
.has-borderless-cards .appliance-card{ border:0; box-shadow: 0 2px 14px rgba(0,0,0,.07); }
.has-borderless-cards .appliance-card:hover{ box-shadow: 0 10px 26px rgba(0,0,0,.1); }
.has-card-accent .card{ border-top: 6px solid var(--color-accent-2, var(--color-red)); }
/* Monolith Panel Cards (Site Settings -> Visual Effects) — opt-in via
   bosch_monolith_cards, off by default. Flush, borderless panels with a
   single thin hairline divider instead of a shadow/border box, for an
   ultra-minimal integrated-appliance look. */
.has-monolith-cards .card{ background:transparent; border:0; border-bottom:1px solid var(--color-border); border-radius:0; box-shadow:none; padding: 26px 0; }
.has-monolith-cards .card:hover{ box-shadow:none; transform:none; border-bottom-color: var(--color-accent-2, var(--color-red)); }
/* Cool Blue Button Glow (Site Settings -> Visual Effects) — opt-in via
   bosch_cool_glow, off by default. Ice-blue glow pulses in behind primary
   buttons on hover. */
.has-monolith-cards{
    padding: 26px !important;
}
.has-monolith-cards .card:hover{
    border: 1px solid #735990 !important;
}
.has-cool-glow .btn-primary{ position:relative; z-index:0; }
.has-cool-glow .btn-primary::before{ content:""; position:absolute; inset:-8px; z-index:-1; border-radius:inherit; background: radial-gradient(circle, rgba(115,89,144,.65), transparent 70%); opacity:0; transition: opacity .35s ease; }
.has-cool-glow .btn-primary:hover::before{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .has-cool-glow .btn-primary::before{ transition:none; } }
.has-cool-glow .btn-primary{ background: var(--color-accent-2, var(--color-red)); }
.has-cool-glow .btn-primary:hover{ background: var(--color-accent-2-dark, #9e4000); }
.has-cool-glow .btn-primary{ position:relative; z-index:0; }
.has-cool-glow .btn-primary::before{ content:""; position:absolute; inset:-8px; z-index:-1; border-radius:inherit; background: radial-gradient(circle, rgba(120,190,230,.6), transparent 70%); opacity:0; transition: opacity .35s ease; }
.has-cool-glow .btn-primary:hover::before{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .has-cool-glow .btn-primary::before{ transition:none; } }
.has-card-accent .appliance-card{ position:relative; }
.has-card-accent .appliance-card::before{
	content:''; position:absolute; left:0; top:0; bottom:0; width:7px;
	background: linear-gradient(180deg, var(--color-red), var(--color-accent-2, var(--color-red)));
	transform: scaleY(0); transform-origin: top;
	transition: transform .3s ease;
}
.has-card-accent .appliance-card:hover::before{ transform: scaleY(1); }

/* Animated underline on hover — opt-in (Site Settings -> Style -> Animated
   Link Underlines), scoped to genuine text links (nav, footer, in-content,
   card "learn more" links, tags) and NOT full-card links or buttons, since
   an underline sliding under an entire card or button looks wrong. */
.has-link-underline .main-nav a,
.has-link-underline .site-footer a,
.has-link-underline .card-link,
.has-link-underline .breadcrumbs a,
.has-link-underline .entry-content a,
.has-link-underline .tag-list a{
	position: relative;
	text-decoration: none;
}
.has-link-underline .main-nav a::after,
.has-link-underline .site-footer a::after,
.has-link-underline .card-link::after,
.has-link-underline .breadcrumbs a::after,
.has-link-underline .entry-content a::after,
.has-link-underline .tag-list a::after{
	content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
	background: currentColor;
	transform: scaleX(0); transform-origin: left;
	transition: transform .25s ease;
}
.has-link-underline .main-nav a:hover,
.has-link-underline .site-footer a:hover,
.has-link-underline .card-link:hover,
.has-link-underline .breadcrumbs a:hover,
.has-link-underline .entry-content a:hover,
.has-link-underline .tag-list a:hover{
	text-decoration: none;
}
.has-link-underline .main-nav a:hover::after,
.has-link-underline .site-footer a:hover::after,
.has-link-underline .card-link:hover::after,
.has-link-underline .breadcrumbs a:hover::after,
.has-link-underline .entry-content a:hover::after,
.has-link-underline .tag-list a:hover::after{
	transform: scaleX(1);
}
/* A round, neutral-tinted badge behind every card icon — emoji fallbacks
   vary wildly in their own color/weight/style, and floating them bare on a
   white card reads as an inconsistent, mismatched set. A uniform circle
   gives any mix of glyphs (or uploaded icon images) one consistent visual
   language regardless of what the individual icon actually is. */
.card-icon{ width:90px; height:90px; background: var(--color-bg-alt); color: var(--color-red-text); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:14px; font-weight:800; overflow:hidden; transition: transform .3s ease, color .3s ease; }
.card-icon .icon-img{ width:100%; height:100%; object-fit:contain; }
.card:hover .card-icon{ transform: scale(1.15); }
.card h3{ margin-bottom:8px; }
.card-link{ font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:6px; }

.testimonial-card{ display:flex; flex-direction:column; }
.testimonial-stars{ color: var(--color-red-text); font-size:18px; letter-spacing:2px; margin-bottom:12px; }
.testimonial-text{ flex:1; font-size:15px; line-height:1.65; color: var(--color-ink); margin-bottom:18px; }
.testimonial-author{ display:flex; flex-direction:column; gap:2px; font-size:14px; }
.testimonial-author strong{ font-size:15px; }
.testimonial-author span{ color: var(--color-ink-soft); font-size:13px; }
/* Collapsed to one row (matches .grid-3's 3 columns) until "Show More
   Reviews" is clicked — see the click handler in assets/js/main.js. */
.testimonials-grid.is-collapsed .testimonial-card:nth-child(n+4){ display:none; }
.testimonials-load-more-wrap{ text-align:center; margin-top:32px; }

/* Appliance category tile grid — used instead of a fixed-column .grid when
   the number of categories isn't guaranteed to divide evenly (Monogram has
   10, most brands have 7-9). Flexbox + justify-content:center means an
   incomplete last row centers itself instead of trailing off at the left
   edge with a large empty gap on the right. Cards keep a fixed-ish width via
   flex-basis (no grow) so they stay visually uniform rather than stretching
   to fill leftover space. */
.appliance-tile-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.appliance-tile-grid .appliance-card{ flex: 0 1 260px; }
.appliance-tile-grid .card{ flex: 0 1 320px; }
@media (max-width:640px){
	.appliance-tile-grid{ gap:16px; }
	.appliance-tile-grid .card, .appliance-tile-grid .appliance-card{ flex-basis:100%; max-width:320px; }
}

.appliance-card{ display:block; background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-card, var(--radius)); overflow:hidden; text-align:center; padding: 22px 14px; }
.appliance-card:hover{ text-decoration:none; border-color: var(--color-red); }
.appliance-card .ic{ font-size: 30px; margin: 0 auto 10px; width:100px; height:100px; border-radius:50%; background: var(--color-bg-alt); display:flex; align-items:center; justify-content:center; transition: transform .3s ease; }
.appliance-card .ic .icon-img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.appliance-card:hover .ic{ transform: scale(1.25); }
@media (prefers-reduced-motion: reduce){
	.card-icon, .appliance-card .ic{ transition:none; }
	.card:hover .card-icon, .appliance-card:hover .ic{ transform:none; }
}

/* Service Area "pin" cards — gentle bobbing animation on the icon, whether
   it's the pin emoji fallback or a custom-uploaded image (this animates the
   wrapper, not the content inside it, so it works either way). Staggered
   per card so they bob out of sync rather than all moving in unison. */
#service-area .appliance-card .ic{ animation: bosch-pin-bounce 2.4s ease-in-out infinite; }
#service-area .appliance-card:nth-child(2) .ic{ animation-delay:.15s; }
#service-area .appliance-card:nth-child(3) .ic{ animation-delay:.3s; }
#service-area .appliance-card:nth-child(4) .ic{ animation-delay:.45s; }
#service-area .appliance-card:nth-child(5) .ic{ animation-delay:.6s; }
@keyframes bosch-pin-bounce{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce){ #service-area .appliance-card .ic{ animation: none; } }
.appliance-card strong{ display:block; color: var(--color-ink); font-size:15px; }

/* Service Area: map layout — cities as a self-centering flex grid (3 up,
   any remainder centers itself below) next to a map panel. Google's simple
   keyless embed URL only ever renders a light map, so a CSS filter is used
   to fake a dark one instead of requiring a paid Maps JS API key. */
.service-area-layout{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:40px; align-items:center; }
.service-area-cities{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
/* City tiles are square, so an uploaded square icon image and the label sit
   in a balanced box instead of a tall card. */
.service-area-cities .appliance-card{ flex: 0 1 150px; width:150px; aspect-ratio: 1 / 1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:14px; }
/* Id-scoped so it also wins over the per-skin .appliance-card .ic sizes,
   which are tuned for the larger category tiles and would overflow a
   150px square city tile. */
#service-area .service-area-cities .appliance-card .ic{ margin:0; width:64px; height:64px; }
/* The map panel is a fixed 3:2 frame and the uploaded image is contained in
   it, so the whole map is always visible (cover used to crop the edges — the
   Miami pin fell outside the frame). The panel background only shows as
   letterboxing when the image's own ratio isn't 3:2, so it follows the
   image's own light backdrop rather than the dark ink color. */
.service-area-map{ position:relative; aspect-ratio: 3 / 2; border-radius: var(--radius-card, var(--radius)); overflow:hidden; box-shadow: 0 20px 50px rgba(0,0,0,.25); background:#fff; }
.service-area-map:has(iframe){ background: var(--color-ink); }
.service-area-map iframe{ position:absolute; inset:0; width:100%; height:100%; filter: invert(92%) hue-rotate(180deg) brightness(95%) contrast(90%); }
.service-area-map img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
@media (max-width: 900px){
	.service-area-layout{ grid-template-columns:1fr; }
}

.problem-item{ display:flex; gap:14px; padding: 18px 0; border-bottom:1px solid var(--color-border); }
.problem-item:last-child{ border-bottom:none; }
.problem-item .num{ font-weight:800; color: var(--color-red-text); font-size:20px; min-width:34px; }

.why-item{ display:flex; gap:14px; align-items:flex-start; }
.why-item .ic{ width:40px; height:40px; border-radius:50%; background: var(--color-accent-2, var(--color-red)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
/* Enamel Gloss Icons (Site Settings -> Style) — opt-in via bosch_enamel_icons,
   off by default. A glossy highlight sheen across round colored icon badges. */
.has-enamel-icons .why-item .ic,
.has-enamel-icons .expertise-fico{ position:relative; overflow:hidden; }
.has-enamel-icons .why-item .ic::before,
.has-enamel-icons .expertise-fico::before{ content:""; position:absolute; top:-35%; left:-15%; width:130%; height:90%; background: radial-gradient(ellipse at top left, rgba(255,255,255,.6), transparent 65%); pointer-events:none; }

/* Homepage "Technician Expertise" section — see
   bosch_render_home_expertise_section() in inc/template-tags.php. */
.text-accent{ color: var(--color-red-text); }
.expertise-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:start; }
.expertise-intro h2{ margin-bottom:14px; }
.expertise-features{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:22px; }
.expertise-features li{ display:flex; gap:16px; align-items:flex-start; }
.expertise-fico{ width:44px; height:44px; border-radius:50%; background: var(--color-accent-2, var(--color-red)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; overflow:hidden; }
.expertise-fico .icon-img{ width:100%; height:100%; object-fit:cover; }
.expertise-fbody{ display:flex; flex-direction:column; gap:2px; }
.expertise-fbody strong{ font-size:16px; }
.expertise-fbody span{ color: var(--color-ink-soft); font-size:14.5px; line-height:1.6; }

.expertise-card{ background: var(--color-bg-alt); border:1px solid var(--color-border); border-radius: var(--radius-card, var(--radius)); padding:32px; }
.expertise-card h3{ margin-bottom:20px; }
.expertise-proclist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.expertise-proc{ display:flex; align-items:center; gap:14px; padding-bottom:18px; border-bottom:1px solid var(--color-border); }
.expertise-proc:last-child{ border-bottom:none; padding-bottom:0; }
.expertise-proc-ico{ width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--color-border); color: var(--color-red-text); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; overflow:hidden; }
.expertise-proc-ico .icon-img{ width:100%; height:100%; object-fit:cover; }
.expertise-proc-body{ display:flex; flex-direction:column; gap:2px; flex:1; }
.expertise-proc-body strong{ font-size:15px; }
.expertise-proc-body span{ color: var(--color-ink-soft); font-size:13.5px; line-height:1.55; }
.expertise-proc-num{ font-weight:800; font-size:15px; color: var(--color-border); font-family: var(--font-heading, var(--font)); flex-shrink:0; }

.expertise-author{ display:flex; gap:14px; align-items:flex-start; margin-top:28px; padding-top:24px; border-top:1px solid var(--color-border); }
.expertise-author-avatar{ width:56px; height:56px; border-radius:50%; overflow:hidden; flex-shrink:0; display:block; }
.expertise-author-avatar img{ width:100%; height:100%; object-fit:cover; }
.expertise-author-body{ display:flex; flex-direction:column; gap:2px; }
.expertise-author-role{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--color-ink-soft); }
.expertise-author-name{ font-weight:800; font-size:15px; }
.expertise-author-name a{ color: var(--color-ink); }
.expertise-author-bio{ font-size:13.5px; color: var(--color-ink-soft); margin:4px 0 6px; }
.expertise-author-link{ font-weight:700; font-size:13px; }
@media (max-width: 900px){ .expertise-grid{ grid-template-columns: 1fr; gap:36px; } }

/* FAQ */
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding: 18px 0; font-weight:700; font-size:16px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; color: var(--color-ink); }
.faq-q .plus{ color: var(--color-red-text); font-size:22px; flex-shrink:0; }
.faq-a{ display:none; padding: 0 0 18px; color: var(--color-ink-soft); }
.faq-item.is-open .faq-a{ display:block; }
.faq-item.is-open .plus{ transform: rotate(45deg); }

/* Breadcrumbs */
.breadcrumbs{ font-size:13px; color: var(--color-ink-soft); padding: 14px 0; }
.breadcrumbs a{ color: var(--color-ink-soft); }
.breadcrumbs a:hover{ color: var(--color-red-text); }

/* Severity badges (error codes) */
.badge{ display:inline-block; padding:4px 12px; border-radius: var(--radius-btn, 999px); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.badge-low{ background:#e9f7ee; color: var(--color-success); }
.badge-medium{ background:#fff4e5; color: var(--color-warning); }
.badge-high{ background:#fdecea; color: var(--color-danger); }

.callout{ border-radius: var(--radius-card, var(--radius)); padding: 22px 24px; margin: 26px 0; }
.callout-danger{ background:#fdecea; border:1px solid #f3c1c1; }
.callout-diy{ background:#eef6ff; border:1px solid #bcd9f7; }
.callout h4{ margin-bottom:8px; }

.sticky-cta{ position: fixed; bottom:0; left:0; right:0; background: var(--color-ink); color:#fff; padding:14px 20px; display:none; align-items:center; justify-content:space-between; gap:14px; z-index:60; }
@media (max-width: 780px){ .sticky-cta{ display:flex; } body{ padding-bottom: 74px; } }

.back-to-top{
	position: fixed; right:24px; bottom:24px; z-index:59;
	width:50px; height:50px; border-radius:50%; border:none;
	background: var(--color-ink); color:#fff; font-size:18px; line-height:1;
	display:flex; align-items:center; justify-content:center; cursor:pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.25);
	opacity:0; visibility:hidden; transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease, bottom .2s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--color-red); }
/* Stack above the contact-fab toggle (also 50px, same corner) instead of
   overlapping it — only relevant where the fab is actually shown. */
.has-contact-fab .back-to-top{ bottom:88px; }
@media (max-width: 780px){ .back-to-top{ bottom:88px; right:14px; width:40px; height:40px; font-size:18px; } .has-contact-fab .back-to-top{ bottom:88px; } }

/* Floating contact widget: pulsing headset toggle, expands into Call/Schedule
   pills. Desktop &amp; tablet only — the sticky call bar already covers this
   job on mobile, so showing both would be redundant. */
.contact-fab{ position:fixed; right:24px; bottom:24px; z-index:61; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
@media (max-width: 780px){ .contact-fab{ display:none; } }

.contact-fab-menu{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; max-height:0; overflow:hidden; padding-top:4px; transition: max-height .3s ease; }
.contact-fab.is-open .contact-fab-menu{ max-height:220px; }

.contact-fab-action{ display:flex; align-items:center; gap:10px; background:#fff; color: var(--color-ink); border:1px solid var(--color-border); border-radius:999px; padding:8px 18px 8px 8px; font-weight:700; font-size:14px; text-decoration:none; box-shadow:0 10px 24px rgba(0,0,0,.18); opacity:0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.contact-fab.is-open .contact-fab-action{ opacity:1; transform:translateY(0); }
.contact-fab-action:hover{ text-decoration:none; border-color: var(--color-red); }
.contact-fab-action-icon{ width:30px; height:30px; border-radius:50%; background: var(--color-ink); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.contact-fab-toggle{ position:relative; width:50px; height:50px; border-radius:50%; border:none; background: var(--color-red); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.3); transition: background .2s ease, transform .2s ease; }
.contact-fab-toggle svg{ width:21px; height:21px; }
.contact-fab-toggle::before{ content:""; position:absolute; inset:0; border-radius:50%; background: var(--color-red); z-index:-1; animation: bosch-fab-pulse 2.2s ease-out infinite; }
.contact-fab.is-open .contact-fab-toggle{ background: var(--color-ink); transform: rotate(15deg); }
.contact-fab.is-open .contact-fab-toggle::before{ animation:none; opacity:0; }
@keyframes bosch-fab-pulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.9); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .contact-fab-toggle::before{ animation:none; display:none; } }

/* Booking popup */
body.bosch-modal-open{ overflow:hidden; }
.bosch-modal-overlay{
	display:none; position:fixed; inset:0; z-index:200;
	background:rgba(0,0,0,.6); padding:24px; overflow-y:auto;
	align-items:flex-start; justify-content:center;
}
.bosch-modal-overlay.is-open{ display:flex; }
.bosch-modal-panel{
	position:relative; background:transparent; width:100%; max-width:480px;
	margin-top:5vh; animation: bosch-modal-in .25s ease both;
}
@keyframes bosch-modal-in{ from{ opacity:0; transform: translateY(20px) scale(.98); } to{ opacity:1; transform: translateY(0) scale(1); } }
.bosch-modal-close{
	position:absolute; top:-14px; right:-14px; z-index:1;
	width:34px; height:34px; border-radius:50%; border:none;
	background:#fff; color: var(--color-ink); font-size:20px; line-height:1;
	cursor:pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.bosch-modal-close:hover{ background: var(--color-red); color:#fff; }

/* Cookie consent banner */
.bosch-cookie-banner{
	display:none; position:fixed; left:16px; right:16px; bottom:16px; z-index:190;
	max-width:640px; margin:0 auto;
	background: var(--color-ink); color:#e8e6e3;
	border-radius: var(--radius-card, 10px);
	padding:18px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
	align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.bosch-cookie-banner.is-visible{ display:flex; animation: bosch-cookie-in .3s ease both; }
@keyframes bosch-cookie-in{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform: translateY(0); } }
.bosch-cookie-text{ font-size:13px; line-height:1.5; color:#cfcbc5; flex:1 1 260px; }
.bosch-cookie-text a{ color:#fff; text-decoration:underline; }
.bosch-cookie-actions{ display:flex; gap:10px; flex-shrink:0; }
.bosch-cookie-actions .btn{ padding:9px 16px; }
.bosch-cookie-actions .btn-outline-dark{ border-color:rgba(255,255,255,.3); color:#fff; }
.bosch-cookie-actions .btn-outline-dark:hover{ background:rgba(255,255,255,.1); color:#fff; }
@media (max-width: 480px){ .bosch-cookie-banner{ flex-direction:column; align-items:stretch; } .bosch-cookie-actions{ justify-content:flex-end; } }

/* Footer */
.site-footer{ background: var(--color-footer-bg, var(--color-ink)); color:#cfcfcf; padding: 60px 0 24px; position:relative; }
/* Footer Gradient Background (Site Settings -> Style) — opt-in via
   bosch_footer_gradient, off by default. Colors and angle are each
   individually configurable; blank colors fall back to the brand's own
   accent colors so it still looks right with zero extra setup. Replaces
   the flat --color-footer-bg for the whole footer, not just an accent line. */
.has-footer-gradient .site-footer{
	background: linear-gradient(var(--footer-gradient-angle, 90deg), var(--footer-gradient-from, var(--color-red)), var(--footer-gradient-to, var(--color-accent-2, var(--color-red))));
}
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
.site-footer h4{ color:#fff; font-size:15px; margin-bottom:16px; }
.site-footer p{ color:#cfcfcf; }
.site-footer a{ color:#cfcfcf; }
.site-footer a:hover{ color:#fff; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
/* Footer column lists that can grow past a comfortable height (e.g. the
   Appliances column, anywhere from 2 to 25+ categories depending on the
   brand) collapse to the first 3 items with a "Show more" toggle rather
   than stretching the whole footer vertically. See the click handler in
   assets/js/main.js. */
.footer-collapsible-list.is-collapsed li:nth-child(n+4){ display:none; }
.footer-list-toggle{ background:none; border:none; padding:0; margin-top:10px; color:#cfcfcf; font-size:13px; font-weight:700; text-decoration:underline; cursor:pointer; }
.footer-list-toggle:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid #3a3a3a; padding-top:20px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* Table (models / specs) */
.spec-table-wrap{ width:100%; overflow-x:auto; }
table.spec-table{ width:100%; border-collapse: collapse; margin: 20px 0; }
table.spec-table th, table.spec-table td{ text-align:left; padding: 10px 14px; border-bottom:1px solid var(--color-border); font-size:14px; }
table.spec-table th{ width:220px; color: var(--color-ink-soft); font-weight:600; }
@media (max-width: 480px){
	table.spec-table th{ width:auto; min-width:130px; }
}

.tag-list{ display:flex; flex-wrap:wrap; gap:8px; margin: 14px 0; }
.tag-list a{ background: var(--color-bg-alt); border:1px solid var(--color-border); padding:6px 12px; border-radius:999px; font-size:13px; color: var(--color-ink); }
.tag-list a:hover{ border-color: var(--color-red); color: var(--color-red-text); text-decoration:none; }

/* Category-pill filters (Models / Error Codes archives) */
/* justify-content:center means a wrapped last row (common once a brand has
   more than ~8-9 categories, e.g. Monogram's 10) centers itself instead of
   trailing off at the left edge with empty space on the right. */
.filter-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:32px; }
.filter-pill{
	position:relative;
	display:inline-flex; align-items:center;
	background:#fff; border:1px solid var(--color-border); border-radius:999px;
	padding:7px 14px; font-size:13.5px; font-weight:600; color: var(--color-ink-soft);
	cursor:pointer; transition: all .15s ease;
}
.filter-pill:hover{ border-color: var(--color-accent-2, var(--color-red)); color: var(--color-ink); }
.filter-pill.is-active{ background: var(--color-accent-2, var(--color-red)); border-color: var(--color-accent-2, var(--color-red)); color:#fff; }
/* Small floating circle badge, top-right corner of the pill — instead of
   plain inline text — so the count reads like a notification badge. */
.filter-pill .filter-count{
	position:absolute; top:-9px; right:-9px; z-index:1;
	display:flex; align-items:center; justify-content:center;
	min-width:20px; height:20px; padding:0 5px; border-radius:50%;
	background: var(--color-ink); color:#fff; font-size:10px; font-weight:700; line-height:1;
	box-shadow: 0 0 0 2px #fff;
}
.filter-pill.is-active .filter-count{ background:#fff; color: var(--color-accent-2-text, var(--color-red-text)); box-shadow: 0 0 0 2px var(--color-accent-2, var(--color-red)); }
.filter-item.is-overflow{ display:none; }

.area-group-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin: 22px 0; }
.area-group-card{ background: var(--color-bg-alt); border:1px solid var(--color-border); border-radius: var(--radius-card, var(--radius)); padding:16px 18px; }
.area-group-card h4{ margin-bottom:6px; font-size:15px; color: var(--color-ink); }
a.area-group-card{ display:block; text-decoration:none; transition: border-color .15s ease, transform .15s ease; }
a.area-group-card:hover{ border-color: var(--color-red); transform: translateY(-2px); }
a.area-group-card:hover h4{ color: var(--color-red-text); }
.area-group-card p{ margin:0; font-size:13px; color: var(--color-ink-soft); line-height:1.5; }
@media (max-width: 900px){ .area-group-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .area-group-grid{ grid-template-columns: 1fr; } }

.related-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
@media (max-width: 900px){ .related-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .related-grid{ grid-template-columns: 1fr; } }

.page-hero{ background: var(--color-bg-alt); padding: 44px 0; border-bottom:1px solid var(--color-border); }
.page-hero h1{ margin-bottom:10px; }
.page-hero .lead{ font-size:17px; max-width:760px; }

/* Featured Image set on the page/post → dark photo hero with light text.
   No Featured Image → unchanged light background with dark text. */
.page-hero.has-hero-photo{ background-color: var(--color-ink); background-size:cover; background-position:center; padding:72px 0; border-bottom:none; }
.page-hero.has-hero-photo .eyebrow{ color: rgba(255,255,255,.85); }
.page-hero.has-hero-photo h1{ color:#fff; }
.page-hero.has-hero-photo .lead{ color: rgba(255,255,255,.9); }
.page-hero.has-hero-photo a:not(.btn){ color:#fff; }

/* Appliance Feature Panels — large photo-background category panels used
   instead of the small-tile grid when a brand has few (<=3) visible
   appliance categories (a narrow specialist like Liebherr), so the page
   reads as intentionally focused rather than sparse. See
   bosch_appliance_feature_layout_enabled() in inc/helpers.php. Background
   photo comes from each appliance category's own Featured Image; falls back
   to a plain ink-color panel when no photo is set. */
.appliance-feature-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:24px; }
.appliance-feature-panel{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	min-height:340px;
	padding:32px;
	border-radius: var(--radius-card, var(--radius));
	background-color: var(--color-ink);
	background-size:cover;
	background-position:center;
	text-decoration:none;
	color:#fff;
	overflow:hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.appliance-feature-panel:hover{ transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,.22); }
.appliance-feature-title{ display:block; font-family:var(--font-heading, var(--font)); font-size:26px; font-weight:800; margin-bottom:10px; }
.appliance-feature-intro{ display:block; color:rgba(255,255,255,.85); font-size:15px; line-height:1.5; margin-bottom:16px; }
.appliance-feature-link{ display:inline-block; font-weight:700; color:#fff; border-bottom:2px solid var(--color-accent-2, var(--color-red)); padding-bottom:2px; width:max-content; }
@media (max-width:640px){ .appliance-feature-grid{ grid-template-columns:1fr; } .appliance-feature-panel{ min-height:260px; padding:24px; } }

.content-columns{ display:grid; grid-template-columns: 1fr 320px; gap: 46px; }
@media (max-width: 960px){ .content-columns{ grid-template-columns: 1fr; } }
.sidebar-box{ background: var(--color-bg-alt); border:1px solid var(--color-border); border-radius: var(--radius-card, var(--radius)); padding:22px; margin-bottom:20px; }
.sidebar-box h4{ margin-bottom:12px; }

.entry-content h2{ margin-top: 1.6em; }
.entry-content h3{ margin-top: 1.3em; }
.entry-content ul li, .entry-content ol li{ margin-bottom:.4em; color: var(--color-ink-soft); }

/* Model/City featured photo — any uploaded aspect ratio or format gets
   cropped to a consistent banner via object-fit, with a soft zoom on hover.
   overflow:hidden on the frame clips the scaled image to the rounded corners
   instead of letting it spill past them. */
.entry-photo{ border-radius: var(--radius-card, var(--radius)); overflow:hidden; margin-bottom:28px; background: var(--color-bg-alt); }
.entry-photo img{ width:100%; height:340px; object-fit:cover; display:block; transition: transform .4s ease; }
.entry-photo:hover img{ transform: scale(1.06); }
@media (max-width:640px){ .entry-photo img{ height:220px; } }

.card-thumb{ display:block; margin:-26px -26px 18px; border-radius: var(--radius-card, var(--radius)) var(--radius-card, var(--radius)) 0 0; overflow:hidden; background: var(--color-bg-alt); }
.card-thumb img{ width:100%; height:200px; object-fit:cover; display:block; transition: transform .4s ease; }
.card-thumb:hover img{ transform: scale(1.06); }
@media (max-width:640px){ .card-thumb img{ height:170px; } }
@media (prefers-reduced-motion: reduce){ .card-thumb img{ transition:none; } .card-thumb:hover img{ transform:none; } }

/* About page: animated stat counters */
.stat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; text-align:center; }
.stat-item{ display:flex; flex-direction:column; gap:4px; }
.stat-num{ font-size: clamp(32px, 5vw, 48px); font-weight:800; color: var(--color-accent-2-text, var(--color-red-text)); font-family: var(--font-heading, var(--font)); line-height:1; }
.stat-label{ font-size:14px; font-weight:600; color: var(--color-ink-soft); }
@media (max-width: 700px){ .stat-grid{ grid-template-columns: repeat(2, 1fr); gap:32px 24px; } }

/* About page: specialist-vs-shop comparison table */
.compare-table th{ font-weight:700; color: var(--color-ink); }
.compare-table thead th:first-child{ width:auto; }
.compare-table td.compare-yes{ color: var(--color-success); font-weight:700; }
.compare-table td.compare-no{ color: var(--color-ink-soft); }

/* Homepage variant: framed, elevated panel around the same table, and a
   tinted header row — a bit more "editorial" than the plain About-page
   version, since it's competing with the rest of the homepage for attention. */
.spec-table-framed{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-card, var(--radius)); box-shadow: 0 20px 50px rgba(0,0,0,.08); padding: 8px 24px; overflow-x:auto; }
.spec-table-framed table.spec-table{ margin:0; }
.spec-table-framed table.spec-table thead th{ background: var(--color-ink); color:#fff; padding:14px; }
.spec-table-framed table.spec-table thead th:first-child{ border-top-left-radius:8px; }
.spec-table-framed table.spec-table thead th:last-child{ border-top-right-radius:8px; }
.spec-table-framed table.spec-table tbody tr:nth-child(even){ background: var(--color-bg-alt, #f7f5f2); }
.spec-table-framed table.spec-table td:first-child{ font-weight:600; }

/* About page: diagnostic process */
.process-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; }
.process-step{ position:relative; padding-top:8px; }
.process-num{ display:block; font-size:34px; font-weight:800; font-family: var(--font-heading, var(--font)); color: var(--color-border); margin-bottom:8px; }
.process-step h3{ margin-bottom:6px; }
@media (max-width: 900px){ .process-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .process-grid{ grid-template-columns: 1fr; } .stat-grid{ grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   DESIGN SKINS (Site Settings -> Style -> Design Skin, theme_mod
   bosch_design_skin). Default '' = Classic: none of the rules below apply,
   so every site that never picks a skin renders exactly as before.

   HOW TO ADD A NEW SKIN for a future brand:
   1. inc/helpers.php -> bosch_design_skins(): add 'slug' => array( 'label'
      => '...', 'fonts' => 'family=...' ). The admin select, the body class
      (skin-{slug}) and the Google Fonts <link> all follow automatically.
   2. Append one block here where EVERY selector starts with body.skin-{slug}.
      Use the brand color variables (--color-red = Brand Accent,
      --color-accent-2 = Secondary, --color-ink, --color-footer-bg) instead
      of hardcoding the brand's hex, so colors stay editable in Site Settings.
   3. Set 'bosch_design_skin' => '{slug}' in that brand's seed/set-brand-*.php.
   ========================================================================== */

/* --- Skin: fresh (Frigidaire) ---------------------------------------------
   Bright and approachable instead of dark/luxury: Inter body + Plus Jakarta
   Sans headings, an always-white frosted header, an inset rounded hero with
   soft color glows, tinted rounded section bands, pill buttons and chips,
   floating white cards with tinted squircle icon tiles, card-style FAQ
   accordions, and a rounded-top footer. */
body.skin-fresh{
	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--color-ink-soft: #526070;
	--color-bg-alt: #f1f5f9;
	--color-border: #e3e9f0;
	--radius-btn: 999px;
	--radius-card: 20px;
	--fresh-tint: #fdf1f3;
	--fresh-tint: color-mix(in srgb, var(--color-red) 8%, #fff);
	--fresh-tint-2: #eef2f5;
	--fresh-tint-2: color-mix(in srgb, var(--color-accent-2) 10%, #fff);
	--fresh-shadow: 0 1px 2px rgba(16,32,52,.04), 0 10px 28px rgba(16,32,52,.07);
	--fresh-shadow-lg: 0 2px 4px rgba(16,32,52,.05), 0 24px 48px rgba(16,32,52,.12);
	background:#fff;
	font-size:16.5px;
	-webkit-font-smoothing: antialiased;
}
body.skin-fresh h1,
body.skin-fresh h2{ font-weight:800; letter-spacing:-.02em; }
body.skin-fresh h3{ font-weight:700; letter-spacing:-.01em; }
body.skin-fresh p{ line-height:1.7; }

/* Header: white and frosted at the top of the page. The theme's own scrolled
   state (solid accent bar + Scrolled Header Logo + logo-height settings) is
   left completely alone, so every Site Identity / sticky-header setting keeps
   working: every rule below is scoped to :not(.is-scrolled), and only
   size/shape (never color) is applied in both states. */
body.skin-fresh .topbar{ background: var(--fresh-tint-2); color: var(--color-ink); font-size:12.5px; font-weight:500; }
body.skin-fresh .topbar a{ color: var(--color-red-text); font-weight:700; }
body.skin-fresh .site-header:not(.is-scrolled){ background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom:1px solid var(--color-border); box-shadow: 0 6px 24px rgba(16,32,52,.06); }
body.skin-fresh .site-header .main-nav a{ font-weight:600; font-size:15px; padding:8px 12px; border-radius:999px; white-space:nowrap; transition: background .15s ease, color .15s ease; }
body.skin-fresh .site-header:not(.is-scrolled) .main-nav a{ color: var(--color-ink); }
body.skin-fresh .site-header:not(.is-scrolled) .main-nav a:hover{ background: var(--fresh-tint); color: var(--color-red-text); text-decoration:none; }
body.skin-fresh .main-nav{ gap:4px; }
body.skin-fresh .site-header .header-phone{ font-weight:700; font-size:16px; padding:9px 16px; border-radius:999px; }
body.skin-fresh .site-header:not(.is-scrolled) .header-phone{ color: var(--color-ink); background: var(--fresh-tint-2); }
body.skin-fresh .site-header:not(.is-scrolled) .btn-schedule{ background: var(--color-red); color:#fff; border:1px solid var(--color-red); }
body.skin-fresh .site-header:not(.is-scrolled) .btn-schedule:hover{ background: var(--color-red-dark); border-color: var(--color-red-dark); color:#fff; }
body.skin-fresh .site-header .nav-toggle{ border-radius:14px; }
body.skin-fresh .site-header:not(.is-scrolled) .nav-toggle{ border-color: var(--color-border); color: var(--color-ink); background:#fff; }
body.skin-fresh .site-header:not(.is-scrolled) .nav-toggle.is-active{ background: var(--color-ink); border-color: var(--color-ink); color:#fff; }
/* Desktop header fit: a tall logo plus a 7-item menu plus phone plus CTA can
   overflow the container, which made the menu wrap to a second line and broke
   the CTA label across two lines. Keep everything on one row and let the menu
   be the part that gives up space. */
@media (min-width: 901px){
	body.skin-fresh .header-inner{ flex-wrap:nowrap; gap:16px; }
	body.skin-fresh .site-logo-wrap{ flex:0 0 auto; }
	body.skin-fresh .main-nav{ flex-wrap:nowrap; justify-content:center; min-width:0; flex:1 1 auto; gap:0; }
	body.skin-fresh .site-header .main-nav a{ padding:8px 9px; font-size:14.5px; }
	body.skin-fresh .header-cta{ flex:0 0 auto; gap:10px; }
	body.skin-fresh .site-header .header-phone{ font-size:15.5px; padding:9px 14px; white-space:nowrap; }
	body.skin-fresh .site-header .btn-schedule{ white-space:nowrap; padding:12px 20px; }
}
@media (min-width: 901px) and (max-width: 1200px){
	body.skin-fresh .site-header .main-nav a{ padding:8px 7px; font-size:13.5px; }
	body.skin-fresh .site-header .header-phone{ font-size:14.5px; padding:8px 12px; }
	body.skin-fresh .site-header .btn-schedule{ padding:11px 16px; font-size:14px; }
}
body.skin-fresh .breadcrumbs{ font-size:13px; }
body.skin-fresh .breadcrumbs a{ color: var(--color-ink-soft); font-weight:500; }

/* Buttons: pills with a soft colored lift. */
body.skin-fresh .btn{ font-weight:600; letter-spacing:.005em; padding:14px 30px; transition: background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease, border-color .18s ease; }
body.skin-fresh .btn-sm{ padding:10px 20px; }
body.skin-fresh .btn-primary{ box-shadow: 0 8px 20px rgba(16,32,52,.16); box-shadow: 0 8px 20px color-mix(in srgb, var(--color-red) 32%, transparent); }
body.skin-fresh .btn-primary:hover{ transform: translateY(-2px); }
body.skin-fresh .btn-outline{ border-width:1.5px; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
/* Solid ink button: the base rule keeps color at --color-ink, which on this
   dark background made the label invisible, so the light text is set here. */
body.skin-fresh .btn-outline-dark{ border-width:1.5px; border-color: var(--color-ink); background: var(--color-ink); color:#fff; }
body.skin-fresh .btn-outline-dark:hover{ background: var(--color-red); border-color: var(--color-red); color:#fff; }
body.skin-fresh .bosch-cookie-actions .btn-outline-dark{ border-color: rgba(255,255,255,.3); background:transparent; }

/* Eyebrow labels become tinted pill chips. */
body.skin-fresh .eyebrow{ padding:6px 14px; border-radius:999px; background: var(--fresh-tint); color: var(--color-red-text); font-size:12px; font-weight:700; letter-spacing:.08em; }
body.skin-fresh .hero .eyebrow,
body.skin-fresh .page-hero.has-hero-photo .eyebrow{ background: rgba(255,255,255,.14); color:#fff; }

/* Hero: an inset rounded panel with soft glows and a faint dot grid. */
body.skin-fresh .hero{
	position:relative; overflow:hidden;
	padding:96px 0 88px;
	background-color: var(--color-ink);
	background-image:
		radial-gradient(circle at 88% 12%, rgba(255,255,255,.14), transparent 42%),
		radial-gradient(circle at 6% 96%, rgba(255,255,255,.08), transparent 46%),
		linear-gradient(155deg, var(--color-ink) 0%, var(--color-accent-2) 140%);
}
body.skin-fresh .hero::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); pointer-events:none; }
body.skin-fresh .hero .hero-grid{ position:relative; z-index:1; gap:56px; }
body.skin-fresh .hero-text{ background:transparent; padding:0; }
body.skin-fresh .hero h1{ font-size: clamp(34px, 4.8vw, 56px); line-height:1.08; margin-bottom:18px; }
body.skin-fresh .hero-sub{ color: rgba(255,255,255,.82); font-size:18.5px; line-height:1.65; }
body.skin-fresh .hero-badges{ gap:10px; }
body.skin-fresh .hero-badge{ padding:8px 14px; border-radius:999px; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#fff; font-size:13.5px; font-weight:500; }
body.skin-fresh .booking-card{ border-radius:24px; padding:28px; box-shadow: 0 30px 80px rgba(6,16,28,.38); }
body.skin-fresh .booking-card h3{ font-size:22px; }
/* iframe lead form: no wrapper chrome at all - the embedded form renders on its own. */
body.skin-fresh .booking-card.is-iframe-form{ padding:0; background:transparent; box-shadow:none; border:0; border-radius:0; }
body.skin-fresh .booking-card.is-iframe-form .lead-form-embed iframe.schedule{ border-radius:10px; }

/* Sections: full-width tinted alternate bands (no side inset). */
body.skin-fresh .section{ padding:88px 0; }
body.skin-fresh .section-alt{ background: var(--color-bg-alt); }
body.skin-fresh .section-head{ margin-bottom:48px; }
body.skin-fresh .section-head h2{ font-size: clamp(26px, 3.4vw, 40px); }
body.skin-fresh .section-head p{ font-size:17px; }
body.skin-fresh .section[style*="color-ink"]{
	background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.1), transparent 45%), linear-gradient(135deg, var(--color-ink), var(--color-accent-2) 160%) !important;
}

/* Cards: floating white panels with tinted squircle icon tiles. */
body.skin-fresh .card{ border:1px solid var(--color-border); box-shadow: var(--fresh-shadow); padding:30px; transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
body.skin-fresh .section-alt .card{ border-color:transparent; }
body.skin-fresh .card:hover{ box-shadow: var(--fresh-shadow-lg); transform: translateY(-4px); }
body.skin-fresh .card-icon{ width:76px; height:76px; border-radius:22px; background: var(--fresh-tint); margin-bottom:18px; }
body.skin-fresh .card:hover .card-icon{ transform: scale(1.06) rotate(-3deg); }
body.skin-fresh .card-thumb{ margin:-30px -30px 20px; }
body.skin-fresh .card-link{ color: var(--color-red-text); font-weight:600; }
body.skin-fresh .appliance-card{ border:1px solid var(--color-border); box-shadow: var(--fresh-shadow); padding:26px 16px 22px; transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
body.skin-fresh .section-alt .appliance-card{ border-color:transparent; }
body.skin-fresh .appliance-card:hover{ border-color: var(--color-red); box-shadow: var(--fresh-shadow-lg); transform: translateY(-4px); }
body.skin-fresh .appliance-card .ic{ width:125px; height:125px; border-radius:28px; background: transparent; }
body.skin-fresh .appliance-card:hover .ic{ transform: scale(1.08); }
body.skin-fresh .appliance-card strong{ font-weight:700; font-size:15.5px; }
body.skin-fresh .why-item .ic{ border-radius:14px; width:44px; height:44px; }
body.skin-fresh .expertise-fico{ border-radius:14px; }
body.skin-fresh .problem-item .num{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; min-width:38px; border-radius:12px; background: var(--fresh-tint); font-size:16px; }
body.skin-fresh .expertise-card,
body.skin-fresh .sidebar-box,
body.skin-fresh .area-group-card{ background:#fff; border:1px solid var(--color-border); box-shadow: var(--fresh-shadow); }
body.skin-fresh .expertise-card{ border-radius:24px; }
body.skin-fresh .callout{ border-radius:18px; border-width:1px 1px 1px 4px; }
body.skin-fresh .tag-list a{ background:#fff; }
body.skin-fresh .tag-list a:hover{ background: var(--fresh-tint); }
body.skin-fresh .spec-table-framed{ border-radius:24px; box-shadow: var(--fresh-shadow); }
body.skin-fresh .stat-num{ color: var(--color-red-text); letter-spacing:-.02em; }
body.skin-fresh .process-num{ color: var(--color-red-text); opacity:.35; }

/* Filter pills: bigger chips, ink when active, inline count bubble. */
body.skin-fresh .filter-pills{ gap:8px; }
body.skin-fresh .filter-pill{ padding:9px 16px; font-size:14px; background:#fff; border-color: var(--color-border); color: var(--color-ink); box-shadow: 0 1px 2px rgba(16,32,52,.04); }
body.skin-fresh .filter-pill:hover{ border-color: var(--color-ink); }
body.skin-fresh .filter-pill.is-active{ background: var(--color-ink); border-color: var(--color-ink); color:#fff; box-shadow: 0 8px 18px rgba(16,32,52,.18); }
body.skin-fresh .filter-pill .filter-count{ position:static; margin-left:8px; min-width:22px; height:22px; padding:0 7px; border-radius:999px; background: var(--fresh-tint-2); color: var(--color-ink); box-shadow:none; font-size:11px; }
body.skin-fresh .filter-pill.is-active .filter-count{ background: rgba(255,255,255,.18); color:#fff; box-shadow:none; }

/* FAQ: each question is its own rounded card. */
body.skin-fresh .faq-item{ background:#fff; border:1px solid var(--color-border); border-radius:18px; padding:0 22px; margin-bottom:12px; transition: box-shadow .2s ease, border-color .2s ease; }
body.skin-fresh .faq-item.is-open{ border-color:transparent; box-shadow: var(--fresh-shadow-lg); }
body.skin-fresh .faq-q{ padding:20px 0; font-size:16.5px; font-weight:600; }
body.skin-fresh .faq-q .plus{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background: var(--fresh-tint); font-size:20px; line-height:1; transition: transform .2s ease, background .2s ease, color .2s ease; }
body.skin-fresh .faq-item.is-open .plus{ background: var(--color-red); color:#fff; }
body.skin-fresh .faq-a{ padding:0 0 20px; }

/* Forms: rounded fields (not pills — textareas would look broken), neutral selects. */
body.skin-fresh .form-row input,
body.skin-fresh .form-row select,
body.skin-fresh .form-row textarea,
body.skin-fresh #schedule-appointment input,
body.skin-fresh #schedule-appointment select,
body.skin-fresh #schedule-appointment textarea{ border-radius:12px; border-color: var(--color-border); }
body.skin-fresh #schedule-appointment select{ background: var(--color-bg-alt); color: var(--color-ink); }
body.skin-fresh #schedule-appointment select:focus{ background:#fff; }

/* Page hero (inner pages). */
body.skin-fresh .page-hero{ background: linear-gradient(180deg, var(--fresh-tint-2), #fff); border-bottom:none; padding:60px 0 44px; }
body.skin-fresh .page-hero h1{ font-size: clamp(30px, 4.2vw, 48px); line-height:1.1; }
body.skin-fresh .page-hero .lead{ font-size:18px; line-height:1.65; }
/* The page-hero shorthand above resets background-size/position; restore them
   so the featured-image photo (inline background-image) still covers the panel. */
body.skin-fresh .page-hero.has-hero-photo{ padding:88px 0; background-color: var(--color-ink); background-size:cover; background-position:center; }
body.skin-fresh .entry-photo{ border-radius:24px; }

/* Footer: rounded top, soft glow, quieter uppercase column labels. */
body.skin-fresh .site-footer{ margin-top:72px; border-radius:36px 36px 0 0; padding:76px 0 28px; }
/* Soft glow only when the Footer Gradient setting is off - otherwise this
   background-image would replace the configured gradient. */
body.skin-fresh:not(.has-footer-gradient) .site-footer{ background-image: radial-gradient(circle at 92% 0%, rgba(255,255,255,.08), transparent 42%); }
body.skin-fresh .site-footer h4:not(.footer-logo){ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color: rgba(255,255,255,.55); }
body.skin-fresh .site-footer a{ color: rgba(255,255,255,.85); }
body.skin-fresh .site-footer a:hover{ color:#fff; }
body.skin-fresh .footer-bottom{ border-top-color: rgba(255,255,255,.1); color: rgba(255,255,255,.6); }
body.skin-fresh .sticky-cta{ border-radius:20px 20px 0 0; }
body.skin-fresh .back-to-top{ background:#fff; color: var(--color-ink); border:1px solid var(--color-border); }
body.skin-fresh .back-to-top:hover{ background: var(--color-red); color:#fff; border-color: var(--color-red); }
body.skin-fresh .bosch-cookie-banner{ border-radius:20px; }

@media (max-width: 900px){
	body.skin-fresh .main-nav{ gap:0; border-top-color: var(--color-border); }
	body.skin-fresh .site-header:not(.is-scrolled) .main-nav a,
	body.skin-fresh .main-nav.is-open a{ color: var(--color-ink); border-radius:0; border-bottom:1px solid var(--color-border); }
	body.skin-fresh .site-header:not(.is-scrolled) .header-phone{ background:transparent; padding:0; }
	/* Keep the optional mobile-only logo swap working inside this skin: the
	   "always show the regular logo" rules above would otherwise win. */
	body.skin-fresh.has-mobile-logo .site-header:not(.is-scrolled) .site-logo-wrap > .site-logo-image,
	body.skin-fresh.has-mobile-logo .site-header:not(.is-scrolled) .site-logo-wrap > .site-logo:not(.site-logo-sticky){ display:none; }
	body.skin-fresh.has-mobile-logo .site-header:not(.is-scrolled) .site-logo-mobile{ display:block; }
	body.skin-fresh .hero,
	body.skin-fresh .page-hero.has-hero-photo{ padding:64px 0 56px; }
	body.skin-fresh .section{ padding:64px 0; }
	body.skin-fresh .site-footer{ border-radius:24px 24px 0 0; margin-top:48px; }
}
@media (max-width: 480px){
	body.skin-fresh .site-header .btn-schedule{ width:44px; height:44px; padding:0; }
}
@media (prefers-reduced-motion: reduce){
	body.skin-fresh .card:hover,
	body.skin-fresh .appliance-card:hover,
	body.skin-fresh .btn-primary:hover{ transform:none; }
}

/* --- Skin: motion (GE) ----------------------------------------------------
   Engineered + kinetic, deliberately unlike Classic (dark/sharp) and Fresh
   (bright rounded bands): Space Grotesk headings on DM Sans body, a white
   header with a thin brand hairline and center-growing nav underlines, a deep
   navy hero with a slowly drifting light blob, squared 14px cards with a
   top accent bar that draws in on hover, chip-style filters, left-accent FAQ
   rows and a dark footer with a brand hairline.

   Motion: hover effects are plain CSS (supported everywhere); scroll reveal
   uses CSS scroll-driven animations (animation-timeline: view()) inside a
   @supports + prefers-reduced-motion guard, so with no support, no JS or
   reduced-motion preference every element simply renders in its final,
   fully visible state. No JS was added for this skin. */
body.skin-motion{
	--font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: "Space Grotesk", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--color-ink-soft: #4b5a6e;
	--color-bg-alt: #eef3f9;
	--color-border: #dce4ee;
	--radius-btn: 10px;
	--radius-card: 14px;
	--mo-tint: #eef3fb;
	--mo-tint: color-mix(in srgb, var(--color-red) 9%, #fff);
	--mo-tint-2: #e9eef5;
	--mo-tint-2: color-mix(in srgb, var(--color-accent-2) 12%, #fff);
	--mo-glow: rgba(59,115,185,.28);
	--mo-glow: color-mix(in srgb, var(--color-red) 30%, transparent);
	--mo-shadow: 0 1px 2px rgba(12,28,48,.05), 0 14px 30px rgba(12,28,48,.08);
	--mo-shadow-lg: 0 2px 6px rgba(12,28,48,.07), 0 26px 56px rgba(12,28,48,.16);
	background:#fff;
	font-size:16.5px;
	-webkit-font-smoothing: antialiased;
}
body.skin-motion h1,
body.skin-motion h2{ font-weight:700; letter-spacing:-.025em; }
body.skin-motion h3{ font-weight:600; letter-spacing:-.01em; }
body.skin-motion p{ line-height:1.68; }

/* Header: white with a brand hairline along the bottom edge. The theme's own
   scrolled state (solid accent bar + Scrolled Header Logo + every logo-height
   setting) is left completely alone: colour/display rules below are all
   scoped to :not(.is-scrolled), and shared rules change only size/shape or
   use currentColor. */
body.skin-motion .topbar{ background: linear-gradient(90deg, var(--color-ink), var(--color-accent-2)); color:#fff; font-size:12.5px; font-weight:500; letter-spacing:.01em; }
body.skin-motion .topbar a{ color:#fff; font-weight:700; }
body.skin-motion .site-header:not(.is-scrolled){
	background-color:#fff;
	background-image: linear-gradient(90deg, var(--color-red), var(--color-accent-2));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 3px;
	border-bottom:1px solid var(--color-border);
	box-shadow: 0 4px 18px rgba(12,28,48,.06);
}
body.skin-motion .site-header .main-nav a{
	position:relative; font-weight:600; font-size:15px; padding:10px 12px; white-space:nowrap;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: center calc(100% - 4px);
	background-size: 0% 2px;
	transition: background-size .22s ease, color .15s ease, opacity .15s ease;
}
body.skin-motion .site-header .main-nav a:hover{ background-size: 60% 2px; text-decoration:none; }
body.skin-motion .site-header:not(.is-scrolled) .main-nav a{ color: var(--color-ink); }
body.skin-motion .site-header:not(.is-scrolled) .main-nav a:hover{ color: var(--color-red-text); }
body.skin-motion .site-header .header-phone{ font-weight:700; font-size:16px; padding:8px 14px; border-radius:10px; white-space:nowrap; transition: transform .18s ease, background .18s ease; }
body.skin-motion .site-header:not(.is-scrolled) .header-phone{ color: var(--color-ink); background: var(--mo-tint-2); }
body.skin-motion .site-header .header-phone:hover{ transform: translateY(-1px); }
body.skin-motion .site-header:not(.is-scrolled) .btn-schedule{ background: var(--color-red); color:#fff; border:1px solid var(--color-red); }
body.skin-motion .site-header:not(.is-scrolled) .btn-schedule:hover{ background: var(--color-red-dark); border-color: var(--color-red-dark); color:#fff; }
body.skin-motion .site-header .nav-toggle{ border-radius:10px; }
body.skin-motion .site-header:not(.is-scrolled) .nav-toggle{ border-color: var(--color-border); color: var(--color-ink); background:#fff; }
body.skin-motion .site-header:not(.is-scrolled) .nav-toggle.is-active{ background: var(--color-ink); border-color: var(--color-ink); color:#fff; }
body.skin-motion .breadcrumbs{ font-size:13px; }
body.skin-motion .breadcrumbs a{ color: var(--color-ink-soft); font-weight:500; }

/* Desktop header fit: logo + 7 menu items + phone + CTA must stay on one row,
   with the menu as the part that gives up space (a wrapped menu and a
   two-line CTA label were real bugs on the previous skin). */
@media (min-width: 901px){
	body.skin-motion .header-inner{ flex-wrap:nowrap; gap:16px; }
	body.skin-motion .site-logo-wrap{ flex:0 0 auto; }
	body.skin-motion .main-nav{ flex-wrap:nowrap; justify-content:center; min-width:0; flex:1 1 auto; gap:0; }
	body.skin-motion .site-header .main-nav a{ padding:10px 9px; font-size:14.5px; }
	body.skin-motion .header-cta{ flex:0 0 auto; gap:10px; }
	body.skin-motion .site-header .header-phone{ font-size:15.5px; padding:8px 13px; }
	body.skin-motion .site-header .btn-schedule{ white-space:nowrap; padding:12px 20px; }
}
@media (min-width: 901px) and (max-width: 1200px){
	body.skin-motion .site-header .main-nav a{ padding:10px 7px; font-size:13.5px; }
	body.skin-motion .site-header .header-phone{ font-size:14.5px; padding:8px 11px; }
	body.skin-motion .site-header .btn-schedule{ padding:11px 16px; font-size:14px; }
}

/* Buttons: squared with a light sheen that sweeps across on hover. */
body.skin-motion .btn{ position:relative; overflow:hidden; font-weight:600; letter-spacing:.005em; padding:14px 28px; transition: background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease, border-color .18s ease; }
body.skin-motion .btn::after{
	content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
	transform: skewX(-18deg); pointer-events:none; opacity:0;
	transition: left .55s ease, opacity .2s ease;
}
body.skin-motion .btn:hover::after{ left:120%; opacity:1; }
body.skin-motion .btn-sm{ padding:10px 18px; }
body.skin-motion .btn-primary{ box-shadow: 0 8px 20px rgba(12,28,48,.18); box-shadow: 0 10px 24px var(--mo-glow); }
body.skin-motion .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px var(--mo-glow); }
body.skin-motion .btn-outline{ border-width:1.5px; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); }
body.skin-motion .btn-outline:hover{ background: rgba(255,255,255,.16); }
/* Solid ink button: the base rule keeps color at --color-ink, so the light
   text has to be set here or the label disappears on the dark fill. */
body.skin-motion .btn-outline-dark{ border-width:1.5px; border-color: var(--color-ink); background: var(--color-ink); color:#fff; }
body.skin-motion .btn-outline-dark:hover{ background: var(--color-red); border-color: var(--color-red); color:#fff; }
body.skin-motion .bosch-cookie-actions .btn-outline-dark{ border-color: rgba(255,255,255,.3); background:transparent; color:#fff; }

/* Eyebrow: small caps label with a leading brand dash. */
body.skin-motion .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.14em; color: var(--color-red-text); }
body.skin-motion .eyebrow::before{ content:""; width:22px; height:2px; background: currentColor; flex:0 0 auto; }
body.skin-motion .hero .eyebrow,
body.skin-motion .page-hero.has-hero-photo .eyebrow{ color:#fff; }

/* Hero: deep navy, full width, with a slowly drifting light blob. */
body.skin-motion .hero{
	position:relative; overflow:hidden;
	padding:100px 0 92px;
	background-color: var(--color-ink);
	background-image: linear-gradient(160deg, var(--color-ink) 0%, var(--color-accent-2) 165%);
}
body.skin-motion .hero::after{
	content:""; position:absolute; z-index:0; top:-25%; right:-10%; width:60vw; height:60vw; max-width:820px; max-height:820px;
	background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.16), transparent 62%);
	pointer-events:none;
}
body.skin-motion .hero .hero-grid{ position:relative; z-index:1; gap:54px; }
/*body.skin-motion .hero-text{ background:transparent; padding:0; }*/
body.skin-motion .hero h1{ font-size: clamp(34px, 4.9vw, 58px); line-height:1.06; margin-bottom:18px; }
body.skin-motion .hero-sub{ color: rgba(255,255,255,.84); font-size:18.5px; line-height:1.62; }
body.skin-motion .hero-badges{ gap:10px; }
body.skin-motion .hero-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:8px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:13.5px; font-weight:500; transition: background .18s ease, transform .18s ease; }
body.skin-motion .hero-badge:hover{ background: rgba(255,255,255,.16); transform: translateY(-2px); }
body.skin-motion .hero-actions .btn{ padding:15px 30px; }
body.skin-motion .booking-card{ border-radius:16px; padding:28px; box-shadow: 0 30px 70px rgba(6,16,28,.42); border-top:3px solid var(--color-red); }
body.skin-motion .booking-card h3{ font-size:22px; }
/* iframe lead form: no wrapper chrome at all — the embedded form renders on
   its own, exactly as the brand's form provider styles it. */
body.skin-motion .booking-card.is-iframe-form{ padding:0; background:transparent; box-shadow:none; border:0; border-radius:0; }
body.skin-motion .booking-card.is-iframe-form .lead-form-embed iframe.schedule{ border-radius:0; }

/* Sections: full-width bands (no side inset), heading with a growing rule. */
body.skin-motion .section{ padding:90px 0; }
body.skin-motion .section-alt{ background: var(--color-bg-alt); }
body.skin-motion .section-head{ margin-bottom:46px; }
body.skin-motion .section-head h2{ font-size: clamp(26px, 3.5vw, 40px); }
body.skin-motion .section-head p{ font-size:17px; }
body.skin-motion .section[style*="color-ink"]{
	background-image: radial-gradient(circle at 12% 15%, rgba(255,255,255,.12), transparent 48%), linear-gradient(140deg, var(--color-ink), var(--color-accent-2) 170%) !important;
}

/* Cards: squared panels, a top accent bar that draws in on hover, image zoom. */
body.skin-motion .card{
	position:relative; overflow:hidden;
	border:1px solid var(--color-border); box-shadow: var(--mo-shadow); padding:28px;
	transition: box-shadow .24s ease, transform .24s ease, border-color .24s ease;
}
body.skin-motion .card::before{
	content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
	background: linear-gradient(90deg, var(--color-red), var(--color-accent-2));
	transform: scaleX(0); transform-origin: left center;
	transition: transform .32s ease;
}
body.skin-motion .card:hover::before{ transform: scaleX(1); }
body.skin-motion .card:hover{ transform: translateY(-6px); box-shadow: var(--mo-shadow-lg), 0 0 0 1px var(--mo-glow); border-color: transparent; }
body.skin-motion .card-thumb{ margin:-28px -28px 20px; }
body.skin-motion .card-thumb img{ transition: transform .5s ease; }
body.skin-motion .card:hover .card-thumb img{ transform: scale(1.08); }
body.skin-motion .card-icon{ width:74px; height:74px; border-radius:16px; background: var(--mo-tint); margin-bottom:18px; transition: transform .3s ease, background .3s ease; }
body.skin-motion .card:hover .card-icon{ transform: translateY(-3px) scale(1.06); background: var(--mo-tint-2); }
body.skin-motion .card-link{ color: var(--color-red-text); font-weight:600; transition: gap .2s ease, transform .2s ease; }
body.skin-motion .card:hover .card-link{ gap:12px; }
body.skin-motion .appliance-card{
	border:1px solid var(--color-border); box-shadow: var(--mo-shadow); padding:26px 16px 22px;
	transition: box-shadow .24s ease, transform .24s ease, border-color .24s ease;
}
body.skin-motion .appliance-card:hover{ border-color: var(--color-red); box-shadow: var(--mo-shadow-lg); transform: translateY(-6px); }
body.skin-motion .appliance-card .ic{ width:92px; height:92px; border-radius:20px; background: var(--mo-tint); }
body.skin-motion .appliance-card:hover .ic{ transform: translateY(-2px) scale(1.07); }
body.skin-motion .appliance-card strong{ font-weight:700; font-size:15.5px; }
body.skin-motion .why-item .ic{ border-radius:12px; width:46px; height:46px; transition: transform .25s ease; }
body.skin-motion .why-item:hover .ic{ transform: rotate(-6deg) scale(1.08); }
body.skin-motion .problem-item .num{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; min-width:38px; border-radius:10px; background: var(--mo-tint); font-size:16px; }
body.skin-motion .expertise-card,
body.skin-motion .sidebar-box,
body.skin-motion .area-group-card{ background:#fff; border:1px solid var(--color-border); box-shadow: var(--mo-shadow); }
body.skin-motion .expertise-card{ border-radius:16px; transition: box-shadow .24s ease, transform .24s ease; }
body.skin-motion .expertise-card:hover{ box-shadow: var(--mo-shadow-lg); transform: translateY(-4px); }
body.skin-motion .expertise-fico{ border-radius:12px; }
body.skin-motion a.area-group-card:hover{ transform: translateY(-4px); box-shadow: var(--mo-shadow-lg); }
body.skin-motion .callout{ border-radius:12px; border-width:1px 1px 1px 4px; }
body.skin-motion .tag-list a{ background:#fff; transition: background .18s ease, transform .18s ease; }
body.skin-motion .tag-list a:hover{ background: var(--mo-tint); transform: translateY(-2px); }
body.skin-motion .spec-table-framed{ border-radius:16px; box-shadow: var(--mo-shadow); }
body.skin-motion .stat-num{ color: var(--color-red-text); letter-spacing:-.03em; }
body.skin-motion .process-num{ color: var(--color-red-text); opacity:.28; }
body.skin-motion .testimonial-card{ transition: box-shadow .24s ease, transform .24s ease; }
body.skin-motion .testimonial-card:hover{ transform: translateY(-4px); box-shadow: var(--mo-shadow-lg); }

/* Filter pills: squared chips with an inline count, accent fill when active. */
body.skin-motion .filter-pills{ gap:8px; }
body.skin-motion .filter-pill{ padding:9px 15px; border-radius:9px; font-size:14px; background:#fff; border-color: var(--color-border); color: var(--color-ink); box-shadow: 0 1px 2px rgba(12,28,48,.04); transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease; }
body.skin-motion .filter-pill:hover{ border-color: var(--color-red); transform: translateY(-2px); }
body.skin-motion .filter-pill.is-active{ background: var(--color-red); border-color: var(--color-red); color:#fff; box-shadow: 0 8px 18px var(--mo-glow); }
body.skin-motion .filter-pill .filter-count{ position:static; margin-left:9px; min-width:22px; height:22px; padding:0 7px; border-radius:6px; background: var(--mo-tint-2); color: var(--color-ink); box-shadow:none; font-size:11px; }
body.skin-motion .filter-pill.is-active .filter-count{ background: rgba(255,255,255,.22); color:#fff; box-shadow:none; }

/* FAQ: rows that gain a brand bar on the left and a rotating toggle. */
body.skin-motion .faq-item{ background:#fff; border:1px solid var(--color-border); border-radius:12px; margin-bottom:10px; padding:0 20px; position:relative; overflow:hidden; transition: box-shadow .22s ease, border-color .22s ease; }
body.skin-motion .faq-item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--color-red); transform: scaleY(0); transform-origin: top center; transition: transform .28s ease; }
body.skin-motion .faq-item.is-open::before{ transform: scaleY(1); }
body.skin-motion .faq-item.is-open{ box-shadow: var(--mo-shadow); border-color: transparent; }
body.skin-motion .faq-q{ padding:19px 0; font-size:16.5px; font-weight:600; }
body.skin-motion .faq-q .plus{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; min-width:30px; border-radius:8px; background: var(--mo-tint); font-size:19px; line-height:1; transition: transform .25s ease, background .25s ease, color .25s ease; }
body.skin-motion .faq-item.is-open .plus{ background: var(--color-red); color:#fff; transform: rotate(180deg); }
body.skin-motion .faq-a{ padding:0 0 20px; }

/* Forms: squared fields, neutral selects. */
body.skin-motion .form-row input,
body.skin-motion .form-row select,
body.skin-motion .form-row textarea,
body.skin-motion #schedule-appointment input,
body.skin-motion #schedule-appointment select,
body.skin-motion #schedule-appointment textarea{ border-radius:10px; border-color: var(--color-border); }
body.skin-motion #schedule-appointment select{ background: var(--color-bg-alt); color: var(--color-ink); }
body.skin-motion #schedule-appointment select:focus{ background:#fff; }

/* Page hero (inner pages). */
body.skin-motion .page-hero{ background-color: var(--mo-tint-2); background-image: linear-gradient(180deg, var(--mo-tint-2), #fff); border-bottom:1px solid var(--color-border); padding:62px 0 46px; }
body.skin-motion .page-hero h1{ font-size: clamp(30px, 4.3vw, 48px); line-height:1.08; }
body.skin-motion .page-hero .lead{ font-size:18px; line-height:1.62; }
/* The gradient above would otherwise reset background-size/position, so the
   featured-image photo (an inline background-image) gets them back here. */
body.skin-motion .page-hero.has-hero-photo{ padding:92px 0; background-color: var(--color-ink); background-size:cover; background-position:center; border-bottom:none; }
body.skin-motion .entry-photo{ border-radius:16px; }

/* Footer: dark with a brand hairline on top and animated link underlines. */
body.skin-motion .site-footer{ margin-top:72px; padding:74px 0 28px; position:relative; }
body.skin-motion .site-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--color-red), var(--color-accent-2)); }
/* Soft glow only while the Footer Gradient setting is off — otherwise this
   background-image would replace the configured gradient. */
body.skin-motion:not(.has-footer-gradient) .site-footer{ background-image: radial-gradient(circle at 8% 0%, rgba(255,255,255,.07), transparent 46%); }
body.skin-motion .site-footer h4:not(.footer-logo){ font-size:12px; text-transform:uppercase; letter-spacing:.14em; color: rgba(255,255,255,.55); }
body.skin-motion .site-footer a{
	color: rgba(255,255,255,.85);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left calc(100% - 1px);
	background-size: 0% 1px;
	transition: background-size .22s ease, color .18s ease;
}
body.skin-motion .site-footer a:hover{ color:#fff; background-size: 100% 1px; text-decoration:none; }
body.skin-motion .footer-bottom{ border-top-color: rgba(255,255,255,.1); color: rgba(255,255,255,.6); }
body.skin-motion .sticky-cta{ border-radius:14px 14px 0 0; }
body.skin-motion .back-to-top{ background:#fff; color: var(--color-ink); border:1px solid var(--color-border); transition: transform .18s ease, background .18s ease, color .18s ease; }
body.skin-motion .back-to-top:hover{ background: var(--color-red); color:#fff; border-color: var(--color-red); transform: translateY(-3px); }
body.skin-motion .bosch-cookie-banner{ border-radius:14px; }

@media (max-width: 900px){
	body.skin-motion .main-nav{ gap:0; border-top-color: var(--color-border); }
	body.skin-motion .site-header .main-nav a{ background-image:none; }
	body.skin-motion .site-header:not(.is-scrolled) .main-nav a,
	body.skin-motion .main-nav.is-open a{ color: var(--color-ink); border-bottom:1px solid var(--color-border); }
	body.skin-motion .site-header:not(.is-scrolled) .header-phone{ background:transparent; padding:0; }
	/* Keep the optional mobile-only logo swap working inside this skin (the
	   scrolled state keeps the theme's own sticky logo). */
	body.skin-motion.has-mobile-logo .site-header:not(.is-scrolled) .site-logo-wrap > .site-logo-image,
	body.skin-motion.has-mobile-logo .site-header:not(.is-scrolled) .site-logo-wrap > .site-logo:not(.site-logo-sticky){ display:none; }
	body.skin-motion.has-mobile-logo .site-header:not(.is-scrolled) .site-logo-mobile{ display:block; }
	body.skin-motion .hero{ padding:66px 0 58px; }
	body.skin-motion .page-hero.has-hero-photo{ padding:66px 0 58px; }
	body.skin-motion .section{ padding:64px 0; }
	body.skin-motion .site-footer{ margin-top:48px; }
}
@media (max-width: 480px){
	body.skin-motion .site-header .btn-schedule{ width:44px; height:44px; padding:0; }
}

/* ---- Motion -------------------------------------------------------------
   Entrance + scroll reveal. Both live inside prefers-reduced-motion:
   no-preference, and the scroll reveal additionally inside @supports
   (animation-timeline: view()), so any browser without scroll-driven
   animations — and every reduced-motion visitor, and any crawler — gets the
   plain, fully visible page with no hidden content. Only opacity/transform
   animate, so nothing reflows (no CLS). */
@keyframes mo-rise{ from{ opacity:0; transform: translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes mo-rise-sm{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes mo-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes mo-rule{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@keyframes mo-hero-in{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes mo-blob{ from{ transform: translate3d(0,0,0) scale(1); } to{ transform: translate3d(-4%,5%,0) scale(1.12); } }

@media (prefers-reduced-motion: no-preference){
	/* Hero entrance on load (no scroll timeline needed). */
	body.skin-motion .hero .hero-text > *{ animation: mo-hero-in .7s cubic-bezier(.16,1,.3,1) both; }
	body.skin-motion .hero .hero-text > *:nth-child(2){ animation-delay:.07s; }
	body.skin-motion .hero .hero-text > *:nth-child(3){ animation-delay:.14s; }
	body.skin-motion .hero .hero-text > *:nth-child(4){ animation-delay:.21s; }
	body.skin-motion .hero .hero-text > *:nth-child(5){ animation-delay:.28s; }
	body.skin-motion .hero .booking-card{ animation: mo-hero-in .8s cubic-bezier(.16,1,.3,1) .12s both; }
	/* Slow drifting light blob behind the hero copy. */
	body.skin-motion .hero::after{ animation: mo-blob 18s ease-in-out infinite alternate; will-change: transform; }

	/* Section heading rule that draws itself under the h2. */
	body.skin-motion .section-head h2::after{
		content:""; display:block; width:56px; height:3px; margin-top:16px;
		background: linear-gradient(90deg, var(--color-red), var(--color-accent-2));
		transform-origin: left center;
	}

	@supports (animation-timeline: view()){
		body.skin-motion .section-head,
		body.skin-motion .section .card,
		body.skin-motion .section .appliance-card,
		body.skin-motion .section .expertise-card,
		body.skin-motion .section .why-item,
		body.skin-motion .section .problem-item,
		body.skin-motion .section .area-group-card,
		body.skin-motion .section .stat-item,
		body.skin-motion .section .process-step,
		body.skin-motion .entry-content > h2,
		body.skin-motion .faq-item{
			animation-name: mo-rise;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 4% cover 20%;
		}
		/* A gentle wave across grid rows instead of one flat sweep. */
		body.skin-motion .section .card:nth-child(3n+2),
		body.skin-motion .section .appliance-card:nth-child(3n+2){ animation-range: entry 2% cover 24%; }
		body.skin-motion .section .card:nth-child(3n),
		body.skin-motion .section .appliance-card:nth-child(3n){ animation-range: entry 0% cover 28%; }
		body.skin-motion .faq-item{ animation-name: mo-rise-sm; animation-range: entry 8% cover 18%; }
		body.skin-motion .spec-table-framed,
		body.skin-motion .callout,
		body.skin-motion .testimonial-card{
			animation-name: mo-fade;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 6% cover 22%;
		}
		body.skin-motion .section-head h2::after{
			animation-name: mo-rule;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 10% cover 26%;
		}
	}
}
@media (prefers-reduced-motion: reduce){
	body.skin-motion .card,
	body.skin-motion .card::before,
	body.skin-motion .card-thumb img,
	body.skin-motion .appliance-card,
	body.skin-motion .expertise-card,
	body.skin-motion .testimonial-card,
	body.skin-motion .filter-pill,
	body.skin-motion .btn,
	body.skin-motion .btn::after,
	body.skin-motion .back-to-top,
	body.skin-motion .tag-list a,
	body.skin-motion .site-header .header-phone,
	body.skin-motion .faq-q .plus,
	body.skin-motion .why-item .ic{ transition:none; animation:none; }
	body.skin-motion .card:hover,
	body.skin-motion .card:hover .card-thumb img,
	body.skin-motion .card:hover .card-icon,
	body.skin-motion .appliance-card:hover,
	body.skin-motion .appliance-card:hover .ic,
	body.skin-motion .expertise-card:hover,
	body.skin-motion .testimonial-card:hover,
	body.skin-motion a.area-group-card:hover,
	body.skin-motion .filter-pill:hover,
	body.skin-motion .btn-primary:hover,
	body.skin-motion .hero-badge:hover,
	body.skin-motion .why-item:hover .ic,
	body.skin-motion .tag-list a:hover,
	body.skin-motion .back-to-top:hover,
	body.skin-motion .site-header .header-phone:hover{ transform:none; }
	body.skin-motion .btn:hover::after{ opacity:0; left:-60%; }
	body.skin-motion .faq-item.is-open .plus{ transform:none; }
}

/* ---------------------------------------------------------------------
   Homepage category carousel (Site Settings -> Style -> "Homepage
   Categories as a Carousel", off by default). Full-bleed sliding row of
   the same .appliance-card tiles: 6 per view on desktop, 4 / 3 / 2 as the
   screen narrows. Arrows and dots are added by main.js; with JS off the
   viewport is still scrollable, so nothing is hidden from visitors or
   crawlers. The Appliances archive keeps .appliance-tile-grid.
   --------------------------------------------------------------------- */
.cat-carousel{ position:relative; width:100vw; margin-left: calc(50% - 50vw); padding: 4px 0 0; }
.cat-carousel-viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type: x mandatory; scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth; }
.cat-carousel-viewport::-webkit-scrollbar{ display:none; }
.cat-carousel-track{ display:flex; gap:24px; padding: 6px max(20px, calc(50vw - 600px)) 10px; }
.cat-carousel-item{ flex: 0 0 calc((100vw - 2 * max(20px, calc(50vw - 600px)) - 5 * 24px) / 6); scroll-snap-align:start; }
.cat-carousel-nav{
	position:absolute; top:calc(50% - 16px); transform:translateY(-50%); z-index:2;
	width:44px; height:44px; display:none; align-items:center; justify-content:center;
	border:1px solid var(--color-border); border-radius:50%; background:#fff; color: var(--color-ink);
	font-size:24px; line-height:1; cursor:pointer; box-shadow: 0 6px 18px rgba(0,0,0,.10);
	transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.cat-carousel-nav:hover{ background: var(--color-red); border-color: var(--color-red); color:#fff; }
.cat-carousel-nav[disabled]{ opacity:.35; cursor:default; }
.cat-carousel-nav[disabled]:hover{ background:#fff; color: var(--color-ink); border-color: var(--color-border); }
.cat-carousel-nav.prev{ left: max(8px, calc(50vw - 640px)); }
.cat-carousel-nav.next{ right: max(8px, calc(50vw - 640px)); }
.cat-carousel.is-ready .cat-carousel-nav{ display:flex; }
.cat-carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.cat-carousel-dots button{
	width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
	background: var(--color-border); transition: background .2s ease, width .2s ease;
}
.cat-carousel-dots button.is-active{ width:26px; border-radius:999px; background: var(--color-red); }
@media (max-width: 1200px){
	.cat-carousel-item{ flex-basis: calc((100vw - 40px - 3 * 24px) / 4); }
}
@media (max-width: 900px){
	.cat-carousel-item{ flex-basis: calc((100vw - 40px - 2 * 16px) / 3); }
	.cat-carousel-track{ gap:16px; padding-left:20px; padding-right:20px; }
	.cat-carousel-nav{ display:none !important; }
}
@media (max-width: 600px){
	.cat-carousel-item{ flex-basis: calc((100vw - 40px - 16px) / 2); }
}
@media (prefers-reduced-motion: reduce){
	.cat-carousel-viewport{ scroll-behavior:auto; }
}