/* ==========================================================================
   Psypathology — Let's Search Solutions
   Design system: Swiss editorial hierarchy on a cool clinical palette.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Brand */
  --blue: #3f50d9;
  --blue-deep: #2b37a0;
  --blue-wash: #eef0fc;
  --green: #00e4b2;
  --green-deep: #00a482;
  --green-wash: #e6fbf6;

  /* Neutrals — cooled toward the brand blue rather than pure grey */
  --ink: #0b1020;
  --ink-soft: #151c33;
  --slate: #5c667e;
  --slate-light: #8891a6;
  --rule: #e3e8f2;
  --mist: #f5f7fb;
  --paper: #ffffff;

  /* Type */
  --font: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --w-light: 300;
  --w-book: 400;
  --w-medium: 500;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 1240px;
  --section-y: clamp(64px, 9vw, 132px);
  --stack: clamp(28px, 4vw, 48px);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 0.22s;
  --mid: 0.42s;
  --slow: 0.8s;

  --radius: 4px;
  --header-h: 76px;
}

/* ----------------------------------------------------------- 2. Foundation */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--w-light);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); }

button { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

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

/* ---------------------------------------------------------------- 3. Layout */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: #fff; }

/* Editorial rail: metadata column + content column */
.rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--stack);
}
.rail > * { min-width: 0; }

@media (min-width: 900px) {
  .rail {
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 96px);
  }
  .rail__aside { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
}

/* ------------------------------------------------------------ 4. Typography */
h1, h2, h3, h4 {
  font-weight: var(--w-light);
  margin: 0;
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.5rem, 6.4vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -0.03em; }
.h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); line-height: 1.1; }
.h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.25; letter-spacing: -0.015em; }
.h4 { font-size: 1.125rem; font-weight: var(--w-book); letter-spacing: -0.005em; line-height: 1.4; }

.eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--green);
  vertical-align: 4px;
  margin-right: 12px;
}
.section--ink .eyebrow { color: rgba(255, 255, 255, 0.62); }

.lead {
  font-size: clamp(1.09rem, 1.7vw, 1.375rem);
  line-height: 1.62;
  color: var(--slate);
  max-width: 62ch;
}
.section--ink .lead { color: rgba(255, 255, 255, 0.76); }

p { margin: 0 0 1.15em; max-width: 72ch; }
p:last-child { margin-bottom: 0; }

.prose p + h3,
.prose p + h4 { margin-top: 1.9em; }
.prose h3 + p,
.prose h4 + p { margin-top: 0.7em; }

.muted { color: var(--slate); }
.accent { color: var(--green-deep); }

.pull {
  border-left: 2px solid var(--green);
  padding-left: clamp(20px, 3vw, 34px);
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  font-weight: var(--w-light);
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 40ch;
}
.section--ink .pull { color: #fff; }

/* ---------------------------------------------------------------- 5. Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* The frosted backdrop lives on ::before, not here. backdrop-filter on the
     header itself would make it a containing block for the fixed-position
     mobile drawer, collapsing the drawer to the height of the header. */
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  transition: background var(--fast) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 24px rgba(11, 16, 32, 0.05);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { width: auto; height: 46px; }
@media (min-width: 640px) { .brand img { height: 57px; } }

.nav { display: none; }

@media (min-width: 1060px) {
  .nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
  }
  .nav > li { list-style: none; position: relative; }
}

/* The primary <nav> wraps both the link list and the CTA; without this it is a
   block box and the CTA drops onto a second row. */
.site-header nav[aria-label="Primary"] { display: contents; }
@media (min-width: 1060px) {
  .site-header nav[aria-label="Primary"] {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
  }
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 0.94rem;
  /* .nav__link is used on <button> as well as <a>: reset UA chrome. */
  font-family: inherit;
  font-weight: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  letter-spacing: -0.005em;
  border-radius: var(--radius);
  transition: color var(--fast) var(--ease);
}
.nav__link:hover { color: var(--blue); }
.nav__link[aria-current="page"] { color: var(--blue); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 1px;
  background: var(--green);
}

.nav__caret {
  width: 8px; height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--fast) var(--ease);
}
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(-135deg) translateY(-2px); }

.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 286px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(11, 16, 32, 0.11);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease),
              visibility var(--fast);
}
.nav__panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__panel li { list-style: none; }
.nav__panel a {
  display: block;
  padding: 11px 14px;
  color: var(--ink);
  font-size: 0.94rem;
  border-radius: var(--radius);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav__panel a:hover { background: var(--mist); color: var(--blue); }
.nav__panel a span {
  display: block;
  font-size: 0.8rem;
  color: var(--slate-light);
  margin-top: 2px;
  line-height: 1.4;
}

.site-header .header-cta { display: none; }
@media (min-width: 1060px) { .site-header .header-cta { display: inline-flex; margin-inline-start: 14px; } }

/* Burger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 11px;
  margin-inline-start: auto;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 1060px) { .burger { display: none; } }
.burger span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px var(--gutter) 56px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease), visibility var(--mid);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1060px) { .drawer { display: none; } }

.drawer li { list-style: none; }
.drawer > ul > li { border-bottom: 1px solid var(--rule); }
.drawer > ul > li > a,
.drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  padding: 17px 2px;
  font-size: 1.15rem;
  color: var(--ink);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  letter-spacing: -0.015em;
}
.drawer__toggle .nav__caret { flex-shrink: 0; }
.drawer__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--mid) var(--ease);
}
.drawer__sub.is-open { max-height: 460px; }
.drawer__sub a {
  display: block;
  padding: 12px 2px 12px 18px;
  color: var(--slate);
  font-size: 1rem;
  border-left: 1px solid var(--rule);
  margin-left: 2px;
}
.drawer__sub a:hover { color: var(--blue); border-left-color: var(--green); }
.drawer__sub li:last-child a { padding-bottom: 20px; }
.drawer .btn { width: 100%; margin-top: 28px; justify-content: center; }

.drawer__meta {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
  color: var(--slate);
}
.drawer__meta a { display: block; padding: 5px 0; color: var(--ink); }

/* --------------------------------------------------------------- 6. Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.97rem;
  font-weight: var(--w-book);
  letter-spacing: -0.005em;
  cursor: pointer;
  text-align: center;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-deep); color: #fff; }

.btn--ghost { border-color: var(--rule); color: var(--ink); background: #fff; }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn--accent { background: var(--green); color: var(--ink); }
.btn--accent:hover { background: #00c79c; color: var(--ink); }

.btn--onink { border-color: rgba(255, 255, 255, 0.28); color: #fff; background: transparent; }
.btn--onink:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); color: #fff; }

.btn--sm { min-height: 42px; padding: 9px 18px; font-size: 0.9rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--stack);
}

/* Text link with drawing rule */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  color: var(--blue);
  padding-bottom: 3px;
  position: relative;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.link-arrow:hover::after,
.link-arrow:focus-visible::after { transform: scaleX(1); }
.link-arrow svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--fast) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------ 7. Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 108px) clamp(56px, 8vw, 104px);
  background: linear-gradient(178deg, #fff 0%, var(--mist) 100%);
  border-bottom: 1px solid var(--rule);
}
.hero__art {
  position: absolute;
  top: 50%;
  right: -14%;
  width: min(700px, 62vw);
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 899px) {
  .hero__art { right: -34%; width: 105vw; opacity: 0.24; }
}
.hero .wrap { position: relative; z-index: 1; }
/* Measure is set on the heading itself: `ch` must resolve against the display
   size, not the container's inherited 1rem. */
.hero__copy { max-width: 100%; }
.hero__copy .display { max-width: 19ch; }
.hero .lead { margin-top: 26px; max-width: 54ch; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin-top: clamp(38px, 5vw, 58px);
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--slate);
}
.hero__meta div { display: flex; align-items: center; gap: 10px; }
.hero__meta img { width: 17px; height: 17px; flex-shrink: 0; }

/* Compact page hero for inner pages */
.pagehead {
  position: relative;
  overflow: hidden;
  padding-block: clamp(46px, 6vw, 84px) clamp(38px, 5vw, 62px);
  background: linear-gradient(178deg, #fff 0%, var(--mist) 100%);
  border-bottom: 1px solid var(--rule);
}
.pagehead__art {
  position: absolute;
  top: 50%; right: -18%;
  width: min(520px, 56vw);
  transform: translateY(-50%);
  opacity: 0.42;
  pointer-events: none;
}
@media (max-width: 899px) { .pagehead__art { opacity: 0.2; right: -30%; width: 88vw; } }
.pagehead .wrap { position: relative; z-index: 1; }
.pagehead .lead { margin-top: 22px; }

/* Breadcrumbs */
.crumbs {
  font-size: 0.82rem;
  color: var(--slate-light);
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.crumbs li { list-style: none; display: flex; align-items: center; gap: 8px; }
.crumbs li::after { content: "/"; color: var(--rule); }
.crumbs li:last-child::after { display: none; }
.crumbs a { color: var(--slate); }
.crumbs a:hover { color: var(--blue); }
.crumbs [aria-current] { color: var(--ink); }

/* ------------------------------------------------------------- 8. Value row */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.values > li {
  list-style: none;
  background: #fff;
  padding: clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
}
.values img { width: 26px; height: 26px; margin-bottom: 18px; }
.values h3 { font-size: 1.03rem; font-weight: var(--w-book); letter-spacing: -0.01em; line-height: 1.35; }
.values p { font-size: 0.9rem; color: var(--slate); margin: 9px 0 0; line-height: 1.6; }

/* ---------------------------------------------------------- 9. Pillar list */
.pillars { border-top: 1px solid var(--rule); }
.pillar {
  list-style: none;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.pillar__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: clamp(26px, 3.4vw, 42px) 0;
  color: var(--ink);
  transition: color var(--fast) var(--ease);
}
@media (min-width: 860px) {
  .pillar__link {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.15fr) 30px;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
  }
}
.pillar__icon { width: 26px; height: 26px; }
.pillar__title {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: var(--w-light);
  letter-spacing: -0.025em;
  line-height: 1.15;
  transition: transform var(--mid) var(--ease);
}
.pillar__desc { font-size: 0.96rem; color: var(--slate); line-height: 1.62; margin: 0; }
.pillar__go { width: 22px; height: 22px; opacity: 0.35; transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease); }
.pillar::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--slow) var(--ease);
}
.pillar:hover::after,
.pillar:focus-within::after { transform: scaleX(1); }
.pillar:hover .pillar__go,
.pillar:focus-within .pillar__go { opacity: 1; transform: translateX(4px); }
@media (min-width: 860px) {
  .pillar:hover .pillar__title { transform: translateX(6px); }
}

