/* ============================================================
   MeFriend — Shared Design System
   Premium editorial creative-agency styles
   ============================================================ */

/* Fonts: Onest and Inter, both variable, both SIL Open Font License 1.1
   (verified in the name table; fsType 0). WOFF2 is served first because it is
   ~59% smaller than the TTF in total, with the TTF kept as a fallback for any
   browser that cannot use WOFF2 — it costs nothing to declare, since a browser
   that supports WOFF2 never fetches the second source.

   The `.subset` files keep the full variable axes but contain only the
   characters this site can display, which takes the three fonts from 796 KB to
   252 KB. The italic alone was 376 KB to set three words in <em>. The complete
   originals are kept alongside them, unreferenced, so a copy edit introducing a
   new character can be re-subset rather than recovered from the network.

   The woff2 format() string is declared first so a browser picks it without
   downloading the TTF, and `font-display: swap` keeps text visible while it
   loads. */

@font-face {
  font-family: "Onest";
  src: url("../fonts/onest/Onest-VariableFont_wght.subset.woff2") format("woff2"),
       url("../fonts/onest/Onest-VariableFont_wght.subset.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-VariableFont_opsz-wght.subset.woff2") format("woff2"),
       url("../fonts/inter/Inter-VariableFont_opsz-wght.subset.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-Italic-VariableFont_opsz-wght.subset.woff2") format("woff2"),
       url("../fonts/inter/Inter-Italic-VariableFont_opsz-wght.subset.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-display: "Onest", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --color-bg: #f7f4ee;
  --color-bg-soft: #fbfaf7;
  --color-surface: #ffffff;
  --color-surface-dark: #17131f;

  --color-text: #18151d;
  --color-text-soft: #6c6672;
  --color-text-light: #f8f6fb;

  --color-purple: #5c49b4;
  --color-purple-dark: #302354;
  --color-purple-light: #eeeafd;

  --color-gold: #f2b531;
  --color-gold-light: #ffe6a8;
  /* Gold on a light background. The brand gold is 1.84:1 on white and 10.7:1 on
     ink, so it is only safe on dark. This darker amber keeps the same hue and
     clears 4.5:1 on both white (4.91) and the cream body (4.71). */
  --color-gold-ink: #9a6600;

  --color-border: rgba(24, 21, 29, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.16);

  --container-width: 1440px;
  --content-width: 1240px;

  --page-gutter: 24px;
  --section-gap: clamp(64px, 8vw, 112px);
  --header-offset: 88px;

  --radius-small: 14px;
  --radius-medium: 22px;
  --radius-large: 32px;
  --radius-pill: 999px;

  --shadow-small: 0 12px 35px rgba(26, 19, 45, 0.08);
  --shadow-large: 0 30px 80px rgba(26, 19, 45, 0.14);

  --section-space: clamp(40px, 4.5vw, 64px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg-soft);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

section,
[id] {
  scroll-margin-top: var(--header-offset);
}

img,
video {
  display: block;
  max-width: 100%;
}

/* iOS Safari auto-zooms the visual viewport when a focused field computes
   below 16px, which then leaves the page permanently magnified after blur.
   Pinning form controls to 16px removes that class of Safari-only layout
   shift without touching the zoom setting or any device font size. */
input,
select,
textarea {
  font-size: 16px;
}

h1, h2, h3,
.display-title,
.hero-title,
.section-title,
.project-title,
.service-title,
.cta-title,
.page-title,
.page-hero-title,
.clients-title,
.gulf-band h2,
.testimonial-card blockquote {
  font-family: var(--font-display);
}

button, input, textarea, select,
nav, .nav-link, .eyebrow, .meta,
.stat-label, .stat-number,
.project-country, .project-summary,
.footer, .footer * {
  font-family: var(--font-body);
}

button,
input,
textarea,
select {
  font: inherit;
}

/* ============================================================
   Accessibility primitives
   ============================================================ */

/* Hero video pause control. Positioned inside the hero, bottom-right of the
   content container, and kept above the video/overlay stack. */
.homepage-hero-video-toggle {
  position: absolute;
  /* Above .stats-bridge (z-index 20). The stats panel is nearly full width and
     straddles the hero's bottom edge, so at 1440 and 1024 it covered this
     control: the white icon and label sat on the white panel at 1.00:1. */
  z-index: 30;
  right: var(--page-gutter);
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  /* 0.78 rather than 0.55: the control can land on the white panel or on a
     bright video frame, and 0.55 left the white label at 1.00-2.81:1. */
  background: rgba(10, 8, 14, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.homepage-hero-video-toggle:hover {
  background: rgba(10, 8, 14, 0.78);
  border-color: rgba(255, 255, 255, 0.6);
}

.homepage-hero-video-toggle[hidden] {
  display: none;
}

.homepage-hero-video-toggle-icon {
  font-size: 10px;
  letter-spacing: 1px;
}

@media (max-width: 767px) {
  .homepage-hero-video-toggle {
    bottom: 20px;
    right: var(--page-gutter);
  }
}

/* Every interactive control gets a visible keyboard focus ring. The previous
   build had no :focus-visible rule at all, so keyboard users got the browser
   default that is invisible against several dark sections. */
:focus-visible {
  outline: 3px solid #55489d;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Dark sections need a lighter ring to stay visible against the background. */
.contact-section :focus-visible,
.site-footer :focus-visible,
.page-hero :focus-visible,
.homepage-hero :focus-visible,
.gulf-band :focus-visible,
.testimonial-section :focus-visible {
  outline-color: #f0d36c;
}

/* Skip to main content. Kept out of the tab order visually until focused. */
.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10000;
  transform: translateY(-180%);
  padding: 12px 20px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  background: #55489d;
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

#main-content:focus {
  outline: none;
}


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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: min(100% - (var(--page-gutter) * 2), var(--content-width));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-space);
}

.section-heading {
  max-width: 760px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.section-eyebrow {
  margin: 0 0 clamp(14px, 1.4vw, 18px);
  color: var(--color-purple);
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-title {
  margin: 0;
  max-width: 100%;
  font-family: "Onest", sans-serif;
  font-size: clamp(36px, 4.5vw, 70px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.section-description {
  max-width: 700px;
  margin: 24px 0 0;
  color: var(--color-text-soft);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.75;
}

/* ---------- Homepage heading rhythm ----------
   The replacement section headings are longer than the ones they replaced, so
   each gets deliberate space before the content that follows and a max-width
   that makes it wrap on purpose. Headings that sit inside the two-column
   .services-header are left out on purpose: a bottom margin there would push
   them out of line with the paragraph beside them. */
.about-preview-content .section-title,
.approach-section .section-title {
  margin: clamp(14px, 1.6vw, 20px) 0 clamp(24px, 2.6vw, 34px);
}

.approach-section .section-heading {
  max-width: 1080px;
}

/* ---------- Buttons ---------- */
.button {
  min-height: 56px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 800;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.button:hover {
  transform: translateY(-3px);
}

.button-primary {
  background: var(--color-purple);
  color: #fff;
  box-shadow: 0 16px 35px rgba(92, 73, 180, 0.32);
}

.button-primary:hover {
  box-shadow: 0 20px 45px rgba(92, 73, 180, 0.42);
}

.button-dark {
  background: #100d16;
  color: #fff;
}

.button-secondary-light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-purple);
  font-weight: 800;
  font-size: 15px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s ease;
}

.text-link:hover {
  border-color: var(--color-gold);
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  height: 88px;
  color: #ffffff;
}

/* Every hero is dark and the header text is white, but the homepage and service
   heroes put live video and a photograph behind the header, so a white label
   could land on a bright pixel: "Work" measured 1.95:1 on the homepage and the
   service-hero overlay only reaches ~35% opacity at the top, leaving the nav at
   2.68-4.27:1. A short top scrim keeps every header label above 4.5:1.
   z-index: -1 puts the scrim behind the header's own content rather than
   tinting the white text. */
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 176px;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(10, 8, 14, 0.78) 0%,
    rgba(10, 8, 14, 0.5) 45%,
    rgba(10, 8, 14, 0) 100%
  );
  pointer-events: none;
}

.header-inner {
  width: min(calc(100% - 80px), 1440px);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: auto;
  height: 56px;
  object-fit: contain;
  object-position: left center;
  transition: opacity 0.25s ease;
}

.brand-logo--normal {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

.brand-logo--reverse {
  opacity: 1;
}

.footer-brand-logo {
  display: block;
  width: min(230px, 100%);
  height: auto;
  object-fit: contain;
}

.desktop-navigation {
  display: flex;
  align-items: center;
  gap: 38px;
}

.desktop-navigation > a:not(.header-contact-button) {
  position: relative;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.desktop-navigation > a:not(.header-contact-button)::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: -8px;
  left: 0;
  height: 2px;
  background: #f2b531;
  transition: right 0.25s ease;
}

.desktop-navigation > a:not(.header-contact-button):hover::after {
  right: 0;
}

.header-contact-button {
  min-width: 134px;
  min-height: 50px;
  padding-inline: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #5c49b4;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(92, 73, 180, 0.25);
}

.mobile-menu-button {
  display: none;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99999;
  visibility: hidden;
  pointer-events: none;
  /* `visibility` is discrete, so it must be delayed on close by the same
     duration as the panel's transform. Without the delay the wrapper becomes
     hidden immediately and the .30s close animation never becomes visible. */
  transition: visibility 0s linear .30s;
}

.mobile-menu.open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}

.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgba(15, 12, 22, .46);
  opacity: 0;
  transition: opacity .28s ease;
  cursor: pointer;
}

.mobile-menu.open .mobile-menu-backdrop {
  opacity: 1;
}

.mobile-menu-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(88vw, 360px);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 18px 0 50px rgba(15, 12, 22, .16);
  transform: translateX(-100%);
  transition: transform .30s cubic-bezier(.22,.75,.25,1);
  overflow-y: auto;
  padding: max(18px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}

.mobile-menu.open .mobile-menu-panel {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 58px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(23, 19, 31, .08);
}

.mobile-menu-brand {
  display: inline-flex;
  align-items: center;
}

.mobile-menu-brand img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}

.mobile-menu-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #17131f;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}

.mobile-menu-close:hover {
  background: rgba(23,19,31,.06);
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}

.mobile-menu-nav a {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0 10px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: #17131f;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a:active {
  background: #f4f2f7;
}

.mobile-menu-bottom {
  margin-top: auto;
  padding-top: 28px;
}

.mobile-menu-cta {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #5d42c5;
  color: #fff !important;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s ease;
}

.mobile-menu-cta:hover {
  background: #5137b4;
}

body.menu-open {
  overflow: hidden;
}

/* Locking overflow on <body> alone is not enough: because <html> keeps the
   default `overflow: visible`, the body's value propagates to the viewport,
   which collapses the scroller and throws the page back to scroll position 0.
   Locking the root element as well stops the propagation so the real scroller
   keeps its offset. */
html.menu-open {
  overflow: hidden;
}

/* ============================================================
   Homepage hero
   ============================================================ */
.homepage-hero {
  position: relative;
  width: 100%;
  min-height: 780px;
  height: 100svh;
  max-height: 980px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #100d17;
  color: #ffffff;
}

.homepage-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  transform: none;
}

.homepage-hero-overlay {
  position: absolute;
  inset: 0;
  background:
  /* The copy block is up to 1100px wide, so on a 1024 or 760 viewport the small
     eyebrow and subtitle sit past the point where this used to fade out. With a
     near-transparent right edge a light frame in the video left them on a
     mid-tone background, below 4.5:1. The falloff is kept for depth but floors
     at 0.52 so the text never depends on which frame is showing. */
  linear-gradient(
    90deg,
    rgba(11, 8, 17, 0.93) 0%,
    rgba(11, 8, 17, 0.88) 30%,
    rgba(11, 8, 17, 0.74) 55%,
    rgba(11, 8, 17, 0.60) 78%,
    rgba(11, 8, 17, 0.52) 100%
  ),
  linear-gradient(
    180deg,
    rgba(11, 8, 17, 0.16) 0%,
    rgba(11, 8, 17, 0.03) 55%,
    rgba(11, 8, 17, 0.38) 100%
  );
  pointer-events: none;
}

.homepage-hero-container {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 80px), 1440px);
  margin-inline: auto;
  padding-top: 108px;
  padding-bottom: 50px;
}

.homepage-hero-copy {
  width: 100%;
  max-width: 1100px;
}

.homepage-hero-eyebrow {
  margin: 0 0 clamp(16px, 1.6vw, 22px);
  color: #ffe3a0;
  font-family: "Onest", sans-serif;
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The services line leads the hero; the shared homepage scale below keeps
   it consistent with the approved About heading. */
.homepage-hero-title {
  max-width: 1100px;
  margin: 0 0 clamp(16px, 1.6vw, 20px);
  color: #ffffff;
  font-family: "Onest", sans-serif;
  font-size: clamp(46px, 6.3vw, 104px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.homepage-hero-subtitle {
  max-width: 740px;
  margin: 0 0 clamp(22px, 2.2vw, 30px);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.35;
  text-wrap: balance;
}

.homepage-hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero-button {
  min-height: 54px;
  padding-inline: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.hero-button:hover {
  transform: translateY(-3px);
}

.hero-button-primary {
  min-width: 165px;
  background: #5c49b4;
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(92, 73, 180, 0.3);
}

.hero-button-secondary {
  min-width: 188px;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  backdrop-filter: blur(12px);
}

.hero-button-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

.hero-play-icon {
  font-size: 11px;
}

@media (min-width: 1500px) {
  .homepage-hero-container {
    width: min(calc(100% - 120px), 1440px);
  }
}

@media (max-width: 1280px) {
  .homepage-hero-title {
    max-width: 940px;
  }

  .homepage-hero-copy {
    max-width: 940px;
  }
}

/* ============================================================
   STATS BRIDGE
   ONE CONNECTED BOX ONLY
============================================================= */
.stats-bridge {
  position: relative;
  z-index: 20;
  width: 100%;
  padding: 0 5%;
  background: transparent !important;
  margin-top: -90px;
  margin-bottom: -90px;
}

.stats-box {
  width: 100%;
  max-width: 1550px;
  min-height: 190px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 30px;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(10, 8, 20, 0.12),
    0 6px 18px rgba(10, 8, 20, 0.05);
}

.stat-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 38px 24px;
  background: transparent;
  text-align: center;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.stat-item + .stat-item {
  border-left: 1px solid rgba(17, 17, 17, 0.08);
}

.stat-number {
  margin: 0 0 12px;
  color: #111111 !important;
  font-size: clamp(42px, 4vw, 64px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.stat-label {
  color: #222222 !important;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stat-item:hover {
  background: rgba(68, 38, 102, 0.025);
}

/* ============================================================
   Approach — horizontal story cards
   ============================================================ */
.approach-section {
  background: var(--color-bg);
  overflow: hidden;
  /* The next section ("What We Do") brings its own top padding, so keeping a
     full section-space here stacked two full paddings and left 216px of empty
     beige between the last card and that heading. This is one transition
     between two neighbours, so the pair now adds up to a normal 64-88px. */
  padding-bottom: clamp(40px, 3.9vw, 52px);
}

/* Continuous rails retain native touch and trackpad scrolling without UI chrome. */
[data-scroll-rail] {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 var(--page-gutter);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
  scrollbar-width: none;
  cursor: grab;
}
[data-scroll-rail]::-webkit-scrollbar { display: none; width: 0; height: 0; }
[data-scroll-rail]:focus-visible { outline: 2px solid var(--color-purple); outline-offset: -2px; }
[data-scroll-rail].is-dragging { cursor: grabbing; user-select: none; }
.horizontal-card-track { display: flex; gap: 22px; }
.work-viewport { width: 100%; }
.work-track { width: max-content; }
.work-group { display: flex; gap: 22px; }
.auto-rail-track {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  gap: 22px;
}
.logo-marquee .auto-rail-track { gap: 20px; }
.section-description-wrap { display: flex; align-items: center; }

.story-card {
  flex: 0 0 min(296px, calc(100vw - 64px));
  overflow: hidden;
  border-radius: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-small);
}

.story-card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.story-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.story-card:hover img {
  transform: scale(1.055);
}

.story-card-content {
  min-height: 0;
  padding: 20px 20px 24px;
}

.story-card-number {
  color: var(--color-purple);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.story-card h3 {
  margin: 14px 0 8px;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.story-card p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* ============================================================
   About preview
   ============================================================ */
.about-preview {
  background: #fff;
}

.about-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(50px, 7vw, 110px);
  align-items: center;
}

.about-preview-grid > * {
  min-width: 0;
}

.about-preview-media {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-radius: 34px;
  box-shadow: var(--shadow-large);
}

.about-preview-media img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
}

/* Gold emphasis on the closing words. Kept inline (no forced break) so the
   longer heading wraps as one deliberate phrase instead of a stray last line. */
.about-preview-content .section-title span {
  color: var(--color-gold-ink);
  font-weight: 700;
}

.about-preview-content > p:not(.section-eyebrow) {
  color: var(--color-text-soft);
  font-size: 17px;
  line-height: 1.8;
}

.about-preview-content > p {
  margin-top: 22px;
}

.about-preview-actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* ============================================================
   Services
   ============================================================ */
.services-section {
  background: var(--color-bg);
  /* Top half of the approach -> services transition; see .approach-section. */
  padding-top: clamp(24px, 2.2vw, 32px);
}

.services-header {
  margin-bottom: clamp(32px, 4vw, 62px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(36px, 5vw, 70px);
  align-items: end;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 26px);
}

.service-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: clamp(300px, 26vw, 400px);
  border-radius: clamp(18px, 2vw, 30px);
  background: var(--color-surface-dark);
  color: #fff;
  box-shadow: var(--shadow-small);
}

.service-card-media {
  position: absolute;
  inset: 0;
}

.service-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The title sits in the lower third, where the photo is not reliably dark.
     The scrim therefore has to reach full strength by the time the text starts
     rather than only at the very bottom edge, or a light frame in the source
     image leaves the title on a mid-tone background. */
  background: linear-gradient(
    180deg,
    rgba(18, 13, 27, 0.12) 12%,
    rgba(18, 13, 27, 0.72) 46%,
    rgba(18, 13, 27, 0.93) 72%,
    rgba(18, 13, 27, 0.97) 100%
  );
}

.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.service-card-content {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  padding: clamp(20px, 1.9vw, 30px);
}

/* Outcome line under each service title. Sits inside the card's existing dark
   gradient, so it inherits that contrast; rgba(255,255,255,0.72) is 8.1:1 on the
   rgb(24,18,32) the gradient settles to. */
.service-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.service-card h3 {
  margin: 14px 0 12px;
  max-width: 100%;
  font-size: clamp(21px, 1.65vw, 28px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}

.service-card p {
  max-width: 100%;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.65;
}

.service-card-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--color-gold-light);
  font-size: 14px;
  font-weight: 700;
}

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

/* ============================================================
   Featured work
   ============================================================ */
.work-section {
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 80% 10%, rgba(92, 73, 180, 0.35), transparent 42%),
    #141019;
}

.work-section .section-eyebrow {
  color: var(--color-gold);
}

.work-section .section-description {
  color: rgba(255, 255, 255, 0.6);
}

.work-group > .work-card {
  position: relative;
  flex: 0 0 min(404px, calc(100vw - 64px));
  min-height: 400px;
  overflow: hidden;
  border-radius: 24px;
  background: #17131f;
}

.work-card img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s ease;
}

