/* ============================================
   NOOR AL DAHAB AL HADITHA TRADING
   Single Page Website - Stylesheet
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
  /* Primary Colors */
  --navy: #0a1628;
  --navy-light: #132038;
  --navy-medium: #1a2d4a;
  --teal: #00a5a5;
  --teal-dark: #008c8c;
  --teal-light: #00c4c4;

  /* Neutral Colors */
  --white: #ffffff;
  --off-white: #f7f8fa;
  --gray-100: #f0f2f5;
  --gray-200: #e2e5ea;
  --gray-300: #c5cbd4;
  --gray-400: #8a92a0;
  --gray-500: #5a6270;
  --gray-600: #3d4452;
  --dark: #1a1a2e;

  /* Typography */
  --font-primary: 'Inter', sans-serif;
  --font-heading: 'Outfit', sans-serif;

  /* Spacing */
  --section-padding: 100px 0;
  --container-max: 1200px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.35s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 60px rgba(0, 0, 0, 0.16);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-primary);
  color: var(--gray-600);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--navy);
  line-height: 1.2;
  font-weight: 700;
}

/* ---------- Utility Classes ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}

.section-title {
  font-size: 2.5rem;
  color: var(--navy);
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--gray-500);
  max-width: 600px;
  line-height: 1.7;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition-medium);
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
  opacity: 0;
  transition: var(--transition-medium);
}

.btn:hover::after {
  opacity: 1;
}

.btn-primary {
  background: var(--teal);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(0, 165, 165, 0.3);
}

.btn-primary:hover {
  background: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0, 165, 165, 0.4);
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}

.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-white {
  background: var(--white);
  color: var(--navy);
}

.btn-white:hover {
  background: var(--gray-100);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.15);
}

.btn-icon {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-fast);
}

.btn:hover .btn-icon {
  transform: translateX(4px);
}

/* ============================================
   HEADER / NAVIGATION
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 16px 0;
  transition: var(--transition-medium);
}

.header.scrolled {
  background: rgba(10, 22, 40, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 10px 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 101;
}

.logo-icon {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-text .brand {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.logo-text .sub {
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  padding: 4px 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transition: var(--transition-medium);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--white);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-cta .btn {
  padding: 10px 24px;
  font-size: 0.85rem;
}

/* Hamburger Menu — a real <button>, so reset the UA styling */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 101;
  padding: 10px 8px;
  background: none;
  border: none;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.hamburger span {
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition-medium);
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  /* dvh keeps the panel clear of the iOS Safari toolbar */
  height: 100dvh;
  background: var(--navy);
  z-index: 100;
  /*
    Transition `right` only. The shorthand defaults to `all`, which included
    `visibility` — that left the panel un-focusable at the moment it opened.
  */
  transition: right var(--transition-medium);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  overflow-y: auto;
  padding: 80px 24px 40px;
}

.mobile-nav.active {
  right: 0;
}

/* Belt and braces with `inert`: nothing inside is reachable while closed. */
.mobile-nav[inert] {
  visibility: hidden;
}

.mobile-nav a {
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.mobile-nav a:hover {
  color: var(--teal);
}

.mobile-nav-cta {
  margin-top: 16px;
}

.mobile-nav-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
}

.mobile-nav-close svg {
  width: 20px;
  height: 20px;
}

.mobile-nav-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--navy);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10, 22, 40, 1) 0%, rgba(10, 22, 40, 0.9) 40%, rgba(10, 22, 40, 0.2) 70%, rgba(10, 22, 40, 0) 100%);
}

.hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding-top: 100px;
  padding-bottom: 60px;
}

.hero-content {
  max-width: 620px;
}

.hero-content h1 {
  font-size: 3.8rem;
  color: var(--white);
  margin-bottom: 24px;
  line-height: 1.1;
  letter-spacing: 12px;
}

.hero-content h1 .highlight {
  color: var(--teal-light);
}

.hero-content p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 36px;
  max-width: 480px;
  line-height: 1.8;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-location {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  position: absolute;
  bottom: 40px;
  right: 40px;
  z-index: 10;
}

.hero-location svg {
  width: 16px;
  height: 16px;
  color: var(--teal);
}

.hero-location span {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
}

/* ============================================
   FEATURES BAR
   ============================================ */
.features-bar {
  position: relative;
  z-index: 3;
  background: var(--white);
  padding: 60px 0;
}

.features-bar .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 0 24px;
  border-right: 1px solid var(--gray-200);
  transition: var(--transition-medium);
}

.feature-item:last-child {
  border-right: none;
}

.feature-item:hover {
  transform: translateY(-4px);
}

.feature-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-dark);
  transition: var(--transition-medium);
}

.feature-item:hover .feature-icon {
  transform: scale(1.05);
}

.feature-icon svg {
  width: 40px;
  height: 40px;
  stroke: var(--teal-dark);
}

.feature-item h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}

/* --gray-400 on white is only 3.1:1 — below the 4.5:1 AA floor for body text. */
.feature-item p {
  font-size: 0.82rem;
  color: var(--gray-500);
  line-height: 1.5;
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about {
  position: relative;
  padding: 80px 0 60px;
  background: var(--white);
  overflow: hidden;
}

.about-bg-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  z-index: 1;
}

.about-bg-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* JPEG first as the fallback; image-set upgrades to WebP where supported. */
  background: url('../images/about-img-896.jpg') no-repeat center center / cover;
  background-image: image-set(
    url('../images/about-img-896.webp') type('image/webp'),
    url('../images/about-img-896.jpg') type('image/jpeg')
  );
  background-image: -webkit-image-set(
    url('../images/about-img-896.webp') type('image/webp'),
    url('../images/about-img-896.jpg') type('image/jpeg')
  );
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  clip-path: polygon(150px 0, 100% 0, 100% 100%, 0 100%);
}

.about-bg-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background: rgba(10, 22, 40, 0.80);
  clip-path: polygon(150px 0, 100% 0, 100% 100%, 0 100%);
  display: flex;
  align-items: center;
  padding: 40px 40px 40px 180px;
}

.about-overlay-content {
  color: var(--white);
}

.about-overlay-content p {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 24px;
}

.overlay-line {
  width: 40px;
  height: 2px;
  background: var(--white);
}

.about .container {
  position: relative;
  z-index: 2;
}

.about-content {
  max-width: 48%;
}

.about-content .section-label {
  background: #e6f0f0;
  color: var(--teal-dark);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.about-content .section-title {
  font-size: 3.2rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--navy);
}

.about-content p {
  color: var(--gray-600);
  margin-bottom: 32px;
  line-height: 1.8;
  font-size: 1.05rem;
}

.about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 36px;
  margin-top: 40px;
  padding-top: 0;
  border-top: none;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.stat-icon {
  width: auto;
  height: auto;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--teal-dark);
}

.stat-icon svg {
  width: 28px;
  height: 28px;
}

.stat-text dt {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--navy);
}

.stat-text dd {
  font-size: 0.85rem;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 0 !important;
}

/* ============================================
   OUR CLIENTS
   A static logo wall. Every mark is normalised to the same canvas, so the
   grid reads evenly without per-logo nudging.
   ============================================ */
.clients {
  padding: 100px 0;
  background: var(--off-white);
}

.clients .section-label {
  background: #e6f0f0;
  color: var(--teal-dark);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.clients-header {
  text-align: center;
  margin-bottom: 56px;
}

.clients-header .section-subtitle {
  margin: 0 auto;
}

.clients-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.client-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 34px;
  min-height: 168px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-medium), box-shadow var(--transition-medium),
    transform var(--transition-medium);
}

.client-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.client-card picture {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

/*
  Each file is already normalised to equal optical area and carries its own
  intrinsic width/height, so the browser renders it at its natural size — no
  per-logo CSS nudging, and no layout shift.
*/
.client-card img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .client-card {
    padding: 22px 20px;
    min-height: 132px;
  }
}

@media (max-width: 480px) {
  .clients {
    padding: 70px 0;
  }

  .clients-header {
    margin-bottom: 36px;
  }

  .client-card {
    padding: 18px 14px;
    min-height: 112px;
  }
}

/* ============================================
   SERVICES SECTION
   Alternating feature rows — no carousel, every division visible at once.
   ============================================ */
.services {
  padding: 120px 0;
  background: #f0f4f8;
}

.services .section-label {
  background: #e6f0f0;
  color: var(--teal-dark);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.services-header {
  max-width: 720px;
  margin-bottom: 72px;
}

.services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-medium), transform var(--transition-medium);
}

.service-row:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* Every second row puts the image on the right. */
.service-row:nth-child(even) .service-media {
  order: 2;
}

.service-media {
  position: relative;
  align-self: stretch;
  min-height: 340px;
  overflow: hidden;
}

/* <picture> is inline by default — without this the img has no height to fill. */
.service-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.service-row:hover .service-media img {
  transform: scale(1.04);
}

.service-body {
  padding: 48px 52px;
}

.service-number {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--teal);
  margin-bottom: 8px;
}

/* Marks the core division, so the lead service reads as the lead service. */
.service-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 13px;
  border-radius: 50px;
  background: rgba(0, 165, 165, 0.10);
  border: 1px solid rgba(0, 165, 165, 0.30);
  color: var(--teal-dark);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.service-row:first-child {
  border: 1px solid rgba(0, 165, 165, 0.35);
  box-shadow: var(--shadow-md);
}

.service-body h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.25;
}

.service-desc {
  font-size: 0.97rem;
  color: var(--gray-500);
  line-height: 1.75;
  margin-bottom: 24px;
}

/* What the division covers — two columns where there is room. */
.service-includes {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 24px;
}

.service-includes li {
  position: relative;
  padding-left: 28px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.5;
}

/* Teal check, drawn in CSS so the markup stays clean. */
.service-includes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 165, 165, 0.12);
}

.service-includes li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 7px;
  width: 6px;
  height: 10px;
  border: solid var(--teal-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.service-note {
  padding: 14px 18px;
  margin-bottom: 26px;
  border-left: 3px solid var(--teal);
  background: #f2f8f8;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  color: var(--gray-500);
  line-height: 1.65;
}

/* ============================================
   INDUSTRIES WE SERVE SECTION
   A two-column editorial band: the pitch holds the left rail while the
   sectors read as a bento of cards on the right.
   ============================================ */
.industries {
  padding: 100px 0;
  background: var(--off-white);
  position: relative;
  overflow: hidden;
}

/* Soft teal wash so the white cards lift off the band instead of sitting flat. */
.industries::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -160px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(0, 165, 165, 0.14), transparent 70%);
  pointer-events: none;
}

.industries .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.6fr;
  gap: 64px;
  align-items: start;
}

.industries .section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 165, 165, 0.1);
  color: var(--teal-dark);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.industries .section-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

/*
  The rail travels with the grid on tall screens, so the framing copy stays
  in view while the sectors scroll past it.
*/
.industries-header {
  position: sticky;
  top: 120px;
}

.industries-header .section-title {
  font-size: 2.35rem;
  line-height: 1.15;
}

.industries-header .section-subtitle {
  max-width: 420px;
}

.industries-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--teal-dark);
}

.industries-cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.industries-cta:hover {
  color: var(--navy);
}

.industries-cta:hover svg {
  transform: translateX(4px);
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.industry-card {
  position: relative;
  padding: 26px 24px 28px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-medium), border-color var(--transition-medium),
    box-shadow var(--transition-medium);
}

/* Teal glow that blooms out of the lower-right corner on hover. */
.industry-card::after {
  content: '';
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 165, 165, 0.18), transparent 70%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--transition-medium), transform var(--transition-medium);
  pointer-events: none;
}

.industry-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 165, 165, 0.35);
  box-shadow: 0 18px 40px rgba(10, 22, 40, 0.1);
}

.industry-card:hover::after {
  opacity: 1;
  transform: scale(1);
}

.industry-icon {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--teal-dark);
  background: linear-gradient(135deg, rgba(0, 165, 165, 0.15), rgba(0, 165, 165, 0.04));
  border: 1px solid rgba(0, 165, 165, 0.18);
  transition: var(--transition-medium);
}

.industry-card:hover .industry-icon {
  background: linear-gradient(135deg, var(--teal-light), var(--teal-dark));
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 8px 18px rgba(0, 165, 165, 0.32);
}

.industry-icon svg {
  width: 22px;
  height: 22px;
}

.industry-text {
  position: relative;
  z-index: 1;
}

.industry-card h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

.industry-card p {
  font-size: 0.86rem;
  color: var(--gray-500);
  line-height: 1.6;
}

/* ============================================
   VISION SECTION
   ============================================ */
.vision {
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  background: var(--navy);
}

.vision-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.vision-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vision-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10, 22, 40, 0.95) 0%, rgba(10, 22, 40, 0.85) 50%, rgba(10, 22, 40, 0.7) 100%);
}

.vision .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: flex-start;
}

.vision-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 24px;
}

.vision-content .section-title {
  color: var(--white);
  font-size: 2.6rem;
  line-height: 1.4;
  margin-bottom: 30px;
  font-weight: 700;
}

.vision-line {
  width: 40px;
  height: 3px;
  background: var(--gray-400);
}

.vision-right {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 10px;
}

.vision-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.vision-card-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: var(--white);
  margin-top: 2px;
}

.vision-card-icon svg {
  width: 32px;
  height: 32px;
}

.vision-card h3 {
  font-size: 1.15rem;
  color: var(--white);
  margin-bottom: 8px;
  font-weight: 700;
}

.vision-card p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

/* Core Values Grid (inside vision section) */
.core-values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-top: 12px;
}

.core-value-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.core-value-item dt {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
}

.core-value-item dd {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

/* ============================================
   WHY CHOOSE US SECTION
   ============================================ */
.why-choose {
  padding: var(--section-padding);
}

.why-choose-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 50px;
}

.why-choose-header-left {
  max-width: 550px;
}

.why-choose-header-left .section-subtitle {
  margin-top: 8px;
}

.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.why-card {
  text-align: center;
  padding: 40px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  transition: var(--transition-medium);
  position: relative;
  overflow: hidden;
}

.why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition-medium);
}

.why-card:hover::before {
  transform: scaleX(1);
}

.why-card:hover {
  border-color: rgba(0, 165, 165, 0.2);
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.why-card-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  transition: var(--transition-medium);
}

