/* ==========================================================
   Nalapad Group – Home page
   Needs base.css and components/banner.css (for the values banner).
   Sections, in page order:
     1. Hero slider      (home/hero.blade.php)
     2. Welcome          (home/welcome.blade.php)
     3. Values banner    (home/values.blade.php)
     4. Industries list  (home/industries.blade.php)
     5. Careers teaser   (home/careers.blade.php)
   ========================================================== */


/* ==========================================================
   1. HERO SLIDER
   ========================================================== */
.hero {
  position: relative;
  min-height: 95vh;
  min-height: 95svh;
  color: var(--color-white);
  background: var(--color-primary);
  overflow: hidden;
}

.hero__slides { position: absolute; inset: 0; }

.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease), visibility 0s linear 1s;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s var(--ease), visibility 0s;
}

/* Not .bg-img: the slide has no stacking context, so the photo must not use z-index */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 7s linear;
}
.hero__slide.is-active .hero__img { transform: scale(1); }  /* slow zoom-out */

/* Colour wash + bottom shade so the title reads */
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 58%, rgb(81 56 104 / 55%) 0%, rgb(44 29 110 / 30%) 32%, transparent 65%),
    linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 30%, transparent 60%),
    linear-gradient(to left, rgba(0, 0, 0, .18) 0%, transparent 55%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-bottom: 90px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero__row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px 48px;
}

.hero__title {
  margin: 0;
  font-weight: 200;
  font-size: clamp(35px, 8.6vw, 54px);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.hero__sub {
  margin: 0;
  max-width: 480px;
  font-size: 16px;
  line-height: 1.6;
  color: #E3E9EF;
}

/* Round outline button on the hero */
.btn-pill {
  display: inline-flex;
  align-items: center;
  inline-size: fit-content;
  min-height: 44px;
  margin-bottom: 12px;
  padding: 0 26px;
  border: 1px solid var(--color-white);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background-color .25s, color .25s;
}
.btn-pill:hover { background: var(--color-white); color: var(--color-primary); }

/* Text rises in when a slide becomes active */
/* Entrance: each title line rises from behind its own mask, one after another,
   whenever a slide becomes active. Then the subtitle and button fade up.
   On the first page load, components/preloader.css holds everything until its
   curtain lifts and adds --intro-delay so the lines start just behind the curtain. */
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;           /* room for descenders (g, p) inside the mask */
  margin-bottom: -.08em;
}
.hero__line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.hero__slide.is-active .hero__line > span { transform: none; }
.hero__line:nth-child(1) > span { transition-delay: calc(var(--intro-delay, 0s) + .15s); }
.hero__line:nth-child(2) > span { transition-delay: calc(var(--intro-delay, 0s) + .3s); }
.hero__line:nth-child(3) > span { transition-delay: calc(var(--intro-delay, 0s) + .45s); }
.hero__line:nth-child(4) > span { transition-delay: calc(var(--intro-delay, 0s) + .6s); }

.hero__sub, .hero__content .btn-pill {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.hero__slide.is-active .btn-pill  { opacity: 1; transform: none; transition-delay: calc(var(--intro-delay, 0s) + .85s); }
.hero__slide.is-active .hero__sub { opacity: 1; transform: none; transition-delay: calc(var(--intro-delay, 0s) + .95s); }


/* Slider controls (only rendered when there is more than one slide) */
.hero__controls {
  position: absolute;
  z-index: 2;
  inset-inline-end: clamp(16px, 3vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  width: auto; max-width: none; margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero__count { font-size: 13px; letter-spacing: .1em; min-width: 22px; }
.hero__progress {
  width: 1px; height: 120px;
  background: rgba(255, 255, 255, .35);
  overflow: hidden;
}
.hero__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--color-white);
  transform: scaleY(0);
  transform-origin: top;
}
.hero__dots { display: flex; flex-direction: column; }
.hero__dot, .hero__pause {
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-white);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hero__dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  transition: width .25s, height .25s, opacity .25s;
}
.hero__dot.is-active::before { width: 10px; height: 10px; opacity: 1; }
.hero__pause .icon-play { display: none; }
.hero.is-paused .hero__pause .icon-play { display: block; }
.hero.is-paused .hero__pause .icon-pause { display: none; }