/* ------------------------------------------------------------ 10. Card grid */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  gap: clamp(14px, 1.5vw, 20px);
  background: transparent;
  border: 0;
}
.card {
  list-style: none;
  background: #fff;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  transition: background var(--mid) var(--ease);
}
.card:hover { background: #fff; }
.card__n {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--green-deep);
  font-weight: var(--w-medium);
  display: block;
  margin-bottom: 16px;
}
.card h3 { font-size: 1.08rem; font-weight: var(--w-book); line-height: 1.35; letter-spacing: -0.012em; }
.card p { font-size: 0.93rem; color: var(--slate); margin: 11px 0 0; line-height: 1.65; }
.card img.card__icon { width: 26px; height: 26px; margin-bottom: 18px; }

/* Simple bordered list — used for long service inventories */
.speclist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.speclist > li {
  list-style: none;
  background: #fff;
  padding: clamp(24px, 2.6vw, 32px);
  transition: background var(--mid) var(--ease);
}
.speclist > li:hover { background: var(--mist); }
.speclist h3 {
  font-size: 1rem;
  font-weight: var(--w-book);
  line-height: 1.4;
  letter-spacing: -0.01em;
  padding-left: 20px;
  position: relative;
}
.speclist h3::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 1px;
  background: var(--green);
}
.speclist p { font-size: 0.91rem; color: var(--slate); margin: 10px 0 0 20px; line-height: 1.62; }

/* Tick list */
.ticks { display: grid; gap: 13px; }
.ticks li {
  list-style: none;
  position: relative;
  padding-left: 30px;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--slate);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.48em;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--green-deep);
  border-bottom: 1.5px solid var(--green-deep);
  transform: rotate(-45deg);
}
.section--ink .ticks li { color: rgba(255, 255, 255, 0.78); }
.section--ink .ticks li::before { border-color: var(--green); }

@media (min-width: 720px) { .ticks--2 { grid-template-columns: 1fr 1fr; gap: 13px clamp(24px, 4vw, 56px); } }

/* Numbered steps — order carries meaning here */
.steps { counter-reset: s; display: grid; gap: 2px; }
.steps li {
  list-style: none;
  counter-increment: s;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--slate);
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--green-deep);
  padding-top: 4px;
  font-weight: var(--w-medium);
}
.steps li:last-child { border-bottom: 0; }

/* Tag chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips li {
  list-style: none;
  font-size: 0.82rem;
  padding: 7px 15px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--slate);
}
.section--ink .chips li { border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); }

/* Clinical note callout */
.note {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--green);
  background: var(--mist);
  padding: clamp(20px, 2.6vw, 28px);
  margin: 26px 0 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.note h4 {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: var(--w-medium);
  margin-bottom: 10px;
}
.note p { font-size: 0.93rem; color: var(--slate); line-height: 1.68; }

