/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --ink:          #1E293B;
  --ink-2:        #334155;
  --forest:       #2563EB;
  --forest-dim:   #1D4ED8;
  --forest-light: #EFF6FF;
  --amber:        #F59E0B;
  --amber-light:  #FFFBEB;
  --cream:        #FFFFFF;
  --cream-2:      #F8FAFC;
  --mist:         #F1F5F9;
  --mist-2:       #E2E8F0;
  --slate:        #64748B;
  --slate-light:  #94A3B8;
  --border:       #E2E8F0;
  --white:        #FFFFFF;

  --text-primary:   var(--ink);
  --text-body:      var(--ink-2);
  --text-secondary: var(--slate);
  --text-muted:     var(--slate-light);
  --bg-base:        var(--cream);
  --bg-section:     var(--mist);
  --bg-card:        var(--white);
  --border-color:   var(--border);
}


/* ─── RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-body);
  background: var(--bg-base);
}

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text-primary);
  text-wrap: balance;
  line-height: 1.2;
}

p { color: var(--text-body); }

a { color: var(--forest); text-decoration: none; }
a:hover { color: var(--forest-dim); }

button { font-family: inherit; cursor: pointer; border: none; }

img, svg { display: block; max-width: 100%; }

.icon { flex-shrink: 0; }

/* ─── LAYOUT ─────────────────────────────────────────────── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.16,.8,.3,1), transform 0.7s cubic-bezier(.16,.8,.3,1);
}
.reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ─── HEADER ─────────────────────────────────────────────── */
.header-top { background: var(--ink-2); padding: 0.45rem 0; }
.header-top .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.header-phone { display: flex; align-items: center; gap: 0.5rem; color: var(--white); font-weight: 600; font-size: 0.9rem; }
.header-phone svg { opacity: 0.75; }
.status-live { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: #9FCB9A; letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 640px) {
  .header-top { display: none; }
}
.dot-live { width: 7px; height: 7px; background: #6FBF6A; border-radius: 50%; animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

.header-main {
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.3s ease;
}
.header-main.scrolled { box-shadow: 0 4px 20px rgba(30,41,59,0.08); }
.header-main .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; gap: 2rem; }
.logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.logo-icon {
  width: 38px; height: 38px;
  background: var(--forest);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
/* Static on hover — no rotate/scale wobble, just a colour shift. */
.logo:hover .logo-icon { background: var(--forest-dim); }
.logo-icon svg { color: #fff; }
.logo-name { font-family: Georgia, serif; font-size: 1.25rem; font-weight: normal; color: var(--text-primary); letter-spacing: -0.02em; }
.logo-name strong { color: var(--forest); }

nav { display: flex; align-items: center; gap: 2rem; }
nav a { color: var(--text-secondary); font-size: 0.925rem; font-weight: 500; transition: color 0.2s; position: relative; }
nav a::after {
  content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px;
  background: var(--amber); transition: width 0.3s ease;
}
nav a:hover { color: var(--forest); }
nav a:hover::after { width: 100%; }

.btn-book {
  background: var(--forest); color: #fff; padding: 0.625rem 1.25rem; border-radius: 6px;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  display: flex; align-items: center; gap: 0.4rem;
}
.btn-book:hover { background: var(--forest-dim); transform: translateY(-1px); color:#fff; box-shadow: 0 6px 16px rgba(37,99,235,0.25); }

/* ─── ICONS (custom line-icon system) ───────────────────── */
.ico { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-fill { fill: currentColor; stroke: none; }

/* ─── HERO ───────────────────────────────────────────────── */
.hero { position: relative; padding: 5rem 0 4rem; overflow: hidden; background-image: url(../images/hero-bg.jpg); background-size: cover; background-position: center 30%; }
.hero-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(10,17,32,0.94) 0%, rgba(10,17,32,0.88) 38%, rgba(10,17,32,0.55) 62%, rgba(10,17,32,0.25) 100%);
}
.hero .wrap { display: grid; grid-template-columns: 1fr 380px; gap: 4rem; align-items: start; position: relative; z-index: 1; }
.hero-badges { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.775rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 4px; }
.badge svg { width: 13px; height: 13px; }
.badge-navy { background: rgba(255,255,255,0.14); color: #fff; backdrop-filter: blur(4px); }
.badge-amber { background: var(--amber-light); color: var(--amber); }

.hero-title { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.15; color: #fff; margin-bottom: 1.5rem; }
.hero-title em { font-style: normal; color: #7DAAFF; position: relative; }
.hero-title em::after {
  content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--amber) 0%, transparent 100%); border-radius: 2px;
}

.hero-lead { font-size: 1.125rem; line-height: 1.75; color: rgba(255,255,255,0.82); max-width: 52ch; margin-bottom: 2rem; }

.hero-proof {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem;
  padding: 1rem 1.25rem; background: rgba(255,255,255,0.1); backdrop-filter: blur(6px); border-radius: 8px; border-left: 3px solid var(--amber);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.stars-row { display: flex; gap: 2px; color: var(--amber); }
.stars-row svg { width: 15px; height: 15px; }
.proof-text { font-size: 0.875rem; color: rgba(255,255,255,0.75); line-height: 1.4; }
.proof-text strong { color: #fff; }

.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2.5rem; }
.hero-feature { display: flex; align-items: flex-start; gap: 0.6rem; }
.feature-icon {
  width: 34px; height: 34px; background: rgba(255,255,255,0.14); backdrop-filter: blur(4px); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #7DAAFF;
  transition: transform 0.3s ease;
}
.hero-feature:hover .feature-icon { transform: scale(1.1) rotate(-4deg); }
.feature-icon svg { width: 17px; height: 17px; }
.feature-text strong { display: block; font-size: 0.875rem; font-weight: 700; color: #fff; }
.feature-text span { font-size: 0.8rem; color: rgba(255,255,255,0.65); }

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-primary-lg {
  display: inline-flex; align-items: center; gap: 0.5rem; background: var(--forest); color: #fff;
  padding: 0.9rem 1.75rem; border-radius: 8px; font-size: 1rem; font-weight: 700;
  animation: pulse-ring 2.5s ease infinite; transition: background 0.2s, transform 0.15s;
}
.btn-primary-lg:hover { background: var(--forest-dim); transform: translateY(-2px); color:#fff; }
@keyframes pulse-ring {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.45); }
  50%      { box-shadow: 0 0 0 10px rgba(37,99,235,0); }
}
.btn-phone-lg {
  display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.08); color: #fff;
  padding: 0.9rem 1.5rem; border-radius: 8px; font-size: 1rem; font-weight: 700;
  border: 2px solid rgba(255,255,255,0.3); transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-phone-lg:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.16); }
.response-note { margin-top: 1rem; font-size: 0.825rem; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 0.4rem; }
.response-note svg { width: 14px; height: 14px; }

/* Hero illustration panel (replaces stock photo) */
.hero-illustration {
  position: relative;
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(155deg, var(--forest-light) 0%, var(--cream-2) 100%);
  border: 1px solid var(--border-color);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero-illustration::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--border-color) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: 0.4;
}
.hero-illustration svg { position: relative; width: 72%; height: 72%; }
.orbit-ring {
  position: absolute; width: 118%; height: 118%; border: 1.5px dashed var(--border-color);
  border-radius: 50%; animation: spin-slow 50s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* Photo placeholder — swap for a real photo of the master / finished job */
.photo-slot {
  position: relative; width: 100%; height: 100%; border-radius: 16px;
  background: repeating-linear-gradient(135deg, var(--mist) 0 14px, var(--cream-2) 14px 28px);
  border: 2px dashed var(--border-color);
  display: flex; align-items: center; justify-content: center;
}
.photo-slot-inner { text-align: center; padding: 1rem; color: var(--text-muted); }
.photo-slot-inner svg { width: 34px; height: 34px; margin: 0 auto 0.6rem; opacity: 0.6; }
.photo-slot-inner span { display: block; font-size: 0.8rem; font-weight: 600; max-width: 16ch; margin: 0 auto; line-height: 1.4; }
.photo-slot-sm { aspect-ratio: 4/3; border-radius: 10px; margin-bottom: 1.25rem; }
.photo-slot-sm .photo-slot-inner svg { width: 24px; height: 24px; margin-bottom: 0.4rem; }
.photo-slot-sm .photo-slot-inner span { font-size: 0.7rem; }

.hero-photo { position: relative; width: 100%; height: 100%; object-fit: cover; }
.float-chip {
  position: absolute; bottom: 14px; left: 14px;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px;
  padding: 0.6rem 0.9rem; display: flex; align-items: center; gap: 0.5rem;
  box-shadow: 0 8px 20px rgba(30,41,59,0.12);
  animation: float-bob 4s ease-in-out infinite;
}
.float-chip svg { width: 16px; height: 16px; color: var(--amber); }
.float-chip span { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.float-chip-2 {
  position: absolute; top: 16px; right: 16px;
  background: var(--forest); color: #fff; border-radius: 10px;
  padding: 0.5rem 0.8rem; display: flex; align-items: center; gap: 0.4rem;
  box-shadow: 0 8px 20px rgba(37,99,235,0.3);
  animation: float-bob 4s ease-in-out infinite 1.3s;
  font-size: 0.75rem; font-weight: 700;
}
.float-chip-2 svg { width: 14px; height: 14px; }
@keyframes float-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .orbit-ring, .float-chip, .float-chip-2, .btn-primary-lg, .dot-live { animation: none !important; }
}

/* Hero form card
   margin-top pushes the card down to roughly the bottom edge of
   .hero-actions on the left column, so the technician's face in the
   hero photo isn't covered — tuned against the fixed hero copy (the
   h1 uses hard <br> line breaks, so this holds steady across desktop
   widths). Reset to 0 in the ≤1024px stacked layout. */
.hero-form-card {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(30,41,59,0.1); position: sticky; top: 90px; margin-top: 190px;
}
.form-card-header { background: var(--forest); color: #fff; padding: 1.1rem 1.5rem; text-align: center; }
.form-card-header h3 { font-family: Georgia, serif; color: #fff; font-size: 1.15rem; margin-bottom: 0.2rem; }
.form-card-header p { font-size: 0.8rem; opacity: 0.85; color: rgba(255,255,255,0.9); }
.discount-pill {
  display: inline-block; background: var(--amber); color: #fff; font-size: 0.775rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 20px; margin-bottom: 0.5rem;
}
.form-card-body { padding: 1.1rem 1.25rem; }
.field-group { margin-bottom: 0.75rem; }
.field-group label { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.3rem; }
.field-group input, .field-group select {
  width: 100%; padding: 0.6rem 1rem; border: 1.5px solid var(--border-color); border-radius: 6px;
  font-size: 1rem; color: var(--text-primary); background: var(--bg-base);
  transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 16px;
}
.field-group select { cursor: pointer; }
.field-group input:focus, .field-group select:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.field-group input::placeholder { color: var(--text-muted); }
.btn-form-submit {
  width: 100%; background: var(--forest); color: #fff; padding: 0.75rem; border-radius: 8px;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; transition: background 0.2s, transform 0.15s;
  margin-top: 0.35rem; margin-bottom: 0.6rem;
}
.btn-form-submit:hover { background: var(--forest-dim); transform: translateY(-1px); }
.form-guarantee { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.775rem; color: var(--text-muted); line-height: 1.5; }
.form-guarantee svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* ─── BRANDS STRIP ───────────────────────────────────────── */
.brands-strip { background: var(--bg-card); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 1.5rem 0; }
.brands-strip .wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; text-align: center; }
.brands-label { font-size: 0.775rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.brands-list { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; list-style: none; }
.brands-list li { font-family: Georgia, serif; font-size: 1.05rem; font-weight: normal; color: var(--text-muted); letter-spacing: 0.03em; transition: color 0.2s; }
.brands-list li:hover { color: var(--text-primary); }

/* ─── STATS ──────────────────────────────────────────────── */
.stats-band { background: var(--bg-section); padding: 3rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; background: var(--bg-card); }
.stat-item { text-align: center; padding: 2rem 1rem; border-right: 1px solid var(--border-color); }
.stat-item:last-child { border-right: none; }
.stat-num { font-family: "Courier New", Courier, monospace; font-size: 2.5rem; font-weight: bold; color: var(--forest); line-height: 1; margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.825rem; color: var(--text-muted); line-height: 1.4; }

/* ─── SERVICES ───────────────────────────────────────────── */
.services-sec { padding: 5rem 0; background: var(--bg-section); }
.sec-eyebrow { font-size: 0.775rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.75rem; }
.sec-title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 0.75rem; }
.sec-lead { font-size: 1.05rem; color: var(--text-secondary); max-width: 54ch; }
.sec-header { margin-bottom: 3rem; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.service-card {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; position: relative;
}
.service-card:hover { border-color: var(--forest); box-shadow: 0 12px 32px rgba(37,99,235,0.14); transform: translateY(-4px); }
.service-card.featured { border-color: var(--amber); }
.featured-tag {
  position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--forest); color: #fff; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35rem 0.75rem; border-radius: 20px; box-shadow: 0 4px 12px rgba(30,41,59,0.25);
}
.svc-photo-wrap { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: var(--mist); }
.svc-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.service-card:hover .svc-photo { transform: scale(1.06); }
.svc-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.svc-title-row { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; }
.svc-title-row svg { width: 19px; height: 19px; color: var(--forest); flex-shrink: 0; }
.svc-title { font-family: Georgia, serif; font-size: 1.1rem; color: var(--text-primary); }
.svc-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.5rem; flex: 1; }
.svc-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1.1rem; border-top: 1px solid var(--border-color); }
.svc-price-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem; }
.svc-price { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.btn-svc {
  font-size: 0.85rem; font-weight: 600; color: #fff; background: var(--forest); padding: 0.55rem 1.15rem; border-radius: 7px;
  transition: background 0.2s, transform 0.15s;
}
.btn-svc:hover { background: var(--forest-dim); transform: translateY(-1px); }

/* ─── TESTIMONIALS ───────────────────────────────────────── */
.reviews-sec { padding: 5rem 0; background: var(--bg-section); }

/* Horizontally scrollable review row — arrows + drag (main.js) for
   desktop, native swipe on touch. scroll-snap keeps cards aligned
   whichever way it's scrolled. */
.reviews-scroll { position: relative; }
.reviews-grid {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0.25rem 0.25rem 0.75rem; margin: -0.25rem -0.25rem -0.75rem; cursor: grab;
  scrollbar-width: thin; scrollbar-color: var(--slate-light) transparent;
}
.reviews-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.review-card { flex: 0 0 min(360px, 84vw); scroll-snap-align: start; }
.reviews-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(30,41,59,0.14);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.reviews-arrow:hover { border-color: var(--forest); color: var(--forest); transform: translateY(-50%) scale(1.06); }
.reviews-arrow svg { width: 18px; height: 18px; }
.reviews-arrow-prev { left: -21px; }
.reviews-arrow-next { right: -21px; }
@media (max-width: 768px) {
  .reviews-arrow { display: none; }
}
.review-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 1.75rem; transition: transform 0.25s, box-shadow 0.25s; }
.review-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(30,41,59,0.1); }
.review-stars { display: flex; gap: 2px; color: var(--amber); margin-bottom: 1rem; }
.review-stars svg { width: 15px; height: 15px; }
.review-text { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.25rem; font-style: italic; }
.review-author { font-weight: 700; font-size: 0.875rem; color: var(--text-primary); }
.review-verified { font-size: 0.75rem; color: var(--forest); display: flex; align-items: center; gap: 0.3rem; margin-top: 0.2rem; }
.review-verified svg { width: 12px; height: 12px; }
.reviews-cta { text-align: center; margin-top: 2.5rem; }
.btn-outline-forest {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: 2px solid var(--forest);
  border-radius: 8px; color: var(--forest); font-weight: 600; font-size: 0.9rem; transition: background 0.2s, color 0.2s;
}
.btn-outline-forest:hover { background: var(--forest); color: #fff; }

/* ─── TRUST BADGES ───────────────────────────────────────── */
.trust-sec { padding: 5rem 0; background: var(--bg-section); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.trust-grid + .trust-grid { margin-top: 1.5rem; }
.trust-card {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.75rem;
  display: flex; gap: 1rem; align-items: flex-start; transition: transform 0.25s, box-shadow 0.25s;
}
.trust-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(30,41,59,0.08); }
.trust-icon {
  width: 44px; height: 44px; border-radius: 10px; background: var(--forest-light); color: var(--forest);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.trust-icon svg { width: 22px; height: 22px; }
.trust-card.is-amber .trust-icon { background: var(--amber-light); color: var(--amber); }
.trust-card h4 { font-size: 1rem; margin-bottom: 0.35rem; }
.trust-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55; }

/* ─── MASTER BIO ─────────────────────────────────────────── */
.master-sec { padding: 5rem 0; background: var(--bg-base); }
.master-layout { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: center; }
.master-photo-wrap { position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-color); }
.master-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.master-exp-badge {
  position: absolute; bottom: 12px; left: 12px; background: var(--forest); color: #fff; border-radius: 10px;
  padding: 0.6rem 0.9rem; box-shadow: 0 8px 20px rgba(37,99,235,0.3);
}
.master-exp-badge strong { display: block; font-size: 1.35rem; line-height: 1; font-family: Georgia, serif; }
.master-exp-badge span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; }
.master-content .sec-eyebrow { color: var(--amber); }
.master-content h2 { margin-bottom: 1rem; }
.master-content > p { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.8; margin-bottom: 1.75rem; max-width: 58ch; }
.master-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.75rem; }
.master-point { display: flex; gap: 0.75rem; align-items: flex-start; }
.master-point-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--forest-light); color: var(--forest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.master-point-icon svg { width: 18px; height: 18px; }
.master-point strong { display: block; font-size: 0.9rem; margin-bottom: 0.15rem; }
.master-point span { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; }

/* ─── CONTACT & MAP ──────────────────────────────────────── */
.contact-sec { padding: 5rem 0; background: var(--bg-section); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: stretch; }
.contact-info-card, .map-frame { height: 100%; }
.contact-info-card {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 2rem;
}
.contact-row { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--border-color); }
.contact-row:last-child { border-bottom: none; }
.contact-row-icon { width: 40px; height: 40px; border-radius: 9px; background: var(--forest-light); color: var(--forest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-row-icon svg { width: 19px; height: 19px; }
.contact-row-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.15rem; }
.contact-row-value { font-weight: 600; color: var(--text-primary); }
.contact-row-value a { color: inherit; }
.map-frame { border-radius: 14px; overflow: hidden; border: 1px solid var(--border-color); aspect-ratio: 4/3; }
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.15) contrast(1.05); }

