/* DevOps adaptation of the supplied Kage palette, type and atmospheric composition. */
:root{--bg:#182330;--surface:#263544;--surface-2:#304253;--text:#f5f8fc;--muted:#c5d1dd;--line:rgba(220,234,248,.28);--accent:#5eead4;--accent-dark:#263d49}
body{background:radial-gradient(ellipse at 78% 8%,#263d4966,transparent 35%),var(--bg);font-weight:300}
body::after{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.site-header{max-width:1440px;padding:1.6rem 3.5rem;border-bottom:1px solid var(--line)}
.brand-mark{background:transparent;border:1px solid var(--accent);color:var(--accent);width:42px;height:42px;font-weight:400}
.brand{font-weight:400;font-size:15px}.brand-role{display:block;color:var(--muted);font:9px monospace;letter-spacing:.16em;margin-top:4px}
.theme-nav{gap:2.3rem}.theme-nav a{font-size:12px;letter-spacing:.04em}
.hero{max-width:1440px;grid-template-columns:1fr 1.1fr;gap:2rem;padding:5rem 3.5rem 4rem;min-height:740px}
.hero h1{font-weight:400;font-size:clamp(3.4rem,6.1vw,6rem);letter-spacing:-.055em;line-height:1.08}
.outline-word{font-weight:400;font-size:1.18em;color:var(--accent);-webkit-text-stroke:0;animation:none;line-height:1.08}
.hero-line-final{font-size:.48em;letter-spacing:-.025em;margin-top:.65em}
.hero-text{font-size:16px;max-width:490px;line-height:1.8}.eyebrow{font:10px/1.6 monospace;letter-spacing:.19em;font-weight:400}
.availability-pill{border:0;padding:0;color:var(--muted);font-weight:400;font-size:11px;margin-bottom:2rem}.availability-pill span{background:#c9a24a;box-shadow:none;animation:none}
.button{font-size:12px;font-weight:500;padding:.9rem 1.25rem}.button.primary{color:#fff}.hero-actions{gap:.6rem;max-width:540px}.hero-actions .button:last-child{border:0;padding-left:0;width:fit-content;margin-top:.35rem}
.cloud-stage{height:560px;position:relative;min-width:0;background:radial-gradient(ellipse at center,#263d4955,transparent 67%)}
#cloud-scene{width:100%;height:100%;display:block;touch-action:pan-y}.scene-label{position:absolute;top:15px;left:22px;right:22px;display:flex;align-items:center;gap:8px;font:9px monospace;letter-spacing:.1em;color:var(--muted)}.scene-label>span:last-child{margin-left:auto}.live-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.cluster-caption{position:absolute;bottom:58px;left:28px;pointer-events:none}.cluster-caption strong{display:block;font-weight:400;font-size:22px;margin-top:8px}.cluster-caption small{font:10px monospace;color:var(--muted)}
.scene-controls{position:absolute;bottom:14px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px;font:9px monospace;color:var(--muted)}.scene-controls button{font:inherit;cursor:pointer;color:var(--text);background:transparent;border:1px solid var(--line);padding:6px 10px}
.proof{max-width:1328px}.proof strong{font-size:22px;font-weight:400}.proof span{font-size:11px;letter-spacing:.04em}.scroll-ticker{margin-top:2rem}.ticker-track{font:14px monospace;color:#78837c;letter-spacing:.2em}
h2{font-weight:400;letter-spacing:-.035em;font-size:clamp(2rem,4vw,3.6rem)}h3{font-weight:400}.section{padding-top:6rem;padding-bottom:6rem}.project-card{background:linear-gradient(145deg,#11171c,#070a0e);border-color:var(--line);box-shadow:none}.project-card:hover{border-color:#5eead488;box-shadow:0 20px 50px #0005}.project-card.featured{background:linear-gradient(145deg,#263d49,#0a0e12)}.project-type{font:10px monospace;letter-spacing:.12em}.project-content>p:not(.project-type),.project-content li{font-size:14px}.project-content a{font-size:12px;font-weight:400}.product-feature{background:linear-gradient(125deg,#11171c 0 58%,#dfe7e0 58%)}
.architecture-card{background:var(--surface)}.architecture-flow article{background:#11171c}.feedback-loop,.architecture-foundation{background:#101519}.capability-grid>div{background:var(--surface)}.cta{background:radial-gradient(ellipse at top,#263d49,#0a0e12 70%);border:1px solid var(--line)}
:focus-visible{outline:2px solid #5eead4!important;outline-offset:4px}.back-to-top{background:var(--surface);color:var(--text)}
@media(max-width:900px){.site-header{padding:1.3rem 1.5rem}.hero{padding:3rem 1.5rem;grid-template-columns:1fr 1fr;gap:0}.cloud-stage{height:470px}.theme-nav{gap:1rem}.hero h1{font-size:3.6rem}.hero-actions{flex-direction:column;align-items:flex-start}}
@media(max-width:650px){.theme-nav a:first-child{display:none}.theme-nav{gap:1rem}.brand-role{font-size:7px}.theme-nav a{font-size:10px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:3rem}.hero h1{font-size:clamp(3.5rem,13vw,5rem)}.hero-actions{flex-direction:row}.cloud-stage{height:420px;margin-top:2rem}.cluster-caption{bottom:60px}.section{padding-top:4rem;padding-bottom:4rem}.scene-label{left:10px;right:10px;font-size:8px}.scene-controls{left:10px;right:10px}.proof strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.scene-fallback{position:absolute;inset:85px 20px 150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:var(--muted);font:11px monospace}.scene-fallback>span{font:80px system-ui;color:var(--accent)}.scene-fallback strong{letter-spacing:.2em;font-weight:400}.fallback-nodes{display:flex;gap:28px}.fallback-nodes i{width:42px;height:42px;border:1px solid var(--accent);transform:rotate(30deg);background:#1c252d}.scene-fallback small{font-size:9px}.has-webgl .scene-fallback{display:none}
@media(max-width:650px){.product-feature{background:linear-gradient(180deg,#11171c 0 56%,#dfe7e0 56%)}}
/* Kage-style depth: document content passes over a persistent slow-moving world. */
html,body{overflow-x:clip}body{background:#05070a;isolation:isolate}main{overflow:visible;position:relative;z-index:3}footer{position:relative;z-index:3;background:#05070ac9}.site-header{position:relative;z-index:5;background:transparent;max-width:none;margin:0 4vw;padding:1.5rem 0}.parallax-world{position:fixed;z-index:0;top:-8svh;right:-12vw;width:85vw;height:116svh;margin:0;max-height:none;pointer-events:none;transform:translate3d(0,var(--world-drift,0px),0);will-change:transform;opacity:.85;background:radial-gradient(ellipse at 55% 48%,#5eead435,transparent 62%)}.parallax-world #cloud-scene{height:100%;width:100%;pointer-events:none}.parallax-world .scene-controls{position:fixed;bottom:10svh;right:16vw;left:auto;border:0;padding:0;z-index:5;pointer-events:auto}.parallax-world .scene-controls>span{display:none}.parallax-world .scene-controls button{background:#05070ad9;opacity:.8;font-size:9px}.parallax-scrim{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#05070af2 0%,#05070ad9 24%,#05070a99 43%,#05070a12 75%),linear-gradient(0deg,#05070a 0%,transparent 15%,transparent 85%,#05070a99)}
.infra-foreground{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}.foreground-rack{position:absolute;right:-45px;top:65%;width:135px;height:340px;transform:translate3d(0,var(--foreground-drift,0px),0) rotate(-12deg);border:1px solid #263d49;background:linear-gradient(110deg,#1a2025dd,#05070ae8);box-shadow:-20px 20px 80px #0008;opacity:.48;will-change:transform}.foreground-rack i{display:block;height:44px;margin:14px 10px;border:1px solid #6e716c55;background:repeating-linear-gradient(90deg,#20282d 0 4px,#0a0e12 4px 7px)}.foreground-rack i::after{content:"";display:block;background:#5eead4;height:3px;width:12px;margin:7px;box-shadow:0 0 10px #5eead4}.foreground-orbit{position:absolute;left:-220px;bottom:-260px;width:470px;height:470px;border:1px solid #5eead435;border-radius:50%;transform:translateY(var(--foreground-drift,0px));box-shadow:0 0 0 28px #5eead408,0 0 0 80px #5eead404}
.parallax-track{height:auto;position:relative}.parallax-story{display:block;max-width:1328px;margin:0 auto;padding:0 24px;min-height:0;background:none;overflow:visible}.story-panels{display:block}.story-panel{min-height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:580px;padding:10svh 0;position:relative}.story-panel:first-child{min-height:calc(100svh - 100px)}.story-panel:not(:first-child){border-top:1px solid var(--line)}.story-panel>*{position:relative;z-index:1}.story-title{font-size:clamp(2.7rem,4.5vw,4.6rem);font-weight:400;line-height:1.12;letter-spacing:-.045em;margin-bottom:1.4rem}.story-title span{display:block}.story-title span:last-child{color:var(--accent);margin-top:.1em}.story-stack{color:#c9a24a;font:11px/1.8 monospace;letter-spacing:.08em;margin:1.5rem 0}.story-panel>.button{align-self:flex-start}.hero-copy>*{animation:none}.story-panel .hero-text{max-width:490px}.proof,.scroll-ticker{position:relative;z-index:3;background:#05070a99}.section{position:relative;min-height:75svh}.section-heading{max-width:620px}.section-heading>p:last-child{font-size:15px}.project-card,.project-card.featured{background:#0a0e12c9;backdrop-filter:blur(12px)}.product-feature{background:linear-gradient(125deg,#10151bf0 0 58%,#dfe7e0 58%)}.architecture-card,.capability-grid>div,.contact-grid>a{background:#0a0e12d9;backdrop-filter:blur(8px)}.cta{position:relative;background:#0a0e12d9;backdrop-filter:blur(10px)}.back-to-top{z-index:10;border-color:var(--line)}
@media(max-width:900px){.parallax-world{width:105vw;right:-32vw;opacity:.65}.parallax-story{padding:0 24px}.story-panel{max-width:510px}.parallax-scrim{background:linear-gradient(90deg,#05070aee,#05070aaa 55%,#05070a44)}}
@media(max-width:650px){.site-header{margin:0 20px}.parallax-world{width:145vw;right:-48vw;top:10svh;height:100svh;opacity:.55}.parallax-world .scene-controls{bottom:13svh;right:52vw}.parallax-story{padding:0 24px}.story-panel{max-width:100%;padding:12svh 0;min-height:95svh}.parallax-story h1{font-size:clamp(3.1rem,12vw,4.5rem)}.story-title{font-size:clamp(2.6rem,10vw,3.5rem)}.story-panel .hero-text{font-size:14px;line-height:1.8}.parallax-scrim{background:linear-gradient(90deg,#05070aed,#05070ab0 75%,#05070a77)}.foreground-rack{right:-80px;opacity:.25}.foreground-orbit{opacity:.3}.section{min-height:0}.product-feature{background:linear-gradient(180deg,#10151bf0 0 56%,#dfe7e0 56%)}}
@media(prefers-reduced-motion:reduce){.parallax-world,.foreground-rack,.foreground-orbit{transform:none;will-change:auto}.story-panel{min-height:auto;padding:4rem 0}.story-panel:first-child{min-height:auto}.infra-foreground{display:none}}
.background-controls{position:fixed;bottom:24px;right:24px;left:auto;z-index:15;border:0;padding:0}.background-controls>span{display:none}.background-controls button{background:#05070ae8;font-size:9px;padding:8px 12px}.back-to-top{bottom:70px!important}
/* A continuous two-copy ticker, independent of the scroll position. */
.scroll-ticker{mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);padding:1.35rem 0;margin-top:0}.ticker-track{display:flex;width:max-content;transform:none;transition:none;animation:skills-marquee 110s linear infinite;color:#aab4ad;font:12px/1.6 monospace;letter-spacing:.18em}.ticker-track>span{flex:0 0 auto;min-width:100vw;white-space:nowrap;padding-right:2rem}@keyframes skills-marquee{to{transform:translateX(-50%)}}
/* Bring the primary actions into the first viewport and show evidence early. */
.hero .story-panel:first-child{min-height:calc(76svh - 100px);padding:3svh 0 3svh;max-width:650px}.hero h1{font-size:clamp(3.3rem,5.2vw,5.3rem)}.hero-text{line-height:1.7}.hero-actions{margin-top:1.5rem;gap:.65rem;max-width:none;flex-direction:row;align-items:center}.hero-actions .button:last-child{width:auto;margin-top:0;padding:.9rem 1.25rem;border:1px solid var(--line)}.hero-actions .button{font-weight:500}.engineering-story .story-panel{min-height:78svh}.engineering-story .story-panel:first-child{min-height:78svh}.engineering-story .story-title{font-size:clamp(2.7rem,4vw,4rem)}.section{padding-top:5rem;padding-bottom:5rem}.capability-grid>div{border-top:2px solid #5eead466}.contact-grid>a:hover{border-color:var(--accent)}
@media(max-width:900px){.hero-actions{flex-direction:row}.hero h1{font-size:clamp(3rem,6vw,4rem)}}
@media(max-width:650px){.hero .story-panel:first-child{min-height:calc(76svh - 85px);padding:2svh 0 3svh}.hero h1{font-size:clamp(2.8rem,11vw,3.6rem)}.hero-actions{margin-top:1rem;gap:8px}.hero-actions .button,.hero-actions .button:last-child{font-size:10px;padding:10px 12px}.availability-pill{margin-bottom:1rem}.engineering-story .story-panel,.engineering-story .story-panel:first-child{min-height:75svh}.section{padding-top:3.5rem;padding-bottom:3.5rem}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;transform:none}.hero .story-panel:first-child,.engineering-story .story-panel,.engineering-story .story-panel:first-child{min-height:auto}}
@media(max-width:650px){.background-controls{top:24px;bottom:auto;right:20px}.background-controls button{font-size:8px;opacity:.7}}
/* Repeat one measured group rather than waiting for the entire track to end. */
.scroll-ticker{mask-image:none;-webkit-mask-image:none}.ticker-track>span{min-width:0}.ticker-track.ticker-measured{animation:skills-continuous var(--ticker-duration,90s) linear infinite}@keyframes skills-continuous{to{transform:translateX(calc(-1 * var(--ticker-distance)))}}
@media(prefers-reduced-motion:reduce){.ticker-track.ticker-measured{animation:none}}
/* Connected server rooms, with a foreground that stands apart from the world. */
.parallax-world{inset:0;width:100vw;height:100svh;transform:none;opacity:1}
.parallax-scrim{background:linear-gradient(90deg,#05070aeb 0%,#05070abb 30%,#05070a30 65%,#05070a15),linear-gradient(0deg,#05070ab0,transparent 25%,transparent 80%,#05070a65)}
.parallax-track{perspective:1100px;perspective-origin:35% 35%}
#hero-title{transform:perspective(900px) rotateX(var(--title-y,0deg)) rotateY(var(--title-x,0deg));transform-style:preserve-3d;transition:transform .18s ease-out;text-shadow:1px 1px #64706a,2px 2px #333d38,3px 3px #252d29,4px 4px #19201c,8px 14px 25px #0009}
#hero-title .outline-word{text-shadow:1px 1px #5eead4,2px 2px #5eead4,3px 3px #263d49,4px 4px #263d49,8px 14px 25px #0009}
.project-grid,.capability-grid,.contact-grid{perspective:1400px}
.project-card,.project-card.featured,.capability-grid>div,.contact-grid>a{transform-origin:50% 0;transform:rotateX(var(--sway-x,0deg)) rotateY(var(--sway-y,0deg)) rotateZ(var(--sway-z,0deg)) skewX(var(--cloth-skew,0deg));transition:border-color .3s,box-shadow .3s,opacity .6s;backface-visibility:hidden}
.project-card:hover,.capability-grid>div:hover,.contact-grid>a:hover{transform:rotateX(var(--sway-x,0deg)) rotateY(var(--sway-y,0deg)) rotateZ(var(--sway-z,0deg)) skewX(var(--cloth-skew,0deg));box-shadow:0 28px 65px #0009;border-color:#5eead488}
.project-card.reveal:not(.is-visible),.capability-grid>div.reveal:not(.is-visible),.contact-grid>a.reveal:not(.is-visible){transform:translateY(24px)}
.journey-cue{font:10px monospace;letter-spacing:.18em;color:#a9b8ae;margin-top:2rem}
@media(max-width:900px){.parallax-scrim{background:linear-gradient(90deg,#05070ad9,#05070a77 65%,#05070a30),linear-gradient(0deg,#05070ac0,transparent 30%)}}
@media(prefers-reduced-motion:reduce){#story-panel-0,#hero-title,.project-card,.capability-grid>div,.contact-grid>a{transform:none!important;filter:none!important;opacity:1!important}.journey-cue{display:none}}

/* Keep the hanging motion after reveal; reveal selectors otherwise win specificity. */
html.js :is(.project-card, .capability-grid > div, .contact-grid > a).reveal.is-visible {
  transform-origin: 50% 0;
  transform: perspective(1400px) rotateX(var(--sway-x, 0deg)) rotateY(var(--sway-y, 0deg)) rotateZ(var(--sway-z, 0deg)) skewX(var(--cloth-skew, 0deg));
  transition: border-color .3s, box-shadow .3s, opacity .6s;
}
@media (prefers-reduced-motion: reduce) {
  html.js :is(.project-card, .capability-grid > div, .contact-grid > a).reveal.is-visible {
    transform: none !important;
  }
}
/* The actual cloth surface carries its own folding edge and light. */
.fabric-tile{position:relative;isolation:isolate;overflow:visible!important}
html.js :is(.project-card,.capability-grid>div,.contact-grid>a).fabric-tile,
html.js :is(.project-card,.capability-grid>div,.contact-grid>a).fabric-tile.reveal.is-visible,
html.js :is(.project-card,.capability-grid>div,.contact-grid>a).fabric-tile:hover{background:transparent;border-color:transparent;backdrop-filter:none;box-shadow:none;transform:none}
.tile-fabric{position:absolute;z-index:-1;pointer-events:none;display:block}
.fabric-tile>:not(.tile-fabric){position:relative;z-index:1}
#portfolio-loader{position:fixed;inset:0;z-index:1000;background:#05070a;display:none;align-items:center;justify-content:center;transition:opacity .25s ease,visibility .25s}
.js #portfolio-loader{display:flex;animation:loader-failsafe 0s 2s forwards}
#portfolio-loader.is-complete{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{width:min(420px,74vw);text-align:center}
.loader-mark{display:block;position:relative;width:56px;height:56px;margin:0 auto 30px;font:20px/56px monospace;color:#dfe7e0}
.loader-mark>span{position:absolute;inset:0;border:1px solid #5eead455;border-top-color:#5eead4;animation:loader-orbit 2.4s linear infinite}
.loader-inner>p{font:10px monospace;letter-spacing:.3em;color:#929d99;margin-bottom:24px}
.loader-track{height:1px;background:#dfe7e024;overflow:hidden}
.loader-track i{height:100%;display:block;background:#dfe7e0;transform:scaleX(0);transform-origin:left}
.loader-meta{display:flex;justify-content:space-between;margin-top:14px;color:#929d99;font:9px monospace;letter-spacing:.12em;text-transform:uppercase}
.loader-meta b{font-weight:400;font-variant-numeric:tabular-nums;color:#dfe7e0}
@keyframes loader-orbit{to{transform:rotate(360deg)}}
@keyframes loader-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.tool-drift{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.drifting-tool{position:absolute;left:var(--tool-left);top:-80px;width:var(--tool-size);height:var(--tool-size);opacity:0;animation:tool-fall var(--tool-duration) var(--tool-delay) linear infinite}
.drifting-tool img{display:block;width:100%;height:100%;opacity:.42;animation:tool-tumble 9s ease-in-out infinite alternate;filter:drop-shadow(0 3px 8px #05070a)}
.tool-drift.is-paused *, .tool-drift.is-hidden *{animation-play-state:paused}
@keyframes tool-fall{0%{opacity:0;transform:translate3d(0,-5vh,0)}10%,85%{opacity:1}50%{transform:translate3d(var(--tool-swing),55vh,0)}100%{opacity:0;transform:translate3d(0,calc(100svh + 160px),0)}}
@keyframes tool-tumble{0%{transform:perspective(400px) rotateZ(-16deg) rotateY(-30deg)}50%{transform:perspective(400px) rotateZ(12deg) rotateY(35deg)}100%{transform:perspective(400px) rotateZ(-8deg) rotateY(-15deg)}}
@media(max-width:650px){.drifting-tool:nth-child(even){display:none}.drifting-tool img{opacity:.25}}
@media(prefers-reduced-motion:reduce){.tool-drift{display:none}#portfolio-loader{transition:none}.loader-mark>span{animation:none}}

html[data-loader-expired] #portfolio-loader{display:none}

/* Other tiles: a warm glow and a gentle gathering of the copy. */
:is(.capability-grid>div,.contact-grid>a){position:relative;isolation:isolate;overflow:hidden}
:is(.capability-grid>div,.contact-grid>a)::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#5eead430 0%,#5eead418 45%,transparent 100%);opacity:0;transform:translateX(-100%);transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .65s ease}
:is(.capability-grid>div,.contact-grid>a):hover::before{opacity:1;transform:translateX(0)}
:is(.capability-grid>div,.contact-grid>a)>*{position:relative;z-index:1;transition:translate .7s cubic-bezier(.22,1,.36,1)}
.capability-grid>div:hover>*,.contact-grid>a:hover>*{translate:7px -3px}
@media(prefers-reduced-motion:reduce){:is(.capability-grid>div,.contact-grid>a)>*{translate:none!important}}

/* Keep the handset silhouette visible against OneView's dark cloth. */
#oneview .phone-shell {
  border:10px solid #171c22;
  border-radius:2.5rem;
  outline:2px solid #8a939d;
  box-shadow:0 0 0 4px #303943,0 28px 55px #0008,inset 0 0 0 1px #cbd5cd;
}
#oneview .phone-shell::after {
  content:"";position:absolute;bottom:10px;left:50%;translate:-50% 0;
  width:76px;height:4px;border-radius:4px;background:#171c22;
}
#oneview .phone-speaker {
  top:11px;width:58px;height:6px;background:#171c22;
}
#oneview .product-visual {min-height:520px}
#oneview .product-orbit {color:#929d9955}

/* Brighter slate surfaces keep the atmosphere readable at normal brightness. */
body{background:var(--bg);font-weight:400}
.parallax-scrim{background:linear-gradient(90deg,#182330f2 0%,#182330d9 30%,#18233066 65%,#18233033),linear-gradient(0deg,#18233099,transparent 25%,transparent 80%,#18233055)}
.proof,.scroll-ticker,footer{background:#223140ed}
.project-card,.project-card.featured{background:linear-gradient(145deg,#304354,#253444);border-color:var(--line)}
.project-card.featured{background:linear-gradient(145deg,#483640,#293948)}
.architecture-card,.capability-grid>div,.contact-grid>a,.cta{background:#263544f2}
.architecture-flow article,.feedback-loop,.architecture-foundation{background:var(--surface-2)}
.ticker-track,.journey-cue,.loader-inner>p,.loader-meta{color:var(--muted)}
.button.primary{background:#5eead4;border-color:#5eead4;color:#182330;font-weight:600}
.button.secondary{background:#263544e8}
.brand-mark{font-weight:600}
.background-controls button{background:#263544;color:var(--text);opacity:1;border-color:var(--line)}
#portfolio-loader{background:var(--bg)}
.loader-mark,.loader-meta b{color:var(--text)}
#hero-title .outline-word{text-shadow:1px 1px #5eead4,2px 2px #5eead4,4px 6px 18px #0005}
@media(max-width:900px){.parallax-scrim{background:linear-gradient(90deg,#182330f2,#182330d9 55%,#18233088)}}
@media(max-width:650px){.parallax-scrim{background:linear-gradient(90deg,#182330f2,#182330d9 75%,#182330bb)}}

/* Two compact project columns; OneView retains the full final row. */
.project-card:has(.project-preview){grid-column:auto;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto 1fr;gap:0;padding:0;align-items:start;min-height:0}
.project-card:has(.project-preview)>.project-number{grid-column:1;grid-row:2;padding:1.5rem 0 0 .75rem}
.project-card:has(.project-preview)>.project-content{grid-column:2;grid-row:2;padding:1.5rem 1.5rem 1.5rem .5rem;height:100%}
.project-preview{grid-column:1 / -1;grid-row:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;border:0;border-radius:0;background:transparent;aspect-ratio:2 / 1;height:auto;min-height:0}
.project-preview img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;box-shadow:none;border-radius:0}
.js .project-card.reveal .project-preview{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.22,1,.36,1) .15s}
.js .project-card.reveal.is-visible .project-preview{clip-path:inset(0 0 0 0)}
.tool-stack{min-height:0}
.tool-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;margin:0}
.tool-groups>div{padding:1.25rem 1rem;border-top:1px solid var(--line);border-radius:6px;transition:background-color .25s,border-color .25s,box-shadow .25s,transform .25s}
.tool-groups dt{color:var(--text);font-weight:600;margin-bottom:.5rem}
.tool-groups dd{margin:0;color:var(--muted);font-size:.95rem}
@media(max-width:650px){
 .tool-groups{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.js .project-card.reveal .project-preview{clip-path:none;transition:none}}

/* Keep the active tools group bright and easy to follow without dimming others. */
.tool-groups>div:hover,.tool-groups>div:focus-visible{background:#304253;border-color:var(--accent);box-shadow:inset 3px 0 var(--accent),0 8px 24px #0b152430;transform:translateY(-2px)}
.tool-groups>div:hover dt,.tool-groups>div:focus-visible dt{color:var(--accent)}
.tool-groups>div:hover dd,.tool-groups>div:focus-visible dd{color:var(--text)}
.tool-groups dt,.tool-groups dd{transition:color .25s}
@media(prefers-reduced-motion:reduce){.tool-groups>div:hover,.tool-groups>div:focus-visible{transform:none}.tool-groups>div,.tool-groups dt,.tool-groups dd{transition:none}}

/* A quiet terminal ribbon brings daily operations into the existing ticker. */
.command-ticker{background:linear-gradient(90deg,#223140f2,#263544e8);border-block:1px solid var(--line);padding:1rem 0}
.command-ticker .ticker-track{font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted)}
.command-ticker code{display:inline-block;margin-right:2.5rem;font:inherit;white-space:nowrap;transition:color .2s}
.command-ticker code b{color:var(--accent);font-weight:500;margin-right:.3rem}
.command-ticker:hover .ticker-track{animation-play-state:paused}
.command-ticker code:hover{color:var(--text)}
footer>span:last-child{max-width:34rem;text-align:right}
@media(max-width:650px){footer{gap:.75rem;flex-wrap:wrap}footer>span:last-child{text-align:left;font-size:.78rem}.command-ticker .ticker-track{font-size:11px}}
@media(prefers-reduced-motion:reduce){.command-ticker code{transition:none}}

/* Consistent content spacing without empty viewport-sized sections. */
.section{min-height:0;padding-block:clamp(2rem,4vw,3rem)}
.section-heading{margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.approach{gap:clamp(2rem,4vw,4rem)}
.approach>div,.approach ol,.project-content,.tool-groups>div{min-width:0}
.section h2{text-wrap:balance}
.loader-inner>p{letter-spacing:.06em;line-height:1.7;overflow-wrap:anywhere}
@media(max-width:820px){.approach{grid-template-columns:1fr;gap:2rem}}

/* A connected, responsive delivery architecture made from HTML and SVG. */
.live-architecture{padding:1.5rem;overflow:hidden}
.diagram-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem}
.diagram-toolbar>span{font:10px/1.6 monospace;letter-spacing:.08em;color:var(--muted)}
.diagram-toolbar i{display:inline-block;width:7px;height:7px;background:#8ce8ba;border-radius:50%;margin-right:8px}
.diagram-toggle{background:var(--surface-2);border:1px solid var(--line);color:var(--text);padding:.6rem .8rem;border-radius:5px;cursor:pointer;white-space:nowrap}
.delivery-map{position:relative;padding:12px 34px 62px}
.delivery-connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.delivery-nodes{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 36px;list-style:none;padding:0;margin:0}
.delivery-node{background:#20303f;border:1px solid #617382;border-radius:10px;padding:1rem;min-width:0;animation:node-signal 16s calc(var(--stage)*2s) linear infinite}
.delivery-node:nth-child(5){grid-column:4;grid-row:2}.delivery-node:nth-child(6){grid-column:3;grid-row:2}.delivery-node:nth-child(7){grid-column:2;grid-row:2}.delivery-node:nth-child(8){grid-column:1;grid-row:2}
.node-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font:11px monospace;margin-bottom:1rem}.node-icon{color:var(--accent);font-size:25px}
.delivery-node h3{font-size:1rem;margin:0 0 .65rem}.delivery-node p{font:11px/1.8 monospace;color:#5eead4;margin:0 0 .7rem}.delivery-node small{display:block;font-size:.76rem;line-height:1.6;color:var(--muted)}
.flow-track{fill:none;stroke:#798b99;stroke-width:1.5}.flow-packet{fill:none;stroke:#5eead4;stroke-width:3;stroke-dasharray:5 22;animation:flow-travel 1.5s linear infinite;filter:drop-shadow(0 0 3px #5eead480)}.flow-return{stroke:#8ce8ba;opacity:.7}
.diagram-feedback{position:absolute;bottom:30px;left:50px;color:#8ce8ba;font:10px/1.6 monospace}
.runtime-services{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border-top:1px solid var(--line);padding-top:1.25rem}.runtime-services>div{padding:.75rem 1rem;background:#20303f;border-radius:6px;border-left:2px solid #8ce8ba}.runtime-services span{font:10px monospace;letter-spacing:.08em;color:#8ce8ba}.runtime-services p,.diagram-caption{color:var(--muted);font-size:.76rem;line-height:1.8;margin:.5rem 0 0}.diagram-caption{margin-top:1rem}
.flow-paused .flow-packet,.flow-paused .delivery-node{animation-play-state:paused}
@keyframes flow-travel{to{stroke-dashoffset:-54}}@keyframes node-signal{0%,12%,100%{border-color:#617382;box-shadow:none}3%,9%{border-color:#5eead4;box-shadow:0 0 20px #5eead41a}}
.contact-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:3rem}.contact-platforms>p{color:var(--muted);line-height:1.8}.contact-platforms .button{display:flex;margin-top:1rem;justify-content:space-between}.contact-destination{font-size:.85rem;margin-top:2rem}.contact-destination a{color:var(--text);overflow-wrap:anywhere}
.project-contact-form{padding:1.5rem;border:1px solid var(--line);border-radius:10px;background:#263544f2;display:grid;gap:1.25rem}.project-contact-form label{display:grid;gap:.5rem;font-size:.85rem;color:var(--text)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.project-contact-form input,.project-contact-form select,.project-contact-form textarea{width:100%;min-width:0;padding:.85rem;background:#1c2b39;color:var(--text);border:1px solid #617382;border-radius:5px;font:inherit;box-sizing:border-box}.project-contact-form textarea{resize:vertical}.project-contact-form ::placeholder{color:#aab7c1}.project-contact-form :is(input,select,textarea):focus-visible,.diagram-toggle:focus-visible{outline:2px solid #5eead4;outline-offset:3px}.form-honeypot{display:none}.form-submit-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.form-submit-row small{color:var(--muted);font-size:.75rem}.form-submit-row button{cursor:pointer}
@media(max-width:1000px){.delivery-node{padding:.75rem}.delivery-nodes{gap:48px 24px}.delivery-node h3{font-size:.9rem}}
@media(max-width:760px){.contact-layout{grid-template-columns:1fr;gap:1.5rem}.delivery-nodes{grid-template-columns:1fr}.delivery-node:nth-child(n){grid-column:1;grid-row:auto}.delivery-map{padding:12px 30px 70px}.delivery-node{padding:1rem}.delivery-node small{font-size:.8rem}.diagram-feedback{left:30px;right:10px;font-size:9px}.runtime-services{grid-template-columns:1fr}.live-architecture{padding:1rem}.diagram-toolbar{align-items:flex-start}.diagram-toolbar>span{max-width:180px}}
@media(max-width:480px){.form-row{grid-template-columns:1fr}.project-contact-form{padding:1rem}}
@media(prefers-reduced-motion:reduce){.delivery-node,.flow-packet{animation:none}.flow-packet{display:none}}

/* Readable type and a dedicated desktop rail for the scroll companion. */
:root{--muted:#d6e0ea;--text:#f7f9fc}
body{font-size:18px;font-weight:450;line-height:1.75}
h1,h2,h3,.story-title,.hero h1{font-weight:600}
.hero-text,.story-panel .hero-text,.section-heading>p:last-child,.cta>p{font-size:18px;line-height:1.8}
.project-content>p:not(.project-type),.project-content li,.capability-grid p,.approach p,.tool-groups dd,.experience-list p,.contact-platforms>p:not(.eyebrow){font-size:17px;line-height:1.75}
.theme-nav a,.button,.hero-actions .button,.hero-actions .button:last-child,.project-content a{font-size:15px;font-weight:600}
.eyebrow,.project-type,.availability-pill,.proof span,.journey-cue,.story-stack{font-size:13px;letter-spacing:.06em;font-weight:500}
.brand{font-size:17px;font-weight:600}.brand-role{font-size:11px;letter-spacing:.08em}
.proof strong{font-weight:600}.project-number{font-size:14px}
.command-ticker .ticker-track,.ticker-track{font-size:14px;letter-spacing:.04em}
.scene-label,.scene-controls,.background-controls button,.diagram-toolbar>span,.diagram-feedback{font-size:12px}
.delivery-node p,.delivery-node small,.runtime-services span,.architecture-flow article small,.form-submit-row small{font-size:14px;line-height:1.65}
.project-contact-form label{font-size:15px}.project-contact-form :is(input,select,textarea){font-size:17px}
body::after{opacity:.015}
.fox-companion{position:fixed;right:12px;bottom:140px;width:100px;z-index:70}
.fox-boop{display:block;width:100px;height:100px;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 4px 8px #0004)}
.fox-sprite{position:relative;display:block;width:100%;height:100%;transform-origin:50% 78%}
.fox-directions,.fox-reactions{position:absolute;inset:0;background-size:300% 300%;background-repeat:no-repeat}
.fox-directions{background-image:url('assets/fox-riso-directions-optimized.webp');background-position:50% 50%}
.fox-reactions{background-image:url('assets/fox-riso-reactions-optimized.webp')}
.fox-dismiss{position:absolute;top:-8px;right:0;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:var(--text);font:20px/1 system-ui;cursor:pointer}
.fox-restore{border:1px solid var(--line);border-radius:20px;padding:8px 12px;background:var(--surface);color:var(--text);font:13px system-ui;cursor:pointer}
.fox-companion [hidden]{display:none}
@media(min-width:1200px) and (hover:hover) and (pointer:fine){body{padding-right:124px}}
@media(max-width:999px){body{padding-bottom:0}.fox-companion{bottom:12px;right:12px;width:64px}.fox-boop{width:64px;height:64px}.fox-dismiss{top:-6px;right:-2px;width:24px;height:24px}.fox-restore{font-size:12px}}
@media(max-width:650px){.theme-nav{gap:.8rem}.theme-nav a{font-size:13px}.brand{font-size:15px}.brand-role{font-size:10px}.hero-actions{flex-wrap:wrap}.hero-actions .button,.hero-actions .button:last-child{font-size:14px;padding:11px 14px}.story-panel .hero-text{font-size:18px}.command-ticker .ticker-track{font-size:13px}.scene-label{font-size:11px}.background-controls button{font-size:11px}.proof span{font-size:12px}footer>span:last-child{font-size:14px}}

/* Small close glyph sits outside the fox; the button retains a usable hit area. */
.fox-dismiss{top:-20px;right:-4px;width:28px;height:28px;border:0;background:transparent;font-size:14px;display:grid;place-items:center;isolation:isolate}
.fox-dismiss::before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#182330;border:1px solid #8394a5;z-index:-1}
.fox-dismiss:hover::before,.fox-dismiss:focus-visible::before{border-color:var(--accent);background:#304253}
@media(max-width:999px){.fox-dismiss{top:-20px;right:-4px;width:28px;height:28px}}

/* Steady neon accents keep the letterforms sharp and the body copy clear. */
:root{--neon-coral:#5eead4;--neon-mint:#a0ffd2}
:is(.hero h1,.section h2,.story-title){text-shadow:0 0 18px #b5dfff24}
#hero-title .outline-word,.story-title span:last-child{color:var(--neon-coral);text-shadow:0 0 8px #5eead450,0 0 26px #5eead430}
:is(.eyebrow,.project-number,.project-content a,.contact-label){color:var(--neon-coral);text-shadow:0 0 10px #5eead440}
.brand-mark{border-color:var(--neon-coral);box-shadow:0 0 14px #5eead433,inset 0 0 10px #5eead41a;text-shadow:0 0 10px #5eead450}
.button.primary{box-shadow:0 0 16px #5eead43b,0 4px 18px #0003}
.button.secondary{border-color:#b5cfdf88;box-shadow:inset 0 0 12px #b5dfff0d}
:is(.button,.project-content a,.theme-nav a):is(:hover,:focus-visible){text-shadow:0 0 10px #5eead466}
.button:is(:hover,:focus-visible){border-color:var(--neon-coral);box-shadow:0 0 20px #5eead455}
.button.primary:is(:hover,:focus-visible){text-shadow:none}
.project-card,.project-card.featured,.project-contact-form,.live-architecture{border-color:#94b6ce66}
:is(.project-card,.project-card.featured,.capability-grid>div,.contact-grid>a):hover{border-color:var(--neon-coral);box-shadow:0 0 0 1px #5eead430,0 0 26px #5eead426}
.runtime-services span,.diagram-feedback{color:var(--neon-mint);text-shadow:0 0 10px #a0ffd240}
.scroll-progress span{box-shadow:0 0 10px #5eead499}
:focus-visible{outline-color:var(--neon-mint)!important}

/* Click-to-open speech bubble with a solid readable surface. */
.fox-message{position:absolute;right:0;bottom:calc(100% + 22px);width:min(290px,calc(100vw - 32px));padding:20px 32px 18px 20px;border:1px solid #5eead499;border-radius:16px;background:#20303f;box-shadow:0 0 22px #5eead424,0 12px 32px #0005;color:var(--text)}
.fox-message::after{content:"";position:absolute;bottom:-7px;right:42px;width:12px;height:12px;background:#20303f;border-right:1px solid #5eead499;border-bottom:1px solid #5eead499;transform:rotate(45deg)}
.fox-message-text{margin:0 0 12px;font-size:16px;font-weight:500;line-height:1.65;text-shadow:none;overflow-wrap:break-word}
.fox-message-contact{color:var(--neon-coral);font-size:15px;font-weight:650;text-underline-offset:4px}
.fox-message-close{position:absolute;top:5px;right:5px;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font:18px system-ui;cursor:pointer}
.fox-message-close:hover{color:var(--text);background:#ffffff12}
@media(max-width:999px){.fox-message::after{right:26px}}
@media(max-height:500px) and (min-width:1000px){.fox-companion{bottom:90px}.fox-message{bottom:0;right:calc(100% + 12px)}.fox-message::after{display:none}}

/* Readability review: enlarge supporting explanations and remove stacked title shadows. */
.runtime-services p,.diagram-caption,.architecture-foundation span,.product-actions>span{font-size:14px;line-height:1.7}
.experience-list strong,.contact-value{font-size:16px}
#hero-title{text-shadow:0 0 18px #b5dfff24}
#hero-title .outline-word{text-shadow:0 0 8px #5eead450,0 0 26px #5eead430}
@media(max-width:650px){.background-controls{top:auto;bottom:16px;left:16px;right:auto}.background-controls button{font-size:12px;padding:10px 12px}}
@media(max-width:520px){.site-header{flex-wrap:wrap;gap:16px}.theme-nav{width:100%;justify-content:space-between}.theme-nav a:first-child{display:block}.theme-nav a{font-size:14px}.brand-role{font-size:11px}}

/* Compact project cards retain readable copy and grow naturally with zoom. */
.project-card:has(.project-preview)>.project-number{padding-top:1rem}
.project-card:has(.project-preview)>.project-content{padding:1rem 1.2rem 1.2rem .5rem}
.project-content>p{margin-top:0;margin-bottom:.75rem}
.project-content .project-type{font-size:.75rem;line-height:1.5;margin-bottom:.6rem}
.project-content h3{margin-bottom:.65rem}
.project-content>p:not(.project-type),.project-content li{font-size:1rem;line-height:1.6}
.project-content ul{margin:.2rem 0 1rem}
.project-content li+li{margin-top:.25rem}
#oneview{grid-template-columns:minmax(0,1fr) 290px;min-height:0;gap:0;padding:0;align-items:stretch}
#oneview .product-story{display:block;min-width:0;padding:1.5rem}
#oneview .product-story>.project-number{margin-bottom:.75rem;font-size:.75rem}
#oneview h3{font-size:clamp(2rem,3vw,2.6rem);line-height:1.15;margin-bottom:.5rem}
#oneview .product-lead{font-size:1.125rem;line-height:1.5;font-weight:550;margin-bottom:.65rem}
#oneview .project-content{min-width:0}
#oneview .product-actions{margin-top:.25rem;gap:.5rem 1rem}
#oneview .product-actions>span{font-size:.75rem;letter-spacing:.03em}
#oneview .product-visual{min-height:390px}
#oneview .phone-shell{scale:.78}
#oneview .product-orbit{font-size:.75rem}
#oneview .product-badge{left:12px;bottom:16px;padding:.5rem .75rem}
#contact-form{scroll-margin-top:24px}
@media(max-width:820px){#oneview{grid-template-columns:1fr}#oneview .product-story{padding:1.25rem}#oneview .product-visual{min-height:350px}#oneview .phone-shell{scale:.7}#oneview .product-orbit{display:none}}

/* A brief first-visit invitation makes the fox interaction discoverable. */
.fox-hint{position:absolute;right:6px;bottom:calc(100% + 48px);width:164px;max-width:calc(100vw - 32px);padding:12px 18px;border:1px solid #ffe6c6;border-radius:48% 52% 46% 54% / 48% 46% 54% 52%;background:#f4e5ce;color:#243644;font:600 15px/1.45 system-ui;text-align:center;box-shadow:0 4px 16px #0003;cursor:pointer}
.fox-hint::before,.fox-hint::after{content:"";position:absolute;border:1px solid #ffe6c6;border-radius:50%;background:#f4e5ce;pointer-events:none}
.fox-hint::before{width:12px;height:10px;right:42px;bottom:-17px}
.fox-hint::after{width:7px;height:6px;right:34px;bottom:-30px}
.fox-hint:hover,.fox-hint:focus-visible{background:#fff0db;box-shadow:0 4px 20px #5eead430}
@media(max-width:999px){.fox-hint{right:0}.fox-hint::before{right:25px}.fox-hint::after{right:19px}}
@media(max-height:500px) and (min-width:1000px){.fox-hint{right:calc(100% + 20px);bottom:35px}.fox-hint::before{right:-16px;bottom:15px}.fox-hint::after{right:-29px;bottom:8px}}

/* Keep the introduction, consistent actions, and experience proof together. */
.hero .story-panel:first-child{display:block;min-height:0;max-width:680px;padding:20px 0 22px}
.hero .availability-pill{margin-bottom:12px}
.hero .eyebrow{margin-bottom:10px}
.hero h1{font-size:clamp(2.8rem,4.3vw,4rem);line-height:1.05;margin-bottom:14px}
.hero .hero-line-final{margin-top:.35em}
.hero .story-panel .hero-text{max-width:650px;font-size:18px;line-height:1.6;margin:0 0 16px}
.hero .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:0;max-width:650px;align-items:stretch}
.hero .hero-actions:has(> :nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
.hero .hero-actions .button,.hero .hero-actions .button:last-child{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;min-width:0;min-height:48px;margin:0;padding:10px 12px;border:1px solid var(--line);font-size:15px;line-height:1.35;font-weight:600;text-align:center}
.hero .hero-actions .button.primary{border-color:var(--accent)}
.hero .journey-cue{margin:14px 0 0;font-size:12px}
.proof div{padding:14px 18px}
@media(min-width:651px) and (max-height:740px){.site-header{padding-block:16px}.hero .story-panel:first-child{padding-block:12px}.hero h1{font-size:clamp(2.6rem,4vw,3.4rem)}.hero .story-panel .hero-text{font-size:17px}.hero .availability-pill{margin-bottom:8px}.hero .eyebrow{margin-bottom:8px}.proof div{padding-block:12px}}
@media(max-width:650px){.hero .story-panel:first-child{padding:16px 0 18px}.hero h1{font-size:clamp(2.5rem,10vw,3.2rem)}.hero .story-panel .hero-text{font-size:17px;line-height:1.55}.hero .hero-actions{gap:8px}.hero .hero-actions .button,.hero .hero-actions .button:last-child{font-size:13px;min-height:50px;padding:9px 6px}.hero .journey-cue{font-size:11px;margin-top:12px}.proof div{padding:10px 12px}.proof strong{font-size:18px}.proof span{font-size:12px}.site-header{padding-block:14px}}

/* Fit the complete experience strip at the viewport edge using measured heights. */
.hero.parallax-story{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:calc(100svh - var(--opening-header-height,90px) - var(--opening-proof-height,90px));padding:32px 24px 36px}
.hero .story-panels{display:flex;flex:1;width:100%}
.hero .story-panel:first-child{display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:12px;width:100%;min-height:0;padding-block:0}
.hero .story-panel:first-child>*{flex-shrink:0}
@media(max-width:650px){.hero.parallax-story{padding:16px 24px 24px}}

/* Keep both bubbles aligned to the small companion on each screen size. */
.fox-companion{container-type:inline-size}
.fox-message{width:min(clamp(240px,170cqw,320px),calc(100vw - 32px));padding:16px 30px 14px 16px}
.fox-message-text{font-size:clamp(14px,8cqw,16px);margin-bottom:10px}
.fox-message-contact{font-size:clamp(14px,7cqw,15px)}
.fox-message::after{right:calc(50cqw - 6px)}
.fox-hint{right:0;width:min(clamp(140px,75cqw,180px),calc(100vw - 32px));padding:10px 14px;font-size:clamp(13px,7cqw,15px)}
.fox-hint::before{right:calc(50cqw - 6px)}
.fox-hint::after{right:calc(50cqw - 3.5px)}
@media(max-height:500px) and (min-width:1000px){.fox-hint{right:calc(100% + 20px)}.fox-hint::before{right:-16px}.fox-hint::after{right:-29px}}


/* Services explain client deliverables without repeating the hero or tool list. */
.services-grid{gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.services-grid>div{padding:24px;min-width:0}
.services-grid h3{font-size:21px;line-height:1.3;margin:12px 0 10px}
.services-grid p{font-size:16px;line-height:1.7}
.services-actions{margin-top:24px}
@media(max-width:650px){.services-grid{grid-template-columns:1fr;gap:12px}.services-grid>div{padding:20px}.services-grid h3{font-size:20px}.services-actions .button{width:100%}}

/* Use a stronger headline on tall desktop screens without enlarging body copy. */
@media(min-width:1000px) and (min-height:850px){.hero h1{font-size:clamp(3.5rem,5vw,5rem)}}
@media(max-width:650px){.hero .story-panel:first-child{justify-content:flex-start;gap:0}}

/* Keep the mobile primary action readable and its arrow centered with the label. */
.hero .hero-actions .button>span[aria-hidden="true"]{flex-shrink:0}
@media(max-width:650px){
  .hero .hero-actions:has(> :nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .hero-actions .button.primary{grid-column:1 / -1;gap:8px}
}

/* Raise the mobile fox only while the return-to-top control is visible. */
@media(max-width:999px){
  .back-to-top{bottom:16px!important;right:16px}
  .fox-companion{bottom:12px;transition:bottom .2s ease}
  body:has(.back-to-top.is-visible) .fox-companion{bottom:80px}
}
@media(max-width:999px) and (prefers-reduced-motion:reduce){.fox-companion{transition:none}}

/* Center the scaled handset before floating it, with room for the full frame. */
@media(max-width:820px){
  #oneview .product-visual{min-height:420px;min-width:0}
  #oneview .phone-shell{top:calc(50% - 20px);translate:-50% -50%;transform:rotate(5deg);animation-name:oneview-mobile-float}
}
@keyframes oneview-mobile-float{
  0%,100%{transform:rotate(5deg)}
  50%{transform:translateY(-8px) rotate(2deg)}
}

/* Soft scalloped cloud with a shaded underside and a trail of thought bubbles. */
.fox-hint:has(.fox-thought-cloud){border:0;border-radius:0;background:transparent;box-shadow:none;isolation:isolate;padding:12px 16px;font-size:15px;line-height:1.5}
.fox-thought-cloud{position:absolute;inset:-14px -8px;width:calc(100% + 16px);height:calc(100% + 28px);z-index:-1;overflow:visible;pointer-events:none;filter:drop-shadow(0 5px 7px #0003)}
.fox-hint-label{position:relative;display:block;color:#243644;font-weight:650;text-shadow:none}
.fox-hint::before,.fox-hint::after{background:radial-gradient(ellipse at 35% 25%,#fffef8 15%,#fff1dd 60%,#dcc5a8);border:1px solid #fff5e4;box-shadow:0 2px 4px #0002}
.fox-hint::before{width:14px;height:12px;bottom:-26px}
.fox-hint::after{width:8px;height:7px;bottom:-40px}
.fox-hint:has(.fox-thought-cloud):hover,.fox-hint:has(.fox-thought-cloud):focus-visible{background:transparent;box-shadow:none}
.fox-hint:hover .fox-thought-cloud{filter:drop-shadow(0 5px 9px #5eead445)}
@media(max-height:500px) and (min-width:1000px){.fox-hint::before{bottom:15px}.fox-hint::after{bottom:8px}}

/* Put project evidence and client decisions ahead of decoration. */
.case-study{margin:1rem 0 1.25rem;display:grid;gap:.9rem}
.case-study>div{padding-left:1rem;border-left:2px solid #94b6ce55;min-width:0}
.case-study>div:last-child{border-left-color:var(--neon-coral)}
.case-study dt{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--neon-coral);font-weight:650;margin-bottom:.25rem}
.case-study dd{margin:0;color:var(--muted);font-size:16px;line-height:1.65;overflow-wrap:anywhere}
.hero .hero-actions{flex-wrap:wrap;align-items:center}
.hero .hero-actions .button{flex:1 1 200px}
.hero .hero-actions .resume-link{flex:0 0 auto;color:var(--text);font-size:14px;padding:12px;text-underline-offset:5px}
.consultation-invite{margin-top:2rem;padding:2rem;border:1px solid #94b6ce66;border-radius:12px;background:#263544f2;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.consultation-invite>div{max-width:650px;min-width:0}
.consultation-invite h3{font-size:clamp(1.4rem,3vw,2rem);margin:.5rem 0}
.consultation-invite p:not(.eyebrow){color:var(--muted);line-height:1.75;margin-bottom:0}
.consultation-invite .button{flex-shrink:0}
.stack-proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-bottom:1.5rem}
.stack-proof-grid>a{display:block;padding:1.5rem;border:1px solid #94b6ce66;border-radius:10px;background:#263544f2;text-decoration:none;min-width:0}
.stack-proof-grid strong{display:block;font-size:20px;color:var(--text)}
.stack-proof-grid span{display:block;color:var(--neon-coral);font-size:13px;margin-top:.75rem;line-height:1.65}
.stack-proof-grid p{font-size:16px;color:var(--muted);line-height:1.75;margin-bottom:0}
.stack-proof-grid a:is(:hover,:focus-visible){border-color:var(--neon-coral)}
.full-stack summary{padding:1rem 0;cursor:pointer;color:var(--text);font-weight:600;text-underline-offset:5px}
.full-stack summary:focus-visible,.resume-link:focus-visible{outline:2px solid var(--neon-coral);outline-offset:4px}
.contact-expectations{padding-left:1.2rem;color:var(--muted);font-size:15px;line-height:1.75;margin-top:1.5rem}
.contact-expectations li+li{margin-top:.5rem}
.command-ticker .ticker-track{animation-duration:70s}
@media(max-width:820px){.stack-proof-grid{grid-template-columns:1fr}.consultation-invite{flex-direction:column;align-items:flex-start;padding:1.5rem;gap:1.5rem}}
@media(max-width:480px){.hero .hero-actions .button{flex-basis:calc(50% - 8px)}.hero .hero-actions .resume-link{padding:8px 0}.case-study dd{font-size:15px}.consultation-invite .button{width:100%;justify-content:center}}

/* Give the main contact action a clear, accessible place in navigation. */
.theme-nav .nav-contact{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;box-sizing:border-box;border:1px solid #5eead4;border-radius:7px;background:#5eead4;color:#142230;font-size:15px;font-weight:750;line-height:1.2;white-space:nowrap;box-shadow:0 0 18px #5eead426;text-shadow:none;transition:background .2s,box-shadow .2s}
.theme-nav .nav-contact::after{display:none}
.theme-nav .nav-contact:is(:hover,:focus-visible){background:#5eead4;color:#142230;text-shadow:none;box-shadow:0 0 22px #5eead440}
.theme-nav .nav-contact:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:650px){.theme-nav .nav-contact{font-size:14px;padding:10px 14px}}
@media(prefers-reduced-motion:reduce){.theme-nav .nav-contact{transition:none}}

/* Center text links beside the taller Contact button. */
.theme-nav{align-items:center}
.theme-nav a{align-items:center;line-height:1.2}
.theme-nav a:not(.nav-contact){min-height:44px;padding-block:10px;box-sizing:border-box;align-content:center;white-space:nowrap}

/* Keep all four navigation destinations visible on narrow screens. */
.theme-nav a:first-child{display:block}
@media(max-width:760px){.site-header{flex-wrap:wrap;gap:16px}.theme-nav{width:100%;justify-content:space-between;gap:12px}.theme-nav a{font-size:14px}}
@media(max-width:480px){.theme-nav{gap:6px}.theme-nav a{font-size:12px;letter-spacing:0}.theme-nav .nav-contact{font-size:12px;padding-inline:10px}}
@media(max-width:350px){.theme-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.theme-nav a{text-align:center}}

/* Keep floating scene controls clear of content on mobile. */
@media(max-width:760px){.scene-controls.background-controls{display:none}}

.contact-status{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.contact-status:empty{display:none}
.project-contact-form button:disabled{opacity:.65;cursor:wait}

/* Final responsive pass: predictable grids, touch targets, and safe insets. */
.hero .hero-actions:has(.resume-link){grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
.hero .hero-actions .resume-link{grid-column:1 / -1;justify-self:start;min-height:44px;display:inline-flex;align-items:center;padding:8px 0}
.contact-layout>*{min-width:0}
.project-contact-form label,.form-row>*{min-width:0}
.project-contact-form :is(input,textarea){font-size:max(16px,1rem)}
.full-stack summary,.diagram-toggle,.terminal-new-message{min-height:44px;box-sizing:border-box}
.fox-dismiss,.fox-message-close{width:44px;height:44px}
.fox-dismiss{top:-30px;right:-8px}
.fox-message{padding-right:44px;max-height:none;overflow:visible}
.fox-message-close{top:0;right:0}
@media(min-width:761px) and (max-width:1100px){
 .site-header{flex-direction:column;align-items:flex-start;gap:16px}
 .theme-nav{width:100%;justify-content:space-between;gap:16px;overflow:visible}
 .delivery-nodes{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
 .delivery-node:nth-child(n){grid-column:auto;grid-row:auto}
 .stack-proof-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
 .theme-nav{overflow:visible;padding-bottom:0}
 .hero .hero-actions:has(.resume-link) .button.primary{grid-column:1 / -1}
 .hero .hero-actions:has(.resume-link) .button.secondary{grid-column:1 / -1}
 .hero .hero-actions .resume-link{grid-column:1 / -1}
 .contact-platforms .button{justify-content:center;text-align:center}
 .diagram-toolbar{flex-wrap:wrap}
 .tool-drift{display:none}
 .fox-companion{right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom))}
 body:has(.back-to-top.is-visible) .fox-companion{bottom:calc(80px + env(safe-area-inset-bottom))}
 .back-to-top{bottom:calc(16px + env(safe-area-inset-bottom))!important}
 body{padding-bottom:0}
}
@media(max-width:380px){
 .theme-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
 .theme-nav a{display:flex!important;justify-content:center;text-align:center;min-width:0}
 .availability-pill{white-space:normal;line-height:1.6}
 .hero.parallax-story{padding-inline:16px}
 .consultation-invite{padding:1rem}
 .diagram-toolbar>span{max-width:none}
 .proof div{padding-inline:10px}
}
@supports not (height:100svh){.hero.parallax-story{min-height:calc(100vh - var(--opening-header-height,90px) - var(--opening-proof-height,90px))}}

/* Native range interaction supports mouse, touch, and keyboard on all layouts. */
.send-check{--send-progress:0%;background:#192735;border:1px solid #94b6ce66;border-radius:8px;padding:1rem;min-width:0}
.send-check-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:.75rem}
.send-check-heading>span,.send-check>small{font-size:12px;color:var(--muted);line-height:1.6}
.send-check>small{display:block;margin-top:.75rem}
.send-slider-track{height:52px;position:relative;border:1px solid #617382;border-radius:7px;background:#101c29;overflow:hidden}
.send-slider-fill{position:absolute;inset:0 auto 0 0;width:var(--send-progress);background:#5eead433;pointer-events:none}
.send-slider-caption{position:absolute;inset:0;display:grid;place-items:center;padding-left:36px;font-size:14px;color:var(--text);pointer-events:none}
.project-contact-form .send-slider-track input{position:absolute;inset:0;width:100%;height:52px;padding:0;margin:0;border:0;border-radius:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:ew-resize;touch-action:pan-y}
.send-slider-track input::-webkit-slider-runnable-track{height:52px;background:transparent}
.send-slider-track input::-moz-range-track{height:52px;background:transparent}
.send-slider-track input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:52px;height:52px;border:0;border-radius:6px;background:#5eead4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101c29' stroke-width='2.5'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/24px no-repeat}
.send-slider-track input::-moz-range-thumb{width:52px;height:52px;border:0;border-radius:6px;background:#5eead4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101c29' stroke-width='2.5'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/24px no-repeat}
.project-contact-form .send-slider-track input:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.send-check.confirmed{border-color:#8ce3ae}.send-check.confirmed .send-slider-fill{background:#8ce3ae33}
.send-check.confirmed .send-check-heading>span{color:#8ce3ae}
.contact-fox-dock{position:relative;min-height:155px;min-width:0}
.contact-fox-dock[hidden]{display:none}
.contact-fox-dock .fox-companion.at-contact{position:absolute;top:25px;right:0;bottom:auto;width:100px;transition:none}
.at-contact .fox-hint{display:none}
.at-contact .fox-message{right:calc(100% + 8px);top:-25px;bottom:auto;width:clamp(160px,calc(100vw - 230px),290px);padding:14px 36px 14px 14px;max-height:none;overflow:visible}
.at-contact .fox-message::after{top:42px;right:-7px;bottom:auto;transform:rotate(-45deg)}
.at-contact .fox-message-text{font-size:14px;line-height:1.5;margin-bottom:0}
.at-contact .fox-message-contact{display:none}
@media(max-width:999px){.contact-fox-dock .fox-companion.at-contact{width:64px}}
@media(max-width:480px){.contact-fox-dock{min-height:195px}.at-contact .fox-message{width:calc(100vw - 162px);min-width:0}.send-check-heading{align-items:flex-start}.send-check-heading>span{text-align:right}.send-check{padding:.85rem}}
/* Size the helper bubble from the actual form width, not the viewport. */
.contact-fox-dock .fox-companion.at-contact{width:100%}
.at-contact .fox-boop{margin-left:auto}
.at-contact .fox-dismiss{right:-8px}
.at-contact .fox-restore{float:right}
.at-contact .fox-message{right:108px;width:calc(100% - 116px);max-width:290px}
@media(max-width:999px){.at-contact .fox-message{right:72px;width:calc(100% - 80px)}}
.contact-fox-dock .fox-companion.at-contact{bottom:auto!important}

/* Compact helper above the form, with the message beside the fox. */
.contact-form-wrap{min-width:0;align-self:start}
.contact-fox-dock{min-height:112px}
.contact-fox-dock .fox-companion.at-contact{top:auto;bottom:12px!important;left:50%;right:auto;width:80px;transform:translateX(-50%)}
.at-contact .fox-boop{margin:0}
.at-contact .fox-message{top:auto;bottom:0;right:calc(100% + 12px);width:clamp(150px,calc(100vw - 180px),240px);max-width:none;transform:none;padding:10px 28px 10px 12px}
.at-contact .fox-message-text{font-size:12px;line-height:1.4}
.at-contact .fox-message::after{top:auto;bottom:24px;right:-7px;transform:rotate(-45deg)}
.at-contact .fox-message-contact{display:none}
.fox-hint{border-radius:12px;background:#f4e5ce;border:1px solid #ffe6c6;box-shadow:0 4px 16px #0003;bottom:calc(100% + 20px);min-height:44px}
.fox-hint::before,.fox-hint::after{display:none}
.at-contact .fox-hint:not([hidden]){display:block;right:50%;transform:translateX(50%);bottom:calc(100% + 20px);width:170px}
@media(max-width:999px){
 .contact-fox-dock .fox-companion.at-contact{left:0;right:0;width:100%;transform:none}
 .at-contact .fox-boop{margin-left:auto}
 .at-contact .fox-message{right:76px;width:calc(100% - 84px);max-width:240px;box-sizing:border-box;overflow-wrap:anywhere}
}

/* Compact footer; reserve space beside the text for the mobile return arrow. */
footer{max-width:none;width:100%;align-items:center;gap:24px;border-top:1px solid var(--line);padding:28px max(24px,calc((100% - var(--max)) / 2));line-height:1.7}
footer>span:first-child{flex-shrink:0}
.footer-note{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 6px;min-width:0}
.footer-availability{white-space:nowrap}
@media(min-width:1200px) and (hover:hover) and (pointer:fine){
 footer{width:calc(100% + 124px);margin-right:-124px;padding-right:calc(124px + max(24px,calc((100% - var(--max)) / 2)))}
}
@media(max-width:760px){
 footer{flex-direction:column;align-items:flex-start;gap:6px;padding:16px max(76px,calc(76px + env(safe-area-inset-right))) calc(20px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));text-align:left;line-height:1.5}
 footer>span:first-child{font-size:13px}
 footer>.footer-note{display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:34rem;font-size:12px;text-align:left;text-wrap:wrap}
 .footer-availability{color:var(--muted);font-size:12px;letter-spacing:.03em}
}

/* Tablets use a content-sized introduction in portrait and landscape. */
@media(min-width:761px) and (max-width:1199px), (min-width:761px) and (max-width:1600px) and (pointer:coarse){
 .hero.parallax-story{min-height:0;padding:36px 32px 32px}
 .hero .story-panels{flex:0 0 auto}
 .hero .story-panel:first-child{flex:0 1 760px;max-width:760px;justify-content:flex-start;gap:18px}
 .hero .availability-pill,.hero .eyebrow,.hero h1,.hero .story-panel .hero-text,.hero .journey-cue{margin-block:0}
 .hero .hero-actions{width:100%}
 .fox-companion{width:64px;bottom:80px;right:12px}
 .fox-boop{width:64px;height:64px}
 .back-to-top{bottom:16px!important;right:16px}
}

/* Eight-layer platform explorer. */
.stack-anchor{position:absolute;top:0;scroll-margin-top:32px}
.tool-stack .section-heading{max-width:800px}
.stack-explorer{--stack-progress:12.5%;position:relative;border:1px solid #91abc24d;border-radius:18px;background:linear-gradient(130deg,#263544fa,#1b2937fa);box-shadow:0 24px 65px #07111b30;overflow:hidden}
.stack-tabs{position:relative;display:flex;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#5eead470 transparent;border-bottom:1px solid #91abc238;background:#14212d70;scroll-padding:20px}
.stack-tab{position:relative;flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:9px;min-height:68px;padding:16px 19px;border:0;border-bottom:3px solid transparent;background:transparent;color:#c5d1dd;font:500 12px/1.4 monospace;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.stack-tab>span{font-size:10px;opacity:.65}
.stack-tab:hover{color:#fff;background:#ffffff08}
.stack-tab[aria-selected="true"]{border-bottom-color:var(--accent);color:#fff;background:#5eead40d}
.stack-tab[aria-selected="true"]>span{color:var(--accent);opacity:1}
.stack-panel{display:grid;grid-template-columns:minmax(250px,.85fr) minmax(0,1.5fr);gap:clamp(28px,5vw,72px);padding:clamp(24px,3.5vw,48px);min-height:420px;align-items:start}
.stack-panel[hidden]{display:none}
.stack-number{display:flex;align-items:baseline;gap:12px;color:var(--accent);font:500 clamp(46px,5vw,64px)/1 monospace;letter-spacing:-.06em;margin-bottom:18px}
.stack-number>span{color:#aebfd0;font-size:13px;letter-spacing:0}
.stack-layer h3{font-size:clamp(23px,2.4vw,32px);font-weight:600;line-height:1.15;letter-spacing:-.035em;margin:0 0 12px}
.stack-layer>p{color:var(--muted);font-size:16px;line-height:1.65;margin:0 0 24px;max-width:32ch}
.stack-evidence{padding:20px;border:1px solid #5eead426;border-radius:12px;background:#5eead408}
.stack-evidence>span{font:11px monospace;letter-spacing:.14em;color:var(--accent)}
.stack-evidence p{font-size:14px;line-height:1.75;color:#d3dce6;margin:10px 0 14px}
.stack-evidence a{display:inline-flex;gap:12px;align-items:center;font-size:13px;font-weight:500;color:var(--accent);text-decoration:none;min-height:28px}
.stack-evidence a:hover{text-decoration:underline;text-underline-offset:4px}
.stack-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;margin:6px 0 0;padding:0}
.stack-tools li{display:flex;align-items:center;gap:15px;min-height:98px;padding:18px;border:1px solid #91abc23d;border-radius:12px;background:#15233075;transition:border-color .2s,background .2s}
.stack-tools li:hover{border-color:#5eead470;background:#2e3f50}
.stack-icon{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:12px;font:600 12px monospace;letter-spacing:.02em;background:#5eead41c;color:#5eead4;border:1px solid #5eead43b}
.stack-icon.tone-1{background:#7ec9cf18;color:#a3e2e7;border-color:#7ec9cf36}
.stack-icon.tone-2{background:#e1bd7718;color:#f0d29a;border-color:#e1bd7736}
.stack-tools li>div{min-width:0}
.stack-tools strong{display:block;color:#f5f8fc;font-size:16px;font-weight:600;line-height:1.4}
.stack-tools li>div>span{display:block;margin-top:4px;color:#b9cad9;font:12px/1.6 monospace;overflow-wrap:anywhere}
.stack-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px;padding:16px 28px;border-top:1px solid #91abc238;background:#14212d40}
.stack-arrow{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid #91abc250;border-radius:50%;background:transparent;color:var(--text);font:22px/1 system-ui;cursor:pointer;transition:background .2s,border-color .2s}
.stack-arrow:hover{border-color:var(--accent);background:#5eead412}
.stack-position{display:flex;align-items:center;gap:12px;color:#9eb3c6;font:11px monospace}
.stack-current{color:var(--accent)}
.stack-progress{width:clamp(50px,10vw,140px);height:3px;background:#91abc230;border-radius:4px;overflow:hidden}
.stack-progress i{display:block;width:var(--stack-progress);height:100%;background:var(--accent);transition:width .3s}
.stack-control-end{display:flex;align-items:center;gap:20px}
.stack-play{min-height:44px;padding:0 4px;border:0;background:none;color:#c5d1dd;text-decoration:underline;text-underline-offset:4px;font:12px monospace;cursor:pointer}
@media(max-width:900px){.stack-tab{min-height:60px;padding:14px 16px}.stack-panel{gap:28px;grid-template-columns:minmax(220px,.85fr) minmax(0,1.2fr)}.stack-tools{grid-template-columns:1fr}.stack-tools li{min-height:80px;padding:14px}.stack-panel{min-height:560px}}
@media(max-width:600px){.stack-explorer{border-radius:14px}.stack-panel{grid-template-columns:1fr;gap:24px;padding:24px 20px;min-height:0}.stack-layer>p{max-width:none;margin-bottom:18px}.stack-number{font-size:46px;margin-bottom:14px}.stack-evidence{padding:16px}.stack-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}.stack-tools li{flex-direction:column;align-items:flex-start;gap:12px;padding:15px;min-height:152px}.stack-tools strong{font-size:14px}.stack-tools li>div>span{font-size:11px}.stack-controls{padding:14px 16px;gap:10px}.stack-control-end{gap:12px}.stack-position{gap:8px}.stack-progress{width:40px}.stack-play{font-size:11px}}

/* Local brand marks and staggered tool reveals for every layer. */
.stack-icon.has-logo{background:#f3f7fc;border-color:#ffffff4d;box-shadow:0 3px 12px #0002}
.stack-icon img{display:block;width:30px;height:30px;object-fit:contain}
.stack-icon.has-logo.brand-amazonwebservices img{width:36px}
.stack-panel.stack-enter .stack-layer{animation:stack-layer-in .45s cubic-bezier(.2,.7,.2,1) both}
.stack-panel.stack-enter .stack-tools li{animation:stack-tool-in .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(65ms * var(--tool-order,0) + 70ms)}
@keyframes stack-layer-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
@keyframes stack-tool-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.stack-panel.stack-enter .stack-layer,.stack-panel.stack-enter .stack-tools li{animation:none}.stack-progress i{transition:none}}
.stack-icon.brand-longhorn img{width:34px;height:30px}
.stack-icon.brand-ollama img{width:28px;height:33px}

/* Technical typography: local terminal fonts avoid network and font-swap delays. */
:root{--font-tech:ui-monospace,"SFMono-Regular","Cascadia Code","Liberation Mono",Consolas,monospace}
h1,h2,h3,h4,.story-title,.stack-layer h3,.eyebrow,.brand-role,.project-type{font-family:var(--font-tech);font-weight:600;letter-spacing:-.025em}
.hero h1{font-size:clamp(2rem,3.8vw,3.5rem);line-height:1.18;letter-spacing:-.045em}
.hero .outline-word{font-size:1em;line-height:inherit}
.hero .hero-line-final{font-size:.58em;line-height:1.4;letter-spacing:-.025em;margin-top:.65em}
h2,.story-title,.engineering-story .story-panel .story-title{font-size:clamp(1.5rem,2.8vw,2.25rem);line-height:1.3}
h3,.services-grid h3,.project-content h3,.stack-layer h3,#oneview h3,.consultation-invite h3{font-size:clamp(1.125rem,1.8vw,1.5rem);line-height:1.4}
.eyebrow,.project-type{font-size:.75rem;line-height:1.6;letter-spacing:.06em}
.hero .story-panel .hero-text,.section-heading>p:last-child{font-size:1rem;line-height:1.7}
@media(max-width:760px),(prefers-reduced-motion:reduce){
  body::after{display:none}
  .tool-drift,.infra-foreground,.background-controls{display:none}
  .project-card,.project-card.featured,.architecture-card,.capability-grid>div,.contact-grid>a,.cta{backdrop-filter:none}
}

/* Pause decorative painting while its section is outside the viewport. */
.effects-offscreen .flow-packet,.effects-offscreen .delivery-node,
.effects-offscreen .product-orbit,.effects-offscreen .phone-shell,
.effects-offscreen .product-badge{animation-play-state:paused}
.delivery-node{animation:none}

/* Extend the terminal ribbon through the desktop companion gutter. */
@media(min-width:1200px) and (hover:hover) and (pointer:fine){
  .command-ticker{width:calc(100% + 124px);margin-right:-124px}
}

/* Keep navigation available, with an opaque surface for readable scrolling. */
.site-header{position:sticky;top:0;z-index:90;background:#182330;box-shadow:0 8px 24px #09111a40}
main [id]{scroll-margin-top:calc(var(--opening-header-height,160px) + 20px)}
/* A bright surface and transform-only highlight for the primary contact actions. */
.theme-nav .nav-contact,.consultation-invite>.button,#contact-submit:not(:disabled){
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(135deg,#5eead4 0%,#5eead4 45%,#5eead4 100%);
  color:#142230;border:1px solid #5eead4;
  box-shadow:inset 0 1px 0 #ffffffb3,0 0 18px #5eead43b;
}
.theme-nav .nav-contact::before,.consultation-invite>.button::before,#contact-submit:not(:disabled)::before{
  content:"";position:absolute;inset:-20% auto -20% -60%;width:45%;
  background:linear-gradient(90deg,transparent,#ffffff70,transparent);
  transform:translateX(0) skewX(-20deg);pointer-events:none;
  animation:contact-shine 7s ease-in-out infinite;
}
.theme-nav .nav-contact:is(:hover,:focus-visible),.consultation-invite>.button:is(:hover,:focus-visible),#contact-submit:not(:disabled):is(:hover,:focus-visible){
  background:linear-gradient(135deg,#ccfbf1,#5eead4 55%,#5eead4);
  box-shadow:inset 0 1px 0 #fff,0 0 24px #5eead459;
}
#contact-submit:disabled{cursor:not-allowed}
@keyframes contact-shine{0%,72%{transform:translateX(0) skewX(-20deg)}92%,100%{transform:translateX(420%) skewX(-20deg)}}
@media(prefers-reduced-motion:reduce){.theme-nav .nav-contact::before,.consultation-invite>.button::before,#contact-submit:not(:disabled)::before{animation:none;display:none}}

/* Compact sticky navigation after leaving the opening view. */
.site-header.is-compact{padding-block:8px;gap:8px}
.site-header.is-compact .brand-role{display:none}
.site-header.is-compact .brand-mark{width:32px;height:32px}
.site-header.is-compact .brand{font-size:14px}
@media(max-width:1100px){
  .site-header.is-compact{flex-direction:row;align-items:center}
  .site-header.is-compact .brand{display:none}
  .site-header.is-compact .theme-nav{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;width:100%;overflow-x:auto;scrollbar-width:none}
  .site-header.is-compact .theme-nav::-webkit-scrollbar{display:none}
  .site-header.is-compact .theme-nav a{flex:0 0 auto;font-size:12px;min-height:44px}
}

/* Short neon accents distinguish section headings. */
.section h2::after{
  content:"";display:block;width:52px;height:3px;margin-top:14px;
  border-radius:999px;background:var(--accent);
  box-shadow:0 0 6px #5eead466,0 0 14px #5eead426;
}

.section h2::after{transform-origin:left center}
.section h2.underline-pending::after{transform:scaleX(0)}
.section h2.underline-drawn::after{animation:heading-underline .65s cubic-bezier(.22,1,.36,1) both}
@keyframes heading-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.section h2.underline-pending::after,.section h2.underline-drawn::after{animation:none;transform:none}}

/* A static infrastructure scene preserves depth without a render loop. */
#cloud-scene[hidden]{display:none}
.background-controls[hidden]{display:none}
.parallax-world:not(.has-webgl)::before{
  content:"";position:absolute;inset:16% 8% 10% 26%;opacity:.5;
  border-top:3px solid #5eead480;border-inline:18px solid #40566b;
  background:repeating-linear-gradient(0deg,transparent 0 30px,#91abc240 30px 32px),repeating-linear-gradient(90deg,#263544 0 68px,#142230 68px 90px);
  transform:perspective(900px) rotateY(-18deg);box-shadow:inset 0 0 80px #182330;
}
.parallax-world:not(.has-webgl) .scene-fallback{inset:30% 12% 25% 40%;background:#182330d9;border:1px solid #91abc240;border-radius:12px}
@media(max-width:760px){.parallax-world:not(.has-webgl)::before{opacity:.25}.parallax-world:not(.has-webgl) .scene-fallback{opacity:.4}}

/* Animate compact navigation without abrupt display or row switches. */
.site-header{transition:padding-block .3s ease,gap .3s ease}
.site-header .brand{transition:font-size .3s ease,max-height .3s ease,opacity .2s ease}
.site-header .brand-mark{transition:width .3s ease,height .3s ease}
.site-header .brand-role{max-height:24px;overflow:hidden;opacity:1;transition:max-height .3s ease,margin-top .3s ease,opacity .2s ease}
.site-header.is-compact .brand-role{display:block;max-height:0;margin-top:0;opacity:0}
.site-header .theme-nav{transition:gap .3s ease}
.site-header .theme-nav a{transition:font-size .3s ease,padding .3s ease,background .2s ease,box-shadow .2s ease}
@media(max-width:1100px){
  .site-header,.site-header.is-compact{flex-direction:column;align-items:flex-start;flex-wrap:nowrap}
  .site-header .brand{max-height:64px;overflow:hidden;opacity:1}
  .site-header.is-compact{gap:0}
  .site-header.is-compact .brand{display:flex;max-height:0;opacity:0;visibility:hidden;pointer-events:none;transition:max-height .3s ease,opacity .2s ease,visibility 0s .3s}
}
@media(max-width:380px){
  .site-header.is-compact .theme-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;overflow:visible}
}
@media(prefers-reduced-motion:reduce){.site-header,.site-header .brand,.site-header .brand-mark,.site-header .brand-role,.site-header .theme-nav,.site-header .theme-nav a,.site-header.is-compact .brand{transition:none}}

/* Scalable terminal monogram; artwork remains sharp in the compact header. */
.site-header .brand-mark{border:0;background:none;box-shadow:none;text-shadow:none;flex-shrink:0}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}

/* AI platform services: readable HTML diagram, with no extra runtime. */
.ai-infrastructure .section-heading{max-width:800px}
.ai-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}
.ai-diagram{padding:28px;background:linear-gradient(145deg,#304354,#223140);border:1px solid var(--line);border-radius:16px;min-width:0}
.ai-diagram-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font:11px/1.6 var(--font-tech);color:var(--muted)}
.ai-status{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:20px;background:#5eead41a;color:var(--accent);font:11px/1.5 var(--font-tech)}
.ai-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ai-boundary{margin:36px 0 16px;color:var(--accent);font:10px/1.7 var(--font-tech);letter-spacing:.06em}
.ai-path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.ai-path li{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 14px;border:1px solid #93b6cb60;border-radius:10px;background:#18233080;min-width:0}
.ai-path li:nth-child(even){border-color:#5eead466}
.ai-path li:nth-child(odd)::after{content:"→";position:absolute;right:-20px;top:50%;transform:translateY(-50%);color:var(--accent)}
.ai-path li>span{font:10px var(--font-tech);color:var(--accent)}
.ai-path strong,.ai-support strong{font:600 14px/1.5 var(--font-tech)}
.ai-path small{font-size:12px;line-height:1.6;color:var(--muted)}
.ai-support{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px;padding-top:24px;border-top:1px dashed #93b6cb60}
.ai-support strong,.ai-support span{display:block}.ai-support span{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.6}
.ai-diagram-note{font-size:12px;color:var(--muted);line-height:1.6;margin:24px 0 0}
.ai-services{display:grid;gap:12px}.ai-services article{display:flex;gap:14px;padding:18px;border:1px solid var(--line);border-radius:12px;background:#263544f2}
.ai-services article>span{flex-shrink:0;display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#5eead41a;color:var(--accent);font:12px var(--font-tech)}
.ai-services h3{font-size:16px;margin:0 0 7px;line-height:1.4}.ai-services p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}
.ai-experience{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:24px 0;margin-top:20px;border-bottom:1px solid var(--line)}
.ai-experience p{flex:1 1 420px;font-size:15px;line-height:1.7;margin:0;color:var(--muted)}.ai-experience strong{color:var(--text)}
.ai-experience a{color:var(--accent);font-size:14px;text-underline-offset:4px}
@media(max-width:900px){.ai-layout{grid-template-columns:1fr}}
@media(max-width:480px){.ai-diagram{padding:20px}.ai-path{gap:24px 18px}.ai-path li{padding:14px 10px}.ai-path li:nth-child(odd)::after{right:-16px}.ai-support{gap:12px}.ai-services article{padding:16px}.ai-boundary{margin-top:24px}}

/* Connected AI platform diagram based on the supplied architecture reference. */
.ai-network-scroll{overflow-x:auto;margin-top:30px;border-radius:10px}
.ai-network{display:block;width:100%;min-width:540px;height:auto;overflow:visible}
.ai-security-zone{fill:#18233030;stroke:#a994ff;stroke-width:1;stroke-dasharray:4 5}
.ai-zone-label{font:8px var(--font-tech);letter-spacing:1px;fill:#c2b1ff}
.ai-connection{fill:none;stroke:#ae95ff;stroke-width:1.5;stroke-dasharray:5 5}
.ai-request-dot{fill:#5eead4;pointer-events:none}
.ai-network-node{cursor:pointer;outline:none}
.ai-network-node>rect{fill:#263544;stroke:#91abc2;stroke-width:1.2;transition:stroke .2s,fill .2s}
.ai-network-node:is(:hover,:focus-visible),.ai-network-node[aria-pressed="true"]{filter:drop-shadow(0 0 4px #5eead450)}
.ai-network-node:is(:hover,:focus-visible)>rect,.ai-network-node[aria-pressed="true"]>rect{stroke:#5eead4;stroke-width:2;fill:#34495d}
.ai-node-kubernetes>rect{stroke:#7faaff;stroke-dasharray:4 3}
.ai-node-kubernetes .ai-pod{fill:#20303f;stroke:#7faaff;stroke-dasharray:none}
.ai-node-model>rect{stroke:#5eead4}.ai-node-vector>rect{stroke:#b296ff}.ai-node-monitor>rect{stroke:#8ce3ae}
.ai-node-title{text-anchor:middle;font:600 10px var(--font-tech);fill:var(--text);pointer-events:none}
.ai-node-sub{text-anchor:middle;font:8px var(--font-tech);fill:var(--muted);pointer-events:none}
.ai-motion-toggle{min-height:40px;padding:6px 12px;border:1px solid var(--line);border-radius:20px;background:#5eead41a;color:var(--accent);font:12px var(--font-tech);cursor:pointer}
.ai-node-detail{min-height:3.4em;padding:14px 0 0;margin:12px 0 0;border-top:1px solid var(--line);font-size:14px;line-height:1.7;color:var(--text)}
.brand-foundry img{border-radius:5px}
@media(prefers-reduced-motion:reduce){.ai-network-node>rect{transition:none}}

/* Delivery uses the same interactive architecture canvas as the AI section. */
.delivery-network{min-width:800px}
.delivery-network .ai-node-title{font-size:13px}
.delivery-network .ai-node-sub{font-size:10px}
.delivery-stage-number{font:9px var(--font-tech);fill:var(--accent);pointer-events:none}
.delivery-architecture .runtime-services{margin-top:24px}
.delivery-architecture .ai-node-detail{min-height:3.4em}

/* Mobile reading uses standard UI type with a clear heading hierarchy. */
@media(max-width:760px){
 body{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;font-weight:400;line-height:1.6}
 h1,h2,h3,h4,.story-title,.stack-layer h3,.eyebrow,.brand-role,.project-type{font-family:inherit}
 .hero h1{font-size:36px;line-height:1.15;font-weight:700;letter-spacing:-.035em}
 .hero .hero-line-final{font-size:20px;line-height:1.4;font-weight:600;letter-spacing:0}
 h2,.story-title,.engineering-story .story-panel .story-title{font-size:28px;line-height:1.25;font-weight:700}
 h3,.services-grid h3,.project-content h3,.stack-layer h3,#oneview h3,.consultation-invite h3{font-size:20px;line-height:1.35;font-weight:650}
 .hero .story-panel .hero-text,.section-heading>p:last-child,.cta>p,.project-content>p:not(.project-type),.project-content li,.capability-grid p,.approach p,.tool-groups dd,.experience-list p,.contact-platforms>p:not(.eyebrow){font-family:inherit;font-size:16px;line-height:1.65;font-weight:400}
 .eyebrow,.project-type{font-size:12px;font-weight:600;letter-spacing:.08em}
 .site-header .theme-nav,.site-header.is-compact .theme-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;overflow:visible}
 .site-header .theme-nav a,.site-header.is-compact .theme-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 0;font-size:12px;line-height:1.2;letter-spacing:0}
 .site-header .theme-nav .nav-contact,.site-header.is-compact .theme-nav .nav-contact{min-height:36px;padding:6px 10px;border-radius:5px;font-size:12px;box-shadow:none}
 .theme-nav .nav-contact::before{display:none}
}
.fox-companion.is-ai .fox-directions{background-image:url('assets/drone-riso-directions.webp')}
.fox-companion.is-ai .fox-reactions{display:none}

/* Video introduction sits ahead of project details and keeps the player at 16:9. */
.section.video-cv{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:center;gap:clamp(24px,4vw,56px);min-height:0}
.video-cv-copy,.video-cv-player{min-width:0}
.video-cv-copy h2{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.12;letter-spacing:-.04em;margin:0 0 20px}
.video-cv-copy>p:not(.eyebrow){color:var(--muted);font-size:15px;line-height:1.8;max-width:38ch;margin-bottom:20px}
.video-cv-link{display:inline-flex;align-items:center;gap:12px;color:var(--accent);font-size:14px;text-underline-offset:5px}
.video-cv-link:hover{text-decoration:underline}
.video-cv-player{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#05070a;box-shadow:0 16px 48px #0003}
.video-cv-player iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:900px){.section.video-cv{grid-template-columns:minmax(0,1fr);gap:24px}.video-cv-copy>p:not(.eyebrow){max-width:60ch}.video-cv-copy h2 br{display:none}}
@media(max-width:480px){.video-cv-player{border-radius:8px}.video-cv-copy h2{font-size:1.8rem}}

/* Stack the compact fox above the bottom-right arrow. */
.back-to-top{right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom))!important}
.fox-companion:not(.at-contact){width:64px;right:max(12px,env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom));transition:none}
body:has(.back-to-top.is-visible) .fox-companion:not(.at-contact){right:max(12px,env(safe-area-inset-right));bottom:calc(68px + env(safe-area-inset-bottom))}
.fox-companion:not(.at-contact) .fox-boop{width:64px;height:64px}
.fox-companion:not(.at-contact) .fox-message{bottom:calc(100% + 8px);width:min(210px,calc(100vw - 92px));padding:12px 40px 12px 12px;border-radius:12px;box-sizing:border-box}
.fox-companion:not(.at-contact) .fox-message-text{font-size:13px;line-height:1.45;margin:0}
.fox-companion:not(.at-contact) .fox-message-contact{display:inline-block;margin-top:6px;font-size:12px;line-height:1.5}
.fox-companion:not(.at-contact) .fox-message::after{right:24px}
@media(max-width:760px){
 .fox-companion:not(.at-contact) .fox-message{width:min(190px,calc(100vw - 92px))}
}

.fox-companion:not(.at-contact) .fox-hint{width:170px;min-height:0;box-sizing:border-box;padding:10px 12px;font-size:12px;line-height:1.4;bottom:calc(100% + 8px);right:0}