/* Kintsugi Industries layer, on top of the Kintsugi Nation base styles in style.css.
   Same plum lacquer and gold seam; adds the shop, cart, forms and scroll set pieces. */

.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--gold); color: #1a0f22; padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; margin-top: 48px; }
.center-p { text-align: center; margin: 18px auto 0; }
.lede { color: var(--stone); font-size: 18px; max-width: 52ch; margin-top: 22px; }
h2 em, h1 em { font-style: italic; color: var(--gold); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split h2, .steps-copy h2, .hrail-head h2 { font-size: clamp(38px, 5.4vw, 72px); margin-top: 16px; }
.row-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

/* ---------- header: cart pill + mobile menu ---------- */
.nav a { white-space: nowrap; }
.cart-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #1a0f22; font: 700 11px/1 var(--body); letter-spacing: 0; }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--bone); transition: transform .4s, top .4s; }
.menu-btn span:first-child { top: 18px; } .menu-btn span:last-child { top: 25px; }
.menu-open .menu-btn span:first-child { top: 21.5px; transform: rotate(45deg); }
.menu-open .menu-btn span:last-child { top: 21.5px; transform: rotate(-45deg); }
@media (max-width: 900px) {
  .menu-btn { display: block; z-index: 2; }
  .site-header .nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 22px; background: rgba(12,9,17,.97);
    clip-path: circle(0% at calc(100% - 40px) 36px); transition: clip-path .7s cubic-bezier(.76,0,.24,1); }
  .site-header .nav a, .site-header .nav a:not(.cart) { display: block; font: 400 34px/1 var(--display); text-transform: none; letter-spacing: 0; color: var(--bone); }
  .site-header .nav .cart { font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
  .menu-open .nav { clip-path: circle(150% at calc(100% - 40px) 36px); }
}

/* ---------- the page seam ---------- */
.page-seam { position: fixed; left: 10px; top: 0; bottom: 0; width: 24px; z-index: 40; pointer-events: none; }
.page-seam svg { width: 100%; height: 100%; overflow: visible; }
.page-seam path { fill: none; vector-effect: non-scaling-stroke; }
.seam-bg { stroke: rgba(201,168,98,.10); stroke-width: 1; }
.seam-gold { stroke: var(--gold-hi); stroke-width: 1.6; stroke-dasharray: 1; filter: drop-shadow(0 0 4px rgba(236,212,151,.8)); }
@media (max-width: 700px) { .page-seam { left: 2px; width: 12px; opacity: .7; } }

/* ---------- split headline words ---------- */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.sw > span { display: inline-block; will-change: transform; }
[data-scrub-words] .sw { overflow: visible; }

/* ---------- intro: words light up as you read ---------- */
.big-read { font: 400 clamp(28px, 3.8vw, 54px)/1.18 var(--display); max-width: 24ch; margin-top: 26px; letter-spacing: -.005em; }
.stats { grid-template-columns: repeat(4, 1fr); margin-top: 72px; }
.stats b small { font-size: .5em; margin-left: 2px; color: var(--stone); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; row-gap: 28px; } .stats div:nth-child(3) { border-left: 0; padding-left: 0; } }

/* ---------- horizontal rail ---------- */
.hrail { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 4vh; }
.hrail-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; width: 100%; }
.hrail-progress { width: min(240px, 30vw); height: 1px; background: var(--clay); }
.hrail-progress i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px var(--gold); }
.hrail-track { display: flex; gap: clamp(24px, 4vw, 64px); padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); padding-right: 10vw; width: max-content; perspective: 1200px; }
.hrail-card { position: relative; width: clamp(240px, 26vw, 340px); flex: none; }
.hrail-card .product-media { width: min(100%, 42vh); margin-inline: auto; }
.hrail-num { position: absolute; top: -10px; left: -6px; z-index: 2; font: italic 400 64px/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(201,168,98,.45); }
.hrail-end a { display: grid; align-content: center; gap: 16px; height: 100%; min-height: 40vh; text-decoration: none; padding: 32px; border-radius: 999px 999px 18px 18px; box-shadow: inset 0 0 0 1px rgba(201,168,98,.3); text-align: center; }
.hrail-end b { font: 400 40px/1.05 var(--display); }
.hrail-end em { color: var(--gold); }
.hrail-end a:hover { box-shadow: inset 0 0 0 1px var(--gold), 0 0 60px -20px var(--gold); }

