/* =========================================================
   Saraya Partners — warm, calm, interactive
   ========================================================= */
:root {
  /* Clean white + C&R Research greens */
  --bg: #FFFFFF;
  --sand: #F4F9F9;        /* palest teal tint */
  --sand-2: #DCEDEE;
  --ink: #1F2D30;         /* deep teal-tinted charcoal */
  --ink-2: #5B6A6D;
  --ink-3: #98A5A7;
  --line: #E2ECEC;
  --white: #FFFFFF;

  --butter: #8FD3DC;      /* light aqua highlight */
  --terra: #065660;       /* primary deep teal-green */
  --sage: #007F8F;        /* teal */
  --ochre: #3BA9B7;       /* bright aqua */
  --rose: #275A62;        /* slate teal */
  --olive: #7A8840;       /* olive from the logo */
  --aqua: #33C3D5;

  /* Doxy.me uses Suisse Int'l (paid); Inter Tight + Inter are the closest free match */
  --serif: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* display face */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 16px;
  --max: 1240px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --shadow: 0 1px 2px rgba(10,40,44,.06), 0 8px 24px -12px rgba(10,40,44,.22);
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--sans); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (min-width: 768px) { body { font-size: 17px; } }
/* Doxy-style type: Book weight (450), tight -1% tracking, no italics */
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 450; letter-spacing: -0.01em; line-height: 1.1; }
em { font-style: normal; }
h1 em, h2 em, h3 em, h4 em, .footer__claim em { font-style: normal; color: inherit; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------- Small pieces ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  background: var(--sand); color: var(--ink-2); font: 600 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--butter); }
.chip--glass { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 600 .88rem/1 var(--sans); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s, transform .4s var(--ease), box-shadow .3s;
}
.pbtn--light { background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.pbtn--light:hover { background: var(--butter); }
.pbtn--ghost { color: #fff; border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); height: 48px; padding: 0 24px; }
.pbtn--ghost:hover { background: #fff; color: var(--ink); }
.pbtn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.pbtn--outline:hover { background: var(--ink); color: var(--bg); }
.pbtn--dark { background: var(--ink); color: var(--bg); height: 52px; }
.pbtn--dark:hover { background: var(--terra); }
.round {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; cursor: pointer;
  transition: background .3s, color .3s, transform .4s var(--ease);
}
.round:hover { background: var(--ink); color: var(--bg); }
.round:disabled { opacity: .3; pointer-events: none; }

section h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.2; max-width: 20ch; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; z-index: 100; top: 14px; left: var(--gutter); right: var(--gutter);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none;
  transition: transform .5s var(--ease);
}
.nav > * { pointer-events: auto; }
.nav.is-hidden { transform: translateY(-140%); }
.nav__pill {
  display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 8px 0 8px; border-radius: 999px;
  background: rgba(255,255,255,.96); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: 14px; }
.brand__mark { width: 40px; height: 40px; border-radius: 50%; background: var(--butter); display: grid; place-items: center; transition: transform .8s var(--ease); }
.brand:hover .brand__mark { transform: rotate(90deg); }
.brand__mark svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.brand__name { font: 500 1.25rem/1 var(--serif); letter-spacing: -0.01em; }
.nav__links { display: none; }
.nav__links a { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: .88rem; font-weight: 500; color: var(--ink-2); transition: background .25s, color .25s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); background: var(--sand); }
.nav__toggle { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sand); cursor: pointer; display: grid; place-content: center; gap: 5px; margin-left: 4px; }
.nav__toggle span { display: block; width: 16px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease); }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.nav__right { display: flex; gap: 8px; padding-top: 6px; }
.nav__contact { display: none; }
.mobile-menu {
  position: absolute; top: 66px; left: 0; right: 0; background: #fff; border-radius: 22px; padding: 10px 20px 14px;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: 14px 0; text-decoration: none; border-bottom: 1px solid var(--line); font: 400 1.4rem var(--serif); }
.mobile-menu a:last-child { border-bottom: 0; }
@media (max-width: 479px) { .nav__right .pbtn { padding: 0 14px; font-size: .8rem; } }
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__toggle, .mobile-menu { display: none !important; }
  .nav__contact { display: inline-flex; }
  .nav__pill { padding-right: 10px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100svh; min-height: 620px; max-height: 1000px; overflow: hidden; isolation: isolate;
  border-radius: 0 0 32px 32px; color: #fff; display: grid; place-items: center; text-align: center;
}
.hero__bg, .hbg { position: absolute; inset: 0; margin: 0; z-index: -2; }
.hbg { opacity: 0; transition: opacity 1.6s var(--ease); }
.hbg.is-active { opacity: 1; }
.hbg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 10s linear; }
.hbg.is-active img { transform: scale(1); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 50%, rgba(4,38,43,.42), rgba(4,38,43,.62)), linear-gradient(180deg, rgba(4,38,43,.25), transparent 30%);
}
.hero__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 90px var(--gutter) 60px; max-width: 980px; }
.hero__title { font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: 1.1; letter-spacing: -0.01em; max-width: 16ch; font-weight: 450; }
.hero__lead { font-size: clamp(1rem, 1.4vw, 1.15rem); color: rgba(255,255,255,.88); max-width: 46ch; }
.hero__sectors { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sector { position: relative; overflow: hidden; border: 0; cursor: pointer; padding: 9px 14px; border-radius: 999px; background: transparent; color: rgba(255,255,255,.85); font-size: .8rem; font-weight: 600; white-space: nowrap; transition: background .4s var(--ease), color .4s; }
.sector:hover { color: #fff; }
.sector.is-active { background: #fff; color: var(--ink); }
@media (max-width: 420px) { .sector { padding: 8px 10px; font-size: .74rem; } }

/* Headline words rise in */
.hw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .05em .12em 0; margin: 0 -.05em -.12em 0; }
.hw > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 60ms + .1s); }
.is-in .hw > span { transform: none; }

