/* ==========================================================================
   PeoplePro Consulting — original stylesheet
   Written for peopleproca.com. No third-party theme code.
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */
:root {
  --ink:        #0B1E30;
  --navy:       #1E3959;
  --navy-mid:   #2A5885;
  --navy-soft:  #E4EEF5;
  --accent:     #17789F;   /* logo teal, 4.97:1 with white text */
  --accent-dk:  #0F5F80;   /* hover + small text on light */
  --accent-lt:  #29A8DF;   /* logo bright cyan, for dark backgrounds */
  --accent-soft:#E8F4F9;
  /* Button hover fill. Deliberately a different hue from the teal so the
     sweep is unmistakable; darkened until white 15px text clears 4.5:1
     (4.56:1), which the brighter mint green of the reference video does not. */
  --green:      #0C8752;
  --body:       #4C5D6E;
  --muted:      #7A8896;
  --line:       #E3E9F0;
  --mist:       #F6F8FB;
  --paper:      #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(11, 30, 48, .06), 0 2px 8px rgba(11, 30, 48, .04);
  --shadow-md: 0 4px 12px rgba(11, 30, 48, .07), 0 12px 32px rgba(11, 30, 48, .06);
  --shadow-lg: 0 10px 24px rgba(11, 30, 48, .09), 0 28px 64px rgba(11, 30, 48, .10);

  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  --wrap: 1180px;
  --gut: 24px;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- 3. Typography ------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.019em;
}
h1 { font-size: clamp(2.15rem, 1.28rem + 3.3vw, 3.6rem);  line-height: 1.14; }
/* One scale, used by every page. Section headings had been running to 39px on
   the detail pages while the homepage sections sat at 31px — these bring the
   two into line. */
h2 { font-size: clamp(1.5rem,  1.1rem + 1.5vw,  1.95rem); line-height: 1.25; }
h3 { font-size: clamp(1rem,    .95rem + .3vw,   1.12rem); line-height: 1.38; letter-spacing: -.012em; }
h4 { font-size: .96rem; line-height: 1.4; letter-spacing: -.01em; }
p { text-wrap: pretty; }
.lead { font-size: .97rem; line-height: 1.75; color: var(--body); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .755rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.eyebrow--light { color: var(--accent-lt); }
.eyebrow--light::before { background: var(--accent-lt); }

/* --- 4. Layout ----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.section { padding-block: clamp(58px, 7vw, 92px); }
/* When a #link jumps to a section, stop below the sticky header instead of
   underneath it. --header-h is measured by main.js. */
section[id] { scroll-margin-top: calc(var(--header-h, 74px) + 20px); }
.section--mist { background: var(--mist); }
.section--tight { padding-block: clamp(48px, 5vw, 72px); }

.head { max-width: 660px; margin-bottom: 52px; }
.head--center { margin-inline: auto; text-align: center; }
.head p { margin-top: 16px; }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* --- 5. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 6px;        /* squared off — was a full pill at 999px */
  font-size: .935rem;
  font-weight: 600;
  letter-spacing: .005em;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s, color .2s, border-color .2s, box-shadow .2s;
  white-space: nowrap;
  /* The hover fill is a circle that grows past the button's edges; this keeps
     it inside the rounded corners instead of spilling over them. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(23, 120, 159, .32); }
.btn--primary:hover { background: var(--accent-dk); box-shadow: 0 10px 26px rgba(23, 120, 159, .38); }

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

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

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--accent-soft); }

.btn--outline-light { border-color: rgba(255,255,255,.32); color: #fff; }
.btn--outline-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }

/* --- Hover fill --------------------------------------------------------------
   A circle that grows from the point where the pointer crossed the button's
   edge and shrinks back towards the point where it left, so the sweep always
   runs in the direction the hand was actually moving. main.js sets --bx/--by
   to that point and --bd to the diameter needed to clear the far corner.

   It is a real element rather than a ::before because the origin changes on
   every hover, and a pseudo-element cannot be moved from script without
   rewriting a stylesheet on every pointer move. */
.btn-fill {
  position: absolute;
  left: var(--bx, 50%);
  top:  var(--by, 50%);
  width:  var(--bd, 240px);
  height: var(--bd, 240px);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  z-index: -1;
  background: var(--green);
}
.btn.is-filling .btn-fill { transform: translate(-50%, -50%) scale(1); }

/* Text and icon must sit above the fill. */
.btn > :not(.btn-fill) { position: relative; z-index: 1; }

/* The two variants that carry dark text need it to turn white, but only once
   the green has actually reached it — otherwise the label is white on a still
   white button for the length of the sweep, i.e. invisible. The delay sits on
   the base rule so it applies coming back out too, and the colour is flipped
   rather than faded: a cross-fade leaves the label at pale grey for a tenth of
   a second, which reads as a glitch. Order matches the transition list on
   .btn: transform, background-color, color, border-color, box-shadow. */
.btn--ghost,
.btn--light {
  transition-delay: 0s, 0s, .16s, 0s, 0s;
  transition-duration: .2s, .2s, .01s, .2s, .2s;
}
.btn--ghost:hover,
.btn--light:hover { color: #fff; }
.btn--ghost:hover { border-color: var(--green); }

/* With the fill doing the work, the old background swap would fight it. */
.btn--primary:hover          { background: var(--accent); }
.nav-cta .btn--primary:hover { background: var(--accent); border-color: var(--green); }
/* The header CTA is the one button with a visible border of its own. It turns
   green late, so the ring changes as the fill reaches it rather than ahead of
   it. Fourth value: border-color. */
.nav-cta .btn--primary { transition-delay: 0s, 0s, 0s, .3s, 0s; }
.btn--ghost:hover            { background: transparent; }
.btn--navy:hover             { background: var(--navy); }
.btn--light:hover            { background: #fff; }
.btn--outline-light:hover    { background: transparent; }

/* Someone who has asked their system for less motion still gets the fill —
   it is one short, self-limiting move, not the kind of thing that setting is
   there to stop — just quicker, and without the button lifting as well. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }

  /* Section 2 turns every transition on the site down to .01ms with
     !important for reduced-motion visitors, which flattens the sweep into an
     instant colour change. This is the one exception worth making, so it has
     to shout just as loudly to be heard. */
  .btn-fill { transition-duration: .35s !important; }
}

/* --- Page loader --------------------------------------------------------------
   A white sheet with one spinning arc, over the page until it has finished
   loading. Three separate things make sure it can never strand a visitor on a
   blank screen: it only appears at all once the inline script in <head> has
   marked the page as scripted; main.js clears it on load and again on a timer;
   and the CSS animation below clears it by itself after six seconds even if no
   script ever runs. */
.pp-load { display: none; }
.js .pp-load {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--paper);
  /* Belt and braces: zero-length animation, six seconds late, that leaves the
     sheet hidden. If main.js never arrives this is what uncovers the site. */
  animation: pp-load-safety 0s 6s forwards;
}
.pp-load.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s .35s;
}
@keyframes pp-load-safety { to { opacity: 0; visibility: hidden; } }