.why-card:hover .why-card-icon {
  background: var(--teal);
  color: var(--white);
  transform: scale(1.1);
}

.why-card-icon svg {
  width: 28px;
  height: 28px;
}

.why-card h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.why-card p {
  font-size: 0.82rem;
  color: var(--gray-400);
  line-height: 1.6;
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  position: relative;
  overflow: hidden;
  background: var(--gray-100);
}

.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cta-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-shape {
  position: relative;
  z-index: 2;
  background: linear-gradient(to right, #1a5c66, #338996);
  width: 50%;
  max-width: 1000px;
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
  padding: 80px 0;
  overflow: hidden;
}

.cta-container {
  padding-left: max(24px, calc((100vw - 1200px) / 2 + 24px));
  padding-right: 80px;
}

.cta-container h2 {
  font-size: 3rem;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.2;
}

.cta-container p {
  font-size: 1.05rem;
  color: var(--white);
  margin-bottom: 32px;
  max-width: 500px;
  line-height: 1.7;
}

.cta-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-btn {
  background: var(--white);
  color: #338996;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 28px;
}

.cta-btn .btn-icon {
  color: #338996;
  margin-left: 6px;
}

.cta-btn:hover {
  background: var(--gray-100);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .cta-shape {
    width: 100%;
    border-radius: 0;
    padding: 60px 0;
  }

  .cta-container {
    padding-right: 24px;
  }

  .cta-container h2 {
    font-size: 2.2rem;
  }
}

/* ============================================
   CONTACT FORM SECTION
   ============================================ */
.contact-form-section {
  padding: 100px 0;
  background: #f0f4f8;
  position: relative;
  overflow: hidden;
}

.contact-form-section::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 165, 165, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.contact-form-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 22, 40, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.contact-form-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: flex-start;
}

.contact-info .section-label {
  background: #e6f0f0;
  color: var(--teal-dark);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.contact-info .section-title {
  color: var(--navy);
  font-size: 2.8rem;
  margin-bottom: 16px;
}

.contact-info-desc {
  font-size: 1.05rem;
  color: var(--gray-500);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 400px;
}

.contact-info-items {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-info-row {
  display: flex;
  gap: 32px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-info-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background: rgba(0, 165, 165, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-medium);
}

.contact-info-item:hover .contact-info-icon {
  background: var(--teal);
  transform: scale(1.05);
}

.contact-info-icon svg {
  width: 22px;
  height: 22px;
  color: var(--teal-dark);
  transition: var(--transition-medium);
}

.contact-info-item:hover .contact-info-icon svg {
  color: var(--white);
}

.contact-info-item h3 {
  font-size: 0.95rem;
  color: var(--navy);
  margin-bottom: 4px;
  font-weight: 600;
}

.contact-info-item p {
  font-size: 0.88rem;
  color: var(--gray-500);
  line-height: 1.6;
  margin: 0;
}

/* Contact Form Card */
.contact-form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.contact-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light), transparent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 18px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  color: var(--navy);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  transition: var(--transition-medium);
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--gray-400);
}

.form-group select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  color: var(--gray-500);
}

.form-group select option {
  background: var(--white);
  color: var(--navy);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--teal);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(0, 165, 165, 0.1);
  color: var(--navy);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-submit-btn {
  width: 100%;
  justify-content: center;
  padding: 16px 28px;
  font-size: 1rem;
  margin-top: 4px;
}

/* Form Success Message */
/* Visibility is driven by the [hidden] attribute, which JS toggles. */
.form-success-message {
  text-align: center;
  padding: 40px 20px;
  animation: fadeInUp 0.5s ease forwards;
}

.success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 165, 165, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.success-icon svg {
  width: 36px;
  height: 36px;
  color: var(--teal);
}

.form-success-message h3 {
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: 8px;
}

.form-success-message p {
  font-size: 0.95rem;
  color: var(--gray-500);
  line-height: 1.6;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--navy);
  padding: 80px 0 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand .logo {
  margin-bottom: 16px;
}

.footer-brand p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.7;
  max-width: 280px;
}

.footer-col h3 {
  font-size: 0.9rem;
  color: var(--white);
  margin-bottom: 20px;
  font-weight: 700;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col ul li a {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-fast);
}

.footer-col ul li a:hover {
  color: var(--teal);
  transform: translateX(4px);
}

.footer-col ul li a svg {
  width: 14px;
  height: 14px;
  color: var(--teal);
  min-width: 14px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-contact-item svg {
  width: 16px;
  height: 16px;
  color: var(--teal);
  min-width: 16px;
  margin-top: 3px;
}

.footer-contact-item p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
}

.footer-bottom p {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.3);
}


/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger children */
.stagger-children .reveal {
  transition-delay: calc(var(--i, 0) * 0.1s);
}

/* ============================================
   BACK TO TOP
   ============================================ */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 165, 165, 0.4);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: var(--transition-medium);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--teal-dark);
  transform: translateY(-4px);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   FLOATING ACTIONS
   ============================================ */
