/* ==========================================================================
   Nishtech 2026 — LANDING TEMPLATE
   --------------------------------------------------------------------------
   Loads alongside main-2026.css, which supplies the tokens, header, insights
   and footer. Everything here is landing-only: the light header variant, the
   hero, the tab strip and the feature panel.

   Serves Services / Platforms / Industries / Products. Nothing below is
   Services-specific — the copy lives in the data file.

   MEASUREMENT BASIS
   The comp frame is labelled in Figma as "Desktop XL 2560 x 1440 --use 1920
   container--" and reports 2560 × 3057. Every number below was pixel-measured
   off that frame and expressed as a vw fraction of 2560.

   The scale was anchored on the tab strip rather than on font guesses: six
   tab columns measured 319.4px each, ×6 = 1916 ≈ the stated 1920 container.
   That gives a hard px-per-design-px factor, cross-checked against the shared
   nav (12.5px, cap height 9px) which came out at 12.9px — inside antialiasing
   tolerance. Sizes marked ✓ below are measured, not inferred.

   NOTE: the landing runs a LARGER body size than the homepage — 22px against
   18px. That is not a mistake; it was measured independently in the hero
   paragraph and again in the panel copy, and both came out at 22 / 29.8.
   ========================================================================== */

:root{
  /* --- Landing type scale (measured @2560, see header) ------------------- */
  --lp-fs-h1:      clamp(2.5rem,  3.047vw, 4.875rem);  /* 40 → 78  ✓ cap 54.2 */
  --lp-fs-display: clamp(1.75rem, 2.031vw, 3.25rem);   /* 28 → 52  ✓ hero lede + panel title */
  --lp-fs-tab:     clamp(1.125rem,1.172vw, 1.875rem);  /* 18 → 30  ✓ */
  --lp-fs-body:    clamp(1rem,     .859vw, 1.375rem);  /* 16 → 22  ✓ */
  --lp-fs-eyebrow: clamp(.75rem,   .781vw, 1.25rem);   /* 12 → 20  ✓ panel only */

  --lp-lh-body:    1.35;      /* 22 × 1.35 = 29.7   ✓ measured 29.8 */
  --lp-lh-display: 1.12;      /* 52 × 1.12 = 58.2   ✓ measured 58.3 */

  --lp-measure:    clamp(18rem, 13.09vw, 20.9375rem);  /* 288 → 335 ✓ panel copy */
}


/* ==========================================================================
   1. HEADER — LIGHT VARIANT
   The homepage hero is a dark video, so the header starts transparent with a
   white logo. The landing hero is near-white, so the header needs its solid
   state from the first paint. `.is-solid` mirrors what `.scrolled` does; the
   scroll handler in mainjs-2026.js still adds `.scrolled` on top, which lands
   on the same declarations and is harmless.
   ========================================================================== */
.top-nav.is-solid{
  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);
}
.top-nav.is-solid .logo-color{opacity:1}
.top-nav.is-solid .logo-white{opacity:0}
.top-nav.is-solid .nav-links>li>a{color:var(--indigo)}
.top-nav.is-solid .nav-links>li>a:hover,
.top-nav.is-solid .nav-links>li>a.active{color:var(--active-orange)}
.top-nav.is-solid .nav-cta{border-color:var(--active-orange);color:var(--active-orange)}
.top-nav.is-solid .nav-cta:hover{background:var(--active-orange);color:#fff}
.top-nav.is-solid .nav-toggle{color:var(--indigo)}
/* The gradient rule sits at the top of the page from the start here. */
.gbar.is-static{opacity:1}


/* ==========================================================================
   2. HERO
   ========================================================================== */
.lp-hero{
  position:relative;background:var(--surface);
  padding-block:calc(var(--nav-h) + clamp(2rem,4.7vw,7.5rem)) clamp(2rem,3.9vw,6.25rem);
}
.lp-hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2rem,4vw,6.5rem);align-items:start;
}
.lp-hero__copy{display:flex;flex-direction:column;align-items:flex-start}

/* 78px measured off the cap height of "Services" (54.2 design px ÷ 0.70).
   The homepage --fs-h1 is 106px — reusing it here was the single biggest
   discrepancy against the comp. */