/* ---------- product tiles ---------- */
.product-media { display: block; }
.product-media img, .product-media .plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.product:hover .product-media img, .product:hover .product-media .plate { transform: scale(1.05); }
.plate text { font: italic 400 34px var(--display); fill: rgba(239,232,220,.92); letter-spacing: 1px; }
.plate-seams path { fill: none; stroke: var(--gold); stroke-width: .7; opacity: .75; filter: drop-shadow(0 0 1.5px rgba(236,212,151,.9)); stroke-linejoin: round; }
.product h3 { font-size: 24px; }
.product h3 a { text-decoration: none; }
.tag { z-index: 2; }
.filters sup { font: 400 10px var(--mono); color: var(--gold); margin-left: 2px; }

/* ---------- product page ---------- */
.product-page { padding-top: calc(130px + env(safe-area-inset-top, 0px)); }
.pd { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding-bottom: clamp(60px, 8vw, 120px); }
.pd-media { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 24px 24px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #2a1a40, #170f22 70%); box-shadow: inset 0 0 0 1px rgba(201,168,98,.2); }
.pd-media img, .pd-media .plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-info h1 { font-size: clamp(40px, 5vw, 72px); margin-top: 16px; }
.pd-info .eyebrow { text-decoration: none; }
.pd-price { font: 400 24px/1 var(--mono); color: var(--gold-hi); margin-top: 22px; }
.pd-blurb { color: var(--stone); font-size: 18px; margin-top: 22px; max-width: 46ch; }
.pd-flag { margin-top: 18px; padding: 16px 18px; border-left: 2px solid var(--gold); background: rgba(201,168,98,.06); font-size: 15px; color: var(--stone); }
.pd-flag b { color: var(--bone); } .pd-flag a { color: var(--gold-hi); }
.pd-buy { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.pd-specs { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 14px; }
.pd-specs li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; font-size: 14px; padding-top: 14px; background: var(--hair) top / 100% 1px no-repeat; }
.pd-specs b { font-weight: 600; } .pd-specs span { color: var(--stone); }
@media (max-width: 860px) { .pd { grid-template-columns: 1fr; } .pd-media { max-width: 420px; width: 100%; margin-inline: auto; } }

/* ---------- cart drawer ---------- */
.cart-drawer { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.cart-scrim { position: absolute; inset: 0; background: rgba(5,3,8,.6); opacity: 0; transition: opacity .5s; }
.cart-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: #120c1a; box-shadow: -1px 0 0 rgba(201,168,98,.25), -40px 0 80px -20px rgba(0,0,0,.8); transform: translateX(102%); transition: transform .6s cubic-bezier(.76,0,.24,1); }
.cart-drawer[aria-hidden="false"] { pointer-events: auto; }
.cart-drawer[aria-hidden="false"] .cart-scrim { opacity: 1; }
.cart-drawer[aria-hidden="false"] .cart-panel { transform: none; }
.cart-panel header { display: flex; justify-content: space-between; align-items: center; padding: 24px; }
.cart-x { background: none; border: 0; color: var(--bone); font-size: 28px; cursor: pointer; line-height: 1; }
.cart-lines { list-style: none; margin: 0; padding: 0 24px; flex: 1; overflow: auto; overscroll-behavior: contain; }
.cart-lines li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 16px 0; background: linear-gradient(var(--clay), var(--clay)) bottom / 100% 1px no-repeat; }
.cart-lines b { display: block; font-weight: 500; } .cart-lines span { color: var(--gold); font: 400 13px var(--mono); }
.cart-thumb { position: relative; aspect-ratio: 4/5; border-radius: 40px 40px 8px 8px; overflow: hidden; background: #1c1229; }
.cart-thumb img, .cart-thumb .plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cart-empty { display: block !important; color: var(--stone); } .cart-empty a { color: var(--gold-hi); }
.qty { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; }
.qty button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(201,168,98,.35); background: none; color: var(--bone); cursor: pointer; }
.cart-panel footer { padding: 24px; display: grid; gap: 12px; background: var(--hair) top / 100% 1px no-repeat; }
.cart-total { display: flex; justify-content: space-between; font-size: 18px; }
.cart-total b { font: 400 22px var(--mono); color: var(--gold-hi); }
.cart-note, .cart-msg { font-size: 13px; color: var(--stone); min-height: 1em; }
.cart-panel .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; padding-block: 28px; background: var(--hair) top / 100% 1px no-repeat, var(--hair) bottom / 100% 1px no-repeat; }
.marquee-row { display: flex; width: max-content; align-items: center; gap: 40px; padding-right: 40px; }
.marquee span { font: italic 400 clamp(36px, 6vw, 84px)/1 var(--display); white-space: nowrap; }
.marquee span:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1px var(--gold); }
.marquee i { width: 18px; height: 18px; flex: none; background: url(../media/heart-mark.png) center / contain no-repeat; }

