/* =========================================================
   JUST ARRIVED™ — PREMIUM EDITION
   Template Forge

   DESIGN DIRECTION
   ---------------------------------------------------------
   Editorial travel journal.
   Large destination photography.
   Asymmetrical compositions.
   Warm paper backgrounds.
   Magazine typography.
   Minimal travel-document decoration.

   This is intentionally NOT a dashboard / card-grid layout.
   ========================================================= */


/* =========================================================
   01. ROOT
   ========================================================= */

:root {
    --ink: #171714;
    --ink-soft: #35352f;

    --ivory: #f5f1e8;
    --paper: #ebe5d8;
    --paper-warm: #ded4c4;

    --white: #fffdf8;

    --green: #173d36;
    --green-deep: #102c28;

    --coral: #d55e49;
    --sand: #c8af86;
    --gold: #b18a4c;

    --line: rgba(23, 23, 20, 0.18);
    --line-dark: rgba(23, 23, 20, 0.42);
    --line-light: rgba(255, 253, 248, 0.22);

    --serif:
        "Cormorant Garamond",
        Georgia,
        serif;

    --sans:
        "Manrope",
        Arial,
        sans-serif;

    --mono:
        "IBM Plex Mono",
        Consolas,
        monospace;

    --shell: 1200px;
    --header-height: 82px;

    --ease:
        cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   02. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--ivory);
    font-family: var(--sans);
    font-size: 1.05rem;
    line-height: 1.68;
    overflow-x: hidden;
}

body.nav-open {
    overflow: hidden;
}

img {
    display: block;
    width: 100%;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
summary {
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
    margin-top: 0;
}

button {
    border: 0;
}

::selection {
    color: var(--white);
    background: var(--coral);
}


/* =========================================================
   03. GLOBAL
   ========================================================= */

.site-shell {
    width: min(
        calc(100% - 4rem),
        var(--shell)
    );
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 9999;
    top: 1rem;
    left: 1rem;
    padding:
        0.7rem
        1rem;
    color: var(--white);
    background: var(--ink);
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    transform: translateY(-180%);
    transition:
        transform 180ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.editorial-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
}

.editorial-label > span:first-child {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border:
        1px solid var(--line-dark);
    border-radius: 50%;
}

.editorial-label--light {
    color:
        rgba(255, 253, 248, 0.75);
}

.editorial-label--light > span:first-child {
    border-color:
        rgba(255, 253, 248, 0.42);
}

.editorial-link {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid currentColor;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: gap 200ms var(--ease),
        color 200ms ease;
}

.editorial-link:hover {
    gap: 1.2rem;
    color: var(--coral);
}

.editorial-link--light {
    color: var(--white);
}

.editorial-link--light:hover {
    color: #e5cfa9;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid var(--coral);
    outline-offset: 4px;
}



/* ---------- LAYOUT CONTAINMENT ---------- */
/* Prevent intrinsic content from expanding editorial grids. */

.hero__content,
.feeling__intro,
.destination-story__japan-layout,
.destination-story--caribbean,
.overload__inner,
.travel-mosaic__layout,
.journey__feature,
.advisor,
.inquiry__heading,
.last-call__inner,
.site-footer__main {
    min-width: 0;
}

.hero__content > *,
.feeling__intro > *,
.destination-story__japan-layout > *,
.destination-story--caribbean > *,
.overload__inner > *,
.travel-mosaic__layout > *,
.journey__feature > *,
.advisor > *,
.inquiry__heading > *,
.last-call__inner > *,
.site-footer__main > * {
    min-width: 0;
}


/* =========================================================
   04. HEADER
   ========================================================= */

.site-header {
    position: absolute;
    z-index: 100;
    top: 0;
    right: 0;
    left: 0;
    height: var(--header-height);
    color: var(--white);
    transition: color 250ms ease,
        background 250ms ease,
        border-color 250ms ease,
        backdrop-filter 250ms ease;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.site-header::after {
    content: "";
    position: absolute;
    right: 2rem;
    bottom: 0;
    left: 2rem;
    height: 1px;
    background:
        rgba(255, 255, 255, 0.28);
    transition:
        background 250ms ease;
}

.site-header.site-header--scrolled {
    color: var(--white);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.site-header.site-header--scrolled::after {
    background: rgba(255, 255, 255, 0.28);
}

.site-header__inner {
    width:
        min(
            calc(100% - 4rem),
            var(--shell)
        );
    height: 100%;
    margin-inline: auto;
    display: grid;
    grid-template-columns:
        auto
        1fr
        auto;
    align-items: center;
    gap: 3rem;
}

.brand {
    font-family: var(--serif);
    font-size:
        clamp(1.4rem, 2vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
}

.brand span {
    position: relative;
    top: -0.65em;
    margin-left: 0.08em;
    font-family: var(--sans);
    font-size: 0.32em;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:
        clamp(1.2rem, 2vw, 2.5rem);
}

.site-nav a {
    position: relative;
    padding: 0.4rem
        0;
    font-family: var(--mono);
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.site-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition:
        transform 180ms ease;
}

.site-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.6rem
        0.95rem;
    border: 1px solid currentColor;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: color 180ms ease,
        background 180ms ease;
}

.header-cta:hover {
    color: var(--ink);
    background: var(--white);
}

.site-header--scrolled
.header-cta:hover {
    color: var(--ink);
    background: var(--white);
}

.nav-toggle {
    display: none;
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.nav-toggle span {
    position: absolute;
    left: 10px;
    width: 28px;
    height: 1px;
    background: currentColor;
    transition:
        top 200ms ease,
        transform 200ms ease;
}

.nav-toggle span:first-child {
    top: 19px;
}

.nav-toggle span:last-child {
    top: 28px;
}

.nav-toggle[aria-expanded="true"]
span:first-child {
    top: 24px;
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"]
span:last-child {
    top: 24px;
    transform: rotate(-45deg);
}


/* =========================================================
   05. HERO
   ========================================================= */

.hero {
    position: relative;
    min-height: 100svh;
    color: var(--white);
    background: var(--ink);
    overflow: hidden;
}

.hero__media,
.hero__shade {
    position: absolute;
    inset: 0;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
}

.hero__shade {
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(12, 18, 17, 0.34) 0%,
            rgba(12, 18, 17, 0.10) 30%,
            rgba(12, 18, 17, 0.08) 52%,
            rgba(12, 18, 17, 0.72) 100%
        ),
        linear-gradient(
            90deg,
            rgba(11, 17, 16, 0.28),
            transparent 56%
        );
}

.hero__content {
    position: relative;
    z-index: 3;
    width:
        min(
            calc(100% - 4rem),
            var(--shell)
        );
    min-height: 100svh;
    margin-inline: auto;
    padding:
        calc(var(--header-height) + 4rem)
        0
        4.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero__topline {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 1rem;
    font-family: var(--mono);
    font-size: 0.57rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    opacity: 0.82;
}

.hero h1 {
    max-width: 1050px;
    margin: auto
        0
        auto;
    padding: clamp(4rem, 10vh, 8rem)
        0;
    font-family: var(--serif);
    font-size: clamp(6rem, 14vw, 14rem);
    font-weight: 600;
    line-height: 0.72;
    letter-spacing: -0.055em;
}

.hero h1 em {
    display: block;
    margin-left: clamp(3rem, 9vw, 9rem);
    font-weight: 500;
}

.hero__bottom {
    display: grid;
    grid-template-columns:
        1fr
        minmax(290px, 0.42fr);
    align-items: end;
    gap: 4rem;
}

.hero__statement {
    max-width: 760px;
    margin-bottom: 0;
    font-family: var(--serif);
    font-size: clamp(2.3rem, 3.6vw, 3.8rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.025em;
}

.hero__intro {
    border-top:
        1px solid rgba(255,255,255,.44);
    padding-top: 1rem;
}

.hero__intro p {
    max-width: 320px;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.6;
}

.hero__intro a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem
        0;
    border-top: 1px solid rgba(255,255,255,.22);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hero__intro a span {
    font-size: 1rem;
}

.hero__scroll {
    position: absolute;
    z-index: 4;
    right: 2rem;
    bottom: 2.2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    writing-mode: vertical-rl;
    font-family: var(--mono);
    font-size: 0.51rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* =========================================================
   06. FEELING
   ========================================================= */

.feeling {
    position: relative;
    padding:
        clamp(7rem, 11vw, 13rem)
        0
        clamp(6rem, 10vw, 11rem);
    background: var(--ivory);
    overflow: hidden;
}

.feeling__intro {
    display: grid;
    grid-template-columns:
        minmax(250px, 0.45fr)
        minmax(0, 1.2fr);
    align-items: end;
    gap:
        clamp(3rem, 8vw, 10rem);
    margin-top:
        clamp(4rem, 8vw, 8rem);
}

.feeling__intro > p {
    max-width: 390px;
    margin-bottom: 1rem;
    color: rgba(23, 23, 20, 0.63);
    font-size: 1rem;
    line-height: 1.7;
}

.feeling h2 {
    margin-bottom: 0;
    font-family: var(--serif);
    font-size: clamp(4rem, 7.6vw, 8.6rem);
    font-weight: 600;
    line-height: 0.83;
    letter-spacing: -0.045em;
    max-width: 1050px;
}

.feeling h2 em {
    display: block;
    margin-left: clamp(1rem, 3vw, 3rem);
    font-weight: 500;
    color: var(--green);
}

.feeling__marquee {
    width: 100%;
    margin:
        clamp(5rem, 8vw, 8rem)
        0
        clamp(3rem, 6vw, 6rem);
    overflow: hidden;
    border-top:
        1px solid var(--line);
    border-bottom:
        1px solid var(--line);
}

.feeling__marquee > div {
    display: flex;
    align-items: center;
    gap:
        clamp(2rem, 4vw, 5rem);
    width: max-content;
    padding:
        1.5rem
        0;
    transform: translateX(-3vw);
}

.feeling__marquee span {
    font-family: var(--serif);
    font-size: clamp(3rem, 5.8vw, 6.7rem);
    font-style: italic;
    line-height: 1;
    letter-spacing: -0.045em;
    white-space: nowrap;
    font-weight: 600;
}

.feeling__marquee span:nth-child(even) {
    color: var(--coral);
}

.feeling__note {
    max-width: 590px;
    margin: 0
        0
        0
        auto;
    padding-left: 2rem;
    border-left: 1px solid var(--line-dark);
    color: rgba(23,23,20,.66);
    font-size: 0.95rem;
    line-height: 1.65;
}


/* =========================================================
   07. ITALY
   ========================================================= */

.destination-story--italy {
    position: relative;
    min-height: 92svh;
    overflow: hidden;
    background: var(--green-deep);
}

.destination-story--italy
.destination-story__image {
    position: absolute;
    inset: 0;
}

.destination-story--italy
.destination-story__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(7, 18, 17, 0.5),
            transparent 50%
        ),
        linear-gradient(
            180deg,
            transparent 54%,
            rgba(7, 18, 17, 0.62)
        );
}

.destination-story--italy img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.destination-story__caption {
    position: absolute;
    z-index: 2;
    left:
        max(
            2rem,
            calc((100vw - var(--shell)) / 2)
        );
    bottom:
        clamp(3rem, 7vw, 7rem);
    color: var(--white);
}

.destination-story__caption > span {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
}

.destination-story__caption h2 {
    margin-bottom: 0.1rem;
    font-family: var(--serif);
    font-size: clamp(5rem, 12vw, 12rem);
    font-weight: 600;
    line-height: 0.77;
    letter-spacing: -0.05em;
}

.destination-story__caption p {
    margin: 1.8rem
        0
        0
        clamp(2rem, 8vw, 9rem);
    font-family: var(--serif);
    font-size: clamp(2rem, 3.3vw, 3.3rem);
    line-height: 1.02;
    font-weight: 600;
}

.destination-story__number {
    position: absolute;
    z-index: 2;
    top: 3rem;
    right:
        max(
            2rem,
            calc((100vw - var(--shell)) / 2)
        );
    color:
        rgba(255,255,255,.7);
    font-family: var(--mono);
    font-size: 0.65rem;
}


/* =========================================================
   08. JAPAN
   ========================================================= */

.destination-story--japan {
    padding:
        clamp(7rem, 12vw, 14rem)
        0;
    background: var(--white);
    overflow: hidden;
}

.destination-story__japan-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(420px, 0.72fr);
    align-items: center;
    gap:
        clamp(4rem, 10vw, 12rem);
}

.destination-story__japan-copy {
    position: relative;
    z-index: 2;
}

.destination-story__japan-copy h2 {
    max-width: 760px;
    margin: clamp(3rem, 6vw, 6rem)
        0
        2.5rem;
    font-family: var(--serif);
    font-size: clamp(4rem, 6.6vw, 7.3rem);
    font-weight: 600;
    line-height: 0.84;
    letter-spacing: -0.045em;
}

.destination-story__japan-copy h2 em {
    display: block;
    margin-left: clamp(1rem, 4vw, 4rem);
    color: var(--coral);
    font-weight: 500;
}

.destination-story__japan-copy > p {
    max-width: 600px;
    margin-bottom: 2.5rem;
    color: rgba(23, 23, 20, 0.68);
    font-size: 1rem;
    line-height: 1.7;
}

.destination-story__japan-image {
    position: relative;
    width: 100%;
    height:
        clamp(600px, 75vw, 960px);
}

.destination-story__japan-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.destination-story__japan-image > span {
    position: absolute;
    right: 0;
    bottom: -2rem;
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
}


/* =========================================================
   09. CARIBBEAN
   ========================================================= */

.destination-story--caribbean {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(360px, 0.8fr);
    min-height: 760px;
    background: var(--paper);
}

.destination-story__caribbean-image {
    min-height: 760px;
    overflow: hidden;
}

.destination-story__caribbean-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.destination-story__caribbean-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        clamp(3rem, 6vw, 7rem);
}

.destination-story__caribbean-copy > span {
    margin-bottom: 3rem;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.11em;
}

.destination-story__caribbean-copy h2 {
    margin-bottom: 2rem;
    font-family: var(--serif);
    font-size: clamp(3.7rem, 5.6vw, 6.2rem);
    font-weight: 600;
    line-height: 0.88;
    letter-spacing: -0.04em;
    max-width: 650px;
}

.destination-story__caribbean-copy p {
    max-width: 420px;
    margin-bottom: 0;
    color: rgba(23,23,20,.68);
    font-size: 1rem;
    line-height: 1.65;
}


/* =========================================================
   10. INFORMATION OVERLOAD
   ========================================================= */

.overload {
    padding:
        clamp(8rem, 13vw, 15rem)
        0
        clamp(6rem, 10vw, 11rem);
    background: var(--ivory);
    overflow: hidden;
}

.overload__inner {
    display: grid;
    grid-template-columns:
        minmax(320px, 0.65fr)
        minmax(0, 1.15fr);
    align-items: center;
    gap:
        clamp(4rem, 10vw, 12rem);
}

.overload__noise {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 520px;
    color: rgba(23, 23, 20, 0.50);
    font-family: var(--mono);
    font-size: clamp(0.72rem, 0.85vw, 0.9rem);
    line-height: 1.75;
    transform: rotate(-2deg);
}

.overload__noise span:nth-child(2n) {
    margin-left: 10%;
}

.overload__noise span:nth-child(3n) {
    margin-left: 20%;
    color: rgba(23, 23, 20, 0.50);
}

.overload__noise span:nth-child(5n) {
    text-decoration: line-through;
    color: rgba(23, 23, 20, 0.50);
    text-decoration-color: rgba(23, 23, 20, 0.50);
}

.overload__statement h2 {
    max-width: 850px;
    margin: clamp(3rem, 5vw, 5rem)
        0
        0;
    font-family: var(--serif);
    font-size: clamp(4rem, 6.8vw, 7.6rem);
    font-weight: 600;
    line-height: 0.82;
    letter-spacing: -0.045em;
}

.overload__statement h2 strong {
    display: block;
    color: var(--coral);
    font-weight: 500;
}

.overload__answer {
    margin: clamp(3rem, 6vw, 6rem)
        0
        0;
    font-family: var(--serif);
    font-size: clamp(2.4rem, 4vw, 4.2rem);
    line-height: 1;
    font-weight: 600;
}

.overload__answer em {
    color: var(--green);
}

.planning-lines {
    margin-top:
        clamp(7rem, 12vw, 13rem);
}

.planning-line {
    display: grid;
    grid-template-columns:
        minmax(180px, 0.4fr)
        minmax(0, 1fr);
    gap:
        clamp(2rem, 8vw, 10rem);
    padding:
        1.7rem
        0;
    border-top:
        1px solid var(--line-dark);
}

.planning-line:last-child {
    border-bottom:
        1px solid var(--line-dark);
}

.planning-line > span {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 2.4vw, 2.6rem);
    line-height: 1;
    font-weight: 600;
}

.planning-line p {
    max-width: 760px;
    margin-bottom: 0;
    color: rgba(23,23,20,.68);
    font-size: 0.98rem;
    line-height: 1.65;
}


/* =========================================================
   11. TRAVEL MOSAIC
   ========================================================= */

.travel-mosaic {
    padding:
        clamp(7rem, 11vw, 13rem)
        0;
    background: var(--green-deep);
    color: var(--white);
    overflow: hidden;
}

.travel-mosaic
.editorial-label {
    color:
        rgba(255,255,255,.72);
}

.travel-mosaic
.editorial-label > span:first-child {
    border-color:
        rgba(255,255,255,.42);
}

.travel-mosaic__layout {
    width: min(calc(100% - 4rem), 1640px);
    margin: clamp(5rem, 8vw, 8rem) auto 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1.5rem, 2.5vw, 3rem);
    align-items: start;
    grid-auto-rows: auto;
}

.travel-mosaic__item {
    margin: 0;
}

.travel-mosaic__item img {
    width: 100%;
    object-fit: cover;
    display: block;
    max-width: 100%;
}

.travel-mosaic__item figcaption {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 0.9rem;
    width: 100%;
    min-width: 0;
}

.travel-mosaic__item figcaption span {
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.09em;
}

.travel-mosaic__item figcaption strong {
    max-width: 300px;
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: right;
    min-width: 0;
    overflow-wrap: break-word;
}

.travel-mosaic__item--honeymoon {
    grid-column: 1 / 7;
    grid-row: 1 / 3;
    margin-top: 7rem;
    width: 100%;
    min-width: 0;
}

.travel-mosaic__item--honeymoon img {
    height:
        clamp(580px, 62vw, 880px);
}

.travel-mosaic__quote {
    grid-column: 7 / 13;
    align-self: end;
    padding: clamp(2rem, 4vw, 5rem) 0 clamp(4rem, 7vw, 8rem);
    grid-row: 1;
    width: 100%;
    min-width: 0;
}

.travel-mosaic__quote p {
    max-width: 720px;
    margin-bottom: 0;
    font-family: var(--serif);
    font-size: clamp(2.8rem, 4.25vw, 5rem);
    font-weight: 600;
    line-height: 0.94;
    letter-spacing: -0.035em;
    width: 100%;
    margin: 0 0 0 auto;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

.travel-mosaic__item--family {
    grid-column: 7 / 10;
    grid-row: 2;
    margin-top: 0;
    width: 100%;
    min-width: 0;
}

.travel-mosaic__item--family img {
    height:
        clamp(420px, 48vw, 690px);
}

.travel-mosaic__item--cruise {
    grid-column: 10 / 13;
    grid-row: 2;
    align-self: end;
    width: 100%;
    min-width: 0;
}

.travel-mosaic__item--cruise img {
    height:
        clamp(340px, 34vw, 520px);
}


/* =========================================================
   12. SAMPLE JOURNEY
   ========================================================= */

.journey {
    padding:
        clamp(8rem, 13vw, 15rem)
        0;
    background: var(--white);
    overflow: hidden;
}

.journey__heading h2 {
    max-width: 1220px;
    margin: clamp(3rem, 6vw, 6rem)
        0
        clamp(5rem, 8vw, 9rem);
    font-family: var(--serif);
    font-size: clamp(4rem, 6.8vw, 7.7rem);
    font-weight: 600;
    line-height: 0.82;
    letter-spacing: -0.045em;
}

.journey__heading h2 em {
    color: var(--coral);
    font-weight: 500;
}

.journey__feature {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(380px, 0.65fr);
    align-items: stretch;
}

.journey__feature-image {
    min-height: 860px;
}

.journey__feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.journey__schedule {
    padding:
        clamp(3rem, 6vw, 7rem);
    color: var(--white);
    background: var(--green);
}

.journey__schedule article {
    position: relative;
    padding:
        0
        0
        2.4rem
        2rem;
    border-left:
        1px solid rgba(255,255,255,.26);
}

.journey__schedule article:last-child {
    padding-bottom: 0;
}

.journey__schedule article::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: -5px;
    width: 9px;
    height: 9px;
    background: var(--white);
    border-radius: 50%;
}

.journey__schedule span {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    opacity: 0.6;
}

.journey__schedule h3 {
    margin-bottom: 0.5rem;
    font-family: var(--serif);
    font-size: clamp(2rem, 2.6vw, 2.8rem);
    font-weight: 600;
    line-height: 1;
}

.journey__schedule p {
    max-width: 430px;
    margin-bottom: 0;
    color: rgba(255,255,255,.68);
    font-size: 0.92rem;
    line-height: 1.65;
}

.journey__note {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 700px);
    justify-content: end;
    gap:
        clamp(2rem, 5vw, 5rem);
    margin-top:
        clamp(4rem, 7vw, 7rem);
}

.journey__note span {
    padding-top: 0.5rem;
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.09em;
}

.journey__note p {
    margin-bottom: 0;
    font-family: var(--serif);
    font-size: clamp(2rem, 3vw, 3.1rem);
    line-height: 1.05;
    font-weight: 600;
}


/* =========================================================
   13. ADVISOR
   ========================================================= */

.advisor {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    min-height: 900px;
    color: var(--white);
    background: var(--ink);
}

.advisor__image {
    min-height: 900px;
}

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

.advisor__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        clamp(4rem, 8vw, 9rem);
}

.advisor__content h2 {
    margin: clamp(3rem, 6vw, 6rem)
        0
        2rem;
    font-family: var(--serif);
    font-size: clamp(3.7rem, 5.8vw, 6.3rem);
    font-weight: 600;
    line-height: 0.84;
    letter-spacing: -0.045em;
    max-width: 720px;
}

.advisor__content h2 em {
    display: block;
    color: #dfc7a2;
    font-weight: 500;
}

.advisor__lead {
    max-width: 650px;
    margin-bottom: 1.8rem;
    font-family: var(--serif);
    font-size: clamp(1.6rem, 2vw, 2.1rem);
    line-height: 1.25;
    font-weight: 600;
}

.advisor__content > p:not(.advisor__lead) {
    max-width: 620px;
    color: rgba(255,255,255,.62);
    font-size: 0.98rem;
    line-height: 1.7;
}

.advisor__details {
    max-width: 700px;
    margin:
        3rem
        0;
    border-top:
        1px solid var(--line-light);
}

.advisor__details > div {
    display: grid;
    grid-template-columns:
        145px
        1fr;
    gap: 2rem;
    padding:
        1rem
        0;
    border-bottom:
        1px solid var(--line-light);
}

.advisor__details dt {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.58;
}

.advisor__details dd {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
}


/* =========================================================
   14. TRAVELER STORY
   ========================================================= */

.traveler-story {
    position: relative;
    min-height: 95svh;
    color: var(--white);
    background: var(--ink);
    overflow: hidden;
}

.traveler-story__image,
.traveler-story__shade {
    position: absolute;
    inset: 0;
}

.traveler-story__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.traveler-story__shade {
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(11,17,16,.78),
            rgba(11,17,16,.18) 65%,
            rgba(11,17,16,.05)
        ),
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(11,17,16,.55)
        );
}

.traveler-story__content {
    position: relative;
    z-index: 2;
    width:
        min(
            calc(100% - 4rem),
            var(--shell)
        );
    min-height: 95svh;
    margin-inline: auto;
    padding:
        clamp(5rem, 9vw, 9rem)
        0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.traveler-story__content > span {
    margin-bottom: clamp(2rem, 4vw, 4rem);
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.11em;
}

.traveler-story blockquote {
    max-width: 980px;
    margin-bottom: clamp(3rem, 6vw, 6rem);
    font-family: var(--serif);
    font-size: clamp(3.8rem, 6.7vw, 7.5rem);
    font-weight: 600;
    line-height: 0.85;
    letter-spacing: -0.04em;
}

.traveler-story__content > p {
    margin-bottom: 0;
    font-family: var(--mono);
    font-size: 0.68rem;
    line-height: 1.8;
    letter-spacing: 0.04em;
}


/* =========================================================
   15. INQUIRY
   ========================================================= */

.inquiry {
    padding:
        clamp(8rem, 13vw, 15rem)
        0;
    background: var(--paper);
}

.inquiry__heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, 0.38fr);
    align-items: end;
    gap:
        clamp(4rem, 8vw, 9rem);
    margin:
        clamp(4rem, 7vw, 7rem)
        0
        clamp(6rem, 10vw, 10rem);
}

.inquiry__heading h2 {
    margin-bottom: 0;
    font-family: var(--serif);
    font-size: clamp(4rem, 7vw, 7.8rem);
    font-weight: 600;
    line-height: 0.82;
    letter-spacing: -0.045em;
    max-width: 1050px;
}

.inquiry__heading h2 em {
    color: var(--green);
    font-weight: 500;
}

