/* Waters Advisory website, shared styles. Look: A3 "Navy bands".
   Navy masthead and opening section, a navy band of key figures, white and pale-grey sections between, gold for lines, figures and the main button. */
:root {
  --navy: #0D3051;
  --navy-deep: #08223D;
  --gold: #B49050;
  --gold-ink: #8A6A31;
  --on-navy: #FFFFFF;
  --on-navy-muted: #C9D3E3;
  --bg: #FFFFFF;
  --paper: #F3F5F8;
  --ink: #142037;
  --muted: #55607A;
  --line: #DCE1E9;
  --card: #FFFFFF;
  --display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --step-1: clamp(0.92rem, 0.88rem + 0.2vw, 1rem);
  --step0: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
  --step1: clamp(1.2rem, 1.08rem + 0.55vw, 1.45rem);
  --step2: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --step3: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
  --wrap: 1160px;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1626; --paper: #0F1D33; --ink: #E8EDF5; --muted: #A4B0C4; --line: #24344F; --card: #13233D;
    --gold-ink: #D9B977; --navy-deep: #061529; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1626; --paper: #0F1D33; --ink: #E8EDF5; --muted: #A4B0C4; --line: #24344F; --card: #13233D;
  --gold-ink: #D9B977; --navy-deep: #061529; color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: var(--step0); line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--navy); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--step3); font-weight: 800; }
h2 { font-size: var(--step2); font-weight: 700; }
h3 { font-size: var(--step1); font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: #0D2038; padding: 8px 14px; z-index: 50; font-weight: 700; }
.skip:focus { left: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-family: var(--display); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.navy .eyebrow, .band .eyebrow { color: var(--gold); }
.lede { color: var(--muted); max-width: 62ch; }
.section { padding-block: clamp(56px, 8vw, 96px); }
.section.alt { background: var(--paper); }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.todo { display: inline-block; background: rgba(180, 144, 80, 0.14); border: 1px dashed var(--gold); color: var(--ink); border-radius: 4px; padding: 0 6px; font-size: 0.92em; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 0.95rem; text-decoration: none; padding: 14px 22px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; line-height: 1.2; }
.btn-gold { background: var(--gold); color: #0D2038; }
.btn-gold:hover { background: #C29E5E; }
.btn-line { border-color: rgba(255, 255, 255, 0.4); color: var(--on-navy); }
.btn-line:hover { border-color: var(--gold); }
.btn-ink { border-color: var(--line); color: var(--ink); }
.btn-ink:hover { border-color: var(--gold); }
.link-arrow { font-family: var(--display); font-weight: 700; font-size: 0.92rem; color: var(--gold-ink); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.link-arrow::after { content: "→"; transition: transform .15s; }
.link-arrow:hover::after { transform: translateX(3px); }

/* header */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--navy); color: var(--on-navy); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.brand { display: flex; align-items: center; color: var(--on-navy); text-decoration: none; flex-shrink: 0; }
.brand .logo-line { height: 30px; width: auto; }
.brand .logo-mono { height: 34px; width: auto; display: none; }
.nav { display: flex; align-items: center; gap: 4px; font-family: var(--display); font-weight: 600; font-size: 0.9rem; }
.nav > a, .nav .sub-btn { color: var(--on-navy-muted); text-decoration: none; padding: 10px 12px; border-radius: 6px; background: none; border: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav > a:hover, .nav .sub-btn:hover, .nav > a[aria-current="page"], .has-sub.current .sub-btn { color: var(--on-navy); }
.nav > a[aria-current="page"], .has-sub.current .sub-btn { box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.sub-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.has-sub { position: relative; }
.sub { position: absolute; top: calc(100% + 8px); left: 0; min-width: 290px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 50px -24px rgba(8, 34, 61, 0.55); padding: 8px; display: none; }
.has-sub.open .sub { display: grid; }
.sub a { text-decoration: none; padding: 10px 12px; border-radius: 6px; display: grid; gap: 2px; }
.sub a:hover, .sub a[aria-current="page"] { background: var(--paper); }
.sub a b { font-weight: 700; font-size: 0.92rem; }
.sub a span { font-family: var(--body); font-weight: 400; font-size: 0.88rem; color: var(--muted); }
.nav .btn { margin-left: 10px; padding: 11px 18px; }
.menu-btn { display: none; align-items: center; gap: 10px; background: none; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--on-navy); border-radius: 6px; padding: 9px 14px; font-family: var(--display); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.menu-btn i { width: 18px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; }
.menu-btn[aria-expanded="true"] i { border-color: transparent; }
.menu-btn[aria-expanded="true"] i::after { top: 3px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; transform: rotate(-45deg); }

@media (max-width: 980px) {
  .brand .logo-line { display: none; }
  .brand .logo-mono { display: block; }
  .site-head .wrap { min-height: 64px; }
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--navy); flex-direction: column; align-items: stretch; gap: 0; padding: 8px max(20px, env(safe-area-inset-right, 0px)) 22px max(20px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid rgba(255, 255, 255, 0.12); max-height: calc(100vh - 64px); overflow-y: auto; }
  .nav.open { display: flex; }
  .nav > a, .nav .sub-btn { padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 1rem; justify-content: space-between; width: 100%; }
  .nav > a[aria-current="page"], .has-sub.current .sub-btn { box-shadow: none; color: var(--gold); }
  .sub { position: static; display: none; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 4px 0 8px 12px; color: var(--on-navy); }
  .sub a:hover, .sub a[aria-current="page"] { background: rgba(255, 255, 255, 0.06); }
  .sub a span { color: var(--on-navy-muted); }
  .nav .btn { margin: 16px 0 0; }
}

/* page openers */
.hero { background: var(--navy); color: var(--on-navy); padding-block: clamp(48px, 7vw, 92px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.hero-copy .lede { color: var(--on-navy-muted); font-size: var(--step1); line-height: 1.5; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.promises { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 0; margin: 4px 0 0; list-style: none; font-size: var(--step-1); color: var(--on-navy-muted); }
.promises li { display: inline-flex; align-items: center; gap: 10px; }
.promises li::before { content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; }
.photo { aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--radius); background: linear-gradient(160deg, #1B4470, #0A2440); border: 1px solid rgba(255, 255, 255, 0.15); display: grid; place-items: end start; padding: 18px; color: var(--on-navy-muted); font-size: 0.92rem; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .photo { aspect-ratio: 5 / 4; } }

.page-hero { background: var(--navy); color: var(--on-navy); padding-block: clamp(44px, 6vw, 76px); }
.page-hero .wrap { display: grid; gap: 16px; }
.page-hero .lede { color: var(--on-navy-muted); font-size: var(--step1); line-height: 1.5; }
.crumbs { font-size: 0.88rem; color: var(--on-navy-muted); }
.crumbs a { color: var(--on-navy-muted); }

/* navy band of figures */
.band { background: var(--navy-deep); color: var(--on-navy); border-top: 1px solid var(--gold); }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 30px; }
.fig b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.fig span { color: var(--on-navy-muted); font-size: 0.98rem; }
@media (max-width: 700px) { .figs { grid-template-columns: 1fr; gap: 18px; } }

/* cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: var(--radius); padding: 28px; display: grid; gap: 14px; align-content: start; }
.card .k { font-family: var(--display); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.card p { color: var(--muted); }
.card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.card li { padding-left: 20px; position: relative; color: var(--muted); }
.card li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 9px; height: 2px; background: var(--gold); }
.card .link-arrow { margin-top: 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card { border-top-color: var(--gold); } }
:root[data-theme="dark"] .card { border-top-color: var(--gold); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: s; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: s; display: grid; gap: 10px; align-content: start; border-top: 2px solid var(--ink); padding-top: 18px; }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--display); font-weight: 800; color: var(--gold-ink); font-size: 0.95rem; letter-spacing: 0.08em; }
.steps p { color: var(--muted); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 12px; grid-template-rows: auto auto 1fr auto; }
.plan.pick { border-color: var(--gold); box-shadow: inset 0 3px 0 var(--gold); }
.plan h3 { font-size: 1.08rem; }
.plan .flag { justify-self: start; font-family: var(--display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--gold); color: #0D2038; padding: 3px 8px; border-radius: 3px; }
.amt { font-family: var(--display); font-weight: 800; font-size: 1.9rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.amt small { font-family: var(--body); font-weight: 400; font-size: 0.9rem; color: var(--muted); }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 0.98rem; color: var(--muted); align-content: start; }
.plan li { padding-left: 22px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-ink); font-weight: 700; }
.plan .for { font-size: 0.92rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.fine { margin-top: 22px; color: var(--muted); font-size: var(--step-1); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; }
@media (max-width: 1040px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } }

/* promises */
.pledges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pledge { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.pledge h3 { font-size: 1.05rem; }
.pledge p { color: var(--muted); font-size: 0.98rem; }
.pledge .mk { width: 28px; height: 3px; background: var(--gold); }
@media (max-width: 960px) { .pledges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pledges { grid-template-columns: 1fr; } }

/* quotes + logos */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.quote { margin: 0; display: grid; gap: 14px; align-content: start; padding: 26px; border-left: 3px solid var(--gold); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; }
.quote blockquote { margin: 0; font-size: 1.05rem; }
.quote figcaption { color: var(--muted); font-size: 0.92rem; }
.quote figcaption b { color: var(--ink); font-family: var(--display); font-size: 0.92rem; display: block; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.logo-slot { aspect-ratio: 3 / 2; max-width: 100%; border: 1px dashed var(--line); border-radius: 8px; display: grid; place-items: center; color: var(--muted); font-size: 0.82rem; text-align: center; padding: 8px; }
@media (max-width: 860px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* partners */
.partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.partner { display: grid; gap: 8px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.partner .k { font-family: var(--display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.partner h3 { font-size: 1.1rem; }
.partner p { color: var(--muted); font-size: 0.98rem; }
.tools { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--muted); font-size: 0.95rem; }
.tools span.t { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: var(--card); color: var(--ink); }
@media (max-width: 900px) { .partners { grid-template-columns: 1fr; } }

/* meet dale */
.meet { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 60px); align-items: center; }
.meet .photo { background: var(--paper); border: 1px dashed var(--line); color: var(--muted); }
.meet .copy { display: grid; gap: 16px; }
.facts { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.facts li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.facts b { font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); padding-top: 3px; }
@media (max-width: 860px) { .meet { grid-template-columns: 1fr; } .meet .photo { max-width: 340px; aspect-ratio: 4 / 5; } }
@media (max-width: 480px) { .facts li { grid-template-columns: 1fr; gap: 2px; } }

/* closing call to action */
.closer { background: var(--navy); color: var(--on-navy); }
.closer .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 60px); align-items: center; padding-block: clamp(48px, 7vw, 80px); }
.closer .lede { color: var(--on-navy-muted); }
.closer .copy { display: grid; gap: 14px; }
.contact-list { margin: 0; padding: 22px; list-style: none; display: grid; gap: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); }
.contact-list small { display: block; font-family: var(--display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.contact-list span { color: var(--on-navy); font-size: 1.05rem; overflow-wrap: anywhere; }
.copy-btn { margin-left: 8px; background: none; color: var(--on-navy-muted); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 4px; font: inherit; font-size: 0.78rem; padding: 1px 8px; cursor: pointer; vertical-align: middle; }
@media (max-width: 860px) { .closer .wrap { grid-template-columns: 1fr; } }

/* shell pages */
.shell { display: grid; gap: 16px; max-width: 760px; padding: 28px; border: 1px dashed var(--gold); border-radius: var(--radius); background: var(--paper); }
.shell ul { margin: 0; padding-left: 20px; color: var(--muted); display: grid; gap: 6px; }

/* footer */
.site-foot { background: var(--navy-deep); color: var(--on-navy-muted); font-size: 0.95rem; }
.site-foot .cols { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 28px; padding-block: 48px 36px; }
.site-foot .brand .logo-line { display: block; height: 26px; }
.site-foot .brand .logo-mono { display: none; }
.site-foot h4 { color: var(--on-navy); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; }
.site-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.site-foot a { color: var(--on-navy-muted); text-decoration: none; }
.site-foot a:hover { color: var(--on-navy); }
.site-foot .about { display: grid; gap: 14px; align-content: start; }
.legal { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 18px; font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
@media (max-width: 900px) { .site-foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-foot .about { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-foot .cols { grid-template-columns: 1fr; } }

/* fixes */
.nav > a.btn-gold { background: var(--gold); color: #0D2038; padding: 11px 18px; border-radius: 6px; box-shadow: none; }
.nav > a.btn-gold:hover { background: #C29E5E; color: #0D2038; }
@media (max-width: 980px) { .nav > a.btn-gold { justify-content: center; border-bottom: 0; padding: 14px 18px; } }
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.photo.has-img { padding: 0; border: 0; background: var(--paper); }
.navy .todo, .closer .todo, .site-foot .todo, .hero .todo, .band .todo { color: var(--on-navy); }
.site-foot .todo { min-width: 3em; }

/* =========================================================
   CLEAN CORPORATE THEME (overrides the navy-bands look above)
   White pages, navy type and borders, gold only as a fine accent.
   Navy is kept for the footer and buttons.
   ========================================================= */
:root { --logo: #0D3051; --edge: rgba(13, 48, 81, 0.22); --btn: #0D3051; --btn-ink: #FFFFFF; --btn-hover: #16406A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --logo: #FFFFFF; --edge: #2C4266; --btn: #B49050; --btn-ink: #0D2038; --btn-hover: #C29E5E; } }
:root[data-theme="dark"] { --logo: #FFFFFF; --edge: #2C4266; --btn: #B49050; --btn-ink: #0D2038; --btn-hover: #C29E5E; }

body::before { background: var(--bg); }
.site-head { background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.site-head .wrap { min-height: 92px; }
.brand { color: var(--logo); }
.brand .logo-line { height: 42px; }
.nav > a, .nav .sub-btn { color: var(--muted); }
.nav > a:hover, .nav .sub-btn:hover, .nav > a[aria-current="page"], .has-sub.current .sub-btn { color: var(--ink); }
.nav > a.btn-gold, .btn-gold { background: var(--btn); color: var(--btn-ink); }
.nav > a.btn-gold:hover, .btn-gold:hover { background: var(--btn-hover); color: var(--btn-ink); }
.menu-btn { border-color: var(--edge); color: var(--ink); }
@media (max-width: 1120px) {
  .brand .logo-line { display: none; }
  .brand .logo-mono { display: block; height: 44px; }
  .site-head .wrap { min-height: 72px; }
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); flex-direction: column; align-items: stretch; gap: 0; padding: 8px max(20px, env(safe-area-inset-right, 0px)) 22px max(20px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -24px rgba(13, 48, 81, .4); max-height: calc(100vh - 72px); overflow-y: auto; }
  .nav.open { display: flex; }
  .nav > a, .nav .sub-btn { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 1rem; justify-content: space-between; width: 100%; }
  .nav > a[aria-current="page"], .has-sub.current .sub-btn { box-shadow: none; color: var(--ink); font-weight: 700; }
  .sub { position: static; display: none; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 4px 0 8px 12px; color: var(--ink); }
  .has-sub.open .sub { display: grid; }
  .sub a span { color: var(--muted); }
  .nav > a.btn-gold { margin: 16px 0 0; justify-content: center; border-bottom: 0; padding: 14px 18px; }
}
@media (min-width: 1121px) { .menu-btn { display: none; } .nav { display: flex !important; position: static; flex-direction: row; padding: 0; border: 0; box-shadow: none; background: none; } .nav > a, .nav .sub-btn { padding: 10px 12px; border: 0; width: auto; font-size: .9rem; } .sub { position: absolute; padding: 8px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 50px -24px rgba(8, 34, 61, .45); } .brand .logo-line { display: block; } .brand .logo-mono { display: none; } }
.menu-btn[aria-expanded="true"] i { border-color: transparent; }

.hero { background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.hero-copy .lede, .page-hero .lede { color: var(--muted); }
.hero .eyebrow, .page-hero .eyebrow { color: var(--gold-ink); }
.hero h1, .page-hero h1 { color: var(--logo); }
.promises { color: var(--muted); }
.btn-ink { border-color: var(--edge); color: var(--ink); }
.photo { background: var(--paper); border: 1px solid var(--edge); color: var(--muted); }
.page-hero { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.crumbs, .crumbs a { color: var(--muted); }

.band { background: var(--bg); color: var(--ink); border-top: 0; border-bottom: 1px solid var(--line); }
.band .figs { padding-block: 34px; }
.fig { border-left: 2px solid var(--gold); padding-left: 18px; }
.fig b { color: var(--logo); }
.fig span { color: var(--muted); }

.card, .pledge, .partner, .plan { border: 1px solid var(--edge); }
.card { border-top: 3px solid var(--logo); }
.quote { background: var(--card); border: 1px solid var(--edge); border-left: 3px solid var(--logo); }
.plan.pick { border-color: var(--logo); box-shadow: inset 0 3px 0 var(--logo); }
.plan .flag { background: var(--logo); color: var(--bg); }
.steps li { border-top-color: var(--logo); }
.logo-slot { border-color: var(--edge); }
.meet .photo { border: 1px solid var(--edge); }

.closer { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); }
.closer .lede { color: var(--muted); }
.closer .eyebrow { color: var(--gold-ink); }
.contact-list { background: var(--card); border: 1px solid var(--edge); }
.contact-list small { color: var(--gold-ink); }
.contact-list span { color: var(--ink); }
.closer .todo { color: var(--ink); }
.copy-btn { color: var(--muted); border-color: var(--edge); }

.site-foot { background: var(--navy); }
.site-foot .brand { color: #FFFFFF; }
.site-foot .brand .logo-line { display: block; height: 30px; }
.site-foot .brand .logo-mono { display: none; }

.price-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.price-grid.five .plan { padding: 20px; }
.price-grid.five .amt { font-size: 1.6rem; }
@media (max-width: 1180px) { .price-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .price-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .price-grid.five { grid-template-columns: 1fr; } }

/* comparison tables */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.jump a { font-family: var(--display); font-weight: 600; font-size: .88rem; text-decoration: none; border: 1px solid var(--edge); border-radius: 999px; padding: 6px 14px; background: var(--bg); }
.jump a:hover { border-color: var(--logo); }
.ptable { overflow-x: auto; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--card); }
.ptable:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.ptable table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: .98rem; }
.ptable th, .ptable td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.ptable tbody th { text-align: left; font-weight: 400; color: var(--ink); min-width: 240px; }
.ptable thead th { vertical-align: bottom; padding-top: 22px; border-bottom: 2px solid var(--logo); }
.ptable thead th.corner { text-align: left; font-family: var(--display); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.pn { display: block; font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--ink); line-height: 1.25; }
.pp { display: block; font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: var(--logo); margin-top: 6px; font-variant-numeric: tabular-nums; }
.pw { display: block; font-size: .82rem; color: var(--muted); }
.ptable .pick { background: rgba(13, 48, 81, .04); }
.ptable thead th.pick { box-shadow: inset 0 3px 0 var(--logo); }
.ptable tr.grp th { text-align: left; font-family: var(--display); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); background: var(--paper); padding-block: 9px; }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }
.yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--logo); color: var(--bg); font-size: .8rem; font-weight: 700; }
.no { color: var(--muted); opacity: .6; }
.txt { font-size: .88rem; color: var(--ink); }
@media (max-width: 760px) { .ptable tbody th { position: sticky; left: 0; background: var(--card); z-index: 1; min-width: 180px; box-shadow: 1px 0 0 var(--line); } .ptable thead th.corner { position: sticky; left: 0; background: var(--card); z-index: 1; } .ptable tr.grp th { position: sticky; left: 0; } }
.notes { margin: 18px 0 0; padding-left: 20px; color: var(--muted); font-size: var(--step-1); display: grid; gap: 4px; }
.partners:has(.ref) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.partner.ref { text-decoration: none; color: inherit; transition: border-color .15s; }
.partner.ref:hover { border-color: var(--logo); }
.shot { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); font-size: .85rem; margin-bottom: 8px; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 640px) { .partners:has(.ref) { grid-template-columns: 1fr; } }
.swipe { display: none; font-size: .85rem; color: var(--muted); margin: 0 0 8px; }
@media (max-width: 760px) { .swipe { display: block; } }

/* navy top band with a larger white logo */
body::before { background: var(--navy); }
.site-head { background: var(--navy); color: #FFFFFF; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--gold); }
.site-head .brand { color: #FFFFFF; }
.site-head .wrap { min-height: 104px; }
.site-head .brand .logo-line { height: 48px; }
.site-head .nav > a, .site-head .nav .sub-btn { color: #C9D3E3; }
.site-head .nav > a:hover, .site-head .nav .sub-btn:hover, .site-head .nav > a[aria-current="page"], .site-head .has-sub.current .sub-btn { color: #FFFFFF; }
.site-head .nav > a[aria-current="page"], .site-head .has-sub.current .sub-btn { box-shadow: inset 0 -2px 0 var(--gold); }
.site-head .nav > a.btn-gold { background: var(--gold); color: #0D2038; }
.site-head .nav > a.btn-gold:hover { background: #C29E5E; color: #0D2038; }
.site-head .menu-btn { border-color: rgba(255, 255, 255, .35); color: #FFFFFF; }
@media (max-width: 1120px) {
  .site-head .wrap { min-height: 80px; }
  .site-head .brand .logo-mono { height: 50px; }
  .site-head .nav { background: var(--navy); border-bottom: 2px solid var(--gold); }
  .site-head .nav > a, .site-head .nav .sub-btn { border-bottom-color: rgba(255, 255, 255, .12); }
  .site-head .nav > a[aria-current="page"], .site-head .has-sub.current .sub-btn { box-shadow: none; color: var(--gold); }
  .site-head .sub { color: #FFFFFF; }
  .site-head .sub a span { color: #C9D3E3; }
  .site-head .sub a:hover, .site-head .sub a[aria-current="page"] { background: rgba(255, 255, 255, .06); }
}
@media (max-width: 520px) { .site-head .brand .logo-mono { height: 44px; } }

/* logo always visible; large logo in the home opening section */
.brand .logo-stack { display: none; width: auto; }
.site-head .brand .logo-mono { display: none !important; }
@media (max-width: 1120px) { .site-head .brand .logo-line { display: block; height: 36px; } }
@media (max-width: 640px) { .site-head .brand .logo-line { display: none; } .site-head .brand .logo-stack { display: block; height: 54px; } .site-head .wrap { min-height: 84px; } }
.site-foot .brand .logo-stack { display: none; }
.hero-mark { display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--edge); border-radius: var(--radius); background: var(--card); color: var(--logo); }
.hero-mark .hero-logo { width: 100%; max-width: 460px; height: auto; display: block; }
@media (max-width: 860px) { .hero-mark { order: -1; padding: 28px; } .hero-mark .hero-logo { max-width: 340px; } }
@media (max-width: 640px) { .hero-mark { display: none; } }

/* ===== premium borders + centred hero with a large logo ===== */
:root { --frame: #0D3051; --lift: 6px 6px 0 rgba(13, 48, 81, 0.14), 0 18px 34px -22px rgba(13, 48, 81, 0.45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --frame: #6F8BB3; --lift: 6px 6px 0 rgba(0, 0, 0, 0.35), 0 18px 34px -22px rgba(0, 0, 0, 0.7); } }
:root[data-theme="dark"] { --frame: #6F8BB3; --lift: 6px 6px 0 rgba(0, 0, 0, 0.35), 0 18px 34px -22px rgba(0, 0, 0, 0.7); }

.card, .pledge, .partner, .plan, .quote, .ptable, .contact-list, .shell, .logo-slot, .meet .photo, .fig {
  border: 2px solid var(--frame); box-shadow: var(--lift); border-radius: var(--radius);
}
.card { border-top-width: 6px; }
.quote { border-left-width: 6px; }
.plan.pick { border-width: 3px; box-shadow: inset 0 6px 0 var(--frame), var(--lift); }
.ptable thead th { border-bottom: 3px solid var(--frame); }
.ptable { box-shadow: var(--lift); }
.logo-slot { border-style: dashed; box-shadow: none; }
.partner.ref:hover, .card:hover, .plan:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(13, 48, 81, 0.18), 0 22px 40px -22px rgba(13, 48, 81, 0.5); }
.card, .plan, .partner.ref { transition: transform .15s, box-shadow .15s; }
@media (prefers-reduced-motion: reduce) { .card, .plan, .partner.ref { transition: none; } .partner.ref:hover, .card:hover, .plan:hover { transform: none; } }

/* key figures as framed tiles */
.band { background: var(--paper); border-bottom: 0; }
.band .figs { gap: 22px; padding-block: 40px; }
.fig { background: var(--card); padding: 20px 22px; border-left: 6px solid var(--gold); }

/* every section clearly separated */
.section, .band, .closer { border-top: 3px solid var(--frame); }
.section.alt { background: var(--paper); }
.page-hero { border-bottom: 3px solid var(--frame); }
.page-hero + .section { border-top: 0; }

/* centred hero */
.hero.hero-center { border-bottom: 0; padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 88px); }
.hero.hero-center .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(28px, 4vw, 44px); }
.hero-center .hero-mark { display: block !important; order: 0; border: 0; background: none; padding: 0; width: 100%; }
.hero-center .hero-mark .hero-logo { width: min(820px, 100%); max-width: none; margin: 0 auto; }
.hero-center .hero-copy { justify-items: center; max-width: 820px; padding-top: clamp(24px, 3vw, 36px); border-top: 2px solid var(--gold); }
.hero-center .lede { margin-inline: auto; }
.hero-center .cta-row, .hero-center .promises { justify-content: center; }
.hero-center h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem); }
@media (max-width: 640px) { .hero-center .hero-mark .hero-logo { width: 100%; } .hero.hero-center .wrap { text-align: left; justify-items: stretch; } .hero-center .hero-copy { justify-items: start; } .hero-center .cta-row, .hero-center .promises { justify-content: flex-start; } }

/* menu: clearly readable on navy */
.site-head .nav > a, .site-head .nav .sub-btn { color: #FFFFFF; font-weight: 600; font-size: .98rem; opacity: 1; }
.site-head .nav > a:hover, .site-head .nav .sub-btn:hover { color: var(--gold); }
.site-head .nav > a[aria-current="page"], .site-head .has-sub.current .sub-btn { color: #FFFFFF; box-shadow: inset 0 -3px 0 var(--gold); }
@media (min-width: 1121px) { .site-head .sub { color: var(--ink); } .site-head .sub a span { color: var(--muted); } }
@media (max-width: 1120px) { .site-head .nav > a, .site-head .nav .sub-btn { font-size: 1.05rem; } .site-head .nav > a[aria-current="page"], .site-head .has-sub.current .sub-btn { box-shadow: none; color: var(--gold); } .site-head .menu-btn { border: 2px solid #FFFFFF; } }

/* home: navy band flows into the page; logo on a raised white panel overlapping it */
body:has(.hero-center) .site-head { box-shadow: none; }
.hero.hero-center { background: linear-gradient(180deg, var(--navy) 0, var(--navy) clamp(110px, 14vw, 190px), var(--paper) clamp(110px, 14vw, 190px), var(--bg) 100%); padding-top: clamp(20px, 3vw, 36px); }
.hero-center .hero-mark { background: var(--card); border: 2px solid var(--frame) !important; border-radius: var(--radius); box-shadow: var(--lift); padding: clamp(28px, 4.5vw, 56px) clamp(20px, 5vw, 64px) !important; width: min(980px, 100%); position: relative; }
.hero-center .hero-mark::after { content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); width: 120px; height: 4px; background: var(--gold); border-radius: 2px; }
.hero-center .hero-mark .hero-logo { width: min(780px, 100%); }
.hero-center .hero-copy { border-top: 0; padding-top: 0; }
.hero.hero-center + .band { border-top: 0; }
@media (max-width: 640px) { .hero.hero-center { background: linear-gradient(180deg, var(--navy) 0, var(--navy) 90px, var(--paper) 90px, var(--bg) 100%); } }

/* ===== header: WA mark on the left, white menu along the top at every width ===== */
.site-head .brand svg.logo-line, .site-head .brand svg.logo-stack { display: none !important; }
.site-head .brand svg.logo-mono { display: block !important; height: 54px; }
.site-head .wrap { position: relative; min-height: 92px; flex-wrap: wrap; row-gap: 0; }
.menu-btn { display: none !important; }
.site-head .nav { display: flex !important; position: static; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 2px; padding: 0; margin: 0; border: 0; box-shadow: none; background: none; max-height: none; overflow: visible; }
.site-head .nav > a, .site-head .nav .sub-btn { width: auto; padding: 10px 12px; border: 0; font-size: .98rem; justify-content: center; }
.site-head .nav > a.btn-gold { margin: 0 0 0 10px; padding: 11px 18px; }
.site-head .nav > a[aria-current="page"], .site-head .has-sub.current .sub-btn { color: #FFFFFF; box-shadow: inset 0 -3px 0 var(--gold); border-radius: 0; }
.site-head .sub { position: absolute; top: calc(100% + 6px); left: 0; min-width: 300px; display: none; padding: 8px; background: var(--card); color: var(--ink); border: 2px solid var(--frame); border-radius: var(--radius); box-shadow: var(--lift); }
.site-head .has-sub.open .sub { display: grid; }
.site-head .sub a span { color: var(--muted); }
.site-head .sub a:hover, .site-head .sub a[aria-current="page"] { background: var(--paper); }
@media (max-width: 820px) {
  .site-head .wrap { min-height: 0; padding-block: 12px 6px; justify-content: center; }
  .site-head .brand { width: 100%; justify-content: center; margin-bottom: 4px; }
  .site-head .brand svg.logo-mono { height: 46px; }
  .site-head .nav { width: 100%; justify-content: center; }
  .site-head .nav > a, .site-head .nav .sub-btn { padding: 9px 8px; font-size: .92rem; }
  .site-head .nav > a.btn-gold { margin: 6px 0 8px; width: 100%; }
  .site-head .has-sub { position: static; }
  .site-head .sub { left: 16px; right: 16px; min-width: 0; top: 100%; }
}

/* ===== simple footer ===== */
.site-foot .cols { display: none; }
.foot-main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; padding-block: 40px 28px; }
.foot-brand { display: grid; gap: 10px; }
.foot-brand .brand svg.logo-line { display: block !important; height: 30px; }
.foot-brand .brand svg.logo-mono, .foot-brand .brand svg.logo-stack { display: none !important; }
.foot-brand p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 26px; font-family: var(--display); font-weight: 600; font-size: .92rem; }
.foot-links a { color: #FFFFFF; text-decoration: none; }
.foot-links a:hover { color: var(--gold); }
.foot-links span { color: var(--on-navy-muted); }
.site-foot .legal { font-size: .84rem; }
.site-foot .legal .todo { color: #FFFFFF; }

/* ===== home ===== */
.trust .fig b { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.card.sum { text-decoration: none; color: inherit; }
.card.sum p { color: var(--muted); }
.card.sum .link-arrow { margin-top: auto; }
.card.sum .amt { font-size: 1.6rem; }

/* ===== closer and buttons ===== */
.closer-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.btn-wa { background: #1F8F4E; color: #FFFFFF; }
.btn-wa:hover { background: #18773F; }
.wa-ico { width: 20px; height: 20px; }
@media (max-width: 860px) { .closer-actions { justify-content: flex-start; } }

/* ===== contact page ===== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.contact-form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 34px); background: var(--card); border: 2px solid var(--frame); border-radius: var(--radius); box-shadow: var(--lift); }
.contact-form h2 { font-size: var(--step1); }
.contact-form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; color: var(--ink); }
.contact-form .opt { font-weight: 400; color: var(--muted); }
.contact-form input, .contact-form select, .contact-form textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--bg); border: 1.5px solid var(--edge); border-radius: 6px; padding: 11px 12px; width: 100%; min-width: 0; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 3px solid rgba(180, 144, 80, .45); border-color: var(--frame); }
.contact-form .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--muted); }
.contact-form .check input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.contact-form .hp { position: absolute; left: -9999px; }
.contact-form [aria-invalid="true"] { border-color: #B3261E; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form-status { margin: 0; font-size: .95rem; }
.form-status.ok { color: #1F7A45; } .form-status.err { color: #B3261E; }
.contact-side { display: grid; gap: 16px; }
.side-card { display: grid; gap: 10px; padding: 22px; background: var(--card); border: 2px solid var(--frame); border-radius: var(--radius); box-shadow: var(--lift); }
.side-card h3 { font-size: 1.05rem; }
.side-card p { color: var(--muted); font-size: .98rem; }
.side-card .btn { justify-self: start; }
.is-soon { opacity: .6; cursor: default; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .contact-form .row2 { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .site-head .nav > a.btn-gold { width: auto; margin: 4px 0 8px 6px; padding: 8px 14px; font-size: .88rem; } }
.contact-form .lab { display: block; }

/* cards in a row line up: label, heading, text and link share the same rows */
@media (min-width: 901px) {
  .grid-3 { row-gap: 0; }
  .grid-3 > .card { grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: stretch; }
  .grid-3 > .card > :last-child { align-self: end; }
  .grid-3 > .card .link-arrow { align-self: end; margin-top: 6px; }
}
.trust.figs { align-items: stretch; }
.trust .fig { display: grid; align-content: start; gap: 6px; }

/* "How it works" steps as blocks, matching the service cards */
.steps { gap: 20px; }
.steps li { background: var(--card); border: 2px solid var(--frame); border-top: 6px solid var(--frame); border-radius: var(--radius); box-shadow: var(--lift); padding: 24px; gap: 10px; }
.steps li::before { font-size: .78rem; letter-spacing: .14em; }
@media (min-width: 901px) { .steps li { grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; } .steps { row-gap: 0; } }
.steps h3 { font-size: 1.15rem; text-wrap: pretty; }
@media (max-width: 820px) { .site-head { position: relative; top: 0; } }
/* home logo panel: full gold border */
.hero-center .hero-mark { border: 3px solid var(--gold) !important; }
.hero-center .hero-mark::after { display: none; }

/* ===== services page ===== */
.svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 60px); align-items: start; }
.svc-copy { display: grid; gap: 16px; justify-items: start; }
.ticks { margin: 0; list-style: none; padding: 26px 28px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 34px; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--logo); color: var(--bg); font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.example { margin: 0; padding: 24px; display: grid; gap: 14px; }
.example figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.example figcaption b { font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.example .tag { margin-left: auto; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--edge); border-radius: 999px; padding: 2px 10px; }
.tscroll { overflow-x: auto; }
.example table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; min-width: 380px; }
.example th, .example td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; }
.example thead th { font-family: var(--display); font-size: .78rem; color: var(--muted); border-bottom: 2px solid var(--frame); }
.example tbody th { text-align: left; font-weight: 400; }
.example thead th:first-child { text-align: left; }
.example tr.total th, .example tr.total td { font-weight: 700; border-top: 2px solid var(--frame); border-bottom: 0; }
.notes-list { margin: 0; padding: 14px 0 0 16px; border-left: 4px solid var(--gold); list-style: none; display: grid; gap: 8px; color: var(--muted); font-size: .97rem; }
.notes-list b { color: var(--ink); }
.bp-figs { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.project { margin-top: 28px; padding: clamp(22px, 3vw, 32px); display: grid; gap: 12px; }
.project p { color: var(--muted); max-width: 70ch; }
.project .logos { margin-top: 12px; }
@media (max-width: 860px) { .svc-row { grid-template-columns: 1fr; } .bp-figs { grid-template-columns: 1fr; } }

/* figure/trust tiles in the same style as the service cards and steps */
.fig { border: 2px solid var(--frame); border-top: 6px solid var(--frame); border-left-width: 2px; border-left-color: var(--frame); border-radius: var(--radius); box-shadow: var(--lift); background: var(--card); padding: 24px; }
.trust .fig b, .bp-figs .fig b { font-size: var(--step1); color: var(--ink); font-weight: 700; line-height: 1.2; }
.fig span { font-size: 1rem; }
/* home opening paragraph: justified, tighter spacing */
.hero-center .lede { text-align: justify; text-align-last: center; hyphens: auto; -webkit-hyphens: auto; line-height: 1.45; max-width: 720px; }
@media (max-width: 640px) { .hero-center .lede { text-align-last: left; } }
.card.sum h3 { font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.28rem); text-wrap: nowrap; } @media (max-width: 1060px) { .card.sum h3 { text-wrap: balance; } }
/* home headline justified to the same width as the paragraph */
.hero-center h1 { max-width: 720px; width: 100%; text-align: justify; text-align-last: justify; text-wrap: wrap; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.85rem); }
@media (max-width: 640px) { .hero-center h1 { text-align: left; text-align-last: left; } }
.hero-center h1.fit { text-align: center; text-align-last: auto; }
.hero-center h1.fitted { white-space: nowrap; }
.hero-center h1.fitted .fl { display: block; width: max-content; margin: 0 auto; }
/* justified card and step text, equal heights */
.card.sum p, .steps p, .trust .fig span { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.grid-3, .steps, .figs { align-items: stretch; }
.steps li { padding: 22px 20px; }
.steps p { font-size: .98rem; word-spacing: -0.02em; }
.notes-line { margin: 18px 0 0; color: var(--muted); font-size: var(--step-1); }
/* qualification and partner badges */
.badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.badge { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 24px 18px; background: var(--card); border: 2px solid var(--frame); border-top: 6px solid var(--frame); border-radius: var(--radius); box-shadow: var(--lift); }
.badge-img { width: 100%; max-width: 180px; aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px dashed var(--edge); border-radius: 6px; color: var(--muted); font-size: .8rem; margin-bottom: 8px; }
.badge-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.badge b { font-family: var(--display); font-size: 1rem; color: var(--ink); }
.badge span { color: var(--muted); font-size: .92rem; }
@media (max-width: 900px) { .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.badges { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.badge { padding: 22px 14px; }
@media (max-width: 1100px) { .badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* SAICA logo: full colour on a white tile, at least 102px wide (SAICA rule) */
.foot-main { align-items: center; }
.foot-prof { display: flex; gap: 12px; align-items: center; }
.prof-tile { display: block; background: #FFFFFF; border-radius: 6px; padding: 8px 10px; line-height: 0; }
.prof-tile img { width: 170px; min-width: 102px; height: auto; display: block; }
.badge-img.has-logo { border: 0; background: #FFFFFF; border-radius: 6px; padding: 6px; }
.badge-img.has-logo img { width: 100%; min-width: 102px; height: auto; }
@media (max-width: 760px) { .foot-main { flex-direction: column; align-items: flex-start; } }
.prof-tile.caw { padding: 8px 12px; }
.prof-tile.caw img { width: 120px; min-width: 102px; }
.prof-tile { height: 91px; display: flex; align-items: center; }
.badge-img.has-logo img { max-height: 100%; object-fit: contain; }
/* client quotes with logo */
.quotes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.quote { border: 2px solid var(--frame); border-top: 6px solid var(--frame); border-left-width: 2px; border-radius: var(--radius); box-shadow: var(--lift); padding: 28px; grid-template-columns: auto 1fr; column-gap: 22px; align-items: start; }
.quote .q-logo { grid-row: span 2; width: 96px; height: auto; border-radius: 6px; }
.quote blockquote { font-size: 1.08rem; line-height: 1.6; text-align: justify; hyphens: auto; }
.quote figcaption b { color: var(--gold-ink); font-size: .88rem; letter-spacing: .04em; }
@media (max-width: 520px) { .quote { grid-template-columns: 1fr; } .quote .q-logo { grid-row: auto; margin-bottom: 8px; } }
.quote { grid-template-columns: 1fr; }
.quote .q-logo { grid-row: auto; height: 64px; width: auto; max-width: 180px; object-fit: contain; margin-bottom: 6px; }
.quotes { align-items: stretch; }
@media (min-width: 901px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quote { grid-template-rows: subgrid; grid-row: span 3; } .quotes { row-gap: 0; } }
.quote blockquote { font-style: italic; position: relative; }
.quote blockquote::before { content: "\201C"; position: absolute; left: -6px; top: -34px; font-family: Georgia, "Times New Roman", serif; font-style: normal; font-size: 4rem; line-height: 1; color: var(--gold); opacity: .55; }
.quote .q-logo { margin-bottom: 18px; }
.quote blockquote::before { content: none; }
.quote figcaption { display: grid; gap: 2px; }
.quote figcaption span { color: var(--muted); font-size: .9rem; }

/* banner: full one-line logo with the wording WATERS ADVISORY */
.site-head .brand svg.logo-mono { display: none !important; }
.site-head .brand svg.logo-line { display: block !important; height: 40px; width: auto; }
@media (max-width: 1100px) { .site-head .brand svg.logo-line { height: 34px; } }
@media (max-width: 820px) { .site-head .brand svg.logo-line { height: 30px; } }
@media (max-width: 400px) { .site-head .brand svg.logo-line { height: 26px; } }

/* home logo panel: same width as the headline and paragraph */
.hero-center .hero-mark { width: min(720px, 100%); padding: clamp(24px, 3.5vw, 40px) clamp(20px, 4vw, 48px) !important; }
.hero-center .hero-mark .hero-logo { width: min(560px, 100%); }
@media (min-width: 1001px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 701px) and (max-width: 1000px) { .quotes { grid-template-columns: 1fr; } .quote { grid-row: auto; grid-template-rows: none; } }
.quote blockquote { font-size: 1rem; }
/* client logos centred and larger */
.quote .q-logo { justify-self: center; align-self: center; height: 88px; width: auto; max-width: 230px; margin: 0 auto 20px; }

/* testimonial carousel */
.carousel { position: relative; display: grid; gap: 18px; }
.car-track { display: grid !important; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 20px) / 3); grid-template-columns: none !important; grid-template-rows: none; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 10px 18px 2px; scrollbar-width: none; }
.car-track::-webkit-scrollbar { display: none; }
.car-track .quote { scroll-snap-align: start; grid-row: auto !important; grid-template-rows: auto auto 1fr auto !important; }
.car-track .quote figcaption { align-self: end; }
@media (max-width: 1000px) { .car-track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 680px) { .car-track { grid-auto-columns: 100%; } }
.car-btn { position: absolute; top: 42%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--frame); background: var(--card); color: var(--logo); font-size: 1.9rem; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: var(--lift); }
.car-btn:hover { background: var(--logo); color: var(--bg); }
.car-btn.prev { left: -22px; } .car-btn.next { right: -22px; }
@media (max-width: 1260px) { .car-btn.prev { left: -6px; } .car-btn.next { right: -6px; } }
.car-dots { display: flex; justify-content: center; gap: 8px; }
.car-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--edge); }
.car-dots span.on { background: var(--gold); width: 22px; border-radius: 5px; }
@media (prefers-reduced-motion: reduce) { .car-track { scroll-behavior: auto; } }
.carousel.static .car-btn, .carousel.static .car-dots { display: none; }
@media (max-width: 1000px) {
  .carousel { grid-template-columns: auto 1fr auto; align-items: center; }
  .car-track { grid-column: 1 / -1; grid-row: 1; }
  .car-btn { position: static; transform: none; width: 42px; height: 42px; font-size: 1.6rem; }
  .car-btn.prev { grid-column: 1; grid-row: 2; } .car-btn.next { grid-column: 3; grid-row: 2; }
  .car-dots { grid-column: 2; grid-row: 2; }
}
.site-head .nav > a.btn-gold[aria-current="page"] { box-shadow: none; background: #C29E5E; }

/* pricing on phones: stacked package cards instead of the wide table */
.pcards { display: none; }
@media (max-width: 760px) {
  .ptable, .swipe { display: none !important; }
  .pcards { display: grid; gap: 16px; }
  .pcard { background: var(--card); border: 2px solid var(--frame); border-top: 6px solid var(--frame); border-radius: var(--radius); box-shadow: var(--lift); padding: 20px; display: grid; gap: 8px; }
  .pcard.pick { border-color: var(--gold); border-top-color: var(--gold); }
  .pcard h3 { font-size: 1.15rem; }
  .pc-price { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--logo); }
  .pc-price small { font-family: var(--body); font-weight: 400; font-size: .88rem; color: var(--muted); }
  .pc-sub { font-size: .95rem; color: var(--ink); background: var(--paper); border-radius: 6px; padding: 8px 10px; }
  .pcard ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .pcard li { position: relative; padding-left: 30px; font-size: .97rem; }
  .pcard li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--logo); color: var(--bg); font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
  .pcard li em { font-style: normal; color: var(--muted); }
}
.foot-brand .brand svg.logo-line { max-width: 100%; height: auto; }
.foot-brand .brand { max-width: 100%; }
@media (max-width: 400px) { .foot-brand .brand svg.logo-line { width: 280px; } .prof-tile img { width: 140px; } .prof-tile.caw img { width: 104px; } }
@media (max-width: 760px) {
  .pcard li.extra::before { content: "+"; background: transparent; color: var(--logo); border: 1.5px solid var(--logo); font-size: .85rem; }
  .pcard li.extra { color: var(--muted); }
}
.side-card .mail { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; user-select: all; }
.copy-btn.light { justify-self: start; margin: 0; color: var(--ink); border: 1.5px solid var(--edge); padding: 6px 12px; font-size: .88rem; border-radius: 6px; background: var(--bg); }
.copy-btn.light:hover { border-color: var(--logo); }
@media (min-width: 1001px) {
  .carousel { padding-inline: 34px; }
  .car-btn.prev { left: -8px !important; } .car-btn.next { right: -8px !important; }
}
.form-intro { margin: -6px 0 4px; color: var(--muted); }

/* trust band: four tiles */
.trust.figs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .trust.figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .trust.figs { grid-template-columns: 1fr; } }
@media (min-width: 1001px) { .trust .fig span { text-align: left; } }

/* pricing clean-up */
.pb { display: block; font-size: .78rem; line-height: 1.35; color: var(--muted); margin-top: 4px; font-weight: 400; }
.pcard .pb { margin: 2px 0 6px; font-size: .9rem; }
.pay-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0; padding: 0; max-width: 900px; }
.pay-head { padding: 26px 28px; display: grid; align-content: start; gap: 12px; border-right: 1px solid var(--line); }
.pay-head .pp { font-size: 2rem; }
.pay-head .pp small { font-size: .9rem; font-weight: 400; color: var(--muted); font-family: var(--body); }
.pay-head p { margin: 0; color: var(--muted); }
@media (max-width: 700px) { .pay-card { grid-template-columns: 1fr; } .pay-head { border-right: 0; border-bottom: 1px solid var(--line); } }

.quick { margin: 0 0 28px; }
.quick ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.quick li { border: 1px solid var(--line); border-top: 3px solid var(--gold, #B49050); border-radius: 8px; background: var(--bg); padding: 12px 14px; display: grid; gap: 2px; }
.quick li span { font-size: .85rem; color: var(--muted); }
.quick li b { font-family: var(--display); color: var(--ink); font-size: .98rem; line-height: 1.25; }
.quick li em { font-style: normal; font-weight: 800; color: var(--logo); }
@media (max-width: 1000px) { .quick ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .quick ul { grid-template-columns: 1fr; } .quick li { grid-template-columns: 1fr auto; } .quick li span { grid-column: 1 / -1; } }

.ptable .pb { display: none; }
.pay-card .ticks { padding: 26px 28px; }
.pay-head .pw { font-size: 1rem; color: var(--ink); font-weight: 600; }

/* about page */
.about-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.about-grid h3 { font-size: 1.1rem; }
@media (max-width: 1000px) { .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .about-grid { grid-template-columns: 1fr; } }
.meet .copy > p { color: var(--muted); }

.about-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .about-grid.three { grid-template-columns: 1fr; } }
/* anchor jumps land below the sticky header */
html { scroll-padding-top: 96px; }
@media (max-width: 820px) { html { scroll-padding-top: 12px; } }
@media (max-width: 400px) { .badges { gap: 10px; } .badge { padding: 16px 8px; min-width: 0; } .badge b { font-size: .88rem; overflow-wrap: anywhere; } .badge span { font-size: .82rem; } }
.check input[type=checkbox] { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--navy); }
.badge-img { box-sizing: border-box; }
.badge { grid-template-columns: minmax(0, 1fr); } .badge-img { justify-self: stretch; max-width: 180px; margin-inline: auto; }
@media (max-width: 900px) { .badges .badge:first-child { grid-column: 1 / -1; } .badges .badge:first-child .badge-img img { min-width: 120px; } }

/* privacy page spacing */
.section .legal-doc { display: block; }
.section .legal-doc > * { max-width: 760px; }
.section .legal-doc h2 { font-size: 1.3rem; line-height: 1.3; margin: 2.4rem 0 .6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.section .legal-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.section .legal-doc p { margin: 0 0 .8rem; line-height: 1.7; color: var(--muted); }
.section .legal-doc ul { margin: .4rem 0 1rem; padding-left: 1.3rem; display: grid; gap: .4rem; color: var(--muted); }
.section .legal-doc .updated { margin-top: 2.4rem; font-size: .9rem; }

/* "All ..." link only needed on touch screens */
@media (hover: hover) and (pointer: fine) { .sub a.sub-all { display: none; } }