@media (max-width: 1024px) {
  .hero__content { padding-bottom: 130px; }
}
@media (max-width: 560px) {
  .hero__progress { height: 56px; }
  .hero__controls { top: calc(var(--header-h) + 12px); transform: none; gap: 2px; }
}
[dir="rtl"] .hero__progress-bar { transform-origin: right; }


/* ==========================================================
   2. WELCOME
   ========================================================== */
/* .welcome {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  padding-block: clamp(96px, 12vw, 160px);
} */

/* Giant faint "N" behind the heading */
/* .welcome__mark {
  position: absolute;
  inset-inline-start: clamp(-80px, -4vw, -20px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(420px, 52vw, 780px);
  line-height: .8;
  color: var(--color-mist);
  pointer-events: none;
  user-select: none;
}

.welcome__inner {
  position: relative;           
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.welcome__title {
  font-size: clamp(40px, 4.4vw, 64px);
  letter-spacing: -.01em;
  color: var(--color-primary);
}

.welcome__body {
  border-inline-start: 1px solid #C7CED6;
  padding-inline-start: clamp(32px, 4vw, 64px);
  padding-block: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.welcome__body p {
  margin: 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-alt);
}
.reveal-ready .welcome__body.reveal { transition-delay: .15s; } */

/* Button with short brackets on the left and right */
/* .btn-bracket {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 10px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--color-primary);
  transition: color .3s, background-color .3s;
}
.btn-bracket::before,
.btn-bracket::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  border: 1px solid currentColor;
  transition: width .35s var(--ease);
}
.btn-bracket::before { left: 0;  border-right: 0; }
.btn-bracket::after  { right: 0; border-left: 0; } */
/* On hover the brackets close into a full box and fill */
/* .btn-bracket:hover { background: var(--color-primary); color: var(--color-white); }
.btn-bracket:hover::before,
.btn-bracket:hover::after { width: 50%; border-color: var(--color-primary); } */

/* Tablet and phone: stack, the line moves above the text */
  /* @media (max-width: 860px) {
    .welcome__inner { grid-template-columns: 1fr; gap: 32px; }
    .welcome__body {
      border-inline-start: 0;
      border-top: 1px solid #C7CED6;
      padding-inline-start: 0;
      padding-top: 32px;
    }
    .welcome__body p { font-size: 15px; }
    .welcome__mark { top: 0; transform: none; font-size: 380px; }
  } */
.welcome {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  padding-block: clamp(120px, 14vw, 200px);
}

/* Giant faint logo behind the heading.
   The image is used as a mask, so only its shape matters: the colour comes from
   background-color. The image file is set in the view as --mark.
   Change --mark-ratio to the logo's width / height if it isn't square. */
.welcome__mark {
  --mark-ratio: 1 / 1;
  position: absolute;
  inset-inline-start: clamp(-80px, -4vw, -20px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(380px, 44vw, 700px);
  aspect-ratio: var(--mark-ratio);
  background-color: var(--color-mist);
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
  pointer-events: none;
}

.welcome__inner {
  position: relative;            /* sits above the logo */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
}

.welcome__title {
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--color-primary);
}

.welcome__body {
  border-inline-start: 1px solid #C7CED6;
  padding-inline-start: clamp(32px, 4vw, 64px);
  padding-block: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.welcome__body p {
  margin: 0;
  max-width: 580px;              /* shorter lines read more calmly */
  font-size: 17px;
  line-height: 1.85;
  color: var(--color-text-alt);
}
.reveal-ready .welcome__body.reveal { transition-delay: .15s; }

/* Button with short brackets on the left and right */
.btn-bracket {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 28px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--color-primary);
  transition: color .3s, background-color .3s;
}
.btn-bracket::before,
.btn-bracket::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  border: 1px solid currentColor;
  transition: width .35s var(--ease);
}
.btn-bracket::before { left: 0;  border-right: 0; }
.btn-bracket::after  { right: 0; border-left: 0; }
/* On hover the brackets close into a full box and fill */
.btn-bracket:hover { background: var(--color-primary); color: var(--color-white); }
.btn-bracket:hover::before,
.btn-bracket:hover::after { width: 50%; border-color: var(--color-primary); }

