/* ==========================================================================
   NAVKIRTI INFRASERVICES PVT. LTD.
   Premium construction / infrastructure landing page
   Stack: HTML5 + CSS3 + Bootstrap 5 + Vanilla JS
   --------------------------------------------------------------------------
   CONTENTS
   01. Design tokens (colours, type, spacing)  +  IMAGE SOURCES
   02. Base & typography
   03. Reusable pieces (eyebrow, headings, buttons, reveal)
   04. Header / navigation
   05. Hero
   06. Stats strip
   07. About
   08. Services
   09. Projects
   10. Why choose us
   11. Process
   12. Testimonials
   13. CTA band
   14. Contact
   15. Footer + back-to-top
   16. Responsive
   17. Reduced motion / print
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root{

  /* ----------------------------------------------------------------------
     IMAGE SOURCES — CHANGE ALL PHOTOGRAPHY IN THIS BLOCK ONLY
     To use your own pictures, drop them in /images and swap the url(), e.g.
        --img-hero: url("../images/hero.jpg");
     (See images/README-images.txt for recommended sizes.)
     ---------------------------------------------------------------------- */
  --img-hero:      url("https://images.unsplash.com/photo-1644221150186-5d785a471f44?auto=format&fit=crop&w=2400&q=80");
  --img-about:     url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1200&q=80");
  --img-why:       url("https://images.unsplash.com/photo-1599707233265-10accf051fe0?auto=format&fit=crop&w=1400&q=80");
  --img-cta:       url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2400&q=80");
  --img-project-1: url("https://images.unsplash.com/photo-1470075801209-17f9ec0cada6?auto=format&fit=crop&w=1600&q=80");
  --img-project-2: url("https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1200&q=80");
  --img-project-3: url("https://images.unsplash.com/photo-1718635753137-1cef790cbd44?auto=format&fit=crop&w=1600&q=80");
  --img-project-4: url("https://images.unsplash.com/photo-1759310347467-578dfd846229?auto=format&fit=crop&w=1600&q=80");
  --img-project-5: url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1200&q=80");
  --img-project-6: url("https://images.unsplash.com/photo-1593439426324-71b3f44ca9ee?auto=format&fit=crop&w=1600&q=80");
  /* -------------------- END OF IMAGE SOURCES -------------------- */

  /* Brand palette — derived from the Navkirti logo */
  --ink:        #0B0E12;   /* near-black charcoal */
  --brand:      #0B5CA8;   /* logo blue */
  --accent:     #D32B25;   /* logo red — the action colour */
  --bg:         #FFFFFF;
  --bg-alt:     #F4F5F7;
  --body:       #565E6B;
  --body-lt:    rgba(255,255,255,.66);
  --line:       #E4E7EC;
  --line-lt:    rgba(255,255,255,.13);

  /* Type */
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --sy: clamp(58px, 8.5vw, 118px);   /* vertical section padding */
  --ease: cubic-bezier(.16,1,.3,1);
  --r: 2px;                          /* corner radius — deliberately sharp */
}



/* ==========================================================================
   02. BASE & TYPOGRAPHY
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:86px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  color:var(--body);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font);
  color:var(--ink);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.08;
  margin:0;
}

p{ margin:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

::selection{ background:var(--accent); color:#fff; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.nk-skip{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--accent); color:#fff; padding:12px 20px;
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.nk-skip:focus{ left:0; }

@media (min-width:1400px){
  .container{ max-width:1290px; }
}

.nk-section{ padding:var(--sy) 0; }


/* ==========================================================================
   03. REUSABLE PIECES
   ========================================================================== */

/* --- eyebrow label ------------------------------------------------------ */
.nk-eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:22px;
}
.nk-rule{
  display:block; width:40px; height:2px; background:var(--accent); flex:none;
}
.nk-eyebrow--light{ color:#fff; }
.nk-eyebrow--light .nk-rule{ background:var(--accent); }

/* --- headings ----------------------------------------------------------- */
.nk-h2{
  font-size:clamp(2rem, 3.9vw, 3.5rem);
  margin-bottom:24px;
}
.nk-h2--light{ color:#fff; }

.nk-lead{
  font-size:clamp(1.02rem, 1.25vw, 1.15rem);
  line-height:1.75;
  color:#3D4552;
  margin-bottom:20px;
}
.nk-lead--light{ color:var(--body-lt); }
.nk-text{ color:var(--body); margin-bottom:20px; }

/* --- section head (split / centred) ------------------------------------- */
.nk-head{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px 60px;
  align-items:end;
  margin-bottom:clamp(38px,4.6vw,66px);
}
.nk-head .nk-h2{ margin-bottom:0; }
.nk-head__right{ margin-bottom:6px; }
.nk-head--center{
  display:block; text-align:center; max-width:720px; margin-left:auto; margin-right:auto;
}
.nk-head--center .nk-eyebrow{ justify-content:center; }

/* --- buttons ------------------------------------------------------------ */
.nk-btn{
  --btn-bg:var(--accent);
  --btn-fg:#fff;
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 28px;
  border:1px solid transparent;
  border-radius:var(--r);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:13.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  line-height:1;
  cursor:pointer;
  overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease),
             background-color .45s var(--ease), transform .2s var(--ease);
}
.nk-btn > span,.nk-btn > i{ position:relative; z-index:2; }
.nk-btn i{ font-size:15px; transition:transform .45s var(--ease); }
.nk-btn:hover i{ transform:translateX(5px); }
.nk-btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--ink);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .5s var(--ease);
}
.nk-btn:hover::before{ transform:scaleX(1); transform-origin:left center; }

.nk-btn--lg{ padding:18px 34px; }

.nk-btn--accent{ --btn-bg:var(--accent); }
.nk-btn--dark{ --btn-bg:var(--ink); }
.nk-btn--dark::before{ background:var(--accent); }

