/* ============================================================
   AIISHWAA — flat rebuild

   Flat by rule, not by taste: no box-shadows anywhere, no rounded
   card containers, no glass, no elevation. Structure comes from
   full-bleed colour bands, hairline rules, a strict grid and
   typography. Depth comes from the 3D object and from motion.

   Palette sampled from the live aiishwaa.in stylesheet:
     navy #001A40 · ink #1B2E48 · blue #3B74FF
     amber #DF9713 / #FDBA30 · ember #E85D2A
   ============================================================ */

/* ---------- 1. Tokens ---------- */
/* The brand is blue and orange, from aiishwaa.in. What changed here is the
   temperature and the count: deeper, quieter versions of the same two hues,
   one full neutral scale underneath them, and far fewer coloured surfaces —
   colour now marks things rather than filling them. */
:root{
  --navy:#0A1A31;
  --navy-deep:#061120;
  --ink:#233952;

  --blue:#2C5CE8;
  --blue-deep:#1A3CA6;
  --blue-soft:#6B8FF2;
  --blue-pale:#EDF2FE;

  --amber:#C8820F;
  --gold:#EDA92A;
  --ember:#DC5220;

  --paper:#FFFFFF;
  --paper-2:#F5F7FB;

  /* light bands */
  --fg:#0A1A31;
  --fg-2:#42546F;
  --fg-3:#77869C;
  --line:rgba(10,26,49,.11);

  /* dark bands re-point these same names */
  --on-dark:#E6ECF6;
  --on-dark-2:#94A5BF;
  --line-dark:rgba(255,255,255,.14);

  --font-display:'Gilroy','Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Rubik','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --shell:1240px;
  --gutter:clamp(20px,5vw,60px);
  --band:clamp(80px,10vw,148px);

  --ease:cubic-bezier(.22,.68,0,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  font-size:16.5px;line-height:1.72;
  color:var(--fg-2);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blue);color:#fff}

h1,h2,h3,h4{
  font-family:var(--font-display);color:var(--fg);
  font-weight:700;line-height:1.06;letter-spacing:-.028em;margin:0;
  text-wrap:balance;
}
p{margin:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Nothing in this design casts a shadow. */
*{box-shadow:none}

/* ---------- 3. Bands ---------- */
.shell{
  width:100%;max-width:var(--shell);
  margin-inline:auto;padding-inline:var(--gutter);
  position:relative;z-index:2;
}
.shell--wide{max-width:1400px}
section{position:relative}
.band{padding-block:var(--band);--band-bg:var(--paper)}
.band--tight{padding-block:clamp(52px,6vw,88px)}
.band--tint{background:var(--paper-2);--band-bg:var(--paper-2)}

/* the dark bands: this is where the "darker shades" live */
.band--dark{
  background:var(--navy);--band-bg:var(--navy);
  --fg:#FFFFFF;
  --fg-2:var(--on-dark);
  --fg-3:var(--on-dark-2);
  --line:var(--line-dark);
  color:var(--on-dark);
}
.band--deep{
  background:var(--navy-deep);--band-bg:var(--navy-deep);
  --fg:#FFFFFF;
  --fg-2:var(--on-dark);
  --fg-3:var(--on-dark-2);
  --line:var(--line-dark);
  color:var(--on-dark);
}
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark h4,
.band--deep h1,.band--deep h2,.band--deep h3,.band--deep h4{color:#fff}

.rule{height:1px;border:0;margin:0;background:var(--line)}

/* ---------- 4. Navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;
  padding-block:18px;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease-soft), border-color .35s var(--ease-soft),
             padding .35s var(--ease-soft), transform .45s var(--ease);
}
/* how far down the page you are — a hairline, nothing more */
.nav__progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--blue);transform-origin:left;
  transition:width .12s linear;
}
.nav__in{
  display:flex;align-items:center;gap:26px;
  max-width:1400px;margin-inline:auto;padding-inline:var(--gutter);
}
.nav.is-stuck{
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);background:rgba(255,255,255,.74);border-bottom-color:var(--line);padding-block:12px}
.nav.is-hidden{transform:translateY(-104%)}

.brand{display:flex;align-items:center;margin-right:auto}
.brand img{height:38px;width:auto;transition:height .35s var(--ease-soft)}
.nav.is-stuck .brand img{height:32px}
.brand__fallback{
  display:inline-block;font-family:var(--font-display);font-weight:800;
  color:var(--navy);font-size:20px;line-height:1;
}
.brand__fallback small{
  display:block;font-size:8.5px;letter-spacing:.32em;color:var(--ember);
  font-weight:700;margin-top:3px;
}

.nav__links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__link{
  position:relative;display:inline-block;padding:10px 15px;
  font-size:15px;font-weight:500;color:var(--ink);
  transition:color .25s var(--ease-soft);
}
.nav__link::after{
  content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--navy)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}

.nav__toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line);
  align-items:center;justify-content:center;background:#fff;
}
.nav__toggle span{display:block;width:18px;height:2px;background:var(--navy);position:relative;transition:.3s var(--ease)}
.nav__toggle span::before,.nav__toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--navy);transition:.3s var(--ease);
}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}
.nav.is-open .nav__toggle span{background:transparent}
.nav.is-open .nav__toggle span::before{top:0;transform:rotate(45deg)}
.nav.is-open .nav__toggle span::after{top:0;transform:rotate(-45deg)}

