/* ===========================================================================
   ASJEM POOLS - visual system v2
   ---------------------------------------------------------------------------
   Direction: let the photography carry the page. The old design put every
   section in the same rounded card on the same tinted background; this one
   uses full-bleed imagery, full-width colour bands and one warm display face
   so the page has a rhythm instead of a repeated shape.

   Palette is unchanged - the same navy, blue and gold as before.
   Display face is Fraunces, which was already loaded and barely used: a warm
   serif reads as a family business, where a geometric sans reads as a template.
   =========================================================================== */

:root {
  --navy-950: #071834;
  --navy-900: #0b2545;
  --navy-800: #123a63;
  --navy-700: #1a4a7a;
  --blue-600: #1c7ed6;
  --blue-500: #2f9bef;
  --sky-300: #9fd1f5;
  --blue-100: #e4f2fc;
  --gold-600: #a9821c;
  --gold-500: #c9a227;
  --gold-300: #e6c866;
  --gold-100: #faf3dd;
  --white: #ffffff;
  --paper: #fbfcfd;
  --gray-50: #f4f8fb;
  --gray-100: #e9f0f6;
  --gray-300: #cbd8e3;
  --gray-600: #5b6b7c;
  --gray-700: #384a5c;
  --ink: #0d1b2a;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'Poppins', 'Segoe UI', sans-serif;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(7,24,52,.05), 0 2px 8px rgba(7,24,52,.06);
  --shadow-md: 0 12px 32px rgba(7,24,52,.12);
  --shadow-lg: 0 28px 64px rgba(7,24,52,.22);

  --container: 1200px;
  --gutter: 28px;
  --header-h: 76px;
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 3px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--tight { max-width: 900px; }
.measure { max-width: 62ch; }

/* ---------------------------------------------------------- typography */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; margin: 0 0 .5em; color: var(--navy-950); }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.15rem); }
h2 { font-size: clamp(1.95rem, 3.7vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.25; }
h4 { font-family: var(--font-ui); font-size: 1.02rem; font-weight: 650; margin: 0 0 .4em; color: var(--navy-900); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* The one repeated device across the site: a gold dot, then small caps.
   It marks the start of a section without needing a box or a divider. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-ui); font-size: .74rem; font-weight: 650;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); flex: none; }
.on-dark .eyebrow, .band--navy .eyebrow, .hero .eyebrow { color: var(--gold-300); }

.lede { font-size: 1.11rem; line-height: 1.68; color: var(--gray-700); }
.on-dark .lede, .band--navy .lede { color: #c4d7e8; }
.small { font-size: .875rem; }
.muted { color: var(--gray-600); }
.on-dark .muted, .band--navy .muted { color: #9fb6cb; }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-ui); font-size: .95rem; font-weight: 600;
  padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; flex: none; }
/* Any inline arrow in link text, not just inside a button. Without this the
   SVG has no intrinsic size and expands to fill its container. */
.svc__more svg, .inline-arrow svg { width: 14px; height: 14px; flex: none; }
.btn--gold { background: var(--gold-500); color: var(--navy-950); box-shadow: 0 8px 22px rgba(169,130,28,.3); }
.btn--gold:hover { background: var(--gold-300); color: var(--navy-950); box-shadow: 0 14px 30px rgba(169,130,28,.38); }
.btn--primary { background: var(--blue-600); color: #fff; box-shadow: 0 8px 22px rgba(28,126,214,.28); }
.btn--primary:hover { background: var(--blue-500); color: #fff; }
.btn--ghost { border-color: rgba(255,255,255,.42); color: #fff; background: rgba(255,255,255,.06); }
.btn--ghost:hover { background: rgba(255,255,255,.15); border-color: #fff; color: #fff; }
.btn--outline { border-color: var(--gray-300); color: var(--navy-900); background: transparent; }
.btn--outline:hover { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.btn--sm { padding: 10px 18px; font-size: .87rem; }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------- bands */
/* Sections are full-width colour bands rather than cards floating on a tint.
   Alternating white / soft / navy gives the page a rhythm you can feel while
   scrolling, and costs nothing to render. */
.band { padding: clamp(64px, 8vw, 108px) 0; }
.band--soft { background: var(--gray-50); }
.band--navy { background: var(--navy-950); color: #dbe7f2; }
.band--navy h2, .band--navy h3 { color: #fff; }
.band--tight { padding: clamp(44px, 5vw, 70px) 0; }

.section-head { max-width: 720px; margin-bottom: clamp(34px, 4vw, 54px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--gray-600); font-size: 1.06rem; }
.band--navy .section-head p { color: #a9c1d6; }

/* --------------------------------------------------------------- header */
/* Transparent over the hero photo, solid once you scroll. One row, and only
   what a visitor actually needs: who this is, and how to reach them. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid { background: rgba(255,255,255,.97); backdrop-filter: saturate(1.4) blur(10px); border-bottom-color: var(--gray-100); box-shadow: 0 1px 20px rgba(7,24,52,.07); }
.nav-row { display: flex; align-items: center; gap: 26px; width: 100%; }
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand img { height: 38px; width: auto; }
.brand__name { font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.05; color: #fff; }
.brand__name span { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); margin-top: 3px; }
.is-solid .brand__name { color: var(--navy-950); }
.is-solid .brand__name span { color: var(--gold-600); }

.nav-links { display: flex; align-items: center; gap: 3px; margin: 0 auto 0 8px; padding: 0; list-style: none; }
.nav-links a {
  display: block; padding: 9px 13px; border-radius: 999px;
  font-family: var(--font-ui); font-size: .9rem; font-weight: 550;
  color: rgba(255,255,255,.9); text-decoration: none; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.nav-links a:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.nav-links a.is-active { color: var(--gold-300); }
.is-solid .nav-links a { color: var(--gray-700); }
.is-solid .nav-links a:hover { background: var(--gray-100); color: var(--navy-950); }
.is-solid .nav-links a.is-active { color: var(--blue-600); }

.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-phone { font-family: var(--font-ui); font-weight: 650; font-size: .92rem; color: #fff; padding: 9px 4px; }
.is-solid .nav-phone { color: var(--navy-950); }
.nav-phone:hover { text-decoration: none; color: var(--gold-300); }
.is-solid .nav-phone:hover { color: var(--blue-600); }

.nav-toggle {
  display: none; width: 42px; height: 42px; border: 0; background: transparent;
  cursor: pointer; padding: 0; place-items: center; border-radius: 50%;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 21px; height: 2px; background: #fff; border-radius: 2px; transition: transform .22s ease, opacity .22s ease;
}
.is-solid .nav-toggle span, .is-solid .nav-toggle span::before, .is-solid .nav-toggle span::after { background: var(--navy-950); }
.nav-toggle span { position: relative; }
.nav-toggle span::before { content: ""; position: absolute; top: -7px; }
.nav-toggle span::after { content: ""; position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: #fff; padding: 10px 20px 22px;
    box-shadow: var(--shadow-md); display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { color: var(--navy-900); padding: 13px 6px; border-radius: var(--r-sm); border-bottom: 1px solid var(--gray-100); }
  .nav-toggle { display: grid; }
  .nav-phone { display: none; }
}
@media (max-width: 420px) {
  .nav-actions .btn { padding: 10px 14px; font-size: .82rem; }
  .brand img { height: 32px; }
}

/* ----------------------------------------------------------------- hero */
/* Full-bleed photograph, navy wash over it, content sitting on the image.
   No card, no rounded container - the photo IS the section. */
.hero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(7,24,52,.88) 0%, rgba(7,24,52,.62) 38%, rgba(7,24,52,.18) 68%, rgba(7,24,52,.3) 100%),
    linear-gradient(to bottom, rgba(7,24,52,.5) 0%, rgba(7,24,52,0) 30%, rgba(7,24,52,.45) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding: calc(var(--header-h) + 34px) 0 0; }
.hero h1 { color: #fff; max-width: 17ch; margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--gold-300); }
.hero__lede { color: #cfe0ee; font-size: clamp(1.02rem, 1.4vw, 1.18rem); max-width: 50ch; margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 46px; }

/* Proof strip pinned to the bottom of the hero image. */
.hero__proof {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.16);
  background: rgba(7,24,52,.5); backdrop-filter: blur(6px);
}
.proof-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.proof-row > div { padding: 22px 18px; border-left: 1px solid rgba(255,255,255,.12); }
.proof-row > div:first-child { border-left: 0; padding-left: 0; }
.proof__k { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 1; }
.proof__k .star { color: var(--gold-300); }
.proof__v { font-family: var(--font-ui); font-size: .76rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #9fb6cb; margin-top: 7px; }
@media (max-width: 780px) {
  .proof-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .proof-row > div { border-left: 0; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.1); }
  .proof-row > div:nth-child(-n+2) { border-top: 0; }
  .proof-row > div:nth-child(even) { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 700px) {
  .hero { min-height: 0; }
  .hero__inner { padding-top: calc(var(--header-h) + 40px); padding-bottom: 8px; }
  .hero__media::after { background: linear-gradient(to bottom, rgba(7,24,52,.86) 0%, rgba(7,24,52,.62) 45%, rgba(7,24,52,.9) 100%); }
  .hero h1 { max-width: none; }
}

/* -------------------------------------------------------- service cards */
/* Photo on top with the label sitting on the image, copy underneath. Reads
   as a catalogue rather than a grid of boxes. */
.card-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.svc {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.svc:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gray-300); text-decoration: none; }
.svc__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.3,1); }
.svc:hover .svc__media img { transform: scale(1.05); }
.svc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,24,52,.82) 0%, rgba(7,24,52,.12) 52%, transparent 100%); }
.svc__label {
  position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 2;
  font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; color: #fff; line-height: 1.2;
}
.svc__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.svc__body p { color: var(--gray-600); font-size: .94rem; margin: 0; flex: 1; }
.svc__more { font-family: var(--font-ui); font-size: .87rem; font-weight: 650; color: var(--blue-600); display: inline-flex; align-items: center; gap: 6px; transition: gap .18s ease; }
.svc:hover .svc__more { gap: 10px; }

/* ------------------------------------------------------- split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } }

/* ------------------------------------------------------------- chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.chip {
  font-family: var(--font-ui); font-size: .84rem; font-weight: 600;
  padding: 8px 15px; border-radius: 999px;
  background: var(--blue-100); color: var(--navy-800);
}
.band--navy .chip, .on-dark .chip { background: rgba(255,255,255,.1); color: #dbe7f2; }

/* ------------------------------------------------------------- footer */
.site-footer { background: var(--navy-950); color: #9fb6cb; padding: clamp(52px, 6vw, 78px) 0 30px; }
.footer-grid { display: grid; grid-template-columns: minmax(0,1.6fr) repeat(2, minmax(0,1fr)); gap: 40px; }
.site-footer h4 { color: #fff; font-family: var(--font-ui); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 9px 0; }
.site-footer a { color: #9fb6cb; font-size: .93rem; }
.site-footer a:hover { color: #fff; }
.footer-brand img { height: 40px; width: auto; margin-bottom: 16px; }
.footer-bottom {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .82rem; color: #7c93a9;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: minmax(0,1fr); gap: 30px; } }

/* --------------------------------------------------------- call bar */
.call-bar {
  position: fixed; inset: auto 0 0 0; z-index: 55; display: none;
  align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 18px; background: var(--navy-950); color: #fff;
  border-top: 1px solid rgba(255,255,255,.12);
}
.call-bar strong { font-family: var(--font-ui); }
@media (max-width: 820px) { .call-bar { display: flex; } body { padding-bottom: 66px; } }

/* ------------------------------------------------------------ skip link */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 11px 18px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--navy-950); color: #fff; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; }


/* ------------------------------------------------------ before & after */
/* The signature moment. Two photographs of the same pool, side by side, the
   labels sitting on the images rather than under them so the pair reads as one
   object. On a phone they stack and stay in before-then-after order. */
.ba {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  background: var(--navy-900);
}
.ba figure { margin: 0; position: relative; }
.ba img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ba figcaption {
  position: absolute; left: 14px; top: 14px;
  font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(7,24,52,.82); color: #fff; backdrop-filter: blur(4px);
}
.ba figure:last-child figcaption { background: var(--gold-500); color: var(--navy-950); }
.ba__note { margin-top: 14px; font-size: .88rem; color: var(--gray-600); text-align: center; }
.band--navy .ba__note { color: #9fb6cb; }
@media (max-width: 620px) { .ba { grid-template-columns: 1fr; } }

/* --------------------------------------------------- header on small phones */
/* The header is position:fixed, so when its contents are too wide they spill
   off the side WITHOUT creating a page scrollbar - it looks broken but no
   overflow test catches it. The tagline is the first thing to go. */
@media (max-width: 620px) {
  .brand__name span { display: none; }
  .nav-row { gap: 12px; }
  .nav-actions { gap: 7px; }
}
@media (max-width: 430px) {
  .brand img { height: 30px; }
  .brand__name { font-size: .92rem; }
  .nav-actions .btn { padding: 9px 13px; font-size: .8rem; }
  .nav-toggle { width: 38px; height: 38px; }
}
/* iPhone SE and similar: the quote button leaves with the tagline. Calling is
   still one tap away in the bar pinned to the bottom of every page. */
@media (max-width: 360px) {
  :root { --gutter: 18px; }
  .nav-actions .btn { display: none; }
  .brand__name { font-size: .88rem; }
}

/* ------------------------------------------------------- water texture */
/* A faint caustics pattern on the dark bands, generated procedurally so it
   tiles exactly and claims nothing - it is decoration, not a photograph of
   anyone's pool. Kept very low opacity: you should feel it, not see it. */
.band--navy { position: relative; overflow: hidden; }
.band--navy::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../assets/img/water-caustics.png");
  background-size: 560px 560px;
  opacity: .07;
  mix-blend-mode: screen;
  pointer-events: none;
}
.band--navy > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .band--navy::before { animation: drift 48s linear infinite; }
}
@keyframes drift {
  from { background-position: 0 0; }
  to   { background-position: 560px 280px; }
}

/* ------------------------------------------------------------ page hero */
/* The same idea as the home hero, at about a third of the height: photograph,
   navy wash, title sitting on it. Keeps every page in one language. */
.page-hero { position: relative; display: flex; align-items: flex-end; min-height: 360px; overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(7,24,52,.9) 0%, rgba(7,24,52,.66) 46%, rgba(7,24,52,.34) 100%),
    linear-gradient(to bottom, rgba(7,24,52,.6) 0%, rgba(7,24,52,.1) 40%, rgba(7,24,52,.55) 100%);
}
.page-hero__inner { position: relative; z-index: 2; padding: calc(var(--header-h) + 54px) 0 52px; }
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.2vw, 3.3rem); max-width: 20ch; margin-bottom: 14px; }
.page-hero__lede { color: #cfe0ee; font-size: 1.08rem; max-width: 56ch; margin: 0; }
/* Interior page banner, no photograph.
   Every photo in this library tops out around 1200px, and a full-bleed banner
   needs 2880 on a retina screen - so every interior banner was being stretched
   2.4x and looked soft. Rather than ship blurry photos, interior pages get the
   brand gradient plus the tiling caustics texture, which is sharp at any size
   because it repeats. Photography stays on the homepage and in the content
   blocks, where the same files are genuinely sharp. */
.page-hero--tint { background: var(--navy-950); }
.page-hero--tint::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/img/water-caustics.png");
  background-size: 560px 560px; opacity: .06; mix-blend-mode: screen;
}
.page-hero--tint::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 150% at 12% 0%, rgba(26,74,122,.55) 0%, rgba(7,24,52,0) 62%),
    linear-gradient(to bottom, rgba(7,24,52,0) 40%, rgba(7,24,52,.55) 100%);
}
.page-hero--tint .page-hero__inner { z-index: 2; }

.crumb { font-family: var(--font-ui); font-size: .8rem; color: #9fb6cb; margin-bottom: 14px; }
.crumb a { color: var(--gold-300); }

/* ------------------------------------------------- content-page components */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0,1fr); } }

.card {
  background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
}
.band--soft .card { background: #fff; }
.band--navy .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #dbe7f2; }
/* Card icon badge. This class was in the markup on three pages but had no rule,
   so the SVGs rendered at their raw size and the numbered process steps came out
   as bare digits. One badge treatment covers both: an icon sits centred inside
   it, a step number sits centred as display type. */
.card__icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px; flex: none;
  background: var(--blue-100); color: var(--blue-600);
  font-family: var(--font-display); font-size: 1.22rem; font-weight: 600;
  line-height: 1;
}
.card__icon svg { width: 22px; height: 22px; display: block; }
.band--navy .card__icon {
  background: rgba(255,255,255,.09); color: var(--gold-300);
}

.card h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
.card-pad { padding: 30px; }
.center { text-align: center; }
.mt-3 { margin-top: 24px; }

/* Testimonials read as quotes, not boxes. */
.testimonial { border-left: 3px solid var(--gold-500); padding: 4px 0 4px 22px; }
.testimonial p { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.5; color: var(--navy-900); }
.band--navy .testimonial p { color: #eaf2f9; }
.testimonial__who { font-family: var(--font-ui); font-weight: 650; font-size: .88rem; color: var(--navy-800); margin-top: 8px; }
.testimonial__where { font-family: var(--font-ui); font-size: .82rem; color: var(--gray-600); }
.band--navy .testimonial__who { color: #fff; }
.band--navy .testimonial__where { color: #9fb6cb; }

.city-card {
  background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.city-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.city-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.city-card p { font-size: .9rem; color: var(--gray-600); margin: 0; }

/* FAQ - a plain list of questions, no accordion needed. */
.faq-item { border-top: 1px solid var(--gray-300); padding: 26px 0; }
.faq-item:first-of-type { border-top: 0; padding-top: 0; }
.faq-item h3 { font-size: 1.18rem; margin-bottom: 10px; }
.faq-body { color: var(--gray-700); }
.faq-body p:last-child { margin-bottom: 0; }

/* Forms */
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
@media (max-width: 620px) { .form-row { grid-template-columns: minmax(0,1fr); } }
.field { margin-bottom: 16px; }
.field label {
  display: block; font-family: var(--font-ui); font-size: .84rem; font-weight: 650;
  color: var(--navy-900); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: .95rem;
  border: 1.5px solid var(--gray-300); border-radius: var(--r-sm);
  background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(47,155,239,.18);
}
.field textarea { resize: vertical; min-height: 110px; }
.form-success { display: none; margin-top: 14px; padding: 13px 16px; border-radius: var(--r-sm); background: var(--blue-100); color: var(--navy-800); font-size: .92rem; }
.form-success.show { display: block; }

/* Gallery grid + lightbox links carried over from the old build */
.gallery-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gallery-grid figure { margin: 0; }
.gallery-grid a { display: block; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .45s cubic-bezier(.2,.8,.3,1); }
.gallery-grid a:hover img { transform: scale(1.04); }
.gallery-grid figcaption { margin-top: 8px; font-size: .84rem; color: var(--gray-600); }
.band--navy .gallery-grid figcaption { color: #9fb6cb; }

/* Before/after sliders on the gallery page */
.ba-slider-wrap { margin: 0 auto; }
.ba-slider { position: relative; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow-md); }
.ba-slider__after, .ba-slider__before { position: absolute; inset: 0; }
.ba-slider__before { clip-path: inset(0 50% 0 0); }
.ba-slider img { width: 100%; height: 100%; object-fit: cover; }
.ba-slider__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-slider__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.4); pointer-events: none; }
.ba-slider__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.3);
}
.ba-slider__label {
  position: absolute; top: 12px; z-index: 3; font-family: var(--font-ui);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; pointer-events: none;
}
.ba-slider__label--before { left: 12px; background: rgba(7,24,52,.82); color: #fff; }
.ba-slider__label--after  { right: 12px; background: var(--gold-500); color: var(--navy-950); }
.ba-caption { margin-top: 12px; font-size: .88rem; color: var(--gray-600); text-align: center; }
.band--navy .ba-caption { color: #9fb6cb; }

.shared-collage { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.shared-collage figure { margin: 0; }
.shared-collage img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow-sm); }
.shared-collage figcaption { margin-top: 8px; font-family: var(--font-ui); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-600); }
@media (max-width: 620px) { .shared-collage { grid-template-columns: minmax(0,1fr); } }

