/* ==========================================================================
   Amerissa Studio  v4
   Built to match the supplied reference (design.jpg).

   Palette, type treatment and components are taken from that reference:
   lavender page, white rounded cards, deep violet, lime accent, a floating
   rounded nav capsule, two-tone headlines, lime numbered circles, pill tabs
   with a filled active state, and a dark violet band.

   Every colour below was sampled out of the reference image, then contrast
   checked. Measured on the lavender page: ink 15.4:1, body 7.2:1,
   violet 4.6:1, white on violet 5.1:1, white on deep violet 15.9:1,
   deep violet on lime 13.3:1.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* The brand's own palette, taken from the logo and supplied by the client.
     Rose gold is 2.97:1 on the page, so it is a decorative and graphic colour
     only: it never carries small text and never carries a white label. Where an
     accent must be read, indigo sits on rose (5.4:1) or the darker copper is
     used instead. */
  --page: #FAFAFC;          /* crisp porcelain */
  --page-2: #F4F2F8;        /* panel inside a section */
  --card: #FFFFFF;
  --ink: #211A36;           /* deep royal indigo, 15.9:1 on page */
  --body: #4A4363;          /* body copy, 8.9:1 */
  --muted: #8A83A4;         /* dim half of a two-tone HEADLINE only, 3.4:1 */
  --muted-text: #6B6486;    /* small print, 5.3:1 */
  --violet: #211A36;        /* primary action: indigo, white label 16.6:1 */
  --violet-deep: #100C1E;   /* hover */
  --deep: #211A36;          /* dark band */
  --lime: #B78873;          /* rose gold: badges and marks, indigo text on it */
  --lime-deep: #A5765F;     /* hover on a rose surface */
  --accent-ink: #8A5A45;    /* copper that can carry small text, 5.6:1 */
  --rose-soft: #F2E7E1;     /* soft rose ground, indigo on it 13.7:1 */
  --rule: #E7E5EE;
  --rule-2: #D6D3E0;
  --on-deep: #FFFFFF;
  --on-deep-2: #BBB4CC;     /* body on the dark band, 8.3:1 */
  --on-deep-accent: #D2A992;/* rose on the dark band, 7.8:1 */
  --danger: #B3253F;

  --font: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* italic serif, used only for the accent phrase over the rose bar */
  --font-accent: "Bodoni Moda", Georgia, serif;

  /* the reference sets headings heavy and tight, body small and light */
  --t-display: clamp(2.35rem, 1.5rem + 3.1vw, 4rem);
  --t-h2: clamp(1.9rem, 1.35rem + 2vw, 2.9rem);
  --t-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --t-lead: clamp(0.98rem, 0.94rem + 0.2vw, 1.06rem);
  --t-body: 1rem;
  --t-small: 0.9375rem;
  --t-meta: 0.8125rem;

  --gutter: clamp(1.15rem, 3.5vw, 3rem);
  --container: 1200px;
  --pad: clamp(3.5rem, 6.5vw, 6rem);
  --pad-tight: clamp(2.75rem, 5vw, 4rem);

  /* The floating capsule's real height. The masthead keeps its place in flow so
     sticky works, then cancels that space with a matching negative margin, so
     the first section of every page runs all the way to the top and the capsule
     sits on it. Any first section adds this back as padding. */
  --mast-h: 4.25rem;
  --mast-pad: 1rem;
  --mast-total: calc(var(--mast-pad) + var(--mast-h));

  /* the reference is very round: capsules and 24 to 32px cards */
  --r-pill: 999px;
  --r-card: 24px;
  --r-lg: 32px;
  --r-sm: 14px;

  --shadow-card: 0 2px 4px rgba(33, 26, 54, 0.03), 0 18px 40px -22px rgba(33, 26, 54, 0.14);
  --shadow-float: 0 4px 10px rgba(33, 26, 54, 0.06), 0 30px 60px -28px rgba(33, 26, 54, 0.28);
  --shadow-nav: 0 2px 6px rgba(33, 26, 54, 0.04), 0 14px 34px -20px rgba(33, 26, 54, 0.18);

  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --d-fast: 180ms;
  --d-mid: 420ms;

  --z-nav: 200;
  --z-overlay: 300;
  --z-toast: 400;
}

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  background: var(--page);
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--page);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}

h1 { font-size: var(--t-display); letter-spacing: -0.032em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.018em; }
h4 { font-size: 1rem; line-height: 1.4; letter-spacing: -0.012em; }

