/* ==========================================================================
   Nishtech 2026 — homepage stylesheet
   Extracted from index.html. Paths are relative to this file, so asset
   references step up one level (../assets/...).
   ========================================================================== */

/* ==========================================================================
   0. BRAND FONTS
   RomanaT Medium  → display serif (h1–h3, h5, h6, stat numerals, offering names)
   STIXGeneral     → italic accent cut (hero rotator, emphasis)
   Manrope         → body sans (loaded from Google Fonts above)
   ========================================================================== */
@font-face{
  font-family:'RomanaT Medium';
  src:url('../assets/fonts/RomanaT-Medium.ttf') format('truetype');
  font-style:normal;font-weight:400 700;font-display:swap;
}
@font-face{
  font-family:'STIXGeneral';
  src:url('../assets/fonts/STIXGeneral-Italic.otf') format('opentype');
  font-style:italic;font-weight:100 900;font-display:swap;
}

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* --- Core palette --- */
  --indigo:#1E1B56;
  --indigo-deep:#0D0B2E;
  --orange:#FF7800;
  --hot:#FF2445;
  --deep-orange:#FF5400;
  --active-orange:#FA3900;
  --amber:#FF9500;
  /* Creative-director rule from the Figma colour styles:
       active orange #FA3900 = "CTA buttons and links"      (interactive)
       accent       #FF9500 = "orange titles and tags, no links" (decorative)
     So colour encodes interactivity. --accent-title is the decorative half.
     NOTE: #FF9500 reads 2.20 on white / 2.05 on the warm bg, under the 3.0
     large-text floor. Kept per direction; change this one value to #D97F00
     if that ever needs to clear AA. */
  --accent-title:#FF9500;
  --grad-underline:linear-gradient(90deg,var(--active-orange) 0%,var(--amber) 100%);

  /* --- Surfaces & text --- */
  --bg:#F8F7F4;
  --surface:#FFFFFF;
  --border:#E5E3DC;
  /* Body copy sampled from the Home 2026 comp: a neutral near-black, not the
     warm mid-grey the older stylesheet used. Verified identical across the
     intro paragraph and the industry card descriptions, line by line. */
  --muted:#2B2B2B;
  --on-dark:rgba(255,255,255,.65);

  /* --- Gradients --- */
  --grad-line:linear-gradient(90deg,#000979 0%,#FF2445 44%,#FF5400 70%,#FF7800 100%);
  --pink-gradient:linear-gradient(95deg,#FF2445 6.41%,#FF5400 48.4%,#FF7800 90.35%);
  --grad-cover:linear-gradient(135deg,rgba(13,11,46,.88) 0%,rgba(30,27,86,.75) 30%,rgba(255,36,69,.45) 65%,rgba(255,84,0,.5) 82%,rgba(255,120,0,.55) 100%);
  --grad-shield:linear-gradient(90deg,rgba(13,11,46,.6) 0%,rgba(13,11,46,.3) 50%,transparent 100%);
  --grad-card:linear-gradient(160deg,var(--indigo) 0%,var(--indigo-deep) 100%);
  --grad-placeholder:linear-gradient(135deg,#241F63 0%,#4A3A86 55%,#6D4A92 100%);

  /* --- Families --- */
  --font-display:'RomanaT Medium',Georgia,'Times New Roman',serif;
  --font-italic:'STIXGeneral',Georgia,serif;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* --- Type scale ---------------------------------------------------------
     Every value is measured off the 2560×1440 "jumbotron" frame in Figma and
     expressed as a vw fraction of 2560, so the design holds its exact
     proportions at the XL comp size and scales down cleanly.
     e.g. h1 = 106px @ 2560 → 106/2560 = 4.14vw
     --------------------------------------------------------------------- */
  --fs-h1:clamp(2.5rem,4.14vw,6.625rem);          /*  40 → 106  (not yet verified 1:1) */
  --fs-h2:clamp(1.75rem,2.34vw,3.75rem);           /*  28 →  60  (not yet verified 1:1) */
  --fs-h3:clamp(1.5rem,1.72vw,2.75rem);           /*  24 →  44  ✓ measured */
  --fs-h5:clamp(1.25rem,1.25vw,2rem);             /*  20 →  32 */
  --fs-stat:clamp(1.9rem,2.11vw,3.375rem);        /*  30 →  54 */
  --fs-h6:clamp(1.0625rem,1.02vw,1.625rem);       /*  17 →  26 */
  --fs-card-title:clamp(1.125rem,1.21vw,1.9375rem);/* 18 →  31  ✓ measured (industries) */
  --fs-post-title:clamp(1rem,.82vw,1.3125rem);    /*  16 →  21  ✓ measured (insights) */
  --fs-kicker:clamp(.75rem,.586vw,.9375rem);      /*  12 →  15  ✓ measured */
  --fs-eyebrow:clamp(.6875rem,.70vw,1.125rem);    /*  11 →  18 */
  --fs-nav:clamp(.6875rem,.488vw,.78125rem);      /*  11 → 12.5 ✓ measured (cap 9px) */
  --fs-body:clamp(.9375rem,.703vw,1.125rem);      /*  15 →  18  ✓ measured */
  --fs-lede:clamp(1rem,.9375vw,1.5rem);           /*  16 →  24  hero subcopy only */
  --fs-small:clamp(.8125rem,.625vw,1rem);         /*  13 →  16 */
  --fs-btn:clamp(.75rem,.547vw,.875rem);          /*  12 →  14  ✓ measured */

  --lh-tight:1.02;
  --lh-heading:1.18;
  --lh-body:1.7;                                  /* 18 × 1.7 = 30.6 ✓ measured 30.8 */
  --ls-label:.14em;
  --ls-nav:.1em;

  /* --- Layout -------------------------------------------------------------
     The page is full-bleed. Content is capped at a 1920 measure, which yields
     the comp's 320px side margins at 2560 and goes fluid below that.
     The hero sits closer to the edge than the rest of the page: 160px @ 2560.
     --------------------------------------------------------------------- */
  --content:1920px;
  --gutter:clamp(1.5rem,3.2vw,4rem);
  --hero-inset:clamp(1.5rem,6.25vw,10rem);        /*  24 → 160 */
  --logo-w:clamp(7.5rem,6.99vw,11.1875rem);       /* 120 → 179 */
  --nav-h:clamp(4rem,3.6vw,5.75rem);              /*  64 →  92 */
  --nav-top:0px;                    /* comp seats the bar flush: logo centre 46 in a 92 bar */
  --nav-pad:clamp(1.25rem,1.72vw,2.75rem);        /*  20 →  44  side padding */
  --nav-gap:clamp(1rem,1.76vw,2.8125rem);         /*  16 →  45  ✓ measured */
  --nav-bottom:84px;

  /* --- Hero rhythm (measured from the comp) --- */
  --hero-gap-eyebrow:clamp(1.25rem,2.34vw,3.75rem);   /* 20 →  60 */
  --hero-italic-lead:clamp(.5rem,1.48vw,2.375rem);    /*  8 →  38 */
  --hero-gap-sub:clamp(1rem,1.99vw,3.1875rem);        /* 16 →  51 */
  --hero-gap-btns:clamp(1.75rem,4.49vw,7.1875rem);    /* 28 → 115 */

  /* --- Spacing --- */
  --space-section:clamp(4rem,6.2vw,9.925rem);   /* 64 → 159 */
  --space-block:clamp(2rem,3.2vw,5.125rem);     /* 32 → 82 */
  --space-tight:clamp(1rem,1.4vw,2.25rem);      /* 16 → 36 */
  --gap-card:clamp(1rem,1.5vw,2.375rem);        /* 16 → 38 */

  --r-sm:2px;
  --r-md:10px;
  --r-pill:999px;
  --shadow-card:0 18px 48px rgba(13,11,46,.10);
  --shadow-card-hover:0 26px 64px rgba(13,11,46,.18);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* No stepped container: the layout is fluid edge-to-edge and simply stops
   growing once the content measure reaches 1920. At 2560 that leaves the
   320px side margins the comp uses; below 1920 it fills the viewport. */

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);font-size:var(--fs-body);
  line-height:var(--lh-body);font-weight:500;color:var(--muted);
  background:var(--surface);-webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
:focus-visible{outline:2px solid var(--active-orange);outline-offset:3px}

.container{width:min(100% - var(--gutter)*2,var(--content));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   3. TYPOGRAPHY PRIMITIVES
   ========================================================================== */
.h2{font-family:var(--font-display);font-size:var(--fs-h2);line-height:var(--lh-heading);font-weight:400;color:var(--indigo);letter-spacing:-.01em}
.h2--invert{color:#fff}
/* Measured: the intro heading is not flat orange — it carries the brand
   gradient as clipped text. Sampling across both lines shows one continuous
   left-to-right ramp over the whole element box (red at the left edge,
   orange at the right), which is background-clip:text, not a per-line fill. */
.h3{
  font-family:var(--font-display);font-size:var(--fs-h3);line-height:var(--lh-heading);font-weight:400;
  background:var(--pink-gradient);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--active-orange);
}
.stat-num{font-family:var(--font-display);font-size:var(--fs-stat);line-height:1;font-weight:400;color:var(--indigo)}

/* Section eyebrows in the comp are title case with no leading rule — only the
   hero eyebrow carries the rule. Measured 16px with wide tracking. */
.eyebrow{
  display:inline-flex;align-items:center;
  font-size:clamp(.75rem,.625vw,1rem);font-weight:700;letter-spacing:var(--ls-label);
  color:var(--accent-title);
}

.lede{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
.text-amber{color:var(--amber)}
.text-orange{color:var(--active-orange)}
/* The accent half of a section heading is a non-interactive title, so it takes
   accent, flat. The gradient belongs to the h3 only — that one is measured. */
.h2 .text-orange,
.h2 .text-amber{color:var(--accent-title)}

/* --- Reveal on scroll --- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.vis{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}
.reveal.d4{transition-delay:.4s}

/* ==========================================================================
   4. BUTTONS & LINKS
   ========================================================================== */
.btn-fill{
  position:relative;z-index:0;display:inline-flex;align-items:center;gap:8px;
  padding:clamp(.65rem,.586vw,.9375rem) clamp(1.1rem,1.367vw,2.1875rem);
  background:var(--active-orange);color:#fff;
  font-size:var(--fs-btn);font-weight:800;letter-spacing:.04em;border-radius:var(--r-sm);
  transition:box-shadow .25s var(--ease);
}
.btn-fill::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--pink-gradient);opacity:0;transition:opacity .25s}
.btn-fill:hover{box-shadow:2px 2px 10px rgba(0,0,0,.25)}
.btn-fill:hover::before{opacity:1}
.btn-fill svg{transition:transform .25s}
.btn-fill:hover svg{transform:translateX(4px)}
.btn-fill:active{box-shadow:none;color:rgba(255,255,255,.7)}
.btn-fill:active::before{opacity:1}

.btn-outline{
  position:relative;z-index:0;display:inline-flex;align-items:center;gap:8px;
  padding:clamp(.65rem,.586vw,.9375rem) clamp(1.1rem,1.367vw,2.1875rem);
  background:transparent;color:#fff;
  font-size:var(--fs-btn);font-weight:700;letter-spacing:.04em;
  border:2px solid var(--active-orange);border-radius:var(--r-sm);
  transition:box-shadow .25s var(--ease),opacity .25s;
}
.btn-outline::before{
  content:'';position:absolute;inset:-2px;z-index:-1;border-radius:inherit;padding:2px;
  background:var(--pink-gradient);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.btn-outline:hover{box-shadow:0 0 10px rgba(255,255,255,.4)}
.btn-outline:hover::before{opacity:1}
.btn-outline svg{transition:transform .25s}
.btn-outline:hover svg{transform:translateX(4px)}

.cta-text{
  display:inline-flex;align-items:center;gap:.55em;position:relative;
  font-size:var(--fs-small);font-weight:700;color:var(--active-orange);padding-bottom:2px;
}
/* Links are active orange on every surface — the one link colour in the system. */
/* No underline at rest; it wipes in left-to-right on hover as a gradient, and
   the arrow steps 4px right. This was previously inverted — the rule had a
   permanent underline that animated *away* on hover. */
.cta-text::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--grad-underline);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.cta-text:hover::after,
.cta-text:focus-visible::after{transform:scaleX(1)}
.cta-text svg{transition:transform .25s var(--ease)}
.cta-text:hover svg{transform:translateX(4px)}
.cta-text--invert{color:var(--active-orange)}   /* 5.12 on #0D0B2E, clears AA */

.arw{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-tight);margin-bottom:var(--space-block);flex-wrap:wrap}
/* No ch-based cap here: `ch` resolves against the 18px body font, which was
   clamping these headings to ~560px and wrapping every one of them onto two
   lines. Every section heading is a single line in the comp. */
.sec-head__text{display:flex;flex-direction:column;gap:.85rem;flex:1 1 auto;min-width:0}

/* ==========================================================================
   5. GRADIENT BAR + HEADER
   ========================================================================== */
.gbar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--grad-line);z-index:1001;opacity:0;transition:opacity .4s}
.gbar.vis{opacity:1}

