/* =========================================================
   DockFlow Home V2
   Shortcode: [df_home_page]
   Product-led marketing homepage, 2026
   ========================================================= */

:root {
    --df-home-bg: #050806;
    --df-home-bg-soft: #09100b;
    --df-home-panel: #0d130f;
    --df-home-panel-2: #111813;
    --df-home-panel-3: #141b16;
    --df-home-text: #f5f8f5;
    --df-home-muted: #98a29a;
    --df-home-muted-2: #737d75;
    --df-home-line: rgba(255, 255, 255, 0.10);
    --df-home-line-strong: rgba(255, 255, 255, 0.16);
    --df-home-green: #20df72;
    --df-home-accent: #20df72;
    --df-home-white: #f5f8f5;
    --df-home-black: #101411;
    --df-home-body-white: rgba(245, 248, 245, 0.66);
    --df-home-body-black: rgba(16, 20, 17, 0.64);
    --df-home-green-soft: #7ef2a5;
    --df-home-type-eyebrow-size: 12px;
    --df-home-type-eyebrow-weight: 750;
    --df-home-type-eyebrow-tracking: 0.16em;
    --df-home-green-deep: #0d7f42;
    --df-home-max: 1540px;
    --df-home-content-max: 1400px;
    --df-home-radius-xl: 40px;
    --df-home-radius-lg: 28px;
    --df-home-radius-md: 20px;
    --df-home-shadow: 0 40px 100px rgba(0, 0, 0, 0.42);
}

body.home {
    background: var(--df-home-bg);
}

/* Homepage host reset: the shortcode owns the full visual canvas. */
body.home,
body:has(.df-home-v2) #page-container,
body:has(.df-home-v2) #et-main-area,
body:has(.df-home-v2) #main-content,
body:has(.df-home-v2) .et-l--body,
body:has(.df-home-v2) .et-l--body > .et_builder_inner_content {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--df-home-bg) !important;
}

body:has(.df-home-v2) #main-content {
    min-height: 0 !important;
}

.et-l--body .et_pb_section:has(.df-home-v2),
.et-l--body .et_pb_row:has(.df-home-v2),
.et-l--body .et_pb_column:has(.df-home-v2),
.et-l--body .et_pb_module:has(.df-home-v2),
.et-l--body .et_pb_code:has(.df-home-v2),
.et-l--body .et_pb_code_inner:has(.df-home-v2) {
    border: 0 !important;
    background: transparent !important;
}

/* Escape the default Divi content width for the single-code-module homepage. */
.et-l--body .et_pb_section:has(.df-home-v2),
.et-l--body .et_pb_row:has(.df-home-v2),
.et-l--body .et_pb_column:has(.df-home-v2),
.et-l--body .et_pb_module:has(.df-home-v2),
.et-l--body .et_pb_code:has(.df-home-v2),
.et-l--body .et_pb_code_inner:has(.df-home-v2) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sticky-safe host chain: Divi must not become the vertical scroll container. */
body:has(.df-home-v2) #page-container,
body:has(.df-home-v2) #et-main-area,
body:has(.df-home-v2) #main-content,
body:has(.df-home-v2) .et-l--body,
body:has(.df-home-v2) .et-l--body > .et_builder_inner_content,
.et-l--body .et_pb_section:has(.df-home-v2),
.et-l--body .et_pb_row:has(.df-home-v2),
.et-l--body .et_pb_column:has(.df-home-v2),
.et-l--body .et_pb_module:has(.df-home-v2),
.et-l--body .et_pb_code:has(.df-home-v2),
.et-l--body .et_pb_code_inner:has(.df-home-v2) {
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
}

html:has(.df-home-v2),
body:has(.df-home-v2) {
    overflow-x: clip;
}

.df-home-v2,
.df-home-v2 * {
    box-sizing: border-box;
}

.df-home-v2 {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    overflow: visible;
    background: var(--df-home-bg);
    color: var(--df-home-text);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.df-home-v2 img {
    display: block;
    max-width: 100%;
}

.df-home-v2 a,
.df-home-v2 button {
    font: inherit;
}

.df-home-v2 a:focus-visible,
.df-home-v2 button:focus-visible {
    outline: 2px solid var(--df-home-green);
    outline-offset: 4px;
}

.df-home-v2__section-shell,
.df-home-v2__cta-inner {
    width: min(calc(100% - 64px), var(--df-home-content-max));
    margin: 0 auto;
}

/* The cinematic hero keeps its wider stage; normal homepage content shares one
   calmer reading width from this point onward. */
.df-home-v2__hero-inner {
    width: min(calc(100% - 64px), var(--df-home-max));
    margin: 0 auto;
}

/* Shared homepage typography colors.
   Size/layout stay owned by the typography role; sections choose only a semantic color. */
.df-home-v2__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    color: var(--df-home-green-soft);
    font-size: var(--df-home-type-eyebrow-size);
    font-weight: var(--df-home-type-eyebrow-weight);
    letter-spacing: var(--df-home-type-eyebrow-tracking);
    line-height: 1.2;
    text-transform: uppercase;
}

.df-home-v2__eyebrow > span {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 999px;
    background: var(--df-home-accent);
    box-shadow: 0 0 0 5px rgba(32, 223, 114, 0.08);
}

.df-home-v2__eyebrow--white { color: var(--df-home-white); }
.df-home-v2__eyebrow--black { color: var(--df-home-black); }
.df-home-v2__eyebrow--green { color: var(--df-home-accent); }

.df-home-v2__title {
    --df-home-title-color: var(--df-home-white);
    color: var(--df-home-title-color);
    text-wrap: balance;
}
.df-home-v2__title--white { --df-home-title-color: var(--df-home-white); }
.df-home-v2__title--black { --df-home-title-color: var(--df-home-black); }
.df-home-v2__title--green { --df-home-title-color: var(--df-home-accent); }

/* Shared dual-tone title variants. The parent owns the readable base color;
   .df-home-v2__title-accent supplies the DockFlow accent phrase. */
.df-home-v2__title--black-green { --df-home-title-color: var(--df-home-black); }
.df-home-v2__title--white-green { --df-home-title-color: var(--df-home-white); }
.df-home-v2__title--black-green .df-home-v2__title-accent,
.df-home-v2__title--white-green .df-home-v2__title-accent {
    color: var(--df-home-accent);
}

.df-home-v2__body { color: var(--df-home-body-white); }
.df-home-v2__body--white { color: var(--df-home-body-white); }
.df-home-v2__body--black { color: var(--df-home-body-black); }
.df-home-v2__body--green { color: var(--df-home-accent); }

.df-home-v2__micro-label {
    margin: 0 0 12px;
    color: var(--df-home-green-soft);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.df-home-v2__button {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: var(--df-home-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 720;
    letter-spacing: -0.025em;
    line-height: 1;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.df-home-v2__button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 180ms ease;
}

.df-home-v2__button--primary {
    background: var(--df-home-green);
    color: #041008;
    box-shadow: 0 16px 38px rgba(32, 223, 114, 0.15);
}

.df-home-v2__button--quiet {
    border-color: var(--df-home-line-strong);
    background: rgba(255, 255, 255, 0.035);
    color: rgba(245, 248, 245, 0.88);
}

@media (hover: hover) and (pointer: fine) {
    .df-home-v2__button:hover {
        transform: translateY(-2px);
    }

    .df-home-v2__button--primary:hover {
        box-shadow: 0 20px 46px rgba(32, 223, 114, 0.22);
    }

    .df-home-v2__button--quiet:hover {
        border-color: rgba(255, 255, 255, 0.24);
        background: rgba(255, 255, 255, 0.065);
    }

    .df-home-v2__button:hover svg {
        transform: translateX(2px);
    }
}

/* Hero */
.df-home-v2__hero-sticky {
    position: relative;
}

.df-home-v2__hero-detail-fragment,
.df-home-v2__guest-plane {
    display: none;
}

.df-home-v2__hero {
    position: relative;
    min-height: 980px;
    padding: 176px 0 90px;
    isolation: isolate;
}

.df-home-v2__ambient {
    position: absolute;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(24, 120, 61, 0.10), transparent 38%),
        linear-gradient(180deg, #040605 0%, #050806 56%, #040605 100%);
}

.df-home-v2__ambient::before {
    content: "";
    position: absolute;
    inset: 18% 8% 0;
    pointer-events: none;
    opacity: .72;
    filter: blur(44px);
    background: radial-gradient(ellipse at center, rgba(255,255,255,.025), transparent 64%);
}

.df-home-v2__hero-copy {
    position: relative;
    z-index: 3;
    max-width: 980px;
    margin: 0 auto 72px;
    text-align: center;
}

.df-home-v2__hero-copy h1 {
    margin: 0;
    color: var(--df-home-text);
    font-size: clamp(68px, 7.5vw, 132px);
    font-weight: 760;
    letter-spacing: -0.076em;
    line-height: 0.86;
}

.df-home-v2__hero-copy h1 em {
    color: #8d918e;
    font-style: normal;
    font-weight: 640;
}

.df-home-v2__lede {
    max-width: 730px;
    margin: 32px auto 0;
    color: var(--df-home-muted);
    font-size: clamp(18px, 1.5vw, 23px);
    font-weight: 430;
    letter-spacing: -0.03em;
    line-height: 1.5;
}

.df-home-v2__hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
}

.df-home-v2__audience {
    margin: 28px 0 0;
    color: rgba(245, 248, 245, 0.42);
    font-size: 12px;
    font-weight: 620;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.df-home-v2__hero-context {
    display: none;
}

.df-home-v2__scroll-cue {
    display: none;
}

.df-home-v2__hero-stage {
    position: relative;
    z-index: 2;
    width: min(100%, 1680px);
    margin: 0 auto;
    min-height: 690px;
}

.df-home-v2__hero-product-plane {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.df-home-v2__operator-window {
    position: relative;
    width: min(94%, 1580px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 24px;
    background: #070a08;
    box-shadow: 0 54px 150px rgba(0, 0, 0, 0.62);
    transform: perspective(1700px) rotateX(.8deg);
    transform-origin: center top;
}

.df-home-v2__operator-window::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 31%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(4, 6, 5, 0.82));
}


.df-home-v2__operator-window > img {
    width: 100%;
    height: auto;
}

.df-home-v2__hero-phone {
    display: none;
}

.df-home-v2__phone-shell,
.df-home-v2__guest-phone,
.df-home-v2__booking-device {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background: #050806;
    box-shadow: 0 36px 90px rgba(0,0,0,.54);
}

.df-home-v2__phone-shell {
    border-radius: 20px;
}

.df-home-v2__phone-shell img {
    width: 100%;
}

.df-home-v2__phone-label {
    position: absolute;
    right: 20px;
    bottom: -22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: rgba(6, 10, 7, 0.88);
    color: rgba(245,248,245,.68);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-size: 11px;
    font-weight: 680;
    white-space: nowrap;
}

.df-home-v2__phone-label i {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--df-home-green);
    box-shadow: 0 0 0 4px rgba(32,223,114,.06);
}


/* Shared section headings */
.df-home-v2__story,
.df-home-v2__booking,
.df-home-v2__guest,
.df-home-v2__system {
    position: relative;
    padding: 150px 0;
}

.df-home-v2__story {
    scroll-margin-top: 86px;
    background:
        radial-gradient(circle at 76% 28%, rgba(32,223,114,.05), transparent 28%),
        var(--df-home-bg);
}

.df-home-v2__booking {
    border-top: 1px solid rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.05);
    background: #070b08;
}

.df-home-v2__guest {
    isolation: isolate;
    overflow: clip;
    background: #050806;
}

.df-home-v2__guest::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, #050806 0%, rgba(5,8,6,.985) 17%, rgba(5,8,6,.84) 32%, rgba(5,8,6,.42) 52%, rgba(5,8,6,.26) 68%, rgba(5,8,6,.64) 85%, #050806 100%),
        linear-gradient(180deg, rgba(5,8,6,.88) 0%, rgba(5,8,6,.22) 16%, rgba(5,8,6,.18) 56%, rgba(5,8,6,.90) 100%),
        var(--df-guest-bleed-image) 72% 44% / cover no-repeat;
    opacity: .58;
    filter: saturate(.90) brightness(.70) contrast(1.00);
}

.df-home-v2__guest::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5,8,6,.03) 0%, rgba(5,8,6,.11) 100%);
}

.df-home-v2__system {
    border-top: 1px solid rgba(255,255,255,.05);
    background: #070b08;
}

.df-home-v2__guest > .df-home-v2__section-shell {
    position: relative;
    z-index: 1;
}

.df-home-v2__section-head {
    max-width: 780px;
}

.df-home-v2__section-head--center {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.df-home-v2__section-head h2,
.df-home-v2__manifesto-copy h2,
.df-home-v2__cta h2 {
    margin: 0;
    color: var(--df-home-title-color, var(--df-home-text));
    font-size: clamp(54px, 5.5vw, 92px);
    font-weight: 730;
    letter-spacing: -0.068em;
    line-height: .94;
}

.df-home-v2__section-head > p:last-child,
.df-home-v2__manifesto-copy > p:last-child {
    max-width: 650px;
    margin: 28px 0 0;
    color: var(--df-home-muted);
    font-size: clamp(17px, 1.3vw, 20px);
    letter-spacing: -0.025em;
    line-height: 1.58;
}

.df-home-v2__section-head--center > p:last-child {
    margin-left: auto;
    margin-right: auto;
}

/* Operator story */
.df-home-v2__operator-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, .55fr);
    gap: 64px;
    align-items: center;
    margin-top: 82px;
}

.df-home-v2__operator-feature-media {
    position: relative;
    aspect-ratio: 1.55;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 30px;
    background: #0a0d0b;
    box-shadow: var(--df-home-shadow);
}

.df-home-v2__operator-feature-media::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    border-radius: inherit;
}

.df-home-v2__operator-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 0;
}

.df-home-v2__operator-feature-copy {
    position: relative;
}

.df-home-v2__number {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    border: 1px solid rgba(32,223,114,.24);
    border-radius: 14px;
    background: rgba(32,223,114,.07);
    color: var(--df-home-green-soft);
    font-size: 12px;
    font-weight: 800;
}

.df-home-v2__operator-feature-copy h3,
.df-home-v2__booking-copy h3 {
    margin: 0;
    color: var(--df-home-text);
    font-size: clamp(32px, 3.2vw, 52px);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 1.02;
}

.df-home-v2__operator-feature-copy > p:not(.df-home-v2__micro-label),
.df-home-v2__booking-copy article > p:last-child {
    margin: 22px 0 0;
    color: var(--df-home-muted);
    font-size: 17px;
    letter-spacing: -0.02em;
    line-height: 1.6;
}

.df-home-v2__operator-feature-copy ul {
    display: grid;
    gap: 0;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255,255,255,.08);
}

.df-home-v2__operator-feature-copy li {
    position: relative;
    padding: 17px 0 17px 26px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgba(245,248,245,.72);
    font-size: 13px;
    font-weight: 620;
}

.df-home-v2__operator-feature-copy li::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 99px;
    border: 2px solid var(--df-home-green);
}

/* Booking story */
.df-home-v2__booking-showcase {
    max-width: 1300px;
    margin: 76px auto 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 34px;
    background:
        radial-gradient(circle at 70% 30%, rgba(32,223,114,.06), transparent 32%),
        var(--df-home-panel);
    box-shadow: var(--df-home-shadow);
}

.df-home-v2__booking-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.df-home-v2__booking-tabs button {
    min-height: 72px;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.07);
    background: transparent;
    color: rgba(245,248,245,.44);
    cursor: pointer;
    font-size: 13px;
    font-weight: 680;
    letter-spacing: -0.02em;
    transition: background 180ms ease, color 180ms ease;
}

.df-home-v2__booking-tabs button:last-child {
    border-right: 0;
}

.df-home-v2__booking-tabs button span {
    margin-right: 10px;
    color: rgba(32,223,114,.58);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.df-home-v2__booking-tabs button[aria-selected="true"] {
    background: rgba(255,255,255,.035);
    color: var(--df-home-text);
}

.df-home-v2__booking-stage {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(360px, .56fr);
    gap: 70px;
    min-height: 760px;
    align-items: center;
    padding: 70px 7%;
}

.df-home-v2__booking-copy {
    max-width: 520px;
}

.df-home-v2__booking-copy article {
    display: none;
}

.df-home-v2__booking-copy article.is-active {
    display: block;
    animation: dfHomeCopyIn 340ms ease both;
}

@keyframes dfHomeCopyIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.df-home-v2__booking-device {
    position: relative;
    width: min(100%, 382px);
    margin-left: auto;
    border-radius: 38px;
}

.df-home-v2__booking-screen {
    width: 100%;
}

.df-home-v2__booking-screen.is-active {
    animation: dfHomeScreenIn 320ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes dfHomeScreenIn {
    from { opacity: .2; transform: scale(.985); }
    to { opacity: 1; transform: scale(1); }
}

.df-home-v2__booking-screen img {
    width: 100%;
}

/* Guest experience */
.df-home-v2__guest-grid {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(560px, 1fr);
    gap: 72px;
    align-items: center;
}

.df-home-v2__guest .df-home-v2__eyebrow {
    font-weight: 700;
}

.df-home-v2__guest-points {
    display: grid;
    margin-top: 44px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.df-home-v2__guest-points > div {
    display: grid;
    grid-template-columns: 90px minmax(0,1fr);
    gap: 18px;
    padding: 19px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.df-home-v2__guest-points strong {
    color: var(--df-home-green-soft);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.df-home-v2__guest-points span {
    color: rgba(245,248,245,.68);
    font-size: 14px;
}

.df-home-v2__guest-phones {
    position: relative;
    isolation: isolate;
    min-height: 570px;
    transform: translateY(-8px);
}

.df-home-v2__guest-phone {
    position: absolute;
    width: clamp(214px, 16.6vw, 258px);
    margin: 0;
    overflow: hidden;
    border-radius: 32px;
    background: #050806;
    box-shadow:
        0 38px 92px rgba(0,0,0,.62),
        0 0 0 1px rgba(255,255,255,.035);
}

.df-home-v2__guest-phone img {
    display: block;
    width: 100%;
    height: auto;
}

.df-home-v2__guest-phone--back {
    top: 8px;
    left: 10%;
    z-index: 3;
    transform: rotate(-5.2deg);
    opacity: .98;
}

.df-home-v2__guest-phone--front {
    top: 24px;
    right: 7%;
    z-index: 4;
    transform: rotate(5.2deg);
    box-shadow:
        0 42px 105px rgba(0,0,0,.70),
        0 0 0 1px rgba(255,255,255,.05);
}

/* Keep only one photographic background in the whole section. The phone group gets
   no second image layer, only a very soft shared vignette for depth. */
.df-home-v2__guest-phones::before {
    content: none;
}

.df-home-v2__guest-phones::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 74% 66% at 56% 42%, transparent 0%, transparent 46%, rgba(5,8,6,.08) 64%, rgba(5,8,6,.24) 84%, rgba(5,8,6,.42) 100%);
}

/* System grid */
.df-home-v2__system-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 72px;
}

.df-home-v2__system-grid article {
    min-height: 330px;
    padding: 34px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.012));
}

.df-home-v2__system-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 58px;
    border: 1px solid rgba(32,223,114,.18);
    border-radius: 14px;
    background: rgba(32,223,114,.06);
    color: var(--df-home-green-soft);
}

.df-home-v2__system-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.df-home-v2__system-grid h3 {
    margin: 0;
    color: var(--df-home-text);
    font-size: 25px;
    font-weight: 690;
    letter-spacing: -0.045em;
}

.df-home-v2__system-grid p {
    margin: 14px 0 0;
    color: var(--df-home-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* Experience manifesto */
.df-home-v2__manifesto {
    position: relative;
    min-height: 780px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #030503;
}

.df-home-v2__manifesto-media {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1.05fr 1fr;
    gap: 1px;
    opacity: .62;
}

.df-home-v2__manifesto-media img {
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
}

.df-home-v2__manifesto-media img:nth-child(1) { object-position: 50% 18%; }
.df-home-v2__manifesto-media img:nth-child(2) { object-position: 50% 18%; }
.df-home-v2__manifesto-media img:nth-child(3) { object-position: 50% 17%; }

.df-home-v2__manifesto-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3,5,3,.96) 0%, rgba(3,5,3,.74) 42%, rgba(3,5,3,.24) 100%),
        linear-gradient(180deg, rgba(3,5,3,.35), rgba(3,5,3,.8));
}

.df-home-v2__manifesto-copy {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 64px), var(--df-home-max));
    margin: 0 auto;
}

.df-home-v2__manifesto-copy > div,
.df-home-v2__manifesto-copy {
    max-width: 880px;
}

/* Final CTA */
.df-home-v2__cta {
    position: relative;
    padding: 150px 0 170px;
    background:
        radial-gradient(circle at 70% 50%, rgba(32,223,114,.09), transparent 34%),
        var(--df-home-bg);
}

.df-home-v2__cta-inner {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 70px;
    align-items: end;
    padding-top: 80px;
    border-top: 1px solid rgba(255,255,255,.1);
}

.df-home-v2__cta h2 {
    max-width: 980px;
    font-size: clamp(52px, 5.2vw, 88px);
}

.df-home-v2__cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 220px;
}


/* Editorial light closing section */
.df-home-v2__closing {
    position: relative;
    padding: 142px 0 150px;
    background:
        radial-gradient(circle at 20% 22%, rgba(32,223,114,.08), transparent 24%),
        linear-gradient(180deg, #f6f3ec 0%, #f1ede5 100%);
    color: #0c1510;
    overflow: clip;
}

.df-home-v2__closing::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 76% 38%, rgba(12,21,16,.05), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,0));
}

.df-home-v2__closing .df-home-v2__section-shell {
    position: relative;
    z-index: 1;
}

.df-home-v2__closing-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(540px, 1fr);
    gap: 64px;
    align-items: center;
}

.df-home-v2__eyebrow--dark {
    color: #1e9e59;
}

.df-home-v2__eyebrow--dark span {
    background: currentColor;
    box-shadow: 0 0 0 6px rgba(30,158,89,.12);
}

.df-home-v2__closing-copy h2 {
    max-width: 10.4ch;
}

.df-home-v2__closing-intro,
.df-home-v2__closing-note {
    color: rgba(12,21,16,.72);
    font-size: 18px;
    line-height: 1.65;
}

.df-home-v2__closing-intro {
    max-width: 640px;
    margin: 26px 0 0;
}

.df-home-v2__closing-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 12px;
    margin-top: 34px;
}

.df-home-v2__closing-flow span {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(12,21,16,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.62);
    box-shadow: 0 12px 30px rgba(12,21,16,.05);
    color: #0d1712;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.df-home-v2__closing-flow i {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    opacity: .38;
    background: currentColor;
    color: #0d1712;
    clip-path: polygon(0 38%, 55% 38%, 55% 12%, 100% 50%, 55% 88%, 55% 62%, 0 62%);
}

.df-home-v2__closing-kinds {
    margin: 26px 0 0;
    color: rgba(12,21,16,.54);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.df-home-v2__closing-kinds span {
    margin: 0 .45em;
}

.df-home-v2__closing-note {
    max-width: 580px;
    margin: 36px 0 0;
    color: #0d1712;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.04em;
}

.df-home-v2__closing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.df-home-v2__closing-actions .df-home-v2__button--quiet {
    border-color: rgba(12,21,16,.14);
    background: rgba(255,255,255,.56);
    color: rgba(12,21,16,.84);
}

.df-home-v2__closing-actions .df-home-v2__button--quiet:hover {
    border-color: rgba(12,21,16,.22);
    background: rgba(255,255,255,.78);
}

.df-home-v2__closing-visual {
    position: relative;
    min-height: 700px;
    padding: 18px 0 0 20px;
}

.df-home-v2__closing-window,
.df-home-v2__closing-detail {
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
    background: #051009;
    box-shadow: 0 24px 80px rgba(12,21,16,.14), 0 0 0 1px rgba(12,21,16,.08);
}

.df-home-v2__closing-window {
    position: relative;
    width: min(100%, 760px);
}

.df-home-v2__closing-window::before {
    content: "Fleet operations";
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(5,16,9,.82);
    color: rgba(245,248,245,.82);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.df-home-v2__closing-window img,
.df-home-v2__closing-detail img {
    display: block;
    width: 100%;
    height: auto;
}

.df-home-v2__closing-detail {
    position: absolute;
    right: -8px;
    bottom: 88px;
    width: min(38%, 290px);
    border-radius: 24px;
}

.df-home-v2__closing-caption {
    position: absolute;
    left: 0;
    bottom: 8px;
    max-width: 300px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(12,21,16,.08);
    background: rgba(255,255,255,.74);
    box-shadow: 0 20px 44px rgba(12,21,16,.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.df-home-v2__closing-caption strong {
    color: #0d1712;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.02em;
}

/* Reveal motion */
.df-home-v2.is-motion-ready [data-df-home-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1);
}

.df-home-v2.is-motion-ready [data-df-home-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   Signature scroll theatre
   Progressive enhancement only: native scrolling remains in control.
   Desktop gets pinned product choreography; touch/tablet/mobile stay linear.
   ========================================================= */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    .df-home-v2.is-scroll-story [data-df-scroll-scene] {
        --df-scene-progress: 0;
    }

    /*
     * Scroll theatre owns transform/opacity for these reveal-enabled stages.
     * This intentionally outranks the generic IntersectionObserver reveal rule
     * without using !important, so scroll progress can animate them continuously.
     */
    .df-home-v2.is-scroll-story.is-motion-ready .df-home-v2__hero-copy[data-df-home-reveal],
    .df-home-v2.is-scroll-story.is-motion-ready .df-home-v2__hero-stage[data-df-home-reveal],
    .df-home-v2.is-scroll-story.is-motion-ready .df-home-v2__booking-showcase[data-df-home-reveal] {
        transition: none;
    }

    /* HERO — one deliberate product reveal. Copy recedes, the Operator surface wakes up,
       tilts as one physical plane, and its departure drawer slides in on that same plane. */
    .df-home-v2.is-scroll-story .df-home-v2__hero {
        position: relative;
        height: 210vh;
        min-height: 1640px;
        padding: 0;
    }

    /* JS owns the pin state so Divi/theme wrappers cannot silently break sticky. */
    .df-home-v2.is-scroll-story .df-home-v2__hero-sticky {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        min-height: 760px;
        overflow: hidden;
        isolation: isolate;
    }

    /* The product dissolves into DockFlow black instead of ending as a screenshot rectangle. */
    .df-home-v2.is-scroll-story .df-home-v2__hero-sticky::after {
        content: "";
        position: absolute;
        z-index: 8;
        right: 0;
        bottom: -1px;
        left: 0;
        height: 28%;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(4,6,5,0) 0%,
            rgba(4,6,5,.03) 30%,
            rgba(4,6,5,.20) 62%,
            rgba(4,6,5,.72) 90%,
            #040605 100%
        );
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero.is-df-scroll-pinned .df-home-v2__hero-sticky {
        position: fixed;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero.is-df-scroll-after .df-home-v2__hero-sticky {
        position: absolute;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-inner {
        position: relative;
        width: min(calc(100% - 56px), 1840px);
        height: 100%;
        margin: 0 auto;
    }

    .df-home-v2.is-scroll-story .df-home-v2__scroll-cue {
        position: absolute;
        z-index: 24;
        left: 50%;
        bottom: clamp(22px, 3.4vh, 38px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        color: rgba(237,243,238,.56);
        opacity: var(--df-scroll-cue-opacity, 1);
        transform: translate3d(-50%, var(--df-scroll-cue-y, 0px), 0);
        pointer-events: none;
        will-change: transform, opacity;
    }

    .df-home-v2.is-scroll-story .df-home-v2__scroll-cue-track {
        position: relative;
        display: block;
        width: 22px;
        height: 38px;
        border: 1px solid rgba(237,243,238,.25);
        border-radius: 999px;
        background: rgba(255,255,255,.018);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            0 8px 28px rgba(0,0,0,.14);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .df-home-v2.is-scroll-story .df-home-v2__scroll-cue-track i {
        position: absolute;
        top: 7px;
        left: 50%;
        width: 3px;
        height: 7px;
        border-radius: 999px;
        background: rgba(32,223,114,.88);
        box-shadow: 0 0 0 3px rgba(32,223,114,.055);
        transform: translate3d(-50%, 0, 0);
        animation: dfHomeScrollCueDrift 2.25s cubic-bezier(.45,0,.25,1) infinite;
    }

    .df-home-v2.is-scroll-story .df-home-v2__scroll-cue-label {
        color: rgba(237,243,238,.42);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .16em;
        line-height: 1;
        text-transform: uppercase;
    }

    .df-home-v2.is-scroll-story.is-motion-ready .df-home-v2__hero-copy[data-df-home-reveal] {
        position: absolute;
        z-index: 12;
        top: clamp(118px, 14vh, 160px);
        right: 0;
        left: 0;
        margin: 0 auto;
        opacity: var(--df-hero-copy-opacity, 1);
        transform:
            translateY(var(--df-hero-copy-y, 0px))
            scale(var(--df-hero-copy-scale, 1));
        transform-origin: center top;
        will-change: transform, opacity;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-context {
        position: absolute;
        z-index: 13;
        top: 34%;
        left: clamp(28px, 4.2vw, 76px);
        display: block;
        width: min(31vw, 470px);
        max-width: 470px;
        opacity: var(--df-hero-context-opacity, 0);
        transform:
            translate3d(var(--df-hero-context-x, -26px), var(--df-hero-context-y, 28px), 0)
            scale(var(--df-hero-context-scale, .985));
        transform-origin: left center;
        pointer-events: none;
        will-change: transform, opacity;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-context .df-home-v2__eyebrow {
        margin-bottom: 20px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-context h2 {
        margin: 0;
        color: #f4f7f4;
        font-size: clamp(46px, 4.15vw, 72px);
        font-weight: 720;
        letter-spacing: -.062em;
        line-height: .96;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-context > p:last-child {
        max-width: 410px;
        margin: 24px 0 0;
        color: rgba(228,235,229,.60);
        font-size: clamp(16px, 1.2vw, 19px);
        letter-spacing: -.022em;
        line-height: 1.55;
    }

    /* Hero Act 2 ambient source: a broad green light lives BEHIND the Operator composition,
       centered near the open seam beside the Calendar so its spill is visible on the black canvas. */
    .df-home-v2.is-scroll-story .df-home-v2__hero-sticky::before {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        pointer-events: none;
        opacity: var(--df-hero-context-wash, 0);
        background:
            radial-gradient(ellipse 54% 58% at 42% 66%, rgba(32,223,114,.28) 0%, rgba(24,178,84,.18) 24%, rgba(14,118,55,.10) 44%, rgba(6,52,27,.045) 58%, rgba(4,6,5,0) 74%),
            radial-gradient(ellipse 42% 34% at 58% 86%, rgba(32,223,114,.14) 0%, rgba(13,105,49,.07) 42%, rgba(4,6,5,0) 76%);
        filter: blur(18px);
        transform: scale(1.06);
        transform-origin: 42% 66%;
        will-change: opacity;
    }

    .df-home-v2.is-scroll-story.is-motion-ready .df-home-v2__hero-stage[data-df-home-reveal] {
        position: absolute;
        z-index: 3;
        top: 49%;
        left: 50%;
        width: min(98vw, 1780px);
        min-height: 0;
        margin: 0;
        opacity: var(--df-hero-stage-opacity, 0);
        transform:
            translate(calc(-50% + var(--df-hero-stage-x, 0px)), var(--df-hero-stage-y, 170px))
            scale(var(--df-hero-stage-scale, .80));
        transform-origin: center center;
        will-change: transform, opacity;
    }

    /* Calendar + drawer share one 3D surface. The parent owns perspective/tilt;
       the drawer only translates inside that local coordinate system. */
    .df-home-v2.is-scroll-story .df-home-v2__hero-product-plane {
        width: min(96%, 1700px);
        margin: 0 auto;
        transform:
            perspective(1900px)
            rotateX(var(--df-hero-plane-rx, .8deg))
            rotateY(var(--df-hero-plane-ry, 0deg))
            rotateZ(var(--df-hero-plane-rz, -.2deg));
        transform-origin: center center;
        transform-style: preserve-3d;
        will-change: transform;
    }

    .df-home-v2.is-scroll-story .df-home-v2__operator-window {
        width: 100%;
        margin: 0;
        border-radius: 24px;
        box-shadow: 0 78px 190px rgba(0,0,0,.78);
        filter:
            blur(var(--df-hero-operator-blur, 6px))
            brightness(var(--df-hero-operator-brightness, .62))
            saturate(var(--df-hero-operator-saturation, .80));
        transform: none;
        transition: none;
        will-change: filter;
    }

    .df-home-v2.is-scroll-story .df-home-v2__operator-window::after {
        z-index: 4;
        height: 44%;
        background: linear-gradient(
            180deg,
            rgba(4,6,5,0) 0%,
            rgba(4,6,5,.08) 24%,
            rgba(4,6,5,.45) 67%,
            rgba(4,6,5,.94) 100%
        );
    }

    .df-home-v2.is-scroll-story .df-home-v2__operator-window::before {
        content: "";
        position: absolute;
        z-index: 3;
        inset: 0;
        pointer-events: none;
        opacity: var(--df-hero-light-opacity, .10);
        background:
            radial-gradient(circle at 78% 20%, rgba(32,223,114,.08), transparent 24%),
            linear-gradient(180deg, rgba(255,255,255,.018), transparent 24%);
    }

    /* The real departure drawer now enters from the Calendar's right edge while inheriting
       the exact same 3D tilt. This makes it read as DockFlow opening a drawer, not a card
       floating independently above a screenshot. */
    .df-home-v2.is-scroll-story .df-home-v2__hero-detail-fragment {
        position: absolute;
        z-index: 11;
        /* Preserve the real DockFlow drawer proportion against the 16:9 Operator surface.
           The drawer now spans the Calendar height and anchors directly to its right edge. */
        top: 0;
        right: 0;
        display: block;
        width: 36.25%;
        height: 100%;
        overflow: hidden;
        border: 0;
        border-left: 1px solid rgba(12, 28, 19, .10);
        border-radius: 0 24px 24px 0;
        background: #f5f8f6;
        box-shadow: -30px 0 84px rgba(0,0,0,.30);
        opacity: var(--df-hero-detail-opacity, 0);
        transform:
            translate3d(var(--df-hero-detail-x, 220px), var(--df-hero-detail-y, 18px), 8px)
            scale(var(--df-hero-detail-scale, .985));
        transform-origin: right center;
        will-change: transform, opacity;
    }
    .df-home-v2.is-scroll-story .df-home-v2__hero-detail-fragment::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-detail-fragment img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Guest arrives on the opposite side, smaller and later: proof that the same live trip
       reaches the guest without competing with the Operator product for hierarchy. */
    .df-home-v2.is-scroll-story .df-home-v2__hero-phone {
        z-index: 12;
        right: auto;
        left: 6.7%;
        top: 10.5%;
        bottom: auto;
        width: clamp(205px, 14.5vw, 274px);
        opacity: var(--df-hero-phone-opacity, 0);
        transform:
            perspective(1100px)
            translate3d(var(--df-hero-phone-x, -132px), var(--df-hero-phone-y, 96px), 0)
            rotateY(4deg)
            rotateZ(var(--df-hero-phone-rz, -4deg))
            scale(var(--df-hero-phone-scale, .90));
        transform-origin: center center;
        will-change: transform, opacity;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-phone .df-home-v2__phone-shell {
        box-shadow: 0 44px 115px rgba(0,0,0,.72);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-phone .df-home-v2__phone-label {
        right: auto;
        left: 18px;
        bottom: -18px;
    }

    /* BOOKING — the product stage pins while scroll advances the real flow. */
    .df-home-v2.is-scroll-story .df-home-v2__booking {
        min-height: 0;
        padding: 150px 0 0;
    }

    .df-home-v2.is-scroll-story .df-home-v2__booking > .df-home-v2__section-shell {
        min-height: 270vh;
    }

    .df-home-v2.is-scroll-story.is-motion-ready .df-home-v2__booking-showcase[data-df-home-reveal] {
        position: sticky;
        top: max(92px, calc((100vh - 760px) / 2));
        z-index: 3;
        transform:
            perspective(1400px)
            translateY(var(--df-booking-stage-y, 8px))
            rotateX(var(--df-booking-stage-rx, .6deg));
        transform-origin: center center;
        will-change: transform;
    }

    .df-home-v2.is-scroll-story .df-home-v2__booking-device {
        transform:
            translateY(var(--df-booking-device-y, 12px))
            rotateZ(var(--df-booking-device-rz, -1deg));
        will-change: transform;
    }

    /* Guest Experience intentionally stays linear. The homepage has already earned its
       cinematic moment; this section is product proof, not another pinned scroll scene. */
    .df-home-v2.is-scroll-story .df-home-v2__guest {
        min-height: 0;
    }

    .df-home-v2.is-scroll-story .df-home-v2__guest > .df-home-v2__section-shell {
        position: relative;
        min-height: 0;
    }

    .df-home-v2.is-scroll-story .df-home-v2__guest-plane {
        display: none;
    }
}


@keyframes dfHomeScrollCueDrift {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 0, 0);
    }
    22% {
        opacity: .9;
    }
    72% {
        opacity: .82;
    }
    100% {
        opacity: 0;
        transform: translate3d(-50%, 15px, 0);
    }
}

/* Responsive */
@media (max-width: 1280px) {
    .df-home-v2__hero {
        min-height: 890px;
    }

    .df-home-v2__hero-stage {
        min-height: 590px;
    }

    .df-home-v2__hero-phone {
        right: 2.5%;
        width: clamp(220px, 20vw, 300px);
    }

    .df-home-v2__operator-feature {
        grid-template-columns: minmax(0, 1.25fr) minmax(310px, .55fr);
        gap: 44px;
    }

    .df-home-v2__guest-grid {
        grid-template-columns: minmax(0,.78fr) minmax(460px,1fr);
        gap: 48px;
    }

    .df-home-v2__guest-phone {
        width: clamp(204px, 18.5vw, 244px);
    }

    .df-home-v2__guest::before {
        background-position: 72% 46%;
        background-size: cover;
    }

    .df-home-v2__system-grid article {
        padding: 28px;
    }
}

@media (max-width: 1024px) {
    .df-home-v2__hero {
        min-height: 820px;
        padding-top: 150px;
    }

    .df-home-v2__hero-stage {
        min-height: 500px;
    }

    .df-home-v2__operator-window {
        width: 96%;
        border-radius: 22px;
    }

    .df-home-v2__hero-phone {
        right: -1%;
        bottom: -10%;
        width: 220px;
    }

    .df-home-v2__story,
    .df-home-v2__booking,
    .df-home-v2__guest,
    .df-home-v2__system {
        padding: 118px 0;
    }

    .df-home-v2__operator-feature,
    .df-home-v2__guest-grid {
        grid-template-columns: 1fr;
    }

    .df-home-v2__operator-feature-copy {
        max-width: 680px;
    }

    .df-home-v2__booking-stage {
        gap: 44px;
        min-height: 700px;
        padding: 54px 6%;
    }

    .df-home-v2__guest-phones {
        min-height: 520px;
        max-width: 620px;
        width: 100%;
        margin: 8px auto 0;
        transform: none;
    }

    .df-home-v2__guest-phone {
        width: min(39%, 238px);
    }

    .df-home-v2__guest-phone--back { left: 13%; top: 10px; }
    .df-home-v2__guest-phone--front { right: 11%; top: 28px; }

    .df-home-v2__guest::before {
        background-position: 62% 42%;
        background-size: cover;
        opacity: .52;
    }

    .df-home-v2__system-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .df-home-v2__manifesto {
        min-height: 680px;
    }

    .df-home-v2__cta-inner {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .df-home-v2__cta-actions {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .df-home-v2__section-shell,
    .df-home-v2__hero-inner,
    .df-home-v2__cta-inner,
    .df-home-v2__manifesto-copy {
        width: min(calc(100% - 38px), var(--df-home-max));
    }

    .df-home-v2__hero {
        min-height: 0;
        padding: 132px 0 90px;
    }

    .df-home-v2__hero-copy {
        margin-bottom: 52px;
        text-align: left;
    }

    .df-home-v2__hero-copy h1 {
        font-size: clamp(58px, 17vw, 84px);
        line-height: .88;
        letter-spacing: -.072em;
    }

    .df-home-v2__lede {
        margin-left: 0;
        margin-right: 0;
        font-size: 18px;
    }

    .df-home-v2__hero-actions {
        justify-content: flex-start;
    }

    .df-home-v2__hero-actions .df-home-v2__button {
        width: 100%;
    }

    .df-home-v2__audience {
        max-width: 320px;
        line-height: 1.6;
    }

    .df-home-v2__hero-stage {
        min-height: 430px;
        padding-bottom: 100px;
    }

    .df-home-v2__operator-window {
        width: 124%;
        margin-left: -12%;
        border-radius: 18px;
        transform: none;
    }

    .df-home-v2__operator-window > img {
        min-height: 290px;
        object-fit: cover;
        object-position: 62% 0;
    }

    .df-home-v2__hero-phone {
        right: 2%;
        bottom: 0;
        width: 178px;
    }

    .df-home-v2__phone-shell {
        border-radius: 18px;
    }

    .df-home-v2__phone-label {
        display: none;
    }


    .df-home-v2__story,
    .df-home-v2__booking,
    .df-home-v2__guest,
    .df-home-v2__system {
        padding: 92px 0;
    }

    .df-home-v2__section-head h2,
    .df-home-v2__manifesto-copy h2,
    .df-home-v2__cta h2 {
        font-size: clamp(46px, 13vw, 66px);
        line-height: .94;
    }

    .df-home-v2__section-head > p:last-child,
    .df-home-v2__manifesto-copy > p:last-child {
        margin-top: 22px;
        font-size: 17px;
    }

    .df-home-v2__operator-feature {
        gap: 42px;
        margin-top: 52px;
    }

    .df-home-v2__operator-feature-media {
        width: 120%;
        margin-left: -10%;
        border-radius: 20px;
    }

    .df-home-v2__operator-feature-media img {
        min-height: 380px;
        object-fit: cover;
        object-position: 64% 0;
    }

    .df-home-v2__booking-showcase {
        margin-top: 48px;
        border-radius: 24px;
    }

    .df-home-v2__booking-tabs button {
        min-height: 64px;
        font-size: 12px;
    }

    .df-home-v2__booking-tabs button span {
        display: block;
        margin: 0 0 4px;
    }

    .df-home-v2__booking-stage {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 44px 20px 0;
    }

    .df-home-v2__booking-copy {
        padding: 0 4px;
    }

    .df-home-v2__booking-copy h3,
    .df-home-v2__operator-feature-copy h3 {
        font-size: 36px;
    }

    .df-home-v2__booking-device {
        width: min(88%, 340px);
        margin: 10px auto -70px;
        border-radius: 28px;
    }

    .df-home-v2__booking {
        padding-bottom: 150px;
    }

    .df-home-v2__guest-grid {
        gap: 40px;
    }

    .df-home-v2__guest-points > div {
        grid-template-columns: 78px minmax(0,1fr);
        gap: 12px;
    }

    .df-home-v2__guest-phones {
        min-height: 430px;
        max-width: 500px;
        margin: 4px auto 0;
    }

    .df-home-v2__guest-phone {
        width: min(50%, 220px);
        border-radius: 26px;
    }

    .df-home-v2__guest-phone--back {
        top: 8px;
        left: 4%;
        transform: rotate(-4.6deg);
    }

    .df-home-v2__guest-phone--front {
        top: 28px;
        right: 1%;
        transform: rotate(4.2deg);
    }

    .df-home-v2__guest::before {
        background-position: 58% 38%;
        background-size: cover;
        opacity: .44;
    }

    .df-home-v2__system-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 48px;
    }

    .df-home-v2__system-grid article {
        min-height: 240px;
        padding: 28px;
    }

    .df-home-v2__system-icon {
        margin-bottom: 42px;
    }

    .df-home-v2__manifesto {
        min-height: 650px;
    }

    .df-home-v2__manifesto-media {
        grid-template-columns: .8fr 1.2fr;
    }

    .df-home-v2__manifesto-media img:first-child {
        display: none;
    }

    .df-home-v2__manifesto-shade {
        background:
            linear-gradient(90deg, rgba(3,5,3,.94), rgba(3,5,3,.44)),
            linear-gradient(180deg, rgba(3,5,3,.35), rgba(3,5,3,.86));
    }

    .df-home-v2__cta {
        padding: 100px 0 120px;
    }

    .df-home-v2__cta-inner {
        gap: 42px;
        padding-top: 56px;
    }

    .df-home-v2__cta-actions {
        flex-direction: column;
    }

    .df-home-v2__cta-actions .df-home-v2__button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .df-home-v2__hero-copy h1 {
        font-size: 56px;
    }

    .df-home-v2__hero-stage {
        min-height: 380px;
    }

    .df-home-v2__hero-phone {
        width: 154px;
    }

    .df-home-v2__operator-window > img {
        min-height: 260px;
    }

    .df-home-v2__guest-phones {
        min-height: 402px;
    }

    .df-home-v2__guest-phone--back {
        width: 52%;
        left: 1%;
    }

    .df-home-v2__guest-phone--front {
        width: 58%;
        right: -1%;
    }
}


@media (max-width: 1280px) {
    .df-home-v2__closing-grid {
        grid-template-columns: minmax(0, .92fr) minmax(460px, 1fr);
        gap: 50px;
    }

    .df-home-v2__closing-visual {
        min-height: 640px;
    }
}

@media (max-width: 1024px) {
    .df-home-v2__closing {
        padding: 118px 0 126px;
    }

    .df-home-v2__closing-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .df-home-v2__closing-copy h2 {
        max-width: 11ch;
    }

    .df-home-v2__closing-visual {
        min-height: 0;
        max-width: 760px;
        margin: 0 auto;
        padding: 0 0 110px;
    }

    .df-home-v2__closing-detail {
        right: 10px;
        bottom: 24px;
        width: min(40%, 290px);
    }

    .df-home-v2__closing-caption {
        left: 12px;
        bottom: 18px;
    }
}

@media (max-width: 768px) {
    .df-home-v2__closing {
        padding: 96px 0 104px;
    }

    .df-home-v2__closing-copy h2 {
        font-size: clamp(42px, 13vw, 62px);
        max-width: 10.6ch;
    }

    .df-home-v2__closing-intro {
        font-size: 16px;
    }

    .df-home-v2__closing-flow {
        gap: 10px 8px;
    }

    .df-home-v2__closing-flow span {
        min-height: 42px;
        padding: 0 14px;
        font-size: 13px;
    }

    .df-home-v2__closing-kinds {
        font-size: 12px;
        letter-spacing: .12em;
        line-height: 1.8;
    }

    .df-home-v2__closing-note {
        margin-top: 30px;
        font-size: 22px;
    }

    .df-home-v2__closing-visual {
        padding-bottom: 84px;
    }

    .df-home-v2__closing-window {
        border-radius: 24px;
    }

    .df-home-v2__closing-detail {
        width: min(46%, 240px);
        border-radius: 20px;
    }

    .df-home-v2__closing-caption {
        position: relative;
        left: auto;
        bottom: auto;
        max-width: none;
        margin: 14px 0 0;
    }
}

@media (max-width: 560px) {
    .df-home-v2__closing-flow i {
        display: none;
    }

    .df-home-v2__closing-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .df-home-v2__closing-actions .df-home-v2__button {
        width: 100%;
    }

    .df-home-v2__closing-visual {
        padding-bottom: 0;
    }

    .df-home-v2__closing-window {
        width: 100%;
    }

    .df-home-v2__closing-detail {
        position: relative;
        right: auto;
        bottom: auto;
        width: min(72%, 260px);
        margin: -48px 0 0 auto;
    }
}


/* Demo drawer — light, full-height, no-scroll 2026 contact flow */
html.is-df-demo-open,
body.is-df-demo-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.df-home-v2__demo-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483646 !important;
    isolation: isolate;
    background: rgba(3,8,5,.58);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.df-home-v2__demo-drawer {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    z-index: 2147483647 !important;
    isolation: isolate;
    width: min(650px, 100vw);
    height: 100dvh;
    color: #101712;
    transform: translate3d(100%,0,0);
    transition: transform .46s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}

.df-home-v2__demo-drawer.is-open {
    transform: translate3d(0,0,0);
    pointer-events: auto;
}

.df-home-v2__demo-drawer-shell {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 96% 4%, rgba(32,223,114,.16), transparent 28%),
        radial-gradient(circle at 4% 72%, rgba(32,223,114,.06), transparent 32%),
        linear-gradient(180deg,#fbfdf9 0%,#f5f8f3 100%);
    box-shadow: -26px 0 80px rgba(0,0,0,.18);
}

.df-home-v2__demo-panel-header {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: start;
    padding: clamp(28px,4vh,42px) 42px clamp(22px,3vh,30px);
    border-bottom: 1px solid rgba(15,23,18,.08);
    background:
        linear-gradient(135deg,rgba(255,255,255,.92),rgba(238,250,241,.72));
}

.df-home-v2__demo-panel-header .df-home-v2__eyebrow {
    margin-bottom: 16px;
}

.df-home-v2__demo-panel-header h2 {
    max-width: 520px;
    margin: 0;
    color: #0d1510;
    font-size: clamp(38px,4.2vw,58px);
    font-weight: 700;
    letter-spacing: -.058em;
    line-height: .96;
    text-wrap: balance;
}

.df-home-v2__demo-panel-header > div > p.df-home-v2__body {
    max-width: 510px;
    margin: 16px 0 0;
    color: rgba(13,21,16,.62);
    font-size: 15px;
    line-height: 1.55;
}

.df-home-v2__demo-close {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    margin-top: 1px;
    border: 1px solid rgba(13,21,16,.10);
    border-radius: 50%;
    background: rgba(255,255,255,.78);
    color: #111813;
    box-shadow: 0 8px 24px rgba(12,21,16,.06);
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.df-home-v2__demo-close:hover {
    transform: rotate(3deg) scale(1.04);
    border-color: rgba(13,21,16,.18);
    background: #fff;
}

.df-home-v2__demo-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.df-home-v2__demo-panel-body {
    min-height: 0;
    display: flex;
    align-items: center;
    padding: 22px 42px;
}

.df-home-v2__demo-form {
    width: 100%;
    max-width: 566px;
    margin: 0 auto;
}

.df-home-v2__demo-fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px 16px;
}

.df-home-v2__demo-fields label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.df-home-v2__demo-field--wide {
    grid-column: 1 / -1;
}

.df-home-v2__demo-fields label > span {
    color: rgba(13,21,16,.72);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .015em;
}

.df-home-v2__demo-fields label > span b {
    margin-left: 3px;
    color: #11a653;
    font-weight: 700;
}

.df-home-v2__demo-fields input,
.df-home-v2__demo-fields select {
    width: 100%;
    height: 52px;
    min-height: 52px;
    padding: 0 15px;
    border: 1px solid rgba(13,21,16,.11);
    border-radius: 13px;
    outline: none;
    background: rgba(255,255,255,.88);
    color: #101712;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 7px 22px rgba(12,21,16,.035);
    font: inherit;
    font-size: 14px;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.df-home-v2__demo-fields input::placeholder {
    color: rgba(13,21,16,.32);
}

.df-home-v2__demo-fields input:focus,
.df-home-v2__demo-fields select:focus {
    border-color: rgba(32,223,114,.58);
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(32,223,114,.09),
        0 12px 28px rgba(12,21,16,.05);
}

.df-home-v2__demo-success {
    min-height: 240px;
    align-items: center;
    gap: 18px;
    padding: 26px;
    border: 1px solid rgba(32,223,114,.20);
    border-radius: 18px;
    background: linear-gradient(135deg,rgba(32,223,114,.08),rgba(255,255,255,.72));
}

.df-home-v2__demo-success:not([hidden]) {
    display: flex;
}

.df-home-v2__demo-success-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(32,223,114,.13);
    color: #11964e;
}

.df-home-v2__demo-success-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.df-home-v2__demo-success strong {
    display: block;
    color: #0d1510;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.035em;
}

.df-home-v2__demo-success p {
    margin: 8px 0 0;
    color: rgba(13,21,16,.60);
    font-size: 14px;
    line-height: 1.55;
}

.df-home-v2__demo-drawer.is-sent .df-home-v2__demo-fields {
    display: none;
}

.df-home-v2__demo-panel-footer {
    padding: 22px 42px 26px;
    border-top: 1px solid rgba(15,23,18,.08);
    background: rgba(255,255,255,.60);
}

.df-home-v2__demo-submit {
    display: flex;
    width: 100%;
    max-width: 566px;
    min-height: 56px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 14px;
    background: #1edb70;
    color: #07110b;
    box-shadow: 0 16px 34px rgba(32,223,114,.18);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.02em;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.df-home-v2__demo-submit:hover {
    transform: translateY(-1px);
    background: #23e477;
    box-shadow: 0 20px 40px rgba(32,223,114,.23);
}

.df-home-v2__demo-submit svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.df-home-v2__demo-panel-footer p {
    max-width: 566px;
    margin: 10px auto 0;
    color: rgba(13,21,16,.46);
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
}

.df-home-v2__demo-drawer.is-sent .df-home-v2__demo-submit {
    opacity: .48;
    pointer-events: none;
}

@media (max-height: 820px) {
    .df-home-v2__demo-panel-header {
        padding-top: 24px;
        padding-bottom: 18px;
    }

    .df-home-v2__demo-panel-header .df-home-v2__eyebrow {
        margin-bottom: 11px;
    }

    .df-home-v2__demo-panel-header h2 {
        font-size: clamp(34px,5vh,48px);
    }

    .df-home-v2__demo-panel-header > div > p.df-home-v2__body {
        margin-top: 11px;
        font-size: 13px;
        line-height: 1.45;
    }

    .df-home-v2__demo-panel-body {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .df-home-v2__demo-fields {
        gap: 10px 14px;
    }

    .df-home-v2__demo-fields input,
    .df-home-v2__demo-fields select {
        height: 48px;
        min-height: 48px;
    }

    .df-home-v2__demo-panel-footer {
        padding-top: 16px;
        padding-bottom: 17px;
    }

    .df-home-v2__demo-submit {
        min-height: 52px;
    }
}

@media (max-width: 520px) {
    .df-home-v2__demo-panel-header,
    .df-home-v2__demo-panel-body,
    .df-home-v2__demo-panel-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .df-home-v2__demo-panel-header {
        gap: 12px;
    }

    .df-home-v2__demo-panel-header h2 {
        font-size: clamp(34px,11vw,44px);
    }

    .df-home-v2__demo-fields {
        gap: 10px;
    }

    .df-home-v2__demo-fields input,
    .df-home-v2__demo-fields select {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .df-home-v2 *,
    .df-home-v2 *::before,
    .df-home-v2 *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .df-home-v2.is-motion-ready [data-df-home-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* === v1.0.51 — Operate with context story + experience handoff === */
.df-home-v2__ops-story {
    position: relative;
    padding: 0;
    min-height: 235vh;
    overflow: visible;
    background:
        radial-gradient(circle at 68% 42%, rgba(32,223,114,.075), transparent 28%),
        #050806;
}

.df-home-v2__ops-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.df-home-v2__ops-sticky::after {
    content: "";
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    bottom: 0;
    height: 21vh;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5,8,6,0), rgba(5,8,6,.82) 64%, #040605 100%);
}

.df-home-v2__ops-shell {
    display: grid;
    grid-template-columns: minmax(330px,.72fr) minmax(620px,1.28fr);
    gap: clamp(44px,6vw,96px);
    align-items: center;
    width: 100%;
}

.df-home-v2__ops-copy {
    position: relative;
    z-index: 5;
    max-width: 620px;
    opacity: var(--df-ops-copy-opacity, 1);
    transform: translate3d(var(--df-ops-copy-x, 0px), var(--df-ops-copy-y, 0), 0);
}

.df-home-v2__ops-copy .df-home-v2__micro-label {
    margin: 22px 0 13px;
    color: rgba(245,248,245,.72);
    font-size: 13px;
    font-weight: 760;
    letter-spacing: .02em;
}

.df-home-v2__ops-copy h2 {
    font-size: clamp(48px,4.6vw,78px);
}

.df-home-v2__ops-stage {
    position: relative;
    min-height: min(760px,78vh);
}

.df-home-v2__ops-drawer {
    position: absolute;
    z-index: var(--df-ops-drawer-z, 6);
    top: 52.5%;
    right: 5%;
    width: min(clamp(285px,23vw,390px),45vh);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 26px;
    background: #f8faf9;
    box-shadow: 0 54px 130px rgba(0,0,0,.64);
    opacity: var(--df-ops-drawer-opacity, .95);
    transform:
        translate3d(
            calc(var(--df-ops-drawer-x, 40px) + var(--df-ops-drawer-focus-x, 0px)),
            calc(-50% + var(--df-ops-drawer-y, 24px) + var(--df-ops-drawer-focus-y, 0px)),
            0
        )
        rotate(var(--df-ops-drawer-rz, 1deg))
        scale(var(--df-ops-drawer-scale, .96));
    transform-origin: center center;
    will-change: transform, opacity;
}

.df-home-v2__ops-drawer img {
    display: block;
    width: 100%;
    height: auto;
}

.df-home-v2__ops-snippet {
    position: absolute;
    z-index: 4;
    width: clamp(220px,18vw,290px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    will-change: transform, opacity;
}

.df-home-v2__ops-snippet img {
    display: block;
    width: 100%;
    height: auto;
}


.df-home-v2__ops-snippet--status {
    left: 0;
    top: 18%;
    width: clamp(220px, 18vw, 285px);
    opacity: var(--df-ops-status-opacity,0);
    transform: translate3d(var(--df-ops-status-x,-70px),var(--df-ops-status-y,30px),0) scale(var(--df-ops-status-scale,.94));
}

.df-home-v2__ops-snippet--waiver {
    left: 7%;
    bottom: 10%;
    width: clamp(250px, 21vw, 325px);
    opacity: var(--df-ops-waiver-opacity,0);
    transform: translate3d(var(--df-ops-waiver-x,-40px),var(--df-ops-waiver-y,60px),0) rotate(var(--df-ops-waiver-rz,-2deg)) scale(var(--df-ops-waiver-scale,.94));
}

.df-home-v2__ops-snippet--pass {
    z-index: 9;
    right: 36%;
    bottom: 4%;
    width: clamp(250px, 20vw, 330px);
    opacity: var(--df-ops-pass-opacity,0);
    transform: translate3d(var(--df-ops-pass-x,80px),var(--df-ops-pass-y,50px),0) rotate(var(--df-ops-pass-rz,2deg)) scale(var(--df-ops-pass-scale,.94));
}

.df-home-v2__snippet-kicker {
    display: block;
    margin-bottom: 11px;
    color: rgba(245,248,245,.56);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.df-home-v2__ops-snippet strong,
.df-home-v2__ops-snippet span,
.df-home-v2__ops-snippet small {
    display: block;
}

.df-home-v2__ops-snippet--status strong {
    margin-bottom: 12px;
    font-size: 26px;
}

.df-home-v2__ops-snippet--status > span:not(.df-home-v2__snippet-kicker) {
    margin-top: 9px;
    color: rgba(245,248,245,.72);
    font-size: 13px;
}

.df-home-v2__ops-snippet i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 99px;
    vertical-align: 1px;
}

.df-home-v2__ops-snippet i.is-green { background:#20df72; box-shadow:0 0 0 4px rgba(32,223,114,.08); }
.df-home-v2__ops-snippet i.is-amber { background:#f2b54a; box-shadow:0 0 0 4px rgba(242,181,74,.08); }

.df-home-v2__snippet-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.df-home-v2__snippet-row .df-home-v2__snippet-kicker { margin:0; }
.df-home-v2__snippet-row b { color:#20df72; font-size:18px; font-weight:600; }

.df-home-v2__signature {
    display:block;
    width:100%;
    height:66px;
    margin:8px 0 9px;
    color:rgba(245,248,245,.78);
}

.df-home-v2__ops-snippet small {
    margin-top:4px;
    color:rgba(245,248,245,.46);
    font-size:11px;
}

.df-home-v2__pass-body {
    display:grid;
    grid-template-columns:84px 1fr;
    gap:13px;
    align-items:center;
}

.df-home-v2__fake-qr { width:84px; height:84px; }
.df-home-v2__pass-body strong { font-size:15px; }
.df-home-v2__pass-body span { margin-top:4px; color:rgba(245,248,245,.62); font-size:11px; }
.df-home-v2__pass-body small { color:#72eaa3; }

.df-home-v2__experience-break {
    position: relative;
    min-height: 190vh;
    background: #040605;
}

.df-home-v2__experience-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #040605;
}

.df-home-v2__experience-handoff-drawer {
    position: absolute;
    z-index: 5;
    top: 8%;
    right: max(5vw, 46px);
    width: clamp(300px, 25vw, 430px);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    background: #f8faf9;
    box-shadow: 0 50px 130px rgba(0,0,0,.68);
    opacity: var(--df-exp-drawer-opacity, 0);
    transform:
        translate3d(var(--df-exp-drawer-x, 45px), var(--df-exp-drawer-y, -150px), 0)
        rotate(var(--df-exp-drawer-rz, -4deg))
        scale(var(--df-exp-drawer-scale, .92));
    transform-origin: center center;
    will-change: transform, opacity;
}

.df-home-v2__experience-handoff-drawer img {
    display: block;
    width: 100%;
    height: auto;
}

.df-home-v2__experience-image {
    position: absolute;
    z-index: 1;
    left: var(--df-exp-left, 50%);
    top: var(--df-exp-top, 30%);
    width: var(--df-exp-width, 120px);
    height: var(--df-exp-height, 120px);
    overflow: hidden;
    border-radius: var(--df-exp-radius, 18px);
    transform: none;
    transform-origin: center center;
    will-change: left, top, width, height, border-radius;
}

.df-home-v2__experience-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:49% 48%;
    filter: brightness(var(--df-exp-brightness,.62)) saturate(var(--df-exp-saturation,.82));
    transform: scale(var(--df-exp-image-scale,1.31));
    transform-origin: 49% 48%;
    will-change: transform, filter;
}

.df-home-v2__experience-shade {
    position:absolute;
    inset:0;
    z-index:2;
    background:
        linear-gradient(90deg, rgba(3,5,4,.88) 0%, rgba(3,5,4,.54) 39%, rgba(3,5,4,.08) 70%),
        linear-gradient(180deg, rgba(3,5,4,.22), rgba(3,5,4,.08) 55%, rgba(3,5,4,.46));
    opacity: var(--df-exp-shade-opacity,0);
}

.df-home-v2__experience-copy {
    position:absolute;
    z-index:3;
    left:max(5vw,42px);
    bottom:clamp(68px,9vh,110px);
    max-width:850px;
    color:#f5f8f5;
    opacity:var(--df-exp-copy-opacity,0);
    transform:translateY(var(--df-exp-copy-y,42px));
}

.df-home-v2__experience-copy h2 {
    margin:0;
    font-size:clamp(54px,5.6vw,94px);
    line-height:.94;
    letter-spacing:-.065em;
}

.df-home-v2__experience-copy > p:last-child {
    max-width:620px;
    margin:26px 0 0;
    color:rgba(245,248,245,.72);
    font-size:clamp(17px,1.25vw,20px);
    line-height:1.58;
}

@media (max-width:1100px) {
    .df-home-v2__ops-story,
    .df-home-v2__experience-break { min-height:auto; }
    .df-home-v2__ops-sticky,
    .df-home-v2__experience-sticky { position:relative; min-height:auto; height:auto; }
    .df-home-v2__ops-story { padding:110px 0 120px; }
    .df-home-v2__ops-shell { grid-template-columns:1fr; }
    .df-home-v2__ops-stage { min-height:720px; max-width:760px; width:100%; margin:0 auto; }
    .df-home-v2__ops-drawer { right:8%; width:min(48vw,390px); }
    .df-home-v2__ops-snippet--status { left:4%; }
    .df-home-v2__ops-snippet--waiver { left:2%; bottom:8%; }
    .df-home-v2__ops-snippet--pass { right:2%; bottom:3%; }
    .df-home-v2__experience-sticky { height:78vh; min-height:620px; }
    .df-home-v2__experience-handoff-drawer { display:none; }
    .df-home-v2__experience-image { left:0; top:0; width:100%; height:100%; border-radius:0; transform:none; }
    .df-home-v2__experience-image img { transform:none; filter:brightness(.62) saturate(.88); }
    .df-home-v2__experience-shade { opacity:1; }
    .df-home-v2__experience-copy { opacity:1; transform:none; }
}

@media (max-width:700px) {
    .df-home-v2__ops-story { padding:88px 0 96px; }
    .df-home-v2__ops-stage { min-height:760px; }
    .df-home-v2__ops-drawer { top:43%; right:2%; width:70vw; max-width:330px; border-radius:20px; }
    .df-home-v2__ops-snippet { padding:14px; border-radius:15px; }
    .df-home-v2__ops-snippet--status { top:4%; left:0; width:210px; }
    .df-home-v2__ops-snippet--waiver { left:0; bottom:9%; width:230px; }
    .df-home-v2__ops-snippet--pass { right:0; bottom:0; width:225px; }
    .df-home-v2__pass-body { grid-template-columns:70px 1fr; }
    .df-home-v2__fake-qr { width:70px; height:70px; }
    .df-home-v2__experience-sticky { height:72vh; min-height:580px; }
    .df-home-v2__experience-copy { left:24px; right:24px; bottom:48px; }
    .df-home-v2__experience-copy h2 { font-size:clamp(42px,12vw,62px); }
}

@media (prefers-reduced-motion: reduce) {
    .df-home-v2__ops-drawer,
    .df-home-v2__ops-snippet,
    .df-home-v2__experience-handoff-drawer,
    .df-home-v2__experience-image,
    .df-home-v2__experience-image img,
    .df-home-v2__experience-copy { transform:none !important; }
    .df-home-v2__ops-snippet,
    .df-home-v2__experience-copy { opacity:1 !important; }
    .df-home-v2__experience-image { left:0 !important; top:0 !important; width:100% !important; height:100% !important; border-radius:0 !important; }
    .df-home-v2__experience-shade { opacity:1 !important; }
}


/* === v1.0.54 — ops composition polish === */
@media (min-width: 1101px) {
    /* Give the copy real editorial breathing room instead of hugging the viewport edge. */
    .df-home-v2__ops-shell {
        width: min(calc(100% - 176px), 1460px);
        grid-template-columns: minmax(360px,.68fr) minmax(620px,1.32fr);
        gap: clamp(56px,5vw,92px);
    }

    .df-home-v2__ops-copy {
        max-width: 560px;
    }

    /* The pass is a foreground proof point, not something hidden behind the drawer. */
    .df-home-v2__ops-snippet--pass {
        z-index: 9;
        right: 36%;
        bottom: 4%;
    }
}

/* === v1.0.53 — reliable JS pinning for Divi/WordPress wrappers === */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    /* CSS sticky can be broken by a Divi ancestor using overflow/transform.
       Mirror the hero's proven absolute -> fixed -> absolute pin lifecycle. */
    .df-home-v2.is-scroll-story .df-home-v2__ops-sticky {
        position: absolute;
        z-index: 20;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        min-height: 760px;
        overflow: hidden;
        isolation: isolate;
    }

    .df-home-v2.is-scroll-story .df-home-v2__ops-story.is-df-scroll-pinned .df-home-v2__ops-sticky {
        position: fixed;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
    }

    .df-home-v2.is-scroll-story .df-home-v2__ops-story.is-df-scroll-after .df-home-v2__ops-sticky {
        position: absolute;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .df-home-v2.is-scroll-story .df-home-v2__experience-sticky {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        min-height: 760px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__experience-break.is-df-scroll-pinned .df-home-v2__experience-sticky {
        position: fixed;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
    }

    .df-home-v2.is-scroll-story .df-home-v2__experience-break.is-df-scroll-after .df-home-v2__experience-sticky {
        position: absolute;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
    }
}


/* === v1.0.71 — hero shared 3D product plane ===
   Calendar and departure drawer now inherit one scroll-driven perspective transform.
   The drawer slides locally inside the tilted product surface and reverses with scroll. */

/* === v1.0.57 — alternating editorial composition === */
@media (min-width: 1101px) {
    /* Hero Act 2: pull the complete product system farther right and smaller so the
       Calendar, Guest phone and departure drawer read as one complete composition
       beside the editorial copy rather than underneath it. */
    .df-home-v2.is-scroll-story .df-home-v2__hero-context {
        width: min(30vw, 450px);
        max-width: 450px;
    }

    /* Alternate the next chapter: operational proof on the left, explanation on the
       right. Keep the copy itself left aligned for readability. */
    .df-home-v2__ops-shell {
        grid-template-columns: minmax(620px, 1.32fr) minmax(360px, .68fr);
    }

    .df-home-v2__ops-stage {
        grid-column: 1;
        grid-row: 1;
    }

    .df-home-v2__ops-copy {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        width: 100%;
        max-width: 535px;
        text-align: left;
    }
}


/* === v1.0.65 — measured cover-image handoff ===
   The Azure cover inside the 695×1078 drawer screenshot occupies roughly
   x 3.8–24.2% / y 19.4–32.5%. JS maps that measured rectangle into the
   pinned experience viewport so the master image grows from the actual cover. */


/* === v1.0.66 — single-scene cover expansion + business-type chapter === */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    /* v1.0.70 — a little more runway creates a readable drawer-alone hold between
       the Operations copy exiting and the cover-image takeover beginning. */
    .df-home-v2__ops-story {
        min-height: 380vh;
    }

    .df-home-v2__ops-shell {
        position: relative;
        z-index: 5;
    }

    /* The full-resolution photograph lives in the SAME pinned scene as the drawer.
       JS starts it exactly over the drawer's cover photo, then expands it to 100vw/100vh. */
    .df-home-v2__ops-experience {
        position: absolute;
        z-index: 14;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .df-home-v2__ops-experience-image {
        position: absolute;
        z-index: 14;
        left: var(--df-ops-exp-left, 0px);
        top: var(--df-ops-exp-top, 0px);
        width: var(--df-ops-exp-width, 1px);
        height: var(--df-ops-exp-height, 1px);
        overflow: hidden;
        border-radius: var(--df-ops-exp-radius, 13px);
        opacity: var(--df-ops-exp-opacity, 0);
        box-shadow: 0 28px 80px rgba(0,0,0,.38);
        will-change: left, top, width, height, border-radius, opacity;
    }

    .df-home-v2__ops-experience-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: var(--df-ops-exp-pos-x, 35%) var(--df-ops-exp-pos-y, 52%);
        filter: brightness(var(--df-ops-exp-brightness,.78)) saturate(1.02);
        transform: scale(var(--df-ops-exp-image-scale,1.10));
        transform-origin: center center;
        will-change: transform, filter, object-position;
    }

    .df-home-v2__ops-experience-shade {
        position: absolute;
        z-index: 15;
        inset: 0;
        opacity: var(--df-ops-exp-shade-opacity, 0);
        background:
            radial-gradient(ellipse at 18% 76%, rgba(3,5,4,.82) 0%, rgba(3,5,4,.58) 28%, rgba(3,5,4,.20) 50%, transparent 70%),
            linear-gradient(90deg, rgba(3,5,4,.78) 0%, rgba(3,5,4,.46) 38%, rgba(3,5,4,.06) 70%),
            linear-gradient(180deg, rgba(3,5,4,.08), rgba(3,5,4,.04) 52%, rgba(3,5,4,.34));
        will-change: opacity;
    }

    .df-home-v2__ops-experience-copy {
        position: absolute;
        z-index: 16;
        left: max(5vw, 52px);
        bottom: clamp(64px, 8vh, 104px);
        width: min(850px, 58vw);
        color: #f5f8f5;
        opacity: var(--df-ops-exp-copy-opacity, 0);
        transform: translateY(var(--df-ops-exp-copy-y, 38px));
        will-change: transform, opacity;
    }

    .df-home-v2__ops-experience-copy h2 {
        margin: 0;
        font-size: clamp(54px, 5.6vw, 94px);
        font-weight: 730;
        line-height: .94;
        letter-spacing: -.065em;
    }

    .df-home-v2__ops-experience-copy > p:last-child {
        max-width: 620px;
        margin: 26px 0 0;
        color: rgba(245,248,245,.72);
        font-size: clamp(17px,1.25vw,20px);
        line-height: 1.58;
    }
}

/* Normal-flow chapter after the cinematic handoff.
   First pale editorial surface: the experience imagery supports the operating story,
   but DockFlow remains the product being sold. */
.df-home-v2__business-types {
    position: relative;
    padding: clamp(118px, 10vw, 172px) 0 clamp(126px, 11vw, 188px);
    color: #111512;
    border-top: 1px solid rgba(14,22,17,.08);
    background:
        radial-gradient(circle at 92% 10%, rgba(32,223,114,.055), transparent 26%),
        #f2f1eb;
}

.df-home-v2__business-types::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.34), transparent 24%);
}

.df-home-v2__business-types .df-home-v2__section-shell {
    position: relative;
    z-index: 1;
}

.df-home-v2__business-head {
    max-width: 1120px !important;
}

.df-home-v2__business-types .df-home-v2__section-head h2 {
    max-width: 1180px;
    color: #101411 !important;
    font-size: clamp(58px, 6vw, 104px);
    font-weight: 690;
    letter-spacing: -.07em;
    line-height: .93;
}

.df-home-v2__business-types .df-home-v2__section-head > p:last-child {
    max-width: 790px;
    margin-top: 34px;
    color: rgba(17,21,18,.62) !important;
    font-size: clamp(18px,1.35vw,21px);
    line-height: 1.55;
}

.df-home-v2__business-editorial {
    display: grid;
    grid-template-columns: minmax(310px,.62fr) minmax(0,1.38fr);
    gap: clamp(54px,6vw,104px);
    align-items: stretch;
    margin-top: clamp(76px,7vw,116px);
}

.df-home-v2__business-selector {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    border-top: 1px solid rgba(16,20,17,.14);
}

.df-home-v2__business-tab {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 40px minmax(0,1fr);
    gap: 18px;
    align-items: start;
    padding: 24px 0 26px;
    appearance: none;
    border: 0;
    border-bottom: 1px solid rgba(16,20,17,.12);
    background: transparent;
    color: #111512;
    text-align: left;
    cursor: pointer;
    transition: opacity 180ms ease, transform 180ms ease;
}

.df-home-v2__business-tab::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: #20b967;
    transition: width 260ms cubic-bezier(.2,.75,.25,1);
}

.df-home-v2__business-tab:not(.is-active) {
    opacity: .48;
}

.df-home-v2__business-tab.is-active {
    opacity: 1;
}

.df-home-v2__business-tab.is-active::before {
    width: 74px;
}

.df-home-v2__business-index {
    padding-top: 4px;
    color: #178049;
    font-size: 11px;
    font-weight: 780;
    letter-spacing: .12em;
}

.df-home-v2__business-label {
    display: grid;
    gap: 8px;
}

.df-home-v2__business-label strong {
    color: #111512;
    font-size: clamp(24px,2vw,34px);
    font-weight: 650;
    letter-spacing: -.045em;
    line-height: 1.04;
}

.df-home-v2__business-label small {
    max-width: 360px;
    color: rgba(17,21,18,.56);
    font-size: 14px;
    font-weight: 480;
    letter-spacing: -.015em;
    line-height: 1.45;
}

@media (hover:hover) and (pointer:fine) {
    .df-home-v2__business-tab:not(.is-active):hover {
        opacity: .76;
        transform: translateX(3px);
    }
}

.df-home-v2__business-tab:focus-visible {
    outline: 2px solid #20b967;
    outline-offset: 6px;
}

.df-home-v2__business-stage {
    position: relative;
    min-height: clamp(540px,48vw,760px);
    overflow: hidden;
    border-radius: 28px;
    background: #dfe3dc;
    box-shadow: 0 28px 70px rgba(25,31,27,.10);
}

.df-home-v2__business-panel {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    background: #dfe3dc;
}

.df-home-v2__business-panel[hidden] {
    display: none;
}

.df-home-v2__business-panel img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 50%;
    transform: scale(1.018);
    filter: saturate(.94) contrast(.98);
    animation: dfBusinessImageIn 520ms cubic-bezier(.2,.75,.25,1) both;
}

.df-home-v2__business-panel[data-df-business-panel="rentals"] img {
    object-position: 50% 53%;
}

.df-home-v2__business-panel[data-df-business-panel="charters"] img {
    object-position: 50% 48%;
}

.df-home-v2__business-panel[data-df-business-panel="activities"] img {
    object-position: 52% 50%;
}

.df-home-v2__business-stage::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 52%, rgba(4,8,5,.54) 100%),
        linear-gradient(90deg, rgba(4,8,5,.08), transparent 30%);
}

.df-home-v2__business-stage-note {
    position: absolute;
    z-index: 3;
    left: 34px;
    right: 34px;
    bottom: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    color: #f6f8f5;
}

.df-home-v2__business-stage-note span {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .10em;
    text-transform: uppercase;
    opacity: .74;
}

.df-home-v2__business-stage-note strong {
    max-width: 370px;
    font-size: clamp(21px,1.8vw,30px);
    font-weight: 610;
    letter-spacing: -.04em;
    line-height: 1.05;
    text-align: right;
}

@keyframes dfBusinessImageIn {
    from {
        opacity: .28;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1.018);
    }
}

@media (max-width: 1100px) {
    /* Responsive pass comes later; for now the same experience moment becomes a
       stable static block inside the Operations section instead of a pinned animation. */
    .df-home-v2__ops-sticky {
        display: block;
        height: auto;
        min-height: 0;
    }

    .df-home-v2__ops-experience {
        position: relative;
        height: min(72vh, 720px);
        min-height: 560px;
        margin-top: 80px;
        overflow: hidden;
    }

    .df-home-v2__ops-experience-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 0;
        opacity: 1;
    }

    .df-home-v2__ops-experience-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
        filter: brightness(.72) saturate(.96);
    }

    .df-home-v2__ops-experience-shade {
        position: absolute;
        z-index: 2;
        inset: 0;
        opacity: 1;
        background: linear-gradient(90deg, rgba(3,5,4,.82), rgba(3,5,4,.18) 76%);
    }

    .df-home-v2__ops-experience-copy {
        position: absolute;
        z-index: 3;
        left: 6vw;
        right: 6vw;
        bottom: 9%;
        max-width: 760px;
        color: #f5f8f5;
        opacity: 1;
        transform: none;
    }

    .df-home-v2__ops-experience-copy h2 {
        margin: 0;
        font-size: clamp(46px, 8vw, 76px);
        line-height: .95;
        letter-spacing: -.058em;
    }

    .df-home-v2__ops-experience-copy > p:last-child {
        max-width: 570px;
        margin: 22px 0 0;
        color: rgba(245,248,245,.72);
        line-height: 1.55;
    }

    .df-home-v2__business-editorial {
        grid-template-columns: 1fr;
        gap: 54px;
    }

    .df-home-v2__business-selector {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        column-gap: 34px;
        border-top: 0;
    }

    .df-home-v2__business-tab:nth-child(-n+2) {
        border-top: 1px solid rgba(16,20,17,.12);
    }

    .df-home-v2__business-stage {
        min-height: min(68vw,690px);
    }
}

@media (max-width: 700px) {
    .df-home-v2__ops-experience {
        min-height: 520px;
        height: 68vh;
        margin-top: 62px;
    }

    .df-home-v2__ops-experience-copy {
        left: 24px;
        right: 24px;
        bottom: 42px;
    }

    .df-home-v2__ops-experience-copy h2 {
        font-size: clamp(40px, 11.5vw, 58px);
    }

    .df-home-v2__business-types {
        padding: 92px 0 104px;
    }

    .df-home-v2__business-types .df-home-v2__section-head h2 {
        font-size: clamp(46px,12vw,66px);
    }

    .df-home-v2__business-types .df-home-v2__section-head > p:last-child {
        margin-top: 24px;
        font-size: 17px;
    }

    .df-home-v2__business-editorial {
        margin-top: 58px;
        gap: 38px;
    }

    .df-home-v2__business-selector {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .df-home-v2__business-tab,
    .df-home-v2__business-tab:nth-child(-n+2) {
        border-top: 0;
        border-bottom: 1px solid rgba(16,20,17,.12);
    }

    .df-home-v2__business-tab:first-child {
        border-top: 1px solid rgba(16,20,17,.12);
    }

    .df-home-v2__business-label strong {
        font-size: 26px;
    }

    .df-home-v2__business-stage {
        min-height: 520px;
        border-radius: 20px;
    }

    .df-home-v2__business-stage-note {
        left: 22px;
        right: 22px;
        bottom: 22px;
        display: grid;
        gap: 8px;
    }

    .df-home-v2__business-stage-note strong {
        max-width: 280px;
        font-size: 23px;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .df-home-v2__ops-experience-image,
    .df-home-v2__ops-experience-image img,
    .df-home-v2__ops-experience-copy {
        transform: none !important;
    }

    .df-home-v2__business-panel img {
        animation: none !important;
        transform: none !important;
    }
}


/* === v1.0.69 — operations ambient light + handoff readability === */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    /* A real light source BEHIND the Operations composition. The product/snippets stay
       completely clean because this sits at z-index 0 while the stage/copy are above. */
    .df-home-v2.is-scroll-story .df-home-v2__ops-sticky::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        pointer-events: none;
        background:
            radial-gradient(ellipse 48% 58% at 42% 54%, rgba(32,223,114,.20) 0%, rgba(24,176,84,.13) 26%, rgba(13,108,52,.075) 46%, rgba(5,42,22,.035) 62%, transparent 76%),
            radial-gradient(ellipse 32% 34% at 33% 78%, rgba(32,223,114,.10) 0%, rgba(12,92,43,.05) 48%, transparent 78%);
        filter: blur(22px);
        transform: scale(1.05);
        transform-origin: 42% 54%;
    }

    .df-home-v2__ops-shell {
        position: relative;
        z-index: 5;
    }

    /* Divi can impose a heading color with higher specificity. Lock the manifesto
       to DockFlow off-white once the full-bleed image takes over. */
    .df-home-v2__ops-experience-copy h2 {
        color: #f5f8f5 !important;
    }

    .df-home-v2__ops-experience-copy > p:last-child {
        color: rgba(245,248,245,.78) !important;
    }
}

/* === v1.0.71 — business chapter desktop rhythm / first-viewport fit ===
   Keep the editorial scale, but let the complete idea + meaningful photography
   enter a standard 1920x1080 viewport without requiring a discovery scroll. */
@media (min-width: 1101px) {
    .df-home-v2__business-types {
        padding-top: clamp(78px, 5.4vw, 104px);
        padding-bottom: clamp(112px, 8vw, 154px);
    }

    .df-home-v2__business-head {
        max-width: 1060px !important;
    }

    .df-home-v2__business-types .df-home-v2__section-head h2 {
        max-width: 1080px;
        font-size: clamp(54px, 4.55vw, 84px);
        line-height: .94;
        letter-spacing: -.062em;
    }

    .df-home-v2__business-types .df-home-v2__section-head > p:last-child {
        max-width: 760px;
        margin-top: 22px;
        font-size: clamp(17px, 1.05vw, 19px);
        line-height: 1.5;
    }

    .df-home-v2__business-editorial {
        margin-top: clamp(44px, 3.4vw, 64px);
        gap: clamp(48px, 5vw, 86px);
    }

    .df-home-v2__business-tab {
        padding-top: 20px;
        padding-bottom: 22px;
    }

    .df-home-v2__business-label strong {
        font-size: clamp(23px, 1.65vw, 30px);
    }

    .df-home-v2__business-stage {
        min-height: clamp(500px, 40vw, 660px);
    }
}

/* === v1.0.72 — WordPress editorial chapter ==================================
   The site stays the front door; DockFlow becomes the operating layer behind it.
   Intentionally calmer than the photographic business chapter before it. */
.df-home-v2__wordpress {
    position: relative;
    overflow: hidden;
    padding: clamp(96px, 6.8vw, 126px) 0 clamp(108px, 8vw, 148px);
    color: #111512;
    border-top: 1px solid rgba(16, 20, 17, .10);
    background:
        radial-gradient(circle at 86% 18%, rgba(32, 185, 103, .055), transparent 28%),
        linear-gradient(180deg, #fbfaf6 0%, #f7f6f1 100%);
}

.df-home-v2__wordpress::after {
    content: "";
    position: absolute;
    inset: auto -12% -42% 44%;
    height: 68%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(32, 185, 103, .045), transparent 68%);
    filter: blur(20px);
}

.df-home-v2__wordpress .df-home-v2__section-shell {
    position: relative;
    z-index: 1;
}

.df-home-v2__wordpress-grid {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(560px, 1.22fr);
    gap: clamp(64px, 6vw, 116px);
    align-items: center;
}

.df-home-v2__wordpress-copy {
    max-width: 660px !important;
    margin: 0 !important;
}

.df-home-v2__wordpress-copy h2 {
    max-width: 650px;
    margin: 24px 0 0;
    font-size: clamp(54px, 4.35vw, 82px);
    font-weight: 670;
    letter-spacing: -.062em;
    line-height: .95;
}

.df-home-v2__wordpress-copy > p:not(.df-home-v2__eyebrow):not(.df-home-v2__wordpress-note) {
    max-width: 610px;
    margin: 28px 0 0;
    font-size: clamp(17px, 1.12vw, 20px);
    line-height: 1.55;
}

.df-home-v2__wordpress-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 34px;
    border-top: 1px solid rgba(17,21,18,.12);
    border-bottom: 1px solid rgba(17,21,18,.12);
}

.df-home-v2__wordpress-proof span {
    position: relative;
    padding: 15px 20px 15px 0;
    margin-right: 20px;
    color: rgba(17,21,18,.76);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.df-home-v2__wordpress-proof span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #20b967;
    transform: translateY(-50%);
}

.df-home-v2__wordpress-note {
    margin: 20px 0 0 !important;
    color: #17482f !important;
    font-size: 14px !important;
    font-weight: 650;
    letter-spacing: -.015em;
    line-height: 1.4 !important;
}

.df-home-v2__wordpress-system {
    position: relative;
    min-height: 620px;
    padding: 34px 34px 40px;
    border: 1px solid rgba(17,21,18,.10);
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.90), rgba(246,247,242,.86)),
        #f5f6f1;
    box-shadow: 0 34px 82px rgba(29, 38, 31, .09);
}

.df-home-v2__wordpress-site {
    position: absolute;
    z-index: 1;
    top: 34px;
    left: 34px;
    width: 66%;
    overflow: hidden;
    border: 1px solid rgba(17,21,18,.14);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(28,34,30,.09);
}

.df-home-v2__wordpress-browserbar {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    border-bottom: 1px solid rgba(17,21,18,.08);
    background: rgba(248,248,245,.96);
}

.df-home-v2__wordpress-browserbar > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(17,21,18,.20);
}

.df-home-v2__wordpress-browserbar small {
    margin-left: 8px;
    color: rgba(17,21,18,.38);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .015em;
}

.df-home-v2__wordpress-siteview {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    background: #dbe5dd;
}

.df-home-v2__wordpress-siteview::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7,10,8,.42), rgba(7,10,8,.05) 35%, rgba(7,10,8,.56) 100%),
        linear-gradient(90deg, rgba(7,10,8,.25), transparent 56%);
}

.df-home-v2__wordpress-siteview > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 52%;
    filter: saturate(.82) contrast(.96);
    transform: scale(1.025);
}

.df-home-v2__wordpress-sitechrome,
.df-home-v2__wordpress-sitecopy {
    position: absolute;
    z-index: 2;
    left: 24px;
    right: 24px;
    color: #fff;
}

.df-home-v2__wordpress-sitechrome {
    top: 20px;
    display: flex;
    align-items: center;
    gap: 17px;
}

.df-home-v2__wordpress-sitechrome strong {
    margin-right: auto;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .13em;
}

.df-home-v2__wordpress-sitechrome span {
    font-size: 9px;
    font-weight: 580;
    opacity: .72;
}

.df-home-v2__wordpress-sitecopy {
    bottom: 26px;
    max-width: 340px;
    display: grid;
    gap: 8px;
}

.df-home-v2__wordpress-sitecopy small {
    color: rgba(255,255,255,.72);
    font-size: 9px;
    font-weight: 720;
    letter-spacing: .13em;
}

.df-home-v2__wordpress-sitecopy strong {
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 620;
    letter-spacing: -.045em;
    line-height: 1.02;
}

.df-home-v2__wordpress-bridge {
    position: absolute;
    z-index: 3;
    top: 54%;
    left: 50%;
    width: 24%;
    display: grid;
    gap: 9px;
    justify-items: center;
    transform: translate(-10%, -50%);
}

.df-home-v2__wordpress-bridge span {
    padding: 7px 10px;
    border: 1px solid rgba(17,21,18,.10);
    border-radius: 999px;
    color: rgba(17,21,18,.48);
    background: rgba(251,250,246,.92);
    font-size: 9px;
    font-weight: 680;
    letter-spacing: .035em;
    white-space: nowrap;
    box-shadow: 0 7px 20px rgba(28,34,30,.06);
}

.df-home-v2__wordpress-bridge i {
    position: relative;
    width: 100%;
    height: 1px;
    display: block;
    background: linear-gradient(90deg, rgba(32,185,103,.15), #20b967 48%, rgba(32,185,103,.18));
}

.df-home-v2__wordpress-bridge i::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #20b967;
    border-right: 1px solid #20b967;
    transform: translateY(-50%) rotate(45deg);
}

.df-home-v2__wordpress-layer {
    position: absolute;
    z-index: 4;
    right: 34px;
    bottom: 40px;
    width: 52%;
    min-height: 270px;
    padding: 28px 30px 30px;
    border: 1px solid rgba(17,21,18,.12);
    border-radius: 20px;
    background: rgba(250,250,247,.97);
    box-shadow: 0 24px 56px rgba(28,34,30,.13);
}

.df-home-v2__wordpress-layer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(17,21,18,.10);
}

.df-home-v2__wordpress-layer-head img {
    width: min(152px, 48%);
    height: auto;
    display: block;
}

.df-home-v2__wordpress-layer-head span {
    color: #178049;
    font-size: 9px;
    font-weight: 780;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.df-home-v2__wordpress-layer h3 {
    max-width: 380px;
    margin: 23px 0 24px;
    color: #111512 !important;
    font-size: clamp(28px, 2.15vw, 38px);
    font-weight: 620;
    letter-spacing: -.05em;
    line-height: 1.02;
}

.df-home-v2__wordpress-capabilities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(17,21,18,.10);
}

.df-home-v2__wordpress-capabilities span {
    position: relative;
    padding: 13px 10px 13px 17px;
    border-bottom: 1px solid rgba(17,21,18,.10);
    color: rgba(17,21,18,.66);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.df-home-v2__wordpress-capabilities span:nth-child(odd) {
    border-right: 1px solid rgba(17,21,18,.10);
}

.df-home-v2__wordpress-capabilities span::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #20b967;
}

@media (max-width: 1100px) {
    .df-home-v2__wordpress-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .df-home-v2__wordpress-copy {
        max-width: 760px !important;
    }

    .df-home-v2__wordpress-system {
        min-height: 640px;
    }
}

@media (max-width: 700px) {
    .df-home-v2__wordpress {
        padding: 84px 0 94px;
    }

    .df-home-v2__wordpress-grid {
        gap: 44px;
    }

    .df-home-v2__wordpress-copy h2 {
        margin-top: 20px;
        font-size: clamp(44px, 11.5vw, 60px);
    }

    .df-home-v2__wordpress-copy > p:not(.df-home-v2__eyebrow):not(.df-home-v2__wordpress-note) {
        margin-top: 22px;
        font-size: 17px;
    }

    .df-home-v2__wordpress-proof {
        margin-top: 28px;
    }

    .df-home-v2__wordpress-proof span {
        width: 50%;
        margin-right: 0;
        padding: 12px 14px 12px 0;
    }

    .df-home-v2__wordpress-proof span:nth-child(2n)::after {
        display: none;
    }

    .df-home-v2__wordpress-system {
        min-height: 0;
        padding: 18px;
        border-radius: 22px;
    }

    .df-home-v2__wordpress-site,
    .df-home-v2__wordpress-layer {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
    }

    .df-home-v2__wordpress-site {
        border-radius: 16px;
    }

    .df-home-v2__wordpress-siteview {
        min-height: 300px;
    }

    .df-home-v2__wordpress-sitechrome span {
        display: none;
    }

    .df-home-v2__wordpress-sitecopy strong {
        font-size: 28px;
    }

    .df-home-v2__wordpress-bridge {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 18px 0;
        transform: none;
    }

    .df-home-v2__wordpress-bridge i {
        width: 1px;
        height: 30px;
        background: linear-gradient(180deg, rgba(32,185,103,.15), #20b967 50%, rgba(32,185,103,.18));
    }

    .df-home-v2__wordpress-bridge i::after {
        top: auto;
        right: 50%;
        bottom: -1px;
        transform: translateX(50%) rotate(135deg);
    }

    .df-home-v2__wordpress-layer {
        min-height: 0;
        padding: 24px 22px 26px;
        border-radius: 16px;
    }

    .df-home-v2__wordpress-layer-head img {
        width: 138px;
    }

    .df-home-v2__wordpress-layer h3 {
        font-size: 30px;
    }

    .df-home-v2__wordpress-capabilities {
        grid-template-columns: 1fr;
    }

    .df-home-v2__wordpress-capabilities span:nth-child(odd) {
        border-right: 0;
    }
}

/* === v1.0.73 — WordPress composition cleanup ================================
   Remove the decorative outer stage; let the website and DockFlow layer stand
   directly on the editorial section surface. */
.df-home-v2__wordpress-system {
    border: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 700px) {
    .df-home-v2__wordpress-system {
        padding-inline: 0;
    }
}

/* === v1.0.74 — WordPress layered-card perspective ===========================
   Echo the hero's product depth without turning this editorial chapter into a
   3D gimmick. Also move the right-column status dots clear of the center seam. */
.df-home-v2__wordpress-capabilities span:nth-child(even) {
    padding-left: 31px;
}

.df-home-v2__wordpress-capabilities span:nth-child(even)::before {
    left: 14px;
}

@media (min-width: 1101px) {
    .df-home-v2__wordpress-system {
        perspective: 1600px;
        transform-style: preserve-3d;
    }

    .df-home-v2__wordpress-site {
        transform-origin: 58% 48%;
        transform: rotateX(1deg) rotateY(3deg) rotateZ(-0.65deg);
        box-shadow: 0 22px 50px rgba(28,34,30,.10);
    }

    .df-home-v2__wordpress-layer {
        transform-origin: 44% 52%;
        transform: translateZ(16px) rotateX(-0.8deg) rotateY(-3.2deg) rotateZ(0.7deg);
        box-shadow: -10px 26px 62px rgba(28,34,30,.15);
    }
}

@media (max-width: 700px) {
    .df-home-v2__wordpress-capabilities span:nth-child(even) {
        padding-left: 17px;
    }

    .df-home-v2__wordpress-capabilities span:nth-child(even)::before {
        left: 0;
    }
}

/* === Operating depth chapter =================================================
   Sales-first product proof: one clear message, three benefits, one screenshot.
   Intentionally static apart from the site's standard reveal behavior. */
.df-home-v2__operating-depth {
    position: relative;
    overflow: hidden;
    padding: clamp(86px, 5.7vw, 108px) 0 clamp(92px, 6vw, 114px);
    color: #111512;
    border-top: 1px solid rgba(16, 20, 17, .08);
    background:
        radial-gradient(circle at 82% 28%, rgba(32, 185, 103, .075), transparent 28%),
        linear-gradient(180deg, #f5f4ef 0%, #faf9f6 100%);
}

.df-home-v2__operating-depth .df-home-v2__section-shell {
    position: relative;
    z-index: 1;
}

.df-home-v2__depth-grid {
    display: grid;
    grid-template-columns: minmax(420px, .88fr) minmax(560px, 1.12fr);
    gap: clamp(62px, 6vw, 116px);
    align-items: center;
}

.df-home-v2__depth-copy {
    max-width: 620px;
}

.df-home-v2__depth-copy h2 {
    max-width: 620px;
    margin: 24px 0 0;
    font-size: clamp(56px, 4.35vw, 80px);
    font-weight: 675;
    letter-spacing: -.064em;
    line-height: .94;
}

.df-home-v2__depth-lede {
    max-width: 580px;
    margin: 24px 0 0;
    font-size: clamp(17px, 1.08vw, 19px);
    letter-spacing: -.02em;
    line-height: 1.58;
}

.df-home-v2__depth-points {
    margin-top: 28px;
    border-top: 1px solid rgba(17, 21, 18, .13);
}

.df-home-v2__depth-point {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid rgba(17, 21, 18, .11);
}

.df-home-v2__depth-index {
    padding-top: 4px;
    color: #18844a;
    font-size: 10px;
    font-weight: 820;
    letter-spacing: .12em;
    line-height: 1.2;
}

.df-home-v2__depth-point h3 {
    margin: 0;
    color: #141915 !important;
    font-size: clamp(19px, 1.2vw, 23px);
    font-weight: 680;
    letter-spacing: -.036em;
    line-height: 1.16;
}

.df-home-v2__depth-point p {
    max-width: 490px;
    margin: 6px 0 0;
    color: rgba(17, 21, 18, .53) !important;
    font-size: 14px;
    letter-spacing: -.012em;
    line-height: 1.48;
}

.df-home-v2__depth-cta {
    margin-top: 26px;
}

.df-home-v2__depth-stage {
    position: relative;
    min-width: 0;
    min-height: 650px;
    margin: 0;
    padding: 0 32px 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 32px;
    background:
        radial-gradient(circle at 66% 24%, rgba(32, 223, 114, .13), transparent 29%),
        radial-gradient(circle at 20% 92%, rgba(32, 223, 114, .05), transparent 26%),
        #07100b;
    box-shadow: 0 34px 86px rgba(17, 25, 19, .17);
    isolation: isolate;
}

.df-home-v2__depth-stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 64%;
    aspect-ratio: 1;
    right: -18%;
    top: 5%;
    border-radius: 50%;
    background: rgba(32, 223, 114, .075);
    filter: blur(58px);
}

.df-home-v2__depth-stagebar {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 -32px 0;
    padding: 0 32px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgba(238, 245, 239, .43);
    font-size: 9px;
    font-weight: 780;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.df-home-v2__depth-stagebar > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(238, 245, 239, .72);
}

.df-home-v2__depth-stagebar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #20df72;
    box-shadow: 0 0 0 5px rgba(32, 223, 114, .07), 0 0 18px rgba(32, 223, 114, .30);
}

.df-home-v2__depth-product {
    position: relative;
    width: min(68%, 500px);
    margin: 30px auto 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: #f8faf8;
    box-shadow: 0 34px 78px rgba(0, 0, 0, .40);
}

.df-home-v2__depth-product img {
    width: 100%;
    height: auto;
}


@media (max-width: 1320px) {
    .df-home-v2__depth-grid {
        grid-template-columns: minmax(370px, .82fr) minmax(520px, 1.18fr);
        gap: 54px;
    }

    .df-home-v2__depth-copy h2 {
        font-size: clamp(54px, 4.25vw, 70px);
    }

    .df-home-v2__depth-stage {
        min-height: 560px;
        padding-inline: 26px;
    }

    .df-home-v2__depth-stagebar {
        margin-inline: -26px;
        padding-inline: 26px;
    }

    .df-home-v2__depth-product {
        width: min(68%, 470px);
        margin-top: 28px;
    }
}

@media (max-width: 1100px) {
    .df-home-v2__operating-depth {
        padding: 98px 0 108px;
    }

    .df-home-v2__depth-grid {
        grid-template-columns: 1fr;
        gap: 54px;
    }

    .df-home-v2__depth-copy {
        max-width: 780px;
    }

    .df-home-v2__depth-copy h2 {
        max-width: 720px;
        font-size: clamp(58px, 7vw, 78px);
    }

    .df-home-v2__depth-lede {
        max-width: 700px;
    }

    .df-home-v2__depth-points {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-bottom: 1px solid rgba(17, 21, 18, .11);
    }

    .df-home-v2__depth-point {
        display: block;
        padding: 20px 22px 22px 0;
        border-bottom: 0;
        border-right: 1px solid rgba(17, 21, 18, .11);
    }

    .df-home-v2__depth-point + .df-home-v2__depth-point {
        padding-left: 22px;
    }

    .df-home-v2__depth-point:last-child {
        padding-right: 0;
        border-right: 0;
    }

    .df-home-v2__depth-index {
        display: block;
        margin-bottom: 14px;
    }

    .df-home-v2__depth-stage {
        min-height: 0;
        padding-bottom: 28px;
    }

    .df-home-v2__depth-product {
        width: min(58%, 480px);
    }
}

@media (max-width: 700px) {
    .df-home-v2__operating-depth {
        padding: 82px 0 90px;
    }

    .df-home-v2__depth-grid {
        gap: 40px;
    }

    .df-home-v2__depth-copy h2 {
        margin-top: 20px;
        font-size: clamp(44px, 11.5vw, 58px);
        letter-spacing: -.058em;
        line-height: .96;
    }

    .df-home-v2__depth-lede {
        margin-top: 21px;
        font-size: 17px;
        line-height: 1.55;
    }

    .df-home-v2__depth-points {
        display: block;
        margin-top: 28px;
        border-bottom: 0;
    }

    .df-home-v2__depth-point,
    .df-home-v2__depth-point + .df-home-v2__depth-point {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
        padding: 16px 0 17px;
        border-right: 0;
        border-bottom: 1px solid rgba(17, 21, 18, .11);
    }

    .df-home-v2__depth-point:last-child {
        border-bottom: 0;
    }

    .df-home-v2__depth-index {
        margin: 0;
        padding-top: 4px;
    }

    .df-home-v2__depth-point h3 {
        font-size: 20px;
    }

    .df-home-v2__depth-point p {
        font-size: 13px;
    }

    .df-home-v2__depth-cta {
        width: 100%;
        margin-top: 26px;
    }

    .df-home-v2__depth-stage {
        padding: 0 16px 22px;
        border-radius: 24px;
    }

    .df-home-v2__depth-stagebar {
        min-height: 50px;
        margin: 0 -16px;
        padding: 0 16px;
    }

    .df-home-v2__depth-stagebar > span:last-child {
        display: none;
    }

    .df-home-v2__depth-product {
        width: min(92%, 430px);
        margin-top: 22px;
        border-radius: 16px;
    }
}

/* ========================================================================== 
   HERO FEATURE STORY — desktop cinematic proof, tablet/mobile normal flow
   ========================================================================== */

.df-home-v2__hero-snippet-layer {
    display: none;
}

.df-home-v2__hero-mobile-story {
    display: block;
    margin: 24px auto 0;
    padding: 0 0 20px;
}

.df-home-v2__hero-mobile-story > header {
    max-width: 720px;
    margin: 0 0 54px;
}

.df-home-v2__hero-mobile-story > header h2 {
    margin: 0;
    color: #f4f7f4;
    font-size: clamp(46px, 7vw, 74px);
    font-weight: 720;
    letter-spacing: -.062em;
    line-height: .96;
}

.df-home-v2__hero-mobile-story > header > p:last-child {
    max-width: 620px;
    margin: 22px 0 0;
    color: rgba(228,235,229,.62);
    font-size: 18px;
    line-height: 1.55;
}

.df-home-v2__hero-mobile-feature {
    display: grid;
    grid-template-columns: minmax(220px, .64fr) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 68px);
    align-items: center;
    padding: 42px 0;
    border-top: 1px solid rgba(255,255,255,.10);
}

.df-home-v2__hero-mobile-copy small {
    display: block;
    margin-bottom: 10px;
    color: #48dd8a;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .13em;
}

.df-home-v2__hero-mobile-copy h3 {
    margin: 0;
    color: #f4f7f4;
    font-size: clamp(30px, 4.2vw, 48px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1;
}

.df-home-v2__hero-mobile-copy p {
    max-width: 470px;
    margin: 14px 0 0;
    color: rgba(228,235,229,.58);
    font-size: 16px;
    line-height: 1.55;
}

/* Shared miniature DockFlow UI. These are marketing proof fragments, not fake screens. */
.df-home-v2__mini-booking,
.df-home-v2__mini-kpis,
.df-home-v2__mini-departure,
.df-home-v2__mini-pass {
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

.df-home-v2__mini-booking {
    width: min(100%, 430px);
    padding: 21px 22px 18px;
    border: 1px solid #cfe1da;
    border-left: 4px solid #128f72;
    border-radius: 18px;
    background: #f3fbf8;
    color: #14251f;
    box-shadow: 0 24px 64px rgba(0,0,0,.30);
}

.df-home-v2__mini-booking-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
    color: #6d7c77;
    font-size: 12px;
    font-weight: 620;
}

.df-home-v2__mini-booking-top b {
    padding: 5px 9px;
    border: 1px solid #d8e5e0;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #596a64;
    font-size: 11px;
}

.df-home-v2__mini-booking > strong {
    display: block;
    color: #10201a;
    font-size: 17px;
    font-weight: 760;
    letter-spacing: -.025em;
    line-height: 1.15;
}

.df-home-v2__mini-booking > span {
    display: block;
    margin-top: 6px;
    color: #75827e;
    font-size: 12px;
}

.df-home-v2__mini-booking-bottom {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 24px;
    color: #1b7c68;
    font-size: 12px;
    font-weight: 670;
}

.df-home-v2__mini-booking-bottom i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #21b18d;
    box-shadow: 0 0 0 4px rgba(33,177,141,.09);
}

.df-home-v2__mini-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(100%, 520px);
}

.df-home-v2__mini-kpis > div {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 13px;
    align-items: center;
    min-height: 92px;
    padding: 16px;
    border: 1px solid #d7e1dd;
    border-radius: 17px;
    background: #fff;
    color: #14231e;
    box-shadow: 0 22px 58px rgba(0,0,0,.18);
}

.df-home-v2__mini-kpi-icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: #e7f8f1;
    color: #069b64;
    font-size: 18px;
    font-style: normal;
    font-weight: 760;
}

.df-home-v2__mini-kpi-icon--blue {
    background: #eaf1ff;
    color: #3373e5;
}

.df-home-v2__mini-kpi-icon--amber {
    background: #fff3df;
    color: #bd7c09;
}

.df-home-v2__mini-kpis small {
    align-self: end;
    color: #788782;
    font-size: 11px;
    font-weight: 620;
}

.df-home-v2__mini-kpis strong {
    align-self: start;
    color: #111d19;
    font-size: 22px;
    font-weight: 760;
    letter-spacing: -.03em;
}

.df-home-v2__mini-departure {
    width: min(100%, 610px);
    overflow: hidden;
    border: 1px solid #d9e2df;
    border-radius: 22px;
    background: #fff;
    color: #14231e;
    box-shadow: 0 30px 82px rgba(0,0,0,.28);
}

.df-home-v2__mini-departure-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px 18px;
    border-bottom: 1px solid #e5ebe8;
}

.df-home-v2__mini-departure-head > div {
    display: grid;
    gap: 3px;
}

.df-home-v2__mini-departure-head small {
    color: #10a963;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.df-home-v2__mini-departure-head strong {
    color: #102238;
    font-size: 23px;
    font-weight: 760;
    letter-spacing: -.04em;
}

.df-home-v2__mini-departure-head span {
    color: #73879a;
    font-size: 11px;
}

.df-home-v2__mini-departure-head b {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid #d7e2de;
    border-radius: 12px;
    color: #6d8190;
    font-size: 22px;
    font-weight: 350;
}

.df-home-v2__mini-departure-trip {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 21px 22px;
    background:
        radial-gradient(circle at 78% 45%, rgba(79,229,148,.17), transparent 40%),
        #fbfdfc;
}

.df-home-v2__mini-departure-trip > img {
    width: 78px;
    aspect-ratio: 1;
    border-radius: 14px;
    object-fit: cover;
}

.df-home-v2__mini-departure-trip > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.df-home-v2__mini-departure-trip strong {
    color: #12221d;
    font-size: 17px;
    font-weight: 760;
    letter-spacing: -.025em;
    line-height: 1.15;
}

.df-home-v2__mini-departure-trip span {
    color: #65736e;
    font-size: 12px;
}

.df-home-v2__mini-resource {
    margin-top: 3px;
}

.df-home-v2__mini-departure-trip em {
    align-self: start;
    padding: 8px 12px;
    border: 1px solid #abecc7;
    border-radius: 999px;
    background: #dcf9e8;
    color: #148747;
    font-size: 11px;
    font-style: normal;
    font-weight: 720;
}

.df-home-v2__mini-pass {
    width: min(100%, 470px);
    padding: 24px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 24px;
    background: #07150e;
    color: #f5f8f5;
    box-shadow: 0 34px 90px rgba(0,0,0,.46);
}

.df-home-v2__mini-pass-top {
    display: grid;
    gap: 5px;
    padding-bottom: 18px;
}

.df-home-v2__mini-pass-top small,
.df-home-v2__mini-pass-card small {
    color: #8f9d95;
    font-size: 9px;
    font-weight: 780;
    letter-spacing: .11em;
}

.df-home-v2__mini-pass-top strong {
    font-size: 20px;
    font-weight: 730;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.df-home-v2__mini-pass-top span {
    color: #9aa69f;
    font-size: 11px;
}

.df-home-v2__mini-pass-card {
    padding: 17px;
    border-radius: 19px;
    background: #f9fbf9;
    color: #111a15;
}

.df-home-v2__mini-pass-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.df-home-v2__mini-pass-meta > div {
    display: grid;
    gap: 4px;
}

.df-home-v2__mini-pass-meta strong {
    font-size: 17px;
    font-weight: 760;
}

.df-home-v2__mini-pass-meta em {
    padding: 7px 11px;
    border-radius: 999px;
    background: #dcf8e7;
    color: #148847;
    font-size: 10px;
    font-style: normal;
    font-weight: 720;
}

.df-home-v2__mini-pass-card > img {
    display: block;
    width: min(76%, 280px);
    aspect-ratio: 1;
    margin: 18px auto 16px;
    object-fit: contain;
}

.df-home-v2__mini-pass-code {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding-top: 13px;
    border-top: 1px dashed #d8dedb;
}

.df-home-v2__mini-pass-code strong {
    font-size: 11px;
    letter-spacing: .02em;
}

@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    /* Give the story enough physical scroll distance while preserving the original hero reveal speed. */
    .df-home-v2.is-scroll-story .df-home-v2__hero {
        height: 470vh;
        min-height: 3560px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-mobile-story {
        display: none;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-context {
        opacity: var(--df-hero-story-opacity, 0);
        transform:
            translate3d(var(--df-hero-story-x, -22px), var(--df-hero-story-y, 24px), 0)
            scale(var(--df-hero-story-scale, .99));
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-context--operating {
        --df-hero-story-opacity: var(--df-hero-story-operating-opacity, 0);
        --df-hero-story-x: var(--df-hero-story-operating-x, -22px);
        --df-hero-story-y: var(--df-hero-story-operating-y, 24px);
        --df-hero-story-scale: var(--df-hero-story-operating-scale, .99);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-context--schedule {
        --df-hero-story-opacity: var(--df-hero-story-schedule-opacity, 0);
        --df-hero-story-x: var(--df-hero-story-schedule-x, -22px);
        --df-hero-story-y: var(--df-hero-story-schedule-y, 24px);
        --df-hero-story-scale: var(--df-hero-story-schedule-scale, .99);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-context--readiness {
        --df-hero-story-opacity: var(--df-hero-story-readiness-opacity, 0);
        --df-hero-story-x: var(--df-hero-story-readiness-x, -22px);
        --df-hero-story-y: var(--df-hero-story-readiness-y, 24px);
        --df-hero-story-scale: var(--df-hero-story-readiness-scale, .99);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-context--departure {
        --df-hero-story-opacity: var(--df-hero-story-departure-opacity, 0);
        --df-hero-story-x: var(--df-hero-story-departure-x, -22px);
        --df-hero-story-y: var(--df-hero-story-departure-y, 24px);
        --df-hero-story-scale: var(--df-hero-story-departure-scale, .99);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-context--boarding {
        --df-hero-story-opacity: var(--df-hero-story-boarding-opacity, 0);
        --df-hero-story-x: var(--df-hero-story-boarding-x, -22px);
        --df-hero-story-y: var(--df-hero-story-boarding-y, 24px);
        --df-hero-story-scale: var(--df-hero-story-boarding-scale, .99);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-snippet-layer {
        position: absolute;
        z-index: 18;
        inset: 0;
        display: block;
        pointer-events: none;
        transform-style: preserve-3d;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-snippet {
        position: absolute;
        opacity: var(--df-hero-snippet-opacity, 0);
        transform:
            translate3d(var(--df-hero-snippet-x, 0), var(--df-hero-snippet-y, 28px), 96px)
            rotateZ(var(--df-hero-snippet-rz, 0deg))
            scale(var(--df-hero-snippet-scale, .96));
        transform-origin: center center;
        will-change: transform, opacity;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-snippet::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 10% 4% -7%;
        border-radius: 24px;
        background: rgba(0,0,0,.40);
        filter: blur(24px);
        transform: translateZ(-1px);
        pointer-events: none;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-snippet--booking {
        top: 51%;
        left: 26%;
        width: 460px;
        --df-hero-snippet-opacity: var(--df-hero-snippet-booking-opacity, 0);
        --df-hero-snippet-y: var(--df-hero-snippet-booking-y, 30px);
        --df-hero-snippet-scale: var(--df-hero-snippet-booking-scale, .95);
        --df-hero-snippet-rz: -1.2deg;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-snippet--kpis {
        top: 16%;
        left: 38%;
        width: 560px;
        --df-hero-snippet-opacity: var(--df-hero-snippet-kpis-opacity, 0);
        --df-hero-snippet-y: var(--df-hero-snippet-kpis-y, 30px);
        --df-hero-snippet-scale: var(--df-hero-snippet-kpis-scale, .95);
        --df-hero-snippet-rz: .8deg;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-snippet--departure {
        top: 22%;
        right: 2.5%;
        width: 640px;
        --df-hero-snippet-opacity: var(--df-hero-snippet-departure-opacity, 0);
        --df-hero-snippet-y: var(--df-hero-snippet-departure-y, 30px);
        --df-hero-snippet-scale: var(--df-hero-snippet-departure-scale, .95);
        --df-hero-snippet-rz: -.65deg;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-snippet--pass {
        top: 5%;
        right: 7%;
        width: 470px;
        --df-hero-snippet-opacity: var(--df-hero-snippet-pass-opacity, 0);
        --df-hero-snippet-y: var(--df-hero-snippet-pass-y, 34px);
        --df-hero-snippet-scale: var(--df-hero-snippet-pass-scale, .94);
        --df-hero-snippet-rz: 1deg;
    }
}

@media (max-width: 1100px) {
    .df-home-v2__hero-context,
    .df-home-v2__hero-snippet-layer {
        display: none;
    }

    .df-home-v2__hero-mobile-story {
        display: block;
    }

    .df-home-v2__hero {
        padding-bottom: 72px;
    }

    .df-home-v2__hero-stage {
        margin-bottom: 34px;
    }

    .df-home-v2__hero-mobile-feature > .df-home-v2__mini-booking,
    .df-home-v2__hero-mobile-feature > .df-home-v2__mini-kpis,
    .df-home-v2__hero-mobile-feature > .df-home-v2__mini-departure,
    .df-home-v2__hero-mobile-feature > .df-home-v2__mini-pass {
        justify-self: end;
    }
}

@media (max-width: 767px) {
    .df-home-v2__hero-mobile-story {
        margin-top: 4px;
    }

    .df-home-v2__hero-mobile-story > header {
        margin-bottom: 26px;
    }

    .df-home-v2__hero-mobile-story > header h2 {
        font-size: clamp(44px, 13vw, 62px);
    }

    .df-home-v2__hero-mobile-story > header > p:last-child {
        font-size: 16px;
    }

    .df-home-v2__hero-mobile-feature {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 34px 0 38px;
    }

    .df-home-v2__hero-mobile-copy h3 {
        font-size: 34px;
    }

    .df-home-v2__hero-mobile-feature > .df-home-v2__mini-booking,
    .df-home-v2__hero-mobile-feature > .df-home-v2__mini-kpis,
    .df-home-v2__hero-mobile-feature > .df-home-v2__mini-departure,
    .df-home-v2__hero-mobile-feature > .df-home-v2__mini-pass {
        justify-self: stretch;
    }

    .df-home-v2__mini-booking {
        width: 100%;
    }

    .df-home-v2__mini-kpis {
        width: 100%;
        gap: 8px;
    }

    .df-home-v2__mini-kpis > div {
        grid-template-columns: 38px 1fr;
        min-height: 76px;
        padding: 12px;
        border-radius: 14px;
    }

    .df-home-v2__mini-kpi-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        font-size: 15px;
    }

    .df-home-v2__mini-kpis strong {
        font-size: 18px;
    }

    .df-home-v2__mini-departure-head {
        padding: 17px;
    }

    .df-home-v2__mini-departure-head strong {
        font-size: 20px;
    }

    .df-home-v2__mini-departure-trip {
        grid-template-columns: 62px 1fr;
        padding: 17px;
    }

    .df-home-v2__mini-departure-trip > img {
        width: 62px;
    }

    .df-home-v2__mini-departure-trip em {
        grid-column: 2;
        justify-self: start;
        margin-top: 4px;
    }

    .df-home-v2__mini-pass {
        width: 100%;
        padding: 18px;
        border-radius: 20px;
    }

    .df-home-v2__mini-pass-card > img {
        width: min(82%, 250px);
    }
}

@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    .df-home-v2__hero-mobile-story {
        display: none;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-snippet--booking {
        top: 44%;
    }
}

/* =========================================================
   Experience operator fit — static editorial refresh
   No tabs, no reveal choreography, no hover dependency.
   The section is intentionally a calm sales pause after the
   cinematic operating-day story.
   ========================================================= */
.df-home-v2__business-types {
    padding: clamp(96px, 8.2vw, 142px) 0 clamp(104px, 9vw, 154px);
}

.df-home-v2__business-static {
    display: grid;
    grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr);
    gap: clamp(68px, 7.2vw, 128px);
    align-items: center;
}

.df-home-v2__business-copy {
    position: relative;
    z-index: 3;
    max-width: 640px;
}

.df-home-v2__business-copy .df-home-v2__eyebrow {
    margin-bottom: 28px;
    font-size: var(--df-home-type-eyebrow-size);
    font-weight: var(--df-home-type-eyebrow-weight);
    letter-spacing: var(--df-home-type-eyebrow-tracking);
}

.df-home-v2__business-copy h2 {
    max-width: 690px;
    margin: 0;
    font-size: clamp(56px, 5.2vw, 92px);
    font-weight: 700;
    letter-spacing: -.067em;
    line-height: .94;
    text-wrap: balance;
}

.df-home-v2__business-copy h2 span {
    color: var(--df-home-green);
}

.df-home-v2__business-copy > p {
    max-width: 590px;
    margin: 34px 0 0;
    font-size: clamp(18px, 1.2vw, 21px);
    font-weight: 470;
    letter-spacing: -.018em;
    line-height: 1.55;
}

.df-home-v2__business-promise {
    display: grid;
    gap: 5px;
    max-width: 520px;
    margin-top: 42px;
    padding-top: 24px;
    border-top: 1px solid rgba(16, 20, 17, .14);
}

.df-home-v2__business-promise span {
    color: rgba(17, 21, 18, .48);
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.df-home-v2__business-promise strong {
    color: #111512;
    font-size: clamp(19px, 1.35vw, 24px);
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.df-home-v2__business-cards {
    position: relative;
    min-height: clamp(520px, 37vw, 650px);
    isolation: isolate;
}

.df-home-v2__business-cards::before {
    content: "";
    position: absolute;
    inset: 12% 9% 8%;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(32, 223, 114, .115), rgba(32, 223, 114, 0) 68%);
    filter: blur(22px);
    pointer-events: none;
}

.df-home-v2__business-card {
    position: absolute;
    width: clamp(205px, 15vw, 262px);
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    background: #090b09;
    color: #f5f8f5;
    box-shadow:
        0 34px 68px rgba(0, 0, 0, .20),
        0 8px 24px rgba(0, 0, 0, .10);
    transform-origin: 50% 78%;
}

.df-home-v2__business-card-media {
    position: relative;
    aspect-ratio: 1 / .82;
    overflow: hidden;
    background: #111411;
}

.df-home-v2__business-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 60%, rgba(4, 8, 5, .22));
}

.df-home-v2__business-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.98) contrast(1.01);
}

.df-home-v2__business-card--rentals .df-home-v2__business-card-media img {
    object-position: 50% 54%;
}

.df-home-v2__business-card--charters .df-home-v2__business-card-media img {
    object-position: 50% 49%;
}

.df-home-v2__business-card-body {
    min-height: 146px;
    padding: 19px 20px 22px;
}

.df-home-v2__business-card-body small {
    display: block;
    margin-bottom: 10px;
    color: var(--df-home-green);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: .12em;
    line-height: 1.25;
    text-transform: uppercase;
}

.df-home-v2__business-card-body h3 {
    margin: 0;
    color: #f6f8f5;
    font-size: clamp(21px, 1.6vw, 27px);
    font-weight: 650;
    letter-spacing: -.047em;
    line-height: 1.04;
}

.df-home-v2__business-card--tours {
    top: 4%;
    left: 2%;
    z-index: 2;
    transform: rotate(-5.5deg);
}

.df-home-v2__business-card--rentals {
    right: 25%;
    top: 0;
    z-index: 4;
    transform: rotate(3.2deg) translateY(8px);
}

.df-home-v2__business-card--charters {
    left: 20%;
    bottom: 0;
    z-index: 5;
    transform: rotate(2.1deg);
}

.df-home-v2__business-card--events {
    right: 1%;
    bottom: 5%;
    z-index: 3;
    transform: rotate(-4deg);
}

@media (max-width: 1180px) {
    .df-home-v2__business-static {
        grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
        gap: clamp(44px, 5vw, 72px);
    }

    .df-home-v2__business-copy h2 {
        font-size: clamp(50px, 6vw, 72px);
    }

    .df-home-v2__business-card {
        width: clamp(188px, 20vw, 226px);
        border-radius: 20px;
    }

    .df-home-v2__business-card-body {
        min-height: 132px;
        padding: 17px 18px 20px;
    }
}

@media (max-width: 900px) {
    .df-home-v2__business-types {
        padding: 88px 0 96px;
    }

    .df-home-v2__business-static {
        grid-template-columns: 1fr;
        gap: 58px;
    }

    .df-home-v2__business-copy {
        max-width: 760px;
    }

    .df-home-v2__business-copy h2 {
        max-width: 760px;
        font-size: clamp(52px, 9vw, 78px);
    }

    .df-home-v2__business-copy > p {
        max-width: 680px;
    }

    .df-home-v2__business-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        min-height: 0;
    }

    .df-home-v2__business-cards::before {
        inset: 8% 10%;
    }

    .df-home-v2__business-card,
    .df-home-v2__business-card--tours,
    .df-home-v2__business-card--rentals,
    .df-home-v2__business-card--charters,
    .df-home-v2__business-card--events {
        position: relative;
        inset: auto;
        width: auto;
        transform: none;
    }

    .df-home-v2__business-card-media {
        aspect-ratio: 16 / 10;
    }

    .df-home-v2__business-card-body {
        min-height: 118px;
    }
}

@media (max-width: 560px) {
    .df-home-v2__business-types {
        padding: 72px 0 80px;
    }

    .df-home-v2__business-types .df-home-v2__section-shell {
        width: min(calc(100% - 34px), var(--df-home-max));
    }

    .df-home-v2__business-static {
        gap: 42px;
    }

    .df-home-v2__business-copy .df-home-v2__eyebrow {
        margin-bottom: 22px;
    }

    .df-home-v2__business-copy h2 {
        font-size: clamp(44px, 13.5vw, 62px);
        letter-spacing: -.06em;
        line-height: .95;
        text-wrap: pretty;
    }

    .df-home-v2__business-copy > p {
        margin-top: 26px;
        font-size: 17px;
        line-height: 1.52;
    }

    .df-home-v2__business-promise {
        margin-top: 32px;
        padding-top: 20px;
    }

    .df-home-v2__business-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .df-home-v2__business-card {
        display: grid;
        grid-template-columns: 42% minmax(0, 1fr);
        min-height: 126px;
        border-radius: 18px;
        box-shadow: 0 18px 38px rgba(0, 0, 0, .14);
    }

    .df-home-v2__business-card-media {
        height: 100%;
        aspect-ratio: auto;
    }

    .df-home-v2__business-card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 126px;
        padding: 16px 16px 17px;
    }

    .df-home-v2__business-card-body small {
        margin-bottom: 8px;
        font-size: 9px;
    }

    .df-home-v2__business-card-body h3 {
        font-size: clamp(20px, 5.8vw, 24px);
    }
}

@media (min-width: 1181px) {
    .df-home-v2__business-card--charters {
        bottom: -7%;
        left: 22%;
    }
}

/* v1.0.50 — Hero final handoff.
   The fourth editorial state remains Departure details. The old standalone QR
   snippet is gone. From that same departure thumbnail, the camera pulls back,
   pushes through the image, and resolves into one compact Pass → Scan → Checked-in
   composition. This is part of the hero, not a new homepage section. */
.df-home-v2__hero-handoff {
    display: none;
}

.df-home-v2__hero-mobile-scan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px 34px;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
    padding: 14px 15px;
    border: 1px solid rgba(18, 35, 29, .10);
    border-radius: 17px;
    background: linear-gradient(115deg, #f8fbf9, #eef8f2);
    color: #14231e;
}

.df-home-v2__hero-mobile-scan > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.df-home-v2__hero-mobile-scan small {
    color: #738179;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.df-home-v2__hero-mobile-scan strong {
    overflow: hidden;
    color: #14231e;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-home-v2__hero-mobile-scan > img {
    display: block;
    width: 58px;
    height: 58px;
    padding: 5px;
    border-radius: 11px;
    background: #fff;
    object-fit: contain;
}

.df-home-v2__hero-mobile-scan > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #dff8e9;
    color: #119650;
}

.df-home-v2__hero-mobile-scan svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    /* The departure card remains the fourth and final COPY state. Its image is
       nudged toward viewport center before the visual handoff begins. */
    .df-home-v2.is-scroll-story .df-home-v2__hero-snippet--departure {
        --df-hero-snippet-rz: var(--df-hero-snippet-departure-rz, -.65deg);
        transform:
            translate3d(var(--df-hero-snippet-departure-x, 0px), var(--df-hero-snippet-departure-y, 30px), 96px)
            rotateZ(var(--df-hero-snippet-rz))
            scale(var(--df-hero-snippet-departure-scale, .95));
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff {
        position: absolute;
        z-index: 24;
        top: var(--df-hero-handoff-top, 50%);
        left: var(--df-hero-handoff-left, 50%);
        display: block;
        width: var(--df-hero-handoff-width, 80px);
        height: var(--df-hero-handoff-height, 80px);
        overflow: hidden;
        border: 0;
        outline: 0;
        border-radius: var(--df-hero-handoff-radius, 14px);
        background: #07100b;
        box-shadow: 0 54px 150px rgba(0,0,0,var(--df-hero-handoff-shadow, 0));
        opacity: var(--df-hero-handoff-opacity, 0);
        transform: translateZ(0) scale(var(--df-hero-handoff-scale, 1));
        transform-origin: center center;
        pointer-events: none;
        will-change: top, left, width, height, border-radius, opacity, transform;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff-photo,
    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff-photo > img,
    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff-shade {
        position: absolute;
        inset: 0;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff-photo > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 48%;
        filter: brightness(var(--df-hero-handoff-brightness, .90)) saturate(var(--df-hero-handoff-saturation, .96));
        transform: scale(var(--df-hero-handoff-image-scale, 1.06));
        will-change: transform, filter;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff-shade {
        background:
            radial-gradient(circle at 50% 48%, transparent 0%, rgba(5,12,8,.08) 40%, rgba(4,8,6,.60) 100%),
            linear-gradient(90deg, rgba(3,7,5,.52), rgba(3,7,5,.12) 45%, rgba(3,7,5,.60));
        opacity: var(--df-hero-handoff-shade-opacity, 0);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition {
        position: absolute;
        z-index: 3;
        inset: 0;
        display: grid;
        grid-template-columns: minmax(310px, .90fr) minmax(300px, .78fr);
        gap: clamp(28px, 3.4vw, 58px);
        align-items: center;
        justify-content: center;
        padding: clamp(34px, 4.5vw, 72px);
        opacity: var(--df-hero-boarding-opacity, 0);
        transform: translate3d(0, var(--df-hero-boarding-y, 28px), 0) scale(var(--df-hero-boarding-scale, .96));
        will-change: transform, opacity;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-pass-card,
    .df-home-v2.is-scroll-story .df-home-v2__hero-scanner-card {
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 25px;
        box-shadow: 0 34px 90px rgba(0,0,0,.34);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-pass-card {
        align-self: center;
        background: rgba(248,251,249,.96);
        color: #132019;
        transform: perspective(1100px) rotateY(var(--df-hero-pass-ry, 5deg)) rotateZ(var(--df-hero-pass-rz, -2.2deg)) translate3d(var(--df-hero-pass-x, -34px), var(--df-hero-pass-y, 18px), 0);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-pass-card header {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        padding: 20px 22px 17px;
        border-bottom: 1px solid rgba(20,32,25,.08);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-pass-card header > div,
    .df-home-v2.is-scroll-story .df-home-v2__hero-scanner-card header > div {
        display: grid;
        gap: 3px;
        min-width: 0;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-pass-card small,
    .df-home-v2.is-scroll-story .df-home-v2__hero-scanner-card small {
        color: #76827b;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-pass-card header strong {
        color: #132019;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -.035em;
        line-height: 1.08;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-pass-card header span {
        color: #7c8981;
        font-size: 11px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-pass-card header em {
        align-self: start;
        padding: 7px 10px;
        border-radius: 999px;
        background: #dff8e9;
        color: #118b49;
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-pass-body {
        display: grid;
        grid-template-columns: minmax(120px, .8fr) minmax(130px, 1fr);
        gap: 20px;
        align-items: center;
        padding: 22px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-pass-body > img {
        display: block;
        width: min(100%, 190px);
        aspect-ratio: 1;
        justify-self: center;
        padding: 8px;
        border: 1px solid #e5ebe8;
        border-radius: 18px;
        background: #fff;
        object-fit: contain;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-pass-body > div {
        display: grid;
        gap: 5px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-pass-body strong {
        color: #132019;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -.035em;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-pass-body span {
        color: #647169;
        font-size: 12px;
        letter-spacing: .02em;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scanner-card {
        justify-self: stretch;
        background: rgba(8,15,11,.90);
        color: #f5f8f5;
        transform: perspective(1100px) rotateY(var(--df-hero-scanner-ry, -5deg)) rotateZ(var(--df-hero-scanner-rz, 2deg)) translate3d(var(--df-hero-scanner-x, 34px), var(--df-hero-scanner-y, -10px), 0);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scanner-card header {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 19px 20px 16px;
        border-bottom: 1px solid rgba(255,255,255,.09);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scanner-card header > span {
        display: grid;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        place-items: center;
        border: 1px solid rgba(126,242,165,.18);
        border-radius: 12px;
        background: rgba(32,223,114,.08);
        color: #72ef9d;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scanner-card header svg,
    .df-home-v2.is-scroll-story .df-home-v2__hero-scan-result svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scanner-card header small {
        color: rgba(223,233,226,.52);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scanner-card header strong {
        color: #f5f8f5;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -.03em;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scanner-window {
        position: relative;
        width: min(68%, 240px);
        aspect-ratio: 1;
        margin: 25px auto 18px;
        overflow: hidden;
        border-radius: 22px;
        background: rgba(255,255,255,.96);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scanner-window > img {
        position: absolute;
        inset: 12%;
        width: 76%;
        height: 76%;
        object-fit: contain;
        opacity: .96;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scanner-window > i {
        position: absolute;
        z-index: 4;
        right: 12%;
        left: 12%;
        top: var(--df-hero-scan-line-top, 18%);
        height: 2px;
        border-radius: 99px;
        background: linear-gradient(90deg, transparent, #20df72 18%, #8cf6b2 50%, #20df72 82%, transparent);
        box-shadow: 0 0 18px rgba(32,223,114,.72);
        opacity: var(--df-hero-scan-line-opacity, 1);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scan-corner {
        position: absolute;
        z-index: 5;
        width: 34px;
        height: 34px;
        border-color: #17bb61;
        border-style: solid;
        pointer-events: none;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scan-corner--tl { top: 10%; left: 10%; border-width: 2px 0 0 2px; border-radius: 10px 0 0 0; }
    .df-home-v2.is-scroll-story .df-home-v2__hero-scan-corner--tr { top: 10%; right: 10%; border-width: 2px 2px 0 0; border-radius: 0 10px 0 0; }
    .df-home-v2.is-scroll-story .df-home-v2__hero-scan-corner--bl { bottom: 10%; left: 10%; border-width: 0 0 2px 2px; border-radius: 0 0 0 10px; }
    .df-home-v2.is-scroll-story .df-home-v2__hero-scan-corner--br { right: 10%; bottom: 10%; border-width: 0 2px 2px 0; border-radius: 0 0 10px 0; }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scan-result {
        display: flex;
        gap: 11px;
        align-items: center;
        margin: 0 20px 20px;
        padding: 13px 14px;
        border: 1px solid rgba(126,242,165,.14);
        border-radius: 15px;
        background: rgba(32,223,114,.08);
        opacity: var(--df-hero-scan-result-opacity, 0);
        transform: translateY(var(--df-hero-scan-result-y, 10px));
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scan-result > span {
        display: grid;
        width: 31px;
        height: 31px;
        flex: 0 0 31px;
        place-items: center;
        border-radius: 50%;
        background: #20df72;
        color: #041008;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scan-result > div {
        display: grid;
        gap: 2px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scan-result small {
        color: rgba(223,233,226,.52);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-scan-result strong {
        color: #eef9f1;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -.02em;
    }
}

@media (min-width: 1101px) and (prefers-reduced-motion: reduce) {
    .df-home-v2__hero-handoff {
        display: none !important;
    }
}

/* v1.0.51 — Hero photo handoff refinement.
   Keep the approved Departure details card in place. The Azure thumbnail is the
   actual camera origin, expands to the full viewport, then resolves into copy +
   the original pass/scanner visual language at a smaller, calmer scale. */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff {
        z-index: 30;
        border-radius: var(--df-hero-handoff-radius, 14px);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff-shade {
        background:
            radial-gradient(circle at 66% 46%, rgba(4,10,7,.02) 0%, rgba(4,10,7,.16) 34%, rgba(3,7,5,.54) 76%, rgba(3,7,5,.72) 100%),
            linear-gradient(90deg, rgba(3,7,5,.78) 0%, rgba(3,7,5,.56) 30%, rgba(3,7,5,.18) 56%, rgba(3,7,5,.32) 100%);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff-copy {
        position: absolute;
        z-index: 5;
        top: 50%;
        left: clamp(54px, 7vw, 124px);
        width: min(31vw, 500px);
        opacity: var(--df-hero-handoff-copy-opacity, 0);
        transform: translate3d(0, calc(-50% + var(--df-hero-handoff-copy-y, 34px)), 0);
        pointer-events: none;
        will-change: transform, opacity;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff-copy .df-home-v2__eyebrow {
        margin-bottom: 18px;
        color: #83f2aa;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff-copy h2 {
        margin: 0;
        color: #f7faf7;
        font-size: clamp(46px, 4.45vw, 76px);
        font-weight: 700;
        letter-spacing: -.062em;
        line-height: .96;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff-copy > p:last-child {
        max-width: 440px;
        margin: 24px 0 0;
        color: rgba(239,245,240,.68);
        font-size: clamp(15px, 1.12vw, 18px);
        letter-spacing: -.02em;
        line-height: 1.55;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition {
        position: absolute;
        z-index: 6;
        top: 50%;
        right: clamp(44px, 6vw, 112px);
        left: auto;
        display: block;
        width: min(46vw, 760px);
        height: min(68vh, 650px);
        padding: 0;
        opacity: var(--df-hero-boarding-opacity, 0);
        transform: translate3d(0, calc(-50% + var(--df-hero-boarding-y, 28px)), 0) scale(var(--df-hero-boarding-scale, .94));
        transform-origin: center center;
        pointer-events: none;
        will-change: transform, opacity;
    }

    /* Reuse the original pass card design, only smaller for the full-width hero scene. */
    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass {
        position: absolute;
        z-index: 3;
        top: 14%;
        left: 1%;
        width: min(310px, 43%);
        border-radius: 23px;
        box-shadow: 0 34px 88px rgba(0,0,0,.48);
        transform:
            translate3d(var(--df-hero-pass-x, 0px), var(--df-hero-pass-y, 0px), 0)
            rotateZ(var(--df-hero-pass-rz, -3.5deg))
            rotateY(4deg);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-brand {
        padding: 17px 18px 14px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-brand strong {
        font-size: 14px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-brand span,
    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-body span {
        font-size: 9px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-body {
        padding: 14px 18px 6px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-body strong {
        font-size: 13px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-qr {
        padding: 10px 18px 8px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-qr img {
        width: 112px;
        height: 112px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-code {
        padding: 0 18px 16px;
    }

    /* Reuse the original Scanner card design at a more restrained scale. */
    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-card {
        position: absolute;
        z-index: 5;
        top: 5%;
        right: 0;
        width: min(345px, 48%);
        padding: 15px;
        border-radius: 27px;
        box-shadow: 0 42px 104px rgba(0,0,0,.58);
        transform:
            translate3d(var(--df-hero-scanner-x, 0px), var(--df-hero-scanner-y, 0px), 0)
            rotateZ(var(--df-hero-scanner-rz, 2.2deg))
            rotateY(-4deg)
            translateZ(14px);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-head {
        padding: 2px 2px 12px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-head strong {
        font-size: 15px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-window {
        min-height: 238px;
        border-radius: 20px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-window > img {
        width: 110px;
        height: 110px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-line {
        top: var(--df-hero-scan-line-top, 22%);
        opacity: var(--df-hero-scan-line-opacity, 1);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-corner {
        width: 32px;
        height: 32px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-result {
        grid-template-columns: 36px minmax(0,1fr);
        gap: 10px;
        margin-top: 9px;
        padding: 10px;
        border-radius: 15px;
        opacity: var(--df-hero-scan-result-opacity, 0);
        transform: translateY(var(--df-hero-scan-result-y, 9px));
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-check {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-result strong {
        font-size: 13px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-result span:not(.df-home-v2__scanner-check) {
        font-size: 9px;
    }
}

@media (max-width: 1320px) and (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff-copy {
        left: 52px;
        width: 34vw;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition {
        right: 40px;
        width: 50vw;
        transform: translate3d(0, calc(-50% + var(--df-hero-boarding-y, 28px)), 0) scale(var(--df-hero-boarding-scale, .94));
    }
}

/* v1.0.51 card self-containment: the hero owns these two original card designs
   even when the former standalone boarding section is not present. */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass {
        overflow: hidden;
        border: 1px solid rgba(17,23,19,.08);
        background: #fbfdfc;
        color: #121713;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-brand {
        border-bottom: 1px solid rgba(17,23,19,.08);
        background: linear-gradient(135deg, #fff 0%, #f3fbf6 100%);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-brand small,
    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-body small,
    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-code small {
        display: block;
        color: #18a756;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-brand strong {
        display: block;
        margin-top: 4px;
        color: #151b17;
        font-weight: 700;
        letter-spacing: -.03em;
        line-height: 1.15;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-brand span {
        display: block;
        margin-top: 4px;
        color: #858f87;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-body {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-body strong {
        display: block;
        margin-top: 3px;
        color: #151b17;
        font-weight: 700;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-body span {
        display: block;
        margin-top: 3px;
        color: #7d877f;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-body em {
        padding: 6px 9px;
        border-radius: 999px;
        background: rgba(32,223,114,.10);
        color: #0d9449;
        font-size: 9px;
        font-style: normal;
        font-weight: 700;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-qr {
        display: grid;
        place-items: center;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-qr img {
        object-fit: contain;
        border-radius: 9px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-code {
        text-align: center;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-code small {
        color: #9aa29c;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__boarding-pass-code strong {
        display: block;
        margin-top: 3px;
        color: #2b342e;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-card {
        border: 1px solid rgba(255,255,255,.12);
        background: linear-gradient(155deg, rgba(18,27,21,.985), rgba(8,13,10,.99));
        color: #f5f8f5;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-head small {
        display: block;
        color: #72eaa3;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-head strong {
        display: block;
        margin-top: 2px;
        color: #f5f8f5;
        font-weight: 700;
        letter-spacing: -.03em;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-head > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 9px;
        border: 1px solid rgba(32,223,114,.15);
        border-radius: 999px;
        background: rgba(32,223,114,.07);
        color: #87efad;
        font-size: 9px;
        font-weight: 650;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-head i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #20df72;
        box-shadow: 0 0 0 4px rgba(32,223,114,.08);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-window {
        position: relative;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.09);
        background:
            radial-gradient(circle at 50% 44%, rgba(32,223,114,.09), transparent 42%),
            linear-gradient(180deg, #0a100c, #070b08);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-window::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .18;
        background-image:
            linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
        background-size: 22px 22px;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-window > img {
        position: relative;
        z-index: 2;
        padding: 8px;
        object-fit: contain;
        border-radius: 11px;
        background: #fff;
        box-shadow: 0 18px 48px rgba(0,0,0,.34);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-line {
        position: absolute;
        z-index: 3;
        right: 20%;
        left: 20%;
        height: 1px;
        background: rgba(32,223,114,.88);
        box-shadow: 0 0 18px rgba(32,223,114,.55);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-corner {
        position: absolute;
        z-index: 4;
        border-color: #20df72;
        border-style: solid;
        opacity: .8;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-corner--tl { top: 18px; left: 18px; border-width: 2px 0 0 2px; border-radius: 9px 0 0 0; }
    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-corner--tr { top: 18px; right: 18px; border-width: 2px 2px 0 0; border-radius: 0 9px 0 0; }
    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-corner--bl { bottom: 18px; left: 18px; border-width: 0 0 2px 2px; border-radius: 0 0 0 9px; }
    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-corner--br { right: 18px; bottom: 18px; border-width: 0 2px 2px 0; border-radius: 0 0 9px 0; }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-result {
        display: grid;
        align-items: center;
        border: 1px solid rgba(32,223,114,.14);
        background: rgba(32,223,114,.055);
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-check {
        display: grid;
        place-items: center;
        background: rgba(32,223,114,.12);
        color: #64e995;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-check svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-result small {
        display: block;
        color: #6eea9d;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-result strong {
        display: block;
        margin-top: 2px;
        color: #f5f8f5;
        font-weight: 700;
    }

    .df-home-v2.is-scroll-story .df-home-v2__hero-boarding-composition .df-home-v2__scanner-result span:not(.df-home-v2__scanner-check) {
        display: block;
        margin-top: 2px;
        color: rgba(245,248,245,.48);
    }
}


/* v1.0.52 — homepage flow cleanup.
   The hero image takeover has no visible stroke; the redundant Operations in
   focus scene is gone; the real DockFlow public-booking shortcode now occupies
   the booking demo area. */
.df-home-v2__booking-live-demo {
    width: min(100%, 1280px);
    margin: clamp(34px, 4.5vw, 72px) auto 0;
}

.df-home-v2__booking-live-demo > .dfb-public-booking {
    width: 100%;
}

.df-home-v2__booking-demo-unavailable {
    padding: 22px 24px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    color: rgba(247,250,247,.72);
    background: rgba(255,255,255,.035);
    text-align: center;
}

@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    .df-home-v2.is-scroll-story .df-home-v2__hero-handoff {
        border: 0 !important;
        outline: 0 !important;
    }
}

/* v1.0.56 — homepage rhythm + guest phones refinement.
   Normal content shares a 1400px shell. The live booking demo is no longer
   treated like the retired pinned booking-story scene, preventing the large
   empty black scroll area after the experience cards. */
.df-home-v2__booking {
    padding: clamp(96px, 7vw, 124px) 0;
}

.df-home-v2__booking-live-head {
    max-width: 980px;
}

.df-home-v2__booking-live-head > p:last-child {
    max-width: 720px;
}

.df-home-v2__booking-live-demo {
    width: 100%;
    max-width: none;
    margin-top: clamp(42px, 4vw, 64px);
}

@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    .df-home-v2.is-scroll-story .df-home-v2__booking {
        min-height: 0;
        padding: clamp(96px, 7vw, 124px) 0;
    }

    .df-home-v2.is-scroll-story .df-home-v2__booking > .df-home-v2__section-shell {
        min-height: 0;
    }
}


/* === v1.0.58 — Guest full-section Macao atmosphere === */

@media (max-width: 640px) {
    .df-home-v2__guest::before {
        background-position: 56% 30%;
        background-size: cover;
        opacity: .40;
    }
}

/* === v1.0.59 — single true Macao section background === */

/* === v1.0.60 — Guest background now fills full section height === */

/* === v1.0.61 — light editorial closing section === */

/* === v1.0.62 — closing section now uses Fleet + Dashboard screens === */


/* Fleet showcase — layout only. Typography, colors and buttons come from shared homepage roles. */
.df-home-v2__fleet-showcase {
    position: relative;
    padding: 132px 0 138px;
    overflow: clip;
    border-top: 1px solid rgba(17,21,18,.08);
    border-bottom: 1px solid rgba(17,21,18,.08);
    background:
        radial-gradient(circle at 78% 40%, rgba(32,223,114,.09), transparent 28%),
        #f8faf7;
}

.df-home-v2__fleet-grid {
    display: grid;
    grid-template-columns: minmax(0,.72fr) minmax(620px,1.28fr);
    gap: clamp(58px, 6vw, 110px);
    align-items: center;
}

.df-home-v2__fleet-copy {
    max-width: 620px;
}

.df-home-v2__fleet-copy h2 {
    text-wrap: balance;
}

.df-home-v2__fleet-copy > p.df-home-v2__body {
    max-width: 590px;
    margin: 30px 0 0;
    font-size: clamp(17px,1.15vw,20px);
    line-height: 1.58;
    letter-spacing: -.02em;
}

.df-home-v2__fleet-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 34px 0 30px;
    border-top: 1px solid rgba(17,21,18,.12);
    border-bottom: 1px solid rgba(17,21,18,.12);
}

.df-home-v2__fleet-proof span {
    position: relative;
    padding: 15px 20px 15px 0;
    margin-right: 20px;
    color: rgba(17,21,18,.72);
    font-size: 13px;
    font-weight: 700;
}

.df-home-v2__fleet-proof span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--df-home-accent);
    transform: translateY(-50%);
}

.df-home-v2__fleet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.df-home-v2__fleet-visual {
    position: relative;
    min-width: 0;
    padding: 34px 0 40px;
}

.df-home-v2__fleet-window {
    position: relative;
    width: min(100%, 900px);
    margin: 0 0 0 auto;
    overflow: hidden;
    border-radius: 28px;
    background: transparent;
    box-shadow: 0 28px 76px rgba(12,21,16,.10);
    transform: rotate(1.1deg);
    transform-origin: 50% 50%;
}

.df-home-v2__fleet-window img {
    display: block;
    width: 100%;
    height: auto;
}

.df-home-v2__fleet-status {
    position: absolute;
    left: 2%;
    bottom: 4px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 92%;
    padding: 10px;
    border: 1px solid rgba(17,21,18,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 18px 40px rgba(12,21,16,.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.df-home-v2__fleet-status span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(17,21,18,.045);
    color: rgba(17,21,18,.72);
    font-size: 11px;
    font-weight: 700;
}

.df-home-v2__fleet-status i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--df-home-accent);
    box-shadow: 0 0 0 4px rgba(32,223,114,.10);
}


/* v1.0.63 closing refinement: reuse shared eyebrow/title/body/buttons; custom CSS owns layout only. */
.df-home-v2__closing-copy.df-home-v2__section-head {
    max-width: 700px;
}

.df-home-v2__closing-copy.df-home-v2__section-head h2 {
    max-width: 760px;
    margin: 0;
}

.df-home-v2__closing-copy > p.df-home-v2__closing-intro {
    max-width: 620px;
    margin: 30px 0 0;
    color: var(--df-home-body-black);
    font-size: clamp(17px,1.15vw,20px);
    letter-spacing: -.02em;
    line-height: 1.58;
}

.df-home-v2__closing-window--dashboard {
    position: relative;
    width: min(100%, 900px);
    margin-left: auto;
    overflow: hidden;
    border-radius: 28px;
    background: #f8faf7;
    box-shadow: 0 28px 84px rgba(12,21,16,.14), 0 0 0 1px rgba(12,21,16,.08);
}

.df-home-v2__closing-window--dashboard::before {
    content: none;
}

.df-home-v2__closing-window--dashboard > img {
    display: block;
    width: 100%;
    height: auto;
}

.df-home-v2__closing-float-scene {
    position: relative;
    min-height: 620px;
    perspective: 1400px;
    --df-scene-x: 0px;
    --df-scene-y: 0px;
    --df-scene-rx: 0deg;
    --df-scene-ry: 0deg;
}

.df-home-v2__closing-window {
    position: relative;
    z-index: 1;
}

.df-home-v2__closing-float-card {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

.df-home-v2__closing-float-card-inner {
    display: grid;
    gap: 5px;
    min-width: 168px;
    padding: 14px 16px;
    border: 1px solid rgba(17,21,18,.08);
    border-radius: 20px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 20px 48px rgba(12,21,16,.11);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform:
        translate3d(calc(var(--df-scene-x) * var(--df-depth, 1)), calc(var(--df-scene-y) * var(--df-depth, 1)), 0)
        rotateX(calc(var(--df-scene-ry) * var(--df-depth, 1)))
        rotateY(calc(var(--df-scene-rx) * var(--df-depth, 1)))
        rotateZ(var(--df-card-rotate, 0deg));
    transform-style: preserve-3d;
    transition: transform .35s ease, box-shadow .35s ease;
    animation: dfHomeFloatCard 7.8s ease-in-out infinite;
}

.df-home-v2__closing-float-card span,
.df-home-v2__closing-float-card b,
.df-home-v2__closing-float-card small,
.df-home-v2__closing-float-card strong {
    display: block;
}

.df-home-v2__closing-float-card span,
.df-home-v2__closing-float-card b {
    color: #16954f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.df-home-v2__closing-float-card--live span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.df-home-v2__closing-float-card--live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--df-home-accent);
    box-shadow: 0 0 0 4px rgba(32,223,114,.10);
}

.df-home-v2__closing-float-card strong {
    color: #0c1510;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.14;
}

.df-home-v2__closing-float-card small {
    color: rgba(20,31,24,.56);
    font-size: 11px;
    line-height: 1.42;
}

.df-home-v2__closing-float-card--revenue strong,
.df-home-v2__closing-float-card--departures strong {
    font-size: 22px;
    line-height: 1;
}

.df-home-v2__closing-float-card--guests strong,
.df-home-v2__closing-float-card--payments strong {
    font-size: 15px;
}

.df-home-v2__closing-float-card--live {
    left: -20px;
    bottom: 38px;
}

.df-home-v2__closing-float-card--revenue {
    top: 28px;
    right: -12px;
}

.df-home-v2__closing-float-card--departures {
    left: 46px;
    top: 84px;
}

.df-home-v2__closing-float-card--guests {
    right: 48px;
    bottom: 112px;
}

.df-home-v2__closing-float-card--payments {
    left: 46%;
    bottom: -16px;
}

.df-home-v2__closing-float-card--live .df-home-v2__closing-float-card-inner { animation-delay: -.7s; }
.df-home-v2__closing-float-card--revenue .df-home-v2__closing-float-card-inner { animation-delay: -2.6s; }
.df-home-v2__closing-float-card--departures .df-home-v2__closing-float-card-inner { animation-delay: -1.1s; }
.df-home-v2__closing-float-card--guests .df-home-v2__closing-float-card-inner { animation-delay: -3.4s; }
.df-home-v2__closing-float-card--payments .df-home-v2__closing-float-card-inner { animation-delay: -4.8s; }

@keyframes dfHomeFloatCard {
    0%, 100% { transform:
        translate3d(calc(var(--df-scene-x) * var(--df-depth, 1)), calc(var(--df-scene-y) * var(--df-depth, 1)), 0)
        rotateX(calc(var(--df-scene-ry) * var(--df-depth, 1)))
        rotateY(calc(var(--df-scene-rx) * var(--df-depth, 1)))
        rotateZ(var(--df-card-rotate, 0deg)); }
    50% { transform:
        translate3d(calc(var(--df-scene-x) * var(--df-depth, 1) + 0px), calc(var(--df-scene-y) * var(--df-depth, 1) - 8px), 0)
        rotateX(calc(var(--df-scene-ry) * var(--df-depth, 1)))
        rotateY(calc(var(--df-scene-rx) * var(--df-depth, 1)))
        rotateZ(calc(var(--df-card-rotate, 0deg) + .45deg)); }
}



@media (max-width: 1180px) {
    .df-home-v2__fleet-grid {
        grid-template-columns: minmax(0,.8fr) minmax(520px,1.2fr);
        gap: 48px;
    }

    .df-home-v2__closing-float-card--revenue .df-home-v2__closing-float-card-inner,
    .df-home-v2__closing-float-card--departures .df-home-v2__closing-float-card-inner {
        min-width: 160px;
    }
}

@media (max-width: 1024px) {
    .df-home-v2__fleet-showcase {
        padding: 112px 0 118px;
    }

    .df-home-v2__fleet-grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .df-home-v2__fleet-copy {
        max-width: 720px;
    }

    .df-home-v2__fleet-window {
        width: min(100%,860px);
        margin: 0 auto;
        transform: rotate(.6deg);
    }

    .df-home-v2__closing-visual {
        padding-bottom: 28px;
    }

    .df-home-v2__closing-float-scene {
        min-height: 650px;
    }

    .df-home-v2__closing-float-card--live { left: 6px; bottom: 18px; }
    .df-home-v2__closing-float-card--revenue { right: -4px; top: 10px; }
    .df-home-v2__closing-float-card--departures { left: 22px; top: 74px; }
    .df-home-v2__closing-float-card--guests { right: 22px; bottom: 96px; }
    .df-home-v2__closing-float-card--payments { left: 42%; bottom: -2px; }
}

@media (max-width: 768px) {
    .df-home-v2__fleet-showcase {
        padding: 92px 0 100px;
    }

    .df-home-v2__fleet-copy > p.df-home-v2__body,
    .df-home-v2__closing-copy > p.df-home-v2__closing-intro {
        font-size: 16px;
    }

    .df-home-v2__fleet-proof span {
        padding-right: 14px;
        margin-right: 14px;
        font-size: 12px;
    }

    .df-home-v2__fleet-visual {
        padding-top: 14px;
    }

    .df-home-v2__fleet-window {
        border-radius: 22px;
    }

    .df-home-v2__fleet-status {
        position: relative;
        left: auto;
        bottom: auto;
        max-width: none;
        margin: -18px 12px 0;
    }

    .df-home-v2__closing-float-scene {
        min-height: 590px;
    }

    .df-home-v2__closing-float-card--live { left: 0; bottom: 10px; }
    .df-home-v2__closing-float-card--revenue { right: 0; top: 2px; }
    .df-home-v2__closing-float-card--departures { left: 16px; top: 52px; }
    .df-home-v2__closing-float-card--guests { right: 18px; bottom: 84px; }
    .df-home-v2__closing-float-card--payments { left: auto; right: 18px; bottom: -6px; }

    .df-home-v2__closing-float-card-inner {
        min-width: 146px;
        padding: 12px 13px;
        border-radius: 18px;
    }

    .df-home-v2__closing-float-card strong {
        font-size: 14px;
    }

    .df-home-v2__closing-float-card--revenue strong,
    .df-home-v2__closing-float-card--departures strong {
        font-size: 19px;
    }

    .df-home-v2__closing-float-card small {
        font-size: 10px;
    }
}

@media (max-width: 560px) {
    .df-home-v2__fleet-proof {
        gap: 8px 12px;
        padding: 12px 0;
    }

    .df-home-v2__fleet-proof span {
        padding: 0;
        margin: 0;
    }

    .df-home-v2__fleet-proof span::after {
        display: none;
    }

    .df-home-v2__fleet-status span {
        min-height: 30px;
        padding: 0 9px;
        font-size: 10px;
    }

    .df-home-v2__closing-float-card--departures,
    .df-home-v2__closing-float-card--guests {
        display: none;
    }
}

/* === v1.0.63 — dedicated Fleet showcase + busy Dashboard closing === */

/* === v1.0.64 — Fleet natural title wrapping + frame/copy polish === */

/* === v1.0.65 — natural title wraps, floating dashboard cards, demo drawer === */

/* === v1.0.66 — restrained hero scroll cue === */

/* === v1.0.67 — light full-height demo drawer === */

/* === v1.0.68 — demo drawer promoted to document top layer === */

/* === v1.0.69 — RESPONSIVE PRODUCT-QUALITY PASS ============================
   One coherent hardening layer for tablet/mobile. Desktop compositions remain
   untouched above 1100px; smaller screens use normal-flow, touch-native layouts. */

@media (max-width: 1100px) {
    .df-home-v2__section-shell,
    .df-home-v2__hero-inner,
    .df-home-v2__cta-inner,
    .df-home-v2__manifesto-copy {
        width: min(calc(100% - 48px), var(--df-home-content-max));
    }

    .df-home-v2__hero {
        min-height: 0;
        padding: 138px 0 82px;
    }

    .df-home-v2__hero-sticky {
        position: relative !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .df-home-v2__hero-copy {
        max-width: 850px;
        margin-bottom: 58px;
    }

    .df-home-v2__hero-copy h1 {
        font-size: clamp(62px, 8.8vw, 94px);
        font-weight: 700;
        line-height: .9;
        text-wrap: balance;
    }

    .df-home-v2__hero-stage {
        min-height: clamp(470px, 56vw, 610px);
        margin-bottom: 42px;
    }

    .df-home-v2__operator-window {
        width: 100%;
        max-width: 920px;
    }

    .df-home-v2__hero-mobile-story {
        max-width: 920px;
        margin-inline: auto;
    }

    .df-home-v2__business-static {
        grid-template-columns: 1fr;
        gap: 54px;
    }

    .df-home-v2__business-copy {
        max-width: 760px;
    }

    .df-home-v2__business-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        min-height: 0;
    }

    .df-home-v2__business-card,
    .df-home-v2__business-card--tours,
    .df-home-v2__business-card--rentals,
    .df-home-v2__business-card--charters,
    .df-home-v2__business-card--events {
        position: relative;
        inset: auto;
        width: auto;
        transform: none;
    }

    .df-home-v2__business-card-media {
        aspect-ratio: 16 / 10;
    }

    .df-home-v2__fleet-grid,
    .df-home-v2__guest-grid,
    .df-home-v2__closing-grid {
        grid-template-columns: 1fr;
    }

    .df-home-v2__fleet-copy,
    .df-home-v2__guest .df-home-v2__section-head,
    .df-home-v2__closing-copy {
        max-width: 760px;
    }

    .df-home-v2__fleet-window { width: min(100%, 900px); margin-inline: auto; }
    .df-home-v2__guest-phones { width: min(100%, 650px); margin-inline: auto; }
    .df-home-v2__closing-visual { width: min(100%, 860px); margin-inline: auto; }
    .df-home-v2__closing-float-scene { min-height: clamp(560px, 68vw, 650px); }

    .df-home-v2__booking-live-demo,
    .df-home-v2__booking-live-demo > .dfb-public-booking {
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    .df-home-v2__hero { padding-top: 126px; }

    .df-home-v2__fleet-showcase,
    .df-home-v2__wordpress,
    .df-home-v2__booking,
    .df-home-v2__guest,
    .df-home-v2__closing {
        scroll-margin-top: 84px;
    }

    .df-home-v2__fleet-actions,
    .df-home-v2__closing-actions { gap: 10px; }
}

@media (max-width: 767px) {
    .df-home-v2__section-shell,
    .df-home-v2__hero-inner,
    .df-home-v2__cta-inner,
    .df-home-v2__manifesto-copy {
        width: min(calc(100% - 32px), var(--df-home-content-max));
    }

    .df-home-v2__hero { padding: 118px 0 72px; }
    .df-home-v2__hero-copy { margin-bottom: 38px; }
    .df-home-v2__hero-copy h1 {
        font-size: clamp(50px, 14vw, 66px);
        letter-spacing: -.065em;
        line-height: .91;
    }
    .df-home-v2__lede { margin-top: 24px; font-size: 17px; }
    .df-home-v2__hero-actions { margin-top: 28px; }

    .df-home-v2__hero-actions .df-home-v2__button,
    .df-home-v2__fleet-actions .df-home-v2__button,
    .df-home-v2__closing-actions .df-home-v2__button {
        min-height: 54px;
    }

    .df-home-v2__hero-stage {
        min-height: 0;
        padding-bottom: 0;
        margin-bottom: 38px;
    }

    .df-home-v2__operator-window {
        width: 100%;
        max-width: none;
        aspect-ratio: 4 / 3;
        margin: 0;
        border-radius: 18px;
    }

    .df-home-v2__operator-window > img {
        width: auto;
        max-width: none;
        height: 100%;
        min-height: 0;
        object-fit: cover;
        object-position: 60% 0;
        transform: translateX(-10%);
    }

    .df-home-v2__hero-mobile-story > header h2,
    .df-home-v2__business-copy h2,
    .df-home-v2__fleet-copy h2,
    .df-home-v2__wordpress-copy h2,
    .df-home-v2__guest .df-home-v2__section-head h2,
    .df-home-v2__closing-copy h2 { text-wrap: balance; }

    .df-home-v2__hero-mobile-feature { gap: 20px; padding: 30px 0 34px; }
    .df-home-v2__hero-mobile-copy h3 { font-size: clamp(30px, 9vw, 35px); }

    .df-home-v2__business-types { padding: 78px 0 86px; }
    .df-home-v2__business-static { gap: 40px; }
    .df-home-v2__business-copy h2 { font-size: clamp(42px, 12.6vw, 58px); }
    .df-home-v2__business-copy > p { font-size: 16px; }

    .df-home-v2__fleet-showcase { padding: 86px 0 92px; }
    .df-home-v2__fleet-copy > p.df-home-v2__body,
    .df-home-v2__closing-copy > p.df-home-v2__closing-intro {
        font-size: 16px;
        line-height: 1.55;
    }
    .df-home-v2__fleet-proof { margin: 28px 0 26px; }

    .df-home-v2__fleet-actions,
    .df-home-v2__closing-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .df-home-v2__fleet-actions .df-home-v2__button,
    .df-home-v2__closing-actions .df-home-v2__button {
        width: 100%;
        padding-inline: 16px;
    }

    .df-home-v2__fleet-visual { padding-top: 8px; }
    .df-home-v2__fleet-window,
    .df-home-v2__closing-window--dashboard { border-radius: 20px; }

    .df-home-v2__wordpress { padding: 82px 0 90px; }
    .df-home-v2__wordpress-grid { gap: 40px; }

    .df-home-v2__wordpress-system {
        min-height: 0;
        padding-inline: 0;
        overflow: visible;
    }
    .df-home-v2__wordpress-site,
    .df-home-v2__wordpress-layer {
        position: relative;
        inset: auto;
        width: 100%;
    }
    .df-home-v2__wordpress-site { border-radius: 16px; }
    .df-home-v2__wordpress-siteview { min-height: 290px; }
    .df-home-v2__wordpress-bridge {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 18px 0;
        transform: none;
    }
    .df-home-v2__wordpress-bridge i {
        width: 1px;
        height: 30px;
        background: linear-gradient(180deg, rgba(32,185,103,.15), #20b967 50%, rgba(32,185,103,.18));
    }
    .df-home-v2__wordpress-bridge i::after {
        top: auto;
        right: 50%;
        bottom: -1px;
        transform: translateX(50%) rotate(135deg);
    }
    .df-home-v2__wordpress-layer {
        min-height: 0;
        padding: 24px 22px 26px;
        border-radius: 16px;
    }

    .df-home-v2__booking { padding: 84px 0 92px; }
    .df-home-v2__booking-live-demo { margin-top: 36px; }

    .df-home-v2__guest { padding: 88px 0 94px; }
    .df-home-v2__guest-grid { gap: 36px; }
    .df-home-v2__guest-points { margin-top: 34px; }
    .df-home-v2__guest-phones { min-height: clamp(420px, 118vw, 500px); max-width: 480px; }
    .df-home-v2__guest-phone--back {
        top: 20px; left: 2%; width: min(49%, 218px); transform: rotate(-4deg);
    }
    .df-home-v2__guest-phone--front {
        top: 4px; right: -1%; width: min(59%, 250px); transform: rotate(3deg);
    }
    .df-home-v2__guest::before { background-position: 56% 34%; opacity: .44; }

    .df-home-v2__closing { padding: 88px 0 96px; }
    .df-home-v2__closing-grid { gap: 40px; }
    .df-home-v2__closing-flow { gap: 8px; }
    .df-home-v2__closing-flow span { min-height: 42px; padding-inline: 14px; }
    .df-home-v2__closing-note { margin-top: 28px; font-size: 21px; }
    .df-home-v2__closing-float-scene { min-height: clamp(470px, 116vw, 560px); }
}

@media (max-width: 560px) {
    .df-home-v2__section-shell,
    .df-home-v2__hero-inner,
    .df-home-v2__cta-inner,
    .df-home-v2__manifesto-copy,
    .df-home-v2__business-types .df-home-v2__section-shell {
        width: calc(100% - 28px);
    }

    .df-home-v2__business-cards { grid-template-columns: 1fr; gap: 12px; }
    .df-home-v2__business-card { grid-template-columns: 40% minmax(0, 1fr); }

    .df-home-v2__fleet-actions,
    .df-home-v2__closing-actions { grid-template-columns: 1fr; }

    .df-home-v2__fleet-window,
    .df-home-v2__closing-window--dashboard { aspect-ratio: 4 / 3; }

    .df-home-v2__fleet-window img,
    .df-home-v2__closing-window--dashboard > img {
        width: auto;
        max-width: none;
        height: 100%;
        object-fit: cover;
        transform: translateX(-17%);
    }

    .df-home-v2__fleet-window { transform: none; }
    .df-home-v2__fleet-status { margin-inline: 8px; padding: 8px; gap: 6px; }
    .df-home-v2__fleet-status span { min-height: 32px; font-size: 10px; }

    .df-home-v2__guest-phones { min-height: clamp(400px, 126vw, 470px); }

    .df-home-v2__closing-float-scene { min-height: clamp(410px, 116vw, 485px); }
    .df-home-v2__closing-window--dashboard {
        width: calc(100% - 4px);
        margin: 48px auto 0;
    }
    .df-home-v2__closing-float-card--revenue { top: 0; right: 0; }
    .df-home-v2__closing-float-card--payments { right: 0; bottom: 70px; left: auto; }
    .df-home-v2__closing-float-card--live { bottom: 4px; left: 0; }
    .df-home-v2__closing-float-card-inner { min-width: 138px; padding: 11px 12px; }
}

@media (max-width: 360px) {
    .df-home-v2__hero-copy h1 { font-size: clamp(48px, 15vw, 54px); }
    .df-home-v2__business-card { grid-template-columns: 38% minmax(0, 1fr); }
    .df-home-v2__guest-phone--back { width: 48%; }
    .df-home-v2__guest-phone--front { width: 61%; right: -2%; }
    .df-home-v2__closing-float-card-inner { min-width: 128px; }
}

@media (hover: none), (pointer: coarse) {
    .df-home-v2__closing-float-scene {
        --df-scene-x: 0px !important;
        --df-scene-y: 0px !important;
        --df-scene-rx: 0deg !important;
        --df-scene-ry: 0deg !important;
    }
    .df-home-v2__closing-float-card-inner { animation-duration: 10s; }
}

.df-home-v2__demo-drawer {
    top: var(--df-demo-viewport-top, 0px) !important;
    bottom: auto !important;
    height: var(--df-demo-viewport-height, 100vh);
    max-height: var(--df-demo-viewport-height, 100vh);
}
@supports (height: 100dvh) {
    .df-home-v2__demo-drawer {
        height: var(--df-demo-viewport-height, 100dvh);
        max-height: var(--df-demo-viewport-height, 100dvh);
    }
}
.df-home-v2__demo-panel-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.df-home-v2__demo-close {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex-basis: 44px;
}
.df-home-v2__demo-submit:disabled { cursor: default; opacity: .52; }

@media (max-width: 1100px) {
    .df-home-v2__demo-panel-body { align-items: flex-start; }
    .df-home-v2__demo-fields input,
    .df-home-v2__demo-fields select { font-size: 16px; }
}
@media (max-width: 900px) {
    .df-home-v2__demo-drawer { width: min(92vw, 650px); }
}
@media (max-width: 767px) {
    .df-home-v2__demo-drawer { width: 100vw; }
    .df-home-v2__demo-drawer-shell { box-shadow: none; }
    .df-home-v2__demo-panel-header {
        padding: max(18px, env(safe-area-inset-top)) 18px 15px;
        gap: 12px;
    }
    .df-home-v2__demo-panel-header .df-home-v2__eyebrow { margin-bottom: 9px; }
    .df-home-v2__demo-panel-header h2 { font-size: clamp(32px, 9vw, 40px); line-height: .98; }
    .df-home-v2__demo-panel-header > div > p.df-home-v2__body {
        margin-top: 9px; font-size: 13px; line-height: 1.42;
    }
    .df-home-v2__demo-panel-body { align-items: flex-start; padding: 14px 18px; }
    .df-home-v2__demo-fields { gap: 9px 10px; }
    .df-home-v2__demo-fields label { gap: 5px; }
    .df-home-v2__demo-fields label > span { font-size: 11px; }
    .df-home-v2__demo-fields input,
    .df-home-v2__demo-fields select {
        height: 48px; min-height: 48px; padding-inline: 12px; border-radius: 12px; font-size: 16px;
    }
    .df-home-v2__demo-panel-footer {
        padding: 13px 18px max(14px, env(safe-area-inset-bottom));
    }
    .df-home-v2__demo-submit { min-height: 52px; }
    .df-home-v2__demo-panel-footer p { margin-top: 7px; font-size: 10px; }
    .df-home-v2__demo-success { min-height: 190px; padding: 20px; }
}
@media (max-width: 360px) {
    .df-home-v2__demo-panel-header,
    .df-home-v2__demo-panel-body,
    .df-home-v2__demo-panel-footer {
        padding-left: 14px;
        padding-right: 14px;
    }
    .df-home-v2__demo-panel-header h2 { font-size: 31px; }
}
@media (max-height: 700px) and (max-width: 767px) {
    .df-home-v2__demo-panel-header {
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: 11px;
    }
    .df-home-v2__demo-panel-header .df-home-v2__eyebrow { margin-bottom: 6px; }
    .df-home-v2__demo-panel-header h2 { font-size: 30px; }
    .df-home-v2__demo-panel-header > div > p.df-home-v2__body { display: none; }
    .df-home-v2__demo-panel-body { padding-top: 10px; padding-bottom: 10px; }
    .df-home-v2__demo-fields { gap: 7px 9px; }
    .df-home-v2__demo-fields input,
    .df-home-v2__demo-fields select { height: 46px; min-height: 46px; }
    .df-home-v2__demo-panel-footer {
        padding-top: 10px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    .df-home-v2__demo-panel-footer p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .df-home-v2__demo-drawer,
    .df-home-v2__demo-close,
    .df-home-v2__demo-submit {
        transition: none !important;
    }
}

/* === v1.0.70 — MOBILE NARRATIVE RECOMPOSE ================================
   Mobile is no longer a vertical stack of desktop proof fragments. One
   departure is followed through a visible Schedule → Ready → Details →
   Check-in rail. Business types become a touch-native editorial gallery. */

.df-home-v2__mobile-flow-intro {
    max-width: 760px;
    margin: 0 0 32px;
}

.df-home-v2__mobile-flow-intro h2 {
    margin: 0;
    color: #f4f7f4;
    font-size: clamp(46px, 7vw, 72px);
    font-weight: 700;
    letter-spacing: -.058em;
    line-height: .96;
    text-wrap: balance;
}

.df-home-v2__mobile-flow-intro h2 span {
    color: #48dd8a;
}

.df-home-v2__mobile-flow-intro > p:last-of-type {
    max-width: 640px;
    margin: 19px 0 0;
    color: rgba(228,235,229,.62);
    font-size: 17px;
    line-height: 1.55;
}

.df-home-v2__mobile-flow-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    max-width: 620px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.df-home-v2__mobile-flow-map::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 9%;
    left: 9%;
    height: 1px;
    background: linear-gradient(90deg, rgba(72,221,138,.15), rgba(72,221,138,.76), rgba(72,221,138,.15));
}

.df-home-v2__mobile-flow-map li {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 0;
    color: rgba(236,241,237,.62);
}

.df-home-v2__mobile-flow-map li > span {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border: 1px solid rgba(72,221,138,.28);
    border-radius: 50%;
    background: #061009;
    color: #56e397;
    box-shadow: 0 0 0 6px #030805;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
}

.df-home-v2__mobile-flow-map li > strong {
    overflow: hidden;
    max-width: 100%;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-home-v2__mobile-flow-overview {
    overflow: hidden;
    max-width: 920px;
    margin: 0 auto 28px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 26px;
    background: linear-gradient(155deg, rgba(18,37,27,.88), rgba(4,10,6,.98));
    box-shadow: 0 34px 100px rgba(0,0,0,.30);
}

.df-home-v2__mobile-flow-overview-top,
.df-home-v2__mobile-flow-overview-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 18px;
}

.df-home-v2__mobile-flow-overview-top {
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.df-home-v2__mobile-flow-overview-top > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #65e6a0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.df-home-v2__mobile-flow-overview-top i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2cd384;
    box-shadow: 0 0 0 5px rgba(44,211,132,.10);
}

.df-home-v2__mobile-flow-overview-top > strong {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    color: rgba(242,247,243,.74);
    font-size: 10px;
    font-weight: 650;
}

.df-home-v2__mobile-flow-calendar {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 8.5;
    background: #eaf0ec;
}

.df-home-v2__mobile-flow-calendar::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 32%;
    background: linear-gradient(180deg, transparent, rgba(4,10,6,.12));
    pointer-events: none;
}

.df-home-v2__mobile-flow-calendar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
}

.df-home-v2__mobile-flow-overview-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding-block: 16px 17px;
}

.df-home-v2__mobile-flow-overview-bottom span {
    color: rgba(226,235,228,.46);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.df-home-v2__mobile-flow-overview-bottom strong {
    color: #f1f6f2;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.025em;
}

.df-home-v2__mobile-flow-steps {
    max-width: 860px;
    margin: 0 auto;
}

.df-home-v2__mobile-flow-step {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 20px;
}

.df-home-v2__mobile-flow-marker {
    position: relative;
    display: grid;
    grid-template-rows: 42px 1fr;
    justify-items: center;
    min-height: 100%;
}

.df-home-v2__mobile-flow-marker > span {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(72,221,138,.28);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(19,52,34,.94), rgba(6,18,11,.98));
    color: #5ae399;
    box-shadow: 0 16px 40px rgba(0,0,0,.24);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
}

.df-home-v2__mobile-flow-marker > i {
    width: 1px;
    height: 100%;
    min-height: 36px;
    background: linear-gradient(180deg, rgba(72,221,138,.38), rgba(72,221,138,.07));
}

.df-home-v2__mobile-flow-step:last-child .df-home-v2__mobile-flow-marker > i {
    background: linear-gradient(180deg, rgba(72,221,138,.38), transparent 82%);
}

.df-home-v2__mobile-flow-step-body {
    min-width: 0;
    padding: 5px 0 42px;
}

.df-home-v2__mobile-flow-step-body > small {
    display: block;
    margin-bottom: 7px;
    color: #48dd8a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.df-home-v2__mobile-flow-step-body > h3 {
    max-width: 680px;
    margin: 0;
    color: #f4f7f4;
    font-size: clamp(31px, 4.8vw, 44px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1;
    text-wrap: balance;
}

.df-home-v2__mobile-flow-step-body > p {
    max-width: 620px;
    margin: 12px 0 19px;
    color: rgba(228,235,229,.58);
    font-size: 15px;
    line-height: 1.55;
}

.df-home-v2__mobile-flow-step-body > .df-home-v2__mini-booking,
.df-home-v2__mobile-flow-step-body > .df-home-v2__mini-kpis,
.df-home-v2__mobile-flow-step-body > .df-home-v2__mini-departure,
.df-home-v2__mobile-flow-step-body > .df-home-v2__hero-mobile-scan {
    width: 100%;
    max-width: 650px;
}

.df-home-v2__mobile-flow-result {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 650px;
    margin: 2px 0 0 72px;
    padding: 16px 18px;
    border: 1px solid rgba(72,221,138,.18);
    border-radius: 19px;
    background: linear-gradient(135deg, rgba(72,221,138,.10), rgba(72,221,138,.03));
}

.df-home-v2__mobile-flow-result > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #dff9e9;
    color: #0a8f51;
}

.df-home-v2__mobile-flow-result svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.df-home-v2__mobile-flow-result > div {
    display: grid;
    gap: 3px;
}

.df-home-v2__mobile-flow-result small {
    color: rgba(201,228,210,.55);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.df-home-v2__mobile-flow-result strong {
    color: #eff8f1;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.015em;
}

.df-home-v2__business-mobile-hint {
    display: none;
}

@media (max-width: 1100px) {
    /* The overview belongs inside the narrative now; remove the disconnected
       desktop screenshot that previously appeared before the mobile story. */
    .df-home-v2__hero-stage {
        display: none;
    }

    .df-home-v2__hero-copy {
        margin-bottom: clamp(58px, 8vw, 86px);
    }

    .df-home-v2__hero-mobile-story {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .df-home-v2__hero {
        padding-top: 108px;
        padding-bottom: 64px;
    }

    .df-home-v2__hero-copy {
        margin-bottom: 58px;
    }

    .df-home-v2__hero-copy h1 {
        max-width: 560px;
        font-size: clamp(48px, 13.8vw, 60px);
        line-height: .92;
    }

    .df-home-v2__hero-copy .df-home-v2__lede {
        max-width: 520px;
        font-size: 16px;
        line-height: 1.5;
    }

    .df-home-v2__mobile-flow-intro {
        margin-bottom: 24px;
    }

    .df-home-v2__mobile-flow-intro h2,
    .df-home-v2__hero-mobile-story > header h2 {
        max-width: 520px;
        font-size: clamp(39px, 11.6vw, 48px);
        line-height: .98;
    }

    .df-home-v2__mobile-flow-intro > p:last-of-type,
    .df-home-v2__hero-mobile-story > header > p:last-child {
        margin-top: 15px;
        font-size: 15px;
        line-height: 1.52;
    }

    .df-home-v2__mobile-flow-map {
        gap: 3px;
        margin-top: 24px;
    }

    .df-home-v2__mobile-flow-map::before {
        right: 11%;
        left: 11%;
    }

    .df-home-v2__mobile-flow-map li {
        gap: 6px;
    }

    .df-home-v2__mobile-flow-map li > span {
        width: 31px;
        height: 31px;
        box-shadow: 0 0 0 5px #030805;
    }

    .df-home-v2__mobile-flow-map li > strong {
        font-size: 9px;
    }

    .df-home-v2__mobile-flow-overview {
        margin-bottom: 34px;
        border-radius: 22px;
    }

    .df-home-v2__mobile-flow-calendar {
        aspect-ratio: 1.36 / 1;
    }

    .df-home-v2__mobile-flow-calendar img {
        width: 158%;
        max-width: none;
        height: 100%;
        object-fit: cover;
        object-position: 48% 10%;
        transform: translateX(-18%);
    }

    .df-home-v2__mobile-flow-overview-top,
    .df-home-v2__mobile-flow-overview-bottom {
        padding-inline: 15px;
    }

    .df-home-v2__mobile-flow-overview-bottom strong {
        font-size: 15px;
    }

    .df-home-v2__mobile-flow-step {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 13px;
    }

    .df-home-v2__mobile-flow-marker {
        grid-template-rows: 36px 1fr;
    }

    .df-home-v2__mobile-flow-marker > span {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 9px;
    }

    .df-home-v2__mobile-flow-step-body {
        padding-top: 2px;
        padding-bottom: 34px;
    }

    .df-home-v2__mobile-flow-step-body > small {
        margin-bottom: 6px;
        font-size: 9px;
    }

    .df-home-v2__mobile-flow-step-body > h3 {
        font-size: clamp(27px, 8vw, 34px);
        line-height: 1.02;
    }

    .df-home-v2__mobile-flow-step-body > p {
        margin: 10px 0 16px;
        font-size: 14px;
        line-height: 1.5;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-booking {
        padding: 17px 16px 15px;
        border-left-width: 3px;
        border-radius: 17px;
        box-shadow: 0 20px 54px rgba(0,0,0,.24);
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-booking-top {
        gap: 8px;
        font-size: 10px;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-booking-top b {
        padding: 5px 7px;
        font-size: 9px;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-booking > strong {
        font-size: 16px;
        font-weight: 700;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-booking-bottom {
        margin-top: 18px;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-kpis {
        gap: 8px;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-kpis > div {
        grid-template-columns: 38px 1fr;
        min-height: 78px;
        padding: 12px;
        column-gap: 10px;
        border-radius: 15px;
        box-shadow: 0 16px 40px rgba(0,0,0,.15);
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-kpi-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        font-size: 15px;
        font-weight: 700;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-kpis small {
        font-size: 9px;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-kpis strong {
        font-size: 18px;
        font-weight: 700;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-departure {
        border-radius: 18px;
        box-shadow: 0 22px 58px rgba(0,0,0,.22);
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-departure-head {
        padding: 15px 14px 13px;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-departure-head small {
        font-size: 8px;
        font-weight: 700;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-departure-head strong {
        font-size: 18px;
        font-weight: 700;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-departure-head span {
        font-size: 9px;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-departure-head b {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 19px;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-departure-trip {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 11px;
        padding: 15px 14px 17px;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-departure-trip > img {
        width: 56px;
        border-radius: 12px;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-departure-trip strong {
        font-size: 14px;
        font-weight: 700;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-departure-trip span {
        font-size: 10px;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__mini-departure-trip em {
        grid-column: 2;
        justify-self: start;
        padding: 6px 9px;
        font-size: 9px;
        font-weight: 700;
    }

    .df-home-v2__mobile-flow-step-body .df-home-v2__hero-mobile-scan {
        grid-template-columns: minmax(0, 1fr) 54px 34px;
        gap: 10px;
        margin-top: 0;
        padding: 13px;
        border-radius: 17px;
    }

    .df-home-v2__hero-mobile-scan > div > span {
        display: block;
        overflow: hidden;
        color: #78857e;
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .df-home-v2__mobile-flow-result {
        margin-left: 51px;
        padding: 14px;
        border-radius: 17px;
    }

    .df-home-v2__mobile-flow-result > span {
        width: 34px;
        height: 34px;
    }

    .df-home-v2__mobile-flow-result strong {
        font-size: 13px;
    }

    /* Business types: one cinematic card at a time with a deliberate next-card
       peek. This replaces the cramped image/text rows from v1.0.69. */
    .df-home-v2__business-types {
        overflow: hidden;
        padding: 70px 0 82px;
    }

    .df-home-v2__business-static {
        gap: 30px;
    }

    .df-home-v2__business-copy {
        max-width: 540px;
    }

    .df-home-v2__business-copy h2 {
        max-width: 520px;
        font-size: clamp(39px, 11.6vw, 48px);
        line-height: .98;
    }

    .df-home-v2__business-copy > p {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.52;
    }

    .df-home-v2__business-promise {
        margin-top: 24px;
        padding-top: 19px;
    }

    .df-home-v2__business-promise span {
        font-size: 10px;
        letter-spacing: .11em;
    }

    .df-home-v2__business-promise strong {
        margin-top: 5px;
        font-size: 21px;
        line-height: 1.12;
    }

    .df-home-v2__business-cards {
        display: flex;
        grid-template-columns: none;
        gap: 14px;
        width: auto;
        margin-right: calc((100vw - 100%) * -1 / 2);
        padding: 2px max(24px, calc((100vw - 100%) / 2)) 10px 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .df-home-v2__business-cards::-webkit-scrollbar {
        display: none;
    }

    .df-home-v2__business-card,
    .df-home-v2__business-card--tours,
    .df-home-v2__business-card--rentals,
    .df-home-v2__business-card--charters,
    .df-home-v2__business-card--events {
        position: relative;
        display: block;
        flex: 0 0 min(82vw, 360px);
        height: clamp(350px, 103vw, 420px);
        overflow: hidden;
        border: 1px solid rgba(17,31,24,.10);
        border-radius: 24px;
        background: #07100b;
        box-shadow: 0 20px 55px rgba(27,45,35,.14);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .df-home-v2__business-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(4,9,6,.02) 28%, rgba(4,9,6,.24) 53%, rgba(4,9,6,.96) 88%);
        pointer-events: none;
    }

    .df-home-v2__business-card-media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    .df-home-v2__business-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.015);
    }

    .df-home-v2__business-card-body {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        display: block;
        padding: 24px 22px 23px;
        background: transparent;
        color: #fff;
    }

    .df-home-v2__business-card-body small {
        display: block;
        margin-bottom: 8px;
        color: #55df94;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .12em;
    }

    .df-home-v2__business-card-body h3 {
        max-width: 310px;
        margin: 0;
        color: #fff;
        font-size: clamp(27px, 7.9vw, 34px);
        font-weight: 700;
        letter-spacing: -.05em;
        line-height: .98;
        text-wrap: balance;
    }

    .df-home-v2__business-mobile-hint {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: -8px;
        color: #718078;
        font-size: 10px;
        font-weight: 650;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .df-home-v2__business-mobile-hint i {
        position: relative;
        display: block;
        width: 62px;
        height: 1px;
        overflow: visible;
        background: #c9d1cc;
    }

    .df-home-v2__business-mobile-hint i::after {
        content: "";
        position: absolute;
        top: -2px;
        right: 0;
        width: 5px;
        height: 5px;
        border-top: 1px solid #6b7b72;
        border-right: 1px solid #6b7b72;
        transform: rotate(45deg);
    }
}

@media (max-width: 390px) {
    .df-home-v2__mobile-flow-map li > strong {
        font-size: 8px;
    }

    .df-home-v2__mobile-flow-step {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
    }

    .df-home-v2__mobile-flow-marker {
        grid-template-rows: 33px 1fr;
    }

    .df-home-v2__mobile-flow-marker > span {
        width: 33px;
        height: 33px;
        border-radius: 11px;
    }

    .df-home-v2__mobile-flow-result {
        margin-left: 44px;
    }

    .df-home-v2__business-card,
    .df-home-v2__business-card--tours,
    .df-home-v2__business-card--rentals,
    .df-home-v2__business-card--charters,
    .df-home-v2__business-card--events {
        flex-basis: 84vw;
    }
}

/* =========================================================
   v1.0.72 — Cinematic product-first hero
   Approved direction: one responsive lifestyle background +
   one real five-column DockFlow Calendar strip + HTML copy.
   No pinned story, no app chrome, no fabricated glass UI.
   ========================================================= */
.df-home-v2__cinematic-hero {
    --df-cine-bg-scale: 1.018;
    --df-cine-ui-x: -26px;
    --df-cine-ui-y: 0px;
    --df-cine-ui-scale: 1;
    --df-cine-copy-y: 0px;
    --df-cine-copy-scale: 1;
    position: relative;
    min-height: clamp(820px, 100svh, 1080px);
    overflow: hidden;
    isolation: isolate;
    color: var(--df-home-white);
    background: #07100d;
}

.df-home-v2__cinematic-media,
.df-home-v2__cinematic-media picture,
.df-home-v2__cinematic-media img,
.df-home-v2__cinematic-shade,
.df-home-v2__cinematic-vignette,
.df-home-v2__cinematic-bottom {
    position: absolute;
    inset: 0;
}

.df-home-v2__cinematic-media {
    z-index: 0;
    overflow: hidden;
}

.df-home-v2__cinematic-media picture {
    display: block;
}

.df-home-v2__cinematic-media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    transform: scale(var(--df-cine-bg-scale));
    transform-origin: 57% 55%;
    will-change: transform;
}

/* Protect the copy without turning the selected photograph into a dark hero. */
.df-home-v2__cinematic-shade {
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(2, 8, 6, .68) 0%, rgba(3, 9, 7, .54) 25%, rgba(3, 9, 7, .18) 47%, rgba(3, 9, 7, 0) 70%),
        linear-gradient(180deg, rgba(3, 8, 6, .22) 0%, rgba(3, 8, 6, 0) 40%, rgba(3, 8, 6, .10) 68%, rgba(3, 8, 6, .52) 100%);
}

.df-home-v2__cinematic-vignette {
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 0 150px rgba(2, 8, 6, .19);
}

.df-home-v2__cinematic-inner {
    position: relative;
    z-index: 3;
    width: min(calc(100% - 72px), 1810px);
    min-height: clamp(820px, 100svh, 1080px);
    margin: 0 auto;
}

.df-home-v2__cinematic-copy {
    position: relative;
    z-index: 5;
    width: min(660px, 42vw);
    padding-top: clamp(170px, 18vh, 228px);
    transform: translate3d(0, var(--df-cine-copy-y), 0) scale(var(--df-cine-copy-scale));
    transform-origin: left top;
    will-change: transform;
}

.df-home-v2__cinematic-copy .df-home-v2__eyebrow {
    margin-bottom: 24px;
    color: rgba(223, 255, 235, .86);
    text-shadow: 0 2px 16px rgba(0,0,0,.22);
}

.df-home-v2__cinematic-copy h1 {
    max-width: 650px;
    margin: 0;
    color: #fff;
    font-size: clamp(62px, 5.3vw, 102px);
    font-weight: 760;
    letter-spacing: -.072em;
    line-height: .89;
    text-wrap: balance;
    text-shadow: 0 9px 40px rgba(0,0,0,.18);
}

.df-home-v2__cinematic-copy h1 em {
    display: block;
    color: var(--df-home-green);
    font-style: normal;
    font-weight: 720;
}

.df-home-v2__cinematic-lede {
    max-width: 570px;
    margin: 28px 0 0;
    color: rgba(255,255,255,.82);
    font-size: clamp(17px, 1.22vw, 21px);
    font-weight: 460;
    letter-spacing: -.022em;
    line-height: 1.54;
    text-shadow: 0 2px 18px rgba(0,0,0,.28);
}

.df-home-v2__cinematic-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.df-home-v2__cinematic-actions .df-home-v2__button--quiet {
    border-color: rgba(255,255,255,.24);
    background: rgba(4, 10, 7, .34);
    color: rgba(255,255,255,.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.df-home-v2__cinematic-audience {
    margin: 25px 0 0;
    color: rgba(255,255,255,.62);
    font-size: 11px;
    font-weight: 680;
    letter-spacing: .095em;
    text-transform: uppercase;
    text-shadow: 0 2px 14px rgba(0,0,0,.32);
}

/* The screenshot becomes product proof, not a software window. Five authentic
   Calendar columns are composited into one lightweight transparent strip. */
.df-home-v2__cinematic-calendar {
    position: absolute;
    z-index: 3;
    top: clamp(145px, 15vh, 190px);
    right: clamp(-310px, -14vw, -210px);
    width: min(70vw, 1320px);
    margin: 0;
    pointer-events: none;
    transform:
        perspective(1900px)
        translate3d(var(--df-cine-ui-x), var(--df-cine-ui-y), 0)
        rotateX(.35deg)
        rotateY(-2.4deg)
        rotateZ(-1.35deg)
        scale(var(--df-cine-ui-scale));
    transform-origin: 58% 45%;
    will-change: transform;
}

.df-home-v2__cinematic-calendar-mask {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 45%, rgba(0,0,0,.78) 57%, rgba(0,0,0,.28) 72%, transparent 84%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 45%, rgba(0,0,0,.78) 57%, rgba(0,0,0,.28) 72%, transparent 84%);
}

.df-home-v2__cinematic-calendar-mask::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(7,16,13,.66) 0%, transparent 8%, transparent 91%, rgba(7,16,13,.36) 100%);
}

.df-home-v2__cinematic-calendar img {
    width: 100%;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 26px 32px rgba(0,0,0,.23));
}

.df-home-v2__cinematic-bottom {
    z-index: 4;
    top: auto;
    height: 12%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(4, 8, 6, .64));
}

/* Tablet: same selected scene, intentionally recomposed. The product proof
   keeps four-ish columns readable and motion is reduced. */
@media (max-width: 1100px) {
    .df-home-v2__cinematic-hero,
    .df-home-v2__cinematic-inner {
        min-height: clamp(840px, 100svh, 980px);
    }

    .df-home-v2__cinematic-inner {
        width: min(calc(100% - 46px), 1040px);
    }

    .df-home-v2__cinematic-media img {
        object-position: center center;
        transform-origin: 60% 58%;
    }

    .df-home-v2__cinematic-shade {
        background:
            linear-gradient(90deg, rgba(2,8,6,.70) 0%, rgba(2,8,6,.48) 35%, rgba(2,8,6,.10) 65%, transparent 88%),
            linear-gradient(180deg, rgba(2,8,6,.22), transparent 48%, rgba(2,8,6,.50) 100%);
    }

    .df-home-v2__cinematic-copy {
        width: min(590px, 61vw);
        padding-top: clamp(148px, 16vh, 184px);
    }

    .df-home-v2__cinematic-copy h1 {
        font-size: clamp(56px, 7.6vw, 82px);
    }

    .df-home-v2__cinematic-calendar {
        top: clamp(300px, 34vh, 362px);
        right: -225px;
        width: min(1120px, 111vw);
        opacity: .94;
        transform:
            perspective(1700px)
            translate3d(var(--df-cine-ui-x), var(--df-cine-ui-y), 0)
            rotateY(-1.4deg)
            rotateZ(-1deg)
            scale(var(--df-cine-ui-scale));
    }

    .df-home-v2__cinematic-calendar-mask {
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 51%, rgba(0,0,0,.68) 72%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 51%, rgba(0,0,0,.68) 72%, transparent 100%);
    }
}

/* Mobile is a composition, not a shrunk desktop hero. The portrait crop keeps
   the human story, copy owns the sky, and the same five-column strip becomes a
   large masked ribbon with about 1.5–2 columns visible at any one moment. */
@media (max-width: 767px) {
    .df-home-v2__cinematic-hero {
        min-height: max(860px, 100svh);
    }

    .df-home-v2__cinematic-inner {
        width: min(calc(100% - 32px), 520px);
        min-height: max(860px, 100svh);
    }

    .df-home-v2__cinematic-media img {
        transform-origin: 54% 62%;
    }

    .df-home-v2__cinematic-shade {
        background:
            linear-gradient(180deg, rgba(2,8,6,.62) 0%, rgba(2,8,6,.42) 28%, rgba(2,8,6,.08) 51%, rgba(2,8,6,.12) 68%, rgba(2,8,6,.58) 100%),
            linear-gradient(90deg, rgba(2,8,6,.30), transparent 72%);
    }

    .df-home-v2__cinematic-vignette {
        box-shadow: inset 0 0 90px rgba(2,8,6,.16);
    }

    .df-home-v2__cinematic-copy {
        width: 100%;
        padding-top: clamp(116px, 15vh, 146px);
        transform: translate3d(0, var(--df-cine-copy-y), 0);
    }

    .df-home-v2__cinematic-copy .df-home-v2__eyebrow {
        max-width: 320px;
        margin-bottom: 17px;
        font-size: 10px;
        letter-spacing: .13em;
    }

    .df-home-v2__cinematic-copy h1 {
        max-width: 390px;
        font-size: clamp(46px, 13.2vw, 62px);
        line-height: .91;
    }

    .df-home-v2__cinematic-lede {
        max-width: 360px;
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.48;
    }

    .df-home-v2__cinematic-actions {
        gap: 9px;
        margin-top: 20px;
    }

    .df-home-v2__cinematic-actions .df-home-v2__button {
        min-height: 48px;
        padding: 0 17px;
        border-radius: 14px;
        font-size: 12px;
    }

    .df-home-v2__cinematic-audience {
        display: none;
    }

    .df-home-v2__cinematic-calendar {
        top: clamp(440px, 53vh, 510px);
        right: auto;
        left: 50%;
        width: 970px;
        opacity: .92;
        transform:
            translate3d(calc(-50% + var(--df-cine-ui-x)), var(--df-cine-ui-y), 0)
            rotateZ(-.75deg)
            scale(var(--df-cine-ui-scale));
        transform-origin: center top;
    }

    .df-home-v2__cinematic-calendar-mask {
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 50%, rgba(0,0,0,.62) 70%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 50%, rgba(0,0,0,.62) 70%, transparent 100%);
    }

    .df-home-v2__cinematic-calendar-mask::before {
        background: linear-gradient(90deg, rgba(7,16,13,.72) 0%, transparent 8%, transparent 92%, rgba(7,16,13,.56) 100%);
    }

    .df-home-v2__cinematic-bottom {
        height: 17%;
        background: linear-gradient(180deg, transparent, rgba(4,8,6,.72));
    }
}

@media (max-width: 430px) {
    .df-home-v2__cinematic-copy h1 {
        max-width: 355px;
        font-size: clamp(43px, 12.9vw, 56px);
    }

    .df-home-v2__cinematic-lede {
        max-width: 340px;
        font-size: 14px;
    }

    .df-home-v2__cinematic-calendar {
        top: clamp(432px, 52vh, 492px);
        width: 900px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .df-home-v2__cinematic-media img,
    .df-home-v2__cinematic-copy,
    .df-home-v2__cinematic-calendar {
        transform: none !important;
        will-change: auto;
    }

    .df-home-v2__cinematic-calendar {
        right: clamp(-310px, -14vw, -210px);
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
    .df-home-v2__cinematic-calendar {
        right: auto;
        left: 50%;
        transform: translateX(-50%) !important;
    }
}

/* =========================================================
   v1.0.73 — Hero art-direction correction
   First live pass showed the Calendar was too large, too white
   and too low in the frame. This pass keeps the exact chosen
   lifestyle image and exact real Calendar asset, but treats the
   Calendar as a short atmospheric ribbon in the sky instead of
   a second full interface sitting over the people.
   ========================================================= */
.df-home-v2__cinematic-hero {
    --df-cine-bg-scale: 1.012;
    --df-cine-ui-x: 10px;
    --df-cine-ui-y: 0px;
    --df-cine-ui-scale: 1;
    --df-cine-copy-y: 0px;
    --df-cine-copy-scale: 1;
}

.df-home-v2__cinematic-shade {
    background:
        linear-gradient(90deg, rgba(2, 8, 6, .56) 0%, rgba(3, 9, 7, .40) 24%, rgba(3, 9, 7, .13) 43%, rgba(3, 9, 7, 0) 62%),
        linear-gradient(180deg, rgba(3, 8, 6, .12) 0%, rgba(3, 8, 6, 0) 52%, rgba(3, 8, 6, .08) 72%, rgba(3, 8, 6, .40) 100%);
}

.df-home-v2__cinematic-vignette {
    box-shadow: inset 0 0 120px rgba(2, 8, 6, .12);
}

.df-home-v2__cinematic-copy {
    width: min(570px, 34vw);
    padding-top: clamp(178px, 18vh, 214px);
}

.df-home-v2__cinematic-copy .df-home-v2__eyebrow {
    max-width: 520px;
    margin-bottom: 20px;
}

.df-home-v2__cinematic-copy h1 {
    max-width: 570px;
    font-size: clamp(58px, 4.45vw, 84px);
    letter-spacing: -.064em;
    line-height: .92;
    white-space: normal;
}

.df-home-v2__cinematic-lede {
    max-width: 520px;
    margin-top: 24px;
    font-size: clamp(17px, 1.08vw, 20px);
    line-height: 1.5;
}

.df-home-v2__cinematic-actions {
    margin-top: 26px;
}

.df-home-v2__cinematic-audience {
    margin-top: 22px;
}

/* Keep the visual proof completely out of the human focal area.
   The figure is a viewport-safe window; only the image inside it
   is oversized. This also prevents the mobile asset from creating
   horizontal document overflow. */
.df-home-v2__cinematic-calendar {
    top: clamp(170px, 17vh, 204px);
    right: 0;
    width: min(63vw, 1200px);
    height: clamp(330px, 36vh, 390px);
    opacity: .86;
    overflow: hidden;
    transform:
        translate3d(var(--df-cine-ui-x), var(--df-cine-ui-y), 0)
        rotateZ(-1.45deg)
        scale(var(--df-cine-ui-scale));
    transform-origin: 60% 28%;
}

.df-home-v2__cinematic-calendar-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 47%, rgba(0,0,0,.76) 58%, rgba(0,0,0,.24) 72%, transparent 90%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 47%, rgba(0,0,0,.76) 58%, rgba(0,0,0,.24) 72%, transparent 90%);
}

.df-home-v2__cinematic-calendar-mask::before {
    background:
        linear-gradient(90deg, rgba(7,16,13,.56) 0%, rgba(7,16,13,.16) 4%, transparent 10%, transparent 91%, rgba(7,16,13,.24) 97%, rgba(7,16,13,.44) 100%);
}

.df-home-v2__cinematic-calendar img {
    position: absolute;
    top: 0;
    right: clamp(-38px, -2vw, -8px);
    width: min(56vw, 1070px);
    height: auto;
    opacity: .93;
    filter: drop-shadow(0 18px 22px rgba(0,0,0,.18));
}

.df-home-v2__cinematic-bottom {
    height: 9%;
    background: linear-gradient(180deg, transparent, rgba(4, 8, 6, .46));
}

@media (max-width: 1100px) {
    .df-home-v2__cinematic-shade {
        background:
            linear-gradient(90deg, rgba(2,8,6,.58) 0%, rgba(2,8,6,.38) 35%, rgba(2,8,6,.08) 66%, transparent 88%),
            linear-gradient(180deg, rgba(2,8,6,.12), transparent 55%, rgba(2,8,6,.38) 100%);
    }

    .df-home-v2__cinematic-copy {
        width: min(540px, 61vw);
        padding-top: clamp(150px, 16vh, 180px);
    }

    .df-home-v2__cinematic-copy h1 {
        max-width: 530px;
        font-size: clamp(54px, 7vw, 74px);
        line-height: .93;
    }

    .df-home-v2__cinematic-calendar {
        top: clamp(600px, 70vh, 680px);
        right: 0;
        width: 100%;
        height: clamp(230px, 27vh, 270px);
        opacity: .82;
        transform:
            translate3d(var(--df-cine-ui-x), var(--df-cine-ui-y), 0)
            rotateZ(-1deg)
            scale(var(--df-cine-ui-scale));
    }

    .df-home-v2__cinematic-calendar img {
        right: -60px;
        width: min(1150px, 118vw);
    }

    .df-home-v2__cinematic-calendar-mask {
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 45%, rgba(0,0,0,.68) 58%, rgba(0,0,0,.20) 73%, transparent 94%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 45%, rgba(0,0,0,.68) 58%, rgba(0,0,0,.20) 73%, transparent 94%);
    }
}

@media (max-width: 767px) {
    .df-home-v2__cinematic-hero,
    .df-home-v2__cinematic-inner {
        min-height: max(860px, 100svh);
    }

    .df-home-v2__cinematic-inner {
        width: calc(100% - 34px);
        max-width: 520px;
    }

    .df-home-v2__cinematic-shade {
        background:
            linear-gradient(180deg, rgba(2,8,6,.50) 0%, rgba(2,8,6,.33) 28%, rgba(2,8,6,.05) 49%, rgba(2,8,6,.08) 72%, rgba(2,8,6,.46) 100%);
    }

    .df-home-v2__cinematic-copy {
        width: 100%;
        max-width: 100%;
        padding-top: clamp(104px, 13vh, 132px);
    }

    .df-home-v2__cinematic-copy .df-home-v2__eyebrow {
        max-width: 300px;
        margin-bottom: 14px;
        font-size: 9px;
        line-height: 1.35;
    }

    .df-home-v2__cinematic-copy h1 {
        width: 100%;
        max-width: 350px;
        margin-right: 0;
        font-size: clamp(42px, 12vw, 54px);
        line-height: .94;
        letter-spacing: -.055em;
        white-space: normal !important;
        text-wrap: pretty;
        overflow-wrap: normal;
    }

    .df-home-v2__cinematic-lede {
        max-width: 335px;
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.46;
    }

    .df-home-v2__cinematic-actions {
        margin-top: 18px;
    }

    .df-home-v2__cinematic-calendar {
        top: clamp(590px, 69vh, 640px);
        left: 0;
        right: 0;
        width: 100%;
        height: 180px;
        opacity: .80;
        transform:
            translate3d(0, var(--df-cine-ui-y), 0)
            rotateZ(-.55deg)
            scale(var(--df-cine-ui-scale));
        transform-origin: 50% 30%;
    }

    .df-home-v2__cinematic-calendar-mask {
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 43%, rgba(0,0,0,.66) 58%, rgba(0,0,0,.18) 76%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 43%, rgba(0,0,0,.66) 58%, rgba(0,0,0,.18) 76%, transparent 100%);
    }

    .df-home-v2__cinematic-calendar-mask::before {
        background: linear-gradient(90deg, rgba(7,16,13,.46) 0%, transparent 9%, transparent 91%, rgba(7,16,13,.36) 100%);
    }

    .df-home-v2__cinematic-calendar img {
        top: 0;
        right: auto;
        left: 50%;
        width: 780px;
        max-width: none;
        transform: translate3d(calc(-50% + var(--df-cine-ui-x)), 0, 0);
        opacity: .91;
        filter: drop-shadow(0 12px 16px rgba(0,0,0,.16));
    }

    .df-home-v2__cinematic-bottom {
        height: 12%;
        background: linear-gradient(180deg, transparent, rgba(4,8,6,.50));
    }
}

@media (max-width: 430px) {
    .df-home-v2__cinematic-copy h1 {
        max-width: 330px;
        font-size: clamp(40px, 11.7vw, 50px);
    }

    .df-home-v2__cinematic-copy .df-home-v2__eyebrow {
        max-width: 278px;
    }

    .df-home-v2__cinematic-lede {
        max-width: 320px;
    }

    .df-home-v2__cinematic-calendar {
        top: clamp(580px, 69vh, 625px);
        height: 175px;
    }

    .df-home-v2__cinematic-calendar img {
        width: 740px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .df-home-v2__cinematic-calendar,
    .df-home-v2__cinematic-calendar img {
        transform: none !important;
    }

    .df-home-v2__cinematic-calendar img {
        right: clamp(-38px, -2vw, -8px);
        left: auto;
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
    .df-home-v2__cinematic-calendar img {
        right: auto;
        left: 50%;
        transform: translateX(-50%) !important;
    }
}

/* =========================================================
   v1.0.74 — Static cinematic Calendar hero
   The approved composite photograph already contains the real five-column
   Calendar treatment. Keep the hero structurally simple: one responsive image,
   HTML copy/CTAs, no separate Calendar layer and no scroll choreography.
   ========================================================= */
.df-home-v2__cinematic-hero {
    --df-cine-bg-scale: 1;
    --df-cine-copy-y: 0px;
    --df-cine-copy-scale: 1;
    min-height: clamp(850px, 100svh, 1030px);
    background: #102b3f;
}

.df-home-v2__cinematic-media img {
    object-fit: cover;
    object-position: center center;
    transform: none !important;
    transform-origin: center;
    will-change: auto;
}

.df-home-v2__cinematic-shade {
    background:
        linear-gradient(90deg, rgba(3, 12, 18, .66) 0%, rgba(3, 12, 18, .46) 25%, rgba(3, 12, 18, .18) 42%, rgba(3, 12, 18, 0) 61%),
        linear-gradient(180deg, rgba(2, 8, 12, .08) 0%, rgba(2, 8, 12, 0) 58%, rgba(2, 8, 12, .18) 78%, rgba(2, 8, 12, .38) 100%);
}

.df-home-v2__cinematic-vignette {
    box-shadow: inset 0 0 120px rgba(2, 8, 12, .12);
}

.df-home-v2__cinematic-inner {
    width: min(calc(100% - 72px), 1810px);
    min-height: clamp(850px, 100svh, 1030px);
}

.df-home-v2__cinematic-copy {
    width: min(620px, 41vw);
    max-width: 620px;
    padding-top: clamp(250px, 27vh, 310px);
    transform: none !important;
    will-change: auto;
}

.df-home-v2__cinematic-copy .df-home-v2__eyebrow {
    margin-bottom: 20px;
    color: rgba(224, 255, 237, .92);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-shadow: 0 2px 18px rgba(0,0,0,.3);
}

.df-home-v2__cinematic-copy h1 {
    max-width: 620px;
    color: #fff;
    font-size: clamp(58px, 4.65vw, 84px);
    font-weight: 760;
    letter-spacing: -.067em;
    line-height: .94;
    text-shadow: 0 8px 34px rgba(0,0,0,.22);
}

.df-home-v2__cinematic-copy h1 > span,
.df-home-v2__cinematic-copy h1 > em {
    display: block;
}

.df-home-v2__cinematic-copy h1 > em {
    margin-top: 4px;
    color: #fff;
    font-style: normal;
    font-weight: 760;
}

.df-home-v2__cinematic-copy h1 > em strong {
    color: var(--df-home-green);
    font: inherit;
}

.df-home-v2__cinematic-lede {
    max-width: 545px;
    margin-top: 24px;
    color: rgba(255,255,255,.86);
    font-size: clamp(17px, 1.15vw, 20px);
    line-height: 1.5;
    text-shadow: 0 2px 18px rgba(0,0,0,.3);
}

.df-home-v2__cinematic-actions {
    margin-top: 27px;
}

.df-home-v2__cinematic-actions .df-home-v2__button--quiet {
    border-color: rgba(255,255,255,.26);
    background: rgba(3, 12, 18, .32);
}

.df-home-v2__cinematic-calendar {
    display: none !important;
}

.df-home-v2__cinematic-bottom {
    height: 9%;
    background: linear-gradient(180deg, transparent, rgba(3, 9, 12, .34));
}

@media (max-width: 1100px) {
    .df-home-v2__cinematic-hero,
    .df-home-v2__cinematic-inner {
        min-height: clamp(820px, 100svh, 940px);
    }

    .df-home-v2__cinematic-inner {
        width: min(calc(100% - 46px), 1040px);
    }

    .df-home-v2__cinematic-media img {
        object-position: 58% center;
    }

    .df-home-v2__cinematic-shade {
        background:
            linear-gradient(90deg, rgba(3,12,18,.69) 0%, rgba(3,12,18,.48) 34%, rgba(3,12,18,.15) 54%, rgba(3,12,18,0) 74%),
            linear-gradient(180deg, rgba(2,8,12,.08), transparent 60%, rgba(2,8,12,.34) 100%);
    }

    .df-home-v2__cinematic-copy {
        width: min(530px, 52vw);
        max-width: 530px;
        padding-top: clamp(205px, 23vh, 245px);
    }

    .df-home-v2__cinematic-copy h1 {
        max-width: 530px;
        font-size: clamp(52px, 6.6vw, 70px);
        line-height: .95;
    }

    .df-home-v2__cinematic-lede {
        max-width: 470px;
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .df-home-v2__cinematic-hero,
    .df-home-v2__cinematic-inner {
        min-height: max(860px, 100svh);
    }

    .df-home-v2__cinematic-hero {
        background: #17364e;
    }

    .df-home-v2__cinematic-inner {
        width: min(calc(100% - 32px), 520px);
    }

    .df-home-v2__cinematic-media {
        background: #17364e;
    }

    .df-home-v2__cinematic-media picture {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    .df-home-v2__cinematic-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center top;
        transform: none !important;
    }

    .df-home-v2__cinematic-shade {
        background:
            linear-gradient(180deg, rgba(3,12,18,.72) 0%, rgba(3,12,18,.54) 24%, rgba(3,12,18,.28) 42%, rgba(3,12,18,.10) 58%, rgba(3,12,18,.20) 78%, rgba(3,12,18,.52) 100%);
    }

    .df-home-v2__cinematic-vignette {
        box-shadow: inset 0 0 75px rgba(2,8,12,.11);
    }

    .df-home-v2__cinematic-copy {
        width: 100%;
        max-width: 100%;
        padding-top: clamp(112px, 13vh, 136px);
    }

    .df-home-v2__cinematic-copy .df-home-v2__eyebrow {
        margin-bottom: 14px;
        font-size: 9px;
        letter-spacing: .15em;
    }

    .df-home-v2__cinematic-copy h1 {
        max-width: 360px;
        font-size: clamp(42px, 11.7vw, 52px);
        letter-spacing: -.055em;
        line-height: .96;
        text-wrap: pretty;
    }

    .df-home-v2__cinematic-copy h1 > em {
        margin-top: 2px;
    }

    .df-home-v2__cinematic-lede {
        max-width: 350px;
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.45;
    }

    .df-home-v2__cinematic-actions {
        gap: 8px;
        margin-top: 18px;
    }

    .df-home-v2__cinematic-actions .df-home-v2__button {
        min-height: 47px;
        padding: 0 16px;
        border-radius: 14px;
        font-size: 12px;
    }

    .df-home-v2__cinematic-bottom {
        height: 16%;
        background: linear-gradient(180deg, transparent, rgba(3,9,12,.58));
    }
}

@media (max-width: 430px) {
    .df-home-v2__cinematic-copy h1 {
        max-width: 340px;
        font-size: clamp(40px, 11.3vw, 49px);
    }

    .df-home-v2__cinematic-lede {
        max-width: 325px;
    }
}

.df-home-v2__ops-briefing {
    position: relative;
    overflow: hidden;
    padding: clamp(84px, 9vw, 126px) 0;
    background:
        radial-gradient(circle at 14% 18%, rgba(37, 214, 115, 0.14), transparent 30%),
        radial-gradient(circle at 82% 72%, rgba(37, 214, 115, 0.08), transparent 26%),
        linear-gradient(180deg, #fcfffd 0%, #f5fbf8 100%);
}

.df-home-v2__ops-briefing::before {
    content: '';
    position: absolute;
    top: -140px;
    left: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 214, 115, 0.20) 0%, rgba(37, 214, 115, 0.10) 32%, rgba(37, 214, 115, 0) 72%);
    filter: blur(14px);
    pointer-events: none;
}

.df-home-v2__ops-briefing::after {
    content: '';
    position: absolute;
    right: -120px;
    bottom: -160px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 214, 115, 0.14) 0%, rgba(37, 214, 115, 0.06) 38%, rgba(37, 214, 115, 0) 72%);
    filter: blur(18px);
    pointer-events: none;
}

.df-home-v2__ops-briefing-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(34px, 4vw, 64px);
    align-items: center;
}

.df-home-v2__ops-briefing-copy {
    max-width: 560px;
}

.df-home-v2__ops-briefing-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.df-home-v2__ops-briefing-points span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(14, 23, 19, 0.09);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px rgba(16, 28, 24, 0.06);
    color: #10211b;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.df-home-v2__ops-briefing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.df-home-v2__ops-briefing-window {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(9, 21, 17, 0.08);
    background: #d8e2dc;
    box-shadow: 0 36px 90px rgba(13, 23, 20, 0.12);
}

.df-home-v2__ops-briefing-window::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 24%;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(10, 18, 15, 0.06));
    pointer-events: none;
}

.df-home-v2__ops-briefing-window img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1100px) {
    .df-home-v2__ops-briefing-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .df-home-v2__ops-briefing-copy {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .df-home-v2__ops-briefing {
        padding: 58px 0 72px;
    }

    .df-home-v2__ops-briefing::before {
        top: -120px;
        left: -180px;
        width: 340px;
        height: 340px;
        opacity: .95;
    }

    .df-home-v2__ops-briefing::after {
        right: -170px;
        bottom: -140px;
        width: 280px;
        height: 280px;
        opacity: .85;
    }

    .df-home-v2__ops-briefing-grid {
        gap: 24px;
    }

    .df-home-v2__ops-briefing-points {
        gap: 8px;
        margin-top: 20px;
    }

    .df-home-v2__ops-briefing-points span {
        min-height: 38px;
        padding: 0 13px;
        font-size: 12px;
    }

    .df-home-v2__ops-briefing-actions {
        gap: 10px;
        margin-top: 22px;
    }

    .df-home-v2__ops-briefing-actions .df-home-v2__button {
        flex: 1 1 calc(50% - 5px);
    }

    .df-home-v2__ops-briefing-window {
        border-radius: 24px;
    }
}

@media (max-width: 560px) {
    .df-home-v2__ops-briefing-actions .df-home-v2__button {
        flex: 1 1 100%;
    }
}



/* =========================================================
   v1.0.99 — Mobile Check-In cinematic system (authoritative).
   One implementation owns layout, responsive behavior, scanner states,
   and ticket micro-toasts. Desktop overlay geometry is projected from
   source-image coordinates by dockflow-home-v2.js.
   ========================================================= */
.df-home-v2__scan-checkin {
    position: relative;
    overflow: hidden;
    padding: clamp(84px, 9vw, 126px) 0;
    background:
        radial-gradient(circle at 16% 26%, rgba(37, 214, 115, 0.10), transparent 30%),
        linear-gradient(180deg, #f4f8f5 0%, #edf5f0 100%);
}

.df-home-v2__scan-stage {
    position: relative;
    min-height: clamp(560px, 58vw, 760px);
    overflow: hidden;
    border-radius: 38px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: #08110d;
    box-shadow: 0 34px 90px rgba(9, 18, 14, 0.18);
    isolation: isolate;
}

.df-home-v2__scan-stage-media,
.df-home-v2__scan-stage-media picture,
.df-home-v2__scan-stage-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.df-home-v2__scan-stage-media picture {
    display: block;
}

.df-home-v2__scan-stage-media img {
    display: block;
    object-fit: cover;
    object-position: center center;
}

.df-home-v2__scan-stage-shade,
.df-home-v2__scan-stage-vignette,
.df-home-v2__scan-stage-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.df-home-v2__scan-stage-shade {
    background:
        linear-gradient(90deg, rgba(4, 11, 8, 0.92) 0%, rgba(4, 11, 8, 0.86) 20%, rgba(4, 11, 8, 0.62) 40%, rgba(4, 11, 8, 0.18) 58%, rgba(4, 11, 8, 0) 74%),
        linear-gradient(180deg, rgba(4, 11, 8, 0.18) 0%, rgba(4, 11, 8, 0.04) 32%, rgba(4, 11, 8, 0.08) 100%);
}

.df-home-v2__scan-stage-vignette {
    background: radial-gradient(circle at 72% 54%, rgba(0, 0, 0, 0) 34%, rgba(3, 8, 6, 0.28) 100%);
}

.df-home-v2__scan-stage-glow {
    inset: auto auto -120px -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 214, 115, 0.22) 0%, rgba(37, 214, 115, 0.12) 34%, rgba(37, 214, 115, 0) 72%);
    filter: blur(16px);
}

.df-home-v2__scan-stage-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: inherit;
    width: min(100%, 620px);
    padding: clamp(44px, 4.4vw, 68px);
}

.df-home-v2__scan-stage-copy .df-home-v2__eyebrow {
    color: rgba(236, 244, 240, 0.88);
}

.df-home-v2__scan-stage-title {
    display: grid;
    gap: 4px;
    margin: 18px 0 0;
    color: #ffffff;
    font-size: clamp(50px, 5.3vw, 88px);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.05em;
}

.df-home-v2__scan-stage-title span,
.df-home-v2__scan-stage-title em {
    display: block;
}

.df-home-v2__scan-stage-title em {
    font-style: normal;
    color: #dff3e7;
}

.df-home-v2__scan-stage-title em strong {
    color: #25d673;
    font-style: normal;
    font-weight: 800;
}

.df-home-v2__scan-stage-copy .df-home-v2__cinematic-lede {
    max-width: 540px;
    margin-top: 24px;
    color: rgba(236, 244, 240, 0.90);
}

.df-home-v2__scan-stage-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.df-home-v2__scan-stage-points span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(7, 15, 11, 0.34);
    box-shadow: 0 18px 40px rgba(4, 10, 8, 0.10);
    backdrop-filter: blur(10px);
    color: #f1f6f3;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.df-home-v2__scan-stage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* Desktop: full-bleed photography, normal DockFlow content grid. */
@media (min-width: 901px) {
    .df-home-v2__scan-checkin {
        padding: 0;
        background: #08110d;
    }

    .df-home-v2__scan-checkin > .df-home-v2__section-shell {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .df-home-v2__scan-stage {
        min-height: clamp(610px, 46.5vw, 750px);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .df-home-v2__scan-stage-copy {
        --df-scan-editorial-width: clamp(390px, calc(45vw - max(32px, calc((100vw - var(--df-home-content-max)) / 2))), 620px);
        width: min(calc(100% - 64px), var(--df-home-content-max));
        margin: 0 auto;
        padding: clamp(50px, 4.2vw, 68px) 0;
    }

    .df-home-v2__scan-stage-title {
        width: auto;
        max-width: var(--df-scan-editorial-width);
        font-size: clamp(46px, 4.8vw, 80px);
    }

    .df-home-v2__scan-stage-copy .df-home-v2__cinematic-lede,
    .df-home-v2__scan-stage-points,
    .df-home-v2__scan-stage-actions {
        max-width: min(540px, var(--df-scan-editorial-width));
    }

    .df-home-v2__scan-stage-fx {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
    }

    /* JS supplies left/top/width/height from source-image projection. */
    .df-home-v2__scan-stage-viewport {
        position: absolute;
        left: 0;
        top: 0;
        width: 96px;
        height: 148px;
        overflow: hidden;
        border-radius: 13px;
        transform: perspective(1200px) rotateY(-8deg) rotateZ(-4.35deg);
        filter: drop-shadow(0 9px 20px rgba(0, 0, 0, 0.09));
        isolation: isolate;
    }

    .df-home-v2__scan-stage-viewport::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0));
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.04),
            inset 0 0 18px rgba(42,219,122,.025);
        pointer-events: none;
    }

    .df-home-v2__scan-stage-viewport-aura,
    .df-home-v2__scan-stage-viewport-focus,
    .df-home-v2__scan-stage-viewport-band,
    .df-home-v2__scan-stage-viewport-resolve,
    .df-home-v2__scan-stage-viewport-corner {
        position: absolute;
        pointer-events: none;
    }

    .df-home-v2__scan-stage-viewport-aura {
        inset: -8%;
        z-index: 0;
        border-radius: 15px;
        background: radial-gradient(circle at 50% 48%, rgba(46,226,129,.20) 0%, rgba(46,226,129,.07) 38%, rgba(46,226,129,0) 74%);
        filter: blur(8px);
        opacity: .05;
        transform: scale(.985);
        transition: opacity 360ms ease, transform 520ms cubic-bezier(.22,.61,.36,1);
    }

    .df-home-v2__scan-stage-viewport-focus {
        left: 9%;
        right: 9%;
        top: 8%;
        bottom: 8%;
        z-index: 2;
        border-radius: 10px;
        border: 1px solid rgba(52,231,132,.055);
        background: linear-gradient(180deg, rgba(52,231,132,.016), rgba(52,231,132,.006));
        box-shadow: inset 0 0 14px rgba(52,231,132,.018);
        opacity: .58;
        transition: border-color 260ms ease, box-shadow 360ms ease, background 360ms ease, opacity 260ms ease;
    }

    .df-home-v2__scan-stage-viewport-corner {
        z-index: 5;
        width: 14px;
        height: 14px;
        border-style: solid;
        border-color: rgba(61,232,142,.90);
        border-width: 0;
        opacity: .34;
        filter: drop-shadow(0 0 4px rgba(52,231,132,.12));
        transition: opacity 240ms ease, filter 300ms ease, transform 320ms cubic-bezier(.22,.61,.36,1);
    }

    .df-home-v2__scan-stage-viewport-corner--tl { top: 8.5%; left: 10.5%; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 8px; }
    .df-home-v2__scan-stage-viewport-corner--tr { top: 8.5%; right: 10.5%; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 8px; }
    .df-home-v2__scan-stage-viewport-corner--bl { bottom: 8.5%; left: 10.5%; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 8px; }
    .df-home-v2__scan-stage-viewport-corner--br { bottom: 8.5%; right: 10.5%; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 8px; }

    .df-home-v2__scan-stage-viewport-band {
        left: 7%;
        right: 7%;
        top: 4%;
        z-index: 4;
        height: 34%;
        border-radius: 999px;
        opacity: 0;
        background:
            linear-gradient(180deg,
                rgba(52,231,132,0) 0%,
                rgba(52,231,132,.06) 18%,
                rgba(52,231,132,.18) 38%,
                rgba(86,245,159,.82) 48%,
                rgba(160,255,201,.96) 50%,
                rgba(86,245,159,.76) 52%,
                rgba(52,231,132,.16) 64%,
                rgba(52,231,132,.05) 82%,
                rgba(52,231,132,0) 100%);
        box-shadow: 0 0 7px rgba(52,231,132,.14), 0 0 15px rgba(52,231,132,.07);
        mix-blend-mode: screen;
        transform: translate3d(0, -72%, 0);
        will-change: transform, opacity;
    }

    .df-home-v2__scan-stage-viewport-resolve {
        inset: 8%;
        z-index: 3;
        border-radius: 10px;
        border: 1px solid rgba(75,239,150,0);
        background: rgba(46,226,129,0);
        box-shadow: inset 0 0 0 rgba(52,231,132,0), 0 0 0 rgba(52,231,132,0);
        opacity: 0;
        transform: scale(.97);
        will-change: opacity, transform;
    }

    .df-home-v2__scan-stage[data-df-scan-state='lock'] .df-home-v2__scan-stage-viewport-aura {
        opacity: .38;
        transform: scale(1);
    }

    .df-home-v2__scan-stage[data-df-scan-state='lock'] .df-home-v2__scan-stage-viewport-focus,
    .df-home-v2__scan-stage[data-df-scan-state='scan'] .df-home-v2__scan-stage-viewport-focus {
        opacity: .92;
        border-color: rgba(61,232,142,.16);
        background: linear-gradient(180deg, rgba(52,231,132,.032), rgba(52,231,132,.012));
        box-shadow: inset 0 0 18px rgba(52,231,132,.035);
    }

    .df-home-v2__scan-stage[data-df-scan-state='lock'] .df-home-v2__scan-stage-viewport-corner,
    .df-home-v2__scan-stage[data-df-scan-state='scan'] .df-home-v2__scan-stage-viewport-corner {
        opacity: .94;
        filter: drop-shadow(0 0 5px rgba(52,231,132,.24));
        transform: scale(1.025);
    }

    .df-home-v2__scan-stage[data-df-scan-state='scan'] .df-home-v2__scan-stage-viewport-band {
        animation: df-home-scan-pass 1120ms cubic-bezier(.32,.02,.22,1) both;
    }

    .df-home-v2__scan-stage[data-df-scan-state='success'] .df-home-v2__scan-stage-viewport-corner {
        opacity: 1;
        filter: drop-shadow(0 0 7px rgba(52,231,132,.36));
        transform: scale(1.05);
    }

    .df-home-v2__scan-stage[data-df-scan-state='success'] .df-home-v2__scan-stage-viewport-focus {
        opacity: 1;
        border-color: rgba(75,239,150,.24);
        background: linear-gradient(180deg, rgba(52,231,132,.07), rgba(52,231,132,.02));
        box-shadow: inset 0 0 24px rgba(52,231,132,.07);
    }

    .df-home-v2__scan-stage[data-df-scan-state='success'] .df-home-v2__scan-stage-viewport-resolve {
        animation: df-home-scan-success 460ms cubic-bezier(.22,.61,.36,1) both;
    }

    .df-home-v2__scan-stage[data-df-scan-state='settle'] .df-home-v2__scan-stage-viewport-corner {
        opacity: .48;
    }

    .df-home-v2__scan-stage-toasts {
        position: absolute;
        inset: 0;
        z-index: 7;
        pointer-events: none;
    }

    /* JS projects each toast anchor from the approved image-coordinate map. */
    .df-home-v2__scan-stage-toast {
        position: absolute;
        left: 0;
        top: 0;
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        align-items: start;
        gap: 9px;
        width: clamp(176px, 12vw, 202px);
        min-height: 0;
        padding: 9px 10px 9px 11px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.075);
        border-radius: 13px;
        color: #f6faf7;
        background: rgba(9, 12, 10, .88);
        box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025);
        backdrop-filter: blur(12px) saturate(118%);
        opacity: 0;
        transform: translate3d(0, 11px, 0) scale(.972);
        transform-origin: center center;
        transition:
            opacity 220ms ease,
            transform 320ms cubic-bezier(.22,.61,.36,1),
            border-color 280ms ease,
            box-shadow 320ms ease;
        will-change: opacity, transform;
    }

    .df-home-v2__scan-stage-toast::before {
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 2px;
        border-radius: 999px;
        background: rgba(54,231,136,.80);
        box-shadow: 0 0 8px rgba(54,231,136,.20);
    }

    .df-home-v2__scan-stage-toast.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        border-color: rgba(255,255,255,.095);
        box-shadow: 0 14px 32px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.035);
    }

    .df-home-v2__scan-stage-toast.is-exiting {
        opacity: 0;
        transform: translate3d(0, -8px, 0) scale(.992);
    }

    .df-home-v2__scan-stage-toast-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        margin-top: 1px;
        border: 1px solid rgba(67,235,145,.10);
        border-radius: 8px;
        background: rgba(52,231,132,.10);
        color: #45e98f;
    }

    .df-home-v2__scan-stage-toast-icon svg {
        width: 13px;
        height: 13px;
        stroke: currentColor;
    }

    .df-home-v2__scan-stage-toast-copy {
        min-width: 0;
    }

    .df-home-v2__scan-stage-toast-copy small {
        display: block;
        color: rgba(242,248,244,.62);
        font-size: 9.5px;
        font-weight: 650;
        line-height: 1.15;
        letter-spacing: .01em;
        text-transform: none;
    }

    .df-home-v2__scan-stage-toast-copy strong {
        display: block;
        margin-top: 2px;
        overflow: hidden;
        color: #ffffff;
        font-size: 12.5px;
        font-weight: 650;
        line-height: 1.2;
        letter-spacing: -.018em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .df-home-v2__scan-stage-toast-meta {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        margin-top: 5px;
    }

    .df-home-v2__scan-stage-toast-meta span {
        min-width: 0;
        overflow: hidden;
        color: rgba(242,248,244,.66);
        font-size: 9px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .035em;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .df-home-v2__scan-stage-toast-meta em {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        min-height: 17px;
        padding: 0 6px;
        border: 1px solid rgba(255,255,255,.07);
        border-radius: 999px;
        background: rgba(255,255,255,.045);
        color: rgba(248,251,249,.92);
        font-size: 8.5px;
        font-style: normal;
        font-weight: 620;
        line-height: 1;
        letter-spacing: .02em;
    }

    @keyframes df-home-scan-pass {
        0% {
            opacity: 0;
            transform: translate3d(0, -72%, 0);
        }
        12% {
            opacity: .58;
        }
        34% {
            opacity: .88;
        }
        72% {
            opacity: .76;
        }
        100% {
            opacity: 0;
            transform: translate3d(0, 286%, 0);
        }
    }

    @keyframes df-home-scan-success {
        0% {
            opacity: 0;
            transform: scale(.97);
            border-color: rgba(75,239,150,0);
            background: rgba(46,226,129,0);
            box-shadow: inset 0 0 0 rgba(52,231,132,0), 0 0 0 rgba(52,231,132,0);
        }
        34% {
            opacity: .72;
            transform: scale(1);
            border-color: rgba(75,239,150,.34);
            background: rgba(46,226,129,.045);
            box-shadow: inset 0 0 22px rgba(52,231,132,.10), 0 0 13px rgba(52,231,132,.09);
        }
        100% {
            opacity: 0;
            transform: scale(1.015);
            border-color: rgba(75,239,150,.08);
            background: rgba(46,226,129,0);
            box-shadow: inset 0 0 28px rgba(52,231,132,0), 0 0 20px rgba(52,231,132,0);
        }
    }
}

/* Approved tablet/mobile composition remains intentionally static. */
@media (max-width: 900px) {
    .df-home-v2__scan-stage {
        min-height: clamp(560px, 66vw, 720px);
    }

    .df-home-v2__scan-stage-copy {
        width: min(100%, 1260px);
        padding: 38px 26px 42px;
    }

    .df-home-v2__scan-stage-shade {
        background:
            linear-gradient(180deg, rgba(4, 11, 8, 0.86) 0%, rgba(4, 11, 8, 0.76) 24%, rgba(4, 11, 8, 0.44) 50%, rgba(4, 11, 8, 0.12) 74%, rgba(4, 11, 8, 0.08) 100%),
            linear-gradient(90deg, rgba(4, 11, 8, 0.26) 0%, rgba(4, 11, 8, 0) 50%);
    }

    .df-home-v2__scan-stage-fx {
        display: none;
    }
}

@media (max-width: 767px) {
    .df-home-v2__scan-checkin {
        padding: 58px 0 72px;
    }

    .df-home-v2__scan-checkin > .df-home-v2__section-shell {
        width: min(calc(100% - 38px), var(--df-home-max));
        margin: 0 auto;
    }

    .df-home-v2__scan-stage {
        min-height: 860px;
        border-left: 1px solid rgba(255,255,255,.08);
        border-right: 1px solid rgba(255,255,255,.08);
        border-radius: 30px;
    }

    .df-home-v2__scan-stage-media img {
        object-position: center top;
    }

    .df-home-v2__scan-stage-glow {
        left: -80px;
        bottom: auto;
        top: -110px;
        width: 300px;
        height: 300px;
    }

    .df-home-v2__scan-stage-copy {
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 28px 22px 34px;
        justify-content: flex-start;
    }

    .df-home-v2__scan-stage-title {
        font-size: clamp(32px, 11vw, 54px);
        line-height: .95;
    }

    .df-home-v2__scan-stage-copy .df-home-v2__cinematic-lede {
        max-width: 100%;
        margin-top: 18px;
        font-size: 18px;
        line-height: 1.48;
    }

    .df-home-v2__scan-stage-points {
        gap: 8px;
        margin-top: 20px;
    }

    .df-home-v2__scan-stage-points span {
        min-height: 38px;
        padding: 0 13px;
        font-size: 12px;
    }

    .df-home-v2__scan-stage-actions {
        gap: 10px;
        margin-top: 22px;
    }

    .df-home-v2__scan-stage-actions .df-home-v2__button {
        flex: 1 1 calc(50% - 5px);
    }
}

@media (max-width: 560px) {
    .df-home-v2__scan-stage {
        min-height: 920px;
    }

    .df-home-v2__scan-stage-actions .df-home-v2__button {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
    .df-home-v2__scan-stage-viewport-aura,
    .df-home-v2__scan-stage-viewport-band,
    .df-home-v2__scan-stage-viewport-resolve {
        display: none;
    }

    .df-home-v2__scan-stage-viewport-corner {
        opacity: .46;
        transition: none;
    }

    .df-home-v2__scan-stage-viewport-focus {
        opacity: .62;
        transition: none;
    }

    .df-home-v2__scan-stage-toast {
        opacity: 0;
        transition: none;
    }
}

/* =========================================================
   v1.0.84 — Cinematic team readiness / departure prep
   6 AM dockside crew story with an HTML checklist toast.
   Built additively from the protected v1.0.82 homepage.
   ========================================================= */
.df-home-v2__crew-prep {
    position: relative;
    overflow: hidden;
    background: #050806;
}

.df-home-v2__crew-prep-stage {
    position: relative;
    isolation: isolate;
    min-height: clamp(760px, 52vw, 940px);
    display: flex;
    align-items: center;
}

.df-home-v2__crew-prep-media,
.df-home-v2__crew-prep-media picture,
.df-home-v2__crew-prep-media img,
.df-home-v2__crew-prep-shade,
.df-home-v2__crew-prep-vignette {
    position: absolute;
    inset: 0;
}

.df-home-v2__crew-prep-media {
    z-index: -2;
    overflow: hidden;
    background: #090d0b;
}

.df-home-v2__crew-prep-media picture,
.df-home-v2__crew-prep-media img {
    width: 100%;
    height: 100%;
    display: block;
}

.df-home-v2__crew-prep-media img {
    object-fit: cover;
    object-position: center center;
    transform: scale(1.015);
    transition: transform 8s cubic-bezier(.2,.7,.2,1);
}

.df-home-v2__crew-prep-stage.is-visible .df-home-v2__crew-prep-media img {
    transform: scale(1.045);
}

.df-home-v2__crew-prep-shade {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(3,7,5,.95) 0%, rgba(3,7,5,.86) 22%, rgba(3,7,5,.58) 39%, rgba(3,7,5,.18) 59%, rgba(3,7,5,.04) 100%),
        linear-gradient(180deg, rgba(3,7,5,.10) 0%, rgba(3,7,5,.02) 48%, rgba(3,7,5,.54) 100%);
}

.df-home-v2__crew-prep-vignette {
    z-index: 2;
    box-shadow: inset 0 0 160px rgba(0,0,0,.20);
    pointer-events: none;
}

.df-home-v2__crew-prep-shell {
    position: relative;
    min-height: inherit;
    display: flex;
    align-items: center;
    padding-top: clamp(88px, 8vw, 132px);
    padding-bottom: clamp(88px, 8vw, 132px);
}

.df-home-v2__crew-prep-copy {
    position: relative;
    z-index: 4;
    width: min(590px, 48vw);
}

.df-home-v2__crew-prep-copy .df-home-v2__eyebrow {
    margin-bottom: 22px;
}

.df-home-v2__crew-prep-title {
    display: grid;
    gap: 2px;
    margin: 0;
    color: #f6f8f6;
    font-size: clamp(52px, 4.55vw, 78px);
    font-weight: 790;
    line-height: .98;
    letter-spacing: -0.055em;
}

.df-home-v2__crew-prep-title span,
.df-home-v2__crew-prep-title em {
    display: block;
}

.df-home-v2__crew-prep-title em {
    color: var(--df-home-green);
    font-style: normal;
}

.df-home-v2__crew-prep-copy > .df-home-v2__cinematic-lede {
    max-width: 565px;
    margin-top: 28px;
    color: rgba(245,248,245,.72);
    font-size: clamp(17px, 1.15vw, 19px);
    line-height: 1.62;
}

.df-home-v2__crew-prep-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.df-home-v2__crew-prep-actions .df-home-v2__button--quiet {
    border-color: rgba(255,255,255,.18);
    color: #f5f8f5;
    background: rgba(6,10,8,.30);
}

.df-home-v2__crew-prep-actions .df-home-v2__button--quiet:hover {
    border-color: rgba(255,255,255,.34);
    background: rgba(6,10,8,.52);
}

.df-home-v2__prep-toast {
    position: absolute;
    z-index: 5;
    right: clamp(26px, 5.2vw, 92px);
    bottom: clamp(26px, 5vw, 70px);
    width: min(360px, 29vw);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    background: rgba(10,15,12,.94);
    box-shadow: 0 26px 70px rgba(0,0,0,.34);
    color: #f6f8f6;
    opacity: 0;
    transform: translateY(18px) scale(.985);
}

.df-home-v2__crew-prep-stage.is-visible .df-home-v2__prep-toast {
    animation: dfPrepToastIn .72s .14s cubic-bezier(.2,.8,.2,1) forwards;
}

.df-home-v2__prep-toast-head {
    display: grid;
    gap: 7px;
    padding: 18px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.df-home-v2__prep-toast-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(245,248,245,.58);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .01em;
}

.df-home-v2__prep-toast-live i,
.df-home-v2__prep-toast-ready i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--df-home-green);
    box-shadow: 0 0 0 5px rgba(32,223,114,.11);
}

.df-home-v2__prep-toast-head strong {
    color: #fff;
    font-size: 17px;
    font-weight: 720;
    letter-spacing: -0.03em;
}

.df-home-v2__prep-toast-list {
    display: grid;
    padding: 5px 20px;
}

.df-home-v2__prep-toast-row {
    display: grid;
    grid-template-columns: 23px minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 46px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: rgba(245,248,245,.72);
    font-size: 12px;
    opacity: .34;
    transform: translateX(-4px);
}

.df-home-v2__prep-toast-row:last-child {
    border-bottom: 0;
}

.df-home-v2__crew-prep-stage.is-visible .df-home-v2__prep-toast-row {
    animation: dfPrepRowReady .42s calc(.52s + var(--df-prep-delay)) cubic-bezier(.2,.8,.2,1) forwards;
}

.df-home-v2__prep-toast-row strong {
    color: rgba(245,248,245,.72);
    font-size: 11px;
    font-weight: 700;
}

.df-home-v2__prep-check {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(32,223,114,.30);
    border-radius: 50%;
    background: rgba(32,223,114,.07);
    transform: scale(.74);
}

.df-home-v2__crew-prep-stage.is-visible .df-home-v2__prep-check {
    animation: dfPrepCheck .38s calc(.58s + var(--df-prep-delay)) cubic-bezier(.2,1.3,.35,1) forwards;
}

.df-home-v2__prep-check svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--df-home-green);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.df-home-v2__prep-toast-ready {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px 16px;
    border-top: 1px solid rgba(32,223,114,.14);
    background: rgba(32,223,114,.055);
    opacity: .45;
}

.df-home-v2__crew-prep-stage.is-visible .df-home-v2__prep-toast-ready {
    animation: dfPrepReady .5s 2.02s cubic-bezier(.2,.8,.2,1) forwards;
}

.df-home-v2__prep-toast-ready span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #eafbef;
    font-size: 12px;
    font-weight: 700;
}

.df-home-v2__prep-toast-ready small {
    color: rgba(245,248,245,.42);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
}

@keyframes dfPrepToastIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dfPrepRowReady {
    to { opacity: 1; transform: translateX(0); color: rgba(245,248,245,.88); }
}

@keyframes dfPrepCheck {
    to { transform: scale(1); border-color: rgba(32,223,114,.72); background: rgba(32,223,114,.13); }
}

@keyframes dfPrepReady {
    to { opacity: 1; }
}

@media (max-width: 1100px) {
    .df-home-v2__crew-prep-stage {
        min-height: 780px;
    }

    .df-home-v2__crew-prep-copy {
        width: min(560px, 54vw);
    }

    .df-home-v2__prep-toast {
        width: min(335px, 34vw);
        right: 28px;
        bottom: 28px;
    }
}

@media (max-width: 767px) {
    .df-home-v2__crew-prep-stage {
        min-height: 940px;
        align-items: stretch;
    }

    .df-home-v2__crew-prep-media img {
        object-position: center bottom;
        transform: scale(1.01);
    }

    .df-home-v2__crew-prep-stage.is-visible .df-home-v2__crew-prep-media img {
        transform: scale(1.025);
    }

    .df-home-v2__crew-prep-shade {
        background:
            linear-gradient(180deg, rgba(3,7,5,.96) 0%, rgba(3,7,5,.90) 23%, rgba(3,7,5,.56) 40%, rgba(3,7,5,.12) 61%, rgba(3,7,5,.38) 100%),
            linear-gradient(90deg, rgba(3,7,5,.28) 0%, rgba(3,7,5,.04) 100%);
    }

    .df-home-v2__crew-prep-vignette {
        box-shadow: inset 0 0 88px rgba(0,0,0,.18);
    }

    .df-home-v2__crew-prep-shell {
        display: block;
        padding-top: 66px;
        padding-bottom: 34px;
    }

    .df-home-v2__crew-prep-copy {
        width: 100%;
        max-width: 620px;
    }

    .df-home-v2__crew-prep-title {
        font-size: clamp(40px, 11.2vw, 56px);
    }

    .df-home-v2__crew-prep-copy > .df-home-v2__cinematic-lede {
        max-width: 540px;
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.55;
    }

    .df-home-v2__crew-prep-actions {
        margin-top: 22px;
    }

    .df-home-v2__crew-prep-actions .df-home-v2__button {
        flex: 1 1 100%;
    }

    .df-home-v2__prep-toast {
        left: 20px;
        right: 20px;
        bottom: 24px;
        width: auto;
        border-radius: 18px;
    }

    .df-home-v2__prep-toast-head {
        padding: 15px 17px 13px;
    }

    .df-home-v2__prep-toast-list {
        padding: 4px 17px;
    }

    .df-home-v2__prep-toast-row {
        min-height: 42px;
    }

    .df-home-v2__prep-toast-ready {
        padding: 12px 17px 14px;
    }
}

@media (max-width: 460px) {
    .df-home-v2__crew-prep-stage {
        min-height: 900px;
    }

    .df-home-v2__crew-prep-copy .df-home-v2__eyebrow {
        margin-bottom: 17px;
    }

    .df-home-v2__crew-prep-title {
        font-size: clamp(38px, 11vw, 50px);
    }

    .df-home-v2__prep-toast {
        left: 16px;
        right: 16px;
        bottom: 18px;
    }

    .df-home-v2__prep-toast-row:nth-child(3) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .df-home-v2__crew-prep-media img,
    .df-home-v2__crew-prep-stage.is-visible .df-home-v2__crew-prep-media img {
        transform: none;
        transition: none;
    }

    .df-home-v2__prep-toast,
    .df-home-v2__prep-toast-row,
    .df-home-v2__prep-check,
    .df-home-v2__prep-toast-ready {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* =========================================================
   v1.0.86 — Cinematic POS / on-the-spot checkout story
   Full-bleed payment scene with strong left-side copy zone.
   ========================================================= */
.df-home-v2__pos-story {
    position: relative;
    overflow: hidden;
    background: #050806;
}

.df-home-v2__pos-stage {
    position: relative;
    isolation: isolate;
    min-height: clamp(760px, 52vw, 920px);
    display: flex;
    align-items: center;
}

.df-home-v2__pos-media,
.df-home-v2__pos-media picture,
.df-home-v2__pos-media img,
.df-home-v2__pos-shade,
.df-home-v2__pos-vignette {
    position: absolute;
    inset: 0;
}

.df-home-v2__pos-media {
    z-index: -2;
    overflow: hidden;
    background: #090d0b;
}

.df-home-v2__pos-media picture,
.df-home-v2__pos-media img {
    width: 100%;
    height: 100%;
    display: block;
}

.df-home-v2__pos-media img {
    object-fit: cover;
    object-position: 54% 50%;
    transform: scale(1.015);
    transition: transform 8s cubic-bezier(.2,.7,.2,1);
}

.df-home-v2__pos-stage.is-visible .df-home-v2__pos-media img {
    transform: scale(1.045);
}

.df-home-v2__pos-shade {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(3,7,5,.95) 0%, rgba(3,7,5,.88) 24%, rgba(3,7,5,.64) 42%, rgba(3,7,5,.20) 61%, rgba(3,7,5,.04) 100%),
        linear-gradient(180deg, rgba(3,7,5,.12) 0%, rgba(3,7,5,.02) 46%, rgba(3,7,5,.46) 100%);
}

.df-home-v2__pos-vignette {
    z-index: 2;
    box-shadow: inset 0 0 160px rgba(0,0,0,.18);
    pointer-events: none;
}

.df-home-v2__pos-shell {
    position: relative;
    min-height: inherit;
    display: flex;
    align-items: center;
    padding-top: clamp(88px, 8vw, 132px);
    padding-bottom: clamp(88px, 8vw, 132px);
}

.df-home-v2__pos-copy {
    position: relative;
    z-index: 4;
    width: min(620px, 49vw);
}

.df-home-v2__pos-copy .df-home-v2__eyebrow {
    margin-bottom: 22px;
}

.df-home-v2__pos-title {
    display: grid;
    gap: 2px;
    margin: 0;
    color: #f6f8f6;
    font-size: clamp(52px, 4.45vw, 76px);
    font-weight: 790;
    line-height: .98;
    letter-spacing: -0.055em;
}

.df-home-v2__pos-title span,
.df-home-v2__pos-title em {
    display: block;
}

.df-home-v2__pos-title em {
    color: var(--df-home-green);
    font-style: normal;
}

.df-home-v2__pos-copy > .df-home-v2__cinematic-lede {
    max-width: 580px;
    margin-top: 28px;
    color: rgba(245,248,245,.74);
    font-size: clamp(17px, 1.15vw, 19px);
    line-height: 1.62;
}

.df-home-v2__pos-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.df-home-v2__pos-points span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(6,10,8,.38);
    color: rgba(245,248,245,.86);
    font-size: 13px;
    font-weight: 640;
    letter-spacing: -0.01em;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

.df-home-v2__pos-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.df-home-v2__pos-actions .df-home-v2__button--quiet {
    border-color: rgba(255,255,255,.18);
    color: #f5f8f5;
    background: rgba(6,10,8,.30);
}

.df-home-v2__pos-actions .df-home-v2__button--quiet:hover {
    border-color: rgba(255,255,255,.34);
    background: rgba(6,10,8,.52);
}

@media (max-width: 1100px) {
    .df-home-v2__pos-stage {
        min-height: 760px;
    }

    .df-home-v2__pos-copy {
        width: min(560px, 56vw);
    }
}

@media (max-width: 767px) {
    .df-home-v2__pos-stage {
        min-height: 1080px;
        align-items: stretch;
    }

    .df-home-v2__pos-media img {
        object-position: center top;
        transform: scale(1.005);
    }

    .df-home-v2__pos-stage.is-visible .df-home-v2__pos-media img {
        transform: scale(1.018);
    }

    .df-home-v2__pos-shade {
        background:
            linear-gradient(180deg, rgba(3,7,5,.985) 0%, rgba(3,7,5,.95) 16%, rgba(3,7,5,.82) 31%, rgba(3,7,5,.54) 45%, rgba(3,7,5,.14) 62%, rgba(3,7,5,.42) 100%),
            linear-gradient(90deg, rgba(3,7,5,.28) 0%, rgba(3,7,5,.05) 100%);
    }

    .df-home-v2__pos-vignette {
        box-shadow: inset 0 0 90px rgba(0,0,0,.16);
    }

    .df-home-v2__pos-shell {
        display: block;
        padding-top: 54px;
        padding-bottom: 42px;
    }

    .df-home-v2__pos-copy {
        width: 100%;
        max-width: 620px;
    }

    .df-home-v2__pos-title {
        font-size: clamp(36px, 10.2vw, 52px);
    }

    .df-home-v2__pos-copy > .df-home-v2__cinematic-lede {
        max-width: 540px;
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.5;
    }

    .df-home-v2__pos-points {
        gap: 8px;
        margin-top: 18px;
    }

    .df-home-v2__pos-points span {
        min-height: 34px;
        padding: 0 13px;
        font-size: 11.5px;
    }

    .df-home-v2__pos-actions {
        margin-top: 18px;
    }

    .df-home-v2__pos-actions .df-home-v2__button {
        flex: 1 1 100%;
    }
}

@media (max-width: 460px) {
    .df-home-v2__pos-stage {
        min-height: 1020px;
    }

    .df-home-v2__pos-copy .df-home-v2__eyebrow {
        margin-bottom: 16px;
    }

    .df-home-v2__pos-title {
        font-size: clamp(34px, 10.6vw, 46px);
    }

    .df-home-v2__pos-points span:last-child {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .df-home-v2__pos-media img,
    .df-home-v2__pos-stage.is-visible .df-home-v2__pos-media img {
        transform: none;
        transition: none;
    }
}