/* Site header */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); transition: background 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.site-header.scrolled { background: rgba(4, 5, 10, 0.86); backdrop-filter: blur(12px); border-color: var(--border); }
.nav { display: flex; align-items: center; gap: var(--s5); height: 100%; }
.logo { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.mark { width: 30px; height: 30px; flex: none; }
.wordmark { font: 600 12px/1 var(--display); font-stretch: 125%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); }
.wordmark span { color: var(--moon); font-weight: 400; }
.wordmark b { color: var(--amber); font-weight: 600; }
.nav-links { display: flex; gap: var(--s5); margin-inline: auto; }
.nav-links a { position: relative; padding: 8px 0; font-size: 13px; color: var(--moon); transition: color 0.2s; }
.nav-links a small { display: none; }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--paper); }
.nav-links a[aria-current='page']::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--amber); }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px; font-size: 13px; border: 1px solid var(--border-strong); border-radius: 2px; white-space: nowrap; translate: var(--tx, 0) var(--ty, 0); transition: translate 0.4s var(--ease), border-color 0.2s; }
.nav-cta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.nav-cta:hover { border-color: var(--amber); }
.nav-toggle { display: none; color: var(--paper); }
[data-magnetic] { translate: var(--tx, 0) var(--ty, 0); transition: translate 0.4s var(--ease), background 0.2s, border-color 0.2s; }

.cursor-ring { position: fixed; left: 0; top: 0; z-index: 90; width: 12px; height: 12px; margin: -6px; border: 1px solid var(--amber); border-radius: 50%; pointer-events: none; transform: translate(var(--x, -40px), var(--y, -40px)); transition: width 0.25s var(--ease), height 0.25s var(--ease), margin 0.25s var(--ease), opacity 0.2s, background 0.25s; opacity: 0.7; }
.cursor-ring.on-action { width: 28px; height: 28px; margin: -14px; opacity: 0.5; }
.cursor-ring.on-tile { width: 44px; height: 44px; margin: -22px; background: rgba(255, 178, 63, 0.1); }

/* Sections */
.section { padding-block: var(--s9); }
.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s6); align-items: end; margin-bottom: var(--s7); }
.section-head h2 { font-size: var(--t-2xl); }
.section-head p { color: var(--muted); }
.kicker { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s5); }
.page-head { position: relative; padding-block: var(--s8) var(--s7); }
.page-head h1 { font-size: clamp(2.2rem, 5.6vw, 5.4rem); margin-bottom: var(--s4); }

/* Hero */
.hero { position: relative; min-height: calc(100dvh - var(--header-h)); display: grid; grid-template-columns: minmax(0, 12fr) minmax(0, 10fr); align-items: center; gap: var(--s4); padding-block: var(--s6) var(--s7); isolation: isolate; }
.hero-bg { position: absolute; inset: calc(var(--header-h) * -1) calc(50% - 50vw) 0; z-index: -2; overflow: hidden; background:
  radial-gradient(46% 62% at 80% 30%, rgba(76, 111, 255, 0.2), transparent 70%),
  radial-gradient(30% 40% at 74% 62%, rgba(255, 178, 63, 0.1), transparent 70%); }
