@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/site/fonts/geologica-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 300 500;
  font-stretch: 112.5%;
  font-display: swap;
  src: url("/site/fonts/martian-mono-latin.woff2") format("woff2");
}

/* Carbon Relay Network brand palette (v4): the only colours on the site. */
:root {
  --carbon: #2D2023;
  --oxide-deep: #6B3730;
  --oxide: #82533B;
  --coral: #C86F5D;
  --shale: #A9A595;
  --fleck: #C6C5BF;
  --limestone: #D8D3BF;
  --pale: #F4F2EA;
  --rule-light: rgba(169,165,149,.55);
  --rule-dark: rgba(198,197,191,.22);
  --sans: "Geologica", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --tile: 484px;
  --wrap: 1280px;
}

html { background: var(--carbon); }
body { margin: 0; background: var(--pale); color: var(--carbon); }
#cr-root { font-family: var(--sans); font-variation-settings: "SHRP" 100; font-weight: 400; color: var(--carbon); background: var(--pale); overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: var(--carbon); text-decoration: none; }
a:hover { color: var(--oxide-deep); }
footer a:hover, .on-dark a:hover { color: var(--pale) !important; }
h1, h2, h3 { font-family: var(--sans); letter-spacing: -.03em; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Surfaces */
.tx-carbon { background: var(--carbon) url("/site/img/texture-carbon.jpg") repeat; background-size: var(--tile); }
.tx-oxide { background: var(--oxide-deep) url("/site/img/texture-oxide.jpg") repeat; background-size: var(--tile); }
.tx-limestone { background: var(--limestone) url("/site/img/texture-limestone.jpg") repeat; background-size: var(--tile); }
.bg-pale { background: var(--pale); }
.bg-limestone { background: var(--limestone); }
.bg-oxide-deep { background: var(--oxide-deep); }
.on-dark { color: var(--limestone); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--pale); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.sec { padding: 136px 0; }
.sec-rule { border-top: 1px solid var(--rule-light); }

/* Type */
.mono { font-family: var(--mono); font-stretch: 112.5%; font-variation-settings: "wdth" 112.5; text-transform: uppercase; letter-spacing: .06em; font-weight: 400; }
.eb { margin: 0; font-family: var(--mono); font-stretch: 112.5%; font-variation-settings: "wdth" 112.5; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--oxide-deep); }
.on-dark .eb, .eb.on-carbon { color: var(--fleck); }
.h2 { margin: 20px 0 0; font-weight: 600; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.05; color: var(--carbon); text-wrap: balance; }
.on-dark .h2 { color: var(--pale); }
.lead { margin: 0; font-size: 16.5px; line-height: 1.7; font-weight: 300; color: var(--carbon); }
.on-dark .lead { color: var(--limestone); }
.body { font-size: 17px; line-height: 1.75; font-weight: 300; color: var(--carbon); }
.card-t { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--carbon); }
.card-p { margin: 0; font-size: 15.5px; line-height: 1.7; font-weight: 300; color: var(--carbon); }

/* Wordmark: Geologica SemiBold, sentence case, tight tracking. */
.wordmark { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }

/* Motion */
@keyframes cr-rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes cr-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes cr-lay { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cr-rise { animation: cr-rise 1.6s .2s cubic-bezier(.16,.84,.3,1) both; }
.cr-up1 { animation: cr-up 1s .9s cubic-bezier(.2,.7,.2,1) both; }
.cr-up2 { animation: cr-up 1s 1.15s cubic-bezier(.2,.7,.2,1) both; }
.cr-bob { animation: cr-bob 2.4s ease-in-out infinite; }

/* Hero sediment: bands laid down bottom first, never redrawn. */
.hero-strata { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column-reverse; gap: 5px; pointer-events: none; }
.hero-strata i { display: block; transform-origin: left center; animation: cr-lay 1.6s cubic-bezier(.65,.05,.25,1) both; }
.hero-strata i:nth-child(1) { height: 30px; background: var(--oxide-deep); animation-delay: .3s; }
.hero-strata i:nth-child(2) { height: 10px; background: var(--oxide); animation-delay: .55s; }
.hero-strata i:nth-child(3) { height: 4px; background: var(--shale); opacity: .45; animation-delay: .8s; }
.hero-strata i:nth-child(4) { height: 16px; background: var(--oxide-deep); opacity: .85; animation-delay: 1.05s; }
.hero-strata i:nth-child(5) { height: 3px; background: var(--coral); animation-delay: 1.3s; }
.hero-strata i:nth-child(6) { height: 2px; background: var(--limestone); opacity: .35; animation-delay: 1.55s; }
.hero-strata i:nth-child(7) { height: 6px; background: var(--oxide); opacity: .7; animation-delay: 1.8s; }

/* Buttons and links */
.cr-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--carbon); color: var(--pale); font-family: var(--sans); font-size: 15px; font-weight: 500; padding: 15px 22px; border-radius: 4px; border: 1px solid var(--carbon); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.cr-btn:hover { background: var(--oxide-deep); border-color: var(--oxide-deep); color: var(--pale); }
.cr-btn-ghost { display: inline-flex; align-items: center; border: 1px solid var(--shale); color: var(--carbon); font-size: 15px; font-weight: 500; padding: 15px 22px; border-radius: 4px; transition: background .25s, color .25s, border-color .25s; }
.cr-btn-ghost:hover { background: var(--carbon); color: var(--pale); border-color: var(--carbon); }
.cr-btn-light { display: inline-flex; align-items: center; gap: 10px; background: var(--pale); color: var(--carbon); font-size: 15px; font-weight: 500; padding: 15px 22px; border-radius: 4px; transition: background .25s; }
.cr-btn-light:hover { background: var(--limestone); color: var(--carbon); }
.cr-link { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .4s; }
.cr-link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* Cards */
.cr-card { background: var(--pale); border: 1px solid var(--rule-light); border-radius: 6px; transition: border-color .3s, background .3s; }
.cr-card:hover { border-color: var(--oxide-deep); }
.cr-card svg { stroke: var(--oxide-deep); }
#platform .cr-card svg, #stakeholders .cr-card svg { stroke: var(--coral); }
.gate-card, .gate-card:hover { border-top: 3px solid var(--coral); }

.cr-fade { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1); }
.cr-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--shale); background: transparent; color: var(--carbon); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .25s, color .25s; }
.cr-arrow:hover { background: var(--carbon); color: var(--pale); }
.cr-in { font: 400 16px var(--sans); font-variation-settings: "SHRP" 100; color: var(--carbon); background: var(--pale); border: 1px solid var(--shale); border-radius: 4px; padding: 12px 14px; min-height: 44px; box-sizing: border-box; transition: border-color .25s; }
.cr-in:focus { outline: none; border-color: var(--oxide-deep); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* Header */
.cr-hdr { transition: background .4s, border-color .4s; background: transparent; border-bottom: 1px solid var(--rule-dark); }
.cr-hdr .hdr-ink { color: var(--pale); }
.cr-hdr .hdr-btn { background: transparent; color: var(--pale); border: 1px solid rgba(244,242,234,.5); }
.cr-hdr.is-scrolled { background: rgba(244,242,234,.95); border-bottom: 1px solid var(--rule-light); backdrop-filter: blur(12px); }
.cr-hdr.is-scrolled .hdr-ink { color: var(--carbon); }
.cr-hdr.is-scrolled .hdr-btn { background: var(--carbon); color: var(--pale); border: 1px solid var(--carbon); }
.cr-hdr .hdr-btn:hover { background: var(--pale); color: var(--carbon); }
.cr-hdr.is-scrolled .hdr-btn:hover { background: var(--oxide-deep); border-color: var(--oxide-deep); color: var(--pale); }
.cr-hdr .hdr-signin:hover { opacity: .75; }

/* Stage tabs and strata panel */
.cr-tab { color: var(--carbon); }
.cr-tab .cr-tab-bar { width: 0; }
.cr-tab.is-active { color: var(--oxide-deep); }
.cr-tab.is-active .cr-tab-bar { width: 100%; }
.strata-panel { position: relative; aspect-ratio: 16 / 11; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; padding: clamp(24px, 4vw, 44px); box-sizing: border-box; }
.strata-cap { font-size: clamp(24px, 2.6vw, 32px); color: var(--coral); letter-spacing: .04em; font-weight: 400; line-height: 1.2; }
.strata { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.stratum { display: grid; grid-template-columns: 1fr minmax(96px, 30%); align-items: center; gap: 16px; }
.stratum b { display: block; height: 28px; background: var(--shale); transform-origin: left center; transform: scaleX(0); transition: transform 1s cubic-bezier(.65,.05,.25,1), background .4s; }
.stratum span { font-size: 11px; color: var(--fleck); opacity: .35; transition: opacity .4s; }
.stratum.is-laid b { transform: scaleX(1); }
.stratum.is-laid span { opacity: 1; }
.stratum[data-step="0"] b { background: var(--oxide-deep); }
.stratum[data-step="1"] b { background: var(--oxide); }
.stratum[data-step="2"] b { background: var(--shale); }
.stratum[data-step="3"] b { background: var(--fleck); }
.stratum[data-step="4"] b { background: var(--limestone); }
.stratum.is-current b { background: var(--coral); }
.stratum.is-current span { color: var(--pale); }

/* Record stack (The problem) */
.rec { display: flex; flex-direction: column-reverse; gap: 6px; }
.rec-row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--oxide-deep); color: var(--pale); font-size: 11px; }
.rec-row:nth-child(2n) { background: var(--carbon); color: var(--limestone); border: 1px solid var(--rule-dark); }
.rec-row.is-top { border-top: 3px solid var(--coral); }