.pp-load-mark {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 7px solid transparent;
  border-top-color: var(--accent);
  animation: pp-spin 1s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* A spinner is motion for its own sake to anyone who has asked for less of it,
   and the site underneath is ready either way — so they simply never see it.
   That is also why the sheet is not the thing holding the page back. */
@media (prefers-reduced-motion: reduce) {
  .js .pp-load { display: none; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--navy);
  transition: gap .2s var(--ease), color .2s;
}
.textlink svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.textlink:hover { color: var(--accent-dk); gap: 13px; }

/* --- 6. Header ----------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s;
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 74px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 46px; width: auto; }
.brand-logo--light { height: 52px; }
@media (max-width: 480px) { .brand-logo { height: 38px; } }
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-mid) 55%, var(--accent) 190%);
  display: grid; place-items: center;
  flex: none;
  box-shadow: 0 4px 12px rgba(30, 57, 89, .26);
}
.brand-mark svg { width: 21px; height: 21px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.02em;
}
.brand-sub {
  font-size: .655rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
}

.menu { display: flex; align-items: center; gap: 4px; }
.menu > li > a {
  display: block;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: .935rem;
  font-weight: 500;
  color: var(--ink);
  transition: background-color .2s, color .2s;
}
.menu > li > a:hover { background: var(--mist); }
.menu > li > a.is-active { color: var(--accent-dk); font-weight: 600; }
/* the in-menu CTA is only for the mobile drawer */
.menu > li > a.btn { display: none; border-radius: 6px; }

.nav-cta { display: flex; align-items: center; gap: 10px; }

/* Members link. A quiet outlined pill so it reads as a utility link rather
   than competing with the Get a quote button next to it. */
.nav-member {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .845rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.nav-member svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.nav-member:hover {
  background: var(--mist);
  border-color: var(--accent);
  color: var(--accent-dk);
}
.nav-member.is-active {
  border-color: var(--accent);
  color: var(--accent-dk);
  background: var(--mist);
}

/* The drawer copy of the members link — hidden until the menu collapses,
   the same way the in-menu Get a quote button works. */
.menu > li > a.mob-only { display: none; }

/* Header CTA: smaller and flatter than the in-page buttons. A glowing pill in the
   nav competes with the logo; this sits quietly until you hover it. */
.nav-cta .btn--primary {
  padding: 9px 18px;
  font-size: .855rem;
  font-weight: 600;
  letter-spacing: .01em;
  gap: 8px;
  border: 1px solid var(--accent);
  box-shadow: none;
}
.nav-cta .btn--primary:hover {
  background: var(--accent-dk);
  border-color: var(--accent-dk);
  box-shadow: none;
  transform: none;
}
.nav-cta .btn--primary svg { width: 14px; height: 14px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger span {
  display: block;
  width: 19px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
  transition: background-color .2s;
}
.burger span::before, .burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 19px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s var(--ease), top .2s;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 980px) {
  .burger { display: grid; }
  .nav-cta .btn { display: none; }
  .nav-cta .nav-member { display: none; }
  .menu > li > a.mob-only { display: block; }
  .menu {
    position: fixed;
    inset: 0 0 auto;
    top: var(--header-h, 74px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 10px 20px 24px;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s, transform .22s var(--ease), visibility .22s;
    max-height: calc(100vh - var(--header-h, 74px));
    overflow-y: auto;
  }
  .menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .menu > li > a { padding: 14px 6px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .menu > li:last-child > a { border-bottom: 0; }
  .menu > li > a.btn {
    display: inline-flex;
    margin-top: 18px;
    width: 100%;
    border-bottom: 0;
    border-radius: 6px;
    padding: 14px 28px;
    color: #fff;
  }
  .menu > li > a.btn:hover { color: #fff; }
}

/* --- 7. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(158deg, var(--ink) 0%, var(--navy) 46%, var(--navy-mid) 100%);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(70px, 9vw, 122px);
}
.hero::before {
  content: '';
  position: absolute;
  top: -22%; right: -12%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(23, 120, 159,.30) 0%, rgba(23, 120, 159,0) 68%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 56px;
  align-items: center;
}
.hero h1 { color: #fff; }
.hero h1 em {
  font-style: normal;
  color: var(--accent-lt);
  position: relative;
  white-space: nowrap;
}
.hero h1 em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .04em;
  height: .1em;
  background: rgba(23, 120, 159,.4);
  border-radius: 3px;
}
.hero-sub {
  margin-top: 22px;
  font-size: 1.11rem;
  line-height: 1.75;
  color: rgba(255,255,255,.8);
  max-width: 52ch;
}
.hero .btn-row { margin-top: 34px; }
.hero-proof {
  margin-top: 42px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.hero-proof div strong {
  display: block;
  font-family: var(--display);
  font-size: 1.95rem;
  color: #fff;
  line-height: 1;
}
.hero-proof div span {
  font-size: .82rem;
  color: rgba(255,255,255,.62);
  letter-spacing: .02em;
}

.hero-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: 30px;
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.hero-card h3 { color: #fff; font-size: 1.28rem; }
.hero-card > p { color: rgba(255,255,255,.7); font-size: .93rem; margin-top: 8px; }
.hero-card ul { margin-top: 22px; display: grid; gap: 13px; }
.hero-card li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .94rem;
  color: rgba(255,255,255,.88);
}
.hero-card li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent-lt); }
.hero-card .btn { margin-top: 26px; width: 100%; }

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* --- 8. Page banner (inner pages) ---------------------------------------- */
.banner {
  position: relative;
  background: linear-gradient(150deg, var(--ink) 0%, var(--navy) 70%, var(--navy-mid) 100%);
  color: #fff;
  padding-block: clamp(56px, 7vw, 92px);
  overflow: hidden;
}
.banner::before {
  content: '';
  position: absolute;
  bottom: -60%; left: -6%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(23, 120, 159,.26) 0%, rgba(23, 120, 159,0) 70%);
}
.banner .wrap { position: relative; z-index: 2; }
.banner h1 { color: #fff; }
.banner p { color: rgba(255,255,255,.76); margin-top: 14px; max-width: 60ch; }
.crumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  margin-top: 20px;
}
.crumbs a:hover { color: var(--accent-lt); }
.crumbs span[aria-current] { color: var(--accent-lt); }

/* --- 9. Cards ------------------------------------------------------------ */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  transition: transform .28s var(--ease), box-shadow .28s, border-color .28s;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .955rem; }
.card .textlink { margin-top: auto; padding-top: 20px; }

.icon-badge {
  width: 54px; height: 54px;
  border-radius: 15px;
  background: var(--navy-soft);
  color: var(--navy);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  transition: background-color .28s, color .28s;
}
.icon-badge svg { width: 26px; height: 26px; }
.card:hover .icon-badge { background: var(--accent); color: #fff; }

.card--num { position: relative; }
.card--num .step {
  font-family: var(--display);
  font-size: 2.3rem;
  line-height: 1;
  color: var(--navy-soft);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 14px;
  transition: color .28s;
}
.card--num:hover .step { color: var(--accent); }

/* --- 9b. Process steps ---------------------------------------------------- */
/* Numbered steps sitting on one horizontal rule — no boxes, so the eye reads
   the sequence rather than four separate cards. */
.process .head { margin-bottom: 46px; }
.process .head p  { font-size: .92rem; max-width: 520px; margin-inline: auto; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  counter-reset: step;
}
.step-item {
  position: relative;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
/* the marker that sits on the rule */
.step-item::before {
  content: "";
  position: absolute;
  top: -4px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform .25s var(--ease);
}
.step-item:hover::before { transform: scale(1.5); }

.step-num {
  display: block;
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--accent-dk);
  margin-bottom: 9px;
}
.step-item h3 {
  font-size: .98rem;
  line-height: 1.35;
  margin-bottom: 7px;
}
.step-item p {
  font-size: .845rem;
  line-height: 1.72;
  color: var(--muted);
}

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 26px 24px; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .step-item { padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .step-item::before { transition: none; }
  .step-item:hover::before { transform: none; }
}

/* --- 10. Split feature block --------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}
.split--flip .split-visual { order: -1; }
/* When one column runs much longer than the other, centring leaves the short
   side floating in the middle of nothing. This lines their tops up instead. */
.split--top { align-items: start; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split-visual { order: 0; }
}

.split-visual {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding: 30px 32px;
  color: #fff;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-visual::after {
  content: '';
  position: absolute;
  top: -30%; right: -25%;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 120, 159,.3), transparent 68%);
}
.split-visual > * { position: relative; z-index: 2; }

/* Clickable variant: the engagement panel doubles as the call to action for
   its service. Hover lifts it and lights the arrow row at the foot. */
.split-visual--cta {
  display: flex;
  align-self: start;
  justify-content: flex-start;
  color: #fff;
  cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s;
}
.split-visual--cta:hover,
.split-visual--cta:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.split-visual--cta .metric {
  transition: background-color .25s, border-color .25s;
}
.split-visual--cta:hover .metric {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .26);
}

.metric-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, .17);
  font-family: var(--display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--accent-lt);
  transition: gap .25s var(--ease), color .25s;
}
.metric-cta svg { width: 13px; height: 13px; flex: none; }
.split-visual--cta:hover .metric-cta { gap: 14px; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .split-visual--cta, .split-visual--cta .metric, .metric-cta { transition: none; }
  .split-visual--cta:hover { transform: none; }
}

.metric-stack { display: grid; gap: 14px; }
.metric {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.metric-label { font-size: .84rem; color: rgba(255,255,255,.74); }
.metric-value { font-family: var(--display); font-size: 1.45rem; color: var(--accent-lt); line-height: 1.1; }

/* When the values are short phrases rather than numbers, stat size fights the
   label and wraps badly on a narrow column. Same panel, text-sized values. */
.metric-stack--words .metric { align-items: baseline; }
.metric-stack--words .metric-value {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.35;
  text-align: right;
}
@media (max-width: 520px) {
  .metric-stack--words .metric { flex-direction: column; align-items: flex-start; gap: 4px; }
  .metric-stack--words .metric-value { text-align: left; }
}

/* The engagement panel is a compact card, not a stats board: it sits at the top
   of its column, hugs its own content, and its values are short phrases
   ("Working model"), so they are set at text size rather than stat size. */
.split-visual--cta { min-height: 0; padding: 26px 28px; }
.split-visual--cta .metric-stack { gap: 9px; }
.split-visual--cta .metric { padding: 12px 15px; align-items: baseline; }
.split-visual--cta .metric-label { font-size: .8rem; color: rgba(255,255,255,.72); }
.split-visual--cta .metric-value {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-align: right;
}
.split-visual--cta::after { width: 300px; height: 300px; top: -34%; right: -22%; }

.bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 9px; }
.bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-lt)); }

.ticklist { display: grid; gap: 14px; margin-top: 22px; }
.ticklist li { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; line-height: 1.6; }
.ticklist svg {
  width: 18px; height: 18px;
  flex: none;
  margin-top: 3px;
  color: var(--accent);
}
.ticklist strong { color: var(--ink); display: block; font-size: .93rem; margin-bottom: 2px; }

/* --- 11. Stats band ------------------------------------------------------ */
.stats {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(48px, 6vw, 72px);
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 120% at 80% 50%, rgba(23, 120, 159,.18), transparent 70%);
}
.stats .wrap { position: relative; z-index: 2; }
.stat { text-align: center; padding: 10px; }
.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem);
  color: #fff;
  line-height: 1;
  font-weight: 600;
  /* fixed-width digits, so the number does not jitter while it counts up */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.stat span {
  display: block;
  margin-top: 10px;
  font-size: .87rem;
  color: rgba(255,255,255,.62);
  letter-spacing: .03em;
}

