/* ============================================================
   Adroit Wealth & Capital — Design System
   Built from the client's page mockups: a navy header and
   footer, full-width green and blue bands, photos that fade in
   from blue, rounded value cards and pill-shaped buttons.
   Shapes: pills for buttons, the menu and the service cards,
   --radius-card for the value cards, circles for the team
   portraits, square bands and photos. Gradients only as
   overlays on photographs.
   ============================================================ */

/* --- Fonts ---
   Century Gothic (display) and Avenir (paragraphs) are used where
   the device has them. Elsewhere the page downloads close free
   look-alikes: Adroit Gothic (TeX Gyre Adventor, GUST Font License,
   subset to Latin and renamed) and Nunito Sans (SIL OFL). Licences
   are in /fonts. */
@font-face {
  font-family: 'Adroit Gothic';
  src: url('/fonts/adroit-gothic-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Adroit Gothic';
  src: url('/fonts/adroit-gothic-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Adroit Gothic';
  src: url('/fonts/adroit-gothic-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Adroit Gothic';
  src: url('/fonts/adroit-gothic-bolditalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/fonts/nunito-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/fonts/nunito-sans-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/fonts/nunito-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --- */
:root {
  color-scheme: light;

  /* Brand */
  --brand-blue: #1470bb;        /* bands, buttons, links — white text 5.2:1 */
  --brand-blue-dim: #0F5A95;    /* hover, links on tinted surfaces */
  --brand-navy: #004C7E;        /* header and footer — white text 9:1 */
  --brand-blue-tint: #E6F1FA;   /* soft full-width band */
  --brand-sky: #5EBEF1;         /* circles on the blue value cards */
  --brand-green: #3BB151;       /* bands, cards, buttons; white text on it is 2.8:1, kept as the client's mockup */
  --brand-green-deep: #1C7C2A;  /* "Adroit" on the green band */
  --brand-green-ink: #237a37;   /* brand green darkened for text on light surfaces */
  --brand-green-light: #92E89F; /* circles on the green value cards, the ticker strip */

  /* Surfaces */
  --bg-0: #FFFFFF;     /* page background */
  --bg-1: #F0F4F8;     /* neutral alternate (admin) */
  --bg-2: #FFFFFF;     /* cards / elevated */

  /* Ink — dark navy */
  --ink-0: #0A1828;    /* headlines */
  --ink-1: #16263A;    /* body primary */
  --ink-2: #44546B;    /* body secondary */
  --ink-3: #56657A;    /* muted — 4.5:1 or better on every surface */
  --ink-4: #5C6B7E;    /* muted labels */
  --danger: #B3261E;

  /* Links follow the surface they sit on */
  --link: var(--brand-blue);

  /* Borders */
  --border-1: rgba(20, 40, 60, 0.06);
  --border-2: rgba(20, 40, 60, 0.10);
  --border-3: rgba(20, 40, 60, 0.18);
  --border-input: #75839A;   /* form field edges — 3.8:1 on white */

  /* Type — Avenir for paragraphs, Century Gothic for headings, menu,
     buttons and footer; each falls back to its self-hosted look-alike */
  --font-sans: 'Avenir', 'Avenir Next', 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Century Gothic', 'CenturyGothic', 'Adroit Gothic', 'Futura', 'Trebuchet MS', sans-serif;

  /* Type scale (fluid) — body never drops below 16px, small text below 15px */
  --text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
  --text-base: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1rem + 0.25vw, 1.18rem);
  --text-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --text-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --text-4xl: clamp(3rem, 2.4rem + 3vw, 5rem);
  --text-display: clamp(3.5rem, 2.5rem + 5vw, 6rem);

  /* Spacing (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;
  --space-24: 12rem;

  /* Layout */
  --header-pad: clamp(0.75rem, 1.3vw, 1.15rem);
  --logo-h: clamp(48px, 4.6vw, 72px);    /* header logo height (the logo is 2.1:1) */
  --header-h: calc(var(--header-pad) * 2 + var(--logo-h));
  --container: 1240px;
  --container-narrow: 880px;
  --section-gap: clamp(1.75rem, 3.5vw, 3rem);  /* the one gap between Home's sections */
  /* Small radius for forms and admin; pills for buttons and the menu;
     --radius-card for the value cards. Bands and photos are square. */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --radius-pill: 999px;
  --radius-card: 24px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur: 400ms;

  /* Effects — only floating UI (toast) casts a shadow */
  --shadow-lg: 0 24px 48px rgba(15, 30, 50, 0.10), 0 8px 24px rgba(15, 30, 50, 0.06);
}

@media (max-width: 600px) {
  :root {
    --header-pad: 0.7rem;
    --logo-h: 44px;
  }
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; }
main { display: block; }
main:focus { outline: none; }
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; text-underline-offset: 0.2em; }
ul, ol, dl, dd { list-style: none; padding: 0; margin: 0; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

::selection {
  background: var(--brand-blue);
  color: #ffffff;
}

/* --- Body --- */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-1);
  background: var(--bg-0);
  caret-color: var(--brand-blue);
  accent-color: var(--brand-blue);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Keyboard focus */
:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
}

/* Skip link — first stop for keyboard users */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-1);
  z-index: 300;
  padding: 0.75rem 1.1rem;
  background: var(--brand-navy);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline-color: var(--brand-green); }

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

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink-0);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-display); font-weight: 700; }
h2 { font-size: var(--text-3xl); font-weight: 700; }
h3 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.008em; }
h4 { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.005em; }

