/*
 * Kendoo, repositioned. One stylesheet for the whole site.
 *
 * The type and colour are the ones the brand already uses, read off the
 * existing site's computed styles rather than invented, so the new pages sit
 * beside the old ones without a visible seam. The faces are Kendoo's own,
 * self-hosted from assets/fonts.
 */

@font-face { font-family: "k-display"; src: url("fonts/458ce177.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "k-heading"; src: url("fonts/2e711f6b.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "k-body";    src: url("fonts/b2347eea.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "k-ui";      src: url("fonts/d40b0938.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "k-nav";     src: url("fonts/58c1174f.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "k-lede";    src: url("fonts/9bc757e1.woff2") format("woff2"); font-display: swap; }

/* Hebrew. The six faces above are Latin-only, so Hebrew text fell through to
   whatever system-ui happened to be, which is why it did not look like Kendoo.
   Assistant is the face the live site sets Hebrew in. Both files are variable
   across the whole 200-800 range, so no weight is ever synthesised. */
@font-face {
  font-family: "k-he"; font-weight: 200 800; font-display: swap;
  src: url("fonts/assistant-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "k-he"; font-weight: 200 800; font-display: swap;
  src: url("fonts/assistant-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Typeface roles, so the RTL swap below happens in one place. */
:root {
  --f-display: "k-display";
  --f-heading: "k-heading";
  --f-body: "k-body";
  --f-ui: "k-ui";
  --f-nav: "k-nav";
  --f-lede: "k-lede";
  /* "k-he" sits in the fallback so Hebrew characters on an English page, the
     language switcher above all, resolve to Assistant instead of whatever
     system-ui happens to be. Fallback is per character: Latin still comes from
     the face ahead of it in the stack, because that face has those glyphs. */
  --f-fallback: "k-he", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Hebrew sets everything in Assistant, including the Latin words inside it,
   so a Hebrew page reads as one typeface rather than two. */
[dir="rtl"] {
  --f-display: "k-he";
  --f-heading: "k-he";
  --f-body: "k-he";
  --f-ui: "k-he";
  --f-nav: "k-he";
  --f-lede: "k-he";
}

:root {
  --ink:    #28323b;
  --navy:   #0e1c35;
  --light:  #f0f4fa;
  --green:  #41bb93;
  --green-d:#2f9c78;
  /* Buttons only. White on the brand green is 2.40:1, under the 4.5:1 needed
     for label text; this is the same hue darkened until it clears. The brand
     green is unchanged everywhere else. */
  --green-btn:#2a7b61;
  --green-btn-hover:#256c55;
  --mint:   #a8dcc4;
  --blue:   #4560a8;
  --muted:  #b8bec9;
  --slate:  #475266;
  --steel:  #7797b2;
  --line:   #e2e8f0;

  --wrap: 1120px;
  --narrow: 760px;
  --r: 14px;
  --r-btn: 8px;

  /* Spacing follows proximity: 8 to 16px within an element, 24 to 44px
     between related groups, and 96px between major sections. */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 44px;
  --space-section: 96px;
  --space-head: 44px;
  --space-grid: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--f-body), var(--f-fallback);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; border: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* The skip link hides by clipping, not by being parked off-screen. Parking it
   at left:-9999px made every right-to-left page 11,279px wide, because in RTL
   that overflow counts toward the scrollable area. */
.skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; inset-block-start: 12px; inset-inline-start: 12px;
  width: auto; height: auto; clip-path: none; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: var(--r);
}

.wrap   { width: min(100% - 44px, var(--wrap));   margin-inline: auto; }
.narrow { width: min(100% - 44px, var(--narrow)); margin-inline: auto; }

h1, h2, h3, h4 { text-wrap: balance; margin: 0 0 .55em; }
h1 { font-family: var(--f-display), var(--f-fallback); font-size: clamp(34px, 5.1vw, 64px); font-weight: 700; line-height: 1.1; letter-spacing: -.5px; }
h2 { font-family: var(--f-heading), var(--f-fallback); font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; line-height: 1.2; }
h3 { font-family: var(--f-ui), var(--f-fallback); font-size: 20px; font-weight: 700; line-height: 1.3; }
p  { margin: 0 0 1.05em; }
.lede { font-family: var(--f-lede), var(--f-fallback); font-size: clamp(19px, 2.1vw, 26px); line-height: 1.42; color: var(--slate); }
.eyebrow {
  font-family: var(--f-nav), var(--f-fallback); font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--green-d); margin: 0 0 14px;
}

/* ---- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  font-family: var(--f-ui), var(--f-fallback); font-size: 17px; font-weight: 400;
  padding: 15px 32px; border-radius: var(--r-btn); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: background-color var(--motion-duration), color var(--motion-duration), border-color var(--motion-duration);
}
.btn--primary { background: var(--green-btn); color: #fff; }
.btn--primary:hover { background: var(--green-btn-hover); }
.btn--ghost { border-color: currentColor; }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.btn--dark { background: var(--navy); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* ---- header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--line);
}
.site-header__in { display: flex; align-items: center; gap: 26px; padding: 16px 0; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; width: auto; height: 34px; }
/* The 90px logo canvas has visible ink at y=31..88: its optical centre is
   15px below the canvas centre. Align the wordmark with the navigation. */
.site-header .brand img { translate: 0 -16.666667%; }
.nav { display: flex; align-items: center; gap: 22px; margin-inline-start: auto; }
.nav a { font-family: var(--f-nav), var(--f-fallback); font-size: 15px; text-decoration: none; color: var(--ink); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--green-d); }
/* Services is the main entry point to the eight lines of work. */
.nav a:first-child { font-weight: 700; }
.nav .btn { padding: 11px 20px; font-size: 15px; }
.nav-toggle { display: none; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; margin-inline-start: auto; }

/* ---- hero -------------------------------------------------------------- */
.hero { background: var(--navy); color: var(--light); padding: 96px 0 88px; }
.hero h1 { color: #fff; }
.hero .lede { color: #cdd8e6; max-width: 40ch; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.hero__card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r); padding: 30px 32px; }
.hero__card h2 { color: #fff; font-family: var(--f-ui), var(--f-fallback); font-size: 17px; font-weight: 700; line-height: 1.3; }
.hero__card ul { margin: 0; padding-inline-start: 20px; color: #cdd8e6; font-size: 16px; }
.hero__card li { margin-bottom: 9px; }

/* ---- sections ---------------------------------------------------------- */
/* Major bands use the largest interval in the spacing scale. This gives each
   subject a clear boundary without turning every transition into empty space. */
/* Opaque on purpose: the hero video is pinned behind the page while the hero
   scrolls over it, so a transparent section lets the video show through and
   the copy becomes unreadable. The tinted and dark variants below override it. */
.section { --section-y: var(--space-section); padding: var(--section-y) 0; background: #fff; }

/* The pinned hero media is a positioned element, so it paints above the
   backgrounds of the in-flow sections that follow it however opaque they are.
   Giving every band its own stacking position puts them back on top, which is
   what makes the page scroll over the video rather than under it. */
main > section { position: relative; z-index: 1; }
.section--tint { background: var(--light); }
.section--dark { background: var(--navy); color: var(--light); }
.cards-glow { background: radial-gradient(ellipse at 75% 45%, rgba(65,187,147,.09), transparent 65%), var(--navy); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: #cdd8e6; }
.section__head { max-width: 62ch; margin-bottom: var(--space-head); }

.grid { display: grid; gap: var(--space-grid); }
.grid--1 { grid-template-columns: minmax(0, 1fr); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
/* Icons are a single thin line in the text colour, with no tile behind
   them. The tile class stays as the layout box. */
.icon-tile {
  display: inline-flex; align-items: center; justify-content: flex-start;
  flex: none; margin-bottom: 18px; color: var(--navy);
}
.card__icon { width: 40px; height: 40px; display: block; overflow: visible; }
.section--dark .icon-tile, .blogband .icon-tile, [data-surface="navy"] .icon-tile { color: #fff; }
.section--dark .card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }

/* Editorial preview grid: a real photo thumbnail, a small category tag,
   a plain headline and one line of body copy. No card box, border or
   shadow at all - the photo and the tag do the work. */
.situations-editorial .section__head h2 { display: flex; align-items: center; gap: 14px; }
.situations-editorial .section__head h2 svg { width: 20px; height: 20px; color: var(--green-d); }
.situation-item { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.situation-item__thumb {
  aspect-ratio: 16 / 10; border-radius: 16px; margin-bottom: 22px; overflow: hidden;
  display: block;
}
.situation-item__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--motion-duration) var(--motion-ease);
}
.situation-item:hover .situation-item__thumb img, .situation-item:focus-visible .situation-item__thumb img { transform: scale(1.05); }
.situation-item__tag { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--green-d); margin-bottom: 10px; }
.situation-item h3 { font-family: var(--f-heading), var(--f-fallback); font-size: 21px; line-height: 1.3; margin-bottom: .4em; transition: color var(--motion-duration) var(--motion-ease); }
.situation-item:hover h3, .situation-item:focus-visible h3 { color: var(--green-d); }
.situation-item p { color: var(--slate); }
.situation-item__cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-weight: 700; font-size: 14px; color: var(--green-d);
}
.situation-item__cta svg { transition: transform var(--motion-duration) var(--motion-ease); }
.situation-item:hover .situation-item__cta svg { transform: translateX(5px); }
[dir="rtl"] .situation-item:hover .situation-item__cta svg { transform: scaleX(-1) translateX(5px); }

/* A directory of destinations: titles, descriptions and actions share columns. */
.service-index { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.service-index > li { border-top: 1px solid var(--line); }
/* The heading gap is already supplied by section__head. Between entries,
   two 16px insets and the divider produce a 33px visible group boundary. */
.service-index > li:first-child { border-top: 0; }
.service-index > li:first-child .service-index__link { padding-top: 0; }
.service-index__link {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1.35fr) auto;
  gap: var(--space-3); align-items: start; padding: var(--space-3) 0;
  color: inherit; text-decoration: none;
  transition: background-color var(--motion-duration) var(--motion-ease);
}
.service-index__link:hover,
.service-index__link:focus-visible {
  background: rgba(65,187,147,.055);
}
.service-index__link:focus-visible {
  outline: 2px solid var(--green-d); outline-offset: 6px;
}
.service-index__number {
  padding-top: var(--space-1); color: var(--green-d);
  font-family: var(--f-nav), var(--f-fallback); font-size: 12px; font-weight: 700;
  letter-spacing: .14em;
}
.service-index__title {
  margin: 0;
  font-family: var(--f-ui), var(--f-fallback); font-size: clamp(23px, 2.1vw, 30px);
  font-weight: 700; line-height: 1.25; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: #afbbb9; text-underline-offset: 5px;
}
.service-index__link:hover .service-index__title,
.service-index__link:focus-visible .service-index__title { color: var(--green-d); text-decoration-color: currentColor; }
.service-index__body { margin: 0; color: var(--slate); font-size: 16px; line-height: 1.65; }
.service-index__action {
  display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1);
  color: var(--green-d); white-space: nowrap;
  font-family: var(--f-nav), var(--f-fallback); font-size: 13px; font-weight: 700;
  border-bottom: 1px solid rgba(47,156,120,.42);
}
.service-index__action .arrowlink__a { transition: transform var(--motion-duration) var(--motion-ease); }
.service-index__link:hover .service-index__action .arrowlink__a,
.service-index__link:focus-visible .service-index__action .arrowlink__a { transform: translateX(5px); }
[dir="rtl"] .service-index__action .arrowlink__a { transform: scaleX(-1); }
[dir="rtl"] .service-index__link:hover .service-index__action .arrowlink__a,
[dir="rtl"] .service-index__link:focus-visible .service-index__action .arrowlink__a { transform: scaleX(-1) translateX(5px); }

/* A light, soft-glow variant of the index: distinct from the dark
   service-directory band above it and the flat white card grids elsewhere,
   so a "find your situation" list does not read as a repeated section. */
.service-index-band--glow {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #f4faf7 0%, var(--light) 60%);
}
.service-index-band--glow::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 12% 15%, rgba(65,187,147,.16), transparent 40%),
    radial-gradient(circle at 88% 80%, rgba(168,220,196,.22), transparent 45%);
}
.service-index-band--glow .service-index { border-bottom-color: rgba(65,187,147,.22); }
.service-index-band--glow .service-index > li { border-top-color: rgba(65,187,147,.22); }
.service-index-band--glow .service-index__number {
  font-size: 15px; color: var(--green-btn);
}
.service-index-band--glow .service-index__link:hover,
.service-index-band--glow .service-index__link:focus-visible { background: rgba(65,187,147,.09); }

/* An open field of related causes, connected by a single shared spine. */
.cause-system-band {
  background: radial-gradient(ellipse at 75% 45%, rgba(65,187,147,.09), transparent 65%), var(--navy);
}
.cause-system-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.7fr); gap: var(--space-head); align-items: start; }
.cause-system-band .section__head { margin: 0; }
.cause-system-band .section__head > :last-child { margin-bottom: 0; }
.cause-system-band .section__head .lede { color: #c3cfdd; font-size: 18px; line-height: 1.65; }
.cause-system {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0; column-gap: var(--space-6); row-gap: var(--space-5);
}
.cause-system::before {
  content: ""; position: absolute; inset-block: var(--space-2); inset-inline-start: calc(50% - .5px);
  width: 1px; background: rgba(170,231,211,.3);
}
.cause-system__item {
  position: relative;
}
.cause-system__item::before {
  content: ""; position: absolute; inset-block-start: var(--space-2); width: var(--space-2);
  border-top: 1px solid rgba(170,231,211,.5);
}
.cause-system__item:nth-child(odd)::before { inset-inline-end: calc(var(--space-6) / -2); }
.cause-system__item:nth-child(even)::before { inset-inline-start: calc(var(--space-6) / -2); }
.cause-system__copy h3 { margin: 0 0 var(--space-2); color: var(--mint); font-size: 22px; line-height: 1.25; }
.cause-system__copy p { margin: 0; color: #c3cfdd; font-size: 16px; line-height: 1.65; }

/* Homepage services: an interactive field, not a wall of equal feature cards. */
.service-directory {
  isolation: isolate; overflow: hidden; background: var(--navy); color: var(--light);
}
.service-directory::before {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
}
.service-directory::before {
  inset: -35%;
  background:
    radial-gradient(circle at 18% 28%, rgba(65,187,147,.25), transparent 19%),
    radial-gradient(circle at 76% 68%, rgba(69,96,168,.32), transparent 26%),
    radial-gradient(circle at 48% 45%, rgba(168,220,196,.09), transparent 22%);
  filter: blur(4px); animation: service-field 18s ease-in-out infinite alternate;
}
.service-directory .wrap { position: relative; z-index: 1; }
.service-directory .section__head h2 { color: #fff; }
.service-directory .section__head .lede { color: #cdd8e6; }
.service-directory .eyebrow { color: var(--mint); }
.service-directory__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px;
}
.service-directory__list li {
  position: relative; display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 14px 22px 0; border-top: 1px solid rgba(255,255,255,.16);
  transition: transform var(--motion-duration) var(--motion-ease), padding-inline-start var(--motion-duration) var(--motion-ease);
}
.service-directory__list li::before {
  content: ""; position: absolute; inset: 7px -18px; z-index: -1; border-radius: var(--r);
  background: linear-gradient(100deg, rgba(65,187,147,.2), rgba(65,187,147,.04) 64%, transparent);
  opacity: 0; transform: scale(.96); transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
}
.service-directory__list li:hover,
.service-directory__list li:focus-within { transform: translateX(8px); padding-inline-start: 8px; }
[dir="rtl"] .service-directory__list li:hover,
[dir="rtl"] .service-directory__list li:focus-within { transform: translateX(-8px); }
.service-directory__list li:hover::before,
.service-directory__list li:focus-within::before { opacity: 1; transform: scale(1); }
.service-directory__list li[data-service="2"]::before,
.service-directory__list li[data-service="5"]::before { background: linear-gradient(100deg, rgba(69,96,168,.3), rgba(69,96,168,.05) 64%, transparent); }
.service-directory__list li[data-service="3"]::before,
.service-directory__list li[data-service="6"]::before { background: linear-gradient(100deg, rgba(168,220,196,.21), rgba(168,220,196,.04) 64%, transparent); }
.service-directory__list li:hover .icon-tile,
.service-directory__list li:focus-within .icon-tile { transform: rotate(-8deg) scale(1.08); }
.service-directory__list .icon-tile { width: 42px; height: 42px; margin: 0; transition: transform var(--motion-duration) var(--motion-ease); }
.service-directory__list .card__icon { width: 21px; height: 21px; }
.service-directory__list h3 { margin: 0 0 7px; font-size: 19px; }
.service-directory__list h3 a { color: #fff; text-decoration: none; }
.service-directory__list h3 a:hover { color: var(--mint); }
.service-directory__list h3 .arrowlink__a { display: inline-block; margin-inline-start: 7px; vertical-align: -2px; }
.service-directory__list p { margin: 0; color: #cdd8e6; font-size: 15.5px; line-height: 1.55; }
.service-directory .posts__more { margin-top: var(--space-5); }
.service-directory .arrowlink--dark { color: var(--mint); border-bottom-color: rgba(168,220,196,.45); }

/* Homepage services, live-site layout: a white panel, copy held on the left
   while staggered colour cards pass by on the right. The panel sits flush
   under the hero and the first card rises into the hero on purpose. Green
   and blue cards carry white text, mint carries navy. */
.section.service-stagger { z-index: 2; padding-top: 0; background: var(--light); }
.service-stagger__panel {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 64px;
  align-items: start; background: #fff; border-radius: 0 0 var(--r) var(--r);
  padding: 72px 64px 72px; box-shadow: 0 30px 70px -40px rgba(14,28,53,.25);
}
.service-stagger__head { position: sticky; top: 120px; margin: 0; }
.service-stagger__head h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; }
.service-stagger__head .lede { font-size: 17px; line-height: 1.7; }
.service-stagger__more { margin: var(--space-5) 0 0; }
.service-stagger__cards {
  list-style: none; margin: -104px 0 0; padding: 0 0 140px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px;
  align-items: start;
}
.service-stagger__card {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 26px 30px; border-radius: 10px; min-height: 300px;
  background: var(--green); color: #fff;
  box-shadow: 0 18px 40px -22px rgba(14,28,53,.45);
  transition: transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease);
}
.service-stagger__card:nth-child(even) { translate: 0 140px; }
.service-stagger__card[data-tone="blue"] { background: var(--blue); }
.service-stagger__card[data-tone="mint"] { background: #b3e6d5; color: var(--navy); }
.service-stagger__card::after {
  content: ""; display: block; margin-top: auto; padding-top: 22px;
  border-bottom: 1px solid currentColor; opacity: .45;
}
.service-stagger__card:hover,
.service-stagger__card:focus-within { transform: translateY(-6px); box-shadow: 0 28px 50px -24px rgba(14,28,53,.55); }
.service-stagger__card .icon-tile { margin: 0 0 56px; color: inherit; }
.service-stagger__card .card__icon { width: 46px; height: 46px; }
.service-stagger__card h3 { margin: 0 0 14px; font-size: 20px; line-height: 1.25; }
.service-stagger__card h3 a { color: inherit; text-decoration: none; }
.service-stagger__card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.service-stagger__card h3 a:focus-visible { outline: none; }
.service-stagger__card:has(a:focus-visible) { outline: 3px solid var(--navy); outline-offset: 4px; }
.service-stagger__card p { margin: 0 0 18px; font-size: 15px; line-height: 1.65; }

/* Area cards: the title goes to the area on the Services page, and each
   service is its own link, so the card is not one big link. */
.service-stagger__card--group h3 a::after { display: none; }
.service-stagger__card--group:has(a:focus-visible) { outline: none; }
.service-stagger__card--group a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.service-stagger__card--group h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.service-stagger__links { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.service-stagger__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; color: inherit; text-decoration: none; font-weight: 600; font-size: 15px;
  border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.service-stagger__links .arrowlink__a { transition: transform var(--motion-duration) var(--motion-ease); }
.service-stagger__links a:hover .arrowlink__a { transform: translateX(4px); }
[dir="rtl"] .service-stagger__links .arrowlink__a { transform: scaleX(-1); }
[dir="rtl"] .service-stagger__links a:hover .arrowlink__a { transform: scaleX(-1) translateX(4px); }
.service-stagger__card--group::after { display: none; }

@media (max-width: 960px) {
  .service-stagger__panel { grid-template-columns: 1fr; gap: var(--space-5); padding: 48px 28px; }
  .service-stagger__head { position: static; }
  .service-stagger__cards { margin-top: 0; padding-bottom: 0; }
  .service-stagger__card:nth-child(even) { translate: none; }
  .service-stagger__card { min-height: 0; }
  .service-stagger__card .icon-tile { margin-bottom: 28px; }
}
@media (max-width: 560px) {
  .service-stagger__cards { grid-template-columns: 1fr; }
  .service-stagger__panel { padding: 36px 20px; }
}

/* Services page: three outcome groups of offer cards. Each card leads with
   what the client gets; the whole card is the link. Group colour comes from
   the brand trio used on the homepage cards. */
.service-groups .section__head { margin-bottom: 56px; }
.service-group {
  --tone: var(--green-btn); --tone-soft: rgba(65,187,147,.07); margin-top: 40px;
  padding: 40px 40px 44px; border-radius: 22px; background: var(--tone-soft);
  scroll-margin-top: 110px;   /* clears the floating header when linked from the homepage */
}
.service-group:first-of-type { margin-top: 0; }
.service-group[data-tone="blue"] { --tone: var(--blue); --tone-soft: rgba(69,96,168,.08); }
.service-group[data-tone="mint"] { --tone: #237a72; --tone-soft: #dff2ea; }
.service-group__head {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.service-group__head h3 {
  margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tone);
}
.service-group__head p {
  margin: 0; font-family: var(--f-heading), var(--f-fallback); font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; color: var(--navy);
}
.service-group__cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.service-offer {
  position: relative; display: flex; flex-direction: column; overflow: hidden;   /* the top line follows the corners */
  padding: 30px 28px 26px; background: #fff; border: 1px solid rgba(14,28,53,.06); border-radius: var(--r);
  box-shadow: 0 10px 30px -22px rgba(14,28,53,.35);
  transition: transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease);
}
/* The accent grows from a short rounded tab to the full top edge. Width (not
   scale) animates so the rounded end keeps its shape; the card's own clipping
   bends the line around the top corners. */
.service-offer::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 0; height: 4px; width: 64px;
  background: var(--tone); border-end-end-radius: 4px; border-start-end-radius: 0;
  transition: width 420ms var(--motion-ease), border-end-end-radius 420ms var(--motion-ease);
}
.service-offer:hover, .service-offer:focus-within {
  transform: translateY(-6px); border-color: transparent;
  box-shadow: 0 26px 50px -26px rgba(14,28,53,.35);
}
.service-offer:hover::before, .service-offer:focus-within::before { width: 100%; border-end-end-radius: 0; }
@media (prefers-reduced-motion: reduce) { .service-offer::before { transition: none; } }
.service-offer .icon-tile { color: var(--tone); margin-bottom: 22px; }
.service-offer .card__icon { width: 36px; height: 36px; }
.service-offer__name {
  margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tone);
}
.service-offer h4 {
  margin: 0 0 18px; font-family: var(--f-heading), var(--f-fallback); font-weight: 700;
  font-size: 21px; line-height: 1.25; letter-spacing: -.01em;
}
.service-offer h4 a { color: var(--navy); text-decoration: none; }
.service-offer h4 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.service-offer h4 a:focus-visible { outline: none; }
.service-offer:has(a:focus-visible) { outline: 3px solid var(--tone); outline-offset: 3px; }
.service-offer__points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.service-offer__points li {
  position: relative; padding-inline-start: 26px; font-size: 15px; line-height: 1.5; color: var(--slate);
}
.service-offer__points li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: .38em;
  width: 12px; height: 7px; border-left: 2px solid var(--tone); border-bottom: 2px solid var(--tone);
  transform: rotate(-45deg);
}
.service-offer__go {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--tone); display: inline-flex; align-items: center; gap: 6px;
}
.service-offer__go .arrowlink__a { transition: transform var(--motion-duration) var(--motion-ease); }
.service-offer:hover .service-offer__go .arrowlink__a { transform: translateX(5px); }
[dir="rtl"] .service-offer__go .arrowlink__a { transform: scaleX(-1); }
[dir="rtl"] .service-offer:hover .service-offer__go .arrowlink__a { transform: scaleX(-1) translateX(5px); }
.service-group__more { margin: 22px 0 0; }
@media (max-width: 960px) {
  .service-group__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .service-group__cards { grid-template-columns: 1fr; }
  .service-group { margin-top: 28px; padding: 28px 18px 30px; }
}

@keyframes service-field {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(4%, 3%, 0) scale(1.06); }
}

/* symptom / impact lists */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-inline-start: 30px; margin-bottom: 13px; }
.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--green);
}
.ticks--cross li::before { background: #d2606a; }

/* numbered steps */
.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.steps li { counter-increment: s; position: relative; padding-inline-start: 62px; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; top: 0;
  font-family: var(--f-heading), var(--f-fallback); font-size: 20px; font-weight: 700;
  color: var(--green-d);
}
.steps h3 { margin-bottom: .25em; }
.steps p { margin: 0; color: var(--slate); }

/* The home-page journey becomes a visible path when it enters the viewport. */
.steps--flow {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; position: relative;
  padding-top: 8px;
}
.steps--flow::before,
.steps--flow::after {
  content: ""; position: absolute; inset-block-start: 34px; inset-inline: 26px; height: 2px;
  border-radius: 999px;
}
.steps--flow::before { background: var(--line); }
.steps--flow::after {
  background: linear-gradient(90deg, var(--green), var(--mint)); transform: scaleX(.04);
  transform-origin: left center; transition: transform var(--motion-duration) var(--motion-ease);
}
.steps--flow[data-active]::after { transform: scaleX(1); }
[dir="rtl"] .steps--flow::after { transform-origin: right center; }
.steps--flow li { padding: 70px 0 0; z-index: 1; }
.steps--flow li::before { display: none; }
/* A CSS squircle: a vector path here rendered with jagged edges on some
   screens, a border-radius never does. Browsers without corner-shape show
   a plain circle. */
.step-marker {
  position: absolute; inset-inline-start: 0; top: 0;
  display: grid; place-items: center; width: 52px; height: 52px; box-sizing: border-box;
  border-radius: 50%; corner-shape: squircle; background: #fff; border: 2px solid var(--line);
  color: var(--green-d); font-family: var(--f-heading), var(--f-fallback);
  font-size: 17px; font-weight: 700;
  transition: background-color var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
.steps--flow[data-active] .step-marker { color: var(--mint); background: var(--navy); border-color: var(--navy); }

/* pull quote / boundary callout */
.callout {
  border-inline-start: 4px solid var(--green); background: var(--light);
  padding: 26px 30px; border-radius: 0 var(--r) var(--r) 0; margin: 34px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--navy); }

/* fit / not-fit columns */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-grid); }
.fit__col { border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; }
.fit__col--yes { border-top: 4px solid var(--green); }
.fit__col--no  { border-top: 4px solid #d2606a; }

/* case studies */
.case { border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; }
.case dl { margin: 0; display: grid; gap: 14px; }
.case dt { font-family: var(--f-nav), var(--f-fallback); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.case dd { margin: 4px 0 0; }
.case__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.engagements__note { margin: 26px 0 0; color: var(--slate); max-width: 70ch; font-size: 14px; }
.tag {
  font-family: var(--f-nav), var(--f-fallback); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; background: var(--light); color: var(--slate);
  padding: 5px 11px; border-radius: 100px;
}

/* faq */
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { font-family: var(--f-ui), var(--f-fallback); font-size: 18px; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: inline-end; color: var(--green-d); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: 14px 0 0; color: var(--slate); }

/* final cta */
/* The closing band.
   A flat green rectangle was the weakest thing on the page, so the colour is
   built from moving parts instead: four large blurred blobs drifting behind
   the green, the hero's own 6x6 mesh over the top to tie it to the rest of the
   site, and a fine grain so the gradient does not band on wide screens.
   Everything is decorative and aria-hidden; the motion stops entirely under
   prefers-reduced-motion. */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--green); color: #fff; padding: 88px 0;
}
.cta-band__aurora { position: absolute; inset: -10%; z-index: -2; pointer-events: none; filter: blur(64px); }
.cta-band .blob { position: absolute; border-radius: 50%; opacity: .85; will-change: transform; }
.blob--a { width: 46%; padding-top: 46%; background: #a8dcc4; inset-block-start: -12%; inset-inline-start: 2%;  animation: drift-a 26s ease-in-out infinite alternate; }
.blob--b { width: 40%; padding-top: 40%; background: #1d8f6b; inset-block-end: -18%;  inset-inline-start: 22%; animation: drift-b 31s ease-in-out infinite alternate; }
.blob--c { width: 34%; padding-top: 34%; background: #0e1c35; opacity: .34; inset-block-end: -22%; inset-inline-end: -6%; animation: drift-c 34s ease-in-out infinite alternate; }
.blob--d { width: 30%; padding-top: 30%; background: #66d6ae; inset-block-end: -14%; inset-inline-end: 20%; animation: drift-d 29s ease-in-out infinite alternate; }

@keyframes drift-a { to { transform: translate3d(12%, 26%, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(24%, -20%, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(-20%, 22%, 0) scale(1.22); } }
@keyframes drift-d { to { transform: translate3d(-16%, -18%, 0) scale(1.14); } }

/* The same mesh as the hero, so the two ends of the page rhyme. Carrying a
   scrim as well: the blobs drift, so the colour behind the type changes over
   the animation, and without a floor the lede loses contrast at some point in
   the cycle. This guarantees it at every frame. */
.cta-band__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("img/hero-texture.png") repeat,
    linear-gradient(to right, rgba(4, 30, 22, .52) 0%, rgba(4, 30, 22, .30) 44%, rgba(4, 30, 22, 0) 74%);
  opacity: 1;
}
[dir="rtl"] .cta-band__grain {
  background:
    url("img/hero-texture.png") repeat,
    linear-gradient(to left, rgba(4, 30, 22, .52) 0%, rgba(4, 30, 22, .30) 44%, rgba(4, 30, 22, 0) 74%);
}

.cta-band .wrap { position: relative; z-index: 1; }
.cta-band__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px 64px; align-items: end;
}
.cta-band h2 {
  color: #fff; margin: 0 0 16px;
  font-size: clamp(34px, 4vw, 56px); line-height: 1.08; letter-spacing: -.02em;
  text-shadow: 0 1px 24px rgba(6, 32, 24, .18);
}
.cta-band p { color: #fff; margin: 0; max-width: 48ch; font-size: 17.5px; line-height: 1.6; text-shadow: 0 1px 14px rgba(6, 32, 24, .3); }
.eyebrow--on-green { color: rgba(255, 255, 255, .85); }

.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cta-band .btn { height: 58px; padding: 0 32px; display: inline-flex; align-items: center; font-size: 16px; }
.cta-band .btn--primary {
  background: var(--navy); color: #fff; border-color: var(--navy);
  box-shadow: 0 10px 30px rgba(8, 18, 39, .28);
  transition: transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease), background var(--motion-duration) var(--motion-ease);
}
.cta-band .btn--primary:hover { background: #16294a; transform: translateY(-2px); box-shadow: 0 16px 38px rgba(8, 18, 39, .34); }
.btn--onGreen {
  background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(6px); transition: background var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease);
}
.btn--onGreen:hover { background: rgba(255,255,255,.2); border-color: #fff; }

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

@media (max-width: 900px) {
  .cta-band { padding: 64px 0; }
  .cta-band__grid { grid-template-columns: 1fr; align-items: start; }
}

/* ---- form -------------------------------------------------------------- */
.form { display: grid; gap: 20px; }
.field label { display: block; font-family: var(--f-ui), var(--f-fallback); font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); outline: none; }
.field .hint { font-size: 14px; color: var(--steel); margin-top: 6px; }
.field .err { font-size: 14px; color: #c0424c; margin-top: 6px; display: none; }
.field[data-invalid] .err { display: block; }
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border-color: #c0424c; }
.consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 20px; font-size: 15px; color: var(--slate);
}
.consent input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; }
.form__ok { display: none; border: 1.5px solid var(--green); border-radius: var(--r); padding: 26px; background: #f2fbf7; }
.form__ok[data-shown] { display: block; }

/* ---- footer ------------------------------------------------------------ */
.site-footer { background: var(--navy); color: var(--light); padding: 64px 0 40px; font-size: 15px; }
.site-footer a { color: var(--light); text-decoration: none; }
.site-footer a:hover { color: var(--green); }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 40px; margin-bottom: 44px; }
.site-footer h2 { font-family: var(--f-nav), var(--f-fallback); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer__base { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 42px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; color: var(--muted); }

/* ---- breadcrumbs ------------------------------------------------------- */
.crumbs { font-size: 14px; color: var(--steel); padding: 18px 0 0; }
.crumbs a { color: var(--steel); }

/* ---- rtl --------------------------------------------------------------- */
[dir="rtl"] .callout { border-inline-start: 4px solid var(--green); }
[dir="rtl"] .nav { margin-inline-start: auto; }

/* ---- narrow ------------------------------------------------------------ */
@media (max-width: 900px) {
  :root {
    --space-section: 64px;
    --space-head: 36px;
    --space-grid: 20px;
  }
  .hero__grid, .grid--2, .grid--3, .fit, .site-footer__grid, .service-directory__list, .steps--flow { grid-template-columns: minmax(0, 1fr); }
  .service-index__link { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.2fr); }
  .service-index__action { grid-column: 3; justify-self: start; margin: 0; }
  .cause-system-layout { grid-template-columns: 1fr; }
  .cause-system-band .section__head { max-width: 600px; }
  .nav { display: none; }
  .nav[data-open] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
    position: absolute; inset-inline: 0; top: 100%; background: #fff;
    border-bottom: 1px solid var(--line); padding: 22px;
  }
  .site-header__in { position: relative; }
  .nav-toggle { display: block; }
  .section { padding: var(--section-y) 0; }
  .hero { padding: 62px 0 58px; }
  .steps--flow { gap: 20px; }
  .steps--flow::before, .steps--flow::after { inset-inline-start: 26px; inset-inline-end: auto; inset-block: 34px 26px; width: 2px; height: auto; }
  .steps--flow::after { transform: scaleY(.04); transform-origin: top; }
  .steps--flow[data-active]::after { transform: scaleY(1); }
  .steps--flow li { padding: 0; padding-inline-start: 70px; }
}

@media (max-width: 620px) {
  :root {
    --space-section: 56px;
    --space-head: 32px;
  }
  .service-index__link { grid-template-columns: 24px minmax(0, 1fr); padding-block: var(--space-2); }
  .service-index__title { font-size: 25px; }
  .service-index__body { grid-column: 2; font-size: 16px; }
  .service-index__action { grid-column: 2; font-size: 13px; }
  .cause-system { grid-template-columns: 1fr; row-gap: var(--space-4); padding-inline-start: var(--space-4); }
  .cause-system::before { inset-inline-start: 0; }
  .cause-system__item:nth-child(n)::before { inset-inline-start: calc(-1 * var(--space-4)); inset-inline-end: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---- homepage sections --------------------------------------------------- */

/* Full-bleed video hero. The wash is what keeps the headline readable while
   the footage changes underneath it. */
/* Matches the production hero exactly. It is not a gradient: the section is
   solid navy and the video itself plays at 55% opacity over it, which is why
   the live hero reads as one even, muted field rather than a wash that is dark
   on one side. Measured off kendoo.co: rgb(14,28,53) behind, opacity .55. */
/* Matches the production hero exactly, in both look and scroll behaviour.
   It is not a gradient: the section is solid navy and the video plays at 55%
   opacity over it, which is why the live hero reads as one even, muted field.
   And the video is pinned while the hero scrolls over it. Measured on
   kendoo.co: at scrollY 500 the video is still at viewport y=0.
   Sticky rather than fixed, so it releases on its own at the end of the hero
   instead of showing through the sections below. */
.hero--video {
  position: relative; display: block; padding: 0;
  background: var(--navy); min-height: 1020px;
}
/* 1020px, not 100vh: on the live site the video is 1020 tall and the viewport
   is not, so it overhangs the fold. Sticky at top:0 with the hero the same
   height means it never moves for the whole hero. */
.hero__media {
  position: sticky; top: 0; height: 1020px; overflow: hidden;
  margin-bottom: -1020px; z-index: 0;
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; opacity: .55;
}
/* The live hero carries a fine mesh over the footage: a 6x6 RGBA tile,
   repeated. It is most of why the production hero reads as a treated surface
   rather than a video with the opacity turned down. */
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("img/hero-texture.png") repeat;
}
.hero__inner { position: relative; z-index: 2; padding: 96px 0; }

/* Hero geometry, measured off kendoo.co at 1440x900 and matched exactly:
   content inset 72px from the edge rather than sitting in the 1120px grid,
   h1 at y=236 in 80px/1.2, lede at y=459 in 30px/1.2, button at y=618 at
   274x55. Both are set in --light rather than pure white. */
.hero--video .hero__inner {
  max-width: none; margin: 0;
  padding: 236px 72px 0; min-height: 1020px;
}
/* Greedy wrapping, not balanced: the live headline breaks after "and", and
   text-wrap:balance evens the two lines instead, which reads as a different
   headline even at identical size and position. */
.hero--video .hero__inner > h1 {
  margin: 0; font-size: 80px; line-height: 1.2;
  letter-spacing: normal; color: var(--light);
  max-width: 846px; text-wrap: wrap;
}
.hero--video .hero__inner > .lede {
  margin: 31px 0 0; font-size: 30px; line-height: 1.2;
  color: var(--light); max-width: 826px;
}
.hero--video .btn-row { margin-top: 51px; }
.hero--video .btn-row .btn {
  width: 274px; height: 55px; padding: 0; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--light);
}
.hero__inner > h1, .hero__inner > .lede { max-width: 860px; }
.lede--on-dark { color: rgba(255,255,255,.93); }
.eyebrow--on-dark { color: var(--green); }
.btn--ondark { border: 1px solid rgba(255,255,255,.45); color: #fff; background: transparent; }
.btn--ondark:hover { background: rgba(255,255,255,.12); }

@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }

/* Founder */
/* The portrait is a cut-out that ends at the waist, so floating it mid-section
   read as a crop. Anchored to the section's bottom edge instead, pulled down by
   exactly the section padding, it reads as deliberate. The negative margin also
   keeps it out of the row height, so the section does not grow. */
.founder { display: grid; grid-template-columns: 400px 1fr; gap: 64px; align-items: end; }
/* Positioned rather than pulled with a negative margin: the figure fills the
   grid row, whose bottom is the section's content edge, and the portrait is
   offset below it by exactly the section padding. That lands flush every time,
   where the margin approach was 22px out and depended on how the row resolved. */
.founder__photo { position: relative; align-self: stretch; min-height: 260px; }
.founder__photo img {
  position: absolute; inset-inline: 0;
  bottom: calc(var(--section-y) * -1);
  width: 100%; height: auto;
}
.founder__photo img { display: block; width: 100%; height: auto; }
.founder__role { font-family: var(--f-nav), var(--f-fallback); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin: -6px 0 18px; }
/* A trailing margin on the last element pushed the row 22px past the grid box,
   which threw the portrait's alignment off by the same amount. */
.founder__body > :last-child { margin-bottom: 0; }

/* Client logos */
.section--slim { padding: 52px 0; }
.logos__title { font-family: var(--f-nav), var(--f-fallback); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); text-align: center; margin: 0 0 18px; }
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 48px; }
.logos img { display: block; height: 34px; width: auto; opacity: .9; }