.hero-bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 88px 88px; opacity: 0.4; mask-image: radial-gradient(70% 70% at 70% 45%, #000, transparent); }
.hero-hud { position: absolute; top: var(--s3); left: 0; right: 0; display: flex; justify-content: space-between; }
.hero-hud b { color: var(--paper); font-weight: 400; }
.hero-copy { position: relative; z-index: 3; padding-top: var(--s7); }
.hero h1 { font-size: var(--t-hero); margin-block: var(--s5); }
.hero h1 span { display: block; white-space: nowrap; }
.hero .lead { max-width: 46ch; margin-bottom: var(--s6); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero .btn { min-height: 54px; padding: 0 24px; }

/* The logo as architecture: its axis and ring hold the floating products */
.stage { position: relative; z-index: 1; width: 100%; aspect-ratio: 1 / 1.02; container-type: inline-size; --mx: 0; --my: 0; }
.stage-axis { position: absolute; left: 50%; top: -24%; bottom: -12%; width: 1.5px; background: linear-gradient(transparent, color-mix(in srgb, var(--paper) 74%, transparent) 14%, color-mix(in srgb, var(--paper) 74%, transparent) 60%, transparent); }
.stage-ring { position: absolute; left: 50%; top: 27%; width: 62cqi; height: 62cqi; margin: -31cqi; border: 1.5px solid color-mix(in srgb, var(--paper) 74%, transparent); border-radius: 50%; }
.stage-ring::after { content: ''; position: absolute; inset: -22%; border: 1px solid var(--border); border-radius: 50%; }
.stage-moon { position: absolute; left: 50%; top: 27%; width: 40cqi; height: 40cqi; margin: -20cqi; filter: drop-shadow(0 0 6cqi rgba(255, 178, 63, 0.5)); animation: drift 14s ease-in-out infinite; }
.fw { position: absolute; border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg); translate: calc(var(--mx) * var(--d) * 1px) calc(var(--my) * var(--d) * 1px); transition: translate 0.6s var(--ease); }
.fw .ui:not(.ui-phone) { border-radius: inherit; }
.fw-1 { --d: 16; left: 15%; top: 39%; width: 66%; animation: float-a 9s ease-in-out infinite; }
.fw-2 { --d: 26; left: -3%; top: 63%; width: 47%; animation: float-b 11s ease-in-out infinite; }
.fw-3 { --d: 34; right: -3%; top: 69%; width: 53%; animation: float-a 12s ease-in-out -3s infinite; }
.fw-4 { --d: 44; right: -1%; top: 11%; width: 21%; border: 0; border-radius: 14% / 6.8%; animation: float-b 10s ease-in-out -2s infinite; }
.fw-5 { --d: 22; left: -2%; top: 14%; width: 30%; padding: 2.2cqi; background: rgba(14, 18, 29, 0.92); backdrop-filter: blur(10px); animation: float-a 10s ease-in-out -5s infinite; font-size: 1.4cqi; }
.fw-5 b { display: flex; align-items: center; gap: 0.6em; font-weight: 500; margin-bottom: 0.8em; }
.fw-5 b .mark { width: 1.6em; height: 1.6em; }
.fw-5 p { margin: 0 0 0.6em; color: var(--moon); line-height: 1.4; }
.fw-5 .typing { display: inline-flex; gap: 0.3em; } .fw-5 .typing i { width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--amber); animation: pulse-dot 1.1s infinite; } .fw-5 .typing i:nth-child(2) { animation-delay: 0.15s; } .fw-5 .typing i:nth-child(3) { animation-delay: 0.3s; }
.stage .line { animation: draw 3s var(--ease) 0.8s both; }
.stage-cursor { position: absolute; left: 0; top: 0; z-index: 8; width: 2.8cqi; animation: cursor-path 16s var(--ease) infinite; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }
.stage-cursor svg { display: block; width: 100%; animation: cursor-tap 16s linear infinite; }

/* Commit rail */
.rail { position: fixed; right: var(--s5); top: 50%; z-index: 40; translate: 0 -50%; display: grid; opacity: 0; pointer-events: none; transition: opacity 0.3s; gap: 14px; font-family: var(--mono); font-size: 0.6875rem; }
.rail.show { opacity: 1; pointer-events: auto; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--dim); transition: color 0.2s; }
.rail a span { opacity: 0; translate: 6px 0; transition: 0.25s var(--ease); color: var(--moon); }
.rail:hover a span, .rail a.on span { opacity: 1; translate: 0; }
.rail a i { width: 7px; height: 7px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--void); transition: 0.2s; }
.rail a:hover { color: var(--paper); }
.rail a.on { color: var(--amber); }
.rail a.on i { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 12px rgba(255, 178, 63, 0.7); }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--border); padding-block: var(--s4); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; gap: var(--s6); padding-right: var(--s6); font: 300 clamp(1rem, 1.5vw, 1.375rem)/1 var(--display); font-stretch: 125%; letter-spacing: 0.04em; white-space: nowrap; }
.marquee span::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); }
.stat { padding: var(--s6) 0 var(--s6) var(--s5); }
.stat + .stat { border-left: 1px solid var(--border); }
.stat:first-child { padding-left: 0; }
.stat strong { display: block; font: 300 clamp(2.4rem, 5vw, 4.6rem)/1 var(--display); font-stretch: 125%; }
.stat span { display: block; margin-top: var(--s2); }