/* Tablet and phone: stack, the line moves above the text */
@media (max-width: 860px) {
  .welcome { padding-block: clamp(88px, 16vw, 120px); }
  .welcome__inner { grid-template-columns: 1fr; gap: 40px; }
  .welcome__body {
    border-inline-start: 0;
    border-top: 1px solid #C7CED6;
    padding-inline-start: 0;
    padding-top: 32px;
    gap: 28px;
  }
  .welcome__body p { font-size: 16px; }
  .welcome__mark { top: 0; transform: none; height: 250px; }
}

/* ==========================================================
   3. VALUES BANNER  (.banner.banner--values)
   Photo background, values list on the left, heading on the right.
   ========================================================== */
.banner--values { min-height: 0; }

/* Darker on the list side, still a light shade on the right so the heading reads on a bright sky */
.banner--values::before {
  background: linear-gradient(90deg,
    rgba(6, 14, 28, .85) 0%,
    rgba(6, 14, 28, .6) 45%,
    rgba(6, 14, 28, .35) 100%);
}

.banner--values .banner__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 600px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 112px);
  padding-block: clamp(80px, 8vw, 120px);
}

.banner--values .banner__content { max-width: 520px; }
.banner--values .banner__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.05;
}
.banner--values .banner__title,
.banner--values .banner__text { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.banner--values .banner__text { max-width: 380px; }

/* Outline button instead of the solid white one */
.banner--values .banner__btn {
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, .8);
}
.banner--values .banner__btn:hover { background: var(--color-white); color: var(--color-primary); }

/* The values list: no box, name above description */
/* .vbox { list-style: none; margin: 0; padding: 0; }

.vbox__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-block: 14px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.vbox__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }

.vbox__icon {
  flex: 0 0 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(191, 211, 255, .45);
  border-radius: 50%;
  color: var(--color-accent);
}
.vbox__icon svg { width: 21px; height: 21px; }

.vbox__body { display: flex; flex-direction: column; gap: 3px; }
.vbox__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-white);
}
.vbox__line {
  max-width: 520px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .74);
}*/

/* Tablet: heading on top, list below */
/* @media (max-width: 1024px) {
  .banner--values .banner__inner { grid-template-columns: 1fr; padding-block: 56px; }
  .banner--values .banner__content { order: -1; }
} */

/* Phone: darker photo */
/* @media (max-width: 760px) {
  .banner--values { align-items: stretch; }
  .banner--values::before { background: rgba(6, 14, 28, .66); }
} */

/* The values list: no box, name above description, generous spacing between rows */
.vbox { list-style: none; margin: 0; padding: 0; }

.vbox__item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.vbox__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }

.vbox__icon {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(191, 211, 255, .45);
  border-radius: 50%;
  color: var(--color-accent);
}
.vbox__icon svg { width: 22px; height: 22px; }

.vbox__body { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.vbox__name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-white);
}
.vbox__line {
  max-width: 500px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, .7);
}

/* Tablet: heading on top, list below */
@media (max-width: 1024px) {
  .banner--values .banner__inner { grid-template-columns: 1fr; row-gap: 48px; padding-block: 72px; }
  .banner--values .banner__content { order: -1; }
}

/* Phone: darker photo */
@media (max-width: 760px) {
  .banner--values { align-items: stretch; }
  .banner--values::before { background: rgba(6, 14, 28, .66); }
  .vbox__item { gap: 18px; padding-block: 20px; }
  .vbox__icon { flex-basis: 40px; height: 40px; }
  .vbox__line { font-size: 14px; }
}


/* ==========================================================
   4. INDUSTRIES LIST  (.values.values--industries)
   Big serif letter, industry name, row of company logos.
   ========================================================== */
.values {
  position: relative;
  background-color: var(--color-white);
  /* Very faint grid */
  background-image:
    linear-gradient(rgba(16, 72, 147, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 72, 147, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  padding-block: var(--section-y);
}
/* Fade the grid out towards the edges so it never feels busy */
.values::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(255, 255, 255, 0) 30%, var(--color-white) 85%);
  pointer-events: none;
}

.values__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* ---- Left: sticky heading ---- */
.values__intro { position: sticky; top: 120px; }   /* stays in view while the list scrolls */
.values__eyebrow { margin-bottom: 18px; }
.values__title { margin-bottom: 32px; font-size: clamp(40px, 4.2vw, 60px); }