.nk-btn--ghost{
  --btn-bg:transparent; --btn-fg:#fff;
  border-color:rgba(255,255,255,.38);
}
.nk-btn--ghost::before{ background:#fff; }
.nk-btn--ghost:hover{ color:var(--ink); border-color:#fff; }

/* the weight under the finger that "magnetic buttons" reach for, without
   moving the target away from where the user aimed */
.nk-btn:active{ transform:translateY(1px) scale(.99); }
.nk-textlink:active{ transform:translateY(1px); }

/* --- text link with arrow ----------------------------------------------- */
.nk-textlink{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; padding:0;
  font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
  cursor:pointer;
  position:relative;
}
.nk-textlink span{ position:relative; }
.nk-textlink span::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nk-textlink:hover span::after{ transform:scaleX(1); transform-origin:left; }
.nk-textlink i{ color:var(--accent); transition:transform .45s var(--ease); }
.nk-textlink:hover i{ transform:translateX(6px); }

/* --- scroll reveal ------------------------------------------------------
   Hidden only when JS is running (the <html class="js"> flag is set in the
   document head), so the page stays fully readable if scripts are blocked. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  will-change:opacity, transform;
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

.nk-rise{
  opacity:0; transform:translateY(26px);
  animation:nkRise .95s var(--ease) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes nkRise{ to{ opacity:1; transform:none; } }

/* --- masked heading lines ------------------------------------------------
   Extends the hero's .nk-line vocabulary to every section heading. The split
   happens on the <br> the markup already carries, so nothing is measured, no
   font metrics are needed, and the designed line breaks survive every
   breakpoint. .nk-mask is a separate class from .nk-line on purpose:
   .nk-line__in runs an un-gated CSS animation and must not be reused for a
   scroll-triggered reveal.
   Specificity does the work — [data-reveal][data-lines] outranks
   [data-reveal], so the parent holds still and only the lines move.       */
.js [data-reveal][data-lines]{ opacity:1; transform:none; }

.js [data-lines] .nk-mask{
  display:block;
  overflow:hidden;
  /* Descender guard. line-height is 1.08 but Manrope's content area is ~1.27em,
     so a 'g' or 'j' sits below the line box and a plain overflow:hidden would
     shave it. The padding gives the clip box room; the matching negative margin
     hands the space straight back, so the heading's height and the designed
     line spacing are byte-for-byte what they were before masking. */
  padding-bottom:.16em;
  margin-bottom:-.16em;
}
.js [data-lines] .nk-mask__in{
  display:block;
  transform:translateY(108%);
  transition:transform 1.05s var(--ease);
  transition-delay:var(--md, 0s);
}
.js [data-lines].is-in .nk-mask__in{ transform:none; }

/* --- the eyebrow rule draws itself in ----------------------------------- */
.js [data-reveal] .nk-rule{
  transform:scaleX(0); transform-origin:left center;
  transition:transform .8s var(--ease) .12s;
}
.js [data-reveal].is-in .nk-rule{ transform:scaleX(1); }

/* --- photo settle --------------------------------------------------------
   The same idiom as .nk-about__img, not a third one. 1.06 is deliberate:
   .nk-why__photo is only 42% wide, so a larger scale would briefly push its
   opaque left edge over the copy.                                         */
.js [data-reveal][data-settle]{
  opacity:1;
  transform:scale(1.06);
  transition:transform 1.6s var(--ease);
}
.js [data-reveal][data-settle].is-in{ transform:none; }


/* ==========================================================================
   04. HEADER / NAVIGATION
   ========================================================================== */
.nk-header{
  position:fixed; inset:0 0 auto 0; z-index:1040;
  transition:background-color .5s var(--ease), box-shadow .5s var(--ease);
}
.nk-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,11,15,.62), rgba(8,11,15,0));
  transition:opacity .5s var(--ease);
}
.nk-header.is-solid{
  background:rgba(11,14,18,.92);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.nk-header.is-solid::before{ opacity:0; }
.nk-header.is-open{ background:var(--ink); }

.nk-navbar{ padding:18px 0; transition:padding .45s var(--ease); }
.nk-header.is-solid .nk-navbar{ padding:11px 0; }

/* brand */
.nk-brand{ display:inline-flex; align-items:center; gap:13px; }
.nk-brand__mark{ width:44px; height:44px; transition:width .45s var(--ease), height .45s var(--ease); }
.nk-header.is-solid .nk-brand__mark{ width:38px; height:38px; }
.nk-brand__text{ display:flex; flex-direction:column; line-height:1.05; }
.nk-brand__name{
  font-size:19px; font-weight:800; letter-spacing:.02em; color:#fff; text-transform:uppercase;
}
.nk-brand__sub{
  font-size:9.5px; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:rgba(255,255,255,.58); margin-top:3px;
}

/* menu */
.nk-menu{ justify-content:flex-end; }
.nk-menu__list{ display:flex; align-items:center; gap:34px; }
.nk-link{
  position:relative;
  display:inline-block; padding:6px 0;
  font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
  transition:color .35s var(--ease);
}
.nk-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nk-link:hover{ color:#fff; }
.nk-link:hover::after,
.nk-link.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nk-link.is-active{ color:#fff; }

.nk-menu__cta{ margin-left:38px; padding:13px 24px; font-size:12px; }

/* hamburger */
.nk-burger{
  display:none;
  width:44px; height:44px; padding:0;   /* 44 square = minimum tap target */
  background:none; border:0; position:relative;
}
.nk-burger span{
  position:absolute; right:0; height:2px; background:#fff; border-radius:2px;
  transition:transform .45s var(--ease), opacity .3s var(--ease), width .45s var(--ease);
}
.nk-burger span:nth-child(1){ top:14px; width:28px; }
.nk-burger span:nth-child(2){ top:21px; width:20px; }
.nk-burger span:nth-child(3){ top:28px; width:28px; }
.nk-burger:not(.collapsed) span:nth-child(1){ transform:translateY(7px) rotate(45deg); width:28px; }
.nk-burger:not(.collapsed) span:nth-child(2){ opacity:0; width:0; }
.nk-burger:not(.collapsed) span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); width:28px; }

/* --- scroll progress hairline -------------------------------------------
   It reports position, so it is aria-hidden with no role — a
   role="progressbar" would announce on every frame. Hidden entirely with JS
   off, since nothing would ever move it.                                  */
.nk-header__progress{
  display:none;
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  height:2px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left center;
  opacity:0;
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.js .nk-header__progress{ display:block; }
.nk-header.is-solid .nk-header__progress{ opacity:1; }


/* ==========================================================================
   05. HERO
   ========================================================================== */
.nk-hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; align-items:center;
  background:var(--ink);
  overflow:hidden;
}
/* two layers on purpose: the wrapper carries the JS parallax translate, the
   inner layer carries the CSS entrance zoom — one transform each, no conflict */
.nk-hero__parallax{
  position:absolute; inset:-6% 0 -6% 0;
  will-change:transform;
}
.nk-hero__media{
  position:absolute; inset:0;
  background-image:var(--img-hero);
  background-size:cover;
  background-position:center;
  transform:scale(1.06);
  animation:nkHeroZoom 2.4s var(--ease) forwards;
}
@keyframes nkHeroZoom{ to{ transform:scale(1); } }

.nk-hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(7,10,14,.94) 0%, rgba(7,10,14,.80) 42%, rgba(7,10,14,.42) 100%),
    linear-gradient(0deg, rgba(7,10,14,.92) 0%, rgba(7,10,14,0) 45%);
}

