/* DM Sans, Google Fonts / SIL Open Font License; embedded to avoid external font requests. */
@font-face { font-family: "DM Sans"; src: url("assets/fonts/velaharra-local-1.ttf") format("truetype"); font-style: normal; font-weight: 100 1000; font-display: swap; }
/* ==========================================================================
   Velaharra — Homepage
   Built from Velaharra-Homepage.ai, artboard 1 (925 × 1626 pt).
   Tokens mirror build/lib.jsx.

   Layout is fully fluid: no max-width, every size is viewport-relative
   (vw) with a px floor so nothing collapses on small screens.
   ========================================================================== */

/* ---- Fonts ------------------------------------------------------------- */
@font-face {
  font-family: "Volage";
  src: url("fonts/Volage-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Volage Display";
  src: url("fonts/Volage.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("fonts/Brandon_light.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("fonts/Brandon_reg.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("fonts/Brandon_med.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("fonts/Brandon_bld.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --black:  #111111;
  --ink:    #282828;
  --body:   #232323;
  --gray:   #6e7070;
  --light:  #f8f8f8;
  --light2: #f5f5f5;
  --foot:   #f0f0f0;
  --line:   #dadada;
  --rule:   #afafaf;
  --white:  #ffffff;
  --dark:   #060605;
  --muted:  #c8c8c8;

  --serif:   "Volage", "Times New Roman", serif;
  --display: "Volage Display", "Volage", "Times New Roman", serif;
  --sans:    "Brandon Grotesque", "Helvetica Neue", Arial, sans-serif;

  /* page inset, scales with viewport */
  --edge: max(16px, 5vw);

  /* fluid type scale (mockup pt ÷ 925 artboard width) */
  --fs-label: max(10px, 0.9vw);     /* caps labels, nav, buttons */
  --fs-body:  max(14px, 1.15vw);    /* paragraphs */
  --fs-sub:   max(16px, 2.1vw);     /* hero sub */
  --fs-h3:    max(20px, 1.95vw);    /* pillar titles */
  --fs-h2:    max(30px, 3.2vw);     /* build title */
  --fs-tag:   max(28px, 4.2vw);     /* hero tagline */
  --fs-quote: max(46px, 6.2vw);     /* statement */
  --fs-hero:  max(44px, 6.8vw);     /* join title */
  --fs-hero-xl: max(48px, 8.8vw);   /* hero title */

  --ease: cubic-bezier(.22, 1, .36, 1);

  /* film grain tiles: SVG noise as light specks and dark specks. Large tiles of
     different sizes, so the two layers never line up into a visible repeat. */
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.8 0 0 0 -.65'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --grain-dark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.8 0 0 0 -.65'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --header-h: max(60px, 5.4vw);
}

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
/* Lenis puts overflow: clip on <html> while stopped, which takes the viewport
   out of scrolling and lets the sticky header scroll away under the open menu.
   body's overflow: hidden already blocks scrolling, so undo the clip. */
html.lenis.lenis-stopped { overflow: visible !important; }

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.sep { display: inline-block; margin: 0 1.4em; }

/* ---- Header (sticky) --------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  transition:
    background-color .4s ease,
    border-color .4s ease;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: max(16px, 2vw);
  height: var(--header-h);
  padding: 0 var(--edge);
  transition: height .4s var(--ease);
}
.site-header.is-scrolled .site-header__bar { height: calc(var(--header-h) * .78); }

.wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .22em;
  font-family: var(--serif);
  font-size: max(24px, 1.75vw);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1;
  transition: font-size .4s var(--ease), color .3s ease, opacity .3s ease;
}
.site-header.is-scrolled .wordmark { font-size: max(21px, 1.45vw); }
.wordmark__name { display: block; }
.wordmark__tag {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: max(8px, .36em);
  letter-spacing: 0.2em;
  color: var(--gray);
  transition: color .3s ease;
}

/* Homepage: the header wordmark stays out of sight while the hero carries the
   name and tagline. Once the hero's tagline has scrolled under the header,
   script.js adds .is-wordmark-in and the letters drop in one after another
   (same move as the hero intro), then the tagline fades in beneath. Scrolling
   back up fades it out again. (The open menu shows its own wordmark.) */
[data-wordmark-reveal] .wordmark__letter {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, -.6em, 0);
  transition: opacity .3s ease, transform .3s ease;
}
[data-wordmark-reveal] .wordmark__tag {
  opacity: 0;
  transition: opacity .3s ease, color .3s ease;
}
[data-wordmark-reveal].is-wordmark-in .wordmark__letter {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .45s ease, transform .9s cubic-bezier(.16, 1.22, .3, 1);
  transition-delay: calc(var(--i, 0) * .05s);
}
[data-wordmark-reveal].is-wordmark-in .wordmark__tag {
  opacity: 1;
  transition: opacity .7s ease .55s, color .3s ease;
}

/* thin scroll-progress line along the header's bottom edge */
.site-header__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--black);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  transition: opacity .3s ease;
}

.site-nav {
  display: flex;
  gap: max(18px, 3.2vw);
}
.site-nav a {
  position: relative;
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  padding: .6em 0;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .15em;
  height: 1px;
  background: var(--black);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Hamburger: two lines that morph into an X */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  z-index: 70;
}
.menu-toggle__line {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 1.5px;
  background: var(--black);
  transition: transform .45s var(--ease), top .45s var(--ease), background-color .3s ease;
}
.menu-toggle__line:nth-child(1) { top: 17px; }
.menu-toggle__line:nth-child(2) { top: 25px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__line { top: 21px; background: var(--white); }
.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(1) { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(2) { transform: rotate(-45deg); }

/* ---- Mobile overlay menu ----------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--header-h) + 6vh) var(--edge) max(24px, 5vh);
  background: var(--dark);
  color: var(--white);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .7s var(--ease), visibility 0s linear .7s;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .7s var(--ease), visibility 0s;
}

.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  display: block;
  padding: .28em 0;
  font-family: var(--display);
  font-size: clamp(34px, 9vw, 64px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .6s var(--ease);
}
.menu.is-open .menu__nav a,
.menu.is-open .menu__foot {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(.18s + var(--i) * .05s);
}
.menu__nav a.is-active { color: var(--muted); }

.menu__foot {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .6s var(--ease);
}
.menu__cities {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--white);
}
.menu__tag {
  margin-top: 12px;
  font-weight: 300;
  font-size: 13px;
  color: var(--muted);
}

/* The panel carries its own white wordmark and tagline, sitting exactly where
   the header's would be. The header stays on top for the close button but goes
   transparent and hides its own wordmark, so the two never overlap. */
.menu__brand {
  position: absolute;
  top: 0;
  left: var(--edge);
  height: var(--header-h);
  justify-content: center;
  color: var(--white);
  opacity: 0;
  transition: opacity .4s ease;
}
.menu__brand .wordmark__tag { color: var(--muted); }
.menu.is-open .menu__brand { opacity: 1; transition-delay: .15s; }

body.menu-open .site-header {
  z-index: 70;
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.menu-open .site-header.is-scrolled .site-header__bar { height: var(--header-h); }   /* match the panel's brand row */
body.menu-open .site-header .wordmark { opacity: 0; pointer-events: none; }
body.menu-open .site-header__progress { opacity: 0; }

/* ---- Hero -------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38vw;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero__copy {
  padding: max(40px, 7vw) max(12px, 1.5vw) max(40px, 6vw) var(--edge);
  align-self: center;
}

.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-hero-xl);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--black);
  margin-left: -0.03em;
}

/* Page-load intro: each letter of the wordmark fades in and drops into place,
   one after the other. Pure CSS, runs once. */
.hero__letter {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, -.6em, 0);
  will-change: transform, opacity;
  /* one smooth overshoot: the curve itself carries the letter just past its
     line and settles it back, no extra keyframe bounce */
  animation: letter-whip 1.1s cubic-bezier(.16, 1.22, .3, 1) forwards;
  animation-delay: calc(.2s + var(--i, 0) * .055s);
}
@keyframes letter-whip {
  0%   { opacity: 0; transform: translate3d(0, -.6em, 0); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* After the letters land, each row of the hero fades up in sequence */
.hero__tagline, .hero__sub, .hero__cities, .hero__body, .hero__actions .btn-arrow {
  opacity: 0;
  animation: row-in 1s var(--ease) both;
  animation-delay: calc(.95s + var(--r, 0) * .13s);
}
.hero__tagline              { --r: 0; }
.hero__sub                  { --r: 1; }
.hero__cities               { --r: 2; }
.hero__body                 { --r: 3; }
.hero__actions .btn-arrow:nth-child(1) { --r: 4; }
.hero__actions .btn-arrow:nth-child(2) { --r: 5; }
@keyframes row-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.hero__tagline {
  font-family: var(--display);
  font-size: var(--fs-tag);
  line-height: 1.15;
  color: var(--black);
  margin-top: .3em;
}

.hero__sub {
  font-weight: 300;
  font-size: var(--fs-sub);
  color: var(--gray);
  margin-top: 1.1em;
}

.hero__cities {
  font-weight: 500;
  font-size: max(10px, 0.88vw);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 2.2em;
  line-height: 2;
}
.hero__cities .sep { margin: 0 .5em; }

.hero__body {
  max-width: 34em;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--body);
  margin-top: 2.6em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: max(12px, 1.4vw);
  margin-top: max(28px, 3.2vw);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max(160px, 14.5vw);
  height: max(44px, 3.6vw);
  padding: 0 2.4em;
  border: 1px solid var(--black);
  color: var(--black);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}
.btn:hover,
.btn:focus-visible { background: var(--black); color: var(--white); }

.hero__image {
  position: relative;
  min-height: max(320px, 30vw);
  /* pull the portrait ~1in to the left, overlapping the copy column's empty right edge */
  left: -6.7vw;
  width: calc(100% + 6.7vw);
}
.hero__copy { position: relative; z-index: 1; }
.hero__image img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;   /* crop from the right, never the left */
}
/* The video is what you see, parked on its first frame between plays. The
   still underneath is a fallback: it shows until the video has a decoded frame
   and if the video fails to load. Both share one crop so the handoff is invisible. */
.hero__video { pointer-events: none; }
.hero__video.is-failed { display: none; }

/* Optional hover video: sits over the still, invisible until the pointer is over the
   figure (script.js adds .is-playing once frames are actually playing). The page's own
   image rules above/below position it, so it always crops exactly like the still. */
.hover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.hover-video.is-playing { opacity: 1; }
.hover-video.is-failed { display: none; }
@media (prefers-reduced-motion: reduce) { .hover-video { display: none; } }

/* ---- Parallax photos ---------------------------------------------------
   script.js drifts these a little slower than the page. They're oversized so
   the drift never exposes an edge. --py is set per frame. */
[data-parallax] { overflow: hidden; }
[data-parallax] img,
[data-parallax] video {
  top: 0;               /* anchored top-left: any crop falls on the right and bottom */
  height: 108%;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
/* Page-specific image rules (".xx__image img { height: 100% }") would shrink the photo back to the box and leave a strip
   of empty box at the bottom once it drifts. Keep every drifting photo oversized, wherever it is used. Heroes size themselves. */
@media (min-width: 721px) {
  figure[data-parallax]:not(.hero__image) > img { height: 108%; }
}

/* ---- Hero: photo on the left ----------------------------------------------------------
   "Photo position: Left" in the editor adds .hero--left to a hero. The default (no class) is photo on the right. */
@media (min-width: 721px) {
  .hero.hero--left, .ci-hero.hero--left, .cn-hero.hero--left { grid-template-columns: 38vw minmax(0, 1fr); }
  .hero--left .hero__image, .hero--left .ci-hero__image, .hero--left .cn-hero__image { order: -1; }
  .hero.hero--left .hero__image { left: 0; width: calc(100% + 6.7vw); }        /* home, agency, origin bleed into the text column, mirrored */
  .mb-hero.hero--left .hero__image, .cu-hero.hero--left .hero__image { width: 100%; }
  .hero--left .hero__copy, .hero--left .ci-hero__copy, .hero--left .cn-hero__copy, .hero--left .pt-hero__copy { padding-right: var(--edge); padding-left: max(12px, 2vw); }
  .hero.hero--left:not(.mb-hero):not(.cu-hero) .hero__copy { padding-left: calc(6.7vw + max(12px, 2vw)); }
}
@media (min-width: 901px) {
  .pt-hero.hero--left { grid-template-columns: 50vw minmax(0, 1fr); }
  .pt-hero.hero--left .pt-hero__image { order: -1; }
}
@media (max-width: 720px) {
  .hero.hero--left, .ci-hero.hero--left, .cn-hero.hero--left, .pt-hero.hero--left { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  .hero--left .hero__image, .hero--left .ci-hero__image, .hero--left .cn-hero__image, .hero--left .pt-hero__image { order: -1; left: 0; width: auto; justify-self: stretch; }
  .hero--left .hero__copy, .hero--left .ci-hero__copy, .hero--left .cn-hero__copy, .hero--left .pt-hero__copy { padding-left: 3vw; padding-right: var(--edge); }
  .pt-hero.hero--left .hero__title { white-space: normal; }
  .pt-hero.hero--left .pt-hero__image img, .pt-hero.hero--left .pt-hero__image .hover-video {
    object-position: right bottom;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 22%);
    mask-image: linear-gradient(to left, transparent, #000 22%);
  }
}

/* ---- Hero: photo crop focus ------------------------------------------------------------
   "Photo crop focus" in the editor adds hero-crop--left|center|right to a hero. As designed (no class) keeps each hero's own crop.
   Desktop: where the photo is anchored when it is cropped to its box. Phones: the photo is wider than its column and bleeds off
   the edge, so the focus slides it sideways inside the column (--hw = that photo's phone width, 38vw = the column). */
.hero-crop--left.hero-crop--left figure > img, .hero-crop--left.hero-crop--left figure > video { object-position: left top !important; }
.hero-crop--center.hero-crop--center figure > img, .hero-crop--center.hero-crop--center figure > video { object-position: center top !important; }
.hero-crop--right.hero-crop--right figure > img, .hero-crop--right.hero-crop--right figure > video { object-position: right top !important; }
.pt-hero.hero-crop--left figure > img, .pt-hero.hero-crop--left figure > video { object-position: left bottom !important; }
.pt-hero.hero-crop--center figure > img, .pt-hero.hero-crop--center figure > video { object-position: center bottom !important; }
.pt-hero.hero-crop--right figure > img, .pt-hero.hero-crop--right figure > video { object-position: right bottom !important; }
@media (max-width: 720px) {
  .hero-crop--center:not(.hero--left) figure, .hero-crop--right:not(.hero--left) figure { --hw: 72vw; }
  .or-hero.hero-crop--center:not(.hero--left) figure, .or-hero.hero-crop--right:not(.hero--left) figure { --hw: 60vw; }
  .ci-hero.hero-crop--center:not(.hero--left) figure, .ci-hero.hero-crop--right:not(.hero--left) figure,
  .cn-hero.hero-crop--center:not(.hero--left) figure, .cn-hero.hero-crop--right:not(.hero--left) figure,
  .pt-hero.hero-crop--center:not(.hero--left) figure, .pt-hero.hero-crop--right:not(.hero--left) figure { --hw: 64vw; }
  .hero-crop--center:not(.hero--left) figure > img, .hero-crop--center:not(.hero--left) figure > video { transform: translate3d(calc((var(--hw) - 38vw) / -2), 0, 0) !important; }
  .hero-crop--right:not(.hero--left) figure > img, .hero-crop--right:not(.hero--left) figure > video { transform: translate3d(calc((var(--hw) - 38vw) * -1), 0, 0) !important; }
}

/* ---- Pillars ----------------------------------------------------------- */
.pillars {
  background: var(--light);
  border-bottom: 1px solid var(--line);
  display: flex;                 /* 2-4 cards share one row, however many there are; tablet/phone go back to a grid below */
  padding: max(40px, 4.4vw) var(--edge) max(32px, 2.8vw);
}
.pillars > * { flex: 1 1 0; min-width: 0; }
/* four across is tight on small laptops and tablets: go two by two */
@media (max-width: 1180px) and (min-width: 901px) {
  .pillars { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .pillar:nth-child(3)::before { display: none; }
  .pillar:nth-child(n + 3) { border-top: 1px solid var(--line); padding-top: 36px; }
}

/* Shared "lift" card: rises with a springy overshoot and a deep layered shadow */
.lift {
  position: relative;
  background: transparent;
  border-radius: 2px;
  transform: translateY(0) scale(1);
  transition:
    transform .45s cubic-bezier(.2, 1.4, .4, 1),   /* springy overshoot on the way up */
    background-color .3s ease,
    box-shadow .45s cubic-bezier(.2, 1, .3, 1);
}
@media (hover: hover) {
  .lift:hover {
    background: var(--white);
    transform: translateY(-14px) scale(1.025);
    box-shadow:
      0 1px 2px rgba(17, 17, 17, .06),
      0 10px 18px -6px rgba(17, 17, 17, .14),
      0 34px 56px -18px rgba(17, 17, 17, .38),
      0 70px 90px -40px rgba(17, 17, 17, .30);
    z-index: 1;
  }
}

.pillar {
  text-align: center;
  padding: max(20px, 2vw) max(12px, 2.2vw) max(24px, 2.4vw);
}
/* column dividers as pseudo-elements so they can fade while a card lifts */
.pillar + .pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: max(20px, 2vw);
  bottom: max(24px, 2.4vw);
  width: 1px;
  background: var(--line);
  transition: opacity .25s ease;
}

/* inner pieces move at their own pace so the lift reads as layered */
.pillar__num,
.pillar__title,
.pillar__body {
  transition: transform .5s cubic-bezier(.2, 1.3, .4, 1), color .3s ease;
}
.pillar__title::after {
  transition: width .5s cubic-bezier(.2, 1.3, .4, 1), background-color .3s ease;
}

@media (hover: hover) {
  .pillar:hover::before,
  .pillar:hover + .pillar::before { opacity: 0; }

  .pillar:hover .pillar__num   { transform: translateY(-6px); color: var(--black); }
  .pillar:hover .pillar__title { transform: translateY(-3px); transition-delay: .04s; }
  .pillar:hover .pillar__title::after { width: 3.4em; background: var(--black); transition-delay: .06s; }
  .pillar:hover .pillar__body  { transform: translateY(2px); transition-delay: .08s; }
}

.pillar__num {
  display: block;
  font-weight: 500;
  font-size: max(9px, 0.75vw);
  letter-spacing: 0.25em;
  color: var(--gray);
}

.pillar__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  margin-top: .7em;
  line-height: 1;
}
.pillar__title::after {
  content: "";
  display: block;
  width: 1.6em;
  height: 1px;
  background: var(--rule);
  margin: .8em auto 0;
}

/* whole pillar card is clickable: the title link stretches over the card */
.pillar__link { color: inherit; }
.pillar__link::after { content: ""; position: absolute; inset: 0; }
.pillar:has(.pillar__link) { cursor: pointer; }

.pillar__body {
  max-width: 22em;
  margin: 2.4em auto 0;
  font-size: max(13px, 1.05vw);
  line-height: 1.7;
  color: var(--body);
}

/* ---- Statement --------------------------------------------------------- */
.statement {
  background: #fafafa;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: max(24px, 6vw);
  align-items: center;
  padding: max(44px, 6vw) var(--edge);
}

.statement__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 0.98;
  color: var(--black);
  padding-left: 5vw;
}

/* Scroll-in: each line fades in while growing out of its left anchor toward the
   right, one line after the other; the aside then fades in from nothing.
   Triggered by .is-in via IntersectionObserver. */
.statement__line {
  display: block;
  opacity: 0;
  transform: scale(.72);
  transform-origin: left center;
  transition: opacity .9s ease, transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * .18s);
}
.statement__aside {
  opacity: 0;
  transition: opacity 1.2s ease;
  transition-delay: .65s;
}
.statement.is-in .statement__line { opacity: 1; transform: scale(1); }
.statement.is-in .statement__aside { opacity: 1; }

.statement__aside { max-width: 24em; }  /* opacity/transition set in the scroll-in block above */
.statement__aside::before {
  content: "";
  display: block;
  width: 4em;
  height: 1px;
  background: var(--rule);
  margin-bottom: 2.8em;
}
.statement__aside p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--body);
}

