/* InstantSite — local-business template (v2: modern)
   Aesthetic: trustworthy and traditional, but contemporary.
   Override the four CSS variables below to re-skin per client. */

:root {
  --primary-color: #475569;   /* rich navy — classic, trustworthy */
  --accent-color:  #f97316;   /* vibrant orange — warmth/action for HVAC */
  --heading-font: "Roboto Slab", Georgia, serif;
  --body-font:    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Derived tokens — auto-update from --primary-color / --accent-color
     via color-mix(), so swapping the two source variables retints the
     entire palette without any other rules needing to change. */
  --primary-700: color-mix(in oklab, var(--primary-color), black 15%);  /* hover/avatar depth */
  --primary-100: color-mix(in oklab, var(--primary-color), white 88%);  /* light tint */
  --primary-50:  color-mix(in oklab, var(--primary-color), white 95%);  /* near-white tint */
  --accent-50:   color-mix(in oklab, var(--accent-color),  white 92%);
  --accent-600:  color-mix(in oklab, var(--accent-color),  black 15%);
  --ink:         color-mix(in oklab, var(--primary-color), black 10%);  /* headings / dark UI */
  --ink-deep:    color-mix(in oklab, var(--primary-color), black 30%);  /* deepest surface */
  --text:        #1f2937;
  --muted:       #64748b;
  --line:        #e5e7eb;
  --bg:          #ffffff;
  --bg-soft:     #f5f7fb;     /* gentle off-white, slight navy tint */
  --bg-tinted:   #eff6ff;
  --gold:        #facc15;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 12px 32px -12px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 30px 60px -20px rgba(15, 23, 42, 0.28);

  --container: 1180px;
  --banner-h: 64px;     /* desktop — overridden to 96px on narrow viewports */
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body-font);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--primary-color); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-600); }
p { margin: 0 0 1em; }

