:root {
    --pinn-primary: #d50000;
    --pinn-primary-text: #ff3b3b;
    --pinn-secondary: #0b0b0e;
    --pinn-accent: #f0f0f0;
    --pinn-muted: #8a8f96;
    --pinn-transport: #e8eaed;
    --pinn-growth: #d50000;
    --header-h: 88px;
    --versionbar-h: 34px; /* the dev/preview version-switcher bar; 0 on pages that don't include it */

    /* Revision 2 typography/motion system (see REVISIONS.md) — collapsed
       from nine ad-hoc letter-spacing values and five easing/duration
       combinations down to three tokens each. A small, consistently-reused
       set is what reads as "designed" rather than "assembled." */
    --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --ls-tight: 0.01em;   /* headings */
    --ls-body: 0.04em;    /* running text */
    --ls-caps: 0.18em;    /* uppercase micro-labels */
    --ease-premium: cubic-bezier(0.3, 0.01, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--pinn-secondary);
    color: var(--pinn-accent);
    font-family: var(--font-display);
    letter-spacing: var(--ls-body);
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

/* WCAG 2.4.7 Focus Visible — an explicit, high-contrast ring, since the
   dark theme and custom controls make default browser focus rings easy
   to lose */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--pinn-primary-text);
    outline-offset: 3px;
}

/* standard sr-only pattern: present in the accessibility tree, invisible
   on screen — used for the page's single true <h1> */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- canvas ---------- */
#canvas_wrapper { position: fixed; inset: 0; z-index: 0; }
#glCanvas { width: 100%; height: 100%; display: block; }
/* the frame that makes the scene read as composed rather than an
   unbounded render — darkens the outer field where text sits while
   leaving the coin's center bright */
#canvas_wrapper::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 30%, rgba(6, 6, 9, 0.55) 100%);
}
[data-render-mode="fallback"] .options { position: relative; }
.fallback-emblem { display: none; }
[data-render-mode="fallback"] .fallback-emblem {
    display: block;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(38vw, 260px);
    opacity: 0.9;
    z-index: 0;
    pointer-events: none;
}

/* ---------- header / brand ---------- */
#mainHeader {
    position: fixed; top: var(--versionbar-h); left: 0; right: 0;
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(20px, 4vw, 48px);
    z-index: 30;
}
.brand-mark img { width: 40px; height: 40px; }

.open_button, .close_button {
    width: 44px; height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    position: relative;
    z-index: 40;
}
.open_button span {
    display: block; width: 26px; height: 2px; background: var(--pinn-accent);
    transition: transform 0.3s var(--ease-premium), opacity 0.3s var(--ease-premium);
}
.close_button { display: none; }
.close_button span {
    position: absolute; width: 26px; height: 2px; background: var(--pinn-accent);
}
.close_button span:first-child { transform: rotate(45deg); }
.close_button span:last-child { transform: rotate(-45deg); }

body.menu-open .open_button { display: none; }
body.menu-open .close_button { display: flex; }

/* ---------- nav overlay ---------- */
#siteNav {
    display: none;
    position: fixed; inset: 0;
    background: rgba(11, 11, 14, 0.98);
    z-index: 35;
    align-items: center; justify-content: center;
    visibility: hidden;
}
.nav-inner {
    width: min(760px, 90vw);
    text-align: center;
}
.nav-wordmark {
    width: min(360px, 65vw);
    margin: 0 auto clamp(24px, 4vw, 48px);
}
.nav-links { display: flex; flex-direction: column; gap: 18px; }
.nav-links > li > a {
    font-size: clamp(1.4rem, 3.2vw, 2.1rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    transition: color 0.2s var(--ease-premium);
}
.nav-links > li > a:hover, .nav-links > li > a.selected { color: var(--pinn-primary); }
.nav-links > li > ul {
    margin-top: 10px;
    display: flex; flex-wrap: wrap; gap: 10px 20px;
    justify-content: center;
}
.nav-links > li > ul a {
    font-size: 0.82rem; letter-spacing: var(--ls-caps); color: var(--pinn-muted);
    /* text alone is ~16px tall — pad toward the 24px WCAG 2.2 (2.5.8)
       minimum tap target without changing the visual line spacing */
    display: inline-block; padding: 5px 3px; margin: -5px -3px;
}
.nav-links > li > ul a:hover { color: var(--pinn-accent); }

address {
    margin-top: clamp(28px, 4vw, 48px);
    font-style: normal;
    font-size: 0.85rem;
    letter-spacing: var(--ls-body);
    color: var(--pinn-muted);
    line-height: 1.9;
}
address a:hover { color: var(--pinn-primary); }
.social { display: flex; justify-content: center; gap: 14px; margin-top: 12px; }
.social a { color: var(--pinn-muted); padding: 5px; margin: -5px; display: inline-flex; }
.social a:hover { color: var(--pinn-primary); }

/* ---------- hero ---------- */
#shell { position: relative; z-index: 5; }
#home {
    position: relative;
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: calc(var(--header-h) + var(--versionbar-h)) 24px 40px;
    cursor: grab;
    user-select: none;
}
#home.dragging { cursor: grabbing; }

