/* Keyton Energy — built on the ARRIVAL design (archive.7z, 2026-10-14):
   one sticky full-screen scene per page, real content travelling over it in
   dark glass panels on the right, paper sections below, gold accent,
   Arial with Georgia italics. Extended here with tables, grade cards,
   menus, forms and dialogs in the same vocabulary. */
:root{color-scheme:dark;--paper:#eee9df;--paper-2:#e4ded2;--ink:#253034;--ink-2:#646b67;--gold:#eab86c;--gold-2:#f5d5a4;--night:#121b20;--night-2:#0c1418;--glass:rgba(8,16,24,.8);--rule:#ffffff26;--rule-ink:#26323a2e;--head:76px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 12px)}
body{margin:0;background:var(--night);color:var(--paper);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
em{font-family:Georgia,serif;font-weight:400}
.skip{position:fixed;top:-100px;left:10px;background:var(--night);padding:15px;z-index:99}.skip:focus{top:10px}
.ico{width:18px;height:18px;flex:none}
.label,.eyebrow{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
.wrap{padding-left:7%;padding-right:7%}

/* ── header ─────────────────────────────────────────────── */
header.site{position:fixed;top:0;left:0;right:0;height:var(--head);padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:40;border-bottom:1px solid #ffffff20;transition:background .35s ease,border-color .35s ease}
header.site.solid{background:rgba(10,18,22,.9);border-color:#ffffff14}
@supports (backdrop-filter:blur(8px)){header.site.solid{background:rgba(10,18,22,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}}
.brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:700;letter-spacing:3px;white-space:nowrap}
.brand img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 46%;background:#fff}
.demo{font-size:9px;font-weight:400;letter-spacing:2px;border-left:1px solid #ffffff40;margin-left:10px;padding-left:18px;color:#d9d2c4}
nav.main{display:flex;align-items:center;gap:30px;font-size:12px;letter-spacing:1px}
nav.main>a,nav.main summary{padding:10px 0;cursor:pointer;opacity:.86;transition:opacity .2s}
nav.main>a:hover,nav.main summary:hover,nav.main>a[aria-current]{opacity:1}
nav.main>a[aria-current]{box-shadow:inset 0 -1px var(--gold)}
.menu{position:relative}.menu summary{list-style:none;display:flex;align-items:center;gap:8px}.menu summary::-webkit-details-marker{display:none}
.menu summary:after{content:'';width:6px;height:6px;border:solid var(--gold);border-width:0 1px 1px 0;transform:rotate(45deg) translateY(-2px)}
.menu[open] summary:after{transform:rotate(-135deg) translateY(-1px)}
.menu-panel{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-38%);width:min(760px,86vw);background:rgba(10,18,22,.97);border:1px solid #ffffff1c;padding:28px 30px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;box-shadow:0 30px 80px #0008}
.menu-panel p{margin:0 0 12px;font-size:9px;letter-spacing:2px;color:var(--gold);text-transform:uppercase}
.menu-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}.menu-panel li a{font-size:13px;letter-spacing:0;color:#e7e2d8;line-height:1.35}.menu-panel li a:hover{color:var(--gold-2)}
.menu-panel .all{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:16px;font-size:11px;letter-spacing:2px;display:flex;justify-content:space-between;color:var(--gold-2)}
.head-actions{display:flex;align-items:center;gap:14px}
.ibtn{width:40px;height:40px;border-radius:50%;border:1px solid #ffffff38;background:none;color:var(--paper);display:inline-grid;place-items:center;cursor:pointer;padding:0;transition:border-color .2s,color .2s}
.ibtn:hover{border-color:var(--gold);color:var(--gold)}
.cta{display:inline-flex;align-items:center;gap:14px;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:13px 20px;background:var(--gold);color:#1b1610;border:0;cursor:pointer;font-weight:700;transition:background .2s}
.cta:hover{background:var(--gold-2)}.cta .ico{width:16px;height:16px}
.burger{display:none}
.mobile-menu{position:fixed;inset:var(--head) 0 0 0;background:rgba(10,18,22,.98);z-index:39;padding:26px 8% 40px;overflow:auto}
.mobile-menu[hidden]{display:none}
.mobile-menu details{border-bottom:1px solid var(--rule)}.mobile-menu summary{padding:16px 0;font-size:20px;cursor:pointer}
.mobile-menu details details summary{font-size:11px;letter-spacing:2px;color:var(--gold);text-transform:uppercase;padding:12px 0}
.mobile-menu ul{list-style:none;margin:0 0 12px;padding:0}.mobile-menu li a{display:block;padding:8px 0;color:#ddd7cb}
.mobile-menu>a{display:block;padding:16px 0;font-size:20px;border-bottom:1px solid var(--rule)}
.mobile-menu .cta{margin-top:26px;border:0;font-size:12px}

/* ── the stage (ARRIVAL) ─────────────────────────────────── */
.voyage{position:relative}
.stage{height:100svh;position:sticky;top:0;overflow:hidden;background:#352923}
.stage canvas,.stage .shade,.stage .media,.stage .footage-poster,.stage .hero-video{position:absolute;inset:0;width:100%;height:100%}
.stage .media{object-fit:cover;transform:scale(calc(1.04 + var(--p,0) * .08));transform-origin:45% 55%;transition:opacity .6s ease}
.footage-poster,.hero-video{object-fit:cover;pointer-events:none}.footage-poster{filter:blur(16px) brightness(.55);transform:scale(1.06);z-index:0}
.hero-video{opacity:0;transition:opacity .4s ease;z-index:1}.hero-video.ready{opacity:1}
.shade{z-index:2;background:linear-gradient(90deg,rgba(8,16,24,.08),rgba(8,16,24,.14) 45%,rgba(8,16,24,.42)),linear-gradient(0deg,rgba(8,15,25,.6),transparent 26%,transparent 78%,rgba(7,16,24,.5))}
.stage .hud{position:absolute;z-index:3;font-size:10px;letter-spacing:3px;color:#f2d7ad;text-transform:uppercase}
.stage .eyebrow-top{top:calc(var(--head) + 50px);left:5%}
.stage .coordinate{left:5%;bottom:120px;line-height:1.9;letter-spacing:2px}.coordinate span{display:block;color:#c7b8a0;font-size:8px}
.stage .bottom{position:absolute;z-index:3;bottom:32px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;gap:50px;pointer-events:none}
.scroll-label{font-size:9px;letter-spacing:2px;display:flex;align-items:center;gap:12px}
.mouse{height:26px;width:16px;border:1px solid #d5c1a1;border-radius:9px}.mouse:after{content:'';display:block;width:2px;height:6px;background:var(--gold);margin:5px auto;animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{50%{transform:translateY(5px);opacity:.4}}
.timeline{width:40%;max-width:450px}.track{height:2px;background:#ffffff30}.track span{height:2px;background:var(--gold);display:block;width:0}
.ticks{display:flex;justify-content:space-between;font-family:monospace;font-size:10px;color:#b7b5b0;margin-top:12px;letter-spacing:1px}.ticks .now{color:var(--gold)}
.status{font-size:9px;letter-spacing:2px;color:var(--gold)}
.content-flow{position:relative;z-index:4;margin-top:-100svh;pointer-events:none;padding-bottom:14vh}
.content-flow a,.content-flow button,.content-flow summary,.content-flow details{pointer-events:auto}
.opening{min-height:100svh;display:flex;align-items:center;justify-content:flex-end;padding:calc(var(--head) + 70px) 5% 120px}
.panel{width:47%;margin:0 5% 0 auto;background:var(--glass);padding:44px 38px;border-top:1px solid #ffffff22}
.panel+.panel{margin-top:30vh}
.opening .panel{margin:0;padding:30px;background:linear-gradient(110deg,rgba(8,16,24,.74),rgba(8,16,24,.42));border:0;border-radius:3px}
.chapter{font-size:10px;letter-spacing:3px;color:var(--gold-2);margin:0 0 24px;text-transform:uppercase}
h1{font-weight:400;font-size:clamp(46px,5.4vw,92px);letter-spacing:-3px;line-height:1.03;margin:0}
h1 em{color:var(--gold-2)}
.intro{font-size:14px;line-height:1.8;color:#fff;margin:26px 0 0;max-width:560px}
.button{display:inline-flex;gap:46px;align-items:center;font-size:12px;letter-spacing:1px;padding:17px 0;border-bottom:1px solid #dcc6a7;margin-top:10px;background:none;border-top:0;border-left:0;border-right:0;color:inherit;cursor:pointer}
.button span{font-size:20px;color:var(--gold);line-height:1}
.button:hover span{transform:translateX(4px)}.button span{transition:transform .2s}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px;margin-top:22px}
.crumbs ol{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:10px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#cfc6b6}
.crumbs li+li:before{content:'/';margin-right:10px;color:#ffffff55}.crumbs a:hover{color:var(--gold)}
.section-top{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--rule);padding-top:20px;font-size:10px;letter-spacing:2px;text-transform:uppercase}
.panel h2{font-size:clamp(28px,2.8vw,46px);margin:34px 0 26px}.panel h2 em{color:var(--gold-2)}
.panel p{font-size:14px;line-height:1.85;color:#e0ddd5}

/* ── type ───────────────────────────────────────────────── */
h2{font-size:clamp(34px,4.4vw,64px);line-height:1.08;font-weight:400;letter-spacing:-2px;margin:46px 0 22px}
h3{font-family:Georgia,serif;font-weight:400;font-size:24px;line-height:1.2;margin:14px 0 10px}
.lede{font-size:16px;line-height:1.8;max-width:640px;margin:0 0 40px}
.muted{color:var(--ink-2)}
.note{font-size:12px;line-height:1.75;color:#8f9993;border-left:2px solid var(--gold);padding:4px 0 4px 16px;max-width:760px}

/* ── sections ───────────────────────────────────────────── */
.sec{padding:96px 7% 110px;position:relative}
.paper{background:var(--paper);color:var(--ink)}.paper .section-top{border-color:var(--rule-ink)}.paper .label,.paper .eyebrow{color:#9a6a2c}
.paper h2 em{color:#7c8077}.paper .note{color:#5b6460;border-color:#c2903f}
.paper-2{background:var(--paper-2)}
.dark{background:var(--night)}.darker{background:var(--night-2)}
.dark h2 em,.darker h2 em{color:var(--gold-2)}
.band{position:relative;overflow:hidden;isolation:isolate}
.band>.bg{position:absolute;inset:-8% 0;z-index:-2}.band>.bg img{width:100%;height:100%;object-fit:cover;transform:translateY(calc(var(--py,0) * 1px))}
.band:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,16,24,.86),rgba(8,16,24,.55) 55%,rgba(8,16,24,.78))}
.split{display:grid;grid-template-columns:5fr 7fr;gap:30px 80px;align-items:start}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:46px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.rule-items>*{border-top:1px solid var(--rule);padding-top:22px}.paper .rule-items>*{border-color:var(--rule-ink)}
.rule-items p{font-size:13px;line-height:1.8;margin:0}
.dark .rule-items p,.darker .rule-items p,.band .rule-items p,.panel .rule-items p{color:#d8d5cd}
.paper .rule-items p{color:var(--ink-2)}
.num{font-family:monospace;font-size:11px;color:var(--gold);letter-spacing:1px}

/* pledges on the stage */
.pledges{display:grid;grid-template-columns:1fr 1fr;gap:28px 30px;margin-top:34px}
.pledges li{list-style:none;border-top:1px solid var(--rule);padding-top:18px}
.pledges b{display:block;font:400 34px Georgia,serif;color:var(--gold-2);margin:10px 0 8px}
.pledges p{font-size:13px;margin:0}
ul.pledges{padding:0;margin-bottom:0}

/* grade ticker */
.ticker{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--night-2)}
.ticker-track{display:flex;width:max-content;animation:tick 60s linear infinite}.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker ul{display:flex;list-style:none;margin:0;padding:0}
.ticker a{display:flex;align-items:baseline;gap:12px;padding:22px 34px;border-right:1px solid var(--rule)}
.ticker b{font:400 26px Georgia,serif;color:var(--gold-2)}.ticker span{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#b9b3a7}
.ticker a:hover b{color:#fff}
@keyframes tick{to{transform:translateX(-50%)}}

/* supply cards */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.photo-card figure{margin:0 0 22px;aspect-ratio:4/3;overflow:hidden;background:#cfc8bb}
.photo-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.photo-card:hover img{transform:scale(1.04)}
.photo-card p{font-size:13px;line-height:1.8;color:var(--ink-2);margin:0 0 16px}
.who{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;border-top:1px solid var(--rule-ink);padding-top:14px;color:#56605c}

/* comparison directory */
.directory{margin-top:84px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:26px 0 22px}
.chip{border:1px solid #26323a40;background:none;color:var(--ink);padding:9px 15px;font-size:11px;letter-spacing:1px;cursor:pointer;border-radius:30px}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.search{margin-left:auto;display:flex;align-items:center;gap:10px;border-bottom:1px solid #26323a55;padding:6px 0}
.search input{border:0;background:none;font:inherit;font-size:13px;color:var(--ink);width:220px;outline:0}
.dir-count{font-size:11px;color:var(--ink-2);margin-top:14px;letter-spacing:1px}

/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 6px;border-top:1px solid var(--rule-ink)}
.dark .table-wrap,.darker .table-wrap,.band .table-wrap{border-color:var(--rule)}
table.data{width:100%;border-collapse:collapse;font-size:13px;line-height:1.5;font-variant-numeric:tabular-nums}
table.data th,table.data td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--rule-ink);vertical-align:top}
table.data thead th{font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:400;color:#7a6a52;padding-top:16px;padding-bottom:14px;white-space:nowrap}
table.data tbody th{font-weight:400;font-family:Georgia,serif;font-size:14px;min-width:160px}
table.data td{color:#3d4848}
table.data tbody tr:hover{background:#26323a0a}
.dark table.data th,.dark table.data td,.darker table.data th,.darker table.data td,.band table.data th,.band table.data td{border-color:var(--rule)}
.dark table.data td,.darker table.data td,.band table.data td{color:#d6d3cb}
.dark table.data thead th,.darker table.data thead th,.band table.data thead th{color:var(--gold)}
table.data a{border-bottom:1px solid #c2903f88}table.data a:hover{color:#9a6a2c}
table.data .pill{display:inline-block;font-size:10px;letter-spacing:1px;border:1px solid #26323a33;border-radius:20px;padding:3px 9px;margin:0 6px 6px 0;white-space:nowrap}
.sheet{margin-top:70px}.sheet h3{font-size:28px;margin:0 0 12px}
.sheet-note{font-size:13px;line-height:1.8;color:var(--ink-2);max-width:860px;margin:0 0 22px}
.foot{font-size:11px;line-height:1.7;color:var(--ink-2);margin-top:12px}.foot p{margin:4px 0}
.refs{margin-top:44px;font-size:12px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:8px 24px}.refs a{border-bottom:1px solid #c2903f;color:var(--ink)}

/* grade cards */
.grade-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;border-top:1px solid var(--rule-ink);padding-top:26px;margin-bottom:28px}
.grade-head h2{margin:0;font-size:clamp(30px,3.4vw,48px)}.grade-head p{margin:8px 0 0;font-size:12px;letter-spacing:1px;color:var(--ink-2)}
.grade-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;background:var(--rule-ink);border:1px solid var(--rule-ink)}
.grade-card{display:flex;flex-direction:column;gap:8px;height:100%;padding:24px 22px 20px;background:var(--paper);transition:background .25s,color .25s}
.grade-card .gc-note{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#8a7a62}
.grade-card b{font:400 34px Georgia,serif;letter-spacing:-1px;color:var(--ink)}
.grade-card .gc-value{font-size:13px;color:var(--ink-2)}
.grade-card .gc-go{margin-top:auto;padding-top:16px;font-size:10px;letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:10px;color:#9a6a2c}
.grade-card:hover{background:var(--ink);color:var(--paper)}.grade-card:hover b{color:var(--gold-2)}.grade-card:hover .gc-value,.grade-card:hover .gc-note{color:#cfc8bb}.grade-card:hover .gc-go{color:var(--gold)}

/* facts */
.facts{display:grid;gap:0;margin-top:34px}
.facts div{display:grid;grid-template-columns:120px 1fr;gap:20px;border-top:1px solid var(--rule);padding:16px 0}
.facts span{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);padding-top:3px}
.facts b{font-weight:400;font-size:14px;line-height:1.6}
.facts a{border-bottom:1px solid var(--gold)}
.source-note{font-size:12px;line-height:1.75;color:#b9b6ad;border-left:2px solid var(--gold);padding-left:16px;margin:20px 0}

/* checks list */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:0}
.checks li{display:flex;gap:16px;align-items:flex-start;border-top:1px solid var(--rule-ink);padding:16px 0;font-size:15px;line-height:1.6}
.checks .ico{color:#9a6a2c;margin-top:3px}
.dark .checks li,.darker .checks li{border-color:var(--rule)}.dark .checks .ico,.darker .checks .ico{color:var(--gold)}

/* packing */
.pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 46px}
.pack h3{font-size:26px}.pack>p{font-size:13px;line-height:1.8;color:#d6d3cb}
.pack ul{list-style:none;padding:0;margin:16px 0 0}.pack li{font-size:12px;line-height:1.6;padding:9px 0 9px 18px;border-top:1px solid var(--rule);position:relative;color:#e2ded5}
.pack li:before{content:'';position:absolute;left:0;top:16px;width:6px;height:1px;background:var(--gold)}
.pack-pic{width:100%;aspect-ratio:1;background:#d9d7d2 url('/assets/img/packaging-atlas.webp') no-repeat;background-size:300% 300%;filter:saturate(.9)}
.pack-pic.drums{background-position:0 0}.pack-pic.jumbo{background-position:50% 0}.pack-pic.polycube{background-position:100% 0}.pack-pic.polybag{background-position:0 50%}.pack-pic.kraft{background-position:50% 50%}.pack-pic.bitutainer{background-position:100% 50%}.pack-pic.bulk{background-position:0 100%}.pack-pic.flexi{background-position:50% 100%}.pack-pic.isotank{background-position:100% 100%}
.pic-note{display:block;font-size:9px;letter-spacing:1px;color:#8d9693;margin:8px 0 6px}
table.mini{width:100%;border-collapse:collapse;margin-top:22px;font-size:12px;line-height:1.5}
table.mini caption{text-align:left;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);padding-bottom:10px}
table.mini th,table.mini td{text-align:left;border-top:1px solid var(--rule);padding:9px 10px 9px 0;vertical-align:top;font-weight:400}
table.mini tbody th{color:#bdb8ad;width:48%}table.mini td{color:#f0ece4}
table.mini thead th{font-size:9px;letter-spacing:1px;color:#a7a196;text-transform:uppercase}
.routes{display:grid;gap:0}
.route-item{display:grid;grid-template-columns:112px 1fr;gap:26px;align-items:center;border-top:1px solid var(--rule);padding:22px 0}
.route-item h3{margin:0 0 6px}.route-item p{margin:0;font-size:13px;line-height:1.7;color:#d6d3cb}

/* terms */
.term{border-top:1px solid var(--rule);padding-top:22px}
.term .code{display:block;font:400 64px/1 Georgia,serif;color:var(--gold-2);letter-spacing:-2px;margin:14px 0 8px}
.term h3{margin:0 0 8px;font-size:20px}.term>p{font-size:13px;line-height:1.75;color:#d8d5cd;margin:0}
.term details{margin-top:14px}.term summary{cursor:pointer;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);list-style:none}.term summary::-webkit-details-marker{display:none}
.term summary:before{content:'+ '}.term details[open] summary:before{content:'− '}
.term details p{font-size:13px;line-height:1.75;color:#e6e2da}
.term-route{width:100%;height:auto;margin:22px 0 4px;overflow:visible}
.term-route path{fill:none;stroke-linecap:round}.tr-base{stroke:#ffffff40;stroke-width:2}.tr-paid{stroke:var(--gold);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.7,.2,1)}
.tr-insured{stroke:#9fc1c8;stroke-width:2;stroke-dasharray:.02 .02}
.in .tr-paid{stroke-dashoffset:0}
.tr-node{fill:var(--night);stroke:#ffffffa0;stroke-width:1.5}.tr-flag path{stroke:#fff;stroke-width:1.4}.tr-pennant{fill:var(--gold);stroke:none!important}
.term-route text{fill:#cfc8bb;font-size:9px;letter-spacing:.5px;font-family:Arial,sans-serif}.term-route .tr-place{fill:#8f9a97}

/* process */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.steps li{border-top:1px solid var(--rule-ink);padding-top:22px}
.steps .num{font-size:12px;color:#9a6a2c}.steps p{font-size:13px;line-height:1.8;color:var(--ink-2)}
.manifest{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:56px;border-top:1px solid var(--rule-ink);padding-top:20px;font-size:10px;letter-spacing:3px;color:#56605c}
.manifest span:after{content:'→';margin-left:36px;color:#c2903f}.manifest span:last-child:after{content:''}

/* accordions */
.qa{border-top:1px solid var(--rule)}.paper .qa{border-color:var(--rule-ink)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:30px;padding:24px 0;font:400 22px/1.3 Georgia,serif}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;width:14px;height:14px;position:relative;margin-top:8px}.qa summary i:before,.qa summary i:after{content:'';position:absolute;left:0;top:6px;width:14px;height:1px;background:var(--gold);transition:transform .3s}
.qa summary i:after{transform:rotate(90deg)}.qa[open] summary i:after{transform:rotate(0)}
.qa .a{padding:0 0 22px;max-width:720px}.qa .a p{font-size:14px;line-height:1.85;margin:0 0 12px;color:#d8d5cd}.paper .qa .a p{color:var(--ink-2)}
.paper .qa summary i:before,.paper .qa summary i:after{background:#9a6a2c}
.aside-card{background:var(--ink);color:var(--paper);padding:36px 32px}.aside-card p{font-size:14px;line-height:1.8;color:#d8d5cd}
.aside-card .button{border-color:#ffffff55}

/* uses + gallery */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gal{position:relative;padding:0;border:0;background:#cfc8bb;cursor:zoom-in;aspect-ratio:3/4;overflow:hidden}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}.gal:hover img{transform:scale(1.04)}
.gal span{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;font-size:11px;text-align:left;color:#fff;background:linear-gradient(0deg,#000a,transparent)}
.viewer{border:0;padding:0;background:transparent;max-width:92vw;max-height:92vh}.viewer::backdrop{background:#070c10ee}
.viewer img{max-width:92vw;max-height:84vh;object-fit:contain}.viewer p{color:#ddd;font-size:12px;margin:10px 0 0}
.viewer .ibtn{position:fixed;top:20px;right:20px}

/* next product + CTA bands */
.portal{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;border-top:1px solid var(--rule);padding-top:30px}
.portal b{display:block;font:400 clamp(30px,3.6vw,52px)/1.1 Georgia,serif;letter-spacing:-1px}
.portal small{display:block;margin-top:14px;font-size:14px;color:#cfc8bb}
.portal .win{aspect-ratio:16/9;overflow:hidden}.portal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}.portal:hover img{transform:scale(1.05)}
.cta-band{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.cta-band h2{margin:0 0 12px}.cta-band p{margin:0;font-size:14px;color:#ddd8ce;max-width:560px;line-height:1.8}

/* about */
.image-led{display:grid;grid-template-columns:7fr 5fr;min-height:640px}
.image-led figure{margin:0;overflow:hidden}.image-led img{width:100%;height:100%;object-fit:cover}
.image-led .side{background:var(--ink);padding:70px 8% 70px 9%;display:flex;flex-direction:column;justify-content:center}
.image-led .side p{font-size:14px;line-height:1.85;color:#d8d5cd}
.strip{position:relative;height:72vh;min-height:420px;overflow:hidden}
.strip img{width:100%;height:100%;object-fit:cover}
.strip .cap{position:absolute;left:7%;bottom:44px;right:7%;display:flex;justify-content:space-between;gap:30px;align-items:flex-end;color:#fff;text-shadow:0 2px 20px #0008}
.strip .cap span{font-size:10px;letter-spacing:3px;text-transform:uppercase}.strip .cap b{font:400 clamp(24px,3vw,40px) Georgia,serif;max-width:620px;text-align:right}

/* contact + form */
.contact-grid{display:grid;grid-template-columns:7fr 4fr;gap:70px;align-items:start}
.quote-form{background:var(--paper);color:var(--ink);padding:44px 40px}
.form-track{display:flex;align-items:center;gap:16px;margin-bottom:30px}.form-track span:first-child{flex:1;height:2px;background:#26323a22;position:relative}
.form-bar{position:absolute;inset:0 auto 0 0;background:#c2903f;width:0;transition:width .4s}
.form-pct{font-family:monospace;font-size:11px;color:#7a6a52}
fieldset{border:0;padding:0;margin:0 0 36px}
legend{font:400 26px Georgia,serif;padding:0;margin-bottom:20px;display:flex;flex-direction:column;gap:10px}
legend .eyebrow{font-family:Arial,sans-serif;color:#9a6a2c}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}.span2{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:8px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#56605c}
.fld em{text-transform:none;letter-spacing:0;font-size:11px}
.fld input,.fld select,.fld textarea{font:inherit;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);background:transparent;border:0;border-bottom:1px solid #26323a55;padding:10px 0;border-radius:0;width:100%}
.fld select{appearance:none;background:linear-gradient(45deg,transparent 50%,#9a6a2c 50%) right 6px center/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,#9a6a2c 50%) right 0 center/6px 6px no-repeat}
.fld textarea{resize:vertical;border:1px solid #26323a33;padding:12px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:#9a6a2c}
.fld [aria-invalid=true]{border-color:#b0452f}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pills label{position:relative}.pills input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pills span{display:block;border:1px solid #26323a40;padding:10px 20px;font-size:12px;letter-spacing:1px;border-radius:30px}
.pills input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pills input:focus-visible+span{outline:2px solid #9a6a2c;outline-offset:3px}
.hp{position:absolute;left:-9999px}
.form-note{padding:16px 18px;font-size:13px;line-height:1.7;margin-bottom:26px;border-left:3px solid #c2903f;background:#26323a0d}
.form-note.err{border-color:#b0452f}
.form-note .actions{margin-top:12px;gap:12px 26px}.form-note .button{padding:8px 0;font-size:11px;margin:0;border-color:#26323a55}
.form-small{font-size:11px;color:#6d7572;margin:16px 0 0}
.quote-form .cta{margin-top:6px}
.info{list-style:none;padding:0;margin:0}
.info li{display:flex;gap:18px;border-top:1px solid var(--rule);padding:18px 0}
.info small{display:block;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.info a,.info b,.info button{font-size:15px;font-weight:400}
.ico-round{width:40px;height:40px;border-radius:50%;border:1px solid #ffffff2e;display:grid;place-items:center;flex:none;color:var(--gold-2)}
.linkbtn{background:none;border:0;padding:0;color:inherit;cursor:pointer;border-bottom:1px solid var(--gold);font:inherit}
.contact-photo{margin:30px 0 0;aspect-ratio:4/3;overflow:hidden}.contact-photo img{width:100%;height:100%;object-fit:cover}

/* credits */
.cred{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:34px 26px}
.cred img{aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:14px;background:#cfc8bb}
.cred b{display:block;font:400 17px/1.3 Georgia,serif;margin-bottom:6px}.cred small{font-size:11px;line-height:1.6;color:var(--ink-2)}.cred a{border-bottom:1px solid #c2903f}

/* 404 */
.lost{min-height:100svh;display:flex;align-items:center}
.lost .big{font:400 clamp(120px,22vw,300px)/.9 Georgia,serif;letter-spacing:-10px;color:var(--gold-2);margin:20px 0}

/* footer */
footer.site{background:var(--night-2);border-top:1px solid #ffffff1a;padding:80px 7% 34px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1.4fr 1.2fr;gap:50px}
.foot-grid h4{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:400;margin:0 0 18px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:13px;color:#cfc8bb}
.foot-grid a:hover,.foot-grid button:hover{color:#fff}
.foot-grid .lead{font:400 24px/1.3 Georgia,serif;margin:18px 0 0;color:#e8e3d8}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:70px;padding-top:26px;border-top:1px solid #ffffff1a;font-size:9px;letter-spacing:1px;color:#a6afad;text-transform:uppercase}
.foot-base a{border-bottom:1px solid #ffffff33}
.foot-grid li{display:flex;align-items:center;gap:10px}.foot-grid .ico{color:var(--gold);width:15px;height:15px}
.foot-grid button{background:none;border:0;color:inherit;font:inherit;padding:0;cursor:pointer;display:flex;align-items:center;gap:10px}

/* bottom bar (phones) */
.bottom-bar{display:none}

/* support dialog */
dialog.support{border:0;padding:0;background:transparent;color:var(--paper);width:min(460px,92vw)}
dialog.support::backdrop{background:#070c10cc;backdrop-filter:blur(3px)}
.sup-card{background:var(--night);border-top:2px solid var(--gold);padding:40px 34px 30px;position:relative}
.sup-card h2{font-size:34px;margin:14px 0 6px}.sup-card .hint{font-size:12px;color:#a7a196;margin:0 0 18px}
.sup-card .close{position:absolute;top:16px;right:16px}
.sup-card ul{list-style:none;margin:0;padding:0}.sup-card li{display:flex;gap:16px;align-items:center;border-top:1px solid var(--rule);padding:14px 0}
.sup-card li a{font:400 19px Georgia,serif}.sup-card li small{display:block;font-size:12px;color:#bdb8ad;margin-top:3px}

/* reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:1100px){
  nav.main{gap:22px}.demo{display:none}.grid4,.steps{grid-template-columns:repeat(2,1fr)}.pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}.menu-panel{grid-template-columns:repeat(2,1fr);transform:translateX(-50%)}
}
@media (max-width:900px){
  :root{--head:66px}
  nav.main,.head-actions .cta,.head-actions .wa{display:none}
  .burger{display:inline-grid}
  .panel{width:88%;margin-left:6%;margin-right:6%;padding:32px 24px}
  .opening{padding:calc(var(--head) + 50px) 6% 110px}.opening .panel{width:100%;margin:0}
  .split,.grid2,.grid3,.cards3,.contact-grid,.image-led,.portal{grid-template-columns:1fr}
  .image-led figure{aspect-ratio:4/3}.image-led .side{padding:56px 8%}
  .sec{padding:70px 6% 80px}.wrap{padding-left:6%;padding-right:6%}
  .stage .coordinate{display:none}.timeline{width:62%}.scroll-label{font-size:0;gap:0}
  .shade{background:linear-gradient(0deg,rgba(8,15,25,.7),transparent 40%,rgba(8,16,24,.5) 80%)}
  .search{margin-left:0;width:100%}.search input{width:100%}
  table.data tbody th{min-width:130px;position:sticky;left:0;background:var(--paper);z-index:1}
  .dark table.data tbody th,.darker table.data tbody th,.band table.data tbody th{background:var(--night)}
  .quote-form{padding:30px 22px}.fields{grid-template-columns:1fr}
  .bottom-bar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:38;background:rgba(10,18,22,.96);border-top:1px solid #ffffff1c;padding-bottom:env(safe-area-inset-bottom)}
  .bottom-bar a,.bottom-bar button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 0 9px;background:none;border:0;color:var(--paper);font:inherit;font-size:10px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
  .bottom-bar .go{background:var(--gold);color:#1b1610}
  body{padding-bottom:62px}
  .strip .cap{flex-direction:column;align-items:flex-start}.strip .cap b{text-align:left}
  .route-item{grid-template-columns:84px 1fr}
}
@media (max-width:600px){
  h1{font-size:clamp(38px,11vw,56px);letter-spacing:-2px}
  .grid4,.steps,.pack-grid,.pledges,.gallery{grid-template-columns:1fr}
  .brand span.word{display:none}
  .foot-grid{grid-template-columns:1fr}
  .term .code{font-size:52px}
  .grade-head{flex-direction:column;align-items:flex-start}
  .stage .eyebrow-top{top:calc(var(--head) + 24px);font-size:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}.stage .media{transform:none}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#port{background:#352923}

/* ── one scene behind the whole page ────────────────────────
   The stage is fixed full-screen; every section scrolls over it as
   translucent glass, so the ship keeps moving with all the content.
   The film (home) and photos (inner pages) advance with whole-page scroll. */
.stage{position:fixed;inset:0;height:100svh;z-index:0}
.voyage{position:static}
.content-flow{margin-top:0;z-index:1}
main>*:not(.voyage){position:relative;z-index:1}
.stage .hud{transition:opacity .5s ease}
.stage.moved .eyebrow-top,.stage.moved .coordinate,.stage.moved .scroll-label{opacity:0}
.panel+.panel{margin-top:22vh}

/* sections become glass over the scene */
.sec.dark,.sec.darker{background:rgba(9,17,22,.66)}
.sec.paper{background:rgba(238,233,223,.9)}
.sec.paper.paper-2{background:rgba(228,222,210,.92)}
.ticker{background:rgba(8,14,18,.72)}
.band>.bg{display:none}
.band:after{background:linear-gradient(90deg,rgba(8,16,24,.78),rgba(8,16,24,.42) 55%,rgba(8,16,24,.7))}
.sec.dark h2,.sec.darker h2,.band h2,.band .lede,.panel h1{text-shadow:0 2px 24px rgba(4,8,12,.55)}
/* gaps of open scene between chapters */
main>.sec+.sec{margin-top:0}
.sec.band{padding-top:150px;padding-bottom:150px}
@media (max-width:900px){.sec.band{padding-top:100px;padding-bottom:100px}}

/* lighter paper: the film shows through the white sections too.
   Secondary text is darkened so it keeps contrast over bright frames. */
.sec.paper{background:rgba(238,233,223,.62)}
.sec.paper.paper-2{background:rgba(228,222,210,.7)}
.paper{--ink-2:#353e3b}
.paper td{color:#2b3434}
.grade-card{background:rgba(238,233,223,.45)}
.quote-form{background:rgba(238,233,223,.82)}
.paper h2,.paper h3,.paper .lede,.paper .sheet-note,.paper table.data{text-shadow:0 0 18px rgba(238,233,223,.75)}

/* past the opening, the HUD steps back: labels fade, the thin gold
   progress line stays, so nothing sits on top of the content */
.stage .bottom .ticks,.stage .bottom .status{transition:opacity .5s ease}
.stage.moved .bottom .ticks,.stage.moved .bottom .status{opacity:0}
.stage.moved .bottom{left:0;right:0;bottom:0;gap:0}
.stage.moved .timeline{width:100%;max-width:none}
.stage.moved .track{height:2px;background:transparent}

/* no HUD text: just the thin gold progress line along the bottom edge */
.stage .bottom.progress-only{left:0;right:0;bottom:0;gap:0}
.progress-only .timeline{width:100%;max-width:none}
.progress-only .track{background:transparent}

/* logo: the trimmed PNG on its own small white tile, larger so the lettering reads */
.brand img.logo{width:auto;height:58px;border-radius:4px;object-fit:contain;background:#fff;padding:2px}
footer.site .brand img.logo{height:72px}
@media (max-width:900px){.brand img.logo{height:50px}}

/* logo in a white circle (replaces the square tile) */
.brand img.logo{height:60px;width:60px;border-radius:50%;padding:6px;object-fit:contain;background:#fff}
footer.site .brand img.logo{height:76px;width:76px;padding:8px}
@media (max-width:900px){.brand img.logo{height:50px;width:50px;padding:5px}}

/* boxes over the scene alternate sides: right, left, right … */
.content-flow>.panel:nth-child(even){margin-left:5%;margin-right:auto}
.content-flow>.opening:nth-child(even){justify-content:flex-start}
.shade{background:linear-gradient(90deg,rgba(8,16,24,.32),rgba(8,16,24,.1) 50%,rgba(8,16,24,.32)),linear-gradient(0deg,rgba(8,15,25,.55),transparent 26%,transparent 80%,rgba(7,16,24,.45))}
@media (max-width:900px){.content-flow>.panel:nth-child(even){margin-left:6%;margin-right:6%}}

/* tidy headings: every section reads label → title → line, and columns
   side by side start on the same line */
.section-top{justify-content:flex-start}
.section-top+h2,.section-top+.split{margin-top:34px}
.split>h2,.split>*>h2:first-child{margin-top:0}
.split>.photo-card figure{margin-top:6px}
.sec .lede{margin-bottom:34px}
.rule-items>*>h3:first-child,.rule-items>*>.label+h3{margin-top:12px}

/* glass boxes on open film, alternating sides */
.band.boxed:after{background:linear-gradient(0deg,rgba(8,16,24,.25),rgba(8,16,24,.1))}
.box{width:min(60%,820px);background:rgba(8,16,24,.76);padding:44px 40px 40px;border-top:1px solid #ffffff22}
.box-left{margin-right:auto}.box-right{margin-left:auto}
.box h2{margin:28px 0 18px;font-size:clamp(30px,3vw,48px)}.box .lede{color:#ddd8ce;margin-bottom:28px}
.box .grid2{gap:28px 34px}
@media (max-width:900px){.box{width:100%;padding:32px 24px}}
.routes .route-item:first-child{border-top:0;padding-top:6px}
.split>div>.qa:first-child{border-top:0}
.split>div>.qa:first-child summary{padding-top:4px}

/* logo circle: a touch smaller, with less white above the flame */
.brand img.logo{height:58px;width:58px;padding:3px 5px 7px}
footer.site .brand img.logo{height:74px;width:74px;padding:4px 7px 9px}
@media (max-width:900px){.brand img.logo{height:48px;width:48px;padding:2px 4px 6px}}

/* KEYTON ENERGY wordmark in Cinzel (the theme's font, matching the logo lettering) */
@font-face{font-family:'Cinzel';src:url('/assets/fonts/cinzel.woff2') format('woff2');font-weight:400 900;font-display:swap}
.brand .word,footer.site .brand{font-family:'Cinzel',Georgia,serif;font-weight:700;letter-spacing:2.5px;font-size:19px}

/* logo: full-size circle again, logo raised a little to sit in its middle */
.brand img.logo{height:60px;width:60px;padding:2px 6px 9px}
footer.site .brand img.logo{height:76px;width:76px;padding:3px 8px 12px}
@media (max-width:900px){.brand img.logo{height:50px;width:50px;padding:2px 5px 7px}}

/* inner pages (products, about, contact, credits): sections more solid,
   the scene shows only between them */
body:not([data-scene=home]) .sec.paper{background:rgba(238,233,223,.95)}
body:not([data-scene=home]) .sec.paper.paper-2{background:rgba(228,222,210,.96)}
body:not([data-scene=home]) .sec.dark,body:not([data-scene=home]) .sec.darker{background:rgba(9,17,22,.9)}
body:not([data-scene=home]) .band:after{background:linear-gradient(90deg,rgba(8,16,24,.86),rgba(8,16,24,.66) 55%,rgba(8,16,24,.82))}
body:not([data-scene=home]) .grade-card{background:rgba(238,233,223,.9)}
body:not([data-scene=home]) .quote-form{background:rgba(238,233,223,.96)}

/* ── table grid and text alignment ───────────────────────── */
table.data{table-layout:fixed}
table.data th,table.data td{padding:14px 18px 14px 0;overflow-wrap:anywhere}
table.data thead th{font-size:10px;letter-spacing:1.5px;vertical-align:bottom;white-space:normal;line-height:1.4}
table.data tbody th{min-width:0}
table.data .v{text-align:center;padding-left:8px;padding-right:8px;white-space:nowrap}
table.data td.v{font-variant-numeric:tabular-nums}
table.data .m{color:#6a716d;font-size:12px}
.dark table.data .m,.darker table.data .m,.band table.data .m{color:#a9a49a}
table.data tbody tr>*{vertical-align:middle}
.directory-table td:last-child{text-align:right;padding-right:0}
.directory-table .pill{margin:2px 4px 2px 0}
.sheet h3,.sheet-note,.sheet .foot{max-width:none}
.sheet-note{max-width:900px}
.foot{border-left:2px solid #c2903f55;padding-left:14px}
/* packing mini tables: label and value columns line up across cards */
table.mini{table-layout:fixed}
table.mini tbody th{width:46%}
table.mini.loads th,table.mini.loads td{width:auto}
table.mini td,table.mini th{overflow-wrap:anywhere}
/* text rhythm */
.lede,.sheet-note,.panel p,.rule-items p,.photo-card p,.pack>p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
@media (max-width:900px){table.data .v{white-space:normal}}
table.data thead th.m{font-size:10px;color:#7a6a52}
.dark table.data thead th.m,.darker table.data thead th.m,.band table.data thead th.m{color:var(--gold)}
/* tables keep a firmer backing over the film so rows read cleanly */
.paper .table-wrap{background:rgba(238,233,223,.62)}
.dark .table-wrap,.darker .table-wrap{background:rgba(9,17,22,.55)}
.section-top+.table-wrap{margin-top:22px}
.pack table.mini{margin-top:20px}
.pack table.mini caption{padding-top:4px}

/* tables: near-solid backing so the film never washes the rows out */
.paper .table-wrap{background:rgba(242,238,230,.94)}
.dark .table-wrap,.darker .table-wrap{background:rgba(9,17,22,.9)}
.paper .table-wrap table.data{padding:0 18px}
.table-wrap{padding:0 20px}
table.data td{color:#26302f}.dark table.data td,.darker table.data td{color:#e4e0d8}

/* phones: every table row becomes a card: name on top, then label · value */
@media (max-width:760px){
  .table-wrap{overflow:visible;padding:0;border-top:0;background:none!important}
  table.data{display:block;min-width:0!important;table-layout:auto}
  table.data colgroup,table.data thead{display:none}
  table.data tbody{display:grid;gap:12px}
  table.data tr{display:block;padding:16px 16px 6px;background:rgba(242,238,230,.96);border:1px solid var(--rule-ink)}
  .dark table.data tr,.darker table.data tr,.band table.data tr{background:rgba(9,17,22,.92);border-color:var(--rule)}
  table.data tbody th{display:block;position:static;background:none!important;min-width:0;font-size:17px;line-height:1.35;padding:0 0 12px;margin-bottom:4px;border-bottom:1px solid var(--rule-ink)}
  .dark table.data tbody th,.darker table.data tbody th{border-color:var(--rule)}
  table.data td,table.data td.v,table.data td.m{display:grid;grid-template-columns:minmax(96px,40%) 1fr;gap:12px;align-items:baseline;text-align:left;white-space:normal;padding:9px 0;font-size:13px}
  table.data td::before{content:attr(data-label);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7a6a52;line-height:1.5}
  .dark table.data td::before,.darker table.data td::before{color:var(--gold)}
  table.data tr>:last-child{border-bottom:0}
  table.data tbody tr:hover{background:inherit}
  .directory-table .pill{font-size:10px}
  .sheet{margin-top:48px}.sheet h3{font-size:23px}
}
.directory-table td:last-child{text-align:left;padding-right:18px}
@media (max-width:760px){
  table.data,table.data tbody,table.data tr{width:100%;max-width:100%;min-width:0!important}
  table.data tbody{grid-template-columns:minmax(0,1fr)}
  table.data td,table.data td.v,table.data td.m{grid-template-columns:minmax(0,38%) minmax(0,1fr)}
  table.data td>*{min-width:0}
  .filters{gap:8px}.chip{padding:8px 12px;font-size:10px}
}
@media (min-width:901px){.split-7-4{grid-template-columns:7fr 4fr}.split-even{grid-template-columns:1fr 1fr}}
.pills-wrap{display:flex;flex-wrap:wrap;gap:4px 0}
@media (max-width:760px){table.data td,table.data td:last-child,.directory-table td:last-child{padding-right:0!important;padding-left:0!important}}
@media (max-width:600px){.grade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grade-card{padding:16px 14px 14px;gap:6px}.grade-card b{font-size:25px}.grade-card .gc-value{font-size:12px}.grade-card .gc-go{font-size:9px;letter-spacing:1px;padding-top:10px}}
.mobile-menu>a.cta{display:inline-flex;padding:16px 22px;border-bottom:0;margin-top:28px}
body:has(.mobile-menu:not([hidden])) header.site{background:rgba(10,18,22,.98)}

/* closing section: sales desk (left) + next shipment (right), no empty stretch */
.sec.band.finale{padding-top:90px;padding-bottom:90px}
.finale-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:stretch}
.finale-grid .box{width:auto;margin:0;display:flex;flex-direction:column}
.finale-grid .box .actions{margin-top:auto;padding-top:24px}
.finale .info li{border-color:var(--rule)}
.finale .info a,.finale .info b{color:#f0ece4}
.ports{margin-top:22px;border-top:1px solid var(--rule);padding-top:18px}
.ports p{margin:8px 0 0;font:400 18px Georgia,serif;color:var(--gold-2)}
.finale-checks li{border-color:var(--rule);font-size:14px;padding:12px 0;color:#e6e2da}
.finale-checks .ico{color:var(--gold)}
@media (max-width:900px){.finale-grid{grid-template-columns:1fr;gap:20px}.sec.band.finale{padding-top:60px;padding-bottom:60px}}

/* ── export lane route card (as on keytonenergy.com) ─────── */
.route-card{position:relative;overflow:hidden;aspect-ratio:4/4.2;isolation:isolate;background:#1c242a}
.route-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.route-card:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(200deg,rgba(11,9,7,.1),rgba(11,9,7,.75))}
.route{position:absolute;inset:8% 6%;width:88%;height:84%;overflow:visible}
.route path{fill:none;stroke:#f2b25f;stroke-width:2;stroke-dasharray:.012 .014;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(247,148,29,.9))}
.route circle{fill:#f7a440;filter:drop-shadow(0 0 8px #f7941d)}
.route-ship{position:absolute;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#1b1610;box-shadow:0 0 0 6px rgba(234,184,108,.25),0 0 24px rgba(247,148,29,.8);will-change:transform;opacity:0}
.route-ship .ico{width:20px;height:20px}
.route-badge{position:absolute;left:20px;bottom:20px;right:20px;padding:14px 18px;background:#1c242ab0;font-size:13px;color:#fff;display:flex;flex-direction:column;gap:6px}
.route-badge b{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#e6b294;font-weight:400}

/* ── export lanes map (closing section) ──────────────────── */
.lanes{width:100%;height:auto;display:block;margin:6px 0 22px;overflow:visible}
.lane-grid path{stroke:#ffffff10;stroke-width:1}
.lane{fill:none;stroke:#f2b25f;stroke-width:2.2;stroke-dasharray:3 7;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(247,148,29,.85));animation:lane-flow 1.6s linear infinite}
@keyframes lane-flow{to{stroke-dashoffset:-20}}
.hub circle{fill:var(--gold)}.hub .pulse{fill:none;stroke:var(--gold);stroke-width:2;transform-origin:262px 176px;animation:hub-pulse 2.4s ease-out infinite}
@keyframes hub-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
.dest circle{fill:#1c242a;stroke:#f2b25f;stroke-width:2}
.lanes text{fill:#e8dcc6;font:10px Arial,sans-serif;letter-spacing:2.5px}.lanes .hub-label{fill:var(--gold-2)}
.lane-ship{opacity:0}.lane-ship .glow{fill:rgba(247,148,29,.22)}.lane-ship .hull path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lane-facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--rule);padding-top:18px;margin-top:auto}
.lane-facts p{margin:8px 0 0;font:400 17px/1.4 Georgia,serif;color:var(--gold-2)}
@media (max-width:600px){.lane-facts{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.lane-ship{opacity:1}}

/* the footer sits above the fixed scene (it was hidden behind the film) */
footer.site{position:relative;z-index:2}

/* the placeholder frame is the film's first frame: show it sharp, so the ship
   is there at once on every device, even before (or without) the film */
.stage .footage-poster{filter:none;transform:none}