/* --- 12. Testimonials ---------------------------------------------------- */
.quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .28s, transform .28s var(--ease);
}
.quote:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.quote .mark {
  font-family: Georgia, 'Times New Roman', serif;   /* the one place a serif glyph still wins */
  font-size: 4.2rem;
  line-height: .72;
  height: .5em;
  display: block;
  color: var(--accent);
  opacity: .26;
}
.quote blockquote { margin: 14px 0 24px; font-size: 1rem; line-height: 1.75; color: var(--body); }
.quote-by { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--navy), var(--navy-mid));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 600;
  font-size: .93rem;
  flex: none;
  letter-spacing: .02em;
}
.quote-by strong { display: block; color: var(--ink); font-size: .95rem; }
.quote-by span { font-size: .845rem; color: var(--muted); }

/* --- 13. Accordion / FAQ ------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 800px; margin-inline: auto; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.faq-item.is-open { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.faq-q .sign {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--navy-soft);
  color: var(--navy);
  display: grid; place-items: center;
  flex: none;
  transition: transform .25s var(--ease), background-color .25s, color .25s;
}
.faq-q .sign svg { width: 14px; height: 14px; }
.faq-item.is-open .sign { transform: rotate(180deg); background: var(--accent); color: #fff; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 22px 22px; font-size: .96rem; }

/* --- 14. Team ------------------------------------------------------------ */
.person {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  text-align: center;
  transition: transform .28s var(--ease), box-shadow .28s;
}
.person:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.person .avatar {
  width: 82px; height: 82px;
  font-size: 1.5rem;
  font-family: var(--display);
  margin: 0 auto 18px;
}
.person h3 { font-size: 1.12rem; }
.person .role { font-size: .855rem; color: var(--accent-dk); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-top: 5px; }
.person p { font-size: .92rem; margin-top: 13px; }

/* --- 14b. Team photo cards ------------------------------------------------ */
.team { background: var(--paper); }
.team .head h2 .hl { color: var(--accent); }
.team-grid { gap: 20px; }

/* White card on a white section, held together by a soft shadow rather than a
   grey frame — that is what keeps the row looking clean. */
.tcard {
  height: 100%;
  padding: 9px 9px 0;
  background: #fff;
  outline: 2px solid transparent;
  outline-offset: -2px;
  box-shadow: 0 1px 3px rgba(11, 30, 48, .05), 0 10px 28px rgba(11, 30, 48, .06);
  transition: outline-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.tcard:hover,
.tcard:focus-within {
  outline-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(11, 30, 48, .07), 0 22px 46px rgba(11, 30, 48, .11);
}
.tcard-inner {
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.tcard-photo {
  position: relative;
  aspect-ratio: 1 / .89;      /* wider than tall — keeps the card compact */
  overflow: hidden;
  background: linear-gradient(150deg, var(--navy-soft), var(--accent-soft));
  display: grid;
  place-items: center;
}
.tcard-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .5s var(--ease);
}
.tcard:hover .tcard-photo img,
.tcard:focus-within .tcard-photo img { transform: scale(1.04); }

/* shown only when the photo file is missing */
.tcard-initials {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--navy);
  opacity: .55;
}

/* Social bar: one share glyph that opens into the person's links on hover
   or keyboard focus. No JavaScript. */
.tcard-social {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  background: var(--accent);
  color: #fff;
  overflow: hidden;
  transition: background-color .25s;
}
.tcard-share {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  transition: opacity .2s, width .32s var(--ease);
}
.tcard-share svg { width: 13px; height: 13px; }

.tcard-links { display: flex; }
.tcard-links a {
  width: 0;
  height: 30px;
  display: grid;
  place-items: center;
  opacity: 0;
  overflow: hidden;
  transition: width .32s var(--ease), opacity .22s, background-color .2s;
}
.tcard-links svg { width: 13px; height: 13px; flex: none; }
.tcard-links a:hover { background: var(--accent-dk); }

.tcard:hover .tcard-links a,
.tcard:focus-within .tcard-links a { width: 30px; opacity: 1; }
.tcard:hover .tcard-share,
.tcard:focus-within .tcard-share { width: 0; opacity: 0; }

.tcard-body { padding: 17px 15px 20px; }
.tcard-body h3 { font-size: .95rem; line-height: 1.35; }
.tcard-role {
  font-size: .8rem;
  color: var(--muted);
  margin-top: 4px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.tcard-years {
  font-size: .79rem;
  color: var(--accent-dk);
  margin-top: 15px;
}

@media (max-width: 620px) {
  .tcard-photo { aspect-ratio: 1 / .72; }
}
@media (prefers-reduced-motion: reduce) {
  .tcard, .tcard-photo img,
  .tcard-share, .tcard-links a { transition: none; }
  .tcard:hover, .tcard:focus-within { transform: none; }
  .tcard:hover .tcard-photo img,
  .tcard:focus-within .tcard-photo img { transform: none; }
}

/* --- 15. CTA band -------------------------------------------------------- */
.cta {
  background: linear-gradient(140deg, var(--navy) 0%, var(--ink) 100%);
  border-radius: var(--radius-lg);
  color: #fff;
  padding: clamp(38px, 5vw, 62px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta::after {
  content: '';
  position: absolute;
  right: -8%; top: -70%;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 120, 159,.3), transparent 68%);
}
.cta > * { position: relative; z-index: 2; }
.cta h2 { color: #fff; max-width: 18ch; }
.cta p { color: rgba(255,255,255,.75); margin-top: 12px; max-width: 46ch; }

/* --- 16. Forms ----------------------------------------------------------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 15px; }
.field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.field .req { color: var(--accent-dk); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--mist);
  font-size: .88rem;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(23, 120, 159,.13);
}
.field .err { display: block; margin-top: 5px; font-size: .78rem; color: #B3261E; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #B3261E; background: #FEF4F3; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.alert {
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  font-size: .93rem;
  margin-bottom: 22px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.alert svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.alert--ok  { background: #EAF6EE; color: #16613A; border: 1px solid #BFE3CC; }
.alert--bad { background: #FDF0EF; color: #8C1D18; border: 1px solid #F3C9C5; }

.contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.info-list { display: grid; gap: 22px; margin-top: 30px; }
.info-item { display: flex; gap: 16px; align-items: flex-start; }
.info-item .icon-badge { width: 46px; height: 46px; margin: 0; border-radius: 13px; flex: none; }
.info-item .icon-badge svg { width: 21px; height: 21px; }
.info-item h4 { font-size: .95rem; margin-bottom: 3px; }
.info-item p, .info-item a { font-size: .95rem; color: var(--body); }
.info-item a:hover { color: var(--accent-dk); }

/* Form submit: sized to its text. It used to be stretched to the full width of
   the card with an inline style, which made it the loudest thing on the page. */
.form-actions { margin-top: 20px; }
.form-actions .btn { padding: 11px 26px; font-size: .875rem; }
.form-actions .btn svg { width: 15px; height: 15px; }

/* --- 17. Logo strip ------------------------------------------------------ */
.logos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 46px;
  align-items: center;
  justify-content: center;
}
.logos span {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.008em;
  opacity: .5;
  transition: opacity .25s, color .25s;
}
.logos span:hover { opacity: 1; color: var(--navy); }

/* --- 18. Footer ---------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.68);
  padding-top: clamp(52px, 6vw, 78px);
  font-size: .935rem;
}
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: rgba(255,255,255,.45); }
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px;
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

.foot-grid h4 {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.foot-links { display: grid; gap: 11px; }
.foot-links a { transition: color .2s, padding-left .2s; }
.foot-links a:hover { color: var(--accent-lt); padding-left: 4px; }
.foot-about p { margin-top: 18px; max-width: 38ch; line-height: 1.72; }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  display: grid; place-items: center;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.socials a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }

.foot-contact li { display: flex; gap: 12px; margin-bottom: 15px; align-items: flex-start; }
.foot-contact svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--accent); }

.foot-bottom {
  margin-top: 46px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .87rem;
  color: rgba(255,255,255,.5);
}
.foot-bottom a:hover { color: var(--accent-lt); }

/* --- 19. Utilities & motion ---------------------------------------------- */
.center { text-align: center; }
.mt-s { margin-top: 14px; }
.mt-m { margin-top: 26px; }
.mt-l { margin-top: 42px; }
.narrow { max-width: 720px; }
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  z-index: 999;
}
.skip:focus { left: 0; }

/* Content is visible by default; only hidden once JS confirms it can reveal it.
   This keeps every section readable if scripts fail or are blocked. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
/* directional variants — slide in from the side rather than from below */
.js .reveal--left  { transform: translateX(-38px); }
.js .reveal--right { transform: translateX(38px); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Visitors with "reduce motion" on still get the fade, just without the
   travel. Movement is what causes discomfort, not a change in opacity —
   switching the whole effect off left these sections looking static. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    transform: none !important;
    transition: opacity .55s linear !important;
  }
}

/* --- 20. Print ----------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta, .burger { display: none !important; }
  body { color: #000; }
}


/* --- 21. Popular services cards ------------------------------------------- */
/* Replaces the old logo marquee. Card = icon + copy on white, photo filling
   the lower portion, on a softly patterned tint. */
