/* ARV3XA — V05 motion layer (home page)
   Three ideas, kept quiet: a living process (gold flows in pipework),
   the ARV3XA orbit (logo circle as a recurring motif) and particles
   that drift and gather around it. Everything stops under
   prefers-reduced-motion. */

:root { --ease: cubic-bezier(.22,.61,.36,1); --gold-soft: rgba(201,162,85,.22); }

/* ---------- hero ---------- */
.hero5 { position: relative; overflow: hidden; isolation: isolate; min-height: min(92vh, 860px); display: grid; align-items: center;
  background: radial-gradient(120% 90% at 78% 40%, #17305a 0%, var(--navy) 55%, #08111f 100%); color: var(--on-navy); }
.hero-canvas, .hero-pipes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero-pipes .pipe { fill: none; stroke: rgba(201,162,85,.13); stroke-width: 1.4; }
.hero-pipes .pulse { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 46 1400; stroke-dashoffset: 1446; opacity: .75;
  animation: flow 9s linear infinite; filter: drop-shadow(0 0 4px rgba(201,162,85,.6)); }
.hero-pipes .p2 { animation-duration: 11s; animation-delay: -4s; }
.hero-pipes .p3 { animation-duration: 10s; animation-delay: -2s; }
.hero-pipes .p4 { animation-duration: 12s; animation-delay: -7s; }
@keyframes flow { to { stroke-dashoffset: 0; } }

.hero5-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; padding-block: clamp(4rem, 9vw, 7rem); }
.hero5 h1 { margin: 1rem 0 1.3rem; font-weight: 300; font-size: clamp(2.4rem, 5.4vw, 4.2rem); letter-spacing: -.015em; }
.hero5 .lead { color: var(--on-navy-muted); margin-bottom: 2.2rem; max-width: 56ch; }
.hero5-mark { position: relative; justify-self: center; width: min(400px, 82%); aspect-ratio: 1; }
.mark-core { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,85,.16), transparent 70%); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .6; } }

/* ARV3XA orbit (shared by hero and CTA) */
.orbit { width: 100%; height: 100%; overflow: visible; }
.orbit .arc { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 2.2s var(--ease) .3s forwards; }
.orbit .arc:nth-child(2) { animation-delay: .6s; }
.orbit .arc:nth-child(3) { animation-delay: .9s; }
.orbit .node { fill: var(--gold); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: pop .7s var(--ease) forwards; }
.orbit .node:nth-of-type(1) { animation-delay: 1.4s; } .orbit .node:nth-of-type(2) { animation-delay: 1.6s; } .orbit .node:nth-of-type(3) { animation-delay: 1.8s; }
.orbit-spin { transform-origin: 100px 100px; animation: spin 90s linear infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* entrance of hero text */
.rise { opacity: 0; transform: translateY(14px); animation: rise .9s var(--ease) forwards; }
.rise.d1 { animation-delay: .15s; } .rise.d2 { animation-delay: .3s; } .rise.d3 { animation-delay: .45s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.scroll-cue { position: absolute; left: 50%; bottom: 1.6rem; width: 22px; height: 36px; margin-left: -11px; border: 1px solid rgba(201,162,85,.5); border-radius: 12px; }
.scroll-cue span { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--gold); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

@media (max-width: 820px) {
  .hero5 { min-height: auto; }
  .hero5-grid { grid-template-columns: 1fr; gap: 2rem; padding-block: 3.5rem 4.5rem; }
  .hero5-mark { order: -1; width: 150px; justify-self: start; }
  .scroll-cue { display: none; }
}

/* ---------- figures ---------- */
.figures5 .figure b { font-weight: 300; color: var(--gold); }
.figures5 .figure { position: relative; }
.figures5 .figure::after { content: ""; position: absolute; left: 1.2rem; bottom: 1rem; width: 0; height: 1px; background: var(--gold); transition: width 1.4s var(--ease) .3s; }
.figures5.in .figure::after { width: 36px; }

/* ---------- scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- waste-to-value route ---------- */
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; position: relative; counter-reset: s; }
.route::before, .route::after { content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: 1px; }
.route::before { background: var(--line); }
.route::after { background: linear-gradient(90deg, var(--gold-ink), var(--gold)); transform-origin: left; transform: scaleX(0); transition: transform 2.4s var(--ease); }
.route.in::after { transform: scaleX(1); }
.station { position: relative; display: grid; gap: .55rem; padding-top: 2.2rem; opacity: .35; transition: opacity .6s ease; transition-delay: calc(var(--i) * .55s); }
.route.in .station { opacity: 1; }
.station .dot { position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--ground); border: 1.5px solid var(--gold-ink); transition: background .4s ease; transition-delay: calc(var(--i) * .55s); }
.route.in .station .dot { background: var(--gold-ink); box-shadow: 0 0 0 6px var(--gold-soft); }
.station .step { color: var(--gold-ink); font-size: .8rem; letter-spacing: .1em; }
.station h3 { font-size: 1.25rem; }
.station p { color: var(--muted); font-size: .95rem; }
.route .runner { position: absolute; top: 4px; left: 0; width: 8px; height: 8px; margin-left: 3px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px 2px rgba(201,162,85,.7); opacity: 0; }
.route.in .runner { animation: run 6s ease-in-out 2.6s infinite; }
@keyframes run { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 14px); opacity: 0; } }
@media (max-width: 820px) {
  .route { grid-template-columns: 1fr; gap: 1.8rem; padding-left: 2.2rem; }
  .route::before, .route::after { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .route::after { transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, var(--gold-ink), var(--gold)); }
  .route.in::after { transform: scaleY(1); }
  .station { padding-top: 0; }
  .station .dot { left: -2.2rem; top: 2px; }
  .route .runner { display: none; }
}

