/* ============================================================
   nn-custom.css — Neel Networks homepage & UI additions
   ------------------------------------------------------------
   Kept OUT of nn.css on purpose. nn.css is edited by several
   people and has been overwritten more than once, taking these
   rules with it. Everything here is scoped by selectors that
   only exist where they apply, so the file is inert elsewhere.
   Loaded once from inc/head.php, after nn.css.
   ============================================================ */

/* =========================================================
   Bold pillar bands
   Each of Advise / Build / Grow takes the colour its own
   wordmark used to be, and the type flips to suit. The three
   colours and their text treatments are the site's existing
   .card:nth-child(1..3) pattern, scaled up to full sections.
   ========================================================= */

/* ---------- ADVISE — amber band, dark ink ---------- */
.p-advise .mega{color:var(--navy)}
.p-advise .h2{color:#181203}
.p-advise .lead{color:#3D2C05}
.p-advise .link-u{color:var(--navy)}
.p-advise .link-u:hover{color:#181203}

/* the ladder cards sat on white; on amber they become white cards */
.p-advise .step{background:#fff;box-shadow:0 18px 40px -28px rgba(80,52,0,.55)}
.p-advise .step:hover{background:#FFFBF2}
.p-advise .step .n{background:var(--amber);color:#181203}
/* the fourth step was amber-on-white, which disappears on an amber band */
.p-advise .step:nth-child(4){background:var(--navy)}
.p-advise .step:nth-child(4) h4{color:#fff}
.p-advise .step:nth-child(4) p{color:var(--on-dark)}
.p-advise .step:nth-child(4) .n{background:var(--amber);color:#181203}

/* ---------- BUILD — blue band, white type ---------- */
.p-build .mega{color:#fff}
.p-build .h2{color:#fff}
.p-build .lead{color:rgba(255,255,255,.88)}
.p-build .link-u{color:var(--amber)}
.p-build .link-u:hover{color:#fff}

/* ---------- GROW — navy band, white type ---------- */
.p-grow .mega{color:#fff}
.p-grow .h2{color:#fff}
.p-grow .lead{color:rgba(255,255,255,.88)}
.p-grow .link-u{color:var(--amber)}
.p-grow .link-u:hover{color:#fff}
.p-grow .grow-tags{color:rgba(255,255,255,.62)}

/* the chain cards keep their own tints, which read well on navy */
.p-grow .funnel .bar{box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}

/* A softer amber than the brand swatch: #FAA31F is pitched for small
   accents and glares at full-section size. Each band gets a gentle corner
   light and the site's dot grid so it reads as a surface, not a slab. */
.p-advise{
  background-color:#DE9414;
  background-image:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,.20), transparent 58%),
    radial-gradient(circle at 88% 88%, rgba(120,66,0,.16), transparent 55%),
    radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px);
  background-size:auto, auto, 26px 26px;
}
.p-build{
  background-color:#055A8C;
  background-image:
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.12), transparent 58%),
    radial-gradient(circle at 10% 90%, rgba(0,20,40,.22), transparent 55%),
    radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:auto, auto, 26px 26px;
}
.p-grow{
  background-color:#212A56;
  background-image:
    radial-gradient(circle at 18% 16%, rgba(120,150,230,.18), transparent 58%),
    radial-gradient(circle at 86% 86%, rgba(250,163,31,.10), transparent 55%),
    radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:auto, auto, 26px 26px;
}


/* =========================================================
   PILLAR STACK — Advise, Build and Grow deal one over another
   Pure position:sticky, so the browser drives it: the scrollbar
   behaves normally and nothing is scroll-jacked. Without it the
   three simply stack in order, exactly as they do now.
   ========================================================= */

/* `overflow-x:hidden` on body turns it into a scroll container, which
   stops sticky resolving against the viewport. `clip` does the same job
   of hiding sideways overflow without creating that container. */
@supports (overflow-x:clip){ body{overflow-x:clip} }

.pillar-stack{position:relative}

@media (min-width:901px) and (min-height:700px){
  .pillar-stack > section{
    position:sticky;
    top:0;
    min-height:100svh;
    display:flex;
    align-items:center;
    padding-top:clamp(40px,6vh,84px);
    padding-bottom:clamp(40px,6vh,84px);
    /* a soft lip on the top edge so each panel reads as laid over the last */
    box-shadow:0 -26px 60px -34px rgba(0,0,0,.55);
  }
  .pillar-stack > section > .w{width:100%}

  /* the first panel has nothing beneath it to cast onto */
  .pillar-stack > section:first-child{box-shadow:none}
}

/* anyone who asks for less movement gets the plain stacked layout */
@media (prefers-reduced-motion:reduce){
  .pillar-stack > section{position:static;min-height:0;box-shadow:none}
}

/* the statement band is panel one of the stack */
@media (min-width:901px) and (min-height:700px){
  .pillar-stack > .statement{text-align:center}
  .pillar-stack > .statement > .w{width:100%}
}

/* the ring holds the mark itself rather than the three words */
.ring-center .ring-mark{width:40%;height:auto;display:block}
@media (max-width:900px){ .ring-center .ring-mark{width:44%} }

/* =========================================================
   TESTIMONIAL RAIL — 15 / 60 / 15
   The active review takes ~60% of the rail, leaving ~15% of a
   neighbour either side. It must be an absolute length: a
   percentage flex-basis resolves against the track's already
   padded content box and compounds down to about a third.
   The blur/opacity on the inactive slides is nn.css's own.
   ========================================================= */
.tm-slider{--tmw:min(60vw,780px)}
/* this file loads after nn.css, so it has to carry nn.css's narrow-screen
   width forward as well, or phones would be left on the 60vw figure */
@media (max-width:640px){ .tm-slider{--tmw:82vw} }

/* the rail is driven by two arrows now, and nothing else */
.tm-bar{display:flex;align-items:center;justify-content:center;gap:20px}
.tm-bar .cs-count{min-width:5ch;text-align:center}


/* =========================================================
   MOBILE NAVIGATION
   The panel is position:fixed, so anything past the fold could
   not be reached by scrolling the page. Cap it to the space
   under the header and let it scroll itself. svh keeps it clear
   of the mobile browser chrome.
   ========================================================= */
@media (max-width:1040px){
  .hdr-nav{
    max-height:calc(100vh - var(--head-h));
    max-height:calc(100svh - var(--head-h));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    box-shadow:0 24px 40px -28px rgba(20,26,56,.45);
  }
  /* the chat button sits at z-index 95, above the header's 90, so it
     floats over the open menu. Stand it down rather than start a
     z-index contest. */
  body.nav-open .chat-fab{display:none}
}


/* =========================================================
   "One partner / Three strengths / One connected journey"
   One line per pillar, in the pillar's own colour, so the
   heading reads as Advise, Build and Grow without saying so.
   The amber is a step deeper than the band's #DE9414: on the
   pale grey of this section the band tone drops to about
   2.1:1 and the line goes soft, while this holds 3.3:1.
   nn.css colours every span in here blue, hence the classes.
   ========================================================= */
.loop .h2 .ln-advise{color:#B5730A}
.loop .h2 .ln-build { color:#055A8C}
.loop .h2 .ln-grow  { color:var(--navy)}


/* =========================================================
   HERO — unstretched photo, moved across, grey behind the words

   1. The supplied hero-team.webp is stretched about 19% across.
      Measured, not guessed: the NN mark on the wall comes out
      1.245 wide to tall where the real mark (inc/logo-mark.php
      and logo-neel.webp) is 1.05, and squeezing the file back
      to 84.2% also puts the faces exactly on the proportions of
      the untouched portrait crop used on phones. v2 is that
      corrected file, 1575x841. The original is left in place.
      Being narrower, it also sits further right on its own.
   2. The wash behind the wording is plain grey, not pale blue.

   3. Grey holds the first fifth of the hero and the picture runs
      across the rest, fogging in gently underneath the wording.
   ========================================================= */
:root{ --hero-bg:#ECEEF2; }
.hero{ background:var(--hero-bg) }

@media (min-width:901px){
  .hero-photo{
    /* Grey holds only the first fifth; the picture runs across the other
       four. The wording now sits over the picture, so the fog has to
       carry it: it stays mostly grey behind the words and only lets go
       once they have ended. --fog is how far that handover reaches,
       measured from where the picture starts. */
    left:14%;
    --fog:46vw;
    background-image:url('../img/hero-team-v2.webp');
    /* 88%, not hard right: a right anchor clips the wall logo on the
       narrower windows. This keeps it whole from 901 to 3440. */
    background-position:88% center;
    background-size:cover;
  }
  /* The hero type is sized in vmin, so a taller window makes it wider and
     the fog has to hold on for longer before it clears. */
  @media (min-height:1000px){ .hero-photo{ --fog:54vw } }
  @media (min-height:1250px){ .hero-photo{ --fog:62vw } }

  .hero-photo::after{
    background:linear-gradient(90deg,
      var(--hero-bg)         0,
      rgba(236,238,242,.970) calc(var(--fog) * .17),
      rgba(236,238,242,.920) calc(var(--fog) * .30),
      rgba(236,238,242,.850) calc(var(--fog) * .40),
      rgba(236,238,242,.740) calc(var(--fog) * .49),
      rgba(236,238,242,.580) calc(var(--fog) * .57),
      rgba(236,238,242,.400) calc(var(--fog) * .66),
      rgba(236,238,242,.240) calc(var(--fog) * .74),
      rgba(236,238,242,.120) calc(var(--fog) * .83),
      rgba(236,238,242,.040) calc(var(--fog) * .91),
      rgba(236,238,242,0)    var(--fog));
  }
}

@media (max-width:900px){
  /* the portrait crop is already true to life; it just needs to fade
     into the new grey instead of the old blue */
  .hero-photo::after{
    background:linear-gradient(180deg,
      rgba(236,238,242,0) 55%, rgba(236,238,242,.75) 82%, var(--hero-bg) 100%);
  }
}


/* =========================================================
   HERO — wording carries the top of the page now

   The logo pill is dropped while the hero is on screen: the
   same logo is on the wall in the photograph, so showing both
   says it twice. It comes back on its own as soon as the page
   scrolls, when .hdr gains .full and the fixed menu appears.
   On phones the photograph is off, so the pill stays — there
   is no logo on a wall there to stand in for it.
   ========================================================= */
@media (min-width:901px){
  .hdr:not(.full) .brand{
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s var(--ease), visibility .3s var(--ease);
  }
}

/* The company line. It is the page's h1, so it is set as a real
   sub-headline under the slogan rather than the cramped three lines of
   tracked capitals it was before: sentence case, bigger, its own space. */
.hero .hero-tag{
  display:block;
  color:#005182;
  font-size:clamp(1.22rem,2.95vmin,2.25rem);
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.26;
  text-transform:none;
  max-width:70%;   /* breaks as 'Business & Technology / Consulting in India' */
  margin:clamp(12px,2.2vmin,24px) 0 clamp(12px,2.2vmin,22px);
}

/* the paragraph fills the hero now that the buttons have gone */
.hero p.lead{ max-width:52ch }

@media (max-width:900px){
  /* phones get the wording on plain grey, with no photograph at all */
  .hero-photo{ display:none }
  .hero p.lead{ max-width:none }
  /* without the photograph the hero no longer needs a full screen of
     height, which would otherwise leave a stretch of empty grey */
  .hero{ min-height:0; padding-bottom:clamp(30px,8vw,54px) }
}


/* The statement's amber bar sits on one highlighted phrase. If that phrase
   is allowed to wrap, the bar breaks into two pieces with one of them
   stranded mid-line, so the phrase is kept whole and wraps as a unit. */
.statement .h1 .hl{ white-space:nowrap }


/* =========================================================
   OUR CLIENTS — two rails drifting in opposite directions

   The logos keep their own colours and nothing happens on hover:
   no lift, no border change, no pause. The white rounded box is
   the one the grid already used, carried over unchanged.

   The track carries its set twice and slides exactly -50%, so it
   lands back where it started. That only works if every item is
   the same total width, so the spacing is a margin on the item
   and NOT a flex gap — a gap would leave the halves uneven by
   half a gap and the loop would jump.
   ========================================================= */
.logo-rails{
  --logo-w:clamp(124px,12.5vw,166px);
  --logo-gap:14px;
  display:grid; gap:var(--logo-gap);
  margin-bottom:clamp(22px,3vw,32px);
}
.logo-rail{
  overflow:hidden;
  /* so logos do not appear out of nothing at the two ends */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.logo-track{
  display:flex; width:max-content;
  animation:logo-drift 90s linear infinite;
  will-change:transform;
}
.logo-track.rev{ animation-direction:reverse }

/* The slide is one whole set, worked out from the same two numbers that
   size the items (--n is the rail's own count, printed by the page), not
   from a percentage of the track. Measured, the track's max-content width
   can come out tens of pixels wider than its items actually occupy, and a
   -50% built on that lands short and the loop visibly jumps. */
@keyframes logo-drift{
  to{ transform:translateX(calc(var(--n) * -1 * (var(--logo-w) + var(--logo-gap)))) }
}

.logo-track > span{
  flex:0 0 auto;
  width:var(--logo-w);
  margin-right:var(--logo-gap);
  display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--line);
  border-radius:16px; padding:20px 18px; min-height:96px;
}
.logo-track img{
  max-width:100%; max-height:66px; width:auto; height:auto;
  object-fit:contain;
  filter:none; opacity:1;        /* their own colours, as supplied */
}

@media (max-width:640px){
  .logo-rails{ --logo-w:clamp(104px,30vw,128px); --logo-gap:10px }
  .logo-track > span{ min-height:74px; padding:14px 12px }
  .logo-track img{ max-height:34px }
}

@media (prefers-reduced-motion:reduce){
  .logo-track{ animation:none }
}


/* =========================================================
   BUSINESS HEALTH CHECK band

   Sits between the white "problem to possibility" section and the
   grey "our system" one, so it is given the navy treatment to carry
   weight between the two light bands either side of it. The texture
   is the same recipe as the pillar bands: two soft washes plus the
   fine dot grid, so it belongs to the rest of the page.
   The link is NN_HEALTH, the constant the other health-check buttons
   already use, rather than the address written out again.
   ========================================================= */
.bhc{
  background-color:var(--navy);
  background-image:
    radial-gradient(circle at 12% 16%, rgba(250,163,31,.17), transparent 55%),
    radial-gradient(circle at 88% 84%, rgba(0,81,130,.45), transparent 58%),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:auto, auto, 24px 24px;
  color:#fff;
  padding:clamp(52px,7vw,96px) 0;
  overflow:hidden;
}
.bhc-grid{
  display:grid; grid-template-columns:1.0fr 1.0fr;
  gap:clamp(30px,5vw,30px); align-items:center;
}
.bhc .eyebrow{ color:var(--amber) }
.bhc .h2{ color:#fff; margin:16px 0 0; max-width:16ch }
.bhc .lead{ color:var(--on-dark); margin-top:18px; max-width:54ch }
.bhc-btn{ margin-top:clamp(20px,2.6vw,30px) }
.bhc-note{ margin-top:14px; font-size:.84rem; color:var(--dim-dark) }

.bhc-facts{ list-style:none; display:grid; gap:12px; margin:0; padding:0 }
.bhc-facts li{
  display:flex; align-items:baseline; gap:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:18px 22px;
}
.bhc-facts b{
  flex:none; line-height:1; color:var(--amber); font-weight:900;
  font-size:clamp(1.45rem,3.2vmin,2.05rem);
}
.bhc-facts b em{ font-size:.46em; font-weight:800; margin-left:.18em }
.bhc-facts span{ font-size:.95rem; line-height:1.35; color:var(--on-dark) }
.bhc-facts .bhc-facts-note{
  display:block; background:none; border:0; padding:2px 4px 0;
  font-size:.84rem; line-height:1.5; color:var(--dim-dark);
}

@media (max-width:900px){
  .bhc-grid{ grid-template-columns:1fr }
  .bhc .h2{ max-width:none }
}

/* =========================================================
   PORTFOLIO — selected projects and the request form
   Each screenshot sits in a browser frame showing the real
   address, so the card reads as a live site rather than a
   picture. No ratings or result claims: we have no figures
   to stand behind, so none are shown.
   ========================================================= */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(26px,3.4vw,42px)}
.pf-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pf-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -32px rgba(20,26,56,.55)}

/* the browser frame */
.pf-screen{background:#EEF1F6;border-bottom:1px solid var(--line)}
.pf-chrome{display:flex;align-items:center;gap:10px;padding:8px 12px}
.pf-dots{display:flex;gap:5px;flex:none}
.pf-dots i{width:9px;height:9px;border-radius:50%;display:block}
.pf-dots i:nth-child(1){background:#F05B52}
.pf-dots i:nth-child(2){background:#F6BD3B}
.pf-dots i:nth-child(3){background:#5BC45B}
.pf-addr{flex:1;background:#fff;border:1px solid #E1E6EF;border-radius:999px;padding:3px 12px;
  font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#F2F4F8}
.pf-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.pf-cat{position:absolute;top:11px;left:11px;font-size:.68rem;font-weight:800;letter-spacing:.04em;
  color:#fff;background:var(--blue);border-radius:999px;padding:4px 11px;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}

.pf-body{padding:16px 20px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.pf-tech{display:flex;flex-wrap:wrap;gap:6px}
.pf-tech span{font-size:.68rem;font-weight:700;color:var(--muted);background:var(--sand);
  border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.pf-card h3{font-size:1.04rem;letter-spacing:-.015em;color:var(--navy);margin:0;line-height:1.3}
.pf-body p{font-size:.9rem;line-height:1.55;color:var(--body);margin:0}
.pf-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.pf-visit{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:800;
  color:var(--blue);text-decoration:none}
.pf-visit svg{width:13px;height:13px}
.pf-visit:hover{text-decoration:underline}
.pf-ind{font-size:.74rem;color:var(--muted);text-align:right;line-height:1.3}

/* the request form */
.pf-ask{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.pf-form{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,30px)}
.pf-form .field{margin-bottom:15px}
.pf-form label{display:block;font-weight:700;font-size:.85rem;color:var(--navy);margin-bottom:6px}
.pf-form input,.pf-form select{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;font:inherit;background:#fff;color:var(--ink)}
.pf-form input:focus,.pf-form select:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.pf-send{width:100%;justify-content:center;margin-top:4px}
.pf-note{font-size:.78rem;color:var(--muted);margin-top:12px;line-height:1.5}
.pf-done{grid-column:1/-1;text-align:center;padding:clamp(20px,4vw,42px) 0}
.pf-tick{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:#E7F7ED;color:#136C34;margin-bottom:16px}
.pf-tick svg{width:26px;height:26px}
.pf-done .sub{max-width:52ch;margin:10px auto 0}

@media (max-width:1000px){ .pf-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){ .pf-ask{grid-template-columns:1fr} }
@media (max-width:620px){ .pf-grid{grid-template-columns:1fr} }

/* =========================================================
   The floating "Chat with Neel" button, hidden for now.

   Hidden rather than removed: inc/chat.php and the panel it
   opens are untouched, so bringing it back is a matter of
   deleting the rule below. The panel can still be opened from
   anything carrying data-chat-open, so nothing else breaks.
   ========================================================= */
.chat-fab{ display:none !important }

/* =========================================================
   Blog only: let the full-width bands be full width.

   The theme's sidebar column is float:left and escapes its
   container, so the closing band and the footer were flowing
   beside it at roughly two thirds width. Clearing the float
   is the smallest honest fix; the theme's own div nesting is
   the real cause and is left for whoever owns that template.
   Scoped to the blog body class so the rest of the site,
   which has no floats here, is untouched.
   ========================================================= */
body.wp-theme-neelnetworks .cta-band,
body.wp-theme-neelnetworks .ft{ clear:both }