/* Background is drawn entirely in CSS — no image files, nothing to upload.
   Three layers: a top-to-bottom tint, a fine blueprint grid, and two corner
   glows. The tint also separates this section from the white block above and
   the mist "What we do" block below. */
.pservices {
  position: relative;
  /* tighter than the site-wide .section rhythm — this block sits between two
     other sections and does not need the full breathing room */
  padding-block: clamp(44px, 4.6vw, 68px);
  background: linear-gradient(180deg, #EDF4FA 0%, #F7FAFD 40%, #FFFFFF 100%);
  overflow: hidden;
}
/* Blueprint grid. Change 48px to resize the squares; change the .07 alphas to
   make the lines stronger or fainter. The mask fades it out at the edges. */
.pservices::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(30, 57, 89, .07) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(30, 57, 89, .07) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 78% 70% at 50% 45%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 78% 70% at 50% 45%, #000 25%, transparent 80%);
  pointer-events: none;
}
/* Cyan glow top-right, navy glow bottom-left. */
.pservices::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 8%,  rgba(41, 168, 223, .16), transparent 55%),
    radial-gradient(circle at 6%  92%, rgba(30, 57, 89, .09),  transparent 52%);
  pointer-events: none;
}
@media (max-width: 680px) {
  .pservices::before { background-size: 34px 34px, 34px 34px; }
}
.pservices > .wrap { position: relative; z-index: 1; }

.pservices .head { max-width: 720px; margin-bottom: 38px; }
.pservices .head .hl { color: var(--accent); }
.pservices-grid { gap: 30px; }

/* Card structure: a pale outer frame with a white panel sitting inside it,
   square corners, a diagonal wedge behind the icon, and the photo filling the
   bottom of the panel. Hover tints the photo and reveals a corner arrow. */
.pcard {
  height: 100%;
  padding: 12px;
  background: #EDF0F4;
  transition: background-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.pcard:hover {
  background: #DCEFFA;                   /* light blue frame on hover */
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.pcard-inner {
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  color: inherit;
  cursor: pointer;
}
.pcard-inner:focus-visible { outline-offset: -3px; }

.pcard-body {
  position: relative;
  overflow: hidden;
  padding: 30px 26px 22px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* the pale diagonal wedge in the top-left corner */
.pcard-body::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  background: #F1F4F7;
  clip-path: polygon(0 0, 72% 0, 0 100%);
  pointer-events: none;
}

.pcard-icon {
  position: relative;
  color: var(--accent);
  margin-bottom: 20px;
  transition: color .3s, transform .3s var(--ease);
}
.pcard-icon svg { width: 40px; height: 40px; }
.pcard:hover .pcard-icon { color: var(--accent-lt); transform: translateY(-2px); }

/* Small, even type: title ~16px, body ~13px on a generous line-height. */
.pcard h3 {
  position: relative;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 10px;
  transition: color .2s;
}
.pcard:hover h3 { color: var(--accent-dk); }
.pcard p {
  position: relative;
  font-size: .82rem;
  line-height: 1.85;
  color: var(--muted);
  margin-bottom: 4px;
}

.pcard-media {
  position: relative;
  margin: 0 26px 26px;
  height: 172px;
  overflow: hidden;
  background: var(--navy-soft);
}
.pcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
}
.pcard:hover .pcard-media img { transform: scale(1.05); }

/* Hover tint + corner arrow over the photo */
.pcard-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(41, 168, 223, .70);   /* light blue highlight */
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.pcard-go {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.pcard-go svg { width: 42px; height: 42px; }
.pcard:hover .pcard-media::after { opacity: 1; }
.pcard:hover .pcard-go { opacity: 1; transform: none; }

.pservices-more { margin-top: 34px; }

@media (max-width: 980px) {
  .pservices-grid { grid-template-columns: repeat(2, 1fr); }
  .pcard-media { height: 158px; }
}
@media (max-width: 680px) {
  .pservices-grid { grid-template-columns: 1fr; }
  .pservices .brk { display: none; }
  .pcard-body { padding: 26px 22px 18px; }
  .pcard-media { margin: 0 22px 22px; height: 185px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard,
  .pcard-icon,
  .pcard-media img { transition: none; }
  .pcard:hover { transform: none; }
  .pcard:hover .pcard-icon { transform: none; }
  .pcard:hover .pcard-media img { transform: none; }
}

/* --- 21b. What we do — copy left, photo right ----------------------------- */
/* Dark grey panel. Change --pract-bg to restyle the whole section. */
.practices {
  --pract-bg: #2B3138;
  background: var(--pract-bg);
}
.practices h2 { color: #fff; }
.practices h2 .hl { color: var(--accent-lt); }
.practices .eyebrow--bar { color: var(--accent-lt); }
.practices .eyebrow--bar::before { background: var(--accent-lt); }
.practices-grid {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

/* eyebrow with a vertical bar instead of the usual dash */
.eyebrow--bar::before {
  width: 3px;
  height: 17px;
  border-radius: 2px;
}

.practices h2 { margin-bottom: 26px; }

/* short intro set off by a rule down its left edge */
.pullnote {
  border-left: 3px solid var(--accent-lt);
  padding-left: 20px;
  font-size: .965rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .80);
  margin-bottom: 40px;
}

.pract-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 16px;
}
.pract-list a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.pract-icon {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transition: background-color .28s, color .28s, transform .28s var(--ease);
}
.pract-icon svg { width: 28px; height: 28px; }
.pract-list a:hover .pract-icon {
  background: var(--accent-lt);
  color: var(--ink);
  transform: translateY(-4px);
}
.pract-label {
  font-family: var(--display);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.008em;
  color: #fff;
  transition: color .2s;
}
.pract-list a:hover .pract-label { color: var(--accent-lt); }

.practices-visual {
  min-height: 380px;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(145deg, #3A424B, #222930);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}
.practices-visual img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
}

@media (max-width: 980px) {
  .practices-grid { grid-template-columns: 1fr; gap: 40px; }
  .practices-visual { min-height: 300px; order: -1; }
  .practices-visual img { min-height: 300px; }
}
@media (max-width: 620px) {
  .pract-list { grid-template-columns: repeat(2, 1fr); }
  .practices .brk { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pract-icon { transition: none; }
  .pract-list a:hover .pract-icon { transform: none; }
}

/* --- 22. Carousel (case studies) ------------------------------------------ */
.carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.carousel-head .head { margin-bottom: 0; }

.car-arrows { display: flex; gap: 10px; }
.car-arrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}
.car-arrow svg { width: 18px; height: 18px; }
.car-arrow:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.car-arrow:disabled { opacity: .35; cursor: default; }

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 52px) / 3);
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; }
@media (max-width: 980px) { .carousel { grid-auto-columns: calc((100% - 26px) / 2); } }
@media (max-width: 660px)  { .carousel { grid-auto-columns: 86%; } }

/* --- 22b. Case study photo cards ------------------------------------------ */
/* Continuous slider. The track holds two identical runs of cards and shifts
   left by exactly one run, then snaps back — so the motion never appears to
   stop or jump. --cslide-time is the seconds for one full pass: raise it to
   slow the row down, lower it to speed up. */
.cslider {
  --cslide-gap: 26px;
  --cslide-time: 34s;
  overflow: hidden;
  /* let the row run to the window edges rather than stopping at the column */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50% );
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.cslider-track {
  display: flex;
  gap: var(--cslide-gap);
  width: max-content;
  animation: cslide var(--cslide-time) linear infinite;
}
.cslider-half {
  display: flex;
  gap: var(--cslide-gap);
}
.cslider .ccard {
  flex: 0 0 clamp(238px, 21vw, 312px);
}
@keyframes cslide {
  to { transform: translateX(calc(-50% - var(--cslide-gap) / 2)); }
}

/* The site-wide reduced-motion rule stops every animation. You asked for this
   row to keep moving, so it is exempted here. Delete this block to honour the
   visitor's "reduce motion" setting instead — the row then sits still. */
@media (prefers-reduced-motion: reduce) {
  .cslider-track { animation-duration: var(--cslide-time) !important; }
}

.ccard {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, var(--navy) 0%, var(--ink) 100%);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.ccard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.ccard > a {
  position: relative;
  display: block;
  height: 100%;
  min-height: 330px;
  color: #fff;
}
.ccard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.ccard:hover img { transform: scale(1.05); }

/* the dark wash that keeps the title legible over any photo */
.ccard > a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(11, 30, 48, .92) 0%,
    rgba(11, 30, 48, .55) 26%,
    rgba(11, 30, 48, .06) 52%,
    transparent 70%);
}

.ccard-tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: var(--accent);
  color: #fff;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 6px 11px;
  border-radius: 3px;
}

.ccard h3 {
  position: absolute;
  left: 18px; right: 18px; bottom: 20px;
  z-index: 2;
  color: #fff;
  font-size: 1rem;
  line-height: 1.36;
  padding-left: 13px;
  border-left: 3px solid #fff;
  transition: opacity .28s, transform .28s var(--ease);
}
/* the dark caption steps aside for the white panel */
.ccard:hover h3,
.ccard:focus-within h3 { opacity: 0; transform: translateY(8px); }

/* White panel revealed on hover: title in full, plus a Read more link. */
.ccard-panel {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 3;
  display: block;
  background: #fff;
  padding: 16px 16px 14px;
  border-radius: 4px;
  box-shadow: 0 10px 26px rgba(11, 30, 48, .22);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s, transform .3s var(--ease);
  pointer-events: none;
}
.ccard:hover .ccard-panel,
.ccard:focus-within .ccard-panel { opacity: 1; transform: none; }

.ccard-panel-title {
  display: block;
  font-family: var(--display);
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -.012em;
  color: var(--ink);
}
.ccard-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent);
}
.ccard-more svg { width: 13px; height: 13px; }

@media (max-width: 660px) {
  .ccard > a { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .ccard, .ccard img, .ccard h3, .ccard-panel { transition: none; }
  .ccard:hover { transform: none; }
  .ccard:hover img { transform: none; }
}

.case-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  color: #fff;
  isolation: isolate;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.case-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.case-card::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(150deg, var(--navy) 0%, var(--ink) 100%);
}
.case-card::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 78% 18%, rgba(41,168,223,.42), transparent 58%),
    radial-gradient(circle at 12% 92%, rgba(23,120,159,.34), transparent 62%);
  transition: opacity .3s;
}
.case-card:hover::after { opacity: .72; }
.case-tag {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  margin-bottom: auto;
}
.case-card h3 { color: #fff; margin-bottom: 10px; }
.case-card p { color: rgba(255,255,255,.78); font-size: .93rem; margin-bottom: 16px; }
.case-result {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--accent-lt);
  line-height: 1;
}
.case-result small { font-family: var(--sans); font-size: .8rem; color: rgba(255,255,255,.7); font-weight: 500; }

/* --- 23. Insight / post cards --------------------------------------------- */
.post {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .28s var(--ease), box-shadow .28s, border-color .28s;
}
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.post-art {
  height: 140px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, var(--accent) 160%);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.post-art svg {
  width: 32px; height: 32px;
  color: rgba(255, 255, 255, .62);
  position: relative;
  z-index: 1;
  transition: color .28s, transform .28s var(--ease);
}
.post:hover .post-art svg { color: #fff; transform: scale(1.08); }
.post-art::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 26px 26px;
}
.post-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
/* Category over date rather than side by side — the longer practice names
   wrapped mid-line and left every card a different height. */
.post-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: .705rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-dk);
  font-weight: 700;
  margin-bottom: 11px;
}
.post-meta .dot { display: none; }
.post-meta time {
  color: var(--muted);
  font-weight: 500;
  font-size: .69rem;
  letter-spacing: .05em;
}
.post h3 { font-size: 1rem; line-height: 1.38; margin-bottom: 10px; }
.post p { font-size: .865rem; line-height: 1.72; color: var(--muted); }
.post .textlink { margin-top: auto; padding-top: 16px; font-size: .845rem; }

@media (prefers-reduced-motion: reduce) {
  .post-art svg { transition: none; }
  .post:hover .post-art svg { transform: none; }
}

/* --- 24. Team on dark ------------------------------------------------------ */
.person .socials { justify-content: center; margin-top: 16px; }
.person .socials a {
  width: 34px; height: 34px;
  border-color: var(--line);
  color: var(--muted);
}
.person .socials a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.person .socials svg { width: 15px; height: 15px; }


/* --- 25. Full-bleed hero slider -------------------------------------------- */
.hslider {
  position: relative;
  background: var(--ink);
  min-height: clamp(560px, 84vh, 820px);
  display: grid;
  isolation: isolate;
}
.hslide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
/* first slide is visible with no JS at all */
.hslide:first-child, .hslide.is-active { opacity: 1; visibility: visible; }
.js .hslide:first-child:not(.is-active) { opacity: 0; visibility: hidden; }

.hslide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform 6.5s linear;
}
.hslide.is-active .hslide-bg { transform: scale(1); }
.hslide::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,30,48,.72) 0%, rgba(11,30,48,.55) 45%, rgba(11,30,48,.82) 100%);
}
@media (prefers-reduced-motion: reduce) { .hslide-bg { transform: none; transition: none; } }

.hslide-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding-block: clamp(84px, 11vh, 132px);
  padding-inline: clamp(24px, 9vw, 96px);
}
.htag {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hslide h1 { color: #fff; margin-bottom: 18px; }
.hslide h1 .thin { font-weight: 400; display: block; }
.hslide p {
  color: rgba(255,255,255,.82);
  font-size: 1.1rem;
  max-width: 60ch;
  margin: 0 auto 32px;
}
.hslide .btn-row { justify-content: center; }
.hslide .btn--primary { box-shadow: 0 10px 28px rgba(11, 30, 48, .38); }
.hslide .btn--primary:hover { box-shadow: 0 14px 34px rgba(11, 30, 48, .46); }

/* slide-in animation for the active slide's content */
.js .hslide-inner > * { opacity: 0; transform: translateY(22px); }
.js .hslide.is-active .hslide-inner > * {
  animation: hrise .8s var(--ease) forwards;
}
.js .hslide.is-active .hslide-inner > *:nth-child(1) { animation-delay: .15s; }
.js .hslide.is-active .hslide-inner > *:nth-child(2) { animation-delay: .28s; }
.js .hslide.is-active .hslide-inner > *:nth-child(3) { animation-delay: .41s; }
.js .hslide.is-active .hslide-inner > *:nth-child(4) { animation-delay: .54s; }
@keyframes hrise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .hslide-inner > * { opacity: 1; transform: none; animation: none !important; }
}

/* edge arrows */
.harrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 14px;
  color: rgba(255,255,255,.72);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, gap .2s var(--ease);
}
.harrow:hover { color: #fff; gap: 18px; }
.harrow svg { width: 20px; height: 20px; }
.harrow::after {
  content: '';
  width: 1px;
  height: 108px;
  background: rgba(255,255,255,.3);
  transform: rotate(14deg);
  flex: none;
}
.harrow--prev { left: clamp(8px, 3vw, 48px); }
.harrow--next { right: clamp(8px, 3vw, 48px); flex-direction: row-reverse; }
.harrow--next::after { transform: rotate(-14deg); }
@media (max-width: 900px) {
  .harrow { padding: 10px; font-size: 0; gap: 0; }
  .harrow::after { display: none; }
  .harrow svg { width: 26px; height: 26px; }
}
/* below this the arrows would sit on top of the copy — swipe + dots instead */
@media (max-width: 720px) { .harrow { display: none; } }

/* dots */
.hdots {
  display: none;              /* desktop uses the edge arrows; dots would crowd the CTA */
  position: absolute;
  z-index: 5;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  gap: 10px;
}
.hdots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.34);
  cursor: pointer;
  transition: background-color .25s, width .25s var(--ease);
}
.hdots button[aria-current="true"] { background: var(--accent-lt); width: 30px; border-radius: 99px; }

/* --- 26. Feature strip overlapping the hero -------------------------------- */
.feature-strip { background: var(--ink); padding-bottom: clamp(42px, 5vw, 66px); }
.feature-strip .grid { margin-top: -50px; position: relative; z-index: 6; gap: 16px; }
@media (max-width: 620px) { .feature-strip .grid { margin-top: -42px; } }
@media (max-width: 720px) { .hdots { display: flex; } }

.fcard {
  background: #fff;
  border-radius: 5px;
  padding: 15px 17px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(11, 30, 48, .08);
  transition: background-color .28s, box-shadow .28s;
}

/* Hover: the whole card fades to solid colour at once — no sweep, no wipe —
   and every part of it flips in the same breath. The card does not lift; the
   colour change is the whole gesture, which is what makes it read as one
   surface rather than a stack of moving parts. */