.inquiry__heading p {
    max-width: 430px;
    margin-bottom: 0.6rem;
    color: rgba(23,23,20,.65);
    font-size: 1rem;
    line-height: 1.65;
}

.inquiry-form {
    max-width: 1180px;
    margin-inline: auto;
}

.sentence-field {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.7rem
        1rem;
    padding: 1.8rem
        0;
    border-bottom: 1px solid var(--line-dark);
    font-family: var(--serif);
    font-size: clamp(2rem, 3.4vw, 3.6rem);
    line-height: 1.2;
    font-weight: 600;
}

.sentence-field label {
    flex: 0 0 auto;
}

.sentence-field input,
.sentence-field select {
    flex: 1 1 260px;
    min-width: 160px;
    padding: 0
        0.15rem
        0.18rem;
    color: var(--coral);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(23,23,20,.23);
    border-radius: 0;
    outline: 0;
    font-family: var(--serif);
    font-size: inherit;
    line-height: 1.15;
    font-weight: 600;
}

.sentence-field input::placeholder {
    color:
        rgba(213,94,73,.46);
}

.sentence-field select {
    appearance: auto;
}

.sentence-field > span {
    flex: 0 0 auto;
}

.inquiry-form__notes {
    padding:
        3rem
        0;
}

.inquiry-form__notes label {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.inquiry-form__notes textarea {
    width: 100%;
    min-height: 150px;
    padding: 1rem
        0;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
    border-radius: 0;
    outline: 0;
    resize: vertical;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.1vw, 2.2rem);
    line-height: 1.25;
    font-weight: 600;
}

.inquiry-form__notes textarea::placeholder {
    color:
        rgba(23,23,20,.34);
}

.inquiry-form__submit {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 0.4fr);
    align-items: end;
    gap:
        clamp(3rem, 7vw, 8rem);
    margin-top:
        clamp(2rem, 5vw, 5rem);
}

.inquiry-form__submit button {
    position: relative;
    display: grid;
    grid-template-columns: auto
        1fr
        auto;
    align-items: end;
    gap: 1rem;
    width: 100%;
    padding: 1.4rem
        0;
    color: var(--ink);
    background: transparent;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    font-family: var(--serif);
    font-size: clamp(2.4rem, 4vw, 4.2rem);
    font-weight: 600;
    line-height: 0.95;
    text-align: left;
    cursor: pointer;
    transition: color 200ms ease,
        padding 200ms var(--ease);
}

.inquiry-form__submit button:hover {
    color: var(--coral);
    padding-left: 1rem;
    padding-right: 1rem;
}

.inquiry-form__submit button em {
    font-weight: 500;
}

.inquiry-form__submit button span {
    font-family: var(--sans);
    font-size:
        clamp(1.2rem, 2vw, 2rem);
}

.inquiry-form__submit p {
    margin-bottom: 0.4rem;
    color:
        rgba(23,23,20,.54);
    font-family: var(--mono);
    font-size: 0.55rem;
    line-height: 1.7;
}


/* =========================================================
   16. LAST CALL
   ========================================================= */

.last-call {
    padding:
        clamp(7rem, 12vw, 14rem)
        0;
    color: var(--white);
    background: var(--coral);
}

.last-call__inner {
    display: grid;
    grid-template-columns:
        0.25fr
        1fr;
    gap:
        clamp(2rem, 7vw, 8rem);
}

