/* ==========================================================================
   SOSTIN Property Management — V1 landing page
   Hand-written, dependency-free CSS. Mobile-first.

   Colour tokens are fixed by the spec. Contrast on #FFFFFF:
     --primary      #1F3A5F  11.48:1  headings, primary buttons, footer
     --accent       #2E8B57   4.25:1  ICONS / DECORATION / TEXT >=24px ONLY
     --accent-text  #256F46   6.10:1  normal-size green text, white-on-green fills
     --body         #425063   8.21:1  body copy
     --muted        #525F70   6.50:1  small supporting text
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --primary: #1F3A5F;
  --primary-dark: #16304F;
  --accent: #2E8B57;
  --accent-text: #256F46;
  --accent-text-dark: #1D5A38;
  --accent-on-dark: #8FD3AC;

  /* Neutrals */
  --white: #FFFFFF;
  --body: #425063;
  --muted: #525F70;
  --surface: #F4F7FA;
  --surface-accent: #EAF3ED;
  --line: #E2E8EF;
  --line-strong: #C9D4E0;
  --line-ui: #7F8A9B; /* 3.49:1 on white, 3.25:1 on --surface — control borders */
  --on-primary-soft: #D6E1EE;

  /* Type */
  --font-heading: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --fs-h1: clamp(2rem, 5.6vw, 3.375rem);
  --fs-h1-sub: clamp(1.5rem, 4.2vw, 2.375rem);
  --fs-h2: clamp(1.5rem, 3.4vw, 2.125rem);
  --fs-h3: 1.0625rem;
  --fs-lead: clamp(1rem, 1.8vw, 1.125rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-price: clamp(2rem, 6.4vw, 3rem);

  /* Spacing scale */
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 4.5rem;

  /* Shape */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(31, 58, 95, 0.06);
  --shadow: 0 6px 24px rgba(31, 58, 95, 0.07);
  --shadow-lg: 0 18px 48px rgba(31, 58, 95, 0.10);

  --container: 1120px;
  --gutter: 1.25rem;
  --header-h: 4.25rem;

  /* Scroll offset for in-page anchors. Defaults to the nominal header height;
     main.js overwrites it with the header's measured height (and 0 when the
     header is not sticky) so anchor targets can never land underneath it. */
  --header-offset: var(--header-h);

  /* Sticky mobile CTA bar. Everything that has to clear the bar is derived from
     these three values, so the bar's height and the space reserved for it can
     never drift apart. */
  --cta-bar-pad-y: 0.55rem;
  --cta-bar-btn-h: 2.875rem;
  --cta-bar-safe: max(var(--cta-bar-pad-y), env(safe-area-inset-bottom, 0px));
  --cta-bar-h: calc(
    var(--cta-bar-pad-y) + var(--cta-bar-btn-h) + var(--cta-bar-safe) + 1px
  );
  /* env()-free equivalent, used as the fallback where env() is unsupported. */
  --cta-bar-h-flat: calc(var(--cta-bar-pad-y) * 2 + var(--cta-bar-btn-h) + 1px);

  --transition: 180ms ease;

  /* The page is light-only by design (navy panels, white surfaces). */
  color-scheme: light;
}

@media (min-width: 400px) {
  :root { --gutter: 1.5rem; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-offset) + 0.75rem);
  /* Below 900px the fixed CTA bar covers the bottom of the viewport, so anything
     scrolled or focused into view has to clear it. Reset at >=900px where the bar
     is not rendered. */
  scroll-padding-bottom: calc(var(--cta-bar-h-flat) + 0.75rem);
  scroll-padding-bottom: calc(var(--cta-bar-h) + 0.75rem);
}

@media (min-width: 900px) {
  html { scroll-padding-bottom: 0; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

img {
  display: block;
  height: auto;
  border: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--primary);
  line-height: 1.18;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.35; letter-spacing: -0.005em; }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--accent-text); }

a:hover { color: var(--accent-text-dark); }

button { font: inherit; }