.fcard:hover { background: var(--accent); box-shadow: var(--shadow-lg); }
.fcard:hover h3 { color: #fff; border-bottom-color: rgba(255, 255, 255, .34); }
.fcard:hover p  { color: rgba(255, 255, 255, .85); }

/* The icon tile drops to the darker teal so it still reads as a tile against
   the card rather than dissolving into it. */
.fcard:hover .icon-badge { background: var(--accent-dk); color: #fff; }
.fcard .icon-badge { margin: 0; width: 36px; height: 36px; border-radius: 5px; flex: none; align-self: center; }
.fcard .icon-badge svg { width: 17px; height: 17px; }
/* h3 grows to fill the card, so its underline lands at the same height on all
   three cards even when one title wraps to a second line. */
.fcard h3 {
  flex: 1;
  transition: color .28s, border-color .28s;
  font-size: .9rem;
  line-height: 1.32;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.005em;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.fcard p { font-size: .78rem; line-height: 1.4; margin: 0; color: var(--muted); transition: color .28s; }
.fcard > span:nth-of-type(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fcard .arrow-btn {
  margin-left: auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--navy);
  flex: none;
  align-self: center;
  transition: background-color .2s, color .2s, border-color .2s;
}
.fcard .arrow-btn svg { width: 11px; height: 11px; }
/* The arrow inverts: an outlined circle on white becomes a solid white disc
   with the arrow in the card's own colour. */
.fcard:hover .arrow-btn { background: #fff; border-color: #fff; color: var(--accent); }



/* --- 27. About block with floating client orb ------------------------------ */
h2 .thin, h1 .thin { font-weight: 300; display: block; letter-spacing: -.015em; }

.about-visual { position: relative; padding-right: clamp(0px, 6vw, 78px); }
.about-photo {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.client-orb {
  position: absolute;
  right: 0;
  top: 18%;
  width: min(268px, 46%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, #1E93C4 0%, var(--accent) 46%, var(--navy) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: clamp(18px, 2.4vw, 30px);
  /* white ring keeps the badge legible over any photo you drop in */
  box-shadow: 0 0 0 5px rgba(255,255,255,.94), 0 18px 44px rgba(11, 30, 48, .34);
}
.client-orb h3 {
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(.86rem, .72rem + .35vw, 1rem);
  font-weight: 700;
  line-height: 1.38;
}
.client-orb h3 .num { color: var(--accent-lt); }
.orb-sep {
  width: 72%;
  height: 1px;
  background: rgba(255,255,255,.3);
  margin: clamp(10px, 1.4vw, 15px) auto;
}
.orb-avatars { display: flex; justify-content: center; padding-left: 9px; }
.orb-avatars span {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  margin-left: -9px;
  background: var(--navy);
  display: grid; place-items: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.orb-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(.94rem, .8rem + .3vw, 1.06rem);
  margin-top: clamp(8px, 1.2vw, 13px);
}
.orb-role { font-size: .74rem; color: rgba(255,255,255,.76); letter-spacing: .04em; }

@media (max-width: 900px) {
  .about-visual { padding-right: 0; margin-bottom: 44px; }
  .client-orb { right: 3%; top: auto; bottom: -38px; width: 200px; }
}
@media (max-width: 560px) {
  /* overlapping a narrow phone screen crops the photo badly — stack instead */
  .about-visual { margin-bottom: 0; }
  .client-orb {
    position: static;
    width: 208px;
    margin: 22px auto 0;
  }
  .orb-avatars span { width: 32px; height: 32px; font-size: .66rem; }
}

/* checklist */
.checks { display: grid; gap: 12px; margin: 26px 0 32px; }
.checks li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink); }
.checks svg { width: 20px; height: 20px; flex: none; color: var(--accent); }

/* Rows with a subject icon on the left of each label. */
.checks--split { gap: 14px; }
.checks--split li { gap: 14px; }
.check-ico {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-dk);
  display: grid;
  place-items: center;
}
.check-ico svg { width: 19px; height: 19px; color: inherit; }


/* --- 28. Nav dropdown ------------------------------------------------------ */
.menu li.has-sub { position: relative; }
.menu li.has-sub > a { display: inline-flex; align-items: center; gap: 6px; }
.menu .caret { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.menu li.has-sub:hover .caret,
.menu li.has-sub:focus-within .caret { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 262px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s var(--ease), visibility .2s;
  z-index: 95;
}
.menu li.has-sub:hover .submenu,
.menu li.has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: background-color .18s, color .18s;
}
.submenu a:hover { background: var(--mist); color: var(--accent-dk); }
.submenu a[aria-current="page"] { color: var(--accent-dk); font-weight: 600; }
.submenu li + li { margin-top: 1px; }

@media (max-width: 980px) {
  .menu li.has-sub > a { justify-content: space-between; width: 100%; }
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0 0 10px 14px;
    border-left: 2px solid var(--line);
    margin: 6px 0 6px 6px;
  }
  .submenu a { padding: 9px 10px; font-size: .93rem; }
  .menu .caret { display: none; }
}

/* --- 29. Detail page: sidebar + main --------------------------------------- */
.banner--image { background-size: cover; background-position: center; }
.banner--image::before { display: none; }

.detail-grid {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}
@media (max-width: 980px) { .detail-grid { grid-template-columns: 1fr; } }

.side { position: sticky; top: 106px; display: grid; gap: 22px; }
@media (max-width: 980px) { .side { position: static; } }

.side-card {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.side-card h3 { font-size: 1.14rem; margin-bottom: 18px; }
.side-list { display: grid; gap: 8px; }
.side-list .service-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.4;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.side-list .service-link svg { width: 15px; height: 15px; flex: none; color: var(--accent); transition: color .2s, transform .2s var(--ease); }
.side-list .service-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateX(3px);
}
.side-list .service-link:hover svg { color: #fff; transform: translateX(3px); }

.side-cta {
  background: linear-gradient(150deg, var(--navy) 0%, var(--ink) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 28px 24px;
}
.side-cta h3 { color: #fff; font-size: 1.1rem; margin-bottom: 10px; }
.side-cta p { color: rgba(255,255,255,.76); font-size: .92rem; margin-bottom: 20px; }

.detail-main > * + * { margin-top: 20px; }
.detail-hero { width: 100%; border-radius: var(--radius); margin-bottom: 30px; }

.benefit-block {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: center;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin-block: 32px;
}
.benefit-block img { border-radius: var(--radius-sm); width: 100%; }
.benefit-block h3 { margin-bottom: 16px; }
.benefit-block .checks { margin: 0; }
@media (max-width: 720px) { .benefit-block { grid-template-columns: 1fr; } }

/* --- 30. Enquiry dialog ---------------------------------------------------- */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(11,30,48,.62); backdrop-filter: blur(3px); }
.modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-lg);
  animation: modalIn .26s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .modal-panel { animation: none; } }
.modal-panel h3 { margin-bottom: 6px; padding-right: 40px; }
#enquiryTopic { color: var(--accent-dk); }
.modal-x {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.modal-x svg { width: 16px; height: 16px; }
.modal-x:hover { background: var(--ink); color: #fff; }
body.modal-open { overflow: hidden; }


/* --- 31. Service detail typography ----------------------------------------- */
.detail-h {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 1.06rem;
}
.detail-main > .detail-h + .deflist { margin-top: 18px; }

.deflist { display: grid; gap: 18px; }
.deflist li {
  position: relative;
  padding-left: 22px;
  font-size: .875rem;
  line-height: 1.75;
}
.deflist li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.deflist strong { display: block; color: var(--ink); font-weight: 700; font-size: .93rem; margin-bottom: 3px; }

.checks--rich { gap: 16px; }
.checks--rich li { align-items: flex-start; font-weight: 400; color: var(--body); font-size: .875rem; line-height: 1.75; }
.checks--rich svg { margin-top: 4px; }
.checks--rich strong { display: block; color: var(--ink); font-weight: 700; font-size: .93rem; }

.pullquote {
  margin-top: 36px;
  padding: 24px 26px;
  border-left: 3px solid var(--accent);
  background: var(--mist);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .94rem;
  line-height: 1.72;
  color: var(--ink);
}

/* Stacked variant: picture on top, then the heading, an optional line of
   intro, and the list running the full width underneath. */
.benefit-block--stack {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  margin-block: 34px;
}
.benefit-block--stack > img {
  width: 100%;
  max-width: 430px;
  margin-bottom: 26px;
}
.benefit-block--stack h3 { margin-bottom: 12px; }
.benefit-intro {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--body);
  margin-bottom: 18px;
  max-width: 62ch;
}

/* label and text on one line, separated by a colon */
.benefit-block--stack .checks--rich strong {
  display: inline;
  font-size: inherit;
}
.benefit-block--stack .checks--rich strong::after {
  content: ":\00a0";
  font-weight: 400;
  color: var(--body);
}

.side-siblings { display: grid; gap: 2px; }
.side-siblings a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 500;
  color: var(--body);
  transition: background-color .18s, color .18s, padding-left .18s;
}
.side-siblings a:hover { background: #fff; color: var(--accent-dk); padding-left: 17px; }

/* the sidebar item is a link on the overview page and a button on detail pages */
a.service-link { text-decoration: none; }

/* --- 31. Members area ------------------------------------------------------ */
/* Login, registration, dashboard, documents and the admin screens. */

.auth-card {
  max-width: 460px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--shadow-sm);
}
.auth-card--wide { max-width: 720px; }
.auth-card h1 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 1.95rem); margin-bottom: 8px; }
.auth-lede { font-size: .9rem; color: var(--muted); margin-bottom: 24px; }
.auth-alt { margin-top: 22px; font-size: .875rem; color: var(--muted); }
.auth-alt a { color: var(--accent-dk); font-weight: 600; }
.field .hint { display: block; margin-top: 5px; font-size: .78rem; color: var(--muted); }

/* header row shared by every members / admin page */
.mem-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.mem-head h1 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 1.95rem); }
.mem-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.mem-nav a {
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  transition: background-color .2s, color .2s, border-color .2s;
}
.mem-nav a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* The page you are on. Filled rather than outlined, so the nav tells you where
   you are without having to read the heading. */
.mem-nav a.is-on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  cursor: default;
}

/* Admin entries are a different job from the member ones, so they read as a
   separate group: tinted, and set off by a rule on the first of them. */
.mem-nav .mem-adm {
  color: var(--accent-dk);
  background: var(--mist);
}
.mem-nav .mem-adm:first-of-type { margin-left: 14px; box-shadow: -8px 0 0 -7.5px var(--line); }
.mem-nav .mem-adm.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.mem-nav .mem-out { color: var(--muted); margin-left: auto; }
.mem-nav .mem-out:hover { background: #B3261E; border-color: #B3261E; color: #fff; }

@media (max-width: 620px) {
  .mem-nav .mem-out { margin-left: 0; }
  .mem-nav .mem-adm:first-of-type { margin-left: 0; box-shadow: none; }
}

.mem-cards { gap: 20px; }
.mem-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.mem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.mem-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-dk);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.mem-ico svg { width: 22px; height: 22px; }
.mem-card h3 { font-size: 1rem; margin-bottom: 6px; }
.mem-card p { font-size: .855rem; color: var(--muted); }

