:root { --night:#07111b; --surface:#0d1926; --graphite:#263646; --steel:#aab6c3; --frost:#f4f7fa; --blue:#3478e5; --deep-blue:#2453a6; --max:1200px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-color:var(--blue) var(--night); scrollbar-width:thin; }
body { margin:0; background:var(--night); color:var(--frost); font-family:Inter,Arial,sans-serif; line-height:1.5; }
body::before { content:""; position:fixed; z-index:-1; inset:0; background:radial-gradient(circle at 72% 4%,rgba(52,120,229,.1),transparent 30rem),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px); background-size:auto,44px 44px,44px 44px; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track { background:var(--night); border-radius:999px; box-shadow:inset 0 0 0 1px var(--graphite); }
*::-webkit-scrollbar-thumb { border:2px solid var(--night); border-radius:999px; background:linear-gradient(90deg,rgba(52,120,229,.72),rgba(36,83,166,.88)); }
*::-webkit-scrollbar-thumb:vertical { background:linear-gradient(180deg,rgba(52,120,229,.72),rgba(36,83,166,.88)); }
*::-webkit-scrollbar-thumb:hover { background:linear-gradient(90deg,#4b8cf0,var(--blue)); }
*::-webkit-scrollbar-thumb:vertical:hover { background:linear-gradient(180deg,#4b8cf0,var(--blue)); }
*::-webkit-scrollbar-corner { background:var(--night); }
a { color:inherit; text-decoration:none; } button,input,textarea { font:inherit; } button { cursor:pointer; } .section-shell { width:min(calc(100% - 48px),var(--max)); margin-inline:auto; } .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; }.contact-honeypot { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:absolute; left:1rem; top:-5rem; padding:.8rem 1rem; background:var(--blue); color:white; z-index:10; }.skip-link:focus { top:1rem; }
.site-header { height:85px; display:flex; width:min(calc(100% - 48px),var(--max)); margin:auto; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(170,182,195,.17); }.brand img { display:block; width:164px; height:auto; }.site-nav { display:flex; align-items:center; gap:2rem; font-size:.83rem; }.site-nav>a:not(.button) { color:#d9e0e7; }.site-nav>a:not(.button):hover,.text-link:hover { color:var(--blue); }.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:.7rem 1.1rem; border:1px solid var(--blue); border-radius:4px; color:#fff; background:var(--blue); font-size:.85rem; font-weight:600; transition:background .2s,border-color .2s,transform .2s; }.button:hover { background:var(--deep-blue); border-color:var(--deep-blue); transform:translateY(-1px); }.button-small { min-height:40px; padding:.5rem .85rem; }.menu-toggle { display:none; background:none; border:0; padding:.5rem; }
.hero { min-height:610px; display:grid; grid-template-columns:1.04fr .96fr; gap:5rem; padding:6.4rem 0 5rem; align-items:center; }.eyebrow { margin:0 0 1rem; color:#65a6ff; font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.055em; text-transform:uppercase; }.signal-dot { display:inline-block; width:7px; height:7px; margin:0 .6rem .05rem 0; border:1px solid var(--blue); border-radius:50%; background:var(--blue); box-shadow:0 0 0 3px rgba(52,120,229,.15); }.hero h1 { max-width:640px; margin:0; font-size:clamp(2.7rem,5vw,4.9rem); line-height:1.06; letter-spacing:-.052em; }.hero-intro { max-width:615px; margin:1.6rem 0 0; color:var(--steel); font-size:1.05rem; line-height:1.65; }.hero-actions { display:flex; gap:1.15rem; align-items:center; margin-top:2rem; }.text-link { display:inline-flex; gap:.65rem; align-items:center; color:#e3e9ee; font-size:.88rem; font-weight:500; }.text-link-arrow { color:var(--blue); font-size:1rem; font-weight:900; transition:transform .2s ease; }.text-link:hover .text-link-arrow { transform:translateX(3px); }.trust-note { max-width:540px; display:flex; gap:1rem; margin:2.7rem 0 0; color:var(--steel); font-size:.82rem; line-height:1.55; }.shield { color:var(--blue); font-size:1.8rem; line-height:1; }
.hero-visual { overflow:hidden; border:1px solid rgba(170,182,195,.22); border-radius:4px; background:linear-gradient(135deg,rgba(13,25,38,.96),rgba(7,17,27,.76)); box-shadow:0 24px 80px rgba(0,0,0,.25); }.visual-topline,.visual-footer { display:flex; justify-content:space-between; padding:1rem 1.15rem; color:var(--steel); font-family:"IBM Plex Mono",monospace; font-size:.69rem; text-transform:uppercase; letter-spacing:.04em; }.visual-topline { border-bottom:1px solid rgba(170,182,195,.16); }.visual-footer { border-top:1px solid rgba(170,182,195,.16); }.live { display:flex; align-items:center; gap:.35rem; color:#81b2fa; }.live i { width:6px; height:6px; border-radius:50%; background:#5aeb9c; box-shadow:0 0 8px #5aeb9c; }.decision-map { position:relative; height:395px; background:radial-gradient(circle at 72% 48%,rgba(52,120,229,.12),transparent 12rem); }.map-lines { position:absolute; inset:0; width:100%; height:100%; }.map-lines path { fill:none; stroke:rgba(92,152,238,.55); stroke-width:1.4; stroke-dasharray:5 5; }.map-lines circle { fill:var(--blue); stroke:var(--night); stroke-width:2; }.map-node { position:absolute; z-index:1; width:110px; min-height:73px; padding:.8rem; border:1px solid rgba(94,150,229,.52); background:rgba(11,27,43,.9); box-shadow:0 7px 20px rgba(0,0,0,.16); }.map-node b { display:block; color:#fff; font-family:"IBM Plex Mono",monospace; font-size:.8rem; }.map-node small { display:block; margin-top:.2rem; color:var(--steel); font-size:.65rem; line-height:1.25; }.node-origin { left:7%; top:20%; border-color:var(--blue); }.node-t { left:34%; top:9%; }.node-r { left:34%; top:37%; }.node-a { left:34%; top:66%; }.node-c { left:69%; top:50%; }.node-e { right:6%; bottom:9%; background:rgba(36,83,166,.3); border-color:#75a8f0; }
.services-section { padding:4rem 0 3rem; }.section-heading { display:block; max-width:760px; margin-bottom:2.2rem; }.section-heading .eyebrow { margin-bottom:.75rem; }.section-heading h2,.method-intro h2,.experience h2,.contact h2 { max-width:760px; margin:0; font-size:clamp(2rem,3.4vw,3.3rem); letter-spacing:-.045em; line-height:1.14; }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(170,182,195,.2); border-left:1px solid rgba(170,182,195,.2); }.service-card { position:relative; min-height:220px; padding:1.6rem 1.7rem; border-right:1px solid rgba(170,182,195,.2); border-bottom:1px solid rgba(170,182,195,.2); background:rgba(13,25,38,.47); box-shadow:inset 0 2px 0 rgba(170,182,195,.64); transition:background .2s,box-shadow .2s; }.service-card:hover { background:rgba(23,47,72,.6); box-shadow:inset 0 2px 0 var(--blue); }.card-number { display:block; color:var(--blue); font-family:"IBM Plex Mono",monospace; font-size:1.8rem; font-weight:600; line-height:1; }.service-card h3 { margin:1rem 0 .65rem; font-family:"IBM Plex Mono",monospace; font-size:.82rem; font-weight:500; letter-spacing:.035em; line-height:1.35; text-transform:uppercase; }.service-card p { margin:0; color:var(--steel); font-size:.84rem; line-height:1.55; }
.impact { padding:0 0 5.5rem; }.impact-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.8rem,1.5vw,1.25rem); margin-top:clamp(1rem,2vw,1.5rem); background:transparent; }.impact-grid article { position:relative; min-height:190px; padding:1.55rem var(--experience-gutter) 1.7rem; overflow:hidden; background:linear-gradient(135deg,rgba(15,31,47,.92),rgba(8,19,31,.48) 72%,rgba(8,19,31,0)); }.impact-number { display:block; color:#6aa8ff; font-family:Inter,Arial,sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.16em; line-height:1; }.impact-shift { display:flex; align-items:center; gap:clamp(.55rem,1vw,.9rem); margin:.75rem 0 .8rem; color:var(--frost); font-family:Inter,Arial,sans-serif; font-size:clamp(1.7rem,2.85vw,2.65rem); font-weight:700; letter-spacing:-.055em; line-height:1; white-space:nowrap; }.impact-from { color:#f1f5f9; }.impact-arrow { color:var(--blue); font-size:1.18em; font-weight:800; line-height:.8; transform:translateY(-.03em); }.impact-to { color:#fff; }.impact-grid p { max-width:500px; margin:0; color:#c0cbd5; font-size:.96rem; line-height:1.58; }
.method-section { display:grid; grid-template-columns:1fr 1fr; gap:6rem; padding:3rem 0; }.method-intro p:not(.eyebrow) { max-width:560px; margin:1.5rem 0 0; color:var(--steel); }.method-steps { list-style:none; margin:0; padding:0; border-top:1px solid rgba(170,182,195,.22); }.method-steps li { display:grid; grid-template-columns:60px 1fr; gap:1rem; padding:1.25rem 0; border-bottom:1px solid rgba(170,182,195,.22); }.method-steps li>span { color:var(--blue); font-family:"IBM Plex Mono",monospace; font-size:.73rem; }.method-steps h3 { margin:0; font-size:1.05rem; }.method-steps p { margin:.35rem 0 0; color:var(--steel); font-size:.85rem; line-height:1.55; }
.method-steps li:last-child { border-bottom:0; }
.principles { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:0; border:1px solid rgba(170,182,195,.2); background:rgba(13,25,38,.5); }.principles article { min-height:155px; padding:1.45rem; border-right:1px solid rgba(170,182,195,.2); }.principles article:last-child { border:0; }.principle-mark { display:flex; align-items:center; width:34px; height:34px; color:var(--blue); font-size:1.45rem; }.principle-mark i { filter:drop-shadow(0 3px 5px rgba(0,0,0,.3)); }.principles h3 { margin:.65rem 0 .3rem; font-size:.9rem; }.principles p { margin:0; color:var(--steel); font-size:.76rem; line-height:1.5; }
.experience { --experience-gutter:clamp(1.35rem,2vw,1.7rem); --experience-half-cut:clamp(150px,14.2vw,170px); --experience-meeting-height:calc(var(--experience-half-cut) * 2); --experience-copy-top:clamp(6rem,8vw,6.5rem); padding:3rem 0 5.5rem; border-top:0; }.experience-stage { position:relative; min-height:clamp(400px,43vw,520px); overflow:hidden; background:transparent; }.experience-intro { position:absolute; z-index:2; left:0; right:0; bottom:clamp(2rem,4vw,3.5rem); max-width:990px; }.experience-intro .eyebrow { margin-bottom:.7rem; }.experience-intro h2 { max-width:980px; margin:0; color:#fff; font-size:clamp(2.35rem,4.35vw,4.2rem); line-height:1.02; text-wrap:balance; }.experience-meeting { position:relative; isolation:isolate; display:grid; height:var(--experience-meeting-height); grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden; }.experience-meeting::before,.experience-meeting::after { content:""; position:absolute; z-index:-1; inset:0; }.experience-meeting::before { background:#0b1825; clip-path:polygon(0 0,calc(50% + var(--experience-half-cut)) 0,calc(50% - var(--experience-half-cut)) 100%,0 100%); }.experience-meeting::after { background:linear-gradient(135deg,#2453a6,#3478e5); clip-path:polygon(calc(50% + var(--experience-half-cut)) 0,100% 0,100% 100%,calc(50% - var(--experience-half-cut)) 100%); }.experience-meeting-heading { position:absolute; z-index:1; inset:0 0 auto; margin:0; padding:clamp(1.9rem,2.8vw,2.6rem) var(--experience-gutter) 0; color:#d8e8ff; }.experience-context { min-width:0; padding:var(--experience-copy-top) 0 2rem var(--experience-gutter); }.experience-response { z-index:1; grid-column:1/-1; grid-row:1; min-width:0; padding:var(--experience-copy-top) 0 2rem; pointer-events:none; }.experience-context::before { content:""; float:right; width:var(--experience-half-cut); height:calc(var(--experience-meeting-height) - var(--experience-copy-top)); shape-outside:polygon(100% calc(var(--experience-half-cut) - var(--experience-copy-top)),100% 100%,0 100%); shape-margin:.85rem; }.experience-response::before { content:""; float:left; width:100%; height:calc(var(--experience-meeting-height) - var(--experience-copy-top)); shape-outside:polygon(0 0,calc(50% + var(--experience-half-cut) - var(--experience-copy-top)) 0,calc(50% - var(--experience-half-cut)) 100%,0 100%); shape-margin:.85rem; }.experience-text { margin:0; color:#c1ccd7; font-size:clamp(.96rem,1.35vw,1.08rem); line-height:1.72; }.experience-response .experience-text { margin-right:var(--experience-gutter); color:#fff; }
.method-section+.experience { padding-top:2rem; border-top:0; }
.experience { --experience-half-cut:clamp(138px,12.5vw,150px); --experience-copy-top:clamp(5.25rem,7vw,5.75rem); }
.experience-meeting-heading { z-index:3; }
.experience-meeting-heading { padding-top:clamp(1.5rem,2vw,1.9rem); }
.experience-context { z-index:2; grid-column:1; grid-row:1; }
.experience-response { padding-right:var(--experience-gutter); }
.experience-response::before { shape-outside:polygon(0 0,calc(50% + var(--experience-gutter)/2 + var(--experience-half-cut) - var(--experience-copy-top)) 0,calc(50% + var(--experience-gutter)/2 - var(--experience-half-cut)) 100%,0 100%); }
.experience-response .experience-text { margin-right:0; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:7rem; padding:3rem 0 7rem; }.contact { border-top:1px solid rgba(170,182,195,.2); }.principles+.contact { border-top:0; }.contact>div p:not(.eyebrow) { max-width:545px; margin:1.5rem 0 0; color:var(--steel); line-height:1.65; }.contact-form { padding:1.6rem; border:1px solid rgba(170,182,195,.25); background:rgba(13,25,38,.7); }.contact-form label { display:block; margin-bottom:.5rem; color:#dce5ed; font-size:.8rem; font-weight:500; }.contact-form .message-label { margin-top:1rem; }.contact-form input,.contact-form textarea { width:100%; border:1px solid rgba(170,182,195,.28); border-radius:3px; background:#081521; color:var(--frost); outline:0; }.contact-form input { height:50px; padding:0 .8rem; }.contact-form textarea { display:block; padding:.8rem; resize:vertical; }.contact-form input:focus,.contact-form textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(52,120,229,.16); }.form-actions { display:flex; justify-content:flex-end; margin-top:1rem; }.form-actions .button { min-width:132px; }.form-note,.form-status { min-height:1.2rem; margin:.7rem 0 0; color:var(--steel); font-size:.74rem; }.form-status { color:#8ac0ff; }
.contact-form .contact-honeypot { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.7rem 0 2.5rem; border-top:1px solid rgba(170,182,195,.2); color:var(--steel); font-size:.75rem; }.site-footer img { width:120px; }.site-footer a { color:#dbe4ed; }
@media (max-width:900px) { .site-nav { gap:1rem; }.hero { gap:2.5rem; }.service-grid,.principles { grid-template-columns:repeat(2,1fr); }.principles article:nth-child(2) { border-right:0; }.principles article:nth-child(-n+2) { border-bottom:1px solid rgba(170,182,195,.2); }.method-section,.contact { gap:3.5rem; }.experience-story { gap:3rem; } }
@media (max-width:690px) { .section-shell,.site-header { width:min(calc(100% - 32px),var(--max)); }.site-header { height:70px; position:relative; }.brand img { width:135px; }.menu-toggle { display:block; position:relative; width:42px; height:42px; }.menu-toggle span:not(.sr-only) { position:absolute; left:10px; width:22px; height:1px; background:var(--frost); transition:transform .2s; }.menu-toggle span:nth-child(2) { top:16px; }.menu-toggle span:nth-child(3) { top:25px; }.menu-toggle[aria-expanded="true"] span:nth-child(2) { top:21px; transform:rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-child(3) { top:21px; transform:rotate(-45deg); }.site-nav { display:none; position:absolute; z-index:2; left:0; right:0; top:69px; padding:1.2rem 1rem 1.5rem; border:1px solid rgba(170,182,195,.2); background:#0d1926; flex-direction:column; align-items:stretch; }.site-nav.open { display:flex; }.site-nav .button { margin-top:.5rem; }.hero { grid-template-columns:1fr; min-height:0; padding:4.3rem 0 4rem; }.hero h1 { font-size:clamp(2.65rem,12vw,4rem); }.hero-visual { margin-top:.5rem; }.decision-map { height:340px; }.node-origin { left:5%; }.node-t,.node-r,.node-a { left:32%; }.node-c { left:63%; }.node-e { right:3%; }.section-heading,.method-section,.contact { grid-template-columns:1fr; }.section-heading { gap:.25rem; }.services-section { padding:3rem 0 5rem; }.service-grid,.impact-grid { grid-template-columns:1fr; }.service-card { min-height:205px; }.impact { padding-bottom:5rem; }.impact-grid article { min-height:0; }.method-section { padding:4.5rem 0; }.principles { grid-template-columns:1fr; margin-bottom:0; }.principles article,.principles article:nth-child(2) { border-right:0; border-bottom:1px solid rgba(170,182,195,.2); }.principles article:last-child { border-bottom:0; }.experience { padding:4.5rem 0 5rem; }.experience-intro { margin-bottom:2rem; }.experience-story { grid-template-columns:1fr; gap:2rem; }.experience-copy { order:1; }.experience-visual { order:2; }.contact { padding:4.5rem 0; }.form-row { flex-direction:column; }.site-footer { flex-wrap:wrap; } }

/* C89 visual assets: reveal only once preloaded, then fade in within one second. */
.site-header { height:110px; }
.brand img { width:clamp(190px,22vw,260px); }
.hero-visual { background:#0b1622; }
.decision-photo { position:relative; min-height:395px; margin:0; overflow:hidden; background:#0a121b; }
.decision-photo::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(7,17,27,.28),rgba(7,17,27,.04) 58%,rgba(7,17,27,.18)); }
.decision-photo .fade-asset { width:100%; height:395px; object-fit:cover; object-position:58% center; }
.fade-asset { display:block; opacity:0; transition:opacity 1s ease-out; }
.fade-asset.is-loaded { opacity:1; }

.experience-visual { position:absolute; inset:0; margin:0; overflow:hidden; background:transparent; }.experience-visual::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(7,17,27,.98) 0%,rgba(7,17,27,.88) 27%,rgba(7,17,27,.38) 65%,transparent 100%),linear-gradient(0deg,rgba(7,17,27,.86) 0%,rgba(7,17,27,.28) 58%,transparent 88%); }.experience-visual .fade-asset { width:100%; height:100%; object-fit:cover; object-position:61% center; mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 10%,#000 22%,#000 100%),linear-gradient(90deg,#000 0%,#000 76%,rgba(0,0,0,.62) 88%,transparent 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 10%,#000 22%,#000 100%),linear-gradient(90deg,#000 0%,#000 76%,rgba(0,0,0,.62) 88%,transparent 100%); mask-composite:intersect; -webkit-mask-composite:source-in; }

@media (max-width:900px) {
  .site-header { height:96px; }
  .brand img { width:230px; }
  .decision-photo,.decision-photo .fade-asset { min-height:340px; height:340px; }
}

@media (max-width:690px) {
  .site-header { height:84px; }
  .brand img { width:190px; }
  .site-nav { top:83px; }
  .decision-photo,.decision-photo .fade-asset { min-height:270px; height:270px; }
  .decision-photo .fade-asset { object-position:63% center; }
}

/* The hero photograph is deliberately unframed; TRACE is explained in Method. */
.hero-visual { border:0; border-radius:0; background:none; box-shadow:none; }
.decision-photo { border-radius:4px; }
.method-model { margin-top:2rem; padding:1.1rem 1.2rem 1.2rem; border:1px solid rgba(94,150,229,.33); border-left:3px solid var(--blue); background:rgba(13,25,38,.52); }
.method-model .eyebrow { margin-bottom:.55rem; }
.method-model p:not(.eyebrow) { margin:0; color:#c2ceda; font-size:.84rem; line-height:1.55; }
.model-fields { display:flex; gap:.45rem; flex-wrap:wrap; margin-top:1rem; }
.model-fields span { display:inline-flex; min-width:31px; height:28px; align-items:center; justify-content:center; border:1px solid rgba(94,150,229,.5); color:#9bc3ff; background:rgba(52,120,229,.1); font-family:"IBM Plex Mono",monospace; font-size:.72rem; }

/* The photo occupies only the right visual field; copy keeps the site background. */
html,body { overflow-x:clip; }
.hero { position:relative; display:block; min-height:clamp(540px,52vw,650px); padding:clamp(3.4rem,4.5vw,4.75rem) 0 clamp(2.5rem,3.5vw,3.75rem); isolation:isolate; overflow:visible; }
.hero-copy { position:relative; z-index:1; max-width:min(740px,58%); }
.hero-backdrop { position:absolute; z-index:0; top:var(--hero-top,0); right:var(--hero-right,0); bottom:0; width:var(--hero-width,68%); overflow:hidden; pointer-events:none; }
.hero-backdrop::after { content:""; display:block; position:absolute; z-index:2; inset:0; background:linear-gradient(90deg,rgba(7,17,27,.88) 0%,rgba(7,17,27,.62) 38%,rgba(7,17,27,.34) 100%); opacity:var(--hero-dim,0); pointer-events:none; }
.hero-backdrop .fade-asset { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:72% center; filter:saturate(var(--hero-saturation,1.04)) contrast(1.02) brightness(var(--hero-brightness,1.03)); mask-image:var(--hero-mask-x,linear-gradient(90deg,transparent 0%,rgba(0,0,0,.62) 13%,#000 22%,#000 66%,rgba(0,0,0,.72) 82%,transparent 100%)),var(--hero-mask-y,linear-gradient(180deg,transparent 0%,rgba(0,0,0,.32) 8%,#000 18%,#000 73%,rgba(0,0,0,.54) 87%,transparent 100%)); -webkit-mask-image:var(--hero-mask-x,linear-gradient(90deg,transparent 0%,rgba(0,0,0,.62) 13%,#000 22%,#000 66%,rgba(0,0,0,.72) 82%,transparent 100%)),var(--hero-mask-y,linear-gradient(180deg,transparent 0%,rgba(0,0,0,.32) 8%,#000 18%,#000 73%,rgba(0,0,0,.54) 87%,transparent 100%)); mask-composite:intersect; -webkit-mask-composite:source-in; }
.service-callout { position:relative; --service-bubble-arrow-x:50%; }
.service-grid { position:relative; isolation:isolate; }
.service-card { overflow:hidden; cursor:pointer; }
.service-card:focus-visible { outline:1px solid #8dbdff; outline-offset:-4px; }
.service-card.is-open { background:rgba(23,47,72,.68); box-shadow:inset 0 2px 0 var(--blue); }
.service-detail-panel { position:absolute; z-index:20; width:min(380px,calc(100% - 24px)); padding:1rem 1.15rem; overflow:visible; border:1px solid rgba(255,255,255,.72); border-radius:18px; background:#edf1f4; box-shadow:0 18px 42px rgba(0,0,0,.42); opacity:0; pointer-events:none; transform:translateY(.55rem) scale(.96); transform-origin:top center; transition:opacity .16s ease,transform .18s ease,visibility .18s ease; visibility:hidden; }
.service-detail-panel::before { content:""; position:absolute; top:-9px; left:calc(var(--service-bubble-arrow-x) - 9px); width:18px; height:18px; background:#edf1f4; clip-path:polygon(50% 0,0 100%,100% 100%); transition:left .2s ease; }
.service-detail-panel.is-active { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); visibility:visible; }
.service-detail-panel p { margin:0; color:#263646; font-size:.8rem; font-weight:600; line-height:1.5; }
.model-fields { gap:.55rem; }
.model-fields .trace-field { display:inline-flex; min-width:31px; height:28px; align-items:center; justify-content:center; padding:0 .45rem; border:1px solid rgba(94,150,229,.5); background:rgba(52,120,229,.1); color:#9bc3ff; font-family:"IBM Plex Mono",monospace; font-size:.72rem; line-height:1; transition:background .18s,border-color .18s,color .18s,transform .18s; }
.model-fields .trace-field:hover,.model-fields .trace-field:focus-visible,.model-fields .trace-field.is-active { border-color:#8dbdff; background:rgba(52,120,229,.28); color:#f4f7fa; transform:translateY(-1px); outline:0; }
.trace-callout { position:relative; --trace-bubble-arrow-x:1rem; }
.trace-callout .model-fields { margin-top:1rem; }
.trace-detail-panel { position:absolute; z-index:30; top:calc(100% + .8rem); left:0; width:min(390px,calc(100vw - 48px)); padding:1rem 1.15rem; border:1px solid rgba(255,255,255,.72); border-radius:18px; background:#edf1f4; box-shadow:0 18px 42px rgba(0,0,0,.42); opacity:0; pointer-events:none; transform:translateY(.55rem) scale(.96); transform-origin:top left; transition:opacity .16s ease,transform .18s ease,visibility .18s ease; visibility:hidden; }
.trace-detail-panel::before { content:""; position:absolute; top:-9px; left:calc(var(--trace-bubble-arrow-x) - 9px); width:18px; height:18px; background:#edf1f4; clip-path:polygon(50% 0,0 100%,100% 100%); }
.trace-detail-panel.is-active { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); visibility:visible; }
.method-model p.trace-detail-title { margin:0; color:#111c26; font-size:.8rem; font-weight:700; line-height:1.3; }
.method-model p.trace-detail-copy { margin:.3rem 0 0; color:#263646; font-size:.78rem; line-height:1.48; }
.hero-proof { display:grid; grid-template-columns:1fr 1fr 1.12fr; max-width:740px; margin-top:1.45rem; overflow:hidden; border:1px solid rgba(120,173,248,.3); border-radius:4px; background:rgba(7,17,27,.9); box-shadow:0 14px 34px rgba(0,0,0,.2); }
.hero-proof p { display:flex; min-width:0; min-height:112px; align-items:flex-start; gap:.78rem; margin:0; padding:1rem 1.05rem; color:#b9c5d0; font-size:.84rem; line-height:1.48; }
.hero-proof p + p { border-left:1px solid rgba(170,182,195,.2); }
.proof-icon { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border:1px solid rgba(94,150,229,.4); border-radius:3px; background:rgba(52,120,229,.12); color:#67a7ff; font-size:1rem; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.32)); }
.proof-copy { min-width:0; }
.proof-copy>span { display:block; margin-top:.22rem; }
.hero-proof strong { display:block; color:var(--frost); font-size:1rem; font-weight:650; line-height:1.28; }

@media (max-width:900px) {
  .hero { min-height:540px; padding:4rem 0 3.5rem; }
  .hero-copy { max-width:min(590px,62%); }
  .hero-backdrop { --hero-width:76%; --hero-dim:.5; }
  .hero-copy { text-shadow:0 1px 3px rgba(7,17,27,.9); }
}

@media (max-width:690px) {
  .services-section { padding-bottom:2.5rem; }
  .method-section { padding-block:2.5rem; }
  .experience { padding-block:2.5rem; }
  .contact { padding-top:2.5rem; }
  .service-card { min-height:205px; padding-bottom:1.55rem; }
}

@media (max-width:690px) {
  .hero { display:block; min-height:730px; padding:3.25rem 0 2.5rem; overflow:visible; }
  .hero-copy { max-width:100%; }
  .hero-backdrop { --hero-top:8.5rem; --hero-right:-1rem; --hero-width:112%; --hero-dim:1; --hero-saturation:.92; --hero-brightness:.9; --hero-mask-x:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.46) 18%,#000 38%,#000 67%,rgba(0,0,0,.7) 84%,transparent 100%); --hero-mask-y:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.42) 12%,#000 27%,#000 68%,rgba(0,0,0,.48) 86%,transparent 100%); }
  .hero-proof { grid-template-columns:1fr; background:rgba(7,17,27,.93); }
  .hero-proof p { min-height:0; padding:.9rem; font-size:.88rem; }
  .hero-proof p + p { border-top:1px solid rgba(170,182,195,.18); border-left:0; }
}

@media (max-width:690px) {
  .form-actions .button { width:100%; }
}

@media (max-width:900px) {
  .site-header { position:relative; height:84px; }
  .brand img { width:190px; }
  .menu-toggle { display:block; position:relative; width:42px; height:42px; }
  .menu-toggle span:not(.sr-only) { position:absolute; left:10px; width:22px; height:1px; background:var(--frost); transition:transform .2s; }
  .menu-toggle span:nth-child(2) { top:16px; }
  .menu-toggle span:nth-child(3) { top:25px; }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { top:21px; transform:rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { top:21px; transform:rotate(-45deg); }
  .site-nav { display:none; position:absolute; z-index:8; left:0; right:0; top:83px; padding:1.2rem 1rem 1.5rem; border:1px solid rgba(170,182,195,.2); background:#0d1926; flex-direction:column; align-items:stretch; }
  .site-nav.open { display:flex; }
  .site-nav .button { margin-top:.5rem; }
}

/* The language switch stays visible beside the mobile menu. */
.header-inner>.language-toggle{order:2}.header-inner>.site-nav{order:1}.header-inner>.menu-toggle{order:3}
@media(max-width:900px){.header-inner>.language-toggle{margin-left:auto}.header-inner{gap:.65rem}}

/* Experience: photographic premise, diagonal meeting, then observable outcomes. */
@media (max-width:900px) {
  .experience-stage { min-height:430px; }
  .impact-grid article { min-height:205px; padding:1.45rem var(--experience-gutter); }
}

/* Keep navigation available while content moves underneath its frosted surface. */
.site-header { position:sticky; top:0; z-index:100; width:100%; max-width:none; margin:0; border-bottom:1px solid rgba(170,182,195,.24); background:rgba(7,17,27,.52); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.header-inner { display:flex; width:min(calc(100% - 48px),var(--max)); height:100%; margin:auto; align-items:center; justify-content:space-between; gap:1.5rem; }
.site-nav { gap:clamp(.85rem,1.7vw,1.7rem); }
.nav-vectis { display:inline-flex; min-height:40px; align-items:center; flex:0 0 auto; }
.nav-vectis img { display:block; width:96px; height:auto; transition:filter .2s ease,transform .2s ease; }
.nav-vectis:hover img { filter:drop-shadow(0 0 8px rgba(123,115,247,.6)); transform:translateY(-1px); }
.nav-vectis:focus-visible { outline:1px solid #8dbdff; outline-offset:3px; }
section[id] { scroll-margin-top:110px; }
@media (max-width:900px) {
  .site-header { position:sticky; }
  .header-inner { width:min(calc(100% - 32px),var(--max)); }
  .site-nav { left:auto; right:0; width:min(340px,calc(100vw - 32px)); background:rgba(13,25,38,.96); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
  .nav-vectis img { width:112px; }
  section[id] { scroll-margin-top:84px; }
}

@media (max-width:900px) {
  .experience { padding-block:2.5rem 4.5rem; }
  .experience-stage { min-height:430px; }
  .experience-visual::after { background:linear-gradient(90deg,rgba(7,17,27,.94),rgba(7,17,27,.5) 70%,rgba(7,17,27,.18)),linear-gradient(0deg,rgba(7,17,27,.94) 4%,rgba(7,17,27,.52) 56%,rgba(7,17,27,.12)); }
  .experience-visual .fade-asset { object-position:66% center; }
  .experience-intro { left:0; right:0; bottom:1.7rem; }
  .experience-intro h2 { font-size:clamp(2.1rem,10vw,3rem); line-height:1.06; }
  .experience-meeting { display:block; height:auto; min-height:0; }
  .experience-meeting::before,.experience-meeting::after { display:none; }
  .experience-meeting-heading { position:static; padding:2rem var(--experience-gutter) 0; background:#0b1825; }
  .experience-context::before,.experience-response::before { display:none; }
  .experience-context,.experience-response { padding:1.1rem var(--experience-gutter) 2rem; }
  .experience-response { pointer-events:auto; }
  .experience-response .experience-text { margin-right:0; }
  .experience-context { background:#0b1825; }
  .experience-response { background:linear-gradient(135deg,#2453a6,#3478e5); }
  .impact-grid { grid-template-columns:1fr; }
  .impact-grid article { min-height:0; }
  .impact-shift { gap:.45rem; font-size:clamp(1.35rem,6vw,1.75rem); letter-spacing:-.045em; }
}

/* Keep the direct language switch and menu within narrow headers. */
.header-inner>.site-nav{margin-left:auto}
@media(max-width:900px){.site-header .header-inner{gap:10px}.header-inner>.menu-toggle{flex:none}.header-inner>.site-nav{margin-left:0}}
@media(max-width:480px){.header-inner>.brand img{width:160px}}

/* On desktop the flag sits immediately before the contact action. */
@media(min-width:901px){.header-inner>.brand{margin-right:auto}.header-inner>.site-nav{display:contents}.site-nav>a:not(.button){order:1}.site-nav>.button{order:3}}