:root {
      --bg: #f9f5ee;
      --bg2: #f0e9dd;
      --ink: #1c2740;
      --mute: #5b6270;
      --amber: #e8a23a;
      --brown: #9a6212;
      --card: #fff;
      --line: #e3dccd;
      --navy: #1c2740;
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px)
    }

    html {
      scroll-padding-top: env(safe-area-inset-top, 0px)
    }

    @media (prefers-color-scheme:dark) {
      :root:not([data-theme="light"]) {
        --bg: #141a28;
        --bg2: #1b2336;
        --ink: #f1ebdf;
        --mute: #a9afbd;
        --brown: #e8a23a;
        --card: #222b40;
        --line: #323c55;
        --navy: #e8a23a
      }
    }

    :root[data-theme="dark"] {
      --bg: #141a28;
      --bg2: #1b2336;
      --ink: #f1ebdf;
      --mute: #a9afbd;
      --brown: #e8a23a;
      --card: #222b40;
      --line: #323c55;
      --navy: #e8a23a
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font: 400 16px/1.7 "Source Sans 3", system-ui, sans-serif
    }

    h1,
    h2,
    h3 {
      font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
      line-height: 1.05;
      margin: 0
    }

    a {
      color: inherit
    }

    .wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px
    }

    .hero {
      background: linear-gradient(90deg, rgba(18, 26, 43, .92), rgba(18, 26, 43, .55)), url(../images/195a3dbaa545ffe9be50aae383cc2dbe94f88f2d.webp) center/cover, linear-gradient(120deg, #7a6548, #34425c 60%, #1b2336);
      color: #fff;
      padding: 72px 0 80px;
    }



    .hero .wrap {
      position: relative;
      z-index: 1
    }

    .hero small {
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--amber);
      font-weight: 700
    }

    .hero h1 {
      font-size: clamp(40px, 7vw, 60px);
      max-width: 470px;
      margin: 28px 0 20px;
      color: #fbf5e8
    }

    .hero p {
      max-width: 460px;
      color: #d6d3dc;
      margin: 0 0 28px;
      font-size: 17px
    }

    .btn {
      display: inline-block;
      padding: 11px 16px;
      border-radius: 4px;
      font-weight: 600;
      font-size: 14px;
      text-decoration: none;
      border: 1px solid transparent;
      cursor: pointer
    }

    .btn.amber {
      background: var(--amber);
      color: #1c2740
    }

    .btn.ghost {
      border-color: #f6efe0;
      color: #f6efe0;
      margin-left: 6px
    }

    .btn.navy {
      background: #1c2740;
      color: #fff
    }

    .facts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 14px;
      margin: 52px 0 20px;
      max-width: 640px
    }

    .fact {
      background: var(--bg2);
      border-radius: 8px;
      padding: 14px 16px
    }

    .fact span {
      display: block;
      font-size: 10.5px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--brown);
      font-weight: 700
    }

    .fact b {
      display: block;
      font-family: "Barlow Condensed", sans-serif;
      font-size: 17px;
      line-height: 1.25;
      margin-top: 4px
    }

    .guide {
      max-width: 340px
    }

    .guide-col {
      max-width: 380px
    }

    .sec {
      padding: 26px 0 24px
    }

    .sec h2 {
      font-size: 32px;
      margin-bottom: 12px
    }

    .sec p {
      margin: 0;
      color: var(--mute);
      font-size: 15.5px;
      max-width: 380px
    }

    .sec p a {
      color: var(--ink)
    }

    .band {
      background: var(--bg2);
      padding: 56px 0 64px;
      margin-top: 40px
    }

    .band .k {
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--brown);
      font-weight: 700
    }

    .band h2 {
      font-size: 32px;
      margin: 14px 0 8px;
      color: var(--ink)
    }

    .price {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      max-width: 540px;
      margin-bottom: 20px
    }

    .price b {
      font: 700 32px/1 "Barlow Condensed", sans-serif;
      white-space: nowrap
    }

    .price p {
      margin: 0;
      font-size: 13.5px;
      color: var(--mute);
      line-height: 1.55
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 10px;
      max-width: 600px
    }

    .card .in {
      padding: 16px 20px
    }

    .card .top {
      font-size: 13px;
      color: var(--mute);
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 12px
    }

    .card .top b {
      color: var(--ink)
    }

    .row {
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 12px;
      font-size: 13px;
      color: var(--ink);
      padding: 5px 0;
      line-height: 1.5
    }

    .row span {
      font-size: 10.5px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--brown);
      font-weight: 700;
      padding-top: 2px
    }

    details {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 10px
    }

    details summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      font-weight: 600;
      font-size: 14px
    }

    details summary::-webkit-details-marker {
      display: none
    }

    details summary:after {
      content: "+";
      font-size: 20px;
      font-weight: 400
    }

    details[open]>summary:after {
      content: "\2212"
    }

    details .body {
      padding: 0 20px 18px;
      font-size: 14px;
      color: var(--mute);
      line-height: 1.6
    }

    .inc {
      max-width: 600px;
      margin: 14px 0 20px
    }

    .fine {
      font-size: 12px;
      color: var(--mute);
      margin: 12px 0 0
    }

    .faq {
      padding: 72px 0 80px
    }

    .faq h2 {
      font-size: 34px
    }

    .faq>.wrap>p {
      color: var(--mute);
      font-size: 14px;
      max-width: 380px;
      margin: 10px 0 18px
    }

    .faqlist {
      max-width: 410px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden
    }

    .faqlist details {
      border: 0;
      border-radius: 0;
      border-bottom: 1px solid var(--line)
    }

    .faqlist details:last-child {
      border-bottom: 0
    }

    .faqlist summary {
      font-family: "Barlow Condensed", sans-serif;
      font-size: 19px;
      font-weight: 700;
      padding: 20px 22px
    }

    .faqlist .body {
      padding: 0 22px 22px
    }

    .stops {
      padding: 40px 0 80px
    }

    .stops h2 {
      font-size: 40px
    }

    .stops .lead {
      color: var(--mute);
      max-width: 440px;
      margin: 12px 0 32px
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 32px
    }

    .stop {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden
    }

    .img {
      height: 230px;
      background: var(--bg2)
    }

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

    .i1 {
      background: radial-gradient(ellipse at 40% 80%, #2fb5a6 0 25%, transparent 55%), linear-gradient(180deg, #4f9bd1 0 18%, #b88b5c 18% 60%, #6b8f4e 60%)
    }

    .i2 {
      background: radial-gradient(ellipse at 45% 80%, #25a08f 0 28%, transparent 58%), linear-gradient(180deg, #2c6aa8 0 25%, #a9764a 25% 62%, #5d7f3f 62%)
    }

    .i3 {
      background: linear-gradient(180deg, #27406b 0 22%, #e0b678 22% 40%, #a8744a 40% 70%, #6b4a32 70%)
    }

    .sb {
      padding: 24px
    }

    .sb h3 {
      font-size: 24px;
      font-weight: 700
    }

    .meta {
      font-size: 13px;
      color: var(--brown);
      margin: 6px 0 10px
    }

    .sb p {
      margin: 0 0 12px;
      font-size: 14px;
      color: var(--mute);
      line-height: 1.65
    }

    .sb a {
      font-weight: 600;
      font-size: 14px;
      text-decoration: none;
      border-bottom: 1px solid var(--mute)
    }

    .cta {
      background: #e8a23a;
      color: #1c2740;
      padding: 84px 0
    }

    .cta-in {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 32px;
      flex-wrap: wrap
    }

    .cta h2 {
      font-size: 40px
    }

    .cta p {
      margin: 12px 0 0;
      max-width: 400px
    }

    .cta .btn.navy {
      background: #1c2740;
      color: #fff
    }

    :focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 2px
    }

    @media(max-width:560px) {
      .btn {
        display: block;
        width: 100%;
        text-align: center
      }

      .btn.ghost {
        margin: 10px 0 0
      }

      .row {
        grid-template-columns: 1fr;
        gap: 0
      }
    }