/*!
 * Naringhi — site stylesheet (shared by every page).
 *
 * Source file: src/assets/site.css. The build (build.mjs) copies it to
 * dist/assets/site.<content-hash>.css and links that file from every page, so
 * browsers download it once and keep it in cache for a year; any edit changes
 * the hash and therefore the URL, so visitors never see a stale stylesheet.
 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#05070A;--panel:#080B11;--panel-2:#070A10;--line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.18);--text:#E4E4E7;--text-dim:#A1A1AA;--text-mute:#8E8E97;--text-faint:#7C7C86;--amber-300:#FCD34D;--amber-400:#FBBF24;--amber-600:#D97706;--ease:cubic-bezier(.16,1,.3,1);--r:1rem;--r-lg:1.5rem;--r-xl:2rem;--fs:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--fd:'Sora','Inter',ui-sans-serif,system-ui,sans-serif;--fm:ui-monospace,SFMono-Regular,Menlo,monospace}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fs);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
/* Icons are sized by their own width/height attributes. There is deliberately no global
   size cap, so larger SVGs (diagrams, illustrations) render at their intended size. */
svg{flex-shrink:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:rgba(251,191,36,.3);color:#fff}
:focus-visible{outline:2px solid var(--amber-400);outline-offset:3px;border-radius:4px}
.container{width:100%;max-width:80rem;margin-inline:auto;padding-inline:1rem}
@media(min-width:640px){.container{padding-inline:1.5rem}}
@media(min-width:1024px){.container{padding-inline:2rem}}
.section{padding-block:4.5rem;border-top:1px solid rgba(255,255,255,.05)}
@media(min-width:640px){.section{padding-block:6rem}}
#services{padding-top:2.5rem;padding-bottom:5rem}
#contact{padding-top:1.5rem;padding-bottom:5rem;position:relative;overflow:hidden}
@media(min-width:640px){
  #services{padding-top:3rem;padding-bottom:5.5rem}
  #contact{padding-top:2rem;padding-bottom:5.5rem}
}
section[id],article[id]{scroll-margin-top:5.5rem}
@media(min-width:640px){section[id],article[id]{scroll-margin-top:6rem}}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--amber-400);color:#09090B;padding:.625rem 1.25rem;border-radius:9999px;font-size:.875rem;font-weight:600}
.skip-link:focus{left:1rem;top:1rem;outline:2px solid #FDE68A}

/* Mobile-friendly readable minimum font sizes */
.eyebrow{font-size:.6875rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(251,191,36,.85)}
@media(min-width:640px){.eyebrow{font-size:.75rem;letter-spacing:.32em}}
.h1{font-family:var(--fd);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#fff;font-size:clamp(1.625rem,5vw + .5rem,2.5rem)}
@media(min-width:640px){.h1{font-size:clamp(1.875rem,min(4.5vw + 1rem,7.5vh),4rem);line-height:1.08}}
.h2{font-family:var(--fd);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:#fff;font-size:clamp(1.75rem,3vw + 1rem,2.75rem)}
.h3{font-family:var(--fd);font-weight:700;line-height:1.25;letter-spacing:-.01em;color:#fff;font-size:clamp(1.25rem,1.5vw + 1rem,1.5rem)}
.h4{font-family:var(--fd);font-weight:600;line-height:1.35;color:#fff;font-size:1rem}
.lead{font-size:1rem;line-height:1.7;color:var(--text-dim)}
@media(min-width:640px){.lead{font-size:1.125rem}}
.gradient-text{background:linear-gradient(90deg,#FDE68A,#FBBF24,#D97706);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Utility classes (keep markup free of inline style attributes) */
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-12{margin-top:3rem}
.px-4{padding-inline:1rem}
.w-full{width:100%}
.rel{position:relative}
.d-80{--reveal-delay:80ms}
.d-100{--reveal-delay:100ms}
.d-110{--reveal-delay:110ms}
.d-120{--reveal-delay:120ms}
.d-140{--reveal-delay:140ms}
.d-160{--reveal-delay:160ms}
.d-180{--reveal-delay:180ms}
.d-200{--reveal-delay:200ms}
.d-220{--reveal-delay:220ms}
.d-240{--reveal-delay:240ms}
.d-260{--reveal-delay:260ms}
.d-300{--reveal-delay:300ms}
.d-320{--reveal-delay:320ms}
.d-330{--reveal-delay:330ms}
.d-360{--reveal-delay:360ms}
.d-400{--reveal-delay:400ms}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.75rem;border-radius:9999px;font-size:.875rem;font-weight:600;line-height:1;transition:transform .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);white-space:nowrap}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--amber-400);color:#09090B;box-shadow:0 20px 25px -5px rgba(245,158,11,.2)}
.btn-primary:hover:not([disabled]){background:var(--amber-300);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.05);color:#fff;border:1px solid var(--line-strong);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(251,191,36,.5);transform:translateY(-2px)}
.btn-sm{padding:.625rem 1.25rem;font-size:.8125rem}
.btn-block{width:100%}
@media(min-width:640px){.btn-block{width:auto}}
.arrow{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arrow,.link-arrow:hover .arrow{transform:translateX(4px)}
.link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;color:var(--amber-400);transition:gap .3s var(--ease)}
.link-arrow:hover{gap:1rem}
.site-header{position:fixed;inset:0 0 auto 0;z-index:50}
/* position:relative makes the nav bar the positioning box of the Services mega menu */
.nav-shell{position:relative;margin-top:.75rem;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-radius:var(--r);background:rgba(255,255,255,.08);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:all .5s var(--ease)}
@media(min-width:640px){.nav-shell{padding:.75rem 1.5rem}}
.nav-shell.is-scrolled{background:rgba(255,255,255,.14);border-color:var(--line-strong);box-shadow:0 20px 45px -20px rgba(0,0,0,.85)}

/* Brand logo (naringhi_logo.webp in the site root, transparent background) */
.logo{display:inline-flex;align-items:center;gap:.625rem;flex-shrink:0}
.logo-img{display:block;height:2rem;width:auto;max-width:10.5rem;object-fit:contain;transition:transform .4s var(--ease),filter .4s var(--ease);filter:drop-shadow(0 2px 8px rgba(0,0,0,.25))}
@media(min-width:640px){.logo-img{height:2.25rem;max-width:11.5rem}}
.logo-img-sm{height:1.75rem;max-width:9rem}
.logo-img-footer{height:2.125rem;max-width:10.5rem}
.logo:hover .logo-img{transform:scale(1.03);filter:drop-shadow(0 4px 12px rgba(251,191,36,.22))}
/* Shown instead of the logo image if naringhi_logo.webp cannot be loaded (see the guard script in <head>) */
.logo-fallback{font-family:var(--fd);font-size:1.375rem;font-weight:800;line-height:1;letter-spacing:-.01em;color:var(--amber-400)}

.nav-links{display:none;align-items:center;gap:.25rem}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-link{display:block;padding:.5rem .875rem;border-radius:9999px;font-size:.875rem;font-weight:500;color:#D4D4D8;transition:background-color .3s var(--ease),color .3s var(--ease)}
.nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-cta{display:none}
@media(min-width:1024px){.nav-cta{display:flex;align-items:center;gap:.75rem}}
.hamburger{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.75rem;background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff}
.hamburger:hover{background:rgba(255,255,255,.1)}
@media(min-width:1024px){.hamburger{display:none}}
.hamburger-bars{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hamburger-bars span{display:block;height:2px;width:1.25rem;border-radius:9999px;background:currentColor}
.hamburger-bars span:last-child{width:.875rem}
/* Services mega menu. The panel is positioned against the whole nav bar (.nav-shell), not
   against the "Services" button, so it always spans exactly the width of the nav bar and
   can never run past either edge of the screen. Its height is capped to the viewport and
   it scrolls internally on short screens. */
.mega{position:static}
.mega-trigger{display:flex;align-items:center;gap:.375rem;padding:.5rem .875rem;border-radius:9999px;font-size:.875rem;font-weight:500;color:#D4D4D8;transition:background-color .3s var(--ease),color .3s var(--ease)}
.mega-trigger:hover{background:rgba(255,255,255,.06);color:#fff}
.mega-trigger svg{transition:transform .3s var(--ease)}
.mega.is-open .mega-trigger svg,.mega:not(.is-enhanced):hover .mega-trigger svg,.mega:not(.is-enhanced):focus-within .mega-trigger svg{transform:rotate(180deg)}
.mega-panel{position:absolute;left:0;right:0;top:calc(100% + .625rem);transform:translateY(12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;z-index:60}
/* Invisible hover bridge across the gap between the button and the panel */
.mega-panel::before{content:"";position:absolute;left:0;right:0;top:-1.5rem;height:1.5rem}
/* With JS the panel is controlled only by .is-open; without JS it falls back to :hover / :focus-within */
.mega.is-open .mega-panel,.mega:not(.is-enhanced):hover .mega-panel,.mega:not(.is-enhanced):focus-within .mega-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mega-inner{max-height:calc(100vh - 7.5rem);max-height:calc(100dvh - 7.5rem);overflow-y:auto;overscroll-behavior:contain;border-radius:var(--r-lg);border:1px solid var(--line);background:rgba(10,13,20,.96);backdrop-filter:blur(20px);padding:1.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.6)}
.mega-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:1024px){.mega-grid{grid-template-columns:repeat(5,1fr)}.mega-intro{grid-column:span 2}.mega-list{grid-column:span 3}}
.mega-intro .mega-title{font-family:var(--fd);font-size:1.25rem;font-weight:700;color:#fff;margin-top:.75rem}
.mega-intro p{margin-top:.75rem;font-size:.875rem;line-height:1.7;color:var(--text-mute)}
.mega-intro .btn{margin-top:1.25rem}
.mega-list{display:grid;grid-template-columns:1fr;gap:.5rem}
@media(min-width:640px){.mega-list{grid-template-columns:repeat(2,1fr)}}
.mega-item{display:block;padding:.75rem;border-radius:var(--r);border:1px solid transparent;transition:all .3s var(--ease)}
.mega-item:hover{border-color:var(--line);background:rgba(255,255,255,.05)}
.mega-item .num{font-family:var(--fm);font-size:.6875rem;color:rgba(251,191,36,.7);margin-right:.5rem}
.mega-item .title{font-family:var(--fd);font-size:.875rem;font-weight:600;color:#fff}
.mega-item .desc{display:block;margin-top:.25rem;font-size:.75rem;line-height:1.6;color:var(--text-mute)}
.mobile-backdrop{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.mobile-backdrop.is-open{opacity:1;pointer-events:auto}
@media(min-width:1024px){.mobile-backdrop{display:none}}
.mobile-menu{position:fixed;right:0;top:0;z-index:70;display:flex;flex-direction:column;width:86%;max-width:24rem;height:100%;background:rgba(8,11,17,.98);backdrop-filter:blur(20px);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .5s var(--ease)}
.mobile-menu.is-open{transform:translateX(0)}
@media(min-width:1024px){.mobile-menu{display:none}}
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--line)}
.mobile-close{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.5rem;border:1px solid var(--line);color:#D4D4D8}
.mobile-close:hover{background:rgba(255,255,255,.1);color:#fff}
.mobile-menu-body{flex:1;overflow-y:auto;padding:1.5rem}
.mobile-nav-list{display:flex;flex-direction:column;gap:.25rem}
.mobile-link{display:block;padding:.75rem 1rem;border-radius:.75rem;font-family:var(--fd);font-size:1.125rem;font-weight:600;color:#D4D4D8;transition:background-color .3s var(--ease),color .3s var(--ease)}
.mobile-link-sm{font-size:.875rem}
.mobile-link:hover{background:rgba(255,255,255,.06);color:var(--amber-400)}
.mobile-menu-footer{padding:1.5rem;border-top:1px solid var(--line)}
.mobile-email{display:block;margin-top:1rem;text-align:center;font-size:.75rem;color:var(--text-mute)}
body.no-scroll{overflow:hidden}

/* Hero & non-blocking LCP animation */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,rgba(251,191,36,.08),transparent 60%),linear-gradient(180deg,#05070A 0%,#0A0E15 50%,#05070A 100%)}
/* Background media (home page). The poster is the first frame of the video loop, so the
   video can fade in over it without a visible jump. main.js attaches and plays the video
   only when the device can decode it smoothly; until then (or instead) the poster stays. */
.hero-poster,.hero-media{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 50%;pointer-events:none;-webkit-user-select:none;user-select:none}
.hero-media{opacity:0;transition:opacity .8s ease}
.hero-media.is-loaded{opacity:1}
/* Readability layers: overlay-1 dims the whole frame (darker under the nav, solid at the
   bottom so the hero blends into the next section); the scrim on .hero-content adds extra
   contrast directly behind the text, so moving video detail never competes with it. */
.hero-overlay-1{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,7,10,.82) 0%,rgba(5,7,10,.56) 28%,rgba(5,7,10,.56) 66%,rgba(5,7,10,1) 100%);z-index:1}
.hero-overlay-2{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(251,191,36,.14),transparent 60%);z-index:1}
.hero-content{position:relative;z-index:2;width:100%;max-width:72rem;margin-inline:auto;padding:5rem 1rem 2.75rem;text-align:center}
.hero-content::before{content:"";position:absolute;inset:2.5rem -2rem 0;z-index:-1;background:radial-gradient(closest-side,rgba(5,7,10,.76),rgba(5,7,10,.65) 50%,rgba(5,7,10,.4) 78%,rgba(5,7,10,0));pointer-events:none}
@media(min-width:640px){.hero-content{padding:6rem 1.5rem 3rem}}
@media(min-width:1024px){.hero-content{padding:6.5rem 2rem 3.5rem}}
@keyframes hero-enter{from{transform:translateY(14px)}to{transform:translateY(0)}}
.hero-content > *{animation:hero-enter .55s var(--ease) both}
.hero h1,.hero .lead{text-shadow:0 1px 2px rgba(5,7,10,.6),0 0 28px rgba(5,7,10,.65)}
/* A text-shadow would show through transparent gradient text, so it is switched off there */
.hero .gradient-text{text-shadow:none}
/* No backdrop blur over the playing video: re-blurring every video frame is expensive on phones */
.hero .btn-ghost{background:rgba(10,13,20,.62);-webkit-backdrop-filter:none;backdrop-filter:none}
.hero .btn-ghost:hover{background:rgba(24,28,38,.8)}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem 1rem;border-radius:9999px;border:1px solid rgba(251,191,36,.25);background:linear-gradient(rgba(251,191,36,.06),rgba(251,191,36,.06)),rgba(5,7,10,.55);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em;color:#FCD34D}
@media(min-width:640px){.hero-badge{font-size:.75rem;letter-spacing:.28em}}
.pulse-dot{position:relative;display:inline-flex;width:.375rem;height:.375rem}
.pulse-dot::before{content:"";position:absolute;inset:0;border-radius:9999px;background:var(--amber-400);animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}
.pulse-dot::after{content:"";position:relative;display:inline-flex;width:.375rem;height:.375rem;border-radius:9999px;background:var(--amber-400)}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}
.hero h1{margin-top:1.25rem}
.hero .lead{margin:1.25rem auto 0;max-width:42rem;font-size:.9375rem;line-height:1.6;color:#D4D4D8}
@media(min-width:640px){.hero .lead{margin-top:1.5rem;max-width:48rem;font-size:1.0625rem}}
.hero-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;margin-top:1.75rem}
@media(min-width:640px){.hero-cta{flex-direction:row;gap:.875rem;margin-top:2rem}}
.scroll-cue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;color:#8E8E97;animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@media(max-height:820px){.scroll-cue{display:none}}
@media(max-height:820px) and (min-width:640px){.hero-content{padding-top:5.25rem;padding-bottom:2.25rem}.hero h1{margin-top:1rem}.hero .lead{margin-top:1rem}.hero-cta{margin-top:1.5rem}}
@media(max-height:700px){.hero-content{padding-top:4.75rem;padding-bottom:1.75rem}.hero-badge{font-size:.625rem;padding:.3rem .85rem}.hero h1{margin-top:.75rem}.hero .lead{margin-top:.75rem;font-size:.875rem}.hero-cta{margin-top:1.25rem;gap:.5rem}.hero-cta .btn{padding:.75rem 1.5rem}}
@media(max-height:580px){.hero .lead{display:none}.hero-cta{margin-top:1rem}}
/* Pause / play control for the background video (WCAG 2.2.2). Hidden until main.js shows it. */
.hero-video-toggle{position:absolute;right:.75rem;bottom:.75rem;z-index:3;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:9999px;border:1px solid var(--line-strong);background:rgba(5,7,10,.62);color:#D4D4D8;transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease)}
.hero-video-toggle[hidden]{display:none}
.hero-video-toggle:hover{color:var(--amber-400);border-color:rgba(251,191,36,.45);background:rgba(5,7,10,.82)}
.hero-video-toggle .icon-play{display:none}
.hero-video-toggle[aria-pressed="true"] .icon-pause{display:none}
.hero-video-toggle[aria-pressed="true"] .icon-play{display:block}
@media(min-width:640px){.hero-video-toggle{right:1.5rem;bottom:1.5rem}}
@media(min-width:1024px){.hero-video-toggle{right:2rem;bottom:2rem}}
/* Phones: the CTA buttons are full width, so keep them clear of the control in the corner */
@media(max-width:639px){.hero-content{padding-bottom:3.75rem}}
/* No media in Windows High Contrast / forced colours: plain background keeps text legible */
@media(forced-colors:active){.hero-poster,.hero-media,.hero-video-toggle{display:none}}
/* Users who ask for more contrast get a darker veil over the video */
@media(prefers-contrast:more){.hero-overlay-1{background:linear-gradient(to bottom,rgba(5,7,10,.9),rgba(5,7,10,.88) 66%,rgba(5,7,10,1))}}

.marquee-section{position:relative;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);background:var(--panel-2);padding-block:3rem}
.marquee-label{text-align:center;margin-bottom:2rem;font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.28em;color:var(--text-faint)}
@media(min-width:640px){.marquee-label{font-size:.75rem;letter-spacing:.32em}}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;will-change:transform;animation:marquee-scroll 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track.is-paused{animation-play-state:paused}
@keyframes marquee-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee-group{display:flex;align-items:center;flex-shrink:0}
.marquee-item{display:flex;align-items:center;padding-inline:2rem;white-space:nowrap;font-family:var(--fd);font-size:1rem;font-weight:600;color:var(--text-faint);transition:color .3s var(--ease)}
@media(min-width:640px){.marquee-item{font-size:1.125rem}}
.marquee-item:hover{color:var(--amber-400)}
.marquee-item::after{content:"";display:inline-block;width:5px;height:5px;margin-left:4rem;border-radius:9999px;background:rgba(251,191,36,.35)}
.marquee-controls{display:flex;justify-content:center;margin-top:1.25rem}
.marquee-pause{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text-mute);transition:all .3s var(--ease)}
.marquee-pause:hover{color:var(--amber-400);border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08)}
.marquee-pause .icon-play{display:none}
.marquee-pause[aria-pressed="true"] .icon-pause{display:none}
.marquee-pause[aria-pressed="true"] .icon-play{display:block}

.stats-grid{margin-top:3rem;display:grid;grid-template-columns:1fr;gap:1px;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.05);overflow:hidden}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
/* Two-item variant: stays at two equal columns on large screens */
@media(min-width:1024px){.stats-grid.stats-grid-2{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--panel);padding:1.75rem}
@media(min-width:640px){.stat{padding:2.25rem}}
.stat-value{display:block;font-family:var(--fd);font-size:2.5rem;font-weight:800;line-height:1;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
@media(min-width:640px){.stat-value{font-size:3.25rem}}
.stat-label{display:block;margin-top:1.25rem;font-family:var(--fd);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--amber-400)}
.stat-desc{display:block;margin-top:.75rem;font-size:.875rem;line-height:1.6;color:var(--text-mute)}

.about-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:1024px){.about-grid{grid-template-columns:5fr 7fr;gap:4rem}}
.quote-card{margin-top:2rem;padding:1.5rem;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.02)}
.quote-card blockquote{font-family:var(--fd);font-size:1.125rem;font-weight:600;font-style:italic;color:var(--amber-300)}
.quote-card cite{display:block;margin-top:.75rem;font-size:.75rem;font-style:normal;text-transform:uppercase;letter-spacing:.2em;color:var(--text-mute)}
.value-list{margin-top:1.75rem;display:flex;flex-direction:column;gap:1rem}
.value-item{display:flex;gap:1.25rem;padding:1.5rem;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.02);transition:all .5s var(--ease)}
.value-item:hover{border-color:rgba(251,191,36,.3);background:rgba(255,255,255,.04)}
.value-num{flex-shrink:0;margin-top:.25rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:.5rem;border:1px solid rgba(251,191,36,.3);background:rgba(251,191,36,.1);font-family:var(--fm);font-size:.6875rem;font-weight:700;color:var(--amber-400)}
.value-title{display:block;font-family:var(--fd);font-size:1rem;font-weight:600;color:#fff}
.value-desc{display:block;margin-top:.5rem;font-size:.875rem;line-height:1.65;color:var(--text-dim)}

.vision-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:1024px){.vision-grid{grid-template-columns:repeat(2,1fr)}}
.vision-card{position:relative;overflow:hidden;padding:2rem;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(135deg,rgba(255,255,255,.05),transparent)}
@media(min-width:640px){.vision-card{padding:2.5rem}}
.vision-card p:last-child{position:relative;margin-top:1.5rem;font-family:var(--fd);font-size:1.125rem;line-height:1.65;color:#E4E4E7}
@media(min-width:640px){.vision-card p:last-child{font-size:1.25rem}}

.services-grid{margin-top:2.5rem;display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:640px){.services-grid{margin-top:3rem;grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media(min-width:1024px){.services-grid{margin-top:3rem;grid-template-columns:repeat(4,1fr)}}
.service-card{display:flex;flex-direction:column;padding:1.75rem 1.5rem;border-radius:var(--r-lg);border:1px solid var(--line);background:rgba(255,255,255,.02);transition:transform .5s var(--ease),border-color .5s var(--ease),background-color .5s var(--ease),box-shadow .5s var(--ease);height:100%}
@media(min-width:640px){.service-card{padding:2rem 1.75rem}}
.service-card:hover{transform:translateY(-6px);border-color:rgba(251,191,36,.4);background:rgba(255,255,255,.05);box-shadow:0 25px 50px -12px rgba(251,191,36,.08)}
.service-num{font-family:var(--fm);font-size:.6875rem;font-weight:600;letter-spacing:.1em;color:rgba(251,191,36,.7)}
.service-icon{margin-top:1.25rem;display:grid;place-items:center;width:3rem;height:3rem;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--amber-400);transition:all .5s var(--ease);overflow:hidden}
.service-card:hover .service-icon{border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.1)}
.service-card h3,.service-card h2{margin-top:1.25rem;font-size:1.0625rem}
.service-card h3 span,.service-card h2 span{display:inline-block;transition:transform .5s var(--ease)}
.service-card:hover h3 span,.service-card:hover h2 span{transform:translateX(4px)}
.service-card p{margin-top:.625rem;flex:1;font-size:.875rem;line-height:1.65;color:var(--text-dim)}
.service-explore{margin-top:1.5rem;display:inline-flex;align-items:center;gap:.5rem;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--amber-400);opacity:.75;transition:gap .5s var(--ease),opacity .5s var(--ease)}
.service-card:hover .service-explore{gap:1rem;opacity:1}

.pillar{padding-block:4rem;border-top:1px solid var(--line)}
@media(min-width:640px){.pillar{padding-block:5rem}}
.pillar-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:1024px){.pillar-grid{grid-template-columns:4fr 8fr;gap:3.5rem}}
.pillar-aside{align-self:start}
@media(min-width:1024px){.pillar-aside{position:sticky;top:8rem}}
.pillar-aside h3{margin-top:1rem}
.pillar-aside p{margin-top:1.25rem;font-size:.875rem;line-height:1.7;color:var(--text-dim)}
.pillar-aside .link-arrow{margin-top:1.75rem}
.pillar-body{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.pillar-body{grid-template-columns:repeat(2,1fr)}}
.pillar-card{padding:1.5rem;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.02);transition:all .5s var(--ease)}
.pillar-card:hover{border-color:rgba(251,191,36,.35);background:rgba(255,255,255,.05)}
.pillar-card p{margin-top:.75rem;font-size:.875rem;line-height:1.7;color:var(--text-dim)}
.pillar-card.span-2{grid-column:span 1}
@media(min-width:640px){.pillar-card.span-2{grid-column:span 2}}
/* Linked cards in a three-column grid (home page: reference architectures) */
.link-grid{margin-top:2.5rem;display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:768px){.link-grid{grid-template-columns:repeat(3,1fr)}}
.link-card{display:flex;flex-direction:column;height:100%}
.link-card p{flex:1}
.link-card .link-arrow{margin-top:1.25rem}

.faq-list{margin-top:2.5rem;max-width:56rem;margin-inline:auto;display:flex;flex-direction:column;gap:.75rem}
.faq-item{border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02);transition:all .3s var(--ease);overflow:hidden}
.faq-item[open]{border-color:rgba(251,191,36,.35);background:rgba(255,255,255,.04)}
.faq-item summary{padding:1.25rem 1.5rem;cursor:pointer;font-family:var(--fd);font-size:1rem;font-weight:600;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.5rem;font-weight:300;color:var(--amber-400);transition:transform .3s var(--ease);flex-shrink:0;line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 1.5rem 1.5rem;font-size:.9375rem;line-height:1.75;color:var(--text-dim)}
.eeat{margin-top:3rem;padding:1.5rem;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8125rem;color:var(--text-mute)}
.eeat strong{color:#E4E4E7;font-weight:600}
.eeat a{color:var(--amber-400);border-bottom:1px dotted rgba(251,191,36,.4)}
.standards{margin-top:1rem;padding:1.5rem;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02)}
.standards-list{margin-top:1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem 1.5rem;font-size:.8125rem;color:var(--text-mute)}
.standards-list a{color:var(--amber-400);border-bottom:1px dotted rgba(251,191,36,.4)}
.footer-heading{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.26em;color:rgba(251,191,36,.85)}

.contact-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(251,191,36,.16),transparent 65%);pointer-events:none}
.contact-shell{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.03)}
/* minmax(0,1fr): a column may shrink below the width of its widest child (long URLs, the
   spam-check widget), so nothing is pushed past the rounded card and clipped on phones. */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.contact-left{padding:2rem}
@media(min-width:640px){.contact-left{padding:3rem}}
@media(min-width:1024px){.contact-left{padding:3.5rem}}
.contact-left .lead{margin-top:1.5rem}
.contact-links{margin-top:2.5rem;display:flex;flex-direction:column;gap:1rem}
.contact-link{display:flex;align-items:center;gap:1rem;padding:1.25rem;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.02);transition:all .5s var(--ease)}
.contact-link:hover{border-color:rgba(251,191,36,.3);background:rgba(255,255,255,.05)}
.contact-link > span:last-child{min-width:0}
.contact-icon{display:grid;place-items:center;flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:.75rem;border:1px solid rgba(251,191,36,.3);background:rgba(251,191,36,.1);color:var(--amber-400);overflow:hidden}
.contact-label{display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.22em;color:var(--text-mute)}
.contact-value{display:block;font-size:.875rem;font-weight:600;color:#fff;overflow-wrap:anywhere;transition:transform .5s var(--ease)}
.contact-link:hover .contact-value{transform:translateX(4px)}
.contact-right{padding:2rem;background:rgba(7,10,16,.6);border-top:1px solid var(--line)}
@media(min-width:640px){.contact-right{padding:3rem}}
@media(min-width:1024px){.contact-right{padding:3.5rem;border-top:0;border-left:1px solid var(--line)}}
/* Phones: slimmer inner padding leaves room for the form and the spam-check widget */
@media(max-width:639px){.contact-left,.contact-right{padding:1.75rem 1.25rem}.contact-link{padding:1rem}}
#contact-form{display:flex;flex-direction:column;gap:1.25rem}
.form-row{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:640px){.form-row.two{grid-template-columns:repeat(2,1fr)}}
.field{display:block}
.field label{display:block;margin-bottom:.5rem;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--text-mute)}
.field input,.field textarea{width:100%;padding:.75rem 1rem;border-radius:.75rem;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#fff;font-family:inherit;font-size:1rem;line-height:1.5;transition:border-color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease)}
@media(min-width:640px){.field input,.field textarea{font-size:.875rem}}
.field input::placeholder,.field textarea::placeholder{color:#7C7C86}
.field input:focus,.field textarea:focus{outline:none;border-color:rgba(251,191,36,.6);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(251,191,36,.15)}
.field textarea{resize:vertical;min-height:6rem}
.form-note{text-align:center;font-size:.75rem;line-height:1.6;color:var(--text-faint)}
.turnstile-slot{margin:0;max-width:100%;min-height:65px}
.form-status{min-height:1.25rem;margin:0;font-size:.8125rem;line-height:1.6;text-align:center}
.form-status.is-info{color:var(--text-mute)}
.form-status.is-success{color:#86EFAC}
.form-status.is-error{color:#FCA5A5}

.site-footer{border-top:1px solid var(--line);background:var(--panel-2)}
.footer-inner{padding-block:3.5rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(12,1fr)}.footer-brand{grid-column:span 4}.footer-col-services{grid-column:span 3}.footer-col-company{grid-column:span 2}.footer-col-cta{grid-column:span 3}}
.footer-brand p{margin-top:1.25rem;max-width:24rem;font-size:.875rem;line-height:1.7;color:var(--text-mute)}
.footer-location{margin-top:.75rem;font-size:.875rem;color:var(--text-dim);display:flex;align-items:center;gap:.5rem}
.social-list{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem}
.social-list a{display:inline-flex;align-items:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1rem;border-radius:9999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:.8125rem;font-weight:600;line-height:1;color:var(--text-dim);transition:all .3s var(--ease)}
.social-list a:hover .arrow{transform:translate(2px,-2px)}
.social-list a:hover{transform:translateY(-2px);border-color:rgba(251,191,36,.4);color:var(--amber-400)}
.footer-nav{margin-top:1.25rem;display:flex;flex-direction:column;gap:.75rem}
.footer-nav a{font-size:.875rem;color:var(--text-mute);transition:color .3s var(--ease)}
.footer-nav a:hover{color:var(--amber-400)}
.footer-cta-text{margin-top:1.25rem;font-size:.875rem;line-height:1.7;color:var(--text-mute)}
.footer-cta-btn{margin-top:1.5rem;display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:9999px;border:1px solid rgba(251,191,36,.4);background:rgba(251,191,36,.1);font-size:.875rem;font-weight:600;color:#FCD34D;transition:all .3s var(--ease)}
.footer-cta-btn:hover{gap:1rem;background:var(--amber-400);color:#09090B}
.footer-bottom{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;font-size:.75rem;color:var(--text-faint);text-align:center}
@media(min-width:640px){.footer-bottom{flex-direction:row;text-align:left}}
.footer-tagline{font-family:var(--fd);font-style:italic}
.footer-updated{font-size:.75rem;color:var(--text-faint)}
.footer-legal{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.footer-legal a:hover,.footer-legal a[aria-current="page"]{color:var(--amber-400)}

.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--reveal-delay,0ms)}
html.js .reveal.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}html.js .reveal,.hero-content > *{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}.marquee-track,.pulse-dot::before,.scroll-cue{animation:none!important}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.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}
.center{text-align:center}.mx-auto{margin-inline:auto}.max-w-3xl{max-width:48rem}
.justify-center{justify-content:center}

/* Multi-Page Layout & Active Navigation Styles */
.nav-link[aria-current="page"],
.mobile-link[aria-current="page"]{color:var(--amber-400);background:rgba(251,191,36,.08)}
.footer-nav a[aria-current="page"]{color:var(--amber-400);font-weight:600}
.page-offset{padding-top:5.5rem}
.page-offset > .section:first-child{border-top:none}
@media(min-width:640px){.page-offset{padding-top:6.5rem}}

/* Reference architectures (architectures page) */
.note{display:flex;gap:.875rem;align-items:flex-start;margin-top:2.5rem;padding:1.25rem 1.5rem;border-radius:var(--r);border:1px solid rgba(251,191,36,.25);background:rgba(251,191,36,.05);font-size:.875rem;line-height:1.7;color:var(--text-dim)}
.note strong{color:#fff;font-weight:600}
.note svg{margin-top:.2rem;color:var(--amber-400)}
.arch-list{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.5rem}
.arch{padding:1.75rem;border-radius:var(--r-lg);border:1px solid var(--line);background:rgba(255,255,255,.02);transition:border-color .4s var(--ease),background-color .4s var(--ease)}
@media(min-width:640px){.arch{padding:2.5rem}}
.arch:hover{border-color:rgba(251,191,36,.3);background:rgba(255,255,255,.035)}
.arch-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:1024px){.arch-grid{grid-template-columns:5fr 7fr;gap:3rem}}
.arch-tag{display:inline-flex;padding:.25rem .75rem;border-radius:9999px;border:1px solid rgba(251,191,36,.3);background:rgba(251,191,36,.08);font-family:var(--fm);font-size:.6875rem;font-weight:600;color:var(--amber-300)}
.arch-title{margin-top:1rem}
.arch-label{font-family:var(--fd);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--amber-400)}
.arch-block{margin-top:1.75rem}
.arch-block:first-child{margin-top:0}
.arch-block > p{margin-top:.75rem;font-size:.9375rem;line-height:1.7;color:var(--text-dim)}
.arch-bullets{margin-top:.875rem;display:flex;flex-direction:column;gap:.625rem;font-size:.875rem;line-height:1.65;color:var(--text-dim)}
.arch-bullets li{position:relative;padding-left:1.25rem}
.arch-bullets li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:9999px;background:rgba(251,191,36,.6)}
.arch-flow{margin-top:.875rem;display:grid;grid-template-columns:1fr;gap:.5rem;list-style:none;counter-reset:flow}
@media(min-width:640px){.arch-flow{grid-template-columns:repeat(2,1fr)}}
.arch-flow li{counter-increment:flow;display:flex;gap:.75rem;padding:.875rem 1rem;border-radius:.75rem;border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:.8125rem;line-height:1.6;color:var(--text-dim)}
.arch-flow li::before{content:counter(flow,decimal-leading-zero);flex-shrink:0;padding-top:.1rem;font-family:var(--fm);font-size:.6875rem;font-weight:700;color:var(--amber-400)}
.metric-chips{margin-top:.875rem;display:flex;flex-wrap:wrap;gap:.5rem}
.metric-chips li{padding:.375rem .75rem;border-radius:9999px;border:1px solid var(--line-strong);font-size:.75rem;color:#E4E4E7}

/* Engagement steps + call-to-action band */
.steps{margin-top:2.5rem;display:grid;grid-template-columns:1fr;gap:1rem;list-style:none;counter-reset:step}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{counter-increment:step;padding:1.5rem;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.02)}
.step::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--fm);font-size:.6875rem;font-weight:700;color:var(--amber-400)}
.step h3{margin-top:.75rem}
.step-time{display:block;margin-top:.375rem;font-size:.75rem;color:var(--amber-300)}
.step p{margin-top:.75rem;font-size:.875rem;line-height:1.65;color:var(--text-dim)}
.cta-band{margin-top:3rem;padding:2.25rem 1.5rem;border-radius:var(--r-lg);border:1px solid rgba(251,191,36,.25);background:radial-gradient(ellipse at 50% 0%,rgba(251,191,36,.12),transparent 70%),rgba(255,255,255,.02);text-align:center}
.cta-band p{margin:.75rem auto 0;max-width:36rem;font-size:.9375rem;line-height:1.7;color:var(--text-dim)}
.cta-band .btn{margin-top:1.5rem}

/* Legal pages (privacy, terms, security) */
.legal{max-width:48rem;margin-inline:auto}
.legal-meta{margin-top:1rem;font-size:.8125rem;color:var(--text-mute)}
.toc{margin-top:2rem;padding:1.25rem 1.5rem;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.02)}
.toc ol{margin-top:.75rem;padding-left:1.25rem;display:grid;gap:.375rem;font-size:.875rem;color:var(--text-dim)}
.toc a:hover{color:var(--amber-400)}
.prose{margin-top:2.5rem;font-size:.9375rem;line-height:1.8;color:var(--text-dim)}
.prose h2{margin-top:2.75rem;font-family:var(--fd);font-size:1.25rem;font-weight:700;line-height:1.3;color:#fff}
.prose [id]{scroll-margin-top:6.5rem}
.prose h3{margin-top:1.75rem;font-family:var(--fd);font-size:1rem;font-weight:600;color:#fff}
.prose p,.prose ul,.prose ol{margin-top:1rem}
.prose ul{list-style:disc;padding-left:1.25rem}
.prose ol{padding-left:1.25rem}
.prose li+li{margin-top:.375rem}
.prose strong{color:#E4E4E7;font-weight:600}
.prose a,.form-note a{color:var(--amber-400);border-bottom:1px dotted rgba(251,191,36,.5)}
.prose a:hover,.form-note a:hover{color:var(--amber-300)}
.prose > :first-child{margin-top:0}
.about-grid > .prose{margin-top:0}
.table-wrap{margin-top:1rem;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.table-wrap table{width:100%;min-width:34rem;border-collapse:collapse;font-size:.8125rem;line-height:1.6}
.table-wrap th,.table-wrap td{padding:.75rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.table-wrap th{font-weight:600;color:#fff;background:rgba(255,255,255,.03)}
.table-wrap tr:last-child td{border-bottom:0}

/* 404 page */
.notfound{display:flex;align-items:center;min-height:70svh}
.notfound-code{font-family:var(--fd);font-size:clamp(4rem,12vw,7rem);font-weight:800;line-height:1;letter-spacing:-.04em}
.notfound-actions{margin-top:2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.notfound-links{margin-top:2.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;font-size:.875rem;color:var(--text-mute)}
.notfound-links a:hover{color:var(--amber-400)}

/* ------------------------------------------------------------------------
 * Content blocks added in the 2026-10-30 content revision
 * ---------------------------------------------------------------------- */

/* Key phrases inside running text */
.lead strong,.pillar-aside strong,.value-desc strong,.arch-block strong,.faq-item strong{color:#E4E4E7;font-weight:600}

/* Services trigger highlighted while on the Services page */
.mega-trigger.is-current{color:var(--amber-400);background:rgba(251,191,36,.08)}

/* Engineering benchmarks (home) */
.stat-unit{margin-left:.12em;font-size:.5em;font-weight:700;letter-spacing:0}
.stats-note{margin:1.25rem auto 0;max-width:42rem;text-align:center;font-size:.8125rem;line-height:1.6;color:var(--text-mute)}
@media(min-width:1024px) and (max-width:1279px){.stats-grid .stat-value{font-size:2.75rem}}

/* Short process (home) */
.steps-compact .step p{margin-top:.5rem}
.section-link{margin-top:1.75rem;display:flex;justify-content:center}

/* Services: quick-jump bar */
.jump-bar{margin-top:2.5rem;display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:640px){.jump-bar{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.jump-bar{grid-template-columns:repeat(4,1fr)}}
.jump-item{display:block;height:100%;padding:1.125rem 1.25rem;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.02);transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.jump-item:hover{border-color:rgba(251,191,36,.4);background:rgba(255,255,255,.05)}
.jump-head{display:flex;align-items:baseline;gap:.5rem;font-family:var(--fd);font-size:.9375rem;font-weight:600;line-height:1.35;color:#fff}
.jump-head .num{flex-shrink:0;font-family:var(--fm);font-size:.6875rem;color:rgba(251,191,36,.7)}
.jump-best{display:block;margin-top:.5rem;font-size:.8125rem;line-height:1.55;color:var(--text-mute)}
.jump-best strong{color:var(--amber-300);font-weight:600}

/* Services: pillar heading, deliverables and three-layer cards */
.pillar-aside h2{margin-top:1rem}
.pillar-aside .aside-label{margin-top:1.75rem;font-family:var(--fd);font-size:.75rem;font-weight:600;line-height:1.4;text-transform:uppercase;letter-spacing:.18em;color:var(--amber-400)}
.pillar-aside .metric-chips{margin-top:.75rem}
.pillar-card.layered{display:flex;flex-direction:column}
.pillar-card .card-value{margin-top:.625rem;font-size:.9375rem;line-height:1.5;font-weight:500;color:#E4E4E7}
.pillar-card .card-tech{margin-top:.5rem;margin-bottom:1rem}
.pillar-card .card-deliverable{margin-top:auto;padding-top:.875rem;border-top:1px solid var(--line);font-size:.8125rem;line-height:1.5;color:#E4E4E7}
.deliverable-tag{display:block;margin-bottom:.25rem;font-family:var(--fm);font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-400)}

/* Comparison tables */
.compare-intro{margin-top:2.5rem}
.compare-table th[scope="row"]{color:#fff;font-weight:600}
.compare-table thead .col-us{color:var(--amber-300)}
.compare-table tbody .col-us{color:#E4E4E7}
.table-note{margin-top:.75rem;font-size:.8125rem;line-height:1.6;color:var(--text-mute)}
.faq-item .table-wrap{margin:0 1.5rem 1.5rem}

/* Target value next to a metric (architectures) */
.chip-target{margin-left:.375rem;font-weight:600;color:var(--amber-300)}

/* Contact form: reassurance line above the fields */
.form-intro{margin:0;padding:.875rem 1rem;border-radius:.75rem;border:1px solid rgba(251,191,36,.25);background:rgba(251,191,36,.06);font-size:.875rem;line-height:1.55;color:var(--text-dim)}
.form-intro strong{color:#fff;font-weight:600}
/* Services page: the detailed service areas follow the quick-jump bar directly */
#expertise{padding-top:0;border-top:0}