/* ==========================================================================
   INTERNATIONAL PATIENTS  ·  /international-patients   (.owf-ipt)
   --------------------------------------------------------------------------
   Deliberately NOT the printed-supplement language of the other pages here.
   No folio numerals, no dateline, no drop cap, no ruled paper grid.

   Light throughout, as a fertility site should be. Brand blue and red carry
   the structure; the only dark left is the boarding-pass stub, kept as a
   single accent so the itinerary does not read flat. Metrics are tight so a
   section fits the eye without much scrolling.

   This one is built from the visual vocabulary of international travel:

     · a light departure board at the top: live clocks, a route band
     · pill-shaped chrome and soft-cornered cards, where the editorial pages
       are strictly square
     · a route diagram with arcs converging on DEL
     · eligibility set as passport control, stamped CLEARED or DENIED
     · the journey as boarding passes, complete with a perforated stub
     · sections lettered as gates, not numbered as folios

   Shared with the rest of the site: Jost, the brand blue and red, and the
   .owf-container full-bleed rule. Everything else is its own.

   Layers
     1  scope, buttons, section chrome
     2  the board: clocks, headline, route diagram, brief
     3  gate rail
     4  A passport control
     5  B money, with the currency switcher
     6  C the itinerary, as boarding passes
     7  D checklist, E ground cards
     8  FAQ, final call, figures
     9  responsive, reduced motion, print
   ========================================================================== */

/* =============== 1 · scope =============== */
.owf-ipt {
    --owf-font-body:   'Jost', system-ui, -apple-system, sans-serif;
    --owf-font-accent: 'Jost', system-ui, -apple-system, sans-serif;

    /* Light throughout. The only dark left on the page is the boarding-pass
       stub, kept as a single accent so the itinerary does not read flat. */
    --ipt-night:  #0a2740;
    --ipt-ink:    #0a1929;
    --ipt-ink-2:  #40566d;
    --ipt-ink-3:  #7a8b9c;
    --ipt-ink-4:  #a6b3c0;
    --ipt-line:   rgba(10, 25, 41, 0.1);
    --ipt-paper:  #ffffff;
    --ipt-paper-2:#f2f7fc;          /* cool blue tint, not warm newsprint */
    --ipt-wash:   rgba(0, 114, 190, 0.055);
    --ipt-wash-2: rgba(0, 114, 190, 0.11);
    --ipt-blue:   var(--owf-blue, #0072be);
    --ipt-sky:    #7fc4f0;
    --ipt-red:    var(--owf-red, #cc2930);
    --ipt-r:      14px;             /* soft corners, unlike the square set */
    --ipt-r-sm:   9px;
    --ipt-ease:   cubic-bezier(0.16, 1, 0.3, 1);
    --ipt-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    font-family: 'Jost', system-ui, -apple-system, sans-serif;
    color: var(--ipt-ink);
    background: var(--ipt-paper);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: clip;
}

.owf-ipt.is-ready [data-rv] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ipt-ease), transform 0.6s var(--ipt-ease); }
.owf-ipt.is-ready [data-rv].is-in { opacity: 1; transform: none; }

.owf-ipt__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1px solid transparent;
    font-family: 'Jost', sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em;
    text-decoration: none; transition: background 0.25s ease, transform 0.2s ease, color 0.25s ease, border-color 0.25s ease;
}
.owf-ipt__btn--p { background: var(--ipt-red); color: #fff !important; box-shadow: 0 14px 34px -14px rgba(204, 41, 48, 0.8); }
.owf-ipt__btn--p:hover { background: #a32026; }
.owf-ipt__btn--p i { transition: transform 0.3s var(--ipt-ease); }
.owf-ipt__btn--p:hover i { transform: translateX(5px); }
/* outline, for the secondary action */
.owf-ipt__btn--g { background: transparent; color: var(--ipt-blue) !important; border-color: rgba(0, 114, 190, 0.4); }
.owf-ipt__btn--g:hover { background: var(--ipt-blue); color: #fff !important; border-color: var(--ipt-blue); }
.owf-ipt__btn:active { transform: scale(0.98); }
.owf-ipt__btn:focus-visible { outline: 2px solid var(--ipt-red); outline-offset: 3px; }

/* section chrome: a lettered gate marker, not a folio numeral */
.owf-ipt__sec { position: relative; padding: clamp(26px, 2.9vw, 48px) 0; scroll-margin-top: 104px; }
.owf-ipt__sec--tint { background: var(--ipt-paper-2); }
/* the money band is a brand wash now, not a dark slab */
.owf-ipt__sec--brand {
    background: linear-gradient(180deg, var(--ipt-wash) 0%, rgba(0, 114, 190, 0.02) 100%);
    border-top: 1px solid rgba(0, 114, 190, 0.14); border-bottom: 1px solid rgba(0, 114, 190, 0.14);
}

.owf-ipt__sec-h { margin-bottom: clamp(18px, 2vw, 28px); }
.owf-ipt__sec-g {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 13px 4px 10px; margin-bottom: 11px; border-radius: 999px;
    background: rgba(0, 114, 190, 0.1); color: var(--ipt-blue);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.owf-ipt__sec-g::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ipt-red); }
.owf-ipt__sec-t {
    margin: 0 0 8px;
    font-size: clamp(23px, 1.7vw + 9px, 38px); font-weight: 700;
    letter-spacing: -0.04em; line-height: 1.03; color: var(--ipt-ink) !important; text-wrap: balance;
}
.owf-ipt__sec-d { margin: 0; font-size: clamp(13px, 0.5vw + 10px, 15px); font-weight: 300; line-height: 1.62; color: var(--ipt-ink-2); }

.owf-ipt__note { display: flex; align-items: flex-start; gap: 9px; margin: clamp(14px, 1.7vw, 22px) 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--ipt-ink-3); }
.owf-ipt__note i { flex-shrink: 0; margin-top: 2px; color: var(--ipt-blue); font-size: 14px; }


/* =============== 2 · the board =============== */
/* Light, brand-washed. The old full-bleed dark photo is gone; the image is a
   card beside the type and the route diagram runs as a band underneath. */
.owf-ipt__board {
    position: relative; isolation: isolate; overflow: hidden;
    background:
        radial-gradient(ellipse at 84% 8%, rgba(0, 114, 190, 0.13), transparent 52%),
        radial-gradient(ellipse at 4% 92%, rgba(204, 41, 48, 0.07), transparent 46%),
        linear-gradient(180deg, #ffffff 0%, var(--ipt-paper-2) 100%);
    padding: clamp(18px, 2.1vw, 30px) 0 clamp(22px, 2.6vw, 38px);
}
.owf-ipt__board-in { position: relative; z-index: 1; }

/* The set's watermark idiom — the same oversized ghost word that heads the
   journey and testimonial mastheads, so this page reads as one of them. */
.owf-ipt__board-wm {
    position: absolute; right: -0.04em; top: -0.02em; z-index: 0;
    font-family: 'Jost', sans-serif;
    font-size: clamp(62px, 8.4vw, 138px); font-weight: 800; line-height: 0.78;
    letter-spacing: -0.05em; color: rgba(0, 114, 190, 0.042);
    pointer-events: none; user-select: none; white-space: nowrap;
}

/* Home › International Patients. Same shape as .owf-jr__crumb and
   .owf-tsp__crumb; only the colours are the board's. */
.owf-ipt__crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    margin-bottom: clamp(11px, 1.4vw, 16px);
    font-family: 'Jost', sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--ipt-ink-3);
}
.owf-ipt__crumb a { color: var(--ipt-blue); text-decoration: none; transition: color 0.25s ease; }
.owf-ipt__crumb a:hover { color: var(--ipt-red); }
.owf-ipt__crumb i { font-size: 9px; color: var(--ipt-ink-4); }
.owf-ipt__crumb [aria-current] { color: var(--ipt-ink); }

/* eyebrow pill + drawn rule, the house kicker */
.owf-ipt__kicker { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(11px, 1.4vw, 16px); }
.owf-ipt__rule { flex: 1; height: 2px; background: var(--ipt-line); position: relative; }
.owf-ipt__rule::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 52px; background: var(--ipt-blue); }

/* live clocks */
.owf-ipt__clocks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: clamp(14px, 1.7vw, 22px); }
.owf-ipt__clock {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: #fff; border: 1px solid rgba(0, 114, 190, 0.22);
    box-shadow: 0 6px 18px -14px rgba(10, 25, 41, 0.5);
}
.owf-ipt__clock i { align-self: center; font-size: 10px; color: var(--ipt-red); }
.owf-ipt__clock b { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; color: var(--ipt-blue); }
.owf-ipt__clock em { font-size: 15px; font-weight: 700; font-style: normal; letter-spacing: -0.02em; color: var(--ipt-ink); font-variant-numeric: tabular-nums; }
.owf-ipt__clock span { font-size: 10px; font-weight: 400; color: var(--ipt-ink-3); }
.owf-ipt__clock.is-dest { background: var(--ipt-blue); border-color: var(--ipt-blue); }
.owf-ipt__clock.is-dest i { color: #ffb3b7; }
.owf-ipt__clock.is-dest b { color: #a8d6f5; }
.owf-ipt__clock.is-dest em { color: #fff; }
.owf-ipt__clock.is-dest span { color: rgba(255, 255, 255, 0.68); }
.owf-ipt__clock-note { font-size: 11.5px; font-weight: 300; color: var(--ipt-ink-3); }

/* ONE grid for the whole board. Column 1: type, then the flight list.
   Column 2: the atlas, spanning both rows. The map and the globe used to be
   two sibling blocks with a gap between them, which is exactly why they read
   as two sections; there is now no seam for the eye to find. */
.owf-ipt__board-grid {
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    column-gap: clamp(20px, 2.8vw, 48px); row-gap: clamp(16px, 2vw, 26px);
    align-items: start;
}
.owf-ipt__board-txt { min-width: 0; grid-column: 1; grid-row: 1; align-self: start; }
.owf-ipt__atlas     { min-width: 0; grid-column: 2; grid-row: 1 / span 2; }
.owf-ipt__routes    { min-width: 0; grid-column: 1; grid-row: 2; align-self: start; }

.owf-ipt__tag {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 5px 14px; border-radius: 999px;
    background: rgba(204, 41, 48, 0.09); border: 1px solid rgba(204, 41, 48, 0.22);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ipt-red);
}
.owf-ipt__tag i { font-size: 12px; }

/* The headline is drawn, not laid out, which is what lets it hold one line
   inside the left column of the board. The viewBox is 1000 units wide, the
   line is held to textLength="1000" and the svg is width:100%, so the type is
   exactly as wide as whatever measure it is given — the column at desktop, the
   container once the grid collapses — and its size follows from that rather
   than from the viewport. A vw font size cannot do this: it has to be pitched
   short of the measure or `nowrap` overflows on a font-metric difference, and
   it knows nothing about the column it sits in. The font size below only has
   to land near 1000 units naturally so the length adjustment stays invisible. */
.owf-ipt__h1 { margin: 0 0 clamp(14px, 1.8vw, 26px); line-height: 0; }
.owf-ipt__h1 svg { display: block; width: 100%; height: auto; overflow: visible; }
.owf-ipt__h1 text {
    font-family: 'Jost', system-ui, sans-serif; font-weight: 700;
    font-size: 84px; letter-spacing: -0.045em; fill: var(--ipt-ink);
}
/* the house headline treatment: one phrase blue, one red, flat brand colour
   on the type — never a gradient. Same .hl-b / .hl-r contract the journey and
   video mastheads use. */
.owf-ipt__h1 .hl-b { fill: var(--ipt-blue); }
.owf-ipt__h1 .hl-r { fill: var(--ipt-red); }

/* Two lines on a phone, each one held to the full measure as well — a single
   line there would be a 29px headline.
   Scoped through the parent on purpose: a bare .owf-ipt__h1-n loses to the
   .owf-ipt__h1 svg rule above it on specificity, and both variants render. */
.owf-ipt__h1 .owf-ipt__h1-n { display: none; }
@media (max-width: 700px) {
    .owf-ipt__h1 .owf-ipt__h1-w { display: none; }
    .owf-ipt__h1 .owf-ipt__h1-n { display: block; }
    .owf-ipt__h1-n text { font-size: 168px; }
}
/* No max-width. The lead runs the full measure of its column, like the rest
   of the site's full-bleed sections. */
.owf-ipt__lead { margin: 0 0 clamp(15px, 1.8vw, 22px); font-size: clamp(13.5px, 0.45vw + 11.5px, 16px); font-weight: 300; line-height: 1.6; color: var(--ipt-ink-2); }
.owf-ipt__board-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- brand spot blurs. Big, soft, slow. They carry the colour without
   painting a whole band, which is what keeps the page light. ---- */
.owf-ipt__blur { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(72px); opacity: 0.5; }
.owf-ipt__blur--b { width: 30vw; max-width: 460px; aspect-ratio: 1; background: rgba(0, 114, 190, 0.42); animation: ipt-drift-a 22s ease-in-out infinite; }
.owf-ipt__blur--r { width: 24vw; max-width: 380px; aspect-ratio: 1; background: rgba(204, 41, 48, 0.32); animation: ipt-drift-b 27s ease-in-out infinite; }
.owf-ipt__blur--tl { top: -8%; left: -6%; }
.owf-ipt__blur--br { right: -6%; bottom: -12%; }
@keyframes ipt-drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6%, 8%, 0) scale(1.12); } }
@keyframes ipt-drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-7%, -6%, 0) scale(1.15); } }
.owf-ipt__sec { overflow: hidden; }
.owf-ipt__sec > .owf-container { position: relative; z-index: 1; }

/* ---- the globe, inside the atlas ---- */
.owf-ipt__atlas .owf-ipt__blur--b { top: 26%; left: 2%; }
.owf-ipt__atlas .owf-ipt__blur--r { right: 0; bottom: 2%; }

.owf-ipt__globe-stage { position: relative; z-index: 1; display: grid; place-items: center; }
.owf-ipt__orb { display: block; width: 100%; max-width: clamp(260px, 30vw, 380px); height: auto; overflow: visible; }
.owf-ipt__orb-face { stroke: rgba(0, 114, 190, 0.32); stroke-width: 1; }
.owf-ipt__grat path { fill: none; stroke: rgba(0, 114, 190, 0.24); stroke-width: 0.8; }
.owf-ipt__city { fill: var(--ipt-blue); transition: r 0.3s var(--ipt-ease); }
.owf-ipt__city.is-on { fill: var(--ipt-red); }
.owf-ipt__city-c { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; fill: var(--ipt-ink-2); }
.owf-ipt__hub { fill: var(--ipt-red); }
.owf-ipt__hub-halo { fill: rgba(204, 41, 48, 0.22); animation: ipt-ping 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ipt-ping { 0% { transform: scale(0.6); opacity: 0.85; } 70%,100% { transform: scale(1.7); opacity: 0; } }
.owf-ipt__hub-c { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; fill: var(--ipt-ink); }
.owf-ipt__leg { fill: none; stroke: rgba(0, 114, 190, 0.26); stroke-width: 1.4; stroke-dasharray: 3 5; }
.owf-ipt__leg-done { fill: none; stroke: var(--ipt-red); stroke-width: 2; stroke-linecap: round; }
.owf-ipt__plane { fill: var(--ipt-red); }

/* the live leg readout, floated over the globe */
.owf-ipt__globe-live {
    position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 2;
    display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
    padding: 7px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(0, 114, 190, 0.2);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px -18px rgba(10, 39, 64, 0.6);
}
.owf-ipt__globe-live i { align-self: center; width: 6px; height: 6px; border-radius: 50%; background: var(--ipt-red); animation: ipt-blink 1.6s ease-in-out infinite; }
@keyframes ipt-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.owf-ipt__globe-live b { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--ipt-blue); }
.owf-ipt__globe-live em { font-size: 10.5px; font-style: normal; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ipt-ink-3); }
.owf-ipt__globe-live span { font-size: 12.5px; font-weight: 700; color: var(--ipt-ink); font-variant-numeric: tabular-nums; }

.owf-ipt__globe-cap { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ipt-line); }
.owf-ipt__globe-h { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ipt-ink); }
.owf-ipt__globe-h i { color: var(--ipt-red); font-size: 12px; }
.owf-ipt__globe-h b { color: var(--ipt-blue); }
.owf-ipt__globe-sub { font-size: 11.5px; font-weight: 300; color: var(--ipt-ink-3); }

/* the brief. No card: a ruled-off block on the board's own ground, closing it. */
.owf-ipt__brief {
    margin-top: clamp(18px, 2.3vw, 32px); padding: clamp(16px, 2vw, 26px) 0 0;
    border-top: 1px solid var(--ipt-line);
}
.owf-ipt__brief-h { margin: 0 0 9px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ipt-red) !important; }
.owf-ipt__brief-lead { margin: 0 0 clamp(16px, 2vw, 24px); font-size: clamp(13px, 0.4vw + 11.5px, 15.5px); font-weight: 300; line-height: 1.62; color: var(--ipt-ink-2); }
.owf-ipt__brief-lead b { font-weight: 600; color: var(--ipt-ink); }

/* ══ THE ROUTE ══════════════════════════════════════════════════════════
   Four waypoints on one leg, not four boxes in a box. Each stop owns the
   leg arriving at it, drawn back across the gap to the previous node — which
   means the geometry follows the columns and needs no hard-coded track. The
   aircraft hops stop to stop on a shared 7.2s cycle, one third of it per leg,
   so the four read as a single flight rather than four idle animations.
   ═══════════════════════════════════════════════════════════════════════ */
.owf-ipt__brief-route {
    --g: clamp(16px, 2.2vw, 34px);
    --node: 26px;
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g);
}
.owf-ipt__brief-stop { position: relative; min-width: 0; }

/* the leg in: back across the gap and the full width of the previous column,
   landing on that node's centre. Equal columns make the arithmetic exact. */
.owf-ipt__brief-leg {
    position: absolute; z-index: 0; top: calc(var(--node) / 2); height: 1px;
    right: calc(100% - var(--node) / 2); width: calc(100% + var(--g));
    background: repeating-linear-gradient(90deg, rgba(0, 114, 190, 0.36) 0 3px, transparent 3px 8px);
}
/* nothing arrives at the first stop */
.owf-ipt__brief-stop:first-child .owf-ipt__brief-leg { display: none; }
.owf-ipt__brief-stop:nth-child(2) { --d: 0s; }
.owf-ipt__brief-stop:nth-child(3) { --d: 2.4s; }
.owf-ipt__brief-stop:nth-child(4) { --d: 4.8s; }

/* the leg lights up under the aircraft, then dims behind it */
.owf-ipt__brief-leg::after {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ipt-blue);
    animation: ipt-brief-trail 7.2s linear var(--d, 0s) infinite;
}
@keyframes ipt-brief-trail {
    0%        { width: 0;    opacity: 1; }
    31%       { width: 100%; opacity: 1; }
    55%       { width: 100%; opacity: 0; }
    56%, 100% { width: 0;    opacity: 0; }
}

.owf-ipt__brief-plane {
    position: absolute; z-index: 1; top: 50%; left: 0; margin-top: -7px; transform: translateX(-50%);
    font-size: 11px; line-height: 1; color: var(--ipt-red); opacity: 0;
    animation: ipt-brief-fly 7.2s linear var(--d, 0s) infinite;
}
.owf-ipt__brief-plane i { display: block; transform: rotate(90deg); }
@keyframes ipt-brief-fly {
    0%        { left: 0;    opacity: 0; }
    3%        { opacity: 1; }
    28%       { opacity: 1; }
    31%       { left: 100%; opacity: 0; }
    100%      { left: 100%; opacity: 0; }
}

/* the waypoint. White fill so it punches through the leg behind it. */
.owf-ipt__brief-node {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--node); height: var(--node); margin-bottom: 11px; border-radius: 50%;
    background: #fff; border: 1.6px solid rgba(0, 114, 190, 0.55);
    color: var(--ipt-blue); font-size: 12px;
}
.owf-ipt__brief-stop.is-no .owf-ipt__brief-node { border-color: var(--ipt-red); color: var(--ipt-red); }

.owf-ipt__brief-stop b {
    display: block; margin-bottom: 4px;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--ipt-blue);
}
.owf-ipt__brief-stop.is-no b { color: var(--ipt-red); }
.owf-ipt__brief-d { display: block; font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--ipt-ink-2); }

/* Two abreast: the leg still runs within a row, so the stop that opens the
   second row drops its own — otherwise it would draw a leg out to the left
   toward a node that is now a row above it. */
@media (max-width: 899px) and (min-width: 641px) {
    .owf-ipt__brief-route { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(20px, 3vw, 30px); }
    .owf-ipt__brief-stop:nth-child(3) .owf-ipt__brief-leg { display: none; }
    .owf-ipt__brief-stop:nth-child(4) { --d: 2.4s; }
}

/* Stacked: the route turns on its side. The leg now leaves each stop and runs
   down to the next node — bottom: -13px reaches exactly that far because the
   stops are flush — so the last stop is the one with nothing to draw. */
@media (max-width: 640px) {
    .owf-ipt__brief-route { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .owf-ipt__brief-stop {
        display: grid; grid-template-columns: var(--node) minmax(0, 1fr);
        column-gap: 14px; padding-bottom: 18px;
    }
    .owf-ipt__brief-stop:last-child { padding-bottom: 0; }
    .owf-ipt__brief-node { grid-row: 1 / span 2; grid-column: 1; margin-bottom: 0; }
    .owf-ipt__brief-stop b, .owf-ipt__brief-d { grid-column: 2; }
    .owf-ipt__brief-stop b { align-self: center; }

    .owf-ipt__brief-leg {
        left: calc(var(--node) / 2 - 0.5px); right: auto; width: 1px;
        top: calc(var(--node) / 2); bottom: calc(var(--node) / -2); height: auto;
        background: repeating-linear-gradient(180deg, rgba(0, 114, 190, 0.36) 0 3px, transparent 3px 8px);
    }
    .owf-ipt__brief-leg::after { inset: 0 0 auto 0; width: auto; height: 0; }
    .owf-ipt__brief-plane { top: 0; left: 50%; margin: -6px 0 0; transform: translateX(-50%); }
    .owf-ipt__brief-plane i { transform: rotate(180deg); }

    /* the legs leave stops 1 to 3 now, so the flight order shifts with them */
    .owf-ipt__brief-stop:first-child .owf-ipt__brief-leg { display: block; }
    .owf-ipt__brief-stop:last-child .owf-ipt__brief-leg { display: none; }
    .owf-ipt__brief-stop:nth-child(1) { --d: 0s; }
    .owf-ipt__brief-stop:nth-child(2) { --d: 2.4s; }
    .owf-ipt__brief-stop:nth-child(3) { --d: 4.8s; }
}
@media (max-width: 640px) {
    @keyframes ipt-brief-trail {
        0%        { height: 0;    opacity: 1; }
        31%       { height: 100%; opacity: 1; }
        55%       { height: 100%; opacity: 0; }
        56%, 100% { height: 0;    opacity: 0; }
    }
    @keyframes ipt-brief-fly {
        0%   { top: 0;    opacity: 0; }
        3%   { opacity: 1; }
        28%  { opacity: 1; }
        31%  { top: 100%; opacity: 0; }
        100% { top: 100%; opacity: 0; }
    }
}


/* =============== 3 · gate rail =============== */
.owf-ipt__gates {
    position: sticky; top: 56px; z-index: 30;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
    border-bottom: 1px solid var(--ipt-line);
}
.owf-ipt__gates-in {
    display: flex; gap: 8px; padding-top: 9px; padding-bottom: 9px;
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    scroll-padding-left: var(--owf-gutter, 28px); overscroll-behavior-x: contain;
}
.owf-ipt__gates-in::-webkit-scrollbar { display: none; }
.owf-ipt__gate {
    flex: 0 0 auto; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 16px 8px 8px; border-radius: 999px;
    border: 1px solid transparent; text-decoration: none; white-space: nowrap;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.owf-ipt__gate b {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--ipt-paper-2); color: var(--ipt-ink-3);
    font-size: 11px; font-weight: 700; transition: background 0.25s ease, color 0.25s ease;
}
.owf-ipt__gate span { font-size: 13px; font-weight: 500; color: var(--ipt-ink-2); transition: color 0.25s ease; }
.owf-ipt__gate:hover { background: var(--ipt-paper-2); }
.owf-ipt__gate.is-on { background: rgba(0, 114, 190, 0.09); border-color: rgba(0, 114, 190, 0.22); }
.owf-ipt__gate.is-on b { background: var(--ipt-blue); color: #fff; }
.owf-ipt__gate.is-on span { color: var(--ipt-ink); font-weight: 600; }
.owf-ipt__gate:focus-visible { outline: 2px solid var(--ipt-red); outline-offset: 2px; }


/* =============== 4 · A · passport control =============== */
/* ══ TWO LANES AT THE DESK ═══════════════════════════════════════════════
   Not six cards in a grid. Everything the law opens runs down the left in
   blue, everything it closes down the right in red, three against three,
   divided by the barrier between them. The section answers "may I do this in
   India" by which side of the gate a line is on, before any of it is read.

   Both lanes take their rows from the container with `grid-template-rows:
   subgrid`, so entry 1 of one lane sits level with entry 1 of the other and
   the two columns can be read across as well as down. Where subgrid is not
   supported the lanes simply flow at their own heights — the reading is
   weaker, nothing breaks.

   --c / --c-rgb carry the verdict's colour to every part of a lane at once:
   spine, wash, guilloche, rules, stamp, numerals and count.
   ═══════════════════════════════════════════════════════════════════════ */
.owf-ipt__control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(26px, 4vw, 68px) minmax(0, 1fr);
    grid-template-rows: auto repeat(var(--rows, 3), auto);
}

.owf-ipt__lane {
    --c: var(--ipt-blue);
    --c-rgb: 0, 114, 190;
    position: relative; isolation: isolate; overflow: hidden;
    grid-row: 1 / -1; display: grid; grid-template-rows: subgrid;
    border-radius: var(--ipt-r);
    background: linear-gradient(180deg, rgba(var(--c-rgb), 0.1), rgba(var(--c-rgb), 0.022));
}
.owf-ipt__lane--y { grid-column: 1; }
.owf-ipt__lane--n { grid-column: 3; --c: var(--ipt-red); --c-rgb: 204, 41, 48; }

/* the fine diagonal ruling a passport page carries under its stamps */
.owf-ipt__lane::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(-45deg, rgba(var(--c-rgb), 0.055) 0 1px, transparent 1px 8px);
}
/* the spine: the loudest, simplest signal in the section */
.owf-ipt__lane::after {
    content: ''; position: absolute; z-index: 2; inset: 0 auto 0 0; width: 4px; background: var(--c);
}
.owf-ipt__lane--n::after { inset: 0 0 0 auto; }

/* ---- the lane head ---- */
.owf-ipt__lane-h {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    gap: clamp(10px, 1.2vw, 15px);
    padding: clamp(15px, 1.8vw, 24px) clamp(15px, 1.7vw, 24px);
}
.owf-ipt__lane--n .owf-ipt__lane-h { direction: rtl; }
.owf-ipt__lane--n .owf-ipt__lane-hx { direction: ltr; text-align: right; }

/* the stamp: an inked ring, set slightly off square as a hand-struck one is */
.owf-ipt__stamp {
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(38px, 4vw, 46px); aspect-ratio: 1; border-radius: 50%;
    border: 2px solid var(--c); color: var(--c);
    box-shadow: 0 0 0 4px rgba(var(--c-rgb), 0.1);
    transform: rotate(-7deg); transform-origin: center;
    transition: transform 0.5s var(--ipt-spring), box-shadow 0.4s ease;
}
.owf-ipt__lane:hover .owf-ipt__stamp { transform: rotate(4deg) scale(1.06); box-shadow: 0 0 0 7px rgba(var(--c-rgb), 0.13); }
.owf-ipt__stamp i { font-size: clamp(16px, 1.5vw, 19px); }

.owf-ipt__lane-hx b {
    display: block; font-size: clamp(15px, 0.75vw + 10px, 21px); font-weight: 800;
    letter-spacing: 0.13em; text-transform: uppercase; line-height: 1; color: var(--c);
}
.owf-ipt__lane-hx em {
    display: block; margin-top: 5px; font-style: normal;
    font-size: 11.5px; font-weight: 300; line-height: 1.4; color: var(--ipt-ink-3);
}
/* the count, set large and faint: the shape of the answer, three against three */
.owf-ipt__lane-n {
    font-size: clamp(30px, 3vw, 46px); font-weight: 800; line-height: 0.8;
    letter-spacing: -0.05em; color: var(--c); opacity: 0.22;
}

/* ---- an entry in the lane ---- */
.owf-ipt__lane-e {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
    column-gap: clamp(10px, 1.2vw, 15px);
    padding: clamp(13px, 1.5vw, 19px) clamp(15px, 1.7vw, 24px);
    border-top: 1px solid rgba(var(--c-rgb), 0.16);
    transition: background 0.35s ease;
}
.owf-ipt__lane-e:hover { background: rgba(var(--c-rgb), 0.06); }
/* The heads mirror across the gate — stamps on the outer edges, counts facing
   each other — but the entries do not. Four lines of right-aligned body copy
   is a worse read than the mirror is a better picture. */

.owf-ipt__lane-i {
    font-size: 12px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.35;
    color: var(--c); opacity: 0.5; font-variant-numeric: tabular-nums;
}
.owf-ipt__lane-t { min-width: 0; }
.owf-ipt__lane-t h3 {
    margin: 0 0 6px; font-size: clamp(14.5px, 0.4vw + 12px, 17px); font-weight: 600;
    letter-spacing: -0.032em; line-height: 1.22; color: var(--ipt-ink) !important;
}
.owf-ipt__lane-t p { margin: 0; font-size: 12.5px; font-weight: 300; line-height: 1.56; color: var(--ipt-ink-2); }

/* ---- the barrier between the lanes ----
   Named __desk, not __gate: .owf-ipt__gate is already the sticky section rail's
   link, and reusing it collapsed all six of those links to a 1px column. */
.owf-ipt__desk {
    grid-column: 2; grid-row: 1 / -1; justify-self: center; width: 1px;
    background: repeating-linear-gradient(180deg, rgba(10, 25, 41, 0.2) 0 4px, transparent 4px 11px);
}

/* Stacked: the barrier turns on its side and the lanes become two blocks, blue
   above red. The subgrid is dropped with it — there is no second column left
   to align rows against. */
@media (max-width: 860px) {
    .owf-ipt__control { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .owf-ipt__lane { grid-column: 1; grid-row: auto; display: block; }
    .owf-ipt__lane--n .owf-ipt__lane-h { direction: ltr; }
    .owf-ipt__lane--n .owf-ipt__lane-hx { text-align: left; }
    .owf-ipt__lane--n::after { inset: 0 auto 0 0; }
    .owf-ipt__desk {
        grid-column: 1; grid-row: auto; justify-self: stretch;
        width: auto; height: 1px; margin: clamp(12px, 2vw, 18px) 0;
        background: repeating-linear-gradient(90deg, rgba(10, 25, 41, 0.2) 0 4px, transparent 4px 11px);
    }
}


/* =============== 5 · B · money =============== */
.owf-ipt__fx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: clamp(14px, 1.7vw, 20px); }
.owf-ipt__fx-l { margin-right: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ipt-ink-3); }
.owf-ipt__fx-c { position: relative; margin: 0; cursor: pointer; }
.owf-ipt__fx-c input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; appearance: none; -webkit-appearance: none; pointer-events: none; border: 0; }
.owf-ipt__fx-c input:focus-visible + span { outline: 2px solid var(--ipt-red); outline-offset: 2px; }
.owf-ipt__fx-c span {
    display: inline-flex; align-items: center; min-height: 32px; padding: 6px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--ipt-line);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--ipt-ink-2);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.owf-ipt__fx-c:hover span { border-color: rgba(0, 114, 190, 0.45); color: var(--ipt-blue); }
.owf-ipt__fx-c.is-on span { background: var(--ipt-blue); border-color: var(--ipt-blue); color: #fff; }

/* ══ THE FLAG CHIP ═══════════════════════════════════════════════════════
   The flag is inline SVG drawn in PHP, not a regional-indicator pair: Windows
   has no flag glyphs and renders the emoji as the two letters. No sprite, no
   image request, sharp at any size. The chip supplies the card edge — the
   ruled border and the small drop — so the artwork itself can be flat. */
.owf-ipt__flag {
    position: relative; flex-shrink: 0; display: block;
    width: 34px; height: 23px; border-radius: 4px; overflow: hidden;
    background: var(--ipt-paper);
    box-shadow: 0 3px 8px -5px rgba(10, 25, 41, 0.6);
}
/* the edge, drawn over the artwork so a white flag still has a boundary */
.owf-ipt__flag::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    border: 1px solid rgba(10, 25, 41, 0.16); pointer-events: none;
}
.owf-ipt__flag-s { display: block; width: 100%; height: 100%; }
.owf-ipt__flag--lg { width: 58px; height: 39px; border-radius: 6px; }

/* ══ THE HEADLINE ════════════════════════════════════════════════════════
   The section's punchline, at the size it deserves: the one saturated block
   on an otherwise light page, because this is the number the whole page is
   about. Everything in it is derived from the same array the ladder below
   reads, so the two cannot disagree. */
.owf-ipt__hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: clamp(14px, 2vw, 30px);
    margin-bottom: clamp(16px, 2vw, 26px);
    padding: clamp(16px, 2.1vw, 28px) clamp(18px, 2.2vw, 32px);
    border-radius: var(--ipt-r);
    background: linear-gradient(115deg, #005a96 0%, var(--ipt-blue) 46%, #0086dd 100%);
    box-shadow: 0 26px 60px -34px rgba(0, 82, 136, 0.85);
}
/* the same dot-grid the map is drawn from, as a ground */
.owf-ipt__hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.2px);
    background-size: 13px 13px;
}
.owf-ipt__hero .owf-ipt__flag { background: rgba(255, 255, 255, 0.96); border-color: rgba(255, 255, 255, 0.5); }
.owf-ipt__hero-t { min-width: 0; }
.owf-ipt__hero-k {
    display: block; margin-bottom: 5px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.19em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}
.owf-ipt__hero-k i { font-style: normal; padding: 0 5px; color: rgba(255, 255, 255, 0.45); }
.owf-ipt__hero-v {
    margin: 0; font-size: clamp(24px, 2.2vw + 12px, 46px); font-weight: 700;
    letter-spacing: -0.045em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.owf-ipt__hero-v em {
    font-style: normal; font-weight: 300; letter-spacing: -0.02em;
    font-size: 0.5em; color: rgba(255, 255, 255, 0.6); padding: 0 6px;
}
.owf-ipt__hero-d { margin: 7px 0 0; font-size: 12.5px; font-weight: 300; color: rgba(255, 255, 255, 0.72); }
/* the multiplier, hung off the end behind a ruled edge */
.owf-ipt__hero-x {
    flex-shrink: 0; max-width: 210px; padding-left: clamp(14px, 2vw, 30px);
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.owf-ipt__hero-x b {
    display: block; font-size: clamp(28px, 2.4vw + 12px, 50px); font-weight: 800;
    letter-spacing: -0.05em; line-height: 0.9; color: #fff;
}
.owf-ipt__hero-x span {
    display: block; margin-top: 6px;
    font-size: 11.5px; font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, 0.75);
}

/* ══ THE LADDER ══════════════════════════════════════════════════════════
   One shared scale, every band a floating lo-to-hi segment on it, cheapest
   first. The gap becomes a distance on the page instead of a subtraction the
   reader has to do. Rows are ruled, not boxed — six white cards in a stack
   was the whole problem. */
.owf-ipt__prices { --cols: clamp(150px, 17vw, 232px) minmax(0, 1fr) clamp(132px, 12vw, 178px) 54px; }
.owf-ipt__price-hd,
.owf-ipt__price {
    display: grid; grid-template-columns: var(--cols);
    gap: clamp(12px, 1.8vw, 26px); align-items: center;
}
.owf-ipt__price-hd {
    padding: 0 12px 8px; border-bottom: 1px solid rgba(0, 114, 190, 0.2);
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ipt-ink-3);
}
.owf-ipt__price-hd span:nth-child(3),
.owf-ipt__price-hd span:nth-child(4) { text-align: right; }

.owf-ipt__price {
    position: relative; padding: clamp(10px, 1.1vw, 14px) 12px;
    border-bottom: 1px solid var(--ipt-line);
    transition: background 0.3s ease;
}
.owf-ipt__price:hover { background: rgba(0, 114, 190, 0.045); }

.owf-ipt__price-n { display: flex; align-items: center; gap: 11px; min-width: 0; }
.owf-ipt__price-nx { min-width: 0; }
.owf-ipt__price-nx b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.025em; color: var(--ipt-ink); }
.owf-ipt__price-nx em { display: block; margin-top: 1px; font-size: 10px; font-weight: 300; font-style: normal; color: var(--ipt-ink-3); }

.owf-ipt__price-tr { position: relative; height: 10px; border-radius: 999px; background: rgba(10, 25, 41, 0.055); }
/* The band sits at its true geometry by default and the engine collapses it to
   zero before animating it back. The other way round — CSS at zero, JS the only
   thing that ever sets a width — means the chart renders blank whenever the
   script does not run, which is not a state a chart should have. */
.owf-ipt__price-tr i {
    position: absolute; top: 0; left: var(--l); width: var(--w); height: 10px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(10, 25, 41, 0.32), rgba(10, 25, 41, 0.17));
    transition: width 0.85s var(--ipt-ease), left 0.85s var(--ipt-ease);
}
/* the band's two ends, marked so a range reads as a range */
.owf-ipt__price-tr i::before,
.owf-ipt__price-tr i::after {
    content: ''; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px;
    border-radius: 50%; background: var(--ipt-paper); opacity: 0.85;
}
.owf-ipt__price-tr i::before { left: 3px; }
.owf-ipt__price-tr i::after { right: 3px; }

.owf-ipt__price-v { text-align: right; font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--ipt-ink-2); font-variant-numeric: tabular-nums; }
.owf-ipt__price-v em { font-style: normal; font-weight: 300; color: var(--ipt-ink-4); padding: 0 4px; }

.owf-ipt__price-x {
    justify-self: end; padding: 4px 9px; border-radius: 999px;
    background: rgba(10, 25, 41, 0.05);
    font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--ipt-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* our own row: the only blue on the ladder, and the shortest bar on it */
.owf-ipt__price.is-self { background: linear-gradient(90deg, var(--ipt-wash-2), rgba(0, 114, 190, 0.02)); border-bottom-color: rgba(0, 114, 190, 0.28); }
.owf-ipt__price.is-self .owf-ipt__price-tr i { background: linear-gradient(90deg, var(--ipt-blue), #3ba3e8); }
.owf-ipt__price.is-self .owf-ipt__price-nx b,
.owf-ipt__price.is-self .owf-ipt__price-v { color: var(--ipt-blue); font-weight: 700; }
.owf-ipt__price.is-self .owf-ipt__price-x { background: var(--ipt-blue); color: #fff; }

/* the headline folds: the multiplier drops under the figure behind a rule */
@media (max-width: 760px) {
    .owf-ipt__hero { grid-template-columns: auto minmax(0, 1fr); row-gap: clamp(13px, 2vw, 18px); }
    .owf-ipt__hero-x {
        grid-column: 1 / -1; max-width: none;
        display: flex; align-items: baseline; gap: 12px;
        padding: clamp(12px, 2vw, 16px) 0 0;
        border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.22);
    }
    .owf-ipt__hero-x b { font-size: clamp(26px, 8vw, 38px); }
    .owf-ipt__hero-x span { margin-top: 0; }
}


/* =============== 6 · C · the itinerary, as a route =============== */
/* ══ SIX SEGMENTS, LEFT TO RIGHT ═════════════════════════════════════════
   The section's claim is that only one of the six needs the patient in
   India. Six equal stops down a vertical spine cannot say that — they read
   as six of the same thing. Across, the shape carries the argument: two blue
   segments at home, a red pair in the middle under a drawn span, then home
   again, and the red is a fifth of the width.

   Each segment owns the leg arriving at it, drawn back across the gap to the
   previous node, so the rail follows the columns and re-forms itself at every
   count without a track being measured anywhere. The legs draw in as their
   segment arrives, which is the journey being travelled rather than six cards
   fading up together.
   ═══════════════════════════════════════════════════════════════════════ */
.owf-ipt__trip { --cols: 6; --g: clamp(14px, 1.8vw, 30px); --node: 42px; position: relative; z-index: 1; }

/* the span over the pair that needs the flight */
.owf-ipt__trip-band {
    display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: var(--g); margin-bottom: 14px;
}
.owf-ipt__trip-span {
    grid-column: 3 / 5; position: relative;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
    padding: 9px 14px 11px; border-radius: var(--ipt-r-sm) var(--ipt-r-sm) 0 0;
    background: linear-gradient(180deg, rgba(204, 41, 48, 0.09), rgba(204, 41, 48, 0.02));
    border: 1px solid rgba(204, 41, 48, 0.24); border-bottom: 0;
}
/* The two ticks that drop from its ends onto the rail: the band's own margin
   plus the segment's top padding plus half a node is exactly how far down the
   rail sits, so they land on it rather than stopping in the air. */
.owf-ipt__trip-span::before, .owf-ipt__trip-span::after {
    content: ''; position: absolute; top: 100%; width: 1px;
    height: calc(var(--node) / 2 + 18px);
    background: rgba(204, 41, 48, 0.3);
}
.owf-ipt__trip-span::before { left: 0; }
.owf-ipt__trip-span::after { right: 0; }
.owf-ipt__trip-span i { font-size: 12px; color: var(--ipt-red); }
.owf-ipt__trip-span b { font-size: 10.5px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ipt-red); }
.owf-ipt__trip-span em { font-style: normal; font-size: 11.5px; font-weight: 300; color: var(--ipt-ink-3); }

.owf-ipt__trip-list {
    display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: var(--g); margin: 0; padding: 0; list-style: none;
}

/* The route is drawn by default and the engine collapses it only once it has
   armed itself. The other way round — segments at opacity 0 waiting for an
   observer — means the whole itinerary is blank if that callback never comes,
   and a section that can render empty is not one to ship. */
.owf-ipt__seg {
    --c: var(--ipt-blue); --c-rgb: 0, 114, 190;
    position: relative; min-width: 0; padding-top: 4px;
    transition: opacity 0.6s var(--ipt-ease), transform 0.6s var(--ipt-ease);
}
.owf-ipt__trip.is-armed .owf-ipt__seg { opacity: 0; transform: translateY(16px); }
.owf-ipt__trip.is-armed .owf-ipt__seg.is-in { opacity: 1; transform: none; }
.owf-ipt__seg.is-del { --c: var(--ipt-red); --c-rgb: 204, 41, 48; }

/* the leg in: back across the gap and the previous column, onto that node */
.owf-ipt__seg-leg {
    position: absolute; top: calc(4px + var(--node) / 2); height: 2px; border-radius: 2px;
    right: calc(100% - var(--node) / 2); width: calc(100% + var(--g));
    background: linear-gradient(90deg, rgba(var(--c-rgb), 0.18), rgba(var(--c-rgb), 0.5));
    transform-origin: 0 50%;
    transition: transform 0.7s var(--ipt-ease) 0.1s;
}
.owf-ipt__trip.is-armed .owf-ipt__seg-leg { transform: scaleX(0); }
.owf-ipt__trip.is-armed .owf-ipt__seg.is-in .owf-ipt__seg-leg { transform: scaleX(1); }
.owf-ipt__seg:first-child .owf-ipt__seg-leg { display: none; }

/* the ghost numeral, the set's magazine idiom */
.owf-ipt__seg-no {
    position: absolute; top: -6px; right: 0; z-index: 0;
    font-size: clamp(34px, 3.4vw, 52px); font-weight: 800; line-height: 1;
    letter-spacing: -0.05em; color: rgba(var(--c-rgb), 0.09);
    pointer-events: none; user-select: none;
}

.owf-ipt__seg-node {
    position: relative; z-index: 1;
    display: grid; place-items: center; width: var(--node); height: var(--node);
    margin-bottom: 13px; border-radius: 50%;
    background: var(--ipt-paper); border: 2px solid rgba(var(--c-rgb), 0.5);
    color: var(--c); font-size: 18px;
    box-shadow: 0 0 0 5px rgba(var(--c-rgb), 0.07);
    transition: transform 0.6s var(--ipt-spring) 0.25s, box-shadow 0.4s ease, border-color 0.4s ease;
}
.owf-ipt__seg.is-in .owf-ipt__seg-node { border-color: var(--c); }
.owf-ipt__seg:hover .owf-ipt__seg-node { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(var(--c-rgb), 0.1); }

.owf-ipt__seg-k { display: flex; align-items: baseline; gap: 9px; margin-bottom: 7px; }
.owf-ipt__seg-k b { font-size: 13px; font-weight: 800; letter-spacing: 0.13em; color: var(--c); }
.owf-ipt__seg-k em { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: -0.02em; color: var(--ipt-ink); }

.owf-ipt__seg-p {
    display: inline-block; margin-bottom: 9px; padding: 3px 10px; border-radius: 999px;
    background: rgba(var(--c-rgb), 0.09); border: 1px solid rgba(var(--c-rgb), 0.2);
    font-size: 9px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--c);
}
.owf-ipt__seg-t {
    position: relative; z-index: 1; margin: 0 0 7px;
    font-size: clamp(14px, 0.35vw + 12px, 16.5px); font-weight: 600;
    letter-spacing: -0.03em; line-height: 1.24; color: var(--ipt-ink) !important;
}
.owf-ipt__seg-d { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: var(--ipt-ink-2); }

/* Fewer columns, and the leg is dropped from whichever segment opens a row —
   otherwise it draws out to the left toward a node that is now a row above. */
@media (max-width: 1279px) {
    .owf-ipt__trip { --cols: 3; }
    .owf-ipt__trip-band { display: none; }
    .owf-ipt__seg:nth-child(3n + 1) .owf-ipt__seg-leg { display: none; }
}
@media (max-width: 860px) {
    .owf-ipt__trip { --cols: 2; }
    .owf-ipt__seg:nth-child(3n + 1) .owf-ipt__seg-leg { display: block; }
    .owf-ipt__seg:nth-child(2n + 1) .owf-ipt__seg-leg { display: none; }
}
/* One column: the route stands up, the leg becomes the drop to the next node */
@media (max-width: 560px) {
    .owf-ipt__trip { --cols: 1; --g: 0px; }
    .owf-ipt__trip-list { row-gap: 0; }
    .owf-ipt__seg { display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 16px; padding-bottom: 22px; }
    .owf-ipt__seg:last-child { padding-bottom: 0; }
    .owf-ipt__seg-node { grid-row: 1 / span 4; grid-column: 1; margin-bottom: 0; }
    .owf-ipt__seg-k, .owf-ipt__seg-p, .owf-ipt__seg-t, .owf-ipt__seg-d { grid-column: 2; }
    .owf-ipt__seg-no { top: -2px; }
    .owf-ipt__seg-leg {
        display: block !important;
        left: calc(var(--node) / 2 - 1px); right: auto; width: 2px;
        top: calc(4px + var(--node) / 2); bottom: calc(var(--node) / -2 - 4px); height: auto;
        transform-origin: 50% 0;
        background: linear-gradient(180deg, rgba(var(--c-rgb), 0.5), rgba(var(--c-rgb), 0.18));
    }
    .owf-ipt__trip.is-armed .owf-ipt__seg-leg { transform: scaleY(0); }
    .owf-ipt__trip.is-armed .owf-ipt__seg.is-in .owf-ipt__seg-leg { transform: scaleY(1); }
    .owf-ipt__seg:last-child .owf-ipt__seg-leg { display: none !important; }
    .owf-ipt__seg:first-child .owf-ipt__seg-leg { display: block !important; }
}

/* =============== 7 · D the manifest, E the spec sheet =============== */
/* ══ D · THE NUMBERED SPREAD ═════════════════════════════════════════════
   One mark per entry. The previous version put a numeral, a checkbox that
   was not a control and an icon all in front of the title, inside a white
   card, two cramped columns wide, next to a photograph as tall as the whole
   list — four kinds of chrome competing to lead.

   Now: a rule, an inked icon, and the numeral demoted to texture behind it.
   Three across, so the copy has a measure, and the coordinator line closes
   the section as a band instead of owning a column of it.
   ═══════════════════════════════════════════════════════════════════════ */
.owf-ipt__checklist {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 2.6vw, 40px) clamp(22px, 2.8vw, 52px);
    margin: 0; padding: 0; list-style: none;
}
.owf-ipt__doc {
    position: relative; min-width: 0;
    padding-top: clamp(15px, 1.7vw, 21px);
    border-top: 1px solid rgba(0, 114, 190, 0.22);
}
/* a short accent on the rule, drawn out as the entry is read */
.owf-ipt__doc::after {
    content: ''; position: absolute; top: -1px; left: 0; width: 34px; height: 2px;
    background: var(--ipt-blue); transition: width 0.45s var(--ipt-ease);
}
.owf-ipt__doc:hover::after { width: 92px; }

/* the numeral is texture, not a label — it sits behind, out of the way */
.owf-ipt__doc-n {
    position: absolute; top: clamp(9px, 1vw, 14px); right: 0; z-index: 0;
    font-size: clamp(30px, 2.8vw, 46px); font-weight: 800; line-height: 1;
    letter-spacing: -0.05em; color: rgba(0, 114, 190, 0.1);
    pointer-events: none; user-select: none;
}
.owf-ipt__doc-i {
    position: relative; z-index: 1;
    display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px;
    border-radius: 50%; background: var(--ipt-paper);
    border: 1.5px solid rgba(0, 114, 190, 0.32); color: var(--ipt-blue); font-size: 17px;
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.55s var(--ipt-spring);
}
.owf-ipt__doc:hover .owf-ipt__doc-i {
    background: var(--ipt-blue); border-color: var(--ipt-blue); color: #fff; transform: rotate(-8deg);
}
.owf-ipt__doc-t {
    position: relative; z-index: 1; margin: 0 0 7px;
    font-size: clamp(14.5px, 0.4vw + 12.5px, 17px); font-weight: 600;
    letter-spacing: -0.03em; line-height: 1.24; color: var(--ipt-ink) !important;
}
.owf-ipt__doc-d { margin: 0; font-size: 12.5px; font-weight: 300; line-height: 1.58; color: var(--ipt-ink-2); }


/* ══ E · THE SPEC SHEET ══════════════════════════════════════════════════
   Every one of these carries a figure, so the figure leads and the grid is
   the only chrome. Ruled cells, no boxes, no fills — which is what keeps six
   facts reading as one table rather than six cards.
   ═══════════════════════════════════════════════════════════════════════ */
.owf-ipt__spec {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(0, 114, 190, 0.2);
    border-left: 1px solid var(--ipt-line);
}
.owf-ipt__fact {
    position: relative; overflow: hidden; min-width: 0;
    padding: clamp(15px, 1.8vw, 24px);
    border-right: 1px solid var(--ipt-line); border-bottom: 1px solid var(--ipt-line);
    transition: background 0.35s ease;
}
.owf-ipt__fact:hover { background: rgba(0, 114, 190, 0.04); }
/* the icon as a watermark in the corner, not a badge on the front */
.owf-ipt__fact-wm {
    position: absolute; top: -6px; right: -6px; z-index: 0;
    font-size: clamp(52px, 5vw, 74px); line-height: 1; color: rgba(0, 114, 190, 0.055);
    pointer-events: none; transition: transform 0.6s var(--ipt-ease), color 0.4s ease;
}
.owf-ipt__fact:hover .owf-ipt__fact-wm { transform: rotate(-8deg) scale(1.06); color: rgba(0, 114, 190, 0.09); }
.owf-ipt__fact-k {
    position: relative; z-index: 1; margin: 0 0 9px;
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase;
    color: var(--ipt-ink-3) !important;
}
.owf-ipt__fact-v {
    position: relative; z-index: 1; display: block; margin-bottom: 9px;
    font-size: clamp(21px, 1.4vw + 12px, 34px); font-weight: 700;
    letter-spacing: -0.045em; line-height: 1; color: var(--ipt-red);
}
.owf-ipt__fact-d { position: relative; z-index: 1; margin: 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: var(--ipt-ink-2); }

@media (max-width: 960px) {
    .owf-ipt__spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .owf-ipt__checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .owf-ipt__spec { grid-template-columns: minmax(0, 1fr); }
    .owf-ipt__checklist { grid-template-columns: minmax(0, 1fr); }
}


/* =============== 8 · F the ledger, final call, plates =============== */
/* ══ THE FILTER ══════════════════════════════════════════════════════════
   One segmented track rather than five loose pills: a single ruled control
   the eye reads as one object, which is what a filter is.
   ═══════════════════════════════════════════════════════════════════════ */
.owf-ipt__switch {
    display: flex; gap: 2px; margin-bottom: clamp(16px, 2vw, 26px); padding: 4px;
    border-radius: 999px; background: var(--ipt-paper); border: 1px solid var(--ipt-line);
    box-shadow: 0 10px 26px -22px rgba(10, 39, 64, 0.7);
    width: max-content; max-width: 100%;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.owf-ipt__switch::-webkit-scrollbar { display: none; }
.owf-ipt__sw {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    min-height: 34px; padding: 7px 15px; border-radius: 999px;
    background: transparent; border: 0; white-space: nowrap;
    font-family: 'Jost', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--ipt-ink-2);
    transition: background 0.25s ease, color 0.25s ease;
}
.owf-ipt__sw em {
    display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px;
    border-radius: 999px; background: var(--ipt-paper-2);
    font-size: 10px; font-style: normal; font-weight: 700; color: var(--ipt-ink-3);
    font-variant-numeric: tabular-nums; transition: background 0.25s ease, color 0.25s ease;
}
.owf-ipt__sw:hover { background: var(--ipt-wash); color: var(--ipt-blue); }
.owf-ipt__sw.is-on { background: var(--ipt-blue); color: #fff; font-weight: 600; }
.owf-ipt__sw.is-on em { background: rgba(255, 255, 255, 0.22); color: #fff; }
.owf-ipt__sw:focus-visible { outline: 2px solid var(--ipt-red); outline-offset: 2px; }

/* ══ THE LEDGER ══════════════════════════════════════════════════════════
   Ruled rows, not a stack of bordered boxes. The open row takes a wash and a
   spine so the answer plainly belongs to its question, and the numerals come
   from a CSS counter — filtering hides rows with `hidden`, counters skip
   display:none, so the numbering closes up instead of leaving gaps.
   ═══════════════════════════════════════════════════════════════════════ */
.owf-ipt__faq { counter-reset: ipt-q; border-top: 1px solid rgba(0, 114, 190, 0.2); }
.owf-ipt__q {
    counter-increment: ipt-q;
    position: relative; overflow: hidden; margin: 0; padding: 0;
    border: 0; border-bottom: 1px solid var(--ipt-line); background: transparent;
    transition: background 0.35s ease;
}
/* the spine, drawn only on the open row */
.owf-ipt__q::before {
    content: ''; position: absolute; z-index: 2; inset: 0 auto 0 0; width: 3px;
    background: var(--ipt-blue); transform: scaleY(0); transform-origin: 50% 0;
    transition: transform 0.4s var(--ipt-ease);
}
.owf-ipt__q[open] { background: linear-gradient(90deg, var(--ipt-wash), transparent 62%); }
.owf-ipt__q[open]::before { transform: scaleY(1); }

.owf-ipt__q > summary {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start;
    gap: clamp(12px, 1.5vw, 20px);
    padding: clamp(15px, 1.7vw, 21px) clamp(14px, 1.6vw, 20px);
    margin: 0; font-size: inherit; font-weight: 400;
    background: transparent; border: 0; cursor: pointer; list-style: none;
}
.owf-ipt__q > summary::-webkit-details-marker { display: none; }
.owf-ipt__q > summary::marker { content: ''; }
.owf-ipt__q > summary:focus-visible { outline: 2px solid var(--ipt-red); outline-offset: -3px; }

.owf-ipt__q-n {
    padding-top: 3px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
    color: var(--ipt-blue); opacity: 0.42; font-variant-numeric: tabular-nums;
    transition: opacity 0.3s ease;
}
.owf-ipt__q-n::before { content: counter(ipt-q, decimal-leading-zero); }
.owf-ipt__q[open] .owf-ipt__q-n { opacity: 1; }

.owf-ipt__q-b { min-width: 0; }
.owf-ipt__q-c {
    display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px;
    background: var(--ipt-wash); border: 1px solid rgba(0, 114, 190, 0.16);
    font-size: 9px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ipt-blue);
}
.owf-ipt__q-t {
    display: block; font-size: clamp(15px, 0.45vw + 12.5px, 18.5px); font-weight: 500;
    letter-spacing: -0.028em; line-height: 1.32; color: var(--ipt-ink); transition: color 0.25s ease;
}
.owf-ipt__q:hover .owf-ipt__q-t { color: var(--ipt-blue); }

.owf-ipt__q-mark {
    position: relative; flex-shrink: 0; width: 30px; height: 30px; margin-top: 1px;
    border-radius: 50%; border: 1px solid var(--ipt-line); background: var(--ipt-paper);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.45s var(--ipt-spring);
}
.owf-ipt__q-mark i {
    position: absolute; top: 50%; left: 50%; display: block; width: 11px; height: 1.5px;
    margin: -0.75px 0 0 -5.5px; border-radius: 2px; background: var(--ipt-ink-2);
    transition: transform 0.35s var(--ipt-spring), background 0.3s ease;
}
.owf-ipt__q-mark i:last-child { transform: rotate(90deg); }
.owf-ipt__q[open] .owf-ipt__q-mark { background: var(--ipt-blue); border-color: var(--ipt-blue); transform: rotate(180deg); }
.owf-ipt__q[open] .owf-ipt__q-mark i { background: #fff; }
.owf-ipt__q[open] .owf-ipt__q-mark i:last-child { transform: rotate(0deg); }

/* the answer sits under the question, indented past the numeral and ruled off */
.owf-ipt__a {
    padding: 0 clamp(14px, 1.6vw, 20px) clamp(16px, 1.9vw, 23px);
    margin-left: clamp(38px, 4vw, 52px);
    animation: ipt-slide 0.35s var(--ipt-ease);
}
.owf-ipt__a p {
    margin: 0; padding-left: clamp(13px, 1.4vw, 19px);
    border-left: 2px solid rgba(0, 114, 190, 0.22);
    font-size: clamp(13px, 0.4vw + 11.5px, 15px); font-weight: 300; line-height: 1.7; color: var(--ipt-ink-2);
}
@keyframes ipt-slide { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.owf-ipt__faq-none { margin: 0; padding: 22px 4px; font-size: 13px; font-weight: 300; color: var(--ipt-ink-3); }

@media (max-width: 560px) {
    .owf-ipt__q > summary { grid-template-columns: auto minmax(0, 1fr); gap: 11px; }
    .owf-ipt__q-mark { grid-column: 2; justify-self: start; margin-top: 10px; }
    .owf-ipt__a { margin-left: 30px; }
}


/* Light close, brand-washed, with one ink rule at the top to sign it off. */
.owf-ipt__final {
    position: relative; overflow: hidden; padding: clamp(30px, 3.4vw, 54px) 0; text-align: center;
    border-top: 2px solid var(--ipt-blue);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 114, 190, 0.13), transparent 62%),
        linear-gradient(180deg, var(--ipt-paper-2) 0%, #ffffff 100%);
}
.owf-ipt__final-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.owf-ipt__final-k { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 5px 15px; border-radius: 999px; background: rgba(204, 41, 48, 0.09); border: 1px solid rgba(204, 41, 48, 0.24); font-size: 10px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--ipt-red); }
.owf-ipt__final-t { margin: 0 0 10px; font-size: clamp(24px, 1.8vw + 9px, 42px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.03; color: var(--ipt-ink) !important; text-wrap: balance; }
.owf-ipt__final-d { margin: 0 0 clamp(16px, 2vw, 24px); font-size: clamp(13px, 0.4vw + 11.5px, 15px); font-weight: 300; line-height: 1.62; color: var(--ipt-ink-2); }
.owf-ipt__final-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; }


/* =============== 9 · responsive =============== */
@media (max-width: 1180px) {
    /* one column: type, then the atlas, then the flights — still one flow */
    .owf-ipt__board-grid { grid-template-columns: minmax(0, 1fr); }
    .owf-ipt__board-txt, .owf-ipt__atlas, .owf-ipt__routes { grid-column: 1; grid-row: auto; }
    /* the atlas' own single-column sizing lives beside its base rules at the
       foot of this file, so the later block cannot silently outrank it */
    .owf-ipt__board-wm { font-size: clamp(64px, 14vw, 120px); }
}

@media (max-width: 767px) {
    .owf-ipt__sec { padding: clamp(30px, 7vw, 44px) 0; scroll-margin-top: 104px; }
    .owf-ipt__clocks { gap: 8px; }
    .owf-ipt__clock { padding: 7px 13px; }
    .owf-ipt__clock em { font-size: 15px; }
    .owf-ipt__clock-note { flex-basis: 100%; }
    .owf-ipt__board-cta { width: 100%; }
    .owf-ipt__board-cta .owf-ipt__btn { flex: 1; }
    /* Two rows: what it is and what it costs, then the bar with the multiplier
       hung off its end. The header row goes — there are no columns left for it
       to label. */
    .owf-ipt__price-hd { display: none; }
    .owf-ipt__price {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "n v" "tr x";
        gap: 10px 12px; align-items: center;
    }
    .owf-ipt__price-n { grid-area: n; }
    .owf-ipt__price-v { grid-area: v; align-self: start; }
    .owf-ipt__price-tr { grid-area: tr; }
    .owf-ipt__price-x { grid-area: x; }
    .owf-ipt__blur { filter: blur(54px); opacity: 0.4; }
    .owf-ipt__globe-live { position: static; transform: none; margin-top: 10px; }
    .owf-ipt__globe-stage { gap: 6px; }
    .owf-ipt__seg-t { font-size: 15px; }
    .owf-ipt__final-btns { width: 100%; }
    .owf-ipt__final-btns .owf-ipt__btn { flex: 1; }
    .owf-ipt a, .owf-ipt button { touch-action: manipulation; }
}

/* =============== reduced motion =============== */
@media (prefers-reduced-motion: reduce) {
    .owf-ipt, .owf-ipt * { animation: none !important; transition-duration: 0.01ms !important; }
    .owf-ipt.is-ready [data-rv] { opacity: 1; transform: none; }
    /* the engine also stops the globe and fills the rail; these are the braces */
    .owf-ipt__seg { opacity: 1 !important; transform: none !important; }
    .owf-ipt__seg-leg { transform: none !important; }
    .owf-ipt__blur { display: none; }
}

/* =============== print =============== */
@media print {
    .owf-ipt__gates, .owf-ipt__final, #owf-header, #owf-top-bar,
    .owf-ft, .owf-subft, #gotoTop { display: none !important; }
    .owf-ipt__board, .owf-ipt__sec--brand { background: #fff !important; color: #000 !important; }
    .owf-ipt__blur, .owf-ipt__globe-stage, .owf-ipt__atlas-leg, .owf-ipt__switch { display: none !important; }
    .owf-ipt__board-wm { display: none !important; }
    .owf-ipt__seg { opacity: 1 !important; transform: none !important; }
    .owf-ipt__seg-leg, .owf-ipt__seg-no { display: none !important; }
    .owf-ipt__q[hidden] { display: block !important; }
    .owf-ipt__h1, .owf-ipt__sec-t, .owf-ipt__price-nx b, .owf-ipt__brief-lead b, .owf-ipt__seg-t { color: #000 !important; }
    .owf-ipt__lead, .owf-ipt__sec-d, .owf-ipt__price-v, .owf-ipt__brief-lead, .owf-ipt__seg-d { color: #333 !important; }
    /* the one saturated block on the page prints as paper */
    .owf-ipt__hero { background: #fff !important; border: 1px solid #999; box-shadow: none; }
    .owf-ipt__hero::before { display: none !important; }
    .owf-ipt__hero-v, .owf-ipt__hero-x b { color: #000 !important; }
    .owf-ipt__hero-k, .owf-ipt__hero-d, .owf-ipt__hero-x span, .owf-ipt__hero-v em { color: #333 !important; }
    .owf-ipt__sec { padding: 14px 0; break-inside: avoid; }
    .owf-ipt__price-tr i { width: var(--w) !important; left: var(--l) !important; }
    /* the funnel prints as a chart; only the animation is dropped */
    .owf-ipt__fl-bar { animation: none !important; width: var(--w) !important; }
    .owf-ipt__fl-plane, .owf-ipt__brief-plane { display: none !important; }
    .owf-ipt__brief-leg::after { animation: none !important; width: 0 !important; }
    .owf-ipt a[href]::after { content: ''; }
}

/* ==========================================================================
   §  MASTHEAD VECTOR MAP  +  GLOBE / ROUTE-CARD SPLIT
   --------------------------------------------------------------------------
   Added when the masthead photograph was replaced by a generated map and the
   flight list was moved beside the globe rather than beneath it.
   The map is inline SVG built in PHP from config/geo-outline.php — no image
   request, no mapping library, and it stays sharp at any width.
   ========================================================================== */
/* --------------------------------------------------------------------------
   COLOURED FOR THE LIGHT BOARD.
   --------------------------------------------------------------------------
   Everything in this section was originally drawn for the full-bleed DARK
   masthead: white land dots, white city labels, a white "DEL" caption, white
   flight cards on white text. When the board became light and brand-washed
   those colours were never revisited, so the entire vector map, the globe's
   landmasses and the flight list were rendering white-on-white — present in
   the DOM, invisible on screen.

   They are now brand-blue ink on paper. Weights are picked so the map reads
   as a quiet ground behind the type: the landmass is the faintest thing on
   it, the routes sit above that, and the red Delhi hub is the only saturated
   mark, so the eye lands on the destination.
   -------------------------------------------------------------------------- */
.owf-ipt__map { width: 100%; height: auto; display: block; overflow: visible; }
/* The land was pitched as the faintest thing on the page and at 0.17 it barely
   registered — the continents read as paper texture rather than as a map. Held
   up enough to be legibly a world, still well under the routes and the hub. */
.owf-ipt__map-land circle { fill: rgba(0, 114, 190, 0.34); }
.owf-ipt__map-arcs path {
    fill: none; stroke: rgba(0, 114, 190, 0.62); stroke-width: 1.4; stroke-linecap: round;
    stroke-dasharray: 3 5; animation: ipt-map-flow 14s linear infinite;
}
@keyframes ipt-map-flow { to { stroke-dashoffset: -160; } }
/* white centre + solid blue ring — reads as a pin against the dotted land */
.owf-ipt__map-city circle { fill: #fff; stroke: var(--ipt-blue); stroke-width: 1.6; }
/* Sized in map units. The map draws at roughly 0.6 of its 1000-unit viewBox in
   the atlas column, so 11px was landing near 6px on screen and the city codes
   were unreadable. 16 / 20 hold up at that reduction. */
.owf-ipt__map-city text {
    fill: var(--ipt-ink-2); font-family: 'Jost', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-anchor: middle;
}
.owf-ipt__map-hub circle { fill: var(--owf-red, #cc2930); }
/* the DEL caption sits BELOW the hub, on the paper — not on the red disc */
.owf-ipt__map-hub text {
    fill: var(--ipt-red); font-family: 'Jost', sans-serif;
    font-size: 20px; font-weight: 800; letter-spacing: 0.05em; text-anchor: end;
}
/* the hub pulses so the eye lands on the destination, not the origins */
.owf-ipt__map-ping { fill: none; stroke: var(--owf-red, #cc2930); stroke-width: 1.6; transform-origin: center; transform-box: fill-box; animation: ipt-map-ping 2.8s ease-out infinite; }
@keyframes ipt-map-ping { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3.4); opacity: 0; } }

/* ── THE ATLAS: flat map above, live globe below, one figure ──
   The two views used to be separate blocks — the map beside the headline, the
   globe in a band of its own underneath — and the whitespace between them read
   as a section break. They are now stacked inside one figure in one grid cell,
   with no gap and a drawn leg across the joint, so the flat world and the
   turning earth are plainly the same instrument seen twice. */
.owf-ipt__atlas {
    position: relative; margin: 0; display: flex; flex-direction: column;
    /* one soft wash under both halves — a shared ground, not a card */
    background: radial-gradient(ellipse 78% 62% at 50% 62%, rgba(0, 114, 190, 0.05), transparent 72%);
}
/* the map's own bottom air is trimmed so the leg starts at the hub, not below it */
.owf-ipt__atlas .owf-ipt__map { position: relative; z-index: 1; margin-bottom: -4.5%; }

/* the joint: a dashed leg out of the DEL hub and down onto the globe's crown,
   flowing on the same cadence as the arcs on the map above it */
.owf-ipt__atlas-leg {
    position: relative; z-index: 1; display: block;
    width: 100%; height: clamp(38px, 4.4vw, 66px); overflow: visible;
}
.owf-ipt__atlas-leg path {
    fill: none; stroke: rgba(0, 114, 190, 0.5); stroke-width: 1.4; stroke-linecap: round;
    stroke-dasharray: 3 5; animation: ipt-map-flow 14s linear infinite;
}
/* The orb's viewBox carries ~14% of clear air above the sphere for the city
   codes. Pulled up by that much, the leg lands on the crown instead of stopping
   short of it, which is the whole point of drawing the leg. */
.owf-ipt__globe-stage { margin-top: calc(clamp(260px, 30vw, 380px) * -0.14); }

/* Single column, from the point the board grid collapses. Kept here rather
   than in §9 because .owf-ipt__atlas and .owf-ipt__globe-stage are declared
   above and a later block would win on source order. */
@media (max-width: 1180px) {
    /* the atlas stays a figure, not a band: held to a plate width and centred,
       so the map does not become a full-width slab with the globe adrift under
       it — which is the two-section reading this change exists to remove */
    .owf-ipt__atlas { width: 100%; max-width: 720px; margin: 0 auto; }
    .owf-ipt__orb { max-width: clamp(240px, 46vw, 380px); }
    .owf-ipt__globe-stage { margin-top: calc(clamp(240px, 46vw, 380px) * -0.14); }
}

.owf-ipt__routes { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* ══ THE FUNNEL ══════════════════════════════════════════════════════════
   The eight legs were eight identical boxes: a card grid that said nothing
   the text inside it did not already say. They are one chart now. Each track
   is drawn to its own flight time against the longest leg — Kathmandu at a
   tenth of Sydney — and every track lands on a single Delhi axis running down
   the right, so the list carries the same converging-on-DEL reading as the
   arcs on the map above it. The only ornament that is not data is the
   aircraft, and it flies only the leg the globe is flying.

   No boxes, no fills, no shadows: rules, a rail and a bar.
   ═══════════════════════════════════════════════════════════════════════ */
.owf-ipt__flights { list-style: none; margin: 0; padding: 0; }
.owf-ipt__flights > li { display: block; }

/* One line per leg, departure-board fashion. Stacking the code over the city
   made each row 58px and pushed this column half a screen past the atlas
   beside it; inline, eight legs occupy less height than the headline. */
.owf-ipt__fl {
    display: grid; grid-template-columns: clamp(112px, 13vw, 140px) minmax(0, 1fr) 62px;
    align-items: center; column-gap: clamp(10px, 1.2vw, 16px);
    width: 100%; padding: 7px 4px; margin: 0;
    background: none; border: 0; border-top: 1px solid var(--ipt-line);
    font-family: inherit; color: inherit; text-align: left; cursor: pointer;
    transition: background 0.3s ease;
}
.owf-ipt__flights > li:last-child .owf-ipt__fl { border-bottom: 1px solid var(--ipt-line); }
.owf-ipt__fl:hover { background: linear-gradient(90deg, var(--ipt-wash), transparent 78%); }
.owf-ipt__fl:focus-visible { outline: 2px solid var(--ipt-red); outline-offset: 1px; }

.owf-ipt__fl-k { min-width: 0; display: flex; align-items: baseline; gap: 9px; }
.owf-ipt__fl-k b {
    font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
    color: var(--ipt-blue); transition: color 0.3s ease;
}
.owf-ipt__fl-k em {
    min-width: 0; font-style: normal; font-size: 11px; font-weight: 300;
    color: var(--ipt-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.owf-ipt__fl.is-on .owf-ipt__fl-k b { color: var(--ipt-red); }

.owf-ipt__fl-tr { position: relative; height: 20px; }
/* the full rail: the scale every leg is measured against, dotted like the
   unflown arcs on the map */
.owf-ipt__fl-tr::before {
    content: ''; position: absolute; inset: 50% 0 auto 0; height: 1px; margin-top: -0.5px;
    background: repeating-linear-gradient(90deg, rgba(10, 25, 41, 0.17) 0 3px, transparent 3px 8px);
}
/* the Delhi axis. Bleeds past the row on both sides so it runs unbroken from
   the first leg to the last — one destination, eight origins. */
.owf-ipt__fl-tr::after {
    content: ''; position: absolute; right: 0; top: -10px; bottom: -10px; width: 1px;
    background: rgba(0, 114, 190, 0.3);
}

/* the leg itself, right-anchored on the axis and grown to its flight time */
/* Drawn on load rather than off the [data-rv] observer. The chart is in the
   masthead, so there is nothing to wait for, and hanging the only copy of the
   data off an IntersectionObserver means one missed callback renders it blank.
   `both` holds the bar at zero through its stagger, and the animation's end
   state is the declared width, so if the animation never runs at all the chart
   is simply already correct. */
.owf-ipt__fl-bar {
    position: absolute; right: 0; top: 50%; height: 2px; margin-top: -1px;
    width: var(--w); border-radius: 999px; background: var(--ipt-blue);
    animation: ipt-fl-grow 0.85s var(--ipt-ease) calc(var(--i, 0) * 70ms) both;
    transition: background 0.3s ease, height 0.3s ease, margin-top 0.3s ease;
}
@keyframes ipt-fl-grow { from { width: 0; } to { width: var(--w); } }
.owf-ipt__fl.is-on .owf-ipt__fl-bar { background: var(--ipt-red); height: 3px; margin-top: -1.5px; }

/* the origin, drawn as the map draws its city pins */
.owf-ipt__fl-bar::before {
    content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px; border-radius: 50%;
    background: #fff; border: 1.6px solid var(--ipt-blue); transition: border-color 0.3s ease;
}
.owf-ipt__fl.is-on .owf-ipt__fl-bar::before { border-color: var(--ipt-red); }
/* the landing on the axis, on the leg being flown */
.owf-ipt__fl-bar::after {
    content: ''; position: absolute; right: -3.5px; top: 50%; width: 7px; height: 7px;
    margin-top: -3.5px; border-radius: 50%; background: var(--ipt-red);
    opacity: 0; transform: scale(0.4); transition: opacity 0.3s ease, transform 0.3s var(--ipt-spring);
}
.owf-ipt__fl.is-on .owf-ipt__fl-bar::after { opacity: 1; transform: scale(1); }

/* The aircraft. Hidden until this is the leg the globe is flying, then placed
   from --t, which the engine writes each frame from the same progress value
   that moves the aircraft along the great circle. It had its own 3.6s CSS loop
   before, against the globe's 6.25s leg, so the two were never going to agree —
   and no fixed duration could have, since the globe's clock stops when it
   scrolls out of view and restarts whenever a leg is clicked. */
.owf-ipt__fl-plane {
    position: absolute; top: 50%; margin-top: -7px; transform: translateX(-50%);
    left: calc(var(--t, 0) * 100%);
    font-size: 11px; line-height: 1; color: var(--ipt-red); opacity: 0;
}
.owf-ipt__fl-plane i { display: block; transform: rotate(90deg); }
.owf-ipt__fl.is-on .owf-ipt__fl-plane { opacity: 1; }

.owf-ipt__fl-t {
    text-align: right; white-space: nowrap;
    font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--ipt-ink); font-variant-numeric: tabular-nums; transition: color 0.3s ease;
}
.owf-ipt__fl.is-on .owf-ipt__fl-t { color: var(--ipt-red); }

/* The foot: the legend, and the axis resolving on Delhi. The middle column is
   sized to the DEL cap, so its right edge lands on the axis the tracks end on
   without either measurement being written down twice. */
.owf-ipt__fl-foot {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 62px;
    column-gap: clamp(10px, 1.2vw, 16px); align-items: start; padding: 9px 4px 0;
}
/* the chart says what it is, or it is only decoration */
.owf-ipt__fl-note {
    margin: 0; display: flex; align-items: flex-start; gap: 7px;
    font-size: 11px; font-weight: 300; line-height: 1.5; color: var(--ipt-ink-3);
}
.owf-ipt__fl-note i { flex-shrink: 0; margin-top: 2px; font-size: 12px; color: var(--ipt-blue); }

.owf-ipt__fl-cap {
    position: relative; padding-top: 13px; text-align: right;
    font-size: 10px; font-weight: 800; letter-spacing: 0.15em; color: var(--ipt-red);
}
/* the axis' last few pixels, carried down out of the final track */
.owf-ipt__fl-cap::before {
    content: ''; position: absolute; right: 0; top: -9px; width: 1px; height: 14px;
    background: rgba(0, 114, 190, 0.3);
}
/* and its terminal: the one destination all eight legs land on */
.owf-ipt__fl-cap::after {
    content: ''; position: absolute; right: -3px; top: 2px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--ipt-red);
}

/* ── Landmasses on the globe (drawn by the engine) ── */
/* the globe's continents, held in step with the flat map's above it */
.owf-ipt__land { fill: rgba(0, 114, 190, 0.24); stroke: rgba(0, 114, 190, 0.42); stroke-width: 0.6; }

@media (max-width: 560px) {
    /* Same two-row fold the price rows take: identity and figure on one line,
       the track spanning the full width beneath — otherwise the shortest leg
       gets 19px of track and the chart stops being readable. */
    .owf-ipt__fl {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "k t" "tr tr";
        row-gap: 6px; padding: 11px 4px;
    }
    .owf-ipt__fl-k { grid-area: k; display: flex; align-items: baseline; gap: 9px; }
    .owf-ipt__fl-k b, .owf-ipt__fl-k em { display: inline; }
    .owf-ipt__fl-t { grid-area: t; align-self: baseline; }
    .owf-ipt__fl-tr { grid-area: tr; height: 14px; }
    .owf-ipt__fl-tr::after { top: -12px; bottom: -13px; }
    /* the track now spans both columns, so the axis is at the row's right edge
       and the DEL cap has to follow it there */
    .owf-ipt__fl-foot { grid-template-columns: minmax(0, 1fr) auto; }

    /* Sized in map units, so a narrower map means BIGGER numbers, not smaller:
       at 334px the 1000-unit viewBox draws at a third of scale and the desktop
       sizes came out around 5px on screen. */
    .owf-ipt__map-city text { font-size: 30px; }
    .owf-ipt__map-hub text { font-size: 38px; }
    .owf-ipt__map-city circle { r: 5; }
    .owf-ipt__map-land circle { r: 2.6; }
}
@media (prefers-reduced-motion: reduce) {
    .owf-ipt__map-arcs path, .owf-ipt__map-ping, .owf-ipt__atlas-leg path { animation: none !important; }
}