.note--alert { border-left-color: #d8452f; background: #fef6f4; }
.note--alert h4 { color: #b3341f; }

/* --------------------------------------------------------- 11. Timeline */
.timeline { position: relative; margin-top: var(--stack); }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: 6px;
  width: 1px;
  height: calc(100% - 12px);
  background: linear-gradient(180deg, var(--blue), var(--green));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.5s var(--ease);
}
.timeline.is-in::before { transform: scaleY(1); }
@media (min-width: 860px) { .timeline::before { left: 118px; } }

.tl {
  list-style: none;
  position: relative;
  padding: 0 0 clamp(30px, 4vw, 46px) 32px;
  display: grid;
  gap: 6px;
}
.tl:last-child { padding-bottom: 0; }
@media (min-width: 860px) {
  .tl { grid-template-columns: 100px minmax(0, 1fr); gap: 0 46px; padding-left: 0; align-items: start; }
}
.tl::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--blue);
  z-index: 1;
}
@media (min-width: 860px) { .tl::before { left: 113px; } }
.tl:last-child::before { border-color: var(--green-deep); background: var(--green); }
.tl__year {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: var(--w-medium);
  padding-top: 3px;
}
@media (min-width: 860px) { .tl__year { text-align: right; } }
.tl__body h3 { font-size: 1.1rem; font-weight: var(--w-book); letter-spacing: -0.012em; }
.tl__body p { font-size: 0.95rem; color: var(--slate); margin: 8px 0 0; line-height: 1.65; }

/* --------------------------------------------------------------- 12. FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.2vw, 26px) 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color var(--fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
.faq__sign {
  position: relative;
  flex-shrink: 0;
  width: 15px; height: 15px;
  margin-top: 6px;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 15px; height: 1px;
  background: var(--blue);
  transition: transform var(--mid) var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq details[open] .faq__sign::after { transform: rotate(0deg); }
.faq__body {
  padding: 0 0 clamp(20px, 2.4vw, 28px);
  max-width: 76ch;
}
.faq__body p { font-size: 0.97rem; color: var(--slate); line-height: 1.72; }
.faq details[open] .faq__body { animation: faqIn var(--mid) var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- 13. Resources */
.resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.13);
}
.resource {
  list-style: none;
  background: var(--ink);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #fff;
  transition: background var(--mid) var(--ease);
}
.resource:hover { background: var(--ink-soft); }
.resource img { width: 26px; height: 26px; }
.resource h3 { font-size: 1.15rem; font-weight: var(--w-book); letter-spacing: -0.012em; }
.resource p { font-size: 0.92rem; color: rgba(255, 255, 255, 0.66); line-height: 1.62; flex-grow: 1; margin: 0; }
.resource .link-arrow { color: var(--green); }

/* -------------------------------------------------------------- 14. Team */
.team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  background: transparent;
  border: 0;
}
.member {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  list-style: none;
  background: #fff;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--rule);
  border-radius: 18px;
}
@media (max-width: 680px) {
  .member { grid-template-columns: minmax(0, 1fr); }
}
.member__role {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: var(--w-medium);
  display: block;
  margin-bottom: 14px;
}
.member h3 { font-size: 1.5rem; letter-spacing: -0.025em; }
.member__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0 20px;
}
.member__creds li {
  list-style: none;
  font-size: 0.76rem;
  padding: 5px 12px;
  background: var(--blue-wash);
  color: var(--blue-deep);
  border-radius: 999px;
}
.member p { font-size: 0.94rem; color: var(--slate); line-height: 1.7; }

/* ------------------------------------------------------------ 15. Gallery */
.gallery-group + .gallery-group { margin-top: clamp(48px, 6vw, 84px); }

.grid-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(10px, 1.3vw, 18px);
  margin-top: var(--stack);
}
.shot {
  list-style: none;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--mist);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
}
.shot--tall { aspect-ratio: 3 / 4; }
.shot--wide { grid-column: span 1; aspect-ratio: 16 / 9; }
@media (min-width: 780px) { .shot--wide { grid-column: span 2; } }

.shot button {
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), opacity var(--mid) var(--ease);
}
.shot:hover img { transform: scale(1.035); }
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 16, 32, 0.34));
  opacity: 0;
  transition: opacity var(--mid) var(--ease);
  pointer-events: none;
}
.shot:hover::after { opacity: 1; }

/* Tiles whose source file is not present are removed by script; this is the
   pre-script resting state so nothing flashes as broken. */
.shot.is-missing { display: none; }

.gallery-fallback {
  border: 1px solid var(--rule);
  background: var(--mist);
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius);
  margin-top: var(--stack);
}
.gallery-fallback p { font-size: 0.94rem; color: var(--slate); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(6, 9, 18, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mid) var(--ease), visibility var(--mid);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius);
  transform: scale(0.97);
  transition: transform var(--mid) var(--ease);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox__cap {
  position: absolute;
  left: 0; right: 0; bottom: clamp(16px, 3vw, 30px);
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  padding-inline: 60px;
}
.lightbox__btn {
  position: absolute;
  width: 50px; height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.lightbox__close { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); }