p { margin: 0; }
p, li { max-width: 48ch; }

/* The reference's signature headline treatment: the first clause carries in
   ink, the rest drops to a light lavender grey. */
.dim { color: var(--muted); }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; color: var(--ink); }

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

::selection { background: var(--rose-soft); color: var(--ink); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: var(--z-toast);
  transform: translateY(-140%);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--deep);
  color: #fff;
  font-size: var(--t-small);
  font-weight: 600;
  transition: transform var(--d-fast) var(--ease);
}

.skip-link:focus-visible { transform: translateY(0); }

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

/* --- Layout -------------------------------------------------------------- */

.wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

.section { padding-block: var(--pad); }
.section--tight { padding-block: var(--pad-tight); }

/* A light panel inset inside a section, as the reference does behind its tab
   card. */
.panel {
  background: var(--page-2);
  border-radius: var(--r-lg);
  padding: clamp(1rem, 2.5vw, 2rem);
}

.stack > * + * { margin-top: 1rem; }

/* Section head: heading left, small supporting paragraph right, which is the
   reference's pattern. Stacks under 900px. */
.head { display: grid; gap: clamp(1rem, 2.5vw, 2rem); align-items: end; }

@media (min-width: 900px) {
  .head:not(.head--center) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .head:not(.head--center) .head__aside { padding-bottom: 0.4rem; }
}

.head--center {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  justify-items: stretch;
}

.head--center > * { justify-self: stretch; }
.head--center .eyebrow { justify-content: center; }
.head--center .head__aside { margin-inline: auto; }

.head__aside { font-size: var(--t-small); color: var(--body); max-width: 34ch; }

.lead { font-size: var(--t-lead); color: var(--body); max-width: 38ch; }
.note { font-size: var(--t-small); color: var(--muted-text); max-width: 44ch; }

/* --- Eyebrow ------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--body);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--accent-ink);
}

/* the short rule the reference sets after its label */
.eyebrow::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.head--center .eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.eyebrow .star { display: none; }
.eyebrow--on-deep { color: var(--on-deep-accent); }

/* --- Lime numbered circle ----------------------------------------------- */

.num {
  display: inline-grid;
  place-items: center;
  width: 3rem; height: 3rem;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--deep);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.num--sm { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; }

/* --- Lime highlighter blob ---------------------------------------------- */

/* The reference lays a rotated lime capsule over part of a heading, with small
   dark text inside it. Kept as a real element rather than a text background so
   it can carry its own label. */
/* The accent phrase, following Northline's own implementation: the bar is a
   linear-gradient painted on the inline element itself, solid to 32% of the
   line box and transparent above. That beats an absolutely positioned bar,
   because a background wraps with the text, so the phrase can break across
   lines and each fragment keeps its own swipe. No nowrap needed. */
.mark {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0 0.08em;
  background-image: linear-gradient(
    to top,
    var(--lime) 0%,
    var(--lime) 32%,
    transparent 32%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* drawn in as the heading arrives; fully painted without the script */
.mark.swipe-pending { background-size: 0% 100%; }
.mark.swipe-in { animation: swipe 620ms var(--ease) both; animation-delay: 120ms; }

@keyframes swipe {
  from { background-size: 0% 100%; }
  to { background-size: 100% 100%; }
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--violet);
  color: #fff;
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease),
              box-shadow var(--d-fast) var(--ease);
}

.btn:hover {
  background: var(--violet-deep);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.btn:active { transform: translateY(0); }

.btn--ghost {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--rule-2);
}

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

.btn--deep { background: var(--deep); }
.btn--deep:hover { background: #1B0A4A; }

.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--lime-deep); color: var(--ink); }

.btn--full { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink);
  min-height: 2rem;
}

.arrow::after {
  content: "";
  width: 0.9em; height: 0.9em;
  background: currentColor;
  -webkit-mask: var(--ico-arrow) center / contain no-repeat;
  mask: var(--ico-arrow) center / contain no-repeat;
  transition: transform var(--d-mid) var(--ease);
}

.arrow:hover { color: var(--accent-ink); text-decoration: none; }
.arrow:hover::after { transform: translateX(4px); }

