/* iDry SoFlo
   Light, clean, trustworthy. White and soft cool grey backgrounds, deep navy for headings, header, footer and key
   sections, a clear water-blue for accents and icons, and the banner's solid yellow for buttons and small highlights.
   No glow, no neon, no dark mode. Depth comes from soft shadows and spacing only. Mobile first. No videos. */

:root {
  --bg: #ffffff;
  --bg-2: #f4f7fa;
  --bg-3: #e9eff5;
  --line: #dce4ec;
  --text: #1c2733;
  --muted: #5b6b7b;
  --navy: #0b2545;
  --navy-2: #13315c;
  --navy-ink: #e8eef6;      /* text on navy */
  --navy-muted: #a9b8cc;    /* secondary text on navy */
  --blue: #2f8fd8;
  --blue-deep: #1f6fb2;     /* small labels on white and grey: dark enough to read at label sizes */
  --blue-2: #5db3ec;
  --blue-soft: #e3f1fb;
  --yellow: #ffc400;                                        /* the banner's yellow: the one accent, change it here */
  --yellow-hover: color-mix(in srgb, var(--yellow) 88%, #000);
  --yellow-soft: color-mix(in srgb, var(--yellow) 18%, #fff);
  --shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06), 0 2px 8px rgba(11, 37, 69, 0.06);
  --shadow-md: 0 4px 14px rgba(11, 37, 69, 0.08), 0 12px 32px rgba(11, 37, 69, 0.08);
  --shadow-lg: 0 10px 30px rgba(11, 37, 69, 0.10), 0 28px 60px rgba(11, 37, 69, 0.10);
  --f-display: "Instrument Sans", "Inter", system-ui, sans-serif;
  --f-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px;
  --wrap: 1180px;
  --gutter: 16px;
  --section: clamp(64px, 8vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Body is a column with the main content stretching, so the footer always reaches the bottom of short pages. */
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--f-text); font-size: 1rem; line-height: 1.62; overflow-x: hidden; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }   /* sections can stretch inside it (the thank-you page needs this) */
[id] { scroll-margin-top: 96px; }   /* in-page links land below the fixed header */
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); color: var(--navy); line-height: 1.06; margin: 0 0 0.5em; letter-spacing: -0.025em; }
h1 { font-weight: 700; font-size: clamp(2.3rem, 4.8vw + 1rem, 4.2rem); }
h2 { font-weight: 700; font-size: clamp(1.8rem, 3vw + 0.6rem, 2.8rem); }
h3 { font-weight: 700; font-size: clamp(1.3rem, 1vw + 1rem, 1.55rem); letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(var(--wrap), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 12px; z-index: 100; border-radius: var(--r-sm); }
.skip:focus { left: 8px; }
.hidden-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kicker { font-family: var(--f-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-deep); margin: 0 0 1em; }
.lead { font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem); color: var(--muted); max-width: 58ch; }
.glow-yellow, .glow-blue { color: var(--blue); }   /* the old emphasis spans now read as plain water-blue, no effects */
.link { color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; }
.placeholder { color: var(--navy); background: var(--yellow-soft); border: 1px dashed var(--yellow); padding: 0 0.4em; border-radius: 4px; font-style: italic; }

/* Reveal on scroll (site.js adds .is-in). With reduced motion the element just shows. */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease) var(--d, 0ms), transform 0.7s var(--ease) var(--d, 0ms); }
[data-reveal].is-in, .is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Buttons: yellow for every action button, white outline for the secondary "Request help". Yellow is the only warm colour on the page. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 50px; padding: 0 1.4em; border-radius: var(--r-md); border: 1px solid transparent;
  font-family: var(--f-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* Solid yellow with navy lettering (no gradient, no glow). The service and form buttons share it. */
.btn--yellow, .block .btn, .form .btn { background: var(--yellow); color: var(--navy); border-color: rgba(11, 37, 69, 0.18); box-shadow: var(--shadow-sm); }   /* faint navy edge so the yellow reads as a button on white */
.btn--yellow:hover, .block .btn:hover, .form .btn:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); color: var(--navy); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--blue { background: #fff; color: var(--navy); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn--blue:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--xl { min-height: 64px; padding: 0 2em; font-size: clamp(1.3rem, 2vw + 0.6rem, 1.8rem); letter-spacing: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6rem 0; }

/* Logo: roof in navy, water drop in blue, "iDry" navy and "SoFlo" blue, with the space between the words. */
.logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; line-height: 0; flex-shrink: 0; }
.logo picture { display: block; }
.logo__img { display: block; height: 52px; width: auto; }        /* the approved full logo; the 2x file keeps it sharp */
@media (min-width: 640px) { .logo__img { height: 64px; } }
@media (min-width: 1024px) { .logo__img { height: 72px; } }
.logo--ftr { padding: 10px 14px; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-sm); }   /* white plate: the navy wordmark needs a light ground */
.logo--ftr .logo__img { height: 84px; }

