/* Doodle's Design — shared styles for every page */

/* ---------- Onest, self-hosted (SIL Open Font License); one variable file covers 400-500 ---------- */
@font-face {
  font-family: "Onest";
  src: url("fonts/onest-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

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

/* Arial resized to Onest's width and line metrics, shown until Onest loads */
@font-face {
  font-family: "Onest Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 104.6%;
  ascent-override: 92.7%;
  descent-override: 29.2%;
  line-gap-override: 0%
}

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --brand: #F05343;
  --brand-deep: #1E1928;
  --brand-light: #FF8E12;
  --accent-teal: #F9B87D;
  --surface: #f4f4f4;
  --surface-card: #ffffff;
  --ink: #0a0a0a;
  --ink-soft: #666b78;
  --brand-ink: #C93A2B;
  --ghost: #d7dae1;
  --ghost-text: #8f939c;
  --hairline: #e6e8ec;
  --on-brand: #ffffff;
  --solid: #0a0a0a;
  --on-solid: #ffffff;
  --focus: #C25E00;
  --radius-card: 1.5rem;
  --radius-card-lg: 2rem;
  --radius-pill: 62.5rem;
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --quart: cubic-bezier(0.25, 1, 0.5, 1);
  --inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- base size ----------
   16px at every width; site.js scales it up only above 1920px. (The old vw steps shrank
   UI text to 9-11px on tablets and 1100-1600px laptops.) */
html {
  font-size: 100%
}

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

* {
  margin: 0
}

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

body {
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: "Onest", "Onest Fallback", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer
}

ul,
ol {
  list-style: none;
  padding: 0
}

input,
textarea {
  font: inherit;
  color: inherit
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px
}

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 300;
  padding: .875rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--solid);
  color: var(--on-solid);
  font-size: .875rem;
  font-weight: 500;
  transform: translateY(-200%);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s var(--expo), opacity .15s
}

.skip-link:focus {
  transform: none;
  opacity: 1;
  pointer-events: auto
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

/* lenis + scroll lock */
html.lenis,
html.lenis body {
  height: auto
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain
}

.lenis.lenis-stopped {
  overflow: hidden
}

html.locked {
  position: relative;
  overflow: hidden;
  height: 100%
}

main {
  width: 100%;
  overflow-x: clip;
  padding: .5rem
}

@media (min-width:640px) {
  main {
    padding: .75rem
  }
}

/* ---------- reveal primitives ---------- */
.clip {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em
}

.ln {
  display: block;
  overflow: hidden;
  padding-bottom: .14em
}

.rv {
  display: inline-block;
  transform: translate3d(0, var(--ry, 115%), 0);
  opacity: 0;
  will-change: transform, opacity
}

.rv.on {
  transform: none;
  opacity: 1;
  transition: transform var(--d, 950ms) var(--e, var(--expo)) var(--dl, 0ms), opacity var(--d, 950ms) var(--e, var(--expo)) var(--dl, 0ms)
}

/* Below-the-hero content waits until the page scripts have rendered it (site.js adds .dom-ready). */
html.js:not(.dom-ready) main > :not(.hero) {
  visibility: hidden
}

html.js [data-iv] {
  opacity: 0
}

/* ---------- shared ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: inherit
}

.brand svg {
  height: 1.55rem;
  width: auto;
  flex: none;
  display: block
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-soft)
}

.eyebrow::before {
  content: "";
  width: .375rem;
  height: .375rem;
  border-radius: var(--radius-pill);
  background: var(--brand)
}

.eyebrow.light {
  color: rgba(255, 255, 255, .7)
}

.eyebrow.light::before {
  background: var(--brand-light)
}

.h-big {
  font-size: 3rem;
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.025em;
  margin-top: 1rem
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: var(--radius-pill);
  padding: .875rem 1.75rem;
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .025em;
  line-height: 1.25;
  transition: background-color .25s, color .25s, border-color .25s;
  white-space: nowrap
}

.pill svg {
  width: 1rem;
  height: 1rem;
  flex: none
}

.pill-light {
  background: #fff;
  color: var(--brand-deep)
}

.pill-light:hover {
  background: var(--brand-light);
  color: var(--brand-deep)
}

.pill-solid {
  background: var(--solid);
  color: var(--on-solid)
}

.pill-solid:hover {
  background: var(--brand-deep);
  color: #fff
}

.pill-outline {
  border: 1px solid currentColor;
  color: var(--ink)
}

.pill-outline:hover {
  background: var(--solid);
  color: var(--on-solid)
}

.abtn {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid;
  transition: background-color .25s, border-color .25s, color .25s
}

.abtn svg {
  width: 1.25rem;
  height: 1.25rem
}

.abtn-outline {
  border-color: var(--hairline);
  color: var(--ink)
}

.abtn-outline:hover {
  border-color: var(--ink)
}

.abtn-solid {
  background: var(--solid);
  border-color: var(--solid);
  color: var(--on-solid)
}

.abtn-solid:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #fff
}

@media (min-width:640px) {
  .abtn {
    width: 3.5rem;
    height: 3.5rem
  }
}

.dots {
  display: flex;
  align-items: center;
  gap: 0
}

.dot {
  /* 44px hit area around the small visual dot */
  min-width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center
}

.dot i {
  display: block;
  height: .375rem;
  width: .375rem;
  border-radius: var(--radius-pill);
  background: var(--ghost);
  transition: width .45s var(--expo), background-color .3s
}

.dot[aria-current="true"] i {
  width: 1.25rem;
  background: var(--ink)
}

.dots.light .dot i {
  background: rgba(255, 255, 255, .4)
}

.dots.light .dot[aria-current="true"] i {
  background: #fff
}

.glass {
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .1);
  padding: .75rem;
  border-radius: var(--radius-card);
  box-shadow: 0 1.25rem 1.5rem -.3rem rgba(30, 25, 40, .2), 0 .5rem .6rem -.4rem rgba(30, 25, 40, .2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px)
}

.cap {
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .75rem;
  z-index: 2;
  border-radius: .75rem;
  color: #fff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px)
}

.xbtn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  flex: none;
  transition: background-color .25s
}

.xbtn svg {
  width: 1.125rem;
  height: 1.125rem
}

/* ---------- header ---------- */
.hdr {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 1.5rem 1.5rem 0;
  font-size: .75rem;
  color: #fff
}

.hdr-nav {
  display: none;
  flex: 1;
  gap: 2rem
}

.hdr-nav a {
  opacity: .9;
  transition: opacity .2s
}

.hdr-nav a:hover {
  opacity: 1
}

.hdr-brand {
  flex: 1;
  display: flex
}

.hdr-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem
}

.hdr-book,
.hdr-connect {
  display: none;
  align-items: center;
  min-height: 2.75rem;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .025em;
  text-underline-offset: .25em
}

.hdr-connect {
  display: inline-flex
}

.hdr-book:hover,
.hdr-connect:hover {
  text-decoration: underline
}

.burger {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-content: center;
  gap: 5px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color .25s
}

.burger:hover {
  background: rgba(255, 255, 255, .25)
}

.burger span {
  display: block;
  width: 1rem;
  height: 1px;
  background: #fff
}

@media (min-width:640px) {
  .hdr {
    padding: 2rem 2.5rem 0
  }

  .hdr-right {
    gap: 1.25rem
  }

  .hdr-book {
    display: inline-flex
  }
}

@media (min-width:1024px) {
  .hdr-nav {
    display: flex
  }

  .hdr-brand {
    justify-content: center
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--brand-deep);
  color: #fff;
  border-radius: var(--radius-card-lg);
  height: calc(100svh - 1rem);
  min-height: 36rem
}

@media (min-width:640px) {
  .hero {
    height: calc(100svh - 1.5rem)
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -10;
  overflow: hidden
}

.hero-plate {
  position: absolute;
  left: 0;
  right: 0;
  top: -16%;
  height: 132%;
  width: 100%;
  will-change: transform
}

.hero-plate img,
.hero-plate video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Light touch: the brand loop is already dark, so only shade behind the headline and the bottom row. */
  background: linear-gradient(to bottom, rgba(30, 25, 40, .45), rgba(30, 25, 40, 0) 38%, rgba(30, 25, 40, 0) 62%, rgba(30, 25, 40, .6));
  pointer-events: none
}

/* Portrait screens: the tagline and cards sit over the phones, so shade the lower half more. */
@media (max-aspect-ratio:1/1) {
  .hero-bg::after {
    background: linear-gradient(to bottom, rgba(30, 25, 40, .45), rgba(30, 25, 40, 0) 30%, rgba(30, 25, 40, 0) 48%, rgba(30, 25, 40, .72) 70%, rgba(30, 25, 40, .88))
  }
}

.hero-title-wrap {
  padding: 1rem 1.5rem 0
}

.hero-title {
  font-size: clamp(2.4rem, 5.5vw, 5.4rem);
  font-weight: 500;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.02em
}

/* Fitted titles (site.js sets the font size): line breaks come from the markup,
   and on phones each word gets its own line so the type can stay large. */
.hero-title[data-fit] {
  white-space: nowrap;
  text-align: center
}

@media (max-width:639px) {
  .hero-title[data-fit] .clip {
    display: block
  }

  .hero-title[data-fit] br {
    display: none
  }
}

.hero-bottom {
  margin-top: auto;
  padding: 0 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.tagline {
  font-size: 2.4rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.025em;
  color: rgba(255, 255, 255, .85)
}

.hero-cluster {
  display: flex;
  align-items: flex-end;
  gap: 1rem
}

@media (min-width:640px) {
  .hero-title-wrap {
    padding-left: 2.5rem;
    padding-right: 2.5rem
  }

  .hero-bottom {
    padding: 0 2.5rem 2.5rem
  }
}

/* Tagline and the card cluster share one row only once there's room for both. */
@media (min-width:1024px) {
  .hero-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end
  }
}

.cslider {
  display: none;
  width: 16rem;
  flex-direction: column;
  gap: .75rem
}

@media (min-width:768px) {
  .cslider {
    display: flex
  }
}

.cstage {
  display: grid
}

.cstage>* {
  grid-area: 1/1
}

.ccard {
  display: flex;
  gap: .75rem;
  align-items: center
}

.ccard img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: .75rem;
  object-fit: cover;
  flex: none
}

.ccard-brand {
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .025em;
  line-height: 1.3
}

.ccard-title {
  font-size: .7rem;
  text-transform: uppercase;
  opacity: .8;
  line-height: 1.3
}

.ccard-cta {
  display: inline-block;
  margin-top: .35rem;
  font-size: .65rem;
  text-decoration: underline;
  text-underline-offset: .2em
}

.member {
  width: 100%;
  max-width: 20rem;
  display: flex;
  gap: .75rem;
  align-items: stretch
}

@media (min-width:640px) {
  .member {
    width: 15rem
  }
}

.member-l {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .5rem
}

.member-val {
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1
}

.avatars {
  display: flex
}

.avatars i {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(30, 25, 40, .4)
}

.avatars i+i {
  margin-left: -.5rem
}

.member-cap {
  font-size: .65rem;
  opacity: .8
}

.member img {
  width: 4rem;
  aspect-ratio: 3/4;
  border-radius: .75rem;
  object-fit: cover;
  flex: none
}

/* ---------- trust ---------- */
.trust {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--background);
  padding: 4rem 1.5rem
}

.trust-eyebrow {
  position: relative;
  z-index: 20;
  margin-bottom: 1.5rem
}