:root {
  --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h13.2l-5.6-5.6L13 4l8 8-8 8-1.4-1.4 5.6-5.6H4z'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E");
  --ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z'/%3E%3C/svg%3E");
  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 13.38 8.67 17.09 6.91 15.33 10.62 24 12 15.33 13.38 17.09 17.09 13.38 15.33 12 24 10.62 15.33 6.91 17.09 8.67 13.38 0 12 8.67 10.62 6.91 6.91 10.62 8.67Z'/%3E%3C/svg%3E");
}

/* --- Ticked list --------------------------------------------------------- */

.ticks { display: grid; gap: 0.7rem; }

.ticks > li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--t-small);
  color: var(--body);
  max-width: 46ch;
}

.ticks > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.15em;
  width: 1.25rem; height: 1.25rem;
  border-radius: var(--r-pill);
  background: var(--lime);
  -webkit-mask: none;
}

.ticks > li::after {
  content: "";
  position: absolute;
  left: 0.22rem; top: 0.37em;
  width: 0.8rem; height: 0.8rem;
  background: var(--deep);
  -webkit-mask: var(--ico-check) center / contain no-repeat;
  mask: var(--ico-check) center / contain no-repeat;
}

@media (min-width: 700px) { .ticks--two { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }

/* On the dark band every text role has to be restated, or it inherits the
   light-ground colours and disappears. */
.band .ticks > li { color: var(--on-deep-2); }
.band .rail__row p { color: var(--on-deep-2); }
.band .rail__row h3 { color: var(--on-deep); }
.band .note { color: var(--on-deep-2); }
.band .note strong { color: var(--on-deep); }
.band .head__aside { color: var(--on-deep-2); }
.band .svc__tag { background: rgba(255, 255, 255, 0.16); color: var(--on-deep-accent); }
.band .shot { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.band .shot figcaption { color: var(--on-deep-2); }
.band .fact { border-left-color: var(--on-deep-accent); }
.band .dim { color: var(--on-deep-2); }

/* --- Cards -------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--card);
  border-radius: var(--r-card);
  padding: clamp(1.35rem, 2.4vw, 2rem);
  box-shadow: var(--shadow-card);
}

.card--link { transition: transform var(--d-mid) var(--ease), box-shadow var(--d-mid) var(--ease); }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.card--flush { padding: 0; overflow: hidden; }
.card--plain { box-shadow: none; border: 1px solid var(--rule); }

/* --- Masthead: a floating rounded capsule, as in the reference ---------- */

/* Fixed rather than sticky with a negative margin: sticky keeps its place in
   flow, so cancelling it needs a margin that exactly equals the rendered
   height, and any mismatch leaves a sliver above the first section. Fixed takes
   no space at all, so the section always starts at zero. */
.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding-top: var(--mast-pad);
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  padding: 0.55rem 0.65rem 0.55rem 1.35rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(12px);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-nav);
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; }
.brand img { width: auto; height: 1.9rem; }

.brand__name {
  display: grid;
  gap: 0.1em;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.brand__name span:last-child { font-size: 0.6rem; letter-spacing: 0.26em; color: var(--accent-ink); }

.nav { display: none; }

@media (min-width: 960px) { .nav { display: flex; align-items: center; gap: 0.15rem; } }

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--body);
  white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

.nav__link:hover { background: var(--page); color: var(--ink); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--ink); background: var(--page); }

.masthead__cta { display: none; }

@media (min-width: 960px) { .masthead__cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.6rem 1.15rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--deep);
  color: #fff;
  font-family: var(--font);
  font-size: var(--t-meta);
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 960px) { .nav-toggle { display: none; } }

.nav-toggle__bars { display: grid; gap: 4px; width: 1rem; }
.nav-toggle__bars i { display: block; height: 2px; border-radius: 2px; background: #fff; }

.nav-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  padding: 1rem var(--gutter) var(--gutter);
  background: var(--page);
  overflow-y: auto;
}

.nav-panel[hidden] { display: none; }
.nav-panel__top { display: flex; align-items: center; justify-content: space-between; min-height: 4.25rem; }

.nav-panel__close {
  min-height: 3rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-meta);
  font-weight: 700;
  cursor: pointer;
}

.nav-panel__links { display: grid; gap: 0.6rem; margin-top: 1.25rem; }

.nav-panel__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.35rem;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.nav-panel__links a[aria-current="page"] { background: var(--deep); color: #fff; }
.nav-panel__links .star { width: 0.85rem; height: 0.85rem; color: var(--accent-ink); opacity: 0.5; }
.nav-panel__links a[aria-current="page"] .star { color: var(--lime); }
.nav-panel__foot { margin-top: auto; padding-top: 1.5rem; font-size: var(--t-small); color: var(--muted-text); }

body[data-nav-open="true"] { overflow: hidden; }

/* --- Hero --------------------------------------------------------------- */

.hero {
  padding-block: calc(var(--mast-total) + clamp(1.25rem, 3vw, 2.5rem))
                 clamp(3rem, 5vw, 4.5rem);
}
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }

@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 4rem); }
}

.hero h1 { max-width: 20ch; }
.hero .lead { margin-top: 1.15rem; }
.hero .btn-row { margin-top: 1.75rem; }

/* The reference frames its hero photo with a large radius and floats a small
   white stat card over its lower left. */
.hero__media { position: relative; }

.hero__frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-float);
}

.hero__frame img { width: 100%; }

.hero__float {
  position: absolute;
  z-index: 2;
  left: clamp(-0.5rem, -1vw, 0rem);
  bottom: -1.75rem;
  width: min(17rem, 78%);
  padding: 1.1rem 1.25rem;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
}

.hero__float .eyebrow { margin-bottom: 0.5rem; }

.hero__float__row { display: flex; align-items: baseline; gap: 0.6rem; }

.hero__float b {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.hero__tag {
  padding: 0.15rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--deep);
  font-size: 0.6875rem;
  font-weight: 700;
}

.hero__bar { height: 6px; border-radius: 999px; background: var(--page); margin-top: 0.7rem; overflow: hidden; }
.hero__bar i { display: block; height: 100%; width: 68%; border-radius: 999px; background: var(--lime); }
.hero__float small { display: block; margin-top: 0.6rem; font-size: var(--t-meta); color: var(--muted-text); }

@media (max-width: 560px) {
  /* the float would cover the photo at this width, so it sits under it */
  .hero__float { position: static; width: auto; margin-top: 0.9rem; }
}

/* --- Page head (inner pages) ------------------------------------------- */

.page-head {
  padding-block: calc(var(--mast-total) + clamp(1rem, 2.5vw, 2rem))
                 clamp(1.75rem, 3.5vw, 2.75rem);
}

/* any other page whose first block is a plain section, such as the 404 */
main > .section:first-child {
  padding-top: calc(var(--mast-total) + clamp(1.25rem, 3vw, 2.5rem));
}

/* --- Pill tabs inside a panel ------------------------------------------ */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.45rem;
  background: var(--card);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2.75rem;
  padding: 0.55rem 1.2rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--body);
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

.tab .star { display: none; }
.tab:hover { background: var(--page); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--deep); color: #fff; }
.tab[aria-selected="true"] .star { color: var(--on-deep-accent); }
.tab__count { font-size: 0.72rem; opacity: 0.7; font-variant-numeric: tabular-nums; }

.tabpanel[hidden] { display: none; }
.tabpanel { animation: rise var(--d-mid) var(--ease) both; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Feature row: lime number, two-tone heading, framed photo ---------- */

.feature { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }

@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature--flip > :first-child { order: 2; }

  /* When one column is a tall stack of cards, centring leaves the image
     stranded in the middle of the gap. Top-align and let it track the stack. */
  .feature--top { align-items: start; }
  .feature--top .feature__media { position: sticky; top: 7rem; }
}

/* A light artefact on a white card disappears. Mounting it on a tinted plate
   with a hairline gives it an edge to sit against. */
.feature__media {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--page-2);
  border: 1px solid var(--rule);
  padding: clamp(0.75rem, 1.6vw, 1.35rem);
}

.feature__media img { border-radius: calc(var(--r-card) - 8px); box-shadow: var(--shadow-card); }
.feature__media img { width: 100%; }

/* --- Service grid ------------------------------------------------------ */

.grid-3 { display: grid; gap: clamp(0.9rem, 1.6vw, 1.25rem); }

@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-4 { display: grid; gap: clamp(0.9rem, 1.6vw, 1.25rem); }

@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.svc { display: grid; gap: 0.75rem; align-content: start; }
.svc p { font-size: var(--t-small); }
.svc__tag {
  display: inline-block;
  padding: 0.12rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--deep);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* --- Dark violet band -------------------------------------------------- */

.band {
  background: var(--deep);
  border-radius: var(--r-lg);
  padding-block: var(--pad);
  color: var(--on-deep-2);
  position: relative;
  overflow: hidden;
}

.band h2, .band h3, .band h4 { color: var(--on-deep); }
.band .lead, .band p { color: var(--on-deep-2); }
.band .card { background: rgba(255, 255, 255, 0.06); box-shadow: none; }
.band .card h3 { color: var(--on-deep); }
.band .card p { color: var(--on-deep-2); }
.band .arrow { color: var(--on-deep-accent); }
.band .arrow:hover { color: #fff; }
.band .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.band .btn--ghost:hover { border-color: #fff; color: #fff; }

/* --- Stat row on the band --------------------------------------------- */

.stats { display: grid; gap: 1.5rem; }

@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { text-align: center; }
.stat b { display: block; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--on-deep); }
.stat span { font-size: var(--t-meta); color: var(--on-deep-2); }

/* --- Pricing / engagement cards --------------------------------------- */

.plans { display: grid; gap: clamp(1rem, 2vw, 1.5rem); align-items: start; }

@media (min-width: 940px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan { display: flex; flex-direction: column; }
.plan__label { font-size: var(--t-meta); font-weight: 700; color: var(--accent-ink); }
.plan h3 { margin-top: 0.35rem; }
.plan__what { margin-top: 0.5rem; font-size: var(--t-small); }
.plan__price { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.plan__price b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.plan__price small { display: block; margin-top: 0.25rem; font-size: var(--t-meta); color: var(--muted-text); }
.plan .ticks { margin-top: 1.25rem; }
.plan .btn { margin-top: 1.5rem; }

/* The reference lifts and darkens the middle plan. */
.plan--feature { background: var(--deep); }
.plan--feature h3, .plan--feature .plan__price b { color: var(--on-deep); }
.plan--feature .plan__label { color: var(--on-deep-accent); }
.plan--feature .plan__what, .plan--feature .ticks > li { color: var(--on-deep-2); }
.plan--feature .plan__price { border-top-color: rgba(255, 255, 255, 0.16); }
.plan--feature .plan__price small { color: var(--on-deep-2); }

@media (min-width: 940px) { .plan--feature { transform: translateY(-1rem); box-shadow: var(--shadow-float); } }

.plan__flag {
  position: absolute;
  top: 1.35rem; right: 1.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--deep);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* --- Work tiles -------------------------------------------------------- */

.work-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

@media (min-width: 880px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }

.work__frame { background: var(--page); overflow: hidden; }
.work__frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; transition: transform 600ms var(--ease); }
.card--link:hover .work__frame img { transform: scale(1.02); }
.work__body { padding: clamp(1.35rem, 2.4vw, 1.85rem); display: grid; gap: 0.6rem; }
.work__body p { font-size: var(--t-small); }

/* --- Accordion -------------------------------------------------------- */

.faq { display: grid; gap: 0.75rem; max-width: 52rem; margin-inline: auto; }

.faq details { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1.05rem clamp(1.15rem, 2vw, 1.6rem);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  width: 1.6rem; height: 1.6rem;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--lime);
  transition: transform var(--d-mid) var(--ease);
  -webkit-mask: none;
}

.faq summary { position: relative; }

.faq summary span.ic {
  position: absolute;
  right: calc(clamp(1.15rem, 2vw, 1.6rem) + 0.4rem);
  width: 0.8rem; height: 0.8rem;
  background: var(--deep);
  -webkit-mask: var(--ico-plus) center / contain no-repeat;
  mask: var(--ico-plus) center / contain no-repeat;
  transition: transform var(--d-mid) var(--ease);
  pointer-events: none;
}

.faq details[open] summary span.ic { transform: rotate(45deg); }
.faq p { padding: 0 clamp(1.15rem, 2vw, 1.6rem) 1.35rem; font-size: var(--t-small); }

/* --- Form ------------------------------------------------------------- */

.form { display: grid; gap: 1.15rem; }

@media (min-width: 700px) {
  .form { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--t-small); font-weight: 700; color: var(--ink); }
.field label .req { color: var(--accent-ink); }

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}

.field textarea { min-height: 9.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-text); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted-text); }

.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(138, 90, 69, 0.2);
}

.field .btn { justify-self: start; }
.field__hint { font-size: 0.875rem; color: var(--muted-text); max-width: 46ch; }
.field__error { font-size: var(--t-small); font-weight: 700; color: var(--danger); }

.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: 2px;
}