.floating-actions {
  position: fixed;
  bottom: 90px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}

.floating-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  position: relative;
  text-decoration: none;
}

.floating-btn svg {
  width: 24px;
  height: 24px;
}

.floating-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  color: #fff;
}

.whatsapp-btn {
  background-color: #25D366;
}

.whatsapp-btn:hover {
  background-color: #128C7E;
}

.call-btn {
  background-color: var(--navy);
}

.call-btn:hover {
  background-color: var(--teal);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {

  /* Service rows stack below 900px; image always leads. */
  .service-row,
  .service-row:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .service-row:nth-child(even) .service-media {
    order: 0;
  }

  .service-media {
    min-height: 260px;
    max-height: 320px;
  }

  .service-body {
    padding: 36px 32px 40px;
  }
  .hero-content h1 {
    font-size: 3rem;
  }


  .features-bar .container {
    grid-template-columns: repeat(2, 1fr);
  }

  /*
    The dividers are built for one row of four. In a 2x2 grid the right-hand
    column's border-right lands on the container edge instead of between two
    items, and the two rows get no rule at all.
  */
  .feature-item:nth-child(2n) {
    border-right: none;
  }

  .feature-item:nth-child(-n+2) {
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 30px;
  }

  .feature-item:nth-child(n+3) {
    padding-top: 30px;
  }

  /*
    Below 1024px the angled background panel is dropped and the copy gets the
    full width. Without this the text stayed pinned to max-width:48% over a
    dark photo — unreadable on any phone.
  */
  .about-bg-wrapper {
    display: none;
  }

  .about-content {
    max-width: 100%;
  }


  .industries .container {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  /* No second column to scroll past, so the rail stops travelling. */
  .industries-header {
    position: static;
  }

  .industries-header .section-subtitle {
    max-width: 640px;
  }

  .industries-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .vision .container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .why-choose-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-form-wrapper {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact-info .section-title {
    font-size: 2.2rem;
  }

  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {

  .service-body {
    padding: 28px 22px 32px;
  }

  .service-body h3 {
    font-size: 1.3rem;
  }

  .service-media {
    min-height: 210px;
    max-height: 240px;
  }

  .service-includes {
    grid-template-columns: 1fr;
  }

  .services-header {
    margin-bottom: 44px;
  }

  .services {
    padding: 80px 0;
  }
  :root {
    --section-padding: 70px 0;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .mobile-nav {
    display: flex;
  }

  .hero-content h1 {
    font-size: 2.4rem;
  }

  /*
    100vh made the phone hero a full screen tall, but the copy only fills about
    two thirds of it: centring inside that box split the leftover height into a
    dead band above and below the text, on top of the container's own padding.
    Let the content set the height instead and keep the padding to what the
    fixed header and the location badge actually need.
  */
  .hero {
    min-height: auto;
  }

  .hero .container {
    padding-top: 104px;
    /* Leaves room for .hero-location, which stays pinned to the hero's foot. */
    padding-bottom: 96px;
  }

  /* Full-width and centred — 'right: 40px' put it under the CTA buttons. */
  .hero-location {
    bottom: 20px;
    left: 24px;
    right: 24px;
    /* Stops the pill stretching edge to edge on a wide phone or small tablet. */
    max-width: 420px;
    margin: 0 auto;
    justify-content: center;
  }

  /*
    The base overlay fades left-to-right, which works when the copy occupies the
    left 620px of a wide photo. On a phone the text runs the full width and its
    right-hand half sat over the bright part of the image. Fade downward here
    instead, so the whole column keeps its contrast.
  */
  .hero-bg-overlay {
    background: linear-gradient(to bottom, rgba(10, 22, 40, 0.94) 0%, rgba(10, 22, 40, 0.82) 55%, rgba(10, 22, 40, 0.68) 100%);
  }

  .section-title {
    font-size: 2rem;
  }

  .about-content .section-title {
    font-size: 2.2rem;
  }

  .features-bar {
    margin-top: -30px;
  }

  .features-bar .container {
    padding: 28px;
    gap: 20px;
  }




  .industries {
    padding: 70px 0;
  }

  .industries-header .section-title {
    font-size: 2rem;
  }

  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .industry-card {
    padding: 22px 20px 24px;
  }

  .vision-content .section-title {
    font-size: 2rem;
  }

  .why-choose-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .why-choose-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .cta-section h2 {
    font-size: 1.8rem;
  }

  /*
    One column made for a very long footer. Quick Links and Our Locations are
    both short lists, so they pair up; the brand block and the contact details
    still need the full width. Locations gets the wider column — its lines are
    the longest of the two.
  */
  .footer-top {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 36px 20px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  /*
    Quick Links is six items to Locations' two, so letting it own both rows of
    the pair lifts Get in Touch up beside it instead of leaving that half of
    the row empty.
  */
  .footer-col:nth-child(2) {
    grid-row: span 2;
  }

  /* The email has no natural break point and the column is now half-width. */
  .footer-contact-item a,
  .footer-contact-item p {
    overflow-wrap: anywhere;
  }

  /*
    Entries wrap to two lines in a half-width column, and centring left the
    icon floating between them. Pin it to the first line instead.
  */
  .footer-col ul li a {
    align-items: flex-start;
  }

  .footer-col ul li a svg {
    margin-top: 5px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    /* Clear the fixed WhatsApp / call / back-to-top stack at the page end. */
    padding-bottom: 72px;
  }


  /* .about-stats is a flex row — grid-template-columns here did nothing. */
  .about-stats {
    flex-wrap: wrap;
    gap: 20px 28px;
  }

  .contact-form-section {
    padding: 70px 0;
  }

  .contact-info .section-title {
    font-size: 2rem;
  }

  .contact-form-card {
    padding: 28px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-info-row {
    flex-direction: column;
    gap: 28px;
  }
}

/*
  The about stats sit between breakpoints: three across still fits at 768, but
  somewhere under 600 the flex row wraps 2 + 1 and the block reads as broken.
  Give it its own breakpoint rather than letting it go ragged until 480.
*/
@media (max-width: 600px) {
  /*
    Two per row left the third item stranded and centred under the pair, so the
    block read as a broken grid. One per row instead, with a hairline between
    each — the same separator pattern the features bar uses when it stacks.
  */
  .about-stats {
    display: block;
    margin-top: 32px;
  }

  .stat-item {
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--gray-200);
  }

  .stat-item:first-child {
    padding-top: 0;
  }

  .stat-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  /* Fixed icon column so every label starts on the same vertical line. */
  .stat-icon {
    flex: 0 0 26px;
  }

  .stat-icon svg {
    width: 26px;
    height: 26px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 2rem;
  }

  /*
    Stacked in one column the vertical dividers drew a stray line down the right
    of every item and nothing separated one from the next. Lay them out as rows
    with a rule between, and drop the gap so the rule reads as the separator.
  */
  .features-bar .container {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .feature-item:nth-child(n) {
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
    padding: 28px 12px;
  }

  .feature-item:first-child {
    padding-top: 0;
  }

  .feature-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .industries-grid {
    grid-template-columns: 1fr;
  }

  /* Keep the floating CTAs from crowding content on the narrowest screens. */
  .floating-btn {
    width: 46px;
    height: 46px;
  }

  .back-to-top {
    width: 42px;
    height: 42px;
    bottom: 20px;
    right: 20px;
  }

  .floating-actions {
    bottom: 74px;
    right: 20px;
  }
}
/* ============================================
   ACCESSIBILITY
   ============================================ */

/* [hidden] must win over the display values set by component rules. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
  Skip link — first thing a keyboard user reaches, invisible until focused.
  Must be `fixed`, not `absolute`: absolute resolves against the document, so
  focusing it part-way down the page parked it far above the viewport.
*/
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 2000;
  padding: 12px 22px;
  background: var(--teal);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/*
  A single visible focus ring for keyboard users across the whole site.
  :focus-visible keeps it off mouse clicks. The dark-surface variant is
  needed because the navy header would swallow a navy ring.
*/
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.header :focus-visible,
.mobile-nav :focus-visible,
.hero :focus-visible,
.vision :focus-visible,
.cta-section :focus-visible,
.footer :focus-visible,
.floating-btn:focus-visible {
  outline-color: var(--white);
}

/* Scroll targets get tabindex="-1" momentarily; no ring for that. */
main:focus,
section:focus {
  outline: none;
}

/* Keep interactive targets at the 44px minimum on touch. */
.back-to-top,
.mobile-nav-close {
  min-width: 44px;
  min-height: 44px;
}

/* ============================================
   LIST / DEFINITION-LIST RESETS
   Several grids became <ul>/<dl> for semantics; strip the UA styling so
   the existing layout rules keep working unchanged.
   ============================================ */
.industries-grid,
.why-choose-grid,
.footer-col ul,
.footer-legal,
.footer-social {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* <dl> carries a UA margin; the component rules own the top margin already. */
.about-stats,
.core-values-grid {
  margin-bottom: 0;
}

.stat-text dd,
.core-value-item dd {
  margin: 0;
}

/* ============================================
   BUTTON VARIANTS
   ============================================ */
.btn-navy {
  background: var(--navy-medium);
  border-color: var(--navy-medium);
}

.btn-navy:hover {
  background: var(--navy);
}

.btn-sm {
  padding: 10px 22px;
  font-size: 0.85rem;
}

/* The base outline button is navy-on-white; on the dark hero it must invert. */
.hero .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}

.hero .btn-outline:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.contact-info-item a,
.footer-contact-item a,
.text-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 165, 165, 0.45);
}

.contact-info-item a:hover,
.footer-contact-item a:hover,
.text-link:hover {
  color: var(--teal);
  text-decoration-color: currentColor;
}

.text-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--teal-dark);
}

/* ============================================
   SERVICE CARD LINK
   ============================================ */
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--teal-dark);
  align-self: flex-start;
}

.service-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.service-link:hover {
  color: var(--navy);
}

.service-link:hover svg {
  transform: translateX(4px);
}





/* ============================================
   CONTACT FORM — VALIDATION & STATES
   ============================================ */

.req {
  color: #c2410c;
  margin-left: 2px;
}

.field-error {
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #b91c1c;
  line-height: 1.4;
}

.form-group input.has-error,
.form-group select.has-error,
.form-group textarea.has-error {
  border-color: #b91c1c;
  background: #fef5f5;
}

.form-consent {
  margin: 4px 0 18px;
  font-size: 0.78rem;
  color: var(--gray-500);
  line-height: 1.6;
}

.form-consent a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-error-banner {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 0.88rem;
  line-height: 1.6;
}

.form-error-banner a {
  color: #991b1b;
  font-weight: 700;
  text-decoration: underline;
}

.contact-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.contact-submit-btn.is-loading .btn-icon {
  animation: spin 1s linear infinite;
}

.form-success-message .btn {
  margin-top: 20px;
}

/* ============================================
   FOOTER ADDITIONS
   ============================================ */
.footer-tagline {
  margin-top: 16px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}

.footer-social a:hover {
  background: var(--teal);
  color: var(--white);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.footer-profile-link svg {
  width: 16px;
  height: 16px;
}

.footer-profile-link:hover {
  border-color: var(--teal);
  color: var(--white);
  background: rgba(0, 165, 165, 0.15);
}

.footer-legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-legal a {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-legal a:hover {
  color: var(--teal);
}

/* ============================================
   REDUCED MOTION
   Honour the OS-level "reduce motion" setting: no marquee, no reveal
   transitions, no hover lifts, no smooth-scroll hijack.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }


  /* Reveal elements must never be left stuck at opacity 0. */
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }

  .service-row:hover,
  .feature-item:hover,
  .why-card:hover,
  .industry-card:hover,
  .client-card:hover,
  .btn:hover {
    transform: none !important;
  }
}

/* ============================================
   SUB PAGES (legal, 404)
   A slim navy header + readable prose column, reusing the site tokens.
   ============================================ */
.subpage-header {
  background: var(--navy);
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.subpage-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.subpage-header .btn {
  padding: 10px 22px;
  font-size: 0.85rem;
}

.page-hero {
  background: var(--navy);
  padding: 60px 0 70px;
  color: var(--white);
}

.page-hero h1 {
  font-size: 2.6rem;
  color: var(--white);
  margin-bottom: 12px;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
}

.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 90px;
}

.prose h2 {
  font-size: 1.45rem;
  color: var(--navy);
  margin: 40px 0 14px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: 1.05rem;
  color: var(--navy);
  margin: 26px 0 10px;
}

.prose p,
.prose li {
  color: var(--gray-600);
  font-size: 0.97rem;
  line-height: 1.8;
}

.prose p {
  margin-bottom: 16px;
}

.prose ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 18px;
}