.mem-h2 { font-size: 1.06rem; margin: 40px 0 14px; }
.mem-list { display: grid; gap: 2px; }
.mem-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: .875rem;
}
.mem-list a { font-weight: 600; color: var(--navy); }
.mem-list a:hover { color: var(--accent-dk); }
.mem-list time { color: var(--muted); white-space: nowrap; }

/* document list */
.doc-list { display: grid; gap: 12px; }
.doc-list li {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 16px 18px;
}
.doc-ico {
  width: 40px; height: 40px; flex: none;
  border-radius: 10px; background: var(--navy-soft); color: var(--navy);
  display: grid; place-items: center;
}
.doc-ico svg { width: 20px; height: 20px; }
.doc-body { flex: 1 1 auto; min-width: 0; }
.doc-body h3 { font-size: .95rem; margin-bottom: 3px; }
.doc-body p { font-size: .83rem; color: var(--muted); }
.doc-meta { font-size: .75rem !important; letter-spacing: .02em; margin-top: 4px; }
.doc-dl { flex: none; padding: 9px 18px; font-size: .82rem; }
.doc-dl svg { width: 14px; height: 14px; }

.prof-grid { align-items: start; gap: 24px; }

/* admin tables */
.table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .855rem; }
.adm-table th {
  text-align: left; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.adm-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-table .muted { color: var(--muted); font-size: .8rem; }
.adm-table .note { font-style: italic; }
/* This cell used to be display:flex. A table cell set to flex drops out of the
   table's own layout — the browser makes an anonymous cell to fill the row, and
   the flex box then draws its bottom border at its own height rather than the
   row's. That is why the rule under the last column sat at a different height
   from the rest of the row. Keeping the cell a real table cell and laying the
   buttons out with inline-block fixes the alignment. */
.adm-actions { white-space: normal; }
.adm-actions > * { display: inline-block; vertical-align: middle; margin: 0 8px 0 0; }
.adm-actions > *:last-child { margin-right: 0; }
.adm-actions > form { margin-bottom: 0; }

.linkbtn {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-size: .82rem; font-weight: 600; color: var(--accent-dk);
}
.linkbtn:hover { text-decoration: underline; }
.linkbtn--danger { color: #B3261E; }

.badge {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  background: var(--navy-soft); color: var(--navy);
}
.badge--active    { background: #EAF6EE; color: #16613A; }
.badge--pending   { background: #FFF4E5; color: #8A5300; }
.badge--suspended { background: #FDF0EF; color: #8C1D18; }

@media (max-width: 620px) {
  .doc-list li { flex-wrap: wrap; }
  .doc-dl { width: 100%; justify-content: center; }
}


/* --- 32. Paid documents: prices, orders, payment ---------------------------
   Money is deliberately understated. A price is information the member needs,
   not something to shout, so it sits inline with the title rather than in a
   coloured badge. */

.doc-price {
  display: inline-block;
  margin-left: 9px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--mist);
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--accent-dk);
  vertical-align: middle;
}
.doc-owned {
  display: inline-block;
  margin-left: 9px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1a7f4b;
  vertical-align: middle;
}

/* Orders in progress, listed above the catalogue so an unfinished payment is
   the first thing a returning member sees. */
.order-strip { margin-bottom: 30px; }
.order-mini { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.order-mini li {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 15px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .88rem;
}
.order-mini a { font-weight: 600; color: var(--ink); }
.order-mini a:hover { color: var(--accent-dk); }

/* Status pill. One shape, five colours, used on the member page and in the
   admin table so a status means the same thing wherever it appears. */
.ostat {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ostat--awaiting_payment { background: #fff4e0; color: #8a6100; }
.ostat--in_review        { background: #e6f1fa; color: #17789f; }
.ostat--paid             { background: #e8f6ee; color: #1a7f4b; }
.ostat--rejected         { background: #fdecea; color: #b3261e; }
.ostat--cancelled        { background: var(--mist); color: var(--muted); }

.order-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) { .order-grid { grid-template-columns: 1fr; } }

.order-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 26px;
}
.order-card--pay { background: var(--mist); }
.order-card h3 { margin: 0 0 14px; font-size: 1rem; }
.order-title { font-size: 1.15rem; margin: 12px 0 18px; }

.order-facts { margin: 0; display: grid; gap: 10px; }
.order-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.order-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.order-facts dt { color: var(--muted); font-size: .85rem; }
.order-facts dd { margin: 0; font-weight: 600; font-size: .9rem; text-align: right; }
.order-amount { font-family: var(--display); font-size: 1.05rem; font-weight: 700; }

/* The reference is copied by hand into a banking app, so it is set in a
   monospace face where 8 and B cannot be mistaken for each other. */
.oref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  letter-spacing: .06em;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 7px;
}
.order-card--pay .oref { background: #fff; }

.order-ref-note { font-size: .88rem; margin: 16px 0 0; }
.order-done { color: #1a7f4b; font-size: .92rem; margin: 0 0 16px; }
.order-wait { color: var(--accent-dk); font-size: .92rem; margin: 0; }
.order-bad  { color: #b3261e; font-size: .92rem; margin: 0 0 10px; }
.order-cancel { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Price entry: the currency sits inside the field so the number lines up with
   the number in every other row. */
.price-input {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}
.price-input span {
  padding: 0 8px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--mist);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.price-input input {
  border: 0;
  padding: 8px 10px;
  width: 92px;
  font: inherit;
  font-size: .88rem;
}
.price-input input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.price-form { display: flex; align-items: center; gap: 8px; }

.adm-note {
  display: block;
  width: 100%;
  min-width: 150px;
  margin-bottom: 7px;
  padding: 6px 9px;
  font: inherit;
  font-size: .82rem;
  border: 1px solid var(--line);
  border-radius: 5px;
}

/* Count of orders waiting, on the Orders nav button. */
.mem-count {
  display: inline-block;
  margin-left: 7px;
  min-width: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b3261e;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  text-align: center;
  line-height: 17px;
}
.mem-nav a.is-on .mem-count { background: #fff; color: var(--navy); }

/* What each notification does, listed on the Orders page. */
.mail-list { list-style: disc; margin: 0 0 20px; padding-left: 19px; font-size: .88rem; color: var(--body); }
.mail-list li { margin-bottom: 5px; }
.mail-list strong { color: var(--ink); }


/* --- 33. Membership types --------------------------------------------------
   Three or four cards, one of them the member's own. The current membership is
   marked rather than the most expensive one, because this page answers "what
   do I have" before it answers "what could I buy". */

.tier-now {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 24px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .92rem;
}
.tier-now-label { color: var(--muted); font-size: .82rem; }
.tier-now strong { font-family: var(--display); font-size: 1.05rem; }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 22px;
}
.tier-card--mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tier-flag {
  position: absolute;
  top: -10px; left: 20px;
  background: var(--accent);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.tier-card h2 { font-size: 1.1rem; margin: 0 0 8px; }
.tier-price {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ink);
}
.tier-price span {
  display: block;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.tier-blurb { font-size: .86rem; color: var(--body); margin: 0 0 12px; }
.tier-opens {
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent-dk);
  margin: 0 0 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
/* Push every button onto the same line, whatever the blurb length. */
.tier-card form, .tier-card .tier-note { margin-top: auto; }
.tier-note { font-size: .82rem; color: var(--muted); }
.tier-card .btn { width: 100%; justify-content: center; }
.tier-foot { font-size: .85rem; margin-top: 22px; max-width: 660px; }

/* The level a document needs, shown beside its title. */
.doc-tier {
  display: inline-block;
  margin-left: 9px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #eef4f8;
  border: 1px solid #cfe0ea;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-dk);
  vertical-align: middle;
}

/* Admin: setting a member's type, and editing the types themselves. */
.tier-set { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tier-set select, .tier-set input[type=date] {
  font: inherit;
  font-size: .8rem;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}
.tier-lapsed {
  display: inline-block;
  margin-top: 4px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #b3261e;
}
.tier-rank { width: 58px; font: inherit; font-size: .85rem; padding: 6px 8px;
             border: 1px solid var(--line); border-radius: 5px; }
.tier-blurb-in { width: 100%; min-width: 170px; font: inherit; font-size: .82rem;
                 padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; }
.adm-table td select, .adm-table td input[type=text] {
  font: inherit; font-size: .84rem; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 5px; background: #fff;
}
.adm-table tr.is-off { opacity: .55; }
.adm-table tr.is-off td:first-child::after { content: ' (hidden)'; color: var(--muted); font-size: .78rem; }

/* Membership orders in the admin queue. */
.okind {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--mist);
  border: 1px solid var(--line);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The switch-it-on banner: message and button on one line, wrapping on narrow
   screens. The button is the point of the banner, so it does not hide at the
   end of a paragraph. */
.shop-upgrade { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.shop-upgrade span { flex: 1; min-width: 260px; }
.shop-upgrade form { margin: 0; flex: none; }
.shop-upgrade .btn { white-space: nowrap; }

/* A neutral note, for telling somebody how a page behaves rather than warning
   them about it. */
.alert--info {
  background: #eef4f8;
  border: 1px solid #cfe0ea;
  color: var(--ink);
}


/* --- 34. Per-download pricing and the public library -----------------------
   A discounted price has to show both numbers or the member cannot tell they
   are being given anything. The old price is struck through and set small; the
   price they actually pay keeps the emphasis. */

.doc-was {
  display: inline-block;
  margin-left: 9px;
  font-size: .76rem;
  color: var(--muted);
  text-decoration: line-through;
  vertical-align: middle;
}
.doc-save {
  display: inline-block;
  margin-left: 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #1a7f4b;
  vertical-align: middle;
}
/* How long a spent payment can still be re-downloaded. Quiet: it is
   reassurance, not a countdown to worry about. */
.doc-window {
  display: inline-block;
  margin-left: 7px;
  font-size: .72rem;
  color: var(--muted);
  vertical-align: middle;
}

.pct-input { display: inline-flex; align-items: center; border: 1px solid var(--line);
             border-radius: 5px; background: #fff; overflow: hidden; }
.pct-input input { border: 0; padding: 6px 8px; width: 58px; font: inherit; font-size: .84rem; }
.pct-input input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.pct-input span { padding: 0 8px; align-self: stretch; display: flex; align-items: center;
                  font-size: .8rem; font-weight: 700; color: var(--muted); background: var(--mist); }

/* Public library */
.lib-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding: 24px 26px;
  margin-bottom: 28px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.lib-cta h2 { font-size: 1.15rem; margin: 0 0 6px; }
.lib-cta p { margin: 0; font-size: .9rem; color: var(--body); max-width: 560px; }
.lib-cta .btn-row { flex: none; }
.lib-list .doc-locked { color: var(--muted); }
.lib-list .doc-locked svg { width: 14px; height: 14px; }
.lib-list .doc-locked:hover { color: var(--accent-dk); border-color: var(--accent); }
.lib-note { font-size: .85rem; margin-top: 22px; max-width: 660px; }


/* --- 35. Download reporting ------------------------------------------------ */

.rep-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.rep-stats > div {
  flex: 1 1 150px;
  padding: 16px 18px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rep-n { font-family: var(--display); font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.rep-stats span:last-child { font-size: .78rem; color: var(--muted); }

/* Filters sit on one line at desktop and stack cleanly when they cannot. */
.rep-filter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 14px;
}
.rep-filter .field { margin: 0; flex: 0 1 150px; }
.rep-filter .rep-search { flex: 1 1 220px; }
.rep-filter label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
                    text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.rep-filter input, .rep-filter select {
  width: 100%; font: inherit; font-size: .85rem; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 5px; background: #fff;
}
.rep-actions { display: flex; gap: 8px; flex: none; }
.rep-actions .btn { padding: 9px 18px; font-size: .85rem; }

.rep-export {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px; font-size: .85rem;
}
.rep-export .btn { padding: 8px 16px; font-size: .82rem; }
/* A disabled export still reads as a button, so it must not look clickable. */
.rep-export .btn.is-off { opacity: .45; pointer-events: none; }

/* How somebody came by a download. Same shape as the order status pill. */
.acc {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
}
.acc--free      { background: var(--mist);  color: var(--muted); }
.acc--included  { background: #e6f1fa;      color: #17789f; }
.acc--purchased { background: #e8f6ee;      color: #1a7f4b; }
.acc--admin     { background: #fff4e0;      color: #8a6100; }

/* Prompt shown while only the free level exists. */
.tier-starter { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tier-starter span { flex: 1; min-width: 280px; }
.tier-starter form { margin: 0; flex: none; }
.tier-starter .btn { white-space: nowrap; }


/* --- 36. Charts -------------------------------------------------------------
   Grid, axes and labels are recessive; the data is the only saturated thing on
   the page. Every value is printed next to its mark, because two of the
   categorical hues sit under 3:1 on white and colour must never be the only
   thing carrying meaning. */

.rep-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.rep-tabs a {
  padding: 8px 16px; font-size: .85rem; font-weight: 600; color: var(--navy);
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  transition: background-color .2s, color .2s, border-color .2s;
}
.rep-tabs a:hover { background: var(--mist); }
.rep-tabs a.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

.ch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.ch-card {
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px;
}
.ch-card--wide { grid-column: 1 / -1; }
.ch-card header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.ch-card h2 { font-size: .95rem; margin: 0; }
.ch-empty { color: var(--muted); font-size: .88rem; margin: 0; }
.ch-note { font-size: .82rem; max-width: 660px; margin: 0 0 8px; }

.ch-period { display: flex; gap: 2px; }
.ch-period a {
  font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: 5px;
  color: var(--muted);
}
.ch-period a:hover { background: var(--mist); color: var(--ink); }
.ch-period a.is-on { background: var(--mist); color: var(--accent-dk); }

/* Chart-type switch -----------------------------------------------------------
   All three shapes are in the page; the switch shows one. Without JavaScript
   the buttons would do nothing, so they are hidden until the script that runs
   them has loaded and set .js on <html>. The default pane carries .is-on from
   the server, so a scripts-off page still shows a chart. */
.ch-pick-btns { display: none; }
.js .ch-pick-btns {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin-bottom: 14px;
  background: var(--mist);
  border-radius: 6px;
}
.ch-pick-btns button {
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  padding: 4px 11px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.ch-pick-btns button:hover { color: var(--ink); }
.ch-pick-btns button.is-on {
  background: #fff;
  color: var(--accent-dk);
  box-shadow: 0 1px 2px rgba(11, 30, 48, .12);
}
.ch-pick-btns button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ch-pane { display: none; }
.ch-pane.is-on { display: block; }

/* Empty overview. Seven cards each saying "nothing to show" is noise pretending
   to be information; one panel that says why, and what would change it, is not. */
.ch-blank {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px 32px;
  margin-bottom: 24px;
  max-width: 720px;
}
.ch-blank h2 { font-size: 1.02rem; margin: 0 0 10px; }
.ch-blank p { font-size: .9rem; line-height: 1.6; margin: 0; color: var(--body); }
.ch-blank a { color: var(--accent-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Donut */
.ch-donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ch-donut { width: 168px; height: 168px; flex: none; }
.ch-slice { transition: opacity .15s; }
.ch-donut:hover .ch-slice { opacity: .45; }
.ch-donut .ch-slice:hover { opacity: 1; }
.ch-donut-n { font-family: var(--display); font-size: 22px; font-weight: 700; fill: #0b1e30; }
.ch-donut-l { font-size: 10px; fill: #5b6b7c; letter-spacing: .06em; text-transform: uppercase; }

.ch-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; display: grid; gap: 7px; }
.ch-legend li { display: flex; align-items: center; gap: 9px; font-size: .84rem; }
.ch-key { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.ch-legend-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-legend-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-legend-v em { font-style: normal; color: var(--muted); font-weight: 500; font-size: .8em; }

/* Horizontal bars */
.ch-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ch-bars li { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: 11px;
              align-items: center; font-size: .83rem; }
.ch-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--body); }
.ch-bar-track { height: 13px; background: var(--mist); border-radius: 3px; overflow: hidden; }
.ch-bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; transition: opacity .15s; }
.ch-bars li:hover .ch-bar-fill { opacity: .75; }
.ch-bar-v { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }

/* Columns over time */
.ch-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
           align-items: end; min-height: 190px; }
.ch-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ch-col-track { position: relative; height: 150px; display: flex; flex-direction: column;
                justify-content: flex-end; align-items: stretch;
                border-bottom: 1px solid var(--line); }
.ch-col-fill { border-radius: 4px 4px 0 0; transition: opacity .15s; }
.ch-col-fill.is-zero { height: 2px; background: var(--line); border-radius: 0; }
.ch-col:hover .ch-col-fill { opacity: .75; }
.ch-col-v { font-size: .68rem; font-weight: 700; text-align: center; margin-bottom: 3px;
            font-variant-numeric: tabular-nums; color: var(--ink); }
.ch-col-l { font-size: .64rem; color: var(--muted); text-align: center; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .ch-col-l { writing-mode: vertical-rl; height: 46px; margin-inline: auto; } }

@media (prefers-reduced-motion: reduce) {
  .ch-slice, .ch-bar-fill, .ch-col-fill { transition: none; }
}

/* Housekeeping list. Files that need removing first are tinted, so the eye
   lands on them before the merely untidy ones. */
.adm-table tr.is-risky td { background: #fdf0ef; }
.adm-table tr.is-risky code { color: #8c1d18; font-weight: 700; }
.keep-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.keep-list li code {
  font-size: .78rem; padding: 3px 8px; background: var(--mist);
  border: 1px solid var(--line); border-radius: 4px; color: var(--muted);
}

/* When the button carries a person's name it becomes a greeting rather than a
   label, so the name gets the weight and the pill reads as "you are signed in". */
.nav-member--named {
  border-color: var(--accent);
  color: var(--accent-dk);
  background: var(--mist);
  max-width: 190px;
}
.nav-member--named svg { color: var(--accent-dk); }
.nav-member--named:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.nav-member--named:hover svg { color: #fff; }

/* Promoting somebody is a bigger step than approving them, so the link carries
   a little more weight than its neighbours without shouting like a delete. */
.linkbtn--strong { color: var(--accent-dk); font-weight: 700; }

/* The honeypot on the forgotten-password form. Off-screen rather than
   display:none, which some bots check for. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }