/* ==========================================================================
   Bomber County Pipes & Drums — shared design system
   Tokens are sampled from the reference mockups (BCPD - Final Website Design Pack).
   Page-specific layouts live in css/pages/<page>.css.
   ========================================================================== */

/* ---------- Fonts (self-hosted, Latin subset, SIL OFL — see assets/fonts/licenses) ---------- */
@font-face { font-family: "Anton"; src: url("../assets/fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gloock"; src: url("../assets/fonts/gloock.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../assets/fonts/newsreader-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../assets/fonts/newsreader-italic-var.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("../assets/fonts/mulish-var.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../assets/fonts/caveat-var.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* colour */
  --navy-950: #001631;
  --navy-900: #001e3f;   /* top strip, footer, dark bands */
  --navy-800: #00245a;   /* headline ink */
  --navy-700: #002a66;   /* primary buttons */
  --navy-600: #0d3d7e;   /* hover */
  --navy-500: #1f4f8f;   /* eyebrow / accent text */
  --blue-400: #4f7fb8;
  --slate: #5d7189;
  --slate-light: #8098ae;
  --line: #c3d6e6;
  --line-soft: #dce8f2;
  --sky-300: #a8daf8;
  --sky-200: #c9e6fc;
  --sky-100: #e2f1fc;
  --ice: #eef7fd;
  --paper: #f6f6f3;
  --paper-warm: #f8f7f2;
  --ivory: #f3efe4;
  --parchment: #efe5cf;
  --white: #fff;
  --red: #bd2035;
  --gold: #c79c53;
  --teal: #0b3746;
  --ink: var(--navy-800);
  --text: #1c2e4a;
  --text-soft: #3d4f68;

  /* type */
  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-serif: "Gloock", "Playfair Display", Georgia, serif;
  --font-body: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui: "Mulish", "Segoe UI", system-ui, sans-serif;
  --font-script: "Caveat", "Segoe Script", cursive;

  --fs-hero: clamp(2.9rem, 1.2rem + 5.6vw, 6.6rem);
  --fs-display-2: clamp(2.2rem, 1rem + 3.6vw, 4.4rem);
  --fs-display-3: clamp(1.8rem, 1rem + 2.4vw, 3.2rem);
  --fs-serif-1: clamp(2.3rem, 1rem + 4.2vw, 5.2rem);
  --fs-serif-2: clamp(1.9rem, 1rem + 2.9vw, 3.8rem);
  --fs-card: clamp(1.25rem, 0.9rem + 1vw, 1.95rem);
  --fs-lede: clamp(1.15rem, 0.9rem + 1vw, 1.9rem);
  --fs-body: clamp(1.02rem, 0.86rem + 0.5vw, 1.34rem);
  --fs-small: clamp(0.95rem, 0.86rem + 0.22vw, 1.1rem);
  --fs-eyebrow: clamp(0.72rem, 0.64rem + 0.25vw, 0.9rem);
  --fs-script: clamp(1.4rem, 1rem + 1.3vw, 2.5rem);

  /* layout */
  --gutter: clamp(16px, 3.4vw, 52px);
  --container: 1380px;
  --section-y: clamp(2.2rem, 1.2rem + 2.6vw, 4.2rem);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgb(0 30 63 / .08), 0 2px 8px rgb(0 30 63 / .06);
  --shadow: 0 2px 6px rgb(0 30 63 / .08), 0 10px 28px rgb(0 30 63 / .12);
  --shadow-print: 0 2px 3px rgb(0 0 0 / .14), 0 8px 22px rgb(0 20 50 / .22);
  --wave-h: clamp(30px, 4.4vw, 66px);

  --tartan: url("../assets/img/shared/tex-tartan.webp");
  --paper-tex: url("../assets/img/shared/tex-paper.webp");
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; overflow-x: clip;
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5; color: var(--text);
  background: var(--paper-warm);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #2f7de1; outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .bg-navy :focus-visible, .site-footer :focus-visible, .topbar :focus-visible { outline-color: #9fd2ff; }
main:focus { outline: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--navy-700); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 8px 8px; font-family: var(--font-ui); font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 0; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2 * var(--gutter), 1480px); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.stack > * + * { margin-top: var(--stack, 1rem); }

/* ---------- Typography ---------- */
.display, .h-display {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: var(--ink);
  line-height: .9; letter-spacing: -.005em; font-size: var(--fs-hero);
}
.h-display--2 { font-size: var(--fs-display-2); line-height: .95; }
.h-display--3 { font-size: var(--fs-display-3); line-height: 1; }
.h-serif {
  font-family: var(--font-serif); font-weight: 400; color: var(--ink);
  font-size: var(--fs-serif-1); line-height: .98; letter-spacing: -.03em;
}
.h-serif--2 { font-size: var(--fs-serif-2); line-height: 1.02; }
.h-serif--caps { text-transform: uppercase; letter-spacing: -.01em; }
.h-serif--caps, .h-card--caps { -webkit-text-stroke: .025em currentColor; paint-order: stroke fill; }
.h-card { font-family: var(--font-serif); font-weight: 400; color: var(--ink); font-size: var(--fs-card); line-height: 1.08; letter-spacing: -.01em; }
.h-card--caps { text-transform: uppercase; font-size: calc(var(--fs-card) * .86); letter-spacing: 0; }
.eyebrow {
  font-family: var(--font-ui); font-weight: 800; font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase;
  color: var(--navy-500); display: flex; align-items: center; gap: .8em; margin-bottom: .9rem;
}
.eyebrow--rule::before, .eyebrow--rules::before, .eyebrow--rules::after { content: ""; width: 2.4em; height: 1.5px; background: currentColor; opacity: .8; }
.eyebrow--rule-after::after { content: ""; width: 3em; height: 1.5px; background: currentColor; opacity: .8; }
.eyebrow .dot { opacity: .7; }
.lede { font-family: var(--font-body); font-size: var(--fs-lede); line-height: 1.25; color: var(--ink); }
.prose p + p { margin-top: 1em; }
.prose { color: var(--text-soft); }
.text-ink { color: var(--ink); }
.rule-short { display: block; width: 3.2rem; height: 2px; background: var(--blue-400); opacity: .6; margin: 1.3rem 0; border: 0; }

/* Handwritten annotations */
.script {
  font-family: var(--font-script); font-weight: 600; font-style: oblique 12deg; font-synthesis: style;
  color: var(--navy-700); font-size: var(--fs-script); line-height: 1.02; letter-spacing: .005em;
  transform: rotate(var(--tilt, -9deg)); transform-origin: left center;
}
.script--underline::after {
  content: ""; display: block; width: 92%; height: .5em; margin-top: .12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 14 C60 6 130 3 196 4' stroke='%23002a66' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18 21 C80 13 140 10 190 11' stroke='%23002a66' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.on-dark .script, .script--light { color: #e8f2ff; }
.on-dark .script--underline::after, .script--light.script--underline::after { filter: brightness(0) invert(1); opacity: .9; }

/* ---------- Icons ---------- */
.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }
.icon-badge {
  --size: clamp(46px, 3.6vw, 60px);
  display: inline-grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--navy-800); color: #fff; box-shadow: 0 0 0 3px #fff, 0 3px 10px rgb(0 30 63 / .3); flex: none;
}
.icon-badge .icon { width: 56%; height: 56%; }
.icon-badge--sm { --size: 40px; }
.icon-badge--lg { --size: clamp(56px, 4.6vw, 74px); }
.icon-badge--outline { background: #fff; color: var(--navy-800); box-shadow: 0 0 0 2px var(--navy-800); }
.icon-line { color: var(--navy-800); }

/* ---------- Buttons & links ---------- */
.btn {
  --h: clamp(44px, 2rem + 1.6vw, 58px);
  display: inline-flex; align-items: center; justify-content: center; gap: .65em; min-height: var(--h);
  padding: 0 clamp(1.1rem, .8rem + 1vw, 1.7rem); border-radius: 999px; border: 2px solid transparent;
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(.92rem, .78rem + .45vw, 1.2rem); line-height: 1.1;
  text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn__arrow { width: 1.15em; height: 1.15em; transition: transform .2s; }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--primary { background: var(--navy-700); color: #fff; box-shadow: 0 2px 8px rgb(0 42 102 / .25); }
.btn--primary:hover { background: var(--navy-600); }
.btn--outline { background: rgb(255 255 255 / .9); color: var(--navy-700); border-color: var(--navy-700); }
.btn--outline:hover { background: #fff; border-color: var(--navy-600); color: var(--navy-600); box-shadow: 0 2px 10px rgb(0 42 102 / .15); }
.btn--light { background: #fff; color: var(--navy-800); }
.btn--light:hover { background: var(--sky-100); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / .85); }
.btn--ghost-light:hover { background: rgb(255 255 255 / .12); }
.btn--sm { --h: clamp(40px, 2rem + .5vw, 46px); font-size: clamp(.86rem, .8rem + .15vw, .98rem); padding-inline: 1.2rem; }
.btn--gold { background: var(--gold); color: var(--navy-900); }
.btn--gold:hover { background: #d8b06a; }
.btn .icon:not(.btn__arrow) { width: 1.2em; height: 1.2em; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; }

.text-link {
  display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-ui); font-weight: 800; font-size: clamp(.74rem, .66rem + .2vw, .88rem);
  letter-spacing: .16em; text-transform: uppercase; color: var(--navy-800); text-decoration: none;
  padding-bottom: .3em; border-bottom: 1.5px solid currentColor;
}
.text-link .icon { width: 1.2em; height: 1.2em; transition: transform .2s; }
.text-link:hover .icon { transform: translateX(3px); }
.text-link:hover { color: var(--navy-500); }

/* ---------- Top contact strip ---------- */
.topbar { background: var(--navy-900); color: #e6eef8; font-family: var(--font-ui); font-size: clamp(.78rem, .7rem + .2vw, .92rem); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.topbar__contact { display: flex; gap: clamp(1rem, 3vw, 2.6rem); }
.topbar__contact a { display: inline-flex; align-items: center; gap: .55em; text-decoration: none; }
.topbar__contact a:hover span { text-decoration: underline; }
.topbar__contact .icon { width: 1.1em; height: 1.1em; }
.topbar__tagline { font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .8em; }
.topbar__tagline span { margin: 0 .55em; opacity: .8; }

/* ---------- Masthead / brand / nav ---------- */
.site-header { position: sticky; top: -40px; z-index: 100; }
.masthead {
  position: relative; z-index: 60;
  background: #fff;
  border-bottom: 1px solid rgb(0 42 102 / .06); transition: box-shadow .25s;
}
.masthead.is-stuck { box-shadow: 0 4px 20px rgb(0 30 63 / .12); }
.masthead__inner { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.5rem); min-height: clamp(72px, 3rem + 3.6vw, 112px); }
.brand { display: inline-flex; align-items: center; gap: clamp(.6rem, 1vw, 1rem); text-decoration: none; color: var(--navy-700); flex: none; }
.brand__crest { position: relative; z-index: 2; width: clamp(54px, 1.6rem + 5.2vw, 128px); height: auto; aspect-ratio: 1; border-radius: 50%; margin-block: clamp(-30px, -1.6vw, 0px) clamp(-34px, -2vw, 0px); filter: drop-shadow(0 3px 6px rgb(0 0 0 / .3)); }
.brand__text { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.brand__name { font-family: var(--font-serif); white-space: nowrap; font-size: clamp(1.25rem, .75rem + 1.55vw, 2.3rem); letter-spacing: .01em; text-transform: uppercase; color: var(--navy-700); text-align: center; }
.brand__sub {
  display: flex; align-items: center; gap: .6em; margin-top: .32em;
  font-family: var(--font-ui); font-weight: 600; font-size: clamp(.68rem, .5rem + .5vw, 1.08rem); letter-spacing: .3em; text-transform: uppercase; color: var(--navy-700); white-space: nowrap;
}
.brand__sub::before, .brand__sub::after { content: ""; width: 1.6em; height: 1.5px; background: var(--blue-400); }
.brand--hangars .brand__name { font-size: clamp(1.05rem, .8rem + .9vw, 1.7rem); line-height: 1.02; }
.brand--hangars .brand__sub { letter-spacing: .24em; font-size: clamp(.6rem, .5rem + .3vw, .8rem); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 2.2rem); }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: .3em; padding: .55rem .1rem;
  font-family: var(--font-ui); font-weight: 600; font-size: clamp(.86rem, .72rem + .36vw, 1.08rem); color: var(--navy-800);
  text-decoration: none; background: none; border: 0; white-space: nowrap;
}
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 2px; background: var(--navy-700); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav__link:hover::after, .nav__item.is-active > .nav__link::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__item.is-active > .nav__link { font-weight: 800; }
.nav__toggle { background: none; border: 0; padding: .4rem .15rem; color: var(--navy-700); display: inline-flex; align-items: center; }
.nav__toggle--label { padding: .55rem .1rem; }
.nav__chev { width: .7em; height: .7em; opacity: .55; transition: transform .2s; }
.nav__toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 6px); left: -1rem; min-width: 15rem; padding: .5rem;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line-soft);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility .18s;
}
.nav__item.is-open > .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a { display: block; padding: .6rem .8rem; border-radius: 6px; font-family: var(--font-ui); font-weight: 600; font-size: .94rem; color: var(--navy-800); text-decoration: none; }
.nav__menu a:hover, .nav__menu a[aria-current="page"] { background: var(--sky-100); }
.nav__panel-head, .nav__burger, .nav__close { display: none; }
.header__cta { flex: none; }
.nav__item--back .nav__link { color: var(--slate); font-weight: 600; }

.subnav { background: #fff; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.subnav__list { display: flex; justify-content: flex-end; gap: clamp(1rem, 3vw, 3.2rem); overflow-x: auto; scrollbar-width: thin; padding-block: .1rem; }
.subnav a { display: block; white-space: nowrap; padding: .6rem 0; font-family: var(--font-ui); font-size: .84rem; font-weight: 600; color: var(--navy-800); text-decoration: none; border-bottom: 2px solid transparent; }
.subnav a:hover { border-color: var(--line); }
.subnav a.is-active { border-color: var(--navy-700); font-weight: 800; }

@media (max-width: 1180px) {
  .nav__burger {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    border: 1.5px solid var(--line); background: #fff; color: var(--navy-800); font-size: 1.4rem; margin-left: .25rem;
  }
  .nav { margin-left: auto; }
  .nav__panel {
    position: fixed; inset: 0 0 0 auto; width: min(92vw, 380px); z-index: 200; background: #fff;
    padding: 1rem 1.25rem 2rem; overflow-y: auto; box-shadow: -10px 0 40px rgb(0 20 50 / .25);
    display: none;
  }
  .nav.is-open .nav__panel { display: block; animation: nav-in .3s ease; }
  @keyframes nav-in { from { transform: translateX(100%); } to { transform: none; } }
  .nav.is-open::before { content: ""; position: fixed; inset: 0; background: rgb(0 22 49 / .5); z-index: 199; animation: nav-fade .3s ease; }
  @keyframes nav-fade { from { opacity: 0; } }
  .nav__panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .8rem; border-bottom: 1px solid var(--line-soft); margin-bottom: .6rem; }
  .nav__panel-title { font-family: var(--font-ui); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; color: var(--slate); }
  .nav__close { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--navy-800); font-size: 1.2rem; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); }
  .nav__link { flex: 1; padding: .95rem .25rem; font-size: 1.08rem; }
  .nav__link::after { display: none; }
  .nav__item.is-active > .nav__link { color: var(--navy-600); }
  .nav__toggle { width: 44px; height: 44px; justify-content: center; }
  .nav__toggle--label { width: auto; flex: 1; justify-content: space-between; height: auto; }
  .nav__menu { position: static; flex-basis: 100%; min-width: 0; box-shadow: none; border: 0; padding: 0 0 .6rem .6rem; display: none; opacity: 1; visibility: visible; transform: none; }
  .nav__item.is-open > .nav__menu { display: block; }
  .header__cta { margin-left: auto; }
  .nav { order: 3; margin-left: 0; }
}
@media (max-width: 640px) {
  .topbar__tagline, .topbar__web { display: none; }
  .topbar__contact { width: 100%; justify-content: space-between; font-size: .78rem; }
  .header__cta { --h: 40px; padding-inline: .9rem; font-size: .84rem; }
  .header__cta .btn__arrow { display: none; }
  .brand__name { font-size: 1.05rem; }
  .brand__sub { font-size: .6rem; letter-spacing: .18em; }
  .brand__sub::before, .brand__sub::after { width: .8em; }
  .brand__crest { width: 46px; }
  .masthead__inner { gap: .6rem; }
}
@media (max-width: 400px) { .masthead .brand__text { display: none; } }