.pitch > p { margin-bottom: 16px; }
.pitch .btn { margin-top: 10px; }

@media (max-width: 1180px) { .hero--video { min-height: 820px; } }
@media (max-width: 860px) {
  .section { --section-y: var(--space-section); }
  .section--slim { padding: 44px 0; }
  .cta-band { padding: 64px 0; }
  .founder { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .founder__photo { max-width: 280px; align-self: start; min-height: 0; }
  .founder__photo img { position: static; bottom: auto; }
  .hero__inner { padding: 64px 0; }
  .hero--video { min-height: 620px; }
}

[dir="rtl"] .post__link h3, [dir="rtl"] .post__excerpt { text-align: left; }

/* ---- blog ---------------------------------------------------------------- */

/* The homepage module is a dark band: one piece runs as a cover with its
   headline set over the image, the rest as a dated contents list beside it.
   The contrast between the single large image and the quiet typographic list
   is the whole idea; making all four equal cards is what made it forgettable. */
.blogband { position: relative; overflow: hidden; background: #0a1428; color: #e8eef7; }
.blogband__glow {
  position: absolute; inset-block-start: -220px; inset-inline-end: -180px;
  width: 720px; height: 720px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(65,187,147,.20) 0%, rgba(65,187,147,.07) 42%, transparent 70%);
}
.blogband .wrap { position: relative; z-index: 1; }
.blogband h2 { color: #fff; }
.blogband .lede { color: #becddd; }
.blogband .eyebrow { color: var(--green); }

/* .section__head caps at 62ch for readability; the split head is two columns
   across the full measure, so it opts out of that cap. */
.section__head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px 64px; align-items: end; }
/* --f-lede is an ExtraLight face. It carries a 26px hero line beautifully and
   turns to grey mist at section-head sizes, so every standfirst below the hero
   uses the regular UI face instead. */
.section__head .lede {
  font-family: var(--f-ui), var(--f-fallback);
  font-size: 18px; line-height: 1.6; color: var(--slate);
}
.section__head--split .lede { margin: 0 0 6px; font-size: 17px; max-width: 46ch; }

.chip {
  display: inline-block; align-self: start;
  font-family: var(--f-nav), var(--f-fallback); font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--green-d); background: rgba(65,187,147,.12);
  padding: 5px 10px; border-radius: 100px;
}
.blogband .chip, .post--cover .chip { color: #062a20; background: var(--green); }

.post__link { display: block; text-decoration: none; color: inherit; }
.post__thumb, .post__frame {
  display: block; overflow: hidden; background: #10203c;
  position: relative; border-radius: var(--r);
}
/* All post imagery uses a radius rather than the mask. The mask is a
   superellipse stretched to its element, so on a 4:3 box the corners distort,
   and the bigger the thumbnail the more obvious that is. corner-shape gives
   the same look without the distortion. */
.post__thumb img, .post__frame img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--motion-duration) var(--motion-ease);
}
.post__link:hover .post__thumb img, .post__link:hover .post__frame img { transform: scale(1.05); }
.post__meta {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-nav), var(--f-fallback); font-size: 12.5px; color: var(--steel);
  font-variant-numeric: tabular-nums;
}
.post__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

/* Cover */
.postfeature { display: grid; grid-template-columns: 1fr 1.06fr; gap: 40px; align-items: stretch; }
.post--cover .post__link { display: block; height: 100%; }
.post--cover .post__frame { height: 100%; min-height: 420px; }
/* Two washes: the heavy one carries the headline, the light one at the top
   stops a white-background illustration floating clear of the dark band. */
.post__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(4,10,22,.95) 0%, rgba(4,10,22,.72) 34%, rgba(4,10,22,.14) 66%, rgba(4,10,22,0) 100%),
    linear-gradient(to bottom, rgba(4,10,22,.28) 0%, rgba(4,10,22,0) 34%);
}
.post__over {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: flex; flex-direction: column; align-items: start; gap: 14px;
  padding: 30px 32px 30px;
}
.post--cover h3 {
  margin: 0; color: #fff;
  font-family: var(--f-display), var(--f-fallback); font-size: 30px; font-weight: 700; line-height: 1.18;
  text-wrap: balance;
}
.post--cover .post__meta { color: #a9bcd2; }
.post--cover .post__link:hover h3 { color: var(--mint); }

/* Contents rail */
.postfeature__rail { display: flex; flex-direction: column; }
.post--row { display: flex; flex: 1; }
.post--row + .post--row { border-top: 1px solid rgba(255,255,255,.13); }
.post--row .post__link {
  width: 100%; display: grid; gap: 4px 22px; align-items: center; padding: 24px 0;
  grid-template-columns: 58px 168px minmax(0, 1fr);
}
.post__when {
  font-family: var(--f-nav), var(--f-fallback); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--green);
  font-variant-numeric: tabular-nums; align-self: center;
}
.post--row .post__thumb { aspect-ratio: 4 / 3; }
.post--row .post__body { display: flex; flex-direction: column; align-items: start; gap: 7px; }
.post--row h3 {
  margin: 0; color: #fff;
  font-family: var(--f-ui), var(--f-fallback); font-size: 16.5px; font-weight: 700; line-height: 1.34;
}
.post--row .post__link:hover h3 { color: var(--mint); }
.post--row .post__meta { color: #7f93ac; font-size: 12px; }

/* Archive grid, on light */
.postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.post--card .post__link { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.post--card .post__thumb { aspect-ratio: 4 / 3; }
.post--card .post__body { display: flex; flex-direction: column; align-items: start; gap: 11px; flex: 1; }
.post--card h3 { margin: 0; color: var(--navy); font-family: var(--f-ui), var(--f-fallback); font-size: 18px; line-height: 1.32; }
.post--card .post__link:hover h3 { color: var(--green-d); }
.post--card .post__excerpt {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--slate); font-size: 15px; line-height: 1.55;
}
.post--card .post__meta { margin-top: auto; padding-top: 4px; }

.posts__more { margin: 36px 0 0; }
.blogband .posts__more { text-align: start; }
.arrowlink {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--f-ui), var(--f-fallback); font-size: 16px; font-weight: 700; color: var(--green);
  border-bottom: 1px solid rgba(65,187,147,.4); padding-bottom: 5px;
}
.arrowlink:hover { color: #fff; border-bottom-color: #fff; }
.arrowlink__a { transition: transform var(--motion-duration) var(--motion-ease); }
[dir="rtl"] .arrowlink__a { transform: scaleX(-1); }
.arrowlink:hover .arrowlink__a { transform: translateX(4px); }
[dir="rtl"] .arrowlink:hover .arrowlink__a { transform: scaleX(-1) translateX(4px); }

/* English titles on the Hebrew pages carry dir="ltr" so their punctuation
   stays put; the alignment still follows the page. */
[dir="rtl"] .post__link h3, [dir="rtl"] .post__excerpt { text-align: right; }

@media (max-width: 1000px) {
  .section__head--split { grid-template-columns: 1fr; align-items: start; }
  .postfeature { grid-template-columns: 1fr; gap: 32px; }
  .post--cover .post__frame { min-height: 340px; }
  .postgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .postgrid { grid-template-columns: 1fr; }
  .post--cover h3 { font-size: 23px; }
  .post__over { padding: 22px 20px; }
  .post--row .post__link { grid-template-columns: 52px 104px minmax(0, 1fr); gap: 4px 14px; }
}

/* ---- scroll reveal ------------------------------------------------------- */
/* The hidden state is applied by src/js/reveal.js and never by the stylesheet
   alone, so the page is fully readable if that script never runs. */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
  will-change: opacity, transform;
}
.reveal-on .reveal.is-in { opacity: 1; transform: none; }
.reveal-on .no-anim { opacity: 1; transform: none; transition: none; }

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