.district-strip { padding: 2.5rem 0; background: var(--bg-base); border-top: 1px solid var(--border-color); }
.district-label { font-size: 0.775rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1rem; }
.district-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.district-list a {
  font-size: 0.825rem; color: var(--text-secondary); background: var(--bg-section); padding: 0.4rem 0.9rem;
  border-radius: 20px; transition: background 0.2s, color 0.2s;
}
.district-list a:hover { background: var(--forest); color: #fff; }

/* ─── CHAT WIDGET ────────────────────────────────────────── */
.chat-bubble {
  position: fixed; bottom: 88px; right: 20px; z-index: 500;
  width: 58px; height: 58px; border-radius: 50%; background: var(--forest); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(37,99,235,0.35);
  transition: transform 0.2s;
}
.chat-bubble:hover { transform: scale(1.06); }
.chat-bubble svg { width: 26px; height: 26px; }
.chat-panel {
  position: fixed; bottom: 156px; right: 20px; z-index: 500; width: 300px; max-width: calc(100vw - 40px);
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(30,41,59,0.2); display: none;
}
.chat-panel.open { display: block; }
.chat-panel-head { background: var(--forest); color: #fff; padding: 1rem 1.1rem; display: flex; align-items: center; gap: 0.6rem; }
.chat-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }
.chat-panel-head strong { display: block; font-size: 0.9rem; }
.chat-panel-head span { font-size: 0.7rem; opacity: 0.85; }
.chat-panel-body { padding: 1.1rem; }
.chat-msg { background: var(--bg-section); border-radius: 10px; padding: 0.75rem 0.9rem; font-size: 0.85rem; margin-bottom: 1rem; line-height: 1.5; }
.chat-panel-body .field-group { margin-bottom: 0.75rem; }
.chat-quick-contact { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 0.9rem 0; margin-bottom: 0.9rem; }
.chat-quick-contact-label { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.6rem; }
@media (max-width: 640px) {
  .chat-bubble { bottom: 84px; }
  .chat-panel { bottom: 148px; right: 12px; }
}

/* ─── PROCESS ────────────────────────────────────────────── */
.process-sec { padding: 5rem 0; background: var(--bg-base); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 3rem; position: relative; }
.steps-grid::before {
  content: ''; position: absolute; top: 2rem; left: calc(12.5% + 0.5rem); right: calc(12.5% + 0.5rem); height: 2px;
  background: linear-gradient(90deg, var(--forest), var(--amber-light), var(--forest)); opacity: 0.35;
}
.step-item { text-align: center; position: relative; }
.step-circle {
  width: 56px; height: 56px; border: 2px solid var(--forest); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem;
  font-family: Georgia, serif; font-size: 1.25rem; color: var(--forest); font-weight: bold;
  position: relative; z-index: 1; background: var(--bg-base); transition: transform 0.3s, background 0.3s, color 0.3s;
}
.step-item:hover .step-circle { background: var(--forest); color: #fff; transform: scale(1.08); }
.step-item h4 { font-size: 1rem; margin-bottom: 0.5rem; }
.step-item p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq-sec { padding: 5rem 0; background: var(--bg-section); }
.faq-wrap { max-width: 760px; margin: 3rem auto 0; }
.faq-item { border-bottom: 1px solid var(--border-color); }
.faq-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0;
  background: none; text-align: left; font-size: 1rem; font-weight: 600; color: var(--text-primary); gap: 1rem; transition: color 0.2s;
}
.faq-btn:hover { color: var(--forest); }
.faq-icon {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--border-color);
  display: flex; align-items: center; justify-content: center; color: var(--text-secondary);
  transition: background 0.2s, transform 0.3s, color 0.2s;
}
.faq-icon svg { width: 12px; height: 12px; }
.faq-item.open .faq-icon { background: var(--amber); color: #fff; transform: rotate(135deg); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-body { max-height: 200px; }
.faq-body p { padding-bottom: 1.25rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; }

/* ─── CTA BANNER ─────────────────────────────────────────── */
.cta-banner { background: linear-gradient(135deg, #0F1E42 0%, #16295C 100%); padding: 5rem 0; text-align: center; position: relative; overflow: hidden; }
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
}
.cta-banner .wrap { position: relative; }
.cta-banner h2 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 1rem; }
.cta-banner p { color: rgba(255,255,255,0.85); font-size: 1.1rem; margin-bottom: 2rem; }
.cta-banner-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-cta-white {
  display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; color: var(--forest);
  padding: 0.9rem 2rem; border-radius: 8px; font-size: 1rem; font-weight: 700; transition: opacity 0.2s, transform 0.15s;
}
.btn-cta-white svg { width: 17px; height: 17px; }
.btn-cta-white:hover { opacity: 0.92; transform: translateY(-1px); color: var(--forest); }
.btn-cta-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.12); color: #fff;
  padding: 0.9rem 2rem; border-radius: 8px; font-size: 1rem; font-weight: 600; border: 1.5px solid rgba(255,255,255,0.3); transition: background 0.2s;
}
.btn-cta-ghost svg { width: 17px; height: 17px; }
.btn-cta-ghost:hover { background: rgba(255,255,255,0.2); color:#fff; }

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer { background: var(--ink-2); color: #94A3B8; padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer-about .footer-logo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.footer-logo-icon { width: 32px; height: 32px; background: var(--forest); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.footer-logo-name { font-family: Georgia, serif; color: #F1F5F9; font-size: 1.1rem; }
.footer-about p { font-size: 0.875rem; line-height: 1.65; max-width: 30ch; }
.footer-col h4 { color: #E2E8F0; font-family: Georgia, serif; font-size: 0.975rem; margin-bottom: 1.25rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a { color: #94A3B8; font-size: 0.875rem; transition: color 0.2s; }
.footer-links a:hover { color: #93C5FD; }
.footer-contact-line { font-size: 0.875rem; margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; }
.footer-contact-line span { font-size: 0.75rem; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; }
.footer-contact-line a { color: #F1F5F9; font-weight: 600; }
.footer-contact-line a:hover { color: #93C5FD; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: #64748B; }
.footer-bottom a { color: #64748B; }
.footer-bottom a:hover { color: #94A3B8; }

/* ─── FLOATING MOBILE ────────────────────────────────────── */
.mobile-float {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-card);
  border-top: 1px solid var(--border-color); padding: 0.75rem 1rem; gap: 0.75rem; z-index: 200; box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
.mobile-float .btn-m { flex: 1; padding: 0.75rem; border-radius: 7px; font-size: 0.9rem; font-weight: 700; text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.mobile-float svg { width: 16px; height: 16px; }
.btn-m-call { background: var(--forest); color: #fff; }
.btn-m-book { background: transparent; color: var(--forest); border: 2px solid var(--forest); }

@media (max-width: 1024px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-form-card { position: static; max-width: 480px; margin-top: 2rem; }
  .hero-illustration { max-width: 480px; margin: 0 auto; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-top: 1px solid var(--border-color); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid::before { display: none; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .master-layout { grid-template-columns: 220px 1fr; gap: 2rem; }
  .master-points { grid-template-columns: 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .map-frame { aspect-ratio: 16/9; }
}

@media (max-width: 768px) {
  .trust-grid { grid-template-columns: 1fr; }
  .master-layout { grid-template-columns: 1fr; text-align: center; }
  .master-photo-wrap { max-width: 280px; margin: 0 auto; }
  .master-point { text-align: left; }
  .master-content > p { margin-left: auto; margin-right: auto; }
}

@media (max-width: 640px) {
  nav, .btn-book { display: none; }
  .hero-form-card { display: none; }
  .hero .wrap { padding-top: 0; }
  .hero { padding: 3rem 0 2rem; }
  .services-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .mobile-float { display: flex; }
  body { padding-bottom: 70px; }
  .master-points { grid-template-columns: 1fr; }
  .district-list { gap: 0.5rem; }
  .district-list a { font-size: 0.775rem; padding: 0.35rem 0.75rem; }
  .trust-card { flex-direction: column; }
  .services-sec, .trust-sec, .master-sec, .contact-sec, .reviews-sec, .process-sec, .faq-sec { padding: 3rem 0; }
}

/* ─── LEAD FORM EXTRAS (honeypot + status) ──────────────── */
.stk-hp { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; pointer-events: none; }
.stk-form-status { font-size: 0.85rem; margin-top: 0.6rem; min-height: 1.2em; text-align: center; }

/* ═══════════════════════════════════════════════════════════
   INNER PAGES — blog, districts, services, cennik
   Added in v3.0.0. Reuses the tokens defined at the top of
   this file, so light/dark mode work with no extra rules.
   ═══════════════════════════════════════════════════════════ */

/* ─── A11Y UTILITIES ────────────────────────────────────── */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 1000;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 0.75rem 1.25rem; background: var(--forest); color: #fff;
  border-radius: 6px; font-weight: 600; text-decoration: none;
}

/* ─── LAYOUT PRIMITIVES ─────────────────────────────────── */
.wrap.narrow { max-width: 780px; }
.section-plain { padding: 4.5rem 0; background: var(--bg-base); }
.section-plain + .section-plain { padding-top: 0; }
.section-more { margin-top: 2rem; text-align: center; }
.section-more a { color: var(--forest); font-weight: 600; text-decoration: none; }
.section-more a:hover { text-decoration: underline; }
.empty-state { color: var(--text-secondary); font-size: 1.05rem; text-align: center; padding: 3rem 0; }

.page-head { padding: 3rem 0 2.5rem; background: var(--bg-section); border-bottom: 1px solid var(--border-color); }
.page-head .hero-title { margin: 0.5rem 0 1rem; }
.page-head .hero-lead { max-width: 62ch; }
.page-head .sec-eyebrow a { color: inherit; text-decoration: none; }
.page-head .sec-eyebrow a:hover { text-decoration: underline; }
.page-head .hero-actions { margin-top: 1.75rem; }

/* ─── BREADCRUMBS ───────────────────────────────────────── */
.crumbs { background: var(--bg-base); border-bottom: 1px solid var(--border-color); font-size: 0.8rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0.75rem 0; }
.crumbs li + li::before { content: "\203A"; color: var(--text-muted); margin-right: 0.4rem; }
.crumbs a { color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--forest); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text-primary); font-weight: 600; }

/* ─── LOCAL / SERVICE HERO ──────────────────────────────── */
.local-hero { padding: 3.5rem 0 4rem; background: var(--bg-section); border-bottom: 1px solid var(--border-color); }
.local-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem; align-items: start; }
.local-hero .hero-title { font-size: clamp(2rem, 3.6vw, 3rem); margin: 0.5rem 0 1rem; }
.local-hero .hero-lead { margin-bottom: 1.5rem; max-width: 58ch; }
.local-hero .hero-badges { margin-bottom: 1.75rem; }
.local-hero .response-note { margin-top: 1rem; }

.local-fact-card {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px;
  padding: 1.75rem; box-shadow: 0 4px 24px rgba(15,26,36,0.06);
}
.local-fact-title { font-family: Georgia, serif; font-size: 1.15rem; margin-bottom: 1.1rem; color: var(--text-primary); }
.local-facts { display: grid; gap: 0.1rem; margin: 0; }
.local-facts > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--border-color);
}
.local-facts > div:last-child { border-bottom: 0; }
.local-facts dt { color: var(--text-secondary); font-size: 0.875rem; margin: 0; }
.local-facts dd { margin: 0; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.local-fact-note { margin-top: 1.1rem; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }

.svc-hero-figure { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); background: var(--bg-card); }
.svc-hero-figure img { width: 100%; height: auto; display: block; aspect-ratio: 16/10; object-fit: cover; }
.svc-hero-figure figcaption { padding: 0.85rem 1.1rem; font-size: 0.825rem; color: var(--text-secondary); }

/* ─── PROSE (article body + editorial blocks) ───────────── */
.prose { color: var(--text-body); font-size: 1.0625rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.35rem; }
.prose h2 {
  font-family: Georgia, serif; font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.25; color: var(--text-primary); margin-top: 2.75rem; margin-bottom: 0.25rem;
}
.prose h3 { font-family: Georgia, serif; font-size: 1.3rem; color: var(--text-primary); margin-top: 2rem; margin-bottom: 0.25rem; }
.prose h4 { font-size: 1.075rem; color: var(--text-primary); margin-top: 1.75rem; }
.prose p { margin-bottom: 0; }
.prose a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--forest-dim); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: 0.5rem; }
.prose strong { color: var(--text-primary); font-weight: 700; }
.prose img, .prose figure img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
.prose figure { margin: 2rem 0; }
.prose figcaption { font-size: 0.825rem; color: var(--text-muted); margin-top: 0.6rem; text-align: center; }
.prose blockquote {
  border-left: 3px solid var(--forest); background: var(--forest-light);
  padding: 1.1rem 1.4rem; border-radius: 0 8px 8px 0; margin: 2rem 0;
  color: var(--text-body);
}
.prose blockquote p { margin: 0; }
.prose code {
  background: var(--mist); padding: 0.15em 0.4em; border-radius: 4px;
  font-family: "Courier New", Courier, monospace; font-size: 0.9em;
}
.prose hr { border: 0; border-top: 1px solid var(--border-color); margin: 2.5rem 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.925rem; }
.prose th, .prose td { border: 1px solid var(--border-color); padding: 0.7rem 0.85rem; text-align: left; }
.prose thead th { background: var(--bg-section); }

/* ─── SIGNS LIST (service pages) ────────────────────────── */
.signs-list { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.signs-list li { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0; }
.signs-list svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.15rem; color: var(--forest); fill: none; stroke: currentColor; stroke-width: 2; }

/* ─── INLINE CTA (mid-article) ──────────────────────────── */
.inline-cta {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
  background: var(--forest-light); border: 1px solid var(--forest);
  border-radius: 12px; padding: 1.5rem 1.75rem; margin: 2.5rem 0;
}
.inline-cta-body strong { display: block; font-size: 1.05rem; color: var(--text-primary); margin-bottom: 0.25rem; }
.inline-cta-body p { margin: 0; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; max-width: 46ch; }
.inline-cta-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ─── PRICE TABLE ───────────────────────────────────────── */
.price-table-wrap { overflow-x: auto; margin: 2rem 0; -webkit-overflow-scrolling: touch; }
.price-table { width: 100%; border-collapse: collapse; min-width: 420px; background: var(--bg-card); }
.price-table caption { caption-side: top; text-align: left; font-size: 0.85rem; color: var(--text-muted); padding-bottom: 0.75rem; }
.price-table th, .price-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-color); text-align: left; }
.price-table thead th { background: var(--bg-section); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.price-table tbody th { font-weight: 600; }
.price-table tbody th a { color: var(--text-primary); text-decoration: none; }
.price-table tbody th a:hover { color: var(--forest); text-decoration: underline; }
.price-table tbody tr:hover { background: var(--bg-section); }
.price-cell { font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-note { font-size: 0.825rem; color: var(--text-muted); line-height: 1.6; margin-top: 0.9rem; }

/* ─── POST GRID + CARDS ─────────────────────────────────── */
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.post-card {
  display: flex; flex-direction: column; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.post-card:hover { transform: translateY(-3px); border-color: var(--forest); box-shadow: 0 10px 28px rgba(15,26,36,0.1); }
.post-card-media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--mist); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.post-card:hover .post-card-media img { transform: scale(1.04); }
.post-card-body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.post-card-meta { display: flex; gap: 0.45rem; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.post-card-title { font-family: Georgia, serif; font-size: 1.1rem; line-height: 1.3; margin-bottom: 0.55rem; }
.post-card-title a { color: var(--text-primary); text-decoration: none; }
.post-card-title a:hover { color: var(--forest); }
.post-card-excerpt { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* ─── SINGLE POST CHROME ────────────────────────────────── */
.post-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); }
.post-hero-figure { margin: 2rem 0 0; border-radius: 12px; overflow: hidden; }
.post-hero-figure img { width: 100%; height: auto; display: block; }
.entry-content { padding-top: 2.5rem; }
.post-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 2rem 0 0; margin: 0; }
.post-tags a {
  display: inline-block; padding: 0.3rem 0.7rem; border-radius: 9999px;
  background: var(--bg-section); color: var(--text-secondary);
  font-size: 0.775rem; text-decoration: none;
}
.post-tags a:hover { background: var(--forest-light); color: var(--forest); }

.post-nav { padding: 2.5rem 0; border-top: 1px solid var(--border-color); }
.post-nav .wrap { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.post-nav a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; max-width: 44ch; }
.post-nav a:hover { color: var(--forest); }
.post-nav-next { margin-left: auto; text-align: right; }

/* ─── PAGINATION ────────────────────────────────────────── */
.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 0.75rem;
  border: 1px solid var(--border-color); border-radius: 6px;
  color: var(--text-secondary); text-decoration: none; font-size: 0.9rem;
}
.pagination .page-numbers:hover { border-color: var(--forest); color: var(--forest); }
.pagination .page-numbers.current { background: var(--forest); border-color: var(--forest); color: #fff; font-weight: 600; }

/* ─── SEARCH FORM ───────────────────────────────────────── */
.stk-search { display: flex; gap: 0.5rem; margin-top: 1.5rem; max-width: 480px; }
.stk-search input[type="search"] {
  flex: 1; padding: 0.75rem 1rem; border: 1.5px solid var(--border-color);
  border-radius: 6px; font-size: 1rem; background: var(--bg-card); color: var(--text-primary);
}
.stk-search input[type="search"]:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.stk-search button {
  padding: 0.75rem 1.25rem; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--forest); color: #fff; font-weight: 600; font-size: 0.9rem; min-height: 44px;
}
.stk-search button:hover { background: var(--forest-dim); }

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .local-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
  .posts-grid { grid-template-columns: 1fr; }
  .section-plain { padding: 3rem 0; }
  .local-hero { padding: 2.5rem 0 3rem; }
  .prose { font-size: 1rem; }
  .inline-cta { flex-direction: column; align-items: flex-start; }
  .inline-cta-actions { width: 100%; }
  .col-hide-sm { display: none; }
  /* With the Czas column hidden, name + price fit the narrow viewport —
     the desktop min-width would otherwise force sideways scrolling that
     cuts the price column off screen. */
  .price-table { min-width: 0; }
  .price-table th, .price-table td { padding: 0.75rem 0.6rem; }
  .post-nav .wrap { flex-direction: column; }
  .post-nav-next { margin-left: 0; text-align: left; }
}

/* ─── AI ASSISTANT CHAT ─────────────────────────────────── */
.chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 0.25rem;
  margin-bottom: 0.85rem;
  scroll-behavior: smooth;
}
.chat-msg-bot,
.chat-msg-user {
  max-width: 88%;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-msg-bot {
  align-self: flex-start;
  background: var(--bg-section);
  color: var(--text-body);
  border-bottom-left-radius: 4px;
}
.chat-msg-user {
  align-self: flex-end;
  background: var(--forest);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.is-typing { opacity: 0.6; letter-spacing: 0.15em; }

.chat-ai-form { display: flex; gap: 0.5rem; }
.chat-ai-form input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--bg-card);
  color: var(--text-primary);
}
.chat-ai-form input:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.chat-ai-form button {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--forest);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-ai-form button:hover { background: var(--forest-dim); }
.chat-ai-form button svg { width: 18px; height: 18px; fill: none; stroke-width: 2; }

.chat-disclaimer {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.chat-disclaimer a { color: var(--forest); }

@media (prefers-reduced-motion: reduce) {
  .chat-log { scroll-behavior: auto; }
}

/* ─── OUT-OF-HOURS STATUS PILL ──────────────────────────── */
/* The dot reads as "live" — outside service hours it must not stay green,
   because the claim then is "we take your request", not "we are on site". */
.status-live.is-closed .dot-live {
  background: var(--amber);
  animation: none;
}

/* ─── FIXES FOUND BY LOOKING AT THE RENDERED PAGES ──────── */

/* 1. Icon sizing.
   .ico never carried a size — the landing page worked only because every
   <svg> there has explicit width/height attributes. Inner-page templates
   without them fell back to the SVG default of 300x150 and blew the buttons
   apart. Size only the ones that declare no width, so existing markup with
   explicit attributes keeps its exact size. */
svg.ico:not([width]),
svg.ico-fill:not([width]) {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

/* 2. Card headings.
   Inner-page cards use <h3> (correct under a section <h2>) while the CSS
   only styled <h4>, so they inherited the 1.875rem global heading size and
   wrapped onto three lines. */
.trust-card h3 { font-size: 1rem; margin-bottom: 0.35rem; line-height: 1.3; }
.step-item h3  { font-size: 1rem; margin-bottom: 0.5rem; }

/* 3. Fault cards were ragged: uneven heights and text crammed beside a
   full-height icon column. */
.trust-grid { align-items: stretch; }
.trust-card { min-height: 100%; }
.trust-card h3 + p { margin-top: 0.15rem; }

/* 4a. Light-background heroes.
   .hero-title / .hero-lead / .response-note / .badge-navy were written for
   the dark photo hero on the front page and hard-code white. Inner pages
   reuse the same classes over a light background, where white text is
   invisible. Restate them for those contexts. */
.local-hero .hero-title,
.page-head  .hero-title { color: var(--text-primary); }

.local-hero .hero-lead,
.page-head  .hero-lead { color: var(--text-secondary); }

.local-hero .response-note,
.page-head  .response-note { color: var(--text-muted); }

.local-hero .badge-navy,
.page-head  .badge-navy {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  backdrop-filter: none;
}

/* 4b. Front-page hero legibility.
   The photo is bright on the left third, exactly where the lead copy and the
   four feature tiles sit. Scoped to .hero so the light pages above are not
   affected. */
.hero .hero-lead { color: #E8EEF6; text-shadow: 0 1px 12px rgba(8, 16, 30, 0.55); }
.hero .hero-feature .feature-text strong { color: #FFFFFF; }
.hero .hero-feature .feature-text span { color: #C8D6E8; }
.hero .hero-content { position: relative; z-index: 2; }
.hero .hero-content::before {
  content: "";
  position: absolute;
  inset: -2.5rem -3rem;
  background: radial-gradient(120% 90% at 20% 45%, rgba(8, 16, 30, 0.72) 0%, rgba(8, 16, 30, 0.45) 55%, rgba(8, 16, 30, 0) 100%);
  z-index: -1;
  pointer-events: none;
  border-radius: 24px;
}
.hero .response-note { color: #C8D6E8; }

/* 5. Scroll reveal ran for 0.7s plus stagger, long enough that headings read
   as washed-out grey text mid-scroll. Same effect, less time in the
   half-rendered state. */
.reveal {
  transform: translateY(18px);
  transition: opacity 0.42s cubic-bezier(.16,.8,.3,1), transform 0.42s cubic-bezier(.16,.8,.3,1);
}

/* 7. Article headline scale.
   .hero-title is sized for a full-width landing hero (up to 3.5rem). Inside
   the 780px reading column an article title at that size wraps to three
   lines and reads as a poster, not a headline. */
.single-post .page-head .hero-title,
.page-head .hero-title {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════
   REVISION ROUND — items requested after the first visual review
   ═══════════════════════════════════════════════════════════ */

/* 1. Hero headline accent in gold, matching serwis-okien.pro (#EAB308).
      The old amber underline is dropped — with gold type it doubled up. */
.hero-title em {
  font-style: normal;
  color: #EAB308;
  font-weight: 800;
  position: relative;
}
.hero-title em::after { content: none; }

/* 2. Logo sub-line "Poznań i okolice". */
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  margin-top: 0.1rem;
}
.hero .logo-sub,
.header-main .logo-sub { color: var(--text-secondary); }

/* 3. Hero badges — tinted pills instead of flat grey chips. */
.badge { border-radius: 9999px; padding: 0.34rem 0.8rem; border: 1px solid transparent; }
.badge-gold {
  background: rgba(234, 179, 8, 0.18);
  color: #FACC15;
  border-color: rgba(250, 204, 21, 0.35);
}
.badge-google {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(4px);
}
.badge-google .ico-fill { fill: #FACC15; }
.badge-live {
  background: rgba(34, 197, 94, 0.18);
  color: #4ADE80;
  border-color: rgba(74, 222, 128, 0.35);
}

/* 5. The discount pill was clipped because it sat in a fixed-width slot. */
.discount-pill {
  display: inline-block;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* 6. Section lead on one line on desktop. 54ch wrapped the services intro. */
.sec-lead { max-width: 68rem; }
@media (max-width: 1100px) { .sec-lead { max-width: 54ch; } }

/* 8. Service card hover — grey instead of blue, and the bestseller sticker
      gets tighter corners. */
.service-card:hover { border-color: var(--slate-light); box-shadow: 0 10px 28px rgba(15, 26, 36, 0.10); }
.service-card.featured { border-color: var(--border-color); }
.service-card.featured:hover { border-color: var(--slate-light); }
.featured-tag { border-radius: 4px; }

/* 10. Comparison block, rebuilt light with two tinted cards and a badge
       between them — replaces the dark table. */
.compare-sec { padding: 5rem 0; background: var(--bg-section); position: relative; }
.compare-sec .sec-title { color: var(--text-primary); }
.compare-sec .sec-lead { color: var(--text-secondary); }
.compare-sec .sec-header { text-align: center; }
.compare-sec .sec-lead { margin: 0 auto; }

.cmp-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
}
.cmp-card { border-radius: 16px; padding: 2rem; height: 100%; }
.cmp-card-bad  { background: #FEF2F2; }
.cmp-card-good { background: #ECFDF5; }

.cmp-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: Georgia, serif;
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
}
.cmp-card-bad  .cmp-title { color: #B91C1C; }
.cmp-card-good .cmp-title { color: #047857; }

.cmp-price {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.4rem;
  font-variant-numeric: tabular-nums;
}
.cmp-card-bad  .cmp-price { color: #EF4444; }
.cmp-card-good .cmp-price { color: #10B981; }

.cmp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.cmp-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.925rem; line-height: 1.55; }
.cmp-list svg { flex-shrink: 0; margin-top: 0.15rem; }
.cmp-card-bad  .cmp-list svg { color: #EF4444; }
.cmp-card-good .cmp-list svg { color: #10B981; }
.cmp-card-bad  .cmp-list span { color: #7F1D1D; }
.cmp-card-good .cmp-list span { color: #065F46; }

.cmp-badge {
  width: 108px;
  height: 108px;
  border-radius: 9999px;
  background: var(--forest);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.32);
  flex-shrink: 0;
}
.cmp-badge-num { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.cmp-badge-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; margin-top: 0.2rem; }

.cmp-note {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .cmp-layout { grid-template-columns: 1fr; gap: 1rem; }
  .cmp-badge { margin: -0.25rem auto; width: 84px; height: 84px; }
}

/* 11. Master block — right column restructured: heading first, first-person
       intro, then icon rows with the title on its own line. */
.master-title {
  font-family: Georgia, serif;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.master-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  max-width: 46ch;
}
/* One column, not three: the points read as a list of promises, and three
   narrow columns squeezed each description onto four lines. */
.master-points { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-bottom: 2rem; }
.master-point { display: flex; gap: 0.9rem; align-items: flex-start; }
.master-point-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--forest-light);
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
}
.master-point strong {
  display: block;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.master-point span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   CONVERSION ROUND — before/after slider, chat bubble, modals
   ═══════════════════════════════════════════════════════════ */

/* ─── BEFORE / AFTER SLIDER ─────────────────────────────── */
.ba-sec { padding: 5rem 0; background: var(--bg-base); }
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }

.ba-card { display: flex; flex-direction: column; }
.ba-slider {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--mist);
  cursor: ew-resize;
  user-select: none;
  box-shadow: 0 4px 20px rgba(15, 26, 36, 0.08);
}
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-img-after { z-index: 1; }
/* Stays full-size like .ba-img-after — only the visible region changes, via
   clip-path set by JS. Resizing this box's width instead (the naive approach)
   would re-run object-fit: cover against a narrower box and the "before"
   photo would drift out of alignment with "after" as the handle moves. */
.ba-before-wrap {
  position: absolute; inset: 0; z-index: 2;
  clip-path: inset(0 50% 0 0);
}
.ba-img-before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3;
  width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  transform: translateX(-50%);
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.ba-handle span {
  width: 36px; height: 36px; border-radius: 50%; background: #fff;
  box-shadow: 0 4px 14px rgba(15,26,36,0.25);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ba-handle span::before, .ba-handle span::after {
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px;
  border-top: 2px solid var(--forest); border-right: 2px solid var(--forest);
}
.ba-handle span::before { left: 10px; transform: translateY(-50%) rotate(-135deg); }
.ba-handle span::after  { right: 10px; transform: translateY(-50%) rotate(45deg); }

.ba-tag {
  position: absolute; top: 0.75rem; z-index: 4;
  padding: 0.25rem 0.7rem; border-radius: 9999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(15,23,42,0.6); color: #fff; backdrop-filter: blur(3px);
}
.ba-tag-before { left: 0.75rem; }
.ba-tag-after { right: 0.75rem; }

.ba-range {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0;
  appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize;
}
.ba-range::-webkit-slider-runnable-track { width: 100%; height: 100%; background: transparent; }
.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 100%; height: 100%; background: transparent; cursor: ew-resize;
}
.ba-range::-moz-range-track { width: 100%; height: 100%; background: transparent; border: none; }
.ba-range::-moz-range-thumb { width: 44px; height: 100%; background: transparent; border: none; cursor: ew-resize; }
.ba-range:focus-visible ~ .ba-handle span { box-shadow: 0 0 0 3px rgba(37,99,235,0.4), 0 4px 14px rgba(15,26,36,0.25); }

.ba-card figcaption { margin-top: 1rem; }
.ba-card figcaption strong { display: block; font-family: Georgia, serif; font-size: 1.05rem; color: var(--text-primary); margin-bottom: 0.3rem; }
.ba-card figcaption span { display: block; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; }

@media (max-width: 900px) {
  .ba-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}

/* ─── CHAT BUBBLE — bigger, bolder icon, gentle pulse ─────
   Only sizing here: .chat-bubble's position/fixed placement is set by
   the base rule earlier in this file — redeclaring position here would
   silently override it back to the static default and misplace the button. */
.chat-bubble { width: 68px; height: 68px; }
/* Bigger, bolder icon glyph — not a ring around the circle. */
.chat-bubble svg.ico { width: 38px; height: 38px; stroke-width: 2.1; }

@keyframes stk-chat-pulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(37,99,235,0.35), 0 0 0 0 rgba(37,99,235,0.35); }
  50%      { box-shadow: 0 10px 28px rgba(37,99,235,0.35), 0 0 0 10px rgba(37,99,235,0); }
}
.chat-bubble.is-pulsing { animation: stk-chat-pulse 2.6s ease-in-out infinite; }
.chat-bubble.is-pulsing:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .chat-bubble.is-pulsing { animation: none; }
}

/* ─── SHARED MODAL SHELL (used by #modal and #exit-modal) ── */
.stk-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(15,23,42,0.55);
  align-items: center; justify-content: center;
  padding: 1rem; box-sizing: border-box;
}
.stk-modal-overlay.is-open { display: flex; }
.stk-modal-card {
  background: var(--bg-base); border-radius: 14px; padding: 2.25rem;
  max-width: 440px; width: 100%; position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}
.stk-modal-close {
  position: absolute; top: 1rem; right: 1rem; background: none; border: none;
  font-size: 1.5rem; cursor: pointer; color: var(--text-muted); line-height: 1;
  width: 32px; height: 32px;
}
.stk-modal-title { font-family: Georgia, serif; font-size: 1.5rem; margin: 0.75rem 0 0.4rem; color: var(--text-primary); }
.stk-modal-lead { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.5rem; }
.stk-modal-fine { text-align: center; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.75rem; }
.stk-modal-dismiss {
  display: block; text-align: center; font-size: 0.8rem; color: var(--text-muted);
  margin-top: 0.9rem; text-decoration: underline; background: none; border: none;
  cursor: pointer; width: 100%;
}

/* Exit-intent specific framing — urgency without being lurid */
#exit-modal .stk-modal-card { border-top: 4px solid var(--amber); }
.exit-modal-eyebrow {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 0.3rem;
}

/* ─── COOKIE CONSENT ─────────────────────────────────────
   Bottom-left corner card — deliberately the opposite corner from the
   chat bubble (bottom-right), so the two floating elements never need to
   dodge each other regardless of which is open. */
.stk-cookie-bar {
  display: none;
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 800;
  max-width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 16px 40px rgba(15,23,42,0.18);
}
.stk-cookie-bar.is-open { display: block; }
.stk-cookie-text { font-size: 0.825rem; line-height: 1.55; color: var(--text-secondary); margin-bottom: 0.9rem; }
.stk-cookie-text a { color: var(--forest); text-decoration: underline; }
.stk-cookie-actions { display: flex; gap: 0.6rem; }
.stk-cookie-btn {
  flex: 1;
  padding: 0.55rem 0.9rem;
  border-radius: 7px;
  font-size: 0.825rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
}
/* Equal visual weight on purpose: withdrawing consent has to be exactly
   as easy as giving it, not a pre-selected default vs. a grey afterthought. */
.stk-cookie-accept { background: var(--forest); color: #fff; }
.stk-cookie-accept:hover { background: var(--forest-dim); }
.stk-cookie-reject { background: transparent; color: var(--text-secondary); border-color: var(--border-color); }
.stk-cookie-reject:hover { border-color: var(--text-secondary); color: var(--text-primary); }

.stk-cookie-reopen {
  display: none;
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 800;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15,23,42,0.12);
}
.stk-cookie-reopen.is-visible { display: block; }
.stk-cookie-reopen:hover { color: var(--forest); border-color: var(--forest); }

@media (max-width: 640px) {
  /* Both need to clear the mobile-float call/book bar sitting at bottom:0
     (~70px tall) — not just the banner, the reopen tab too, or it would
     sit underneath those buttons and become unreachable. */
  .stk-cookie-bar {
    left: 12px; right: 12px; bottom: 82px;
    max-width: none;
  }
  .stk-cookie-reopen { left: 12px; bottom: 82px; }
}