.top-nav{
  position:fixed;top:var(--nav-top);left:0;right:0;height:var(--nav-h);z-index:1000;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:0 var(--nav-pad);background:transparent;border-bottom:1px solid transparent;
  transition:background .4s,box-shadow .4s,border-color .4s,top .4s;
}
/* Scrolled state — solid white bar, colour logo, indigo links */
.top-nav.scrolled{
  top:3px;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);
  box-shadow:0 2px 20px rgba(0,0,0,.06);border-bottom-color:var(--border);
}

.nav-logo{position:relative;display:flex;align-items:center;width:var(--logo-w);aspect-ratio:336/87;flex:none}
.nav-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity .4s}
.nav-logo .logo-color{opacity:0}
.nav-logo .logo-white{opacity:1}
.top-nav.scrolled .logo-color{opacity:1}
.top-nav.scrolled .logo-white{opacity:0}

.nav-links{display:flex;align-items:center;gap:var(--nav-gap)}
.nav-links li{position:relative}
.nav-links>li>a{
  position:relative;display:inline-flex;align-items:center;gap:5px;padding:4px 0;
  font-size:var(--fs-nav);font-weight:700;letter-spacing:var(--ls-nav);
  text-transform:uppercase;color:#fff;white-space:nowrap;transition:color .3s;
}
.nav-links>li>a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--active-orange);transition:width .3s}
.nav-links>li>a:hover{color:var(--active-orange)}
.nav-links>li>a:hover::after,.nav-links>li>a.active::after{width:100%}
.nav-links>li>a.active{color:var(--active-orange)}
.top-nav.scrolled .nav-links>li>a{color:var(--indigo)}
.top-nav.scrolled .nav-links>li>a:hover,.top-nav.scrolled .nav-links>li>a.active{color:var(--active-orange)}