/* ---- Join -------------------------------------------------------------- */
.join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 49vw;
  border-bottom: 1px solid var(--line);
}

/* the whole left half of the section is the lift card */
.join__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: max(40px, 5vw) max(16px, 3vw) max(40px, 4vw) var(--edge);
  background: var(--white);
  border-radius: 0;
}
.join__copy > * { align-self: flex-start; }

/* inner pieces lift in a stagger, like the pillars (only where the copy block
   also carries .lift; the homepage Join sits still) */
.lift .join__title, .lift .join__tagline, .lift .join__body, .lift .btn-arrow {
  transition: transform .5s cubic-bezier(.2, 1.3, .4, 1);
}
.join__tagline::after { transition: width .5s cubic-bezier(.2, 1.3, .4, 1), background-color .3s ease; }
@media (hover: hover) {
  .join__copy.lift:hover .join__title   { transform: translateY(-5px); }
  .join__copy.lift:hover .join__tagline { transform: translateY(-3px); transition-delay: .04s; }
  .join__copy.lift:hover .join__tagline::after { width: 4.4em; background: var(--black); transition-delay: .06s; }
  .join__copy.lift:hover .join__body    { transform: translateY(-1px); transition-delay: .08s; }
  .join__copy.lift:hover .btn-arrow     { transform: translateY(2px); transition-delay: .1s; }
}

.join__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--black);
  margin-left: -0.03em;
}

.join__tagline {
  font-family: var(--serif);
  font-size: max(20px, 1.75vw);
  color: var(--black);
  margin-top: .8em;
}
.join__tagline::after {
  content: "";
  display: block;
  width: 2.4em;
  height: 1px;
  background: var(--rule);
  margin-top: 1.1em;
}

.join__body {
  max-width: 30em;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--body);
  margin-top: 2em;
}

/* ---- Arrow button --------------------------------------------------------
   Outlined square-edged button. On hover a black fill sweeps in from the left, the label
   flips to white and the arrow draws out to the right. */
.btn-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.4em;
  margin-top: 2.4em;
  height: max(46px, 3.6vw);
  padding: 0 1.4em 0 1.9em;
  border: 1px solid var(--black);
  border-radius: 0;
  color: var(--black);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
}
.btn-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease);
  z-index: -1;
}
.btn-arrow__label {
  transition: color .3s ease;
}
.btn-arrow__icon {
  position: relative;
  width: 1.9em;
  height: 1px;
  background: currentColor;
  transition: transform .5s var(--ease), background-color .3s ease, width .5s var(--ease);
}
.btn-arrow__icon::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: .55em;
  height: .55em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.hero__actions .btn-arrow { margin-top: 0; }

.btn-arrow:hover, .btn-arrow:focus-visible { color: var(--white); }
.btn-arrow:hover::before, .btn-arrow:focus-visible::before { transform: scaleX(1); }
.btn-arrow:hover .btn-arrow__icon, .btn-arrow:focus-visible .btn-arrow__icon { width: 2.6em; }

.join__image {
  position: relative;
  min-height: max(320px, 30vw);
  background: var(--dark);
}
.join__image img,
.join__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* video parks on its poster (same frame as the image beneath) until it scrolls into view */
.join__video { pointer-events: none; }
.join__video.is-failed { display: none; }

/* ---- Build ------------------------------------------------------------- */
.build {
  background: var(--light);
  border-bottom: 1px solid var(--line);
  padding: max(36px, 3vw) var(--edge) max(28px, 2.5vw);
  text-align: center;
}

.build__title {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  color: var(--black);
  line-height: 1.1;
  padding-bottom: .3em;
  border-bottom: 1px solid var(--rule);
}

.build__body {
  max-width: 48em;
  margin: 1.4em auto 0;
  font-size: max(15px, 1.25vw);
  line-height: 1.7;
  color: var(--body);
}

.build__list {
  list-style: none;
  margin: max(28px, 2.8vw) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.build__list li {
  flex: 1 1 0;
  padding: .6em .6em;
  font-weight: 500;
  font-size: max(10px, 0.85vw);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-left: 1px solid var(--line);
}
.build__list li:first-child { border-left: 0; }

/* Scroll-driven emphasis: script.js toggles .is-on per item as the list travels
   up the viewport, in order, and removes it again on the way back down. */
.build__list li span {
  display: inline-block;
  transform: scale(1);
  transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), color .3s ease;
}
.build__list li.is-on span {
  font-weight: 700;
  color: var(--black);
  transform: scale(1.22);
}

/* ---- Cities band ------------------------------------------------------- */
.cities {
  background: var(--dark);
  color: var(--white);
  text-align: center;
  padding: max(34px, 3vw) var(--edge) max(36px, 3.2vw);
}

/* Tagline sits between two rules that run out to the page edges */
.cities__sub {
  display: flex;
  align-items: center;
  gap: 1.6em;
  font-weight: 300;
  font-size: max(12px, 0.95vw);
  letter-spacing: 0.02em;
  color: var(--muted);
}
.cities__sub::before,
.cities__sub::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: #4a4a4a;
}
.cities__sub > span { flex: 0 0 auto; }

/* One row on wide screens, spread edge to edge. Narrower screens break the row
   by hand so a line never ends on a stray slash: 4 + 3, then 3 + 2 + 2 on
   phones. A .sep--row-* slash becomes the line break. */
.cities__list {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: max(16px, 1.4vw);
  font-family: var(--serif);
  font-size: max(12px, 1.05vw);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
}
.cities__list--two { flex-direction: column; gap: .5em; }       /* more than 8 names: two even rows */
.cities__row { display: flex; justify-content: space-between; align-items: baseline; }
.cities__list .sep--row-end { display: none; }
.cities__list span:not(.sep) { margin-right: -0.24em; }   /* trim trailing tracking so the ends sit on the edges */
.cities__list .sep { letter-spacing: 0; color: #7a7a7a; }

/* Hovered city grows in place. A transform scales without taking any more
   room, so the neighbours and the rest of the page stay put. */
.cities__list span:not(.sep) {
  display: inline-block;
  transform-origin: center;
  transition: transform .45s var(--ease), color .3s ease;
}
@media (hover: hover) {
  .cities__list span:not(.sep):hover { transform: scale(1.18); color: var(--white); }
  .cities__list:hover span:not(.sep):not(:hover) { color: #9a9a9a; }
}

@media (max-width: 1080px) {
  .cities__row { display: contents; }
  .cities__list .sep--row-end { display: inline; }
  .cities__list {
    display: block;
    font-size: max(13px, 1.5vw);
    letter-spacing: 0.22em;
    line-height: 2.2;
  }
  .cities__list span:not(.sep) { margin-right: -0.22em; }
  .cities__list .sep { margin: 0 .63em 0 1.1em; }
  .cities__list .sep--row-l { display: block; height: 0; margin: 0; overflow: hidden; visibility: hidden; }
}

/* ---- Film grain ---------------------------------------------------------
   A faint noise layer over photographs and dark bands. Photos get light and
   dark specks; dark bands and figures that sit on the white page (cut-out
   portraits, offset image pairs) get light specks only, which vanish on white.
   [data-grain] puts the same layer over a whole section, beneath its text. */
:where(figure, .cities, .pt-outcomes__images li, [data-grain]) { position: relative; }
figure::after,
.cities::after,
.menu::after,
.pt-outcomes__images li::after,
[data-grain]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: var(--grain-light), var(--grain-dark);
  /* drawn smaller than the tiles are rendered, for a fine grain */
  background-size: 240px 240px, 300px 300px;
  background-position: 0 0, 110px 70px;
  opacity: .09;
}
/* Only grain that is on screen moves: script.js sets .is-grain while an element
   is in view, and the menu's runs only while it is open. Elsewhere it rests. */
.is-grain::after,
.menu.is-open::after { animation: grain 1s steps(1) infinite; }
/* Film grain never sits still: the layers jump to unrelated offsets twelve
   times a second, so no frame, and no tiling, is on screen long enough to read. */
@keyframes grain {
  0% { background-position: 165px 77px, 202px 33px; }
  8.33% { background-position: 24px 37px, 120px 274px; }
  16.67% { background-position: 48px 187px, 298px 29px; }
  25% { background-position: 19px 109px, 19px 44px; }
  33.33% { background-position: 222px 214px, 35px 123px; }
  41.67% { background-position: 46px 42px, 217px 30px; }
  50% { background-position: 49px 63px, 114px 22px; }
  58.33% { background-position: 81px 58px, 31px 295px; }
  66.67% { background-position: 59px 203px, 25px 113px; }
  75% { background-position: 23px 45px, 139px 68px; }
  83.33% { background-position: 148px 214px, 73px 276px; }
  91.67% { background-position: 60px 52px, 157px 286px; }
}
.hero__image::after,
.pt-hero__images::after,
.cities::after,
.menu::after { background-image: var(--grain-light); }
.cities::after,
.menu::after { opacity: .07; }

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  background: var(--foot);
  text-align: center;
  padding: max(24px, 1.8vw) var(--edge) max(32px, 2.8vw);
}

/* Monogram: the drawn V mark (inline SVG, so it takes the text colour) with a
   bullet above it */
.monogram {
  position: relative;
  display: inline-block;
  padding-top: .5em;            /* room for the bullet at rest above the V */
  color: var(--black);
  font-size: max(36px, 2.9vw);
  line-height: 1;
}
.monogram__v {
  display: block;
  height: .8em;
  width: auto;
  aspect-ratio: 240.7 / 230.4;
  fill: currentColor;
}
/* The bullet orbits the V. --orbit (degrees) is set from scroll position by
   script.js: 0° at rest above the V, one full turn as the footer scrolls in,
   ending back on top. Once it lands there script.js adds .is-landed and the
   bullet fades away, leaving the V alone. Scrolling up brings it back and runs
   the turn in reverse. */
