/* ==========================================================================
   Covcro Electrical & Plumbing (Pvt) Ltd
   Brand palette taken from the company logo: royal blue + pink, with a
   water-blue tertiary. Single stylesheet, no build step. The one webfont is
   served from this repository, so the site still makes no third-party
   requests at runtime.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Font
   Roboto, latin subset, variable 400–700 in a single 42 KB file. The
   reference site sets everything in Roboto; matching it in a system stack is
   not possible, since the fallbacks differ per platform.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/roboto-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --blue-900: #071634;
  --blue-800: #0b2154;
  --blue-700: #102e77;
  --blue-600: #17429b;   /* logo blue */
  --blue-500: #2456bd;
  --blue-100: #dbe5fa;
  --blue-50:  #eef3fd;

  --pink-600: #e03d70;
  --pink-500: #f5578a;   /* logo pink */
  --pink-400: #ff7ba5;
  --pink-50:  #fff0f5;

  --aqua-500: #1e9cd7;   /* water drop blue */
  --aqua-50:  #e8f6fd;

  /* Neutrals. Read off the reference rather than tinted towards the brand
     blue: its text is near-black, its alternating band is a flat warm-free
     grey and nothing in it carries a blue cast. */
  --ink:      #0c0c0c;   /* headings */
  --body:     #262626;   /* body copy */
  --muted:    #5c5c5c;
  --line:     #e5e5e5;
  --surface:  #ffffff;
  --surface-2:#f2f3f5;   /* the reference's alternating row background */
  --surface-3:#e9eaec;

  /* Type. The reference sets everything in Roboto; it is bundled in
     assets/fonts rather than fetched from a font CDN at runtime. */
  --font-sans: Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: var(--font-sans);

  /* Rhythm */
  --wrap: 1200px;
  --wrap-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* Radii. The reference design is square-cornered throughout: buttons,
     cards, chips and the menu toggle are all hard rectangles. Decorative
     dots and avatars still use an explicit 50%. */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-full: 0px;

  --shadow-sm: 0 1px 2px rgba(7, 22, 52, .06), 0 2px 8px rgba(7, 22, 52, .04);
  --shadow-md: 0 4px 14px rgba(7, 22, 52, .08), 0 12px 32px rgba(7, 22, 52, .06);
  --shadow-lg: 0 12px 28px rgba(7, 22, 52, .12), 0 28px 64px rgba(7, 22, 52, .10);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;      /* reference: 16px at every breakpoint */
  line-height: 1.8;     /* reference: 28.8px on 16px */
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Heading form is taken from the reference: weight 700 rather than 800,
   no negative tracking, and a notably loose 1.4 leading. The previous
   settings — 800 weight, -.022em, 1.12 leading — read as a much tighter,
   more compressed page than the reference does. */
h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  text-wrap: balance;
}

/* Reference: h1 60px, h2 36px, card/sub headings 18px, all at 1.4. */
h1 { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 1.45rem + .95vw, 2.25rem); }
h3 { font-size: 1.125rem; font-weight: 500; }
h4 { font-size: 1rem; font-weight: 500; }

p  { margin: 0 0 1.15rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pink-600); }

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

/* Must beat the display:block above, so hidden images really do disappear. */
[hidden] { display: none !important; }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.2rem; }
li { margin-bottom: .4rem; }
li:last-child { margin-bottom: 0; }

strong { color: var(--ink); font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

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

::selection { background: var(--pink-500); color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section--alt { background: var(--surface-2); }
.section--dark { background: var(--blue-900); color: #b9c6de; }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.skip-link {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--blue-600);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Section heading block */
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.075rem; color: var(--muted); margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pink-600);
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 2px;
  background: var(--pink-500);
  border-radius: 2px;
}
.section-head--center .eyebrow::before { display: none; }
.section--dark .eyebrow { color: var(--pink-400); }

/* Grids */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--blue-600);
  --btn-fg: #fff;
  --btn-bd: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  /* Reference button: 114x63 from 17px/19.2px padding on 16px text at
     weight 400 with no tracking. The previous rule set it smaller, bolder
     and tracked out, which the reference does not do. */
  padding: 17px 19px;
  border: 2px solid var(--btn-bd);
  border-radius: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.8;
  text-transform: uppercase;
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  filter: brightness(1.12);
}
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* Pink is the logo's secondary colour. It is deliberately not used for buttons:
   at full-button size it overwhelms the blue and reads as a different brand.
   Kept here in case a single pink call-to-action is ever wanted. */