/* Accelerate section */
.acc-row { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; align-items: stretch; margin-top: 64px; }
.acc-card { border-radius: 6px; padding: 36px 32px; display: flex; flex-direction: column; gap: 16px; }
.acc-card .mono { font-size: 12px; font-weight: 500; }
.acc-num { font-size: 28px !important; font-weight: 300 !important; letter-spacing: 0 !important; }
.acc-card p { margin: 0; font-size: 16px; line-height: 1.65; font-weight: 300; }
.acc-lt { background: var(--limestone); color: var(--carbon); }
.acc-lt .mono { color: var(--oxide-deep); }
.acc-dk { color: var(--pale); }
.acc-dk .mono, .acc-dk p { color: var(--pale); }
.acc-arrow { display: flex; align-items: center; justify-content: center; }
.acc-arrow svg { stroke: var(--coral); }
@media (max-width: 900px) {
  .acc-row { grid-template-columns: 1fr; grid-template-rows: auto; }
  .acc-arrow { height: 44px; }
  .acc-arrow svg { transform: rotate(90deg); }
}

/* Chain (data room) */
.chain-i { padding: 18px 16px; border: 1px solid var(--rule-light); border-radius: 4px; font-size: 15px; font-weight: 500; color: var(--carbon); background: var(--pale); }
.chain-end { padding: 18px 16px; border-radius: 4px; font-size: 15px; font-weight: 600; color: var(--pale); background: var(--oxide-deep); border-top: 3px solid var(--coral); }

.chip { font-size: 11px; padding: 9px 14px; border: 1px solid var(--rule-dark); border-radius: 999px; color: var(--limestone); }
.photo-warm { filter: saturate(.55) sepia(.18); }

@media (max-width: 960px) { .hdr-nav { display: none !important; } }
@media (max-width: 520px) {
  .wrap { padding: 0 20px; }
  .sec { padding: 96px 0; }
  .hdr-signin { display: none; }
  .cap { border-right: 0 !important; padding: 14px 0 !important; }
  .stratum b { height: 18px; }
  .strata-panel { aspect-ratio: auto; min-height: 380px; }
  .stratum { grid-template-columns: 1fr 118px; gap: 12px; }
  .stratum span { font-size: 10px; letter-spacing: .03em; }
  .hdr-wm { font-size: 15px !important; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}