h1, h2, h3, h4 {
  font-family: var(--heading-font);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .4em;
  font-weight: 600;
}
h1 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.02em; }
h3 { font-size: 1.2rem; font-weight: 600; }
.eyebrow {
  display: inline-block;
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: 1rem;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- InstantSite preview banner ----------
   Sticky bar at the top of every demo page. Text on the left, CTA pill on
   the right. On narrow viewports the layout stacks (text on top, CTA on
   bottom) and --banner-h is bumped from 64px to 96px so the .site-header's
   `top: var(--banner-h)` offset stays in sync automatically. */
.is-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(90deg, var(--ink-deep) 0%, var(--primary-color) 100%);
  color: #f8fafc;
  font-size: 0.92rem;
  padding: 8px 20px;
  text-align: center;
  letter-spacing: 0.005em;
  line-height: 1.3;
}
.is-banner-text { flex: 0 1 auto; }
.is-banner-text strong { font-weight: 600; color: #fff; }
.is-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-color);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 48px;     /* tap target floor */
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.is-banner-cta:hover {
  background: var(--accent-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.is-banner-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (max-width: 720px) {
  :root { --banner-h: 96px; }
  .is-banner {
    flex-direction: column;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .is-banner-cta {
    padding: 10px 16px;
    font-size: 0.85rem;
    min-height: 44px;
  }
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: var(--banner-h);
  z-index: 90;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: .9rem;
  padding-bottom: .9rem;
  gap: 1rem;
}
/* Brand block + Call CTA pill are hidden on every viewport — the header is
   just the three nav links, centered. */
.site-header .brand { display: none; }
.nav .nav-cta { display: none; }
.nav { justify-content: center; }
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-name {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.brand-phone {
  font-family: var(--body-font);
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
}
.nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.nav a {
  color: var(--text);
  font-weight: 500;
  font-size: 0.97rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  transition: background .15s ease, color .15s ease;
}
.nav a:hover { background: var(--bg-soft); color: var(--ink); }
.nav a.active { background: var(--primary-100); color: var(--ink); }
.nav .nav-cta {
  background: var(--ink);
  color: #ffffff;
  padding: 0.6rem 1.1rem;
  margin-left: 0.4rem;
}
.nav .nav-cta:hover { background: var(--accent-color); color: #ffffff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-family: var(--body-font);
  font-size: 0.98rem;
  cursor: pointer;
  border: none;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  text-align: center;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent-color);
  color: #ffffff;
  box-shadow: 0 8px 20px -8px rgba(249, 115, 22, 0.6);
}
.btn-primary:hover { background: var(--accent-600); color: #ffffff; }
.btn-dark {
  background: var(--ink);
  color: #ffffff;
}
.btn-dark:hover { background: var(--primary-700); color: #ffffff; }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn-on-dark {
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(6px);
}
.btn-on-dark:hover { background: rgba(255,255,255,0.22); color: #ffffff; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(900px 600px at 80% -20%, rgba(249,115,22,0.22), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(180deg, var(--ink-deep) 0%, var(--ink) 55%, var(--primary-color) 100%);
  color: #f8fafc;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
}
/* Optional background photo layer for the hero. Sits between the dark
   gradient (on .hero itself) and the dotted overlay (.hero::after), tinted
   down so the white text on top stays legible across any image. */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.32;
  z-index: 0;
  filter: saturate(0.85);
}
.hero-bg::after {
  /* Extra dark gradient on top of the photo for headline legibility. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);
}
.hero .container { position: relative; z-index: 1; }
.hero .eyebrow {
  color: #fdba74;
  background: rgba(249, 115, 22, 0.14);
  padding: .35rem .8rem;
  border-radius: var(--radius-pill);
}
.hero h1 {
  color: #ffffff;
  max-width: 22ch;
}
.hero .lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(248, 250, 252, 0.78);
  max-width: 58ch;
  margin: 1rem 0 2rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-stat .num {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: #ffffff;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1;
}
.hero-stat .num .star { color: var(--gold); }
.hero-stat .label {
  margin-top: .35rem;
  color: rgba(248, 250, 252, 0.6);
  font-size: 0.85rem;
}

/* ---------- Sections ---------- */
section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
section.alt { background: var(--bg-soft); }
.section-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.05rem; }

/* ---------- Trust badges row ---------- */
.trust-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 0.95rem;
  color: var(--text);
}
.trust-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent-50);
  color: var(--accent-600);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.trust-item strong { display: block; color: var(--ink); font-weight: 600; }
.trust-item span { color: var(--muted); font-size: 0.85rem; }

/* ---------- Services grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.service-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.service-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-soft);
}
.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.service-card:hover .service-image img { transform: scale(1.04); }
.service-body { padding: 1.5rem 1.75rem 1.75rem; }
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
  opacity: 0;
  transition: opacity .2s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(15,23,42,0.12);
}
.service-card:hover::before { opacity: 1; }
.service-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--accent-50);
  color: var(--accent-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.service-icon svg { width: 24px; height: 24px; }
.service-card h3 { margin: 0 0 .4rem; color: var(--ink); }
.service-card p { margin: 0; color: var(--muted); font-size: 0.97rem; }

/* ---------- Testimonials ---------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}
.testimonial {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
}
.testimonial .stars {
  display: flex;
  gap: 2px;
  color: var(--gold);
  margin-bottom: .9rem;
}
.testimonial blockquote {
  margin: 0 0 1.25rem;
  font-size: 1.02rem;
  color: var(--text);
  flex: 1;
}
.testimonial .author {
  display: flex; align-items: center; gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-700));
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.author-meta { line-height: 1.25; }
.author-meta .name { color: var(--ink); font-weight: 600; font-size: 0.97rem; }
.author-meta .date { color: var(--muted); font-size: 0.82rem; }

.review-summary {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .5rem 1rem;
  font-size: 0.95rem;
  color: var(--muted);
  box-shadow: var(--shadow-xs);
}
.review-summary strong { color: var(--ink); font-weight: 600; }
.review-summary .stars { color: var(--gold); display: inline-flex; gap: 1px; }

/* ---------- About strip ---------- */
.about {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.about p { font-size: 1.1rem; color: var(--text); }

/* Side-by-side about block (used on the home page when about_image is set). */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about-grid .about-text p { font-size: 1.1rem; color: var(--text); }
.about-grid .about-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--bg-soft);
  max-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* No forced aspect ratio — the image renders at its natural proportions,
   so portrait sources aren't aggressively cropped and zoomed. The wrapper
   caps overall height so a very tall photo can't dominate the section. */
.about-grid .about-media img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------- Contact CTA strip ---------- */
.cta-strip {
  background:
    radial-gradient(700px 400px at 90% -20%, rgba(249,115,22,0.28), transparent 60%),
    linear-gradient(180deg, var(--primary-color) 0%, var(--ink-deep) 100%);
  color: #ffffff;
  padding: clamp(3rem, 6vw, 5rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip h2 { color: #ffffff; max-width: 22ch; margin-inline: auto; }
.cta-strip p { color: rgba(248, 250, 252, 0.75); margin: 0 auto 1.75rem; max-width: 52ch; }
.cta-strip .hero-actions { justify-content: center; }

/* ---------- Contact form layout ---------- */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: start;
}
.contact-info h2 { margin-top: 0; }
.contact-info .lede { color: var(--muted); font-size: 1.05rem; margin-bottom: 2rem; }
.info-list { display: grid; gap: 1.25rem; }
.info-row {
  display: flex; gap: .9rem; align-items: flex-start;
}
.info-row .trust-icon { width: 40px; height: 40px; }
.info-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
}
.info-value { color: var(--ink); font-size: 1.02rem; font-weight: 500; }
.info-value a { color: var(--ink); }
.info-value a:hover { color: var(--accent-600); }

.contact-form {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}
.contact-form h3 { margin: 0 0 .25rem; color: var(--ink); font-size: 1.4rem; }
.contact-form .form-sub { color: var(--muted); margin-bottom: 1.5rem; font-size: 0.95rem; }
.form-row { margin-bottom: 1.1rem; }
.form-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ink);
  font-size: 0.9rem;
}
.form-row input,
.form-row textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--body-font);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15);
}
.form-row textarea { min-height: 140px; resize: vertical; }
.contact-form .btn-primary { width: 100%; padding: 1rem 1.4rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink-deep);
  color: rgba(226, 232, 240, 0.78);
  padding: clamp(3rem, 5vw, 4rem) 0 1.5rem;
  font-size: 0.95rem;
}
.site-footer a { color: rgba(248, 250, 252, 0.9); }
.site-footer a:hover { color: #fdba74; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.footer-brand .brand-name { color: #ffffff; font-size: 1.3rem; }
.footer-brand p { margin-top: .75rem; color: rgba(248, 250, 252, 0.65); max-width: 32ch; }
.site-footer h4 {
  color: #ffffff;
  font-family: var(--body-font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: rgba(248, 250, 252, 0.45);
}
.built-by-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-pill);
  padding: .35rem .85rem;
  color: rgba(248, 250, 252, 0.85);
}
.built-by-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-color);
}