.prose li {
  margin-bottom: 8px;
}

.prose a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--navy);
}

.prose-meta {
  font-size: 0.85rem;
  color: var(--gray-500);
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--gray-200);
}

/* ---------- 404 ---------- */
.error-page {
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}

.error-code {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 900;
  line-height: 1;
  color: var(--teal);
  opacity: 0.22;
  margin-bottom: -12px;
}

.error-page h1 {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  margin-bottom: 14px;
}

.error-page p {
  color: var(--gray-500);
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.75;
}

.error-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .page-hero h1 {
    font-size: 2rem;
  }

  .prose {
    padding: 44px 24px 70px;
  }

  .subpage-header .logo-text {
    display: none;
  }
}

/* ============================================
   OUR WORK — PROJECT GALLERY
   A card grid that stays tidy from 3 projects to 30: the grid auto-fills, the
   filter bar is generated from whatever categories the cards carry, and
   anything past the first batch waits behind "Load more".
   ============================================ */
.work {
  padding: 110px 0;
  background: var(--white);
  position: relative;
  overflow: hidden;
}

/* Soft teal wash, echoing the industries band so the two sections feel related. */
.work::before {
  content: '';
  position: absolute;
  top: -200px;
  left: -180px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(0, 165, 165, 0.07), transparent 70%);
  pointer-events: none;
}

