/* Polarion Group — site styles. Colours are taken from the Polarion Group
   wordmark: POLARION blue and GROUP teal, on a deep navy. */

:root{
  --navy-950:#071626;
  --navy-900:#0b1f33;
  --navy-800:#12304d;
  --blue:#1d5f8a;
  --blue-600:#174d71;
  --blue-soft:#e9f1f8;
  --teal:#0f9a83;
  --teal-300:#5fd3bd;
  --teal-soft:#e5f6f2;

  --ink:#0d1b2a;
  --body:#3f4f63;
  --muted:#66768b;
  --line:#e2e8ef;
  --bg:#ffffff;
  --bg-alt:#f4f7fa;

  --font-head:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgb(13 27 42 / .06), 0 2px 8px rgb(13 27 42 / .04);
  --shadow:0 2px 4px rgb(13 27 42 / .04), 0 12px 32px rgb(13 27 42 / .08);
  --shadow-lg:0 30px 80px -20px rgb(7 22 38 / .35);
  --wrap:72rem;
  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--bg); color:var(--body); font:400 1.0625rem/1.65 var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,svg{ max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4{ margin:0; color:var(--ink); font-family:var(--font-head); font-weight:700; line-height:1.15; letter-spacing:-.02em; text-wrap:balance; }
h1{ font-size:clamp(2.4rem, 5.6vw, 4rem); font-weight:800; letter-spacing:-.035em; line-height:1.05; }
h2{ font-size:clamp(1.85rem, 3.6vw, 2.7rem); letter-spacing:-.03em; }
h3{ font-size:1.2rem; }
p{ margin:0; text-wrap:pretty; }
a{ color:var(--blue); text-underline-offset:3px; }
a:hover{ color:var(--blue-600); }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.skip-link{ position:absolute; left:1rem; top:-4rem; z-index:100; padding:.6rem 1rem; border-radius:var(--radius-sm); background:var(--ink); color:#fff; }
.skip-link:focus{ top:1rem; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.4rem; border-radius:999px; border:1px solid transparent;
  font:600 .975rem/1 var(--font-body); text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn svg{ width:1.05rem; height:1.05rem; transition:transform .2s ease; }
.btn:hover svg{ transform:translateX(3px); }
.btn--primary{ background:var(--teal); color:#fff; box-shadow:0 8px 20px -8px rgb(15 154 131 / .7); }
.btn--primary:hover{ background:#0c8571; color:#fff; transform:translateY(-1px); }
.btn--dark{ background:var(--navy-900); color:#fff; }
.btn--dark:hover{ background:var(--navy-800); color:#fff; transform:translateY(-1px); }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }
.btn--ghost-light{ border-color:rgb(255 255 255 / .28); color:#fff; }
.btn--ghost-light:hover{ border-color:#fff; color:#fff; background:rgb(255 255 255 / .06); }
.btn--sm{ padding:.65rem 1.1rem; font-size:.9rem; }
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }

.link-arrow{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; text-decoration:none; color:var(--blue); }
.link-arrow svg{ width:1rem; height:1rem; transition:transform .2s ease; }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ── Header ────────────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgb(255 255 255 / .86); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 4px 20px -12px rgb(13 27 42 / .25); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:4.75rem; }
.brand{ display:inline-flex; align-items:center; flex:none; }
.brand img{ display:block; height:2.75rem; width:auto; }
.nav{ display:flex; align-items:center; gap:.25rem; }
.nav a:not(.btn){ padding:.55rem .9rem; border-radius:999px; color:var(--body); font-weight:500; font-size:.975rem; text-decoration:none; transition:color .15s ease, background-color .15s ease; }
.nav a:not(.btn):hover{ color:var(--ink); background:var(--bg-alt); }
.nav a[aria-current="page"]:not(.btn){ color:var(--ink); font-weight:600; background:var(--bg-alt); }
.nav .btn{ margin-left:.75rem; }
.nav-toggle{ display:none; padding:.5rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink); cursor:pointer; }
.nav-toggle svg{ display:block; width:1.4rem; height:1.4rem; }
@media (max-width: 52rem){
  .nav-toggle{ display:block; }
  .nav{ position:absolute; inset:100% 0 auto; flex-direction:column; align-items:stretch; gap:.25rem; padding:1rem 1.25rem 1.5rem; background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow); }
  .nav a:not(.btn){ padding:.85rem 1rem; border-radius:var(--radius-sm); }
  .nav .btn{ margin:.5rem 0 0; }
  .nav[hidden]{ display:none; }
}

/* ── Eyebrow / section heads ───────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1rem;
  color:var(--teal); font:700 .8rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase;
}
.eyebrow::before{ content:""; width:.5rem; height:.5rem; border-radius:2px; background:currentColor; transform:rotate(45deg); }
.section{ padding-block:clamp(4.5rem, 9vw, 7rem); }
.section--alt{ background:var(--bg-alt); }
.section--tight{ padding-block:clamp(3rem, 6vw, 4.5rem); }
.section-head{ max-width:44rem; margin-bottom:clamp(2.5rem, 5vw, 3.5rem); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head p:not(.eyebrow){ margin-top:1rem; font-size:1.15rem; color:var(--muted); }
.lede{ font-size:clamp(1.1rem, 1.6vw, 1.25rem); line-height:1.6; }

/* ── Hero (home) ───────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden; isolation:isolate; color:#c9d6e3;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgb(29 95 138 / .55), transparent 60%),
    radial-gradient(40rem 26rem at -5% 110%, rgb(15 154 131 / .35), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
  padding-block:clamp(4.5rem, 10vw, 8rem);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}
.hero .wrap{ display:grid; gap:clamp(3rem, 6vw, 4.5rem); grid-template-columns:repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); align-items:center; }
.hero h1{ color:#fff; }
.hero h1 .accent{ background:linear-gradient(90deg, var(--teal-300), #7cc4f0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .eyebrow{ color:var(--teal-300); }
.hero .lede{ margin-top:1.5rem; max-width:34rem; color:#b7c6d6; }
.hero .lede strong{ color:#fff; font-weight:600; }
.hero__sub{ margin-top:1rem; max-width:34rem; color:#8ea3b8; font-size:1rem; }

.hero-card{
  position:relative; padding:1.5rem; border-radius:calc(var(--radius) + 4px);
  background:linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .04));
  border:1px solid rgb(255 255 255 / .12); box-shadow:var(--shadow-lg);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.hero-card__title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; padding:0 .25rem; color:#fff; font:600 .95rem/1 var(--font-body); }
.hero-card__title span{ color:#8ea3b8; font-weight:500; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.hero-card__text{ margin:0; padding:0 .25rem; color:#dbe5ee; font-size:1.15rem; line-height:1.6; }
.hero-card__text + .hero-card__text{ margin-top:1rem; padding-top:1rem; border-top:1px solid rgb(255 255 255 / .1); }
.hero-card ul{ display:grid; gap:.75rem; margin:0; padding:0; list-style:none; }
.hero-card li a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
  padding:1rem 1.1rem; border-radius:var(--radius-sm); text-decoration:none;
  background:rgb(255 255 255 / .05); border:1px solid rgb(255 255 255 / .08);
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.hero-card li a:hover{ background:rgb(255 255 255 / .1); border-color:rgb(95 211 189 / .45); transform:translateX(2px); }
.hero-card .ic{ display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:10px; background:rgb(95 211 189 / .14); color:var(--teal-300); }
.hero-card .ic svg{ width:1.3rem; height:1.3rem; }
.hero-card strong{ display:block; color:#fff; font-weight:600; }
.hero-card small{ display:block; margin-top:.15rem; color:#9db0c3; font-size:.88rem; }
.hero-steps{ display:grid; gap:.75rem; margin:0; padding:0; list-style:none; }
.hero-steps li{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1rem; padding:1rem 1.1rem; border-radius:var(--radius-sm); background:rgb(255 255 255 / .05); border:1px solid rgb(255 255 255 / .08); }
.hero-steps .ic{ font:800 .9rem/1 var(--font-head); letter-spacing:.02em; }
.people-strip{ display:flex; flex-wrap:wrap; gap:1.5rem 3.5rem; margin:1.5rem 0 0; padding:0; list-style:none; }
.people-strip li{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1rem; }
.people-strip .avatar{ display:grid; place-items:center; width:3.5rem; height:3.5rem; border-radius:50%; object-fit:cover; background:linear-gradient(135deg, var(--blue), var(--teal)); color:#fff; font:800 1.05rem/1 var(--font-head); }
.people-strip a{ color:var(--ink); font:700 1.1rem/1.2 var(--font-head); text-underline-offset:4px; }
.people-strip small{ display:block; margin-top:.25rem; color:var(--muted); font-size:.92rem; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); gap:2rem; margin:1.5rem 0 0; padding:0; list-style:none; }
.stats strong{ display:block; color:var(--teal); font:800 clamp(2rem, 4vw, 2.75rem)/1 var(--font-head); letter-spacing:-.02em; }
.stats span{ display:block; margin-top:.6rem; color:var(--muted); font-size:.95rem; }
.hero-card .go{ width:1.1rem; height:1.1rem; color:#6f86a0; }

/* ── Page hero (inner pages) ───────────────────────────────────────── */
.page-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(4rem, 8vw, 6rem) clamp(3.5rem, 7vw, 5rem);
  background:
    radial-gradient(50rem 22rem at 100% 0%, rgb(29 95 138 / .12), transparent 60%),
    radial-gradient(36rem 20rem at 0% 100%, rgb(15 154 131 / .10), transparent 60%),
    var(--bg-alt);
  border-bottom:1px solid var(--line);
}
.page-hero h1{ max-width:48rem; }
.page-hero .lede{ margin-top:1.25rem; max-width:44rem; color:var(--body); }
.page-hero--product{ border-bottom:0; background:
    radial-gradient(60rem 30rem at 85% -10%, rgb(29 95 138 / .55), transparent 60%),
    radial-gradient(40rem 26rem at -5% 80%, rgb(15 154 131 / .30), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900)); color:#b7c6d6; }
.page-hero--product h1{ color:#fff; }
.page-hero--product .eyebrow{ color:var(--teal-300); }
.page-hero--product .lede{ color:#b7c6d6; }
.page-hero--product{ padding-bottom:clamp(3.5rem, 7vw, 5rem); }
.page-hero--product h1 .accent{ background:linear-gradient(90deg, var(--teal-300), #7cc4f0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.approach{ display:grid; gap:clamp(1.5rem, 3vw, 2.5rem); grid-template-columns:minmax(0, 2.4fr) minmax(16rem, 1fr); align-items:center; margin-top:clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 60rem){ .approach{ grid-template-columns:1fr; } }
.flyer{ margin:0; padding:clamp(.4rem, 1vw, .65rem); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-lg); }
.flyer a{ display:block; border-radius:calc(var(--radius) - 6px); overflow:hidden; }
.flyer img{ display:block; width:100%; height:auto; transition:transform .4s ease; }
.flyer a:hover img{ transform:scale(1.01); }
.changes{ padding:clamp(1.75rem, 3vw, 2.5rem); border-radius:var(--radius); border:1px solid rgb(95 211 189 / .45); background:linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .03)); }
.changes .eyebrow{ margin-bottom:1.5rem; }
.changes h2{ color:#fff; font-size:clamp(1.35rem, 2.2vw, 1.65rem); }
.changes p:not(.eyebrow){ margin-top:.75rem; color:#b7c6d6; font-size:1.05rem; }
.changes p + h2{ margin-top:2rem; }
.changes .actions{ flex-direction:column; align-items:stretch; margin-top:2.25rem; }

/* ── Layout helpers ────────────────────────────────────────────────── */
.split{ display:grid; gap:clamp(2.5rem, 6vw, 5rem); grid-template-columns:repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); align-items:center; }
.split--top{ align-items:start; }
.grid{ display:grid; gap:1.25rem; }
.grid--2{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.prose p{ font-size:1.125rem; }
.prose p + p{ margin-top:1.25rem; }
.stack > * + *{ margin-top:1rem; }

/* ── Cards ─────────────────────────────────────────────────────────── */
.card{
  position:relative; padding:1.75rem; border-radius:var(--radius);
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.card{ display:block; text-decoration:none; color:inherit; }
.card:hover{ box-shadow:var(--shadow); border-color:#d3dce6; }
a.card:hover{ transform:translateY(-3px); }
.card h3{ margin-top:1.1rem; }
.card p{ margin-top:.55rem; color:var(--muted); font-size:1rem; }
.card .link-arrow{ margin-top:1.25rem; }
.icon{ display:grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:12px; background:var(--teal-soft); color:var(--teal); }
.icon svg{ width:1.4rem; height:1.4rem; }
.icon--blue{ background:var(--blue-soft); color:var(--blue); }

.card--feature{ padding:clamp(1.75rem, 3vw, 2.5rem); }
.card--feature h3{ font-size:1.5rem; }
.card--feature > p{ font-size:1.05rem; }

.ticks{ display:grid; gap:.7rem; margin:1.5rem 0 0; padding:0; list-style:none; }
.ticks li{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; color:var(--body); font-size:1rem; }
.ticks li::before{
  content:""; width:1.25rem; height:1.25rem; margin-top:.2rem; border-radius:50%;
  background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f9a83' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.75rem no-repeat;
}
.ticks--no li::before{ background:#fdecea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/.7rem no-repeat; }
.ticks strong{ color:var(--ink); font-weight:600; }

.tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; padding:0; list-style:none; }
.tags li{ padding:.4rem .8rem; border-radius:999px; background:var(--blue-soft); color:var(--blue-600); font-size:.875rem; font-weight:600; }

/* ── Pillars (numbered approach) ───────────────────────────────────── */
.pillars{ display:grid; gap:1px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin:0; padding:0; list-style:none; counter-reset:pillar; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.pillars li{ counter-increment:pillar; padding:1.75rem; background:#fff; }
.pillars li::before{ content:counter(pillar, decimal-leading-zero); display:block; margin-bottom:1rem; color:var(--teal); font:800 .95rem/1 var(--font-head); letter-spacing:.05em; }
.pillars h3{ font-size:1.1rem; }
.pillars p{ margin-top:.45rem; color:var(--muted); font-size:.975rem; }

/* ── Timeline (services) ───────────────────────────────────────────── */
.timeline{ position:relative; display:grid; gap:1rem; margin:0; padding:0; list-style:none; counter-reset:step; }
.timeline::before{ content:""; position:absolute; left:1.35rem; top:1.5rem; bottom:1.5rem; width:2px; background:linear-gradient(var(--teal), var(--blue)); opacity:.25; }
.timeline li{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:1.25rem; counter-increment:step; }
.timeline li::before{
  content:counter(step); position:relative; z-index:1; display:grid; place-items:center;
  width:2.7rem; height:2.7rem; border-radius:50%; background:#fff; border:2px solid var(--teal);
  color:var(--teal); font:800 1rem/1 var(--font-head);
}
.timeline .body{ padding:1.25rem 1.4rem; border-radius:var(--radius); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.timeline h3{ font-size:1.1rem; }
.timeline p{ margin-top:.35rem; color:var(--muted); font-size:1rem; }

/* ── Product screenshot frame ──────────────────────────────────────── */
.shot{ margin:0; border-radius:14px 14px 0 0; overflow:hidden; background:#fff; border:1px solid rgb(255 255 255 / .14); box-shadow:var(--shadow-lg); }
.shot--rounded{ border-radius:14px; border-color:var(--line); }
.shot__bar{ display:flex; align-items:center; gap:.4rem; padding:.7rem .9rem; background:#eef2f6; border-bottom:1px solid var(--line); }
.shot__bar i{ width:.65rem; height:.65rem; border-radius:50%; background:#cfd8e2; }
.shot__bar span{ margin-left:.75rem; padding:.2rem .75rem; border-radius:6px; background:#fff; color:var(--muted); font-size:.75rem; }
.shot img{ display:block; width:100%; }

/* ── Before → after rows ───────────────────────────────────────────── */
.shift{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.shift .card{ padding:1.5rem 1.75rem; }
.shift .was{ display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.9rem; text-decoration:line-through; text-decoration-color:rgb(102 118 139 / .5); }
.shift h3{ margin-top:.6rem; }

/* ── Chart (need vs fit) ───────────────────────────────────────────── */
.chart{ margin:0; padding:1.5rem; border-radius:var(--radius); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.chart__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem; }
.chart__head strong{ color:var(--ink); font-size:.95rem; }
.chart__head span{ color:var(--muted); font-size:.78rem; }
.chart svg{ display:block; width:100%; height:auto; }
.chart .axis{ stroke:#cfd8e2; }
.chart .grid-line{ stroke:#dfe6ee; stroke-dasharray:3 4; }
.chart .q-fund{ fill:var(--teal-soft); }
.chart .q-label{ fill:var(--ink); font:600 11px var(--font-body); }
.chart .label{ fill:var(--muted); font:600 10px var(--font-body); letter-spacing:.08em; text-transform:uppercase; }
.chart .dot{ fill:var(--teal); }
.chart .dot--b{ fill:var(--blue); }
.chart .dot--c{ fill:#a9b6c4; }
.chart figcaption{ display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:1rem; color:var(--muted); font-size:.85rem; }
.chart figcaption i{ display:inline-block; width:.65rem; height:.65rem; margin-right:.4rem; border-radius:50%; background:var(--teal); vertical-align:middle; }
.chart figcaption i.b{ background:var(--blue); }
.chart figcaption i.c{ background:#a9b6c4; }

/* ── Product vignettes (deck slide 6) ──────────────────────────────── */
.vignettes{ display:grid; gap:2rem 1.5rem; grid-template-columns:1fr; }
@media (min-width:40rem){ .vignettes{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:64rem){ .vignettes{ grid-template-columns:repeat(4, 1fr); } }
.vignette{ margin:0; }
.vignette__img{ display:grid; place-items:center; aspect-ratio:16 / 10; overflow:hidden; border-radius:var(--radius); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.vignette__img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top left; }
.vignette--tall .vignette__img{ position:relative; background:linear-gradient(135deg, var(--blue-soft), var(--teal-soft)); }
.vignette--tall .vignette__img img{ position:absolute; inset:.6rem 0; margin:auto; width:auto; height:calc(100% - 1.2rem); border-radius:8px; box-shadow:var(--shadow); background:#fff; }
.vignette figcaption{ margin-top:.85rem; }
.vignette figcaption h3{ font-size:1.05rem; }
.vignette figcaption p{ margin-top:.3rem; color:var(--muted); font-size:.9rem; line-height:1.5; }

/* ── Leadership ────────────────────────────────────────────────────── */
.people{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.person{ padding:1.75rem; border-radius:var(--radius); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.person__photo{ display:grid; place-items:center; width:6.5rem; height:6.5rem; margin-bottom:1.25rem; overflow:hidden; border-radius:50%; background:linear-gradient(135deg, var(--blue), var(--teal)); color:#fff; font:800 1.6rem/1 var(--font-head); }
.person__photo img{ width:100%; height:100%; object-fit:cover; }
.person__role{ margin-top:.3rem; color:var(--teal); font-weight:600; font-size:.95rem; }
.person p:not(.person__role){ margin-top:.9rem; color:var(--muted); font-size:1rem; }
.person .tags{ margin-top:1.1rem; }
.person__link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.25rem; font-weight:600; text-decoration:none; }
.person__link svg{ width:1rem; height:1rem; }

/* ── Client stories ────────────────────────────────────────────────── */
.cases{ display:grid; gap:1.5rem; }
.case{ display:block; padding:clamp(1.5rem, 3vw, 2.25rem); border-radius:var(--radius); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); color:inherit; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease; }
a.case:hover{ transform:translateY(-3px); box-shadow:var(--shadow); color:inherit; }
.case__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; color:var(--muted); font-size:.9rem; }
.case__service{ padding:.3rem .7rem; border-radius:999px; background:var(--teal-soft); color:var(--teal); font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.case h3{ margin-top:.9rem; font-size:1.35rem; }
.case > p{ margin-top:.6rem; color:var(--muted); }
.case__story{ display:grid; gap:1.25rem 2.5rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin:1.25rem 0 0; }
.case__story dt{ color:var(--ink); font-weight:700; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; }
.case__story dd{ margin:.4rem 0 0; color:var(--body); }
.case blockquote{ margin:1.5rem 0 0; padding:1rem 1.25rem; border-left:3px solid var(--teal); background:var(--bg-alt); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.case blockquote p{ color:var(--ink); font-size:1.05rem; }
.case blockquote cite{ display:block; margin-top:.4rem; color:var(--muted); font-style:normal; font-size:.9rem; }
.results{ display:flex; flex-wrap:wrap; gap:1rem 2.5rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line); }
.result strong{ display:block; color:var(--ink); font:800 1.6rem/1 var(--font-head); letter-spacing:-.02em; }
.result span{ display:block; margin-top:.35rem; color:var(--muted); font-size:.9rem; }
.case .link-arrow{ margin-top:1.25rem; }

/* ── Stats band ────────────────────────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.stat{ padding:1.75rem 1.5rem; background:#fff; }
.stat strong{ display:block; color:var(--ink); font:800 clamp(2rem, 4vw, 2.6rem)/1 var(--font-head); letter-spacing:-.03em; }
.stat strong em{ font-style:normal; color:var(--teal); }
.stat span{ display:block; margin-top:.6rem; color:var(--muted); font-size:.95rem; }

/* ── Callout ───────────────────────────────────────────────────────── */
.callout{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; margin-top:2rem; padding:1.4rem 1.6rem; border-radius:var(--radius); background:var(--teal-soft); border:1px solid #c5ebe2; color:var(--body); }
.callout svg{ width:1.5rem; height:1.5rem; color:var(--teal); }
.callout strong{ color:var(--ink); }

/* ── Roles ─────────────────────────────────────────────────────────── */
.roles{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.roles li{ display:grid; grid-template-columns:minmax(10rem, 17rem) 1fr; gap:.4rem 2rem; padding:1.35rem 0; border-bottom:1px solid var(--line); }
.roles strong{ color:var(--ink); font-weight:600; }
.roles span{ color:var(--muted); }
@media (max-width: 40rem){ .roles li{ grid-template-columns:1fr; } }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq{ max-width:50rem; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.35rem 0; color:var(--ink); font:600 1.1rem/1.35 var(--font-head); cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:none; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--bg-alt); color:var(--teal); font:500 1.3rem/1 var(--font-body); transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 3rem 1.5rem 0; color:var(--muted); }

/* ── CTA band ──────────────────────────────────────────────────────── */
.cta{
  position:relative; overflow:hidden; isolation:isolate; padding:clamp(3rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius:calc(var(--radius) + 8px); text-align:center; color:#b7c6d6;
  background:
    radial-gradient(30rem 18rem at 100% 0%, rgb(29 95 138 / .7), transparent 60%),
    radial-gradient(26rem 16rem at 0% 100%, rgb(15 154 131 / .45), transparent 60%),
    var(--navy-900);
}
.cta h2{ max-width:40rem; margin-inline:auto; color:#fff; }
.cta p{ max-width:36rem; margin:1rem auto 0; font-size:1.15rem; }
.cta .actions{ justify-content:center; }

/* ── Forms ─────────────────────────────────────────────────────────── */
.contact-grid{ display:grid; gap:clamp(2rem, 5vw, 3.5rem); grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items:start; }
@media (min-width: 60rem){ .contact-grid{ grid-template-columns:1.4fr 1fr; } }
.form{ display:grid; gap:1.1rem; padding:clamp(1.5rem, 4vw, 2.25rem); border-radius:calc(var(--radius) + 4px); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.form .row{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.field{ display:grid; gap:.4rem; }
.field label{ color:var(--ink); font-weight:600; font-size:.9rem; }
.field .opt{ color:var(--muted); font-weight:400; }
.field input, .field select, .field textarea{
  width:100%; padding:.8rem .95rem; border-radius:var(--radius-sm); border:1px solid #d4dce5; background:#fbfcfd;
  color:var(--ink); font:inherit; font-size:1rem; line-height:1.4; transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field textarea{ min-height:8.5rem; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 4px rgb(15 154 131 / .15); }
.form .hp{ position:absolute; left:-9999px; }
.form-note{ color:var(--muted); font-size:.875rem; }
.form-status{ padding:.85rem 1rem; border-radius:var(--radius-sm); background:var(--teal-soft); color:var(--ink); font-size:.95rem; }
.form-status[data-state="error"]{ background:#fdecec; }
.contact-card{ padding:clamp(1.5rem, 4vw, 2.25rem); border-radius:calc(var(--radius) + 4px); background:var(--navy-900); color:#b7c6d6; }
.contact-card h2{ color:#fff; font-size:1.5rem; }
.contact-card .email{ display:inline-flex; align-items:center; gap:.6rem; margin-top:1.25rem; color:#fff; font-weight:600; font-size:1.1rem; text-decoration:none; }
.contact-card .email svg{ width:1.25rem; height:1.25rem; color:var(--teal-300); }
.contact-card .email:hover{ color:var(--teal-300); }
.contact-card hr{ margin:1.75rem 0; border:0; border-top:1px solid rgb(255 255 255 / .12); }
.contact-card h3{ color:#fff; font-size:1rem; }
.contact-card .ticks li{ color:#b7c6d6; }
.contact-card .ticks li::before{ background-color:rgb(95 211 189 / .15); }
.contact-card .ticks strong{ color:#fff; }

/* ── Footer ────────────────────────────────────────────────────────── */
.site-footer{ padding-block:4rem 2rem; background:var(--bg-alt); border-top:1px solid var(--line); color:var(--muted); font-size:.95rem; }
.site-footer .top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.5rem; }
.site-footer nav{ display:flex; flex-wrap:wrap; gap:3rem; }
.site-footer nav h2{ margin-bottom:.9rem; color:var(--ink); font:700 .78rem/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; }
.site-footer nav ul{ display:grid; gap:.55rem; margin:0; padding:0; list-style:none; }
.site-footer nav a{ color:var(--muted); text-decoration:none; }
.site-footer nav a:hover{ color:var(--ink); }
.site-footer .bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.875rem; }

/* ── 404 ───────────────────────────────────────────────────────────── */
.notfound{ min-height:55vh; display:grid; place-items:center; text-align:center; }
.notfound .code{ color:var(--teal); font:800 clamp(4rem, 14vw, 8rem)/1 var(--font-head); letter-spacing:-.04em; }
.notfound p{ max-width:28rem; margin:1rem auto 0; color:var(--muted); }
.notfound .actions{ justify-content:center; }

/* ── Reveal on scroll (progressive enhancement) ────────────────────── */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }