/*
Theme Name: Interic Asia V3
Theme URI: https://intericsasia.com
Author: Interics Asia
Description: A modern architecture and interior design consultancy theme for Interics Asia.
Version: 1.0.1
Text Domain: interic-asiav3
*/

/* ===== Brand tokens =====
   Added 2026-08-04. The accent teal was hardcoded 73 times; it is now tokenised.

   --ia-teal        var(--ia-teal)  brand teal. KEEP for BACKGROUNDS (white text on it passes AA).
   --ia-teal-text   #00767A  same hue, ~25% darker. Use for TEXT, LINKS, BORDERS on the
                             cream/white surfaces. The original measured 2.80:1 on #F9F7F2 —
                             below even the 3:1 large-text floor — so every teal CTA and link
                             on the site failed WCAG AA. #00767A measures 4.54:1: passes AA
                             at every size while staying visually the same colour family.
   --ia-teal-deep   var(--ia-teal-deep)  pre-existing darker teal, used in gradients.                    */
:root {
  --ia-teal: #00A6A7;
  --ia-teal-text: #00767A;
  --ia-teal-deep: #007F80;
  /* One editorial typeface for all site copy. The homepage uses Inter Light for
     display statements and Inter Regular for supporting copy; keep the same
     family and reliable text weights everywhere else in the theme. */
  --ia-font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ia-copy-weight: 400;
  --ia-copy-strong-weight: 600;
}

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

html {
  scroll-behavior: smooth;
  /* clip (not hidden) prevents full-bleed sections from causing a horizontal
     scrollbar, without breaking position: sticky like overflow:hidden would. */
  overflow-x: clip;
}

body {
  font-family: var(--ia-font-sans);
  font-weight: var(--ia-copy-weight);
  color: #1B1E25;
  background-color: #f7f6f3;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ia-font-sans);
}

button,
input,
select,
textarea {
  font-family: var(--ia-font-sans);
}

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

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

/* ===== Layout ===== */
.page-wrapper {
  display: flex;
  max-width: 1280px;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin: 0 auto;
  padding-bottom: 28px;
}

.container {
  max-width: 1088px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.container-wide {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
  width: 100%;
}

/* ===== Hero Section ===== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* full viewport, accounts for mobile browser chrome */
  min-height: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  z-index: 1;
}

/* ===== Hero Play Button (Glass Card + Microinteractions) ===== */
.hero__play {
  position: absolute;
  /* Moved back down to 80% on 2026-08-06 at the client's request (had been centred at
     50% since 2026-08-05).
     ⚠️ This rule is in style.css, so it moves the button on the LIVE homepage and on
     /home-v2/ together — the two heroes are deliberately identical. */
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

/* ===== Video Modal ===== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}

.video-modal--active {
  opacity: 1;
  visibility: visible;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.video-modal__content {
  position: relative;
  width: 90%;
  max-width: 960px;
  transform: scale(0.9);
  transition: transform 0.35s;
}

.video-modal--active .video-modal__content {
  transform: scale(1);
}

.video-modal__player {
  width: 100%;
  border-radius: 0;
  background: #000;
  display: block;
}

.video-modal__close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.video-modal__close:hover {
  opacity: 1;
}

/* ===== Header ===== */
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 80px;
  backdrop-filter: blur(2px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.3s, backdrop-filter 0.3s;
}

.site-header--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* 2026-08-04: was 0.55, which composited to rgb(123,122,120) over the cream page and
     gave the white nav links only 4.28:1 — under the 4.5:1 AA minimum for 18px/500 text.
     0.62 composites to rgb(107,106,104) = 5.39:1. Only affects the homepage sticky state
     (inner pages use .site-header--solid, which already passes); over the dark hero video
     the header is transparent and unaffected. */
  background: rgba(20, 20, 20, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.site-header__logo img {
  width: auto;
  height: 40px;
  filter: none;
}

.site-header__nav {
  display: flex;
  gap: 40px;
  align-items: center;
}

.site-header__nav a,
.site-header__nav .nav-dropdown__toggle {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  transition: color 0.3s;
}

.site-header__nav a:hover,
.site-header__nav .nav-dropdown__toggle:hover {
  color: var(--ia-teal-text);
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.btn-contact:hover {
  border-color: var(--ia-teal);
  box-shadow: 0 0 16px rgba(0, 166, 167, 0.6), 0 0 4px rgba(0, 166, 167, 0.85);
}

.btn-contact:active {
  border-color: var(--ia-teal-text);
  box-shadow: 0 0 10px rgba(0, 118, 122, 0.55);
}

.hero__spacer {
  flex: 1;
}

/* ===== About Section ===== */
.about {
  padding: 65px 0;
  width: 100%;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 128px;
  align-items: center;
  min-height: 640px;
}

.about__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ia-teal-text);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 40px;
}

.about__heading {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.5px;
  color: #1B1E25;
  margin-bottom: 40px;
}

.about__heading span {
  color: var(--ia-teal-text);
}

.about__text {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: #1B1E25;
  margin-bottom: 40px;
}

.about__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding-top: 24px;
}

.about__stat-number {
  font-size: 48px;
  font-weight: 900;
  color: var(--ia-teal-text);
  line-height: 1;
  margin-bottom: 12px;
}

.about__stat-label {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.about__image-wrapper {
  position: relative;
  width: 412px;
  aspect-ratio: 4 / 5;
  justify-self: end;
}

.about__image-bg {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.98deg);
  width: 112%;
  height: 103%;
  background: rgba(0, 166, 167, 0.1);
  border-radius: 0;
}

.about__image {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.about__image--slideshow .about__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.about__image--slideshow .about__slide--active {
  opacity: 1;
}

.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Presence Section ===== */
.presence {
  display: flex;
  width: 1280px;
  max-width: 100%;
  padding: 78px 96px 78px 96px;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  overflow: hidden;
}

.presence__heading {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #1B1E25;
}

.presence__map {
  position: relative;
  width: 100%;      /* almost full within the section padding (which forms the margin) */
  max-width: 1100px;
  flex-shrink: 0;
  margin: 0 auto;
}

/* Inline flat 2D world map SVG — fills the container; pins are % of this same box. */
.presence__worldmap {
  width: 100%;
  height: auto;
  display: block;
}

/* Map Pin Markers */
.map-pin {
  position: absolute;
  transform: translate(-50%, -100%) scale(0);
  z-index: 3; /* direct offices sit above partner pins */
  cursor: pointer;
  width: 28px;
  height: 38px;
  opacity: 0;
  /* Center the icon (main 28px, partner 22px) horizontally and pin its base to the
     container bottom so the tip — and the glow under it — sit exactly on the map point. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease;
}

.presence__map--visible .map-pin {
  transform: translate(-50%, -100%) scale(1);
  opacity: 1;
}

.presence__map--visible .map-pin:nth-child(2) { transition-delay: 0.3s; }
.presence__map--visible .map-pin:nth-child(3) { transition-delay: 0.6s; }
.presence__map--visible .map-pin:nth-child(4) { transition-delay: 0.9s; }
.presence__map--visible .map-pin:nth-child(5) { transition-delay: 1.2s; }
.presence__map--visible .map-pin:nth-child(6) { transition-delay: 1.5s; }
.presence__map--visible .map-pin:nth-child(7) { transition-delay: 1.8s; }
.presence__map--visible .map-pin:nth-child(8) { transition-delay: 2.1s; }
.presence__map--visible .map-pin:nth-child(9) { transition-delay: 2.4s; }

/* 3D Pin Icon */
.map-pin__icon {
  position: relative;
  z-index: 2;
  filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.5));
  transition: transform 0.25s ease;
}

.map-pin:hover .map-pin__icon {
  transform: scale(1.15) translateY(-2px);
}

/* Bring the hovered pin (and its hotspot) above all other pins */
.map-pin:hover,
.map-pin--active,
.map-pin--has-hotspot:hover {
  z-index: 100;
}

/* Glow-blur pulse animation at pin tip */
.map-pin__glow {
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(27, 30, 37, 0.5);
  transform: translateX(-50%);
  z-index: 1;
  animation: pinGlow 2s ease-in-out infinite;
}

@keyframes pinGlow {
  0%, 100% {
    box-shadow: 0 0 6px 4px rgba(27, 30, 37, 0.35);
    transform: translateX(-50%) scale(1);
    opacity: 0.8;
  }
  50% {
    box-shadow: 0 0 16px 10px rgba(27, 30, 37, 0.5);
    transform: translateX(-50%) scale(1.6);
    opacity: 0.2;
  }
}

/* City name label on hover */
.map-pin__label {
  position: absolute;
  top: -8px;
  left: 0;
  transform: translateY(-100%) translateY(8px);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 0;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(27, 30, 37, 0.3);
  border: 1px solid rgba(27, 30, 37, 0.4);
}

.map-pin__label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 16px;
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.85);
}

.map-pin:hover .map-pin__label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-100%);
}

/* Hide simple label on hotspot pins — hotspot card replaces it */
.map-pin--has-hotspot:hover .map-pin__label {
  opacity: 0;
  visibility: hidden;
}

/* Hotspot interaction card */
.map-pin__hotspot {
  position: absolute;
  top: -14px;
  left: 0;
  transform: translateY(-100%) translateY(12px) scale(0.92);
  width: 240px;
  padding: 16px 18px;
  background: rgba(12, 12, 14, 0.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(27, 30, 37, 0.35);
  border-radius: 0;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(27, 30, 37, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  z-index: 10;
}

.map-pin__hotspot::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 16px;
  border: 8px solid transparent;
  border-top-color: rgba(12, 12, 14, 0.82);
}

.map-pin--has-hotspot:hover .map-pin__hotspot,
.map-pin--active .map-pin__hotspot {
  opacity: 1;
  visibility: visible;
  transform: translateY(-100%) scale(1);
  pointer-events: auto;
}

.map-pin--active .map-pin__label {
  opacity: 0;
  visibility: hidden;
}

.map-pin__hotspot-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.map-pin__hotspot-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(27, 30, 37, 0.6));
}