/* Featured showcase */
.show { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: var(--s7); align-items: center; padding-block: var(--s8); border-top: 1px solid var(--border); }
.show:nth-of-type(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); }
.show:nth-of-type(even) .show-view { order: 2; }
.show-view { position: relative; padding: clamp(20px, 3.4vw, 56px); overflow: hidden; }
.show-view .ui { border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); transition: transform 0.9s var(--ease); }
.show-view:hover > .ui:not(.show-over) { transform: scale(1.015); }
.show-1 .show-view { background: linear-gradient(160deg, #1a1e23, #0a0c0f); }
.show-2 .show-view { background: #e7efed; }
.show-3 .show-view { background: radial-gradient(90% 90% at 20% 10%, #18340a, #05090a 70%); }
.show-4 .show-view { background: radial-gradient(90% 90% at 80% 0%, #4d1533, #0e0509 70%); }
.show-over { position: absolute; right: 3%; bottom: 5%; width: 34%; z-index: 2; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.show-over.phone { width: 19%; border: 0; right: 6%; bottom: -6%; }
.show-1 .show-view > .ui:not(.show-over), .show-2 .show-view > .ui:not(.show-over) { width: 92%; }
.show h3 { font: 300 clamp(1.8rem, 3vw, 3rem)/1.05 var(--display); font-stretch: 125%; text-transform: uppercase; margin-block: var(--s4); }
.show blockquote { margin: 0 0 var(--s5); font-size: var(--t-lg); color: var(--muted); max-width: 36ch; }
.slash-tags { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--moon); margin-bottom: var(--s5); }

/* Industry index with a floating preview */
.index-list { position: relative; border-top: 1px solid var(--border); }
.index-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: baseline; gap: var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--border); transition: color 0.2s, padding 0.4s var(--ease); }
.index-row strong { font: 300 clamp(1.5rem, 3.4vw, 3.2rem)/1.05 var(--display); font-stretch: 125%; text-transform: uppercase; transition: color 0.2s; }
.index-row:hover { padding-left: var(--s4); }
.index-row:hover strong { color: var(--amber); }
.index-peek { position: fixed; left: 0; top: 0; z-index: 30; width: 340px; pointer-events: none; opacity: 0; scale: 0.94; transform: translate(var(--px, 0), var(--py, 0)); transition: opacity 0.25s, scale 0.35s var(--ease); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.index-peek.on { opacity: 1; scale: 1; }

/* Disciplines */
.cap-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.cap { display: flex; flex-direction: column; gap: var(--s2); min-height: 240px; padding: var(--s5); background: var(--bg); transition: background 0.3s; }
.cap:hover { background: var(--card); }
.cap .icon { width: 22px; height: 22px; color: var(--amber); margin-bottom: auto; }
.cap h3 { font: 400 1.0625rem/1.2 var(--display); font-stretch: 112%; }
.cap p { color: var(--muted); font-size: var(--t-sm); }

/* Process as a commit log */
.log { border-top: 1px solid var(--border); }
.log li { display: grid; grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: baseline; padding-block: var(--s5); border-bottom: 1px solid var(--border); }
.log h3 { font: 300 clamp(1.8rem, 4vw, 3.6rem)/1 var(--display); font-stretch: 125%; text-transform: uppercase; }
.log p { color: var(--muted); max-width: 44ch; }

/* CTA */
.cta { position: relative; padding-block: var(--s9); display: grid; justify-items: start; gap: var(--s6); overflow: hidden; }
.cta h2 { font-size: clamp(2.4rem, 6.6vw, 7rem); max-width: 16ch; }
.btn-launch { min-height: 54px; padding: 0 24px; background: var(--amber); color: #120c02; font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.btn-launch:hover { background: #ffc266; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding-block: var(--s8) var(--s5); font-size: var(--t-sm); overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--s6); }
.footer-brand p { color: var(--muted); margin-top: var(--s4); max-width: 38ch; }
.logo-lg .mark { width: 40px; height: 40px; }
.footer-grid h3 { margin-bottom: var(--s3); font-weight: 400; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid li a { color: var(--moon); overflow-wrap: anywhere; transition: color 0.2s; }
.footer-grid li a:hover { color: var(--amber); }
.footer-sign { margin-block: var(--s8) var(--s5); font-size: clamp(1.8rem, 6.1vw, 7rem); white-space: nowrap; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--border); color: var(--dim); font-size: var(--t-xs); font-family: var(--mono); }

/* Explorer */
.market-feature { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: var(--s7); }
.market-feature a { position: relative; display: block; padding: var(--s4); background: var(--bg); overflow: hidden; transition: background 0.3s; }
.market-feature a:hover { background: var(--card); }
.market-feature .ui { border: 1px solid var(--border); margin-bottom: var(--s3); }
.market-feature a > b { display: block; font: 400 1rem/1.3 var(--display); font-stretch: 112%; }
.filter-bar { position: sticky; top: var(--header-h); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding-block: var(--s3); margin-bottom: var(--s3); background: rgba(4, 5, 10, 0.9); backdrop-filter: blur(10px); border-block: 1px solid var(--border); }
.filter-bar .field { flex-direction: row; align-items: center; gap: var(--s2); }
.filter-bar .grow { flex: 1 1 240px; }
.filter-bar select, .filter-bar input { min-height: 38px; }
.filter-bar select { width: auto; max-width: 170px; }
.count { font-family: var(--mono); font-size: 0.75rem; color: var(--moon); }
.segmented { display: inline-flex; border: 1px solid var(--border-strong); }
.segmented button { display: grid; place-items: center; min-width: 40px; min-height: 38px; color: var(--muted); }
.segmented button[aria-pressed='true'] { background: var(--paper); color: var(--void); }
.mosaic.list .app-card { grid-column: span 12; grid-row: auto; display: flex; flex-direction: row; }
.mosaic.list .tile-view { flex: 0 0 26%; order: 0; padding: var(--s3) 0 0 var(--s3); }
.mosaic.list .tile-body { order: 1; border-top: 0; border-left: 1px solid var(--border); padding: var(--s4); }
.mosaic.list h3 { font-size: 1.0625rem; text-transform: none; font-stretch: 112%; font-weight: 400; }

/* Product detail */
.detail-hero { padding-block: var(--s6) var(--s7); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 0.75rem; color: var(--moon); margin-bottom: var(--s6); }
.crumbs a:hover { color: var(--amber); }
.detail-title { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s6); align-items: end; }
.detail-title h1 { font-size: clamp(2.2rem, 5.8vw, 5.8rem); margin-top: var(--s4); }
.detail-title .lead { margin-bottom: var(--s5); }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.full-preview { position: relative; padding: clamp(16px, 4vw, 72px); padding-bottom: 0; overflow: hidden; background: radial-gradient(70% 90% at 50% 0%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 72%); border-block: 1px solid var(--border); }
.full-preview .ui { max-width: 1240px; margin-inline: auto; border: 1px solid var(--border-strong); border-bottom: 0; box-shadow: var(--shadow-lg); }
.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.cap-grid div { padding: var(--s5); background: var(--bg); min-height: 150px; }
.cap-grid code { display: block; margin-bottom: var(--s5); font-family: var(--mono); font-size: 0.6875rem; color: var(--dim); }
.feature-show { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s7); align-items: center; padding-block: var(--s7); border-top: 1px solid var(--border); }
.feature-show:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.feature-show:nth-of-type(even) .ui { order: -1; }
.feature-show .ui { border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.feature-show h3 { font: 300 clamp(1.4rem, 2.4vw, 2.2rem)/1.1 var(--display); font-stretch: 125%; text-transform: uppercase; margin-bottom: var(--s3); }
.feature-show p { color: var(--muted); }
.flow-line { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s4); padding-top: 34px; }
.flow-line::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--amber), var(--cobalt-soft)); }
.flow-line li { position: relative; font-size: var(--t-sm); color: var(--muted); }
.flow-line li::before { content: ''; position: absolute; top: -33px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--void); border: 1px solid var(--amber); }
.flow-line code { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 0.6875rem; color: var(--dim); }
.role-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.role-list div { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); background: var(--bg); }
.role-list .avatar { border-radius: 2px; }
.stack-layers { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.stack-layers div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); background: var(--bg); }
.outcomes { display: grid; gap: 0; border-top: 1px solid var(--border); }
.outcomes p { padding-block: var(--s4); border-bottom: 1px solid var(--border); font: 300 clamp(1.4rem, 3.2vw, 3rem)/1.1 var(--display); font-stretch: 125%; text-transform: uppercase; }
.outcomes p:nth-child(even) { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--paper) 62%, transparent); }
.concept-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s6); border: 1px solid var(--amber); }
.concept-cta h2 { font-size: clamp(1.4rem, 2.6vw, 2.4rem); margin-bottom: var(--s2); }
.sub-head { margin-top: var(--s5); }
.section-more { margin-top: var(--s5); }
.section-title { margin-bottom: var(--s5); }
.empty-state.wide { grid-column: 1 / -1; background: var(--bg); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Industries */
.ind-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s7); align-items: start; padding-bottom: var(--s8); }
.ind-nav { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 2px; font-family: var(--mono); font-size: 0.75rem; }
.ind-nav a { padding: 6px 0; color: var(--moon); transition: color 0.2s, padding 0.3s var(--ease); }
.ind-nav a:hover { color: var(--amber); padding-left: 6px; }
.ind { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s6) var(--s7); padding-block: var(--s7); border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 8px); }
.ind:first-child { border-top: 0; padding-top: 0; }
.ind-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--s4); }
.ind-head h2 { font-size: clamp(2rem, 4.6vw, 4.4rem); }
.ind-preview .ui { border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.ind-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s5); }
.ind-cols h3 { margin-bottom: var(--s2); font-weight: 400; }
.ind-cols li { color: var(--muted); font-size: var(--t-sm); padding-block: 3px; }
.mini-apps { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.mini-app { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border-strong); font-size: var(--t-sm); transition: border-color 0.2s, color 0.2s; }
.mini-app:hover { border-color: var(--amber); color: var(--amber); }
.mini-app i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.mini-app.is-live i { background: var(--amber); }

/* About */
.about-lede { font: 300 clamp(1.5rem, 3vw, 2.8rem)/1.25 var(--display); max-width: 30ch; }
.about-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); padding-bottom: var(--s8); }
.prose { display: grid; gap: var(--s4); color: var(--muted); max-width: 60ch; align-content: start; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.about-grid div { padding: var(--s5); background: var(--bg); min-height: 220px; }
.about-grid h2 { font: 400 1.25rem/1.2 var(--display); font-stretch: 112%; margin-block: var(--s6) var(--s2); }
.about-grid p { color: var(--muted); font-size: var(--t-sm); }
.text-link { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s7); padding-bottom: var(--s8); align-items: start; }
.notice { display: flex; gap: 10px; padding: 12px 14px; margin-bottom: var(--s5); border: 1px solid var(--border-strong); font-size: var(--t-sm); color: var(--muted); }
.notice .icon { color: var(--amber); margin-top: 2px; }
.lead-form .btn { grid-column: 1 / -1; }
.lead-form input:not([type='checkbox']), .lead-form select, .lead-form textarea, .modal input:not([type='checkbox']), .modal select, .modal textarea { border-radius: var(--r-sm); }
body[data-page] .lead-form input, body[data-page] .lead-form select, body[data-page] .lead-form textarea { background: transparent; border-width: 0 0 1px; border-radius: 0; padding-inline: 0; }
.lead-success { display: grid; gap: var(--s3); justify-items: start; }
.lead-success .icon { width: 32px; height: 32px; color: var(--amber); }
.contact-side { display: grid; gap: var(--s5); font-size: var(--t-sm); }
.contact-side h2 { font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moon); margin-bottom: var(--s2); }
.contact-side a { color: var(--paper); overflow-wrap: anywhere; }
.contact-side a:hover { color: var(--amber); }
.enquiry { padding-block: 8px; border-top: 1px solid var(--border); color: var(--muted); }
.enquiry b { display: block; color: var(--text); font-weight: 500; }
.plain-set { border: 0; padding: 0; margin: 0; }
.h3 { font-size: var(--t-lg); }