/* ---- header over a video hero -------------------------------------------- */
/* On kendoo.co the nav is transparent and the video runs behind it, so the
   hero fills the top of the page. Measured on the live site: header background
   rgba(0,0,0,0), video top y=0. A solid bar above the video reads as a
   different hero even when the overlay underneath is identical. */
/* On the live site the nav is transparent over the video and scrolls away with
   the page rather than sticking. Matching that: position absolute, so the video
   runs behind it and it leaves with the hero. */
body[data-hero="video"] .site-header {
  position: absolute; inset-inline: 0; top: 0;
  background: transparent; border-bottom-color: transparent;
}
body[data-hero="video"] .site-header .nav a,
body[data-hero="video"] .site-header .nav-toggle { color: #fff; }
body[data-hero="video"] .site-header .nav a:hover,
body[data-hero="video"] .site-header .nav a[aria-current="page"] { color: var(--mint); }

/* Once the hero has scrolled past, the bar comes back so the nav stays
   readable over ordinary page content. Added by src/js/reveal.js. */
body[data-hero="video"] .site-header.is-solid {
  position: fixed; inset-inline: 0; top: 0;
  background: #fff; border-bottom-color: var(--line);
  box-shadow: 0 1px 14px rgba(14, 28, 53, .07);
}
body[data-hero="video"] .site-header.is-solid .nav a,
body[data-hero="video"] .site-header.is-solid .nav-toggle { color: var(--ink); }
body[data-hero="video"] .site-header.is-solid .nav a:hover,
body[data-hero="video"] .site-header.is-solid .nav a[aria-current="page"] { color: var(--green-d); }

/* The nav button on the live site is the navy one, not the green one: the
   green is reserved for the hero and the closing band, so the header does not
   compete with the page's primary action. Measured on kendoo.co:
   background rgb(14,28,53), 1px border rgb(240,244,250). */
/* Scoped past `.nav a`, which is more specific than a bare `.btn--meet` and
   was repainting the label in body ink on a navy button. That is unreadable,
   and it was only invisible on the homepage because the transparent-header
   rules happened to force white there. */
.site-header .nav a.btn--meet {
  background: var(--navy); color: #fff; border: 1px solid var(--light);
}
.site-header .nav a.btn--meet:hover {
  background: #16294a; border-color: #fff; color: #fff;
}
/* The live site keeps the same solid light edge over the video, so there is no
   separate treatment for the transparent header. */

/* The hero geometry above is the production desktop layout, in fixed pixels.
   Below desktop those fixed values overflow, so the whole block scales down.
   The live site avoids this by serving a separate mobile document. */
@media (max-width: 1100px) {
  .hero--video { min-height: 780px; }
  .hero__media { height: 780px; margin-bottom: -780px; }
  .hero--video .hero__inner { padding: 168px 40px 0; min-height: 780px; }
  .hero--video .hero__inner > h1 { font-size: clamp(38px, 6.2vw, 80px); max-width: 100%; }
  .hero--video .hero__inner > .lede { font-size: clamp(19px, 2.4vw, 30px); margin-top: 24px; max-width: 100%; }
  .hero--video .btn-row { margin-top: 36px; }
}
@media (max-width: 640px) {
  .hero--video { min-height: 620px; }
  .hero__media { height: 620px; margin-bottom: -620px; }
  .hero--video .hero__inner { padding: 128px 22px 0; min-height: 620px; }
  .hero--video .btn-row .btn { width: 100%; max-width: 274px; }
}

/* ---- About: editorial profile -------------------------------------------- */

/* The page argues you are buying one person's judgement, so the person is the
   hero rather than a bulleted background card. */
/* Block, not flex: .wrap centres itself with auto margins, and making this a
   flex container stretched it to full width so the headline sat on the
   viewport edge. The grid inside handles the bottom alignment. */
.portrait {
  position: relative; overflow: hidden;
  background: var(--navy); color: var(--light);
  padding: 150px 0 0; min-height: 660px;
}
.portrait__glow {
  position: absolute; inset-block-start: -180px; inset-inline-end: 6%;
  width: 760px; height: 760px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(65,187,147,.20) 0%, rgba(65,187,147,.06) 45%, transparent 70%);
}
.portrait .wrap { position: relative; z-index: 1; }
.portrait__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end;
}
.portrait__text { padding-bottom: 132px; }
.portrait h1 {
  color: #fff; font-size: clamp(40px, 4.6vw, 68px); line-height: 1.08;
  letter-spacing: -.02em; margin: 0 0 22px;
}
.portrait .lede { max-width: 30ch; margin-bottom: 34px; }

.portrait__figure { margin: 0; position: relative; align-self: end; }
.portrait__figure img {
  display: block; width: 100%; max-width: 620px; height: auto;
  margin-inline-start: auto; margin-bottom: -6px;
  /* lifts the cut-out off the navy so it does not read as a pasted sticker */
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.5));
}
.portrait__figure figcaption {
  position: absolute; inset-block-end: 34px; inset-inline-start: 0;
  font-family: var(--f-nav), var(--f-fallback); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green);
  background: rgba(8,18,39,.72); padding: 9px 14px; border-radius: 100px;
  backdrop-filter: blur(6px);
}

/* A section heading introduces the collection; each article has one title,
   followed by a secondary takeaway and consistently labelled narrative. */
.patternlist { display: grid; gap: var(--space-section); }
.pattern {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-areas: "heading heading" "art body";
  gap: var(--space-5) var(--space-6);
  align-items: start;
}
/* One measured section interval, with the divider halfway through it. */
.pattern + .pattern::before {
  content: ""; position: absolute; inset-inline: 0;
  top: calc(var(--space-section) / -2); border-top: 1px solid var(--line);
}
.pattern__heading { grid-area: heading; max-width: 760px; }
.pattern__meta {
  margin: 0 0 var(--space-2); color: var(--slate);
  font-family: var(--f-ui), var(--f-fallback); font-size: 13px; line-height: 1.5;
}
.pattern__heading h3 { margin: 0; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.25; text-wrap: pretty; }
.pattern__stat { grid-area: art; display: grid; justify-items: start; gap: var(--space-4); }
.pattern__body { grid-area: body; max-width: 62ch; }
.pattern--reverse {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "heading heading" "body art";
}
.pattern__illo {
  display: block; width: 100%; height: auto;
  border-radius: var(--r); background: var(--navy);
}
.pattern__takeaway { border-inline-start: 2px solid var(--green); padding-inline-start: var(--space-3); }
.pattern__takeaway p { margin: 0; font-family: var(--f-ui), var(--f-fallback); font-size: 18px; line-height: 1.6; color: var(--slate); }
.pattern__takeaway .pattern__label { margin-bottom: var(--space-1); font-size: 13px; color: var(--navy); }
.pattern__narrative { display: grid; gap: var(--space-4); margin: 0; }
.pattern__narrative dt { font-family: var(--f-ui), var(--f-fallback); font-size: 16px; font-weight: 700; color: var(--navy); }
.pattern__narrative dd { margin: var(--space-1) 0 0; color: var(--slate); }
.pattern__more { margin-top: var(--space-5); }
.pattern__more summary {
  font-family: var(--f-ui), var(--f-fallback); font-size: 14px; font-weight: 700;
  color: var(--green-d); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--space-1);
}
.pattern__more summary::-webkit-details-marker { display: none; }
.pattern__more dl { margin: var(--space-4) 0 0; display: grid; gap: var(--space-4); }
.pattern__more dt { font-family: var(--f-nav), var(--f-fallback); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.pattern__more dd { margin: var(--space-1) 0 0; color: var(--slate); }
.patternlist + .engagements__note { margin-top: var(--space-6); }

/* A lead sentence at display size, its argument beside it. */
.statement { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 64px; align-items: start; }
.statement__lead h2 { margin: 0 0 20px; }
.statement__quote {
  margin: 0; font-family: var(--f-heading), var(--f-fallback); font-weight: 700;
  font-size: clamp(22px, 2.3vw, 29px); line-height: 1.3; color: var(--navy);
  border-inline-start: 3px solid var(--green); padding-inline-start: 22px;
}
.statement__body p { margin-bottom: 17px; }
.statement__body p:last-child { margin-bottom: 0; }

/* Hairline rows, not a grid of boxes. */
.principles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.principle {
  display: grid; grid-template-columns: 46px 300px minmax(0, 1fr); gap: 26px;
  align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line);
}
.principle .icon-tile { width: 46px; height: 46px; margin-bottom: 0; }
/* The title and the first line of the description sit on the icon's centre
   line (46px tile; 17px/1.65 body text is a 28px line, so 9px of lead). */
.principle h3 { margin: 0; font-size: 19px; line-height: 1.3; min-height: 46px; display: flex; align-items: center; }
.principle p { margin: 0; padding-top: 9px; color: var(--slate); }

/* A genuine comparison. */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-grid); }
.contrast__col { border: 1px solid var(--line); border-radius: var(--r); padding: 30px 32px; }
.contrast__col h3 {
  margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
  font-family: var(--f-nav), var(--f-fallback); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--steel);
}
.contrast__col--ours { border-color: var(--green); background: rgba(65,187,147,.05); }
.contrast__col--ours h3 { color: var(--green-d); border-bottom-color: rgba(65,187,147,.35); }
.contrast__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.contrast__col li { padding-inline-start: 22px; position: relative; color: var(--slate); }
.contrast__col li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
}
.contrast__col--ours li::before { background: var(--green); }
.contrast__note { margin: 26px 0 0; color: var(--slate); max-width: 70ch; }

.audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
/* Each column spans the same two rows (title, body) so the three titles share
   one row: their green rules sit on one line and the bodies start together,
   however many lines a title wraps to. */
.audience__col { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; }
.audience__col h3 {
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--green);
  justify-self: start; align-self: end; font-size: 19px;
}
.audience__col p { margin-bottom: 15px; }
.audience__note {
  margin: 44px 0 0; padding: 22px 26px; border-inline-start: 3px solid var(--green);
  background: #fff; color: var(--slate); max-width: 76ch;
}

/* auto-fit rather than a fixed three, so adding or removing a fact does not
   leave a stray item hanging under the first column */
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px 0; }
.fact { padding: 4px 28px; border-inline-start: 1px solid var(--line); }
.fact:first-child { border-inline-start: 0; padding-inline-start: 0; }
.fact dt {
  font-family: var(--f-nav), var(--f-fallback); font-size: 11.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--steel); margin-bottom: 7px;
}
.fact dd { margin: 0; color: var(--slate); font-size: 15px; }
.fact dd a { color: var(--green-d); }

@media (max-width: 980px) {
  .portrait { padding-top: 96px; }
  .portrait__grid { grid-template-columns: 1fr; gap: 0; }
  .portrait__text { padding-bottom: 40px; }
  .portrait__figure img { max-width: 340px; margin-inline: auto; }
  .portrait__figure figcaption { inset-block-end: 12px; }
  .statement, .contrast { grid-template-columns: 1fr; gap: 28px; }
  .pattern, .pattern--reverse {
    grid-template-columns: 1fr;
    grid-template-areas: "heading" "art" "body";
    gap: var(--space-5);
  }
  .audience { grid-template-columns: 1fr; gap: 28px; }
  .principle { grid-template-columns: 46px minmax(0, 1fr); gap: 8px 16px; }
  .principle p { grid-column: 2; padding-top: 0; }
  .facts { grid-template-columns: 1fr; gap: 22px; }
  .fact { border-inline-start: 0; padding-inline: 0; }
}

/* The arrow link also appears on light sections, where the green-on-dark
   treatment has too little contrast. */
.arrowlink--dark { color: var(--green-d); border-bottom-color: rgba(47,156,120,.45); }
.arrowlink--dark:hover { color: var(--navy); border-bottom-color: var(--navy); }

/* ---- photography --------------------------------------------------------- */

/* A still hero borrows the video hero's treatment wholesale, so the pages sit
   in one visual language instead of looking like stock art with type on it. */
