/* ==========================================================================
   iDepoz website - one page.

   The look is the iDepoz login page's (ncl.depo/index.php, 2026-10-02): the
   isometric depot scene behind everything, one picture per theme, and blurred
   glass in front of it. LIGHT is the app's teal and green, DARK is charcoal
   with the containers' orange - the user's rule for every branded screen.

   The scene is fixed behind the page. The first screen shows it clearly, with
   the lights on the road and the four stage tags of the login; scrolling down
   lays a veil of the ground colour over it, and every panel below is glass.
   ========================================================================== */

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/barlow-condensed-700.woff2) format("woff2");
}

:root {
	--ground: #e2e6dd;             /* the picture's own floor, so nothing flashes before it loads */
	--ink: #10262c;
	--muted: #46585c;
	--faint: #6b7c80;
	/* the hero box: the login's glass, a touch thicker for a paragraph of words */
	--glass: rgba(255, 255, 255, .40);
	--glass-solid: rgba(246, 249, 244, .94);
	--glass-line: rgba(255, 255, 255, .66);
	--glass-rule: rgba(16, 38, 44, .13);
	--glass-shadow: 0 34px 70px -24px rgba(15, 76, 92, .42), 0 2px 8px rgba(15, 76, 92, .10);
	/* the panels further down: the app's Glass look (white 62%, blur 18, saturate 140%) */
	--panel: rgba(255, 255, 255, .62);
	--panel-solid: #f7faf8;
	--panel-line: rgba(255, 255, 255, .75);
	--panel-shadow: 0 1px 2px rgba(15, 40, 50, .06), 0 10px 30px rgba(15, 40, 50, .08);
	--band: rgba(15, 76, 92, .05);
	--veil: rgba(226, 232, 226, .74);
	--bar: rgba(255, 255, 255, .30);
	--bar-on: rgba(255, 255, 255, .66);
	--bar-line: rgba(255, 255, 255, .55);
	--field: rgba(255, 255, 255, .72);
	--field-line: rgba(15, 76, 92, .26);
	--hover: rgba(15, 76, 92, .07);
	--tint: rgba(15, 76, 92, .09);
	--icon-ink: #0f4c5c;
	--accent: #2f966a;             /* lines, lights, focus rings */
	--accent-text: #24734f;
	--plate: #0f4c5c;              /* the tags and the main button */
	--plate-ink: #ffffff;
	--chip: #42b883;               /* the number on a tag */
	--chip-ink: #06281f;
	--lamp: #17835a;               /* the lights on the road */
	--lamp-glow: rgba(66, 184, 131, .45);
	--paper-dim: none;
	--bad: #a3271b;
	--bad-wash: rgba(180, 35, 24, .08);
	--ui: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
	--bar-h: 68px;
	color-scheme: light;
}
:root[data-theme="dark"] {
	--ground: #212428;
	--ink: #f3f1ec;
	--muted: #b9bdc3;
	--faint: #8f959c;
	--glass: rgba(18, 20, 23, .46);
	--glass-solid: rgba(23, 25, 28, .94);
	--glass-line: rgba(255, 255, 255, .17);
	--glass-rule: rgba(255, 255, 255, .11);
	--glass-shadow: 0 34px 70px -24px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .30);
	--panel: rgba(20, 24, 27, .58);
	--panel-solid: #181b1f;
	--panel-line: rgba(255, 255, 255, .09);
	--panel-shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 30px rgba(0, 0, 0, .35);
	--band: rgba(255, 255, 255, .035);
	--veil: rgba(17, 19, 22, .76);
	--bar: rgba(18, 20, 23, .34);
	--bar-on: rgba(14, 16, 19, .78);
	--bar-line: rgba(255, 255, 255, .08);
	--field: rgba(0, 0, 0, .30);
	--field-line: rgba(255, 255, 255, .20);
	--hover: rgba(255, 255, 255, .06);
	--tint: rgba(249, 115, 22, .14);
	--icon-ink: #fb923c;
	--accent: #f97316;
	--accent-text: #fb923c;
	--plate: #f97316;
	--plate-ink: #1b1206;
	--chip: #1b1206;
	--chip-ink: #f97316;
	--lamp: #fff3e6;
	--lamp-glow: rgba(249, 115, 22, .55);
	--paper-dim: brightness(.9);
	--bad: #ffa397;
	--bad-wash: rgba(255, 110, 90, .13);
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
	margin: 0; min-height: 100vh;
	background: var(--ground); color: var(--ink);
	font: 16px/1.6 var(--ui);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
	position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px;
	background: var(--plate); color: var(--plate-ink); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------- the scene */
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--ground); }
/* The picture keeps its shape and covers the window, held by its left edge (the ship) -
   as on the login page, so the tags and the road share its coordinates. One change: it
   starts a top bar lower, or a browser window shorter than the picture (a 1920 x 1080
   screen with its toolbars) puts the "Vessel discharge" tag under the bar. */
.scene {
	--w: max(100vw, calc(100vh * 1.76842));
	position: absolute; left: 0; top: calc(var(--bar-h) + (100vh - var(--w) / 1.76842) * .3);
	width: var(--w); aspect-ratio: 2688 / 1520;
}
.art { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .7s ease; }
.art img { display: block; width: 100%; height: 100%; max-width: none; }
.art.is-in { opacity: 1; }
:root[data-theme="dark"] .art-light, :root:not([data-theme="dark"]) .art-dark { display: none; }

.marks { position: absolute; inset: 0; transition: opacity .2s linear; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; opacity: 0; transition: opacity .6s ease .3s; }
.scene.is-ready .fx { opacity: 1; }
.lamp { fill: var(--lamp); }
.lamp-glow { fill: var(--lamp-glow); }
.lead { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dot { fill: var(--accent); stroke: var(--ground); stroke-width: 4; }
.ring { fill: none; stroke: var(--accent); stroke-width: 3; transform-box: fill-box; transform-origin: center; opacity: 0; }
.scene.is-ready .lead { animation: draw .5s ease-out both; animation-delay: calc(.55s + var(--i) * .2s); }
.scene.is-ready .ring { animation: ping 3.2s ease-out infinite; animation-delay: calc(1.4s + var(--i) * .8s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* the tags: plates naming the stages, like the markings on a container */
.tag {
	display: inline-flex; align-items: center; gap: .5em;
	padding: 3px 10px 3px 3px; white-space: nowrap;
	background: var(--plate); color: var(--plate-ink);
	font: 600 12.5px/1.35 var(--ui); border-radius: 3px;
}
.tag b {
	min-width: 1.6em; padding: 0 .32em; text-align: center; border-radius: 2px;
	background: var(--chip); color: var(--chip-ink);
	font: 700 13px/1.35 var(--display); letter-spacing: .03em;
}
.scene .tag { position: absolute; opacity: 0; transform: translateY(-50%); }
.scene .tag.is-left { transform: translate(-100%, -50%); }
.scene.is-ready .tag { animation: tag-in .45s ease-out both; animation-delay: calc(.85s + var(--i) * .2s); }
@keyframes tag-in { from { opacity: 0; margin-top: 6px; } to { opacity: 1; margin-top: 0; } }
/* "Port pass" sits right of its truck; where the hero box would cover it, it goes left */
.lead-left { display: none; }
@media (max-width: 1250px), (max-aspect-ratio: 3/2) {
	.tag-road { left: 33.48% !important; top: 36.84% !important; transform: translate(-100%, -50%) !important; }
	.lead-right { display: none; }
	.lead-left { display: inline; }
}

/* scrolling down lays the ground colour over the picture (opacity set by the script) */
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--veil); opacity: 0; }

/* --------------------------------------------------------------- top bar */
.topbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--bar-h);
	display: flex; align-items: center; gap: 18px;
	padding: 0 clamp(16px, 3vw, 40px);
	background: var(--bar); border-bottom: 1px solid var(--bar-line);
	-webkit-backdrop-filter: blur(14px) saturate(1.45); backdrop-filter: blur(14px) saturate(1.45);
	transition: background-color .25s ease, box-shadow .25s ease;
}
.topbar.is-scrolled { background: var(--bar-on); box-shadow: 0 6px 24px -12px rgba(0, 0, 0, .25); }
.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand img { height: 42px; width: auto; }
.logo-dark { display: none !important; }
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
	padding: 8px 12px; border-radius: 8px; text-decoration: none;
	font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.nav a:hover { background: var(--hover); }
.nav a.is-active { color: var(--accent-text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 8px 8px 2px 2px; }

.themes { display: flex; flex: none; padding: 3px; gap: 2px; border: 1px solid var(--glass-rule); border-radius: 8px; }
.themes button {
	display: grid; place-items: center; width: 30px; height: 28px; padding: 0;
	border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer;
}
.themes button:hover { color: var(--ink); }
.themes button[aria-checked="true"] { background: var(--plate); color: var(--plate-ink); }
.themes svg { width: 15px; height: 15px; }
.menu-btn {
	display: none; place-items: center; width: 42px; height: 40px; padding: 0; flex: none;
	border: 1px solid var(--glass-rule); border-radius: 8px; background: none; color: var(--ink); cursor: pointer;
}
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn .i-close, .menu-btn[aria-expanded="true"] .i-menu { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }

/* the phone menu: OUTSIDE the blurred bar - a blur inside a blur sees only the bar */
.sheet {
	position: fixed; top: calc(var(--bar-h) + 8px); left: 12px; right: 12px; z-index: 49;
	padding: 10px; border-radius: 16px;
	background: var(--glass-solid); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
.sheet a { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.sheet a:hover { background: var(--hover); }
.sheet .btn { display: flex; margin-top: 8px; width: 100%; }
.sheet .btn:hover { background: var(--plate); }

/* --------------------------------------------------------------- buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 0 22px; border-radius: 8px; border: 1px solid transparent;
	font: 700 18px/1 var(--display); letter-spacing: .07em; text-transform: uppercase;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: filter .15s ease, transform .08s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn small { font: 600 12px/1 var(--ui); letter-spacing: 0; text-transform: none; opacity: .75; }
.btn-primary { background: var(--plate); color: var(--plate-ink); }
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary:focus-visible { outline-color: var(--ink); }
.btn-ghost { background: var(--field); border-color: var(--field-line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 16px; }

/* --------------------------------------------------------------- page bones */
main, .footer { position: relative; z-index: 2; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.glass {
	background: var(--panel); border: 1px solid var(--panel-line); border-radius: 18px;
	box-shadow: var(--panel-shadow);
	-webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass { background: var(--panel-solid); }
	.hero-card, .sheet { background: var(--glass-solid); }
}
.section { padding: clamp(64px, 9vw, 116px) 0 0; }
.section:last-child { padding-bottom: clamp(64px, 9vw, 116px); }
.head { max-width: 780px; margin-bottom: clamp(26px, 3.5vw, 40px); }
.head h2, .film h2, .prints h2 {
	margin: 16px 0 12px;
	font: 700 clamp(38px, 4.6vw, 62px)/.94 var(--display); letter-spacing: .01em; text-transform: uppercase;
	text-wrap: balance;
}
.head p { margin: 0; font-size: 17.5px; color: var(--muted); max-width: 660px; }

/* words appear as they come into view (only with the script: without it all is shown) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 70ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------- the hero */
.hero {
	position: relative; min-height: 100vh; min-height: 100svh;
	display: flex; align-items: center; justify-content: flex-end;
	padding: calc(var(--bar-h) + 28px) clamp(20px, 4.5vw, 84px) 40px;
}
.hero-title { position: absolute; left: clamp(18px, 2.6vw, 44px); bottom: clamp(22px, 4vh, 44px); margin: 0; pointer-events: none; }
.hero-title strong {
	display: block;
	font: 700 clamp(46px, 4.4vw, 84px)/.9 var(--display); letter-spacing: .012em; text-transform: uppercase;
}
.hero-title span { display: block; margin-top: 12px; font-size: 14px; color: var(--muted); }

.hero-card {
	position: relative; flex: none; width: clamp(390px, 33vw, 520px); max-width: 100%;
	border: 1px solid var(--glass-line); border-radius: 20px; overflow: hidden;
	background: var(--glass); box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(14px) saturate(1.45); backdrop-filter: blur(14px) saturate(1.45);
}
.hero-body { padding: 28px 30px 26px; }
.hero-card h1 {
	margin: 16px 0 14px;
	font: 700 clamp(44px, 3.6vw, 62px)/.92 var(--display); letter-spacing: .01em; text-transform: uppercase;
}
.hero-card h1 em { display: block; font-style: normal; color: var(--accent-text); }
.hero-lead { margin: 0 0 22px; font-size: 16.5px; line-height: 1.6; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.points {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
	margin: 0; padding: 13px 26px 15px; list-style: none;
	border-top: 1px solid var(--glass-rule); font-size: 13px; color: var(--muted);
}
.points li { display: flex; align-items: center; gap: 6px; }
.points svg { width: 15px; height: 15px; color: var(--accent); }
.js .hero-card { animation: rise .7s cubic-bezier(.2, .7, .2, 1) .15s both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- 01 the route */
.route { padding: clamp(26px, 3vw, 38px) clamp(20px, 3vw, 34px); }
.stops { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
/* the road the numbers stand on, and a light travelling along it */
.stops::before {
	content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 20px; height: 3px;
	background: repeating-linear-gradient(90deg, var(--accent) 0 16px, transparent 16px 26px); opacity: .55;
}
.stops::after {
	content: ""; position: absolute; top: 15px; left: calc(100% / 14); width: 38px; height: 13px; margin-left: -19px;
	border-radius: 7px; background: var(--lamp); box-shadow: 0 0 0 4px var(--lamp-glow), 0 0 18px var(--lamp-glow);
	animation: drive 9s linear infinite;
}
@keyframes drive {
	0% { left: calc(100% / 14); opacity: 0; } 5% { opacity: 1; }
	92% { opacity: 1; } 100% { left: calc(100% - 100% / 14); opacity: 0; }
}
@keyframes drive-down {
	0% { top: 22px; opacity: 0; } 5% { opacity: 1; }
	92% { opacity: 1; } 100% { top: calc(100% - 22px); opacity: 0; }
}
.stop { position: relative; z-index: 1; text-align: center; }
.num {
	display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 16px;
	border-radius: 10px; background: var(--plate); color: var(--plate-ink);
	font: 700 21px/1 var(--display); box-shadow: 0 0 0 6px var(--panel-solid);
}
.stop h3 { margin: 0 0 8px; font: 700 21px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.stop p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* --------------------------------------------------------------- 02 what it does */
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { padding: 26px 26px 28px; transition: border-color .2s ease, transform .2s ease; }
.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ico {
	display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px;
	border-radius: 12px; background: var(--tint); color: var(--icon-ink);
}
.ico svg { width: 25px; height: 25px; }
.card h3 { margin: 0 0 10px; font: 700 25px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.card p { margin: 0; font-size: 15px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.chips li { padding: 3px 9px; border-radius: 999px; background: var(--band); border: 1px solid var(--glass-rule); font-size: 12px; font-weight: 600; color: var(--muted); }

/* --------------------------------------------------------------- 03 screens */
/* one kind of tab everywhere in iDepoz: a rounded pill group, the open tab filled */
.pills {
	display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 18px;
	border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-line); box-shadow: var(--panel-shadow);
	-webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
}
.pills button {
	padding: 9px 18px; border: 0; border-radius: 999px; background: none; cursor: pointer;
	font: 600 14.5px/1.2 var(--ui); color: var(--muted);
}
.pills button:hover { color: var(--ink); background: var(--hover); }
.pills button[aria-selected="true"] { background: var(--plate); color: var(--plate-ink); }
.window { overflow: hidden; padding: 0; }
.window-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--glass-rule); }
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f56; }
.window-bar i:nth-child(2) { background: #ffbd2e; }
.window-bar i:nth-child(3) { background: #27c93f; }
.window-bar span { margin-left: 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.shot { display: block; position: relative; cursor: zoom-in; background: #111416; }
.shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.shot::after {
	content: "Click to enlarge"; position: absolute; right: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px;
	background: rgba(0, 0, 0, .62); color: #fff; font: 600 12px var(--ui); opacity: 0; transition: opacity .2s ease;
}
.shot:hover::after, .shot:focus-visible::after { opacity: 1; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--glass-rule); }
.notes li { padding: 18px 22px; font-size: 14.5px; color: var(--muted); }
.notes li + li { border-left: 1px solid var(--glass-rule); }
.notes b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 15px; }

/* --------------------------------------------------------------- 04 the film */
.film { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: clamp(22px, 3vw, 40px); padding: clamp(16px, 2vw, 22px); }
.film-poster {
	position: relative; display: block; overflow: hidden; border-radius: 12px; cursor: pointer;
	border: 0; padding: 0; background: #0b1520;
}
.film-poster img { width: 100%; height: auto; aspect-ratio: 16 / 9; transition: transform .5s ease; }
.film-poster:hover img { transform: scale(1.025); }
.play {
	position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 78px; height: 78px; margin: -39px 0 0 -39px;
	border-radius: 50%; background: var(--plate); color: var(--plate-ink); box-shadow: 0 0 0 10px color-mix(in srgb, var(--plate) 30%, transparent), 0 14px 30px rgba(0, 0, 0, .35);
}
.play svg { width: 30px; height: 30px; margin-left: 4px; }
.film-text { padding-right: clamp(0px, 2vw, 20px); }
.film-text p { margin: 0 0 22px; color: var(--muted); font-size: 16.5px; }

/* --------------------------------------------------------------- 05 paperwork */
.prints { display: grid; grid-template-columns: 1fr minmax(0, .82fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.prints .head { margin-bottom: 22px; }
.ticks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; font-size: 15px; }
.ticks svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent); }
.ticks b { color: var(--ink); }
.ticks span { color: var(--muted); }
.paper { margin: 0; justify-self: center; width: min(100%, 470px); }
.paper img {
	width: 100%; height: auto; border-radius: 4px; transform: rotate(2.2deg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .10), 0 30px 60px -20px rgba(10, 30, 40, .45);
	filter: var(--paper-dim);
}
.paper figcaption { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------- 06 who it is for */
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.role { padding: 24px 22px 26px; }
.role .tag { margin-bottom: 16px; }
.role h3 { margin: 0 0 8px; font: 700 23px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.role p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* --------------------------------------------------------------- 07 why */
.why { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }
.why > div { padding: 28px 26px 30px; }
.why > div + div { border-left: 1px solid var(--glass-rule); }
.why .ico { margin-bottom: 16px; }
.why h3 { margin: 0 0 8px; font: 700 23px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.why p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* --------------------------------------------------------------- 08 contact */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; padding: 0; }
.contact-info { padding: clamp(26px, 3.4vw, 44px); background: var(--band); border-right: 1px solid var(--glass-rule); }
.contact-info .head { margin-bottom: 26px; }
.reach { display: grid; gap: 16px; margin: 0 0 30px; padding: 0; list-style: none; }
.reach li { display: flex; gap: 14px; align-items: flex-start; }
.reach .ico { width: 42px; height: 42px; margin: 0; flex: none; border-radius: 10px; }
.reach .ico svg { width: 21px; height: 21px; }
.reach small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.reach a { font-weight: 600; text-decoration: none; }
.reach a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.reach address { font-style: normal; }
.maker { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--glass-rule); font-size: 13px; color: var(--muted); }
.maker img { height: 34px; width: auto; }

.form { padding: clamp(26px, 3.4vw, 44px); }
.form h3 { margin: 0 0 6px; font: 700 28px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.form > p { margin: 0 0 22px; font-size: 14.5px; color: var(--muted); }
.form > p i { font-style: normal; color: var(--accent-text); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: grid; gap: 6px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; }
.field label i { font-style: normal; color: var(--accent-text); }
.field input, .field select, .field textarea {
	width: 100%; min-height: 46px; padding: 10px 12px;
	border: 1px solid var(--field-line); border-radius: 8px;
	background: var(--field); color: var(--ink); font: inherit; font-size: 15px;
}
.field textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; padding-right: 36px; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--panel-solid); color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* the human check: the sum on a plate, the answer box, a button for another question */
.human-row { display: flex; align-items: stretch; gap: 10px; }
.human-q {
	display: grid; place-items: center; min-width: 168px; min-height: 46px; padding: 0 16px;
	border: 1px dashed var(--field-line); border-radius: 8px; background: var(--band);
	font: 700 22px/1 var(--display); letter-spacing: .04em; white-space: nowrap; user-select: none;
}
.field .human-row input { width: 96px; flex: none; text-align: center; font-size: 17px; font-weight: 600; }
.human-new {
	display: grid; place-items: center; width: 46px; flex: none; padding: 0;
	border: 1px solid var(--field-line); border-radius: 8px; background: var(--field); color: var(--muted); cursor: pointer;
}
.human-new:hover { color: var(--ink); border-color: var(--accent); }
.human-new svg { width: 18px; height: 18px; }
.human-new.is-turning svg { animation: spin .6s linear; }
.human-cf { min-height: 65px; }
.field input.is-wrong { border-color: var(--bad); outline-color: var(--bad); }
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px; }
.send p { margin: 0; font-size: 13px; color: var(--muted); }
.send .btn[disabled] { cursor: progress; filter: saturate(.6) brightness(.95); }
.spin {
	width: 16px; height: 16px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%;
	animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sent {
	margin: 16px 0 0; padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 4px;
	background: var(--band); font-size: 14px;
}
.sent.is-error { border-left-color: var(--bad); background: var(--bad-wash); color: var(--bad); }
.sent.is-error a { color: inherit; }

/* --------------------------------------------------------------- footer */
.footer { margin-top: clamp(64px, 9vw, 116px); border-top: 1px solid var(--panel-line); background: var(--panel);
	-webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; padding: 44px 0 30px; }
.foot img { height: 44px; width: auto; margin-bottom: 14px; }
.foot p { margin: 0; font-size: 14px; color: var(--muted); max-width: 360px; }
.foot h4 { margin: 4px 0 12px; font: 700 18px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
.foot ul a { text-decoration: none; color: var(--muted); }
.foot ul a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 18px 0 26px; border-top: 1px solid var(--glass-rule); font-size: 12.5px; color: var(--faint); }

/* --------------------------------------------------------------- dialogs */
dialog {
	padding: 0; border: 0; background: none; color: var(--ink); max-width: min(1400px, 94vw); max-height: 92vh; overflow: visible;
}
dialog::backdrop { background: rgba(6, 10, 14, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog video, dialog img { width: 100%; height: auto; max-height: 86vh; border-radius: 12px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.film-dialog { width: min(1280px, 94vw); }
.film-msg { margin: 12px 0 0; padding: 10px 14px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; text-align: center; }
.viewer { width: min(1600px, 96vw); }
.viewer img { object-fit: contain; background: #111416; }
.x {
	position: absolute; right: -6px; top: -50px; display: grid; place-items: center; width: 40px; height: 40px;
	border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; cursor: pointer;
}
.x svg { width: 18px; height: 18px; }

/* the theme change spreads from the button that was pressed (as on the login) */
.reveal-theme::view-transition-old(root), .reveal-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* --------------------------------------------------------------- narrower windows */
@media (max-width: 1180px) {
	.nav { display: none; }
	.menu-btn { display: grid; }
	.themes { margin-left: auto; }
	.grid-5 { grid-template-columns: repeat(3, 1fr); }
	.why { grid-template-columns: 1fr 1fr; }
	.why > div:nth-child(3) { border-left: 0; }
	.why > div:nth-child(n+3) { border-top: 1px solid var(--glass-rule); }
	/* the road turns to run down the left of the stops */
	.stops { grid-template-columns: 1fr; gap: 22px; max-width: 720px; }
	.stops::before { left: 20px; right: auto; top: 22px; bottom: 22px; width: 3px; height: auto;
		background: repeating-linear-gradient(180deg, var(--accent) 0 16px, transparent 16px 26px); }
	.stops::after { left: 15px; top: 22px; width: 13px; height: 34px; margin: -17px 0 0; animation-name: drive-down; }
	.stop { display: grid; grid-template-columns: 42px 1fr; column-gap: 20px; text-align: left; }
	.stop .num { grid-row: span 2; margin: 0; }
	.stop h3 { margin-top: 10px; }
}
@media (max-width: 980px) {
	.grid-3 { grid-template-columns: 1fr 1fr; }
	.film, .prints, .contact { grid-template-columns: 1fr; }
	.contact-info { border-right: 0; border-bottom: 1px solid var(--glass-rule); }
	.notes { grid-template-columns: 1fr; }
	.notes li + li { border-left: 0; border-top: 1px solid var(--glass-rule); }
	.foot { grid-template-columns: 1fr 1fr; }
	.foot > div:first-child { grid-column: 1 / -1; }
	.paper { width: min(100%, 420px); }
}
/* phones: as on the login - the picture slides so the ship and the road show,
   the title moves to the top over a fade of the ground, the tags are left out */
@media (max-width: 900px) {
	:root { --bar-h: 62px; }
	.brand img { height: 36px; }
	.scene { left: calc((100vw - var(--w)) * .2); }
	.marks .tag, .lead, .lead-left, .dot, .ring { display: none; }
	.stage::before { content: ""; position: absolute; inset: 0 0 auto; height: 280px; z-index: 1; background: linear-gradient(var(--ground) 45%, transparent); }
	.hero { flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 22px; padding: calc(var(--bar-h) + 20px) 16px 28px; }
	.hero-title { position: static; }
	.hero-title strong { font-size: 40px; }
	.hero-title strong br { display: none; }
	.hero-title span { margin-top: 6px; font-size: 13px; }
	.hero-card { width: 100%; max-width: 560px; margin-inline: auto; }
	.hero-body { padding: 22px 20px 20px; }
	.field input, .field select, .field textarea { font-size: 16px; }   /* no zoom on iPhone */
}
@media (max-width: 640px) {
	.topbar .btn { display: none; }
	.grid-3, .grid-5, .why, .fields { grid-template-columns: 1fr; }
	.why > div + div { border-left: 0; border-top: 1px solid var(--glass-rule); }
	.foot { grid-template-columns: 1fr; }
	.actions .btn { flex: 1 1 100%; }
	.human-q { min-width: 0; flex: 1 1 auto; padding: 0 10px; font-size: 20px; }
	.field .human-row input { width: 72px; }
	.pills { display: flex; border-radius: 16px; }
	.pills button { flex: 1 1 auto; }
	.x { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.art, .js .reveal { transition: none; }
	.js .reveal { opacity: 1; transform: none; }
	.lamps, .stops::after { display: none; }
	.scene.is-ready .lead, .scene.is-ready .tag { animation: none; opacity: 1; stroke-dashoffset: 0; }
	.scene.is-ready .ring, .js .hero-card { animation: none; }
}
@media print {
	.stage, .veil, .topbar, .sheet, .film, dialog { display: none !important; }
	.glass, .hero-card { background: #fff; box-shadow: none; backdrop-filter: none; }
}