:root {
  --ink: #102121;
  --night: #071818;
  --night-soft: #0d2525;
  --teal: #1b6d6b;
  --teal-bright: #80d1c8;
  --mist: #e9f1ef;
  --pearl: #f6f7f3;
  --white: #ffffff;
  --gold: #d7b171;
  --line: #cbd5d2;
  --muted: #526763;
  --danger: #a8483c;
  --radius: 8px;
  --shadow: 0 26px 70px rgba(4, 24, 24, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 118px; }
body { margin: 0; overflow-x: hidden; background: var(--pearl); color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { letter-spacing: 0; }
.section-shell { width: min(1360px, calc(100% - 48px)); margin-inline: auto; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 30; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(4, 20, 20, .88); color: #fff; backdrop-filter: blur(18px); }
.announcement { display: flex; min-height: 36px; align-items: center; justify-content: center; gap: 18px; border-bottom: 1px solid rgba(7,24,24,.16); background: var(--gold); padding: 7px 20px; color: var(--night); text-align: center; }
.announcement p { margin: 0; font-size: .72rem; font-weight: 800; }
.announcement a { font-size: .72rem; font-weight: 900; white-space: nowrap; }
.site-nav { position: relative; display: flex; width: min(1480px, calc(100% - 48px)); min-height: 78px; align-items: center; justify-content: space-between; gap: 24px; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: .95rem; }
.brand > span { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.38); border-radius: 5px; background: rgba(255,255,255,.06); color: var(--gold); font-weight: 900; }
.site-nav nav { display: flex; align-items: center; gap: 22px; color: rgba(255,255,255,.7); font-size: .78rem; font-weight: 700; }
.site-nav nav > a:hover { color: #fff; }
.site-nav nav > a.is-current { color: var(--teal-bright); }
.header-cta, .primary { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 5px; background: var(--gold); padding: 0 18px; color: var(--night) !important; font-weight: 900; }
.header-cta:hover, .primary:hover { background: #fff; }
.menu-button { display: none; min-height: 40px; border: 1px solid rgba(255,255,255,.28); border-radius: 5px; background: transparent; color: #fff; padding-inline: 14px; font-weight: 800; }

.hero { position: relative; min-height: 820px; overflow: hidden; background: var(--night); color: #fff; }
.hero::before { position: absolute; inset: 0; background: radial-gradient(circle at 78% 54%, rgba(55,139,132,.22), transparent 35%), linear-gradient(130deg, transparent 55%, rgba(215,177,113,.06)); content: ""; }
.hero-inner { position: relative; z-index: 2; display: grid; width: min(1480px, calc(100% - 64px)); min-height: 820px; grid-template-columns: minmax(0, .82fr) minmax(580px, 1fr); gap: 70px; align-items: center; margin-inline: auto; padding: 164px 0 62px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 17px; color: var(--teal); font-size: .68rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.hero .eyebrow, .method .eyebrow, .platform-proof .eyebrow, .contact-section .eyebrow { color: var(--teal-bright); }
h1 { max-width: 760px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.6rem, 5.2vw, 6.2rem); font-weight: 400; line-height: .92; }
.lead { max-width: 650px; margin: 28px 0 0; color: rgba(255,255,255,.68); font-size: 1.05rem; line-height: 1.75; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 21px; margin-top: 32px; }
.text-action, .actions > a:not(.primary), .actions > button:not(.primary) { border: 0; background: transparent; color: rgba(255,255,255,.74); padding: 11px 0; font-weight: 850; }
.text-action:hover, .actions > a:not(.primary):hover { color: #fff; }
.proof-line { display: flex; flex-wrap: wrap; gap: 12px 25px; margin-top: 38px; color: rgba(255,255,255,.42); font-size: .68rem; font-weight: 800; text-transform: uppercase; }

.hero-system { min-width: 0; perspective: 1400px; }
.system-window { overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: #f7faf8; color: var(--ink); box-shadow: 0 45px 120px rgba(0,0,0,.38); transform: rotateY(-5deg) rotateX(1deg); transform-origin: right center; }
.window-top { display: grid; min-height: 48px; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #d9e2df; padding: 0 16px; font-size: .67rem; }
.window-top > span { display: flex; gap: 6px; }
.window-top i { width: 8px; height: 8px; border-radius: 50%; background: #b9c8c5; }
.window-top em { justify-self: end; border-radius: 20px; background: #dff1eb; padding: 4px 8px; color: #2c725e; font-style: normal; font-weight: 800; }
.system-body { display: grid; min-height: 500px; grid-template-columns: 132px 1fr; }
.system-body > aside { display: flex; flex-direction: column; gap: 4px; background: #0a2323; padding: 18px 12px; }
.system-logo { display: grid; width: 32px; height: 32px; place-items: center; margin: 0 7px 24px; border: 1px solid rgba(255,255,255,.28); border-radius: 5px; color: var(--gold); font-weight: 900; }
.system-body > aside button { min-height: 38px; border: 0; border-radius: 5px; background: transparent; color: rgba(255,255,255,.55); text-align: left; font-size: .65rem; font-weight: 750; }
.system-body > aside button.is-active { background: rgba(128,209,200,.12); color: var(--teal-bright); }
.system-canvas { min-width: 0; padding: 25px; }
.system-canvas > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; }
.system-canvas header small, .system-canvas header strong { display: block; }
.system-canvas header small { margin-bottom: 5px; color: #7d8e8b; font-size: .62rem; }
.system-canvas header strong { max-width: 360px; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 400; }
.system-canvas header > span { border: 1px solid #d7e1de; border-radius: 4px; padding: 7px 9px; font-size: .62rem; font-weight: 800; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 23px; }
.metric-row article { min-width: 0; border: 1px solid #dbe4e1; border-radius: 6px; background: #fff; padding: 14px; }
.metric-row small, .metric-row strong, .metric-row em { display: block; }
.metric-row small { color: #71827f; font-size: .56rem; }
.metric-row strong { margin-top: 8px; font-size: 1.35rem; }
.metric-row em { margin-top: 5px; color: #3a806d; font-size: .55rem; font-style: normal; }
.system-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; margin-top: 10px; }
.system-grid > article { min-width: 0; border: 1px solid #dbe4e1; border-radius: 6px; background: #fff; padding: 15px; }
.system-grid article > div:first-child { display: flex; justify-content: space-between; font-size: .63rem; }
.system-grid article > div:first-child span { color: #84918f; }
.activity-panel p { display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: center; margin: 12px 0 0; border-top: 1px solid #e6ecea; padding-top: 12px; }
.activity-panel p i, .agency-action > i, .safety-list i { width: 7px; height: 7px; border-radius: 50%; background: #bcc9c6; }
.activity-panel p i.good, .agency-action > i.good, .safety-list i.good { background: #51a181; }
.activity-panel p i.warn, .agency-action > i.warn, .safety-list i.warn { background: #d8a64e; }
.activity-panel p span strong, .activity-panel p span small { display: block; }
.activity-panel p span strong { font-size: .58rem; }
.activity-panel p span small, .activity-panel p em { color: #84918f; font-size: .5rem; font-style: normal; }
.flow-panel { display: flex; flex-direction: column; }
.flow-map { display: grid !important; grid-template-columns: 1fr 10px 1fr 10px 1fr 10px 1fr; align-items: center; gap: 3px; margin-top: 58px; }
.flow-map span { display: grid; min-height: 42px; place-items: center; border-radius: 4px; background: #e8f2ef; color: #286b63; font-size: .48rem; font-weight: 800; }
.flow-map b { height: 1px; background: #afc9c4; }
.flow-panel > small { margin-top: auto; color: #84918f; font-size: .52rem; }

.capability-strip { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--line); background: var(--white); }
.capability-strip span { display: grid; min-height: 82px; place-items: center; border-right: 1px solid var(--line); padding: 14px; color: #365755; font-size: .7rem; font-weight: 850; text-align: center; text-transform: uppercase; }

.comparison { border-top: 1px solid rgba(255,255,255,.12); background: #050f0f; color: #fff; padding-block: 110px; }
.comparison-heading { max-width: 820px; margin-inline: auto; text-align: center; }
.comparison-heading .eyebrow { color: var(--gold); }
.comparison-heading h2 { font-size: clamp(2.8rem,4.4vw,4.9rem); }
.comparison-heading > p:last-child { max-width: 680px; margin: 25px auto 0; color: rgba(255,255,255,.58); line-height: 1.75; }
.comparison-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1160px; margin: 62px auto 13px; }
.comparison-labels span { padding-left: 4px; color: #e27f72; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.comparison-labels span:last-child { color: var(--teal-bright); }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; max-width: 1160px; margin-inline: auto; }
.comparison-grid article { display: grid; min-height: 84px; grid-template-columns: 28px 1fr; gap: 15px; align-items: center; border: 1px solid; border-radius: 7px; padding: 17px 20px; }
.comparison-grid article > span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid; border-radius: 50%; font-size: .61rem; font-weight: 900; }
.comparison-grid article p { margin: 0; color: rgba(255,255,255,.82); font-size: .83rem; line-height: 1.55; }
.comparison-problem { border-color: rgba(226,92,76,.48) !important; background: rgba(115,27,26,.13); }
.comparison-problem > span { border-color: rgba(226,92,76,.65) !important; background: rgba(168,72,60,.22); color: #f0a097; }
.comparison-solution { border-color: rgba(51,186,164,.52) !important; background: rgba(23,107,100,.15); }
.comparison-solution > span { border-color: #3cc4ae !important; background: #28b99f; color: var(--night); }
.comparison-cta { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 42px; text-align: center; }
.comparison-cta p { max-width: 520px; margin: 0; color: rgba(255,255,255,.56); font-size: .78rem; line-height: 1.6; }
.comparison-cta .primary { white-space: nowrap; }

.manifesto { padding-block: 120px; }
h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.8rem, 4.9vw, 5.5rem); font-weight: 400; line-height: .96; }
.manifesto h2 { max-width: 1120px; }
.manifesto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; max-width: 880px; margin: 52px 0 0 auto; }
.manifesto-grid p { margin: 0; color: var(--muted); line-height: 1.8; }

.intelligence { display: grid; grid-template-columns: minmax(0,.68fr) minmax(620px,1fr); gap: 90px; align-items: center; padding-bottom: 120px; }
.intelligence-copy > p:not(.eyebrow) { max-width: 590px; margin: 25px 0 0; color: var(--muted); line-height: 1.78; }
.intelligence-map { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--night); padding: 30px; color: #fff; box-shadow: var(--shadow); }
.intelligence-map::before { position: absolute; inset: 0; background: linear-gradient(140deg, transparent 52%, rgba(128,209,200,.09)); content: ""; pointer-events: none; }
.signal-sources { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid rgba(255,255,255,.16); border-radius: 6px; }
.signal-sources span { display: grid; min-height: 58px; place-items: center; border-right: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.6); font-size: .64rem; font-weight: 850; text-transform: uppercase; }
.signal-sources span:last-child { border-right: 0; }
.signal-core { position: relative; z-index: 1; max-width: 560px; margin: 54px auto; text-align: center; }
.signal-core::before, .signal-core::after { position: absolute; left: 50%; width: 1px; height: 33px; background: rgba(128,209,200,.48); content: ""; transform: translateX(-50%); }
.signal-core::before { top: -43px; }
.signal-core::after { bottom: -43px; }
.signal-core small, .signal-core strong { display: block; }
.signal-core small { color: var(--teal-bright); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.signal-core strong { margin-top: 13px; font-family: Georgia, serif; font-size: 2.05rem; font-weight: 400; }
.signal-core p { margin: 12px auto 0; color: rgba(255,255,255,.56); font-size: .8rem; line-height: 1.6; }
.signal-results { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.16); border-left: 1px solid rgba(255,255,255,.16); }
.signal-results article { min-height: 150px; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); padding: 19px; }
.signal-results span, .signal-results strong { display: block; }
.signal-results span { color: var(--gold); font-size: .58rem; font-weight: 900; text-transform: uppercase; }
.signal-results strong { margin-top: 38px; font-size: .8rem; line-height: 1.5; }
.illustration-label { position: relative; z-index: 1; display: block; margin-top: 14px; color: rgba(255,255,255,.32); font-size: .58rem; text-align: right; text-transform: uppercase; }

.project-invite { border-block: 1px solid #b9cac6; background: #dce9e6; padding-block: 76px; }
.project-invite > .section-shell { display: grid; grid-template-columns: minmax(320px,.8fr) minmax(380px,1fr) auto; gap: 60px; align-items: center; }
.project-invite h2 { font-size: clamp(2.5rem,4vw,4.7rem); }
.project-invite > .section-shell > p { margin: 0; color: var(--muted); line-height: 1.75; }
.project-invite .primary { white-space: nowrap; }

.projects-page { background: #e4edeb; }
.projects-intro { padding-top: 225px; padding-bottom: 82px; }
.projects-intro h1 { max-width: 1050px; color: var(--ink); }
.projects-intro > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 70px; align-items: end; max-width: 920px; margin: 42px 0 0 auto; }
.projects-intro > div p { margin: 0; color: var(--muted); line-height: 1.75; }
.projects-intro > div span { max-width: 220px; border-left: 1px solid #afc2be; padding-left: 22px; color: var(--teal); font-size: .69rem; font-weight: 850; line-height: 1.55; }
.projects-library { padding-bottom: 120px; }
.projects-library .project-browser { margin-top: 0; }
.projects-cta { background: var(--night); color: #fff; padding-block: 110px; text-align: center; }
.projects-cta h2 { max-width: 1000px; margin-inline: auto; }
.projects-cta .primary { margin-top: 34px; }

.demo-section { padding-block: 115px; background: #e4edeb; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .55fr); gap: 85px; align-items: end; }
.section-heading > p { margin: 0; color: var(--muted); line-height: 1.75; }
.project-browser { margin-top: 68px; overflow: hidden; border: 1px solid #afc2be; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.project-toolbar { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid #c8d5d2; padding: 16px 20px 16px 28px; }
.project-toolbar > div:first-child span, .project-toolbar > div:first-child strong { display: block; }
.project-toolbar > div:first-child span { color: var(--teal); font-size: .61rem; font-weight: 900; text-transform: uppercase; }
.project-toolbar > div:first-child strong { margin-top: 7px; font-family: Georgia, serif; font-size: 1.3rem; font-weight: 400; }
.project-tabs { display: flex; align-items: center; border: 1px solid #c4d2cf; border-radius: 6px; padding: 4px; }
.project-tabs button { min-height: 40px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); padding: 0 16px; font-size: .68rem; font-weight: 850; }
.project-tabs button.is-active { background: var(--night); color: #fff; }
.project-showcase { display: grid; grid-template-columns: 300px minmax(0,1fr); min-height: 680px; }
.project-index { display: flex; flex-direction: column; background: var(--night); color: #fff; padding: 28px 18px 18px; }
.project-index > p { margin: 0 10px 22px; color: rgba(255,255,255,.38); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.project-index > button { display: grid; min-height: 92px; grid-template-columns: 25px 1fr; gap: 13px; align-items: start; border: 1px solid transparent; border-radius: 6px; background: transparent; color: rgba(255,255,255,.56); padding: 16px 14px; text-align: left; }
.project-index > button + button { margin-top: 7px; }
.project-index > button.is-active { border-color: rgba(128,209,200,.28); background: rgba(128,209,200,.1); color: #fff; }
.project-index > button > span { color: var(--teal-bright); font-size: .59rem; font-weight: 900; }
.project-index button strong, .project-index button small { display: block; }
.project-index button strong { font-size: .78rem; }
.project-index button small { margin-top: 6px; color: rgba(255,255,255,.42); font-size: .61rem; line-height: 1.4; }
.project-index button em { grid-column: 2; margin-top: -20px; color: var(--gold); font-size: .55rem; font-style: normal; font-weight: 850; text-transform: uppercase; }
.project-index-note { margin-top: auto; border-top: 1px solid rgba(255,255,255,.14); padding: 22px 10px 8px; }
.project-index-note span { color: var(--gold); font-size: .59rem; font-weight: 900; text-transform: uppercase; }
.project-index-note p { margin: 9px 0 0; color: rgba(255,255,255,.43); font-size: .69rem; line-height: 1.55; }
.project-main { min-width: 0; background: #f4f7f5; }
.project-visual { position: relative; height: 520px; overflow: hidden; background: #d8e3e0; }
.project-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,22,22,.08), transparent 42%, rgba(5,22,22,.5)); content: ""; pointer-events: none; }
.project-visual > img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.project-visual > img.is-interface { background: #eef3f1; object-fit: contain; padding: 30px; }
.project-visual-bar { position: absolute; z-index: 2; inset: 18px 18px auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(255,255,255,.24); border-radius: 5px; background: rgba(5,22,22,.72); padding: 11px 14px; color: #fff; backdrop-filter: blur(10px); }
.project-visual-bar span { font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.project-visual-bar em { color: var(--teal-bright); font-size: .61rem; font-style: normal; font-weight: 800; }
.project-play { position: absolute; z-index: 3; right: 24px; bottom: 23px; display: flex; min-height: 62px; align-items: center; gap: 13px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; background: rgba(5,22,22,.9); color: #fff; padding: 8px 20px 8px 8px; box-shadow: 0 16px 40px rgba(0,0,0,.24); }
.project-play > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 4px; background: var(--gold); color: var(--night); font-size: 1.15rem; }
.project-play strong { font-size: .72rem; }
.project-play:hover { background: var(--teal); }
.project-story { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; min-height: 160px; padding: 31px 34px; }
.project-story h3 { margin: 0; font-family: Georgia, serif; font-size: 2.25rem; font-weight: 400; }
.project-story > div:last-child > p { max-width: 680px; margin: 0; color: var(--muted); line-height: 1.65; }
.project-story ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.project-story li { border: 1px solid #c6d4d1; border-radius: 4px; background: #fff; padding: 7px 9px; color: #3a605c; font-size: .61rem; font-weight: 850; }
.project-modules { border-top: 1px solid #c8d5d2; background: #eef4f2; }
.project-modules > header { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 30px; padding: 16px 28px; }
.project-modules > header span, .project-modules > header strong { display: block; }
.project-modules > header span { color: var(--teal); font-size: .59rem; font-weight: 900; text-transform: uppercase; }
.project-modules > header strong { margin-top: 6px; font-family: Georgia, serif; font-size: 1.2rem; font-weight: 400; }
.project-modules > header small { color: var(--muted); font-size: .65rem; }
#project-module-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); border-top: 1px solid #c8d5d2; border-left: 1px solid #c8d5d2; }
#project-module-list button { display: flex; min-height: 210px; flex-direction: column; border: 0; border-right: 1px solid #c8d5d2; border-bottom: 1px solid #c8d5d2; background: rgba(255,255,255,.55); color: var(--ink); padding: 22px; text-align: left; transition: background .2s, transform .2s; }
#project-module-list button:hover { position: relative; z-index: 2; background: #fff; transform: translateY(-4px); box-shadow: var(--shadow); }
#project-module-list button > span { color: var(--teal); font-size: .59rem; font-weight: 900; }
#project-module-list strong { margin-top: 32px; font-size: 1rem; }
#project-module-list p { margin: 10px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
#project-module-list em { margin-top: auto; color: var(--teal); font-size: .64rem; font-style: normal; font-weight: 900; }
.demo-stage { margin-top: 68px; }
.demo-intro { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; border: 1px solid #b9cac6; border-radius: var(--radius) var(--radius) 0 0; background: #fff; padding: 18px; }
.demo-client { display: flex; align-items: center; gap: 22px; }
.demo-client img { width: 180px; height: 112px; border-radius: 5px; object-fit: cover; }
.demo-client span, .demo-client strong, .demo-client p { display: block; }
.demo-client span { color: var(--teal); font-size: .63rem; font-weight: 900; text-transform: uppercase; }
.demo-client strong { margin-top: 8px; font-family: Georgia, serif; font-size: 1.7rem; font-weight: 400; }
.demo-client p { max-width: 630px; margin: 6px 0 0; color: var(--muted); line-height: 1.55; }
.primary.dark { background: var(--night); color: #fff !important; }
.demo-cards { display: grid; grid-template-columns: repeat(5, 1fr); border-left: 1px solid #b9cac6; }
.demo-cards button { display: flex; min-height: 260px; flex-direction: column; border: 0; border-right: 1px solid #b9cac6; border-bottom: 1px solid #b9cac6; background: rgba(255,255,255,.5); padding: 25px; color: var(--ink); text-align: left; transition: background .2s, transform .2s; }
.demo-cards button:hover { position: relative; z-index: 2; background: #fff; transform: translateY(-5px); box-shadow: var(--shadow); }
.demo-cards button > span { color: var(--teal); font-size: .65rem; font-weight: 900; }
.demo-cards strong { margin-top: 44px; font-size: 1.12rem; }
.demo-cards p { margin: 12px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.demo-cards em { margin-top: auto; color: var(--teal); font-size: .7rem; font-style: normal; font-weight: 900; }

.work { padding-block: 120px; }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.work-grid article { display: flex; min-height: 300px; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; padding: 28px; }
.work-grid article > span { color: var(--teal); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.work-grid h3 { margin: 48px 0 13px; font-family: Georgia, serif; font-size: 1.65rem; font-weight: 400; line-height: 1.08; }
.work-grid p { margin: 0; color: var(--muted); line-height: 1.65; }
.work-grid ul { margin: auto 0 0; padding: 30px 0 0; list-style: none; color: #345b57; font-size: .73rem; font-weight: 800; }
.work-grid li { border-top: 1px solid var(--line); padding: 8px 0; }
.work-feature { grid-row: span 2; background: var(--night) !important; color: #fff; }
.work-feature > span { color: var(--teal-bright) !important; }
.work-feature h3 { margin-top: 70px; font-size: 2.4rem; }
.work-feature p { color: rgba(255,255,255,.64); }
.work-feature ul { color: rgba(255,255,255,.7); }
.work-feature li { border-color: rgba(255,255,255,.16); }

.method { background: var(--night); color: #fff; padding-block: 120px; }
.method > .section-shell { display: grid; grid-template-columns: minmax(0,.72fr) minmax(560px,1fr); gap: 110px; }
.method-copy > p:not(.eyebrow) { max-width: 570px; margin: 26px 0 0; color: rgba(255,255,255,.62); line-height: 1.75; }
.method-copy .primary { margin-top: 30px; }
.method-steps { margin: 0; padding: 0; list-style: none; }
.method-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 20px; border-top: 1px solid rgba(255,255,255,.17); padding: 24px 0; }
.method-steps li:last-child { border-bottom: 1px solid rgba(255,255,255,.17); }
.method-steps > li > span { color: var(--teal-bright); font-size: .67rem; font-weight: 900; }
.method-steps strong { font-family: Georgia, serif; font-size: 1.55rem; font-weight: 400; }
.method-steps p { margin: 8px 0 0; color: rgba(255,255,255,.56); line-height: 1.65; }

.outcomes { padding-block: 120px; }
.outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 70px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.outcome-grid article { min-height: 315px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px; }
.outcome-grid span { color: var(--teal); font-size: .65rem; font-weight: 900; }
.outcome-grid h3 { margin: 56px 0 15px; font-family: Georgia, serif; font-size: 1.6rem; font-weight: 400; }
.outcome-grid p { margin: 0; color: var(--muted); line-height: 1.65; }
.outcome-note { max-width: 800px; margin: 28px 0 0 auto; color: #5a6d69; font-size: .72rem; line-height: 1.6; }

.platform-proof { overflow: hidden; background: #dce9e6; padding-block: 110px; }
.platform-proof > .section-shell { display: grid; grid-template-columns: .8fr 1.2fr; gap: 85px; align-items: center; }
.proof-copy .eyebrow { color: var(--teal); }
.proof-copy > p:not(.eyebrow) { margin: 26px 0 0; color: var(--muted); line-height: 1.75; }
.proof-copy .actions > a:not(.primary) { color: var(--teal); }
.platform-proof img { border: 1px solid #b8cac6; border-radius: var(--radius); box-shadow: var(--shadow); }

.agency-pathways { padding-block: 120px; }
.agency-pathways-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.48fr); gap: 80px; align-items: end; }
.agency-pathways-heading > p { margin: 0; color: var(--muted); line-height: 1.75; }
.agency-pathway-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 68px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.agency-pathway-grid article { display: flex; min-height: 390px; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px; }
.agency-pathway-grid article > span { color: var(--teal); font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.agency-pathway-grid h3 { max-width: 360px; margin: 66px 0 17px; font-family: Georgia, "Times New Roman", serif; font-size: 1.85rem; font-weight: 400; line-height: 1.1; }
.agency-pathway-grid p { margin: 0; color: var(--muted); line-height: 1.68; }
.agency-pathway-grid a { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 18px; margin-top: auto; border-top: 1px solid var(--line); padding-top: 20px; color: var(--teal); font-size: .76rem; font-weight: 900; }
.agency-pathway-grid a:hover { color: var(--night); }

.delegation-section { background: #071818; color: #fff; padding-block: 120px; }
.delegation-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(540px,1fr); gap: 110px; align-items: start; }
.delegation-copy .eyebrow { color: var(--gold); }
.delegation-copy > p:not(.eyebrow) { max-width: 610px; margin: 24px 0 0; color: rgba(255,255,255,.64); line-height: 1.75; }
.delegation-copy .primary { margin-top: 32px; }
.delegation-states { border-top: 1px solid rgba(255,255,255,.18); }
.delegation-states article { display: grid; grid-template-columns: 48px 1fr; gap: 22px; border-bottom: 1px solid rgba(255,255,255,.18); padding: 27px 0; }
.delegation-states article > span { color: var(--teal-bright); font-size: .65rem; font-weight: 900; }
.delegation-states strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 400; }
.delegation-states p { margin: 8px 0 0; color: rgba(255,255,255,.56); line-height: 1.65; }
/* .52 not .42: at .42 this 10pt disclaimer computed 4.06:1 against the
   #071818 section, under the 4.5:1 WCAG AA minimum for body text. It is the
   line that disclaims what the product does NOT promise, so it is exactly
   the wrong sentence to make hard to read. .52 computes 5.59:1. */
.delegation-states > small { display: block; max-width: 640px; margin-top: 26px; color: rgba(255,255,255,.52); line-height: 1.55; }

.member-route { border-top: 1px solid #b8cac6; padding-top: 20px; font-size: .76rem; }
.member-route a { color: var(--teal); font-weight: 900; }
.vsl-player { min-width: 0; border: 1px solid #9fb8b3; border-radius: 8px; background: #061616; box-shadow: var(--shadow); color: #fff; transition: transform .24s ease, opacity .24s ease; }
.vsl-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 7px 7px 0 0; background: #061616; }
.vsl-poster, .vsl-youtube { position: absolute; inset: 0; }
.vsl-poster img { width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; box-shadow: none; filter: brightness(.7); }
.vsl-poster::after { position: absolute; inset: 0; background: rgba(2,17,17,.18); content: ""; pointer-events: none; }
.vsl-poster > button { position: absolute; z-index: 2; left: 28px; bottom: 28px; display: grid; min-width: 260px; min-height: 82px; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; gap: 3px 14px; align-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 6px; background: rgba(4,24,24,.88); color: #fff; padding: 14px 18px; text-align: left; cursor: pointer; backdrop-filter: blur(10px); }
.vsl-poster > button > span { grid-row: 1 / 3; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--gold); color: var(--night); }
.vsl-poster > button strong { font-size: .78rem; }
.vsl-poster > button small { color: rgba(255,255,255,.56); font-size: .62rem; }
.vsl-youtube iframe, .vsl-youtube { width: 100%; height: 100%; border: 0; }
.vsl-notice { position: absolute; z-index: 3; inset: auto 20px 20px; margin: 0; border: 1px solid rgba(215,177,113,.44); border-radius: 5px; background: rgba(4,24,24,.94); color: #f3d6a4; padding: 13px 15px; font-size: .72rem; line-height: 1.5; }
.vsl-controls { display: grid; min-height: 58px; grid-template-columns: 38px 38px auto minmax(90px,1fr) auto auto auto; gap: 9px; align-items: center; padding: 9px 12px; }
.vsl-controls button { min-height: 36px; border: 1px solid rgba(255,255,255,.16); border-radius: 4px; background: transparent; color: rgba(255,255,255,.76); padding: 0 10px; font: inherit; font-size: .66rem; font-weight: 850; cursor: pointer; }
.vsl-controls button:hover { border-color: var(--teal-bright); color: var(--teal-bright); }
.vsl-controls > span { color: rgba(255,255,255,.55); font-size: .6rem; font-variant-numeric: tabular-nums; }
.vsl-controls input { width: 100%; accent-color: var(--teal-bright); }
.vsl-mini-close { display: none; }
.vsl-player.is-mini { position: fixed; z-index: 67; right: 20px; bottom: 104px; width: min(420px,calc(100vw - 40px)); box-shadow: 0 26px 80px rgba(0,0,0,.46); }
.vsl-player.is-mini .vsl-mini-close { display: block; }
.vsl-player.is-mini .vsl-controls { grid-template-columns: 36px 36px auto minmax(70px,1fr) auto 36px; }
.vsl-player.is-mini [data-vsl-fullscreen] { display: none; }

.lead-chat { position: fixed; z-index: 68; right: 14px; bottom: 14px; }
.lead-chat-launch { display: grid; min-width: 220px; min-height: 54px; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 0 10px; align-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 7px; background: var(--night); color: #fff; padding: 7px 13px 7px 8px; text-align: left; box-shadow: var(--shadow); cursor: pointer; }
.lead-chat-launch > span { grid-row: 1 / 3; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 5px; background: var(--teal); color: #fff; font-weight: 900; }
.lead-chat-launch strong { font-size: .74rem; }
.lead-chat-launch small { color: rgba(255,255,255,.52); font-size: .58rem; }
.lead-chat-panel { position: absolute; right: 0; bottom: 64px; width: min(390px,calc(100vw - 28px)); max-height: min(700px,calc(100dvh - 100px)); overflow-y: auto; border: 1px solid #9fb8b3; border-radius: 8px; background: #f7faf8; color: var(--ink); box-shadow: 0 28px 90px rgba(4,26,26,.34); }
.lead-chat-panel[hidden] { display: none; }
.lead-chat-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #cbd8d5; background: var(--night); color: #fff; padding: 17px 18px; }
.lead-chat-panel header span, .lead-chat-panel header strong { display: block; }
.lead-chat-panel header span { color: var(--teal-bright); font-size: .58rem; font-weight: 900; text-transform: uppercase; }
.lead-chat-panel header strong { margin-top: 4px; font-family: Georgia, "Times New Roman", serif; font-size: 1.18rem; font-weight: 400; }
.lead-chat-panel header button { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; background: transparent; color: #fff; font-size: 1.2rem; cursor: pointer; }
.lead-chat-panel > p { margin: 0; border-bottom: 1px solid #dbe4e1; padding: 17px 18px; color: var(--muted); font-size: .74rem; line-height: 1.55; }
.lead-chat-panel form { display: grid; gap: 15px; padding: 18px; }
.lead-chat-panel fieldset { margin: 0; border: 0; padding: 0; }
.lead-chat-panel label, .lead-chat-panel legend { color: #365755; font-size: .67rem; font-weight: 850; }
.lead-chat-panel input, .lead-chat-panel textarea { width: 100%; margin-top: 7px; border: 1px solid #b9cac6; border-radius: 4px; background: #fff; color: var(--ink); padding: 11px; font: inherit; outline: 0; }
.lead-chat-panel input:focus, .lead-chat-panel textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18,100,106,.12); }
.chat-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.chat-choices label { display: flex; min-height: 40px; align-items: center; gap: 7px; border: 1px solid #c9d7d4; border-radius: 4px; padding: 7px 8px; }
.chat-choices input, .chat-consent input { width: 15px; min-height: 15px; margin: 0; accent-color: var(--teal); }
.chat-consent { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; color: var(--muted) !important; line-height: 1.45; }
.lead-chat-panel .primary { width: 100%; cursor: pointer; }
.lead-chat-panel [data-chat-status] { margin: 0; color: var(--teal); font-size: .7rem; line-height: 1.45; }
.lead-chat-panel [data-chat-status].is-error { color: #b53b31; }
.lead-chat-panel > footer { display: block; border-top: 1px solid #dbe4e1; background: transparent; padding: 14px 18px; }
.lead-chat-panel > footer a { color: var(--teal); font-size: .69rem; font-weight: 850; }

.contact-page { background: #e4edeb; }
.contact-page-hero { background: var(--night); color: #fff; padding: 210px 0 100px; }
.contact-page-hero > .section-shell { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.52fr); gap: 90px; align-items: end; }
.contact-page-hero .eyebrow { color: var(--teal-bright); }
.contact-page-hero h1 { max-width: 920px; }
.contact-page-hero > .section-shell > p { margin: 0; color: rgba(255,255,255,.62); line-height: 1.75; }
.contact-page-body { padding-block: 95px 120px; }
.contact-page-layout { display: grid; grid-template-columns: minmax(0,.65fr) minmax(560px,1fr); gap: 100px; align-items: start; }
.contact-route-map { position: sticky; top: 130px; }
.contact-route-map ol { margin: 38px 0 0; border-top: 1px solid var(--line); padding: 0; list-style: none; }
.contact-route-map li { display: grid; grid-template-columns: 38px 1fr; gap: 18px; border-bottom: 1px solid var(--line); padding: 24px 0; }
.contact-route-map li > span { color: var(--teal); font-size: .63rem; font-weight: 900; }
.contact-route-map strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.34rem; font-weight: 400; }
.contact-route-map p { margin: 8px 0 0; color: var(--muted); line-height: 1.6; }
.contact-client-route { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 32px; }
.contact-client-route span { color: var(--muted); font-size: .66rem; text-transform: uppercase; }
.contact-client-route a { color: var(--teal); font-weight: 900; }
.enquiry-form.contact-page-form { border-color: #aebfbc; background: #071818; box-shadow: var(--shadow); }

@media (max-width: 1180px) {
  .agency-pathway-grid { grid-template-columns: 1fr 1fr; }
  .agency-pathway-grid article:last-child { grid-column: 1 / -1; min-height: 320px; }
  .delegation-layout { grid-template-columns: 1fr; gap: 65px; }
}

@media (max-width: 980px) {
  .agency-pathways-heading, .contact-page-hero > .section-shell, .contact-page-layout { grid-template-columns: 1fr; gap: 42px; }
  .contact-route-map { position: static; }
  .platform-proof > .section-shell { gap: 48px; }
}

@media (max-width: 680px) {
  .agency-pathways { padding-block: 78px; }
  .agency-pathway-grid { grid-template-columns: 1fr; margin-top: 42px; }
  .agency-pathway-grid article, .agency-pathway-grid article:last-child { grid-column: auto; min-height: 330px; padding: 24px; }
  .agency-pathway-grid h3 { margin-top: 44px; }
  .delegation-section { padding-block: 78px; }
  .delegation-layout { gap: 48px; }
  .delegation-states article { grid-template-columns: 34px 1fr; gap: 14px; }
  .vsl-poster > button { right: 14px; left: 14px; bottom: 14px; min-width: 0; min-height: 70px; }
  .vsl-controls { grid-template-columns: 38px 38px auto minmax(60px,1fr) auto 42px; }
  .vsl-controls [data-vsl-fullscreen] { display: none; }
  .lead-chat { right: 10px; bottom: 10px; }
  .lead-chat-launch { min-width: 54px; width: 54px; padding: 7px; }
  .lead-chat-launch strong, .lead-chat-launch small { display: none; }
  .lead-chat-panel { right: 0; bottom: 64px; max-height: calc(100dvh - 90px); }
  .cookie-reopen { right: auto !important; left: 10px; }
  .contact-page-hero { padding: 178px 0 72px; }
  .contact-page-body { padding-block: 70px 80px; }
}

.faq { display: grid; grid-template-columns: minmax(0,.65fr) minmax(560px,1fr); gap: 100px; padding-block: 120px; }
.faq > div:first-child > p:last-child { color: var(--muted); line-height: 1.75; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 24px 35px 24px 0; font-weight: 850; list-style: none; }
.faq summary::after { position: absolute; right: 4px; content: "+"; color: var(--teal); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: -4px 0 25px; color: var(--muted); line-height: 1.7; }

.contact-section { background: var(--night); color: #fff; padding-block: 120px; }
.contact-section > .section-shell { display: grid; grid-template-columns: minmax(0,.7fr) minmax(560px,1fr); gap: 110px; }
.contact-copy { padding-top: 10px; }
.contact-copy > p:not(.eyebrow) { max-width: 580px; margin: 26px 0 0; color: rgba(255,255,255,.62); line-height: 1.75; }
.contact-detail { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 50px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; }
.contact-detail span { color: rgba(255,255,255,.68); font-size: .68rem; text-transform: uppercase; }
.contact-detail a { color: var(--teal-bright); font-weight: 850; }
.enquiry-form { display: grid; gap: 22px; border: 1px solid rgba(255,255,255,.17); border-radius: var(--radius); background: rgba(255,255,255,.06); padding: 30px; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.enquiry-form label, .enquiry-form legend { color: rgba(255,255,255,.78); font-size: .72rem; font-weight: 800; }
.enquiry-form label small, .enquiry-form legend small { color: rgba(255,255,255,.68); font-weight: 500; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { width: 100%; margin-top: 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; background: rgba(255,255,255,.07); color: #fff; padding: 12px; outline: 0; }
.enquiry-form input, .enquiry-form select { min-height: 46px; }
.enquiry-form select option { color: var(--ink); }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(128,209,200,.13); }
.enquiry-form fieldset { margin: 0; border: 0; padding: 0; }
.form-options { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 10px; }
.form-options label { display: flex; min-height: 42px; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; padding: 8px 10px; }
.form-options input, .consent input { width: 16px; min-height: 16px; margin: 0; accent-color: var(--teal-bright); }
.consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: rgba(255,255,255,.55) !important; line-height: 1.55; }
.form-submit { justify-self: start; cursor: pointer; }
.form-submit:disabled { cursor: wait; opacity: .65; }
.form-status { margin: 0; color: var(--teal-bright); font-size: .78rem; line-height: 1.5; }
.form-status.is-error { color: #ffada2; }
.form-trap { position: absolute; left: -9999px; }

footer { display: grid; grid-template-columns: 1fr auto auto; gap: 70px; background: #020d0d; padding: 65px max(24px, calc((100% - 1360px)/2)); color: #fff; }
.footer-lead > p { max-width: 470px; margin: 20px 0 0; color: rgba(255,255,255,.46); line-height: 1.65; }
footer nav { display: grid; grid-template-columns: repeat(2,auto); align-content: start; gap: 13px 34px; color: rgba(255,255,255,.62); font-size: .78rem; }
footer nav a:hover { color: #fff; }
.footer-access { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-access span { color: rgba(255,255,255,.68); font-size: .67rem; text-transform: uppercase; }
.footer-access a { color: var(--teal-bright); font-weight: 850; }
.legal { grid-column: 1/-1; margin: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 24px; color: rgba(255,255,255,.66); font-size: .68rem; }

.demo-modal { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; background: #eef3f1; padding: 0; color: var(--ink); }
.demo-modal::backdrop { background: rgba(2,13,13,.8); }
.demo-modal-shell { display: flex; min-height: 100%; flex-direction: column; }
.demo-modal-header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #cad6d3; background: #fff; padding: 0 24px; }
.demo-modal-header .brand > span { border-color: #c1d1ce; background: var(--night); }
.demo-modal-header > div { display: flex; align-items: center; gap: 18px; }
.demo-safe { display: inline-flex; align-items: center; gap: 8px; border-radius: 20px; background: #e5f3ee; padding: 7px 10px; color: #347260; font-size: .67rem; font-weight: 850; }
.demo-safe i { width: 7px; height: 7px; border-radius: 50%; background: #4c9a7c; }
.close-demo { min-height: 38px; border: 1px solid #bdcdca; border-radius: 5px; background: #fff; padding: 0 13px; font-weight: 800; }
.demo-modal-layout { display: grid; min-height: calc(100vh - 72px); grid-template-columns: 220px 1fr; }
.demo-nav { display: flex; flex-direction: column; gap: 5px; border-right: 1px solid #cad6d3; background: #0a2323; padding: 24px 14px; color: #fff; }
.demo-nav > p { margin: 0 10px 18px; color: rgba(255,255,255,.4); font-size: .62rem; font-weight: 850; text-transform: uppercase; }
.demo-nav > button { display: grid; min-height: 48px; grid-template-columns: 24px 1fr; gap: 9px; align-items: center; border: 0; border-radius: 5px; background: transparent; color: rgba(255,255,255,.57); padding: 0 11px; text-align: left; font-size: .75rem; font-weight: 750; }
.demo-nav > button span { color: rgba(255,255,255,.3); font-size: .58rem; }
.demo-nav > button.is-active { background: rgba(128,209,200,.13); color: var(--teal-bright); }
.demo-nav > div { margin-top: auto; border-top: 1px solid rgba(255,255,255,.14); padding: 20px 10px 0; }
.demo-nav > div small, .demo-nav > div strong { display: block; }
.demo-nav > div small { color: rgba(255,255,255,.36); font-size: .58rem; text-transform: uppercase; }
.demo-nav > div strong { margin-top: 8px; font-family: Georgia, serif; font-weight: 400; line-height: 1.35; }
.demo-workspace { min-width: 0; overflow: auto; padding: 38px; }
.demo-workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; }
.demo-workspace-heading h2 { max-width: 850px; font-size: clamp(2.1rem,4vw,4rem); }
.demo-workspace-heading > div > p:last-child { max-width: 720px; margin: 18px 0 0; color: var(--muted); line-height: 1.6; }
.demo-enquire { min-height: 42px; border: 1px solid #b9cac6; border-radius: 5px; background: #fff; padding: 0 14px; color: var(--teal); font-weight: 850; white-space: nowrap; }
.demo-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 30px; }
.demo-metrics article { border: 1px solid #c6d3d0; border-radius: 6px; background: #fff; padding: 16px; }
.demo-metrics span, .demo-metrics strong { display: block; }
.demo-metrics span { color: var(--muted); font-size: .65rem; }
.demo-metrics strong { margin-top: 7px; font-size: 1.45rem; }
.demo-visual { margin-top: 12px; border: 1px solid #c6d3d0; border-radius: var(--radius); background: #fff; box-shadow: 0 20px 50px rgba(7,24,24,.07); }
.pos-demo { display: grid; min-height: 480px; grid-template-columns: 1fr 330px; }
.pos-products { padding: 22px; }
.pos-products > header, .stock-demo > header, .workforce-demo section > header, .workforce-demo aside > header, .safety-list > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #d9e2df; padding-bottom: 17px; }
.pos-products > header span, .stock-demo > header span, .workforce-demo header span, .safety-list header span { color: var(--muted); font-size: .68rem; }
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; }
.product-grid button { display: flex; min-height: 115px; flex-direction: column; justify-content: space-between; border: 1px solid #d2ddda; border-radius: 6px; background: #f4f8f6; padding: 14px; color: var(--ink); text-align: left; font-weight: 800; }
.product-grid button:hover { border-color: var(--teal); background: #e7f1ee; }
.product-grid small { color: var(--teal); }
.pos-basket { display: flex; flex-direction: column; border-left: 1px solid #d5dfdc; background: #f7f9f8; }
.pos-basket > header { display: flex; justify-content: space-between; border-bottom: 1px solid #d5dfdc; padding: 20px; }
.pos-basket > header button { border: 0; background: transparent; color: var(--teal); font-size: .7rem; font-weight: 800; }
.basket-lines { display: grid; gap: 10px; padding: 18px; }
.basket-lines p { display: flex; justify-content: space-between; margin: 0; border-bottom: 1px solid #dce5e2; padding-bottom: 10px; font-size: .75rem; }
.basket-lines .empty-basket { display: block; border: 0; color: var(--muted); }
.pos-basket footer { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: auto; background: transparent; padding: 18px; color: var(--ink); }
.pos-basket footer > span { display: flex; justify-content: space-between; }
.pos-basket footer button { min-height: 48px; border: 0; border-radius: 5px; background: var(--teal); color: #fff; font-weight: 850; }
.payment-status { margin: 0; color: var(--teal); font-size: .68rem; }
.workforce-demo, .safety-demo, .agency-demo { display: grid; min-height: 480px; grid-template-columns: 1.25fr .75fr; }
.workforce-demo > section, .workforce-demo > aside, .safety-demo > section, .safety-demo > aside, .agency-demo > aside, .agency-demo > section { padding: 22px; }
.workforce-demo > aside, .safety-demo > aside, .agency-demo > section { border-left: 1px solid #d5dfdc; background: #f7f9f8; }
.workforce-demo section > header button { min-height: 36px; border: 0; border-radius: 4px; background: var(--night); color: #fff; padding-inline: 12px; font-size: .68rem; font-weight: 800; }
.shift-row { display: grid; grid-template-columns: 54px 34px 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid #dce5e2; padding: 18px 0; }
.shift-row time { color: var(--muted); font-size: .68rem; }
.avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #dfece9; color: var(--teal); font-size: .62rem; font-weight: 850; }
.shift-row div strong, .shift-row div small { display: block; }
.shift-row div small { margin-top: 4px; color: var(--muted); font-size: .67rem; }
.shift-row em { border-radius: 20px; background: #e0f0ea; padding: 5px 8px; color: #347260; font-size: .6rem; font-style: normal; font-weight: 800; }
.shift-row em.soon { background: #f3ead6; color: #8d6725; }
.workforce-demo aside label { display: flex; gap: 9px; border-bottom: 1px solid #dce5e2; padding: 16px 0; font-size: .74rem; }
.workforce-demo aside input { accent-color: var(--teal); }
.stock-demo { min-height: 480px; padding: 22px; }
.stock-demo > header div { display: flex; gap: 6px; }
.stock-demo > header button { min-height: 32px; border: 1px solid #d1dcda; border-radius: 4px; background: #fff; padding-inline: 10px; color: var(--muted); font-size: .62rem; }
.stock-demo > header button.is-active { background: var(--night); color: #fff; }
.stock-table { margin-top: 14px; }
.stock-table > div { display: grid; grid-template-columns: 1.4fr 1fr .7fr .7fr .7fr; gap: 12px; align-items: center; border-bottom: 1px solid #e0e7e5; padding: 15px 8px; font-size: .72rem; }
.stock-table .stock-head { background: #f2f6f4; color: var(--muted); font-size: .6rem; font-weight: 850; text-transform: uppercase; }
.stock-table strong, .stock-table small { display: block; }
.stock-table small { margin-top: 4px; color: var(--muted); font-size: .57rem; }
.stock-table em { justify-self: start; border-radius: 20px; background: #e0f0ea; padding: 5px 8px; color: #347260; font-size: .58rem; font-style: normal; font-weight: 800; }
.stock-table em.at-risk { background: #f5dfdb; color: var(--danger); }
.stock-table em.watch { background: #f3ead6; color: #8d6725; }
.safety-list > button { display: grid; width: 100%; grid-template-columns: 9px 1fr auto; gap: 12px; align-items: center; border: 0; border-bottom: 1px solid #dce5e2; background: transparent; padding: 18px 0; color: var(--ink); text-align: left; }
.safety-list > button span strong, .safety-list > button span small { display: block; }
.safety-list > button span small { margin-top: 4px; color: var(--muted); font-size: .67rem; }
.safety-list > button em { color: var(--teal); font-size: .62rem; font-style: normal; font-weight: 800; }
.issue-panel > span { color: var(--teal); font-size: .62rem; font-weight: 850; text-transform: uppercase; }
.issue-panel h3 { margin: 16px 0 7px; font-family: Georgia, serif; font-size: 1.7rem; font-weight: 400; }
.issue-panel > p { margin: 0; color: var(--muted); font-size: .72rem; }
.issue-panel dl { margin-top: 28px; }
.issue-panel dl div { display: flex; justify-content: space-between; border-top: 1px solid #dce5e2; padding: 12px 0; font-size: .7rem; }
.issue-panel dt { color: var(--muted); }
.issue-panel dd { margin: 0; font-weight: 800; }
.issue-panel > button { width: 100%; min-height: 42px; margin-top: 20px; border: 0; border-radius: 5px; background: var(--night); color: #fff; font-weight: 800; }
.agency-demo { grid-template-columns: 1.15fr .85fr; }
.agency-demo > aside > strong, .agency-demo > aside > span { display: block; }
.agency-demo > aside > span { margin-top: 5px; color: var(--muted); font-size: .66rem; }
.pipeline { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 22px; }
.pipeline article { border-radius: 5px; background: #f1f6f4; padding: 11px; }
.pipeline article > small { color: var(--muted); font-size: .58rem; font-weight: 800; }
.pipeline article p { margin: 10px 0 0; border: 1px solid #d4dfdc; border-radius: 4px; background: #fff; padding: 10px; font-size: .68rem; font-weight: 800; }
.pipeline article p em { display: block; margin-top: 6px; color: var(--teal); font-size: .55rem; font-style: normal; }
.agency-demo section > header { display: flex; justify-content: space-between; border-bottom: 1px solid #dce5e2; padding-bottom: 15px; }
.agency-demo section > header span { color: var(--muted); font-size: .65rem; }
.agency-action { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center; border-bottom: 1px solid #dce5e2; padding: 17px 0; }
.agency-action span strong, .agency-action span small { display: block; }
.agency-action span small { margin-top: 4px; color: var(--muted); font-size: .62rem; }
.agency-action button { min-height: 31px; border: 1px solid #cad7d4; border-radius: 4px; background: #fff; color: var(--teal); font-size: .61rem; font-weight: 800; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 3px; }

@media (max-width: 1180px) {
  .hero-inner { grid-template-columns: 1fr; gap: 45px; padding-bottom: 80px; }
  .hero-copy { padding-top: 40px; }
  .hero-system { width: min(900px,100%); }
  .system-window { transform: none; }
  .intelligence { grid-template-columns: 1fr; }
  .project-showcase { grid-template-columns: 260px minmax(0,1fr); }
  .project-invite > .section-shell { grid-template-columns: 1fr 1fr; }
  .project-invite .primary { justify-self: start; }
  .demo-cards { grid-template-columns: repeat(3,1fr); }
  .work-grid { grid-template-columns: repeat(3,1fr); }
  .work-feature { grid-row: span 2; }
  .outcome-grid { grid-template-columns: repeat(2,1fr); }
  .platform-proof > .section-shell { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .site-nav { width: calc(100% - 40px); }
  .menu-button { display: inline-flex; align-items: center; }
  .site-nav nav { position: absolute; inset: 78px 0 auto; display: none; gap: 0; border: 1px solid rgba(255,255,255,.15); background: #041414; padding: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.3); }
  .site-nav nav.is-open { display: grid; }
  .site-nav nav a { display: flex; min-height: 46px; align-items: center; padding-inline: 11px; }
  .site-nav nav .header-cta { justify-content: center; }
  .section-heading, .method > .section-shell, .faq, .contact-section > .section-shell { grid-template-columns: 1fr; gap: 45px; }
  .capability-strip { grid-template-columns: repeat(3,1fr); }
  .comparison { padding-block: 90px; }
  .manifesto-grid { margin-left: 0; }
  .project-toolbar { align-items: flex-start; flex-direction: column; }
  .project-invite > .section-shell { grid-template-columns: 1fr; gap: 28px; }
  .projects-intro > div { grid-template-columns: 1fr; gap: 25px; margin-left: 0; }
  .project-tabs { width: 100%; }
  .project-tabs button { flex: 1; }
  .project-showcase { grid-template-columns: 1fr; }
  .project-index { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
  .project-index > p, .project-index-note { display: none; }
  .project-index > button + button { margin-top: 0; }
  .demo-intro { grid-template-columns: 1fr; }
  .demo-cards { grid-template-columns: repeat(2,1fr); }
  .work-grid { grid-template-columns: repeat(2,1fr); }
  .work-feature { grid-row: span 2; }
  .demo-modal-layout { grid-template-columns: 1fr; }
  .demo-nav { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(5,1fr); border-right: 0; border-bottom: 1px solid #cad6d3; padding: 10px; }
  .demo-nav > p, .demo-nav > div { display: none; }
  .demo-nav > button { display: flex; min-width: 0; justify-content: center; padding: 0 7px; text-align: center; }
  .demo-nav > button span { display: none; }
  .pos-demo, .workforce-demo, .safety-demo, .agency-demo { grid-template-columns: 1fr; }
  .pos-basket, .workforce-demo > aside, .safety-demo > aside, .agency-demo > section { border-top: 1px solid #d5dfdc; border-left: 0; }
}

@media (min-width: 681px) and (max-width: 980px) {
  .site-nav nav.is-open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-nav nav .header-cta { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .section-shell { width: calc(100% - 32px); }
  .announcement { min-height: 48px; justify-content: space-between; padding-inline: 14px; text-align: left; }
  .announcement p { max-width: 215px; font-size: .64rem; line-height: 1.35; }
  .announcement a { font-size: .64rem; }
  .site-nav { width: calc(100% - 28px); min-height: 72px; }
  .brand > span { width: 36px; height: 36px; }
  .hero { min-height: auto; }
  .hero-inner { width: calc(100% - 32px); min-height: auto; padding: 178px 0 62px; }
  h1 { font-size: clamp(2.7rem, 13vw, 3.1rem); line-height: .94; }
  h2 { font-size: 2.75rem; }
  .lead { font-size: .95rem; }
  .actions { align-items: stretch; flex-direction: column; }
  .actions .primary { width: 100%; }
  .text-action { text-align: left; }
  .proof-line { display: grid; grid-template-columns: 1fr 1fr; }
  .system-window { overflow: hidden; }
  .window-top { min-width: 0; grid-template-columns: auto 1fr auto; gap: 8px; padding-inline: 11px; }
  .window-top > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
  .system-body { min-width: 0; min-height: 390px; grid-template-columns: 76px minmax(0, 1fr); }
  .system-body > aside { gap: 3px; padding: 12px 7px; }
  .system-logo { width: 30px; height: 30px; margin: 0 auto 10px; }
  .system-body > aside button { min-height: 38px; padding: 4px; font-size: .51rem; text-align: center; }
  .system-canvas { padding: 14px 12px; }
  .system-canvas > header { align-items: flex-start; }
  .system-canvas header strong { font-size: 1.02rem; line-height: 1.08; }
  .system-canvas header > span { display: none; }
  .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 15px; }
  .metric-row article { padding: 10px; }
  .metric-row article:last-child { grid-column: 1 / -1; }
  .metric-row strong { margin-top: 5px; font-size: 1rem; }
  .system-grid { grid-template-columns: 1fr; gap: 7px; margin-top: 7px; }
  .system-grid > article { padding: 11px; }
  .activity-panel p { gap: 7px; margin-top: 8px; padding-top: 8px; }
  .activity-panel p span strong { font-size: .54rem; }
  .activity-panel p span small, .activity-panel p em { font-size: .46rem; }
  .flow-panel { display: none; }
  .capability-strip { grid-template-columns: repeat(2,1fr); }
  .capability-strip span { min-height: 68px; }
  .comparison { padding-block: 72px; }
  .comparison-labels { display: none; }
  .comparison-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 38px; }
  .comparison-grid article { min-height: 0; }
  .comparison-problem { margin-top: 14px; }
  .comparison-grid .comparison-problem:first-child { margin-top: 0; }
  .comparison-cta { align-items: stretch; flex-direction: column; margin-top: 34px; }
  .comparison-cta .primary { width: 100%; }
  .manifesto, .work, .outcomes, .faq { padding-block: 78px; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 36px; }
  .project-invite { padding-block: 62px; }
  .project-invite .primary { width: 100%; }
  .projects-intro { padding-top: 190px; padding-bottom: 62px; }
  .projects-intro > div { margin-top: 30px; }
  .projects-intro > div span { max-width: none; }
  .projects-library { padding-bottom: 78px; }
  .projects-cta { padding-block: 78px; }
  .intelligence { gap: 42px; padding-bottom: 78px; }
  .intelligence-map { padding: 18px; }
  .signal-sources { grid-template-columns: repeat(2,1fr); }
  .signal-sources span { min-height: 48px; border-bottom: 1px solid rgba(255,255,255,.14); }
  .signal-sources span:nth-child(2n) { border-right: 0; }
  .signal-sources span:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .signal-core { margin-block: 50px; }
  .signal-core strong { font-size: 1.7rem; }
  .signal-results { grid-template-columns: 1fr; }
  .signal-results article { min-height: auto; }
  .signal-results strong { margin-top: 18px; }
  .demo-section, .method, .platform-proof, .contact-section { padding-block: 78px; }
  .project-browser { width: calc(100% - 24px); margin-top: 44px; }
  .project-toolbar { padding: 18px; }
  .project-tabs { align-items: stretch; flex-direction: column; }
  .project-index { grid-template-columns: 1fr; }
  .project-visual { height: 380px; }
  .project-visual > img.is-interface { padding: 12px; }
  .project-visual-bar { inset: 10px 10px auto; }
  .project-visual-bar em { display: none; }
  .project-play { right: 12px; bottom: 12px; }
  .project-story { grid-template-columns: 1fr; gap: 22px; padding: 26px 20px; }
  .project-story h3 { font-size: 1.9rem; }
  .project-modules > header { align-items: flex-start; flex-direction: column; gap: 8px; padding: 18px 20px; }
  #project-module-list { grid-template-columns: 1fr; }
  #project-module-list button { min-height: 185px; }
  .demo-stage { margin-top: 44px; }
  .demo-client { align-items: flex-start; flex-direction: column; }
  .demo-client img { width: 100%; height: 190px; }
  .demo-intro .primary { width: 100%; }
  .demo-cards, .work-grid, .outcome-grid { grid-template-columns: 1fr; }
  .demo-cards button { min-height: 220px; }
  .work-feature { grid-row: auto; min-height: 390px !important; }
  .outcome-grid article { min-height: auto; }
  .form-pair, .form-options { grid-template-columns: 1fr; }
  .enquiry-form { padding: 20px; }
  footer { grid-template-columns: 1fr; gap: 38px; padding: 50px 20px; }
  footer nav { grid-template-columns: 1fr 1fr; }
  .demo-modal-header { min-height: 64px; padding: 0 12px; }
  .demo-modal-header .brand strong { display: none; }
  .demo-safe { display: none; }
  .demo-modal-layout { min-height: calc(100vh - 64px); }
  .demo-nav { grid-template-columns: repeat(5,minmax(90px,1fr)); overflow-x: auto; justify-content: start; }
  .demo-nav > button { font-size: .62rem; white-space: nowrap; }
  .demo-workspace { padding: 22px 14px; }
  .demo-workspace-heading { align-items: flex-start; flex-direction: column; }
  .demo-workspace-heading h2 { font-size: 2.35rem; }
  .demo-enquire { width: 100%; }
  .demo-metrics { grid-template-columns: repeat(2,1fr); }
  .demo-visual { overflow-x: auto; }
  .pos-demo, .workforce-demo, .stock-demo, .safety-demo, .agency-demo { min-width: 760px; }
  .platform-proof img { min-height: 290px; object-fit: cover; object-position: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 132px; }
  .brand { min-height: 44px; }
  .announcement a,
  .menu-button { min-height: 44px; display: inline-flex; align-items: center; }
  .site-nav nav { max-height: calc(100svh - 132px); overflow-y: auto; overscroll-behavior: contain; }
  .project-tabs button { min-height: 44px; }
  input, select, textarea { min-height: 48px; }
  footer nav a { min-height: 44px; display: flex; align-items: center; }
}
/* ── 200% zoom on a 375px phone ────────────────────────────────────────────
   At 200% browser zoom a 375×812 phone reports a 187px CSS viewport, and the
   browser matrix measured 70px of this page sitting off the right edge there.
   WCAG 1.4.10 (Reflow) requires content to work at 320px CSS width, which is
   what 400% zoom on a desktop and 200% on a phone both produce — so this is a
   conformance failure, not a cosmetic one. Two causes, both flex/grid items
   whose automatic minimum size is their min-content width:

     · the header: brand (120px) + gap (24px) + Menu button (72px) = 216px in a
       159px bar, and `min-width: auto` stopped the brand shrinking, so the
       Menu button — the only navigation at this width — was pushed off-screen;
     · the hero: `.proof-line` is forced to two columns below 680px, and two
       min-content columns plus the gap come to 175px inside a 155px grid.

   Nothing above 420px changes. */
@media (max-width: 420px) {
  .site-nav { gap: 10px; }
  .brand { min-width: 0; gap: 8px; font-size: .82rem; }
  .brand > span:first-child { flex: none; }
  .brand > :not(:first-child) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-button { flex: none; padding-inline: 10px; }
  .hero-copy { min-width: 0; }
  /* One column, so the widest label sets the width instead of two of them. */
  .proof-line { grid-template-columns: 1fr; }
  .proof-line > * { min-width: 0; overflow-wrap: anywhere; }
  .actions > a, .actions > button { min-width: 0; overflow-wrap: anywhere; }

  /* Grid tracks default to a min-content minimum, so ONE long word sets the
     width of the whole column and nothing below it can shrink. `overflow-wrap:
     anywhere` (not `break-word`) is the one value that also reduces the
     min-content contribution, which is what actually frees the track. */
  h1, h2, h3 { overflow-wrap: anywhere; }
  h2 { font-size: clamp(1.8rem, 11vw, 2.3rem); }
  .section-shell, .section-shell > * { min-width: 0; }
  .section-shell > * { overflow-wrap: anywhere; }
  /* Two 110px min-content columns do not fit in 187px. */
  .capability-strip { grid-template-columns: 1fr; }
  .capability-strip > * { min-width: 0; overflow-wrap: anywhere; }
  /* The label wraps, but the trailing "→" is a separate flex item and stayed
     on the first line, past the button's own right edge. Let the line break. */
  .primary, .header-cta, .text-action, .actions > a, .actions > button {
    flex-wrap: wrap;
    padding-inline: 12px;
    text-align: center;
  }
  .project-invite .primary { white-space: normal; }
}

.cookie-reopen { position: fixed; left: 14px; bottom: 14px; z-index: 69; min-height: 40px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: var(--night); color: #fff; padding: 0 15px; font: inherit; font-size: .72rem; font-weight: 800; box-shadow: var(--shadow); cursor: pointer; }
.cookie-banner { position: fixed; inset: auto 16px 16px 16px; z-index: 70; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; max-width: 1120px; margin: auto; border: 1px solid #b9cac6; border-radius: 8px; background: #fff; color: var(--ink); padding: 22px; box-shadow: 0 22px 70px rgba(4,26,26,.22); }
.cookie-banner[hidden] { display: none; }
.cookie-banner strong { font-size: 1rem; }
.cookie-banner p { max-width: 700px; margin: 6px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cookie-actions button, .cookie-dialog button { min-height: 42px; border: 1px solid #b9cac6; border-radius: 5px; background: #fff; color: var(--ink); padding: 0 14px; font: inherit; font-size: .76rem; font-weight: 850; cursor: pointer; }
.cookie-actions .primary, .cookie-dialog .primary { border-color: var(--teal); background: var(--teal); color: #fff !important; }
.cookie-dialog { width: min(620px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); border: 0; border-radius: 8px; padding: 0; background: #fff; color: var(--ink); box-shadow: 0 28px 90px rgba(4,26,26,.34); }
.cookie-dialog::backdrop { background: rgba(2,20,20,.72); }
.cookie-dialog-shell { padding: 26px; }
.cookie-dialog header, .cookie-dialog footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cookie-dialog header span { color: var(--teal); font-size: .63rem; font-weight: 900; text-transform: uppercase; }
.cookie-dialog h2 { margin: 7px 0 18px; font-family: Georgia, serif; font-size: 1.7rem; font-weight: 400; }
.cookie-dialog label { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding: 17px 0; }
.cookie-dialog label span, .cookie-dialog label strong, .cookie-dialog label small { display: block; }
.cookie-dialog label small { margin-top: 5px; color: var(--muted); line-height: 1.45; }
.cookie-dialog input { width: 20px; height: 20px; accent-color: var(--teal); }
.cookie-dialog > form > p { color: var(--muted); font-size: .78rem; }
.cookie-dialog a { color: var(--teal); font-weight: 800; }
.cookie-dialog footer { justify-content: flex-end; margin-top: 22px; }
@media (max-width: 700px) { .cookie-banner { grid-template-columns: 1fr; gap: 16px; padding: 18px; } .cookie-actions { justify-content: stretch; } .cookie-actions button { flex: 1 1 auto; } .cookie-reopen { left: 10px; bottom: 10px; } }

/* ── Touch targets ────────────────────────────────────────────────────────
   Added 2026-08-27 by the pre-launch browser walk (320x568, touch emulated).

   This site is styled ENTIRELY by this file. It does not load the app's
   globals.css, so the `pointer: coarse` rules that give the portal its 44px
   targets have never applied to a single element out here — which is the
   wrong way round, because this is the surface a stranger meets first and the
   only one they meet before deciding whether to trust us.

   Thirteen controls measured under 44px on a phone. The ones that matter most
   are the COOKIE CONSENT buttons: "Accept all" and "Necessary only" came in
   at 42px and the per-category toggles at 20px. A consent control that is
   awkward to hit is not only an accessibility defect — it biases which answer
   somebody gives, and that goes to whether the consent is freely given at
   all. Sized first for that reason.

   Coarse-pointer only, so the desktop composition is untouched. */
@media (pointer: coarse) {
  .cookie-actions button,
  .cookie-reopen,
  .cookie-dialog button {
    min-height: 44px;
  }

  /* The per-category toggles were 20x20 — the smallest controls on the page
     and the ones carrying the actual choice. The label row is already a
     generous hit area; this makes the input itself reachable too. */
  /* `width` alone was not enough and the browser walk caught it: these sit in
     a `display: flex` label row, so a plain width is only a STARTING size and
     flex shrink took them to 13px — narrower than the 20px they began at.
     `flex-shrink: 0` is the part that actually holds the size. */
  .cookie-dialog input {
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex-shrink: 0;
  }

  /* Primary calls to action and the standalone links that act as buttons.
     `.contact-detail`, `.contact-client-route` and `.footer-access` links were
     19px tall — they read as body text but behave as navigation, so they get a
     real target rather than a new visual weight. The contact page's one was
     missed on the first pass and caught by re-sweeping every public page
     rather than trusting that the homepage was representative. */
  .actions > a,
  .actions > button,
  .contact-detail a,
  .contact-client-route a,
  .footer-access a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The system-preview tab strip (Overview / People / Operations / Finance /
     Support) was floored at 38px by the rule further up this file. */
  .system-body > aside button {
    min-height: 44px;
  }
}