.work .container {
  position: relative;
  z-index: 1;
}

.work-header {
  max-width: 720px;
  margin-bottom: 40px;
}

.work .section-label {
  background: #e6f0f0;
  color: var(--teal-dark);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}

/* ---------- Filter bar (stays hidden until a second category exists) ---------- */
.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.work-filters[hidden] {
  display: none;
}

.work-filter {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-500);
  background: var(--gray-100);
  border: 1px solid transparent;
  border-radius: 50px;
  padding: 9px 20px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.work-filter:hover {
  color: var(--navy);
  border-color: var(--gray-300);
}

.work-filter[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.work-filter:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

/* ---------- Grid ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.work-card[hidden] {
  display: none;
}

.work-card-btn {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.work-card-btn img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.work-card-btn:hover,
.work-card-btn:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.work-card-btn:hover img,
.work-card-btn:focus-visible img {
  transform: scale(1.06);
}

.work-card-btn:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

/* Caption plate — legible at rest, brighter on hover. */
.work-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 22px;
  text-align: left;
  background: linear-gradient(to top, rgba(10, 22, 40, 0.88) 0%, rgba(10, 22, 40, 0.45) 38%, rgba(10, 22, 40, 0) 68%);
  transition: background var(--transition-medium);
}

.work-card-btn:hover .work-card-overlay,
.work-card-btn:focus-visible .work-card-overlay {
  background: linear-gradient(to top, rgba(10, 22, 40, 0.92) 0%, rgba(10, 22, 40, 0.6) 45%, rgba(10, 22, 40, 0.12) 80%);
}