.lp-hero__title{
  font-family:var(--font-display);font-size:var(--lp-fs-h1);line-height:var(--lh-tight);
  font-weight:400;letter-spacing:-.01em;color:var(--indigo);
  margin-top:clamp(.75rem,1.09vw,1.75rem);
}
/* 52px / 58px leading — tight, as drawn. Was --fs-h2 (60px). */
.lp-hero__lede{
  font-family:var(--font-display);font-size:var(--lp-fs-display);
  line-height:var(--lp-lh-display);font-weight:400;color:var(--indigo);
  max-width:clamp(20rem,30.47vw,48.75rem);          /* 780 ✓ wraps to 2 lines */
  margin-top:clamp(1rem,1.4vw,2.25rem);
}
.lp-hero__body{
  font-size:var(--lp-fs-body);line-height:var(--lp-lh-body);color:var(--muted);
  max-width:clamp(20rem,30.94vw,49.5rem);           /* 792 ✓ wraps to 6 lines */
  margin-top:clamp(1.25rem,1.72vw,2.75rem);
}
/* Brand mark — decorative, so it carries an empty alt and is hidden below the
   point where the hero stacks. Measured 210px wide, sitting 147px in from the
   container's right edge rather than flush to it. */
.lp-hero__mark{
  width:clamp(120px,8.2vw,13.125rem);height:auto;
  justify-self:end;margin-inline-end:clamp(0px,5.74vw,9.1875rem);
}


/* ==========================================================================
   3. TAB STRIP
   Six equal columns on the 1920 container — 320px each, which is what fixed
   the scale for this whole file. No rule under the strip in the comp: the
   only line is the active tab's gradient underline.
   ========================================================================== */
/* Columns come from the child count rather than a hard-coded 6 — Services has
   six tabs, Platforms four, Industries five, Products two. auto-flow:column
   gives each page equal columns with no per-page override and no count passed
   through the template. */
.lp-tabs{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
}
.lp-tab{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;
  padding:clamp(.75rem,1.09vw,1.75rem) clamp(.25rem,.5vw,.75rem);
  text-align:center;cursor:pointer;background:none;border:0;
}
.lp-tab__name{
  font-family:var(--font-display);font-size:var(--lp-fs-tab);line-height:1.2;font-weight:400;
  color:var(--indigo);transition:color .25s var(--ease);
}
.lp-tab__for{
  font-size:var(--fs-body);line-height:1.2;color:var(--muted);   /* 18 ✓ */
  transition:color .25s var(--ease);
}
/* Measured: 276.5 wide inside a 319.4 column (86.6%), centred, 3px tall, and
   carrying the full brand gradient — not the flat orange this had before.
   --grad-line is the same ramp as the header rule; sampled #160A76 / #F52C34 /
   #F67705 at 2% / 50% / 98%, which is that gradient inside capture drift. */
.lp-tab::after{
  content:'';position:absolute;bottom:0;height:3px;
  left:6.7%;right:6.7%;                              /* → 86.6% of the column ✓ */
  background:var(--grad-line);
  transform:scaleX(0);transform-origin:center;
  transition:transform .4s var(--ease);
}
.lp-tab:hover .lp-tab__name{color:var(--active-orange)}
.lp-tab[aria-selected="true"] .lp-tab__name{color:var(--indigo)}
.lp-tab[aria-selected="true"]::after{transform:scaleX(1)}


/* ==========================================================================
   4. FEATURE PANEL
   --------------------------------------------------------------------------
   All panels share one grid cell. That does three things at once: hidden
   panels cost no layout, the section height never jumps between tabs, and
   during a transition the outgoing and incoming panels can overlap without
   either being pulled out of flow. [hidden] still does the actual hiding, so
   the state stays in the DOM where assistive tech reads it.
   ========================================================================== */
.lp-panels{
  background:var(--surface);
  display:grid;grid-template-rows:auto auto;
  padding-block:0 clamp(2.5rem,4.3vw,6.875rem);
}
.lp-panels>.container{grid-row:1}
.lp-panel{grid-row:2;grid-column:1;padding-top:clamp(1rem,1.56vw,2.5rem)}  /* 40 ✓ */
.lp-panel[hidden]{display:none}