/* ---------- Hero framework ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(ellipse 40% 26% at 18% 22%, rgb(255 255 255 / .85), transparent 70%),
    radial-gradient(ellipse 30% 18% at 42% 8%, rgb(255 255 255 / .7), transparent 70%),
    radial-gradient(ellipse 50% 30% at 8% 70%, rgb(255 255 255 / .7), transparent 70%),
    linear-gradient(180deg, #b9ddf6 0%, #d6ecfb 38%, #eef7fd 72%, #f3f1e6 100%);
}
.hero__media { position: absolute; inset: 0 0 0 auto; width: var(--media-w, 62%); z-index: -1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media--fade img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade, 22%));
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade, 22%));
}
.hero__inner { position: relative; display: grid; align-content: center; min-height: var(--hero-h, clamp(420px, 42vw, 640px)); padding-block: clamp(2rem, 4vw, 4.5rem) calc(var(--wave-h) + clamp(1.5rem, 3vw, 3rem)); }
.hero__copy { max-width: var(--copy-w, 46rem); position: relative; z-index: 2; }
.hero__copy .display { margin-bottom: clamp(.8rem, 1.4vw, 1.4rem); text-shadow: 0 0 30px rgb(255 255 255 / .55); }
.hero__lede { font-size: var(--fs-lede); line-height: 1.22; color: var(--navy-800); max-width: 34ch; margin-bottom: clamp(1.2rem, 2.2vw, 2rem); text-shadow: 0 0 14px rgb(255 255 255 / .9), 0 0 2px rgb(255 255 255 / .9); }
.hero__lede--sm { font-size: clamp(1.02rem, .9rem + .45vw, 1.35rem); line-height: 1.38; max-width: 44ch; }
.hero__note { position: absolute; right: clamp(1rem, 4vw, 4.5rem); top: clamp(1rem, 3vw, 3rem); z-index: 3; }
.hero > .tartan-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 4; }
@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; }
  .hero__media { position: relative; width: 100%; height: clamp(240px, 62vw, 460px); order: 2; inset: auto; z-index: 0; }
  .hero__media--fade img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .hero__inner { min-height: 0; padding-block: 2rem 0; order: 1; }
  .hero__copy { max-width: none; }
  .hero__note { position: absolute; top: auto; bottom: calc(var(--wave-h) + 1rem); right: 1rem; font-size: 1.3rem; text-shadow: 0 0 8px #fff; }
  .hero > .tartan-wave { order: 3; }
}

/* ---------- Tartan ribbons ---------- */
.tartan-wave { position: relative; height: var(--wave-h); pointer-events: none; }
.tartan-wave::before, .tartan-wave::after { content: ""; position: absolute; inset: 0; }
.tartan-wave::before {
  background: linear-gradient(180deg, rgb(0 0 0 / .32), transparent 34%, transparent 62%, rgb(0 0 0 / .38)), var(--tartan) 0 0 / 150px 150px repeat;
  -webkit-mask: var(--wave-mask) center / 100% 100% no-repeat; mask: var(--wave-mask) center / 100% 100% no-repeat;
}
.tartan-wave::after { background: var(--wave-rim) center / 100% 100% no-repeat; }
.tartan-wave--hero-r, .tartan-wave--flip { transform: scaleX(-1); }
.tartan-wave--band { height: calc(var(--wave-h) * 1.25); }
.tartan-wave--edge-top { height: calc(var(--wave-h) * 1.1); }
/* @waves-start (generated by src/waves.py — do not edit by hand) */
.tartan-wave--hero, .tartan-wave--hero-r { --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C260 8 520 62 820 68 C1080 74 1280 30 1440 6 L1440 54 C1260 78 1060 100 800 100 C520 100 260 70 0 96 Z'/%3E%3C/svg%3E"); --wave-rim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C260 8 520 62 820 68 C1080 74 1280 30 1440 6' fill='none' stroke='white' stroke-width='2.4' vector-effect='non-scaling-stroke' stroke-opacity='.92'/%3E%3Cpath d='M0 30 C260 8 520 62 820 68 C1080 74 1280 30 1440 6' fill='none' stroke='%2391b7dd' stroke-width='1' vector-effect='non-scaling-stroke' transform='translate(0 4)' stroke-opacity='.5'/%3E%3Cpath d='M1440 54 C1260 78 1060 100 800 100 C520 100 260 70 0 96' fill='none' stroke='white' stroke-width='2.4' vector-effect='non-scaling-stroke' stroke-opacity='.92'/%3E%3Cpath d='M1440 54 C1260 78 1060 100 800 100 C520 100 260 70 0 96' fill='none' stroke='%2391b7dd' stroke-width='1' vector-effect='non-scaling-stroke' transform='translate(0 4)' stroke-opacity='.5'/%3E%3C/svg%3E"); }
.tartan-wave--band { --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 18 C360 0 700 40 1060 22 C1240 13 1360 6 1440 8 L1440 80 C1240 96 1040 64 720 82 C420 100 180 92 0 84 Z'/%3E%3C/svg%3E"); --wave-rim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 18 C360 0 700 40 1060 22 C1240 13 1360 6 1440 8' fill='none' stroke='white' stroke-width='2.4' vector-effect='non-scaling-stroke' stroke-opacity='.92'/%3E%3Cpath d='M0 18 C360 0 700 40 1060 22 C1240 13 1360 6 1440 8' fill='none' stroke='%2391b7dd' stroke-width='1' vector-effect='non-scaling-stroke' transform='translate(0 4)' stroke-opacity='.5'/%3E%3Cpath d='M1440 80 C1240 96 1040 64 720 82 C420 100 180 92 0 84' fill='none' stroke='white' stroke-width='2.4' vector-effect='non-scaling-stroke' stroke-opacity='.92'/%3E%3Cpath d='M1440 80 C1240 96 1040 64 720 82 C420 100 180 92 0 84' fill='none' stroke='%2391b7dd' stroke-width='1' vector-effect='non-scaling-stroke' transform='translate(0 4)' stroke-opacity='.5'/%3E%3C/svg%3E"); }
.tartan-wave--edge-top { --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 44 C300 8 640 70 980 40 C1180 22 1320 18 1440 30 L1440 100 L0 100 Z'/%3E%3C/svg%3E"); --wave-rim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 44 C300 8 640 70 980 40 C1180 22 1320 18 1440 30' fill='none' stroke='white' stroke-width='2.4' vector-effect='non-scaling-stroke' stroke-opacity='.92'/%3E%3Cpath d='M0 44 C300 8 640 70 980 40 C1180 22 1320 18 1440 30' fill='none' stroke='%2391b7dd' stroke-width='1' vector-effect='non-scaling-stroke' transform='translate(0 4)' stroke-opacity='.5'/%3E%3C/svg%3E"); }
.tartan-wave--edge { --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 58 C1120 92 800 46 480 74 C260 92 100 90 0 72 Z'/%3E%3C/svg%3E"); --wave-rim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M1440 58 C1120 92 800 46 480 74 C260 92 100 90 0 72' fill='none' stroke='white' stroke-width='2.4' vector-effect='non-scaling-stroke' stroke-opacity='.92'/%3E%3Cpath d='M1440 58 C1120 92 800 46 480 74 C260 92 100 90 0 72' fill='none' stroke='%2391b7dd' stroke-width='1' vector-effect='non-scaling-stroke' transform='translate(0 4)' stroke-opacity='.5'/%3E%3C/svg%3E"); }
.tartan-wave--ribbon { --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 42 C240 12 480 72 720 42 C960 12 1200 70 1440 40 L1440 66 C1200 96 960 38 720 68 C480 98 240 38 0 68 Z'/%3E%3C/svg%3E"); --wave-rim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 42 C240 12 480 72 720 42 C960 12 1200 70 1440 40' fill='none' stroke='white' stroke-width='2.4' vector-effect='non-scaling-stroke' stroke-opacity='.92'/%3E%3Cpath d='M0 42 C240 12 480 72 720 42 C960 12 1200 70 1440 40' fill='none' stroke='%2391b7dd' stroke-width='1' vector-effect='non-scaling-stroke' transform='translate(0 4)' stroke-opacity='.5'/%3E%3Cpath d='M1440 66 C1200 96 960 38 720 68 C480 98 240 38 0 68' fill='none' stroke='white' stroke-width='2.4' vector-effect='non-scaling-stroke' stroke-opacity='.92'/%3E%3Cpath d='M1440 66 C1200 96 960 38 720 68 C480 98 240 38 0 68' fill='none' stroke='%2391b7dd' stroke-width='1' vector-effect='non-scaling-stroke' transform='translate(0 4)' stroke-opacity='.5'/%3E%3C/svg%3E"); }
/* @waves-end */

/* Straight tartan band (copyright strip, banner edges) */
.tartan-strip { height: 14px; background: linear-gradient(180deg, rgb(0 0 0 / .3), transparent 40%, rgb(0 0 0 / .35)), var(--tartan) 0 0 / 120px 120px; }

/* ---------- Backgrounds & decoration ---------- */
.bg-paper { background: var(--paper-tex) 0 0 / 512px, var(--paper-warm); }
.bg-white { background: #fff; }
.bg-ice { background: var(--ice); }
.bg-sky {
  background:
    radial-gradient(ellipse 50% 40% at 85% 10%, rgb(255 255 255 / .55), transparent 70%),
    radial-gradient(ellipse 40% 30% at 10% 90%, rgb(255 255 255 / .5), transparent 70%),
    linear-gradient(180deg, var(--sky-200), #dcefff 55%, var(--sky-100));
}
.bg-sky-soft { background: linear-gradient(180deg, #e3f2fd, #eef7fd 60%, #f6fafd); }
.bg-parchment { background: var(--paper-tex) 0 0 / 512px, linear-gradient(180deg, #f6f1e4, #efe6d2); }
.bg-navy { background: radial-gradient(ellipse 70% 90% at 80% 0%, #0a2e5c, transparent 70%), linear-gradient(180deg, var(--navy-900), var(--navy-950)); color: #eaf2fb; }
.on-dark { color: #eaf2fb; }
.on-dark .h-serif, .on-dark .h-display, .on-dark .display, .on-dark .h-card, .bg-navy .h-serif, .bg-navy .h-display, .bg-navy .h-card { color: #fff; }
.on-dark .eyebrow, .bg-navy .eyebrow { color: #b8d6f5; }
.on-dark .prose, .bg-navy .prose { color: #d4e2f1; }
.on-dark .text-link, .bg-navy .text-link { color: #fff; }

.deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.deco img { width: 100%; height: auto; }
.deco--faint { opacity: .55; }
.deco--ghost { opacity: .3; }
.deco--light img { filter: brightness(0) invert(1); }
.deco--thistle-l { left: -1%; width: clamp(80px, 9vw, 150px); }
.deco--thistle-r { right: -1%; width: clamp(80px, 9vw, 150px); }
.deco--thistle-r img { transform: scaleX(-1); }
.has-deco > .container, .has-deco > .container--wide { position: relative; z-index: 1; }

/* ---------- Section heading blocks ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.6rem); }
.section-head__text { max-width: 60rem; }
.section-head .lede { margin-top: .6rem; }
.section-head--center { justify-content: center; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ---------- Five-category icon strip (home, engagements, faqs) ---------- */
.icon-strip {
  position: relative; z-index: 5; margin-top: calc(var(--wave-h) * -.55);
  background: var(--paper-tex) 0 0 / 512px, #fbfaf6; border-radius: var(--radius-lg); box-shadow: var(--shadow);
  border: 1px solid rgb(0 42 102 / .06);
}
.icon-strip ul { display: grid; grid-template-columns: repeat(5, 1fr); }
.icon-strip li + li { border-left: 1px solid var(--line); }
.icon-strip li { margin-block: 1.2rem; }
.icon-strip a, .icon-strip .icon-strip__item {
  display: flex; flex-direction: column; align-items: center; gap: .65rem; padding: .3rem .8rem; text-align: center; text-decoration: none;
  font-family: var(--font-body); font-weight: 600; letter-spacing: .01em; text-transform: uppercase; font-size: clamp(.8rem, .58rem + .58vw, 1.1rem); line-height: 1.15; color: var(--navy-800);
}
.icon-strip .icon { width: clamp(38px, 1.6rem + 2.4vw, 66px); height: clamp(38px, 1.6rem + 2.4vw, 66px); color: var(--navy-800); transition: transform .25s; }
.icon-strip a:hover .icon { transform: translateY(-3px); }
.icon-strip a:hover span { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 760px) {
  .icon-strip ul { grid-template-columns: repeat(2, 1fr); }
  .icon-strip li { border-left: 0 !important; border-top: 1px solid var(--line); margin: 0; padding-block: .9rem; }
  .icon-strip li:nth-child(-n+2) { border-top: 0; }
  .icon-strip li:nth-child(even) { border-left: 1px solid var(--line) !important; }
  .icon-strip li:last-child { grid-column: 1 / -1; }
}

/* ---------- Cards ---------- */
.card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.card__media { position: relative; aspect-ratio: var(--ratio, 16 / 10); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card__media img, .card:focus-within .card__media img { transform: scale(1.035); }
.card__badge { position: absolute; left: clamp(10px, 1.2vw, 18px); top: clamp(10px, 1.2vw, 18px); z-index: 2; }
.card__badge--bottom { top: auto; bottom: 0; transform: translateY(50%); }
.card__body { display: flex; flex-direction: column; gap: .45rem; padding: clamp(1rem, 1.6vw, 1.5rem); flex: 1; }
.card__body p { color: var(--text-soft); font-size: var(--fs-small); line-height: 1.4; }
.card__body .text-link { margin-top: auto; align-self: flex-start; padding-top: .7rem; }
.card--ice { background: linear-gradient(180deg, #f2f9fe, #e6f3fc); }
.card--paper { background: var(--paper-tex) 0 0 / 512px, #fbfaf6; }
.card__link-cover { text-decoration: none; }
.card__link-cover:hover, .card__link-cover:focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; }
.card__link-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card a.text-link { position: relative; z-index: 2; }
/* "Find out more" labels on whole-card links are decorative: clicks pass through to the card link */
span.text-link, .card__badge, .service-row__icon { pointer-events: none; }
:is(.card, .service-row, li):has(.card__link-cover:hover, .card__link-cover:focus-visible) span.text-link { color: var(--navy-500); }
:is(.card, .service-row, li):has(.card__link-cover:hover) span.text-link .icon { transform: translateX(3px); }

/* Scrapbook prints */
.print {
  position: relative; background: #fff; padding: clamp(5px, .6vw, 10px); box-shadow: var(--shadow-print);
  transform: rotate(var(--rot, 0deg)); transition: transform .4s ease;
}
.print img { width: 100%; height: 100%; object-fit: cover; }
.print--tape::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; transform: translateX(-50%) rotate(-4deg);
  background: rgb(240 232 210 / .85); box-shadow: 0 1px 2px rgb(0 0 0 / .1);
}
.print--bw img { filter: grayscale(1) contrast(1.05); }
@media (prefers-reduced-motion: no-preference) { .print:hover { transform: rotate(0deg) scale(1.02); z-index: 5; } }

/* Feature columns with vertical rules */
.features { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); }
.features > * { padding-inline: clamp(.5rem, 1vw, 1.1rem); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.features > * + * { border-left: 1px solid var(--line); }
.features .icon-lg { width: clamp(40px, 1.8rem + 2vw, 66px); height: clamp(40px, 1.8rem + 2vw, 66px); color: var(--navy-800); }
.features h3 { font-family: var(--font-body); font-weight: 600; letter-spacing: .01em; text-transform: uppercase; font-size: clamp(.82rem, .66rem + .42vw, 1.06rem); line-height: 1.15; color: var(--navy-800); }
.features p { font-size: var(--fs-small); line-height: 1.35; color: var(--text-soft); }
@media (max-width: 760px) {
  .features { grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; }
  .features > * + * { border-left: 0; }
  .features > :nth-child(even) { border-left: 1px solid var(--line); }
}

/* Checklists */
.checklist { display: grid; gap: .55rem; }
.checklist li { display: grid; grid-template-columns: 1.35rem 1fr; gap: .6rem; align-items: start; font-size: .95rem; line-height: 1.3; color: var(--text); }
.checklist .icon { width: 1.35rem; height: 1.35rem; color: var(--navy-700); margin-top: .05rem; }

/* ---------- Social badges ---------- */
.socials { display: flex; flex-wrap: wrap; gap: clamp(.8rem, 2vw, 2.2rem); }
.social { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .4rem; text-decoration: none; font-family: var(--font-ui); font-weight: 700; font-size: .8rem; color: var(--navy-800); text-align: center; line-height: 1.1; max-width: 6.5rem; }
.social__badge { --s: clamp(40px, 2.2rem + .9vw, 54px); display: grid; place-items: center; flex: none; width: var(--s); height: var(--s); min-height: 0; border-radius: 50%; color: #fff; box-shadow: 0 3px 10px rgb(0 0 0 / .15); transition: transform .2s; }
.social__badge .icon { width: calc(var(--s) * .56); height: calc(var(--s) * .56); }
a.social:hover .social__badge { transform: translateY(-3px); }
.social--pending { cursor: default; }
.social--whatsapp .social__badge { background: #25d366; }
.social--facebook .social__badge { background: #0866ff; }
.social--instagram .social__badge { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social--tiktok .social__badge { background: #111; }
.social--youtube .social__badge { background: #f00; }
.socials--footer { gap: .9rem; margin-top: 1rem; }
.socials--footer .social__badge { --s: 34px; background: transparent !important; box-shadow: none; border: 1.5px solid rgb(255 255 255 / .85); }
.socials--light .social { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { position: relative; color: #e6eef8; margin-top: calc(var(--wave-h) * -.5); }
.site-footer__wave { position: relative; z-index: 2; margin-bottom: -2px; }
.site-footer__main {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse 60% 120% at 50% 0%, #07305e 0%, transparent 70%), linear-gradient(180deg, var(--navy-900), var(--navy-950));
  padding-block: clamp(2rem, 3.5vw, 3.4rem);
}
.site-footer__main::after {
  content: ""; position: absolute; right: -10px; bottom: -14px; width: clamp(120px, 13vw, 210px); aspect-ratio: 400 / 376;
  background: url("../assets/img/shared/deco-thistle-400.webp") center / contain no-repeat; filter: brightness(0) invert(1); opacity: .22; transform: scaleX(-1);
}
.site-footer__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(max-content, 1.2fr) minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 1.15fr); }
.site-footer__grid > * { padding-inline: clamp(1rem, 2.2vw, 2.4rem); }
.site-footer__grid > * + * { border-left: 1px solid rgb(255 255 255 / .22); }
.site-footer__grid > :first-child { padding-left: 0; }
.brand--footer { color: #fff; }
.brand--footer .brand__name, .brand--footer .brand__sub { color: #fff; }
.brand--footer .brand__sub::before, .brand--footer .brand__sub::after { background: #9ec5ec; }
.brand--footer .brand__crest { width: clamp(64px, 3rem + 3vw, 112px); margin: 0; }
.brand--footer .brand__name { font-size: clamp(1.1rem, .7rem + .9vw, 1.65rem); }
.brand--footer .brand__sub { font-size: clamp(.62rem, .5rem + .3vw, .84rem); }
.site-footer__lead { font-family: var(--font-body); font-size: clamp(1.05rem, .9rem + .5vw, 1.45rem); line-height: 1.3; margin-bottom: 1rem; }
.site-footer__lead strong { display: block; font-weight: 600; }
.footer-contact { display: grid; gap: .55rem; font-family: var(--font-ui); font-size: clamp(.88rem, .8rem + .2vw, 1rem); }
.footer-contact a { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.footer-contact .icon { width: 1.05rem; height: 1.05rem; color: #fff; }
.site-footer__heading { font-family: var(--font-ui); font-weight: 800; font-size: .95rem; margin-bottom: .6rem; color: #fff; }
.site-footer__links ul { display: grid; grid-template-columns: auto auto; gap: .3rem 1.4rem; font-family: var(--font-ui); font-size: clamp(.88rem, .8rem + .2vw, 1rem); }
.site-footer__links a { text-decoration: none; color: #dbe7f5; white-space: nowrap; }
.site-footer__links a:hover { color: #fff; text-decoration: underline; }
.site-footer__base { position: relative; background: var(--navy-950); font-family: var(--font-ui); font-size: clamp(.76rem, .7rem + .15vw, .86rem); color: #c9d7e8; }
.site-footer__base::after { content: ""; display: block; height: 16px; background: linear-gradient(180deg, rgb(0 0 0 / .4), transparent 45%, rgb(0 0 0 / .35)), var(--tartan) 0 0 / 120px 120px; }
.site-footer__base-inner { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 44px; flex-wrap: wrap; padding-block: .5rem; }
.site-footer__base p span { margin-inline: .5em; opacity: .7; }
.site-footer__tagline { font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .7rem; }
.site-footer--compact .site-footer__main { padding-block: 1.6rem; }
.site-footer--compact .site-footer__grid { grid-template-columns: minmax(max-content, 1.25fr) minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
.brand--footer .brand__text { flex: none; }
@media (max-width: 980px) {
  .site-footer__grid, .site-footer--compact .site-footer__grid { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .site-footer__grid > * { padding-inline: 0 1rem; }
  .site-footer__grid > :nth-child(odd) { border-left: 0; }
  .site-footer__grid > :nth-child(even) { padding-left: 1.4rem; }
}
@media (max-width: 560px) {
  .site-footer__grid, .site-footer--compact .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__grid > * { border-left: 0 !important; padding-left: 0 !important; }
  .site-footer__grid > * + * { border-top: 1px solid rgb(255 255 255 / .18); padding-top: 1.4rem; }
  .site-footer__links ul { grid-template-columns: 1fr 1fr; }
  .site-footer__tagline { display: none; }
}

/* ---------- Dark CTA bands ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.cta-band__contact { display: grid; gap: .9rem; font-family: var(--font-ui); font-weight: 600; font-size: clamp(1rem, .9rem + .4vw, 1.3rem); }
.cta-band__contact a { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; }
.cta-band__contact a:hover { text-decoration: underline; }
.cta-band__contact .icon-badge { --size: 44px; background: transparent; box-shadow: none; border: 2px solid currentColor; }
@media (max-width: 820px) { .cta-band__inner { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1rem 1.2rem; grid-template-columns: 1fr 1fr; }
.form .field--full { grid-column: 1 / -1; }
.field { display: grid; gap: .35rem; }
.field label, .field legend { font-family: var(--font-ui); font-weight: 700; font-size: .88rem; color: var(--navy-800); }
.field .req { color: var(--red); margin-left: .15em; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: .65rem .85rem; border: 1.5px solid var(--line); border-radius: 8px; background: #fff;
  font-family: var(--font-ui); font-size: 1rem; color: var(--text); transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8a97a8; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px rgb(47 125 225 / .25); }
.field [aria-invalid="true"] { border-color: var(--red); }
.field__error { font-family: var(--font-ui); font-size: .82rem; font-weight: 700; color: var(--red); min-height: 0; }
.field__error:empty { display: none; }
.field__hint { font-family: var(--font-ui); font-size: .8rem; color: var(--slate); }
.form__status { grid-column: 1 / -1; font-family: var(--font-ui); font-size: .92rem; padding: .8rem 1rem; border-radius: 8px; }
.form__status:empty { display: none; }
.form__status--ok { background: #e6f5ea; color: #145a2a; }
.form__status--info { background: var(--sky-100); color: var(--navy-800); }
.form__status--error { background: #fdeceb; color: #8a1622; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-family: var(--font-ui); font-size: .88rem; }
.check input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--navy-700); }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* ---------- Accordions (native details) ---------- */
.accordion { display: grid; gap: .45rem; }
.accordion details { background: #f8f7f3; border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgb(0 30 63 / .05); }
.accordion summary {
  display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem; cursor: pointer; list-style: none;
  font-family: var(--font-serif); font-size: clamp(1rem, .9rem + .3vw, 1.18rem); color: var(--navy-800); transition: background .2s;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { background: #fff; }
.accordion summary .acc-icon { position: relative; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--navy-800); }
.accordion summary .acc-icon::before, .accordion summary .acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: 2.5px; background: #fff; transform: translate(-50%, -50%); border-radius: 2px; transition: transform .25s; }
.accordion summary .acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion details[open] summary { background: var(--navy-800); color: #fff; }
.accordion details[open] summary .acc-icon { background: #fff; }
.accordion details[open] summary .acc-icon::before, .accordion details[open] summary .acc-icon::after { background: var(--navy-800); }
.accordion details[open] summary .acc-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.accordion__body { padding: 1rem 1.2rem 1.2rem 3.5rem; background: #fff; color: var(--text-soft); font-size: .98rem; line-height: 1.5; }
.accordion__body p + p { margin-top: .7em; }

/* ---------- Dialog / lightbox ---------- */
.dialog { border: 0; padding: 0; border-radius: var(--radius-lg); max-width: min(92vw, 980px); width: 100%; background: #fff; box-shadow: 0 30px 80px rgb(0 0 0 / .4); color: var(--text); }
.dialog::backdrop { background: rgb(0 18 40 / .78); }
.dialog__inner { display: grid; }
.dialog__media img { width: 100%; max-height: 66vh; object-fit: contain; background: #0b1a2e; }
.dialog__body { padding: 1.3rem 1.5rem 1.5rem; display: grid; gap: .6rem; }
.dialog__close { position: absolute; top: .7rem; right: .7rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .92); color: var(--navy-800); display: grid; place-items: center; font-size: 1.2rem; box-shadow: var(--shadow-sm); z-index: 2; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--delay, 0s); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}
.no-motion .reveal { opacity: 1 !important; transform: none !important; }

/* ---------- Print ---------- */
@media print {
  .topbar, .nav, .nav__burger, .header__cta, .tartan-wave, .deco, .site-footer__wave { display: none !important; }
  .masthead { position: static; box-shadow: none; }
  body { background: #fff; }
}

/* Headings wrap onto more lines on phones/tablets: open up the tight desktop line-heights
   (page styles set .88–.96 for one- or two-line desktop headlines). */
@media (max-width: 900px) {
  :is(.display, .h-display, .hgr-hero__title) { line-height: 1.02 !important; }
  :is(.h-serif, .hgr-join__title) { line-height: 1.06 !important; }
}
/* Decorative handwritten hero notes would sit on top of the stacked hero photo on phones */
@media (max-width: 700px) { .hero__note, .hgr-hero__note { display: none !important; } }