/* ═══════════════════════════════════════════════════════════════
   MORPHmaster shared design system
   Used by every interior page (About/Restoration/etc.) and every
   Home page across all sites. Everything in here is colour-neutral
   — it reads its palette entirely from custom properties defined
   in each page's own small inline <style> block:

     --accent            --accent-rgb        --accent-light
     --accent-mid         --accent-dark       --accent-dark-rgb
     --topbar-bg           --page-bg           --surface-hover
     --muted-text           --muted-tinted        --footer-bg
     --footer-text

   --muted-text is the plain neutral grey used for interior-page
   figcaptions. --muted-tinted is a softer, hue-tinted grey used
   for home-page notes / credit labels — home pages
   read a little warmer/more colourful there than the flat interior
   figcaption tone.

   --accent-rgb / --accent-dark-rgb hold the same colour as
   --accent / --accent-dark, just as "R, G, B" so rgba() can use
   them with an alpha channel (CSS custom properties can't be
   decomposed from a hex value at use-time).

   A page that differs from a default here (hero-title font-size,
   hero image object-position, etc.) overrides that one property
   in its own <style> block, placed AFTER the <link> to this file.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   FALLBACK PALETTE (Pro-Coast)
   Used when a site sets no colours of its own. Each site's colours
   come from web.config and are written into a :root block after
   the <link> to this file, so they override these.
───────────────────────────────────────── */
:root {
  --accent:          #0075B8;
  --accent-rgb:      0, 117, 184;
  --accent-light:    #E1EEF5;
  --accent-mid:      #42BDDC;
  --accent-dark:     #083650;
  --accent-dark-rgb: 8, 54, 80;
  --topbar-bg:       #0075B8;
  --page-bg:         #D0E1EB;
  --surface-hover:   #F4F7F8;
  --muted-text:      #58707E;
  --muted-tinted:    #44697E;
  --footer-bg:       #C0D7E4;
  --footer-text:     #083650;
}

/* ─────────────────────────────────────────
   INTER FONT — hosted locally (Root/fonts), not from Google Fonts.
   Variable font (weights 100–900) from Fontsource
   (@fontsource-variable/inter 5.3.0), split by script; the browser
   only downloads the files for characters a page actually uses.
   SIL Open Font License — see fonts/Inter-OFL.txt.
───────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-cyrillic-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-greek-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-greek-wght-normal.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-vietnamese-wght-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

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

html {
  font-size: 16px;
  background: var(--page-bg);
  min-height: 100%;
  /* keep the scrollbar's space even when the lightbox locks scrolling,
     so the page doesn't jump sideways as it opens and closes */
  scrollbar-gutter: stable;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #1a1a1a;
  min-height: 100vh;
}

.page {
  position: relative; /* positions the mobile sidebar drop-down */
  max-width: 1024px;
  margin: 0 auto;
  background: #ffffff;
  min-height: 100vh;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

/* ─────────────────────────────────────────
   TOP UTILITY BAR
───────────────────────────────────────── */
.topbar {
  background: var(--topbar-bg);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 7px 20px;
}
.topbar a,
.lang-btn {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
}
.topbar a:hover,
.topbar a.active,
.lang-btn:hover { color: #ffffff; }
.topbar .sep { color: rgba(255, 255, 255, 0.3); font-size: 14px; }

/* Language panel — drops down under the topbar from the language
   button. Hidden until opened (the [hidden] attribute, toggled by
   js/morphmaster_site.js). */
.lang-panel {
  background: #ffffff;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  padding: 10px 20px;
}
.lang-panel[hidden] { display: none; }
.lang-panel a {
  font-size: 14px;
  color: #6b6b6b;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  line-height: 1.4;
}
.lang-panel a:hover {
  color: #1a1a1a;
  background: var(--surface-hover);
}
.lang-panel a.active {
  color: var(--accent);
  background: var(--accent-light);
  font-weight: 500;
}
/* Editor mode only: cultures not yet translated */
.lang-panel a.untranslated { color: #d00000; }
/* RTL language names otherwise render out of order in the list */
.lang-panel a.bidi-rtl { direction: rtl; unicode-bidi: bidi-override; }

/* ─────────────────────────────────────────
   MAIN NAV — the identity strip dominates the
   top of the page; larger than the topbar above it.
───────────────────────────────────────── */
.mainnav {
  background: #ffffff;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.site-logo {
  font-size: 30px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  padding: 16px 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
/* The site's mark before the title text: the SiteFavicon image, when there's
   no logo image. The favicons are square with the mark centred, so a mark
   narrower or wider than square has space either side or above and below. */
.site-title-icon {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}
/* In RTL the mark is to the right of the title, so mirror it: a bird drawn
   facing the text (e.g. PerdixNet's partridge) still faces it */
[dir="rtl"] .site-title-icon { transform: scaleX(-1); }
/* Logo image (SiteLogoImage in web.config) */
.site-logo-img {
  height: 64px;
  width: auto;
  display: block;
}
.hamburger {
  display: none;
  font-size: 20px;
  color: #6b6b6b;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
}

/* Text for screen readers only, e.g. the hamburger's label */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────
   BODY LAYOUT — sidebar + content
   Same section nav on every page, interior or home, so nothing
   is ever a dead end. Persistent at desktop/tablet widths; only
   collapses behind the hamburger on mobile (see breakpoints).
───────────────────────────────────────── */
.layout { display: flex; }
.sidebar {
  width: 200px;
  flex-shrink: 0;
  border-inline-end: 0.5px solid rgba(0, 0, 0, 0.12);
  padding: 20px 0;
}
.sidebar-nav a {
  display: block;
  font-size: 14px;
  color: #6b6b6b;
  text-decoration: none;
  padding: 7px 20px;
  border-inline-start: 2px solid transparent;
  line-height: 1.4;
}
.sidebar-nav a:hover {
  color: #1a1a1a;
  background: var(--surface-hover);
}
.sidebar-nav a.active {
  color: var(--accent);
  border-inline-start-color: var(--accent);
  background: var(--accent-light);
  font-weight: 500;
}
/* Copies of the topbar's Register/Contact: only shown at <=768px */
.sidebar-nav a.sidebar-nav-mobile { display: none; }

/* ─────────────────────────────────────────
   CONTENT COLUMN — interior pages (.content) and the home page
   (.home-content). The design spaced the home page more widely;
   here both use the interior spacing.
───────────────────────────────────────── */
.content,
.home-content {
  flex: 1;
  padding: 16px 40px 32px 40px;
  min-width: 0;
}
.page-title {
  font-size: 32px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
}

/* ─────────────────────────────────────────
   CMS CONTENT TYPES
   paragraph · subtitle · spacer · image · link · statement · note · credits
───────────────────────────────────────── */
.cms-paragraph {
  font-size: 16px;
  line-height: 1.8;
  color: #1a1a1a;
  margin-bottom: 18px;
}

/* subtitle: a plain mid-page heading */
.cms-subtitle {
  font-size: 19px;
  font-weight: 500;
  color: var(--accent);
  margin: 28px 0 10px;
  clear: both;
  /*padding-bottom: 10px;
  border-bottom: 0.5px solid rgba(var(--accent-rgb), 0.15);*/
}

/* no clear: inside an image group, a spacer (like links) doesn't stop
   the following text wrapping around the image */
.cms-spacer {
  height: 20px;
}

/* ─── IMAGE ───────────────────────────────
   Alternating float left/right, clearfixed group wrapper. The group
   runs from an image to the next subtitle, so paragraphs, links,
   spacers and further images in between all wrap around it.
   RTL: editable_page.aspx.cs swaps which side the first image goes,
   and each class's margins already match its float side, so the
   physical left/right here needs no [dir="rtl"] override.
───────────────────────────────────────── */
.cms-image { margin-bottom: 18px; }
.cms-image-group {
  overflow: hidden;   /* BFC — clears float at group boundary */
}
.cms-image-group .cms-image { margin-bottom: 0; }
.cms-image.float-left figure { float: left; }
.cms-image.float-right figure { float: right; }
.cms-image figure { display: block; }
.cms-image figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}
.cms-image figcaption {
  font-size: 11px;
  color: var(--muted-text);
  margin-top: 6px;
  font-style: italic;
  line-height: 1.4;
}

.cms-image figure { max-width: 260px; }
.cms-image.float-left figure { margin: 2px 20px 10px 0; }
.cms-image.float-right figure { margin: 2px 0 10px 20px; }
.cms-image figure img { max-height: 320px; }

/* Two or more images one after another (editable_page.aspx.cs wraps them in .cms-image-row):
   a grid instead of floats, as many rows as needed. Each is cropped to the same 4:3 shape so
   the rows line up; clicking still opens the whole image in the lightbox.
   Columns by image count, so there are no stragglers: 2 → 2 across, 4 → 2 × 2, otherwise 3 across
   (3, 5, 6, 7 ...). At ≤768px at most 2 across, at ≤480px one column (see the breakpoints).
   The counts use :has(); without it every grid is simply 3 across. */
.cms-image-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  margin: 2px 0 18px;
}
.cms-image-row:has(> .cms-image:nth-child(2):last-child),
.cms-image-row:has(> .cms-image:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-image-row .cms-image { min-width: 0; margin-bottom: 0; }
.cms-image-row .cms-image figure { max-width: none; margin: 0; }
.cms-image-row .cms-image figure img {
  aspect-ratio: 4 / 3;
  max-height: none;
  object-fit: cover;
  object-position: center 35%;
}

/* ─── LINKS ───────────────────────────────
   Every link is a CTA pill with an arrow. Consecutive links share
   one .cms-links wrapper and wrap onto further rows as needed.
───────────────────────────────────────── */
.cms-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}
.cms-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 400;
  color: var(--accent);
  text-decoration: none;
  border: 0.5px solid var(--accent-mid);
  /* a link too wide for the column wraps onto more lines rather than
     running off the page. 20px is half a one-line pill's height, so a
     one-line link is still a full pill; a taller one gets rounded corners */
  border-radius: 20px;
  padding: 6px 14px;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: background 0.15s;
}
.cms-link:hover {
  background: var(--accent-light);
}
.cms-link svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
/* the arrow points the way the text reads */
[dir="rtl"] .cms-link svg { transform: scaleX(-1); }

/* ── STATEMENT (the Lead / Lead (accent) CMS types) ──
   Opening message at the top of a page's content: large, light
   display text. Each line is a standalone element (one translatable
   line). The editor picks each line's colour explicitly — Lead is
   plain, Lead (accent) adds .cms-statement--accent — rather than the
   first line of a run being accented automatically.

   Consecutive statements (of either colour) are grouped by sibling
   selectors alone (no wrapper): tight gaps within the run, and the
   full gap only after the last line. The gap between statements
   must stay clearly larger than the leading within one, or wrapped
   lines blur into their neighbours.
───────────────────────────────────────── */
.cms-statement {
  font-size: 24px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.35;
  /*max-width: 640px;
  text-wrap: balance;*/
  margin-bottom: 14px;
}
.cms-statement--accent {
  font-weight: 500;
  color: var(--accent);
}
/* last line of a run — full gap before whatever follows */
.cms-statement:not(:has(+ .cms-statement)) {
  margin-bottom: 22px;
}

/* ── NOTE (reusable CMS type) ──
   Small muted text for a disclaimer, funding statement, or any
   other secondary note — usable anywhere on a page.
───────────────────────────────────────── */
.cms-note {
  font-size: 13px;
  color: var(--muted-tinted);
  line-height: 1.6;
  max-width: 560px;
  margin-top: 12px;
}

/* The element that ends an image group loses its bottom margin, so the
   subtitle after the group gets only its own 28px above it. The group's
   overflow: hidden stops margins collapsing across its edge, so without
   this the two margins would add up (e.g. 18 + 28 = 46px).
   Kept after the element rules: it has the same specificity as
   .cms-statement:not(:has(+ .cms-statement)), so it must come later to win. */
.cms-image-group > :last-child { margin-bottom: 0; }

/* ── CREDITS (reusable CMS type) ──
   Funders, partners, or supporters — a row of real logo images,
   no border/box since a uniform pill doesn't suit marks of such
   different shapes and colours. Text sponsors are plain label
   text between the logos (.cms-credits-label), e.g. "Supported by".
   Always one row: when the logos don't fit at full height, they all
   shrink by the same proportion (flex-shrink is weighted by width).
───────────────────────────────────────── */
.cms-credits {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.10);
  clear: both;
}
.cms-credits-label {
  font-size: 12px;
  color: var(--muted-tinted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* a logo, or the link round it, can shrink below its full width
   (flex items otherwise stop at their content width) */
.cms-credits > a,
.cms-credits > .cms-credit-logo {
  min-width: 0;
}
.cms-credit-logo {
  height: 112px;
  width: auto;
  /* when shrunk, the logo scales down inside its box rather than
     being squashed */
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* ─────────────────────────────────────────
   HERO — home pages only
   A plain <img class="hero-carousel-img"> renders static (opacity
   1, no animation). Adding .hero--carousel to the parent .hero
   and giving each image --hero-index (0-based) plus the parent
   --hero-count turns it into a slow auto-rotating cross-fade —
   works for any number of images without new CSS, PROVIDED the
   @keyframes hero-crossfade percentages below (4%/30%/37%) still
   match the image count they were tuned for (3). CSS can't make
   a keyframe's percentage offsets dynamic, so a page with a
   different image count must redeclare @keyframes hero-crossfade
   in its own <style> block (after this file's <link>) with new
   percentages: fade in a little after 0%, hold until just before
   (100 / count)%, fade out by (100 / count)%.
───────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  /* Scales with the viewport width so a phone gets a shorter,
     landscape-shaped hero (less cropping, more page text visible
     on arrival) rather than a tall narrow slice. The minimum
     leaves room for the hero text over the image. */
  height: clamp(300px, 56vw, 580px);
  overflow: hidden;
}
.hero-carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Per-image crop, not just per-page: set --hero-focus inline on
     the individual <img> (e.g. style="--hero-focus: center 25%")
     to keep that photo's subject clear of the text/gradient at the
     bottom — a 3-image carousel can need a different crop per
     image, not one setting for all of them. Falls back to a sane
     default when an image doesn't need its own override. */
  object-position: var(--hero-focus, center 40%);
  opacity: 1;
}
.hero--carousel .hero-carousel-img {
  opacity: 0;
  animation-name: hero-crossfade;
  animation-iteration-count: infinite;
  animation-duration: calc(var(--hero-slot, 9s) * var(--hero-count, 1));
  animation-delay: calc(var(--hero-slot, 9s) * var(--hero-index, 0));
}
.hero-gradient {
  position: absolute;
  inset: 0;
  /* Kept deliberately light — the top ~55% of the photo stays
     essentially untouched. Text legibility comes mainly from the
     text-shadow on .hero-text's children below, not from crushing
     the whole image dark. */
  background: linear-gradient(
    to bottom,
    rgba(var(--accent-dark-rgb), 0) 0%,
    rgba(var(--accent-dark-rgb), 0) 55%,
    rgba(var(--accent-dark-rgb), 0.45) 70%,
    rgba(var(--accent-dark-rgb), 0.72) 100%
  );
}
.hero-text {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 44px 48px;
  color: #fff;
}
.hero-text > * {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 16px rgba(0, 0, 0, 0.35);
}
.hero-text > :last-child { margin-bottom: 0; }
.hero-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
}
.hero-title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.4px;
  margin-bottom: 14px;
  max-width: 680px;
}
.hero-subtitle {
  font-size: 18px;
  font-weight: 400;
  opacity: 0.9;
  max-width: 600px;
  line-height: 1.55;
}
.hero-dots {
  position: absolute;
  bottom: 20px;
  inset-inline-end: 24px;
  display: flex;
  gap: 8px;
}
.hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  animation-name: hero-dot-pulse;
  animation-iteration-count: infinite;
  animation-duration: calc(var(--hero-slot, 9s) * var(--hero-count, 1));
  animation-delay: calc(var(--hero-slot, 9s) * var(--hero-index, 0));
}

/* ─────────────────────────────────────────
   FOOTER — same neutral structure, coloured
   per site to echo the hero/brand palette.
───────────────────────────────────────── */
.footer {
  border-top: 0.5px solid rgba(0, 0, 0, 0.12);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--footer-bg);
}
/* Anatrack branding, bottom left: the copyright line, with the company name as the brand */
.footer-brand {
  font-size: 12px;
  color: var(--footer-text);
}
.footer-brand a {
  color: var(--footer-text);
  font-weight: 600;
  text-decoration: none;
}
.footer-brand a:hover {
  color: #1a1a1a;
}
.footer-links {
  font-size: 12px;
  color: var(--footer-text);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.footer-links a {
  color: var(--footer-text);
  text-decoration: none;
}
.footer-links a:hover {
  color: #1a1a1a;
}

/* ─────────────────────────────────────────
   FORM PAGES — contact, register, search
   An introduction column beside the form,
   stacked at ≤768px. Replaces the Bootstrap
   grid and form classes the pages used.
───────────────────────────────────────── */
.form-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.form-intro { flex: 1 1 0; min-width: 0; }
.form-main  { flex: 2 1 0; min-width: 0; }
/* Contact, register: the form first, the introduction after it (on the
   right, or the left in RTL). The markup keeps the introduction first,
   so it's still read first and still sits above the form when stacked. */
.form-layout--intro-end { flex-direction: row-reverse; }

.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.form-control {
  display: block;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 16px; /* 16px stops iOS zooming in on focus */
  line-height: 1.5;
  color: #1a1a1a;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 8px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2);
}
textarea.form-control { resize: vertical; min-height: 120px; }

/* Honeypot: the first email field is a fake that only bots fill in.
   Moved off-screen rather than display:none, so bots still see it.
   Off the start side, so in RTL it doesn't add a horizontal scrollbar. */
.form-honeypot {
  position: absolute;
  inset-inline-start: -2000px;
}

.btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  background: var(--accent);
  border: none;
  border-radius: 20px;
  padding: 8px 22px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn:hover,
.btn:focus-visible { background: var(--accent-dark); }

.formErrorMessage {
  font-size: 14px;
  font-weight: 500;
  color: #b00020;
  margin-bottom: 14px;
}
.form-confirmation {
  font-size: 16px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 18px;
}

/* search results */
.search-message {
  font-size: 15px;
  color: var(--muted-text);
  margin-top: 18px;
}
.search-result { margin-bottom: 18px; }
.search-result a {
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.search-result a:hover { text-decoration: underline; }
.search-result-snippet {
  font-size: 14px;
  color: var(--muted-text);
  line-height: 1.6;
}
.search-word {
  font-weight: 600;
  color: #1a1a1a;
}

/* ─────────────────────────────────────────
   LEGAL TEXT — privacy and terms. Their text is
   translatable HTML (p, h3, ul), so it's styled
   by element. The privacy definitions keep their
   old "row terms-definition" / "term-name" markup
   because the translations contain it.
───────────────────────────────────────── */
.legal-text p,
.legal-text ul {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 14px;
}
.legal-text ul { padding-inline-start: 24px; }
.legal-text li { margin-bottom: 8px; }
.legal-text h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--accent);
  margin: 28px 0 10px;
}
.legal-text a { color: var(--accent); }
.legal-text .terms-definition {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  line-height: 1.7;
}
.legal-text .terms-definition .term-name {
  flex: 0 0 140px;
}

