:root {
  --midnight: #071126;
  --navy: #0a1430;
  --navy-2: #111e3f;
  --blue: #1d4ed8;
  --cyan: #38bdf8;
  --sky: #7be8ff;
  --cloud: #e6ebf1;
  --white: #ffffff;
  --ink: #08142f;
  --muted: #65708a;
  --line: rgba(255, 255, 255, 0.13);
  --light-line: rgba(8, 20, 47, 0.13);
  --font-display: "Sora", "Segoe UI Variable Display", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Sora", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --page: min(1240px, calc(100vw - 96px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--midnight); color: var(--white); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body.dialog-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 12px 16px; background: white; color: var(--ink); transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.site-header {
  position: fixed; z-index: 100; top: 0; left: 50%; width: var(--page); height: 96px;
  display: flex; align-items: center; justify-content: space-between; transform: translateX(-50%);
  border-bottom: 1px solid transparent; transition: height .35s ease, background .35s ease, border-color .35s ease, width .35s ease, padding .35s ease;
}
.site-header.is-scrolled { top: 14px; width: min(1180px, calc(100vw - 48px)); height: 70px; padding: 0 24px; background: rgba(7,17,38,.84); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(20px); box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.brand { display: inline-flex; align-items: center; gap: 11px; position: relative; z-index: 2; }
.brand-mark { width: 39px; height: 39px; overflow: visible; transform-style: preserve-3d; transition: transform .55s var(--ease), filter .4s ease; }
.brand:hover .brand-mark { transform: perspective(160px) rotateY(-18deg) rotateX(8deg) translateY(-1px); filter: drop-shadow(0 7px 8px rgba(56,189,248,.22)); }
.brand-name { display: grid; gap: 3px; font-family: var(--font-display); font-style: normal; white-space: nowrap; }
.brand-name strong { font-size: 14px; font-weight: 650; letter-spacing: .28em; line-height: 1; }
.brand-name em { color: var(--cyan); font-family: var(--font-mono); font-style: normal; font-size: 6px; font-weight: 500; letter-spacing: .19em; line-height: 1; }
.site-nav { display: flex; align-items: center; gap: 34px; }
.site-nav > a { color: #bec8da; font-size: 13px; font-weight: 600; transition: color .2s ease; }
.site-nav > a:hover { color: var(--white); }
.nav-toggle { display: none; }
.button { border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 36px; min-height: 54px; padding: 0 22px; color: var(--white); background: var(--blue); font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .25s var(--ease), background .25s ease, box-shadow .25s ease; }
.button:hover { transform: translateY(-2px); background: #2460ed; box-shadow: 0 12px 32px rgba(29,78,216,.3); }
.button--compact { min-height: 43px; padding: 0 17px; gap: 20px; }
.button--light { background: var(--white); color: var(--ink); }
.button--light:hover { background: var(--cloud); box-shadow: 0 12px 32px rgba(0,0,0,.18); }

.hero { position: relative; min-height: 840px; height: 100vh; max-height: 1040px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(460px, .95fr); align-items: center; padding: 118px max(48px, calc((100vw - 1240px)/2)) 78px; background: radial-gradient(circle at 78% 38%, rgba(29,78,216,.17), transparent 28%), var(--midnight); }
.hero-grid { position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.hero-glow { position: absolute; width: 430px; height: 430px; right: 7%; top: 22%; border-radius: 50%; background: rgba(56,189,248,.08); filter: blur(70px); }
.hero-copy { position: relative; z-index: 2; max-width: 720px; padding-right: 40px; }
.eyebrow { display: flex; align-items: center; gap: 13px; margin: 0 0 28px; color: #9fb0cb; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow span { width: 28px; height: 1px; background: var(--cyan); }
.eyebrow--dark { color: #5f6e8b; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
h1 { margin-bottom: 28px; font-size: clamp(54px, 5.1vw, 84px); line-height: .99; letter-spacing: -.055em; font-weight: 500; }
h1 em, h2 em { color: var(--cyan); font-style: normal; }
.hero-lede { max-width: 630px; margin-bottom: 38px; color: #aebbd0; font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.text-link { position: relative; display: inline-flex; align-items: center; gap: 18px; padding: 12px 0; border: 0; background: none; color: var(--white); font-size: 13px; font-weight: 600; cursor: pointer; }
.text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(.18); transform-origin: left; opacity: .45; transition: transform .3s var(--ease); }
.text-link:hover::after { transform: scaleX(1); }
.text-link--dark { color: var(--ink); }
.hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 58px 0 0; color: #72819c; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.hero-meta i, .footer-signature i { width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); }
.hero-system { --depth-rx: 0deg; --depth-ry: 0deg; position: relative; z-index: 1; width: min(46vw, 600px); aspect-ratio: 1; justify-self: end; display: grid; place-items: center; perspective: 1100px; transform-style: preserve-3d; }
.hero-mark { position: relative; z-index: 3; width: 73%; overflow: visible; transform: translate3d(0,-2%,55px) rotateX(var(--depth-rx)) rotateY(var(--depth-ry)); transform-style: preserve-3d; transition: transform .12s linear; filter: saturate(1.1) contrast(1.04); }
.hero-mark-inner { transform-origin: center; animation: mark-float 8s ease-in-out infinite; }
.prism-depth { position: absolute; z-index: 1; width: 49%; height: 62%; border-radius: 45% 55% 52% 48%; transform-style: preserve-3d; pointer-events: none; }
.prism-depth--rear { background: radial-gradient(circle at 50% 40%,rgba(56,189,248,.28),rgba(29,78,216,.04) 60%,transparent 72%); filter: blur(18px); transform: translate3d(18px,28px,-80px) rotateX(calc(var(--depth-rx) * .35)) rotateY(calc(var(--depth-ry) * .35)); }
.prism-depth--mid { width: 64%; height: 64%; border: 1px solid rgba(123,232,255,.11); transform: translate3d(-10px,4px,-24px) rotateX(calc(var(--depth-rx) * .65)) rotateY(calc(var(--depth-ry) * .65)) rotate(35deg); }
.mark-highlight { stroke-dasharray: 28 180; animation: mark-scan 4.6s ease-in-out infinite; }
.dimensional-readout { position: absolute; z-index: 5; right: 0; bottom: 12%; display: grid; grid-template-columns: auto auto; gap: 2px 10px; padding: 12px 14px; border: 1px solid rgba(123,232,255,.18); background: rgba(7,17,38,.68); backdrop-filter: blur(12px); font-family: var(--font-mono); text-transform: uppercase; transform: translateZ(90px); }
.dimensional-readout span { grid-row: 1 / 3; align-self: center; color: var(--cyan); font-size: 20px; letter-spacing: -.08em; }
.dimensional-readout b { color: #d4e7f8; font-size: 7px; font-weight: 500; letter-spacing: .12em; }
.dimensional-readout i { color: #5f718f; font-size: 6px; font-style: normal; letter-spacing: .1em; }
.system-orbit { position: absolute; border: 1px solid rgba(123,232,255,.16); border-radius: 50%; }
.system-orbit--one { width: 78%; height: 78%; animation: orbit 18s linear infinite; }
.system-orbit--one::before { content: ""; position: absolute; top: 10%; left: 10%; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 14px var(--cyan); }
.system-orbit--two { width: 96%; height: 96%; border-style: dashed; opacity: .6; animation: orbit 32s linear reverse infinite; }
.system-label { position: absolute; z-index: 3; display: flex; gap: 9px; color: #6e809f; font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
.system-label b { color: var(--cyan); font-weight: 500; }
.system-label--top { top: 3%; right: 4%; }
.system-label--bottom { left: 0; bottom: 5%; }
.system-line { position: absolute; z-index: 0; width: 116%; bottom: 13%; left: -11%; overflow: visible; }
.system-line path { fill: none; stroke: rgba(56,189,248,.34); stroke-width: 1; stroke-dasharray: 7 9; vector-effect: non-scaling-stroke; animation: dash 18s linear infinite; }
.scroll-cue { position: absolute; z-index: 2; /* was left-aligned at the same offset as .hero-copy, so it sat on top of .hero-meta. Moved to the right edge, which is clear of the copy column. */ right: max(48px, calc((100vw - 1240px)/2)); bottom: 34px; display: flex; align-items: center; gap: 14px; color: #6c7b96; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.scroll-cue i { position: relative; width: 38px; height: 1px; overflow: hidden; background: rgba(255,255,255,.15); }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--cyan); animation: scroll-line 2.2s ease-in-out infinite; }

.section { padding: 136px max(48px, calc((100vw - 1240px)/2)); }
.section--light { background: #f5f7fa; color: var(--ink); }
.section-heading { max-width: 830px; margin-bottom: 74px; }
.section-heading h2, .standards-intro h2, .process-heading h2, .contact h2 { margin-bottom: 26px; font-size: clamp(42px, 4.6vw, 68px); line-height: 1.05; letter-spacing: -.045em; font-weight: 500; }
.section-heading > p:last-child, .standards-intro > p:last-child, .section-heading--split > p { max-width: 560px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.section-heading--split { max-width: none; display: grid; grid-template-columns: 1.2fr .75fr; gap: 100px; align-items: end; }
.section-heading--split h2 { margin-bottom: 0; }
.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--light-line); border-bottom: 1px solid var(--light-line); }
.capability-card { position: relative; min-height: 448px; padding: 29px 27px 31px; border-right: 1px solid var(--light-line); overflow: hidden; transition: color .35s ease, background .35s ease, transform .35s var(--ease); }
.capability-card:first-child { border-left: 1px solid var(--light-line); }
.capability-card:hover { z-index: 2; color: var(--white); background: var(--navy-2); transform: translateY(-10px); box-shadow: 0 26px 70px rgba(8,20,47,.16); }
.card-code { font-family: var(--font-mono); font-size: 9px; color: #77839a; letter-spacing: .1em; }
.capability-card h3 { margin: 35px 0 17px; font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.capability-card p { margin-bottom: 26px; color: var(--muted); font-size: 13px; line-height: 1.7; transition: color .35s ease; }
.capability-card:hover p { color: #9eacc2; }
.capability-card > a { position: absolute; bottom: 29px; font-size: 11px; font-weight: 600; }
.capability-card > a span { margin-left: 12px; color: var(--blue); }
.card-diagram { position: relative; height: 112px; margin-top: 36px; color: var(--blue); }
.card-diagram i { position: absolute; display: block; border: 1px solid currentColor; transition: transform .45s var(--ease); }
.capability-card:hover .card-diagram { color: var(--cyan); }
.card-diagram--platform i { left: 50%; width: 68px; height: 39px; transform: translateX(-50%) rotate(30deg) skewX(-30deg); }
.card-diagram--platform i:nth-child(1) { top: 3px; }.card-diagram--platform i:nth-child(2) { top: 28px; opacity: .7; }.card-diagram--platform i:nth-child(3) { top: 53px; opacity: .4; }
.capability-card:hover .card-diagram--platform i:nth-child(1) { transform: translate(-50%,-5px) rotate(30deg) skewX(-30deg); }.capability-card:hover .card-diagram--platform i:nth-child(3) { transform: translate(-50%,5px) rotate(30deg) skewX(-30deg); }
.card-diagram--website i:nth-child(1) { inset: 10px 20px 7px; border-radius: 3px; }.card-diagram--website i:nth-child(2) { top: 26px; left: 35px; right: 35px; height: 12px; background: currentColor; opacity: .75; }.card-diagram--website i:nth-child(3) { top: 48px; left: 35px; width: 45px; height: 28px; opacity: .45; }
.capability-card:hover .card-diagram--website i:nth-child(2) { transform: translateX(6px); }.capability-card:hover .card-diagram--website i:nth-child(3) { transform: translateX(-4px); }
.card-diagram--systems i { width: 37px; height: 37px; border-radius: 50%; }.card-diagram--systems i:nth-child(1) { left: 30px; top: 14px; }.card-diagram--systems i:nth-child(2) { right: 30px; top: 14px; }.card-diagram--systems i:nth-child(3) { left: calc(50% - 18px); bottom: 8px; }
.card-diagram--systems::before,.card-diagram--systems::after { content:""; position:absolute; top:51px; width:61px; height:1px; background:currentColor; opacity:.45; }.card-diagram--systems::before{left:50px;transform:rotate(31deg)}.card-diagram--systems::after{right:50px;transform:rotate(-31deg)}
.capability-card:hover .card-diagram--systems i { transform: scale(1.08); }
.card-diagram--product i:nth-child(1) { inset: 5px 35px 5px; border-radius: 9px; }.card-diagram--product i:nth-child(2) { top: 25px; left: 49px; right: 49px; height: 8px; background: currentColor; border: 0; }.card-diagram--product i:nth-child(3) { top: 46px; left: 49px; width: 38px; height: 34px; }
.capability-card:hover .card-diagram--product i:nth-child(2) { transform: translateY(-3px); }

.standards { position: relative; overflow: hidden; display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; background: var(--midnight); }
.standards::before { content: ""; position: absolute; left: 43%; top: 0; width: 1px; height: 100%; background: var(--line); }
.standards-intro { position: sticky; top: 140px; align-self: start; }
.standards-intro > p:last-child { color: #8492a9; }
.standards-list { border-top: 1px solid var(--line); }
.standard { position: relative; min-height: 210px; padding: 36px 125px 34px 0; border-bottom: 1px solid var(--line); }
.standard > span { color: var(--cyan); font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.standard h3 { margin: 20px 0 12px; font-size: 24px; font-weight: 500; }
.standard p { margin: 0; color: #8492a9; font-size: 13px; line-height: 1.65; }
.standard-icon { position: absolute; top: 50%; right: 20px; width: 68px; height: 68px; transform: translateY(-50%); color: var(--cyan); opacity: .8; }
.standard-icon--layers i { position: absolute; left: 11px; width: 45px; height: 28px; border: 1px solid currentColor; transform: rotate(30deg) skewX(-30deg); }.standard-icon--layers i:nth-child(1){top:4px}.standard-icon--layers i:nth-child(2){top:18px;opacity:.6}.standard-icon--layers i:nth-child(3){top:32px;opacity:.3}
.standard-icon--code,.standard-icon--motion { display: grid; place-items: center; font-family: var(--font-mono); font-size: 29px; }
.standard-icon--motion { font-size: 54px; letter-spacing: -.2em; transform: translate(-7px,-50%); }
.standard-icon--craft { border: 1px solid currentColor; transform: translateY(-50%) rotate(30deg); }.standard-icon--craft i { position:absolute; inset:15px; border:1px solid currentColor; }.standard-icon--craft::after { content:"";position:absolute;inset:27px;background:currentColor; }

.work-stack { display: grid; gap: 24px; }
.work-card { min-height: 510px; display: grid; grid-template-columns: .78fr 1.22fr; overflow: hidden; color: var(--white); background: var(--navy); }
.work-copy { padding: 58px; display: flex; flex-direction: column; justify-content: center; }
.work-copy > span { color: var(--cyan); font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.work-copy h3 { margin: 28px 0 18px; font-size: 35px; font-weight: 500; letter-spacing: -.04em; }
.work-copy p { color: #97a5ba; font-size: 14px; line-height: 1.75; }
.work-copy ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 27px 0 0; padding: 0; list-style: none; }
.work-copy li { padding: 8px 10px; border: 1px solid var(--line); color: #adbad0; font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.work-visual { position: relative; display: grid; place-items: center; min-height: 430px; overflow: hidden; }
.work-card--commerce .work-visual { background: radial-gradient(circle at 62% 38%, rgba(56,189,248,.2),transparent 25%),linear-gradient(135deg,#142d67,#08152f 70%); }
.commerce-shell { position: relative; width: 72%; height: 65%; padding: 50px 28px 24px 88px; border: 1px solid rgba(255,255,255,.17); background: rgba(7,17,38,.56); box-shadow: 0 35px 80px rgba(0,0,0,.36); transform: perspective(900px) rotateX(4deg) rotateY(-8deg); transition: transform .6s var(--ease); }
.work-card:hover .commerce-shell { transform: perspective(900px) rotateX(1deg) rotateY(-3deg) translateY(-5px); }
.commerce-shell::before { content:"";position:absolute;left:0;top:0;bottom:0;width:59px;border-right:1px solid var(--line);background:rgba(255,255,255,.02); }
.shell-nav { position:absolute;left:17px;top:25px;width:25px;height:2px;background:var(--cyan);box-shadow:0 11px 0 rgba(255,255,255,.2),0 22px 0 rgba(255,255,255,.2); }
.shell-total { position:absolute;left:88px;top:23px;width:108px;height:12px;border-radius:8px;background:rgba(255,255,255,.1); }
.shell-chart { height:55%;display:flex;align-items:flex-end;gap:9px;padding:12px;border-left:1px solid var(--line);border-bottom:1px solid var(--line); }.shell-chart i{flex:1;background:linear-gradient(var(--cyan),var(--blue));}.shell-chart i:nth-child(1){height:30%}.shell-chart i:nth-child(2){height:46%}.shell-chart i:nth-child(3){height:39%}.shell-chart i:nth-child(4){height:66%}.shell-chart i:nth-child(5){height:57%}.shell-chart i:nth-child(6){height:88%}
.shell-list { display:grid;gap:8px;margin-top:20px; }.shell-list i{height:5px;background:rgba(255,255,255,.08);}.shell-list i:nth-child(1){width:89%}.shell-list i:nth-child(2){width:71%}.shell-list i:nth-child(3){width:80%}
.work-card--operations .work-visual { background: radial-gradient(circle at center,rgba(29,78,216,.18),transparent 40%),#081229; }
.orbit-board { position:relative;width:78%;height:70%;border:1px solid var(--line);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:32px 32px; }.orbit-board svg{position:absolute;inset:0;width:100%;height:100%;}.orbit-board path{fill:none;stroke:rgba(56,189,248,.42);stroke-width:1;stroke-dasharray:5 7;}.orbit-node{position:absolute;z-index:2;width:38px;height:38px;border:1px solid var(--cyan);border-radius:50%;background:var(--navy);box-shadow:0 0 0 8px rgba(56,189,248,.05),0 0 24px rgba(56,189,248,.18);}.orbit-node::after{content:"";position:absolute;inset:14px;background:var(--cyan);border-radius:50%;}.orbit-node--a{left:9%;top:20%}.orbit-node--b{left:51%;top:37%}.orbit-node--c{right:8%;top:31%}.orbit-node--d{left:44%;bottom:14%}
.work-card--service .work-visual { background:linear-gradient(145deg,#e8edf5,#b8c5d9); }.service-window{width:72%;padding:42px;background:white;color:var(--ink);box-shadow:0 32px 80px rgba(5,17,44,.24);transform:rotate(2deg);transition:transform .6s var(--ease);}.work-card:hover .service-window{transform:rotate(0) translateY(-5px)}.service-window span{display:block;width:35px;height:4px;background:var(--blue);margin-bottom:52px}.service-window h4{margin:0 0 35px;font-family:var(--font-display);font-size:clamp(24px,3vw,42px);letter-spacing:-.05em}.service-window i{display:block;height:7px;margin-top:13px;background:#e7ebf0}.service-window i:nth-of-type(1){width:90%}.service-window i:nth-of-type(2){width:72%}.service-window i:nth-of-type(3){width:82%}

.showcase-shell { display: grid; grid-template-columns: 276px minmax(0,1fr); min-height: 670px; overflow: hidden; background: var(--midnight); box-shadow: 0 42px 100px rgba(8,20,47,.16); }
.showcase-index { position: relative; z-index: 4; display: flex; flex-direction: column; padding: 34px 0 24px; border-right: 1px solid var(--line); background: rgba(7,17,38,.96); }
.showcase-tab { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 5px 12px; width: 100%; padding: 24px 26px; border: 0; border-bottom: 1px solid var(--line); color: #73839e; background: transparent; text-align: left; cursor: pointer; transition: color .3s ease, background .3s ease; }
.showcase-tab::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--cyan); transform:scaleY(0); transition:transform .35s var(--ease); }
.showcase-tab:hover,.showcase-tab.is-active { color: var(--white); background: rgba(255,255,255,.035); }
.showcase-tab.is-active::before { transform: scaleY(1); }
.showcase-tab span { grid-row: 1 / 3; color: var(--cyan); font-family: var(--font-mono); font-size: 8px; }
.showcase-tab b { font-family: var(--font-display); font-size: 15px; font-weight: 500; }
.showcase-tab i { color: #687995; font-size: 10px; font-style: normal; }
.showcase-index > p { margin: auto 24px 0; color: #566782; font-size: 9px; line-height: 1.7; }
.showcase-index > p strong { display: block; margin-bottom: 4px; color: #95a7c2; font-family: var(--font-mono); font-size: 7px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.showcase-stage { --scene-rx: 0deg; --scene-ry: 0deg; position: relative; min-width: 0; min-height: 670px; padding: 58px 52px 32px; overflow: hidden; background: radial-gradient(circle at 75% 30%,rgba(56,189,248,.11),transparent 34%),linear-gradient(145deg,#0d2049,#071126 70%); perspective: 1400px; }
.showcase-stage::before { content:"";position:absolute;inset:0;opacity:.32;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 86%); }
.website-scene { position: relative; z-index: 2; height: 100%; animation: scene-enter .65s var(--ease) both; }
.browser-frame { position: relative; width: 96%; margin-left: auto; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; background: #fff; box-shadow: 0 45px 90px rgba(0,0,0,.45),-24px 25px 70px rgba(29,78,216,.12); transform: rotateX(var(--scene-rx)) rotateY(var(--scene-ry)) rotateZ(-.8deg) translateZ(24px); transform-style: preserve-3d; transition: transform .14s linear, box-shadow .45s ease; }
.browser-frame::after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 24%,transparent 70%,rgba(123,232,255,.08));mix-blend-mode:screen; }
.browser-bar { height: 31px; display: flex; align-items: center; gap: 5px; padding: 0 12px; color: #68738a; background: #edf1f5; font-family: var(--font-mono); font-size: 7px; }
.browser-bar i { width:5px;height:5px;border-radius:50%;background:#c4cad4 }.browser-bar i:first-child{background:#ff7a72}.browser-bar i:nth-child(2){background:#ffd36a}.browser-bar i:nth-child(3){background:#63d69a}.browser-bar span{margin-left:9px}
.concept-site { position: relative; height: 444px; overflow: hidden; color: #0a1730; background: #f8fafc; }
.concept-site nav { position:relative;z-index:3;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid rgba(8,20,47,.08);font-size:7px; }.concept-site nav b{font-family:var(--font-display);font-size:12px;letter-spacing:-.03em}.concept-site nav span{color:#66728a}.concept-site nav em{padding:7px 9px;color:white;background:#0a1730;font-style:normal}
.concept-hero { position:absolute;z-index:3;left:6.5%;top:26%;width:47%; }.concept-hero small{font-family:var(--font-mono);font-size:6px;letter-spacing:.14em}.concept-hero h3{margin:14px 0 12px;font-size:32px;line-height:1.01;letter-spacing:-.055em;font-weight:600}.concept-hero p{max-width:300px;color:#627087;font-size:9px;line-height:1.6}.concept-button{display:inline-block;margin-top:10px;padding:9px 11px;color:white;background:#1755e7;font-size:7px;font-weight:600}
.concept-stats { position:absolute;z-index:3;left:6.5%;right:6.5%;bottom:22px;display:flex;gap:27px;padding-top:14px;border-top:1px solid rgba(8,20,47,.12);color:#66748a;font-size:7px}.concept-stats span{display:flex;gap:6px;align-items:center}.concept-stats b{color:#102a5d;font-family:var(--font-mono);font-size:11px}
.concept-site--care { background: linear-gradient(145deg,#f4fbff,#edf6fa); }.concept-site--care nav b{color:#075d7b}.concept-site--care nav em,.concept-site--care .concept-button{background:#0b6e88}.care-console{position:absolute;z-index:2;right:6%;top:24%;width:38%;padding:20px;border:1px solid rgba(7,93,123,.15);border-radius:10px;background:rgba(255,255,255,.9);box-shadow:0 22px 48px rgba(13,100,130,.12);transform:rotate(2.5deg)}.care-console>span,.care-console>em{display:block;color:#0b7893;font-family:var(--font-mono);font-size:6px;font-style:normal;letter-spacing:.1em}.care-console>b{display:block;margin:12px 0 17px;font-size:12px}.care-console>i{display:block;height:22px;margin-top:7px;border-radius:4px;background:linear-gradient(90deg,#e4f1f4 72%,#c1eaf1 72%)}.care-console>em{margin-top:14px;color:#7b8998}.concept-site--care::after{content:"";position:absolute;right:-8%;top:12%;width:46%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(11,110,136,.12);box-shadow:0 0 0 34px rgba(11,110,136,.025),0 0 0 68px rgba(11,110,136,.02)}
.concept-site--mirey { color:#f7f3ee;background:radial-gradient(circle at 74% 45%,rgba(209,171,116,.16),transparent 31%),#17130f }.concept-site--mirey nav{border-color:rgba(255,255,255,.1)}.concept-site--mirey nav span{color:#8e8274}.concept-site--mirey nav em,.concept-site--mirey .concept-button{color:#1b160f;background:#d8b277}.concept-site--mirey .concept-hero p{color:#9f9384}.mirey-orbit{position:absolute;right:7%;top:17%;width:39%;aspect-ratio:1;border:1px solid rgba(216,178,119,.2);border-radius:50%;display:grid;place-items:center}.mirey-orbit::before,.mirey-orbit::after{content:"";position:absolute;border:1px solid rgba(216,178,119,.13);border-radius:50%}.mirey-orbit::before{inset:16%}.mirey-orbit::after{inset:33%}.mirey-orbit b{position:relative;z-index:2;color:#d8b277;font-family:var(--font-display);font-size:40px;font-weight:400}.mirey-orbit i{position:absolute;width:5px;height:5px;border-radius:50%;background:#d8b277;box-shadow:0 0 13px #d8b277}.mirey-orbit i:nth-child(1){left:6%;top:47%}.mirey-orbit i:nth-child(2){right:16%;top:14%}.mirey-orbit i:nth-child(3){right:3%;bottom:31%}.mirey-approval{position:absolute;right:5%;bottom:18px;width:34%;display:grid;gap:7px;padding:15px;border:1px solid rgba(216,178,119,.18);background:rgba(31,26,20,.84);backdrop-filter:blur(8px)}.mirey-approval small{color:#d8b277;font-family:var(--font-mono);font-size:5px;letter-spacing:.12em}.mirey-approval b{font-size:9px}.mirey-approval span{color:#9f9384;font-size:6px}
.concept-site--study { color:#10204b;background:linear-gradient(150deg,#fffdf8,#f4f0e7) }.concept-site--study nav b{letter-spacing:.08em}.concept-site--study nav em,.concept-site--study .concept-button{background:#ff6b3e}.concept-site--study .concept-hero h3{color:#101f4a}.study-rings{position:absolute;right:3%;top:12%;width:47%;aspect-ratio:1;display:grid;place-items:center}.study-rings i{position:absolute;border:1px solid rgba(255,107,62,.24);border-radius:50%}.study-rings i:nth-child(1){inset:4%}.study-rings i:nth-child(2){inset:21%}.study-rings i:nth-child(3){inset:38%;background:rgba(255,107,62,.06)}.study-rings span{position:relative;z-index:2;color:#ff6b3e;font-family:var(--font-display);font-size:36px;font-weight:650;transform:rotate(-8deg)}.study-subjects{position:absolute;right:6%;bottom:23px;display:grid;grid-template-columns:1fr 1fr;gap:5px}.study-subjects span{padding:8px 11px;border:1px solid rgba(16,32,75,.1);background:rgba(255,255,255,.55);font-size:6px}
.scene-caption { display:grid;grid-template-columns:.8fr 1.35fr auto;gap:30px;align-items:end;padding:25px 6px 0;color:white }.scene-caption span{color:var(--cyan);font-family:var(--font-mono);font-size:6px;letter-spacing:.12em}.scene-caption h3{margin:7px 0 0;font-size:22px;font-weight:500}.scene-caption p{margin:0;color:#91a0b6;font-size:9px;line-height:1.55}.scene-caption a{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.3);font-size:8px;font-weight:600;white-space:nowrap}

.process { background: var(--navy-2); }
.process-heading { max-width: 720px; margin-bottom: 90px; }
.process-track { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 44px; }
.process-line { position: absolute; top: 17px; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.12); }
.process-line i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--blue),var(--cyan)); box-shadow: 0 0 12px rgba(56,189,248,.45); transition: width 1.5s var(--ease); }
.process-line.is-active i { width: 100%; }
.process-step { position: relative; padding-top: 66px; }
.process-step::before { content:"";position:absolute;top:10px;left:0;width:13px;height:13px;border:1px solid var(--cyan);border-radius:50%;background:var(--navy-2);box-shadow:0 0 0 7px rgba(56,189,248,.05); }
.process-step span { color: var(--cyan); font-family: var(--font-mono); font-size: 10px; }
.process-step h3 { margin: 18px 0 16px; font-size: 24px; font-weight: 500; }
.process-step p { color: #8c9bb1; font-size: 13px; line-height: 1.7; }

.model-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--light-line); }
.model-card { position:relative;min-height:430px;padding:42px 38px;border-right:1px solid var(--light-line); }.model-card:last-child{border-right:0}.model-card--featured::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan));}.model-card > span{color:var(--blue);font-family:var(--font-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase}.model-card h3{margin:27px 0 17px;font-size:27px;font-weight:500;letter-spacing:-.04em}.model-card > p{min-height:70px;color:var(--muted);font-size:13px;line-height:1.7}.model-card ul{display:grid;gap:13px;margin:30px 0 42px;padding:25px 0 0;border-top:1px solid var(--light-line);list-style:none}.model-card li{position:relative;padding-left:18px;color:#4f5e78;font-size:12px}.model-card li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--cyan)}

.contact { position:relative;min-height:650px;display:grid;place-items:center;overflow:hidden;padding:140px max(48px,calc((100vw - 1240px)/2));background:var(--blue);text-align:center; }.contact::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(circle at center,black,transparent 70%)}.contact-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(123,232,255,.2);filter:blur(90px)}.contact-mark{position:absolute;font-family:var(--font-display);font-size:520px;font-weight:600;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);transform:rotate(-8deg)}.contact-copy{position:relative;z-index:2;max-width:900px}.contact-copy .eyebrow{justify-content:center;color:#d2e9ff}.contact-copy .eyebrow span{background:white}.contact h2{font-size:clamp(48px,6vw,82px)}.contact h2 em{color:var(--white);text-shadow:0 0 32px rgba(255,255,255,.2)}.contact-copy > p:not(.eyebrow){margin-bottom:35px;color:#d7e5ff;font-size:17px}

.site-footer { padding: 70px max(48px,calc((100vw - 1240px)/2)) 28px; background: var(--midnight); }
.footer-top { display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;padding-bottom:70px;border-bottom:1px solid var(--line) }.footer-top > p{color:#7e8da6;font-size:13px;line-height:1.7}.footer-top nav{justify-self:end;display:grid;grid-template-columns:repeat(2,auto);gap:15px 48px}.footer-top nav a{color:#9aa8be;font-size:12px}.footer-top nav a:hover{color:white}.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;color:#586985;font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase}.footer-signature{display:flex;align-items:center;gap:12px;color:#7888a2}

.brief-dialog { width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 32px);margin:auto;padding:52px;border:0;color:var(--ink);background:#f7f9fb;box-shadow:0 30px 120px rgba(0,0,0,.42);overflow:auto; }.brief-dialog::backdrop{background:rgba(3,8,20,.82);backdrop-filter:blur(9px)}.dialog-close{position:absolute;top:18px;right:22px;width:38px;height:38px;border:1px solid var(--light-line);border-radius:50%;background:transparent;color:var(--ink);font-size:24px;cursor:pointer}.dialog-heading h2{margin:0 0 13px;font-family:var(--font-display);font-size:38px;letter-spacing:-.04em}.dialog-heading > p:last-child{color:var(--muted);font-size:13px}.brief-form{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}.brief-form label{display:grid;gap:9px;color:#43506a;font-size:11px;font-weight:600}.brief-form input,.brief-form select,.brief-form textarea{width:100%;border:1px solid #cad2df;border-radius:0;padding:13px 14px;background:white;color:var(--ink);outline:none}.brief-form input:focus,.brief-form select:focus,.brief-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(29,78,216,.1)}.brief-form textarea{resize:vertical}.field-wide{grid-column:1/-1}.form-footer{display:flex;align-items:center;justify-content:space-between;gap:30px}.form-footer p{max-width:310px;margin:0;color:var(--muted);font-size:10px;line-height:1.55}

/* Gated on .js, which script.js sets on <html> before paint. Without it the
   content is visible by default. Previously .reveal was opacity:0 unconditionally,
   so a missed observer, a throttled tab or any JS error left whole sections
   invisible with no way back. Animation is an enhancement, never a gate on content. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.capability-card:nth-child(2),.process-step:nth-of-type(2),.model-card:nth-child(2){transition-delay:.08s}.capability-card:nth-child(3),.process-step:nth-of-type(3),.model-card:nth-child(3){transition-delay:.16s}.capability-card:nth-child(4),.process-step:nth-of-type(4){transition-delay:.24s}

@keyframes mark-float { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-10px) rotate(1deg)} }
@keyframes mark-scan { 0%{stroke-dashoffset:220;opacity:.15} 48%{opacity:.85} 100%{stroke-dashoffset:-120;opacity:.15} }
@keyframes scene-enter { from{opacity:0;transform:translateX(25px) scale(.985)} to{opacity:1;transform:none} }
@keyframes orbit { to { transform:rotate(360deg) } }
@keyframes dash { to { stroke-dashoffset:-160 } }
@keyframes scroll-line { 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }

@media (max-width: 1040px) {
  :root { --page: calc(100vw - 56px); }
  .hero { grid-template-columns: 1fr .8fr; padding-left: 28px; padding-right: 28px; }
  .hero-system { width: 45vw; }
  .capability-grid { grid-template-columns: repeat(2,1fr); }
  .capability-card:nth-child(3) { border-left:1px solid var(--light-line); }
  .standards { gap:70px;grid-template-columns:.75fr 1.25fr }.standards::before{left:38%}
  .work-card { grid-template-columns:.85fr 1.15fr }.work-copy{padding:42px}
  .showcase-shell{grid-template-columns:230px minmax(0,1fr)}.showcase-stage{padding:44px 34px 28px}.concept-site{height:410px}.concept-hero h3{font-size:28px}
}

@media (max-width: 760px) {
  :root { --page: calc(100vw - 36px); }
  .site-header { height:76px; }.site-header.is-scrolled{top:8px;width:calc(100vw - 20px);height:62px;padding:0 14px}.brand-mark{width:32px;height:32px}.brand-name strong{font-size:12px}.brand-name em{font-size:5px}
  .nav-toggle{position:relative;z-index:3;display:grid;gap:4px;width:42px;height:42px;padding:12px;border:0;background:transparent;cursor:pointer}.nav-toggle span:not(.sr-only){display:block;width:18px;height:1px;background:white;transition:transform .25s ease,opacity .25s ease}.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .site-nav{position:fixed;top:0;left:0;width:100vw;height:100vh;padding:120px 30px 40px;display:flex;align-items:stretch;flex-direction:column;gap:0;background:rgba(7,17,38,.98);transform:translateY(-105%);transition:transform .45s var(--ease)}.site-nav.is-open{transform:translateY(0)}.site-nav>a{padding:18px 0;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:25px;font-weight:500}.site-nav .button{margin-top:28px}
  .hero{height:auto;min-height:900px;max-height:none;display:block;padding:150px 18px 90px}.hero-copy{padding:0}.hero h1{font-size:clamp(48px,14vw,68px);line-height:1.01}.hero-lede{font-size:15px}.hero-actions{align-items:flex-start;flex-direction:column;gap:14px}.hero-meta{margin-top:38px}.hero-system{position:absolute;right:-110px;bottom:28px;width:480px;opacity:.48}.system-label,.scroll-cue,.dimensional-readout{display:none}
  .section{padding:100px 18px}.section-heading{margin-bottom:52px}.section-heading h2,.standards-intro h2,.process-heading h2{font-size:42px}.section-heading--split{grid-template-columns:1fr;gap:24px}.section-heading--split h2{margin-bottom:0}
  .capability-grid{grid-template-columns:1fr}.capability-card,.capability-card:nth-child(3){min-height:395px;border-left:1px solid var(--light-line)}
  .standards{display:block}.standards::before{display:none}.standards-intro{position:relative;top:0;margin-bottom:55px}.standard{padding-right:95px}.standard-icon{right:0}
  .work-card{grid-template-columns:1fr}.work-copy{padding:38px 28px}.work-copy h3{font-size:29px}.work-visual{min-height:360px}.work-card--operations .work-copy{order:0}.commerce-shell,.service-window{width:84%}.orbit-board{width:90%;height:74%}
  .showcase-shell{display:block;min-height:0}.showcase-index{padding:0;border-right:0;border-bottom:1px solid var(--line)}.showcase-tab{grid-template-columns:24px 1fr;padding:18px}.showcase-index>p{margin:22px 18px}.showcase-stage{min-height:610px;padding:30px 14px 22px}.browser-frame{width:100%;transform:none!important}.concept-site{height:400px}.concept-site nav{padding:0 14px}.concept-site nav span{display:none}.concept-hero{left:6%;top:23%;width:60%}.concept-hero h3{font-size:24px}.care-console{right:-6%;top:30%;width:48%;opacity:.76}.mirey-orbit,.study-rings{right:-10%;top:20%;width:53%;opacity:.75}.mirey-approval{right:3%;width:40%}.concept-stats{gap:12px}.scene-caption{grid-template-columns:1fr auto;gap:14px;padding:22px 4px 0}.scene-caption>p{grid-column:1/-1;grid-row:2}.scene-caption h3{font-size:18px}
  .process-heading{margin-bottom:62px}.process-track{grid-template-columns:1fr;gap:0;padding-left:28px}.process-line{top:0;bottom:0;left:6px;right:auto;width:1px;height:auto}.process-line i{width:100%;height:0}.process-line.is-active i{width:100%;height:100%}.process-step{padding:0 0 55px 28px}.process-step::before{top:2px;left:-28px}
  .model-grid{grid-template-columns:1fr}.model-card{min-height:0;border-right:0;border-bottom:1px solid var(--light-line)}.model-card:last-child{border-bottom:0}.model-card>p{min-height:0}
  .contact{min-height:620px;padding:110px 18px}.contact h2{font-size:47px}.contact-mark{font-size:420px}
  .site-footer{padding:60px 18px 25px}.footer-top{grid-template-columns:1fr;gap:30px;padding-bottom:50px}.footer-top nav{justify-self:start}.footer-bottom{align-items:flex-start;flex-direction:column;gap:18px}.footer-signature{order:-1}
  .brief-dialog{padding:46px 22px 28px}.brief-form{grid-template-columns:1fr}.field-wide{grid-column:auto}.form-footer{align-items:stretch;flex-direction:column}.form-footer .button{width:100%}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal, .js .reveal.is-visible { opacity: 1; transform: none; }
}


/* price on the engagement cards. Added: the site shipped with no price on it,
   which threw away the one thing six of nine AU competitors will not do. */
.work-copy .text-link{margin-top:18px;display:inline-block}


@media (max-width: 900px) { .scroll-cue { display: none; } }


/* ported sections: automations, monthly plans, FAQ. Same tokens and rhythm as
   the rest of the page, so nothing here is a foreign visual language. */
.auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.auto-card{padding:30px 28px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .35s var(--ease)}
.auto-card:hover{background:rgba(56,189,248,.045)}
.auto-num{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--cyan)}
.auto-card h3{margin:16px 0 11px;font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.02em}
.auto-card p{margin:0 0 12px;color:var(--muted);font-size:14.5px;line-height:1.6}
.auto-who{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:#5c6a86}
.fineprint{max-width:88ch;margin:38px 0 0;font-family:var(--font-mono);font-size:11.5px;line-height:1.8;color:#5c6a86}
.fineprint--dark{color:#7a86a0}

.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px;background:var(--light-line);border:1px solid var(--light-line)}
.plan-card{background:#f5f7fa;padding:34px 30px 38px}
.plan-card--featured{background:#fff;box-shadow:inset 0 3px 0 var(--blue)}
.plan-card > span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.plan-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.plan-card li{position:relative;padding-left:18px;color:#46536e;font-size:14.5px;line-height:1.5}
.plan-card li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--blue);border-radius:1px;transform:rotate(45deg)}
.plan-alt{margin-top:1px;display:grid;grid-template-columns:1.4fr auto;gap:50px;align-items:center;padding:38px 34px;background:var(--ink);color:#e9eef7}
.plan-alt h3{margin:0 0 12px;font-family:var(--font-display);font-size:clamp(21px,2.2vw,28px);font-weight:600;letter-spacing:-.025em}
.plan-alt p{margin:0;color:#a5b1c8;font-size:15px;line-height:1.65;max-width:62ch}
.plan-alt p b{color:#fff;font-weight:600}
@media (max-width:820px){.plan-alt{grid-template-columns:1fr;gap:22px}}

.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;position:relative;padding:24px 46px 24px 0;font-family:var(--font-display);font-size:clamp(17px,1.7vw,21px);font-weight:500;letter-spacing:-.02em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:19px;color:var(--cyan)}
.faq-item[open] summary::after{content:"\2013"}
.faq-item p{margin:0 0 26px;max-width:70ch;color:var(--muted);font-size:15.5px;line-height:1.72}

/* ---------------------------------------------------------------- services index
   The full offering, no numbers. Lives under the four capability cards on the
   light section, so every colour here is the light-ground token, not the navy one. */
.service-index { padding: 72px 0 0; }
.service-index-head { max-width: 62ch; margin: 0 0 46px; }
.service-index-head h3 {
  margin: 18px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 33px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.2;
  color: var(--ink);
}
.service-index-head p { margin: 0; max-width: 58ch; color: var(--muted); font-size: 14.5px; line-height: 1.7; }

/* Six groups, so lock three columns and let them fall to 3x2 rather than
   letting auto-fit make a 4 + 2 row where the last two stretch to double width. */
.service-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--light-line);
  border: 1px solid var(--light-line);
}
.service-group { background: #f5f7fa; padding: 30px 28px 34px; }
.service-num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--blue);
}
.service-group h3 {
  margin: 14px 0 20px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.service-group ul {
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--light-line);
  list-style: none;
  display: grid;
  gap: 11px;
}
.service-group li {
  position: relative;
  padding-left: 16px;
  color: #46536e;
  font-size: 13.5px;
  line-height: 1.5;
}
.service-group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--cyan);
}

/* ---------------------------------------------------------------- price slots, now words
   .plan-line and .model-term sit where the dollar figures used to. They keep the
   vertical rhythm of the cards without putting a number in front of someone who
   has not told us what they need yet. */
.plan-line {
  margin: 16px 0 22px;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--ink);
}
.plan-card--featured .plan-line { color: var(--blue); }

.model-term {
  margin: 20px 0 18px !important;
  min-height: 0 !important;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7893 !important;
}
.model-term b { color: var(--blue); font-weight: 600; }
.model-card--featured .model-term b { color: #0b6fd4; }

@media (max-width: 980px) { .service-groups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .service-index { padding-top: 52px; }
  .service-groups { grid-template-columns: 1fr; }
  .service-group { padding: 26px 22px 30px; }
}

/* The plan strip used to end in a big dollar figure. A button earns that space
   better than an empty number slot ever did. */
.plan-alt-cta { white-space: nowrap; }
@media (max-width: 820px) { .plan-alt-cta { justify-self: start; } }

/* Eleventh cell in the automations grid: a way in for the job that is not
   one of the ten, and it stops the last row looking like it fell off. */
.auto-card--cta { background: rgba(56, 189, 248, 0.05); }
.auto-card--cta .auto-num { color: var(--cyan); }
.auto-card--cta .text-link { margin-top: 4px; }

/* ---------------------------------------------------------------- phone + WhatsApp
   Three ways to reach us in the contact block: the form, WhatsApp, and a number
   you can actually tap on a phone. The WhatsApp button keeps the brand green
   because that recognition is the whole point of the channel. */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 34px;
}
.button--wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #25d366;
  color: #04220f;
  border-color: #25d366;
  text-decoration: none;
}
.button--wa:hover { background: #1fbb59; border-color: #1fbb59; }
.button--wa svg { flex: 0 0 auto; }

.contact-tel {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #cfe0f5;
  text-decoration: none;
  border-bottom: 1px solid rgba(207, 224, 245, 0.35);
  padding-bottom: 2px;
}
.contact-tel:hover { color: #fff; border-bottom-color: #fff; }

.footer-contact a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.22); }
.footer-contact a:hover { border-bottom-color: currentColor; }
.footer-contact i {
  display: inline-block;
  width: 3px; height: 3px;
  margin: 0 7px 3px;
  border-radius: 50%;
  background: var(--cyan);
}
.hero-meta a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); }
.hero-meta a:hover { border-bottom-color: currentColor; }

/* Floating WhatsApp pill. Hidden over the hero so the first screen stays clean,
   then it follows you down the page. Fades in rather than popping. */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #25d366;
  color: #04220f;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(4, 34, 15, 0.32);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  /* Deliberately NOT transitioning visibility. A stalled transition on a discrete
     property leaves the button permanently invisible with the class already on it,
     which is the same fail-hidden trap the reveal animations had. opacity plus
     pointer-events degrades safely: worst case the pill is simply there. */
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.wa-float.is-shown { opacity: 1; pointer-events: auto; transform: none; }
.wa-float:hover { background: #1fbb59; }
.wa-float:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* The modal traps focus, so get the pill out of the way while a dialog is open. */
body.dialog-open .wa-float { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
  .wa-float { right: 14px; bottom: 14px; padding: 11px 15px; font-size: 13px; }
  .contact-actions { gap: 12px 14px; }
}
@media print { .wa-float { display: none; } }