/* Photographs run much lighter than the hero footage, so the same 55% over
   navy leaves the eyebrow and the lede unreadable. Lower opacity plus a scrim
   that is heaviest exactly where the type sits. */
.hero--photo { min-height: 640px; }
.hero--photo .hero__video { opacity: .40; }
.hero--photo .hero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(8,18,39,.86) 0%, rgba(8,18,39,.54) 46%, rgba(8,18,39,.22) 100%),
    linear-gradient(to right, rgba(8,18,39,.60) 0%, rgba(8,18,39,.12) 62%, rgba(8,18,39,0) 100%);
}
[dir="rtl"] .hero--photo .hero__media::before {
  background:
    linear-gradient(to top, rgba(8,18,39,.86) 0%, rgba(8,18,39,.54) 46%, rgba(8,18,39,.22) 100%),
    linear-gradient(to left, rgba(8,18,39,.60) 0%, rgba(8,18,39,.12) 62%, rgba(8,18,39,0) 100%);
}
.hero--photo .hero__media { height: 640px; margin-bottom: -640px; }
.hero--photo .hero__inner { padding: 168px 72px 96px; min-height: 640px; }
.hero--photo .hero__inner > h1 { font-size: clamp(38px, 4.4vw, 60px); max-width: 860px; }
.hero--photo .hero__inner > .lede { max-width: 720px; font-size: clamp(19px, 2vw, 24px); margin-top: 22px; }
.hero--photo .btn-row { margin-top: 38px; }
.hero--photo .btn-row .btn { width: auto; padding: 0 28px; }

/* Full-bleed band between sections, to break a long run of text. */
.mediaband { position: relative; margin: 0; overflow: hidden; background: var(--navy); }
.mediaband img { display: block; width: 100%; height: clamp(260px, 34vw, 460px); object-fit: cover; }
/* tone: "dark" gives a photograph the homepage hero treatment: the picture sits
   at reduced opacity over navy with the same fine mesh on top, so it reads as a
   treated surface rather than a bright photo dropped into a dark page. */
.mediaband--dark img { opacity: .48; }
.mediaband--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("img/hero-texture.png") repeat;
}
.mediaband__mark {
  position: absolute; inset-block-start: 20px; inset-inline-start: 20px;
  width: 56px; height: 56px; pointer-events: none;
  filter: drop-shadow(0 1px 4px rgba(6,14,30,.55));
}
[dir="rtl"] .mediaband__mark { transform: scaleX(-1); }
.mediaband figcaption {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: 56px 0 24px;
  background: linear-gradient(to top, rgba(6,14,30,.82), rgba(6,14,30,0));
}
.mediaband figcaption span {
  display: block; width: min(var(--wrap), 100% - 40px); margin-inline: auto;
  color: #fff; font-family: var(--f-nav), var(--f-fallback);
  font-size: 13px; letter-spacing: .06em;
}

/* Real footage from the Kendoo office, treated as an editorial object rather
   than a second hero. The restrained grade and navy wash keep phone footage in
   the same visual family as the site's still photography. */
.brandfilm { overflow: hidden; background: #fff; }
.brandfilm__grid {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  gap: clamp(38px, 6vw, 86px);
  align-items: center;
}
.brandfilm__copy { max-width: 470px; }
.brandfilm__copy h2 { margin: 0 0 18px; }
.brandfilm__copy > p:not(.eyebrow) { margin: 0; color: var(--slate); }
.brandfilm__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 28px 70px rgba(14,28,53,.17);
}
.brandfilm__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.07) brightness(.88);
}
.brandfilm__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(14,28,53,.28), transparent 48%),
    linear-gradient(to top, rgba(14,28,53,.52), transparent 44%);
}
.brandfilm__media figcaption {
  position: absolute;
  inset-inline: 24px;
  inset-block-end: 20px;
  color: #fff;
  font-family: var(--f-nav), var(--f-fallback);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
}

@media (max-width: 820px) {
  .brandfilm__grid { grid-template-columns: 1fr; gap: 28px; }
  .brandfilm__copy { max-width: 620px; }
}

@media (max-width: 1100px) {
  .hero--photo { min-height: 540px; }
  .hero--photo .hero__media { height: 540px; margin-bottom: -540px; }
  .hero--photo .hero__inner { padding: 140px 40px 72px; min-height: 540px; }
}
@media (max-width: 640px) {
  .hero--photo { min-height: 480px; }
  .hero--photo .hero__media { height: 480px; margin-bottom: -480px; }
  .hero--photo .hero__inner { padding: 116px 22px 56px; min-height: 480px; }
}

/* ---- expert network ------------------------------------------------------ */
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.person {
  display: flex; flex-direction: column; gap: 10px;
  padding: 30px 30px 32px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
}
/* Initials rather than a photograph: nobody's portrait is published without
   their say-so, and a placeholder avatar looks worse than a considered mark. */
.person__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(65,187,147,.14); color: var(--green-d);
  font-family: var(--f-nav), var(--f-fallback); font-size: 16px; font-weight: 700;
  letter-spacing: .04em; margin-bottom: 4px;
}
.person h3 { margin: 0; font-size: 19px; }
.person__role {
  margin: 0; font-family: var(--f-nav), var(--f-fallback); font-size: 12px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--steel);
}
.person p { margin: 0; color: var(--slate); }
.section--tint .person { background: #fff; }

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

/* Halftone portraits, generated by tools/halftone.mjs. Dots on the same grid
   idea as the mesh over the hero, so a face belongs to the site rather than
   sitting in it as a photograph. */
.person__face {
  display: block; width: 92px; height: 92px; border-radius: 50%;
  background: rgba(65,187,147,.12); object-fit: cover; margin-bottom: 4px;
}

/* Named specialists on service pages. The image is intentionally larger than
   the network-card portrait, because this is an introduction to the person
   leading the work rather than an index entry. */
.expert-profile {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 650px);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
  justify-content: center;
}
.expert-profile__portrait {
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(65,187,147,.12);
  border-radius: var(--r);
}
.expert-profile__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.expert-profile__body h2 { margin: 0 0 8px; }
.expert-profile__body > p:not(.eyebrow, .expert-profile__role) {
  max-width: 62ch;
  color: var(--slate);
}
.expert-profile__role {
  margin: 0 0 22px;
  color: var(--steel);
  font-family: var(--f-nav), var(--f-fallback);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .expert-profile {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .expert-profile__portrait { width: min(72vw, 300px); }
}


/* ---- squircles ----------------------------------------------------------- */

/* A real superellipse, not a rounded rectangle. Delivered as an SVG mask so it
   works in every current browser; corner-shape is Chrome-only for now and is
   layered on separately below as an enhancement. */
:root { --squircle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M100.00%2C50.00%20L99.99%2C60.37%20L99.96%2C64.21%20L99.90%2C67.08%20L99.82%2C69.45%20L99.72%2C71.52%20L99.60%2C73.36%20L99.45%2C75.03%20L99.28%2C76.56%20L99.09%2C77.99%20L98.87%2C79.32%20L98.63%2C80.57%20L98.37%2C81.75%20L98.09%2C82.86%20L97.78%2C83.92%20L97.44%2C84.92%20L97.09%2C85.88%20L96.71%2C86.79%20L96.30%2C87.65%20L95.87%2C88.48%20L95.41%2C89.27%20L94.92%2C90.02%20L94.41%2C90.74%20L93.87%2C91.43%20L93.31%2C92.09%20L92.71%2C92.71%20L92.09%2C93.31%20L91.43%2C93.87%20L90.74%2C94.41%20L90.02%2C94.92%20L89.27%2C95.41%20L88.48%2C95.87%20L87.65%2C96.30%20L86.79%2C96.71%20L85.88%2C97.09%20L84.92%2C97.44%20L83.92%2C97.78%20L82.86%2C98.09%20L81.75%2C98.37%20L80.57%2C98.63%20L79.32%2C98.87%20L77.99%2C99.09%20L76.56%2C99.28%20L75.03%2C99.45%20L73.36%2C99.60%20L71.52%2C99.72%20L69.45%2C99.82%20L67.08%2C99.90%20L64.21%2C99.96%20L60.37%2C99.99%20L50.00%2C100.00%20L39.63%2C99.99%20L35.79%2C99.96%20L32.92%2C99.90%20L30.55%2C99.82%20L28.48%2C99.72%20L26.64%2C99.60%20L24.97%2C99.45%20L23.44%2C99.28%20L22.01%2C99.09%20L20.68%2C98.87%20L19.43%2C98.63%20L18.25%2C98.37%20L17.14%2C98.09%20L16.08%2C97.78%20L15.08%2C97.44%20L14.12%2C97.09%20L13.21%2C96.71%20L12.35%2C96.30%20L11.52%2C95.87%20L10.73%2C95.41%20L9.98%2C94.92%20L9.26%2C94.41%20L8.57%2C93.87%20L7.91%2C93.31%20L7.29%2C92.71%20L6.69%2C92.09%20L6.13%2C91.43%20L5.59%2C90.74%20L5.08%2C90.02%20L4.59%2C89.27%20L4.13%2C88.48%20L3.70%2C87.65%20L3.29%2C86.79%20L2.91%2C85.88%20L2.56%2C84.92%20L2.22%2C83.92%20L1.91%2C82.86%20L1.63%2C81.75%20L1.37%2C80.57%20L1.13%2C79.32%20L0.91%2C77.99%20L0.72%2C76.56%20L0.55%2C75.03%20L0.40%2C73.36%20L0.28%2C71.52%20L0.18%2C69.45%20L0.10%2C67.08%20L0.04%2C64.21%20L0.01%2C60.37%20L0.00%2C50.00%20L0.01%2C39.63%20L0.04%2C35.79%20L0.10%2C32.92%20L0.18%2C30.55%20L0.28%2C28.48%20L0.40%2C26.64%20L0.55%2C24.97%20L0.72%2C23.44%20L0.91%2C22.01%20L1.13%2C20.68%20L1.37%2C19.43%20L1.63%2C18.25%20L1.91%2C17.14%20L2.22%2C16.08%20L2.56%2C15.08%20L2.91%2C14.12%20L3.29%2C13.21%20L3.70%2C12.35%20L4.13%2C11.52%20L4.59%2C10.73%20L5.08%2C9.98%20L5.59%2C9.26%20L6.13%2C8.57%20L6.69%2C7.91%20L7.29%2C7.29%20L7.91%2C6.69%20L8.57%2C6.13%20L9.26%2C5.59%20L9.98%2C5.08%20L10.73%2C4.59%20L11.52%2C4.13%20L12.35%2C3.70%20L13.21%2C3.29%20L14.12%2C2.91%20L15.08%2C2.56%20L16.08%2C2.22%20L17.14%2C1.91%20L18.25%2C1.63%20L19.43%2C1.37%20L20.68%2C1.13%20L22.01%2C0.91%20L23.44%2C0.72%20L24.97%2C0.55%20L26.64%2C0.40%20L28.48%2C0.28%20L30.55%2C0.18%20L32.92%2C0.10%20L35.79%2C0.04%20L39.63%2C0.01%20L50.00%2C0.00%20L60.37%2C0.01%20L64.21%2C0.04%20L67.08%2C0.10%20L69.45%2C0.18%20L71.52%2C0.28%20L73.36%2C0.40%20L75.03%2C0.55%20L76.56%2C0.72%20L77.99%2C0.91%20L79.32%2C1.13%20L80.57%2C1.37%20L81.75%2C1.63%20L82.86%2C1.91%20L83.92%2C2.22%20L84.92%2C2.56%20L85.88%2C2.91%20L86.79%2C3.29%20L87.65%2C3.70%20L88.48%2C4.13%20L89.27%2C4.59%20L90.02%2C5.08%20L90.74%2C5.59%20L91.43%2C6.13%20L92.09%2C6.69%20L92.71%2C7.29%20L93.31%2C7.91%20L93.87%2C8.57%20L94.41%2C9.26%20L94.92%2C9.98%20L95.41%2C10.73%20L95.87%2C11.52%20L96.30%2C12.35%20L96.71%2C13.21%20L97.09%2C14.12%20L97.44%2C15.08%20L97.78%2C16.08%20L98.09%2C17.14%20L98.37%2C18.25%20L98.63%2C19.43%20L98.87%2C20.68%20L99.09%2C22.01%20L99.28%2C23.44%20L99.45%2C24.97%20L99.60%2C26.64%20L99.72%2C28.48%20L99.82%2C30.55%20L99.90%2C32.92%20L99.96%2C35.79%20L99.99%2C39.63%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

.squircle,
.person__face,
.expert-profile__portrait {
  border-radius: 0;
  -webkit-mask-image: var(--squircle);
  mask-image: var(--squircle);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Everything that was a rounded rectangle becomes a squircle where the browser
   can draw one. The border-radius stays as the fallback, so this is additive
   and nothing regresses without it. */
@supports (corner-shape: squircle) {
  .card, .contrast__col, .person, .post__link, .post__frame, .post__thumb, .railcard,
  .triggers__figure,
  .hero__card, .fit__col, .case, .form__ok, .mediaband, .founder__photo,
  .audience__note {
    corner-shape: squircle;
  }
  /* A squircle only reads as one when the corner is a real fraction of the
     element. At 12px it is indistinguishable from a plain radius; at 20 the
     flatter shoulder is obvious. */
  :root { --r: 20px; }
  .chip { border-radius: 100px; }
}

/* ---- triggers ------------------------------------------------------------ */
/* A composition rather than a list: a tall photograph beside the statements.
   Eight short lines set on their own read as something to tick off no matter
   how they are styled, so the section needed an anchor, not more decoration. */
.triggers-band {
  position: relative; overflow: hidden;
  background: var(--light); border-block: 1px solid #dde5f0;
}
.triggers-band .wrap { position: relative; z-index: 1; }
.triggers-band .section__head { max-width: 58ch; }
.triggers-band__glow {
  position: absolute; inset-block-start: -45%; inset-inline-end: -12%;
  width: 700px; height: 700px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(65,187,147,.18) 0%, rgba(65,187,147,.05) 45%, transparent 70%);
}

.triggers-grid {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 48px; align-items: start;
}
/* The statements set the height and the photograph fills whatever that is, so
   the two columns finish level whether a page lists six situations or eight.
   The image is taken out of flow to do it: left in flow its own intrinsic size
   drives the grid row, and a short list still produced a 634px picture. */
.triggers__figure {
  margin: 0; align-self: stretch; position: relative;
  min-height: 420px; border-radius: var(--r); overflow: hidden;
  box-shadow: 0 24px 60px rgba(14, 28, 53, .16);
}
.triggers__figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.triggers { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.trigger {
  position: relative; padding-inline-start: 30px;
  font-family: var(--f-ui), var(--f-fallback);
  font-size: clamp(18px, 1.6vw, 21px); line-height: 1.4;
  color: var(--navy); text-wrap: pretty;
}
.trigger::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .58em;
  width: 9px; height: 9px; border-radius: 3px; background: var(--green);
}

.section--dark .triggers-band { background: transparent; }
.section--dark .trigger { color: #fff; }

@media (max-width: 980px) {
  .triggers-grid { grid-template-columns: 1fr; gap: 28px; }
  .triggers__figure { max-width: 460px; min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---- strategy-call page -------------------------------------------------- */
.meeting-page {
  padding-block: clamp(72px, 8vw, 118px);
  background: #f6f7f8;
}
.meeting-page__grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(560px, 1.28fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.meeting-page__intro {
  position: sticky;
  top: 128px;
  padding-top: 26px;
}
.meeting-page .section__head { max-width: 560px; margin: 0; }
.meeting-page .section__head h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.meeting-page .section__head .lede {
  margin-top: var(--space-3);
  color: var(--slate);
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.65;
}
.meeting-page__details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  list-style: none;
  margin: var(--space-4) 0 var(--space-3);
  padding: 0;
  color: var(--navy);
  font: 600 14px/1.5 var(--f-ui), var(--f-fallback);
}
.meeting-page__details li { padding-inline: 14px; }
.meeting-page__details li:first-child { padding-inline-start: 0; }
.meeting-page__details li + li { border-inline-start: 1px solid #cdd3da; }
.meeting-page__note {
  max-width: 45ch;
  margin: 0;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.6;
}
.meeting-page__calendar {
  overflow: hidden;
  border: 1px solid rgba(5, 10, 50, .09);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(5, 10, 50, .11);
}

.conversationhero {
  position: relative; padding-block: var(--space-section);
  background: #f6f7f8; color: var(--navy); text-align: center;
}
.conversationhero__copy { max-width: 820px; margin-inline: auto; }
.conversationhero .eyebrow { margin: 0 0 var(--space-2); color: var(--slate); }
.conversationhero__copy h1 {
  margin: 0; color: var(--navy);
  font-size: clamp(40px, 5vw, 72px); line-height: 1.08; letter-spacing: -.035em;
}
.conversationhero .headline-accent { display: block; }
.conversationhero__copy .lede {
  max-width: 52ch; margin: var(--space-3) auto var(--space-4);
  color: var(--slate); font-family: var(--f-ui), var(--f-fallback);
  font-size: clamp(19px, 1.6vw, 22px); line-height: 1.6;
}
.conversationhero__details {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0;
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  color: var(--slate); font: 400 14px/1.6 var(--f-ui), var(--f-fallback);
}
.conversationhero__details li { padding-inline: 16px; }
.conversationhero__details li + li { border-inline-start: 1px solid #cdd3da; }

.formjourney {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none; margin: 0 0 var(--space-4); padding: 0 0 var(--space-3);
  gap: var(--space-5); border-bottom: 1px solid var(--line);
}
.formjourney li { display: flex; align-items: baseline; gap: var(--space-3); }
.formjourney li > span {
  flex: none; color: var(--green-btn);
  font: 400 14px/1.5 var(--f-ui), var(--f-fallback); font-variant-numeric: tabular-nums;
}
.formjourney h2 { margin: 0 0 var(--space-1); font: 700 18px/1.4 var(--f-ui), var(--f-fallback); }
.formjourney p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.5; }

/* The short form sits beside a fit note and the outcome of the conversation. */
.formpage__grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 56px; align-items: start;
}
.formpage__main { min-width: 0; }

.form { display: grid; gap: 0; }
.form__group { border: 0; padding: 0; margin: 0 0 32px; min-width: 0; }
.form__group legend {
  display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 18px;
  font-family: var(--f-ui), var(--f-fallback); font-size: 19px; font-weight: 700; color: var(--navy);
}
/* Numbered because the two sets are a sequence: who you are, then what is
   happening. It tells the reader how much is left. */
.form__step {
  flex: none; color: var(--green-btn);
  font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums;
}
.form__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { grid-column: 1 / -1; }
.field--half { grid-column: span 1; }

.field label { display: block; font-family: var(--f-ui), var(--f-fallback); font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--navy); }
.field .req { color: var(--green-d); }
.field input, .field select, .field textarea { padding: 14px 16px; font-size: 16px; }
.field select {
  appearance: none;
  padding-inline-end: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23475266' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}
[dir="rtl"] .field select { background-position: left 16px center; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green); outline: 3px solid rgba(65,187,147,.22); outline-offset: 0;
}
.btn--wide { width: 100%; max-width: 340px; justify-content: center; }

/* The rail */
.formpage__rail { position: sticky; top: 128px; display: grid; gap: var(--space-4); }
.railcard {
  padding: 0; background: transparent;
}
.railcard h3 {
  margin: 0 0 var(--space-3); font-family: var(--f-ui), var(--f-fallback);
  font-size: 20px; font-weight: 700; color: var(--navy);
}
.railcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.railcard li { position: relative; padding-inline-start: 20px; color: var(--slate); line-height: 1.6; }
.railcard li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .52em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--green-btn);
}
.railcard--note { padding-top: var(--space-3); border-top: 1px solid var(--line); }
.railcard--note p { margin: 0; color: var(--slate); font-size: 15.5px; line-height: 1.6; }

@media (max-width: 1000px) {
  .meeting-page__grid { grid-template-columns: 1fr; }
  .meeting-page__intro { position: static; padding-top: 0; }
  .meeting-page .section__head { max-width: 720px; }
  .formpage__grid { grid-template-columns: 1fr; gap: 36px; }
  .formpage__rail { position: static; }
}
@media (max-width: 620px) {
  .meeting-page { padding-block: 56px; }
  .meeting-page__grid { gap: 32px; }
  .meeting-page__calendar { margin-inline: -12px; border-radius: 12px; }
  .conversationhero__details li { padding-inline: 12px; }
  .conversationhero__details li:last-child { flex-basis: 100%; border: 0; }
  .formjourney { grid-template-columns: 1fr; gap: var(--space-4); }
  .form__rows { grid-template-columns: 1fr; }
  .field--half { grid-column: 1 / -1; }
}

/* ---- blog article ---------------------------------------------------------- */
/* One column at --narrow. The cover is the only full-width element; the body
   is the site's prose with the extra blocks Markdown produces. */
.article { padding-top: 56px; }
.article__head { margin-bottom: 28px; }
.article__head .eyebrow { margin-bottom: 18px; }
.article__head h1 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 16px; }
.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0;
  font-family: var(--f-nav), var(--f-fallback); font-size: 13px; letter-spacing: .04em; color: var(--steel);
}
.article__meta time { color: inherit; }
.article__cover { margin: 0 0 36px; border-radius: var(--r); overflow: hidden; background: var(--light); box-shadow: 0 16px 36px rgba(14, 28, 53, .12); }
.article__cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.article__body { font-size: 18px; line-height: 1.7; color: var(--ink); }
.article__body > p { margin: 0 0 1.25em; }
.article__body h2 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; margin: 1.9em 0 .6em; }
.article__body h3 { font-size: 21px; margin: 1.6em 0 .5em; }
.article__body h4 { font-family: var(--f-ui), var(--f-fallback); font-size: 18px; margin: 1.4em 0 .4em; }
.article__body ul, .article__body ol { margin: 0 0 1.25em; padding-inline-start: 1.4em; }
.article__body li { margin: .35em 0; }
.article__body li > ul, .article__body li > ol { margin: .35em 0 0; }
.article__body a { color: var(--green-btn); text-decoration: underline; text-underline-offset: 3px; }
.article__body a:hover { color: var(--green-btn-hover); }
.article__body strong { color: var(--navy); }
.article__body figure { margin: 2em 0; }
.article__body figure img { display: block; width: 100%; height: auto; border-radius: var(--r); background: var(--light); }
.article__body figcaption { margin-top: 10px; font-family: var(--f-nav), var(--f-fallback); font-size: 13px; letter-spacing: .04em; color: var(--steel); }
.article__body blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-inline-start: 3px solid var(--green);
  font-family: var(--f-lede), var(--f-fallback); font-size: 22px; line-height: 1.45; color: var(--slate);
}
.article__body blockquote p { margin: 0 0 .6em; }
.article__body blockquote p:last-child { margin-bottom: 0; }
.article__body pre { margin: 0 0 1.5em; padding: 18px 20px; border-radius: var(--r-btn); background: var(--navy); color: var(--light); font-size: 14px; line-height: 1.55; overflow-x: auto; }
.article__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.article__body :not(pre) > code { padding: .1em .35em; border-radius: 4px; background: var(--light); color: var(--navy); }
.article__body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.article__related { margin-top: 40px; }
.article__related p { margin: 0; }
.article__related .eyebrow { margin-bottom: 10px; }
@media (max-width: 620px) {
  .article { padding-top: 32px; }
  .article__body { font-size: 17px; }
  .article__body blockquote { font-size: 19px; padding-inline-start: 16px; }
}

/* ---- booking form delivery states ------------------------------------------ */
.form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }  /* off-screen offsets widen an RTL page, so hide it in place */
.form button[data-sending] { opacity: .7; cursor: progress; }
.form__fail { border: 1.5px solid #c0424c; border-radius: var(--r); padding: 20px 24px; margin-bottom: 22px; background: #fdf3f4; }
.form__fail p { margin: 0 0 10px; }
.form__fail p:last-child { margin-bottom: 0; }

/* ---- booking (the meeting page) ---------------------------------------------- */
.booking { padding: 26px 26px 28px; }
.booking__status { padding: 18px 20px; border-radius: var(--r-btn); background: var(--light); color: var(--slate); }
.booking__status--error, .booking__status--off { background: #fdf3f4; color: #8a2f36; }
.booking__fallback { margin: 14px 0 0; }
.booking__step { margin: 0 0 12px; font-family: var(--f-nav), var(--f-fallback); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.booking__times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.booking__time {
  padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--r-btn); background: #fff; color: var(--navy);
  font-family: var(--f-ui), var(--f-fallback); font-size: 16px; font-weight: 700; cursor: pointer;
  transition: border-color var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
.booking__time:hover { border-color: var(--green-btn); background: var(--green-btn); color: #fff; }
.booking__tz { margin: 18px 0 0; font-size: 14px; color: var(--steel); }
.booking__chosen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.booking__chosen .booking__step { grid-column: 1; margin: 0; }
.booking__when { grid-column: 1; margin: 0; font-family: var(--f-ui), var(--f-fallback); font-size: 18px; font-weight: 700; color: var(--navy); }
.booking__change { grid-column: 2; grid-row: 1 / span 2; background: none; border: 1px solid var(--line); border-radius: var(--r-btn); padding: 8px 14px; font-family: var(--f-ui), var(--f-fallback); font-size: 14px; font-weight: 700; color: var(--green-btn); cursor: pointer; }
.booking__change:hover { border-color: var(--green-btn); }
.booking__form { display: grid; gap: 16px; }
.booking__form .field { margin: 0; }
.booking__form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--slate); }
.booking__done h3 { margin: 0 0 8px; }
.booking__done .booking__when { margin-bottom: 10px; }
@media (max-width: 620px) { .booking { padding: 18px; } .booking__times { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- booking: month grid ------------------------------------------------------- */
.booking__month { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.booking__month-name { margin: 0; font-family: var(--f-ui), var(--f-fallback); font-size: 18px; font-weight: 700; color: var(--navy); }
.booking__nav { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--navy); font-size: 22px; line-height: 1; cursor: pointer; }
.booking__nav:hover:not(:disabled) { border-color: var(--green-btn); color: var(--green-btn); }
.booking__nav:disabled { opacity: .35; cursor: default; }
.booking__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 22px; }
.booking__weekday { padding: 4px 0 8px; text-align: center; font-family: var(--f-nav), var(--f-fallback); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.booking__cell { aspect-ratio: 1; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--muted); font-family: var(--f-ui), var(--f-fallback); font-size: 15px; font-weight: 700; cursor: default; }
.booking__cell.is-free { color: var(--green-btn); background: rgba(65,187,147,.12); cursor: pointer; transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease); }
.booking__cell.is-free:hover { background: rgba(65,187,147,.28); }
.booking__cell.is-on { background: var(--green-btn); color: #fff; }
.booking__cell--pad { background: none; }
.booking__empty { margin: 0 0 18px; color: var(--slate); }
@media (max-width: 620px) { .booking__grid { gap: 4px; } .booking__cell { font-size: 14px; } }

/* ---- booking: loading state ---------------------------------------------------- */
/* A thin line travels along the top edge of the card while the calendar is
   fetched; the card holds two quiet lines of text. The real calendar fades in. */
.booking { position: relative; overflow: hidden; }
.booking__loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 420px; text-align: center; }
.booking__progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(65,187,147,.16); overflow: hidden; }
.booking__progress span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 38%; border-radius: 3px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-btn) 100%);
  animation: booking-progress 1.5s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes booking-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
[dir="rtl"] .booking__progress span { animation-name: booking-progress-rtl; }
@keyframes booking-progress-rtl { 0% { transform: translateX(290%); } 100% { transform: translateX(-100%); } }
.booking__loading-title { margin: 0 0 6px; font-family: var(--f-ui), var(--f-fallback); font-size: 19px; font-weight: 700; color: var(--navy); }
.booking__loading-caption { margin: 0; font-size: 15px; color: var(--steel); max-width: 30ch; }
.booking__times.is-entering, .booking__day > .booking__empty { animation: booking-in .3s ease-out both; }
@keyframes booking-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .booking__progress span { animation: none; width: 100%; opacity: .5; } .booking__times.is-entering, .booking__day > .booking__empty { animation: none; } }

/* ---- booking: checking one day ------------------------------------------------ */
/* The grid stays; the times area shows a short line of progress and six
   ghost buttons until that day's times arrive. */