.map-pin__hotspot-city {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

.map-pin__hotspot-address {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  padding-left: 28px;
}

/* ===== Services Section ===== */
.services {
  padding: 75px 80px 0;
  width: 100%;
}

.services__heading {
  font-size: 48px;
  font-weight: 700;
  color: #1B1E25;
  text-align: left;
  letter-spacing: -1.2px;
  margin-bottom: 80px;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 100%;
}

.service-card {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  padding: 49px;
  min-height: 410px;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.05);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              opacity 0.8s ease;
}

/* Stacked state (default) */
.services__grid:not(.services__grid--spread) .service-card {
  opacity: 0.85;
}

.services__grid:not(.services__grid--spread) .service-card:nth-child(1) {
  transform: translateX(300px) rotate(8deg) scale(0.9);
  z-index: 1;
}

.services__grid:not(.services__grid--spread) .service-card:nth-child(2) {
  transform: scale(0.95);
  z-index: 3;
}

.services__grid:not(.services__grid--spread) .service-card:nth-child(3) {
  transform: translateX(-300px) rotate(-8deg) scale(0.9);
  z-index: 2;
}

/* Spread state */
.services__grid--spread .service-card {
  opacity: 1;
  transform: translateX(0) rotate(0deg) scale(1);
}

.services__grid--spread .service-card:nth-child(1) {
  transition-delay: 0.1s;
}

.services__grid--spread .service-card:nth-child(2) {
  transition-delay: 0.25s;
}

.services__grid--spread .service-card:nth-child(3) {
  transition-delay: 0.4s;
}

/* Hover pop-up effect (only when spread) */
.services__grid--spread .service-card:hover {
  transform: translateY(-16px) scale(1.05);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18),
              0 0 0 1px rgba(0, 166, 167, 0.1);
  z-index: 10;
}

.service-card__icon {
  height: 36px;
  width: auto;
  margin-bottom: 32px;
}

.service-card__icon img {
  height: 100%;
  width: auto;
}

.service-card__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.33;
  color: #1B1E25;
  margin-bottom: 24px;
}

.service-card__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.625;
  color: #1B1E25;
  text-align: left;
}

/* ===== Local Wisdom Section ===== */
.wisdom {
  padding: 70px 0;
  width: 100%;
}

.wisdom__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
}

.wisdom__heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.2px;
  color: #1B1E25;
  margin-bottom: 40px;
}

.wisdom__heading span {
  color: var(--ia-teal-text);
}

.wisdom__text {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.625;
  color: #1B1E25;
}

.differentials__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ia-teal-text);
  text-transform: uppercase;
  letter-spacing: 2.8px;
  margin-bottom: 24px;
}

.differentials__divider {
  width: 100%;
  height: 2px;
  background: #1B1E25;
  margin-bottom: 24px;
}

.differentials__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  padding-top: 24px;
}

.differential-item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
}

.differential-item__icon {
  width: 12px;
  height: 16px;
  flex-shrink: 0;
}

.differential-item__icon img {
  width: 100%;
  height: 100%;
}

.differential-item__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #1B1E25;
}

/* ===== Projects Section ===== */
.projects {
  padding: 80px 0 0;
  text-align: center;
  width: 100%;
}

.projects__heading {
  font-size: 40px;
  font-weight: 700;
  color: #1B1E25;
  margin-bottom: 24px;
}

.projects__tabs {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 8px;
  margin-bottom: 24px;
}

.projects__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #1B1E25;
  text-shadow: none;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.projects__tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  pointer-events: none;
}

.projects__tab:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05) translateY(-1px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}

.projects__tab--active {
  background: rgba(0, 166, 167, 0.35);
  border-color: rgba(0, 166, 167, 0.5);
  color: var(--ia-teal-deep);
  box-shadow:
    0 8px 24px rgba(0, 166, 167, 0.25),
    0 0 20px rgba(0, 166, 167, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 166, 167, 0.1);
}

.projects__tab:active {
  transform: scale(0.92);
  transition: all 0.1s ease;
}

@keyframes tabBounceGlow {
  0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(0, 166, 167, 0.5); }
  50% { transform: scale(1.08); box-shadow: 0 0 24px 8px rgba(0, 166, 167, 0.3); }
  100% { transform: scale(1); box-shadow: 0 8px 24px rgba(0, 166, 167, 0.25), 0 0 20px rgba(0, 166, 167, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
}

.projects__tab--active {
  animation: tabBounceGlow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.projects__tab-others {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ia-teal-text);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 166, 167, 0.3);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.projects__tab-others:hover {
  background: rgba(0, 166, 167, 0.15);
  border-color: rgba(0, 166, 167, 0.5);
  transform: scale(1.05) translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 166, 167, 0.15);
}

.projects__tab-others--active {
  background: rgba(0, 166, 167, 0.35);
  border-color: rgba(0, 166, 167, 0.5);
  color: var(--ia-teal-deep);
  box-shadow:
    0 8px 24px rgba(0, 166, 167, 0.25),
    0 0 20px rgba(0, 166, 167, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 166, 167, 0.1);
  animation: tabBounceGlow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.projects__tab-others--active img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(66%) saturate(1547%) hue-rotate(154deg) brightness(89%) contrast(101%);
}

.projects__tab-others img {
  width: 15px;
  height: 15px;
}

/* ===== Project Showcase (Card Slider) ===== */
.project-showcase {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
}

.project-showcase__track-wrapper {
  overflow: hidden;
  flex: 1;
}

.project-showcase__track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-showcase__card {
  flex: 0 0 calc(50% - 12px);
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Mobile: native horizontal scroll with snap, hide JS-driven arrows, full-width cards */
@media (max-width: 720px) {
  .project-showcase {
    padding: 0;
    gap: 0;
  }
  .project-showcase__nav { display: none; }
  .project-showcase__track-wrapper {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .project-showcase__track-wrapper::-webkit-scrollbar { display: none; }
  .project-showcase__track {
    transform: none !important;
    padding: 0 20px;
    gap: 16px;
  }
  .project-showcase__card {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
  .project-showcase__card-img { height: 200px; }
  .project-showcase__card-info { height: auto; padding: 18px 20px; }
}

.project-showcase__card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.project-showcase__card-img {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  cursor: pointer;
}

/* "VIEW WORK" glass pill — follows cursor, teal glassmorphism */
.project-showcase__card-img::after {
  content: 'VIEW WORK';
  position: absolute;
  top: var(--cursor-y, 50%);
  left: var(--cursor-x, 50%);
  transform: translate(-50%, -50%) scale(0.85);
  padding: 9px 20px;
  border-radius: 0;
  background: rgba(0, 166, 167, 0.35);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 6px 22px rgba(0, 166, 167, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition:
    opacity 0.3s ease,
    top 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
  pointer-events: none;
}

.project-showcase__card:hover .project-showcase__card-img::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.project-showcase__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.project-showcase__card:hover .project-showcase__card-img img {
  transform: scale(1.05);
}

.project-showcase__card-info {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  height: 180px;
}

.project-showcase__card-title {
  font-size: 20px;
  font-weight: 700;
  color: #1B1E25;
  margin-bottom: 8px;
}

.project-showcase__card-desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #555;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-showcase__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ia-teal-text);
  transition: gap 0.3s ease;
  margin-top: auto;
}

.project-showcase__card-cta:hover {
  gap: 12px;
}

.project-showcase__card-cta img {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(52%) sepia(81%) saturate(400%) hue-rotate(140deg);
}

/* Nav arrows on sides */
.project-showcase__nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  padding: 0;
  font-size: 32px;
  font-weight: 300;
  color: #1B1E25;
}

.project-showcase__nav:hover {
  opacity: 0.5;
}

.project-showcase__nav img {
  display: none;
}

/* ===== Contact / Footer Section ===== */
.contact-section {
  background: #f7f6f3;
  border-top: none;
  padding: 20px 80px;
  width: 100%;
}

.contact-section__heading {
  font-size: 40px;
  font-weight: 700;
  color: #1B1E25;
  margin-bottom: 40px;
}

/* Offices grid */
.offices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 64px;
}

.office__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ia-teal-text);
  margin-bottom: 8px;
  text-decoration: none;
  letter-spacing: 0.04em;
  position: relative;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
}

.office__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.office__title:hover,
.office__title:focus-visible {
  color: var(--ia-teal-deep);
  letter-spacing: 0.06em;
  outline: none;
}

.office__title:hover::after,
.office__title:focus-visible::after {
  transform: scaleX(1);
}

.office__address {
  font-size: 14px;
  font-weight: 400;
  color: #1B1E25;
  line-height: 1.43;
}

/* Contact form */
.contact-form {
  margin-bottom: 64px;
}

.contact-form__field {
  margin-bottom: 18px;
}

.contact-form__label {
  display: block;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ia-teal-text);
}

.contact-form__hint {
  display: block;
  font-size: 10px;
  font-style: italic;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(0, 0, 0, 0.7);
  padding: 0 10px 4px;
}

.contact-form__input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px 10px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #1B1E25;
  outline: none;
}

.contact-form__input:focus ~ .contact-form__line {
  background: var(--ia-teal);
}

.contact-form__line {
  width: 100%;
  height: 0.5px;
  background: rgba(27, 28, 29, 0.4);
  transition: background 0.3s;
}

.contact-form__actions {
  margin-top: 40px;
  display: flex;
  justify-content: flex-start;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
  line-height: 1.5;
  padding: 8px 10px;
}

.contact-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.contact-form__notice {
  margin-bottom: 28px;
  padding: 14px 18px;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.55;
}

.contact-form__notice--ok {
  background: rgba(0, 166, 167, 0.1);
  color: var(--ia-teal-deep);
  border: 1px solid rgba(0, 166, 167, 0.3);
}

.contact-form__notice--err {
  background: rgba(27, 30, 37, 0.08);
  color: #b3261e;
  border: 1px solid rgba(27, 30, 37, 0.3);
}

.contact-form__notice a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ia-teal);
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.25s ease, gap 0.25s ease, box-shadow 0.25s ease;
}

.contact-form__submit:hover {
  background: var(--ia-teal-deep);
  gap: 14px;
  box-shadow: 0 6px 18px rgba(0, 166, 167, 0.3);
}

.contact-form__submit svg {
  transition: transform 0.25s ease;
}

.contact-form__submit:hover svg {
  transform: translateX(2px);
}

/* ===== Site Footer ===== */
.site-footer {
  padding: 0 80px 20px;
  width: 100%;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}

.footer__brand-logo {
  margin-bottom: 24px;
}

.footer__brand-logo img {
  width: 171px;
  height: auto;
}

.footer__brand-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.625;
  color: #1B1E25;
  max-width: 384px;
  margin-bottom: 24px;
}

.footer__socials {
  display: flex;
  gap: 16px;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  transition: background 0.3s;
}

.footer__social-link:hover {
  background: #e5e5e5;
}

.footer__social-link img {
  width: 12px;
  height: 12px;
}

.footer__col-title {
  font-size: 16px;
  font-weight: 700;
  color: #1B1E25;
  margin-bottom: 16px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__links a {
  font-size: 14px;
  font-weight: 400;
  color: #1B1E25;
  transition: color 0.3s;
}

.footer__links a:hover {
  color: var(--ia-teal-text);
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.footer__contact-item--cta {
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 0;
  margin-left: -12px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.footer__contact-item--cta:hover {
  background: rgba(0, 166, 167, 0.08);
  box-shadow: 0 2px 12px rgba(0, 166, 167, 0.15);
}

.footer__contact-item--cta:hover span {
  color: var(--ia-teal-text);
}

.footer__contact-item--cta:hover img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(81%) saturate(400%) hue-rotate(140deg);
}

.footer__contact-item img {
  width: 10px;
  height: auto;
  flex-shrink: 0;
  transition: filter 0.3s ease;
}

.footer__contact-item span {
  font-size: 14px;
  color: #1B1E25;
  line-height: 1.43;
  transition: color 0.3s ease;
}

/* Footer bottom */
.footer__bottom {
  border-top: 0.5px solid rgba(27, 28, 29, 0.4);
  padding-top: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__copyright {
  font-size: 12px;
  color: #1B1E25;
}

.footer__legal {
  display: flex;
  gap: 32px;
}

.footer__legal a {
  font-size: 12px;
  color: #1B1E25;
  transition: color 0.3s;
}

.footer__legal a:hover {
  color: var(--ia-teal-text);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .site-header {
    padding: 10px 40px;
  }
  .site-header__logo img {
    width: auto;
    height: 34px;
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .about__heading {
    font-size: 42px;
  }

  .about__image-wrapper {
    width: 100%;
    max-width: 412px;
    justify-self: center;
  }

  .services {
    padding: 60px 40px 0;
  }

  .services__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .wisdom__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

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

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .project-showcase__card {
    flex: 0 0 calc(100% - 12px);
  }

  .contact-section {
    padding: 40px;
  }

  .site-footer {
    padding: 0 40px 40px;
  }
}

@media (max-width: 768px) {
  .site-header {
    padding: 16px 20px;
    flex-wrap: wrap;
    gap: 16px;
  }

  .site-header__nav {
    gap: 20px;
  }

  .hero {
    height: 500px;
  }

  .about__heading {
    font-size: 36px;
    line-height: 1.1;
  }

  .about__text {
    font-size: 16px;
  }

  .about__stat-number {
    font-size: 36px;
  }

  .presence__heading,
  .services__heading,
  .wisdom__heading,
  .projects__heading {
    font-size: 32px;
  }

  .service-card {
    padding: 32px;
    min-height: auto;
  }

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

  .projects__tabs {
    gap: 8px;
  }

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

  .contact-section__heading {
    font-size: 28px;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding-top: 32px;
  }
}

/* ============================================
   PROJECT DETAIL PAGE
   ============================================ */
.project-detail {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #1B1E25;
  color: #fff;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.project-detail__slider {
  position: absolute;
  inset: 0;
}

.project-detail__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 500ms ease;
}

.project-detail__slide--active {
  opacity: 1;
}

/* Placeholder slide for projects with fewer than 5 photos */
.project-detail__slide--placeholder {
  background: #1B1E25;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-detail__placeholder-text {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Plain white arrow buttons — no background, no shape */
.project-detail__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.project-detail__arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.project-detail__arrow--prev { left: 16px; }
.project-detail__arrow--next { right: 16px; }

@media (max-width: 720px) {
  .project-detail__arrow svg { width: 36px; height: 36px; }
  .project-detail__arrow--prev { left: 6px; }
  .project-detail__arrow--next { right: 6px; }
  .project-detail__placeholder-text { font-size: 13px; }
}

.project-detail__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}

.project-detail__back {
  position: absolute;
  top: 36px;
  left: 48px;
  color: #fff;
  text-decoration: none;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 0.02em;
  z-index: 3;
  transition: opacity 200ms ease;
}

.project-detail__back:hover {
  opacity: 0.75;
}

.project-detail__back strong {
  font-weight: 700;
}

.project-detail__logo {
  position: absolute;
  top: 28px;
  right: 48px;
  z-index: 3;
  display: block;
}

.project-detail__logo img {
  height: 42px;
  width: auto;
  display: block;
}

.project-detail__content {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 72px;
  max-width: 900px;
  z-index: 2;
}

.project-detail__title {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 24px;
  color: #fff;
  letter-spacing: -0.01em;
}

.project-detail__title-main {
  font-weight: 400;
}

.project-detail__title-sub {
  font-weight: 700;
  margin-left: 8px;
}

.project-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 28px;
  margin: 0 0 20px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.project-detail__meta span {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  color: rgba(255, 255, 255, 0.85);
}

.project-detail__meta em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.75;
}

.project-detail__meta strong {
  font-weight: 700;
}

.project-detail__desc {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}

/* Collapse desc to ~4 lines + Show more toggle (desktop and mobile) */
.project-detail__desc-wrap {
  position: relative;
}

.project-detail__desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 0;
  background: transparent;
  border: none;
  color: #fff;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.project-detail__desc-toggle:hover {
  color: var(--ia-teal-text);
}

.project-detail__desc-toggle svg {
  transition: transform 0.25s ease;
}

.project-detail__desc-wrap.is-expanded .project-detail__desc-toggle svg {
  transform: rotate(180deg);
}

/* Fade the text itself out at bottom (mask) — works on photo background without rectangle shadow */
.project-detail__desc-wrap:not(.is-expanded) .project-detail__desc {
  max-height: 6.4em; /* ~4 lines at line-height 1.6 */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.project-detail__desc-wrap.is-expanded .project-detail__desc {
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}

.project-detail__dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.project-detail__dot {
  width: 36px;
  height: 3px;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease;
}

.project-detail__dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.project-detail__dot--active {
  background: #c11271;
}

.project-detail--missing {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f7f6f3;
  color: #1B1E25;
}

.project-detail__missing h1 {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 36px;
  margin-bottom: 20px;
}

.project-detail__missing a {
  color: var(--ia-teal-text);
  text-decoration: none;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
}

@media (max-width: 768px) {
  .project-detail__back {
    top: 20px;
    left: 20px;
    font-size: 14px;
  }

  .project-detail__logo {
    top: 16px;
    right: 20px;
  }

  .project-detail__logo img {
    height: 32px;
  }

  .project-detail__content {
    left: 20px;
    right: 20px;
    bottom: 56px;
  }

  .project-detail__title {
    font-size: 32px;
  }

  .project-detail__meta {
    gap: 12px 18px;
    font-size: 12px;
  }

  .project-detail__desc {
    font-size: 13px;
  }
}

/* ============================================
   SCROLL REVEAL (About Us, Local Wisdom, Our Projects)
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal--image {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-revealed,
.reveal--image.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--image {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================
   CONTACT PHONE DROPDOWN (footer)
   ============================================ */
.contact-phone-dropdown {
  position: relative;
}

.contact-phone-dropdown__toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.contact-phone-dropdown__caret {
  width: 12px;
  height: 8px;
  margin-left: 4px;
  color: var(--ia-teal-text);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.contact-phone-dropdown.is-open .contact-phone-dropdown__caret {
  transform: rotate(180deg);
}

.footer__contact-item--cta:hover .contact-phone-dropdown__caret {
  color: var(--ia-teal-text);
}

.contact-phone-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 10;
}

.contact-phone-dropdown.is-open .contact-phone-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.contact-phone-dropdown__menu li {
  margin: 0;
}

.contact-phone-dropdown__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: #1B1E25;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  transition: background 0.2s ease;
}

.contact-phone-dropdown__menu a:hover,
.contact-phone-dropdown__menu a:focus-visible {
  background: rgba(0, 166, 167, 0.1);
  color: var(--ia-teal-deep);
  outline: none;
}

.contact-phone-dropdown__number {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.contact-phone-dropdown__flag {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

/* ============================================================
   v3 multi-page additions
   ============================================================ */

/* ----- Header dropdown menu (Projects → countries) ----- */
.nav-dropdown {
  /* Static so the absolutely-positioned menu uses .site-header as its
     positioning context — i.e. menu centers on the page, not under the toggle. */
  position: static;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown__link {
  display: inline-flex;
  align-items: center;
  padding: 16px 0;
  margin: -16px 0;
}

.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: none;
  /* Bigger vertical hit area so the dropdown triggers the moment the cursor reaches it */
  padding: 16px 2px;
  margin: -16px 0 -16px 5px;
  cursor: pointer;
  transition: color 0.3s;
}

.nav-dropdown__toggle:focus { outline: none; }
.nav-dropdown__toggle:focus-visible {
  outline: 2px solid var(--ia-teal-text);
  outline-offset: 4px;
  border-radius: 4px;
}

.nav-dropdown__caret {
  width: 10px;
  height: 7px;
  transition: transform 0.25s ease;
}

.nav-dropdown:hover .nav-dropdown__caret,
.nav-dropdown.is-open .nav-dropdown__caret,
.nav-dropdown:focus-within .nav-dropdown__caret {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 760px;
  max-width: calc(100vw - 32px);
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Opens instantly; closes instantly so swapping between menus feels immediate */
  transition: opacity 0.08s ease, transform 0.08s ease, visibility 0.08s;
  z-index: 1100;
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Bridge covers the gap between toggle and menu, but must NOT block sibling
   toggles, so it only sits directly under the open menu's own column area.
   pointer-events:none keeps it from intercepting hovers on other nav items;
   the JS hover-intent timer handles keeping the menu open across the gap. */
.nav-dropdown__menu::before {
  content: '';
  position: absolute;
  top: -24px; left: 0; right: 0;
  height: 24px;
  pointer-events: none;
}

.nav-dropdown__intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}

.nav-dropdown__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
}

.nav-dropdown__title {
  font-size: 18px;
  font-weight: 700;
  color: #1B1E25;
}

.nav-dropdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.country-card {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  background: #f7f6f3;
  transition: box-shadow 0.25s ease, background 0.25s ease;
  text-decoration: none;
  color: inherit;
}

.country-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  background: #1B1E25; /* polaroid caption turns dark */
}

.country-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #ddd;
}

