/* Iteration 3 (after United Carriers): a quiet, technical page.
   Palettes (Options → Palette): Signal, Harbour, Brass, Mono. Each sets the dark ground, the warm paper and one accent.
   Type: Hanken Grotesk, three styles only (display heading in caps, body, small spaced label).
   Text colour: one main and one secondary per ground. The accent is for graphics only, never for text.
   Line art: Iteration 2's scenes as an engineering drawing (solid hairlines for structure, fine dots for detail).
   Photographs: black and white. Corners: 8px on buttons, per the house rule. */

@property --p { syntax: "<number>"; inherits: false; initial-value: 30; }

html[data-it="3"] { --i3d: #0b0d10; --i3d-rgb: 11, 13, 16; --i3p: #f4f2ee; --i3ink: 12, 13, 15; --i3w: 245, 243, 239; --i3a: #ff5b1f; --i3a-rgb: 255, 91, 31; --i3a-h: 16; background: var(--i3d); }
html[data-it="3"][data-pal="harbour"] { --i3d: #0b1a2a; --i3d-rgb: 11, 26, 42; --i3p: #f1f3f4; --i3ink: 11, 22, 34; --i3a: #ff6a2b; --i3a-rgb: 255, 106, 43; --i3a-h: 18; }
html[data-it="3"][data-pal="brass"] { --i3d: #12110e; --i3d-rgb: 18, 17, 14; --i3p: #f3efe6; --i3ink: 20, 18, 14; --i3a: #c08b3e; --i3a-rgb: 192, 139, 62; --i3a-h: 36; }
html[data-it="3"][data-pal="mono"] { --i3a: #8e949b; --i3a-rgb: 142, 148, 155; --i3a-h: 212; }
/* Text reveal colour (Options -> Reveal): the edge that writes each line in. Teal is the original sweep. */
html[data-it="3"] { --rv: var(--i3a-rgb); } /* default: the palette accent, the same orange as the drawings */
html[data-it="3"][data-rev="teal"] { --rv: 47, 212, 180; }
html[data-it="3"][data-rev="blue"] { --rv: 77, 141, 255; }
html[data-it="3"][data-rev="soft"] { --rv: initial; } /* falls back to each section's own text colour */
html[data-it="3"] body { background: var(--i3d); color: rgb(var(--i3w)); font-family: "Hanken Grotesk", system-ui, sans-serif; }
.opt__r--3 { display: none; }
html[data-it="3"] .opt__r--3 { display: flex; }
html[data-it="3"] .opt__r--1 { display: none; }
html.i3-loading, html.i3-loading body { overflow: hidden; }
html[data-copy="less"] .i3-more { display: none !important; }

.i3-dark, .i3-hdr, .i3-load { --rgb: var(--i3w); --bg: var(--i3d); }
.i3-light { --rgb: var(--i3ink); --bg: var(--i3p); }
.i3-dark, .i3-light, .i3-hdr, .i3-load { --t1: rgb(var(--rgb)); --t2: rgba(var(--rgb), .62); --ln: rgba(var(--rgb), .13); }
.i3-dark, .i3-light { background: var(--bg); color: var(--t1); }
.i3-wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }

/* The three type styles */
.i3-h1, .i3-h2 { margin: 0; font-kerning: normal; font-feature-settings: "kern" 1, "case" 1; font-weight: 600; text-transform: uppercase; text-wrap: balance; letter-spacing: -.03em; }
.i3-h1 { font-size: clamp(42px, 6vw, 100px); line-height: .98; }
.i3-h1--c { text-align: center; }
.i3-h2 { font-size: clamp(32px, 4vw, 60px); line-height: 1.02; }
.i3-rows h3, .i3-pil h3, .i3-mod h3, .i3-who__n { margin: 0; font-size: clamp(19px, 1.55vw, 22px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.i3-lead, .i3-rows p, .i3-pil p, .i3-mod p, .i3-who p, .i3-foot__line { font-size: 16.5px; line-height: 1.55; color: var(--t2); text-wrap: pretty; }
.i3-lead { max-width: 34em; margin: 24px 0 0; font-size: clamp(16.5px, 1.2vw, 18.5px); }
.i3-lead--d { margin: 0; }
.i3-lead--c { margin-inline: auto; text-align: center; }
.i3-btn, .i3-hdr__n a, .i3-load__top span, .i3-load__meta, .i3-voy__read, .i3-mod__k, .i3-logos span, .i3-foot__legal, .i3-foot__c span, .i3-foot__map span, .i3-rows__n, .i3-pil__n, .i3-plat__cap, .i3-art .ia-tag, .i3-art .nw-tag {
  font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* Buttons: 8px corners */
.i3-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 8px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform 160ms ease-out, background-color .3s, box-shadow .3s, color .3s; }
.i3-btn:active { transform: scale(.97); }
.i3-btn--w { background: rgb(var(--i3w)); color: rgb(var(--i3ink)); }
.i3-btn--o { color: rgb(var(--i3w)); box-shadow: inset 0 0 0 1px rgba(var(--i3w), .32); }
@media (hover: hover) and (pointer: fine) { .i3-btn--w:hover { background: rgba(var(--i3w), .82); } .i3-btn--o:hover { box-shadow: inset 0 0 0 1px rgb(var(--i3w)); } }
.i3-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.i3-cta--c { justify-content: center; }
.i3 a:focus-visible, .i3-hdr a:focus-visible, .i3-foot a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Reveals. Ink sweep: each line is written left to right behind a soft edge of its own colour (no accent). */
.i3-ink .i3-w { color: transparent; background-image: linear-gradient(90deg, var(--fin) 0, var(--fin) 27%, rgb(var(--rv, var(--rgb))) 35%, rgba(var(--rv, var(--rgb)), .55) 41%, rgba(var(--rgb), .4) 47%, rgba(var(--rgb), .4) 100%); background-repeat: no-repeat; background-size: calc(var(--lw) * 3.5) 100%; background-position-x: calc(-2.5 * var(--lw) * (100 - var(--p)) / 100 - var(--x)); -webkit-background-clip: text; background-clip: text; transition: --p .85s cubic-bezier(.4, 0, .3, 1) var(--d, 0ms); }
.i3-ink.in .i3-w { --p: 100; }
/* Rolling reveal (headings): ghost at 40%, then scrambling glyphs in the reveal colour, then locked, easing to the final colour */
.i3-pre { color: rgba(var(--rgb), .4); }
.i3-roll .i3-wd { display: inline-block; white-space: nowrap; }
.i3-roll .i3-c { display: inline-block; text-align: left; letter-spacing: 0; white-space: pre; color: rgba(var(--rgb), .4); } /* width = the letter's kerned advance, set by roll() */
.i3-roll .i3-c.on:not(.ok) { text-align: center; }
.i3-roll .i3-c.on { color: rgb(var(--rv, var(--rgb))); }
.i3-roll .i3-c.ok { color: inherit; transition: color .38s ease-out; }
.i3-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ln); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.22, .61, .36, 1); }
.i3-rule.in { transform: none; }
[data-up] { opacity: 0; transform: translateY(18px); transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1); }
[data-up].in { opacity: 1; transform: none; }

/* Line art as an engineering drawing */
.i3-art .ia-wrap { --bg: var(--bg); --a: var(--rgb); --t: var(--i3a); --i2a: var(--i3a); --i2a-rgb: var(--i3a-rgb); }
.i3-art .ia .f, .i3-art .ia .l { stroke: rgba(var(--rgb), .7); stroke-width: 1; }
.i3-art .ia .l2 { stroke: rgba(var(--rgb), .5); stroke-width: 1.4; stroke-dasharray: 0 3; stroke-linecap: round; }
.i3-art .ia .l3 { stroke: rgba(var(--rgb), .34); stroke-width: 1.3; stroke-dasharray: 0 3.6; stroke-linecap: round; }
.i3-art .ia .w { stroke: rgba(var(--rgb), .4); }
.i3-art .ia * { filter: none !important; }
.i3-art .ia-tag, .i3-art .nw-tag { padding: 4px 7px; border-radius: 4px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--ln); color: var(--t1); font-size: 10px; letter-spacing: .12em; }
.i3-art .ia-tag--i2a { color: var(--t1); background: var(--bg); }
.i3-art .ia-lock { background: var(--i3a); box-shadow: 0 0 0 6px rgba(var(--i3a-rgb), .14); }

/* Photographs: black and white, revealed from a clipped frame; four registration dots mark the corners */
.i3-ph { position: relative; margin: 0; }
.i3-ph img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.96); clip-path: inset(10% round 4px); transform: scale(1.12); transition: clip-path 1.6s cubic-bezier(.16, 1, .3, 1), transform 1.8s cubic-bezier(.16, 1, .3, 1); }
.i3-ph.in img { clip-path: inset(0 round 4px); transform: none; }
.i3-ph i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--t2); }
.i3-ph i:nth-of-type(1) { top: -8px; left: -8px; } .i3-ph i:nth-of-type(2) { top: -8px; right: -8px; } .i3-ph i:nth-of-type(3) { bottom: -8px; left: -8px; } .i3-ph i:nth-of-type(4) { bottom: -8px; right: -8px; }

/* Loading screen: a bulk carrier's passage drawn on a dot map, its position, and a row of dots for progress */
.i3-load { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 0 clamp(20px, 6vw, 96px); background: var(--i3d); color: var(--t1); transition: opacity .5s cubic-bezier(.45, .05, .55, .95); }
.i3-load[hidden] { display: none; }
.i3-load.out { opacity: 0; pointer-events: none; }
.i3-load__in { width: min(760px, 100%); }
.i3-load__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.i3-load__top img { display: block; width: 187.5px; height: auto; }
.i3-load__top span { color: var(--t2); }
.i3-load__top b { font-weight: 500; color: var(--t1); }
.i3-load__map { display: block; width: 100%; aspect-ratio: 240 / 92; }
.i3-load__bar { display: grid; grid-template-columns: repeat(48, 1fr); margin-top: 26px; }
.i3-load__bar i { justify-self: center; width: 3px; height: 3px; border-radius: 50%; background: rgba(var(--rgb), .2); transition: background-color .2s; }
.i3-load__bar i.on { background: var(--t1); }
.i3-load__meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; color: var(--t2); }
.i3-load__meta span:nth-child(2) { color: var(--t1); }

/* Header */
.i3-hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100; color: var(--t1); transition: transform .35s cubic-bezier(.45, .05, .55, .95), background-color .4s, box-shadow .4s; }
.i3-hdr__r { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.i3-hdr__logo img { display: block; width: 187.5px; height: auto; }
.i3-hdr__n { display: flex; gap: 26px; margin-left: auto; }
.i3-hdr__n a { color: var(--t2); text-decoration: none; transition: color .3s; }
.i3-hdr__n a:hover { color: var(--t1); }
.i3-hdr .i3-btn { min-height: 38px; padding: 0 14px; border-radius: 7px; }
.i3-hdr.is-solid { background: rgba(var(--i3d-rgb), .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--ln); }
@media (max-width: 47.99rem) { .i3-hdr__n { display: none; } .i3-hdr .i3-btn { margin-left: auto; } .i3-hdr__logo img { width: 160px; } .i3-hdr__r { min-height: 60px; } }

/* Hero: title at the left, centred in height; the port terminal drawn as an engineering drawing on the right */
.i3-hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 96px 0 64px; overflow: hidden; }
.i3-hero__t { position: relative; z-index: 2; }
.i3-hero__t .i3-h1 { max-width: 8.4em; font-size: clamp(40px, 5.2vw, 88px); }
.i3-hero__art { position: absolute; z-index: 1; top: 0; left: 55vw; width: 120vw; pointer-events: none; transition: opacity 1s cubic-bezier(.22, 1, .36, 1); } /* size and place are set by iter3.js (placeHero) */
/* The sailing vessel: out along the front channel, about a minute per passage, fading in and out at the ends */
.i3-sail__lane { transform: translate(var(--ox), var(--oy)); }
.i3-sail { animation: i3sail 64s linear infinite; }
@keyframes i3sail { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 84% { opacity: 1; } 100% { transform: translate(823px, 475px); opacity: 0; } }
@media (max-width: 63.99rem) {
  .i3-hero { flex-direction: column; justify-content: flex-end; align-items: stretch; padding-top: 0; }
  .i3-hero__art { position: relative; top: auto; left: auto; margin-top: 64px; }
}