/* ---------- pinned steps ---------- */
.steps { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: 100px 40px; }
.steps-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; width: 100%; }
.steps ol { list-style: none; padding: 0; margin: 34px 0 32px; display: grid; gap: 6px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 0; opacity: .3; transition: opacity .5s; }
.step b { font: 400 13px/1.9 var(--mono); color: var(--gold); }
.step h3 { font-size: 26px; }
.step p { color: var(--stone); font-size: 15px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s ease, opacity .5s, margin .5s; }
.step.on { opacity: 1; } .step.on p { max-height: 6em; opacity: 1; margin-top: 8px; }
.steps-stage { position: relative; aspect-ratio: 1; max-height: 70vh; width: 100%; }
.steps-rail { position: absolute; left: -24px; top: 10%; bottom: 10%; width: 1px; background: var(--clay); }
.steps-fill { display: block; height: 100%; background: var(--gold); transform: scaleY(0); transform-origin: top; box-shadow: 0 0 10px var(--gold); }
.step-art { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.92) rotate(-2deg); transition: opacity .7s, transform .9s cubic-bezier(.2,.7,.2,1); }
.step-art.on { opacity: 1; transform: none; }
.step-art > div { position: relative; width: 62%; aspect-ratio: 4/5; border-radius: 6px; }
.step-art span { position: absolute; inset: 10%; border-radius: 2px; background: url(../media/heart.png) center / 70% no-repeat, radial-gradient(ellipse at 50% 40%, #3a2160, #160e22); }
.frame-up { border: 1.5px dashed rgba(201,168,98,.55); animation: float 4s ease-in-out infinite; }
.frame-up::after { content: "\2191"; position: absolute; left: 50%; bottom: -54px; translate: -50% 0; font: 400 36px var(--display); color: var(--gold); }
.frame-proof { background: #f3ede2; box-shadow: 0 30px 60px -30px #000; transform: rotate(3deg); }
.frame-proof em { position: absolute; right: -18px; top: 18px; rotate: 12deg; padding: 6px 12px; border: 1.5px solid #b23a3a; color: #b23a3a; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .12em; font-style: normal; }
.frame-print { background: linear-gradient(145deg, #2a1d10, #6b5021 40%, #c9a862 50%, #6b5021 60%, #2a1d10); padding: 0; box-shadow: 0 40px 80px -30px rgba(201,168,98,.4); }
.frame-print span { inset: 7%; }
.frame-box { background: #6b5034; border-radius: 4px; box-shadow: 0 30px 60px -30px #000; }
.frame-box span { inset: 44% 0 auto; height: 12%; background: rgba(239,232,220,.8); border-radius: 0; }
@keyframes float { 50% { transform: translateY(-10px); } }
@media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr; } .steps-stage { max-height: 34vh; order: -1; } .steps-rail { display: none; } .steps { padding-top: 90px; } .steps ol { margin: 18px 0; } .step { padding: 8px 0; } }

/* ---------- friends tease: orbiting labels ---------- */
.orbit { position: relative; aspect-ratio: 1; max-width: 460px; margin-inline: auto; width: 100%; }
.orbit img { position: absolute; inset: 22%; width: 56%; height: 56%; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(74,42,120,.6)); }
.orbit span { position: absolute; left: 50%; top: 50%; font: italic 400 22px var(--display); color: var(--gold-hi); animation: orbit 22s linear infinite; animation-delay: calc(var(--d) * -4.4s); offset-path: none; }
.orbit span:nth-of-type(1) { --d: 0; } .orbit span:nth-of-type(2) { --d: 1; } .orbit span:nth-of-type(3) { --d: 2; } .orbit span:nth-of-type(4) { --d: 3; } .orbit span:nth-of-type(5) { --d: 4; }
@keyframes orbit { from { transform: translate(-50%, -50%) rotate(0deg) translateX(min(210px, 40vw)) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg) translateX(min(210px, 40vw)) rotate(-360deg); } }

/* ---------- school: stacking cards ---------- */
.school-tease { padding-block: clamp(80px, 12vw, 160px); position: relative; }
.school-head { display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; margin-bottom: 64px; }
.school-head h2 { font-size: clamp(38px, 5.4vw, 72px); margin-top: 16px; }
.school-crest { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(74,42,120,.6)); }
@media (max-width: 700px) { .school-head { grid-template-columns: 1fr; } .school-crest { width: 120px; } }
.stack { display: grid; gap: 28px; }
.stack-card { position: sticky; top: calc(100px + var(--i) * 18px); display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 56px); align-items: start;
  padding: clamp(28px, 4vw, 56px); border-radius: 28px; min-height: 280px; transform-origin: top center;
  background: linear-gradient(160deg, #24143a, #150e20 70%); box-shadow: inset 0 0 0 1px rgba(201,168,98,.22), 0 -20px 60px -30px rgba(0,0,0,.9); }
.stack-num { font: italic 400 clamp(56px, 8vw, 110px)/.9 var(--display); color: transparent; -webkit-text-stroke: 1px var(--gold); }
.stack-card h3 { font-size: clamp(30px, 3.6vw, 48px); margin: 14px 0 12px; }
.stack-card p { color: var(--stone); max-width: 52ch; margin-bottom: 20px; }
.school-head-page .split, .school-head-page.page-head .wrap { align-items: center; }
.school-crest-lg { width: min(300px, 60%); height: auto; margin-inline: auto; filter: drop-shadow(0 40px 80px rgba(74,42,120,.7)); }

/* ---------- full-bleed custom panel ---------- */
.custom-zoom { padding-block: clamp(40px, 6vw, 80px); }
.zoom-panel { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; will-change: clip-path; }
.zoom-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.55); }
.zoom-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,9,17,.95) 10%, rgba(12,9,17,.2) 70%); }
.zoom-copy { position: relative; z-index: 1; padding: var(--gutter); padding-bottom: clamp(48px, 10vh, 120px); max-width: 860px; margin-left: max(0px, calc((100vw - var(--max)) / 2)); }
.zoom-copy h2 { font-size: clamp(40px, 6vw, 88px); margin: 18px 0 22px; }
.zoom-copy p { color: var(--bone); opacity: .85; max-width: 52ch; font-size: 18px; margin-bottom: 30px; }