.country-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease;
}

.country-card:hover .country-card__thumb img {
  filter: brightness(0.55);
}

/* Simple eye icon, centered, appears on hover */
.country-card__eye {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.country-card:hover .country-card__eye {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Caption is the country name only — the project count was removed 2026-08-05.
   Padding is symmetrical now that there is a single line to centre. */
.country-card__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.country-card__name {
  font-size: 13px;
  font-weight: 700;
  color: #1B1E25;
  line-height: 1.2;
  transition: color 0.25s ease;
}

.country-card:hover .country-card__name {
  color: #fff; /* light font on dark card */
}

.site-header__nav .nav-dropdown__all,
.site-header--solid .site-header__nav .nav-dropdown__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 4px 6px;
  font-size: 14px;
  font-weight: 700;
  color: #1B1E25;
  letter-spacing: 0.02em;
  align-self: flex-start;
  transition: gap 0.25s ease, color 0.25s ease;
}

.nav-dropdown__all svg {
  transition: transform 0.25s ease;
}

.site-header__nav .nav-dropdown__all:hover,
.site-header--solid .site-header__nav .nav-dropdown__all:hover {
  color: var(--ia-teal-text);
  gap: 12px;
}

.nav-dropdown__all:hover svg {
  transform: translateX(3px);
}

.nav-dropdown__menu {
  display: flex;
  flex-direction: column;
}

/* Vertical dropdown variant for Services disciplines (each title on one line) */
.nav-dropdown__menu--simple {
  width: 300px;
}

/* No horizontal divider under the heading for the Services menu */
.nav-dropdown__menu--simple .nav-dropdown__intro {
  border-bottom: none;
  padding-bottom: 4px;
  margin-bottom: 12px;
}

.nav-dropdown__links {
  display: flex;
  flex-direction: column;
}

.nav-disc-link {
  display: block;
  padding: 10px 4px;
  transition: color 0.2s ease;
}

.nav-disc-link__title {
  font-size: 16px;
  font-weight: 700;
  color: #1B1E25;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-disc-link:hover .nav-disc-link__title {
  color: var(--ia-teal-text);
}

@media (max-width: 900px) {
  .nav-dropdown__menu { width: 600px; }
  .nav-dropdown__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .nav-dropdown__menu { width: 360px; padding: 18px; }
  .nav-dropdown__grid { grid-template-columns: repeat(2, 1fr); }
  .nav-dropdown__menu--simple { width: 280px; }
}

/* ----- Solid header for inner pages (light bg, dark text) ----- */
.site-header--solid {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Offset sticky/fixed headers below the WordPress admin bar when logged in */
.admin-bar .site-header--solid {
  top: 32px;
}

.admin-bar .site-header--sticky {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header--solid,
  .admin-bar .site-header--sticky {
    top: 46px;
  }
}

.site-header--solid .site-header__logo img {
  filter: none;
}

.site-header--solid .site-header__nav a,
.site-header--solid .site-header__nav .nav-dropdown__toggle {
  color: #1B1E25;
}

.site-header--solid .site-header__nav a:hover,
.site-header--solid .site-header__nav .nav-dropdown__toggle:hover {
  color: var(--ia-teal-text);
}

.site-header--solid .btn-contact {
  color: #1B1E25;
  background: transparent;
  border-color: rgba(0, 166, 167, 0.6);
}

.site-header--solid .btn-contact:hover {
  color: var(--ia-teal-text);
  border-color: var(--ia-teal);
  box-shadow: 0 0 12px rgba(0, 166, 167, 0.45);
}

/* ----- Inner page hero (eyebrow + heading + lead) ----- */
.page-hero {
  /* Full-bleed: break out of the 1280px page-wrapper so the white reaches the
     screen edges instead of leaving cream gutters on wide viewports. */
  align-self: stretch;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 80px 0 40px;
  /* White covers the whole text area, only fading into cream right at the
     bottom edge of the hero so there's no hard colour line below. */
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 82%, #f7f6f3 100%);
}

.page-hero .container {
  text-align: left;
}

.page-hero__eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
}

.page-hero__heading {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.05;
  color: #1B1E25;
  margin: 0 0 24px;
}

.page-hero__heading span {
  color: var(--ia-teal-text);
}

/* About hero headline is long — size + width tuned to keep it to 2 lines */
.page-hero--about .container { max-width: 1000px; }
.page-hero--about .page-hero__heading { font-size: 46px; }

@media (max-width: 720px) {
  .page-hero--about .page-hero__heading { font-size: 32px; }
}

/* Per-country project hero: keep "Our work in {Country}." on a single line */
.page-hero--projects .container { max-width: 1000px; }
.page-hero--projects .page-hero__heading { white-space: nowrap; }

@media (max-width: 600px) {
  .page-hero--projects .page-hero__heading { white-space: normal; font-size: 34px; }
}

.page-hero__lead {
  font-size: 18px;
  line-height: 1.6;
  color: #4a4a4a;
  margin: 0;
  max-width: 720px;
}

/* Contact has one concise hero before the office details and enquiry form. Keep its
   headline and subheadline on one line where the viewport permits. */
.page-hero--contact .page-hero__heading,
.page-hero--contact .page-hero__lead {
  white-space: nowrap;
}

.page-hero--contact .page-hero__lead { max-width: none; }

@media (max-width: 720px) {
  .page-hero__heading { font-size: 38px; }
  .page-hero__lead    { font-size: 16px; }
  .page-hero          { padding: 56px 0 32px; }
  .page-hero--contact .page-hero__heading,
  .page-hero--contact .page-hero__lead { white-space: normal; }
}

/* ===== Video Gallery page ===== */
.video-gallery-section {
  /* The page wrapper keeps editorial copy at a readable width. Video work is a
     visual grid, so it deliberately breaks out to the viewport like the
     homepage's Selected Work section. */
  align-self: stretch;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 64px 0 80px;
}

.video-gallery-section > .container {
  max-width: none;
  padding: 0;
}

.video-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px) clamp(8px, 1vw, 16px);
}

/* Shown when no videos are published, so /gallery/ is never a blank page. */
.video-gallery-empty {
  max-width: 1088px;
  margin: 0 auto;
  padding: 56px 24px;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #5b6470;
  background: #f6f7f9;
  border-radius: 12px;
}

.video-card {
  display: block;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}

.video-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.video-card__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* White circle-outline + triangle, matching the hero play button — no teal fill.
     Soft drop-shadow keeps the outline legible on lighter video thumbnails. */
  color: #fff;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

.video-card:hover .video-card__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.video-card__play svg {
  width: 100%;
  height: 100%;
  margin-left: 0;
}

.video-card__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  /* Captions stay comfortably inset even though the video frame reaches the
     viewport edge, matching the project captions on the homepage. */
  padding-inline: clamp(10px, 1vw, 18px);
  font-size: 17px;
  font-weight: 600;
  color: #1B1E25;
}

.video-card__year {
  font-size: 14px;
  font-weight: 500;
  color: var(--ia-teal-text);
}

@media (max-width: 980px) {
  .video-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .video-gallery-grid {
    grid-template-columns: 1fr;
  }
  .video-gallery-section {
    padding: 40px 0 56px;
  }
}

/* ----- Generic page (fallback page.php) ----- */
.page-generic {
  width: 100%;
  padding: 60px 0;
}

.page-generic__title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #1B1E25;
}

.page-generic__content {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

.page-generic__content p { margin: 0 0 1em; }

/* ----- Outline button (used on home for "See all", "View all") ----- */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
  background: transparent;
  border: 1.5px solid var(--ia-teal-text);
  border-radius: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-outline:hover {
  background: var(--ia-teal);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 166, 167, 0.25);
}

