/* Malta Association of Dental Hygienists — brand system */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2010, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039, U+203A, U+2192, U+2197;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-0103, U+010A-010B, U+0110-0111, U+0120-0121, U+0126-0127, U+0152-0153, U+0160-0161, U+017B-017E;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/newsreader-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2010, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
}

:root {
  /* Brand — drawn from the MADH mark */
  --plum:        #4e3a66;
  --plum-deep:   #352947;
  --plum-soft:   #efeaf4;
  /* Interaction — the only colour that means "you can act on this" */
  --teal:        #166a63;
  --teal-dark:   #10534d;
  --teal-soft:   #e3f0ee;
  /* The logo's Maltese cross, and nothing else */
  --cross-red:   #a93b4a;
  /* Neutrals */
  --paper:       #faf8f5;
  --paper-dark:  #f3efea;
  --surface:     #ffffff;
  --ink:         #241e2e;
  --ink-soft:    #514a5c;
  --ink-muted:   #6b6375;
  --border:      #e5e0da;
  --border-soft: #eeeae4;
  --ok-bg:       #e3f0ee;
  --ok-ink:      #1f6b5d;
  --err-bg:      #fbe8e2;
  --err-ink:     #8f2f1e;

  /* Space — base 4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --radius:    8px;
  --radius-sm: 4px;
  --max:       1180px;
  --pad:       1.5rem;
  --hdr-pad:   .9rem;
  --ease:      180ms ease-out;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--ease), text-decoration-color var(--ease), text-decoration-thickness var(--ease); }
a:hover { color: var(--teal-dark); text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

h1, h2, h3 { font-family: var(--serif); color: var(--plum); margin: 0 0 .5em; }
h1 {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 480;
  font-variation-settings: 'opsz' 60;
  line-height: 1.06;
  letter-spacing: -.015em;
}
h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  font-variation-settings: 'opsz' 44;
  line-height: 1.14;
  letter-spacing: -.01em;
}
h3 {
  font-size: 1.375rem;
  font-weight: 600;
  font-variation-settings: 'opsz' 20;
  line-height: 1.28;
  letter-spacing: 0;
}
h4 { font-family: var(--sans); font-size: 1rem; font-weight: 650; line-height: 1.4; color: var(--ink); margin: 0 0 .5em; }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li + li { margin-top: .35em; }
li::marker { color: var(--teal); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s7) 0; }
strong { font-weight: 600; color: var(--ink); }
::selection { background: var(--teal-soft); }

/* Layout */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.container-narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--pad); }

.skip { position: absolute; left: -9999px; top: 0; padding: .6em 1em; background: var(--plum-deep); color: #fff; z-index: 100; border-radius: 0 0 var(--radius) var(--radius); }
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: var(--hdr-pad) var(--pad); max-width: var(--max); margin: 0 auto; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--plum); }
.brand img { width: auto; height: 52px; }
.brand:hover { color: var(--plum-deep); }
@media (max-width: 540px) { .brand img { height: 40px; } }

.nav { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.nav > li { position: relative; list-style: none; display: flex; align-items: center; margin: 0; }
.nav > li + li, .nav__submenu li + li { margin-top: 0; }
.nav a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 0 .75rem; height: 38px; line-height: 1;
  color: var(--ink); font-weight: 500; font-size: .9375rem;
  text-decoration: none; background: transparent; border: 0; cursor: pointer; font-family: inherit;
}
.nav a:hover { color: var(--teal); }
.nav > li > a[aria-current="page"] { color: var(--plum); font-weight: 600; }
.nav > li > a[aria-current="page"]::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--cross-red); flex: 0 0 auto;
}
.nav > li > a[aria-current="page"]::after {
  content: ""; position: absolute; left: .75rem; right: .75rem;
  bottom: calc(-1 * var(--hdr-pad) - 1px); height: 2px; background: var(--teal);
}
.nav__submenu {
  list-style: none; margin: 0; padding: var(--s2);
  position: absolute; top: calc(100% + var(--hdr-pad)); left: 0; min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(36,30,46,.08);
  opacity: 0; visibility: hidden;
  transition: opacity var(--ease), visibility 0s linear .18s;
}
.nav > li:hover > .nav__submenu,
.nav > li:focus-within > .nav__submenu { opacity: 1; visibility: visible; transition: opacity var(--ease), visibility 0s linear 0s; }
.nav__submenu a { display: block; width: 100%; padding: .5rem .7rem; height: auto; font-weight: 400; border-radius: var(--radius-sm); }
.nav__submenu a:hover { background: var(--paper-dark); color: var(--teal); }
.nav__caret { display: inline-flex; opacity: .5; }
.nav__caret svg { width: 12px; height: 12px; }

.nav-toggle { display: none; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .65rem; color: var(--ink); cursor: pointer; }
.nav-toggle__bar { display: block; width: 22px; height: 2px; background: currentColor; margin: 4px 0; }

/* Language picker — our own chrome over the native Google select */
.translate { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink-soft); font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.translate:hover { border-color: var(--teal); color: var(--teal); }
.translate:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; }
.translate svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* The widget's own chrome is hidden; its anchor becomes the button's hit area,
   so Google's language popup still opens where the button is. */
#google_translate_element { position: absolute; inset: 0; opacity: 0; }
#google_translate_element a { position: absolute; inset: 0; }
.goog-te-banner-frame, .goog-tooltip, .goog-tooltip:hover { display: none; }
.goog-text-highlight { background: none; box-shadow: none; }
body { top: 0; }

@media (max-width: 920px) {
  .nav-toggle { display: inline-block; }
  .nav {
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1001;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: var(--s3) var(--pad) var(--s5);
    max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav > li { width: 100%; display: block; }
  .nav a { width: 100%; padding: .7rem 0; height: auto; font-size: 1rem; }
  .nav > li > a[aria-current="page"]::after { left: calc(-1 * var(--pad)); right: auto; bottom: auto; top: 0; width: 2px; height: 100%; }
  .nav__submenu { opacity: 1; visibility: visible; position: static; box-shadow: none; border: 0; padding: 0 0 0 var(--s4); min-width: 0; }
  .nav__translate { margin-top: var(--s3); }
  .translate { display: inline-flex; }
}

/* ---------- Heroes ---------- */
/* fixed height on every page regardless of content, fitted to About Us's natural
   height (the longest copy on the site) at 1024–1440px, floored/capped outside that */
.hero { position: relative; overflow: hidden; padding: clamp(4rem, 8vw, 6.5rem) 0; height: clamp(354px, 26.6vw + 226px, 610px); display: flex; align-items: center; box-sizing: border-box; }
.hero__inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.hero h1 { color: inherit; max-width: 18ch; }
.hero h1 em { font-style: italic; }
.hero__lede { font-size: 1.1875rem; line-height: 1.55; max-width: 56ch; margin-top: var(--s5); }
.hero__cta { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__eyebrow { display: block; font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s4); }

/* Photo hero — image shown at its own aspect ratio, scaled to the hero's height,
   never cropped. Where it doesn't reach the viewport edge, a flat fill (sampled
   once from that image's own left/right 10% average colour) shows instead, and the
   image's own outer 10% fades into it via mask so there's no hard seam. */
.hero--photo { background: var(--plum-deep); color: #fff; }
/* the split fill colour only appears once the photo has actually loaded (JS
   toggles .is-loaded) — showing it immediately exposes a hard two-colour
   seam down the centre before the image arrives */
.hero--photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--fill-l, var(--plum-deep)) 0%, var(--fill-l, var(--plum-deep)) 50%, var(--fill-r, var(--plum-deep)) 50%, var(--fill-r, var(--plum-deep)) 100%);
  opacity: 0;
  transition: opacity 500ms ease;
}
.hero--photo.is-loaded::before { opacity: 1; }
.hero__photo {
  position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.hero--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(53,41,71,.92) 0%, rgba(53,41,71,.6) 55%, rgba(53,41,71,.3) 100%);
}
.hero--photo .hero__inner > * { max-width: 58%; }
.hero--photo .hero__eyebrow { color: rgba(255,255,255,.75); }
@media (max-width: 860px) {
  /* the fixed desktop height is fitted to About Us's longest copy at desktop
     widths — on narrow screens that same text wraps to more lines than the
     floor allows, so go back to natural content-driven height here instead
     of clipping it */
  .hero { height: auto; min-height: 0; }
  /* narrow viewports have no room for a 7/12 column, and the photo sits
     directly behind the copy — carry the tint across the whole band */
  .hero--photo .hero__inner > * { max-width: none; }
  .hero--photo::after { background: linear-gradient(185deg, rgba(53,41,71,.92), rgba(53,41,71,.72)); }
}

/* Flat hero — 404 only */
.hero--flat { background: var(--plum-deep); color: rgba(255,255,255,.92); }
.hero--flat h1 { color: #fff; }
.hero--flat .hero__eyebrow { color: rgba(255,255,255,.7); }

/* Hero entrance — the only animation on the site */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero h1, .hero .hero__lede { animation: rise 500ms cubic-bezier(.22,1,.36,1) both; }
.hero .hero__lede { animation-delay: 80ms; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: .75rem 1.375rem;
  border: 1.5px solid transparent; border-radius: var(--radius);
  font-family: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.4;
  text-decoration: none; cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.btn--ghost, .btn--outline { background: transparent; border-color: var(--plum); color: var(--plum); }
.btn--ghost:hover, .btn--outline:hover { background: var(--plum); color: #fff; }

.hero--photo .btn--outline, .hero--flat .btn--outline,
.section--brand .btn--outline { border-color: rgba(255,255,255,.7); color: #fff; }
.hero--photo .btn--outline:hover, .hero--flat .btn--outline:hover,
.section--brand .btn--outline:hover { background: #fff; color: var(--plum); }
.section--brand .btn--primary { background: #fff; border-color: #fff; color: var(--plum); }
.section--brand .btn--primary:hover { background: var(--paper-dark); border-color: var(--paper-dark); color: var(--plum); }

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: .875rem; color: var(--ink-muted); padding: var(--s5) 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "›"; padding: 0 .35rem; color: var(--ink-muted); }
.crumbs li + li { margin-top: 0; }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--teal); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ---------- Sections ---------- */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.section--alt { background: var(--paper-dark); }
.section--brand { background: var(--plum-deep); color: rgba(255,255,255,.9); }
.section--brand h1, .section--brand h2, .section--brand h3, .section--brand h4 { color: #fff; }
.section--brand a:not(.btn) { color: #fff; }
.section--brand .lede, .section--brand .muted, .section--brand .note { color: inherit; }

.section__head { max-width: 640px; margin: 0 0 var(--s7); }
.section__head:last-child { margin-bottom: 0; }
.section__head > :last-child { margin-bottom: 0; }

/* Section labels + the rule that marks a section start */
.label, .section__eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-muted);
  margin: 0 0 var(--s3);
}
.section__eyebrow::before {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--teal); margin-bottom: var(--s4);
}
.section--brand .section__eyebrow { color: rgba(255,255,255,.7); }
.section--brand .section__eyebrow::before { background: #fff; }

/* ---------- "What we do" (home) ---------- */
.whatwedo { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: start; }
@media (max-width: 860px) { .whatwedo { grid-template-columns: 1fr; gap: var(--s5); } }
.whatwedo__lead { background: var(--surface); border-radius: var(--radius); padding: var(--s6); }
.whatwedo__lead h3 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 500; font-variation-settings: 'opsz' 44; line-height: 1.14; letter-spacing: -.01em; }
.whatwedo__lead p:last-child, .whatwedo__item p:last-child { margin-bottom: 0; }
.whatwedo__item { padding: var(--s5) 0; border-top: 1px solid var(--border); }
.whatwedo__item:first-child { padding-top: 0; border-top: 0; }
.whatwedo__item h3 { margin-bottom: var(--s2); }
.whatwedo__item p { color: var(--ink-soft); }
.whatwedo__item p + p { margin-top: var(--s3); }

/* ---------- Fact band (home) ---------- */
.facts {
  display: flex; flex-wrap: wrap; margin: 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.facts > div {
  display: flex; flex-direction: column-reverse;
  padding: var(--s5) var(--s6); flex: 1 1 auto;
  border-left: 1px solid var(--border);
}
.facts > div:first-child { border-left: 0; padding-left: 0; }
.facts dt { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.facts dd { margin: 0 0 var(--s1); font-family: var(--serif); font-size: 1.25rem; font-weight: 500; font-variation-settings: 'opsz' 20; color: var(--ink); }
.facts__unit { font-size: .875em; }
@media (max-width: 640px) {
  .facts > div { flex: 1 1 50%; border-left: 0; padding: var(--s4) 0; }
  .facts > div:nth-child(n+2) { border-top: 1px solid var(--border); }
}

/* ---------- Notices (home) ---------- */
.notice {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--s4);
  background: var(--paper-dark); border-left: 1px solid var(--teal);
  padding: var(--s5); margin: 0 0 var(--s4);
}
.notice__icon { color: var(--teal); }
.notice__icon svg { width: 24px; height: 24px; }
.notice p { margin: 0; color: var(--ink); }
@media (max-width: 640px) { .notice { grid-template-columns: 1fr; } .notice__icon { display: none; } }

/* ---------- Prose ---------- */
.prose { max-width: 720px; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; }
.prose ul { padding-left: 1.4em; }
.prose blockquote { border-left: 1px solid var(--teal); padding: .4em 0 .4em 1.2em; margin: 1.6em 0; color: var(--ink-soft); font-style: italic; }
.prose img { border-radius: var(--radius); }
.prose figure { margin: 1.6em 0; }
.prose figcaption { font-size: .875rem; line-height: 1.5; color: var(--ink-muted); margin-top: var(--s2); }
.prose--wide { max-width: none; }

.figure-right { float: right; width: 260px; margin: 0 0 var(--s4) var(--s6); }
.figure-right img { width: 100%; }
@media (max-width: 640px) { .figure-right { float: none; width: 100%; margin: var(--s5) 0; } }

/* About page: the original full-colour emblem */
.brand-figure { background: var(--plum-soft); border-radius: var(--radius); padding: var(--s5); }
.brand-figure img { max-width: 160px; margin: 0 auto; }

/* ---------- Article + sidebar ---------- */
.layout { display: grid; gap: var(--s8); grid-template-columns: minmax(0, 1fr) 260px; }
@media (max-width: 880px) { .layout { grid-template-columns: 1fr; gap: var(--s7); } }
.sidebar { font-size: .9375rem; }
.sidebar__block + .sidebar__block { margin-top: var(--s7); }
.sidebar h4 { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin: 0 0 var(--s4); }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { margin: 0; }
.sidebar li + li { margin-top: 0; }
.sidebar ul a { display: block; padding: .35rem 0 .35rem var(--s3); border-left: 2px solid transparent; color: var(--ink-soft); text-decoration: none; }
.sidebar ul a:hover { color: var(--teal); }
.sidebar ul a[aria-current="page"] { border-left-color: var(--teal); color: var(--plum); font-weight: 600; }
.sidebar__facts { background: var(--paper-dark); border-radius: var(--radius); padding: var(--s5); }
.sidebar__facts dl { margin: 0; }
.sidebar__facts dt { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.sidebar__facts dd { margin: 0 0 var(--s4); color: var(--ink); }
.sidebar__facts dd:last-child { margin-bottom: 0; }

/* ---------- Committee table ---------- */
.committee { width: 100%; border-collapse: collapse; margin: 1em 0 2em; }
.committee th, .committee td { padding: .85rem 1rem .85rem 0; text-align: left; border-bottom: 1px solid var(--border); }
.committee th { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.committee td:first-child { font-weight: 600; color: var(--ink); width: 38%; }

/* ---------- Resource lists (downloads / links / articles) ---------- */
.resource-list { list-style: none; padding: 0; margin: var(--s6) 0 0; }
.resource-list li { margin: 0; border-top: 1px solid var(--border); }
.resource-list li + li { margin-top: 0; }
.resource-list li:last-child { border-bottom: 1px solid var(--border); }
.resource-list a { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); align-items: baseline; padding: var(--s5) 0; text-decoration: none; }
.resource-title { font-family: var(--serif); font-size: 1.1875rem; font-weight: 500; font-variation-settings: 'opsz' 20; color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.resource-list a:hover .resource-title { color: var(--teal-dark); text-decoration-thickness: 2px; }
.resource-meta { grid-column: 1; font-size: .875rem; line-height: 1.5; color: var(--ink-muted); }
.resource-list .ext {
  grid-row: 1; grid-column: 2; justify-self: end;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.resource-list .ext svg { width: 13px; height: 13px; }
/* icon-only tags (external links) need no box around them */
.resource-list .ext:has(svg) { border: 0; padding: 0; }

/* ---------- Sponsor product blocks ---------- */
.product { display: grid; grid-template-columns: 260px 1fr; gap: var(--s7); align-items: start; padding: var(--s7) 0; border-bottom: 1px solid var(--border); }
.product:last-of-type { border-bottom: 0; }
@media (max-width: 720px) { .product { grid-template-columns: 1fr; gap: var(--s5); } }
.product__img { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s5); }
.product__img img { mix-blend-mode: multiply; margin: 0 auto; }
.product h4 { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin: 1.6em 0 .4em; }

/* ---------- Panels ---------- */
.panel { background: var(--paper-dark); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 780px; }
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel__icon { color: var(--teal); margin-bottom: var(--s5); }
.panel__icon svg { width: 32px; height: 32px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: var(--s7); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-info { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s6); }
.contact-info dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s3) var(--s4); margin: 0; }
.contact-info dt { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); align-self: center; }
.contact-info dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .contact-info dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contact-info dt { align-self: start; }
  .contact-info dt + dd { margin: var(--s1) 0 var(--s5); }
  .contact-info dd:last-child { margin-bottom: 0; }
}

form.contact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s6); }
.form-note { background: var(--teal-soft); border-radius: var(--radius); padding: var(--s4); margin: 0 0 var(--s6); font-size: .9375rem; color: var(--ink); }
.field { margin-bottom: var(--s5); }
.field label { display: block; font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin-bottom: var(--s2); }
.field input, .field textarea {
  width: 100%; padding: .7rem .85rem; font: inherit;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  transition: border-color var(--ease), background var(--ease);
}
.field input:focus, .field textarea:focus { border-color: var(--teal); background: var(--surface); }
.field textarea { min-height: 140px; resize: vertical; }
.honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-msg { padding: var(--s4); border-radius: var(--radius); margin-bottom: var(--s5); font-size: .9375rem; }
.form-msg--ok { background: var(--ok-bg); color: var(--ok-ink); }
.form-msg--err { background: var(--err-bg); color: var(--err-ink); }