p { margin: 0 0 1em; color: var(--ink-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Small uppercase label — admin pages only */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--link);
}
.lead {
  font-size: var(--text-md);
  color: var(--ink-2);
  max-width: 60ch;
}

em.brand-blue { color: var(--brand-blue); font-style: normal; font-weight: 500; }
em.brand-green { color: var(--brand-green-ink); font-style: normal; font-weight: 500; }

/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.container-narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: clamp(4rem, 8vw, 7.5rem);
  position: relative;
}

/* Solid blue band (the 404 page) */
.section--blue {
  background: var(--brand-blue);
  color: #ffffff;
  --link: #ffffff;
}
.section--blue h1, .section--blue h2, .section--blue h3, .section--blue p {
  color: #ffffff;
}
.section--blue :focus-visible { outline-color: #ffffff; }
.section--blue ::selection { background: #ffffff; color: var(--brand-blue-dim); }

.section-actions {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: center;
}

/* --- Header / Nav ---
   Navy bar with the white logo and a white pill holding the menu. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: var(--header-pad);
  background: var(--brand-navy);
  transition: padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header :focus-visible { outline-color: #ffffff; }
.site-header.is-scrolled {
  padding-block: 0.5rem;
  box-shadow: 0 6px 18px rgba(0, 32, 56, 0.28);
}
/* Watched by main.js to switch the header into its compact state */
.scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav__logo {
  width: auto;
  height: var(--logo-h);
  transition: height var(--dur) var(--ease);
}
.site-header.is-scrolled .nav__logo { height: clamp(40px, 3.6vw, 52px); }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 2rem);
  padding: 0.2rem clamp(1.25rem, 2vw, 2rem);
  background: #ffffff;
  border-radius: var(--radius-pill);
}
.nav__links :focus-visible { outline-color: var(--brand-blue); }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--ink-0);
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--brand-blue); }
.nav__link.is-active { color: var(--brand-blue); }
.nav__link::after {
  content: '';
  position: absolute;
  left: -0.15em;
  right: calc(100% + 0.15em);
  bottom: 6px;
  height: 4px;
  background: var(--brand-green);
  transition: right var(--dur-fast) var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { right: -0.15em; }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: all var(--dur) var(--ease);
}
.nav__toggle span:nth-child(1) { top: 14px; }
.nav__toggle span:nth-child(2) { top: 21px; }
.nav__toggle span:nth-child(3) { top: 28px; }

@media (max-width: 960px) {
  .nav__links {
    position: fixed;
    inset: 0;
    background: var(--bg-0);
    border-radius: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    transform: translateX(100%);
    visibility: hidden;   /* keeps the closed menu out of the tab order */
    transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
    padding: var(--space-8);
    z-index: 200;
  }
  .nav__links.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--dur) var(--ease), visibility 0s;
  }
  .nav__link { font-size: var(--text-lg); min-height: 48px; }
  .nav__toggle { display: block; z-index: 210; }
  .nav.is-open .nav__toggle span { background: var(--ink-0); }
  .nav.is-open .nav__toggle:focus-visible { outline-color: var(--brand-blue); }
  .nav.is-open .nav__toggle span:nth-child(1) {
    top: 21px; transform: rotate(45deg);
  }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) {
    top: 21px; transform: rotate(-45deg);
  }
}

/* Admin dashboard: the same bar with its own two actions */
.nav__admin {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav__admin-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #ffffff;
}
.nav__admin-link:hover { text-decoration: underline; }