.rating-banner {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--gold-100); border: 1px solid var(--gold-300); border-radius: var(--r);
  padding: 20px 24px; margin-bottom: 40px;
}
.rating-banner__score { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; color: var(--navy-950); line-height: 1; }
.rating-banner__stars { color: var(--gold-600); letter-spacing: 2px; }

.pull-quote { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.5; color: var(--navy-900); border-left: 3px solid var(--gold-500); padding-left: 20px; }
.social-row a {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; font-weight: 700; text-decoration: none;
}
.social-row a:hover { background: var(--blue-600); }
.tiny { font-size: .78rem; }
.hero__photo img { border-radius: var(--r-lg); box-shadow: var(--shadow-md); }

/* ------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 32px; background: rgba(7,24,52,.94); backdrop-filter: blur(4px);
}
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--r); box-shadow: var(--shadow-lg); }
.lightbox__x {
  position: absolute; top: 18px; right: 22px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox__x:hover { background: rgba(255,255,255,.25); }

/* --------------------------------------------------------- FAQ accordion */
/* Built on <details>, so it opens and closes with no JavaScript at all and
   still works if scripts fail. The default triangle is replaced with a plus
   that rotates into a minus. */
details.faq-item { border-top: 1px solid var(--gray-300); padding: 0; }
details.faq-item:first-of-type { border-top: 0; }
details.faq-item > summary {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.14rem; font-weight: 600;
  line-height: 1.35; color: var(--navy-950);
}
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::after {
  content: ""; flex: none; width: 20px; height: 20px; margin-left: auto; margin-top: 3px;
  background:
    linear-gradient(var(--gold-600), var(--gold-600)) center/100% 2px no-repeat,
    linear-gradient(var(--gold-600), var(--gold-600)) center/2px 100% no-repeat;
  transition: transform .22s ease;
}
details.faq-item[open] > summary::after { transform: rotate(90deg); background-size: 100% 2px, 0 0; }
details.faq-item > summary:hover { color: var(--blue-600); }
details.faq-item .faq-body { padding: 0 44px 24px 0; color: var(--gray-700); }
details.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- form messages */
.form-note {
  margin: 0 0 20px; padding: 14px 18px; border-radius: var(--r-sm);
  font-size: .95rem; line-height: 1.5;
}
.form-note--ok  { background: #e7f6ee; border: 1px solid #a8ddc0; color: #15603c; }
.form-note--bad { background: #fdecec; border: 1px solid #f3b9b9; color: #8f2323; }