@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-vietnamese.woff2") format("woff2");
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/urbanist-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/urbanist-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Urbanist";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/urbanist-italic-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Urbanist";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/urbanist-italic-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
} 
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* This site is a light-only design. Declaring the scheme opts every page out
     of the browser's automatic dark-mode darkening (Chrome "Auto Dark", etc.),
     which otherwise force-dims the pure-white backgrounds to grey when the OS
     is in Dark appearance. */
  color-scheme: light;
  --ext-font-primary:
    "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ext-font-secondary:
    "Urbanist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --ext-surface: #ffffff;
  --ext-page-bg: #ffffff;
  --ext-ink: #111315;
  --ext-muted: #5f646b;
  --ext-line: #eceef1;
  --ext-button-top: #3f4449;
  --ext-button-bottom: #24282c;
  --ext-accent: #ffc13d;
  --ext-accent-shadow: rgba(168, 103, 0, 0.34);
  --ext-footer-gradient: linear-gradient(180deg, #ffd988 0%, #ffc13b 100%);
  --ext-shadow: 0 10px 26px rgba(17, 19, 21, 0.12);
  --ext-radius: 14px;
  --ext-transition: 180ms ease;
  --ext-site-max-width: 1500px;
  --ext-site-gutter: 60px;
  --ext-site-gutter-mobile: 24px;
  /* Inset for text-content columns so they line up with the floating header logo
     (the header pill is inset ~32px by its own padding) and share ONE content
     width across pages - matches the blog article column (.ext-article-inset). */
  --ext-content-inset: 33px;
  /* Uniform vertical breathing room above/below every homepage section.
     The dark work/impact seam uses half of it per side (60 + 60 = one gap
     inside the continuous band - see CLAUDE.md). */
  --ext-section-gap: 120px;
}

@media only screen and (max-width: 767px) {
  :root {
    --ext-section-gap: 80px;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  /* Sticky-header clearance for anchor jumps (#services, #faqs, #projects).
     Scrolled header ≈ 78px shell + 14px/16px padding + borders ≈ 111px. */
  scroll-padding-top: 120px;
  /* Reserve the scrollbar gutter permanently. Every scroll lock on the site
     (booking modal, fullscreen menu) sets overflow:hidden, which normally
     removes the classic scrollbar and widens the page by its width - a visible
     sideways jump on Windows/Linux. A stable gutter keeps that column reserved
     while locked, so nothing moves. No-op for macOS overlay scrollbars; older
     engines fall back to the measured --ext-sbw compensation below. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ext-surface);
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: 16px;
  line-height: 1.5;
}

/* .ext-menu-open only marks that the fullscreen menu is up (the header's
   hide-on-scroll reads it). It must NOT clip body: that turns body into a
   scroll container, which re-parents the sticky header to it - on a scrolled
   page the header drops to the top of the document and snaps back when the
   menu lets go. site-menu.css locks scrolling on html instead. */

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

button {
  font: inherit;
}

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

.ext-container {
  width: min(calc(100% - var(--ext-site-gutter)), var(--ext-site-max-width));
  margin-inline: auto;
}

/* The site header bar caps at 1500px, matching the page body. Setting the width
   variable only on the header's own container keeps the mobile gutter behaviour
   coming from the base .ext-container rules. */
.ext-site-header .ext-container {
  --ext-site-max-width: 1500px;
}

.ext-site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 26px 0 32px;
  background: transparent;
  border-top: 2px solid var(--ext-ink);
  transition:
    padding var(--ext-transition),
    border-color var(--ext-transition),
    transform 420ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* Hide-on-scroll state - JS toggles it: scroll down = slide up out of view,
   scroll up = slide back down, footer on screen = stay hidden. */
.ext-site-header.ext-header-hidden {
  transform: translateY(-102%);
}

/* Keyboard access: if focus lands inside a hidden header (Tab), reveal it. */
.ext-site-header.ext-header-hidden:focus-within {
  transform: translateY(0);
}

.ext-site-header.ext-scrolled {
  padding: 14px 0 16px;
  border-top-color: transparent;
}

/* Immersive pages (About): header sits over the hero's background, so drop the
   top rule line and let the hero's decoration show through. */
.ext-site-header--flush {
  border-top-color: transparent;
}

/* Constant height in BOTH states: the base header tightens its padding when
   .ext-scrolled lands, which reflows the whole page (~28px jump) - over the
   immersive hero that reads as a visible layout shift while scrolling back to
   the top. Here only the pill fades; the header never changes size. */
.ext-site-header--flush,
.ext-site-header--flush.ext-scrolled {
  padding: 20px 0 24px;
}

/* At the top of the page: no frosted pill - the logo and buttons float straight
   on the immersive hero, so the line grid runs behind them (as in the design). */
.ext-site-header--flush .ext-header-shell {
  background: transparent;
  border-color: transparent;
  /* identity filters (not `none`) so the blur can interpolate when scrolled */
  backdrop-filter: blur(0) saturate(100%);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  /* Gradual fade (the shared 180ms felt instant): the pill's background opacity
     and blur ease in/out smoothly as .ext-scrolled toggles near the top. */
  transition:
    border-color 0.55s ease,
    background-color 0.55s ease,
    backdrop-filter 0.55s ease,
    -webkit-backdrop-filter 0.55s ease;
}

/* Once the page is scrolled, the frosted blur pill comes back so the header
   stays legible over content. Slightly white-filled (unlike other pages'
   always-transparent shell) on purpose - it has to read over the animated
   grid mosaic. */
.ext-site-header--flush.ext-scrolled .ext-header-shell {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(17, 19, 21, 0.14);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

@media (prefers-reduced-motion: reduce) {
  .ext-site-header {
    transition: none;
  }
}

.ext-header-shell {
  position: relative;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 32px;
  background: transparent;
  border: 1px solid rgba(17, 19, 21, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

.ext-logo,
.ext-button-area-start,
.ext-mobile-panel {
  position: relative;
  z-index: 1;
}

.ext-logo {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  flex: 0 1 auto;
}

.ext-logo-img {
  width: clamp(142px, 12vw, 178px);
  height: auto;
}

/* Logo variant swap while the sticky header travels across sections marked
   data-ext-header-invert (the dark work/impact band) - JS toggles
   .ext-header-on-dark on the header. */
.ext-logo-img-white {
  display: none;
}

.ext-site-header.ext-header-on-dark .ext-logo-img-ink {
  display: none;
}

.ext-site-header.ext-header-on-dark .ext-logo-img-white {
  display: block;
}

/* Over the dark (immersive) hero, keep the header shell fully transparent even once
   scrolled - no frosted white pill on the black. Higher specificity than the
   scrolled-pill rule, so it wins while .ext-header-on-dark is set; the pill returns
   automatically once the header is over light content. */
.ext-site-header--flush.ext-scrolled.ext-header-on-dark .ext-header-shell {
  background: transparent;
  border-color: transparent;
  backdrop-filter: blur(0) saturate(100%);
  -webkit-backdrop-filter: blur(0) saturate(100%);
}

.ext-button-area-start {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.ext-btn {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: max-content;
  align-items: center;
  gap: 25px;
  padding: 16px 24px;
  overflow: hidden;
  color: #ffffff;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  background:
    radial-gradient(
      62.56% 62.56% at 28.14% -10.42%,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(137.66deg, #40454a 21.13%, #292c2e 80.53%);
  border: none;
  border-radius: 12px;
  box-shadow:
    0 3px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 0 #1a1a1a,
    inset 0 -4px 0 1px rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
  transition:
    transform var(--ext-transition),
    box-shadow var(--ext-transition);
  white-space: nowrap;
}

.ext-btn:hover {
  box-shadow:
    0 3px 3px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 0 #1a1a1a,
    inset 0 -4px 0 1px rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.ext-menu-btn {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 10px;
  place-items: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #d7d7d7;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 4px 14px rgba(17, 19, 21, 0.08);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  transition:
    background-color var(--ext-transition),
    border-color var(--ext-transition),
    transform var(--ext-transition),
    box-shadow var(--ext-transition);
}

.ext-menu-btn:hover,
.ext-menu-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.88);
  border-color: #cfcfcf;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 20px rgba(17, 19, 21, 0.12);
  transform: translateY(-1px);
}

/* Global accessible focus ring; component rules below refine it. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ext-accent);
  outline-offset: 2px;
}

.ext-btn:focus-visible,
.ext-menu-btn:focus-visible,
.ext-mobile-link:focus-visible {
  outline: 2px solid var(--ext-ink);
  outline-offset: 4px;
}

.ext-menu-dot-grid {
  display: grid;
  width: 14px;
  height: 14px;
  grid-template-columns: repeat(3, 2px);
  grid-template-rows: repeat(3, 2px);
  place-content: center;
  gap: 4px;
}

.ext-menu-dot {
  display: block;
  width: 2px;
  height: 2px;
  background: var(--ext-ink);
  border-radius: 0;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity var(--ext-transition),
    transform var(--ext-transition);
}

.ext-menu-dot:nth-child(1) {
  grid-area: 1 / 1;
}

.ext-menu-dot:nth-child(2) {
  grid-area: 1 / 2;
}

.ext-menu-dot:nth-child(3) {
  grid-area: 1 / 3;
}

.ext-menu-dot:nth-child(4) {
  grid-area: 2 / 1;
}

.ext-menu-dot:nth-child(5) {
  grid-area: 2 / 2;
}

.ext-menu-dot:nth-child(6) {
  grid-area: 2 / 3;
}

.ext-menu-dot:nth-child(7) {
  grid-area: 3 / 1;
}

.ext-menu-dot:nth-child(8) {
  grid-area: 3 / 2;
}

.ext-menu-dot:nth-child(9) {
  grid-area: 3 / 3;
}

.ext-menu-dot:nth-child(6),
.ext-menu-dot:nth-child(7) {
  opacity: 0;
  transform: scale(0.35);
}

.ext-menu-btn:hover .ext-menu-dot,
.ext-menu-btn[aria-expanded="true"] .ext-menu-dot {
  animation: ext-menu-dot-flicker 900ms steps(2, end) infinite;
}

.ext-menu-btn:hover .ext-menu-dot:nth-child(2),
.ext-menu-btn[aria-expanded="true"] .ext-menu-dot:nth-child(2) {
  animation-delay: 90ms;
}

.ext-menu-btn:hover .ext-menu-dot:nth-child(3),
.ext-menu-btn[aria-expanded="true"] .ext-menu-dot:nth-child(3) {
  animation-delay: 180ms;
}

.ext-menu-btn:hover .ext-menu-dot:nth-child(4),
.ext-menu-btn[aria-expanded="true"] .ext-menu-dot:nth-child(4) {
  animation-delay: 270ms;
}

.ext-menu-btn:hover .ext-menu-dot:nth-child(5),
.ext-menu-btn[aria-expanded="true"] .ext-menu-dot:nth-child(5) {
  animation-delay: 360ms;
}

.ext-menu-btn:hover .ext-menu-dot:nth-child(6),
.ext-menu-btn[aria-expanded="true"] .ext-menu-dot:nth-child(6) {
  animation-delay: 450ms;
}

.ext-menu-btn:hover .ext-menu-dot:nth-child(7),
.ext-menu-btn[aria-expanded="true"] .ext-menu-dot:nth-child(7) {
  animation-delay: 540ms;
}

.ext-menu-btn:hover .ext-menu-dot:nth-child(8),
.ext-menu-btn[aria-expanded="true"] .ext-menu-dot:nth-child(8) {
  animation-delay: 630ms;
}

.ext-menu-btn:hover .ext-menu-dot:nth-child(9),
.ext-menu-btn[aria-expanded="true"] .ext-menu-dot:nth-child(9) {
  animation-delay: 720ms;
}

.ext-mobile-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 52px;
  width: min(360px, calc(100vw - 32px));
  padding: 18px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    var(--ext-shadow);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--ext-transition),
    transform var(--ext-transition),
    visibility var(--ext-transition);
  visibility: hidden;
}

.ext-mobile-panel.ext-open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.ext-mobile-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ext-mobile-link {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 0 12px;
  color: var(--ext-ink);
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
  border-radius: 10px;
  transition:
    background-color var(--ext-transition),
    color var(--ext-transition);
}

.ext-mobile-link:hover {
  background: #f3f5f7;
}

/* Homepage banner */
.ext-banner-area {
  position: relative;
  z-index: 0;
  margin: 0 0 var(--ext-section-gap);
}

.ext-banner-area .ext-banner-container {
  width: min(calc(100% - var(--ext-site-gutter)), var(--ext-site-max-width));
  margin-inline: auto;
}

.ext-banner-area .ext-banner-content {
  position: relative;
  z-index: 1;
  height: 800px;
  padding: 172px 0 115px;
  overflow: hidden;
}

.ext-banner-area .ext-banner-content .ext-banner-top-shape {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: 100px;
  height: 30%;
  background: #f3f4f6;
  border-width: 0 1px;
  border-style: dotted;
  border-color: rgba(67, 67, 67, 0.5);
  transform: translateX(-50%);
}

.ext-banner-area .ext-banner-content .ext-banner-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  margin: 0;
  color: #030712;
  font-size: 120px;
  font-weight: 500;
  line-height: 1.2;
}

.ext-banner-area .ext-banner-content .ext-banner-title .ext-banner-left,
.ext-banner-area .ext-banner-content .ext-banner-title .ext-banner-right {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 35px 0;
  text-align: center;
  background: #f3f4f6;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-left
  .ext-banner-arrow-track {
  position: absolute;
  bottom: -35px;
  left: 50%;
  display: flex;
  width: 94%;
  align-items: center;
  justify-content: end;
  gap: 38px;
  padding: 0;
  overflow: hidden;
  transform: translateX(-50%);
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-right
  .ext-banner-arrow-track {
  position: absolute;
  top: -35px;
  right: 50%;
  display: flex;
  width: 94%;
  align-items: center;
  gap: 38px;
  padding: 0;
  overflow: hidden;
  transform: translateX(50%);
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-arrow-track
  .ext-banner-arrow {
  display: flex;
  min-width: 13px;
  height: 16px;
  opacity: 0.15;
  animation: fadeMove 1.2s infinite;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-arrow-track
  .ext-banner-arrow
  img {
  position: unset;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-left
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(10),
.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-right
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(1) {
  animation-delay: 0.9s;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-left
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(9),
.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-right
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(2) {
  animation-delay: 0.8s;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-left
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(8),
.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-right
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(3) {
  animation-delay: 0.7s;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-left
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(7),
.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-right
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(4) {
  animation-delay: 0.6s;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-left
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(6),
.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-right
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(5) {
  animation-delay: 0.5s;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-left
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(5),
.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-right
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(6) {
  animation-delay: 0.4s;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-left
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(4),
.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-right
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(7) {
  animation-delay: 0.3s;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-left
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(3),
.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-right
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(8) {
  animation-delay: 0.2s;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-left
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(2),
.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-right
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(9) {
  animation-delay: 0.1s;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-left
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(1),
.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-right
  .ext-banner-arrow-track
  .ext-banner-arrow:nth-child(10) {
  animation-delay: 0s;
}

.ext-banner-area .ext-banner-content .ext-banner-title .ext-banner-mid-icon {
  position: relative;
  z-index: 5;
  display: block;
  width: 303px;
  min-width: 303px;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-mid-icon
  img {
  display: block;
  width: 100%;
  height: auto;
}

.ext-banner-area .ext-banner-content .ext-banner-title .ext-banner-title-text {
  text-align: center;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  background:
    linear-gradient(137.66deg, #55595c 21.13%, #000000 80.53%), #030712;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* When the flip animation splits these words, SplitText moves the glyphs into
   per-char child spans - which orphans the gradient text-fill above (the split
   chars would render invisible). Re-apply the same gradient clip to each char
   so the letters stay visible while they flip in. */
.ext-banner-area
  .ext-banner-content
  .ext-banner-title
  .ext-banner-title-text
  .char {
  background:
    linear-gradient(137.66deg, #55595c 21.13%, #000000 80.53%), #030712;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ext-banner-area .ext-square-dot {
  position: relative;
  z-index: 4;
}

.ext-banner-area .ext-square-dot .ext-square-shape {
  position: absolute;
  z-index: 4;
  width: 6px;
  height: 6px;
  background: #030712;
}

.ext-banner-area .ext-square-dot .ext-square-shape.ext-top-left {
  top: -3px;
  left: -3px;
}

.ext-banner-area .ext-square-dot .ext-square-shape.ext-bottom-left {
  bottom: -3px;
  left: -3px;
}

.ext-banner-area .ext-square-dot .ext-square-shape.ext-top-right {
  top: -3px;
  right: -3px;
}

.ext-banner-area .ext-square-dot .ext-square-shape.ext-bottom-right {
  right: -3px;
  bottom: -3px;
}

.ext-banner-area .ext-banner-content .ext-banner-bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ext-banner-area .ext-banner-content .ext-banner-bg-shape img {
  width: 100%;
  height: 100%;
}

.ext-banner-area .ext-banner-content .ext-banner-shape-area img {
  position: absolute;
  z-index: 1;
}

.ext-banner-area .ext-banner-content .ext-banner-shape-area img.ext-shape-one {
  top: 0;
  left: 0;
}

.ext-banner-area .ext-banner-content .ext-banner-shape-area img.ext-shape-two {
  right: 0;
  bottom: 0;
}

.ext-banner-area .ext-banner-content .ext-banner-text-area {
  max-width: 529px;
  margin: 52px auto 0;
  text-align: center;
}

.ext-banner-area .ext-banner-content .ext-banner-text-area .ext-banner-desc {
  margin: 0 0 25px;
  color: #030712;
  font-family: var(--ext-font-secondary);
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-text-area
  .ext-banner-button-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* Hero entrance - one-time on load, pure CSS (fill-mode "both" holds the
   hidden 0% frame only while the animation exists, so content can never get
   stuck invisible if animations fail or are disabled). */
.ext-banner-area .ext-banner-content .ext-banner-title,
.ext-banner-area .ext-banner-content .ext-banner-text-area .ext-banner-desc,
.ext-banner-area
  .ext-banner-content
  .ext-banner-text-area
  .ext-banner-button-area {
  animation: ext-hero-enter 0.7s ease-out both;
}

.ext-banner-area .ext-banner-content .ext-banner-text-area .ext-banner-desc {
  animation-delay: 0.15s;
}

.ext-banner-area
  .ext-banner-content
  .ext-banner-text-area
  .ext-banner-button-area {
  animation-delay: 0.28s;
}

@keyframes ext-hero-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ext-banner-area .ext-banner-content .ext-banner-title,
  .ext-banner-area .ext-banner-content .ext-banner-text-area .ext-banner-desc,
  .ext-banner-area
    .ext-banner-content
    .ext-banner-text-area
    .ext-banner-button-area {
    animation: none;
  }
}

.ext-banner-btn {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: max-content;
  align-items: center;
  gap: 25px;
  padding: 16px 24px;
  overflow: hidden;
  color: #ffffff;
  font-family: var(--ext-font-secondary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  background:
    radial-gradient(
      62.56% 62.56% at 28.14% -10.42%,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(137.66deg, #40454a 21.13%, #292c2e 80.53%);
  border: none;
  border-radius: 12px;
  box-shadow:
    0 3px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 0 #1a1a1a,
    inset 0 -4px 0 1px rgba(255, 255, 255, 0.1);
  transition: var(--ext-transition);
}

.ext-banner-btn.ext-banner-btn-white {
  /* Vertical padding + font-size match .ext-with-icon so this button is the
     same height as the "Explore Services" icon button beside it. */
  padding: 17px 28px 19px;
  font-size: 15px;
  color: #030712;
  background:
    radial-gradient(
      62.56% 62.56% at 28.14% -10.42%,
      #ffffff 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #ffffff;
  border-radius: 10px;
  box-shadow:
    0 3px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -5px 0 #e4e4e4,
    inset 0 -6px 0 1px #fafafa;
}

.ext-banner-btn.ext-banner-btn-white:hover {
  box-shadow:
    0 3px 3px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -6px 0 #e4e4e4,
    inset 0 0 0 1px #fafafa;
}

.ext-banner-btn.ext-with-icon {
  gap: 18px;
  padding: 17px 20px 19px 60px;
  font-size: 15px;
  border-radius: 10px;
}

.ext-banner-btn.ext-with-icon .ext-banner-btn-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 95%;
  height: 40px;
  transform: translate(-50%, -50%);
}

.ext-banner-btn.ext-with-icon .ext-banner-btn-icon {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  overflow: hidden;
  line-height: 40px;
  text-align: center;
  background: var(--ext-accent);
  border-radius: 8px;
  box-shadow:
    4px 8px 2px rgba(0, 0, 0, 0.08),
    inset 0 -2px 0.5px var(--ext-accent-shadow),
    inset 0 1px 0 #ffffff;
  transform: translateY(-50%);
  transition: var(--ext-transition);
}

.ext-banner-btn.ext-with-icon .ext-banner-btn-icon span img {
  min-width: 15px;
  opacity: 1;
  animation: none;
}

.ext-banner-btn.ext-with-icon:hover .ext-banner-btn-icon {
  width: 100%;
}

.ext-banner-btn.ext-with-icon:hover .ext-banner-btn-icon span img {
  opacity: 0.15;
  animation: fadeMove 1.2s infinite;
}

.ext-banner-btn.ext-with-icon:hover .ext-banner-btn-icon span:nth-child(6) img {
  animation-delay: 0.5s;
}

.ext-banner-btn.ext-with-icon:hover .ext-banner-btn-icon span:nth-child(5) img {
  animation-delay: 0.4s;
}

.ext-banner-btn.ext-with-icon:hover .ext-banner-btn-icon span:nth-child(4) img {
  animation-delay: 0.3s;
}

.ext-banner-btn.ext-with-icon:hover .ext-banner-btn-icon span:nth-child(3) img {
  animation-delay: 0.2s;
}

.ext-banner-btn.ext-with-icon:hover .ext-banner-btn-icon span:nth-child(2) img {
  animation-delay: 0.1s;
}

.ext-banner-btn.ext-with-icon:hover .ext-banner-btn-icon span:nth-child(1) img {
  animation-delay: 0s;
}

@keyframes fadeMove {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }

  50% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(10px);
  }
}

.ext-video-section {
  width: 100%;
  overflow: hidden;
  background: #030712;
}

.ext-video-loop {
  display: block;
  width: 100%;
  height: min(72vh, 760px);
  min-height: 420px;
  object-fit: cover;
  pointer-events: none;
}

.ext-site-footer {
  position: relative;
  overflow: hidden;
  color: var(--ext-ink);
  background: var(--ext-footer-gradient);
}

.ext-footer-cta {
  --ext-footer-vector-height: 312px;
  --ext-footer-vector-top-band: 62px;
  --ext-footer-vector-width: 2120px;
  position: relative;
  display: grid;
  min-height: 740px;
  align-items: start;
  justify-items: center;
  padding: 420px var(--ext-site-gutter) 105px;
  text-align: center;
}

.ext-footer-cta::before {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: min(100%, var(--ext-footer-vector-width));
  height: var(--ext-footer-vector-height);
  content: "";
  background-image: url("../images/common/footer-top-vector.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  transform: translateX(-50%);
}

.ext-footer-cta::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  height: var(--ext-footer-vector-top-band);
  content: "";
  background: #ffffff;
}

.ext-footer-mark {
  position: absolute;
  top: 275px;
  left: 50%;
  z-index: 2;
  width: clamp(64px, 4.6vw, 90px);
  height: auto;
  transform: translateX(-50%);
}

.ext-footer-cta-content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
}

.ext-footer-cta h2 {
  margin: 0;
  color: var(--ext-ink);
  font-size: clamp(44px, 5vw, 78px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.ext-footer-cta p {
  margin: 14px 0 34px;
  color: rgba(17, 19, 21, 0.68);
  font-family: var(--ext-font-secondary);
  font-size: clamp(17px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.25;
}

.ext-footer-button {
  display: inline-flex;
  min-width: 178px;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  color: #ffffff;
  font-family: var(--ext-font-secondary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  border-radius: 12px;
  background:
    radial-gradient(
      62.56% 62.56% at 28.14% -10.42%,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(103deg, #40454a 21.13%, #292c2e 80.53%);
  box-shadow:
    0 3px 3px 0 rgba(0, 0, 0, 0.1),
    60px 50px 80px 0 rgba(0, 0, 0, 0.15),
    20px 41.778px 33.422px 0 rgba(0, 0, 0, 0.15),
    10px 22.336px 17.869px 0 rgba(0, 0, 0, 0.14),
    4px 12.522px 10.017px 0 rgba(0, 0, 0, 0.13),
    0 6.65px 5.32px 0 rgba(0, 0, 0, 0.13),
    0 2.767px 2.214px 0 rgba(0, 0, 0, 0.12),
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset,
    0 -5px 0 0 #1a1a1a inset,
    0 -6px 0 1px rgba(255, 255, 255, 0.1) inset;
  transition:
    transform var(--ext-transition),
    box-shadow var(--ext-transition);
}

.ext-footer-button:hover {
  transform: translateY(-1px);
}

.ext-footer-nav-wrap {
  border-top: 1px solid rgba(17, 19, 21, 0.12);
}

.ext-footer-nav {
  display: flex;
  min-height: 110px;
  width: min(calc(100% - var(--ext-site-gutter)), var(--ext-site-max-width));
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 48px);
  margin-inline: auto;
}

.ext-footer-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #030712;
  font-family: var(--ext-font-secondary);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: transparent;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.ext-footer-nav a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 16px;
  right: 16px;
  height: 2px;
  background-color: #030712;
  transform: scaleX(0);
  transform-origin: bottom center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ext-footer-nav a:hover {
  transform: translateY(-1px);
}

.ext-footer-nav a:hover::after {
  transform: scaleX(1);
}

.ext-footer-separator {
  display: block;
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  background: #fff0cf;
}

.ext-footer-bottom {
  display: grid;
  min-height: 80px;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 0 var(--ext-site-gutter);
  border-top: 1px solid rgba(17, 19, 21, 0.12);
}

.ext-footer-social,
.ext-footer-legal {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 24px);
}

.ext-footer-legal {
  justify-content: flex-end;
}

.ext-footer-legal a,
.ext-footer-copy {
  margin: 0;
  color: #030712;
  font-family: var(--ext-font-secondary);
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.ext-footer-legal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 6px;
  position: relative;
  text-decoration: none;
  background-color: transparent;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.ext-footer-legal a::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background-color: #030712;
  transform: scaleX(0);
  transform-origin: bottom center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ext-footer-legal a:hover {
  transform: translateY(-1px);
}

.ext-footer-legal a:hover::after {
  transform: scaleX(1);
}

.ext-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  overflow: hidden;
  background-color: transparent;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #030712;
  cursor: pointer;
  margin: 0;
  font-family: var(--ext-font-secondary);
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.ext-footer-social a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.ext-social-text {
  display: inline-block;
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

.ext-footer-social a:hover .ext-social-text {
  opacity: 0;
  transform: translateY(-8px);
}

.ext-social-icon-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #030712;
}

.ext-footer-social a:hover .ext-social-icon-wrapper {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ext-social-icon-wrapper img {
  display: block;
  width: auto;
  height: 16px;
}

.ext-hero {
  position: relative;
  min-height: calc(100vh - 138px);
  overflow: hidden;
  background: #ffffff;
}

.ext-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17, 19, 21, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 19, 21, 0.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    black 13%,
    black 87%,
    transparent 100%
  );
}

.ext-hero-pixels {
  position: absolute;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 80px);
  grid-auto-rows: 80px;
  pointer-events: none;
}

.ext-hero-pixels span {
  background: #ffc13d;
}

.ext-hero-pixels-top {
  top: 0;
  left: max(24px, calc((100vw - 1500px) / 2));
}

.ext-hero-pixels-top span:nth-child(1) {
  grid-area: 1 / 1;
}

.ext-hero-pixels-top span:nth-child(2) {
  grid-area: 1 / 3;
}

.ext-hero-pixels-top span:nth-child(3) {
  grid-area: 1 / 4;
}

.ext-hero-pixels-top span:nth-child(4) {
  grid-area: 2 / 2;
}

.ext-hero-pixels-top span:nth-child(5) {
  grid-area: 3 / 1;
}

.ext-hero-pixels-bottom {
  right: max(24px, calc((100vw - 1500px) / 2));
  bottom: 0;
}

.ext-hero-pixels-bottom span:nth-child(1) {
  grid-area: 3 / 1;
}

.ext-hero-pixels-bottom span:nth-child(2) {
  grid-area: 3 / 2;
}

.ext-hero-pixels-bottom span:nth-child(3) {
  grid-area: 2 / 3;
}

.ext-hero-pixels-bottom span:nth-child(4) {
  grid-area: 1 / 4;
}

.ext-hero-pixels-bottom span:nth-child(5) {
  grid-area: 3 / 4;
}

.ext-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: calc(100vh - 138px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 44px 0 130px;
}

.ext-hero-title {
  position: relative;
  display: grid;
  width: min(100%, 1410px);
  grid-template-columns: minmax(0, 1fr) minmax(210px, 320px) minmax(0, 1fr);
  align-items: center;
  margin: 0;
  color: var(--ext-ink);
  font-size: clamp(58px, 8vw, 124px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.ext-hero-title::before {
  position: absolute;
  right: -10vw;
  left: -10vw;
  top: 50%;
  height: 213px;
  content: "";
  background: rgba(243, 244, 246, 0.82);
  border-top: 1px dotted rgba(17, 19, 21, 0.26);
  border-bottom: 1px dotted rgba(17, 19, 21, 0.18);
  transform: translateY(-50%);
}

.ext-hero-title-panel {
  position: relative;
  display: flex;
  min-height: 213px;
  align-items: center;
}

.ext-hero-title-left {
  justify-content: flex-start;
  padding-left: clamp(28px, 5vw, 92px);
}

.ext-hero-title-right {
  justify-content: flex-end;
  padding-right: clamp(28px, 3.8vw, 54px);
}

.ext-hero-title-text {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #5e6368 0%, #111315 55%, #000000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.ext-hero-title-track {
  position: absolute;
  display: flex;
  gap: 22px;
  opacity: 0.35;
}

.ext-hero-title-left .ext-hero-title-track {
  right: 22px;
  bottom: -28px;
}

.ext-hero-title-right .ext-hero-title-track {
  top: -28px;
  left: 22px;
}

.ext-hero-title-track span {
  width: 14px;
  height: 14px;
  border-top: 3px dotted #aeb4ba;
  border-right: 3px dotted #aeb4ba;
  transform: rotate(45deg);
}

.ext-hero-icon-card {
  position: relative;
  z-index: 3;
  display: grid;
  width: 320px;
  aspect-ratio: 1;
  place-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #d2d5da;
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(17, 19, 21, 0.06);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.ext-hero-icon-card::before,
.ext-hero-icon-card::after {
  position: absolute;
  width: 7px;
  height: 7px;
  content: "";
  background: #030712;
}

.ext-hero-icon-card::before {
  left: -4px;
  top: 50%;
}

.ext-hero-icon-card::after {
  right: -4px;
  top: 50%;
}

.ext-hero-icon-ring {
  display: grid;
  width: 264px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px dashed #cdd1d6;
  border-radius: 50%;
}

.ext-hero-icon-ring img {
  width: 102px;
  height: auto;
}

.ext-hero-copy {
  position: relative;
  z-index: 3;
  margin-top: 58px;
  text-align: center;
}

.ext-hero-copy p {
  margin: 0;
  color: #111827;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 500;
  line-height: 1.48;
}

.ext-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.ext-hero-btn {
  display: inline-flex;
  min-height: 68px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.ext-hero-btn-light {
  min-width: 206px;
  padding: 0 28px;
  color: #111315;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 5px 0 #e5e5e5,
    0 12px 24px rgba(17, 19, 21, 0.08);
}

.ext-hero-btn-dark {
  min-width: 250px;
  justify-content: flex-start;
  gap: 20px;
  padding: 0 28px 0 8px;
  color: #ffffff;
  background:
    radial-gradient(
      62.56% 62.56% at 28.14% -10.42%,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(137.66deg, #40454a 21.13%, #292c2e 80.53%);
  box-shadow:
    0 3px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 0 #1a1a1a,
    inset 0 -4px 0 1px rgba(255, 255, 255, 0.1);
}

.ext-hero-btn-icon {
  display: grid;
  width: 56px;
  height: 56px;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
  place-content: center;
  gap: 5px;
  background: #ffc13d;
  border-radius: 9px;
  box-shadow:
    inset 0 -2px 0 rgba(168, 103, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.ext-hero-btn-icon span {
  width: 4px;
  height: 4px;
  background: var(--ext-ink);
}

.ext-hero-btn-icon span:nth-child(1) {
  grid-area: 1 / 1;
}

.ext-hero-btn-icon span:nth-child(2) {
  grid-area: 1 / 2;
}

.ext-hero-btn-icon span:nth-child(3) {
  grid-area: 1 / 3;
}

.ext-hero-btn-icon span:nth-child(4) {
  grid-area: 2 / 1;
}

.ext-hero-btn-icon span:nth-child(5) {
  grid-area: 2 / 2;
}

.ext-hero-btn-icon span:nth-child(6) {
  grid-area: 3 / 2;
}

.ext-hero-btn-icon span:nth-child(7) {
  grid-area: 3 / 3;
}

@keyframes ext-menu-dot-flicker {
  0%,
  18% {
    opacity: 1;
    transform: scale(1);
  }

  19%,
  42% {
    opacity: 0.16;
    transform: scale(0.35);
  }

  43%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 1439px) {
  .ext-banner-area .ext-banner-content .ext-banner-title {
    font-size: 100px;
  }

  .ext-banner-area .ext-banner-content .ext-banner-title .ext-banner-mid-icon {
    width: 250px;
    min-width: 250px;
  }
}

@media (max-width: 1200px) {
  .ext-banner-area .ext-banner-content .ext-banner-title {
    font-size: 80px;
  }

  .ext-banner-area .ext-banner-content .ext-banner-title .ext-banner-mid-icon {
    width: 200px;
    min-width: 200px;
  }

  .ext-banner-area .ext-banner-content .ext-banner-title .ext-banner-left,
  .ext-banner-area .ext-banner-content .ext-banner-title .ext-banner-right {
    padding: 25px 0;
  }

  .ext-banner-area .ext-banner-content .ext-banner-shape-area img.ext-shape-one,
  .ext-banner-area
    .ext-banner-content
    .ext-banner-shape-area
    img.ext-shape-two {
    width: 225px;
  }

  .ext-hero-title {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 260px) minmax(0, 1fr);
    font-size: clamp(48px, 7.4vw, 88px);
  }

  .ext-hero-title::before,
  .ext-hero-title-panel {
    min-height: 178px;
    height: 178px;
  }

  .ext-hero-icon-card {
    width: 260px;
  }

  .ext-hero-icon-ring {
    width: 214px;
  }

  .ext-hero-icon-ring img {
    width: 84px;
  }

  .ext-hero-pixels {
    grid-template-columns: repeat(4, 64px);
    grid-auto-rows: 64px;
  }
}

@media (max-width: 900px) {
  .ext-banner-area .ext-banner-content .ext-banner-title {
    font-size: 60px;
  }

  .ext-banner-area
    .ext-banner-content
    .ext-banner-title
    .ext-banner-left
    .ext-banner-arrow-track,
  .ext-banner-area
    .ext-banner-content
    .ext-banner-title
    .ext-banner-right
    .ext-banner-arrow-track {
    width: 80%;
  }

  .ext-hero-content {
    min-height: auto;
    padding: 74px 0 96px;
  }

  .ext-hero-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    font-size: clamp(48px, 13vw, 92px);
  }

  .ext-hero-title::before {
    height: calc(100% - 48px);
    min-height: 170px;
  }

  .ext-hero-title-panel {
    min-height: 120px;
    height: auto;
    padding: 0;
  }

  .ext-hero-title-left,
  .ext-hero-title-right {
    justify-content: center;
  }

  .ext-hero-title-track {
    display: none;
  }

  .ext-hero-icon-card {
    order: -1;
    width: min(62vw, 240px);
    flex-basis: 100%;
  }

  .ext-hero-icon-ring {
    width: 82%;
  }

  .ext-hero-copy {
    margin-top: 36px;
  }
}

@media (max-width: 767px) {
  .ext-container {
    width: min(
      calc(100% - var(--ext-site-gutter-mobile)),
      var(--ext-site-max-width)
    );
  }

  .ext-site-header {
    padding: 18px 0 22px;
  }

  .ext-site-header.ext-scrolled {
    padding: 10px 0 12px;
  }

  /* flush (About) header: constant height on mobile too - no scroll reflow */
  .ext-site-header--flush,
  .ext-site-header--flush.ext-scrolled {
    padding: 14px 0 16px;
  }

  .ext-header-shell {
    min-height: 70px;
    gap: 14px;
    padding: 0 14px 0 22px;
  }

  .ext-logo-img {
    width: clamp(112px, 34vw, 146px);
  }

  .ext-button-area-start {
    gap: 8px;
  }

  .ext-btn {
    padding: 0 18px;
    min-height: 46px;
    font-size: 13px;
  }

  .ext-menu-btn {
    width: 46px;
    height: 46px;
  }

  .ext-mobile-panel {
    top: calc(100% + 10px);
    right: 14px;
    width: calc(100% - 28px);
  }

  .ext-banner-area .ext-banner-container {
    width: min(
      calc(100% - var(--ext-site-gutter-mobile)),
      var(--ext-site-max-width)
    );
  }

  .ext-banner-area .ext-banner-content {
    height: auto;
    padding: 72px 0 82px;
  }

  .ext-banner-area .ext-banner-content .ext-banner-top-shape {
    display: none;
  }

  .ext-banner-area .ext-banner-content .ext-banner-title {
    flex-direction: column;
    display: flex;
    font-size: 48px;
  }

  .ext-banner-area .ext-banner-content .ext-banner-title .ext-banner-left,
  .ext-banner-area .ext-banner-content .ext-banner-title .ext-banner-right {
    padding: 17px 0;
  }

  .ext-banner-area
    .ext-banner-content
    .ext-banner-title
    .ext-banner-left
    .ext-banner-arrow-track,
  .ext-banner-area
    .ext-banner-content
    .ext-banner-title
    .ext-banner-right
    .ext-banner-arrow-track {
    display: none;
  }

  .ext-banner-area
    .ext-banner-content
    .ext-banner-title
    .ext-banner-left
    .ext-square-shape,
  .ext-banner-area
    .ext-banner-content
    .ext-banner-title
    .ext-banner-right
    .ext-square-shape {
    display: none;
  }

  .ext-banner-area .ext-banner-content .ext-banner-title .ext-banner-mid-icon {
    width: 150px;
    min-width: 0;
    max-width: 150px;
    padding: 20px 0;
  }

  .ext-banner-area .ext-banner-content .ext-banner-shape-area img.ext-shape-one,
  .ext-banner-area
    .ext-banner-content
    .ext-banner-shape-area
    img.ext-shape-two {
    max-width: 200px;
  }

  .ext-banner-area .ext-banner-content .ext-banner-text-area {
    margin-top: 36px;
    padding: 0 18px;
  }

  .ext-banner-area
    .ext-banner-content
    .ext-banner-text-area
    .ext-banner-button-area {
    flex-direction: column;
  }

  .ext-video-loop {
    height: 56vh;
    min-height: 320px;
  }

  .ext-footer-cta {
    --ext-footer-vector-height: 246px;
    --ext-footer-vector-top-band: 47px;
    min-height: 620px;
    padding: 425px var(--ext-site-gutter-mobile) 86px;
  }

  .ext-footer-mark {
    top: 214px;
    width: 74px;
  }

  .ext-footer-nav {
    min-height: auto;
    width: min(
      calc(100% - var(--ext-site-gutter-mobile)),
      var(--ext-site-max-width)
    );
    flex-wrap: wrap;
    gap: 16px;
    padding: 32px 0;
  }

  .ext-footer-separator {
    width: 5px;
    height: 5px;
  }

  .ext-footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 22px;
    padding: 34px var(--ext-site-gutter-mobile);
    text-align: center;
  }

  .ext-footer-social,
  .ext-footer-legal {
    justify-content: center;
    flex-wrap: wrap;
  }

  .ext-hero {
    min-height: auto;
  }

  .ext-hero-grid {
    background-size: 40px 40px;
    mask-image: none;
  }

  .ext-hero-content {
    padding: 54px 0 82px;
  }

  .ext-hero-pixels {
    grid-template-columns: repeat(4, 42px);
    grid-auto-rows: 42px;
  }

  .ext-hero-title {
    gap: 8px;
    font-size: clamp(42px, 14vw, 76px);
  }

  .ext-hero-title::before {
    min-height: 144px;
  }

  .ext-hero-title-panel {
    min-height: 76px;
  }

  .ext-hero-title-text {
    white-space: normal;
  }

  .ext-hero-icon-card {
    width: min(68vw, 210px);
    border-radius: 20px;
  }

  .ext-hero-icon-ring img {
    width: 70px;
  }

  .ext-hero-copy p {
    font-size: 14px;
  }

  .ext-hero-copy p br {
    display: none;
  }

  .ext-hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .ext-hero-btn {
    min-height: 58px;
    font-size: 16px;
  }

  .ext-hero-btn-light,
  .ext-hero-btn-dark {
    width: min(100%, 310px);
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .ext-header-shell {
    min-height: 66px;
    gap: 10px;
    padding-left: 18px;
  }

  .ext-logo-img {
    width: clamp(104px, 31vw, 124px);
  }

  .ext-btn {
    padding: 0 12px;
    min-height: 42px;
    font-size: 12px;
  }

  .ext-menu-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .ext-mobile-list {
    grid-template-columns: 1fr;
  }

  .ext-banner-area .ext-banner-content {
    padding: 78px 0;
  }

  .ext-banner-area .ext-banner-content .ext-banner-title {
    font-size: 40px;
  }

  .ext-banner-area
    .ext-banner-content
    .ext-banner-text-area
    .ext-banner-desc
    br {
    display: none;
  }

  .ext-banner-area .ext-banner-content .ext-banner-shape-area img.ext-shape-one,
  .ext-banner-area
    .ext-banner-content
    .ext-banner-shape-area
    img.ext-shape-two {
    max-width: 100px;
    min-width: 100px;
  }

  .ext-banner-btn {
    width: min(100%, 290px);
    max-width: none;
    justify-content: center;
    font-size: 16px;
  }

  .ext-video-loop {
    height: 48vh;
    min-height: 260px;
  }

  .ext-footer-cta {
    --ext-footer-vector-height: 198px;
    --ext-footer-vector-top-band: 38px;
    min-height: 520px;
    padding-top: 355px;
    padding-bottom: 68px;
  }

  .ext-footer-mark {
    top: 176px;
    width: 56px;
  }

  .ext-footer-cta h2 {
    font-size: 38px;
  }

  .ext-footer-cta p {
    max-width: 300px;
    font-size: 15px;
  }

  .ext-footer-nav {
    align-items: center;
    flex-direction: column;
    gap: 12px;
  }

  .ext-footer-separator {
    width: 4px;
    height: 4px;
  }

  .ext-footer-social,
  .ext-footer-legal {
    gap: 12px;
  }

  .ext-footer-legal a,
  .ext-footer-copy {
    font-size: 12px;
  }

  .ext-footer-social a {
    font-size: 12px;
    min-height: 32px;
    padding: 6px 12px;
  }

  .ext-hero-title {
    font-size: clamp(36px, 15vw, 58px);
  }

  .ext-hero-icon-card {
    width: min(78vw, 190px);
  }

  .ext-hero-pixels {
    opacity: 0.75;
  }
}

/* About Area styling from template */
.ext-about-area {
  position: relative;
}

.ext-about-area .ext-section-inner {
  background: #ffffff;
  border-radius: 0;
  overflow: hidden;
}

.ext-about-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
  /* on the shared section token so its rhythm matches every other band */
  padding: var(--ext-section-gap) 0;
}

.ext-about-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 40px);
}

.ext-about-badge {
  background: #f3f4f6;
  color: #1f2937;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0.02em;
  font-family: var(--ext-font-secondary);
}

.ext-about-heading {
  margin: 0;
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 600;
  line-height: 1.2;
}

.ext-about-right {
  display: flex;
  justify-content: center;
  width: 100%;
}

.ext-about-video-wrapper {
  position: relative;
  width: 85%;
  aspect-ratio: 1.15 / 1;
  border-radius: 24px;
  overflow: hidden;
}

.ext-about-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ext-border-top {
  border-top: 1px solid rgba(3, 7, 18, 0.1);
}

/* Square Dot styling */
.ext-square-dot {
  position: relative;
}

.ext-square-shape {
  position: absolute;
  z-index: 4;
  width: 6px;
  height: 6px;
  background: #030712;
}

.ext-square-shape.ext-top-left {
  top: -3px;
  left: -3px;
}

.ext-square-shape.ext-bottom-left {
  bottom: -3px;
  left: -3px;
}

.ext-square-shape.ext-top-right {
  top: -3px;
  right: -3px;
}

.ext-square-shape.ext-bottom-right {
  right: -3px;
  bottom: -3px;
}

/* Brand area logo strip */
.ext-brand-area {
  margin-bottom: var(--ext-section-gap);
}

/* Trusted-by marquee used as its own section (e.g. services page): add a top gap
   from the section above. The default margin-bottom collapses with the next
   section's margin-top, so the lower gap stays single. */
.ext-brand-area--section {
  padding-top: var(--ext-section-gap);
}

:root {
  --ext-brand-item-width: 240px;
  --ext-brand-logos-count: 6;
}

.ext-brand-inner {
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(3, 7, 18, 0.1);
  border-bottom: 1px solid rgba(3, 7, 18, 0.1);
  position: relative;
  overflow: hidden;
}

.ext-brand-left-item {
  flex-shrink: 0;
  width: 200px;
  display: flex;
  align-items: center;
  padding: 30px 24px;
  border-right: 1px solid rgba(3, 7, 18, 0.08);
  background: #ffffff;
  z-index: 2;
}

.ext-brand-left-item p {
  margin: 0;
  font-family: var(--ext-font-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ext-ink);
  letter-spacing: 0.1em;
}

.ext-brand-marquee {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  position: relative;
}

.ext-brand-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: brand-marquee-scroll var(--ext-brand-marquee-duration, 25s) linear infinite;
}

.ext-brand-logo-item {
  width: var(--ext-brand-item-width);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  border-right: 1px solid rgba(3, 7, 18, 0.08);
  flex-shrink: 0;
}

.ext-brand-logo-item img {
  max-height: 52px;
  width: auto;
  opacity: 1;
  transition: opacity 0.3s ease;
}

@keyframes brand-marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(
      calc(-1 * var(--ext-brand-item-width) * var(--ext-brand-logos-count))
    );
  }
}

/* Pause the marquee while hovered so logos can actually be read. */
.ext-brand-marquee:hover .ext-brand-track,
.ext-brand-track:hover {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .ext-brand-track {
    animation: none;
  }
}

/* Scroll Text Reveal Fill Effect (Simple Block Reveal) */
.ext-reveal-text {
  opacity: 1 !important;
  display: inline-block;
  color: rgba(17, 19, 21, 0.18);
  background: linear-gradient(
    to right,
    #111315 50%,
    rgba(17, 19, 21, 0.18) 50%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 100%;
  transition: background-position 0.05s linear;
}

/* Dark-section variant: fills from muted white to solid white as it scrolls
   (the base fills to dark ink, invisible on #0c0d0f). */
.ext-reveal-text--light {
  color: rgba(255, 255, 255, 0.26);
  background-image: linear-gradient(
    to right,
    #ffffff 50%,
    rgba(255, 255, 255, 0.26) 50%
  );
}

/* Responsive styles */
@media only screen and (max-width: 991px) {
  .ext-about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: clamp(30px, 5vw, 50px) 24px;
  }

  .ext-about-video-wrapper {
    aspect-ratio: 1.3 / 1;
    max-width: 500px;
    margin: 0 auto;
  }

  .ext-brand-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .ext-brand-left-item {
    width: 100%;
    justify-content: center;
    text-align: center;
    border-right: none;
    border-bottom: 1px solid rgba(3, 7, 18, 0.08);
    padding: 20px;
  }
}

@media only screen and (max-width: 768px) {
  :root {
    --ext-brand-item-width: 150px;
  }

  .ext-brand-logo-item {
    padding: 20px 15px;
  }

  .ext-brand-logo-item img {
    max-height: 28px;
  }
}

/* =============================================
   WPR Project Slider – Externo Integration
   ============================================= */

/* Utility classes ported from template */
.mb--16 {
  margin-bottom: -16px;
}

.ext-project-area .border-1 {
  border: 1px solid rgba(3, 7, 18, 0.1);
}

/* Section-level typography */
.ext-project-area .sub-title {
  color: var(--ext-ink);
  margin-bottom: 15px;
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  padding: 5px 10px 4px 26px;
  background: #f3f4f6;
  max-width: max-content;
  font-family: var(--ext-font-primary);
}
.ext-project-area .sub-title::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  transform: translateY(-50%);
  left: 6px;
  background: var(--ext-accent, #8b5cf6);
}
.ext-project-area .sub-title.bg-white {
  background: #ffffff;
}
.ext-project-area .section-title-area {
  display: block;
}
.ext-project-area .section-title-area.center-style {
  text-align: center;
}
.ext-project-area .section-title-area.center-style .sub-title {
  margin-left: auto;
  margin-right: auto;
}
.ext-project-area .section-title {
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 20px;
  text-transform: none;
}
.ext-project-area .section-title span {
  display: inline-block;
  padding-top: 10px;
}
.ext-project-area .section-title span span {
  padding-top: 0;
  display: inline;
}
.ext-project-area .section-title span img {
  margin-left: 10px;
  margin-top: -15px;
  vertical-align: middle;
  border-radius: 4px;
}
.ext-project-area .section-title-area .desc {
  color: rgba(17, 19, 21, 0.6);
  font-size: 15px;
  line-height: 1.7;
  max-width: 463px;
  margin: 0 auto;
}

/* Section structure */
.ext-project-area {
  position: relative;
}
.ext-project-area .section-inner {
  position: relative;
  z-index: 1;
  overflow: visible; /* critical: allows sticky child to work */
}
.ext-project-area .section-inner .space {
  display: block;
  height: 200px;
}

/* Floating sticky text sits BEHIND the video slider */
.ext-project-area .section-inner .floating-content {
  position: sticky;
  z-index: -1; /* behind the .ext-video-pin */
  left: 0;
  max-width: 100%;
  width: 100%;
  top: 30%;
  margin-bottom: 20px;
  padding: 40px;
}
@media (max-width: 1600px) {
  .ext-project-area .section-inner .floating-content {
    top: 26%;
  }
}
@media (max-width: 1440px) {
  .ext-project-area .section-inner .floating-content {
    top: 30%;
  }
}
@media (max-width: 991px) {
  .ext-project-area .section-inner .floating-content {
    position: relative;
    top: auto;
    z-index: 1;
    padding: 40px 24px;
  }
}

.ext-project-area .ext-video-pin {
  position: relative;
  display: block;
  height: 100vh !important;
}
.ext-project-area .ext-video-wrapper {
  width: 100%;
  overflow: hidden;
  height: 100%;
}
.ext-project-area .ext-video-wrapper .swiper-navigation {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(46px);
}
.ext-project-area .ext-video-wrapper .swiper-navigation .swiper-btn {
  width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.ext-project-area
  .ext-video-wrapper
  .swiper-navigation
  .swiper-btn:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.ext-project-area .ext-video-wrapper .swiper-navigation.dark {
  background: rgba(0, 0, 0, 0.35);
}
.ext-project-area .gsap-slider {
  display: flex;
  height: 100%;
  position: relative;
  z-index: 1;
}
.ext-project-area .gsap-slider.scale-done .slide .slide-content {
  opacity: 1;
  pointer-events: all;
}
.ext-project-area .project-slider {
  height: 100%;
}
.ext-project-area .slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.ext-project-area .slide .slide-content {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  pointer-events: none;
  transition: var(--ext-transition);
}
.ext-project-area .slide .slide-content .product-intro {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  max-width: 582px;
  width: 100%;
  background: rgba(0, 0, 0, 0.55);
  border-width: 0px 1px 1px 0px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(46px);
}
.ext-project-area .slide .slide-content .product-intro .top {
  padding: 40px 32px;
}
.ext-project-area .slide .slide-content .product-intro .top .title {
  color: #ffffff;
  text-transform: none;
}
.ext-project-area .slide .slide-content .product-intro .top .desc {
  color: rgba(255, 255, 255, 0.7);
}
.ext-project-area .slide .slide-content .product-intro .bottom ul {
  margin: 0;
  padding: 0;
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.ext-project-area .slide .slide-content .product-intro .bottom ul li {
  margin: 0;
  width: 100%;
  padding: 24px 32px;
}
.ext-project-area
  .slide
  .slide-content
  .product-intro
  .bottom
  ul
  li:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.ext-project-area .slide .slide-content .product-intro .bottom ul li .h5 {
  font-size: 32px;
  line-height: 1;
  font-family: var(--ext-font-secondary);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 5px;
}
.ext-project-area .slide .slide-content .product-intro .bottom ul li p {
  color: rgba(255, 255, 255, 0.7);
}
.ext-project-area .slide .slide-content .button-area {
  position: absolute;
  top: 35%;
  right: 15%;
  z-index: 2;
  max-width: max-content;
  display: flex;
  opacity: 0;
  transform: translateY(30px);
  transition: all 3.5s;
}
.ext-project-area .slide .slide-content .button-area .box {
  width: 24px;
  height: 24px;
  background: #030712;
}
.ext-project-area .slide .slide-content .button-area a {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  gap: 8px;
  background: #030712;
  margin-top: 24px;
  color: #ffffff;
  font-family: var(--ext-font-primary);
  font-weight: 500;
}
.ext-project-area .slide .image-area {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.ext-project-area .slide .image-area .shape {
  position: absolute;
  z-index: 1;
}
.ext-project-area .slide .image-area .shape.top-left-shape {
  top: 0;
  left: 0;
}
.ext-project-area .slide .image-area .shape.top-right-shape {
  top: 0;
  right: 0;
}
.ext-project-area .image-area img,
.ext-project-area .video-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ext-project-area .pin-spacer {
  margin: 0 !important;
}

.hover_mouse {
  position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hover_mouse.active {
  opacity: 1;
}
.hover_mouse a {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  gap: 8px;
  background: #030712;
  color: #ffffff;
  font-family: var(--ext-font-primary);
  font-weight: 500;
  position: relative;
  z-index: 1;
  transform: scale(0);
  transition: transform 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.hover_mouse.active a {
  transform: scale(1);
}

@media (max-width: 991px) {
  .ext-project-area .ext-video-pin {
    height: auto !important;
    min-height: 500px;
  }
  .ext-project-area .ext-video-wrapper .swiper-navigation .swiper-btn {
    width: 60px;
    height: 60px;
  }
  .ext-project-area .slide .slide-content .product-intro {
    max-width: 100%;
  }
}

/* ============================================
   Services / Working Process Section
   ============================================ */
.ext-services-area {
  position: relative;
  /* Clean gap between the services card and the dark work band below
     (matches the brand/about section rhythm). */
  margin-bottom: var(--ext-section-gap);
}

.services-section-inner {
  background: #ffffff;
  /* top offset on the shared token to match the About grid's rhythm */
  padding: var(--ext-section-gap) 0px 0;
}

/* Services page only: the What We Do section sits right under the hero curve, so it
   needs less top breathing room than the homepage's full section gap. */
.ext-over-hero .services-section-inner {
  padding-top: calc(var(--ext-section-gap) * 0.5);
}

.services-row {
  display: flex;
  gap: 60px;
}

/* --- Left column: sticky sidebar --- */
.services-col-left {
  flex: 0 0 40%;
  max-width: 40%;
}

.services-sticky-content {
  position: sticky;
  top: 120px;
}

.ext-services-area .section-title-area {
  display: block;
  margin-bottom: 40px;
}

.ext-services-area .sub-title {
  color: var(--ext-ink);
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  padding: 5px 10px 4px 26px;
  background: #f3f4f6;
  max-width: max-content;
  font-family: var(--ext-font-primary);
}

.ext-services-area .sub-title::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  transform: translateY(-50%);
  left: 6px;
  background: var(--ext-accent, #ffc13d);
}

/* What We Do: ring-halo bare eyebrow reads dark on the white section */
.ext-services-area .section-title-area .ext-about-eyebrow--bare {
  color: var(--ext-ink);
  margin-bottom: 18px;
}

.ext-services-area .section-title {
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  text-transform: none;
}

.services-text-area {
  margin-top: 60px;
}

.services-text-area .desc {
  color: rgba(17, 19, 21, 0.55);
  font-size: 15px;
  line-height: 1.7;
  max-width: 380px;
  margin: 0 0 32px;
}

/* --- Right column: process cards --- */
.services-col-right {
  flex: 1;
  min-width: 0;
}

.services-process-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-bottom: 80px;
}

.services-process-card {
  display: flex;
  flex-direction: column; /* Stacked by default on mobile */
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(17, 19, 21, 0.08);
  overflow: hidden;
}

/* Clean white media panel for the service illustrations. */
.services-card-media {
  position: relative;
  display: grid;
  width: 100%;
  height: 140px; /* Compact height on mobile/tablet */
  overflow: hidden;
  place-items: center;
  border-bottom: none;
  background: #ffffff;
}

.services-card-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  object-fit: contain;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

a.services-process-card:hover .services-card-img {
  transform: translate(-50%, -50%) scale(1.04);
}

.services-card-content {
  position: relative; /* Relative wrapper for absolute top-right arrow positioning */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 28px 30px;
  flex-grow: 1;
}

/* Title + arrow sit on one row; arrow follows the text */
.services-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

.services-card-title {
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  /* Bright yellow underline that fills left-to-right on card hover */
  display: inline-block;
  background-image: linear-gradient(var(--ext-accent, #ffc13d), var(--ext-accent, #ffc13d));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 3px;
  padding-bottom: 4px;
  transition: background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

a.services-process-card:hover .services-card-title {
  background-size: 100% 3px;
}

.services-card-desc {
  color: rgba(17, 19, 21, 0.62);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  max-width: 640px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Whole service card is a link to its detail page */
a.services-process-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    box-shadow 0.35s ease,
    transform 0.35s ease,
    border-color 0.35s ease;
}

a.services-process-card:hover {
  border-color: rgba(17, 19, 21, 0.14);
  box-shadow: 0 24px 46px -26px rgba(17, 19, 21, 0.35);
  background: #f7f8f9;
}

/* Footer: service chips (now occupies full width without CTA overlay issues) */
.services-card-footer {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: auto; /* Push footer to the bottom of the flex card */
  padding-top: 24px;
}

/* On Desktop: Flex horizontal layout, large text sizes */
@media (min-width: 992px) {
  .services-process-card {
    flex-direction: row;
    align-items: stretch;
    min-height: 270px;
  }

  .services-card-media {
    width: 260px; /* Smaller aspect image demo on the right side */
    height: auto;
    flex-shrink: 0;
    order: 2; /* Position on the right side */
    border-bottom: none;
    border-left: none;
  }

  .services-card-content {
    order: 1; /* Content on the left side */
    padding: 38px 44px;
  }

  .services-card-title {
    font-size: 34px; /* Increased text size for desktop */
  }

  .services-card-arrow {
    --svc-arrow-size: 30px;
  }

  .services-card-desc {
    font-size: 16px; /* Increased text size for desktop */
    line-height: 1.7;
    max-width: 100%;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

}

.services-card-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-card-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(17, 19, 21, 0.12);
  background: rgba(17, 19, 21, 0.03);
  color: rgba(17, 19, 21, 0.62);
  font-family: var(--ext-font-primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  transition:
    border-color 0.3s ease,
    color 0.3s ease;
}

a.services-process-card:hover .services-card-chip {
  border-color: rgba(17, 19, 21, 0.18);
  color: rgba(17, 19, 21, 0.78);
}

/* Navigation arrow right after the title; hints the card links to its detail page.
   Size tracks the title via --svc-arrow-size (1em ≈ title font-size). */
.services-card-arrow {
  --svc-arrow-size: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--svc-arrow-size);
  color: rgba(17, 19, 21, 0.55);
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none; /* Let parent click pass through */
  /* Mirror the title's bottom padding so the icon centres on the text glyphs */
  padding-bottom: 4px;
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-card-arrow svg {
  width: 1em;
  height: 1em;
  display: block;
}

a.services-process-card:hover .services-card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* --- Bottom dashed border with dots --- */
.services-bottom-border {
  position: relative;
  padding: 32px 0;
}

.services-dashed-line {
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(3, 7, 18, 0.18) 0px,
    rgba(3, 7, 18, 0.18) 6px,
    transparent 6px,
    transparent 12px
  );
}

.services-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--ext-ink);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.services-dot-left {
  left: -4px;
}

.services-dot-right {
  right: -4px;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .services-section-inner {
    padding: 60px 40px 0;
  }
  .services-row {
    gap: 40px;
  }
}

@media (max-width: 991px) {
  .services-row {
    flex-direction: column;
    gap: 40px;
  }
  .services-col-left {
    flex: none;
    max-width: 100%;
  }
  .services-sticky-content {
    position: relative;
    top: auto;
  }
  .services-text-area {
    margin-top: 24px;
  }
  .services-text-area .desc {
    max-width: 100%;
  }
  .services-section-inner {
    padding: 48px 24px 0;
  }
}

@media (max-width: 575px) {
  .ext-services-area .section-title {
    font-size: 32px;
  }
  .services-section-inner {
    padding: 36px 16px 0;
  }
  .services-process-list {
    gap: 36px;
    padding-bottom: 48px;
  }
}

/* ============================================
   Global Clients Map Section
   ============================================ */
.ext-global-map-area {
  position: relative;
}

.ext-global-map-area .ext-section-inner {
  padding: var(--ext-section-gap) 40px;
}

.ext-map-header {
  max-width: 680px;
  margin: 0 auto 40px;
  text-align: center;
}

.ext-ring-icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.ext-ring-icon {
  width: 33px;
  height: 8px;
  animation: extRingFloat 3s ease-in-out infinite;
}

@keyframes extRingFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.ext-map-heading {
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 16px;
}

.ext-map-subheading {
  color: rgba(17, 19, 21, 0.6);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.ext-map-container {
  position: relative;
  width: 100%;
  margin: 40px 0 60px;
}

.ext-map-bg-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
}

.ext-map-vector {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.85;
}

/* Pins & Badges */
.ext-map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.ext-map-pin-badge {
  position: relative;
  width: 60px;
  height: 61px;
  background: url("../images/common/project-bg-ellipse.svg") no-repeat center/contain;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.3s;
}

.ext-map-pin:hover .ext-map-pin-badge,
.ext-map-pin.ext-active .ext-map-pin-badge {
  transform: scale(1.12);
  filter: drop-shadow(0 8px 16px rgba(255, 225, 158, 0.7));
}

.ext-map-pin-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  margin-top: -3px; /* visual alignment offset inside the droplet shape */
}

.ext-map-pin.ext-active {
  /* only needs to beat sibling pins - must stay below the fullscreen
     site menu (z-index 940) */
  z-index: 30;
}

.ext-map-pin-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tooltip styles */
.ext-map-tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translate3d(-50%, 15px, 0) scaleY(0.7) scaleX(0.85);
  transform-origin: bottom center;
  width: 300px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(17, 19, 21, 0.08);
  border-bottom: 4px solid var(--ext-accent, #ffc13d);
  border-radius: 14px;
  box-shadow:
    0 20px 48px rgba(17, 19, 21, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 22px 22px 24px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0.4s;
  z-index: 25;
  pointer-events: none;
}

/* Pointer arrow */
.ext-map-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: var(--ext-accent, #ffc13d) transparent transparent;
}

.ext-map-pin.ext-active .ext-map-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0) scale(1);
  pointer-events: auto;
}

.ext-map-tooltip-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  background: rgba(17, 19, 21, 0.04);
  border: none;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(17, 19, 21, 0.5);
  padding: 0;
  line-height: 1;
  transition:
    background-color var(--ext-transition),
    color var(--ext-transition);
}

.ext-map-tooltip-close:hover {
  background: rgba(17, 19, 21, 0.1);
  color: var(--ext-ink);
}

.ext-map-tooltip-content {
  text-align: left;
}

.ext-tooltip-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.ext-tooltip-tag {
  font-family: var(--ext-font-primary);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 193, 61, 0.15);
  color: #a86700;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}

.ext-tooltip-dot {
  font-size: 12px;
  color: rgba(17, 19, 21, 0.2);
  margin: 0 8px;
  line-height: 1;
}

.ext-tooltip-category {
  font-family: var(--ext-font-primary);
  font-size: 11px;
  font-weight: 500;
  color: var(--ext-muted);
}

.ext-map-tooltip-title {
  font-family: var(--ext-font-primary);
  font-size: 19px;
  font-weight: 700;
  color: var(--ext-ink);
  margin: 0 0 6px 0;
  line-height: 1.25;
  padding-right: 24px; /* leave space for rounded close button */
}

.ext-map-tooltip-desc {
  font-family: var(--ext-font-primary);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ext-muted);
  margin: 0 0 16px 0;
}

.ext-tooltip-footer {
  border-top: 1px dashed rgba(17, 19, 21, 0.08);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ext-map-tooltip-client {
  font-family: var(--ext-font-primary);
  font-size: 11px;
  font-weight: 500;
  color: rgba(17, 19, 21, 0.6);
  background: rgba(17, 19, 21, 0.04);
  padding: 4px 10px;
  border-radius: 6px;
  margin: 0;
}

.ext-map-tooltip-link {
  font-family: var(--ext-font-secondary);
  font-size: 13px;
  font-weight: 700;
  color: var(--ext-ink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  transition: opacity var(--ext-transition);
}

.ext-arrow-icon {
  transition: transform 0.2s ease;
}

.ext-map-tooltip-link:hover {
  opacity: 0.8;
}

.ext-map-tooltip-link:hover .ext-arrow-icon {
  transform: translate(2px, -2px);
}

.ext-map-footer {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (max-width: 991px) {
  .ext-map-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 40px; /* room for tooltips that open downward + scrollbar */
  }
  .ext-map-bg-wrapper {
    min-width: 960px;
  }
  .ext-global-map-area .ext-section-inner {
    padding: 60px 24px;
  }

  /* Tooltips can never be wider than the viewport on small screens. */
  .ext-map-tooltip {
    width: min(300px, calc(100vw - 48px));
  }

  /* The map scrolls horizontally here, so its container clips vertically too.
     Top-row pins (1, 2, 4, 6, 7) open their tooltip BELOW the badge instead of
     above, where there isn't enough headroom inside the scroll container. */
  .ext-map-pin[data-pin-id="1"] .ext-map-tooltip,
  .ext-map-pin[data-pin-id="2"] .ext-map-tooltip,
  .ext-map-pin[data-pin-id="4"] .ext-map-tooltip,
  .ext-map-pin[data-pin-id="6"] .ext-map-tooltip,
  .ext-map-pin[data-pin-id="7"] .ext-map-tooltip {
    bottom: auto;
    top: calc(100% + 14px);
    transform: translate3d(-50%, -15px, 0) scaleY(0.7) scaleX(0.85);
    transform-origin: top center;
  }

  /* Flipped pointer arrow sits on the tooltip's top edge, pointing up. */
  .ext-map-pin[data-pin-id="1"] .ext-map-tooltip::after,
  .ext-map-pin[data-pin-id="2"] .ext-map-tooltip::after,
  .ext-map-pin[data-pin-id="4"] .ext-map-tooltip::after,
  .ext-map-pin[data-pin-id="6"] .ext-map-tooltip::after,
  .ext-map-pin[data-pin-id="7"] .ext-map-tooltip::after {
    top: auto;
    bottom: 100%;
    border-width: 0 8px 8px;
    border-color: transparent transparent var(--ext-accent, #ffc13d);
  }

  /* Re-assert the open state for the flipped tooltips (the closed-state rule
     above has equal specificity to the base .ext-active rule and comes later,
     so the open transform must be restated at higher specificity). */
  .ext-map-pin[data-pin-id="1"].ext-active .ext-map-tooltip,
  .ext-map-pin[data-pin-id="2"].ext-active .ext-map-tooltip,
  .ext-map-pin[data-pin-id="4"].ext-active .ext-map-tooltip,
  .ext-map-pin[data-pin-id="6"].ext-active .ext-map-tooltip,
  .ext-map-pin[data-pin-id="7"].ext-active .ext-map-tooltip {
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@media (max-width: 575px) {
  .ext-global-map-area .ext-section-inner {
    padding: 40px 16px;
  }
  .ext-map-header {
    margin-bottom: 20px;
  }
}

/* ============================================
   Testimonials Section
   ============================================ */
.ext-testimonial-area {
  position: relative;
}

.ext-testimonial-area .ext-section-inner {
  padding: var(--ext-section-gap) 60px;
}

.ext-testimonial-header {
  margin-bottom: 48px;
}

.ext-testimonial-badge {
  color: var(--ext-ink);
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  padding: 5px 10px 4px 26px;
  background: #f3f4f6;
  max-width: max-content;
  display: block;
  font-family: var(--ext-font-primary);
}

.ext-testimonial-badge::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  transform: translateY(-50%);
  left: 6px;
  background: var(--ext-accent, #ffc13d);
}

.ext-testimonial-heading {
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

.ext-highlight-text {
  color: var(--ext-accent, #ffc13d);
}

/* Slider Layout */
.ext-testimonial-slider-container {
  position: relative;
  width: 100%;
}

.ext-testimonial-layout-grid {
  display: grid;
  grid-template-columns: 1fr 35%;
  gap: 30px;
  align-items: stretch;
  min-width: 0;
}

.ext-testimonial-left-container {
  position: relative;
  background: #f5f5f5;
  border-radius: 16px;
  padding: 48px 48px 110px; /* extra bottom padding for static navigation area */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 0 rgba(17, 19, 21, 0.05);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.testimonial-text-slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ext-testimonial-content-slide {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ext-testimonial-brand {
  font-family: var(--ext-font-secondary);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--ext-ink);
  line-height: 1;
  margin-bottom: 30px;
}

.ext-testimonial-quote {
  font-family: var(--ext-font-primary);
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--ext-ink);
  margin: 0 0 32px 0;
  font-weight: 500;
}

.ext-testimonial-author {
  margin-top: auto;
}

.ext-author-name {
  font-family: var(--ext-font-secondary);
  font-size: 18px;
  font-weight: 700;
  color: var(--ext-ink);
  margin: 0 0 4px 0;
}

.ext-author-role {
  font-family: var(--ext-font-primary);
  font-size: 14px;
  color: var(--ext-muted);
  margin: 0;
}

.ext-testimonial-right-container {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-width: 0;
}

.testimonial-image-slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ext-testimonial-image-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ext-testimonial-image-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Nav Buttons overlay bottom-left of left card */
.ext-testimonial-nav {
  position: absolute;
  left: 48px;
  bottom: 48px;
  z-index: 10;
  display: flex;
  gap: 12px;
}

.ext-testi-btn {
  width: 44px;
  height: 44px;
  background: var(--ext-accent, #ffc13d);
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ext-ink);
  cursor: pointer;
  transition:
    transform var(--ext-transition),
    background-color var(--ext-transition),
    box-shadow var(--ext-transition);
  box-shadow: 0 4px 12px rgba(255, 193, 61, 0.2);
}

.ext-testi-btn:hover {
  transform: translateY(-2px);
  background: var(--ext-button-top, #3f4449);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(17, 19, 21, 0.15);
}

@media (max-width: 991px) {
  .ext-testimonial-layout-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ext-testimonial-right-container {
    height: 350px;
  }
  .ext-testimonial-left-container {
    padding: 32px 32px 90px;
    min-height: auto;
  }
  .ext-testimonial-nav {
    left: 32px;
    bottom: 32px;
  }
  .ext-testimonial-area .ext-section-inner {
    padding: 60px 24px;
  }
}

@media (max-width: 575px) {
  .ext-testimonial-left-container {
    padding: 24px 24px 85px;
  }
  .ext-testimonial-nav {
    left: 24px;
    bottom: 24px;
  }
}

/* ============================================
   Journey Section (Process Steps)
   ============================================ */
.ext-journey-area {
  position: relative;
  background-color: #f6f7f9; /* full-width popout background */
  width: 100%;
}

.ext-journey-wrapper {
  /* Bottom stays 50px - that space is reserved for the arches/dots. */
  padding: var(--ext-section-gap) 60px 50px;
}

.ext-journey-header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* vertically centered */
  margin-bottom: 60px;
}

.ext-journey-title-wrap {
  flex: 1;
}

.ext-journey-heading {
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 16px 0;
}

.ext-journey-ring-wrap {
  position: relative;
  display: inline-block;
}

.ext-journey-ring-icon {
  position: absolute;
  width: 44px;
  height: auto;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  pointer-events: none;
}

.ext-journey-highlight {
  color: var(--ext-muted, #7e8285);
}

.ext-journey-subtext {
  color: var(--ext-muted);
  font-family: var(--ext-font-primary);
  font-size: 16px;
  margin: 0;
}

/* Capsule Button */
.ext-capsule-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1.5px solid var(--ext-accent, #ffc13d);
  border-radius: 50px;
  padding: 6px 6px 6px 24px;
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--ext-transition),
    box-shadow var(--ext-transition),
    border-color var(--ext-transition);
}

.ext-capsule-btn:hover {
  box-shadow: 0 8px 24px rgba(255, 193, 61, 0.15);
  background-color: rgba(255, 193, 61, 0.03);
}

.ext-capsule-icon-wrap {
  width: 38px;
  height: 38px;
  background: var(--ext-accent, #ffc13d);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--ext-transition),
    background-color var(--ext-transition);
}

.ext-capsule-icon-wrap img {
  width: 18px;
  height: 18px;
  transition: transform var(--ext-transition);
}

.ext-capsule-btn:hover .ext-capsule-icon-wrap {
  transform: scale(1.05);
}

.ext-capsule-btn:hover .ext-capsule-icon-wrap img {
  transform: rotate(-15deg) translate(1px, -1px);
}

/* Process Steps Grid */
.ext-journey-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
  position: relative;
  margin-top: 40px;
}

.ext-journey-step {
  position: relative;
  padding: 48px 24px 18px; /* further reduced top/bottom padding */
  text-align: center;
  border: 2px dashed rgba(255, 193, 61, 0.35);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; /* perfect semi-ellipse arch */
  background: linear-gradient(
    180deg,
    rgba(255, 193, 61, 0.06) 0%,
    rgba(255, 193, 61, 0) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 155px; /* further reduced height */
  transition:
    border-color var(--ext-transition),
    background var(--ext-transition),
    transform var(--ext-transition),
    box-shadow var(--ext-transition);
  cursor: pointer;
}

/* Shift middle cards or adjust borders so they overlap nicely */
.ext-journey-step:not(:first-child) {
  margin-left: -2px; /* overlaps borders so they don't look double-thick */
}

/* Connective dot at intersection */
.ext-journey-step::after {
  content: "";
  position: absolute;
  bottom: -5px; /* centers dot vertically on the bottom border line */
  right: -5px;
  width: 10px;
  height: 10px;
  background: var(--ext-accent, #ffc13d);
  border-radius: 50%;
  z-index: 5;
  transition: transform var(--ext-transition);
}

.ext-journey-step:last-child::after {
  display: none;
}

/* Step Circle Icon at Peak */
.ext-step-icon-wrap {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background: var(--ext-accent, #ffc13d);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 193, 61, 0.25);
  transition:
    transform var(--ext-transition),
    background-color var(--ext-transition),
    box-shadow var(--ext-transition);
  z-index: 6;
}

.ext-step-icon-wrap img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  transition: transform var(--ext-transition);
}

/* Interactive hover animations */
.ext-journey-step:hover {
  border-color: rgba(255, 193, 61, 0.6);
  background: linear-gradient(
    180deg,
    rgba(255, 193, 61, 0.22) 0%,
    rgba(255, 193, 61, 0.02) 100%
  ); /* increased yellow glow */
  box-shadow: inset 0 20px 30px -10px rgba(255, 193, 61, 0.15);
  z-index: 10;
}

.ext-journey-step:hover .ext-step-icon-wrap {
  transform: translateX(-50%) translateY(-3px) scale(1.15) rotate(5deg);
  /* background remains yellow - removed grey change */
  box-shadow: 0 6px 16px rgba(255, 193, 61, 0.35);
}

.ext-journey-step:hover .ext-step-icon-wrap img {
  transform: scale(1.05);
}

.ext-journey-step:hover::after {
  transform: scale(1.3);
}

/* Step Content */
.ext-step-number {
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 700;
  color: var(--ext-accent, #ffc13d);
  margin-bottom: 2px;
  letter-spacing: 0.05em;
  z-index: 3;
  line-height: 1.2;
}

.ext-step-title {
  font-family: var(--ext-font-primary);
  font-size: 18px;
  font-weight: 700;
  color: var(--ext-ink);
  margin: 0;
  z-index: 3;
  line-height: 1.2;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .ext-journey-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .ext-journey-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  .ext-journey-step {
    border-bottom: 2px dashed rgba(255, 193, 61, 0.35);
    border-radius: 200px 200px 200px 200px;
    min-height: 240px;
    margin-left: 0 !important;
  }
  .ext-journey-step::after {
    display: none;
  }
  .ext-journey-step:hover {
    box-shadow: inset 0 15px 25px -10px rgba(255, 193, 61, 0.12);
  }
  .ext-journey-wrapper {
    padding: 60px 0 30px;
  }
}

@media (max-width: 575px) {
  .ext-journey-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ext-journey-step {
    min-height: 220px;
    padding: 60px 20px 40px;
  }
}

/* ============================================
   Custom FAQ Section Styles (Template Aligned)
   ============================================ */
.ext-faq-area {
  position: relative;
  margin-top: var(--ext-section-gap);
}

.ext-heading-light {
  color: var(--ext-muted, #5f646b);
}

/* FAQ layout scaffolding (self-contained, ext- prefixed) */
.ext-faq-area .ext-container {
  position: relative;
}

.ext-faq-area .ext-faq-panel {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 32px;
  overflow: hidden;
}

.ext-faq-area .ext-faq-inner {
  position: relative;
  z-index: 1;
  padding: clamp(32px, 5vw, 72px);
}

.ext-faq-area .ext-faq-heading {
  text-align: center;
  margin-bottom: 50px;
}

.ext-faq-area .ext-faq-eyebrow {
  position: relative;
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 12px 4px 26px;
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ext-ink);
  background: #f3f4f6;
}

.ext-faq-area .ext-faq-eyebrow::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: var(--ext-accent, #ffc13d);
}

/* Services FAQ: ring-halo bare eyebrow reads dark on the white panel */
.ext-faq-area .ext-faq-heading .ext-about-eyebrow--bare {
  color: var(--ext-ink);
  margin-bottom: 16px;
}

.ext-faq-area .ext-faq-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
}

/* Inline FAQ inside an article body: extra breathing room above, and the shared
   bare halo eyebrow (defaults to white) forced to ink and centered. */
.ext-article-body > .ext-content-faq {
  margin-top: 150px;
}
.ext-content-faq .ext-faq-heading {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.ext-content-faq .ext-about-eyebrow--bare {
  color: var(--ext-ink);
  margin-bottom: 4px;
}

.ext-faq-area .ext-faq-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 30px;
}

.ext-faq-area .ext-faq-col-left,
.ext-faq-area .ext-faq-col-right {
  flex: 1 1 100%;
  min-width: 0;
}

@media (min-width: 992px) {
  .ext-faq-area .ext-faq-col-left {
    flex: 0 0 calc(41.6667% - 15px);
    max-width: calc(41.6667% - 15px);
  }
  .ext-faq-area .ext-faq-col-right {
    flex: 0 0 calc(58.3333% - 15px);
    max-width: calc(58.3333% - 15px);
  }
}

/* Faint grid texture inside the panel (a background layer BEHIND the
   content), clipped to it and faded out downward so it never sits over the
   accordion text lower in the panel. */
.ext-faq-area .ext-faq-shape-grid {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  z-index: 0;
  opacity: 0.28;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

.ext-faq-area .ext-faq-shape-grid img {
  display: block;
  width: 100%;
  height: auto;
}

/* Left AI card - ONE card: white top section + grey bottom section, joined
   seamlessly under a single border / radius / shadow. */
.ext-faq-ai-card {
  background: #ffffff;
  border: 1px solid rgba(17, 19, 21, 0.09);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 50px -28px rgba(17, 19, 21, 0.18);
  position: relative;
  z-index: 10;
}

/* White top: label + AI brand circles */
.ext-faq-ai-top {
  background: #ffffff;
  padding: 30px 32px 32px;
}

/* Grey bottom: heading + CTA buttons, divided from the top by a hairline */
.ext-faq-ai-bottom {
  background: #f5f5f6;
  border-top: 1px solid rgba(17, 19, 21, 0.07);
  padding: 26px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ext-faq-ai-label {
  font-family: var(--ext-font-primary);
  font-size: 12px;
  font-weight: 700;
  color: var(--ext-ink);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 22px;
}

.ext-faq-ai-brands {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* Prevent wrapping completely on desktop to avoid transition layout shifts */
  overflow: hidden; /* Cleanly clip temporary transition overflows */
  gap: 12px;
}

/* Custom styling for compact AI chips inside FAQ container */
.ext-faq-ai-brands .ext-ai-chip {
  --ext-chip-size: clamp(52px, 5.4vw, 60px); /* Larger size matching the support page look */
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: var(--ext-chip-size);
  background: #f1f1f2;
  border: 1.5px solid transparent;
  border-radius: 50px;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
}

.ext-faq-ai-brands .ext-ai-chip-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--ext-chip-size);
  height: 100%;
}

.ext-faq-ai-brands .ext-ai-chip-ic img {
  width: 46%;
  height: 46%;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.ext-faq-ai-brands .ext-ai-chip-name {
  max-width: 0;
  padding-right: 0;
  overflow: hidden;
  font-family: var(--ext-font-primary);
  font-size: clamp(14px, 1.25vw, 16px);
  font-weight: 600;
  color: var(--ext-brand, var(--ext-ink));
  transition:
    max-width 0.34s ease,
    opacity 0.24s ease,
    padding-right 0.34s ease;
  opacity: 0;
}

/* Desktop active and hover interactions: expand into pill */
@media (min-width: 768px) {
  .ext-faq-ai-brands .ext-ai-chip.is-active,
  .ext-faq-ai-brands .ext-ai-chip:hover {
    border-color: var(--ext-brand, var(--ext-ink));
    background: #ffffff;
    box-shadow: 0 8px 16px -6px rgba(17, 19, 21, 0.12);
  }

  .ext-faq-ai-brands .ext-ai-chip.is-active .ext-ai-chip-name,
  .ext-faq-ai-brands .ext-ai-chip:hover .ext-ai-chip-name {
    max-width: 150px;
    padding-right: 18px;
    opacity: 1;
  }
}

/* Mobile responsive layout: keep standard circles (do not expand) */
@media (max-width: 767px) {
  .ext-faq-ai-brands {
    gap: 10px;
    flex-wrap: wrap;
    overflow: visible;
  }

  .ext-faq-ai-brands .ext-ai-chip {
    --ext-chip-size: 52px; /* Fixed circles on mobile */
    width: var(--ext-chip-size);
    border-radius: 50%;
    justify-content: center;
    background: #f1f1f2 !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .ext-faq-ai-brands .ext-ai-chip-name {
    display: none !important; /* Hide name entirely on mobile */
  }

  .ext-faq-ai-brands .ext-ai-chip:hover {
    transform: none;
    border-color: var(--ext-brand, transparent) !important;
  }
}

.ext-faq-ai-heading {
  font-family: var(--ext-font-primary);
  font-size: 27px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ext-ink);
  margin: 0 0 8px;
}

.ext-capsule-meet-btn,
.ext-capsule-chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  border-radius: 50px;
  font-family: var(--ext-font-secondary);
  font-size: 15px;
  font-weight: 600;
  transition: all var(--ext-transition);
  width: 100%;
}

.ext-capsule-meet-btn {
  border: 1.5px solid var(--ext-accent, #ffc13d);
  color: var(--ext-ink);
  background: #ffffff;
}

.ext-capsule-meet-btn img {
  width: 20px;
  height: 20px;
}

.ext-capsule-meet-btn:hover {
  border-color: var(--ext-accent, #ffc13d);
  background: rgba(255, 193, 61, 0.1);
  transform: scale(1.03);
}

.ext-capsule-chat-btn {
  border: 1.5px solid rgba(17, 19, 21, 0.08);
  color: var(--ext-ink);
  background: #ffffff;
}

.ext-capsule-chat-btn img {
  width: 20px;
  height: 20px;
}

.ext-capsule-chat-btn:hover {
  border-color: #25d366;
  background: rgba(37, 211, 102, 0.1);
  transform: scale(1.03);
}

/* Right side Accordion styling - box style stays identical in every state
   (closed / hover / open), per design. */
.ext-faq-area .accordion-item {
  border-radius: 12px;
  background: #f5f5f6;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset,
    0 -5px 0 0 #e4e4e4 inset,
    0 -6px 0 1px #fafafa inset;
  margin-bottom: 14px;
  overflow: hidden;
  cursor: pointer;
}

.ext-faq-area .accordion-item:last-child {
  margin-bottom: 0;
}

/* Headers are <h3> for a sane outline (h2 section title → h3 questions);
   margin is pinned to the previous h2 UA default (0.83em of 24px) so the
   boxes render pixel-identical. */
.ext-faq-area .accordion-header {
  margin: 19.92px 0;
}

.ext-faq-area .accordion-button {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 50px 12px 22px;
  background: transparent;
  border: none;
  font-family: var(--ext-font-secondary);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ext-ink);
  text-align: left;
  cursor: pointer;
  transition: color var(--ext-transition);
}

/* Chevron built from two independent legs so it can morph:
   down-chevron (˅) → straight line (-) → up-chevron (˄).
   The vertex travels from the bottom (closed) to the top (open) as the legs
   sweep through flat. A springy easing gives it a little snap. */
.ext-faq-area .accordion-button::before,
.ext-faq-area .accordion-button::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.25px;
  width: 9px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ext-ink);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Left leg - pivots at the shared vertex (right:27px). Its inner tip overshoots
   the vertex by 1.5px so the two rounded caps overlap and leave no gap. */
.ext-faq-area .accordion-button::before {
  right: 25.5px;
  transform-origin: calc(100% - 1.5px) center;
  transform: rotate(40deg);
}

/* Right leg - same shared vertex, mirrored 1.5px overshoot */
.ext-faq-area .accordion-button::after {
  right: 19.5px;
  transform-origin: 1.5px center;
  transform: rotate(-40deg);
}

/* Open state: legs sweep past flat to point the chevron upward (˄) */
.ext-faq-area .accordion-button:not(.collapsed)::before {
  transform: rotate(-40deg);
}

.ext-faq-area .accordion-button:not(.collapsed)::after {
  transform: rotate(40deg);
}

.ext-faq-area .accordion-body {
  padding: 0 22px 14px;
  font-family: var(--ext-font-secondary);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ext-muted);
}

.ext-faq-area .accordion-body .desc {
  margin: 0;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
}

/* Self-contained collapse (no Bootstrap dependency) */
.ext-faq-area .accordion-collapse {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.32s ease;
}

.ext-faq-area .accordion-collapse.show {
  grid-template-rows: minmax(0, 1fr);
}

.ext-faq-area .accordion-collapse > .accordion-body {
  min-height: 0;
  overflow: hidden;
}

/* Scroll-reveal is the site-wide .ext-reveal system (end of this file). */

/* Responsive FAQ */
@media (max-width: 991px) {
  .ext-faq-ai-brands {
    flex-wrap: wrap;
  }
}

@media (max-width: 575px) {
  .ext-faq-ai-top {
    padding: 24px 20px;
  }
  .ext-faq-ai-bottom {
    padding: 22px 20px 24px;
  }
  .ext-faq-ai-heading {
    font-size: 23px;
  }
  .ext-faq-area .accordion-button {
    padding: 12px 46px 12px 20px;
    font-size: 15px;
  }
  .ext-faq-area .accordion-body {
    padding: 0 20px 20px;
    font-size: 14px;
  }
}

/* ============================================================
   CTA area - one card whose bottom line rotates through client
   results on a seamless vertical loop ("We helped …").
   ============================================================ */
.ext-cta-area {
  margin-top: var(--ext-section-gap);
  margin-bottom: var(--ext-section-gap);
}

.ext-cta-area .ext-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: #ffffff;
  border: 1px solid rgba(17, 19, 21, 0.09);
  border-radius: 24px;
  box-shadow: 0 24px 50px -30px rgba(17, 19, 21, 0.18);
  padding: 40px clamp(28px, 4vw, 56px);
}

.ext-cta-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.ext-cta-kicker {
  display: block;
  font-family: var(--ext-font-secondary);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  font-weight: 500;
  color: var(--ext-muted);
  margin-bottom: 10px;
}

/* One-line viewport; slides scroll up through it.
   --cta-line drives the viewport height, each slide's height, AND the animation
   step, so they can never drift out of sync. */
.ext-cta-rotator {
  --cta-line: 1.85em;
  position: relative;
  overflow: hidden;
  font-family: var(--ext-font-primary);
  font-size: clamp(1.05rem, 3.6vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
  height: var(--cta-line);
}

.ext-cta-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  animation: ext-cta-roll 42s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

/* Every slide is exactly one line tall and vertically centres its content, so
   each result sits at the identical height regardless of logo proportions. */
.ext-cta-slide {
  height: var(--cta-line);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Inline, clickable company logos - uniform height keeps the line consistent */
.ext-cta-logo-link {
  display: inline-flex;
  align-items: center;
  margin: 0 0.3em;
  transition: opacity var(--ext-transition);
}

.ext-cta-logo-link:hover {
  opacity: 0.65;
}

.ext-cta-logo {
  display: block;
  height: 1.05em;
  width: auto;
}

.ext-cta-logo--png {
  height: 1.15em;
}

/* Five slides + a duplicate of the first = six positions. Steps are in
   var(--cta-line) units (one slide) because a translateY percentage would
   resolve against the whole track, not a single slide. The final position
   (duplicate first) matches position 0 so the loop reset is invisible. */
@keyframes ext-cta-roll {
  0%,
  17% {
    transform: translateY(0);
  }
  20%,
  37% {
    transform: translateY(calc(var(--cta-line) * -1));
  }
  40%,
  57% {
    transform: translateY(calc(var(--cta-line) * -2));
  }
  60%,
  77% {
    transform: translateY(calc(var(--cta-line) * -3));
  }
  80%,
  97% {
    transform: translateY(calc(var(--cta-line) * -4));
  }
  100% {
    transform: translateY(calc(var(--cta-line) * -5));
  }
}

/* Yellow pill button */
.ext-cta-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 14px;
  background: var(--ext-accent, #ffc13d);
  color: var(--ext-ink);
  font-family: var(--ext-font-secondary);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    transform var(--ext-transition),
    box-shadow var(--ext-transition);
}

.ext-cta-btn-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--ext-transition);
}

.ext-cta-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 26px -10px rgba(255, 193, 61, 0.7);
}

.ext-cta-btn:hover .ext-cta-btn-arrow {
  transform: translate(2px, -2px);
}

/* Stack the button under the copy on smaller screens. Stacks at 991px (not
   767px) because in the row layout the nowrap rotator line no longer fits
   beside the button below ~900px and gets clipped by its overflow:hidden. */
@media (max-width: 991px) {
  .ext-cta-area .ext-cta-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 30px 24px;
  }
  .ext-cta-btn {
    align-self: stretch;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ext-cta-track {
    animation: none;
  }
}

/* Static (non-rotator) headline inside the CTA card - used by the transactional
   content landing pages, where the inline CTA states one fixed offer rather than
   cycling client results. */
.ext-cta-copy .ext-cta-heading {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(1.05rem, 3.2vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
}
.ext-cta-copy .ext-cta-subline {
  margin: 12px 0 0;
  font-family: var(--ext-font-secondary);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  color: var(--ext-muted);
  max-width: 60ch;
}

/* Transactional content article sits on the white .ext-over-hero panel that
   scrolls up over the pinned hero. Top padding gives the cover / first block
   breathing room off the flat seam. */
.ext-content-article {
  padding-top: clamp(40px, 5vw, 76px);
}

/* Page-scoped tweaks (best-website-development-in-bangalore): extra vertical
   padding on every below-hero section, and a left chevron on the internal
   links. Scoped to --spaced so sibling content pages are unaffected. */
.ext-content-article--spaced .ext-curve-area,
.ext-content-article--spaced .ext-recs {
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(64px, 9vw, 120px);
}
.ext-content-article--spaced .ext-sitemap-links a {
  padding-left: 20px;
}
.ext-content-article--spaced .ext-sitemap-links a::before {
  content: "\203A";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.4;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--ext-accent);
}
.ext-content-article--spaced .ext-sitemap-links a::after {
  left: 20px;
  width: calc(100% - 20px);
}

/* Transactional content-landing hero: a big, simple, centred title with a
   two-line lede below. The title WRAPS (no kinetic stretch) so long location
   names never clip, and the white body meets the dark band on a flat edge (no
   spike curve), same as the careers detail pages. */
/* Shorter dark band than the services/legal hero (which runs ~84vh) - the content
   landing pages lead with content, so the hero is a compact intro strip. */
.ext-services-hero.ext-services-hero--content {
  --ext-services-hero-h: 60vh;
}
/* The services/legal hero centres its content and biases it upward with a big
   bottom pad (lift + 9vh), leaving a tall empty "leg" below the copy. Content
   pages anchor the title + lede to the BOTTOM of the band with only a small
   pad, so they sit bottom-centred just above the white body - no dead space. */
.ext-services-hero.ext-services-hero--content .ext-container {
  justify-content: flex-end;
  padding-bottom: clamp(104px, 13.5vh, 190px);
}
.ext-services-hero.ext-services-hero--content .ext-services-hero-title {
  font-size: clamp(28px, 4.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  /* Wide enough to hold a ~24-char uppercase line, so the title balances onto
     two lines (not three) while staying centred and responsive. */
  max-width: 28ch;
  margin-inline: auto;
  text-wrap: balance;
}
.ext-services-hero--content .ext-services-hero-lede {
  max-width: 720px;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  text-wrap: balance;
}
.ext-services-hero--content + .ext-over-hero::before {
  display: none;
}
/* Home / page-title breadcrumb sitting above the content-landing hero title.
   Light-on-dark so it reads against the dark inverted hero. */
.ext-services-hero-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: clamp(18px, 2.4vw, 30px);
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}
.ext-services-hero-breadcrumb a {
  color: rgba(255, 255, 255, 0.62);
  transition: color var(--ext-transition);
}
.ext-services-hero-breadcrumb a:hover {
  color: #ffffff;
}
.ext-services-hero-breadcrumb span {
  color: rgba(255, 255, 255, 0.3);
}
.ext-services-hero-breadcrumb .ext-services-hero-breadcrumb-current {
  color: rgba(255, 255, 255, 0.62);
}

/* ============================================================
   Impact Highlights - full-bleed black stats band. Sits directly after the (equally dark)
   work band, so its top padding is halved to keep the seam
   inside the continuous #0c0d0f band from becoming a chasm.
   ============================================================ */
.ext-impact-area {
  position: relative;
  width: 100%;
  background: #0c0d0f;
  padding: calc(var(--ext-section-gap) / 2) 0 var(--ext-section-gap);
  margin-bottom: var(--ext-section-gap);
  overflow: hidden;
}

.ext-impact-head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 66px);
}

.ext-impact-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 50px;
  background: #17181b;
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
}

.ext-impact-halo {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: auto;
}

.ext-impact-title {
  margin: 20px 0 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  color: #ffffff;
}

.ext-impact-accent {
  color: var(--ext-accent, #ffc13d);
}

/* Card row (positioning context for the badge) */
.ext-impact-cards {
  position: relative;
}

.ext-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}

/* @property lets the conic angle interpolate, so the highlight can actually
   sweep around the border on hover (a plain custom prop would jump, not glide). */
@property --ext-impact-angle {
  syntax: "<angle>";
  initial-value: 270deg;
  inherits: false;
}

.ext-impact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(126px, 11vw, 158px);
  padding: clamp(18px, 1.6vw, 24px);
  background: #1b1c1f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  overflow: hidden;
}

/* Gradient border: a conic gradient painted only into the 1.5px edge via mask
   compositing. One bright arc rides the border; --ext-impact-angle spins it. */
.ext-impact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--ext-impact-angle),
    rgba(255, 193, 61, 0) 0deg,
    #ffc13d 90deg,
    rgba(255, 193, 61, 0) 180deg,
    rgba(255, 193, 61, 0) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

/* Hover shows ONLY the gradient border - no lift, no shadow, no other changes */
.ext-impact-card:hover::after {
  opacity: 1;
  animation: ext-impact-border-spin 3s linear infinite;
}

@keyframes ext-impact-border-spin {
  to {
    --ext-impact-angle: 630deg;
  }
}

.ext-impact-figures {
  margin-top: 0;
  padding-top: 0;
}

.ext-impact-number {
  display: block;
  font-family: var(--ext-font-primary);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.ext-impact-label {
  margin: 10px 0 0;
  font-family: var(--ext-font-secondary);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.4;
  color: #8b8e95;
}

/* Decorative badge, overlapping the top-right of the last card */
.ext-impact-badge {
  position: absolute;
  top: -34px;
  right: -8px;
  width: clamp(88px, 8vw, 116px);
  transform: rotate(8deg);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
}

.ext-impact-badge img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .ext-impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ext-impact-card {
    min-height: clamp(126px, 22vw, 150px);
  }
  .ext-impact-badge {
    top: -26px;
    width: 92px;
  }
}

@media (max-width: 575px) {
  .ext-impact-grid {
    grid-template-columns: 1fr;
  }
  .ext-impact-card {
    min-height: 0;
  }
  .ext-impact-badge {
    display: none;
  }
}

/* Creative curve slider */
.ext-curve-area {
  --slider-card-width: clamp(140px, 11.8vw, 190px);
  --slider-card-height: clamp(175px, 14.6vw, 230px);
  /* Hover width is deliberately height x 1.5 - the exact 3:2 of the slide
     images. The card rests as a tall portrait crop and widens on hover until
     it matches the image, so the reveal IS the interaction: at full hover the
     whole image is visible with nothing cut off. Keep this in step with
     getCardSizes() in script.js, which mirrors these clamps. */
  --slider-card-hover-width: clamp(263px, 21.9vw, 345px);
  position: relative;
  width: 100%;
  /* No bottom padding: the CTA's margin-top supplies the section gap, and
     the stage already carries ~100px of internal slack below the cards. */
  padding: var(--ext-section-gap) 0 0;
  /* HARD RULE for this component: never clip vertically. A hovered card grows
     sideways AND is magnified by the stage's perspective, so it can reach past
     the section box - it must be allowed to. Only the horizontal axis is
     clipped, to stop the rotating cylinder (wider than the viewport at small
     sizes) from adding a page-level horizontal scrollbar.
     `overflow-x: clip` + `overflow-y: visible` is a legal pair and both keep
     their specified values, unlike hidden + visible where visible would be
     forced to auto and produce a scrollbar. */
  overflow-x: clip;
  overflow-y: visible;
  /* `contain: paint` was clipping to the box exactly like overflow: hidden,
     so removing the overflow alone would have changed nothing. Layout
     containment is kept - it is what the perspective stage actually needs. */
  contain: layout;
  color: #24252c;
  background: #ffffff;
}

.ext-curve-head {
  position: relative;
  z-index: 3;
  /* Hug the content: Space Grotesk runs wider than the reference font, so a
     fixed 760px box wrapped "Meaningful Together" onto two lines. */
  width: fit-content;
  max-width: calc(100% - 40px);
  /* Pull the stage up under the heading, but leave breathing room between
     the button row and the cards (was -78px with the larger heading). */
  margin: 0 auto -36px;
}

.ext-curve-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 32px);
}

.ext-curve-title {
  margin: 0;
  max-width: 100%;
  color: #24252c;
  font-family: var(--ext-font-primary);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.08;
  /* Each phrase stays on one line next to the button; mobile releases this. */
  white-space: nowrap;
}

.ext-curve-title-top {
  margin-bottom: clamp(12px, 1.4vw, 20px);
  text-align: left;
}

.ext-curve-title span {
  display: inline;
}

.ext-curve-button {
  flex: 0 0 auto;
}

.ext-curve-stage {
  position: relative;
  display: flex;
  height: 714px;
  align-items: center;
  gap: 12px;
  padding: 0 var(--ext-site-gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: pan-y;
  user-select: none;
}

.ext-curve-stage::-webkit-scrollbar {
  display: none;
}

.ext-curve-stage.ext-ready {
  justify-content: center;
  padding: 0;
  /* Same rule as the section: clip sideways only. The base rule's
     overflow-y: hidden (needed by the no-GSAP fallback, which scrolls
     horizontally) would otherwise cut the top and bottom off a hovered card. */
  overflow-x: clip;
  overflow-y: visible;
  perspective: 830px;
  transform-style: preserve-3d;
}

.ext-curve-item {
  position: relative;
  display: inline-block;
  flex: 0 0 var(--slider-card-width);
  width: var(--slider-card-width);
  /* Fixed height on purpose: GSAP animates width alone on hover, so the card
     grows sideways and uncovers more of the 3:2 image. Deriving the height
     from the width instead would scale the card uniformly and kill that. */
  height: var(--slider-card-height);
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  background: #d4d8df;
  border: 2px solid transparent;
  border-radius: 16px;
  backface-visibility: hidden;
  flex-shrink: 0;
  transition: border-color 0.25s ease;
  will-change: transform, width;
}

.ext-curve-stage.ext-ready .ext-curve-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.ext-curve-item:hover {
  border-color: var(--ext-accent);
}

.ext-curve-item img,
.ext-curve-demo-card {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.ext-curve-item img {
  z-index: 1;
  object-fit: cover;
}

.ext-curve-demo-card {
  overflow: hidden;
  background:
    radial-gradient(
      78% 100% at 18% 0%,
      rgba(255, 255, 255, 0.09),
      transparent 62%
    ),
    linear-gradient(152deg, #2c3038 0%, #141519 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Externo icon watermark for the bare demo cards (curve slides that have no
   image on top - e.g. services/index.html), matching every other dark card. */
.ext-curve-demo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/brand-icons/ext-icon-white.svg") center / clamp(48px, 22%, 110px)
    auto no-repeat;
  opacity: 0.16;
  pointer-events: none;
}

.ext-curve-item.ext-image-missing img {
  display: none;
}

@media only screen and (max-width: 1919px) {
  .ext-curve-stage {
    height: 430px;
  }
}

@media only screen and (max-width: 1399px) {
  .ext-curve-stage {
    height: 300px;
  }
}

@media only screen and (max-width: 767px) {
  .ext-curve-head {
    width: calc(100% - 24px);
    max-width: 520px;
    margin-bottom: -22px;
  }

  .ext-curve-title {
    font-size: clamp(28px, 7.8vw, 38px);
    line-height: 1.08;
    text-align: center;
    white-space: normal;
  }

  .ext-curve-title span {
    display: block;
  }

  .ext-curve-title-row {
    flex-direction: column-reverse;
    gap: 14px;
  }
}

@media only screen and (max-width: 480px) {
  .ext-curve-head {
    margin-bottom: -10px;
  }
}

@media only screen and (max-width: 380px) {
  .ext-curve-title {
    font-size: 27px;
  }
}

/* ============================================================
   Work / Projects - clickable cards that tilt back in 3D on hover
   and play a preview video over a branded gradient tile.
   ============================================================ */
.ext-work-area {
  width: 100%;
  background: #0c0d0f;
  /* Bottom padding halved: the impact band (same #0c0d0f) follows
     immediately, and the two half-paddings add up to one normal
     section gap inside the continuous dark band. */
  padding: var(--ext-section-gap) 0 calc(var(--ext-section-gap) / 2);
}

.ext-work-head {
  max-width: 640px;
  margin: 0 0 clamp(36px, 4.5vw, 60px);
}

.ext-work-eyebrow {
  position: relative;
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 12px 4px 26px;
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: #17181b;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ext-work-eyebrow::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: var(--ext-accent, #ffc13d);
}

/* Case Studies on the AI-strategy page: swap the boxed pixel label for the
   brand's halo/ring eyebrow, and give the head a touch more width. */
.ext-work-head--wide {
  max-width: 900px;
}

.ext-work-halo-eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
}

.ext-work-title-lg {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.14;
  color: #ffffff;
}
/* Keep the case-studies title on a single line from desktop up; wrap below. */
@media (min-width: 992px) {
  .ext-work-title-lg {
    white-space: nowrap;
  }
}

.ext-work-accent {
  color: var(--ext-accent, #ffc13d);
}

.ext-work-intro {
  margin: 18px 0 0;
  font-family: var(--ext-font-secondary);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.65;
  color: #9a9da3;
}

.ext-work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.2vw, 32px);
}

.ext-work-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #1b1c1f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 14px 14px 22px;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.5s ease,
    border-color 0.5s ease;
  will-change: transform;
}

/* Hover: the card tips back on its bottom edge (top tilts down/away).
   Perspective is per-card (not on the grid) so every card - left, centre,
   right - tilts identically instead of skewing toward a shared vanishing point. */
.ext-work-card:hover,
.ext-work-card:focus-visible {
  transform: perspective(1600px) rotateX(7deg);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 34px 55px -28px rgba(0, 0, 0, 0.75);
  outline: none;
}

.ext-work-media {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  overflow: hidden;
  background: #111214;
}

/* Preview video sits at the BACK, always covering the tile; the cover slides
   away to reveal it (playback started/stopped by JS on hover). */
.ext-work-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Sliding cover: the branded gradient + logo. Slides up on hover to reveal
   the video, then slides back down on leave. */
.ext-work-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

.ext-work-card:hover .ext-work-cover,
.ext-work-card:focus-visible .ext-work-cover {
  transform: translateY(-100%);
}

/* Per-project "generated" gradient tiles behind the logo */
.ext-work-cover--1 {
  background: radial-gradient(
    120% 120% at 20% 0%,
    #fff3d1 0%,
    #ffe1a6 55%,
    #ffd071 100%
  );
}
.ext-work-cover--2 {
  background: radial-gradient(
    120% 120% at 80% 0%,
    #e7eeff 0%,
    #cdd9ff 55%,
    #b4c4ff 100%
  );
}
.ext-work-cover--3 {
  background: radial-gradient(
    120% 120% at 20% 0%,
    #eef1f4 0%,
    #dde2e8 55%,
    #c9d0d8 100%
  );
}
.ext-work-cover--4 {
  background: radial-gradient(
    120% 120% at 80% 10%,
    #e6f7ef 0%,
    #c9ece0 55%,
    #a9dcc9 100%
  );
}
.ext-work-cover--5 {
  background: radial-gradient(
    120% 120% at 25% 0%,
    #fdeef0 0%,
    #f8d7dd 55%,
    #f2bcc6 100%
  );
}
.ext-work-cover--6 {
  background: radial-gradient(
    120% 120% at 75% 0%,
    #efeaff 0%,
    #ddd2fb 55%,
    #c7b6f6 100%
  );
}

/* Faint grid texture over the gradient for depth */
.ext-work-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17, 19, 21, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 19, 21, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(
    80% 80% at 50% 40%,
    #000 40%,
    transparent 100%
  );
  mask-image: radial-gradient(80% 80% at 50% 40%, #000 40%, transparent 100%);
  pointer-events: none;
}

.ext-work-logo {
  position: relative;
  z-index: 1;
  max-width: 52%;
  max-height: 46px;
  width: auto;
  object-fit: contain;
}

.ext-work-logo--png {
  max-height: 52px;
}

.ext-work-wordmark {
  position: relative;
  z-index: 1;
  font-family: var(--ext-font-primary);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ext-ink);
}

.ext-work-body {
  padding: 20px 8px 0;
}

/* Minimal dot-separated tag label - editorial, mirrors the projects page
   (.ext-folio-tags) so service case-study cards read consistently. */
.ext-work-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--ext-font-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.ext-work-tag {
  color: #ffffff;
}

.ext-work-industry {
  color: #9a9da3;
}

/* amber dot separator before the industry label */
.ext-work-industry::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--ext-accent, #ffc13d);
  vertical-align: middle;
}

/* Title row: heading left, circular CTA arrow pinned right (matches projects). */
.ext-work-headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ext-work-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
}

.ext-work-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease;
}

.ext-work-arrow svg {
  width: 18px;
  height: 18px;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ext-work-card:hover .ext-work-arrow,
.ext-work-card:focus-visible .ext-work-arrow {
  background: var(--ext-accent, #ffc13d);
  border-color: var(--ext-accent, #ffc13d);
  color: #111315;
}

.ext-work-card:hover .ext-work-arrow svg,
.ext-work-card:focus-visible .ext-work-arrow svg {
  transform: translate(2px, -2px);
}

.ext-work-desc {
  margin: 10px 0 0;
  font-family: var(--ext-font-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
  color: #9a9da3;
}

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

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

/* ============================================================
   Portfolio grid - LIGHT variant of the work section, used on the
   Projects page (projects/index.html). Same layout, media, hover
   tilt and cover-slide behaviour as .ext-work-* but recoloured for a
   WHITE background: ink text, white cards, readable amber tags. Kept
   as a separate namespace so the homepage dark .ext-work-* band is
   untouched. Hover-video preview reuses the same JS (selectors extended
   to .ext-portfolio-card / .ext-portfolio-video).
   ============================================================ */
.ext-portfolio-area {
  width: 100%;
  background: #ffffff;
  padding: var(--ext-section-gap) 0 calc(var(--ext-section-gap) / 2);
}

.ext-portfolio-head {
  max-width: 640px;
  margin: 0 0 clamp(36px, 4.5vw, 60px);
}

/* Projects header - editorial two-column layout, matching the careers
   "Inside Externo" starting section (.ext-mf) and the contact "Get in touch"
   panel: a floating ring-halo label (shared .ext-plain-eyebrow) sits in a slim
   left column, with the large statement + intro on the right. Calm, no boxes. */
.ext-portfolio-head {
  max-width: none;
  margin: 0 0 clamp(40px, 5vw, 68px);
}

.ext-portfolio-head-grid {
  display: grid;
  grid-template-columns: minmax(220px, 600px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}

.ext-portfolio-head-aside {
  padding-top: 8px;
}

.ext-portfolio-head-aside .ext-plain-eyebrow {
  margin-bottom: 0;
}

.ext-portfolio-head-main {
  width: min(100%, 840px);
}

.ext-portfolio-title-lg {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ext-ink);
}

@media (max-width: 860px) {
  .ext-portfolio-head-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* Highlight = ink text with a hand-drawn amber underline (matches the careers
   "creative energy" .ext-mf-draw treatment), not a colour swap. */
.ext-portfolio-accent {
  position: relative;
  color: var(--ext-ink);
  white-space: nowrap;
}

.ext-portfolio-accent svg {
  position: absolute;
  left: -0.02em;
  right: -0.02em;
  bottom: -0.16em;
  width: 102%;
  height: 0.36em;
  overflow: visible;
  color: var(--ext-accent, #ffc13d);
  pointer-events: none;
}

.ext-portfolio-accent svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
}

.ext-portfolio-intro {
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  max-width: 60ch;
  font-family: var(--ext-font-secondary);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.7;
  color: var(--ext-muted);
}

.ext-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.2vw, 32px);
}

.ext-portfolio-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid rgba(17, 19, 21, 0.09);
  border-radius: 20px;
  padding: 14px 14px 22px;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.5s ease,
    border-color 0.5s ease;
  will-change: transform;
}

.ext-portfolio-card:hover,
.ext-portfolio-card:focus-visible {
  transform: perspective(1600px) rotateX(7deg);
  border-color: rgba(17, 19, 21, 0.16);
  box-shadow: 0 34px 55px -28px rgba(17, 19, 21, 0.28);
  outline: none;
}

.ext-portfolio-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: #f2f3f5;
}

.ext-portfolio-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.ext-portfolio-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

.ext-portfolio-card:hover .ext-portfolio-cover,
.ext-portfolio-card:focus-visible .ext-portfolio-cover {
  transform: translateY(-100%);
}

/* Per-project gradient tiles - each derived from its own logo's colors so the
   card and mark read as one system.
     1 RIDO   - black/graphite wordmark  -> cool light-gray -> graphite
     2 Nythic - royal blue + amber mark  -> periwinkle blue
     3 Jetlog - bright azure blue mark   -> azure blue
     4 Wayfind- navy + orange mark       -> warm orange
     5 Alpha  - black wordmark           -> warm neutral greige
     6 Nila   - pink/rose mark           -> soft rose                          */
.ext-portfolio-cover--1 {
  background: radial-gradient(
    120% 120% at 20% 0%,
    #f6f7f9 0%,
    #dfe2e8 54%,
    #c2c7d0 100%
  );
}
.ext-portfolio-cover--2 {
  background: radial-gradient(
    120% 120% at 80% 0%,
    #eef2ff 0%,
    #d6e0ff 54%,
    #baccff 100%
  );
}
.ext-portfolio-cover--3 {
  background: radial-gradient(
    120% 120% at 20% 0%,
    #e9f1ff 0%,
    #cddfff 54%,
    #a8c8ff 100%
  );
}
.ext-portfolio-cover--4 {
  background: radial-gradient(
    120% 120% at 80% 10%,
    #fff5e9 0%,
    #ffe4c6 54%,
    #ffca92 100%
  );
}
.ext-portfolio-cover--5 {
  background: radial-gradient(
    120% 120% at 25% 0%,
    #f8f7f4 0%,
    #ebe7e0 54%,
    #d7d1c6 100%
  );
}
.ext-portfolio-cover--6 {
  background: radial-gradient(
    120% 120% at 75% 0%,
    #ffeef5 0%,
    #ffd4e3 54%,
    #ffb1cd 100%
  );
}

.ext-portfolio-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17, 19, 21, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 19, 21, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(
    80% 80% at 50% 40%,
    #000 40%,
    transparent 100%
  );
  mask-image: radial-gradient(80% 80% at 50% 40%, #000 40%, transparent 100%);
  pointer-events: none;
}

.ext-portfolio-logo {
  position: relative;
  z-index: 1;
  max-width: 52%;
  max-height: 46px;
  width: auto;
  object-fit: contain;
}

.ext-portfolio-logo--png {
  max-height: 52px;
}

.ext-portfolio-wordmark {
  position: relative;
  z-index: 1;
  font-family: var(--ext-font-primary);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ext-ink);
}

/* ============================================================
   Dark demo theme for the work / portfolio card covers: every card
   tile becomes the site-wide dark placeholder (dark gradient + white
   grid + centred Externo icon), replacing the per-project light brand
   gradient and logo. The hover-slide still reveals the preview video.
   ============================================================ */
.ext-work-cover--1,
.ext-work-cover--2,
.ext-work-cover--3,
.ext-work-cover--4,
.ext-work-cover--5,
.ext-work-cover--6,
.ext-portfolio-cover--1,
.ext-portfolio-cover--2,
.ext-portfolio-cover--3,
.ext-portfolio-cover--4,
.ext-portfolio-cover--5,
.ext-portfolio-cover--6 {
  background:
    radial-gradient(
      78% 100% at 18% 0%,
      rgba(255, 255, 255, 0.09),
      transparent 62%
    ),
    linear-gradient(152deg, #2c3038 0%, #141519 100%);
}
.ext-work-cover::before,
.ext-portfolio-cover::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
.ext-work-logo,
.ext-work-wordmark,
.ext-portfolio-logo,
.ext-portfolio-wordmark {
  display: none;
}
.ext-work-cover::after,
.ext-portfolio-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../images/brand-icons/ext-icon-white.svg") center / clamp(58px, 20%, 120px)
    auto no-repeat;
  opacity: 0.16;
  pointer-events: none;
}
.ext-portfolio-media {
  background: #111214;
}

/* ============================================================
   Live project cards: opt back out of the dark-demo placeholder so
   the real brand logo shows on its own vibrant per-project gradient
   (the inline background on the cover wins over the dark theme). Used
   on the projects index grid and the explore-more carousel so those
   cards read as one system with the service-page work cards.
   ============================================================ */
.ext-portfolio-cover--live .ext-portfolio-logo {
  display: block;
  max-width: 60%;
  max-height: 92px;
  width: auto;
  filter: none;
}
.ext-portfolio-cover--live::after {
  display: none;
}
.ext-portfolio-cover--live::before {
  background-image:
    linear-gradient(rgba(17, 19, 21, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 19, 21, 0.06) 1px, transparent 1px);
}

/* ============================================================
   Photo cover: a full-bleed project screenshot replaces the
   gradient-tile + logo cover. It uses the same sliding layer, so
   on hover the whole image slides up to reveal the preview video
   underneath. The grid overlay (::before) and dark-demo Externo
   icon (::after) are suppressed so only the photo shows. Shared by
   the projects grid, the explore-more carousels and the service-page
   work cards.
   ============================================================ */
.ext-work-cover--photo,
.ext-portfolio-cover--photo {
  padding: 0;
  background: #111214;
}
.ext-work-cover--photo::before,
.ext-work-cover--photo::after,
.ext-portfolio-cover--photo::before,
.ext-portfolio-cover--photo::after {
  display: none;
}
.ext-work-photo,
.ext-portfolio-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.ext-portfolio-body {
  padding: 20px 8px 0;
}

.ext-portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ext-portfolio-tag,
.ext-portfolio-industry {
  font-family: var(--ext-font-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 50px;
  line-height: 1;
}

.ext-portfolio-tag {
  color: #9a6a04;
  background: rgba(255, 193, 61, 0.18);
}

.ext-portfolio-industry {
  color: var(--ext-muted);
  background: rgba(17, 19, 21, 0.05);
}

.ext-portfolio-title {
  margin: 0 0 8px;
  font-family: var(--ext-font-primary);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ext-ink);
}

.ext-portfolio-desc {
  margin: 0 0 16px;
  font-family: var(--ext-font-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ext-muted);
}

.ext-portfolio-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ext-font-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ext-ink);
}

.ext-portfolio-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.4s ease;
}

.ext-portfolio-card:hover .ext-portfolio-link svg {
  transform: translate(3px, -3px);
}

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

@media (max-width: 575px) {
  .ext-portfolio-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Projects index - SHOWCASE layer (projects/index.html only). Scoped to
   .ext-folio-card so the shared .ext-portfolio-card used in the case-study
   "more work" carousels keeps its original look. Clean image (no overlays);
   the CTA arrow lives in the body beside the title, tags are a minimal
   dot-separated label. Hover deepens the shadow only - no lift, no top line.
   Keeps the base cover-slide + hover-video reveal.
   ============================================================ */
.ext-folio-grid {
  gap: clamp(22px, 2.4vw, 34px);
}

.ext-folio-card {
  position: relative;
  padding: 12px 12px 22px;
  border-radius: 22px;
  transition:
    box-shadow 0.5s ease,
    border-color 0.5s ease;
}

/* Hover: shadow only. transform:none overrides the base card's rotateX tilt. */
.ext-folio-card:hover,
.ext-folio-card:focus-visible {
  transform: none;
  border-color: rgba(17, 19, 21, 0.14);
  box-shadow: 0 34px 55px -30px rgba(17, 19, 21, 0.32);
}

.ext-folio-card .ext-portfolio-media {
  aspect-ratio: 16 / 10.5;
  border-radius: 16px;
}

/* --- Body ------------------------------------------------------------ */
.ext-folio-card .ext-portfolio-body {
  padding: 20px 8px 2px;
}

/* Minimal dot-separated tag label - editorial, not pills. */
.ext-folio-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--ext-font-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.ext-folio-tags span {
  color: var(--ext-ink);
}

.ext-folio-tags span + span {
  color: var(--ext-muted);
}

/* amber dot separator between the two labels */
.ext-folio-tags span + span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--ext-accent, #ffc13d);
  vertical-align: middle;
}

/* Title row: heading left, circular CTA arrow pinned right. */
.ext-folio-headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ext-folio-headrow .ext-portfolio-title {
  margin: 0;
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  line-height: 1.2;
}

.ext-folio-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(17, 19, 21, 0.14);
  color: var(--ext-ink);
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ext-folio-arrow svg {
  width: 18px;
  height: 18px;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ext-folio-card:hover .ext-folio-arrow,
.ext-folio-card:focus-visible .ext-folio-arrow {
  background: var(--ext-accent, #ffc13d);
  border-color: var(--ext-accent, #ffc13d);
}

.ext-folio-card:hover .ext-folio-arrow svg,
.ext-folio-card:focus-visible .ext-folio-arrow svg {
  transform: translate(2px, -2px);
}

.ext-folio-card .ext-portfolio-desc {
  margin: 10px 0 0;
}

/* ============================================================
   Blog list - Blogs page (blogs/index.html). LIGHT theme: white cards
   with ink text and yellow accents (hover border + wipe line + underline).
   A big featured card (image | panel) leads a 2-up grid; more cards load
   via JS infinite scroll (up to 9). A floating "View" cursor (JS, GSAP)
   follows the pointer over each image and the native cursor is hidden.
   Hover reveals a "Read article" CTA + wipes an accent underline under
   the title. Hard-coded now; a CMS replaces the cards + POSTS.
   Responsive: featured stacks < 900px; grid → one column < 680px.
   ============================================================ */
.ext-blog-area {
  width: 100%;
  background: #ffffff;
  padding: var(--ext-section-gap) 0 calc(var(--ext-section-gap) / 2);
}

.ext-blog-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}

/* Card shell (white) */
.ext-blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid var(--ext-line, #eceef1);
  box-shadow: 0 18px 40px -34px rgba(17, 19, 21, 0.28);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}

.ext-blog-card:hover {
  border-color: var(--ext-line, #eceef1);
  box-shadow: 0 34px 60px -32px rgba(17, 19, 21, 0.3);
}

/* Media - grey placeholder (a CMS image drops in here later) */
.ext-blog-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(
      78% 100% at 18% 0%,
      rgba(255, 255, 255, 0.09),
      transparent 62%
    ),
    linear-gradient(152deg, #2c3038 0%, #141519 100%);
  text-decoration: none;
}
.ext-blog-media:not(:has(img))::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/brand-icons/ext-icon-white.svg") center / clamp(52px, 16%, 96px)
    auto no-repeat;
  opacity: 0.14;
  pointer-events: none;
}

.ext-blog-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ext-blog-card:hover .ext-blog-media img {
  transform: scale(1.05);
}

/* When the floating "View" cursor is active, hide the native cursor over
   the image so only the yellow bubble shows (JS adds the body class). */
.ext-blog-cursor-on .ext-blog-media {
  cursor: none;
}

/* Panel (white) */
.ext-blog-panel {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2vw, 30px);
  color: var(--ext-ink);
}

.ext-blog-cat {
  position: relative;
  display: inline-block;
  /* room above the text for the halo ring, which now sits on top (like the
     "Get in touch" eyebrow) instead of inline to the left */
  padding-top: 7px;
  font-family: var(--ext-font-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ext-muted);
  /* perspective so the halo ring reads as a 3-D spin on hover */
  perspective: 320px;
}

/* Yellow halo ring marking the tag (replaces the old dot). Idle: a gentle
   float. On card hover: it spins like a halo. */
.ext-blog-ring {
  width: 20px;
  height: auto;
  flex-shrink: 0;
  transform-origin: center;
  animation: ext-blog-ring-float 3s ease-in-out infinite;
}
/* Halo ring sitting above the left start of the text - used by both the blog
   card category labels and the newsletter eyebrow. */
.ext-blog-cat .ext-blog-ring,
.ext-newsletter-eyebrow .ext-blog-ring {
  position: absolute;
  top: 0;
  left: 1px;
}

@keyframes ext-blog-ring-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.ext-blog-card:hover .ext-blog-ring {
  animation: ext-blog-ring-spin 1.1s linear infinite;
}

@keyframes ext-blog-ring-spin {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}

.ext-blog-title {
  margin: 12px 0 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.24;
}

/* Title link with an accent underline that wipes in on card hover */
.ext-blog-title a {
  color: var(--ext-ink);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(
    var(--ext-accent, #ffc13d),
    var(--ext-accent, #ffc13d)
  );
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ext-blog-card:hover .ext-blog-title a {
  background-size: 100% 2px;
}

.ext-blog-excerpt {
  margin: 14px 0 0;
  font-family: var(--ext-font-secondary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ext-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer row: author (left) + hover-revealed CTA (right), pinned to bottom */
.ext-blog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: clamp(18px, 2vw, 24px);
}

.ext-blog-author {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Grey placeholder avatar - no border (a CMS photo drops in later) */
.ext-blog-avatar {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  background:
    radial-gradient(
      78% 100% at 18% 0%,
      rgba(255, 255, 255, 0.09),
      transparent 62%
    ),
    linear-gradient(152deg, #2c3038 0%, #141519 100%);
}
.ext-blog-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ext-blog-avatar:not(:has(img))::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/brand-icons/ext-icon-white.svg") center / 46% auto no-repeat;
  opacity: 0.2;
  pointer-events: none;
}

.ext-blog-byline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ext-blog-name {
  font-family: var(--ext-font-secondary);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ext-ink);
}

.ext-blog-date {
  font-family: var(--ext-font-secondary);
  font-size: 0.82rem;
  color: var(--ext-muted);
}

/* Hover-revealed "Read article" CTA (text-reveal effect) */
.ext-blog-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: var(--ext-font-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ext-ink);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ext-blog-cta svg {
  width: 15px;
  height: 15px;
}

.ext-blog-card:hover .ext-blog-cta {
  opacity: 1;
  transform: translateX(0);
}

/* Featured: full width, image beside the panel */
.ext-blog-card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
}

.ext-blog-card--featured .ext-blog-media {
  /* 0 0 → the image keeps its half; a shrinkable basis let the panel's
     min-content collapse it to a sliver. */
  flex: 0 0 52%;
  aspect-ratio: auto;
  min-height: 460px;
}

.ext-blog-card--featured .ext-blog-panel {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  padding: clamp(30px, 3.6vw, 60px);
}

.ext-blog-card--featured .ext-blog-title {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
}

/* ---- Floating "View" cursor (yellow bubble; JS positions it) ---- */
.ext-blog-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ext-accent, #ffc13d);
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}

/* CSS-only fallback (added by JS when GSAP/reduced-motion is unavailable) */
.ext-blog-cursor--css {
  transform: translate(-50%, -50%) scale(0);
  transition:
    opacity 0.25s ease,
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ext-blog-cursor--css.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Infinite-scroll loader + entrance animation for appended cards */
.ext-blog-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 0 8px;
  font-family: var(--ext-font-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ext-muted);
}

.ext-blog-loader[hidden] {
  display: none;
}

.ext-blog-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(17, 19, 21, 0.12);
  border-top-color: var(--ext-accent, #ffc13d);
  animation: ext-blog-spin 0.7s linear infinite;
}

@keyframes ext-blog-spin {
  to {
    transform: rotate(360deg);
  }
}

.ext-blog-sentinel {
  width: 100%;
  height: 1px;
}

/* Per-card staggered reveal (media → tag → excerpt → author). JS adds
   .ext-blog-anim (hidden) to EVERY card, then .is-in when it scrolls into view,
   so all cards animate the same - the shared [data-ext-reveal] safety net was
   pre-revealing below-fold cards. Titles animate via .ext-title-anim. Only
   added by JS, so no-JS / reduced-motion shows everything. */
.ext-blog-anim .ext-blog-media,
.ext-blog-anim .ext-blog-cat,
.ext-blog-anim .ext-blog-excerpt,
.ext-blog-anim .ext-blog-foot {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.ext-blog-anim .ext-blog-cat {
  transition-delay: 0.12s;
}
.ext-blog-anim .ext-blog-excerpt {
  transition-delay: 0.18s;
}
.ext-blog-anim .ext-blog-foot {
  transition-delay: 0.24s;
}

.ext-blog-anim.is-in .ext-blog-media,
.ext-blog-anim.is-in .ext-blog-cat,
.ext-blog-anim.is-in .ext-blog-excerpt,
.ext-blog-anim.is-in .ext-blog-foot {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .ext-blog-card--featured {
    flex-direction: column;
  }
  .ext-blog-card--featured .ext-blog-media {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .ext-blog-card--featured .ext-blog-panel {
    padding: clamp(22px, 4vw, 34px);
  }
}

@media (max-width: 680px) {
  .ext-blog-list {
    grid-template-columns: 1fr;
  }
  /* No hover on touch - always show the CTA so it isn't lost */
  .ext-blog-cta {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ext-blog-spinner {
    animation-duration: 1.6s;
  }
  .ext-blog-ring,
  .ext-blog-card:hover .ext-blog-ring {
    animation: none;
  }
  /* Never leave card parts hidden if the class is present */
  .ext-blog-anim .ext-blog-media,
  .ext-blog-anim .ext-blog-cat,
  .ext-blog-anim .ext-blog-excerpt,
  .ext-blog-anim .ext-blog-foot {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Site-wide scroll reveal - JS adds .ext-reveal (hidden) to
   [data-ext-reveal] elements, then .ext-in when they enter the
   viewport, and removes both once the fade finishes (so cards
   with their own transition/transform rules - work-card tilt,
   journey steps - get their exact hover behavior back).
   No-JS / no-IntersectionObserver / reduced-motion never get the
   class, so content always shows. Kept at the end of the file so
   this transition wins over per-card transitions during a reveal.
   ============================================================ */
.ext-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  transition-delay: var(--ext-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.ext-reveal.ext-in {
  opacity: 1;
  transform: none;
}

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

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

/* Inner page layouts */
.ext-page-main {
  background: #ffffff;
}

/* ===== Services page hero - immersive dark band under a flush header (same idea
   as the About hero): the header floats over it (logo swaps white via
   data-ext-header-invert), a faint line-grid SVG pulses behind the title, and a
   flipped footer curve peaks up into the black at the base, meeting the white
   section below. ===== */
.ext-services-hero {
  /* Pinned behind the page: the hero stays put while the body (.ext-over-hero)
     scrolls up and over it, led by the curve. The flush header (sticky, z-index 20)
     is TRANSPARENT at the top, so the hero must extend UP under it (negative margin
     = the header's height) to fill behind it - otherwise a white strip shows above
     the hero. */
  --ext-services-hero-lift: clamp(110px, 7.5vw, 130px);
  --ext-services-hero-h: 84vh;
  position: sticky;
  top: 0;
  z-index: 0;
  margin-top: calc(-1 * var(--ext-services-hero-lift));
  /* A touch under a full screen (per the design), so the curve + white body already
     peek at the bottom of the first view, while the hero stays pinned and the body
     scrolls up over it. Content is centred within this height by `.ext-container`. */
  min-height: var(--ext-services-hero-h);
  overflow: hidden;
  background: #050506;
  color: #ffffff;
  text-align: center;
}
/* Faint line-grid SVG behind everything (incl. the header), breathing in and out
   - the requested shimmer/pulse, one layer, just animated opacity. */
.ext-services-hero-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/common/innerpage-bg-lines.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  opacity: 0.5;
  pointer-events: none;
  /* Anchored TOP-centre and filling downward (as in the design); only the bottom
     fades out so the grid never clashes with the curve / white body below. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 70%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  /* Gentle shimmer/breathe (like the earlier pulse) so it feels alive; opacity eases
     within the requested ~0–50% range, never blown out. */
  animation: ext-hero-lines-breathe 6s ease-in-out infinite;
}
@keyframes ext-hero-lines-breathe {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.36;
  }
}
.ext-services-hero .ext-container {
  /* Centre the hero content within the hero's own (visible) height, clearing the
     floating header top and bottom equally so it sits in the middle of the dark
     band - above where the curve/white begins. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: var(--ext-services-hero-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--ext-services-hero-lift);
  /* Extra bottom padding biases the title + description upward, opening more room
     below them before the curve. */
  padding-bottom: calc(var(--ext-services-hero-lift) + 9vh);
}
.ext-services-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}
.ext-services-hero-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(64px, 12vw, 172px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  /* Rendered in all-caps (text stays "Services" for screen readers / SEO). */
  text-transform: uppercase;
  color: #ffffff;
  /* Soft dark halo so the title lifts off the busy grid (background shadow). */
  text-shadow:
    0 6px 34px rgba(0, 0, 0, 0.6),
    0 0 70px rgba(0, 0, 0, 0.45);
}
/* Kinetic "stretch" title: JS splits it into per-letter spans that reveal with a
   staggered vertical unfurl, then stretch UP toward the cursor on hover. Each
   letter is inline-block (so transforms apply) with a bottom origin (so it grows
   upward off the baseline). Fails visible - full opacity by default; JS only hides
   letters when it is actually going to animate them. */
.ext-stretch-title {
  /* Default arrow cursor over the big word (not a text I-beam), and don't let it
     get text-selected while dragging across it. */
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  /* Keep the per-letter roll boxes (and the final letters) on one line. */
  white-space: nowrap;
}
.ext-stretch-letter {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.ext-stretch-space {
  display: inline-block;
  white-space: pre;
}
/* Per-letter rolling reveal: each letter is a masked one-line window
   (.ext-roll-letter) holding a column (.ext-roll-strip) of identical copies
   (.ext-roll-line); JS rolls the columns up with a left→right stagger, then swaps in
   the interactive letters. --ext-roll-h (set by JS) is the measured line height. */
.ext-roll-letter {
  display: inline-block;
  vertical-align: top;
  height: var(--ext-roll-h);
  overflow: hidden;
}
.ext-roll-strip {
  display: block;
  will-change: transform;
}
.ext-roll-line {
  display: block;
  white-space: nowrap;
}

.ext-services-hero-date {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: clamp(14px, 1.8vw, 22px) auto 0;
  padding: 8px 14px;
  color: var(--ext-accent);
  font-family: var(--ext-font-secondary);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 193, 59, 0.12);
  border: 1px solid rgba(255, 193, 59, 0.32);
  border-radius: 999px;
}

.ext-services-hero-lede {
  margin: clamp(16px, 2vw, 26px) auto 0;
  max-width: 640px;
  font-family: var(--ext-font-secondary);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}
/* The body layer that scrolls up OVER the pinned hero. Opaque (white) so it hides
   the hero as it rises; its leading (top) edge is the header curve, so the white
   sheet appears to sweep up into the dark hero, spike-first. Full-bleed width means
   no dark corners beside the curve on ultrawide screens. */
.ext-over-hero {
  position: relative;
  z-index: 1;
  background: #ffffff;
}
.ext-over-hero::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: clamp(120px, 14.5vw, 300px);
  background: url("../images/common/header-top-vector.svg") no-repeat center bottom;
  background-size: 100% 100%;
  transform: translateY(2px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ext-services-hero-lines {
    animation: none;
    opacity: 0.28;
  }
}

.ext-page-hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 84px;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(255, 193, 61, 0.2),
      transparent 30%
    ),
    linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
  border-top: 1px solid rgba(17, 19, 21, 0.08);
  border-bottom: 1px solid rgba(17, 19, 21, 0.08);
}

.ext-page-hero::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(17, 19, 21, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 19, 21, 0.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.ext-page-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: 44px;
  align-items: center;
}

.ext-page-eyebrow,
.ext-section-eyebrow,
.ext-card-eyebrow {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #3b3f44;
  font-family: var(--ext-font-secondary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.ext-page-eyebrow::before,
.ext-section-eyebrow::before,
.ext-card-eyebrow::before {
  display: block;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  content: "";
  background: var(--ext-accent);
}

.ext-page-title {
  max-width: 920px;
  margin: 20px 0 0;
  color: var(--ext-ink);
  font-size: 64px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.98;
}

.ext-page-lede {
  max-width: 760px;
  margin: 26px 0 0;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.ext-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.ext-page-link {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  color: var(--ext-ink);
  font-family: var(--ext-font-secondary);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  background: #ffffff;
  border: 1px solid rgba(17, 19, 21, 0.12);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(17, 19, 21, 0.06);
  transition:
    transform var(--ext-transition),
    border-color var(--ext-transition),
    box-shadow var(--ext-transition);
}

.ext-page-link:hover {
  border-color: rgba(17, 19, 21, 0.28);
  box-shadow: 0 14px 28px rgba(17, 19, 21, 0.08);
  transform: translateY(-1px);
}

.ext-page-link--dark {
  color: #ffffff;
  background:
    radial-gradient(
      62.56% 62.56% at 28.14% -10.42%,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(137.66deg, #40454a 21.13%, #292c2e 80.53%);
  border-color: transparent;
}

.ext-page-visual {
  position: relative;
  display: grid;
  min-height: 320px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 21, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(244, 246, 248, 0.9)),
    radial-gradient(
      circle at 30% 20%,
      rgba(255, 193, 61, 0.32),
      transparent 42%
    );
}

.ext-page-visual::before,
.ext-page-visual::after {
  position: absolute;
  content: "";
  background: var(--ext-accent);
}

.ext-page-visual::before {
  top: 24px;
  right: 24px;
  width: 86px;
  height: 86px;
}

.ext-page-visual::after {
  left: 28px;
  bottom: 28px;
  width: 42px;
  height: 42px;
}

.ext-page-visual img {
  position: relative;
  z-index: 1;
  width: min(48%, 160px);
  height: auto;
  filter: drop-shadow(0 24px 28px rgba(17, 19, 21, 0.14));
}

.ext-page-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.ext-page-stat {
  min-height: 104px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid rgba(17, 19, 21, 0.1);
  border-radius: 8px;
}

.ext-page-stat strong {
  display: block;
  color: var(--ext-ink);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.ext-page-stat span {
  display: block;
  margin-top: 10px;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.ext-page-section {
  padding: 88px 0;
}

.ext-page-section--soft {
  background: #f7f8fa;
  border-top: 1px solid rgba(17, 19, 21, 0.08);
  border-bottom: 1px solid rgba(17, 19, 21, 0.08);
}

.ext-section-head {
  max-width: 860px;
  margin-bottom: 36px;
}

.ext-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.ext-section-head--center .ext-section-eyebrow {
  margin-inline: auto;
}

.ext-section-title {
  margin: 16px 0 0;
  color: var(--ext-ink);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.08;
}

.ext-section-copy {
  margin: 18px 0 0;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.56;
}

.ext-page-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 42px;
  align-items: start;
}

.ext-copy-block {
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.66;
}

.ext-copy-block p {
  margin: 0 0 18px;
}

.ext-copy-block p:last-child {
  margin-bottom: 0;
}

.ext-card-grid,
.ext-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.ext-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ext-card,
.ext-link-card,
.ext-form-panel,
.ext-legal-panel {
  background: #ffffff;
  border: 1px solid rgba(17, 19, 21, 0.1);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(17, 19, 21, 0.04);
}

.ext-card,
.ext-link-card {
  padding: 26px;
}

.ext-card h2,
.ext-card h3,
.ext-link-card h2,
.ext-link-card h3 {
  margin: 14px 0 0;
  color: var(--ext-ink);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.18;
}

.ext-card p,
.ext-link-card p {
  margin: 14px 0 0;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
}

.ext-card ul,
.ext-legal-article ul {
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.ext-card li,
.ext-legal-article li {
  position: relative;
  padding-left: 20px;
  margin-top: 10px;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.ext-card li::before,
.ext-legal-article li::before {
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 7px;
  height: 7px;
  content: "";
  background: var(--ext-accent);
  transform: translateY(-50%);
}

.ext-card-number {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--ext-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  background: var(--ext-accent);
  border-radius: 8px;
}

.ext-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  margin: -26px -26px 22px;
  overflow: hidden;
  background: #f1f3f5;
  border-bottom: 1px solid rgba(17, 19, 21, 0.08);
}

.ext-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ext-step-list {
  display: grid;
  gap: 14px;
  counter-reset: ext-step;
}

.ext-step {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 22px;
  background: #ffffff;
  border: 1px solid rgba(17, 19, 21, 0.1);
  border-radius: 8px;
  counter-increment: ext-step;
}

.ext-step::before {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  content: counter(ext-step, decimal-leading-zero);
  color: var(--ext-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  background: var(--ext-accent);
  border-radius: 8px;
}

.ext-step h3 {
  margin: 0;
  color: var(--ext-ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.ext-step p {
  margin: 9px 0 0;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
}

.ext-link-card {
  display: flex;
  min-height: 188px;
  flex-direction: column;
  justify-content: space-between;
  transition:
    border-color var(--ext-transition),
    transform var(--ext-transition),
    box-shadow var(--ext-transition);
}

.ext-link-card:hover {
  border-color: rgba(17, 19, 21, 0.24);
  box-shadow: 0 16px 34px rgba(17, 19, 21, 0.08);
  transform: translateY(-2px);
}

.ext-link-card span {
  display: inline-flex;
  margin-top: 22px;
  color: var(--ext-ink);
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.ext-note-box {
  padding: 26px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 193, 61, 0.18),
      rgba(255, 255, 255, 0.96)
    ),
    #ffffff;
  border: 1px solid rgba(17, 19, 21, 0.1);
  border-radius: 8px;
}

.ext-note-box h2,
.ext-note-box h3 {
  margin: 0;
  color: var(--ext-ink);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.18;
}

.ext-note-box p {
  margin: 14px 0 0;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
}

.ext-legal-wrap {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.ext-legal-panel {
  position: sticky;
  top: 24px;
  padding: 24px;
}

.ext-legal-panel h2 {
  margin: 0 0 16px;
  color: var(--ext-ink);
  font-size: 20px;
  font-weight: 600;
}

.ext-legal-panel a {
  display: block;
  padding: 10px 0;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  border-top: 1px solid rgba(17, 19, 21, 0.08);
}

.ext-legal-article {
  padding: 44px;
  background: #ffffff;
  border: 1px solid rgba(17, 19, 21, 0.1);
  border-radius: 8px;
}

.ext-legal-article h2 {
  margin: 38px 0 12px;
  color: var(--ext-ink);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.18;
}

.ext-legal-article h2:first-child {
  margin-top: 0;
}

.ext-legal-article p {
  margin: 0 0 16px;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.68;
}

.ext-legal-updated {
  margin: 16px 0 0;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: 15px;
  font-weight: 800;
}

/* ===== Single-column legal document (terms page) - last-updated, intro,
   a "Contents" box of internal anchor links, then sections with an accent
   underline + bullet lists. Anchor links smooth-scroll via Lenis (script.js);
   scroll-margin-top clears the sticky header. ===== */
/* Terms page reuses the pinned services-hero; the long title needs a much
   smaller size than the single-word "Services"/"Blogs" heroes. */
.ext-services-hero--legal .ext-services-hero-title {
  font-size: clamp(30px, 6vw, 84px);
  letter-spacing: -0.01em;
}

/* Listing pages (Services, Blogs, Work): smaller hero title than the default
   big stretch heading, matching the legal pages' scale. */
.ext-services-hero--compact .ext-services-hero-title {
  font-size: clamp(30px, 6vw, 84px);
  letter-spacing: -0.01em;
}

/* Legal document sits on the white .ext-over-hero body, full content width. */
.ext-legal-section {
  padding: clamp(64px, 9vw, 130px) 0 var(--ext-section-gap);
}

.ext-legal-doc {
  max-width: 1400px;
  margin: 0 auto;
}

.ext-legal-doc.ext-legal-native {
  --ext-legal-copy-width: min(100%, 1260px);
  max-width: 1400px;
}

.ext-legal-native
  > p:first-child:not(.ext-legal-updated):not(.ext-legal-intro) {
  margin: 0 0 18px;
  color: var(--ext-accent);
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.45;
  text-transform: uppercase;
}

.ext-legal-native > p:not(.ext-legal-updated):not(.ext-legal-intro),
.ext-legal-native > h2,
.ext-legal-native > h3,
.ext-legal-native > h4,
.ext-legal-native > ul {
  max-width: var(--ext-legal-copy-width);
}

.ext-legal-native .ext-legal-toc {
  max-width: none;
}

.ext-legal-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 108px;
}

.ext-legal-native h2 {
  margin: clamp(38px, 5vw, 58px) 0 16px;
  padding-top: clamp(30px, 4vw, 42px);
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.14;
  border-top: 1px solid rgba(17, 19, 21, 0.08);
  scroll-margin-top: 108px;
}

.ext-legal-native h2::after,
.ext-legal-native h3[id]::after,
.ext-legal-native h4[id]::after {
  content: "";
  display: block;
  width: clamp(40px, 4.5vw, 60px);
  height: 4px;
  margin-top: 8px;
  background: var(--ext-accent);
  border-radius: 999px;
}

.ext-legal-native h3,
.ext-legal-native h4,
.ext-legal-native p[id] {
  scroll-margin-top: 108px;
}

.ext-legal-native h3[id],
.ext-legal-native h4[id],
.ext-legal-native p[id] {
  margin-top: clamp(34px, 4.5vw, 52px);
  padding-top: clamp(24px, 3.5vw, 36px);
  border-top: 1px solid rgba(17, 19, 21, 0.08);
}

/* Only the document's first section heading (a direct child) - NOT the nested
   .ext-legal-close-title, which must keep its own zero top margin. */
.ext-legal-native > h2:first-of-type {
  margin-top: clamp(32px, 4vw, 46px);
}

.ext-legal-native h3,
.ext-legal-native h4 {
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-weight: 600;
  line-height: 1.22;
}

.ext-legal-native h3 {
  margin: 28px 0 12px;
  font-size: clamp(20px, 2.1vw, 25px);
}

.ext-legal-native h4 {
  margin: 24px 0 10px;
  font-size: clamp(17px, 1.7vw, 20px);
}

.ext-legal-native p,
.ext-legal-native li {
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 400;
  line-height: 1.7;
}

.ext-legal-native p {
  margin: 0 0 14px;
}

.ext-legal-native ul {
  margin: 0 0 24px;
  padding-left: 1.25rem;
}

.ext-legal-native ul ul {
  margin-top: 8px;
  margin-bottom: 10px;
}

.ext-legal-native li {
  margin: 0 0 10px;
  padding-left: 4px;
}

.ext-legal-native li::marker {
  color: var(--ext-accent);
}

.ext-legal-native li > p {
  margin: 0 0 8px;
}

.ext-legal-native li > p:last-child {
  margin-bottom: 0;
}

.ext-legal-native strong {
  color: var(--ext-ink);
  font-weight: 700;
}

.ext-legal-native a {
  color: var(--ext-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--ext-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  background: rgba(255, 193, 61, 0.12);
  padding: 1px 6px;
  border-radius: 6px;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition:
    background-color var(--ext-transition),
    text-decoration-color var(--ext-transition);
}

.ext-legal-native a:hover,
.ext-legal-native a:focus-visible {
  background: var(--ext-accent);
  text-decoration-color: transparent;
  outline: none;
}

@media (max-width: 560px) {
  .ext-legal-doc.ext-legal-native {
    max-width: 100%;
  }

  .ext-legal-native h2 {
    scroll-margin-top: 92px;
  }

  .ext-legal-native h3,
  .ext-legal-native h4,
  .ext-legal-native p[id] {
    scroll-margin-top: 92px;
  }

  .ext-legal-anchor {
    scroll-margin-top: 92px;
  }

  .ext-legal-native ul {
    padding-left: 1.05rem;
  }
}

.ext-legal-doc .ext-legal-updated {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 0 0 20px;
  padding: 8px 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ext-accent);
  background: rgba(255, 193, 59, 0.12);
  border: 1px solid rgba(255, 193, 59, 0.34);
  border-radius: 999px;
}

.ext-legal-intro {
  margin: 0 0 34px;
  color: var(--ext-ink);
  font-family: var(--ext-font-secondary);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.6;
}

.ext-legal-toc {
  margin: 0 0 24px;
  padding: clamp(34px, 4vw, 48px) clamp(22px, 3vw, 32px);
  background: rgba(17, 19, 21, 0.035);
  border: 1px solid rgba(17, 19, 21, 0.08);
  border-radius: 18px;
}

.ext-legal-toc-label {
  margin: 0 0 18px;
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ext-muted);
}

.ext-legal-toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ext-legal-toc-grid a {
  display: inline-flex;
  gap: 8px;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  transition: color var(--ext-transition);
}

.ext-legal-native .ext-legal-toc-grid a,
.ext-legal-native .ext-legal-toc-grid a:hover,
.ext-legal-native .ext-legal-toc-grid a:focus-visible {
  text-decoration: none;
  text-decoration-color: transparent;
  background: transparent;
  padding: 0;
  border-radius: 0;
  outline: none;
}

.ext-legal-toc-grid a:hover,
.ext-legal-toc-grid a:focus-visible {
  color: var(--ext-ink);
}

.ext-legal-toc-num {
  flex-shrink: 0;
  color: var(--ext-ink);
  font-weight: 700;
  transition: color var(--ext-transition);
}

.ext-legal-toc-grid a:hover .ext-legal-toc-num,
.ext-legal-toc-grid a:focus-visible .ext-legal-toc-num {
  color: var(--ext-ink);
}

.ext-legal-toc-grid li {
  margin: 0;
  padding-left: 0;
}

.ext-legal-block {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(17, 19, 21, 0.08);
  scroll-margin-top: 108px;
}

.ext-legal-block:first-of-type {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

/* Closing "Changes & Contact" - dark sign-off banner ending the page. */
.ext-legal-close {
  position: relative;
  display: grid;
  /* Text fills the left; the contact block gets a slightly wider fixed track (a
     bit more than its content) so the right-hand box has more presence. */
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: clamp(32px, 5vw, 72px);
  /* Top-align both sides so the heading and the contact label start on the same
     line - no empty gap above the left content. */
  align-items: start;
  margin-top: clamp(44px, 5vw, 56px);
  /* Span the full doc width, identical to the top intro + Contents box
     (both max-width: none), so all three sections line up edge to edge. */
  max-width: none;
  padding: clamp(30px, 4vw, 48px);
  background: var(--ext-ink);
  border: 0;
  border-radius: 24px;
}

.ext-legal-card-anchor {
  position: absolute;
  top: 0;
  left: 0;
  scroll-margin-top: 108px;
}

.ext-legal-close-eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-family: var(--ext-font-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ext-accent);
}

/* Scoped under .ext-legal-close so these component styles beat the document-body
   rules (.ext-legal-native h2 / a), which are more specific than a bare single
   class and were painting the title dark-on-dark and turning the CTA links into
   underlined document links. */
.ext-legal-close .ext-legal-close-title {
  margin: 0 0 14px;
  padding-top: 0;
  color: #ffffff;
  font-family: var(--ext-font-primary);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  border-top: 0;
}

.ext-legal-native .ext-legal-close-title::after {
  content: none;
}

.ext-legal-close .ext-legal-close-note {
  margin: 0;
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.65;
}

/* Right-hand contact stack. */
.ext-legal-close-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  padding-left: clamp(0px, 3vw, 40px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.ext-legal-close .ext-legal-close-q {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 500;
}

.ext-legal-close .ext-legal-close-mail {
  margin-bottom: 22px;
  padding: 0;
  color: var(--ext-accent);
  font-family: var(--ext-font-primary);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  border-radius: 0;
  transition: opacity var(--ext-transition);
}

.ext-legal-close .ext-legal-close-mail:hover,
.ext-legal-close .ext-legal-close-mail:focus-visible {
  background: transparent;
  text-decoration: none;
  opacity: 0.82;
}

.ext-legal-close .ext-legal-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  color: var(--ext-ink);
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  background: #ffffff;
  border-radius: 12px;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
  transition:
    transform var(--ext-transition),
    background-color var(--ext-transition);
}

.ext-legal-close-btn svg {
  width: 16px;
  height: 16px;
}

.ext-legal-close .ext-legal-close-btn:hover,
.ext-legal-close .ext-legal-close-btn:focus-visible {
  transform: translateY(-1px);
  background: var(--ext-accent);
}

@media (max-width: 768px) {
  .ext-legal-close {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ext-legal-close-cta {
    padding-left: 0;
    padding-top: 26px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .ext-legal-card-anchor {
    scroll-margin-top: 92px;
  }
}

.ext-legal-heading {
  margin: 0;
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.15;
}

.ext-legal-rule {
  display: block;
  width: 52px;
  height: 3px;
  margin: 14px 0 22px;
  background: var(--ext-accent);
  border-radius: 3px;
}

.ext-legal-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ext-legal-list li {
  position: relative;
  padding-left: 24px;
  margin: 0 0 14px;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 400;
  line-height: 1.62;
}

.ext-legal-list li:last-child {
  margin-bottom: 0;
}

.ext-legal-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 7px;
  height: 7px;
  background: var(--ext-accent);
  transform: translateY(-50%);
}

.ext-legal-inline-link {
  color: var(--ext-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--ext-accent);
  text-underline-offset: 3px;
}

.ext-legal-inline-link:hover {
  color: #9a6a04;
}

.ext-form-panel {
  padding: 30px;
}

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

.ext-field {
  display: grid;
  gap: 8px;
}

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

.ext-field label {
  color: var(--ext-ink);
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.ext-field input,
.ext-field select,
.ext-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  color: var(--ext-ink);
  font: 600 16px/1.35 var(--ext-font-secondary);
  background: #f7f8fa;
  border: 1px solid rgba(17, 19, 21, 0.12);
  border-radius: 8px;
  outline: none;
  transition:
    background-color var(--ext-transition),
    border-color var(--ext-transition),
    box-shadow var(--ext-transition);
}

.ext-field textarea {
  min-height: 150px;
  resize: vertical;
}

.ext-field input:focus,
.ext-field select:focus,
.ext-field textarea:focus {
  background: #ffffff;
  border-color: rgba(17, 19, 21, 0.4);
  box-shadow: 0 0 0 4px rgba(255, 193, 61, 0.2);
}

.ext-form-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  color: #ffffff;
  font-family: var(--ext-font-secondary);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  background:
    radial-gradient(
      62.56% 62.56% at 28.14% -10.42%,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(137.66deg, #40454a 21.13%, #292c2e 80.53%);
  border: 0;
  border-radius: 8px;
}

/* Sitemap - full-width category rows, each a title + count then a link grid. */
.ext-sitemap {
  display: flex;
  flex-direction: column;
}

.ext-sitemap-group {
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-top: 1px solid rgba(17, 19, 21, 0.1);
}

.ext-sitemap-group:first-child {
  padding-top: 0;
  border-top: 0;
}

.ext-sitemap-group:last-child {
  padding-bottom: 0;
}

.ext-sitemap-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.ext-sitemap-title {
  margin: 0;
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ext-sitemap-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  font-family: var(--ext-font-secondary);
  font-size: 12px;
  font-weight: 700;
  color: var(--ext-ink);
  background: var(--ext-accent);
  border-radius: 999px;
}

.ext-sitemap-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 32px;
}

.ext-sitemap-links a {
  position: relative;
  width: max-content;
  max-width: 100%;
  color: var(--ext-muted);
  font-family: var(--ext-font-secondary);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--ext-transition);
}

.ext-sitemap-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--ext-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ext-transition);
}

.ext-sitemap-links a:hover {
  color: var(--ext-ink);
}

.ext-sitemap-links a:hover::after {
  transform: scaleX(1);
}

@media (max-width: 900px) {
  .ext-sitemap-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ext-sitemap-links {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .ext-page-hero-inner,
  .ext-page-split,
  .ext-legal-wrap {
    grid-template-columns: 1fr;
  }

  .ext-page-visual {
    min-height: 260px;
  }

  .ext-card-grid,
  .ext-link-grid,
  .ext-card-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ext-legal-panel {
    position: static;
  }
}

@media (max-width: 767px) {
  .ext-page-hero {
    padding: 64px 0 58px;
  }

  .ext-page-hero-inner {
    gap: 30px;
  }

  .ext-page-title {
    font-size: 42px;
    line-height: 1.04;
  }

  .ext-page-lede {
    font-size: 17px;
  }

  .ext-page-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ext-page-link {
    width: 100%;
  }

  .ext-page-stat-grid,
  .ext-form-grid,
  .ext-card-grid,
  .ext-link-grid,
  .ext-card-grid--three {
    grid-template-columns: 1fr;
  }

  .ext-page-section {
    padding: 64px 0;
  }

  .ext-section-title {
    font-size: 34px;
  }

  .ext-card,
  .ext-link-card,
  .ext-form-panel {
    padding: 22px;
  }

  .ext-card-media {
    margin: -22px -22px 20px;
  }

  .ext-step {
    grid-template-columns: 1fr;
  }

  .ext-legal-article {
    padding: 28px 22px;
  }

  .ext-legal-article h2 {
    font-size: 24px;
  }
}

/* ============================================================
   ABOUT US PAGE
   Self-contained ext- components (no Bootstrap/odometer/wow).
   Reuses: .ext-container, data-ext-reveal, .ext-title-anim,
   .ext-impact-number count-up, .ext-impact-accent, --ext-section-gap.
   ============================================================ */

/* ---- Hero (unique main section) ---- */
.ext-about-hero {
  /* one shared cell size drives BOTH the line grid and the pixel tiles, so
     the tiles always fill grid squares exactly */
  --ext-grid-cell: clamp(44px, 4.6vw, 68px);
  position: relative;
  /* overflow visible so the decorative background can extend UP behind the
     sticky header - the header + hero then read as one immersive block. */
  overflow: visible;
  background: transparent;
  padding: clamp(52px, 5.5vw, 80px) 0 clamp(48px, 5.5vw, 80px);
}

/* Immersive background layer - extends above the hero (behind the header) so
   the top of the page isn't a plain white band. Clean white + faint grid up
   top; the bottom "wash" is painted by the pixel-dissolve tiles (script.js),
   with only a short smooth underlay beneath them for depth. */
.ext-about-hero-bg {
  --ext-hero-headroom: 150px;
  position: absolute;
  top: calc(-1 * var(--ext-hero-headroom));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(255, 193, 61, 0.2) 0%, transparent 30%),
    #ffffff;
}

/* pointer spotlight - a warm glow follows the cursor across the grid (set via
   --ext-spot-x/y from script.js); fades out when the pointer leaves the hero */
.ext-about-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* glow above tiles + grid lines */
  background: radial-gradient(
    190px circle at var(--ext-spot-x, 50%) var(--ext-spot-y, 40%),
    rgba(255, 193, 61, 0.2),
    transparent 72%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
}

.ext-about-hero-bg.ext-spot-on::after {
  opacity: 1;
}

/* Pixel-dissolve - script.js fills this layer with one <span> tile per grid
   cell (sized from the SAME --ext-grid-cell as the line grid, so they align
   perfectly). Tiles only light up in the LOWER portion of the hero, denser
   toward the base - together they form a pixelated version of the yellow
   bottom wash that dissolves upward into the clean grid. Every few seconds
   each tile re-rolls against its row's density and the change sweeps upward
   via per-tile transition-delays, so the wash gently shimmers. */
.ext-about-hero-mosaic {
  position: absolute;
  inset: 0;
  z-index: 0; /* under the grid lines (::before) and spotlight (::after) */
  display: grid;
}

.ext-about-hero-mosaic span {
  transition: background-color 900ms ease;
}

.ext-about-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Ghost watermark - huge outlined "Externo" behind the title. Fill is
   transparent; only a whisper of ink stroke, so it adds editorial depth to the
   white expanse without competing with the content. z-index -1 keeps it under
   the title/lead but still above the bg layer (grid + pixel wash). */
.ext-about-hero-watermark {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  font-family: var(--ext-font-primary);
  font-size: clamp(150px, 21vw, 310px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(17, 19, 21, 0.06);
  pointer-events: none;
  user-select: none;
}

.ext-about-hero-title {
  position: relative; /* anchors the halo + sparks */
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(44px, 6.8vw, 92px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  /* one smooth gradient across the whole "About Us" (was two separate word
     colours that read as different text) */
  background: linear-gradient(100deg, #63676e 0%, #17191d 78%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Brand halo floating above the title's "A" - the same signature ring the logo
   wears over its "e". Sized in em so it scales with the title; down-only dip
   (never rises above rest), matching the eyebrow halos. */
.ext-about-hero-halo {
  position: absolute;
  top: -0.2em;
  left: 0.34em;
  width: 0.58em;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 0.06em 0.14em rgba(255, 193, 61, 0.5));
  animation: ext-about-halo-dip 3.4s ease-in-out infinite;
}

@keyframes ext-about-halo-dip {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(0.06em);
  }
}

/* Pixel sparks - tiny yellow squares breaking off the end of the title and
   drifting up, tying the headline to the pixel wash below. */
.ext-about-hero-sparks {
  position: absolute;
  top: -0.08em;
  right: -0.42em;
  width: 0.4em;
  height: 0.5em;
}

.ext-about-hero-sparks i {
  position: absolute;
  display: block;
  background: var(--ext-accent);
  opacity: 0;
  animation: ext-about-spark 3s ease-in-out infinite;
}

.ext-about-hero-sparks i:nth-child(1) {
  width: 0.09em;
  height: 0.09em;
  left: 0;
  bottom: 0;
}

.ext-about-hero-sparks i:nth-child(2) {
  width: 0.07em;
  height: 0.07em;
  left: 0.17em;
  bottom: 0.15em;
  animation-delay: 1s;
}

.ext-about-hero-sparks i:nth-child(3) {
  width: 0.05em;
  height: 0.05em;
  left: 0.06em;
  bottom: 0.3em;
  animation-delay: 2s;
}

@keyframes ext-about-spark {
  0% {
    transform: translateY(0.1em);
    opacity: 0;
  }
  30% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.55;
  }
  100% {
    transform: translateY(-0.28em);
    opacity: 0;
  }
}

/* the watermark is wider than small screens - hide it before it can overflow */
@media (max-width: 767px) {
  .ext-about-hero-watermark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ext-about-hero-halo {
    animation: none;
  }
  .ext-about-hero-sparks i {
    animation: none;
    opacity: 0.4;
  }
}

.ext-about-hero-lead {
  /* small supporting line - width + size tuned to land at 2 lines on desktop */
  max-width: 700px;
  margin: clamp(16px, 2vw, 24px) auto 0;
  font-family: var(--ext-font-secondary);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.65;
  color: var(--ext-muted);
}

@media (prefers-reduced-motion: reduce) {
  /* static mosaic: tiles get one random deal from JS (no interval, no sweep) */
  .ext-about-hero-mosaic span {
    transition: none;
  }
}

/* ---- Intro (badge + big heading + brand card + paragraph) ---- */
.ext-about-video-hero {
  --ext-about-video-header-lift: clamp(100px, 7vw, 122px);
  --ext-about-video-start-height: 95vh;
  --ext-about-video-end-width: 88.8%;
  --ext-about-video-end-height: 95vh;
  --ext-about-video-end-radius: clamp(22px, 2.8vw, 54px);
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--ext-about-video-header-lift));
  overflow-x: clip;
  background: #ffffff;
}

.ext-about-video-hero.is-gsap-ready {
  min-height: calc(
    var(--ext-about-video-start-height) + clamp(620px, 96vh, 1040px)
  );
  overflow-y: visible;
}

.ext-about-video-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: var(--ext-about-video-start-height);
  margin-inline: auto;
  overflow: hidden;
  background: #030712;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.ext-about-video-hero.is-gsap-ready .ext-about-video-frame {
  position: sticky;
  top: 0;
  will-change: width, height, border-radius;
}

.ext-about-video-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  will-change: transform;
}

/* ---- Floating Video Sound Pill (Bottom Right - Native Glass aesthetic) ---- */
.ext-about-video-sound {
  position: absolute;
  bottom: clamp(20px, 3.2vw, 36px);
  right: clamp(20px, 3.2vw, 36px);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 18px 5px 5px;
  background: rgba(14, 16, 20, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  color: #ffffff;
  font-family: var(--ext-font-primary);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, padding 0.35s cubic-bezier(0.16, 1, 0.3, 1), gap 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ext-about-video-sound:hover,
.ext-about-video-sound:focus-visible {
  background: rgba(22, 26, 33, 0.78);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 255, 255, 0.06);
}

.ext-about-video-sound:active {
  transform: translateY(0) scale(0.98);
}

.ext-about-video-sound:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Glass Circular Badge */
.ext-about-sound-badge {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease;
}

.ext-about-video-sound:hover .ext-about-sound-badge,
.ext-about-video-sound:focus-visible .ext-about-sound-badge {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

/* Icon visibility */
.ext-about-sound-icon-off,
.ext-about-sound-icon-on {
  width: 18px;
  height: 18px;
  display: block;
  stroke: #ffffff;
}

.ext-about-sound-icon-on {
  display: none;
}

/* Single-line Text Title (Visible by default in muted state) */
.ext-about-sound-title {
  max-width: 150px;
  opacity: 1;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Unmuted / Active State: Collapse text when NOT hovering, expand on hover */
.ext-about-video-sound.is-unmuted {
  gap: 0;
  padding: 5px;
  background: rgba(14, 16, 20, 0.72);
  border-color: rgba(255, 255, 255, 0.28);
}

.ext-about-video-sound.is-unmuted .ext-about-sound-badge {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.45);
}

.ext-about-video-sound.is-unmuted .ext-about-sound-icon-off {
  display: none;
}

.ext-about-video-sound.is-unmuted .ext-about-sound-icon-on {
  display: block;
}

/* Hide "Sound on" text when unmuted unless hovering */
.ext-about-video-sound.is-unmuted .ext-about-sound-title {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
}

/* Expand pill and reveal "Sound on" text on hover / focus when unmuted */
.ext-about-video-sound.is-unmuted:hover,
.ext-about-video-sound.is-unmuted:focus-visible {
  gap: 10px;
  padding-right: 18px;
}

.ext-about-video-sound.is-unmuted:hover .ext-about-sound-title,
.ext-about-video-sound.is-unmuted:focus-visible .ext-about-sound-title {
  max-width: 150px;
  opacity: 1;
  pointer-events: auto;
}

/* Animated sound wave bars when unmuted */
.ext-about-video-sound.is-unmuted .sound-wave-1 {
  animation: extWavePulse 1.2s infinite ease-in-out alternate;
}
.ext-about-video-sound.is-unmuted .sound-wave-2 {
  animation: extWavePulse 1.2s infinite ease-in-out alternate 0.3s;
}

@keyframes extWavePulse {
  0% {
    opacity: 0.35;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ext-about-video-hero {
    margin-top: 0;
  }

  .ext-about-video-frame {
    height: var(--ext-about-video-start-height);
  }

  .ext-about-video-media {
    will-change: auto;
  }
}

@media only screen and (max-width: 767px) {
  .ext-about-video-hero {
    --ext-about-video-start-height: 95vh;
    --ext-about-video-end-width: calc(100% - 32px);
    --ext-about-video-end-height: 95vh;
    --ext-about-video-end-radius: 26px;
  }
}

.ext-about-intro {
  background: #ffffff;
  /* roomy y-axis: breathing space below the hero band and before the dark band */
  padding-top: clamp(104px, 10.5vw, 168px);
  padding-bottom: clamp(148px, 13.5vw, 212px);
}

/* Bare eyebrow (no pill) - plain dark label with the yellow halo above the "A",
   matching the design and the other eyebrows on the page. */
.ext-about-pill {
  position: relative;
  display: inline-block;
  margin-bottom: 22px;
  font-family: var(--ext-font-primary);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #16181c;
}

.ext-about-pill .ext-about-eyebrow-halo {
  top: -7px;
  left: 9px;
  width: 20px;
}

.ext-about-intro-title {
  margin: 0;
  /* smaller type than before; width widened to match so it still lands ~4 lines.
     Uses the shared letter-flip reveal (.ext-title-anim): SplitText flips each
     char up (rotateX) in reading order as the heading scrolls in - same effect
     as the other section headings, not the old word-fill. */
  max-width: 1120px;
  font-family: var(--ext-font-primary);
  font-size: clamp(23px, 2.9vw, 39px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
}

.ext-about-intro-title strong {
  font-weight: 700;
}

.ext-about-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(36px, 4.5vw, 60px);
}

/* Two boxes: a yellow sticker box (left) and a narrow white logo column (right).
   The logo column is a vertical CONVEYOR - each white box holds one logo and the
   stack scrolls up continuously (the boxes move, not a logo inside a fixed box).
   The viewport is 1.5 boxes tall, so you see 1/4 box + one full box + 1/4 box. */
.ext-about-brand-card {
  --ext-logo-box: clamp(104px, 11vw, 130px); /* the white logo boxes */
  --ext-logo-gap: clamp(7px, 0.9vw, 10px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; /* centers the sticker in the space left of the reel */
  justify-self: start;
  width: 100%;
  max-width: clamp(330px, 37vw, 456px);
  min-height: clamp(164px, 17.5vw, 214px);
  padding-left: clamp(24px, 3vw, 40px);
  padding-right: calc(var(--ext-logo-box) + clamp(24px, 2.6vw, 44px));
  background: var(--ext-accent);
  border-radius: clamp(14px, 1.6vw, 20px);
  overflow: hidden; /* keep the scrolling logo column INSIDE the card */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 20px 44px rgba(168, 103, 0, 0.18);
}

/* EXT sticker - sits on the left of the yellow box. */
.ext-about-brand-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.ext-about-brand-icon img {
  /* concrete height (not a %, which can blow the SVG up to its intrinsic ~410px) */
  height: clamp(74px, 7.8vw, 102px);
  width: auto;
  display: block;
}

/* The logo column: narrow clipped viewport on the right, 1.5 boxes tall and
   centered, so a full box sits centered with a 1/4 sliver of its neighbours
   above and below. Kept inside the card (which is overflow:hidden). */
.ext-about-brand-marquee {
  position: absolute;
  right: clamp(10px, 1.2vw, 18px);
  top: 50%;
  transform: translateY(-50%);
  width: var(--ext-logo-box);
  height: calc(var(--ext-logo-box) * 1.5);
  overflow: hidden;
  pointer-events: none;
}

.ext-about-brand-track {
  display: flex;
  flex-direction: column;
  animation: ext-brand-reel 16s linear infinite;
}

@keyframes ext-brand-reel {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

/* Each white box holds ONE logo (natural brand colors). margin-bottom (not flex
   gap) so the last box of a set is spaced too - keeps the -50% loop seamless. A
   shadow defines the boxes even where they poke onto the white page. */
.ext-about-brand-chip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--ext-logo-box);
  height: var(--ext-logo-box);
  margin-bottom: var(--ext-logo-gap);
  padding: clamp(16px, 1.8vw, 24px);
  background: #ffffff;
  border-radius: clamp(8px, 1vw, 12px);
}

.ext-about-brand-chip img {
  max-width: 100%;
  max-height: clamp(33px, 3.5vw, 46px);
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .ext-about-brand-track {
    animation: none;
  }
}

.ext-about-intro-lead {
  /* smaller than before and capped narrow so it wraps to ~3 lines, pushed to
     the right of its column but held off the container edge by a right margin so
     its right edge lands on a tidy vertical line (matches the design). */
  margin: 0 clamp(24px, 4.5vw, 72px) 0 auto;
  max-width: 360px;
  font-family: var(--ext-font-secondary);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--ext-muted);
}

/* ---- Continuous dark band: stats + team + work ---- */
.ext-about-dark {
  position: relative;
  width: 100%;
  background: #0c0d0f;
  color: #ffffff;
  /* clip (not hidden) so it still contains decorative overflow but does NOT
     create a scroll container - otherwise the sticky stats copy can't pin. */
  overflow: clip;
}

/* Facing seams inside the band are halved so the three blocks read as one
   continuous black section (same rhythm as the homepage work/impact band). */
.ext-about-stats-block {
  padding: var(--ext-section-gap) 0 calc(var(--ext-section-gap) / 2);
}

.ext-about-team-block {
  padding: calc(var(--ext-section-gap) / 2) 0;
}

.ext-about-work-block {
  padding: calc(var(--ext-section-gap) / 2) 0 var(--ext-section-gap);
}

/* Stats */
.ext-about-stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: start;
}

.ext-about-stats-copy {
  margin: 0;
  /* Pinned on desktop: it sticks ~120px from the top and stays put while the
     stats list on the right scrolls past, releasing at the grid's bottom. */
  position: sticky;
  top: clamp(96px, 12vh, 130px);
  align-self: start;
  font-family: var(--ext-font-secondary);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.ext-about-stats-list {
  display: flex;
  flex-direction: column;
  /* Compact box pinned to the right so number + label sit close together
     (not flung to opposite edges of the full column). */
  width: 100%;
  max-width: 440px;
  margin-left: auto;
}

.ext-about-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(16px, 1.8vw, 24px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ext-about-stat:first-child {
  border-top: none;
}

.ext-about-stat-num {
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.ext-about-stat-label {
  flex: 0 1 auto;
  max-width: 60%;
  text-align: right;
  font-family: var(--ext-font-secondary);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

/* Shared dark-section header (team + offices) */
.ext-about-dark-head {
  text-align: center;
  margin-bottom: clamp(38px, 5vw, 62px);
}

.ext-about-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 50px;
  background: #1c1d21;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  cursor: default;
  transition:
    transform var(--ext-transition),
    box-shadow var(--ext-transition),
    border-color var(--ext-transition);
}

.ext-about-eyebrow:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 193, 61, 0.5);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.ext-about-eyebrow--light {
  background: #f3f4f6;
  border-color: rgba(3, 7, 18, 0.08);
  color: #24252c;
}

.ext-about-eyebrow--light:hover {
  border-color: rgba(255, 193, 61, 0.7);
  box-shadow: 0 10px 24px rgba(3, 7, 18, 0.12);
}

/* Halo: smaller, sits directly above the first letter (the "O"). No tilt and no
   upward drift - it only ever dips straight DOWN and eases back, casting a warm
   yellow glow that pools BELOW the ring (like a light shining downward) and
   deepens as it dips. */
.ext-about-eyebrow-halo {
  position: absolute;
  top: 6px;
  left: 24px;
  width: 12px;
  height: auto;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: ext-halo-float 3.4s ease-in-out infinite;
}

@keyframes ext-halo-float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    /* subtle 1.5px dip (was 3px) + glow blooms a touch brighter below */
    transform: translateX(-50%) translateY(1.5px);
  }
}

.ext-about-eyebrow:hover .ext-about-eyebrow-halo {
  animation-duration: 1.3s;
}

/* Bare variant: no pill - just the label as plain text with the halo above
   the first letter (used for "Work with us"). */
.ext-about-eyebrow--bare {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
}

.ext-about-eyebrow--bare:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.ext-about-eyebrow--bare .ext-about-eyebrow-halo {
  top: -4px;
  left: 9px;
  width: 20px;
}

/* "Keep reading" recs eyebrow: plain text with the halo above the first letter,
   like the blog category label - not a pill/chip, and no hover. */
.ext-recs .ext-about-eyebrow {
  display: inline-block;
  padding: 9px 0 0;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--ext-muted);
}
.ext-recs .ext-about-eyebrow:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
.ext-recs .ext-about-eyebrow-halo {
  top: 0;
  left: 11px;
  width: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .ext-about-eyebrow-halo {
    animation: none;
  }
}

.ext-about-dark-title,
.ext-about-offices-title {
  margin: 20px 0 0;
  /* Space Grotesk (primary) to match every other main title on this page -
     the hero, intro, work and business headings all use --ext-font-primary. */
  font-family: var(--ext-font-primary);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  color: #ffffff;
}

.ext-about-offices-title {
  color: var(--ext-ink);
}

/* Team */
.ext-about-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}

.ext-about-team-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 3 / 3.85;
  background: #0f1012;
  border: 0;
}

.ext-about-team-card:focus-visible {
  outline: 2px solid var(--ext-accent);
  outline-offset: 4px;
}

.ext-about-team-photo,
.ext-about-team-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ext-about-team-photo {
  overflow: hidden;
}

.ext-about-team-photo img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  will-change: opacity, transform;
}

/* The full-colour portrait stays fixed underneath while the grayscale copy
   sits perfectly aligned above it. Hover/focus opens the grayscale layer from
   bottom to top through a broad horizontal feather, revealing colour without
   moving either image; leaving closes the same gradient in reverse. */
.ext-about-team-photo--mono {
  z-index: 1;
  filter: grayscale(1) brightness(0.58) contrast(1.08);
  -webkit-mask-image: linear-gradient(
    to top,
    transparent 0%,
    transparent 38%,
    rgba(0, 0, 0, 0.28) 44%,
    rgba(0, 0, 0, 0.72) 50%,
    #000 58%,
    #000 100%
  );
  mask-image: linear-gradient(
    to top,
    transparent 0%,
    transparent 38%,
    rgba(0, 0, 0, 0.28) 44%,
    rgba(0, 0, 0, 0.72) 50%,
    #000 58%,
    #000 100%
  );
  -webkit-mask-size: 100% 250%;
  mask-size: 100% 250%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  will-change: mask-position, transform;
  transition:
    -webkit-mask-position 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    mask-position 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.ext-about-team-photo--color {
  z-index: 0;
  opacity: 1;
  filter: none;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.ext-about-team-card:hover .ext-about-team-photo img,
.ext-about-team-card:focus-visible .ext-about-team-photo img {
  transform: scale(1.045);
}

.ext-about-team-card:hover .ext-about-team-photo--mono,
.ext-about-team-card:focus-visible .ext-about-team-photo--mono {
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
}

@media (prefers-reduced-motion: reduce) {
  .ext-about-team-photo--mono,
  .ext-about-team-photo--color {
    transition-duration: 0.001ms;
  }
}

/* Touch/mobile has no reliable hover-away moment, so show the supplied artwork
   naturally in full colour and remove all reveal/glow layers. */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  .ext-about-team-photo--mono {
    display: none;
  }

  .ext-about-team-photo--color {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .ext-about-team-card:hover .ext-about-team-photo--color,
  .ext-about-team-card:focus-visible .ext-about-team-photo--color {
    transform: none;
  }
}

/* Everything inside the card is centred. */
.ext-about-team-meta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(20px, 2.2vw, 30px);
  background: linear-gradient(
    to top,
    rgba(6, 7, 8, 0.94) 0%,
    rgba(6, 7, 8, 0.6) 52%,
    rgba(6, 7, 8, 0) 100%
  );
}

.ext-about-team-name {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  color: #ffffff;
}

.ext-about-team-role {
  margin: 0px 0 0;
  font-family: var(--ext-font-secondary);
  font-size: 17px;
  color: var(--ext-accent);
}

/* Work with us */
/* Text block sits at the top, inside the container (left-aligned). */
.ext-about-work-copy {
  max-width: 940px;
}

.ext-about-work-title {
  /* Default solid white (fallback); the word-fill JS mutes each word then
     brightens them in reading order as the heading scrolls into view.
     Width + size tuned so the sentence lands at 3 lines. */
  margin: 18px 0 32px;
  font-family: var(--ext-font-primary);
  font-size: clamp(24px, 2.7vw, 38px);
  font-weight: 500;
  line-height: 1.32;
  color: #ffffff;
}

.ext-fill-word {
  display: inline-block;
}

/* Centered heading above the work gallery band. Text fills word-by-word via
   the shared data-ext-fill mechanic; one phrase carries a highlighter marker. */
.ext-gallery-head {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.ext-gallery-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ext-ink);
}
/* hand-drawn accent line under a phrase - same mechanic as the manifesto's
   "creative energy" line, gated so it draws in once the heading is in view */
.ext-gallery-draw {
  position: relative;
  white-space: nowrap;
}
.ext-gallery-draw-svg {
  position: absolute;
  left: -0.02em;
  right: -0.02em;
  bottom: -0.14em;
  width: 102%;
  height: 0.36em;
  overflow: visible;
  color: var(--ext-accent);
}
.ext-gallery-draw-svg path {
  stroke: currentColor;
  stroke-dasharray: 320;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.85s ease;
}
/* JS gates the draw; without JS the line simply shows (fail-readable) */
.ext-gallery-head.is-anim .ext-gallery-draw-svg path {
  stroke-dashoffset: 320;
}
.ext-gallery-head.is-anim.is-lit .ext-gallery-draw-svg path {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ext-gallery-draw-svg path,
  .ext-gallery-head.is-anim .ext-gallery-draw-svg path {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* Full-width image band below the text: two rows scrolling in opposite
   directions, looping forever. Each track holds its tile set twice, so a
   -50% shift is seamless. */
.ext-about-work-gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(40px, 5vw, 72px);
  min-width: 0;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}

.ext-about-work-row {
  overflow: hidden;
}

.ext-about-work-track {
  display: flex;
  gap: clamp(10px, 1vw, 16px);
  width: max-content;
  will-change: transform;
}

.ext-about-work-track--right {
  animation: ext-work-marquee-right 34s linear infinite;
}

.ext-about-work-track--left {
  animation: ext-work-marquee-left 34s linear infinite;
}

@keyframes ext-work-marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes ext-work-marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.ext-about-work-tile {
  flex: 0 0 auto;
  margin: 0;
  width: clamp(290px, 30vw, 450px);
  aspect-ratio: 641 / 400;
  overflow: hidden;
  border-radius: 20px;
  background: #212121;
}

.ext-about-work-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .ext-about-work-track {
    animation: none;
  }
}

/* ---- Offices (light) ---- */
.ext-about-offices {
  background: #ffffff;
  padding: var(--ext-section-gap) 0;
}

/* India card is ~2x the width of the USA card (per the design). */
.ext-about-offices-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(18px, 2vw, 30px);
  align-items: stretch;
}

.ext-about-office-card {
  position: relative;
  overflow: hidden;
  min-height: clamp(340px, 42vw, 600px);
  padding: clamp(28px, 3vw, 48px);
  border-radius: 26px;
  background: #0c0d0f;
  color: #ffffff;
}

.ext-about-office-card:focus-visible {
  outline: 2px solid var(--ext-accent);
  outline-offset: 4px;
}

/* India: info column beside the map column */
.ext-about-office-card--india {
  display: flex;
  /* Info (flag + addresses) sits at the TOP-left; the map is re-centred
     vertically on its own via align-self below. */
  align-items: flex-start;
  gap: clamp(14px, 2vw, 32px);
}

.ext-about-office-card--india .ext-about-office-info {
  flex: 0 1 44%;
  min-width: 0;
}

.ext-about-office-card--india .ext-about-office-map {
  flex: 1 1 56%;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.ext-about-office-map-art {
  position: relative;
  width: 100%;
  line-height: 0;
}

.ext-about-office-map-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 0;
  pointer-events: none;
}

.ext-about-office-card--india .ext-about-office-map-art {
  width: 100%;
  max-width: 440px;
}

/* USA: heading row + subtitle stacked, map anchored to the bottom */
.ext-about-office-card--usa {
  display: flex;
  flex-direction: column;
}

.ext-about-office-usa-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ext-about-office-card--usa .ext-about-office-address {
  margin-top: clamp(12px, 1.4vw, 18px);
}

.ext-about-office-card--usa .ext-about-office-map {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: clamp(20px, 3vw, 40px);
}

.ext-about-office-card--usa .ext-about-office-map-art {
  width: 100%;
  max-width: 340px;
}

.ext-about-office-card--usa .ext-about-office-map-svg {
  aspect-ratio: 462 / 286;
}

/* Circular flag chip */
.ext-about-office-flag {
  display: block;
  flex: 0 0 auto;
  width: clamp(46px, 4.4vw, 62px);
  height: clamp(46px, 4.4vw, 62px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.ext-about-office-card--india .ext-about-office-flag {
  margin-bottom: clamp(24px, 3vw, 42px);
}

.ext-about-office-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ext-about-office-list {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 50px);
}

.ext-about-office-city {
  margin: 0 0 12px;
  font-family: var(--ext-font-primary);
  font-size: clamp(21px, 2.1vw, 30px);
  font-weight: 600;
  line-height: 1.12;
  color: #ffffff;
}

.ext-about-office-city span {
  display: block;
  color: var(--ext-accent);
}

.ext-about-office-address {
  margin: 0;
  font-family: var(--ext-font-secondary);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}

/* ---- Business CTA card (light) ---- */
.ext-about-business {
  background: #ffffff;
  padding-bottom: var(--ext-section-gap);
}

.ext-about-business-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Keep the copy and optional service artwork centred within the card. */
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(3, 7, 18, 0.06);
  border-radius: 26px;
}

/* Text keeps its inset padding on all sides and sits centred in the card. */
.ext-about-business-copy {
  align-self: center;
  padding: clamp(32px, 4vw, 52px) 0 clamp(32px, 4vw, 52px)
    clamp(30px, 4vw, 56px);
}

.ext-about-business-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  color: var(--ext-ink);
}

.ext-about-business-text {
  margin: 14px 0 28px;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ext-muted);
  /* Keep the description on one line; released on mobile below. */
  white-space: nowrap;
}

.ext-about-business-media {
  align-self: center;
  justify-self: center;
  margin: clamp(24px, 3vw, 40px) clamp(36px, 5vw, 84px)
    clamp(24px, 3vw, 40px) 0;
}

.ext-about-business-media img {
  display: block;
  height: clamp(180px, 20vw, 250px);
  width: auto;
  border-radius: 0;
}

/* About-page partnership art: a transparent elephant-mascot handshake sits on
   the right while the alpha mask dissolves only the long arm edges. */
.ext-about-business-card--partner {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 41%);
  min-height: clamp(300px, 25vw, 350px);
}

.ext-about-business-card--partner .ext-about-business-copy {
  position: relative;
  z-index: 2;
}

.ext-about-business-card--partner .ext-about-business-text {
  max-width: 68ch;
  white-space: normal;
}

.ext-about-business-media.ext-about-business-media--partner {
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  margin: 0;
  overflow: visible;
}

.ext-about-business-media.ext-about-business-media--partner img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(500px, 43vw, 720px);
  max-width: none;
  height: auto;
  opacity: 0.82;
  transform: translate(-46%, -50%) rotate(-7deg);
  transform-origin: center;
  filter: contrast(1.04);
  -webkit-mask-image: radial-gradient(
    ellipse 72% 72% at 50% 52%,
    #000 46%,
    rgba(0, 0, 0, 0.86) 62%,
    transparent 88%
  );
  mask-image: radial-gradient(
    ellipse 72% 72% at 50% 52%,
    #000 46%,
    rgba(0, 0, 0, 0.86) 62%,
    transparent 88%
  );
}

/* Case-study CTA: the per-project description is long, so let it wrap inside
   the copy column instead of running under the portrait on the right. */
.ext-cs-cta .ext-about-business-text {
  white-space: normal;
  max-width: 70ch;
}
/* Title breaks manually via <br> ("... in mobility?" / "Let's build it."),
   so give it room to keep the first line intact. */
.ext-cs-cta .ext-about-business-title {
  max-width: none;
}

/* ============================================================
   Newsletter CTA - Blogs page. A centred subscribe card with a
   soft yellow glow, halo eyebrow, email field + Subscribe button,
   and a client-side success state (JS, no backend). Own namespace
   so the about-page CTA is untouched.
   ============================================================ */
.ext-newsletter {
  background: #ffffff;
  padding-bottom: var(--ext-section-gap);
}

.ext-newsletter-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(
      60% 90% at 50% -10%,
      rgba(255, 193, 61, 0.16),
      transparent 70%
    ),
    linear-gradient(180deg, #fbfbfc 0%, #f4f5f7 100%);
  border: 1px solid rgba(17, 19, 21, 0.07);
  padding: clamp(40px, 6vw, 84px) clamp(24px, 5vw, 72px);
}

.ext-newsletter-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.ext-newsletter-eyebrow {
  position: relative;
  display: inline-block;
  /* halo ring sits above the left start of the text, same as the blog cards */
  padding-top: 7px;
  margin-bottom: 18px;
  font-family: var(--ext-font-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ext-muted);
}

.ext-newsletter-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ext-ink);
}

.ext-newsletter-text {
  margin: 16px auto 0;
  max-width: 600px;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.62;
  color: var(--ext-muted);
}

/* Form: pill field with the button tucked inside on desktop */
.ext-newsletter-form {
  margin: 30px auto 0;
  max-width: 520px;
}

.ext-newsletter-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid rgba(17, 19, 21, 0.12);
  border-radius: 50px;
  box-shadow: 0 14px 34px -24px rgba(17, 19, 21, 0.4);
  transition:
    border-color var(--ext-transition),
    box-shadow var(--ext-transition);
}

.ext-newsletter-field:focus-within {
  border-color: var(--ext-accent, #ffc13d);
  box-shadow: 0 0 0 4px rgba(255, 193, 61, 0.22);
}

.ext-newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0 10px 0 18px;
  font-family: var(--ext-font-secondary);
  font-size: 1rem;
  color: var(--ext-ink);
}

.ext-newsletter-input::placeholder {
  color: rgba(17, 19, 21, 0.4);
}

.ext-newsletter-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border: 0;
  cursor: pointer;
  border-radius: 50px;
  background: var(--ext-accent, #ffc13d);
  color: var(--ext-ink);
  font-family: var(--ext-font-secondary);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    transform var(--ext-transition),
    box-shadow var(--ext-transition);
}

.ext-newsletter-btn svg {
  width: 17px;
  height: 17px;
  transition: transform var(--ext-transition);
}

.ext-newsletter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(255, 193, 61, 0.75);
}

.ext-newsletter-btn:hover svg {
  transform: translate(2px, -2px);
}

.ext-newsletter-field.is-invalid {
  border-color: #e0483d;
  box-shadow: 0 0 0 4px rgba(224, 72, 61, 0.16);
}

.ext-newsletter-error {
  margin: 10px 0 0;
  font-family: var(--ext-font-secondary);
  font-size: 0.85rem;
  color: #d23a2f;
}

.ext-newsletter-success {
  margin: 30px auto 0;
  max-width: 520px;
  padding: 16px 22px;
  border-radius: 16px;
  background: rgba(255, 193, 61, 0.16);
  border: 1px solid rgba(255, 193, 61, 0.4);
  font-family: var(--ext-font-secondary);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ext-ink);
}

.ext-newsletter-note {
  margin: 16px 0 0;
  font-family: var(--ext-font-secondary);
  font-size: 0.85rem;
  color: rgba(17, 19, 21, 0.45);
}

[hidden].ext-newsletter-error,
[hidden].ext-newsletter-success {
  display: none;
}

@media (max-width: 560px) {
  .ext-newsletter-field {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
  }
  .ext-newsletter-input {
    width: 100%;
    padding: 12px 14px;
    text-align: center;
  }
  .ext-newsletter-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Why Externo - hover list + swapping media (about page) =================
   In the spirit of the reference: a full-width stack of large headings on a dark
   band; hovering/focusing a row brightens it, cross-fades a matching image that
   floats over the right of the stack, and pops the shared Externo sticker onto it.
   Self-contained ext- CSS + vanilla JS; GSAP (already loaded) adds the sticker
   overshoot but the swap is class-driven so it works without it. Bootstrap is
   intentionally NOT used here (it isn't loaded site-wide - see project notes). */
.ext-why-area {
  position: relative;
  background: #0c0d0f;
  color: #ffffff;
  padding: var(--ext-section-gap) 0;
  overflow: hidden;
}

.ext-why-eyebrow {
  /* Uses the shared "Work with us" bare eyebrow (.ext-about-eyebrow--bare): white
     label with the yellow halo ring dipping above the first letter. This rule only
     adds the gap before the list. */
  margin-bottom: clamp(20px, 2.6vw, 40px);
}

.ext-why-grid {
  position: relative;
}

.ext-why-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Each row is a full-width button: the divider line spans the whole width while
   the text stays in the left portion (padding-right reserves the media zone), so
   the floating image on the right never sits over the words. */
.ext-why-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: clamp(18px, 2.5vw, 32px) 44% clamp(18px, 2.5vw, 32px) 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ext-why-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.ext-why-item-text {
  display: inline-block;
  font-family: var(--ext-font-primary);
  font-size: clamp(26px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.5);
  transition:
    color var(--ext-transition),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.ext-why-item:hover .ext-why-item-text,
.ext-why-item:focus-visible .ext-why-item-text,
.ext-why-item.is-active .ext-why-item-text {
  color: #ffffff;
}

/* Only while actually hovered/focused does the label glide right a little - a
   soft, slow ease. The persistent active state (last selected) only brightens,
   so the default row doesn't sit permanently shifted. */
.ext-why-item:hover .ext-why-item-text,
.ext-why-item:focus-visible .ext-why-item-text {
  transform: translateX(clamp(4px, 0.8vw, 12px));
}

.ext-why-item:focus-visible {
  outline: 2px solid var(--ext-accent);
  outline-offset: -3px;
}

/* Floating media over the right of the stack. pointer-events:none so hovers fall
   through to the rows beneath - the text drives the interaction. */
.ext-why-media {
  position: absolute;
  top: 50%;
  right: clamp(12px, 1.8vw, 40px);
  width: clamp(340px, 38%, 540px);
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}

.ext-why-media-frame {
  position: relative;
  width: 100%;
  /* Square frame for the five custom Externo mascot scenes. */
  aspect-ratio: 1 / 1;
  border-radius: clamp(14px, 1.4vw, 20px);
  overflow: hidden;
  background: #17191d;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.ext-why-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition:
    opacity 0.55s ease,
    transform 0.8s ease;
}
.ext-why-img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Externo brand sticker slapped on the frame's top-left corner; pops on each change.
   Visible by default via .is-sticker-on (set in markup) so it survives no-JS. */
.ext-why-sticker {
  position: absolute;
  top: clamp(-24px, -1.3vw, -16px);
  left: clamp(-16px, -1.4vw, -10px);
  width: clamp(58px, 5.6vw, 90px);
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transform: scale(0.5) rotate(-18deg);
  transition:
    opacity 0.3s ease,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ext-why-media.is-sticker-on .ext-why-sticker {
  opacity: 1;
  transform: scale(1) rotate(-9deg);
}

@media (prefers-reduced-motion: reduce) {
  .ext-why-img,
  .ext-why-item-text,
  .ext-why-sticker {
    transition-duration: 0.001ms;
  }
}

/* Stack under 992px: media drops below the list (relative, so the sticker stays
   anchored to it), centered; the text reclaims full width. */
@media only screen and (max-width: 991px) {
  .ext-why-item {
    padding-right: 0;
  }
  .ext-why-media {
    position: relative;
    top: auto;
    right: auto;
    width: min(360px, 84%);
    margin: clamp(28px, 6vw, 48px) auto 0;
    transform: none;
  }
}

/* ---- Responsive ---- */
@media only screen and (max-width: 991px) {
  .ext-about-intro-grid,
  .ext-about-stats-grid,
  .ext-about-offices-grid {
    grid-template-columns: 1fr;
  }

  /* Stacked: intro lead spans full width, left-aligned (not pinned right). */
  .ext-about-intro-lead {
    max-width: none;
    margin: 0;
  }

  /* Stacked: copy no longer pins (it would stick over the numbers). */
  .ext-about-stats-copy {
    position: static;
    top: auto;
  }

  /* Stacked: stats box spans full width again (not pinned right). */
  .ext-about-stats-list {
    max-width: none;
    margin-left: 0;
  }

  /* India card stacks: info above, map below */
  .ext-about-office-card--india {
    flex-direction: column;
    align-items: stretch;
  }

  .ext-about-office-card--india .ext-about-office-info,
  .ext-about-office-card--india .ext-about-office-map {
    flex: 0 0 auto;
  }

  .ext-about-office-card--india .ext-about-office-map {
    margin-top: clamp(24px, 5vw, 40px);
  }

  .ext-about-office-card {
    min-height: 0;
  }

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

  .ext-about-business-card {
    grid-template-columns: 1fr;
  }

  .ext-about-business-copy {
    align-self: auto;
    order: 1;
    padding: clamp(28px, 6vw, 44px);
  }

  .ext-about-business-text {
    white-space: normal;
  }

  .ext-about-business-media {
    align-self: center;
    justify-self: center;
    order: 0;
    margin: clamp(24px, 6vw, 40px) 0 0;
  }

  .ext-about-business-media img {
    height: auto;
    width: auto;
    max-width: 210px;
  }

  .ext-about-business-card--partner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ext-about-business-media.ext-about-business-media--partner {
    order: 0;
    width: 100%;
    min-height: clamp(160px, 34vw, 230px);
    margin: 0;
    overflow: hidden;
  }

  .ext-about-business-media.ext-about-business-media--partner img {
    top: 53%;
    left: 50%;
    width: min(690px, 112vw);
    max-width: none;
    transform: translate(-50%, -50%) rotate(-7deg);
  }

  .ext-about-business-card--partner .ext-about-business-copy {
    order: 1;
  }
}

@media only screen and (max-width: 767px) {
  .ext-about-offices-grid {
    grid-template-columns: 1fr;
  }

  .ext-about-team-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin-inline: auto;
  }

  .ext-about-stat-label {
    max-width: 52%;
  }
}

/* =========================================================================
   CAREERS  (careers/index.html + job detail pages)
   Flat black / white / yellow system - NO gradients, NO box-shadows on these
   blocks (interaction is carried by borders, fills, and transforms only).
   Reuses: .ext-container, .ext-services-hero(--legal), .ext-over-hero,
   .ext-about-eyebrow(+--light/--bare), .ext-title-anim, .ext-impact-accent,
   .ext-impact-number count-up, data-ext-reveal, .ext-banner-btn.
   ========================================================================= */

.ext-careers-section {
  padding: clamp(56px, 8vw, 110px) 0;
}
.ext-careers-section--tight {
  padding: clamp(40px, 6vw, 80px) 0;
}

/* Shared centered section heading for careers blocks */
.ext-careers-head {
  max-width: 760px;
  margin: 0 auto clamp(36px, 5vw, 60px);
  text-align: center;
}
.ext-careers-head .ext-about-eyebrow,
.ext-careers-head .ext-about-eyebrow--light {
  margin-bottom: 20px;
}
.ext-careers-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
}
.ext-careers-lede {
  margin: 18px auto 0;
  max-width: 620px;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--ext-muted);
}

/* ---- Intro split: big statement + supporting copy (content from About) ---- */
.ext-careers-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.ext-careers-intro-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(24px, 2.9vw, 40px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
}
.ext-careers-intro-title strong {
  font-weight: 700;
}
.ext-careers-intro-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
}
.ext-careers-intro-aside p {
  margin: 0;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--ext-muted);
}

/* ---- Values: flat cards, one yellow "hero" card ---- */
.ext-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ext-value-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.2vw, 30px);
  background: #fff;
  border: 1.5px solid var(--ext-ink);
  border-radius: 18px;
  transition:
    transform var(--ext-transition),
    background-color var(--ext-transition);
}
.ext-value-card:hover {
  transform: translateY(-4px);
}
.ext-value-card--accent {
  background: var(--ext-accent);
}
.ext-value-card:not(.ext-value-card--accent):hover {
  background: var(--ext-accent);
}
.ext-value-index {
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ext-ink);
}
.ext-value-name {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ext-ink);
}
.ext-value-text {
  margin: 0;
  font-family: var(--ext-font-secondary);
  font-size: 14.5px;
  line-height: 1.6;
  color: #2b2e33;
}

/* ---- Stats band: soft grey, ink text ---- */
.ext-careers-stats {
  background: #f4f5f7;
  padding: clamp(52px, 7vw, 96px) 0;
}
.ext-careers-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.ext-careers-stat {
  text-align: center;
  padding: 8px 0;
}
.ext-careers-stat-num {
  display: block;
  font-family: var(--ext-font-primary);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 600;
  line-height: 1;
  color: var(--ext-ink);
}
.ext-careers-stat-num .ext-impact-accent {
  color: var(--ext-accent);
}
.ext-careers-stat-label {
  display: block;
  margin-top: 12px;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 500;
  color: var(--ext-muted);
}

/* ---- Perks: flat bordered tiles with yellow icon chip ---- */
.ext-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ext-perk-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: clamp(20px, 2vw, 28px);
  background: #fff;
  border: 1.5px solid rgba(17, 19, 21, 0.12);
  border-radius: 16px;
  transition:
    border-color var(--ext-transition),
    transform var(--ext-transition);
}
.ext-perk-card:hover {
  transform: translateY(-3px);
  border-color: var(--ext-ink);
}
.ext-perk-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--ext-accent);
  border-radius: 12px;
}
.ext-perk-icon img {
  width: 24px;
  height: 24px;
}
.ext-perk-body h3 {
  margin: 0 0 6px;
  font-family: var(--ext-font-primary);
  font-size: 17px;
  font-weight: 600;
  color: var(--ext-ink);
}
.ext-perk-body p {
  margin: 0;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ext-muted);
}

/* ---- Open positions ---- */
.ext-jobs {
  padding: clamp(56px, 8vw, 110px) 0;
}
.ext-jobs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}
.ext-jobs-head-copy .ext-careers-title {
  text-align: left;
}
.ext-jobs-count {
  font-family: var(--ext-font-secondary);
  font-size: 15px;
  font-weight: 600;
  color: var(--ext-muted);
}
.ext-jobs-count strong {
  color: var(--ext-ink);
}

/* Filter tabs - flat pills, yellow when active */
.ext-jobs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.ext-jobs-filter {
  padding: 10px 20px;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 600;
  color: var(--ext-ink);
  background: #fff;
  border: 1.5px solid rgba(17, 19, 21, 0.16);
  border-radius: 50px;
  cursor: pointer;
  transition:
    background-color var(--ext-transition),
    border-color var(--ext-transition),
    color var(--ext-transition);
}
.ext-jobs-filter:hover {
  border-color: var(--ext-ink);
}
.ext-jobs-filter.is-active {
  background: var(--ext-accent);
  border-color: var(--ext-accent);
  color: var(--ext-ink);
}

.ext-jobs-list {
  display: flex;
  flex-direction: column;
  border-top: 1.5px solid var(--ext-ink);
}
.ext-job-card {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) auto auto;
  align-items: center;
  gap: 20px;
  padding: clamp(22px, 2.4vw, 30px) 8px;
  border-bottom: 1.5px solid rgba(17, 19, 21, 0.14);
  color: var(--ext-ink);
  transition:
    padding-left var(--ext-transition),
    background-color var(--ext-transition);
}
.ext-job-card:hover {
  background: var(--ext-accent);
  padding-left: 22px;
}
.ext-job-card.is-hidden {
  display: none;
}
.ext-job-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 600;
  line-height: 1.2;
}
.ext-job-dept {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 6px 14px;
  font-family: var(--ext-font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ext-ink);
  background: rgba(17, 19, 21, 0.06);
  border-radius: 50px;
  transition: background-color var(--ext-transition);
}
.ext-job-card:hover .ext-job-dept {
  background: rgba(17, 19, 21, 0.14);
}
.ext-job-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  color: #2b2e33;
}
.ext-job-meta span:first-child {
  font-weight: 600;
  color: var(--ext-ink);
}
.ext-job-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--ext-ink);
  border-radius: 50%;
  transition:
    transform var(--ext-transition),
    background-color var(--ext-transition);
}
.ext-job-arrow svg {
  width: 18px;
  height: 18px;
}
.ext-job-card:hover .ext-job-arrow {
  background: background-color var(--ext-transition);
  transform: rotate(-45deg);
}
.ext-job-card:hover .ext-job-arrow svg path {
  stroke: var(--ext-ink);
}
.ext-jobs-empty {
  display: none;
  padding: 40px 8px;
  font-family: var(--ext-font-secondary);
  font-size: 16px;
  color: var(--ext-muted);
}
.ext-jobs-empty.is-shown {
  display: block;
}

/* =========================================================================
   JOB DETAIL PAGE
   ========================================================================= */
/* Careers detail hero - reuses the pinned .ext-services-hero (immersive dark band
   under the flush header: line-grid pulse + header floats/inverts over it), but
   left-aligned with a breadcrumb, role title, and meta chips instead of the centred
   single-word heading. Unlike the services/legal heroes it is a self-contained
   header band: no footer-curve spike, and a shorter height so the dark reads as a
   header, not a full-screen hero. */
.ext-services-hero--job {
  --ext-services-hero-h: 52vh;
  /* Line up with the floating logo AND share the site-wide content width (blog +
     projects use the same --ext-content-inset). */
  --ext-job-hero-inset: var(--ext-content-inset);
}
.ext-services-hero--job .ext-container {
  /* Left-aligned, vertically centred content in a tall header band. Relative +
     min-height (instead of the services hero's fixed absolute height) so the band
     grows for long titles / small screens instead of clipping. */
  position: relative;
  height: auto;
  min-height: var(--ext-services-hero-h);
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  /* Inset both sides to line up with (and match the width of) the header pill. */
  padding-inline: var(--ext-job-hero-inset);
  /* Extra top padding gives the floating header more clearance while the band
     still grows for long titles on smaller screens. */
  padding-top: clamp(104px, 12vh, 168px);
  padding-bottom: 24px;
}
/* Phones: the header pill inset shrinks (0 14px 0 22px) and a full-height centred
   band gets cramped - inset 22px to match the logo, shorten the band, and
   top-anchor so a wrapped title never clips. */
@media (max-width: 767px) {
  .ext-services-hero--job {
    --ext-services-hero-h: 50vh;
    --ext-job-hero-inset: 22px;
  }
  .ext-services-hero--job .ext-container {
    justify-content: flex-start;
    padding-top: clamp(112px, 20vh, 168px);
    padding-bottom: 24px;
  }
}
/* No sharp white spike sweeping up into the band - the white body meets the dark
   header on a clean flat edge (the curve is only for the services/legal heroes). */
.ext-services-hero--job + .ext-over-hero::before {
  display: none;
}
.ext-services-hero--job .ext-services-hero-inner {
  align-items: flex-start;
  text-align: left;
  /* Full container width so long role titles stay on one line (the services hero's
     narrow centred column is what forced the wrap). */
  max-width: 100%;
  width: 100%;
}
.ext-services-hero--job .ext-job-detail-title {
  max-width: 100%;
  font-size: clamp(38px, 6vw, 84px);
  line-height: 1.02;
}
/* Keep the title on one line from tablet up (titles fit the container at these
   sizes); allow it to wrap on narrow phones rather than overflow the page. */
@media (min-width: 768px) {
  .ext-services-hero--job .ext-job-detail-title {
    white-space: nowrap;
  }
}
.ext-services-hero--job .ext-job-breadcrumb {
  margin-bottom: 22px;
}
.ext-services-hero--job .ext-job-detail-chips {
  margin-top: 32px;
}
/* Blog article detail hero: reuses the job detail hero's left-aligned, curve-
   free band, but the title is smaller and WRAPS (blog titles run longer than
   role titles, which are nowrap) and an article lede sits left-aligned below. */
.ext-services-hero--job.ext-services-hero--article .ext-job-detail-title {
  max-width: 820px;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.1;
  white-space: normal;
}
.ext-services-hero--article .ext-services-hero-lede {
  margin-left: 0;
  margin-right: auto;
  max-width: 60ch;
}
.ext-job-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 26px;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}
.ext-job-breadcrumb a {
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--ext-transition);
}
.ext-job-breadcrumb a:hover {
  color: var(--ext-accent);
}
.ext-job-breadcrumb span {
  color: rgba(255, 255, 255, 0.3);
}
.ext-job-breadcrumb .ext-job-breadcrumb-current {
  color: #fff;
}
.ext-job-detail-title {
  margin: 0;
  max-width: 900px;
  font-family: var(--ext-font-primary);
  font-size: clamp(32px, 5vw, 62px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}
.ext-job-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.ext-job-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50px;
}
.ext-job-chip strong {
  font-weight: 700;
}

/* Body: content + sticky apply aside */
.ext-job-detail-body {
  padding: clamp(48px, 7vw, 96px) 0 var(--ext-section-gap);
}
/* Body content shares the same inset as the hero (and blog/projects) so the whole
   page reads on one content line, aligned to the header logo. */
.ext-job-detail-body .ext-container {
  padding-inline: var(--ext-content-inset);
}
.ext-job-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.ext-job-content > * + * {
  margin-top: 22px;
}
.ext-job-content h2 {
  margin: 40px 0 6px;
  font-family: var(--ext-font-primary);
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 600;
  color: var(--ext-ink);
}
.ext-job-content h2:first-child {
  margin-top: 0;
}
.ext-job-content p {
  margin: 0;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.75;
  color: #2b2e33;
}
.ext-job-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ext-job-content ul li {
  position: relative;
  padding-left: 30px;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.6;
  color: #2b2e33;
}
.ext-job-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  background: var(--ext-accent);
  border: 1.5px solid var(--ext-ink);
  border-radius: 5px;
}

/* Skills & tools tag lists */
.ext-skill-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--ext-font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ext-muted);
}
.ext-job-content ul.ext-skill-tags {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
.ext-job-content ul.ext-skill-tags li {
  padding: 8px 16px;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ext-ink);
  background: rgba(255, 193, 61, 0.12);
  border: 1.5px solid rgba(17, 19, 21, 0.16);
  border-radius: 50px;
}
.ext-job-content ul.ext-skill-tags li::before {
  display: none;
}

/* Fit / values callout */
.ext-job-callout {
  padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px);
  background: rgba(255, 193, 61, 0.1);
  border: 1.5px solid var(--ext-ink);
  border-radius: 16px;
}
.ext-job-content .ext-job-callout p {
  margin: 0;
  color: var(--ext-ink);
  font-weight: 500;
}
.ext-job-content .ext-job-callout p + p {
  margin-top: 12px;
}

/* Apply aside */
.ext-apply-card {
  position: sticky;
  top: 108px;
  padding: clamp(24px, 2.4vw, 32px);
  background: #fff;
  border: 1.5px solid var(--ext-ink);
  border-radius: 20px;
}
.ext-apply-card h3 {
  margin: 0 0 6px;
  font-family: var(--ext-font-primary);
  font-size: 20px;
  font-weight: 600;
  color: var(--ext-ink);
}
.ext-apply-card p {
  margin: 0 0 20px;
  font-family: var(--ext-font-secondary);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ext-muted);
}
.ext-apply-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ext-ink);
  background: var(--ext-accent);
  border: 1.5px solid var(--ext-ink);
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform var(--ext-transition),
    background-color var(--ext-transition);
}
.ext-apply-email:hover {
  transform: translateY(-2px);
}
.ext-apply-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  font-family: var(--ext-font-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ext-muted);
}
.ext-apply-divider::before,
.ext-apply-divider::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: rgba(17, 19, 21, 0.14);
}

/* Resume upload form */
.ext-resume-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ext-resume-field label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--ext-font-secondary);
  font-size: 13px;
  font-weight: 600;
  color: var(--ext-ink);
}
.ext-resume-optional {
  margin-left: 5px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ext-muted);
}
.ext-resume-field input[type="text"],
.ext-resume-field input[type="email"],
.ext-resume-field input[type="url"],
.ext-resume-field input[type="tel"] {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--ext-font-secondary);
  font-size: 15px;
  color: var(--ext-ink);
  background: #fff;
  border: 1.5px solid rgba(17, 19, 21, 0.2);
  border-radius: 10px;
  transition: border-color var(--ext-transition);
}
.ext-resume-field input:focus {
  outline: none;
  border-color: var(--ext-ink);
}
.ext-resume-field input::placeholder {
  color: #9aa0a6;
}
/* File drop / picker */
.ext-resume-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 16px;
  text-align: center;
  background: rgba(255, 193, 61, 0.08);
  border: 1.5px dashed rgba(17, 19, 21, 0.35);
  border-radius: 12px;
  cursor: pointer;
  transition:
    border-color var(--ext-transition),
    background-color var(--ext-transition);
}
.ext-resume-drop:hover,
.ext-resume-drop.is-drag {
  border-color: var(--ext-ink);
  background: rgba(255, 193, 61, 0.18);
}
/* Rejected file (wrong type / over 5MB) - the hint line carries the reason. */
.ext-resume-drop.is-error {
  border-color: #e5484d;
  background: rgba(229, 72, 77, 0.07);
}
.ext-resume-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.ext-resume-drop-icon {
  width: 30px;
  height: 30px;
}
.ext-resume-drop-text {
  font-family: var(--ext-font-secondary);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ext-ink);
}
.ext-resume-drop-hint {
  font-family: var(--ext-font-secondary);
  font-size: 12px;
  color: var(--ext-muted);
}
.ext-resume-filename {
  font-family: var(--ext-font-secondary);
  font-size: 13px;
  font-weight: 700;
  color: var(--ext-ink);
  word-break: break-all;
}
.ext-resume-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ext-ink);
  border: 1.5px solid var(--ext-ink);
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform var(--ext-transition),
    background-color var(--ext-transition),
    color var(--ext-transition);
}
.ext-resume-submit:hover {
  background: var(--ext-accent);
  color: var(--ext-ink);
}
/* While the resume is uploading to Drive. */
.ext-resume-submit:disabled {
  opacity: 0.65;
  cursor: default;
}
.ext-resume-submit:disabled:hover {
  background: var(--ext-ink);
  color: #fff;
}
.ext-resume-note {
  font-family: var(--ext-font-secondary);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ext-muted);
}
/* Success state */
.ext-resume-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  text-align: center;
  background: var(--ext-accent);
  border: 1.5px solid var(--ext-ink);
  border-radius: 12px;
}
.ext-resume-success.is-shown {
  display: flex;
}
.ext-resume-success img {
  width: 40px;
  height: 40px;
}
.ext-resume-success h4 {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: 18px;
  font-weight: 700;
  color: var(--ext-ink);
}
.ext-resume-success p {
  margin: 0;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  line-height: 1.55;
  color: #2b2e33;
}

/* =========================================================================
   CAREERS - responsive
   ========================================================================= */
@media (max-width: 1100px) {
  .ext-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ext-perks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ext-careers-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}
@media (max-width: 992px) {
  .ext-careers-intro-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ext-job-detail-grid {
    grid-template-columns: 1fr;
  }
  .ext-apply-card {
    position: static;
  }
  .ext-job-card {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title arrow"
      "dept arrow"
      "meta arrow";
    row-gap: 12px;
  }
  .ext-job-title {
    grid-area: title;
  }
  .ext-job-dept {
    grid-area: dept;
  }
  .ext-job-meta {
    grid-area: meta;
    flex-direction: row;
    gap: 16px;
  }
  .ext-job-arrow {
    grid-area: arrow;
    align-self: center;
  }
}
@media (max-width: 680px) {
  .ext-values-grid {
    grid-template-columns: 1fr;
  }
  .ext-perks-grid {
    grid-template-columns: 1fr;
  }
  .ext-careers-stats-grid {
    grid-template-columns: 1fr;
  }
  .ext-jobs-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================================
   CAREERS - open-application CTA + resume upload modal
   Flat black/white/yellow. Modal scrim is a functional dim, not a shadow.
   ========================================================================= */
/* Open-application card - mirrors the About "Partner with us" card: flat light
   panel, copy + dark pill button on the left, image flush to the bottom-right.
   Own namespace so the About CTA is untouched; text wraps (copy is longer). */
.ext-jobs-upload-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(36px, 4vw, 56px);
  padding: 0;
  overflow: hidden;
  background: #f6f7f9;
  border: 1px solid rgba(3, 7, 18, 0.06);
  border-radius: 26px;
}
.ext-jobs-upload-cta-copy {
  align-self: center;
  padding: clamp(32px, 4vw, 52px) clamp(20px, 3vw, 40px) clamp(32px, 4vw, 52px)
    clamp(30px, 4vw, 56px);
}
.ext-jobs-upload-cta-title {
  margin: 0;
  max-width: none;
  white-space: nowrap;
  font-family: var(--ext-font-primary);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  color: var(--ext-ink);
}
.ext-jobs-upload-cta-text {
  margin: 14px 0 28px;
  max-width: 44ch;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ext-muted);
}
.ext-jobs-upload-cta-media {
  align-self: center;
  margin-right: clamp(20px, 5vw, 84px);
}
.ext-jobs-upload-cta-media img,
.ext-jobs-upload-cta-media video {
  display: block;
  height: clamp(160px, 18vw, 230px);
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Inline CTA variant: an action button on the right in place of the person
   image, with the title wrapping to two lines. Reduced vertical padding keeps
   the card compact, and tighter outer margins pull it closer to the content
   above and below. */
.ext-cta-area--tight {
  margin-top: clamp(24px, 4vw, 44px);
  margin-bottom: clamp(24px, 4vw, 44px);
}
.ext-jobs-upload-cta--action {
  align-items: center;
  margin-top: 0;
}
.ext-jobs-upload-cta--action .ext-jobs-upload-cta-copy {
  align-self: center;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 3vw, 40px) clamp(28px, 3vw, 44px)
    clamp(30px, 4vw, 56px);
}
.ext-jobs-upload-cta--action .ext-jobs-upload-cta-title {
  margin: 0;
  white-space: normal;
  max-width: 22ch;
}
.ext-jobs-upload-cta--action .ext-jobs-upload-cta-text {
  margin: 8px 0 0;
  max-width: 42ch;
}
.ext-jobs-upload-cta-action {
  align-self: center;
  padding: 0 clamp(30px, 4vw, 56px) 0 0;
}
@media (max-width: 860px) {
  .ext-jobs-upload-cta-action {
    padding: 0 clamp(28px, 6vw, 40px) clamp(28px, 6vw, 40px);
  }
}

/* Modal */
.ext-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}
.ext-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.ext-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 13, 15, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.ext-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: clamp(26px, 3vw, 42px);
  background: #fff;
  border: 1.5px solid var(--ext-ink);
  border-radius: 22px;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.ext-modal.is-open .ext-modal-dialog {
  transform: translateY(0) scale(1);
}
.ext-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1.5px solid rgba(17, 19, 21, 0.16);
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color var(--ext-transition),
    border-color var(--ext-transition),
    transform var(--ext-transition);
}
.ext-modal-close svg {
  width: 18px;
  height: 18px;
}
.ext-modal-close:hover {
  background: var(--ext-accent);
  border-color: var(--ext-ink);
  transform: rotate(90deg);
}
.ext-modal-title {
  margin: 0 40px 8px 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ext-ink);
}
.ext-modal-sub {
  margin: 0 0 24px;
  font-family: var(--ext-font-secondary);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ext-muted);
}

@media (max-width: 860px) {
  .ext-jobs-upload-cta {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .ext-jobs-upload-cta-copy {
    padding: clamp(28px, 6vw, 40px);
  }
  .ext-jobs-upload-cta-media {
    justify-self: center;
    margin-right: 0;
  }
  .ext-jobs-upload-cta-title {
    max-width: none;
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ext-modal,
  .ext-modal-dialog {
    transition: none;
  }
}

/* =========================================================================
   CAREERS - "How we work" (fill statement + interactive rituals list)
   Reuses the site-wide data-ext-fill word-by-word scroll reveal.
   ========================================================================= */
.ext-howwework-top {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 76px);
}
.ext-howwework-label {
  padding-top: 12px;
  font-family: var(--ext-font-primary);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 500;
  color: var(--ext-ink);
}
.ext-howwework-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(26px, 3.7vw, 52px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
}
.ext-howwework-sub {
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  max-width: 48ch;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--ext-muted);
}

/* Rituals - single-open expanding list */
.ext-rituals {
  border-top: 1.5px solid var(--ext-ink);
}
.ext-ritual {
  position: relative;
  border-bottom: 1.5px solid rgba(17, 19, 21, 0.14);
  transition: background-color var(--ext-transition);
}
.ext-ritual::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--ext-accent);
  transition: width var(--ext-transition);
}
.ext-ritual.is-open {
  background: rgba(255, 193, 61, 0.06);
}
.ext-ritual.is-open::before {
  width: 4px;
}
.ext-ritual-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  width: 100%;
  padding: clamp(20px, 2.3vw, 30px) 8px clamp(20px, 2.3vw, 30px) 22px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.ext-ritual-index {
  font-family: var(--ext-font-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ext-muted);
  transition: color var(--ext-transition);
}
.ext-ritual.is-open .ext-ritual-index {
  color: var(--ext-ink);
}
.ext-ritual-name {
  font-family: var(--ext-font-primary);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ext-ink);
  transition: transform var(--ext-transition);
}
.ext-ritual-head:hover .ext-ritual-name {
  transform: translateX(6px);
}
/* Plus / minus toggle in a circle → yellow when open */
.ext-ritual-plus {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 1.5px solid rgba(17, 19, 21, 0.2);
  border-radius: 50%;
  transition:
    background-color var(--ext-transition),
    border-color var(--ext-transition);
}
.ext-ritual-plus::before,
.ext-ritual-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--ext-ink);
}
.ext-ritual-plus::before {
  width: 15px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.ext-ritual-plus::after {
  width: 2px;
  height: 15px;
  transform: translate(-50%, -50%);
  transition:
    transform var(--ext-transition),
    opacity var(--ext-transition);
}
.ext-ritual-head:hover .ext-ritual-plus {
  border-color: var(--ext-ink);
}
.ext-ritual.is-open .ext-ritual-plus {
  background: var(--ext-accent);
  border-color: var(--ext-accent);
}
.ext-ritual.is-open .ext-ritual-plus::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}
/* Collapse via grid-template-rows (minmax(0,…) so answers fully hide) */
.ext-ritual-body {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.4s ease;
}
.ext-ritual.is-open .ext-ritual-body {
  grid-template-rows: minmax(0, 1fr);
}
.ext-ritual-body-inner {
  overflow: hidden;
}
.ext-ritual-body-inner p {
  margin: 0;
  padding: 0 clamp(40px, 7vw, 90px) clamp(22px, 2.4vw, 30px) 22px;
  max-width: 74ch;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: #2b2e33;
}

/* =========================================================================
   CAREERS - perks bento (redesigned "Why you'll like it here")
   ========================================================================= */
.ext-perks-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.ext-perks-title {
  margin: 18px 0 0;
  max-width: 16ch;
  text-align: left;
  color: var(--ext-ink);
}
.ext-perks-lede {
  margin: 0;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--ext-muted);
}
/* Perks read as one designed matrix, not six floating boxes: a single rounded
   panel with hairline-divided cells (the 1.5px gap shows the container colour).
   A "lit" cell travels with the pointer - subtle fill + the brand mark blooming
   out of the corner - and the last one hovered stays lit. */
.ext-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: rgba(17, 19, 21, 0.12);
  border: 1.5px solid rgba(17, 19, 21, 0.12);
  border-radius: 22px;
  overflow: hidden;
}
.ext-bento-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-height: clamp(184px, 19vw, 232px);
  padding: clamp(26px, 2.6vw, 40px);
  background: #fff;
  transition: background var(--ext-transition);
}
/* large, faint brand mark bleeding off the top-right corner - clipped by the
   cell (overflow:hidden), blooming in on the active / hovered cell. Same
   watermark treatment as the contact panel mark. */
.ext-bento-mark {
  position: absolute;
  top: -24px;
  right: -24px;
  z-index: 0;
  width: clamp(80px, 8vw, 112px);
  height: auto;
  opacity: 0;
  transform: rotate(-16deg) scale(0.88);
  transform-origin: top right;
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
/* one cell is always "lit" - the last one hovered. Fails readable: the first
   cell carries is-active in the markup, so one reads active without JS. No
   y-movement on hover, only the fill + mark change. The mark stays a faint,
   tilted watermark tucked into the corner. */
.ext-bento-item.is-active,
.ext-bento-item:hover {
  background: #fff9e6;
}
.ext-bento-item.is-active .ext-bento-mark,
.ext-bento-item:hover .ext-bento-mark {
  opacity: 0.85;
  transform: rotate(-16deg) scale(1);
}
/* the lit cell's title stays black; its hand-drawn underline draws in */
.ext-bento-item.is-active .ext-bento-body h3::after,
.ext-bento-item:hover .ext-bento-body h3::after {
  clip-path: inset(0 0 0 0);
}
.ext-bento-index {
  position: absolute;
  top: 8px;
  right: 20px;
  font-family: var(--ext-font-primary);
  font-size: clamp(56px, 6vw, 96px);
  font-weight: 700;
  line-height: 1;
  color: rgba(17, 19, 21, 0.05);
  pointer-events: none;
}
.ext-bento-item--feature .ext-bento-index {
  color: rgba(17, 19, 21, 0.12);
}
.ext-bento-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--ext-accent);
  border-radius: 13px;
}
.ext-bento-item--feature .ext-bento-icon {
  background: #fff;
}
.ext-bento-icon img {
  width: 26px;
  height: 26px;
}
.ext-bento-body {
  position: relative;
  z-index: 1;
}
.ext-bento-body h3 {
  position: relative;
  width: fit-content;
  margin: 0 0 8px;
  font-family: var(--ext-font-primary);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 600;
  color: var(--ext-ink);
}
/* hand-drawn accent underline (same line as "creative energy"), hidden by a
   clip until the cell is lit, then it draws in left-to-right */
.ext-bento-body h3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.24em;
  height: 0.32em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20260%2016'%20preserveAspectRatio='none'%3E%3Cpath%20d='M4%2010C46%204%20104%204%20150%208s72%204%20106-3'%20fill='none'%20stroke='%23ffc13d'%20stroke-width='4.5'%20stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.55s cubic-bezier(0.4, 0.1, 0.2, 1);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ext-bento-body h3::after {
    transition: none;
  }
}
.ext-bento-body p {
  margin: 0;
  max-width: 42ch;
  font-family: var(--ext-font-secondary);
  font-size: 14.5px;
  line-height: 1.55;
  color: #2b2e33;
}

/* Responsive - how-we-work + bento */
@media (max-width: 860px) {
  .ext-howwework-top {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ext-howwework-label {
    padding-top: 0;
  }
  .ext-perks-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 14px;
  }
  .ext-perks-title {
    max-width: none;
  }
}
@media (max-width: 1100px) {
  .ext-bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .ext-bento-item--wide {
    grid-column: span 2;
  }
}
@media (max-width: 640px) {
  .ext-bento {
    grid-template-columns: 1fr;
  }
  .ext-bento-item--wide {
    grid-column: span 1;
  }
}

/* =========================================================================
   SUPPORT PAGE - "Ask with AI" section + tabbed FAQ + form controls
   ========================================================================= */
.ext-support-ai-grid {
  display: grid;
  /* Same column split + gap as .ext-support-faq-layout so the assistant card
     lines up (left edge and width) with the FAQ container directly below it. */
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.ext-support-ai-copy .ext-about-eyebrow,
.ext-support-ai-copy .ext-about-eyebrow--light,
.ext-support-ai-copy .ext-about-eyebrow--bare {
  margin-bottom: 10px;
}
/* Bare halo eyebrow (like "Get in touch") on the light support sections -
   the shared bare variant defaults to white, so force it to ink here. */
.ext-support-ai-copy .ext-about-eyebrow--bare,
.ext-support-faq-aside .ext-about-eyebrow--bare {
  color: var(--ext-ink);
}
.ext-support-ai-title {
  margin: 0;
  max-width: 12ch;
  text-align: left;
}
.ext-support-ai-lede {
  margin: 18px 0 0;
  max-width: 52ch;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--ext-muted);
}
.ext-support-ai-card {
  justify-self: end;
  width: 100%;
}

/* FAQ area on the support page - the shared .ext-faq-area brings the accordion
   styles; here we just give it padding and centre the topic tabs. */
.ext-support-faq {
  margin-top: 0;
  padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 110px);
}
.ext-support-faq-tabs {
  justify-content: flex-start;
  margin-bottom: clamp(22px, 2.6vw, 34px);
}
.ext-support-faq-panels {
  max-width: none;
  margin: 0;
}
.ext-faq-tabpanel[hidden] {
  display: none;
}

/* Two-column FAQ: left rail (heading + contact card) + right accordion */
.ext-support-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.ext-support-faq-aside {
  position: sticky;
  top: 108px;
}
.ext-support-faq-aside .ext-about-eyebrow--light,
.ext-support-faq-aside .ext-about-eyebrow--bare {
  margin-bottom: 10px;
}
.ext-support-faq-aside .ext-support-faq-title {
  text-align: left;
}
.ext-support-faq-help {
  position: relative;
  overflow: hidden;
  margin-top: clamp(22px, 2.6vw, 32px);
  padding: clamp(24px, 2.6vw, 34px);
  background: #f5f5f6;
  border: 1.5px solid rgba(17, 19, 21, 0.08);
  border-radius: 22px;
}
.ext-support-faq-help-mark {
  position: absolute;
  top: 4px;
  right: -24px;
  width: 96px;
  height: 96px;
  opacity: 0.06;
  transform: rotate(-9deg);
  pointer-events: none;
}
.ext-support-faq-help-mark img {
  width: 100%;
  height: 100%;
}
.ext-support-faq-help-title {
  position: relative;
  margin: 0 0 22px;
  font-family: var(--ext-font-primary);
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
}
.ext-support-faq-help-actions {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 900px) {
  .ext-support-faq-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ext-support-faq-aside {
    position: static;
  }
}

/* Textarea + select share the resume-form field styling */
.ext-resume-field textarea,
.ext-resume-field select {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--ext-font-secondary);
  font-size: 15px;
  color: var(--ext-ink);
  background: #fff;
  border: 1.5px solid rgba(17, 19, 21, 0.2);
  border-radius: 10px;
  transition: border-color var(--ext-transition);
}
.ext-resume-field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}
.ext-resume-field textarea:focus,
.ext-resume-field select:focus {
  outline: none;
  border-color: var(--ext-ink);
}
.ext-resume-field textarea::placeholder {
  color: #9aa0a6;
}

@media (max-width: 900px) {
  .ext-support-ai-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ext-support-ai-title {
    max-width: none;
  }
  .ext-support-ai-card {
    justify-self: stretch;
    max-width: none;
  }
}

/* Support "Ask with AI" - icons-only card. Each chip reveals the platform name
   on hover/focus and lights its border with the brand's --ext-brand colour. */
.ext-ai-ask {
  background: #fff;
  border: 1.5px solid rgba(17, 19, 21, 0.12);
  border-radius: 24px;
  padding: clamp(28px, 3vw, 44px);
  transition: border-color var(--ext-transition);
}
.ext-ai-ask-cap {
  display: block;
  margin-bottom: clamp(20px, 2.4vw, 28px);
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ext-muted);
}
.ext-ai-ask-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
}
/* Each chip is a circle by default; the active OR hovered one expands into a
   pill that slides the platform name in beside the icon (in the brand colour). */
.ext-ai-chip {
  --ext-chip-size: clamp(52px, 5.4vw, 64px);
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: var(--ext-chip-size);
  background: #fff;
  border: 1.5px solid rgba(17, 19, 21, 0.16);
  border-radius: 50px;
  overflow: hidden;
  white-space: nowrap;
  transition: border-color var(--ext-transition);
}
.ext-ai-chip-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--ext-chip-size);
  height: 100%;
}
.ext-ai-chip-ic img {
  width: 46%;
  height: 46%;
  object-fit: contain;
}
.ext-ai-chip-name {
  max-width: 0;
  padding-right: 0;
  overflow: hidden;
  font-family: var(--ext-font-primary);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 600;
  color: var(--ext-brand, var(--ext-ink));
  transition:
    max-width 0.34s ease,
    opacity 0.24s ease,
    padding-right 0.34s ease;
  opacity: 0;
}
.ext-ai-chip.is-active,
.ext-ai-chip:hover,
.ext-ai-chip:focus-visible {
  border-color: var(--ext-brand, var(--ext-ink));
  outline: none;
}
.ext-ai-chip.is-active .ext-ai-chip-name,
.ext-ai-chip:hover .ext-ai-chip-name,
.ext-ai-chip:focus-visible .ext-ai-chip-name {
  max-width: 200px;
  padding-right: clamp(16px, 1.7vw, 24px);
  opacity: 1;
}
/* The whole card's border adopts the ACTIVE assistant's brand colour, and
   follows whichever chip is hovered/focused (matched by each chip's inline
   --ext-brand hex). Brands: Claude #d97757, Gemini #4285f4, Perplexity
   #20808d, ChatGPT/Grok #111315. */
.ext-ai-ask:has(.ext-ai-chip.is-active[style*="d97757"]) {
  border-color: #d97757;
}
.ext-ai-ask:has(.ext-ai-chip.is-active[style*="4285f4"]) {
  border-color: #4285f4;
}
.ext-ai-ask:has(.ext-ai-chip.is-active[style*="20808d"]) {
  border-color: #20808d;
}
.ext-ai-ask:has(.ext-ai-chip.is-active[style*="111315"]) {
  border-color: #111315;
}
.ext-ai-ask:has(.ext-ai-chip[style*="d97757"]:hover),
.ext-ai-ask:has(.ext-ai-chip[style*="d97757"]:focus-visible) {
  border-color: #d97757;
}
.ext-ai-ask:has(.ext-ai-chip[style*="4285f4"]:hover),
.ext-ai-ask:has(.ext-ai-chip[style*="4285f4"]:focus-visible) {
  border-color: #4285f4;
}
.ext-ai-ask:has(.ext-ai-chip[style*="20808d"]:hover),
.ext-ai-ask:has(.ext-ai-chip[style*="20808d"]:focus-visible) {
  border-color: #20808d;
}
.ext-ai-ask:has(.ext-ai-chip[style*="111315"]:hover),
.ext-ai-ask:has(.ext-ai-chip[style*="111315"]:focus-visible) {
  border-color: #111315;
}
@media (max-width: 620px) {
  .ext-ai-ask-row {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* Support FAQ header - simpler, lighter title (less heavy than section titles) */
.ext-support-faq-head {
  text-align: center;
  margin-bottom: clamp(26px, 3.4vw, 42px);
}
.ext-support-faq-head .ext-about-eyebrow--light {
  margin-bottom: 18px;
}
/* Matches .ext-support-ai-title / .ext-careers-title so both left-column
   section headings read as one consistent type scale. */
.ext-support-faq-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
}

/* =========================================================================
   CONTACT PAGE - info rail + form + steps
   Reuses .ext-resume-field / .ext-resume-submit / .ext-resume-success,
   .ext-capsule-*-btn, and .ext-value-card (for the "what happens next" steps).
   ========================================================================= */
/* Joined split card: dark info panel (left) fused with the white form (right) */
.ext-contact-card {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  border: 1px solid rgba(17, 19, 21, 0.1);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(17, 19, 21, 0.28);
}

/* --- Dark left panel --- */
.ext-contact-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 3.4vw, 54px);
  /* Light theme: soft gray panel (with a gentle top-to-bottom lift) against the
     white form side, so the white inner cards read as clearly layered on top. */
  background: linear-gradient(160deg, #fafbfc 0%, #f1f2f4 100%);
  border-right: 1px solid rgba(17, 19, 21, 0.08);
  color: var(--ext-ink);
}
.ext-contact-panel-inner {
  position: relative;
  z-index: 2;
}
.ext-contact-panel-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/common/innerpage-bg-lines.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  opacity: 0.18;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 55%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.ext-contact-panel-mark {
  position: absolute;
  right: -34px;
  bottom: -30px;
  z-index: 1;
  width: 150px;
  height: auto;
  opacity: 0.1;
  transform: rotate(-8deg);
  pointer-events: none;
}
/* "Get in touch" now uses the shared bare halo eyebrow (.ext-about-eyebrow--bare);
   this only adds the spacing below it on the dark contact panel. */
.ext-contact-eyebrow {
  margin-bottom: 22px;
}
/* Light panel: the shared bare eyebrow defaults to white - force it to ink. */
.ext-contact-panel .ext-about-eyebrow--bare {
  color: var(--ext-ink);
}
.ext-contact-title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--ext-font-primary);
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
}
.ext-contact-hl {
  color: var(--ext-accent);
}
.ext-contact-lede {
  margin: 16px 0 0;
  max-width: 42ch;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: rgba(17, 19, 21, 0.62);
}
.ext-contact-methods {
  margin-top: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ext-contact-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  transition:
    border-color var(--ext-transition),
    transform var(--ext-transition),
    background-color var(--ext-transition);
}
.ext-contact-method:hover {
  transform: translateY(-2px);
  border-color: var(--ext-accent);
  background: rgba(255, 255, 255, 0.08);
}
.ext-contact-method-ic {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--ext-accent);
  border-radius: 11px;
}
.ext-contact-method-ic svg {
  width: 22px;
  height: 22px;
}
.ext-contact-method-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ext-contact-method-text strong {
  font-family: var(--ext-font-primary);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.ext-contact-method-text span {
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}
.ext-contact-method-arrow {
  margin-left: auto;
  display: grid;
  place-items: center;
  transition: transform var(--ext-transition);
}
.ext-contact-method-arrow svg {
  width: 20px;
  height: 20px;
}
.ext-contact-method-arrow svg path {
  stroke: #ffffff;
  transition: stroke var(--ext-transition);
}
.ext-contact-method:hover .ext-contact-method-arrow {
  transform: rotate(-45deg);
}
.ext-contact-method:hover .ext-contact-method-arrow svg path {
  stroke: var(--ext-accent);
}
.ext-contact-capsules {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- White form side --- */
.ext-contact-formside {
  padding: clamp(30px, 3.4vw, 54px);
  background: #fff;
}
.ext-contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ext-contact-field--full {
  grid-column: 1 / -1;
}
.ext-contact-formside .ext-resume-note {
  margin-top: 14px;
}
.ext-contact-optional {
  font-weight: 400;
  color: var(--ext-muted);
}
/* Required-field star */
.ext-req {
  color: #e5484d;
  font-weight: 700;
}
/* intl-tel-input: make the country-code phone field span its column and match
   the other inputs' look. */
.ext-resume-field .iti {
  width: 100%;
  display: block;
}
.ext-resume-field .iti__dropdown-content {
  z-index: 60;
}
/* Clip the flag / dial-code button to the input's rounded corner so it doesn't
   poke out past the left edge of the field. */
.ext-resume-field .iti__selected-country {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
}
/* Keep the country list a self-contained scroll area (paired with
   data-lenis-prevent in JS so Lenis doesn't steal the wheel). */
.ext-resume-field .iti__country-list {
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ext-contact-success {
  text-align: center;
  justify-content: center;
  gap: 14px;
  max-width: 460px;
  margin: 24px auto 0;
  min-height: 260px;
  padding: 40px 32px;
}
.ext-contact-success img {
  width: 52px;
  height: 52px;
}

@media (max-width: 900px) {
  .ext-contact-card {
    grid-template-columns: 1fr;
  }
  .ext-contact-title {
    max-width: none;
  }
  /* Stacked: divider sits between the two rows, not on the side. */
  .ext-contact-panel {
    border-right: none;
    border-bottom: 1.5px solid rgba(17, 19, 21, 0.08);
  }
}
@media (max-width: 560px) {
  .ext-contact-form-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   CONTACT - reworked left rail, form panel, and custom dropdown
   ========================================================================= */
/* Assurance line - sits inside the dark panel */
.ext-contact-assurance {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1.5px solid rgba(17, 19, 21, 0.12);
}
.ext-contact-assurance-dot {
  position: relative;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25d366;
  /* Soft breathing glow (not a radar ping) - the halo swells and fades in place. */
  animation: ext-contact-glow 1.8s ease-in-out infinite;
}
@keyframes ext-contact-glow {
  0%,
  100% {
    box-shadow: 0 0 3px 0 rgba(37, 211, 102, 0.45);
  }
  50% {
    box-shadow: 0 0 9px 3px rgba(37, 211, 102, 0.6);
  }
}
.ext-contact-assurance p {
  margin: 0;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(17, 19, 21, 0.6);
}
.ext-contact-assurance strong {
  color: var(--ext-ink);
  font-weight: 700;
}

/* Form panel head */
.ext-contact-form-head {
  margin-bottom: clamp(20px, 2.4vw, 26px);
}
.ext-contact-form-head h3 {
  margin: 0 0 6px;
  font-family: var(--ext-font-primary);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 600;
  color: var(--ext-ink);
}
.ext-contact-form-head p {
  margin: 0;
  font-family: var(--ext-font-secondary);
  font-size: 14.5px;
  color: var(--ext-muted);
}

/* Submit - yellow CTA with arrow */
.ext-contact-submit {
  gap: 10px;
  color: var(--ext-ink);
  background: var(--ext-accent);
  border-color: var(--ext-accent);
}
.ext-contact-submit:hover {
  background: var(--ext-ink);
  color: #ffffff;
}
.ext-contact-submit-arrow {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform var(--ext-transition);
}
/* Stack the three icons in the same 18px box and cross-fade between them. */
.ext-contact-submit-arrow > * {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.ext-contact-submit-arrow svg {
  width: 18px;
  height: 18px;
}
.ext-submit-ic-check path {
  stroke: #ffffff;
}
/* Idle has no icon (the arrow read like an "opens elsewhere" action). The icon
   box only appears for the sending spinner and the sent check. */
.ext-contact-submit:not(.is-sending):not(.is-sent) .ext-contact-submit-arrow {
  display: none;
}
.ext-contact-submit.is-sending .ext-submit-ic-spinner {
  opacity: 1;
}
.ext-contact-submit.is-sent .ext-submit-ic-check {
  opacity: 1;
}
.ext-submit-ic-spinner {
  width: 15px;
  height: 15px;
  border: 2.2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: ext-submit-spin 0.7s linear infinite;
}
@keyframes ext-submit-spin {
  to {
    transform: rotate(360deg);
  }
}
.ext-contact-submit:hover .ext-contact-submit-arrow {
  transform: rotate(-45deg);
}
.ext-contact-submit:hover .ext-contact-submit-arrow svg path {
  stroke: #ffffff;
}

/* Custom dropdown */
.ext-select {
  position: relative;
}
.ext-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  font-family: var(--ext-font-secondary);
  font-size: 15px;
  font-weight: 500;
  color: var(--ext-ink);
  text-align: left;
  background: #fff;
  border: 1.5px solid rgba(17, 19, 21, 0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--ext-transition);
}
.ext-select.is-open .ext-select-btn,
.ext-select-btn:focus-visible {
  outline: none;
  border-color: var(--ext-ink);
}
.ext-select-chevron {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ext-ink);
  border-bottom: 2px solid var(--ext-ink);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--ext-transition);
}
.ext-select.is-open .ext-select-chevron {
  transform: rotate(-135deg) translate(-1px, -1px);
}
.ext-select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1.5px solid var(--ext-ink);
  border-radius: 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
  /* Hide the scrollbar in every engine (list is sized to fit all options) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ext-select-list::-webkit-scrollbar {
  display: none;
}
.ext-select.is-open .ext-select-list {
  max-height: 560px;
  overflow: auto;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ext-select-option {
  padding: 11px 12px;
  border-radius: 8px;
  font-family: var(--ext-font-secondary);
  font-size: 14.5px;
  font-weight: 500;
  color: #2b2e33;
  cursor: pointer;
  transition:
    background-color var(--ext-transition),
    color var(--ext-transition);
}
.ext-select-option:hover {
  background: rgba(17, 19, 21, 0.05);
}
.ext-select-option.is-selected {
  background: var(--ext-accent);
  color: var(--ext-ink);
  font-weight: 600;
}

/* =========================================================================
   CONTACT dark panel - bold yellow "Email us" card + readable capsule hovers
   (the shared capsule buttons tint on hover, which is unreadable on dark;
   scope solid fills here so text stays legible in every state)
   ========================================================================= */
/* Email card: solid accent, ink text - the primary, colourful contact CTA */
.ext-contact-panel .ext-contact-method {
  background: var(--ext-accent);
  border: 1.5px solid var(--ext-accent);
}
.ext-contact-panel .ext-contact-method:hover {
  transform: translateY(-2px);
  background: #ffce63;
  border-color: #ffce63;
}
.ext-contact-panel .ext-contact-method-ic {
  background: #ffffff;
}
.ext-contact-panel .ext-contact-method-text strong {
  color: var(--ext-ink);
}
.ext-contact-panel .ext-contact-method-text span {
  color: rgba(17, 19, 21, 0.6);
}
.ext-contact-panel .ext-contact-method-arrow svg path,
.ext-contact-panel
  .ext-contact-method:hover
  .ext-contact-method-arrow
  svg
  path {
  stroke: var(--ext-ink);
}

/* Capsule buttons: solid fills on hover so the dark label stays readable */
/* =========================================================================
   CONTACT - redesigned "Email us" card and
   dropdown placeholder / required-error states
   ========================================================================= */
.ext-contact-email {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 16px 15px 18px;
  background: #ffffff;
  border: 1px solid rgba(17, 19, 21, 0.08);
  border-radius: 16px;
  box-shadow: 0 2px 6px -2px rgba(17, 19, 21, 0.08);
  transition:
    border-color var(--ext-transition),
    background-color var(--ext-transition),
    box-shadow var(--ext-transition),
    transform var(--ext-transition);
}
.ext-contact-email:hover {
  border-color: var(--ext-accent);
  background: rgba(255, 193, 61, 0.16);
  box-shadow: 0 10px 24px -10px rgba(17, 19, 21, 0.16);
  transform: scale(1.03);
}
.ext-contact-email-ic {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--ext-accent);
  border-radius: 12px;
}
.ext-contact-email-ic svg {
  width: 24px;
  height: 24px;
}
.ext-contact-email-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ext-contact-email-label {
  font-family: var(--ext-font-primary);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 19, 21, 0.5);
}
.ext-contact-email-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ext-contact-email-value {
  font-family: var(--ext-font-primary);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 600;
  color: var(--ext-ink);
  word-break: break-all;
}
.ext-contact-email-actions {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ext-contact-email-mail,
.ext-contact-email-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  font-family: var(--ext-font-secondary);
  font-size: 13px;
  font-weight: 700;
  color: var(--ext-ink);
  background: var(--ext-accent);
  border: 1.5px solid var(--ext-accent);
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--ext-transition),
    background-color var(--ext-transition),
    border-color var(--ext-transition);
}
.ext-contact-email-mail svg,
.ext-contact-email-copy svg {
  flex-shrink: 0;
}
.ext-contact-email-mail:hover {
  transform: translateY(-1px);
  background: #ffce63;
  border-color: #ffce63;
}
/* Copy = bare icon (no circle/background) sitting beside the email address */
.ext-contact-email-copy {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 0;
  justify-content: center;
  color: rgba(17, 19, 21, 0.5);
  background: none;
  border: none;
  border-radius: 6px;
  transition:
    color var(--ext-transition),
    transform var(--ext-transition);
}
.ext-contact-email-copy:hover {
  transform: translateY(-1px);
  color: rgba(17, 19, 21, 0.85);
  background: none;
  border: none;
}
.ext-contact-email-copy:active {
  transform: scale(0.86);
}
/* Custom tooltip on the copy button - "Copy email" on hover, then "Copied"
   after a successful copy (the .is-copied class is toggled by the copy JS). */
.ext-contact-email-copy::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  padding: 5px 9px;
  font-family: var(--ext-font-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: var(--ext-ink);
  border-radius: 6px;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  z-index: 6;
}
/* Downward-pointing arrow, tucked right under the bubble. */
.ext-contact-email-copy::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  width: 0;
  height: 0;
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: var(--ext-ink) transparent transparent transparent;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  z-index: 6;
}
.ext-contact-email-copy:hover::after,
.ext-contact-email-copy:hover::before,
.ext-contact-email-copy:focus-visible::after,
.ext-contact-email-copy:focus-visible::before,
.ext-contact-email-copy.is-copied::after,
.ext-contact-email-copy.is-copied::before {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* Copied → green bubble + "Copied" label */
.ext-contact-email-copy.is-copied::after {
  content: "Copied";
  background: #16a34a;
}
.ext-contact-email-copy.is-copied::before {
  border-top-color: #16a34a;
}
/* Both icons stacked so they can cross-fade in place */
.ext-contact-email-copy svg {
  position: absolute;
  inset: 0;
  margin: auto;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.ext-contact-email-copy .ext-copy-ic-copy {
  opacity: 1;
  transform: scale(1);
}
.ext-contact-email-copy .ext-copy-ic-check {
  opacity: 0;
  transform: scale(0.4);
}
/* Copied → cross-fade to a green checkmark with a little pop */
.ext-contact-email-copy.is-copied {
  color: #25d366;
  background: none;
  border: none;
}
.ext-contact-email-copy.is-copied .ext-copy-ic-copy {
  opacity: 0;
  transform: scale(0.4);
}
.ext-contact-email-copy.is-copied .ext-copy-ic-check {
  opacity: 1;
  animation: ext-copy-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes ext-copy-pop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-12deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.25) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* Dropdown placeholder + required error */
.ext-select-placeholder {
  color: #9aa0a6;
  font-weight: 500;
}
.ext-select.is-error .ext-select-btn {
  border-color: #d93b3b;
}
.ext-select-error {
  margin: 8px 0 0;
  font-family: var(--ext-font-secondary);
  font-size: 13px;
  font-weight: 600;
  color: #d93b3b;
}

@media (max-width: 460px) {
  .ext-contact-email {
    flex-wrap: wrap;
  }
  .ext-contact-email-actions {
    margin-left: 0;
    width: 100%;
  }
}

/* Capsule buttons on the dark contact panel: translucent glass, white label
   (overrides the earlier solid-white/solid-fill rules) */
/* On the light panel the capsules share the email card's look - same subtle
   gray fill, border and rounded-rectangle radius - so all three stacked blocks
   read as one consistent set (Meet keeps its accent outline). */
.ext-contact-panel .ext-capsule-meet-btn,
.ext-contact-panel .ext-capsule-chat-btn {
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 2px 6px -2px rgba(17, 19, 21, 0.08);
}
.ext-contact-panel .ext-capsule-chat-btn {
  border-color: rgba(17, 19, 21, 0.08);
}
/* Hover: brand-tinted fill + matching border (these need panel scope so they
   out-rank the gray resting background above). */
.ext-contact-panel .ext-capsule-meet-btn:hover {
  background: rgba(255, 193, 61, 0.16);
  border-color: var(--ext-accent);
  box-shadow: 0 10px 24px -10px rgba(17, 19, 21, 0.16);
}
.ext-contact-panel .ext-capsule-chat-btn:hover {
  background: rgba(37, 211, 102, 0.16);
  border-color: #25d366;
  box-shadow: 0 10px 24px -10px rgba(17, 19, 21, 0.16);
}

/* =========================================================================
   BLOG DETAILS PAGE
   ========================================================================= */
/* Light editorial header: tag + title + meta chips, then a big rounded cover.
   Everything is capped to --ext-article-max (1300) via .ext-article-w. */
.ext-article {
  /* Match the site header's container exactly (same max-width + gutter) so the
     article content lines up with the logo. The logo/buttons sit inside
     .ext-header-shell, which is inset from the container by its 32px padding +
     1px border = 33px on each side - so the article content is inset the same
     amount to line up flush with the logo (left) and HIRE US button (right). */
  --ext-article-max: var(--ext-site-max-width);
  --ext-article-inset: 33px;
}
.ext-article-w {
  width: min(
    calc(100% - var(--ext-site-gutter) - var(--ext-article-inset) * 2),
    calc(var(--ext-article-max) - var(--ext-article-inset) * 2)
  );
  margin-inline: auto;
}
.ext-article-head {
  padding: clamp(30px, 4vw, 56px) 0 clamp(20px, 2.6vw, 34px);
}
/* Breadcrumb at the top of the article header (light background, dark text -
   mirrors the career detail breadcrumb but for the white article page). */
.ext-article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(16px, 2vw, 24px);
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  color: var(--ext-muted);
}
.ext-article-breadcrumb a {
  color: var(--ext-muted);
  transition: color var(--ext-transition);
}
.ext-article-breadcrumb a:hover {
  color: var(--ext-ink);
}
.ext-article-breadcrumb span {
  color: rgba(17, 19, 21, 0.3);
}
.ext-article-breadcrumb .ext-article-breadcrumb-current {
  color: var(--ext-ink);
}
.ext-article-cat {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  margin-bottom: clamp(18px, 2vw, 26px);
  font-family: var(--ext-font-primary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ext-ink);
  background: var(--ext-accent);
  border-radius: 50px;
}
.ext-article-title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--ext-font-primary);
  font-size: clamp(32px, 5.4vw, 68px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ext-ink);
}
/* Hand-drawn yellow highlight under a key word in the title (same wavy line as
   the careers "creative energy"). It draws in left-to-right just after the
   title's char reveal has played. */
.ext-title-draw {
  position: relative;
  white-space: nowrap;
}
.ext-title-draw::after {
  content: "";
  position: absolute;
  left: -0.02em;
  right: -0.04em;
  bottom: -0.1em;
  height: 0.2em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20260%2016'%20preserveAspectRatio='none'%3E%3Cpath%20d='M4%2010C46%204%20104%204%20150%208s72%204%20106-3'%20fill='none'%20stroke='%23ffc13d'%20stroke-width='5'%20stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0);
  animation: ext-title-draw-in 0.75s cubic-bezier(0.4, 0.1, 0.2, 1) 1.05s both;
  pointer-events: none;
}
@keyframes ext-title-draw-in {
  to {
    clip-path: inset(0 0 0 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ext-title-draw::after {
    animation: none;
    clip-path: inset(0 0 0 0);
  }
}
.ext-article-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 34px);
}
.ext-article-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 600;
  color: var(--ext-ink);
  background: rgba(17, 19, 21, 0.045);
  border: 1.5px solid rgba(17, 19, 21, 0.1);
  border-radius: 50px;
}
.ext-chip-ic {
  width: 16px;
  height: 16px;
  color: var(--ext-muted);
}

/* Big rounded cover image */
.ext-article-cover {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(16px, 2vw, 26px);
  aspect-ratio: 16 / 8;
  background:
    radial-gradient(
      78% 100% at 18% 0%,
      rgba(255, 255, 255, 0.09),
      transparent 62%
    ),
    linear-gradient(152deg, #2c3038 0%, #141519 100%);
}
/* Empty article placeholders read as on-brand dark demo cards with a faint
   centred Externo watermark (skipped when a real image is present). */
.ext-article-cover:not(:has(img))::before,
.ext-article-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/brand-icons/ext-icon-white.svg") center / clamp(44px, 7.5%, 82px)
    auto no-repeat;
  opacity: 0.14;
  pointer-events: none;
}
.ext-article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reading column */
.ext-article-body {
  width: min(
    calc(100% - var(--ext-site-gutter) - var(--ext-article-inset) * 2),
    calc(var(--ext-article-max) - var(--ext-article-inset) * 2)
  );
  margin: clamp(40px, 5vw, 64px) auto 0;
}
.ext-article-body > * + * {
  margin-top: 24px;
}
.ext-article-body p {
  margin: 0;
  font-family: var(--ext-font-secondary);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.8;
  color: #2b2e33;
}
.ext-article-lead {
  font-size: clamp(18px, 1.5vw, 21px) !important;
  line-height: 1.65 !important;
  color: var(--ext-ink) !important;
  font-weight: 500;
}
.ext-article-body h2 {
  margin: clamp(36px, 4vw, 52px) 0 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
}
.ext-article-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ext-article-body ul li {
  position: relative;
  padding-left: 30px;
  font-family: var(--ext-font-secondary);
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.6;
  color: #2b2e33;
}
.ext-article-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  background: var(--ext-accent);
  border: 1.5px solid var(--ext-ink);
  border-radius: 5px;
}

/* In-content image (bleeds a little wider than the text column) */
.ext-article-figure {
  margin: clamp(32px, 4vw, 48px) 0;
  width: 100%;
}
/* Grey placeholder block for inner article images (matches the home / listing
   grey media - no real photo needed). */
.ext-article-ph {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(
      78% 100% at 18% 0%,
      rgba(255, 255, 255, 0.09),
      transparent 62%
    ),
    linear-gradient(152deg, #2c3038 0%, #141519 100%);
}
/* Grouped figures: a row of 2 or 3 smaller placeholders (e.g. a before/after
   comparison, or a set of examples). Each cell keeps its own caption. Stacks on
   phones. */
.ext-article-figrow {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  margin: clamp(32px, 4vw, 48px) 0;
}
.ext-article-figrow--2 {
  grid-template-columns: 1fr 1fr;
}
.ext-article-figrow--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.ext-article-figrow .ext-article-figure {
  margin: 0;
}
.ext-article-figrow .ext-article-figure img {
  height: clamp(150px, 14vw, 230px);
  aspect-ratio: auto;
  object-fit: cover;
}
.ext-article-figrow .ext-article-ph {
  height: clamp(150px, 14vw, 230px);
  aspect-ratio: auto;
}
@media (max-width: 620px) {
  .ext-article-figrow--2,
  .ext-article-figrow--3 {
    grid-template-columns: 1fr;
  }
}
.ext-article-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 18px;
  background: #17191d;
}
.ext-article-figure figcaption {
  margin-top: 12px;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ext-muted);
  text-align: center;
}

/* Pull-quote */
.ext-article-quote {
  margin: clamp(32px, 4vw, 48px) 0;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  border-left: 4px solid var(--ext-accent);
  background: rgba(255, 193, 61, 0.08);
  border-radius: 0 16px 16px 0;
}
.ext-article-quote p {
  margin: 0;
  font-family: var(--ext-font-primary) !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  font-weight: 500;
  line-height: 1.4 !important;
  letter-spacing: -0.01em;
  color: var(--ext-ink) !important;
}
.ext-article-quote cite {
  display: block;
  margin-top: 16px;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  color: var(--ext-muted);
}
.ext-article-quote cite::before {
  content: "\2014\00a0";
}

/* Author box */
.ext-article-author-wrap {
  margin-top: clamp(48px, 6vw, 80px);
}
.ext-article-author {
  display: flex;
  gap: clamp(18px, 2.4vw, 28px);
  width: min(calc(100% - var(--ext-site-gutter)), 860px);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 36px);
  background: #f6f7f9;
  border: 1px solid rgba(3, 7, 18, 0.06);
  border-radius: 22px;
}
.ext-article-author-avatar {
  flex-shrink: 0;
  width: clamp(64px, 8vw, 84px);
  height: clamp(64px, 8vw, 84px);
  border-radius: 50%;
  overflow: hidden;
  background: #eceef1;
}
.ext-article-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ext-article-author-ey {
  font-family: var(--ext-font-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ext-muted);
}
.ext-article-author-h {
  margin: 6px 0 8px;
  font-family: var(--ext-font-primary);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 600;
  color: var(--ext-ink);
}
.ext-article-author-bio {
  margin: 0 0 14px;
  max-width: 56ch;
  font-family: var(--ext-font-secondary);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ext-muted);
}
.ext-article-author-social {
  display: flex;
  gap: 10px;
}
.ext-article-author-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: #fff;
  border: 1.5px solid rgba(17, 19, 21, 0.12);
  border-radius: 50%;
  transition:
    border-color var(--ext-transition),
    transform var(--ext-transition);
}
.ext-article-author-social a:hover {
  border-color: var(--ext-ink);
  transform: translateY(-2px);
}
.ext-article-author-social img {
  width: 17px;
  height: 17px;
}

/* =========================================================================
   Recommended blogs carousel
   ========================================================================= */
.ext-recs {
  padding: clamp(56px, 8vw, 100px) 0 var(--ext-section-gap);
}
/* Blog detail: the recommended-articles carousel and the case-study CTA each
   carried a full section-gap, stacking into a large void between them. Tighten
   the recs' bottom padding and drop the CTA's top margin when it follows the
   article. Scoped to blog articles so content-landing pages (CTA lives inside
   the article, before recs) are unaffected. */
.ext-article:not(.ext-content-article) .ext-recs {
  padding-bottom: clamp(24px, 3vw, 40px);
}
.ext-article:not(.ext-content-article) + .ext-cta-area {
  margin-top: 0;
}
.ext-recs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.ext-recs-title {
  margin: 16px 0 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
}
.ext-recs-nav {
  display: flex;
  gap: 10px;
}
.ext-recs-btn {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  background: #fff;
  border: 1.5px solid var(--ext-ink);
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color var(--ext-transition),
    transform var(--ext-transition);
}
.ext-recs-btn svg {
  width: 22px;
  height: 22px;
}
.ext-recs-btn:hover {
  background: var(--ext-accent);
  transform: translateY(-2px);
}
/* Viewport is clipped to the 1300 wrapper; a symmetric fade on both edges
   makes cards dissolve into the page (immersive) as they scroll in/out. */
.ext-recs-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: auto;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}
.ext-recs-viewport::-webkit-scrollbar {
  display: none;
}
.ext-recs-viewport.is-dragging {
  cursor: grabbing;
}
.ext-recs-track {
  display: flex;
  gap: 20px;
  width: max-content;
  /* bottom room so each card's hover shadow renders inside the clipped viewport */
  padding: 14px clamp(8px, 1.6vw, 26px) 48px;
}
.ext-rec-card {
  flex: 0 0 clamp(320px, 40vw, 468px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ext-line, #eceef1);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  /* No resting shadow - it appears only on hover. The carousel track carries
     extra bottom padding so this hover shadow is never clipped. */
  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}
.ext-rec-card:hover {
  box-shadow: 0 22px 45px -26px rgba(17, 19, 21, 0.32);
}
.ext-rec-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(
      78% 100% at 18% 0%,
      rgba(255, 255, 255, 0.09),
      transparent 62%
    ),
    linear-gradient(152deg, #2c3038 0%, #141519 100%);
}
/* faint centred Externo watermark on the empty recommended-card thumbnails */
.ext-rec-media:not(:has(img))::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/brand-icons/ext-icon-white.svg") center / clamp(40px, 20%, 68px)
    auto no-repeat;
  opacity: 0.14;
  pointer-events: none;
}
.ext-rec-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ext-rec-card:hover .ext-rec-media img {
  transform: scale(1.05);
}
/* Panel below the image - mirrors the main blog card (ring category, title,
   author + Read-article footer). */
.ext-rec-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 1.9vw, 28px);
  color: var(--ext-ink);
}
.ext-rec-cat {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  padding-top: 7px;
  font-family: var(--ext-font-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ext-muted);
  perspective: 320px;
}
.ext-rec-cat .ext-blog-ring {
  position: absolute;
  top: 0;
  left: 1px;
}
.ext-rec-card:hover .ext-rec-cat .ext-blog-ring {
  animation: ext-blog-ring-spin 1.1s linear infinite;
}
.ext-rec-title {
  align-self: flex-start;
  margin: 12px 0 0;
  padding-bottom: 2px;
  font-family: var(--ext-font-primary);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 600;
  line-height: 1.24;
  color: var(--ext-ink);
  background-image: linear-gradient(
    var(--ext-accent, #ffc13d),
    var(--ext-accent, #ffc13d)
  );
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ext-rec-card:hover .ext-rec-title {
  background-size: 100% 2px;
}

@media (max-width: 760px) {
  .ext-article-author {
    flex-direction: column;
  }
  .ext-recs-head {
    align-items: flex-start;
  }
}

/* Blog article - responsive hero */
@media (max-width: 900px) {
  .ext-article-hero {
    min-height: 74vh;
    align-items: flex-end;
    padding: clamp(110px, 24vw, 150px) 0 clamp(32px, 7vw, 48px);
  }
  .ext-article-hero-shade {
    background: linear-gradient(
      to top,
      rgba(8, 9, 11, 0.94) 0%,
      rgba(8, 9, 11, 0.62) 42%,
      rgba(8, 9, 11, 0.3) 100%
    );
  }
}
@media (max-width: 560px) {
  .ext-article-hero {
    min-height: 68vh;
  }
  .ext-article-title {
    max-width: none;
  }
}

/* =========================================================================
   Internal-link component (inline, within article body)
   Default: light-yellow tint, bold ink, underlined in solid brand yellow.
   Hover/focus: underline disappears, box fills full brand yellow.
   ========================================================================= */
.ext-ilink {
  color: var(--ext-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ext-accent);
  background: rgba(255, 193, 61, 0.12);
  padding: 1px 6px;
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition:
    background-color var(--ext-transition),
    text-decoration-color var(--ext-transition);
}
.ext-ilink:hover,
.ext-ilink:focus-visible {
  background: var(--ext-accent);
  text-decoration-color: transparent;
  outline: none;
}

/* =========================================================================
   Article Externo sign-off - a dark, branded "written by" card that closes
   the article (creative punctuation between the light body and recs).
   ========================================================================= */
.ext-article-signoff {
  margin-top: clamp(48px, 6vw, 84px);
}
.ext-article-signoff-card {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.8vw, 32px);
  padding: clamp(26px, 3.2vw, 40px);
  background: #f6f7f9;
  color: var(--ext-ink);
  border: 1.5px solid rgba(3, 7, 18, 0.08);
  border-radius: 24px;
  transition: border-color var(--ext-transition);
}
.ext-article-signoff-card:hover {
  border-color: rgba(17, 19, 21, 0.28);
}
.ext-article-signoff-badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(64px, 7vw, 88px);
  height: clamp(64px, 7vw, 88px);
  background: #ffffff;
  border: 1.5px solid rgba(17, 19, 21, 0.14);
  border-radius: 50%;
  transition:
    transform var(--ext-transition),
    border-color var(--ext-transition);
}
.ext-article-signoff-card:hover .ext-article-signoff-badge {
  border-color: var(--ext-accent);
  transform: rotate(-6deg);
}
.ext-article-signoff-badge img {
  width: 50%;
  height: 50%;
  object-fit: contain;
}
.ext-article-signoff-body {
  flex: 1;
}
.ext-article-signoff-ey {
  font-family: var(--ext-font-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ext-muted);
}
.ext-article-signoff-name {
  margin: 7px 0 10px;
  font-family: var(--ext-font-primary);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ext-ink);
}
.ext-article-signoff-desc {
  margin: 0;
  max-width: none;
  font-family: var(--ext-font-secondary);
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--ext-muted);
}
@media (max-width: 620px) {
  .ext-article-signoff-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ==================================================================
   PROJECT DETAILS / CASE STUDY v3  (projects/<slug>.html)
   White editorial layout. Breadcrumb chips, tighter hero, sticky
   contents index + scrollspy main column, PhotoSwipe gallery lightbox
   (drag / arrows / counter), ring-icon testimonial, Partner-with-us CTA.
   Reuses .ext-container / ext-title-anim / data-ext-fill / data-ext-reveal
   / .ext-about-eyebrow / .ext-about-business* .
   ================================================================== */
.ext-cs {
  background: #fff;
}
/* Case-study text content aligns to the header logo line and shares the site-wide
   content width (same as the blog article column). Full-bleed hero/media sit
   OUTSIDE .ext-container, so they stay edge-to-edge. */
.ext-cs .ext-container {
  padding-inline: var(--ext-content-inset);
}
/* Highlight = ink text with a hand-drawn amber underline that draws in on
   reveal (matches the projects .ext-portfolio-accent treatment). */
.ext-cs-accent {
  position: relative;
  color: var(--ext-ink);
  white-space: nowrap;
}
.ext-cs-accent svg {
  position: absolute;
  left: -0.02em;
  right: -0.02em;
  bottom: -0.14em;
  width: 102%;
  height: 0.34em;
  overflow: visible;
  color: var(--ext-accent, #ffc13d);
  pointer-events: none;
}
.ext-cs-accent svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  transition: stroke-dashoffset 0.9s ease 0.25s;
}
.ext-cs-testi-title.is-inview .ext-cs-accent svg path,
.ext-cs-accent.is-inview svg path {
  stroke-dashoffset: 0;
}
.ext-cs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ext-ink);
}
.ext-cs-kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--ext-accent);
}

/* ---- PhotoSwipe lightbox tweaks ---- */
.pswp {
  --pswp-bg: #0c0d0f;
}
.pswp__img {
  border-radius: 12px;
}
.pswp__bg {
  background: #0c0d0f;
}
[data-pswp-width] {
  cursor: zoom-in;
}

/* ---- hero ---- */
.ext-cs-hero {
  padding-top: clamp(40px, 5vh, 76px);
  padding-bottom: clamp(14px, 2.2vw, 28px);
}
.ext-cs-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}
/* Plain-text breadcrumb (matches the careers detail pages): "Projects / <name>"
   with no pill background or border - just a muted link, a faint chevron, and the
   current page in full ink. A little padding keeps a comfortable click/tap area. */
.ext-cs-crumb {
  display: inline-flex;
  align-items: center;
  padding: 4px 2px;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 600;
  color: var(--ext-muted);
  text-decoration: none;
  transition: color var(--ext-transition);
}
a.ext-cs-crumb:hover {
  color: var(--ext-ink);
}
.ext-cs-crumb--current {
  color: var(--ext-ink);
  cursor: default;
}
.ext-cs-crumb-sep {
  display: inline-flex;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  color: rgba(17, 19, 21, 0.3);
}
.ext-cs-hero-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.ext-cs-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(17, 19, 21, 0.14);
  border-radius: 12px;
  background: #fff;
}
.ext-cs-brand img {
  max-height: 22px;
  width: auto;
  display: block;
}
.ext-cs-brand--png img {
  max-height: 26px;
}
.ext-cs-brand--text {
  font-family: var(--ext-font-primary);
  font-weight: 700;
  font-size: 17px;
  color: var(--ext-ink);
}
.ext-cs-cat {
  font-family: var(--ext-font-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ext-muted);
}
/* Editorial hero: title + lede on one row, then a full-width meta strip. */
/* Stacked-left masthead: big title, lede directly beneath it. */
/* Two-column head: copy on the left, interactive brand badge on the right so
   the hero's right-hand whitespace is balanced. */
.ext-cs-hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 5vw, 90px);
  margin-top: clamp(4px, 0.8vw, 10px);
}
.ext-cs-hero-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 30px);
  min-width: 0;
}
.ext-cs-title {
  font-family: var(--ext-font-primary);
  font-size: clamp(38px, 5.8vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ext-ink);
  margin: 0;
  max-width: 16ch;
}
.ext-cs-lede {
  font-family: var(--ext-font-secondary);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.6;
  color: #4a4f55;
  margin: 0;
  /* Wider than before so the description settles onto ~3 lines. */
  max-width: 760px;
}

/* Live-site link - shown only on website-development case studies. */
.ext-cs-hero-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 11px 20px;
  border: 1px solid rgba(17, 19, 21, 0.16);
  border-radius: 50px;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  font-weight: 600;
  color: var(--ext-ink);
  text-decoration: none;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}
.ext-cs-hero-live svg {
  width: 16px;
  height: 16px;
  transition: transform 0.4s ease;
}
.ext-cs-hero-live:hover {
  background: var(--ext-ink);
  border-color: var(--ext-ink);
  color: #fff;
}
.ext-cs-hero-live:hover svg {
  transform: translate(2px, -2px);
}

/* Interactive brand badge: tap swaps the client logo for the project mascot
   (auto-reverts after 6s) with a smooth zoom-out / zoom-in crossfade. */
.ext-cs-hero-badge {
  position: relative;
  flex: 0 0 auto;
  justify-self: end;
  width: clamp(140px, 17vw, 230px);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ext-cs-hero-badge-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    opacity 0.5s ease,
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}
/* Logo shown by default; mascot waits, zoomed-down and hidden. */
.ext-cs-hero-badge-img.is-mascot {
  opacity: 0;
  transform: scale(0.5);
}
.ext-cs-hero-badge.is-flipped .ext-cs-hero-badge-img.is-logo {
  opacity: 0;
  transform: scale(0.5);
}
.ext-cs-hero-badge.is-flipped .ext-cs-hero-badge-img.is-mascot {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .ext-cs-hero-badge-img {
    transition: opacity 0.3s ease;
  }
  .ext-cs-hero-badge-img.is-mascot,
  .ext-cs-hero-badge.is-flipped .ext-cs-hero-badge-img.is-logo {
    transform: none;
  }
}
@media (max-width: 767px) {
  .ext-cs-hero-head {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: clamp(22px, 6vw, 34px);
  }
  .ext-cs-hero-badge {
    justify-self: start;
    width: clamp(120px, 32vw, 170px);
  }
}
/* Meta strip - four columns divided by rules, under a top border. */
.ext-cs-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(38px, 4.5vw, 64px);
  padding-top: clamp(24px, 2.8vw, 34px);
  border-top: 1px solid rgba(17, 19, 21, 0.16);
}
.ext-cs-spec {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 clamp(20px, 2.6vw, 44px);
  border-left: 1px solid rgba(17, 19, 21, 0.1);
}
.ext-cs-spec:first-child {
  padding-left: 0;
  border-left: none;
}
.ext-cs-spec > span {
  font-family: var(--ext-font-secondary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffc13d;
}
.ext-cs-spec-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ext-cs-spec-list strong {
  font-family: var(--ext-font-primary);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ext-ink);
}
/* Client value rendered as the live-site link (the client name already appears
   in the breadcrumb, title and logo, so the slot carries the URL instead). */
.ext-cs-spec-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ext-font-primary);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ext-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(17, 19, 21, 0.28);
  padding-bottom: 1px;
  width: fit-content;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}
.ext-cs-spec-link svg {
  width: 13px;
  height: 13px;
  transition: transform 0.35s ease;
}
.ext-cs-spec-link:hover {
  color: #b98900;
  border-color: #ffc13d;
}
.ext-cs-spec-link:hover svg {
  transform: translate(2px, -2px);
}

/* ---- figures (thumbnails) ---- */
.ext-cs-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(14px, 1.6vw, 22px);
  background: #f1f2f4;
  border: 1px solid rgba(17, 19, 21, 0.06);
  box-shadow: 0 14px 38px -24px rgba(17, 19, 21, 0.3);
}
.ext-cs-shot {
  display: block;
  width: 100%;
  height: 100%;
}
body.ext-cs-cursor-on .ext-cs-shot,
body.ext-cs-cursor-on .ext-cs-shot img {
  cursor: none;
}
.ext-cs-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ext-cs-figure:hover img {
  transform: scale(1.045);
}
.ext-cs-figure::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(17, 19, 21, 0.82)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E")
    center / 18px no-repeat;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity var(--ext-transition),
    transform var(--ext-transition);
  pointer-events: none;
}
.ext-cs-figure:hover::after {
  opacity: 1;
  transform: scale(1);
}
.ext-cs-hero-media {
  margin: clamp(24px, 3.4vw, 46px) 0 0;
}
.ext-cs-hero-media .ext-cs-figure {
  aspect-ratio: 16 / 8.2;
}
/* Full-bleed hero image - edge to edge, no radius/side border. The image is a
   bare child here (not wrapped in .ext-cs-figure), so it needs its own width
   rule: without one it renders at its intrinsic pixel width and leaves a gap
   down the right-hand side on any viewport wider than the file. */
.ext-cs-hero-media--full {
  width: 100%;
}
/* The hero closes on this image on every case study, so the section's bottom
   padding would only ever read as a white strip between the image and whatever
   band follows it. Cancel it here rather than on .ext-cs-hero, so a hero that
   ever ends on something else keeps its breathing room. */
.ext-cs-hero-media--full:last-child {
  margin-bottom: calc(-1 * clamp(14px, 2.2vw, 28px));
}
.ext-cs-hero-media--full > img {
  display: block;
  width: 100%;
  height: auto;
}
/* The hero image stays full-bleed (edge to edge). The recommendations carousel is
   capped to the site max width and centred so it doesn't run past the page edges. */
.ext-cs .ext-cs-more-vp {
  max-width: var(--ext-site-max-width);
  margin-inline: auto;
}
.ext-cs-figure--full {
  border-radius: 0;
  border-left: none;
  border-right: none;
  box-shadow: none;
}
.ext-cs-full .ext-cs-figure {
  aspect-ratio: 16 / 8.5;
}

/* ---- statement (centered highlight inside the reading column) ---- */
.ext-cs-statement {
  font-family: var(--ext-font-primary);
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ext-ink);
  text-align: center;
  max-width: 820px;
  margin: clamp(8px, 1.4vw, 18px) auto;
}

/* ---- study: sticky index + main ---- */
.ext-cs-study {
  padding: clamp(18px, 2.6vw, 40px) 0 clamp(40px, 6vw, 80px);
}
.ext-cs-study-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 236px);
  gap: clamp(28px, 3vw, 56px);
  align-items: start;
  /* Fill the container (same width as the hero/header) so the body's left and
     right edges line up with the case-study header instead of sitting inset.
     The reading measure is kept sensible by capping the prose itself below. */
}
/* Keep a comfortable line length for the prose while its left edge stays aligned
   with the hero; the sticky Contents column fills the right side. */
.ext-cs-main {
  max-width: 1200px;
}
/* Contents index sits in the RIGHT column; main reading column on the left.
   Explicit placement keeps the source order (index first) so it still stacks
   on top on mobile. */
.ext-cs-index {
  position: sticky;
  top: 104px;
  grid-column: 2;
  grid-row: 1;
}
.ext-cs-main {
  grid-column: 1;
  grid-row: 1;
}
.ext-cs-index-label {
  font-family: var(--ext-font-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ext-muted);
  margin: 0 0 14px;
}
.ext-cs-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(17, 19, 21, 0.12);
}
.ext-cs-index-link {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 11px 0 11px 18px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-family: var(--ext-font-primary);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ext-muted);
  text-decoration: none;
  transition:
    color var(--ext-transition),
    border-color var(--ext-transition);
}
.ext-cs-index-link .n {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.65;
}
.ext-cs-index-link:hover {
  color: var(--ext-ink);
}
.ext-cs-index-link.is-active {
  color: var(--ext-ink);
  border-left-color: var(--ext-accent);
}
.ext-cs-main {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 56px);
  min-width: 0;
}
.ext-cs-sec {
  scroll-margin-top: 104px;
}
.ext-cs-sec-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.ext-cs-sec-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 9px;
  flex: none;
  border-radius: 7px;
  background: var(--ext-accent);
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 700;
  color: var(--ext-ink);
}
.ext-cs-sec h2 {
  font-family: var(--ext-font-primary);
  font-size: clamp(23px, 2.7vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ext-ink);
  margin: 0;
}
.ext-cs-sec p {
  font-family: var(--ext-font-secondary);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.72;
  color: #3a3f45;
  margin: 0;
}
.ext-cs-sec p + p {
  margin-top: 16px;
}

/* image blocks inside the main column */
.ext-cs-trio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
}
.ext-cs-trio-lead {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 8.4;
}
.ext-cs-trio .ext-cs-figure:not(.ext-cs-trio-lead) {
  aspect-ratio: 4 / 3;
}
.ext-cs-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.ext-cs-grid2 .ext-cs-figure {
  aspect-ratio: 4 / 3.1;
}

/* ---- outcome bullets ---- */
.ext-cs-outcomes {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 44px;
}
.ext-cs-outcomes li {
  position: relative;
  padding-left: 30px;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.5;
  color: #3a3f45;
}
.ext-cs-outcomes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ext-accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23111315' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}

/* ---- promo video box ---- */
.ext-cs-video-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.ext-cs-video-head h2 {
  max-width: none;
}
.ext-cs-video-head h2 {
  font-family: var(--ext-font-primary);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ext-ink);
  margin: 0;
  max-width: 18ch;
}
.ext-cs-video {
  margin: 0;
}
.ext-cs-inline-video {
  margin: clamp(38px, 5vw, 64px) 0;
}
.ext-cs-video-head .ext-about-eyebrow--bare {
  color: var(--ext-ink);
}
/* Static chip in the video head - no hover interaction. */
.ext-cs-video-head .ext-about-eyebrow {
  pointer-events: none;
}
.ext-cs-video-frame {
  position: relative;
  overflow: hidden;
  border-radius: clamp(16px, 2vw, 26px);
  border: 0;
  aspect-ratio: 16 / 9;
  background: #e9eaec;
  cursor: pointer;
}
.ext-cs-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Match the frame's radius so the clipped corners align exactly and no
     1px backing sliver shows through at the rounded edges. */
  border-radius: inherit;
}
/* Sound toggle button, bottom-left. Revealed on hover / when unmuted /
   when paused, and always tappable so touch users can reach it too. */
.ext-cs-video-sound {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ext-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transform: translateY(8px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
  transition:
    opacity var(--ext-transition),
    transform var(--ext-transition),
    background var(--ext-transition);
}
.ext-cs-video-sound:hover {
  background: #fff;
}
.ext-cs-video-frame:hover .ext-cs-video-sound,
.ext-cs-video-frame.is-unmuted .ext-cs-video-sound,
.ext-cs-video-frame.is-paused .ext-cs-video-sound {
  opacity: 1;
  transform: none;
}
/* Keep a real pointer over the button even when the frame hides the cursor. */
body.ext-vcursor-ready .ext-cs-video-frame .ext-cs-video-sound {
  cursor: pointer !important;
}
.ext-cs-video-sound svg {
  width: 21px;
  height: 21px;
}
/* Show exactly one icon. Scoped selectors out-specify `.ext-cs-video-sound svg`
   so the swap always wins (muted shows volume-off; unmuted shows volume). */
.ext-cs-video-sound .ext-cs-video-sound-off {
  display: block;
}
.ext-cs-video-sound .ext-cs-video-sound-on {
  display: none;
}
.ext-cs-video-frame.is-unmuted .ext-cs-video-sound .ext-cs-video-sound-off {
  display: none;
}
.ext-cs-video-frame.is-unmuted .ext-cs-video-sound .ext-cs-video-sound-on {
  display: block;
}
/* Text "Unmute" / "Mute" cursor bubble over the video (hover devices). */
body.ext-vcursor-ready .ext-cs-video-frame,
body.ext-vcursor-ready .ext-cs-video-frame * {
  cursor: none !important;
}
.ext-cs-video-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99997;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(17, 19, 21, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #fff;
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition:
    opacity 0.18s ease,
    transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform, left, top;
}
.ext-cs-video-cursor.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ext-cs-video-cap {
  margin-top: 16px;
  font-family: var(--ext-font-secondary);
  font-size: 14.5px;
  color: var(--ext-muted);
  text-align: center;
}
/* Centered play badge - fades in only while the video is paused. */
.ext-cs-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ext-ink);
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.34);
  transition:
    opacity var(--ext-transition),
    transform var(--ext-transition);
  z-index: 2;
}
.ext-cs-video-frame.is-paused .ext-cs-video-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ext-cs-video-play svg {
  width: 30px;
  height: 30px;
  margin-left: 3px;
  display: block;
}
/* A subtle dim while paused so the play badge reads clearly. */
.ext-cs-video-frame.is-paused .ext-cs-video-el {
  filter: brightness(0.72);
  transition: filter var(--ext-transition);
}

/* Table N Beyond: show screenshots at their natural aspect (no cover-crop). */
.ext-cs-figure--natural {
  aspect-ratio: auto;
  background: #0c0d0f;
}
.ext-cs-figure--natural .ext-cs-shot {
  height: auto;
}
.ext-cs-figure--natural img {
  height: auto;
  object-fit: contain;
}

/* Table N Beyond: branded logo-opener band (the trademarked TB monogram). */
.ext-cs-logo-band {
  margin: 0;
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  background:
    radial-gradient(
      120% 140% at 50% 0%,
      rgba(124, 58, 237, 0.16),
      rgba(12, 13, 15, 0) 60%
    ),
    #0c0d0f;
  border: 1px solid rgba(17, 19, 21, 0.06);
  box-shadow: 0 14px 38px -24px rgba(17, 19, 21, 0.3);
}
.ext-cs-logo-band-stage {
  display: grid;
  place-items: center;
  padding: clamp(28px, 6vw, 72px);
}
.ext-cs-logo-band-vid {
  width: min(100%, 640px);
  height: auto;
  display: block;
}
/* Wide variant for a full 16:9 opener (rather than a compact logo mark). */
.ext-cs-logo-band--wide .ext-cs-logo-band-vid {
  width: min(100%, 820px);
  border-radius: clamp(10px, 1.4vw, 16px);
  overflow: hidden;
}
.ext-cs-logo-band .ext-cs-video-cap {
  margin: 0;
  padding: 0 clamp(20px, 4vw, 40px) clamp(22px, 4vw, 34px);
  color: rgba(255, 255, 255, 0.62);
}

/* ---- design-process slide deck (draggable 16:9 carousel) ---- */
.ext-cs-deck-sec {
  padding: 0 0 clamp(8px, 1.4vw, 20px);
}
.ext-cs-deck {
  max-width: var(--ext-site-max-width);
  margin-inline: auto;
}
/* Inline variant: sits in the reading column, fills its width. */
.ext-cs-deck--inline {
  max-width: none;
}

/* Social-content grids: square feed posts (1:1) and vertical stories (9:16),
   cells match the artwork so nothing is cropped. */
.ext-cs-postgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
}
.ext-cs-postgrid .ext-cs-figure {
  aspect-ratio: 1 / 1;
}
.ext-cs-storygrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.ext-cs-storygrid .ext-cs-figure {
  aspect-ratio: 9 / 16;
}
/* Square social-feed grid (Instagram-style posts). */
.ext-cs-feedgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.ext-cs-feedgrid .ext-cs-figure {
  aspect-ratio: 1 / 1;
}
@media (max-width: 640px) {
  .ext-cs-feedgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .ext-cs-postgrid {
    grid-template-columns: 1fr;
  }
}
.ext-cs-deck-frame {
  position: relative;
  overflow: hidden;
  border-radius: clamp(16px, 2vw, 26px);
  aspect-ratio: 16 / 9;
  background: #e9eaec;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.ext-cs-deck-frame.is-grabbing {
  cursor: grabbing;
}
.ext-cs-deck-track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.ext-cs-deck-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
}
.ext-cs-deck-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
/* controls row */
.ext-cs-deck-ui {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(16px, 2vw, 24px);
}
.ext-cs-deck-btn {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(17, 19, 21, 0.16);
  background: #fff;
  color: var(--ext-ink);
  cursor: pointer;
  transition:
    background var(--ext-transition),
    border-color var(--ext-transition),
    transform var(--ext-transition),
    opacity var(--ext-transition);
}
.ext-cs-deck-btn:hover {
  background: var(--ext-ink);
  border-color: var(--ext-ink);
  color: #fff;
}
.ext-cs-deck-btn:disabled {
  opacity: 0.32;
  cursor: default;
  background: #fff;
  border-color: rgba(17, 19, 21, 0.16);
  color: var(--ext-ink);
}
.ext-cs-deck-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}
.ext-cs-deck-meter {
  flex: 1;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 18px);
  min-width: 0;
}
.ext-cs-deck-bar-track {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(17, 19, 21, 0.12);
  overflow: hidden;
}
.ext-cs-deck-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--ext-accent);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ext-cs-deck-count {
  flex: none;
  font-family: var(--ext-font-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ext-ink);
  font-variant-numeric: tabular-nums;
}
.ext-cs-deck-count .sep {
  color: var(--ext-muted);
  margin: 0 3px;
  font-weight: 600;
}
.ext-cs-deck-count .tot {
  color: var(--ext-muted);
}
/* dots */
.ext-cs-deck-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(14px, 1.8vw, 20px);
}
.ext-cs-deck-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 19, 21, 0.18);
  cursor: pointer;
  transition:
    background var(--ext-transition),
    transform var(--ext-transition);
}
.ext-cs-deck-dot:hover {
  background: rgba(17, 19, 21, 0.4);
}
.ext-cs-deck-dot.is-active {
  background: var(--ext-accent);
  transform: scale(1.35);
}
@media (max-width: 640px) {
  .ext-cs-deck-btn {
    width: 40px;
    height: 40px;
  }
}
/* Live-site link under the video/preview block. */
.ext-cs-live {
  margin-top: 14px;
  text-align: center;
}
.ext-cs-live-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ext-font-primary);
  font-size: 15px;
  font-weight: 600;
  color: var(--ext-ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--ext-accent);
  transition:
    gap 0.3s ease,
    color 0.25s ease;
}
.ext-cs-live-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ext-cs-live-link:hover {
  gap: 11px;
  color: var(--ext-muted);
}
.ext-cs-live-link:hover svg {
  transform: translate(2px, -2px);
}

/* ---- testimonial ---- */
.ext-cs-testi {
  background: #ffffff;
  padding: clamp(56px, 8vw, 104px) 0;
}
.ext-cs-testi-title {
  font-family: var(--ext-font-primary);
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ext-ink);
  margin: 16px 0 clamp(30px, 4vw, 48px);
  max-width: 16ch;
}
.ext-cs-testi-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(17, 19, 21, 0.1);
  border-radius: clamp(18px, 2vw, 28px);
  padding: clamp(30px, 4vw, 62px);
}
/* Immersive quotation mark - a large watermark that reads as part of the card
   itself, sitting behind the copy rather than as a separate block. */
.ext-cs-testi-card::before {
  content: "";
  position: absolute;
  top: clamp(-30px, -2.4vw, -12px);
  left: clamp(18px, 2.6vw, 40px);
  width: clamp(150px, 22vw, 300px);
  height: clamp(150px, 22vw, 300px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23111315'%3E%3Cpath d='M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E")
    left top / contain no-repeat;
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
}
.ext-cs-testi .ext-about-eyebrow--bare {
  color: var(--ext-ink);
}
.ext-cs-testi-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: clamp(24px, 3vw, 36px);
  padding-top: clamp(36px, 4.5vw, 58px);
}
.ext-cs-testi-brand,
.ext-cs-testi-quote,
.ext-cs-testi-by {
  position: relative;
  z-index: 1;
}
.ext-cs-testi-brand {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ext-font-primary);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ext-ink);
}
.ext-cs-testi-brand::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--ext-accent);
}
.ext-cs-testi-quote {
  font-family: var(--ext-font-primary);
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
  margin: 0;
}
.ext-cs-testi-by {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ext-cs-testi-by strong {
  font-family: var(--ext-font-primary);
  font-weight: 700;
  font-size: 16px;
  color: var(--ext-ink);
}
.ext-cs-testi-by span {
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  color: var(--ext-muted);
}
.ext-cs-testi-photo {
  border-radius: clamp(14px, 1.6vw, 20px);
  overflow: hidden;
  background: #e9eaec;
  min-height: 220px;
}
.ext-cs-testi-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- demo media cards (dark Externo stand-ins) ----------------------------
   On-brand stand-ins for real project shots: a deep Externo-grey gradient with
   a soft top-left highlight and a faint, fixed-size Externo "e" watermark. The
   watermark size is clamped (not tied to the box) so every slot - the wide
   hero band, the trio, the 2-up grid, and the 16/9 video - reads as one
   consistent, undistorted demo card. Non-interactive: no zoom badge. */
.ext-cs-ph {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: clamp(16px, 2vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ext-cs-ph,
.ext-cs-figure--ph {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      78% 100% at 18% 0%,
      rgba(255, 255, 255, 0.09),
      transparent 62%
    ),
    linear-gradient(152deg, #2c3038 0%, #141519 100%);
  transition:
    border-color 0.4s ease,
    background 0.4s ease;
}
/* recolour the base ink border to a light hairline without re-adding the
   full-bleed hero figure's removed side borders (border-color only). */
.ext-cs-figure--ph {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px -26px rgba(17, 19, 21, 0.45);
}
/* the full-bleed hero band stays flush - no lift shadow at its edges */
.ext-cs-figure--full.ext-cs-figure--ph {
  box-shadow: none;
}
/* faint centred Externo watermark on the image figures */
.ext-cs-figure--ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/brand-icons/ext-icon-white.svg") center / clamp(44px, 7.5%, 82px)
    auto no-repeat;
  opacity: 0.14;
  pointer-events: none;
}
/* static demo cards - drop the zoom badge and the image hover-zoom, add a
   subtle amber edge on hover as the one spot of brand interactivity. */
.ext-cs-figure--ph::after {
  content: none;
}
.ext-cs-figure--ph:hover {
  border-color: rgba(255, 193, 61, 0.34);
}
.ext-cs-figure--ph:hover img {
  transform: none;
}
/* the promo-video slot gets a centred play affordance instead of the watermark */
.ext-cs-ph::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(58px, 6vw, 76px);
  height: clamp(58px, 6vw, 76px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23141519'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E")
    58% center / 34% no-repeat;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

/* ---- testimonial brand panel (right column): the project tile as an
   immersive backdrop - gradient + blueprint grid + a large blurred logo
   watermark behind a crisp centred logo. Colour comes from the project's own
   .ext-portfolio-cover--N gradient class on the panel. ---- */
.ext-cs-testi-brandpanel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* matches the project card's inner media tile radius */
  border-radius: 16px;
  min-height: clamp(240px, 30vw, 340px);
  display: grid;
  place-items: center;
  /* Dark demo theme: overrides the project's light .ext-portfolio-cover--N tint
     so the panel matches the site-wide dark placeholder cards. */
  background:
    radial-gradient(
      78% 100% at 18% 0%,
      rgba(255, 255, 255, 0.09),
      transparent 62%
    ),
    linear-gradient(152deg, #2c3038 0%, #141519 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ext-cs-testi-brandpanel::before {
  /* blueprint grid, masked - same motif as the project cards (light on dark) */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(
    80% 80% at 50% 45%,
    #000 40%,
    transparent 100%
  );
  mask-image: radial-gradient(80% 80% at 50% 45%, #000 40%, transparent 100%);
  pointer-events: none;
}
/* Dark demo theme: drop the project logos and show the centred Externo icon
   watermark instead - matches every other dark placeholder card on the site. */
.ext-cs-testi-brandbg,
.ext-cs-testi-brandlogo {
  display: none;
}
.ext-cs-testi-brandpanel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../images/brand-icons/ext-icon-white.svg") center / clamp(64px, 16%, 120px)
    auto no-repeat;
  opacity: 0.16;
  pointer-events: none;
}
/* ---- explore more (2-at-a-time loop) ---- */
.ext-cs-more {
  padding: clamp(56px, 8vw, 100px) 0 clamp(48px, 7vw, 88px);
  overflow: hidden;
}
.ext-cs-more-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(26px, 3.4vw, 44px);
}
.ext-cs-more-head h2 {
  font-family: var(--ext-font-primary);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ext-ink);
  margin: 0;
}
.ext-cs-more-nav {
  display: flex;
  gap: 10px;
  flex: none;
}
.ext-cs-more-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(17, 19, 21, 0.16);
  background: #fff;
  color: var(--ext-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background var(--ext-transition),
    border-color var(--ext-transition),
    color var(--ext-transition);
}
.ext-cs-more-btn svg {
  width: 20px;
  height: 20px;
}
.ext-cs-more-btn:hover {
  background: var(--ext-ink);
  border-color: var(--ext-ink);
  color: #fff;
}
.ext-cs-more-vp {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
}
.ext-cs-more-vp::-webkit-scrollbar {
  display: none;
}
.ext-cs-more-vp.is-dragging {
  cursor: grabbing;
}
.ext-cs-more-track {
  display: flex;
  gap: clamp(16px, 1.8vw, 24px);
  width: max-content;
  /* Generous vertical padding so the card's hover shadow lives fully inside the
     scroll viewport - overflow-x:auto forces overflow-y to clip, so the padding
     (part of layout) is what gives the shadow room instead of being cut off. */
  padding: 28px 8px 64px;
}
.ext-cs-more-track .ext-portfolio-card {
  flex: 0 0 auto;
  width: clamp(280px, 44vw, 660px);
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .ext-cs-hero-head {
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 24px);
    align-items: start;
  }
  .ext-cs-specs {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(22px, 4vw, 32px) 0;
  }
  .ext-cs-spec:nth-child(3) {
    padding-left: 0;
    border-left: none;
  }
  .ext-cs-study-grid {
    grid-template-columns: 1fr;
    gap: clamp(22px, 5vw, 34px);
  }
  .ext-cs-index,
  .ext-cs-main {
    grid-column: auto;
    grid-row: auto;
  }
  .ext-cs-index {
    position: static;
  }
  .ext-cs-index-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    border-left: none;
  }
  .ext-cs-index-link {
    padding: 8px 14px;
    margin-left: 0;
    border-left: none;
    border: 1px solid rgba(17, 19, 21, 0.14);
    border-radius: 999px;
    font-size: 14px;
  }
  .ext-cs-index-link.is-active {
    border-color: var(--ext-ink);
    background: var(--ext-ink);
    color: #fff;
  }
  .ext-cs-index-link.is-active .n {
    color: var(--ext-accent);
    opacity: 1;
  }
  .ext-cs-testi-card {
    grid-template-columns: 1fr;
  }
  .ext-cs-testi-brandpanel {
    min-height: 220px;
  }
}
@media (max-width: 720px) {
  .ext-cs-trio {
    grid-template-columns: 1fr;
  }
  .ext-cs-trio-lead,
  .ext-cs-trio .ext-cs-figure:not(.ext-cs-trio-lead) {
    aspect-ratio: 16 / 11 !important;
  }
  .ext-cs-grid2 {
    grid-template-columns: 1fr;
  }
  .ext-cs-outcomes {
    grid-template-columns: 1fr;
  }
  .ext-cs-more-track .ext-portfolio-card {
    width: 80vw;
  }
  .ext-cs-figure::after {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---- Floating "View" cursor over case-study images (JS positions it) ---- */
.ext-cs-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99998;
  width: 84px;
  height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 50%;
  background: rgba(255, 193, 61, 0.55);
  border: 1.5px solid #d99a1e;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.ext-cs-cursor svg {
  width: 18px;
  height: 18px;
}
.ext-cs-cursor--css {
  transform: translate(-50%, -50%) scale(0);
  transition:
    opacity 0.25s ease,
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ext-cs-cursor--css.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---- PhotoSwipe: custom clean UI icons + close cursor over image ---- */
.pswp__icn {
  display: none !important;
}
.pswp__button {
  opacity: 0.8;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.pswp__button:hover {
  opacity: 1;
}
.pswp__button--close,
.pswp__button--zoom,
.pswp__button--arrow--prev,
.pswp__button--arrow--next {
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.pswp__button--close {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M6%206l12%2012M18%206L6%2018'/%3E%3C/svg%3E") !important;
  background-size: 22px !important;
}
.pswp__button--zoom {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M21%2021l-4.35-4.35M11%208v6M8%2011h6'/%3E%3C/svg%3E") !important;
  background-size: 23px !important;
}
.pswp__button--arrow--prev {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%206l-6%206%206%206'/%3E%3C/svg%3E") !important;
  background-size: 30px !important;
}
.pswp__button--arrow--next {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206l6%206-6%206'/%3E%3C/svg%3E") !important;
  background-size: 30px !important;
}
.pswp__counter {
  font-family: var(--ext-font-primary);
  font-weight: 600;
  font-size: 15px;
  opacity: 0.8;
}
/* Floating "Close" bubble cursor over the opened image (JS positions it);
   native cursor is hidden over the image, and a click closes the viewer. */
body.ext-pswp-open .pswp,
body.ext-pswp-open .pswp__bg,
body.ext-pswp-open .pswp__scroll-wrap,
body.ext-pswp-open .pswp__container,
body.ext-pswp-open .pswp__item,
body.ext-pswp-open .pswp__zoom-wrap,
body.ext-pswp-open .pswp__img,
body.ext-pswp-open .pswp img {
  cursor: none !important;
}
body.ext-pswp-open .pswp__button {
  cursor: pointer !important;
}
.ext-pswp-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100001;
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 193, 61, 0.55);
  border: 1.5px solid #d99a1e;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ext-ink);
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition:
    opacity 0.2s ease,
    transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform, left, top;
}
.ext-pswp-cursor.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---- PhotoSwipe centered caption (image alt text) ---- */
.ext-pswp-caption {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  max-width: min(80vw, 760px);
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(17, 19, 21, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
.ext-pswp-caption:empty {
  display: none;
}

/* =========================================================================
   CAREERS - creative reworks (2026-07-12, v2)
   Calm, editorial, human: no ghost numbers, no glow, no boxed grids.
   The brand ring (ext-ring-icon.svg) is the recurring mark: plain section
   labels (ring + black text) and item markers. Everything FAILS READABLE:
   the resting state below is the final visible state; JS only adds gating
   classes (.is-anim/.is-lit/.is-ready/.is-in) for entrances + interaction.
   Namespaces: .ext-plain-eyebrow · .ext-mf · .ext-flow · .ext-hire.
   ========================================================================= */

/* ---------- shared: plain section label (halo ring over black text) --
   Matches the brand's halo treatment (see .ext-about-eyebrow--bare): the
   ring hovers just above the first letters of the label, not beside it. */
.ext-plain-eyebrow {
  position: relative;
  display: inline-flex;
  padding: 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ext-ink);
}
.ext-plain-eyebrow img {
  position: absolute;
  top: -4px;
  left: 9px;
  width: 20px;
  height: auto;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: ext-halo-float 3.4s ease-in-out infinite;
}

/* ---------- A. Manifesto: kinetic statement -------------------------- */
.ext-mf {
  padding: clamp(64px, 9vw, 132px) 0 clamp(48px, 6vw, 92px);
}
.ext-mf-grid {
  display: grid;
  grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 90px);
  align-items: start;
}
.ext-mf-aside {
  padding-top: 8px;
}
.ext-mf-aside .ext-plain-eyebrow {
  margin-bottom: 0;
}
.ext-mf-main {
  width: min(100%, 1080px);
  justify-self: end;
}
.ext-mf-statement {
  margin: 0;
  max-width: none;
  font-family: var(--ext-font-primary);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ext-ink);
}
@media (max-width: 860px) {
  .ext-mf-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .ext-mf-main {
    width: 100%;
    justify-self: stretch;
  }
  .ext-mf-title-break {
    display: none;
  }
}
/* hand-drawn line under "creative energy" - draws in once the fill has run */
.ext-mf-draw {
  position: relative;
  white-space: nowrap;
}
.ext-mf-draw-svg {
  position: absolute;
  left: -0.02em;
  right: -0.02em;
  bottom: -0.16em;
  width: 102%;
  height: 0.36em;
  overflow: visible;
  color: var(--ext-accent);
}
.ext-mf-draw-svg path {
  stroke: currentColor;
  stroke-dasharray: 320;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.85s ease;
}
/* JS gates the "draw" so it only animates once the statement is well in view;
   without JS the line simply shows. */
.ext-mf.is-anim .ext-mf-draw-svg path {
  stroke-dashoffset: 320;
}
.ext-mf.is-anim.is-lit .ext-mf-draw-svg path {
  stroke-dashoffset: 0;
}

.ext-mf-foot {
  margin-top: clamp(26px, 3.2vw, 44px);
}
.ext-mf-note {
  margin: 0;
  max-width: 62ch;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--ext-muted);
}

/* ---------- B. How we work: interactive editorial list --------------- */
.ext-flow {
  padding: clamp(56px, 8vw, 112px) 0;
}
.ext-flow-head {
  max-width: 760px;
  margin: 0 0 clamp(26px, 4vw, 48px);
}
.ext-flow-head .ext-plain-eyebrow {
  margin-bottom: 16px;
}
.ext-flow-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ext-ink);
}
.ext-flow-lab {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: stretch;
  border-top: 1.5px solid rgba(17, 19, 21, 0.14);
}
.ext-flow-index {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ext-flow-item {
  position: relative;
  border-bottom: 1.5px solid rgba(17, 19, 21, 0.12);
}
.ext-flow-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ext-accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ext-flow-item.is-active::before {
  transform: scaleY(1);
}
.ext-flow-btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: clamp(14px, 2vw, 28px);
  padding: clamp(18px, 2.4vw, 30px) 0 clamp(18px, 2.4vw, 30px)
    clamp(14px, 1.6vw, 24px);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.ext-flow-n {
  font-family: var(--ext-font-primary);
  font-weight: 600;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.08em;
  color: var(--ext-muted);
  transition: color var(--ext-transition);
}
.ext-flow-nm {
  font-family: var(--ext-font-primary);
  font-weight: 600;
  font-size: clamp(22px, 2.7vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ext-ink);
  transition:
    opacity var(--ext-transition),
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ext-flow-btn:hover .ext-flow-nm {
  opacity: 0.55;
}
.ext-flow-item.is-active .ext-flow-btn:hover .ext-flow-nm {
  opacity: 1;
}
.ext-flow-item.is-active .ext-flow-n {
  color: var(--ext-accent);
}
.ext-flow-item.is-active .ext-flow-nm {
  transform: translateX(clamp(4px, 0.8vw, 12px));
}

.ext-flow-stage {
  position: relative;
}
.ext-flow-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ext-flow-panel-img {
  width: clamp(210px, 23vw, 290px);
  height: auto;
  margin-bottom: clamp(22px, 3vw, 40px);
}
.ext-flow-panel-text {
  margin: 0;
  max-width: 26em;
  font-family: var(--ext-font-secondary);
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
}
/* reveal replays whenever a panel becomes active (image lifts, text wipes in) */
@keyframes ext-flow-img-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}
@keyframes ext-flow-text-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}
.ext-flow-lab.is-ready .ext-flow-panel.is-active .ext-flow-panel-img {
  animation: ext-flow-img-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.ext-flow-lab.is-ready .ext-flow-panel.is-active .ext-flow-panel-text {
  animation: ext-flow-text-in 0.62s cubic-bezier(0.2, 0.7, 0.2, 1) 0.14s both;
}
/* interactive: panels stack, absolutely centred in the stage (which stretches
   to the index height), so only opacity changes on switch - no height jump and
   the block sits vertically centred against the list. */
.ext-flow-lab.is-ready .ext-flow-panel {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.ext-flow-lab.is-ready .ext-flow-panel.is-active {
  opacity: 1;
  visibility: visible;
}

/* index entrance (JS-gated) */
.ext-flow-lab.is-anim .ext-flow-item {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ext-flow-lab.is-anim.is-in .ext-flow-item {
  opacity: 1;
  transform: none;
}
.ext-flow-lab.is-anim.is-in .ext-flow-item:nth-child(2) {
  transition-delay: 0.07s;
}
.ext-flow-lab.is-anim.is-in .ext-flow-item:nth-child(3) {
  transition-delay: 0.14s;
}
.ext-flow-lab.is-anim.is-in .ext-flow-item:nth-child(4) {
  transition-delay: 0.21s;
}

@media (max-width: 820px) {
  .ext-flow-lab {
    grid-template-columns: 1fr;
    gap: clamp(18px, 4vw, 30px);
  }
  .ext-flow-stage {
    padding-top: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ext-flow-item::before,
  .ext-flow-nm,
  .ext-flow-panel {
    transition: none !important;
  }
  .ext-flow-panel-img,
  .ext-flow-panel-text {
    animation: none !important;
  }
  .ext-flow-lab.is-anim .ext-flow-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ext-flow-lab.is-ready .ext-flow-panel {
    transition: none;
  }
}

/* ---------- C. Who we hire: hairline editorial grid ------------------ */
.ext-hire {
  padding: clamp(56px, 8vw, 112px) 0;
}
.ext-hire-head {
  max-width: 1200px;
  margin: 0 0 clamp(34px, 4.4vw, 56px);
}
.ext-hire-head .ext-plain-eyebrow {
  margin-bottom: 16px;
}
.ext-hire-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ext-ink);
}
.ext-hire-lede {
  margin: 18px 0 0;
  max-width: 840px;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--ext-muted);
}

/* no boxes: a quiet 2x2 grid drawn with hairlines, ring as the marker */
.ext-hire-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1.5px solid rgba(17, 19, 21, 0.12);
  border-radius: 22px;
  overflow: hidden;
}
.ext-hire-item {
  padding: clamp(28px, 3.4vw, 52px);
  border-bottom: 1.5px solid rgba(17, 19, 21, 0.12);
}
.ext-hire-item:nth-child(odd) {
  border-right: 1.5px solid rgba(17, 19, 21, 0.12);
}
/* last row closes on the container border, not its own */
.ext-hire-item:nth-child(n + 3) {
  border-bottom: 0;
}

.ext-hire-name {
  margin: 0 0 10px;
  font-family: var(--ext-font-primary);
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.16;
  color: var(--ext-ink);
}
.ext-hire-text {
  margin: 0;
  max-width: 46ch;
  font-family: var(--ext-font-secondary);
  font-size: clamp(14.5px, 1.1vw, 16.5px);
  line-height: 1.65;
  color: var(--ext-muted);
}

/* items entrance (JS-gated) */
.ext-hire-list.is-anim .ext-hire-item {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ext-hire-list.is-anim.is-in .ext-hire-item {
  opacity: 1;
  transform: none;
}
.ext-hire-list.is-anim.is-in .ext-hire-item:nth-child(2) {
  transition-delay: 0.08s;
}
.ext-hire-list.is-anim.is-in .ext-hire-item:nth-child(3) {
  transition-delay: 0.16s;
}
.ext-hire-list.is-anim.is-in .ext-hire-item:nth-child(4) {
  transition-delay: 0.24s;
}

/* ---------- Perks head label spacing -------------------------------- */
.ext-perks-head .ext-plain-eyebrow {
  margin-bottom: 16px;
}

/* ---------- responsive ---------------------------------------------- */
@media (max-width: 720px) {
  .ext-hire-list {
    grid-template-columns: 1fr;
  }
  .ext-hire-item {
    padding: clamp(26px, 6vw, 40px);
  }
  .ext-hire-item:nth-child(odd) {
    border-right: 0;
  }
  /* stacked: a divider between every item, only the last closes on the box */
  .ext-hire-item:nth-child(n + 3) {
    border-bottom: 1.5px solid rgba(17, 19, 21, 0.12);
  }
  .ext-hire-item:last-child {
    border-bottom: 0;
  }
}

/* ---------- reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ext-mf-draw-svg path,
  .ext-hire-item::before {
    transition: none !important;
  }
  .ext-mf.is-anim .ext-mf-draw-svg path {
    stroke-dashoffset: 0;
  }
  .ext-hire-list.is-anim .ext-hire-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Service detail pages (shared) - ext-sd-*
   ========================================================= */
.ext-sd-section {
  padding: 92px 0;
}

.ext-sd-section--tight {
  padding: 66px 0;
}

.ext-sd-section--line {
  border-top: 1px solid rgba(17, 19, 21, 0.08);
}

.ext-sd-head {
  max-width: 760px;
  margin: 0 0 46px;
}

.ext-sd-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ext-sd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ext-font-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17, 19, 21, 0.55);
  margin: 0 0 18px;
}

.ext-sd-eyebrow::before {
  content: "";
  width: 26px;
  height: 6px;
  border-radius: 999px;
  background: var(--ext-accent, #ffc13d);
}

.ext-sd-head--center .ext-sd-eyebrow {
  justify-content: center;
}

.ext-sd-title {
  font-family: var(--ext-font-primary);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.14;
  color: var(--ext-ink);
  margin: 0 0 18px;
}

.ext-sd-intro {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 19, 21, 0.6);
  margin: 0;
  max-width: 620px;
}

.ext-sd-head--center .ext-sd-intro {
  margin-left: auto;
  margin-right: auto;
}

/* What we offer - two column */
.ext-sd-offer {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.ext-sd-offer .ext-sd-head {
  margin-bottom: 0;
}

.ext-sd-offer-body .ext-sd-intro {
  max-width: none;
  margin-bottom: 26px;
}

.ext-sd-offer-body .ext-sd-intro + .ext-sd-intro {
  margin-top: -8px;
}

.ext-sd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ext-sd-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(17, 19, 21, 0.14);
  background: rgba(17, 19, 21, 0.03);
  color: rgba(17, 19, 21, 0.72);
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* Cards grid - what's included */
.ext-sd-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ext-sd-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 28px;
  border: 1px solid rgba(17, 19, 21, 0.08);
  border-radius: 16px;
  background: #ffffff;
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s ease;
}

.ext-sd-card:hover {
  background: #f7f8f9;
  border-color: rgba(17, 19, 21, 0.14);
  box-shadow: 0 24px 46px -26px rgba(17, 19, 21, 0.35);
  transform: translateY(-3px);
}

.ext-sd-card--wide {
  grid-column: span 3;
  flex-direction: row;
  align-items: center;
  gap: 26px;
}

.ext-sd-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 13px;
  background: linear-gradient(155deg, #2c3038 0%, #141519 100%);
  margin-bottom: 20px;
}

.ext-sd-card--wide .ext-sd-card-icon {
  margin-bottom: 0;
  width: 56px;
  height: 56px;
}

.ext-sd-card-icon img {
  width: 22px;
  height: auto;
}

.ext-sd-card-body {
  min-width: 0;
}

.ext-sd-card-title {
  font-family: var(--ext-font-primary);
  font-size: 19px;
  font-weight: 600;
  color: var(--ext-ink);
  margin: 0 0 10px;
}

.ext-sd-card-desc {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(17, 19, 21, 0.58);
  margin: 0;
}

/* Approach steps */
.ext-sd-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: sd-step;
}

.ext-sd-step {
  position: relative;
  padding: 30px 26px;
  border: 1px solid rgba(17, 19, 21, 0.08);
  border-radius: 16px;
  background: #ffffff;
}

.ext-sd-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(17, 19, 21, 0.16);
  font-family: var(--ext-font-primary);
  font-size: 14px;
  font-weight: 700;
  color: var(--ext-ink);
  margin-bottom: 20px;
}

.ext-sd-step-title {
  font-family: var(--ext-font-primary);
  font-size: 17px;
  font-weight: 600;
  color: var(--ext-ink);
  margin: 0 0 10px;
}

.ext-sd-step-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(17, 19, 21, 0.56);
  margin: 0;
}

/* Tech chips (larger pills) */
.ext-sd-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ext-sd-tech .ext-sd-chip {
  font-size: 14px;
  padding: 11px 20px;
}

/* Testimonial (static) */
.ext-sd-testimonial {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 40px;
  align-items: center;
  padding: 48px;
  border: 1px solid rgba(17, 19, 21, 0.08);
  border-radius: 20px;
  background: #ffffff;
}

.ext-sd-testimonial-brand {
  font-family: var(--ext-font-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(17, 19, 21, 0.45);
  margin: 0 0 18px;
}

.ext-sd-testimonial-quote {
  font-family: var(--ext-font-primary);
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ext-ink);
  margin: 0 0 24px;
}

.ext-sd-testimonial-author {
  margin: 0;
}

.ext-sd-testimonial-name {
  font-family: var(--ext-font-primary);
  font-size: 16px;
  font-weight: 600;
  color: var(--ext-ink);
  margin: 0;
}

.ext-sd-testimonial-role {
  font-size: 14px;
  color: rgba(17, 19, 21, 0.55);
  margin: 4px 0 0;
}

.ext-sd-testimonial-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: linear-gradient(155deg, #2c3038 0%, #141519 100%);
}

.ext-sd-testimonial-badge img {
  width: 40%;
  opacity: 0.9;
}

@media (max-width: 991px) {
  .ext-sd-section {
    padding: 68px 0;
  }
  .ext-sd-offer {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .ext-sd-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .ext-sd-card--wide {
    grid-column: span 2;
  }
  .ext-sd-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .ext-sd-testimonial {
    grid-template-columns: 1fr;
    padding: 34px;
  }
  .ext-sd-testimonial-badge {
    display: none;
  }
}

@media (max-width: 575px) {
  .ext-sd-cards {
    grid-template-columns: 1fr;
  }
  .ext-sd-card--wide {
    grid-column: span 1;
    flex-direction: column;
    align-items: flex-start;
  }
  .ext-sd-card--wide .ext-sd-card-icon {
    margin-bottom: 20px;
  }
  .ext-sd-steps {
    grid-template-columns: 1fr;
  }
}

/* Tray that wraps the pressable nav buttons */
.ext-testimonial-nav--tray {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(17, 19, 21, 0.05);
  border: 1px solid rgba(17, 19, 21, 0.07);
}

/* Pressable testimonial nav buttons (simple, with depth) */
.ext-testi-btn.ext-testi-btn--3d {
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 10px;
  background: var(--ext-accent, #ffc13d);
  color: #111315;
  cursor: pointer;
  transform: translateY(0);
  /* solid darker-yellow bottom edge = the 3D "thickness" */
  box-shadow: 0 4px 0 0 #d99a1e;
  transition:
    transform 0.12s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.12s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease;
}

.ext-testi-btn.ext-testi-btn--3d:hover {
  background: #ffcb57;
}

/* Press it down: the bottom edge collapses so it reads as a physical click */
.ext-testi-btn.ext-testi-btn--3d:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 0 #d99a1e;
}

.ext-testi-btn.ext-testi-btn--3d:focus-visible {
  outline: 3px solid rgba(17, 19, 21, 0.5);
  outline-offset: 2px;
}

.ext-testi-btn.ext-testi-btn--3d svg {
  width: 18px;
  height: 18px;
}

/* Redesigned service-detail testimonial */
.ext-sd-testi {
  position: relative;
  min-width: 0;
}

.ext-sd-testi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: clamp(300px, 27vw, 380px);
  padding: clamp(32px, 4.4vw, 60px);
  border-radius: 26px;
  background: #f4f5f6;
  border: 1px solid rgba(17, 19, 21, 0.06);
  overflow: hidden;
}

.ext-sd-testi-mark {
  position: absolute;
  right: 34px;
  bottom: -24px;
  width: clamp(120px, 15vw, 180px);
  height: clamp(120px, 15vw, 180px);
  color: rgba(17, 19, 21, 0.05);
  pointer-events: none;
  z-index: 0;
}

.ext-sd-testi-card .swiper {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.ext-sd-testi-card .swiper-wrapper,
.ext-sd-testi-card .swiper-slide {
  height: 100%;
}

.ext-sd-testi-slide {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ext-sd-testi-logo {
  height: 56px;
  width: auto;
  max-width: 250px;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.ext-sd-testi-quote {
  font-family: var(--ext-font-primary);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: -0.01em;
  color: var(--ext-ink);
  margin: 0;
  max-width: 52ch;
}

.ext-sd-testi-author {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: auto;
  padding-top: clamp(28px, 4vw, 44px);
}

.ext-sd-testi-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--ext-font-primary);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(150deg, #3a3f47 0%, #17181c 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.ext-sd-testi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ext-sd-testi-author-meta {
  min-width: 0;
}

.ext-sd-testi-name {
  font-family: var(--ext-font-primary);
  font-size: 16px;
  font-weight: 600;
  color: var(--ext-ink);
  margin: 0;
}

.ext-sd-testi-role {
  font-size: 14px;
  color: rgba(17, 19, 21, 0.55);
  margin: 3px 0 0;
}

/* Nav pinned to the card's bottom-right so the controls balance the left-aligned
   copy instead of stacking under it (fills the otherwise-empty right side). */
.ext-sd-testi-nav {
  display: flex;
  gap: 10px;
  position: absolute;
  right: clamp(32px, 4.4vw, 60px);
  bottom: clamp(32px, 4.4vw, 60px);
  z-index: 2;
}

@media (max-width: 991px) {
  .ext-sd-testi-card {
    min-height: 0;
    padding: 30px;
  }
  /* Back to normal flow on narrow screens so buttons never overlap the copy. */
  .ext-sd-testi-nav {
    position: static;
    margin-top: 24px;
  }
  .ext-sd-testi-logo {
    height: 38px;
  }
  .ext-sd-testi-quote {
    max-width: 100%;
  }
}

/* =========================================================
   Service detail - components for the AI Strategy layout (2026-07)
   Ring eyebrow, mapping items, Core Services panel, Tech logos
   ========================================================= */

/* Eyebrow: the brand ext-ring swoosh floats ABOVE the first letter (like the
   "Get in touch" / about halo), rather than sitting to the left of the text. */
.ext-sd-eyebrow {
  position: relative;
  display: inline-block;
  padding-top: 15px;
}

.ext-sd-eyebrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 28px;
  height: 8px;
  border-radius: 0;
  background: url("../images/brand-icons/ext-ring-icon.svg") center / contain no-repeat;
  animation: ext-sd-ring-bob 3.4s ease-in-out infinite;
}

@keyframes ext-sd-ring-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ext-sd-eyebrow::before {
    animation: none;
  }
}

/* ---- Clarity: Find -> Prove -> Plan timeline --------------------------- */
.ext-clarity-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 58px;
  padding-top: 60px;
  border-top: 1px solid rgba(17, 19, 21, 0.08);
}

/* Dashed rail linking the three badges into one journey */
.ext-clarity-flow::before {
  content: "";
  position: absolute;
  top: 88px;
  left: 16.66%;
  right: 16.66%;
  border-top: 1px dashed rgba(17, 19, 21, 0.22);
  z-index: 0;
}

.ext-clarity-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Numbered badge with the ring halo floating above it */
.ext-clarity-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(17, 19, 21, 0.16);
  background: #fff;
  font-family: var(--ext-font-primary);
  font-size: 18px;
  font-weight: 700;
  color: var(--ext-ink);
  margin-bottom: 24px;
  transition:
    background 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease;
}

.ext-clarity-badge::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 7px;
  background: url("../images/brand-icons/ext-ring-icon.svg") center / contain no-repeat;
  animation: ext-sd-ring-bob 3.4s ease-in-out infinite;
}

.ext-clarity-step:hover .ext-clarity-badge {
  background: linear-gradient(155deg, #2c3038 0%, #141519 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -18px rgba(17, 19, 21, 0.5);
}

.ext-clarity-step:hover .ext-clarity-badge::before {
  animation-duration: 1.4s;
}

.ext-clarity-title {
  font-family: var(--ext-font-primary);
  font-size: 19px;
  font-weight: 600;
  color: var(--ext-ink);
  margin: 0 0 8px;
}

.ext-clarity-desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(17, 19, 21, 0.52);
  margin: 0;
  max-width: 232px;
}

@media (prefers-reduced-motion: reduce) {
  .ext-clarity-badge::before {
    animation: none;
  }
}

/* ---- Core Services: aside image + dark stacked panel (LEGACY) ----------
   Renamed .ext-cs -> .ext-svc-cs. The bare `.ext-cs` grid used to collide with
   the project case-study pages' <main class="ext-page-main ext-cs">, forcing
   its sections into two side-by-side columns. This block is superseded by the
   .ext-svc-accordion layout and is unused by any live page. */
.ext-svc-cs {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 40px;
  align-items: start;
}

.ext-cs-aside {
  position: sticky;
  top: 120px;
}

.ext-cs-fig {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 21, 0.08);
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(
      130% 130% at 12% 0%,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0) 46%
    ),
    linear-gradient(155deg, #2c3038 0%, #141519 100%);
}

.ext-cs-fig .ext-cs-mark img {
  width: clamp(64px, 22%, 104px);
}
.ext-cs-fig:hover .ext-cs-mark {
  opacity: 0.2;
  transform: scale(1.05);
}

/* Blank placeholder tile with the centered "e" mark (like the services cards) */
.ext-cs-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.12;
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ext-cs-mark img {
  width: clamp(48px, 26%, 76px);
  height: auto;
  display: block;
}

.ext-cs-cap {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(17, 19, 21, 0.6);
  margin: 22px 0 0;
}

/* Dark panel */
.ext-cs-panel {
  border-radius: 24px;
  background: linear-gradient(158deg, #191a1f 0%, #0d0e11 100%);
  padding: 8px 34px;
  overflow: hidden;
}

.ext-cs-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 30px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  transition: opacity 0.35s ease;
}

.ext-cs-row:first-child {
  border-top: none;
}

.ext-cs-row-title {
  font-family: var(--ext-font-primary);
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
}

.ext-cs-row-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 16px;
  max-width: 460px;
}

.ext-cs-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ext-cs-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--ext-font-primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.ext-cs-thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      130% 130% at 12% 0%,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0) 46%
    ),
    linear-gradient(155deg, #23252b 0%, #0d0e11 100%);
}

.ext-cs-row:hover .ext-cs-thumb .ext-cs-mark {
  opacity: 0.2;
  transform: scale(1.06);
}

/* ---- Tech We Use: centered logo row on dark --------------------------- */
.ext-tech-area {
  background: linear-gradient(180deg, #0d0e11 0%, #121317 100%);
  padding: 88px 0;
}

.ext-tech-head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 52px;
}

.ext-tech-title {
  font-family: var(--ext-font-primary);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 600;
  line-height: 1.14;
  color: #fff;
  margin: 18px 0 0;
}
/* Keep the title on a single line from desktop up; allow it to wrap on
   narrower screens rather than overflow. */
@media (min-width: 992px) {
  .ext-tech-title {
    white-space: nowrap;
  }
}

.ext-tech-accent {
  color: var(--ext-accent, #ffc13d);
}

.ext-tech-sub {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.58);
  margin: 16px auto 0;
  max-width: 560px;
}

.ext-tech-eyebrow {
  position: relative;
  display: inline-block;
  padding-top: 15px;
  font-family: var(--ext-font-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.ext-tech-eyebrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 8px;
  background: url("../images/brand-icons/ext-ring-icon.svg") center / contain no-repeat;
}

/* Continuous logo marquee: logo + full brand name, scrolling seamlessly */
.ext-tech-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
}

.ext-tech-track {
  display: flex;
  width: max-content;
  animation: ext-tech-scroll 42s linear infinite;
}

.ext-tech-marquee:hover .ext-tech-track {
  animation-play-state: paused;
}

@keyframes ext-tech-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.ext-tech-item {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 0 42px;
  flex-shrink: 0;
}

.ext-tech-item img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  /* force every brand mark to a uniform white on the dark band */
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity 0.35s ease;
}

.ext-tech-item-name {
  font-family: var(--ext-font-primary);
  font-size: 21px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
  white-space: nowrap;
  transition: color 0.35s ease;
}

.ext-tech-item:hover img {
  opacity: 1;
}
.ext-tech-item:hover .ext-tech-item-name {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .ext-tech-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 991px) {
  .ext-clarity-flow {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 44px;
  }
  .ext-clarity-flow::before {
    display: none;
  }
  .ext-clarity-desc {
    max-width: 320px;
  }
  .ext-svc-cs {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ext-cs-aside {
    position: static;
  }
  .ext-cs-fig {
    aspect-ratio: 16 / 9;
  }
  .ext-cs-panel {
    padding: 6px 24px;
  }
  .ext-cs-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ext-cs-thumb {
    max-width: 320px;
  }
  .ext-tech-area {
    padding: 64px 0;
  }
  .ext-tech-item {
    padding: 0 30px;
    gap: 12px;
  }
  .ext-tech-item-name {
    font-size: 18px;
  }
}

@media (max-width: 575px) {
  .ext-cs-panel {
    padding: 4px 18px;
  }
  .ext-cs-row {
    padding: 26px 0;
  }
  .ext-tech-item img {
    width: 26px;
    height: 26px;
  }
  .ext-tech-item-name {
    font-size: 16px;
  }
}

/* Centered eyebrow ring (keeps the halo centred above the label + bob) */
.ext-sd-head--center .ext-sd-eyebrow::before {
  left: 50%;
  animation-name: ext-sd-ring-bob-center;
}

@keyframes ext-sd-ring-bob-center {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-2px);
  }
}

/* =========================================================
   AI Strategy page - storytelling rebuild (2026-07)
   Hero flourish · Stakes band · Discovery Ledger · Cases/CTA
   All namespaced; resting state = readable (JS only adds motion)
   ========================================================= */

/* ---- Hero: editorial flourish (additive to ext-services-hero) --------- */
.ext-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 26px 0 0;
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

.ext-hero-meta span {
  position: relative;
}

.ext-hero-meta span + span::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--ext-accent);
}

.ext-hero-rule {
  height: 1px;
  margin: 30px 0 0;
  max-width: 460px;
  background: linear-gradient(
    90deg,
    var(--ext-accent),
    rgba(255, 255, 255, 0.12) 60%,
    transparent
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.ext-hero-rule.is-drawn {
  transform: scaleX(1);
}

/* ---- Stakes: the cost of guessing (NEW dark band) --------------------- */
.ext-stakes {
  position: relative;
  background: linear-gradient(180deg, #f7f7f8 0%, #f1f1f3 100%);
  padding: 96px 0;
}

.ext-stakes-head {
  max-width: 840px;
  margin: 0 auto 60px;
  text-align: center;
}

.ext-stakes-head .ext-tech-eyebrow {
  color: var(--ext-muted);
}

.ext-stakes-title {
  font-family: var(--ext-font-primary);
  font-size: clamp(28px, 3.7vw, 46px);
  font-weight: 600;
  line-height: 1.18;
  color: var(--ext-ink);
  margin: 18px auto 0;
  max-width: 780px;
}

.ext-stakes-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  max-width: 960px;
  margin: 0 auto;
}

.ext-stakes-stat {
  text-align: center;
}

.ext-stakes-num {
  display: inline-block;
  font-family: var(--ext-font-primary);
  font-size: clamp(54px, 8vw, 104px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* numeral fill wipe (dark band → white); override reveal-text full width */
.ext-stakes-num.ext-reveal-text {
  width: auto;
}

.ext-stakes-label {
  margin: 16px auto 0;
  max-width: 250px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(17, 19, 21, 0.62);
}

.ext-stakes-close {
  margin: 52px auto 0;
  max-width: 640px;
  text-align: center;
  font-family: var(--ext-font-primary);
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.5;
  color: rgba(17, 19, 21, 0.82);
}

.ext-stakes-close strong {
  color: var(--ext-ink);
  font-weight: 600;
}

/* ---- Core Services - interactive expanding panels -------------------- */
/* A horizontal accordion of dark, brand panels. Hover / focus / tap opens one;
   the others collapse to a slim spine with a vertical label + faint e-mark.
   Stacks into full cards on narrow screens. */
.ext-svc-accordion {
  display: flex;
  gap: 12px;
  margin-top: 42px;
  height: clamp(400px, 44vw, 520px);
}

.ext-svc-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 74px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(
      120% 120% at 15% 0%,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0) 46%
    ),
    linear-gradient(158deg, #23252b 0%, #0d0e11 100%);
  cursor: pointer;
  transition:
    flex-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.4s ease;
}

.ext-svc-panel:focus-visible {
  outline: 2px solid var(--ext-accent);
  outline-offset: 3px;
}

.ext-svc-panel.is-active {
  flex-grow: 6.5;
  cursor: default;
  border-color: rgba(255, 193, 61, 0.28);
}

/* faint corner watermark; blooms a touch on the open panel */
.ext-svc-panel-mark {
  position: absolute;
  top: -22px;
  right: -22px;
  width: clamp(96px, 9vw, 150px);
  height: auto;
  opacity: 0.05;
  transform: rotate(-8deg);
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.ext-svc-panel.is-active .ext-svc-panel-mark {
  opacity: 0.1;
  transform: rotate(0deg) scale(1.05);
}

/* collapsed spine label (vertical, reads bottom-to-top) */
.ext-svc-panel-spine {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 2vw, 38px);
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--ext-font-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.62);
  transition:
    opacity 0.3s ease,
    color 0.3s ease;
}
.ext-svc-panel:hover .ext-svc-panel-spine {
  color: rgba(255, 255, 255, 0.9);
}
.ext-svc-panel.is-active .ext-svc-panel-spine {
  opacity: 0;
}

/* open content */
.ext-svc-panel-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(26px, 2.4vw, 44px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.ext-svc-panel.is-active .ext-svc-panel-content {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.18s;
}

.ext-svc-panel-kicker {
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ext-accent);
}

.ext-svc-panel-title {
  margin: 10px 0 0;
  font-family: var(--ext-font-primary);
  font-size: clamp(23px, 2.2vw, 31px);
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
}

.ext-svc-panel-desc {
  margin: 14px 0 0;
  max-width: 44ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.ext-svc-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.ext-svc-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--ext-font-primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

/* the final "payoff" panel leans into the accent when open */
.ext-svc-panel--payoff.is-active {
  border-color: rgba(255, 193, 61, 0.45);
  background:
    radial-gradient(
      130% 120% at 12% 0%,
      rgba(255, 193, 61, 0.16),
      rgba(255, 193, 61, 0) 50%
    ),
    linear-gradient(158deg, #201d15 0%, #0d0e11 100%);
}

@media (prefers-reduced-motion: reduce) {
  .ext-svc-panel,
  .ext-svc-panel-mark,
  .ext-svc-panel-content {
    transition: none;
  }
}

/* Stack into full cards on narrow screens (a horizontal accordion needs width) */
@media (max-width: 860px) {
  .ext-svc-accordion {
    flex-direction: column;
    height: auto;
    gap: 12px;
  }
  .ext-svc-panel {
    flex: none;
    min-height: 208px;
  }
  .ext-svc-panel-spine {
    display: none;
  }
  .ext-svc-panel-content {
    position: static;
    opacity: 1;
    pointer-events: auto;
  }
  .ext-svc-panel-mark {
    opacity: 0.08;
  }
}

.ext-ledger-close {
  margin: 36px 0 0;
  color: var(--ext-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ---- Tech We Use - segment label + note ------------------------------ */
.ext-tech-seg-label {
  display: block;
  text-align: center;
  margin: 0 0 26px;
  font-family: var(--ext-font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.ext-tech-note {
  margin: 34px auto 0;
  max-width: 520px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

/* ---- Case Studies - outcome ledger ----------------------------------- */
.ext-work-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
  padding-top: 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ext-work-outcomes .ext-impact-number {
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ext-work-outcome-label {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
}

.ext-work-note {
  margin: 24px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.4);
}

/* ---- Final CTA - reassurance row ------------------------------------- */
.ext-cta-reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 22px 0 0;
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--ext-muted);
}

.ext-cta-reassure span {
  position: relative;
}
.ext-cta-reassure span + span::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--ext-accent);
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 991px) {
  .ext-stakes {
    padding: 68px 0;
  }
  .ext-stakes-row {
    gap: 30px;
  }
  .ext-work-outcomes {
    gap: 28px;
  }
}

@media (max-width: 700px) {
  .ext-stakes-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ext-work-outcomes {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: left;
  }
}

/* ---- Reduced motion: everything rests readable ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .ext-hero-rule {
    transform: scaleX(1);
    transition: none;
  }
}

/* Service-detail opening section: a quiet white lead-in with the eyebrow at
   the page gutter, followed by the heading and description on the right. */
#what-we-offer.ext-sd-section {
  padding: 76px 0 92px;
}

#what-we-offer > .ext-container {
  width: calc(100% - 120px);
  max-width: none;
}

#what-we-offer .ext-sd-offer {
  display: block;
  padding: 0;
}

#what-we-offer .ext-sd-offer .ext-sd-eyebrow {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin: 0;
}

#what-we-offer .ext-sd-offer .ext-sd-head {
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
}

#what-we-offer .ext-sd-offer-body {
  width: min(48%, 800px);
  margin-left: auto;
}

#what-we-offer .ext-sd-offer .ext-sd-title {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: 100%;
  max-width: 800px;
  margin-top: 0;
  margin-bottom: 0;
}

#what-we-offer .ext-sd-offer-body {
  margin-top: 22px;
}

#what-we-offer .ext-sd-offer-body .ext-sd-intro {
  max-width: none;
  margin-bottom: 0;
}

@media (max-width: 991px) {
  #what-we-offer > .ext-container {
    width: calc(100% - 48px);
  }

  #what-we-offer .ext-sd-offer-body {
    width: min(72%, 680px);
  }

  #what-we-offer .ext-sd-offer .ext-sd-head {
    grid-template-columns: 28% 72%;
  }

  #what-we-offer .ext-sd-offer .ext-sd-title {
    max-width: 680px;
  }
}

@media (max-width: 575px) {
  #what-we-offer.ext-sd-section {
    padding: 56px 0 68px;
  }

  #what-we-offer .ext-sd-offer-body {
    width: 100%;
  }

  #what-we-offer .ext-sd-offer .ext-sd-head {
    display: block;
  }

  #what-we-offer .ext-sd-offer .ext-sd-title {
    margin-top: 32px;
  }
}

/* =====================================================================
   Mobile-first hardening for listing and detail pages
   Blogs · Careers · Content · Projects · Services
   ===================================================================== */
@media (max-width: 767px) {
  /* Decorative sliders and reveal transforms must never create page-level
     horizontal scrolling on narrow phones. */
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  main,
  section,
  article,
  .ext-container,
  .ext-over-hero {
    min-width: 0;
  }

  video,
  iframe,
  canvas {
    max-width: 100%;
  }

  /* Article wrappers previously retained the 33px desktop pill inset on both
     sides, leaving only 194px of reading width on a 320px phone. */
  .ext-article-w,
  .ext-article-body {
    width: calc(100% - var(--ext-site-gutter-mobile));
  }

  .ext-article-title,
  .ext-article-body h2,
  .ext-job-detail-title,
  .ext-cs-title,
  .ext-sd-title,
  .ext-services-area .section-title {
    overflow-wrap: break-word;
  }

  .ext-article-cover,
  .ext-article-figure img,
  .ext-article-ph {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .ext-article-quote {
    padding: 22px 20px;
  }

  .ext-article-body > .ext-content-faq {
    margin-top: 80px;
  }

  /* Long location/service names need to wrap inside their grid cell instead
     of preserving max-content width and widening the page. */
  .ext-sitemap-links a {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Give text-heavy case studies and job applications the usable mobile
     width while retaining a comfortable 24px visual gutter. */
  .ext-cs .ext-container,
  .ext-job-detail-body .ext-container {
    padding-inline: 12px;
  }

  .ext-job-content,
  .ext-apply-card,
  .ext-cs-main,
  .ext-cs-body,
  .ext-sd-offer-body,
  .services-col-left,
  .services-col-right {
    min-width: 0;
  }

  .ext-services-hero-title.ext-stretch-title {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: normal;
  }

  .ext-stretch-space {
    display: inline;
    white-space: normal;
  }

  .ext-services-hero--legal .ext-services-hero-title,
  .ext-services-hero--compact .ext-services-hero-title {
    font-size: clamp(27px, 9vw, 36px);
    line-height: 1.08;
  }

  .ext-tech-marquee {
    width: 100%;
    max-width: 100vw;
  }
}

@media (max-width: 575px) {
  .ext-article-head {
    padding-top: 24px;
  }

  .ext-article-title {
    font-size: clamp(30px, 10.5vw, 40px);
    line-height: 1.08;
  }

  .ext-article-body p,
  .ext-article-body ul li {
    line-height: 1.7;
  }

  .ext-article-author,
  .ext-article-signoff-card,
  .ext-apply-card,
  .ext-faq-panel,
  .ext-newsletter-card {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ext-rec-card {
    flex-basis: min(84vw, 296px);
  }

  .ext-job-card {
    column-gap: 12px;
  }

  .ext-job-meta {
    flex-wrap: wrap;
  }

  .ext-services-hero-lede,
  .ext-services-hero--content .ext-services-hero-lede {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.6;
  }

  .services-card-content {
    padding: 24px 20px 26px;
  }

  .services-card-title {
    font-size: clamp(23px, 8.2vw, 28px);
    overflow-wrap: break-word;
  }

  .ext-sd-card,
  .ext-svc-panel,
  .ext-work-card,
  .ext-portfolio-card {
    min-width: 0;
  }
}

/* =============================================
   Book a Strategy Call - Calendly-style modal
   ============================================= */
/* Pinning the body (incl. iOS) removes the scrollbar; --ext-sbw pads the gap
   back in on engines without scrollbar-gutter support (site-menu.js measures
   it, and reports 0 wherever the stable gutter already holds the column). */
.ext-booking-lock {
  overflow: hidden;
  position: fixed;
  width: 100%;
  padding-right: var(--ext-sbw, 0px);
}

.ext-booking-modal {
  position: fixed;
  inset: 0;
  /* cover the reserved scrollbar gutter too, or the backdrop stops short of
     the edge and leaves an undimmed stripe */
  width: 100vw;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ext-booking-modal.is-open { opacity: 1; visibility: visible; }

.ext-booking-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 13, 15, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.ext-booking-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(920px, 96vw);
  height: min(640px, 92vh);
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(12, 13, 15, 0.55);
  transform: translateY(12px) scale(0.985);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ext-booking-modal.is-open .ext-booking-dialog { transform: translateY(0) scale(1); }

.ext-booking-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  appearance: none;
  border: none;
  margin: 0;
  padding: 0;
  width: 76px;
  height: 76px;
  background: #fbebca;
  border-bottom-left-radius: 100%;
  color: #111315;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ext-booking-close svg {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 24px;
  height: 24px;
  color: #111315;
}
.ext-booking-close:hover { background: #f8e3b4; }

/* Left panel - meeting details + running selection */
.ext-bk-panel {
  flex-shrink: 0;
  width: 322px;
  padding: 38px 32px;
  border-right: 1px solid #ececed;
  display: flex;
  flex-direction: column;
  background: #fbfbfc;
}
.ext-bk-brand { width: 42px; height: 42px; margin-bottom: 22px; }
.ext-bk-host { font-size: 14px; font-weight: 600; color: #75797f; }
.ext-bk-meeting {
  margin: 3px 0 22px;
  font-family: var(--ext-font-primary);
  font-size: 26px;
  font-weight: 700;
  color: var(--ext-ink);
}
.ext-bk-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.ext-bk-meta li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: #2f3237;
}
.ext-bk-meta svg { color: #3f4247; flex-shrink: 0; }
.ext-bk-meeting-desc {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b6f76;
}

/* Running date/time selection (bottom of left panel) */
.ext-bk-chosen {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid #ececed;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ext-bk-chosen-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ext-ink);
}
.ext-bk-chosen-row svg { color: #e0a012; flex-shrink: 0; }
.ext-bk-chosen-row.is-empty { color: #9aa0a6; font-weight: 500; }
.ext-bk-chosen-row.is-empty svg { color: #c4c8ce; }

/* Right panel - steps */
.ext-bk-main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 32px 36px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ext-bk-wm {
  position: absolute;
  right: -40px;
  bottom: -46px;
  z-index: -1;
  width: 258px;
  height: 328px;
  background: url("/assets/images/brand-icons/ext-icon-grey.svg") no-repeat center / contain;
  transform: rotate(-15deg);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.ext-bk-wm-on .ext-bk-wm { opacity: 0.06; }
.ext-bk-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ececed;
}
.ext-bk-main-title {
  margin: 0;
  font-family: var(--ext-font-primary);
  font-size: 21px;
  font-weight: 700;
  color: var(--ext-ink);
}
.ext-bk-back {
  flex-shrink: 0;
  appearance: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #ececed;
  color: #111315;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ext-bk-back:hover { background: #e0e0e2; }
.ext-bk-back svg { color: #111315; }

/* Calendar */
.ext-bk-cal { width: 100%; max-width: 480px; margin: 0; }
.ext-bk-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.ext-bk-cal-title { font-weight: 700; font-size: 16px; color: var(--ext-ink); }
.ext-bk-cal-navs { display: flex; gap: 8px; }
.ext-bk-nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #d8dade;
  background: #fff;
  color: #111315;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.ext-bk-nav svg { color: #111315; }
.ext-bk-nav:hover:not(:disabled) { background: #f4f4f5; }
.ext-bk-nav:disabled { opacity: 0.4; cursor: not-allowed; }

.ext-bk-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}
.ext-bk-cal-wd {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8a8d93;
  padding-bottom: 8px;
}
.ext-bk-cal-blank { height: 48px; }
.ext-bk-day {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: rgba(255, 193, 61, 0.16);
  color: var(--ext-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
button.ext-bk-day:not(.is-selected):hover { background: rgba(255, 193, 61, 0.34); }
.ext-bk-day.is-today { border: 1.5px dashed #c99a2e; }
.ext-bk-day.is-selected {
  background: var(--ext-accent, #ffc13d);
  color: #111315;
  border-color: var(--ext-accent, #ffc13d);
}
.ext-bk-day.is-muted {
  background: transparent;
  color: #c4c8ce;
  cursor: default;
}

.ext-bk-tz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 20px 0 0;
  font-size: 12.5px;
  color: #75797f;
}
.ext-bk-tz svg { color: #9aa0a6; }

/* Time slots */
.ext-bk-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 10px;
  align-content: start;
}
.ext-bk-slot {
  padding: 14px 10px;
  border: 1px solid #d4d6da;
  border-radius: 12px;
  background: #fff;
  color: var(--ext-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ext-bk-slot:not(:disabled):hover {
  border-color: var(--ext-accent, #ffc13d);
  background: rgba(255, 193, 61, 0.14);
}
.ext-bk-slot:disabled {
  color: #c4c8ce;
  border-color: #ececed;
  background: #fafafa;
  cursor: default;
}
.ext-bk-loading {
  grid-column: 1 / -1;
  padding: 34px 8px;
  text-align: center;
  color: #6b6f76;
  font-size: 14px;
}
.ext-bk-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px 8px;
  text-align: center;
}
.ext-bk-empty-img {
  width: 190px;
  max-width: 64%;
  height: auto;
  margin-bottom: 8px;
}
.ext-bk-empty-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ext-ink);
}
.ext-bk-empty-sub {
  margin: 0;
  font-size: 13.5px;
  color: #75797f;
}
/* Inline "go back to the calendar" link inside the empty state. */
.ext-bk-empty-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 193, 61, 0.16);
  color: var(--ext-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ext-bk-empty-link svg:last-child {
  transition: transform 0.2s ease;
}
.ext-bk-empty-link:hover {
  background: var(--ext-accent, #ffc13d);
}
.ext-bk-empty-link:hover svg:last-child {
  transform: translateX(2px);
}
.ext-bk-empty-link:focus-visible {
  outline: 2px solid var(--ext-ink);
  outline-offset: 2px;
}

/* Details form */
.ext-bk-form { display: flex; flex-direction: column; gap: 15px; }
.ext-bk-field { display: flex; flex-direction: column; gap: 6px; }
.ext-bk-field span { font-size: 13px; font-weight: 600; color: #4b4f56; }
.ext-bk-field input,
.ext-bk-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d4d6da;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ext-ink);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
}
.ext-bk-field input:focus,
.ext-bk-field textarea:focus {
  outline: none;
  border-color: var(--ext-accent, #ffc13d);
  box-shadow: 0 0 0 3px rgba(255, 193, 61, 0.25);
}
.ext-bk-preview-note { margin: 0; font-size: 12.5px; color: #75797f; }
.ext-bk-error { color: #c0392b; font-size: 13px; font-weight: 500; }
.ext-bk-submit {
  width: 100%;
  margin-top: 4px;
  padding: 15px 20px;
  border: none;
  border-radius: 999px;
  background: var(--ext-ink);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.ext-bk-submit:hover { opacity: 0.88; }
.ext-bk-submit:disabled { opacity: 0.6; cursor: default; }

/* Success */
.ext-bk-success { margin: auto; text-align: center; padding: 20px 8px; }
.ext-bk-success-ic {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 193, 61, 0.2);
  color: #111315;
}
.ext-bk-success h3 { margin: 0 0 8px; font-size: 23px; font-weight: 700; color: var(--ext-ink); }
.ext-bk-success p { margin: 0 0 4px; color: #4b4f56; font-size: 15px; }
.ext-bk-success-sub { color: #75797f !important; font-size: 13.5px !important; }
.ext-bk-success-img {
  display: block;
  width: 172px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 16px;
}
.ext-bk-result-list {
  list-style: none;
  margin: 16px auto 0;
  padding: 0;
  max-width: 420px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ext-bk-result-list li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #4b4f56;
}
.ext-bk-result-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ext-accent, #ffc13d);
}
.ext-bk-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.ext-bk-meet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  margin: 0;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ext-accent, #ffc13d);
  color: #111315;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
}
.ext-bk-meet:hover { background: #f0b32e; }
.ext-bk-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  margin: 0;
  padding: 14px 24px;
  border: 1px solid #d4d6da;
  border-radius: 999px;
  background: #fff;
  color: var(--ext-ink);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.ext-bk-done:hover { background: #f6f6f7; }

@media (max-width: 760px) {
  .ext-booking-modal { padding: 0; align-items: flex-end; }
  .ext-booking-dialog {
    flex-direction: column;
    width: 100%;
    height: auto;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
  }
  .ext-booking-modal.is-open .ext-booking-dialog { transform: translateY(0); }
  .ext-booking-dialog::before {
    content: "";
    flex-shrink: 0;
    width: 42px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: #d8dade;
  }
  .ext-bk-wm { display: none; }
  .ext-bk-panel {
    width: 100%;
    flex-shrink: 0;
    border-right: none;
    border-bottom: 1px solid #ececed;
    padding: 22px 22px 18px;
  }
  .ext-bk-brand { width: 34px; height: 34px; margin-bottom: 12px; }
  .ext-bk-meeting { font-size: 20px; margin-bottom: 12px; }
  .ext-bk-meta { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
  .ext-bk-meeting-desc { display: none; }
  .ext-bk-chosen {
    margin-top: 14px;
    padding-top: 14px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 18px;
  }
  .ext-bk-chosen-row.is-empty { display: none; }
  .ext-bk-chosen--empty { display: none; }
  .ext-bk-main { flex: 1; padding: 22px; }
  .ext-bk-cal { max-width: none; }
  .ext-bk-day, .ext-bk-cal-blank { height: 44px; }
}


/* ============================================================
   SERVICE DETAIL PAGES - REDESIGN (2026)
   Careers-style compact hero (no SVG line-grid; a drawn accent
   line is the hero graphic) + rebuilt interactive components.
   Scoped to .ext-services-hero--detail and the /services/*.html
   detail pages, which all share these classes.
   ============================================================ */

/* ---- Compact, left-aligned detail hero ------------------------------- */
.ext-services-hero--detail {
  /* Match the careers detail hero height: with the eyebrow/lede/rule stripped
     out this is a breadcrumb + title + chips header band, not a full hero. */
  --ext-services-hero-h: 52vh;
  --ext-sd-hero-inset: var(--ext-content-inset);
  background: radial-gradient(120% 90% at 12% 0%, #14151a 0%, #050506 60%);
}
.ext-services-hero--detail .ext-container {
  position: relative;
  height: auto;
  min-height: var(--ext-services-hero-h);
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding-inline: var(--ext-sd-hero-inset);
  padding-top: clamp(124px, 15vh, 196px);
  padding-bottom: clamp(52px, 8vh, 104px);
}
.ext-services-hero--detail .ext-services-hero-inner {
  align-items: flex-start;
  text-align: left;
  max-width: 900px;
  width: 100%;
}
/* Clean flat edge where the white body meets the dark band (no curve sweep),
   matching the careers detail hero. */
.ext-services-hero--detail + .ext-over-hero::before { display: none; }

@media (max-width: 767px) {
  .ext-services-hero--detail {
    --ext-services-hero-h: 50vh;
    --ext-sd-hero-inset: 22px;
  }
  .ext-services-hero--detail .ext-container {
    justify-content: flex-start;
    padding-top: clamp(116px, 20vh, 168px);
  }
}

.ext-sd-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ext-font-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ext-accent);
}
.ext-sd-hero-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--ext-accent);
}
.ext-sd-hero-title {
  margin: 0;
  max-width: 15ch;
  font-family: var(--ext-font-primary);
  font-size: clamp(42px, 6.6vw, 92px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #fff;
  text-wrap: balance;
}
.ext-sd-hero-lede {
  margin: 24px 0 0;
  max-width: 58ch;
  font-family: var(--ext-font-secondary);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.64);
}
/* THE drawn line the hero is built around: draws left-to-right on reveal. */
.ext-sd-hero-rule {
  height: 2px;
  width: min(440px, 100%);
  margin: 36px 0 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--ext-accent) 0%,
    rgba(255, 255, 255, 0.16) 58%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.ext-sd-hero-rule.is-drawn { transform: scaleX(1); }
.ext-sd-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 0;
}
.ext-sd-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border-radius: 999px;
  font-family: var(--ext-font-secondary);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.ext-sd-hero-chip:hover {
  border-color: rgba(255, 193, 61, 0.4);
  background: rgba(255, 255, 255, 0.08);
}
.ext-sd-hero-chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ext-accent);
}
@media (prefers-reduced-motion: reduce) {
  .ext-sd-hero-rule { transition: none; transform: scaleX(1); }
}

/* ============================================================
   SERVICE PAGES - shared inner-page width (2026)
   Cap the services index + every service detail page to a 1300px
   body and line their content up with the site header, the way
   the blog details column does. The header logo/buttons sit inside
   .ext-header-shell, inset 33px from the container (32px padding +
   1px border); body sections inset the SAME 33px so every left edge
   sits under the logo and every right edge under the HIRE US button.
   Scoped to .ext-service-doc so nothing else on the site shifts. */
body.ext-service-doc {
  --ext-site-max-width: 1500px;
}
/* Body sections (everything below the hero) inset to match the header
   shell. The header and hero are left alone - the shell padding and the
   hero's own inset already line them up with the logo. Desktop/tablet
   only; on phones the container gutter already handles the edges. */
@media (min-width: 768px) {
  body.ext-service-doc .ext-over-hero .ext-container {
    padding-inline: var(--ext-content-inset);
  }
  /* "What we offer" opted out of the shared width (100% - 120px, no cap);
     bring it back in line with every other section. */
  body.ext-service-doc #what-we-offer > .ext-container {
    width: min(calc(100% - var(--ext-site-gutter)), var(--ext-site-max-width));
    max-width: none;
    padding-inline: var(--ext-content-inset);
  }
}
/* Case-studies grid: when a service has a single case study, don't leave an
   empty second column - size the grid to one comfortable column instead. */
body.ext-service-doc .ext-work-grid:has(.ext-work-card:only-child) {
  grid-template-columns: minmax(0, 560px);
}
/* The global card redesign hides the client logo/wordmark and paints an Externo
   "e" watermark placeholder. On service pages we show the REAL client logo on a
   vibrant branded cover instead: drop the watermark and float the logo inside a
   crisp white chip so it pops on the saturated tile (and on any logo colour). */
body.ext-service-doc .ext-work-cover::after {
  display: none;
}
body.ext-service-doc .ext-work-logo {
  display: block;
  max-width: 62%;
  max-height: 104px;
  width: auto;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.ext-service-doc .ext-work-card:hover .ext-work-logo {
  transform: translateY(-4px) scale(1.03);
}
body.ext-service-doc .ext-work-wordmark {
  display: block;
  color: #ffffff;
}

/* ---- Core Services accordion: sequence numbers + clearer active cues -- */
.ext-svc-accordion { counter-reset: extsvc; }
.ext-svc-panel { counter-increment: extsvc; }
.ext-svc-panel::before {
  content: "0" counter(extsvc);
  position: absolute;
  top: clamp(20px, 2vw, 28px);
  left: clamp(20px, 1.8vw, 30px);
  z-index: 2;
  font-family: var(--ext-font-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.35s ease;
  pointer-events: none;
}
.ext-svc-panel.is-active::before { color: var(--ext-accent); }
/* accent underline that grows when a panel opens */
.ext-svc-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 2;
  background: var(--ext-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s;
  pointer-events: none;
}
.ext-svc-panel.is-active::after { transform: scaleX(1); }
.ext-svc-panel:not(.is-active):hover {
  border-color: rgba(255, 255, 255, 0.18);
}
@media (max-width: 860px) {
  .ext-svc-panel::before,
  .ext-svc-panel::after { display: none; }
}

/* ---- Stakes stat band: accent tick above each number ----------------- */
.ext-stakes-stat {
  position: relative;
  padding-top: 26px;
}
.ext-stakes-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: var(--ext-accent);
}

/* ------------------------------------------------------------------
   Shared form transport error
   ------------------------------------------------------------------
   Injected by assets/js/form-submit.js when a submission is rejected by
   the Apps Script (or never reaches it). One rule serves the contact,
   support, popup and careers forms, so none of them need their own error
   markup in the HTML. */
.ext-form-error {
  margin: 14px 0 0;
  font-family: var(--ext-font-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 500;
  color: #d23a2f;
}

.ext-form-error[hidden] {
  display: none;
}

/* ==================================================================
   Veda Adventures case study (.ext-va-*)
   ------------------------------------------------------------------
   A six-workstream engagement (rebrand, website, graphic design,
   social, SEO/GMB and a custom CRM) needs more room than the shared
   .ext-cs reading column gives it, so this study adds a set of
   full-bleed workstream bands that sit between the study body and the
   promo video. Everything below is scoped to this page's namespace and
   is inert everywhere else. */

/* ---- shared band scaffolding ---- */
.ext-va-band {
  padding: clamp(56px, 7vw, 104px) 0;
}
.ext-va-band--tint {
  background: #f7f7f8;
}
.ext-va-band--ink {
  background: #111315;
}
.ext-va-band--flush {
  padding-bottom: 0;
}

.ext-va-head {
  max-width: 760px;
  margin: 0 0 clamp(26px, 3.4vw, 46px);
}
.ext-va-head--center {
  margin-inline: auto;
  text-align: center;
}
.ext-va-head h2 {
  font-family: var(--ext-font-primary);
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ext-ink);
  margin: 18px 0 0;
}
.ext-va-head p {
  font-family: var(--ext-font-secondary);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
  color: #4a4f56;
  margin: 14px 0 0;
}
.ext-va-band--ink .ext-va-head h2 {
  color: #fff;
}
.ext-va-band--ink .ext-va-head p {
  color: rgba(255, 255, 255, 0.68);
}

/* ---- impact scoreboard: the hard numbers, straight after the hero ----
   A headline column plus a hairline-ruled stat grid. Each cell carries the
   source it was read off, so the numbers stay checkable rather than
   decorative. */
.ext-va-board {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: center;
}
.ext-va-board-copy h2 {
  font-family: var(--ext-font-primary);
  font-size: clamp(27px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 18px 0 0;
}
.ext-va-board-copy p {
  font-family: var(--ext-font-secondary);
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
  margin: 16px 0 0;
  max-width: 46ch;
}
.ext-va-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  border-left: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 4px;
  overflow: hidden;
}
.ext-va-stat {
  padding: clamp(18px, 2.1vw, 30px) clamp(14px, 1.6vw, 24px);
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  transition: background 0.35s ease;
}
.ext-va-stat:hover {
  background: rgba(255, 193, 61, 0.07);
}
.ext-va-stat-v {
  display: block;
  font-family: var(--ext-font-primary);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ext-accent);
}
.ext-va-stat-v small {
  font-size: 0.52em;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-left: 2px;
}
.ext-va-stat-l {
  display: block;
  margin-top: 12px;
  font-family: var(--ext-font-secondary);
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.45;
  font-weight: 600;
  color: #fff;
}
.ext-va-stat-s {
  display: block;
  margin-top: 7px;
  font-family: var(--ext-font-primary);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

/* ---- workstream chips (what the engagement actually covered) ---- */
.ext-va-streams {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .ext-va-streams {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .ext-va-streams {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ext-va-stream {
  position: relative;
  padding: 16px 18px 17px 46px;
  border: 1px solid var(--ext-line);
  border-radius: 12px;
  background: #fff;
  transition:
    border-color 0.3s ease,
    transform 0.3s ease;
}
.ext-va-stream:hover {
  border-color: rgba(255, 193, 61, 0.75);
  transform: translateY(-2px);
}
.ext-va-stream-n {
  position: absolute;
  left: 16px;
  top: 16px;
  font-family: var(--ext-font-primary);
  font-size: 12px;
  font-weight: 700;
  color: #a3a8ae;
}
.ext-va-stream strong {
  display: block;
  font-family: var(--ext-font-primary);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ext-ink);
}
.ext-va-stream span {
  display: block;
  margin-top: 5px;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  line-height: 1.5;
  color: #5f646b;
}

/* ---- split: media on one side, copy on the other (flip alternates) ---- */
.ext-va-split {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(26px, 3.4vw, 60px);
  align-items: center;
}
.ext-va-split--flip .ext-va-split-media {
  order: 2;
}
.ext-va-split-copy h3 {
  font-family: var(--ext-font-primary);
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ext-ink);
  margin: 0;
}
.ext-va-split-copy p {
  font-family: var(--ext-font-secondary);
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.72;
  color: #4a4f56;
  margin: 14px 0 0;
}
.ext-va-band--ink .ext-va-split-copy h3 {
  color: #fff;
}
.ext-va-band--ink .ext-va-split-copy p {
  color: rgba(255, 255, 255, 0.66);
}

/* ---- media frames ---- */
.ext-va-frame {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(14px, 1.7vw, 22px);
  background: #f1f2f4;
  border: 1px solid var(--ext-line);
}
.ext-va-band--ink .ext-va-frame,
.ext-va-band--tint .ext-va-frame {
  border-color: rgba(17, 19, 21, 0.08);
}
.ext-va-band--ink .ext-va-frame {
  background: #1a1c1f;
  border-color: rgba(255, 255, 255, 0.1);
}
.ext-va-frame video,
.ext-va-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ext-va-frame--wide {
  aspect-ratio: 16 / 9;
}
.ext-va-frame--square {
  aspect-ratio: 1 / 1;
}
.ext-va-frame--tall {
  aspect-ratio: 4 / 5;
}
.ext-va-frame--print {
  aspect-ratio: 3 / 2;
}
.ext-va-cap {
  margin: 12px 2px 0;
  font-family: var(--ext-font-secondary);
  font-size: 14px;
  line-height: 1.55;
  color: #6a6f76;
}
.ext-va-band--ink .ext-va-cap {
  color: rgba(255, 255, 255, 0.5);
}

/* ---- inline metric row (sits under a split's copy) ---- */
.ext-va-metrics {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 26px;
}
.ext-va-metrics--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ext-va-metrics li {
  border-top: 2px solid var(--ext-accent);
  padding-top: 12px;
}
.ext-va-metrics b {
  display: block;
  font-family: var(--ext-font-primary);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ext-ink);
}
.ext-va-metrics span {
  display: block;
  margin-top: 8px;
  font-family: var(--ext-font-secondary);
  font-size: 13.5px;
  line-height: 1.45;
  color: #5f646b;
}
.ext-va-band--ink .ext-va-metrics b {
  color: #fff;
}
.ext-va-band--ink .ext-va-metrics span {
  color: rgba(255, 255, 255, 0.55);
}

/* ---- website workstream: one hero loop over a row of build shots ---- */
.ext-va-showcase {
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
}
.ext-va-showcase-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

/* ---- identity band: the mark, the rebrand film, the sting ---- */
.ext-va-identity {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(12px, 1.6vw, 22px);
  align-items: stretch;
}
.ext-va-mark {
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(16px, 2vw, 30px);
  padding: clamp(24px, 3vw, 44px);
  border-radius: clamp(14px, 1.7vw, 22px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 193, 61, 0.22), transparent 62%),
    #16181b;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ext-va-mark img {
  height: auto;
  display: block;
}
.ext-va-mark-icon {
  width: min(58%, 190px);
}
.ext-va-mark-lockup {
  width: min(100%, 330px);
}
.ext-va-identity-side {
  display: grid;
  gap: clamp(12px, 1.6vw, 22px);
  grid-template-rows: minmax(0, 1fr) auto;
}
/* The rebrand film runs the full height of the mark-plus-sting column beside
   it, so its box takes its height from the grid row - the declared aspect
   ratio has to give way or the frame sizes itself wider than its column. */
.ext-va-identity-main {
  min-height: 0;
}
.ext-va-identity-main .ext-va-frame {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 260px;
}

/* ---- social: the feed wall ---- */
.ext-va-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.ext-va-wall .ext-va-frame {
  aspect-ratio: 1 / 1;
}
/* the two feed films run wide beneath the square grid */
.ext-va-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(12px, 1.4vw, 20px);
}

/* ---- reels: two rows of vertical films scrolling in opposite directions ----
   The track holds the set twice over, so translating it by exactly -50%
   loops seamlessly. Playback is managed in JS (project-reels.js) so only
   the cards actually on screen are decoding. */
.ext-va-reelwrap {
  position: relative;
  overflow: hidden;
  display: grid;
  margin-top: clamp(30px, 4vw, 60px);
  gap: clamp(12px, 1.4vw, 20px);
  --ext-va-reel-w: clamp(178px, 17vw, 268px);
}
.ext-va-reelwrap::before,
.ext-va-reelwrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 140px);
  z-index: 2;
  pointer-events: none;
}
.ext-va-reelwrap::before {
  left: 0;
  background: linear-gradient(90deg, #111315 12%, rgba(17, 19, 21, 0));
}
.ext-va-reelwrap::after {
  right: 0;
  background: linear-gradient(270deg, #111315 12%, rgba(17, 19, 21, 0));
}
.ext-va-reelrow {
  overflow: hidden;
}
.ext-va-reeltrack {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  width: max-content;
  animation: ext-va-reel-left 58s linear infinite;
  will-change: transform;
}
.ext-va-reelrow--rev .ext-va-reeltrack {
  animation-name: ext-va-reel-right;
  animation-duration: 66s;
}
@keyframes ext-va-reel-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes ext-va-reel-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.ext-va-reelwrap:hover .ext-va-reeltrack {
  animation-play-state: paused;
}
.ext-va-reel {
  position: relative;
  flex: none;
  width: var(--ext-va-reel-w);
  aspect-ratio: 9 / 16;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(12px, 1.4vw, 18px);
  background: #1a1c1f;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ext-va-reel video,
.ext-va-reel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ext-va-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 -46px 52px -34px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ext-va-reeltrack {
    animation: none;
  }
  .ext-va-reelrow {
    overflow-x: auto;
  }
}

/* ---- print band: the brochure in hand, plus the animated mockups ---- */
.ext-va-print {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(12px, 1.4vw, 20px);
  align-items: stretch;
}
.ext-va-print-side {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
/* The row height comes from the two stacked films on the right, which makes
   the left photo's height definite - so its declared aspect ratio would size
   it WIDER than its own column and push it under the neighbour. Let the frame
   fill the cell in both axes and leave the framing to object-fit. */
.ext-va-print > .ext-va-frame {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 300px;
}
.ext-va-print-side .ext-va-frame {
  aspect-ratio: auto;
  min-height: 0;
}
.ext-va-flyers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(12px, 1.4vw, 20px);
}
/* Cell ratio is the artwork's own (1200 x 1704), so `cover` fills edge to edge
   without cropping anything - `contain` left a hairline of white down each side. */
.ext-va-flyers .ext-va-frame {
  aspect-ratio: 1200 / 1704;
}
.ext-va-flyers .ext-va-frame img {
  object-fit: cover;
}

/* ---- CRM module list ---- */
.ext-va-modules {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.ext-va-modules li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--ext-font-secondary);
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}
.ext-va-modules li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ext-va-modules strong {
  flex: none;
  min-width: 108px;
  font-family: var(--ext-font-primary);
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .ext-va-board,
  .ext-va-split,
  .ext-va-identity,
  .ext-va-print {
    grid-template-columns: minmax(0, 1fr);
  }
  .ext-va-split--flip .ext-va-split-media {
    order: 0;
  }
  .ext-va-print-side {
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ext-va-print-side .ext-va-frame {
    aspect-ratio: 16 / 9;
  }
  .ext-va-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .ext-va-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ext-va-showcase-row,
  .ext-va-wall,
  .ext-va-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ext-va-modules li {
    display: grid;
    gap: 4px;
  }
  .ext-va-metrics--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .ext-va-board-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ext-va-print-side {
    grid-template-columns: minmax(0, 1fr);
  }
  .ext-va-flyers,
  .ext-va-duo {
    grid-template-columns: minmax(0, 1fr);
  }
  .ext-va-reelwrap {
    --ext-va-reel-w: 148px;
  }
}