/* Landing page, in the Team and Services language.
   The hero draws the three levels as a dashed blueprint; the levels section builds them. */
html:has(.hm-page) .side-decor{display:none}
html[data-theme="dark"]:has(.hm-page){--accent:#8FA3FF;--accent-soft:#A9B8FF;--accent-rgb:143,163,255}
.hm-page{position:relative;z-index:2}
.hm-page section[id]{scroll-margin-top:90px}
.hm-page h1,.hm-page h2,.hm-page h3{font-weight:430;letter-spacing:-.045em}
.hm-page h1 em,.hm-page h2 em{font-weight:400;color:var(--accent)}
.hm-page .eyebrow{font-size:11px;letter-spacing:.14em;color:var(--ink-soft)}
.hm-page .btn{box-shadow:none}
.hm-page .btn-dark:hover{box-shadow:none;transform:translateY(-1px)}
.hm-arrow{display:inline-block;transition:transform .3s var(--ease)}
.hm-page .btn:hover .hm-arrow{transform:translate(2px,-2px)}
.hm-page :is(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:5px}

/* While the nav floats over the dark levels band it takes that band's colours. */
html.hm-nav-dark .nav{color:#f2f3f7;--accent:#8FA3FF;--accent-soft:#A9B8FF;--accent-rgb:143,163,255;--ink:#f2f3f7;--ink-soft:#c3c9d4;--muted:#8A919C;--porcelain:#0e1220;--line:rgba(242,243,247,.12);--line-strong:rgba(242,243,247,.26)}
html.hm-nav-dark .nav.scrolled{background:rgba(14,18,32,.84);border-bottom-color:rgba(242,243,247,.12)}
html.hm-nav-dark .nav .brand-mark{filter:invert(1) brightness(1.7)}

/* Hero */
.hm-hero{position:relative;overflow:hidden;padding:148px 0 0;background:radial-gradient(circle at 80% 30%,rgba(var(--accent-rgb),.09),transparent 38%),var(--porcelain)}
.hm-hero-grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(24px,4vw,64px);align-items:center;padding:26px 0 48px}
.hm-hero h1{max-width:max(11ch,6.6em);font-size:clamp(58px,7.1vw,110px);line-height:.94;letter-spacing:-.062em}
/* Layout-shift guard while Fraunces loads; nothing changes once it has. 11ch is measured on Fraunces (6.63–7.17em),
   so the 6.6em floor never binds then; before, the fallback's narrower "0" made 11ch about 5.5em and the headline
   took a fourth line. From 1200px the display size makes Fraunces narrower than Times, so the headline waits in a
   local Times-metric stand-in at 90% (no download; Latin only, so Greek keeps the system serif) that wraps like it. */
@font-face{font-family:"hm-display-fallback";src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Liberation Serif"),local("LiberationSerif"),local("Times");size-adjust:90%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"hm-display-fallback";font-style:italic;src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Liberation Serif Italic"),local("LiberationSerif-Italic"),local("Times Italic");size-adjust:90%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122}
@media(min-width:1200px){.hm-hero h1{font-family:"Fraunces","hm-display-fallback",serif}}
/* Below 1200px the two Fraunces files can arrive in either order; when the italic lands first, 11ch is still
   measured on the fallback and the 6.6em floor sends "intelligent systems." to a fourth line. A fixed 7em
   (just under 11ch in Fraunces at these sizes) wraps the same in every loading state and once it has loaded. */
@media(max-width:1199.98px){.hm-hero h1{max-width:7em}}
.hm-hero-lead{max-width:48ch;margin-top:34px;font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--ink-soft)}
.hm-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px;margin-top:36px}
.hm-anchor{display:inline-flex;align-items:center;gap:30px;padding:11px 0 9px;border-bottom:1px solid var(--ink);font:11px/1.4 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;transition:color .2s,border-color .2s}
.hm-anchor span:last-child{font-size:16px;transition:transform .3s var(--ease)}
.hm-anchor:hover{color:var(--accent);border-color:var(--accent)}
.hm-anchor:hover span:last-child{transform:translateY(3px)}
.hm-assurance{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line-strong);font:10px/1.5 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.hm-assurance li{display:flex;align-items:center;gap:16px}
.hm-assurance li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent)}
.hm-blueprint{margin:0;min-width:0}
.hm-blueprint .hm-stack-frame{width:min(380px,calc((100% - 150px) / .92));margin:0}
.hm-blueprint figcaption{margin-top:14px;text-align:center;font:10px/1.6 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--ink-soft)}
.hm-hero-foot{display:flex;justify-content:space-between;gap:24px;padding:22px 0;border-top:1px solid var(--line-strong);font-size:12px;color:var(--ink-soft)}
.hm-hero-foot span:last-child{font:10px/1.8 "JetBrains Mono",monospace;letter-spacing:.12em}

/* The level stack: one SVG, two moods. */
.hm-stack-frame{position:relative;width:min(100%,430px);margin:0 auto;aspect-ratio:372/584}
.lv-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lv-plate{--c:var(--l1)}
.lv-plate[data-plate="2"]{--c:var(--l2)}
.lv-plate[data-plate="3"]{--c:var(--l3)}
.lv-ghost-face,.lv-ghost-post{fill:none;stroke:var(--ghost);stroke-width:1;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.lv-plate-t{fill:#eef0f6}.lv-plate-l{fill:#c9cdd9}.lv-plate-r{fill:#aeb3c3}
.lv-plate-t,.lv-plate-l,.lv-plate-r{stroke:#fff;stroke-opacity:.55;stroke-width:.6}
.lv-post{stroke:#aeb3c3;stroke-width:2}
.lv-face-t{fill:#2a3350}.lv-face-l{fill:#1b2236}.lv-face-r{fill:#141a2b}
.lv-tile .lv-face-t{fill:#dfe6ff}.lv-tile .lv-face-l{fill:#9bb4ff}.lv-tile .lv-face-r{fill:#7d97e6}
.lv-hub .lv-face-t{fill:#d4f0e8}.lv-hub .lv-face-l{fill:#9ed0c1}.lv-hub .lv-face-r{fill:#7fb5a5}
.lv-route{fill:none;stroke:#3358c9;stroke-width:1.5;stroke-dasharray:4 4}
.lv-flow{fill:none;stroke:#a14e28;stroke-width:1.5;stroke-dasharray:2 5;stroke-linecap:round}
.lv-flow-dot{fill:#a14e28}
.lv-link{stroke:#2f7a64;stroke-width:1.2}
.lv-node{fill:#fff;stroke:#2f7a64;stroke-width:1.4}
.lv-pawn rect,.lv-pawn circle{fill:var(--c)}
.lv-pawn-shadow{fill:rgba(14,18,32,.2)}
.lv-plate-num{font:9px "JetBrains Mono",monospace;letter-spacing:.08em;fill:#2a3350}
.lv-here{display:none}
.hm-stack-labels{list-style:none}
.hm-stack-labels li{--c:var(--l1);position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:8px;transform:translate(14px,-50%);font:10px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:opacity .5s var(--ease),color .5s}
.hm-stack-labels li:nth-child(2){--c:var(--l2)}
.hm-stack-labels li:nth-child(3){--c:var(--l3)}
.hm-stack-labels b{display:grid;place-items:center;width:24px;height:24px;font-weight:500;letter-spacing:0}

/* Hero mood: an unbuilt blueprint on paper, the first level marked as the place to start. */
.hm-hero{--l1:var(--accent);--l2:var(--ink-soft);--l3:var(--ink-soft);--ghost:color-mix(in srgb,var(--ink) 42%,transparent)}
.hm-blueprint .lv-solid{display:none}
.hm-blueprint .lv-ghost-face{animation:hm-draw 40s linear infinite}
.hm-blueprint .lv-ghost-face{fill:color-mix(in srgb,var(--ink) 2.5%,transparent)}
.hm-blueprint [data-plate="1"] .lv-ghost-face{stroke:var(--accent);stroke-dasharray:5 4;fill:rgba(var(--accent-rgb),.07)}
html[data-theme="dark"] .hm-blueprint .hm-stack-labels li:first-child b{color:#0e1220}
.hm-blueprint .lv-plate-num{display:none}
.hm-blueprint .lv-here{display:inline}
.hm-blueprint .lv-here-ring{fill:rgba(var(--accent-rgb),.08);stroke:var(--accent);stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:hm-ring 2.8s var(--ease) infinite}
.hm-blueprint .lv-here .lv-pawn{--c:var(--accent)}
.hm-blueprint .lv-here .lv-pawn-shadow{fill:rgba(var(--accent-rgb),.25)}
.hm-blueprint .hm-stack-labels li{color:var(--ink-soft)}
.hm-blueprint .hm-stack-labels b{border:1px dashed var(--line-strong);color:var(--ink-soft)}
.hm-blueprint .hm-stack-labels li:first-child{color:var(--ink)}
.hm-blueprint .hm-stack-labels li:first-child b{border:1px solid var(--accent);background:var(--accent);color:var(--porcelain)}
@keyframes hm-draw{to{stroke-dashoffset:-180}}
@keyframes hm-ring{0%{transform:scale(.7);opacity:.9}70%,100%{transform:scale(1.35);opacity:0}}

/* Our direction: the statement lights up line by line as it is read. */
.hm-direction{position:relative;height:200vh;background:var(--porcelain)}
.hm-direction-sticky{position:sticky;top:0;display:flex;align-items:center;height:100vh;overflow:hidden}
.hm-statement{max-width:22ch;font-size:clamp(32px,4.5vw,66px);line-height:1.1;letter-spacing:-.04em;color:var(--ink)}
.hm-statement .eyebrow{display:flex;margin-bottom:34px;line-height:1.8}
/* Unlit lines stay at 3:1 or better (large text) in light and dark mode; reading lights them to full ink. */
.hm-statement .line{display:block;opacity:calc(.46 + var(--lit,1) * .54);transition:opacity .2s linear}
.hm-statement em{font-weight:400;color:var(--accent)}

/* Three levels: a dark stage, built from dashed outlines to working floors. */
.hm-levels{position:relative;isolation:isolate;padding-top:clamp(96px,12vh,140px);background:#0e1220;color:var(--ink);--ink:#f2f3f7;--ink-soft:#b8bfcc;--line:rgba(242,243,247,.12);--line-strong:rgba(242,243,247,.24);--accent:#9bb4ff;--accent-rgb:155,180,255;--l1:#9bb4ff;--l2:#e7ad82;--l3:#9ed0c1;--ghost:rgba(238,240,246,.42)}
.hm-levels::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 72% 42%,rgba(85,125,238,.16),transparent 58%),repeating-linear-gradient(0deg,rgba(242,243,247,.035) 0 1px,transparent 1px 34px)}
.hm-levels-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:clamp(40px,7vw,100px);align-items:end}
.hm-levels-head>.eyebrow{grid-column:1/-1;margin-bottom:26px}
.hm-levels-head h2{max-width:17ch;font-size:clamp(40px,4.6vw,68px);line-height:1.05;text-wrap:balance}
.hm-levels-head p{max-width:42ch;padding-bottom:6px;font-size:16px;line-height:1.75;color:var(--ink-soft)}
.hm-stage-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,90px);align-items:start;padding-block:clamp(56px,7vw,84px)}
.hm-stepper,.hm-caption{display:none}
.hm-panels{list-style:none;border-top:1px solid var(--line-strong)}
.hm-panel{--c:var(--l1);padding:30px 0 34px;border-bottom:1px solid var(--line)}
.hm-panel[data-panel="2"]{--c:var(--l2)}
.hm-panel[data-panel="3"]{--c:var(--l3)}
.hm-panel-kicker{font:10px/1.5 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.hm-page .hm-panel h3{margin-top:16px;font-size:clamp(28px,2.7vw,40px);line-height:1.08;text-wrap:balance}
.hm-panel p{max-width:44ch;margin-top:14px;font-size:15px;line-height:1.75;color:var(--ink-soft)}
.hm-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.hm-tags li{padding:7px 10px;border:1px solid var(--line-strong);font:10px/1.4 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.hm-panel .text-link{margin-top:24px;color:var(--c);border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.hm-panel .text-link:hover{border-color:var(--c)}
/* Go deeper: links to the level's service pages, under the panel's call to action (live stage and static list alike). */
.hm-panel p.go-deeper{max-width:none;margin-top:22px;line-height:1.5}
.hm-panel .go-deeper .text-link{margin-top:0}
.hm-stack{position:sticky;top:110px;margin:0}
/* Static stage (reduced motion, no JavaScript, short windows): size the stack to leave room for its labels, as the hero blueprint does. */
@media(min-width:1000px){.hm-levels:not(.is-live) .hm-stack .hm-stack-frame{width:min(430px,calc((100% - 150px) / .92));margin:0}}
.hm-levels .hm-stack-labels li{color:var(--ink)}
.hm-levels .hm-stack-labels b{background:var(--c);color:#0e1220}
.hm-stack-note{position:absolute;right:0;bottom:-4px;padding:5px 8px;border:1px solid var(--line-strong);font:9px/1.3 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.hm-levels-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:26px 40px;border-top:1px solid var(--line)}
.hm-levels-foot p{font-size:14px;color:var(--ink-soft)}
.hm-levels-foot .text-link{margin-top:0;color:var(--ink);border-color:var(--line-strong)}

/* Live: the stage holds still while the visitor climbs through the levels. */
.hm-levels.is-live .hm-scrolly{height:330vh}
.hm-levels.is-live .hm-stage{position:sticky;top:0;display:flex;align-items:center;height:100vh}
.hm-levels.is-live .hm-stage-grid{width:100%;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;padding-block:56px 24px}
.hm-levels.is-live .hm-stepper{display:flex;align-items:center;gap:8px;margin-bottom:40px}
.hm-stepper button{--c:var(--l1);display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px dashed var(--line-strong);background:transparent;color:var(--ink-soft);font:12px "JetBrains Mono",monospace;cursor:pointer;transition:background .35s,border-color .35s,color .35s,transform .35s var(--ease)}
.hm-stepper button[data-step="2"]{--c:var(--l2)}
.hm-stepper button[data-step="3"]{--c:var(--l3)}
.hm-stepper button:hover{border-color:var(--c);color:var(--ink)}
.hm-levels[data-level="2"] .hm-stepper [data-step="1"],.hm-levels[data-level="3"] .hm-stepper :is([data-step="1"],[data-step="2"]){border-style:solid;border-color:#eef0f6;background:#eef0f6;color:#0e1220}
.hm-stepper button[aria-current="step"]{border-style:solid;border-color:var(--c);background:var(--c);color:#0e1220;transform:translateY(-3px);box-shadow:0 3px 0 color-mix(in srgb,var(--c) 55%,#0e1220)}
.hm-stepper-name{margin-left:12px;font:11px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.hm-stepper-name b{display:none;font-weight:400}
.hm-levels[data-level="1"] .hm-stepper-name b:nth-child(1),.hm-levels[data-level="2"] .hm-stepper-name b:nth-child(2),.hm-levels[data-level="3"] .hm-stepper-name b:nth-child(3){display:inline}
.hm-levels.is-live .hm-panels{display:grid;border-top:0}
.hm-levels.is-live .hm-panel{grid-area:1/1;padding:0;border:0;opacity:0;transform:translateY(22px);pointer-events:none;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.hm-levels.is-live .hm-panel.is-active{opacity:1;transform:none;pointer-events:auto;transition-delay:.12s}
.hm-levels.is-live .hm-panel-kicker{display:none}
.hm-levels.is-live .hm-panel h3{margin-top:0;font-size:clamp(38px,3.7vw,56px);line-height:1.04}
.hm-levels.is-live .hm-panel p{font-size:16px}
.hm-levels.is-live .hm-stack{position:relative;top:auto}
.hm-levels.is-live .hm-stack-frame{width:auto;height:min(64vh,580px)}
.hm-levels.is-live .hm-caption{display:flex;justify-content:center;margin-top:22px}
.hm-caption span{display:none;padding:12px 18px;border-radius:4px;background:#eef0f6;box-shadow:0 3px 0 #b9bdca;color:#1a2033;font-size:15px;font-weight:500;line-height:1.4;text-align:center}
.hm-caption b{margin-right:4px;padding:2px 7px;border-radius:3px;background:#0e1220;color:#f2f3f7;font-weight:600}
.hm-caption em{font-style:normal;font-weight:600;box-shadow:inset 0 -.42em 0 var(--c)}
.hm-caption span:nth-child(1){--c:color-mix(in srgb,var(--l1) 70%,#eef0f6)}
.hm-caption span:nth-child(2){--c:color-mix(in srgb,var(--l2) 70%,#eef0f6)}
.hm-caption span:nth-child(3){--c:color-mix(in srgb,var(--l3) 70%,#eef0f6)}
.hm-levels[data-level="1"] .hm-caption span:nth-child(1),.hm-levels[data-level="2"] .hm-caption span:nth-child(2),.hm-levels[data-level="3"] .hm-caption span:nth-child(3){display:inline-block;animation:hm-caption .5s var(--ease) both}
@keyframes hm-caption{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hm-levels.is-live .lv-ghost{opacity:0;transition:opacity .5s var(--ease)}
.hm-levels.is-live .lv-solid{transition:opacity .6s var(--ease),transform .8s var(--ease)}
.hm-levels.is-live[data-level="1"] .lv-plate:is([data-plate="2"],[data-plate="3"]) .lv-solid,.hm-levels.is-live[data-level="2"] .lv-plate[data-plate="3"] .lv-solid{opacity:0;transform:translateY(-24px)}
.hm-levels.is-live[data-level="1"] .lv-plate:is([data-plate="2"],[data-plate="3"]) .lv-ghost,.hm-levels.is-live[data-level="2"] .lv-plate[data-plate="3"] .lv-ghost{opacity:1}
.hm-levels.is-live .lv-pawn{opacity:0;transform:translateY(-14px);transition:opacity .3s,transform .5s var(--ease)}
.hm-levels.is-live[data-level="1"] [data-plate="1"] .lv-pawn,.hm-levels.is-live[data-level="2"] [data-plate="2"] .lv-pawn,.hm-levels.is-live[data-level="3"] [data-plate="3"] .lv-pawn{opacity:1;transform:none;transition-delay:calc(.5s + var(--i) * .12s)}
.hm-levels.is-live .hm-stack-labels li{opacity:.35}
.hm-levels.is-live[data-level="1"] .hm-stack-labels li:nth-child(1),.hm-levels.is-live[data-level="2"] .hm-stack-labels li:nth-child(-n+2),.hm-levels.is-live[data-level="3"] .hm-stack-labels li{opacity:1}
.hm-levels.is-live:is([data-level="1"],[data-level="2"]) .hm-stack-labels li:nth-child(3) b,.hm-levels.is-live[data-level="1"] .hm-stack-labels li:nth-child(2) b{border:1px dashed var(--line-strong);background:transparent;color:var(--ink-soft)}

/* Questions: the shared FAQ kit on the porcelain ground, before the close. */
.hm-faq{padding:clamp(96px,12vh,140px) 0;background:var(--porcelain)}
.hm-faq .faq-section-head .eyebrow{display:flex}
.hm-faq+.hm-close{border-top:1px solid var(--line)}

/* Close */
.hm-close{padding:clamp(100px,14vh,150px) 0;background:radial-gradient(ellipse at 50% 118%,rgba(var(--accent-rgb),.09),transparent 62%),var(--porcelain);text-align:center}
.hm-close .eyebrow{justify-content:center}
.hm-close h2{max-width:14ch;margin:26px auto 0;font-size:clamp(46px,6.6vw,100px);line-height:.98;letter-spacing:-.058em;text-wrap:balance}
.hm-close p{max-width:56ch;margin:30px auto 0;font-size:17px;line-height:1.75;color:var(--ink-soft)}
.hm-close-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px 34px;margin-top:38px}
.hm-close-actions .text-link{margin-top:0}
.hm-close small{display:block;max-width:60ch;margin:24px auto 0;font-size:12px;line-height:1.7;color:var(--ink-soft)}

@media(max-width:999px){
  .hm-levels-head{grid-template-columns:1fr}
  .hm-levels-head p{margin-top:24px}
  .hm-stage-grid{grid-template-columns:1fr;gap:40px}
  .hm-stack{position:relative;top:auto;order:-1}
  .hm-stack .hm-stack-frame{width:min(100%,360px)}
}
@media(max-width:900px){
  .hm-hero{padding-top:126px}
  .hm-hero-grid{grid-template-columns:1fr;gap:40px}
  .hm-blueprint .hm-stack-frame{width:min(70%,320px);margin:0 auto}
}
@media(max-width:700px){
  .hm-hero h1{font-size:clamp(46px,12.5vw,66px)}
  .hm-hero-lead{font-size:16px;margin-top:26px}
  .hm-hero-foot{flex-direction:column;gap:6px}
  .hm-assurance{flex-direction:column;align-items:flex-start;gap:8px}
  .hm-assurance li{gap:0}
  .hm-assurance li+li::before{display:none}
  .hm-direction{height:160vh}
  .hm-statement{font-size:clamp(28px,8vw,40px)}
  .hm-levels-head h2{font-size:clamp(34px,9vw,46px)}
  .hm-levels-foot{flex-direction:column;align-items:flex-start}
  .hm-faq{padding:76px 0}
  .hm-close h2{font-size:clamp(44px,12vw,62px)}
  .hm-close p{font-size:16px}
  .hm-stack-labels{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hm-page *,.hm-page *::before,.hm-page *::after{animation:none!important;transition:none!important}
  .hm-direction{height:auto}
  .hm-direction-sticky{position:static;height:auto;padding:110px 0}
}