/* ─────────────────────────────────────────
   ERROR PAGE — the error details are hidden
   until "view the error" is clicked
───────────────────────────────────────── */
.errorHolderHidden { display: none; }
.errorHolder {
  display: block;
  margin-top: 20px;
  font-family: Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ─────────────────────────────────────────
   COOKIE CONSENT BANNER (cookieconsent2) —
   coloured from the site tokens rather than a
   palette in web_controls/cookie_consent.ascx.cs.
   .cc-window prefixes outrank the plugin's own
   stylesheet, which loads after this one.
───────────────────────────────────────── */
.cc-window.cc-window {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #ffffff;
  background: var(--accent-dark);
}
.cc-window .cc-btn {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
  border-radius: 20px;
}
.cc-window .cc-btn:hover,
.cc-window .cc-btn:focus {
  background: var(--accent-mid);
  border-color: var(--accent-mid);
  color: var(--accent-dark);
  text-decoration: none;
}

/* ─────────────────────────────────────────
   LIGHTBOX — a page image shown full size
   by expand() in js/morphmaster_site.js.
   Any click closes it. The script starts the
   image over its thumbnail and adds .is-open;
   the transitions then grow the image and fade
   in the backdrop (0.3s, = lightboxDuration).
───────────────────────────────────────── */
.cms-image figure a { cursor: zoom-in; }

.lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 16px 24px;
  background: rgba(var(--accent-dark-rgb), 0);
  cursor: zoom-out;
  transition: background 0.3s ease;
}
.lightbox.is-open { background: rgba(var(--accent-dark-rgb), 0.92); }
.lightbox[hidden] { display: none; }
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease;
}
.lightbox-caption {
  max-width: 60ch;
  margin: 0;
  font-size: 13px;
  font-style: italic;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.is-open .lightbox-caption,
.lightbox.is-open .lightbox-close { opacity: 1; }
.lightbox-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: background 0.15s, opacity 0.3s ease;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.3);
}
html.lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox-img,
  .lightbox-caption,
  .lightbox-close { transition: none; }
}

/* ─────────────────────────────────────────
   RESPONSIVE BREAKPOINTS

   Tablet (≤768px): sidebar collapses, hamburger appears.
   Mobile (≤480px): float images drop to full-width, stacked.
───────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .hamburger { display: block; }

  .cms-image-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* images at most 2 across */

  /* Register/Contact move from the topbar into the hamburger panel */
  .topbar .topbar-page { display: none; }
  .sidebar-nav a.sidebar-nav-mobile { display: block; }
  .sidebar-nav a.sidebar-nav-mobile:not(.sidebar-nav-mobile + .sidebar-nav-mobile) {
    border-top: 0.5px solid rgba(0, 0, 0, 0.12);
    margin-top: 8px;
  }

  /* Opened by the hamburger: drops down under the main nav, over the
     page. js/morphmaster_site.js sets top to the main nav's bottom edge. */
  .sidebar.is-open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    width: auto;
    background: #ffffff;
    border-inline-end: none;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
  }
  .sidebar.is-open .sidebar-nav a { padding: 10px 20px; }

  .content, .home-content { padding: 24px 20px; }
  .cms-image figure { max-width: 200px; }

  .form-layout { flex-direction: column; gap: 8px; }
  .form-intro, .form-main { flex: none; width: 100%; }

  .cms-statement { font-size: 22px; }

  .hero-title { font-size: 28px; }
  .hero-text { padding: 28px 24px; }
  .hero-subtitle { font-size: 16px; }
}

