/* ==========================================================================
   Sadguru Broadnet Services: site styles
   Plain CSS, mobile-first. Sections follow the order of index.html.

   Design notes
   - One typeface: Anek Latin (Ek Type, Mumbai). Headlines use its wide,
     heavy end; body text sits at normal width.
   - Brand colours come straight from the logo: orange disc + charcoal.
   - Circles echo the logo disc (icons, timeline nodes); panels stay square-ish.
   - The only ambient motion is the hero strands drawing once on load.
   ========================================================================== */

/* ---------- 0. Fallback fonts sized to match Anek Latin ----------
   Until the web font arrives, text renders in local Arial (or its metric twins
   Arimo / Liberation Sans) scaled to take up the same space as Anek, so the page
   doesn't jump when the font swaps in. Values measured against Anek Latin.
   Wide headings get their own family because a fallback can't stretch. */
@font-face {
  font-family: "Anek Fallback";
  src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans");
  font-weight: 300 500;
  size-adjust: 93%; ascent-override: 96.8%; descent-override: 21.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "Anek Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Liberation Sans Bold");
  font-weight: 501 900;
  size-adjust: 90%; ascent-override: 100%; descent-override: 22.2%; line-gap-override: 0%;
}
@font-face { /* 700 at 108–110% width: card and list titles */
  font-family: "Anek Wide Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Liberation Sans Bold");
  font-weight: 600 720;
  size-adjust: 100.7%; ascent-override: 89.4%; descent-override: 19.9%; line-gap-override: 0%;
}
@font-face { /* 750 at 112% width: section headings, figures */
  font-family: "Anek Wide Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Liberation Sans Bold");
  font-weight: 721 770;
  size-adjust: 104.5%; ascent-override: 86.1%; descent-override: 19.1%; line-gap-override: 0%;
}
@font-face { /* 800 at 118% width: hero headline */
  font-family: "Anek Wide Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Liberation Sans Bold");
  font-weight: 771 900;
  size-adjust: 111%; ascent-override: 81.1%; descent-override: 18%; line-gap-override: 0%;
}

/* ---------- 1. Design tokens ---------- */
:root {
  --orange: #FF4A00;         /* logo orange: disc, strands, icons, large accents */
  --orange-deep: #D93E00;    /* button background: white text passes WCAG AA */
  --orange-ink: #C23800;     /* small orange text on light backgrounds */
  --orange-wash: #FFF0E8;    /* soft orange tint */
  --ink: #1E1E1E;            /* logo charcoal */
  --ink-soft: #555150;       /* secondary text */
  --line: #E6E0DB;           /* hairlines */
  --line-strong: #CFC6BF;    /* input borders */
  --paper: #FFFFFF;
  --paper-alt: #F7F5F3;      /* alternate section bands */
  --wa: #1DA851;             /* WhatsApp green (icon contrast safe on white) */

  --radius: 6px;
  --header-h: 72px;
  --container: 1180px;

  --font: "Anek Latin", "Anek Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-wide: "Anek Latin", "Anek Wide Fallback", "Anek Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Type scale (classic 12 / 14 / 17 / 21 / 24 / 36 / 48 / 72 progression) */
  --fs-sm: .875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-h3: 1.3125rem;
  --fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-h1: clamp(2.9rem, 1.6rem + 5.4vw, 5.25rem);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px); /* anchors clear the sticky header */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Everything set in Anek's wide widths uses the wide fallback while the font loads */
.hero h1, .section-head h2, .hero-badge strong, .highlights strong, .timeline strong,
.service h3, .why-list h3, .info-call strong, .thanks h1 { font-family: var(--font-wide); }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.1; font-weight: 700; text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* No transitions while the page is still loading (class set in index.html <head>) */
.is-loading *, .is-loading *::before, .is-loading *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 640px) { .container { padding-inline: 28px; } }

.section { padding-block: 72px; }
.section-alt { background: var(--paper-alt); }
@media (min-width: 900px) { .section { padding-block: 112px; } }

.section-head { max-width: 40rem; margin-bottom: 48px; }
.section-head h2 {
  font-size: var(--fs-h2);
  font-weight: 750;
  font-stretch: 112%;
  letter-spacing: -.02em;
  margin-bottom: .35em;
}
.section-sub { margin: 0; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.5; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--ink); color: #fff; border-radius: var(--radius);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .8em 1.4em;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit; font-weight: 650; line-height: 1.15;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn .icon { width: 1.15em; height: 1.15em; flex: none; }