/* Individual service pages use the same block with no tab strip above it.
   Row 1 has nothing to hold, so collapse it — and restore the breathing room
   the strip used to provide, since the 40px above is a gap under the tabs
   rather than a gap under the hero. */
.lp-panels--single{grid-template-rows:auto}
.lp-panels--single .lp-panel{grid-row:1;padding-top:0}

/* Copy column 715 of 1920 (37.24%); the collage takes the rest and finishes
   flush with the container's right edge. */
.lp-panel__grid{
  display:grid;grid-template-columns:minmax(0,37.24fr) minmax(0,62.76fr);
  align-items:center;
}
/* The copy sits on a deliberately narrow 335px measure and is centred in its
   column — measured 190.6px of slack on the left, 194.4 on the right, which
   is centred to within a pixel and a half at 2560. */
.lp-panel__copy{
  display:flex;flex-direction:column;align-items:flex-start;
  width:100%;max-width:var(--lp-measure);margin-inline:auto;
}
.lp-panel__copy .eyebrow{font-size:var(--lp-fs-eyebrow);text-transform:uppercase}  /* 20 ✓ */
.lp-panel__title{
  font-family:var(--font-display);font-size:var(--lp-fs-display);line-height:1.15;
  font-weight:400;color:var(--indigo);margin-top:clamp(.25rem,.31vw,.5rem);
}
.lp-panel__title .dot{color:var(--accent-title)}
.lp-panel__body{
  font-size:var(--lp-fs-body);line-height:var(--lp-lh-body);color:var(--muted);
  margin-top:clamp(1rem,1.56vw,2.5rem);              /* 40 ✓ */
}
.lp-panel__cta{margin-top:clamp(1rem,1.56vw,2.5rem)} /* 40 ✓ */

/* The shared .btn-outline is built for dark surfaces — white label, orange
   border. On the light landing panels the label has to be orange too, so this
   variant re-colours it without duplicating the geometry. (A --dark modifier
   existed in main-2026.css but was pruned as unused during housekeeping; it
   belongs here, where it's actually needed.) */
.btn-outline--dark{color:var(--active-orange)}
.btn-outline--dark:hover{box-shadow:0 0 10px rgba(250,57,0,.28)}

/* --- Collage ---------------------------------------------------------------
   Corrected structure. This was built as three overlapping photographs; the
   comp is ONE photograph rendered twice — a large washed-out backdrop, and a
   smaller sharp copy overlapping it on the left inside a hairline indigo
   frame. There is no drop shadow, which is why the earlier version read as
   too heavy.

   Box measured 1181 × 694 (1.702). Insets are fractions of that box, so the
   whole composition scales with the column and needs no per-breakpoint maths.
   The backdrop's darkest ink samples #DEDEDE against white, which is ~17%
   over a photo bottoming out near #3A3A3A — hence opacity .18. It also
   samples neutral where the front photo samples warm, so it is desaturated.
   -------------------------------------------------------------------------- */
.lp-collage{position:relative;width:100%;aspect-ratio:1181/694}
.lp-collage img{position:absolute;width:auto;height:auto;object-fit:cover;display:block}
.lp-collage__back{
  inset:0 0 0 12.88%;                                /* ✓ */
  opacity:.18;filter:grayscale(.7);
}
.lp-collage__front{
  inset:17.58% 33.91% 17.48% 0;                      /* ✓ */
  border:1px solid var(--indigo);
}


/* ==========================================================================
   5. BREAKPOINTS
   ========================================================================== */
@media (max-width:1199.98px){
  .lp-tabs{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:0}
  .lp-tab{border-bottom:1px solid var(--border)}
}

@media (max-width:1023.98px){
  .lp-hero__grid{grid-template-columns:1fr;gap:2rem}
  .lp-hero__mark{display:none}          /* decorative; drops out rather than shrinking */
  .lp-hero__lede,.lp-hero__body{max-width:none}
  .lp-panel__grid{grid-template-columns:1fr;gap:2.5rem}
  .lp-panel__copy{max-width:none;margin-inline:0}
  .lp-collage{aspect-ratio:16/10}
}