.form__honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 1.1rem 1.3rem; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); font-size: var(--t-small); }
.notice strong { display: block; margin-bottom: 0.25rem; }
.notice--ok { background: var(--rose-soft); color: var(--ink); }
.notice--ok strong, .notice--ok a { color: var(--ink); }

/* --- Footer -----------------------------------------------------------
   A full width deep band with a rounded top edge, four columns, and a
   subscribe field, in the shape of the reference the client chose.
   -------------------------------------------------------------------- */

.footer { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.footer__band {
  background: var(--deep);
  color: var(--on-deep-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding-block: clamp(2.75rem, 5vw, 4.5rem) 1.5rem;
}

.footer__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }

@media (min-width: 620px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brandcol { grid-column: 1 / -1; }
}

/* Four across only once each column can actually hold its content. Below this
   the brand column spans and the link columns pair up. */
@media (min-width: 1080px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .footer__brandcol { grid-column: auto; }
}

.brand--deep .brand__name { color: var(--on-deep); }
.brand--deep .brand__name span:last-child { color: var(--on-deep-accent); }

.footer__blurb { margin-top: 1.1rem; max-width: 34ch; font-size: var(--t-small); color: var(--on-deep-2); }

.subscribe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  max-width: 26rem;
}

/* The row wraps whenever its own column is too narrow. It must not be forced
   onto one line by a viewport media query: the column width and the viewport
   width are unrelated, which is what pushed the button over the next column. */
.subscribe input { flex: 1 1 10rem; min-width: 0; }
.subscribe .btn { flex: 0 1 auto; }

.subscribe input {
  flex: 1 1 12rem;
  min-height: 3rem;
  padding: 0.8rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-deep);
  font-family: var(--font);
  /* 16px minimum: iOS zooms the whole page when a focused field is smaller */
  font-size: var(--t-body);
}

.subscribe input::placeholder { color: var(--on-deep-2); }

.subscribe input:focus-visible {
  outline: none;
  border-color: var(--on-deep-accent);
  box-shadow: 0 0 0 3px rgba(210, 169, 146, 0.28);
}

.footer__micro { margin-top: 0.7rem; font-size: 0.875rem; color: var(--on-deep-2); opacity: 0.85; max-width: 40ch; }

.footer h2 {
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-deep-accent);
  margin-bottom: 1.1rem;
}

.footer__links { display: grid; gap: 0.35rem; }

.footer__links a {
  display: inline-block;
  padding-block: 0.35rem;
  font-size: var(--t-small);
  color: var(--on-deep-2);
  overflow-wrap: anywhere;
}

.footer__links a:hover { color: var(--on-deep); text-decoration: none; }
.footer__plain { display: block; padding-block: 0.35rem; font-size: var(--t-small); color: var(--on-deep-2); max-width: 22ch; overflow-wrap: anywhere; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  margin-top: clamp(2.25rem, 4vw, 3.25rem); padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.875rem; color: var(--on-deep-2);
}

.footer__social { display: flex; gap: 0.9rem; align-items: center; }
.footer__social a {
  display: inline-flex; width: 2.1rem; height: 2.1rem; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); color: var(--on-deep-2);
  transition: color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.footer__social a:hover, .footer__social a:focus-visible { color: #fff; border-color: rgba(255, 255, 255, 0.55); transform: translateY(-2px); }
.footer__social svg { width: 1.05rem; height: 1.05rem; }

/* the dimmed half of a heading, on the dark band */
.dim-deep { color: var(--on-deep-2); }

/* --- Motion ----------------------------------------------------------- */

.reveal-pending { opacity: 0; }
.reveal-in { animation: rise 560ms var(--ease) both; animation-delay: var(--d, 0ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .card--link:hover, .btn:hover { transform: none; }
  .card--link:hover .work__frame img { transform: none; }
  .blob { transform: none; }
}

/* --- Print ------------------------------------------------------------ */

@media print {
  .masthead, .nav-panel, .btn { display: none; }
  body { background: #fff; }
  .card, .footer__inner { box-shadow: none; border: 1px solid #ddd; }
  .band, .plan--feature { background: #fff; color: #000; }
  .band h2, .band h3, .band p { color: #000; }
}

/* ==========================================================================
   DEPTH AND ARTWORK
   Added so the home page reads as layered rather than flat. Three tools only:
   soft brand glows behind content, a dot field for ground texture, and real
   offset or overlapping geometry. No new colours are introduced.
   ========================================================================== */

/* A section that stacks artwork behind its content. */
.deep { position: relative; isolation: isolate; overflow: hidden; }
.deep > .wrap { position: relative; z-index: 2; }

/* Soft brand glows. Placed with intent, never centred symmetrically. */
/* Light is painted as a radial gradient on the section itself. A blurred
   circle element gets sliced by the section's overflow, and the slice reads as
   a hard edged grey band, which is what appeared under the masthead. */
.glow { display: none; }

.deep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52rem 30rem at 88% -12%, rgba(183, 136, 115, 0.16), transparent 62%),
    radial-gradient(38rem 26rem at 4% 108%, rgba(33, 26, 54, 0.07), transparent 60%);
}

.band.deep::before {
  background:
    radial-gradient(46rem 26rem at 82% -18%, rgba(183, 136, 115, 0.22), transparent 60%),
    radial-gradient(34rem 22rem at 8% 118%, rgba(183, 136, 115, 0.12), transparent 58%);
}

/* Ground texture. Masked so it fades out rather than tiling to a hard edge. */
.art--dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  color: rgba(33, 26, 54, 0.12);
  -webkit-mask-image: radial-gradient(75% 65% at 50% 35%, #000 25%, transparent 78%);
  mask-image: radial-gradient(75% 65% at 50% 35%, #000 25%, transparent 78%);
  pointer-events: none;
}

.band .art--dots { color: rgba(255, 255, 255, 0.16); }

/* --- Artwork pieces --------------------------------------------------- */

.art { display: block; }

/* The arc diagram sits in its own raised card and is allowed to overlap the
   boundary between two sections, which is what creates the sense of layers. */
.arc-card {
  position: relative;
  z-index: 3;
  background: var(--card);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-float);
  margin-bottom: clamp(-5rem, -6vw, -3rem);
}

.art--arc { width: 100%; height: auto; }

/* The infographic animates once, when it scrolls in. The line draws left to
   right and the stops arrive in sequence behind it. Everything is fully drawn
   without the script, so nothing here gates content. */
.arc-line {
  stroke-dasharray: 1100;
  stroke-dashoffset: 0;
}

.arc-card.reveal-in .arc-line { animation: arc-draw 1500ms var(--ease) both; }
.arc-card.reveal-in .arc-stop { animation: arc-pop 520ms var(--ease) both; animation-delay: var(--sd, 0s); }
.arc-card.reveal-in .arc-zone { animation: arc-fade 700ms var(--ease) both; }
.arc-card.reveal-in .arc-zone-label { animation: arc-fade 700ms var(--ease) both; animation-delay: 120ms; }

@keyframes arc-draw {
  from { stroke-dashoffset: 1100; }
  to { stroke-dashoffset: 0; }
}

@keyframes arc-pop {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

@keyframes arc-fade { from { opacity: 0; } to { opacity: 1; } }

.arc-stop { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .arc-card.reveal-in .arc-line,
  .arc-card.reveal-in .arc-stop,
  .arc-card.reveal-in .arc-zone,
  .arc-card.reveal-in .arc-zone-label { animation: none; }
}

/* At phone width the whole 920 unit diagram scales to about a third, which
   renders its labels at 6px. Below 760px it keeps a legible minimum width and
   scrolls inside its own card instead, and the labels are set larger so they
   survive the remaining downscale. */
@media (max-width: 760px) {
  .arc-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .art--arc { min-width: 34rem; }
  .art--arc text { font-size: 27px; }
}

/* The drawn marks on the problem cards. */
.art--mark { width: 4rem; height: 4rem; color: var(--ink); }

/* Arch divider: sits at the foot of a section, in the colour of what is next. */
/* The reference's scallop divider is deliberately not used here: it is a
   full-bleed section motif, and every band in this layout is a rounded inset
   card, so a scalloped edge reads as damage rather than as a transition. */

/* Node field for the dark band. */
.art--nodes {
  position: absolute;
  z-index: 0;
  right: -4rem; top: 50%;
  width: 40rem; max-width: 90%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 900px) { .art--nodes { display: none; } }

/* --- Depth on the hero media ------------------------------------------ */

/* An offset outline behind the frame, so the image reads as a plate set down
   on the page rather than pasted onto it. */
/* The frame clips its own children, so the offset outline is drawn on the media
   wrapper instead. Below 560px the float cards stop being absolute and join the
   flow, which stretches the wrapper down the whole stack and turns the outline
   into a stray line beside the cards, so it only exists above that width. */
@media (max-width: 559px) { .hero__media::before { display: none; } }

.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--r-lg);
  border: 2px solid var(--lime);
  opacity: 0.55;
  transform: translate(0.8rem, 0.8rem);
  pointer-events: none;
}

@media (min-width: 700px) { .hero__media::before { transform: translate(1.15rem, 1.15rem); } }

.hero__frame { position: relative; z-index: 1; }

/* A second small floating card on the opposite corner, which is what gives the
   hero its layered feel in the reference. */
.hero__float--top {
  position: absolute;
  right: -0.5rem; top: -1.25rem;
  left: auto; bottom: auto;
  width: min(13rem, 62%);
  padding: 0.85rem 1rem;
}

.hero__float--top .num { width: 2rem; height: 2rem; font-size: 0.7rem; }

@media (max-width: 560px) {
  .hero__float--top { position: static; width: auto; margin-bottom: 0.9rem; }
}

/* --- Stat strip -------------------------------------------------------- */

/* Deliberately not metrics. These are commitments, which we can stand behind. */
.pledges { display: grid; gap: 1rem; }

@media (min-width: 760px) { .pledges { grid-template-columns: repeat(3, 1fr); } }

.pledge { display: flex; align-items: flex-start; gap: 0.9rem; }
.pledge b { display: block; color: var(--ink); font-size: var(--t-small); font-weight: 700; }
.pledge span { font-size: var(--t-meta); color: var(--muted-text); }
.band .pledge b { color: var(--on-deep); }
.band .pledge span { color: var(--on-deep-2); }

@media (prefers-reduced-motion: reduce) {
  .glow { filter: blur(70px); }
}

@media print {
  .glow, .art--dots, .art--nodes { display: none; }
  .arc-card { box-shadow: none; margin-bottom: 0; border: 1px solid #ddd; }
  .hero__frame::before { display: none; }
}

/* ==========================================================================
   SECTION VARIETY
   The inner pages read pale because every section was white on near-white.
   These give a page three grounds to alternate between, plus the pieces that
   carry colour: a tinted wash, a rose plate, and a stat rail.
   ========================================================================== */

.section--wash { background: var(--page-2); }
.section--rose { background: var(--rose-soft); }
.section--rose .card { border: 1px solid rgba(33, 26, 54, 0.06); }

/* A rounded inset plate, so a section can sit on colour without going
   full bleed and fighting the page's card language. */
.plate {
  border-radius: var(--r-lg);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem);
}

.plate--rose { background: var(--rose-soft); }
.plate--wash { background: var(--page-2); }

/* Numbered rail: a vertical spine with the step markers on it. Used where a
   page needs a sequence to feel like a sequence. */
.rail { display: grid; gap: 0; position: relative; }

.rail__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: clamp(1.15rem, 2vw, 1.6rem);
  position: relative;
}

.rail__row + .rail__row { border-top: 1px solid var(--rule); }

.rail__no {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-pill);
  background: var(--rose-soft);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rail__row:last-child .rail__no { background: var(--lime); }
.band .rail__row + .rail__row { border-top-color: rgba(255, 255, 255, 0.14); }
.band .rail__no { background: rgba(255, 255, 255, 0.1); color: var(--on-deep); }
.band .rail__row:last-child .rail__no { background: var(--lime); color: var(--ink); }
.rail__row h3 { margin-bottom: 0.3rem; }
.rail__row p { font-size: var(--t-small); }

/* A quiet metric-free fact strip. */
.facts { display: grid; gap: 1.25rem; }

@media (min-width: 720px) { .facts { grid-template-columns: repeat(3, 1fr); } }

.fact { padding-left: 1.15rem; border-left: 3px solid var(--lime); }
.fact b { display: block; font-size: var(--t-small); font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; }
.fact span { font-size: var(--t-meta); color: var(--muted-text); }
.band .fact b { color: var(--on-deep); }
.band .fact span { color: var(--on-deep-2); }

/* Media that needs to sit on colour without washing out. */
.shot {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: clamp(0.7rem, 1.4vw, 1.1rem);
  box-shadow: var(--shadow-card);
}

.shot img { width: 100%; border-radius: calc(var(--r-card) - 10px); display: block; }
.shot figcaption { margin-top: 0.7rem; font-size: var(--t-meta); color: var(--muted-text); }