/* ---------- Sponsor acknowledgement (home) ---------- */
.sponsor-strip { background: var(--paper); padding: var(--s7) 0; border-top: 1px solid var(--border); }
.sponsor-strip__inner { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; }
.sponsor-strip__label { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.sponsor-strip a { display: inline-block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); }
.sponsor-strip a:hover { border-color: var(--teal); }
.sponsor-strip img { width: 140px; height: auto; }

/* ---------- Footer ---------- */
/* Plum gradient under faint Maltese-cross line-work — the tile is the real
   8-pointed cross, kept low enough in contrast to leave the copy alone. */
.site-footer {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1.5' stroke-linejoin='round' d='M37 20 64 33 91 20 64 64 108 37 95 64 108 91 64 64 91 108 64 95 37 108 64 64 20 91 33 64 20 37 64 64Z'/%3E%3C/svg%3E") 0 0 / 128px 128px repeat,
    linear-gradient(160deg, #43335c 0%, var(--plum-deep) 52%, #2a2039 100%);
  color: rgba(255,255,255,.9); padding: var(--s9) 0 var(--s6); font-size: .9375rem;
}
.site-footer a { color: rgba(255,255,255,.9); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s7); margin-bottom: var(--s8); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { margin-bottom: var(--s5); }
.footer-brand img { width: auto; height: 46px; }
.site-footer h4, .site-footer .footer-heading { color: #fff; font-family: var(--sans); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--s4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: .2rem 0; margin: 0; }
.site-footer li + li { margin-top: 0; }
.footer-note { font-size: .875rem; color: rgba(255,255,255,.7); }
.footer-bar {
  border-top: 1px solid rgba(255,255,255,.15); padding-top: var(--s5);
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2) var(--s5);
  text-align: center; font-size: .875rem; color: rgba(255,255,255,.7);
}

/* ---------- Helpers ---------- */
.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-soft); }
.muted { color: var(--ink-muted); }
.note { font-size: .875rem; line-height: 1.5; color: var(--ink-muted); }
.measure { max-width: 62ch; }
.stack-lg { margin-top: var(--s7); }

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .hero__cta, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
  .hero { background: none; color: #000; padding: 1rem 0; }
  .hero::before, .hero::after { display: none; }
  .hero h1, .hero__lede, .hero__eyebrow { color: #000; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms; animation: none; scroll-behavior: auto; }
}