
      :root {
        --ink: #183238;
        --deep: #0b4752;
        --sun: #f6c75a;
        --orange: #e46f45;
        --event: #8b5ca8;
        --cream: #fff9ec;
        --mist: #e7f1ef;
        --white: #fff;
        --muted: #5f7176;
        --line: #c9dcda;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background: var(--cream);
        color: var(--ink);
        font:
          1rem/1.55 "DM Sans",
          sans-serif;
      }
      a {
        color: inherit;
      }
      .wrap {
        max-width: 1180px;
        margin: auto;
        padding: 0 24px;
      }
      header {
        background: #5b8fdb;
        padding: 16px 0;
        color: white;
        padding: 18px 0;
        position: sticky;
        top: 0;
        z-index: 1000;
      }
      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
      }
      .brand {
        font:
          700 1.35rem Fraunces,
          serif;
        text-decoration: none;
      }
      .brand span {
        color: var(--sun);
      }
      nav {
        display: flex;
        gap: 22px;
        font-size: 0.95rem;
      }
      nav a {
        text-decoration: none;
        color: #eaf7f6;
      }
      .hero {
        background: var(--deep);
        color: white;
        padding: 66px 0 48px;
        position: relative;
        overflow: hidden;
      }
      .hero:after {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        border: 90px solid rgba(246, 199, 90, 0.11);
        border-radius: 50%;
        right: -180px;
        top: -310px;
      }
      .eyebrow,
      .kicker {
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--sun);
      }
      h1,
      h2,
      h3 {
        font-family: Fraunces, serif;
      }
      .hero h1 {
        font-size: clamp(2.7rem, 6.5vw, 5.5rem);
        line-height: 0.97;
        max-width: 850px;
        margin: 12px 0 20px;
      }
      .hero p {
        font-size: 1.14rem;
        max-width: 690px;
        color: #e5f1ef;
        margin: 0;
      }
      .proof {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        margin-top: 30px;
        font-size: 0.94rem;
      }
      .proof span {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .check {
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--sun);
        color: var(--deep);
        font-weight: 700;
      }
      main {
        padding: 42px 0 74px;
      }
      .intro {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 48px;
        align-items: start;
        margin-bottom: 34px;
      }
      h2 {
        font-size: clamp(2rem, 4vw, 3rem);
        line-height: 1.05;
        margin: 0;
      }
      .intro p {
        margin: 0;
        color: var(--muted);
      }
      .intro strong {
        color: var(--ink);
      }
      .map-shell {
        background: #dcece8;
        border: 1px solid var(--line);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 16px 40px rgba(17, 67, 73, 0.09);
      }
      .map-head {
        padding: 24px 26px;
        background: white;
        display: flex;
        justify-content: space-between;
        gap: 24px;
        align-items: end;
      }
      .map-head h2 {
        font-size: 2rem;
      }
      .map-head p {
        margin: 4px 0 0;
        color: var(--muted);
      }
      .legend {
        display: flex;
        gap: 16px;
        font-size: 0.88rem;
        white-space: nowrap;
      }
      .legend span {
        display: flex;
        gap: 7px;
        align-items: center;
      }
      .swatch {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--deep);
      }
      .swatch.orange {
        background: var(--orange);
      }
      .swatch.event {
        background: var(--event);
      }
      #map {
        height: 470px;
        width: 100%;
        background: #dcece8;
      }
      .leaflet-control-attribution {
        font-size: 11px;
      }
      .leaflet-popup-content {
        font-family: "DM Sans", sans-serif;
      }
      .leaflet-popup-content strong {
        color: var(--deep);
      }
      .leaflet-popup-content .map-review-link {
        display: inline-block;
        margin-top: 8px;
        font-weight: 700;
        color: #125f97;
      }
      .section {
        padding-top: 58px;
      }
      .section-head {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        align-items: end;
        margin-bottom: 22px;
      }
      .section-head p {
        max-width: 540px;
        color: var(--muted);
        margin: 0;
      }
      .timing-guide {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 4px 0 28px;
      }
      .timing-group {
        padding: 18px 19px;
        border-radius: 17px;
        background: #fff;
        border: 1px solid var(--line);
        border-top: 4px solid var(--sun);
      }
      .timing-group:first-child { border-top-color: #2b8caa; }
      .timing-group:nth-child(2) { border-top-color: #9566ad; }
      .timing-group h3 {
        font: 700 1.18rem Fraunces, serif;
        margin: 0 0 5px;
      }
      .timing-group p {
        color: var(--muted);
        font-size: .9rem;
        line-height: 1.45;
        margin: 0 0 12px;
      }
      .timing-group a {
        display: block;
        color: var(--deep);
        font-weight: 700;
        padding: 5px 0;
        text-underline-offset: 3px;
      }
      .review-status {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0 0 7px;
      }
      .review-status span {
        display: inline-block;
        border-radius: 99px;
        padding: 5px 9px;
        background: #e7f4fb;
        color: #185371;
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .02em;
      }
      .review-status .new { background: #fff0c2; color: #744306; }
      .review-status .earlier { background: #f0eafa; color: #62457d; }
      .tabs {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 18px 0 28px;
      }
      .tab {
        border: 1px solid var(--deep);
        background: transparent;
        color: var(--deep);
        border-radius: 99px;
        padding: 9px 16px;
        cursor: pointer;
        font-weight: 600;
      }
      .tab.active,
      .tab:hover {
        background: var(--deep);
        color: white;
      }
      .features {
        display: grid;
        grid-template-columns: 1.25fr 0.75fr;
        gap: 18px;
      }
      .feature {
        background: white;
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 28px;
      }
      .feature h3 {
        font-size: 1.8rem;
        line-height: 1.1;
        margin: 9px 0 12px;
      }
      .feature p {
        color: var(--muted);
      }
      .tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .tag {
        background: var(--mist);
        color: var(--deep);
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 0.82rem;
        font-weight: 600;
      }
      .story {
        border-left: 4px solid var(--sun);
        padding-left: 16px;
        margin: 20px 0;
        color: var(--ink) !important;
      }
      .media-note {
        display: flex;
        gap: 10px;
        align-items: center;
        background: #fff5d7;
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 0.9rem;
        margin-top: 18px;
      }
      .media-icon {
        font-size: 1.3rem;
      }
      .place-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }
      .place-card {
        background: white;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 17px 18px;
      }
      .place-card[hidden],
      [data-kind][hidden] {
        display: none;
      }
      .place-card h3 {
        font:
          700 1.03rem "DM Sans",
          sans-serif;
        margin: 0 0 5px;
      }
      .place-card p {
        font-size: 0.88rem;
        color: var(--muted);
        margin: 0;
      }
      .place-card .type {
        display: inline-block;
        margin-top: 12px;
        color: var(--deep);
        font-size: 0.76rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .place-card .overnight {
        color: #a5452d;
      }
      .place-card .event {
        color: #73458f;
      }
      .mission-stat {
        margin: 0 0 34px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 24px;
        padding: 28px 32px;
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 34px;
        align-items: center;
        box-shadow: 0 14px 34px rgba(43, 95, 158, 0.08);
      }
      .stat-number {
        font:
          700 clamp(3.8rem, 8vw, 6rem)/0.9 Fraunces,
          serif;
        color: var(--orange);
      }
      .stat-label {
        display: block;
        margin-top: 9px;
        font-weight: 700;
        color: var(--deep);
      }
      .mission-stat h2 {
        font-size: clamp(1.75rem, 3vw, 2.45rem);
        margin-bottom: 10px;
      }
      .mission-stat p {
        margin: 0;
        color: var(--muted);
      }
      .mission-stat a {
        display: inline-block;
        margin-top: 10px;
        color: var(--deep);
        font-size: 0.86rem;
        font-weight: 700;
        text-underline-offset: 3px;
      }
      .framework {
        margin-top: 58px;
        background: var(--deep);
        color: white;
        border-radius: 24px;
        padding: 32px;
      }
      .framework h2 {
        max-width: 700px;
      }
      .framework > p {
        color: #dbeae8;
        max-width: 750px;
      }
      .needs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-top: 24px;
      }
      .need {
        background: rgba(255, 255, 255, 0.09);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 14px;
        padding: 16px;
      }
      .need strong {
        display: block;
        color: var(--sun);
        margin-bottom: 5px;
      }
      .need span {
        font-size: 0.9rem;
        color: #dbeae8;
      }
      .about {
        margin-top: 58px;
        border-top: 1px solid var(--line);
        padding-top: 36px;
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        gap: 50px;
      }
      .about p {
        margin-top: 0;
        color: var(--muted);
      }
      .about .story-link {
        color: var(--deep);
        font-weight: 700;
        text-underline-offset: 3px;
      }
      footer {
        background: #082f36;
        color: #dcebea;
        padding: 28px 0;
        font-size: 0.9rem;
      }
      .foot {
        display: flex;
        justify-content: space-between;
        gap: 20px;
      }
      @media (max-width: 850px) {
        nav {
          display: none;
        }
        .intro,
        .features,
        .about {
          grid-template-columns: 1fr;
          gap: 20px;
        }
        .mission-stat {
          grid-template-columns: 1fr;
          gap: 18px;
        }
        .place-grid {
          grid-template-columns: 1fr 1fr;
        }
        .needs {
          grid-template-columns: 1fr 1fr;
        }
        .map-head,
        .section-head,
        .foot {
          align-items: flex-start;
          flex-direction: column;
        }
        .legend {
          white-space: normal;
        }
        #map {
          height: 420px;
        }
      }
      @media (max-width: 540px) {
        .hero {
          padding-top: 48px;
        }
        .mission-stat {
          padding: 24px;
        }
        .place-grid,
        .needs {
          grid-template-columns: 1fr;
        }
        .map-head {
          padding: 20px;
        }
        #map {
          height: 390px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
      }
      /* Beyond Autism: bright, family-friendly travel palette */
      :root {
        --ink: #26324a;
        --deep: #2b5f9e;
        --sun: #ffd166;
        --orange: #f15b6c;
        --cream: #fff8f0;
        --mist: #eaf4ff;
        --muted: #617086;
        --line: #cfdeef;
      }
      header {
        background: #5b8fdb;
      }
      header .brand span {
        color: #fff;
      }
      nav a {
        color: #f4f8ff;
      }
      .hero {
        background: #5b8fdb;
        isolation: isolate;
        min-height: calc(100svh - 68px);
        display: grid;
        place-items: center;
        padding: 36px 0;
      }
      .hero:before {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
          112deg,
          #3daaa7 0%,
          #5b8fdb 49%,
          #8c70b8 100%
        );
        opacity: 0.48;
        mix-blend-mode: color;
      }
      .hero:after {
        display: none;
      }
      .hero h1 {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }
      .hero-art {
        display: block;
        width: min(100%, 1100px);
        height: auto;
        aspect-ratio: 1206 / 470;
        margin: auto;
        object-fit: cover;
        object-position: center 39%;
      }
      .hero-mobile-subtitle {
        display: none;
      }
      .map-shell {
        background: #e8f3ff;
        box-shadow: 0 16px 40px rgba(43, 95, 158, 0.12);
      }
      .map-head {
        border-top: 6px solid var(--sun);
      }
      #map {
        background: #e8f3ff;
      }
      .framework {
        background: linear-gradient(120deg, var(--deep), #745fa7);
      }
      footer {
        background: #234d82;
        color: #eef5ff;
      }
      .media-note {
        background: #fff1c7;
      }
      .long-review {
        grid-column: 1/-1;
        padding: 0;
        overflow: hidden;
      }
      .review-cover {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        background: #fff;
      }
      .review-copy {
        padding: 34px;
      }
      .review-cover img {
        width: 100%;
        height: 100%;
        min-height: 380px;
        object-fit: cover;
      }
      .review-copy h3 {
        font-size: clamp(2.1rem, 4.5vw, 3.4rem);
        margin: 10px 0 14px;
      }
      .verdict {
        font-size: 1.08rem;
        color: var(--ink) !important;
        border-left: 5px solid var(--orange);
        padding-left: 16px;
      }
      .review-meta {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        padding: 18px 26px;
        background: var(--mist);
      }
      .review-meta div {
        background: #fff;
        border-radius: 12px;
        padding: 12px;
      }
      .review-meta strong {
        display: block;
        color: var(--deep);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .review-meta span {
        font-size: 0.9rem;
      }
      .review-body {
        padding: 30px;
      }
      .review-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }
      .review-block {
        border-top: 4px solid var(--sun);
        background: #fffaf0;
        border-radius: 0 0 14px 14px;
        padding: 18px;
      }
      .review-block h4 {
        font:
          700 1.18rem Fraunces,
          serif;
        margin: 0 0 8px;
      }
      .review-block p {
        margin: 0;
        color: var(--ink);
      }
      .photo-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
        margin-top: 26px;
        align-items: start;
      }
      .photo-grid figure {
        margin: 0;
        overflow: hidden;
        border-radius: 12px;
        background: var(--mist);
      }
      .photo-grid img {
        width: 100%;
        height: 185px;
        display: block;
        object-fit: cover;
      }
      .photo-grid figure:first-child {
        grid-column: auto;
      }
      .photo-grid figure:first-child img {
        height: 185px;
      }
      .photo-grid figure:nth-child(2) {
        grid-row: auto;
      }
      .photo-grid figure:nth-child(2) img {
        height: 185px;
      }
      .photo-grid figcaption {
        font-size: 0.78rem;
        color: var(--muted);
        padding: 8px 10px;
        background: #fff;
      }
      .bottom-line {
        margin-top: 22px;
        background: #2b5f9e;
        color: #fff;
        border-radius: 14px;
        padding: 18px 20px;
      }
      .bottom-line strong {
        color: var(--sun);
      }
      .bottom-line p {
        color: #fff;
        margin: 4px 0 0;
      }
      .trip-video {
        margin: 26px 0 0;
        background: #172642;
        border-radius: 16px;
        padding: 18px;
        display: grid;
        grid-template-columns: minmax(220px, 320px) 1fr;
        gap: 24px;
        align-items: center;
        color: #fff;
      }
      .trip-video video {
        display: block;
        width: 100%;
        max-height: 430px;
        border-radius: 12px;
        background: #000;
      }
      .trip-video h4 {
        font:
          700 1.4rem Fraunces,
          serif;
        margin: 0 0 8px;
        color: var(--sun);
      }
      .trip-video p {
        color: #edf3ff;
        margin: 0;
      }
      .fact-link {
        display: inline-block;
        margin-top: 12px;
        color: #fff;
        text-underline-offset: 4px;
        font-weight: 700;
      }
      .cw-review,
      .fdr-review,
      .walkway-review,
      .cloisters-review,
      .ac-review,
      .pittsburgh-review {
        margin-top: 18px;
      }
      .cw-review .review-cover {
        grid-template-columns: 0.9fr 1.1fr;
      }
      .cw-review .review-cover img {
        order: -1;
      }
      .cw-review .verdict {
        border-color: var(--sun);
      }
      .cw-review .bottom-line {
        background: #745fa7;
      }
      .fdr-review .verdict {
        border-color: #42b7b0;
      }
      .fdr-review .review-block {
        border-color: #42b7b0;
      }
      .fdr-review .bottom-line {
        background: #167d78;
      }
      .walkway-review .review-cover {
        grid-template-columns: 0.9fr 1.1fr;
      }
      .walkway-review .review-cover img {
        order: -1;
      }
      .walkway-review .verdict {
        border-color: #2b5f9e;
      }
      .walkway-review .review-block {
        border-color: #91bddd;
      }
      .walkway-review .bottom-line {
        background: #28577f;
      }
      .cloisters-review .verdict {
        border-color: #ad6b39;
      }
      .cloisters-review .review-block {
        border-color: #c99452;
      }
      .cloisters-review .bottom-line {
        background: #6b4430;
      }
      .ac-review .review-cover {
        grid-template-columns: 0.9fr 1.1fr;
      }
      .ac-review .review-cover img {
        order: -1;
      }
      .ac-review .verdict {
        border-color: #34a9c8;
      }
      .ac-review .review-block {
        border-color: #ef7c72;
      }
      .ac-review .bottom-line {
        background: #086e8b;
      }
      .pittsburgh-review .verdict {
        border-color: #f0b323;
      }
      .pittsburgh-review .review-block {
        border-color: #f0b323;
      }
      .pittsburgh-review .bottom-line {
        background: #2d3446;
      }
      .pittsburgh-videos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 26px;
      }
      .video-card {
        background: #20283a;
        color: #fff;
        padding: 14px;
        border-radius: 16px;
      }
      .video-card video {
        display: block;
        width: 100%;
        height: 360px;
        object-fit: cover;
        background: #000;
        border-radius: 11px;
      }
      .video-card:first-child video {
        object-fit: contain;
      }
      .video-card h4 {
        font:
          700 1.15rem Fraunces,
          serif;
        color: var(--sun);
        margin: 12px 4px 4px;
      }
      .video-card p {
        color: #e8edf5;
        margin: 0 4px 4px;
        font-size: 0.9rem;
      }
      @media (max-width: 850px) {
        .review-cover,
        .cw-review .review-cover {
          grid-template-columns: 1fr;
        }
        .cw-review .review-cover img {
          order: 0;
        }
        .review-cover img {
          min-height: 300px;
        }
        .review-meta {
          grid-template-columns: 1fr 1fr;
        }
        .photo-grid {
          grid-template-columns: 1fr 1fr;
        }
        .photo-grid figure:first-child,
        .photo-grid figure:nth-child(2) {
          grid-column: auto;
          grid-row: auto;
        }
        .photo-grid figure:first-child img,
        .photo-grid figure:nth-child(2) img,
        .photo-grid img {
          height: 220px;
        }
        .trip-video {
          grid-template-columns: 1fr;
        }
        .trip-video video {
          max-width: 360px;
          margin: auto;
        }
        .pittsburgh-videos {
          grid-template-columns: 1fr;
        }
        .video-card video {
          height: auto;
          max-height: 480px;
        }
      }
      @media (max-width: 540px) {
        .hero {
          min-height: calc(83svh - 68px);
          padding: 48px 0;
        }
        .hero .wrap {
          padding: 0 14px;
        }
        .hero-art {
          aspect-ratio: 1206 / 370;
          object-position: center 35%;
        }
        .hero .hero-mobile-subtitle {
          display: block;
          margin: 10px auto 0;
          color: #fff;
          font-size: clamp(1rem, 4.7vw, 1.3rem);
          font-weight: 700;
          line-height: 1.15;
          text-align: center;
        }
        .review-copy,
        .review-body {
          padding: 22px;
        }
        .review-meta,
        .review-columns {
          grid-template-columns: 1fr;
        }
        .photo-grid img,
        .photo-grid figure:first-child img,
        .photo-grid figure:nth-child(2) img {
          height: 180px;
        }
      }
      /* A colorful travel-journal layer over the original review layout. */
      :root {
        --ink: #17354c;
        --deep: #176aa1;
        --sun: #ffcf51;
        --orange: #e94d63;
        --cream: #fffaf0;
        --mist: #e5f5fb;
        --muted: #4c6273;
        --line: #c8e2e9;
      }
      body {
        background: var(--cream);
      }
      header {
        background: #fffaf0;
        color: var(--ink);
        padding: 12px 0;
        border-bottom: 2px solid #d6e8eb;
        box-shadow: 0 4px 16px rgba(16, 76, 108, 0.06);
      }
      .brand {
        font-size: 1.42rem;
        line-height: 1.1;
      }
      header .brand span {
        color: var(--orange);
      }
      nav a {
        color: var(--ink);
        font-weight: 700;
        border-radius: 99px;
        padding: 7px 10px;
      }
      nav a:hover,
      nav a:focus-visible {
        background: var(--mist);
      }
      :focus-visible {
        outline: 3px solid var(--orange);
        outline-offset: 3px;
      }
      .hero {
        background: #358bcb;
        min-height: 0;
        display: block;
        padding: clamp(48px, 6vw, 86px) 0 74px;
      }
      .hero:before {
        background: radial-gradient(circle at 92% 6%, rgba(255, 207, 81, .35), transparent 32%),
          linear-gradient(135deg, #247abb, #3d9ed0 68%, #39a9b4);
        opacity: 1;
        mix-blend-mode: normal;
        z-index: -1;
      }
      .hero-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, .93fr);
        gap: clamp(30px, 5vw, 80px);
        align-items: center;
      }
      .hero-message {
        position: relative;
        z-index: 2;
      }
      .hero-eyebrow {
        display: inline-block;
        background: var(--sun);
        color: #17354c;
        border-radius: 99px;
        padding: 8px 15px;
        font-size: .84rem;
        font-weight: 800;
        letter-spacing: .025em;
      }
      .hero h1 {
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
        white-space: normal;
        overflow: visible;
        font-size: clamp(3.5rem, 6vw, 6.4rem);
        line-height: .94;
        letter-spacing: -.045em;
        max-width: 680px;
        margin: 23px 0;
      }
      .hero h1 em {
        color: var(--sun);
        font-style: italic;
      }
      .hero-period {
        color: #f86d76;
      }
      .hero p {
        color: #fff;
        font-size: clamp(1.05rem, 1.5vw, 1.25rem);
        line-height: 1.5;
        max-width: 490px;
      }
      .hero-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px 24px;
        margin-top: 28px;
      }
      .hero-button {
        background: var(--sun);
        color: var(--ink);
        text-decoration: none;
        border-radius: 99px;
        padding: 13px 20px;
        font-weight: 800;
        box-shadow: 0 6px 0 #cf8d35;
        transition: transform .18s ease, box-shadow .18s ease;
      }
      .hero-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 9px 0 #cf8d35;
      }
      .hero-link {
        color: #fff;
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
        font-weight: 700;
      }
      .hero-photos {
        position: relative;
        isolation: isolate;
        height: clamp(410px, 42vw, 550px);
      }
      .hero-photo {
        position: absolute;
        width: 61%;
        height: 67%;
        margin: 0;
        padding: 10px 10px 0;
        background: #fff;
        border-radius: 3px;
        box-shadow: 0 18px 35px rgba(11, 53, 86, .3), 0 3px 7px rgba(11, 53, 86, .12);
        overflow: hidden;
        transition: transform .65s ease, box-shadow .65s ease;
      }
      .hero-photo.is-front {
        z-index: 5;
        transform: rotate(var(--photo-tilt)) translateY(-10px) scale(1.04);
        box-shadow: 0 24px 46px rgba(11, 53, 86, .36), 0 4px 10px rgba(11, 53, 86, .16);
      }
      .hero-photo img {
        display: block;
        width: 100%;
        height: calc(100% - 39px);
        object-fit: cover;
        border-radius: 4px;
      }
      .hero-photo figcaption {
        color: var(--ink);
        font-size: .88rem;
        font-weight: 800;
        line-height: 39px;
        padding-left: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hero-photo-one {
        --photo-tilt: -14deg;
        top: 0;
        left: 1%;
        z-index: 1;
        transform: rotate(-14deg);
      }
      .hero-photo-two {
        --photo-tilt: 13deg;
        right: 1%;
        top: 5%;
        z-index: 2;
        transform: rotate(13deg);
      }
      .hero-photo-three {
        --photo-tilt: -2deg;
        left: 21%;
        bottom: 0;
        z-index: 3;
        transform: rotate(-2deg);
      }
      .hero-photo-three img {
        object-position: center 34%;
      }
      .hero-gallery-controls {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 10px;
      }
      .hero-gallery-controls button {
        border: 1px solid rgba(255,255,255,.75);
        border-radius: 99px;
        background: rgba(18,68,111,.65);
        color: #fff;
        padding: 8px 14px;
        font-family: inherit;
        font-size: .84rem;
        font-weight: 700;
        cursor: pointer;
      }
      .hero-gallery-controls button:hover,
      .hero-gallery-controls button:focus-visible {
        background: #173f68;
        outline: 2px solid #fff;
        outline-offset: 2px;
      }
      .hero-sticker {
        position: absolute;
        z-index: 4;
        bottom: 4%;
        right: 0;
        display: grid;
        place-items: center;
        width: 105px;
        height: 105px;
        border-radius: 50%;
        transform: rotate(13deg);
        background: var(--sun);
        color: var(--ink);
        border: 3px dashed #fff;
        outline: 5px solid var(--sun);
        font: italic 800 1.2rem Fraunces, serif;
      }
      main {
        padding-top: 52px;
      }
      .intro {
        gap: 62px;
        margin-bottom: 46px;
        align-items: center;
      }
      .intro h2,
      .section-head h2 {
        color: var(--ink);
      }
      .intro h2:before,
      .section-head h2:before {
        content: '';
        display: block;
        width: 62px;
        height: 8px;
        border-radius: 99px;
        background: var(--orange);
        margin-bottom: 19px;
      }
      .mission-stat {
        background: #fff0c7;
        border-color: #f3d990;
        box-shadow: 8px 8px 0 #f5d678;
      }
      .stat-number {
        color: #ce3d55;
      }
      .kicker {
        color: #b34250;
      }
      .map-shell,
      .feature {
        box-shadow: 0 12px 32px rgba(18, 84, 113, .09);
      }
      .map-head {
        border-top: 8px solid var(--sun);
      }
      .tab {
        border: 2px solid var(--deep);
        background: #fff;
        font-size: .91rem;
      }
      .tab.active,
      .tab:hover {
        background: var(--deep);
      }
      .feature {
        border-radius: 24px;
      }
      .review-copy {
        background: #fff;
      }
      .review-meta {
        background: #dff3f5;
      }
      .review-block:nth-child(2n) {
        background: #eaf6f9;
      }
      .place-card {
        border-radius: 16px;
        border-bottom: 4px solid var(--sun);
        transition: transform .18s ease;
      }
      .place-card:hover {
        transform: translateY(-3px);
      }
      .hammond-review .photo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .hammond-review .photo-grid figure:first-child,
      .hammond-review .photo-grid figure:nth-child(2) {
        grid-column: auto;
        grid-row: auto;
      }
      .hammond-review .photo-grid img,
      .hammond-review .photo-grid figure:first-child img,
      .hammond-review .photo-grid figure:nth-child(2) img {
        height: 240px;
      }
      .framework {
        background: linear-gradient(125deg, #125f97, #237fba 55%, #327baf);
      }
      .need {
        background: rgba(255,255,255,.14);
      }
      footer {
        background: #173b65;
      }
      #map-section,
      #reviews,
      #isamu,
      #about,
      #contact,
      .long-review,
      .place-card {
        scroll-margin-top: 88px;
      }
      @media (max-width: 850px) {
        .timing-guide { grid-template-columns: 1fr; }
        .hero-layout {
          grid-template-columns: 1fr;
          gap: 34px;
        }
        .hero h1 {
          max-width: 720px;
        }
        .hero-photos {
          width: min(100%, 620px);
          height: 440px;
          margin: auto;
        }
      }
      @media (max-width: 540px) {
        .hero {
          min-height: 0;
          padding: 42px 0 56px;
        }
        .hero .wrap {
          padding: 0 24px;
        }
        .hero h1 {
          font-size: clamp(3.1rem, 13vw, 4.7rem);
        }
        .hero-photos {
          height: 315px;
        }
        .hero-photo {
          height: 67%;
          padding: 7px 7px 0;
        }
        .hero-photo img {
          height: calc(100% - 30px);
        }
        .hero-photo figcaption {
          font-size: .7rem;
          line-height: 30px;
        }
        .hero-sticker {
          width: 70px;
          height: 70px;
          font-size: .9rem;
          right: 0;
          bottom: 2%;
        }
        .intro {
          gap: 20px;
        }
        .hammond-review .photo-grid {
          grid-template-columns: 1fr 1fr;
        }
        .hammond-review .photo-grid img,
        .hammond-review .photo-grid figure:first-child img,
        .hammond-review .photo-grid figure:nth-child(2) img {
          height: 180px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .hero-button,
        .place-card,
        .hero-photo {
          transition: none;
        }
      }
    
      .features { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
      .review-preview { min-width: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
      .review-preview img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
      .review-preview-copy { padding: 21px 23px 24px; display: flex; flex-direction: column; flex: 1; }
      .review-preview h3 { font-size: 1.5rem; line-height: 1.17; margin: 8px 0 10px; }
      .review-preview h3 a { color: var(--ink); text-decoration: none; }
      .review-preview h3 a:hover, .review-preview h3 a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
      .review-preview p { margin: 0 0 18px; }
      .review-preview .read-review, .review-back { color: var(--deep); font-weight: 800; text-underline-offset: 4px; }
      .review-preview .read-review { margin-top: auto; }
      .review-page-main { padding-top: 30px; padding-bottom: 64px; }
      .review-breadcrumb { margin: 0 0 22px; color: var(--muted); font-size: .95rem; }
      .review-breadcrumb a { color: var(--deep); }
      .review-page-main .long-review { width: 100%; }
      .review-page-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
      .review-page-actions a { display: inline-block; border: 2px solid var(--deep); color: var(--deep); border-radius: 99px; padding: 10px 17px; font-weight: 800; text-decoration: none; }
      .review-page-actions a:hover, .review-page-actions a:focus-visible { background: var(--deep); color: white; }
      @media (max-width: 900px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
      @media (max-width: 640px) { .features { grid-template-columns: 1fr; } .review-page-main { padding-top: 20px; } }

      .review-page-main .review-copy h1 { font-family: Fraunces, serif; font-size: clamp(2.1rem, 4.5vw, 3.4rem); line-height: 1.1; margin: 10px 0 14px; }

/* Personal travel logistics articles. */
.travel-tips-section {margin: 40px 0; scroll-margin-top: 110px;}
.travel-tips-section h2 {margin: 8px 0 22px;}
.travel-tip-feature {display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);gap:28px;align-items:center;background:#fff;border:1px solid #dce6ea;border-radius:24px;padding:22px;box-shadow:0 10px 28px #203d5610;}
.travel-tip-feature img {display:block;width:100%;height:290px;object-fit:cover;border-radius:15px;}
.travel-tip-feature h3 {font-family:Fraunces,serif;font-size:clamp(23px,3vw,32px);line-height:1.2;margin:10px 0;}
.travel-tip-feature h3 a {color:inherit;text-decoration:none;}
.travel-tip-feature p {line-height:1.65;}
.tips-photo-grid img {height:auto !important;max-height:480px;object-fit:contain !important;background:#edf3f4;}
@media(max-width:640px){.travel-tip-feature{grid-template-columns:1fr;gap:16px;padding:16px;}.travel-tip-feature img{height:240px;}.travel-tips-section{margin:28px 0;}}