.last-call p {
    padding-top: 0.7rem;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.last-call h2 {
    max-width: 980px;
    margin-bottom: clamp(3rem, 6vw, 6rem);
    font-family: var(--serif);
    font-size: clamp(4.2rem, 7vw, 7.7rem);
    font-weight: 600;
    line-height: 0.82;
    letter-spacing: -0.045em;
}

.last-call h2 em {
    display: block;
    color: var(--ink);
    font-weight: 500;
}

.last-call a {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.2rem
        0;
    border-top: 1px solid rgba(255,255,255,.65);
    border-bottom: 1px solid rgba(255,255,255,.65);
    font-family: var(--serif);
    font-size: clamp(2rem, 3vw, 3.2rem);
    line-height: 1;
    font-weight: 600;
}

.last-call a span {
    transition:
        transform 200ms var(--ease);
}

.last-call a:hover span {
    transform: translateX(8px);
}


/* =========================================================
   17. FOOTER
   ========================================================= */

.site-footer {
    color:
        rgba(255,255,255,.78);
    background: var(--ink);
}

.site-footer__main {
    display: grid;
    grid-template-columns:
        1fr
        0.7fr
        0.7fr;
    gap:
        clamp(3rem, 7vw, 8rem);
    padding:
        5rem
        0;
    border-bottom:
        1px solid rgba(255,255,255,.15);
}

.site-footer__brand {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--white);
    font-family: var(--serif);
    font-size: clamp(2.3rem, 3vw, 3.2rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
}

.site-footer__main > div:first-child p {
    margin-bottom: 0;
    color: rgba(255,255,255,.54);
    font-family: var(--serif);
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
}

.site-footer__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

.site-footer__nav a {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.site-footer__nav a:hover {
    color: #dfc7a2;
}

.site-footer__note span {
    display: block;
    margin-bottom: 0.8rem;
    color: rgba(255,255,255,.44);
    font-family: var(--mono);
    font-size: 0.63rem;
    letter-spacing: 0.08em;
}

.site-footer__note p {
    max-width: 290px;
    margin-bottom: 0;
    font-size: 0.86rem;
}

.site-footer__bottom {
    display: grid;
    grid-template-columns: auto
        1fr
        auto;
    gap: 2rem;
    padding: 1.3rem
        0
        1.5rem;
    font-family: var(--mono);
    font-size: 0.58rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    opacity: 0.48;
}

.site-footer__bottom span:nth-child(2) {
    text-align: center;
}


/* =========================================================
   18. DEMO TOAST
   ========================================================= */

.demo-toast {
    position: fixed;
    z-index: 1000;
    right: 1.4rem;
    bottom: 1.4rem;
    width:
        min(
            430px,
            calc(100% - 2.8rem)
        );
    padding:
        1.2rem
        1.3rem;
    color: var(--white);
    background: var(--green-deep);
    border:
        1px solid rgba(255,255,255,.32);
    box-shadow:
        0 24px 70px rgba(0,0,0,.26);
}

.demo-toast[hidden] {
    display: none;
}

.demo-toast strong {
    display: block;
    margin-bottom: 0.45rem;
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
}

.demo-toast span {
    display: block;
    color:
        rgba(255,255,255,.68);
    font-size: 0.75rem;
    line-height: 1.55;
}


/* =========================================================
   19. MOBILE NAV PORTAL
   main.js will move the navigation to body on mobile.
   ========================================================= */

.site-nav.site-nav--portal {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding:
        calc(var(--header-height) + 3rem)
        2rem
        3rem;
    color: var(--white);
    background: var(--green-deep);
    overflow-y: auto;
}

.site-nav.site-nav--portal a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding:
        0.8rem
        0;
    border-bottom:
        1px solid rgba(255,255,255,.2);
    font-family: var(--serif);
    font-size:
        clamp(2.6rem, 9vw, 5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: none;
}

.site-nav.site-nav--portal a:first-child {
    border-top:
        1px solid rgba(255,255,255,.2);
}

.site-nav.site-nav--portal a::after {
    content: "↗";
    position: static;
    width: auto;
    height: auto;
    background: none;
    transform: none;
    font-family: var(--sans);
    font-size: 1rem;
}

.site-nav.site-nav--portal a:hover::after {
    transform: none;
}


/* =========================================================
   20. WIDE SCREENS
   ========================================================= */

@media (min-width: 1700px) {

    

    .destination-story__japan-layout {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(520px, 0.64fr);
    }

    

}



/* =========================================================
   21. MOSAIC — MEDIUM DESKTOP
   ========================================================= */

@media (min-width: 981px) and (max-width: 1300px) {

    .travel-mosaic__layout {
        grid-template-columns:
            repeat(10, minmax(0, 1fr));
    }

    .travel-mosaic__item--honeymoon {
        grid-column: 1 / 6;
    }

    .travel-mosaic__quote {
        grid-column: 6 / 11;
    }

    .travel-mosaic__item--family {
        grid-column: 6 / 8;
    }

    .travel-mosaic__item--cruise {
        grid-column: 8 / 11;
    }

    .travel-mosaic__quote p {
        max-width: 100%;
        font-size:
            clamp(2.6rem, 4vw, 4.1rem);
    }

}


/* =========================================================
   22. MEDIUM DESKTOP
   ========================================================= */

@media (max-width: 1200px) {

    .site-shell,
    .site-header__inner,
    .hero__content,
    .traveler-story__content {
        width:
            min(
                calc(100% - 3rem),
                var(--shell)
            );
    }

    .site-header__inner {
        gap: 2rem;
    }

    .site-nav {
        gap: 1rem;
    }

    .site-nav a {
        font-size: 0.69rem;
    }

    .header-cta {
        font-size: 0.66rem;
    }

    .hero h1 {
        font-size: clamp(6rem, 14vw, 14rem);
    }

    .destination-story__japan-layout {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(380px, 0.7fr);
        gap: 5rem;
    }

    

    .journey__schedule {
        padding: 4rem 3rem;
    }

    .advisor__content {
        padding:
            5rem
            4rem;
    }

}


/* =========================================================
   23. TABLET
   ========================================================= */

@media (max-width: 980px) {

    :root {
        --header-height: 74px;
    }

    .site-nav,
    .header-cta {
        display: none;
    }

    .site-header__inner {
        grid-template-columns:
            1fr
            auto;
    }

    .nav-toggle {
        display: block;
    }

    .site-header {
        color: var(--white);
    }

    .site-header--scrolled {
        color: var(--white);
    }

    .hero__content {
        padding-bottom: 3rem;
    }

    .hero h1 {
        font-size: clamp(6rem, 18vw, 10rem);
    }

    .hero__bottom {
        grid-template-columns:
            1fr
            0.55fr;
        gap: 2.5rem;
    }

    .feeling__intro {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .feeling__intro > p {
        max-width: 520px;
    }

    .destination-story__japan-layout {
        grid-template-columns: 1fr;
        gap: 5rem;
    }

    .destination-story__japan-copy {
        max-width: 850px;
    }

    .destination-story__japan-image {
        width: 72%;
        margin-left: auto;
    }

    .destination-story--caribbean {
        grid-template-columns: 1fr;
    }

    .destination-story__caribbean-image {
        min-height: 620px;
    }

    .destination-story__caribbean-copy {
        width: min(100%, 850px);
    }

    .overload__inner {
        grid-template-columns: 1fr;
        gap: 5rem;
    }

    .overload__noise {
        order: 2;
        max-width: 650px;
        margin-left: auto;
    }

    .travel-mosaic__layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        width: calc(100% - 3rem);
        gap: 3rem 2rem;
    }

    .travel-mosaic__item--honeymoon {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        margin: 0;
    }

    .travel-mosaic__quote {
        grid-column: 1 / -1;
        grid-row: 1;
        align-self: end;
        padding: 1rem 0 3rem;
        width: 100%;
        margin: 0;
    }

    .travel-mosaic__item--family {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        margin: 5rem 0 0;
    }

    .travel-mosaic__item--cruise {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 72%;
        margin: 2rem 0 0 auto;
    }

    .journey__feature {
        grid-template-columns: 1fr;
    }

    .journey__feature-image {
        min-height: 680px;
    }

    .journey__schedule {
        display: grid;
        grid-template-columns:
            repeat(2, 1fr);
        gap:
            0
            3rem;
    }

    .advisor {
        grid-template-columns: 1fr;
    }

    .advisor__image {
        min-height: 720px;
    }

    .advisor__content {
        padding:
            7rem
            max(
                2rem,
                calc((100vw - 900px) / 2)
            );
    }

    .inquiry__heading {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .inquiry__heading p {
        max-width: 500px;
    }

    .inquiry-form__submit {
        grid-template-columns: 1fr;
        gap: 2rem;
    }



    .site-nav.site-nav--portal a {
        font-size: clamp(2.4rem, 7vw, 4rem);
    }

    .destination-story__japan-copy h2,
    .destination-story__caribbean-copy h2,
    .overload__statement h2,
    .journey__heading h2,
    .advisor__content h2,
    .inquiry__heading h2,
    .last-call h2 {
        font-size: clamp(3.7rem, 9vw, 6rem);
    }

    .travel-mosaic__quote p {
        width: min(100%, 760px);
        max-width: none;
        margin: 0;
        font-size: clamp(3rem, 7vw, 5rem);
    }
}


/* =========================================================
   24. SMALL TABLET
   ========================================================= */

@media (max-width: 760px) {

    .site-shell,
    .site-header__inner,
    .hero__content,
    .traveler-story__content {
        width:
            min(
                calc(100% - 2rem),
                var(--shell)
            );
    }

    .site-header::after {
        right: 1rem;
        left: 1rem;
    }

    .hero__topline {
        flex-direction: column;
        gap: 0.45rem;
    }

    .hero h1 {
        font-size: clamp(5rem, 20vw, 8rem);
        line-height: 0.74;
    }

    .hero h1 em {
        margin-left: 1.7rem;
    }

    .hero__bottom {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero__intro {
        max-width: 390px;
    }

    .hero__scroll {
        display: none;
    }

    .feeling {
        padding:
            6rem
            0;
    }

    .feeling h2 {
        font-size: clamp(3.5rem, 13vw, 5.5rem);
    }

    .feeling__marquee span {
        font-size: clamp(3rem, 11vw, 4.8rem);
    }

    .destination-story--italy {
        min-height: 740px;
    }

    .destination-story__caption {
        left: 1rem;
        bottom: 3rem;
    }

    .destination-story__number {
        top: 2rem;
        right: 1rem;
    }

    .destination-story__caption h2 {
        font-size: clamp(5rem, 20vw, 8rem);
    }

    .destination-story__caption p {
        margin-left: 1.3rem;
    }

    .destination-story--japan {
        padding:
            6rem
            0;
    }

    .destination-story__japan-copy h2 {
        font-size: clamp(3.5rem, 13vw, 5.4rem);
        line-height: 0.86;
    }

    .destination-story__japan-image {
        width: 86%;
        height: 620px;
    }

    .destination-story__caribbean-image {
        min-height: 520px;
    }

    .destination-story__caribbean-copy {
        padding:
            4rem
            1rem
            5rem;
    }

    .destination-story__caribbean-copy h2 {
        font-size: clamp(3.5rem, 13vw, 5.4rem);
        line-height: 0.86;
    }

    .overload {
        padding:
            6rem
            0;
    }

    .overload__statement h2 {
        font-size: clamp(3.5rem, 13vw, 5.4rem);
        line-height: 0.86;
    }

    .planning-line {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding:
            1.6rem
            0;
    }

    .travel-mosaic {
        padding:
            6rem
            0;
    }

    .travel-mosaic__layout {
        width: calc(100% - 2rem);
        gap: 4rem;
        display: flex;
        flex-direction: column;
    }

    .travel-mosaic__item--honeymoon,
    .travel-mosaic__item--family,
    .travel-mosaic__item--cruise,
    .travel-mosaic__quote {
        width: 100%;
        margin: 0;
    }

    .travel-mosaic__item--honeymoon {
        order: 2;
        width: 100%;
        margin: 0;
    }

    .travel-mosaic__item--honeymoon img {
        height: 580px;
    }

    .travel-mosaic__item--family {
        width: 80%;
        order: 3;
        margin: 0 0 0 auto;
    }

    .travel-mosaic__item--family img {
        height: 560px;
    }

    .travel-mosaic__item--cruise {
        width: 88%;
        order: 4;
        margin: 0;
    }

    .travel-mosaic__quote p {
        max-width: 650px;
        width: 100%;
        margin: 0;
        font-size: clamp(2.8rem, 12vw, 4.6rem);
        line-height: 0.96;
    }

    .journey {
        padding:
            6rem
            0;
    }

    .journey__heading h2 {
        font-size: clamp(3.5rem, 13vw, 5.4rem);
        line-height: 0.86;
    }

    .journey__feature-image {
        min-height: 540px;
    }

    .journey__schedule {
        grid-template-columns: 1fr;
    }

    .journey__note {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .advisor__image {
        min-height: 620px;
    }

    .advisor__content {
        padding:
            6rem
            1rem;
    }

    .advisor__content h2 {
        font-size: clamp(3.5rem, 13vw, 5.4rem);
        line-height: 0.86;
    }

    .traveler-story {
        min-height: 760px;
    }

    .traveler-story__content {
        min-height: 760px;
    }

    .traveler-story blockquote {
        font-size: clamp(3.2rem, 13vw, 5.4rem);
        line-height: 0.9;
    }

    .inquiry {
        padding:
            6rem
            0;
    }

    .inquiry__heading h2 {
        font-size: clamp(3.5rem, 13vw, 5.4rem);
        line-height: 0.86;
    }

    .sentence-field {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .last-call__inner {
        grid-template-columns: 1fr;
    }

    .last-call p {
        padding-top: 0;
    }

    .last-call h2,
    .last-call a {
        grid-column: 1;
    }

    .last-call h2 {
        font-size: clamp(3.5rem, 13vw, 5.4rem);
        line-height: 0.86;
    }

    .site-footer__main {
        grid-template-columns:
            1fr
            1fr;
    }

    .site-footer__note {
        grid-column: 1 / -1;
    }

    .site-footer__bottom {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .site-footer__bottom
    span:nth-child(2) {
        text-align: left;
    }



    body {
        font-size: 1rem;
    }

    .hero__statement {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .overload__noise {
        color: rgba(23, 23, 20, 0.50);
        font-size: 0.72rem;
    }

    .overload__noise span:nth-child(3n) {
        color: rgba(23, 23, 20, 0.50);
    }

    .travel-mosaic__quote {
        order: 1;
        width: 100%;
        margin: 0;
        padding: 1rem 0 0;
    }
}


/* =========================================================
   25. MOBILE
   ========================================================= */

@media (max-width: 520px) {

    :root {
        --header-height: 68px;
    }

    .site-header__inner {
        width:
            calc(100% - 1.5rem);
    }

    .brand {
        font-size: 1.35rem;
    }

    .nav-toggle {
        width: 42px;
        height: 42px;
    }

    .hero__content {
        width:
            calc(100% - 1.5rem);
        padding:
            calc(var(--header-height) + 3rem)
            0
            2.5rem;
    }

    .hero__topline {
        font-size: 0.49rem;
    }

    .hero h1 {
        font-size: clamp(4.6rem, 21vw, 6.6rem);
        line-height: 0.74;
    }

    .hero h1 em {
        margin-left: 1rem;
    }

    .hero__statement {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .hero__intro p {
        font-size: 0.82rem;
    }

    .editorial-label {
        font-size: 0.6rem;
    }

    .editorial-label > span:first-child {
        width: 30px;
        height: 30px;
    }

    .feeling__intro {
        margin-top: 3rem;
    }

    .feeling h2 {
        font-size: clamp(3.5rem, 13vw, 5.5rem);
    }

    .feeling h2 em {
        margin-left: 0.8rem;
    }

    .feeling__note {
        margin-left: 0;
        padding-left: 1rem;
    }

    .destination-story--italy {
        min-height: 640px;
    }

    .destination-story__caption h2 {
        font-size: clamp(5rem, 20vw, 8rem);
    }

    .destination-story__caption p {
        font-size: 2rem;
    }

    .destination-story__japan-copy h2,
    .destination-story__caribbean-copy h2,
    .overload__statement h2,
    .journey__heading h2,
    .advisor__content h2,
    .inquiry__heading h2 {
        font-size:
            clamp(3.5rem, 17vw, 5.4rem);
    }

    .destination-story__japan-image {
        width: 92%;
        height: 520px;
    }

    .destination-story__caribbean-image {
        min-height: 430px;
    }

    .overload__noise {
        font-size: 0.72rem;
    }

    .overload__answer {
        font-size:
            clamp(2.3rem, 11vw, 3.6rem);
    }

    .travel-mosaic__item--honeymoon img {
        height: 460px;
    }

    .travel-mosaic__item--family {
        width: 100%;
    }

    .travel-mosaic__item--family img {
        height: 470px;
    }

    .travel-mosaic__item figcaption {
        flex-direction: column;
        gap: 0.35rem;
    }

    .travel-mosaic__item
    figcaption strong {
        text-align: left;
    }

    .travel-mosaic__quote p {
        font-size: clamp(2.6rem, 13vw, 4rem);
    }

    .journey__feature-image {
        min-height: 430px;
    }

    .journey__schedule {
        padding:
            3rem
            1.4rem;
    }

    .journey__note p {
        font-size:
            clamp(2rem, 10vw, 3rem);
    }

    .advisor__image {
        min-height: 520px;
    }

    .advisor__content {
        padding:
            5rem
            0.8rem;
    }

    .advisor__details > div {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .traveler-story,
    .traveler-story__content {
        min-height: 650px;
    }

    .traveler-story__content {
        width:
            calc(100% - 1.5rem);
    }

    .traveler-story blockquote {
        font-size: clamp(3.2rem, 13vw, 5.4rem);
        line-height: 0.9;
    }

    .sentence-field {
        display: block;
        padding: 1.5rem
            0;
        font-size: clamp(1.9rem, 9vw, 2.7rem);
    }

    .sentence-field label {
        display: block;
        margin-bottom: 0.45rem;
    }

    .sentence-field input,
    .sentence-field select {
        display: block;
        width: 100%;
        margin-top: 0.4rem;
        font-size: inherit;
    }

    .sentence-field > span {
        display: block;
        margin-top: 0.35rem;
    }

    .inquiry-form__notes textarea {
        font-size:
            clamp(1.4rem, 7vw, 2rem);
    }

    .inquiry-form__submit button {
        grid-template-columns:
            1fr
            auto;
        font-size:
            clamp(2.3rem, 11vw, 3.5rem);
    }

    .inquiry-form__submit
    button em {
        grid-column: 1;
    }

    .inquiry-form__submit
    button span {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .last-call {
        padding:
            6rem
            0;
    }

    .last-call h2 {
        font-size: clamp(3.2rem, 15vw, 4.7rem);
        line-height: 0.86;
    }

    .last-call a {
        font-size:
            clamp(2rem, 10vw, 3rem);
    }

    .site-footer__main {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding:
            4rem
            0;
    }

    .site-footer__note {
        grid-column: auto;
    }

    .demo-toast {
        right: 0.75rem;
        bottom: 0.75rem;
        width:
            calc(100% - 1.5rem);
    }



    .feeling__marquee span {
        font-size: clamp(3rem, 11vw, 4.8rem);
    }

    .destination-story__japan-copy h2 {
        font-size: clamp(3.2rem, 15vw, 4.7rem);
        line-height: 0.86;
    }

    .destination-story__caribbean-copy h2 {
        font-size: clamp(3.2rem, 15vw, 4.7rem);
        line-height: 0.86;
    }

    .overload__statement h2 {
        font-size: clamp(3.2rem, 15vw, 4.7rem);
        line-height: 0.86;
    }

    .journey__heading h2 {
        font-size: clamp(3.2rem, 15vw, 4.7rem);
        line-height: 0.86;
    }

    .advisor__content h2 {
        font-size: clamp(3.2rem, 15vw, 4.7rem);
        line-height: 0.86;
    }

    .inquiry__heading h2 {
        font-size: clamp(3.2rem, 15vw, 4.7rem);
        line-height: 0.86;
    }

    .travel-mosaic__layout {
        width: calc(100% - 1.5rem);
    }

    .travel-mosaic__item--cruise {
        width: 100%;
    }
}


/* =========================================================
   26. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    

    .hero__statement {
        font-size: 2rem;
    }

    .destination-story__japan-image {
        width: 100%;
    }

    

    

}


/* =========================================================
   27. ANCHOR OFFSET
   ========================================================= */

main[id],
section[id] {
    scroll-margin-top: 24px;
}


/* =========================================================
   28. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

}


/* =========================================================
   29. PRINT
   ========================================================= */

@media print {

    .site-header,
    .hero__scroll,
    .demo-toast,
    .nav-toggle {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .hero {
        min-height: 700px;
    }

}


/* =========================================================
   30. PREMIUM — DESTINATIONS PAGE
   ========================================================= */

/*
|--------------------------------------------------------------------------
| Premium multi-page navigation state
|--------------------------------------------------------------------------
*/

.site-nav a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

.site-nav.site-nav--portal a[aria-current="page"] {
    color: #e5cfa9;
}


/*
|--------------------------------------------------------------------------
| Destinations hero
|--------------------------------------------------------------------------
*/

.destinations-hero {
    min-height: 100svh;
}

.destinations-hero .hero__media img {
    object-position: center 56%;
}

.destinations-hero .hero__shade {
    background:
        linear-gradient(
            180deg,
            rgba(8, 17, 15, 0.50) 0%,
            rgba(8, 17, 15, 0.08) 32%,
            rgba(8, 17, 15, 0.12) 52%,
            rgba(8, 17, 15, 0.80) 100%
        ),
        linear-gradient(
            90deg,
            rgba(8, 17, 15, 0.58) 0%,
            rgba(8, 17, 15, 0.10) 57%,
            transparent 78%
        );
}

.destinations-hero h1 {
    max-width: 1180px;
}

.destinations-hero h1 em {
    margin-left:
        clamp(2.5rem, 11vw, 11rem);
}

.destinations-hero .hero__statement {
    max-width: 680px;
}


/*
|--------------------------------------------------------------------------
| Intro
|--------------------------------------------------------------------------
*/

.destinations-intro {
    padding-bottom:
        clamp(8rem, 13vw, 15rem);
}

.destinations-intro .feeling__intro {
    grid-template-columns:
        minmax(250px, 0.38fr)
        minmax(0, 1.25fr);
}

.destinations-intro .feeling__note {
    max-width: 680px;
}


/*
|--------------------------------------------------------------------------
| Destination field notes
|--------------------------------------------------------------------------
*/

.destinations-feature--italy {
    min-height: 100svh;
}

.destinations-feature--italy
.destination-story__caption {
    max-width: 900px;
}

.destinations-feature--italy
.destination-story__caption h2 {
    font-size:
        clamp(6rem, 14vw, 14rem);
}

.destinations-feature--italy
.destination-story__caption p {
    max-width: 630px;
}


/*
|--------------------------------------------------------------------------
| Italy planning notes
|--------------------------------------------------------------------------
*/

.destination-notes {
    position: relative;
}

.destination-notes::before {
    content: "FIELD NOTES / DO NOT TRY TO SEE EVERYTHING";
    position: absolute;
    top: 3rem;
    right:
        max(
            2rem,
            calc((100vw - var(--shell)) / 2)
        );
    color: rgba(23, 23, 20, 0.42);
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.destination-notes .overload__statement h2 {
    max-width: 900px;
}

.destination-notes .planning-lines {
    margin-top:
        clamp(7rem, 10vw, 11rem);
}


/*
|--------------------------------------------------------------------------
| Japan
|--------------------------------------------------------------------------
*/

.destinations-feature--japan {
    position: relative;
    padding-top:
        clamp(9rem, 14vw, 16rem);
    padding-bottom:
        clamp(9rem, 14vw, 16rem);
}

.destinations-feature--japan::before {
    content: "";
    position: absolute;
    top: 8%;
    left: 0;
    width: 19%;
    height: 1px;
    background: var(--line-dark);
}

.destinations-feature--japan
.destination-story__japan-layout {
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(440px, 0.68fr);
}

.destinations-feature--japan
.destination-story__japan-copy h2 {
    max-width: 820px;
    font-size:
        clamp(4.7rem, 7vw, 8rem);
}

.destinations-feature--japan
.destination-story__japan-image {
    height:
        clamp(680px, 72vw, 1000px);
}

.destinations-feature--japan
.destination-story__japan-image::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -2.2rem;
    right: -2.2rem;
    width: 58%;
    height: 58%;
    background: var(--paper);
}


/*
|--------------------------------------------------------------------------
| Caribbean
|--------------------------------------------------------------------------
*/

.destinations-feature--caribbean {
    min-height: 820px;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(400px, 0.75fr);
}

.destinations-feature--caribbean
.destination-story__caribbean-image {
    min-height: 820px;
}

.destinations-feature--caribbean
.destination-story__caribbean-copy {
    position: relative;
    padding:
        clamp(4rem, 7vw, 8rem);
    background: var(--paper);
}

.destinations-feature--caribbean
.destination-story__caribbean-copy::before {
    content: "04° / NO URGENT EMAILS";
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: rgba(23, 23, 20, 0.38);
    font-family: var(--mono);
    font-size: 0.52rem;
    letter-spacing: 0.08em;
}

.destinations-feature--caribbean
.destination-story__caribbean-copy h2 {
    max-width: 700px;
    margin-bottom: 2.3rem;
    font-size:
        clamp(4rem, 5.8vw, 6.6rem);
}

.destinations-feature--caribbean
.destination-story__caribbean-copy .editorial-link {
    margin-top: 2.5rem;
}


/*
|--------------------------------------------------------------------------
| Trip moods
|--------------------------------------------------------------------------
*/

.destinations-moods {
    padding-top:
        clamp(9rem, 13vw, 15rem);
    padding-bottom:
        clamp(10rem, 14vw, 16rem);
}

.destinations-moods
.travel-mosaic__layout {
    margin-top:
        clamp(6rem, 9vw, 10rem);
}

.destinations-moods
.travel-mosaic__quote {
    padding-top: 0;
}

.destinations-moods
.travel-mosaic__quote p {
    font-size:
        clamp(3rem, 4.6vw, 5.4rem);
}


/*
|--------------------------------------------------------------------------
| Better questions
|--------------------------------------------------------------------------
*/

.destinations-questions {
    position: relative;
    padding-top:
        clamp(9rem, 14vw, 16rem);
}

.destinations-questions::after {
    content: "WHERE IS ONLY HALF THE QUESTION.";
    position: absolute;
    right:
        max(
            2rem,
            calc((100vw - var(--shell)) / 2)
        );
    bottom: 3rem;
    color: rgba(23, 23, 20, 0.30);
    font-family: var(--mono);
    font-size: 0.54rem;
    letter-spacing: 0.10em;
}

.destinations-questions
.overload__statement {
    max-width: 1050px;
    margin-top:
        clamp(4rem, 7vw, 7rem);
}

.destinations-questions
.overload__statement h2 {
    max-width: 900px;
}

.destinations-questions
.planning-lines {
    margin-top:
        clamp(6rem, 9vw, 10rem);
}


/*
|--------------------------------------------------------------------------
| Destinations closing CTA
|--------------------------------------------------------------------------
*/

.destinations-last-call {
    position: relative;
    overflow: hidden;
}

.destinations-last-call::before {
    content: "NEXT DEPARTURE / TBD";
    position: absolute;
    top: 2.2rem;
    right:
        max(
            2rem,
            calc((100vw - var(--shell)) / 2)
        );
    color: rgba(255,255,255,.62);
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.10em;
}

.destinations-last-call h2 {
    max-width: 1100px;
}


/*
|--------------------------------------------------------------------------
| Premium Destinations — tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .destinations-intro .feeling__intro {
        grid-template-columns: 1fr;
    }

    .destination-notes::before {
        right: 1.5rem;
    }

    .destinations-feature--japan
    .destination-story__japan-layout {
        grid-template-columns: 1fr;
    }

    .destinations-feature--japan
    .destination-story__japan-image {
        width: 74%;
        margin-left: auto;
    }

    .destinations-feature--caribbean {
        grid-template-columns: 1fr;
    }

    .destinations-feature--caribbean
    .destination-story__caribbean-image {
        min-height: 650px;
    }

    .destinations-feature--caribbean
    .destination-story__caribbean-copy {
        width: min(100%, 900px);
    }

}


/*
|--------------------------------------------------------------------------
| Premium Destinations — small tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .destinations-hero .hero__media img {
        object-position: 59% center;
    }

    .destinations-hero h1 em {
        margin-left: 1.4rem;
    }

    .destination-notes::before,
    .destinations-questions::after,
    .destinations-last-call::before {
        display: none;
    }

    .destinations-feature--italy {
        min-height: 720px;
    }

    .destinations-feature--japan {
        padding:
            7rem
            0;
    }

    .destinations-feature--japan::before {
        display: none;
    }

    .destinations-feature--japan
    .destination-story__japan-image {
        width: 88%;
        height: 650px;
    }

    .destinations-feature--japan
    .destination-story__japan-image::before {
        top: -1rem;
        right: -1rem;
    }

    .destinations-feature--caribbean
    .destination-story__caribbean-image {
        min-height: 540px;
    }

    .destinations-feature--caribbean
    .destination-story__caribbean-copy {
        padding:
            5rem
            1rem
            6rem;
    }

}


/*
|--------------------------------------------------------------------------
| Premium Destinations — mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .destinations-hero {
        min-height: 760px;
    }

    .destinations-hero .hero__content {
        min-height: 760px;
    }

    .destinations-hero h1 {
        font-size:
            clamp(4.7rem, 21vw, 6.6rem);
    }

    .destinations-intro {
        padding:
            6rem
            0
            7rem;
    }

    .destinations-feature--italy {
        min-height: 650px;
    }

    .destinations-feature--japan
    .destination-story__japan-image {
        width: 100%;
        height: 540px;
    }

    .destinations-feature--japan
    .destination-story__japan-image::before {
        display: none;
    }

    .destinations-feature--caribbean
    .destination-story__caribbean-image {
        min-height: 440px;
    }

    .destinations-feature--caribbean
    .destination-story__caribbean-copy::before {
        display: none;
    }

    .destinations-moods {
        padding:
            7rem
            0;
    }

    .destinations-moods
    .travel-mosaic__quote p {
        font-size:
            clamp(2.7rem, 13vw, 4rem);
    }

    .destinations-questions {
        padding:
            7rem
            0;
    }

}


/* =========================================================
   PREMIUM DESTINATIONS — MARQUEE EDGE FIX
   ========================================================= */

.destinations-intro
.feeling__marquee > div {
    transform: none;
    padding-left: max(
        1rem,
        calc((100vw - var(--shell)) / 2)
    );
}

@media (max-width: 1200px) {

    .destinations-intro
    .feeling__marquee > div {
        padding-left: 1.5rem;
    }

}

@media (max-width: 760px) {

    .destinations-intro
    .feeling__marquee > div {
        padding-left: 1rem;
    }

}

@media (max-width: 520px) {

    .destinations-intro
    .feeling__marquee > div {
        padding-left: 0.75rem;
    }

}


/* =========================================================
   PREMIUM DESTINATIONS — ITALY HANDWRITTEN NOTES
   ========================================================= */

.destination-notes .italy-plan__notes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.72rem;
    max-width: 320px;
    color: rgba(23, 23, 20, 0.64);
    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Comic Sans MS",
        cursive;
    font-size:
        clamp(0.96rem, 1.05vw, 1.16rem);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.025em;
    transform: none;
}

.destination-notes
.italy-plan__notes
.italy-plan__note {
    position: relative;
    display: inline-block;
    margin-left: 0;
    color: inherit;
    text-decoration: none;
    transform-origin: left center;
}


/* Slightly uneven placement so it feels written, not typeset. */

.destination-notes
.italy-plan__note:nth-child(1) {
    transform: rotate(-1.5deg);
}

.destination-notes
.italy-plan__note:nth-child(2) {
    margin-left: 2rem;
    transform: rotate(0.7deg);
}

.destination-notes
.italy-plan__note:nth-child(3) {
    margin-left: 4.2rem;
    transform: rotate(-0.8deg);
}

.destination-notes
.italy-plan__note:nth-child(4) {
    margin-left: 2.4rem;
    transform: rotate(1deg);
}

.destination-notes
.italy-plan__note:nth-child(5) {
    margin-left: 0.5rem;
    transform: rotate(-1deg);
}

.destination-notes
.italy-plan__note:nth-child(6) {
    margin-left: 4.6rem;
    transform: rotate(0.8deg);
}

.destination-notes
.italy-plan__note:nth-child(7) {
    margin-left: 1.1rem;
    transform: rotate(-1.2deg);
}


/*
|--------------------------------------------------------------------------
| Hand-drawn strike
|--------------------------------------------------------------------------
|
| Two imperfect strokes instead of text-decoration.
| It should feel like someone changed their mind with a pen.
|
*/

.destination-notes
.italy-plan__note.is-crossed {
    color: rgba(23, 23, 20, 0.46);
}

.destination-notes
.italy-plan__note.is-crossed::before,
.destination-notes
.italy-plan__note.is-crossed::after {
    content: "";
    position: absolute;
    left: -0.2rem;
    width: calc(100% + 0.5rem);
    pointer-events: none;
    transform-origin: center;
}

.destination-notes
.italy-plan__note.is-crossed::before {
    top: 47%;
    height: 1.5px;
    background: rgba(23, 23, 20, 0.64);
    transform: rotate(-4deg);
}

.destination-notes
.italy-plan__note.is-crossed::after {
    top: 55%;
    left: -0.05rem;
    width: calc(100% + 0.22rem);
    height: 1px;
    background: rgba(213, 94, 73, 0.72);
    transform: rotate(-2deg);
}


/*
|--------------------------------------------------------------------------
| Keep the handwritten notes subtle on smaller screens
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .destination-notes
    .italy-plan__notes {
        max-width: 360px;
        font-size: 1rem;
    }

}


@media (max-width: 760px) {

    .destination-notes
    .italy-plan__notes {
        gap: 0.65rem;
        max-width: 100%;
    }

    .destination-notes
    .italy-plan__note:nth-child(n) {
        margin-left: 0;
    }

    .destination-notes
    .italy-plan__note:nth-child(even) {
        margin-left: 1.5rem;
    }

}


@media (max-width: 520px) {

    .destination-notes
    .italy-plan__notes {
        font-size: 0.92rem;
    }

}


/* =========================================================
   PREMIUM DESTINATIONS — JAPAN CAPTION FIX
   ========================================================= */

.destinations-feature--japan
.destination-story__japan-image > span {
    right: 1rem;
    max-width: calc(100% - 2rem);
    text-align: right;
    white-space: normal;
}


/* =========================================================
   PREMIUM DESTINATIONS — CARIBBEAN FINAL LINE FIT
   ========================================================= */

.destinations-feature--caribbean
.caribbean-heading__last {
    display: block;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    font-size: 0.78em;
    line-height: 1;
    letter-spacing: -0.055em;
}

@media (max-width: 760px) {

    .destinations-feature--caribbean
    .caribbean-heading__last {
        width: auto;
        max-width: none;
        white-space: normal;
        font-size: inherit;
        letter-spacing: inherit;
    }

}


/* =========================================================
   PREMIUM DESTINATIONS — MOBILE COMPOSITION CLEANUP
   ========================================================= */


/*
|--------------------------------------------------------------------------
| Hero headline
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .destinations-hero h1 {
        width: 100%;
        max-width: 100%;
    }

    .destinations-hero h1 em {
        margin-left: 1rem;
        font-size: 0.78em;
        letter-spacing: -0.065em;
        white-space: nowrap;
    }

}


@media (max-width: 520px) {

    .destinations-hero h1 {
        font-size:
            clamp(4.6rem, 20vw, 6rem);
        line-height: 0.76;
    }

    .destinations-hero h1 em {
        margin-left: 1.1rem;
        font-size: 0.70em;
        line-height: 0.86;
        letter-spacing: -0.065em;
        white-space: nowrap;
    }

}


/*
|--------------------------------------------------------------------------
| Intro spacing
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .destinations-intro
    .feeling__intro {
        gap: 3rem;
    }

    .destinations-intro
    .feeling__intro > p {
        max-width: 390px;
    }

    .destinations-intro
    .feeling h2 {
        max-width: 100%;
        font-size:
            clamp(3.55rem, 15vw, 4.8rem);
        line-height: 0.88;
    }

    .destinations-intro
    .feeling h2 em {
        margin-left: 0.9rem;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile trip-feeling list
|--------------------------------------------------------------------------
|
| Desktop keeps the long editorial strip.
| Mobile turns it into a deliberate stacked composition
| instead of letting phrases get chopped by the viewport.
|
*/

@media (max-width: 520px) {

    .destinations-intro
    .feeling__marquee {
        margin:
            4.5rem
            0
            3.5rem;
        overflow: visible;
    }

    .destinations-intro
    .feeling__marquee > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
        padding:
            1.1rem
            0;
        transform: none;
    }

    .destinations-intro
    .feeling__marquee span {
        display: block;
        width: 100%;
        padding:
            0.65rem
            0;
        white-space: normal;
        font-size:
            clamp(2.65rem, 12vw, 3.8rem);
        line-height: 0.95;
    }

    .destinations-intro
    .feeling__marquee span:nth-child(2) {
        padding-left: 1.6rem;
    }

    .destinations-intro
    .feeling__marquee span:nth-child(3) {
        padding-left: 0.4rem;
    }

    .destinations-intro
    .feeling__marquee span:nth-child(4) {
        padding-left: 1.9rem;
    }

    .destinations-intro
    .feeling__marquee span:nth-child(5) {
        padding-left: 0.8rem;
    }

}


/*
|--------------------------------------------------------------------------
| Intro note
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .destinations-intro
    .feeling__note {
        max-width: 420px;
        margin-left: 0;
        padding-left: 1rem;
        font-size: 0.88rem;
        line-height: 1.65;
    }

}


/* =========================================================
   PREMIUM DESTINATIONS — WIDE INTRO COMPOSITION
   ========================================================= */

@media (min-width: 1700px) {

    /*
    |--------------------------------------------------------------------------
    | Use the ultrawide canvas without turning it into an airport terminal
    |--------------------------------------------------------------------------
    */

    .destinations-intro {
        padding:
            9rem
            0
            10rem;
    }

    .destinations-intro .site-shell {
        width: min(
            calc(100% - 7rem),
            1700px
        );
    }

    .destinations-intro
    .feeling__intro {
        grid-template-columns:
            minmax(280px, 0.34fr)
            minmax(0, 1.32fr);
        gap:
            clamp(6rem, 8vw, 11rem);
        margin-top: 5.5rem;
    }

    .destinations-intro
    .feeling__intro > p {
        max-width: 430px;
    }

    .destinations-intro
    .feeling h2 {
        max-width: 1180px;
        font-size:
            clamp(5.8rem, 6.2vw, 8rem);
    }


    /*
    |--------------------------------------------------------------------------
    | Marquee
    |--------------------------------------------------------------------------
    |
    | First three thoughts should read completely.
    | The fourth can disappear off the edge intentionally.
    |
    */

    .destinations-intro
    .feeling__marquee {
        margin:
            5.5rem
            0
            4.5rem;
    }

    .destinations-intro
    .feeling__marquee > div {
        gap:
            clamp(3rem, 3.5vw, 4.5rem);
        padding-left:
            max(
                3.5rem,
                calc((100vw - 1700px) / 2)
            );
    }

    .destinations-intro
    .feeling__marquee span {
        font-size:
            clamp(3.7rem, 4vw, 5rem);
    }


    /*
    |--------------------------------------------------------------------------
    | Closing note
    |--------------------------------------------------------------------------
    */

    .destinations-intro
    .feeling__note {
        max-width: 650px;
        margin-right:
            max(
                3.5rem,
                calc((100vw - 1700px) / 2)
            );
    }

}


/* =========================================================
   31. PREMIUM — PLANNING PAGE
   ========================================================= */


/*
|--------------------------------------------------------------------------
| Planning hero
|--------------------------------------------------------------------------
*/

.planning-hero {
    position: relative;
    padding:
        calc(var(--header-height) + 7rem)
        0
        0;
    background: var(--ivory);
    overflow: hidden;
}

.planning-hero__inner {
    padding-bottom:
        clamp(7rem, 11vw, 12rem);
}

.planning-hero__topline {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line-dark);
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.planning-hero__layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, 0.38fr);
    align-items: end;
    gap:
        clamp(4rem, 9vw, 11rem);
    margin-top:
        clamp(6rem, 10vw, 11rem);
}

.planning-hero__copy h1 {
    max-width: 1000px;
    margin-bottom: 2.5rem;
    font-family: var(--serif);
    font-size:
        clamp(5rem, 8.3vw, 9.5rem);
    font-weight: 600;
    line-height: 0.80;
    letter-spacing: -0.05em;
}

.planning-hero__copy h1 em {
    display: block;
    margin-left:
        clamp(2rem, 8vw, 8rem);
    color: var(--coral);
    font-weight: 500;
}

.planning-hero__copy > p {
    max-width: 690px;
    margin:
        0
        0
        0
        auto;
    color: rgba(23,23,20,.66);
    font-size: 1rem;
    line-height: 1.7;
}

.planning-hero__side {
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-dark);
}

.planning-hero__side > span {
    display: block;
    margin-bottom: 1.4rem;
    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.planning-hero__side > p {
    max-width: 330px;
    margin-bottom: 2rem;
    font-family: var(--serif);
    font-size:
        clamp(1.6rem, 2vw, 2.1rem);
    font-weight: 600;
    line-height: 1.15;
}

.planning-hero__statement {
    position: relative;
    color: var(--white);
    background: var(--green-deep);
    overflow: hidden;
}

.planning-hero__statement > div {
    width:
        min(
            calc(100% - 4rem),
            var(--shell)
        );
    margin-inline: auto;
    padding:
        clamp(4rem, 7vw, 7rem)
        0;
    font-family: var(--serif);
    font-size:
        clamp(4rem, 8vw, 9rem);
    font-weight: 600;
    line-height: 0.82;
    letter-spacing: -0.05em;
}

.planning-hero__statement em {
    color: #dfc7a2;
    font-weight: 500;
}


/*
|--------------------------------------------------------------------------
| What gets handled
|--------------------------------------------------------------------------
*/

.planning-handled {
    padding:
        clamp(8rem, 13vw, 15rem)
        0;
    background: var(--white);
}

.planning-handled__heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(280px, 0.34fr);
    align-items: end;
    gap:
        clamp(4rem, 8vw, 9rem);
    margin-top:
        clamp(4rem, 7vw, 7rem);
}

.planning-handled__heading h2 {
    max-width: 1000px;
    margin-bottom: 0;
    font-family: var(--serif);
    font-size:
        clamp(4.2rem, 6.8vw, 7.7rem);
    font-weight: 600;
    line-height: 0.83;
    letter-spacing: -0.045em;
}

.planning-handled__heading h2 em {
    display: block;
    color: var(--green);
    font-weight: 500;
}

.planning-handled__heading > p {
    max-width: 390px;
    margin-bottom: 0.6rem;
    color: rgba(23,23,20,.64);
    font-size: 0.98rem;
    line-height: 1.7;
}

.planning-handled__lines {
    margin-top:
        clamp(6rem, 10vw, 11rem);
}

.planning-handled
.planning-line {
    grid-template-columns:
        minmax(190px, 0.34fr)
        minmax(0, 1fr);
}

.planning-handled
.planning-line > span {
    font-size:
        clamp(2.1rem, 2.8vw, 3rem);
}

.planning-handled
.planning-line p {
    max-width: 850px;
}


/*
|--------------------------------------------------------------------------
| 47-tab problem
|--------------------------------------------------------------------------
*/

.planning-chaos {
    padding:
        clamp(9rem, 14vw, 16rem)
        0;
    background: var(--paper);
    overflow: hidden;
}

.planning-chaos__layout {
    display: grid;
    grid-template-columns:
        minmax(280px, 0.42fr)
        minmax(0, 1.08fr);
    align-items: center;
    gap:
        clamp(5rem, 11vw, 13rem);
}

.planning-chaos__notes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.78rem;
    max-width: 390px;
    color: rgba(23,23,20,.62);
    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Comic Sans MS",
        cursive;
    font-size:
        clamp(1rem, 1.15vw, 1.28rem);
    line-height: 1.15;
}

.planning-chaos__notes span {
    position: relative;
    display: inline-block;
    transform-origin: left center;
}

.planning-chaos__notes span:nth-child(1) {
    transform: rotate(-2deg);
}

.planning-chaos__notes span:nth-child(2) {
    margin-left: 2rem;
    transform: rotate(1deg);
}

.planning-chaos__notes span:nth-child(3) {
    margin-left: 0.7rem;
    transform: rotate(-0.5deg);
}

.planning-chaos__notes span:nth-child(4) {
    margin-left: 3rem;
    transform: rotate(1.5deg);
}

.planning-chaos__notes span:nth-child(5) {
    margin-left: 1.2rem;
    transform: rotate(-1deg);
}

.planning-chaos__notes span:nth-child(6) {
    margin-left: 4.2rem;
    transform: rotate(0.8deg);
}

.planning-chaos__notes span:nth-child(7) {
    transform: rotate(-1.4deg);
}

.planning-chaos__notes span:nth-child(8) {
    margin-left: 2.8rem;
    transform: rotate(1deg);
}

.planning-chaos__notes span:nth-child(9) {
    margin-left: 0.8rem;
    transform: rotate(-1deg);
}

.planning-chaos__notes span:nth-child(10) {
    margin-left: 3.5rem;
    transform: rotate(0.6deg);
}

.planning-chaos__notes .is-crossed {
    color: rgba(23,23,20,.39);
}

.planning-chaos__notes .is-crossed::before,
.planning-chaos__notes .is-crossed::after {
    content: "";
    position: absolute;
    left: -0.2rem;
    width: calc(100% + 0.5rem);
    pointer-events: none;
    transform-origin: center;
}

.planning-chaos__notes .is-crossed::before {
    top: 48%;
    height: 1.5px;
    background: rgba(23,23,20,.60);
    transform: rotate(-4deg);
}

.planning-chaos__notes .is-crossed::after {
    top: 56%;
    height: 1px;
    background: rgba(213,94,73,.72);
    transform: rotate(-1deg);
}

.planning-chaos__copy h2 {
    max-width: 950px;
    margin:
        clamp(3rem, 6vw, 6rem)
        0
        2.5rem;
    font-family: var(--serif);
    font-size:
        clamp(4rem, 6.6vw, 7.4rem);
    font-weight: 600;
    line-height: 0.83;
    letter-spacing: -0.045em;
}

.planning-chaos__copy h2 em {
    display: block;
    color: var(--coral);
    font-weight: 500;
}

.planning-chaos__copy > p {
    max-width: 590px;
    margin-bottom: 0;
    color: rgba(23,23,20,.64);
    font-size: 1rem;
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Process
|--------------------------------------------------------------------------
*/

.planning-process {
    padding:
        clamp(9rem, 14vw, 16rem)
        0;
    color: var(--white);
    background: var(--green-deep);
}

.planning-process__heading {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.35fr)
        minmax(0, 1fr);
    align-items: start;
    gap:
        clamp(4rem, 9vw, 11rem);
}

.planning-process__heading h2 {
    max-width: 1050px;
    margin: 0;
    font-family: var(--serif);
    font-size:
        clamp(4.2rem, 6.8vw, 7.7rem);
    font-weight: 600;
    line-height: 0.83;
    letter-spacing: -0.045em;
}

.planning-process__heading h2 em {
    display: block;
    color: #dfc7a2;
    font-weight: 500;
}

.planning-process__steps {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    margin-top:
        clamp(7rem, 11vw, 12rem);
    border-top: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light);
}

.planning-process__steps article {
    position: relative;
    min-height: 430px;
    padding:
        2rem
        clamp(1.5rem, 2.5vw, 3rem)
        3rem;
    border-right: 1px solid var(--line-light);
}

.planning-process__steps article:last-child {
    border-right: 0;
}

.planning-process__steps article > span {
    display: block;
    margin-bottom:
        clamp(5rem, 8vw, 8rem);
    color: rgba(255,255,255,.50);
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.10em;
}

.planning-process__steps h3 {
    max-width: 250px;
    margin-bottom: 1.3rem;
    font-family: var(--serif);
    font-size:
        clamp(2.2rem, 2.8vw, 3rem);
    font-weight: 600;
    line-height: 0.95;
}

.planning-process__steps p {
    max-width: 280px;
    margin-bottom: 0;
    color: rgba(255,255,255,.62);
    font-size: 0.9rem;
    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Planning brief
|--------------------------------------------------------------------------
*/

.planning-brief {
    padding:
        clamp(9rem, 14vw, 16rem)
        0;
    background: var(--ivory);
}

.planning-brief__heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(280px, 0.34fr);
    align-items: end;
    gap:
        clamp(4rem, 8vw, 9rem);
    margin-top:
        clamp(4rem, 7vw, 7rem);
}

.planning-brief__heading h2 {
    max-width: 960px;
    margin-bottom: 0;
    font-family: var(--serif);
    font-size:
        clamp(4rem, 6.6vw, 7.4rem);
    font-weight: 600;
    line-height: 0.83;
    letter-spacing: -0.045em;
}

.planning-brief__heading h2 em {
    display: block;
    color: var(--coral);
    font-weight: 500;
}

.planning-brief__heading > p {
    max-width: 420px;
    margin-bottom: 0.5rem;
    color: rgba(23,23,20,.64);
    font-size: 0.98rem;
    line-height: 1.7;
}

.planning-brief__questions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    margin-top:
        clamp(6rem, 10vw, 11rem);
    border-top: 1px solid var(--line-dark);
}

.planning-brief__questions > div {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.32fr)
        minmax(0, 1fr);
    gap: 2rem;
    min-height: 180px;
    padding:
        2rem
        2rem
        2rem
        0;
    border-bottom: 1px solid var(--line-dark);
}

.planning-brief__questions > div:nth-child(odd) {
    border-right: 1px solid var(--line-dark);
    padding-right: 3rem;
}

.planning-brief__questions > div:nth-child(even) {
    padding-left: 3rem;
}

.planning-brief__questions span {
    font-family: var(--serif);
    font-size:
        clamp(1.8rem, 2.4vw, 2.6rem);
    font-weight: 600;
    line-height: 1;
}

.planning-brief__questions p {
    max-width: 430px;
    margin-bottom: 0;
    color: rgba(23,23,20,.65);
    font-size: 0.94rem;
    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Human support
|--------------------------------------------------------------------------
*/

.planning-human {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);
    min-height: 900px;
    color: var(--white);
    background: var(--ink);
}

.planning-human__image {
    min-height: 900px;
}

.planning-human__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.planning-human__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        clamp(4rem, 8vw, 9rem);
}

.planning-human__content h2 {
    max-width: 720px;
    margin:
        clamp(3rem, 6vw, 6rem)
        0
        2rem;
    font-family: var(--serif);
    font-size:
        clamp(4rem, 6.3vw, 7rem);
    font-weight: 600;
    line-height: 0.83;
    letter-spacing: -0.045em;
}

.planning-human__content h2 em {
    display: block;
    color: #dfc7a2;
    font-weight: 500;
}

.planning-human__lead {
    max-width: 650px;
    margin-bottom: 1.8rem;
    font-family: var(--serif);
    font-size:
        clamp(1.6rem, 2vw, 2.1rem);
    font-weight: 600;
    line-height: 1.25;
}

.planning-human__content > p:not(.planning-human__lead) {
    max-width: 620px;
    color: rgba(255,255,255,.62);
    font-size: 0.98rem;
    line-height: 1.7;
}

.planning-human__content
.editorial-link {
    margin-top: 2rem;
}


/*
|--------------------------------------------------------------------------
| Closing CTA
|--------------------------------------------------------------------------
*/

.planning-last-call h2 {
    max-width: 1050px;
}


/*
|--------------------------------------------------------------------------
| Planning — wide screens
|--------------------------------------------------------------------------
*/

@media (min-width: 1700px) {
.planning-hero__copy h1 {
        font-size:
            clamp(7rem, 7.5vw, 9.5rem);
    }

    .planning-chaos__layout {
        grid-template-columns:
            minmax(330px, 0.40fr)
            minmax(0, 1.15fr);
    }

    .planning-process__steps article {
        min-height: 460px;
    }

}


/*
|--------------------------------------------------------------------------
| Planning — tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .planning-hero__layout,
    .planning-handled__heading,
    .planning-chaos__layout,
    .planning-process__heading,
    .planning-brief__heading {
        grid-template-columns: 1fr;
    }

    .planning-hero__side {
        max-width: 520px;
        margin-left: auto;
    }

    .planning-hero__copy > p {
        margin-left: 0;
    }

    .planning-chaos__notes {
        order: 2;
        max-width: 500px;
        margin-left: auto;
    }

    .planning-process__steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .planning-process__steps article:nth-child(2) {
        border-right: 0;
    }

    .planning-process__steps article:nth-child(-n+2) {
        border-bottom: 1px solid var(--line-light);
    }

    .planning-brief__questions {
        grid-template-columns: 1fr;
    }

    .planning-brief__questions > div:nth-child(odd),
    .planning-brief__questions > div:nth-child(even) {
        padding-left: 0;
        padding-right: 0;
        border-right: 0;
    }

    .planning-human {
        grid-template-columns: 1fr;
    }

    .planning-human__image {
        min-height: 720px;
    }

    .planning-human__content {
        padding:
            7rem
            max(
                2rem,
                calc((100vw - 900px) / 2)
            );
    }

}


/*
|--------------------------------------------------------------------------
| Planning — small tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .planning-hero {
        padding-top:
            calc(var(--header-height) + 5rem);
    }

    .planning-hero__topline {
        flex-direction: column;
        gap: 0.5rem;
    }

    .planning-hero__layout {
        margin-top: 5rem;
    }

    .planning-hero__copy h1 {
        font-size:
            clamp(4rem, 14vw, 6rem);
    }

    .planning-hero__statement > div {
        width: calc(100% - 2rem);
        font-size:
            clamp(3.5rem, 13vw, 5.5rem);
    }

    .planning-handled {
        padding:
            7rem
            0;
    }

    .planning-handled
    .planning-line {
        grid-template-columns: 1fr;
    }

    .planning-chaos {
        padding:
            7rem
            0;
    }

    .planning-chaos__copy h2,
    .planning-process__heading h2,
    .planning-brief__heading h2,
    .planning-human__content h2 {
        font-size:
            clamp(3.5rem, 13vw, 5.4rem);
    }

    .planning-process {
        padding:
            7rem
            0;
    }

    .planning-process__steps article {
        min-height: 360px;
    }

    .planning-brief {
        padding:
            7rem
            0;
    }

    .planning-brief__questions > div {
        grid-template-columns:
            minmax(120px, 0.3fr)
            minmax(0, 1fr);
    }

    .planning-human__image {
        min-height: 620px;
    }

}


/*
|--------------------------------------------------------------------------
| Planning — mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .planning-hero {
        padding-top:
            calc(var(--header-height) + 4rem);
    }

    .planning-hero__inner {
        padding-bottom: 6rem;
    }

    .planning-hero__copy h1 {
        font-size:
            clamp(4rem, 18vw, 5.7rem);
        line-height: 0.82;
    }

    .planning-hero__copy h1 em {
        margin-left: 1rem;
    }

    .planning-hero__copy > p {
        font-size: 0.92rem;
    }

    .planning-hero__side {
        margin-left: 0;
    }

    .planning-hero__statement > div {
        width: calc(100% - 1.5rem);
        padding:
            4.5rem
            0;
        font-size:
            clamp(3.3rem, 15vw, 4.8rem);
    }

    .planning-handled__heading h2,
    .planning-chaos__copy h2,
    .planning-process__heading h2,
    .planning-brief__heading h2,
    .planning-human__content h2 {
        font-size:
            clamp(3.2rem, 15vw, 4.7rem);
        line-height: 0.86;
    }

    .planning-chaos__notes {
        gap: 0.65rem;
        margin-left: 0;
        font-size: 0.95rem;
    }

    .planning-chaos__notes span:nth-child(n) {
        margin-left: 0;
    }

    .planning-chaos__notes span:nth-child(even) {
        margin-left: 1.3rem;
    }

    .planning-process__steps {
        grid-template-columns: 1fr;
    }

    .planning-process__steps article {
        min-height: 0;
        padding:
            2rem
            0
            3rem;
        border-right: 0;
        border-bottom: 1px solid var(--line-light);
    }

    .planning-process__steps article:last-child {
        border-bottom: 0;
    }

    .planning-process__steps article > span {
        margin-bottom: 3.5rem;
    }

    .planning-brief__questions > div {
        grid-template-columns: 1fr;
        gap: 1rem;
        min-height: 0;
        padding:
            1.8rem
            0;
    }

    .planning-brief__questions span {
        font-size: 2rem;
    }

    .planning-human__image {
        min-height: 520px;
    }

    .planning-human__content {
        padding:
            5rem
            0.8rem;
    }

}


/* =========================================================
   31. PREMIUM — PLANNING PAGE
   ========================================================= */


/*
|--------------------------------------------------------------------------
| Planning hero
|--------------------------------------------------------------------------
*/

.planning-hero {
    position: relative;
    padding:
        calc(var(--header-height) + 7rem)
        0
        0;
    background: var(--ivory);
    overflow: hidden;
}

.planning-hero__inner {
    padding-bottom:
        clamp(7rem, 11vw, 12rem);
}

.planning-hero__topline {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line-dark);
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.planning-hero__layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, 0.38fr);
    align-items: end;
    gap:
        clamp(4rem, 9vw, 11rem);
    margin-top:
        clamp(6rem, 10vw, 11rem);
}

.planning-hero__copy h1 {
    max-width: 1000px;
    margin-bottom: 2.5rem;
    font-family: var(--serif);
    font-size:
        clamp(5rem, 8.3vw, 9.5rem);
    font-weight: 600;
    line-height: 0.80;
    letter-spacing: -0.05em;
}

.planning-hero__copy h1 em {
    display: block;
    margin-left:
        clamp(2rem, 8vw, 8rem);
    color: var(--coral);
    font-weight: 500;
}

.planning-hero__copy > p {
    max-width: 690px;
    margin:
        0
        0
        0
        auto;
    color: rgba(23,23,20,.66);
    font-size: 1rem;
    line-height: 1.7;
}

.planning-hero__side {
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-dark);
}

.planning-hero__side > span {
    display: block;
    margin-bottom: 1.4rem;
    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.planning-hero__side > p {
    max-width: 330px;
    margin-bottom: 2rem;
    font-family: var(--serif);
    font-size:
        clamp(1.6rem, 2vw, 2.1rem);
    font-weight: 600;
    line-height: 1.15;
}

.planning-hero__statement {
    position: relative;
    color: var(--white);
    background: var(--green-deep);
    overflow: hidden;
}

.planning-hero__statement > div {
    width:
        min(
            calc(100% - 4rem),
            var(--shell)
        );
    margin-inline: auto;
    padding:
        clamp(4rem, 7vw, 7rem)
        0;
    font-family: var(--serif);
    font-size:
        clamp(4rem, 8vw, 9rem);
    font-weight: 600;
    line-height: 0.82;
    letter-spacing: -0.05em;
}

.planning-hero__statement em {
    color: #dfc7a2;
    font-weight: 500;
}


/*
|--------------------------------------------------------------------------
| What gets handled
|--------------------------------------------------------------------------
*/

.planning-handled {
    padding:
        clamp(8rem, 13vw, 15rem)
        0;
    background: var(--white);
}

.planning-handled__heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(280px, 0.34fr);
    align-items: end;
    gap:
        clamp(4rem, 8vw, 9rem);
    margin-top:
        clamp(4rem, 7vw, 7rem);
}

.planning-handled__heading h2 {
    max-width: 1000px;
    margin-bottom: 0;
    font-family: var(--serif);
    font-size:
        clamp(4.2rem, 6.8vw, 7.7rem);
    font-weight: 600;
    line-height: 0.83;
    letter-spacing: -0.045em;
}

.planning-handled__heading h2 em {
    display: block;
    color: var(--green);
    font-weight: 500;
}

.planning-handled__heading > p {
    max-width: 390px;
    margin-bottom: 0.6rem;
    color: rgba(23,23,20,.64);
    font-size: 0.98rem;
    line-height: 1.7;
}

.planning-handled__lines {
    margin-top:
        clamp(6rem, 10vw, 11rem);
}

.planning-handled
.planning-line {
    grid-template-columns:
        minmax(190px, 0.34fr)
        minmax(0, 1fr);
}

.planning-handled
.planning-line > span {
    font-size:
        clamp(2.1rem, 2.8vw, 3rem);
}

.planning-handled
.planning-line p {
    max-width: 850px;
}


/*
|--------------------------------------------------------------------------
| 47-tab problem
|--------------------------------------------------------------------------
*/

.planning-chaos {
    padding:
        clamp(9rem, 14vw, 16rem)
        0;
    background: var(--paper);
    overflow: hidden;
}

.planning-chaos__layout {
    display: grid;
    grid-template-columns:
        minmax(280px, 0.42fr)
        minmax(0, 1.08fr);
    align-items: center;
    gap:
        clamp(5rem, 11vw, 13rem);
}

.planning-chaos__notes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.78rem;
    max-width: 390px;
    color: rgba(23,23,20,.62);
    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Comic Sans MS",
        cursive;
    font-size:
        clamp(1rem, 1.15vw, 1.28rem);
    line-height: 1.15;
}

.planning-chaos__notes span {
    position: relative;
    display: inline-block;
    transform-origin: left center;
}

.planning-chaos__notes span:nth-child(1) {
    transform: rotate(-2deg);
}

.planning-chaos__notes span:nth-child(2) {
    margin-left: 2rem;
    transform: rotate(1deg);
}

.planning-chaos__notes span:nth-child(3) {
    margin-left: 0.7rem;
    transform: rotate(-0.5deg);
}

.planning-chaos__notes span:nth-child(4) {
    margin-left: 3rem;
    transform: rotate(1.5deg);
}

.planning-chaos__notes span:nth-child(5) {
    margin-left: 1.2rem;
    transform: rotate(-1deg);
}

.planning-chaos__notes span:nth-child(6) {
    margin-left: 4.2rem;
    transform: rotate(0.8deg);
}

.planning-chaos__notes span:nth-child(7) {
    transform: rotate(-1.4deg);
}

.planning-chaos__notes span:nth-child(8) {
    margin-left: 2.8rem;
    transform: rotate(1deg);
}

.planning-chaos__notes span:nth-child(9) {
    margin-left: 0.8rem;
    transform: rotate(-1deg);
}

.planning-chaos__notes span:nth-child(10) {
    margin-left: 3.5rem;
    transform: rotate(0.6deg);
}

.planning-chaos__notes .is-crossed {
    color: rgba(23,23,20,.39);
}

.planning-chaos__notes .is-crossed::before,
.planning-chaos__notes .is-crossed::after {
    content: "";
    position: absolute;
    left: -0.2rem;
    width: calc(100% + 0.5rem);
    pointer-events: none;
    transform-origin: center;
}

.planning-chaos__notes .is-crossed::before {
    top: 48%;
    height: 1.5px;
    background: rgba(23,23,20,.60);
    transform: rotate(-4deg);
}

.planning-chaos__notes .is-crossed::after {
    top: 56%;
    height: 1px;
    background: rgba(213,94,73,.72);
    transform: rotate(-1deg);
}

.planning-chaos__copy h2 {
    max-width: 950px;
    margin:
        clamp(3rem, 6vw, 6rem)
        0
        2.5rem;
    font-family: var(--serif);
    font-size:
        clamp(4rem, 6.6vw, 7.4rem);
    font-weight: 600;
    line-height: 0.83;
    letter-spacing: -0.045em;
}

.planning-chaos__copy h2 em {
    display: block;
    color: var(--coral);
    font-weight: 500;
}

.planning-chaos__copy > p {
    max-width: 590px;
    margin-bottom: 0;
    color: rgba(23,23,20,.64);
    font-size: 1rem;
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Process
|--------------------------------------------------------------------------
*/

.planning-process {
    padding:
        clamp(9rem, 14vw, 16rem)
        0;
    color: var(--white);
    background: var(--green-deep);
}

.planning-process__heading {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.35fr)
        minmax(0, 1fr);
    align-items: start;
    gap:
        clamp(4rem, 9vw, 11rem);
}

.planning-process__heading h2 {
    max-width: 1050px;
    margin: 0;
    font-family: var(--serif);
    font-size:
        clamp(4.2rem, 6.8vw, 7.7rem);
    font-weight: 600;
    line-height: 0.83;
    letter-spacing: -0.045em;
}

.planning-process__heading h2 em {
    display: block;
    color: #dfc7a2;
    font-weight: 500;
}

.planning-process__steps {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    margin-top:
        clamp(7rem, 11vw, 12rem);
    border-top: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light);
}

.planning-process__steps article {
    position: relative;
    min-height: 430px;
    padding:
        2rem
        clamp(1.5rem, 2.5vw, 3rem)
        3rem;
    border-right: 1px solid var(--line-light);
}

.planning-process__steps article:last-child {
    border-right: 0;
}

.planning-process__steps article > span {
    display: block;
    margin-bottom:
        clamp(5rem, 8vw, 8rem);
    color: rgba(255,255,255,.50);
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.10em;
}

.planning-process__steps h3 {
    max-width: 250px;
    margin-bottom: 1.3rem;
    font-family: var(--serif);
    font-size:
        clamp(2.2rem, 2.8vw, 3rem);
    font-weight: 600;
    line-height: 0.95;
}

.planning-process__steps p {
    max-width: 280px;
    margin-bottom: 0;
    color: rgba(255,255,255,.62);
    font-size: 0.9rem;
    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Planning brief
|--------------------------------------------------------------------------
*/

.planning-brief {
    padding:
        clamp(9rem, 14vw, 16rem)
        0;
    background: var(--ivory);
}

.planning-brief__heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(280px, 0.34fr);
    align-items: end;
    gap:
        clamp(4rem, 8vw, 9rem);
    margin-top:
        clamp(4rem, 7vw, 7rem);
}

.planning-brief__heading h2 {
    max-width: 960px;
    margin-bottom: 0;
    font-family: var(--serif);
    font-size:
        clamp(4rem, 6.6vw, 7.4rem);
    font-weight: 600;
    line-height: 0.83;
    letter-spacing: -0.045em;
}

.planning-brief__heading h2 em {
    display: block;
    color: var(--coral);
    font-weight: 500;
}

.planning-brief__heading > p {
    max-width: 420px;
    margin-bottom: 0.5rem;
    color: rgba(23,23,20,.64);
    font-size: 0.98rem;
    line-height: 1.7;
}

.planning-brief__questions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    margin-top:
        clamp(6rem, 10vw, 11rem);
    border-top: 1px solid var(--line-dark);
}

.planning-brief__questions > div {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.32fr)
        minmax(0, 1fr);
    gap: 2rem;
    min-height: 180px;
    padding:
        2rem
        2rem
        2rem
        0;
    border-bottom: 1px solid var(--line-dark);
}

.planning-brief__questions > div:nth-child(odd) {
    border-right: 1px solid var(--line-dark);
    padding-right: 3rem;
}

.planning-brief__questions > div:nth-child(even) {
    padding-left: 3rem;
}

.planning-brief__questions span {
    font-family: var(--serif);
    font-size:
        clamp(1.8rem, 2.4vw, 2.6rem);
    font-weight: 600;
    line-height: 1;
}

.planning-brief__questions p {
    max-width: 430px;
    margin-bottom: 0;
    color: rgba(23,23,20,.65);
    font-size: 0.94rem;
    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Human support
|--------------------------------------------------------------------------
*/

.planning-human {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);
    min-height: 900px;
    color: var(--white);
    background: var(--ink);
}

.planning-human__image {
    min-height: 900px;
}

.planning-human__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.planning-human__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        clamp(4rem, 8vw, 9rem);
}

.planning-human__content h2 {
    max-width: 720px;
    margin:
        clamp(3rem, 6vw, 6rem)
        0
        2rem;
    font-family: var(--serif);
    font-size:
        clamp(4rem, 6.3vw, 7rem);
    font-weight: 600;
    line-height: 0.83;
    letter-spacing: -0.045em;
}

.planning-human__content h2 em {
    display: block;
    color: #dfc7a2;
    font-weight: 500;
}

.planning-human__lead {
    max-width: 650px;
    margin-bottom: 1.8rem;
    font-family: var(--serif);
    font-size:
        clamp(1.6rem, 2vw, 2.1rem);
    font-weight: 600;
    line-height: 1.25;
}

.planning-human__content > p:not(.planning-human__lead) {
    max-width: 620px;
    color: rgba(255,255,255,.62);
    font-size: 0.98rem;
    line-height: 1.7;
}

.planning-human__content
.editorial-link {
    margin-top: 2rem;
}


/*
|--------------------------------------------------------------------------
| Closing CTA
|--------------------------------------------------------------------------
*/

.planning-last-call h2 {
    max-width: 1050px;
}


/*
|--------------------------------------------------------------------------
| Planning — wide screens
|--------------------------------------------------------------------------
*/

@media (min-width: 1700px) {
.planning-hero__copy h1 {
        font-size:
            clamp(7rem, 7.5vw, 9.5rem);
    }

    .planning-chaos__layout {
        grid-template-columns:
            minmax(330px, 0.40fr)
            minmax(0, 1.15fr);
    }

    .planning-process__steps article {
        min-height: 460px;
    }

}


/*
|--------------------------------------------------------------------------
| Planning — tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .planning-hero__layout,
    .planning-handled__heading,
    .planning-chaos__layout,
    .planning-process__heading,
    .planning-brief__heading {
        grid-template-columns: 1fr;
    }

    .planning-hero__side {
        max-width: 520px;
        margin-left: auto;
    }

    .planning-hero__copy > p {
        margin-left: 0;
    }

    .planning-chaos__notes {
        order: 2;
        max-width: 500px;
        margin-left: auto;
    }

    .planning-process__steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .planning-process__steps article:nth-child(2) {
        border-right: 0;
    }

    .planning-process__steps article:nth-child(-n+2) {
        border-bottom: 1px solid var(--line-light);
    }

    .planning-brief__questions {
        grid-template-columns: 1fr;
    }

    .planning-brief__questions > div:nth-child(odd),
    .planning-brief__questions > div:nth-child(even) {
        padding-left: 0;
        padding-right: 0;
        border-right: 0;
    }

    .planning-human {
        grid-template-columns: 1fr;
    }

    .planning-human__image {
        min-height: 720px;
    }

    .planning-human__content {
        padding:
            7rem
            max(
                2rem,
                calc((100vw - 900px) / 2)
            );
    }

}


/*
|--------------------------------------------------------------------------
| Planning — small tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .planning-hero {
        padding-top:
            calc(var(--header-height) + 5rem);
    }

    .planning-hero__topline {
        flex-direction: column;
        gap: 0.5rem;
    }

    .planning-hero__layout {
        margin-top: 5rem;
    }

    .planning-hero__copy h1 {
        font-size:
            clamp(4rem, 14vw, 6rem);
    }

    .planning-hero__statement > div {
        width: calc(100% - 2rem);
        font-size:
            clamp(3.5rem, 13vw, 5.5rem);
    }

    .planning-handled {
        padding:
            7rem
            0;
    }

    .planning-handled
    .planning-line {
        grid-template-columns: 1fr;
    }

    .planning-chaos {
        padding:
            7rem
            0;
    }

    .planning-chaos__copy h2,
    .planning-process__heading h2,
    .planning-brief__heading h2,
    .planning-human__content h2 {
        font-size:
            clamp(3.5rem, 13vw, 5.4rem);
    }

    .planning-process {
        padding:
            7rem
            0;
    }

    .planning-process__steps article {
        min-height: 360px;
    }

    .planning-brief {
        padding:
            7rem
            0;
    }

    .planning-brief__questions > div {
        grid-template-columns:
            minmax(120px, 0.3fr)
            minmax(0, 1fr);
    }

    .planning-human__image {
        min-height: 620px;
    }

}


/*
|--------------------------------------------------------------------------
| Planning — mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .planning-hero {
        padding-top:
            calc(var(--header-height) + 4rem);
    }

    .planning-hero__inner {
        padding-bottom: 6rem;
    }

    .planning-hero__copy h1 {
        font-size:
            clamp(4rem, 18vw, 5.7rem);
        line-height: 0.82;
    }

    .planning-hero__copy h1 em {
        margin-left: 1rem;
    }

    .planning-hero__copy > p {
        font-size: 0.92rem;
    }

    .planning-hero__side {
        margin-left: 0;
    }

    .planning-hero__statement > div {
        width: calc(100% - 1.5rem);
        padding:
            4.5rem
            0;
        font-size:
            clamp(3.3rem, 15vw, 4.8rem);
    }

    .planning-handled__heading h2,
    .planning-chaos__copy h2,
    .planning-process__heading h2,
    .planning-brief__heading h2,
    .planning-human__content h2 {
        font-size:
            clamp(3.2rem, 15vw, 4.7rem);
        line-height: 0.86;
    }

    .planning-chaos__notes {
        gap: 0.65rem;
        margin-left: 0;
        font-size: 0.95rem;
    }

    .planning-chaos__notes span:nth-child(n) {
        margin-left: 0;
    }

    .planning-chaos__notes span:nth-child(even) {
        margin-left: 1.3rem;
    }

    .planning-process__steps {
        grid-template-columns: 1fr;
    }

    .planning-process__steps article {
        min-height: 0;
        padding:
            2rem
            0
            3rem;
        border-right: 0;
        border-bottom: 1px solid var(--line-light);
    }

    .planning-process__steps article:last-child {
        border-bottom: 0;
    }

    .planning-process__steps article > span {
        margin-bottom: 3.5rem;
    }

    .planning-brief__questions > div {
        grid-template-columns: 1fr;
        gap: 1rem;
        min-height: 0;
        padding:
            1.8rem
            0;
    }

    .planning-brief__questions span {
        font-size: 2rem;
    }

    .planning-human__image {
        min-height: 520px;
    }

    .planning-human__content {
        padding:
            5rem
            0.8rem;
    }

}


/* =========================================================
   PREMIUM PLANNING — LIGHT HERO HEADER
   ========================================================= */

