/*
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-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); }
.section-head{ max-width: 720px; margin: 0 auto 40px; text-align:center; }
.is-spacious .section-head{ margin-bottom:56px; }
.section-head p{ margin:0; }
.eyebrow{ display:inline-block; color: var(--color-accent-2, var(--color-red)); 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; } }
.btn-outline{ background:transparent; border-color:#fff; color:#fff; }
.btn-outline:hover{ background:#fff; color: var(--color-ink); }
.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); }
.site-logo .logo-tld{ color: var(--color-ink-soft); font-weight:600; }
.site-logo-image img{ max-height:35px; 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: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:40px; 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-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: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:hover{ background:#000; }
.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); border-color:#fff; }

@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-border); }
	.main-nav.is-open{ display:flex; }
	.main-nav a{ display:block; width:100%; padding:14px 12px; border-bottom:1px solid var(--color-border); }
	.nav-toggle{ display:flex; }
	.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,
	.has-mobile-logo .site-logo-wrap > .site-logo{ 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{ 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; }
.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); padding: 25px 25px; 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; }
}

/* 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); }
.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)); }
.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);
}
.card-icon{ width:60px; border-radius:10px; background: transparent; color: var(--color-red); 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.12) rotate(-6deg); }
.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); 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-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: 34px; margin-bottom:10px; height:60px; display:flex; align-items:center; justify-content:center; transition: transform .3s ease; }
.appliance-card .ic .icon-img{ max-width:60px; width:auto; height:auto; object-fit:contain; }
.appliance-card:hover .ic{ transform: scale(1.15) rotate(6deg); }
@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; }
.service-area-cities .appliance-card{ flex: 0 1 150px; width:150px; }
.service-area-map{ position:relative; min-height:360px; height:100%; border-radius: var(--radius-card, var(--radius)); overflow:hidden; box-shadow: 0 20px 50px rgba(0,0,0,.25); 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:cover; }
@media (max-width: 900px){
	.service-area-layout{ grid-template-columns:1fr; }
	.service-area-map{ min-height:280px; }
}

.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); 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; }

/* Homepage "Technician Expertise" section — see
   bosch_render_home_expertise_section() in inc/template-tags.php. */
.text-accent{ color: var(--color-red); }
.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); 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); 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); }

/* Severity badges (error codes) */
.badge{ display:inline-block; padding:4px 12px; border-radius: 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; }
.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-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-decoration:none; }

/* Category-pill filters (Models / Error Codes archives) */
.filter-pills{ display:flex; flex-wrap:wrap; gap:14px; 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:8px 16px; font-size:14px; 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, var(--color-red)); 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); }
.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; }

.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, var(--color-red)); 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; } }