.lightbox__prev { left: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------ 16. Self-assessment */
.quiz {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
  padding: clamp(22px, 3.4vw, 46px);
  box-shadow: 0 1px 40px rgba(11, 16, 32, 0.045);
}

.quiz__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: var(--w-medium);
}
.quiz__track {
  height: 2px;
  background: var(--rule);
  margin: 14px 0 clamp(28px, 4vw, 44px);
  overflow: hidden;
  border-radius: 2px;
}
.quiz__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width var(--mid) var(--ease);
}

.quiz__q {
  font-size: clamp(1.3rem, 2.8vw, 2.05rem);
  line-height: 1.24;
  letter-spacing: -0.028em;
  font-weight: var(--w-light);
  max-width: 24ch;
}
.quiz__topic {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: var(--w-medium);
  margin-bottom: 14px;
  display: block;
}
.quiz__stage { animation: quizIn 0.36s var(--ease); }
@keyframes quizIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.quiz__options {
  display: grid;
  gap: 9px;
  margin: clamp(26px, 3.4vw, 40px) 0 0;
}
.quiz__opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 58px;
  padding: 14px 20px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.quiz__opt:hover { border-color: var(--blue); background: var(--blue-wash); }
.quiz__opt[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-wash); }
.quiz__dot {
  width: 15px; height: 15px;
  border: 1.5px solid var(--slate-light);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--fast) var(--ease);
}
.quiz__opt:hover .quiz__dot,
.quiz__opt[aria-pressed="true"] .quiz__dot { border-color: var(--blue); }
.quiz__opt[aria-pressed="true"] .quiz__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--blue);
}

.quiz__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(26px, 3.4vw, 38px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--rule);
}
.quiz__hint { font-size: 0.84rem; color: var(--slate-light); }

/* Result */
.quiz__score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: var(--w-light);
}
.quiz__score small { font-size: 0.26em; color: var(--slate); letter-spacing: 0; }

.meter {
  height: 6px;
  border-radius: 6px;
  background: var(--rule);
  overflow: hidden;
  margin: 26px 0 12px;
}
.meter__fill {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width 1s var(--ease);
}
.meter__scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--slate-light);
  letter-spacing: 0.04em;
}

.band {
  margin-top: clamp(26px, 3.4vw, 38px);
  padding: clamp(22px, 3vw, 32px);
  background: var(--mist);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.band h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.band p { margin-top: 12px; font-size: 0.98rem; color: var(--slate); line-height: 1.72; }

.reflect { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 26px; }
@media (min-width: 700px) { .reflect { grid-template-columns: 1fr 1fr; } }
.reflect li { list-style: none; background: #fff; padding: 20px 24px; }
.reflect h4 { font-size: 0.95rem; font-weight: var(--w-book); }
.reflect p { font-size: 0.87rem; color: var(--slate); margin-top: 5px; line-height: 1.55; }
.reflect__val { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); font-weight: var(--w-medium); }

.disclaimer {
  margin-top: clamp(26px, 3.4vw, 38px);
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.68;
}
.disclaimer strong { color: var(--ink); font-weight: var(--w-book); }

/* --------------------------------------------------------- 17. Self guide */
.guide-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  padding-block: 14px;
}
.guide-toolbar__inner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.guide-search {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.94rem;
  color: var(--ink);
  background: #fff;
}
.guide-search::placeholder { color: var(--slate-light); }
.guide-search:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }

.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filter {
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  color: var(--slate);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.filter:hover { border-color: var(--blue); color: var(--blue); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.technique {
  border-top: 1px solid var(--rule);
  padding-block: clamp(34px, 4.4vw, 60px);
}
.technique[hidden] { display: none; }
.technique__tag {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: var(--w-medium);
}
.technique h2 { margin-top: 12px; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.technique__for {
  margin-top: 14px;
  font-size: 0.94rem;
  color: var(--slate);
}
.technique__for strong { color: var(--ink); font-weight: var(--w-book); }

.no-results {
  padding: clamp(40px, 6vw, 72px) 0;
  text-align: center;
  color: var(--slate);
}

/* --------------------------------------------------------- 18. Case study */
.case {
  border-top: 1px solid var(--rule);
  padding-block: clamp(40px, 5.4vw, 76px);
}
.case__n {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: var(--w-medium);
}
.case h2 { margin-top: 14px; }
.case__facts {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: var(--stack) 0;
}
@media (min-width: 640px) { .case__facts { grid-template-columns: repeat(3, 1fr); } }
.case__facts div { background: var(--mist); padding: 18px 22px; }
.case__facts dt {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate-light);
  font-weight: var(--w-medium);
}
.case__facts dd { margin: 7px 0 0; font-size: 0.96rem; color: var(--ink); line-height: 1.45; }

/* ---------------------------------------------------------- 19. Contact */
.contact-grid {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 920px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

.contact-list { display: grid; gap: 2px; }
.contact-list > li {
  list-style: none;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.contact-list img { width: 20px; height: 20px; margin-top: 4px; }
.contact-list dt {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-light);
  font-weight: var(--w-medium);
  margin-bottom: 6px;
}
.contact-list dd { margin: 0; font-size: 1rem; line-height: 1.6; }
.contact-list dd a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.contact-list dd a:hover { color: var(--blue); border-bottom-color: var(--green); }
.contact-list dd span { display: block; color: var(--slate); font-size: 0.92rem; }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.86rem; color: var(--slate); letter-spacing: 0.01em; }
.field label .req { color: var(--blue); }
.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  transition: border-color var(--fast) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #d8452f; }
.field__error { font-size: 0.83rem; color: #b3341f; min-height: 0; }
.field__error:empty { display: none; }

@media (min-width: 600px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } }

.form__note { font-size: 0.86rem; color: var(--slate-light); line-height: 1.6; }

.map-embed {
  margin-top: var(--stack);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mist);
}
.map-embed iframe { display: block; width: 100%; height: 380px; border: 0; }

/* ------------------------------------------------------------- 20. Final CTA */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding-block: clamp(64px, 8vw, 118px);
}
.cta__art {
  position: absolute;
  top: 50%; right: -4%;
  width: min(520px, 56vw);
  transform: translateY(-50%);
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 899px) { .cta__art { opacity: 0.32; right: -22%; width: 82vw; } }
.cta .wrap { position: relative; z-index: 1; }
.cta h2 { max-width: 18ch; }
.cta .lead { color: rgba(255, 255, 255, 0.72); margin-top: 22px; }