/* Header: white, with a hairline and soft shadow once the page is scrolled */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 8px 0; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.hdr.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.hdr__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hdr__phone { display: inline-flex; flex-direction: column; align-items: flex-end; text-decoration: none; padding: 8px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); line-height: 1.1; transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s; }
.hdr__phone:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.hdr__phone-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-deep); font-weight: 600; }
.hdr__phone-num { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--navy); white-space: nowrap; letter-spacing: -0.01em; }
@media (min-width: 640px) { .hdr__phone-num { font-size: 1.2rem; } }
@media (max-width: 359px) { .logo__img { height: 44px; } .hdr__phone { padding: 7px 10px; } .hdr__phone-num { font-size: 0.95rem; } }   /* the narrowest phones: both header items fit */

/* Hero: the copy on the left over the Gumlet background video, which is the hero visual. */
.hero { position: relative; padding: calc(96px + 3vw) 0 var(--section); background: linear-gradient(180deg, #fff 0%, var(--bg-2) 100%); }
.hero__inner { position: relative; z-index: 1; display: grid; gap: 32px; }
/* Hero background video (Gumlet stream), edge to edge behind the hero: it is the hero's visual. A thin light wash
   keeps it soft; a soft light glow sits only behind the text block, so the copy reads at every moment of the loop
   while the footage stays clearly visible on the right and around the copy. */
.hero { overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #cfe3f2; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.22) 80%, rgba(244, 247, 250, 0.85) 100%); }
.hero__copy { position: relative; }
.hero__copy::before { content: ""; position: absolute; z-index: -1; inset: -30px -24px -20px; pointer-events: none;
  border-radius: 40px; background: rgba(255, 255, 255, 0.80); filter: blur(22px); }   /* even light behind every line, edges feathered away */
@media (max-width: 959px) {
  /* below desktop the copy spans the screen, so the panel stays light and a soft white halo carries each line */
  .hero__copy::before { inset: -26px -16px -16px; background: rgba(255, 255, 255, 0.50); }
  .hero .hero__copy .lead, .hero .hero__copy .hero__points { color: #1f2a36; }
  .hero .hero__copy .kicker { color: #0b3459; }
  .hero .hero__copy .glow-yellow { color: #14568f; }
  .hero .kicker, .hero h1, .hero .lead, .hero .hero__points { text-shadow: 0 0 1px rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 255, 255, 0.9), 0 0 22px rgba(255, 255, 255, 0.7); }
}
@media (min-width: 640px) and (max-width: 959px) { .hero__inner { grid-template-columns: minmax(0, 500px); } }   /* tablet: the footage shows beside the copy */
/* Over moving footage the hero copy is set a step darker than elsewhere, so every line keeps body-text contrast. */
.hero .lead, .hero .hero__points { color: #3a4958; }
.hero .kicker { color: #124b7a; }
.hero .glow-yellow { color: #1a62a1; }
.hero__copy { display: grid; gap: 4px; align-content: center; }
.hero__points { display: grid; gap: 8px; color: var(--muted); }
.hero__points li { position: relative; padding-left: 1.4em; }
.hero__points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--blue); }
@media (min-width: 960px) {
  .hero { padding: calc(120px + 2vw) 0 var(--section); min-height: 86svh; display: grid; align-items: center; }
  .hero__inner { grid-template-columns: minmax(0, 660px); align-items: center; }   /* copy on the left; the footage fills the right */
}

/* Section rhythm */
section { position: relative; padding: var(--section) 0; }
.rule { display: none; }

/* Services: two full-width blocks, one under the other, each as wide as the content column. Each block is a live
   canvas edge to edge (water, or mold particles). The copy sits on ONE frosted glass panel: translucent white with a
   backdrop blur, centred in the block with water or spores showing clearly on every side. The panel sets the block's
   height. Phones: the panel fills the block with a 14px margin so a little of the background still shows. */
.services { background: var(--bg-2); padding-bottom: 28px; }   /* under the Mold block: same space as between the two blocks, not a full section gap */
.blocks { display: grid; gap: 28px; margin-top: 2rem; }
.block { position: relative; display: flex; justify-content: center; align-items: center; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-md); overflow: hidden; isolation: isolate; }
.block__fx { position: absolute; inset: 0; z-index: 0; }
.block__body {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: 760px; padding: 22px 20px 22px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.84); border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 24px rgba(11, 37, 69, 0.12), 0 24px 60px rgba(11, 37, 69, 0.10);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  --panel-muted: #3e4e60;   /* body copy on the frosted panel: darker than --muted so it clears 4.5:1 over the deepest water */
}
.block__head { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }   /* icon left, small label over the heading; on phones the label takes the full width */
.block__icon { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--blue-soft); }
.block__icon svg { width: 24px; height: 24px; fill: var(--blue); }
.block__icon-cut { fill: var(--blue-soft); }
.block h3 { grid-column: 2; grid-row: 2; margin: 0; font-size: clamp(1.3rem, 0.9vw + 0.95rem, 1.7rem); }
.block__alt { font-weight: 600; color: var(--blue-deep); white-space: nowrap; }
.block__tag { grid-column: 2; grid-row: 1; margin: 0 0 0.3em; font-family: var(--f-display); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: #17598f; }   /* dark enough for a small label over water or spores */
.block__intro { margin: 0; color: var(--panel-muted); font-size: 0.98rem; }
.block__split { display: grid; gap: 10px; }
.block__split p { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(11, 37, 69, 0.08); color: var(--panel-muted); font-size: 0.92rem; line-height: 1.5; }
.block__split strong { display: block; color: var(--navy); font-family: var(--f-display); margin-bottom: 0.1em; }
.block__list { display: grid; gap: 8px 22px; }
.block__list li { position: relative; padding-left: 1.3em; color: var(--text); font-size: 0.95rem; line-height: 1.5; }
.block__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--blue); }
.block .btn { width: 100%; margin-top: 4px; }
/* Dry-Outs: the water surface sits a fixed distance below the top edge (site.js), so the block keeps extra room above the panel for it */
.block--dry { background: var(--navy); border-color: var(--navy); padding-top: 92px; }
/* Mold: white block, spores all around the same panel */
.block--mold .block__body { background: rgba(255, 255, 255, 0.8); }
@media (max-width: 479px) { .block__tag { grid-column: 1 / -1; grid-row: 1; } .block__icon { grid-row: 2; } }
@media (min-width: 640px) {
  .block { padding: 40px 32px; }
  .block--dry { padding-top: 104px; }
  .block__body { gap: 15px; padding: 28px 32px 28px; }
  .block__split, .block__list { grid-template-columns: 1fr 1fr; }
  .block--dry .block__list { grid-template-columns: 1fr; }   /* three bullets: one even column under the Residential and Commercial boxes */
  .block .btn { width: auto; align-self: flex-start; }
}
@media (min-width: 900px) {
  .block { padding: 56px 40px; }
  .block--dry { padding-top: 112px; }
}

/* Why */
.why { background: #fff; }
.why__grid { display: grid; gap: 32px; }
.why__list { display: grid; gap: 14px; }
.why__list li { padding: 18px 20px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); }
.why__list strong { color: var(--navy); display: block; margin-bottom: 0.2em; font-family: var(--f-display); }
@media (min-width: 900px) { .why__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; } }

/* Area: a quiet band */
.area { background: var(--bg-2); text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.area p { max-width: 60ch; margin-inline: auto; color: var(--muted); }

/* Help band: navy, the key section */
.help { background: var(--navy); color: var(--navy-ink); text-align: center; }
.help h1, .help h2 { color: #fff; }
.help .kicker { color: var(--blue-2); }
.help .lead { color: var(--navy-muted); margin-inline: auto; }
.help .glow-yellow, .help .glow-blue { color: var(--blue-2); }
.help__fx { display: none; }
.help__inner { position: relative; display: grid; justify-items: center; gap: 10px; }
.help .btn--xl { margin: 8px 0 28px; }
.help .btn--blue { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); box-shadow: none; }
.help .btn--blue:hover { border-color: #fff; color: #fff; }
/* The form sits inside the help band, so its submit needs its own yellow rule here, after the band's outline rule. */
.help .form .btn { background: var(--yellow); color: var(--navy); border-color: rgba(11, 37, 69, 0.18); box-shadow: var(--shadow-sm); }
.help .form .btn:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); color: var(--navy); }
.form { width: min(680px, 100%); display: grid; gap: 14px; text-align: left; padding: 28px; border-radius: var(--r-lg); background: #fff; color: var(--text); box-shadow: var(--shadow-lg); }
.form__row { display: grid; gap: 14px; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form label { display: grid; gap: 6px; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-family: var(--f-display); font-weight: 600; }
.form input, .form select, .form textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; color: var(--text); font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; transition: border-color 0.2s, box-shadow 0.2s; }
.form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 143, 216, 0.18); }
.form .btn { justify-self: start; }
.form__note { display: none; }
.thanks { flex: 1; min-height: 80svh; display: grid; align-items: center; padding-top: 120px; }   /* navy runs down to the footer, no white gap */