/*
|--------------------------------------------------------------------------
| Closed header on ivory
|--------------------------------------------------------------------------
|
| The shared JUST ARRIVED header was originally designed for
| photographic hero backgrounds and therefore defaults to white.
| Planning opens on ivory, so this page uses the ink treatment.
|
*/

.page-planning .site-header,
.page-planning .site-header.site-header--scrolled {
    color: var(--ink);
}

.page-planning .site-header::after,
.page-planning .site-header.site-header--scrolled::after {
    background: var(--line-dark);
}


/*
|--------------------------------------------------------------------------
| Header CTA
|--------------------------------------------------------------------------
*/

.page-planning .header-cta:hover,
.page-planning
.site-header--scrolled
.header-cta:hover {
    color: var(--white);
    background: var(--ink);
}


/*
|--------------------------------------------------------------------------
| Mobile navigation open state
|--------------------------------------------------------------------------
|
| main.js places the mobile navigation over the deep-green portal.
| Once that happens the persistent logo / menu button need to return
| to white so they remain visible over the overlay.
|
*/

@media (max-width: 980px) {

    .page-planning.nav-open .site-header,
    .page-planning.nav-open
    .site-header.site-header--scrolled {
        color: var(--white);
    }

    .page-planning.nav-open
    .site-header::after,
    .page-planning.nav-open
    .site-header.site-header--scrolled::after {
        background: rgba(255, 255, 255, 0.28);
    }

}


/* =========================================================
   PREMIUM PLANNING — HERO IMAGE LAYOUT
   ========================================================= */


/*
|--------------------------------------------------------------------------
| Desktop composition
|--------------------------------------------------------------------------
*/

.planning-hero__inner {
    padding-bottom:
        clamp(5rem, 8vw, 8rem);
}

.planning-hero__layout {
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(360px, 0.58fr);
    align-items: center;
    gap:
        clamp(4rem, 7vw, 8rem);
    margin-top:
        clamp(4rem, 6vw, 6.5rem);
}

.planning-hero__copy {
    align-self: center;
}

.planning-hero__copy > p {
    max-width: 620px;
    margin:
        2.8rem
        0
        0
        clamp(2rem, 8vw, 8rem);
}

.planning-hero__side {
    align-self: center;
    justify-self: end;
    width: 100%;
    max-width: 500px;
    padding-top: 0;
    border-top: 0;
}

.planning-hero__media {
    width: 100%;
    margin: 0;
    aspect-ratio: 928 / 1152;
    overflow: hidden;
    background: var(--paper);
}

.planning-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.planning-hero__brief {
    margin-top: 1.4rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line-dark);
}

.planning-hero__brief > span {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.planning-hero__brief > p {
    max-width: 390px;
    margin-bottom: 1.6rem;
    font-family: var(--serif);
    font-size:
        clamp(1.45rem, 1.7vw, 1.9rem);
    font-weight: 600;
    line-height: 1.12;
}


/*
|--------------------------------------------------------------------------
| Wide screens
|--------------------------------------------------------------------------
*/

@media (min-width: 1700px) {

    .planning-hero__layout {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(430px, 0.55fr);
        gap:
            clamp(6rem, 8vw, 10rem);
    }

    .planning-hero__side {
        max-width: 540px;
    }

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .planning-hero__layout {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 5rem;
    }

    .planning-hero__copy > p {
        margin:
            2.5rem
            0
            0;
    }

    .planning-hero__side {
        width: min(72%, 520px);
        max-width: none;
        margin-left: auto;
    }

}


/*
|--------------------------------------------------------------------------
| Small tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .planning-hero__layout {
        gap: 4rem;
    }

    .planning-hero__side {
        width: min(82%, 500px);
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .planning-hero__inner {
        padding-bottom: 5rem;
    }

    .planning-hero__layout {
        margin-top: 4rem;
        gap: 3.5rem;
    }

    .planning-hero__copy > p {
        margin-top: 2rem;
    }

    .planning-hero__side {
        width: 100%;
        margin-left: 0;
    }

    .planning-hero__brief > p {
        font-size:
            clamp(1.45rem, 7vw, 1.85rem);
    }

}


/* =========================================================
   PREMIUM PLANNING — FULL BLEED BACKGROUND LAYER
   ========================================================= */


/*
|--------------------------------------------------------------------------
| Full-bleed hero canvas
|--------------------------------------------------------------------------
*/

.planning-hero.planning-hero--full {
    position: relative;
    padding: 0;
    color: var(--white);
    background: var(--green-deep);
    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| Photograph becomes the background layer
|--------------------------------------------------------------------------
*/

.planning-hero--full
.planning-hero__media {
    position: absolute;
    z-index: 0;
    inset: 0;

    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;

    aspect-ratio: auto;
    overflow: hidden;
}

.planning-hero--full
.planning-hero__media img {
    width: 100%;
    max-width: none;
    height: 100%;

    object-fit: cover;
    object-position: center 48%;
}


/*
|--------------------------------------------------------------------------
| Cinematic readability overlay
|--------------------------------------------------------------------------
*/

.planning-hero--full
.planning-hero__shade {
    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 17, 15, 0.82) 0%,
            rgba(8, 17, 15, 0.62) 38%,
            rgba(8, 17, 15, 0.20) 67%,
            rgba(8, 17, 15, 0.34) 100%
        ),
        linear-gradient(
            180deg,
            rgba(8, 17, 15, 0.34) 0%,
            rgba(8, 17, 15, 0.05) 38%,
            rgba(8, 17, 15, 0.16) 67%,
            rgba(8, 17, 15, 0.70) 100%
        );

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Hero content sits above image
|--------------------------------------------------------------------------
*/

.planning-hero--full
.planning-hero__inner {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    min-height: 100svh;

    padding-top:
        calc(var(--header-height) + 4.5rem);

    padding-bottom:
        clamp(4rem, 7vw, 7rem);
}


/*
|--------------------------------------------------------------------------
| Top editorial line
|--------------------------------------------------------------------------
*/

.planning-hero--full
.planning-hero__topline {
    color: rgba(255,255,255,.88);
    border-bottom-color:
        rgba(255,255,255,.34);
}


/*
|--------------------------------------------------------------------------
| Main composition
|--------------------------------------------------------------------------
*/

.planning-hero--full
.planning-hero__layout {
    flex: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(280px, 0.42fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 10rem);

    margin-top:
        clamp(4rem, 8vh, 8rem);
}

.planning-hero--full
.planning-hero__copy {
    align-self: end;
}

.planning-hero--full
.planning-hero__copy h1 {
    max-width: 980px;
    margin-bottom: 0;

    color: var(--white);

    text-shadow:
        0 2px 24px rgba(0,0,0,.16);
}

.planning-hero--full
.planning-hero__copy h1 em {
    color: #e8c49e;
}

.planning-hero--full
.planning-hero__copy > p {
    max-width: 620px;

    margin:
        2.5rem
        0
        0
        clamp(1rem, 7vw, 7rem);

    color: rgba(255,255,255,.82);
}


/*
|--------------------------------------------------------------------------
| Small planning brief
|--------------------------------------------------------------------------
*/

.planning-hero--full
.planning-hero__brief {
    align-self: end;

    margin: 0;
    padding-top: 1.4rem;

    color: var(--white);

    border-top:
        1px solid rgba(255,255,255,.42);
}

.planning-hero--full
.planning-hero__brief > span {
    color: rgba(255,255,255,.72);
}

.planning-hero--full
.planning-hero__brief > p {
    color: var(--white);
}


/*
|--------------------------------------------------------------------------
| Approved 47-tabs strip stays above photograph
|--------------------------------------------------------------------------
*/

.planning-hero--full
.planning-hero__statement {
    position: relative;
    z-index: 3;
}


/*
|--------------------------------------------------------------------------
| Header returns to white over photographic hero
|--------------------------------------------------------------------------
*/

.page-planning .site-header,
.page-planning
.site-header.site-header--scrolled {
    color: var(--white);
}

.page-planning
.site-header::after,
.page-planning
.site-header.site-header--scrolled::after {
    background:
        rgba(255,255,255,.28);
}

.page-planning .header-cta:hover,
.page-planning
.site-header--scrolled
.header-cta:hover {
    color: var(--ink);
    background: var(--white);
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .planning-hero--full
    .planning-hero__layout {
        grid-template-columns: 1fr;
        align-content: end;
        gap: 3.5rem;
    }

    .planning-hero--full
    .planning-hero__brief {
        width: min(100%, 440px);
        margin-left: auto;
    }

    .planning-hero--full
    .planning-hero__media img {
        object-position: 56% center;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .planning-hero--full
    .planning-hero__inner {
        min-height: 820px;

        padding-top:
            calc(var(--header-height) + 3rem);

        padding-bottom: 3rem;
    }

    .planning-hero--full
    .planning-hero__layout {
        margin-top: 3rem;
        gap: 3rem;
    }

    .planning-hero--full
    .planning-hero__copy > p {
        margin:
            2rem
            0
            0;
    }

    .planning-hero--full
    .planning-hero__brief {
        width: 100%;
        margin-left: 0;
    }

    .planning-hero--full
    .planning-hero__media img {
        object-position: 59% center;
    }

}


/* =========================================================
   PREMIUM PLANNING — DETAILS EDITORIAL BREAK
   ========================================================= */

.planning-details-image {
    position: relative;
    background: var(--green-deep);
    overflow: hidden;
}

.planning-details-image__figure {
    position: relative;
    width: 100%;
    min-height:
        clamp(620px, 65vw, 900px);
    margin: 0;
    overflow: hidden;
}

.planning-details-image__figure > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}


/*
|--------------------------------------------------------------------------
| Subtle photographic shading
|--------------------------------------------------------------------------
*/

.planning-details-image__figure::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(8,17,15,0.02) 0%,
            rgba(8,17,15,0.04) 55%,
            rgba(8,17,15,0.30) 100%
        );
}


/*
|--------------------------------------------------------------------------
| Editorial caption panel
|--------------------------------------------------------------------------
*/

.planning-details-image figcaption {
    position: absolute;
    z-index: 2;
    right:
        max(
            2rem,
            calc((100vw - var(--shell)) / 2)
        );
    bottom:
        clamp(2rem, 5vw, 5rem);

    width:
        min(
            420px,
            calc(100% - 4rem)
        );

    padding:
        clamp(2rem, 3vw, 3rem);

    color: var(--white);
    background: var(--green-deep);
}

.planning-details-image figcaption > span {
    display: block;
    padding-bottom: 1.1rem;
    margin-bottom: 1.5rem;

    border-bottom:
        1px solid rgba(255,255,255,.28);

    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.planning-details-image figcaption p {
    max-width: 330px;
    margin: 0;

    font-family: var(--serif);
    font-size:
        clamp(1.65rem, 2.2vw, 2.35rem);
    font-weight: 600;
    line-height: 1.14;
}


/*
|--------------------------------------------------------------------------
| Small editorial marker
|--------------------------------------------------------------------------
*/

.planning-details-image::before {
    content: "PLANNING DESK / WORK IN PROGRESS";
    position: absolute;
    z-index: 3;
    top: 2rem;
    left:
        max(
            2rem,
            calc((100vw - var(--shell)) / 2)
        );

    color: rgba(255,255,255,.82);

    font-family: var(--mono);
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.10em;
}


/*
|--------------------------------------------------------------------------
| Wide screens
|--------------------------------------------------------------------------
*/

@media (min-width: 1700px) {

    .planning-details-image__figure {
        min-height: 820px;
        max-height: 960px;
    }

    .planning-details-image figcaption {
        right:
            max(
                3.5rem,
                calc((100vw - 1700px) / 2)
            );

        width: 470px;
    }

    .planning-details-image::before {
        left:
            max(
                3.5rem,
                calc((100vw - 1700px) / 2)
            );
    }

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .planning-details-image__figure {
        min-height: 680px;
    }

    .planning-details-image figcaption {
        right: 1.5rem;
        bottom: 1.5rem;
    }

    .planning-details-image::before {
        left: 1.5rem;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .planning-details-image__figure {
        min-height: 620px;
    }

    .planning-details-image__figure > img {
        object-position: center center;
    }

    .planning-details-image figcaption {
        right: 0.75rem;
        bottom: 0.75rem;

        width:
            calc(100% - 1.5rem);

        padding:
            1.5rem;
    }

    .planning-details-image figcaption p {
        font-size:
            clamp(1.45rem, 7vw, 1.9rem);
    }

    .planning-details-image::before {
        top: 1rem;
        left: 0.75rem;
    }

}


/* =========================================================
   PREMIUM PLANNING — 47 TAB BACKGROUND
   ========================================================= */


/*
|--------------------------------------------------------------------------
| Full-bleed planning desk background
|--------------------------------------------------------------------------
*/

.planning-chaos {
    position: relative;
    isolation: isolate;

    min-height:
        clamp(720px, 70vw, 920px);

    padding:
        clamp(8rem, 13vw, 14rem)
        0;

    color: var(--white);
    background:
        var(--green-deep);

    overflow: hidden;
}

.planning-chaos::before {
    content: "";

    position: absolute;
    z-index: -2;
    inset: 0;

    background-image:
        url("../images/planning-details.webp");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/*
|--------------------------------------------------------------------------
| Editorial image treatment
|--------------------------------------------------------------------------
|
| Keep the photograph visible, but push it into the background
| enough that the typography still owns the section.
|
*/

.planning-chaos::after {
    content: "";

    position: absolute;
    z-index: -1;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 17, 15, 0.83) 0%,
            rgba(8, 17, 15, 0.68) 34%,
            rgba(8, 17, 15, 0.42) 59%,
            rgba(8, 17, 15, 0.66) 100%
        ),
        linear-gradient(
            180deg,
            rgba(8, 17, 15, 0.28) 0%,
            rgba(8, 17, 15, 0.16) 42%,
            rgba(8, 17, 15, 0.72) 100%
        );
}


/*
|--------------------------------------------------------------------------
| Main layout
|--------------------------------------------------------------------------
*/

.planning-chaos__layout {
    position: relative;

    grid-template-columns:
        minmax(300px, 0.44fr)
        minmax(0, 1fr);

    align-items: center;

    gap:
        clamp(5rem, 11vw, 13rem);
}


/*
|--------------------------------------------------------------------------
| Handwritten planning mess
|--------------------------------------------------------------------------
*/

.planning-chaos__notes {
    max-width: 390px;

    color:
        rgba(255,255,255,.88);

    text-shadow:
        0 1px 10px rgba(0,0,0,.26);
}

.planning-chaos__notes .is-crossed {
    color:
        rgba(255,255,255,.58);
}

.planning-chaos__notes
.is-crossed::before {
    background:
        rgba(255,255,255,.76);
}

.planning-chaos__notes
.is-crossed::after {
    background:
        rgba(232,196,158,.82);
}


/*
|--------------------------------------------------------------------------
| Headline side
|--------------------------------------------------------------------------
*/

.planning-chaos__copy {
    max-width: 960px;

    padding:
        clamp(2rem, 4vw, 4rem);

    background:
        rgba(8,17,15,.22);

    backdrop-filter:
        blur(2px);

    -webkit-backdrop-filter:
        blur(2px);
}

.planning-chaos__copy
.editorial-label {
    color:
        rgba(255,255,255,.90);
}

.planning-chaos__copy
.editorial-label span:first-child {
    border-color:
        rgba(255,255,255,.52);
}

.planning-chaos__copy h2 {
    color: var(--white);

    text-shadow:
        0 2px 24px
        rgba(0,0,0,.18);
}

.planning-chaos__copy h2 em {
    color: #e8c49e;
}

.planning-chaos__copy > p {
    max-width: 610px;

    color:
        rgba(255,255,255,.80);
}


/*
|--------------------------------------------------------------------------
| Tiny margin note
|--------------------------------------------------------------------------
*/

.planning-chaos__layout::after {
    content:
        "ROUTES / HOTELS / TRAINS / QUESTIONABLE DECISIONS";

    position: absolute;

    right: 0;
    bottom: -5rem;

    color:
        rgba(255,255,255,.54);

    font-family: var(--mono);
    font-size: 0.50rem;
    letter-spacing: 0.10em;
}


/*
|--------------------------------------------------------------------------
| Wide
|--------------------------------------------------------------------------
*/

@media (min-width: 1700px) {

    .planning-chaos {
        min-height: 900px;
    }

    .planning-chaos__layout {
        grid-template-columns:
            minmax(360px, 0.42fr)
            minmax(0, 1.12fr);
    }

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .planning-chaos {
        min-height: 820px;
    }

    .planning-chaos::before {
        background-position:
            54% center;
    }

    .planning-chaos__layout {
        grid-template-columns: 1fr;
    }

    .planning-chaos__copy {
        max-width: 760px;
    }

    .planning-chaos__notes {
        order: 2;

        max-width: 500px;

        margin-left: auto;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .planning-chaos {
        min-height: 880px;

        padding:
            6.5rem
            0;
    }

    .planning-chaos::before {
        background-position:
            58% center;
    }

    .planning-chaos::after {
        background:
            linear-gradient(
                180deg,
                rgba(8,17,15,.72) 0%,
                rgba(8,17,15,.58) 40%,
                rgba(8,17,15,.84) 100%
            );
    }

    .planning-chaos__copy {
        padding:
            1.5rem
            0;

        background: transparent;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .planning-chaos__notes {
        max-width: 100%;

        margin-left: 0;

        color:
            rgba(255,255,255,.88);
    }

    .planning-chaos__layout::after {
        display: none;
    }

}


/* =========================================================
   PREMIUM PLANNING — 47 TAB PANEL CLEANUP
   ========================================================= */

/*
| Let the typography live directly in the photograph.
| No floating card / glass panel.
*/

.planning-chaos__copy {
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/*
| Slightly strengthen the photographic treatment behind
| the main copy instead of putting a box behind it.
*/

.planning-chaos::after {
    background:
        linear-gradient(
            90deg,
            rgba(8, 17, 15, 0.78) 0%,
            rgba(8, 17, 15, 0.60) 35%,
            rgba(8, 17, 15, 0.50) 62%,
            rgba(8, 17, 15, 0.70) 100%
        ),
        linear-gradient(
            180deg,
            rgba(8, 17, 15, 0.24) 0%,
            rgba(8, 17, 15, 0.20) 46%,
            rgba(8, 17, 15, 0.74) 100%
        );
}


/*
| Give the copy a little breathing room without creating
| another visible container.
*/

.planning-chaos__copy h2 {
    max-width: 900px;
}

.planning-chaos__copy > p {
    max-width: 620px;
}




/* =========================================================
   PREMIUM JOURNEYS PAGE
   ========================================================= */

.page-journeys {
    background: #f4f0e7;
}


/* =========================================================
   JOURNEYS HERO
   ========================================================= */

.journeys-hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    overflow: hidden;
    color: #fff;
    background: #0c2e28;
}

.journeys-hero__media,
.journeys-hero__shade {
    position: absolute;
    inset: 0;
}

.journeys-hero__media {
    z-index: -3;
}

.journeys-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
}

.journeys-hero__shade {
    z-index: -2;

    background:
        linear-gradient(
            180deg,
            rgba(5, 13, 12, 0.30) 0%,
            rgba(5, 13, 12, 0.08) 28%,
            rgba(5, 13, 12, 0.30) 58%,
            rgba(5, 13, 12, 0.82) 100%
        ),
        linear-gradient(
            90deg,
            rgba(5, 13, 12, 0.46) 0%,
            rgba(5, 13, 12, 0.10) 48%,
            rgba(5, 13, 12, 0.24) 100%
        );
}

.journeys-hero__inner {
    min-height: 100svh;
    padding-top:
        calc(var(--header-height) + 5rem);
    padding-bottom:
        clamp(3rem, 5vw, 5rem);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.journeys-hero__topline {
    display: flex;
    justify-content: space-between;
    gap: 2rem;

    padding-bottom: 1.6rem;

    border-bottom:
        1px solid rgba(255,255,255,.34);

    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.10em;
}

.journeys-hero__content {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(270px, 0.34fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 8rem);
}

.journeys-hero h1 {
    max-width: 900px;
    margin: 0;

    font-family: var(--serif);
    font-size:
        clamp(5.6rem, 9vw, 9.5rem);
    font-weight: 500;
    line-height: 0.78;
    letter-spacing: -0.055em;
}

.journeys-hero h1 em {
    display: block;

    margin-left:
        clamp(2rem, 8vw, 7rem);

    color: #e8c49e;

    font-weight: 500;
}

.journeys-hero__intro {
    padding-top: 1.6rem;

    border-top:
        1px solid rgba(255,255,255,.42);
}

.journeys-hero__intro > span {
    display: block;

    margin-bottom: 1.4rem;

    font-family: var(--mono);
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.09em;
}

.journeys-hero__intro p {
    margin: 0;

    font-family: var(--serif);
    font-size:
        clamp(1.4rem, 2vw, 1.85rem);
    font-weight: 600;
    line-height: 1.18;
}


/* =========================================================
   JOURNEYS INTRO
   ========================================================= */

.journeys-intro {
    padding:
        clamp(7rem, 11vw, 11rem)
        0;

    background: #f4f0e7;
}

.journeys-intro__layout {
    margin-top:
        clamp(5rem, 9vw, 8rem);

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 0.34fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 8rem);
}

.journeys-intro h2 {
    max-width: 860px;
    margin: 0;

    font-family: var(--serif);
    font-size:
        clamp(4.2rem, 7vw, 7.2rem);
    font-weight: 500;
    line-height: 0.86;
    letter-spacing: -0.045em;
}

.journeys-intro h2 em {
    display: block;

    color: #d95d45;

    font-weight: 500;
}

.journeys-intro__layout > p {
    margin: 0 0 0.5rem;

    font-family: var(--sans);
    font-size: 0.98rem;
    line-height: 1.7;
}


/* =========================================================
   JOURNEY FEATURES / SHARED
   ========================================================= */

.journey-feature {
    padding:
        clamp(7rem, 10vw, 10rem)
        0;
}

.journey-feature__heading {
    margin-top:
        clamp(4.5rem, 8vw, 7rem);
    margin-bottom:
        clamp(5rem, 8vw, 8rem);

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 0.35fr);

    align-items: end;

    gap:
        clamp(4rem, 7vw, 7rem);
}

.journey-feature__heading h2 {
    max-width: 840px;
    margin: 0;

    font-family: var(--serif);
    font-size:
        clamp(4.4rem, 7vw, 7.4rem);
    font-weight: 500;
    line-height: 0.84;
    letter-spacing: -0.05em;
}

.journey-feature__heading h2 em {
    display: block;
    color: #d95d45;
    font-weight: 500;
}

.journey-feature__heading > p {
    margin: 0 0 0.5rem;

    font-size: 0.96rem;
    line-height: 1.7;
}

.journey-feature__body {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, 0.65fr);

    align-items: stretch;
}

.journey-feature__image {
    min-height: 760px;
    margin: 0;
    overflow: hidden;
}

.journey-feature__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.journey-days {
    display: flex;
    flex-direction: column;
}

.journey-days article {
    position: relative;
    flex: 1;

    padding:
        2.2rem
        0
        2.2rem
        2.7rem;

    border-left:
        1px solid rgba(20,20,18,.40);
    border-bottom:
        1px solid rgba(20,20,18,.30);
}

.journey-days article:first-child {
    border-top:
        1px solid rgba(20,20,18,.30);
}

.journey-days article::before {
    content: "";

    position: absolute;
    top: 2.45rem;
    left: -4px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: currentColor;
}

.journey-days span {
    display: block;

    margin-bottom: 0.6rem;

    font-family: var(--mono);
    font-size: 0.48rem;
    font-weight: 600;
    letter-spacing: 0.10em;
}