@media (max-width:767.98px){
  .lp-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-tab{align-items:flex-start;text-align:left}
  .lp-tab::after{left:0;right:0}
  /* Collage collapses to the sharp copy alone; a 18%-opacity backdrop behind
     a small image reads as a printing fault at this width, not as depth. */
  .lp-collage{aspect-ratio:1181/694}
  .lp-collage__back{display:none}
  .lp-collage__front{inset:0}
}

@media (max-width:400px){
  .lp-tabs{grid-template-columns:1fr}
}


/* ==========================================================================
   5b. INDUSTRY PAGES — CAPABILITIES BAND + ROOMY MARQUEE
   --------------------------------------------------------------------------
   Both logo marquees keep the standard dark indigo treatment. They no longer
   sit next to each other: the white capabilities band below separates them,
   which is a better fix than inverting one of them — the two bands make
   different claims (platforms we build on / clients who trust us) and both
   are better served by the same confident dark treatment.
   ========================================================================== */
/* --- Two distinct gradient bands ----------------------------------------
   Both marquees were flat --indigo, which made them read as the same band
   twice. Each now carries its own gradient, drawn from the brand ramp so
   they stay siblings rather than strangers:

     platforms  indigo-deep -> indigo -> a lifted indigo, cool and rising
     clients    indigo -> deep -> #000979, the brand blue that anchors the
                header gradient, so the credibility band sits deeper

   Both stay well under the luminance where white text and white-filtered
   logos start to struggle. */
.partners--platforms{background:linear-gradient(105deg,#0D0B2E 0%,#1E1B56 58%,#2A2570 100%)}
.partners--clients  {background:linear-gradient(105deg,#241F63 0%,#14103F 46%,#000979 100%)}

.caps{background:var(--surface);padding-block:var(--space-section)}
.caps__head{max-width:60ch}
.caps__title{
  font-family:var(--font-display);font-size:var(--lp-fs-display);
  line-height:1.15;font-weight:400;color:var(--indigo);
  margin:clamp(.5rem,.78vw,1.25rem) 0 0;
}
.caps__lede{
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted);
  margin:clamp(.75rem,1.09vw,1.75rem) 0 0;
}
.caps__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,2.34vw,3.75rem);
  margin-top:clamp(2rem,3.1vw,5rem);
}
.caps__item{border-top:2px solid var(--border);padding-top:clamp(1rem,1.25vw,2rem)}
.caps__item h3{
  font-size:var(--fs-card-title);line-height:1.25;font-weight:700;
  color:var(--indigo);margin:0;
}
.caps__item p{
  font-size:var(--fs-small);line-height:var(--lh-body);color:var(--muted);
  margin:.6em 0 0;
}

/* --- Roomier logo band --------------------------------------------------
   Two corrections against the homepage default.

   Spacing: cells widen from 150-280 to 190-352, so marks get real air
   around them instead of sitting shoulder to shoulder.

   Sharpness: the cap drops from 56px to 44px because two of the client
   marks are small rasters — Aspen Dental is 172x31 and TriHealth 180x46,
   and Sitecore's media handler ignores ?w=/?h= without a valid hash, so
   there is no larger source to fetch. At 56px they were being upscaled
   ~1.8x before device pixel ratio doubled it again. Anything still smaller
   than the cap carries its own max-height from the data (`h`), so no raster
   is ever scaled past its native size. Vector marks are unaffected.
   ------------------------------------------------------------------------ */
.logo-marquee--roomy .logo-marquee__set li{flex:0 0 clamp(190px,14vw,22rem)}
.logo-marquee--roomy img{max-height:clamp(26px,1.72vw,2.75rem)}


/* ==========================================================================
   6. TAB TRANSITION
   --------------------------------------------------------------------------
   Deliberately none. Panels swap instantly.

   A directional parallax lived here — copy, collage frame and collage wash
   travelling different distances so the panel arrived with depth. Removed on
   request: the copy and the image want to move independently, and a single
   choreographed sequence is the wrong shape for that.

   What is left in place for whatever replaces it:
     · all panels share one grid cell (see §4), so two can overlap mid-
       transition without either leaving the flow or the section changing height
     · the script still knows the travel direction — it just doesn't publish it

   The underline still animates. That is the tab control responding to a click,
   not the panel transition, and it reads as broken without it.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .lp-tab::after{transition:none}
}