/* ----- Inline section link ("Learn more about us >") ----- */
.section-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ia-teal-text);
  letter-spacing: 0.02em;
  position: relative;
}

.section-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.section-link:hover::after { transform: scaleX(1); }

/* ----- "See all locations" / "View all projects" / "Explore services" CTAs ----- */
.presence__cta,
.services__cta,
.projects__cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  width: 100%;
}

.services__cta { margin-top: 40px; }
.projects__cta { margin-top: 24px; margin-bottom: 8px; }

/* ----- CTA banner (replaces full contact section on home) ----- */
.cta-banner {
  width: 100%;
  margin-top: 0;
  margin-bottom: 64px;
  padding: 0 24px;
}

.cta-banner__inner {
  max-width: 1088px;
  margin: 0 auto;
  padding: 56px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: #1B1E25;
  color: #fff;
  border-radius: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.cta-banner__heading {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 8px;
  color: #fff;
}

.cta-banner__text {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.92;
  max-width: 540px;
}

.cta-banner__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
  background: #fff;
  border-radius: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.cta-banner__btn:hover {
  background: var(--ia-teal-text);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

@media (max-width: 720px) {
  .cta-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 28px;
  }
  .cta-banner__heading { font-size: 26px; }
}

/* ----- Locations page: partner pins + legend + partner grid ----- */
.map-pin--partner {
  z-index: 2; /* below direct offices */
}

/* Whichever pin is hovered comes fully to the front */
.map-pin:hover {
  z-index: 6;
}

.map-pin--partner .map-pin__icon {
  opacity: 0.92;
}

.map-pin__label--partner {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(0, 166, 167, 0.5);
  box-shadow: 0 4px 20px rgba(0, 166, 167, 0.35);
  color: #fff;
}

.map-pin__glow--partner {
  background: rgba(0, 166, 167, 0.5) !important;
}

.presence__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 24px;
  font-size: 13px;
  color: #4a4a4a;
  letter-spacing: 0.02em;
}

.presence__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.presence__legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.presence__legend-dot--office  { background: #E53935; }
.presence__legend-dot--partner { background: var(--ia-teal); }

.partners-grid {
  width: 100%;
  padding: 0 0 60px;
}

.partners-grid__heading {
  font-size: 28px;
  font-weight: 700;
  color: #1B1E25;
  margin: 0 0 12px;
  text-align: left;
}

.partners-grid__intro {
  font-size: 15px;
  line-height: 1.65;
  color: #4a4a4a;
  margin: 0 0 32px;
  max-width: 720px;
  text-align: left;
}

.partners-grid__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px 28px;
  max-width: 920px;
  margin: 0 auto;
}

/* Balanced office rows: items split into 2 rows (top = ceil, bottom = floor),
   each row centered. Even count → equal rows; odd → top row has one more. */
.office-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 960px;
  margin: 0 auto;
}

.office-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
}

.office-row .partner-card {
  min-width: 140px;
}

/* Centered variant — used by "Our offices" (4 cards) so they don't left-stick when count < grid cols */
.partners-grid__list--centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 36px;
}

.partners-grid__list--centered .partner-card {
  min-width: 140px;
}

.partner-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  background: transparent;
  border: none;
}

.partner-card__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-card__icon svg { width: 18px; height: 18px; }

.partner-card__body { flex: 1; min-width: 0; }

.partner-card__title {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ia-teal-text);
  letter-spacing: 0.06em;
  position: relative;
}

.partner-card__title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.partner-card__title:hover::after { transform: scaleX(1); }

.partner-card__country {
  font-size: 13px;
  color: #1B1E25;
  font-weight: 500;
  margin-top: 4px;
}

.partner-card__note {
  font-size: 12px;
  color: #777;
  font-style: italic;
  margin-top: 8px;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .partners-grid__list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .partners-grid__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  .partners-grid__list { grid-template-columns: 1fr; }
}

/* ----- Locations page: grid of all offices below map ----- */
.presence--page {
  padding-bottom: 40px;
}

.locations-grid {
  width: 100%;
  padding: 40px 0 60px;
}

.locations-grid__heading {
  font-size: 28px;
  font-weight: 700;
  color: #1B1E25;
  margin: 0 0 32px;
  text-align: left;
}

.locations-grid__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.location-card {
  padding: 6px 4px;
  background: transparent;
  border: none;
}

.location-card__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ia-teal-text);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  position: relative;
}

.location-card__title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.location-card__title:hover::after { transform: scaleX(1); }

.location-card__address {
  font-size: 14px;
  color: #1B1E25;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .locations-grid__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .locations-grid__list { grid-template-columns: 1fr; }
}

/* ----- Projects archive: grid of all project tiles ----- */
.projects--archive .projects__tabs--archive {
  margin-top: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.projects-archive {
  /* Project images use the same full-bleed mosaic as Selected Work at home;
     the archive heading and country filters above remain in the text shell. */
  align-self: stretch;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 24px 0 60px;
}

.projects-archive > .container {
  max-width: none;
  padding: 0;
}

.projects-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 56px) clamp(8px, 1vw, 16px);
}

.project-tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease;
}

.project-tile:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.project-tile__img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #eee;
  overflow: hidden;
}

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

.project-tile:hover .project-tile__img img {
  transform: scale(1.04);
}

.project-tile__info {
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-tile__title {
  font-size: 16px;
  font-weight: 700;
  color: #1B1E25;
  margin: 0;
  line-height: 1.3;
}

.project-tile__subtitle {
  font-weight: 500;
  color: var(--ia-teal-text);
  margin-left: 4px;
}

.project-tile__desc {
  font-size: 14px;
  color: #555;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 980px) {
  .projects-archive__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .projects-archive__grid { grid-template-columns: 1fr; }
}

.projects-archive__empty {
  max-width: 1088px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  color: #4a4a4a;
  text-align: center;
  padding: 48px 0;
}

.projects-archive__empty a {
  color: var(--ia-teal-text);
  font-weight: 600;
  border-bottom: 1px solid var(--ia-teal-text);
}

.projects-archive__back {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ----- Project detail: ensure scrollability (Task #4) ----- */
/* Don't trap scroll on html/body when on a single project page. */
body.single-project,
html:has(body.single-project) {
  overflow: visible;
}

/* About / Services / Wisdom on dedicated page — top spacing fix when no hero precedes them */
.about--page,
.services--page {
  padding-top: 24px;
}

/* ============================================================
   About page — Capabilities-driven sections
   ============================================================ */

/* Stats band */
.about-stats {
  width: 100%;
  padding: 8px 0 56px;
}

.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 40px 0;
}

.about-stats__item {
  text-align: left;
}

.about-stats__num {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: var(--ia-teal-text);
  letter-spacing: -1px;
}

.about-stats__label {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #4a4a4a;
}

@media (max-width: 760px) {
  .about-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .about-stats__num { font-size: 34px; }
}

/* Drivers — the 8 things we solve for */
.drivers {
  width: 100%;
  padding: 96px 0;
}

/* Sticky headline on the left, items 1-8 scroll past on the right */
.drivers__layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) 1.3fr;
  gap: 72px;
  align-items: start;
}

.drivers__head {
  position: sticky;
  top: 110px;
  align-self: start;
}

.drivers__eyebrow,
.trusted__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
  margin-bottom: 14px;
}

.drivers__heading {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: #1B1E25;
  margin: 0 0 16px;
}

.drivers__intro {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0;
}

/* Right column: items 1-8 stacked, each a row with number + copy, thin top rule */
.drivers__grid {
  display: flex;
  flex-direction: column;
}

.driver-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 24px;
  background: none;
  border: none;
  border-top: 1px solid rgba(27, 30, 37, 0.18);
  padding: 32px 0;
}

.driver-card:last-child { padding-bottom: 0; }

.driver-card__num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 15px;
  font-weight: 700;
  color: var(--ia-teal-text);
  letter-spacing: 0.1em;
  padding-top: 4px;
}

.driver-card__title {
  grid-column: 2;
  grid-row: 1;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #1B1E25;
  margin: 0 0 10px;
}

.driver-card__text { grid-column: 2; grid-row: 2; }

.driver-card__text {
  font-size: 15px;
  line-height: 1.65;
  color: #555;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .drivers { padding: 64px 0; }
  .drivers__layout { grid-template-columns: 1fr; gap: 36px; }
  .drivers__head { position: static; top: auto; }
  .drivers__heading { font-size: 28px; }
  .driver-card { padding: 24px 0; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
  .driver-card__title { font-size: 19px; }
}

/* Trusted by — client wordmark band */
.trusted {
  width: 100%;
  padding: 72px 0;
  /* White band so the client logos' white JPG backgrounds blend in instead of reading as
     boxes on the cream canvas. 2026-08-07. */
  background: #fff;
}

.trusted__head {
  text-align: left;
  max-width: 720px;
  margin: 0 0 44px;
}

.trusted__heading {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: #1B1E25;
  margin: 0 0 14px;
}

.trusted__intro {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0;
}

/* Editorial wordmark row — no boxes, just spaced names with a top/bottom rule */
/* Trusted-by: two rows of client logos auto-scrolling in opposite directions. */
.trusted__marquee {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.5vw, 36px);
  padding: 44px 0;
  border-top: 1px solid rgba(27, 30, 37, 0.12);
  border-bottom: 1px solid rgba(27, 30, 37, 0.12);
  overflow: hidden;
  /* Fade both edges so logos glide in and out instead of hard-cutting. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.trusted__row { overflow: hidden; }
.trusted__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: trustedScroll 55s linear infinite;
}
.trusted__track--reverse { animation-direction: reverse; }
/* Pause on hover so a visitor can read a logo. */
.trusted:hover .trusted__track { animation-play-state: paused; }
.trusted__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(36px, 4vw, 52px);
  /* Trailing space on EVERY logo (not flex-gap) so the -50% loop is seamless. */
  margin-right: clamp(36px, 5vw, 76px);
}
.trusted__logo img {
  max-height: 100%;
  max-width: clamp(92px, 12vw, 150px);
  width: auto;
  object-fit: contain;
}
@keyframes trustedScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trusted__track { animation: none; flex-wrap: wrap; justify-content: center; }
  .trusted__marquee { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 600px) {
  .trusted__heading { font-size: 26px; }
  .trusted__marquee { padding: 32px 0; gap: 16px; }
  .trusted__logo { height: 34px; margin-right: 32px; }
}

/* ============================================================
   Services page — process, capabilities, procurement routes
   ============================================================ */

/* Process timeline */
.process {
  width: 100%;
  padding: 72px 0;
  background: #f7f6f3;
}

.process__head {
  max-width: 720px;
  margin-bottom: 48px;
}

.process__eyebrow,
.capabilities__eyebrow {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
  margin-bottom: 14px;
}

.process__heading,
.capabilities__heading {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: #1B1E25;
  margin: 0 0 16px;
}

.process__intro {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0;
}

.process__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

.process-step {
  position: relative;
  padding: 0 22px 0 0;
}

.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 44px;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(0,166,167,0.4) 0 6px, transparent 6px 12px);
}

.process-step__num {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ia-teal);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.process-step__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: #1B1E25;
  margin: 0 0 8px;
}

.process-step__text {
  font-size: 13px;
  line-height: 1.55;
  color: #555;
  margin: 0;
  padding-right: 12px;
}

@media (max-width: 900px) {
  .process__steps { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .process-step::after { display: none; }
  .process__heading, .capabilities__heading { font-size: 28px; }
}

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

/* Full scope of services — editorial columns, thin top rule, no boxes */
.scope {
  width: 100%;
  padding: 72px 0;
}

.scope__head {
  max-width: 760px;
  margin-bottom: 52px;
}

.scope__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
  margin-bottom: 14px;
}

.scope__heading {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: #1B1E25;
  margin: 0 0 16px;
}

.scope__intro {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0;
}

.scope__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px 36px;
}

.scope-col {
  border-top: 1px solid rgba(27, 30, 37, 0.18);
  padding-top: 22px;
}

.scope-col__title {
  font-size: 19px;
  font-weight: 700;
  color: #1B1E25;
  margin: 0 0 8px;
}

.scope-col__lead {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ia-teal-text);
  font-weight: 600;
  margin: 0 0 18px;
}

.scope-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.scope-col__list li {
  font-size: 14px;
  line-height: 1.4;
  color: #444;
  position: relative;
  padding-left: 14px;
}

.scope-col__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--ia-teal);
}

.scope-col__title-link { display: inline-block; }
.scope-col__title-link:hover .scope-col__title { color: var(--ia-teal-text); }
.scope-col__title { transition: color 0.2s ease; }

.scope-col__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
  transition: gap 0.25s ease;
}

.scope-col__more:hover { gap: 10px; }

@media (max-width: 1100px) {
  .scope__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .scope__grid { grid-template-columns: repeat(2, 1fr); }
  .scope__heading { font-size: 28px; }
}

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

/* ============================================================
   Single discipline page (/service/{slug}/) — editorial / Argo style
   ============================================================ */
.disc-hero {
  width: 100%;
  padding-top: 36px;
}

.disc-hero__title { margin: 14px 0 12px; }
.disc-hero__tagline { margin-bottom: 32px; }

.disc-hero__crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
}

.disc-hero__crumb a { color: var(--ia-teal-text); }
.disc-hero__crumb a:hover { text-decoration: underline; }

.disc-hero__title {
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: #1B1E25;
  margin: 18px 0 16px;
}

.disc-hero__tagline {
  font-size: 22px;
  line-height: 1.4;
  color: #4a4a4a;
  margin: 0 0 48px;
  max-width: 640px;
}

/* Hero band sized to the viewport so the whole hero (header + title + image)
   fits on one screen at landing — no double scroll, no oversized image. */
.disc-hero__media {
  width: 100%;
  height: 52vh;
  overflow: hidden;
}

.disc-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 760px) {
  .disc-hero__media { height: 38vh; }
}

@media (max-width: 760px) {
  .disc-hero__title { font-size: 44px; letter-spacing: -1px; }
  .disc-hero__tagline { font-size: 18px; margin-bottom: 32px; }
}

/* Intro */
.disc-intro {
  width: 100%;
  padding: 72px 0;
}

/* 2-column matching the feature blocks below, so the lead text lines up with
   the feature copy (right column). Label sits in the left column. */
.disc-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.disc-intro__eyebrow {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
}

.disc-intro__text {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 500;
  color: #1B1E25;
  margin: 0;
  text-align: left;
}

@media (max-width: 820px) {
  .disc-intro { padding: 48px 0; }
  .disc-intro__grid { grid-template-columns: 1fr; gap: 14px; }
  .disc-intro__text { font-size: 19px; }
}

/* Alternating feature blocks */
.disc-features {
  width: 100%;
  padding: 8px 0 40px;
}

.disc-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start; /* headline lines up with the top of the photo */
  padding: 40px 0;
}

/* All feature images stay on the left — no zig-zag alternation. */
.disc-feature--reverse .disc-feature__media {
  order: 0;
}

.disc-feature__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.disc-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.disc-feature__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: #1B1E25;
  margin: 0 0 16px;
}

.disc-feature__text {
  font-size: 20px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0;
}

@media (max-width: 820px) {
  .disc-feature { grid-template-columns: 1fr; gap: 24px; padding: 28px 0; }
  .disc-feature--reverse .disc-feature__media { order: 0; }
  .disc-feature__title { font-size: 24px; }
}

/* Scope list for this discipline */
.disc-scope {
  width: 100%;
  padding: 64px 0;
  background: #f7f6f3;
}

.disc-scope__head {
  margin-bottom: 36px;
}

.disc-scope__eyebrow {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
  margin-bottom: 12px;
}

.disc-scope__heading {
  font-size: 30px;
  font-weight: 700;
  color: #1B1E25;
  margin: 0;
}

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

.disc-scope__list li {
  font-size: 16px;
  color: #1B1E25;
  padding: 14px 0 0 18px;
  border-top: 1px solid rgba(27, 30, 37, 0.15);
  position: relative;
}

.disc-scope__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  width: 6px;
  height: 6px;
  background: var(--ia-teal);
}

@media (max-width: 820px) {
  .disc-scope__list { grid-template-columns: repeat(2, 1fr); }
  .disc-scope__heading { font-size: 24px; }
}

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

/* Related disciplines */
.disc-related {
  width: 100%;
  padding: 72px 0;
}

.disc-related__heading {
  font-size: 30px;
  font-weight: 700;
  color: #1B1E25;
  margin: 0 0 32px;
}

.disc-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.disc-related-card {
  display: block;
  color: inherit;
}

.disc-related-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 14px;
}

.disc-related-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease;
}

/* Same hover as the header dropdown cards: image dims + eye icon appears */
.disc-related-card:hover .disc-related-card__media img {
  filter: brightness(0.55);
}

.disc-related-card__eye {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.disc-related-card:hover .disc-related-card__eye {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.disc-related-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.disc-related-card__title {
  font-size: 17px;
  font-weight: 700;
  color: #1B1E25;
  margin: 0;
  transition: color 0.25s ease;
}

.disc-related-card:hover .disc-related-card__title {
  color: var(--ia-teal-text);
}

.disc-related-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
  flex-shrink: 0;
  transition: gap 0.25s ease;
}

.disc-related-card:hover .disc-related-card__cta { gap: 9px; }

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

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

/* Procurement routes */
.routes {
  width: 100%;
  padding: 40px 0 72px;
}

.routes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

.route-card {
  border-top: 2px solid #1B1E25;
  padding: 26px 0 0;
}

.route-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
  margin-bottom: 14px;
}

.route-card__title {
  font-size: 24px;
  font-weight: 700;
  color: #1B1E25;
  margin: 0 0 12px;
}

.route-card__text {
  font-size: 15px;
  line-height: 1.65;
  color: #4a4a4a;
  margin: 0;
}

@media (max-width: 720px) {
  .routes__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================
   Locations page — regional reach (cities delivered)
   ============================================================ */
.reach {
  width: 100%;
  padding: 24px 0 72px;
}

.reach__head {
  text-align: left;
  max-width: 720px;
  margin: 0 0 36px;
}

.reach__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
  margin-bottom: 14px;
}

.reach__heading {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: #1B1E25;
  margin: 0 0 14px;
}

.reach__heading span { color: var(--ia-teal-text); }

.reach__intro {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0;
}

.reach__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  max-width: 880px;
  margin: 0 auto;
}

.reach__city {
  font-size: 14px;
  font-weight: 600;
  color: #1B1E25;
  padding: 8px 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.reach__city:hover {
  background: var(--ia-teal);
  color: #fff;
  border-color: var(--ia-teal-text);
}

@media (max-width: 540px) {
  .reach__heading { font-size: 26px; }
  .reach__city { font-size: 13px; padding: 7px 13px; }
}

/* ============================================================
   Single Service detail page (/service/{slug}/)
   ============================================================ */
.service-hero {
  position: relative;
  width: 100%;
  min-height: 460px;
  margin-top: 0;
  padding: 80px 0 60px;
  background-size: cover;
  background-position: center;
  background-color: #1B1E25;
  color: #fff;
  display: flex;
  align-items: flex-end;
  border-radius: 0;
  overflow: hidden;
}

.service-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}

.service-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.service-hero__crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.service-hero__crumb a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.service-hero__crumb a:hover { border-color: rgba(255, 255, 255, 0.6); }