/* --- Buttons --- pills with uppercase Century Gothic labels.
   Blue pills sit on white and green; green pills sit on blue and photos. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
  border: 2px solid transparent;
}
.btn--primary {
  background: var(--brand-blue);
  color: #ffffff;
}
.btn--primary:hover { background: var(--brand-blue-dim); }
.btn--primary:active { background: var(--brand-navy); }
.btn--green {
  background: var(--brand-green);
  color: #ffffff;
}
.btn--green:hover { background: #33A148; }
.btn--green:active { background: #2C8F3F; }
.btn--ghost {
  border-color: var(--brand-blue);
  color: var(--brand-blue-dim);
  background: #ffffff;
}
.btn--ghost:hover {
  background: var(--brand-blue-tint);
  border-color: var(--brand-blue-dim);
}
.btn--ghost:active { background: #D3E6F6; }
/* On the solid blue band */
.btn--invert {
  background: #ffffff;
  color: var(--brand-blue-dim);
}
.btn--invert:hover { background: var(--brand-blue-tint); }
.btn--outline-invert {
  border-color: #ffffff;
  color: #ffffff;
}
.btn--outline-invert:hover { background: var(--brand-blue-dim); }
.btn--link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--link);
  background: none;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 0;
  border: 0;
}
.btn--link::after {
  content: '→';
  display: inline-block;
  margin-left: 0.4rem;
  transition: transform var(--dur-fast) var(--ease);
}
.btn--link:hover { text-decoration: underline; }
.btn--link:hover::after { transform: translateX(3px); }

/* =========================================================
   Pages built from the client's mockups
   ========================================================= */
/* Every section is separated by the same white gap; pages that end on white
   keep that gap above the footer, and a closing colour band (Home's ticker,
   Team's green band) sits directly on it */
.flow > * + * { margin-top: var(--section-gap); }
.flow > .ticker { margin-top: 0; }
.flow { padding-bottom: var(--section-gap); }
.flow--flush { padding-bottom: 0; }

/* --- Hero: the team photo runs out of the navy header and the swoosh
   hangs over its bottom edge onto the white page. The swoosh's size and
   place follow the mockup, as fractions of the hero's width. It is turned
   2.4deg anticlockwise (the mockup has 2.78deg) and lowered so the right-hand
   tip of the green band sits exactly on the photo's bottom edge, with no
   white gap between the two to the left of the tip. */
.home-hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--header-h);
  background:
    linear-gradient(var(--brand-navy), var(--brand-navy)) top / 100% var(--header-h) no-repeat,
    #ffffff;
}
.home-hero__media {
  position: relative;
  padding-bottom: 9.99%;            /* the swoosh's overhang below the photo */
}
/* Short windows cap the photo's height, which trims its bottom and brings
   the faces down towards the swoosh. It never drops below 34vw, so the
   left-hand woman's face stays clear of the green. */
.home-hero__frame {
  position: relative;
  height: clamp(max(240px, 34vw), 38.4vw, calc(100svh - var(--header-h) - 17rem));
  overflow: hidden;
  background: var(--brand-navy);
}
.home-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 37%;
}
/* The header's navy runs down into the picture */
.home-hero__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    var(--brand-navy) 0%,
    rgba(0, 76, 126, 0.8) 16%,
    rgba(0, 76, 126, 0) 48%);
  pointer-events: none;
}
.home-hero__swoosh {
  position: absolute;
  left: -8.5%;
  bottom: 0;
  width: 94.9%;
  max-width: none;
  /* Tilted about its top-left corner, the artwork's lowest point rises
     above its box, so the box runs on below the overhang (clipped, empty) */
  margin-bottom: -2.25%;
  transform: rotate(-2.4deg);
  transform-origin: 0 0;
}
/* Phones: the same placement scaled up (x1.35) so the words stay readable */
@media (max-width: 600px) {
  .home-hero__frame { height: auto; aspect-ratio: 4 / 3; }
  .home-hero__photo { object-position: 50% 45%; }
  .home-hero__media { padding-bottom: 13.47%; }
  .home-hero__swoosh { left: -11.5%; width: 128%; margin-bottom: -3.04%; }
}

/* --- Intro under the hero --- */
.intro {
  text-align: center;
}
.intro__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}
/* The pre-redesign hero size; one line from 880px up */
.intro__title {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
@media (min-width: 880px) {
  .intro__title { white-space: nowrap; }
}
.intro__dot {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-inline: 0.08em;
  border-radius: 50%;
  background: var(--brand-green);
  vertical-align: 0.26em;
}
/* On smaller screens the three words stack and the dots between them go */
@media (max-width: 879px) {
  .intro__title span { display: block; }
  .intro__title .intro__dot { display: none; }
}
.intro__lead {
  max-width: 62ch;
  margin: 0;
  font-size: var(--text-lg);
  color: var(--ink-1);
}
.intro__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
/* Keeps the two buttons side by side on phones down to 360px */
@media (max-width: 420px) {
  .intro__ctas .btn { padding-inline: 1.2rem; }
}

/* --- Full-width colour bands with centred white text --- */
.band {
  padding-block: clamp(1.75rem, 3.6vw, 3rem);
  text-align: center;
  color: #ffffff;
  --link: #ffffff;
}
.band--green { background: var(--brand-green); }
.band h2, .band p { color: #ffffff; }
.band :focus-visible { outline-color: var(--brand-navy); }
.band ::selection { background: #ffffff; color: var(--brand-green-deep); }

/* Home headings keep the site's h2 size (--text-3xl), as before the redesign */
.meaning__title em { color: var(--brand-green-deep); padding-right: 0.04em; }
.meaning__definition {
  max-width: 60ch;
  margin: var(--space-2) auto 0;
  font-size: var(--text-xl);
  line-height: 1.35;
}
.meaning__note {
  margin: var(--space-3) auto 0;
  font-size: var(--text-md);
  font-weight: 600;
}

.updates { padding-block: clamp(2rem, 4vw, 3rem) clamp(2.25rem, 4.5vw, 3.5rem); }
.updates__lead {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-md);
}

/* --- Blue panels: text on the left, a photograph washing in on the right --- */
.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand-blue);
  color: #ffffff;
  --link: #ffffff;
}
.panel :focus-visible { outline-color: #ffffff; }
.panel ::selection { background: #ffffff; color: var(--brand-blue-dim); }
.panel__media {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: var(--panel-photo-ratio, 3 / 2);
  min-width: 55%;
  z-index: -2;
  /* The photo's left edge fades into the blue rather than starting on a line */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 35%);
  mask-image: linear-gradient(to right, transparent, #000 35%);
}
.panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
/* Solid blue behind the text column, then the photo washes in */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right,
    var(--brand-blue) 0%,
    var(--brand-blue) 50%,
    rgba(20, 112, 187, 0.62) 72%,
    rgba(20, 112, 187, 0.4) 100%);
}
.panel--services { --panel-photo-ratio: 5 / 4; }
/* About's "Our Story": a longer text, so a wider column and more solid blue */
.panel--story::before {
  background: linear-gradient(to right,
    var(--brand-blue) 0%,
    var(--brand-blue) 56%,
    rgba(20, 112, 187, 0.62) 76%,
    rgba(20, 112, 187, 0.4) 100%);
}
@media (min-width: 761px) {
  .panel--story .panel__text { max-width: min(52vw, 40rem); }
}
.panel__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-4) var(--space-6);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.panel__text { max-width: min(42vw, 34rem); }
.panel__title {
  margin-bottom: var(--space-3);
  line-height: 1.05;
  color: #ffffff;
}
.panel__title em { padding-right: 0.06em; }
.panel__text p {
  margin-bottom: 1em;
  font-size: var(--text-md);
  line-height: 1.55;
  color: #ffffff;
}
.panel__text p:last-child { margin-bottom: 0; }
.panel__cta { justify-self: end; }
@media (max-width: 760px) {
  .panel {
    display: flex;
    flex-direction: column;
  }
  .panel__media {
    position: relative;
    order: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    min-width: 0;
    z-index: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .panel::before { display: none; }
  .panel__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      var(--brand-blue) 0%,
      rgba(20, 112, 187, 0.45) 45%,
      rgba(20, 112, 187, 0.35) 100%);
  }
  .panel__inner { grid-template-columns: minmax(0, 1fr); }
  .panel__text { max-width: none; }
  .panel__cta { justify-self: start; }
}

/* --- Values carousel: a looping row of cards centred on one card.
   Without JavaScript it is a plain horizontal scroll-snap row. */
.values { overflow: hidden; }
.values__title {
  margin-bottom: var(--space-4);
  text-align: center;
}
.values__title span { white-space: nowrap; }  /* "and we care." stays together on phones */
/* Three whole cards fill the content column on desktop (the card width is
   measured against the viewport element, a size container); on phones the
   row runs to the screen edges so the neighbouring cards peek in. */
.carousel {
  --card-gap: clamp(12px, 1.3vw, 20px);
  --card-w: max(260px, (100cqw - 2 * var(--card-gap)) / 3);
  position: relative;
}
@media (max-width: 760px) {
  .carousel {
    --card-w: min(78vw, 340px);
    margin-inline: calc(50% - 50vw);
  }
}
.carousel__viewport {
  container-type: inline-size;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.carousel__track {
  display: flex;
  gap: var(--card-gap);
  width: max-content;
  padding-inline: calc(50cqw - var(--card-w) / 2);
}
.carousel.is-ready .carousel__viewport {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
}
.carousel.is-ready .carousel__track {
  padding-inline: 0;
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}
.carousel.is-dragging .carousel__viewport { cursor: grabbing; }
.carousel.is-dragging .carousel__track,
.carousel.is-jumping .carousel__track {
  transition: none;
  user-select: none;
}
.value-card {
  flex: 0 0 var(--card-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.1rem, 1.9vw, 1.75rem) clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-card);
  text-align: center;
  color: #ffffff;
  scroll-snap-align: center;
}
.value-card--green { background: var(--brand-green); --circle: var(--brand-green-light); }
.value-card--blue { background: var(--brand-blue); --circle: var(--brand-sky); }
.value-card ::selection { background: #ffffff; color: var(--ink-0); }
.value-card__circle {
  width: 40%;
  aspect-ratio: 1;
  margin-bottom: clamp(0.9rem, 1.8vw, 1.4rem);
  border-radius: 50%;
  background: var(--circle);
}
/* The client's line icon, drawn on a square the size of the circle */
.value-card__icon {
  width: 100%;
  height: 100%;
}
/* The closing card carries the logo, as in the client's values artwork */
.value-card--logo { justify-content: center; }
.value-card__logo { width: 84%; }
.value-card__title {
  margin-bottom: 0.4rem;
  padding-bottom: 0.1em;          /* room for the italic descenders */
  font-size: clamp(1.3rem, 1rem + 0.8vw, 1.75rem);
  font-style: italic;
  line-height: 1.1;
  color: #ffffff;
}
.value-card__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.5;
  color: #ffffff;
}
.carousel__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.carousel__arrow {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--brand-blue);
  transition: background var(--dur-fast) var(--ease);
}
.carousel__arrow {
  box-shadow: 0 6px 16px rgba(0, 40, 70, 0.26), 0 1px 3px rgba(0, 40, 70, 0.18);
}
.carousel__arrow svg { width: 50%; height: 50%; }
.carousel__arrow:hover { background: var(--brand-blue-tint); }
@media (min-width: 761px) {
  /* Arrows sit over the half-hidden neighbour cards, as in the mockup */
  .carousel__controls { margin: 0; }
  .carousel__arrow {
    position: absolute;
    top: 47%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .carousel__arrow--prev { left: -24px; }
  .carousel__arrow--next { right: -24px; }
}

/* About: the same six cards, all on show */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
}
@media (max-width: 899px) {
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .values-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px;
    margin-inline: auto;
  }
}

/* --- Meet the Team: the directors' photo melts into a dark-to-blue band.
   Screen blending turns the photo's black backdrop into the band colour. */
.team-band__title {
  margin-bottom: var(--space-4);
  text-align: center;
}
.team-band__stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to bottom, #020A12 0%, #08233D 40%, #105D9B 100%);
}
.team-band__stage :focus-visible { outline-color: #ffffff; }
.team-band__photo {
  position: relative;
  width: min(100%, 1040px, calc((100svh - var(--header-h) - 2rem) * 1.77));
  aspect-ratio: 1.77;
  margin: 0;
  container-type: inline-size;
}
.team-band__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  mix-blend-mode: screen;
}
.team-band__name {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 2.6cqw, 1.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 12, 24, 0.45);
}
/* A small green swoosh from each name towards its person */
.team-band__name::after {
  content: '';
  position: absolute;
  top: 0.7em;
  width: 2.4em;
  height: 1em;
  border-bottom: 0.2em solid var(--brand-green);
  border-radius: 50%;
}
.team-band__name--liesl { left: 12.5%; top: 27.6%; }
.team-band__name--nicky { left: 30.2%; top: 58.4%; }
.team-band__name--guy { left: 79.6%; top: 31.5%; }
.team-band__name--liesl::after,
.team-band__name--nicky::after { left: 0.7em; transform: rotate(12deg); }
.team-band__name--guy::after { right: 0.3em; transform: rotate(-24deg); }
.team-band__cta {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
}
@media (max-width: 600px) {
  .team-band__cta {
    position: static;
    transform: none;
    margin: var(--space-2) 0 var(--space-4);
  }
}

/* --- Ticker: "we're invested in you." running along the light green strip.
   Decorative (hidden from screen readers); pauses only while off screen. */
.ticker {
  overflow: hidden;
  padding-block: 0.6rem;
  background: var(--brand-green-light);
}
.ticker__track {
  display: flex;
  width: max-content;
}
.ticker__group {
  display: flex;
  flex-shrink: 0;
}
.ticker__group span {
  padding-right: 1.5em;
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 0.82rem + 0.15vw, 1rem);
  font-weight: 700;
  color: var(--brand-green);
  white-space: nowrap;
}
.ticker.is-running .ticker__track {
  animation: ticker var(--ticker-duration, 40s) linear infinite;
}
.ticker.is-offscreen .ticker__track { animation-play-state: paused; }
@keyframes ticker {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker.is-running .ticker__track { animation: none; }
}

/* --- What We Do: each service on its own navy pill, as in the mockup.
   Full pills from 900px up. Narrower, the cards grow tall, so their corners
   drop to a fixed radius that never reaches the text. --- */
.service-list {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.service-card {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 8%, 6rem);
  border-radius: var(--radius-pill);
  background: var(--brand-navy);
  text-align: center;
  color: #ffffff;
}
.service-card ::selection { background: #ffffff; color: var(--brand-navy); }
.service-card__title {
  margin-bottom: var(--space-1);
  font-size: var(--text-xl);
  color: #ffffff;
}
.service-card__body {
  max-width: 70ch;
  margin: 0 auto;
  font-size: var(--text-md);
  line-height: 1.5;
  color: #ffffff;
}
@media (max-width: 899px) {
  .service-card {
    padding: var(--space-4) var(--space-3);
    border-radius: 40px;
  }
}
/* Fundhouse, the investment partner: the same pill on deep green (white text 5.3:1)
   so it reads apart from the services above it */
.service-card--partner {
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  background: var(--brand-green-deep);
}
.service-card--partner ::selection { color: var(--brand-green-deep); }
/* Its copy is longer than the others, so it is split into short paragraphs
   with room between them rather than one dense block */
.service-card__body + .service-card__body { margin-top: var(--space-2); }
/* Its heading is the Fundhouse logo, in white */
.service-card__title--logo { margin-bottom: var(--space-3); }
.service-card__logo {
  width: clamp(16rem, 32vw, 22rem);
  margin-inline: auto;
}

/* --- Team page --- */
/* Opener: the client's blue wash over the office photo. From 1200px up the
   words sit over the photo's plain blue top; narrower, they sit on the same
   blue above the photo, so they never cover a face. As on Home, the
   header's navy runs down into it. */
.team-hero {
  position: relative;
  padding-top: var(--header-h);
  background: linear-gradient(to bottom,
    var(--brand-navy) var(--header-h),
    var(--brand-blue) calc(var(--header-h) + 12rem));
  color: #ffffff;
}
.team-hero ::selection { background: #ffffff; color: var(--brand-blue-dim); }
.team-hero__text {
  padding-block: clamp(1.75rem, 3.6vw, 3rem) var(--space-2);
}
.team-hero__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-3xl);
  line-height: 1.05;
  color: #ffffff;
}
.team-hero__title em { padding-right: 0.06em; }
.team-hero__lead {
  max-width: 36rem;
  margin: 0;
  font-size: var(--text-lg);
  font-style: italic;
  color: #ffffff;
}
/* Under the words, the photo's plain blue top (30% of its height) is
   trimmed, so the team sits close below the lead */
.team-hero__photo {
  width: 100%;
  aspect-ratio: 2400 / 689;
  object-fit: cover;
  object-position: 50% 100%;
}
@media (min-width: 1200px) {
  .team-hero__photo { aspect-ratio: 2400 / 984; }
  /* Over the photo: the header's navy running down (clear before the
     faces), and under it a blue wash over the upper left, behind the words,
     which keeps the lead readable where it crosses the sign on the back
     wall. Both fade out well above the faces. */
  .team-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    aspect-ratio: 2400 / 984;
    background:
      linear-gradient(to bottom,
        var(--brand-navy) 0%,
        rgba(0, 76, 126, 0.8) 14%,
        rgba(0, 76, 126, 0) 40%),
      linear-gradient(to right,
        rgba(20, 112, 187, 0.85) 0%,
        rgba(20, 112, 187, 0.85) 45%,
        rgba(20, 112, 187, 0) 62%);
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 56%);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 56%);
    pointer-events: none;
  }
  .team-hero__text {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 1;
  }
  .team-hero__lead { max-width: min(46vw, 36rem); }
}

/* Directors on navy, assistants on deep green, three to a row */
.people {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 4.5rem);
  text-align: center;
  color: #ffffff;
}
.people--directors { background: var(--brand-navy); }
.people--assistants { background: var(--brand-green-deep); }
.people ::selection { background: #ffffff; color: var(--ink-0); }
.people__title {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  color: #ffffff;
}
.people__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
  align-items: start;
}
.person {
  display: grid;
  justify-items: center;
}
/* The portrait fills the middle of a square; the name and the role run
   round it on arcs, in an SVG laid over the top (a 256-unit square with
   the portrait's circle 200 units across) */
