/* UI kit page styles — composes on top of colors_and_type.css */
.gb-container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter-desktop); }
.gb-word { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.18em; font-size: 14px; }
.gb-word .lt { font-weight: 300; }
.gb-arrow { display: inline-block; margin-left: 8px; transition: transform var(--dur-base) var(--ease-standard); }
a:hover .gb-arrow, button:hover .gb-arrow { transform: translateX(3px); }
/* ---------- Buttons ---------- */
.gb-btn {
display: inline-flex; align-items: center; justify-content: center;
font: var(--fw-medium) 11px/1 var(--font-text); letter-spacing: .18em; text-transform: uppercase;
padding: 16px 24px; border: 1px solid var(--rule-1); cursor: pointer;
transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
border-radius: 0; text-decoration: none;
}
.gb-btn--sm { padding: 12px 18px; font-size: 10px; }
.gb-btn--primary { background: var(--gb-ink); color: var(--gb-alabaster); }
.gb-btn--primary:hover { background: var(--gb-graphite); }
.gb-btn--primary-inverse { background: var(--gb-alabaster); color: var(--gb-ink); border-color: var(--gb-alabaster); }
.gb-btn--primary-inverse:hover { background: var(--gb-stone); }
.gb-btn--ghost { background: transparent; color: var(--fg-1); border-color: transparent; padding: 16px 0; border-bottom: 1px solid var(--rule-1); }
.gb-btn--ghost:hover { color: var(--gb-graphite); }
/* ---------- Nav ---------- */
.gb-nav {
position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-sticky);
background: transparent; border-bottom: 1px solid transparent;
transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
/* Default (over dark hero): white text */
.gb-nav .gb-nav__brand,
.gb-nav .gb-nav__link { color: var(--gb-alabaster, #F5F3EE); }
.gb-nav .gb-nav__link::after { background: var(--gb-alabaster, #F5F3EE); }
.gb-nav.is-scrolled {
position: fixed;
background: var(--tw-nav-scrolled); backdrop-filter: blur(12px);
border-bottom-color: rgba(245,243,238,0.10);
}
/* Logo over dark hero — invert flag from tweaks */
.gb-nav .gb-nav__logo { filter: invert(var(--tw-logo-invert, 1)); }
.gb-nav__inner {
max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter-desktop);
height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.gb-nav__brand { color: var(--fg-1); display: flex; align-items: center; gap: 14px; }
.gb-nav__logo { display: block; }
.gb-nav__links { display: flex; gap: 32px; }
.gb-nav__link {
font: var(--fw-medium) 11px/1 var(--font-text); letter-spacing: .18em; text-transform: uppercase;
color: var(--fg-1); position: relative; padding: 28px 0; cursor: pointer;
}
.gb-nav__link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: var(--gb-ink); transform: scaleX(0); transform-origin: left;
transition: transform var(--dur-base) var(--ease-standard);
}
.gb-nav__link:hover::after, .gb-nav__link.is-active::after { transform: scaleX(1); }
/* ---------- Tweak defaults (overwritten by Tweaks.jsx → applyTweaks) ---------- */
:root {
--tw-hero-bg: url('assets/hero-bg.png?v=1');
--tw-hero-veil: linear-gradient(105deg, rgba(8,12,22,0.78) 0%, rgba(8,12,22,0.58) 35%, rgba(8,12,22,0.32) 65%, rgba(8,12,22,0.20) 100%), linear-gradient(to bottom, rgba(8,12,22,0.10) 0%, rgba(8,12,22,0.55) 100%);
--tw-hero-fg: #F5F3EE;
--tw-hero-fg-soft: rgba(245,243,238,0.78);
--tw-hero-accent: #C9A86B;
--tw-hero-rule: rgba(245,243,238,0.18);
--tw-nav-scrolled: rgba(8,12,22,0.78);
--tw-logo-invert: 1;
}
/* ---------- Hero ---------- */
.gb-hero { padding: 96px 0 128px; position: relative; }
.gb-hero__rule { height: 1px; background: var(--rule-1); margin-bottom: 32px; }
/* Dark hero with bg image — driven by tweaks */
.gb-hero--dark { padding: 360px 0 128px; overflow: hidden; isolation: isolate; margin-top: -110px; }
.gb-hero--dark .gb-hero__bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.gb-hero--dark .gb-hero__bg-image {
position: absolute; inset: 0;
background-image: var(--tw-hero-bg);
background-size: cover;
background-position: center;
/* Subtle slow drift for liveliness without being distracting */
animation: gbHeroBgDrift 60s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes gbHeroBgDrift {
0% { transform: scale(1.06) translate3d(0, 0, 0); }
100% { transform: scale(1.10) translate3d(-1.5%, 1%, 0); }
}
.gb-hero--dark .gb-hero__bg-veil {
position: absolute; inset: 0;
background: var(--tw-hero-veil);
}
.gb-hero--dark > .gb-container { position: relative; z-index: 1; }
.gb-hero--dark .gb-hero__rule { background: var(--tw-hero-rule); }
.gb-hero--dark .t-overline { color: var(--tw-hero-fg-soft); }
.gb-hero--dark .gb-hero__meta-sec { color: var(--tw-hero-fg-soft); }
.gb-hero--dark .gb-hero__headline { color: var(--tw-hero-fg); }
.gb-hero--dark .gb-hero__headline em {
color: var(--tw-hero-accent);
font-style: italic;
}
.gb-hero--dark .gb-hero__sub p { color: var(--tw-hero-fg-soft); }
.gb-hero--dark .gb-hero__footnote {
border-top-color: var(--tw-hero-rule);
color: var(--tw-hero-fg-soft);
}
.gb-hero--dark .gb-hero__footnote .t-mono { color: var(--tw-hero-fg-soft); }
/* Buttons over dark hero */
.gb-hero--dark .gb-btn--primary {
background: var(--gb-alabaster, #F5F3EE);
color: #0A0E18;
border-color: var(--gb-alabaster, #F5F3EE);
}
.gb-hero--dark .gb-btn--primary:hover {
background: #fff;
border-color: #fff;
}
.gb-hero--dark .gb-btn--ghost {
color: var(--gb-alabaster, #F5F3EE);
border-color: rgba(245,243,238,0.45);
}
.gb-hero--dark .gb-btn--ghost:hover {
border-color: var(--gb-alabaster, #F5F3EE);
background: rgba(245,243,238,0.08);
}
@media (prefers-reduced-motion: reduce) {
.gb-hero--dark .gb-hero__bg-image { animation: none; }
}
.gb-hero__meta { display: flex; gap: 32px; margin-bottom: 64px; }
.gb-hero__meta-sec { color: var(--fg-2); }
.gb-hero__headline {
font-family: var(--font-serif); font-weight: 400;
font-size: clamp(56px, 7.5vw, 128px); line-height: 1.02; letter-spacing: -0.02em;
margin: 0 0 64px; color: var(--fg-1); max-width: 1180px;
}
.gb-hero__headline em { font-family: var(--font-serif); font-weight: 300; font-style: italic; }
.gb-hero__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; max-width: 1180px; margin-bottom: 96px; }
.gb-hero__sub--single { grid-template-columns: 1fr; max-width: 720px; }
.gb-hero__sub p { max-width: 480px; color: var(--fg-2); }
.gb-hero__cta { display: flex; gap: 24px; }
.gb-hero__footnote { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--rule-3); color: var(--fg-2); }
.gb-hero__signet { width: 56px; height: 56px; display: block; }
/* ---------- Section scaffolding ---------- */
.gb-section { padding: 128px 0; border-top: 1px solid var(--rule-3); scroll-margin-top: 100px; }
.gb-section--paper { background: var(--bg-2); }
.gb-section--dark { background: var(--bg-inverse); color: var(--gb-alabaster); border-top-color: var(--gb-ink); }
.gb-section--dark .t-overline { color: var(--gb-stone); }
.gb-overline-light { color: var(--gb-stone) !important; }
.gb-section__head { display: grid; grid-template-columns: 200px 1fr; gap: 64px; margin-bottom: 80px; align-items: start; }
.gb-section__title {
font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em;
font-size: clamp(32px, 3.6vw, 56px); line-height: 1.1; margin: 0; max-width: 880px;
}
.gb-section__title--light { color: var(--gb-alabaster); }
/* ---------- Stats / Heritage ---------- */
.gb-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule-1); border-bottom: 1px solid var(--rule-3); margin-bottom: 96px; }
.gb-stat { padding: 40px 32px 40px 0; border-right: 1px solid var(--rule-3); }
.gb-stat:last-child { border-right: none; }
.gb-stat__num { font-family: var(--font-display); font-weight: 300; font-size: 88px; line-height: 1; letter-spacing: -0.03em; color: var(--fg-1); }
.gb-stat__unit { font-size: 36px; font-weight: 300; margin-left: 4px; color: var(--fg-2); }
.gb-stat__lab { margin-top: 24px; }
.gb-stat__sub { font: var(--fw-regular) 13px/1.5 var(--font-text); color: var(--fg-2); margin-top: 8px; }
.gb-heritage__body { display: block; max-width: 820px; margin: 0 auto; }
/* Heritage intro — centered editorial split-color title (original) */
.gb-heritage { background: var(--bg-2, #EDEAE2); }
.gb-heritage__intro {
max-width: 1100px;
margin: 0 auto 120px;
text-align: center;
}
.gb-heritage__intro-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(40px, 5.2vw, 72px);
line-height: 1.08;
letter-spacing: -0.015em;
margin: 0 0 40px;
}
.gb-heritage__intro-line1,
.gb-heritage__intro-line2 { display: block; }
.gb-heritage__intro-line1 {
color: var(--tw-hero-accent);
font-style: italic;
font-weight: 400;
font-family: var(--font-serif);
}
.gb-heritage__intro-line2 {
color: var(--gb-ink);
font-weight: 500;
font-style: normal;
font-family: var(--font-display);
}
.gb-heritage__intro-body {
max-width: 1080px;
margin: 0 auto;
font-family: var(--font-text);
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.7;
color: var(--fg-2);
text-wrap: pretty;
}
/* "Who We Are" sub-block (under the intro) */
.gb-heritage__who {
width: 100%;
margin: 0 auto;
}
.gb-heritage__pill-wrap {
display: flex; justify-content: center; margin-bottom: 48px;
}
.gb-pill {
display: inline-block;
padding: 12px 24px;
background: var(--tw-hero-accent, #C9A86B);
color: #fff;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 10.5px;
letter-spacing: 0.22em;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
}
.gb-pill--link { transition: opacity var(--dur-base) var(--ease-standard); }
.gb-pill--link:hover { opacity: 0.78; }
.gb-heritage__who-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 48px);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 auto 64px;
text-align: center;
max-width: 900px;
color: var(--gb-ink);
}
.gb-heritage__who-line1,
.gb-heritage__who-line2 { display: block; }
.gb-heritage__who-line1 em {
color: var(--tw-hero-accent);
font-style: italic;
font-weight: 400;
font-family: var(--font-serif);
}
.gb-heritage__who-line2 {
font-weight: 400;
font-style: normal;
font-family: var(--font-display);
}
.gb-heritage__cta-wrap {
display: flex; justify-content: center; margin-top: 64px;
}
/* Category carousel */
.gb-cat-carousel {
position: relative;
}
.gb-cat-viewport {
overflow: hidden;
width: 100%;
}
.gb-cat-track {
display: flex;
width: 320%; /* 16 cards (8 × 2 for seamless loop) at 20% viewport each */
animation: gb-cat-marquee 28s linear infinite;
will-change: transform;
}
.gb-cat-carousel:hover .gb-cat-track { animation-play-state: paused; }
.gb-cat-card { flex: 0 0 calc(100% / 16); }
@keyframes gb-cat-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.gb-cat-track { animation: none; }
}
.gb-cat-card {
position: relative;
display: flex; flex-direction: column;
margin: 0;
}
.gb-cat-card__bg {
position: relative;
aspect-ratio: 1 / 1.18;
overflow: hidden;
}
.gb-cat-card__cap {
margin-top: 18px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,243,238,0.78);
text-align: left;
}
.gb-cat-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid rgba(15,27,42,0.25);
background: rgba(255,255,255,0.92);
backdrop-filter: blur(6px);
color: rgba(15,27,42,0.7);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all var(--dur-base) var(--ease-standard);
}
.gb-cat-arrow--prev { left: -18px; }
.gb-cat-arrow--next { right: -18px; }
.gb-cat-arrow:hover:not(:disabled) {
border-color: var(--gb-ink, #0F1B2A);
color: var(--gb-ink, #0F1B2A);
}
.gb-cat-arrow:disabled { opacity: 0.3; cursor: default; }
.gb-heritage__entity-name { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -.01em; margin: 14px 0 24px; }
.gb-heritage__entity-abn, .gb-heritage__entity-loc { color: var(--fg-2); margin-top: 6px; font-size: 12px; }
.gb-heritage__copy p { margin: 0 0 20px; }
.gb-heritage__copy p:last-child { color: var(--fg-2); }
/* ---------- Capabilities ---------- */
.gb-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-3); border: 1px solid var(--rule-3); }
.gb-cap { background: var(--bg-2); padding: 48px 40px; position: relative; transition: background var(--dur-base) var(--ease-standard); }
.gb-cap:hover { background: var(--bg-1); }
.gb-cap__rule { height: 1px; width: 32px; background: var(--gb-ink); margin-bottom: 24px; }
.gb-cap__num { color: var(--fg-2); margin-bottom: 24px; }
.gb-cap__title { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 16px; }
.gb-cap__body { font: var(--fw-regular) 15px/1.6 var(--font-text); color: var(--fg-2); margin: 0 0 32px; max-width: 360px; }
.gb-cap__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.gb-tag { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--rule-2); border-radius: 999px; font: var(--fw-medium) 10px/1 var(--font-text); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-1); }
/* ---------- Network ---------- */
.gb-network { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 24px; align-items: stretch; border-top: 1px solid var(--rule-1); padding-top: 48px; }
.gb-node { padding-right: 16px; }
.gb-node__code { font-size: 11px; color: var(--fg-2); margin-bottom: 24px; letter-spacing: .18em; }
.gb-node__city { font-family: var(--font-display); font-weight: 500; font-size: 28px; letter-spacing: -.01em; margin-bottom: 12px; }
.gb-node__role { font-size: 14px; color: var(--fg-2); line-height: 1.5; margin-bottom: 32px; max-width: 240px; }
.gb-node__meta { font-size: 11px; color: var(--fg-2); }
.gb-node__link { font-family: var(--font-display); font-weight: 300; font-size: 24px; color: var(--fg-3); display: flex; align-items: center; padding-top: 24px; }
/* ---------- Contact ---------- */
.gb-contact { display: grid; grid-template-columns: 320px 1fr; gap: 96px; }
.gb-contact__row { padding: 24px 0; border-bottom: 1px solid #2C2C2B; }
.gb-contact__row:first-child { padding-top: 0; }
.gb-contact__val { color: var(--gb-alabaster); margin-top: 12px; line-height: 1.5; }
.gb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.gb-field { display: block; }
.gb-field--full { display: block; margin-bottom: 32px; }
.gb-field input, .gb-field select, .gb-field textarea {
display: block; width: 100%; margin-top: 12px; padding: 10px 0;
background: transparent; border: none; border-bottom: 1px solid rgba(245,243,238,0.65);
font: var(--fw-regular) 16px/1.4 var(--font-text); color: var(--gb-alabaster); outline: none;
border-radius: 1px; resize: none;
transition: border-bottom-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.gb-field input:hover, .gb-field select:hover, .gb-field textarea:hover {
border-bottom-color: rgba(245,243,238,0.9);
}
.gb-field input:focus, .gb-field select:focus, .gb-field textarea:focus {
border-bottom-color: var(--gb-alabaster); box-shadow: 0 1px 0 0 var(--gb-accent-clay);
}
.gb-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gb-alabaster) 50%), linear-gradient(135deg, var(--gb-alabaster) 50%, transparent 50%); background-position: calc(100% - 14px) 18px, calc(100% - 8px) 18px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 28px; }
.gb-field option { color: var(--gb-ink); }
.gb-form__ack { padding: 32px 0; border-top: 1px solid var(--gb-alabaster); }
.gb-form__ack p { margin-top: 16px; max-width: 520px; }
/* ---------- Footer ---------- */
.gb-footer { background: var(--gb-obsidian); color: var(--gb-stone); padding: 96px 0 40px; }
.gb-footer__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 96px; }
.gb-footer__brand .gb-word { color: var(--gb-alabaster); font-size: 18px; }
.gb-footer__logo { width: 64px; height: 64px; display: block; }
.gb-footer__tag { color: var(--gb-stone); margin-top: 24px; max-width: 320px; }
.gb-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.gb-footer__cols a { display: block; color: var(--gb-alabaster); padding: 8px 0; font-size: 14px; }
.gb-footer__cols a:hover { color: var(--gb-stone); }
.gb-footer__cols .t-overline { margin-bottom: 16px; }
.gb-footer__base { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 40px; margin-top: 64px; border-top: 1px solid #2C2C2B; color: var(--gb-graphite); font-size: 11px; }
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.gb-nav__links { display: none; }
.gb-section__head, .gb-hero__sub, .gb-heritage__body, .gb-cap-grid, .gb-network, .gb-contact, .gb-stats, .gb-footer__inner, .gb-footer__cols { grid-template-columns: 1fr; gap: 32px; }
.gb-form__row { grid-template-columns: 1fr; }
.gb-section { padding: 64px 0; }
.gb-hero { padding: 48px 0 64px; }
}
/* =========================================================================
TWEAKS — voice & density variants
========================================================================= */
/* VOICE — italic (default) */
[data-voice="italic"] .gb-hero__headline em {
font-family: var(--font-serif); font-weight: 300; font-style: italic;
}
/* VOICE — stencil/caps */
[data-voice="stencil"] .gb-hero__headline em {
font-family: var(--font-display); font-style: normal; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
font-size: 0.78em;
display: inline-block; padding: 0 0.18em;
border-top: 2px solid currentColor;
border-bottom: 2px solid currentColor;
vertical-align: 0.08em;
}
/* VOICE — hairline (ultralight throughout the headline + italic em) */
[data-voice="hairline"] .gb-hero__headline {
font-weight: 200; letter-spacing: -0.025em;
}
[data-voice="hairline"] .gb-hero__headline em {
font-family: var(--font-serif); font-weight: 200; font-style: italic;
}
/* DENSITY — editorial (default = no override) */
/* DENSITY — generous: more breathing, larger headline, more vertical air */
[data-density="generous"] .gb-hero--dark { padding-top: 440px; padding-bottom: 200px; }
[data-density="generous"] .gb-hero__headline {
font-size: clamp(64px, 8.4vw, 152px);
line-height: 0.98;
margin-bottom: 96px;
}
[data-density="generous"] .gb-hero__sub { margin-bottom: 140px; gap: 96px; }
[data-density="generous"] .gb-section { padding: 144px 0; }
[data-density="generous"] .gb-section__head { margin-bottom: 96px; }
/* TWEAKS PANEL — extra caption row */
.twk-mood-caption {
padding: 0 14px 8px;
margin-top: -4px;
}
.twk-mood-sub {
font-size: 11px; line-height: 1.45; letter-spacing: 0.01em;
color: rgba(0,0,0,0.55);
font-style: italic;
}
/* =====================================================================
v2 — Institutional editorial sections (Heritage / Cap / Net / Cmp)
===================================================================== */
/* Override base section padding for v2 dark editorial pieces */
.gb-section--ink {
background: #0A0E18;
color: #F5F3EE;
border-top: 1px solid #161B26;
}
.gb-section--ink .gb-her2__eyebrow { color: rgba(245,243,238,0.55); }
/* ---------- Heritage v2 (now dark editorial) ---------- */
.gb-heritage {
background: #0F1320;
background-image:
radial-gradient(900px 600px at 18% 12%, rgba(60, 92, 130, 0.18), transparent 70%),
radial-gradient(800px 500px at 82% 68%, rgba(201, 168, 107, 0.10), transparent 65%),
radial-gradient(1100px 700px at 50% 92%, rgba(60, 92, 130, 0.14), transparent 70%),
radial-gradient(700px 500px at 50% 50%, rgba(40, 56, 86, 0.18), transparent 70%);
background-blend-mode: screen, screen, screen, normal;
color: #F5F3EE;
border-top: 1px solid #161B26;
padding: 120px 0 96px;
position: relative;
overflow: hidden;
}
/* Subtle gilded ember above carousel — quiet luxury accent */
.gb-her2__carousel-wrap {
position: relative;
margin-top: 0;
}
.gb-her2__carousel-wrap::before {
content: "";
position: absolute;
inset: -120px -10% auto -10%;
height: 380px;
background:
radial-gradient(60% 100% at 80% 40%, rgba(201, 168, 107, 0.14), transparent 70%),
radial-gradient(50% 100% at 20% 60%, rgba(80, 110, 150, 0.18), transparent 70%);
pointer-events: none;
z-index: 0;
filter: blur(2px);
}
.gb-her2__carousel-head,
.gb-cat-carousel { position: relative; z-index: 1; }
/* Hide legacy intro & "who" if the v1 markup is still around */
.gb-heritage .gb-heritage__intro,
.gb-heritage .gb-heritage__who { display: none; }
.gb-her2 {
display: grid;
grid-template-columns: 180px minmax(560px, auto) 1fr;
gap: 32px;
align-items: start;
margin-bottom: 96px;
padding-bottom: 64px;
border-bottom: 1px solid rgba(245,243,238,0.1);
}
.gb-her2__body {
margin-left: -80px;
}
.gb-her2__rail {
display: flex; flex-direction: column; gap: 16px;
padding-top: 0;
padding-left: 32px;
}
.gb-her2__eyebrow {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11px; letter-spacing: 0.18em;
color: rgba(245,243,238,0.55);
text-transform: uppercase;
}
.gb-her2__year { display: none; }
.gb-her2__title {
font-family: var(--font-serif, Georgia, serif);
font-weight: 400;
font-size: clamp(44px, 5vw, 80px);
line-height: 0.95;
letter-spacing: -0.02em;
color: #F5F3EE;
margin: 0;
}
.gb-her2__title-l1,
.gb-her2__title-l2,
.gb-her2__title-l3 { display: block; color: #F5F3EE; margin-left: 0; text-indent: 0; }
.gb-her2__title-l3 {
margin-top: -0.04em;
}
.gb-her2__title-l3 em {
color: #C9A86B;
font-style: italic;
font-weight: 400;
margin-left: -0.03em;
display: inline-block;
}
.gb-her2__body {
font-family: var(--font-text, system-ui, sans-serif);
font-size: 18px;
font-weight: 300;
line-height: 1.75;
color: #F5F3EE;
padding-top: 18px;
padding-top: 0;
max-width: 480px;
}
.gb-her2__body p { margin: 0 0 18px; color: #F5F3EE; line-height: 1.75; font-size: 18px; }
.gb-her2__body p:last-child { margin-bottom: 0; }
.gb-her2__lead {
font-size: 18px;
color: #F5F3EE !important;
font-weight: 300;
}
.gb-her2__quiet { /* no longer used */ }
/* Mosaic head */
.gb-her2__carousel-wrap { margin-top: 0; }
.gb-her2__carousel-head {
display: grid;
grid-template-columns: 180px 1fr;
gap: 64px;
align-items: end;
margin-top: 50px;
margin-bottom: 96px;
}
.gb-her2__carousel-head .gb-her2__eyebrow { padding-left: 0; white-space: nowrap; }
.gb-her2__sub {
font-family: var(--font-serif, Georgia, serif);
font-weight: 400;
font-size: clamp(20px, 1.8vw, 28px);
line-height: 1.2;
letter-spacing: -0.01em;
color: #F5F3EE;
margin: 0;
max-width: none;
white-space: nowrap;
}
/* Editorial mosaic styles removed — using carousel */
/* Carousel arrow override on dark heritage bg */
.gb-heritage .gb-cat-arrow {
background: rgba(15,19,32,0.85);
border-color: rgba(245,243,238,0.25);
color: rgba(245,243,238,0.7);
}
.gb-heritage .gb-cat-arrow:hover:not(:disabled) {
border-color: #F5F3EE;
color: #F5F3EE;
}
/* ---------- Capabilities v2 ---------- */
.gb-cap2 {
background: #EDEAE2;
padding: 144px 0 128px;
position: relative;
overflow: hidden;
}
/* Subtle grain texture for institutional weight */
.gb-cap2::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
opacity: 0.55;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
z-index: 0;
}
/* Giant ghost watermark — abstract longitude/latitude globe lines, far bottom-right */
.gb-cap2::after {
content: "";
position: absolute;
right: -160px; bottom: -180px;
width: 760px; height: 760px;
pointer-events: none;
opacity: 0.07;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
z-index: 0;
transform-origin: 50% 50%;
animation: gb-cap-globe 30s linear infinite;
will-change: transform;
}
@keyframes gb-cap-globe {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.gb-cap2::after { animation: none; }
}
.gb-cap2 > * { position: relative; z-index: 1; }
.gb-cap2__head {
display: grid;
grid-template-columns: 408px 1fr;
gap: 0;
align-items: start;
margin-bottom: 64px;
max-width: 1240px;
}
.gb-cap2__eyebrow { color: var(--gb-ink, #0F1B2A) !important; opacity: 0.55; align-self: end; padding-bottom: 8px; }
.gb-cap2__title {
font-family: var(--font-serif, Georgia, serif);
font-weight: 400;
font-size: clamp(36px, 4vw, 64px);
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--gb-ink, #0F1B2A);
margin: 0;
max-width: 980px;
}
.gb-cap2__title em {
color: var(--tw-hero-accent, #C9A86B);
font-style: italic;
}
.gb-cap2__rule {
height: 1px;
background: rgba(15,27,42,0.18);
margin-bottom: 0;
}
/* Tightened editorial grid */
.gb-cap2__list { display: flex; flex-direction: column; max-width: 1240px; }
.gb-cap2__row {
display: grid;
grid-template-columns: 96px 200px minmax(0, 540px) 240px;
gap: 56px;
align-items: start;
padding: 72px 56px;
margin: 0 -56px;
border-bottom: 1px solid rgba(15,27,42,0.18);
transition: background-color 200ms ease;
}
.gb-cap2__row:last-child { border-bottom: none; }
/* Zebra: highlight the middle row in cool ash to break monotony */
.gb-cap2__row--alt {
background: rgba(80, 110, 150, 0.06);
border-top: 1px solid rgba(15,27,42,0.10);
border-bottom: 1px solid rgba(15,27,42,0.10);
}
/* Sculptural serif numerals — like inscriptions */
.gb-cap2__num {
font-family: var(--font-serif, Georgia, serif);
font-weight: 400;
font-size: 72px;
line-height: 0.9;
color: rgba(15,27,42,0.78);
letter-spacing: -0.02em;
font-feature-settings: "lnum" 1;
}
/* Kicker meta-label — promoted from ghost to supporting weight */
.gb-cap2__kicker { padding-top: 22px; }
.gb-cap2__kicker .gb-her2__eyebrow {
color: rgba(15,27,42,0.85) !important;
opacity: 1;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.22em;
}
.gb-cap2__copy { max-width: 540px; }
.gb-cap2__rowtitle {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 1.8vw, 28px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--gb-ink, #0F1B2A);
margin: 0 0 20px;
max-width: 460px;
}
.gb-cap2__p {
font: var(--fw-regular) 15px/1.7 var(--font-text);
color: rgba(15,27,42,0.78);
margin: 0 0 14px;
max-width: 520px;
}
.gb-cap2__p:last-child { margin-bottom: 0; }
.gb-cap2__meta {
display: flex; flex-direction: column; gap: 14px;
padding: 6px 0 6px 18px;
border-left: 1px solid rgba(15,27,42,0.22);
margin-top: 8px;
}
.gb-cap2__meta-row {
display: flex; align-items: center; gap: 12px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11px; letter-spacing: 0.16em;
white-space: nowrap;
color: rgba(15,27,42,0.72);
text-transform: uppercase;
font-weight: 500;
}
.gb-cap2__meta-dot {
position: relative;
width: 9px; height: 9px;
flex-shrink: 0;
background: transparent;
border-radius: 0;
}
.gb-cap2__meta-dot::before,
.gb-cap2__meta-dot::after {
content: "";
position: absolute;
background: var(--tw-hero-accent, #C9A86B);
}
.gb-cap2__meta-dot::before {
left: 50%; top: 0; bottom: 0;
width: 1px; transform: translateX(-50%);
}
.gb-cap2__meta-dot::after {
top: 50%; left: 0; right: 0;
height: 1px; transform: translateY(-50%);
}
/* ---------- Network v2 (deep dark schematic) ---------- */
.gb-net2 { padding: 144px 0 128px; position: relative; overflow: hidden; }
/* Slow ambient aurora band drifting across the section background */
.gb-net2::before {
content: "";
position: absolute;
left: -20%; right: -20%;
top: 30%; height: 600px;
pointer-events: none;
background: radial-gradient(60% 50% at 50% 50%, rgba(201,168,107,0.08) 0%, rgba(201,168,107,0.025) 40%, transparent 70%);
filter: blur(40px);
animation: gb-net-aurora 28s ease-in-out infinite alternate;
z-index: 0;
}
@keyframes gb-net-aurora {
0% { transform: translate3d(-8%, -4%, 0) rotate(-3deg); opacity: 0.7; }
50% { transform: translate3d(2%, 2%, 0) rotate(2deg); opacity: 1; }
100% { transform: translate3d(8%, -2%, 0) rotate(4deg); opacity: 0.6; }
}
.gb-net2 > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .gb-net2::before { animation: none; } }
.gb-net2__head {
display: grid;
grid-template-columns: 1.5fr 1.1fr;
column-gap: 80px;
row-gap: 0;
align-items: start;
margin-bottom: 80px;
position: relative;
min-height: 620px;
}
.gb-net2__eyebrow { color: rgba(245,243,238,0.55) !important; }
.gb-net2__beam {
position: absolute;
left: 0;
top: 80px;
width: 100%;
max-width: 720px;
height: 552px;
pointer-events: none;
overflow: visible;
z-index: 0;
}
.gb-net2__beam-svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.gb-net2__beam-flow {
animation: gb-silk-flow 5s linear infinite;
}
.gb-net2__beam-flow--2 { animation-duration: 6s; animation-delay: -1.5s; }
.gb-net2__beam-flow--3 { animation-duration: 5.5s; animation-delay: -3s; }
.gb-net2__beam-flow--4 { animation-duration: 6.5s; animation-delay: -4.5s; }
@keyframes gb-silk-flow {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
.gb-net2__pulse {
transform-box: fill-box;
transform-origin: center;
animation: gb-net2-pulse 2.6s ease-out infinite;
}
@keyframes gb-net2-pulse {
0% { transform: scale(0.6); opacity: 0.85; }
100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.gb-net2__beam-flow,
.gb-net2__pulse { animation: none; }
}
.gb-net2__title {
font-family: var(--font-serif, Georgia, serif);
font-weight: 400;
font-size: clamp(40px, 4.6vw, 72px);
line-height: 1.02;
letter-spacing: -0.02em;
color: #F5F3EE;
margin: 180px 0 8px;
grid-column: 2;
}
.gb-net2__title em { color: #C9A86B; font-style: italic; }
.gb-net2__lead {
grid-column: 2;
font: var(--fw-regular) 18px/1.7 var(--font-text);
color: rgba(245,243,238,0.75);
margin: -8px 0 14px;
max-width: 720px;
}
.gb-net2__lead--quiet { color: rgba(245,243,238,0.5); font-style: italic; }
.gb-net2__schematic {
background: transparent;
border: none;
padding: 0;
margin-bottom: 64px;
position: relative;
overflow: visible;
}
/* Light streak that drifts across the schematic frame */
.gb-net2__schematic::before {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 240px;
pointer-events: none;
background: linear-gradient(115deg, transparent 0%, rgba(201,168,107,0.05) 35%, rgba(201,168,107,0.14) 50%, rgba(201,168,107,0.05) 65%, transparent 100%);
filter: blur(8px);
animation: gb-net-streak 18s linear infinite;
z-index: 0;
}
.gb-net2__schematic > * { position: relative; z-index: 1; }
@keyframes gb-net-streak {
0% { left: -30%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: 110%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .gb-net2__schematic::before { animation: none; } }
.gb-net2__schematic-meta {
display: flex;
justify-content: space-between;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 10px; letter-spacing: 0.18em;
color: rgba(245,243,238,0.45);
margin-bottom: 16px;
padding: 4px 8px;
}
.gb-net2__photo {
position: relative;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
aspect-ratio: 16 / 8;
overflow: hidden;
background: #0a0a0a;
}
.gb-net2__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 65%;
display: block;
filter: saturate(0.75) contrast(1.02) brightness(1);
}
.gb-net2__photo::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(5,8,17,0.0) 55%, rgba(5,8,17,0.55) 100%),
linear-gradient(0deg, rgba(5,8,17,0.0) 75%, rgba(5,8,17,0.35) 100%);
pointer-events: none;
}
.gb-net2__svg {
display: block;
width: 100%;
height: auto;
}
.gb-net2__sweep {
animation: gb-radar-sweep 8s linear infinite;
transform-origin: 600px 360px;
transform-box: fill-box;
}
@keyframes gb-radar-sweep {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.gb-net2__sweep { animation: none; }
}
.gb-net2__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(245,243,238,0.1);
border-bottom: 1px solid rgba(245,243,238,0.1);
}
.gb-net2__stat {
padding: 32px 24px;
border-right: 1px solid rgba(245,243,238,0.1);
}
.gb-net2__stat:last-child { border-right: none; }
.gb-net2__stat-k {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(40px, 4vw, 64px);
line-height: 1;
letter-spacing: -0.02em;
color: #F5F3EE;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.gb-net2__stat-l {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11px; letter-spacing: 0.16em;
color: rgba(245,243,238,0.55);
text-transform: uppercase;
margin-top: 16px;
}
/* ---------- Compliance ---------- */
.gb-cmp {
background: #EDEAE2;
padding: 144px 0 128px;
position: relative;
overflow: hidden;
}
.gb-cmp::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 300px 300px;
background-repeat: repeat;
opacity: 0.05;
pointer-events: none;
z-index: 0;
}
.gb-cmp > * { position: relative; z-index: 1; }
.gb-cmp__head {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
align-items: start;
margin-bottom: 64px;
}
.gb-cmp__eyebrow { color: rgba(15,27,42,0.55) !important; }
.gb-cmp__title {
font-family: var(--font-serif, Georgia, serif);
font-weight: 400;
font-size: clamp(36px, 4vw, 64px);
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--gb-ink, #0F1B2A);
margin: 0;
max-width: 980px;
}
.gb-cmp__title em { color: var(--tw-hero-accent, #C9A86B); font-style: italic; }
.gb-cmp__rule {
height: 1px;
background: rgba(15,27,42,0.18);
margin-bottom: 80px;
}
.gb-cmp__grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 96px;
align-items: start;
}
.gb-cmp__lede p {
font: var(--fw-regular) 16px/1.7 var(--font-text);
color: rgba(15,27,42,0.78);
margin: 0 0 18px;
max-width: 460px;
}
.gb-cmp__quiet {
color: rgba(15,27,42,0.55) !important;
font-style: italic;
}
.gb-cmp__seal {
margin-top: 56px;
max-width: 460px;
}
.gb-cmp__seal-rule {
height: 1px;
background: rgba(15,27,42,0.25);
margin-bottom: 20px;
}
.gb-cmp__seal-row {
display: flex;
justify-content: space-between;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11px; letter-spacing: 0.12em;
text-transform: uppercase;
padding: 14px 0;
border-bottom: 1px solid rgba(15,27,42,0.12);
}
.gb-cmp__seal-l { color: rgba(15,27,42,0.55); }
.gb-cmp__seal-r { color: var(--gb-ink, #0F1B2A); }
.gb-cmp__list {
display: flex; flex-direction: column;
}
.gb-cmp__item {
display: grid;
grid-template-columns: 56px 1fr;
gap: 24px;
padding: 28px 0;
border-bottom: 1px solid rgba(140, 110, 63, 0.45);
opacity: 0;
transform: translateY(20px);
transition: opacity 700ms cubic-bezier(0.2, 0, 0, 1), transform 700ms cubic-bezier(0.2, 0, 0, 1);
}
.gb-cmp__list.is-visible .gb-cmp__item { opacity: 1; transform: translateY(0); }
.gb-cmp__list.is-visible .gb-cmp__item:nth-child(1) { transition-delay: 0ms; }
.gb-cmp__list.is-visible .gb-cmp__item:nth-child(2) { transition-delay: 140ms; }
.gb-cmp__list.is-visible .gb-cmp__item:nth-child(3) { transition-delay: 280ms; }
.gb-cmp__list.is-visible .gb-cmp__item:nth-child(4) { transition-delay: 420ms; }
.gb-cmp__item:first-child { padding-top: 0; }
.gb-cmp__item:last-child { border-bottom: none; }
@media (prefers-reduced-motion: reduce) {
.gb-cmp__item { opacity: 1; transform: none; transition: none; }
}
.gb-cmp__item-k {
font-family: var(--font-display);
font-weight: 300;
font-size: 32px;
line-height: 1;
color: rgba(15,27,42,0.4);
}
.gb-cmp__item-t {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
line-height: 1.3;
letter-spacing: -0.005em;
color: var(--gb-ink, #0F1B2A);
margin: 0 0 8px;
}
.gb-cmp__item-d {
font: var(--fw-regular) 14px/1.6 var(--font-text);
color: rgba(15,27,42,0.7);
margin: 0;
max-width: 540px;
}
/* Responsive collapse */
@media (max-width: 1100px) {
.gb-her2 { grid-template-columns: 1fr; gap: 32px; }
.gb-her2__carousel-head { grid-template-columns: 1fr; gap: 24px; }
.gb-cap2__head, .gb-cmp__head, .gb-net2__head,
.gb-cmp__grid { grid-template-columns: 1fr; gap: 32px; }
.gb-cap2__row { grid-template-columns: 60px 1fr; }
.gb-cap2__kicker, .gb-cap2__meta { grid-column: 1 / -1; }
.gb-net2__title, .gb-net2__lead { grid-column: 1; }
.gb-net2__stats { grid-template-columns: repeat(2, 1fr); }
.gb-net2__stat { border-right: none; border-bottom: 1px solid rgba(245,243,238,0.1); }
}
/* ---------- Partners (anonymized partner profiles) ---------- */
.gb-prt {
background: var(--gb-alabaster, #F5F3EE);
padding: 144px 0 128px;
}
.gb-prt__head {
display: grid;
grid-template-columns: 200px 1fr;
gap: 64px;
align-items: start;
margin-bottom: 48px;
}
.gb-prt__eyebrow { color: rgba(15,27,42,0.55) !important; }
.gb-prt__title {
font-family: var(--font-serif, Georgia, serif);
font-weight: 400;
font-size: clamp(36px, 4vw, 64px);
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--gb-ink, #0F1B2A);
margin: 0;
max-width: 880px;
}
.gb-prt__title em {
color: var(--tw-hero-accent, #C9A86B);
font-style: italic;
}
.gb-prt__lead {
font: var(--fw-regular) 16px/1.7 var(--font-text);
color: rgba(15,27,42,0.78);
margin: 18px 0 0;
max-width: 720px;
}
.gb-prt__rule {
height: 1px;
background: rgba(15,27,42,0.18);
margin-bottom: 0;
}
.gb-prt__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-left: 1px solid rgba(15,27,42,0.18);
}
.gb-prt__card {
padding: 40px 36px;
border-right: 1px solid rgba(15,27,42,0.18);
border-bottom: 1px solid rgba(15,27,42,0.18);
display: flex;
flex-direction: column;
min-height: 240px;
transition: background var(--dur-base, 240ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}
.gb-prt__card:hover { background: rgba(140,110,63,0.04); }
.gb-prt__card-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(15,27,42,0.55);
margin-bottom: 28px;
}
.gb-prt__card-tier { color: rgba(140,110,63,0.85); font-weight: 500; }
.gb-prt__card-region { font-size: 10px; }
.gb-prt__card-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--gb-ink, #0F1B2A);
margin: 0 0 14px;
}
.gb-prt__card-desc {
font: var(--fw-regular) 14px/1.6 var(--font-text);
color: rgba(15,27,42,0.7);
margin: 0;
}
.gb-prt__seal {
display: flex;
align-items: center;
gap: 24px;
margin-top: 56px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(15,27,42,0.45);
}
.gb-prt__seal-line {
flex: 1;
height: 1px;
background: rgba(15,27,42,0.18);
}
@media (max-width: 1100px) {
.gb-prt__head { grid-template-columns: 1fr; gap: 32px; }
.gb-prt__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.gb-prt__grid { grid-template-columns: 1fr; }
}
/* ---------- Contact section: harbor backdrop ---------- */
#contact {
background: transparent !important;
position: relative;
isolation: isolate;
overflow: hidden;
}
#contact > .gb-container { position: relative; z-index: 2; }
#contact::before {
content: '';
position: absolute;
inset: 0;
background-image: url('assets/contact-bg.png?v=1');
background-size: cover;
background-position: center 38%;
filter: brightness(0.45) saturate(0.6) contrast(0.95);
z-index: 0;
}
#contact::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(8, 12, 18, 0.55) 0%,
rgba(8, 12, 18, 0.32) 30%,
rgba(8, 12, 18, 0.50) 65%,
rgba(8, 12, 18, 0.92) 100%
);
z-index: 1;
pointer-events: none;
}