/* Visible focus for every interactive element. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Fallback for engines without :focus-visible. */
a:focus,
button:focus,
summary:focus { outline: 3px solid var(--primary); outline-offset: 3px; }

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--primary);
  color: var(--white);
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  color: var(--white);
  /* Inset ring: #8FD3AC on the #1F3A5F button is 6.61:1. A --primary ring would
     be invisible against the button itself. */
  outline: 3px solid var(--accent-on-dark);
  outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* viewport-fit=cover lets the page paint into the notch/rounded corners, so the
     gutter has to grow to at least the safe-area inset in landscape. */
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.section {
  padding-block: var(--sp-8);
}

@media (min-width: 768px) {
  .section { padding-block: var(--sp-9); }
}

.section--tint { background: var(--surface); }

.section-head {
  max-width: 46rem;
  margin-bottom: var(--sp-6);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* Used where the section head is a grid cell and the grid gap already supplies
   the separation below it. */
.section-head--flush { margin-bottom: 0; }

.eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--sp-3);
}

.section-head p {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--body);
}

.rule {
  width: 3.25rem;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  margin-top: var(--sp-4);
}

.section-head--center .rule { margin-inline: auto; }

.grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { gap: var(--sp-5); }
}

@media (min-width: 980px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   4. Icons
   -------------------------------------------------------------------------- */
.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 1.125rem; height: 1.125rem; stroke-width: 2; }

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  background: var(--surface-accent);
  color: var(--accent-text);
  margin-bottom: var(--sp-4);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem; /* 48px tap target */
  padding: 0.75rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), transform var(--transition), box-shadow var(--transition);
}

/* Primary: white on #1F3A5F — 11.48:1 */
.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow);
}

.btn--primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
  transform: translateY(-1px);
}

/* WhatsApp: white on #256F46 — 6.10:1 */
.btn--whatsapp {
  background: var(--accent-text);
  border-color: var(--accent-text);
  color: var(--white);
  box-shadow: var(--shadow);
}

.btn--whatsapp:hover {
  background: var(--accent-text-dark);
  border-color: var(--accent-text-dark);
  color: var(--white);
  transform: translateY(-1px);
}

/* Outline: #1F3A5F on white — 11.48:1, 2px border = 11.48:1 boundary */
.btn--outline {
  background: var(--white);
  border-color: var(--primary);
  color: var(--primary);
}

.btn--outline:hover {
  background: var(--primary);
  color: var(--white);
}

.btn--sm {
  min-height: 2.75rem; /* 44px */
  padding: 0.5rem 1.05rem;
  font-size: var(--fs-xs);
}

.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

@media (max-width: 379px) {
  .btn-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   6. Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(150%) blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  min-height: var(--header-h);
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--primary);
  min-height: 2.75rem;
}

.brand:hover { color: var(--primary); }

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: var(--primary);
  color: var(--white);
  flex: 0 0 auto;
}

.brand-mark .icon { width: 1.25rem; height: 1.25rem; }

/* The mark's fourth pane. `.icon` sets fill:none, so this needs an explicit rule
   or the pane renders invisible. Mint on the navy header tile is 6.61:1; in the
   footer the mark is already mint, so the accent pane flips to white to stay
   visible as an accent. */
.mark-pane--accent { fill: var(--accent-on-dark); }
.site-footer .mark-pane--accent { fill: var(--white); }

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: var(--primary);
}

.brand-sub {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav { margin-left: auto; }

/* No-JS baseline: the nav list is a visible wrapped row on small screens so
   anchor navigation works without scripting. The toggle button is hidden
   until main.js announces itself by adding `.js` to <html>. */
.nav-toggle { display: none; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0.25rem;
  width: 100%;
  padding-bottom: 0.25rem;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem; /* 44px */
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
}

.nav-list a:hover {
  background: var(--surface);
  color: var(--primary-dark);
}

/* JS present: collapse the nav behind a toggle on small screens. */
.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--line-ui); /* 3.49:1 — UI component boundary */
  border-radius: var(--radius-sm);
  color: var(--primary);
  cursor: pointer;
}

.js .nav-toggle:hover { background: var(--surface); }

.js .nav-toggle .icon-close,
.js .nav-toggle[aria-expanded="true"] .icon-open { display: none; }

.js .nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.js .nav-list { display: none; }

/* The open menu is taken out of flow and hung under the header rather than
   growing the sticky header itself. Three things fall out of that:
     - the toggle never moves when the menu opens,
     - the header keeps a single known height, so the anchor scroll offset stays
       correct while the menu is open,
     - max-height + overflow keeps every link reachable at short viewport heights
       (landscape phones, 400% zoom) instead of pushing them off screen.
   .site-header is position: sticky/relative, so it is the containing block. */
