@font-face {
      font-family: Inter;
      src: url("fonts/Inter-Variable.woff2") format("woff2-variations");
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }
    :root {
      --navy: #172b50;
      --ice: #f0f7ff;
      --green: #137c43;
      --muted: #536583;
      --line: #d8e4f2;
      --paper: #ffffff;
      --lavender: #F0EBFF;
      --gold: #F6C65B;
      --purple: #8B6BD0;
      --teal: #69BEA0;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
      color: var(--navy);
      background: var(--ice);
      line-height: 1.55;
      font-size: 1.0625rem;
    }
    a { color: var(--green); }
    a:hover { color: var(--navy); }
    a:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
    img { max-width: 100%; height: auto; display: block; }
    .wrap { width: min(1120px, calc(100% - 2.5rem)); margin-inline: auto; }
    header.site {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.25rem 0 0.5rem;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      text-decoration: none;
      color: inherit;
      min-width: 0;
    }
    .brand img { width: 44px; height: 44px; border-radius: 12px; }
    .brand span { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; }
    .badge {
      display: inline-block;
      background: var(--lavender);
      color: var(--navy);
      font-size: 0.75rem;
      font-weight: 650;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 0.35rem 0.7rem;
      border-radius: 999px;
      white-space: nowrap;
    }
    .hero { padding: 2.25rem 0 1.5rem; }
    .hero h1 {
      font-size: clamp(1.85rem, 4vw, 2.85rem);
      line-height: 1.15;
      letter-spacing: -0.03em;
      margin: 0 0 1rem;
      max-width: 22ch;
    }
    .hero .lead { font-size: 1.15rem; max-width: 42rem; margin: 0 0 1rem; }
    .hero p { max-width: 42rem; margin: 0 0 1rem; color: var(--muted); }
    .hero .lead + p { color: var(--navy); }
    .disclaimer {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 0.9rem 1.1rem;
      max-width: 42rem;
      color: var(--navy);
      font-size: 0.98rem;
    }
    .hero-shot { margin: 2.25rem 0 0; }
    .hero-shot figure, .gallery figure {
      margin: 0;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(23, 43, 80, 0.06);
    }
    .hero-shot img, .gallery img { width: 100%; }
    figcaption {
      padding: 0.8rem 1rem 1rem;
      font-size: 0.92rem;
      color: var(--muted);
    }
    .features { padding: 1rem 0 2rem; }
    .features h2, .gallery-sec h2 {
      font-size: 1.35rem;
      letter-spacing: -0.02em;
      margin: 0 0 1rem;
    }
    .features ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
    @media (min-width: 720px) {
      .features ul { grid-template-columns: 1fr 1fr; gap: 0.9rem 1.5rem; }
    }
    .features li {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 1rem 1.1rem;
    }
    .features li strong { display: block; margin-bottom: 0.25rem; }
    .features li span { color: var(--muted); font-size: 0.98rem; }
    .gallery-sec { padding: 0 0 3rem; }
    .gallery {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }
    @media (min-width: 800px) {
      .gallery.pair { grid-template-columns: 1fr 1fr; }
    }
    .note { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.25rem; }
    .source { margin: 0 0 2.5rem; }
    .hills {
      display: block;
      width: 100%;
      height: 110px;
      margin-top: 1rem;
    }
    footer.site {
      border-top: 1px solid var(--line);
      padding: 1.25rem 0 2rem;
      text-align: center;
    }
    footer.site a {
      color: var(--muted);
      font-size: 0.88rem;
      text-decoration: none;
    }
    footer.site a:hover { color: var(--navy); text-decoration: underline; }
    @media (max-width: 420px) {
      .wrap { width: min(1120px, calc(100% - 1.5rem)); }
      header.site { align-items: flex-start; }
    }

.gallery-follow { margin-top: 1.25rem; }
.caption-center { text-align: center; }
.brand img.mark { width: 44px; height: 44px; }