/* ---------- 5. Buttons — flat fills, no radius, no shadow ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;
  font-family:var(--font-display);font-size:15px;font-weight:600;
  white-space:nowrap;border:1px solid transparent;
  transition:background .25s var(--ease-soft), color .25s var(--ease-soft),
             border-color .25s var(--ease-soft), transform .3s var(--ease);
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(5px)}

.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-deep)}
/* one filled button colour on the page, not two: orange is kept for marks */
.btn--warm{background:var(--navy);color:#fff}
.btn--warm:hover{background:#000}
.btn--ghost{border-color:var(--line);color:var(--fg)}
.btn--ghost:hover{border-color:var(--fg);background:var(--fg);color:var(--paper)}
.band--dark .btn--ghost:hover,.band--deep .btn--ghost:hover{background:#fff;color:var(--navy)}
.btn--sm{padding:11px 19px;font-size:14px}

.tlink{
  display:inline-flex;align-items:center;gap:8px;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--blue);
  padding-bottom:2px;border-bottom:2px solid currentColor;
}
.tlink svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.tlink:hover svg{transform:translateX(5px)}
.band--dark .tlink,.band--deep .tlink{color:var(--gold)}

/* ---------- 6. Type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--blue)}
.eyebrow--warm{color:var(--ember)}
.eyebrow--warm::before{background:var(--ember)}
.band--dark .eyebrow,.band--deep .eyebrow{color:var(--gold)}
.band--dark .eyebrow::before,.band--deep .eyebrow::before{background:var(--gold)}

.h-display{font-size:clamp(2.6rem,6vw,4.8rem);line-height:1.02;letter-spacing:-.038em}
.h-section{font-size:clamp(2rem,3.8vw,3.1rem);letter-spacing:-.032em}
.h-sub{font-size:clamp(1.1rem,1.6vw,1.35rem);letter-spacing:-.018em;line-height:1.35}

.accent{color:var(--blue)}
.accent-warm{color:var(--ember)}
.band--dark .accent,.band--deep .accent{color:#7FA5FF}
.band--dark .accent-warm,.band--deep .accent-warm{color:var(--gold)}

.lede{font-size:clamp(1.02rem,1.3vw,1.15rem);color:var(--fg-2);line-height:1.78;max-width:62ch}
.muted{color:var(--fg-3)}

/* ---------- 7. Hero ---------- */
/* The hero holds still while its object is built. The face is sticky, the
   runway underneath it is the scroll that drives the build, and the whole
   section releases once the last tier has landed. No `overflow` here — that
   would make this the scroll container and the sticky would never stick. */
.hero{position:relative}
.hero__pin{
  position:sticky;top:0;
  min-height:100vh;
  display:flex;align-items:center;
  padding-top:clamp(120px,13vw,164px);
  padding-bottom:clamp(44px,6vw,84px);
}
.hero__runway{height:min(62vh,540px)}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(28px,4vw,60px);align-items:start;
}
.hero__title{margin:24px 0 0}
.hero .stage{margin-top:clamp(12px,2.4vw,40px)}
/* Each line rises in on its own beat. The clipping is done by the reveal's own
   clip-path, which animates away to nothing — there is no overflow window here,
   because a window is what was shearing the tail off a "y" or a "g". */
.hero__title .ln{display:block}
.hero__title .ln i{display:block;font-style:normal}
.hero__copy{margin-top:24px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* the 3D stage: flat, no frame, no shadow — it sits on the page */
.stage{
  position:relative;width:100%;
  aspect-ratio:1/.94;min-height:380px;
  background:none;border:0;
}
.stage canvas{width:100%;height:100%;display:block}
.stage__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;opacity:.55;
  -webkit-mask-image:radial-gradient(70% 66% at 50% 46%,#000,transparent);
  mask-image:radial-gradient(70% 66% at 50% 46%,#000,transparent);
}
.stage__labels{position:absolute;inset:0;pointer-events:none}
/* the labels are drawn as lightly as the object they sit on: a hairline rule,
   a name, nothing filled in */
.slab-label{
  position:absolute;top:0;left:0;display:grid;gap:1px;
  padding:6px 12px;
  background:var(--st1);color:var(--st1-ink);
  border-left:3px solid var(--st1-edge);
  white-space:nowrap;opacity:0;
  transition:opacity .35s var(--ease-soft);
  will-change:transform,opacity;
}
.slab-label b{font-family:var(--font-display);font-size:12px;font-weight:700;line-height:1.25;color:inherit;letter-spacing:-.01em}
.slab-label span{font-size:10px;color:inherit;opacity:.72;line-height:1.3;letter-spacing:.02em}
.slab-label--c2{background:var(--st2);color:var(--st2-ink);border-left-color:var(--st2-edge)}
.slab-label--c3{background:var(--st3);color:var(--st3-ink);border-left-color:var(--st3-edge)}
.slab-label--c4{background:var(--st4);color:var(--st4-ink);border-left-color:var(--st4-edge)}

.rail{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:32px 0 0;padding:0;border-left:1px solid var(--line)}
.rail__item{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-right:1px solid var(--line);
  font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--fg-3);
  transition:color .3s var(--ease-soft), background .3s var(--ease-soft);
}
.rail__item i{font-style:normal;font-size:10px;letter-spacing:.08em;opacity:.7}
/* the chip lights in the same shade as the label on the object beside it */
.rail__item.is-on{background:var(--st1);color:var(--st1-ink)}
.rail__item:nth-child(2).is-on{background:var(--st2);color:var(--st2-ink)}
.rail__item:nth-child(3).is-on{background:var(--st3);color:var(--st3-ink)}
.rail__item:nth-child(4).is-on{background:var(--st4);color:var(--st4-ink)}
.rail__item.is-done{color:var(--fg)}

/* ---------- 8. Ribbon ---------- */
.ribbon{
  padding-block:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ribbon__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ribbon:hover .ribbon__track{animation-play-state:paused}
@keyframes slide{to{transform:translate3d(-50%,0,0)}}
.ribbon__set{display:flex;align-items:center;gap:clamp(22px,3vw,46px);padding-right:clamp(22px,3vw,46px)}
.ribbon__item{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(.86rem,1.15vw,.98rem);color:var(--fg-3);white-space:nowrap;
}
.ribbon__item::before{content:"";width:4px;height:4px;background:var(--ember)}

/* ---------- 9. Layout ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.split--centre{align-items:center}
.panel{position:relative}

/* stats: a flat measured row, divided by rules */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:38px;border-top:1px solid var(--line);
}
.stat{padding:22px 22px 22px 0;border-bottom:1px solid var(--line)}
.stat + .stat{border-left:1px solid var(--line);padding-left:22px}
.stat__n{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1;
  letter-spacing:-.035em;color:var(--fg);
}
.stat__n--sm{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.2}
.stat__l{margin-top:9px;font-size:13px;color:var(--fg-3);line-height:1.5}

/* ---------- 10. Service grid — flat cells, ruled, never cards ---------- */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(24px,2.4vw,34px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:none;
  transition:background .35s var(--ease-soft);
}
.card:hover{background:var(--blue-pale)}
.band--dark .card:hover,.band--deep .card:hover{background:rgba(255,255,255,.05)}

.card__icon{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  margin-bottom:22px;background:none;border:0;
}
.card__icon svg{width:30px;height:30px;stroke:var(--blue);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card--warm .card__icon svg{stroke:var(--ember)}
.band--dark .card__icon svg,.band--deep .card__icon svg{stroke:#7FA5FF}
.band--dark .card--warm .card__icon svg,.band--deep .card--warm .card__icon svg{stroke:var(--gold)}

.card__t{font-size:1.1rem;letter-spacing:-.02em;margin-bottom:10px}
.card__d{font-size:14.4px;line-height:1.7;color:var(--fg-3)}
.card__n{
  position:absolute;top:clamp(24px,2.4vw,34px);right:clamp(24px,2.4vw,34px);
  font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--fg-3);opacity:.6;
}

/* ---------- 11. Products — one continuing abstraction, ruled rows ---------- */
/* No product photographs. The whole section is served by a single 3D object
   that sticks beside the rows and transforms as you scroll past each one. */
.showcase{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(26px,4vw,72px);
  align-items:start;
  border-top:1px solid var(--line);
}
.showcase__rows{min-width:0}

/* the sticky stage — a normal grid item, so it can never escape the layout */
.showcase__stage{
  position:sticky;top:clamp(88px,12vh,124px);
  align-self:start;min-width:0;
  padding-top:clamp(30px,4vw,58px);
}
.pstage{
  position:relative;width:100%;
  aspect-ratio:1/1;min-height:320px;max-height:min(70vh,620px);
}
.pstage canvas{width:100%;height:100%;display:block}
.pstage__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;opacity:.5;
  -webkit-mask-image:radial-gradient(68% 64% at 50% 48%,#000,transparent);
  mask-image:radial-gradient(68% 64% at 50% 48%,#000,transparent);
}
/* the caption reads out whichever product the object currently is —
   below the object, never printed on top of it */
.pstage__foot{
  margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);
  display:grid;gap:14px;
}
.pstage__meta{
  display:flex;align-items:center;gap:15px;
  padding-left:15px;border-left:3px solid var(--accent-c,var(--blue));
  transition:opacity .2s var(--ease-soft),border-color .5s var(--ease-soft);
}
.pstage__meta.is-swap{opacity:0}
.pstage__n{
  font-family:var(--font-display);font-weight:700;font-size:2rem;
  line-height:.9;letter-spacing:-.05em;color:var(--accent-c,var(--blue));opacity:.36;
}
.pstage__txt{display:grid;gap:2px;min-width:0}
.pstage__name{font-family:var(--font-display);font-weight:700;font-size:1.16rem;letter-spacing:-.03em;color:var(--fg)}
.pstage__role{
  font-family:var(--font-display);font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-c,var(--blue));
}
.pstage__hint{font-size:12.5px;color:var(--fg-3)}

/* the rows: numeral and line illustration on the left, everything else ruled */
.prod{
  position:relative;
  display:grid;grid-template-columns:minmax(0,64px) minmax(0,1fr);
  gap:clamp(14px,2vw,26px);
  padding:clamp(44px,5.4vw,80px) 0 clamp(44px,5.4vw,80px) 22px;
  border-bottom:1px solid var(--line);
  transition:opacity .55s var(--ease-soft);
}
.prod::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;
  background:var(--accent-c,var(--blue));
  transition:height .7s var(--ease);
}
.prod.is-current::before{height:100%}
.showcase__rows .prod{opacity:.62}
.showcase__rows .prod.is-current{opacity:1}
.prod__mark{display:grid;gap:16px;justify-items:start;align-content:start}
.prod__n{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.2rem,3.6vw,3rem);line-height:.9;
  letter-spacing:-.05em;color:var(--accent-c,var(--blue));opacity:.34;
}
.prod__glyph svg{
  width:34px;height:34px;fill:none;stroke:var(--accent-c,var(--blue));
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.prod__body{padding-top:4px;min-width:0}
.prod__role{
  display:flex;align-items:flex-start;gap:10px;
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-c,var(--blue));
}
.prod__role::before{content:"";width:20px;height:2px;flex:none;margin-top:.62em;background:currentColor}
.prod__t{font-size:clamp(1.55rem,2.5vw,2.2rem);letter-spacing:-.032em;margin:14px 0 14px}
.prod__d{font-size:15.5px;line-height:1.75;color:var(--fg-2);max-width:46ch}

/* capabilities read as a specification list, not as pills */
.prod__spec{margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.prod__spec li{
  list-style:none;display:flex;align-items:baseline;gap:12px;
  padding-block:11px;border-bottom:1px solid var(--line);
  font-size:14.2px;color:var(--fg-2);
}
.prod__spec li::before{
  content:"";width:6px;height:6px;flex:none;
  background:var(--accent-c,var(--blue));transform:translateY(-1px);
}
.prod__cta{margin-top:24px}

@media (max-width:1000px){
  .showcase{grid-template-columns:1fr;gap:0}
  /* the object pins to the top of the screen and keeps transforming while
     the rows scroll underneath it — the same idea, stacked */
  .showcase__stage{
    order:-1;top:0;z-index:4;padding:14px 0 12px;
    background:color-mix(in srgb, var(--band-bg,var(--paper)) 78%, transparent);
    -webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    border-bottom:1px solid var(--line);
  }
  .pstage{aspect-ratio:auto;height:min(31vh,240px);min-height:180px}
  /* the caption would only repeat the row directly beneath it */
  .pstage__foot{display:none}
  .showcase__rows .prod{opacity:1}
  .showcase__rows .prod:first-child{padding-top:34px}
}
@media (max-width:620px){
  .prod{grid-template-columns:44px minmax(0,1fr);gap:12px 16px;padding-left:16px}
  .prod__glyph svg{width:26px;height:26px}
}

/* ---------- 12. Feature list ---------- */
.feats{border-top:1px solid var(--line)}
.feat{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding-block:clamp(20px,2.2vw,28px);border-bottom:1px solid var(--line);
}
.feat__k{width:30px;height:30px;display:grid;place-items:center;flex:none;background:none;border:0}
.feat__k svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.band--dark .feat__k svg,.band--deep .feat__k svg{stroke:var(--gold)}
.feat h3{font-size:1.04rem;letter-spacing:-.02em;margin-bottom:6px}
.feat p{font-size:14.4px;color:var(--fg-3);line-height:1.7}

/* ---------- 13. CTA — a flat dark band, no container ---------- */
.cta{text-align:center;position:relative}
.cta__t{font-size:clamp(2rem,4.6vw,3.5rem);letter-spacing:-.038em;line-height:1.05}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}