.js .nav-list.is-open {
  display: flex;
  flex-direction: column;
  /* nowrap matters: with the max-height below, a wrapping column flex container
     spills into a SECOND COLUMN instead of scrolling, which puts the last links
     off the right edge of the panel where they cannot be reached. */
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.125rem;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  width: auto;
  max-height: 60vh;
  max-height: calc(100dvh - var(--header-h) - var(--cta-bar-h-flat));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2) var(--gutter) var(--sp-3);
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Without this the max-height above makes the column's flex items shrink to fit
   instead of overflowing, so the panel never becomes scrollable and every link
   is squashed to a few pixels at short viewport heights. */
.js .nav-list.is-open > li { flex: 0 0 auto; }

.js .nav-list a {
  font-size: var(--fs-sm);
  padding-inline: 0.75rem;
}

/* Below 900px the toggle sits at the right end of the brand row, on its own —
   absolute, so the full-width no-JS link row and the open menu panel can both live
   in the same flex line box without pushing it around. The offset is derived from
   the header height and the button size, so it stays centred if either changes. */
.js .nav-toggle {
  position: absolute;
  top: calc((var(--header-h) - 2.75rem) / 2);
  right: var(--gutter);
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* The sticky mobile CTA bar carries "Talk to Us" at every width below 900px, so
   the header CTA is redundant there. */
.header-cta { display: none; }

/* No-JS: the nav renders as a visible wrapped link row, so the header is much
   taller than --header-h (~213px at 320px) and nothing can measure it. A sticky
   header of unknown height would cover whatever an anchor scrolled to, so in that
   state the header simply does not stick and the scroll offset drops to 0. Anchor
   targets then land exactly at the top of the viewport. */
html:not(.js) { --header-offset: 0px; }
html:not(.js) .site-header { position: static; }

@media (min-width: 900px) {
  :root { --header-h: 4.75rem; }

  .header-inner { flex-wrap: nowrap; }

  /* The bottom CTA bar is gone from here up, so the header CTA takes over. */
  .header-cta {
    display: inline-flex;
    flex: 0 0 auto;
  }

  /* Room for it on the row now, so the toggle rejoins the flow: brand … [menu]
     [Talk to Us]. */
  .js .nav-toggle {
    position: static;
    top: auto;
    right: auto;
  }

  /* A full-bleed dropdown looks like a mistake on a wide window — align it under
     the toggle instead. */
  .js .nav-list.is-open {
    left: auto;
    width: min(22rem, 100%);
    right: var(--gutter);
    right: max(var(--gutter), env(safe-area-inset-right, 0px));
    border-top: 0;
    border: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
  }
}

/* Short nav labels (About, Services, How It Works, Pricing, Service Area, FAQ,
   Contact) fit on one line with the brand and the CTA from ~1024px up, which is
   where the toggle gives way to the full row. Below it the collapsed menu keeps
   the header to a single tidy line instead of wrapping the links two-deep. */
@media (min-width: 1024px) {
  .js .nav-toggle,
  .nav-toggle { display: none; }

  /* Full row of links: brand, nav, CTA left-to-right, matching DOM order.
     The seven short labels plus brand plus CTA need roughly 930px, so they sit
     comfortably inside the 1072px the capped container provides at wide widths,
     and still fit at 1024px. Below that the row wraps to two lines rather than
     overflowing: the header grows and the measured --header-offset absorbs it.
     wrap is the standing guarantee that a longer label or a wider fallback font
     can never produce horizontal overflow. */
  .nav-list,
  .js .nav-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    gap: 0;
    padding: 0;
    margin: 0;
    border-top: 0;
    background: none;
    box-shadow: none;
  }

  .nav-list a,
  .js .nav-list a { font-size: var(--fs-sm); padding-inline: 0.55rem; }

  .header-cta {
    display: inline-flex;
    flex: 0 0 auto;
  }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--sp-7) var(--sp-8);
  background:
    radial-gradient(60rem 30rem at 88% -10%, rgba(46, 139, 87, 0.10), transparent 65%),
    radial-gradient(48rem 26rem at 0% 0%, rgba(31, 58, 95, 0.09), transparent 60%),
    var(--white);
}

@media (min-width: 768px) {
  .hero { padding-block: var(--sp-8) var(--sp-9); }
}

.hero-inner {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--sp-7);
  }
}

.hero h1 { margin-bottom: var(--sp-4); }

.hero h1 .hero-h1-sub {
  display: block;
  font-size: var(--fs-h1-sub);
  font-weight: 600;
  color: var(--accent-text);
  margin-top: 0.15em;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem 0.4rem 0.6rem;
  margin-bottom: var(--sp-5);
  border-radius: var(--radius-pill);
  background: var(--surface-accent);
  color: var(--accent-text);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.hero-lead {
  font-size: var(--fs-lead);
  font-weight: 500;
  color: var(--primary);
  margin-bottom: var(--sp-3);
}

.hero-copy {
  max-width: 34rem;
  margin-bottom: var(--sp-6);
}

.hero .btn-row { margin-bottom: var(--sp-4); }

.hero-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.hero-note .icon { color: var(--accent-text); }

/* Reserved aspect ratio + gradient underlay: if hero.svg is swapped or fails
   to load, the frame keeps its size and the gradient shows through. */
.hero-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, #E7EEF6 0%, #EAF3ED 55%, #DCE9F3 100%);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Padding-ratio fallback for engines without aspect-ratio. Never a min-height:
   a min-height combined with aspect-ratio resolves width from height and can
   overflow a narrow column. */
@supports not (aspect-ratio: 16 / 11) {
  .hero-media { height: 0; padding-bottom: 68.75%; }
  .hero-media img { position: absolute; inset: 0; }
}

/* --------------------------------------------------------------------------
   8. Trust & Transparency
   -------------------------------------------------------------------------- */
.trust-list {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}

.trust-item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.trust-item .icon { color: var(--accent); margin-top: 0.15rem; }

.trust-item b {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--primary);
}

.trust-item p { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   9. About
   -------------------------------------------------------------------------- */
.about-inner {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 900px) {
  .about-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-7); }
}

.prose > * + * { margin-top: var(--sp-4); }

.prose p { font-size: var(--fs-lead); }

.about-highlight {
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--surface-accent);
  border-left: 4px solid var(--accent);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   10. Cards (Why Choose / Who We Serve)
   -------------------------------------------------------------------------- */
.card {
  height: 100%;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition),
    border-color var(--transition);
}

.card:hover {
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.card h3 { margin-bottom: var(--sp-2); }

.card p { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   11. Services
   -------------------------------------------------------------------------- */
.services-inner {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 900px) {
  .services-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-7); }
}

.services-panel {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.services-panel h3 {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--sp-4);
}

.check-list {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
  .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem var(--sp-4); }
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--body);
}

.check-list .icon { color: var(--accent); margin-top: 0.2rem; }

/* --------------------------------------------------------------------------
   12. How It Works
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step {
  position: relative;
  height: 100%;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--white); /* 11.48:1 */
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
}

.step h3 { margin-bottom: var(--sp-2); }