.journey-days h3 {
    margin:
        0
        0
        0.8rem;

    font-family: var(--serif);
    font-size:
        clamp(1.8rem, 2.5vw, 2.45rem);
    font-weight: 600;
    line-height: 1;
}

.journey-days p {
    max-width: 310px;
    margin: 0;

    font-size: 0.84rem;
    line-height: 1.6;
}


/* =========================================================
   ITALY
   ========================================================= */

.journey-feature--italy {
    color: #11110f;
    background: #ebe4d6;
}

.journey-feature--italy
.journey-feature__image {
    margin-left:
        calc(
            (100vw - min(100vw, var(--shell))) / -2
        );
}

.journey-feature--italy
.journey-feature__image img {
    object-position: center center;
}


/* =========================================================
   JAPAN
   ========================================================= */

.journey-feature--japan {
    color: #f7f2e8;
    background: #101615;
}

.journey-feature--japan
.editorial-label {
    color: rgba(255,255,255,.88);
}

.journey-feature--japan
.editorial-label span:first-child {
    border-color:
        rgba(255,255,255,.45);
}

.journey-feature--japan
.journey-feature__heading h2 em {
    color: #e8c49e;
}

.journey-feature--japan
.journey-feature__heading > p {
    color: rgba(255,255,255,.72);
}

.journey-feature--japan
.journey-feature__body--reverse {
    grid-template-columns:
        minmax(320px, 0.62fr)
        minmax(0, 1.38fr);
}

.journey-feature--japan
.journey-feature__image {
    grid-column: 1;
    min-height: 850px;
}

.journey-feature--japan
.journey-days {
    grid-column: 2;
    grid-row: 1;
}

.journey-feature--japan
.journey-days article {
    border-color:
        rgba(255,255,255,.28);
}

.journey-feature--japan
.journey-days p {
    color:
        rgba(255,255,255,.74);
}

.journey-feature--japan
.journey-days article::before {
    background: #e8c49e;
}


/* =========================================================
   WARM WEATHER / FULL BLEED
   ========================================================= */

.journey-warm {
    position: relative;
    isolation: isolate;

    min-height:
        clamp(760px, 75vw, 920px);

    overflow: hidden;

    color: #fff;
    background: #0c2e28;
}

.journey-warm__media,
.journey-warm__shade {
    position: absolute;
    inset: 0;
}

.journey-warm__media {
    z-index: -3;
}

.journey-warm__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
}

.journey-warm__shade {
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(5,15,13,.78) 0%,
            rgba(5,15,13,.48) 42%,
            rgba(5,15,13,.10) 78%
        ),
        linear-gradient(
            180deg,
            rgba(5,15,13,.12) 0%,
            rgba(5,15,13,.26) 100%
        );
}

.journey-warm__content {
    min-height:
        clamp(760px, 75vw, 920px);

    padding-top:
        clamp(5rem, 8vw, 8rem);
    padding-bottom:
        clamp(5rem, 8vw, 8rem);

    display: flex;
    flex-direction: column;
}

.journey-warm h2 {
    max-width: 800px;

    margin:
        auto
        0
        0;

    font-family: var(--serif);
    font-size:
        clamp(4.8rem, 8vw, 8rem);
    font-weight: 500;
    line-height: 0.82;
    letter-spacing: -0.05em;
}

.journey-warm h2 em {
    color: #e8c49e;
    font-weight: 500;
}

.journey-warm__note {
    width:
        min(
            100%,
            360px
        );

    margin:
        clamp(3rem, 5vw, 5rem)
        0
        0
        auto;

    padding-top: 1.5rem;

    border-top:
        1px solid rgba(255,255,255,.46);
}

.journey-warm__note p {
    margin:
        0
        0
        1.6rem;

    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.2;
}


/* =========================================================
   CUSTOM / DISCLAIMER
   ========================================================= */

.journeys-custom {
    padding:
        clamp(7rem, 11vw, 11rem)
        0;

    color: #11110f;
    background: #f4f0e7;
}

.journeys-custom__heading {
    margin-top:
        clamp(4.5rem, 8vw, 7rem);
    margin-bottom:
        clamp(5rem, 8vw, 7rem);

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(240px, 0.28fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 8rem);
}

.journeys-custom__heading h2 {
    max-width: 850px;
    margin: 0;

    font-family: var(--serif);
    font-size:
        clamp(4.4rem, 7vw, 7.2rem);
    font-weight: 500;
    line-height: 0.85;
    letter-spacing: -0.045em;
}

.journeys-custom__heading h2 em {
    display: block;

    color: #d95d45;

    font-weight: 500;
}

.journeys-custom__heading > p {
    margin: 0 0 0.4rem;

    font-family: var(--serif);
    font-size:
        clamp(1.6rem, 2.3vw, 2.2rem);
    font-weight: 600;
}

.journeys-custom__lines {
    border-top:
        1px solid rgba(20,20,18,.42);
}


/* =========================================================
   JOURNEYS CTA
   ========================================================= */

.journeys-last-call {
    background: #d95d45;
}

.journeys-last-call
.last-call__content h2 em {
    color: #11110f;
}


/* =========================================================
   LARGE DESKTOP REFINEMENT
   ========================================================= */

@media (min-width: 1500px) {

    .journeys-hero h1 {
        font-size: 8.6rem;
    }

    .journey-feature__image {
        min-height: 800px;
    }

}


/* =========================================================
   PREMIUM JOURNEYS — MOBILE PASS
   ========================================================= */

@media (max-width: 760px) {


    /* =====================================================
       HERO
       ===================================================== */

    .journeys-hero {
        min-height: 100svh;
    }

    .journeys-hero__inner {
        min-height: 100svh;

        padding-top:
            calc(var(--header-height) + 3.25rem);

        padding-bottom: 2.25rem;
    }

    .journeys-hero__topline {
        gap: 1rem;

        padding-bottom: 1rem;

        font-size: 0.48rem;
    }

    .journeys-hero__content {
        display: grid;
        grid-template-columns: 1fr;

        align-items: initial;

        gap: 2.5rem;
    }

    .journeys-hero h1 {
        max-width: 100%;

        font-size:
            clamp(4.4rem, 18vw, 5.7rem);

        line-height: 0.80;
    }

    .journeys-hero h1 em {
        margin-left: 1.3rem;
    }

    .journeys-hero__intro {
        width: 100%;
        max-width: 100%;

        padding-top: 1.15rem;
    }

    .journeys-hero__intro > span {
        margin-bottom: 1rem;
    }

    .journeys-hero__intro p {
        max-width: 24rem;

        font-size: 1.35rem;
        line-height: 1.2;
    }


    /* =====================================================
       GENERAL IDEA
       ===================================================== */

    .journeys-intro {
        padding:
            5.5rem
            0;
    }

    .journeys-intro__layout {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        gap: 2.25rem;
    }

    .journeys-intro h2 {
        max-width: 100%;

        font-size:
            clamp(3.6rem, 15vw, 5rem);

        line-height: 0.86;
    }

    .journeys-intro h2 em {
        display: block;
    }

    .journeys-intro__layout > p {
        max-width: 29rem;

        margin: 0;

        font-size: 0.94rem;
        line-height: 1.65;
    }


    /* =====================================================
       JOURNEY FEATURES
       ===================================================== */

    .journey-feature {
        padding:
            5.5rem
            0;
    }

    .journey-feature__heading {
        margin-top: 3.75rem;
        margin-bottom: 3.5rem;

        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .journey-feature__heading h2 {
        max-width: 100%;

        font-size:
            clamp(3.7rem, 15vw, 5.2rem);

        line-height: 0.86;
    }

    .journey-feature__heading > p {
        max-width: 28rem;

        margin: 0;

        font-size: 0.94rem;
        line-height: 1.65;
    }


    /* =====================================================
       ITINERARY IMAGE + DAYS
       ===================================================== */

    .journey-feature__body,
    .journey-feature--japan
    .journey-feature__body--reverse {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
    }

    .journey-feature__image,
    .journey-feature--italy
    .journey-feature__image,
    .journey-feature--japan
    .journey-feature__image {
        grid-column: 1;
        grid-row: auto;

        width: 100%;
        min-height: 0;

        margin: 0;

        aspect-ratio: 4 / 3;
    }

    .journey-feature__image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .journey-feature--japan
    .journey-feature__image {
        aspect-ratio: 3 / 4;
    }

    .journey-feature--japan
    .journey-days {
        grid-column: 1;
        grid-row: auto;
    }


    /* =====================================================
       TIMELINE
       ===================================================== */

    .journey-days {
        width: 100%;
    }

    .journey-days article {
        min-height: 0;

        padding:
            2rem
            0
            2rem
            1.75rem;

        border-left:
            1px solid rgba(20,20,18,.35);
    }

    .journey-days article::before {
        top: 2.15rem;
    }

    .journey-days h3 {
        font-size:
            clamp(1.9rem, 8vw, 2.4rem);
    }

    .journey-days p {
        max-width: 100%;

        padding-right: 0.5rem;

        font-size: 0.88rem;
    }

    .journey-feature--japan
    .journey-days article {
        border-left-color:
            rgba(255,255,255,.30);
    }


    /* =====================================================
       WARM WEATHER
       ===================================================== */

    .journey-warm,
    .journey-warm__content {
        min-height: 760px;
    }

    .journey-warm__content {
        padding-top: 5rem;
        padding-bottom: 3rem;
    }

    .journey-warm h2 {
        max-width: 100%;

        font-size:
            clamp(4rem, 17vw, 5.7rem);

        line-height: 0.82;
    }

    .journey-warm__note {
        width: 100%;
        max-width: 100%;

        margin-top: 3rem;
        margin-left: 0;
    }


    /* =====================================================
       CUSTOM JOURNEY SECTION
       ===================================================== */

    .journeys-custom {
        padding:
            5.5rem
            0;
    }

    .journeys-custom__heading {
        margin-top: 4rem;
        margin-bottom: 4rem;

        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .journeys-custom__heading h2 {
        max-width: 100%;

        font-size:
            clamp(3.6rem, 15vw, 5rem);

        line-height: 0.86;
    }

    .journeys-custom__heading > p {
        margin: 0;

        font-size: 1.75rem;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .journeys-hero h1 {
        font-size:
            clamp(4rem, 18vw, 5rem);
    }

    .journeys-intro h2,
    .journey-feature__heading h2,
    .journeys-custom__heading h2 {
        font-size:
            clamp(3.35rem, 15vw, 4.5rem);
    }

}


/* =========================================================
   PREMIUM ABOUT PAGE
   ========================================================= */

.page-about {
    background: #f4f0e7;
}


/* =========================================================
   ABOUT HERO
   ========================================================= */

.about-hero {
    position: relative;
    isolation: isolate;

    min-height: 100svh;

    overflow: hidden;

    color: #f8f3e9;
    background: #111513;
}


/*
|--------------------------------------------------------------------------
| Portrait photography stays on the right.
|--------------------------------------------------------------------------
*/

.about-hero__media {
    position: absolute;
    z-index: -3;

    top: 0;
    right: 0;
    bottom: 0;

    width: 53%;
}

.about-hero__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 38%;
}


/*
|--------------------------------------------------------------------------
| Blend image into editorial black.
|--------------------------------------------------------------------------
*/

.about-hero__shade {
    position: absolute;
    z-index: -2;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            #111513 0%,
            #111513 38%,
            rgba(17,21,19,.90) 47%,
            rgba(17,21,19,.36) 68%,
            rgba(17,21,19,.16) 100%
        ),
        linear-gradient(
            180deg,
            rgba(10,13,12,.24) 0%,
            rgba(10,13,12,.05) 55%,
            rgba(10,13,12,.58) 100%
        );
}


.about-hero__inner {
    min-height: 100svh;

    padding-top:
        calc(var(--header-height) + 5rem);

    padding-bottom:
        clamp(3.5rem, 6vw, 6rem);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.about-hero__topline {
    display: flex;
    justify-content: space-between;

    gap: 2rem;

    padding-bottom: 1.55rem;

    border-bottom:
        1px solid rgba(255,255,255,.30);

    font-family: var(--mono);
    font-size: 0.54rem;
    font-weight: 600;
    letter-spacing: 0.10em;
}


.about-hero__content {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(250px, 0.38fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 8rem);
}


.about-hero h1 {
    max-width: 720px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(5rem, 7vw, 7.6rem);

    font-weight: 500;
    line-height: 0.82;
    letter-spacing: -0.05em;
}


.about-hero h1 em {
    display: block;

    color: #e8c49e;

    font-weight: 500;
}


.about-hero__intro {
    margin-bottom: 0.6rem;

    padding-top: 1.4rem;

    border-top:
        1px solid rgba(255,255,255,.42);
}


.about-hero__intro > span {
    display: block;

    margin-bottom: 1.3rem;

    font-family: var(--mono);
    font-size: 0.50rem;
    font-weight: 600;
    letter-spacing: 0.09em;
}


.about-hero__intro p {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(1.35rem, 1.8vw, 1.8rem);

    font-weight: 600;
    line-height: 1.2;
}


/* =========================================================
   ABOUT INTRO
   ========================================================= */

.about-intro {
    padding:
        clamp(7rem, 11vw, 11rem)
        0;

    color: #11110f;
    background: #f4f0e7;
}


.about-intro__layout {
    margin-top:
        clamp(5rem, 8vw, 8rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.52fr);

    align-items: start;

    gap:
        clamp(5rem, 9vw, 9rem);
}


.about-intro h2 {
    max-width: 730px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(4.1rem, 6.4vw, 6.8rem);

    font-weight: 500;
    line-height: 0.86;
    letter-spacing: -0.045em;
}


.about-intro h2 em {
    display: block;

    color: #d95d45;

    font-weight: 500;
}


.about-intro__copy {
    padding-top: 0.5rem;
}


.about-intro__lead {
    margin:
        0
        0
        2rem;

    font-family: var(--serif);

    font-size:
        clamp(1.65rem, 2.3vw, 2.15rem);

    font-weight: 600;
    line-height: 1.2;
}


.about-intro__copy > p:not(.about-intro__lead) {
    margin: 0;

    font-size: 0.95rem;
    line-height: 1.75;
}


/* =========================================================
   PROFILE
   ========================================================= */

.about-profile {
    padding:
        clamp(7rem, 10vw, 10rem)
        0;

    color: #f8f3e9;
    background: #0d302a;
}


.about-profile .editorial-label {
    color: rgba(255,255,255,.88);
}


.about-profile
.editorial-label span:first-child {
    border-color:
        rgba(255,255,255,.42);
}


.about-profile__grid {
    margin-top:
        clamp(5rem, 8vw, 8rem);

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(360px, 0.68fr);

    gap:
        clamp(5rem, 9vw, 9rem);
}


.about-profile__statement h2 {
    max-width: 700px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(4rem, 6vw, 6.4rem);

    font-weight: 500;
    line-height: 0.86;
    letter-spacing: -0.045em;
}


.about-profile__statement h2 em {
    color: #e8c49e;

    font-weight: 500;
}


.about-profile__details {
    margin: 0;
}


.about-profile__details > div {
    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    gap: 2rem;

    padding:
        1.8rem
        0;

    border-top:
        1px solid rgba(255,255,255,.25);
}


.about-profile__details > div:last-child {
    border-bottom:
        1px solid rgba(255,255,255,.25);
}


.about-profile__details dt {
    font-family: var(--mono);
    font-size: 0.50rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color:
        rgba(255,255,255,.58);
}


.about-profile__details dd {
    margin: 0;

    font-size: 0.94rem;
    line-height: 1.6;

    color:
        rgba(255,255,255,.88);
}


/* =========================================================
   PHILOSOPHY
   ========================================================= */

.about-philosophy {
    padding:
        clamp(7rem, 11vw, 11rem)
        0;

    color: #11110f;
    background: #f4f0e7;
}


.about-philosophy__heading {
    margin-top:
        clamp(5rem, 8vw, 8rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(250px, 0.30fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 8rem);
}


.about-philosophy__heading h2 {
    max-width: 800px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(4.2rem, 6.6vw, 7rem);

    font-weight: 500;
    line-height: 0.85;
    letter-spacing: -0.05em;
}


.about-philosophy__heading h2 em {
    display: block;

    color: #d95d45;

    font-weight: 500;
}


.about-philosophy__heading > p {
    margin: 0 0 0.5rem;

    font-family: var(--serif);

    font-size:
        clamp(1.5rem, 2vw, 1.9rem);

    font-weight: 600;
    line-height: 1.25;
}


.about-philosophy__lines {
    margin-top:
        clamp(5rem, 8vw, 7rem);

    display: grid;
    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid rgba(20,20,18,.42);

    border-bottom:
        1px solid rgba(20,20,18,.42);
}


.about-philosophy__lines article {
    min-height: 320px;

    padding:
        2rem
        2rem
        2.5rem;

    border-left:
        1px solid rgba(20,20,18,.32);

    display: flex;
    flex-direction: column;
}


.about-philosophy__lines article:first-child {
    border-left: 0;
}


.about-philosophy__lines article > span {
    font-family: var(--mono);
    font-size: 0.48rem;
    letter-spacing: 0.08em;

    color:
        rgba(20,20,18,.54);
}


.about-philosophy__lines h3 {
    margin:
        auto
        0
        1rem;

    font-family: var(--serif);

    font-size:
        clamp(1.7rem, 2.4vw, 2.2rem);

    font-weight: 600;
    line-height: 1;
}


.about-philosophy__lines p {
    margin: 0;

    font-size: 0.84rem;
    line-height: 1.6;
}


/* =========================================================
   HUMAN SUPPORT / PHOTOGRAPHIC SECTION
   ========================================================= */

.about-human {
    position: relative;
    isolation: isolate;

    min-height:
        clamp(760px, 72vw, 900px);

    overflow: hidden;

    color: #fff;
    background: #111513;
}


.about-human__media,
.about-human__shade {
    position: absolute;
    inset: 0;
}


.about-human__media {
    z-index: -3;
}


.about-human__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}


.about-human__shade {
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(8,17,15,.22) 0%,
            rgba(8,17,15,.50) 43%,
            rgba(8,17,15,.88) 100%
        ),
        linear-gradient(
            180deg,
            rgba(8,17,15,.14) 0%,
            rgba(8,17,15,.55) 100%
        );
}


.about-human__content {
    min-height:
        clamp(760px, 72vw, 900px);

    padding-top:
        clamp(5rem, 8vw, 8rem);

    padding-bottom:
        clamp(5rem, 8vw, 8rem);

    display: flex;
    flex-direction: column;
}


.about-human__copy {
    width:
        min(
            100%,
            560px
        );

    margin:
        auto
        0
        0
        auto;
}


.about-human__copy h2 {
    margin:
        0
        0
        2rem;

    font-family: var(--serif);

    font-size:
        clamp(4.2rem, 6.4vw, 6.8rem);

    font-weight: 500;
    line-height: 0.84;
    letter-spacing: -0.045em;
}


.about-human__copy h2 em {
    display: block;

    color: #e8c49e;

    font-weight: 500;
}


.about-human__copy p {
    max-width: 500px;

    margin:
        0
        0
        1.25rem;

    font-size: 0.94rem;
    line-height: 1.7;

    color:
        rgba(255,255,255,.82);
}


/* =========================================================
   PERSONALITY NOTES
   ========================================================= */

.about-notes {
    padding:
        clamp(7rem, 11vw, 11rem)
        0;

    color: #11110f;
    background: #f4f0e7;
}


.about-notes__heading {
    margin-top:
        clamp(5rem, 8vw, 7rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 0.32fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 8rem);
}


.about-notes__heading h2 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(4.4rem, 7vw, 7.2rem);

    font-weight: 500;
    line-height: 0.84;
    letter-spacing: -0.05em;
}


.about-notes__heading h2 em {
    color: #d95d45;

    font-weight: 500;
}


.about-notes__heading > p {
    margin: 0 0 0.5rem;

    font-size: 0.95rem;
    line-height: 1.7;
}


.about-notes__grid {
    margin-top:
        clamp(5rem, 8vw, 7rem);

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    border-top:
        1px solid rgba(20,20,18,.40);

    border-left:
        1px solid rgba(20,20,18,.40);
}


.about-notes__grid > div {
    min-height: 210px;

    padding:
        2.4rem;

    border-right:
        1px solid rgba(20,20,18,.40);

    border-bottom:
        1px solid rgba(20,20,18,.40);
}


.about-notes__grid span {
    display: block;

    margin-bottom: 3rem;

    font-family: var(--mono);
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.09em;
}


.about-notes__grid p {
    max-width: 430px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(1.5rem, 2vw, 1.9rem);

    font-weight: 600;
    line-height: 1.2;
}


/* =========================================================
   ABOUT CLOSING CTA
   ========================================================= */

.about-last-call {
    background: #d95d45;
}


.about-last-call
.last-call__content h2 em {
    color: #11110f;
}


/* =========================================================
   WIDE-SCREEN REFINEMENT
   ========================================================= */

@media (min-width: 1500px) {

    .about-hero h1 {
        font-size: 7rem;
    }

    .about-hero__media {
        width: 51%;
    }

}


/* =========================================================
   PREMIUM ABOUT — FULL BLEED HERO
   ========================================================= */

/*
|--------------------------------------------------------------------------
| Let the purpose-built image become the entire environment.
|--------------------------------------------------------------------------
*/

.about-hero__media {
    position: absolute;
    z-index: -3;

    inset: 0;

    width: 100%;
}

.about-hero__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}


/*
|--------------------------------------------------------------------------
| Darken the calm left side for typography while allowing the
| advisor and planning desk to remain visible on the right.
|--------------------------------------------------------------------------
*/

.about-hero__shade {
    position: absolute;
    z-index: -2;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 15, 13, .86) 0%,
            rgba(8, 15, 13, .74) 30%,
            rgba(8, 15, 13, .40) 54%,
            rgba(8, 15, 13, .16) 78%,
            rgba(8, 15, 13, .18) 100%
        ),
        linear-gradient(
            180deg,
            rgba(7, 12, 11, .22) 0%,
            rgba(7, 12, 11, .04) 44%,
            rgba(7, 12, 11, .58) 100%
        );
}


/*
|--------------------------------------------------------------------------
| Main hero composition
|--------------------------------------------------------------------------
*/

.about-hero__content {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(270px, 0.34fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 7rem);
}

.about-hero h1 {
    max-width: 690px;

    font-size:
        clamp(5.2rem, 7vw, 7.2rem);

    text-shadow:
        0 2px 24px rgba(0,0,0,.18);
}

.about-hero__intro {
    margin-bottom: 0.5rem;

    background: transparent;
}

.about-hero__intro p {
    max-width: 330px;

    text-shadow:
        0 2px 16px rgba(0,0,0,.28);
}


/*
|--------------------------------------------------------------------------
| Wide screens
|--------------------------------------------------------------------------
*/

@media (min-width: 1500px) {

    .about-hero__media {
        width: 100%;
    }

    .about-hero__media img {
        object-position: center center;
    }

    .about-hero h1 {
        font-size: 7rem;
    }

}


/*
|--------------------------------------------------------------------------
| Medium desktop / tablet landscape
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .about-hero__media img {
        object-position: 56% center;
    }

    .about-hero__content {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(240px, 0.38fr);

        gap: 3rem;
    }

}


/* =========================================================
   PREMIUM ABOUT — MOBILE PASS
   ========================================================= */