.values__btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
  transition: background-color .25s, color .25s, border-color .25s;
}
.values__btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.values__btn:focus-visible { outline-color: var(--color-primary); }

/* ---- Right: the list ---- */
.values__list { list-style: none; margin: 0; padding: 0; }

.values__item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 26px;
  border-bottom: 1px solid var(--color-line);
}
.values__item:first-child { padding-top: 0; }
.values__item:last-child { border-bottom: 0; }

.values__letter {
  flex: 0 0 56px;
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1;
  text-align: center;
  color: var(--color-primary);
  transition: transform .4s var(--ease);
}

.values__text {
  border-inline-start: 1px solid var(--color-line);
  padding-inline-start: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .3s;
}
.values__text h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  color: var(--color-ink);
}
.values__text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
}

/* Hover: letter lifts, divider turns blue */
.values__item:hover .values__letter { transform: translateY(-4px); }
.values__item:hover .values__text { border-color: var(--color-primary); }

/* Stagger the fade-up of each row */
.reveal-ready .values__item.reveal:nth-child(2) { transition-delay: .08s; }
.reveal-ready .values__item.reveal:nth-child(3) { transition-delay: .16s; }
.reveal-ready .values__item.reveal:nth-child(4) { transition-delay: .24s; }
.reveal-ready .values__item.reveal:nth-child(5) { transition-delay: .32s; }

/* Industries variant: taller rows, so line the letter up with the name */
.values--industries .values__item { align-items: flex-start; padding-block: 32px; }
.values--industries .values__item:first-child { padding-top: 0; }
.values--industries .values__letter { margin-top: -4px; }

/* Row of company logos; every box is 200 × 200 */
.values__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}
.values__logo {
  flex: 0 0 200px;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
}
.values__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;      /* hides the white box around JPG logos */
}
.values__logo:focus-visible { outline-color: var(--color-primary); }


/* Upcoming company ('status' => 'upcoming' in config): faded logo with a label, not a link */
.values__logo--upcoming { position: relative; cursor: default; }
.values__logo--upcoming img { filter: grayscale(1); opacity: .35; }
.values__soon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.values__soon span {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .values__inner { grid-template-columns: 1fr; gap: 48px; }
  .values__intro { position: static; }
  .values__item { gap: 20px; padding-block: 22px; }
  .values__letter { flex-basis: 40px; font-size: 44px; }
  .values__text { padding-inline-start: 20px; }
  .values__text h3 { font-size: 21px; }
  .values__text p { font-size: 15px; }
}

/* Phone: smaller logo boxes */
@media (max-width: 560px) {
  .values__logos { gap: 10px; }
  .values__logo { flex-basis: 135px; width: 270px; height: 115px; }
}


/* ==========================================================
   5. CAREERS TEASER
   ========================================================== */
.careers {
  background: var(--color-white);
  padding-block: var(--section-y);
}

.careers__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}

/* Image with a light-blue block set behind it */
.careers__media { position: relative; }
.careers__media::before {
  content: "";
  position: absolute;
  inset: 28px -28px -28px 28px;
  background: var(--color-tint);
  z-index: 0;
}
.careers__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.careers__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.careers__content.reveal { transition-delay: .15s; }

.careers__eyebrow { margin: 0; }
.careers__title { line-height: 1.12; }
.careers__text {
  margin: 0;
  max-width: 460px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
}

.careers__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin-top: 10px;
  padding: 0 28px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 500;
  transition: background-color .25s;
}
.careers__btn svg { transition: transform .25s; }
.careers__btn:hover { background: var(--color-primary-dark); }
.careers__btn:hover svg { transform: translateX(4px); }
.careers__btn:focus-visible { outline-color: var(--color-primary); }

@media (max-width: 860px) {
  .careers__inner { grid-template-columns: 1fr; gap: 64px; }
  .careers__media::before { inset: 18px -12px -18px 18px; }
  .careers__text { font-size: 16px; }
}

[dir="rtl"] .careers__media::before { inset: 28px 28px -28px -28px; }
[dir="rtl"] .careers__btn svg { transform: scaleX(-1); }
[dir="rtl"] .careers__btn:hover svg { transform: scaleX(-1) translateX(4px); }