.nk-hero__inner{ position:relative; z-index:3; padding-top:110px; padding-bottom:140px; }
.nk-hero__content{ max-width:930px; }

.nk-hero__title{
  color:#fff;
  font-size:clamp(2.6rem, 6.4vw, 6rem);
  line-height:.99;
  letter-spacing:-.04em;
  margin:0 0 26px;
}
.nk-line{ display:block; overflow:hidden; padding-bottom:.06em; }
.nk-line__in{
  display:block;
  transform:translateY(110%);
  animation:nkLine 1.15s var(--ease) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes nkLine{ to{ transform:none; } }

.nk-hero__lead{
  max-width:560px;
  font-size:clamp(1rem, 1.3vw, 1.16rem);
  color:rgba(255,255,255,.76);
  line-height:1.78;
  margin-bottom:40px;
}
.nk-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* the copy leaves slightly slower than the page, so the media, the scrim and
   the copy read as three depth planes rather than one flat image */
.js .nk-hero__inner{ will-change:transform, opacity; }
.js .nk-hero__inner.is-past{ visibility:hidden; will-change:auto; }

/* side marker */
.nk-hero__aside{
  position:absolute; right:34px; top:50%; z-index:3;
  transform:translateY(-50%) rotate(90deg); transform-origin:right center;
  display:flex; align-items:center; gap:16px;
  font-size:10.5px; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.42);
  white-space:nowrap;
}
.nk-hero__aside-dot{ width:5px; height:5px; background:var(--accent); border-radius:50%; }

/* scroll cue */
.nk-scrollcue{
  position:absolute; left:50%; bottom:38px; z-index:3;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:10.5px; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
  transition:color .4s var(--ease), opacity .35s linear;
}
.nk-scrollcue:hover{ color:#fff; }
.nk-scrollcue__line{
  position:relative; display:block; width:1px; height:52px;
  background:rgba(255,255,255,.24); overflow:hidden;
}
.nk-scrollcue__line::after{
  content:""; position:absolute; left:0; top:-52px; width:1px; height:52px;
  background:var(--accent);
  animation:nkCue 2.1s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes nkCue{ 0%{ transform:translateY(0); } 100%{ transform:translateY(104px); } }


/* ==========================================================================
   06. STATS STRIP
   ========================================================================== */
.nk-stats{
  position:relative; z-index:4;
  background:var(--ink);
  padding:clamp(38px,4.6vw,58px) 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.nk-stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.nk-stat{
  padding:8px 26px;
  border-left:1px solid var(--line-lt);
}
.nk-stat:first-child{ border-left:0; padding-left:0; }
.nk-stat__num{
  display:flex; align-items:flex-start;
  font-size:clamp(2.4rem,4vw,3.6rem);
  font-weight:800; letter-spacing:-.045em; line-height:1;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.nk-stat__num em{
  font-style:normal; color:var(--accent);
  font-size:.52em; line-height:1; margin-top:.12em; margin-left:2px;
}
.nk-stat__label{
  margin-top:12px;
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
/* the + / % lands after its number has settled. The .js gate keeps the
   suffix visible with scripts blocked. */
.js .nk-stat__num em{
  opacity:0; transform:translateY(.18em);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.js .nk-stat__num.is-done em{ opacity:1; transform:none; }


/* ==========================================================================
   07. ABOUT
   ========================================================================== */
.nk-about{ background:var(--bg); }

.nk-about__media{ position:relative; padding:0 0 54px 0; }
.nk-about__frame{
  position:absolute; left:-22px; top:-22px; width:58%; height:58%;
  border:1px solid var(--brand); opacity:.35; z-index:0;
}
.nk-about__img{
  position:relative; z-index:1;
  aspect-ratio:4/5;
  background-image:var(--img-about);
  background-size:cover; background-position:center;
  transition:transform 1.5s var(--ease);
}
.js .nk-about__img{ transform:scale(1.12); }
.js .nk-about__media.is-in .nk-about__img{ transform:scale(1); }
.nk-about__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,14,18,0) 55%, rgba(11,14,18,.28));
}
.nk-about__badge{
  position:absolute; right:8px; bottom:0; z-index:2;
  display:flex; align-items:center; gap:16px;
  background:var(--accent); color:#fff;
  padding:24px 30px;
  box-shadow:0 22px 50px -22px rgba(11,14,18,.55);
}
.nk-about__badge-num{
  font-size:3.1rem; font-weight:800; letter-spacing:-.05em; line-height:.9;
}
.nk-about__badge-txt{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  line-height:1.5;
  border-left:1px solid rgba(255,255,255,.38); padding-left:16px;
}

.nk-about__body{ padding-left:clamp(0px,2vw,34px); }

.nk-points{ margin:30px 0 36px; display:grid; gap:14px; }
.nk-points li{ display:flex; gap:14px; align-items:flex-start; font-size:15.5px; color:var(--body); }
.nk-points i{
  flex:none; width:24px; height:24px; margin-top:2px;
  display:grid; place-items:center;
  background:rgba(11,92,168,.09); color:var(--brand);
  font-size:14px;
}
.nk-points strong{ color:var(--ink); font-weight:800; }


/* ==========================================================================
   08. SERVICES
   ========================================================================== */
.nk-services{ background:var(--bg-alt); }

.nk-svc{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.nk-svc__item{
  position:relative;
  background:var(--bg);
  padding:46px 40px 44px;
  min-height:300px;
  overflow:hidden;
  transition:background-color .55s var(--ease);
}
.nk-svc__item::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
/* the black arrives from the ground up, behind the content, rather than
   swapping flat. .nk-svc__num keeps its own absolute positioning — it only
   gains a z-index.                                                        */
.nk-svc__item::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--ink);
  transform:scaleY(0); transform-origin:bottom center;
  transition:transform .62s var(--ease);
}
.nk-svc__num{ z-index:1; }
.nk-svc__icon,
.nk-svc__title,
.nk-svc__text,
.nk-svc__arrow{ position:relative; z-index:1; }
.nk-svc__item::before{ z-index:2; }   /* the accent hairline stays on top */

.nk-svc__num{
  position:absolute; right:32px; top:34px;
  font-size:3.2rem; font-weight:800; letter-spacing:-.05em; line-height:1;
  color:rgba(11,14,18,.06);
  transition:color .55s var(--ease);
}

.nk-svc__icon{
  display:block; font-size:34px; color:var(--brand);
  margin-bottom:26px;
  transition:transform .55s var(--ease), color .55s var(--ease);
}

.nk-svc__title{
  font-size:1.3rem; margin-bottom:14px; max-width:80%;
  transition:color .55s var(--ease);
}
.nk-svc__text{
  font-size:14.8px; line-height:1.72; color:var(--body);
  margin-bottom:26px;
  transition:color .55s var(--ease);
}

.nk-svc__arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border:1px solid var(--line);
  color:var(--ink);
  transition:transform .5s var(--ease), background-color .5s var(--ease),
             border-color .5s var(--ease), color .5s var(--ease);
}

/* --- hover behaviour: real pointers only ---------------------------------
   Gating this also fixes a live bug — on touch the invert used to latch on
   tap, leaving one tile sitting inverted among five white ones.           */
@media (hover:hover) and (pointer:fine){
  .nk-svc__item:hover::after{ transform:scaleY(1); }
  .nk-svc__item:hover::before{ transform:scaleX(1); }
  .nk-svc__item:hover .nk-svc__num{ color:rgba(255,255,255,.09); }
  .nk-svc__item:hover .nk-svc__icon{ transform:translateY(-6px); color:var(--accent); }
  .nk-svc__item:hover .nk-svc__title{ color:#fff; }
  .nk-svc__item:hover .nk-svc__text{ color:rgba(255,255,255,.6); }
  .nk-svc__item:hover .nk-svc__arrow{
    background:var(--accent); border-color:var(--accent); color:#fff; transform:translateX(6px);
  }
}

/* --- touch: a press, not a latched invert -------------------------------- */
@media (hover:none){
  .nk-svc__item:active{ background:#F7F8FA; }
  .nk-svc__item:active::before{ transform:scaleX(1); }
}


/* ==========================================================================
   09. PROJECTS
   ========================================================================== */
.nk-projects{ background:var(--bg); }

.nk-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:22px;
}
.nk-card{
  position:relative;
  grid-column:span 2;
  height:400px;
  overflow:hidden;
  background:var(--ink);
  cursor:pointer;
}
.nk-card--wide{ grid-column:span 4; }
.nk-grid > .nk-card:nth-child(1),
.nk-grid > .nk-card:nth-child(2){ height:480px; }
.nk-grid > .nk-card:nth-child(6){ grid-column:span 6; height:380px; }

.nk-card__img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.01);
  transition:transform 1.1s var(--ease);
}
.nk-card:hover .nk-card__img{ transform:scale(1.08); }

.nk-card__img--1{ background-image:var(--img-project-1); }
.nk-card__img--2{ background-image:var(--img-project-2); }
.nk-card__img--3{ background-image:var(--img-project-3); }
.nk-card__img--4{ background-image:var(--img-project-4); }
.nk-card__img--5{ background-image:var(--img-project-5); }
.nk-card__img--6{ background-image:var(--img-project-6); }

.nk-card__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,12,16,.05) 30%, rgba(9,12,16,.86) 100%);
  transition:background .6s var(--ease);
}
.nk-card:hover .nk-card__veil{
  background:linear-gradient(180deg, rgba(9,12,16,.42) 0%, rgba(9,12,16,.92) 100%);
}

.nk-card__go{
  position:absolute; right:22px; top:22px; z-index:3;
  width:48px; height:48px;
  display:grid; place-items:center;
  background:var(--accent); color:#fff; font-size:19px;
  opacity:0; transform:translate(-8px,8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.nk-card:hover .nk-card__go{ opacity:1; transform:none; }

.nk-card__body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:30px 32px;
  transform:translateY(14px);
  transition:transform .6s var(--ease);
}
.nk-card:hover .nk-card__body{ transform:none; }

.nk-card__meta{
  display:flex; align-items:center; gap:12px;
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; margin-bottom:12px;
}
.nk-card__meta i{ width:16px; height:1px; background:var(--accent); display:block; }
.nk-card__meta span:first-child{ color:var(--accent); }

.nk-card__title{
  color:#fff; font-size:clamp(1.2rem,1.8vw,1.65rem); margin-bottom:8px;
}
.nk-card__loc{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; color:rgba(255,255,255,.62);
  opacity:0; max-height:0;
  transition:opacity .5s var(--ease), max-height .5s var(--ease);
}
.nk-card:hover .nk-card__loc{ opacity:1; max-height:40px; }

/* the card's pointer, hover state and go-badge now lead somewhere, and the
   grid stops being the one thing a keyboard cannot reach */
.nk-card__link{ position:absolute; inset:0; z-index:4; }
.nk-card__link:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }

.nk-card:focus-within .nk-card__img{ transform:scale(1.08); }
.nk-card:focus-within .nk-card__veil{
  background:linear-gradient(180deg, rgba(9,12,16,.42) 0%, rgba(9,12,16,.92) 100%);
}
.nk-card:focus-within .nk-card__go{ opacity:1; transform:none; }
.nk-card:focus-within .nk-card__body{ transform:none; }
.nk-card:focus-within .nk-card__loc{ opacity:1; max-height:40px; }

/* touch: own the press feedback instead of the OS blue box */
@media (hover:none){
  .nk-card,.nk-btn,.nk-link,.nk-qbtn,.nk-social a,.nk-svc__item{
    -webkit-tap-highlight-color:transparent;
  }
  .nk-card{ transition:transform .25s var(--ease); }
  .nk-card:active{ transform:scale(.99); }
}

/* the project location is hover-trapped on large touch screens — the width
   query escape hatch misses an iPad Pro in landscape (1366px, no hover) */
@media (hover:none), (pointer:coarse){
  .nk-card__loc{ opacity:1; max-height:40px; }
  .nk-card__body{ transform:none; }
}