.gateway-cue {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    font-size: 0.68rem; letter-spacing: var(--ls-caps); color: var(--pinn-muted);
    transition: opacity 0.6s var(--ease-premium); z-index: 6; pointer-events: none;
}
.gateway-cue.is-hidden { opacity: 0; }

.options {
    position: relative;
    width: min(1360px, calc(100% - 8rem));
    display: grid;
    /* the center column is reserved for the coin — text physically cannot
       enter its zone regardless of how the coin/glow render (see
       REVISIONS.md Revision 2: this replaced a 1fr/1fr grid that let a
       ~60vh coin overlap both text columns by design) */
    grid-template-columns: 1fr min(28vw, 320px) 1fr;
    align-items: end;
    padding-bottom: 14vh;
}

.landing_option {
    display: flex; flex-direction: column;
    /* grid items default to a min-width based on their content's
       min-content size (here, the width of the single longest unbroken
       word) — without this, that min-content can force the "1fr" tracks
       to grow past the container and overflow the viewport regardless of
       the column's intended flexible width */
    min-width: 0;
    transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}
[data-side="left"] { grid-column: 1; text-align: right; align-items: flex-end; }
[data-side="right"] { grid-column: 3; text-align: left; align-items: flex-start; }

body[data-focus="growth"] [data-side="left"],
body[data-focus="transportation"] [data-side="right"] {
    opacity: 0.35;
    transform: scale(0.96);
}
body[data-focus="growth"] [data-side="right"],
body[data-focus="transportation"] [data-side="left"] {
    transform: scale(1.04);
}

/* a hairline rule carries the division identity instead of a colored
   heading — two differently-colored headlines read as two competing
   sites; one company, two divisions is the actual message */
.division-rule {
    display: block; width: 48px; height: 1px; margin-bottom: 24px;
}
[data-side="left"] .division-rule { margin-left: auto; background: var(--pinn-transport); }
[data-side="right"] .division-rule { background: var(--pinn-primary); }

.outline_head {
    /* calibrated so "TRANSPORTATION" — the longest single unbreakable
       word on the page — fits the narrowest column this layout produces
       (see the 1180px breakpoint below and the reserved center column
       above); a much larger size looks better in isolation but overflows
       at real desktop widths */
    font-size: clamp(1.8rem, 2.4vw, 2.8rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: var(--ls-tight);
    margin: 0 0 28px;
    color: transparent;
    -webkit-text-stroke: 0.018em var(--pinn-accent);
    paint-order: stroke fill;
    text-transform: uppercase;
    overflow-wrap: break-word; /* safety net, not the primary mechanism */
}

.billboards {
    display: flex; flex-direction: column;
    max-width: 320px;
    margin-bottom: 40px;
    /* hidden until the visitor engages a division (hover on desktop, tap
       on mobile via the same body[data-focus] state) — resting composition
       drops from ~20 hero elements to headline + rule + CTA per side */
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s var(--ease-premium);
}
body[data-focus="transportation"] #opt_transportation .billboards,
body[data-focus="growth"] #opt_growth .billboards {
    opacity: 1; pointer-events: auto;
}
[data-side="left"] .billboards { margin-left: auto; }
[data-side="right"] .billboards { margin-right: auto; }

