@font-face {
      font-family: "ITC Legacy Sans";
      src: url("../fonts/itc-legacy-sans-bold.otf") format("opentype");
      font-style: normal;
      font-weight: 700;
      font-display: swap;
    }
    @font-face {
      font-family: "Source Sans 3";
      src: url("https://fonts.gstatic.com/s/sourcesans3/v19/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8Ky461EN.ttf") format("truetype");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: "Source Sans 3";
      src: url("https://fonts.gstatic.com/s/sourcesans3/v19/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8Kxf7FEN.ttf") format("truetype");
      font-style: normal;
      font-weight: 700;
      font-display: swap;
    }

    :root {
      --night: #1e2a32;
      --forest: #9fcc3a;
      --forest-2: #00aeef;
      --blue: #00aeef;
      --lime: #9fcc3a;
      --sand: #f2f4f5;
      --paper: #ffffff;
      --white: #fff;
      --ink: #1e2a32;
      --muted: #5a6b75;
      --line: rgba(30, 42, 50, .14);
      --radius: 24px;
      --shadow: 0 24px 70px rgba(30, 42, 50, .16);
      --shell: 1240px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Source Sans 3", "Source Sans Pro", "Noto Sans", "Segoe UI", sans-serif;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }
    body.menu-open { overflow: hidden; }
    img { display: block; max-width: 100%; }
    a { color: inherit; }
    button, input, select { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    .screen-reader-text {
      position: absolute !important;
      width: 1px;
      height: 1px;
      padding: 0;
      border: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }
    .screen-reader-text:focus {
      top: 5px;
      left: 5px;
      z-index: 100000;
      width: auto;
      height: auto;
      padding: 15px 23px 14px;
      clip: auto !important;
      color: var(--night);
      background: var(--white);
    }
    .shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
    .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 16px;
      color: var(--forest-2);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .eyebrow::before { width: 28px; height: 2px; background: var(--lime); content: ""; }
    .button {
      display: inline-flex;
      min-height: 52px;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 0 22px;
      border: 0;
      border-radius: 100px;
      color: var(--night);
      background: var(--lime);
      cursor: pointer;
      text-decoration: none;
      font-size: 14px;
      font-weight: 800;
      transition: transform .2s ease, background .2s ease;
    }
    .button:hover, .button:focus-visible { background: #b1e650; transform: translateY(-2px); }
    .button--outline { color: var(--white); background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
    .button--outline:hover, .button--outline:focus-visible { color: var(--night); background: var(--white); }
    .arrow { font-size: 19px; line-height: 1; }

    .site-header {
      position: absolute;
      top: 30px;
      right: 0;
      left: 0;
      z-index: 20;
      color: var(--ink);
    }
    .nav-wrap {
      display: flex;
      min-height: 94px;
      align-items: center;
      gap: 36px;
      padding: 0 28px;
      border: 1px solid rgba(30,42,50,.1);
      border-radius: 18px;
      background: rgba(255,255,255,.95);
      box-shadow: 0 16px 40px rgba(30,42,50,.14);
      backdrop-filter: blur(18px);
    }
    .brand { flex: 0 0 auto; }
    .brand img { width: 270px; }
    .main-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
    .main-nav a {
      padding: 12px 13px;
      border-radius: 999px;
      text-decoration: none;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }
    .main-nav a:hover, .main-nav a:focus-visible { background: var(--sand); }
    .nav-dropdown { position: relative; }
    .nav-dropdown-toggle {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 12px 13px;
      border: 0;
      border-radius: 999px;
      color: inherit;
      background: transparent;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }
    .nav-dropdown-toggle:hover,
    .nav-dropdown-toggle:focus-visible,
    .nav-dropdown.is-open .nav-dropdown-toggle { background: var(--sand); }
    .nav-dropdown-toggle svg { transition: transform .2s ease; }
    .nav-dropdown.is-open .nav-dropdown-toggle svg,
    .nav-dropdown:hover .nav-dropdown-toggle svg,
    .nav-dropdown:focus-within .nav-dropdown-toggle svg { transform: rotate(180deg); }
    .submenu {
      position: absolute;
      top: calc(100% + 15px);
      left: 50%;
      display: grid;
      width: 285px;
      padding: 11px;
      border: 1px solid rgba(20,50,55,.1);
      border-radius: 17px;
      color: var(--ink);
      background: var(--white);
      box-shadow: 0 22px 55px rgba(30,42,50,.22);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 9px);
      transition: opacity .2s ease, transform .2s ease, visibility .2s;
      visibility: hidden;
    }
    .submenu::before {
      position: absolute;
      top: -16px;
      right: 0;
      left: 0;
      height: 18px;
      content: "";
    }
    .submenu a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding: 11px 13px;
      border-radius: 10px;
      font-size: 13px;
    }
    .submenu a::after { color: var(--forest-2); content: "→"; }
    .submenu a:hover, .submenu a:focus-visible { background: var(--sand); }
    .nav-dropdown:hover .submenu,
    .nav-dropdown:focus-within .submenu,
    .nav-dropdown.is-open .submenu {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0);
      visibility: visible;
    }
    .nav-cta {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      gap: 9px;
      padding: 0 17px;
      border-radius: 100px;
      color: var(--night);
      background: var(--lime);
      text-decoration: none;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }
    .menu-toggle {
      display: none;
      width: 48px;
      height: 48px;
      margin-left: auto;
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 50%;
      color: var(--white);
      background: var(--night);
      cursor: pointer;
    }

    .hero {
      position: relative;
      min-height: 930px;
      overflow: hidden;
      color: var(--white);
      background: var(--night);
      isolation: isolate;
    }
    .hero-media, .hero-media::after { position: absolute; inset: 0; }
    .hero-media { z-index: -2; overflow: hidden; }
    .hero-slide {
      position: absolute;
      inset: -1%;
      z-index: 1;
      background-position: center 55%;
      background-size: cover;
      opacity: 0;
      transform: scale(1.035);
      transition: opacity 1.6s ease, transform 8s ease;
    }
    .hero-slide.is-active { opacity: 1; transform: scale(1.01); }
    .hero-slide--coast { background-image: url("../images/brand/west-coast-road.jpg"); }
    .hero-slide--forest { background-image: url("../images/brand/hero-beach.jpg"); }
    .hero-media::after {
      z-index: 2;
      background:
        linear-gradient(90deg, rgba(30,42,50,.9) 0%, rgba(30,42,50,.58) 43%, rgba(30,42,50,.1) 72%),
        linear-gradient(0deg, rgba(30,42,50,.66) 0%, transparent 42%);
      content: "";
    }
    .hero::after {
      position: absolute;
      right: -80px;
      bottom: -130px;
      z-index: -1;
      width: 520px;
      height: 520px;
      border: 1px solid rgba(255,255,255,.17);
      border-radius: 50%;
      box-shadow: 0 0 0 80px rgba(255,255,255,.04), 0 0 0 160px rgba(255,255,255,.025);
      content: "";
    }
    .hero-content { padding-top: 270px; }
    .hero-copy { max-width: 760px; }
    .hero .eyebrow { color: rgba(255,255,255,.86); }
    .hero h1 {
      max-width: 750px;
      margin: 0;
      font-family: "ITC Legacy Sans", "Arial Black", sans-serif;
      font-size: clamp(58px, 7.4vw, 112px);
      font-weight: 500;
      line-height: .91;
      letter-spacing: -.055em;
    }
    .hero h1 em { color: var(--lime); font-style: normal; font-weight: inherit; }
    .hero-intro { max-width: 580px; margin: 28px 0 0; color: rgba(255,255,255,.86); font-size: clamp(17px, 1.7vw, 21px); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

    .finder-wrap { position: relative; z-index: 4; margin-top: -82px; }
    .finder {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr auto;
      gap: 0;
      padding: 20px;
      border-radius: 22px;
      background: var(--white);
      box-shadow: var(--shadow);
    }
    .finder-field { min-height: 78px; padding: 8px 25px; border-right: 1px solid var(--line); }
    .finder label { display: block; margin-bottom: 6px; color: var(--forest-2); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .finder input, .finder select {
      width: 100%;
      padding: 8px 24px 8px 0;
      border: 0;
      outline: 0;
      color: var(--ink);
      background: transparent;
      font-size: 16px;
      font-weight: 700;
    }
    .finder input::placeholder { color: #879497; opacity: 1; }
    .finder .button { min-width: 148px; min-height: 78px; border-radius: 14px; }
    .finder-message { grid-column: 1 / -1; margin: 12px 8px 0; color: var(--forest-2); font-size: 13px; font-weight: 700; }

    .intro { padding: 135px 0 115px; }
    .intro-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 90px; align-items: center; }
    .intro-title h2, .section-title h2, .guide-copy h2, .pet-copy h2 {
      margin: 0;
      font-family: "ITC Legacy Sans", "Arial Black", sans-serif;
      font-size: clamp(43px, 5vw, 72px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.045em;
    }
    .intro-copy p { max-width: 650px; margin: 27px 0 0; color: var(--muted); font-size: 17px; }
    .intro-copy .button { margin-top: 30px; color: var(--white); background: var(--forest-2); }
    .intro-copy .button:hover, .intro-copy .button:focus-visible { background: var(--night); }
    .intro-map { margin: 0; }
    .intro-map img { width: 100%; height: auto; }
    .intro-map figcaption {
      margin-top: 12px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      text-align: center;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .regions { padding: 112px 0 125px; background: var(--sand); }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 46px; }
    .section-title { max-width: 680px; }
    .section-description { max-width: 410px; margin: 0 0 8px; color: var(--muted); }
    .region-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
    .region-card {
      position: relative;
      min-height: 370px;
      overflow: hidden;
      padding: 28px;
      border-radius: var(--radius);
      color: var(--white);
      background: var(--forest);
      text-decoration: none;
      isolation: isolate;
    }
    .region-card:nth-child(1), .region-card:nth-child(2) { grid-column: span 6; }
    .region-card:nth-child(n+3) { grid-column: span 4; min-height: 325px; }
    .region-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
    .region-card::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30,42,50,.06) 25%, rgba(30,42,50,.91) 100%); content: ""; }
    .region-card:hover img, .region-card:focus-visible img { transform: scale(1.055); }
    .region-number { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(30,42,50,.22); font-size: 11px; font-weight: 800; backdrop-filter: blur(8px); }
    .region-card h3 { position: absolute; right: 28px; bottom: 30px; left: 28px; margin: 0; font-family: "ITC Legacy Sans", "Arial Black", sans-serif; font-size: clamp(28px, 3vw, 42px); font-weight: 700; line-height: 1; }
    .region-card small { position: absolute; right: 28px; bottom: 86px; color: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

    .split-feature { display: grid; min-height: 760px; grid-template-columns: 1.06fr .94fr; background: var(--night); }
    .split-image { position: relative; min-height: 620px; overflow: hidden; }
    .split-image img { width: 100%; height: 100%; object-fit: cover; }
    .split-image::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 65%, rgba(30,42,50,.25)); content: ""; }
    .split-badge {
      position: absolute;
      right: 35px;
      bottom: 35px;
      display: grid;
      width: 150px;
      height: 150px;
      place-items: center;
      border-radius: 50%;
      color: var(--night);
      background: var(--lime);
      font-size: 12px;
      font-weight: 850;
      text-align: center;
      letter-spacing: .08em;
      text-transform: uppercase;
      transform: rotate(7deg);
    }
    .guide-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 80px max(50px, calc((100vw - var(--shell)) / 2)); padding-left: clamp(55px, 7vw, 120px); color: var(--white); }
    .guide-copy .eyebrow { color: rgba(255,255,255,.72); }
    .guide-copy p:not(.eyebrow) { max-width: 500px; margin: 28px 0 32px; color: rgba(255,255,255,.7); font-size: 17px; }
    .guide-points { display: flex; gap: 28px; margin-bottom: 34px; color: rgba(255,255,255,.86); font-size: 12px; font-weight: 700; }
    .guide-points span::before { margin-right: 8px; color: var(--lime); content: "✓"; }

    .pet-section { padding: 130px 0; overflow: hidden; }
    .pet-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; }
    .pet-copy p:not(.eyebrow) { max-width: 520px; margin: 25px 0 32px; color: var(--muted); font-size: 17px; }
    .text-link { color: var(--forest-2); font-weight: 850; text-decoration-thickness: 2px; text-underline-offset: 6px; }
    .pet-collage { position: relative; min-height: 620px; }
    .pet-collage-main { position: absolute; inset: 0 0 65px 80px; overflow: hidden; border-radius: 220px 220px 28px 28px; }
    .pet-collage-main img { width: 100%; height: 100%; object-fit: cover; }
    .pet-card {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 250px;
      padding: 24px;
      border-radius: 22px;
      background: var(--white);
      box-shadow: var(--shadow);
    }
    .pet-card img { width: 128px; margin: 0 auto 14px; }
    .pet-card strong { display: block; font-family: "ITC Legacy Sans", "Arial Black", sans-serif; font-size: 21px; font-weight: 700; line-height: 1.1; }
    .pet-card span { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }

    .trip-strip { padding: 80px 0; color: var(--white); background: var(--forest-2); }
    .trip-grid { display: grid; grid-template-columns: 1.2fr repeat(3, .8fr); gap: 25px; align-items: center; }
    .trip-title { font-family: "ITC Legacy Sans", "Arial Black", sans-serif; font-size: clamp(32px, 3.5vw, 48px); line-height: 1; }
    .trip-item { padding-left: 25px; border-left: 1px solid rgba(255,255,255,.2); }
    .trip-item small { display: block; margin-bottom: 5px; color: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .trip-item a { font-size: 14px; font-weight: 750; text-decoration: none; }
    .trip-item a:hover { text-decoration: underline; text-underline-offset: 5px; }

    .footer { padding: 90px 0 30px; color: var(--muted); background: var(--sand); }
    .footer-grid { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 50px; }
    .footer-brand img { width: 185px; margin-bottom: 22px; }
    .footer-brand p { max-width: 350px; margin: 0; font-size: 13px; }
    .footer h3 { margin: 0 0 18px; color: var(--ink); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
    .footer nav { display: grid; gap: 11px; }
    .footer nav a { font-size: 13px; text-decoration: none; }
    .footer nav a:hover { color: var(--blue); }
    .footer-bottom { display: flex; justify-content: space-between; gap: 25px; margin-top: 75px; padding-top: 25px; border-top: 1px solid var(--line); font-size: 11px; }

    @media (max-width: 1240px) {
      .nav-wrap { gap: 20px; padding-inline: 22px; }
      .brand img { width: 220px; }
      .brand .custom-logo { width: 220px; }
      .main-nav a { padding-inline: 8px; font-size: 12px; }
      .main-nav .nav-dropdown-toggle { padding-inline: 4px; }
      .nav-cta { min-height: 44px; padding-inline: 14px; font-size: 12px; }
    }

    @media (max-width: 1080px) {
      .main-nav { gap: 0; }
      .main-nav a { padding-inline: 8px; }
      .nav-cta { display: none; }
      .finder { grid-template-columns: 1fr 1fr; }
      .finder-field:nth-child(2) { border-right: 0; }
      .finder .button { min-height: 64px; margin: 8px; }
      .intro-grid { gap: 50px; }
      .split-feature { grid-template-columns: 1fr 1fr; }
      .pet-grid { gap: 50px; }
    }

    @media (max-width: 820px) {
      .shell { width: min(calc(100% - 32px), var(--shell)); }
      .site-header { top: 20px; }
      .nav-wrap { min-height: 78px; padding: 0 18px; }
      .brand img { width: 215px; }
      .menu-toggle { display: grid; place-items: center; }
      .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: -1;
        display: flex;
        width: min(82vw, 390px);
        height: 100vh;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 5px;
        padding: 100px 35px 40px;
        background: var(--night);
        color: var(--white);
        box-shadow: -20px 0 50px rgba(0,0,0,.2);
        transform: translateX(110%);
        transition: transform .3s ease;
      }
      .main-nav.is-open { transform: translateX(0); }
      .main-nav a { padding: 15px; font-size: 18px; }
      .main-nav > a:hover,
      .main-nav > a:focus-visible,
      .nav-dropdown-toggle:hover,
      .nav-dropdown-toggle:focus-visible,
      .nav-dropdown.is-open .nav-dropdown-toggle { background: rgba(255,255,255,.08); }
      .nav-dropdown { width: 100%; }
      .nav-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 15px;
        font-size: 18px;
        text-align: left;
      }
      .nav-dropdown .submenu {
        position: static;
        width: 100%;
        max-height: 0;
        padding: 0 8px;
        border: 0;
        border-radius: 12px;
        color: var(--white);
        background: rgba(255,255,255,.07);
        box-shadow: none;
        opacity: 1;
        overflow: hidden;
        pointer-events: none;
        transform: none;
        transition: max-height .3s ease, padding .3s ease, margin .3s ease;
        visibility: visible;
      }
      .nav-dropdown .submenu::before { display: none; }
      .nav-dropdown.is-open .submenu {
        max-height: 330px;
        margin: 4px 0 9px;
        padding: 8px;
        pointer-events: auto;
        transform: none;
      }
      .submenu a { padding: 11px 12px; font-size: 13px; }
      .submenu a::after { color: var(--lime); }
      .submenu a:hover, .submenu a:focus-visible { background: rgba(255,255,255,.08); }
      .hero { min-height: 850px; }
      .hero-media::after { background: linear-gradient(90deg, rgba(30,42,50,.86), rgba(30,42,50,.28)), linear-gradient(0deg, rgba(30,42,50,.7), transparent 45%); }
      .hero-content { padding-top: 230px; }
      .hero-copy { max-width: 650px; }
      .hero h1 { font-size: clamp(58px, 12vw, 88px); }
      .finder-wrap { margin-top: -60px; }
      .finder { grid-template-columns: 1fr 1fr; }
      .intro-grid, .pet-grid { grid-template-columns: 1fr; gap: 45px; }
      .intro-map { width: min(100%, 580px); margin-inline: auto; }
      .region-card:nth-child(n) { grid-column: span 6; min-height: 320px; }
      .region-card:last-child { grid-column: 4 / span 6; }
      .split-feature { grid-template-columns: 1fr; }
      .split-image { min-height: 600px; }
      .guide-copy { padding: 90px 32px; }
      .pet-collage { order: -1; }
      .trip-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
      .trip-title { grid-column: 1 / -1; }
      .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
    }

    @media (max-width: 560px) {
      .brand img { width: 185px; }
      .nav-wrap { min-height: 70px; border-radius: 14px; }
      .menu-toggle { width: 42px; height: 42px; }
      .hero { min-height: 790px; }
      .hero-slide { background-position: 58% center; }
      .hero-content { padding-top: 210px; }
      .hero h1 { font-size: 58px; }
      .hero-intro { font-size: 16px; }
      .hero-actions .button { width: 100%; }
      .finder { grid-template-columns: 1fr; padding: 12px; }
      .finder-field { min-height: auto; padding: 13px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
      .finder .button { min-height: 58px; margin: 8px 0 0; }
      .intro { padding: 110px 0 85px; }
      .section-head { display: block; }
      .section-description { margin-top: 24px; }
      .regions { padding: 85px 0; }
      .region-card:nth-child(n) { grid-column: 1 / -1; min-height: 300px; }
      .split-image { min-height: 470px; }
      .split-badge { right: 20px; bottom: 20px; width: 115px; height: 115px; font-size: 10px; }
      .guide-copy { padding: 75px 24px; }
      .guide-points { flex-direction: column; gap: 8px; }
      .pet-section { padding: 90px 0; }
      .pet-collage { min-height: 510px; }
      .pet-collage-main { inset: 0 0 55px 30px; }
      .pet-card { width: 195px; padding: 18px; }
      .pet-card img { width: 92px; }
      .trip-grid { grid-template-columns: 1fr; }
      .trip-title { grid-column: auto; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-bottom { display: block; }
      .footer-bottom span { display: block; margin-top: 8px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; }
      .hero-slide { transform: scale(1.01); }
    }

/* WordPress theme integration. */
.brand .custom-logo-link { display: block; }
.brand .custom-logo { width: 270px; height: auto; }
.primary-menu, .sub-menu, .footer .menu { margin: 0; padding: 0; list-style: none; }
.main-nav .primary-menu { display: flex; align-items: center; gap: 2px; }
.main-nav .menu-item { margin: 0; }
.main-nav .menu-item-has-children { position: relative; display: flex; align-items: center; }
.main-nav .menu-item-has-children > a { padding-right: 4px; }
.main-nav .nav-dropdown-toggle { width: 28px; padding: 12px 8px 12px 4px; }
.main-nav .sub-menu {
  position: absolute;
  top: calc(100% + 15px);
  left: 50%;
  display: grid;
  width: 285px;
  padding: 11px;
  border: 1px solid rgba(20, 50, 55, .1);
  border-radius: 17px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 22px 55px rgba(30, 42, 50, .22);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 9px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  visibility: hidden;
}
.main-nav .sub-menu::before {
  position: absolute;
  top: -16px;
  right: 0;
  left: 0;
  height: 18px;
  content: "";
}
.main-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 13px;
}
.main-nav .sub-menu a::after { color: var(--forest-2); content: "→"; }
.main-nav .nav-dropdown:hover > .sub-menu,
.main-nav .nav-dropdown:focus-within > .sub-menu,
.main-nav .nav-dropdown.is-open > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  visibility: visible;
}
.footer h2 {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer .menu { display: grid; gap: 11px; }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover, .footer-bottom a:focus-visible { color: var(--blue); }
.standard-content { min-height: 65vh; padding-top: 190px; padding-bottom: 100px; }
.admin-bar .site-header { top: 62px; }
.region-card:nth-child(n+3) h3 { font-size: clamp(25px, 2.4vw, 34px); }
.region-card:nth-child(n+3) small { bottom: 105px; }

@media (max-width: 820px) {
  .brand .custom-logo { width: 215px; }
  .main-nav .primary-menu { width: 100%; flex-direction: column; align-items: stretch; }
  .main-nav .menu-item-has-children { width: 100%; flex-wrap: wrap; }
  .main-nav .menu-item-has-children > a { flex: 1; }
  .main-nav .nav-dropdown-toggle { width: 50px; justify-content: center; padding: 15px; }
  .main-nav .nav-dropdown > .sub-menu {
    position: static;
    width: 100%;
    max-height: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 12px;
    color: var(--white);
    background: rgba(255, 255, 255, .07);
    box-shadow: none;
    opacity: 1;
    overflow: hidden;
    pointer-events: none;
    transform: none;
    transition: max-height .3s ease, padding .3s ease, margin .3s ease;
    visibility: visible;
  }
  .main-nav .nav-dropdown > .sub-menu::before { display: none; }
  .main-nav .nav-dropdown.is-open > .sub-menu {
    max-height: 330px;
    margin: 4px 0 9px;
    padding: 8px;
    pointer-events: auto;
    transform: none;
  }
  .admin-bar .site-header { top: 66px; }
  .region-card:nth-child(n+3) h3 { font-size: clamp(28px, 4vw, 36px); }
  .region-card:nth-child(n+3) small { bottom: 98px; }
}

@media (max-width: 782px) {
  .admin-bar .main-nav { padding-top: 145px; }
}

@media (max-width: 960px) {
  .site-header { top: 20px; }
  .nav-wrap { min-height: 78px; padding: 0 18px; }
  .brand img,
  .brand .custom-logo { width: 215px; }
  .menu-toggle { display: grid; place-items: center; }
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: -1;
    width: min(82vw, 390px);
    height: 100vh;
    display: flex;
    margin-left: 0;
    padding: 100px 35px 40px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    color: var(--white);
    background: var(--night);
    box-shadow: -20px 0 50px rgba(0, 0, 0, .2);
    transform: translateX(110%);
    transition: transform .3s ease;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav .primary-menu { width: 100%; flex-direction: column; align-items: stretch; }
  .main-nav .menu-item-has-children { width: 100%; flex-wrap: wrap; }
  .main-nav .menu-item-has-children > a { flex: 1; }
  .main-nav a { padding: 15px; font-size: 18px; white-space: normal; }
  .main-nav > a:hover,
  .main-nav > a:focus-visible,
  .nav-dropdown-toggle:hover,
  .nav-dropdown-toggle:focus-visible,
  .nav-dropdown.is-open .nav-dropdown-toggle { background: rgba(255, 255, 255, .08); }
  .main-nav .nav-dropdown-toggle {
    width: 50px;
    justify-content: center;
    padding: 15px;
    font-size: 18px;
  }
  .main-nav .nav-dropdown > .sub-menu {
    position: static;
    width: 100%;
    max-height: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 12px;
    color: var(--white);
    background: rgba(255, 255, 255, .07);
    box-shadow: none;
    opacity: 1;
    overflow: hidden;
    pointer-events: none;
    transform: none;
    transition: max-height .3s ease, padding .3s ease, margin .3s ease;
    visibility: visible;
  }
  .main-nav .nav-dropdown > .sub-menu::before { display: none; }
  .main-nav .nav-dropdown.is-open > .sub-menu {
    max-height: 330px;
    margin: 4px 0 9px;
    padding: 8px;
    pointer-events: auto;
    transform: none;
  }
  .main-nav .sub-menu a { padding: 11px 12px; font-size: 13px; }
  .main-nav .sub-menu a::after { color: var(--lime); }
  .main-nav .sub-menu a:hover,
  .main-nav .sub-menu a:focus-visible { background: rgba(255, 255, 255, .08); }
}

@media (max-width: 560px) {
  .region-card:nth-child(n+3) h3 { font-size: 30px; }
}