/* Photo band: the hero melts into a black-and-white photograph (eased stops, no visible band); the trust line sits on it */
.i3-band { position: relative; height: clamp(460px, 82vh, 1200px); overflow: hidden; display: flex; align-items: flex-start; container-type: size; }
.i3-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% min(0px, max(calc(100cqh - 59.96cqw), calc(100cqh - 66.625cqw))); filter: grayscale(1) contrast(1.08) brightness(.8); }
.i3-band::before, .i3-band::after, .i3-end::before, .i3-end::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.i3-band::before, .i3-end::before { top: 0; height: 55%; background: linear-gradient(180deg, rgba(var(--i3d-rgb), 1) 0%, rgba(var(--i3d-rgb), .987) 8.1%, rgba(var(--i3d-rgb), .951) 15.5%, rgba(var(--i3d-rgb), .896) 22.5%, rgba(var(--i3d-rgb), .825) 29%, rgba(var(--i3d-rgb), .741) 35.3%, rgba(var(--i3d-rgb), .648) 41.2%, rgba(var(--i3d-rgb), .55) 47.1%, rgba(var(--i3d-rgb), .45) 52.9%, rgba(var(--i3d-rgb), .352) 58.8%, rgba(var(--i3d-rgb), .259) 64.7%, rgba(var(--i3d-rgb), .175) 71%, rgba(var(--i3d-rgb), .104) 77.5%, rgba(var(--i3d-rgb), .049) 84.5%, rgba(var(--i3d-rgb), .013) 91.9%, rgba(var(--i3d-rgb), 0) 100%); }
.i3-band::after, .i3-end::after { bottom: 0; height: 50%; background: linear-gradient(0deg, rgba(var(--i3d-rgb), .9) 0%, rgba(var(--i3d-rgb), .82) 15%, rgba(var(--i3d-rgb), .62) 35%, rgba(var(--i3d-rgb), .36) 60%, rgba(var(--i3d-rgb), .12) 82%, rgba(var(--i3d-rgb), 0) 100%); }
.i3-band__t { position: relative; z-index: 2; padding-top: clamp(64px, 11vh, 120px); }
.i3-trust__t { max-width: 19em; margin: 0; font-size: clamp(22px, 2.4vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }

/* Sections */
.i3-sec { position: relative; padding: clamp(88px, 11vw, 160px) 0; }
.i3-split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.i3-split__h { position: sticky; top: 110px; }
.i3-split--end { align-items: end; }
.i3-split--mid { align-items: center; }
@media (max-width: 63.99rem) { .i3-split { grid-template-columns: 1fr; } .i3-split__h { position: static; } }

/* Problem: numbered rows with hairlines */
.i3-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ln); }
.i3-rows li { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 30px 0; }
.i3-rows__n { color: var(--t2); padding-top: 5px; }
.i3-rows p { margin: 10px 0 0; max-width: 36em; }
@media (max-width: 47.99rem) { .i3-rows li { grid-template-columns: 40px 1fr; } }