.mega-caret{transition:transform .25s;flex:none}

/* Measured: 177×38 box, 50px from the right edge, title case with an arrow. */
.nav-cta{
  flex:none;display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;
  padding:clamp(.5rem,.43vw,.6875rem) clamp(.9rem,1.02vw,1.625rem);
  border:2px solid rgba(255,255,255,.45);border-radius:var(--r-sm);
  font-size:var(--fs-nav);font-weight:700;letter-spacing:.02em;
  color:#fff;background:transparent;transition:all .3s;
}
.nav-cta svg{transition:transform .25s}
.nav-cta:hover svg{transform:translateX(3px)}
.nav-cta:hover{background:rgba(255,255,255,.12);border-color:#fff}
.top-nav.scrolled .nav-cta{border-color:var(--active-orange);color:var(--active-orange)}
.top-nav.scrolled .nav-cta:hover{background:var(--active-orange);color:#fff}

/* --- Mega panels --- */
.mega-panel{
  position:fixed;left:0;right:0;top:var(--nav-bottom);width:100%;z-index:1002;
  background:#fff;box-shadow:0 24px 60px rgba(13,11,46,.18);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
  transition:opacity .22s,transform .22s;
}
/* Three items across, centred. 1110px keeps the 370px column pitch measured
   off the panel, so the item cards stay the size they were and simply reflow
   from five-up into a centred three-up block. */
.mega-inner{max-width:min(100%,69.375rem);margin-inline:auto;padding:40px var(--nav-pad)}
.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 40px;align-items:start}
.mega-item{
  position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px;border-radius:2px;transition:background .18s;
}
.mega-item::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--active-orange);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.mega-item:hover::after,.mega-item:focus-visible::after{transform:scaleX(1)}
.mega-item:hover{background:var(--bg)}
.mega-item-text{display:flex;flex-direction:column;gap:6px}
.mega-item-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.15rem,1.3vw,1.5rem);line-height:1.15;background:linear-gradient(90deg,var(--hot) 0%,var(--deep-orange) 50%,var(--amber) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mega-item-desc{font-family:var(--font-body);font-size:15px;font-weight:500;line-height:1.65;color:var(--muted)}   /* #2B2B2B */
.mega-item-arrow{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--active-orange);color:var(--active-orange);display:grid;place-items:center;transition:all .3s}
.mega-item-arrow svg{transition:transform .25s}
.mega-item:hover .mega-item-arrow svg{transform:translateX(4px)}
.mega-all-row{margin-top:12px;border-top:1px solid var(--border);padding:20px 16px 0}
.mega-all{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--active-orange);padding-bottom:2px}
.mega-all::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:currentColor;transition:width .3s}
.mega-all:hover::after{width:100%}
.mega-all svg{transition:transform .25s}
.mega-all:hover svg{transform:translateX(4px)}

@media (min-width:1024px){
  .has-mega{padding-bottom:36px;margin-bottom:-36px}
  .has-mega:hover .mega-caret{transform:rotate(180deg)}
  .has-mega:hover .mega-panel,.has-mega:focus-within .mega-panel{opacity:1;visibility:visible;pointer-events:auto;transform:none}
}

/* --- Hamburger --- */
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:#fff;flex:none}
.top-nav.scrolled .nav-toggle{color:var(--indigo)}
.nav-toggle span{display:block;width:22px;height:2px;background:currentColor;position:relative;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform .3s var(--ease)}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   6. COVER / HERO
   ========================================================================== */
.cover{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--indigo-deep)}
.cover-video{position:absolute;inset:0;z-index:0}
.cover-video video{width:100%;height:100%;object-fit:cover}
.cover-grad{position:absolute;inset:0;z-index:1;background:var(--grad-cover)}
.cover-text-shield{position:absolute;inset:0;z-index:1;background:var(--grad-shield)}
/* Hero content is inset 160px @ 2560 (6.25vw) — tighter than the 320px the
   rest of the page uses. Measured off the jumbotron frame. */
.cover-content{position:relative;z-index:2;width:100%;max-width:calc(var(--hero-inset) + 62.5vw);padding:0 var(--hero-inset)}
.cover-eyebrow{
  display:flex;align-items:center;gap:clamp(.5rem,.625vw,1rem);
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--amber);margin-bottom:var(--hero-gap-eyebrow);
}
.cover-eyebrow::before{content:'';width:clamp(20px,1.72vw,44px);height:3px;border-radius:2px;background:currentColor;flex:none}
.cover h1{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.01em;color:#fff;margin-bottom:var(--hero-gap-sub)}
.cover-sub{font-size:var(--fs-lede);font-weight:500;line-height:1.72;color:var(--on-dark);max-width:38ch;margin-bottom:var(--hero-gap-btns)}
.cover-btns{display:flex;flex-wrap:wrap;gap:clamp(.75rem,.86vw,1.375rem)}

/* The comp breaks the headline explicitly after "digital" and "experiences";
   below 1024 we let it wrap naturally instead. */
.hero-br{display:inline}
.rotator-line{display:block;margin-top:var(--hero-italic-lead)}

/* Text rotator — clip/reveal, grid-stacked so lines never shift */
.rotator-wrap{position:relative;display:inline-grid;vertical-align:bottom;line-height:1.25}
.rotator-wrap>span{
  grid-area:1/1;color:var(--amber);font-family:var(--font-italic);font-style:italic;font-weight:600;
  white-space:nowrap;visibility:hidden;clip-path:inset(0 100% 0 0);
  transition:clip-path .8s cubic-bezier(.77,0,.175,1);
}
.rotator-wrap>span.active{clip-path:inset(0 0 0 0);visibility:visible}
.rotator-wrap>span.exit{clip-path:inset(0 0 0 100%);visibility:visible}
.rotator-wrap>span.measure{visibility:hidden!important;clip-path:none}

.scroll-hint{position:absolute;left:var(--hero-inset);bottom:clamp(24px,2.34vw,60px);z-index:3;display:flex;align-items:center;gap:12px}
.scroll-line{position:relative;width:1px;height:48px;background:rgba(255,255,255,.15);overflow:hidden}
.scroll-line::after{content:'';position:absolute;top:-48px;left:0;width:1px;height:48px;background:var(--amber);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%{top:-48px}60%,100%{top:48px}}
.scroll-text{writing-mode:vertical-rl;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.35)}

/* ==========================================================================
   7. STATS BAR
   ========================================================================== */
.statbar{background:var(--surface);border-bottom:1px solid var(--border)}
.statbar__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.statbar__item{padding:clamp(1.4rem,2vw,2.6rem) clamp(.75rem,1.5vw,2rem);text-align:center;border-left:1px solid var(--border)}
.statbar__item:first-child{border-left:0}
.statbar__num{font-family:var(--font-display);font-size:clamp(1.35rem,1.5vw,2rem);line-height:1.1;font-weight:400;color:var(--indigo)}
.statbar__label{font-size:var(--fs-small);color:var(--muted);margin-top:.35rem}

/* ==========================================================================
   8. INTRO
   ========================================================================== */
/* Measured: the intro block is ~1320px wide centred in 2560 — narrower than
   the 1920 container — with a 129px column gap and a 672px measure on the
   paragraph. Heading column sits at 0.766fr against the copy's 1fr. */
.intro{background:var(--bg);padding-block:var(--space-section)}
.intro__grid{
  display:grid;grid-template-columns:minmax(0,.766fr) minmax(0,1fr);
  gap:clamp(2rem,5.04vw,8.0625rem);align-items:start;
  max-width:82.5rem;margin-inline:auto;
}
.intro__body{display:flex;flex-direction:column;gap:clamp(1.25rem,1.87vw,3rem);align-items:flex-start}
.intro__body .lede{max-width:42rem}

/* ==========================================================================
   9. SELECTED WORK
   ========================================================================== */
.work{position:relative;background:var(--surface);padding-block:var(--space-section);overflow:hidden}
/* Wordart is Manrope bold, sized to span the full viewport with a few pixels
   bleeding off each side (the section clips the overflow). 19.4vw puts the
   eight caps at roughly 103vw — worth one browser check if the face changes. */
.work__watermark{
  position:absolute;top:clamp(2rem,5vw,7rem);left:50%;transform:translateX(-50%);z-index:0;
  font-family:var(--font-body);font-weight:700;white-space:nowrap;user-select:none;pointer-events:none;
  font-size:19.4vw;line-height:.8;letter-spacing:-.005em;color:rgba(250,57,0,.06);
}
.work .container{position:relative;z-index:1}
.work__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-card)}
/* Hover holds the card still — no lift, no shadow. The title block slides up
   and a description wipes in beneath it, and the image dims. */
.work-card{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-sm);background:var(--grad-card)}
.work-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--grad-placeholder);transition:transform .6s var(--ease),opacity .45s var(--ease)}
.work-card:hover img{transform:scale(1.05);opacity:.72}
.work-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,11,46,0) 30%,rgba(13,11,46,.55) 62%,rgba(13,11,46,.93) 100%);transition:opacity .45s var(--ease)}
.work-card:hover::after{opacity:.85}
.work-card__body{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(1rem,1.3vw,1.75rem);display:flex;flex-direction:column;gap:.5rem;transition:transform .45s var(--ease)}
.work-card__reveal{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows .45s var(--ease),opacity .35s var(--ease),margin-top .45s var(--ease)}
.work-card__reveal>div{overflow:hidden}
.work-card__desc{font-size:var(--fs-small);line-height:1.55;color:rgba(255,255,255,.82)}
.work-card:hover .work-card__reveal{grid-template-rows:1fr;opacity:1;margin-top:.65rem}
.work-card__tag{font-size:12px;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--amber)}
.work-card__title{font-family:var(--font-display);font-size:var(--fs-h6);line-height:1.28;font-weight:400;color:#fff}

/* ==========================================================================
   10. OFFERINGS ACCORDION
   ========================================================================== */
/* ---- Measured from the Home 2026 offerings frame (2547px capture ≈ 1:1) ----
   section #0E0B2D · panel spans the full 1920 container, flat #1E1B56, 260 tall
   collapsed rows inset 234 left / 188 right, 70px pitch, 1px hairline
   panel padding 250 inline · title 46 · copy 18/33 · 5 chips 185×36 on a 41 pitch
   The open row is REPLACED by its panel — the panel carries the title itself. */
.offerings{background:var(--indigo-deep);padding-block:var(--space-section);color:#fff}
.offerings__list{--row-l:9.14vw;--row-r:7.34vw}

.offer__summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  margin-inline:var(--row-l) var(--row-r);
  width:calc(100% - var(--row-l) - var(--row-r));
  height:clamp(3rem,2.73vw,4.375rem);                    /* 70 @ 2560 */
  border-bottom:1px solid rgba(255,255,255,.55);
  cursor:pointer;text-align:left;
}
.offer__name{font-family:var(--font-display);font-size:var(--fs-h5);font-weight:400;color:#fff;transition:color .25s}
.offer__summary:hover .offer__name{color:var(--active-orange)}
.offer__icon{width:1.1em;height:1.1em;flex:none;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;color:var(--active-orange);transition:transform .3s var(--ease)}
/* Open item: the row disappears and the panel takes its place. */
.offer.is-open>.offer__summary{display:none}

.offer__reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.offer__reveal>div{overflow:hidden}
.offer.is-open .offer__reveal{grid-template-rows:1fr}

.offer__panel{
  display:grid;grid-template-columns:45.05% 41.95% 13%;align-items:start;
  background:var(--indigo);
  /* Focused section is bounded top and bottom, full width. */
  border-top:1px solid rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.55);
  padding:clamp(1rem,1.25vw,2rem) clamp(1.25rem,9.77vw,15.625rem) clamp(1rem,.94vw,1.5rem);
}
.offer__panel-title{font-family:var(--font-display);font-size:clamp(1.5rem,1.8vw,2.875rem);line-height:1.1;font-weight:400;color:#fff}
.offer__panel-title .dot{color:var(--accent-title)}
.offer__panel-body{display:flex;flex-direction:column;gap:clamp(1rem,1.41vw,2.25rem);align-items:flex-start}
.offer__panel-desc{font-size:var(--fs-body);line-height:1.83;color:var(--on-dark);max-width:87.5%}

/* Platform tags sit between the copy and the CTA. Measured: 26px tall,
   warm maroon wash with amber type. */
.platforms{display:flex;flex-wrap:wrap;gap:clamp(.4rem,.35vw,9px)}
.platform-tag{
  display:inline-flex;align-items:center;
  height:clamp(1.375rem,1.02vw,1.625rem);                /* 26 @ 2560 */
  padding-inline:clamp(.5rem,.47vw,.75rem);
  font-size:clamp(.625rem,.469vw,.75rem);font-weight:700;letter-spacing:.01em;
  color:var(--amber);background:rgba(255,120,0,.12);border-radius:2px;white-space:nowrap;
}

/* Chips measured at 185×36 on a 41px pitch with ~12px type — the 16px I had
   was overflowing the 185px pill on the longer labels. */
.chips{display:flex;flex-direction:column;gap:clamp(.25rem,.2vw,5px)}
.chip{
  display:flex;align-items:center;gap:.55em;
  min-height:clamp(1.75rem,1.41vw,2.25rem);              /* 36 @ 2560 */
  padding-inline:clamp(.6rem,.55vw,.875rem);
  font-size:clamp(.625rem,.469vw,.75rem);                /* 10 → 12 */
  line-height:1.25;color:var(--on-dark);
  background:rgba(255,255,255,.06);border-radius:var(--r-pill);
}
.chip::before{content:'/';color:var(--orange);flex:none}

/* ==========================================================================
   11. INDUSTRIES
   ========================================================================== */
.industries{background:var(--surface);padding-block:var(--space-section)}

/* Shared full-bleed rail: the card row breaks out of the 1920 container and
   runs edge to edge with a 72px inset @ 2560 (2.8vw), while the section
   heading stays on the container grid. Used by industries and work. */
.section-rail,
.industries__rail{--rail-pad:clamp(1rem,2.8vw,4.5rem);width:100%;padding-inline:var(--rail-pad)}
.industries__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.75rem,2.8vw,4.5rem);align-items:start}

