/* ===================================================================== WILKINSON INTERNATIONAL PROCUREMENT — premium institutional demo (v2) Dark institutional luxury. Playfair Display (display) + Inter (UI). Cinematic, continuous background. Pinned advisory sequence. Sections: tokens → base → living bg → shared → buttons → nav → menu → rail → progress → pointer glow → hero → strip → mandate system → capabilities → domains panels → coverage/orbit → principles → request form → footer → motion utils → responsive → reduced-motion. ===================================================================== */ /* ----------------------------- TOKENS ------------------------------ */ :root { --obsidian: #07080A; --graphite-900: #0B0D11; --graphite-850: #101319; --graphite-800: #14171D; --graphite-700: #1B1F27; --navy-deep: #0A111C; --navy-panel: #0E1825; --ivory: #F3F0E8; --ivory-2: #E7E3D8; --ivory-dim: #C7C4BA; --muted: #8A8F99; --muted-2: #949AA5; /* lifted one notch so the smallest labels hold AA even over the gold glow */ --gold: #C9A24B; --gold-bright: #E0BE6A; --gold-soft: #B8893C; --bronze: #9A7B43; --platinum: #C8CDD6; --line: rgba(201, 205, 214, 0.09); --line-strong: rgba(201, 205, 214, 0.16); --line-gold: rgba(201, 162, 75, 0.30); --field-line: #646973; /* >=3:1 form-control border for WCAG 1.4.11 */ --glass: rgba(16, 19, 25, 0.62); --glass-line: rgba(255, 255, 255, 0.06); --shadow-soft: 0 24px 60px -24px rgba(0, 0, 0, 0.7); --shadow-gold: 0 18px 50px -20px rgba(201, 162, 75, 0.28); /* ---- CONTENT SURFACES (opaque, grounded panels) --------------------- The ambient field (aurora + grid + grain) must read BEHIND the content, never through it. Each surface is a faint top->bottom gradient painted OVER a solid charcoal base, so the panel is fully opaque (no bleed) yet still reads as a dimensional surface — lit top edge, deeper base — not a flat black rectangle. The bases sit a hair above --obsidian so panels clearly float ABOVE the background. One consistent elevation scale: rail (recessed) < surface (default card) < raised (focal panel / form). NOTE: .market / .ledger__list / .ledger__panel all share --surface-panel (one opaque charcoal) so the whole Coverage section reads as one surface. */ --surface: linear-gradient(180deg, rgba(33, 39, 51, 0.45), rgba(8, 10, 14, 0.38)), #0E1016; --surface-raised: linear-gradient(180deg, rgba(40, 47, 62, 0.48), rgba(10, 12, 17, 0.40)), #11141B; --surface-panel: #0E1117; /* unified Coverage-section surface - flat, opaque, neutral charcoal: no blue cast, no gradient, no background bleed */ --surface-solid: #0F1218; --surface-line: rgba(201, 205, 214, 0.12); /* crisper outer edge for opaque panels (between --line and --line-strong) */ --shadow-panel: 0 18px 44px -28px rgba(0, 0, 0, 0.82), inset 0 1px 0 rgba(255, 255, 255, 0.04); --serif: "Playfair Display", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px); --section-pad: clamp(84px, 9vw, 142px); /* base section rhythm — generous but cohesive, breathes on large viewports */ --radius: 14px; --radius-sm: 9px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --nav-h: 76px; } /* Background is a single STATIC composition (faint topographic gold strata over a still aurora wash + locked grid/vignette + grain). No per-chapter mood, no motion. */ /* ----------------------------- RESET / BASE ------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; /* Reserve the scrollbar gutter always, so locking scroll during the loading intro (html.is-preloading { overflow: hidden }) cannot shift the layout. No CLS. */ scrollbar-gutter: stable; } body { font-family: var(--sans); font-weight: 400; color: var(--ivory); background: var(--obsidian); line-height: 1.6; letter-spacing: 0.01em; overflow-x: hidden; min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } ::selection { background: rgba(201, 162, 75, 0.28); color: var(--ivory); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; transform: translateY(-150%); background: var(--gold); color: #0B0D11; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; transition: transform 0.2s var(--ease); } .skip-link:focus { transform: translateY(0); } /* ===================== STATIC AMBIENT BACKGROUND ================= */ .bg-field { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; } /* Still aurora wash — soft navy/gold radials, no drift, no hue shift. */ .bg-aurora { position: absolute; inset: -35%; background: radial-gradient(40vmax 40vmax at 74% 6%, rgba(22, 36, 56, 0.65), transparent 60%), radial-gradient(34vmax 34vmax at 12% 26%, rgba(201, 162, 75, 0.07), transparent 58%), radial-gradient(52vmax 52vmax at 50% 118%, rgba(14, 26, 41, 0.8), transparent 62%), radial-gradient(30vmax 30vmax at 88% 78%, rgba(18, 28, 44, 0.5), transparent 60%); } /* Faint topographic gold strata — drawn once on a DPR-capped canvas (see script.js). Sits under the grid / vignette / grain so it stays felt-not-seen. */ .bg-cartograph { position: absolute; inset: 0; width: 100%; height: 100%; } .bg-grid { position: absolute; inset: 0; opacity: 0.4; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 92px 92px, 92px 92px; -webkit-mask-image: radial-gradient(130vmax 100vmax at 50% -5%, #000 28%, transparent 80%); mask-image: radial-gradient(130vmax 100vmax at 50% -5%, #000 28%, transparent 80%); } /* Static vignette — fixed focus pool that keeps body text legible over the field. */ .bg-vignette { position: absolute; inset: 0; background: radial-gradient(125vmax 95vmax at 50% 42%, transparent 44%, rgba(5,6,8,0.9) 100%); opacity: 0.6; } .bg-noise { position: absolute; inset: 0; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ----------------------------- SHARED ------------------------------ */ .section-shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* screen-reader-only (visually hidden but announced) */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.5rem); line-height: 1.08; letter-spacing: -0.012em; color: var(--ivory); text-wrap: balance; } p { text-wrap: pretty; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); } .eyebrow__tick { width: 30px; height: 1px; background: var(--line-gold); position: relative; } .eyebrow__tick::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); } .chapter-label { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(20px, 3vw, 32px); } .chapter-label span { color: var(--gold); font-weight: 600; } .section-head { max-width: 760px; margin-bottom: clamp(44px, 6vw, 78px); } /* ----------------------------- BUTTONS ----------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 100px; font-family: var(--sans); font-weight: 500; font-size: 0.92rem; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.4s var(--ease), transform 0.12s var(--ease-out); } /* Primary CTAs are static and professional — no magnetic follow. Restrained hover, crisp press: the button depresses 1px on click for clear, grown-up feedback. */ .btn:active { transform: translateY(1px); } .btn--lg { padding: 17px 32px; font-size: 1rem; } .btn__arrow { transition: transform 0.35s var(--ease-out); } .btn--gold { background: linear-gradient(180deg, var(--gold-bright), var(--gold-soft)); color: #14110A; box-shadow: var(--shadow-gold); } .btn--gold::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent 45%); opacity: 0.5; transition: opacity 0.3s var(--ease); pointer-events: none; } .btn--gold:hover { box-shadow: 0 24px 60px -18px rgba(201,162,75,0.5); } .btn--gold:hover::after { opacity: 0.85; } .btn--gold:active { box-shadow: 0 8px 22px -14px rgba(201,162,75,0.55); } .btn--ghost { color: var(--ivory); border: 1px solid var(--line-strong); background: rgba(255,255,255,0.02); } .btn--ghost:hover { border-color: var(--line-gold); color: var(--gold-bright); background: rgba(201,162,75,0.05); } .btn--ghost:hover .btn__arrow { transform: translateX(4px); } /* ----------------------------- NAV --------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 120; height: var(--nav-h); display: flex; align-items: center; transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease); border-bottom: 1px solid transparent; } .nav.is-scrolled { background: rgba(8, 9, 12, 0.72); backdrop-filter: blur(12px) saturate(120%); border-bottom-color: var(--line); } .nav__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 13px; color: var(--gold); } .brand__mark { display: inline-flex; color: var(--gold); transition: transform 0.6s var(--ease-out); } .brand:hover .brand__mark { transform: rotate(45deg); } .brand__text { display: flex; flex-direction: column; line-height: 1; } .brand__name { font-family: var(--serif); font-weight: 600; font-size: 1.18rem; color: var(--ivory); letter-spacing: 0.01em; } .brand__sub { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .nav__links { display: flex; gap: 28px; margin-left: auto; } .nav__links a { position: relative; font-size: 0.88rem; color: var(--ivory-dim); letter-spacing: 0.02em; padding: 6px 0; transition: color 0.25s var(--ease); } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--gold); transition: width 0.3s var(--ease); } .nav__links a:hover { color: var(--ivory); } .nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; } .nav__links a.is-active { color: var(--gold); } .nav__cta { margin-left: 4px; padding: 11px 22px; font-size: 0.85rem; } .nav__toggle { display: none; } /* Mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: 115; background: linear-gradient(180deg, rgba(8,9,12,0.98), rgba(10,17,28,0.99)); backdrop-filter: blur(8px); display: flex; flex-direction: column; justify-content: safe center; padding: calc(var(--nav-h) + 12px) var(--gutter) 40px; gap: 30px; /* Short viewports (landscape phones) make the centred menu taller than the screen; without scroll the first link clips under the brand and the CTA + email fall below the fold. safe-center stops the top-clip and overflow-y lets the overflow scroll so every item stays reachable. */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); } .mobile-menu.is-open { opacity: 1; pointer-events: auto; } .mobile-menu[hidden] { display: none; } .mobile-menu__links { display: flex; flex-direction: column; gap: 4px; } .mobile-menu__links a { display: flex; align-items: baseline; gap: 16px; font-family: var(--serif); font-size: clamp(1.7rem, 9vw, 2.4rem); font-weight: 500; color: var(--ivory); padding: 12px 0; border-bottom: 1px solid var(--line); transition: color 0.25s var(--ease), padding-left 0.3s var(--ease); } .mobile-menu__links a:hover { color: var(--gold); padding-left: 8px; } .mm-idx { font-family: var(--mono); font-size: 0.8rem; color: var(--gold); letter-spacing: 0.1em; } .mobile-menu__cta { align-self: flex-start; margin-top: 8px; min-height: 48px; } .mobile-menu__email { display: inline-block; align-self: flex-start; padding: 8px 0; font-family: var(--mono); font-size: 0.82rem; color: var(--muted); letter-spacing: 0.04em; } /* Landscape phones / short viewports: tighten the menu so the five links, the CTA and the email all fit (and stay scrollable if they still don't). */ @media (max-height: 540px) { .mobile-menu { gap: 10px; padding-top: calc(var(--nav-h) + 6px); padding-bottom: 24px; } .mobile-menu__links a { font-size: clamp(1.25rem, 5.5vw, 1.6rem); padding: 9px 0; } .mobile-menu__cta { margin-top: 4px; } } /* ----------------------------- RAIL — chapter scrollspy ------------ A quiet vertical page-index. Muted track behind beaded chapter nodes, a gold fill + leading marker that track scroll, and one expanded gold row for the active chapter. Fill/marker move via transform only (no reflow); --rail-progress (0–1) and --rail-span (px) are set in script.js. */ .rail { position: fixed; top: 50%; right: clamp(16px, 2.2vw, 38px); transform: translateY(-50%); z-index: 90; --rail-node: 7px; /* node diameter — also fixes the track axis */ --rail-progress: 0; /* 0–1 scroll fraction (set by JS) */ --rail-span: 0px; /* px distance first→last node (set by JS) */ } .rail__list { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } /* vertical track — top/height set by JS to span exactly node-centre→node-centre */ .rail__track { position: absolute; top: 0; height: 0; pointer-events: none; right: calc(var(--rail-node) / 2); width: 1px; transform: translateX(50%); background: var(--line-strong); } /* gold progress fill — grows downward; scaleY keeps it off the layout path */ .rail__fill { position: absolute; inset: 0; width: 100%; background: linear-gradient(180deg, rgba(154,123,67,0.55), var(--gold)); box-shadow: 0 0 7px rgba(201,162,75,0.4); transform-origin: top; transform: scaleY(var(--rail-progress)); transition: transform 0.16s var(--ease-out); } /* leading marker — the precision dot riding the head of the fill */ .rail__thumb { position: absolute; left: 50%; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 9px 1px rgba(224,190,106,0.6); transform: translate(-50%, -50%) translateY(calc(var(--rail-progress) * var(--rail-span))); transition: transform 0.16s var(--ease-out); } /* rows — node is pinned to the track axis; label/number grow leftward only */ .rail__item a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 5px 0; padding-right: calc(var(--rail-node) + 16px); } .rail__label { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted-2); max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.45s var(--ease), opacity 0.32s var(--ease), color 0.3s var(--ease); } .rail__num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.66rem; letter-spacing: 0.12em; color: var(--muted-2); opacity: 0.55; min-width: 16px; text-align: right; transition: color 0.3s var(--ease), opacity 0.3s var(--ease); } /* short gold hairline drawn from the node toward the number on the active row */ .rail__tick { position: absolute; top: 50%; right: var(--rail-node); width: 0; height: 1px; background: var(--gold); opacity: 0; transform-origin: right center; transform: translateY(-50%); transition: width 0.4s var(--ease), opacity 0.3s var(--ease); } /* beaded node sitting on the track — hollow ring lets the gold thread pass through */ .rail__node { position: absolute; right: 0; top: 50%; width: var(--rail-node); height: var(--rail-node); border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); transform: translateY(-50%); transition: box-shadow 0.35s var(--ease), background 0.3s var(--ease), transform 0.35s var(--ease-out); } /* hover — subtle lift only; never the sole signal (scroll drives active state) */ .rail__item a:hover .rail__num { opacity: 1; color: var(--ivory-dim); } .rail__item a:hover .rail__label { max-width: 140px; opacity: 1; color: var(--ivory-dim); } .rail__item a:hover .rail__node { box-shadow: inset 0 0 0 1px var(--line-gold); } /* active chapter — gold number, revealed title, extended hairline, lit bead */ .rail__item.is-active .rail__num { color: var(--gold-bright); opacity: 1; } .rail__item.is-active .rail__label { color: var(--gold-bright); max-width: 140px; opacity: 1; } .rail__item.is-active .rail__tick { width: 13px; opacity: 1; } .rail__item.is-active .rail__node { background: var(--gold-bright); box-shadow: 0 0 0 1px rgba(224,190,106,0.45), 0 0 11px 2px rgba(224,190,106,0.5); } /* the lit bead breathes — premium, motion-allowed only */ @media (prefers-reduced-motion: no-preference) { .rail__item.is-active .rail__node { animation: rail-pulse 3.2s var(--ease) infinite; } @keyframes rail-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(224,190,106,0.45), 0 0 9px 2px rgba(224,190,106,0.42); } 50% { box-shadow: 0 0 0 1px rgba(224,190,106,0.5), 0 0 14px 3px rgba(224,190,106,0.58); } } } /* mid-width desktop/tablet: keep the slim instrument, reveal the title on hover only (so the expanded label never reaches into content where side margins are tight) */ @media (max-width: 1200px) { .rail__item.is-active .rail__label { max-width: 0; opacity: 0; } .rail__item.is-active a:hover .rail__label { max-width: 140px; opacity: 1; } } /* ----------------------------- SCROLL PROGRESS --------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 130; background: transparent; } .scroll-progress__bar { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--bronze), var(--gold-bright)); box-shadow: 0 0 12px rgba(201,162,75,0.5); } /* ----------------------------- CUSTOM CURSOR ----------------------- */ .cursor { position: fixed; top: 0; left: 0; z-index: 140; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease); will-change: transform; } html.has-cursor .cursor { opacity: 1; } .cursor__ring { position: absolute; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid var(--line-gold); border-radius: 50%; box-shadow: 0 0 18px -2px rgba(201,162,75,0.22); transition: width 0.25s var(--ease), height 0.25s var(--ease), margin 0.25s var(--ease), border-color 0.25s var(--ease), border-radius 0.25s var(--ease), background 0.25s var(--ease), opacity 0.2s var(--ease); } .cursor__dot { position: absolute; top: 0; left: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--gold-bright); border-radius: 50%; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } /* link / button hover — ring expands, warm gold */ .cursor.is-link .cursor__ring { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-color: var(--gold); background: rgba(201,162,75,0.05); } .cursor.is-button .cursor__ring { width: 50px; height: 50px; margin: -25px 0 0 -25px; border-color: var(--gold); background: rgba(201,162,75,0.12); box-shadow: 0 0 26px -2px rgba(201,162,75,0.4); } /* card / panel / row hover — soft rounded rectangle */ .cursor.is-card .cursor__ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 13px; border-color: var(--line-gold); background: rgba(201,162,75,0.04); } /* over text input — hide custom cursor so the native caret reads clearly */ .cursor.is-input { opacity: 0 !important; } /* hide native cursor only when custom is active; keep it on text fields */ html.has-cursor, html.has-cursor * { cursor: none !important; } html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto !important; } /* ============================== HERO ============================== */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 6vh) var(--gutter) 16vh; overflow: hidden; } /* Hero stage: a transparent scene so the fixed ambient field shows behind the 3D coordinate-network orb (canvas) and the drifting perspective grid plane. The orb is the hero's centerpiece; the vignette keeps the headline legible. */ .hero__scene { position: absolute; inset: 0; z-index: 0; } .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__grid-plane { position: absolute; left: 50%; bottom: -10%; width: 200%; height: 78%; transform: translateX(-50%) perspective(680px) rotateX(70deg); transform-origin: 50% 100%; background-image: linear-gradient(var(--line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--line-strong) 1px, transparent 1px); background-size: 64px 64px, 64px 64px; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 72%); mask-image: linear-gradient(to top, #000 0%, transparent 72%); opacity: 0.5; animation: gridDrift 26s linear infinite; } @keyframes gridDrift { from { background-position: 0 0, 0 0; } to { background-position: 0 64px, 64px 0; } } .hero__vignette { position: absolute; inset: 0; background: radial-gradient(78vmax 60vmax at 66% 22%, transparent 38%, rgba(7,8,10,0.5) 100%), linear-gradient(180deg, rgba(7,8,10,0.35) 0%, transparent 24%, transparent 58%, rgba(7,8,10,0.92) 100%); } .hero__fallback-glow { position:absolute; inset:0; background: radial-gradient(50vmax 50vmax at 64% 40%, rgba(201,162,75,0.12), transparent 60%); } .hero__inner { position: relative; z-index: 2; max-width: 1000px; } .eyebrow--hero { margin-bottom: clamp(24px, 4vw, 36px); } .hero__title { font-family: var(--serif); font-weight: 600; font-size: clamp(2.5rem, 1.1rem + 6vw, 5.6rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ivory); margin-bottom: clamp(24px, 3.4vw, 36px); } .hero__title .line { display: block; } .hero__title .line--accent { font-style: italic; color: var(--gold-bright); } .hero__lede { max-width: 56ch; font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem); color: var(--ivory-dim); line-height: 1.66; margin-bottom: clamp(30px, 4vw, 42px); } .hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } /* ============================== STRIP ============================== */ .strip { position: relative; background: linear-gradient(180deg, rgba(15,18,24,0.86), rgba(9,10,14,0.84)); overflow: hidden; padding: 19px 0; } .strip::before, .strip::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); } .strip::before { top: 0; } .strip::after { bottom: 0; } .strip__track { display: flex; width: max-content; } .strip.is-live .strip__track { animation: stripScroll 42s linear infinite; } .strip__group { display: flex; align-items: center; gap: 34px; padding-right: 34px; } .strip__group span { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory-dim); white-space: nowrap; } .strip__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.7; } @keyframes stripScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ===================== MANDATE SYSTEM (pinned sequence) =========== */ .mandate { position: relative; padding-block: var(--section-pad); } .mandate__sticky { } .mandate__layout { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(36px, 6vw, 96px); align-items: center; } .mandate__heading { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem); line-height: 1.06; letter-spacing: -0.015em; margin-bottom: 18px; text-wrap: balance; } .mandate__intro { color: var(--ivory-dim); font-size: 1.05rem; max-width: 46ch; margin-bottom: clamp(28px, 4vw, 40px); } /* Premium stage rail — a quiet vertical index; one gold active state, no progress bars, no remaining-count clutter. Active = gold accent bar + gold number + ivory medium text; completed = muted gold; future = muted gray (hierarchy via weight/accent, not color alone). */ .seqbar { display: flex; flex-direction: column; border-left: 1px solid var(--line); margin: clamp(26px, 3.5vw, 38px) 0 clamp(30px, 4.5vw, 46px); } .seqbar__seg { position: relative; } .seqbar__seg::before { content: ""; position: absolute; left: -1px; top: 16%; bottom: 16%; width: 2px; border-radius: 2px; background: var(--gold-bright); box-shadow: 0 0 12px rgba(201,162,75,0.5); opacity: 0; transform: scaleY(0.35); transform-origin: center; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .seqbar__seg.is-active::before { opacity: 1; transform: scaleY(1); } .seqbar__btn { display: flex; align-items: baseline; gap: 15px; width: 100%; padding: 12px 0 12px 22px; text-align: left; color: var(--muted-2); transition: color 0.3s var(--ease), padding-left 0.3s var(--ease); } .seqbar__n { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; min-width: 20px; color: var(--muted-2); transition: color 0.3s var(--ease); } .seqbar__l { font-size: 1.02rem; letter-spacing: 0.01em; line-height: 1.25; color: inherit; transition: color 0.3s var(--ease), font-weight 0.3s var(--ease); } .seqbar__btn:hover { color: var(--ivory-dim); padding-left: 26px; } .seqbar__seg.is-done .seqbar__n { color: var(--gold-soft); } .seqbar__seg.is-done .seqbar__btn { color: var(--muted); } .seqbar__seg.is-active .seqbar__btn { color: var(--ivory); padding-left: 26px; } .seqbar__seg.is-active .seqbar__n { color: var(--gold-bright); } .seqbar__seg.is-active .seqbar__l { font-weight: 500; } .mandate__panels { position: relative; } .mandate__panel { padding: 22px 0; border-top: 1px solid var(--line); } .mandate__panel-n { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em; color: var(--gold); } .mandate__panel-t { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); color: var(--ivory); margin: 8px 0 10px; line-height: 1.1; } .mandate__panel-c { color: var(--ivory-dim); font-size: 1.05rem; max-width: 44ch; } .mandate__cta { display: inline-block; margin-top: 22px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--gold-bright); border-bottom: 1px solid var(--line-gold); padding-bottom: 3px; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .mandate__cta:hover { color: var(--ivory); border-color: var(--gold); } /* Enhanced (pinned) mode — only added by JS on capable desktop */ .mandate.is-enhanced { height: 460vh; padding-block: 0; } .mandate.is-enhanced .mandate__sticky { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--nav-h) + 2vh) 6vh; } .mandate.is-enhanced .mandate__panels { position: relative; min-height: 250px; } /* Inactive panel: hidden with NO transition, so it vanishes the instant it loses .is-active. */ .mandate.is-enhanced .mandate__panel { position: absolute; inset: 0; padding: 0; border-top: none; opacity: 0; transform: translateY(16px); visibility: hidden; pointer-events: none; } /* Only the ACTIVE panel carries the transition — so only the entering panel animates while the leaving panel is already gone. Guarantees no two headings/subtitles overlap, ever. */ .mandate.is-enhanced .mandate__panel.is-active { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out); } /* Circular 5-step advisory wheel (restored) — arc draws clockwise with scroll */ .mandate__visual { display: grid; place-items: center; } @keyframes sweepRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .wheel { position: relative; width: min(100%, 420px); aspect-ratio: 1 / 1; color: var(--gold); } .wheel__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .wheel__track { fill: none; stroke: var(--line-strong); stroke-width: 2; } .wheel__arc { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--sequence-progress, 0) * 100); transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 5px rgba(201,162,75,0.5)); /* Eased (not linear) so the discrete fallback mode glides between its 20% steps. */ transition: stroke-dashoffset 0.45s cubic-bezier(0.22, 1, 0.36, 1); } /* In the pinned scroll-driven mode, a rAF damping loop (script.js) eases --sequence-progress every frame; a CSS transition there would double-smooth and lag the gold line behind the scroll. Let JS own the motion. */ .mandate.is-enhanced .wheel__arc { transition: none; } .wheel__node { fill: var(--graphite-800); stroke: var(--line-strong); stroke-width: 1.5; transition: fill 0.45s var(--ease), stroke 0.45s var(--ease), filter 0.45s var(--ease); } .wheel__node.is-done { fill: var(--gold-soft); stroke: var(--gold-soft); } .wheel__node.is-active { fill: var(--gold-bright); stroke: var(--gold-bright); filter: drop-shadow(0 0 8px rgba(224,190,106,0.85)); } /* Rotating radar sweep removed per request — the wheel stays still (arc still fills on scroll). */ .wheel__sweep { display: none; } .wheel__hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 42%; aspect-ratio: 1 / 1; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px; padding: 6px; background: radial-gradient(circle at 50% 38%, rgba(201,162,75,0.16), rgba(11,13,17,0.94) 72%); border: 1px solid var(--line-gold); box-shadow: 0 0 50px -10px rgba(201,162,75,0.4), inset 0 0 26px rgba(201,162,75,0.07); } .mandate.is-live .wheel__hub { animation: hubPulse 4.5s var(--ease) infinite; } @keyframes hubPulse { 0%,100% { box-shadow: 0 0 50px -10px rgba(201,162,75,0.4), inset 0 0 26px rgba(201,162,75,0.07); } 50% { box-shadow: 0 0 66px -8px rgba(201,162,75,0.55), inset 0 0 30px rgba(201,162,75,0.13); } } .wheel__hub-n { font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 4.4vmin, 2rem); color: var(--gold-bright); line-height: 1; } .wheel__hub-l { font-family: var(--serif); font-size: clamp(0.82rem, 2.5vmin, 1.05rem); color: var(--ivory); line-height: 1.12; } .wheel__hub-k { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2); margin-top: 4px; } /* ============================== CAPABILITIES ====================== */ .capabilities { padding-block: var(--section-pad); } .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); } .cap-card { position: relative; padding: clamp(26px, 2.4vw, 36px); border: 1px solid var(--surface-line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-panel); overflow: hidden; transform-style: preserve-3d; transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease); min-height: 244px; display: flex; flex-direction: column; } .cap-card::before { /* Cursor glow is moved by TRANSFORM (composited), not by repositioning the gradient — repositioning repaints the layer every frame and was the tilt lag. The pseudo is oversized so its centred gradient still covers after it translates; the card's overflow:hidden clips it to the rounded corners. */ content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background: radial-gradient(420px 320px at 50% 50%, rgba(201,162,75,0.12), transparent 60%); opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; transform: translate3d(var(--glow-x, 0px), var(--glow-y, 0px), 0); /* Promoted ONCE (this pseudo carries no text, so no subpixel-AA cost): the glow layer is allocated at load and never re-created per hover. That per-hover layer churn — not the gradient — was what made sweeping across cards lag. */ will-change: transform; } .cap-card:hover { border-color: var(--line-gold); box-shadow: var(--shadow-soft); } /* ★ THE TILT-LAG FIX ★ These cards/panels are ALSO [data-reveal], and `html.js [data-reveal]` (specificity 0,2,1) sets `transition: transform .8s`. That OUTRANKED a plain `.cap-card.is-tilting` (0,2,0), so the transition was never actually removed — every tilt frame was eased over 0.8s and the card floated behind the cursor (the "lag"). Match the reveal rule's specificity with the `html.js` prefix and use !important so the transition is genuinely OFF while tracking → the tilt now follows the pointer 1:1. Transition resumes on pointer-leave for the ease-back. */ html.js .cap-card.is-tilting { transition: none !important; will-change: transform; } /* The domains panels no longer tilt — they use a calmer CSS-only hover (lift + glow + slightly livelier ambient motion), so the panel tilt + animation-freeze rules are gone. */ .cap-card:hover::before { opacity: 1; } /* Text sits flat at rest (crisp subpixel AA); depth pops only on hover while the card is already a transformed layer, so resting capability-card text stays sharp. */ .cap-card__index { position: absolute; top: 22px; right: 24px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--muted-2); transition: transform 0.4s var(--ease-out); } .cap-card__mark { display: inline-flex; width: 46px; height: 46px; color: var(--gold); margin-bottom: 22px; transition: transform 0.4s var(--ease-out); } .cap-card__title { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.18; color: var(--ivory); margin-bottom: 12px; } .cap-card__text { color: var(--ivory-dim); font-size: 0.97rem; line-height: 1.6; flex: 1; } .cap-card__tag { align-self: flex-start; margin-top: 22px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); padding: 6px 12px; border: 1px solid var(--line-gold); border-radius: 100px; transition: transform 0.4s var(--ease-out); } .cap-card:hover .cap-card__mark { transform: translateZ(34px); } .cap-card:hover .cap-card__index, .cap-card:hover .cap-card__tag { transform: translateZ(18px); } /* ===================== OPERATING DOMAINS (image-like panels) ====== */ /* domains elaborates capabilities — keep them paired with a tighter top, looser bottom (intentional rhythm) */ .domains { padding-block: clamp(36px, 5vw, 78px) var(--section-pad); } .domains__head { margin-bottom: clamp(30px, 4vw, 50px); max-width: 640px; } .domains__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); } .domains__grid { align-items: stretch; } .panel { position: relative; border: 1px solid var(--surface-line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-panel); transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); display: flex; flex-direction: column; height: 100%; } /* On JS pages the reveal rule owns [data-reveal]'s transition; restate it here at higher specificity so hover transitions the lift/border/shadow smoothly while keeping the reveal fade. Panels are CSS-hover only now (no JS parallax/tilt). */ html.js .panel[data-reveal] { transition: opacity 0.8s var(--ease-out), transform 0.55s var(--ease-out), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease); } .panel:hover { border-color: rgba(201,162,75,0.45); box-shadow: var(--shadow-panel), 0 22px 48px -30px rgba(0,0,0,0.85), 0 0 34px -20px rgba(201,162,75,0.5); } /* subtle 3px lift on hover — out-specifies the reveal rule's transform:none on .is-visible */ html.js .panel[data-reveal].is-visible:hover, .panel:hover { transform: translateY(-3px); } .panel__visual { position: relative; aspect-ratio: 4 / 3; overflow: hidden; color: var(--gold); border-bottom: 1px solid var(--line); flex: none; } .panel__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .panel__coord { position: absolute; bottom: 12px; right: 14px; z-index: 2; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); } .panel__status { position: absolute; top: 12px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); } .panel__status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 8px rgba(224,190,106,0.7); } .panel.is-live .panel__status-dot { animation: pStatus 2.6s var(--ease) infinite; } .panel__body { padding: 22px 24px 26px; flex: 1; } .panel__title { font-family: var(--serif); font-weight: 500; font-size: 1.28rem; color: var(--ivory); margin-bottom: 8px; line-height: 1.2; } .panel__text { color: var(--ivory-dim); font-size: 0.95rem; line-height: 1.6; } /* ---- shared visual primitives (used by all three domain visuals) --------- */ @keyframes pStatus { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } } @keyframes pNode { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } } /* expanding pulse rings keep a crisp ~1px stroke at any scale */ .panel__svg :is(.cl-orig-ring, .cl-active-ring, .cl-dest-ring, .sr-core-ring, .as-core-ring) { transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; } /* 1 · CommodityLogisticsVisual — logistics intelligence board (7s engineered cycle): the ledger scans + checks rows off, then the origin dispatches a signal that tracks the EXACT route path through the checkpoints to the destination, which pulses on arrival. Route is solid; the dot rides the identical path data (no drift, no miss). */ .panel__visual--logistics { background: radial-gradient(120% 90% at 84% 6%, rgba(20,32,50,0.55), transparent 58%), var(--graphite-900); color: var(--gold); } .cl-run { stroke-dasharray: 0.6 100; opacity: 0; } .panel.is-live .cl-run { animation: clRun 7s var(--ease) infinite; } @keyframes clRun { 0%,38% { stroke-dashoffset: 0; opacity: 0; } 42% { stroke-dashoffset: 0; opacity: 1; } 78% { stroke-dashoffset: -100; opacity: 1; } 82%,100% { stroke-dashoffset: -100; opacity: 0; } } .cl-doc-scan { transform-box: fill-box; opacity: 0; } .panel.is-live .cl-doc-scan { animation: clScan 7s var(--ease) infinite; } @keyframes clScan { 0% { transform: translateY(0); opacity: 0; } 3% { opacity: 0.85; } 36% { transform: translateY(132px); opacity: 0.85; } 42%,100% { transform: translateY(132px); opacity: 0; } } .cl-check { opacity: 0; } .cl-rowv { opacity: 0.3; } .panel.is-live .cl-check { animation: clCheck 7s var(--ease) infinite; } .panel.is-live .cl-rowv { animation: clRowV 7s var(--ease) infinite; } .cl-check--1, .cl-rowv--1 { animation-delay: 0.7s; } .cl-check--2, .cl-rowv--2 { animation-delay: 1.5s; } .cl-check--3, .cl-rowv--3 { animation-delay: 2.3s; } @keyframes clCheck { 0%,4% { opacity: 0; } 9%,84% { opacity: 1; } 90%,100% { opacity: 0; } } @keyframes clRowV { 0%,4% { opacity: 0.3; stroke: currentColor; } 9% { opacity: 0.6; stroke: var(--gold-bright); } 30%,84% { opacity: 0.45; stroke: var(--gold-bright); } 90%,100% { opacity: 0.3; stroke: currentColor; } } .cl-orig-ring, .cl-active-ring, .cl-dest-ring { opacity: 0; } .panel.is-live .cl-orig-ring { animation: clPing 7s var(--ease) infinite 2.9s; } .panel.is-live .cl-active-ring { animation: clPing 7s var(--ease) infinite 4.2s; } .panel.is-live .cl-dest-ring { animation: clPingBig 7s var(--ease) infinite 5.3s; } @keyframes clPing { 0% { opacity: 0.55; transform: scale(0.7); } 16%,100% { opacity: 0; transform: scale(2.4); } } @keyframes clPingBig { 0% { opacity: 0.7; transform: scale(0.7); } 20%,100% { opacity: 0; transform: scale(3); } } /* 2 · SecurityRiskVisual — security operations screen (8s engineered cycle): scan lines sweep centre -> each hex-vertex marker in turn (exact spoke geometry), each marker flags as it is read, the core pings outward through the hex, and a slow radar arc sweeps — every motion anchored on the central monitoring core. */ .panel__visual--security { background: radial-gradient(circle at 50% 52%, rgba(22,30,46,0.7), var(--graphite-900) 72%); color: var(--gold); } .panel__sweep { position: absolute; left: 50%; top: 51.5%; width: 64%; aspect-ratio: 1 / 1; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 2; background: conic-gradient(from 0deg, rgba(201,162,75,0) 0deg 300deg, rgba(201,162,75,0.08) 342deg, rgba(201,162,75,0.26) 358deg, rgba(201,162,75,0) 360deg); -webkit-mask: radial-gradient(circle, transparent 0 24%, #000 28% 94%, transparent 100%); mask: radial-gradient(circle, transparent 0 24%, #000 28% 94%, transparent 100%); } .panel.is-live .panel__sweep { animation: pSweep 8s linear infinite; } @keyframes pSweep { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } } .sr-scan { stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0; } .panel.is-live .sr-scan { animation: srScan 8s var(--ease) infinite; } .sr-scan--1 { animation-delay: 0.6s; } .sr-scan--2 { animation-delay: 2.2s; } .sr-scan--3 { animation-delay: 3.8s; } .sr-scan--4 { animation-delay: 5.4s; } @keyframes srScan { 0% { stroke-dashoffset: 100; opacity: 0; } 3% { opacity: 0.9; } 13% { stroke-dashoffset: 0; opacity: 0.9; } 20%,100% { stroke-dashoffset: 0; opacity: 0; } } .sr-threat { opacity: 0.4; transform-box: fill-box; transform-origin: center; } .panel.is-live .sr-threat { animation: srThreat 8s var(--ease) infinite; } .sr-threat--1 { animation-delay: 1.6s; } .sr-threat--2 { animation-delay: 3.2s; } .sr-threat--3 { animation-delay: 4.8s; } .sr-threat--4 { animation-delay: 6.4s; } @keyframes srThreat { 0% { opacity: 0.4; stroke: currentColor; transform: scale(1); } 6% { opacity: 1; stroke: var(--gold-bright); transform: scale(1.18); } 16% { opacity: 0.6; stroke: var(--gold-bright); transform: scale(1); } 42%,100% { opacity: 0.4; stroke: currentColor; transform: scale(1); } } .panel.is-live .sr-core { animation: pNode 2.8s var(--ease) infinite; } .sr-core-ring { opacity: 0; } .panel.is-live .sr-core-ring { animation: srPing 8s var(--ease) infinite; } @keyframes srPing { 0% { opacity: 0.5; transform: scale(0.9); } 26%,100% { opacity: 0; transform: scale(11); } } /* 3 · AISystemsVisual — AI operations layer (6s engineered cycle): inputs converge into the core along their EXACT lines, the core processes (orbit + broadcast pulse) and emits to the output modules which pulse on arrival, then a signal returns along the feedback loop. Signals share the connection-line path data. */ .panel__visual--systems { background: radial-gradient(120% 95% at 50% 98%, rgba(20,32,50,0.5), transparent 60%), var(--graphite-900); color: var(--gold); } .as-run { stroke-dasharray: 0.6 100; opacity: 0; } .panel.is-live .as-in--1, .panel.is-live .as-in--2, .panel.is-live .as-in--3 { animation: asIn 6s var(--ease) infinite; } @keyframes asIn { 0% { stroke-dashoffset: 0; opacity: 0; } 6% { opacity: 1; } 34% { stroke-dashoffset: -100; opacity: 1; } 38%,100% { stroke-dashoffset: -100; opacity: 0; } } .panel.is-live .as-out--1, .panel.is-live .as-out--2, .panel.is-live .as-out--3 { animation: asOut 6s var(--ease) infinite; } @keyframes asOut { 0%,46% { stroke-dashoffset: 0; opacity: 0; } 50% { opacity: 1; } 78% { stroke-dashoffset: -100; opacity: 1; } 82%,100% { stroke-dashoffset: -100; opacity: 0; } } .panel.is-live .as-core { animation: asCore 6s var(--ease) infinite; } @keyframes asCore { 0%,32% { opacity: 0.5; } 40% { opacity: 1; } 52%,100% { opacity: 0.5; } } .as-core-ring { opacity: 0; } .panel.is-live .as-core-ring { animation: asCoreRing 6s var(--ease) infinite; } @keyframes asCoreRing { 0%,34% { opacity: 0; transform: scale(0.7); } 42% { opacity: 0.6; transform: scale(1); } 60%,100% { opacity: 0; transform: scale(3); } } .as-core-orbit { stroke-dasharray: 22 78; } .panel.is-live .as-core-orbit { animation: asOrbit 4s linear infinite; } @keyframes asOrbit { to { stroke-dashoffset: -100; } } .as-outmod { opacity: 0.5; } .panel.is-live .as-outmod { animation: asOutMod 6s var(--ease) infinite; } @keyframes asOutMod { 0%,72% { opacity: 0.5; stroke: currentColor; } 78% { opacity: 1; stroke: var(--gold-bright); } 90%,100% { opacity: 0.5; stroke: currentColor; } } .as-fb-run { stroke-dasharray: 0.6 100; opacity: 0; } .panel.is-live .as-fb-run { animation: asFb 6s var(--ease) infinite; } @keyframes asFb { 0%,80% { stroke-dashoffset: 0; opacity: 0; } 84% { opacity: 1; } 99% { stroke-dashoffset: -100; opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } } .as-knob { transform-box: fill-box; transform-origin: center; } .panel.is-live .as-knob--a { animation: asKnob 5s var(--ease) infinite; } .panel.is-live .as-knob--b { animation: asKnob 6s var(--ease) infinite 1s; } @keyframes asKnob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(13px); } } /* hover — slightly livelier ambient motion (only the no-delay loops, so the sequenced signals never desync) + a soft gold-node glow. No layout change. */ .panel:hover .panel__sweep { animation-duration: 6s; } .panel:hover .as-core-orbit { animation-duration: 3s; } .panel:hover :is(.cl-run, .sr-core, .as-core) { filter: drop-shadow(0 0 5px rgba(224,190,106,0.75)); } .panel:hover :is(.as-links, .cl-route, .sr-matrix) { opacity: 0.55; } /* ================= COMMODITY COMMAND LEDGER (no circle/orbit) ===== */ .ledger { padding-block: var(--section-pad); } .ledger__lead { margin-top: 18px; color: var(--ivory-dim); font-size: 1.05rem; max-width: 54ch; } /* Fixed-height columns: both the list and the detail panel are locked to --ledger-h (set by JS to the tallest collapsed category), so switching categories never resizes the right box or shifts the page. align-items:start keeps the list from stretching when the fuel dropdown expands the panel — that growth is the one intentional, user-initiated size change. */ .ledger__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(20px, 3vw, 40px); align-items: start; } .ledger__list { display: flex; flex-direction: column; min-height: var(--ledger-h, 0px); border: 1px solid var(--surface-line); border-radius: var(--radius); overflow: hidden; background: var(--surface-panel); box-shadow: var(--shadow-panel); } .ledger__row { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; flex: 1 1 0; min-height: 56px; padding: 0 clamp(18px, 2vw, 24px); text-align: left; border-bottom: 1px solid var(--line); transition: background 0.3s var(--ease); } .ledger__row:last-child { border-bottom: none; } .ledger__row:hover { background: rgba(201,162,75,0.05); } /* clean active state: a gold wash across the row + gold name + arrow (no side-stripe) */ .ledger__row.is-active { background: linear-gradient(90deg, rgba(201,162,75,0.16), rgba(201,162,75,0.03) 68%, transparent); } .ledger__name { font-family: var(--serif); font-size: clamp(1.08rem, 1rem + 0.35vw, 1.24rem); color: var(--ivory-dim); transition: color 0.3s var(--ease); white-space: nowrap; } .ledger__row:hover .ledger__name { color: var(--ivory); } .ledger__row.is-active .ledger__name { color: var(--gold-bright); } .ledger__arrow { font-family: var(--mono); color: var(--muted-2); opacity: 0; transform: translateX(-4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease); } .ledger__row.is-active .ledger__arrow, .ledger__row:hover .ledger__arrow { opacity: 1; transform: none; color: var(--gold); } /* tablist sits in an overflow:hidden list, so inset the focus ring to keep it from being clipped */ .ledger__row:focus-visible { outline-offset: -2px; } .ledger__panel { position: relative; border: 1px solid var(--line-gold); border-radius: var(--radius); padding: clamp(24px, 3vw, 38px); background: var(--surface-panel); height: var(--ledger-h, auto); min-height: 384px; overflow-y: auto; scrollbar-gutter: stable; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--line-gold) transparent; } /* fixed-height panel scrolls internally when the fuel dropdown is open — the box never grows */ .ledger__panel::-webkit-scrollbar { width: 8px; } .ledger__panel::-webkit-scrollbar-track { background: transparent; } .ledger__panel::-webkit-scrollbar-thumb { background: var(--line-gold); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } .ledger__panel::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); background-clip: padding-box; } /* ---- Coverage panel: one shared frame, a distinct body per category -------- The panel markup is an empty box; JS renders a .cm wrapper whose internal layout differs by category. Consistent anchors keep it one system: a mono status pill (top-right), a serif name, and a single compliance note pinned to the base. The .cm column never shrinks, so opening the Fuel disclosure scrolls the box rather than compressing the modules above it — the box never grows. */ .ledger__panel > .cm { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; } .cm-top { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 16px; } .cm-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .cm-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 10px rgba(201,162,75,0.7); flex: none; } .cm-name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); color: var(--ivory); line-height: 1.05; margin-bottom: 12px; } .cm-lead { color: var(--ivory-dim); font-size: 1rem; line-height: 1.5; max-width: 46ch; margin-bottom: 20px; } .cm-note { margin-top: auto; padding-top: 18px; font-size: 0.82rem; line-height: 1.55; color: var(--muted); font-style: italic; } .cm-cta { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 2px; width: fit-content; font-family: var(--sans); font-weight: 500; font-size: 0.86rem; color: var(--gold-bright); border-bottom: 1px solid var(--line-gold); padding-bottom: 3px; transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease); } .cm-cta:hover, .cm-cta:focus-visible { color: var(--gold); border-color: var(--gold); gap: 11px; } /* Buttery panel crossfade: one element, opacity+transform only (no per-child stagger). The new content fades-and-rises in; the outgoing content fades out faster (exit < enter). Height is locked, so nothing reflows during the swap. */ .cm { transition: opacity 0.36s var(--ease-out), transform 0.36s var(--ease-out); will-change: opacity, transform; } .cm.is-enter { opacity: 0; transform: translateY(10px); } .cm.is-out { opacity: 0; transform: translateY(-6px); transition: opacity 0.16s var(--ease), transform 0.16s var(--ease); } @keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } } /* ===================== LIVE MARKET REFERENCE (real spot feed) ===== A calm financial-reference panel: aligned columns, tabular figures, one shared horizontal padding so the header label, first metal, and disclaimer all left-align. The change arrow sits inline on the value baseline (no floating corner mark). */ .market { --market-pad: clamp(16px, 1.9vw, 24px); margin-bottom: clamp(20px, 3vw, 40px); /* matches .ledger__grid gap so the strip-to-boxes gap equals the gap between the two boxes */ border: 1px solid var(--surface-line); border-radius: var(--radius); background: var(--surface-panel); box-shadow: var(--shadow-panel); overflow: hidden; } .market__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--market-pad); border-bottom: 1px solid var(--line); } .market__live { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory-dim); } .market__live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 10px rgba(201,162,75,0.7); flex: none; } .market.is-live-feed .market__live-dot { animation: livePulse 2.4s var(--ease) infinite; } .market__asof { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; color: var(--muted-2); white-space: nowrap; } .market__asof time { color: var(--ivory-dim); font-variant-numeric: tabular-nums; } .market__ticker { display: grid; grid-template-columns: repeat(5, 1fr); } .market__item { display: flex; flex-direction: column; gap: 6px; padding: clamp(13px,1.4vw,15px) var(--market-pad); border-right: 1px solid var(--line); } .market__item:last-child { border-right: none; } .market__name { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .market__unit { text-transform: none; letter-spacing: 0.02em; color: var(--muted-2); } .market__price { font-family: var(--serif); font-size: clamp(1.3rem, 1rem + 0.9vw, 1.7rem); line-height: 1; color: var(--ivory); font-variant-numeric: tabular-nums; } .market__price--ref { font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem); color: var(--ivory-dim); } /* honest movement tick (no fabricated % — the free feed has no change data); shows on price move */ .market__chg { display: inline-flex; align-items: center; gap: 4px; min-height: 0.85em; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.04em; line-height: 1; color: var(--muted-2); opacity: 0; transition: opacity 0.3s var(--ease), color 0.3s var(--ease); } .market__sub { font-family: var(--mono); font-size: 0.57rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); } .market__item.loading .market__price { color: var(--muted-2); } .market__item.up .market__chg { color: #8FCFA1; opacity: 1; } .market__item.down .market__chg { color: #E6A6A0; opacity: 1; } /* Meta row (as-of timestamp) beside the live-market label. */ .market__meta { display: inline-flex; align-items: center; gap: 12px; } /* Product chips inside the commodity panel — quiet pills in the house gold/ivory language */ .cm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .cm-chips:empty { display: none; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 100px; font-size: 0.78rem; letter-spacing: 0.01em; color: var(--ivory-dim); background: rgba(255,255,255,0.015); white-space: nowrap; } .chip__sub { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-soft); } /* "View fuel products" disclosure — in-panel dropdown that reveals the full fuel product list as a subsection of the Fuel category (no separate page). Toggle is a small gold ghost pill; the panel animates open via grid-template-rows and stays in the DOM when closed (SEO). */ .cm-fuel { margin-bottom: 18px; } .cm-fuel:empty { display: none; } .fueldrop__toggle { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; min-height: 44px; border-radius: 100px; border: 1px solid var(--line-gold); color: var(--gold-bright); background: rgba(201,162,75,0.05); font-family: var(--sans); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.02em; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); } .fueldrop__toggle:hover { background: rgba(201,162,75,0.12); border-color: var(--gold); } .fueldrop__chev { transition: transform 0.35s var(--ease-out); } .fueldrop__toggle[aria-expanded="true"] .fueldrop__chev { transform: rotate(180deg); } .fueldrop__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease-out); } .fueldrop__panel.is-open { grid-template-rows: 1fr; } .fueldrop__inner { overflow: hidden; min-height: 0; } .fueldrop__intro { margin: 18px 0; color: var(--ivory-dim); font-size: 0.95rem; line-height: 1.62; max-width: 64ch; } .fueldrop__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(12px, 1.4vw, 18px); } .fuelgroup { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; background: rgba(255,255,255,0.012); } .fuelgroup__title { font-family: var(--serif); font-weight: 500; font-size: 1.04rem; color: var(--ivory); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); line-height: 1.2; } .fuelgroup__list { display: flex; flex-direction: column; } .fuelgroup__list li { position: relative; padding: 9px 0 9px 16px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--ivory-dim); line-height: 1.4; } .fuelgroup__list li:first-child { border-top: none; } .fuelgroup__list li::before { content: ""; position: absolute; left: 0; top: 16px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: 0.7; } .fuelgroup__note { display: block; margin-top: 2px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); } .fueldrop__note { margin-top: 16px; font-size: 0.86rem; color: var(--muted); font-style: italic; line-height: 1.7; } /* ============ COVERAGE PANEL — MODULE KIT + MICRO-MOTIFS =========== */ /* Reusable atoms shared across all eight category panels (so they read as one premium system); each panel composes them in a different order with its own distinct micro-motif. Short labels, chips, small modules — scannable, not text. */ /* reference tag (Metals) + availability pill (Food) */ .cm-ref { display: inline-flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%; margin-bottom: 4px; padding: 8px 13px; border: 1px solid var(--line-gold); border-radius: 8px; background: rgba(201,162,75,0.05); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--ivory-dim); } .cm-ref::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 8px rgba(201,162,75,0.6); flex: none; } .cm-pill { display: inline-flex; align-items: center; gap: 7px; margin: -6px 0 18px; padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 100px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); } .cm-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; } /* mini-modules — Fuel pair / Food trio */ .cm-mods { display: grid; gap: 10px; margin-bottom: 20px; } .cm-mods--2 { grid-template-columns: repeat(2, 1fr); } .cm-mods--3 { grid-template-columns: repeat(3, 1fr); } .cm-mod { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: rgba(255,255,255,0.012); } .cm-mod__k { display: block; font-family: var(--mono); font-size: 0.57rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px; } .cm-mod__v { display: block; font-size: 0.9rem; color: var(--ivory-dim); line-height: 1.35; } /* spec rows — Coal */ .cm-rows { border-top: 1px solid var(--line); margin-bottom: 20px; } .cm-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); } .cm-rows dt { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-2); } .cm-rows dd { font-size: 0.9rem; color: var(--ivory-dim); text-align: right; } /* checklist — Aggregate */ .cm-check { display: grid; margin-bottom: 22px; border-top: 1px solid var(--line); } .cm-check li { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 0.96rem; color: var(--ivory-dim); } .cm-ico { width: 18px; height: 18px; flex: none; color: var(--gold); } .cm-check .cm-ico { border: 1px solid var(--line-gold); border-radius: 50%; padding: 2.5px; background: rgba(201,162,75,0.05); } /* grade cards — Coal */ .cm-grades { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; } .cm-grade { position: relative; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 14px 16px 14px 19px; background: linear-gradient(150deg, rgba(201,162,75,0.07), rgba(255,255,255,0.008)); overflow: hidden; } .cm-grade::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold-bright), transparent); } .cm-grade__k { display: block; font-family: var(--serif); font-size: 1.08rem; color: var(--ivory); margin-bottom: 3px; } .cm-grade__v { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-soft); } /* verification rows — Gems */ .cm-verify { display: grid; gap: 8px; margin-bottom: 20px; } .cm-verify li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,0.012); font-size: 0.92rem; color: var(--ivory-dim); } .cm-verify .cm-ico { width: 17px; height: 17px; color: var(--gold-bright); } /* market snapshot — Metals (live spot cells, honest "On request" fallback) */ .cm-snap { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 16px; background: rgba(255,255,255,0.012); } .cm-quote { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border-right: 1px solid var(--line); } .cm-quote:last-child { border-right: none; } .cm-quote__k { font-family: var(--mono); font-size: 0.57rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .cm-quote__v { font-family: var(--serif); font-size: 1.18rem; line-height: 1; color: var(--ivory-dim); font-variant-numeric: tabular-nums; transition: color 0.4s var(--ease); } .cm-quote.has-feed .cm-quote__v { color: var(--gold-bright); } .cm-quote__u { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.08em; color: var(--muted-2); } /* curated list — Art (editorial, least dashboard) */ .cm-curate { border-top: 1px solid var(--line); margin-bottom: 18px; } .cm-curate li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); } .cm-curate__name { font-family: var(--serif); font-size: 1.14rem; color: var(--ivory); } .cm-curate__meta { font-family: var(--mono); font-size: 0.57rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; } /* reference tags — Art */ .cm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .cm-tag { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); padding: 6px 11px; border: 1px solid var(--line); border-radius: 6px; } /* process steps — Private Trade (the panel's centrepiece motif) */ .cm-steps { display: grid; gap: 10px; margin-bottom: 20px; } .cm-step { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgba(255,255,255,0.012); } .cm-step__n { font-family: var(--mono); font-size: 0.74rem; font-weight: 600; color: var(--obsidian); background: var(--gold-bright); width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; } .cm-step__t { font-size: 0.96rem; color: var(--ivory); } .cm-step:not(:last-child)::after { content: ""; position: absolute; left: 28px; bottom: -10px; height: 10px; width: 1px; background: var(--line-gold); } /* ---- micro-motifs: one unique signature per panel (subtle, gold, premium) ---- */ .cm-route { position: relative; display: flex; justify-content: space-between; margin: 2px 2px 22px; padding-top: 5px; color: var(--gold); } .cm-route__rail { position: absolute; left: 5px; right: 5px; top: 10px; height: 1px; background: linear-gradient(90deg, var(--line-gold), var(--gold-soft), var(--line-gold)); } .cm-route__node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; z-index: 1; } .cm-route__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--graphite-900); border: 1.5px solid var(--gold-soft); } .cm-route__node.is-start .cm-route__dot { background: var(--gold-bright); border-color: var(--gold-bright); box-shadow: 0 0 9px rgba(201,162,75,0.6); } .cm-route__node.is-end .cm-route__dot { width: 11px; height: 11px; border-color: var(--gold-bright); } .cm-route__cap { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; } .cm-spark { display: block; width: 100%; height: 52px; margin-bottom: 18px; color: var(--gold); } .cm-spark svg { width: 100%; height: 100%; display: block; } .cm-strata { display: grid; gap: 7px; margin-bottom: 20px; } .cm-strata span { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-soft), rgba(201,162,75,0.10)); } .cm-seam { display: block; width: 100%; height: 32px; margin-bottom: 20px; color: var(--gold); } .cm-seam svg { width: 100%; height: 100%; display: block; } .cm-avail { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; } .cm-avail i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); opacity: 0.8; } .cm-avail i.is-open { background: transparent; border: 1px solid var(--gold-soft); opacity: 0.65; } /* centered emblems (Gems facet, Art frame) sit in a soft gold spotlight so they read as a deliberately presented piece, not a floating icon */ .cm-emblem { position: relative; display: grid; place-items: center; padding: 10px 0 6px; margin-bottom: 16px; } .cm-emblem::before { content: ""; position: absolute; width: 220px; max-width: 78%; height: 100px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(201,162,75,0.12), transparent 70%); pointer-events: none; } .cm-facet, .cm-frame { position: relative; display: block; color: var(--gold); } /* ============================== PRINCIPLES ======================== */ .principles { padding-block: var(--section-pad); } .principle-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(28px, 5vw, 80px); border-top: 1px solid var(--line); } .principle { display: flex; gap: 22px; align-items: baseline; padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line); } .principle__num { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--gold); flex: none; padding-top: 4px; } .principle__body h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--ivory); margin-bottom: 8px; line-height: 1.18; } .principle__body p { color: var(--ivory-dim); font-size: 0.97rem; } /* ===================== REQUEST FORM (private gateway) ============= */ .request { position: relative; padding-block: clamp(92px, 10vw, 158px); } /* final CTA gets a touch more room than the base rhythm */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* align-items: stretch makes the two columns share one height; each child fills it (height:100%) as a flex column, so the intro's disclaimer and the form card's footer both anchor to the bottom — the pair lines up at top AND bottom. */ .request__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 6vw, 90px); align-items: stretch; } .request__intro { display: flex; flex-direction: column; height: 100%; } .request__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.8rem); line-height: 1.04; letter-spacing: -0.015em; margin-bottom: 16px; text-wrap: balance; } .request__copy { color: var(--ivory-dim); font-size: 1.08rem; max-width: 42ch; margin-bottom: clamp(20px, 2.4vw, 24px); } .request__status { display: inline-flex; align-items: center; gap: 11px; padding: 11px 18px; border: 1px solid var(--surface-line); border-radius: 100px; background: var(--surface-solid); margin-bottom: 20px; } .request__status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 0 rgba(201,162,75,0); transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease); } .request.is-open .request__status-dot { background: var(--gold-bright); box-shadow: 0 0 0 4px rgba(201,162,75,0.16), 0 0 14px rgba(201,162,75,0.6); } .request__status-text { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ivory-dim); } .request__status-text strong { color: var(--gold-bright); font-weight: 500; } .request__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 0; } .request__meta li { position: relative; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-left: 16px; } .request__meta li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: 0.7; } /* margin-top:auto anchors the disclaimer to the bottom of the (stretched) column so it ends level with the form's footer; the hairline gives it a clean footer edge instead of floating. */ .request__compliance { margin-top: auto; padding-top: clamp(20px, 2.6vw, 26px); border-top: 1px solid var(--surface-line); font-size: 0.88rem; color: var(--muted); font-style: italic; } /* Book-a-meeting CTA (Calendly) — primary action in the contact section */ .request__book { margin-bottom: clamp(20px, 2.6vw, 24px); } .request__book .btn { margin-bottom: clamp(20px, 2.4vw, 24px); } /* matches .request__copy margin so the gap above and below the button is equal */ .btn__icon { flex: none; } .request__book-copy { font-size: 0.92rem; color: var(--ivory-dim); line-height: 1.6; max-width: 48ch; } .request__form { /* Flex column the full height of the row, so the fallback line anchors to the bottom (margin-top:auto) and meets the intro's disclaimer on a shared baseline. */ display: flex; flex-direction: column; gap: 18px; height: 100%; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line-gold); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-soft); } .request__fields { /* minmax(0,1fr) keeps the two columns truly equal: a long selected value can no longer inflate its column (and squeeze the other), so the boxes never resize. */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; } .field { display: flex; flex-direction: column; gap: 7px; } .field--full { grid-column: 1 / -1; } .field label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-dim); } .field__opt { color: var(--muted-2); text-transform: none; letter-spacing: 0.02em; } .field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 48px; padding: 13px 15px; font-family: var(--sans); font-size: 16px; color: var(--ivory); background: rgba(8,9,12,0.6); border: 1px solid var(--field-line); border-radius: var(--radius-sm); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); appearance: none; -webkit-appearance: none; } .field textarea { resize: vertical; min-height: 152px; line-height: 1.5; } .field input::placeholder, .field textarea::placeholder { color: var(--muted-2); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(8,9,12,0.85); box-shadow: 0 0 0 3px rgba(201,162,75,0.16), 0 0 18px -6px rgba(201,162,75,0.4); } .field__select { position: relative; } .field__select select { padding-right: 40px; cursor: pointer; } .field__select select option { background: var(--graphite-850); color: var(--ivory); } .field__select select optgroup { background: var(--graphite-900); color: var(--gold); font-family: var(--sans); font-style: normal; } .field__chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--gold); pointer-events: none; } /* ===================== CUSTOM THEMED SELECT (replaces OS dropdown) ===== The native