.service-hero__title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.05;
  margin: 16px 0 14px;
  color: #fff;
  max-width: 820px;
}

.service-hero__tagline {
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
}

@media (max-width: 720px) {
  .service-hero { min-height: 360px; padding: 60px 0 40px; }
  .service-hero__title { font-size: 36px; }
  .service-hero__tagline { font-size: 16px; }
}

/* Intro: copy on left, features list on right */
.service-intro {
  width: 100%;
  padding: 72px 0;
}

.service-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.service-intro__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
  margin-bottom: 14px;
}

.service-intro__heading {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  color: #1B1E25;
  margin: 0 0 18px;
}

.service-intro__text {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0 0 28px;
}

.service-features {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-feature {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: #f7f6f3;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.service-feature__bullet {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 166, 167, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.service-feature__label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1B1E25;
  margin-bottom: 4px;
}

.service-feature__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

@media (max-width: 880px) {
  .service-intro__grid { grid-template-columns: 1fr; gap: 32px; }
  .service-intro__heading { font-size: 28px; }
}

/* Selected projects gallery */
.service-projects {
  width: 100%;
  padding: 0 0 72px;
}

.service-projects__head {
  text-align: left;
  margin-bottom: 36px;
}

.service-projects__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
  margin-bottom: 8px;
}

.service-projects__heading {
  font-size: 30px;
  font-weight: 700;
  color: #1B1E25;
  margin: 0;
  line-height: 1.2;
}

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

@media (max-width: 880px) { .service-projects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .service-projects__grid { grid-template-columns: 1fr; } }

/* Related services footer */
.service-related {
  width: 100%;
  padding: 0 0 60px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 16px;
  padding-top: 56px;
}

.service-related__heading {
  font-size: 24px;
  font-weight: 700;
  color: #1B1E25;
  margin: 0 0 24px;
  text-align: left;
}

.service-related__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.related-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 166, 167, 0.35);
}

.related-card__thumb {
  flex-shrink: 0;
  width: 140px;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  background: #eee;
}

.related-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.related-card__body { flex: 1; min-width: 0; }

.related-card__title {
  font-size: 17px;
  font-weight: 700;
  color: #1B1E25;
  margin: 0 0 6px;
  line-height: 1.25;
}

.related-card__tagline {
  font-size: 13px;
  line-height: 1.5;
  color: #555;
  margin: 0 0 12px;
}

.related-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ia-teal-text);
  transition: gap 0.25s ease;
}

.related-card:hover .related-card__cta { gap: 10px; }

@media (max-width: 720px) {
  .service-related__grid { grid-template-columns: 1fr; }
  .related-card__thumb { width: 100px; }
}

/* ----- Services page: per-service blocks with project carousels ----- */
.service-block {
  width: 100%;
  padding: 56px 0;
}

.service-block + .service-block {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.service-block__head {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 36px;
  max-width: 880px;
  text-align: left;
}

.service-block__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 166, 167, 0.08);
  border-radius: 0;
}

.service-block__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.service-block__copy { flex: 1; }

.service-block__title {
  font-size: 30px;
  font-weight: 700;
  color: #1B1E25;
  line-height: 1.2;
  margin: 0 0 12px;
}

.service-block__desc {
  font-size: 15px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0;
}

/* Carousel: scroll-snap track flanked by < / > buttons (flex layout, buttons outside frame) */
.service-gallery {
  position: relative;
  /* The service description stays in its reading column; its project imagery
     breaks out to the viewport, exactly like the homepage work grid. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.service-gallery__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.service-gallery__track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.service-thumb {
  flex: 0 0 calc((100% - 18px * 3) / 4);
  scroll-snap-align: start;
  display: block;
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: #eee;
  transition: box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.service-thumb:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.service-thumb__img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

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

.service-thumb:hover .service-thumb__img img {
  transform: scale(1.06);
}

.service-thumb__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.service-thumb__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.service-thumb__subtitle {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.85;
  text-transform: uppercase;
}

/* Carousel arrows sit over the edge-to-edge photo frame, preserving every
   pixel of the image layout while keeping the controls reachable. */
.service-gallery__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 166, 167, 0.3);
  background: #fff;
  color: var(--ia-teal-text);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, opacity 0.25s ease, border-color 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-gallery__nav:hover {
  background: var(--ia-teal);
  color: #fff;
  border-color: var(--ia-teal-text);
  transform: translateY(-50%) scale(1.08);
}

.service-gallery__nav--prev { left: clamp(12px, 2vw, 32px); }
.service-gallery__nav--next { right: clamp(12px, 2vw, 32px); }

/* Overflow projects (>10) shown as text list */
.service-block__more {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #4a4a4a;
}