@media (max-width: 760px) {


    /* =====================================================
       HERO
       ===================================================== */

    .about-hero {
        min-height: 100svh;
    }

    .about-hero__media img {
        object-position: 62% center;
    }

    .about-hero__shade {
        background:
            linear-gradient(
                90deg,
                rgba(8,15,13,.86) 0%,
                rgba(8,15,13,.67) 52%,
                rgba(8,15,13,.30) 100%
            ),
            linear-gradient(
                180deg,
                rgba(7,12,11,.18) 0%,
                rgba(7,12,11,.18) 44%,
                rgba(7,12,11,.78) 100%
            );
    }

    .about-hero__inner {
        min-height: 100svh;

        padding-top:
            calc(var(--header-height) + 3.25rem);

        padding-bottom: 2.5rem;
    }

    .about-hero__topline {
        gap: 1rem;

        padding-bottom: 1rem;

        font-size: 0.46rem;
    }

    .about-hero__content {
        grid-template-columns: 1fr;

        gap: 2.25rem;
    }

    .about-hero h1 {
        max-width: 100%;

        font-size:
            clamp(4.1rem, 16.5vw, 5.4rem);

        line-height: 0.82;
    }

    .about-hero__intro {
        width: 100%;
        max-width: 100%;

        margin: 0;

        padding-top: 1.2rem;
    }

    .about-hero__intro p {
        max-width: 24rem;

        font-size: 1.35rem;
        line-height: 1.22;
    }


    /* =====================================================
       MEET JORDAN
       ===================================================== */

    .about-intro {
        padding:
            5.5rem
            0;
    }

    .about-intro__layout {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .about-intro h2 {
        max-width: 100%;

        font-size:
            clamp(3.55rem, 14vw, 4.8rem);

        line-height: 0.87;
    }

    .about-intro__copy {
        padding-top: 0;
    }

    .about-intro__lead {
        margin-bottom: 1.5rem;

        font-size: 1.65rem;
        line-height: 1.25;
    }

    .about-intro__copy > p:not(.about-intro__lead) {
        font-size: 0.94rem;
        line-height: 1.7;
    }


    /* =====================================================
       SHORT VERSION / PROFILE
       ===================================================== */

    .about-profile {
        padding:
            5.5rem
            0;
    }

    .about-profile__grid {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        gap: 3.5rem;
    }

    .about-profile__statement h2 {
        max-width: 100%;

        font-size:
            clamp(3.45rem, 13.5vw, 4.6rem);

        line-height: 0.88;
    }

    .about-profile__details > div {
        grid-template-columns: 1fr;

        gap: 0.7rem;

        padding:
            1.6rem
            0;
    }

    .about-profile__details dt {
        font-size: 0.48rem;
    }

    .about-profile__details dd {
        max-width: 28rem;

        font-size: 0.95rem;
        line-height: 1.6;
    }


    /* =====================================================
       PLANNING PHILOSOPHY
       ===================================================== */

    .about-philosophy {
        padding:
            5.5rem
            0;
    }

    .about-philosophy__heading {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        gap: 2.25rem;
    }

    .about-philosophy__heading h2 {
        max-width: 100%;

        font-size:
            clamp(3.6rem, 14vw, 4.8rem);

        line-height: 0.87;
    }

    .about-philosophy__heading > p {
        max-width: 25rem;

        margin: 0;

        font-size: 1.45rem;
        line-height: 1.28;
    }

    .about-philosophy__lines {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        border-bottom:
            1px solid rgba(20,20,18,.42);
    }

    .about-philosophy__lines article {
        min-height: 0;

        padding:
            2rem
            0
            2.25rem;

        border-left: 0;

        border-top:
            1px solid rgba(20,20,18,.32);
    }

    .about-philosophy__lines article:first-child {
        border-top: 0;
    }

    .about-philosophy__lines h3 {
        margin:
            2.75rem
            0
            0.9rem;

        font-size: 2rem;
    }

    .about-philosophy__lines p {
        max-width: 27rem;

        font-size: 0.9rem;
    }


    /* =====================================================
       HUMAN SUPPORT PHOTO
       ===================================================== */

    .about-human,
    .about-human__content {
        min-height: 760px;
    }

    .about-human__media img {
        object-position: 43% center;
    }

    .about-human__shade {
        background:
            linear-gradient(
                180deg,
                rgba(8,17,15,.22) 0%,
                rgba(8,17,15,.48) 44%,
                rgba(8,17,15,.90) 100%
            );
    }

    .about-human__content {
        padding-top: 5rem;
        padding-bottom: 3rem;
    }

    .about-human__copy {
        width: 100%;

        margin:
            auto
            0
            0;
    }

    .about-human__copy h2 {
        max-width: 100%;

        font-size:
            clamp(3.7rem, 15vw, 5rem);

        line-height: 0.86;
    }

    .about-human__copy p {
        max-width: 28rem;
    }


    /* =====================================================
       OPINIONS / PERSONALITY NOTES
       ===================================================== */

    .about-notes {
        padding:
            5.5rem
            0;
    }

    .about-notes__heading {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        gap: 2.25rem;
    }

    .about-notes__heading h2 {
        max-width: 100%;

        font-size:
            clamp(3.65rem, 14vw, 4.9rem);

        line-height: 0.87;
    }

    .about-notes__heading > p {
        max-width: 27rem;

        margin: 0;
    }

    .about-notes__grid {
        margin-top: 4rem;

        grid-template-columns: 1fr;
    }

    .about-notes__grid > div {
        min-height: 0;

        padding:
            2.25rem
            1.5rem;
    }

    .about-notes__grid span {
        margin-bottom: 2.5rem;
    }

    .about-notes__grid p {
        max-width: 28rem;

        font-size: 1.65rem;
        line-height: 1.22;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .about-hero h1 {
        font-size:
            clamp(3.85rem, 16vw, 4.7rem);
    }

    .about-intro h2,
    .about-profile__statement h2,
    .about-philosophy__heading h2,
    .about-notes__heading h2 {
        font-size:
            clamp(3.25rem, 13.5vw, 4.25rem);
    }

}


/* =========================================================
   PREMIUM CONTACT PAGE
   ========================================================= */

.page-contact {
    background: #f4f0e7;
}


/* =========================================================
   CONTACT HERO
   ========================================================= */

.contact-hero {
    min-height:
        clamp(720px, 88vh, 880px);

    color: #11110f;
    background: #f4f0e7;
}

.contact-hero__inner {
    min-height:
        clamp(720px, 88vh, 880px);

    padding-top:
        calc(var(--header-height) + 5rem);

    padding-bottom:
        clamp(4rem, 7vw, 7rem);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-hero__topline {
    display: flex;
    justify-content: space-between;
    gap: 2rem;

    padding-bottom: 1.5rem;

    border-bottom:
        1px solid rgba(20,20,18,.38);

    font-family: var(--mono);
    font-size: 0.54rem;
    font-weight: 600;
    letter-spacing: 0.10em;
}

.contact-hero__content {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(270px, 0.30fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 8rem);
}

.contact-hero h1 {
    max-width: 820px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(5.2rem, 8vw, 8.3rem);

    font-weight: 500;
    line-height: 0.80;
    letter-spacing: -0.055em;
}

.contact-hero h1 em {
    display: block;

    color: #0d4a3e;

    font-weight: 500;
}

.contact-hero__intro {
    margin-bottom: 0.5rem;

    padding-top: 1.4rem;

    border-top:
        1px solid rgba(20,20,18,.40);
}

.contact-hero__intro > span {
    display: block;

    margin-bottom: 1.3rem;

    font-family: var(--mono);
    font-size: 0.50rem;
    font-weight: 600;
    letter-spacing: 0.09em;
}

.contact-hero__intro p {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(1.45rem, 2vw, 1.9rem);

    font-weight: 600;
    line-height: 1.2;
}


/* =========================================================
   BEFORE THE FORM
   ========================================================= */

.contact-before {
    padding:
        clamp(7rem, 11vw, 11rem)
        0;

    color: #f8f3e9;
    background: #0d302a;
}

.contact-before .editorial-label {
    color:
        rgba(255,255,255,.88);
}

.contact-before
.editorial-label span:first-child {
    border-color:
        rgba(255,255,255,.42);
}

.contact-before__layout {
    margin-top:
        clamp(5rem, 8vw, 8rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 0.31fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 8rem);
}

.contact-before h2 {
    max-width: 820px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(4.5rem, 7vw, 7.4rem);

    font-weight: 500;
    line-height: 0.84;
    letter-spacing: -0.05em;
}

.contact-before h2 em {
    display: block;

    color: #e8c49e;

    font-weight: 500;
}

.contact-before__layout > p {
    margin: 0 0 0.4rem;

    font-size: 0.96rem;
    line-height: 1.7;

    color:
        rgba(255,255,255,.78);
}


/* =========================================================
   TRIP INTAKE
   ========================================================= */

.trip-intake {
    padding:
        clamp(7rem, 11vw, 11rem)
        0;

    color: #11110f;
    background: #ebe4d6;
}

.trip-intake__heading {
    margin-top:
        clamp(5rem, 8vw, 7rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 0.30fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 8rem);
}

.trip-intake__heading h2 {
    max-width: 760px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(4.5rem, 7vw, 7.2rem);

    font-weight: 500;
    line-height: 0.84;
    letter-spacing: -0.05em;
}

.trip-intake__heading h2 em {
    display: block;

    color: #d95d45;

    font-weight: 500;
}

.trip-intake__heading > p {
    margin: 0 0 0.4rem;

    font-size: 0.95rem;
    line-height: 1.7;
}


/* =========================================================
   FORM
   ========================================================= */

.trip-form {
    margin-top:
        clamp(5rem, 9vw, 8rem);

    border-top:
        1px solid rgba(20,20,18,.42);
}

.trip-form__row {
    display: flex;
    align-items: baseline;

    gap:
        clamp(1rem, 2vw, 2rem);

    min-height: 105px;

    padding:
        1.5rem
        0;

    border-bottom:
        1px solid rgba(20,20,18,.36);
}

.trip-form__row label {
    flex: 0 0 auto;

    font-family: var(--serif);

    font-size:
        clamp(1.7rem, 2.5vw, 2.5rem);

    font-weight: 600;
    line-height: 1.1;
}

.trip-form input,
.trip-form select,
.trip-form textarea {
    min-width: 0;

    border: 0;
    border-radius: 0;
    outline: 0;

    color: #d95d45;
    background: transparent;

    font-family: var(--serif);

    font-size:
        clamp(1.8rem, 2.8vw, 2.75rem);

    font-weight: 500;
    line-height: 1.1;
}

.trip-form input {
    flex: 1;

    padding:
        0.25rem
        0.15rem;

    border-bottom:
        1px solid rgba(20,20,18,.26);
}

.trip-form input::placeholder,
.trip-form textarea::placeholder {
    color:
        rgba(217,93,69,.52);

    opacity: 1;
}

.trip-form select {
    flex: 1;

    padding:
        0.2rem
        2.5rem
        0.2rem
        0;

    border-bottom:
        1px solid rgba(20,20,18,.26);

    cursor: pointer;
}

.trip-form select option {
    color: #11110f;
    background: #f4f0e7;
}

.trip-form__suffix {
    flex: 0 0 auto;

    font-family: var(--serif);

    font-size:
        clamp(1.7rem, 2.5vw, 2.5rem);

    font-weight: 600;
}

.trip-form__row--textarea {
    display: grid;

    grid-template-columns:
        minmax(210px, 0.34fr)
        minmax(0, 1fr);

    align-items: start;

    min-height: 190px;

    padding:
        2.25rem
        0;
}

.trip-form textarea {
    width: 100%;

    min-height: 125px;

    padding:
        0.25rem
        0;

    resize: vertical;

    border-bottom:
        1px solid rgba(20,20,18,.26);
}


/* =========================================================
   FOCUS STATES
   ========================================================= */

.trip-form input:focus,
.trip-form select:focus,
.trip-form textarea:focus {
    border-bottom-color: #d95d45;
}

.trip-form input:focus-visible,
.trip-form select:focus-visible,
.trip-form textarea:focus-visible,
.trip-form button:focus-visible {
    outline:
        2px solid #0d4a3e;

    outline-offset: 4px;
}


/* =========================================================
   SUBMIT AREA
   ========================================================= */

.trip-form__submit {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: end;

    gap: 3rem;

    padding:
        clamp(3rem, 5vw, 5rem)
        0
        0;
}

.trip-form__submit > div > span {
    display: block;

    margin-bottom: 0.75rem;

    font-family: var(--mono);
    font-size: 0.50rem;
    font-weight: 600;
    letter-spacing: 0.09em;
}

.trip-form__submit p {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(1.5rem, 2vw, 1.9rem);

    font-weight: 600;
}

.trip-form__submit button {
    min-width: 290px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding:
        1.35rem
        1.5rem;

    border:
        1px solid #11110f;

    color: #11110f;
    background: transparent;

    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        color .2s ease,
        background-color .2s ease;
}

.trip-form__submit button:hover {
    color: #f8f3e9;
    background: #11110f;
}

.trip-form__submit button span {
    font-family: var(--serif);
    font-size: 1.4rem;
    line-height: 1;
}

.trip-form__status {
    min-height: 1.5rem;

    margin:
        1.5rem
        0
        0;

    font-size: 0.84rem;
}


/* =========================================================
   WHAT HAPPENS NEXT
   ========================================================= */

.contact-next {
    padding:
        clamp(7rem, 11vw, 11rem)
        0;

    color: #f8f3e9;
    background: #111513;
}

.contact-next .editorial-label {
    color:
        rgba(255,255,255,.84);
}

.contact-next
.editorial-label span:first-child {
    border-color:
        rgba(255,255,255,.40);
}

.contact-next__heading {
    margin-top:
        clamp(5rem, 8vw, 8rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 0.32fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 8rem);
}

.contact-next__heading h2 {
    max-width: 820px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(4.4rem, 7vw, 7.2rem);

    font-weight: 500;
    line-height: 0.84;
    letter-spacing: -0.05em;
}

.contact-next__heading h2 em {
    display: block;

    color: #e8c49e;

    font-weight: 500;
}

.contact-next__heading > p {
    margin: 0 0 0.5rem;

    font-size: 0.95rem;
    line-height: 1.7;

    color:
        rgba(255,255,255,.70);
}

.contact-next__steps {
    margin-top:
        clamp(5rem, 8vw, 7rem);

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid rgba(255,255,255,.28);

    border-bottom:
        1px solid rgba(255,255,255,.28);
}

.contact-next__steps article {
    min-height: 330px;

    padding:
        2rem;

    display: flex;
    flex-direction: column;

    border-left:
        1px solid rgba(255,255,255,.24);
}

.contact-next__steps article:first-child {
    border-left: 0;
}

.contact-next__steps article > span {
    font-family: var(--mono);
    font-size: 0.48rem;
    letter-spacing: 0.08em;

    color:
        rgba(255,255,255,.52);
}

.contact-next__steps h3 {
    margin:
        auto
        0
        1rem;

    font-family: var(--serif);

    font-size:
        clamp(1.9rem, 2.8vw, 2.5rem);

    font-weight: 600;
    line-height: 1;
}

.contact-next__steps p {
    max-width: 290px;

    margin: 0;

    font-size: 0.86rem;
    line-height: 1.65;

    color:
        rgba(255,255,255,.72);
}


/* =========================================================
   DIRECT EMAIL
   ========================================================= */

.contact-human {
    padding:
        clamp(7rem, 11vw, 11rem)
        0;

    color: #11110f;
    background: #f4f0e7;
}

.contact-human__layout {
    margin-top:
        clamp(5rem, 8vw, 8rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.44fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 8rem);
}

.contact-human h2 {
    max-width: 730px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(4.6rem, 7vw, 7.4rem);

    font-weight: 500;
    line-height: 0.84;
    letter-spacing: -0.05em;
}

.contact-human h2 em {
    display: block;

    color: #d95d45;

    font-weight: 500;
}

.contact-human__layout > div > p {
    margin:
        0
        0
        2rem;

    font-size: 0.94rem;
    line-height: 1.7;
}

.contact-human__email {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 2rem;

    padding:
        1.25rem
        0;

    border-top:
        1px solid rgba(20,20,18,.44);

    border-bottom:
        1px solid rgba(20,20,18,.44);

    color: inherit;

    font-family: var(--serif);

    font-size:
        clamp(1.8rem, 2.8vw, 2.6rem);

    font-weight: 600;

    text-decoration: none;
}

.contact-human__email span {
    font-size: 1.5rem;
}


/* =========================================================
   WIDE-SCREEN REFINEMENT
   ========================================================= */

@media (min-width: 1500px) {

    .contact-hero h1 {
        font-size: 7.8rem;
    }

}


/* =========================================================
   PREMIUM CONTACT — MOBILE PASS
   ========================================================= */

@media (max-width: 760px) {


    /* =====================================================
       HEADER ON LIGHT HERO
       ===================================================== */

    .page-contact .brand {
        color: #11110f;
    }

    .page-contact .nav-toggle span {
        background: #11110f;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .contact-hero,
    .contact-hero__inner {
        min-height: 100svh;
    }

    .contact-hero__inner {
        padding-top:
            calc(var(--header-height) + 3.25rem);

        padding-bottom: 3rem;
    }

    .contact-hero__topline {
        gap: 1rem;

        padding-bottom: 1rem;

        font-size: 0.46rem;
    }

    .contact-hero__content {
        grid-template-columns: 1fr;

        align-items: initial;

        gap: 2.5rem;
    }

    .contact-hero h1 {
        max-width: 100%;

        font-size:
            clamp(4.15rem, 16vw, 5.3rem);

        line-height: 0.82;
    }

    .contact-hero h1 em {
        display: block;
    }

    .contact-hero__intro {
        width: 100%;
        max-width: 100%;

        margin: 0;

        padding-top: 1.2rem;
    }

    .contact-hero__intro p {
        max-width: 24rem;

        font-size: 1.4rem;
        line-height: 1.22;
    }


    /* =====================================================
       BEFORE THE FORM
       ===================================================== */

    .contact-before {
        padding:
            5.5rem
            0;
    }

    .contact-before__layout {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        align-items: initial;

        gap: 2.5rem;
    }

    .contact-before h2 {
        max-width: 100%;

        font-size:
            clamp(3.65rem, 14vw, 4.8rem);

        line-height: 0.87;
    }

    .contact-before__layout > p {
        max-width: 27rem;

        margin: 0;

        font-size: 0.94rem;
        line-height: 1.7;
    }


    /* =====================================================
       INTAKE INTRO
       ===================================================== */

    .trip-intake {
        padding:
            5.5rem
            0;
    }

    .trip-intake__heading {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        align-items: initial;

        gap: 2.25rem;
    }

    .trip-intake__heading h2 {
        max-width: 100%;

        font-size:
            clamp(3.65rem, 14vw, 4.8rem);

        line-height: 0.87;
    }

    .trip-intake__heading > p {
        max-width: 27rem;

        margin: 0;
    }


    /* =====================================================
       FORM
       ===================================================== */

    .trip-form {
        margin-top: 4rem;
    }

    .trip-form__row,
    .trip-form__row--wide,
    .trip-form__row--textarea {
        display: grid;

        grid-template-columns: 1fr;

        align-items: initial;

        gap: 1rem;

        min-height: 0;

        padding:
            1.8rem
            0;
    }

    .trip-form__row label {
        font-size:
            clamp(1.55rem, 7vw, 1.95rem);

        line-height: 1.15;
    }

    .trip-form input,
    .trip-form select,
    .trip-form textarea {
        width: 100%;

        font-size:
            clamp(1.65rem, 7.5vw, 2.05rem);

        line-height: 1.15;
    }

    .trip-form input,
    .trip-form select {
        min-height: 3.25rem;
    }

    .trip-form select {
        padding-right: 2rem;
    }

    .trip-form textarea {
        min-height: 120px;

        padding-top: 0.5rem;
    }

    .trip-form__suffix {
        margin-top: -0.4rem;

        font-size:
            clamp(1.55rem, 7vw, 1.95rem);
    }


    /* =====================================================
       SUBMIT
       ===================================================== */

    .trip-form__submit {
        grid-template-columns: 1fr;

        align-items: initial;

        gap: 2rem;

        padding-top: 3rem;
    }

    .trip-form__submit button {
        width: 100%;
        min-width: 0;
    }


    /* =====================================================
       WHAT HAPPENS NEXT
       ===================================================== */

    .contact-next {
        padding:
            5.5rem
            0;
    }

    .contact-next__heading {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        align-items: initial;

        gap: 2.25rem;
    }

    .contact-next__heading h2 {
        max-width: 100%;

        font-size:
            clamp(3.6rem, 14vw, 4.75rem);

        line-height: 0.87;
    }

    .contact-next__heading > p {
        max-width: 27rem;

        margin: 0;
    }

    .contact-next__steps {
        margin-top: 4rem;

        grid-template-columns: 1fr;
    }

    .contact-next__steps article {
        min-height: 0;

        padding:
            2rem
            0
            2.25rem;

        border-left: 0;

        border-top:
            1px solid rgba(255,255,255,.24);
    }

    .contact-next__steps article:first-child {
        border-top: 0;
    }

    .contact-next__steps h3 {
        margin:
            2.75rem
            0
            0.9rem;

        font-size: 2rem;
    }

    .contact-next__steps p {
        max-width: 27rem;
    }


    /* =====================================================
       DIRECT EMAIL
       ===================================================== */

    .contact-human {
        padding:
            5.5rem
            0;
    }

    .contact-human__layout {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        align-items: initial;

        gap: 2.5rem;
    }

    .contact-human h2 {
        max-width: 100%;

        font-size:
            clamp(3.65rem, 14vw, 4.8rem);

        line-height: 0.87;
    }

    .contact-human__layout > div > p {
        max-width: 27rem;

        margin:
            0
            0
            2rem;
    }

    .contact-human__email {
        width: 100%;

        gap: 1rem;

        font-size:
            clamp(1.55rem, 6.8vw, 2rem);

        overflow-wrap: anywhere;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .contact-hero h1 {
        font-size:
            clamp(3.85rem, 15.5vw, 4.75rem);
    }

    .contact-before h2,
    .trip-intake__heading h2,
    .contact-next__heading h2,
    .contact-human h2 {
        font-size:
            clamp(3.25rem, 13.5vw, 4.25rem);
    }

}


/* =========================================================
   PREMIUM CONTACT — MOBILE PASS
   ========================================================= */

@media (max-width: 760px) {


    /* =====================================================
       HEADER ON LIGHT HERO
       ===================================================== */

    .page-contact .brand {
        color: #11110f;
    }

    .page-contact .nav-toggle span {
        background: #11110f;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .contact-hero,
    .contact-hero__inner {
        min-height: 100svh;
    }

    .contact-hero__inner {
        padding-top:
            calc(var(--header-height) + 3.25rem);

        padding-bottom: 3rem;
    }

    .contact-hero__topline {
        gap: 1rem;

        padding-bottom: 1rem;

        font-size: 0.46rem;
    }

    .contact-hero__content {
        grid-template-columns: 1fr;

        align-items: initial;

        gap: 2.5rem;
    }

    .contact-hero h1 {
        max-width: 100%;

        font-size:
            clamp(4.15rem, 16vw, 5.3rem);

        line-height: 0.82;
    }

    .contact-hero h1 em {
        display: block;
    }

    .contact-hero__intro {
        width: 100%;
        max-width: 100%;

        margin: 0;

        padding-top: 1.2rem;
    }

    .contact-hero__intro p {
        max-width: 24rem;

        font-size: 1.4rem;
        line-height: 1.22;
    }


    /* =====================================================
       BEFORE THE FORM
       ===================================================== */

    .contact-before {
        padding:
            5.5rem
            0;
    }

    .contact-before__layout {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        align-items: initial;

        gap: 2.5rem;
    }

    .contact-before h2 {
        max-width: 100%;

        font-size:
            clamp(3.65rem, 14vw, 4.8rem);

        line-height: 0.87;
    }

    .contact-before__layout > p {
        max-width: 27rem;

        margin: 0;

        font-size: 0.94rem;
        line-height: 1.7;
    }


    /* =====================================================
       INTAKE INTRO
       ===================================================== */

    .trip-intake {
        padding:
            5.5rem
            0;
    }

    .trip-intake__heading {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        align-items: initial;

        gap: 2.25rem;
    }

    .trip-intake__heading h2 {
        max-width: 100%;

        font-size:
            clamp(3.65rem, 14vw, 4.8rem);

        line-height: 0.87;
    }

    .trip-intake__heading > p {
        max-width: 27rem;

        margin: 0;
    }


    /* =====================================================
       FORM
       ===================================================== */

    .trip-form {
        margin-top: 4rem;
    }

    .trip-form__row,
    .trip-form__row--wide,
    .trip-form__row--textarea {
        display: grid;

        grid-template-columns: 1fr;

        align-items: initial;

        gap: 1rem;

        min-height: 0;

        padding:
            1.8rem
            0;
    }

    .trip-form__row label {
        font-size:
            clamp(1.55rem, 7vw, 1.95rem);

        line-height: 1.15;
    }

    .trip-form input,
    .trip-form select,
    .trip-form textarea {
        width: 100%;

        font-size:
            clamp(1.65rem, 7.5vw, 2.05rem);

        line-height: 1.15;
    }

    .trip-form input,
    .trip-form select {
        min-height: 3.25rem;
    }

    .trip-form select {
        padding-right: 2rem;
    }

    .trip-form textarea {
        min-height: 120px;

        padding-top: 0.5rem;
    }

    .trip-form__suffix {
        margin-top: -0.4rem;

        font-size:
            clamp(1.55rem, 7vw, 1.95rem);
    }


    /* =====================================================
       SUBMIT
       ===================================================== */

    .trip-form__submit {
        grid-template-columns: 1fr;

        align-items: initial;

        gap: 2rem;

        padding-top: 3rem;
    }

    .trip-form__submit button {
        width: 100%;
        min-width: 0;
    }


    /* =====================================================
       WHAT HAPPENS NEXT
       ===================================================== */

    .contact-next {
        padding:
            5.5rem
            0;
    }

    .contact-next__heading {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        align-items: initial;

        gap: 2.25rem;
    }

    .contact-next__heading h2 {
        max-width: 100%;

        font-size:
            clamp(3.6rem, 14vw, 4.75rem);

        line-height: 0.87;
    }

    .contact-next__heading > p {
        max-width: 27rem;

        margin: 0;
    }

    .contact-next__steps {
        margin-top: 4rem;

        grid-template-columns: 1fr;
    }

    .contact-next__steps article {
        min-height: 0;

        padding:
            2rem
            0
            2.25rem;

        border-left: 0;

        border-top:
            1px solid rgba(255,255,255,.24);
    }

    .contact-next__steps article:first-child {
        border-top: 0;
    }

    .contact-next__steps h3 {
        margin:
            2.75rem
            0
            0.9rem;

        font-size: 2rem;
    }

    .contact-next__steps p {
        max-width: 27rem;
    }


    /* =====================================================
       DIRECT EMAIL
       ===================================================== */

    .contact-human {
        padding:
            5.5rem
            0;
    }

    .contact-human__layout {
        margin-top: 4rem;

        grid-template-columns: 1fr;

        align-items: initial;

        gap: 2.5rem;
    }

    .contact-human h2 {
        max-width: 100%;

        font-size:
            clamp(3.65rem, 14vw, 4.8rem);

        line-height: 0.87;
    }

    .contact-human__layout > div > p {
        max-width: 27rem;

        margin:
            0
            0
            2rem;
    }

    .contact-human__email {
        width: 100%;

        gap: 1rem;

        font-size:
            clamp(1.55rem, 6.8vw, 2rem);

        overflow-wrap: anywhere;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .contact-hero h1 {
        font-size:
            clamp(3.85rem, 15.5vw, 4.75rem);
    }

    .contact-before h2,
    .trip-intake__heading h2,
    .contact-next__heading h2,
    .contact-human h2 {
        font-size:
            clamp(3.25rem, 13.5vw, 4.25rem);
    }

}


/* =========================================================
   PREMIUM CONTACT — PHOTOGRAPHIC HERO
   ========================================================= */

.contact-hero {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    color: #fff;
    background: #111513;
}


/*
|--------------------------------------------------------------------------
| Full-bleed hero photography
|--------------------------------------------------------------------------
*/

.contact-hero::before {
    content: "";

    position: absolute;
    z-index: -3;
    inset: 0;

    background-image:
        url("../images/contact-hero.webp");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/*
|--------------------------------------------------------------------------
| Editorial contrast treatment
|--------------------------------------------------------------------------
|
| Keep the left side dark and calm for the headline while
| allowing the destination light to remain visible on the right.
|
*/

.contact-hero::after {
    content: "";

    position: absolute;
    z-index: -2;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 14, 13, .84) 0%,
            rgba(7, 14, 13, .70) 32%,
            rgba(7, 14, 13, .40) 57%,
            rgba(7, 14, 13, .13) 82%,
            rgba(7, 14, 13, .10) 100%
        ),
        linear-gradient(
            180deg,
            rgba(6, 12, 11, .24) 0%,
            rgba(6, 12, 11, .05) 46%,
            rgba(6, 12, 11, .62) 100%
        );
}


/*
|--------------------------------------------------------------------------
| Hero typography
|--------------------------------------------------------------------------
*/

.contact-hero__topline {
    border-bottom-color:
        rgba(255,255,255,.38);
}

.contact-hero h1 {
    color: #fff;

    text-shadow:
        0 2px 24px rgba(0,0,0,.18);
}

.contact-hero h1 em {
    color: #e8c49e;
}

.contact-hero__intro {
    border-top-color:
        rgba(255,255,255,.44);
}

.contact-hero__intro p {
    color: #fff;

    text-shadow:
        0 2px 16px rgba(0,0,0,.28);
}


/*
|--------------------------------------------------------------------------
| Header while sitting over Contact hero
|--------------------------------------------------------------------------
*/

.page-contact .site-header {
    color: #fff;
}

.page-contact .site-header .brand,
.page-contact .site-header .site-nav a,
.page-contact .site-header .header-cta {
    color: #fff;
}

.page-contact .site-header .header-cta {
    border-color:
        rgba(255,255,255,.82);
}

.page-contact .site-header .nav-toggle span {
    background: #fff;
}


/*
|--------------------------------------------------------------------------
| Mobile crop
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .contact-hero::before {
        background-position:
            61% center;
    }

    .contact-hero::after {
        background:
            linear-gradient(
                180deg,
                rgba(7,14,13,.54) 0%,
                rgba(7,14,13,.34) 38%,
                rgba(7,14,13,.70) 100%
            ),
            linear-gradient(
                90deg,
                rgba(7,14,13,.60) 0%,
                rgba(7,14,13,.22) 100%
            );
    }

    .page-contact .brand {
        color: #fff;
    }

    .page-contact .nav-toggle span {
        background: #fff;
    }

}


/* =========================================================
   PREMIUM CONTACT — NEXT SECTION PHOTO
   ========================================================= */

.contact-next {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    background: #111513;
}


/*
|--------------------------------------------------------------------------
| Full-bleed photography
|--------------------------------------------------------------------------
*/

.contact-next::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0;

    background:
        url("../images/contact-next.webp")
        68% center / cover
        no-repeat;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Dark editorial treatment
|--------------------------------------------------------------------------
|
| The advisor remains visible toward the right.
| The left and lower portions stay calm enough for typography.
|
*/

.contact-next::after {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,15,13,.90) 0%,
            rgba(7,15,13,.80) 34%,
            rgba(7,15,13,.58) 57%,
            rgba(7,15,13,.34) 76%,
            rgba(7,15,13,.30) 100%
        ),
        linear-gradient(
            180deg,
            rgba(7,15,13,.22) 0%,
            rgba(7,15,13,.40) 48%,
            rgba(7,15,13,.84) 100%
        );

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Keep all existing section content above the photograph
|--------------------------------------------------------------------------
*/

.contact-next > .site-shell {
    position: relative;
    z-index: 1;
}


/*
|--------------------------------------------------------------------------
| Text legibility without creating visible cards
|--------------------------------------------------------------------------
*/

.contact-next__heading h2,
.contact-next__steps h3 {
    text-shadow:
        0 2px 20px rgba(0,0,0,.28);
}

.contact-next__heading > p,
.contact-next__steps p {
    color:
        rgba(255,255,255,.82);
}


/*
|--------------------------------------------------------------------------
| Timeline / process grid
|--------------------------------------------------------------------------
*/

.contact-next__steps {
    border-top-color:
        rgba(255,255,255,.40);

    border-bottom-color:
        rgba(255,255,255,.40);
}

.contact-next__steps article {
    border-left-color:
        rgba(255,255,255,.30);
}

.contact-next__steps article > span {
    color:
        rgba(255,255,255,.68);
}


/*
|--------------------------------------------------------------------------
| Mobile photographic crop
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .contact-next::before {
        background-position:
            72% center;
    }

    .contact-next::after {
        background:
            linear-gradient(
                180deg,
                rgba(7,15,13,.58) 0%,
                rgba(7,15,13,.68) 42%,
                rgba(7,15,13,.92) 100%
            ),
            linear-gradient(
                90deg,
                rgba(7,15,13,.66) 0%,
                rgba(7,15,13,.34) 100%
            );
    }

    .contact-next__steps article {
        border-top-color:
            rgba(255,255,255,.30);
    }

}


/* =========================================================
   PREMIUM CONTACT — HANDWRITTEN ANSWERS
   ========================================================= */

/*
|--------------------------------------------------------------------------
| Questions stay editorial.
| User answers become the handwritten layer.
|--------------------------------------------------------------------------
*/

.trip-form input,
.trip-form select,
.trip-form textarea {
    font-family:
        "Caveat",
        cursive;

    font-size:
        clamp(2.15rem, 3.25vw, 3.25rem);

    font-weight: 500;
    line-height: 1;

    letter-spacing: 0;

    color: #d95d45;
}


/*
|--------------------------------------------------------------------------
| Typed text
|--------------------------------------------------------------------------
*/

.trip-form input:not(:placeholder-shown),
.trip-form textarea:not(:placeholder-shown) {
    font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| Placeholder handwriting
|--------------------------------------------------------------------------
*/

.trip-form input::placeholder,
.trip-form textarea::placeholder {
    font-family:
        "Caveat",
        cursive;

    font-style: normal;
    font-weight: 500;

    color:
        rgba(155, 77, 59, .56);

    opacity: 1;
}


/*
|--------------------------------------------------------------------------
| Selects
|--------------------------------------------------------------------------
*/

.trip-form select {
    font-family:
        "Caveat",
        cursive;

    font-weight: 600;

    color: #d95d45;
}

.trip-form select option {
    font-family:
        "Caveat",
        cursive;

    color: #11110f;
}


/*
|--------------------------------------------------------------------------
| Give the handwriting a little breathing room
|--------------------------------------------------------------------------
*/

.trip-form input,
.trip-form select {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.trip-form textarea {
    padding-top: 0.15rem;

    line-height: 1.12;
}


/*
|--------------------------------------------------------------------------
| Number input
|--------------------------------------------------------------------------
*/

.trip-form input[type="number"] {
    font-variant-numeric: normal;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .trip-form input,
    .trip-form select,
    .trip-form textarea {
        font-size:
            clamp(2rem, 9vw, 2.6rem);

        line-height: 1.05;
    }

    .trip-form textarea {
        line-height: 1.12;
    }

}


/* =========================================================
   PREMIUM 404 PAGE
   ========================================================= */

.page-404 {
    background: #f4f0e7;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.error-hero {
    min-height: 100vh;
    padding:
        calc(var(--header-height) + 2rem)
        0
        0;
    color: #f4f0e7;
    background: #0d302a;
}

.error-hero__inner {
    min-height:
        calc(100vh - var(--header-height) - 2rem);
    display: grid;
    grid-template-rows:
        auto
        1fr
        auto;
}

.error-hero__topline {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding:
        1.15rem
        0
        1rem;
    border-top:
        1px solid rgba(244,240,231,.32);
    border-bottom:
        1px solid rgba(244,240,231,.22);
    font-family: var(--mono);
    font-size: .62rem;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:
        rgba(244,240,231,.62);
}

.error-hero__content {
    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(250px, .45fr);
    gap:
        clamp(4rem, 8vw, 9rem);
    align-items: end;
    padding:
        clamp(5rem, 10vh, 8rem)
        0
        clamp(4rem, 8vh, 6.5rem);
}

.error-hero__headline {
    position: relative;
}

.error-hero__number {
    display: block;
    margin-bottom:
        clamp(1.5rem, 3vw, 2.8rem);
    font-family: var(--mono);
    font-size: .7rem;
    line-height: 1;
    letter-spacing: .12em;
    color: #d95d45;
}

.error-hero h1 {
    max-width: 900px;
    margin: 0;
    font-family: var(--serif);
    font-size:
        clamp(5.2rem, 8vw, 9.6rem);
    font-weight: 500;
    line-height: .79;
    letter-spacing: -.065em;
    text-transform: uppercase;
}

.error-hero h1 em {
    display: inline-block;
    color: #e8c49e;
    font-weight: 500;
}

.error-hero__aside {
    align-self: end;
    padding-bottom: .8rem;
}

.error-hero__aside > span {
    display: block;
    margin-bottom: 1.25rem;
    font-family: var(--mono);
    font-size: .6rem;
    letter-spacing: .08em;
    color: #d95d45;
}

.error-hero__aside p {
    max-width: 275px;
    margin: 0;
    color:
        rgba(244,240,231,.67);
    font-size:
        clamp(.95rem, 1.15vw, 1.1rem);
    line-height: 1.7;
}

.error-hero__return {
    display: grid;
    grid-template-columns:
        1fr
        auto;
    align-items: end;
    gap: 3rem;
    padding:
        1.5rem
        0
        1.7rem;
    border-top:
        1px solid rgba(244,240,231,.26);
}

.error-hero__return > div > span {
    display: block;
    margin-bottom: .45rem;
    font-family: var(--mono);
    font-size: .58rem;
    letter-spacing: .09em;
    color:
        rgba(244,240,231,.46);
}

.error-hero__return p {
    margin: 0;
    font-family: var(--serif);
    font-size:
        clamp(1.4rem, 2vw, 2rem);
    line-height: 1.1;
}

.error-hero__home {
    display: inline-flex;
    align-items: center;
    gap:
        clamp(1.2rem, 3vw, 3rem);
    color: #f4f0e7;
    font-family: var(--serif);
    font-size:
        clamp(1.65rem, 2.4vw, 2.7rem);
    line-height: 1;
}

.error-hero__home span {
    color: #d95d45;
    transition:
        transform 180ms var(--ease);
}

.error-hero__home:hover span {
    transform: translateX(8px);
}


/* ---------------------------------------------------------
   ALTERNATE ROUTES
   --------------------------------------------------------- */

.error-routes {
    padding:
        clamp(6rem, 10vw, 10rem)
        0;
    color: #111513;
    background: #f4f0e7;
}

.error-routes__heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(260px, .45fr);
    gap:
        clamp(4rem, 8vw, 9rem);
    align-items: end;
    margin:
        clamp(3rem, 6vw, 5rem)
        0
        clamp(4rem, 7vw, 6rem);
}

.error-routes__heading h2 {
    max-width: 820px;
    margin: 0;
    font-family: var(--serif);
    font-size:
        clamp(4.6rem, 7vw, 8rem);
    font-weight: 500;
    line-height: .82;
    letter-spacing: -.06em;
}

.error-routes__heading h2 em {
    color: #d95d45;
    font-weight: 500;
}

.error-routes__heading p {
    max-width: 300px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color:
        rgba(17,21,19,.64);
}

.error-routes__grid {
    border-top:
        1px solid rgba(17,21,19,.28);
}

.error-route {
    display: grid;
    grid-template-columns:
        80px
        minmax(0, 1fr)
        auto;
    gap:
        clamp(2rem, 5vw, 5rem);
    align-items: center;
    min-height: 150px;
    padding:
        1.8rem
        0;
    border-bottom:
        1px solid rgba(17,21,19,.22);
    color: #111513;
    transition:
        padding-left 200ms var(--ease),
        background-color 200ms var(--ease);
}

.error-route > span:first-child {
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .08em;
    color:
        rgba(17,21,19,.44);
}

.error-route h3 {
    margin:
        0
        0
        .35rem;
    font-family: var(--serif);
    font-size:
        clamp(2.1rem, 3vw, 3.6rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.04em;
}

.error-route p {
    max-width: 520px;
    margin: 0;
    color:
        rgba(17,21,19,.58);
    font-size: .9rem;
    line-height: 1.6;
}

.error-route > span:last-child {
    font-size: 1.25rem;
    color: #d95d45;
    transition:
        transform 200ms var(--ease);
}

.error-route:hover {
    padding-left: 1rem;
}

.error-route:hover > span:last-child {
    transform:
        translate(5px, -5px);
}


/* ---------------------------------------------------------
   FINAL LINE
   --------------------------------------------------------- */

.error-final {
    color: #111513;
    background: #e8c49e;
}

.error-final__inner {
    display: grid;
    grid-template-columns:
        .55fr
        1fr
        auto;
    gap:
        clamp(2rem, 6vw, 6rem);
    align-items: center;
    padding:
        clamp(3rem, 5vw, 4.5rem)
        0;
}

.error-final__inner > span {
    font-family: var(--mono);
    font-size: .62rem;
    line-height: 1.5;
    letter-spacing: .08em;
}

.error-final__inner p {
    margin: 0;
    font-family: var(--serif);
    font-size:
        clamp(1.5rem, 2.3vw, 2.6rem);
    line-height: 1.05;
}

.error-final__inner a {
    display: inline-flex;
    align-items: center;
    gap: 1.4rem;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: .67rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.error-final__inner a span {
    color: #d95d45;
    font-size: 1rem;
    transition:
        transform 180ms var(--ease);
}

.error-final__inner a:hover span {
    transform: translateX(6px);
}


/* ---------------------------------------------------------
   404 — WIDE SCREEN CONTROL
   --------------------------------------------------------- */

@media (min-width: 1700px) {

    .error-hero h1 {
        font-size: 8.9rem;
    }

    .error-routes__heading h2 {
        font-size: 7.4rem;
    }

}



/* =========================================================
   PREMIUM 404 — GIANT HERO NUMBER
   ========================================================= */

.error-hero {
    position: relative;
    overflow: hidden;
}

.error-hero__giant-number {
    position: absolute;
    z-index: 0;

    top:
        clamp(
            7rem,
            11vh,
            10rem
        );

    left: 50%;

    transform:
        translateX(-50%);

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            19rem,
            35vw,
            38rem
        );

    font-weight: 600;
    line-height: .72;

    letter-spacing: -.11em;

    color:
        rgba(
            244,
            240,
            231,
            .055
        );

    -webkit-text-stroke:
        1px
        rgba(
            244,
            240,
            231,
            .14
        );

    white-space: nowrap;

    pointer-events: none;
    user-select: none;
}

.error-hero__inner {
    position: relative;
    z-index: 1;
}


/* Give the foreground copy a little more separation
   from the oversized background number. */

.error-hero__content {
    position: relative;
    z-index: 2;
}

.error-hero__headline,
.error-hero__aside,
.error-hero__return {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   GIANT 404 — VERY WIDE
   --------------------------------------------------------- */

@media (min-width: 1700px) {

    .error-hero__giant-number {
        font-size: 35rem;
        top: 8rem;
    }

}



/* =========================================================
   PREMIUM 404 — TRAVEL DETOUR DECOR
   ========================================================= */

.error-hero__detour-decor {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}


/* ---------------------------------------------------------
   DETOUR SIGN
   --------------------------------------------------------- */

.error-hero__detour-sign {
    position: absolute;
    top:
        clamp(
            13rem,
            24vh,
            18rem
        );
    right:
        max(
            calc((100vw - 1200px) / 2),
            2rem
        );

    width:
        clamp(
            8.5rem,
            11vw,
            11.5rem
        );

    aspect-ratio: 1.7 / 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #111513;
    background: #d95d45;

    border:
        1px solid
        rgba(244,240,231,.42);

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.12);

    transform:
        rotate(4deg);

    transform-origin: center;
}

.error-hero__detour-sign::before {
    content: "";

    position: absolute;
    inset: .4rem;

    border:
        1px solid
        rgba(17,21,19,.42);
}

.error-hero__detour-sign::after {
    content: "→";

    position: absolute;
    right: .9rem;
    bottom: .55rem;

    font-family: var(--sans);
    font-size: 1.1rem;
    line-height: 1;
}

.error-hero__detour-sign span {
    position: relative;
    z-index: 1;

    font-family: var(--mono);
    font-size:
        clamp(
            .85rem,
            1.1vw,
            1.05rem
        );
    font-weight: 600;

    line-height: 1;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.error-hero__detour-sign small {
    position: relative;
    z-index: 1;

    display: block;

    margin-top: .55rem;

    font-family: var(--mono);
    font-size: .52rem;

    letter-spacing: .12em;

    opacity: .64;
}


/* ---------------------------------------------------------
   REROUTED TRAVEL PATH
   --------------------------------------------------------- */

.error-hero__route {
    position: absolute;

    top:
        clamp(
            23rem,
            42vh,
            31rem
        );

    left:
        max(
            calc((100vw - 1200px) / 2 + 29rem),
            34%
        );

    width:
        min(
            37vw,
            470px
        );

    height: 105px;
}

.error-route-origin {
    position: absolute;

    left: 0;
    top: 67px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #e8c49e;

    box-shadow:
        0 0 0 4px
        rgba(232,196,158,.10);
}

.error-route-line {
    position: absolute;

    height: 0;

    border-top:
        1px dashed
        rgba(232,196,158,.46);
}

.error-route-line--first {
    left: 12px;
    top: 70px;

    width: 39%;
}

.error-route-turn {
    position: absolute;

    left: 39%;
    top: 18px;

    width: 78px;
    height: 53px;

    border-top:
        1px dashed
        rgba(217,93,69,.72);

    border-right:
        1px dashed
        rgba(217,93,69,.72);

    border-top-right-radius:
        48px;
}

.error-route-line--second {
    left:
        calc(39% + 78px);

    top: 18px;

    width:
        calc(61% - 100px);

    border-color:
        rgba(217,93,69,.72);
}

.error-route-arrow {
    position: absolute;

    right: 0;
    top: 13px;

    width: 11px;
    height: 11px;

    border-top:
        1px solid
        rgba(217,93,69,.92);

    border-right:
        1px solid
        rgba(217,93,69,.92);

    transform:
        rotate(45deg);
}


/* ---------------------------------------------------------
   ROADWORK STRIPE
   --------------------------------------------------------- */

.error-hero__roadwork {
    position: absolute;

    right:
        max(
            calc((100vw - 1200px) / 2),
            2rem
        );

    bottom:
        clamp(
            7.5rem,
            13vh,
            10rem
        );

    display: flex;

    width:
        clamp(
            8rem,
            12vw,
            11rem
        );

    height: .55rem;

    overflow: hidden;

    border:
        1px solid
        rgba(217,93,69,.34);

    opacity: .58;

    transform:
        rotate(-3deg);
}

.error-hero__roadwork span {
    flex: 1;

    background:
        rgba(217,93,69,.65);

    transform:
        skewX(-25deg);

    margin:
        0
        .22rem;
}


/* ---------------------------------------------------------
   KEEP DECOR BEHIND CONTENT
   --------------------------------------------------------- */

.error-hero__inner {
    position: relative;
    z-index: 3;
}

.error-hero__giant-number {
    z-index: 0;
}

.error-hero__detour-decor {
    z-index: 1;
}


/* ---------------------------------------------------------
   404 DETOUR — MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .error-hero__detour-sign {
        top: 10rem;
        right: 1rem;

        width: 6.6rem;

        transform:
            rotate(4deg);
    }

    .error-hero__detour-sign span {
        font-size: .7rem;
    }

    .error-hero__detour-sign small {
        margin-top: .35rem;
        font-size: .42rem;
    }

    .error-hero__detour-sign::after {
        right: .65rem;
        bottom: .4rem;
        font-size: .8rem;
    }


    .error-hero__route {
        display: none;
    }


    .error-hero__roadwork {
        right: 1rem;
        bottom: 6rem;
        width: 6.5rem;
        height: .42rem;
    }

}



/* =========================================================
   PREMIUM 404 — MOBILE FINAL PASS
   ========================================================= */

@media (max-width: 760px) {

    .error-hero {
        min-height: auto;
        padding-top:
            calc(var(--header-height) + 1rem);
    }


    .error-hero__inner {
        min-height: auto;
        display: block;
    }


    .error-hero__topline {
        gap: 1rem;
        padding:
            1rem
            0;
        font-size: .52rem;
    }


    /* Giant background number */

    .error-hero__giant-number {
        top: 9.4rem;
        left: 50%;

        transform:
            translateX(-50%);

        font-size:
            clamp(
                10rem,
                48vw,
                13.5rem
            );

        line-height: .72;

        opacity: .9;
    }


    /* Detour sign */

    .error-hero__detour-sign {
        top: 9.8rem;
        right: .8rem;

        width: 5.7rem;

        transform:
            rotate(5deg);
    }


    /* Main copy now stacks */

    .error-hero__content {
        display: block;

        padding:
            8.5rem
            0
            3rem;
    }


    .error-hero__headline {
        width: 100%;
    }


    .error-hero__number {
        margin-bottom: 1.6rem;
        font-size: .62rem;
    }


    .error-hero h1 {
        width: 100%;
        max-width: none;

        font-size:
            clamp(
                4.15rem,
                19vw,
                5.8rem
            );

        line-height: .82;

        letter-spacing: -.055em;
    }


    .error-hero h1 em {
        display: inline;
    }


    /* Location copy moves UNDER headline */

    .error-hero__aside {
        width: 100%;
        max-width: none;

        margin-top: 3rem;
        padding:
            1.5rem
            0
            0;

        border-top:
            1px solid
            rgba(244,240,231,.2);
    }


    .error-hero__aside > span {
        margin-bottom: .9rem;
        font-size: .52rem;
    }


    .error-hero__aside p {
        max-width: 19rem;

        font-size: .95rem;
        line-height: 1.65;
    }


    /* Bottom return row */

    .error-hero__return {
        grid-template-columns: 1fr;
        gap: 2rem;

        padding:
            1.5rem
            0
            2rem;
    }


    .error-hero__return p {
        font-size: 1.4rem;
    }


    .error-hero__home {
        justify-self: start;

        font-size:
            clamp(
                1.8rem,
                8vw,
                2.35rem
            );
    }


    /* Remove secondary clutter on mobile */

    .error-hero__route,
    .error-hero__roadwork {
        display: none;
    }

}



/* =========================================================
   PREMIUM 404 — MOBILE CLEANUP PASS
   ========================================================= */

@media (max-width: 760px) {

    /* -----------------------------------------------------
       HERO HEADLINE — KEEP LONG WORDS INSIDE VIEWPORT
       ----------------------------------------------------- */

    .error-hero h1 {
        width: 100%;
        max-width: 100%;

        font-size:
            clamp(
                3.65rem,
                16vw,
                5rem
            );

        line-height: .84;
        letter-spacing: -.055em;

        overflow: visible;
        word-break: normal;
        overflow-wrap: normal;
    }

    .error-hero h1 em {
        display: block;
        max-width: 100%;
    }


    /* -----------------------------------------------------
       ALTERNATE ROUTES — STACK HEADING PROPERLY
       ----------------------------------------------------- */

    .error-routes {
        padding:
            5rem
            0;
    }

    .error-routes__heading {
        display: block;

        margin:
            3rem
            0
            3.5rem;
    }

    .error-routes__heading h2 {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-size:
            clamp(
                3.8rem,
                16vw,
                5rem
            );

        line-height: .84;
        letter-spacing: -.055em;
    }

    .error-routes__heading h2 em {
        display: block;
    }

    .error-routes__heading p {
        width: 100%;
        max-width: 19rem;

        margin:
            1.75rem
            0
            0;

        font-size: .95rem;
        line-height: 1.65;
    }


    /* -----------------------------------------------------
       ROUTE ROWS — BETTER MOBILE PROPORTIONS
       ----------------------------------------------------- */

    .error-route {
        grid-template-columns:
            32px
            minmax(0, 1fr)
            auto;

        gap:
            1rem;

        min-height: 0;

        padding:
            2rem
            0;
    }

    .error-route h3 {
        margin-bottom: .5rem;

        font-size:
            clamp(
                2rem,
                9vw,
                2.7rem
            );
    }

    .error-route p {
        max-width: none;

        font-size: .88rem;
        line-height: 1.6;
    }

    .error-route > span:last-child {
        align-self: center;
    }

}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 390px) {

    .error-hero h1 {
        font-size:
            clamp(
                3.35rem,
                15.5vw,
                4.25rem
            );
    }

    .error-routes__heading h2 {
        font-size:
            clamp(
                3.45rem,
                15.5vw,
                4.3rem
            );
    }

}