.btn--pink   { --btn-bg: var(--pink-500); --btn-bd: var(--pink-500); }
.btn--pink:hover { --btn-bg: var(--pink-600); --btn-bd: var(--pink-600); }

.btn--ghost  { --btn-bg: transparent; --btn-fg: var(--blue-600); --btn-bd: var(--blue-100); }
.btn--ghost:hover { --btn-bd: var(--blue-600); }

.btn--white  { --btn-bg: #fff; --btn-fg: var(--blue-800); --btn-bd: #fff; }

.btn--outline-light {
  --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.35);
}
.btn--outline-light:hover { --btn-bd: #fff; }

.btn--wa { --btn-bg: #25d366; --btn-bd: #25d366; --btn-fg: #06331a; }
.btn--wa:hover { --btn-bg: #1fbe5a; --btn-bd: #1fbe5a; }

.btn--lg { padding: 21px 26px; font-size: 1rem; }
.btn--sm { padding: 11px 14px; font-size: .875rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  color: var(--blue-600);
}
.link-arrow::after {
  content: "→";
  transition: transform .2s var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--blue-900);
  color: #a9b8d4;
  font-size: .82rem;
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  min-height: 2.6rem;
  padding-block: .4rem;
}
.topbar__list { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin: 0; padding: 0; list-style: none; }

/* On phones the address and hours push the hero off screen. They stay in the
   footer and on the contact page; the top bar keeps only the phone numbers. */
@media (max-width: 860px) {
  .topbar__inner { justify-content: center; }
  .topbar__list--meta { display: none; }
  .topbar__list li:has(a[href^="mailto"]) { display: none; }
}
.topbar__list li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.topbar a { color: #d6e0f2; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--pink-400); }
.topbar svg { width: .95rem; height: .95rem; color: var(--pink-400); flex: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5.25rem;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
/* The logo is a wide lock-up with a fine-set strapline, so it needs more
   height than a compact mark would to stay legible. */
.brand img { height: clamp(2.6rem, 6vw, 3.6rem); width: auto; }
.brand__fallback { display: flex; flex-direction: column; line-height: 1.05; }
.brand__fallback[hidden] { display: none; }
.brand__fallback--light .brand__name { color: #fff; }
.brand__fallback--light { margin-bottom: 1.15rem; }
.brand__name {
  font-size: 1.3rem; font-weight: 900; color: var(--blue-600);
  letter-spacing: -.03em; text-transform: uppercase;
}
.brand__tag {
  font-size: .58rem; font-weight: 800; color: var(--pink-500);
  letter-spacing: .13em; text-transform: uppercase;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: .2rem;
  margin: 0; padding: 0;
  list-style: none;
}
.nav__menu > li { position: relative; margin: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .6rem .85rem;
  border-radius: var(--r-sm);
  color: var(--ink);
  /* Reference nav: 14px, weight 600, 1px tracking, uppercase. */
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link:hover { color: var(--blue-600); background: var(--blue-50); }
.nav__link[aria-current="page"] { color: var(--blue-600); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .85rem; right: .85rem; bottom: .15rem;
  height: 2px;
  background: var(--pink-500);
  border-radius: 2px;
}
.nav__caret { width: .6rem; height: .6rem; transition: transform .2s var(--ease); }
.has-drop:hover .nav__caret, .has-drop:focus-within .nav__caret { transform: rotate(180deg); }

.nav__drop {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  min-width: 18rem;
  margin: 0; padding: .55rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-drop:hover > .nav__drop,
.has-drop:focus-within > .nav__drop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__drop li { margin: 0; }
.nav__drop a {
  display: block;
  padding: .6rem .75rem;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}
.nav__drop a span {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: .1rem;
}
.nav__drop a:hover { background: var(--blue-50); color: var(--blue-600); }

.nav__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3.1rem; height: 3.1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--blue-600);
  cursor: pointer;
  color: #fff;
}
.nav__toggle span {
  position: relative;
  display: block;
  width: 1.15rem; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color .2s var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  .nav__toggle { display: inline-flex; }
  .nav__actions .btn--quote { display: none; }

  .nav__menu {
    /* Absolute, not fixed: the header's backdrop-filter makes it the
       containing block for fixed descendants, so `position: fixed` would
       size against the header rather than the viewport. Absolute against
       the sticky header gives the same result and stays correct. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    max-height: calc(100dvh - var(--header-h, 4.75rem));
    padding: 1rem var(--gutter) 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    /* Slide vertically, not horizontally — translating off to the right
       widens the document on small screens. */
    transform: translateY(-.75rem);
    opacity: 0;
    visibility: hidden;
    transition: transform .28s var(--ease), opacity .28s var(--ease), visibility .28s;
  }
  .nav__menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

  .nav__menu > li { border-bottom: 1px solid var(--line); }
  .nav__link { padding: 1rem .25rem; font-size: 1.05rem; width: 100%; }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__caret { margin-left: auto; }

  .nav__drop {
    position: static;
    opacity: 1; visibility: visible;
    transform: none;
    display: none;
    min-width: 0;
    margin: 0 0 .75rem;
    padding: .25rem 0 .25rem .75rem;
    border: 0; border-left: 2px solid var(--blue-100);
    border-radius: 0;
    box-shadow: none;
  }
  .has-drop.is-open .nav__drop { display: block; }
  .has-drop.is-open .nav__caret { transform: rotate(180deg); }

  .nav__mobile-cta { display: block; margin-top: 1.5rem; }
  .nav__mobile-cta .btn { width: 100%; margin-bottom: .6rem; }
}
@media (min-width: 1041px) {
  .nav__mobile-cta { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(32rem, 78vh, 46rem);
  padding-block: clamp(4rem, 10vw, 7rem);
  background: var(--blue-900);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(7,22,52,.94) 0%, rgba(7,22,52,.82) 42%, rgba(7,22,52,.42) 100%),
    linear-gradient(to top, rgba(7,22,52,.85), transparent 55%);
}
.hero__inner { position: relative; max-width: 46rem; }
.hero h1 { color: #fff; margin-bottom: 1.25rem; }
.hero h1 .accent {
  background: linear-gradient(transparent 62%, rgba(245,87,138,.55) 62%);
  padding-inline: .1em;
}
.hero__lede {
  font-size: clamp(1.05rem, .98rem + .45vw, 1.3rem);
  color: #cbd7ec;
  max-width: 40rem;
  margin-bottom: 2rem;
}
.hero .btn-row { margin-bottom: 2.75rem; }

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.75rem;
  padding: 0; margin: 0;
  list-style: none;
}
.hero__badges li {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .9rem;
  font-weight: 650;
  color: #dbe5fa;
}
.hero__badges svg { width: 1.1rem; height: 1.1rem; color: #7fb3f5; flex: none; }

/* Page hero (interior pages) */
.page-hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--blue-900);
  color: #b9c6de;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 30rem at 80% -10%, rgba(36,86,189,.55), transparent 65%),
    radial-gradient(40rem 24rem at 5% 110%, rgba(36,86,189,.35), transparent 70%);
}
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero__lede { font-size: 1.1rem; color: #cbd7ec; max-width: 55ch; margin-bottom: 0; }
.page-hero .btn-row { margin-top: 2rem; }

.breadcrumb { margin-bottom: 1.5rem; font-size: .85rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: flex; align-items: center; gap: .4rem; margin: 0; color: #93a4c4; }
.breadcrumb li + li::before { content: "/"; color: #4a5f8a; }
.breadcrumb a { color: #cbd7ec; text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { color: var(--pink-400); }
.breadcrumb [aria-current] { color: var(--pink-400); font-weight: 650; }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              border-color .28s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--body); font-size: .96rem; }
.card__body { flex: 1; }
.card__foot { margin-top: 1.35rem; }

/* Whole-card click target */
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.card__icon {
  display: grid;
  place-items: center;
  width: 3.4rem; height: 3.4rem;
  margin-bottom: 1.25rem;
  border-radius: var(--r-md);
  background: var(--blue-50);
  color: var(--blue-600);
}
.card__icon svg { width: 1.7rem; height: 1.7rem; }
.card--pink   .card__icon { background: var(--pink-50); color: var(--pink-600); }
.card--aqua   .card__icon { background: var(--aqua-50); color: var(--aqua-500); }

.card__list { margin: 1.1rem 0 0; padding: 0; list-style: none; }
.card__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .45rem;
  font-size: .9rem;
  color: var(--muted);
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--blue-500);
}

/* Numbered process steps */
.step { position: relative; padding-top: 1.25rem; }
.step__num {
  display: inline-grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}
.step h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.step p { font-size: .93rem; color: var(--muted); margin: 0; }
.section--dark .step p { color: #93a4c4; }
.section--dark .step__num { background: var(--blue-500); }

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.stat { text-align: center; }
.stat__num {
  display: block;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--blue-600);
}
.stat__label {
  display: block;
  margin-top: .5rem;
  font-size: .85rem;
  font-weight: 650;
  color: var(--muted);
}

/* Feature list with checkmarks */
.checks { margin: 0; padding: 0; list-style: none; }
.checks li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .85rem;
  font-size: .98rem;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: .12em;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317429b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / .85rem no-repeat;
}
.section--dark .checks li::before { background-color: rgba(36,86,189,.28); }
.section--dark .checks li { color: #c6d2e8; }

/* --------------------------------------------------------------------------
   8. Media / gallery
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-3);
}
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--16x9{ aspect-ratio: 16 / 9; }

/* Branded placeholder shown when a photo has not been dropped in yet.
   main.js adds .is-missing when an <img> fails to load. */
.media.is-missing img { opacity: 0; }
.media.is-missing::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .5rem;
  padding: 1.5rem;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8ea1c4;
  background:
    linear-gradient(135deg, var(--blue-50) 0%, var(--surface-3) 55%, var(--pink-50) 100%);
  border: 1px dashed #c3d0e8;
  border-radius: inherit;
}

.gallery { display: grid; gap: clamp(.85rem, 1.6vw, 1.25rem); }
.gallery--tiles {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* One tile shape for every photo. The source images run from 3:4 portrait to
   16:9 landscape, and a square is the shape that crops the least off the worst
   case in either direction. Change this one value to reshape every gallery. */
.gallery--tiles .g-item { aspect-ratio: 1 / 1; }

.g-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 0;
  padding: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.g-item:hover img { transform: scale(1.06); }
.g-item figcaption,
.g-item__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem .95rem .85rem;
  color: #fff;
  font-size: .85rem;
  font-weight: 650;
  text-align: left;
  background: linear-gradient(to top, rgba(7,22,52,.9), transparent);
}
.g-item.is-missing img { opacity: 0; }
.g-item.is-missing::before {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 1rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8ea1c4;
  background: linear-gradient(135deg, var(--blue-50), var(--pink-50));
  border: 1px dashed #c3d0e8;
  border-radius: inherit;
}

/* Split section: media + copy */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
@media (max-width: 880px) {
  .split--reverse .split__media { order: 0; }
}
.split__media { position: relative; }
.split__media .media { box-shadow: var(--shadow-lg); }

/* Floating accent card over media */
.float-card {
  position: absolute;
  right: -1rem; bottom: -1.5rem;
  max-width: 15rem;
  padding: 1.15rem 1.35rem;
  background: var(--blue-600);
  color: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.float-card strong { display: block; color: #fff; font-size: 1.5rem; line-height: 1; }
.float-card span { display: block; margin-top: .35rem; font-size: .82rem; font-weight: 600; opacity: .92; }
@media (max-width: 560px) { .float-card { right: 0; bottom: -1rem; padding: .9rem 1.1rem; } }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(7, 22, 52, .93);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.lightbox__cap {
  margin-top: 1rem;
  text-align: center;
  color: #cbd7ec;
  font-size: .92rem;
  font-weight: 600;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.35rem;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--pink-500); border-color: var(--pink-500); }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav--prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox__nav--prev { left: .5rem; }
  .lightbox__nav--next { right: .5rem; }
}

/* --------------------------------------------------------------------------
   9. CTA bands
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
  background: linear-gradient(120deg, var(--blue-700) 0%, var(--blue-600) 45%, var(--blue-500) 100%);
  color: #dbe5fa;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Pink over blue reads as purple, so this stays in the blue family. */
  background: radial-gradient(38rem 22rem at 88% 20%, rgba(120,170,255,.28), transparent 68%);
}
.cta-band h2 { color: #fff; }
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.cta-band__copy { max-width: 40rem; }
.cta-band__copy p { margin-bottom: 0; font-size: 1.075rem; }

/* Emergency strip */
.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.25rem;
  padding: 1rem var(--gutter);
  background: var(--blue-600);
  color: #fff;
  text-align: center;
  font-weight: 650;
  font-size: .95rem;
}
.strip a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }
.strip a:hover { color: var(--blue-900); }

/* --------------------------------------------------------------------------
   10. Accordion (FAQ) — uses native <details>
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 1.5rem; height: 1.5rem;
  margin-top: .15rem;
  border-radius: 50%;
  background: var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317429b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / .8rem no-repeat;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(135deg); background-color: var(--pink-50); }
.faq__item summary:hover { color: var(--blue-600); }
.faq__answer { padding: 0 0 1.5rem; max-width: 68ch; color: var(--body); }
.faq__answer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.form-card {
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.1rem;
}
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 700; color: var(--ink); }
.field .req { color: var(--pink-600); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .95rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              box-shadow .18s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7793' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 1.05rem;
  padding-right: 2.6rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(36, 86, 189, .14);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: var(--pink-500); }

.form-note { margin-top: 1rem; font-size: .82rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-status {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: .9rem;
  font-weight: 650;
  display: none;
}
.form-status.is-ok  { display: block; background: #e7f8ee; color: #10693c; border: 1px solid #b6e6cb; }
.form-status.is-err { display: block; background: var(--pink-50); color: #a41f47; border: 1px solid #f8c3d5; }

/* --------------------------------------------------------------------------
   12. Contact blocks
   -------------------------------------------------------------------------- */
.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-list li {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list .ci {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-sm);
  background: var(--blue-50);
  color: var(--blue-600);
}
.contact-list .ci svg { width: 1.3rem; height: 1.3rem; }
.contact-list h4 { margin-bottom: .2rem; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); font-weight: 800; }
.contact-list p { margin: 0; font-size: 1rem; color: var(--ink); font-weight: 600; }
.contact-list a { color: var(--ink); text-decoration: none; }
.contact-list a:hover { color: var(--blue-600); }

.map-embed {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--surface-3);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------------------------
   13. Prose (long-form service copy)
   -------------------------------------------------------------------------- */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2rem; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: .55rem;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: .1rem; top: .62em;
  width: .5rem; height: .5rem;
  border-radius: 2px;
  background: var(--blue-500);
  transform: rotate(45deg);
}

.callout {
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
  background: var(--blue-50);
  border-left: 4px solid var(--blue-600);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout--pink { background: var(--pink-50); border-left-color: var(--pink-500); }

/* Sticky sidebar */
.layout-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 980px) {
  .layout-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; }
}
.sidebar__inner { position: sticky; top: 7rem; display: grid; gap: 1.25rem; }
.sidebar-card {
  padding: 1.6rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.sidebar-card--dark { background: var(--blue-900); border-color: var(--blue-800); color: #b9c6de; }
.sidebar-card--dark h3 { color: #fff; }
.sidebar-card h3 { font-size: 1.1rem; }
.sidebar-nav { margin: 0; padding: 0; list-style: none; }
.sidebar-nav li { margin: 0; border-bottom: 1px solid var(--line); }
.sidebar-nav li:last-child { border-bottom: 0; }
.sidebar-nav a {
  display: block;
  padding: .7rem 0;
  font-size: .93rem;
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
}
.sidebar-nav a:hover { color: var(--blue-600); }
.sidebar-nav a[aria-current="page"] { color: var(--pink-600); }

/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.quote__stars { display: flex; gap: .15rem; margin-bottom: 1rem; color: var(--pink-500); }
.quote__stars svg { width: 1.05rem; height: 1.05rem; }
.quote blockquote { margin: 0 0 1.35rem; font-size: 1rem; color: var(--body); flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: .8rem; }
.quote__avatar {
  display: grid; place-items: center;
  flex: none;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
}
.quote__name { font-weight: 750; color: var(--ink); font-size: .93rem; }
.quote__meta { font-size: .82rem; color: var(--muted); }

/* Logo / trust strip */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2.5rem;
  padding: 1.5rem 0;
}
.trust-strip span {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   15. Coverage / areas
   -------------------------------------------------------------------------- */
.pill-list { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.pill-list li {
  margin: 0;
  padding: .5rem 1rem;
  border-radius: var(--r-full);
  background: #fff;
  border: 1px solid var(--line);
  font-size: .87rem;
  font-weight: 650;
  color: var(--body);
}
.section--dark .pill-list li {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: #cbd7ec;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
/* Bottom padding keeps the last row clear of the floating WhatsApp button. */
.site-footer { background: var(--blue-900); color: #93a4c4; font-size: .93rem;
  padding-bottom: 4rem; }
.site-footer a { color: #cbd7ec; text-decoration: none; }
.site-footer a:hover { color: var(--pink-400); }

.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer__brand { grid-column: span 1; max-width: 22rem; }

/* Explicit columns at desktop so the contact block sits alongside the others
   instead of wrapping under the brand and leaving a hole. */
@media (min-width: 900px) {
  .footer__top { grid-template-columns: 1.7fr 1fr 1fr 1.3fr; }
}
/* The wordmark is deep blue, so it needs a light panel to read against the
   navy footer. */
.footer__brand img { height: 3.6rem; width: auto; margin-bottom: 1.15rem; background: #fff;
  padding: .5rem .75rem; border-radius: var(--r-sm); }
.footer__brand p { font-size: .92rem; line-height: 1.7; }

.footer h4 {
  margin-bottom: 1.1rem;
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list li { margin-bottom: .6rem; }

.footer__contact li { display: flex; gap: .65rem; margin-bottom: .9rem; }
.footer__contact svg { width: 1.05rem; height: 1.05rem; margin-top: .28rem; color: var(--pink-400); flex: none; }

.social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.social a {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease);
}
.social a:hover { background: var(--pink-500); border-color: var(--pink-500); transform: translateY(-2px); }
.social svg { width: 1.1rem; height: 1.1rem; color: #fff; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .85rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer__legal li { margin: 0; }

/* --------------------------------------------------------------------------
   17. Floating WhatsApp
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.25rem;
  border-radius: var(--r-full);
  background: #25d366;
  color: #06331a;
  font-weight: 750;
  font-size: .92rem;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(37, 211, 102, .42);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-float:hover { transform: translateY(-3px); color: #06331a; box-shadow: 0 12px 32px rgba(37,211,102,.5); }
.wa-float svg { width: 1.35rem; height: 1.35rem; flex: none; }
@media (max-width: 520px) {
  .wa-float span { display: none; }
  .wa-float { padding: .95rem; }
}

/* --------------------------------------------------------------------------
   18. Motion
   -------------------------------------------------------------------------- */
/* Scoped to .js so content is visible by default. If JavaScript is disabled
   or fails to run, nothing is ever left stuck at opacity:0. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .wa-float, .cta-band, .strip, .topbar { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .section { padding-block: 1.25rem; }
}

/* ==========================================================================
   20. Full-bleed hero slideshow
   A single word over a rotating photo, in the style of the reference site.
   ========================================================================== */
.hero-slides {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(28rem, 82svh, 50rem);
  overflow: hidden;
  background: var(--blue-900);
  isolation: isolate;
}

.hero-slides__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero-slides__slide.is-active { opacity: 1; }
.hero-slides__slide img { width: 100%; height: 100%; object-fit: cover; }

/* The reference lays white text straight onto the photo. A restrained scrim
   keeps it readable on light frames without turning the image murky. */
.hero-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(7,22,52,.45), transparent 75%),
    linear-gradient(to bottom, rgba(7,22,52,.28), rgba(7,22,52,.10) 40%, rgba(7,22,52,.42));
  pointer-events: none;
}

.hero-slides__word {
  position: relative;
  z-index: 2;
  margin: 0;
  /* All words share one grid cell so they cross-fade in place. */
  display: grid;
  place-items: center;
  padding-inline: var(--gutter);
  font-size: clamp(2.75rem, 11vw, 7rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.015em;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
.hero-slides__word span {
  grid-area: 1 / 1;
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.hero-slides__word span.is-active { opacity: 1; transform: none; }

/* Screen-reader heading: the rotating words are decorative on their own. */
.hero-slides__heading {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hero-slides__scroll {
  position: absolute;
  z-index: 2;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: var(--blue-600);
  transition: background-color .2s var(--ease);
}
.hero-slides__scroll:hover { background: rgba(255,255,255,.22); color: #fff; }
.hero-slides__scroll svg { width: 1.1rem; height: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  .hero-slides__slide { transition: none; }
  .hero-slides__word span { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   21. Section heading, reference style

   Measured off the reference rather than judged by eye. Its lead is an
   ordinary 16px paragraph in the brand colour with the words typed in
   caps — not a tracked-out small label. Its heading is 36px at 500 on
   desktop and grows to 48px on phones, which is the opposite of the usual
   responsive direction and the main reason the previous sizing did not
   look like the reference on either end.
   ========================================================================== */
.head-lead {
  margin-bottom: .35rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--blue-600);
  text-align: center;
}
.head-big {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
  font-size: 3rem;      /* phones */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  color: var(--ink);
}
@media (min-width: 600px) {
  .head-big { font-size: 2.25rem; line-height: 1.4; }
}
.head-big + .head-sub {
  max-width: 60ch;
  margin: -2rem auto clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
  color: var(--muted);
  font-size: 1.075rem;
}

/* ==========================================================================
   22. Feature cards — photo with an overlapping panel
   ========================================================================== */
.feature-list { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 900px) {
  .feature-list { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
}

.feature {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* The reference's photo is a true square (363x363 in a 363-wide column). */
.feature__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-3);
}
.feature__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.feature:hover .feature__media img { transform: scale(1.04); }

/* Panel geometry, measured on the reference at a 363px-wide column:
   inset 20px from each side of the photo, overlapping its bottom edge by
   27px, 30px of padding, and a single soft drop shadow. The previous
   values overlapped by 52px and sat on a heavier two-layer shadow. */
.feature__body {
  position: relative;
  z-index: 2;
  margin: -1.7rem 1.25rem 0;
  padding: 1.875rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  flex: 1;
}

/* The chip is centred on the panel's top edge — half above, half below —
   and starts 30px in from the panel's left edge. */
.feature__chip {
  position: absolute;
  top: -.8rem;
  left: 1.875rem;
  padding: 3px 6px;
  background: var(--blue-600);
  color: #fff;
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Reference card title: 18px, weight 400, 1.4 leading, #111. */
.feature__body h3 {
  margin-bottom: .75rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  color: #111;
}
.feature__body p { color: var(--body); font-size: .98rem; margin-bottom: 1.1rem; }
.feature__body ul { margin: 0 0 1.35rem; padding: 0; list-style: none; }
.feature__body li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: .4rem;
  font-size: .93rem;
  color: var(--muted);
}
.feature__body li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: .4rem; height: .4rem;
  border-radius: 50%;
  background: var(--blue-500);
}
.feature__link::after { content: ""; position: absolute; inset: 0; }

/* Brand block, as on the reference footer */
.brand-block {
  display: grid;
  place-items: center;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--blue-600);
  text-align: center;
}
.brand-block img { max-width: min(22rem, 70vw); height: auto; }
.brand-block p {
  margin: 1.5rem auto 0;
  max-width: 44ch;
  color: #dbe5fa;
  font-size: 1.02rem;
}

/* On phones the reference runs its cards edge to edge, so the photo bleeds
   past the page gutter and only the white panel stays inset. */
@media (max-width: 899px) {
  .feature-list {
    margin-inline: calc(var(--gutter) * -1);
  }
  /* The reference keeps the square crop on phones too; only the panel
     inset narrows (24px against 20px at desktop widths). */
  .feature__body { margin-inline: 1.5rem; }
  .feature__chip { left: 1.875rem; }
}