/* --------------------------------------------------------------- 21. Footer */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.68);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: clamp(52px, 6vw, 80px) 32px;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  gap: clamp(34px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }

.site-footer img.footer-logo { height: 44px; width: auto; margin-bottom: 22px; }
.site-footer h3 {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.44);
  font-weight: var(--w-medium);
  margin-bottom: 18px;
}
.site-footer ul li { list-style: none; }
.site-footer ul a,
.site-footer address a {
  display: inline-block;
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.68);
  transition: color var(--fast) var(--ease);
}
.site-footer ul a:hover,
.site-footer address a:hover { color: var(--green); }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer p { color: rgba(255, 255, 255, 0.55); line-height: 1.7; }

.safety {
  margin-top: clamp(40px, 5vw, 60px);
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 2px solid #ff6b52;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(255, 107, 82, 0.05);
}
.safety h3 { color: #ff8f7a; margin-bottom: 10px; }
.safety p { color: rgba(255, 255, 255, 0.72); font-size: 0.91rem; max-width: 90ch; }
.safety a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.safety a:hover { color: var(--green); }

.footer-base {
  margin-top: clamp(36px, 4vw, 52px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
}

/* Floating WhatsApp / call action */
.quick-actions {
  position: fixed;
  right: clamp(14px, 2.4vw, 26px);
  bottom: clamp(14px, 2.4vw, 26px);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quick-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 30px rgba(11, 16, 32, 0.24);
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.quick-actions a:hover { transform: translateY(-2px); background: var(--blue); }
.quick-actions img { width: 21px; height: 21px; }

/* ----------------------------------------------------------- 22. Reveals */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }

.no-js [data-reveal] { opacity: 1; transform: none; }

/* Page-load entrance for the hero */
.hero__copy > * { animation: heroIn 0.9s var(--ease) backwards; }
.hero__copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero__copy > *:nth-child(2) { animation-delay: 0.14s; }
.hero__copy > *:nth-child(3) { animation-delay: 0.23s; }
.hero__copy > *:nth-child(4) { animation-delay: 0.32s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------- 23. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .timeline::before { transform: scaleY(1) !important; }
  .shot:hover img { transform: none; }
  .btn:hover { transform: none; }
}

/* ------------------------------------------------------------- 24. Print */
@media print {
  .site-header, .drawer, .quick-actions, .cta, .lightbox, .guide-toolbar { display: none !important; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
  .section { padding-block: 18px; }
}

/* ============================================================================
   24. COLOUR & MOTION UPGRADE
   Pushes the brand palette (#3F50D9 / #00E4B2) through the hero, value strip,
   buttons, cards and team, and adds elegant motion. Placed last so it wins on
   source order. All keyframe motion is disabled by the reduced-motion block.
   ========================================================================== */

:root {
  --grad-brand: linear-gradient(120deg, #3f50d9 0%, #2e9bd6 55%, #00e4b2 100%);
  --grad-brand-soft: linear-gradient(120deg, #eef0fc 0%, #e6fbf6 100%);
  --glow-blue: rgba(63, 80, 217, 0.16);
  --glow-green: rgba(0, 228, 178, 0.18);
}

/* ---- Eyebrow dash → brand gradient ------------------------------------- */
.eyebrow::before {
  background: var(--grad-brand) !important;
}
.section--ink .eyebrow::before,
.cta .eyebrow::before { background: linear-gradient(90deg, #00e4b2, #6ad9ff) !important; }

/* ---- Primary button → gradient with moving sheen ----------------------- */
.btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--grad-brand);
  background-size: 160% 160%;
  border: 0;
  box-shadow: 0 10px 26px -12px var(--glow-blue);
  transition: transform var(--fast) var(--ease), box-shadow var(--mid) var(--ease),
              background-position var(--slow) var(--ease);
}
.btn--primary:hover {
  background: var(--grad-brand);
  background-size: 160% 160%;
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px var(--glow-blue);
}
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: skewX(-18deg);
}
.btn--primary:hover::after { animation: btnSheen 0.9s var(--ease); }
@keyframes btnSheen { to { left: 140%; } }

.btn--ghost { transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--blue); color: var(--blue); }

/* ---- Hero → warm brand wash + slow-drifting aurora --------------------- */
.hero {
  background:
    radial-gradient(120% 90% at 88% 8%, var(--glow-green) 0%, transparent 46%),
    radial-gradient(120% 100% at 6% 0%, var(--glow-blue) 0%, transparent 50%),
    linear-gradient(178deg, #ffffff 0%, var(--mist) 100%);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.hero::before {
  width: 42vw; height: 42vw; max-width: 560px; max-height: 560px;
  top: -8%; left: -10%;
  background: radial-gradient(circle, rgba(63,80,217,0.30), transparent 68%);
  animation: auroraA 16s ease-in-out infinite alternate;
}
.hero::after {
  width: 40vw; height: 40vw; max-width: 520px; max-height: 520px;
  bottom: -14%; right: 4%;
  background: radial-gradient(circle, rgba(0,228,178,0.26), transparent 66%);
  animation: auroraB 20s ease-in-out infinite alternate;
}
@keyframes auroraA { from { transform: translate(0,0) scale(1); } to { transform: translate(6%,8%) scale(1.12); } }
@keyframes auroraB { from { transform: translate(0,0) scale(1); } to { transform: translate(-7%,-5%) scale(1.14); } }
.hero__art { opacity: 0.62; }
@media (max-width: 899px) { .hero__art { opacity: 0.3; } }

/* Gradient keyword in the hero headline (text itself is unchanged) */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Value strip → gradient icon tiles + colour on hover --------------- */
.values > li {
  position: relative;
  transition: background var(--mid) var(--ease), transform var(--mid) var(--ease);
  isolation: isolate;
}
.values > li::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.values > li:hover { background: var(--mist); transform: translateY(-3px); }
.values > li:hover::before { transform: scaleX(1); }
.values img {
  width: 46px; height: 46px;
  padding: 11px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--grad-brand-soft);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: background var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.values > li:hover img {
  background: var(--grad-brand);
  box-shadow: 0 12px 22px -12px var(--glow-blue);
  filter: brightness(0) invert(1);
}

/* ---- Card lifts: resource cards, pillars, gallery, case links ---------- */
.resources > li,
.rescard,
.pillar {
  transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease),
              border-color var(--mid) var(--ease);
}
.resources > li:hover,
.rescard:hover,
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px -26px var(--glow-blue);
  border-color: var(--blue);
}

/* ---- Inline prose links → animated gradient underline ------------------ */
.prose a:not(.btn) {
  background-image: var(--grad-brand);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size var(--mid) var(--ease), color var(--fast) var(--ease);
}
.prose a:not(.btn):hover { background-size: 100% 2px; color: var(--blue); }

/* ---- Team → branded avatar imagery ------------------------------------- */
.member { position: relative; overflow: hidden; }
.member::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad-brand);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--mid) var(--ease);
}
.member:hover::after { transform: scaleY(1); }
.member__avatar {
  display: block;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  margin: 0;
  background: var(--grad-brand-soft);
  box-shadow: 0 22px 46px -26px var(--glow-blue);
}
@media (max-width: 680px) { .member__avatar { max-width: 240px; } }
.member__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Section heading accent mark --------------------------------------- */
.h1 .grad-text, .h2 .grad-text, .display .grad-text { letter-spacing: inherit; }