.person__portrait {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 1;
}
.person__photo {
  position: absolute;
  top: 10.9375%;
  left: 10.9375%;
  width: 78.125%;
  height: 78.125%;
  border-radius: 50%;
}
.person__arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.person__arcs text {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  fill: #ffffff;
}
.person__bio {
  max-width: 34ch;
  margin: var(--space-2) auto 0;
  font-size: var(--text-md);
  line-height: 1.5;
  color: #ffffff;
}
/* Below 860px three columns squeeze the bios, so the people stack */
@media (max-width: 859px) {
  .people__grid { grid-template-columns: minmax(0, 1fr); }
  .person__portrait { width: min(100%, 300px); }
}

/* --- News: ruled rows set straight on the band --- */
.news-list { border-bottom: 1px solid rgba(15, 90, 149, 0.35); }
.news-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
  border-top: 1px solid rgba(15, 90, 149, 0.35);
}
.news-row__meta {
  display: grid;
  gap: 0.2rem;
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.news-row__category {
  font-weight: 600;
  color: var(--brand-blue-dim);
}
.news-row__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink-0);
  line-height: 1.25;
}
.news-row__summary {
  margin-top: var(--space-1);
  color: var(--ink-2);
  max-width: 65ch;
}
.news-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 2px solid var(--brand-blue);
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--brand-blue-dim);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.news-row__cta::after { content: '↗'; }
.news-row__cta:hover { background: var(--brand-blue-tint); border-color: var(--brand-blue-dim); }
@media (max-width: 760px) {
  .news-row { grid-template-columns: minmax(0, 1fr); }
  .news-row__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .news-row__cta { justify-self: start; }
}

/* Placeholder rows shown while the articles load */
.news-row--loading span {
  display: block;
  height: 1rem;
  background: rgba(15, 90, 149, 0.16);
  animation: news-pulse 1.4s ease-in-out infinite;
}
.news-row--loading span:nth-child(1) { width: 6rem; }
.news-row--loading span:nth-child(2) { width: min(26rem, 100%); height: 1.4rem; }
.news-row--loading span:nth-child(3) { width: 7rem; height: 2.75rem; }
@keyframes news-pulse {
  50% { opacity: 0.45; }
}

.news-message {
  margin: 0;
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(15, 90, 149, 0.35);
  color: var(--ink-2);
}

/* --- Forms --- */
.form {
  display: grid;
  gap: var(--space-3);
}
.form__field { display: grid; gap: 0.4rem; }
.form__label {
  font-size: var(--text-sm);
  color: var(--ink-1);
  font-weight: 600;
}
.form__req { color: var(--danger); }
.form__input,
.form__textarea {
  min-height: 48px;
  padding: 0.8rem 1rem;
  background: var(--bg-2);
  border: 1px solid var(--border-input);
  color: var(--ink-1);
  border-radius: var(--radius-sm);
  outline: none;
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  font-family: inherit;
}
.form__input:hover,
.form__textarea:hover { border-color: var(--ink-2); }
.form__input:focus,
.form__textarea:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(20, 112, 187, 0.3);
}
.form__input[aria-invalid="true"],
.form__textarea[aria-invalid="true"] { border-color: var(--danger); }
.form__textarea { min-height: 140px; resize: vertical; }
.form__error {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--danger);
}
.form__hint {
  font-size: var(--text-sm);
  color: var(--ink-3);
  max-width: 55ch;
}
.form__status {
  min-height: 1.5em;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-green-ink);
}

/* --- Contact --- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
.contact-intro h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}
.contact-intro__lead {
  margin-bottom: var(--space-4);
  max-width: 55ch;
}
.contact-intro__lead a { color: var(--link); text-decoration: underline; font-weight: 600; }
/* Contact details: a ruled list, no box */
.contact-details { border-bottom: 3px solid var(--brand-blue); }
.contact-details__row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-top: 1px solid var(--border-3);
}
.contact-details__row:first-child { border-top: 3px solid var(--brand-blue); }
.contact-details dt {
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.contact-details dd {
  color: var(--ink-0);
  font-weight: 600;
  word-break: break-word;
}
.contact-details a { text-decoration: underline; text-decoration-color: var(--brand-blue); }
.contact-details a:hover { color: var(--brand-blue-dim); }
.contact-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.contact-note strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--ink-0);
}