.btn-primary { background: var(--orange-deep); color: #fff; }
.btn-primary:hover { background: var(--orange-ink); }
.btn-primary:disabled { opacity: .65; cursor: progress; }

.btn-whatsapp { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn-whatsapp .icon { color: var(--wa); }
.btn-whatsapp:hover { background: var(--ink); color: #fff; }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline .icon { color: var(--orange); }
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-sm { min-height: 44px; padding: .55em 1.1em; font-size: .9375rem; } /* 44px: comfortable tap target */
.btn-lg { padding: .95em 1.6em; font-size: 1.0625rem; }
.btn-block { width: 100%; }

/* ---------- 5. Header & navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
@supports (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(160%) blur(10px); }
}

.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.brand { display: block; border-radius: 4px; }
.brand img { width: auto; height: 38px; }
@media (min-width: 640px) { .brand img { height: 44px; } }

/* Hamburger (mobile only) */
.nav-toggle {
  display: grid; place-content: center; gap: 5px;
  width: 44px; height: 44px; margin-right: -8px; padding: 0;
  background: none; border: 0; border-radius: var(--radius); cursor: pointer;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel */
.site-nav {
  position: absolute; top: var(--header-h); left: 0; right: 0;
  display: none;
  padding: 4px 16px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -12px rgba(30, 30, 30, .18);
}
.site-nav.is-open { display: block; }
.site-nav ul { margin-bottom: 16px; }
.site-nav a:not(.btn) {
  display: block; padding: 14px 2px;
  font-size: 1.125rem; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.site-nav a[aria-current="true"] { color: var(--orange-ink); }
.site-nav .btn { width: 100%; }

/* Desktop navigation */
@media (min-width: 880px) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static; display: flex; align-items: center; gap: 32px;
    padding: 0; background: none; border: 0; box-shadow: none;
  }
  .site-nav ul { display: flex; gap: 26px; margin: 0; }
  .site-nav a:not(.btn) { position: relative; padding: 6px 0; border: 0; font-size: 1rem; font-weight: 550; }
  .site-nav a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--orange);
    transform: scaleX(0); transform-origin: left; transition: transform .25s;
  }
  .site-nav a:not(.btn):hover::after,
  .site-nav a[aria-current="true"]::after { transform: scaleX(1); }
  .site-nav a[aria-current="true"] { color: var(--ink); }
  .site-nav .btn { width: auto; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: 40px 56px;
  border-bottom: 1px solid var(--line);
}
.hero-inner { display: grid; gap: 8px; align-items: center; }

.kicker {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  font-size: 1rem; font-weight: 600; color: var(--orange-ink);
}
.kicker::before {
  content: ""; flex: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--orange);
}

.hero h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  font-stretch: 118%;
  line-height: .98;
  letter-spacing: -.035em;
  margin-bottom: .4em;
}
.hero h1 span { display: block; }

.lead { max-width: 34rem; margin-bottom: 32px; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-soft); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
@media (max-width: 479px) { .hero-actions .btn { width: 100%; } }

/* What-we-offer list: each item led by a short orange stroke, so wrapped lines stay tidy */
.offer-list { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .9375rem; font-weight: 600; color: var(--ink-soft); }
.offer-list li { display: flex; align-items: center; gap: 8px; }
.offer-list li::before {
  content: ""; width: 12px; height: 2px;
  background: var(--orange); border-radius: 2px;
}

/* Hero art: brand disc with fiber strands running off the right edge.
   Clipped on small screens so strands never cross the buttons above. */