/* ---------- Service detail rows (services page) ---------- */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.service-detail:last-child { border-bottom: none; }
.service-detail h3 { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-grid .about-media { max-width: 520px; margin: 0 auto; max-height: 360px; }
  .about-grid .about-media img { max-height: 360px; }
}
@media (max-width: 720px) {
  /* Header just tightens padding on phones — brand/CTA hidden globally. */
  .site-header .container {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    gap: 0.5rem;
  }
  .nav a { font-size: 0.95rem; padding: 0.45rem 0.9rem; white-space: nowrap; }

  /* Hero — smaller padding + lighter typography so it doesn't fill the screen. */
  .hero { padding-top: clamp(2.25rem, 7vw, 3rem); padding-bottom: clamp(2rem, 6vw, 2.75rem); }
  .hero h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); max-width: none; }
  .hero .lede { font-size: 1rem; margin: 0.85rem 0 1.4rem; }

  /* Hero buttons stack/share width nicely on narrow screens. */
  .hero-actions { gap: 0.55rem; }
  .hero-actions .btn { flex: 1 1 auto; padding: 0.75rem 1rem; font-size: 0.95rem; }

  /* Stats: more compact. */
  .hero-stats { margin-top: 2rem; padding-top: 1.25rem; gap: 0.9rem; }
  .hero-stat .num { font-size: 1.15rem; }
  .hero-stat .label { font-size: 0.82rem; }

  /* Section padding overall scales down on small screens. */
  section { padding: clamp(2.5rem, 8vw, 3.5rem) 0; }

  /* About image on phones: force a centered square. Source images are tall
     portrait shots of techs at work — square crop keeps the technician
     visible in frame without the photo dominating the page. */
  .about-grid .about-media {
    aspect-ratio: 1 / 1;
    max-width: 360px;
    max-height: none;
    margin: 0 auto;
  }
  .about-grid .about-media img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
  }

  /* Service cards: tighter image and body padding. */
  .service-body { padding: 1.1rem 1.25rem 1.4rem; }

  /* Footer + service detail single-column. */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-legal { flex-direction: column; }
  .service-detail { grid-template-columns: 1fr; gap: 0.75rem; }
}