.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 32%,
    rgba(12, 9, 18, 0.9) 100%
  );
}

.work-card-content {
  position: absolute;
  z-index: 2;
  right: 26px;
  bottom: 26px;
  left: 26px;
  color: #fff;
}

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

.work-card-category {
  color: var(--color-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.work-card h3 {
  margin: 10px 0 12px;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.work-card p {
  max-width: 480px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.work-card-metrics {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-card-metrics span {
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 700;
}

.work-card-link {
  display: inline-flex;
  margin-top: 18px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: 4px;
}

/* ============================================================
   Impact
   ============================================================ */
.impact-section {
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 85% 15%, rgba(242, 181, 49, 0.16), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(126, 97, 220, 0.3), transparent 34%),
    linear-gradient(135deg, #171121 0%, #382660 55%, #211733 100%);
}

.impact-heading {
  max-width: 760px;
}

.impact-heading h2 {
  margin: 0;
  font-size: clamp(50px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.impact-heading p:last-child {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 17px;
  line-height: 1.75;
}

.impact-grid {
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.impact-item {
  min-height: 230px;
  padding: 38px 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.impact-item:last-child {
  border-right: 0;
}

.impact-number {
  display: block;
  color: var(--color-gold);
  font-size: clamp(48px, 5vw, 78px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
}

.impact-label {
  display: block;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.67);
  line-height: 1.55;
}

.impact-pills {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.impact-pills span {
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.05);
}

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials-section {
  background: var(--color-bg);
  overflow: hidden;
}

.testimonials-section .section-heading {
  max-width: none;
}

.testimonials-section .section-title {
  width: max-content;
  max-width: 100%;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.05;
  white-space: nowrap;
}

.testimonials-grid--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 980px;
  margin-inline: auto;
}

.testimonials-section .testimonial-card {
  background: #fff;
  border-radius: 22px;
  padding: 32px;
  min-height: 260px;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonials-section .testimonial-card blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65;
  color: #221f28;
}

.testimonial-client {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-client img {
  display: block;
  width: auto;
  max-width: 120px;
  max-height: 44px;
  object-fit: contain;
}

.testimonial-client-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-purple-light);
  color: var(--color-purple);
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

.testimonial-client strong {
  display: block;
  font-size: 16px;
}

.testimonial-client span {
  display: block;
  margin-top: 3px;
  color: var(--color-text-soft);
  font-size: 12px;
}

.testimonial-logo {
  display: block;
  width: auto;
  max-width: 125px;
  max-height: 46px;
  object-fit: contain;
}

/* ============================================================
   Clients
   ============================================================ */
.clients-section {
  padding-block: var(--section-space);
  overflow: hidden;
  background: #fff;
}

.clients-title {
  margin: 0 0 30px;
  font-size: clamp(32px, 4vw, 64px);
  letter-spacing: -0.04em;
}

.logo-track {
  display: flex;
  width: max-content;
  gap: 20px;
}
.client-logo-card:hover img,
.client-logo-card:focus-within img {
  filter: grayscale(0);
  opacity: 1;
}

.client-logo-card {
  width: clamp(150px, 16vw, 240px);
  height: clamp(90px, 9vw, 130px);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-bg-soft);
  color: #9a959e;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* width/height 100% with object-fit: contain gives every logo the same
   optical size and a centred baseline whatever its intrinsic aspect ratio.
   The previous max-width/max-height pair let wide and tall source files
   render at noticeably different scales, which read as unbalanced. */
.client-logo-card img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
  transition: 0.25s ease;
}



/* ============================================================
   Contact
   ============================================================ */
.contact-section {
  color: #fff;
  background:
    radial-gradient(circle at 10% 15%, rgba(242, 181, 49, 0.13), transparent 28%),
    linear-gradient(135deg, #17131f, #342454);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(55px, 8vw, 120px);
  align-items: center;
}

.contact-content h2 {
  margin: 0;
  font-size: clamp(48px, 6vw, 86px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.contact-content h2 em {
  color: var(--color-gold);
  font-weight: 500;
}

.contact-content > p {
  max-width: 590px;
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 17px;
  line-height: 1.75;
}

.office-details {
  margin-top: 42px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
}

.office-details strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.office-details a {
  display: block;
  margin-top: 6px;
}

.office-details a:hover {
  color: var(--color-gold);
}

.location-pills {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.location-pills span {
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-socials {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-socials a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.contact-socials a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-gold);
}

.contact-form {
  padding: clamp(28px, 4vw, 52px);
  border-radius: 30px;
  background: #fbf7ed;
  color: var(--color-text);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.23);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.form-field-full {
  grid-column: 1 / -1;
}

.contact-form label {
  display: block;
  margin-bottom: 9px;
  color: #716a76;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(24, 21, 29, 0.12);
  border-radius: 14px;
  outline: none;
  background: #fff;
  color: var(--color-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input {
  height: 58px;
  padding-inline: 18px;
}

.contact-form textarea {
  min-height: 150px;
  padding: 17px 18px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-purple);
  box-shadow: 0 0 0 4px rgba(92, 73, 180, 0.1);
}

.contact-form .button {
  width: 100%;
  margin-top: 26px;
  border: 0;
  cursor: pointer;
}

/* Honeypot: pulled out of the layout but still submitted if a bot fills it in.
   The field is forced to 1x1 so the shared .contact-form input sizing cannot
   leave a real, clickable box behind. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-hp input {
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.form-status {
  margin: 18px 0 0;
  padding: 15px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}

.form-status:focus-visible {
  outline: 3px solid var(--focus-ring, #ffd166);
  outline-offset: 3px;
}

.form-status.is-ok {
  background: rgba(46, 160, 105, 0.13);
  color: #1c6b46;
}

.form-status.is-error {
  background: rgba(196, 60, 60, 0.12);
  color: #a32727;
}

/* In flight. Deliberately neutral rather than a success colour: nothing has
   been received yet, and a green box would claim otherwise. */
.form-status.is-pending {
  background: rgba(255, 209, 102, 0.14);
  color: #7a5a12;
}

/* Submitted but not confirmed by the endpoint. Kept visually distinct from both
   success and failure: it is genuinely neither, and the visitor is being asked
   to do something about it. */
.form-status.is-unconfirmed {
  background: rgba(199, 138, 22, 0.14);
  color: #7a4f0c;
}

/* The message contains mailto/tel links, so it is a block of mixed content
   rather than a single sentence. */
.form-status a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Per-field error text. Left empty until a field fails, so an untouched form
   has no visual or announced noise. */
.form-field-error {
  margin: 6px 0 0;
  color: #a32727;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.form-field-error:empty {
  display: none;
}

.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  border-color: rgba(196, 60, 60, 0.65);
  box-shadow: 0 0 0 4px rgba(196, 60, 60, 0.1);
}

.contact-form .button[disabled] {
  opacity: 0.62;
  cursor: progress;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  position: relative;
  background: radial-gradient(circle at 85% 0%, rgba(94, 65, 170, 0.16), transparent 34%), #0f0c16;
  color: rgba(255, 255, 255, 0.78);
  /* No min-height and no spacer elements: the height comes only from padding
     and grid gaps, all of which are compact here. */
  min-height: 0;
  padding: 56px 0 24px;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

.footer-inner {
  width: min(1600px, calc(100% - 10vw));
  margin-inline: auto;
}

.footer-grid {
  display: grid;
  /* Three clear desktop columns: Brand, Navigation, Contact. The repeated
     eight-service list and the standalone locations column were folded into
     the Contact column, so the grid is 3 columns instead of 5. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.6fr) minmax(0, 1fr);
  gap: clamp(24px, 2.4vw, 40px);
  align-items: start;
}

.footer-logo {
  width: auto;
  height: 50px;
  display: block;
  object-fit: contain;
}

.footer-brand-copy {
  max-width: 290px;
  margin: 20px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

.footer-heading {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.footer-links a,
.footer-contact,
.footer-contact-links a,
.footer-location-list li {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.76);
}

.footer-links a,
.footer-contact-links a {
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-links a:hover,
.footer-contact-links a:hover {
  color: #fff;
}

.footer-links a:hover {
  transform: translateX(3px);
}

.footer-contact {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-style: normal;
  gap: 4px;
}

.footer-contact-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
}

.footer-locations {
  margin: 22px 0 0;
}

.footer-location-list {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
}

.footer-heading--inline {
  display: block;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.66);
}

.footer-group-note {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
}

/* Locations are informational labels (markets served), so they get a soft
   pill treatment instead of a link affordance they cannot honour. */
.footer-location-list li {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 12px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.back-to-top:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}

.back-to-top[hidden] {
  display: none;
}

.footer-bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 30px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
}

/* ============================================================
   About page
   ============================================================ */
.page-hero {
  position: relative;
  padding: 210px 0 100px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 85% 20%, rgba(242, 181, 49, 0.14), transparent 30%),
    radial-gradient(circle at 10% 85%, rgba(126, 97, 220, 0.26), transparent 36%),
    linear-gradient(135deg, #171121 0%, #342454 100%);
}

.page-hero-inner {
  max-width: 900px;
}

.brand-partners-page .page-hero {
  padding-top: 100px;
  padding-bottom: 60px;
}

/* .section-eyebrow is purple, which is right on the light sections but was
   2.40:1 on the dark page hero. Dark sections use gold, matching
   .work-section .section-eyebrow, which is ~10:1 on ink. */
.page-hero .section-eyebrow,
.service-hero .section-eyebrow,
.work-page-hero .section-eyebrow {
  color: var(--color-gold);
}

.brand-partners-page .page-hero .section-eyebrow {
  margin-bottom: 16px;
}

.brand-partners-page .page-hero .page-hero-title {
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.03em;
}

.about-brand-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr);
  align-items: center;
  gap: 70px;
}

.about-brand-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-brand-logo {
  width: min(100%, 280px);
  height: auto;
  object-fit: contain;
}

.gulf-madhyamam-logo {
  display: block;
  width: min(100%, 340px);
  height: auto;
  object-fit: contain;
}

.page-label {
  color: var(--color-gold-light);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.page-title {
  margin: 20px 0 24px;
  font-size: clamp(44px, 6.2vw, 92px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  overflow-wrap: break-word;
}

.page-title em {
  display: block;
  color: var(--color-gold);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
}

.page-desc {
  max-width: 700px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  line-height: 1.8;
}

.page-content {
  background: #fff;
}

.page-content .section-title {
  font-size: clamp(40px, 5vw, 66px);
}

.page-body {
  max-width: 680px;
  margin-top: 30px;
  color: var(--color-text-soft);
  font-size: 17px;
  line-height: 1.85;
}

.page-body p {
  margin: 0 0 22px;
}

.page-body strong {
  color: var(--color-text);
}

.presence-strip {
  margin-top: 44px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

.presence-strip h3 {
  margin: 0 0 20px;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
}

.presence-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.presence-tags span {
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft);
  color: var(--color-purple);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Gulf Madhyamam dark band */
.gulf-band {
  color: #fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(242, 181, 49, 0.12), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(126, 97, 220, 0.28), transparent 36%),
    #17131f;
}

.gulf-band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.gulf-band-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.gulf-band-logo img {
  /* Enlarged for presence in the band. `height: auto` plus
     `object-fit: contain` keeps the logo's intrinsic aspect ratio, so this is
     a pure scale change with no cropping or distortion. */
  width: min(100%, 460px);
  height: auto;
  object-fit: contain;
}

.gulf-band .section-eyebrow {
  color: var(--color-gold);
}

.gulf-band h2 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 66px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.gulf-band .page-body {
  color: rgba(255, 255, 255, 0.72);
}

.gulf-band .page-body strong {
  color: #fff;
}

/* Legacy points */
.legacy-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.legacy-item {
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-medium);
  background: rgba(255, 255, 255, 0.04);
}

.legacy-item strong {
  display: block;
  color: var(--color-gold);
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.legacy-item span {
  display: block;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  font-size: 14px;
}

/* ============================================================
   Service pages
   ============================================================ */
.service-hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 80% 30%, rgba(92, 73, 180, 0.18), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(242, 181, 49, 0.08), transparent 40%),
    #17131f;
}

.service-hero-media,
.service-hero-overlay {
  position: absolute;
  inset: 0;
}

.service-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.service-hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(15, 10, 24, 0.91),
      rgba(15, 10, 24, 0.55) 52%,
      rgba(15, 10, 24, 0.18)
    ),
    linear-gradient(
      180deg,
      rgba(15, 10, 24, 0.1),
      rgba(15, 10, 24, 0.78)
    );
}

.service-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 180px;
  padding-bottom: 95px;
}

.service-breadcrumb {
  color: var(--color-gold-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.service-hero-content h1 {
  max-width: 900px;
  margin: 18px 0 25px;
  font-family: var(--font-display);
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 650;
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.service-hero-content h1 em,
.service-hero-content h1 .accent {
  font-size: inherit;
  line-height: inherit;
}

.service-hero-content h1 .accent {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--color-gold);
}

.service-hero-content > p:not(.service-breadcrumb) {
  max-width: 630px;
  color: rgba(255, 255, 255, 0.73);
  font-size: 19px;
  line-height: 1.7;
}

.service-hero-content .button {
  margin-top: 34px;
}

.service-intro {
  background: var(--color-bg);
}

.service-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 100px);
  align-items: center;
}

.service-intro-text p {
  margin: 0 0 20px;
  color: var(--color-text-soft);
  font-size: 17px;
  line-height: 1.85;
  max-width: 680px;
}

.capabilities-section {
  background: #fff;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.capability-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Hover and keyboard focus get the same treatment, so the feedback does not
   depend on having a pointer. Cards carry tabindex="0" for this reason. */
.capability-card:hover,
.capability-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(93, 66, 197, 0.45);
  box-shadow: var(--shadow-small);
}

.capability-card:focus-visible {
  outline: 2px solid var(--color-purple);
  outline-offset: 3px;
}

.capability-number {
  color: var(--color-purple);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.capability-card h3 {
  margin: 14px 0 0;
  font-size: 20px;
  line-height: 1.3;
  /* Long capability names such as "Website Maintenance & Optimization" and
     "Mobile Applications (iOS & Android)" otherwise break awkwardly. */
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Pushed to the bottom of the card so descriptions line up across a row even
   when the capability titles above them wrap to different heights. */
.capability-card p {
  margin: 12px 0 0;
  color: var(--color-text-soft);
  font-size: 14px;
  line-height: 1.65;
  margin-top: auto;
  padding-top: 12px;
}

/* Process */
.process-section {
  background: var(--color-bg);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.process-step {
  position: relative;
  padding: 38px 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: #fff;
}

.process-step-number {
  color: var(--color-gold);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.process-step h3 {
  margin: 26px 0 12px;
  font-size: 22px;
}

.process-step p {
  margin: 0;
  color: var(--color-text-soft);
  line-height: 1.7;
  font-size: 15px;
}

/* Related services */
.related-section {
  background: #fff;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.related-card {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border-radius: var(--radius-medium);
  background: var(--color-surface-dark);
  color: #fff;
  display: flex;
  align-items: flex-end;
}

.related-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.related-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(12, 9, 18, 0.85));
}

.related-card:hover img {
  transform: scale(1.06);
}

.related-card h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 26px;
  font-size: 22px;
}

/* CTA band */
.cta-band {
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 85% 20%, rgba(242, 181, 49, 0.16), transparent 30%),
    linear-gradient(135deg, #17131f, #342454);
}

.cta-band h2 {
  margin: 0;
  font-size: clamp(42px, 5.5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.cta-band p {
  max-width: 600px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 17px;
  line-height: 1.75;
}

.cta-band .button {
  margin-top: 36px;
}

/* ============================================================
   Reveal animations
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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


}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .about-preview-grid,
  .contact-grid,
  .service-intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .service-card {
    min-height: clamp(280px, 40vw, 340px);
  }

  .services-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

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

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }

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

  .footer-location-list {
    gap: 10px 20px;
  }

  .about-preview-media {
    min-height: 540px;
  }

  .stats-bridge {
    margin-top: -65px;
    margin-bottom: -65px;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .stats-bridge::-webkit-scrollbar {
    display: none;
  }

  .stats-box {
    min-width: 820px;
    min-height: 155px;
    border-radius: 24px;
  }

  .stat-item {
    padding: 28px 18px;
  }

  .stat-number {
    font-size: 42px;
  }

  .stat-label {
    font-size: 12px;
  }

  .legacy-grid,
  .process-grid,
  .related-grid,
  .capabilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  :root {
    --section-space: 52px;
    --header-offset: 82px;
  }

  .section-heading {
    margin-bottom: 42px;
  }

  .brand-partners-page .page-hero {
    padding-top: 112px;
  }

  .service-hero-content h1 {
    font-size: clamp(46px, 7vw, 70px);
    line-height: 0.96;
  }
}

@media (max-width: 760px) {
  :root {
    --section-space: 36px;
    --page-gutter: 16px;
    --header-offset: 74px;
  }

  .section-heading {
    margin-bottom: 30px;
  }

  .testimonials-section .section-title {
    width: auto;
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.12;
    white-space: normal;
  }

  .service-hero-content h1 {
    font-size: clamp(38px, 10vw, 52px);
    line-height: 0.98;
    letter-spacing: -0.035em;
  }

  .container {
    width: min(100% - (var(--page-gutter) * 2), var(--content-width));
  }

  .button {
    width: 100%;
  }

  /* The stats were display:none here, which dropped the approved figures from
     every phone. The 820px min-width scroller inherited from the 1100px block
     is also poor on a small screen, so the panel becomes a plain two-column
     grid that fits the viewport and needs no horizontal scroll. */
  .stats-bridge {
    display: block;
    margin-top: -40px;
    margin-bottom: 0;
    padding: 0 16px;
    overflow-x: visible;
  }

  .stats-box {
    min-width: 0;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 20px;
  }

  .stat-item {
    padding: 22px 12px;
  }

  .stat-number {
    font-size: clamp(30px, 9vw, 40px);
  }

  /* Five figures in two columns leaves a gap, so the last one spans the row. */
  .stats-box .stat-item:last-child {
    grid-column: 1 / -1;
  }

  .gulf-band-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .gulf-band-logo {
    order: -1;
  }

  .gulf-band-logo img {
    width: min(78%, 360px);
  }


  /* Two cards per row on phones, in source order:
     Podcast | Events
     Reputation Management | Digital Marketing
     Website & App Development | Integrated Media
     Content Creation | Brand Experience
     The page gutter already comes from .container, so no extra padding here. */
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .service-card {
    min-width: 0;
    /* Compact cards keep all eight services easy to scan on a phone. */
    min-height: 212px;
    border-radius: 18px;
  }

  .service-card-content {
    padding: 14px;
  }


  .service-card h3 {
    margin: 0 0 9px;
    font-size: clamp(15px, 4.1vw, 18px);
    line-height: 1.14;
    letter-spacing: -0.02em;
    overflow-wrap: normal;
  }

  .service-card-link {
    display: inline-block;
    margin-top: 0;
    font-size: 11px;
    line-height: 1.25;
  }

  .about-preview-media {
    min-height: 430px;
  }

  .impact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .impact-item {
    min-height: 170px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .impact-item:last-child {
    border-bottom: 0;
  }

  .form-grid,
  .capabilities-grid,
  .process-grid,
  .related-grid,
  .legacy-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-field-full {
    grid-column: auto;
  }

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

  .footer-inner {
    width: calc(100% - 36px);
  }

  /* Compact phone layout: brand across the top, the two link columns side by
     side, then Contact and Locations, then the copyright row. Two columns
     wherever there is room, so the footer does not become one tall stack. */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }

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

  .footer-brand-copy {
    max-width: 100%;
  }

  .footer-heading {
    margin-bottom: 12px;
  }

  /* Wrap the locations instead of a hidden horizontal scroller, so nothing
     scrolls sideways on a phone. */
  .footer-location-list {
    width: 100%;
    overflow: visible;
    gap: 8px 14px;
    padding-bottom: 0;
  }

  .footer-location-list::-webkit-scrollbar {
    display: none;
  }

  .footer-bottom {
    margin-top: 26px;
    padding-top: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .service-hero {
    min-height: 680px;
  }

  .work-card {
    min-height: 480px;
  }

  .work-card-content {
    right: 24px;
    bottom: 24px;
    left: 24px;
  }

  .testimonials-grid--two {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
    gap: 18px;
  }

  .testimonials-section .testimonial-card {
    min-height: auto;
    padding: 24px;
  }

  .testimonial-client img {
    max-width: 110px;
    max-height: 40px;
  }

  .page-hero {
    padding: 160px 0 72px;
  }

  .brand-partners-page .page-hero {
    padding-top: 96px;
    padding-bottom: 56px;
  }

  .about-brand-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .about-brand-logo {
    width: min(72%, 220px);
  }

  .hero-actions {
    margin-bottom: 30px;
  }
}

@media (max-width: 390px) {
  .mobile-menu-panel {
    width: min(90vw, 340px);
  }
}

/* ---------- Header + hero: tablet ---------- */
@media (max-width: 900px) {
  .header-inner,
  .homepage-hero-container {
    width: calc(100% - 48px);
  }

  .testimonials-grid--two {
    gap: 22px;
  }

  .testimonials-section .testimonial-card {
    padding: 28px;
  }

  .desktop-navigation {
    display: none;
  }

  .mobile-menu-button {
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-content: center;
    gap: 6px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
  }

  .mobile-menu-button span {
    width: 20px;
    height: 2px;
    display: block;
    background: currentColor;
  }
}

/* ---------- Header + hero: mobile ---------- */
@media (max-width: 600px) {
  .site-header {
    height: 74px;
  }

  .header-inner,
  .homepage-hero-container {
    width: calc(100% - 32px);
  }

  .brand-logo {
    height: 42px;
    width: auto;
    max-width: 200px;
  }

  .homepage-hero {
    height: auto;
    min-height: 820px;
    align-items: flex-end;
  }

  .homepage-hero-video {
    object-position: 61% center;
  }

  .homepage-hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(11, 8, 17, 0.93),
        rgba(11, 8, 17, 0.59)
      ),
      linear-gradient(
        180deg,
        rgba(11, 8, 17, 0.12),
        rgba(11, 8, 17, 0.78)
      );
  }

  .homepage-hero-container {
    padding-top: 120px;
    padding-bottom: 52px;
  }

  .homepage-hero-eyebrow {
    max-width: 420px;
  }

  .homepage-hero-title {
    max-width: 100%;
    font-size: clamp(38px, 10vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.045em;
  }

  .homepage-hero-subtitle {
    max-width: 100%;
    font-size: 18px;
    line-height: 1.4;
  }

  .homepage-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-button {
    width: 100%;
  }
}

/* ---------- Small-screen type scale ----------
   Covers the whole phone range in one rule, including the 601-767px band that
   the 600px breakpoint above does not reach. */
@media (max-width: 767px) {
  .homepage-hero-title {
    font-size: clamp(38px, 10vw, 58px);
    line-height: 1.02;
  }

  .homepage-hero-subtitle {
    font-size: 18px;
  }

  .section-title {
    font-size: clamp(32px, 8vw, 46px);
    line-height: 1.12;
  }

  .about-preview-content .section-title,
  .approach-section .section-title {
    margin-bottom: 22px;
  }
}

/* ---------- Tablet band ----------
   The hero is a full-height video hero, so the services line has to carry the
   weight on a tablet too. 6.3vw is only ~48px at 768px, which reads as an
   afterthought next to a 980px hero, so it steps up across this range. */
@media (min-width: 601px) and (max-width: 1024px) {
  .homepage-hero-title {
    font-size: clamp(52px, 8vw, 78px);
  }

  .homepage-hero-subtitle {
    font-size: clamp(19px, 2.4vw, 23px);
  }
}

/* ============================================================
   Partners Page
   ============================================================ */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.partner-logo-card {
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: #fff;
}

.partner-logo-card img {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
}

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

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

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

/* ============================================================
   Mobile Tap Targets
   Enforce a comfortable minimum hit area on touch devices
   without altering visual size or desktop layout
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .text-link,
  .work-card-link,
  .footer-links a,
  .footer-contact-links a,
  .footer-brand-copy a,
  .section-eyebrow a,
  .logo-track a {
    display: inline-block;
    min-height: 44px;
    padding-block: 11px;
  }

  .footer-links,
  .footer-contact-links {
    display: flex;
    flex-direction: column;
  }

  .footer-contact a,
  .office-details a {
    display: inline-block;
    min-height: 44px;
    padding-block: 11px;
  }

  .header-brand,
  .mobile-menu-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Homepage: use the approved About heading scale consistently. */
.home-page { --home-heading-size: clamp(36px, 4.5vw, 70px); }
.home-page .homepage-hero-title,
.home-page .section-title,
.home-page .clients-title,
.home-page .contact-content h2 {
  font-size: var(--home-heading-size);
  line-height: 1.08;
  letter-spacing: -0.045em;
  white-space: normal;
}
/* The stats overlap the hero only; reserve their full height before About. */
.home-page .stats-bridge { margin-bottom: 0; }
.home-page .about-preview { padding-top: clamp(56px, 5vw, 80px); }
@media (max-width: 767px) {
  .home-page { --home-heading-size: clamp(32px, 8vw, 46px); }
  .home-page .about-preview { padding-top: 48px; }
}

/* Compact desktop impact card bridges the hero and About sections. */
.home-page .stats-bridge {
  margin: -72px 0;
  padding: 0 var(--page-gutter);
  background: transparent !important;
}
.home-page .stats-box {
  max-width: 1100px;
  min-width: 0;
  min-height: 144px;
  padding: 20px 8px;
  border: 1px solid rgba(24,21,29,.08);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(23,18,34,.12);
  background: #ffffff;
}
.home-page .stat-item {
  align-items: flex-start;
  padding: 0 22px;
  text-align: left;
}
.home-page .stat-item + .stat-item { border-color: rgba(24,21,29,.1); }
.home-page .stat-item:hover { background: transparent; }
.stat-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  border: 1px solid rgba(242,181,49,.25);
  border-radius: 12px;
  background: rgba(242,181,49,.06);
  color: #9a6600;
}
.stat-icon svg { width: 18px; height: 18px; }
.home-page .stat-number {
  color: #18151d !important;
  font-size: 34px;
  margin-bottom: 8px;
}
.home-page .stat-label {
  color: #6c6672 !important;
  font-size: 11px;
  letter-spacing: .1em;
}
@media (max-width: 1024px) {
  .home-page .stats-bridge { display: none; }
}
@media (max-width: 760px) {
  .site-footer { padding: 32px 0 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid > * { grid-column: 1 / -1; }
  .footer-logo { height: 42px; }
  .footer-brand-copy { margin-top: 14px; font-size: 14px; }
  .footer-heading { margin-bottom: 10px; }
  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }
  .footer-links a,
  .footer-contact-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 8px;
    font-size: 14px;
  }
  .footer-contact { gap: 0; font-size: 14px; line-height: 1.65; }
  .footer-contact-links { gap: 0; margin-top: 8px; }
  .footer-locations { margin-top: 16px; }
  .footer-bottom { margin-top: 22px; padding-top: 16px; }
}
@media (max-width: 600px) {
  .homepage-hero { min-height: 720px; min-height: min(780px, 100svh); }
  .homepage-hero-container { padding-top: 130px; padding-bottom: 48px; }
  .mobile-menu-button { color: white; border: 1px solid rgba(255,255,255,.18); }
}

@media (min-width: 1025px) {
  .home-page .about-preview { padding-top: 128px; }
}

/* Preserve the supplied meeting photograph and keep all three people visible. */
.home-page .about-preview-media {
  min-height: 0;
  aspect-ratio: 1586 / 992;
  align-self: center;
}

/* October review: a consistent purple accent on light surfaces and lilac on dark. */
.home-page {
  --color-gold: #c7b8ff;
  --color-gold-light: #e4dcff;
  --color-gold-ink: #5c49b4;
}
.home-page .stat-icon {
  color: var(--color-purple);
  border-color: rgba(92,73,180,.2);
  background: rgba(92,73,180,.06);
}
.home-page .testimonials-section[hidden] { display: none; }
.home-page .service-card-media::after {
  background: linear-gradient(180deg, transparent 0%, rgba(18,13,27,.08) 40%, rgba(18,13,27,.55) 65%, rgba(18,13,27,.95) 100%);
}
.home-page .service-card-media img { filter: brightness(1.18); }
.footer-phone-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer-phone-row a { white-space: nowrap; }
.footer-phone-row > span { color: rgba(255,255,255,.4); }
.home-page .contact-grid { align-items: center; }

/* Brand-yellow eyebrow labels across the website. */
:root { --brand-yellow: #f2b531; }
body .section-eyebrow,
body .homepage-hero-eyebrow,
body .service-breadcrumb,
body .work-category-header .section-eyebrow,
body .work-card-category { color: var(--brand-yellow); }
.home-page .about-preview-media { align-self: stretch; aspect-ratio: auto; }
.home-page .about-preview-content .section-title span { color: var(--color-purple); }
a.work-card { display: block; color: white; }
a.work-card:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: -3px; }
.service-hero-content h1 {
  max-width: 100%;
  font-size: clamp(22px, 4.6vw, 64px);
  line-height: 1.08;
}
.service-title-line { display: block; white-space: nowrap; }
.service-hero-content > p:not(.service-breadcrumb) {
  max-width: 100%;
  font-size: clamp(13px, 1.15vw, 17px);
}
@media (min-width: 1025px) {
  .service-hero-content > p:not(.service-breadcrumb) { white-space: nowrap; }
}
@media (max-width: 1100px) {
  .home-page .about-preview-media { aspect-ratio: 4 / 5; width: min(100%, 640px); margin-inline: auto; }
}
@media (max-width: 600px) {
  .service-hero-content > p:not(.service-breadcrumb) { font-size: 16px; }
}

.upcoming-event-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; color: var(--color-purple); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }

/* Service overviews: one compact editorial panel rather than an oversized image. */
.service-intro { background: #fff; padding-block: 40px; }
.service-intro-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr);
  gap: 32px;
  align-items: center;
  padding: 28px;
  background: #f5f3ee;
  border: 1px solid #e7e3dc;
  border-radius: 24px;
}
.service-intro-text p { font-size: 17px; line-height: 1.7; margin-bottom: 14px; max-width: 65ch; }
.service-intro-text p:last-child { margin-bottom: 0; }
.service-intro-text .service-overview-label { color: var(--brand-yellow); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.service-intro .service-intro-media { min-height: 0; height: 260px; border-radius: 16px; box-shadow: none; }
.capability-card, .process-step {
  background: #f5f3ee;
  border: 1px solid #e7e3dc;
  box-shadow: 0 6px 20px rgba(24,21,29,.06);
}
.capability-card { padding: 24px; }
.capability-card h3 { text-wrap: initial; min-height: 2.6em; font-size: 19px; }
.capability-card p { margin-top: 14px; padding-top: 0; }
/* One shared footer on every page. */
.site-footer.compact-footer { padding: 32px 0 18px; background: #171320; }
.compact-footer::before { display: none; }
.compact-footer .footer-inner { width: min(1240px, calc(100% - 48px)); }
.compact-footer .footer-grid { grid-template-columns: 1fr .85fr 1.3fr; gap: 36px; }
.compact-footer .footer-grid > * { grid-column: auto; }
.compact-footer .footer-logo { height: 40px; }
.compact-footer .footer-brand-copy { margin: 12px 0 0; font-size: 13px; line-height: 1.6; }
.compact-footer .footer-heading { margin-bottom: 10px; }
.compact-footer .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.compact-footer .footer-links a, .compact-footer .footer-contact-links a { font-size: 13px; min-height: 36px; padding: 6px 0; display: inline-flex; align-items: center; }
.compact-footer .footer-contact { font-size: 13px; line-height: 1.7; }
.compact-footer .footer-contact-links { gap: 0; margin-top: 6px; }
.compact-footer .footer-markets { margin: 10px 0 0; font-size: 11px; line-height: 1.7; color: #aaa3b5; }
.compact-footer .contact-socials { margin-top: 12px; gap: 8px; }
.compact-footer .contact-socials a { width: 36px; height: 36px; }
.compact-footer .footer-bottom { margin-top: 20px; padding-top: 14px; font-size: 11px; flex-direction: row; align-items: center; }
.compact-footer .back-to-top { min-height: 36px; padding: 6px 12px; font-size: 11px; }
@media(max-width: 760px) {
  .service-intro-grid { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .service-intro-text p { font-size: 16px; }
  .service-intro .service-intro-media { height: auto; aspect-ratio: 16 / 9; }
  .capability-card h3 { min-height: 0; }
  .compact-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .compact-footer .footer-contact-column { grid-column: 1 / -1; }
  .compact-footer .footer-inner { width: calc(100% - 32px); }
  .compact-footer .footer-links { grid-template-columns: 1fr; }
  .compact-footer .footer-links a, .compact-footer .footer-contact-links a { min-height: 44px; }
  .compact-footer .footer-logo { width: 150px; height: auto; }
  .compact-footer .contact-socials a { width: 44px; height: 44px; }
  .compact-footer .footer-bottom { flex-wrap: wrap; gap: 10px; }
}

/* Refined footer rhythm, with a compact full-width navigation row on phones. */
.site-footer.compact-footer { background: #191522; border-top: 1px solid rgba(255,255,255,.08); }
.compact-footer .footer-grid { grid-template-columns: 1fr .8fr 1.25fr; gap: 48px; }
.compact-footer .footer-heading { font-size: 11px; letter-spacing: .12em; color: #c9bedf; }
.compact-footer .footer-brand-copy { color: #b8b2c2; }
.compact-footer .footer-contact { color: #d6d1df; }
.compact-footer .contact-socials a { border-radius: 10px; background: rgba(255,255,255,.04); }
.compact-footer .footer-bottom { border-color: rgba(255,255,255,.1); color: #9e96ad; }
.compact-footer .back-to-top { border: 0; border-radius: 6px; background: transparent; }
@media(max-width: 760px) {
  .site-footer.compact-footer { padding-top: 26px; }
  .compact-footer .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .compact-footer .footer-brand { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
  .compact-footer .footer-brand > a { grid-column: 1; grid-row: 1; }
  .compact-footer .footer-brand .contact-socials { grid-column: 2; grid-row: 1; margin: 0; }
  .compact-footer .footer-brand-copy { grid-column: 1 / -1; margin: 0; max-width: none; }
  .compact-footer .footer-brand-copy br { display: none; }
  .compact-footer .footer-grid > .footer-column { border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px; }
  .compact-footer .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
  .compact-footer .footer-heading { margin-bottom: 6px; }
  .compact-footer .footer-contact-links { margin-top: 4px; }
  .compact-footer .footer-markets { margin-top: 6px; }
}

.compact-footer .footer-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compact-footer .footer-navigation .footer-links { grid-template-columns: 1fr; }