/* ---- Scroll progress bar (top of viewport) ----------------------------- */
.scrollbar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--grad-brand);
  z-index: 200;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
  .btn--primary:hover::after { animation: none; }
}

/* ---- 25. Approach cards: large gradient index + hover accent ----------- */
.card { position: relative; overflow: hidden; }
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -28px var(--glow-blue); border-color: var(--blue); }
.card:hover::before { transform: scaleX(1); }
.card__n {
  font-size: 2.4rem !important;
  line-height: 1;
  letter-spacing: -0.03em !important;
  font-weight: var(--w-light) !important;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 18px !important;
  opacity: 0.9;
  transition: opacity var(--fast) var(--ease);
}
.card:hover .card__n { opacity: 1; }

/* ============================================================================
   26. RICH BACKGROUNDS & INTERACTION EFFECTS
   Adds branded colour and texture to section backgrounds, and livelier motion
   to the filter tabs, FAQ accordions and questionnaire. Applied through the
   existing shared classes so every page benefits. Motion respects reduced-motion.
   ========================================================================== */

/* ---- Mist sections → soft blue↔green mesh (was flat grey) --------------- */
.section--mist {
  background:
    radial-gradient(78% 62% at 100% 0%, rgba(0, 228, 178, 0.07), transparent 55%),
    radial-gradient(72% 62% at 0% 100%, rgba(63, 80, 217, 0.07), transparent 55%),
    var(--mist);
}