/* Platform: sticky story, one pillar at a time, with a photograph per pillar */
.i3-plat { position: relative; }
.i3-plat__stick { padding: clamp(88px, 11vw, 150px) 0; }
.i3-plat__g { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.i3-pil { list-style: none; margin: 40px 0 0; padding: 0; }
.i3-pil li { position: relative; padding: 18px 0; border-top: 1px solid var(--ln); }
.i3-pil__bar { position: absolute; top: -1px; left: 0; right: 0; height: 1px; overflow: hidden; }
.i3-pil__bar i { display: block; height: 100%; background: var(--t1); transform: scaleX(var(--pg, 0)); transform-origin: left; }
.i3-pil__n { float: left; width: 44px; color: var(--t2); padding-top: 5px; }
.i3-pil h3 { margin-left: 44px; transition: color .4s; }
.i3-pil p { margin: 10px 0 0 44px; }
.i3-pil__ph { display: none; }
.i3-plat__fig { position: relative; aspect-ratio: 4 / 5; max-height: 72vh; justify-self: end; width: 100%; }
.i3-plat__f { position: absolute; inset: 0; opacity: 0; transition: opacity .6s cubic-bezier(.45, .05, .55, .95); }
.i3-plat__f .i3-ph { height: 100%; }
.i3-plat__f.on { opacity: 1; }
.i3-plat__cap { position: absolute; left: 0; bottom: -34px; color: var(--t2); }
@media (min-width: 64rem) {
  .i3-plat { height: calc(var(--n) * 90vh + 100vh); }
  .i3-plat__stick { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 72px 0 0; }
  .i3-pil li:not(.on) h3 { color: var(--t2); }
  .i3-pil li p { display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition: grid-template-rows .5s cubic-bezier(.66, 0, .15, 1), opacity .4s, margin .5s cubic-bezier(.66, 0, .15, 1); }
  .i3-pil li.on p { grid-template-rows: 1fr; margin-top: 10px; opacity: 1; }
}
@media (max-width: 63.99rem) {
  .i3-plat__g { grid-template-columns: 1fr; }
  .i3-plat__fig { display: none; }
  .i3-pil__ph { display: block; margin: 22px 0 8px 44px; aspect-ratio: 3 / 2; }
  .i3-pil__bar i { transform: scaleX(1); }
}

/* Voyage: one bulk carrier sails a dotted route through the six modules; each module shows its scene */
.i3-voy { position: relative; height: 640vh; }
.i3-voy__stick { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.i3-voy__sea { position: absolute; inset: 0; background: radial-gradient(rgba(var(--i3w), .07) 1px, transparent 1.4px) 0 0 / 14px 14px, var(--i3d); -webkit-mask: radial-gradient(120% 90% at 50% 50%, #000 55%, transparent 100%); mask: radial-gradient(120% 90% at 50% 50%, #000 55%, transparent 100%); }
.i3-voy__head { position: absolute; left: 0; right: 0; top: clamp(84px, 12vh, 120px); z-index: 2; text-align: center; }
.i3-voy__map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.i3-voy__route { fill: none; stroke: rgba(var(--i3w), .5); stroke-width: 1.5; stroke-dasharray: 0 6; stroke-linecap: round; }
.i3-voy__done { fill: none; stroke: rgb(var(--i3w)); stroke-width: 1; stroke-linecap: round; }
.i3-wp circle { fill: var(--i3d); stroke: rgba(var(--i3w), .5); stroke-width: 1; transition: fill .4s, stroke .4s; }
.i3-wp text { paint-order: stroke; stroke: var(--i3d); stroke-width: 5px; stroke-linejoin: round; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; fill: rgba(var(--i3w), .62); font-family: "Hanken Grotesk", sans-serif; transition: fill .4s; }
.i3-wp.past circle { fill: rgb(var(--i3w)); stroke: rgb(var(--i3w)); }
.i3-wp.past text { fill: rgb(var(--i3w)); }
.i3-wp.cur circle { fill: var(--i3a); stroke: var(--i3a); }
.i3-wp--end circle { fill: rgb(var(--i3w)); stroke: none; }
.i3-wp--end text { text-anchor: middle; }
.i3-ship path, .i3-ship rect, .i3-ship circle { vector-effect: non-scaling-stroke; }
.i3-ship__hull { fill: var(--i3d); stroke: rgb(var(--i3w)); stroke-width: 1; }
.i3-ship__plate { fill: url(#i3plate); stroke: none; }
.i3-ship__coam { fill: none; stroke: rgba(var(--i3w), .4); stroke-width: 1; }
.i3-ship__hatch { fill: var(--i3d); stroke: rgba(var(--i3w), .92); stroke-width: 1; }
.i3-ship__seam, .i3-ship__line { fill: none; stroke: rgba(var(--i3w), .42); stroke-width: 1; }
.i3-ship__w, .i3-ship__pin { fill: rgba(var(--i3w), .75); }
.i3-ship__crane circle:not(.i3-ship__pin) { fill: var(--i3d); stroke: rgb(var(--i3w)); stroke-width: 1; }
.i3-ship__crane path { fill: none; stroke: rgb(var(--i3w)); stroke-width: 1; }
.i3-ship__acc { fill: var(--i3d); stroke: rgb(var(--i3w)); stroke-width: 1; }
.i3-ship__acc2 { fill: none; stroke: rgba(var(--i3w), .45); stroke-width: 1; }
.i3-ship__win { fill: rgba(var(--i3w), .8); }
.i3-ship__fun { fill: var(--i3a); stroke: none; }
.i3-ship__wake path { fill: none; stroke: rgba(var(--i3w), .38); stroke-width: 1.2; stroke-dasharray: 0 6; stroke-linecap: round; animation: i3wake 1.4s linear infinite; }
@keyframes i3wake { to { stroke-dashoffset: -12; } }
.i3-voy__cards { position: absolute; z-index: 2; left: clamp(20px, 4vw, 56px); top: 30%; width: min(400px, 30vw); }
.i3-mod { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; transform: translateY(14px); transition: opacity .45s cubic-bezier(.45, .05, .55, .95), transform .6s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.i3-mod.on { opacity: 1; transform: none; }
.i3-mod__art { padding: 14px 0 18px; border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); margin-bottom: 18px; }
.i3-mod__art .ia-wrap { max-height: 30vh; display: grid; place-items: center; }
.i3-mod__art .ia { max-height: 30vh; width: auto; max-width: 100%; }
.i3-mod__k { display: flex; gap: 12px; margin: 0 0 12px; color: var(--t2); }
.i3-mod p { margin: 10px 0 0; }
.i3-voy__read { position: absolute; z-index: 2; right: clamp(20px, 4vw, 56px); bottom: clamp(24px, 5vh, 48px); display: grid; gap: 6px; text-align: right; color: var(--t2); }
.i3-voy__read b { font-weight: 500; color: var(--t1); }
@media (max-width: 63.99rem) { .i3-voy__cards { width: min(340px, 34vw); } }
@media (max-width: 47.99rem) {
  .i3-voy { height: 560vh; }
  .i3-voy__head .i3-h2 { font-size: 30px; }
  .i3-voy__cards { left: 20px; right: 20px; top: auto; bottom: 64px; width: auto; height: 170px; }
  .i3-mod__art { display: none; }
  .i3-mod { padding-top: 16px; border-top: 1px solid var(--ln); }
  .i3-voy__read { left: 20px; right: 20px; bottom: 18px; grid-auto-flow: column; justify-content: space-between; text-align: left; }
  .i3-wp text { font-size: 9.5px; }
}

/* Who it's for: rows; on desktop the row's photograph follows the pointer in the right-hand column */
.i3-who { position: relative; list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--ln); }
.i3-who li[data-who] { position: relative; display: grid; grid-template-columns: 4fr 5fr 3fr; gap: 24px; align-items: baseline; padding: 34px 0; border-bottom: 1px solid var(--ln); transition: opacity .4s; }
.i3-who p { margin: 0; }
.i3-who__ph { display: none; }
.i3-who__float { position: absolute; top: 0; right: 0; width: 22%; aspect-ratio: 4 / 3; pointer-events: none; opacity: 0; transition: opacity .35s; }
.i3-who__float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; filter: grayscale(1) contrast(1.06); opacity: 0; transition: opacity .35s; }
.i3-who__float img.on { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .i3-who.is-on .i3-who__float { opacity: 1; }
  .i3-who:hover li[data-who]:not(:hover) { opacity: .4; }
}
@media (max-width: 63.99rem), (hover: none) {
  .i3-who li[data-who] { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .i3-who__float { display: none; }
  .i3-who__ph { display: block; width: min(320px, 100%); aspect-ratio: 3 / 2; margin-top: 10px; }
}

/* Integrations: heading and paragraph share a bottom edge; hairline cells with a dot in every corner */
.i3-logos { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.i3-logos li { position: relative; display: grid; place-items: center; align-content: center; gap: 14px; aspect-ratio: 329 / 196; margin: 0 -1px -1px 0; border: 1px solid var(--ln); opacity: 0; transition: opacity .8s, background-color .4s; }
.i3-logos li.in { opacity: 1; }
.i3-logos li:nth-child(2) { transition-delay: .08s; } .i3-logos li:nth-child(3) { transition-delay: .16s; } .i3-logos li:nth-child(4) { transition-delay: .24s; } .i3-logos li:nth-child(5) { transition-delay: .32s; }
.i3-logos i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--t2); }
.i3-logos i:nth-child(1) { top: 6px; left: 6px; } .i3-logos i:nth-child(2) { top: 6px; right: 6px; } .i3-logos i:nth-child(3) { bottom: 6px; left: 6px; } .i3-logos i:nth-child(4) { bottom: 6px; right: 6px; }
.i3-logos img { width: 44px; height: 44px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; }
.i3-logos span { color: var(--t2); }
@media (hover: hover) and (pointer: fine) { .i3-logos li:hover { background: rgba(var(--rgb), .035); } .i3-logos li:hover img { filter: none; opacity: 1; } }
@media (hover: none) { .i3-logos img { filter: none; opacity: 1; } }
@media (max-width: 47.99rem) { .i3-logos { grid-template-columns: repeat(2, 1fr); } .i3-logos li:last-child { grid-column: 1 / -1; aspect-ratio: auto; padding: 28px 0; } }

/* Security: the on-premise vault, drawn as an engineering drawing */
.i3-sec--sec { overflow: hidden; }
.i3-sec__art { width: 100%; }

/* Closing call to action, over a black-and-white photograph */
.i3-end { position: relative; padding: clamp(140px, 20vw, 260px) 0; overflow: hidden; text-align: center; }
.i3-end__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.5); }
.i3-end .i3-wrap::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(980px, 120%); height: 150%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(var(--i3d-rgb), .72), rgba(var(--i3d-rgb), .4) 60%, rgba(var(--i3d-rgb), 0)); }
.i3-end .i3-wrap { position: relative; z-index: 2; }

/* Footer */
.i3-foot { padding: clamp(64px, 8vw, 110px) 0 0; overflow: hidden; }
.i3-foot__g { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--ln); }
.i3-foot__a img { display: block; width: 200px; height: auto; margin-bottom: 18px; }
.i3-foot__c { display: grid; align-content: start; gap: 10px; }
.i3-foot__c span, .i3-foot__map span { color: var(--t2); margin-bottom: 6px; }
.i3-foot__c a { color: var(--t1); text-decoration: none; font-size: 16px; }
.i3-foot__c a:hover { text-decoration: underline; text-underline-offset: 4px; }
.i3-foot__line { margin: 0; max-width: 22em; }
.i3-foot__map { display: grid; gap: 10px; }
.i3-foot__map canvas { display: block; width: 100%; aspect-ratio: 240 / 92; }
.i3-foot__map span { order: 2; margin: 0; }
.i3-foot__legal { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; color: var(--t2); }
.i3-foot__legal span { display: inline-flex; align-items: center; gap: 10px; }
.i3-foot__legal img { display: block; height: 15px; width: auto; }
.i3-foot__word { display: block; width: 100%; height: clamp(90px, 17vw, 290px); color: rgb(var(--i3ink)); }
@media (max-width: 63.99rem) { .i3-foot__g { grid-template-columns: 1fr 1fr; } }
@media (max-width: 29.99rem) { .i3-foot__g { grid-template-columns: 1fr; } .i3-foot__legal { flex-direction: column; align-items: flex-start; } }

@media (prefers-reduced-motion: reduce) {
  .i3-ship__wake path, .i3-sail { animation: none; }
  .i3-sail { transform: translate(380px, 219px); }
  [data-up], .i3-logos li { opacity: 1; transform: none; transition: none; }
  .i3-rule { transform: none; transition: none; }
  .i3-ph img { clip-path: none; transform: none; transition: none; }
}

/* ---------- Iteration 5 · Minimal (built from Dots; dark throughout, no top navigation) ---------- */
.i5-k__t { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-top: clamp(40px, 6vw, 72px); }
.i5-k__t .i3-lead { max-width: 34em; }
@media (max-width: 47.99rem) { .i5-k__t { grid-template-columns: 1fr; } .i5-k__art { margin-inline: -12px; } }

/* Floating bar: one line and the one call to action, like a pre-order bar; slides in once the hero's buttons are gone */
.i5-bar { position: fixed; z-index: 50; left: 50%; bottom: max(40px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 20px; padding: 10px 10px 10px 24px; border-radius: 14px; border: .5px solid rgba(var(--i3w), .22); background: linear-gradient(180deg, rgba(var(--i3d-rgb), .72), rgba(var(--i3d-rgb), .86)), rgba(var(--i3w), .04); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); color: rgb(var(--i3w)); box-shadow: 0 18px 48px rgba(0, 0, 0, .35); transform: translate(-50%, 24px); opacity: 0; visibility: hidden; transition: transform .5s cubic-bezier(.23, 1, .32, 1), opacity .35s ease, visibility 0s .5s; }
.i5-bar.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .5s cubic-bezier(.23, 1, .32, 1), opacity .35s ease, visibility 0s; }
.i5-bar p { margin: 0; font-size: 16px; font-weight: 500; white-space: nowrap; }
.i5-bar .i3-btn { min-height: 44px; }
@media (max-width: 47.99rem) {
  /* phones and small tablets: centred, never wider than 480px; the text fills the space and the button sits at the right */
  .i5-bar { left: 50%; right: auto; width: min(calc(100% - 32px), 480px); bottom: max(12px, env(safe-area-inset-bottom)); gap: 12px; padding: 8px 8px 8px 16px; transform: translate(-50%, 24px); }
  .i5-bar.on { transform: translate(-50%, 0); }
  .i5-bar p { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.25; white-space: normal; }
  .i5-bar .i3-btn { flex: none; }
  html[data-min] .opt { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px); }
}
@media (prefers-reduced-motion: reduce) { .i5-bar, .i5-bar.on { transition: opacity .2s, visibility 0s; } }

/* Footer: short and centred */
.i5-foot { padding: clamp(72px, 9vw, 120px) 0 clamp(120px, 12vw, 160px); border-top: 1px solid var(--ln); text-align: center; }
.i5-foot .i3-wrap { display: grid; justify-items: center; gap: 28px; }
.i5-foot__line { margin: 0; max-width: 32em; font-size: 17px; color: var(--t2); }
.i5-foot__logo { display: block; width: 210px; }
.i5-foot__logo img { display: block; width: 100%; height: auto; }
.i5-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; }
.i5-foot__links a { color: var(--t2); font-size: 14px; text-decoration: none; }
.i5-foot__links a:hover { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; }
.i5-foot__legal { margin: 0; font-size: 13px; color: var(--t2); }
.i5-foot a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Minimal: one plain ground everywhere (near-black, no pattern); sections add no background of their own and the
   photographs dissolve into it at the top and bottom. */