/* ---------- Trusted: floating cards ---------- */
.trusted { position: relative; height: clamp(560px, 92vh, 860px); display: grid; place-items: center; overflow: hidden; }
.field { position: absolute; inset: 40px 0; }
.lc {
  position: absolute; left: var(--x); top: var(--y); width: 136px; height: 86px; cursor: grab; touch-action: none;
  transform: translate3d(calc(var(--px, 0px) + var(--dx, 0px)), calc(var(--py, 0px) + var(--dy, 0px)), 0) rotate(var(--r));
  transition: transform .9s var(--ease);
}
.lc.is-drag { cursor: grabbing; transition: none; z-index: 5; }
.lc__in {
  width: 100%; height: 100%; border-radius: 16px; background: var(--sand); display: grid; place-items: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 24px -18px rgba(10,40,44,.4);
  animation: float var(--d) ease-in-out infinite alternate; transition: background .4s, box-shadow .4s;
}
.lc:hover .lc__in { background: #fff; box-shadow: var(--shadow); }
.lc span { font-size: 1rem; color: #5E5E5E; white-space: nowrap; user-select: none; }
.lc--v { width: 86px; height: 136px; }
.lc--v span { transform: rotate(90deg); }
@keyframes float { to { transform: translateY(-16px) rotate(3deg); } }
.w1 b { font-weight: 700; } .w2 { font-family: Georgia, serif; font-style: italic; font-size: 1.15rem !important; }
.w3 { font-weight: 700; letter-spacing: .14em; } .w4 { font-weight: 600; letter-spacing: -0.04em; }
.w5 i { font-style: normal; color: var(--terra); } .w6 { font-weight: 600; letter-spacing: .2em; font-size: .82rem !important; }
.w7 b { font-weight: 700; } .w8 { font-family: Georgia, serif; letter-spacing: .12em; }
.trusted__title { position: relative; z-index: 2; text-align: center; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.2; max-width: 16ch; pointer-events: none; padding: 0 var(--gutter); }
@media (max-width: 767px) {
  .lc { width: 104px; height: 64px; } .lc--v { width: 64px; height: 104px; }
  .lc span { font-size: .8rem; }
  .m-hide { display: none; }
}

/* ---------- Solutions: scroll-driven tabs ---------- */
.solutions { padding: clamp(80px, 10vw, 140px) 0 0; }
.roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 0; }
.roles li { padding: 9px 14px; border-radius: 999px; background: var(--sand); font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }

.steps { position: relative; margin-top: clamp(40px, 6vw, 80px); }
.stage { position: relative; display: grid; gap: 16px; }
.panel {
  position: relative; border-radius: 26px; background: var(--c); color: #fff; padding: 32px 22px 26px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.18), transparent 70%); pointer-events: none; }
.panel__title { position: relative; font-size: clamp(1.7rem, 2.6vw, 2.3rem); text-align: center; }
.panel__m { position: relative; text-align: left; align-self: stretch; }
.panel__m h4 { font-size: 1.5rem; margin-bottom: 6px; }
.panel__m p { color: rgba(255,255,255,.88); font-size: .95rem; }
.copy { display: none; }

.mcard {
  position: relative; width: min(100%, 420px); background: #fff; color: var(--ink); border-radius: 18px; padding: 22px;
  box-shadow: 0 30px 60px -30px rgba(4,38,43,.55);
}
.mcard__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.mtag { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pill { font-size: .72rem; font-weight: 700; padding: 5px 9px; border-radius: 999px; background: #E9F7F8; color: var(--terra); }
.mcard__kpi { font: 400 2.4rem/1 var(--serif); letter-spacing: -0.02em; margin-bottom: 16px; }
.mcard__kpi small { display: block; font: 500 .8rem var(--sans); color: var(--ink-3); margin-bottom: 8px; letter-spacing: 0; }
.mcard__sub { font-size: .88rem; color: var(--ink-2); }
.chart { width: 100%; height: 96px; margin-bottom: 12px; }
.chart .area { fill: rgba(6,86,96,.12); }
.chart .line { fill: none; stroke: var(--terra); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.panel.is-active .chart .line, .panel.is-seen .chart .line { stroke-dashoffset: 0; }
.rows div { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); font-size: .86rem; color: var(--ink-2); }
.rows b { color: var(--sage); }
.bars { display: grid; gap: 12px; }
.bars div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; font-size: .82rem; color: var(--ink-2); }
.bars i { position: relative; height: 10px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.bars i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 999px; background: var(--sage); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.bars div:nth-child(2) i::after { transition-delay: .1s; } .bars div:nth-child(3) i::after { transition-delay: .2s; } .bars div:nth-child(4) i::after { transition-delay: .3s; }
.panel.is-active .bars i::after, .panel.is-seen .bars i::after { transform: none; }
.journey li { position: relative; padding: 0 0 16px 32px; display: flex; flex-direction: column; }
.journey li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--sand-2); background: #fff; }
.journey li::after { content: ""; position: absolute; left: 8.5px; top: 22px; bottom: 2px; width: 1px; background: var(--sand-2); }
.journey li:last-child::after { display: none; }
.journey li.done::before { border-color: var(--ochre); background: var(--ochre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.journey b { font-weight: 600; font-size: .95rem; }
.journey span { font-size: .8rem; color: var(--ink-3); }
.ringrow { display: flex; align-items: center; gap: 20px; }
.ring { width: 110px; height: 110px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: var(--sand); stroke-width: 10; }
.ring .val { stroke: var(--rose); stroke-linecap: round; stroke-dasharray: 301.6; stroke-dashoffset: 301.6; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.panel.is-active .ring .val, .panel.is-seen .ring .val { stroke-dashoffset: 48.3; }

@media (min-width: 900px) {
  .steps { height: calc(var(--n) * 90vh); }
  .steps__sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .stage { display: block; height: min(78vh, 640px); }
  .panel {
    position: absolute; inset: 0; padding: 44px 36px; justify-content: center; gap: 36px;
    opacity: 0; transform: scale(.96); transition: opacity .7s var(--ease), transform .9s var(--ease);
  }
  .panel.is-active { opacity: 1; transform: none; }
  .panel__m { display: none; }
  .copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
  .words { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .word {
    position: relative; border: 0; background: none; padding: 0 0 0 0; cursor: pointer;
    font: 400 clamp(2rem, 3.4vw, 3rem)/1.1 var(--serif); color: var(--ink-3); letter-spacing: -0.02em; transition: color .4s var(--ease);
  }
  .word:hover { color: var(--ink-2); }
  .word.is-active { color: var(--ink); padding-left: 22px; }
  .word.is-active::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -2px; border-radius: 50%; background: var(--terra); }
  .descs { display: grid; max-width: 44ch; }
  .desc { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); color: var(--ink-2); }
  .desc.is-active { opacity: 1; transform: none; }
  .progress { width: 100%; max-width: 320px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
  .progress span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
}

/* ---------- Stories carousel ---------- */
.stories { padding: clamp(96px, 12vw, 160px) 0 0; }
.stories__ctl { display: flex; gap: 8px; align-items: center; margin: 28px 0 40px; }
.track {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; cursor: grab;
  padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter);
}
.track::-webkit-scrollbar { display: none; }
.track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.track.is-drag * { pointer-events: none; user-select: none; }
.scard { flex: none; scroll-snap-align: start; height: 420px; border-radius: 22px; margin: 0; overflow: hidden; position: relative; }
.scard--photo { width: min(72vw, 300px); }
.scard--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.scard--photo:hover img { transform: scale(1.05); }
.scard--photo figcaption { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 7px 12px; border-radius: 999px; font-size: .78rem; color: #fff; background: rgba(4,38,43,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; }
.scard--stat, .scard--quote { width: min(84vw, 400px); background: var(--sand); padding: 28px; display: flex; flex-direction: column; }
.scard--stat .big { font: 400 clamp(3.4rem, 5vw, 4.4rem)/1 var(--serif); letter-spacing: -0.03em; margin: auto 0 14px; }
.scard--stat p:not(.big) { color: var(--ink-2); }
.more { margin-top: 20px; font-weight: 600; font-size: .9rem; text-decoration: none; }
.more span { display: inline-block; transition: transform .35s var(--ease); }
.more:hover span { transform: translateX(4px); }
.scard--stat .chip { align-self: flex-start; background: #fff; }
.scard--quote { background: var(--terra); color: #fff; }
.brandword { font-size: 1.1rem; } .brandword b { font-weight: 800; }
.scard--quote blockquote { margin: auto 0 20px; font: 400 1.55rem/1.25 var(--serif); }
.who { font-size: .88rem; color: rgba(255,255,255,.85); } .who b { color: #fff; }

/* ---------- Team ---------- */
.team { padding: clamp(96px, 12vw, 160px) 0 0; }
.sub { color: var(--ink-2); margin-top: 16px; max-width: 46ch; }
.people { display: grid; gap: 22px; margin-top: 48px; }
@media (min-width: 720px) { .people { grid-template-columns: repeat(3, 1fr); } }
.person__img { position: relative; aspect-ratio: 4 / 4.6; border-radius: 22px; overflow: hidden; margin-bottom: 16px; background: var(--sand); }
.person__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.2s var(--ease); }
.person__bio {
  position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; border-radius: 16px; font-size: .88rem; line-height: 1.45;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(calc(100% + 14px)); transition: transform .6s var(--ease);
}
.person:hover .person__img img { transform: scale(1.05); }
.person:hover .person__bio, .person:focus-within .person__bio { transform: none; }
@media (hover: none) { .person__bio { transform: none; } }
.person h3 { font-size: 1.6rem; }
.role { color: var(--ink-2); font-size: .9rem; margin-top: 4px; }

/* ---------- Feature card over photo ---------- */
.feature { position: relative; margin-top: clamp(96px, 12vw, 160px); min-height: 92vh; display: grid; place-items: center; overflow: hidden; padding: 80px var(--gutter); }
.feature__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.feature__bg img, .final__bg img { width: 100%; height: 120%; object-fit: cover; margin-top: -10%; will-change: transform; }
.feature__card {
  background: #fff; border-radius: 22px; padding: clamp(32px, 5vw, 56px); max-width: 640px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px; box-shadow: 0 40px 80px -40px rgba(4,38,43,.5);
}
.feature__card h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.feature__card p { color: var(--ink-2); max-width: 44ch; }

/* ---------- FAQ ---------- */
.faq { padding: clamp(96px, 12vw, 160px) 0; }
.faq__list { max-width: 760px; margin: 48px auto 0; padding: 0 var(--gutter); }
.qa { border-bottom: 1px solid var(--line); }
.qa__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; text-align: left;
  padding: 22px 0; border: 0; background: none; cursor: pointer; font-size: 1.05rem; font-weight: 500;
}
.qa__ic { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--sand); transition: background .3s, transform .5s var(--ease); }
.qa__ic::before, .qa__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--ink); }
.qa__ic::after { transform: rotate(90deg); }
.qa__q:hover .qa__ic { background: var(--butter); }
.qa.is-open .qa__ic { transform: rotate(45deg); background: var(--butter); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.qa__a > div { overflow: hidden; }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a p { color: var(--ink-2); padding: 0 56px 24px 0; }

/* ---------- Final CTA ---------- */
.final { position: relative; min-height: 92vh; display: grid; place-items: center; overflow: hidden; color: #fff; text-align: center; border-radius: 32px 32px 0 0; isolation: isolate; }
.final__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.final__bg img { filter: blur(10px) saturate(1.1); transform: scale(1.1); }
.final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,40,45,.35), rgba(3,40,45,.55)); }
.final__inner { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 0 var(--gutter); }
.final h2 { font-size: clamp(2.3rem, 5vw, 4.4rem); max-width: 16ch; }
.final__mail { font-size: .9rem; color: rgba(255,255,255,.85); }
.final__mail a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); }

/* ---------- Footer ---------- */
.footer { background: var(--bg); padding: 64px 0 28px; }
.footer__top { display: grid; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .footer__top { grid-template-columns: 1fr 1.4fr; align-items: start; } }
.footer__brand { display: flex; flex-direction: column; gap: 18px; }
.footer__claim { font: 400 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--serif); max-width: 14ch; }
.offices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 640px) { .offices { grid-template-columns: repeat(4, 1fr); } }
.otag { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.offices p { color: var(--ink-2); font-size: .88rem; line-height: 1.5; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; font-size: .8rem; color: var(--ink-3); }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer__bottom a { text-decoration: none; } .footer__bottom a:hover { color: var(--ink); }

/* ---------- Consultation sheet ---------- */
.sheet {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(520px, 100vw); max-width: 100vw; border: 0; padding: 0;
  background: var(--bg); color: var(--ink); border-radius: 26px 0 0 26px; box-shadow: -30px 0 80px -40px rgba(4,38,43,.5);
}
.sheet[open] { animation: sheet-in .55s var(--ease); }
@keyframes sheet-in { from { transform: translateX(40px); opacity: 0; } }
.sheet::backdrop { background: rgba(10,40,44,.42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sheet__form { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 36px clamp(22px, 4vw, 40px); min-height: 100%; }
.sheet__form .chip { align-self: flex-start; }
.sheet h2 { font-size: 2.2rem; }
.sheet__lead { color: var(--ink-2); font-size: .95rem; }
.sheet__close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--sand); cursor: pointer; font-size: 1.4rem; line-height: 1; transition: background .3s, transform .4s var(--ease); }
.sheet__close:hover { background: var(--butter); transform: rotate(90deg); }
.sheet label > span, .seg legend { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.sheet input[type="text"], .sheet input[type="email"], .sheet textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; transition: border-color .25s, box-shadow .25s;
}
.sheet textarea { resize: vertical; }
.sheet input:focus, .sheet textarea:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 4px rgba(6,86,96,.12); }
.sheet .is-invalid { border-color: #C2493A; }
.seg { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.seg legend { width: 100%; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sheet .seg label span { text-transform: none; letter-spacing: 0; margin: 0; color: var(--ink); }
.seg label span { display: block; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .88rem; font-weight: 600; transition: all .25s; }
.seg input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--terra); outline-offset: 2px; }
.form__note { font-size: .88rem; color: var(--ink-2); min-height: 1.3em; }

/* =========================================================
   Reference style: full-bleed photo hero, bar nav, boxed buttons
   ========================================================= */

/* Boxed button with an arrow tile (used everywhere) */
.pbtn {
  height: auto; min-height: 52px; padding: 5px 5px 5px 24px; gap: 26px; border-radius: 0;
  font: 500 .95rem/1 var(--sans); letter-spacing: -0.005em; box-shadow: none; border: 0;
}
.pbtn::after {
  content: ""; flex: none; width: 42px; height: 42px;
  background: var(--terra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 12h7M12.5 9l3 3-3 3'/%3E%3C/svg%3E") 50% 50% / 22px no-repeat;
  transition: background-color .35s var(--ease), background-position .45s var(--ease);
}
.pbtn:hover::after { background-color: var(--ink); background-position: 70% 50%; }
.pbtn--light, .pbtn--ghost, .pbtn--outline { background: #fff; color: var(--ink); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pbtn--light:hover, .pbtn--ghost:hover, .pbtn--outline:hover { background: #fff; color: var(--ink); }
.pbtn--outline { outline: 1px solid var(--line); outline-offset: -1px; }
.pbtn--outline:hover { outline-color: var(--ink); }
.pbtn--dark { background: var(--ink); color: #fff; min-height: 56px; justify-content: space-between; }
.pbtn--dark:hover { background: var(--ink); }
.pbtn--dark:hover::after { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2622' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 12h7M12.5 9l3 3-3 3'/%3E%3C/svg%3E"); }
.round { border-radius: 0; width: 52px; height: 52px; border-color: var(--line); background: #fff; }
.round:hover { border-color: var(--ink); }

/* Bar nav that sits on the photo, then turns solid */
.nav { top: 0; left: 0; right: 0; display: block; transition: transform .5s var(--ease), background .4s var(--ease), box-shadow .4s; }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 88px; }
.nav .brand { color: #fff; margin: 0; gap: 12px; transition: color .4s; }
.nav .brand__mark { width: 34px; height: 34px; background: none; }
.nav .brand__mark svg { width: 34px; height: 34px; stroke: currentColor; stroke-width: 1.5; }
.nav .brand__name { font: 450 1.35rem/1 var(--serif); letter-spacing: -0.015em; }
.nav__links { gap: 34px; }
.nav__links a { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; border-radius: 0; background: none !important; color: rgba(255,255,255,.88); font-size: .98rem; font-weight: 450; }
.nav__links a::before { content: ""; width: 6px; height: 6px; background: currentColor; transition: transform .35s var(--ease), background .3s; }
.nav__links a:hover, .nav__links a.is-active { color: #fff; }
.nav__links a:hover::before, .nav__links a.is-active::before { transform: rotate(45deg); background: var(--butter); }
.nav__end { display: flex; align-items: center; gap: 10px; }
.nav__cta { min-height: 50px; }
.nav__toggle { background: rgba(255,255,255,.16); border-radius: 0; width: 46px; height: 46px; margin: 0; }
.nav__toggle span { background: #fff; }
.nav.is-solid { background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav.is-solid .nav__bar { height: 76px; }
.nav.is-solid .brand { color: var(--ink); }
.nav.is-solid .nav__links a { color: var(--ink-2); }
.nav.is-solid .nav__links a:hover, .nav.is-solid .nav__links a.is-active { color: var(--ink); }
.nav.is-solid .nav__links a:hover::before, .nav.is-solid .nav__links a.is-active::before { background: var(--terra); }
.nav.is-solid .nav__cta { outline: 1px solid var(--line); outline-offset: -1px; }
.nav.is-solid .nav__toggle { background: var(--sand); }
.nav.is-solid .nav__toggle span { background: var(--ink); }
.mobile-menu { top: 84px; left: var(--gutter); right: var(--gutter); border-radius: 0; }
@media (max-width: 899px) { .nav__links { display: none; } }
@media (max-width: 560px) {
  .nav .brand__name { font-size: 1.1rem; }
  .nav__cta { display: none; }
}

/* Full-bleed photo hero, content bottom-left */
.hero { height: 100svh; min-height: 660px; max-height: none; border-radius: 0; display: flex; align-items: flex-end; text-align: left; place-items: initial; }
.hero::after {
  background:
    linear-gradient(0deg, rgba(3,34,38,.88) 0%, rgba(3,34,38,.45) 42%, rgba(3,34,38,.12) 75%),
    linear-gradient(90deg, rgba(3,34,38,.55) 0%, rgba(3,34,38,0) 60%),
    linear-gradient(180deg, rgba(3,34,38,.45) 0%, rgba(3,34,38,0) 18%);
}
.hbg img { object-position: 60% 35%; }
.hero__inner { width: 100%; max-width: var(--max); padding: 0 var(--gutter) clamp(40px, 7vh, 72px); display: grid; gap: 40px; align-items: end; }
.hero__main { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 760px; }
.hero__title { font-size: clamp(2.5rem, 4.6vw, 4.4rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 18ch; font-weight: 450; }
.hero__lead { color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.25vw, 1.15rem); max-width: 58ch; }
.hero__main .pbtn { margin-top: 10px; }
.hero__side { display: flex; flex-direction: column; gap: 18px; color: #fff; }
.hero__side p { font-size: 1.05rem; color: rgba(255,255,255,.85); }
.hero__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.hero__logos li { color: rgba(255,255,255,.85); font-size: 1.05rem; white-space: nowrap; }
.hero__logos b { font-weight: 700; }
.hero__logos .l2 { font-weight: 700; letter-spacing: .14em; }
.hero__logos .l3 { font-family: Georgia, serif; font-style: italic; font-size: 1.2rem; }
.hero__logos i { font-style: normal; color: var(--butter); }
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr auto; }
  .hero__side { align-items: flex-end; text-align: right; padding-bottom: 6px; }
}

/* =========================================================
   Layout: 100px side padding on desktop
   ========================================================= */
:root { --gutter: 20px; --max: 1720px; }
@media (min-width: 768px) { :root { --gutter: 48px; } }
@media (min-width: 1200px) { :root { --gutter: 100px; } }

/* Shared section rhythm (PDF order) */
.about, .challenge, .values, .apart, .market, .approach { padding: clamp(88px, 10vw, 140px) 0 0; }
.chip + h2 { margin-top: 18px; }
.center .chip { align-self: center; }

/* Who we are + vision & mission */
.about__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .about__grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; } }
.about__lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-2); line-height: 1.6; }
.about__quote { margin: 28px 0 0; padding-left: 20px; border-left: 2px solid var(--terra); font: 450 clamp(1.3rem, 2vw, 1.7rem)/1.3 var(--serif); letter-spacing: -0.01em; }
.vm { display: grid; gap: 16px; margin-top: 56px; }
@media (min-width: 768px) { .vm { grid-template-columns: 1fr 1fr; } }
.vm__card {
  position: relative; overflow: hidden; min-height: 260px; padding: 36px; border-radius: 24px; background: var(--sand);
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px; transition: transform .6s var(--ease);
}
.vm__card:hover { transform: translateY(-4px); }
.vm__card p { font: 450 clamp(1.6rem, 2.6vw, 2.3rem)/1.2 var(--serif); letter-spacing: -0.015em; max-width: 20ch; }
.vm__k { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--terra); }
.vm__card--dark { background: var(--terra); color: #fff; }
.vm__card--dark .vm__k { color: var(--butter); }
.vm__card::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid currentColor; opacity: .12; transition: transform 1s var(--ease); }
.vm__card:hover::after { transform: scale(1.2); }

/* Stakeholders */
.sh-grid { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 640px) { .sh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sh-grid { grid-template-columns: repeat(4, 1fr); } }
.sh {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 360px; padding: 28px; border-radius: 22px;
  background: var(--sand); overflow: hidden; transition: background .5s var(--ease), color .5s var(--ease);
}
.sh__ic { width: 48px; height: 48px; border-radius: 14px; background: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.sh__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--terra); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sh h3 { font-size: 1.4rem; }
.sh__need { color: var(--ink-2); transition: color .5s; }
.sh__gap { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); transition: border-color .5s; }
.sh__gap span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--terra); margin-bottom: 6px; transition: color .5s; }
.sh__gap p { font-size: .92rem; color: var(--ink-2); transition: color .5s; }
.sh:hover { background: var(--terra); color: #fff; }
.sh:hover .sh__need, .sh:hover .sh__gap p { color: rgba(255,255,255,.85); }
.sh:hover .sh__gap { border-color: rgba(255,255,255,.2); }
.sh:hover .sh__gap span { color: var(--butter); }

/* Solutions head chip */
.solutions .center h2 { max-width: 22ch; }

/* Value we deliver — 5P expanding panels */
.values__head { display: grid; gap: 24px; }
.values__head p { color: var(--ink-2); max-width: 52ch; }
@media (min-width: 1024px) { .values__head { grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: end; } }
.vals { display: grid; gap: 12px; margin-top: 48px; }
.val { position: relative; padding: 26px; border-radius: 22px; background: var(--sand); outline: none; cursor: default; transition: background .6s var(--ease), color .6s var(--ease), flex-grow .7s var(--ease); }
.val__n { display: block; font-size: .8rem; font-weight: 600; color: var(--terra); margin-bottom: 40px; transition: color .5s; }
.val h3 { font-size: 1.45rem; margin-bottom: 10px; }
.val p { color: var(--ink-2); transition: color .5s; }
@media (min-width: 1024px) {
  .vals { display: flex; height: 400px; }
  .val { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
  .val h3 { margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .val p { max-height: 0; opacity: 0; transition: opacity .5s var(--ease), max-height .7s var(--ease), color .5s; }
  .val.is-active { flex-grow: 2.6; background: var(--terra); color: #fff; }
  .val.is-active h3 { white-space: normal; }
  .val.is-active p { max-height: 160px; opacity: 1; color: rgba(255,255,255,.86); }
  .val.is-active .val__n { color: var(--butter); }
}

/* Belief card reuses .feature */
.feature__card .chip { align-self: center; }

/* What sets us apart */
.apart__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .apart__grid { grid-template-columns: 1fr 1.3fr; gap: 80px; } .apart__head { position: sticky; top: 120px; align-self: start; } }
.apart__head p { color: var(--ink-2); margin-top: 18px; max-width: 42ch; }
.edges__th { display: none; }
.edge { position: relative; display: grid; gap: 8px; padding: 28px 0; border-top: 1px solid var(--line); transition: padding .5s var(--ease); }
.edge:last-child { border-bottom: 1px solid var(--line); }
.edge::before { content: ""; position: absolute; inset: 0 -20px; border-radius: 16px; background: var(--sand); opacity: 0; transition: opacity .4s; z-index: -1; }
.edge { isolation: isolate; }
.edge:hover::before { opacity: 1; }
.edge__n { font-size: .8rem; font-weight: 600; color: var(--terra); }
.edge h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.edge p { color: var(--ink-2); }
@media (min-width: 768px) {
  .edges__th { display: grid; grid-template-columns: 48px 1fr 1.3fr; gap: 24px; padding-bottom: 14px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .edges__th span:first-child { grid-column: 2; }
  .edge { grid-template-columns: 48px 1fr 1.3fr; gap: 24px; align-items: baseline; }
}

/* Market validation */
.market__grid { display: grid; gap: 40px; }
.market__head p { color: var(--ink-2); margin-top: 18px; max-width: 48ch; }
.stats { display: grid; border-top: 1px solid var(--ink); }
.stat { padding: 26px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.stat b { font: 450 clamp(3.4rem, 7vw, 6rem)/1 var(--serif); letter-spacing: -0.03em; color: var(--terra); font-variant-numeric: tabular-nums; }
.stat p { color: var(--ink-2); max-width: 30ch; }
@media (min-width: 1024px) {
  .market__grid { grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
  .stat { grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
  .stat p { justify-self: end; text-align: right; }
}
.footnote { margin-top: 16px; font-size: .75rem; color: var(--ink-3); }

/* How we work — steps with a line that fills on scroll */
.flow { --p: 0; position: relative; display: grid; gap: 28px; margin-top: 56px; }
.flow__line { display: none; }
.flow__step { position: relative; padding: 0 0 0 64px; }
.flow__n {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; font-size: .82rem; font-weight: 600; color: var(--ink-3);
  transition: background .5s var(--ease), color .5s, border-color .5s, transform .6s var(--ease);
}
.flow__step.is-on .flow__n { background: var(--terra); border-color: var(--terra); color: #fff; transform: scale(1.06); }
.flow__step h3 { font-size: 1.4rem; margin: 8px 0 8px; }
.flow__step p { color: var(--ink-2); max-width: 34ch; }
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .flow__line { display: block; position: absolute; left: var(--gutter); right: var(--gutter); top: 22px; height: 1px; background: var(--line); }
  .flow__line span { display: block; height: 100%; background: var(--terra); transform-origin: left; transform: scaleX(var(--p)); }
  .flow__step { padding: 72px 0 0; }
  .flow__step h3 { margin-top: 0; }
}

/* Team spacing after the chip */
.team .chip + h2 { margin-top: 18px; }

/* Partners: copy block over the floating cards */
.trusted { margin-top: clamp(64px, 8vw, 120px); }
.trusted__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; pointer-events: none; padding: 0 var(--gutter); }
.trusted__copy .chip { background: #fff; }
.trusted__copy p { color: var(--ink-2); max-width: 46ch; }
.trusted__title { max-width: 20ch; padding: 0; }

/* Final CTA chip */
.final .chip { align-self: center; }

/* =========================================================
   Interaction layer
   ========================================================= */

/* Intro curtain (auto-hides even if the script fails) */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--terra); color: #fff;
  clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.77, 0, .18, 1);
  animation: loader-failsafe 0s 4s forwards;
}
.loader.is-done { clip-path: inset(0 0 100% 0); }
@keyframes loader-failsafe { to { visibility: hidden; } }
.loader__in { display: flex; align-items: center; gap: 14px; font: 450 clamp(1.4rem, 2.4vw, 2rem)/1 var(--serif); letter-spacing: -0.015em; opacity: 0; transform: translateY(14px); animation: loader-in .8s var(--ease) .1s forwards; }
.loader__mark svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 1.5; animation: spin 2.4s var(--ease) infinite; }
.loader__bar { position: absolute; left: 50%; top: calc(50% + 48px); width: 160px; height: 2px; transform: translateX(-50%); background: rgba(255,255,255,.2); overflow: hidden; }
.loader__bar i { display: block; height: 100%; background: var(--butter); transform-origin: left; transform: scaleX(0); animation: loader-bar 1.1s var(--ease) .15s forwards; }
@keyframes loader-in { to { opacity: 1; transform: none; } }
@keyframes loader-bar { to { transform: scaleX(1); } }
@keyframes spin { to { transform: rotate(180deg); } }

/* Reading progress */
.sprog { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 120; pointer-events: none; }
.sprog span { display: block; height: 100%; background: var(--ochre); transform-origin: left; transform: scaleX(0); }

/* Custom cursor ring (native cursor stays for accessibility) */
.cursor { position: fixed; left: 0; top: 0; z-index: 350; pointer-events: none; mix-blend-mode: normal; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor__dot { width: 6px; height: 6px; background: var(--terra); transition: opacity .3s; }
.cursor__ring {
  width: 34px; height: 34px; border: 1px solid rgba(6,86,96,.45); display: grid; place-items: center;
  transition: width .45s var(--ease), height .45s var(--ease), background .35s, border-color .35s;
}
.cursor__ring em { font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: #fff; opacity: 0; transition: opacity .25s; white-space: nowrap; }
.cursor.is-link .cursor__ring { width: 56px; height: 56px; background: rgba(6,86,96,.08); border-color: transparent; }
.cursor.is-label .cursor__ring { width: 78px; height: 78px; background: var(--terra); border-color: transparent; }
.cursor.is-label .cursor__ring em { opacity: 1; }
.cursor.is-label .cursor__dot, .cursor.is-link .cursor__dot { opacity: 0; }
.cursor.is-dark .cursor__ring { border-color: rgba(255,255,255,.6); }
.cursor.is-dark .cursor__dot { background: #fff; }
.cursor.is-hidden { opacity: 0; }

/* Section headings rise word by word */
.split .hw > span { transition-delay: calc(var(--i) * 45ms); }
.split.is-in .hw > span { transform: none; }

/* Scroll-scrubbed quote */
[data-scrub] .w { opacity: .18; transition: opacity .3s linear; }
[data-scrub] .w.on { opacity: 1; }

/* Hero: mouse parallax + shrinks into a card as you scroll */
.hero { --hs: 0; --mx: 0; --my: 0; clip-path: inset(calc(var(--hs) * 18px) round calc(var(--hs) * 28px)); }
.hero__bg { transform: translate3d(calc(var(--mx) * -16px), calc(var(--my) * -12px), 0) scale(calc(1.06 + var(--hs) * .06)); transition: transform .9s var(--ease); }
.hero__inner { transform: translateY(calc(var(--hs) * -70px)); opacity: calc(1 - var(--hs) * 1.1); }

/* Tilt + glare */
.tilt, .tilt:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease), background .5s var(--ease), color .5s var(--ease); will-change: transform; }
.tilt::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.35), transparent 55%); mix-blend-mode: soft-light;
}
.tilt:hover::before { opacity: 1; }
.sh__ic svg path, .sh__ic svg circle { stroke-dasharray: 80; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease); }
.sh:hover .sh__ic svg path, .sh:hover .sh__ic svg circle { animation: draw 1.2s var(--ease); }
@keyframes draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
.sh:hover .sh__ic { background: rgba(255,255,255,.12); }
.sh:hover .sh__ic svg { stroke: #fff; }

/* About: photo with parallax and a floating badge */
@media (min-width: 1024px) { .about__grid { align-items: center; grid-template-columns: 1fr 1fr; } }
.about__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.about__text h2 { margin-top: 0; }
.about__quote { margin-top: 12px; }
.about__media { position: relative; margin: 0; aspect-ratio: 4 / 3.4; border-radius: 26px; overflow: hidden; background: var(--sand); }
.about__media img { width: 100%; height: 116%; margin-top: -8%; object-fit: cover; will-change: transform; }
.about__badge {
  position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 14px; max-width: 300px;
  padding: 14px 18px; border-radius: 18px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px -24px rgba(4,38,43,.5); animation: bob 6s ease-in-out infinite;
}
.about__badge b { font: 450 2.2rem/1 var(--serif); color: var(--terra); letter-spacing: -0.02em; }
.about__badge > span:last-child { font-size: .85rem; color: var(--ink-2); line-height: 1.35; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* "What sets us apart": photo preview follows the cursor */
.peek {
  position: fixed; left: 0; top: 0; z-index: 90; width: 300px; height: 210px; border-radius: 18px; overflow: hidden; pointer-events: none;
  opacity: 0; transform: translate3d(var(--px, 0), var(--py, 0), 0) translate(-50%, -50%) rotate(var(--pr, 0deg)) scale(.85);
  transition: opacity .35s var(--ease), scale .5s var(--ease); box-shadow: 0 30px 60px -30px rgba(4,38,43,.55);
}
.peek.on { opacity: 1; scale: 1.18; }
.peek img { width: 100%; height: 100%; object-fit: cover; }
.edge { cursor: default; }
.edge h3 { transition: transform .5s var(--ease), color .4s; }
.edge:hover h3 { transform: translateX(10px); color: var(--terra); }

/* Market: ECG line drawn with scroll */
.market { position: relative; }
.ecg { position: absolute; left: 0; top: 34px; width: 100%; height: 90px; pointer-events: none; overflow: visible; }
.ecg path { fill: none; stroke: var(--ochre); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .7; }
.stat b { display: inline-block; transition: transform .6s var(--ease); }
.stat:hover b { transform: translateX(8px); }

/* Kinetic type, speed follows scroll */
.kinetic { overflow: hidden; padding: clamp(72px, 9vw, 130px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: clamp(64px, 8vw, 120px); }
.kinetic__track { display: flex; align-items: center; gap: .35em; width: max-content; white-space: nowrap; will-change: transform;
  font: 450 clamp(3.4rem, 9vw, 8.5rem)/1 var(--serif); letter-spacing: -0.035em; color: var(--terra); }
.kinetic__track .o { color: transparent; -webkit-text-stroke: 1.5px var(--terra); }
.kinetic__track i { font-style: normal; font-size: .45em; color: var(--ochre); }

/* Final CTA: let the closing photo slowly zoom */
.final__bg img { transition: transform 1.2s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .js .loader, .cursor, .peek { display: none !important; }
  .hero { clip-path: none; } .hero__inner { transform: none; opacity: 1; }
  [data-scrub] .w { opacity: 1; }
}
@media (hover: none) { .cursor, .peek { display: none !important; } }

/* =========================================================
   Hero — centered, video background (Lassie-style structure)
   ========================================================= */
.hero.hero--video { display: grid; place-items: center; text-align: center; align-items: center; }
.hero--video .hero__bg { overflow: hidden; background: var(--terra); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--video::after {
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(3,34,38,.38), rgba(3,34,38,.62)),
    linear-gradient(180deg, rgba(3,34,38,.35) 0%, rgba(3,34,38,0) 25%, rgba(3,34,38,0) 70%, rgba(3,34,38,.5) 100%);
}
.hero__center { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 120px var(--gutter) 160px; max-width: 1100px; width: 100%; }
.hero--video .hero__title { font-size: clamp(2.5rem, 5vw, 4.6rem); line-height: 1.06; letter-spacing: -0.025em; max-width: 24ch; margin: 0 auto; }
.hero--video .hero__title .soft { display: block; font-weight: 300; color: rgba(255,255,255,.78); }
.hero__sub { font-size: clamp(1rem, 1.3vw, 1.12rem); color: rgba(255,255,255,.88); max-width: 46ch; }
.ticker {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 16px 8px 10px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: .92rem; color: rgba(255,255,255,.92);
}
.ticker__ic { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--butter); display: grid; place-items: center; transition: transform .6s var(--ease); }
.ticker__ic svg { width: 14px; height: 14px; fill: none; stroke: var(--terra); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ticker.is-swap .ticker__ic { transform: rotate(-180deg) scale(.8); }
.ticker__txt { white-space: nowrap; }
.ticker__txt::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 3px; vertical-align: -2px; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (max-width: 560px) { .ticker { font-size: .8rem; max-width: 100%; } .ticker__txt { white-space: normal; text-align: left; } }
.hero__cta { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 56px); display: flex; justify-content: center; pointer-events: none; }
.hero__cta .pbtn { pointer-events: auto; }
.hero--video .hero__cta { opacity: calc(1 - var(--hs) * 1.4); }
.hero__sound {
  position: absolute; right: var(--gutter); bottom: clamp(28px, 6vh, 56px); width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; gap: 4px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .3s;
}
.hero__sound:hover { background: rgba(255,255,255,.22); }
.hero__sound span { width: 2px; height: 12px; background: #fff; border-radius: 1px; }
.hero__sound[aria-pressed="true"] span:first-child { width: 0; height: 0; background: none; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-radius: 0; }
.hero__sound[aria-pressed="true"] span:last-child { display: none; }
@media (max-width: 767px) { .hero__sound { width: 38px; height: 38px; bottom: auto; top: 84px; } }

/* =========================================================
   Lassie-style navbar + pill buttons
   ========================================================= */

/* Pill buttons with a round arrow chip (used across the page) */
.pbtn { border-radius: 999px; min-height: 54px; padding: 6px 6px 6px 24px; gap: 18px; font-weight: 600; letter-spacing: -0.005em; }
.pbtn::after {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--terra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") 50% 50% / 18px no-repeat;
  transition: transform .55s var(--ease), background-color .35s var(--ease);
}
.pbtn:hover::after { transform: rotate(-45deg); background-color: var(--ink); background-position: 50% 50%; }
.pbtn--outline { outline: 0; box-shadow: inset 0 0 0 1px var(--line); }
.pbtn--outline:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.pbtn--dark { border-radius: 999px; }
.pbtn--dark:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2D30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.pbtn--sm { min-height: 44px; padding: 4px 4px 4px 18px; gap: 12px; font-size: .88rem; }
.pbtn--sm::after { width: 36px; height: 36px; background-size: 16px; }
.round { border-radius: 50%; }

/* Navbar: centered glass pill + action pills on the right */
.nav {
  top: 14px; left: var(--gutter); right: var(--gutter); display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.nav__group {
  display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; margin-right: auto;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  transition: background .45s var(--ease), border-color .45s, box-shadow .45s;
}
@media (min-width: 900px) { .nav__group { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; } }
.nav .brand { height: 40px; padding: 0 14px 0 8px; border-radius: 999px; background: #fff; color: var(--ink); gap: 8px; margin: 0; transition: background .4s; }
.nav .brand__mark, .nav .brand__mark svg { width: 24px; height: 24px; }
.nav .brand__mark svg { stroke: var(--terra); stroke-width: 1.8; }
.nav .brand__name { font: 600 .98rem/1 var(--sans); letter-spacing: -0.01em; }
.nav__links { gap: 2px; }
.nav__links a {
  height: 40px; padding: 0 15px; border-radius: 999px !important; gap: 0; color: rgba(255,255,255,.92); font-size: .88rem; font-weight: 500;
  transition: background .3s var(--ease), color .3s;
}
.nav__links a::before { display: none; }
.nav__links a:hover, .nav__links a.is-active { background: rgba(255,255,255,.18) !important; color: #fff; }
.nav__toggle { width: 40px; height: 40px; border-radius: 50%; margin-left: 2px; background: rgba(255,255,255,.18); }
.nav__end { display: flex; align-items: center; gap: 6px; }
.nbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 600 .88rem/1 var(--sans); color: #fff; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background .35s var(--ease), color .35s, border-color .35s, transform .4s var(--ease);
}
.nbtn:hover { background: rgba(255,255,255,.26); }
.nbtn i { display: grid; place-items: center; width: 26px; height: 26px; margin-right: -10px; border-radius: 50%; background: var(--terra); transition: transform .5s var(--ease), background .35s; }
.nbtn i svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nbtn:hover i { transform: rotate(-45deg); }
.nbtn--accent { background: #fff; color: var(--ink); border-color: transparent; padding-right: 14px; }
.nbtn--accent:hover { background: #fff; }

/* Solid state after scrolling */
.nav.is-solid .nav__group { background: rgba(255,255,255,.94); border-color: var(--line); box-shadow: 0 10px 30px -18px rgba(10,40,44,.35); }
.nav.is-solid .brand { background: var(--sand); }
.nav.is-solid .nav__links a { color: var(--ink-2); }
.nav.is-solid .nav__links a:hover, .nav.is-solid .nav__links a.is-active { background: var(--sand) !important; color: var(--ink); }
.nav.is-solid .nav__toggle { background: var(--sand); }
.nav.is-solid .nbtn { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 10px 30px -18px rgba(10,40,44,.35); }
.nav.is-solid .nbtn--accent { background: var(--terra); color: #fff; border-color: var(--terra); }
.nav.is-solid .nbtn--accent i { background: rgba(255,255,255,.18); }
.mobile-menu { top: 62px; left: 0; right: 0; border-radius: 22px; }
@media (max-width: 899px) { .nav__links { display: none; } }
@media (max-width: 560px) { .nbtn--ghost { display: none; } .nbtn { height: 46px; padding: 0 16px; } .nbtn--accent { padding-right: 12px; } }

/* Logo on the left as its own glass pill */
/* Logo on the left, no container: line mark + wordmark */
.nav > .brand {
  height: 48px; padding: 0; margin-right: auto; gap: 12px; border-radius: 0; color: #fff;
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: color .45s var(--ease);
}
.nav > .brand .brand__mark { width: 34px; height: 34px; background: none; border-radius: 0; }
.nav > .brand .brand__mark svg { width: 34px; height: 34px; stroke: currentColor; stroke-width: 1.5; }
.nav > .brand .brand__name { font: 450 1.35rem/1 var(--serif); letter-spacing: -0.015em; }
/* Adaptive logo colour: black on light backgrounds, white on dark ones */
.nav > .brand, .nav.is-solid > .brand { color: var(--ink); transition: color .35s var(--ease); }
.nav.on-dark > .brand, .nav.is-solid.on-dark > .brand { color: #fff; }
.nav.is-solid > .brand { background: none; box-shadow: none; }
.nav.is-solid > .brand .brand__mark { background: none; }
.nav__group { margin-right: 0; }
@media (max-width: 899px) { .nav__group { padding: 3px; } }
@media (max-width: 420px) { .nav > .brand .brand__name { font-size: 1.15rem; } }

.mobile-menu__cta { margin-top: 14px; }
@media (min-width: 481px) { .mobile-menu__cta { display: none; } }
@media (max-width: 480px) { .nav__end { display: none; } }

/* Nav CTA uses the same pill as "Book now"; FAQ pill matches its height */
.nav__end .nbtn { height: 44px; }
.nav.is-solid .nav__cta2 { box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px -18px rgba(10,40,44,.35); }

/* Hero CTA: Lassie-style glass capsule */
.cta-pill {
  display: inline-flex; align-items: center; gap: 14px; padding: 6px 6px 6px 22px; border-radius: 999px; pointer-events: auto;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.45);
}
.cta-pill__txt { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.9); font-size: .92rem; white-space: nowrap; }
.cta-pill__txt i { width: 8px; height: 8px; border-radius: 50%; background: var(--butter); box-shadow: 0 0 0 0 rgba(143,211,220,.7); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(143,211,220,0); } 100% { box-shadow: 0 0 0 0 rgba(143,211,220,0); } }
@media (max-width: 420px) { .cta-pill { padding-left: 16px; gap: 10px; } .cta-pill__txt { font-size: .8rem; } }

/* Ticker: plain Lassie-style line (no capsule) */
.hero .ticker {
  min-height: 24px; padding: 0; gap: 10px; border: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  font-size: .95rem; font-weight: 400; color: rgba(255,255,255,.78); letter-spacing: -0.005em;
}
.hero .ticker__ic { width: 18px; height: 18px; background: none; border: 1.5px solid rgba(255,255,255,.7); border-radius: 5px; }
.hero .ticker__ic svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 2.6; }
.hero .ticker__txt::after { width: 1.5px; opacity: .9; }
@media (max-width: 560px) { .hero .ticker { font-size: .84rem; } }

/* =========================================================
   Round: smaller hero title, context icons, about + vision/mission,
   logomarks, Saraya grainy gradient
   ========================================================= */
.hero--video .hero__title { font-size: clamp(2.35rem, 4.6vw, 4.15rem); }

/* Ticker icon: plain line icon, no box, no animation */
.hero .ticker__ic { width: 20px; height: 20px; border: 0; border-radius: 0; background: none; transform: none !important; transition: none; }
.hero .ticker__ic svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Who we are: stats row */
.about__stats { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.astat { padding: 26px 20px 26px 0; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.astat b { font: 450 clamp(2.2rem, 3.6vw, 3.2rem)/1 var(--serif); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.astat > span { color: var(--ink-2); font-size: .92rem; max-width: 20ch; }
@media (min-width: 900px) {
  .about__stats { grid-template-columns: repeat(4, 1fr); }
  .astat { border-bottom: 0; padding: 30px 24px 0 0; }
  .astat + .astat { padding-left: 24px; border-left: 1px solid var(--line); }
}

/* Saraya grainy gradient (brand surface) */
.grad { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #02252a; z-index: 0; pointer-events: none; }
.grad::before {
  content: ""; position: absolute; inset: -25%;
  background:
    radial-gradient(42% 38% at 78% 28%, rgba(169,226,232,.95), transparent 62%),
    radial-gradient(38% 34% at 62% 52%, rgba(59,169,183,.75), transparent 66%),
    radial-gradient(60% 55% at 88% 80%, rgba(0,127,143,.85), transparent 70%),
    radial-gradient(55% 60% at 12% 18%, rgba(4,52,60,.95), transparent 70%),
    linear-gradient(130deg, #01181b 0%, #03343b 38%, #07707c 68%, #8fd3dc 100%);
  filter: blur(28px); animation: grad-drift 22s ease-in-out infinite alternate;
}
.grad__wave {
  position: absolute; left: -20%; top: 10%; width: 90%; height: 120%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(1,16,19,.92), rgba(1,16,19,0));
  transform: rotate(-32deg); filter: blur(30px); animation: grad-wave 26s ease-in-out infinite alternate;
}
.grad::after {
  content: ""; position: absolute; inset: 0; opacity: .32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grad-drift { to { transform: translate3d(-6%, 4%, 0) scale(1.08) rotate(4deg); } }
@keyframes grad-wave { to { transform: rotate(-24deg) translate3d(8%, -6%, 0); } }

/* Vision & mission */
.vm { gap: 16px; }
@media (min-width: 900px) { .vm { grid-template-columns: 1.25fr 1fr; } }
.vm__card { min-height: 380px; padding: clamp(28px, 3vw, 44px); gap: 32px; }
.vm__card > *:not(.grad) { position: relative; z-index: 1; }
.vm__top { display: flex; justify-content: space-between; align-items: center; }
.vm__idx { font-size: .8rem; font-weight: 600; opacity: .6; }
.vm__card--grad { background: #02252a; color: #fff; }
.vm__card--grad::after { display: none; }
.vm__card--grad .vm__k { color: #fff; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vm__card--grad p { font-size: clamp(1.9rem, 3vw, 2.8rem); max-width: 16ch; margin-top: auto; }
.vm__foot { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.vm__card--mission { background: var(--sand); }
.vm__card--mission .vm__k { padding: 7px 12px; border-radius: 999px; background: #fff; }
.vm__list { display: grid; gap: 0; margin-top: auto; border-top: 1px solid var(--line); }
.vm__list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .98rem; transition: padding .4s var(--ease), color .3s; }
.vm__list li:hover { padding-left: 8px; color: var(--terra); }
.vm__list i { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--terra); }

/* Partner logomarks */
.lmk { display: inline-flex; align-items: center; gap: 8px; }
.lmk svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--terra); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lc span.lmk { color: #5E5E5E; }
@media (max-width: 767px) { .lmk svg { width: 16px; height: 16px; } }

/* Closing CTA on the Saraya gradient */
.final--grad .final__bg img { display: none; }
.final--grad::after { background: linear-gradient(180deg, rgba(2,30,34,.15), rgba(2,30,34,.35)); }
.final--grad .grad { border-radius: 0; }

@media (prefers-reduced-motion: reduce) { .grad::before, .grad__wave { animation: none; } }

/* Who we are — calmer two-column layout */
@media (min-width: 1024px) { .about__grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); align-items: center; } }
.about__text { gap: 22px; }
.about__lead { max-width: 42ch; }
.about__mini { display: flex; gap: clamp(24px, 3vw, 44px); margin-top: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.about__mini li { display: flex; flex-direction: column; gap: 4px; }
.about__mini b { font: 450 clamp(1.8rem, 2.6vw, 2.4rem)/1 var(--serif); letter-spacing: -0.03em; color: var(--terra); font-variant-numeric: tabular-nums; }
.about__mini li > span { font-size: .85rem; color: var(--ink-2); }
.about__media { aspect-ratio: 4 / 4.6; }
.about__quote-card {
  position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 20px 22px; border-radius: 18px; color: #fff;
  background: rgba(3,34,38,.42); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  display: flex; gap: 12px; align-items: flex-start;
}
.about__qmark { font: 400 2.6rem/.8 Georgia, serif; color: var(--butter); }
.about__quote-card p { font: 450 clamp(1.1rem, 1.5vw, 1.35rem)/1.35 var(--serif); letter-spacing: -0.01em; }
.about__stats { display: none; }

/* Who we are — interactive statement */
.about__story { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.statement {
  font: 450 clamp(1.9rem, 3.7vw, 3.5rem)/1.28 var(--serif); letter-spacing: -0.025em; color: var(--ink); max-width: 26ch;
}
@media (min-width: 1200px) { .statement { max-width: 30ch; } }
.ipill {
  display: inline-block; width: 1.9em; height: .95em; margin: 0 .08em; vertical-align: -.1em; border-radius: 999px; overflow: hidden;
  background: var(--sand); transition: width .7s var(--ease), transform .7s var(--ease);
}
.ipill img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ipill:hover { width: 3em; }
.kw {
  font: inherit; letter-spacing: inherit; color: var(--terra); background: none; border: 0; padding: 0; cursor: pointer; position: relative;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 2px;
  transition: background-size .45s var(--ease), color .3s;
}
.kw:hover, .kw:focus-visible, .kw.is-on { background-size: 100% 40%; background-image: linear-gradient(rgba(143,211,220,.45), rgba(143,211,220,.45)); color: var(--ink); outline: none; }
.wordcard {
  position: absolute; left: 0; top: 0; z-index: 5; width: 280px; padding: 8px 8px 14px; border-radius: 20px; background: #fff;
  box-shadow: 0 30px 60px -28px rgba(4,38,43,.45), 0 0 0 1px var(--line); pointer-events: none;
  opacity: 0; transform: translate3d(var(--wx, 0), var(--wy, 0), 0) translateY(10px) scale(.96); transform-origin: top left;
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.wordcard.on { opacity: 1; transform: translate3d(var(--wx, 0), var(--wy, 0), 0); }
.wordcard img { width: 100%; height: 160px; object-fit: cover; border-radius: 14px; display: block; margin-bottom: 12px; }
.wordcard p { font-size: .92rem; line-height: 1.45; color: var(--ink-2); padding: 0 8px; }
.about__foot { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.about__line { display: flex; gap: 10px; align-items: flex-start; font: 450 clamp(1.05rem, 1.4vw, 1.25rem)/1.4 var(--serif); color: var(--ink-2); max-width: 36ch; }
.about__line .about__qmark { color: var(--terra); font-size: 2.2rem; line-height: .8; }
.about__foot .about__mini { margin: 0; padding: 0; border: 0; }

/* Who we are centered; vision & mission equal */
.about__story { align-items: center; text-align: center; }
.about__story .chip { align-self: center; }
.statement { margin: 0 auto; }
.about__foot { flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.about__line { justify-content: center; text-align: center; max-width: 60ch; }
/* More breathing room in Who we are */
.about { padding-top: clamp(110px, 13vw, 190px); }
.about__story { gap: clamp(40px, 5vw, 64px); }
.statement { line-height: 1.36; }
.about__foot { padding-top: 0; border-top: 0; gap: 30px; margin-top: clamp(28px, 4vw, 56px); }

/* Inline photo pills are static */
.ipill, .ipill:hover { width: 1.9em; transition: none; }

/* Keywords: soft teal highlight capsule instead of an underline */
.kw, .kw:hover, .kw:focus-visible, .kw.is-on {
  background-image: none; background-size: auto;
  padding: 0 .12em; margin: 0; border-radius: .22em; line-height: 1.1;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.kw { background-color: rgba(143,211,220,.22); color: var(--terra); transition: background-color .35s var(--ease), color .35s var(--ease); }
.kw:hover, .kw:focus-visible, .kw.is-on { background-color: var(--terra); color: #fff; outline: none; }
.about__mini { gap: clamp(36px, 5vw, 72px); }
.vm { margin-top: clamp(80px, 9vw, 130px); }
.about__foot .about__mini { justify-content: center; }
.about__mini li { align-items: center; }
@media (min-width: 900px) { .vm { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.vm__card { height: 100%; }

/* Proof card: attributed quote + stats */
.proof {
  width: 100%; max-width: 1080px; margin-top: clamp(28px, 4vw, 56px); padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px);
  display: grid; gap: 28px; align-items: center; text-align: left;
  border-radius: 28px; background: var(--sand); border: 1px solid var(--line);
}
@media (min-width: 900px) { .proof { grid-template-columns: 1.1fr 1fr; gap: 48px; } }
.proof__quote { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.proof__quote blockquote { margin: 0; font: 450 clamp(1.25rem, 1.8vw, 1.6rem)/1.35 var(--serif); letter-spacing: -0.015em; color: var(--ink); }
.proof__quote figcaption { display: flex; align-items: center; gap: 12px; }
.proof__quote img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.proof__quote figcaption span { display: flex; flex-direction: column; font-size: .85rem; color: var(--ink-2); line-height: 1.3; }
.proof__quote figcaption b { color: var(--ink); font-weight: 600; font-size: .92rem; }
.proof__stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.proof__stats li { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 4px 20px; border-left: 1px solid var(--sand-2); }
.proof__stats b { font: 450 clamp(2rem, 3vw, 2.8rem)/1 var(--serif); letter-spacing: -0.03em; color: var(--terra); font-variant-numeric: tabular-nums; }
.proof__stats b small { font-size: .45em; margin-left: 4px; letter-spacing: 0; color: var(--ink-2); }
.proof__stats li > span { font-size: .82rem; color: var(--ink-2); line-height: 1.3; }
@media (max-width: 560px) { .proof__stats li { padding-left: 12px; } }

/* Vision & mission: one gradient panel, two equal halves */
.vmw { margin-top: clamp(80px, 9vw, 130px); }
.vmp { position: relative; overflow: hidden; isolation: isolate; border-radius: 30px; background: #02252a; color: #fff; display: grid; }
.vmp .grad { border-radius: 0; }
@media (min-width: 900px) { .vmp { grid-template-columns: 1fr 1fr; min-height: 460px; } }
.vmp__col { position: relative; z-index: 1; padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 28px; }
.vmp__col + .vmp__col { border-top: 1px solid rgba(255,255,255,.18); }
@media (min-width: 900px) { .vmp__col + .vmp__col { border-top: 0; border-left: 1px solid rgba(255,255,255,.18); } }
.vmp__k {
  align-self: flex-start; padding: 7px 14px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.vmp__big { font: 450 clamp(1.8rem, 2.8vw, 2.6rem)/1.15 var(--serif); letter-spacing: -0.02em; max-width: 16ch; margin-top: auto; }
.vmp__list { display: flex; flex-wrap: wrap; gap: 8px; }
.vmp__list li {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 999px; font-size: .88rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .35s var(--ease), color .35s;
}
.vmp__list li:hover { background: #fff; color: var(--ink); }
.vmp__list i { font-style: normal; font-size: .7rem; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.2); }
.vmp__list li:hover i { background: var(--terra); color: #fff; }

/* Quote + stats live inside the vision/mission panel as its footer row */
.vmw { margin-top: clamp(64px, 7vw, 100px); }
.vmp__foot {
  position: relative; z-index: 1; grid-column: 1 / -1; max-width: none; margin: 0; border-radius: 0;
  background: rgba(1,22,26,.28); border: 0; border-top: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: clamp(24px, 3vw, 36px) clamp(32px, 4vw, 56px);
}
.vmp__foot .proof__quote blockquote { color: #fff; }
.vmp__foot .proof__quote figcaption span { color: rgba(255,255,255,.7); }
.vmp__foot .proof__quote figcaption b { color: #fff; }
.vmp__foot .proof__quote img { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.vmp__foot .proof__stats li { border-left-color: rgba(255,255,255,.2); }
.vmp__foot .proof__stats b { color: #fff; }
.vmp__foot .proof__stats b small, .vmp__foot .proof__stats li > span { color: rgba(255,255,255,.7); }
@media (min-width: 900px) { .vmp { min-height: 0; } .vmp__col { min-height: 380px; } }

/* =========================================================
   Bento: vision, mission, proof — with healthcare visuals
   ========================================================= */
.bento {
  margin-top: clamp(64px, 7vw, 100px); display: grid; gap: 14px;
  grid-template-columns: 1fr; grid-template-areas: "v" "p" "r" "m" "q" "d" "b";
}
@media (min-width: 640px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "v v" "p r" "m m" "q q" "d b"; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(250px, auto); grid-template-areas: "v v p r" "v v m m" "q q d b"; }
}
.bt {
  position: relative; overflow: hidden; isolation: isolate; margin: 0; border-radius: 26px; padding: 26px;
  display: flex; flex-direction: column; min-height: 240px; background: var(--sand);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.bt:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -34px rgba(4,38,43,.45); }
.bt > *:not(.grad):not(img) { position: relative; z-index: 1; }
.bt__top { display: flex; justify-content: space-between; align-items: center; }
.bt__k {
  align-self: flex-start; padding: 7px 13px; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: #fff; color: var(--ink-2);
}
.bt__stat { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.bt__stat b { font: 450 clamp(2.6rem, 4vw, 3.4rem)/1 var(--serif); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.bt__stat b small { font-size: .42em; margin-left: 4px; letter-spacing: 0; opacity: .7; }
.bt__stat > span { font-size: .88rem; opacity: .75; }

/* Vision: gradient + live EKG */
.bt--vision { grid-area: v; background: #02252a; color: #fff; padding: clamp(28px, 3vw, 40px); min-height: 520px; }
.bt--vision .grad { border-radius: 0; }
.bt--vision .bt__k { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.26); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; opacity: .85; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #7ef0c3; box-shadow: 0 0 0 0 rgba(126,240,195,.7); animation: live 1.6s infinite; }
.bt__big { margin-top: auto; font: 450 clamp(2rem, 3.2vw, 3rem)/1.1 var(--serif); letter-spacing: -0.025em; max-width: 15ch; }
.ekg { position: absolute; left: 0; right: 0; top: 24%; width: 100%; height: 20%; z-index: 0; overflow: visible; }
.ekg path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ekg__base { stroke: rgba(255,255,255,.14); stroke-width: 1.5; }
.ekg__pulse { stroke: #aef3ff; stroke-width: 2.4; stroke-dasharray: 140 1200; stroke-dashoffset: 1340; filter: drop-shadow(0 0 6px rgba(143,211,220,.9)); animation: ekg 3.2s linear infinite; }
@keyframes ekg { to { stroke-dashoffset: 0; } }

/* Photo */
.bt--photo { grid-area: p; padding: 18px; justify-content: flex-end; background: var(--ink); }
.bt--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 1.2s var(--ease); }
.bt--photo:hover img { transform: scale(1.06); }
.bt__k--glass { background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Ring stat */
.bt--ring { grid-area: r; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ring2 { width: 96px; height: 96px; transform: rotate(-90deg); }
.ring2 circle { fill: none; stroke: var(--sand); stroke-width: 9; }
.ring2 .val { stroke: var(--terra); stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset 1.8s var(--ease) .3s; }
.bt--ring.is-in .ring2 .val { stroke-dashoffset: 62.8; }
.bt--ring .bt__stat b { color: var(--terra); }

/* Mission */
.bt--mission { grid-area: m; background: var(--sand); }
.bt__plus { width: 34px; height: 34px; border-radius: 50%; background: var(--terra); display: grid; place-items: center; }
.bt__plus svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.bt__mid { margin: 26px 0 22px; font: 450 clamp(1.5rem, 2.2vw, 2rem)/1.2 var(--serif); letter-spacing: -0.02em; max-width: 22ch; }
.checks { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.checks li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: #fff; font-size: .88rem; transition: background .3s, color .3s; }
.checks li span { width: 22px; height: 22px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; }
.checks li svg { width: 12px; height: 12px; fill: none; stroke: var(--terra); stroke-width: 2.6; stroke-linecap: round; }
.checks li:hover { background: var(--terra); color: #fff; }
.checks li:hover span { background: rgba(255,255,255,.2); }
.checks li:hover svg { stroke: #fff; }

/* Quote */
.bt--quote { grid-area: q; background: #fff; box-shadow: inset 0 0 0 1px var(--line); flex-direction: row; gap: 24px; align-items: stretch; padding: 14px; }
.bt__portrait { width: 34%; min-width: 130px; border-radius: 18px; object-fit: cover; object-position: 50% 20%; }
.bt__qbody { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 14px 14px 14px 0; }
.bt--quote blockquote { margin: 0; font: 450 clamp(1.3rem, 2vw, 1.75rem)/1.3 var(--serif); letter-spacing: -0.02em; }
.bt--quote blockquote::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--terra); margin-bottom: 18px; }
.bt--quote figcaption { display: flex; flex-direction: column; font-size: .85rem; color: var(--ink-2); }
.bt--quote figcaption b { color: var(--ink); font-size: .95rem; }

/* Cities: pulsing dot grid */
.bt--dots { grid-area: d; background: var(--terra); color: #fff; }
.dots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; max-width: 190px; }
.dots i { aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.14); }
.dots i.on { background: #aef3ff; box-shadow: 0 0 0 0 rgba(174,243,255,.6); animation: pin 2.4s ease-out infinite; animation-delay: var(--d); }
@keyframes pin { 0% { box-shadow: 0 0 0 0 rgba(174,243,255,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(174,243,255,0); } }

/* Leadership: vital-sign bars */
.bt--bars { grid-area: b; background: var(--sand); }
.bars2 { display: flex; align-items: flex-end; gap: 5px; height: 76px; }
.bars2 i { flex: 1; height: var(--h); border-radius: 4px; background: linear-gradient(180deg, var(--ochre), var(--terra)); transform-origin: bottom; animation: vital 1.6s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes vital { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.bt--bars .bt__stat b { color: var(--terra); }

@media (max-width: 639px) { .bt--quote { flex-direction: column; } .bt__portrait { width: 100%; height: 220px; } .bt--vision { min-height: 420px; } }
@media (prefers-reduced-motion: reduce) { .ekg__pulse, .dots i.on, .bars2 i, .live i { animation: none; } .ekg__pulse { stroke-dashoffset: 0; stroke-dasharray: none; } }

/* Calm bento: 4 tiles, 2 columns */
.bento { grid-template-areas: "v" "m" "q" "s"; grid-auto-rows: auto; }
@media (min-width: 900px) {
  .bento { grid-template-columns: 1.15fr 1fr; grid-template-areas: "v m" "q s"; grid-auto-rows: auto; gap: 16px; }
}
.bt { padding: clamp(28px, 3vw, 40px); min-height: 0; }
.bt:hover { transform: none; box-shadow: none; }
.bt--vision { min-height: 400px; }
.bt--mission { min-height: 400px; }
.bt--quote { padding: 16px; }
.bt__portrait { width: 30%; max-width: 170px; }
.bt--stats { grid-area: s; background: #fff; box-shadow: inset 0 0 0 1px var(--line); justify-content: space-between; gap: 24px; }
.bt__nums { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: auto; }
.bt__nums li { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; border-left: 1px solid var(--line); }
.bt__nums li:first-child { padding-left: 0; border-left: 0; }
.bt__nums b { font: 450 clamp(2.2rem, 3.2vw, 3rem)/1 var(--serif); letter-spacing: -0.035em; color: var(--terra); font-variant-numeric: tabular-nums; }
.bt__nums b small { font-size: .42em; margin-left: 4px; letter-spacing: 0; color: var(--ink-2); }
.bt__nums li > span { font-size: .85rem; color: var(--ink-2); line-height: 1.3; }
.ekg__pulse { animation-duration: 4.5s; }
.bt--vision { padding-bottom: clamp(28px, 3vw, 40px); }
.bt.bt--vision > svg.ekg { position: absolute; z-index: 0; left: 0; right: 0; top: auto; bottom: 26px; height: 64px; }
.ekg__base { stroke: rgba(255,255,255,.1); }

/* Who we are: heading + sector cards */
.about__story { gap: 0; }
.about__title { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.15; max-width: 22ch; margin: 0 auto; }
.about__sub { margin: 20px auto 0; max-width: 52ch; color: var(--ink-2); font-size: clamp(1rem, 1.2vw, 1.1rem); }
.sectors { width: 100%; display: grid; gap: 14px; margin-top: clamp(40px, 5vw, 64px); grid-template-columns: repeat(2, 1fr); text-align: left; }
@media (min-width: 1024px) { .sectors { grid-template-columns: repeat(4, 1fr); } }
.sector-card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; aspect-ratio: 4 / 5; background: var(--ink);
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff; outline: none;
}
.sector-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.sector-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2,30,34,0) 40%, rgba(2,30,34,.82) 100%); transition: background .5s var(--ease); }
.sector-card__body { padding: 20px; }
.sector-card h3 { font-size: 1.35rem; font-weight: 500; color: #fff; }
.sector-card p {
  font-size: .88rem; line-height: 1.45; color: rgba(255,255,255,.85);
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .4s var(--ease), margin .5s var(--ease);
}
.sector-card:hover img, .sector-card:focus-visible img { transform: scale(1.06); }
.sector-card:hover::after, .sector-card:focus-visible::after { background: linear-gradient(180deg, rgba(2,30,34,.1) 20%, rgba(2,30,34,.9) 100%); }
.sector-card:hover p, .sector-card:focus-visible p { max-height: 90px; opacity: 1; margin-top: 8px; }
@media (hover: none) { .sector-card p { max-height: 90px; opacity: 1; margin-top: 8px; } }
@media (max-width: 560px) { .sector-card { aspect-ratio: 3 / 4; } .sector-card__body { padding: 14px; } .sector-card h3 { font-size: 1.1rem; } .sector-card p { font-size: .8rem; } }

/* Who we are: calm statement, words light up on scroll */
.about__story .statement {
  font-size: clamp(1.55rem, 2.5vw, 2.35rem); line-height: 1.42; letter-spacing: -0.02em; max-width: 34ch; margin: 0 auto;
}
.about__story .statement .w { opacity: .16; transition: opacity .35s linear; }
.about__story .statement .w.on { opacity: 1; }
.about__story .statement { font-size: clamp(1.75rem, 2.9vw, 2.75rem); }
/* Editorial building photos, masked into soft shapes */
.about__story .ipill, .about__story .ipill:hover {
  width: 2.3em; height: 1em; vertical-align: -.12em; margin: 0 .1em; background: var(--sand); cursor: default;
  border-radius: 999px; transition: none;
}
.about__story .ipill--school, .about__story .ipill--school:hover { border-radius: .55em .55em .18em .18em; }
.about__story .ipill img { filter: grayscale(1) contrast(1.08) brightness(1.02); transition: filter .5s var(--ease); }
.about__story .ipill:hover img { filter: grayscale(1) contrast(1.08) brightness(1.02); }
/* Smaller floating photo next to the cursor */
.peek { width: 180px; height: 180px; border-radius: 14px; }
.peek.on { scale: 1; }
/* Keywords: teal text only; a photo follows the cursor on hover */
.about__story .kw, .about__story .kw:hover {
  color: var(--terra); background: none; background-image: none; padding: 0; margin: 0; border-radius: 0; cursor: default;
  transition: color .3s var(--ease);
}
.about__story .kw:hover { color: var(--terra); }
/* The whole text area is the hover zone for the floating photos */
.about { padding-top: clamp(30px, 4vw, 70px); }
.about__story { padding-top: clamp(80px, 9vw, 120px); padding-bottom: clamp(48px, 5vw, 72px); }
.about .bento { margin-top: 0; }

/* Client logos: black, continuously scrolling under the hero */
.clients { background: #F8F8F6; padding: clamp(36px, 4vw, 52px) 0; overflow: hidden; }
.clients__marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients__track { display: flex; align-items: center; width: max-content; animation: clients-scroll 46s linear infinite; }
.cl { flex: none; display: grid; place-items: center; padding: 0 clamp(32px, 4.5vw, 64px); }
.cl img { display: block; width: auto; filter: grayscale(1) brightness(0); opacity: .82; transition: opacity .3s; }
.cl--wide img { height: clamp(24px, 2.4vw, 32px); max-width: 170px; object-fit: contain; }
.cl--square img { height: clamp(38px, 3.6vw, 50px); max-width: 110px; object-fit: contain; }
.cl img:hover { opacity: 1; }
/* Clean logos only: all solid black on white, optically balanced heights */
.clients { background: #fff; border-bottom: 0; }
.clients__marquee { -webkit-mask-image: none; mask-image: none; }
.cl { padding: 0 clamp(36px, 5vw, 72px); }
.cl img { height: var(--lh, 34px); max-width: 180px; object-fit: contain; filter: grayscale(1) brightness(0); opacity: .88; }
@media (max-width: 767px) { .cl img { height: calc(var(--lh, 34px) * .8); } }
@keyframes clients-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .clients__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .cl[aria-hidden] { display: none; } }

/* Solutions: centered card deck, cards lift off the stack on scroll */
.panel { background: #02252a; }
.panel::before { display: none; }
.panel > .grad { z-index: 0; }
.panel > :not(.grad) { position: relative; z-index: 1; }
/* Solutions cards: same grainy Saraya recipe, one color per card */
.grad--v2 { background: #2a1003; }
.grad--v2::before {
  background:
    radial-gradient(42% 38% at 78% 28%, rgba(255,214,170,.95), transparent 62%),
    radial-gradient(38% 34% at 62% 52%, rgba(245,140,60,.8), transparent 66%),
    radial-gradient(60% 55% at 88% 80%, rgba(214,92,30,.85), transparent 70%),
    radial-gradient(55% 60% at 12% 18%, rgba(60,22,6,.95), transparent 70%),
    linear-gradient(130deg, #1c0a02 0%, #4a1c06 38%, #b4521c 68%, #ffc58f 100%);
}
.grad--v2 .grad__wave { background: radial-gradient(closest-side, rgba(22,8,2,.9), transparent); }
.grad--v3 { background: #160a2c; }
.grad--v3::before {
  background:
    radial-gradient(42% 38% at 78% 28%, rgba(224,208,255,.95), transparent 62%),
    radial-gradient(38% 34% at 62% 52%, rgba(150,110,240,.8), transparent 66%),
    radial-gradient(60% 55% at 88% 80%, rgba(109,75,196,.85), transparent 70%),
    radial-gradient(55% 60% at 12% 18%, rgba(30,14,58,.95), transparent 70%),
    linear-gradient(130deg, #0f0620 0%, #2a1452 38%, #6a45c0 68%, #d6c4ff 100%);
}
.grad--v3 .grad__wave { background: radial-gradient(closest-side, rgba(12,5,26,.92), transparent); }
.grad--v4 { background: #06163a; }
.grad--v4::before {
  background:
    radial-gradient(42% 38% at 78% 28%, rgba(190,220,255,.95), transparent 62%),
    radial-gradient(38% 34% at 62% 52%, rgba(80,150,240,.8), transparent 66%),
    radial-gradient(60% 55% at 88% 80%, rgba(37,99,201,.85), transparent 70%),
    radial-gradient(55% 60% at 12% 18%, rgba(6,22,56,.95), transparent 70%),
    linear-gradient(130deg, #030c20 0%, #0b2a5c 38%, #2a63c4 68%, #b8d6ff 100%);
}
.grad--v4 .grad__wave { background: radial-gradient(closest-side, rgba(3,9,24,.92), transparent); }
/* charts inside each card follow that card's color */
.panel .pill { background: color-mix(in srgb, var(--acc) 12%, #fff); color: var(--acc); }
.panel .chart .area { fill: color-mix(in srgb, var(--acc) 14%, transparent); }
.panel .chart .line { stroke: var(--acc); }
.panel .rows b { color: var(--acc); }
.panel .bars i::after { background: var(--acc); }
.panel .journey li.done::before { border-color: var(--acc); background-color: var(--acc); }
.panel .ring .val { stroke: var(--acc); }

@media (min-width: 900px) {
  .steps { height: calc(var(--n) * 72vh); }
  .steps__sticky {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(48px, 7.5vh, 80px); padding-top: 24px;
  }
  .stage { width: min(560px, 100%); height: clamp(400px, 54vh, 500px); margin-top: 64px; }
  .panel {
    padding: 28px 30px; gap: 20px; opacity: 1; transform: none; transition: none;
    box-shadow: 0 30px 60px -34px rgba(10,20,30,.45);
    transform-origin: 50% 0; will-change: transform;
  }
  .panel__title { font-size: clamp(1.5rem, 2vw, 1.9rem); }
  .panel { padding: 36px 34px 32px; gap: 22px; }
  .panel .mcard { width: min(100%, 400px); padding: 20px; }
  .panel .chart { height: 78px; }
  .copy { align-items: center; text-align: center; gap: 18px; }
  .words { justify-content: center; gap: 4px 28px; }
  .word { font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
  .word.is-active { padding-left: 0; }
  .word.is-active::before { left: 50%; top: auto; bottom: -12px; margin: 0 0 0 -3px; width: 6px; height: 6px; background: var(--acc, var(--terra)); transition: background .4s; }
  .progress span { background: var(--acc, var(--ink)); transition: background .4s; }
  .descs { max-width: 52ch; margin-top: 6px; }
  .progress { max-width: 240px; }
}
/* short laptop screens: shrink the data cards a touch so nothing crowds the title */
@media (min-width: 900px) and (max-height: 800px) {
  .panel { padding-top: 30px; gap: 18px; }
  .panel .mcard { zoom: .9; }
  .solutions .stage { margin-top: 46px; }
  .steps__sticky { gap: 52px; padding-top: 0; }
}

/* Solutions sits right under the logo strip: keep the gap short */
.clients + .solutions { padding-top: clamp(44px, 5.6vw, 92px); }

/* Solutions intro: quiet eyebrow, two-tone headline, audience stack */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 .92rem/1 var(--sans); color: var(--ink-2); letter-spacing: 0; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sage) 16%, transparent); }
.solutions .sol-title { margin: 22px auto 0; max-width: 21ch; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.035em; }
.sol-title .soft { color: var(--ink-3); }
.who { display: inline-flex; align-items: center; gap: 16px; margin-top: 34px; padding: 8px 20px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; text-align: left; }
.who__stack { display: flex; flex: none; }
.who__stack span {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--b); box-shadow: 0 0 0 2.5px #fff; transition: margin .5s var(--ease);
}
.who__stack span + span { margin-left: -9px; }
.who:hover .who__stack span + span { margin-left: 3px; }
.who__stack svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.who p { font-size: .92rem; line-height: 1.4; color: var(--ink-2); max-width: 46ch; }
.who b { font-weight: 500; color: var(--ink); }
@media (min-width: 900px) {
  .who p { white-space: nowrap; max-width: none; }
  .solutions .steps { margin-top: 0; }
}
@media (max-width: 640px) {
  .who { flex-direction: column; border-radius: 22px; padding: 16px 18px; text-align: center; }
}

/* Deck performance: the card gradients sit still while the cards move */
.panel .grad::before, .panel .grad__wave { animation: none; }
.panel .grad::after { mix-blend-mode: normal; opacity: .14; }
.panel { backface-visibility: hidden; contain: paint; }

/* Section labels: plain teal text, no pill, no dot */
.eyebrow { display: block; font: 500 .95rem/1.2 var(--sans); color: var(--sage); letter-spacing: -0.005em; text-transform: none; }
.eyebrow i { display: none; }
.eyebrow--light { color: rgba(255,255,255,.78); }
main section p.eyebrow, .endcard section p.eyebrow { font: 500 .95rem/1.2 var(--sans); color: var(--ink-3); max-width: none; margin-bottom: 0; }
main section p.eyebrow--light, .endcard section p.eyebrow--light { color: rgba(255,255,255,.78); }
/* Spinner label, after primefold.ai: braille dots + small text */
main section p.eyebrow, .endcard section p.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 .875rem/1.3 var(--sans); letter-spacing: -0.006em; }
.eyebrow__spin { display: inline-block; width: 1ch; font: 400 1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: currentColor; }
.center > .eyebrow, .feature__card > .eyebrow, .final__inner > .eyebrow, .about__story > .eyebrow { margin-left: auto; margin-right: auto; }
.eyebrow + h2 { margin-top: 16px; }
.center .eyebrow, .feature__card .eyebrow, .final .eyebrow, .about__story .eyebrow { text-align: center; align-self: center; }
/* Two-tone headings across the page */
main section h2, .endcard section h2 { letter-spacing: -0.03em; }
main section h2 .soft, .endcard section h2 .soft { color: var(--ink-3); }
.final h2 .soft, .eyebrow--light + h2 .soft { color: rgba(255,255,255,.6); }

/* Solutions on phones: cards stick and pile up one by one while scrolling */
.panel__k { display: none; }
@media (max-width: 899px) {
  .solutions .steps { margin-top: 36px; }
  .stage { display: block; }
  .panel {
    position: sticky; top: calc(76px + var(--i, 0) * 12px); margin-bottom: 18px;
    padding: 38px 22px 22px; gap: 0; transform-origin: 50% 0;
    box-shadow: 0 -12px 34px -20px rgba(10,20,30,.35);
  }
  .panel:last-child { margin-bottom: 0; }
  .panel:nth-of-type(2) { --i: 1; } .panel:nth-of-type(3) { --i: 2; } .panel:nth-of-type(4) { --i: 3; }
  .panel::before { display: block; z-index: 2; background: rgba(0,0,0,var(--dim, 0)); }
  .panel__k { display: block; order: 0; font: 500 .8rem/1 var(--sans); letter-spacing: .01em; color: rgba(255,255,255,.72); }
  .panel__k { margin-bottom: 12px; }
  .panel__title { order: 1; font-size: 1.6rem; line-height: 1.15; margin-bottom: 12px; }
  .panel__m { order: 2; text-align: center; margin-bottom: 28px; }
  .panel__m p { font-size: .92rem; line-height: 1.45; max-width: 32ch; margin: 0 auto; }
  .panel .mcard { order: 3; width: 100%; padding: 22px 20px; }
  .panel { max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* Section intros: balanced line breaks, description narrower and quieter than the heading */
main section h2, .endcard section h2 { text-wrap: balance; }
.center .sub { max-width: 38ch; margin: 20px auto 0; font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.55; text-wrap: balance; }

/* How we work: a small data card per stage, it comes alive when the progress line arrives */
.fv {
  position: relative; height: 172px; margin: 0 0 22px; padding: 14px 16px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(10,30,35,.35);
  display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  opacity: .5; transform: translateY(10px); filter: grayscale(1);
  transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease);
}
.flow__step.is-on .fv { opacity: 1; transform: none; filter: none; }
.fv__tag { font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.fv > :not(.fv__tag) { --d: calc(var(--i, 0) * 130ms + 250ms); }
/* 01 findings */
.fv__row { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--ink-2); padding: 6px 0; border-top: 1px solid var(--line);
  opacity: 0; transform: translateX(-8px); transition: opacity .45s var(--ease) var(--d), transform .55s var(--ease) var(--d); }
.fv__row:first-of-type { border-top: 0; }
.fv__row b { font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; color: var(--acc); background: color-mix(in srgb, var(--acc) 11%, #fff); }
/* 02 roadmap */
.fv__g { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; font-size: .74rem; color: var(--ink-2); }
.fv__g i { position: relative; height: 10px; border-radius: 999px; background: var(--sand); }
.fv__g i::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--s); width: var(--w); border-radius: 999px; background: var(--acc);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease) var(--d); }
/* 03 rollout */
.fv__chk { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--ink); padding: 4px 0; }
.fv__chk span { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid var(--sand-2); display: grid; place-items: center;
  transition: background .35s var(--ease) var(--d), border-color .35s var(--ease) var(--d); }
.fv__chk svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .4s var(--ease) calc(var(--d) + 120ms); }
/* 04 results */
.fv__kpi { font: 400 1.9rem/1 var(--serif); letter-spacing: -0.03em; color: var(--ink); opacity: 0; transition: opacity .5s var(--ease) .35s; }
.fv__chart { width: 100%; height: 58px; margin-top: auto; overflow: visible; }
.fv__area { fill: color-mix(in srgb, var(--acc) 12%, transparent); opacity: 0; transition: opacity .6s var(--ease) .9s; }
.fv__line { fill: none; stroke: var(--acc); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease) .25s; }
/* on */
.flow__step.is-on .fv__row { opacity: 1; transform: none; }
.flow__step.is-on .fv__g i::after { transform: scaleX(1); }
.flow__step.is-on .fv__chk span { background: var(--acc); border-color: var(--acc); }
.flow__step.is-on .fv__chk svg { stroke-dashoffset: 0; }
.flow__step.is-on .fv__kpi, .flow__step.is-on .fv__area { opacity: 1; }
.flow__step.is-on .fv__line { stroke-dashoffset: 0; }
@media (max-width: 899px) { .fv { max-width: 360px; } }
@media (prefers-reduced-motion: reduce) { .fv, .fv * { transition: none !important; } }

/* How we work: stage photos wipe open, left to right, as the progress line reaches them */
.fv--photo { height: auto; aspect-ratio: 16 / 11; padding: 0; margin: 0 0 22px; border: 0; border-radius: 18px; background: var(--sand);
  box-shadow: none; opacity: 1; transform: none; filter: none; display: block; }
.fv--photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
  clip-path: inset(0 100% 0 0 round 18px); transform: scale(1.12); filter: grayscale(1);
  transition: clip-path 1.1s cubic-bezier(.7,0,.2,1), transform 1.6s var(--ease), filter 1.2s var(--ease) .5s; }
.flow__step.is-on .fv--photo img { clip-path: inset(0 0 0 0 round 18px); transform: none; filter: none; }
@media (max-width: 899px) { .fv--photo { max-width: 420px; } }

/* How we work as a cycle: sticky ring with photo on the left, stages scroll on the right */
.cyc { margin-top: clamp(32px, 4vw, 48px); }
.cyc__vis { display: none; }
.cyc__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 34px; border-left: 1px solid var(--line); padding-left: 24px; }
.cyc__step { position: relative; }
.cyc__step::before { content: ""; position: absolute; left: -29px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--terra); }
.cyc__time { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sage); margin-bottom: 10px; }
.cyc__step h3 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 12px; }
.cyc__step p { color: var(--ink-2); max-width: 38ch; font-size: 1.02rem; }
.cyc__out { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .92rem !important; color: var(--ink) !important; }
.cyc__out span { flex: none; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cyc__loop { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: .95rem; }
.cyc__loop span { font-size: 1.3rem; color: var(--terra); }

@media (min-width: 900px) {
  .cyc { --size: min(460px, 36vw); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
  .cyc__vis { display: block; position: sticky; top: calc(50vh - var(--size) / 2); height: var(--size); justify-self: center; width: var(--size); }
  .cyc__ring { position: relative; width: 100%; height: 100%; }
  .cyc__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
  .cyc__track { fill: none; stroke: var(--line); stroke-width: 1.5; }
  .cyc__prog { fill: none; stroke: var(--terra); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
  .cyc__photo { position: absolute; inset: 11%; border-radius: 50%; overflow: hidden; background: var(--sand); isolation: isolate; }
  .cyc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12);
    transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
  .cyc__img.is-on { opacity: 1; transform: none; }
  .cyc__node, .cyc__dot { position: absolute; left: 50%; top: 50%; }
  .cyc__node {
    width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center;
    background: #fff; border: 1px solid var(--line); font: 600 .78rem var(--sans); color: var(--ink-3); z-index: 2;
    transform: rotate(var(--a)) translateY(calc(var(--size) / -2 * .95)) rotate(calc(-1 * var(--a)));
    transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  }
  .cyc__node b { font-weight: 600; }
  .cyc__node em { display: none; }
  .cyc__node.is-done { color: var(--terra); border-color: var(--terra); }
  .cyc__node.is-on { background: var(--terra); border-color: var(--terra); color: #fff; }
  .cyc__dot {
    width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--terra); z-index: 3;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--terra) 18%, transparent);
    transform: rotate(var(--deg, 0deg)) translateY(calc(var(--size) / -2 * .95));
  }
  .cyc__steps { border: 0; padding: 0; gap: 0; }
  .cyc__step { min-height: 42vh; display: flex; flex-direction: column; justify-content: center; opacity: .22; transition: opacity .5s var(--ease); }
  .cyc__step::before { display: none; }
  .cyc__step.is-on { opacity: 1; }
  .cyc__loop { min-height: 18vh; align-items: flex-start; }
}

/* How we work: four huge words that fill with ink as you scroll past them */
.pw { list-style: none; margin-top: clamp(36px, 5vw, 64px); padding-top: 0; padding-bottom: 0; }
.pw__row { --f: 0; display: grid; grid-template-columns: 1fr; gap: 10px 32px; padding: clamp(22px, 3vw, 36px) 0; border-top: 1px solid var(--line); }
.pw__row:last-child { border-bottom: 1px solid var(--line); }
.pw__n { font-size: .8rem; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
.pw__word {
  justify-self: start; width: fit-content;
  margin: 0; font: 400 clamp(3rem, 9vw, 8.5rem)/.95 var(--serif); letter-spacing: -0.055em;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--ink) 0 50%, #DCE5E6 50% 100%);
  background-size: 200% 100%; background-position: calc(100% - var(--f) * 100%) 0;
  padding-bottom: .06em;
}
.pw__info { opacity: calc(.25 + var(--f) * .75); transform: translateY(calc((1 - var(--f)) * 10px)); }
.pw__time { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); margin-bottom: 8px; }
.pw__info p { color: var(--ink-2); max-width: 40ch; font-size: .98rem; }
.pw__out { margin-top: 12px; font-size: .9rem !important; color: var(--ink) !important; display: flex; gap: 10px; align-items: baseline; }
.pw__out span { flex: none; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 900px) {
  .pw__row { grid-template-columns: 56px 1fr minmax(280px, 380px); align-items: center; }
  .pw__n { align-self: start; padding-top: .9em; }
}
@media (prefers-reduced-motion: reduce) { .pw__row { --f: 1 !important; } }

/* How we work: compact progress line, each stage icon draws itself when the line arrives */
.flow__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--sand); margin: 4px 0 18px;
  transition: background .5s var(--ease), transform .5s var(--ease); }
.flow__ic svg { width: 26px; height: 26px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s var(--ease); }
.flow__ic svg > * { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1.1s var(--ease) .15s; }
.flow__ic svg > :nth-child(2) { transition-delay: .45s; }
.flow__ic svg > :nth-child(3) { transition-delay: .7s; }
.flow__step.is-on .flow__ic { background: color-mix(in srgb, var(--terra) 10%, #fff); transform: translateY(-2px); }
.flow__step.is-on .flow__ic svg { stroke: var(--terra); }
.flow__step.is-on .flow__ic svg > * { stroke-dashoffset: 0; }
.flow__time { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; transition: color .5s var(--ease); }
.flow__step.is-on .flow__time { color: var(--sage); }
@media (prefers-reduced-motion: reduce) { .flow__ic svg > * { stroke-dashoffset: 0; transition: none; } }

/* Results: quote card on the Saraya gradient, real client logo, clean name line */
.scard--quote { background: #02252a; isolation: isolate; }
.scard--quote > :not(.grad) { position: relative; z-index: 1; }
.scard__logo { align-self: flex-start; height: 34px; width: auto; max-width: 170px; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
.scard__who { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; line-height: 1.3; }
.scard__who b { font-weight: 600; color: #fff; }
.scard__who span { color: rgba(255,255,255,.7); font-size: .82rem; }

/* Results on desktop: the section pins and the cards slide sideways as you scroll down */
@media (min-width: 900px) {
  .stories { padding: 0; height: var(--stories-h, auto); }
  .stories__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .stories .stories__ctl { margin: 24px 0 clamp(24px, 4vh, 40px); }
  .stories .track { overflow: visible; scroll-snap-type: none; cursor: default; will-change: transform; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .stories .scard { height: clamp(340px, 48vh, 440px); }
}

/* Results: clean hierarchy — left-aligned heading, arrows on the right, one type scale for every card */
.stories__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vh, 44px); }
.stories__head h2 { margin-top: 14px; max-width: 16ch; text-align: left; }
.stories__head .eyebrow { margin: 0; }
.stories .stories__ctl { margin: 0; flex: none; }
.scard { border-radius: 20px; }
.scard--stat, .scard--quote, .scard--cta { padding: 28px 28px 30px; }
.scard__tag { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.scard--stat .big { font: 400 clamp(3.2rem, 4.6vw, 4.2rem)/1 var(--serif); letter-spacing: -0.04em; color: var(--ink); margin: auto 0 18px; }
.scard__metric { font: 500 1.05rem/1.3 var(--sans); color: var(--ink) !important; margin-bottom: 6px; }
.scard__ctx { font-size: .92rem; line-height: 1.5; color: var(--ink-2) !important; max-width: 32ch; }
.scard--quote blockquote { font: 400 clamp(1.25rem, 1.6vw, 1.45rem)/1.35 var(--serif); letter-spacing: -0.015em; margin: auto 0 22px; }
.scard--quote .scard__who { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); }
.scard--photo figcaption { font-size: .74rem; padding: 6px 11px; }
.scard--cta { width: min(84vw, 360px); background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.scard--cta h3 { font: 400 clamp(1.6rem, 2.2vw, 2rem)/1.15 var(--serif); letter-spacing: -0.03em; margin: auto 0 12px; }
.scard--cta .scard__ctx { margin-bottom: 24px; }
.scard--cta .pbtn { align-self: flex-start; }
@media (max-width: 899px) {
  .stories__head { align-items: flex-end; }
  .stories__head h2 { font-size: clamp(1.9rem, 7vw, 2.4rem); }
}

/* Results: centered title, neutral light-grey cards, sentence-case labels */
.stories__head { display: block; text-align: center; }
.stories__head h2 { max-width: 20ch; margin: 14px auto 0; text-align: center; }
.scard--stat { background: #F4F4F3; }
.scard__tag { font-size: .85rem; font-weight: 400; letter-spacing: -0.005em; text-transform: none; color: var(--ink-2); }

/* Quote card: no divider, quote sits midway between the logo and the name */
.scard--quote blockquote { margin: auto 0; }
.scard--quote .scard__who { padding-top: 0; border-top: 0; }

/* Card labels sit top-right */
.scard .scard__tag { align-self: flex-end; text-align: right; }

/* Talk to us on the white card: thin grey border so the button reads */
.scard--cta .pbtn--light { border: 1px solid #DCDFDF; }

/* Vision & mission and the proof section, after doxy.me: warm light-grey cards, no borders, calm type */
.vm2, .proof__grid { display: grid; gap: 16px; }
.vm2 { margin-top: clamp(48px, 6vw, 80px); }
.vmc, .pc { background: #F4F4F2; border-radius: 24px; }
.vmc { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); min-height: clamp(300px, 30vw, 380px); }
.vmc__k { font-size: .95rem; color: var(--ink-2); }
.vmc__big { margin-top: auto; font: 400 clamp(1.9rem, 3vw, 2.7rem)/1.12 var(--serif); letter-spacing: -0.035em; color: var(--ink); max-width: 18ch; }
.vmc__mid { margin-top: auto; font: 400 clamp(1.4rem, 2vw, 1.8rem)/1.2 var(--serif); letter-spacing: -0.025em; color: var(--ink); max-width: 24ch; }
.vmc__list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.vmc__list li { display: flex; align-items: center; gap: 12px; font-size: .98rem; color: var(--ink-2); }
.vmc__list span { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--terra); display: grid; place-items: center; }
.vmc__list svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.trust { padding: clamp(88px, 10vw, 140px) 0 0; }
.proof__grid { margin-top: clamp(36px, 5vw, 56px); }
.pc--stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 32px 24px; min-height: 240px; }
.pc--stat b { font: 400 clamp(3rem, 4.4vw, 4.2rem)/1 var(--serif); letter-spacing: -0.04em; color: var(--ink); }
.pc--stat b small { font-size: .42em; letter-spacing: 0; margin-left: 2px; color: var(--ink-2); }
.pc--stat > span { font-size: .95rem; color: var(--ink-2); max-width: 20ch; }
.pc--quote { margin: 0; display: grid; grid-template-columns: 1fr; gap: 20px; padding: 20px; }
.pc__body { display: flex; flex-direction: column; padding: 12px 8px 8px; }
.pc--quote blockquote { margin: 0 0 24px; font: 400 clamp(1.3rem, 1.9vw, 1.7rem)/1.3 var(--serif); letter-spacing: -0.02em; color: var(--ink); }
.pc--quote figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: .92rem; }
.pc--quote figcaption b { font-weight: 500; color: var(--ink); }
.pc--quote figcaption span { color: var(--ink-2); font-size: .86rem; }
.pc--quote img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; }
@media (min-width: 900px) {
  .vm2 { grid-template-columns: 1fr 1fr; }
  .proof__grid { grid-template-columns: repeat(3, 1fr); }
  .pc--quote { grid-column: span 2; grid-template-columns: 1fr minmax(200px, 34%); height: clamp(280px, 24vw, 340px); }
  .pc--quote img { min-height: 0; }
  .pc__body { padding: 20px 8px 12px 20px; }
  .pc--quote img { aspect-ratio: auto; height: 100%; object-position: center 20%; }
  .pc--stat { min-height: clamp(220px, 20vw, 280px); }
}

@media (max-width: 899px) {
  .proof__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pc--quote { grid-column: 1 / -1; order: -1; }
  .pc--stat { min-height: 170px; padding: 24px 14px; }
  .pc--stat b { font-size: 2.6rem; }
  .pc--stat > span { font-size: .85rem; }
}

/* Vision & mission now live in the card section: same gap as the cards below */
.trust .vm2 { margin-top: clamp(36px, 5vw, 56px); }
.trust .vm2 + .proof__grid { margin-top: 16px; }
@media (max-width: 899px) { .trust .vm2 + .proof__grid { margin-top: 12px; } .trust .vm2 { gap: 12px; } }

/* Four numbers share one card as a 2x2 grid, next to the quote */
.pc--nums { display: grid; grid-template-columns: 1fr 1fr; padding: 8px; }
.pc--nums > div { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px 20px; }
.pc--nums > div:nth-child(-n+2) { border-bottom: 1px solid #E6E6E3; }
.pc--nums > div:nth-child(odd) { border-right: 1px solid #E6E6E3; }
.pc--nums b { font: 400 clamp(2.2rem, 3vw, 2.9rem)/1 var(--serif); letter-spacing: -0.04em; color: var(--ink); }
.pc--nums b small { font-size: .45em; letter-spacing: 0; margin-left: 2px; color: var(--ink-2); }
.pc--nums > div > span { font-size: .86rem; color: var(--ink-2); }
@media (max-width: 899px) { .pc--nums { grid-column: 1 / -1; min-height: 240px; } }

/* Numbers: same 2x2 layout, but four separate cards */
.pc--nums { background: none; padding: 0; gap: 16px; }
.pc--nums > div { background: #F4F4F2; border-radius: 20px; border: 0 !important; padding: 18px 20px; }
@media (max-width: 899px) { .pc--nums { gap: 12px; min-height: 0; } .pc--nums > div { min-height: 120px; } }

/* Result stat cards: neutral black and grey text */
.scard--stat .big, .scard--stat .scard__metric { color: #111 !important; }
.scard--stat .scard__tag, .scard--stat .scard__ctx { color: #6B6B6B !important; }

.vmc__list span { width: 16px; height: 16px; }
.vmc__list svg { width: 10px; height: 10px; stroke-width: 2.2; }

/* Why Saraya: centered heading, three calm grey cards (matches vision & mission) */
.apart .apart__grid { display: block; }
.apart .apart__head { text-align: center; max-width: none; position: static; }
.apart .apart__head h2 { margin: 14px auto 0; max-width: 20ch; }
.apart .apart__head p:not(.eyebrow) { margin: 18px auto 0; max-width: 40ch; color: var(--ink-2); text-wrap: balance; }
.apart .edges { display: grid; gap: 16px; margin-top: clamp(36px, 5vw, 56px); border: 0; }
.apart .edge { display: flex; flex-direction: column; gap: 0; grid-template-columns: none; padding: clamp(26px, 2.6vw, 36px); min-height: 0;
  background: #F4F4F2; border: 0; border-radius: 24px; }
.apart .edge::before, .apart .edge::after { display: none; }
.apart .edge__n { font-size: .85rem; font-weight: 400; color: #8A8A8A; }
.apart .edge h3 { margin: clamp(48px, 5vw, 72px) 0 10px; font: 400 clamp(1.35rem, 1.8vw, 1.6rem)/1.2 var(--serif); letter-spacing: -0.025em; color: #111; }
.apart .edge p { margin: 0; font-size: .95rem; line-height: 1.5; color: #6B6B6B; max-width: 34ch; }
@media (min-width: 900px) { .apart .edges { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) { .apart .edges { gap: 12px; } .apart .edge { min-height: 200px; } }

/* Vision wider, mission narrower (heights stay equal) */
@media (min-width: 900px) { .vm2 { grid-template-columns: 1.45fr 1fr; } }

/* Why Saraya cards flip on hover (or tap) to show a photo on the back */
.apart .edge { display: block; background: none; padding: 0; height: clamp(300px, 24vw, 350px); perspective: 1400px; outline: none; cursor: pointer; }
.edge__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.apart .edge:hover .edge__inner, .apart .edge:focus-visible .edge__inner, .apart .edge.is-flipped .edge__inner { transform: rotateY(180deg); }
.edge__front, .edge__back { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.edge__front { display: flex; flex-direction: column; background: #F4F4F2; padding: clamp(26px, 2.6vw, 36px); }
.edge__back { transform: rotateY(180deg); background: #E9E9E6; }
.edge__back img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .edge__inner { transition: none; } }

/* Flip hints: rotate icon, and a one-time peek when the cards first appear */
.edge__hint { position: absolute; top: clamp(22px, 2.2vw, 30px); right: clamp(22px, 2.2vw, 30px); width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; transition: transform .6s var(--ease); }
.edge__hint svg { width: 16px; height: 16px; fill: none; stroke: #6B6B6B; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.apart .edge:hover .edge__hint { transform: rotate(180deg); }
@keyframes edge-peek { 0% { transform: rotateY(0); } 28%, 68% { transform: rotateY(180deg); } 100% { transform: rotateY(0); } }
.apart .edge.is-peek .edge__inner { animation: edge-peek 2.6s cubic-bezier(.45,0,.2,1) var(--pd, 0s) 1; }
@media (prefers-reduced-motion: reduce) { .apart .edge.is-peek .edge__inner { animation: none; } }

/* What we believe card: more air, smaller headline, narrower and quieter body */
.feature__card { gap: 0 !important; padding: clamp(48px, 6vw, 88px) clamp(28px, 6vw, 96px) !important; max-width: 820px; }
.feature__card h2 { margin: 20px auto 0 !important; font-size: clamp(1.9rem, 3vw, 2.6rem) !important; line-height: 1.12; max-width: 18ch; }
.feature__card p:not(.eyebrow) { margin: 24px auto 0; max-width: 46ch; font-size: 1rem; line-height: 1.6; text-wrap: balance; }
.feature__card .pbtn { margin-top: 36px; }

/* What we believe, after doxy.me: full-bleed photo, dark fade at the bottom, white copy and standards logos */
.feature { min-height: min(100vh, 920px); place-items: end center; padding: 0 var(--gutter) clamp(56px, 8vh, 96px); color: #fff; }
.feature__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,16,0) 30%, rgba(8,14,16,.55) 62%, rgba(8,14,16,.9) 100%); }
.feature__copy { position: relative; z-index: 1; max-width: 760px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.feature__copy h2 { margin: 0 auto; color: #fff; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.1; max-width: 20ch; }
.feature__copy h2 .soft { color: rgba(255,255,255,.62); }
.feature__sub { margin: 20px auto 0; max-width: 48ch; color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.6; text-wrap: balance; }
.feature__logos { list-style: none; padding: 0; margin: clamp(32px, 5vh, 48px) 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 4vw, 56px); }
.feature__logos img { height: var(--lh, 32px); width: auto; max-width: 150px; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; display: block; }
@media (max-width: 899px) { .feature__logos { gap: 24px 32px; } .feature__logos img { height: calc(var(--lh, 32px) * .8); } }

/* Closing CTA + footer, after concurrence.com: white panel resting on a gradient footer */
.cta2 { position: relative; z-index: 2; margin-top: clamp(96px, 12vw, 160px); }
.cta2__panel { background: #fff; border-radius: 0 0 32px 32px; text-align: center; padding: clamp(64px, 9vw, 120px) var(--gutter) clamp(72px, 10vw, 130px);
  display: flex; flex-direction: column; align-items: center; box-shadow: 0 30px 60px -40px rgba(2,30,34,.35); }
.cta2 h2 { margin: 16px auto 0; font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.08; max-width: 18ch; color: #111; }
.cta2__actions { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cta2 .pbtn--light { border: 1px solid #DCDFDF; }
.cta2__mail { font-size: .92rem; color: #6B6B6B; text-decoration: none; border-bottom: 1px solid #DCDFDF; padding-bottom: 2px; }
.cta2__mail:hover { color: #111; border-color: #111; }

.foot { position: relative; isolation: isolate; overflow: hidden; color: #fff; margin-top: -40px; padding: 0 0 28px; background: #02252a; }
.foot > .grad { border-radius: 0; z-index: -1; }
.foot__lines { position: relative; height: clamp(180px, 22vw, 280px); }
.foot__lines span { position: absolute; left: var(--x); bottom: 0; width: 1px; height: var(--h); background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.35)); }
.foot__lines i { position: absolute; top: -5px; left: 10px; font-style: normal; font-size: .8rem; min-height: 1em; color: rgba(255,255,255,.6); white-space: nowrap; }
.foot__lines i::after { content: ""; display: inline-block; width: 1px; height: .95em; margin-left: 3px; vertical-align: -2px; background: rgba(255,255,255,.7); animation: caret 1s steps(1) infinite; }
.foot__lines i::before { content: ""; position: absolute; left: -13px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.75); }
.foot__main { display: grid; gap: 48px; padding-top: 32px; padding-bottom: 56px; border-top: 1px solid rgba(255,255,255,.16); }
.foot__logo { display: inline-flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 500; }
.foot__logo .brand__mark svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.6; }
.foot__claim { margin-top: 18px; font: 400 clamp(1.4rem, 2vw, 1.8rem)/1.2 var(--serif); letter-spacing: -0.02em; max-width: 16ch; }
.foot__status { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; font-size: .82rem; color: rgba(255,255,255,.72); }
.foot__status i { width: 7px; height: 7px; border-radius: 50%; background: #7CE3A4; box-shadow: 0 0 0 4px rgba(124,227,164,.18); }
.foot__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
.foot__cols > div { display: flex; flex-direction: column; gap: 10px; padding: 0 24px; border-left: 1px solid rgba(255,255,255,.16); }
.foot__cols h3 { font: 500 .9rem var(--sans); color: #fff; margin-bottom: 6px; }
.foot__cols a, .foot__cols span, .foot__cols button { font: 400 .88rem var(--sans); color: rgba(255,255,255,.68); text-decoration: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.foot__cols span { cursor: default; }
.foot__cols a:hover, .foot__cols button:hover { color: #fff; }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .78rem; color: rgba(255,255,255,.55); padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
@media (min-width: 900px) {
  .foot__main { grid-template-columns: 1fr 2fr; }
  .foot__cols { grid-template-columns: repeat(4, 1fr); }
}

/* What we believe: copy centered vertically, logos stay under the text */
.feature { place-items: center !important; padding: clamp(64px, 10vh, 120px) var(--gutter) !important; }
.feature__bg::after { background: linear-gradient(180deg, rgba(8,14,16,.35) 0%, rgba(8,14,16,.62) 50%, rgba(8,14,16,.4) 100%) !important; }

/* What we believe title: two clean lines, a touch larger */
.feature__copy h2 { font-size: clamp(2.3rem, 4.4vw, 4rem) !important; line-height: 1.05; letter-spacing: -0.04em; max-width: none; text-wrap: nowrap; }
@media (max-width: 899px) { .feature__copy h2 { text-wrap: balance; font-size: clamp(2rem, 8vw, 2.6rem) !important; } }
.feature__copy h2 .soft { display: block; }

/* End zone, after concurrence.com: the last sections sit on one white card; near the bottom
   its sides pull in and its corners round, revealing the gradient that carries on into the footer */
.endzone { position: relative; isolation: isolate; background: #02252a; }
.endzone > .grad { border-radius: 0; z-index: -1; }
.endcard { --inset: 0px; position: relative; z-index: 1; background: #fff;
  clip-path: inset(0 var(--inset) 0 var(--inset) round 0 0 calc(var(--inset) * .75) calc(var(--inset) * .75)); }
.endcard .cta2 { margin-top: clamp(96px, 12vw, 160px); }
.endcard .cta2__panel { border-radius: 0; box-shadow: none; }
.foot { background: none; margin-top: 0; }

/* What we believe: copy dead-centered, logos pinned to the bottom of the section */
.feature { position: relative; }
.feature .feature__logos { position: absolute; left: 0; right: 0; bottom: clamp(32px, 6vh, 64px); margin: 0; z-index: 1; }
.feature__copy h2 { text-wrap: wrap !important; }

/* Footer band: short taglines typed and erased */
.foot__type { height: clamp(180px, 22vw, 280px); display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); }
.foot__type p { font: 400 clamp(2.2rem, 5.2vw, 4.6rem)/1 var(--serif); letter-spacing: -0.04em; color: #fff; white-space: nowrap; }
.foot__typetxt::after { content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 6px; vertical-align: -.08em; background: rgba(255,255,255,.8); animation: caret 1s steps(1) infinite; }

.feature__copy h2 .soft { color: #fff !important; }
.feature__sub { margin-top: clamp(28px, 3vw, 40px); }

/* Footer logo: exactly the navbar wordmark (no circle), in white */
.foot__logo { gap: 12px; color: #fff; }
.foot__logo .brand__mark { width: 34px; height: 34px; background: none; border-radius: 0; }
.foot__logo .brand__mark svg { width: 34px; height: 34px; stroke: currentColor; stroke-width: 1.5; }
.foot__logo .brand__name { font: 450 1.35rem/1 var(--serif); letter-spacing: -0.015em; }
.foot__status { gap: 0; }

/* Tighter gap between the team profiles and the closing CTA */
.endcard .cta2 { margin-top: 0 !important; }
.endcard .cta2__panel { padding-top: clamp(72px, 8vw, 120px); }

/* One spacing scale between sections */
:root { --sec: clamp(88px, 10vw, 144px); }
.clients + .solutions, .approach, .about, .trust, .apart, .team { padding-top: var(--sec) !important; padding-bottom: 0 !important; margin-top: 0 !important; }
.approach { padding-top: calc(var(--sec) - max(0px, (100vh - 726px) / 2)) !important; }
.feature { margin-top: var(--sec) !important; }
.endcard .cta2__panel { padding-top: var(--sec) !important; }
.stories { padding-top: var(--sec) !important; }
@media (min-width: 900px) {
  .approach { padding-top: calc(var(--sec) - max(0px, (100vh - 726px) / 2)) !important; }
  .stories { padding-top: 0 !important; }
  .stories__pin { height: auto; padding-top: var(--sec); top: max(0px, calc((100vh - var(--pin-h, 100vh)) / 2)); }
}
@media (max-width: 899px) { .approach { padding-top: var(--sec) !important; } }

.about__story { padding-top: 0 !important; padding-bottom: 0 !important; }
.clients + .solutions { padding-top: calc(var(--sec) - clamp(36px, 4vw, 52px)) !important; }
.apart .apart__grid, .apart .apart__head { padding-top: 0 !important; margin-top: 0 !important; }

.apart .apart__head .eyebrow { margin-top: 0 !important; }

/* Results pin: spacing lives on the section, the pinned block itself sits dead-center while sliding */
@media (min-width: 900px) {
  .stories { padding-top: var(--sec) !important; box-sizing: border-box; }
  .stories__pin { padding-top: 0 !important; }
}

/* Mobile navbar: bare menu icon (no pill, no background), no Get in touch button */
@media (max-width: 899px) {
  .nav .nav__end { display: none !important; }
  .nav .nav__group, .nav.is-solid .nav__group { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .nav .nav__toggle, .nav.is-solid .nav__toggle { background: none !important; width: 40px; height: 40px; gap: 6px; margin: 0; }
  .nav .nav__toggle span, .nav.is-solid .nav__toggle span { width: 22px; height: 1.8px; background: var(--ink); }
  .nav.on-dark .nav__toggle span { background: #fff; }
  .nav .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.9px) rotate(45deg); }
  .nav .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.9px) rotate(-45deg); }
}

/* How we work on phones: vertical timeline, line fills as you scroll */
@media (max-width: 899px) {
  .flow { gap: 0; margin-top: 40px; }
  .flow__line { display: block; position: absolute; left: calc(var(--gutter) + 17.5px); top: 18px; bottom: 54px; width: 1px; background: var(--line); }
  .flow__line span { display: block; width: 100%; height: 100%; background: var(--terra); transform-origin: top; transform: scaleY(var(--p)); }
  .flow__step { padding: 0 0 36px 56px; }
  .flow__step:last-child { padding-bottom: 0; }
  .flow__n { position: absolute; left: 0; top: 0; width: 36px; height: 36px; font-size: .72rem; }
  .flow__step.is-on .flow__n { transform: none; }
  .flow__step h3 { font-size: 1.25rem; line-height: 36px; margin: 0 0 6px; }
  .flow__step p { font-size: .95rem; line-height: 1.55; }
}

/* Why Saraya on phones: no flip, the photo sits above the text in one card */
@media (max-width: 899px) {
  .apart .edge { height: auto; perspective: none; cursor: default; border-radius: 24px; overflow: hidden; background: #F4F4F2; }
  .apart .edge .edge__inner, .apart .edge.is-flipped .edge__inner, .apart .edge:hover .edge__inner, .apart .edge.is-peek .edge__inner { transform: none !important; animation: none !important; display: flex; flex-direction: column-reverse; }
  .apart .edge .edge__front, .apart .edge .edge__back { position: static; transform: none; border-radius: 0; -webkit-backface-visibility: visible; backface-visibility: visible; }
  .apart .edge .edge__back { height: 200px; }
  .apart .edge .edge__front { background: none; }
  .apart .edge h3 { margin-top: 28px; }
}

.mobile-menu .mobile-menu__cta { border: 1px solid #DCDFDF; align-self: flex-start; }

/* Phones: keep the walking doctor in frame and lighten the shade a little */
@media (max-width: 899px) {
  .feature__bg img { object-position: 30% 50% !important; }
  .feature__bg::after { background: linear-gradient(180deg, rgba(8,14,16,.15) 0%, rgba(8,14,16,.55) 50%, rgba(8,14,16,.3) 100%) !important; }
}

/* Mobile menu: centered links, no dividers, more air */
.mobile-menu { align-items: center; text-align: center; gap: 6px; padding-top: 28px !important; padding-bottom: 28px !important; }
.mobile-menu a { border-bottom: 0 !important; padding: 12px 0 !important; }
.mobile-menu .mobile-menu__cta { align-self: center; margin-top: 18px; }

/* Statement gets extra breathing room above and below */
.about { padding-top: calc(var(--sec) * 1.6) !important; }
.about + .trust { padding-top: calc(var(--sec) * 1.6) !important; }

/* Statement inline photos: plain rectangles */
.about__story .ipill, .about__story .ipill:hover, .about__story .ipill img { border-radius: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; clip-path: none !important; }


/* Hospital pill, built from Figma frame 57:86 (1480 x 643):
   teal layer fills the box, the building cutout sits in a taller layer that rises above the top edge */
.about__story .ipill--pop, .about__story .ipill--pop:hover { position: relative; overflow: visible !important; background: none; height: var(--pill-h, 1em); width: calc(var(--pill-h, 1em) * 1480 / 643) !important; }
.pop__bg, .pop__cut { position: absolute; overflow: hidden; pointer-events: none; }
.pop__bg { inset: 0; }
.pop__cut { left: 0; top: -52.507%; width: 103.92%; height: 152.51%; }
.about__story .ipill--pop img { position: absolute; max-width: none; object-fit: fill; filter: none !important; }
.pop__bg img { width: 135.96% !important; height: 292.46% !important; left: -35.96%; top: -121.98%; }
.pop__cut img { width: 137.17% !important; height: 143.37% !important; left: -33.06%; top: -43.37%; }

/* Statement keywords: Saraya gradient instead of flat teal (per word, so the scroll reveal still works) */
.about__story .kw .w, .about__story .kw:not(:has(.w)) {
  background-image: linear-gradient(100deg, #02252a 0%, #07707c 55%, #3BA9B7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
}
.about__story .kw, .about__story .kw:hover { background-color: transparent !important; }

/* Statement uses the section-title size; the inline image is sized in em so it scales with it */
.about__story .statement { font-size: clamp(2rem, 3.8vw, 3.4rem) !important; line-height: 1.3 !important; letter-spacing: -0.03em !important; max-width: 38ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.about__story .ipill--pop { vertical-align: -.16em; }

/* Team: square photos, no outline, name, role and LinkedIn / website icons */
.people { gap: clamp(28px, 4vw, 56px); }
.person__img { aspect-ratio: 1 / 1 !important; border-radius: 20px !important; margin-bottom: 22px; }
.person__bio { display: none !important; }
.person:hover .person__img img { transform: none; }
.person h3 { font: 400 clamp(1.4rem, 1.8vw, 1.6rem)/1.2 var(--serif); letter-spacing: -0.02em; color: #111; }
.person .role { margin-top: 6px; font-size: .95rem; color: #6B6B6B; }
.person__links { display: flex; gap: 16px; margin-top: 22px; }
.person__links a { color: #6B6B6B; display: inline-flex; transition: color .3s var(--ease); }
.person__links a:hover { color: #111; }
.person__links svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Why Saraya: no cards, just thin outline dividers between the three columns */
.apart .edges { gap: 0 !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.apart .edge { background: none !important; border-radius: 0 !important; }
.apart .edge__front { background: none !important; border-radius: 0 !important; }
.apart .edge__back { border-radius: 0 !important; }
@media (min-width: 900px) {
  .apart .edge { border-left: 1px solid var(--line); }
  .apart .edge:last-child { border-right: 1px solid var(--line); }
}
@media (max-width: 899px) {
  .apart .edges { border-bottom: 0; }
  .apart .edge { border-bottom: 1px solid var(--line); padding: 24px 0 28px; overflow: visible; }
  .apart .edge .edge__back { border-radius: 16px !important; overflow: hidden; }
  .apart .edge .edge__front { padding: 0 !important; }
}

/* Statement: same visual spacing, but it now lives inside the hover area, so the floating photos
   appear anywhere in the white band around the sentence, not only over the text */
.about { padding-top: 0 !important; }
.about .about__story { padding-top: calc(var(--sec) * 1.6) !important; padding-bottom: calc(var(--sec) * 1.6) !important; }
.about + .trust { padding-top: 0 !important; }

/* Why Saraya on desktop: three photo panels; the one you point at widens and reveals its text */
@media (min-width: 900px) {
  .apart .edges { display: flex !important; gap: 12px !important; border: 0 !important; height: clamp(380px, 34vw, 460px); }
  .apart .edge { flex: 1 1 0; height: 100% !important; min-width: 0; border: 0 !important; border-radius: 22px !important; overflow: hidden; perspective: none; cursor: default;
    transition: flex-grow .8s cubic-bezier(.2,.7,.2,1); }
  .apart .edge .edge__inner, .apart .edge:hover .edge__inner, .apart .edge.is-flipped .edge__inner, .apart .edge.is-peek .edge__inner { transform: none !important; animation: none !important; }
  .apart .edge .edge__back { position: absolute; inset: 0; transform: none !important; -webkit-backface-visibility: visible; backface-visibility: visible; border-radius: 0 !important; }
  .apart .edge .edge__back img { filter: grayscale(1) brightness(.7); transform: scale(1.06); transition: filter .8s var(--ease), transform 1.2s var(--ease); }
  .apart .edge .edge__back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,14,16,.05) 30%, rgba(4,14,16,.78) 100%); }
  .apart .edge .edge__front { position: absolute; inset: 0; z-index: 1; transform: none !important; -webkit-backface-visibility: visible; backface-visibility: visible;
    background: none !important; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(22px, 2.4vw, 32px) !important; color: #fff; }
  .apart .edge .edge__n { position: absolute; top: clamp(22px, 2.4vw, 32px); left: clamp(22px, 2.4vw, 32px); color: rgba(255,255,255,.75); }
  .apart .edge h3 { margin: 0 !important; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .apart .edge p { color: rgba(255,255,255,.82) !important; max-width: 36ch; max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
    transition: max-height .6s var(--ease), opacity .4s var(--ease), margin .6s var(--ease); }
  /* the open panel: hovered one, or the first when nothing is hovered */
  .apart .edges:not(:hover) .edge:first-child, .apart .edge:hover { flex-grow: 2.6; }
  .apart .edges:not(:hover) .edge:first-child .edge__back img, .apart .edge:hover .edge__back img { filter: none; transform: none; }
  .apart .edges:not(:hover) .edge:first-child p, .apart .edge:hover p { max-height: 6em; opacity: 1; margin-top: 10px; transition-delay: .15s; }
  .apart .edges:not(:hover) .edge:first-child h3, .apart .edge:hover h3 { white-space: normal; }
}

/* Why Saraya: interactive art cards — cursor spotlight, glowing edge, gentle 3D tilt, line art that comes alive */
.why { display: grid; gap: 16px; margin-top: clamp(36px, 5vw, 56px); perspective: 1200px; }
@media (min-width: 900px) { .why { grid-template-columns: repeat(3, 1fr); } }
.why__card { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --glow: 0;
  position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: #F5F5F3; padding: clamp(26px, 2.6vw, 36px);
  min-height: clamp(320px, 26vw, 380px); display: flex; flex-direction: column; outline: none;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .5s var(--ease), background .5s var(--ease); }
.why__card.is-tilting { transition: background .5s var(--ease); }
.why__card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--glow); transition: opacity .5s var(--ease);
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(59,169,183,.26), rgba(59,169,183,0) 65%); }
.why__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: var(--glow); transition: opacity .5s var(--ease);
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(7,112,124,.9), rgba(7,112,124,0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.why__card:hover, .why__card:focus-visible { background: #F1F6F6; }
.why__n { font-size: .85rem; color: #8A8A8A; margin-top: auto; }
.why__card h3 { margin: 8px 0 10px; font: 400 clamp(1.35rem, 1.8vw, 1.6rem)/1.2 var(--serif); letter-spacing: -0.025em; color: #111; }
.why__card p { font-size: .95rem; line-height: 1.5; color: #6B6B6B; max-width: 34ch; }

.why__art { width: 140px; height: 94px; overflow: visible; fill: none; stroke: #9AA7A9; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transform: translateZ(30px); transition: stroke .5s var(--ease); }
.why__card:hover .why__art, .why__card.is-live .why__art { stroke: var(--terra); }
/* 01 bars grow from the ground */
.art--bars .b { fill: rgba(7,112,124,.06); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.45); transition: transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 70ms), fill .5s; }
.why__card:hover .art--bars .b, .why__card.is-live .art--bars .b { transform: scaleY(1); fill: rgba(7,112,124,.16); }
.art--bars::after { content: none; }
/* 02 dots light up into a custom pattern */
.art--dots .d { fill: #C9D2D3; stroke: none; transform-box: fill-box; transform-origin: center; transition: fill .4s var(--ease) calc(var(--i) * 40ms), transform .5s var(--ease) calc(var(--i) * 40ms); }
.why__card:hover .art--dots .d.on, .why__card.is-live .art--dots .d.on { fill: var(--terra); transform: scale(1.6); }
.why__card:hover .art--dots .d:not(.on), .why__card.is-live .art--dots .d:not(.on) { fill: #DCE3E4; }
/* 03 globe turns, a pin drops on the spot */
.art--globe .m { transform-box: fill-box; transform-origin: center; }
.why__card:hover .art--globe .m1, .why__card.is-live .art--globe .m1 { animation: why-spin 3.2s linear infinite; }
.why__card:hover .art--globe .m2, .why__card.is-live .art--globe .m2 { animation: why-spin 3.2s linear infinite -1.6s; }
.art--globe .pin { fill: rgba(7,112,124,.12); transform: translateY(-14px); opacity: 0; transition: transform .7s cubic-bezier(.3,1.6,.5,1) .15s, opacity .3s .15s; }
.why__card:hover .art--globe .pin, .why__card.is-live .art--globe .pin { transform: none; opacity: 1; }
@keyframes why-spin { 0% { transform: scaleX(1); } 25% { transform: scaleX(.15); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(-.15); } 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .why__card, .why__art * { transition: none !important; animation: none !important; } }

.why__card.reveal.is-in, .why__card.is-in { transform: rotateX(var(--rx)) rotateY(var(--ry)) !important; }
.why__card.is-tilting.is-in { transition: background .5s var(--ease), opacity .8s var(--ease) !important; }

/* Why Saraya healthcare line art: ward walk-through, patient checklist, Indonesian partner cities */
.why__art { width: clamp(170px, 15vw, 210px); height: auto; aspect-ratio: 160 / 100; }
.why__card:hover .why__art, .why__card.is-live .why__art { stroke: #7F9497; }
.hot, .why__card .route, .why__card .tick, .why__card .stop, .why__card .city { stroke: var(--terra); }
/* 01 ward: the walking route draws through the rooms, stops appear at each bed */
.art--ward .beds rect { fill: rgba(7,112,124,.05); }
.art--ward .route { stroke-width: 1.8; stroke-dasharray: .03 .025; stroke-dashoffset: 0; opacity: 0; transition: opacity .3s; }
.art--ward .route { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1); }
.art--ward .stop { fill: #fff; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1) calc(.35s + var(--i) * .45s); }
.why__card:hover .art--ward .route, .why__card.is-live .art--ward .route { stroke-dashoffset: 0; }
.why__card:hover .art--ward .stop, .why__card.is-live .art--ward .stop { transform: scale(1); fill: var(--terra); }
/* 02 patient chart: each item gets ticked in turn */
.art--chart .clip { fill: #F5F5F3; }
.art--chart .cross { stroke: #9AA7A9; stroke-width: 2; transition: stroke .4s; }
.why__card:hover .art--chart .cross, .why__card.is-live .art--chart .cross { stroke: var(--terra); }
.art--chart .tick { stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s ease calc(.2s + var(--i) * .3s); }
.why__card:hover .art--chart .tick, .why__card.is-live .art--chart .tick { stroke-dashoffset: 0; }
/* 03 map: partner cities light up across the archipelago */
.art--map .isl path { fill: rgba(7,112,124,.04); transition: fill .6s var(--ease); }
.why__card:hover .art--map .isl path, .why__card.is-live .art--map .isl path { fill: rgba(7,112,124,.09); }
.art--map .city .dot { fill: #C9D2D3; stroke: none; transition: fill .3s calc(var(--i) * .12s); }
.art--map .city .ring { fill: none; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.why__card:hover .art--map .city .dot, .why__card.is-live .art--map .city .dot { fill: var(--terra); }
.why__card:hover .art--map .city .ring, .why__card.is-live .art--map .city .ring { animation: city-ping 1.8s ease-out calc(var(--i) * .12s) infinite; }
@keyframes city-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }

/* Why Saraya, simple: number, title and text; spotlight + tilt stay as the only interaction */
.why__card { min-height: clamp(240px, 20vw, 280px); }
.why__n { margin-top: 0; }
.why__card h3 { margin-top: clamp(56px, 6vw, 88px); }

/* Why Saraya, after accessgrid.com: three columns split by hairlines, each with icon, copy and a small live demo */
.why2 { display: grid; margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line); }
.wy { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px) clamp(4px, 2.4vw, 40px) 0; }
@media (min-width: 900px) {
  .why2 { grid-template-columns: repeat(3, 1fr); border-top: 0; }
  .wy { border-left: 1px solid var(--line); }
  .wy:last-child { border-right: 1px solid var(--line); }
}
@media (max-width: 899px) { .wy { border-bottom: 1px solid var(--line); padding-bottom: 28px; } }
.wy__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--terra) 8%, #fff); }
.wy__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--terra); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wy h3 { margin: 28px 0 10px; font: 500 1.1rem/1.3 var(--sans); color: #111; letter-spacing: -0.01em; }
.wy > p { font-size: .98rem; line-height: 1.6; color: #6B6B6B; max-width: 38ch; }
.wy__demo { margin-top: clamp(28px, 3vw, 40px); height: clamp(240px, 22vw, 300px); }

/* 01: slowly scrolling list, faded at both ends */
.wy__list { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent); }
.wy__track { list-style: none; padding: 0; margin: 0; animation: wy-scroll 22s linear infinite; }
.wy__list:hover .wy__track { animation-play-state: paused; }
.wy__track li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; font-size: .95rem; color: #2a2a2a; }
.wy__track em { font-style: normal; font-size: .75rem; color: #6B6B6B; background: #F2F3F3; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
@keyframes wy-scroll { to { transform: translateY(-50%); } }

/* 02: service-line tiles, one lights up at a time */
.wy__tiles { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.wy__tiles li { display: grid; place-items: center; border-bottom: 1px solid var(--line); font: 500 .98rem var(--sans); color: #9A9A9A; letter-spacing: -0.01em;
  transition: color .5s var(--ease), background .5s var(--ease); }
.wy__tiles li:nth-child(odd) { border-right: 1px solid var(--line); }
.wy__tiles li.is-on, .wy__tiles li:hover { color: var(--terra); background: color-mix(in srgb, var(--terra) 6%, #fff); }

/* 03: chat that plays out */
.wy__chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.bub { max-width: 82%; padding: 12px 16px; border-radius: 16px; font-size: .9rem; line-height: 1.45; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.bub--in { align-self: flex-start; background: #F2F3F3; color: #2a2a2a; border-bottom-left-radius: 4px; }
.bub--out { align-self: flex-end; background: var(--terra); color: #fff; border-bottom-right-radius: 4px; }
.bub--typing { align-self: flex-end; display: flex; gap: 4px; padding: 14px 16px; background: color-mix(in srgb, var(--terra) 12%, #fff); }
.bub--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--terra); animation: wy-dot 1s ease-in-out infinite; }
.bub--typing i:nth-child(2) { animation-delay: .15s; } .bub--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wy-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.wy__chat .bub.is-on { opacity: 1; transform: none; }
.wy__chat .bub--typing:not(.is-on) { position: absolute; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .wy__track { animation: none; } .bub { opacity: 1; transform: none; } .bub--typing { display: none; } }

/* Logo lockups: logogram sits closer to the wordmark everywhere */
.brand, .nav .brand, .nav > .brand, .foot__logo, .loader__in { gap: 1px !important; }

/* Why Saraya icons: bare, no tile behind them */
.wy__ic { background: none !important; width: auto; height: auto; place-items: start; border-radius: 0; }
.wy__ic svg { width: 28px; height: 28px; }

/* Chat demo, smoother: nothing reflows; typing dots and the reply share one slot and cross-fade */
.wy__chat { height: auto !important; min-height: clamp(240px, 22vw, 300px); justify-content: flex-start; padding-top: 8px; }
.bub-slot { display: grid; justify-items: end; }
.bub-slot > .bub { grid-area: 1 / 1; }
.wy__chat .bub--typing, .wy__chat .bub--typing:not(.is-on) { position: static !important; visibility: visible !important; align-self: end; }
.wy__chat .bub { opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.wy__chat .bub--in { transform-origin: 0 100%; }
.wy__chat .bub--out, .wy__chat .bub--typing { transform-origin: 100% 100%; }
.wy__chat .bub.is-on { opacity: 1; transform: none; }

/* Why Saraya: duotone icons (light teal fill + teal line), dividers only between the columns */
.wy__ic svg path, .wy__ic svg rect { fill: color-mix(in srgb, #3BA9B7 28%, #fff); }
.wy__ic svg { stroke: var(--terra); }
@media (min-width: 900px) {
  .wy:first-child { border-left: 0 !important; padding-left: 0; }
  .wy:last-child { border-right: 0 !important; padding-right: 0; }
}

/* Service-line grid runs edge to edge across its column, between the dividers */
.wy { --px: clamp(4px, 2.4vw, 40px); padding-left: var(--px); padding-right: var(--px); }
@media (min-width: 900px) { .wy:first-child { padding-left: 0; } .wy:last-child { padding-right: 0; } }
.wy__tiles { margin-left: calc(var(--px) * -1); margin-right: calc(var(--px) * -1); }

/* Why Saraya icons, after accessgrid.com: thin line, one filled main shape, a paler ghost shape behind */
.wy__ic svg { width: 44px !important; height: 44px !important; stroke-width: 1.3; fill: none; }
.wy__ic svg .mn { fill: #DDF1F3 !important; stroke: #0B7C8A; }
.wy__ic svg .gh { fill: #fff !important; stroke: #A6D6DC; }
.wy__ic svg .ln { fill: none !important; stroke: #0B7C8A; }

/* Founders: duotone portrait by default, full-colour portrait fades in on hover */
.person__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person__img .person__color { opacity: 0; transition: opacity .6s var(--ease); }
.person:hover .person__color, .person:focus-within .person__color { opacity: 1; }

/* Quote card: tall portrait (1102 x 2000) next to the quote, both centred vertically */
@media (min-width: 900px) {
  .pc--quote { grid-template-columns: 1fr auto !important; align-items: center; }
  .pc--quote img { height: 100% !important; width: auto !important; aspect-ratio: 1102 / 2000 !important; object-fit: cover; object-position: 50% 20%; justify-self: end; }
  .pc__body { justify-content: center; height: 100%; }
  .pc--quote figcaption { margin-top: 0 !important; }
}
@media (max-width: 899px) { .pc--quote img { aspect-ratio: 1102 / 2000 !important; width: 60% !important; justify-self: center; } }

/* Founder photos: same tall portrait ratio as the quote card */
.person__img { aspect-ratio: 1102 / 2000 !important; }
.person__img img { object-position: 50% 20%; }

/* Founders: smaller portraits, centred as a group */
@media (min-width: 720px) { .people { grid-template-columns: repeat(3, minmax(0, 250px)) !important; justify-content: center; gap: clamp(20px, 2.2vw, 32px) !important; } }
@media (max-width: 719px) { .people .person { max-width: 300px; } }

.people .person { display: flex; flex-direction: column; }
.people .person__links { margin-top: auto; padding-top: 18px; }

/* Results quote card: Saraya wordmark in white */
.scard__brand { display: inline-flex; align-items: center; gap: 1px; align-self: flex-start; color: #fff; font: 450 1.25rem/1 var(--serif); letter-spacing: -0.015em; }
.scard__brand .brand__mark { width: 30px; height: 30px; background: none; border-radius: 0; }
.scard__brand .brand__mark svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.scard--photo img[src*="team-bima"] { object-position: 50% 20%; }
.scard--photo img[src*="results-waiting-room"], .scard--photo img[src*="results-nurse-patient"] { object-position: 50% 100%; }

.scard--person { width: min(56vw, 230px) !important; }

/* Mobile: team as a swipeable row, quote card with photo on top */
@media (max-width: 719px) {
  .people { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 68%; gap: 14px !important; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: 0; padding: 0 20px 4px; scroll-padding-inline: 20px; scrollbar-width: none; }
  .people::-webkit-scrollbar { display: none; }
  .people .person { max-width: none; scroll-snap-align: start; }
  .person__img { aspect-ratio: 4 / 5 !important; margin-bottom: 16px; border-radius: 18px !important; }
  .person__img .person__color { opacity: 1; }
  .person h3 { font-size: 1.3rem; }
  .person .role { font-size: .9rem; margin-top: 4px; }
  .people .person__links { padding-top: 14px; gap: 14px; }
  .person__links svg { width: 18px; height: 18px; }
}
@media (max-width: 899px) {
  .pc--quote { grid-template-columns: 1fr !important; gap: 22px; padding: 16px 16px 26px; }
  .pc--quote img { order: -1; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; object-position: 50% 18%; border-radius: 14px; justify-self: stretch; }
  .pc--quote .pc__body { padding: 0 8px; }
  .pc--quote blockquote { font-size: 1.4rem; margin-bottom: 18px; }
}

/* Mobile: Results and Our team pin, vertical scroll slides the cards sideways */
@media (max-width: 899px) {
  .stories { height: var(--stories-h, auto); box-sizing: border-box; }
  .stories__pin { position: sticky; top: max(0px, calc((100svh - var(--pin-h, 100svh)) / 2)); overflow: hidden; }
  .stories .track { overflow: visible; scroll-snap-type: none; cursor: default; will-change: transform; }
  .stories .scard { height: clamp(340px, 52vh, 420px); }
  .stories__head { justify-content: center; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .team.is-pinned { height: var(--team-h, auto); box-sizing: border-box; }
  .team.is-pinned .team__pin { position: sticky; top: max(0px, calc((100svh - var(--pin-h, 100svh)) / 2)); overflow: hidden; }
  .team.is-pinned .people { overflow: visible; scroll-snap-type: none; will-change: transform; }
}

/* Why Saraya on mobile: no dividers, spacing only */
@media (max-width: 899px) {
  .why2 { border-top: 0 !important; gap: 56px; margin-top: 40px; }
  .wy { border: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hw > span { transform: none; }
}

/* Solutions: two columns. The intro stays put on the left while the cards stack up on the right */
@media (min-width: 900px) {
  .sol2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
  .sol2__l.center { text-align: left; align-self: stretch; }
  .sol2__stick { position: sticky; top: 0; height: 100vh; padding-top: 72px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
  .sol2 .eyebrow { align-self: flex-start; text-align: left; margin-left: 0; }
  .solutions .sol2 .sol-title { margin: 18px 0 0; max-width: 15ch; font-size: clamp(2.1rem, 3.4vw, 3.3rem); text-align: left; }
  .sol2 .who { margin-top: 26px; border-radius: 999px; padding: 8px 20px 8px 8px; }
  .sol2 .who p { white-space: nowrap; max-width: none; }
  .sol2 .copy { display: flex; align-items: flex-start; text-align: left; gap: 16px; margin-top: clamp(36px, 5vh, 56px); }
  .sol2 .words { justify-content: flex-start; gap: 2px 22px; }
  .sol2 .word { font-size: clamp(1.4rem, 1.9vw, 1.8rem); }
  .sol2 .word.is-active::before { left: 50%; }
  .sol2 .descs { max-width: 44ch; margin-top: 8px; }
  .sol2 .progress { max-width: 220px; }
  .solutions .sol2 .steps { height: auto; margin-top: 0; }
  .sol2 .stage { width: auto; height: auto; margin-top: 0; display: flex; flex-direction: column; gap: 40vh; }
  /* both columns centre on the same line, just below the header */
  .sol2 { --ch: clamp(380px, 56vh, 470px); --ct: calc(50vh - var(--ch) / 2 + 36px); }
  .sol2__r { padding: var(--ct) 0 calc(100vh - var(--ct) - var(--ch)); }
  .sol2 .panel {
    position: sticky; inset: auto; top: var(--ct); height: var(--ch); margin: 0;
    padding: 32px 30px; gap: 18px;
    transform-origin: 50% 0; opacity: 1; visibility: visible; z-index: auto;
    box-shadow: 0 -18px 40px -26px rgba(10,20,30,.35);
  }
  .sol2 .panel__title { font-size: clamp(1.3rem, 1.7vw, 1.6rem); }
  .sol2 .panel .mcard { width: min(100%, 340px); padding: 18px; zoom: .92; }
  .sol2 .panel .chart { height: 64px; }
  .solutions, .clients + .solutions { padding-top: 0; padding-bottom: 0; }
}

/* Why Saraya 01: the list still drifts on its own, and can be scrolled by hand */
.wy__list { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; outline: none; cursor: ns-resize; }
.wy__list::-webkit-scrollbar { display: none; }
.wy__list .wy__track { animation: none; }

/* Why Saraya 02: each service-line tile opens a small card in the middle of the grid */
.wy__tilewrap { position: relative; }
.wy__tilewrap .wy__tiles { margin-top: 0; height: 100%; }
.wy__tiles li { padding: 0; }
.wy__tiles button { width: 100%; height: 100%; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; }
.wy__tiles button:focus-visible { outline: 2px solid var(--terra); outline-offset: -4px; }
.wy__tilewrap.has-pop .wy__tiles li { color: #C4C4C4; background: none; }
.wy__tilewrap.has-pop .wy__tiles li.is-on { color: var(--terra); background: color-mix(in srgb, var(--terra) 6%, #fff); }
.wy__pop {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: min(280px, 86%); padding: 20px 20px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; text-align: left;
  box-shadow: 0 24px 50px -18px rgba(10,30,35,.28), 0 2px 8px rgba(10,30,35,.06);
  transform: translate(-50%, -50%); animation: wy-pop .35s cubic-bezier(.2,.8,.2,1);
}
.wy__pop[hidden] { display: none; }
@keyframes wy-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } }
.wy__popk { display: block; font: 500 .72rem/1 var(--sans); color: var(--ink-3); margin-bottom: 8px; }
.wy__pop h4 { font: 500 1.08rem/1.25 var(--sans); color: var(--terra); letter-spacing: -0.01em; margin: 0 0 8px; }
.wy__pop p { font-size: .88rem; line-height: 1.5; color: #555; margin: 0; }
.wy__popx { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #F2F3F3; color: #555; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.wy__popx:hover { background: #E6E8E8; }
@media (prefers-reduced-motion: reduce) { .wy__pop { animation: none; } }

/* Solutions, left column: a numbered list; the active row turns dark and opens its line of copy */
@media (min-width: 900px) {
  .sol2 .copy { width: 100%; max-width: 440px; margin-top: clamp(32px, 5vh, 52px); gap: 0; }
  .tabs2 { width: 100%; border-top: 1px solid var(--line); }
  .tab2 { position: relative; border-bottom: 1px solid var(--line); padding: 16px 0; }
  .tab2::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--acc, var(--ink)); transition: width .6s var(--ease), background .4s; }
  .tab2:has(.word.is-active)::before { width: 100%; }
  .sol2 .tab2 .word {
    display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 0; text-align: left;
    font: 400 clamp(1.25rem, 1.6vw, 1.5rem)/1.2 var(--serif); letter-spacing: -0.02em; color: var(--ink-3);
  }
  .sol2 .tab2 .word.is-active { color: var(--ink); padding-left: 0; }
  .sol2 .tab2 .word.is-active::before { display: none; }
  .word__n { flex: none; width: 22px; font: 500 .74rem/1 var(--sans); letter-spacing: .02em; color: var(--ink-3); transition: color .4s; }
  .word.is-active .word__n { color: var(--acc, var(--ink)); }
  .sol2 .tab2 .desc {
    grid-area: auto; display: grid; grid-template-rows: 0fr; opacity: 0; transform: none; padding-left: 38px;
    transition: grid-template-rows .55s var(--ease), opacity .4s var(--ease), margin .55s var(--ease);
  }
  .sol2 .tab2 .desc > p { overflow: hidden; min-height: 0; margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
  .sol2 .tab2 .desc.is-active { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
}

/* Solutions cards: flat, no drop shadow */
.sol2 .panel { box-shadow: none !important; }

/* What we do: the heading scrolls away normally; from the "Built for" pill down, the left column
   sticks, centred on the same line as the card beside it */
@media (min-width: 900px) {
  .sol3 { grid-template-areas: "head ." "l r"; row-gap: clamp(36px, 6vh, 64px); padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(64px, 8vw, 110px); }
  .sol3__head { grid-area: head; text-align: left; align-items: flex-start; }
  .sol2 .sol2__l { align-items: stretch; }
  .sol3__head > .eyebrow { margin-left: 0; }
  .sol3 .sol2__l { grid-area: l; }
  .sol3 .sol2__r { grid-area: r; padding: 0; }
  .sol3 .sol2__stick { top: var(--ct); height: auto; min-height: var(--ch); padding-top: 0; justify-content: center; }
  .sol3 .who { margin-top: 0; }
}

/* FAQ: one centred column; a plain chevron opens each answer */
.faq2 { padding: var(--sec, 120px) 0 0; }
.faq2__grid { display: flex; flex-direction: column; align-items: center; gap: clamp(36px, 5vw, 56px); }
.faq2__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.faq2__head .eyebrow { margin-left: auto; margin-right: auto; }
.faq2__head h2 { margin-top: 16px; text-align: center; }
.faq2__sub { margin: 16px auto 24px; max-width: 40ch; color: var(--ink-2); line-height: 1.55; }
.faq2 .faq2__list { width: 100%; max-width: 760px; margin: 0 auto; padding: 0; border-top: 1px solid var(--line); }
.faq2 .qa__q { font: 500 1.05rem/1.4 var(--sans); color: var(--ink); letter-spacing: -0.01em; }
.faq2 .qa__ic, .faq2 .qa__q:hover .qa__ic, .faq2 .qa.is-open .qa__ic { width: 20px; height: 20px; background: none !important; border-radius: 0; transform: none; }
.faq2 .qa__ic::after { display: none; }
.faq2 .qa__ic::before {
  width: 8px; height: 8px; margin: -6px 0 0 -4px; background: none; border-right: 1.6px solid #B9C3C4; border-bottom: 1.6px solid #B9C3C4;
  transform: rotate(45deg); transition: transform .45s var(--ease), margin .45s var(--ease), border-color .3s;
}
.faq2 .qa__q:hover .qa__ic::before { border-color: #9A9A9A; }
.faq2 .qa.is-open .qa__ic::before { transform: rotate(225deg); margin-top: -2px; }
.faq2 .qa__a p { max-width: 62ch; line-height: 1.6; padding-right: 40px; }

/* What we do: centred title across both columns; tighter column gap so the cards can be much larger */
@media (min-width: 900px) {
  .sol3 { grid-template-areas: "head head" "l r"; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(28px, 3.5vw, 56px); --ch: clamp(440px, 66vh, 600px); }
  .sol3__head { text-align: center; align-items: center; }
  .sol3__head > .eyebrow { margin-left: auto; margin-right: auto; }
  .solutions .sol3 .sol3__head .sol-title { margin: 18px auto 0; max-width: 21ch; text-align: center; font-size: clamp(2.2rem, 4vw, 3.6rem); }
  .sol3 .panel { padding: 40px 40px; gap: 24px; }
  .sol3 .panel__title { font-size: clamp(1.5rem, 2.1vw, 2rem); }
  .sol3 .panel .mcard { width: min(100%, 420px); padding: 22px; zoom: 1; }
  .sol3 .panel .chart { height: 84px; }
  .sol3 .who p { font-size: .84rem; }
  .sol3 .who { gap: 12px; padding: 6px 16px 6px 6px; max-width: none; }
  .sol3 .who__stack span { width: 30px; height: 30px; }
  .sol3 .who__stack svg { width: 14px; height: 14px; }
  .sol3 .who__stack span + span { margin-left: -8px; }
  .sol3 .who:hover .who__stack span + span { margin-left: 0px; }
}
/* small laptops: the pill drops its icons so the text still fits in one rounded line */
@media (min-width: 900px) and (max-width: 1120px) { .sol3 .who__stack { display: none; } .sol3 .who { padding: 10px 18px; } }

/* What we do: cards sit close together, so the next one is already peeking up while you read the current one */
@media (min-width: 900px) { .sol3 .stage { gap: 24px; } }

/* Section rhythm after the reorder: one --sec of space between the content of neighbouring sections */
.about .about__story { padding-top: calc(var(--sec) - clamp(36px, 4vw, 52px)) !important; padding-bottom: var(--sec) !important; }
@media (min-width: 900px) {
  .sol3 { padding-top: 0; padding-bottom: 0; }
  .approach { padding-top: var(--sec) !important; }
}
@media (max-width: 899px) {
  .about + .solutions { padding-top: 0 !important; }
}

/* Buttons: one light style everywhere. A hairline ring (drawn inside, so every button stays the same height)
   keeps the white button visible on white sections */
.pbtn--light, .scard--cta .pbtn--light, .cta2 .pbtn--light, .mobile-menu__cta { border: 0 !important; box-shadow: inset 0 0 0 1px #DCDFDF !important; }
.pbtn--light:hover { box-shadow: inset 0 0 0 1px #C9CFCF !important; }

/* Opening animation for components (classes added by script.js) */
.io { opacity: 0; }
.io.io-in { animation: io-rise .95s cubic-bezier(.2, .7, .2, 1) var(--io-d, 0s) both; }
@keyframes io-rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .io { opacity: 1; } .io.io-in { animation: none; } }

/* About: a proper introduction right after the hero; copy and facts on the left, a photo on the right */
.about2__grid { display: grid; gap: 40px; align-items: center; }
.about2__copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.about2 h2 { margin-top: 16px; max-width: 16ch; text-align: left; font-size: clamp(2.1rem, 3.6vw, 3.3rem); }
.about2__lead { margin: 22px 0 0; max-width: 46ch; font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.6; color: var(--ink-2); }
.about2__facts { display: grid; grid-template-columns: repeat(3, auto); gap: 28px; margin: 36px 0 0; padding-top: 28px; border-top: 1px solid var(--line); width: 100%; max-width: 520px; }
.about2__facts div { display: flex; flex-direction: column; gap: 6px; }
.about2__facts dt { font: 400 clamp(1.8rem, 2.6vw, 2.4rem)/1 var(--serif); letter-spacing: -0.03em; color: var(--ink); }
.about2__facts dd { margin: 0; font-size: .86rem; line-height: 1.35; color: var(--ink-2); max-width: 14ch; }
.about2__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: border-color .3s, gap .3s var(--ease); }
.about2__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.about2__link:hover { border-color: var(--ink); gap: 14px; }
.about2__media { position: relative; margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; }
.about2__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease); }
.about2__media:hover img { transform: scale(1.03); }
.about2__media figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 14px 18px; border-radius: 16px;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: .88rem; line-height: 1.45; color: var(--ink-2);
}
.about2__media figcaption b { color: var(--ink); font-weight: 600; }
.about.about2 { padding-top: calc(var(--sec) - clamp(36px, 4vw, 52px)) !important; padding-bottom: var(--sec) !important; }
@media (min-width: 900px) {
  .about2__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(48px, 7vw, 112px); }
  .about2__media { aspect-ratio: 4 / 5; max-height: 640px; }
}
@media (max-width: 899px) {
  .about2__facts { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .about2__media { aspect-ratio: 4 / 3; }
}

/* How we work, corporate style: a chevron process band across the top, and under each phase a column
   with its timeframe, key activities and deliverable */
.hw3__wrap { margin-top: clamp(40px, 6vh, 64px); }
.hw3__band { display: none; }
.hw3__cols { display: grid; gap: 0; }
.hw3__col { padding: 28px 0; border-top: 1px solid var(--line); text-align: left; }
.hw3__col:last-child { border-bottom: 1px solid var(--line); }
.hw3__mob { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.hw3__mob span, .hw3__chev span { font: 600 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.hw3__mob span { color: var(--sage); }
.hw3__mob b { font: 400 1.7rem/1.1 var(--serif); letter-spacing: -0.02em; color: var(--ink); }
.hw3__time { display: inline-block; font: 600 .74rem/1 var(--sans); letter-spacing: .02em; color: var(--ink-2); background: #F2F4F4; border-radius: 999px; padding: 6px 10px; }
.hw3__desc { margin: 14px 0 0; color: var(--ink-2); line-height: 1.6; max-width: 40ch; }
.hw3__block { margin-top: 22px; padding-top: 18px; border-top: 1px dashed #DDE3E3; }
.hw3__k { display: block; font: 600 .68rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.hw3__block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hw3__block li { position: relative; padding-left: 18px; font-size: .92rem; line-height: 1.45; color: var(--ink); }
.hw3__block li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 1px; background: var(--terra); transform: rotate(45deg); }
.hw3__del p { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.45; color: var(--ink); }
@media (min-width: 900px) {
  .hw3__band { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
  .hw3__chev {
    --c: color-mix(in srgb, var(--terra) calc(28% + var(--i) * 24%), #DFF0F1);
    position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 84px; padding: 0 26px 0 40px;
    background: var(--c); color: #fff; margin-left: -14px;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
  }
  .hw3__chev:first-child { margin-left: 0; padding-left: 26px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); border-radius: 12px 0 0 12px; }
  .hw3__chev:nth-child(1) { color: var(--ink); }
  .hw3__chev span { opacity: .8; }
  .hw3__chev b { font: 400 1.45rem/1 var(--serif); letter-spacing: -0.02em; }
  .hw3__cols { grid-template-columns: repeat(4, 1fr); }
  .hw3__col { padding: 32px 28px 8px; border-top: 0; border-left: 1px solid var(--line); }
  .hw3__col:first-child { border-left: 0; padding-left: 4px; }
  .hw3__col:last-child { border-bottom: 0; padding-right: 4px; }
  .hw3__mob { display: none; }
  .hw3__desc { font-size: .95rem; }
}
/* keep timeframe, description, activities and deliverable on the same lines across all four columns */
@media (min-width: 900px) {
  .hw3__cols { grid-template-rows: repeat(4, auto); }
  .hw3__col { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .hw3__col > .hw3__time { justify-self: start; align-self: start; }
  .hw3__col > .hw3__desc { padding-bottom: 4px; }
}


/* What we do: the whole block sticks from the title down. The title pins to the top of the screen,
   the left column and the cards pin right under it; they all let go together at the end */
@media (min-width: 900px) {
  .sol3 { display: block; --hh: 220px; --ct: var(--hh); --ch: min(clamp(420px, 64vh, 580px), calc(100vh - var(--hh) - 24px)); }
  .sol3__head { position: sticky; top: 0; z-index: 6; background: #fff; padding: 28px 0 40px; }
  .solutions .sol3 .sol3__head .sol-title { font-size: clamp(2rem, 3.4vw, 3.1rem); }
  .sol3__cols { display: grid; grid-template-areas: "l r"; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(28px, 3.5vw, 56px); align-items: start;
    margin-bottom: calc(-1 * var(--ch)); }
  .sol3__cols .sol2__l { align-self: stretch; }
  .sol3 { padding-bottom: var(--ch); }
}
/* Reading progress line at the top of the page: off */
.sprog { display: none !important; }

/* Why Saraya, service-line grid: no rule above the first row or below the last */
.wy__tiles { border-top: 0 !important; }
.wy__tiles li:nth-last-child(-n+2) { border-bottom: 0 !important; }

/* Why Saraya chat: a longer conversation. Bubbles grow in at the bottom and push older ones up,
   the top edge fades out, and Saraya's replies use the teal gradient */
.wy__chat { height: clamp(300px, 26vw, 340px) !important; min-height: 0 !important; padding-top: 0 !important; gap: 0 !important;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%); mask-image: linear-gradient(180deg, transparent 0, #000 24%); }
.wy__chat .bub, .wy__chat .bub--typing, .wy__chat .bub--typing:not(.is-on) {
  position: static !important; visibility: visible !important; flex: none;
  max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden;
  transform: translateY(10px) scale(.97);
  transition: max-height .55s cubic-bezier(.2,.7,.2,1), margin .55s cubic-bezier(.2,.7,.2,1), padding .55s cubic-bezier(.2,.7,.2,1), opacity .45s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.wy__chat .bub.is-on { max-height: 140px; margin-top: 10px; padding-top: 11px; padding-bottom: 11px; opacity: 1; transform: none; }
.wy__chat .bub--typing.is-on { padding-top: 13px; padding-bottom: 13px; }
.wy__chat .bub { font-size: .88rem; }
.wy__chat .bub--out {
  background: linear-gradient(125deg, #03363d 0%, #0a6e7a 58%, #3ba9b7 130%); color: #fff;
  box-shadow: 0 8px 20px -12px rgba(3, 54, 61, .55);
}
.wy__chat .bub--typing { align-self: flex-end; }
@media (prefers-reduced-motion: reduce) { .wy__chat .bub { transition: none; } }

/* Service-line popup: label and name read as one heading, the description sits a clear step below,
   and the close button lines up with the heading */
.wy__pop { padding: 20px 22px 22px; }
.wy__pop .wy__popk { margin: 2px 52px 6px 0; font: 500 .74rem/1.2 var(--sans); letter-spacing: .01em; color: var(--ink-3); }
.wy__pop h4 { margin: 0 52px 14px 0; font: 500 1.2rem/1.2 var(--sans); letter-spacing: -0.015em; color: var(--terra); }
.wy__pop p { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.wy__popx { top: 16px; right: 16px; width: 32px; height: 32px; display: grid; place-items: center; font-size: 1.15rem; color: var(--ink-2); }

/* Patient journey card: the last step has no line below it, so it needs no bottom spacing */
.journey { margin-bottom: 0; }
.journey li:last-child { padding-bottom: 0; }

/* What we do cards: smaller card titles, sitting a little closer to the white data card */
@media (min-width: 900px) {
  .sol3 .panel { gap: 18px; }
  .sol3 .panel__title { font-size: clamp(1.2rem, 1.55vw, 1.5rem); line-height: 1.2; letter-spacing: -0.02em; }
}

/* Chat loop: the conversation fades out where it is, then is cleared without any motion */
.wy__chat.is-fading .bub { opacity: 0 !important; transform: none !important; transition: opacity .6s ease !important; }
.wy__chat.no-anim .bub { transition: none !important; }

/* Spacing after moving the About statement below What we do: one --sec between neighbours */
.about .about__story { padding-top: var(--sec) !important; padding-bottom: 0 !important; }
@media (min-width: 900px) {
  .clients + .solutions { padding-top: calc(var(--sec) - clamp(36px, 4vw, 52px) - 28px) !important; }
}

/* The About statement stands on its own, so it gets more room than a normal section gap */
.about .about__story { padding-top: calc(var(--sec) * 1.4) !important; }
#about + .apart { padding-top: calc(var(--sec) * 1.4) !important; }
.about__story .kw { white-space: nowrap; }

/* About statement keywords: a lighter teal gradient (still readable on white) */
.about__story .kw .w, .about__story .kw:not(:has(.w)) {
  background-image: linear-gradient(100deg, #0b7c8a 0%, #2a9dab 55%, #4fb4c1 100%) !important;
}

/* How we work, changelog style (after accessgrid.com): intro and a dashed-grid illustration on the left,
   a timeline on the right. While the section fills the screen, the whole page eases into dark mode. */
.clog { --ink-cl: #EEF6F6; --mute-cl: rgba(226, 240, 241, .62); --line-cl: rgba(255, 255, 255, .12); background: #061a1d; margin-top: var(--sec); padding-bottom: var(--sec) !important; }
.cl__grid { display: grid; gap: 48px; }
.cl__l { text-align: left; }
.cl__stick { display: flex; flex-direction: column; align-items: flex-start; }
.clog .eyebrow { margin: 0; color: var(--mute-cl); transition: color .7s ease; }
.clog h2 { margin-top: 16px; text-align: left; max-width: 14ch; color: var(--ink-cl); transition: color .7s ease; }
.clog h2 .soft { color: var(--mute-cl); transition: color .7s ease; }
.cl__sub { margin: 18px 0 0; max-width: 40ch; line-height: 1.6; color: var(--mute-cl); transition: color .7s ease; }
.cl__link-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 .95rem/1 var(--sans); color: var(--ink-cl); transition: color .7s ease, gap .3s var(--ease); }
.cl__link-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.cl__link-btn:hover { gap: 10px; }
.cl__art { display: none; width: 100%; max-width: 400px; margin-top: 48px; overflow: visible; }
.cl__art .cl__cells rect { fill: none; stroke: var(--line-cl); stroke-width: 1; stroke-dasharray: 4 4; transition: stroke .7s ease; }
.cl__link { fill: none; stroke: var(--mute-cl); stroke-width: 1.2; stroke-dasharray: 4 5; opacity: .55; animation: cl-flow 1.6s linear infinite; }
@keyframes cl-flow { to { stroke-dashoffset: -18; } }
.cl__node circle { fill: transparent; stroke: var(--mute-cl); stroke-width: 1.2; stroke-dasharray: 4 4; transition: fill .5s ease, stroke .5s ease; }
.cl__node text { font: 600 11px/1 var(--sans); fill: var(--mute-cl); text-anchor: middle; transition: fill .5s ease; }
.cl__node.is-on circle { fill: #0b7c8a; stroke: #3ba9b7; stroke-dasharray: none; }
.cl__node.is-on text { fill: #fff; }
.cl__node.is-done circle { stroke: #3ba9b7; stroke-dasharray: none; }
.cl__node.is-done text { fill: var(--ink-cl); }
.cl__list { list-style: none; position: relative; margin: 0; padding: 0 0 0 36px; border-left: 1px solid var(--line-cl); transition: border-color .7s ease; }
.cl__item { position: relative; padding: 0 0 48px; }
.cl__item:last-child { padding-bottom: 0; }
.cl__dot { position: absolute; left: -47px; top: 2px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--line-cl); transition: background .5s ease, box-shadow .5s ease; }
.cl__dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mute-cl); transition: background .5s ease; }
.cl__item.is-on .cl__dot { background: rgba(59, 169, 183, .18); box-shadow: 0 0 0 6px rgba(59, 169, 183, .08); }
.cl__item.is-on .cl__dot::after { background: #3ba9b7; }
.cl__item h3 { margin: 0 0 10px; font: 500 1.12rem/1.3 var(--sans); letter-spacing: -0.01em; color: var(--ink-cl); transition: color .7s ease; }
.cl__item p { margin: 0 0 12px; max-width: 46ch; font-size: .96rem; line-height: 1.6; color: var(--mute-cl); transition: color .7s ease; }
.cl__meta { font-size: .82rem; color: var(--mute-cl); transition: color .7s ease; }
.cl__meta b { font-weight: 500; color: var(--ink-cl); transition: color .7s ease; }
@media (min-width: 900px) {
  .clog { padding-bottom: var(--sec); }
  .cl__grid { grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-cl); border-bottom: 1px solid var(--line-cl); transition: border-color .7s ease; }
  .cl__l { padding: clamp(64px, 9vh, 110px) clamp(32px, 5vw, 80px) clamp(64px, 9vh, 110px) 0; }
  .cl__stick { position: sticky; top: 120px; }
  .cl__art { display: block; }
  .cl__list { padding: clamp(64px, 9vh, 110px) 0 clamp(64px, 9vh, 110px) clamp(48px, 6vw, 80px); }
  .cl__item { padding-bottom: clamp(56px, 9vh, 96px); }
  .cl__dot { left: calc(-1 * clamp(48px, 6vw, 80px) - 11px); }
}
@media (max-width: 899px) { .cl__grid { gap: 40px; } .clog { padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .cl__link { animation: none; } }

/* Service-line grid: the active cell is a solid teal gradient with white text; hover stays a light tint */
.wy__tiles li { transition: color .5s var(--ease), background .5s var(--ease); }
.wy__tiles li:hover { color: var(--terra); background: color-mix(in srgb, var(--terra) 6%, #fff); }
.wy__tiles li.is-on, .wy__tilewrap.has-pop .wy__tiles li.is-on {
  color: #fff; background: linear-gradient(125deg, #03363d 0%, #0a6e7a 58%, #3ba9b7 130%);
}
/* Dark How-we-work block: white space above it, and less inner padding on desktop where the grid already has its own */
.clog { margin-top: var(--sec) !important; padding-top: calc(var(--sec) * .8) !important; padding-bottom: calc(var(--sec) * .8) !important; }
@media (min-width: 900px) { .clog { padding-top: calc(var(--sec) * .45) !important; padding-bottom: calc(var(--sec) * .45) !important; } }

/* How we work, clean dark version: neutral near-black, white type in two tones, one teal accent.
   No borders anywhere inside; the only line is the timeline's progress line. */
.clog { --ink-cl: #F5F7F7; --mute-cl: rgba(245, 247, 247, .56); --line-cl: rgba(255, 255, 255, .10); --acc-cl: #4FB4C1;
  background: #0E1416 !important; margin-top: var(--sec) !important; padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
.clog .cl__grid { border: 0 !important; }
.clog .cl__l, .clog .cl__list { padding-top: 0 !important; padding-bottom: 0 !important; }
.clog .cl__list { border-left: 0 !important; }
.cl__track { position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--line-cl); list-style: none; }
.cl__track span { display: block; width: 100%; height: 100%; background: var(--acc-cl); transform-origin: top; transform: scaleY(var(--p, 0)); }
.clog .cl__dot { background: #0E1416; }
.clog .cl__dot::after { background: rgba(255, 255, 255, .28); }
.clog .cl__item.is-on .cl__dot { background: #0E1416; box-shadow: 0 0 0 4px rgba(79, 180, 193, .16); }
.clog .cl__item.is-on .cl__dot::after, .clog .cl__item.is-done .cl__dot::after { background: var(--acc-cl); }
.clog .cl__item h3 { color: var(--mute-cl); transition: color .4s ease; }
.clog .cl__item.is-on h3, .clog .cl__item.is-done h3 { color: var(--ink-cl); }
.clog .cl__meta b { color: rgba(245, 247, 247, .8); }
.clog .cl__link { stroke: rgba(255, 255, 255, .18); stroke-dasharray: 3 5; opacity: 1; }
.clog .cl__node circle { stroke: rgba(255, 255, 255, .22); stroke-dasharray: none; fill: #0E1416; }
.clog .cl__node text { fill: var(--mute-cl); }
.clog .cl__node.is-done circle { stroke: var(--acc-cl); fill: #0E1416; }
.clog .cl__node.is-done text { fill: var(--ink-cl); }
.clog .cl__node.is-on circle { stroke: var(--acc-cl); fill: var(--acc-cl); }
.clog .cl__node.is-on text { fill: #0E1416; }
.clog h2 .soft { color: var(--mute-cl); }
@media (min-width: 900px) {
  .clog .cl__l { padding-left: 0; padding-right: clamp(32px, 5vw, 80px); }
  .clog .cl__list { padding-left: clamp(48px, 6vw, 80px); }
  .clog .cl__track { left: 0; }
  .clog .cl__art { margin-top: 56px; max-width: 320px; }
}
@media (max-width: 899px) {
  .clog .cl__list { padding-left: 36px; }
  .clog .cl__dot { left: -47px; }
  .clog .cl__track { left: 0; }
}

/* How we work timeline: clear type hierarchy, timeframe label, stage name, description, then the deliverable as the quietest line */
.cl__time { display: block; margin-bottom: 8px; font: 600 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--acc-cl, #4FB4C1); }
.clog .cl__item h3 { margin: 0 0 10px; font: 500 clamp(1.3rem, 1.7vw, 1.55rem)/1.2 var(--sans); letter-spacing: -0.02em; }
.clog .cl__item p { margin: 0 0 16px; font-size: .98rem; line-height: 1.6; color: var(--mute-cl); }
.clog .cl__meta { display: flex; align-items: baseline; gap: 10px; font-size: .84rem; line-height: 1.45; color: rgba(245, 247, 247, .72); }
.clog .cl__meta em { flex: none; font: 600 .66rem/1 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 247, 247, .4); }
.clog .cl__dot { top: 6px; }

/* Timeline dots, after accessgrid: only the first step's dot is lit, with a soft pulsing halo;
   the others stay neutral and do not follow the scroll. All stage names read at full strength. */
.clog .cl__item .cl__dot, .clog .cl__item.is-on .cl__dot { background: #0E1416; box-shadow: none; }
.clog .cl__item .cl__dot::after, .clog .cl__item.is-on .cl__dot::after, .clog .cl__item.is-done .cl__dot::after { background: rgba(255, 255, 255, .28); }
.clog .cl__item h3 { color: var(--ink-cl) !important; }
.clog .cl__track + .cl__item .cl__dot { background: rgba(79, 180, 193, .16); }
.clog .cl__track + .cl__item .cl__dot::after { background: var(--acc-cl); }
.clog .cl__track + .cl__item .cl__dot::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; background: rgba(79, 180, 193, .14);
  animation: cl-pulse 2.4s ease-out infinite;
}
@keyframes cl-pulse { 0% { transform: scale(.6); opacity: .9; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .clog .cl__track + .cl__item .cl__dot::before { animation: none; opacity: .6; } }
/* Timeline: a plain static line, no moving progress fill */
.clog .cl__track span { display: none; }
/* Deliverable line without a repeated label: a small teal arrow marks it instead */
.clog .cl__meta::before { content: "→"; flex: none; color: var(--acc-cl); font-weight: 600; }

/* Timeline line: centred exactly on the dots, running from the first dot to the last, never showing through a dot */
.clog .cl__list { --pl: 36px; padding-left: var(--pl) !important; }
@media (min-width: 900px) { .clog .cl__list { --pl: clamp(48px, 6vw, 80px); } }
.clog .cl__dot { left: calc(-1 * var(--pl) - 10px) !important; isolation: isolate; }
.clog .cl__track { left: 0; top: var(--t0, 16px); bottom: auto; height: var(--th, 0px); }
.clog .cl__track + .cl__item .cl__dot { background: #0E1416; box-shadow: inset 0 0 0 30px rgba(79, 180, 193, .18); }
.clog .cl__track + .cl__item .cl__dot::before { z-index: -1; }

/* How we work illustration: a line-art hospital floor plan that tells the four stages.
   Diagnose: a scan sweeps the plan and three bottlenecks pulse. Design: the patient route is drawn.
   Deliver: rooms light up, the route turns solid, the bottlenecks are fixed. Sustain: calm activity in every room. */
.fp { max-width: 380px !important; }
.fp .fp__wall { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 1.4; }
.fp .fp__room { fill: rgba(79, 180, 193, 0); stroke: rgba(255, 255, 255, .16); stroke-width: 1; transition: fill .7s ease var(--d, 0s), stroke .7s ease var(--d, 0s); }
.fp .fp__door { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.fp .fp__labels text { font: 500 9px/1 var(--sans); letter-spacing: .04em; text-anchor: middle; fill: rgba(245, 247, 247, .38); text-transform: uppercase; transition: fill .6s ease; }
.fp .fp__scan { opacity: 0; transition: opacity .4s ease; }
.fp[data-stage="0"] .fp__scan { opacity: 1; animation: fp-scan 3.2s ease-in-out infinite; }
@keyframes fp-scan { 0% { transform: translateY(0); } 50% { transform: translateY(264px); } 100% { transform: translateY(0); } }
.fp .fp__flow { fill: none; stroke: #4FB4C1; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; opacity: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1), opacity .4s ease; }
.fp[data-stage="1"] .fp__flow { opacity: 1; stroke-dashoffset: 0; stroke-dasharray: 5 6; animation: fp-dash 1.2s linear infinite; }
.fp[data-stage="2"] .fp__flow, .fp[data-stage="3"] .fp__flow { opacity: 1; stroke-dashoffset: 0; stroke-dasharray: none; }
@keyframes fp-dash { to { stroke-dashoffset: -22; } }
.fp .fp__issues circle { fill: #E46C5C; transition: fill .6s ease; }
.fp .fp__issues .fp__ring { fill: none; stroke: #E46C5C; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: fp-ring 1.8s ease-out infinite; }
@keyframes fp-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.fp[data-stage="2"] .fp__issues circle, .fp[data-stage="3"] .fp__issues circle { fill: #4FB4C1; }
.fp[data-stage="2"] .fp__issues .fp__ring, .fp[data-stage="3"] .fp__issues .fp__ring { stroke: #4FB4C1; animation: none; opacity: 0; }
.fp[data-stage="3"] .fp__issues { opacity: 0; transition: opacity .6s ease; }
.fp[data-stage="2"] .fp__room, .fp[data-stage="3"] .fp__room { fill: rgba(79, 180, 193, .10); stroke: rgba(79, 180, 193, .45); }
.fp[data-stage="2"] .fp__labels text, .fp[data-stage="3"] .fp__labels text { fill: rgba(245, 247, 247, .62); }
.fp .fp__live circle { fill: #4FB4C1; opacity: 0; transition: opacity .5s ease; }
.fp[data-stage="3"] .fp__live circle { animation: fp-live 2.4s ease-in-out var(--d, 0s) infinite; }
@keyframes fp-live { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fp *, .fp[data-stage] * { animation: none !important; } }

/* Neutral greys for all text (no teal tint) */
:root { --ink: #1E1E1E; --ink-2: #5E5E5E; --ink-3: #9A9A9A; --line: #E7E7E7; }
.sol-title .soft, main section h2 .soft, .endcard section h2 .soft { color: #9A9A9A; }

/* How we work timeline: minimal. No arrows; small solid dots sit on one continuous line */
.clog .cl__meta::before { content: none !important; }
.clog .cl__dot, .clog .cl__item.is-on .cl__dot, .clog .cl__track + .cl__item .cl__dot { background: transparent !important; box-shadow: none !important; }
.clog .cl__dot::after { width: 9px !important; height: 9px !important; background: #5A6366 !important; }
.clog .cl__track + .cl__item .cl__dot::after { background: var(--acc-cl) !important; }
.clog .cl__track + .cl__item .cl__dot::before { inset: 0; background: rgba(79, 180, 193, .22); }

/* Results: simple and readable. Three numbers side by side, one quote underneath */
.res3 { padding: var(--sec) 0 0 !important; height: auto !important; }
.res3__head { margin-bottom: clamp(40px, 6vw, 72px); }
.res3__stats { display: grid; gap: 0; border-top: 1px solid var(--line); }
.res3__stat { padding: 32px 0; border-bottom: 1px solid var(--line); text-align: left; }
.res3__tag { display: block; font-size: .82rem; color: var(--ink-3); }
.res3__num { margin: 18px 0 14px; font: 400 clamp(3.2rem, 5.4vw, 4.8rem)/1 var(--serif); letter-spacing: -0.045em; color: var(--ink); }
.res3__stat h3 { margin: 0 0 6px; font: 500 1.05rem/1.35 var(--sans); color: var(--ink); }
.res3__ctx { margin: 0; max-width: 32ch; font-size: .94rem; line-height: 1.55; color: var(--ink-2); }
.res3__quote { margin: clamp(56px, 8vw, 96px) auto 0; max-width: 820px; text-align: center; }
.res3__quote blockquote { margin: 0; font: 400 clamp(1.35rem, 2.1vw, 1.85rem)/1.4 var(--serif); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.res3__quote figcaption { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; text-align: left; }
.res3__quote img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.res3__quote figcaption span { display: flex; flex-direction: column; gap: 2px; font-size: .86rem; color: var(--ink-2); }
.res3__quote figcaption b { font-weight: 600; color: var(--ink); }
@media (min-width: 900px) {
  .res3__stats { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .res3__stat { padding: 40px clamp(24px, 3vw, 48px); border-bottom: 0; border-left: 1px solid var(--line); }
  .res3__stat:first-child { border-left: 0; padding-left: 0; }
  .res3__stat:last-child { padding-right: 0; }
}

/* Chat: neutral grey typing bubble; replies grow out of it smoothly */
.wy__chat .bub--typing { background: #EFEFEF !important; }
.wy__chat .bub--typing i { background: #9A9A9A !important; }
.wy__chat .bub.is-on { transition: max-height .7s cubic-bezier(.22,.8,.24,1), margin .55s cubic-bezier(.2,.7,.2,1), padding .55s cubic-bezier(.2,.7,.2,1), opacity .5s ease .08s, transform .7s cubic-bezier(.2,.7,.2,1); }

/* Typing indicator: light neutral grey and a calmer rhythm */
.wy__chat .bub--typing { background: #F2F2F2 !important; }
.wy__chat .bub--typing i { background: #C8C8C8 !important; animation-duration: 1.6s !important; }
.wy__chat .bub--typing i:nth-child(2) { animation-delay: .25s !important; }
.wy__chat .bub--typing i:nth-child(3) { animation-delay: .5s !important; }

/* Results: clear hierarchy (number, metric, context, client) and only the two dividers between columns */
.res3__stats { border-top: 0 !important; border-bottom: 0 !important; }
.res3__stat { border-bottom: 0 !important; padding-top: 8px !important; padding-bottom: 8px !important; }
.res3__num { margin: 0 0 18px !important; font-size: clamp(3.4rem, 5.6vw, 5rem) !important; }
.res3__stat h3 { margin: 0 0 8px !important; font: 500 1.15rem/1.3 var(--sans) !important; letter-spacing: -0.01em; color: var(--ink) !important; }
.res3__ctx { color: var(--ink-3) !important; font-size: .95rem !important; }
.res3__tag { margin-top: 24px; font: 600 .7rem/1 var(--sans) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2) !important; }
@media (max-width: 899px) {
  .res3__stats { gap: 48px; }
  .res3__stat { padding: 0 !important; }
}

/* Titles without section labels: the grey half starts on its own line where the title has two sentences */
#apart h2, #team h2 { max-width: 26ch !important; }
#apart h2 .soft, #team h2 .soft, #approach h2 .soft { display: block; }
.clog h2 { max-width: 20ch !important; }

/* Results: no all-caps; the number and its metric read as one group, the context and client follow with clear gaps */
.res3__num { margin: 0 0 8px !important; }
.res3__stat h3 { margin: 0 !important; }
.res3__ctx { margin-top: 14px !important; color: var(--ink-2) !important; }
.res3__tag { margin-top: 20px !important; font: 400 .86rem/1.4 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink-3) !important; }

/* FAQ list: a little inner padding so questions and answers do not hug the dividers */
.faq2 .qa__q { padding: 24px 12px !important; }
.faq2 .qa__a p { padding: 0 52px 24px 12px !important; }
.faq2__sub { margin-bottom: 0 !important; }
.faq2__sub { max-width: 48ch !important; }

/* Every section title is 48px on desktop (phones keep their smaller, fluid size) */
@media (min-width: 900px) {
  main section h2, .endcard section h2, .solutions .sol3 .sol3__head .sol-title, .clog h2, .res3 h2, .faq2__head h2, .cta2 h2, .feature h2 {
    font-size: 48px !important; line-height: 1.1 !important;
  }
}

/* Results cards: 50px top and bottom; number, text group and location 30px apart; title to description 10px */
.res3__stat { display: flex; flex-direction: column; gap: 30px; padding-top: 50px !important; padding-bottom: 50px !important; }
.res3__stat > * { margin: 0 !important; }
.res3__num { font-size: clamp(2.6rem, 3.8vw, 3.5rem) !important; line-height: 1 !important; }
.res3__txt { display: flex; flex-direction: column; gap: 10px; }
.res3__txt h3, .res3__txt .res3__ctx { margin: 0 !important; }
@media (max-width: 899px) { .res3__stat { padding-top: 50px !important; padding-bottom: 50px !important; } .res3__stats { gap: 0 !important; } }

/* Service-line grid: active and hover cells are a light neutral grey; colour changes ease in slowly */
.wy__tiles li { transition: color .9s ease, background-color .9s ease !important; }
.wy__tiles li:hover, .wy__tiles li.is-on, .wy__tilewrap.has-pop .wy__tiles li.is-on {
  background: #F2F2F2 !important; color: var(--ink) !important;
}
/* FAQ title: "questions." on its own line */
#faq h2 .soft { display: block; }

/* Results strip: sits right under How we work with no title, closed by a full-width divider */
.res3 { padding-top: 0 !important; border-bottom: 1px solid var(--line); }

/* How we work: Saraya green dots, a call to action under the intro, larger regular stage names */
.clog { --acc-cl: #00A3B4; }
.clog .cl__dot::after, .clog .cl__item .cl__dot::after, .clog .cl__track + .cl__item .cl__dot::after { background: #007F8F !important; }
.clog .cl__track + .cl__item .cl__dot::after { background: #00A3B4 !important; }
.clog .cl__track + .cl__item .cl__dot::before { background: rgba(0, 163, 180, .25) !important; }
.clog .cl__cta { margin-top: 32px; }
.clog .cl__item h3 { font: 400 clamp(1.6rem, 2.2vw, 2rem)/1.15 var(--serif) !important; letter-spacing: -0.025em !important; margin-bottom: 12px !important; }
.clog .cl__dot { top: 12px !important; }
/* FAQ intro: two balanced lines */
.faq2__sub { text-wrap: balance; max-width: 44ch !important; }

/* Timeline dots: only the first is lit (Saraya green, quicker pulse); the rest are neutral grey */
.clog .cl__item .cl__dot::after { background: #4A5154 !important; }
.clog .cl__track + .cl__item .cl__dot::after { background: #00A3B4 !important; }
.clog .cl__track + .cl__item .cl__dot::before { animation-duration: 1.3s !important; }
/* Team title: grey half stays inline; the line break sits after "Operators" so both lines are even */
#team h2 .soft { display: inline !important; }
#team h2 { max-width: none !important; }
/* How we work stage names: a touch smaller */
.clog .cl__item h3 { font-size: clamp(1.4rem, 1.85vw, 1.7rem) !important; }
.clog .cl__dot { top: 9px !important; }
.clog .cl__dot { top: 5px !important; }
@media (max-width: 899px) { .clog .cl__dot { top: 2px !important; } }

/* About statement: keywords in the same black as the rest; the word-by-word fade on scroll stays */
.about__story .kw, .about__story .kw:hover, .about__story .kw .w, .about__story .kw:not(:has(.w)) {
  color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; background-image: none !important;
}

/* More room between sections everywhere (the About statement keeps its 1.4x share of this) */
:root { --sec: clamp(104px, 12.2vw, 176px) !important; }
/* Section titles no longer follow a label, so they need no top margin of their own */
.solutions .sol3 .sol3__head .sol-title, .faq2__head h2, .cta2 h2, #apart h2, #team h2, #proof h2, .clog h2 { margin-top: 0 !important; }

/* Divider between the About statement and Why Saraya, with equal space above and below it */
.about { border-bottom: 1px solid var(--line); }
.about .about__story { padding-bottom: var(--sec) !important; }
#about + .apart { padding-top: var(--sec) !important; }

/* About statement at 48px on desktop; the space below it matches the space above */
@media (min-width: 900px) { .about__story .statement { font-size: 48px !important; line-height: 1.25 !important; } }
.about .about__story { padding-bottom: calc(var(--sec) * 1.4) !important; }

/* How we work: light mode. Light grey background, grey outline above and below, dark text */
.clog {
  --ink-cl: #1E1E1E; --mute-cl: #6B6B6B; --line-cl: #DADADA; --acc-cl: #007F8F;
  background: #F6F6F6 !important; border-top: 1px solid #E4E4E4; border-bottom: 1px solid #E4E4E4;
}
.clog h2 { color: var(--ink-cl) !important; }
.clog h2 .soft { color: #9A9A9A !important; }
.clog .cl__sub, .clog .cl__item p { color: var(--mute-cl) !important; }
.clog .cl__meta { color: #3F3F3F !important; }
.clog .cl__item .cl__dot::after { background: #C4C4C4 !important; }
.clog .cl__track + .cl__item .cl__dot::after { background: #007F8F !important; }
.clog .cl__track + .cl__item .cl__dot::before { background: rgba(0, 127, 143, .22) !important; }
/* About statement: 150px above and below on desktop */
@media (min-width: 900px) { .about .about__story { padding-top: 150px !important; padding-bottom: 150px !important; } }
/* How we work: the deliverable line sits quieter than the description */
.clog .cl__meta { color: #9A9A9A !important; }
/* From the divider under the About statement to the Why Saraya title: 150px on desktop */
@media (min-width: 900px) { #about + .apart { padding-top: 150px !important; } }

/* Why Saraya runs straight into How we work (no gap); each column keeps room at the bottom so the chat never touches the grey block */
.clog { margin-top: 0 !important; }
.apart { padding-bottom: 0 !important; }
.why2 .wy { padding-bottom: 72px !important; }
@media (max-width: 899px) { .why2 .wy { padding-bottom: 48px !important; } }
/* Vision & mission cards to the belief photo section: 150px on desktop */
@media (min-width: 900px) { #belief { margin-top: 150px !important; } }
/* Chat bubbles: flat, no shadow */
.wy__chat .bub, .wy__chat .bub--out { box-shadow: none !important; }

/* How we work, desktop: title on the left, description and button on the right; the four stages run across below */
@media (min-width: 900px) {
  .clog .cl__grid { display: block !important; }
  .clog .cl__l { padding: 0 !important; }
  .clog .cl__stick { position: static !important; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 96px); align-items: end; }
  .clog .cl__stick h2 { grid-column: 1; grid-row: 1 / span 2; align-self: end; max-width: none !important; }
  .clog .cl__sub { grid-column: 2; grid-row: 1; margin: 0 !important; max-width: 46ch; }
  .clog .cl__cta { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 24px !important; }
  .clog .cl__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px);
    padding: 0 !important; margin-top: clamp(64px, 8vw, 104px); }
  .clog .cl__item { padding: 44px 0 0 !important; }
  .clog .cl__dot { left: -6px !important; top: -1px !important; }
  .clog .cl__track { top: 9.5px !important; height: 1px !important; left: var(--l0, 0px) !important; width: var(--lw, 0px) !important; }
  .clog .cl__item p { max-width: 30ch; }
}

/* Service-line popup: just the name (black) and its description, no label, divider or close button */
.wy__pop h4 { margin: 0 0 10px !important; color: var(--ink) !important; }
.wy__pop p { border-top: 0 !important; padding-top: 0 !important; }
/* How we work: 100px top and bottom on desktop */
@media (min-width: 900px) { .clog { padding-top: 100px !important; padding-bottom: 100px !important; } }
/* How we work stage names: solid black */
.clog .cl__item h3 { color: #000 !important; }
/* How we work header: title and description start on the same top line; button closer to the description */
@media (min-width: 900px) {
  .clog .cl__stick { align-items: start !important; align-content: start; }
  .clog .cl__stick h2 { align-self: start !important; }
  .clog .cl__sub { align-self: start; padding-top: 6px; }
  .clog .cl__cta { margin-top: 16px !important; align-self: start; }
}
/* Why Saraya: the list and the service-line grid match the chat's height, so no empty strip is left under them */
.wy__list, .wy__tilewrap { height: clamp(300px, 26vw, 340px) !important; }
/* Why Saraya: the three demos always line up at the bottom of their columns */
@media (min-width: 900px) {
  .why2 .wy { display: flex; flex-direction: column; }
  .why2 .wy > p { margin-bottom: clamp(28px, 3vw, 40px); }
  .why2 .wy__demo { margin-top: auto !important; }
}
/* What we do: a little more room above the pinned title */
@media (min-width: 900px) { .sol3__head { padding-top: 56px !important; } }

/* How we work on the Saraya green gradient: light type, soft white line and dots */
.clog {
  background: linear-gradient(125deg, #02252a 0%, #04414a 45%, #0a6e7a 85%, #1a8c98 100%) !important;
  border-top: 0 !important; border-bottom: 0 !important;
  --ink-cl: #FFFFFF; --mute-cl: rgba(255, 255, 255, .72); --line-cl: rgba(255, 255, 255, .22);
}
.clog h2 { color: #fff !important; }
.clog h2 .soft { color: rgba(255, 255, 255, .55) !important; }
.clog .cl__sub, .clog .cl__item p { color: rgba(255, 255, 255, .72) !important; }
.clog .cl__meta { color: rgba(255, 255, 255, .5) !important; }
.clog .cl__item h3 { color: #fff !important; }
.clog .cl__track { background: rgba(255, 255, 255, .22) !important; }
.clog .cl__item .cl__dot::after { background: rgba(255, 255, 255, .45) !important; }
.clog .cl__track + .cl__item .cl__dot::after { background: #8FE3EC !important; }
.clog .cl__track + .cl__item .cl__dot::before { background: rgba(143, 227, 236, .3) !important; }
.clog .cl__cta { box-shadow: none !important; }

/* How we work: content sits in a white card (50px padding, grey outline) on the green gradient */
.clog__card { background: #fff; border: 1px solid #E4E4E4; border-radius: 24px; padding: 50px; }
.clog__card .cl__grid { padding-left: 0 !important; padding-right: 0 !important; max-width: none; }
.clog { --ink-cl: #1E1E1E; --mute-cl: #6B6B6B; --line-cl: #DADADA; }
.clog .clog__card h2 { color: #1E1E1E !important; }
.clog .clog__card h2 .soft { color: #9A9A9A !important; }
.clog .clog__card .cl__sub, .clog .clog__card .cl__item p { color: #6B6B6B !important; }
.clog .clog__card .cl__meta { color: #9A9A9A !important; }
.clog .clog__card .cl__item h3 { color: #000 !important; }
.clog .clog__card .cl__track { background: #DADADA !important; }
.clog .clog__card .cl__item .cl__dot::after { background: #C4C4C4 !important; }
.clog .clog__card .cl__track + .cl__item .cl__dot::after { background: #007F8F !important; }
.clog .clog__card .cl__track + .cl__item .cl__dot::before { background: rgba(0, 127, 143, .22) !important; }
.clog .clog__card .cl__cta { box-shadow: inset 0 0 0 1px #DCDFDF !important; }
@media (max-width: 899px) { .clog__card { padding: 28px 22px; border-radius: 20px; } }

/* How we work, final structure: white section > white container (50px padding, grey outline) > green gradient card with the content */
.clog { background: #fff !important; }
.clog__card { background: #fff !important; border: 1px solid #E4E4E4 !important; border-radius: 28px !important; padding: 50px !important; }
.clog__card .cl__grid {
  background: linear-gradient(125deg, #02252a 0%, #04414a 45%, #0a6e7a 85%, #1a8c98 100%);
  border-radius: 20px; padding: clamp(40px, 5vw, 72px) !important;
}
.clog .clog__card h2 { color: #fff !important; }
.clog .clog__card h2 .soft { color: rgba(255, 255, 255, .55) !important; }
.clog .clog__card .cl__sub, .clog .clog__card .cl__item p { color: rgba(255, 255, 255, .72) !important; }
.clog .clog__card .cl__meta { color: rgba(255, 255, 255, .5) !important; }
.clog .clog__card .cl__item h3 { color: #fff !important; }
.clog .clog__card .cl__track { background: rgba(255, 255, 255, .22) !important; }
.clog .clog__card .cl__item .cl__dot::after { background: rgba(255, 255, 255, .45) !important; }
.clog .clog__card .cl__track + .cl__item .cl__dot::after { background: #8FE3EC !important; }
.clog .clog__card .cl__track + .cl__item .cl__dot::before { background: rgba(143, 227, 236, .3) !important; }
.clog .clog__card .cl__cta { box-shadow: none !important; }
@media (max-width: 899px) {
  .clog__card { padding: 16px !important; border-radius: 22px !important; }
  .clog__card .cl__grid { padding: 32px 22px !important; border-radius: 16px; }
}

/* How we work, back to the green card: the gradient block stops 50px short of each screen edge */
.clog__card { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
.clog__card .cl__grid { background: none !important; border-radius: 0 !important; padding: 0 !important; }
.clog { background: linear-gradient(125deg, #02252a 0%, #04414a 45%, #0a6e7a 85%, #1a8c98 100%) !important;
  margin-left: 50px !important; margin-right: 50px !important; border-radius: 28px; }
.clog h2 { color: #fff !important; }
.clog h2 .soft { color: rgba(255, 255, 255, .55) !important; }
.clog .cl__sub, .clog .cl__item p { color: rgba(255, 255, 255, .72) !important; }
.clog .cl__meta { color: rgba(255, 255, 255, .5) !important; }
.clog .cl__item h3 { color: #fff !important; }
.clog .cl__track { background: rgba(255, 255, 255, .22) !important; }
.clog .cl__item .cl__dot::after { background: rgba(255, 255, 255, .45) !important; }
.clog .cl__track + .cl__item .cl__dot::after { background: #8FE3EC !important; }
.clog .cl__track + .cl__item .cl__dot::before { background: rgba(143, 227, 236, .3) !important; }
.clog .cl__cta { box-shadow: none !important; }
@media (max-width: 899px) { .clog { margin-left: 12px !important; margin-right: 12px !important; border-radius: 22px; } }

/* Green How-we-work block: square corners, with full-width grey rules along its top and bottom edges */
.clog { border-radius: 0 !important; position: relative; overflow: visible !important; }
.clog::before, .clog::after { content: ""; position: absolute; left: -50px; right: -50px; height: 1px; background: #E4E4E4; pointer-events: none; }
.clog::before { top: -1px; }
.clog::after { bottom: -1px; }
@media (max-width: 899px) { .clog { border-radius: 0 !important; } .clog::before, .clog::after { left: -12px; right: -12px; } }

/* Green How-we-work card: 80px from the screen edges, 80px of padding inside on every side (desktop) */
@media (min-width: 900px) {
  .clog { margin-left: 80px !important; margin-right: 80px !important; padding: 80px !important; }
  .clog > .wrap { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
  .clog::before, .clog::after { left: -80px !important; right: -80px !important; }
}
/* Green How-we-work card: 100px from the screen edges and 100px of inner padding (desktop) */
@media (min-width: 900px) {
  .clog { margin-left: 100px !important; margin-right: 100px !important; padding: 100px !important; }
  .clog::before, .clog::after { left: -100px !important; right: -100px !important; }
}
/* small laptops: keep the four stage columns readable */
@media (min-width: 900px) and (max-width: 1199px) {
  .clog { margin-left: 40px !important; margin-right: 40px !important; padding: 60px !important; }
  .clog::before, .clog::after { left: -40px !important; right: -40px !important; }
}
/* Green How-we-work card: grey outline on the left and right edges too */
.clog { border-left: 1px solid #E4E4E4 !important; border-right: 1px solid #E4E4E4 !important; }

/* How we work card uses the same gradient layer as the What we do cards (teal, soft light, fine grain) */
.clog { background: #02252a !important; isolation: isolate; }
.clog > .grad { z-index: 0; border-radius: 0; }
.clog > .wrap { position: relative; z-index: 1; }
.clog .grad::before, .clog .grad__wave { animation: none; }
.clog .grad::after { mix-blend-mode: normal; opacity: .14; }

/* How we work: the call to action closes the card, under the four stages */
.cl__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .18); }
.cl__foot p { margin: 0; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.cl__foot b { font-weight: 500; color: #fff; }
.clog .cl__foot .cl__cta { margin: 0 !important; }
@media (min-width: 900px) {
  .cl__foot { flex-direction: row; justify-content: space-between; align-items: center; margin-top: clamp(64px, 7vw, 96px); padding-top: 40px; }
  .cl__foot p { font-size: 1.05rem; }
}

/* How we work footer: divider runs edge to edge across the card; the space below the row matches the space above it */
.clog { --cp: var(--gutter); }
@media (min-width: 900px) { .clog { --cp: 60px; } }
@media (min-width: 1200px) { .clog { --cp: 100px; } }
.cl__foot { position: relative; border-top: 0 !important; }
.cl__foot::before { content: ""; position: absolute; top: 0; left: calc(-1 * var(--cp)); right: calc(-1 * var(--cp)); height: 1px; background: rgba(255, 255, 255, .18); }
.clog { padding-bottom: 32px !important; }
.cl__foot { padding-top: 32px !important; }
@media (min-width: 900px) { .clog { padding-bottom: 40px !important; } .cl__foot { padding-top: 40px !important; } }
/* How we work header: the description sits on the title's bottom line */
@media (min-width: 900px) {
  .clog .cl__stick { align-items: end !important; }
  .clog .cl__sub { grid-row: 1 / span 2 !important; align-self: end !important; padding-top: 0 !important; margin-bottom: 6px !important; }
}
@media (min-width: 900px) { .clog .cl__sub { margin-bottom: -6px !important; } }
@media (min-width: 900px) { .clog .cl__sub { margin-bottom: 2px !important; } }

/* How we work: break the description before "scaled" on desktop only */
@media (max-width: 899px) { .br-d { display: none; } }

/* Testimonials after the team: three columns split by thin rules, styled like the Results strip */
.tst { padding: var(--sec) 0 0; }
.tst h2 { margin: 0 0 clamp(40px, 5vw, 64px); text-align: center; }
.tst__grid { display: grid; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tst__item { margin: 0; padding: 40px 0; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; border-top: 1px solid var(--line); }
.tst__item:first-child { border-top: 0; }
.tst__item blockquote { margin: 0; font: 400 clamp(1.15rem, 1.45vw, 1.35rem)/1.45 var(--sans); letter-spacing: -0.015em; color: var(--ink); }
.tst__item figcaption { display: flex; flex-direction: column; gap: 4px; }
.tst__item figcaption b { font: 500 1.05rem/1.3 var(--sans); color: var(--ink); }
.tst__item figcaption span { font-size: .9rem; line-height: 1.4; color: var(--ink-3); }
@media (min-width: 900px) {
  .tst__grid { grid-template-columns: repeat(3, 1fr); }
  .tst__item { padding: 50px clamp(24px, 3vw, 48px); border-top: 0; border-left: 1px solid var(--line); }
  .tst__item:first-child { border-left: 0; padding-left: 0; }
  .tst__item:last-child { padding-right: 0; }
}

/* How we work: 40px side margin on every desktop width */
@media (min-width: 900px) {
  .clog { margin-left: 40px !important; margin-right: 40px !important; }
  .clog::before, .clog::after { left: -40px !important; right: -40px !important; }
}
.tst h2 { margin-left: auto !important; margin-right: auto !important; max-width: none !important; }

/* Testimonials v2: no heading, client logo on top, more room, rules run to the page edge */
.tst { padding-top: var(--sec) !important; }
.tst__grid { position: relative; border-top: 0 !important; border-bottom: 0 !important; }
.tst__grid::before, .tst__grid::after { content: ""; position: absolute; left: 50%; width: 100vw; height: 1px; background: var(--line); transform: translateX(-50%); }
.tst__grid::before { top: 0; }
.tst__grid::after { bottom: 0; }
.tst__item { gap: 40px !important; padding-top: 64px !important; padding-bottom: 64px !important; justify-content: flex-start !important; }
.tst__item figcaption { margin-top: auto; }
.tst__logo { display: block; height: var(--lh, 34px); width: auto; max-width: 180px; object-fit: contain; object-position: left center; }
@media (min-width: 900px) {
  .tst__item { padding-top: 72px !important; padding-bottom: 72px !important; padding-left: clamp(32px, 4vw, 64px) !important; padding-right: clamp(32px, 4vw, 64px) !important; }
  .tst__item:first-child { padding-left: 0 !important; }
  .tst__item:last-child { padding-right: 0 !important; }
}
.tst__logo { margin-bottom: calc(40px - var(--lh, 34px)); }
/* Testimonials: black logos, roomier gaps */
.tst__logo { filter: grayscale(1) brightness(0); margin-bottom: calc(56px - var(--lh, 34px)) !important; }
.tst__item { gap: 56px !important; }
@media (min-width: 900px) {
  .tst__item { padding-top: 88px !important; padding-bottom: 88px !important; padding-left: clamp(40px, 4.5vw, 72px) !important; padding-right: clamp(40px, 4.5vw, 72px) !important; }
  .tst__item:first-child { padding-left: 0 !important; }
  .tst__item:last-child { padding-right: 0 !important; }
}
@media (max-width: 899px) { .tst__item { gap: 40px !important; padding-top: 56px !important; padding-bottom: 56px !important; } .tst__logo { margin-bottom: calc(40px - var(--lh, 34px)) !important; } }

/* FAQ: 150px space above */
.faq2 { padding-top: 150px !important; }
@media (max-width: 899px) { .faq2 { padding-top: var(--sec) !important; } }
/* Testimonials: 150px space above, matching the FAQ below */
@media (min-width: 900px) { .tst { padding-top: 150px !important; } }
/* Testimonials: every column gets the same padding on both sides so the three text widths match;
   the grid is pulled out by that padding so the outer text still lines up with the page edge */
@media (min-width: 900px) {
  .tst__grid { --tp: clamp(40px, 4.5vw, 72px); margin-inline: calc(-1 * var(--tp)); }
  .tst__item, .tst__item:first-child, .tst__item:last-child { padding-left: var(--tp) !important; padding-right: var(--tp) !important; }
}
/* Results: same even padding on every column, so the three widths match (same fix as the testimonials) */
@media (min-width: 900px) {
  .res3__stats { --tp: clamp(40px, 4.5vw, 72px); margin-inline: calc(-1 * var(--tp)); }
  .res3__stat, .res3__stat:first-child, .res3__stat:last-child { padding-left: var(--tp) !important; padding-right: var(--tp) !important; }
}
/* How we work: card back to 100px from the screen edges; only the Ready-to-start row sits 40px in from the card edges */
@media (min-width: 1200px) {
  .clog { margin-left: 100px !important; margin-right: 100px !important; }
  .clog::before, .clog::after { left: -100px !important; right: -100px !important; }
}
@media (min-width: 900px) {
  .clog .cl__foot { margin-left: calc(40px - var(--cp)); margin-right: calc(40px - var(--cp)); }
  .clog .cl__foot::before { left: -40px; right: -40px; }
}

/* Vision & mission (Clear on purpose): 150px space above on desktop */
@media (min-width: 900px) { #proof { padding-top: 150px !important; } }

/* Buttons stay in place on hover: only colours change, nothing slides, rotates or grows */
.pbtn:hover, .round:hover, .nbtn:hover { transform: none !important; }
.pbtn::after, .pbtn:hover::after { transform: none !important; background-position: 50% 50% !important; }
.nbtn i, .nbtn:hover i, .more span, .more:hover span { transform: none !important; }
.about2__link:hover { gap: 10px; }
.cl__link-btn:hover { gap: 6px; }
/* Results on phones: number on the left, explanation on the right; tighter rows split by thin dividers */
@media (max-width: 899px) {
  .res3__stats { gap: 0 !important; }
  .res3__stat { display: grid !important; grid-template-columns: 7.2rem 1fr; column-gap: 20px; row-gap: 12px; align-items: start;
    padding-top: 28px !important; padding-bottom: 28px !important; border-top: 1px solid var(--line) !important; }
  .res3__stat:first-child { border-top: 0 !important; }
  .res3__num { grid-column: 1; grid-row: 1 / span 2; font-size: 2.3rem !important; line-height: 1.05 !important; white-space: nowrap; }
  .res3__txt { grid-column: 2; grid-row: 1; gap: 6px !important; }
  .res3__txt h3 { font-size: 1.02rem !important; }
  .res3__ctx { font-size: .9rem !important; }
  .res3__tag { grid-column: 2; grid-row: 2; font-size: .8rem !important; }
}

/* Testimonials on phones: a swipeable carousel, one quote at a time with the next one peeking in */
.tst__dots { display: none; }
@media (max-width: 899px) {
  .tst__grid { display: grid !important; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
  .tst__grid::-webkit-scrollbar { display: none; }
  .tst__grid::before, .tst__grid::after { width: 100%; left: 0; transform: none; }
  .tst__item, .tst__item:first-child { scroll-snap-align: start; border-top: 0 !important; border-left: 1px solid var(--line); padding: 40px 24px !important; }
  .tst__item:first-child { border-left: 0; padding-left: 0 !important; }
  .tst__dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
  .tst__dots span { width: 6px; height: 6px; border-radius: 50%; background: #D5D9D9; transition: background .3s ease, width .3s ease; }
  .tst__dots span.is-on { width: 18px; border-radius: 3px; background: var(--ink); }
}
@media (max-width: 899px) { .tst__grid::before, .tst__grid::after { content: none !important; } .tst__grid { border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; } }

/* Our team on phones: plain swipe carousel (no pinned scroll); dots match the testimonials */
@media (max-width: 899px) {
  .people { overscroll-behavior-x: contain; }
  .people::-webkit-scrollbar { display: none; }
  .people__dots { margin-top: 20px; }
}

/* Testimonials on phones: replaces the swipe carousel. All quotes share one centred spot; only the current one shows */
@media (max-width: 899px) {
  .tst__grid { display: grid !important; grid-auto-flow: row !important; grid-template-columns: 1fr !important; overflow: visible !important;
    scroll-snap-type: none !important; margin-inline: calc(-1 * var(--gutter)) !important; padding-inline: var(--gutter) !important; }
  .tst__item, .tst__item:first-child { grid-area: 1 / 1; border-left: 0 !important; padding: 48px 0 !important; align-items: center; text-align: center;
    opacity: 0 !important; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s !important; }
  .tst__item.is-show { opacity: 1 !important; visibility: visible; transition: opacity .7s ease .15s, visibility 0s !important; }
  .tst__item figcaption { align-items: center; }
  .tst__logo { object-position: center; margin-inline: auto; }
  .tst__dots { pointer-events: auto; }
  .tst__dots span { cursor: pointer; }
}
/* Team dots: own class, styled like the testimonial dots but not linked to them */
.people__dots { display: none; }
@media (max-width: 899px) {
  .people__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
  .people__dots span { width: 6px; height: 6px; border-radius: 50%; background: #D5D9D9; transition: background .3s ease, width .3s ease; }
  .people__dots span.is-on { width: 18px; border-radius: 3px; background: var(--ink); }
}

/* Testimonials on phones: slide in from the right, slide out to the left; no dots */
@media (max-width: 899px) {
  .tst { overflow: hidden; }
  .tst__item, .tst__item:first-child, .js .tst__item.reveal, .js .tst__item.reveal.is-in {
    opacity: 0 !important; visibility: hidden; transform: translateX(56px) !important;
    transition: opacity .6s ease, transform .8s cubic-bezier(.22, .7, .2, 1), visibility 0s linear .8s !important; }
  .tst__item.is-out, .js .tst__item.reveal.is-out { transform: translateX(-56px) !important; }
  .tst__item.is-show, .js .tst__item.reveal.is-show, .js .tst__item.reveal.is-in.is-show {
    opacity: 1 !important; visibility: visible; transform: none !important;
    transition: opacity .6s ease .1s, transform .8s cubic-bezier(.22, .7, .2, 1) .1s, visibility 0s !important; }
  .tst__item.no-anim, .js .tst__item.reveal.no-anim { transition: none !important; }
}

/* Testimonials on phones v3: a real slider. Quotes sit side by side, each one screen wide; the row shifts by --ti quotes */
.tst__clone { display: none !important; }
@media (max-width: 899px) {
  .tst__grid { display: flex !important; overflow: hidden !important; --ti: 0; }
  .tst__clone { display: flex !important; }
  .tst__item, .tst__item:first-child, .tst__item.is-show, .tst__item.is-out,
  .js .tst__item.reveal, .js .tst__item.reveal.is-in, .js .tst__item.reveal.is-show, .js .tst__item.reveal.is-out, .js .tst__item.reveal.is-in.is-show {
    flex: 0 0 100%; grid-area: auto; opacity: 1 !important; visibility: visible !important;
    transform: translateX(calc(var(--ti) * -100%)) !important;
    transition: transform .85s cubic-bezier(.65, 0, .35, 1) !important; }
  .tst__grid.no-anim .tst__item, .js .tst__grid.no-anim .tst__item.reveal { transition: none !important; }
}
@media (max-width: 899px) {
  .tst__grid { padding-inline: 0 !important; }
  .tst__item, .tst__item:first-child, .js .tst__item.reveal { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
}

/* Testimonials slider: the quotes leaving and arriving fade to 0, only the current one is fully visible */
@media (max-width: 899px) {
  .tst__item, .tst__item:first-child, .js .tst__item.reveal, .js .tst__item.reveal.is-in, .js .tst__item.reveal.is-in.is-show {
    opacity: 0 !important; transition: transform .85s cubic-bezier(.65, 0, .35, 1), opacity .5s ease !important; }
  .tst__item.is-cur, .js .tst__item.reveal.is-cur, .js .tst__item.reveal.is-in.is-cur {
    opacity: 1 !important; transition: transform .85s cubic-bezier(.65, 0, .35, 1), opacity .6s ease .3s !important; }
  .tst__grid.no-anim .tst__item, .js .tst__grid.no-anim .tst__item.reveal, .js .tst__grid.no-anim .tst__item.reveal.is-cur { transition: none !important; }
}

/* Consultation form: the panel scrolls on its own (smooth-scroll is paused while it is open) */
.sheet { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Consultation form: Send message uses the same button as the rest of the site, sized to its text */
.sheet__form .sheet__send { align-self: flex-start; margin-top: 6px; }

/* Consultation form chip: sentence case, no all caps */
.sheet .chip { text-transform: none !important; letter-spacing: 0 !important; font-size: .85rem; font-weight: 500; }

/* Consultation form field labels: sentence case, no all caps */
.sheet label > span, .sheet .seg legend { text-transform: none !important; letter-spacing: 0 !important; font-size: .88rem !important; font-weight: 500 !important; color: var(--ink-2); }
.sheet .seg { padding-inline: 0 !important; margin-inline: 0 !important; }
.sheet .seg legend { padding: 0 !important; }