/* Card height is fixed by aspect ratio. On hover the media collapses and the
   body grows into the space it gives up, so the row never changes height and
   neighbouring cards never shift. */
.ind-card{
  --media-h:60%;
  aspect-ratio:.744;
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;
  transition:translate .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
/* `translate` rather than `transform` so the lift composes with the
   scroll-reveal transform on the same element instead of overriding it. */
.ind-card.is-active{--media-h:39%;translate:0 -6px;box-shadow:var(--shadow-card);border-color:transparent}

.ind-card__media{flex:none;height:var(--media-h);overflow:hidden;background:var(--grad-card);transition:height .55s var(--ease)}
.ind-card__media img{width:100%;height:100%;object-fit:cover;background:var(--grad-placeholder);transition:transform .7s var(--ease)}
.ind-card.is-active .ind-card__media img{transform:scale(1.04)}

/* Measured @ 2560: 56px padding, 58×3 rule, 18px rule→title, 31px title,
   48px title→copy, copy at the 18px body size. */
.ind-card__body{padding:clamp(1.1rem,2.19vw,3.5rem);display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
/* Gradient rule above the title — indigo into orange, as in the comp */
.ind-card__rule{
  width:clamp(40px,2.27vw,58px);height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--indigo) 0%,var(--hot) 55%,var(--active-orange) 100%);
  transition:width .45s var(--ease);
}
.ind-card.is-active .ind-card__rule{width:clamp(52px,3.05vw,78px)}
.ind-card__title{
  font-family:var(--font-display);font-size:var(--fs-card-title);line-height:1.22;font-weight:400;
  color:var(--indigo);margin-top:clamp(.6rem,.703vw,1.125rem);
}

/* Hover reveal.
   The 0fr → 1fr grid trick animates to the copy's natural height, so there is
   no magic max-height to keep in sync and the easing stays smooth regardless
   of how long the description runs. */
.ind-card__reveal{
  display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
  transition:grid-template-rows .55s var(--ease),opacity .4s var(--ease),margin-top .55s var(--ease);
}
.ind-card__reveal>div{overflow:hidden}
.ind-card__desc{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
.ind-card.is-active .ind-card__reveal{grid-template-rows:1fr;opacity:1;margin-top:clamp(1.25rem,1.87vw,3rem)}

/* Touch devices have no hover, so every card is shown open and the fixed
   aspect ratio is released so nothing gets clipped. */
@media (hover:none){
  .work-card__reveal{grid-template-rows:1fr;opacity:1;margin-top:.65rem}
  /* Touch: no hover to reveal with, so the veil comes off permanently. */
  .post:not(.post--featured) .post__media::after{opacity:0}
  .ind-card{aspect-ratio:auto;--media-h:auto}
  .ind-card__media{aspect-ratio:1.86}
  .ind-card__reveal{grid-template-rows:1fr;opacity:1;margin-top:clamp(1.25rem,1.87vw,3rem)}
}

/* ==========================================================================
   12. TESTIMONIAL
   ========================================================================== */
/* ---- Measured from the Home 2026 quote band (2553px capture ≈ 1:1) ----
   band 363 tall on #1E1B56 · mark 45×36 orange at y56 · copy 26/33 centred,
   max measure 800 · citation 18px at ~55% white · 33-34px between each part */
.quote{
  background:var(--indigo);text-align:center;color:#fff;
  padding-block:clamp(2rem,2.19vw,3.5rem) clamp(2.5rem,3.71vw,5.9375rem);
}
.quote__mark{font-family:var(--font-display);font-size:clamp(3rem,4.69vw,7.5rem);line-height:.3;color:var(--active-orange);margin-bottom:clamp(1.5rem,1.29vw,2.0625rem)}
.quote__text{
  font-family:var(--font-display);font-size:clamp(1.125rem,1.02vw,1.625rem);line-height:1.27;
  font-weight:400;color:rgba(255,255,255,.9);max-width:50rem;margin-inline:auto;
}
.quote__cite{display:block;margin-top:clamp(1.25rem,1.33vw,2.125rem);font-family:var(--font-body);font-size:var(--fs-body);color:rgba(255,255,255,.55)}

/* ==========================================================================
   13. WHY NISHTECH
   ========================================================================== */
/* ---- Measured from the Home 2026 why frame (2554px capture ≈ 1:1) ----
   title 50/61 · line 2 amber · bullets 18px on a 48px rhythm, 6px amber dot
   cards 365×161 in a 2×2 with 45/42 gaps, 1px #E5E3DC, distinct tints  */
.why{background:var(--surface);padding-block:var(--space-section)}
.why__grid{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2rem,1.76vw,2.8125rem);align-items:start;
  padding-right:clamp(0rem,7.19vw,11.5rem);
}
.why__intro{display:flex;flex-direction:column;gap:clamp(1rem,.86vw,1.375rem)}
.why__title{font-family:var(--font-display);font-size:clamp(1.75rem,1.95vw,3.125rem);line-height:1.22;font-weight:400;color:var(--indigo)}
.why__title em{display:block;font-style:normal;color:var(--amber)}
.why__list{display:flex;flex-direction:column;gap:clamp(.9rem,1.19vw,1.9375rem);margin-top:clamp(1.25rem,1.72vw,2.75rem)}
.why__list li{position:relative;padding-left:clamp(1rem,.74vw,1.1875rem);font-size:var(--fs-body);line-height:1.2;color:var(--muted)}
.why__list li::before{content:'';position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--amber)}

.why__stats{
  display:grid;grid-template-columns:repeat(2,clamp(140px,14.26vw,22.8125rem));   /* 365 @2560 */
  gap:clamp(1rem,1.64vw,2.625rem) clamp(1rem,1.76vw,2.8125rem);                    /* 42 / 45 */
  margin-top:clamp(0rem,1.45vw,2.3125rem);   /* aligns the block with the title, not the eyebrow */
}
.stat-card{
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(90px,6.29vw,10.0625rem);                                        /* 161 @2560 */
  padding-inline:clamp(1rem,1.25vw,2rem);
  border-radius:var(--r-md);border:1px solid var(--border);
}
/* Each card carries its own diagonal tint in the comp — warm pink, cream,
   pink into lavender, then lavender into blue. */
