/* Geist + Geist Mono, self-hosted (SIL OFL). Both are variable, so one file
   covers the whole weight axis. The mono carries the technical metadata layer —
   tags, labels, eyebrows — which is what gives the type system its engineering
   register rather than a second decorative sans. */
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --paper: #ffffff;
  --paper-2: #ffffff;
  --ink: #0b0c0e;
  --stone: #878d95;
  --stone-deep: #5c6169;
  --rule: rgba(14, 17, 22, 0.13);
  --dark: #0f1013;
  --dark-2: #181715;
  --light-on-dark: #f2f3f5;
  --muted-on-dark: #9aa0a8;
  --pad: clamp(30px, 3.6vw, 58px);
  --header-h: 96px;
  /* One vertical rhythm for every chapter. Chapters previously carried
     hand-tuned openings (96/170/171/164/192) and closings (0/45/50/55/60/66),
     so nothing shared a baseline. */
  --chapter-open: clamp(80px, 7vh, 104px);
  --chapter-close: clamp(64px, 5.5vh, 84px);
  --ease: cubic-bezier(.2,.72,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Geist", "Helvetica Neue", Arial, sans-serif; font-weight: 400; letter-spacing: -0.018em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: #cfc4bc; color: var(--ink); }

.site-header {
  position: fixed; z-index: 1000; top: 0; left: 0; right: 0; height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--pad); transition: color .35s ease, background .35s ease, border-color .35s ease;
  color: var(--ink); background: linear-gradient(to bottom, rgba(255,255,255,.96), rgba(255,255,255,.80) 75%, rgba(255,255,255,0));
  backdrop-filter: blur(6px);
}
.site-header.dark { color: var(--light-on-dark); background: linear-gradient(to bottom, rgba(18,17,15,.97), rgba(18,17,15,.82) 74%, rgba(18,17,15,0)); }
.brand { font-size: 27px; line-height: 1; letter-spacing: -0.045em; }
.desktop-nav { display: flex; align-items: center; gap: clamp(30px, 4vw, 58px); font-size: 13px; letter-spacing: -0.01em; }
.desktop-nav a { opacity: .92; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.consultation-button { background: var(--ink); color: white; min-width: 177px; height: 45px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 0 20px; font-size: 12px; border: 1px solid var(--ink); transition: background .2s ease, color .2s ease; }
.site-header.dark .consultation-button { background: transparent; border-color: rgba(255,255,255,.30); color: white; }
.consultation-button:hover { background: #292826; }
.button-arrow { position:relative; width:16px; height:10px; flex:none; display:inline-block; }
.button-arrow::before { content:""; position:absolute; left:0; top:50%; width:12px; height:1.5px; background:currentColor; transform:translateY(-50%); }
.button-arrow::after { content:""; position:absolute; right:0; top:50%; width:6px; height:6px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:translateY(-50%) rotate(45deg); }
.consultation-button .button-arrow { width:15px; height:10px; margin-left:2px; }
.menu-button { width: 28px; height: 28px; border: 0; padding: 5px 2px; background: transparent; display: flex; flex-direction: column; justify-content: center; gap: 5px; color: currentColor; cursor: pointer; }
.menu-button span { width: 20px; height: 1.5px; background: currentColor; display:block; transition: transform .25s ease, opacity .25s ease; }
.mobile-panel { display:none; }

.viewport-section { position: relative; min-height: 100svh; overflow: hidden; }
.light-section { background: radial-gradient(circle at 58% 42%, #ffffff 0, var(--paper) 62%, var(--paper-2) 100%); }
.dark-section { background: var(--dark); color: var(--light-on-dark); }
.eyebrow { font-size: 10px; letter-spacing: .22em; font-weight: 500; margin: 0 0 38px; }
.eyebrow span { margin: 0 11px; }
.muted { color: var(--stone); }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap: 18px; background:#080808; color:white; min-width: 236px; height:58px; padding:0 26px; font-size:16px; }
.text-link { display:inline-flex; align-items:center; gap:22px; font-size:15px; }
.underlined-link { display:inline-flex; align-items:center; gap: 28px; padding-bottom:5px; border-bottom:1px solid currentColor; font-size:15px; }

/* HERO */
.hero { padding: var(--header-h) var(--pad) 0; display:flex; align-items:center; }
.hero-copy { position:relative; z-index:3; width: 57%; margin-top: 15px; }
.hero h1 { margin:0; font-size: clamp(58px, 5.52vw, 82px); line-height:1.13; letter-spacing:-.047em; font-weight:400; }
.hero h1 span { display:block; }
.hero-body { margin: 52px 0 0; font-size: 18px; line-height:1.62; max-width: 560px; }
.hero-ctas { margin-top:48px; display:flex; gap:45px; align-items:center; }
.architectural-field { position:absolute; inset:0 0 0 53%; overflow:hidden; }
.crosshair { position:absolute; width:100%; height:100%; }
.crosshair::before, .crosshair::after { content:""; position:absolute; background:var(--rule); }
.crosshair::before { width:100%; height:1px; left:0; top:45%; transform-origin: center; animation: lineInX 1.2s .9s var(--ease) both; }
.crosshair::after { width:1px; height:100%; left:48%; top:0; transform-origin:center; animation: lineInY 1.2s 1s var(--ease) both; }
.crosshair span { position:absolute; width:9px; height:9px; background:var(--ink); left:calc(48% - 4px); top:calc(45% - 4px); animation: nodeDrift 8s 2s ease-in-out infinite alternate; }
.hero-plane { position:absolute; width:105%; height:55%; left:25%; bottom:-12%; transform:rotate(-19deg); border:1px solid rgba(48,43,40,.05); background:linear-gradient(140deg, rgba(151,137,126,.05), rgba(151,137,126,.012)); animation: planeFloat 12s ease-in-out infinite alternate; }
.scroll-cue { position:absolute; left:var(--pad); bottom: 42px; display:flex; flex-direction:column; gap:14px; font-size:9px; letter-spacing:.25em; }
.scroll-cue span { font-size:26px; font-weight:200; letter-spacing:0; }
.reveal-group > * { animation: riseIn .8s var(--ease) both; }
.reveal-group > *:nth-child(1) { animation-delay:.18s; }
.reveal-group > *:nth-child(2) { animation-delay:.32s; }
.reveal-group > *:nth-child(3) { animation-delay:.62s; }
.reveal-group > *:nth-child(4) { animation-delay:.74s; }

/* PROOF */
.proof-intro { padding-top: var(--header-h); }
.proof-strip { min-height: 240px; display:grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; align-items:center; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding: 24px var(--pad) 18px; }
.proof-intro-copy { font-size:17px; line-height:1.55; padding-right:35px; }
.proof-item { min-height:105px; padding:0 28px; border-left:1px solid var(--rule); display:flex; flex-direction:column; justify-content:center; gap:4px; }
.proof-icon { font-size:28px; margin-bottom:9px; font-weight:300; }
.proof-item strong { font-size:18px; font-weight:500; }
.proof-item span { font-size:13px; color:#4d4946; }
.logo-word { font-weight:800; color:#111; white-space:nowrap; line-height:.85; }
.logo-word.live { font-size:14px; border:2px solid currentColor; padding:3px 7px; }
.logo-word.aeg { font-size:23px; letter-spacing:.16em; }
.logo-word.ticket { font-size:17px; font-weight:700; letter-spacing:-.05em; }
.logo-word.festival { font-size:12px; text-align:center; font-style:italic; }
.featured-intro { min-height: calc(100svh - var(--header-h) - 240px); display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr); gap:0 clamp(56px, 7vw, 110px); padding:var(--chapter-close) var(--pad); align-content:safe center; }
.featured-intro > div:first-child { order:2; }
.architectural-intro { order:1; }
.featured-intro > div:first-child { display:flex; flex-direction:column; justify-content:center; position:relative; }
.featured-intro h2 { font-weight:400; font-size:clamp(60px,6.6vw,96px); line-height:1.08; letter-spacing:-.055em; margin:0 0 42px; }
.featured-intro p:not(.eyebrow) { font-size:18px; color:#5e5853; margin:0; }
/* Sits left of the copy, at a scale that holds the column without its rules
   running up against the headline. */
.architectural-intro { position:relative; align-self:center; justify-self:center; width:min(560px, 92%); height:460px; }
.architectural-intro .crosshair::before { top:50%; }
.architectural-intro .crosshair::after { left:50%; }
.architectural-intro .crosshair span { left:calc(50% - 4px); top:calc(50% - 4px); }

/* CASE STUDY */
.case-study { padding: calc(var(--header-h) + var(--chapter-open)) var(--pad) var(--chapter-close); display:grid; grid-template-columns: minmax(0,27fr) minmax(0,73fr); gap:40px; align-items:safe center; align-content:safe center; }
.case-copy { padding-right:16px; }
.case-copy .eyebrow { margin-bottom: 32px; }
.case-copy h2 { font-size:clamp(45px,4vw,61px); line-height:1.05; font-weight:400; letter-spacing:-.045em; margin:0 0 35px; }
.case-lead { font-size:15px; line-height:1.5; margin:0 0 30px; max-width: 390px; }
.case-block { margin:0 0 22px; max-width: 385px; }
.case-block strong, .result-block strong { display:block; font-size:13px; margin-bottom:7px; }
.case-block p, .result-block p { font-size:13px; line-height:1.48; margin:0; color:#2d2a28; }
.result-block { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:20px 0 18px; margin: 0 0 20px; max-width:385px; }
.result-value { font-size:31px; letter-spacing:-.04em; margin:4px 0 4px; }
.case-visual { display:flex; align-items:center; justify-content:flex-end; min-width:0; }
.case-visual img:not(.product-shot) { width:100%; max-height: 78svh; object-fit:cover; object-position:center top; border-radius:0; box-shadow: 0 10px 30px rgba(30,27,25,.06); }

/* CAPABILITIES */
.capabilities { padding: calc(var(--header-h) + var(--chapter-open)) var(--pad) var(--chapter-close); display:grid; grid-template-columns: minmax(0,7fr) minmax(0,3fr); gap:48px; align-content:safe center; }
.capabilities-title { order:2; }
.accordion { order:1; }
.capabilities-title { padding-left:45px; }
.capabilities-title h2 { font-size:clamp(54px,4.1vw,65px); line-height:1.08; font-weight:400; letter-spacing:-.05em; margin:0 0 40px; }
.accordion { align-self:start; }
.capability-item { border-bottom:1px solid var(--rule); }
.capability-item:first-child { border-top:1px solid var(--rule); }
.capability-heading { width:100%; height:108px; display:grid; grid-template-columns: 120px 1fr 30px; align-items:center; padding:0 16px 0 42px; border:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.cap-heading-wrap { margin:0; font:inherit; }
.cap-num { color:#766c64; font-size:18px; }
.cap-name { font-size:27px; letter-spacing:-.035em; }
.cap-toggle { position:relative; justify-self:end; width:22px; height:22px; }
.cap-toggle::before, .cap-toggle::after {
  content:""; position:absolute; left:50%; top:50%;
  width:17px; height:1px; background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .5s var(--ease);
}
.cap-toggle::after { transform:translate(-50%,-50%) rotate(90deg); }
.capability-item.open .cap-toggle::after { transform:translate(-50%,-50%) rotate(0deg); }
/* Animate the real height (0fr → 1fr) rather than a max-height guess. The old
   0→1400px transition spent most of its 600ms crossing empty space, which is
   what made opening and closing feel laggy. */
/* The panel animates to its measured height (set in script.js), so the motion
   matches the content exactly. The previous 0→1400px max-height guess spent most
   of its 600ms crossing empty space, which is what felt laggy. Pixel heights are
   used rather than grid 0fr→1fr because Safari's support for interpolating that
   is inconsistent. */
.capability-content {
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .55s var(--ease), opacity .34s ease;
}
.capability-item.open .capability-content { opacity:1; }
.capability-inner {
  display:grid;
  grid-template-columns: minmax(0,42fr) minmax(0,58fr);
  padding:14px 16px 30px 42px;
}
.capability-copy { padding-right:30px; }
.capability-copy p { font-size:15px; line-height:1.5; margin:0 0 26px; color:#514b47; }
.capability-copy .lead { font-size:17px; color:#1b1918; line-height:1.46; }
.technical-tags { font-size:8px; letter-spacing:.18em; line-height:2.2; color:#4f4842; }
.technical-tags span { margin:0 7px; }
.capability-image-wrap { align-self:center; border:1px solid rgba(40,35,32,.08); background:#f4f0ec; }
.capability-image-wrap img { display:block; width:100%; height:100%; object-fit:cover; }
.system-card { min-height:310px; border:1px solid rgba(45,40,37,.12); overflow:hidden; }
.light-card { background:#fbf8f5; display:grid; grid-template-columns: 145px 1fr; }
.mini-sidebar { border-right:1px solid var(--rule); padding:20px 16px; display:flex; flex-direction:column; gap:14px; font-size:10px; }
.mini-sidebar b { margin-bottom:5px; font-size:13px; }
.mini-sidebar span { padding:6px 8px; }
.mini-sidebar .active { background:#f0ece8; }
.mini-main { padding:22px; }
.mini-heading,.pipeline-title { display:flex; justify-content:space-between; font-size:12px; margin-bottom:18px; }
.status-dot { color:#51845a; font-size:10px; }
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.metric-row > div { border:1px solid var(--rule); padding:12px; display:flex; flex-direction:column; gap:6px; }
.metric-row span { font-size:9px; color:#6b655f; }.metric-row strong { font-size:19px; }
.workflow-line { margin-top:28px; display:flex; align-items:center; gap:8px; font-size:9px; }
.workflow-line span { border:1px solid var(--rule); padding:9px; }.workflow-line i { height:1px; width:20px; background:var(--rule); }
.infra-card { display:block; padding:22px; }
.pipeline { display:flex; gap:8px; align-items:center; justify-content:space-between; margin:35px 0; font-size:9px; }.pipeline span { border:1px solid var(--rule); padding:10px 8px; flex:1; text-align:center; }.pipeline i { font-style:normal; color:#8f847c; }

/* PROCESS */
.process { padding: calc(var(--header-h) + var(--chapter-open)) var(--pad) var(--chapter-close); display:grid; grid-template-columns:minmax(0,35fr) minmax(0,65fr); gap:0 48px; grid-template-rows:auto auto; align-content:safe center; }
.process-title { padding-right:55px; display:flex; flex-direction:column; justify-content:center; }
.process-title h2 { font-size:clamp(52px,4.2vw,68px); line-height:1.14; font-weight:400; letter-spacing:-.05em; margin:0 0 40px; }
.process-title > p:last-child { font-size:16px; line-height:1.55; max-width:430px; color:#4d4844; }
.process-steps { }
.process-steps article { min-height:190px; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:100px 240px minmax(0,1fr); align-items:center; gap:34px; padding:0 18px 0 38px; }
.process-steps article:first-child { border-top:1px solid var(--rule); }
.process-steps article:last-child { border-bottom:0; }
.process-num { font-size:33px; color:#766c64; }.process-steps h3 { font-size:28px; font-weight:400; margin:0; }.process-steps p { font-size:15px; line-height:1.55; color:#544f4b; margin:0; max-width:52ch; }
.process-steps svg { display:none; }
.process-footer { grid-column:1/-1; border-top:1px solid var(--rule); padding-top:25px; display:flex; gap:26px; font-size:13px; color:#58524e; }
.process-footer i { font-style:normal; }

/* DARK PRODUCT */
.dark-product { padding: calc(var(--header-h) + var(--chapter-open)) var(--pad) var(--chapter-close); display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr); gap:48px; align-content:safe center; background:radial-gradient(circle at 70% 40%, #1d1b19 0, #141311 46%, #0f0f0e 100%); }
.dark-product::after, .site-footer::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.1; background-image:radial-gradient(rgba(255,255,255,.35) .55px, transparent .55px); background-size:7px 7px; }
.dark-copy { position:relative; z-index:2; padding-top:30px; padding-right:55px; }
.dark-copy .eyebrow { color:#a59c94; }
.dark-copy h2 { font-size:clamp(50px,4.1vw,67px); line-height:1.11; font-weight:300; letter-spacing:-.045em; margin:0 0 50px; }
.dark-copy > p:not(.eyebrow) { color:#b4ada6; font-size:16px; line-height:1.7; max-width:410px; }
.dark-metric { margin-top:85px; display:flex; flex-direction:column; gap:10px; }.dark-metric strong { font-size:55px; font-weight:300; }.dark-metric span { color:#a9a29a; }
.dark-link { margin-top:70px; display:inline-flex; gap:30px; padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.35); }
.dark-visual { position:relative; z-index:2; align-self:center; }
.dark-visual img { width:100%; max-height:80svh; object-fit:cover; object-position:center top; border:1px solid rgba(255,255,255,.12); }

/* IMPACT */
.impact { padding: calc(var(--header-h) + var(--chapter-open)) var(--pad) var(--chapter-close); display:grid; align-content:safe center; }
.impact-head h2 { font-size:clamp(55px,5vw,78px); line-height:1.15; font-weight:400; letter-spacing:-.052em; margin:0; }
.metrics-grid { margin-top:96px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule); }
.metrics-grid article { min-height:335px; padding:45px 40px 20px; border-right:1px solid var(--rule); }.metrics-grid article:last-child { border-right:0; }
.metrics-grid p { font-size:12px; letter-spacing:.08em; margin:0 0 42px; color:#57504a; }
.metrics-grid strong { display:block; font-size:75px; line-height:1; font-weight:300; letter-spacing:-.065em; margin-bottom:45px; }.metrics-grid strong span { font-size:.45em; margin-left:4px; }
.metrics-grid article > div { font-size:14px; line-height:1.55; color:#4f4a46; }

/* FINAL CTA */
.final-cta { padding: var(--header-h) var(--pad) var(--chapter-close); display:flex; align-items:center; }
.cta-copy { width:58%; z-index:2; }.cta-copy h2 { font-size:clamp(64px,6vw,90px); line-height:1.08; font-weight:400; letter-spacing:-.055em; margin:0 0 42px; }.cta-copy > p:not(.eyebrow) { font-size:18px; line-height:1.55; color:#47423e; }.cta-actions { display:flex; gap:65px; align-items:center; margin-top:48px; }
/* Same registration mark as the featured-work chapter, so the two read as one
   piece of drafting notation rather than two differently-sized fields. */
.final-field { position:absolute; top:50%; right:var(--pad); left:auto; bottom:auto; transform:translateY(-50%); width:min(300px, 32%); height:170px; }
.final-field .crosshair::before { top:55%; }.final-field .crosshair::after { left:62%; }.final-field .crosshair span { top:calc(55% - 4px); left:calc(62% - 4px); }
.delivery-note { position:absolute; left:var(--pad); bottom:65px; font-size:15px; color:#585c62; }

/* FOOTER */
.site-footer { min-height:100svh; position:relative; overflow:hidden; padding: 115px 7vw 45px; background:radial-gradient(circle at 30% 0, #161513 0, #111211 55%, #101110 100%); }
.footer-top { position:relative; z-index:2; display:grid; grid-template-columns:1.2fr 1fr 1.1fr 1.65fr; gap:50px; padding-bottom:70px; border-bottom:1px solid rgba(255,255,255,.17); }
.footer-brand { font-size:40px; letter-spacing:-.045em; }.footer-column p,.footer-project p { font-size:11px; letter-spacing:.2em; color:#c5bcb4; margin:12px 0 30px; }.footer-column { display:flex; flex-direction:column; gap:17px; }.footer-column a { font-size:16px; color:#f0ede9; }.footer-project-button { border:1px solid rgba(255,255,255,.45); min-height:70px; padding:0 26px; display:flex; justify-content:space-between; align-items:center; font-size:17px; max-width:390px; }.footer-email { display:inline-block; margin-top:27px; padding-bottom:4px; border-bottom:1px dashed rgba(255,255,255,.4); color:#ddd8d3; }
.footer-trust { position:relative; z-index:2; height:120px; display:grid; grid-template-columns:1.1fr 1.1fr 1.45fr 1fr; align-items:center; border-bottom:1px solid rgba(255,255,255,.12); color:#d1cbc5; }.footer-trust span,.footer-trust a { font-size:14px; }.footer-trust a { justify-self:end; }
.footer-legal { position:relative; z-index:2; margin-top:45px; font-size:13px; color:#a9a29b; }
.footer-wordmark { position:absolute; left:0; right:0; bottom:0; width:100%; height:auto; display:block; overflow:visible; }
.footer-wordmark text { fill:rgba(255,255,255,.075); font-family:inherit; font-size:130px; font-weight:300; }

@keyframes riseIn { from {opacity:0; transform:translateY(18px)} to {opacity:1; transform:none} }
@keyframes lineInX { from {transform:scaleX(0); opacity:0} to {transform:scaleX(1); opacity:1} }
@keyframes lineInY { from {transform:scaleY(0); opacity:0} to {transform:scaleY(1); opacity:1} }
@keyframes nodeDrift { from{ transform:translate(0,0)} to{ transform:translate(8px,-5px)} }
@keyframes planeFloat { from{ transform:rotate(-19deg) translate3d(0,0,0)} to{ transform:rotate(-18.3deg) translate3d(-10px,-7px,0)} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}

@media (max-width: 1050px) {
  :root { --header-h: 80px; }
  .desktop-nav { display:none; }
  .site-header { grid-template-columns:1fr auto; }
  .consultation-button { display:none; }
  .menu-button { display:flex; }
  .mobile-panel { position:fixed; inset:80px 0 auto 0; background:var(--paper); color:var(--ink); padding:35px var(--pad) 45px; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:25px; transform:translateY(-125%); transition:transform .35s var(--ease); }
  .site-header.menu-open .mobile-panel { transform:none; }.site-header.menu-open .mobile-panel { aria-hidden:false; }
  .hero-copy { width:72%; }.architectural-field { left:58%; }
  .proof-strip { grid-template-columns:1fr 1fr 1fr; min-height:350px; }.proof-intro-copy { grid-column:1/-1; padding-bottom:20px; }
  .featured-intro { height:auto; min-height:650px; grid-template-columns:65% 35%; }
  .case-study { grid-template-columns:minmax(0,38fr) minmax(0,62fr); }.capabilities { grid-template-columns:minmax(0,42fr) minmax(0,58fr); } .capabilities-title { padding-right:30px; }.process { grid-template-columns:minmax(0,42fr) minmax(0,58fr); } .process-steps article { grid-template-columns:72px minmax(0,1fr); grid-template-rows:auto auto; gap:8px 20px; min-height:0; padding:30px 16px 30px 28px; } .process-steps h3 { grid-column:2; } .process-steps p { grid-column:2; max-width:56ch; } .capability-inner { grid-template-columns:minmax(0,1fr); } .capability-copy { padding-right:0; padding-bottom:26px; } .capability-copy p { max-width:62ch; }
  .dark-product { grid-template-columns:40% 60%; }.metrics-grid strong { font-size:60px; }
}

@media (max-width: 760px) {
  :root { --pad: 24px; }
  .site-header { height:72px; padding:0 var(--pad); background:#ffffff; }.site-header.dark { background:#12110f; }.brand { font-size:24px; }.mobile-panel { inset:72px 0 auto; }
  .viewport-section { min-height:auto; }
  .hero { min-height:100svh; padding:110px var(--pad) 70px; align-items:flex-start; }.hero-copy { width:100%; margin-top:45px; }.hero h1 { font-size:48px; line-height:1.08; }.hero-body { margin-top:34px; font-size:16px; }.desktop-break { display:none; }.hero-ctas { margin-top:35px; gap:24px; flex-wrap:wrap; }.primary-button { min-width:210px; height:54px; font-size:15px; }.architectural-field { inset:0; left:58%; opacity:.65; }.crosshair::before { top:52%; }.crosshair::after { left:54%; }.crosshair span { left:calc(54% - 4px); top:calc(52% - 4px); }.scroll-cue { bottom:25px; }
  .proof-intro { padding-top:72px; }.proof-strip { min-height:auto; display:grid; grid-template-columns:1fr 1fr; padding:32px var(--pad); }.proof-intro-copy { grid-column:1/-1; font-size:15px; }.proof-item { padding:20px 8px 20px 0; border-left:0; border-top:1px solid var(--rule); }.featured-intro { padding:70px var(--pad); min-height:580px; display:block; }.featured-intro h2 { font-size:58px; }.architectural-intro { position:absolute; right:0; top:300px; width:45%; height:250px; opacity:.7; }
  .case-study { padding:110px var(--pad) 70px; display:block; }.case-copy h2 { font-size:52px; }.case-copy { padding:0; }.case-visual { margin-top:50px; }.case-visual img:not(.product-shot) { width:150%; max-width:none; transform:translateX(-4%); }
  .capabilities { padding:110px var(--pad) 60px; display:block; }.capabilities-title { border-right:0; padding:0 0 45px; }.capabilities-title h2 { font-size:56px; }.capability-heading { height:88px; grid-template-columns:75px 1fr 25px; padding:0 4px; }.cap-name { font-size:22px; }.cap-num { font-size:14px; }.capability-inner { grid-template-columns:1fr; padding-left:4px; padding-right:4px; }.capability-copy { padding:5px 0 28px; }.capability-image-wrap,.system-card { min-height:230px; }.light-card { grid-template-columns:100px 1fr; }.mini-sidebar span:nth-child(n+5) { display:none; }
  .process { padding:110px var(--pad) 60px; display:block; }.process-title { padding:0 0 45px; }.process-title h2 { font-size:52px; }.process-steps { border-left:0; }.process-steps article { min-height:170px; grid-template-columns:60px 1fr; grid-template-rows:auto auto; padding:25px 0; gap:5px 10px; }.process-steps h3 { font-size:26px; }.process-steps p { grid-column:2; }.process-num { font-size:26px; }.process-footer { flex-wrap:wrap; gap:10px 15px; margin-top:25px; }
  .dark-product { padding:110px var(--pad) 70px; display:block; }.dark-copy { padding:0; }.dark-copy h2 { font-size:49px; }.dark-metric { margin-top:55px; }.dark-link { margin-top:45px; }.dark-visual { margin-top:60px; }.dark-visual img { width:155%; max-width:none; }
  .impact { padding:110px var(--pad) 70px; }.impact-head h2 { font-size:50px; }.metrics-grid { margin-top:60px; grid-template-columns:1fr 1fr; }.metrics-grid article { min-height:280px; padding:30px 18px; border-bottom:1px solid var(--rule); }.metrics-grid article:nth-child(2) { border-right:0; }.metrics-grid strong { font-size:58px; margin-bottom:25px; }.metrics-grid p { margin-bottom:30px; }
  .final-cta { min-height:100svh; padding:120px var(--pad) 60px; align-items:flex-start; }.cta-copy { width:100%; margin-top:80px; }.cta-copy h2 { font-size:58px; }.cta-copy > p:not(.eyebrow) { font-size:16px; }.cta-actions { gap:28px; flex-wrap:wrap; }.final-field { left:62%; }.delivery-note { bottom:35px; }
  .site-footer { min-height:auto; padding:80px var(--pad) 0; }.footer-top { grid-template-columns:1fr 1fr; gap:50px 30px; padding-bottom:55px; }.footer-top > div:first-child { grid-column:1/-1; }.footer-brand { font-size:34px; }.footer-project { grid-column:1/-1; }.footer-trust { height:auto; padding:35px 0; grid-template-columns:1fr; gap:20px; }.footer-trust a { justify-self:start; }.footer-legal { padding-bottom:180px; }.footer-wordmark { font-size:120px; bottom:10px; left:-6px; }
}

/* Canonical hero geometry correction after screenshot overlay QA. */
.crosshair-hero::before { top: 43.85%; }
.crosshair-hero::after {
  left: 44.2%;
  transform-origin: 50% 43.85%;
}
.crosshair-hero span { top: 43.85%; }
.hero .architectural-field::before {
  background: radial-gradient(circle at 44.2% 43.85%, rgba(137,122,112,.043) 0%, rgba(137,122,112,.016) 18%, rgba(137,122,112,0) 43%);
}
.hero-plane {
  inset: 0;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  border: 0;
  box-shadow: none;
  clip-path: polygon(100% 61.2%, 100% 100%, 27.5% 100%);
  -webkit-clip-path: polygon(100% 61.2%, 100% 100%, 27.5% 100%);
  background:
    radial-gradient(ellipse at 88% 92%, rgba(132,116,105,.070) 0%, rgba(150,134,123,.036) 44%, rgba(150,134,123,0) 72%),
    linear-gradient(137deg, rgba(255,255,255,.012) 8%, rgba(190,173,160,.030) 52%, rgba(145,128,117,.060) 100%);
  opacity: .86;
  transform: translate3d(var(--hero-plane-x, 0px), var(--hero-plane-y, 0px), 0);
  animation: heroPlaneIn .8s .72s cubic-bezier(.2,.72,.2,1) both, heroPlaneFloatRefined 19s 1.7s ease-in-out infinite alternate;
}
.hero-plane::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(118deg, rgba(255,255,255,.032), transparent 46%, rgba(120,128,140,.020));
}
@keyframes heroPlaneIn { from { opacity:0; } to { opacity:.86; } }
@keyframes heroPlaneFloatRefined {
  from { transform:translate3d(var(--hero-plane-x, 0px), var(--hero-plane-y, 0px), 0); }
  to { transform:translate3d(calc(var(--hero-plane-x, 0px) - 4px), calc(var(--hero-plane-y, 0px) - 3px), 0); }
}

@media (max-width:760px) {
  .crosshair-hero::before { top:49%; }
  .crosshair-hero span { top:49%; }
  .hero-plane {
    inset:0;
    width:100%; height:100%; left:0; bottom:0;
    clip-path:polygon(100% 68%,100% 100%,20% 100%);
    -webkit-clip-path:polygon(100% 68%,100% 100%,20% 100%);
    opacity:.55;
  }
}

/* MOTION AND DEPTH REFINEMENT — final override */
.site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: color .32s ease, background-color .32s ease, border-color .32s ease;
}
.site-header.scrolled:not(.dark) { background-color: #ffffff; border-bottom-color: rgba(25,22,20,.055); }
.site-header.dark { background: transparent; }
.site-header.dark.scrolled { background-color: #12110f; border-bottom-color: rgba(255,255,255,.055); }

.hero.light-section { isolation:isolate; background:#ffffff; }
.hero::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 72% 72% at 30% 48%, rgba(255,255,255,.50) 0%, rgba(255,255,255,.18) 43%, rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 52% 62% at 76% 56%, rgba(174,158,146,.055) 0%, rgba(174,158,146,.018) 46%, rgba(174,158,146,0) 76%),
    linear-gradient(118deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 44%, rgba(135,120,110,.025) 100%);
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.15;
  background-image:radial-gradient(rgba(68,60,55,.08) .3px, transparent .4px); background-size:5px 5px;
  mask-image:linear-gradient(to bottom, transparent 0%, black 38%, black 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 38%, black 100%);
}

.hero .architectural-field {
  left:58.75%; z-index:1; overflow:hidden;
  transform:translate3d(var(--hero-field-x,0px),var(--hero-field-y,0px),0);
  transition:transform .9s cubic-bezier(.2,.72,.2,1);
}
.hero .architectural-field::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 44.2% 43.85%, rgba(137,122,112,.043) 0%, rgba(137,122,112,.016) 18%, rgba(137,122,112,0) 43%);
}
.crosshair-hero::before {
  top:43.85%; left:0; width:100%; height:1px;
  background:linear-gradient(90deg,rgba(42,37,34,.035) 0%,rgba(42,37,34,.10) 28%,rgba(42,37,34,.145) 44.2%,rgba(42,37,34,.085) 73%,rgba(42,37,34,.022) 100%);
  transform-origin:44.2% 50%; animation:heroLineX .96s .30s cubic-bezier(.2,.72,.2,1) both;
}
.crosshair-hero::after {
  left:44.2%; top:0; width:1px; height:91.5%;
  background:linear-gradient(180deg,rgba(42,37,34,.032) 0%,rgba(42,37,34,.085) 25%,rgba(42,37,34,.145) 43.85%,rgba(42,37,34,.08) 70%,rgba(42,37,34,.018) 100%);
  transform-origin:50% 43.85%; animation:heroLineY 1.06s .38s cubic-bezier(.2,.72,.2,1) both;
}
.crosshair-hero span {
  width:10px; height:10px; left:44.2%; top:43.85%; background:var(--ink);
  transform:translate(-50%,-50%);
  animation:heroNodeSettle .5s .73s cubic-bezier(.2,.8,.2,1) both, heroNodeBreath 7s 2.1s ease-in-out infinite;
}

.hero-plane {
  inset:0; width:100%; height:100%; left:0; bottom:0; border:0; box-shadow:none;
  clip-path:polygon(100% 61.2%,100% 100%,27.5% 100%);
  -webkit-clip-path:polygon(100% 61.2%,100% 100%,27.5% 100%);
  background:
    radial-gradient(ellipse at 88% 92%, rgba(132,116,105,.070) 0%, rgba(150,134,123,.036) 44%, rgba(150,134,123,0) 72%),
    linear-gradient(137deg,rgba(255,255,255,.012) 8%,rgba(190,173,160,.030) 52%,rgba(145,128,117,.060) 100%);
  opacity:.86; transform:translate3d(var(--hero-plane-x,0px),var(--hero-plane-y,0px),0);
  animation:heroPlaneIn .8s .72s cubic-bezier(.2,.72,.2,1) both, heroPlaneFloatRefined 19s 1.7s ease-in-out infinite alternate;
}
.hero-plane::after { content:""; position:absolute; inset:0; background:linear-gradient(118deg,rgba(255,255,255,.032),transparent 46%,rgba(120,128,140,.020)); }

.reveal-group > * { animation:none; }
.hero .eyebrow { animation:heroReveal .62s .10s cubic-bezier(.2,.72,.2,1) both; }
.hero h1 span { opacity:0; transform:translate3d(0,15px,0); filter:blur(2.5px); animation:heroTypeReveal .72s cubic-bezier(.2,.72,.2,1) forwards; }
.hero h1 span:nth-child(1){animation-delay:.18s}.hero h1 span:nth-child(2){animation-delay:.28s}.hero h1 span:nth-child(3){animation-delay:.38s}
.hero-body { animation:heroReveal .66s .54s cubic-bezier(.2,.72,.2,1) both; }
.hero-ctas { animation:heroReveal .66s .64s cubic-bezier(.2,.72,.2,1) both; }
.scroll-cue { animation:heroReveal .6s .82s cubic-bezier(.2,.72,.2,1) both; }
.scroll-cue span { animation:scrollCue 2.8s 1.8s ease-in-out infinite; }

.primary-button,.consultation-button { transition:transform .28s cubic-bezier(.2,.72,.2,1),background-color .28s ease,color .28s ease,border-color .28s ease; }
.primary-button:hover,.consultation-button:hover{transform:translateY(-1px)}
.primary-button:active,.consultation-button:active{transform:translateY(0)}
.text-link,.underlined-link,.dark-link{position:relative}
.text-link::after{content:"";position:absolute;left:0;right:28px;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;opacity:.45;transition:transform .35s cubic-bezier(.2,.72,.2,1)}
.text-link:hover::after{transform:scaleX(1);transform-origin:left}

.proof-intro.light-section { background:radial-gradient(ellipse 42% 55% at 82% 51%,rgba(174,158,146,.038),transparent 72%),linear-gradient(180deg,#ffffff 0%,#ffffff 100%); }
.case-study.light-section { background:radial-gradient(ellipse 40% 54% at 68% 48%,rgba(184,168,157,.040),transparent 72%),#ffffff; }
.capabilities.light-section { background:radial-gradient(ellipse 48% 56% at 74% 47%,rgba(176,159,147,.035),transparent 72%),#ffffff; }
.process.light-section { background:linear-gradient(115deg,rgba(255,255,255,.15),transparent 48%),radial-gradient(ellipse 48% 48% at 68% 48%,rgba(178,163,152,.032),transparent 74%),#ffffff; }
.impact.light-section { background:radial-gradient(ellipse 64% 52% at 46% 48%,rgba(255,255,255,.34),transparent 70%),linear-gradient(180deg,#ffffff 0%,#ffffff 100%); }
.final-cta.light-section { background:radial-gradient(circle at 80% 58%,rgba(170,154,143,.042),transparent 35%),#ffffff; }

.motion-reveal { opacity:0; transform:translate3d(0,14px,0); filter:blur(1.2px); transition:opacity .72s cubic-bezier(.2,.72,.2,1) var(--reveal-delay,0ms),transform .72s cubic-bezier(.2,.72,.2,1) var(--reveal-delay,0ms),filter .72s ease var(--reveal-delay,0ms); will-change:opacity,transform; }
.motion-reveal.is-visible { opacity:1; transform:none; filter:blur(0); }
.case-visual.motion-reveal,.dark-visual.motion-reveal,.capability-image-wrap.motion-reveal { transform:translate3d(0,18px,0) scale(.995); }
.case-visual.motion-reveal.is-visible,.dark-visual.motion-reveal.is-visible,.capability-image-wrap.motion-reveal.is-visible { transform:none; }

@keyframes heroLineX { 0%{transform:scaleX(0);opacity:0}18%{opacity:.45}100%{transform:scaleX(1);opacity:1} }
@keyframes heroLineY { 0%{transform:scaleY(0);opacity:0}18%{opacity:.45}100%{transform:scaleY(1);opacity:1} }
@keyframes heroNodeSettle { 0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes heroNodeBreath { 0%,82%,100%{box-shadow:0 0 0 0 rgba(14,14,13,0)}90%{box-shadow:0 0 0 5px rgba(14,14,13,.035)} }
@keyframes heroTypeReveal { from{opacity:0;transform:translate3d(0,15px,0);filter:blur(2.5px)}to{opacity:1;transform:none;filter:blur(0)} }
@keyframes heroReveal { from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none} }
@keyframes heroPlaneIn { from{opacity:0}to{opacity:.86} }
@keyframes heroPlaneFloatRefined { from{transform:translate3d(var(--hero-plane-x,0px),var(--hero-plane-y,0px),0)}to{transform:translate3d(calc(var(--hero-plane-x,0px) - 4px),calc(var(--hero-plane-y,0px) - 3px),0)} }
@keyframes scrollCue { 0%,72%,100%{transform:translateY(0);opacity:1}82%{transform:translateY(4px);opacity:.58}90%{transform:translateY(0);opacity:1} }

@media(max-width:760px){
  .site-header{background:transparent}.site-header.scrolled:not(.dark){background-color:#ffffff}.site-header.dark{background:transparent}.site-header.dark.scrolled{background-color:#12110f}
  .hero .architectural-field{left:63%;opacity:.52}
  .crosshair-hero::before{top:49%}.crosshair-hero::after{left:46%;transform-origin:50% 49%}.crosshair-hero span{left:46%;top:49%}
  .hero-plane{clip-path:polygon(100% 68%,100% 100%,20% 100%);-webkit-clip-path:polygon(100% 68%,100% 100%,20% 100%);opacity:.55}
  .hero::after{opacity:.1}
}
@media(prefers-reduced-motion:reduce){
  .hero h1 span,.motion-reveal{opacity:1!important;transform:none!important;filter:none!important}
  .crosshair-hero::before,.crosshair-hero::after{transform:none!important;opacity:1!important}
  .crosshair-hero span{opacity:1!important;transform:translate(-50%,-50%)!important;box-shadow:none!important}
}
/* Plane edge fades into the canvas toward the lower-left, matching the approved gradient rather than exposing the whole polygon. */
.hero-plane {
  opacity:.74;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 16%,rgba(0,0,0,.48) 42%,#000 82%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 16%,rgba(0,0,0,.48) 42%,#000 82%);
}
@keyframes heroPlaneIn { from{opacity:0} to{opacity:.74} }
@media(max-width:760px){.hero-plane{opacity:.50;mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.55) 45%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.55) 45%,#000 100%)}}
/* Canonical hero tonal calibration from pixel sampling of the approved frame. */
.hero.light-section { background:#ffffff; }
.hero::before {
  background:
    radial-gradient(ellipse 46% 52% at 8% 34%,rgba(255,255,255,.28) 0%,rgba(255,255,255,.10) 48%,transparent 78%),
    radial-gradient(ellipse 50% 55% at 95% 22%,rgba(255,255,255,.58) 0%,rgba(255,255,255,.18) 45%,transparent 76%),
    linear-gradient(180deg,rgba(255,255,255,.035) 0%,transparent 52%,rgba(119,104,94,.010) 100%);
}
.hero-plane { opacity:.52; }
@keyframes heroPlaneIn { from{opacity:0} to{opacity:.52} }
/* QA reference surfaces and interaction overlays are never part of the live visual layer. */
.hotspot { display:none !important; }
@media(max-width:760px){.scroll-cue{display:none}}

/* ========================================================================== 
   AMBIENT + MOTION POLISH — 2026-08-07
   Final visual refinement against the approved Meridian frames.
   ========================================================================== */

/* The approved hero uses a genuinely visible architectural hairline. The
   geometry was already correct after overlay QA; this pass fixes weight,
   tonal falloff and animation quality without moving the intersection. */
.hero {
  --hero-cross-x: 44.2%;
  --hero-cross-y: 43.85%;
}
.hero .architectural-field {
  /* Crosshair remains mechanically fixed. Only the plane responds to pointer
     movement, preventing the architectural grid from feeling floaty. */
  transform: none !important;
}
.hero .architectural-field::before {
  background:
    radial-gradient(circle at var(--hero-cross-x) var(--hero-cross-y),
      rgba(126,111,101,.070) 0%,
      rgba(126,111,101,.034) 13%,
      rgba(126,111,101,.010) 29%,
      rgba(126,111,101,0) 48%);
  opacity: .9;
}
.hero .architectural-field::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), transparent 28%, transparent 72%, rgba(119,104,94,.025)),
    radial-gradient(ellipse 58% 44% at 92% 92%, rgba(121,105,94,.050), transparent 72%);
  mix-blend-mode:multiply;
  opacity:.55;
}

.crosshair-hero::before {
  top: var(--hero-cross-y);
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(24,22,20,.030) 0%,
    rgba(24,22,20,.155) 5%,
    rgba(24,22,20,.190) 22%,
    rgba(24,22,20,.205) 42%,
    rgba(24,22,20,.215) 44.2%,
    rgba(24,22,20,.190) 64%,
    rgba(24,22,20,.165) 84%,
    rgba(24,22,20,.145) 100%);
  transform-origin: var(--hero-cross-x) 50%;
  animation: heroCrossLineX 1.02s .42s cubic-bezier(.18,.76,.22,1) both;
}
.crosshair-hero::after {
  left: var(--hero-cross-x);
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
    rgba(24,22,20,.145) 0%,
    rgba(24,22,20,.160) 19%,
    rgba(24,22,20,.190) 40%,
    rgba(24,22,20,.215) 43.85%,
    rgba(24,22,20,.185) 63%,
    rgba(24,22,20,.165) 84%,
    rgba(24,22,20,.145) 100%);
  transform-origin: 50% var(--hero-cross-y);
  animation: heroCrossLineY 1.12s .50s cubic-bezier(.18,.76,.22,1) both;
}
.crosshair-hero span {
  width: 11px;
  height: 11px;
  left: var(--hero-cross-x);
  top: var(--hero-cross-y);
  background:#080808;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  transform:translate(-50%,-50%);
  animation: heroCrossNodeIn .48s .84s cubic-bezier(.16,.84,.26,1) both;
}
.crosshair-hero span::after {
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(77,67,61,.075) 0%, rgba(77,67,61,0) 68%);
  opacity:0;
  animation:heroCrossHalo 1.15s 1.02s ease-out both;
}

/* Ambient light field: static enough to feel architectural, alive enough to
   stop the large empty canvas feeling digitally flat. */
.hero::before {
  inset:-3%;
  background:
    radial-gradient(ellipse 48% 54% at 7% 31%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 47%, transparent 78%),
    radial-gradient(ellipse 54% 58% at 96% 18%, rgba(255,255,255,.66) 0%, rgba(255,255,255,.22) 44%, transparent 76%),
    radial-gradient(ellipse 48% 46% at 88% 89%, rgba(139,122,111,.050) 0%, rgba(139,122,111,.018) 50%, transparent 77%),
    linear-gradient(180deg, rgba(255,255,255,.045) 0%, transparent 55%, rgba(112,98,89,.014) 100%);
  animation:heroAmbientDrift 26s 1.6s ease-in-out infinite alternate;
  will-change:transform;
}
.hero::after {
  opacity:.075;
  background-image:radial-gradient(rgba(68,60,55,.065) .28px, transparent .38px);
  background-size:5px 5px;
}
.hero-plane {
  background:
    radial-gradient(ellipse 70% 66% at 91% 97%, rgba(103,89,80,.150) 0%, rgba(119,103,93,.085) 33%, rgba(145,128,117,.035) 57%, rgba(145,128,117,0) 78%),
    linear-gradient(137deg, rgba(255,255,255,.010) 7%, rgba(190,173,160,.040) 48%, rgba(126,110,100,.088) 100%);
  opacity:.54;
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 13%, rgba(0,0,0,.38) 39%, rgba(0,0,0,.87) 75%, #000 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 13%, rgba(0,0,0,.38) 39%, rgba(0,0,0,.87) 75%, #000 100%);
  animation: heroPlaneInRefined .82s .78s cubic-bezier(.2,.72,.2,1) both,
             heroPlaneFloatRefined 22s 1.7s ease-in-out infinite alternate;
}
.hero-plane::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(137deg, transparent 0 50%, rgba(255,255,255,.020) 58%, rgba(109,94,85,.026) 100%);
  opacity:.8;
}
.hero-plane::after {
  background:
    linear-gradient(118deg, rgba(255,255,255,.040), transparent 44%, rgba(112,97,88,.032)),
    radial-gradient(ellipse 50% 42% at 86% 88%, rgba(110,95,86,.030), transparent 72%);
}

/* Hero entrance is less blurry and slightly more staged than before. */
.hero .eyebrow { animation-duration:.54s; animation-delay:.08s; }
.hero h1 span {
  filter:blur(.7px);
  transform:translate3d(0,12px,0);
  animation-duration:.68s;
}
.hero h1 span:nth-child(1){animation-delay:.16s}
.hero h1 span:nth-child(2){animation-delay:.25s}
.hero h1 span:nth-child(3){animation-delay:.34s}
.hero-body { animation-duration:.62s; animation-delay:.50s; }
.hero-ctas { animation-duration:.62s; animation-delay:.59s; }
.scroll-cue { animation-duration:.55s; animation-delay:.77s; }

/* Subtle tonal depth carried across the light editorial chapters. */
.proof-intro.light-section {
  background:
    radial-gradient(ellipse 52% 34% at 84% 22%, rgba(255,255,255,.42), transparent 76%),
    radial-gradient(ellipse 42% 54% at 78% 64%, rgba(161,145,134,.045), transparent 74%),
    linear-gradient(180deg,#ffffff 0%,#ffffff 100%);
}
.case-study.light-section {
  background:
    radial-gradient(ellipse 46% 58% at 70% 50%, rgba(255,255,255,.36) 0%, rgba(255,255,255,.08) 42%, transparent 74%),
    radial-gradient(ellipse 38% 46% at 88% 84%, rgba(157,141,131,.035), transparent 76%),
    #ffffff;
}
.capabilities.light-section {
  background:
    radial-gradient(ellipse 54% 61% at 76% 46%, rgba(255,255,255,.33), transparent 70%),
    linear-gradient(128deg, transparent 49%, rgba(159,143,132,.025) 100%),
    #ffffff;
}
.process.light-section {
  background:
    radial-gradient(ellipse 44% 58% at 15% 42%, rgba(255,255,255,.28), transparent 73%),
    radial-gradient(ellipse 50% 54% at 75% 52%, rgba(157,143,133,.032), transparent 74%),
    #ffffff;
}
.impact.light-section {
  background:
    radial-gradient(ellipse 68% 50% at 45% 42%, rgba(255,255,255,.42), transparent 72%),
    radial-gradient(ellipse 48% 45% at 90% 88%, rgba(152,137,127,.028), transparent 76%),
    linear-gradient(180deg,#ffffff 0%,#ffffff 100%);
}
.final-cta.light-section {
  isolation:isolate;
  background:
    radial-gradient(circle at 74% 58%, rgba(137,121,111,.050), transparent 27%),
    radial-gradient(ellipse 48% 58% at 96% 24%, rgba(255,255,255,.44), transparent 74%),
    #ffffff;
}

/* Dark chapters use the same restrained warmth as the approved frame rather
   than a uniform black fill. */
.dark-product {
  background:
    radial-gradient(ellipse 64% 58% at 78% 36%, rgba(56,49,44,.25) 0%, rgba(34,31,28,.13) 40%, transparent 72%),
    radial-gradient(ellipse 46% 58% at 16% 78%, rgba(0,0,0,.22), transparent 72%),
    linear-gradient(118deg,#11110f 0%,#141310 48%,#0e0e0d 100%);
}
.site-footer {
  background:
    radial-gradient(ellipse 58% 44% at 30% -4%, rgba(59,52,47,.20), transparent 72%),
    radial-gradient(ellipse 50% 60% at 92% 74%, rgba(0,0,0,.20), transparent 72%),
    #101110;
}

/* The CTA and featured-intro architectural fields now animate when they enter
   the viewport instead of having completed before the user ever sees them. */
.section-crosshair {
  --section-cross-x:50%;
  --section-cross-y:50%;
}
.architectural-intro .section-crosshair { --section-cross-x:50%; --section-cross-y:50%; }
.final-field .section-crosshair { --section-cross-x:62%; --section-cross-y:55%; }
.section-crosshair::before,
.section-crosshair::after { animation:none !important; opacity:0; }
.section-crosshair::before {
  transform:scaleX(0);
  transform-origin:var(--section-cross-x) 50%;
}
.section-crosshair::after {
  transform:scaleY(0);
  transform-origin:50% var(--section-cross-y);
}
.section-crosshair span {
  animation:none !important;
  opacity:0;
  transform:scale(.45);
}
.section-crosshair.is-visible::before { animation:sectionLineX .9s .04s cubic-bezier(.18,.76,.22,1) forwards !important; }
.section-crosshair.is-visible::after { animation:sectionLineY 1s .12s cubic-bezier(.18,.76,.22,1) forwards !important; }
.section-crosshair.is-visible span { animation:sectionNodeIn .42s .56s cubic-bezier(.16,.84,.26,1) forwards !important; }


/* No separate top datum: at full field height the crosshair's own horizontal
   rule is the axis, and a second stacked horizontal read as a stray box edge. */

/* Motion language: shorter travel, no persistent blur, one calm easing curve. */
.motion-reveal {
  opacity:0;
  transform:translate3d(0,12px,0);
  filter:none;
  transition:
    opacity .70s cubic-bezier(.2,.72,.2,1) var(--reveal-delay,0ms),
    transform .78s cubic-bezier(.2,.72,.2,1) var(--reveal-delay,0ms);
}
.case-visual.motion-reveal,
.dark-visual.motion-reveal,
.capability-image-wrap.motion-reveal {
  transform:translate3d(0,14px,0) scale(.997);
}

/* Tiny interaction cues that read as quality rather than animation. */
.desktop-nav a { position:relative; }
.desktop-nav a::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px; height:1px;
  background:currentColor;
  opacity:.38;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .32s cubic-bezier(.2,.72,.2,1);
}
.desktop-nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.primary-button span,
.consultation-button span,
.footer-project-button span,
.underlined-link span,
.dark-link span { transition:transform .30s cubic-bezier(.2,.72,.2,1); }
.primary-button:hover span,
.consultation-button:hover span,
.footer-project-button:hover span { transform:translateX(2px); }
.underlined-link:hover span,
.dark-link:hover span { transform:translateX(3px); }
.capability-heading { transition:background-color .28s ease; }
.capability-heading:hover { background:rgba(134,119,109,.028); }
.capability-item.open { background:rgba(134,119,109,.022); }
.capability-item { transition:background-color .4s ease; }
.capability-heading:focus-visible { outline:2px solid var(--ink); outline-offset:-3px; }
.cap-name { transition:transform .34s cubic-bezier(.2,.72,.2,1), color .28s ease; }
.capability-heading:hover .cap-name { transform:translateX(3px); }


/* Product surfaces settle into place with a faint depth transition. */
.case-visual img,
.dark-visual img,
.capability-image-wrap img {
  transition:transform .9s cubic-bezier(.2,.72,.2,1), box-shadow .9s ease;
}
.case-visual.motion-reveal.is-visible img,
.dark-visual.motion-reveal.is-visible img,
.capability-image-wrap.motion-reveal.is-visible img { transform:translateZ(0); }

@keyframes heroCrossLineX {
  0%{transform:scaleX(.18);opacity:.34}
  14%{opacity:.64}
  100%{transform:scaleX(1);opacity:1}
}
@keyframes heroCrossLineY {
  0%{transform:scaleY(.18);opacity:.34}
  14%{opacity:.64}
  100%{transform:scaleY(1);opacity:1}
}
@keyframes heroCrossNodeIn {
  0%{opacity:.28;transform:translate(-50%,-50%) scale(.62)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes heroCrossHalo {
  0%{opacity:0;transform:scale(.45)}
  38%{opacity:1}
  100%{opacity:0;transform:scale(1.5)}
}
@keyframes heroAmbientDrift {
  from{transform:translate3d(-.35%,0,0) scale(1.015)}
  to{transform:translate3d(.35%,-.25%,0) scale(1.025)}
}
@keyframes heroPlaneInRefined { from{opacity:.22} to{opacity:.54} }
@keyframes sectionLineX { from{transform:scaleX(0);opacity:0} to{transform:scaleX(1);opacity:1} }
@keyframes sectionLineY { from{transform:scaleY(0);opacity:0} to{transform:scaleY(1);opacity:1} }
@keyframes sectionNodeIn { from{opacity:0;transform:scale(.45)} to{opacity:1;transform:scale(1)} }

@media (max-width:760px) {
  .hero .architectural-field { left:63%; }
  .crosshair-hero::before { top:49%; }
  .crosshair-hero::after { left:46%; }
  .crosshair-hero span { left:46%; top:49%; }
  .hero-plane { opacity:.48; }
  .hero::before { animation:none; }
  .hero .architectural-field::after { opacity:.35; }
}

@media (prefers-reduced-motion:reduce) {
  .hero::before,
  .hero-plane { animation:none !important; }
  .crosshair-hero::before,
  .crosshair-hero::after { transform:none !important; opacity:1 !important; animation:none !important; }
  .crosshair-hero span { opacity:1 !important; transform:translate(-50%,-50%) !important; animation:none !important; }
  .crosshair-hero span::after { display:none; }
  .section-crosshair::before,
  .section-crosshair::after { transform:none !important; opacity:1 !important; animation:none !important; }
  .section-crosshair span { opacity:1 !important; transform:none !important; animation:none !important; }
}

/* Pixel calibration after the ambient pass: preserve the added depth while
   returning the hero crosshair and lower-right plane to the approved weights. */
.hero { --hero-cross-x:43.95%; --hero-cross-y:43.90%; }
.crosshair-hero::before {
  background:linear-gradient(90deg,
    rgba(24,22,20,.035) 0%,
    rgba(24,22,20,.165) 5%,
    rgba(24,22,20,.175) 22%,
    rgba(24,22,20,.180) 44%,
    rgba(24,22,20,.178) 64%,
    rgba(24,22,20,.168) 84%,
    rgba(24,22,20,.155) 100%);
}
.crosshair-hero::after {
  background:linear-gradient(180deg,
    rgba(24,22,20,.145) 0%,
    rgba(24,22,20,.150) 20%,
    rgba(24,22,20,.165) 43.9%,
    rgba(24,22,20,.158) 64%,
    rgba(24,22,20,.150) 84%,
    rgba(24,22,20,.142) 100%);
}
.crosshair-hero span { background:#000; }
.hero-plane {
  background:
    radial-gradient(ellipse 70% 66% at 91% 97%, rgba(103,89,80,.100) 0%, rgba(119,103,93,.055) 33%, rgba(145,128,117,.025) 57%, rgba(145,128,117,0) 78%),
    linear-gradient(137deg, rgba(255,255,255,.010) 7%, rgba(190,173,160,.032) 48%, rgba(126,110,100,.055) 100%);
}

/* Final hero micro-calibration. */
.hero { --hero-cross-y:43.85%; }
.crosshair-hero::before {
  background:linear-gradient(90deg,
    rgba(24,22,20,.035) 0%, rgba(24,22,20,.160) 5%, rgba(24,22,20,.168) 22%,
    rgba(24,22,20,.170) 44%, rgba(24,22,20,.168) 64%, rgba(24,22,20,.160) 84%,
    rgba(24,22,20,.150) 100%);
}
.crosshair-hero::after {
  background:linear-gradient(180deg,
    rgba(24,22,20,.140) 0%, rgba(24,22,20,.145) 22%, rgba(24,22,20,.150) 43.85%,
    rgba(24,22,20,.148) 64%, rgba(24,22,20,.144) 84%, rgba(24,22,20,.138) 100%);
}
.hero-plane {
  opacity:.45;
  background:
    radial-gradient(ellipse 63% 58% at 93% 98%, rgba(103,89,80,.085) 0%, rgba(119,103,93,.035) 26%, rgba(145,128,117,.014) 49%, rgba(145,128,117,0) 68%),
    linear-gradient(137deg, rgba(255,255,255,.010) 7%, rgba(190,173,160,.025) 50%, rgba(126,110,100,.040) 100%);
}
@keyframes heroPlaneInRefined { from{opacity:.20} to{opacity:.45} }

/* Mobile keeps the architectural motif but moves it out of the headline's
   reading path. There is no desktop-style grid fighting the copy. */
@media (max-width:760px) {
  .hero .architectural-field { left:69%; opacity:.46; }
  .crosshair-hero::before { top:59%; }
  .crosshair-hero::after { left:45%; transform-origin:50% 59%; }
  .crosshair-hero span { left:45%; top:59%; }
  .hero .architectural-field::before {
    background:radial-gradient(circle at 45% 59%, rgba(126,111,101,.050), rgba(126,111,101,0) 42%);
  }
}


/* ================================================================
   TYPOGRAPHY SYSTEM — Geist (sans) + Geist Mono (technical metadata)
   ================================================================
   Both faces are self-hosted and variable. Metadata (eyebrows, tag runs, small
   caps labels) is set in the mono so the technical layer reads distinctly. We do not
   bundle font binaries here. Inter Display / Inter are deliberate QA fallbacks
   so the site remains visually close if the webfont fails. */
:root {
  --font-display: "Geist", "Inter Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Geist", "Inter", "Inter Display", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tracking-display-xl: -0.034em;
  --tracking-display-lg: -0.038em;
  --tracking-display-md: -0.030em;
  --tracking-body: -0.008em;
  --tracking-label: 0.18em;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-synthesis: none;
}

body {
  font-family: var(--font-text);
  font-weight: 400;
  letter-spacing: var(--tracking-body);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

.brand,
h1, h2, h3,
.cap-name,
.result-value,
.dark-metric strong,
.metrics-grid strong,
.footer-brand,
.footer-wordmark {
  font-family: var(--font-display);
  font-synthesis: none;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Small type is intentionally less compressed than the first build. */
.brand { letter-spacing: -0.034em; font-weight: 400; }
.desktop-nav { letter-spacing: -0.004em; font-weight: 400; }
.consultation-button,
.primary-button,
.text-link,
.underlined-link,
.dark-link,
.footer-project-button { letter-spacing: -0.008em; font-weight: 400; }
.eyebrow {
  letter-spacing: var(--tracking-label);
  font-weight: 500;
  line-height: 1.25;
}
.scroll-cue { letter-spacing: .20em; font-weight: 500; }

/* Hero — wider, calmer letterforms and a tighter editorial rhythm. */
.hero h1 {
  font-size: clamp(60px, 5.62vw, 84px);
  line-height: 1.115;
  letter-spacing: var(--tracking-display-xl);
  font-weight: 400;
}
.hero-body {
  font-size: 18px;
  line-height: 1.56;
  letter-spacing: -0.010em;
  font-weight: 400;
}

/* Editorial chapter titles. */
.featured-intro h2 {
  font-size: clamp(61px, 6.55vw, 95px);
  line-height: 1.055;
  letter-spacing: -0.041em;
  font-weight: 400;
}
.featured-intro p:not(.eyebrow) { line-height: 1.48; letter-spacing: -0.009em; }

.case-copy h2 {
  line-height: 1.055;
  letter-spacing: -0.032em;
  font-weight: 400;
}
.case-lead,
.case-block p,
.result-block p { letter-spacing: -0.006em; }
.case-block strong,
.result-block strong { letter-spacing: -0.008em; font-weight: 600; }
.result-value { letter-spacing: -0.030em; font-weight: 400; }

.capabilities-title h2 {
  line-height: 1.075;
  letter-spacing: -0.038em;
  font-weight: 400;
}
.cap-name {
  letter-spacing: -0.024em;
  font-weight: 400;
}
.cap-num { letter-spacing: -0.010em; font-weight: 400; }
.capability-copy p { letter-spacing: -0.006em; }
.capability-copy .lead { line-height: 1.43; letter-spacing: -0.012em; }
.technical-tags { letter-spacing: .145em; font-weight: 500; }

.process-title h2 {
  line-height: 1.105;
  letter-spacing: -0.040em;
  font-weight: 400;
}
.process-title > p:last-child,
.process-steps p { letter-spacing: -0.006em; }
.process-num { letter-spacing: -0.022em; font-weight: 300; }
.process-steps h3 { letter-spacing: -0.025em; font-weight: 400; }
.process-footer { letter-spacing: -0.004em; }

.dark-copy h2 {
  line-height: 1.075;
  letter-spacing: -0.036em;
  font-weight: 400;
}
.dark-copy > p:not(.eyebrow) { letter-spacing: -0.004em; }
.dark-metric strong { letter-spacing: -0.042em; font-weight: 300; }

.impact-head h2 {
  line-height: 1.10;
  letter-spacing: -0.043em;
  font-weight: 400;
}
.metrics-grid p { letter-spacing: .065em; font-weight: 500; }
.metrics-grid strong {
  letter-spacing: -0.052em;
  font-weight: 300;
}
.metrics-grid article > div { letter-spacing: -0.005em; }

.cta-copy h2 {
  line-height: 1.065;
  letter-spacing: -0.044em;
  font-weight: 400;
}
.cta-copy > p:not(.eyebrow) { letter-spacing: -0.007em; }

.footer-brand { letter-spacing: -0.034em; font-weight: 400; }
.footer-column p,
.footer-project p { letter-spacing: .17em; font-weight: 500; }
.footer-column a,
.footer-email,
.footer-trust,
.footer-legal { letter-spacing: -0.004em; }
.footer-wordmark { letter-spacing: -0.048em; font-weight: 300; }

@media (max-width: 760px) {
  .hero h1 { font-size: 49px; line-height: 1.055; letter-spacing: -0.038em; }
  .hero-body { font-size: 16px; line-height: 1.52; }
  .featured-intro h2 { font-size: 57px; line-height: 1.035; letter-spacing: -0.043em; }
  .case-copy h2 { font-size: 51px; letter-spacing: -0.036em; }
  .capabilities-title h2 { font-size: 55px; line-height: 1.04; letter-spacing: -0.042em; }
  .cap-name { font-size: 22px; letter-spacing: -0.026em; }
  .process-title h2 { font-size: 51px; line-height: 1.065; letter-spacing: -0.043em; }
  .dark-copy h2 { font-size: 48px; line-height: 1.055; letter-spacing: -0.039em; }
  .impact-head h2 { font-size: 49px; line-height: 1.07; letter-spacing: -0.043em; }
  .cta-copy h2 { font-size: 57px; line-height: 1.045; letter-spacing: -0.045em; }
}


/* Final typography calibration against the approved desktop frames. */
@media (min-width: 761px) {
  .hero-copy { transform: translateY(-38px); }
  .hero h1 {
    font-size: clamp(62px, 5.78vw, 86px);
    line-height: 1.105;
    letter-spacing: -0.031em;
  }
  .brand { font-size: 28px; }

  /* Keep the intentional three-line editorial composition instead of letting
     the fallback font create accidental extra wraps. */
  .capabilities-title h2 {
    /* The floor has to fall with the viewport: in the tablet range this column is
       only ~185px, and a 50px floor made "operation." overhang its own column. */
    font-size: clamp(40px, 3.72vw, 56px);
    line-height: 1.065;
    letter-spacing: -0.034em;
  }
  .process-title h2 {
    font-size: clamp(51px, 3.90vw, 58px);
    line-height: 1.105;
    letter-spacing: -0.036em;
  }
}


/* Editorial line locks: these are deliberate composition lines, not browser wraps.
   The spans must stay block at every width — the source has no whitespace between
   them, so letting them fall inline on mobile ran words together
   ("We build thesystems behindthe operation"). Only the nowrap is desktop-only. */
.hero h1 > span,
.capabilities-title h2 > span,
.process-title h2 > span { display:block; }

@media (min-width: 761px) {
  /* Only the hero's lines are short enough to lock. The capabilities and process
     headlines are longer than their columns, so nowrap pushed their text out of
     its own box and across the panel beside it. */
  .hero h1 > span { white-space:nowrap; }
  .capabilities-title h2 {
    font-size: clamp(40px, 3.52vw, 52px);
    line-height: 1.07;
  }
  .process-title h2 {
    font-size: clamp(50px, 3.72vw, 55px);
    line-height: 1.16;
  }
}


/* HERO ARCHITECTURAL VISIBILITY SAFEGUARD — 2026-08-07
   Keep the approved crosshair and lower-right plane perceptible from first paint.
   Motion now strengthens the treatment instead of revealing it from fully hidden. */
.hero .architectural-field { opacity:1 !important; visibility:visible !important; }
.crosshair-hero { opacity:1; }
.crosshair-hero::before,
.crosshair-hero::after { will-change:transform,opacity; }
.hero-plane { visibility:visible; }

/* ================================================================
   PRODUCT SURFACE REFINEMENT — 2026-08-07
   Replaces raster-heavy mockups with live, responsive product UI.
   Visual target: Linear / Cursor restraint — low chrome, strong hierarchy,
   subtle 1px borders, no oversized square frames.
   ================================================================ */

.product-ui {
  --ui-bg: #111214;
  --ui-panel: #15171a;
  --ui-panel-2: #191b1f;
  --ui-line: rgba(255,255,255,.075);
  --ui-line-strong: rgba(255,255,255,.115);
  --ui-text: #f2f3f4;
  --ui-muted: #8f949b;
  --ui-soft: #c5c8cc;
  --ui-green: #6ee7a8;
  --ui-amber: #f2b86a;
  width: 100%;
  color: var(--ui-text);
  background:
    radial-gradient(90% 120% at 80% 0%, rgba(255,255,255,.027), transparent 52%),
    linear-gradient(180deg, #131416 0%, #0f1012 100%);
  border: 1px solid var(--ui-line-strong);
  border-radius: 18px;
  box-shadow:
    0 26px 60px rgba(9,10,12,.16),
    0 1px 0 rgba(255,255,255,.025) inset;
  overflow: hidden;
  font-family: var(--font-text);
  letter-spacing: -.012em;
}
.product-ui button { color:inherit; font:inherit; }
.product-ui * { box-sizing:border-box; }
.product-overline { display:block; color:var(--ui-muted); font-size:9px; letter-spacing:.14em; font-weight:600; margin-bottom:6px; }
.product-toolbar { min-height:74px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ui-line); }
.product-toolbar strong { font-size:17px; line-height:1; font-weight:500; letter-spacing:-.025em; }
.product-toolbar button { border:1px solid var(--ui-line-strong); background:#f1f2f3; color:#101113; border-radius:7px; height:32px; padding:0 12px; font-size:10px; font-weight:600; }
.toolbar-actions { display:flex; align-items:center; gap:12px; color:var(--ui-muted); font-size:9px; }
.product-kpis { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--ui-line); }
.product-kpis > div { padding:15px 17px 16px; border-right:1px solid var(--ui-line); }
.product-kpis > div:last-child { border-right:0; }
.product-kpis span { display:block; color:var(--ui-muted); font-size:9px; margin-bottom:7px; }
.product-kpis strong { display:block; font-size:23px; line-height:1; font-weight:400; letter-spacing:-.04em; }
.status-live,.status-warn { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--ui-green); box-shadow:0 0 0 3px rgba(110,231,168,.08); }
.status-warn { background:var(--ui-amber); box-shadow:0 0 0 3px rgba(242,184,106,.08); }
.status-pill { display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:4px 8px; border-radius:999px; font-size:8px; font-weight:500; white-space:nowrap; }
.status-pill.complete { color:#8ee8b6; background:rgba(65,182,118,.11); border:1px solid rgba(65,182,118,.12); }
.status-pill.running { color:#a4c7ff; background:rgba(84,138,225,.10); border:1px solid rgba(84,138,225,.11); }
.status-pill.approval { color:#e7b782; background:rgba(224,143,72,.10); border:1px solid rgba(224,143,72,.11); }

/* Tour Builder */
.case-visual { perspective:1200px; }
.tour-builder-product { height:min(720px,74svh); min-height:580px; display:grid; grid-template-columns:138px 1fr; }
.product-rail { padding:22px 12px; border-right:1px solid var(--ui-line); background:rgba(6,7,8,.22); display:flex; flex-direction:column; gap:7px; }
.product-mark { font-size:24px; font-weight:700; letter-spacing:-.06em; margin:3px 9px 22px; }
.rail-item { height:36px; border-radius:7px; display:flex; align-items:center; padding:0 11px; color:var(--ui-muted); font-size:10px; }
.rail-item.active { color:var(--ui-text); background:rgba(255,255,255,.055); box-shadow:0 0 0 1px rgba(255,255,255,.025) inset; }
.product-stage { min-width:0; }
.tour-calendar { margin:18px 20px 0; border:1px solid var(--ui-line); border-radius:10px; overflow:hidden; background:rgba(255,255,255,.012); }
.calendar-head { height:36px; display:grid; grid-template-columns:repeat(7,1fr); align-items:center; border-bottom:1px solid var(--ui-line); color:var(--ui-muted); font-size:8px; text-align:center; letter-spacing:.07em; }
.calendar-body { height:300px; position:relative; background-image:linear-gradient(to right,var(--ui-line) 1px,transparent 1px),linear-gradient(to bottom,var(--ui-line) 1px,transparent 1px); background-size:14.2857% 100%,100% 25%; }
.event-chip { position:absolute; min-width:118px; padding:8px 10px; border-radius:7px; background:linear-gradient(180deg,#24252a,#202126); border:1px solid rgba(255,255,255,.08); font-size:9px; box-shadow:0 7px 18px rgba(0,0,0,.12); }
.event-chip small { display:block; color:var(--ui-muted); margin-top:2px; font-size:7px; }
.event-chip.e1 { left:4%; top:16%; }.event-chip.e2 { left:29%; top:35%; }.event-chip.e3 { left:46%; top:18%; }.event-chip.e4 { left:63%; top:53%; }.event-chip.e5 { left:76%; top:29%; }
.product-statusbar { height:46px; margin:0 20px; display:flex; align-items:center; justify-content:space-between; color:var(--ui-muted); font-size:8px; }
.product-statusbar span:first-child { display:flex; align-items:center; gap:8px; color:#afb3b8; }
.case-visual .product-ui { transform:translateZ(0); transition:transform .55s var(--ease), box-shadow .55s var(--ease); }
.case-visual:hover .product-ui { transform:translateY(-3px); box-shadow:0 34px 75px rgba(9,10,12,.20),0 1px 0 rgba(255,255,255,.03) inset; }

/* Agent control plane */
.product-image-clean { border:0 !important; background:transparent !important; overflow:visible !important; }
.agent-product { height:355px; display:grid; grid-template-columns:112px 1fr; border-radius:14px; box-shadow:0 20px 44px rgba(19,17,16,.14); }
.agent-rail { padding:18px 12px; border-right:1px solid var(--ui-line); display:flex; flex-direction:column; gap:4px; color:var(--ui-muted); font-size:8px; }
.agent-rail strong { color:var(--ui-text); margin:0 7px 15px; font-size:11px; font-weight:500; }
.agent-rail span { padding:7px; border-radius:6px; }.agent-rail span.active { color:var(--ui-text); background:rgba(255,255,255,.05); }
.agent-stage { min-width:0; }
.agent-product .product-toolbar { min-height:62px; padding:14px 16px; }
.agent-product .product-toolbar strong { font-size:13px; }
.agent-product .product-toolbar button { height:27px; font-size:8px; }
.agent-kpis > div { padding:11px 12px 12px; }.agent-kpis span { font-size:7px; margin-bottom:5px; }.agent-kpis strong { font-size:17px; }
.agent-table { margin:12px 14px; border:1px solid var(--ui-line); border-radius:8px; overflow:hidden; }
.agent-row { min-height:40px; display:grid; grid-template-columns:1.45fr .75fr 1fr .65fr; align-items:center; gap:10px; padding:0 12px; border-bottom:1px solid var(--ui-line); color:#c4c7cb; font-size:7.5px; }
.agent-row:last-child { border-bottom:0; }.agent-row.agent-head { min-height:28px; color:var(--ui-muted); font-size:6.5px; letter-spacing:.08em; }.agent-row > span:first-child { color:#eef0f2; }

/* Infrastructure and operational cards now share the same precise dark system. */
.system-card.light-card { background:linear-gradient(180deg,#151619,#111214); color:#eef0f2; border:1px solid rgba(255,255,255,.09); border-radius:14px; box-shadow:0 20px 44px rgba(19,17,16,.12); overflow:hidden; }
.system-card.light-card .mini-sidebar { border-right:1px solid rgba(255,255,255,.07); }
.system-card.light-card .mini-sidebar span,.system-card.light-card .metric-row span { color:#8d9299; }
.system-card.light-card .mini-sidebar .active { color:#f0f2f3; background:rgba(255,255,255,.05); }
.system-card.light-card .workflow-line span,.system-card.light-card .pipeline span { border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.025); color:#c7cacf; }
.system-card.light-card .workflow-line i { background:rgba(255,255,255,.10); }
.system-card.light-card .pipeline-title { border-color:rgba(255,255,255,.07); }

/* Command Center — remove the square/boxy frame and make the shell feel
   integrated into the section. The only perimeter is the product's own
   rounded hairline. */
.dark-visual { padding:0 0 0 6px; }
.dark-visual::before,.dark-visual::after { content:none !important; }
.dark-visual > img { display:none !important; }
.command-product { height:min(720px,76svh); min-height:600px; display:grid; grid-template-columns:74px 1fr; border-radius:24px; border-color:rgba(255,255,255,.105); background:radial-gradient(110% 120% at 78% 8%,rgba(255,255,255,.032),transparent 48%),linear-gradient(180deg,#121315,#0d0e10); box-shadow:0 30px 85px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.025) inset; }
.command-rail { padding:19px 12px; border-right:1px solid var(--ui-line); background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(0,0,0,.06)); display:flex; flex-direction:column; align-items:center; gap:15px; }
.command-logo { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--ui-line-strong); border-radius:9px; font-size:14px; margin-bottom:9px; }
.rail-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; color:#747980; font-size:13px; }.rail-icon.active { color:#f1f2f4; background:rgba(255,255,255,.055); }
.command-stage { min-width:0; }
.command-toolbar { min-height:78px; padding:19px 22px; }
.command-toolbar strong { font-size:19px; }.health-chip { height:28px; display:flex; align-items:center; gap:7px; padding:0 10px; border:1px solid var(--ui-line); border-radius:999px; color:#b8bcc1; font-size:9px; }
.command-kpis > div { padding:17px 18px 18px; }.command-kpis span { font-size:9px; }.command-kpis strong { font-size:25px; }
.command-grid { padding:17px; display:grid; grid-template-rows:1.15fr .9fr; gap:14px; height:calc(100% - 168px); }
.command-map,.command-events { border:1px solid var(--ui-line); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.012); }
.command-map { position:relative; min-height:220px; background:radial-gradient(circle at 61% 55%,rgba(40,93,74,.08),transparent 30%),#101214; }
.map-grid-lines { position:absolute; inset:0; opacity:.48; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:38px 38px; transform:skewY(-7deg) scale(1.12); }
.map-node { position:absolute; width:8px; height:8px; border-radius:50%; background:#65d49b; box-shadow:0 0 0 5px rgba(101,212,155,.08),0 0 22px rgba(101,212,155,.20); }.map-node.warn { background:#dc6b5e; box-shadow:0 0 0 5px rgba(220,107,94,.08),0 0 24px rgba(220,107,94,.22); }
.map-node.n1{left:24%;top:61%}.map-node.n2{left:44%;top:39%}.map-node.n3{left:58%;top:66%}.map-node.n4{left:78%;top:29%}.map-node.n5{left:70%;top:57%}
.map-label { position:absolute; color:#686e75; font-size:7px; }.map-label.l1{left:19%;top:68%}.map-label.l2{left:41%;top:46%}.map-label.l3{left:74%;top:36%}
.events-title { height:42px; padding:0 15px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ui-line); }.events-title strong{font-size:10px;font-weight:500}.events-title span{font-size:8px;color:var(--ui-muted)}
.event-row { min-height:47px; display:grid; grid-template-columns:1.45fr 1fr .75fr .55fr; align-items:center; gap:12px; padding:0 15px; border-bottom:1px solid var(--ui-line); color:#aeb2b7; font-size:8px; }.event-row:last-child{border-bottom:0}.event-row>span:first-child{color:#e8eaec;display:flex;align-items:center;gap:8px}.event-row b{font-weight:500}
.dark-visual .product-ui { transform:translateZ(0); transition:transform .55s var(--ease),border-color .45s ease,box-shadow .55s var(--ease); }
.dark-visual:hover .product-ui { transform:translateY(-3px); border-color:rgba(255,255,255,.14); box-shadow:0 38px 95px rgba(0,0,0,.34),0 1px 0 rgba(255,255,255,.035) inset; }

/* Hero copy requested 2026-08-07 */
.hero-intelligence-title { max-width:880px; }
.hero-intelligence-title + .hero-body { max-width:760px; }

@media (max-width: 1100px) {
  .tour-builder-product { grid-template-columns:112px 1fr; }
  .product-rail { padding-left:9px; padding-right:9px; }
  .event-chip { min-width:100px; }
  .command-product { grid-template-columns:62px 1fr; }
  .command-rail { padding-left:8px; padding-right:8px; }
}

@media (max-width: 760px) {
  .hero-intelligence-title > span { white-space:normal !important; }
  .hero-intelligence-title + .hero-body br { display:none; }
  .tour-builder-product { width:155%; max-width:none; min-height:510px; height:510px; grid-template-columns:92px 1fr; transform:translateX(-4%); border-radius:14px; }
  .product-mark { font-size:19px; margin-left:7px; }.rail-item { height:31px; padding:0 8px; font-size:8px; }
  .product-toolbar { padding:14px; min-height:60px; }.product-toolbar strong { font-size:14px; }.toolbar-actions span { display:none; }
  .product-kpis > div { padding:11px 10px; }.product-kpis span { font-size:7px; }.product-kpis strong { font-size:17px; }
  .tour-calendar { margin:12px 12px 0; }.calendar-body { height:215px; }.event-chip { min-width:80px; font-size:7px; padding:6px 7px; }
  .agent-product { width:150%; height:330px; transform:translateX(-4%); }
  .agent-row { grid-template-columns:1.5fr .8fr 1fr; }.agent-row span:last-child { display:none; }
  .command-product { width:155%; max-width:none; min-height:540px; height:540px; transform:translateX(-3%); grid-template-columns:56px 1fr; border-radius:18px; }
  .command-grid { height:calc(100% - 145px); padding:11px; gap:10px; }.command-toolbar { min-height:65px; }.command-kpis > div:nth-child(3){display:none}.command-kpis { grid-template-columns:repeat(3,1fr); }.command-kpis > div:nth-child(4){border-right:0}.event-row{grid-template-columns:1.45fr .9fr .6fr}.event-row>span:nth-child(3){display:none}.event-row{font-size:7px;padding:0 10px}.command-map{min-height:180px}
}
.case-bottom-grid { margin:14px 20px 0; display:grid; grid-template-columns:1.2fr .8fr; gap:12px; }
.case-mini-panel { min-height:98px; border:1px solid var(--ui-line); border-radius:9px; background:rgba(255,255,255,.012); padding:12px 13px; }
.mini-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }.mini-panel-head strong{font-size:9px;font-weight:500}.mini-panel-head span{font-size:7px;color:var(--ui-muted)}
.mini-panel-row { min-height:26px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; color:#aeb2b7; font-size:7px; border-top:1px solid var(--ui-line); }.mini-panel-row:first-of-type{border-top:0}.mini-panel-row span{color:#d7d9dc}.mini-panel-row b{font-weight:500;color:#c7cacf}.mini-panel-row i{font-style:normal;color:#8ddcaf;background:rgba(66,172,114,.08);padding:3px 6px;border-radius:999px}
.readiness-track { height:5px; background:rgba(255,255,255,.055); border-radius:999px; overflow:hidden; margin:15px 0 12px; }.readiness-track i{display:block;width:92%;height:100%;background:linear-gradient(90deg,#60646a,#c7cacf);border-radius:inherit}
.readiness-labels { display:flex; justify-content:space-between; color:var(--ui-muted); font-size:6.5px; }
@media(max-width:760px){.case-bottom-grid{display:none}.product-statusbar{height:34px}}

/* ==================================================================
   INTENT + PRODUCT FIT PASS — 2026-08-07
   Re-aligns product surfaces with the approved Meridian editorial system.
   ================================================================== */

/* Flagship: return to the approved wide product composition. */
.tour-builder-refined {
  height:min(690px,72svh);
  min-height:620px;
  grid-template-columns:154px minmax(0,1fr);
  border-radius:16px;
  background:
    radial-gradient(85% 75% at 78% 0%,rgba(114,101,130,.07),transparent 48%),
    linear-gradient(180deg,#151619 0%,#101113 100%);
  border-color:rgba(255,255,255,.095);
  box-shadow:0 28px 70px rgba(16,15,16,.16),0 1px 0 rgba(255,255,255,.025) inset;
}
.tour-builder-refined .tour-rail {
  position:relative;
  padding:22px 12px 18px;
  gap:5px;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.06));
}
.tour-builder-refined .product-mark { margin:2px 9px 18px; font-size:25px; }
.tour-builder-refined .rail-item { height:35px; gap:8px; padding:0 10px; font-size:9.5px; }
.tour-builder-refined .rail-item span { width:14px; color:#a1a5ab; text-align:center; font-size:10px; }
.tour-builder-refined .tour-user { margin-top:auto; display:flex; align-items:center; gap:8px; padding:12px 8px 2px; border-top:1px solid var(--ui-line); }
.user-orb { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#25272b; color:#dfe1e4; font-size:7px; }
.tour-user div { min-width:0; }.tour-user strong,.tour-user small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tour-user strong { font-size:8px; font-weight:500; }.tour-user small { margin-top:2px; font-size:6.5px; color:var(--ui-muted); }
.tour-stage { display:grid; grid-template-rows:68px 42px minmax(0,1fr) 124px; min-width:0; }
.tour-titlebar { display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid var(--ui-line); }
.tour-titlebar > strong { font-size:18px; font-weight:500; letter-spacing:-.025em; }
.tour-title-actions { display:flex; align-items:center; gap:8px; color:var(--ui-muted); font-size:8px; }
.tour-title-actions > span { height:28px; display:flex; align-items:center; padding:0 9px; border:1px solid transparent; border-radius:6px; }
.tour-title-actions > span.selected { color:#e7e9eb; border-color:var(--ui-line); background:rgba(255,255,255,.025); }
.tour-title-actions button { height:30px; padding:0 11px; border:0; border-radius:6px; background:#f1f2f2; color:#111214; font-size:8px; font-weight:600; }
.tour-controlbar { display:flex; align-items:center; gap:0; padding:0 22px; color:#d4d7da; font-size:8px; }
.tour-controlbar span { height:26px; min-width:88px; display:grid; place-items:center; border-top:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line); }
.tour-controlbar button { width:28px; height:26px; border:1px solid var(--ui-line); background:rgba(255,255,255,.018); color:#a8adb3; }
.tour-controlbar button:first-child { border-radius:6px 0 0 6px; }.tour-controlbar button:last-child { border-radius:0 6px 6px 0; }
.tour-builder-refined .refined-calendar { margin:0 20px 14px; border-radius:10px; min-height:0; }
.tour-builder-refined .calendar-head { height:34px; text-transform:none; letter-spacing:0; font-size:7.5px; }
.tour-builder-refined .calendar-body { height:100%; min-height:0; background-size:14.2857% 100%,100% 20%; }
.refined-calendar .date { position:absolute; top:8px; color:#737980; font-size:7px; }.refined-calendar .date.d1{left:1.2%}.refined-calendar .date.d2{left:15.5%}.refined-calendar .date.d3{left:29.8%}.refined-calendar .date.d4{left:44.1%}.refined-calendar .date.d5{left:58.4%}.refined-calendar .date.d6{left:72.7%}.refined-calendar .date.d7{left:87%}
.tour-builder-refined .event-chip { min-width:125px; max-width:154px; padding:8px 10px; border-radius:6px; background:linear-gradient(180deg,rgba(68,65,76,.78),rgba(48,47,55,.86)); border-color:rgba(255,255,255,.075); font-size:8px; line-height:1.18; }
.tour-builder-refined .event-chip small { font-size:6px; color:#9b9da4; }
.tour-builder-refined .event-chip.e1{left:1.5%;top:23%}.tour-builder-refined .event-chip.e2{left:22%;top:23%}.tour-builder-refined .event-chip.e3{left:36%;top:47%}.tour-builder-refined .event-chip.e4{left:63%;top:47%}.tour-builder-refined .event-chip.e5{left:69%;top:72%}
.tour-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; padding:0 20px 18px; }
.tour-kpi-row article { position:relative; min-width:0; padding:13px 13px 10px; border:1px solid var(--ui-line); border-radius:9px; background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)); }
.tour-kpi-row span,.tour-kpi-row small { display:block; color:var(--ui-muted); }.tour-kpi-row span{font-size:7.5px}.tour-kpi-row strong{display:block;margin-top:6px;font-size:17px;font-weight:400;letter-spacing:-.035em}.tour-kpi-row small{margin-top:8px;font-size:6.5px}
.tour-kpi-row svg { position:absolute; right:10px; bottom:9px; width:52px; height:15px; fill:none; stroke:#9a778d; stroke-width:1.2; opacity:.8; }
.tour-kpi-row article:nth-child(2) svg { stroke:#6ca780; }.tour-kpi-row article:nth-child(3) svg { stroke:#769eaa; }.tour-kpi-row article:nth-child(4) svg { stroke:#a56f76; }

/* Dark chapter becomes Meridian Intent rather than another generic dashboard. */
.intent-section { grid-template-columns:34% 66%; background:
  radial-gradient(70% 88% at 72% 43%,rgba(76,66,60,.20),transparent 58%),
  radial-gradient(45% 48% at 16% 70%,rgba(55,48,44,.12),transparent 70%),
  #0f0f0e; }
.intent-copy { padding-top:26px; padding-right:64px; }
.intent-copy h2 { max-width:500px; font-size:clamp(48px,3.75vw,61px); line-height:1.08; font-weight:300; letter-spacing:-.046em; margin-bottom:38px; }
.intent-copy > p:not(.eyebrow) { max-width:430px; color:#aaa39d; line-height:1.68; }
.intent-architecture { margin-top:64px; display:flex; flex-direction:column; gap:9px; }
.intent-architecture strong { font-size:29px; font-weight:300; letter-spacing:-.035em; color:#f1efed; }
.intent-architecture span { max-width:340px; color:#88827c; font-size:12px; line-height:1.45; }
.intent-copy .dark-link { margin-top:54px; }
.intent-visual { padding-left:0; }
.intent-product { height:min(680px,72svh); min-height:610px; display:grid; grid-template-columns:68px minmax(0,1fr); border-radius:22px; border-color:rgba(255,255,255,.10); background:
  radial-gradient(78% 72% at 78% 6%,rgba(126,109,98,.055),transparent 50%),
  linear-gradient(180deg,#121315 0%,#0d0e10 100%);
  box-shadow:0 34px 90px rgba(0,0,0,.31),0 1px 0 rgba(255,255,255,.025) inset;
}
.intent-rail { border-right:1px solid var(--ui-line); display:flex; flex-direction:column; align-items:center; gap:13px; padding:18px 10px; background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(0,0,0,.04)); }
.intent-stage { min-width:0; display:grid; grid-template-rows:72px 82px minmax(0,1fr) 36px; }
.intent-toolbar { display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid var(--ui-line); }
.intent-toolbar strong { display:block; font-size:17px; font-weight:500; letter-spacing:-.024em; }.intent-toolbar .product-overline{margin-bottom:5px}
.intent-kpis { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--ui-line); }
.intent-kpis > div { padding:15px 16px; border-right:1px solid var(--ui-line); }.intent-kpis > div:last-child{border-right:0}.intent-kpis span{display:block;font-size:7.5px;color:var(--ui-muted);margin-bottom:7px}.intent-kpis strong{font-size:21px;font-weight:400;letter-spacing:-.035em}.intent-kpis .live-word{color:#8bd9ad;font-size:17px}
.intent-workspace { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(235px,.82fr); gap:12px; padding:14px; min-height:0; }
.intent-feed,.intent-detail { min-height:0; border:1px solid var(--ui-line); border-radius:11px; background:rgba(255,255,255,.012); overflow:hidden; }
.intent-feed-head { height:43px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--ui-line); }.intent-feed-head strong{font-size:9px;font-weight:500}.intent-feed-head span{font-size:6.5px;color:var(--ui-muted)}
.intent-row { min-height:88px; display:grid; grid-template-columns:1.25fr .85fr 48px; align-items:center; gap:10px; padding:0 13px; border-bottom:1px solid var(--ui-line); transition:background .25s ease; }.intent-row:last-child{border-bottom:0}.intent-row.selected{background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.intent-company { display:flex; align-items:center; gap:9px; min-width:0; }.company-mark{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#1f2124;border:1px solid rgba(255,255,255,.06);font-size:8px;color:#d8dbde}.intent-company strong,.intent-company small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.intent-company strong{font-size:8.5px;font-weight:500}.intent-company small{margin-top:4px;font-size:6px;color:var(--ui-muted)}
.intent-need span,.intent-need strong{display:block}.intent-need span{font-size:5.8px;color:#777d84;margin-bottom:5px;text-transform:uppercase;letter-spacing:.08em}.intent-need strong{font-size:7px;font-weight:500;color:#c8cbcf}
.intent-score { width:42px;height:42px;border-radius:50%;display:grid;place-content:center;text-align:center;border:1px solid rgba(126,204,160,.18);background:rgba(78,149,108,.065)}.intent-score span{font-size:12px;color:#a8dfbf;line-height:1}.intent-score small{font-size:4.8px;color:#6ea386;letter-spacing:.08em;margin-top:3px}
.intent-detail { padding:14px; display:flex; flex-direction:column; }.detail-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--ui-line);font-size:7px;color:#cfd2d5}.detail-head b{font-weight:500;color:#9cbea9;background:rgba(78,149,108,.07);padding:4px 6px;border-radius:999px}.intent-detail h3{margin:14px 0 9px;font-size:8px;font-weight:500}.intent-detail ul{list-style:none;margin:0;padding:0}.intent-detail li{display:flex;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.045)}.intent-detail li i{width:6px;height:6px;border-radius:50%;margin-top:3px;background:#82c99f;box-shadow:0 0 0 3px rgba(130,201,159,.06)}.intent-detail li strong,.intent-detail li span{display:block}.intent-detail li strong{font-size:6.8px;font-weight:500}.intent-detail li span{margin-top:3px;font-size:5.5px;color:var(--ui-muted)}
.intent-inference,.intent-action { margin-top:11px;padding:10px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05)}.intent-inference>span,.intent-action>span{display:block;font-size:5px;letter-spacing:.1em;color:#72777d;margin-bottom:5px}.intent-inference strong,.intent-inference small,.intent-action strong{display:block}.intent-inference strong,.intent-action strong{font-size:7px;font-weight:500}.intent-inference small{margin-top:5px;font-size:5.5px;color:#858a90}.intent-action{margin-top:auto}.intent-action button{margin-top:9px;width:100%;height:27px;border:1px solid var(--ui-line);border-radius:6px;background:rgba(255,255,255,.035);color:#d7dadd;font-size:6px;text-align:left;padding:0 8px}
.intent-status { display:flex;align-items:center;gap:20px;padding:0 16px;border-top:1px solid var(--ui-line);color:#70757b;font-size:6px;letter-spacing:.015em }.intent-status span:before{content:"·";margin-right:7px;color:#7eab91}.intent-status span:first-child:before{content:"";margin:0}
.intent-visual .product-ui { transition:transform .55s var(--ease),border-color .45s ease,box-shadow .55s var(--ease); }.intent-visual:hover .product-ui{transform:translateY(-3px);border-color:rgba(255,255,255,.135);box-shadow:0 40px 100px rgba(0,0,0,.36),0 1px 0 rgba(255,255,255,.035) inset}

@media (max-width:1100px){
  .tour-builder-refined{grid-template-columns:124px minmax(0,1fr)}
  .tour-builder-refined .event-chip{min-width:100px}.tour-kpi-row strong{font-size:14px}.tour-user{display:none!important}
  .intent-section{grid-template-columns:38% 62%}.intent-copy{padding-right:38px}.intent-product{grid-template-columns:58px 1fr}.intent-workspace{grid-template-columns:1fr 210px}
}

@media (max-width:760px){
  .tour-builder-refined{width:100%;max-width:none;height:500px;min-height:500px;grid-template-columns:58px minmax(0,1fr);transform:none;border-radius:13px}
  .tour-builder-refined .tour-rail{padding:13px 7px}.tour-builder-refined .product-mark{font-size:15px;margin:3px 5px 14px}.tour-builder-refined .rail-item{width:38px;height:30px;padding:0;justify-content:center;font-size:0}.tour-builder-refined .rail-item span{font-size:9px}.tour-stage{grid-template-rows:56px 36px minmax(0,1fr) 94px}.tour-titlebar{padding:0 11px}.tour-titlebar>strong{font-size:12px}.tour-title-actions>span{display:none}.tour-title-actions button{height:26px;font-size:6px;padding:0 8px}.tour-controlbar{padding:0 11px}.tour-builder-refined .refined-calendar{margin:0 10px 9px}.tour-builder-refined .event-chip{min-width:70px;max-width:88px;font-size:6px;padding:5px 6px}.tour-builder-refined .event-chip small{font-size:4.5px}.tour-kpi-row{gap:5px;padding:0 10px 10px}.tour-kpi-row article{padding:8px 7px}.tour-kpi-row span{font-size:5px}.tour-kpi-row strong{font-size:10px;margin-top:4px}.tour-kpi-row small,.tour-kpi-row svg{display:none}

  .intent-section{display:block;padding:110px var(--pad) 70px}.intent-copy{padding:0}.intent-copy h2{font-size:46px;max-width:100%}.intent-architecture{margin-top:42px}.intent-architecture strong{font-size:22px}.intent-visual{margin-top:52px;padding:0}.intent-product{width:100%;max-width:none;height:510px;min-height:510px;grid-template-columns:46px minmax(0,1fr);transform:none;border-radius:16px}.intent-rail{padding:12px 6px;gap:9px}.intent-rail .command-logo{width:28px;height:28px}.intent-rail .rail-icon{width:28px;height:28px;font-size:10px}.intent-stage{grid-template-rows:58px 64px minmax(0,1fr) 31px}.intent-toolbar{padding:0 12px}.intent-toolbar strong{font-size:12px}.intent-kpis>div{padding:10px 8px}.intent-kpis span{font-size:5.5px}.intent-kpis strong{font-size:14px}.intent-kpis .live-word{font-size:12px}.intent-workspace{grid-template-columns:1fr;padding:9px}.intent-detail{display:none}.intent-feed-head{height:36px;padding:0 9px}.intent-row{min-height:78px;grid-template-columns:1.2fr .8fr 38px;padding:0 9px;gap:6px}.company-mark{width:24px;height:24px}.intent-company strong{font-size:7px}.intent-company small{font-size:4.8px}.intent-need strong{font-size:5.8px}.intent-score{width:34px;height:34px}.intent-score span{font-size:10px}.intent-status{gap:8px;padding:0 10px;font-size:4.5px}.intent-status span:nth-child(3){display:none}
}

@media (min-width:761px){
  /* Approved editorial frames let the product surface bleed cleanly to the
     right viewport edge. This removes the floating-card feeling introduced
     by the previous product pass. */
  .case-visual { margin-right:calc(var(--pad) * -1); }
  .tour-builder-refined { border-radius:16px 0 0 16px; border-right:0; }
  .intent-visual { margin-right:calc(var(--pad) * -1); }
  .intent-product { border-radius:22px 0 0 22px; border-right:0; }
}

/* Keep the fixed header visually fused to the dark chapter rather than
   introducing a separate grey band once the page has scrolled. */
.site-header.dark.scrolled { background-color:#0f0f0e; border-bottom-color:rgba(255,255,255,.045); }

/* --------------------------------------------------------------------------
   Intent chapter v2 — restored to Meridian's original warm-black system.
   Matches the approved Command Center chapter: almost-black canvas, warm
   graphite surfaces, taupe rules and only tiny status accents.
   -------------------------------------------------------------------------- */
.intent-section {
  grid-template-columns:34% 66%;
  background:
    radial-gradient(88% 98% at 72% 42%, rgba(55,50,45,.20) 0%, rgba(28,26,23,.10) 40%, transparent 66%),
    linear-gradient(180deg,#11100f 0%,#0d0d0c 100%);
}
.intent-section::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.012),transparent 28%,transparent 75%,rgba(255,255,255,.006));
  opacity:.7;
}
.intent-copy { padding-top:28px; padding-right:60px; }
.intent-copy .eyebrow { color:#9d958d; }
.intent-copy h2 { max-width:505px; font-size:clamp(48px,3.7vw,60px); line-height:1.08; font-weight:300; letter-spacing:-.046em; margin-bottom:42px; }
.intent-copy > p:not(.eyebrow) { max-width:430px; color:#aaa39c; font-size:15.5px; line-height:1.72; }
.intent-metric { margin-top:80px; }
.intent-metric strong { color:#f0ede9; }
.intent-copy .dark-link { margin-top:66px; }

.intent-visual { padding-left:0; }
.intent-product-v2 {
  --intent-rule:rgba(225,216,207,.105);
  --intent-rule-strong:rgba(225,216,207,.16);
  --intent-muted:#8e8882;
  --intent-text:#d8d3ce;
  height:min(710px,75svh); min-height:635px;
  display:grid; grid-template-columns:70px minmax(0,1fr);
  border:1px solid var(--intent-rule-strong);
  border-radius:26px;
  background:
    radial-gradient(86% 80% at 78% 4%,rgba(116,101,91,.035),transparent 52%),
    linear-gradient(180deg,#11110f 0%,#0d0e0d 100%);
  box-shadow:0 34px 90px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.018) inset;
  color:var(--intent-text);
  overflow:hidden;
}
.intent-product-v2 .intent-rail { border-right:1px solid var(--intent-rule); background:rgba(255,255,255,.004); gap:14px; padding:18px 11px; }
.intent-product-v2 .command-logo { border-color:var(--intent-rule-strong); color:#dedad5; background:rgba(255,255,255,.008); }
.intent-product-v2 .rail-icon { color:#77716b; background:transparent; border:1px solid transparent; }
.intent-product-v2 .rail-icon.active { color:#dad5d0; background:rgba(255,255,255,.018); border-color:var(--intent-rule); }
.intent-stage-v2 { min-width:0; display:grid; grid-template-rows:92px 200px minmax(0,1fr) 42px; }
.intent-toolbar-v2 { display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:0; }
.intent-toolbar-v2 strong { display:block; font-size:20px; font-weight:400; letter-spacing:-.035em; color:#e5e1dd; }
.intent-toolbar-v2 div > span { display:block; margin-top:5px; color:#8d8781; font-size:9px; letter-spacing:-.006em; }
.intent-system-select { height:40px; padding:0 13px; display:flex; align-items:center; gap:22px; color:#aca59e; background:rgba(255,255,255,.008); border:1px solid var(--intent-rule); border-radius:7px; font-size:8px; }

.intent-flow { display:grid; grid-template-columns:repeat(5,minmax(0,1fr) 14px); grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr); gap:0; align-items:stretch; padding:0 24px 17px; }
.intent-flow > i { display:grid; place-items:center; color:#837c75; font-style:normal; font-size:25px; font-weight:200; }
.intent-flow article { position:relative; min-width:0; padding:18px 15px 13px; border:1px solid var(--intent-rule); border-radius:9px; background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004)); }
.intent-flow article.active { border-color:rgba(200,185,170,.28); box-shadow:0 0 0 1px rgba(200,185,170,.035) inset; background:radial-gradient(80% 90% at 50% 12%,rgba(122,105,92,.055),transparent 64%),rgba(255,255,255,.006); }
.flow-icon { width:31px;height:31px;border:1px solid var(--intent-rule-strong);border-radius:50%;display:grid;place-items:center;color:#c9c2bb;font-size:13px;margin-bottom:17px; }
.intent-flow strong { display:block; color:#ded9d4; font-size:10px; font-weight:450; letter-spacing:-.018em; }
.intent-flow p { min-height:45px; margin:8px 0 13px; color:#8f8983; font-size:7px; line-height:1.55; letter-spacing:0; }
.intent-flow small { display:flex;align-items:center;gap:6px;color:#8d8781;font-size:6.5px; }
.dot { width:5px;height:5px;border-radius:50%;display:inline-block; }
.dot.detecting { background:#9a8168; box-shadow:0 0 0 4px rgba(154,129,104,.055); }
.dot.ready { background:#738474; box-shadow:0 0 0 4px rgba(115,132,116,.05); }
.dot.quiet { background:#5f5c57; }

.intent-priority-table { margin:0 24px; border:1px solid var(--intent-rule); border-radius:9px; overflow:hidden; background:rgba(255,255,255,.003); align-self:stretch; min-height:0; }
.priority-head { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 13px; border-bottom:1px solid var(--intent-rule); }
.priority-head > div { display:flex;align-items:center;gap:8px; }.priority-head strong{font-size:10px;font-weight:450;color:#dcd7d2}.priority-head > div span{width:18px;height:18px;border:1px solid var(--intent-rule);border-radius:5px;display:grid;place-items:center;font-size:6px;color:#918a83}.priority-head button{height:29px;padding:0 10px;display:flex;align-items:center;gap:18px;background:rgba(255,255,255,.004);border:1px solid var(--intent-rule);border-radius:6px;color:#9e9790;font-size:6.5px}
.priority-cols { min-height:35px; display:grid; grid-template-columns:1.8fr .8fr .72fr .62fr 1fr .72fr; align-items:center; gap:10px; padding:0 13px; border-bottom:1px solid rgba(225,216,207,.075); color:#9d9690; font-size:6.4px; }
.priority-cols:last-child { border-bottom:0; }.priority-labels{min-height:30px;color:#77716b;font-size:5.8px}.priority-cols strong{font-weight:400;color:#c9c4bf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.priority-cols>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.confidence { display:flex;align-items:center;gap:7px; }.confidence i{display:block;width:28px;height:1px;background:rgba(255,255,255,.10);position:relative}.confidence i::after{content:"";position:absolute;left:0;top:0;height:1px;width:var(--w);background:#b9b1a9}
.intent-pill { justify-self:start; font-size:5.8px; font-weight:400; padding:4px 8px; border-radius:999px; white-space:nowrap; border:1px solid rgba(255,255,255,.025); }.ready-pill{color:#abb7aa;background:rgba(104,122,105,.09)}.progress-pill{color:#b9a187;background:rgba(132,104,78,.09)}.neutral-pill{color:#918d88;background:rgba(255,255,255,.028)}
.intent-status-v2 { justify-content:space-between; padding:0 24px; border-top:0; color:#726d67; font-size:6.2px; }.intent-status-v2 span:before{display:none!important}.intent-status-v2 span:first-child{color:#827b74}
.intent-status-v2 span:first-child::first-letter{color:#b49b80}

.intent-product-v2:hover { border-color:rgba(225,216,207,.19)!important; box-shadow:0 40px 100px rgba(0,0,0,.32),0 1px 0 rgba(255,255,255,.02) inset!important; }

@media (max-width:1100px){
  .intent-product-v2{grid-template-columns:58px 1fr}.intent-stage-v2{grid-template-rows:78px 174px minmax(0,1fr) 36px}.intent-toolbar-v2{padding:0 16px}.intent-flow{padding:0 16px 13px}.intent-flow article{padding:14px 10px 10px}.intent-priority-table{margin:0 16px}.priority-cols{grid-template-columns:1.55fr .7fr .7fr .55fr .9fr .7fr;padding:0 10px}.intent-status-v2{padding:0 16px}
}

@media (max-width:760px){
  .intent-copy > p:not(.eyebrow){font-size:14px}.intent-metric{margin-top:44px}.intent-metric strong{font-size:43px}.intent-copy .dark-link{margin-top:38px}
  .intent-product-v2{height:530px;min-height:530px;grid-template-columns:44px minmax(0,1fr);border-radius:18px}.intent-product-v2 .intent-rail{padding:11px 5px;gap:7px}.intent-product-v2 .command-logo,.intent-product-v2 .rail-icon{width:28px;height:28px}.intent-stage-v2{grid-template-rows:62px 148px minmax(0,1fr) 30px}.intent-toolbar-v2{padding:0 10px}.intent-toolbar-v2 strong{font-size:13px}.intent-toolbar-v2 div>span{font-size:5.5px}.intent-system-select{height:28px;padding:0 7px;font-size:5.5px;gap:9px}.intent-flow{padding:0 9px 9px;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.intent-flow>i{display:none}.intent-flow article{padding:9px 6px 7px;border-radius:6px}.flow-icon{width:21px;height:21px;font-size:8px;margin-bottom:8px}.intent-flow strong{font-size:6px}.intent-flow p{min-height:34px;font-size:4.2px;margin:5px 0 6px}.intent-flow small{font-size:4px;gap:3px}.dot{width:3px;height:3px}.intent-priority-table{margin:0 9px}.priority-head{height:35px;padding:0 8px}.priority-head strong{font-size:6.5px}.priority-head button{height:22px;font-size:4.5px}.priority-cols{min-height:30px;grid-template-columns:1.9fr .7fr .65fr .7fr;padding:0 7px;gap:5px;font-size:4.5px}.priority-labels{min-height:23px;font-size:4px}.priority-cols>span:nth-child(4),.priority-labels>span:nth-child(4),.priority-cols>span:nth-child(5),.priority-labels>span:nth-child(5){display:none}.intent-pill{font-size:4px;padding:3px 5px}.confidence i{display:none}.intent-status-v2{padding:0 9px;font-size:4.2px}.intent-status-v2 span:last-child{display:none}
}

@media (min-width:761px){
  .intent-product-v2{border-radius:26px 0 0 26px;border-right:0;}
}

/* Final Intent composition tuning against the approved dark reference. */
@media (min-width:761px){
  .intent-copy{padding-top:64px;}
  .intent-copy h2{font-size:clamp(43px,3.15vw,48px);max-width:470px;line-height:1.12;letter-spacing:-.043em;}
  .intent-visual{align-self:start;margin-top:-18px;margin-right:calc(var(--pad) * -1);}
  .intent-product-v2{width:calc(100% + var(--pad));height:min(790px,81svh);min-height:700px;border-radius:26px 0 0 26px;border-right:0;}
  .intent-stage-v2{grid-template-rows:92px 205px minmax(0,1fr) 42px;}
}
@media (min-width:761px){
  .intent-product-v2{width:calc(100% + var(--pad) - 24px);}
}


/* ===== Intent systems custom icon refinement — 2026-08-07 ===== */
.intent-copy h2{max-width:460px;}
.intent-copy > p:not(.eyebrow){max-width:470px;}
.intent-large-line{
  margin-top:54px;
  color:#ddd5cd;
  font-size:clamp(28px,2.2vw,40px);
  line-height:1.1;
  letter-spacing:-.04em;
  font-weight:300;
}
.intent-large-line span{color:#9d958d;margin:0 .18em;}
.intent-copy .dark-link{margin-top:28px;}
.intent-product-v2{background:radial-gradient(90% 80% at 78% 6%,rgba(255,255,255,.025),transparent 52%),linear-gradient(180deg,#10100f 0%,#0b0b0b 100%);}
.intent-product-v2 .intent-rail{gap:10px;padding:18px 10px;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));}
.icon-svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;}
.icon-fill{fill:currentColor;stroke:none;}
.intent-product-v2 .rail-icon{display:grid;place-items:center;font-size:0;}
.intent-product-v2 .rail-icon .icon-svg{width:16px;height:16px;}
.intent-product-v2 .flow-icon.custom{font-size:0;display:grid;place-items:center;}
.intent-product-v2 .flow-icon.custom .icon-svg{width:22px;height:22px;}
.intent-flow article{padding:17px 14px 14px;}
.intent-flow strong{font-size:11px;}
.intent-flow p{font-size:7.5px;line-height:1.6;min-height:48px;}
.intent-flow small{display:none;}
.intent-systems-table .priority-cols{grid-template-columns:1.15fr .82fr 1.15fr 1.4fr .72fr .72fr;font-size:6.6px;}
.intent-systems-table .priority-cols strong{white-space:normal;line-height:1.35;}
.intent-systems-table .priority-cols > span:nth-child(4){white-space:normal;line-height:1.38;}
.intent-status-v2{border-top:1px solid rgba(225,216,207,.075);}
.intent-status-v2 span:last-child{color:#bdb5ad;}
@media (max-width:760px){
  .intent-large-line{margin-top:26px;font-size:23px;}
  .intent-product-v2 .flow-icon.custom .icon-svg{width:16px;height:16px;}
  .intent-systems-table .priority-cols{grid-template-columns:1.15fr .8fr 1.2fr .7fr;font-size:4.45px;}
  .intent-systems-table .priority-cols > span:nth-child(4),
  .intent-systems-table .priority-labels > span:nth-child(4),
  .intent-systems-table .priority-cols > span:nth-child(5),
  .intent-systems-table .priority-labels > span:nth-child(5){display:none;}
}

/* ==================================================================
   FOOTER COMPACTION — approved Meridian reference
   Keeps the original dark palette but removes the oversized 100svh feel.
   ================================================================== */
@media (min-width:761px) {
  .site-footer {
    min-height: 650px;
    padding: 58px var(--pad) 28px;
  }

  .footer-top {
    grid-template-columns: 1.05fr .82fr .95fr 1.38fr;
    gap: 54px;
    padding-bottom: 42px;
  }

  .footer-brand {
    font-size: 32px;
    line-height: 1;
  }

  .footer-column p,
  .footer-project p {
    margin: 5px 0 24px;
    font-size: 9.5px;
    letter-spacing: .19em;
  }

  .footer-column {
    gap: 13px;
  }

  .footer-column a {
    font-size: 14.5px;
    line-height: 1.25;
  }

  .footer-project-button {
    min-height: 62px;
    max-width: 360px;
    padding: 0 24px;
    font-size: 15px;
  }

  .footer-email {
    margin-top: 20px;
    font-size: 13.5px;
  }

  .footer-trust {
    height: 76px;
  }

  .footer-trust span,
  .footer-trust a {
    font-size: 12.5px;
  }

  .footer-legal {
    margin-top: 24px;
    font-size: 12px;
  }

  .footer-wordmark {
    left: var(--pad);
    right: auto;
    bottom: -76px;
    font-size: clamp(172px, 18.5vw, 265px);
    color: rgba(255,255,255,.06);
    line-height: .78;
    transform: none;
  }
}

@media (max-width:760px) {
  .site-footer {
    min-height: auto;
    padding: 58px var(--pad) 0;
  }

  .footer-top {
    gap: 38px 24px;
    padding-bottom: 42px;
  }

  .footer-brand {
    font-size: 29px;
  }

  .footer-column p,
  .footer-project p {
    margin-bottom: 20px;
  }

  .footer-column {
    gap: 12px;
  }

  .footer-column a {
    font-size: 14px;
  }

  .footer-project-button {
    min-height: 58px;
    font-size: 14px;
  }

  .footer-trust {
    padding: 28px 0;
    gap: 16px;
  }

  .footer-trust span,
  .footer-trust a {
    font-size: 12px;
  }

  .footer-legal {
    margin-top: 22px;
    padding-bottom: 125px;
    font-size: 11.5px;
  }

  .footer-wordmark {
    font-size: 100px;
    bottom: -34px;
    left: var(--pad);
    right: auto;
    color: rgba(255,255,255,.055);
    transform: none;
  }
}

/* ==================================================================
   CONTINUOUS ARCHITECTURAL CROSSHAIR MOTION — 2026-08-08
   Crosshairs stay mechanically fixed, but remain subtly alive while their
   chapter is in view. Motion pauses off-screen and is disabled for users who
   prefer reduced motion.
   ================================================================== */
.crosshair-live::before,
.crosshair-live::after {
  will-change: filter, box-shadow;
}

/* The hero retains its one-time draw-in, then settles into a slow tonal pulse. */
.crosshair-hero.crosshair-live.is-active::before {
  animation:
    heroCrossLineX 1.02s .42s cubic-bezier(.18,.76,.22,1) both,
    crosshairLineAmbient 7.8s 1.65s ease-in-out infinite;
}
.crosshair-hero.crosshair-live.is-active::after {
  animation:
    heroCrossLineY 1.12s .50s cubic-bezier(.18,.76,.22,1) both,
    crosshairLineAmbient 8.6s 1.85s ease-in-out infinite reverse;
}
.crosshair-hero.crosshair-live.is-active span {
  animation:
    heroCrossNodeIn .48s .84s cubic-bezier(.16,.84,.26,1) both,
    crosshairNodeAmbient 6.4s 1.45s ease-in-out infinite;
}
.crosshair-hero.crosshair-live span::after {
  animation:none;
}
.crosshair-hero.crosshair-live.is-active span::after {
  animation:crosshairHaloAmbient 6.4s 1.55s cubic-bezier(.2,.72,.2,1) infinite;
}

/* Later architectural fields draw once on first view, then breathe while they
   remain visible. The line geometry never shifts. */
.section-crosshair.is-visible.is-active::before {
  animation:
    sectionLineX .9s .04s cubic-bezier(.18,.76,.22,1) forwards,
    crosshairLineAmbient 8.2s 1.12s ease-in-out infinite !important;
}
.section-crosshair.is-visible.is-active::after {
  animation:
    sectionLineY 1s .12s cubic-bezier(.18,.76,.22,1) forwards,
    crosshairLineAmbient 9s 1.28s ease-in-out infinite reverse !important;
}
.section-crosshair.is-visible.is-active span {
  animation:
    sectionNodeIn .42s .56s cubic-bezier(.16,.84,.26,1) forwards,
    crosshairNodeAmbientDark 6.8s 1.15s ease-in-out infinite !important;
}
.section-crosshair span::after {
  content:"";
  position:absolute;
  inset:-11px;
  border-radius:50%;
  border:1px solid rgba(45,40,37,.07);
  opacity:0;
  transform:scale(.55);
  pointer-events:none;
}
.section-crosshair.is-visible.is-active span::after {
  animation:crosshairRingAmbient 6.8s 1.2s cubic-bezier(.2,.72,.2,1) infinite;
}

@keyframes crosshairLineAmbient {
  0%,100% {
    filter:brightness(1);
    box-shadow:0 0 0 rgba(45,40,37,0);
  }
  45% {
    filter:brightness(1.11);
    box-shadow:0 0 5px rgba(45,40,37,.028);
  }
  62% {
    filter:brightness(1.04);
    box-shadow:0 0 2px rgba(45,40,37,.014);
  }
}
@keyframes crosshairNodeAmbient {
  0%,100% { box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 0 0 rgba(15,14,13,0); }
  50% { box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 0 7px rgba(15,14,13,.024); }
}
@keyframes crosshairNodeAmbientDark {
  0%,100% { box-shadow:0 0 0 0 rgba(45,40,37,0); }
  50% { box-shadow:0 0 0 6px rgba(45,40,37,.025); }
}
@keyframes crosshairHaloAmbient {
  0%,22%,100% { opacity:0; transform:scale(.62); }
  42% { opacity:.62; transform:scale(.92); }
  66% { opacity:0; transform:scale(1.34); }
}
@keyframes crosshairRingAmbient {
  0%,28%,100% { opacity:0; transform:scale(.58); }
  48% { opacity:.75; transform:scale(.92); }
  72% { opacity:0; transform:scale(1.34); }
}

@media (max-width:760px) {
  /* Keep continuous motion even quieter on touch devices. */
  .crosshair-hero.crosshair-live.is-active::before,
  .crosshair-hero.crosshair-live.is-active::after,
  .section-crosshair.is-visible.is-active::before,
  .section-crosshair.is-visible.is-active::after {
    animation-duration:1.02s, 10.5s !important;
  }
  .crosshair-hero.crosshair-live.is-active span::after,
  .section-crosshair.is-visible.is-active span::after {
    opacity:.72;
  }
}

@media (prefers-reduced-motion:reduce) {
  .crosshair-live::before,
  .crosshair-live::after,
  .crosshair-live span,
  .crosshair-live span::after {
    animation:none !important;
  }
  .crosshair-live::before,
  .crosshair-live::after,
  .crosshair-live span {
    opacity:1 !important;
  }
  .crosshair-live span::after { display:none !important; }
}

/* ==================================================================
   CROSS-AXIS NODE DRIFT — option B, 2026-08-08
   The architectural rules remain fixed. The node itself travels through the
   intersection on a restrained up → centre → right → centre → down → centre
   → left → centre path while the crosshair is in view.
   ================================================================== */
.crosshair-live {
  --crosshair-node-travel: 12px;
}

/* Preserve the one-time line draw and quiet line pulse; replace the previous
   stationary node breathing with real positional movement. */
.crosshair-hero.crosshair-live.is-active span {
  animation:
    crosshairNodeAxisDrift 9.6s 1.15s cubic-bezier(.45,0,.55,1) infinite !important;
  will-change: transform;
}

.section-crosshair.is-visible.is-active span {
  animation:
    crosshairNodeAxisDriftSection 10.4s .72s cubic-bezier(.45,0,.55,1) infinite !important;
  will-change: transform;
}

/* Hero node is positioned with translate(-50%,-50%). */
@keyframes crosshairNodeAxisDrift {
  0%, 100% { opacity:1; transform:translate(-50%, -50%); }
  12.5%     { opacity:1; transform:translate(-50%, calc(-50% - var(--crosshair-node-travel))); }
  25%       { opacity:1; transform:translate(-50%, -50%); }
  37.5%     { opacity:1; transform:translate(calc(-50% + var(--crosshair-node-travel)), -50%); }
  50%       { opacity:1; transform:translate(-50%, -50%); }
  62.5%     { opacity:1; transform:translate(-50%, calc(-50% + var(--crosshair-node-travel))); }
  75%       { opacity:1; transform:translate(-50%, -50%); }
  87.5%     { opacity:1; transform:translate(calc(-50% - var(--crosshair-node-travel)), -50%); }
}

/* Later crosshairs were authored from top/left offsets rather than a centred
   translate, so the same path is expressed from transform:none. */
@keyframes crosshairNodeAxisDriftSection {
  0%, 100% { opacity:1; transform:translate(0, 0); }
  12.5%     { opacity:1; transform:translate(0, calc(-1 * var(--crosshair-node-travel))); }
  25%       { opacity:1; transform:translate(0, 0); }
  37.5%     { opacity:1; transform:translate(var(--crosshair-node-travel), 0); }
  50%       { opacity:1; transform:translate(0, 0); }
  62.5%     { opacity:1; transform:translate(0, var(--crosshair-node-travel)); }
  75%       { opacity:1; transform:translate(0, 0); }
  87.5%     { opacity:1; transform:translate(calc(-1 * var(--crosshair-node-travel)), 0); }
}

/* Halo/ring stays attached to the travelling point, rather than pulsing at the
   fixed intersection. */
.crosshair-hero.crosshair-live.is-active span::after,
.section-crosshair.is-visible.is-active span::after {
  animation: crosshairMovingHalo 9.6s 1.15s ease-in-out infinite !important;
}
@keyframes crosshairMovingHalo {
  0%, 100% { opacity:.08; transform:scale(.72); }
  12.5%, 37.5%, 62.5%, 87.5% { opacity:.34; transform:scale(1); }
  25%, 50%, 75% { opacity:.12; transform:scale(.78); }
}

@media (max-width:760px) {
  .crosshair-live { --crosshair-node-travel: 8px; }
  .crosshair-hero.crosshair-live.is-active span,
  .section-crosshair.is-visible.is-active span {
    animation-duration: 11.2s !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .crosshair-hero.crosshair-live span,
  .section-crosshair span {
    animation:none !important;
  }
  .crosshair-hero.crosshair-live span {
    transform:translate(-50%,-50%) !important;
  }
  .section-crosshair span {
    transform:none !important;
  }
}


/* ==================================================================
   LIVE RANDOM 2D CROSSHAIR FIELD — 2026-08-08
   Large, smooth 2D movement driven by requestAnimationFrame in script.js.
   The point wanders broadly and the two architectural rules follow it with
   slight lag, so the entire targeting field is visibly alive rather than just
   pulsing around a fixed intersection.
   ================================================================== */
.crosshair-live {
  --cross-node-x: 0px;
  --cross-node-y: 0px;
  --cross-line-x: 0px;
  --cross-line-y: 0px;
  --cross-line-scale-x: 1;
  --cross-line-scale-y: 1;
}

.crosshair-live.is-active::before,
.section-crosshair.is-visible.is-active::before {
  animation: none !important;
  opacity: 1 !important;
  transform: translate3d(0, var(--cross-line-y), 0) scaleX(var(--cross-line-scale-x)) !important;
  will-change: transform;
}

.crosshair-live.is-active::after,
.section-crosshair.is-visible.is-active::after {
  animation: none !important;
  opacity: 1 !important;
  transform: translate3d(var(--cross-line-x), 0, 0) scaleY(var(--cross-line-scale-y)) !important;
  will-change: transform;
}

.crosshair-hero.crosshair-live.is-active span {
  animation: none !important;
  opacity: 1 !important;
  transform: translate3d(
    calc(-50% + var(--cross-node-x)),
    calc(-50% + var(--cross-node-y)),
    0
  ) !important;
  will-change: transform;
}

.section-crosshair.is-visible.is-active span {
  animation: none !important;
  opacity: 1 !important;
  transform: translate3d(var(--cross-node-x), var(--cross-node-y), 0) !important;
  will-change: transform;
}

/* The halo remains attached to the travelling node. Its breathing is deliberately
   secondary to the much larger geometric movement. */
.crosshair-hero.crosshair-live.is-active span::after,
.section-crosshair.is-visible.is-active span::after {
  animation: crosshairTrackingHalo 3.9s ease-in-out infinite !important;
}

@keyframes crosshairTrackingHalo {
  0%,100% { opacity:.08; transform:scale(.74); }
  48% { opacity:.30; transform:scale(1.08); }
  70% { opacity:.14; transform:scale(.88); }
}

@media (max-width:760px) {
  /* Still clearly moving on mobile, but bounded so the architecture does not
     cross too deeply into the text column. */
  .crosshair-hero.crosshair-live.is-active span::after,
  .section-crosshair.is-visible.is-active span::after {
    opacity:.72;
  }
}

@media (prefers-reduced-motion:reduce) {
  .crosshair-live::before,
  .crosshair-live::after {
    transform:none !important;
  }
  .crosshair-hero.crosshair-live span {
    transform:translate(-50%,-50%) !important;
  }
  .section-crosshair span {
    transform:none !important;
  }
}


/* ===== Enterprise trust, accessibility & legal layer — 2026-08-08 ===== */
html { scroll-padding-top: 92px; }
body { overflow-x: clip; }
.skip-link {
  position: fixed; z-index: 10000; left: 18px; top: 12px;
  transform: translateY(-160%); padding: 11px 15px; border: 1px solid #2c2926;
  background: #ffffff; color: #171615; font-size: 13px; line-height: 1;
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }
:where(a,button,[role="button"],input,select,textarea):focus-visible {
  outline: 2px solid currentColor; outline-offset: 4px;
}
.menu-button { min-width: 44px; min-height: 44px; align-items: center; }
.mobile-panel a { min-height: 44px; display:flex; align-items:center; }
body.menu-locked { overflow: hidden; }
.legal-identity { white-space: normal; }

/* Trust/legal pages */
.legal-page-body { background: var(--paper); color: var(--ink); min-height: 100vh; }
.legal-header { background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(41,37,34,.10); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.legal-main { width: min(1180px, calc(100% - 14vw)); margin: 0 auto; padding: 168px 0 112px; }
.legal-main:focus { outline: none; }
.legal-hero { display:grid; grid-template-columns: minmax(0,1.18fr) minmax(300px,.72fr); gap: 8vw; padding: 48px 0 82px; border-bottom:1px solid var(--rule); }
.legal-hero .eyebrow { grid-column:1/-1; margin:0 0 14px; }
.legal-hero h1 { margin:0; font-size:clamp(58px,6.4vw,96px); line-height:.98; letter-spacing:-.055em; font-weight:300; max-width:780px; }
.legal-hero > p:not(.eyebrow) { margin:8px 0 0; color:#5b5550; font-size:17px; line-height:1.66; max-width:500px; align-self:end; }
.legal-updated { grid-column:2; color:#8c837c; font-size:12px; margin-top:16px; }
.legal-content { max-width:850px; margin:0 auto; padding:76px 0 22px; }
.legal-content section { padding:0 0 58px; margin:0 0 58px; border-bottom:1px solid var(--rule); }
.legal-content section:last-child { border-bottom:0; margin-bottom:0; }
.legal-content h2 { font-size:28px; line-height:1.2; letter-spacing:-.03em; font-weight:400; margin:0 0 20px; }
.legal-content h3 { font-size:19px; line-height:1.25; letter-spacing:-.02em; font-weight:450; margin:0 0 10px; }
.legal-content p, .legal-content li { color:#4f4a46; font-size:15.5px; line-height:1.75; }
.legal-content p { margin:0 0 17px; }
.legal-content ul { padding-left:20px; margin:0; }
.legal-content li + li { margin-top:8px; }
.legal-content a { border-bottom:1px solid rgba(31,29,27,.32); }
.legal-content a.primary-button { border-bottom:0; color:#fff; }
.legal-table { border-top:1px solid var(--rule); margin-top:28px; }
.legal-table > div { display:grid; grid-template-columns:1fr 1fr; gap:28px; border-bottom:1px solid var(--rule); padding:17px 0; }
.legal-table > div:first-child { color:#8b8179; text-transform:uppercase; font-size:10px; letter-spacing:.14em; }
.legal-table span { color:#4f4a46; font-size:14px; line-height:1.55; }
.trust-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:30px; }
.trust-grid article { background:var(--paper); padding:30px; min-height:220px; }
.trust-grid article > span { display:block; color:#a4988f; font-size:11px; letter-spacing:.12em; margin-bottom:42px; }
.trust-grid p { font-size:14.5px; line-height:1.65; margin:0; }
.company-facts { border-top:1px solid var(--rule); }
.company-facts > div { display:grid; grid-template-columns:210px 1fr; gap:28px; padding:17px 0; border-bottom:1px solid var(--rule); }
.company-facts span { color:#8b8179; font-size:12px; }
.company-facts strong { font-size:15px; font-weight:450; }
.address-notice { background:rgba(178,165,153,.07); padding:34px !important; border:1px solid rgba(106,96,88,.18) !important; }
.legal-note { font-size:13px !important; color:#786f68 !important; }
.inline-legal-cta { display:inline-flex; margin-top:16px; }
.legal-footer { background:#101110; color:#f1eeea; padding:58px 7vw 34px; display:grid; grid-template-columns:1.05fr 1.35fr; gap:50px; }
.legal-footer .footer-brand { color:#fff; text-decoration:none; border:0; }
.legal-footer > div > p { color:#8f8983; margin:12px 0 0; font-size:13px; }
.legal-footer nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 24px; align-content:start; }
.legal-footer nav a { color:#d8d2cc; font-size:13px; }
.legal-footer-meta { grid-column:1/-1; border-top:1px solid rgba(255,255,255,.13); padding-top:24px; margin:14px 0 0; color:#8f8983; font-size:12px; line-height:1.6; }
.legal-footer-meta a { color:#cfc9c3; }

@media (max-width:1050px) {
  .legal-main { width:min(100% - 10vw, 920px); }
  .legal-hero { grid-template-columns:1fr; gap:24px; }
  .legal-hero .eyebrow, .legal-updated { grid-column:auto; }
  .legal-updated { margin-top:0; }
}

@media (max-width:760px) {
  html { scroll-padding-top: 72px; }
  .site-header { padding-left:20px; padding-right:14px; }
  .consultation-button { min-height:44px; }
  .mobile-panel { inset:72px 0 0; height:calc(100dvh - 72px); overflow:auto; padding:24px 22px 42px; gap:8px; }
  .mobile-panel a { font-size:18px; border-bottom:1px solid rgba(47,43,40,.10); }
  .mobile-panel a:last-child { margin-top:12px; font-size:14px; border-bottom:0; }
  .desktop-break { display:none; }
  .hero-body { max-width:100%; }
  .case-visual, .dark-visual, .capability-image-wrap { max-width:100%; overflow:hidden; }
  .product-ui { max-width:100%; }
  .legal-main { width:calc(100% - 40px); padding:112px 0 72px; }
  .legal-hero { padding:38px 0 54px; }
  .legal-hero h1 { font-size:clamp(46px,14vw,67px); line-height:1.01; }
  .legal-hero > p:not(.eyebrow) { font-size:15.5px; }
  .legal-content { padding-top:52px; }
  .legal-content section { margin-bottom:42px; padding-bottom:42px; }
  .legal-content h2 { font-size:24px; }
  .legal-content p, .legal-content li { font-size:15px; line-height:1.7; }
  .legal-table > div { grid-template-columns:1fr; gap:8px; }
  .legal-table > div:first-child { display:none; }
  .trust-grid { grid-template-columns:1fr; }
  .trust-grid article { min-height:0; padding:26px; }
  .trust-grid article > span { margin-bottom:28px; }
  .company-facts > div { grid-template-columns:1fr; gap:5px; }
  .address-notice { padding:26px !important; margin-left:-8px !important; margin-right:-8px !important; }
  .legal-footer { grid-template-columns:1fr; padding:46px 20px 28px; gap:34px; }
  .legal-footer nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .legal-footer-meta { grid-column:auto; }
  .footer-legal { line-height:1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition:none; }
}

/* Mobile simplification — crosshair fields are intentionally desktop/tablet only. */
@media (max-width: 760px) {
  .crosshair,
  .section-crosshair {
    display: none !important;
  }
}


/* ==================================================================
   HERO SYSTEM — 2026-08-08
   Replaces the crosshair hero with a restrained architectural system.
   ================================================================== */
.brand-lockup {
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:27px;
  line-height:1;
  letter-spacing:-.045em;
}
.brand-mark {
  width:21px;
  height:25px;
  flex:none;
  overflow:visible;
}
.brand-mark path,
.hero-system-mark path {
  /* The real Meridian mark: rounded chevrons drawn on a 100x120 grid, at the
     lighter weight Harry picked — the brand asset's full weight reads as a blob
     beside the wordmark at header size. */
  fill:none;
  stroke:currentColor;
  stroke-width:12;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.hero-system {
  min-height:100svh;
  padding:var(--header-h) var(--pad) 0;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 69% 48%, rgba(255,255,255,.78) 0, rgba(255,255,255,.23) 32%, transparent 60%),
    radial-gradient(circle at 35% 48%, #ffffff 0, var(--paper) 62%, var(--paper-2) 100%);
}
.hero-system .hero-copy {
  position:relative;
  z-index:4;
  width:55.5%;
  max-width:835px;
  margin:8px 0 0;
  transform:none;
}
.hero-system .hero-eyebrow {
  margin-bottom:42px;
  font-size:10px;
  letter-spacing:.19em;
  white-space:normal;
  line-height:1.5;
}
.hero-system .hero-system-title {
  margin:0;
  max-width:800px;
  font-size:clamp(58px,5.28vw,78px);
  line-height:1.115;
  letter-spacing:-.048em;
  font-weight:400;
}
.hero-system .hero-system-title > span {
  display:block;
  white-space:nowrap;
}
.hero-system .hero-system-title .muted {
  color:#9a9088;
}
.hero-system .hero-body {
  margin:42px 0 0;
  max-width:620px;
  color:#4b4743;
  font-size:18.5px;
  line-height:1.55;
  letter-spacing:-.018em;
}
.hero-system .hero-ctas {
  margin-top:44px;
  display:flex;
  align-items:center;
  gap:20px;
}
.hero-system .primary-button,
.hero-system .secondary-button {
  height:58px;
  min-width:238px;
  padding:0 26px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:38px;
  border:1px solid rgba(16,15,14,.22);
  font-size:15px;
  letter-spacing:-.012em;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.hero-system .primary-button {
  background:#0a0a09;
  color:#fff;
  border-color:#0a0a09;
}
.hero-system .secondary-button {
  background:rgba(255,255,255,.13);
  color:var(--ink);
}
.hero-system .primary-button:hover,
.hero-system .secondary-button:hover {
  transform:translateY(-1px);
}
.hero-system .secondary-button:hover {
  background:rgba(255,255,255,.44);
  border-color:rgba(16,15,14,.34);
}

.hero-system-field {
  --field-x:0px;
  --field-y:0px;
  position:absolute;
  z-index:2;
  top:var(--header-h);
  right:0;
  bottom:0;
  left:50%;
  overflow:hidden;
  opacity:.98;
  transform:translate3d(var(--hero-field-x,0px),var(--hero-field-y,0px),0);
  transition:opacity .3s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.30) 13%,#000 34%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.30) 13%,#000 34%,#000 100%);
}
.hero-system-svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.system-rule {
  stroke:rgba(58,52,48,.155);
  stroke-width:1.05;
  vector-effect:non-scaling-stroke;
  shape-rendering:geometricPrecision;
}
.system-rule-faint { stroke:rgba(58,52,48,.09); }
.system-rule-dash {
  stroke:rgba(58,52,48,.12);
  stroke-dasharray:4 5;
}
.system-node {
  fill:var(--paper);
  stroke:rgba(67,60,55,.25);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.system-node-ring { fill:rgba(255,255,255,.92); }
.hero-system-mark {
  position:absolute;
  z-index:4;
  left:52.2%;
  top:52%;
  width:66px;
  height:66px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  background:rgba(249,246,243,.94);
  border:1px solid rgba(67,60,55,.22);
  box-shadow:0 10px 36px rgba(63,55,48,.035);
}
.hero-system-mark svg {
  width:26px;
  height:29px;
  color:#11110f;
}
.hero-system-glow {
  position:absolute;
  z-index:1;
  left:52%;
  top:52%;
  width:430px;
  height:430px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(circle,rgba(188,173,161,.055) 0,rgba(188,173,161,.020) 32%,transparent 69%);
}

/* The former hero field is intentionally retired. Other chapter crosshairs remain. */
.hero-system .architectural-field,
.hero-system > .scroll-cue,
.hero-system > .hero-plane,
.hero-system .crosshair { display:none !important; }

@media (max-width:1180px) {
  .hero-system .hero-copy { width:59%; }
  .hero-system .hero-system-title { font-size:clamp(54px,5.6vw,70px); }
  .hero-system-field { left:53%; opacity:.84; }
  .hero-system-mark { width:74px; height:74px; }
}

@media (max-width:900px) {
  .hero-system .hero-copy { width:67%; }
  .hero-system .hero-system-title > span { white-space:normal; }
  .hero-system-field { left:61%; opacity:.54; }
}

@media (max-width:760px) {
  .brand-lockup { gap:9px; font-size:26px; }
  .brand-mark { width:18px; height:21px; }
  .hero-system {
    min-height:100svh;
    padding:105px 20px 62px;
    display:flex;
    align-items:center;
    background:radial-gradient(circle at 40% 36%,#fbf8f5 0,var(--paper) 69%,var(--paper-2) 100%);
  }
  .hero-system .hero-copy {
    width:100%;
    max-width:none;
    margin:0;
    transform:none;
  }
  .hero-system .hero-eyebrow {
    margin-bottom:30px;
    font-size:8px;
    line-height:1.55;
    letter-spacing:.15em;
    white-space:normal;
  }
  .hero-system .hero-eyebrow span { margin:0 6px; }
  .hero-system .hero-system-title {
    max-width:100%;
    font-size:clamp(46px,13.2vw,57px);
    line-height:1.055;
    letter-spacing:-.052em;
  }
  .hero-system .hero-system-title > span { white-space:normal; }
  .hero-system .hero-body {
    margin-top:31px;
    max-width:100%;
    font-size:16px;
    line-height:1.5;
  }
  .hero-system .hero-ctas {
    margin-top:34px;
    gap:12px;
    flex-direction:column;
    align-items:stretch;
  }
  .hero-system .primary-button,
  .hero-system .secondary-button {
    width:100%;
    min-width:0;
    height:56px;
    padding:0 20px;
    font-size:14px;
  }
  .hero-system-field { display:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-system-field { transform:none !important; }
}

/* ==================================================================
   HERO WHITE PRECISION PASS — 2026-08-08
   Pure-white enterprise surface with stronger architectural contrast.
   ================================================================== */
.site-header.hero-view {
  background:linear-gradient(to bottom,rgba(255,255,255,.985),rgba(255,255,255,.90) 72%,rgba(255,255,255,0));
}
.hero-system {
  background:#fff !important;
}
.hero-system::before,
.hero-system::after {
  display:none !important;
}
.hero-system .hero-system-title .muted {
  color:#97918b;
}
.hero-system .hero-body {
  color:#4b4844;
}
.hero-system .secondary-button {
  background:#fff;
  border-color:rgba(15,15,14,.28);
}
.hero-system .secondary-button:hover {
  background:#f8f8f7;
  border-color:rgba(15,15,14,.42);
}
.hero-system-field {
  opacity:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.58) 12%,#000 27%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.58) 12%,#000 27%,#000 100%);
}
.system-rule {
  stroke:rgba(50,47,44,.21);
  stroke-width:1.05;
}
.system-rule-faint {
  stroke:rgba(50,47,44,.115);
}
.system-rule-dash {
  stroke:rgba(50,47,44,.15);
  stroke-dasharray:4 5;
}
.system-node {
  fill:#fff;
  stroke:rgba(43,40,37,.34);
}
.system-node-ring {
  fill:#fff;
}
.hero-system-mark {
  background:#fff;
  border-color:rgba(43,40,37,.24);
  box-shadow:0 8px 28px rgba(35,33,31,.03);
}
.hero-system-glow {
  display:none !important;
}

@media (max-width:1180px) {
  .hero-system-field { opacity:.94; }
}

@media (max-width:900px) {
  .hero-system-field { opacity:.78; }
}

@media (max-width:760px) {
  .hero-system { background:#fff !important; }
}


.hero-system .primary-button .button-arrow,
.hero-system .secondary-button .button-arrow,
.footer-project-button .button-arrow,
.cta-actions .primary-button .button-arrow {
  width:18px;
  height:12px;
}
.hero-system .primary-button .button-arrow::before,
.hero-system .secondary-button .button-arrow::before,
.footer-project-button .button-arrow::before,
.cta-actions .primary-button .button-arrow::before {
  width:14px;
}
.hero-system .primary-button .button-arrow::after,
.hero-system .secondary-button .button-arrow::after,
.footer-project-button .button-arrow::after,
.cta-actions .primary-button .button-arrow::after {
  width:7px;
  height:7px;
}

/* ==================================================================
   HERO MARK CONNECTION + ARROW PRECISION PASS — 2026-08-08
   The architectural traces now visibly terminate into the Meridian mark.
   ================================================================== */
.hero-system-field {
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.68) 9%,#000 23%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.68) 9%,#000 23%,#000 100%);
}
.hero-system-svg {
  shape-rendering:geometricPrecision;
}
.hero-system-svg .system-rule {
  stroke:rgba(37,35,33,.205);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.hero-system-svg .system-rule-core {
  stroke:rgba(31,29,27,.25);
}
.hero-system-svg .system-rule-faint {
  stroke:rgba(37,35,33,.095);
}
.hero-system-svg .system-rule-dash {
  stroke:rgba(37,35,33,.135);
  stroke-dasharray:4 5;
}
.hero-system-svg .system-spine {
  stroke:rgba(31,29,27,.21);
}
.hero-system-svg .system-connector {
  fill:none;
  stroke:rgba(24,23,22,.31);
  stroke-width:1.05;
  stroke-linecap:square;
  stroke-linejoin:round;
}
.hero-system-svg .system-connector-faint {
  stroke:rgba(31,29,27,.19);
}
.hero-system-svg .system-node {
  fill:#fff;
  stroke:rgba(31,29,27,.36);
  stroke-width:1;
}
.hero-system-svg .system-node-square {
  stroke:rgba(31,29,27,.30);
}
.hero-system-mark {
  left:52%;
  top:52%;
  width:72px;
  height:72px;
  background:#fff;
  border:1px solid rgba(24,23,22,.27);
  box-shadow:0 0 0 1px rgba(255,255,255,.75),0 8px 26px rgba(17,17,16,.025);
}
.hero-system-mark svg {
  width:28px;
  height:32px;
}

/* Clean engineering arrows: a single thin shaft + precise chevron. */
.button-arrow {
  position:relative;
  width:17px;
  height:14px;
  display:inline-block;
  flex:none;
  transition:transform .22s cubic-bezier(.2,.72,.2,1);
}
.button-arrow::before {
  content:"";
  position:absolute;
  left:1px;
  right:2px;
  top:50%;
  width:auto;
  height:1px;
  background:currentColor;
  transform:translateY(-50%);
}
.button-arrow::after {
  content:"";
  position:absolute;
  right:2px;
  top:50%;
  width:6px;
  height:6px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
  transform-origin:center;
}
.consultation-button .button-arrow,
.hero-system .primary-button .button-arrow,
.hero-system .secondary-button .button-arrow,
.footer-project-button .button-arrow,
.cta-actions .primary-button .button-arrow {
  width:17px;
  height:14px;
  margin-left:0;
}
.consultation-button:hover .button-arrow,
.hero-system .primary-button:hover .button-arrow,
.hero-system .secondary-button:hover .button-arrow,
.footer-project-button:hover .button-arrow,
.cta-actions .primary-button:hover .button-arrow {
  transform:translateX(3px);
}
.hero-system .primary-button,
.hero-system .secondary-button {
  gap:34px;
}

@media (max-width:1180px) {
  .hero-system-mark { width:68px; height:68px; }
}
@media (max-width:760px) {
  .hero-system-mark { display:none !important; }
}

/* ==================================================================
   HERO MARK HIERARCHY PASS — 2026-08-08
   Lift and enlarge the Meridian hub while keeping the surrounding
   construction field in place. Connected traces are re-anchored in HTML.
   ================================================================== */
.hero-system-mark {
  left:52%;
  top:48%;
  width:84px;
  height:84px;
  border-color:rgba(20,19,18,.31);
  box-shadow:0 0 0 1px rgba(255,255,255,.82),0 10px 30px rgba(17,17,16,.03);
}
.hero-system-mark svg {
  width:33px;
  height:38px;
}
.hero-system-mark path {
  stroke-width:12;
}

@media (max-width:1180px) {
  .hero-system-mark { width:78px; height:78px; top:48%; }
  .hero-system-mark svg { width:31px; height:35px; }
}

@media (max-width:760px) {
  .hero-system-mark { display:none !important; }
}

/* ==========================================================================
   2026-08-10 — Harry's layout notes
   Later media queries repositioned the wordmark with left/right/font-size, so
   these land last to keep the SVG edge to edge at every width.
   ========================================================================== */
.footer-wordmark {
  /* Eight letter spans distributed by flexbox: spans the padded band
     edge-to-edge in every browser with zero dependence on font metrics or
     SVG textLength (Safari ignores textLength compression, and its sizing
     of auto-width SVGs diverges from Chrome — both bit us; flex cannot).
     Bottom third runs past the footer edge and is clipped, so the word
     anchors the page rather than sitting on it. */
  position:absolute; left:var(--pad); right:var(--pad); bottom:-0.30em;
  width:auto; height:auto;
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-display);
  font-size:clamp(96px, 13vw, 210px);
  font-weight:300; line-height:.78; letter-spacing:normal;
  color:rgba(255,255,255,.075);
  font-synthesis:none; pointer-events:none;
}
/* Reserve the band the wordmark now occupies (its height is 14% of its width). */
.site-footer { padding-bottom: calc(9.4vw + 26px); }
@media (max-width:760px) {
  .footer-legal { padding-bottom:0; }
}

/* ==========================================================================
   TECHNICAL METADATA LAYER — 2026-08-11
   Eyebrows, spec runs and small-caps labels move to Geist Mono. They are data
   about the content rather than the content itself, and the monospaced setting
   is what gives the page its engineering register.
   ========================================================================== */
.eyebrow,
.technical-tags,
.cap-num,
.metrics-grid p,
.footer-column p,
.footer-project p,
.proof-item span,
.process-footer,
.delivery-note {
  font-family: var(--font-mono);
  font-weight: 400;
}
.eyebrow { font-size:10px; letter-spacing:.16em; }
.cap-num { font-size:13px; letter-spacing:.04em; }

/* The spec run was an 8px tracked-out sentence that wrapped mid-list and read as
   clutter. Set as a proper spec line: its own rule, a real measure, and space. */
.technical-tags {
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  font-size:10.5px;
  letter-spacing:.055em;
  line-height:2.05;
  color:#6a625c;
  text-transform:uppercase;
}
.technical-tags span { margin:0 9px; color:#b3aaa3; }

/* Lead and body were within 2px of each other, so the panel had no hierarchy. */
.capability-copy .lead {
  font-size:19px;
  line-height:1.48;
  letter-spacing:-.016em;
  color:var(--ink);
  margin:0 0 20px;
}
.capability-copy p {
  font-size:15px;
  line-height:1.62;
  color:#5d5751;
  margin:0 0 18px;
  max-width:46ch;
}

/* ==========================================================================
   PRODUCT SURFACES — 2026-08-11
   The mock UIs were set in 7–8.5px low-contrast greys, which renders as grey
   mush at the size they actually appear on the page. Data and labels move to
   the mono (correct register for a product surface), sizes come up to a legible
   floor, and label contrast increases.
   ========================================================================== */
.product-ui {
  --ui-muted: #9aa1a8;
}
.product-overline,
.product-kpis span,
.product-statusbar,
.agent-rail,
.agent-row,
.agent-kpis span,
.intent-row,
.intent-status,
.event-chip,
.rail-item,
.mini-sidebar,
.metric-row span,
.workflow-line {
  font-family: var(--font-mono);
  letter-spacing: 0;
}
.agent-row { font-size:8.5px; }
.agent-rail { font-size:9px; }
.agent-rail strong { font-size:11.5px; }
.agent-kpis span { font-size:7.8px; letter-spacing:-.01em; }
.product-kpis span,
.product-statusbar { font-size:9.5px; }
.event-chip { font-size:9.5px; }
.event-chip small { font-size:8px; }
.rail-item { font-size:10px; }
.product-overline { font-size:9.5px; letter-spacing:.1em; }
/* ==========================================================================
   PRODUCT SURFACES ON SMALL SCREENS — 2026-08-12
   These mocks were being crushed into ~340px by shrinking their type to 4–6px,
   which reads as a broken interface rather than a product. They now keep their
   real proportions and scroll horizontally, with the type back at its natural
   size so the surface is actually legible when swiped.
   ========================================================================== */
@media (max-width: 760px) {
  .intent-visual,
  .dark-visual,
  .case-visual {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .intent-visual::-webkit-scrollbar,
  .dark-visual::-webkit-scrollbar,
  .case-visual::-webkit-scrollbar { display: none; }

  /* flex-end pushes overflow off the *start* edge, where it can't be scrolled
     back to — the surface has to begin at the left to be swipeable. */
  .case-visual, .dark-visual, .intent-visual { justify-content: flex-start; }

  .intent-product-v2,
  .intent-product,
  .tour-builder-refined,
  .agent-product,
  .command-product {
    min-width: 680px;
    width: 680px;
    max-width: none;
    transform: none;
  }

  /* Type back to its desktop sizes now the surface has room for it. */
  .intent-flow { padding: 0 20px 14px; grid-template-columns: minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr); gap: 0; }
  .intent-flow > i { display: grid; font-size: 22px; }
  .intent-flow article { padding: 15px 12px 12px; border-radius: 9px; }
  .intent-flow strong { font-size: 10px; }
  .intent-flow p { font-size: 7px; min-height: 45px; margin: 8px 0 12px; }
  .intent-flow small { font-size: 6.5px; gap: 6px; }
  .flow-icon { width: 26px; height: 26px; font-size: 10px; margin-bottom: 10px; }

  .intent-priority-table { margin: 0 20px; }
  .priority-head { height: 40px; padding: 0 12px; }
  .priority-head strong { font-size: 9px; }
  .priority-cols { min-height: 34px; grid-template-columns: 1.55fr .7fr .7fr .55fr .9fr .7fr; padding: 0 12px; gap: 8px; font-size: 6.5px; }
  .priority-labels { min-height: 26px; font-size: 6px; }
  .priority-cols > span:nth-child(4),
  .priority-labels > span:nth-child(4),
  .priority-cols > span:nth-child(5),
  .priority-labels > span:nth-child(5) { display: block; }
  .intent-pill { font-size: 6px; padding: 4px 7px; }
  .intent-status-v2 { padding: 0 20px; font-size: 6px; }
  .intent-status-v2 span:last-child { display: inline; }
  .intent-detail { display: block; }
}

/* Product surfaces answer the pointer: a 3px lift was too small to register as
   a response. Pointer-capable devices only, so it never sticks on touch. */
@media (hover: hover) and (pointer: fine) {
  .case-visual .product-ui,
  .dark-visual .product-ui,
  .intent-visual .product-ui {
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s ease;
    will-change: transform;
  }
  .case-visual:hover .product-ui {
    transform: translateY(-7px) scale(1.006);
    box-shadow: 0 42px 90px rgba(9,10,12,.24), 0 1px 0 rgba(255,255,255,.04) inset;
  }
  .dark-visual:hover .product-ui,
  .intent-visual:hover .product-ui {
    transform: translateY(-7px) scale(1.006);
    border-color: rgba(255,255,255,.17);
    box-shadow: 0 46px 110px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.045) inset;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-visual:hover .product-ui,
  .dark-visual:hover .product-ui,
  .intent-visual:hover .product-ui { transform: none; }
}

/* ==========================================================================
   CAPABILITY DIAGRAMS — 2026-08-13
   The panels previously carried miniature product UIs, which competed with the
   real product surfaces elsewhere on the page and read as filler. These are
   drafting diagrams in the same language as the crosshair fields: 1px rules,
   square nodes, mono labels, no fill.
   ========================================================================== */
.capability-figure {
  align-self: center;
  display: flex;
  justify-content: center;
  padding: 4px 0 0 12px;
}
.capability-diagram {
  width: 100%;
  max-width: 460px;
  height: auto;
  overflow: visible;
}
.dg-box {
  fill: none;
  stroke: rgba(25,22,20,.20);
  stroke-width: 1;
}
.dg-line {
  fill: none;
  stroke: rgba(25,22,20,.26);
  stroke-width: 1;
}
.dg-dash { stroke-dasharray: 3 4; stroke: rgba(25,22,20,.18); }
.dg-node { fill: var(--ink); }
.dg-label {
  font-family: var(--font-text);
  font-size: 13px;
  fill: #2c2825;
  letter-spacing: -.012em;
}
.dg-mid { text-anchor: middle; }
.dg-muted { fill: #857c74; font-size: 11px; }
.dg-cap {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  fill: #8a817a;
}

@media (max-width: 1050px) {
  .capability-figure { padding: 18px 0 0; justify-content: flex-start; }
  .capability-diagram { max-width: 100%; }
}

/* Real product screenshot in the case study (replaces the built mock). Framed
   like the other product surfaces so the page reads as one system. */
.product-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  box-shadow: 0 34px 80px rgba(9,10,12,.20), 0 2px 6px rgba(9,10,12,.06);
  transform: translateZ(0);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* Sits as a card in the gutter rather than bleeding off the right edge, so all
   four corners are visible. */
.case-visual { align-items: center; }
@media (min-width: 761px) {
  .case-visual { margin-right: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .case-visual:hover .product-shot {
    transform: translateY(-7px) scale(1.006);
    box-shadow: 0 42px 90px rgba(9,10,12,.24);
  }
}
@media (max-width: 760px) {
  .product-shot { min-width: 680px; width: 680px; max-width: none; border-radius: 16px; }
}

/* ===== flow + mobile: tighten vertical rhythm (merged from preview build 2026-08-24) ===== */
@media (max-width:760px){
  .viewport-section{ min-height:0; }
  :root{ --chapter-open:52px; --chapter-close:44px; }
  /* With sections no longer full-height, absolutely-anchored decorations
     land on the content; the delivery note rejoins the flow instead. */
  .delivery-note{ position:static; margin:26px 0 0; }
}

/* ===== desktop flow: content-height chapters (2026-08-24, "too sparse") =====
   Chapters size to their content everywhere; the padding tokens carry the
   rhythm. The hero keeps its full landing frame. Snap goes with it: snapping
   to short sections stutters. ===== */
html { scroll-snap-type:none; }
.viewport-section { min-height:0; scroll-snap-align:none; }
.hero.hero-system { min-height:100svh; }
.site-footer { min-height:0; }
.delivery-note { position:static; margin:34px 0 0; }

/* Wordmark removed (2026-08-24): the footer ends at the legal line, so the
   band reserved for it goes back to the base padding. */
.site-footer { padding-bottom: 45px; }