/* ---------- waste selector ---------- */
.selector { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
.chip { font: 500 .9rem/1 var(--display); letter-spacing: .02em; padding: .7rem 1.05rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .25s, background .25s, color .25s; }
.chip:hover { border-color: var(--gold-ink); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--gold); }
.selector-result { min-height: 1.6em; color: var(--muted); font-size: .95rem; margin-bottom: 1.4rem; }
.selector-result b { color: var(--gold-ink); font-weight: 600; }
.techs .tech-card { transition: transform .35s var(--ease), border-color .35s, opacity .45s ease, filter .45s ease, box-shadow .35s; }
.techs .tech-card .ph { transition: transform .8s var(--ease); }
.techs .tech-card { position: relative; }
.techs .tech-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.techs .tech-card:hover { box-shadow: 0 14px 30px -18px rgba(14,27,48,.45); }
.techs .tech-card:hover::after, .techs .tech-card.match::after { transform: scaleX(1); }
.techs .tech-card:hover .ph { transform: scale(1.05); }
.techs .tech-card > .ph { overflow: hidden; }
.techs.filtered .tech-card:not(.match) { opacity: .28; filter: grayscale(1); }
.techs.filtered .tech-card.match { border-color: var(--gold); }
.selector-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2rem; }
.link-arrow { color: var(--gold-ink); font: 500 .95rem var(--display); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* ---------- method ring ---------- */
.ring { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; position: relative; }
.ring::before { content: ""; position: absolute; left: 12%; right: 12%; top: -1.4rem; height: 2.8rem; border: 1px solid rgba(201,162,85,.35); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.method5 .card { transition: transform .35s var(--ease), border-color .35s; }
.method5 .card:hover { transform: translateY(-4px); border-color: var(--gold); }
@media (max-width: 980px) { .ring { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ring::before { display: none; } }
@media (max-width: 560px) { .ring { grid-template-columns: 1fr; } }

/* ---------- partners marquee ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 1.2rem; width: max-content; animation: marquee 48s linear infinite; padding-block: .4rem; }
.marquee:hover .marquee-track, .marquee:focus .marquee-track { animation-play-state: paused; }
.marquee .logo-tile { width: 230px; flex: 0 0 auto; }
@keyframes marquee { to { transform: translateX(calc(-50% - .6rem)); } }

/* ---------- closing CTA ---------- */
.cta5 { position: relative; overflow: hidden; }
.cta5 .wrap { position: relative; }
.cta-orbit { position: absolute; right: -60px; top: 50%; width: 340px; aspect-ratio: 1; transform: translateY(-50%); opacity: .14; pointer-events: none; }
.cta5 .stack, .cta5 .hero-actions { position: relative; }

/* footer legal line */
.site-footer .legal span:first-child { max-width: 80ch; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise, .js .reveal, .station { opacity: 1 !important; transform: none !important; }
  .orbit .arc { stroke-dashoffset: 0; } .orbit .node { transform: none; }
  .route::after { transform: none; } .station .dot { background: var(--gold-ink); }
  .hero-pipes .pulse { display: none; }
  .marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee .logo-tile.dup { display: none; }
}
.figures5 .figure b span { font: inherit; color: inherit; }

/* =====================================================================
   V05 — inner pages
   ===================================================================== */

/* page hero: text + arched image framed by the ARV3XA orbit */
.ph5 { position: relative; overflow: hidden; isolation: isolate; color: var(--on-navy);
  background: radial-gradient(110% 120% at 85% 30%, #17305a 0%, var(--navy) 55%, #08111f 100%); }
.ph5 .wrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: 3rem; align-items: center; padding-block: clamp(3.2rem, 7vw, 5.5rem); }
.ph5.no-media .wrap { grid-template-columns: 1fr; }
.ph5 h1 { font-weight: 300; font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin: .2rem 0; }
.ph5 .lead { color: var(--on-navy-muted); max-width: 62ch; }
.ph5 .ph-copy { display: grid; gap: .9rem; }
.ph5 .hero-pipes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.ph-media { position: relative; justify-self: end; width: min(330px, 100%); margin: 2.4rem 2.4rem 2.4rem 0; }
.ph-media .frame { border: 0; background: transparent; aspect-ratio: 4 / 5; border-radius: 999px 999px 8px 8px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.ph-media .frame img { aspect-ratio: auto; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: drift 26s ease-in-out infinite alternate; }
.ph-media { isolation: isolate; }
.ph-media .orbit { position: absolute; left: 50%; top: 50%; width: 175%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; opacity: .9; }
.ph-media .orbit .arc { stroke-width: 1.1; }
.ph-media .orbit .node { r: 5.5px; }
@keyframes drift { to { transform: scale(1.14) translate(-2%, -1%); } }
.ph-deco { position: absolute; right: -90px; top: 50%; width: 420px; aspect-ratio: 1; transform: translateY(-50%); opacity: .22; pointer-events: none; z-index: -1; }
@media (max-width: 860px) {
  .ph5 .wrap { grid-template-columns: 1fr; gap: 1.6rem; }
  .ph-media { justify-self: stretch; width: 100%; margin: 0; }
  .ph-media .frame { aspect-ratio: 16 / 9; border-radius: 8px; }
  .ph-media .orbit { display: none; }
  .ph-deco { width: 260px; right: -110px; opacity: .14; }
}

/* full-bleed image band with a single statement */
.statement { position: relative; overflow: hidden; color: #fff; min-height: 380px; display: grid; align-items: center; isolation: isolate; }
.statement .bg { position: absolute; inset: -12% 0; background: var(--img) center/cover no-repeat; z-index: -2; will-change: transform; }
.statement::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,17,31,.92) 0%, rgba(8,17,31,.7) 45%, rgba(8,17,31,.15) 100%); }
.statement .wrap { padding-block: clamp(3.5rem, 8vw, 6rem); display: grid; gap: 1rem; }
.statement .big { font: 300 clamp(2.4rem, 6vw, 4.6rem)/1 var(--display); color: var(--gold); }
.statement p { color: #dfe5ee; max-width: 46ch; font-size: 1.1rem; }
.statement small { color: #a9b4c8; }

/* image + text pairs in content */
.media-card { border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 50px -32px rgba(14,27,48,.55); }
.media-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.media-card:hover img { transform: scale(1.04); }

/* generic hover lift for cards on inner pages */
main .card { transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
main a.card:hover, main .grid > .card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -24px rgba(14,27,48,.5); }
.band-navy .grid > .card:hover { border-color: var(--gold); }
.partner { transition: transform .35s var(--ease); }
.partner:hover { transform: translateY(-3px); }
.partner .logo-tile { transition: border-color .35s, box-shadow .35s; }
.partner:hover .logo-tile { border-color: var(--gold); box-shadow: 0 14px 30px -22px rgba(14,27,48,.5); }

/* stage-gate: gates light up one after another */
.js .gates .gate { border-top-color: rgba(201,162,85,.18); transition: border-color .6s ease, box-shadow .6s ease; transition-delay: calc(var(--i, 0) * .35s); }
.js .gates.in .gate { border-top-color: var(--gold); box-shadow: 0 -10px 24px -18px rgba(201,162,85,.8); }

/* technology sheet: process flow arrows breathe */
.flow .arrow { animation: nudge 2.4s ease-in-out infinite; }
.flow .box.mid { position: relative; overflow: hidden; }
.flow .box.mid::after { content: ""; position: absolute; left: -40%; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(201,162,85,.18), transparent); animation: sweep 4.5s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(4px); opacity: .6; } }
@keyframes sweep { to { left: 120%; } }
.kpis .kpi { transition: transform .35s var(--ease); }
.kpis .kpi:hover { transform: translateY(-3px); }

/* HUB diagram: nodes appear in process order */
.hub .node { transition: opacity .7s ease, transform .7s var(--ease), border-color .4s; }
.js .hub .node { opacity: 0; transform: translateX(-12px); }
.hub.in .node { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * .25s); }

/* 404 / thanks */
.big-orbit { width: 180px; aspect-ratio: 1; margin-bottom: .6rem; }

@media (prefers-reduced-motion: reduce) {
  .js .hub .node { opacity: 1; transform: none; }
  .js .gates .gate { border-top-color: var(--gold); }
  .statement .bg { inset: 0; }
}

/* =====================================================================
   V05 — Get involved
   ===================================================================== */
.route.vertical { grid-template-columns: 1fr; gap: 1.5rem; padding-left: 2.2rem; }
.route.vertical::before, .route.vertical::after { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
.route.vertical::after { transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, var(--gold-ink), var(--gold)); }
.route.vertical.in::after { transform: scaleY(1); }
.route.vertical .station { padding-top: 0; }
.route.vertical .station .dot { left: -2.2rem; top: 2px; }

/* phone mock-up of the citizen app */
.phone { justify-self: center; width: min(300px, 100%); aspect-ratio: 9 / 18.5; border-radius: 38px; padding: 12px; background: #050b16; border: 1px solid rgba(201,162,85,.45); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), inset 0 0 0 2px #111c30; position: relative; }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 70px; height: 6px; margin-left: -35px; border-radius: 4px; background: #111c30; z-index: 2; }
.phone-screen { height: 100%; border-radius: 28px; background: #F4F2EC; color: #1B2333; overflow: hidden; display: flex; flex-direction: column; font-size: .86rem; }
.app-top { padding: 34px 14px 10px; background: var(--navy); color: #fff; display: grid; gap: .6rem; }
.app-brand { font: 500 1rem var(--display); letter-spacing: .06em; display: flex; align-items: center; gap: .45rem; color: var(--gold); }
.app-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--gold); }
.app-tabs { display: flex; gap: .3rem; background: rgba(255,255,255,.08); padding: 3px; border-radius: 999px; }
.app-tabs button { flex: 1; border: 0; border-radius: 999px; padding: .4rem; background: transparent; color: #c9d2e0; font: 500 .8rem var(--display); cursor: pointer; }
.app-tabs button[aria-selected="true"] { background: var(--gold); color: var(--navy); }
.app-view { padding: 12px 14px; display: grid; gap: .55rem; align-content: start; flex: 1; overflow: hidden; }
.app-view[hidden] { display: none; }
.app-photo { border: 1.5px dashed #b9ae95; background: #fff; border-radius: 12px; height: 92px; display: grid; place-items: center; align-content: center; gap: .1rem; color: #5B6578; font: 500 .8rem var(--display); cursor: pointer; }
.app-photo span { font-size: 1.4rem; color: #8E6C2C; line-height: 1; }
.app-label { font: 600 .7rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: #8E6C2C; margin-top: .2rem; }
.app-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.app-chips button { border: 1px solid #DCD5C5; background: #fff; border-radius: 999px; padding: .38rem .65rem; font: 500 .76rem var(--display); color: #1B2333; cursor: pointer; }
.app-chips button.on { background: var(--navy); border-color: var(--navy); color: var(--gold); }
.app-toggle { justify-self: start; display: flex; align-items: center; gap: .45rem; font-size: .8rem; }
.app-toggle input { accent-color: #8E6C2C; }
.app-gps { font-size: .72rem; color: #5B6578; }
.app-send { margin-top: .3rem; border: 0; border-radius: 12px; padding: .75rem; background: var(--gold); color: var(--navy); font: 600 .85rem var(--display); cursor: pointer; }
.app-done { display: grid; justify-items: center; text-align: center; gap: .6rem; padding-top: 2.4rem; }
.app-done svg { width: 64px; height: 64px; fill: none; stroke: #8E6C2C; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.app-done svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .7s var(--ease) .2s forwards; }
.app-done b { font: 500 1.2rem var(--display); }
.app-done p { color: #5B6578; font-size: .8rem; }
.app-map { width: 100%; height: auto; background: #e9e4d8; border-radius: 12px; }
.app-map path { fill: #8E6C2C; stroke: #F4F2EC; stroke-width: 1.2; transition: opacity .4s; }
.app-map .land { fill: #d8d0bd; stroke: none; }
.app-legend { display: flex; gap: .8rem; font-size: .72rem; color: #5B6578; }
.app-legend i { display: inline-block; width: 10px; height: 10px; background: #8E6C2C; margin-right: .3rem; vertical-align: -1px; }
.app5 .benefits li { color: var(--on-navy-muted); }

/* =====================================================================
   V05.2 — rotating images, links, contact choices, brand-forward home
   ===================================================================== */
.frame.slides { position: relative; background: var(--navy); }
.frame.slides .slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s ease; }
.frame.slides .slide.on { opacity: 1; }
.frame.slides .slide img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; transform: scale(1.04); }
.frame.slides .slide.on img { animation: drift 9s ease-out forwards; }
.frame.slides figcaption { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); background: rgba(8,17,31,.78); color: var(--gold); font: 600 .72rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; padding: .55rem .9rem; border-radius: 999px; white-space: nowrap; }
.slide-dots { position: absolute; left: 0; right: 0; bottom: -1.6rem; display: flex; justify-content: center; gap: .4rem; }
.slide-dots button { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: transparent; cursor: pointer; }
.slide-dots button[aria-current="true"] { background: var(--gold); }
@media (max-width: 860px) { .slide-dots { bottom: .6rem; } .frame.slides figcaption { bottom: 1.8rem; } }

a.tlink { color: var(--gold-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .2s; }
a.tlink:hover { color: var(--ink); }

/* contact: three clear entry points */
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.8rem; }
.choice { text-align: left; display: grid; gap: .35rem; align-content: start; padding: 1.1rem 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); font: inherit; }
.choice:hover { border-color: var(--gold-ink); transform: translateY(-2px); }
.choice .k { font: 600 .72rem var(--mono); color: var(--gold-ink); letter-spacing: .08em; }
.choice b { font: 500 1.08rem var(--display); }
.choice span:last-child { font-size: .88rem; color: var(--muted); }
.choice[aria-selected="true"] { border-color: var(--gold); box-shadow: inset 0 3px 0 var(--gold), 0 14px 30px -24px rgba(14,27,48,.6); }
.form-title { font: 400 1.5rem var(--display); margin-bottom: .2rem; }
.form-intro { color: var(--muted); margin-bottom: 1rem; }
@media (max-width: 720px) { .choices { grid-template-columns: 1fr; } }

/* home: brand-forward hero with DNA on the orbit */
.brandmark { font: 300 clamp(3.4rem, 9vw, 7.4rem)/.95 var(--display); letter-spacing: .14em; color: var(--gold); margin: .2rem 0 .3rem; background: linear-gradient(100deg, #b8913f 0%, #ecd08f 35%, #c9a255 55%, #f3dda4 75%, #b8913f 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brandmark.rise { animation: rise .9s var(--ease) .15s forwards, sheen 9s ease-in-out 1s infinite; }
@keyframes sheen { 50% { background-position: 100% 0; } }
.brand-tag { font: 500 .85rem var(--display); letter-spacing: .32em; text-transform: uppercase; color: var(--on-navy-muted); }
.hero5 h1.claim { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 300; margin: 1.6rem 0 1rem; color: var(--on-navy); }
.dna-label { position: absolute; font: 500 .82rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy); white-space: nowrap; opacity: 0; animation: fadein 1s ease forwards; }
@keyframes fadein { to { opacity: 1; } }
.dna-label small { display: block; font: 400 .72rem var(--body); letter-spacing: .02em; text-transform: none; color: var(--on-navy-muted); margin-top: .2rem; }
.hero5-mark .orbit-spin { animation: none; }
.dna-label.l1 { left: 50.6%; top: 15%; transform: translate(-50%, calc(-100% - 26px)); text-align: center; animation-delay: 2.1s; }
.dna-label.l2 { left: calc(82% + 32px); top: 63.7%; transform: translateY(-50%); animation-delay: 2.3s; }
.dna-label.l3 { right: calc(81.5% + 32px); top: 65.4%; transform: translateY(-50%); text-align: right; animation-delay: 2.5s; }
@media (max-width: 1240px) { .dna-label small { display: none; } }
@media (max-width: 820px) { .dna-label { display: none; } }

/* home: DNA band */
.dna5 { position: relative; overflow: hidden; }
.dna5 .pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(201,162,85,.3); }
.pillar { padding: 2.2rem 1.6rem 2.4rem 0; display: grid; gap: .8rem; align-content: start; border-right: 1px solid rgba(201,162,85,.18); }
.pillar + .pillar { padding-left: 1.6rem; }
.pillar:last-child { border-right: 0; }
.pillar .num { font: 200 clamp(3rem, 6vw, 4.8rem)/1 var(--display); color: transparent; -webkit-text-stroke: 1px var(--gold); }
.pillar h3 { font: 400 1.6rem var(--display); color: var(--on-navy); }
.pillar p { color: var(--on-navy-muted); }
.pillar .bar { height: 2px; width: 0; background: var(--gold); transition: width 1.2s var(--ease) .3s; }
.pillar.in .bar { width: 48px; }
.dna5 .big-quote { font: 300 clamp(1.8rem, 4vw, 3rem)/1.15 var(--display); color: var(--on-navy); max-width: 22ch; }
.dna5 .big-quote em { font-style: normal; color: var(--gold); }
.dna-orbit { position: absolute; right: -140px; top: -120px; width: 520px; aspect-ratio: 1; opacity: .1; pointer-events: none; }
@media (max-width: 860px) { .dna5 .pillars { grid-template-columns: 1fr; } .pillar, .pillar + .pillar { padding: 1.6rem 0; border-right: 0; border-bottom: 1px solid rgba(201,162,85,.18); } }

/* statement band: crossfading backgrounds */
.statement .bg { opacity: 0; transition: opacity 1.6s ease; }
.statement .bg.on { opacity: 1; }
.statement .wrap > * { transition: opacity .6s ease; }

@media (prefers-reduced-motion: reduce) {
  .frame.slides .slide.on img { animation: none; }
  .brandmark { animation: none; }
  .dna-label { opacity: 1; }
}

/* V05.3 — rotating ARV3XA orbit with labels that follow their node (1 turn / minute) */
.hero5-mark.rotating .dna-label { right: auto; bottom: auto; animation-delay: 2.1s; will-change: transform; }
.hero5-mark.rotating .dna-label small { display: block; }
@media (max-width: 1240px) { .hero5-mark.rotating .dna-label small { display: none; } }
@media (max-width: 1240px) {
  .hero5-mark { width: min(300px, 70%); }
  .hero5-mark.rotating .dna-label { white-space: normal; width: max-content; max-width: 8.5em; font-size: .72rem; line-height: 1.25; }
}

/* V05.4 — SPOF added to the main menu: keep menu items on one line, switch to the burger menu earlier */
.nav a { white-space: nowrap; }
@media (max-width: 1400px) { .nav { gap: 1.05rem; } .nav a { font-size: 0.88rem; } }
@media (max-width: 1280px) {
  .menu-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--navy); padding: 0.5rem max(16px, env(safe-area-inset-right, 0px)) 1rem max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid rgba(201,162,85,0.25); }
  .nav.open { display: flex; }
  .nav a { padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.92rem; }
  .nav .btn { margin-top: 0.8rem; justify-content: center; }
}