.trust-top {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.pct {
  width: 7rem;
  height: 7rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: none
}

.pct b {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1
}

.pct small {
  font-size: .6rem;
  color: var(--ink-soft);
  max-width: 9em;
  margin-top: .25rem;
  line-height: 1.25
}

.badge {
  max-width: 28rem;
  display: flex;
  gap: 1rem;
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 1.25rem
}

.badge-idx {
  align-self: flex-start;
  border-radius: .75rem;
  background: var(--background);
  padding: .5rem 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4
}

.badge h3 {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3
}

.badge p {
  font-size: .75rem;
  color: var(--ink-soft);
  line-height: 1.625;
  margin-top: .375rem
}

.ghost-h {
  position: relative;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  max-width: 88rem;
  margin: 3rem auto 0;
  font-size: min(7.4vw, 6.9rem);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -.025em
}

.ghost-row {
  display: flex;
  justify-content: space-between
}

.gw {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;
  color: var(--ghost-text);
  will-change: transform
}

.gw.ink {
  color: var(--ink)
}

.coach-pos {
  position: relative;
  z-index: 10;
  width: 13rem;
  margin: 2.5rem auto 0
}

.coach-fig {
  position: relative;
  transform: rotate(6deg);
  aspect-ratio: 3/4;
  border-radius: var(--radius-card);
  background: var(--brand);
  overflow: hidden
}

.coach-fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.coach-fig .cap {
  background: rgba(30, 25, 40, .4);
  padding: .5rem .75rem
}

.cap-name {
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3
}

.cap-role {
  font-size: .65rem;
  opacity: .8
}

.trust-ctl {
  position: relative;
  z-index: 20;
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center
}

@media (min-width:640px) {
  .trust {
    padding: 5rem 2.5rem
  }

  .trust-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start
  }

  .pct {
    width: 8rem;
    height: 8rem
  }

  .badge {
    gap: 1.25rem;
    padding: 1.5rem
  }

  .coach-pos {
    width: 14rem
  }

  .trust-ctl {
    margin-top: 4rem
  }
}

/* From 1024px the portrait floats over the headline; index.html places it between the words. */
@media (min-width:1024px) {
  .coach-pos {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12rem;
    margin: 0;
    transition: left .7s cubic-bezier(.22, 1, .36, 1)
  }

  .ghost-h {
    margin-top: 5rem
  }

  .trust-ctl {
    margin-top: 7rem
  }
}

@media (min-width:1280px) {
  .coach-pos {
    width: 13.5rem
  }
}

@media (prefers-reduced-motion:reduce) {
  .coach-pos {
    transition: none
  }
}

/* ---------- programs ---------- */
.programs {
  background: var(--background);
  padding: 6rem 1.5rem
}

.prog-list {
  margin-top: 3.5rem
}

.prog-list li {
  border-top: 1px solid var(--hairline)
}

.prog-list li:last-child {
  border-bottom: 1px solid var(--hairline)
}

.prog-row {
  display: block;
  transition: background-color .2s
}

.prog-row:focus-visible {
  background: var(--background)
}

.prog-in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem 0
}

.prog-idx {
  width: 2.5rem;
  flex: none;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-soft)
}

.prog-body {
  flex: 1;
  min-width: 0
}

.prog-name {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2
}

.prog-desc {
  font-size: .875rem;
  color: var(--ink-soft);
  margin-top: .25rem
}

.prog-arrow {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline)
}

.prog-arrow svg {
  width: 1.125rem;
  height: 1.125rem;
  opacity: .55
}

@media (min-width:640px) {
  .programs {
    padding-left: 2.5rem;
    padding-right: 2.5rem
  }

  .prog-name {
    font-size: 1.875rem
  }
}

/* ---------- facilities ---------- */
.facilities {
  position: relative;
  background: var(--background);
  border-radius: var(--radius-card-lg);
  margin-top: -2.5rem;
  padding: 4rem 1.5rem 5rem
}

.fac-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 2.5rem
}

.fac-intro {
  max-width: 24rem
}

.fac-icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-card);
  object-fit: cover
}

.fac-title {
  margin-top: 1.5rem
}

.fac-body {
  font-size: .875rem;
  color: var(--ink-soft);
  max-width: 20rem;
  margin-top: 1.5rem;
  line-height: 1.6
}

.fac-cta {
  margin-top: 2rem
}

.courts {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem
}

.court {
  flex: 1;
  min-width: 0
}

.court:nth-child(2) {
  margin-bottom: 2rem
}

/* Phones: one card per row so the captions have room. */
@media (max-width:639.98px) {
  .courts {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem
  }

  .court:nth-child(2) {
    margin-bottom: 0
  }

  .court .court-media {
    aspect-ratio: 4/3
  }
}

.court-media {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  will-change: transform
}

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

.court .cap {
  padding: .75rem 1rem
}

.cap-clay {
  background: rgba(30, 25, 40, .4)
}

.cap-warm {
  background: rgba(240, 83, 67, .55)
}

.court .cap-role {
  opacity: .85;
  margin-top: .125rem;
  line-height: 1.4
}

@media (min-width:640px) {
  .facilities {
    padding-left: 2.5rem;
    padding-right: 2.5rem
  }
}

@media (min-width:768px) {
  .fac-grid {
    grid-template-columns: 1fr 1fr
  }
}

/* ---------- stats ---------- */
.stats {
  background: var(--brand-deep);
  color: #fff;
  border-radius: var(--radius-card-lg);
  margin-top: .75rem;
  padding: 5rem 1.5rem
}

.stats dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
  row-gap: 3rem;
  margin-top: 4rem
}

.stat {
  border-top: 1px solid rgba(255, 255, 255, .2);
  padding-top: 1.25rem
}

.stat-val {
  font-size: 3.75rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1
}

.stat-lbl {
  font-size: .875rem;
  color: rgba(255, 255, 255, .65);
  margin-top: .75rem
}

@media (min-width:640px) {
  .stats {
    padding-left: 2.5rem;
    padding-right: 2.5rem
  }

  .stat-val {
    font-size: 4.5rem
  }
}

@media (min-width:1024px) {
  .stats dl {
    grid-template-columns: repeat(4, 1fr)
  }
}

/* ---------- testimonials ---------- */
.testimonials,
.careers {
  --divider: linear-gradient(var(--hairline), var(--hairline)) top center / calc(100% - 3rem) 1px no-repeat
}

.testimonials {
  background: var(--divider), var(--background);
  padding: 5rem 1.5rem
}

.tgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 3.5rem
}

.tgrid li {
  display: flex
}

.tcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 1.75rem;
  will-change: transform
}

.tquote-mark {
  font-size: 2.25rem;
  color: var(--brand);
  line-height: 1
}

.tcard blockquote {
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--ink);
  margin-top: 1rem
}

.tcard figcaption {
  border-top: 1px solid var(--hairline);
  padding-top: 1rem;
  margin-top: 1.5rem
}

.tname {
  font-weight: 500
}

.trole {
  font-size: .875rem;
  color: var(--ink-soft)
}

@media (min-width:640px) {
  .testimonials {
    padding: 6rem 2.5rem
  }
}

@media (min-width:768px) {
  .tgrid {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* ---------- footer ---------- */
.footer {
  background: var(--brand-deep);
  color: #fff;
  border-radius: var(--radius-card-lg);
  margin-top: .75rem;
  padding: 3.5rem 1.5rem
}

.f-cta {
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  padding-bottom: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem
}

.f-cta-title {
  font-size: 3.75rem;
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.025em;
  margin-top: 1rem
}

.f-cols {
  padding: 3.5rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem
}

.f-brandcol {
  max-width: 20rem
}

.f-brandcol .brand {
  font-size: 1.125rem
}

.f-brandcol .brand svg {
  height: 1.75rem;
  width: auto
}

.f-blurb {
  font-size: .875rem;
  color: rgba(255, 255, 255, .65);
  margin-top: 1rem;
  line-height: 1.6
}

.f-addr {
  font-style: normal;
  margin-top: 1.5rem;
  color: rgba(255, 255, 255, .8);
  font-size: .875rem;
  display: flex;
  flex-direction: column;
  gap: .375rem
}

.f-addr a:hover {
  color: #fff
}

.f-addr span {
  color: rgba(255, 255, 255, .55)
}

.f-nav h3 {
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .5)
}

.f-nav ul {
  margin-top: 1.25rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .8);
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.f-nav a,
.f-bottom a {
  transition: color .2s
}

.f-nav a:hover,
.f-bottom a:hover {
  color: #fff
}

.f-bottom {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 2rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .6);
  display: flex;
  flex-direction: column;
  gap: 1.25rem
}

.f-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem
}

@media (min-width:640px) {
  .footer {
    padding: 4rem 2.5rem
  }

  .f-cta {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end
  }

  .f-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center
  }
}

@media (min-width:768px) {
  .f-cols {
    grid-template-columns: 1.4fr 1fr 1fr 1fr
  }
}

/* ---------- modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: .75rem;
  pointer-events: none
}

.modal.open {
  pointer-events: auto
}

.modal-bd {
  position: absolute;
  inset: 0;
  background: rgba(30, 25, 40, .4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0
}

.modal-panel {
  position: relative;
  width: 100%;
  max-height: 92svh;
  overflow-y: auto;
  border-radius: var(--radius-card-lg);
  background: var(--surface-card);
  padding: 1.5rem;
  color: var(--ink);
  box-shadow: 0 2rem 4rem -1rem rgba(30, 25, 40, .4);
  opacity: 0
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem
}

.modal-title {
  font-size: 2.25rem;
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.025em;
  margin-top: .75rem
}

.modal .xbtn {
  background: var(--surface)
}

.modal .xbtn:hover {
  background: var(--hairline)
}

.mform {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.field {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.field span {
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-soft)
}

.field input,
.field textarea {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid var(--hairline);
  background: var(--background);
  padding: .75rem 1rem;
  font-size: .875rem;
  outline: none;
  resize: vertical;
  transition: border-color .2s, box-shadow .2s
}

.field input:focus,
.field textarea:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 1px var(--focus)
}

.field ::placeholder {
  color: #a3a8b3
}

.mbtn {
  align-self: flex-start;
  border-radius: var(--radius-pill);
  background: var(--solid);
  color: var(--on-solid);
  padding: .875rem 1.75rem;
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .025em;
  transition: background-color .25s, opacity .25s
}

.mbtn:hover {
  background: var(--brand-deep);
  color: #fff
}

.mbtn:disabled {
  opacity: .6;
  cursor: default
}

.msuccess {
  margin-top: 2rem;
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 1.5rem;
  text-align: center
}

.msuccess .check {
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center
}

.msuccess .check svg {
  width: 1.5rem;
  height: 1.5rem
}

.msuccess h3 {
  font-size: 1.125rem;
  font-weight: 500;
  margin-top: 1rem
}

.msuccess p {
  font-size: .875rem;
  color: var(--ink-soft);
  margin-top: .5rem;
  line-height: 1.5
}

.msuccess .mbtn {
  align-self: auto;
  margin-top: 1.25rem
}

[hidden] {
  display: none !important
}

@media (min-width:640px) {
  .modal {
    align-items: center;
    padding: 1.5rem
  }

  .modal-panel {
    max-width: 32rem;
    padding: 2rem
  }

  .modal-title {
    font-size: 3rem
  }
}

/* ---------- menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  pointer-events: none
}

.menu.open {
  pointer-events: auto
}

.menu-bd {
  position: absolute;
  inset: 0;
  background: var(--brand-deep);
  opacity: 0
}

.menu-panel {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: .5rem;
  color: #fff;
  opacity: 0
}

.menu-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem
}

.menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.menu .xbtn {
  background: rgba(255, 255, 255, .15)
}

.menu .xbtn:hover {
  background: rgba(255, 255, 255, .25)
}

.menu-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  padding: 2rem 0
}

.menu-nav a {
  display: block;
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.05;
  transition: color .25s;
  width: max-content
}

.menu-nav a:hover {
  color: var(--brand-light)
}

.menu-bottom {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.menu-social {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .7)
}

.menu-social a {
  transition: color .2s
}

.menu-social a:hover {
  color: #fff
}

@media (min-width:640px) {
  .menu-panel {
    padding: .75rem
  }

  .menu-inner {
    padding: 2rem 2.5rem
  }

  .menu-nav a {
    font-size: 4.5rem
  }

  .menu-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center
  }
}

/* ---------- loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--brand-deep);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  will-change: transform
}

.loader .brand {
  opacity: 0
}

.loader .brand svg {
  height: 2.5rem;
  width: auto;
  display: block
}

.ld-track {
  width: 10rem;
  height: 1px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .2);
  overflow: hidden
}

.ld-fill {
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left
}

.ld-fill.go {
  transform: scaleX(1);
  transition: transform var(--fill-d, 1280ms) var(--inout) 120ms
}

.loader.exit {
  transform: translateY(-105%);
  transition: transform 850ms var(--inout)
}

/* ---------- dark theme ---------- */
:root[data-theme="light"] {
  color-scheme: light
}

:root[data-theme="dark"] {
  --background: #0e0b14;
  --foreground: #f3f1f6;
  --surface: #17131f;
  --surface-card: #17131f;
  --ink: #f3f1f6;
  --ink-soft: #a49fb0;
  --brand-ink: #F05343;
  --ghost: #2a2535;
  --ghost-text: #635e70;
  --hairline: #2a2534;
  --solid: #f3f1f6;
  --on-solid: #0e0b14;
  color-scheme: dark
}

body {
  transition: background-color .3s, color .3s
}

[data-theme="dark"] .hero,
[data-theme="dark"] .stats,
[data-theme="dark"] .footer {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07)
}

/* ---------- ambient glow ---------- */
.glow {
  position: relative;
  isolation: isolate;
  overflow: hidden
}

.glow::before,
.glow::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(3rem)
}

.glow::before {
  width: 34rem;
  height: 34rem;
  top: -14rem;
  right: -8rem;
  background: radial-gradient(circle, rgba(240, 83, 67, .45), transparent 65%)
}

.glow::after {
  width: 28rem;
  height: 28rem;
  bottom: -14rem;
  left: -6rem;
  background: radial-gradient(circle, rgba(255, 142, 18, .3), transparent 65%)
}

/* ---------- generated artwork (stands in for photography) ---------- */
.art {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 10%, var(--a2) 0%, transparent 55%),
    radial-gradient(90% 80% at 10% 100%, var(--a3) 0%, transparent 60%),
    linear-gradient(150deg, var(--a1), var(--a4))
}

.art::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 18%;
  bottom: 30%;
  border-radius: .6rem;
  border: 1px solid rgba(255, 255, 255, .3);
  background:
    linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .85)) 12% 14% / 38% 7% no-repeat,
    linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)) 12% 30% / 64% 5% no-repeat,
    linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)) 12% 42% / 48% 5% no-repeat,
    linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)) 50% 88% / 76% 28% no-repeat,
    rgba(255, 255, 255, .14);
  box-shadow: 0 1rem 2rem -1rem rgba(30, 25, 40, .5)
}

.art::after {
  content: "";
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  right: 6%;
  top: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .15) 60%, transparent 70%);
  opacity: .45
}

.art.mini::before {
  left: 18%;
  right: 18%;
  top: 22%;
  bottom: 22%;
  border-radius: .25rem
}

.art.mini::after,
.art.portrait::before {
  display: none
}

.art-initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 2.5rem;
  font-size: 4.5rem;
  font-weight: 500;
  letter-spacing: -.04em;
  color: rgba(255, 255, 255, .92)
}

.art-1 { --a1: #F05343; --a2: #FF8E12; --a3: #F9B87D; --a4: #7a2a3a }
.art-2 { --a1: #1E1928; --a2: #F05343; --a3: #5b3a6e; --a4: #2d2140 }
.art-3 { --a1: #F9B87D; --a2: #FF8E12; --a3: #F05343; --a4: #b8553a }
.art-4 { --a1: #2d2140; --a2: #FF8E12; --a3: #F05343; --a4: #1E1928 }

.ccard .art {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: .75rem;
  flex: none
}

.member .art {
  width: 4rem;
  aspect-ratio: 3/4;
  border-radius: .75rem;
  flex: none
}

.court-media .art,
.coach-fig .art {
  position: absolute;
  inset: 0
}

/* ---------- header icon buttons ---------- */
.icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  transition: background-color .25s
}

.icon-btn:hover {
  background: rgba(255, 255, 255, .25)
}

.icon-btn svg {
  width: 1.05rem;
  height: 1.05rem
}

.theme-btn .i-sun,
[data-theme="dark"] .theme-btn .i-moon,
.video-btn .i-play,
.video-btn.is-paused .i-pause {
  display: none
}

[data-theme="dark"] .theme-btn .i-sun,
.video-btn.is-paused .i-play {
  display: block
}

@media (max-width:639px) {
  .hdr-right {
    gap: .5rem
  }
}

/* ---------- form selects (contact form, project modal) ---------- */
.field select {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid var(--hairline);
  background-color: var(--background);
  font-family: inherit;
  color: var(--ink);
  padding: .75rem 1rem;
  font-size: .875rem
}

/* ---------- case studies ---------- */
.case-chip {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2;
  border-radius: var(--radius-pill);
  padding: .375rem .75rem;
  font-size: .7rem;
  font-weight: 500;
  background: rgba(255, 255, 255, .92);
  color: var(--brand-deep)
}

.case-tag {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  opacity: .85;
  margin-bottom: .25rem
}

@media (max-width:639px) {
  .court .cap-role {
    display: none
  }
}

/* ---------- testimonials carousel ---------- */
.tcar {
  margin-top: 3rem;
  padding-top: .5rem;
  overflow: hidden
}

.tcar .tgrid {
  display: flex;
  margin-top: 0;
  transition: transform .8s var(--expo);
  will-change: transform
}

.tcar .tgrid li {
  flex: 0 0 100%
}

.tcar-ctl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem
}

@media (min-width:768px) {
  .tcar .tgrid li {
    flex-basis: calc((100% - 2.5rem) / 3)
  }
}

@media (prefers-reduced-motion: reduce) {
  .tcar .tgrid {
    transition: none
  }
}

/* =====================================================================
   Services page
   ===================================================================== */

.hdr-nav a[aria-current="page"],
.menu-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px
}

/* ---------- page hero ---------- */
.page-hero {
  height: auto;
  min-height: min(34rem, 70svh)
}

.hero-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 50% at 82% 18%, rgba(240, 83, 67, .55), transparent 70%),
    radial-gradient(45% 45% at 12% 88%, rgba(255, 142, 18, .32), transparent 70%),
    radial-gradient(35% 35% at 55% 60%, rgba(249, 184, 125, .14), transparent 70%),
    var(--brand-deep)
}

.hero-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent)
}

.page-hero .hero-bg::after {
  background: linear-gradient(to bottom, rgba(30, 25, 40, .15), rgba(30, 25, 40, 0), rgba(30, 25, 40, .45))
}

.page-hero-title {
  padding-top: 3.5rem
}

.page-hero-title .eyebrow {
  margin-bottom: 1.25rem
}

.page-hero-body {
  margin-top: auto;
  padding: 3rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem
}

.page-hero-lead {
  max-width: 32rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .8)
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .85)
}

.scroll-cue i {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .3);
  transition: background-color .25s, border-color .25s
}

.scroll-cue:hover i {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .6)
}

.scroll-cue svg {
  width: 1.125rem;
  height: 1.125rem;
  animation: cue-bob 1.8s var(--inout) infinite
}

@keyframes cue-bob {
  50% {
    transform: translateY(.25rem)
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg {
    animation: none
  }
}

@media (min-width:640px) {
  .page-hero {
    min-height: min(36rem, 72svh)
  }

  .page-hero-title {
    padding-top: 5rem
  }

  .page-hero-body {
    padding: 3rem 2.5rem 2.5rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end
  }
}

@media (min-width:1024px) {
  .hero-home .hero-title-wrap {
    padding-top: 2.5rem
  }
}

/* ---------- page-specific hero visual (desktop only) ---------- */
/* From 1280px there is room to the right of even the widest title ("Design. Build. Scale."). */
.hero-visual {
  display: none
}

@media (min-width:1280px) {
  .hero-visual {
    position: absolute;
    z-index: 1;
    right: 2.5rem;
    top: 6.5rem;
    bottom: 7.5rem;
    width: min(24rem, 28vw);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
  }

  .page-hero-title,
  .page-hero-body {
    position: relative;
    z-index: 2
  }
}

.hv-glass {
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(10, 6, 16, .6);
  color: #fff
}

.hv-k {
  display: block;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7)
}

.hv-fan {
  position: relative;
  width: 100%;
  height: 17rem
}

.hv-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .375rem
}

.hv-card b {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3
}

.hv-card small {
  font-size: .8125rem;
  color: rgba(255, 255, 255, .72)
}

/* Cascade: each card steps down and right so every label stays readable. */
.hv-fan .hv-glass {
  background: rgba(36, 28, 48, .78)
}

.hv-card:nth-child(1) {
  transform: translate(-50%, -50%) translate(-2.75rem, var(--step, -5.25rem)) rotate(-3deg)
}

.hv-card:nth-child(2) {
  transform: translate(-50%, -50%) rotate(1.5deg)
}

.hv-card:nth-child(3) {
  transform: translate(-50%, -50%) translate(2.75rem, calc(var(--step, -5.25rem) * -1)) rotate(-1.5deg)
}

/* Work: three project tiles */
.hv-fan-art .hv-card {
  width: 12rem;
  aspect-ratio: 4/3;
  padding: 0;
  justify-content: flex-end;
  border-radius: var(--radius-card);
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(10, 6, 16, .7)
}

.hv-tag {
  position: relative;
  z-index: 1;
  margin: .625rem;
  padding: .375rem .625rem;
  border-radius: var(--radius-pill);
  background: rgba(30, 25, 40, .55);
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  align-self: flex-start
}

/* Work: tiles step up and right, so each tile's caption (bottom left) stays visible */
.hv-fan-art .hv-card:nth-child(1) {
  transform: translate(-50%, -50%) translate(-4.5rem, 3.5rem) rotate(-4deg)
}

.hv-fan-art .hv-card:nth-child(3) {
  transform: translate(-50%, -50%) translate(4.5rem, -3.5rem) rotate(3deg)
}

/* Blog: post titles (two lines each, so a taller step) */
.hv-fan:has(.hv-post) {
  --step: -6.25rem;
  height: 20rem
}

.hv-post {
  width: 16rem
}

.hv-post b {
  font-size: 1rem
}

/* Industries: sector chips */
.hv-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .625rem;
  max-width: 22rem;
  list-style: none;
  padding: 0;
  margin: 0
}

.hv-chips li {
  padding: .625rem 1.125rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: .9375rem
}

.hv-chips li:nth-child(odd) {
  transform: translateY(-.375rem)
}

.hv-chips li:nth-child(3n) {
  background: rgba(240, 83, 67, .35);
  border-color: rgba(240, 83, 67, .5)
}

/* About: team avatars */
.hv-team,
.hv-note {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transform: rotate(-2deg)
}

.hv-team b,
.hv-note b {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.25
}

.hv-team small,
.hv-note small {
  font-size: .875rem;
  color: rgba(255, 255, 255, .72)
}

.hv-avatars {
  display: flex;
  margin-bottom: .75rem
}

.hv-avatars span {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  display: grid;
  place-items: center;
  font-size: .9375rem;
  font-weight: 500;
  color: #fff
}

.hv-avatars span::before,
.hv-avatars span::after {
  display: none
}

.hv-avatars span+span {
  margin-left: -.75rem
}

/* Contact: email note */
.hv-note small {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem
}

.hv-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 .25rem rgba(74, 222, 128, .2)
}

/* ---------- intro: everything we do ---------- */
.svc-intro {
  background: var(--background);
  padding: 5rem 1.5rem
}

.intro-head {
  display: grid;
  gap: 1.5rem
}

.intro-lead {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 30rem
}

.proof {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.5rem
}

.proof li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: .625rem 1.125rem;
  font-size: .875rem;
  color: var(--ink-soft)
}

.proof li::before {
  content: "";
  width: .375rem;
  height: .375rem;
  border-radius: var(--radius-pill);
  background: var(--brand)
}

.proof b {
  font-weight: 500;
  color: var(--ink)
}

.disc-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem
}

.disc-grid li {
  display: flex
}

.disc {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: .75rem;
  will-change: transform
}

.disc .art {
  aspect-ratio: 4/3;
  border-radius: 1rem
}

.disc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.125rem .5rem .5rem
}

.disc-top {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.disc-idx {
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-soft)
}

.disc .prog-arrow {
  width: 2.25rem;
  height: 2.25rem;
  transition: background-color .25s, border-color .25s, color .25s
}

.disc .prog-arrow svg {
  opacity: 1
}

.disc:hover .prog-arrow {
  background: var(--solid);
  border-color: var(--solid);
  color: var(--on-solid)
}

.disc-name {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin-top: .5rem
}

.disc-desc {
  font-size: .875rem;
  color: var(--ink-soft);
  line-height: 1.55
}

@media (min-width:640px) {
  .svc-intro {
    padding: 6rem 2.5rem
  }

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

@media (min-width:1024px) {
  .intro-head {
    grid-template-columns: 1fr 1fr;
    align-items: end
  }

  .disc-grid {
    grid-template-columns: repeat(4, 1fr)
  }
}

/* ---------- service catalogue ---------- */
.catalogue {
  background: var(--surface);
  border-radius: var(--radius-card-lg);
  padding: 5rem 1.5rem
}

.cat-group {
  display: grid;
  gap: 2rem;
  padding: 3rem 0;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 1rem
}

.cat-group:first-of-type {
  margin-top: 3.5rem
}

.cat-num {
  display: block;
  font-size: 4.5rem;
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--brand)
}

.cat-name {
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin-top: 1.25rem
}

.cat-desc {
  font-size: .875rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: 1rem;
  max-width: 26rem
}

.cat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem
}

.cat-meta div {
  border-radius: .75rem;
  background: var(--background);
  padding: .75rem 1rem;
  min-width: 8.5rem
}

.cat-meta dt {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-soft)
}

.cat-meta dd {
  font-size: 1.125rem;
  font-weight: 500;
  margin-top: .25rem
}

.cat-cta {
  margin-top: 1.75rem
}

.cat-list {
  display: grid;
  column-gap: 2rem;
  align-content: start
}

.cat-list li {
  display: flex;
  align-items: baseline;
  gap: .875rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -.01em
}

.cat-list li span {
  width: 1.25rem;
  flex: none;
  font-size: .75rem;
  color: var(--ink-soft)
}

.cat-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem
}

.cat-tile {
  aspect-ratio: 4/3;
  border-radius: 1rem;
  overflow: hidden
}

.cat-tile .art {
  width: 100%;
  height: 100%
}

@media (min-width:640px) {
  .catalogue {
    padding: 6rem 2.5rem
  }

  .cat-list {
    grid-template-columns: 1fr 1fr
  }

  .cat-tiles {
    gap: 1.25rem
  }

  .cat-tile {
    border-radius: var(--radius-card)
  }
}

@media (min-width:1024px) {
  .cat-group {
    grid-template-columns: 1fr 1.5fr;
    column-gap: 4rem;
    row-gap: 3rem;
    padding: 4rem 0
  }

  .cat-tiles {
    grid-column: 1 / -1
  }

  .cat-name {
    font-size: 3rem
  }
}

/* ---------- FAQ ---------- */
.faq {
  background: var(--background);
  padding: 5rem 1.5rem
}

.faq-grid {
  display: grid;
  gap: 2.5rem
}

.faq-lead {
  font-size: .875rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 22rem;
  margin: 1.25rem 0 1.75rem
}

.faq-list {
  border-top: 1px solid var(--hairline)
}

.faq-item {
  border-bottom: 1px solid var(--hairline)
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.3
}

.faq-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  transition: transform .5s var(--expo), background-color .25s, border-color .25s, color .25s
}

.faq-icon svg {
  width: 1.125rem;
  height: 1.125rem
}

.faq-q:hover .faq-icon {
  border-color: var(--ink)
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--solid);
  border-color: var(--solid);
  color: var(--on-solid)
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--expo)
}

.faq-item.open .faq-a {
  grid-template-rows: 1fr
}

.faq-a>div {
  overflow: hidden
}

.faq-a p {
  padding-bottom: 1.5rem;
  font-size: .9375rem;
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 40rem
}

@media (min-width:640px) {
  .faq {
    padding: 6rem 2.5rem
  }

  .faq-a p {
    padding-right: 4rem
  }
}

@media (min-width:1024px) {
  .faq-grid {
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: start
  }

  .faq-aside {
    position: sticky;
    top: 2rem
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-a,
  .faq-icon {
    transition: none
  }
}

/* ---------- mid-page CTA ---------- */
.cta-band {
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-card-lg);
  padding: 5rem 1.5rem
}

.cta-band .h-big {
  font-size: 2.5rem
}

.cta-lead {
  font-size: .9375rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 28rem;
  margin: 1.25rem auto 0
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 2rem
}

@media (min-width:640px) {
  .cta-band {
    padding: 6rem 2.5rem
  }

  .cta-band .h-big {
    font-size: 3.75rem
  }
}

/* stats band directly after the catalogue */
.catalogue+.stats {
  margin-top: .75rem
}

.cta-band+.footer {
  margin-top: .75rem
}

/* =====================================================================
   Work page
   ===================================================================== */

.works {
  background: var(--background);
  padding: 5rem 1.5rem
}

/* ---------- filter chips ---------- */
.work-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 3rem
}

.work-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: .25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: .625rem 1.125rem;
  font-size: .875rem;
  font-weight: 500;
  transition: background-color .25s, border-color .25s, color .25s
}

.work-chip sup {
  font-size: .6rem;
  line-height: 1;
  color: var(--ink-soft);
  transition: color .25s
}

.work-chip:hover {
  border-color: var(--ink)
}

.work-chip[aria-pressed="true"] {
  background: var(--solid);
  border-color: var(--solid);
  color: var(--on-solid)
}

.work-chip[aria-pressed="true"] sup {
  color: inherit;
  opacity: .7
}

/* ---------- project grid ---------- */
.work-grid {
  display: grid;
  gap: 2.5rem 1.25rem;
  margin-top: 2.5rem
}

.work-item {
  display: flex
}

.work-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform, opacity
}

.work-media {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface)
}

.work-media .art {
  position: absolute;
  inset: 0
}

.work-body {
  padding: 1.25rem .25rem 0
}

.work-meta {
  color: var(--ink-soft);
  opacity: 1
}

.work-name {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.15
}

.work-desc {
  font-size: .875rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: .5rem;
  max-width: 34rem
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: 1rem
}

.work-tags li {
  border-radius: var(--radius-pill);
  background: var(--surface);
  padding: .3rem .7rem;
  font-size: .7rem;
  color: var(--ink-soft)
}

@media (min-width:640px) {
  .works {
    padding: 6rem 2.5rem
  }

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

  .work-item.is-feature {
    grid-column: span 2
  }

  .is-feature .work-media {
    aspect-ratio: 16/9
  }

  .is-feature .work-name {
    font-size: 2rem
  }
}

@media (min-width:1024px) {
  .work-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  /* Feature card takes a 2×2 block; its image stretches to match the two cards beside it. */
  .work-item.is-feature {
    grid-row: span 2
  }

  .is-feature .work-media {
    flex: 1;
    aspect-ratio: auto;
    min-height: 24rem
  }
}

.stats+.cta-band {
  margin-top: .75rem
}

/* =====================================================================
   Industries page
   ===================================================================== */

.ind-intro {
  background: var(--background);
  padding: 5rem 1.5rem 4rem
}

/* ---------- industry marquee ---------- */
.ind-marquee {
  margin: 3.5rem -1.5rem 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)
}

.ind-track {
  display: flex;
  width: max-content;
  animation: ind-scroll 48s linear infinite
}

.ind-marquee:hover .ind-track,
.ind-marquee:focus-within .ind-track {
  animation-play-state: paused
}

.ind-row {
  display: flex;
  gap: 1.25rem;
  padding-right: 1.25rem
}

.ind-tile {
  display: block;
  width: 16rem;
  flex: none
}

.ind-tile-media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-card);
  overflow: hidden
}

.ind-tile-media .art {
  width: 100%;
  height: 100%
}

.ind-tile-name {
  display: block;
  margin-top: .875rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.02em
}

.ind-tile:hover .ind-tile-name {
  color: var(--brand-ink)
}

@keyframes ind-scroll {
  to {
    transform: translate3d(-50%, 0, 0)
  }
}

/* No auto-scroll for reduced motion: the row becomes a swipeable strip instead. */
@media (prefers-reduced-motion: reduce) {
  .ind-marquee {
    overflow-x: auto
  }

  .ind-track {
    animation: none
  }

  .ind-row[aria-hidden="true"] {
    display: none
  }
}

/* ---------- industry blocks ---------- */
.sectors {
  background: var(--brand-deep);
  color: #fff;
  border-radius: var(--radius-card-lg);
  padding: 5rem 1.5rem
}

.sector {
  display: grid;
  gap: 2rem;
  padding: 3rem 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  scroll-margin-top: 1rem
}

.sector:first-child {
  margin-top: 3.5rem
}

.sector-num {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--brand-light)
}

.sector-name {
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin-top: .75rem
}

.sector-desc {
  font-size: .9375rem;
  color: rgba(255, 255, 255, .72);
  line-height: 1.6;
  margin-top: 1rem;
  max-width: 32rem
}

.sector-cols {
  display: grid;
  gap: 1.75rem;
  margin-top: 2rem
}

.sector-label {
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .55)
}

.sector-builds li {
  padding: .625rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 1rem
}

.sector-clients {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem
}

.sector-clients li {
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-pill);
  padding: .45rem .9rem;
  font-size: .8125rem
}

.sector-builds {
  margin-top: .5rem
}

.sector-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem
}

.sector-actions .pill {
  white-space: normal
}

.sector-talk {
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .025em;
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
  color: rgba(255, 255, 255, .85)
}

.sector-talk:hover {
  color: #fff
}

.sector-media {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-card);
  overflow: hidden;
  will-change: transform
}

.sector-media .art {
  position: absolute;
  inset: 0
}

.sector-media .cap {
  padding: .75rem 1rem;
  font-size: .8125rem
}

@media (min-width:640px) {
  .ind-intro {
    padding: 6rem 2.5rem 5rem
  }

  .ind-marquee {
    margin-left: -2.5rem;
    margin-right: -2.5rem
  }

  .ind-tile {
    width: 20rem
  }

  .sectors {
    padding: 6rem 2.5rem
  }

  .sector-builds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem
  }
}

@media (min-width:1024px) {
  .sector {
    grid-template-columns: 1.2fr 1fr;
    column-gap: 4rem;
    align-items: center;
    padding: 4rem 0
  }

  /* Alternate image side down the page. */
  .sector:nth-child(even) .sector-media {
    order: -1
  }

  .sector-media {
    max-height: 26rem
  }

  .sector-name {
    font-size: 3rem
  }
}

.ind-intro+.sectors,
.sectors+.cta-band {
  margin-top: .75rem
}

/* =====================================================================
   Blog + article pages
   ===================================================================== */

.blog-sec {
  background: var(--background);
  border-radius: var(--radius-card-lg);
  padding: 5rem 1.5rem
}

.blog-sec--surface {
  background: var(--surface)
}

.blog-sec+.blog-sec,
.blog-sec+.cta-band,
.article+.blog-sec {
  margin-top: .75rem
}

.blog-head {
  margin-bottom: 2.5rem
}

/* ---------- post cards ---------- */
.post-grid {
  display: grid;
  gap: 2.5rem 1.25rem
}

.post-card {
  display: flex;
  flex-direction: column
}

.post-media {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: var(--radius-card);
  overflow: hidden
}

.post-media .art {
  position: absolute;
  inset: 0
}

.post-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem .25rem 0
}

.post-title {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2
}

.post-title a:hover,
.post-row-title a:hover {
  color: var(--brand-ink)
}

.post-meta {
  font-size: .8125rem;
  color: var(--ink-soft);
  margin-top: .625rem
}

.post-read {
  align-self: flex-start;
  margin-top: 1.25rem;
  font-size: .8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px
}

.post-read:hover {
  color: var(--brand-ink)
}

.post-card--lg .post-media {
  aspect-ratio: 16/10
}

.post-card--lg .post-title {
  font-size: 2rem;
  line-height: 1.1
}

/* compact rows */
.post-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hairline)
}

.post-row:first-child {
  padding-top: 0
}

.post-row-media {
  width: 5.5rem;
  flex: none;
  aspect-ratio: 1;
  border-radius: 1rem;
  overflow: hidden
}

.post-row-media .art {
  width: 100%;
  height: 100%
}

.post-row-title {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.3
}

.post-row .post-meta {
  margin-top: .375rem
}

/* ---------- must read + subscribe ---------- */
.must-grid {
  display: grid;
  gap: 3rem
}

.subscribe {
  align-self: start;
  background: var(--brand-deep);
  color: #fff;
  border-radius: var(--radius-card-lg);
  padding: 2.5rem 1.75rem;
  scroll-margin-top: 1rem
}

.subscribe-title {
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1;
  margin-top: 1.25rem
}

.subscribe-lead {
  font-size: .9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  margin-top: 1rem
}

.nl-form {
  margin-top: 1.75rem
}

.nl-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  padding: .375rem .375rem .375rem 1.25rem;
  transition: border-color .25s
}

.nl-field:focus-within {
  border-color: rgba(255, 255, 255, .6)
}

.nl-field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: inherit;
  font: inherit;
  font-size: .9375rem;
  padding: .5rem 0
}

.nl-field input::placeholder {
  color: rgba(255, 255, 255, .5)
}

.nl-field button {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--brand-deep);
  transition: background-color .25s
}

.nl-field button:hover {
  background: var(--accent-teal)
}

.nl-field button svg {
  width: 1.125rem;
  height: 1.125rem
}

.nl-msg {
  min-height: 1.25rem;
  margin-top: .75rem;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .8)
}

/* ---------- featured ---------- */
.featured-grid {
  display: grid;
  gap: 2.5rem
}

.featured-main {
  display: grid;
  gap: 2.5rem 1.25rem
}

.more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 3rem
}

@media (min-width:640px) {
  .blog-sec {
    padding: 6rem 2.5rem
  }

  .post-grid,
  .featured-main {
    grid-template-columns: repeat(2, 1fr)
  }

  .subscribe {
    padding: 3rem 2.5rem
  }
}

@media (min-width:1024px) {
  .post-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .must-grid {
    grid-template-columns: 1.6fr 1fr;
    gap: 4rem;
    align-items: end
  }

  .subscribe {
    position: sticky;
    top: 2rem
  }

  .featured-grid {
    grid-template-columns: 2fr 1fr;
    gap: 3rem
  }

  .post-card--lg .post-title {
    font-size: 2.5rem
  }
}

/* ---------- article page ---------- */
.article-hero {
  min-height: 34rem
}

.article-head {
  margin-top: auto;
  padding: 4rem 1.5rem 2.5rem;
  max-width: 60rem
}

.article-back {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .75)
}

.article-back:hover {
  color: #fff
}

.article-title {
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-top: 1.25rem
}

.article-meta {
  margin-top: 1.5rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .72)
}

.article-meta a {
  text-decoration: underline;
  text-underline-offset: .25em
}

.article {
  background: var(--background);
  padding: 3rem 1.5rem 5rem
}

.article-cover {
  aspect-ratio: 16/9;
  border-radius: var(--radius-card-lg);
  max-width: 64rem;
  margin: 0 auto
}

.prose {
  max-width: 42rem;
  margin: 3.5rem auto 0;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink)
}

.prose>*+* {
  margin-top: 1.25rem
}

.prose .lead {
  font-size: 1.375rem;
  line-height: 1.5;
  letter-spacing: -.01em
}

.prose h2 {
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-top: 2.75rem
}

.prose p {
  color: color-mix(in srgb, var(--ink) 82%, transparent)
}

.prose .lead {
  color: var(--ink)
}

.prose ul {
  display: grid;
  gap: .625rem
}

.prose li {
  position: relative;
  padding-left: 1.5rem;
  color: color-mix(in srgb, var(--ink) 82%, transparent)
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: .5rem;
  height: .5rem;
  border-radius: var(--radius-pill);
  background: var(--brand)
}

.article-nl {
  display: grid;
  gap: 1.5rem;
  max-width: 42rem;
  margin: 4rem auto 0;
  padding: 2rem 1.75rem;
  border-radius: var(--radius-card);
  background: var(--brand-deep);
  color: #fff
}

.article-nl-title {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2
}

.article-nl-lead {
  font-size: .875rem;
  color: rgba(255, 255, 255, .7);
  margin-top: .5rem
}

.article-nl .nl-form {
  margin-top: 0
}

@media (min-width:640px) {
  .article-head {
    padding: 5rem 2.5rem 3rem
  }

  .article-title {
    font-size: 3.75rem
  }

  .article {
    padding: 4rem 2.5rem 6rem
  }

  .article-nl {
    padding: 2.5rem
  }
}

@media (min-width:1024px) {
  .article-title {
    font-size: 4.5rem
  }
}

/* =====================================================================
   Contact page
   ===================================================================== */

.enquiry {
  background: var(--background);
  padding: 5rem 1.5rem;
  scroll-margin-top: 1rem
}

.enquiry-grid {
  display: grid;
  gap: 3rem
}

.enquiry-lead {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 28rem;
  margin-top: 1.25rem
}

/* ---------- direct contact ---------- */
.direct {
  margin-top: 2.5rem;
  border-top: 1px solid var(--hairline)
}

.direct li {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hairline)
}

.direct-label {
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-soft)
}

.direct-val {
  align-self: flex-start;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -.02em;
  text-align: left
}

a.direct-val:hover,
button.direct-val:hover {
  color: var(--brand-ink)
}

.enquiry .proof {
  margin-top: 2rem
}

/* ---------- enquiry form ---------- */
.cform-card {
  align-self: start;
  border-radius: var(--radius-card-lg);
  background: var(--surface);
  padding: 1.5rem
}

.cform {
  display: flex;
  flex-direction: column;
  gap: 1.25rem
}

.cform-row {
  display: grid;
  gap: 1.25rem
}

.cform .field input,
.cform .field textarea,
.cform .field select {
  background-color: var(--background)
}

.field-err {
  font-style: normal;
  font-size: .8125rem;
  color: var(--brand-ink)
}

.field-err:empty {
  display: none
}

.field [aria-invalid="true"] {
  border-color: var(--brand)
}

.cform-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: .5rem
}

.cform-note {
  font-size: .875rem;
  color: var(--ink-soft)
}

.cform-note button {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .25em
}

.cform-note button:hover {
  color: var(--brand-ink)
}

.cform-card .msuccess {
  padding: 2rem .5rem
}

.cform-card .msuccess:focus {
  outline: none
}

/* ---------- steps ---------- */
.steps {
  background: var(--brand-deep);
  color: #fff;
  border-radius: var(--radius-card-lg);
  padding: 5rem 1.5rem
}

.steps-list {
  display: grid;
  gap: 2.5rem 2rem;
  margin-top: 4rem
}

.steps-list li {
  border-top: 1px solid rgba(255, 255, 255, .2);
  padding-top: 1.5rem
}

.step-num {
  display: block;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--brand-light)
}

.steps-list h3 {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -.02em;
  margin-top: 1.25rem
}

.steps-list p {
  font-size: .9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
  margin-top: .625rem
}

.enquiry+.steps {
  margin-top: .75rem
}

@media (min-width:640px) {
  .enquiry {
    padding: 6rem 2.5rem
  }

  .cform-card {
    padding: 2.5rem
  }

  .cform-row {
    grid-template-columns: 1fr 1fr
  }

  .steps {
    padding: 6rem 2.5rem
  }

  .steps-list {
    grid-template-columns: repeat(2, 1fr)
  }

  .contact-quotes {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (min-width:1024px) {
  .enquiry-grid {
    grid-template-columns: 1fr 1.3fr;
    gap: 4rem
  }

  .enquiry-aside {
    position: sticky;
    top: 2rem;
    align-self: start
  }

  .steps-list {
    grid-template-columns: repeat(4, 1fr)
  }

  .contact-quotes {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* =====================================================================
   Home hero in light theme: the light video loop is cream, so the hero
   switches to dark ink and a soft cream wash instead of the dark tint.
   ===================================================================== */

:root[data-theme="light"] .hero-home {
  background: #F7F1EA;
  color: var(--brand-deep)
}

:root[data-theme="light"] .hero-home .hero-bg::after {
  background: linear-gradient(to bottom, rgba(250, 246, 241, .55), rgba(250, 246, 241, 0) 38%, rgba(250, 246, 241, 0) 62%, rgba(250, 246, 241, .7))
}

@media (max-aspect-ratio:1/1) {
  :root[data-theme="light"] .hero-home .hero-bg::after {
    background: linear-gradient(to bottom, rgba(250, 246, 241, .55), rgba(250, 246, 241, 0) 30%, rgba(250, 246, 241, 0) 48%, rgba(250, 246, 241, .78) 70%, rgba(250, 246, 241, .92))
  }
}

:root[data-theme="light"] .hero-home .hdr {
  color: var(--brand-deep);
  /* Light logo: dark wordmark with the coral "D" mark (see logo-light.svg). */
  --logo-mark: #E7634C
}

:root[data-theme="light"] .hero-home .tagline {
  color: rgba(30, 25, 40, .85)
}

:root[data-theme="light"] .hero-home .icon-btn,
:root[data-theme="light"] .hero-home .burger {
  background: rgba(30, 25, 40, .08);
  color: var(--brand-deep)
}

:root[data-theme="light"] .hero-home .icon-btn:hover,
:root[data-theme="light"] .hero-home .burger:hover {
  background: rgba(30, 25, 40, .15)
}

:root[data-theme="light"] .hero-home .burger span {
  background: var(--brand-deep)
}

:root[data-theme="light"] .hero-home .glass {
  border-color: rgba(30, 25, 40, .08);
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 1.25rem 1.5rem -.3rem rgba(30, 25, 40, .08), 0 .5rem .6rem -.4rem rgba(30, 25, 40, .08)
}

:root[data-theme="light"] .hero-home .dots.light .dot i {
  background: rgba(30, 25, 40, .25)
}

:root[data-theme="light"] .hero-home .dots.light .dot[aria-current="true"] i {
  background: var(--brand-deep)
}

/* =====================================================================
   Home hero on portrait screens: the vertical loop is sized and placed
   so its phones sit between the headline and the tagline. index.html
   measures that gap and sets --stage-w / --stage-top; the hero takes the
   video's own background colour so the faded edges disappear.
   ===================================================================== */

@media (max-aspect-ratio:1/1) {
  .hero-home {
    background: #15101D
  }

  :root[data-theme="light"] .hero-home {
    background: #F8F3EE
  }

  /* No scroll parallax here: the video is placed precisely, so it must not drift. */
  .hero-home .hero-plate {
    top: 0;
    height: 100%;
    transform: none !important
  }

  .hero-home .hero-plate video {
    position: absolute;
    left: 50%;
    top: var(--stage-top, 0);
    width: var(--stage-w, 100%);
    height: auto;
    aspect-ratio: 9/16;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 90%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 90%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-composite: intersect
  }

  /* The phones now sit above the tagline, so only shade the very top and bottom. */
  .hero-home .hero-bg::after,
  :root[data-theme="light"] .hero-home .hero-bg::after {
    background: none
  }
}

/* =====================================================================
   Home page sections: section CTAs, Impact, Industries, Process, Insights
   ===================================================================== */

.sec-cta-wrap {
  margin-top: 2.5rem
}

/* sector label inside a case caption links to its industry */
.case-sector {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em
}

.case-sector:hover {
  text-decoration-thickness: 2px
}

/* ---------- impact (bento of stats) ---------- */
.impact {
  background: var(--surface);
  border-radius: var(--radius-card-lg);
  margin-top: .75rem;
  padding: 5rem 1.5rem
}

[data-theme="dark"] .impact {
  background: var(--background);
  box-shadow: inset 0 0 0 1px var(--hairline)
}

.impact-title {
  max-width: 26ch;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance
}

.impact-muted {
  color: var(--ink-soft)
}

.impact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  margin-top: 3rem
}

.impact-card {
  display: flex;
  flex-direction: column;
  min-height: 12rem;
  padding: 2rem;
  border-radius: 1.25rem;
  background: var(--surface-card)
}

[data-theme="dark"] .impact-card {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline)
}

.impact-idx {
  font-size: .8125rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums
}

.impact-stat {
  margin-top: auto;
  padding-top: 2rem
}

.impact-val {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums
}

.impact-word {
  font-size: .5em;
  letter-spacing: -.02em;
  color: var(--ink-soft)
}

.impact-cap {
  max-width: 22ch;
  margin-top: .75rem;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--ink-soft)
}

@media (min-width:640px) {
  .impact {
    padding: 6rem 2.5rem
  }

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

  .impact-card:last-child {
    grid-column: 1 / -1
  }
}

@media (min-width:1024px) {
  .impact-grid {
    grid-template-columns: repeat(6, 1fr)
  }

  .impact-card {
    grid-column: span 2;
    min-height: 18rem
  }

  .impact-card:nth-child(n+4),
  .impact-card:last-child {
    grid-column: span 3
  }
}

/* ---------- industries (home tiles) ---------- */
.markets {
  background: var(--background);
  padding: 5rem 1.5rem
}

.market-grid {
  display: grid;
  gap: 1rem;
  margin-top: 3rem
}

.market-grid li {
  display: flex
}

.market {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.5rem;
  border-radius: var(--radius-card);
  background: var(--surface);
  will-change: transform
}

.market-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2.5rem
}

.market-art {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem
}

.market .prog-arrow {
  transition: background-color .25s, border-color .25s, color .25s
}

.market:hover .prog-arrow,
.market:focus-visible .prog-arrow {
  background: var(--solid);
  border-color: var(--solid);
  color: var(--on-solid)
}

.market:hover .prog-arrow svg,
.market:focus-visible .prog-arrow svg {
  opacity: 1
}

.market-name {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.15
}

.market-desc {
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-soft)
}

.market-proof {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--brand-ink)
}

@media (min-width:640px) {
  .markets {
    padding: 6rem 2.5rem
  }

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

@media (min-width:1024px) {
  .market-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* ---------- process (reuses the .steps band from contact.html) ---------- */
.step-time {
  display: inline-block;
  margin-top: 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .2);
  padding: .3rem .75rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .8)
}

.markets+.steps {
  margin-top: .75rem
}

/* ---------- insights (blog teaser) ---------- */
.insights {
  background: var(--surface);
  border-radius: var(--radius-card-lg);
  margin-top: .75rem;
  padding: 5rem 1.5rem
}

.insights-grid {
  display: grid;
  gap: 2.5rem;
  margin-top: 3rem
}

.insights-side {
  display: grid;
  gap: 2.5rem 1.25rem
}

@media (min-width:640px) {
  .insights {
    padding: 6rem 2.5rem
  }

  .insights-side {
    grid-template-columns: 1fr 1fr
  }
}

@media (min-width:1024px) {
  .insights-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem
  }

  .insights-side {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .insights-side .post-media {
    aspect-ratio: 16/9
  }

  .insights-side .post-title {
    font-size: 1.125rem
  }
}

/* =====================================================================
   About page
   ===================================================================== */

/* ---------- expertise + tools ---------- */
.craft {
  background: var(--background);
  padding: 5rem 1.5rem
}

.craft-table {
  margin-top: 3.5rem;
  border-top: 1px solid var(--hairline)
}

.craft-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: .375rem 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--hairline)
}

.craft-row--head {
  display: none
}

.craft-num {
  grid-row: 1 / span 3;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--brand-ink);
  padding-top: .3rem;
  font-variant-numeric: tabular-nums
}

.craft-name {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2
}

.craft-covers {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-soft)
}

.craft-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .5rem
}

.craft-tools li {
  border-radius: var(--radius-pill);
  background: var(--surface);
  padding: .3rem .75rem;
  font-size: .8125rem
}

.craft-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 3rem
}

.craft-stats div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: .5rem;
  border-top: 1px solid var(--ink);
  padding-top: 1rem
}

.craft-stats dd {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums
}

.craft-stats dt {
  font-size: .8125rem;
  color: var(--ink-soft)
}

@media (min-width:900px) {
  .craft-row {
    grid-template-columns: 3rem 1fr 1.6fr 1.2fr;
    align-items: baseline;
    gap: 2rem;
    padding: 1.75rem 0
  }

  .craft-row--head {
    display: grid;
    padding: 1rem 0;
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ink-soft)
  }

  .craft-num {
    grid-row: auto;
    padding-top: 0
  }

  .craft-tools {
    margin-top: 0
  }

  .craft-stats {
    gap: 2.5rem
  }
}

/* ---------- our strategy ---------- */
.strategy {
  background: var(--surface);
  border-radius: var(--radius-card-lg);
  padding: 5rem 1.5rem
}

[data-theme="dark"] .strategy {
  box-shadow: inset 0 0 0 1px var(--hairline)
}

.strategy-grid {
  display: grid;
  gap: 2.5rem 1.25rem;
  margin-top: 3rem
}

.strategy-media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-card);
  overflow: hidden
}

.strategy-media .art {
  width: 100%;
  height: 100%
}

.strategy-num {
  display: block;
  margin-top: 1.5rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--brand-ink)
}

.strategy-name {
  margin-top: .5rem;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2
}

.strategy-desc {
  margin-top: .625rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34rem
}

/* ---------- trusted by high-growth teams (results accordion) ---------- */
.trusted {
  background: var(--brand-deep);
  color: #fff;
  border-radius: var(--radius-card-lg);
  margin-top: .75rem;
  padding: 5rem 1.5rem
}

[data-theme="dark"] .trusted {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07)
}

.trusted-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem
}

.trusted-list {
  margin-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, .14)
}

.result {
  border-bottom: 1px solid rgba(255, 255, 255, .14)
}

.result-q {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem 1.5rem;
  padding: 1.25rem 0;
  text-align: left;
  color: inherit
}

.result-client {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -.01em
}

.result-client .art {
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: .5rem
}

.result-what {
  grid-column: 1;
  font-size: .875rem;
  color: rgba(255, 255, 255, .7)
}

.result .faq-icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  border-color: rgba(255, 255, 255, .25)
}

.result-q:hover .faq-icon {
  border-color: #fff
}

.result.open .faq-icon {
  transform: rotate(45deg);
  background: #fff;
  border-color: #fff;
  color: var(--brand-deep)
}

.result-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--expo)
}

.result.open .result-a {
  grid-template-rows: 1fr
}

.result-a>div {
  overflow: hidden
}

.result-a figure {
  padding: 0 0 1.75rem;
  max-width: 44rem
}

.result-a blockquote {
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: -.01em
}

.result-a figcaption {
  margin-top: 1rem;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .65)
}

/* ---------- leadership team ---------- */
.leaders {
  background: var(--background);
  padding: 5rem 1.5rem
}

.leaders-head {
  display: grid;
  gap: 1.25rem
}

.leaders-title {
  max-width: 26ch;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance
}

.leaders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1rem;
  margin-top: 3.5rem
}

.leader-media {
  aspect-ratio: 4/5;
  border-radius: var(--radius-card);
  overflow: hidden
}

.leader-media .art {
  width: 100%;
  height: 100%
}

.leader-media .art-initials {
  padding-bottom: 0;
  font-size: 3rem
}

.leader-name {
  margin-top: 1rem;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -.015em
}

.leader-role {
  margin-top: .25rem;
  font-size: .8125rem;
  color: var(--ink-soft)
}

.leader-join {
  display: flex
}

.join-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.125rem;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px dashed var(--hairline);
  transition: border-color .25s
}

.join-card:hover {
  border-color: var(--ink)
}

.join-title {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2
}

.join-text {
  margin-top: .625rem;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-soft)
}

.join-cta {
  margin-top: auto;
  font-size: .8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand-ink)
}

.careers+.cta-band {
  margin-top: .75rem
}

@media (min-width:640px) {

  .craft,
  .leaders {
    padding: 6rem 2.5rem
  }

  .strategy,
  .trusted {
    padding: 6rem 2.5rem
  }

  .result-q {
    grid-template-columns: minmax(12rem, 1fr) 1.4fr auto;
    gap: 1.5rem
  }

  .result-what {
    grid-column: 2;
    font-size: .9375rem
  }

  .result .faq-icon {
    grid-column: 3;
    grid-row: 1
  }

  .result-a figure {
    padding-left: calc(2rem + .75rem)
  }

  .leaders-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 1.25rem
  }

  .leader-media {
    aspect-ratio: 1
  }
}

@media (min-width:1024px) {
  .strategy-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .leaders-head {
    grid-template-columns: 1fr 2fr;
    align-items: start
  }


  .leaders-head .eyebrow {
    margin-top: .75rem
  }

  .result-a blockquote {
    font-size: 1.5rem
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-a {
    transition: none
  }
}

/* Whole team on one row from 900px, so the heading and every card fit on screen together. */
@media (min-width:900px) {
  .leaders-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem
  }

  .leader-media {
    aspect-ratio: 4/5
  }

  .leader-media .art-initials {
    font-size: 2.5rem
  }
}

/* ---------- careers: open positions ---------- */
.careers {
  background: var(--divider), var(--background);
  padding: 5rem 1.5rem
}

@media (min-width:640px) {
  .testimonials,
  .careers {
    --divider: linear-gradient(var(--hairline), var(--hairline)) top center / calc(100% - 5rem) 1px no-repeat
  }
}

.jobs {
  margin-top: 3rem;
  border-top: 1px solid var(--hairline)
}

.job {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--hairline)
}

.job-title {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2
}

.job-desc {
  margin-top: .5rem;
  max-width: 40rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft)
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: 1rem
}

.job-meta li {
  border-radius: var(--radius-pill);
  background: var(--surface);
  padding: .3rem .75rem;
  font-size: .75rem;
  color: var(--ink-soft)
}

.job-apply {
  align-self: flex-start
}

.jobs-note {
  margin-top: 2rem;
  font-size: .9375rem;
  color: var(--ink-soft)
}

.jobs-note a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .25em
}

.jobs-note a:hover {
  color: var(--brand-ink)
}

@media (min-width:640px) {
  .careers {
    padding: 6rem 2.5rem
  }

  .job {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2.5rem
  }

  .job-apply {
    align-self: center;
    flex: none
  }
}

/* =====================================================================
   Tap targets: small text links get an invisible padded hit area
   (layout unchanged); footer and menu links get taller rows on phones.
   ===================================================================== */
.post-read,
.sector-talk,
.case-sector,
.cform-note button,
.jobs-note a {
  position: relative
}

.post-read::after,
.sector-talk::after,
.case-sector::after,
.cform-note button::after,
.jobs-note a::after {
  content: "";
  position: absolute;
  inset: -.875rem -.375rem
}

@media (max-width:767px) {
  .f-nav ul {
    gap: 0
  }

  .f-nav a,
  .f-bottom a,
  .menu-social a,
  .f-addr a {
    display: inline-block;
    padding-block: .8125rem
  }

  .f-bottom nav,
  .menu-social {
    gap: 0 1rem
  }

  .f-bottom nav a,
  .menu-social a {
    min-width: 2.75rem;
    text-align: center
  }
}

/* =====================================================================
   Reduced motion: no slide-in reveals, only a short fade. (site.js also
   turns off smooth scrolling, parallax and spring animation.)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rv {
    transform: none !important
  }

  .rv.on {
    transition: opacity .15s linear !important;
    transition-delay: 0s !important
  }

  .skip-link {
    transition: none
  }
}

/* ---------- 404 ---------- */
.notfound-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.notfound-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem
}

.notfound-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-pill);
  font-size: .875rem;
  color: rgba(255, 255, 255, .9);
  transition: background-color .25s, border-color .25s
}

.notfound-links a:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .6)
}

.work-chip {
  min-height: 2.75rem
}

/* =====================================================================
   Floating UI (built by site.js): sticky header, mobile action bar,
   desktop stack (WhatsApp + back-to-top). Layers sit under the menu (70)
   and modal (90).
   ===================================================================== */
html {
  scroll-padding-top: 5rem
}

/* ---------- sticky header ---------- */
.sticky-hdr {
  position: fixed;
  z-index: 60;
  top: calc(.5rem + env(safe-area-inset-top, 0px));
  left: .5rem;
  right: .5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 .375rem 0 1.25rem;
  border-radius: 1.125rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--background) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--hairline), 0 10px 30px -12px rgba(30, 25, 40, .2);
  transform: translateY(calc(-100% - 1.5rem));
  opacity: 0;
  transition: transform .45s var(--expo), opacity .2s
}

.sticky-hdr.is-on {
  transform: none;
  opacity: 1
}

[data-theme="dark"] .sticky-hdr {
  background: color-mix(in srgb, var(--background) 88%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px -12px rgba(0, 0, 0, .5)
}

:root[data-theme="light"] .sticky-hdr {
  --logo-mark: #E7634C
}

.sticky-hdr .brand svg {
  height: 1.375rem
}

.sticky-text {
  display: none;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 .5rem;
  font-size: .75rem;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .025em;
  text-underline-offset: .25em
}

.sticky-text:hover {
  text-decoration: underline
}

.sticky-right {
  display: flex;
  align-items: center;
  gap: .5rem
}

.sticky-left {
  display: none
}

.sticky-hdr .icon-btn,
.sticky-hdr .burger {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none
}

.sticky-hdr .icon-btn:hover,
.sticky-hdr .burger:hover {
  background: color-mix(in srgb, var(--ink) 13%, transparent)
}

.sticky-hdr .burger span {
  background: var(--ink)
}


@media (min-width:640px) {
  .sticky-hdr {
    left: .75rem;
    right: .75rem;
    top: calc(.75rem + env(safe-area-inset-top, 0px))
  }
}

@media (min-width:768px) {
  .sticky-cta {
    display: inline-flex
  }
}

.sticky-hdr .brand {
  order: -1
}

@media (min-width:1024px) {
  .sticky-hdr {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    border-radius: var(--radius-pill);
    padding-left: 1.75rem
  }

  .sticky-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    justify-self: start
  }

  .sticky-left .sticky-text {
    display: inline-flex
  }

  .sticky-hdr .brand {
    order: 0
  }

  .sticky-right {
    justify-self: end
  }
}

/* ---------- WhatsApp button ---------- */
.wa-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  background: #25D366;
  color: #fff;
  transition: background-color .25s, transform .25s var(--expo)
}

.wa-btn:hover {
  background: #1DA851
}

.wa-btn svg {
  width: 1.5rem;
  height: 1.5rem
}

/* ---------- mobile action bar ---------- */
.action-bar {
  position: fixed;
  z-index: 65;
  left: .75rem;
  right: .75rem;
  bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: .5rem;
  padding: .375rem;
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--surface-card) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--hairline), 0 14px 34px -14px rgba(30, 25, 40, .35);
  transform: translateY(calc(100% + 1.5rem));
  transition: transform .5s var(--expo)
}

.action-bar.is-on {
  transform: none
}

[data-theme="dark"] .action-bar {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 34px -14px rgba(0, 0, 0, .6)
}

.action-cta {
  flex: 1;
  justify-content: center;
  height: 3rem;
  padding: 0 1rem
}

html.bar-on .draft-banner {
  bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px))
}

@media (min-width:768px) {
  .action-bar {
    display: none
  }
}

/* ---------- desktop stack: back-to-top above WhatsApp ---------- */
.float-stack {
  position: fixed;
  z-index: 65;
  right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  pointer-events: none
}

.float-stack>* {
  opacity: 0;
  transform: scale(.8);
  transition: opacity .25s var(--quart), transform .25s var(--quart)
}

.float-stack.is-on .wa-float,
.float-stack.is-on .to-top.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto
}

.wa-float {
  width: 3.25rem;
  height: 3.25rem;
  box-shadow: 0 10px 24px -10px rgba(37, 211, 102, .6)
}

.to-top {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--hairline), 0 8px 20px -10px rgba(30, 25, 40, .35)
}

.to-top>svg:not(.to-top-ring) {
  width: 1.125rem;
  height: 1.125rem
}

.to-top-ring {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  transform: rotate(-90deg);
  pointer-events: none
}

.to-top-ring circle {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round
}

@media (min-width:768px) {
  .float-stack {
    display: flex
  }
}

/* ---------- home hero CTA on phones (the header button is hidden there) ---------- */
.hero-cta {
  align-self: flex-start
}

:root[data-theme="light"] .hero-home .hero-cta {
  background: var(--brand-deep);
  color: #fff
}

@media (min-width:768px) {
  .hero-cta {
    display: none
  }
}

/* ---------- WhatsApp in the menu ---------- */
.menu-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem
}

.menu-wa {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-pill);
  font-size: .875rem;
  font-weight: 500;
  transition: border-color .25s, background-color .25s
}

.menu-wa:hover {
  border-color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .08)
}

.menu-wa svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #25D366
}

.menu-call svg {
  color: currentColor
}

@media (prefers-reduced-motion: reduce) {

  .sticky-hdr,
  .action-bar,
  .float-stack>* {
    transition: none
  }
}

/* ---------- hero card cluster: cards keep their own sizes, tops aligned, dots under the slider ---------- */
.hero-cluster {
  align-items: flex-start
}

.cslider {
  gap: .125rem
}

/* first dot sits just inside the card's left edge (dots have 44px hit areas) */
.cslider .dots {
  margin-left: -.4375rem
}

/* =====================================================================
   Batch 3: interaction polish
   ===================================================================== */

/* INT-03: the intro loader plays once per visit */
.no-loader .loader {
  display: none
}

/* INT-07: pressed feedback on buttons */
.pill,
.abtn,
.icon-btn,
.burger,
.xbtn,
.wa-btn,
.to-top,
.mbtn,
.work-chip,
.dot {
  -webkit-tap-highlight-color: transparent
}

.pill:active,
.abtn:active,
.icon-btn:active,
.burger:active,
.xbtn:active,
.wa-btn:active,
.to-top:active,
.mbtn:active,
.work-chip:active {
  /* `scale` (not transform) so it composes with the spring transforms some buttons carry */
  scale: .96;
  transition: scale 80ms ease-out
}

/* VIS-09: branded selects (contact form, project modal) */
.field select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 2.875rem;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666b78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s
}

[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a49fb0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
}

.field select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 1px var(--focus);
  outline: none
}

.field input {
  min-height: 2.875rem
}

/* SCR-05: reserve the featured-work card's space so the hero doesn't shift when it renders */
.cstage {
  min-height: 5.125rem
}

/* SCR-05: on portrait screens the hero loop is resized to fit; keep it hidden until it has been placed */
@media (max-aspect-ratio:1/1) {
  .hero-home .hero-plate video:not(.is-placed) {
    visibility: hidden
  }
}

@media (prefers-reduced-motion: reduce) {

  .pill:active,
  .abtn:active,
  .icon-btn:active,
  .burger:active,
  .xbtn:active,
  .wa-btn:active,
  .to-top:active,
  .mbtn:active,
  .work-chip:active {
    scale: none
  }
}

/* ---------- theme crossfade (View Transitions) ---------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .25s
}

/* ---------- article reading progress ---------- */
.read-progress {
  position: fixed;
  z-index: 61;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none
}

.read-progress.is-on {
  opacity: 1
}

/* =====================================================================
   Batch 5: forms, case studies, logos, avatars, legal pages
   ===================================================================== */

/* ---------- forms: spam trap, notices, privacy line ---------- */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden
}

.form-notice {
  margin-top: 1rem;
  padding: .875rem 1rem;
  border-radius: .875rem;
  font-size: .875rem;
  line-height: 1.5;
  background: var(--surface);
  color: var(--ink)
}

.form-notice.is-error {
  background: color-mix(in srgb, var(--brand) 12%, var(--background));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent)
}

.form-notice a,
.form-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em
}

.cform-card .form-notice {
  background: var(--background)
}

.form-legal {
  margin-top: .75rem;
  font-size: .8125rem;
  color: var(--ink-soft)
}

.nl-form .form-notice {
  background: rgba(255, 255, 255, .1);
  color: #fff
}

.nl-form .form-legal {
  color: rgba(255, 255, 255, .7)
}

.nl-form .nl-msg:empty {
  min-height: 0;
  margin: 0
}

/* ---------- real images (Cloudinary) where the gradient art used to be ---------- */
.media-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.art:has(> .media-img)::before,
.art:has(> .media-img)::after {
  display: none
}

/* Images placed inside blog post text */
.prose-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem
}

/* Work page: the whole card is clickable, the title link stretches over it. */
.work-card {
  position: relative
}

.work-link,
.court-link {
  color: inherit;
  text-decoration: none
}

.court-link:hover {
  text-decoration: underline;
  text-underline-offset: .15em
}

.work-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3
}

.work-card:has(.work-link:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: var(--radius-card)
}

.work-link:focus-visible {
  outline: none
}

/* Home cards: the image is a mouse/touch target for the same link (the caption link is the one in tab order). */
.court-hit {
  position: absolute;
  inset: 0;
  z-index: 1
}

.court .cap {
  z-index: 2
}

.work-card:hover .work-name {
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px
}

.result-link {
  display: inline-block;
  margin: 0 0 1.25rem;
  font-size: .875rem;
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em
}

/* ---------- avatars ---------- */
.tcard figcaption,
.case-quote figcaption {
  display: flex;
  align-items: center;
  gap: .75rem
}

.avatar {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover
}

.avatar-initials {
  display: grid;
  place-items: center;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(140deg, var(--brand), var(--brand-deep))
}

/* ---------- client logos: home grid under the hero, compact row on Contact ---------- */
.logos {
  background: var(--background);
  padding: 4rem 1.5rem 1rem
}

.logos[hidden] {
  display: none
}

.logos-title {
  text-align: center;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink)
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 88rem;
  margin: 2.5rem auto 0;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline)
}

.logo-grid li {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  aspect-ratio: 1.6;
  padding: 1rem;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline)
}

/* Hover: the cell fills with a brand gradient (a separate layer, so it can fade) and the logo turns white. */
.logo-grid li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(125deg, transparent 28%, rgba(255, 255, 255, .18) 44%, transparent 60%),
    radial-gradient(120% 90% at 88% 8%, var(--g1) 0%, transparent 58%),
    radial-gradient(90% 85% at 8% 100%, var(--g2) 0%, transparent 64%),
    linear-gradient(150deg, var(--g3), var(--g4));
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .35s ease, transform .6s var(--expo)
}

.logo-grid .logo-word,
.logo-grid .logo-mark {
  transition: opacity .2s, color .25s, background-color .25s
}

/* Six soft palettes (glow, glow, base, base). Row two is shifted by three, so no two neighbouring
   cells, side by side or stacked, share a gradient. All stay deep enough for a white logo. */
.logo-grid li,
.logo-grid li:nth-child(12n+10) { --g1: #FF9A6B; --g2: #F05343; --g3: #b23a48; --g4: #4a1f33 } /* coral */
.logo-grid li:nth-child(12n+2),
.logo-grid li:nth-child(12n+11) { --g1: #7cc4ff; --g2: #3b6cf6; --g3: #2848c7; --g4: #16215e } /* ocean */
.logo-grid li:nth-child(12n+3),
.logo-grid li:nth-child(12n+12) { --g1: #f5a3d0; --g2: #b05ce0; --g3: #6f3bc4; --g4: #2c1856 } /* orchid */
.logo-grid li:nth-child(12n+4),
.logo-grid li:nth-child(12n+7) { --g1: #8ee6c8; --g2: #23a68b; --g3: #137a6b; --g4: #0b3a3c } /* lagoon */
.logo-grid li:nth-child(12n+5),
.logo-grid li:nth-child(12n+8) { --g1: #ffc76b; --g2: #f08a24; --g3: #c2552a; --g4: #4d2416 } /* amber */
.logo-grid li:nth-child(12n+6),
.logo-grid li:nth-child(12n+9) { --g1: #b8b3ff; --g2: #6c63f0; --g3: #3d3aa8; --g4: #1b1a4a } /* iris */

@media (hover:hover) {
  .logo-grid li:hover::before {
    opacity: 1;
    transform: none
  }

  .logo-grid li:hover .logo-word {
    color: #fff;
    opacity: 1
  }

  .logo-grid li:hover .logo-mark {
    background: #fff;
    opacity: 1
  }
}

@media (prefers-reduced-motion:reduce) {
  .logo-grid li::before {
    transform: none;
    transition: opacity .2s
  }
}

.logo-mark {
  display: block;
  width: 8rem;
  height: 2.25rem;
  background: var(--ink);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  transform: scale(var(--logo-scale, 1));
  opacity: .85;
  transition: opacity .2s
}

/* Placeholder wordmarks until real logo files are added. */
.logo-word {
  display: block;
  max-width: 100%;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink);
  opacity: .85;
  transition: opacity .2s
}

.logo-word--1 {
  font-size: .9375rem;
  letter-spacing: .16em;
  text-transform: uppercase
}

.logo-word--2 {
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: -.01em
}

.logo-word--3 {
  font-size: 1.125rem;
  letter-spacing: .02em
}

.logo-grid li:hover .logo-mark,
.logo-grid li:hover .logo-word,
.logo-row li:hover .logo-mark,
.logo-row li:hover .logo-word {
  opacity: 1
}

.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1rem;
  list-style: none;
  padding: 0
}

.logo-row .logo-mark {
  width: 6rem;
  height: 1.5rem;
  opacity: .6
}

.logo-row .logo-word {
  font-size: 1rem;
  opacity: .6
}

.logo-row .logo-word--1 {
  font-size: .75rem
}

.logos-inline {
  padding: 0;
  margin-top: 2rem;
  background: none
}

.logos-inline .logos-title {
  text-align: left;
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--ink-soft)
}

/* Phones: 8 logos (4 rows) is plenty. */
@media (max-width:639.98px) {
  .logo-grid li:nth-child(n+9) {
    display: none
  }
}

@media (min-width:640px) {
  .logos {
    padding: 5rem 2.5rem 1rem
  }

  .logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media (min-width:1024px) {
  .logos-title {
    font-size: 1.0625rem
  }

  .logo-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 3.5rem
  }

  .logo-grid li {
    aspect-ratio: 1.08
  }
}

/* ---------- case study page ---------- */
.case {
  background: var(--background);
  padding: 3rem 1.5rem 4rem
}

.case-cover {
  position: relative;
  aspect-ratio: 16/10;
  max-width: 75rem;
  margin: 0 auto;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  background: var(--surface)
}

.case-cover .art {
  position: absolute;
  inset: 0
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  max-width: 75rem;
  margin: 2.5rem auto 0;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--hairline)
}

.case-facts dt {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft)
}

.case-facts dd {
  margin: .375rem 0 0;
  font-size: 1rem;
  line-height: 1.4
}

.case-results {
  display: grid;
  gap: 1rem;
  max-width: 75rem;
  margin: 2.5rem auto 0;
  list-style: none;
  padding: 0
}

.case-results li {
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 1.5rem
}

.case-results b {
  display: block;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1
}

.case-results span {
  display: block;
  margin-top: .5rem;
  color: var(--ink-soft)
}

.case-steps {
  counter-reset: step;
  display: grid;
  gap: 1.75rem;
  list-style: none;
  padding: 0
}

.prose .case-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem
}

.prose .case-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .15rem;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: .875rem;
  font-weight: 500;
  color: var(--brand-ink)
}

.case-steps h3 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.01em
}

.case-steps p {
  margin-top: .375rem;
  color: color-mix(in srgb, var(--ink) 82%, transparent)
}

.case-gallery {
  display: grid;
  gap: 1rem;
  max-width: 75rem;
  margin: 3.5rem auto 0
}

.case-gallery img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card)
}

.case-quote {
  max-width: 48rem;
  margin: 4rem auto 0;
  padding: 2rem 1.75rem;
  border-radius: var(--radius-card-lg);
  background: var(--surface)
}

.case-quote blockquote {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.35
}

.case-quote figcaption {
  margin-top: 1.5rem
}

.case-next-sec {
  background: var(--background);
  padding: 0 1.5rem 5rem
}

.case-next {
  display: grid;
  gap: 1.5rem;
  max-width: 75rem;
  margin: 1.25rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none
}

.case-next-media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface)
}

.case-next-media .art {
  position: absolute;
  inset: 0
}

.case-next .case-tag {
  color: var(--ink-soft);
  opacity: 1
}

.case-next-title {
  margin-top: .5rem
}

.case-next-cta {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em
}

.case-next:hover .case-next-cta,
.case-next:focus-visible .case-next-cta {
  text-decoration: underline;
  text-underline-offset: .25em
}

@media (min-width:640px) {
  .case {
    padding: 4rem 2.5rem 5rem
  }

  .case-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .case-results {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

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

  .case-next-sec {
    padding: 0 2.5rem 6rem
  }
}

@media (min-width:1024px) {
  .case-facts {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .case-next {
    grid-template-columns: 2fr 3fr;
    align-items: center;
    gap: 3rem
  }
}

/* "← All work" sits on its own line above the eyebrow. */
.article-head .article-back {
  display: block;
  width: fit-content
}

/* ---------- legal pages ---------- */
.legal .prose h2 {
  scroll-margin-top: 6rem
}

.legal .prose strong {
  font-weight: 500;
  color: var(--ink)
}

.legal .prose a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: .2em
}

.legal-toc {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-card);
  background: var(--surface)
}

.legal-toc-title {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft)
}

.legal-toc ol {
  margin: .75rem 0 0;
  padding-left: 1.25rem;
  columns: 2 12rem;
  column-gap: 2rem;
  font-size: .9375rem;
  line-height: 1.9
}

.legal-toc a {
  color: inherit;
  text-decoration: none
}

.legal-toc a:hover {
  text-decoration: underline;
  text-underline-offset: .2em
}

.legal .prose {
  margin-top: 2.5rem
}

/* ---------- Book a call: Calendly dialog ---------- */
.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem;
  visibility: hidden;
  pointer-events: none
}

.cal-modal.open {
  visibility: visible;
  pointer-events: auto
}

.cal-bd {
  position: absolute;
  inset: 0;
  background: rgba(30, 25, 40, .4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s
}

.cal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 64rem;
  height: min(46rem, calc(100svh - 1.5rem));
  border-radius: var(--radius-card-lg);
  background: var(--surface-card);
  color: var(--ink);
  box-shadow: 0 2rem 4rem -1rem rgba(30, 25, 40, .4);
  overflow: hidden;
  opacity: 0;
  transform: translateY(1.5rem) scale(.97);
  transition: opacity .3s var(--expo), transform .45s var(--expo)
}

.cal-modal.open .cal-bd,
.cal-modal.open .cal-panel {
  opacity: 1
}

.cal-modal.open .cal-panel {
  transform: none
}

.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem
}

.cal-title {
  margin-top: .5rem;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2
}

.cal-sub {
  margin-top: .375rem;
  font-size: .875rem;
  color: var(--ink-soft)
}

.cal-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline)
}

.cal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity .3s
}

.cal-frame.is-loaded iframe {
  opacity: 1
}

.cal-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .875rem;
  color: var(--ink-soft)
}

.cal-frame.is-loaded .cal-loading,
.cal-frame.is-blocked .cal-loading,
.cal-frame.is-slow .cal-loading {
  display: none
}

/* Calendly couldn't be embedded (blocked or too slow): offer it directly. */
.cal-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--surface-card)
}

.cal-frame.is-blocked .cal-fallback,
.cal-frame.is-slow:not(.is-loaded) .cal-fallback {
  display: flex
}

.cal-frame.is-blocked iframe {
  visibility: hidden
}

.cal-panel:has(.cal-frame.is-blocked) .cal-foot {
  display: none
}

.cal-fallback-msg {
  max-width: 24rem;
  font-size: 1rem;
  color: var(--ink-soft)
}

.cal-foot {
  padding: .875rem 1.25rem;
  font-size: .8125rem;
  color: var(--ink-soft)
}

.cal-foot a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .2em
}

@media (min-width:640px) {
  .cal-modal {
    padding: 1.5rem
  }

  .cal-head {
    padding: 1.75rem 1.75rem 1.25rem
  }

  .cal-title {
    font-size: 1.875rem
  }

  .cal-foot {
    padding: 1rem 1.75rem
  }
}

@media (prefers-reduced-motion:reduce) {
  .cal-bd,
  .cal-panel,
  .cal-frame iframe {
    transition: none
  }
}