/* Plain white sections gain a whisper of colour in the corners for rhythm,
   while keeping their airy feel. */
.section:not(.section--mist):not(.section--ink) {
  background:
    radial-gradient(60% 48% at 100% 0%, rgba(63, 80, 217, 0.035), transparent 60%),
    #fff;
}

/* ---- Ink sections → brand glow + faint neuron dot-grid ------------------ */
.section--ink,
.cta {
  background-color: var(--ink);
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.4px),
    radial-gradient(58% 78% at 92% 10%, rgba(0, 228, 178, 0.12), transparent 55%),
    radial-gradient(52% 72% at 4% 92%, rgba(63, 80, 217, 0.22), transparent 55%);
  background-size: 24px 24px, auto, auto;
  background-position: 0 0, 0 0, 0 0;
}

/* Gradient hairline where a light section meets a mist one */
.section--mist + .section:not(.section--mist):not(.section--ink),
.section:not(.section--mist):not(.section--ink) + .section--mist {
  position: relative;
}
.section--mist + .section:not(.section--mist):not(.section--ink)::before,
.section:not(.section--mist):not(.section--ink) + .section--mist::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--green), transparent);
  opacity: 0.5;
}

/* ---- Filter tabs → animated gradient pill + lift ----------------------- */
.filter {
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease),
              background var(--fast) var(--ease), transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.filter:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-wash);
  transform: translateY(-1px);
}
.filter[aria-pressed="true"] {
  color: #fff;
  border-color: transparent;
  background: var(--grad-brand);
  background-size: 180% 180%;
  box-shadow: 0 8px 20px -10px var(--glow-blue);
  animation: filterShift 7s ease infinite;
}
@keyframes filterShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---- FAQ accordion → soft wash + gradient accent on open --------------- */
.faq details {
  position: relative;
  padding-inline: clamp(14px, 1.6vw, 22px);
  border-radius: var(--radius);
  transition: background var(--mid) var(--ease);
}
.faq details::before {
  content: "";
  position: absolute;
  left: 0; top: 14%; bottom: 14%;
  width: 3px;
  border-radius: 3px;
  background: var(--grad-brand);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--mid) var(--ease);
}
.faq details[open] {
  background:
    linear-gradient(120deg, rgba(63,80,217,0.05), rgba(0,228,178,0.05));
}
.faq details[open]::before { transform: scaleY(1); }
.faq details:hover:not([open]) { background: rgba(63, 80, 217, 0.03); }
.faq__sign::before, .faq__sign::after { background: var(--blue); }
.faq details[open] .faq__sign::before,
.faq details[open] .faq__sign::after { background: var(--green-deep); }

/* ---- Questionnaire options → gradient select + hover lift -------------- */
.quiz__opt {
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.quiz__opt:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -16px var(--glow-blue);
}
.quiz__opt[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(120deg, rgba(63,80,217,0.10), rgba(0,228,178,0.12));
  box-shadow: inset 0 0 0 1.5px var(--blue);
}
.quiz__opt[aria-pressed="true"] .quiz__dot {
  border-color: var(--blue);
  background: var(--grad-brand);
}
.quiz__opt[aria-pressed="true"] .quiz__dot::after { background: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .filter[aria-pressed="true"] { animation: none; }
}

/* ---- 27. Leader portrait (About) --------------------------------------- */
.leader {
  margin: clamp(22px, 3vw, 30px) 0 0;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  max-width: 340px;
  background: var(--grad-brand-soft);
  box-shadow: 0 26px 54px -30px var(--glow-blue);
}
.leader::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--rule);
  pointer-events: none;
}
.leader::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--grad-brand);
  z-index: 1;
}
.leader img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--slow) var(--ease);
}
.leader:hover img { transform: scale(1.03); }
@media (max-width: 899px) { .leader { max-width: 260px; } }