:root {
      --primary: #0b4f4a;
      --primary-ink: #063532;
      --primary-soft: #e4f3f1;
      --accent: #c97816;
      --accent-ink: #8a4e08;
      --accent-soft: #fdf0de;
      --text: #1c2423;
      --muted: #4d5b59;
      --line: #d5e0de;
      --bg: #ffffff;
      --bg-alt: #f4f8f7;
      --radius: 14px;
      --shadow: 0 8px 24px rgba(6, 53, 50, 0.08);
      --header-h: 72px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    body {
      margin: 0;
      font-family: "Source Sans 3", system-ui, sans-serif;
      color: var(--text);
      background: var(--bg);
      line-height: 1.65;
    }

    img { max-width: 100%; height: auto; display: block; }
    a { color: var(--primary); }
    a:hover { color: var(--accent-ink); }
    :focus { outline: none; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

    .skip {
      position: absolute;
      left: 12px;
      top: -48px;
      background: var(--primary);
      color: #fff;
      padding: 8px 14px;
      z-index: 100;
      border-radius: 8px;
    }
    .skip:focus { top: 12px; }

    .wrap {
      width: calc(100% - 48px);
      max-width: 1520px;
      margin-inline: auto;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 40;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
      min-height: var(--header-h);
    }
    .topbar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      min-height: var(--header-h);
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--primary-ink);
      font-weight: 700;
      letter-spacing: -0.02em;
      font-size: 1.02rem;
      flex-shrink: 0;
    }
    .logo-mark {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: var(--primary);
      color: #fff;
      display: grid;
      place-items: center;
      font-family: "Source Serif 4", Georgia, serif;
      font-weight: 700;
    }

    .nav-desktop { display: none; flex: 1; }
    .nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; justify-content: flex-end; }
    .nav-item { position: relative; }
    .nav-trigger {
      appearance: none;
      border: 0;
      background: transparent;
      font: inherit;
      color: var(--text);
      padding: 10px 14px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
    }
    .nav-trigger:hover,
    .nav-item:focus-within .nav-trigger { background: var(--primary-soft); color: var(--primary-ink); }

    .mega {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 520px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px;
      display: none;
      grid-template-columns: 1fr 1fr;
      gap: 8px 28px;
    }
    .nav-item:hover .mega,
    .nav-item:focus-within .mega { display: grid; }
    .mega a { display: block; text-decoration: none; padding: 8px 0; color: var(--text); }
    .mega a strong { display: block; color: var(--primary-ink); }
    .mega a span { display: block; color: var(--muted); font-size: 0.9rem; }
    .mega a:hover strong { color: var(--accent-ink); }

    .header-tools {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .apply-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--accent);
      color: #1a1206;
      text-decoration: none;
      font-weight: 750;
      padding: 9px 16px;
      border-radius: 10px;
      line-height: 1.2;
    }
    .apply-btn:hover { filter: brightness(0.96); color: #1a1206; }

    .menu-btn {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 10px;
      padding: 8px 12px;
      font: inherit;
      font-weight: 600;
      cursor: pointer;
    }

    .drawer {
      position: fixed;
      inset: 0;
      z-index: 50;
      background: #fff;
      transform: translateX(100%);
      visibility: hidden;
      transition: transform 0.28s ease, visibility 0.28s;
      overflow: auto;
      padding: 16px 20px 40px;
    }
    .drawer.open { transform: translateX(0); visibility: visible; }
    .drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .drawer-close {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 10px;
      padding: 8px 12px;
      font: inherit;
      font-weight: 600;
      cursor: pointer;
    }
    .acc-btn {
      width: 100%;
      text-align: left;
      font: inherit;
      font-weight: 700;
      font-size: 1.05rem;
      background: var(--bg-alt);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px 16px;
      cursor: pointer;
      margin-top: 10px;
    }
    .acc-panel { display: none; padding: 8px 8px 16px; }
    .acc-panel.open { display: block; }
    .acc-panel a {
      display: block;
      text-decoration: none;
      padding: 12px 8px;
      border-bottom: 1px solid var(--line);
      color: var(--text);
    }

    .hero {
      position: relative;
      isolation: isolate;
      min-height: 560px;
      background: var(--primary-ink);
      color: #fff;
      overflow: hidden;
    }
    .hero-media {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 62%;
      background: url("/images/hero.jpg") 82% center / cover no-repeat;
    }
    .hero-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--primary-ink) 0%, rgba(6,53,50,0.78) 22%, rgba(6,53,50,0.28) 58%, rgba(6,53,50,0.04) 100%);
    }
    .hero-inner {
      position: relative;
      z-index: 1;
      width: calc(100% - 48px);
      max-width: 1520px;
      margin: 0 auto;
      padding: 64px 0 72px;
    }
    .hero-copy { max-width: 440px; text-align: left; }
    .eyebrow {
      display: inline-block;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.22);
      color: #f7e7c8;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 6px 10px;
      border-radius: 999px;
      margin-bottom: 18px;
    }
    h1 {
      font-family: "Source Serif 4", Georgia, serif;
      font-size: clamp(2rem, 4vw, 3.05rem);
      line-height: 1.12;
      margin: 0 0 16px;
      font-weight: 700;
      letter-spacing: -0.03em;
    }
    .lede {
      font-size: 1.08rem;
      color: rgba(255,255,255,0.9);
      margin: 0 0 24px;
    }

    .amount-card {
      background: #fff;
      color: var(--text);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }
    .amount-card label { display: block; font-weight: 700; margin-bottom: 10px; }
    .amounts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 12px;
    }
    .amounts input { position: absolute; opacity: 0; pointer-events: none; }
    .amounts span {
      display: block;
      text-align: center;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 4px;
      font-weight: 700;
      cursor: pointer;
    }
    .amounts label:hover span { border-color: var(--primary); }
    .amounts input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
    .amounts input:checked + span {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      border: 0;
      background: var(--accent);
      color: #1a1206;
      font: inherit;
      font-weight: 750;
      font-size: 1.05rem;
      padding: 14px 18px;
      border-radius: 12px;
      cursor: pointer;
      text-decoration: none;
    }
    .btn:hover { filter: brightness(0.96); color: #1a1206; }
    .btn-outline {
      background: transparent;
      color: var(--primary-ink);
      border: 1px solid var(--primary);
      width: auto;
      padding-inline: 20px;
    }
    .fine { margin: 10px 0 0; font-size: 0.82rem; color: var(--muted); }

    section { padding: 72px 0; }
    .bg-alt { background: var(--bg-alt); }
    h2 {
      font-family: "Source Serif 4", Georgia, serif;
      font-size: clamp(1.55rem, 3vw, 2.1rem);
      line-height: 1.2;
      margin: 0 0 14px;
      letter-spacing: -0.02em;
    }
    .section-lead { color: var(--muted); margin: 0 0 28px; }
    h3 { margin: 0 0 8px; font-size: 1.15rem; }
    .prose p { margin: 0 0 14px; }

    .river {
      height: 18px;
      background: radial-gradient(120% 12px at 50% 100%, transparent 40%, var(--bg-alt) 41%);
    }
    .bg-alt + .river { background: radial-gradient(120% 12px at 50% 100%, transparent 40%, #fff 41%); }

    .grid-3, .grid-2, .grid-4 { display: grid; gap: 20px; }
    .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }

    .card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 22px;
    }
    .icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: var(--primary-soft);
      color: var(--primary);
      display: grid;
      place-items: center;
      font-weight: 800;
      margin-bottom: 12px;
    }
    .use-list { margin: 0; padding-left: 18px; }
    .use-list li { margin: 10px 0; }

    .why-list { margin: 0; padding: 0; list-style: none; }
    .why-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .why-list li:last-child { border-bottom: 0; }

    .calc {
      display: grid;
      gap: 16px;
      margin-top: 8px;
    }
    .calc label { font-weight: 650; display: block; margin-bottom: 6px; }
    .calc input, .calc select {
      width: 100%;
      font: inherit;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
    }
    .calc-out {
      background: var(--bg-alt);
      border-radius: 12px;
      padding: 16px;
    }

    details {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 10px;
    }
    summary { cursor: pointer; font-weight: 700; }
    details p { margin: 10px 0 0; }

    .notice, .warn {
      border-radius: var(--radius);
      padding: 18px 20px;
    }
    .notice {
      background: var(--primary-soft);
      border: 1px solid #c5dedb;
    }
    .warn {
      background: var(--accent-soft);
      border: 1px solid #efd2a4;
    }

    .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

    .disclosure {
      background: var(--bg-alt);
      border-top: 1px solid var(--line);
      padding: 28px 0;
      font-size: 0.92rem;
    }

    footer {
      background: var(--primary-ink);
      color: #dceae8;
      padding: 48px 0 28px;
    }
    footer a { color: #f3d7a4; }
    .foot-grid { display: grid; gap: 24px; margin-bottom: 28px; }
    .legal { font-size: 0.82rem; color: #b7c9c6; }

    @media (min-width: 1100px) {
      .nav-desktop { display: block; }
      .menu-btn { display: none; }
      .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; }
      .calc { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
    }
    @media (min-width: 860px) and (max-width: 1099px) {
      .nav-desktop { display: block; }
      .menu-btn { display: none; }
      .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; }
      .calc { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
    }

    @media (max-width: 859px) {
      .hero { min-height: 0; }
      .hero-media {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: auto;
        width: 100%;
        height: 340px;
        background-position: 72% 28%;
        background-size: cover;
      }
      .hero-media::after {
        background: linear-gradient(180deg, rgba(6,53,50,0.08) 0%, rgba(6,53,50,0.12) 42%, rgba(6,53,50,0.72) 78%, var(--primary-ink) 100%);
      }
      .hero-inner {
        width: calc(100% - 32px);
        padding: 268px 0 36px;
      }
      .hero-copy { max-width: none; }
    }

    /* Inner pages */
    section.page-hero {
      background: linear-gradient(160deg, var(--primary-ink) 0%, var(--primary) 70%);
      color: #fff;
      padding: 32px 0 36px;
    }
    .page-hero h1 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.35rem); }
    .page-hero .lede {
      color: rgba(255,255,255,0.9);
      max-width: none;
      margin-bottom: 0;
    }
    .page-hero .wrap,
    .page-body > .wrap {
      max-width: 900px;
    }
    .crumbs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      font-size: 0.9rem;
      margin: 0 0 14px;
      color: rgba(255,255,255,0.78);
    }
    .crumbs a { color: #f3d7a4; text-decoration: none; }
    .crumbs a:hover { text-decoration: underline; }
    .page-body { padding: 36px 0 64px; }
    .page-grid {
      display: grid;
      gap: 28px;
    }
    @media (min-width: 880px) {
      .page-grid { grid-template-columns: minmax(0, 1fr) 230px; align-items: start; }
    }
    .article-hero-img {
      border-radius: var(--radius);
      overflow: hidden;
      margin: 0 0 24px;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }
    .article-hero-img img { width: 100%; }
    .page-body .prose { max-width: none; }
    .prose h2 { margin-top: 32px; }
    .prose h3 { margin-top: 20px; }
    .prose ul, .prose ol { margin: 0 0 16px; padding-left: 1.2rem; }
    .prose li { margin: 8px 0; }
    .prose table {
      width: 100%;
      border-collapse: collapse;
      margin: 8px 0 24px;
      font-size: 0.95rem;
    }
    .prose th, .prose td {
      border: 1px solid var(--line);
      padding: 10px 12px;
      text-align: left;
      vertical-align: top;
    }
    .prose th { background: var(--primary-soft); color: var(--primary-ink); }
    .cta-band {
      background: var(--primary-soft);
      border: 1px solid #c5dedb;
      border-radius: var(--radius);
      padding: 22px;
      margin-top: 32px;
    }
    .cta-band .btn { width: auto; display: inline-flex; text-decoration: none; }
    .side-card { position: sticky; top: 96px; }
    .side-card p { color: var(--muted); font-size: 0.95rem; margin: 0 0 10px; }
    .principle-list { display: grid; gap: 16px; margin: 16px 0 24px; }
    @media (min-width: 700px) {
      .principle-list { grid-template-columns: repeat(3, 1fr); }
    }
    .contact-form {
      display: grid;
      gap: 12px;
      margin: 8px 0 28px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--bg-alt);
    }
    .contact-form label { font-weight: 650; }
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
      width: 100%;
      font: inherit;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
    }
    .contact-form textarea { min-height: 140px; resize: vertical; }
    .contact-form .btn { width: auto; justify-self: start; }
    .check-list { list-style: none; padding-left: 0; }
    .check-list li { padding-left: 1.6rem; position: relative; }
    .check-list li::before {
      content: "";
      position: absolute;
      left: 0; top: 0.35em;
      width: 1em; height: 1em;
      border: 1.5px solid var(--primary);
      border-radius: 4px;
    }