/* ==========================================================================
   Riaz & Sons (Pvt.) Ltd. - Master Stylesheet
   Design System: Deep Navy, Vibrant Blue, and Golden Yellow Accent
   ========================================================================== */

:root {
  --primary: #0A3B63;
  --primary-dark: #072a48;
  --primary-light: #0F5A93;
  --accent: #F0B429;
  --accent-dark: #d49a1d;
  --accent-alt: #F0862B;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --bg-light: #f8fafc;
  --bg-white: #ffffff;
  --line: #e2e8f0;
  --transition: all 0.3s ease;
}

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

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

body {
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--text-main);
  background-color: var(--bg-white);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
}

h1, h2, h3, h4, h5, h6, .brand-text, .eyebrow {
  font-family: 'Space Grotesk', sans-serif;
}

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

/* Container & Wrappers */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header & Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-white);
  border-bottom: 1px solid var(--line);
  transition: var(--transition);
}

.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(10, 20, 30, 0.08);
}

.topbar {
  background: var(--primary);
  color: #fff;
  font-size: 13.5px;
  padding: 8px 0;
}

.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Icons are inline SVG rather than text glyphs: ☎ and ✉ are emoji-capable,
   so iOS drew them from Apple Color Emoji, which ignores `color` and rendered
   them in full colour. SVG + fill:currentColor can't be hijacked that way. */
.tb-ico {
  width: 14px;
  height: 14px;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.15em;
}

.bdg-ico {
  width: 19px;
  height: 19px;
  fill: currentColor;
  display: block;
}

.wa-ico {
  width: 30px;
  height: 30px;
  fill: currentColor;
  display: block;
}

/* iOS Safari auto-detects phone numbers and repaints them its default link
   blue, which is unreadable on the dark topbar. Marking them up as real links
   stops the detection; these rules keep them the colour of their surroundings. */
.topbar a,
.info-list a {
  color: inherit;
  text-decoration: none;
}

.topbar a:hover,
.info-list a:hover {
  text-decoration: underline;
}

/* Safety net for anything iOS still auto-detects (e.g. the street address). */
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;              /* stops the brand butting straight into the CTA */
  flex-wrap: nowrap;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand img {
  height: 50px;
  width: auto;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-text b {
  font-size: 20px;
  color: var(--primary);
  letter-spacing: -0.5px;
  white-space: nowrap;    /* "Riaz & Sons" broke onto 3 lines at 320px */
}

.brand-text span {
  font-size: 11px;
  color: var(--accent-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

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

.nav-links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  transition: var(--transition);
  position: relative;
}

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

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
}

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 2px;
  background: var(--primary);
  transition: var(--transition);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 6px;
  transition: var(--transition);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
}

.btn-primary:hover {
  background: var(--primary-light);
  border-color: var(--primary-light);
  transform: translateY(-1px);
}

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

.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

.btn-white {
  background: #fff;
  color: var(--primary);
  border: 1px solid #fff;
}

.btn-white:hover {
  background: var(--bg-light);
}

/* Page Hero Header */
.page-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  padding: 60px 0;
  position: relative;
}

.breadcrumb {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 12px;
}

.breadcrumb span {
  color: rgba(255, 255, 255, 0.7);
}

.page-hero h1 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 12px;
  line-height: 1.2;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  max-width: 600px;
}

/* Homepage Hero Slider */
.hero {
  position: relative;
  height: 85vh;
  min-height: 550px;
  max-height: 750px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.hero-bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.hero-bg-slide.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(7,42,72,0.95) 0%, rgba(10,59,99,0.75) 60%, rgba(10,59,99,0.4) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero-text {
  display: none;
  max-width: 680px;
}

.hero-text.active {
  display: block;
  animation: fadeIn 0.8s ease forwards;
}

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

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin-bottom: 16px;
}

.hero-kicker .line {
  display: inline-block;
  width: 35px;
  height: 2px;
  background: var(--accent);
}

.hero-text h1, .hero-heading {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}