.billboards li {
    position: relative;
    border-bottom: 1px solid rgba(240, 240, 240, 0.1);
    padding: 10px 16px;
    font-size: 0.7rem;
    letter-spacing: var(--ls-caps);
    color: var(--pinn-muted);
    text-transform: uppercase;
}
.billboards li::before {
    content: ""; position: absolute; top: 50%; width: 3px; height: 14px;
    transform: translateY(-50%);
}
[data-side="left"] .billboards li::before { right: 0; background: var(--pinn-transport); }
[data-side="right"] .billboards li::before { left: 0; background: var(--pinn-primary); }
.tag-text .word { display: inline-block; white-space: nowrap; }

/* one square hairline control beside one perfect circle (the coin) is a
   deliberate pairing; a rounded button beside a circle reads as an
   accident — see REVISIONS.md Revision 2 */
.option_button {
    display: inline-flex; align-items: center; gap: 12px;
    border: 1px solid rgba(240, 240, 240, 0.35);
    background: transparent;
    padding: 16px 28px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: var(--ls-caps);
    transition: border-color 0.25s var(--ease-premium), transform 0.15s var(--ease-premium);
}
.option_button svg { transition: transform 0.25s var(--ease-premium); }
[data-side="left"] .option_button { color: var(--pinn-transport); }
[data-side="right"] .option_button { color: var(--pinn-primary-text); }
.option_button:hover { border-color: rgba(240, 240, 240, 0.7); }
[data-side="right"] .option_button:hover { border-color: rgba(213, 0, 0, 0.7); }
.option_button:hover svg { transform: translateX(6px); }
.option_button:active { transform: translateY(1px); }

/* ---------- detail panel ---------- */
.detail-panel {
    display: none;
    position: fixed; inset: 0;
    z-index: 20;
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 0 24px;
    background: radial-gradient(circle at 50% 40%, rgba(24, 24, 28, 0.5), rgba(11, 11, 14, 0.97) 70%);
    visibility: hidden;
}
.detail-panel h3 {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    letter-spacing: var(--ls-tight); margin: 0 0 18px; color: var(--pinn-accent);
}
.detail-panel p {
    max-width: 620px; color: var(--pinn-muted); line-height: 1.7; margin: 0 0 32px;
}
.brand-statement {
    font-size: 0.68rem; letter-spacing: var(--ls-caps); color: var(--pinn-muted);
}
.back_button {
    font-size: 0.75rem; letter-spacing: var(--ls-caps); color: var(--pinn-primary-text);
    align-self: flex-start; position: absolute;
    top: calc(var(--header-h) + var(--versionbar-h) + 2px); left: calc(clamp(20px, 4vw, 48px) - 12px);
    /* padding grows the tap target toward the WCAG 2.2 24x24px minimum
       (2.5.8) without shifting where the label visually sits */
    padding: 10px 12px;
}

/* ---------- mobile / narrow-desktop ---------- */
/* the reserved-center-column layout needs real width: at 5.2rem the
   headline words ("TRANSPORTATION", "GROWTH") are wide, single,
   non-breaking units, and the two side columns of a 3-column grid don't
   have room for them below roughly this width — stack to one column
   instead of letting them overflow past the column edge */
@media (max-width: 1180px) {
    .options { grid-template-columns: 1fr; gap: 56px; padding-bottom: 4vh; align-items: center; }
    [data-side="left"], [data-side="right"] { grid-column: 1; text-align: center; align-items: center; }
    [data-side="left"] .division-rule { margin-left: auto; margin-right: auto; }
    [data-side="left"] .billboards, [data-side="right"] .billboards { margin-left: auto; margin-right: auto; }
    .billboards li::before { display: none; }
    .gateway-cue { display: none; }
    #home { cursor: default; padding-top: calc(var(--header-h) + var(--versionbar-h) + 12px); }
    body[data-focus] .landing_option { opacity: 1; transform: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .landing_option, .option_button, .billboards { transition: none; }
}