/* ---------- tints: the page shifts color as sections pass ---------- */
body { transition: background-color 1.2s ease; }
body.tint-plum { background-color: #150c22; }
body.tint-gold { background-color: #16100f; }

/* ---------- forms ---------- */
.form-card { display: grid; gap: 18px; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: linear-gradient(160deg, rgba(43,23,69,.55), rgba(22,16,32,.35)); box-shadow: inset 0 0 0 1px rgba(201,168,98,.18), 0 40px 80px -40px rgba(0,0,0,.8); }
.form-card label { display: grid; gap: 8px; font-size: 13px; letter-spacing: .04em; color: var(--stone); }
.form-card input:not([type=radio]):not([type=checkbox]):not([type=file]), .form-card textarea, .form-card select {
  font: 400 16px var(--body); color: var(--bone); background: rgba(12,9,17,.5); border: 1px solid rgba(201,168,98,.22); border-radius: 12px; padding: 13px 14px; width: 100%; min-width: 0; }
.form-card select option { background: #120c1a; }
.form-card input:focus, .form-card textarea:focus, .form-card select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,98,.15); }
.form-card .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-card .two { grid-template-columns: 1fr; } }
.form-card .check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; color: var(--bone); font-size: 14px; }
.form-card .check input { width: 18px; height: 18px; accent-color: var(--gold); margin-top: 2px; }
.form-card button[disabled] { opacity: .5; cursor: progress; }
.form-msg { font-size: 14px; color: #f0a8a8; min-height: 1.2em; }
.form-msg.ok { color: var(--gold-hi); }
.size-pick { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.size-pick legend { font-size: 13px; color: var(--stone); margin-bottom: 8px; padding: 0; }
.size-pick label { display: block; }
.size-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.size-pick span { display: inline-block; padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(201,168,98,.25); font: 400 13px var(--mono); color: var(--bone); cursor: pointer; }
.size-pick input:checked + span { background: var(--gold-metal); color: #1a0f22; box-shadow: none; }
.size-pick input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.drop { position: relative; display: grid !important; place-items: center; min-height: 220px; border-radius: 20px; border: 1.5px dashed rgba(201,168,98,.4); cursor: pointer; text-align: center; padding: 20px; transition: border-color .3s, background .3s; overflow: hidden; }
.drop:hover, .drop.over { border-color: var(--gold-hi); background: rgba(201,168,98,.06); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-label { font: italic 400 20px var(--display); color: var(--bone); position: relative; z-index: 1; }
.has-file .drop-label { font: 400 12px var(--mono); color: var(--stone); align-self: end; }
.drop-preview img { max-height: 200px; max-width: 100%; border-radius: 8px; box-shadow: 0 20px 40px -20px #000; }
.ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 16px; }
.ticks li { position: relative; padding-left: 30px; color: var(--stone); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 16px; height: 1.5px; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.ticks b { color: var(--bone); font-weight: 600; }
.sizes { margin-top: 36px; } .sizes p { color: var(--stone); margin-top: 10px; }

/* ---------- friends page ---------- */
.friend { padding-block: clamp(60px, 9vw, 120px); background: var(--hair) top / 84% 1px no-repeat; }
.friend header { max-width: 640px; margin: 0 auto 48px; text-align: center; padding-inline: var(--gutter); }
.friend h2 { font-size: clamp(38px, 5vw, 64px); margin: 12px 0 16px; }
.friend header p { color: var(--stone); margin-bottom: 18px; }
.friend .products { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- journal ---------- */
.article-head h1 { font-size: clamp(36px, 5.6vw, 80px); max-width: 18ch; }
.article-head .post-meta { flex-wrap: wrap; }
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; }
.read-progress i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px var(--gold); }
.next-post { text-align: center; }
.next-link { text-decoration: none; display: inline-block; margin-top: 16px; }
.next-link h2 { font-size: clamp(32px, 5vw, 64px); max-width: 20ch; transition: color .3s; }
.next-link:hover h2 { color: var(--gold-hi); }

/* ---------- footer ---------- */
.foot-grid { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; }
.foot-brand { display: flex; gap: 20px; align-items: start; }
.foot-brand img { width: 64px; height: auto; flex: none; }
.foot-brand p { line-height: 1.7; }
.site-footer nav { flex-direction: column; gap: 10px !important; }
.foot-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; font-size: 12px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  .orbit span, .frame-up { animation: none; }
  .stack-card { position: static; }
  .page-seam { display: none; }
}

/* ===== Transform scene ===== */
/* Neptune 4 Max -> mech dragon, driven by js/transform.js. JARVIS cyan accent: #39e1ff */
.transform { position: relative; height: 700vh; border-top: 1px solid var(--clay); }
.tf-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; --tf-e: .15;
  background: radial-gradient(ellipse 70% 60% at 50% 52%, #2a1646 0%, #1a0f2a 38%, var(--lacquer) 78%); }
.tf-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tf-grid { position: absolute; inset: 0; pointer-events: none; opacity: calc(.18 + var(--tf-e) * .55);
  background: repeating-linear-gradient(0deg, rgba(57,225,255,.045) 0 1px, transparent 1px 4px); }
.tf-grid::before { content: ""; position: absolute; left: -50%; right: -50%; bottom: -8%; height: 52%;
  transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
  background: linear-gradient(rgba(57,225,255,.22) 1px, transparent 1px) 0 0 / 64px 64px,
              linear-gradient(90deg, rgba(57,225,255,.22) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%); mask-image: linear-gradient(to top, #000 0%, transparent 85%); }
.tf-grid::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(12,9,17,.85) 100%); }
.tf-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 48%, rgba(190,248,255,.95), rgba(57,225,255,.45) 35%, transparent 70%); mix-blend-mode: screen; }
.tf-beat { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12vh; max-width: 520px; pointer-events: none;
  opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.tf-beat.on { opacity: 1; transform: none; }
.tf-beat.right { left: auto; text-align: right; }
.tf-beat h2 { font: 400 clamp(34px, 5vw, 68px)/1.02 var(--display); letter-spacing: -.005em; text-shadow: 0 2px 30px rgba(12,9,17,.8); }
.tf-beat h2 em { font-style: italic; color: var(--gold-hi); }
.tf-beat p { margin-top: 16px; color: var(--stone); font-size: 17px; max-width: 40ch; text-shadow: 0 1px 14px rgba(12,9,17,.9); }
.tf-beat.right p { margin-left: auto; }
.tf-beat .eyebrow { display: block; margin-bottom: 16px; }
.tf-hud { position: absolute; top: calc(96px + env(safe-area-inset-top, 0px)); right: var(--gutter); display: grid; gap: 5px; justify-items: end; text-align: right;
  padding: 12px 14px; min-width: 230px; pointer-events: none;
  font: 400 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: #39e1ff; text-shadow: 0 0 8px rgba(57,225,255,.65); background: rgba(8,14,22,.28); }
.tf-hud::before, .tf-hud::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid rgba(57,225,255,.8); box-shadow: 0 0 6px rgba(57,225,255,.5); }
.tf-hud::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.tf-hud::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.tf-hud b { font: 300 clamp(30px, 4vw, 48px)/1 var(--mono); letter-spacing: .02em; color: #bff6ff; text-shadow: 0 0 14px rgba(57,225,255,.8); }
.tf-hud [data-tf=stage] { color: #e9fcff; }
.tf-hud .tf-hud-line { color: rgba(57,225,255,.75); font-size: 10px; }
@media (max-width: 700px) {
  .tf-beat { bottom: 7vh; }
  .tf-beat p { font-size: 15px; }
  .tf-hud { top: calc(78px + env(safe-area-inset-top, 0px)); min-width: 0; padding: 9px 11px; font-size: 9.5px; letter-spacing: .1em; }
  .tf-hud .tf-hud-line { font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) { .tf-beat { transition: none; } }