.hero-text h1 .l1, .hero-heading .l1 { display: block; color: #fff; }
.hero-text h1 .l2, .hero-heading .l2 { display: block; color: var(--accent); }

.hero-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 30px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.hero-dots {
  position: absolute;
  bottom: 30px;
  right: 20px;
  z-index: 10;
  display: flex;
  gap: 8px;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
  padding: 0;
}

.hero-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.2);
}

/* Sections & Common Layouts */
.section-pad {
  padding: 80px 0;
}

.section-pad.alt {
  background-color: var(--bg-light);
}

.section-head {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 50px auto;
}

.eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent-dark);
  margin-bottom: 10px;
}

.section-head h2 {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}

.section-head p {
  color: var(--text-muted);
  font-size: 16px;
}

/* Grids & Layouts */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.collage {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 40px -15px rgba(10, 20, 30, 0.15);
}

.collage img, .hero-photo .frame {
  width: 100%;
  height: auto;
  display: block;
}

.about-copy h2 {
  font-size: clamp(26px, 3vw, 36px);
  color: var(--primary);
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.about-copy .lead {
  font-size: 18px;
  font-weight: 500;
  color: var(--primary-light);
  margin-bottom: 20px;
  line-height: 1.5;
}

.about-copy p {
  color: var(--text-muted);
  margin-bottom: 16px;
  font-size: 15.5px;
}

/* Profile Picture Frame Adjustments */
.founder-photo-wrap {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.profile-img-circle {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--accent);
  box-shadow: 0 20px 40px -15px rgba(10, 20, 30, 0.2);
}

.profile-img-landscape {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* Stat Trio Bar */
.stat-trio {
  background: var(--primary);
  color: #fff;
  padding: 40px 0;
  border-top: 3px solid var(--accent);
}

.stat-trio .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: center;
}

.stat-trio div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-trio b, .stat-trio .count-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  margin-bottom: 5px;
}

.stat-trio span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

/* Service Cards / Divisions Section Updates for Full Image Visibility */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  justify-items: center;
  align-items: stretch;
}

.service-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 380px;
  height: 480px;
  text-decoration: none;
  box-shadow: 0 10px 30px -10px rgba(10, 20, 30, 0.1);
  transition: var(--transition);
  background: var(--primary-dark);
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -15px rgba(10, 20, 30, 0.2);
}

.service-card img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
  transition: transform 0.6s ease;
}

.service-card:hover img {
  transform: scale(1.03);
}

.service-card .overlay {
  position: relative;
  flex-grow: 1;
  width: 100%;
  padding: 20px 25px 25px 25px;
  background: linear-gradient(180deg, rgba(7,42,72,0.95) 0%, rgba(7,42,72,1) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.service-card .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 6px;
}

.service-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #fff;
}
CSS
.service-card p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Project Cards Grid */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.proj-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 8px 25px -12px rgba(10, 20, 30, 0.1);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.proj-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px -15px rgba(10, 20, 30, 0.15);
}

.proj-card .thumb {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--primary);
}

.proj-card .thumb img,
.proj-card .thumb svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.proj-card:hover .thumb img {
  transform: scale(1.05);
}

.proj-card .body {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.proj-card h3 {
  font-size: 18px;
  color: var(--primary);
  margin-bottom: 8px;
}

.proj-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Centered Authorised Distributions / Partner Grid Layouts */
.client-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  justify-content: center;
  justify-items: center;
}

.client-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 35px 25px;
  width: 100%;
  max-width: 340px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 4px 15px -8px rgba(10,20,30,0.08);
  margin: 0 auto;
}

.client-item:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.client-item img {
  height: 50px;
  width: auto;
  object-fit: contain;
  margin-bottom: 15px;
}

.client-item b {
  font-size: 18px;
  color: var(--primary);
  margin-bottom: 4px;
}

.client-item span {
  font-size: 13.5px;
  color: var(--text-muted);
}

.client-item .visit {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-dark);
  margin-top: 12px;
}