/* --- Footer --- navy, three columns (contact, logo, legal), blue bottom bar */
.site-footer {
  background: var(--brand-navy);
  color: #ffffff;
  font-family: var(--font-display);
}
.site-footer :focus-visible { outline-color: #ffffff; }
.site-footer ::selection { background: #ffffff; color: var(--brand-navy); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5) var(--space-6);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__title {
  margin-bottom: var(--space-2);
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem);
  font-weight: 700;
  color: #ffffff;
}
.footer__list { display: grid; }
.footer__list a,
.footer__list li {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.92);
}
.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.footer__list a:hover { color: #ffffff; text-decoration: underline; }
.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.footer__contact .footer__list a,
.footer__contact .footer__list li { font-size: var(--text-md); }
.footer__contact li > span { padding-block: 0.15rem; }
.footer__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.2rem;
  color: var(--brand-green);
}
.footer__brand {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
}
.footer__logo {
  width: clamp(170px, 15vw, 230px);
  height: auto;
}
.footer__brand p {
  max-width: 30ch;
  margin: 0;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.92);
}
.footer__legal {
  justify-self: end;
  text-align: right;
}
.footer__legal .footer__list { justify-items: end; }
.footer__bottom { background: var(--brand-blue); }
.footer__bottom .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding-block: 0.9rem;
  font-size: var(--text-xs);
  color: #ffffff;
}
@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .footer__brand {
    order: -1;
    justify-items: start;
    text-align: left;
  }
  .footer__legal {
    justify-self: start;
    text-align: left;
  }
  .footer__legal .footer__list { justify-items: start; }
}

/* --- Page banner (About, What We Do, News, Contact): the title and an
   italic lead on a green band --- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  background: var(--brand-green);
  color: #ffffff;
  --link: #ffffff;
}
.page-hero :focus-visible { outline-color: var(--brand-navy); }
.page-hero ::selection { background: #ffffff; color: var(--brand-green-deep); }
.page-hero__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-3xl);
  line-height: 1.05;
  color: #ffffff;
}
.page-hero__lead {
  max-width: 75ch;
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.5;
  color: #ffffff;
}

/* --- Not found --- */
.notfound {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--header-h) + var(--space-6)) var(--space-3) var(--space-8);
  text-align: center;
}
.notfound__inner { max-width: 560px; }
.notfound h1 { margin-bottom: var(--space-2); font-size: var(--text-3xl); }
.notfound .lead { margin: 0 auto var(--space-4); }

/* --- Admin shell (login + dashboard) --- */
.admin-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: var(--bg-1);
}
.admin-card {
  width: 100%;
  max-width: 460px;
  padding: var(--space-5);
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
}
.admin-card h1 { font-size: var(--text-2xl); margin-bottom: var(--space-2); font-weight: 700; color: var(--ink-0); }

.dashboard {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: var(--space-12);
}
.dashboard__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.dashboard__panel {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.dashboard__list {
  display: grid;
  gap: var(--space-2);
}
.dashboard__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
}
@media (max-width: 700px) {
  .dashboard__item { grid-template-columns: 1fr; }
}
.dashboard__item-meta {
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin-top: 0.2rem;
}
.dashboard__item-actions {
  display: flex;
  gap: 0.5rem;
}
.btn--small {
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
/* Admin dashboard: shown when uploads would not survive a republish */
.dashboard__warning {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 2px solid var(--danger);
  border-radius: var(--radius-md);
  background: rgba(179, 38, 30, 0.06);
  color: var(--ink-1);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.dashboard__warning strong { display: block; color: var(--danger); margin-bottom: 0.25rem; }

/* Month and year dropdowns (admin upload and edit forms) */
.form__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.month-year {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0.5rem;
}

/* Edit article dialog */
.edit-dialog {
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: var(--space-4);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  color: var(--ink-1);
  box-shadow: var(--shadow-lg);
}
.edit-dialog::backdrop { background: rgba(15, 30, 50, 0.45); }
.edit-dialog__title { font-size: var(--text-lg); font-weight: 700; }
.edit-dialog__file {
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin: 0.25rem 0 var(--space-3);
  overflow-wrap: anywhere;
}
.edit-dialog__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.edit-dialog__wide { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .edit-dialog__grid { grid-template-columns: 1fr; }
}
.edit-dialog__check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-sm);
  color: var(--ink-1);
  cursor: pointer;
}
.edit-dialog__check input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand-blue); }
.edit-dialog__status {
  min-height: 1.4em;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--danger);
}
.edit-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: var(--space-2);
}

.btn--danger {
  border: 2px solid rgba(179, 38, 30, 0.45);
  color: var(--danger);
  background: var(--bg-2);
}
.btn--danger:hover {
  background: rgba(179, 38, 30, 0.08);
  border-color: var(--danger);
}

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 1.5rem));
  padding: 0.9rem 1.4rem;
  background: var(--ink-0);
  color: white;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  box-shadow: var(--shadow-lg);
}
.toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s;
}
.toast--success { background: var(--brand-green-ink); }
.toast--error { background: var(--danger); }