html[data-min] body { background: var(--i3d); }
html[data-min] .i3-dark { background: transparent; }
html[data-min] .i3-voy__sea { display: none; }
html[data-min] .i3-band::before, html[data-min] .i3-end::before, html[data-min] .i3-band::after, html[data-min] .i3-end::after { display: none; }
html[data-min] .i3-band__img, html[data-min] .i3-end__img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%); }
/* Minimal: everything centred */
html[data-min] .i3-hero { flex-direction: column; justify-content: center; align-items: stretch; text-align: center; padding: clamp(96px, 14vh, 150px) 0 0; min-height: auto; }
html[data-min] .i3-hero__t { order: 1; }
html[data-min] .i3-hero__t .i3-h1 { max-width: 11em; margin-inline: auto; }
html[data-min] .i3-hero__t .i3-lead { margin-inline: auto; }
html[data-min] .i3-hero .i3-cta { justify-content: center; }
html[data-min] .i3-hero { height: 100svh; min-height: 520px; justify-content: flex-start; }
html[data-min] .i3-hero__art { position: absolute; margin: 0; } /* size and place set by placeHero so the whole ship fits above the floating bar */
html[data-min] .i3-band { align-items: flex-start; }
html[data-min] .i3-band__t { text-align: center; }
html[data-min] .i3-trust__t { margin-inline: auto; }
html[data-min] .i3-voy__cards { left: 50%; right: auto; top: auto; bottom: clamp(84px, 13vh, 130px); width: min(520px, calc(100% - 40px)); height: 150px; transform: translateX(-50%); text-align: center; }
html[data-min] .i3-mod__k { justify-content: center; }
html[data-min] .i3-mod .i3-mod__art { display: none; }
html[data-min] .i3-voy__read { left: 50%; right: auto; bottom: clamp(24px, 5vh, 44px); transform: translateX(-50%); grid-auto-flow: column; gap: 28px; text-align: center; white-space: nowrap; }
html[data-min] .i5-k__t { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
html[data-min] .i5-k__t .i3-lead { max-width: 36em; }
@media (max-width: 47.99rem) {
  html[data-min] .i3-voy__cards { bottom: 64px; height: 170px; }
  html[data-min] .i3-voy__read { bottom: 18px; }
}
html[data-min] .i3-trust__t { max-width: 15em; } /* narrower when centred, so it stays clear of the ship's mast */
html[data-min] .i3-band__t { padding-top: clamp(32px, 5vh, 64px); } /* centred text sits higher, in the photo's dissolved top */
html[data-min] .i5-k__t { margin-top: 0; }
html[data-min] .i5-k { padding-bottom: clamp(24px, 4vw, 56px); }
/* Minimal: the pinned voyage stage keeps its readout and stage text above the floating bar's zone */
html[data-min] .i3-voy__cards { bottom: calc(max(40px, env(safe-area-inset-bottom)) + 66px + 64px); height: 140px; }
html[data-min] .i3-voy__read { bottom: calc(max(40px, env(safe-area-inset-bottom)) + 66px + 22px); }
@media (max-width: 47.99rem) {
  html[data-min] .i3-voy__cards { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px + 54px); height: 150px; }
  html[data-min] .i3-voy__read { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px + 18px); }
}
/* closing: headline and button, then the Kaundinya image as its own figure. The figure is pulled up under the text only by
   the height of its empty sky (the ship's mast tip is 43.6% down the image), so the ship always sits below the button. */
.i5-end { position: relative; padding-top: clamp(110px, 14vw, 200px); text-align: center; }
.i5-end .i3-wrap { position: relative; z-index: 2; }
.i5-end__fig { position: relative; z-index: 1; height: 57.14vw; margin: -18vw 0 0; }
.i5-end__fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 100%; filter: grayscale(1) contrast(1.04); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 82%, transparent 100%); }
@media (max-width: 47.99rem) { .i5-end__fig { height: 92vw; margin-top: -30vw; } }

/* Minimal on short screens (landscape phones): a tighter hero so the whole ship still fits above the bar */
@media (max-height: 520px) {
  html[data-min] .i3-hero { padding-top: 22px; }
  html[data-min] .i3-hero__t .i3-h1 { max-width: 18em; font-size: clamp(24px, 7.5vh, 40px); }
  html[data-min] .i3-hero__t .i3-lead { margin-top: 6px; font-size: 14px; }
  html[data-min] .i5-bar { bottom: max(10px, env(safe-area-inset-bottom)); padding: 6px 6px 6px 18px; }
  html[data-min] .i5-bar .i3-btn { min-height: 38px; }
}

/* Minimal: neutral black ground that matches the black-and-white photograph, so the image melts into it */
html[data-min][data-it="3"][data-pal] { --i3d: #0a0a0a; --i3d-rgb: 10, 10, 10; }
html[data-min] body { background: #0a0a0a; }
html[data-min] .i5-end__fig img { filter: grayscale(1) brightness(.8) contrast(1.35); }

/* Minimal accent: blue-violet, only on the line art's highlights and moving parts (hatch and conveyor highlights, the
   sailing vessel, the voyage route as it fills in, the current waypoint), plus the heading reveal */
html[data-min][data-it="3"][data-pal] { --i3a: #8900ff; --i3a-rgb: 137, 0, 255; --i3a-h: 272; --i3a2: #4f6bff; }
/* Minimal accent options (Options → Accent): each is a pair, deep to bright, used for the route's gradient */
html[data-min][data-it="3"][data-pal][data-macc="blue"] { --i3a: #0051ff; --i3a-rgb: 0, 81, 255; --i3a-h: 221; --i3a2: #0036b0; }
html[data-min][data-it="3"][data-pal][data-macc="teal"] { --i3a: #2fd4b4; --i3a-rgb: 47, 212, 180; --i3a-h: 168; --i3a2: #137a72; }
html[data-min][data-it="3"][data-pal][data-macc="orange"] { --i3a: #ff6a2b; --i3a-rgb: 255, 106, 43; --i3a-h: 18; --i3a2: #b8400c; }
html[data-min][data-it="3"][data-pal][data-macc="white"] { --i3a: #f5f3ef; --i3a-rgb: 245, 243, 239; --i3a-h: 40; --i3a2: #7a7a7a; }
html[data-min][data-it="3"][data-rev] { --rv: var(--i3a-rgb); } /* the heading reveal follows the chosen accent */
.i5-s0 { stop-color: var(--i3a2, #4f6bff); } .i5-s1 { stop-color: var(--i3a, #8900ff); }
/* Options in Minimal: only Iteration and Accent */
.opt__r--5 { display: none; }
html[data-min] .opt__r--5 { display: flex; }
html[data-min] .opt__r:not(.opt__r--5):not(:first-child) { display: none; }
.opt__dot--grad::before { background: linear-gradient(135deg, var(--d), var(--c)); }
html[data-min] .i3-voy__done { stroke: url(#i5-route); stroke-width: 1.6; }

/* Minimal grid, after Line art image: dashed rails at the content width through every section, a rule between sections,
   and content set in ruled cells */
html[data-min] { --rail: calc(min(100vw, 1320px) - 2 * clamp(20px, 4vw, 56px)); --gl: rgba(245, 243, 239, .11); }
html[data-min] .i5 > section, html[data-min] .i5-foot { position: relative; isolation: isolate; }
html[data-min] .i5 > section + section, html[data-min] .i5-foot { border-top: 1px solid var(--gl); }
html[data-min] .i5 > section::before, html[data-min] .i5-foot::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--rail); height: auto; transform: translateX(-50%); border-inline: 1px dashed var(--gl); background: none; pointer-events: none; z-index: 1; }
html[data-min] .i5-k__t { border-block: 1px solid var(--gl); padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px); margin-inline: calc(-1 * clamp(0px, 0vw, 0px)); }
html[data-min] .i5-foot__links { gap: 1px; background: var(--gl); border: 1px solid var(--gl); }
html[data-min] .i5-foot__links a { padding: 14px 24px; background: #0a0a0a; }
/* Minimal hero: the drawing's grid box. Horizontal rules run the full width above and below it and cross the dashed rails,
   with a small mark at each crossing; top and height are set by placeHero */
html[data-min] .i5-frame { position: absolute; left: 0; right: 0; z-index: 0; border-block: 1px solid var(--gl); pointer-events: none; }
html[data-min] .i5-frame::before, html[data-min] .i5-frame::after { content: ""; position: absolute; left: 50%; width: calc(var(--rail) + 9px); height: 9px; transform: translateX(-50%); background: linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 0 50% / 9px 1px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 4px 0 / 1px 9px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 100% 50% / 9px 1px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) calc(100% - 4px) 0 / 1px 9px no-repeat; }
html[data-min] .i5-frame::before { top: -5px; }
html[data-min] .i5-frame::after { bottom: -5px; }
html[data-min] .i3-hero__art { z-index: 1; }
html[data-min] .i5-foot__links a.i5-foot__z42 { display: grid; place-items: center; }
html[data-min] .i5-foot__z42 img { display: block; width: 76px; height: auto; opacity: .8; transition: opacity .2s; }
html[data-min] .i5-foot__z42:hover img { opacity: 1; }
/* Minimal ship band: on narrower screens the photo is cropped from the left so the bow and most of the hull show */
@media (max-width: 63.99rem) { html[data-min] .i3-band__img { object-position: 24% min(0px, max(calc(100cqh - 59.96cqw), calc(100cqh - 66.625cqw))); } }
@media (max-width: 47.99rem) { html[data-min] .i3-band__img { object-position: 14% min(0px, max(calc(100cqh - 59.96cqw), calc(100cqh - 66.625cqw))); } }

/* Minimal voyage: the stage's grid box (placed by the voyage layout); the module text sits left in its cell */
.i5-vframe { display: none; }
html[data-min] .i5-vframe { display: block; z-index: 1; }
html[data-min] .i5-vdiv { position: absolute; background: var(--gl); }
html[data-min] .i3-voy__cards { text-align: left; }
html[data-min] .i3-mod__k { justify-content: flex-start; }
html[data-min] .i3-mod { border-top: 0; padding-top: 0; }
html[data-min] .i3-mod h3 { font-size: clamp(22px, 2vw, 30px); }
html[data-min] .i3-voy__read { gap: 24px; justify-content: flex-start; }
/* Minimal accent, simplified: on the conveyor only the one animated flow line keeps the accent; its rails and the silo-roof
   hatching return to the neutral line colour, and the travelling dots are dropped. The hold highlights on the ship stay. */
html[data-min] .i3-hero .ia .acc:not(.accf) { stroke: rgba(var(--rgb), .55) !important; }
html[data-min] .i3-hero .ia .dot-m { display: none; }
html[data-min] .i3-hero .ia .flow { stroke: var(--i3a); stroke-width: 1.4; stroke-opacity: 1; }

/* Minimal on phones: the voyage becomes a vertical timeline in ruled rows (no pinned map) */
.i5-vlist { display: none; }
@media (max-width: 47.99rem) {
  html[data-min] .i3-voy { height: auto; }
  html[data-min] .i3-voy__stick { position: relative; height: auto; overflow: visible; padding: 88px 0 72px; }
  html[data-min] .i3-voy__head { position: static; }
  html[data-min] .i3-voy__map, html[data-min] .i3-voy__cards, html[data-min] .i3-voy__read, html[data-min] .i5-vframe { display: none; }
  html[data-min] .i5-vlist { display: block; position: relative; width: var(--rail); margin: 40px auto 0; border-block: 1px solid var(--gl); }
  html[data-min] .i5-vlist::before, html[data-min] .i5-vlist::after { content: ""; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); height: 1px; background: var(--gl); }
  html[data-min] .i5-vlist::before { top: -1px; } html[data-min] .i5-vlist::after { bottom: -1px; }
  html[data-min] .i5-vlist ol { list-style: none; margin: 0; padding: 0; }
  html[data-min] .i5-vlist li { position: relative; padding: 26px 20px 28px 64px; border-top: 1px solid var(--gl); }
  html[data-min] .i5-vlist li .i3-mod__k { margin: 0 0 8px; color: var(--t2); transition: color .3s; }
  html[data-min] .i5-vlist li h3 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--t2); transition: color .3s; }
  html[data-min] .i5-vlist li p:last-child { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--t2); }
  html[data-min] .i5-vlist li.on h3 { color: var(--t1); }
  html[data-min] .i5-vlist li.on .i3-mod__k span { color: var(--i3a); }
  html[data-min] .i5-vlist__end { position: relative; margin: 0; padding: 18px 20px 18px 64px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); }
  html[data-min] .i5-vlist__node { position: absolute; left: 28px; top: 30px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; border: 1px solid rgba(var(--rgb), .5); background: var(--i3d); z-index: 2; transition: background .3s, border-color .3s; }
  html[data-min] .i5-vlist li.on .i5-vlist__node { background: var(--i3a); border-color: var(--i3a); }
  html[data-min] .i5-vlist__track { position: absolute; left: 28px; top: 26px; bottom: 26px; width: 0; border-left: 1px dashed rgba(var(--rgb), .3); z-index: 1; }
  html[data-min] .i5-vlist__done { position: absolute; left: -1px; top: 0; width: 1.5px; height: 0; background: linear-gradient(var(--i3a2, #4f6bff), var(--i3a)); }
  html[data-min] .i5-vship { position: absolute; left: 0; top: 0; width: 20px; height: auto; transform: translate(-50%, -14px); z-index: 3; overflow: visible; }
}

/* Minimal footer: the link row's rules run the full width, like every other grid line; the line above it sits on two
   balanced lines, clear of the rails */
html[data-min] .i5-foot__links { position: relative; }
html[data-min] .i5-foot__links::before { content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 100vw; transform: translateX(-50%); border-block: 1px solid var(--gl); pointer-events: none; }
html[data-min] .i5-foot__line { max-width: 19em; text-wrap: balance; padding-inline: 12px; }
/* Minimal footer links, in the grid itself (no box): the row spans the rails, ruled edge to edge above and below, with one
   divider between the two links */
html[data-min] .i5-foot .i3-wrap { padding-inline: 0; max-width: none; }
html[data-min] .i5-foot__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: var(--rail); background: none; border: 0; }
html[data-min] .i5-foot__links a { display: grid; place-items: center; padding: 26px 16px; background: none; }
html[data-min] .i5-foot__links a + a { border-left: 1px solid var(--gl); }
html[data-min] .i5-foot__line, html[data-min] .i5-foot__legal { padding-inline: 20px; }

/* Minimal button variant "3D" (Options → Button): white fill blending into a faint accent tint at the foot, a thin gradient
   stroke in the accent (strongest along the bottom edge), and a solid shadow beneath in a darker shade of the same accent (never a second colour) so it sits slightly raised;
   it presses down on click */
html[data-min][data-mbtn="lift"] .i3-btn--w {
  --i3a-d: color-mix(in srgb, var(--i3a) 58%, #000);
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, #f5f3ef 0%, #f5f3ef 52%, color-mix(in srgb, var(--i3a) 9%, #f5f3ef) 100%) padding-box,
    linear-gradient(180deg, rgba(var(--i3a-rgb), .18) 0%, rgba(var(--i3a-rgb), .55) 60%, var(--i3a) 100%) border-box;
  box-shadow: 0 3px 0 0 var(--i3a-d), 0 8px 18px -6px rgba(var(--i3a-rgb), .45);
  transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter .2s;
}
@media (hover: hover) and (pointer: fine) { html[data-min][data-mbtn="lift"] .i3-btn--w:hover { filter: brightness(1.03); } }
html[data-min][data-mbtn="lift"] .i3-btn--w:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--i3a-d), 0 4px 10px -6px rgba(var(--i3a-rgb), .45); }
/* 3D button inside the floating bar: a shallower 2px shadow, and the button plus its shadow treated as one object, so the
   bar's padding above, below and to the right of it measures the same (the bottom padding carries the shadow's 2px) */
html[data-min][data-mbtn="lift"] .i5-bar .i3-btn--w { box-shadow: 0 2px 0 0 var(--i3a-d), 0 6px 14px -8px rgba(var(--i3a-rgb), .4); }
html[data-min][data-mbtn="lift"] .i5-bar .i3-btn--w:active { box-shadow: 0 0 0 0 var(--i3a-d); transform: translateY(2px); }
html[data-min][data-mbtn="lift"] .i5-bar { padding: 12px 12px 14px 24px; }
@media (max-width: 47.99rem) { html[data-min][data-mbtn="lift"] .i5-bar { padding: 10px 10px 12px 16px; } }
@media (max-height: 520px) { html[data-min][data-mbtn="lift"] .i5-bar { padding: 8px 8px 10px 18px; } }

/* Minimal: the line under the voyage heading */
html[data-min] .i5-voy__s { margin: 14px auto 0; max-width: 34ch; text-align: center; }

/* Minimal on phones: a tighter button so "Start the revolution" leaves the bar text two lines at most;
   on the narrowest phones the button carries the bar alone */
@media (max-width: 47.99rem) { html[data-min] .i5-bar .i3-btn { padding: 0 14px; letter-spacing: .04em; font-size: 12px; } }
@media (max-width: 359px) { html[data-min] .i5-bar p { display: none; } html[data-min] .i5-bar .i3-btn { flex: 1; } }
html[data-min] .i5-line { display: block; }

/* Minimal, Options → Voyage → Illustration: the network drawing (no labels) in a ruled grid box replaces the stage text,
   the route and the phone timeline. Nothing is pinned, so the section is as tall as its content. */
.i5-vart { display: none; }
html[data-min][data-mvoy="art"] .i3-voy { height: auto; }
html[data-min][data-mvoy="art"] .i3-voy__stick { position: relative; height: auto; overflow: visible; padding: clamp(88px, 12vh, 120px) 0 clamp(72px, 10vh, 112px); }
html[data-min][data-mvoy="art"] .i3-voy__head { position: static; }
html[data-min][data-mvoy="art"] :is(.i3-voy__map, .i3-voy__cards, .i3-voy__read, .i5-vframe, .i5-vlist) { display: none; }
html[data-min][data-mvoy="art"] .i5-vart { display: block; position: relative; z-index: 2; margin: clamp(40px, 5vw, 56px) 0 0; border-block: 1px solid var(--gl); }
html[data-min] .i5-vart::before, html[data-min] .i5-vart::after { content: ""; position: absolute; left: 50%; width: calc(var(--rail) + 9px); height: 9px; transform: translateX(-50%); background: linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 0 50% / 9px 1px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 4px 0 / 1px 9px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 100% 50% / 9px 1px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) calc(100% - 4px) 0 / 1px 9px no-repeat; }
html[data-min] .i5-vart::before { top: -5px; }
html[data-min] .i5-vart::after { bottom: -5px; }
html[data-min] .i5-vart__in { width: var(--rail); margin: 0 auto; padding: clamp(16px, 4vw, 56px) clamp(0px, 3vw, 48px); }
html[data-min] .i5-vart .i3-art { max-width: min(1040px, calc((100svh - 430px) * 1.54)); min-width: min(100%, 320px); margin: 0 auto; }

/* Minimal: the Hullstack logo above the hero heading */
html[data-min] .i5-hero__logo { display: block; width: clamp(187.5px, 18.75vw, 275px); height: auto; margin: 0 auto clamp(20px, 3vh, 32px); }
html[data-min] .i5-hero__logo img { display: block; width: 100%; height: auto; }
html[data-min] .i5-lk { position: relative; }
/* Framed logo: the team's framed logo file in the current accent, in an SVG that shares the plain logo's box and viewBox.
   The plain image is hidden (still read by screen readers) while Framed is on. */
html[data-min] .i5-sel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
html[data-min][data-mlogo="frame"] .i5-sel { display: block; }
html[data-min][data-mlogo="frame"] .i5-lk > img { opacity: 0; }
html[data-min] .i5-sel image { display: none; }
html[data-min][data-macc="violet"] .i5-sel__violet, html[data-min][data-macc="blue"] .i5-sel__blue, html[data-min][data-macc="teal"] .i5-sel__teal,
html[data-min][data-macc="orange"] .i5-sel__orange, html[data-min][data-macc="white"] .i5-sel__white { display: inline; }
@media (max-height: 700px) { html[data-min] .i5-hero__logo { width: 170px; margin-bottom: 14px; } }
@media (max-height: 520px) { html[data-min] .i5-hero__logo { width: 160px; margin-bottom: 12px; } }