.hero-art { position: relative; height: 230px; margin: 16px -16px 0; overflow: clip; }
.strands { position: absolute; left: -16px; top: 50%; width: 300px; height: auto; overflow: visible; transform: translateY(-50%); }
.strands path { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.strands path:nth-child(2) { opacity: .8; }
.strands path:nth-child(3) { stroke: var(--ink); stroke-width: 2.5; }
.strands path:nth-child(4) { opacity: .45; }
.strands path:nth-child(5) { opacity: .3; }

.hero-badge {
  position: absolute; left: 160px; bottom: 6px;
  display: grid; margin: 0; padding: 10px 16px 12px;
  background: var(--ink); color: #fff;
  border-radius: var(--radius);
  line-height: 1.25;
}
.hero-badge strong { font-size: 1.5rem; font-weight: 750; font-stretch: 112%; }
.hero-badge span { font-size: .875rem; color: #D6D2CF; max-width: 12rem; }

@media (min-width: 640px) {
  .hero-art { height: 300px; margin-inline: -28px; }
  .strands { width: 400px; }
  .hero-badge { left: 230px; bottom: 20px; }
}

@media (min-width: 960px) {
  .hero { padding-block: 72px 96px; }
  .hero-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; }
  .hero-art { height: auto; aspect-ratio: 560 / 520; margin: 0; overflow: visible; }
  .strands { left: 0; top: 0; width: 100%; transform: none; }
  .hero-badge { left: 50%; top: 74%; bottom: auto; } /* tucked against the disc's lower edge */
}

/* The one orchestrated moment: strands draw out of the disc on every load.
   The disc scales from its own centre; it has no transform attribute of its
   own (that sits on an inner <g>), so the animation can't move it. */
.strands .disc { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .strands path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw-strand 1.8s cubic-bezier(.55, 0, .25, 1) forwards;
    animation-delay: calc(.2s + var(--i) * .12s);
  }
  .strands .disc { animation: disc-in .6s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-badge { animation: fade-in .5s ease 1.3s both; }
}
@keyframes draw-strand { to { stroke-dashoffset: 0; } }
@keyframes disc-in { from { opacity: 0; scale: .9; } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- 7. About ---------- */
.about-grid { display: grid; gap: 40px; margin-bottom: 72px; }
.about-copy { max-width: 36rem; }
.about-copy p { font-size: 1.125rem; }
.about-copy p:first-child { font-size: 1.375rem; font-weight: 600; line-height: 1.4; }
.about-copy p:last-child { margin-bottom: 0; }

.highlights { display: grid; align-content: start; }
.highlights li {
  display: grid; gap: 2px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.highlights li:first-child { border-top: 2px solid var(--ink); }
.highlights strong { font-size: 1.5rem; font-weight: 750; font-stretch: 112%; letter-spacing: -.01em; }
.highlights span { color: var(--ink-soft); }

@media (min-width: 900px) { .about-grid { grid-template-columns: 1.35fr 1fr; gap: 72px; } }

/* Timeline: a real sequence. The line shifts from cable charcoal to fiber orange.
   Vertical on mobile, horizontal from tablet up. */
.timeline { position: relative; display: grid; gap: 26px; padding-left: 32px; margin-bottom: 80px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--ink), var(--orange));
}
.timeline li { position: relative; display: grid; }
.timeline li::before {
  content: ""; position: absolute; left: -32px; top: 4px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--orange);
}
.timeline li:first-child::before { border-color: var(--ink); }
.timeline li:last-child::before { background: var(--orange); }
.timeline strong { font-size: 1.25rem; font-weight: 700; font-stretch: 110%; }
.timeline span { color: var(--ink-soft); }

@media (min-width: 720px) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 40px 0 0; }
  .timeline::before { left: 8px; right: 8px; top: 7px; bottom: auto; width: auto; height: 3px; background: linear-gradient(90deg, var(--ink), var(--orange)); }
  .timeline li::before { left: 0; top: -40px; }
}

/* Group companies */
.group h3 { font-size: var(--fs-h3); margin-bottom: 20px; }
.group-list { display: grid; gap: 0 28px; }
.group-list li {
  display: grid; gap: 6px; align-content: start;
  padding: 18px 0 22px;
  border-top: 2px solid var(--ink);
}
.group-list li.is-self { border-top-color: var(--orange); }
.group-list strong { font-size: 1.0625rem; }
.group-list span { color: var(--ink-soft); font-size: .9688rem; line-height: 1.5; }
@media (min-width: 640px) { .group-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .group-list { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 8. Services: a ruled grid, like ports on a panel ---------- */
.services {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } }

.service { padding: 32px 24px 36px; background: var(--paper); }
@media (min-width: 900px) { .service { padding: 40px 36px 44px; } }
.service h3 { font-size: var(--fs-h3); font-stretch: 108%; margin-bottom: .4em; }
.service p { color: var(--ink-soft); margin-bottom: 20px; }

.service-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 24px;
  background: var(--orange); color: #fff;
  border-radius: 50%;
}
.service-icon svg { width: 26px; height: 26px; }