/* Specifications Rows */
.spec-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.spec-row span:first-child {
  font-weight: 600;
  color: var(--primary);
}

.spec-row span:last-child {
  color: var(--text-muted);
}

/* Legacy & Team Cards */
.legacy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.legacy-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px -15px rgba(10,20,30,0.1);
}

.lc-body {
  padding: 30px;
}

.lc-role {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-dark);
  margin-bottom: 6px;
}

.lc-body h3 {
  font-size: 22px;
  color: var(--primary);
  margin-bottom: 12px;
}

.lc-body p {
  color: var(--text-muted);
  font-size: 15px;
}

/* Leadership Grid with Enlarged Initials/Avatar Frames */
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.lead-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 30px 25px;
  box-shadow: 0 6px 20px -8px rgba(10,20,30,0.06);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: var(--transition);
}

.lead-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.lead-card .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 2px solid var(--accent);
  box-shadow: 0 4px 12px rgba(10, 59, 99, 0.15);
  background: var(--primary);
}

.lead-card .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lead-card h4 {
  font-size: 19px;
  color: var(--primary);
  margin-bottom: 4px;
}

.lead-card .role {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.lead-card p {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Gallery & Filters */
.filter-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  justify-content: center;
}

.filter-chip {
  padding: 8px 18px;
  background: var(--bg-light);
  border: 1px solid var(--line);
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
}

.filter-chip:hover,
.filter-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.gallery-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition: var(--transition);
}

.gallery-item.is-hidden {
  display: none;
}

.gallery-item .frame svg {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.gallery-item .cap {
  padding: 18px;
}

.gallery-item .cap b {
  display: block;
  font-size: 16px;
  color: var(--primary);
  margin-bottom: 4px;
}

.gallery-item .cap span {
  font-size: 13px;
  color: var(--accent-dark);
  font-weight: 600;
  text-transform: uppercase;
}

/* Contact Form Grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-grid .full {
  grid-column: span 2;
}

.form-grid label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-main);
  background: #fff;
  transition: var(--transition);
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(10,59,99,0.1);
}

.form-grid textarea {
  resize: vertical;
  min-height: 130px;
}

/* Contact page: proposal form beside the "Direct Lines" panel.
   This lived as an inline style on the .wrap, which no media query could
   override, so it stayed two-up on phones and ran off the right edge. */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: start;
}

/* fr tracks floor at min-content by default, so a long phone number or
   address stops the column shrinking. This lets them narrow properly. */
.contact-grid > * {
  min-width: 0;
}

.contact-form-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 34px 30px;
  box-shadow: 0 12px 30px -20px rgba(10, 20, 30, 0.2);
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-list > div {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.info-list > div > div {
  min-width: 0;
}

.info-list span {
  overflow-wrap: anywhere;
}

.icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--bg-light);
  border: 1px solid var(--line);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.info-list b {
  display: block;
  font-size: 14px;
  color: var(--primary);
  margin-bottom: 2px;
}

.info-list span {
  font-size: 15px;
  color: var(--text-muted);
}

.map-frame {
  width: 100%;
  height: 400px;
  border: none;
  display: block;
}

/* Call To Action Band */
.cta-band {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  padding: 70px 0;
  text-align: center;
}

.cta-band h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  margin-bottom: 25px;
  letter-spacing: -0.5px;
}

.cta-band h2 em {
  color: var(--accent);
  font-style: normal;
}

/* Footer Styles Layout & Social Alignments Fixed */
.site-footer {
  background: #05192c;
  color: rgba(255, 255, 255, 0.8);
  padding: 70px 0 30px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 50px;
  align-items: start;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.footer-brand img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.footer-brand b {
  font-size: 20px;
  color: #fff;
}

.site-footer p {
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.7);
}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Scoped through .footer-grid so these outrank the generic
   `.site-footer .footer-grid div a` rule below, which would otherwise force
   display:block (breaking the centring) and repaint the icon on hover. */
.site-footer .footer-grid .footer-social a {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--transition);
}