.step p { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   13. Pricing
   -------------------------------------------------------------------------- */
.price-card {
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.price-card h3 {
  font-size: 1.125rem;
  margin-bottom: var(--sp-4);
}

.price-from {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* --accent on white = 4.25:1; this text is >=32px so AA large-text (3:1) applies. */
.price-figure {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-price);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-block: var(--sp-2) var(--sp-4);
}

.price-note {
  font-size: var(--fs-sm);
  color: var(--body);
  max-width: 26rem;
  margin-inline: auto;
}

.price-card .btn-row {
  justify-content: center;
  margin-top: var(--sp-5);
}

/* --------------------------------------------------------------------------
   14. Service Area
   -------------------------------------------------------------------------- */
.area-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.area-block {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.area-block h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  margin-bottom: var(--sp-4);
}

.area-block h3 .icon { color: var(--accent); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.chip--now {
  background: var(--surface-accent);
  color: var(--accent-text); /* 5.39:1 on #EAF3ED */
}

.chip--soon {
  background: var(--surface);
  color: var(--primary); /* 10.68:1 on #F4F7FA */
}

/* --------------------------------------------------------------------------
   15. FAQ — native <details>, open in the HTML, collapsed by JS
   -------------------------------------------------------------------------- */
.faq {
  max-width: 48rem;
  margin-inline: auto;
  display: grid;
  gap: var(--sp-3);
}

/* No `overflow: hidden` here: it clipped the summary's focus ring (drawn at
   outline-offset: 3px), leaving keyboard users with no visible focus indicator.
   The rounded corners are kept by rounding the summary itself instead. */
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.faq-item[open] { border-color: var(--line-strong); }

.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 3rem;
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  /* Inherit the card's corners so the hover tint cannot bleed past them now that
     the item no longer clips its children. 1px inset for the item's border. */
  border-radius: calc(var(--radius) - 1px);
}

.faq-item[open] .faq-q {
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

.faq-q::-webkit-details-marker { display: none; }

/* Question text is an <h3> so screen-reader heading navigation reaches every
   FAQ entry. It inherits all typography from .faq-q, so this is a no-op visually. */
.faq-q-title {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.faq-q:hover { background: var(--surface); }

.faq-q .icon {
  color: var(--accent-text);
  margin-top: 0.15rem;
  transition: transform var(--transition);
}

.faq-item[open] .faq-q .icon { transform: rotate(180deg); }

.faq-a {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--body);
}

/* The items ship with `open` so the no-JS baseline shows every answer. With JS,
   they have to be collapsed BEFORE first paint — main.js cannot touch elements
   that have not been parsed yet, so the `.js` flag it sets in <head> hides the
   answers immediately and main.js removes `open` (and adds `.faq-ready`) once the
   DOM is available. Net effect: the FAQ is laid out collapsed from the first
   paint, so nothing shifts afterwards. Without JS neither class exists and every
   answer stays visible. */
.js:not(.faq-ready) .faq-item[open] .faq-a { display: none; }

.js:not(.faq-ready) .faq-item[open] { border-color: var(--line); }

.js:not(.faq-ready) .faq-item[open] .faq-q { border-radius: calc(var(--radius) - 1px); }

.js:not(.faq-ready) .faq-item[open] .faq-q .icon { transform: none; }

/* --------------------------------------------------------------------------
   16. Contact
   -------------------------------------------------------------------------- */
.contact-inner {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 900px) {
  .contact-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); }
}

.contact-list {
  display: grid;
  gap: var(--sp-3);
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.contact-row .icon-badge { margin-bottom: 0; width: 2.75rem; height: 2.75rem; }

.contact-row .icon-badge .icon { width: 1.375rem; height: 1.375rem; }

.contact-label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted); /* 6.50:1 on white */
  margin-bottom: 0.15rem;
}

.contact-value {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--primary);
  overflow-wrap: anywhere;
}

a.contact-value {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem; /* 44px tap target */
  color: var(--accent-text);
  text-decoration: none;
}

a.contact-value:hover { color: var(--accent-text-dark); text-decoration: underline; }

.contact-cta {
  padding: var(--sp-6) var(--sp-5);
  background: var(--primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.contact-cta h3 {
  color: var(--white); /* 11.48:1 */
  font-size: 1.25rem;
  margin-bottom: var(--sp-3);
}

.contact-cta p {
  color: var(--on-primary-soft); /* 8.67:1 on #1F3A5F */
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
}

.contact-cta .btn-row { flex-direction: column; }

.contact-cta .btn--outline {
  background: var(--white);
  border-color: var(--white);
  color: var(--primary);
}

.contact-cta .btn--outline:hover {
  background: var(--on-primary-soft);
  color: var(--primary);
}

/* A --primary ring would vanish against the --primary panel. */
.contact-cta .btn:focus-visible,
.contact-cta .btn:focus { outline-color: var(--white); }

.contact-cta .btn:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--primary);
  color: var(--on-primary-soft);
  padding-block: var(--sp-7);
}

.footer-inner {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-6);
  }
}

.site-footer .brand-mark {
  background: rgba(255, 255, 255, 0.14);
  color: var(--accent-on-dark); /* 6.61:1 on #1F3A5F */
}

.footer-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white); /* 11.48:1 */
}

.footer-tagline,
.footer-area {
  font-size: var(--fs-sm);
  color: var(--on-primary-soft); /* 8.67:1 */
}