.partner{
  display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap;
  padding-block:clamp(26px,3vw,42px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.partner__logo img{height:38px;width:auto}

/* ---------- 14. Footer ---------- */
.footer{
  background:var(--navy-deep);color:var(--on-dark);
  --fg:#fff; --fg-2:var(--on-dark); --fg-3:var(--on-dark-2); --line:var(--line-dark);
  padding-block:clamp(52px,6vw,84px) 26px;
}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(26px,3.5vw,48px)}
.footer h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-2);font-weight:700;margin-bottom:18px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer a{font-size:14.5px;color:var(--on-dark-2);transition:color .25s var(--ease-soft)}
.footer a:hover{color:#fff}
.footer .brand__fallback{display:block;margin-bottom:18px;color:#fff}
.footer img{filter:brightness(0) invert(1)}
.footer__mark{height:42px;width:auto;margin-bottom:20px}
.office{font-size:14px;line-height:1.62;color:var(--on-dark-2)}
.office strong{display:block;font-family:var(--font-display);color:#fff;font-size:13.5px;margin-bottom:5px;font-weight:600}
.office + .office{margin-top:20px}
.footer__base{
  margin-top:clamp(36px,4vw,58px);padding-top:24px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--on-dark-2);
}
.footer__legal{display:flex;gap:22px;flex-wrap:wrap;align-items:center}

.motion-toggle{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-size:12.5px;font-weight:600;
  color:var(--on-dark-2);padding:6px 12px;border:1px solid var(--line-dark);
  transition:color .25s, border-color .25s;
}
.motion-toggle:hover{color:#fff;border-color:#fff}
.motion-toggle b{width:26px;height:13px;background:rgba(255,255,255,.28);position:relative;flex:none;transition:background .25s}
.motion-toggle b::after{
  content:"";position:absolute;top:2px;left:2px;width:9px;height:9px;background:#fff;
  transition:transform .25s var(--ease);
}
[data-motion="on"] .motion-toggle b{background:var(--blue)}
[data-motion="on"] .motion-toggle b::after{transform:translateX(13px)}

/* ---------- 15. Contact ---------- */
.field{display:grid;gap:7px;margin-bottom:18px}
.field label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);font-weight:700;font-family:var(--font-display)}
.field input,.field textarea,.field select{
  width:100%;padding:13px 0;background:none;
  border:0;border-bottom:1px solid var(--line);
  color:var(--fg);font-family:var(--font-body);font-size:15.5px;
  transition:border-color .25s var(--ease-soft);
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--blue)}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}

.info-row{display:flex;align-items:flex-start;gap:16px;padding-block:20px;border-bottom:1px solid var(--line)}
.info-row__k{width:26px;height:26px;flex:none;display:grid;place-items:center}
.info-row__k svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.info-row h4{font-size:13.5px;color:var(--fg);margin:0 0 4px;font-weight:600;text-transform:none;letter-spacing:0}
.info-row p{font-size:14.4px;color:var(--fg-3);line-height:1.62}

.banner{position:relative;padding-top:clamp(138px,15vw,190px);padding-bottom:clamp(44px,6vw,76px)}
.crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--fg-3);margin-bottom:22px}
.crumb span{opacity:.55}

