/* ==========================================================================
   NND Oil & Gas — home.css : page-specific styles for the homepage
   (loaded with main.css on index.html).
   ========================================================================== */

/* hero background — clean image (solid fallback only, no blue tint) */
.home-hero-bg{background:var(--c-navy-900)}
.home-hero-bg img{opacity:1}

/* ===================== Hero slider ===================== */
.hero--slider::after{display:none}            /* each slide carries its own overlay */
.hero__slide{position:absolute;inset:0;display:flex;align-items:center;z-index:1;
  opacity:0;visibility:hidden;transition:opacity 1s var(--ease),visibility 1s var(--ease)}
.hero__slide.is-active{opacity:1;visibility:visible;z-index:2}
.hero__slide .hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__slide .hero__bg img{width:100%;height:100%;object-fit:cover;opacity:1}
.hero__slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,rgba(5,12,48,.82) 0%,rgba(6,16,60,.55) 38%,rgba(6,16,60,.18) 68%,transparent 100%)}
.hero__slide>.container{position:relative;z-index:2;width:100%}
/* slow Ken-Burns zoom on the active slide */
.hero__slide.is-active .hero__bg img{animation:hero-zoom 7s var(--ease) both}
@keyframes hero-zoom{from{transform:scale(1.02)}to{transform:scale(1.16)}}
/* staggered content reveal */
.hero__slide.is-active .hero__inner>*{animation:hero-rise .8s var(--ease) backwards}
.hero__slide.is-active .hero__inner>*:nth-child(1){animation-delay:.2s}
.hero__slide.is-active .hero__inner>*:nth-child(2){animation-delay:.34s}
.hero__slide.is-active .hero__inner>*:nth-child(3){animation-delay:.48s}
.hero__slide.is-active .hero__inner>*:nth-child(4){animation-delay:.62s}
@keyframes hero-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
/* controls (aligned to the content column) */
.hero__controls{position:absolute;left:0;right:0;bottom:clamp(1.6rem,4vh,3rem);z-index:6;
  display:flex;align-items:center;gap:var(--sp-4)}
.hero__arrow{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.6rem;line-height:1;font-family:var(--font-head);
  border:1px solid rgba(255,255,255,.25);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.hero__arrow:hover{background:var(--c-accent-500);border-color:transparent}
.hero__dots{display:flex;gap:.55rem}
.hero__dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.30);cursor:pointer;
  transition:background var(--dur) var(--ease),width var(--dur) var(--ease)}
.hero__dot.is-active{background:var(--c-accent-300);width:28px;border-radius:999px}
/* auto-advance progress bar */
.hero__progress{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:6;background:rgba(255,255,255,.12)}
.hero__progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c-accent-400),var(--c-accent-300))}
@media (max-width:640px){.hero__controls{justify-content:center}}
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
  .hero__slide.is-active .hero__bg img,
  .hero__slide.is-active .hero__inner>*{animation:none}
  .hero__progress span{display:none}
}

/* "View all" button spacing */
.home-viewall{margin-top:2.5rem}

/* ===================== Company profile ===================== */
.home-profile{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (max-width:860px){.home-profile{grid-template-columns:1fr;gap:2rem}}
.home-profile__media{position:relative}
.home-profile__media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-lg);background:var(--c-bg-alt);box-shadow:var(--shadow-md)}
.home-profile__badge{position:absolute;left:clamp(1rem,2vw,1.5rem);bottom:clamp(1rem,2vw,1.5rem);
  display:flex;flex-direction:column;gap:.15rem;padding:1rem 1.25rem;border-radius:var(--r-md);
  background:var(--c-accent-600);color:#fff;box-shadow:var(--shadow-lg)}
.home-profile__badge strong{font-family:var(--font-head);font-size:1.75rem;line-height:1}
.home-profile__badge span{font-size:var(--fs-sm);color:var(--c-accent-300)}
.home-profile__body h1{font-size:var(--fs-h2);margin-bottom:var(--sp-4)}
.home-profile__body>p{margin-top:var(--sp-3)}
.home-profile__list{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.home-profile__list li{display:flex;align-items:center;gap:.6rem;font-weight:500;color:var(--c-heading)}
.home-profile__list img{flex:none;width:20px;height:20px}
.home-profile__cta{margin-top:var(--sp-6)}

/* Why-choose icons now render from standalone SVGs in the icon folder */
.icon-card__icon img{width:30px;height:30px;display:block}

/* ===================== Testimonial carousel ===================== */
.testi{position:relative;margin-top:var(--sp-2)}
.testi__viewport{overflow:hidden;padding:var(--sp-2) 4px}
.testi__track{display:flex;gap:var(--sp-5);transition:transform .5s cubic-bezier(.4,0,.2,1)}
.testi-card{flex:0 0 calc((100% - 2 * var(--sp-5)) / 3);display:flex;flex-direction:column;
  position:relative;overflow:hidden;border-radius:var(--r-lg);padding:var(--sp-6);
  background:linear-gradient(160deg,var(--c-navy-800) 0%,#0A1550 100%);
  border:1px solid var(--c-steel-600);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.testi-card:hover{transform:translateY(-4px);border-color:var(--c-accent-400);box-shadow:var(--shadow-md)}
.testi-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--c-accent-400),var(--c-accent-300))}
.testi-card__icon{width:34px;height:34px;color:var(--c-accent-300);margin-bottom:var(--sp-3)}
.testi-card__text{color:var(--c-on-dark);font-size:var(--fs-base);line-height:1.65;flex:1}
.testi-card__cite{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);
  padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.10);font-style:normal}