.stat-card:nth-child(1){background:linear-gradient(135deg,#FFF7F4 0%,#FDF3F4 100%)}
.stat-card:nth-child(2){background:linear-gradient(135deg,#FFFAF4 0%,#FDF6F1 100%)}
.stat-card:nth-child(3){background:linear-gradient(135deg,#FEF4F5 0%,#F7F3F7 100%)}
.stat-card:nth-child(4){background:linear-gradient(135deg,#F8F5F9 0%,#F1F2F9 100%)}
.stat-card__label{font-size:var(--fs-body);line-height:1.2;color:var(--muted);margin-top:clamp(.4rem,.55vw,.875rem)}

/* ==========================================================================
   14. PARTNERS
   ========================================================================== */
.partners{background:var(--indigo);padding-block:var(--space-section);color:#fff}
.partners__title{font-family:var(--font-display);font-size:var(--fs-h5);font-weight:400;color:var(--active-orange)}
/* No `ch` measure here, deliberately. `ch` resolves against the *zero glyph*
   of whatever font is currently rendering — RomanaT before the webfont lands,
   Georgia after a swap, and they are not the same width. The wrap point moved
   between first paint and font load, which is what broke the comp's line
   break. The break is now set in the markup (`.brk-lg`) and the measure just
   gets out of the way. */
.partners__sub{font-family:var(--font-display);font-size:var(--fs-h3);line-height:var(--lh-heading);font-weight:400;color:#fff;max-width:none;margin-top:clamp(1rem,1.6vw,2rem)}
/* Comp-specified line breaks. Desktop only — below 1024 the copy reflows. */
.brk-lg{display:none}
@media (min-width:1024px){ .brk-lg{display:inline} }
/* Client logos auto-scroll, matching nishtech.com: a single track holding two
   identical sets, translated -50% over 30s linear — the seam lands exactly
   where set two begins, so it loops without a jump. */
.logo-marquee{
  margin-top:clamp(2.5rem,4.5vw,6rem);width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.logo-marquee__track{display:flex;width:max-content;animation:logo-scroll 30s linear infinite}
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track{animation-play-state:paused}
.logo-marquee__set{display:flex;align-items:center}
.logo-marquee__set li{flex:0 0 clamp(150px,10.94vw,17.5rem);display:grid;place-items:center}
/* Production SVGs from nishtech.com, forced white for the indigo band. */
.logo-marquee img{max-height:clamp(28px,2.19vw,3.5rem);width:auto;opacity:.9;filter:brightness(0) invert(1);transition:opacity .25s}
.logo-marquee img:hover{opacity:1}
@keyframes logo-scroll{to{transform:translateX(-50%)}}
.logo-marquee.is-paused .logo-marquee__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .logo-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .logo-marquee__track{animation:none}
}
/* WCAG 2.2.2: anything moving for more than five seconds needs a way to stop
   it. Hover and focus already pause, but neither is available on touch. */
.marquee-toggle{
  display:inline-flex;align-items:center;gap:.55em;margin-top:clamp(1rem,1.4vw,2.25rem);
  font-size:var(--fs-small);font-weight:600;color:var(--on-dark);
  transition:color .2s var(--ease);
}
.marquee-toggle:hover{color:#fff}
.marquee-toggle__icon{
  width:1.1em;height:1.1em;flex:none;border:1px solid currentColor;border-radius:50%;
  position:relative;
}
.marquee-toggle__icon::before{
  content:'';position:absolute;inset:32% 34%;
  border-left:2px solid currentColor;border-right:2px solid currentColor;
}
/* pressed = paused, so the icon becomes a play triangle */
.marquee-toggle[aria-pressed="true"] .marquee-toggle__icon::before{
  inset:28% 30% 28% 36%;border:none;
  background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);
}

/* ==========================================================================
   15. INSIGHTS CAROUSEL
   ========================================================================== */
/* ---- Measured from the Home 2026 insights frame (2553px capture ≈ 1:1) ----
   content on the 1920 container (left edge 321) · cards all 452 tall
   featured 1093 wide, 40.3% image / 59.7% body, +10px gradient edge
   small cards 277 wide · 19px gaps · row overflows the container and fades
   background: horizontal #E5E4EB → #FFFFFF with the insight-bg mesh on top  */
.insights{
  position:relative;padding-block:var(--space-section);overflow:hidden;
  background:
    url('https://www.nishtech.com/-/media/Images/Home/insight-bg.png') no-repeat right top,
    linear-gradient(90deg,#E5E4EB 0%,#F4F3F6 55%,#FFFFFF 100%);
}
.insights .container{position:relative;z-index:1}
/* Measured: eyebrow 16px, heading ~53px (smaller than the 60px used on the
   offerings heading), and the View All link right-aligned to the container
   edge and vertically centred on the heading — not dropped below the copy. */
.insights__head{display:flex;flex-direction:column;gap:clamp(.85rem,1.1vw,1.75rem);margin-bottom:var(--space-block)}
.insights__head-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-tight);flex-wrap:wrap}
.insights__head-text{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.insights__title{font-size:clamp(1.625rem,2.07vw,3.3125rem)}   /* 26 → 53 */
.insights__head .lede{max-width:70ch}

.insights__track{
  display:flex;gap:clamp(.5rem,.74vw,19px);
  overflow:hidden;padding-bottom:.5rem;
  transition:opacity .2s var(--ease);
  /* the row deliberately runs past the container; the tail card fades out */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 210px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 210px),transparent 100%);
}
.insights__track::-webkit-scrollbar{display:none}
/* brief dip while the cards re-order, which hides the reflow of the
   featured card growing from 277 to 1103 */
.insights__track.is-shifting{opacity:.2}

/* Excerpt and Read More belong to the featured card only. */
.post:not(.post--featured) .post__excerpt,
.post:not(.post--featured) .post__cta{display:none}
.post__title a{color:inherit}
.post__title a:hover{color:var(--active-orange)}

.post{
  scroll-snap-align:start;display:flex;flex-direction:column;
  flex:0 0 clamp(200px,10.82vw,17.3125rem);            /* 277 @ 2560 */
  height:clamp(320px,17.66vw,28.25rem);                /* 452 @ 2560 */
  background:var(--surface);border-radius:var(--r-sm);overflow:hidden;
}
/* No lift and no shadow on hover — the comp's only card interactions are the
   featured card widening its body and the small cards dropping their veil. */

/* Small cards sit under a white veil and reveal to full colour on hover.
   Sampled: #345182 → #D4DCE6 on the same pixels, which resolves to white at
   ~0.79 across all three channels. */
.post:not(.post--featured) .post__media{position:relative}
.post:not(.post--featured) .post__media::after{
  content:'';position:absolute;inset:0;background:#fff;opacity:.79;
  transition:opacity .45s var(--ease);pointer-events:none;
}
.post:not(.post--featured):hover .post__media::after{opacity:0}

/* Featured card: hovering narrows the image and the body expands into it.
   Measured 40.3% → 34.6% of a fixed 1103px card, so nothing around it moves. */
.post--featured{
  --media-w:40.3%;
  position:relative;flex:0 0 clamp(320px,43.09vw,68.9375rem);  /* 1103 incl. edge */
  flex-direction:row;padding-right:10px;
}
.post--featured:hover{--media-w:34.6%}
/* The vertical gradient edge on the right of the featured card. */
.post--featured::after{
  content:'';position:absolute;inset:0 0 0 auto;width:10px;
  background:linear-gradient(180deg,#FF7800 0%,#FF5400 24%,#FF2445 48%,#7A2170 78%,#000979 100%);
}
.post--featured .post__media{flex:0 0 var(--media-w);height:100%;transition:flex-basis .5s var(--ease)}
.post--featured .post__body{flex:1;justify-content:center;padding:clamp(1.25rem,2.23vw,3.5625rem);gap:clamp(.9rem,1.4vw,2.25rem)}

.post__media{flex:none;aspect-ratio:1/1;overflow:hidden;background:var(--grad-placeholder)}
.post__media img{width:100%;height:100%;object-fit:cover;background:var(--grad-placeholder)}
/* Measured @ 2560: 36px padding, kicker 15px (cap 11), title 21px / 29px line,
   excerpt at the 18px body size on a 30px line. */
/* Small-card content sits to the top of the card, not centred — a centred
   block drifted as soon as titles ran to different line counts. */
.post__body{padding:clamp(1rem,1.41vw,2.25rem);display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(.6rem,.86vw,1.375rem);flex:1;min-height:0}
/* The rule is an inline pseudo-element rather than a flex sibling. As a flex
   item it got vertically centred beside the label, so a two-word category
   left it floating out to the right; inline, it simply follows the last word. */
.post__kicker{
  display:block;font-size:var(--fs-kicker);font-weight:700;
  letter-spacing:var(--ls-label);line-height:1.35;text-transform:uppercase;color:var(--indigo);
}
.post__kicker::after{
  content:'';display:inline-block;vertical-align:middle;
  width:clamp(20px,1.09vw,28px);height:2px;margin-left:.75em;
  background:linear-gradient(90deg,var(--indigo),var(--active-orange));
}

/* Cards are a fixed 452px, so titles have to be clamped rather than left to
   overflow — the comp does exactly this, which is why its fourth card reads
   "Optimizely Commerce…". Real article titles run longer than the comp's
   placeholder, so without this they were being sliced mid-line. */
.post__title{
  font-family:var(--font-display);font-size:var(--fs-post-title);line-height:1.38;
  font-weight:400;color:var(--indigo);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
}
.post--featured .post__title{-webkit-line-clamp:3}
.post__excerpt{
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}

/* Controls: index badge · rail · prev · next, all on a 32px baseline. */
.carousel-ctrl{display:flex;align-items:center;gap:clamp(.75rem,1.13vw,1.8125rem);margin-top:clamp(1.25rem,2.1vw,3.375rem)}
.carousel-index{
  flex:none;display:grid;place-items:center;width:clamp(28px,1.25vw,32px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--active-orange);color:var(--active-orange);
  font-size:clamp(.625rem,.43vw,.6875rem);font-weight:700;letter-spacing:.02em;
}
.carousel-btn{width:clamp(28px,1.25vw,32px);aspect-ratio:1;border-radius:50%;border:1px solid var(--active-orange);color:var(--active-orange);display:grid;place-items:center;transition:background .25s,color .25s,opacity .25s;position:relative}
/* The visible circle stays 28–32px to match the comp, but the pointer target
   is padded out to the 44px minimum via an invisible overlay. */
.carousel-btn::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.carousel-btn:hover{background:var(--active-orange);color:#fff}
.carousel-btn[disabled]{opacity:.3;cursor:default}
.carousel-btn[disabled]:hover{background:none;color:var(--active-orange)}
.carousel-btn svg{width:42%;height:42%;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.carousel-rail{position:relative;flex:none;width:clamp(120px,13.75vw,22rem);height:2px;background:rgba(13,11,46,.14);overflow:hidden}
.carousel-rail__thumb{position:absolute;inset:0 auto 0 0;width:14%;background:var(--active-orange);transition:transform .3s var(--ease)}

/* ==========================================================================
   16. CLOSING CTA
   ========================================================================== */
.cta-band{background:var(--bg);padding-block:clamp(3.5rem,6vw,8rem);text-align:center}
.cta-band__inner{display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,1.6vw,2rem);max-width:64ch;margin-inline:auto}
.cta-band__title{font-family:var(--font-display);font-size:var(--fs-h3);line-height:var(--lh-heading);font-weight:400;color:var(--indigo)}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
/* ---- Measured from the Home 2026 footer frame (2552px capture ≈ 1:1) ----
   height 577 · 3px gradient rule on top · 120px side padding
   logo 336×85 at y147 · socials 28px circles on a 102px pitch at y518
   link columns start 1555 / 1745 / 1935 / 2124 / 2266  (190px pitch, then 142)
   column title 19px #FFF at y147 · links 18px #F1F1F4 on a 36px pitch
   copyright 14px #D5D4DF at y535, left-aligned to the Services column      */
/* The "N" watermark is the production asset, not an upscaled logo: a 1089×525
   SVG with its 0.1 opacity baked in, anchored to the right edge 40px from the
   top — exactly how nishtech.com sets it. Vector, so it stays sharp at 2560. */
.footer{
  position:relative;color:#fff;overflow:hidden;
  min-height:22.54vw;                       /* 577 @ 2560 */
  padding:clamp(2.5rem,5.47vw,8.75rem) clamp(1.5rem,4.69vw,7.5rem) clamp(1.25rem,1.21vw,1.9375rem);
  /* The mark is anchored right, 40px down, as on nishtech.com — but sized to
     the footer instead of left at its natural 1089×525. The live footer is a
     fixed height so the natural size fits; ours scales with the viewport, so
     a fixed-size mark gets sliced off at anything under ~2500px wide. */
  background-color:var(--indigo);
  background-image:url('https://www.nishtech.com/images/footer-background.svg');
  background-repeat:no-repeat;
  background-position:right 40px;
  background-size:auto calc(100% - 40px);
}
/* The brand gradient runs along the top edge of the footer itself. */
.footer__gbar{position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-line);z-index:2}

.footer__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,4vw,6rem);align-items:stretch}
.footer__brand{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(2rem,6vw,10rem)}
/* footer-logo.svg is natively 336×87 — the exact size measured in the comp. */
.footer__logo img{width:clamp(160px,13.13vw,21rem);aspect-ratio:336/87;height:auto}

.footer__nav{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(2rem,5vw,8rem)}
/* Column pitch taken straight off the comp; max-content is the floor so the
   columns can never clip their own links at smaller viewports. */
.footer__cols{
  display:grid;
  grid-template-columns:
    minmax(max-content,7.42vw)
    minmax(max-content,7.42vw)
    minmax(max-content,7.38vw)
    minmax(max-content,5.55vw)
    max-content;
  gap:clamp(1.25rem,0vw,0px) clamp(1.25rem,.5vw,1rem);
}
.footer__col-title{display:block;width:100%;text-align:left;cursor:default;font-size:clamp(.9375rem,.742vw,1.1875rem);font-weight:700;color:#fff;margin-bottom:clamp(.9rem,1.13vw,1.8125rem)}
.footer__col li + li{margin-top:clamp(.5rem,.56vw,.9rem)}
/* Footer links keep their colour and gain the same wipe-in underline as the
   CTA links, rather than switching to amber. */
.footer__col a{position:relative;display:inline-block;font-size:var(--fs-body);line-height:1.2;color:rgba(255,255,255,.94)}
.footer__col a::after{
  content:'';position:absolute;left:0;bottom:-4px;width:100%;height:2px;
  background:var(--grad-underline);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.footer__col a:hover::after,
.footer__col a:focus-visible::after{transform:scaleX(1)}
.footer__contact li{display:flex;align-items:center;gap:.6em}
.footer__contact svg{width:1em;height:1em;flex:none;stroke:currentColor;stroke-width:1.8;fill:none;opacity:.8}

.socials{display:flex;gap:clamp(1rem,2.89vw,4.625rem)}   /* 102px pitch @ 2560 */
/* Two-class selector so it actually beats `.socials` above — the mobile copy
   must stay hidden on desktop, otherwise it renders a second row of icons
   inside the link column and stretches the footer. */
.socials.socials--mobile{display:none}
.socials a{width:clamp(26px,1.09vw,28px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;transition:background .25s}
.socials a:hover{background:var(--active-orange)}
.socials svg{width:50%;height:50%;fill:currentColor}

.footer__legal{display:flex;gap:1.5rem;font-size:clamp(.6875rem,.547vw,.875rem);color:rgba(255,255,255,.78)}
.footer__legal a:hover{color:var(--amber)}

/* ==========================================================================
   18. BREAKPOINTS — 2560 · 1920 · 1440 · 1024 · 768 · 375
   ========================================================================== */
@media (max-width:1439.98px){
  .cover-content{max-width:none}
  .cover-sub{max-width:46ch}
}

@media (max-width:1199.98px){
  .industries__grid{grid-template-columns:repeat(3,1fr)}
  .offerings__list{--row-l:4vw;--row-r:4vw}
  .offer__panel{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2rem;padding-inline:4vw}
  .offer__panel-desc{max-width:none}
  .offer__panel .chips{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .nav-links{gap:1rem}
  .nav-links>li>a{font-size:12px}
}

/* --- ≤1023: nav collapses into a drawer --------------------------------- */
@media (max-width:1023.98px){
  .nav-toggle{display:flex;order:3}
  .nav-cta{display:none}
  .nav-links{
    position:fixed;inset:calc(var(--nav-top) + var(--nav-h)) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;padding:.5rem var(--gutter) 2rem;
    max-height:calc(100dvh - var(--nav-h) - var(--nav-top));overflow-y:auto;
    transform:translateY(-120%);transition:transform .35s var(--ease);
    box-shadow:0 24px 60px rgba(13,11,46,.18);
  }
  .nav-links[data-open="true"]{transform:none}
  .nav-links>li{border-bottom:1px solid var(--border)}
  .nav-links>li>a{width:100%;justify-content:space-between;padding:1rem 0;color:var(--indigo)!important;font-size:13px}
  .nav-links>li>a::after{display:none}
  .has-mega.open>a .mega-caret{transform:rotate(180deg)}
  .mega-panel{position:static;display:none;opacity:1;visibility:visible;pointer-events:auto;transform:none;box-shadow:none;background:var(--bg);border-radius:var(--r-md);margin-bottom:1rem}
  .has-mega.open .mega-panel{display:block}
  .mega-inner{padding:1rem}
  .mega-grid{grid-template-columns:1fr;gap:4px}
  .mega-item{padding:12px}
  .mega-item-desc{display:none}
  .mega-item-arrow{width:32px;height:32px}

  .cover{min-height:auto;padding-block:calc(var(--nav-h) + 60px) 90px}
  .cover-content{max-width:100%}
  .cover h1{font-size:clamp(2.25rem,7vw,3.5rem)}
  .hero-br{display:none}
  .cover-sub{margin-bottom:2.25rem}
  .scroll-hint{display:none}

  .statbar__grid{grid-template-columns:repeat(2,1fr)}
  .statbar__item:nth-child(odd){border-left:0}
  .statbar__item:nth-child(n+3){border-top:1px solid var(--border)}

  .intro__grid,.why__grid{grid-template-columns:1fr;gap:2rem}
  .work__grid{grid-template-columns:repeat(2,1fr)}
  .industries__grid{grid-template-columns:repeat(2,1fr)}
  .offerings__list{--row-l:0vw;--row-r:0vw}
  .offer__panel{grid-template-columns:1fr;gap:1.5rem;padding:1.5rem}
  .offer__panel .chips{flex-direction:row;flex-wrap:wrap}
  .chip{white-space:normal}
  .why__grid{padding-right:0}
  .why__stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
  .post{height:auto;min-height:clamp(320px,42vw,26rem)}
  .post--featured{flex:0 0 86%;flex-direction:column;padding-right:0}
  .post--featured::after{inset:auto 0 0 0;width:auto;height:6px;background:linear-gradient(90deg,#FF7800,#FF2445 48%,#000979)}
  .post--featured{--media-w:46%}
  .post--featured:hover{--media-w:46%}
  .post--featured .post__media{flex:0 0 var(--media-w);width:100%}
  .post--featured .post__body{padding:1.25rem}
  .footer{min-height:0}
  .footer__inner{grid-template-columns:1fr;gap:2.5rem}
  .footer__brand{flex-direction:row;align-items:center;justify-content:space-between;gap:1.5rem}
  .footer__nav{gap:2rem}
  .footer__cols{grid-template-columns:repeat(3,minmax(max-content,1fr));gap:2rem 1.5rem}
  /* nishtech.com ships a separate 670×536 mobile watermark and only applies
     the 1089×525 desktop one above 1024 — scaling the desktop asset down
     here is what was breaking the mark. */
  .footer{
    background-image:url('https://www.nishtech.com/images/footer-background-mobile.svg');
    background-position:-105px 40px;
    background-size:auto calc(100% - 40px);
  }
}

/* --- ≤767: single column -------------------------------------------------- */
@media (max-width:767.98px){
  :root{--nav-top:8px;--logo-w:8.75rem}
  .sec-head{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .work__grid{grid-template-columns:1fr;gap:1.25rem}
  .work-card{aspect-ratio:3/2}
  .industries__grid{
    grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    gap:1rem;margin-inline:calc(var(--rail-pad)*-1);padding-inline:var(--rail-pad);
  }
  .industries__grid::-webkit-scrollbar{display:none}
  .ind-card{scroll-snap-align:start}
  .why__stats{grid-template-columns:1fr}
  .why__stats{grid-template-columns:minmax(0,1fr)}
  .post{flex:0 0 80%}
  /* Small screens keep a swipeable row alongside the arrows. */
  .insights__track{-webkit-mask-image:none;mask-image:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .post{scroll-snap-align:start}
  /* ---- Mobile footer: accordion groups, as on nishtech.com ---- */
  .footer{padding-block:2.5rem 1.5rem}
  .footer__brand{flex-direction:column;align-items:flex-start;gap:1.75rem}
  .footer__brand .socials{display:none}          /* socials move below the accordion */
  .footer__cols{display:block}
  .footer__col{border-bottom:1px solid rgba(255,255,255,.45)}
  .footer__col-title{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    padding:1.05rem 0;margin:0;font-size:1.25rem;line-height:1.2;font-weight:700;text-align:left;
  }
  .footer__col-title{cursor:pointer}
  .footer__col-title::after{
    content:'';width:27px;height:27px;flex:none;border-radius:50%;
    border:1px solid rgba(255,255,255,.55);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/11px 11px no-repeat;
    transition:transform .3s var(--ease);
  }
  .footer__col[data-open="true"] .footer__col-title::after{transform:rotate(45deg)}
  .footer__col-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
  .footer__col-panel > ul{overflow:hidden}
  .footer__col[data-open="true"] .footer__col-panel{grid-template-rows:1fr}
  .footer__col-panel ul{padding-bottom:.25rem}

  .footer__nav{gap:1.75rem}
  .socials.socials--mobile{display:flex;justify-content:center;gap:1.25rem}
  .footer__legal{flex-direction:column;align-items:center;gap:.4rem;text-align:center}
}

@media (max-width:400px){
  .cover-btns .btn-fill,.cover-btns .btn-outline{width:100%;justify-content:center}
  .statbar__grid{grid-template-columns:1fr}
  .statbar__item{border-left:0;border-top:1px solid var(--border)}
  .statbar__item:first-child{border-top:0}
  .footer__cols{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}