.nk-projects__foot{ text-align:center; margin-top:clamp(38px,4.4vw,58px); }


/* ==========================================================================
   10. WHY CHOOSE US
   ========================================================================== */
.nk-why{
  position:relative;
  background:var(--ink);
  padding:var(--sy) 0;
  overflow:hidden;
}
.nk-why__photo{
  position:absolute; right:0; top:0; bottom:0; width:42%;
  background-image:var(--img-why);
  background-size:cover; background-position:center;
}
.nk-why__photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink) 0%, rgba(11,14,18,.72) 32%, rgba(11,14,18,.42) 100%);
}
.nk-why__inner{ position:relative; z-index:2; }
.nk-why__content{ max-width:640px; }

.nk-reasons{ margin-top:44px; border-top:1px solid var(--line-lt); }
.nk-reason{
  display:flex; gap:26px; align-items:flex-start;
  padding:28px 6px 28px 0;
  border-bottom:1px solid var(--line-lt);
  transition:padding-left .5s var(--ease);
}
.nk-reason:hover{ padding-left:14px; }
.nk-reason__num{
  flex:none;
  font-size:14px; font-weight:800; letter-spacing:.1em;
  color:var(--accent);
  padding-top:5px; min-width:32px;
}
.nk-reason__title{
  color:#fff;
  font-size:clamp(1.15rem,1.6vw,1.45rem);
  margin-bottom:9px;
}
.nk-reason__text{
  font-size:14.8px; line-height:1.72; color:rgba(255,255,255,.56); max-width:520px;
}


/* ==========================================================================
   11. PROCESS
   ========================================================================== */
.nk-process{ background:var(--bg-alt); }

.nk-steps{
  position:relative;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:26px;
  counter-reset:step;
}
.nk-steps::before{
  content:""; position:absolute; left:0; right:0; top:29px; height:1px;
  background:var(--line);
}
.nk-steps::after{
  content:""; position:absolute; left:0; right:0; top:29px; height:1px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.8s var(--ease);
}
.nk-steps.is-drawn::after{ transform:scaleX(1); }

.nk-step{ position:relative; padding-right:20px; }
.nk-step__dot{
  position:relative; z-index:2;
  display:grid; place-items:center;
  width:58px; height:58px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  margin-bottom:24px;
  transition:background-color .5s var(--ease),
             border-color .55s var(--ease) var(--sd, 0s),
             color .5s var(--ease);
}

/* --- each dot takes its ring as the connector sweep reaches it ------------
   The sweep uses --ease, which is heavily front-loaded, so these delays are
   eased to match the position of the line head rather than spaced evenly.
   Works unchanged for the <=1199px vertical timeline.                     */
.nk-steps.is-drawn .nk-step__dot{ border-color:var(--accent); }
.nk-step:nth-child(1) .nk-step__dot{ --sd:.10s; }
.nk-step:nth-child(2) .nk-step__dot{ --sd:.26s; }
.nk-step:nth-child(3) .nk-step__dot{ --sd:.48s; }
.nk-step:nth-child(4) .nk-step__dot{ --sd:.80s; }
.nk-step:nth-child(5) .nk-step__dot{ --sd:1.20s; }

/* hover must respond instantly, not queue behind the sweep delay */
.nk-step:hover .nk-step__dot{
  transition:background-color .5s var(--ease),
             border-color .5s var(--ease),
             color .5s var(--ease);
}

.nk-step__no{
  font-size:14px; font-weight:800; letter-spacing:.06em; color:var(--ink);
  transition:color .5s var(--ease);
}
.nk-step:hover .nk-step__dot{ background:var(--accent); border-color:var(--accent); }
.nk-step:hover .nk-step__no{ color:#fff; }

.nk-step__title{ font-size:1.16rem; margin-bottom:11px; }
.nk-step__text{ font-size:14.5px; line-height:1.7; color:var(--body); }


/* ==========================================================================
   12. TESTIMONIALS
   ========================================================================== */
.nk-quotes{ background:var(--bg); }

.nk-quotes__carousel{
  position:relative;
  max-width:900px; margin:0 auto;
  text-align:center;
  padding-top:18px;
}
.nk-quotes__mark{
  display:block;
  font-size:76px; line-height:.7; color:var(--accent); opacity:.16;
  margin-bottom:14px;
}
.nk-quote p{
  font-size:clamp(1.18rem, 2.05vw, 1.72rem);
  font-weight:500;
  line-height:1.55;
  letter-spacing:-.018em;
  color:var(--ink);
  margin-bottom:34px;
}
.nk-quote__by{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.nk-quote__name{
  font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.nk-quote__role{ font-size:13.5px; color:var(--body); }
.nk-quote__by::before{
  content:""; width:34px; height:2px; background:var(--accent); margin-bottom:14px;
}

.nk-quotes__controls{
  display:flex; align-items:center; justify-content:center; gap:26px;
  margin-top:44px;
}
.nk-qbtn{
  width:50px; height:50px;
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); color:var(--ink);
  font-size:17px;
  transition:background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.nk-qbtn:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

.nk-quotes__dots{
  position:static; display:flex; align-items:center; gap:12px; margin:0;
}
/* The [data-bs-target] is load-bearing, not decoration. Bootstrap ships
   ".carousel-indicators [data-bs-target]" at specificity (0,2,0) with
   background-color:#fff and opacity:.5 — a plain ".nk-quotes__dots button"
   is (0,1,1) and loses, which rendered the inactive dots white-on-white and
   therefore invisible. Adding the attribute makes this (0,2,1) and it wins. */
.nk-quotes__dots button[data-bs-target]{
  position:relative;
  width:26px; height:3px; margin:0;
  background:var(--line); border:0; opacity:1;
  transition:background-color .45s var(--ease), width .45s var(--ease);
}
/* a 26x3px bar is not a tap target — extend the hit area without changing the
   visual. -5px per side against the 12px gap keeps neighbours from overlapping. */
.nk-quotes__dots button[data-bs-target]::before{
  content:""; position:absolute; inset:-20px -5px;
}
.nk-quotes__dots button[data-bs-target].active{ background:var(--accent); width:42px; opacity:1; }

/* calmer cross-fade instead of the default hard slide */
.nk-quotes__carousel.carousel-fade .carousel-item{ transition:opacity .75s var(--ease); }


/* ==========================================================================
   13. CTA BAND
   ========================================================================== */
.nk-cta{
  position:relative;
  padding:clamp(78px,10vw,146px) 0;
  background:var(--ink);
  overflow:hidden;
}

/* the accent seam draws across as the band arrives — a seam, not a page
   transition. Present and full width with JS disabled.                    */
.nk-cta::before{
  content:""; position:absolute; left:0; right:0; top:0; z-index:3;
  height:3px; background:var(--accent);
  transform-origin:left center;
}
.js .nk-cta::before{
  transform:scaleX(0);
  transition:transform 1.1s var(--ease);
}
.js .nk-cta[data-seam].is-in::before{ transform:scaleX(1); }

/* the band itself must not fade — only its seam moves */
.js [data-reveal][data-seam]{ opacity:1; transform:none; }
.nk-cta__photo{
  position:absolute; inset:0;
  background-image:var(--img-cta);
  background-size:cover; background-position:center 35%;
  background-attachment:scroll;
}
.nk-cta__photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,11,15,.78), rgba(8,11,15,.88));
}
.nk-cta__inner{ position:relative; z-index:2; text-align:center; max-width:800px; margin:0 auto; }
.nk-cta__title{
  color:#fff;
  font-size:clamp(2.1rem,4.6vw,4rem);
  line-height:1.03;
  margin-bottom:22px;
}
.nk-cta__text{
  color:rgba(255,255,255,.7);
  font-size:clamp(1rem,1.25vw,1.13rem);
  margin-bottom:38px;
}
.nk-cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }


/* ==========================================================================
   14. CONTACT
   ========================================================================== */
.nk-contact{ background:var(--bg); }

.nk-info{ margin-top:38px; display:grid; gap:26px; }
.nk-info li{ display:flex; gap:18px; align-items:flex-start; }
.nk-info__ico{
  flex:none; width:46px; height:46px;
  display:grid; place-items:center;
  background:var(--bg-alt); color:var(--brand); font-size:18px;
  transition:background-color .45s var(--ease), color .45s var(--ease);
}
.nk-info li:hover .nk-info__ico{ background:var(--accent); color:#fff; }
.nk-info__k{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:5px;
}
.nk-info__v{
  display:block; font-size:15.5px; color:var(--ink); font-weight:600; line-height:1.6;
  transition:color .35s var(--ease);
}
a.nk-info__v:hover{ color:var(--accent); }

/* form */
.nk-formwrap{
  background:var(--bg-alt);
  border:1px solid var(--line);
  padding:clamp(28px,3.4vw,46px);
}
.nk-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.nk-field{ margin-bottom:22px; }
.nk-field label{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); margin-bottom:10px;
}
.nk-field label span{ color:var(--accent); }
.nk-field input,
.nk-field select,
.nk-field textarea{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid #D2D7DE;
  border-radius:0;
  padding:11px 0;
  font-family:inherit; font-size:15.5px; color:var(--ink);
  transition:border-color .4s var(--ease);
  appearance:none; -webkit-appearance:none;
}
.nk-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230B0E12' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; background-size:11px;
  padding-right:26px; cursor:pointer;
}
.nk-field textarea{ resize:vertical; min-height:118px; line-height:1.65; }
.nk-field input::placeholder,
.nk-field textarea::placeholder{ color:#A6ADB8; }
.nk-field input:focus,
.nk-field select:focus,
.nk-field textarea:focus{
  outline:none; border-bottom-color:var(--ink);
}
.nk-field.has-error input,
.nk-field.has-error select,
.nk-field.has-error textarea{ border-bottom-color:var(--accent); }

.nk-field__err{
  display:block; overflow:hidden;
  max-height:0; opacity:0; margin-top:0;
  transform:translateY(-4px);
  font-size:12.5px; font-weight:600; color:var(--accent);
  transition:max-height .4s var(--ease), opacity .35s var(--ease),
             transform .4s var(--ease), margin-top .4s var(--ease);
}
.nk-field.has-error .nk-field__err{
  /* the cap only has to exceed the tallest real message — the longest string
     wraps to 2 lines (43px) at 375px, so 80px leaves room for 3 */
  max-height:80px; opacity:1; margin-top:7px; transform:none;
}
.nk-form__submit{ margin-top:6px; }
.nk-form__note{ font-size:12.5px; color:#8A929E; margin-top:18px; max-width:430px; }

.nk-form__ok{ text-align:center; padding:26px 0 12px; }
.nk-form__ok i{ font-size:52px; color:var(--accent); display:block; margin-bottom:20px; }
.nk-form__ok h3{ font-size:1.45rem; margin-bottom:12px; }
.nk-form__ok p{ margin-bottom:26px; }

/* the last impression the highest-intent visitor gets is worth 400ms */
.js .nk-form{ transition:opacity .4s var(--ease), transform .4s var(--ease); }
.js .nk-form.is-out{ opacity:0; transform:translateY(-10px); pointer-events:none; }
.js .nk-form__ok{
  opacity:0; transform:translateY(12px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.js .nk-form__ok.is-in{ opacity:1; transform:none; }


/* ==========================================================================
   15. FOOTER + BACK TO TOP
   ========================================================================== */
.nk-footer{
  background:var(--ink);
  color:rgba(255,255,255,.6);
  padding-top:clamp(58px,7vw,96px);
}
.nk-footer__top{
  display:grid;
  grid-template-columns:1.7fr 1fr 1.2fr 1.4fr;
  gap:46px;
  padding-bottom:clamp(44px,5vw,72px);
}
.nk-brand--footer{ margin-bottom:24px; }
.nk-footer__about{ font-size:14.6px; line-height:1.78; max-width:360px; }

.nk-social{ display:flex; gap:10px; margin-top:26px; }
.nk-social a{
  width:42px; height:42px;
  display:grid; place-items:center;
  border:1px solid var(--line-lt); color:rgba(255,255,255,.72); font-size:16px;
  transition:background-color .45s var(--ease), border-color .45s var(--ease),
             color .45s var(--ease), transform .45s var(--ease);
}
.nk-social a:hover{
  background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-3px);
}

.nk-footer__h{
  font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; margin-bottom:26px;
}
.nk-footer__col ul{ display:grid; gap:13px; }
.nk-footer__col a,
.nk-footer__col span{ font-size:14.6px; line-height:1.6; }
.nk-footer__col a{ transition:color .35s var(--ease), padding-left .35s var(--ease); }
.nk-footer__col a:hover{ color:#fff; }
.nk-footer__col > ul > li > a:hover{ padding-left:6px; }

.nk-footer__contact li{ display:flex; gap:13px; align-items:flex-start; }
.nk-footer__contact i{ color:var(--accent); font-size:15px; margin-top:4px; }

.nk-footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:26px 0 30px;
  border-top:1px solid var(--line-lt);
  font-size:13.4px;
}
.nk-footer__legal{ display:flex; gap:26px; }
.nk-footer__legal a{ transition:color .35s var(--ease); }
.nk-footer__legal a:hover{ color:#fff; }

.nk-top{
  position:fixed; right:24px; bottom:24px; z-index:1030;
  width:48px; height:48px;
  display:grid; place-items:center;
  background:var(--accent); color:#fff; font-size:18px;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease),
             visibility .45s var(--ease), background-color .45s var(--ease);
}
.nk-top.is-on{ opacity:1; visibility:visible; transform:none; }
.nk-top:hover{ background:var(--ink); }


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

/* ---------- ≤1399px ---------- */
@media (max-width:1399.98px){
  .nk-hero__aside{ right:20px; }
}

/* ---------- ≤1199px (small desktop / large tablet) ---------- */
@media (max-width:1199.98px){
  .nk-menu__list{ gap:24px; }
  .nk-menu__cta{ margin-left:24px; }
  .nk-svc{ grid-template-columns:repeat(2,1fr); }
  .nk-why__photo{ width:34%; }
  .nk-footer__top{ grid-template-columns:1.6fr 1fr 1.2fr; }
  .nk-footer__brandcol{ grid-column:span 3; }

  /* five steps get cramped under 1200px — switch to a vertical timeline */
  .nk-steps{ grid-template-columns:1fr; gap:0; max-width:760px; margin-inline:auto; }
  .nk-steps::before,
  .nk-steps::after{
    left:29px; right:auto; top:0; bottom:0; width:1px; height:auto;
  }
  .nk-steps::after{ transform:scaleY(0); transform-origin:top; }
  .nk-steps.is-drawn::after{ transform:scaleY(1); }
  .nk-step{
    display:grid; grid-template-columns:58px 1fr;
    column-gap:24px; padding:0 0 34px 0;
  }
  .nk-step:last-child{ padding-bottom:0; }
  .nk-step__dot{ grid-row:1 / span 2; margin-bottom:0; }
  .nk-step__title{ align-self:center; padding-top:16px; }
  .nk-step__text{ padding-top:6px; }
}

/* ---------- ≤991px (tablet) ---------- */
@media (max-width:991.98px){

  html{ scroll-padding-top:74px; }

  /* nav */
  .nk-burger{ display:block; }
  .nk-navbar{ padding:14px 0; }
  .nk-header.is-solid .nk-navbar{ padding:10px 0; }
  .nk-menu{
    background:var(--ink);
    margin:14px -12px -14px;
    padding:8px 24px 26px;
    border-top:1px solid var(--line-lt);
    /* The panel opens inside a position:fixed header, and a fixed box adds
       nothing to the document's scrollable area — so anything past the
       viewport bottom would be unreachable by scroll OR by tabbing. On a
       landscape phone (~375px tall) or at 200%+ zoom the full panel is
       taller than that, which would strand the last links and the CTA.
       Cap it and let the panel scroll itself instead. */
    max-height:calc(100vh - 86px);
    max-height:calc(100svh - 86px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .nk-header.is-solid .nk-menu{
    max-height:calc(100vh - 72px);
    max-height:calc(100svh - 72px);
  }
  .nk-menu__list{
    flex-direction:column; align-items:stretch; gap:0;
  }
  .nk-menu__list li + li{ border-top:1px solid var(--line-lt); }
  .nk-link{ display:block; padding:16px 0; font-size:13.5px; }
  .nk-link::after{ display:none; }
  .nk-link.is-active{ color:var(--accent); }
  .nk-menu__cta{
    margin:22px 0 0; width:100%; justify-content:center; padding:16px 24px;
  }

  /* hero */
  .nk-hero{ min-height:88vh; min-height:88svh; }
  .nk-hero__inner{ padding-top:120px; padding-bottom:120px; }
  .nk-hero__aside{ display:none; }
  .nk-hero__scrim{
    background:
      linear-gradient(105deg, rgba(7,10,14,.93) 0%, rgba(7,10,14,.82) 60%, rgba(7,10,14,.62) 100%),
      linear-gradient(0deg, rgba(7,10,14,.94) 0%, rgba(7,10,14,0) 48%);
  }

  /* about */
  .nk-about__body{ padding-left:0; }
  .nk-about__media{ max-width:560px; }
  .nk-about__img{ aspect-ratio:16/12; }

  /* section heads */
  .nk-head{ grid-template-columns:1fr; align-items:start; }
  .nk-head__right{ margin-bottom:0; max-width:620px; }

  /* projects */
  .nk-grid{ grid-template-columns:repeat(4,1fr); gap:18px; }
  .nk-card,
  .nk-card--wide,
  .nk-card--tall{ grid-column:span 2; height:360px; }
  .nk-grid > .nk-card:nth-child(1){ grid-column:span 4; height:400px; }
  .nk-grid > .nk-card:nth-child(2){ height:360px; }
  .nk-grid > .nk-card:nth-child(6){ grid-column:span 4; height:340px; }
  /* touch devices don't hover — show the detail permanently */
  .nk-card__loc{ opacity:1; max-height:40px; }
  .nk-card__body{ transform:none; }

  /* why */
  .nk-why__photo{
    position:relative; width:100%; height:300px; margin-bottom:44px;
  }
  .nk-why__photo::after{
    background:linear-gradient(180deg, rgba(11,14,18,.35), rgba(11,14,18,.9));
  }
  .nk-why{ padding-top:0; }
  .nk-why__content{ max-width:none; }

  /* footer */
  .nk-footer__top{ grid-template-columns:1fr 1fr; gap:40px; }
  .nk-footer__brandcol{ grid-column:span 2; }
}

/* ---------- ≤767px (mobile) ---------- */
@media (max-width:767.98px){

  :root{ --sy: clamp(52px,11vw,68px); }

  .nk-eyebrow{ margin-bottom:16px; font-size:11px; letter-spacing:.2em; }
  .nk-rule{ width:28px; }

  /* hero */
  .nk-hero{ min-height:92vh; min-height:92svh; }
  .nk-hero__inner{ padding-top:104px; padding-bottom:110px; }
  .nk-hero__title{ font-size:clamp(2.3rem,10.5vw,3.4rem); letter-spacing:-.035em; }
  .nk-hero__lead{ font-size:.98rem; margin-bottom:32px; }
  .nk-hero__actions{ flex-direction:column; align-items:stretch; gap:12px; }
  .nk-hero__actions .nk-btn{ justify-content:center; padding:16px 22px; }
  .nk-scrollcue{ bottom:26px; }
  .nk-scrollcue__line{ height:38px; }
  .nk-scrollcue__text{ font-size:9.5px; letter-spacing:.24em; }

  /* stats → 2 columns */
  .nk-stats__grid{ grid-template-columns:repeat(2,1fr); gap:0; }
  .nk-stat{
    padding:22px 16px;
    border-left:1px solid var(--line-lt);
    border-top:1px solid var(--line-lt);
  }
  .nk-stat:nth-child(odd){ border-left:0; padding-left:0; }
  .nk-stat:nth-child(1),
  .nk-stat:nth-child(2){ border-top:0; padding-top:4px; }
  .nk-stat__num{ font-size:2.4rem; }
  .nk-stat__label{ font-size:10.5px; letter-spacing:.15em; margin-top:8px; }

  /* about */
  .nk-about__media{ padding-bottom:0; }
  .nk-about__frame{ display:none; }
  .nk-about__badge{
    position:static; margin-top:-1px; width:100%;
    justify-content:flex-start; padding:20px 22px;
  }
  .nk-about__badge-num{ font-size:2.5rem; }
  .nk-points li{ font-size:14.8px; }

  /* services */
  .nk-svc{ grid-template-columns:1fr; }
  .nk-svc__item{ padding:34px 26px 32px; min-height:0; }
  .nk-svc__num{ font-size:2.6rem; right:24px; top:26px; }
  .nk-svc__title{ font-size:1.18rem; max-width:74%; }

  /* projects */
  .nk-grid{ grid-template-columns:1fr; gap:16px; }
  .nk-card,
  .nk-card--wide,
  .nk-card--tall,
  .nk-grid > .nk-card:nth-child(1),
  .nk-grid > .nk-card:nth-child(2),
  .nk-grid > .nk-card:nth-child(6){ grid-column:span 1; height:320px; }
  .nk-card__body{ padding:24px 22px; }
  .nk-card__go{ width:42px; height:42px; opacity:1; transform:none; }

  /* why */
  .nk-why__photo{ height:230px; margin-bottom:36px; }
  .nk-reason{ gap:16px; padding:22px 0; }
  .nk-reason:hover{ padding-left:0; }
  .nk-reason__num{ min-width:26px; font-size:13px; }

  /* testimonials */
  .nk-quotes__mark{ font-size:58px; }
  .nk-quotes__controls{ gap:16px; margin-top:34px; }
  .nk-qbtn{ width:44px; height:44px; font-size:15px; }

  /* cta */
  .nk-cta__actions{ flex-direction:column; align-items:stretch; }
  .nk-cta__actions .nk-btn{ justify-content:center; }

  /* contact */
  .nk-form__row{ grid-template-columns:1fr; gap:0; }
  .nk-formwrap{ padding:26px 22px 30px; }
  .nk-form__submit{ width:100%; justify-content:center; }
  .nk-info__ico{ width:42px; height:42px; font-size:16px; }
  /* iOS Safari zooms the viewport on focus for any input under 16px, and the
     viewport meta correctly omits maximum-scale, so the page stays zoomed */
  .nk-field input,
  .nk-field select,
  .nk-field textarea{ font-size:16px; }

  /* the progress hairline needs to be findable on a phone */
  .nk-header__progress{ height:3px; }

  /* footer */
  .nk-footer__top{ grid-template-columns:1fr; gap:34px; }
  .nk-footer__brandcol{ grid-column:span 1; }
  .nk-footer__h{ margin-bottom:18px; }
  .nk-footer__bottom{ flex-direction:column; align-items:flex-start; gap:12px; font-size:12.8px; }
  .nk-top{ right:16px; bottom:16px; width:44px; height:44px; }
}

/* ---------- ≤400px (small phones) ---------- */
@media (max-width:400px){
  .nk-brand__name{ font-size:17px; }
  .nk-brand__sub{ font-size:8.5px; letter-spacing:.15em; }
  .nk-brand__mark{ width:38px; height:38px; }
  .nk-stat__num{ font-size:2.1rem; }
}


/* ==========================================================================
   17. REDUCED MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;   /* also beats the observer's inline delay */
  }

  [data-reveal],
  .nk-rise{ opacity:1 !important; transform:none !important; }

  .nk-line__in,
  .nk-mask__in{ transform:none !important; }
  .nk-mask{ overflow:visible !important; }

  .nk-rule{ transform:none !important; }

  .nk-hero__media,
  .nk-hero__parallax{ transform:none !important; }
  .nk-hero__inner{
    transform:none !important; opacity:1 !important;
    visibility:visible !important; will-change:auto !important;
  }
  .nk-scrollcue{ opacity:1 !important; visibility:visible !important; }

  .js .nk-cta::before{ transform:scaleX(1) !important; }
  .js .nk-stat__num em{ opacity:1 !important; transform:none !important; }
  .js .nk-form__ok{ opacity:1 !important; transform:none !important; }
  .js .nk-form.is-out{ opacity:0 !important; }
}

@media print{
  .nk-header,.nk-top,.nk-scrollcue,.nk-quotes__controls,.nk-header__progress{
    display:none !important;
  }
  /* sections the reader never scrolled to must still print */
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .nk-mask{ overflow:visible !important; }
  .nk-mask__in,.nk-line__in{ transform:none !important; }
  .nk-hero__inner{ opacity:1 !important; transform:none !important; visibility:visible !important; }
  .nk-field__err{ max-height:none !important; opacity:1 !important; }
  /* content that is otherwise revealed only by hover or by scrolling to it */
  .nk-card__loc{ opacity:1 !important; max-height:none !important; }
  .nk-card__body{ transform:none !important; }
  .js .nk-cta::before{ transform:scaleX(1) !important; }
  .js .nk-stat__num em{ opacity:1 !important; transform:none !important; }
  body{ color:#000; }
  .nk-hero{ min-height:auto; }
}