.testi-card__avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;background:rgba(255,255,255,.1)}
.testi-card__cite strong{color:#fff;font-family:var(--font-head);font-size:var(--fs-sm)}
.testi-card__role{color:var(--c-on-dark-mute);font-size:var(--fs-sm)}
@media (max-width:1023px){.testi-card{flex-basis:calc((100% - var(--sp-5)) / 2)}}
@media (max-width:639px){.testi-card{flex-basis:100%}}

.testi__controls{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin-top:var(--sp-6)}
.testi__arrow{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.10);color:#fff;font-size:1.6rem;line-height:1;font-family:var(--font-head);
  transition:background var(--dur) var(--ease)}
.testi__arrow:hover{background:var(--c-accent-500)}
.testi__dots{display:flex;gap:.5rem}
.testi__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25);
  transition:background var(--dur) var(--ease),width var(--dur) var(--ease)}
.testi__dot.is-active{background:var(--c-accent-300);width:24px;border-radius:999px}

/* Client logo marquee styles are global — see common.css (.logos__marquee). */

/* arrows disabled at the first / last slide */
.testi__arrow:disabled{opacity:.3;cursor:default;pointer-events:none}
@media (prefers-reduced-motion:reduce){.testi__track{transition:none}}

/* ===================== Homepage contact / enquiry ===================== */
.home-contact{position:relative;overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(78,91,234,.20), transparent 55%),
    linear-gradient(120deg, var(--c-navy-900) 0%, #0B1A57 100%)}
.home-contact__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (max-width:880px){.home-contact__grid{grid-template-columns:1fr;gap:2.5rem}}
.home-contact__intro h2{color:#fff}
.home-contact__intro .lead{color:var(--c-on-dark);margin-top:var(--sp-3);max-width:46ch}
.home-contact__points{list-style:none;padding:0;margin:var(--sp-6) 0 0;display:flex;flex-direction:column;gap:var(--sp-3)}
.home-contact__points li{display:flex;align-items:center;gap:.6rem;color:var(--c-on-dark)}
.home-contact__points img{flex:none;width:20px;height:20px}
.home-contact__direct{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-7)}
.home-contact__link{display:inline-flex;align-items:center;gap:.6rem;color:#fff;font-family:var(--font-head);font-weight:600}
.home-contact__link:hover{color:var(--c-accent-300)}
.home-contact__link span{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;background:rgba(255,255,255,.10)}
.home-contact__link span img{width:17px;height:17px}
.home-contact__card{background:#fff;border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--shadow-lg)}
.home-contact__card h3{font-family:var(--font-head);font-size:var(--fs-h4);margin-bottom:var(--sp-5)}
.home-contact__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media (max-width:480px){.home-contact__row{grid-template-columns:1fr;gap:0}}
/* clearer field borders — homepage enquiry form only */
.home-contact__card .input,
.home-contact__card .select,
.home-contact__card .textarea{border:1.5px solid #c7d0e0}
.home-contact__card .input:focus,
.home-contact__card .select:focus,
.home-contact__card .textarea:focus{border-color:var(--c-accent-500)}

/* Floating action buttons moved to common.css (global on all pages). */