.booking__day { position: relative; }
.booking__progress--inline { position: relative; height: 2px; margin: 0 0 14px; border-radius: 2px; }
.booking__times--ghost { pointer-events: none; }
.booking__time--ghost { border-color: transparent; background: #eef2f7; height: 46px; animation: ghost-breathe 1.6s ease-in-out infinite; }
@keyframes ghost-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.booking__retry { margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) { .booking__time--ghost { animation: none; } }

/* ---- booking: while a day loads ------------------------------------------------- */
/* A small calendar card: its date rolls through the coming days, it rocks a
   little on its shadow, and three dots type under a short line. Still under
   reduced motion. */
.booking__wait { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 236px; padding: 12px 0 8px; }
.cal { position: relative; width: 84px; height: 84px; margin-bottom: 22px; animation: cal-rock 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.cal__top { position: absolute; left: 0; right: 0; top: 0; height: 24px; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, #2f9c78, #2a7b61); }
.cal__body { position: absolute; left: 0; right: 0; top: 24px; bottom: 0; border-radius: 0 0 14px 14px; background: #fff; box-shadow: inset 0 1px 0 rgba(14,28,53,.06), 0 12px 26px rgba(14,28,53,.16); overflow: hidden; }
.cal__ring { position: absolute; top: -7px; width: 8px; height: 16px; border-radius: 4px; background: #0e1c35; box-shadow: inset 0 0 0 2px #0e1c35, inset 0 0 0 3px #a8dcc4; z-index: 2; }
.cal__ring--l { left: 20px; } .cal__ring--r { right: 20px; }
.cal__roll { position: absolute; left: 0; right: 0; top: 0; display: block; animation: cal-roll-6 6.6s cubic-bezier(.2, .8, .2, 1) infinite; }
.cal__roll[style*="--n:3"] { animation-name: cal-roll-3; animation-duration: 3.3s; }
.cal__roll[style*="--n:4"] { animation-name: cal-roll-4; animation-duration: 4.4s; }
.cal__roll[style*="--n:5"] { animation-name: cal-roll-5; animation-duration: 5.5s; }
.cal__roll b { display: block; height: 60px; line-height: 60px; text-align: center; font-family: var(--f-heading), var(--f-fallback); font-size: 34px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
.cal__shadow { position: absolute; left: 10px; right: 10px; bottom: -16px; height: 10px; border-radius: 50%; background: rgba(14,28,53,.14); filter: blur(4px); }
.booking__wait-text { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--f-ui), var(--f-fallback); font-size: 15px; font-weight: 700; color: var(--navy); }
.dots { display: inline-flex; gap: 3px; align-items: flex-end; height: 14px; }
.dots b { width: 5px; height: 5px; border-radius: 50%; background: var(--green-btn); animation: dots-type 1.2s ease-in-out infinite; }
.dots b:nth-child(2) { animation-delay: .15s; } .dots b:nth-child(3) { animation-delay: .3s; }
@keyframes cal-rock { 0%, 100% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(-2.5deg) translateY(-2px); } 75% { transform: rotate(2.5deg) translateY(-1px); } }
@keyframes dots-type { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cal, .cal__roll, .dots b { animation: none; } .dots b { opacity: 1; } }
@keyframes cal-roll-3 { 0.00%, 24.00% { transform: translateY(0px); } 33.33%, 57.33% { transform: translateY(-52px); } 66.67%, 90.67% { transform: translateY(-104px); } 100% { transform: translateY(-156px); } }
@keyframes cal-roll-4 { 0.00%, 18.00% { transform: translateY(0px); } 25.00%, 43.00% { transform: translateY(-52px); } 50.00%, 68.00% { transform: translateY(-104px); } 75.00%, 93.00% { transform: translateY(-156px); } 100% { transform: translateY(-208px); } }
@keyframes cal-roll-5 { 0.00%, 14.40% { transform: translateY(0px); } 20.00%, 34.40% { transform: translateY(-52px); } 40.00%, 54.40% { transform: translateY(-104px); } 60.00%, 74.40% { transform: translateY(-156px); } 80.00%, 94.40% { transform: translateY(-208px); } 100% { transform: translateY(-260px); } }
@keyframes cal-roll-6 { 0.00%, 12.00% { transform: translateY(0px); } 16.67%, 28.67% { transform: translateY(-52px); } 33.33%, 45.33% { transform: translateY(-104px); } 50.00%, 62.00% { transform: translateY(-156px); } 66.67%, 78.67% { transform: translateY(-208px); } 83.33%, 95.33% { transform: translateY(-260px); } 100% { transform: translateY(-312px); } }

/* ---- booking: later days load behind a thin line and a small ring ---------------- */
.booking__wait--small { flex-direction: row; gap: 10px; min-height: 120px; padding: 0; }
.ring { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(65,187,147,.22); border-top-color: var(--green-btn); animation: ring-turn .9s linear infinite; }
@keyframes ring-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring { animation: none; border-top-color: rgba(65,187,147,.22); } }

/* ---- meeting page: a smaller scale ------------------------------------------------- */
/* The page is a tool, not a landing page: smaller headline, a narrower card,
   compact day circles and time buttons, tighter spacing. */
.meeting-page { padding-block: clamp(48px, 6vw, 80px); }
.meeting-page__grid { grid-template-columns: minmax(260px, .8fr) minmax(0, 520px); gap: clamp(32px, 5vw, 64px); justify-content: space-between; }
.meeting-page__intro { padding-top: 10px; top: 112px; }
.meeting-page .section__head h1 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.03em; }
.meeting-page .section__head .lede { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; margin-top: 14px; }
.meeting-page__details { margin: 22px 0 14px; font-size: 13px; }
.meeting-page__note { font-size: 14px; }
.meeting-page__calendar { border-radius: 16px; }
.booking { padding: 18px 20px 20px; }
.booking__month { margin-bottom: 8px; }
.booking__month-name { font-size: 16px; }
.booking__nav { width: 32px; height: 32px; font-size: 19px; }
.booking__grid { gap: 2px 4px; margin-bottom: 16px; }
.booking__weekday { padding: 2px 0 6px; font-size: 10px; }
.booking__cell { width: 40px; height: 40px; aspect-ratio: auto; margin: 0 auto; font-size: 14px; }
.booking__step { margin-bottom: 8px; font-size: 11px; }
.booking__times { gap: 8px; }
.booking__time { padding: 9px 6px; font-size: 15px; }
.booking__tz { margin-top: 12px; font-size: 13px; }
.booking__wait { min-height: 200px; }
.booking__wait--small { min-height: 96px; }
.cal { width: 72px; height: 72px; }
.cal__top { height: 20px; }
.cal__body { top: 20px; }
.cal__roll b { height: 52px; line-height: 52px; font-size: 29px; }
.booking__chosen { padding-bottom: 14px; margin-bottom: 16px; }
.booking__when { font-size: 16px; }
.booking__form { gap: 12px; }
@media (max-width: 980px) { .meeting-page__grid { grid-template-columns: 1fr; } .meeting-page__intro { position: static; } }

/* ---- booking: days that pop in, a chosen time, the form below ------------------- */
/* Working days start quiet; each pops green the moment its check finds free
   times, or goes muted if it is full. A chosen time stays highlighted and
   the details form opens beneath the picker, so other times and days remain
   one click away. */
.booking__cell.is-open { color: var(--navy); background: #f2f5f9; cursor: pointer; }
.booking__cell.is-open:hover { background: #e8eef6; }
.booking__cell.is-none { color: var(--muted); background: none; cursor: default; text-decoration: line-through; text-decoration-color: rgba(14,28,53,.25); }
.booking__cell.is-free { color: var(--green-btn); background: rgba(65,187,147,.14); }
.booking__cell.is-free:hover { background: rgba(65,187,147,.28); }
.booking__cell.is-on { background: var(--green-btn); color: #fff; }
.booking__cell.is-pop { animation: cell-pop .55s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes cell-pop { 0% { transform: scale(.5); background: var(--green); color: #fff; } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
.booking__time.is-on { background: var(--green-btn); border-color: var(--green-btn); color: #fff; }
.booking__book { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); animation: booking-in .35s ease-out both; }
.booking__book .booking__chosen { grid-template-columns: 1fr; border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .booking__cell.is-pop, .booking__book { animation: none; } }

/* ---- booking: room around the line, and a visible sending state ---------------- */
.booking__progress--inline { margin: 12px 0 16px; }
.booking__day > .booking__step { margin-bottom: 10px; }
.booking__times { margin-top: 2px; }
.booking__tz { margin-top: 16px; }
.booking__progress--form { position: absolute; top: 0; left: 0; right: 0; margin: 0; height: 3px; }
.booking__book { position: relative; }
.booking__book.is-sending { padding-top: 24px; }
.booking__book.is-sending .booking__form { opacity: .72; }
.booking__book.is-sending input, .booking__book.is-sending textarea { background: #f6f8fb; }
.btn[data-sending] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; opacity: 1; }
.ring--light { border-color: rgba(255,255,255,.35); border-top-color: #fff; width: 16px; height: 16px; }

/* ---- booking: the time-zone note sits under a divider with room on both sides ---- */
.booking .booking__tz { margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); text-align: center; font-size: 13px; color: var(--steel); }


/* ---- the vision section with its animation --------------------------------------- */
/* Text keeps a reading measure; the loop from the original site sits beside it
   and breathes on the navy. On narrow screens it moves above the text. */
.pitch--with-anim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); gap: clamp(32px, 6vw, 80px); align-items: center; }
.pitch--with-anim .pitch__text { max-width: 62ch; }
.pitch__anim { position: relative; aspect-ratio: 1; }
.pitch__anim::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(65,187,147,.22), transparent 70%); filter: blur(24px); }
.lottie { position: relative; width: 100%; height: 100%; opacity: 0; transition: opacity var(--motion-media) var(--motion-ease); }
.lottie[data-ready] { opacity: 1; }
.lottie svg { display: block; width: 100% !important; height: 100% !important; }
@media (max-width: 860px) {
  .pitch--with-anim { grid-template-columns: 1fr; gap: 8px; }
  .pitch__anim { order: -1; width: min(260px, 60vw); margin: 0 auto 8px; }
}

/* ---- expert network with four people; a profile without a portrait yet -------- */
.people { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.expert-profile__portrait--mark { display: grid; place-items: center; background: linear-gradient(135deg, rgba(65,187,147,.20), rgba(69,96,168,.16)); }
.expert-profile__mark { font-family: var(--f-heading), var(--f-fallback); font-size: clamp(56px, 8vw, 96px); font-weight: 700; letter-spacing: .04em; color: var(--green-btn); }

/* ---- expert network on service pages: a compact card, not a portrait page ------ */
/* The page is about the work; the specialist is introduced near the end in a
   card the width of the reading measure: small portrait, name, role, two lines. */
.expert-profile {
  grid-template-columns: 128px minmax(0, 1fr); gap: 26px; align-items: center;
  max-width: 820px; margin: 0 auto; padding: 26px 28px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
}
.expert-profile__portrait { width: 128px; border-radius: 16px; }
.expert-profile__body h2 { font-size: 22px; margin: 0 0 4px; }
.expert-profile__body .eyebrow { margin-bottom: 8px; }
.expert-profile__role { margin-bottom: 12px; font-size: 12px; }
.expert-profile__body > p:not(.eyebrow, .expert-profile__role) { font-size: 16px; line-height: 1.6; margin: 0 0 8px; }
.expert-profile__body > p:last-child { margin-bottom: 0; }
.expert-profile__mark { font-size: 44px; }
[data-surface="light"] .expert-profile, .section--tint .expert-profile { background: #fff; }
@media (max-width: 700px) {
  .expert-profile { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
  .expert-profile__portrait { width: 96px; }
}

/* ---- lead form under an expert card ------------------------------------------------ */
.expert-lead { grid-column: 1 / -1; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.expert-lead__toggle { font-size: 15px; }
.expert-lead__toggle[aria-expanded="true"] { display: none; }
.lead { display: grid; gap: 14px; margin-top: 4px; }
.lead__intro { margin: 0; color: var(--slate); font-size: 15px; }
.lead .form__rows { gap: 12px 16px; }
.lead .field { margin: 0; }
.lead .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--slate); }
.lead .form__fail { margin: 0; }
.lead__ok { margin-top: 4px; }
.lead__ok h3 { margin: 0 0 6px; }
.lead__ok p { margin: 0; }
@media (max-width: 700px) { .expert-lead { margin-top: 14px; padding-top: 14px; } }

/* ---- expert card: the portrait stays beside the name, whatever opens below ---- */
.expert-profile { align-items: start; }
.expert-profile__portrait { margin-top: 26px; }   /* level with the name, under the eyebrow */
@media (max-width: 700px) { .expert-profile__portrait { margin-top: 0; } }

/* Shared visitor experience. Values here are the contract for every component. */
:root {
  --motion-duration: 560ms;
  --motion-media: 800ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --media-radius: 20px;
  --media-shadow: 0 16px 36px rgba(14, 28, 53, .12);
  --media-shadow-dark: 0 16px 36px rgba(0, 0, 0, .2), 0 0 24px rgba(168, 220, 196, .09);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
html { scroll-padding-top: 112px; }
:focus-visible { outline: 3px solid var(--green-btn); outline-offset: 6px; }
[data-surface="navy"] :focus-visible, [data-surface="green"] :focus-visible { outline-color: var(--mint); }

/* Headings share a rhythm; body typography is unchanged. */
h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1.06; letter-spacing: -.035em; }
h2 { font-size: clamp(29px, 3.4vw, 46px); line-height: 1.12; letter-spacing: -.025em; }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: -.02em; }
.headline-accent { color: var(--green-btn); }
[data-surface="navy"] .headline-accent { color: var(--mint); }
body:not([data-page="home"]) .hero--video .hero__inner > h1 { font-size: clamp(42px, 5.6vw, 80px); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.hero--photo .hero__inner > h1 { font-size: clamp(40px, 4.6vw, 66px); }
.section__head { max-width: 760px; margin-bottom: var(--space-head); }
.section__head .eyebrow { margin: 0 0 var(--space-2); }
.section__head h2 { margin: 0; }
.section__head .lede { margin: var(--space-3) 0 0; }
.section__head--split { display: block; }
.section__head--split .lede { max-width: 62ch; }
.section__head > :last-child { margin-bottom: 0; }
[data-surface="navy"] .section__head .lede { color: #cdd8e6; }
[data-surface="navy"] .section__head h2 { color: #fff; }
[data-surface="navy"] .eyebrow { color: var(--mint); }

/* A colour boundary needs no rule; like-coloured sections share one rule. */
main > [data-seam] { border-block: 0; }
main > [data-seam="line"] { border-top: 1px solid var(--line); }
main > [data-seam="line"][data-surface="navy"] { border-top-color: rgba(205,216,230,.16); }
.section--slim { padding-block: var(--space-section); }
.cta-band { padding-block: var(--space-section); }

/* Preserve the original backgrounds; no square-grid overlays. */
.hero, .portrait, .conversationhero, .service-directory, .connections-band, .cta-band { isolation: isolate; }
.hero > .wrap, .portrait > .wrap, .conversationhero > .wrap, .connections-band > .wrap { position: relative; z-index: 1; }
.cta-band { background: radial-gradient(ellipse at 75% 20%, #287657, transparent 70%), #0c382c; }
.cta-band__aurora, .blogband__glow, .portrait__glow, .triggers-band__glow { display: none; }
.cause-system-band { background: var(--navy); }
.btn--primary { box-shadow: 0 0 24px rgba(65,187,147,.18); }
body[data-page="home"] .hero .btn--primary { box-shadow: none; }
.conversationhero .btn--primary, .formpage .btn--primary { box-shadow: none; }
body[data-page="book-a-strategy-call"] .section--tint { background: #f6f7f8; }
.cta-band .btn--primary:hover { transform: none; }
.cta-band h2, .cta-band p { text-shadow: none; }

/* Media framing is independent of reveal and link-zoom transforms. */
:is(.pattern__illo, .triggers__figure, .brandfilm__media, .mediaband, .post__thumb, .post__frame, .expert-profile__portrait, .person__face) {
  border-radius: var(--media-radius); corner-shape: round;
  -webkit-mask-image: none; mask-image: none;
  box-shadow: var(--media-shadow);
  border-top: 1px solid rgba(255,255,255,.65);
}
:is(.triggers__figure, .brandfilm__media, .post__thumb, .post__frame, .expert-profile__portrait) { overflow: hidden; }
[data-surface="navy"] :is(.pattern__illo, .triggers__figure, .brandfilm__media, .post__thumb, .post__frame, .expert-profile__portrait, .person__face) { box-shadow: var(--media-shadow-dark); }
.mediaband { width: min(var(--wrap), calc(100% - 44px)); margin: var(--space-section) auto; }
.portrait__figure img, .founder__photo img { filter: drop-shadow(0 16px 22px rgba(14,28,53,.12)); }

/* Only interactive objects react. Transform components cannot fight reveals. */
.card--linked { transition: translate var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease); position: relative; }
.card--linked h3 a::after { content: ""; position: absolute; inset: 0; }
.card--linked:focus-within { outline: 3px solid var(--green-btn); outline-offset: 4px; }
.arrowlink__a { transition-property: translate; transform: none !important; }
[dir="rtl"] .arrowlink__a { transform: scaleX(-1) !important; }
.service-directory__list li { transition: none; }
.service-directory__list li::before { display: none; }
.service-directory__list li:hover, .service-directory__list li:focus-within,
[dir="rtl"] .service-directory__list li:hover, [dir="rtl"] .service-directory__list li:focus-within { transform: none; padding-inline-start: 0; }
.service-directory__list li .icon-tile { transform: none !important; transition: none; }
.post__link:hover .post__thumb img, .post__link:hover .post__frame img { transform: none; }
.post__thumb img, .post__frame img { transition: scale var(--motion-media) var(--motion-ease); }
a, summary, .problem-index h3, .service-index__title, .post__link h3 { transition: color var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease); }
@media (hover: hover) and (pointer: fine) {
  .card--linked:hover { translate: 0 -4px; box-shadow: 0 16px 32px rgba(14,28,53,.13); }
  a:hover .arrowlink__a, summary:hover .arrowlink__a { translate: 4px 0; }
  [dir="rtl"] a:hover .arrowlink__a, [dir="rtl"] summary:hover .arrowlink__a { translate: -4px 0; }
  .post__link:hover :is(.post__thumb, .post__frame) img { scale: 1.035; }
}
a:focus-visible .arrowlink__a, summary:focus-visible .arrowlink__a { translate: 4px 0; }
[dir="rtl"] a:focus-visible .arrowlink__a, [dir="rtl"] summary:focus-visible .arrowlink__a { translate: -4px 0; }

/* Business Development icon treatment, trialled here in both languages. */
body[data-page="business-development"] .principle { align-items: center; }
body[data-page="business-development"] .principle p { padding-top: 0; }
body[data-page="business-development"] .principle .icon-tile { background: var(--green); color: #fff; }

/* A quiet invitation to read the work: typography, space, and one clear link. */
.results-preview { background: #fff; text-align: center; }
.results-preview .section__head { max-width: 760px; margin: 0 auto; }
.results-preview .eyebrow { color: var(--slate); }
.results-preview h2 { max-width: 22ch; margin-inline: auto; color: var(--navy); }
.results-preview__body { max-width: 52ch; margin: var(--space-3) auto 0; color: var(--slate); }
.results-preview__link {
  margin-top: var(--space-4); min-height: 44px; padding-block: 8px;
  font-size: 18px; font-weight: 400; color: var(--green-btn); border: 0;
  text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.results-preview__link:hover, .results-preview__link:focus-visible { color: var(--green-btn-hover); text-decoration: underline; }

/* The directory glow is the sole pointer-following surface: two soft blobs that
   trail the mouse at different speeds (reveal.js eases them toward it), so they
   stretch apart while it moves and pool together when it rests. The shapes
   themselves drift, so the light never reads as a hard circle. */
.service-directory::before { display: none; }
.service-directory__glow {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 1000ms ease;                         /* fade out gently once the mouse rests */
}
.service-directory[data-pointer] .service-directory__glow { opacity: 1; transition-duration: var(--motion-duration); } /* fade in as it moves */
.service-directory__blob {
  position: absolute; top: 0; left: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px;
  filter: blur(46px); will-change: transform;
}
.service-directory__blob--a {
  background: radial-gradient(closest-side, rgba(65,187,147,.30), rgba(65,187,147,.16) 62%, transparent);
  transform: translate3d(var(--glow-ax, -999px), var(--glow-ay, -999px), 0);
  animation: directory-blob-a 11s ease-in-out infinite alternate;
}
.service-directory__blob--b {
  width: 460px; height: 460px; margin: -230px 0 0 -230px;
  background: radial-gradient(closest-side, rgba(69,96,168,.34), rgba(168,220,196,.10) 64%, transparent);
  transform: translate3d(var(--glow-bx, -999px), var(--glow-by, -999px), 0);
  animation: directory-blob-b 14s ease-in-out infinite alternate;
}
@keyframes directory-blob-a {
  0%   { border-radius: 58% 42% 63% 37% / 46% 57% 43% 54%; rotate: 0deg;   scale: 1 1; }
  50%  { border-radius: 42% 58% 38% 62% / 60% 40% 62% 38%; rotate: 28deg;  scale: 1.1 .92; }
  100% { border-radius: 63% 37% 52% 48% / 38% 62% 45% 55%; rotate: -22deg; scale: .94 1.08; }
}
@keyframes directory-blob-b {
  0%   { border-radius: 41% 59% 37% 63% / 59% 40% 60% 41%; rotate: 0deg;   scale: 1 1; }
  50%  { border-radius: 60% 40% 58% 42% / 42% 61% 39% 58%; rotate: -34deg; scale: .9 1.12; }
  100% { border-radius: 38% 62% 44% 56% / 63% 37% 57% 43%; rotate: 26deg;  scale: 1.08 .96; }
}

/* Once-only reveals. Hidden states only exist after JS installs its observer. */
.reveal-on .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
  will-change: auto;
}
.reveal-on .reveal--media {
  transform: translateY(12px) scale(.975);
  transition-duration: var(--motion-media);
}
.reveal-on .reveal.is-in, .reveal-on .no-anim { opacity: 1; transform: none; }
.reveal-on .no-anim { transition: none; }

/* Each page has one scroll accent; without JS, it is already complete. */
[data-scroll-moment] { --scroll-progress: 1; }
.scroll-accent::after {
  content: ""; display: block; margin-top: var(--space-4); height: 2px; width: 80px;
  background: var(--green); transform: scaleX(var(--scroll-progress)); transform-origin: left;
}
[dir="rtl"] .scroll-accent::after { transform-origin: right; }
.steps--flow::after { transform: scaleX(var(--scroll-progress)) !important; transition: none; }
.step-marker { color: var(--mint); background: var(--navy); border-color: var(--navy); transition: none; }
.motion-enabled .steps--flow[data-progress] .step-marker:not([data-reached]) { color: var(--green-d); background: #fff; border-color: var(--line); }
@media (max-width: 900px) { .steps--flow::after { transform: scaleY(var(--scroll-progress)) !important; } }

/* Glass on scroll; opaque by default and when reduced transparency is preferred. */
.site-header, body[data-hero="video"] .site-header, body[data-hero="video"] .site-header.is-solid {
  position: sticky; top: 0; inset-inline: auto; margin-inline: auto;
  width: 100%; transition: background-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease), border-radius var(--motion-duration) var(--motion-ease);
}
body[data-hero="video"] .site-header { position: absolute; inset-inline: 0; margin-bottom: 0; }
body[data-hero="video"] .site-header.is-solid { position: fixed; inset-inline: 0; }
.site-header.is-floating, body[data-hero="video"] .site-header.is-floating {
  top: 12px; width: calc(100% - 24px); border: 1px solid rgba(226,232,240,.8); border-radius: 16px;
  background: #fff; box-shadow: 0 8px 28px rgba(14,28,53,.1);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .site-header.is-floating, body[data-hero="video"] .site-header.is-floating {
    background: linear-gradient(135deg, rgba(255,255,255,.25), transparent 55%), rgba(255,255,255,.58);
    border-color: rgba(255,255,255,.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 28px rgba(14,28,53,.12);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-floating, body[data-hero="video"] .site-header.is-floating {
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: var(--line); box-shadow: 0 8px 28px rgba(14,28,53,.1);
  }
}
.site-header.is-floating .wrap { width: min(100% - 32px, var(--wrap)); }
.site-header.is-floating .nav a.btn--meet,
body[data-hero="video"] .site-header.is-floating .nav a.btn--meet { color: #fff; border-color: transparent; }
@media (max-width: 900px) {
  body[data-hero="video"] .site-header .nav[data-open] a:not(.btn--meet) { color: var(--ink); }
  body[data-hero="video"] .site-header .nav[data-open] a:not(.btn--meet):is(:hover, [aria-current="page"]) { color: var(--green-btn); }
}

/* Native disclosure: the language choices open above the footer. */
.site-footer__base { align-items: center; }
.site-footer__base > span { margin-inline-end: auto; }
.footer-language { position: relative; font-family: var(--f-ui), var(--f-fallback); }
.footer-language summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 8px; cursor: pointer; list-style: none; color: var(--light); }
.footer-language summary::-webkit-details-marker { display: none; }
.footer-language summary:hover, .footer-language summary:focus-visible { color: var(--mint); }
.footer-language summary:focus-visible { outline-color: var(--mint); }
.site-footer .footer-language__options {
  position: absolute; z-index: 2; inset-inline-end: 0; bottom: calc(100% + 8px);
  min-width: 160px; padding: 8px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.footer-language__options li { margin: 0; }
.footer-language__options a { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 8px 12px; border-radius: 4px; color: var(--navy); }
.footer-language__options a:hover, .footer-language__options a:focus-visible { background: var(--light); color: var(--navy); }
.footer-language__options a[aria-current] { color: var(--green-btn); }

/* Founder experience figures, with once-only count-up. */
.proof-stats { display: flex; gap: var(--space-6); margin: 0 0 var(--space-6); }
.proof-stats > div { display: flex; flex-direction: column-reverse; gap: var(--space-1); }
.proof-stats dt { font-size: 16px; color: var(--slate); }
.proof-stats dd { margin: 0; font: 700 clamp(40px, 5vw, 64px)/1 var(--f-heading), var(--f-fallback); color: var(--navy); font-variant-numeric: tabular-nums; }
.founder__stats { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); margin-block: var(--space-4); }
.founder__stats > div { flex-direction: row-reverse; align-items: center; gap: var(--space-2); }
.founder__stats dd { font-size: 30px; line-height: 1; }
.founder__stats dt { max-width: 18ch; font-size: 14px; line-height: 1.4; }

/* What We Improve: an orientation, a directory, then a connected explanation. */
.improve-hero { padding-block: var(--space-section); background: var(--navy); color: #fff; overflow: hidden; }
.improve-hero__media { position: absolute; inset: 0; pointer-events: none; }
.improve-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,28,53,.35) 52%, transparent);
}
[dir="rtl"] .improve-hero__media::after { background: linear-gradient(-90deg, rgba(14,28,53,.35) 52%, transparent); }
.improve-hero__copy { max-width: 760px; }
.improve-hero h1 { max-width: 14ch; margin-bottom: var(--space-4); color: #fff; }
.improve-hero .headline-accent { display: block; }
.improve-hero .lede { max-width: 43ch; font-family: var(--f-ui), var(--f-fallback); font-size: clamp(20px, 1.65vw, 24px); line-height: 1.6; color: #e4ebf3; }
.improve-hero .btn-row { gap: var(--space-3); margin-top: var(--space-5); }
.improve-hero .btn--primary { box-shadow: none; }
.problem-index { list-style: none; padding: 0; margin: 0; }
.problem-index li + li { border-top: 1px solid var(--line); }
.problem-index__link { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-5); padding-block: var(--space-5); text-decoration: none; }
.problem-index li:first-child .problem-index__link { padding-top: 0; }
.problem-index__number { color: var(--green-btn); font: 500 14px/1.6 var(--f-ui), var(--f-fallback); }
.problem-index h3 { margin: 0; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.2; max-width: 23ch; }
.problem-index__description p { margin: 0 0 var(--space-3); color: var(--slate); }
.problem-index__action { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--green-btn); font-family: var(--f-ui), var(--f-fallback); font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.problem-index__link:hover h3, .problem-index__link:focus-visible h3 { color: var(--green-btn); }
.problem-index__other { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-5); margin-top: var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.problem-index__other h3 { font-size: 22px; margin: 0; }
.problem-index__other p { color: var(--slate); margin-bottom: var(--space-3); }
.connections { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); list-style: none; padding: var(--space-5) 0 0; margin: 0; }
.connections::before, .connections::after { content: ""; position: absolute; top: 0; inset-inline: 0; height: 2px; background: var(--line); }
.connections::after { background: var(--green); transform: scaleX(var(--scroll-progress)); transform-origin: left; }
[dir="rtl"] .connections::after { transform-origin: right; }
.connections h3 { margin-bottom: var(--space-2); font-size: 22px; }
.connections p { margin: 0; color: var(--slate); }
.connections__note { max-width: 70ch; margin: var(--space-6) 0 0; color: var(--navy); font-family: var(--f-ui), var(--f-fallback); }

@media (max-width: 900px) {
  .improve-hero h1 { max-width: 16ch; }
  .problem-index__link { grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); }
  .problem-index__description { grid-column: 2; }
  .problem-index__other { grid-template-columns: 1fr; gap: var(--space-3); }
  .connections { grid-template-columns: 1fr; gap: var(--space-5); padding: 0; padding-inline-start: var(--space-4); }
  .connections::before, .connections::after { inset-inline-start: 0; inset-inline-end: auto; inset-block: 0; width: 2px; height: auto; }
  .connections::after { transform: scaleY(var(--scroll-progress)); transform-origin: top !important; }
}
@media (max-width: 620px) {
  .improve-hero__media::after, [dir="rtl"] .improve-hero__media::after { background: rgba(14,28,53,.35); }
  body:not([data-page="home"]) .hero--video .hero__inner > h1 { font-size: 42px; }
  body:not([data-page="home"]) .hero--video .hero__inner { padding-inline: 22px; }
  .site-header.is-floating, body[data-hero="video"] .site-header.is-floating { top: 0; width: 100%; border-radius: 0; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .proof-stats { gap: var(--space-5); }
}
@media (prefers-reduced-motion: reduce), (max-width: 620px) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal-on .reveal { opacity: 1; transform: none; }
  [data-scroll-moment] { --scroll-progress: 1 !important; }
  .service-directory::before, .service-directory__glow { display: none; }
  .card--linked:hover, a:hover .arrowlink__a, summary:hover .arrowlink__a { translate: none; }
  .post__link:hover :is(.post__thumb, .post__frame) img { scale: 1; }
  .hero__video { display: block; }
}