/* =========================================================================
   St. Pete Appliance Repair Pros — Design System
   Palette: deep marine-navy ink (#152a3d — "Gulf water at dusk") + coral-
   sunset accent (#f07050) — grounded in something concrete: St. Petersburg
   is nationally known as "The Sunshine City" for its famously vivid Gulf
   Coast sunsets, so the accent color is drawn from that real, checkable
   local identity. Eleventh distinct hue family in this network — cooler
   and more marine than Santa Ana's slate-blue, and nothing like Stockton's
   warm umber+amber.

   Type: Sora (headline — geometric sans, airy/coastal register) + Mulish
   (body). A pairing not used anywhere else in this network.

   Layout motif — genuinely new, not just recolored:
   - Hero is CENTERED/STACKED (`.hero--stacked`): headline centered at top,
     full-width real photo banner below, floating trust-badge strip
     overlapping the photo's bottom edge. Neither Santa Ana's split hero
     nor Stockton's reversed split.
   - Signature new component: `.home-type-grid` / `.home-type-tile` — four
     housing-type selector tiles (Condo & High-Rise, Waterfront Home,
     Older/Historic Home, Apartment & Rental), organized by HOME TYPE, not
     symptom (Santa Ana) or appliance heat-risk (Stockton).
   - Cards have rounded TOP corners only (20px) with a flat bottom and a
     small circular accent-color dot overlapping the media's top-left
     corner — distinct from both sibling sites' card treatments.
   ========================================================================= */

:root {
  --ink: #152a3d;
  --ink-soft: #2c4a5e;
  --marine: #5b7a8c;
  --marine-light: #c7d7de;
  --accent: #f07050;
  --accent-dark: #d85333;
  --accent-light: #ffe0d3;
  --paper: #ffffff;
  --white: #ffffff;
  --bg: #f5f9fa;
  --bg-alt: #e8f1f0;
  --sea-text: #3f5665;
  --border: #dbe6e8;

  --font-head: "Sora", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 20px 40px -20px rgba(21, 42, 61, 0.30);
  --shadow-sm: 0 8px 20px -12px rgba(21, 42, 61, 0.20);
  --container: 1180px;
}

/* ---------------------------------------------------------------------- */
/* Reset / base                                                           */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { width: 1em; height: 1em; vertical-align: -0.15em; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 14px;
}
h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
h3 { font-size: clamp(1.05rem, 1.8vw, 1.2rem); font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 16px; color: var(--sea-text); }
.muted { color: var(--sea-text); opacity: 0.85; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section { padding: 60px 0; }
.text-center { text-align: center; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--white);
  padding: 12px 18px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.96rem;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap; min-height: 48px;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--call {
  background: var(--accent); color: var(--white); border-color: var(--accent);
  box-shadow: 0 10px 22px -10px rgba(216, 83, 51, 0.55);
}
.btn--call:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-1px); }
.btn--outline {
  background: transparent; color: var(--ink); border-color: var(--border);
}
.btn--outline:hover { background: var(--paper); border-color: var(--ink); }
.btn--lg { padding: 17px 32px; font-size: 1.04rem; min-height: 54px; }
.btn--xl { padding: 20px 38px; font-size: 1.15rem; min-height: 60px; }
.btn--sm { padding: 9px 16px; font-size: 0.82rem; min-height: 38px; }
.btn--block { width: 100%; white-space: normal; line-height: 1.3; text-align: center; }

/* Attention pulse on always-visible call CTAs */
@keyframes callPulseGlow {
  0%   { box-shadow: 0 10px 22px -10px rgba(216, 83, 51, 0.55), 0 0 0 0 rgba(240, 112, 80, 0.5); }
  70%  { box-shadow: 0 10px 22px -10px rgba(216, 83, 51, 0.55), 0 0 0 12px rgba(240, 112, 80, 0); }
  100% { box-shadow: 0 10px 22px -10px rgba(216, 83, 51, 0.55), 0 0 0 0 rgba(240, 112, 80, 0); }
}
@keyframes callPulseGlowFlat {
  0%   { box-shadow: 0 0 0 0 rgba(240, 112, 80, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(240, 112, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 112, 80, 0); }
}
.site-header__cta { animation: callPulseGlow 2.4s ease-out infinite; }
.sticky-mobile-bar__call { animation: callPulseGlowFlat 2.4s ease-out infinite; }
.site-header__cta:hover, .sticky-mobile-bar__call:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .site-header__cta, .sticky-mobile-bar__call { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 60; }
.site-header__main { padding: 14px 24px; display: flex; align-items: center; gap: 28px; }
.site-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; color: var(--ink); margin-right: auto; }
.site-nav ul { display: flex; align-items: center; gap: 26px; }
.site-nav > ul > li > a { font-weight: 600; font-size: 0.95rem; color: var(--ink); padding: 8px 2px; display: inline-block; }
.site-nav > ul > li.active > a, .site-nav > ul > li > a:hover { color: var(--accent-dark); }
.site-header__cta.btn--call { flex-shrink: 0; }
@media (max-width: 980px) {
  .site-nav { display: none; }
  .site-header__cta span.cta-label-full { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Sticky mobile call bar                                                  */
/* ---------------------------------------------------------------------- */
.sticky-mobile-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; }
.sticky-mobile-bar__call {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent); color: var(--white); font-family: var(--font-head);
  font-weight: 600; font-size: 1rem; padding: 16px 12px; width: 100%;
}
.sticky-mobile-bar__call svg { width: 19px; height: 19px; }
@media (max-width: 780px) {
  .sticky-mobile-bar { display: block; }
  body { padding-bottom: 60px; }
}

/* ---------------------------------------------------------------------- */
/* Hero — centered/stacked with a full-width photo banner and a floating  */
/* trust-badge strip overlapping its bottom edge                          */
/* ---------------------------------------------------------------------- */
.hero--stacked { background: var(--paper); padding: 52px 0 0; margin-bottom: 64px; }
.hero__top { max-width: 720px; margin: 0 auto; text-align: center; padding-bottom: 40px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; color: var(--accent-dark);
  font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.03em;
  text-transform: uppercase; margin-bottom: 14px;
}
.hero__eyebrow svg { width: 16px; height: 16px; }
.hero__sub { font-size: 1.04rem; max-width: 560px; margin-left: auto; margin-right: auto; }
.hero__ctas { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 20px 0 16px; }
.hero__trust-line { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.87rem; color: var(--sea-text); font-weight: 500; margin-bottom: 0; }
.hero__stars { display: inline-flex; gap: 2px; }
.hero__stars svg, .testimonial-card__stars svg { width: 15px; height: 15px; color: var(--accent); }
.star--dim svg { color: var(--border); }
.hero__banner { position: relative; }
.hero__banner img { width: 100%; aspect-ratio: 21/8; object-fit: cover; display: block; }
.hero__badge-strip { position: absolute; left: 0; right: 0; bottom: -30px; }
.hero__badge-strip__inner {
  background: var(--paper); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap;
  padding: 16px 26px;
}
.hero__badge-strip__inner span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; color: var(--ink); }
.hero__badge-strip__inner svg { width: 17px; height: 17px; color: var(--accent-dark); }
@media (max-width: 700px) { .hero__banner img { aspect-ratio: 4/3.4; } .hero__badge-strip__inner { flex-direction: column; gap: 10px; padding: 16px 20px; } .hero--stacked { margin-bottom: 96px; } }

/* ---------------------------------------------------------------------- */
/* Home-type selector — signature new component                          */
/* ---------------------------------------------------------------------- */
.home-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.home-type-tile {
  display: flex; flex-direction: column; gap: 10px; background: var(--paper);
  border-radius: var(--radius-sm); padding: 26px 22px; box-shadow: var(--shadow-sm);
  transition: transform .15s ease;
}
.home-type-tile:hover { transform: translateY(-3px); }
.home-type-tile__icon {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--accent-light); color: var(--accent-dark);
}
.home-type-tile__icon svg { width: 22px; height: 22px; }
.home-type-tile__label { font-family: var(--font-head); font-weight: 700; font-size: 1.03rem; color: var(--ink); }
.home-type-tile__blurb { font-size: 0.87rem; color: var(--sea-text); flex: 1; margin: 0; }
.home-type-tile__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: 0.8rem; color: var(--accent-dark); }
.home-type-tile__link svg { width: 13px; height: 13px; }
@media (max-width: 900px) { .home-type-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .home-type-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Trust stat row                                                          */
/* ---------------------------------------------------------------------- */
.trust-stat-row { background: var(--ink); }
.trust-stat-row__grid { display: flex; justify-content: center; flex-wrap: wrap; }
.trust-stat-row__item { text-align: center; padding: 22px 28px; border-right: 1px solid rgba(255,255,255,0.12); }
.trust-stat-row__item:last-child { border-right: none; }
.trust-stat-row__num { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--accent-light); }
.trust-stat-row__label { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.72); margin-top: 2px; }
@media (max-width: 700px) { .trust-stat-row__item { padding: 18px 16px; } }

/* ---------------------------------------------------------------------- */
/* Mini CTA strip                                                          */
/* ---------------------------------------------------------------------- */
.mini-cta-strip { background: var(--accent-light); }
.mini-cta-strip__inner {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 24px; color: var(--ink);
}
.mini-cta-strip__inner span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; }
.mini-cta-strip__inner svg { width: 16px; height: 16px; color: var(--accent-dark); }

/* ---------------------------------------------------------------------- */
/* Section heads                                                          */
/* ---------------------------------------------------------------------- */
.section-head { max-width: 660px; margin: 0 auto 40px; text-align: center; }
.section-head--left { max-width: none; margin: 0 0 26px; text-align: left; }
.eyebrow { display: inline-block; color: var(--accent-dark); font-family: var(--font-head); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; }

/* ---------------------------------------------------------------------- */
/* Feature list — why-choose-us checklist style                          */
/* ---------------------------------------------------------------------- */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 32px; }
.feature-list__item { display: flex; gap: 14px; align-items: flex-start; }
.feature-list__icon {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--accent-light); color: var(--accent-dark); flex-shrink: 0;
}
.feature-list__icon svg { width: 20px; height: 20px; }
.feature-list__item h3 { margin-bottom: 4px; font-size: 1.02rem; }
.feature-list__item p { margin: 0; font-size: 0.9rem; }
@media (max-width: 700px) { .feature-list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Tile cards — rounded TOP corners only, flat bottom, corner accent dot  */
/* ---------------------------------------------------------------------- */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tile-card {
  background: var(--paper); border-radius: var(--radius) var(--radius) 4px 4px; overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.tile-card__media { aspect-ratio: 16/11; overflow: hidden; background: var(--bg-alt); position: relative; }
.tile-card__media::before {
  content: ""; position: absolute; top: 10px; left: 10px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--paper); z-index: 2;
}
.tile-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tile-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.tile-card__body h3 { margin-bottom: 6px; font-size: 1.04rem; }
.tile-card__body h3 a { color: var(--ink); }
.tile-card__body h3 a:hover { color: var(--accent-dark); }
.tile-card__body p { font-size: 0.89rem; margin-bottom: 14px; flex: 1; }
.tile-card__link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-dark); font-weight: 700; font-family: var(--font-head); font-size: 0.83rem; margin-top: auto; }
.tile-card__link svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .tile-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tile-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Sub-service grid (service pages)                                       */
/* ---------------------------------------------------------------------- */
.sub-service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sub-service-card { background: var(--bg-alt); border-radius: var(--radius-sm) var(--radius-sm) 4px 4px; padding: 18px 20px; }
.sub-service-card h3 { font-size: 0.98rem; margin-bottom: 4px; }
.sub-service-card p { font-size: 0.87rem; margin: 0; }
@media (max-width: 620px) { .sub-service-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Insight callout + scenario card (service pages)                       */
/* ---------------------------------------------------------------------- */
.insight-callout { display: flex; gap: 16px; background: var(--ink); border-radius: var(--radius) var(--radius) 4px 4px; padding: 26px 28px; color: var(--white); }
.insight-callout__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(240,112,80,0.25); color: var(--accent-light); flex-shrink: 0; }
.insight-callout__icon svg { width: 20px; height: 20px; }
.insight-callout h3 { color: var(--white); margin-bottom: 6px; font-size: 1rem; }
.insight-callout p { color: rgba(255,255,255,0.8); margin: 0; font-size: 0.92rem; }
@media (max-width: 600px) { .insight-callout { flex-direction: column; } }

.scenario-card { background: var(--accent-light); border-radius: var(--radius) var(--radius) 4px 4px; padding: 26px 28px; }
.scenario-card h3 { margin: 4px 0 8px; }
.scenario-card p { margin: 0; color: var(--ink-soft); }

/* ---------------------------------------------------------------------- */
/* Process list                                                            */
/* ---------------------------------------------------------------------- */
.process-list { counter-reset: step; padding: 0; }
.process-list li { list-style: none; display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.process-list li:last-child { border-bottom: none; }
.process-list li::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--accent-light);
  font-family: var(--font-head); font-weight: 700; font-size: 0.92rem;
}
.process-list h3 { margin: 0 0 4px; font-size: 0.98rem; }
.process-list p { margin: 0; font-size: 0.88rem; }

/* ---------------------------------------------------------------------- */
/* Pricing table                                                          */
/* ---------------------------------------------------------------------- */
table.price-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.9rem; }
table.price-table th, table.price-table td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--border); }
table.price-table th { font-family: var(--font-head); letter-spacing: 0.01em; color: var(--ink); font-weight: 700; background: var(--bg-alt); }
table.price-table td.price { font-weight: 700; color: var(--accent-dark); white-space: nowrap; }
.price-note { font-size: 0.84rem; color: var(--sea-text); margin-top: 8px; }

/* ---------------------------------------------------------------------- */
/* What's included checklist (service/area pages)                        */
/* ---------------------------------------------------------------------- */
.whats-included { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.whats-included li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; }
.whats-included svg { width: 17px; height: 17px; color: var(--accent-dark); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 620px) { .whats-included { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Testimonials                                                            */
/* ---------------------------------------------------------------------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testimonial-card {
  background: var(--paper); border-radius: var(--radius) var(--radius) 4px 4px;
  padding: 24px 22px; box-shadow: var(--shadow-sm); position: relative; margin: 0;
}
.testimonial-card__quote-mark { color: var(--accent-light); margin-bottom: 8px; }
.testimonial-card__quote-mark svg { width: 28px; height: 28px; }
.testimonial-card__stars { margin-bottom: 10px; }
.testimonial-card blockquote { margin: 0 0 16px; font-size: 0.94rem; color: var(--ink); }
.testimonial-card figcaption { display: flex; align-items: center; gap: 12px; font-size: 0.87rem; }
.testimonial-card__avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--ink); color: var(--accent-light); font-family: var(--font-head);
  font-weight: 700; font-size: 0.78rem; flex-shrink: 0;
}
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* CTA band                                                                */
/* ---------------------------------------------------------------------- */
.cta-band { background: var(--ink); color: var(--white); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-light); font-family: var(--font-head); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.cta-band__eyebrow svg { width: 15px; height: 15px; }
.cta-band h2 { color: var(--white); margin-bottom: 8px; }
.cta-band p { color: rgba(255,255,255,0.75); margin: 0; max-width: 480px; }
.cta-band .btn--call { flex-shrink: 0; }
@media (max-width: 700px) { .cta-band__inner { flex-direction: column; align-items: flex-start; } .cta-band .btn--call { width: 100%; justify-content: center; } }

/* ---------------------------------------------------------------------- */
/* Breadcrumbs / page hero                                                */
/* ---------------------------------------------------------------------- */
.page-hero { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 38px 0 42px; }
.page-hero h1 { color: var(--ink); margin-bottom: 8px; }
.page-hero__sub { color: var(--sea-text); margin: 0; max-width: 640px; }
.breadcrumbs { margin-bottom: 16px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.85rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--sea-text); opacity: 0.6; }
.breadcrumbs a { color: var(--sea-text); }
.breadcrumbs a:hover { color: var(--accent-dark); }
.breadcrumbs li[aria-current] { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------------- */
/* Service/area detail layout                                            */
/* ---------------------------------------------------------------------- */
.content-grid { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; padding-top: 44px; }
.content-grid__main > *:not(:last-child) { margin-bottom: 38px; }
.sidebar { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 18px; }
.sidebar-panel { background: var(--paper); border-radius: var(--radius) var(--radius) 4px 4px; padding: 22px; box-shadow: var(--shadow-sm); }
.sidebar-panel h3 { margin-bottom: 12px; }
.sidebar-panel__trust { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--sea-text); margin-top: 12px; }
.sidebar-panel__trust svg { width: 17px; height: 17px; color: var(--accent-dark); flex-shrink: 0; }
.sidebar-panel__divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.sidebar-panel__list a { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--ink); font-weight: 600; font-size: 0.9rem; }
.sidebar-panel__list a:last-child { border-bottom: none; }
.sidebar-panel__list a:hover { color: var(--accent-dark); }
.media-hero { border-radius: var(--radius) var(--radius) 4px 4px; overflow: hidden; box-shadow: var(--shadow); }
.media-hero__inner img, .media-hero > div img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
@media (max-width: 980px) { .content-grid { grid-template-columns: 1fr; } .sidebar { position: static; } }

.map-card { border-radius: var(--radius) var(--radius) 4px 4px; overflow: hidden; box-shadow: var(--shadow); background: var(--paper); }
.map-card__frame { width: 100%; aspect-ratio: 16/9; }
.map-card__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------------------- */
/* FAQ accordion                                                          */
/* ---------------------------------------------------------------------- */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; padding: 17px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq-item summary h3, .faq-item summary h4 { margin: 0; font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.35rem; color: var(--accent-dark); font-weight: 400; flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item__body { padding: 0 0 17px; }
.faq-item__body p { margin: 0; }

/* ---------------------------------------------------------------------- */
/* About page                                                             */
/* ---------------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: 44px; align-items: center; }
.about-grid__media { border-radius: var(--radius) var(--radius) 4px 4px; overflow: hidden; box-shadow: var(--shadow); }
.about-grid__media img { display: block; width: 100%; aspect-ratio: 4/4.4; object-fit: cover; }
.bullet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.bullet-grid li { display: flex; gap: 10px; align-items: flex-start; }
.bullet-grid li svg { width: 18px; height: 18px; color: var(--accent-dark); flex-shrink: 0; margin-top: 3px; }
@media (max-width: 900px) { .about-grid, .bullet-grid { grid-template-columns: 1fr; } }

.photo-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 34px; }
.photo-strip img { border-radius: var(--radius-sm) var(--radius-sm) 4px 4px; aspect-ratio: 1; object-fit: cover; width: 100%; display: block; }
@media (max-width: 900px) { .photo-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .photo-strip { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------------- */
/* Contact page                                                           */
/* ---------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 36px; align-items: start; padding-top: 44px; }
.contact-info-card { background: var(--paper); border-radius: var(--radius) var(--radius) 4px 4px; padding: 26px; box-shadow: var(--shadow-sm); }
.contact-info-card__row { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--border); }
.contact-info-card__row:last-child { border-bottom: none; }
.contact-info-card__row svg { width: 21px; height: 21px; color: var(--accent-dark); flex-shrink: 0; margin-top: 2px; }
.contact-info-card a { color: var(--accent-dark); font-weight: 700; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Terms page                                                             */
/* ---------------------------------------------------------------------- */
.legal-content { max-width: 820px; margin: 0 auto; }
.legal-content h2 { margin-top: 34px; }
.legal-content p, .legal-content li { font-size: 0.94rem; }
.legal-content ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.legal-content ul li { margin-bottom: 6px; color: var(--sea-text); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.82); padding: 56px 0 0; }
.site-footer h3 { color: var(--accent-light); font-family: var(--font-body); font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 15px; font-weight: 700; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.site-footer__about p { color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.site-footer .site-logo { color: var(--white); margin-bottom: 14px; }
.site-footer__nap a { color: rgba(255,255,255,0.85); }
.site-footer ul li { margin-bottom: 9px; }
.site-footer ul li a { font-size: 0.88rem; color: rgba(255,255,255,0.72); }
.site-footer ul li a:hover { color: var(--white); }
.site-footer__bottom {
  margin-top: 38px; padding: 20px 24px 20px;
  border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.81rem;
}
.site-footer__bottom a { color: rgba(255,255,255,0.72); }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Responsive section padding                                             */
/* ---------------------------------------------------------------------- */
@media (max-width: 700px) {
  section { padding: 44px 0; }
  .btn--xl { padding: 16px 24px; font-size: 1rem; min-height: 52px; }
  .btn--lg { padding: 14px 20px; font-size: 0.96rem; }
}