.service-block__more a {
  color: var(--ia-teal-text);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.service-block__more a:hover {
  border-color: var(--ia-teal-text);
}

@media (max-width: 980px) {
  .service-thumb { flex: 0 0 calc((100% - 18px) / 2); }
  .service-gallery__nav { width: 40px; height: 40px; font-size: 18px; }
}

@media (max-width: 540px) {
  .service-thumb { flex: 0 0 80%; }
  .service-block__title { font-size: 24px; }
  .service-gallery__nav { width: 36px; height: 36px; }
}


/* ============================================================================
   MOBILE NAVIGATION — added 2026-08-04
   ----------------------------------------------------------------------------
   Before this the theme had NO mobile menu at all. The only responsive rule for
   the nav was `@media (max-width:768px){ .site-header__nav{gap:20px} }`, which
   just tightened the gap. The nav is a fixed ~432px wide, so below ~452px of
   viewport it overflowed — and because html{overflow-x:clip} the overflow could
   not even be scrolled to. Measured: "Services" was 62px off-screen at 390px
   (iPhone 14/15), 92px at 360px, 132px at 320px.

   Approach: .site-header__panel wraps <nav> + the Contact CTA. On desktop it is
   `display:contents`, so the header's flex layout is byte-for-byte what it was.
   Below 900px the same element becomes a fixed slide-in drawer.
   ========================================================================== */

.site-header__panel { display: contents; }

.nav-toggle { display: none; }

@media (max-width: 900px) {

  /* 🔴 backdrop-filter MUST be off here.
     A backdrop-filter (like transform/filter/perspective/will-change/contain) makes the
     element a containing block for position:fixed DESCENDANTS. .site-header carries
     backdrop-filter:blur(2px), so the drawer below — position:fixed; top:0; bottom:0 —
     was being sized against the 69px-tall header instead of the viewport. The panel came
     out 120px tall, the 229px nav overflowed it, and only the first link was reachable.
     Nothing looked broken on desktop because the drawer only exists at this width.
     If a blurred mobile header is ever wanted, move the drawer out of .site-header first. */
  .site-header,
  .site-header--sticky {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header { padding: 12px 20px; flex-wrap: nowrap; gap: 12px; }

  /* --- burger --- */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;           /* 44px min tap target */
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 1300;
  }
  .nav-toggle__bars { display: block; width: 24px; height: 16px; position: relative; }
  .nav-toggle__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.28s ease, opacity 0.2s ease, background 0.3s;
  }
  .nav-toggle__bars span:nth-child(1) { top: 0; }
  .nav-toggle__bars span:nth-child(2) { top: 7px; }
  .nav-toggle__bars span:nth-child(3) { top: 14px; }

  /* solid header = dark bars; transparent header (over hero) = white bars */
  .site-header--solid .nav-toggle__bars span { background: #1B1E25; }

  /* burger -> X. Always dark once open, because the drawer is white. */
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span { background: #1B1E25; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* --- drawer --- */
  .site-header__panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 340px);
    padding: 88px 24px 32px;
    background: #fff;
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.18);
    transform: translateX(101%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1200;
    visibility: hidden;
  }
  .site-header__panel.is-open { transform: translateX(0); visibility: visible; }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1150;
    border: 0;
  }
  .nav-backdrop.is-open { opacity: 1; }

  /* --- links inside the drawer --- */
  .site-header__nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .site-header__nav > a,
  .nav-dropdown__link,
  .nav-dropdown__toggle {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;          /* was 29px — under the 44px minimum */
    padding: 12px 4px;
    /* 🔴 Must reset the desktop margin. `.nav-dropdown__toggle` carries
       `padding:16px 2px; margin:-16px 0` so the hover-intent hit area extends past the
       nav bar on desktop. Left in place inside the drawer, those negative margins pulled
       the "Projects" row 16px ABOVE its own container: it overlapped the bottom 16px of
       "Gallery" (so the two tap targets overlapped) and the row read 37px tall against
       52px for every other row. Same class, two layouts — reset anything the desktop
       rule sets that the drawer does not want. */
    margin: 0;
    font-size: 17px;
    color: #1B1E25;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
  }
  .nav-dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
  }

  /* The Projects label remains a normal link; the adjacent caret is the separate
     control for the country accordion. */
  .nav-dropdown__link {
    flex: 1 1 auto;
    text-decoration: none;
  }

  /* The drawer is white, but the toggle's colour follows the HEADER variant:
     `.site-header__nav .nav-dropdown__toggle { color:#fff }` (0,2,0) beats the plain
     `.nav-dropdown__toggle` rule above (0,1,0), so on the transparent-header pages
     (homepage, test page) "Projects" was rendering white-on-white — an invisible row
     between Gallery and Services. Inner pages were fine because .site-header--solid
     already forces it dark, which is why this only showed up on some pages.
     Scoped to .site-header__panel (0,3,0) so it wins for BOTH variants. */
  .site-header__panel .site-header__nav .nav-dropdown__toggle,
  .site-header__panel .site-header__nav .nav-dropdown__link,
  .site-header__panel .site-header__nav > a {
    color: #1B1E25;
    font-size: 17px;
  }
  .site-header__panel .nav-dropdown__caret { color: #1B1E25; }

  .nav-dropdown__toggle {
    flex: 0 0 52px;
    width: 52px;
    justify-content: center;
    background: none;
    border-top: 0;
    border-right: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
  }
  .nav-dropdown__caret { transition: transform 0.25s ease; }
  .nav-dropdown.is-open .nav-dropdown__caret { transform: rotate(180deg); }

  /* dropdown becomes an in-flow accordion, not a floating panel */
  .nav-dropdown__menu {
    flex-basis: 100%;
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    transition: none;
  }
  .nav-dropdown.is-open .nav-dropdown__menu { display: block; padding: 8px 0 16px; }

  /* 🔴 `transform: none` above is NOT enough on its own. The desktop open-state rule
     `.nav-dropdown:hover / .is-open / :focus-within .nav-dropdown__menu` (0,3,0) re-applies
     `translateX(-50%)` — the desktop centering trick — and it outranks the plain
     `.nav-dropdown__menu` rule above (0,1,0). In the drawer the menu is static and
     full-width, so -50% shifted the whole country grid half its own width to the LEFT:
     measured at 425px it rendered x -44→232 while the drawer's content box is 94→386,
     i.e. the left column hung outside the drawer, over the page behind it.
     All THREE selectors have to be neutralised, not just .is-open — :focus-within fires
     the moment a country card takes focus, and :hover still fires after a tap. */
  .nav-dropdown:hover .nav-dropdown__menu,
  .nav-dropdown.is-open .nav-dropdown__menu,
  .nav-dropdown:focus-within .nav-dropdown__menu {
    transform: none;
  }

  /* Desktop-only hover bridge. Harmless (invisible, pointer-events:none) but it is
     absolutely positioned, so in the drawer it anchors to the fixed panel instead of the
     menu. Nothing should depend on it here — the accordion is click-driven. */
  .nav-dropdown__menu::before { display: none; }

  .nav-dropdown__intro { display: none; }
  .nav-dropdown__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .country-card__thumb { aspect-ratio: 4 / 3; }
  .country-card__name { font-size: 13px; }

  .btn-contact {
    margin-top: 24px;
    width: 100%;
    min-height: 48px;
    color: #fff;
    background: var(--ia-teal-text);
    border-color: var(--ia-teal-text);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  /* stop background scroll while the drawer is open */
  body.nav-open { overflow: hidden; }

  /* The closed drawer sits at translateX(101%), i.e. outside the right edge, so it
     extends the document's scroll width. html{overflow-x:clip} already contains it;
     this repeats the guard on body so the page can never scroll sideways even if the
     html rule is later overridden. */
  body { overflow-x: clip; }
}

/* Desktop must never keep drawer state if the viewport is widened while open. */
@media (min-width: 901px) {
  .site-header__panel.is-open { transform: none; }
  .nav-backdrop { display: none !important; }
}

/* --- Tap targets: nav links were 29px tall. WCAG 2.5.8 / practical minimum 44px. --- */
@media (max-width: 900px) {
  .footer__nav a,
  .footer__social-link { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__social-link { width: 44px; height: 44px; justify-content: center; }
}

/* ============================================================================
   Additions 2026-08-04
   ========================================================================== */

/* Screen-reader-only text. Needed for the homepage <h1>, which is intentionally
   invisible so the hero stays a pure video lockup. Standard WP pattern — this is
   NOT display:none, which search engines and screen readers both skip. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 16px 24px;
  background: #fff;
  color: #1B1E25;
  z-index: 100000;
  top: 8px;
  left: 8px;
}

/* Showcase arrows now hold an SVG, not a text glyph. 44px = minimum tap target
   (was 40px, and the glyph relied on font-size:32px). */
.project-showcase__nav { width: 44px; height: 44px; font-size: 0; color: #1B1E25; }
.project-showcase__nav svg { display: block; }
.project-showcase__nav:hover { opacity: 0.6; }



/* ============================================================================
   FLUENT FORMS — match the theme, 2026-08-04
   ----------------------------------------------------------------------------
   The contact form moved to Fluent Forms so submissions are stored in the DB
   rather than depending on wp_mail() succeeding. Out of the box it renders with
   system fonts, 7px rounded boxes and grey borders — none of which belong on this
   site. These overrides reproduce the retired hand-coded form's look: teal label,
   no box, a single underline that highlights on focus, square uppercase button.
   Scoped to .contact-section .frm-fluent-form rather than a custom class: Fluent Forms
   did not apply the cssClassName we set, and scoping by location is stable across form
   re-imports (the form ID changes, its position in the theme does not).
   ========================================================================== */

.contact-section .frm-fluent-form .ff-el-group { margin-bottom: 18px; }

.contact-section .frm-fluent-form .ff-el-input--label label {
  display: block;
  padding: 0 0 6px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ia-teal-text);
}
.contact-section .frm-fluent-form .ff-el-is-required > label::after { color: var(--ia-teal-text); }

.contact-section .frm-fluent-form .ff-el-form-control {
  width: 100%;
  padding: 10px 2px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: #1B1E25;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(27, 30, 37, 0.25);
  border-radius: 0;
  box-shadow: none;
  transition: border-color 0.25s ease;
}
.contact-section .frm-fluent-form .ff-el-form-control:focus {
  outline: none;
  border-bottom-color: var(--ia-teal-text);
  border-bottom-width: 2px;
  box-shadow: none;
}
.contact-section .frm-fluent-form .ff-el-form-control::placeholder { color: rgba(27, 30, 37, 0.4); }
.contact-section .frm-fluent-form textarea.ff-el-form-control { min-height: 130px; resize: vertical; }

.contact-section .frm-fluent-form .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 15px 38px;
  min-height: 48px;                 /* tap target */
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ia-teal-text);  /* AA-passing teal */
  border: 1px solid var(--ia-teal-text);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.contact-section .frm-fluent-form .ff-btn-submit:hover { background: transparent; color: var(--ia-teal-text); }

/* Validation + confirmation messages in the theme's voice, not the plugin's. */
.contact-section .frm-fluent-form .error.text-danger,
.contact-section .frm-fluent-form .ff-el-is-error .text-danger {
  margin-top: 6px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12.5px;
  color: #b3261e;
}
.contact-section .frm-fluent-form .ff-el-form-control.ff-el-is-error { border-bottom-color: #b3261e; }

.contact-section .ff-message-success {
  padding: 18px 22px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: #1B1E25;
  background: rgba(0, 118, 122, 0.08);
  border: none;
  border-left: 3px solid var(--ia-teal-text);
  border-radius: 0;
}

@media (max-width: 760px) {
  .contact-section .frm-fluent-form .ff-btn-submit { width: 100%; justify-content: center; }
}

/* Breathing room between the full-bleed project slider and the footer.
   Added 2026-08-04: the 100vh .project-detail ran straight into the CTA banner with no
   separation, which read as a rendering fault rather than a section change. */
.page-wrapper--project { padding-top: 96px; }
.page-wrapper--project .cta-banner { margin-bottom: 96px; }

@media (max-width: 760px) {
  .page-wrapper--project { padding-top: 56px; }
  .page-wrapper--project .cta-banner { margin-bottom: 56px; }
}


/* ============================================================================
   Hero play button — 2026-08-05
   The circle-outline mark the client supplied, rebuilt as inline SVG so it scales,
   costs no request and takes its colour from CSS.

   Slow brand-colour pulse: the MARK stays white because it has to stay legible over
   moving footage, and the brand colour arrives as a glow that blooms and fades on a
   5s cycle. Tinting the mark itself teal would have cost legibility on the bright
   frames of the new loop for no real gain — the glow reads as brand colour either way.
   Uses #00A6A7 (the bright brand teal) rather than #00767A: this is decoration, not
   text, so the AA text thresholds do not apply and the brighter value carries better
   over video.
   ========================================================================== */
.hero__play-mark {
  display: block;
  width: clamp(58px, 6vw, 92px);
  height: auto;
  color: #fff;
  animation: heroPlayPulse 5s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes heroPlayPulse {
  0%, 100% {
    opacity: 0.9;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.3))
            drop-shadow(0 0 0 rgba(0, 166, 167, 0));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.3))
            drop-shadow(0 0 22px rgba(0, 166, 167, 0.9))
            drop-shadow(0 0 44px rgba(0, 166, 167, 0.45));
  }
}

/* Hover takes over from the pulse so the two cannot fight over transform/filter. */
.hero__play:hover .hero__play-mark {
  animation-play-state: paused;
  opacity: 1;
  transform: scale(1.06);
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.3))
          drop-shadow(0 0 26px rgba(0, 166, 167, 1));
}
.hero__play:active .hero__play-mark { transform: scale(0.97); }
.hero__play:focus-visible .hero__play-mark { outline: 2px solid #fff; outline-offset: 8px; }

@media (prefers-reduced-motion: reduce) {
  .hero__play-mark { animation: none; opacity: 1; transition: none; }
  .hero__play:hover .hero__play-mark { transform: none; }
}

/* ============================================================================
   EDITORIAL COPY — 2026-08-14
   ---------------------------------------------------------------------------
   Keep reading text consistent across standard pages, project descriptions,
   archives, the homepage and the footer. These rules sit after component styles
   intentionally: content can arrive through several WordPress templates, so the
   base typography must win without flattening headings, navigation or metadata.
   ========================================================================== */
:is(.page-wrapper, .project-detail, .cta-banner, .site-footer, main) :where(p, li, dd, address) {
  font-family: var(--ia-font-sans);
  font-weight: var(--ia-copy-weight);
}

:is(.page-wrapper, .project-detail, .cta-banner, .site-footer, main) :where(p, li, dd, address) :where(strong, b) {
  font-family: var(--ia-font-sans);
  font-weight: var(--ia-copy-strong-weight);
}