.ticks { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9688rem; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .32em;
  width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23C23800' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ---------- 9. Why choose us: heading on the left, ruled list on the right ---------- */
.why-layout { display: grid; gap: 0 72px; }
@media (min-width: 960px) {
  .why-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .why-layout .section-head { position: sticky; top: calc(var(--header-h) + 40px); margin-bottom: 0; }
}

.why-list { border-bottom: 1px solid var(--line); }
.why-list li {
  display: grid; gap: 4px 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.why-list li:first-child { border-top: 2px solid var(--ink); }
.why-list h3 { margin: 0; font-size: var(--fs-h3); font-stretch: 108%; }
.why-list p { margin: 0; color: var(--ink-soft); max-width: 32rem; }
@media (min-width: 640px) {
  .why-list li { grid-template-columns: 13rem 1fr; padding: 28px 0; }
}

/* ---------- 10. Reviews ---------- */
.reviews { display: grid; gap: 40px; }
@media (min-width: 900px) { .reviews { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

.review {
  display: flex; flex-direction: column;
  margin: 0; padding-top: 24px;
  border-top: 2px solid var(--ink);
}
.stars { display: flex; gap: 3px; color: #E89A00; margin-bottom: 18px; }
.stars svg { width: 18px; height: 18px; }
.stars .star-empty { color: var(--line-strong); }
.review blockquote { margin: 0 0 24px; flex: 1; font-size: 1.25rem; line-height: 1.45; font-weight: 500; }
.review blockquote p { margin: 0; }
.review blockquote p::before { content: "\201C"; }
.review blockquote p::after { content: "\201D"; }
.review figcaption { display: grid; font-size: .9688rem; line-height: 1.4; }
.review figcaption span { color: var(--ink-soft); }

.reviews-more { margin: 56px 0 0; }

/* ---------- 11. Contact ---------- */
.contact-grid { display: grid; gap: 40px; margin-bottom: 72px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; } }

.contact-form {
  padding: 28px 20px;
  background: var(--paper-alt);
  border-radius: var(--radius);
  border-top: 4px solid var(--orange);
}
@media (min-width: 640px) { .contact-form { padding: 40px; } }

.field-row { display: grid; gap: 0 20px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 6px; margin-bottom: 20px; }
.field label { font-weight: 600; font-size: .9688rem; }
.field label span { color: var(--orange-ink); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit; font-size: 1rem; /* 16px stops iOS zoom on focus */
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: #8A8380; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 74, 0, .16);
}
.field input:user-invalid { border-color: #B42318; }
.hidden-field { position: absolute; left: -9999px; }

.form-status { margin: 14px 0 0; min-height: 1.5em; font-weight: 600; }
.form-status.is-success { color: #137A35; }
.form-status.is-error { color: #B42318; }

.contact-info { display: grid; align-content: start; border-top: 2px solid var(--ink); }
.info-row {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.info-row small { display: block; color: var(--ink-soft); font-size: .9375rem; font-weight: 500; }
.info-row strong { display: block; font-size: 1.125rem; font-weight: 650; overflow-wrap: anywhere; line-height: 1.35; }
a.info-row:hover strong { color: var(--orange-ink); }
a.info-row:hover .info-icon { background: var(--orange); color: #fff; }

.info-icon {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--orange-wash); color: var(--orange-ink);
  transition: background-color .2s, color .2s;
}
.info-icon svg { width: 22px; height: 22px; }

.info-call strong { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); font-weight: 750; font-stretch: 110%; letter-spacing: -.01em; }

.info-wa { align-items: center; }
.info-wa img { width: 112px; height: 112px; flex: none; border: 1px solid var(--line); border-radius: var(--radius); }
.info-wa strong { margin-bottom: 10px; }

.areas { margin-bottom: 40px; }
.areas h3 { font-size: var(--fs-h3); margin-bottom: 18px; }
.area-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px;
  font-weight: 550;
}
@media (min-width: 640px) { .area-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .area-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.area-list li { display: flex; align-items: baseline; gap: 10px; }
.area-list li::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); transform: translateY(-1px);
}
.note { max-width: 40rem; margin: 20px 0 0; color: var(--ink-soft); font-size: .9688rem; }

.map {
  position: relative; aspect-ratio: 4 / 3; min-height: 280px;
  overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper-alt);
}
@media (min-width: 760px) { .map { aspect-ratio: auto; height: 440px; } }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 12. Footer ---------- */
.site-footer { background: var(--ink); color: #CFCBC8; padding-top: 64px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #FF8A5C; text-decoration: underline; text-underline-offset: 3px; }
.site-footer h2 { font-size: 1rem; font-weight: 600; color: #8F8A87; margin-bottom: 14px; }
.site-footer li { margin-bottom: 8px; }

.footer-grid { display: grid; gap: 40px; padding-bottom: 48px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr .7fr 1.2fr; gap: 56px; } }

.footer-logo { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.site-footer .footer-logo:hover { text-decoration: none; color: #fff; }
.footer-logo img { width: 52px; height: 52px; }
.footer-logo span { display: grid; line-height: 1.1; }
/* Mirrors the serif wordmark in the logo */
.footer-logo b { font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; font-weight: 400; letter-spacing: .12em; }
.footer-logo small { font-family: Georgia, "Times New Roman", serif; font-size: .7rem; letter-spacing: .22em; color: #CFCBC8; }
.footer-brand p { max-width: 24rem; }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-block: 22px 96px; /* extra bottom space so the floating button never covers text */
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .9375rem; color: #A9A4A1;
}
.footer-bottom p { margin: 0; }
@media (min-width: 760px) { .footer-bottom { padding-bottom: 26px; } }

/* ---------- 13. Floating WhatsApp button ---------- */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color: #fff;
  box-shadow: 0 8px 22px rgba(29, 168, 81, .38);
  transition: transform .2s;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; }