:root {
      --ink: #18211d;
      --muted: #59635e;
      --line: #d9ded8;
      --paper: #faf9f4;
      --panel: #ffffff;
      --moss: #294d3c;
      --fern: #5b7f52;
      --rail: #9d3429;
      --gold: #d8aa4f;
      --sky: #e8f1f0;
      --shadow: 0 18px 45px rgba(24, 33, 29, .16);
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--ink);
      background: var(--paper);
      line-height: 1.55;
    }

    a { color: inherit; }

    .notice {
      background: #14241c;
      color: #f6f2df;
      font-size: 13px;
      padding: 9px 18px;
      text-align: center;
    }

    .notice a {
      color: #fff2b8;
      font-weight: 700;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(250, 249, 244, .92);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(41, 77, 60, .14);
    }

    .nav {
      max-width: 1180px;
      margin: 0 auto;
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 0 24px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      min-width: 215px;
    }

    .mark {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: conic-gradient(from 120deg, var(--rail), var(--gold), var(--fern), var(--moss), var(--rail));
      position: relative;
      box-shadow: inset 0 0 0 7px #fff;
    }

    .mark::after {
      content: "";
      position: absolute;
      width: 22px;
      height: 4px;
      border-radius: 6px;
      left: 10px;
      top: 19px;
      background: #fff;
      box-shadow: 0 8px 0 rgba(255,255,255,.88);
    }

    .brand strong {
      display: block;
      font-size: 17px;
      letter-spacing: .2px;
    }

    .brand span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-top: -2px;
    }

    .links {
      display: flex;
      align-items: center;
      gap: 22px;
      color: #33423a;
      font-size: 14px;
      font-weight: 650;
    }

    .links a {
      text-decoration: none;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 18px;
      border-radius: 6px;
      border: 1px solid transparent;
      background: var(--rail);
      color: #fff;
      font-weight: 800;
      text-decoration: none;
      box-shadow: 0 12px 24px rgba(157, 52, 41, .22);
      cursor: pointer;
      white-space: nowrap;
    }

    .button.secondary {
      background: #fff;
      color: var(--moss);
      border-color: rgba(41, 77, 60, .28);
      box-shadow: none;
    }

    .hero {
      position: relative;
      min-height: calc(100vh - 110px);
      display: grid;
      align-items: end;
      color: #fff;
      overflow: hidden;
      background: #183024;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(9, 17, 13, .88) 0%, rgba(9, 17, 13, .55) 46%, rgba(9, 17, 13, .20) 100%),
        linear-gradient(0deg, rgba(9, 17, 13, .90) 0%, rgba(9, 17, 13, .05) 42%);
      z-index: 1;
    }

    .hero img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(.96) contrast(1.02);
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: 1180px;
      width: 100%;
      margin: 0 auto;
      padding: 88px 24px 54px;
    }

    .eyebrow {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      padding: 7px 11px;
      border: 1px solid rgba(255,255,255,.30);
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      color: #fff7dd;
      font-size: 13px;
      font-weight: 750;
    }

    h1 {
      max-width: 760px;
      margin: 20px 0 18px;
      font-size: clamp(42px, 7vw, 82px);
      line-height: .98;
      letter-spacing: 0;
    }

    .lead {
      max-width: 650px;
      margin: 0 0 28px;
      font-size: clamp(17px, 2vw, 21px);
      color: #f3efe2;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    .micro {
      max-width: 520px;
      margin-top: 18px;
      color: #e1dcc8;
      font-size: 13px;
    }

    .quick-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: rgba(255,255,255,.18);
      margin-top: 58px;
      border: 1px solid rgba(255,255,255,.20);
    }

    .quick-strip div {
      background: rgba(11, 24, 18, .66);
      padding: 18px;
      min-height: 94px;
    }

    .quick-strip b {
      display: block;
      color: #fff;
      font-size: 15px;
    }

    .quick-strip span {
      display: block;
      margin-top: 5px;
      color: #d9dfd8;
      font-size: 13px;
    }

    section {
      padding: 78px 24px;
    }

    .wrap {
      max-width: 1180px;
      margin: 0 auto;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(280px, .55fr);
      gap: 36px;
      align-items: end;
      margin-bottom: 34px;
    }

    h2 {
      margin: 0;
      font-size: clamp(30px, 4vw, 50px);
      line-height: 1.04;
      letter-spacing: 0;
    }

    .section-head p,
    .muted {
      color: var(--muted);
      margin: 0;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 22px;
      box-shadow: 0 8px 28px rgba(24, 33, 29, .06);
    }

    .card h3 {
      margin: 0 0 10px;
      font-size: 22px;
      line-height: 1.15;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      margin-bottom: 14px;
      border-radius: 999px;
      color: #193225;
      background: #e9f0e2;
      font-size: 12px;
      font-weight: 800;
    }

    .route-list {
      list-style: none;
      margin: 18px 0 0;
      padding: 0;
      border-top: 1px solid var(--line);
    }

    .route-list li {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
    }

    .route-list strong {
      color: var(--moss);
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(320px, .72fr);
      gap: 42px;
      align-items: center;
    }

    .photo {
      position: relative;
      min-height: 470px;
      overflow: hidden;
      border-radius: 8px;
      box-shadow: var(--shadow);
      background: var(--sky);
    }

    .photo img {
      width: 100%;
      height: 100%;
      min-height: 470px;
      object-fit: cover;
      display: block;
    }

    .callout {
      border-left: 5px solid var(--gold);
      background: #fff8e6;
      padding: 16px 18px;
      margin: 22px 0;
      color: #4a3a17;
    }

    .steps {
      display: grid;
      gap: 14px;
      margin-top: 24px;
    }

    .step {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 14px;
      align-items: start;
    }

    .num {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--moss);
      color: #fff;
      font-weight: 900;
    }

    .step h3 {
      margin: 0 0 4px;
      font-size: 18px;
    }

    .step p { margin: 0; color: var(--muted); }

    .band {
      background: #edf4ef;
      border-block: 1px solid #dce7df;
    }

    .compare {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }

    .feature {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      align-items: start;
      padding: 18px;
      border-bottom: 1px solid rgba(41, 77, 60, .13);
    }

    .feature svg {
      width: 24px;
      height: 24px;
      stroke: var(--rail);
      stroke-width: 2;
      fill: none;
      margin-top: 2px;
    }

    .feature strong { display: block; margin-bottom: 2px; }
    .feature span { color: var(--muted); font-size: 14px; }

    .faq {
      display: grid;
      gap: 12px;
    }

    details {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 16px 18px;
    }

    summary {
      cursor: pointer;
      font-weight: 850;
    }

    details p {
      margin: 12px 0 0;
      color: var(--muted);
    }

    .booking {
      background: #182820;
      color: #fff;
      padding: 42px;
      border-radius: 8px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: center;
    }

    .booking h2 {
      color: #fff;
      font-size: clamp(28px, 4vw, 44px);
    }

    .booking p {
      color: #dbe2d7;
      margin: 12px 0 0;
      max-width: 760px;
    }

    footer {
      background: #101915;
      color: #dce3dc;
      padding: 34px 24px;
    }

    footer .wrap {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: start;
    }

    footer p {
      margin: 5px 0;
      color: #b9c3bc;
      font-size: 13px;
      max-width: 790px;
    }

    .footer-links {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      font-size: 13px;
      font-weight: 700;
    }

    @media (max-width: 880px) {
      .links { display: none; }
      .nav { min-height: 66px; padding-inline: 18px; }
      .hero { min-height: auto; }
      .hero-inner { padding: 74px 18px 38px; }
      .quick-strip,
      .cards,
      .compare,
      .section-head,
      .split,
      .booking,
      footer .wrap {
        grid-template-columns: 1fr;
      }
      .quick-strip { margin-top: 38px; }
      section { padding: 58px 18px; }
      .photo,
      .photo img { min-height: 330px; }
      .booking { padding: 28px; }
    }

    @media (max-width: 520px) {
      .brand { min-width: 0; }
      .brand strong { font-size: 15px; }
      .brand span { font-size: 11px; }
      .button { width: 100%; }
      .hero-actions { align-items: stretch; }
      .quick-strip div { min-height: 82px; }
      .route-list li { display: block; }
      .route-list strong { display: block; margin-bottom: 2px; }
    }