.work-card-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.work-card-cat {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal-light);
}

.work-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}

.work-card-zoom {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--transition-medium), transform var(--transition-medium);
}

.work-card-zoom svg {
  width: 20px;
  height: 20px;
}

.work-card-btn:hover .work-card-zoom,
.work-card-btn:focus-visible .work-card-zoom {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Load more ---------- */
.work-more {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

.work-more[hidden] {
  display: none;
}

.work-more svg {
  width: 18px;
  height: 18px;
}

/* ============================================
   PROJECT LIGHTBOX
   ============================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  /* No backdrop-filter here on purpose: at 94% opacity the blur is invisible,
     and on software-rendered machines it paints over the panel. */
  background: rgba(6, 14, 26, 0.94);
  animation: lightboxFade 0.25s ease;
}

.lightbox-panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1100px;
  width: 100%;
}

.lightbox-figure {
  flex: 1;
  min-width: 0;
  animation: lightboxPop 0.3s ease;
}

.lightbox-stage {
  display: flex;
  justify-content: center;
}

.lightbox-stage img {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
}

.lightbox-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 18px;
  color: var(--white);
}

.lightbox-cat {
  width: 100%;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal-light);
}

.lightbox-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
}

.lightbox-count {
  margin-left: auto;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.lightbox-close,
.lightbox-nav {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  transition: var(--transition-fast);
}

.lightbox-close svg,
.lightbox-nav svg {
  width: 22px;
  height: 22px;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: var(--teal);
  border-color: var(--teal);
}

.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  outline: 3px solid var(--teal-light);
  outline-offset: 2px;
}

/* Pinned to the viewport, not to the panel, so a short landscape screen can
   never push it off the top edge. */
.lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2;
}

/* One project has nowhere to page to — the arrows hide themselves. */
.lightbox-nav[hidden] {
  display: none;
}

@keyframes lightboxFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes lightboxPop {
  from {
    opacity: 0;
    transform: scale(0.97);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Gallery responsive ---------- */
/* Six nav items need a tighter gap before the mobile menu takes over at 768px. */
@media (max-width: 1024px) {
  .nav-links {
    gap: 24px;
  }
}

/* Small tablets: the links alone no longer clear the header CTA, and the links
   win — "Contact" among them goes to the same place the CTA did. */
@media (min-width: 769px) and (max-width: 880px) {
  .nav-links {
    gap: 20px;
  }

  .nav-cta {
    display: none;
  }
}

@media (max-width: 768px) {
  .work {
    padding: 80px 0;
  }

  .work-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
  }

  .work-card-overlay {
    padding: 18px;
  }

  .work-card-title {
    font-size: 1.05rem;
  }

  /* Touch devices never hover — keep the zoom badge visible. */
  .work-card-zoom {
    opacity: 1;
    transform: scale(1);
    width: 38px;
    height: 38px;
  }

  .lightbox {
    padding: 16px;
  }

  /* Image on top, the two arrows side by side underneath. */
  .lightbox-panel {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: auto auto;
    justify-content: center;
    gap: 14px;
  }

  .lightbox-figure {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }

  .lightbox-prev {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }

  .lightbox-next {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .lightbox-stage img {
    max-height: 58vh;
  }

  .lightbox-close {
    top: 12px;
    right: 12px;
  }

  .lightbox-nav {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 480px) {
  .work-grid {
    grid-template-columns: 1fr;
  }

  .lightbox-title {
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .work-card-btn:hover,
  .work-card-btn:focus-visible,
  .work-card-btn img {
    transform: none !important;
  }

  .lightbox-backdrop,
  .lightbox-figure {
    animation: none !important;
  }
}