@media (max-width: 480px) {
  .cms-image.float-left figure,
  .cms-image.float-right figure {
    float: none;
    margin: 0 0 10px 0;
    max-width: 100%;
  }
  .cms-image figure { max-width: 100%; }
  .cms-image figure img { max-height: 260px; }
  /* a grid of images stacks, like single images (repeating the count selectors to outrank them) */
  .cms-image-row,
  .cms-image-row:has(> .cms-image:nth-child(2):last-child),
  .cms-image-row:has(> .cms-image:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .page-title { font-size: 26px; }
  .content, .home-content { padding: 20px 16px; }
  .legal-text .terms-definition { flex-direction: column; gap: 0; }
  .legal-text .terms-definition .term-name { flex: none; }

  .cms-statement { font-size: 20px; }

  .hero-title { font-size: 22px; }
  .hero-text { padding: 20px 16px; }
}

@keyframes hero-crossfade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  30%  { opacity: 1; }
  37%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hero-dot-pulse {
  0%   { background: rgba(255, 255, 255, 0.4); }
  4%   { background: rgba(255, 255, 255, 1); }
  30%  { background: rgba(255, 255, 255, 1); }
  37%  { background: rgba(255, 255, 255, 0.4); }
  100% { background: rgba(255, 255, 255, 0.4); }
}