/* currentColor makes the glyph track the link colour, so the icon is white at
   rest and turns dark blue against the yellow hover fill with no extra rule. */
.site-footer .footer-grid .footer-social a svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: currentColor;
}

.site-footer .footer-grid .footer-social a:hover,
.site-footer .footer-grid .footer-social a:focus-visible {
  background: var(--accent);
  color: var(--primary);
  padding-left: 0;
}

.site-footer h4 {
  font-size: 16px;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.site-footer .footer-grid div a {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 14px;
  transition: var(--transition);
}

.site-footer .footer-grid div a:hover {
  color: var(--accent);
  padding-left: 4px;
}

.offices {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.office b {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 2px;
}

.office p {
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
  flex-wrap: wrap;
  gap: 15px;
}

/* Floating WhatsApp Button */
.wa-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 55px;
  height: 55px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 26px;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--transition);
}

.wa-float:hover {
  transform: scale(1.1);
  background-color: #20ba5a;
}

/* Dividers & Utility */
.divider {
  border: none;
  height: 1px;
  background: var(--line);
  margin: 0;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .service-grid, .project-grid, .gallery-grid, .client-grid, .leadership-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer-grid > div:first-child {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-bottom: 1px solid var(--line);
  }
  
  .nav-links.show {
    display: flex;
  }

  /* the 28px gap is tuned for the horizontal desktop bar; stacked it leaves
     the panel very airy, so rows carry the spacing instead */
  .nav-links {
    gap: 0;
    padding: 8px 20px;
  }

  .nav-links a {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-links a:last-child {
    border-bottom: none;
  }

  /* space-between splits all the leftover width into the two gaps, so the
     CTA and burger drifted further apart the wider the screen got. The menu
     panel is absolutely positioned here, so pushing the brand left with an
     auto margin leaves the two controls paired at the right on a fixed gap. */
  .nav {
    justify-content: flex-start;
    gap: 8px;
  }

  .brand {
    margin-right: auto;
  }

  /* The bar holds brand + CTA + burger on one line, so everything shrinks to
     make room and the two controls are given a matching 44px height (also the
     minimum comfortable touch target — the burger used to be 35x26). */
  .brand img {
    height: 40px;
  }

  .brand-text b {
    font-size: 17px;
  }

  .brand-text span {
    font-size: 9px;
    letter-spacing: 0.5px;
  }

  .nav .nav-cta {
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
  }

  /* 25px bars centred in a 44px box left ~9.5px of dead space either side,
     which read as extra gap. Narrower box, full-height tap target kept. */
  .hamburger {
    display: flex;
    width: 34px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
  }

  .grid-2, .about-grid, .legacy-grid, .service-grid, .project-grid, .gallery-grid, .client-grid, .leadership-grid, .stat-trio .wrap, .contact-grid {
    grid-template-columns: 1fr;
  }

  /* form full width, Direct Lines below it */
  .contact-grid {
    gap: 30px;
  }

  .contact-form-card {
    padding: 26px 20px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .form-grid .full {
    grid-column: span 1;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-grid > div:first-child {
    grid-column: span 1;
  }
  
  .section-pad {
    padding: 50px 0;
  }
}

/* Small phones: reclaim the side padding. */
@media (max-width: 480px) {
  /* sides only — the shorthand would reset .nav's vertical padding to 0 */
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Narrow phones (320px class). Brand, CTA and burger all stay on the bar, so
   every piece gives up a few pixels to make one line fit without collisions.
   The CTA and burger keep a 44px height so they stay aligned and tappable. */
@media (max-width: 400px) {
  .nav {
    gap: 8px;
  }

  .brand {
    gap: 8px;
  }

  .brand img {
    height: 32px;
  }

  .brand-text b {
    font-size: 15px;
  }

  .brand-text span {
    font-size: 8px;
    letter-spacing: 0.3px;
  }

  /* height and font-size already set for the mobile bar above */
  .nav .nav-cta {
    padding: 0 10px;
  }
}