.footer-brand > * + * { margin-top: 0.35rem; }

.footer-contact {
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--white); /* 11.48:1 */
  text-decoration: none;
  font-weight: 500;
}

.footer-contact a:hover { color: var(--accent-on-dark); text-decoration: underline; }

.footer-contact .icon { color: var(--accent-on-dark); }

.footer-contact span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
}

.site-footer a:focus-visible,
.site-footer a:focus {
  outline-color: var(--white);
}

/* --------------------------------------------------------------------------
   18. Sticky mobile call / WhatsApp bar
   -------------------------------------------------------------------------- */
.mobile-cta-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  gap: var(--sp-2);
  padding: var(--cta-bar-pad-y) var(--sp-3);
  padding-bottom: var(--cta-bar-safe);
  padding-left: max(var(--sp-3), env(safe-area-inset-left, 0px));
  padding-right: max(var(--sp-3), env(safe-area-inset-right, 0px));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(31, 58, 95, 0.10);
  backdrop-filter: blur(10px);
}

.mobile-cta-bar .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--cta-bar-btn-h);
  box-shadow: none;
  padding-inline: 0.5rem;
}

/* Keep the bar from covering the end of the page. Derived from the same tokens as
   the bar itself, so the reserved space cannot drift from the real height. The
   first declaration is the env()-free fallback. */
body {
  padding-bottom: var(--cta-bar-h-flat);
  padding-bottom: var(--cta-bar-h);
}

@media (min-width: 900px) {
  .mobile-cta-bar { display: none; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   18b. Short viewports

   Landscape phones, and 400% zoom on a 1280x800 screen (WCAG 1.4.10 asks for
   320x256 CSS px). A sticky header plus a fixed bottom bar can eat the whole
   screen there, so both drop out of viewport-anchored positioning and scroll away
   with the content. Must come after the rules it overrides.
   The header stays `relative` rather than `static`: it is the containing block for
   the open nav panel.
   -------------------------------------------------------------------------- */
@media (max-height: 30rem) {
  .site-header { position: relative; }

  .mobile-cta-bar {
    position: static;
    padding-bottom: var(--cta-bar-pad-y);
  }

  body { padding-bottom: 0; }

  html { scroll-padding-bottom: 0.75rem; }
}

/* --------------------------------------------------------------------------
   19. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .mobile-cta-bar { position: static; }

  .mobile-cta-bar,
  .nav-toggle,
  .site-nav,
  .skip-link { display: none; }

  body { padding-bottom: 0; }

  /* Every <details> ships open and main.js re-opens all six on `beforeprint`, so
     the answers are in the printed flow. This rule is the belt-and-braces path for
     engines that expose the details slot as ::details-content — a child
     `display: block` cannot reveal a closed <details>, which is why the previous
     `.faq-a { display: block !important }` printed six questions and no answers. */
  .faq-item::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .js:not(.faq-ready) .faq-item[open] .faq-a { display: block; }

  /* Browsers print with "background graphics" off by default, so every dark panel
     loses its fill and keeps its light text — white on white. Force ink-legible
     colours instead of relying on the background surviving.
     #1F3A5F on white is 11.48:1; #425063 is 8.21:1. */
  .site-footer,
  .contact-cta {
    background: var(--white);
    color: var(--body);
    box-shadow: none;
    border: 1px solid var(--line-strong);
  }

  .site-footer .footer-name,
  .site-footer .footer-tagline,
  .site-footer .footer-area,
  .site-footer a,
  .site-footer span,
  .site-footer .icon,
  .contact-cta h3,
  .contact-cta p,
  .contact-cta .btn {
    color: var(--primary);
  }

  .contact-cta .btn--outline,
  .contact-cta .btn--whatsapp {
    background: var(--white);
    border-color: var(--primary);
  }

  /* Same defect, same fix: white text on a fill that will not print. */
  .btn--primary,
  .btn--whatsapp,
  .step-num,
  .brand-mark {
    background: var(--white);
    color: var(--primary);
    border: 1px solid var(--primary);
    box-shadow: none;
  }

  /* Don't split a card across a page break. */
  .card,
  .step,
  .trust-item,
  .faq-item,
  .price-card,
  .area-block,
  .contact-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}