.monogram__dot {
  position: absolute;
  left: 50%;
  top: calc(.5em + .4em);       /* the V's centre */
  width: .16em;
  height: .16em;
  margin: -.08em 0 0 -.08em;
  border-radius: 50%;
  background: currentColor;
  transform: rotate(var(--orbit, 0deg)) translateY(-.72em);   /* clears the V's top corners */
  transition: opacity .9s ease;
  will-change: transform;
}
.monogram.is-landed .monogram__dot { opacity: 0; }

.site-footer__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: max(28px, 3.5vw);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1;
  margin-top: .8em;
}
.site-footer__title::after {
  content: "";
  display: block;
  width: 1.2em;
  height: 1px;
  background: var(--rule);
  margin: .6em auto 0;
}

/* Scroll-in: "Emerging" slides in from the left, "2027" from the right */
.site-footer__word {
  display: inline-block;
  opacity: 0;
  transition: opacity .9s ease, transform 1.1s var(--ease);
}
.site-footer__word--l { transform: translateX(-10vw); }
.site-footer__word--r { transform: translateX(10vw); transition-delay: .08s; }
.site-footer.is-in .site-footer__word { opacity: 1; transform: translateX(0); }

.site-footer__sub {
  font-weight: 300;
  font-size: max(13px, 1.15vw);
  color: var(--body);
  margin-top: 1.8em;
}

.site-footer__legal {
  margin-top: max(28px, 2.4vw);
  font-weight: 300;
  font-size: max(11px, 0.8vw);
  letter-spacing: 0.04em;
  line-height: 2;
  color: var(--gray);
}
.site-footer__legal a {
  color: var(--gray);
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible { color: var(--black); border-bottom-color: var(--black); }

/* ---- Text section (page-text): standard text across the page, optional photo nestled top right ------ */
.tx {
  padding: max(36px, 4.4vw) var(--edge) max(40px, 4.6vw);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.tx__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--black);
  margin-bottom: max(16px, 1.6vw);
}
.tx__body { display: flow-root; }             /* contains the floated photo */
.tx__p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--body);
}
.tx__p + .tx__p { margin-top: 1.1em; }
.tx__photo {
  float: right;
  margin: .35em 0 max(14px, 1.4vw) max(20px, 2.4vw);
  shape-margin: max(14px, 1.4vw);
}
.tx__photo--left { float: left; margin: .35em max(20px, 2.4vw) max(14px, 1.4vw) 0; }
.tx__photo--s { width: 20%; }
.tx__photo--m { width: 32%; }
.tx__photo--l { width: 42%; }
.tx__photo img { display: block; width: 100%; height: auto; }
@media (max-width: 720px) {
  .tx__photo, .tx__photo--left { float: none; width: 100%; margin: 0 0 18px; }
}

/* ---- Posts: the Posts section (cards or list) and a post's own page --------------------------------------- */
.posts {
  --gap: max(16px, 2vw);
  padding: max(36px, 4.4vw) var(--edge) max(40px, 4.6vw);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.posts__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--black);
  margin-bottom: max(18px, 1.8vw);
}
.posts__empty { color: var(--gray); font-size: var(--fs-body); }
.posts__grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gap); }
.post-card__link { display: block; color: inherit; text-decoration: none; height: 100%; }
.post-card__img { margin: 0; overflow: hidden; background: var(--light); }
.post-card__img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
.post-card__meta { font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray); margin-bottom: .7em; }
.post-card__title { font-family: var(--serif); font-weight: 400; font-size: max(20px, 1.7vw); line-height: 1.2; color: var(--black); }
.post-card__excerpt { margin-top: .7em; font-size: var(--fs-body); line-height: 1.65; color: var(--body); }
.posts--cards .post-card { flex: 0 0 calc((100% - 2 * var(--gap)) / 3 - 1px); min-width: 0; border: 1px solid var(--line); background: var(--light); }
.posts--cards .post-card__body { padding: max(16px, 1.6vw); }
.posts--list .post-card { flex: 0 0 100%; border-top: 1px solid var(--line); padding-top: var(--gap); }
.posts--list .post-card:last-child { border-bottom: 1px solid var(--line); padding-bottom: var(--gap); }
.posts--list .post-card__link { display: flex; gap: var(--gap); align-items: flex-start; }
.posts--list .post-card__img { flex: 0 0 18%; }
.posts--list .post-card__body { flex: 1 1 0; min-width: 0; }
@media (hover: hover) {
  .post-card__link:hover .post-card__img img { transform: scale(1.04); }
  .post-card__link:hover .post-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
}
@media (max-width: 900px) { .posts--cards .post-card { flex-basis: calc((100% - var(--gap)) / 2 - 1px); } }
@media (max-width: 560px) {
  .posts--cards .post-card { flex-basis: 100%; }
  .posts--list .post-card__img { flex-basis: 28%; }
}
.post-head { padding: max(40px, 5vw) var(--edge) max(8px, 1vw); background: var(--white); }
.post-head--image { display: flex; align-items: flex-start; justify-content: space-between; gap: max(24px, 3.5vw); }
.post-head--image .post-head__text { flex: 1 1 0; min-width: 0; }
.post-head--left { flex-direction: row-reverse; }              /* featured image on the left of the title */
.post-head__title { font-family: var(--display); font-weight: 400; font-size: max(34px, 4.8vw); line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; color: var(--black); overflow-wrap: anywhere; }
.post-head__meta { margin-top: 1.1em; font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); }
.post-head__image { flex: 0 0 46%; margin: 0; }
.post-head__image img { display: block; width: 100%; height: auto; max-height: max(240px, 24vw); object-fit: cover; }   /* wide, but never taller than this */
@media (max-width: 720px) {
  .post-head--image { display: block; }
  .post-head__image { margin-top: 20px; }
  .post-head__image img { max-height: 56vw; }
}
.post-head + .tx { padding-top: max(20px, 2.4vw); }

/* ---- Video section ---------------------------------------------------------------------------------------------- */
.vid { padding: max(36px, 4.4vw) var(--edge) max(40px, 4.6vw); background: var(--white); border-bottom: 1px solid var(--line); }
.vid--edge { padding-left: 0; padding-right: 0; }
.vid__title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: 0.01em; color: var(--black); margin-bottom: max(16px, 1.6vw); }
.vid--edge .vid__title, .vid--edge .vid__caption { padding-left: var(--edge); padding-right: var(--edge); }
.vid__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--dark); overflow: hidden; }
.vid__media { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--dark); }
video.vid__media { object-fit: contain; }
.vid__caption { margin-top: .9em; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); }

/* ---- Formatted text (from the admin's visual editor; see lib/rich.php) ------------------------------ */
.rich-p + .rich-p, .rich-p + .rich-list, .rich-list + .rich-p, .rich-list + .rich-list { margin-top: .9em; }
.rich-list { padding-left: 1.3em; list-style: disc; }
ol.rich-list { list-style: decimal; }
.rich-list li + li { margin-top: .35em; }
.rich-p a, .rich-list a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: opacity .25s ease; }
.rich-p a:hover, .rich-list a:hover, .rich-p a:focus-visible, .rich-list a:focus-visible { opacity: .65; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .menu-toggle { display: block; }

  .pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 44px;
    padding-bottom: 44px;
  }
  .pillar {
    border-top: 1px solid var(--line);
    padding-top: 36px;
  }
  .pillar + .pillar::before { display: none; }
  .pillar:first-child { border-top: 0; padding-top: 0; }
  /* no lift on phones: the cards sit still */
  .pillar.lift:hover { transform: none; box-shadow: none; background: transparent; }
  .pillar:hover .pillar__num, .pillar:hover .pillar__title, .pillar:hover .pillar__body { transform: none; }
  .pillar:hover .pillar__num { color: var(--gray); }
  .pillar:hover .pillar__title::after { width: 1.6em; background: var(--rule); }

  .statement { grid-template-columns: 1fr; }
  .statement__title { padding-left: 0; }
  .statement__aside::before { margin-bottom: 1.8em; }

  .join { grid-template-columns: 1fr; }
  .join__image { min-height: 0; aspect-ratio: 16 / 10; }

  .build__list li {
    flex: 0 0 50%;
    padding: 10px 8px;
    border-left: 0;
  }
}

/* Hero on phones: keep the portrait beside the copy and let her bleed off
   the right edge. Copy takes ~62%; the image is wider than its column so it
   pushes into the right-hand space and gets clipped by the section. */
@media (max-width: 720px) {
  .hero {
    grid-template-columns: minmax(0, 62%) minmax(0, 1fr);
  }
  .hero__copy {
    padding: max(32px, 9vw) 0 max(32px, 8vw) var(--edge);
  }
  .hero__title    { font-size: 9.2vw; }
  .hero__tagline  { font-size: 5.4vw; }
  .hero__sub      { font-size: 3.5vw; margin-top: .9em; }
  .hero__cities   { font-size: 2.4vw; letter-spacing: .16em; line-height: 1.9; margin-top: 1.6em; }
  .hero__cities .sep { margin: 0 .5em; }
  .hero__body     { font-size: 3.2vw; margin-top: 1.8em; max-width: none; }
  .hero__actions  { flex-direction: column; gap: 10px; margin-top: 7vw; }
  .hero__actions .btn-arrow { width: 100%; justify-content: space-between; height: 42px; font-size: 2.5vw; padding: 0 1em 0 1.2em; }

  .cities__sub { font-size: max(12px, 3vw); justify-content: center; text-align: center; }
  .cities__sub > span { flex: 0 1 auto; }
  .cities__sub::before, .cities__sub::after { display: none; }
  .cities__list { font-size: 3vw; letter-spacing: .2em; line-height: 2.4; }
  .cities__list span:not(.sep) { margin-right: -.2em; }
  .cities__list .sep { margin: 0 .35em 0 .8em; }
  .cities__list .sep--row-l { display: inline-block; height: auto; margin: 0 .35em 0 .8em; overflow: visible; visibility: visible; }
  .cities__list .sep--row-s { display: block; height: 0; margin: 0; overflow: hidden; visibility: hidden; }

  .hero__image {
    min-height: 0;
    left: 0;
    width: 72vw;          /* wider than its column → bleeds off the right */
    justify-self: start;
  }
  /* size to the figure's width (not its height) so her face stays in the
     visible strip; the PNG is transparent so any empty space below is invisible */
  .hero__image img,
  .hero__video {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: unset;
    object-position: left top;
    transform: none;      /* no parallax drift on phones: top edge stays put */
  }
}

@media (max-width: 480px) {
  .build__list li { flex: 0 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__bar, .wordmark, .menu, .menu__nav a, .menu__foot,
  .menu-toggle__line, .site-nav a::after, .btn,
  .lift, .pillar__num, .pillar__title, .pillar__title::after, .pillar__body,
  .join__title, .join__tagline, .join__tagline::after, .join__body, .btn-arrow, .btn-arrow::before, .btn-arrow__icon { transition: none; }
  .lift:hover { transform: none; }
  [data-parallax] img, [data-parallax] video { transform: none; top: 0; height: 100%; }
  figure[data-parallax]:not(.hero__image) > img { height: 100%; }
  .build__list li span, .cities__list span { transition: none; }
  .statement__line, .statement__aside, .site-footer__word { transition: none; opacity: 1; transform: none; }
  .hero__letter { animation: none; opacity: 1; transform: none; }
  [data-wordmark-reveal] .wordmark__letter, [data-wordmark-reveal] .wordmark__tag { opacity: 1; transform: none; transition: none; }
  .is-grain::after, .menu.is-open::after { animation: none; }
  .hero__tagline, .hero__sub, .hero__cities, .hero__body, .hero__actions .btn-arrow { animation: none; opacity: 1; }
}

/* Velaharra homepage hero: DM Sans and compact spacing, 2026-10-20. */
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__title,
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__tagline {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__title { text-transform: none; margin-left: -0.025em; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__tagline { font-size: max(24px, 3.15vw); line-height: 1.12; margin-top: .32em; letter-spacing: -.025em; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__copy { padding-top: max(32px, 4vw); padding-bottom: max(32px, 4vw); }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__sub { margin-top: .65em; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities { margin-top: 1.25em; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__body { margin-top: 1.35em; line-height: 1.55; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__actions { margin-top: max(20px, 1.6vw); }
@media (max-width: 720px) {
 .hero:has(.hero__title[aria-label="Velaharra"]) .hero__copy { padding-top: 6vw; padding-bottom: 6vw; }
 .hero:has(.hero__title[aria-label="Velaharra"]) .hero__tagline { font-size: 4.5vw; margin-top: .45em; }
 .hero:has(.hero__title[aria-label="Velaharra"]) .hero__actions { margin-top: 4vw; }
}

/* Homepage hero hierarchy refinement, 2026-10-20. */
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__title { order: 1; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__tagline { order: 2; font-size: max(21px, 2.55vw); margin-top: .25em; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__sub { order: 3; margin-top: .5em; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__body { order: 4; font-size: max(20px, 1.6vw); line-height: 1.45; margin-top: .65em; max-width: 25em; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities { order: 5; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: min(100%, 38vw); gap: .3em .55em; margin-top: 1.6em; line-height: 1.6; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities .sep { margin: 0; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities .sep:nth-child(8) { flex-basis: 100%; height: 0; overflow: hidden; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__actions { order: 6; margin-top: max(16px, 1vw); }
@media (max-width: 720px) {
 .hero:has(.hero__title[aria-label="Velaharra"]) .hero__tagline { font-size: 3.7vw; }
 .hero:has(.hero__title[aria-label="Velaharra"]) .hero__body { font-size: max(14px, 3.5vw); max-width: 100%; }
 .hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities { width: 100%; gap: .3em .3em; font-size: 2.1vw; letter-spacing: .08em; }
}

/* City grouping comparison */
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities .sep {display:none;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities::before {content:"";flex-basis:100%;height:0;order:4;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(1) {order:1;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(5) {order:2;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(11) {order:3;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(3) {order:5;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(7) {order:6;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(9) {order:7;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(13) {order:8;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:not(.sep)::after {content:" /";margin-left:.55em;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(11)::after,.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(13)::after {content:none;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities {order:7;margin-top:max(24px, 1.84vw);justify-content:flex-start;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__actions {margin-top:max(24px, 1.84vw);}
/* Inner-page heroes follow the approved homepage typography and spacing. */
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) :is(.hero__copy,.pt-hero__copy,.ag-hero__copy,.ci-hero__copy,.or-hero__copy,.cn-hero__copy){padding-top:max(32px,4vw);padding-bottom:max(32px,4vw);}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) :is(.hero__title,.ag-hero__title,.ci-hero__title,.or-hero__title,.cn-hero__title){font-family:"DM Sans","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:8.8vw;line-height:1.05;letter-spacing:-.035em;text-transform:none;margin-left:-.025em;white-space:nowrap;}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) :is(.hero__tagline,.ag-hero__tagline,.ci-hero__tagline,.or-hero__tagline,.cn-hero__tagline){font-family:"DM Sans","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:max(21px,2.55vw);line-height:1.12;letter-spacing:-.025em;margin-top:.25em;}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) :is(.hero__body,.ag-hero__body,.ci-hero__body,.or-hero__body,.cn-hero__body){font-size:max(20px,1.6vw);line-height:1.45;margin-top:.65em;max-width:25em;padding-right:0;}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) .or-hero__body p + p{margin-top:.65em;}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) :is(.hero__actions,.ag-hero__actions,.cn-hero__actions){margin-top:max(24px,1.84vw);}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) :is(.cn-rule,.cu-rule){margin-top:max(24px,1.84vw);margin-bottom:0;}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) .hero__title[aria-label="Representation"]{font-size:5.5vw;}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) .hero__title[aria-label="Partnerships"],main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])).mb-hero .hero__title{font-size:6.5vw;}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) .hero__title[aria-label="Cultural Platform"]{font-size:5vw;}
@media(max-width:720px){
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) :is(.hero__copy,.pt-hero__copy,.ag-hero__copy,.ci-hero__copy,.or-hero__copy,.cn-hero__copy){padding-top:6vw;padding-bottom:6vw;}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) :is(.hero__title,.ag-hero__title,.ci-hero__title,.or-hero__title,.cn-hero__title){font-size:12vw;}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) :is(.hero__tagline,.ag-hero__tagline,.ci-hero__tagline,.or-hero__tagline,.cn-hero__tagline){font-size:max(20px,4.5vw);}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) :is(.hero__body,.ag-hero__body,.ci-hero__body,.or-hero__body,.cn-hero__body){font-size:max(16px,3.5vw);max-width:100%;}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) .hero__title[aria-label="Representation"],main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) .hero__title[aria-label="Cultural Platform"]{font-size:7vw;}
main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) .hero__title[aria-label="Partnerships"],main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])).mb-hero .hero__title{font-size:9vw;}
}

main > section:first-of-type:not(:has(.hero__title[aria-label="Velaharra"])) .hero__letter{white-space:pre;}

/* Approved Hero Font Studio layout: Plus Jakarta Sans titles, 2026-10-20. */
@font-face{font-family:"Plus Jakarta Sans";src:url("assets/fonts/velaharra-local-2.ttf") format("truetype");font-style:normal;font-weight:200 800;font-display:swap;}
main > section:first-of-type :is(.hero__copy,.pt-hero__copy,.ag-hero__copy,.ci-hero__copy,.or-hero__copy,.cn-hero__copy){align-self:start;padding-top:56px;padding-bottom:56px;padding-left:44px;padding-right:44px;}
main > section:first-of-type :is(.hero__title,.ag-hero__title,.ci-hero__title,.or-hero__title,.cn-hero__title){font-family:"Plus Jakarta Sans",Arial,sans-serif!important;font-weight:500!important;font-size:clamp(28px,5.5vw,94px)!important;line-height:1.05!important;letter-spacing:-.035em!important;text-transform:none!important;white-space:normal!important;min-height:1.05em;margin:0 0 14px!important;}
main > section:first-of-type :is(.hero__tagline,.ag-hero__tagline,.ci-hero__tagline,.or-hero__tagline,.cn-hero__tagline){font-family:"DM Sans",Arial,sans-serif!important;font-weight:500!important;font-size:31px!important;line-height:1.15!important;letter-spacing:-.025em;min-height:1.15em;margin:0 0 22px!important;}
main > section:first-of-type :is(.hero__body,.ag-hero__body,.ci-hero__body,.or-hero__body,.cn-hero__body){font-family:"DM Sans",Arial,sans-serif;font-size:21px!important;line-height:1.5!important;max-width:32em;margin-top:0!important;padding-right:0;}
main > section:first-of-type .hero__sub{margin-top:0;margin-bottom:22px;}
main > section:first-of-type .hero__letter{white-space:pre;}
@media(min-width:1650px){main > section:first-of-type :is(.hero__copy,.pt-hero__copy,.ag-hero__copy,.ci-hero__copy,.or-hero__copy,.cn-hero__copy){padding:68px 60px;} main > section:first-of-type :is(.hero__tagline,.ag-hero__tagline,.ci-hero__tagline,.or-hero__tagline,.cn-hero__tagline){font-size:40px!important;} main > section:first-of-type :is(.hero__body,.ag-hero__body,.ci-hero__body,.or-hero__body,.cn-hero__body){font-size:26px!important;}}
@media(max-width:800px){main > section:first-of-type :is(.hero__copy,.pt-hero__copy,.ag-hero__copy,.ci-hero__copy,.or-hero__copy,.cn-hero__copy){padding:32px 24px;} main > section:first-of-type :is(.hero__title,.ag-hero__title,.ci-hero__title,.or-hero__title,.cn-hero__title){min-height:2.1em;} main > section:first-of-type :is(.hero__tagline,.ag-hero__tagline,.ci-hero__tagline,.or-hero__tagline,.cn-hero__tagline){font-size:25px!important;} main > section:first-of-type :is(.hero__body,.ag-hero__body,.ci-hero__body,.or-hero__body,.cn-hero__body){font-size:18px!important;} }

/* 2026-10-20: stable service hero crop and simplified home introduction. */
@media (min-width:901px){
  .pt-hero > .pt-hero__image {height:max(360px,35.04vw);min-height:0;align-self:start;}
}
main > section:first-of-type:has(.hero__title[aria-label="Velaharra"]) .hero__sub {display:none;}

/* 2026-10-20: slightly more compact desktop navigation. */
@media(min-width:901px){.site-nav{gap:max(18px,2.5vw)}.site-nav a{letter-spacing:.14em}}

/* 2026-10-20: header wordmark matches approved hero typeface. */
.site-header .wordmark__name{font-family:"Plus Jakarta Sans",Arial,sans-serif;font-weight:500;}

/* 2026-10-20: uppercase hero H1 titles throughout the site. */
main > section:first-of-type h1:is(.hero__title,.ag-hero__title,.ci-hero__title,.or-hero__title,.cn-hero__title){text-transform:uppercase!important;}

/* 2026-10-20: balanced header brand lockup, proportional at all sizes. */
.site-header .wordmark__name{font-size:1.18em;letter-spacing:.06em;white-space:nowrap;}
.site-header .wordmark__tag{font-size:0.333823em;white-space:nowrap;}

/* 2026-10-20: compact single-line home hero cities. */
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities{flex-wrap:nowrap;justify-content:flex-start;text-align:left;width:100%;max-width:100%;font-size:clamp(10px,.68vw,14px);letter-spacing:.1em;gap:.55em;white-space:nowrap;overflow-x:auto;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities::before{display:none;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:not(.sep){flex-shrink:0;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(11)::after{content:" /";}

/* 2026-10-20: home tagline tracks the width of the hero brand name. */
main > .hero:has(.hero__title[aria-label="Velaharra"]) .hero__tagline{font-size:clamp(12.1996px,2.396355vw,40.9559px)!important;white-space:nowrap;}

/* 2026-10-20: registered marks requested for homepage hero branding. */
main > .hero:has(.hero__title[aria-label="Velaharra"]) :is(.hero__title,.hero__tagline){position:relative;width:max-content;max-width:100%;}
main > .hero:has(.hero__title[aria-label="Velaharra"]) :is(.hero__title,.hero__tagline)::after{content:"\00ae";position:absolute;left:calc(100% + 4px);top:.12em;font-family:Arial,sans-serif;font-size:clamp(7px,.14em,13px);font-weight:400;line-height:1;letter-spacing:0;}
main > .hero:has(.hero__title[aria-label="Velaharra"]) .hero__tagline::after{font-size:clamp(6px,.22em,9px);top:.08em;}

/* 2026-10-20: remove hero registered marks; slightly larger cities, Manchester second. */
main > .hero:has(.hero__title[aria-label="Velaharra"]) :is(.hero__title,.hero__tagline)::after{content:none;display:none;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities{font-size:clamp(11px,.74vw,15px);}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(3){order:2;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(5){order:3;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(11){order:4;}

/* 2026-10-20: Guadalajara immediately before Lisbon. */
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(11){order:7;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(9){order:6;}
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:nth-child(7){order:5;}

/* Shared city bullet presentation — 2026-10-20 */
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:not(.sep)::after { content:" •"; }
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities > span:not(.sep):last-child::after { content:none; }

/* 2026-10-20: section headings match the Velaharra wordmark and hero font. */
main :is(h2,h3,h4,h5,h6), .site-footer__title { font-family:"Plus Jakarta Sans",Arial,sans-serif !important; font-weight:500 !important; }
main :is(h2,h3,h4,h5,h6) :is(a,span), .site-footer__title span { font-family:inherit !important; }

/* Compact service headings and allow long closing headings to wrap. */
main .pillar__title { font-size:clamp(18px,1.55vw,32px); letter-spacing:.02em; }
main .pt-closing__title, main .pt-closing__title span { white-space:normal; max-width:100%; }

/* 2026-10-20: balance the homepage statement with hero paragraph sizing. */
main .statement__title { font-size:calc(var(--fs-quote) * .9); }
main .statement__aside p { font-size:21px; line-height:1.5; }
@media(min-width:1650px) { main .statement__aside p { font-size:26px; } }
@media(max-width:800px) { main .statement__aside p { font-size:18px; } }

/* 2026-10-20: consistent feature headings and body paragraphs site-wide. */
:root { --vh-feature-size:calc(var(--fs-quote) * .9); --vh-body-size:21px; }
@media(min-width:1650px) { :root { --vh-body-size:26px; } }
@media(max-width:800px) { :root { --vh-body-size:18px; } }
main :is(.statement__title,.join__title,.build__title,.ci-austin__title,.cn-reach__title,.cn-rel__title), main > section:not(:first-of-type) .ag-hero__title { font-size:var(--vh-feature-size)!important; line-height:1.05; white-space:normal; }
main :is(.hero__body,.ag-hero__body,.ci-hero__body,.or-hero__body,.cn-hero__body,.pillar__body,.join__body,.build__body,.cities__sub,.ag-sel__body,.pt-head__body,.pt-sector__body,.pt-way__body,.pt-outcomes__body,.ci-local__body,.ci-city__body,.ci-what__body,.ci-austin__body,.cn-reach__body), main :is(.statement__aside,.pt-closing__aside,.cn-rel__aside) p { font-size:var(--vh-body-size)!important; line-height:1.5!important; }

/* Extra breathing room below the homepage hero buttons. */
.hero:has(.hero__title[aria-label="Velaharra"]) .hero__cities { margin-top:calc(max(24px,1.84vw) + 16px); }

/* Bring service pillar descriptions closer to their headings. */
main .pillars .pillar__body { margin-top:.8em; }

/* Slightly quieter Who We Work With heading. */
main .build__title { font-size:calc(var(--vh-feature-size) * .85)!important; }

/* City band: show the city list without the introductory description. */
.cities > .cities__sub { display:none; }
.cities > .cities__list { margin-top:0; }

/* Compact the homepage service section vertically. */
main > .pillars { padding-top:clamp(32px,2.8vw,56px); padding-bottom:clamp(28px,1.8vw,36px); }

/* Agency disciplines: breathing room between rows */
.ag-who .ag-who__row + .ag-who__row { margin-top: clamp(28px, 2vw, 40px); }

/* Agency statement: separate the two paragraphs */
.ag-statement .statement__aside p + p { margin-top: 1em; }

/* Align Agency heading with paragraph text, excluding decorative rule */
.ag-statement .statement__aside { position: relative; }
.ag-statement .statement__aside::before { position: absolute; bottom: 100%; left: 0; margin-bottom: 2.4em; }

/* Extra breathing room below Agency disciplines */
main .ag-who { padding-bottom: clamp(68px, 4.8vw, 100px); }

/* Founder section matches approved homepage heading family */
main > .ag-hero:not(:first-of-type) :is(.ag-hero__title,.ag-hero__tagline) { font-family: "Plus Jakarta Sans", sans-serif !important; font-weight: 500 !important; }

/* Native Agency services: exact homepage layout, retained in Agency editor */
main .ag-what { border-top:0; padding:clamp(32px,2.8vw,56px) var(--edge) clamp(28px,1.8vw,36px); }
main .ag-what > .ag-label { display:none; }
main .ag-what__grid { margin-top:0; }
main .ag-what__grid .pillar { padding-left:max(12px,2.2vw); padding-right:max(12px,2.2vw); }
main .ag-what__grid .pillar__body { max-width:22em; margin-top:.8em; }
@media (max-width:1180px) and (min-width:901px) { main .ag-what__grid { display:grid; grid-template-columns:repeat(2,1fr); row-gap:28px; } }
@media (max-width:900px) { main .ag-what__grid { display:grid; grid-template-columns:1fr; gap:40px; } main .ag-what__grid .pillar { padding-top:36px; } main .ag-what__grid .pillar:first-child { padding-top:0; } }

/* Compact leadership subtitle */
main > .ag-hero:not(:first-of-type) .ag-hero__tagline { font-size:clamp(18px,1.45vw,28px) !important; line-height:1.35; margin-top:16px; }

/* Leadership: circular portrait centered beside biography */
main > .ag-hero.hero--left:not(:first-of-type) { grid-template-columns:minmax(240px,.8fr) minmax(0,1.4fr) !important; align-items:center; gap:clamp(36px,5vw,96px); padding:clamp(48px,5vw,96px) var(--edge); min-height:0; }
main > .ag-hero.hero--left:not(:first-of-type) .ag-hero__copy { grid-column:2; grid-row:1; padding:0 !important; min-width:0; }
main > .ag-hero.hero--left:not(:first-of-type) .hero__image { grid-column:1; grid-row:1; width:min(100%,440px); height:auto !important; min-height:0; aspect-ratio:1; border-radius:50%; overflow:hidden; align-self:center; justify-self:center; margin:0; transition:transform .3s ease,box-shadow .3s ease; }
main > .ag-hero.hero--left:not(:first-of-type) .hero__image img { position:absolute; inset:0; width:100%; height:100% !important; object-fit:cover; object-position:center; transform:none !important; }
@media(hover:hover) { main > .ag-hero.hero--left:not(:first-of-type) .hero__image:hover { transform:scale(1.045); box-shadow:0 18px 40px rgba(0,0,0,.16); } }
@media(max-width:900px) { main > .ag-hero.hero--left:not(:first-of-type) { grid-template-columns:1fr !important; } main > .ag-hero.hero--left:not(:first-of-type) .hero__image { grid-column:1; grid-row:1; width:min(72vw,340px); } main > .ag-hero.hero--left:not(:first-of-type) .ag-hero__copy { grid-column:1; grid-row:2; } }
@media(prefers-reduced-motion:reduce) { main > .ag-hero.hero--left:not(:first-of-type) .hero__image { transition:none; } main > .ag-hero.hero--left:not(:first-of-type) .hero__image:hover { transform:none; } }

/* Approved Philosophy collaboration image — 2026-10-20 */
#our-philosophy, #our-philosophy .join__copy, #our-philosophy .join__image{background:#fff;}
#our-philosophy .join__image img{filter:grayscale(1);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 25%);mask-image:linear-gradient(to right,transparent 0%,#000 25%);}
@media(max-width:800px){#our-philosophy .join__image img{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%);mask-image:linear-gradient(to bottom,transparent 0%,#000 18%);}}

/* Will Loconto — right-side Leadership portrait, 2026-10-21 */
main > .ag-hero:has(img[src="assets/WillLoconto-300x300.png"]){grid-template-columns:minmax(0,1.4fr) minmax(240px,.8fr)!important;align-items:center;gap:clamp(36px,5vw,96px);padding:clamp(48px,5vw,96px) var(--edge);min-height:0;}
main > .ag-hero:has(img[src="assets/WillLoconto-300x300.png"]) .ag-hero__copy{grid-column:1;grid-row:1;padding:0!important;min-width:0;}
main > .ag-hero:has(img[src="assets/WillLoconto-300x300.png"]) .hero__image{grid-column:2;grid-row:1;width:min(100%,440px);height:auto!important;min-height:0;aspect-ratio:1;border-radius:50%;overflow:hidden;align-self:center;justify-self:center;margin:0;transition:transform .3s ease,box-shadow .3s ease;}
main > .ag-hero:has(img[src="assets/WillLoconto-300x300.png"]) .hero__image img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;object-position:center;transform:none!important;}
main > .ag-hero:has(img[src="assets/WillLoconto-300x300.png"]) .ag-hero__title{font-size:clamp(32px,2.4vw,48px)!important;}
@media(hover:hover){main > .ag-hero:has(img[src="assets/WillLoconto-300x300.png"]) .hero__image:hover{transform:scale(1.045);box-shadow:0 18px 40px rgba(0,0,0,.16);}}
@media(max-width:900px){main > .ag-hero:has(img[src="assets/WillLoconto-300x300.png"]){grid-template-columns:1fr!important;}main > .ag-hero:has(img[src="assets/WillLoconto-300x300.png"]) .hero__image{grid-column:1;grid-row:1;width:min(72vw,340px);}main > .ag-hero:has(img[src="assets/WillLoconto-300x300.png"]) .ag-hero__copy{grid-column:1;grid-row:2;}}
@media(prefers-reduced-motion:reduce){main > .ag-hero:has(img[src="assets/WillLoconto-300x300.png"]) .hero__image{transition:none;}main > .ag-hero:has(img[src="assets/WillLoconto-300x300.png"]) .hero__image:hover{transform:none;}}

/* Approved Advisory service icons — 2026-10-21 */
body:has(.hero__title[aria-label="Advisory"]) #sectors .pt-sector:nth-child(1) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2210%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2210%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2238%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2238%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m11%2013%209%207m8%200%209-7M11%2035l9-7m8%200%209%207%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Advisory"]) #sectors .pt-sector:nth-child(2) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M4%2024s7-13%2020-13%2020%2013%2020%2013-7%2013-20%2013S4%2024%204%2024Z%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%226%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Advisory"]) #sectors .pt-sector:nth-child(3) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Crect%20x%3D%227%22%20y%3D%2210%22%20width%3D%2234%22%20height%3D%2231%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M15%206v9M33%206v9M7%2020h34M16%2027h4M28%2027h4M16%2034h4M28%2034h4%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Advisory"]) #sectors .pt-sector:nth-child(4) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22m24%205%2019%2019-19%2019L5%2024ZM24%2015l9%209-9%209-9-9Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Advisory"]) #sectors .pt-sector:nth-child(5) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M24%2042V23M24%2028C10%2030%206%2021%207%2013c12-1%2018%206%2017%2015ZM24%2022C23%2011%2032%206%2041%207c1%209-6%2017-17%2015ZM15%2043h18%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Advisory"]) #sectors .pt-sector:nth-child(6) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M9%2016a17%2017%200%200%201%2029-4l4%205M42%208v9h-9M39%2032a17%2017%200%200%201-29%204l-4-5M6%2040v-9h9%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2220%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M17%2031a7%207%200%200%201%2014%200%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Advisory"]) #sectors .pt-sector__icon svg{display:none;}

/* Advisory: aligned descriptions and no card arrows — 2026-10-21 */
body:has(.hero__title[aria-label="Advisory"]) #sectors .pt-sector__link{display:none;}
@media(min-width:901px){body:has(.hero__title[aria-label="Advisory"]) #sectors .pt-sector__title{min-height:3lh;}body:has(.hero__title[aria-label="Advisory"]) #sectors .pt-sector__body{margin-top:8px;}}

/* Shared service description alignment and no bottom arrows */
body:has(.hero__title:is([aria-label="Representation"],[aria-label="Partnerships"],[aria-label="Cultural Platform"])) #sectors .pt-sector__link{display:none;}
@media(min-width:901px){body:has(.hero__title:is([aria-label="Representation"],[aria-label="Partnerships"],[aria-label="Cultural Platform"])) #sectors .pt-sector__title{min-height:3lh;}body:has(.hero__title:is([aria-label="Representation"],[aria-label="Partnerships"],[aria-label="Cultural Platform"])) #sectors .pt-sector__body{margin-top:8px;}}

/* Approved Representation discipline icons — 2026-10-21 */
body:has(.hero__title[aria-label="Representation"]) #sectors .pt-sector:nth-child(1) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%2234%22%20height%3D%2234%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m9%2035%2011-11%207%207%206-6%207%2010%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Representation"]) #sectors .pt-sector:nth-child(2) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22m24%205-13%2023%2013%2012%2013-12ZM24%205v17M11%2028h9m8%200h9M15%2044h18%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2226%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Representation"]) #sectors .pt-sector:nth-child(3) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Crect%20x%3D%226%22%20y%3D%2218%22%20width%3D%2226%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2211%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2211%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22m32%2024%2010-5v18l-10-5M18%2038v6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Representation"]) #sectors .pt-sector:nth-child(4) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M5%2021v6M11%2015v18M18%207v34M25%2013v22M32%2018v12M39%2010v28M45%2021v6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Representation"]) #sectors .pt-sector:nth-child(5) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M6%2017V6h11M31%206h11v11M42%2031v11H31M17%2042H6V31%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M24%2011v4M24%2033v4M11%2024h4M33%2024h4%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Representation"]) #sectors .pt-sector:nth-child(6) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2235%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2235%22%20cy%3D%2235%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22m16%2030%2022-25-9%2023M31%2030%209%205l9%2023M18%2027l6-7%206%207%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Representation"]) #sectors .pt-sector:nth-child(7) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2213%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M5%207v12m4-12v12M5%2015h4M7%2019v23M44%207c-6%205-6%2015%200%2015V7v35%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Representation"]) #sectors .pt-sector:nth-child(8) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M24%2012C17%207%2010%207%205%209v30c6-2%2013-2%2019%203%206-5%2013-5%2019-3V9c-5-2-12-2-19%203ZM24%2012v30M10%2016l9%202M10%2023l9%202M29%2018l9-2M29%2025l9-2%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Representation"]) #sectors .pt-sector:nth-child(9) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M9%208%2024%204l15%204v16c0%2010-15%2020-15%2020S9%2034%209%2024ZM17%2024h14M24%2015v18M17%2017l14%2014M31%2017%2017%2031%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Representation"]) #sectors .pt-sector:nth-child(10) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M19%205v9M29%205v9M19%2034v9M29%2034v9M5%2019h9M5%2029h9M34%2019h9M34%2029h9m-10-9%202%204%204%202-4%202-2%204-2-4-4-2%204-2Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Representation"]) #sectors .pt-sector__icon svg{display:none;}

/* Approved Partnerships icons — 2026-10-21 */
body:has(.hero__title[aria-label="Partnerships"]) #sectors .pt-sector:nth-child(1) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Crect%20x%3D%225%22%20y%3D%2210%22%20width%3D%2223%22%20height%3D%2228%22%20rx%3D%223%22%2F%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%2224%22%20r%3D%2213%22%2F%3E%3Cpath%20d%3D%22M13%2018h7M13%2025h7M13%2032h4%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Partnerships"]) #sectors .pt-sector:nth-child(2) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22m5%2015%2019-10%2019%2010ZM8%2019v18M18%2019v18M30%2019v18M40%2019v18M5%2038h38M3%2043h42%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Partnerships"]) #sectors .pt-sector:nth-child(3) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Crect%20x%3D%228%22%20y%3D%225%22%20width%3D%2232%22%20height%3D%2238%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M14%2012h5v5h-5ZM29%2012h5v5h-5ZM14%2023h5v5h-5ZM29%2023h5v5h-5ZM20%2043V33h8v10%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Partnerships"]) #sectors .pt-sector:nth-child(4) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M6%2012h36v9a4%204%200%200%200%200%208v9H6v-9a4%204%200%200%200%200-8ZM33%2012v5m0%204v5m0%204v7m-14-20%202%205%205%201-4%204%201%205-4-3-5%203%201-5-4-4%205-1Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Partnerships"]) #sectors .pt-sector:nth-child(5) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M24%2044S9%2030%209%2018a15%2015%200%200%201%2030%200c0%2012-15%2026-15%2026Z%22%2F%3E%3Cpath%20d%3D%22M17%2025V13h14v12ZM22%2025v-7h4v7%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Partnerships"]) #sectors .pt-sector:nth-child(6) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M6%2017v25h30V30M6%2017h15M13%2035l8-10%208%2010ZM33%204l3%208%208%203-8%203-3%208-3-8-8-3%208-3Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Partnerships"]) #sectors .pt-sector__icon svg{display:none;}

/* Approved Cultural Platform icons — 2026-10-21 */
body:has(.hero__title[aria-label="Cultural Platform"]) #sectors .pt-sector:nth-child(1) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2232%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2232%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M17%2020v-2a7%207%200%200%201%2014%200v2M3%2044v-2a7%207%200%200%201%2014%200v2M31%2044v-2a7%207%200%200%201%2014%200v2M8%2023a17%2017%200%200%201%207-11M33%2012a17%2017%200%200%201%207%2011M20%2040h8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Cultural Platform"]) #sectors .pt-sector:nth-child(2) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2214%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2235%22%20cy%3D%2214%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M4%2037v-5a9%209%200%200%201%2018%200v5M26%2037v-5a9%209%200%200%201%2018%200v5M20%2013h8m-3-3%203%203-3%203%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Cultural Platform"]) #sectors .pt-sector:nth-child(3) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M16%2030c0-4-6-6-6-14a14%2014%200%200%201%2028%200c0%208-6%2010-6%2014v4H16zM18%2039h12m-9%205h6M24%2027V16m-5%203%205%205%205-5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Cultural Platform"]) #sectors .pt-sector:nth-child(4) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Crect%20x%3D%2213%22%20y%3D%2215%22%20width%3D%2222%22%20height%3D%2218%22%20rx%3D%223%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%226%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2242%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2224%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2243%22%20cy%3D%2224%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M20%2023h8m-8%204h5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Cultural Platform"]) #sectors .pt-sector:nth-child(5) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M7%207h34v19H7zM20%2012l10%205-10%205z%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2234%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2234%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2234%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M4%2044v-2a6%206%200%200%201%2012%200v2m2%200v-2a6%206%200%200%201%2012%200v2m2%200v-2a6%206%200%200%201%2012%200v2%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Cultural Platform"]) #sectors .pt-sector:nth-child(6) .pt-sector__icon{display:inline-block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2256%22%20height%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M5%2042h38M8%2042V31h10V21h10V11h12v31M7%2021%2022%206M15%206h7v7%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
body:has(.hero__title[aria-label="Cultural Platform"]) #sectors .pt-sector__icon svg{display:none;}

/* Subtle service heading line spacing — 2026-10-21 */
body:has(.hero__title:is([aria-label="Advisory"],[aria-label="Representation"],[aria-label="Partnerships"],[aria-label="Cultural Platform"])) #sectors .pt-sector__title{line-height:1.12!important;}
@media(min-width:901px){body:has(.hero__title:is([aria-label="Advisory"],[aria-label="Representation"],[aria-label="Partnerships"],[aria-label="Cultural Platform"])) #sectors .pt-sector__title{min-height:3.36em;}}

/* Gentle process heading breathing room — 2026-10-21 */
body:has(.hero__title:is([aria-label="Advisory"],[aria-label="Representation"],[aria-label="Partnerships"],[aria-label="Cultural Platform"])) .pt-way__title{line-height:1.25!important;}

/* Center paired section titles and introductions — 2026-10-21 */
body:has(.hero__title:is([aria-label="Advisory"],[aria-label="Representation"],[aria-label="Partnerships"],[aria-label="Cultural Platform"])) .pt-head{align-items:center;}

/* Consistent section headings on Home, Agency and Connect — 2026-10-21 */
body:has(main > section:first-of-type :is(.hero__title[aria-label="Velaharra"],.ag-hero__title,.cn-hero__title)) main :is(.statement__title,.join__title,.build__title,.ag-sel__title,.cn-reach__title,.cn-rel__title),main > section:not(:first-of-type) .ag-hero__title{font-size:clamp(32px,2.4vw,48px)!important;line-height:1.15!important;}

/* Keep page hero headings on one line within their text column */
main > section:first-of-type :is(.hero__copy,.pt-hero__copy,.ag-hero__copy,.ci-hero__copy,.or-hero__copy,.cn-hero__copy){container-type:inline-size;min-width:0;}
main > section:first-of-type h1:is(.hero__title,.ag-hero__title,.ci-hero__title,.or-hero__title,.cn-hero__title){font-size:min(94px,5.5vw,9.5cqw)!important;white-space:nowrap!important;min-height:1.05em!important;max-width:100%;}
main > section:first-of-type h1 br{display:none;}
main > .ag-hero:not(:first-of-type) .ag-hero__title{font-size:clamp(32px,2.4vw,48px)!important;line-height:1.15!important;}

/* Phone-first hero layout and touch controls — 2026-10-21 */
@media(max-width:600px){
main > section:first-of-type:is(.hero,.pt-hero,.ci-hero,.cn-hero,.or-hero){display:flex!important;flex-direction:column!important;min-height:0!important;height:auto!important;}
main > section:first-of-type :is(.hero__copy,.pt-hero__copy,.ag-hero__copy,.ci-hero__copy,.or-hero__copy,.cn-hero__copy){width:100%!important;max-width:none!important;box-sizing:border-box;order:0!important;padding:32px 24px!important;}
main > section:first-of-type :is(.hero__image,.pt-hero__image,.ag-hero__image,.ci-hero__image,.or-hero__image,.cn-hero__image){width:100%!important;max-width:100%!important;margin:0!important;left:auto!important;right:auto!important;order:1!important;height:280px!important;min-height:0!important;}
main > section:first-of-type h1:is(.hero__title,.ag-hero__title,.ci-hero__title,.or-hero__title,.cn-hero__title){font-size:min(42px,9.5cqw)!important;white-space:nowrap!important;}
main > section:first-of-type :is(.hero__tagline,.ag-hero__tagline,.ci-hero__tagline,.cn-hero__tagline,.or-hero__tagline){white-space:normal!important;max-width:100%!important;}
main > section:first-of-type .hero__cities{display:flex!important;flex-wrap:wrap!important;white-space:normal!important;gap:8px 10px!important;width:100%!important;font-size:11px!important;letter-spacing:.06em!important;}
main > section:first-of-type .hero__cities span{white-space:nowrap;}
.menu-toggle{min-width:44px;min-height:44px;}
main :is(input,select,textarea){font-size:16px!important;max-width:100%;box-sizing:border-box;}
main :is(button,.btn-arrow){min-height:44px;max-width:100%;box-sizing:border-box;}
}

@media(max-width:900px){.menu__brand .wordmark__name,.menu__nav a{font-family:"Plus Jakarta Sans",Arial,sans-serif!important;}main > section:first-of-type .hero__cities{display:flex!important;flex-wrap:wrap!important;white-space:normal!important;gap:8px 10px!important;max-width:100%!important;font-size:11px!important;}main > section:first-of-type .hero__cities span{white-space:nowrap;}}
@media(max-width:600px){main .btn-arrow__label,main button[type="submit"]{font-size:12px!important;} .menu__nav a{font-size:clamp(24px,7vw,34px);min-height:48px;display:flex;align-items:center;}.menu{overflow-y:auto;}}

@media(max-width:600px){main > section:first-of-type :is(.hero__image,.pt-hero__image,.ag-hero__image,.ci-hero__image,.or-hero__image,.cn-hero__image) img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 35%!important;transform:none!important;}}

@media(min-width:901px) and (max-width:1200px){main > section:first-of-type .hero__cities{display:flex!important;flex-wrap:wrap!important;white-space:normal!important;gap:8px 10px!important;max-width:100%!important;}main > section:first-of-type .hero__cities span{white-space:nowrap;}}

/* 2026-10-21: rounded public actions, stable layout and accessible feedback. */
body .btn, body .btn-arrow{border-radius:999px;min-height:44px;overflow:hidden;isolation:isolate;transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,translate .22s ease;}
body .btn-arrow::before{border-radius:inherit;}
body .btn-arrow__icon{flex:0 0 1.9em;width:1.9em;}
body .btn-arrow:hover .btn-arrow__icon,body .btn-arrow:focus-visible .btn-arrow__icon{width:1.9em;transform:translateX(3px);}
body .btn:focus-visible,body .btn-arrow:focus-visible{outline:2px solid currentColor;outline-offset:4px;}
@media(hover:hover){body .btn:hover,body .btn-arrow:hover{translate:0 -2px;box-shadow:0 5px 14px #00000012;}}
body .btn:active,body .btn-arrow:active{translate:0 0;box-shadow:none;}
@media(prefers-reduced-motion:reduce){body .btn,body .btn-arrow,body .btn-arrow::before,body .btn-arrow__icon{transition:none!important;translate:none!important;}body .btn-arrow:hover .btn-arrow__icon{transform:none;}}

/* 2026-10-21: stable main hero frames; remove scroll-sensitive divider. */
main > section:first-of-type:is(.hero,.pt-hero,.ci-hero,.cn-hero,.or-hero){border-bottom:0!important;}
@media(min-width:1001px){main > section:first-of-type:is(.hero,.pt-hero,.ci-hero,.cn-hero,.or-hero){min-height:clamp(560px,36.5vw,680px)!important;}}

/* 2026-10-22: directional photographic edge fades. Geometry remains unchanged. */
body:not(:has(.hero__title[aria-label="Velaharra"])) main :is(.hero__image:not(.hero-crop--center .hero__image),.pt-hero__image,.ag-hero__image,.ci-hero__image,.cn-hero__image,.or-hero__image,.hero-image,.join__image,.pt-closing__image,.ci-austin__image) > img{--vh-photo-direction:to right;-webkit-mask-image:linear-gradient(var(--vh-photo-direction),transparent 0%,#000 18%,#000 96%,transparent 100%)!important;mask-image:linear-gradient(var(--vh-photo-direction),transparent 0%,#000 18%,#000 96%,transparent 100%)!important;}
body:not(:has(.hero__title[aria-label="Velaharra"])) main .hero--left img{--vh-photo-direction:to left;}
body:not(:has(.hero__title[aria-label="Velaharra"])) main .hero__video,body:not(:has(.hero__title[aria-label="Velaharra"])) main .hover-video{-webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 96%,transparent)!important;mask-image:linear-gradient(to right,transparent,#000 18%,#000 96%,transparent)!important;}
body:not(:has(.hero__title[aria-label="Velaharra"])) main .hero--left video{-webkit-mask-image:linear-gradient(to left,transparent,#000 18%,#000 96%,transparent)!important;mask-image:linear-gradient(to left,transparent,#000 18%,#000 96%,transparent)!important;}
@media(max-width:900px){body:not(:has(.hero__title[aria-label="Velaharra"])) main :is(.hero__image:not(.hero-crop--center .hero__image),.pt-hero__image,.ag-hero__image,.ci-hero__image,.cn-hero__image,.or-hero__image,.hero-image,.join__image,.pt-closing__image,.ci-austin__image) > img{-webkit-mask-image:linear-gradient(var(--vh-photo-direction),transparent 0%,#000 12%,#000 97%,transparent 100%)!important;mask-image:linear-gradient(var(--vh-photo-direction),transparent 0%,#000 12%,#000 97%,transparent 100%)!important;}body:not(:has(.hero__title[aria-label="Velaharra"])) main .hero__video,body:not(:has(.hero__title[aria-label="Velaharra"])) main .hover-video{-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 97%,transparent)!important;mask-image:linear-gradient(to right,transparent,#000 12%,#000 97%,transparent)!important;}}