/* Footer: navy */
.ftr { background: var(--navy); color: var(--navy-ink); padding-top: clamp(40px, 6vw, 72px); }
.ftr__grid { display: grid; gap: 32px; padding-bottom: 40px; }
.ftr__brand p, .ftr__col p { color: var(--navy-muted); margin: 0 0 0.6em; }
.ftr__brand .logo { margin-bottom: 16px; }
.ftr .kicker { color: var(--blue-2); }
.ftr__col { display: grid; gap: 2px; align-content: start; }
.ftr__col a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; color: #fff; text-decoration: none; margin-bottom: 0.2em; }
.ftr .placeholder { color: var(--yellow); background: rgba(255, 196, 0, 0.10); border-color: rgba(255, 196, 0, 0.6); }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); color: var(--navy-muted); font-size: 0.85rem; }
.ftr__base p { margin: 0; }
@media (min-width: 860px) { .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ======================================================================================================
   Water and mold. Both service blocks hold a <canvas data-fx> that site.js draws with a
   small WebGL shader, only while the block is on screen. Dry-Outs: water with caustic light; the
   Dry-Outs block also has falling droplets and ripple rings on its surface. Mold: no water, a full block of
   soft drifting green particles. Nothing is tied to the scroll position. Before the canvas is drawn, or
   without WebGL, the panel shows the calm still version below. With prefers-reduced-motion site.js draws
   each panel once, still, and the text panels keep the copy legible.
   ====================================================================================================== */
.fx-host { background: linear-gradient(180deg, #8fcdf2 0%, #5aa6dc 45%, #1f63a6 100%); }
.fx-host--dry { background: linear-gradient(180deg, #a9d4f3 0%, #5aa6dc 30%, #1f63a6 100%); }
.fx-host--mold { background: #fff; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s var(--ease); }
.fx--live .fx { opacity: 1; }
.fx--static .fx { display: none; }

/* ======================================================================================================
   Water channel: a slim glass tube fixed on the left edge, below the header. site.js draws the water inside
   on the canvas: full at the top of the page, draining smoothly as the visitor scrolls, empty at the bottom.
   It sits in the margin outside the content column at every width, so it never covers text, the service
   blocks or the header. Phones get a hairline version inside the 16px gutter.
   ====================================================================================================== */
.channel {
  position: fixed; z-index: 40; pointer-events: none;
  left: 22px; top: 96px; bottom: 28px; width: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.26));
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 1px 0 1px rgba(255, 255, 255, 0.85),      /* inner highlight along the left wall */
    inset -1px 0 1px rgba(11, 37, 69, 0.10),        /* soft shade on the right wall: depth */
    0 1px 2px rgba(11, 37, 69, 0.10), 0 6px 16px rgba(11, 37, 69, 0.10);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
.channel__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.channel::after {                                   /* the glass reflection: a faint bright streak down the tube */
  content: ""; position: absolute; left: 2px; top: 6%; bottom: 6%; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.10) 40%, rgba(255, 255, 255, 0.45));
}
@media (max-width: 1279px) {                         /* tablet and phone: a hairline at the very edge, no glass, clear of the text column */
  .channel { left: 2px; width: 4px; top: 86px; bottom: 16px; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11, 37, 69, 0.06); }
  .channel::after { display: none; }
}

/* ======================================================================================================
   Main navigation. Three links (Services, FAQ, Blog) sit between the logo and the phone button. From 640px
   they show inline as quiet pills, the current page tinted water-blue. On phones a "Menu" button opens a
   small white panel under the header (site.js toggles .is-open and aria-expanded); the phone button always
   stays visible. Inner pages carry .hdr--solid so the header keeps its hairline and shadow at the top.
   ====================================================================================================== */
.hdr--solid { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; margin-left: auto; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; color: var(--navy); box-shadow: var(--shadow-sm);
  font-family: var(--f-display); font-weight: 600; font-size: 0.9rem; letter-spacing: -0.005em; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.nav__toggle:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }
.nav__toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.nav__toggle svg { width: 14px; height: 14px; color: var(--blue-deep); transition: transform 0.3s var(--ease); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__list { display: none; }
.nav__list a { font-family: var(--f-display); font-weight: 600; color: var(--navy); text-decoration: none; transition: background 0.2s, color 0.2s; }
.nav__list a:hover { background: var(--bg-2); color: var(--blue-deep); }
.nav__list a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav__list a[aria-current="page"] { background: var(--blue-soft); color: var(--navy); }
@media (max-width: 639px) {
  .nav.is-open .nav__list { display: grid; gap: 2px; }
  .nav__list { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 4px); padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
  .nav__list a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: var(--r-md); font-size: 1.02rem; }
}
@media (max-width: 359px) { .nav__toggle { padding: 0 10px; } .nav__toggle svg { display: none; } }   /* the narrowest phones: logo, Menu and the phone fit in one row */
@media (min-width: 640px) {
  .nav { margin-left: 0; }
  .nav__toggle { display: none; }
  .nav__list { display: flex; gap: 4px; }
  .nav__list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 0.95rem; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ======================================================================================================
   Inner pages (FAQ, blog). A light page header below the fixed site header, then quieter section spacing
   than the home page, and a navy call-to-action panel at the bottom of each page.
   ====================================================================================================== */
.page-hero { padding: calc(104px + 2.5vw) 0 clamp(28px, 4vw, 48px); background: linear-gradient(180deg, #fff 0%, var(--bg-2) 100%); }
.page-hero h1 { font-size: clamp(2rem, 3.2vw + 0.8rem, 3.4rem); max-width: 18ch; }
.page-hero .lead { margin-bottom: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.6rem; }
.pills a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--navy); font-family: var(--f-display); font-weight: 600; font-size: 0.92rem; text-decoration: none; transition: border-color 0.2s, color 0.2s, box-shadow 0.2s; }
.pills a:hover { border-color: var(--blue); color: var(--blue-deep); box-shadow: var(--shadow-md); }
.pills a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cta-sec { background: var(--bg-2); padding: clamp(32px, 5vw, 64px) 0 var(--section); }
.cta-panel { display: grid; gap: 12px; justify-items: start; padding: clamp(28px, 4vw, 52px); border-radius: var(--r-lg); background: var(--navy); color: var(--navy-ink); box-shadow: var(--shadow-lg); }
.cta-panel .kicker { color: var(--blue-2); margin-bottom: 0; }
.cta-panel h2 { color: #fff; margin: 0; font-size: clamp(1.6rem, 2.2vw + 0.6rem, 2.3rem); }
.cta-panel p { color: var(--navy-muted); margin: 0; max-width: 58ch; }
.cta-panel__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.cta-panel .btn--blue { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); box-shadow: none; }
.cta-panel .btn--blue:hover { border-color: #fff; color: #fff; }

/* ======================================================================================================
   FAQ. Native <details>/<summary> items: a white card per question, the question in the display face with a
   round water-blue chevron that turns when the item is open. The answer sits below in body text. The same
   items appear in the home page's "Common questions" preview. On the FAQ page each section puts its heading
   in a left column from 900px, with the questions on the right.
   ====================================================================================================== */
.faq-list { display: grid; gap: 10px; }
.faq { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); transition: border-color 0.2s, box-shadow 0.2s; }
.faq[open] { border-color: rgba(47, 143, 216, 0.5); box-shadow: var(--shadow-md); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 16px 14px 18px; border-radius: var(--r-md); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary:hover .faq__q { color: var(--blue-deep); }
.faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.faq__q { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: var(--navy); letter-spacing: -0.01em; transition: color 0.2s; }
.faq__chev { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-deep); transition: transform 0.3s var(--ease), background 0.2s, color 0.2s; }
.faq__chev svg { width: 14px; height: 14px; }
.faq[open] .faq__chev { transform: rotate(180deg); background: var(--navy); color: #fff; }
.faq__a { padding: 0 18px 18px; color: #3a4958; max-width: 72ch; }
.faq__a p { margin: 0; }
.faq-sec { background: var(--bg-2); padding: clamp(28px, 4vw, 48px) 0; }
.faq-sec__grid { display: grid; gap: 18px; align-items: start; }
.faq-sec h2 { font-size: clamp(1.5rem, 1.6vw + 0.8rem, 2rem); margin: 0; }
@media (min-width: 900px) {
  .faq-sec__grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 56px; }
  .faq-sec h2 { position: sticky; top: 112px; }
}
.faq-preview { background: var(--bg-2); border-top: 1px solid var(--line); }
.faq-preview__inner { display: grid; justify-items: start; }
.faq-preview .faq-list { width: 100%; max-width: 860px; margin-bottom: 1.8rem; }

/* ======================================================================================================
   Blog. The index lists the articles as plain white cards (icon, title, summary, one link; the whole card
   is clickable). Each article page is a single comfortable reading column with a back link, the body, a
   box of related links and the navy call-to-action panel.
   ====================================================================================================== */
.blog-list { background: var(--bg-2); padding: clamp(28px, 4vw, 48px) 0; }
.cards { display: grid; gap: 18px; }
.card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(47, 143, 216, 0.5); }
.card:focus-within { border-color: var(--blue); }
.card__icon { margin-bottom: 4px; }
.card h2 { font-size: clamp(1.2rem, 0.6vw + 1rem, 1.4rem); margin: 0; }
.card p { color: var(--muted); margin: 0; flex: 1; font-size: 0.97rem; }
.card__more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--blue-deep); font-family: var(--f-display); font-weight: 600; text-decoration: none; }
.card__more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole card opens the article */
.card__more:focus-visible { outline: none; }
.card__more svg { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform 0.25s var(--ease); }
.card:hover .card__more svg { transform: rotate(-90deg) translateY(3px); }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .card { padding: 30px 28px 22px; } }
.post { padding: calc(100px + 2vw) 0 var(--section); background: #fff; }
.post__wrap { width: min(720px, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.post__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 1.2rem; color: var(--blue-deep); font-family: var(--f-display); font-weight: 600; text-decoration: none; }
.post__back:hover { color: var(--navy); }
.post__back svg { width: 14px; height: 14px; transform: rotate(90deg); }
.post h1 { font-size: clamp(2rem, 2.8vw + 0.9rem, 3.2rem); margin: 0 0 0.8em; }
.post__body { font-size: 1.08rem; line-height: 1.72; color: #2b3845; }
.post__body h2 { font-size: clamp(1.4rem, 1vw + 1.05rem, 1.8rem); margin: 1.7em 0 0.5em; line-height: 1.15; }
.post__body p { margin: 0 0 1.1em; }
.post__body ul { display: grid; gap: 8px; margin: 0 0 1.3em; }
.post__body li { position: relative; padding-left: 1.4em; }
.post__body li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--blue); }
.post__body a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.post__body a:hover { color: var(--navy); }
.post__body strong { color: var(--navy); }
.related { margin-top: 44px; padding: 22px 26px 16px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); }
.related .kicker { margin-bottom: 0.4em; }
.related ul { display: grid; gap: 10px; }
.related a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; line-height: 1.3; color: var(--navy); font-family: var(--f-display); font-weight: 600; text-decoration: none; }
.related a:hover { color: var(--blue-deep); }
.post .cta-panel { margin-top: 28px; }