/* ---------- 16. Scroll animation — every band, every element ---------- */
[data-motion="on"] [data-reveal]{
  opacity:0;
  transition:opacity .9s var(--ease), transform 1s var(--ease), clip-path 1s var(--ease);
  will-change:transform,opacity;
}
[data-motion="on"] [data-reveal="left"]{transform:translate3d(-90px,0,0)}
[data-motion="on"] [data-reveal="right"]{transform:translate3d(90px,0,0)}
[data-motion="on"] [data-reveal="up"]{transform:translate3d(0,72px,0)}
[data-motion="on"] [data-reveal="down"]{transform:translate3d(0,-56px,0)}
[data-motion="on"] [data-reveal="scale"]{transform:scale(.9)}
[data-motion="on"] [data-reveal="deep"]{transform:perspective(1000px) translate3d(0,70px,-200px) rotateX(14deg)}
[data-motion="on"] [data-reveal="flip"]{transform:perspective(1000px) rotateY(-18deg) translate3d(60px,0,-120px)}
[data-motion="on"] [data-reveal="wipe"]{clip-path:inset(0 100% 0 0);opacity:1}
[data-motion="on"] [data-reveal="rise"]{clip-path:inset(100% 0 0 0);transform:translate3d(0,40px,0)}
[data-motion="on"] [data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
[data-motion="on"] [data-parallax]{will-change:transform}

/* ---------- 17. Responsive ---------- */
@media (max-width:1040px){
  .cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav__links{
    position:fixed;inset:0 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    padding:92px var(--gutter) 24px;background:#fff;
    border-bottom:1px solid var(--line);
    transform:translateY(-100%);transition:transform .5s var(--ease);z-index:-1;
  }
  .nav.is-open .nav__links{transform:translateY(0)}
  .nav__link{padding:15px 0;font-size:17px;font-family:var(--font-display);font-weight:600;border-bottom:1px solid var(--line)}
  .nav__link::after{left:0;right:auto;width:30px;bottom:9px}
  .nav__toggle{display:flex}
  .nav__cta{display:none}

  /* no room to pin anything on a phone: the hero is just a hero again */
  .hero__pin{position:static;min-height:0;display:block;padding-top:clamp(112px,20vw,140px)}
  .hero__runway{display:none}
  .hero__grid{grid-template-columns:1fr;gap:36px}
  .stage{aspect-ratio:1/.9;max-width:520px;margin-inline:auto}
  .split{grid-template-columns:1fr;gap:32px}
  .product,.product:nth-child(even){grid-template-columns:1fr;gap:22px}
  .product:nth-child(even) .product__visual{order:0}
  .stat + .stat{border-left:0;padding-left:0}
}
@media (max-width:620px){
  .cards--4,.cards--3{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat + .stat:nth-child(even){border-left:1px solid var(--line);padding-left:20px}
  .rail{border-left:0}
  .rail__item{border:1px solid var(--line);margin:0 -1px -1px 0}
  .slab-label span{display:none}
}

@media print{.nav,.stage,.pstage,.ribbon{display:none}body{color:#000;background:#fff}}

/* ======================================================================
   v11 additions — flat, ruled, no shadows (same rules as everything above)
   ====================================================================== */

/* sectors under About */
.sectors{list-style:none;margin:18px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.sectors li{padding:11px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--fg);display:flex;align-items:baseline;gap:7px}
.sectors li::before{content:"";width:5px;height:5px;background:var(--ember);align-self:center}
.sectors small{font-weight:400;font-size:12px;color:var(--fg-3)}

/* highlight chips on service cards */
.chips{list-style:none;margin:auto 0 0;padding:18px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:11.5px;letter-spacing:.04em;padding:5px 9px;border:1px solid var(--line);color:var(--fg-2);line-height:1.2}
.card--warm .chips li{border-color:rgba(237,169,42,.35)}
.card__d + .chips{margin-top:auto}
.card .card__d{margin-bottom:4px}

/* stage filter on Services */
.filter{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border:1px solid var(--line);width:max-content;max-width:100%}
.filter__b{appearance:none;background:none;border:0;border-right:1px solid var(--line);color:var(--fg-3);
  font:600 13.5px/1 var(--font-display);padding:13px 18px;cursor:pointer;display:flex;gap:8px;align-items:center;
  transition:background .25s var(--ease-soft),color .25s var(--ease-soft)}
.filter__b:last-child{border-right:0}
.filter__b i{font-style:normal;font-size:11px;opacity:.6}
.filter__b:hover{color:var(--fg)}
.filter__b.is-on{background:var(--blue);color:#fff}
.filter__b:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.card.is-out{display:none}
.card.is-in{animation:cardIn .5s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
[data-motion="off"] .card.is-in{animation:none}

/* "Inside the suite" — product screens */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.shot{margin:0;cursor:zoom-in}
.shot__frame{border:1px solid var(--line);background:var(--paper);overflow:hidden;
  transition:border-color .3s var(--ease-soft),transform .45s var(--ease)}
.shot:hover .shot__frame{border-color:var(--accent-c,var(--blue))}
.shot__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.shot__bar i{width:7px;height:7px;border-radius:50%;background:rgba(10,26,49,.16)}
.shot__bar i:first-child{background:var(--accent-c,var(--blue));opacity:.8}
.shot__bar span{margin-left:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot__view{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper)}
.shot__view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .8s var(--ease)}
.shot:hover .shot__view img{transform:scale(1.035)}
/* the drawn placeholder: a quiet wireframe in the product's accent */
.shot__ph{position:absolute;inset:0;display:grid;grid-template-columns:22% 1fr 1fr 1fr;grid-template-rows:auto 1fr;
  gap:10px;padding:14px}
.shot__side{grid-row:1/3;border-right:1px solid var(--line);
  background:linear-gradient(var(--accent-c,var(--blue)) 0 0) 0 0/40% 6px no-repeat,
             repeating-linear-gradient(transparent 0 18px,rgba(10,26,49,.08) 18px 24px) 0 24px/72% 100% no-repeat}
.shot__rows{grid-column:2/5;display:grid;gap:7px;align-content:start}
.shot__rows b{display:block;height:6px;background:rgba(10,26,49,.08)}
.shot__rows b:first-child{height:10px;width:46%;background:var(--accent-c,var(--blue));opacity:.75}
.shot__rows b:nth-child(2){width:88%}.shot__rows b:nth-child(3){width:72%}.shot__rows b:nth-child(4){width:80%}.shot__rows b:nth-child(5){width:40%}
.shot__tile{border:1px solid var(--line);position:relative}
.shot__tile::after{content:"";position:absolute;left:12%;right:12%;bottom:14%;height:38%;
  background:linear-gradient(to top,var(--accent-c,var(--blue)) 0 100%) 0 100%/18% 60% no-repeat,
             linear-gradient(to top,var(--accent-c,var(--blue)) 0 100%) 40% 100%/18% 100% no-repeat,
             linear-gradient(to top,var(--accent-c,var(--blue)) 0 100%) 80% 100%/18% 40% no-repeat;opacity:.28}
.shot.has-img .shot__ph{display:none}
.shot figcaption{display:flex;gap:14px;align-items:baseline;padding:16px 2px 0}
.shot__n{font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--accent-c,var(--blue))}
.shot figcaption strong{display:block;font-family:var(--font-display);font-size:1.02rem;color:var(--fg);letter-spacing:-.015em}
.shot figcaption em{display:block;font-style:normal;font-size:13px;color:var(--fg-3);margin-top:3px}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(16px,4vw,56px);
  background:rgba(6,17,32,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease-soft),visibility .3s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox figure{margin:0;max-width:min(1200px,100%);max-height:100%;display:grid;gap:12px}
.lightbox img{max-width:100%;max-height:78vh;object-fit:contain;border:1px solid rgba(255,255,255,.18);background:#fff}
.lightbox figcaption{color:#E6ECF6;font-family:var(--font-display);font-weight:600;font-size:15px;text-align:center}
.lightbox__x{position:absolute;top:18px;right:18px;width:44px;height:44px;background:none;border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:22px;line-height:1;cursor:pointer}
.lightbox__x:hover{background:#fff;color:var(--navy)}

/* the enquiry form */
.enquiry__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.field label i{font-style:normal;color:var(--ember)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377869C' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 2px center/16px no-repeat}
.field select option,.field select optgroup{color:#0A1A31;background:#fff}
.field.is-bad input,.field.is-bad textarea{border-bottom-color:var(--ember)}
.field.is-bad label{color:var(--ember)}
.enquiry__send{width:100%;justify-content:center;margin-top:6px}
.enquiry__err{margin-top:12px;font-size:13px;color:var(--gold)}
.enquiry__ok{margin-top:14px;font-size:13.5px;padding:12px 14px;border-left:2px solid var(--gold);color:var(--fg-2)}
.enquiry__fine{font-size:12.5px;margin-top:12px}
.band--dark .enquiry-panel{border:1px solid var(--line);padding:clamp(22px,3vw,40px)}

.tlink--sm{font-size:13px;margin-top:8px;display:inline-flex}
.tlink--sm svg{width:13px;height:13px}

@media (max-width:1000px){
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .shots{grid-template-columns:1fr}
  .enquiry__grid{grid-template-columns:1fr}
  .filter{width:100%}
  .filter__b{flex:1 1 50%;justify-content:center;border-bottom:1px solid var(--line)}
}

/* v11: the figures always sit two by two, so the rules line up */
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats .stat:nth-child(odd){border-left:0;padding-left:0}
.stats .stat:nth-child(even){border-left:1px solid var(--line);padding-left:22px}
.shot__view img[hidden]{display:none!important}

/* v11: let the hero column shrink on narrow phones (no sideways scroll) */
.hero__grid > *{min-width:0}
@media (max-width:420px){ .h-display{font-size:clamp(2.1rem,10vw,2.6rem)} }
.split > *{min-width:0}
.stage{max-width:100%}

/* v11: hero bokeh — a small amount of soft, out-of-focus light behind the
   hero. Kept faint and mostly off the 3D object so its outline drawing
   still reads cleanly. */
.hero__bokeh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero__pin > .shell{position:relative;z-index:1}
.hero__bokeh i{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--c) 0,var(--c) 38%,transparent 70%);
  opacity:var(--o,.16);filter:blur(var(--bl,14px));
  animation:bokehDrift var(--t,26s) ease-in-out infinite alternate;
  will-change:transform;
}
/* large, very soft washes */
.hero__bokeh .b1{--c:#2C5CE8;--o:.13;--bl:40px;width:440px;height:440px;left:-140px;top:-90px;--t:34s}
.hero__bokeh .b2{--c:#EDA92A;--o:.14;--bl:44px;width:360px;height:360px;left:30%;bottom:-150px;--t:38s;animation-delay:-8s}
.hero__bokeh .b3{--c:#6B8FF2;--o:.12;--bl:46px;width:400px;height:400px;right:-150px;top:-120px;--t:40s;animation-delay:-14s}
/* mid discs */
.hero__bokeh .b4{--c:#2C5CE8;--o:.14;--bl:10px;width:120px;height:120px;left:6%;top:62%;--t:24s;animation-delay:-4s}
.hero__bokeh .b5{--c:#DC5220;--o:.10;--bl:12px;width:90px;height:90px;left:40%;top:14%;--t:28s;animation-delay:-11s}
.hero__bokeh .b6{--c:#EDA92A;--o:.16;--bl:8px;width:70px;height:70px;left:24%;top:30%;--t:22s;animation-delay:-6s}
.hero__bokeh .b7{--c:#6B8FF2;--o:.15;--bl:9px;width:100px;height:100px;right:4%;bottom:12%;--t:30s;animation-delay:-17s}
/* small, slightly crisper points of light */
.hero__bokeh .b8{--c:#2C5CE8;--o:.18;--bl:4px;width:26px;height:26px;left:33%;top:72%;--t:20s;animation-delay:-3s}
.hero__bokeh .b9{--c:#EDA92A;--o:.22;--bl:3px;width:18px;height:18px;left:14%;top:20%;--t:18s;animation-delay:-9s}
.hero__bokeh .b10{--c:#DC5220;--o:.14;--bl:4px;width:22px;height:22px;left:47%;top:58%;--t:21s;animation-delay:-13s}

@keyframes bokehDrift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(18px,-14px,0) scale(1.06)}
  100%{transform:translate3d(-12px,10px,0) scale(.97)}
}
[data-motion="off"] .hero__bokeh i{animation:none}

@media (max-width:900px){
  .hero__bokeh .b1{width:280px;height:280px}
  .hero__bokeh .b2,.hero__bokeh .b3{width:240px;height:240px}
  .hero__bokeh .b5,.hero__bokeh .b7{display:none}
}
@media print{.hero__bokeh{display:none}}

/* v11: footer logo — the original full-colour artwork on a clean white plate.
   The old white-out filter turned the orange "A" mark into a solid block. */
.footer img{filter:none}
.footer__mark{
  display:block;height:auto;width:min(210px,100%);
  background:#fff;padding:12px 16px;margin-bottom:22px;
  box-sizing:border-box;
}
.footer .partner__logo img,.footer img:not(.footer__mark){filter:none}

/* ======================================================================
   v11: software backdrop for the hero — a code editor and a terminal sit
   behind the 3D object (which hides what it stands in front of), and the
   blueprint line grid becomes a soft dot grid.
   ====================================================================== */
.stage canvas{position:relative;z-index:1}
.stage__labels{z-index:2}

.hero .stage__grid{
  background-image:radial-gradient(rgba(44,92,232,.28) 1.1px,transparent 1.4px);
  background-size:22px 22px;opacity:.7;
}
/* a soft dot field across the whole hero, fading out under the headline */
.hero__pin::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(10,26,49,.10) 1px,transparent 1.3px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(100deg,transparent 0 30%,#000 62%,transparent 100%);
  mask-image:linear-gradient(100deg,transparent 0 30%,#000 62%,transparent 100%);
}

.stage__code{position:absolute;inset:0;z-index:0;pointer-events:none}
.ed,.term{
  position:absolute;
  font-family:ui-monospace,"JetBrains Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace;
  border:1px solid rgba(44,92,232,.16);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:10px;overflow:hidden;
}
.ed{left:-2%;top:2%;width:74%;opacity:.78;animation:edFloat 14s ease-in-out infinite alternate}
.term{right:-3%;bottom:4%;width:66%;opacity:.92;background:rgba(10,26,49,.9);border-color:rgba(10,26,49,.9);
  animation:edFloat 17s ease-in-out infinite alternate-reverse}
.ed__bar{display:flex;align-items:center;gap:5px;padding:7px 10px;border-bottom:1px solid rgba(44,92,232,.12)}
.ed__bar i{width:7px;height:7px;border-radius:50%;background:#FF6B5A}
.ed__bar i:nth-child(2){background:#F5BE3D}
.ed__bar i:nth-child(3){background:#3CC27A}
.ed__bar span{margin-left:8px;font-size:10.5px;color:#77869C;letter-spacing:.02em}
.term .ed__bar{border-bottom-color:rgba(255,255,255,.08)}
.term .ed__bar span{color:#94A5BF}
.ed pre,.term pre{margin:0;padding:12px 14px;font:inherit;font-size:11px;line-height:1.75;white-space:pre;overflow:hidden}
.ed pre{color:#42546F}
.ed .kw{color:#2C5CE8;font-weight:600}
.ed .st{color:#C8820F}
.ed .fn{color:#7A3FD1}
.ed .nu{color:#DC5220}
.ed .cm{color:#9AA7B9;font-style:italic}
.term pre{color:#CFD9EA;min-height:9.6em}
.term .pr{color:#EDA92A}
.term .ok{color:#3CC27A}
.term .hi{color:#7FA5FF}
.term__caret{display:inline-block;width:7px;height:1.1em;vertical-align:-2px;background:#7FA5FF;margin-left:2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@keyframes edFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-10px,0)}}
[data-motion="off"] .ed,[data-motion="off"] .term,[data-motion="off"] .term__caret{animation:none}

@media (max-width:1100px){ .ed pre,.term pre{font-size:10px} }
@media (max-width:900px){
  .ed{width:82%;opacity:.6}
  .term{width:70%}
}
@media (max-width:520px){
  .ed pre{font-size:9px}
  .term pre{font-size:9px;padding:9px 10px}
  .hero__pin::before{display:none}
}

/* v11: slide-in reveals start off to the side; never let that widen the page */
html,body{overflow-x:clip}

/* v11: footer logo — transparent on the dark ground, wordmark in white,
   brand orange kept (see #logo-on-dark in the footer markup) */
.footer__mark{
  background:none;padding:0;width:min(220px,100%);
  filter:url(#logo-on-dark)!important;
}

/* ======================================================================
   v11: software look for the Products and "Why" 3D scenes
   ====================================================================== */
.pstage canvas{position:relative;z-index:1}
.pstage__grid,.band--deep .stage::before{
  background-image:radial-gradient(rgba(44,92,232,.30) 1.1px,transparent 1.4px)!important;
  background-size:22px 22px!important;opacity:.75;
}

/* product screens */
.pui-wrap{position:absolute;inset:0;z-index:0;pointer-events:none}
.pui{
  position:absolute;left:0;top:4%;width:70%;
  font-family:var(--font-body);font-size:11.5px;color:#42546F;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(44,92,232,.16);border-radius:10px;overflow:hidden;
  border-top:3px solid var(--pc,var(--blue));
  opacity:0;transform:translate3d(-14px,10px,0) scale(.98);
  transition:opacity .55s var(--ease-soft),transform .7s var(--ease);
}
.pui.is-on{opacity:.95;transform:none}
[data-motion="off"] .pui{transition:none}
.pui__body{padding:12px 14px 14px;display:grid;gap:8px}

/* E-Sulekh form */
.pf{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid rgba(10,26,49,.08);border-radius:6px;background:#fff}
.pf b{font-weight:500;color:#0A1A31}
.pf span{color:#77869C;white-space:nowrap}
.pf em{font-style:normal;color:#1E9E5A;font-weight:700;margin-left:4px}
.pf--row{justify-content:flex-start;border:0;background:none;padding:2px 0}
.pf--row s{display:block;height:6px;flex:1;background:rgba(10,26,49,.08);border-radius:3px;text-decoration:none}
.pbtn{justify-self:end;background:var(--pc);color:#fff;font-weight:600;padding:7px 12px;border-radius:6px;font-size:11px}

/* Samridhi chat */
.msg{padding:8px 11px;border-radius:10px;line-height:1.55;max-width:88%}
.msg--me{justify-self:end;background:var(--pc);color:#fff;border-bottom-right-radius:3px}
.msg--ai{background:#F1F4FB;color:#233952;border-bottom-left-radius:3px}
.msg--ai b{display:block;color:var(--pc);font-size:10.5px;letter-spacing:.06em;margin-bottom:3px}
.pin{display:flex;justify-content:space-between;padding:7px 10px;border:1px solid rgba(10,26,49,.1);border-radius:8px;color:#9AA7B9}
.pin i{font-style:normal;color:var(--pc);font-weight:700}

/* Mode Metrix dashboard */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.kpis div{padding:8px;border:1px solid rgba(10,26,49,.08);border-radius:6px;background:#fff}
.kpis b{display:block;color:#0A1A31;font-weight:600;font-size:11px}
.kpis span{font-size:10px;color:#9AA7B9}
.kpis div:first-child{border-top:2px solid var(--pc)}
.bars{display:flex;align-items:flex-end;gap:6px;height:76px;padding:6px 4px 0;border-bottom:1px solid rgba(10,26,49,.12)}
.bars i{flex:1;height:var(--h);background:var(--pc);opacity:.75;border-radius:3px 3px 0 0;transform-origin:bottom;transition:transform .8s var(--ease)}
.pui:not(.is-on) .bars i{transform:scaleY(.2)}

/* Pariksha Setu evaluation table */
.tr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:6px 4px;border-bottom:1px solid rgba(10,26,49,.07)}
.tr--h{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9AA7B9}
.tr span:first-child{color:#0A1A31;font-weight:500}
.tr .ok{color:#1E9E5A;font-weight:600}
.tr .wip{color:var(--pc);font-weight:600}
.prog{height:5px;background:rgba(10,26,49,.08);border-radius:3px;overflow:hidden;margin-top:4px}
.prog i{display:block;height:100%;width:72%;background:var(--pc);border-radius:3px}

/* "Why" server console (dark band) */
.stage--why canvas{position:relative;z-index:1}
.con{
  position:absolute;left:0;top:6%;width:62%;
  font-family:ui-monospace,"JetBrains Mono","Cascadia Code",Consolas,Menlo,monospace;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;
  animation:edFloat 16s ease-in-out infinite alternate;
}
.con .ed__bar{border-bottom-color:rgba(255,255,255,.08)}
.con .ed__bar span{color:#94A5BF}
.con pre{margin:0;padding:12px 14px;font:inherit;font-size:11px;line-height:1.8;color:#CFD9EA;white-space:pre;overflow:hidden}
.con .ok{color:#3CC27A;animation:pulse 2.4s ease-in-out infinite}
.con .dim{color:#94A5BF}
.con .hi{color:#EDA92A}
.con .lk{font-size:10px}
@keyframes pulse{50%{opacity:.35}}
[data-motion="off"] .con,[data-motion="off"] .con .ok{animation:none}

@media (max-width:1000px){
  .pui{width:78%;font-size:10.5px}
  .con pre{font-size:10px}
}
@media (max-width:620px){
  .pui{width:84%;top:2%;font-size:9.5px}
  .pui__body{padding:8px 10px;gap:5px}
  .bars{height:44px}
  .con{width:80%}
  .con pre{font-size:9px;line-height:1.6}
}

/* v11: the console sits under the rack drawing, overlapping its corner */
.why-viz{position:relative;margin-top:34px}
.why-viz .stage--why{margin-top:0!important}
.why-con{position:relative;z-index:2;margin:-46px 0 0 auto;width:min(78%,360px)}
.why-con .con{position:relative;left:auto;top:auto;width:100%;
  background:rgba(10,26,49,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:620px){ .why-con{width:92%;margin-top:-24px} }
.con .lk{font-size:inherit;color:#EDA92A}

/* ======================================================================
   v11: hero background — a soft blue wash with warm and cool glows and
   flowing data lines. The base colour is set as background-color so the
   3D object (which fills its faces with the colour behind it) blends in.
   ====================================================================== */
.hero{
  background-color:#F3F6FE;
  background-image:
    radial-gradient(55% 65% at 88% 8%, rgba(44,92,232,.16), transparent 62%),
    radial-gradient(45% 55% at 2% 96%, rgba(237,169,42,.13), transparent 60%),
    radial-gradient(38% 42% at 52% 48%, rgba(255,255,255,.75), transparent 72%),
    linear-gradient(180deg,#F7F9FF 0%,#EEF3FE 100%);
}
.hero__waves{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(140px,22vh,240px);
  z-index:0;pointer-events:none;
}
.hero__waves path{fill:none;stroke-linecap:round}
.hero__waves .w1{stroke:rgba(44,92,232,.22);stroke-width:1.4}
.hero__waves .w2{stroke:rgba(107,143,242,.18);stroke-width:1.1}
.hero__waves .w3{stroke:rgba(237,169,42,.24);stroke-width:1.2}
.hero__waves .w4{stroke:rgba(44,92,232,.12);stroke-width:1}
/* small pulses of "data" travelling along two of the lines */
.hero__waves .w1,.hero__waves .w3{stroke-dasharray:60 1400;animation:waveFlow 9s linear infinite}
.hero__waves .w3{animation-duration:12s;animation-delay:-4s}
@keyframes waveFlow{from{stroke-dashoffset:1460}to{stroke-dashoffset:0}}
/* the faint full lines under the pulses */
.hero__waves .w2,.hero__waves .w4{stroke-dasharray:none}
[data-motion="off"] .hero__waves path{animation:none;stroke-dasharray:none}

/* the dot field now sits on the tinted ground */
.hero__pin::before{background-image:radial-gradient(rgba(44,92,232,.13) 1px,transparent 1.3px)}

@media (max-width:620px){ .hero__waves{height:120px} }

/* v11: ghost buttons on dark grounds — hover fills white, so the text must
   turn navy (it was white on white). Also beats `.footer a:hover`. */
.footer .btn--ghost:hover,.footer .btn--ghost:focus-visible,
.band--dark .btn--ghost:hover,.band--dark .btn--ghost:focus-visible,
.band--deep .btn--ghost:hover,.band--deep .btn--ghost:focus-visible{
  background:#fff;border-color:#fff;color:var(--navy);
}
.footer .btn--ghost{color:#fff;border-color:rgba(255,255,255,.28)}

/* ======================================================================
   v11: hero background, stronger — a clearly visible blue gradient with
   brand glows and a faint circuit-trace pattern on the right.
   ====================================================================== */
.hero{
  background-color:#E9EFFD;
  background-image:
    radial-gradient(48% 60% at 92% 12%, rgba(44,92,232,.38), transparent 64%),
    radial-gradient(40% 50% at 28% 0%, rgba(107,143,242,.30), transparent 62%),
    radial-gradient(42% 55% at 0% 100%, rgba(237,169,42,.32), transparent 62%),
    radial-gradient(36% 46% at 62% 100%, rgba(220,82,32,.14), transparent 64%),
    linear-gradient(135deg,#F5F8FF 0%,#E6EDFD 55%,#DCE6FC 100%);
}
/* circuit traces: thin lines with nodes, the visual language of software */
.hero__pin::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%232C5CE8' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 40h60l20 20h60M140 60v50l20 20h80M30 240v-70l30-30h40M100 140h40l20-20M200 0v40l-20 20M240 190h-50l-20 20v30M0 120h30l20 20'/%3E%3Cg fill='%232C5CE8'%3E%3Ccircle cx='140' cy='60' r='3'/%3E%3Ccircle cx='100' cy='140' r='3'/%3E%3Ccircle cx='160' cy='120' r='3'/%3E%3Ccircle cx='180' cy='60' r='3'/%3E%3Ccircle cx='190' cy='190' r='3'/%3E%3Ccircle cx='50' cy='140' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size:240px 240px;opacity:.16;
  -webkit-mask-image:linear-gradient(100deg,transparent 0 38%,#000 70%);
  mask-image:linear-gradient(100deg,transparent 0 38%,#000 70%);
}
.hero__waves .w1{stroke:rgba(44,92,232,.34)}
.hero__waves .w2{stroke:rgba(107,143,242,.28)}
.hero__waves .w3{stroke:rgba(237,169,42,.38)}
.hero__waves .w4{stroke:rgba(44,92,232,.2)}
/* the ghost button needs a light fill to sit on the coloured ground */
.hero .btn--ghost{background:rgba(255,255,255,.55);border-color:rgba(10,26,49,.16)}
.hero .btn--ghost:hover{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:620px){ .hero__pin::after{opacity:.1} }

/* ======================================================================
   v11: hero on solid brand blue (#2C5CE8) — replaces the gradient,
   circuit pattern and flowing lines. Text and controls switch to light.
   ====================================================================== */
.hero{
  background:#2C5CE8;background-image:none;
  --fg:#FFFFFF; --fg-2:rgba(255,255,255,.88); --fg-3:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.26);
  color:var(--fg-2);
}
.hero__pin::before,.hero__pin::after{content:none}
.hero .stage__grid{display:none}
.hero h1,.hero .h-display{color:#fff}
.hero .accent{color:#FDBA30}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:#FDBA30}
.hero .lede{color:rgba(255,255,255,.9)}

/* buttons: white primary, outline secondary */
.hero .btn--primary{background:#fff;color:var(--blue-deep);border-color:#fff}
.hero .btn--primary:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.hero .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn--ghost:hover{background:#fff;color:var(--blue-deep);border-color:#fff}

/* stage rail chips */
.hero .rail__item{color:rgba(255,255,255,.8)}
.hero .rail__item.is-done{color:#fff}

/* bokeh: soft white and warm lights read on blue */
.hero__bokeh .b1,.hero__bokeh .b3,.hero__bokeh .b4,.hero__bokeh .b7,.hero__bokeh .b8{--c:#FFFFFF}
.hero__bokeh .b1{--o:.14}.hero__bokeh .b3{--o:.12}
.hero__bokeh .b4,.hero__bokeh .b7{--o:.14}.hero__bokeh .b8{--o:.25}
.hero__bokeh .b2{--c:#FDBA30;--o:.20}
.hero__bokeh .b6,.hero__bokeh .b9{--c:#FDBA30;--o:.30}
.hero__bokeh .b5,.hero__bokeh .b10{--c:#FF8A5B;--o:.20}

/* the top menu bar while it floats over the blue hero (home page only);
   once it sticks it turns to frosted white and dark text as before */
.home .nav:not(.is-stuck):not(.is-open) .nav__link{color:rgba(255,255,255,.9)}
.home .nav:not(.is-stuck):not(.is-open) .nav__link:hover{color:#fff}
.home .nav:not(.is-stuck):not(.is-open) .nav__link::after{background:#FDBA30}
.home .nav:not(.is-stuck):not(.is-open) .brand img{filter:url(#logo-on-dark)}
.home .nav:not(.is-stuck):not(.is-open) .nav__cta{background:#fff;color:var(--blue-deep)}
.home .nav:not(.is-stuck):not(.is-open) .nav__cta:hover{background:var(--navy);color:#fff}
.home .nav:not(.is-stuck):not(.is-open) .nav__toggle span,
.home .nav:not(.is-stuck):not(.is-open) .nav__toggle span::before,
.home .nav:not(.is-stuck):not(.is-open) .nav__toggle span::after{background:#fff}
.home .nav:not(.is-stuck):not(.is-open) .nav__toggle{border-color:rgba(255,255,255,.5)}
.hero .rail__item.is-on{color:var(--st1-ink)}
.hero .rail__item:nth-child(2).is-on{color:var(--st2-ink)}
.hero .rail__item:nth-child(3).is-on{color:var(--st3-ink)}
.hero .rail__item:nth-child(4).is-on{color:var(--st4-ink)}

/* ======================================================================
   v11: hero — rich gradient instead of flat blue.
   Midnight navy → royal blue → violet, with cyan, violet, coral and amber
   glows drifting slowly (aurora), and a fine film-grain texture on top.
   background-color is the tone the 3D object fills its faces with.
   ====================================================================== */
.hero{
  background-color:#1F3196;
  background-image:
    radial-gradient(55% 60% at 100% 0%, rgba(139,92,246,.55), transparent 62%),
    radial-gradient(45% 55% at 0% 0%, rgba(14,165,233,.30), transparent 60%),
    radial-gradient(50% 55% at 100% 100%, rgba(255,112,67,.32), transparent 62%),
    radial-gradient(45% 50% at 0% 100%, rgba(253,186,48,.22), transparent 60%),
    linear-gradient(125deg,#08133A 0%,#10297A 34%,#2243C4 62%,#4B2DB0 100%);
}
/* aurora: soft colour clouds that drift */
.hero__bokeh::before{
  content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(22% 26% at 28% 32%, rgba(56,189,248,.40), transparent 70%),
    radial-gradient(24% 28% at 72% 26%, rgba(168,85,247,.45), transparent 70%),
    radial-gradient(22% 26% at 62% 76%, rgba(255,122,69,.34), transparent 70%),
    radial-gradient(20% 24% at 20% 78%, rgba(253,186,48,.30), transparent 70%);
  filter:blur(40px);
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%  {transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50% {transform:translate3d(3%,-2%,0) rotate(6deg) scale(1.06)}
  100%{transform:translate3d(-3%,2%,0) rotate(-5deg) scale(1.02)}
}
/* film grain + a faint diagonal sheen */
.hero__bokeh::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(115deg,transparent 0 38%,rgba(255,255,255,.07) 46%,transparent 54%);
  background-size:180px 180px,100% 100%;
  mix-blend-mode:overlay;opacity:.55;
}
.hero__bokeh i{z-index:1}
[data-motion="off"] .hero__bokeh::before{animation:none}

/* text and chips on the deeper ground */
.hero .accent{color:#FFC54D}
.hero .lede{color:rgba(232,238,255,.9)}
.hero .btn--primary{color:#1F3196}
.hero .btn--ghost{background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero .btn--ghost:hover{color:#1F3196}

/* soften the bottom edge into the page */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,197,77,.6),rgba(168,85,247,.6),transparent);
}

@media (max-width:620px){
  .hero__bokeh::before{filter:blur(28px)}
  .hero__bokeh::after{opacity:.4}
}

/* ======================================================================
   v11: hero style previews — index.html?bg=A … F
   (the plain index.html keeps the current hero until one is chosen)
   ====================================================================== */
html[data-hero] .hero__bokeh::before,
html[data-hero] .hero__bokeh::after,
html[data-hero] .hero::after{content:none}

/* ---- light styles: A, D, F ---- */
html[data-hero="A"] .hero,html[data-hero="D"] .hero,html[data-hero="F"] .hero{
  --fg:#0A1A31;--fg-2:#42546F;--fg-3:#77869C;--line:rgba(10,26,49,.11);color:#42546F;
}
html[data-hero="A"] .hero h1,html[data-hero="D"] .hero h1,html[data-hero="F"] .hero h1{color:#0A1A31}
html[data-hero="A"] .hero .lede,html[data-hero="D"] .hero .lede,html[data-hero="F"] .hero .lede{color:#42546F}
html[data-hero="A"] .hero .eyebrow,html[data-hero="F"] .hero .eyebrow{color:var(--blue)}
html[data-hero="A"] .hero .eyebrow::before,html[data-hero="F"] .hero .eyebrow::before{background:var(--blue)}
html[data-hero="A"] .hero .accent,html[data-hero="F"] .hero .accent{color:var(--blue)}
html[data-hero="A"] .hero .btn--primary,html[data-hero="D"] .hero .btn--primary{background:var(--blue);color:#fff;border-color:var(--blue)}
html[data-hero="F"] .hero .btn--primary{background:var(--navy);color:#fff;border-color:var(--navy)}
html[data-hero="A"] .hero .btn--primary:hover,html[data-hero="D"] .hero .btn--primary:hover,html[data-hero="F"] .hero .btn--primary:hover{background:#000;border-color:#000;color:#fff}
html[data-hero="A"] .hero .btn--ghost,html[data-hero="D"] .hero .btn--ghost,html[data-hero="F"] .hero .btn--ghost{background:rgba(255,255,255,.6);color:#0A1A31;border-color:rgba(10,26,49,.16)}
html[data-hero="A"] .hero .btn--ghost:hover,html[data-hero="D"] .hero .btn--ghost:hover,html[data-hero="F"] .hero .btn--ghost:hover{background:#0A1A31;color:#fff;border-color:#0A1A31}
html[data-hero="A"] .hero .rail__item:not(.is-on),html[data-hero="D"] .hero .rail__item:not(.is-on),html[data-hero="F"] .hero .rail__item:not(.is-on){color:#77869C}
/* light bokeh: blue and amber, faint */
html[data-hero="A"] .hero__bokeh i,html[data-hero="D"] .hero__bokeh i,html[data-hero="F"] .hero__bokeh i{--c:#2C5CE8;opacity:.10}
html[data-hero="A"] .hero__bokeh .b2,html[data-hero="A"] .hero__bokeh .b6,html[data-hero="A"] .hero__bokeh .b9,
html[data-hero="D"] .hero__bokeh .b2,html[data-hero="D"] .hero__bokeh .b6,html[data-hero="D"] .hero__bokeh .b9{--c:#EDA92A;opacity:.14}
/* menu bar over a light hero: the normal dark menu */
html[data-hero="A"] .home .nav .nav__link,html[data-hero="D"] .home .nav .nav__link,html[data-hero="F"] .home .nav .nav__link{color:var(--ink)!important}
html[data-hero="A"] .home .nav .brand img,html[data-hero="D"] .home .nav .brand img,html[data-hero="F"] .home .nav .brand img{filter:none!important}
html[data-hero="A"] .home .nav .nav__cta,html[data-hero="D"] .home .nav .nav__cta{background:var(--blue)!important;color:#fff!important}
html[data-hero="F"] .home .nav .nav__cta{background:var(--navy)!important;color:#fff!important}
html[data-hero="A"] .home .nav:not(.is-open) .nav__toggle span,html[data-hero="A"] .home .nav:not(.is-open) .nav__toggle span::before,html[data-hero="A"] .home .nav:not(.is-open) .nav__toggle span::after,
html[data-hero="D"] .home .nav:not(.is-open) .nav__toggle span,html[data-hero="D"] .home .nav:not(.is-open) .nav__toggle span::before,html[data-hero="D"] .home .nav:not(.is-open) .nav__toggle span::after,
html[data-hero="F"] .home .nav:not(.is-open) .nav__toggle span,html[data-hero="F"] .home .nav:not(.is-open) .nav__toggle span::before,html[data-hero="F"] .home .nav:not(.is-open) .nav__toggle span::after{background:var(--navy)!important}
html[data-hero="A"] .home .nav:not(.is-open) .nav__toggle span,html[data-hero="D"] .home .nav:not(.is-open) .nav__toggle span,html[data-hero="F"] .home .nav:not(.is-open) .nav__toggle span{background:var(--navy)!important}

/* A — clean white + soft blue glow */
html[data-hero="A"] .hero{background-color:#FFFFFF;background-image:
  radial-gradient(42% 60% at 90% 18%,rgba(44,92,232,.16),transparent 65%),
  radial-gradient(35% 50% at 0% 100%,rgba(253,186,48,.14),transparent 65%)}

/* D — soft pastel: lavender to peach */
html[data-hero="D"] .hero{background-color:#EEF0FF;background-image:
  radial-gradient(40% 55% at 88% 15%,rgba(129,140,248,.30),transparent 65%),
  linear-gradient(120deg,#F1F3FF 0%,#E9ECFF 40%,#FDEDE2 100%)}
html[data-hero="D"] .hero .eyebrow,html[data-hero="D"] .hero .accent{color:#4F46E5}
html[data-hero="D"] .hero .eyebrow::before{background:#4F46E5}
html[data-hero="D"] .hero .btn--primary{background:#4F46E5;border-color:#4F46E5}
html[data-hero="D"] .home .nav .nav__cta{background:#4F46E5!important}

/* F — light, with one bold blue panel holding the 3D */
html[data-hero="F"] .hero{background:#F5F7FB}
html[data-hero="F"] .hero .stage{background:linear-gradient(140deg,#2C5CE8,#1A3CA6);background-color:#2449D4;border-radius:28px}

/* ---- dark styles: B, C, E (white text stays) ---- */
/* B — deep navy, calm premium */
html[data-hero="B"] .hero{background-color:#0A1A31;background-image:
  radial-gradient(45% 60% at 86% 18%,rgba(44,92,232,.42),transparent 65%),
  radial-gradient(35% 45% at 8% 100%,rgba(44,92,232,.16),transparent 65%)}
html[data-hero="B"] .hero__pin::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:1;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(100deg,transparent 38%,#000 75%);mask-image:linear-gradient(100deg,transparent 38%,#000 75%)}
html[data-hero="B"] .hero .accent{color:#7FA5FF}
html[data-hero="B"] .hero .eyebrow::before{background:#7FA5FF}
html[data-hero="B"] .hero .btn--primary{background:var(--blue);color:#fff;border-color:var(--blue)}

/* C — navy to teal */
html[data-hero="C"] .hero{background-color:#0B3550;background-image:
  radial-gradient(42% 55% at 80% 28%,rgba(45,212,191,.26),transparent 65%),
  linear-gradient(120deg,#071A33 0%,#0B3550 50%,#0E5E6E 100%)}
html[data-hero="C"] .hero .accent{color:#5EEAD4}
html[data-hero="C"] .hero .eyebrow::before{background:#5EEAD4}
html[data-hero="C"] .hero .btn--primary{background:#14B8A6;color:#04222A;border-color:#14B8A6}

/* E — navy + brand orange glow */
html[data-hero="E"] .hero{background-color:#0B1630;background-image:
  radial-gradient(42% 55% at 88% 14%,rgba(232,93,42,.38),transparent 65%),
  radial-gradient(40% 50% at 70% 100%,rgba(253,186,48,.20),transparent 65%),
  radial-gradient(38% 48% at 0% 0%,rgba(44,92,232,.28),transparent 65%)}
html[data-hero="E"] .hero .accent{color:#FDBA30}
html[data-hero="E"] .hero .btn--primary{background:#E85D2A;color:#fff;border-color:#E85D2A}
html[data-hero="E"] .hero .btn--primary:hover{background:#fff;color:#0B1630}

/* ======================================================================
   v11 FINAL hero: Style E — navy with the favicon's orange.
   Favicon shades: #E5893B (amber-orange) → #E2702D → #D13E2A (red-orange)
   ====================================================================== */
:root{--fav-1:#E5893B;--fav-2:#E2702D;--fav-3:#D13E2A}
html[data-hero="E"] .hero{
  background-color:#0B1630;
  background-image:
    radial-gradient(44% 58% at 90% 12%, rgba(226,112,45,.42), transparent 65%),
    radial-gradient(34% 46% at 72% 100%, rgba(229,137,59,.24), transparent 65%),
    radial-gradient(30% 40% at 100% 70%, rgba(209,62,42,.22), transparent 65%),
    radial-gradient(38% 48% at 0% 0%, rgba(44,92,232,.22), transparent 65%),
    linear-gradient(160deg,#0D1A3A 0%,#0B1630 55%,#0A1328 100%);
}
/* headline accent in the favicon gradient */
html[data-hero="E"] .hero .accent{
  color:var(--fav-2);
  background:linear-gradient(135deg,#F3A55A 0%,var(--fav-1) 30%,var(--fav-2) 60%,var(--fav-3) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* the eyebrow carries the favicon mark itself */
.hero__eyebrow{gap:12px}
.hero .hero__eyebrow::before{content:none}
.hero__fav{width:22px;height:22px;display:block;flex:none;border-radius:5px}
html[data-hero="E"] .hero__fav{box-shadow:0 0 0 4px rgba(226,112,45,.16),0 0 22px rgba(226,112,45,.55)}
html[data-hero="E"] .hero .eyebrow{color:#F6C79B}
/* buttons */
html[data-hero="E"] .hero .btn--primary{
  background:linear-gradient(135deg,var(--fav-1),var(--fav-2) 55%,var(--fav-3));
  color:#fff;border-color:transparent;
}
html[data-hero="E"] .hero .btn--primary:hover{background:#fff;color:#0B1630;border-color:#fff}
html[data-hero="E"] .hero .btn--ghost:hover{background:#fff;color:#0B1630;border-color:#fff}
/* menu bar over the hero: favicon-orange Get A Quote */
html[data-hero="E"] .home .nav:not(.is-stuck):not(.is-open) .nav__cta{
  background:linear-gradient(135deg,var(--fav-1),var(--fav-3));color:#fff;
}
html[data-hero="E"] .home .nav:not(.is-stuck):not(.is-open) .nav__link::after{background:var(--fav-1)}
/* bokeh in favicon tones */
html[data-hero="E"] .hero__bokeh .b2,html[data-hero="E"] .hero__bokeh .b6,html[data-hero="E"] .hero__bokeh .b9{--c:#E5893B}
html[data-hero="E"] .hero__bokeh .b5,html[data-hero="E"] .hero__bokeh .b10{--c:#D13E2A}
/* thin favicon-gradient line where the hero meets the next section */
html[data-hero="E"] .hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--fav-1),var(--fav-3),transparent);
}

/* v11: phone menu button over a dark hero — no white fill, white lines */
html:not([data-hero="A"]):not([data-hero="D"]):not([data-hero="F"]) .home .nav:not(.is-stuck):not(.is-open) .nav__toggle{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);
}

/* v11: footer logo identical to the header logo — same artwork, same
   white-wordmark treatment, same size (38px tall, as in the header) */
.footer__mark{height:38px!important;width:auto!important;max-width:100%;margin-bottom:22px}

/* ======================================================================
   v11: phone menu is a side drawer — slides in from the right over a
   dimmed backdrop; the menu button turns into the close (X) button.
   ====================================================================== */
.nav__drawer-extra{display:none}
body.is-locked{overflow:hidden}

@media (max-width:900px){
  .nav__in{position:relative;z-index:1}
  .brand,.nav__toggle{position:relative;z-index:3}
  .nav.is-open .brand{visibility:hidden}

  .nav__links{
    position:fixed;top:0;right:0;left:auto;bottom:auto;inset:0 0 auto auto;
    width:min(84vw,340px);height:100vh;height:100dvh;
    padding:92px 28px 28px;background:#fff;
    border-left:1px solid var(--line);border-bottom:0;
    display:flex;flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;
    transform:translateX(100%);visibility:hidden;
    transition:transform .45s var(--ease),visibility 0s linear .45s;
    z-index:2;
  }
  .nav.is-open .nav__links{transform:translateX(0);visibility:visible;transition:transform .45s var(--ease),visibility 0s}
  .nav__links li{opacity:0;transform:translateX(18px);transition:opacity .35s var(--ease-soft),transform .45s var(--ease)}
  .nav.is-open .nav__links li{opacity:1;transform:none}
  .nav.is-open .nav__links li:nth-child(2){transition-delay:.04s}
  .nav.is-open .nav__links li:nth-child(3){transition-delay:.08s}
  .nav.is-open .nav__links li:nth-child(4){transition-delay:.12s}
  .nav.is-open .nav__links li:nth-child(5){transition-delay:.16s}
  .nav.is-open .nav__links li:nth-child(6){transition-delay:.2s}

  .nav .nav__links .nav__link{display:block;color:var(--navy)!important;padding:16px 0;font-size:18px;
    font-family:var(--font-display);font-weight:600;border-bottom:1px solid rgba(10,26,49,.08)}
  .nav__link::after{display:none}
  .nav__link[aria-current="page"]{color:var(--fav-2,#E2702D)!important}

  .nav__drawer-extra{display:grid;gap:14px;margin-top:auto;padding-top:28px}
  .nav__drawer-cta{justify-content:center;width:100%;
    background:linear-gradient(135deg,#E5893B,#E2702D 55%,#D13E2A);color:#fff;border-color:transparent}
  .nav__drawer-mail{font-size:14px;color:#77869C;text-align:center}

  /* backdrop */
  .nav::after{
    content:"";position:fixed;left:0;top:0;width:100vw;height:100vh;height:100dvh;
    background:rgba(6,17,32,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;transition:opacity .35s var(--ease-soft),visibility 0s linear .35s;z-index:0;
  }
  .nav.is-open::after{opacity:1;visibility:visible;transition:opacity .35s var(--ease-soft),visibility 0s}
  /* the bar itself goes clear while the drawer is open */
  .nav.is-open{background:transparent!important;border-bottom-color:transparent!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .nav.is-open .nav__toggle{background:#fff;border-color:rgba(10,26,49,.14)}
  .nav.is-open .nav__progress{display:none}
}
[data-motion="off"] .nav__links,[data-motion="off"] .nav__links li,[data-motion="off"] .nav::after{transition:none!important}

/* ======================================================================
   v11: header logo exactly as in v10 — the original artwork, original
   colours, no filter. On the home page the menu bar is therefore a white
   bar from the start (as on the other pages) so the logo always reads.
   ====================================================================== */
.brand img{filter:none!important}
.home .nav:not(.is-open){
  background:rgba(255,255,255,.94)!important;
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom-color:var(--line)!important;
}
.home .nav:not(.is-open) .nav__link{color:var(--ink)!important}
.home .nav:not(.is-open) .nav__link:hover{color:var(--navy)!important}
.home .nav:not(.is-open) .nav__link::after{background:var(--fav-2,#E2702D)!important}
.home .nav:not(.is-open) .nav__toggle{background:#fff!important;border-color:var(--line)!important}
.home .nav:not(.is-open) .nav__toggle span::before,
.home .nav:not(.is-open) .nav__toggle span::after{background:var(--navy)!important}
.home .nav:not(.is-open) .nav__toggle span{background:var(--navy)!important}
/* Get A Quote keeps the favicon orange on every page */
.nav .nav__cta{background:linear-gradient(135deg,#E5893B,#E2702D 55%,#D13E2A)!important;color:#fff!important;border-color:transparent!important}
.nav .nav__cta:hover{background:var(--navy)!important}

/* v11: footer logo = the original artwork in its own colours, same as the
   header. A neat white plate keeps the dark lettering readable on navy. */
.footer__mark{
  filter:none!important;
  height:58px!important;width:auto!important;max-width:100%;
  background:#fff;padding:10px 14px;border-radius:8px;box-sizing:border-box;
  margin-bottom:22px;
}

/* ======================================================================
   v11: footer back on the original dark navy. The logo is the exact v10
   artwork with its lettering turned white (#logo-on-dark) and the orange
   mark kept — no box, same treatment as the header over the hero.
   ====================================================================== */
.footer__mark{
  filter:url(#logo-on-dark)!important;background:none!important;padding:0!important;border-radius:0!important;
  height:38px!important;width:auto!important;margin-bottom:22px;
}

/* v11: home page menu bar — see-through over the hero at the top, the
   white bar appears only once you scroll (.is-stuck). The logo stays the
   exact original artwork in both states. */
html body.home .nav:not(.is-open):not(.is-stuck){
  background:transparent!important;border-bottom-color:transparent!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html body.home .nav:not(.is-open):not(.is-stuck) .nav__link{color:rgba(255,255,255,.92)!important}
html body.home .nav:not(.is-open):not(.is-stuck) .nav__link:hover{color:#fff!important}
html body.home .nav:not(.is-open):not(.is-stuck) .nav__toggle{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.4)!important}
html body.home .nav:not(.is-open):not(.is-stuck) .nav__toggle span::before,
html body.home .nav:not(.is-open):not(.is-stuck) .nav__toggle span::after{background:#fff!important}
html body.home .nav:not(.is-open):not(.is-stuck) .nav__toggle span{background:#fff!important}

/* v11: home page, menu bar see-through at the top of the dark hero —
   show the logo with white "AIISHWAA" lettering (orange mark and orange
   "Information Services" unchanged). Once you scroll and the white bar
   appears, the exact original logo returns. */
html body.home .nav:not(.is-open):not(.is-stuck) .brand img{filter:url(#logo-on-dark)!important}

/* v11: the 3D drawing stays sharp in front; the product screen behind it
   is a soft, light background — blurred and faded */
.pstage canvas{opacity:1;filter:none;position:relative;z-index:2}
.pstage .pui-wrap{z-index:0;filter:blur(2.5px);opacity:.55}
.pui{box-shadow:none}

/* v11: enquiry card — email button instead of a form (for now) */
.enquiry--mail{display:grid;gap:18px;justify-items:start}
.enquiry--mail .enquiry__lead{margin:0;font-size:1.02rem;line-height:1.65;color:var(--fg-2)}
.enquiry--mail .enquiry__fine{margin:0}