@import url("fonts.css");

/* ===================================================================
   WebPro aviation sites — shared base stylesheet

   Palette is taken from a South African VFR sectional chart: buff land,
   blue controlled airspace, magenta for uncontrolled airfields and their
   frequencies. Any pilot reads magenta as "this is the airfield" — which
   is exactly what we want the eye to land on.

   Every colour is a token. Nothing below the :root blocks may contain a
   hex literal; per-site themes override tokens only.
   =================================================================== */

:root {
  /* --- chart palette ------------------------------------------------ */
  --paper:        #fbfaf7;
  --panel:        #f2ede2;   /* chart land tint */
  --panel-edge:   #e4dbc8;
  --ink:          #16222d;   /* chart lettering */
  --ink-soft:     #4d5b68;
  --ink-faint:    #7d8892;
  --rule:         #cec6b4;
  --rule-soft:    #e6e0d2;
  --airspace:     #25577f;   /* controlled airspace blue */
  --accent:       #b02e6e;   /* uncontrolled airfield magenta */
  --accent-deep:  #8b2255;
  --accent-wash:  #fbeef4;
  --ok:           #2e6f4e;
  --warn:         #9a6212;
  --focus:        #25577f;

  /* --- type --------------------------------------------------------- */
  /* A normal-width face, not a condensed one. These sites are plain Arial and
     Verdana underneath; a condensed display face reads as a magazine, not as
     helicoptertraining.co.za. */
  --display: "Barlow", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.8rem + 2.5vw, 4rem);

  /* --- layout ------------------------------------------------------- */
  --max:     78rem;   /* banner width + a 15rem nav column */
  --measure: 40rem;
  --gutter:  clamp(1rem, 4vw, 2.5rem);
  --gap:     clamp(1.5rem, 3vw, 3rem);
  --radius:  2px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-deep); text-underline-offset: 0.16em; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ===================================================================
   Eyebrow / label — mono, letterspaced, the chart-annotation voice
   =================================================================== */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.eyebrow--quiet { color: var(--ink-faint); }

/* ===================================================================
   Masthead
   =================================================================== */
.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
}
.masthead__bar {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.25rem;
}
.brand {
  display: flex; flex-direction: column; gap: 0.1rem;
  text-decoration: none; color: var(--ink); margin-right: auto;
}
.brand__name {
  font-family: var(--display);
  font-weight: 700; font-size: var(--step-1);
  /* NOT uppercase. The originals set their headings in ordinary sentence case —
     "Unique Helicopter Training Opportunity", "The costs: learning to fly in South
     Africa" — and shouting them in condensed capitals was one of the loudest
     reasons the first rebuild did not read as the same site. */
  letter-spacing: 0.005em; line-height: 1.1;
}
.brand__sub {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink); padding: 0.5rem 0.7rem; cursor: pointer;
}
.nav-toggle__bars { display: block; width: 1rem; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after  { top: 5px; }

.nav { display: none; }
.nav__list { list-style: none; margin: 0; padding: 0 0 1rem; }
.nav__list a {
  display: block; padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--display); font-size: var(--step-1);
  letter-spacing: 0.01em;
  text-decoration: none; color: var(--ink);
}
.nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--accent); }
.nav.is-open { display: block; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-family: var(--display); font-weight: 600;
  font-size: var(--step-1); text-transform: uppercase; letter-spacing: 0.03em;
  line-height: 1; padding: 0.75rem 1.25rem;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: var(--paper);
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }
.btn--ghost { background: none; color: var(--accent-deep); }
.btn--ghost:hover { background: var(--accent-wash); color: var(--accent-deep); }
.btn--block { width: 100%; }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .nav { display: block; }
  .nav__list { display: flex; gap: 1.4rem; padding: 0; align-items: center; }
  .nav__list a {
    border-bottom: 2px solid transparent; padding: 0.25rem 0;
    font-size: var(--step-0); letter-spacing: 0.04em;
  }
  .nav__list a:hover, .nav__list a[aria-current="page"] {
    border-bottom-color: var(--accent);
  }
}

/* ===================================================================
   Hero
   =================================================================== */
.hero { border-bottom: 1px solid var(--rule); background: var(--paper); }
.hero__grid { display: grid; gap: var(--gap); padding-block: clamp(2rem, 6vw, 4rem); }
.hero__title {
  font-family: var(--display); font-weight: 700;
  font-size: var(--step-4); line-height: 0.98;
  text-transform: uppercase; letter-spacing: -0.005em;
  margin: 0 0 1rem; text-wrap: balance;
}
.hero__standfirst {
  font-size: var(--step-1); color: var(--ink-soft);
  max-width: var(--measure); margin: 0 0 1.5rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
}

/* ===================================================================
   SIGNATURE — the dot-leader checklist.
   Aviation checklists and cost sheets are set exactly this way:
   CHALLENGE ......... RESPONSE. The legacy copy is already licence and
   price lists, so this is the content's own native format, not decoration.
   =================================================================== */
.checklist { margin: 0; padding: 0; list-style: none; }
.leader {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--rule-soft);
}
.leader__label {
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
  font-size: var(--step-0);
}
.leader__dots {
  flex: 1 1 auto; min-width: 1.5rem;
  border-bottom: 2px dotted var(--rule);
  transform: translateY(-0.3em);
}
.leader__value {
  font-family: var(--mono); font-weight: 500;
  font-size: var(--step-0); white-space: nowrap; color: var(--accent-deep);
}

/* ===================================================================
   Article body — the preserved legacy copy
   =================================================================== */
.page { padding-block: clamp(2rem, 5vw, 3.5rem); }
.layout { display: grid; gap: var(--gap); }
/* The related-pages aside NEVER takes its own column any more — it stacks under
   the article. With the site navigation restored to a left column, a third column
   squeezed the prose to about 35 characters a line, narrower than the 780px table
   it replaced. None of the five originals has a right-hand rail either; related
   links at the foot of the page is both closer to them and more readable. */

/* Roomier than the default measure: these are reference pages with price tables,
   and the left navigation already takes 15rem of the width. */
.prose { max-width: 42rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h1 {
  font-family: var(--display); font-weight: 700; font-size: var(--step-3);
  /* NOT uppercase. The originals set headings in ordinary sentence case —
     "Unique Helicopter Training Opportunity", "The costs: learning to fly in
     South Africa" — and shouting them in capitals was one of the loudest reasons
     the first rebuild did not read as the same site. */
  line-height: 1.1; margin: 0 0 0.6em;
  text-wrap: balance;
}
.prose h2, .prose h3, .prose h4 {
  font-family: var(--display); font-weight: 600; line-height: 1.15;
  letter-spacing: 0.005em;
  margin-top: 1.8em; margin-bottom: 0.4em; text-wrap: balance;
}
.prose h2 { font-size: var(--step-2); }
.prose h3 { font-size: var(--step-1); color: var(--airspace); }
.prose h4 { font-size: var(--step-0); letter-spacing: 0.06em; }
.prose p { margin: 0; }
.prose ul, .prose ol { margin: 0; padding-left: 1.15rem; }
.prose li + li { margin-top: 0.35em; }
.prose li > ul, .prose li > ol { margin-top: 0.35em; }
.prose img {
  margin-block: 1.6em; border: 1px solid var(--rule); border-radius: var(--radius);
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2em; }
.prose blockquote {
  margin: 1.6em 0; padding: 0.2em 0 0.2em 1.2rem;
  border-left: 3px solid var(--accent); color: var(--ink-soft);
}

/* Data tables — horizontally scrollable rather than squashed */
.table-scroll { overflow-x: auto; margin-block: 1.6em; border: 1px solid var(--rule); border-radius: var(--radius); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
.prose th, .prose td { padding: 0.6rem 0.85rem; text-align: left; border-bottom: 1px solid var(--rule-soft); }
.prose thead th {
  font-family: var(--mono); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--panel); color: var(--ink-soft); white-space: nowrap;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel) 45%, transparent); }

/* ===================================================================
   Aside / related links
   =================================================================== */
.aside { font-size: var(--step--1); }
.aside__panel {
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: var(--radius); padding: 1.25rem;
}
.aside__panel + .aside__panel { margin-top: 1rem; }
.aside__title {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 0.75rem;
}
.aside__list { list-style: none; margin: 0; padding: 0; }
.aside__list li + li { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--panel-edge); }
.aside__list a { text-decoration: none; color: var(--ink); }
.aside__list a:hover { color: var(--accent); text-decoration: underline; }

/* ===================================================================
   Enquiry form — the conversion instrument, set as a pre-flight check
   =================================================================== */
.enquiry {
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem);
}
.enquiry__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.enquiry__title {
  font-family: var(--display); font-weight: 700; font-size: var(--step-2);
  text-transform: uppercase; line-height: 1; margin: 0;
}
.enquiry__step {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.field { margin-bottom: 0.9rem; }
.field > label, .fieldset__legend {
  display: block; font-family: var(--mono); font-size: 0.72rem;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.35rem;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--body); font-size: var(--step-0);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 0;
}
.choices { display: grid; gap: 0.4rem; border: 0; margin: 0 0 0.9rem; padding: 0; }
.choice {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.7rem; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer;
}
.choice:hover { border-color: var(--accent); }
.choice input { accent-color: var(--accent); margin: 0; }
.choice__text { font-size: var(--step--1); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }

.form-step[hidden] { display: none; }
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}
.form-note { font-size: var(--step--1); color: var(--ink-faint); margin: 0.75rem 0 0; }
.form-msg { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius); font-size: var(--step--1); }
.form-msg--ok   { background: var(--accent-wash); border: 1px solid var(--accent); }
.form-msg--fail { background: var(--panel); border: 1px solid var(--warn); }

/* ===================================================================
   Cross-site / callout strip
   =================================================================== */
.strip { background: var(--ink); color: var(--paper); padding-block: clamp(1.75rem, 4vw, 2.5rem); }
.strip a { color: var(--paper); }
.strip__title {
  font-family: var(--display); font-weight: 700; font-size: var(--step-2);
  text-transform: uppercase; margin: 0 0 0.4rem; line-height: 1;
}
.strip__text { color: color-mix(in srgb, var(--paper) 78%, var(--ink)); margin: 0 0 1rem; max-width: var(--measure); }
.strip .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.strip .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* ===================================================================
   Footer
   =================================================================== */
.footer { border-top: 1px solid var(--rule); background: var(--panel); padding-block: 2.5rem; margin-top: 3rem; font-size: var(--step--1); }
.footer__grid { display: grid; gap: var(--gap); }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: repeat(3, 1fr); } }
.footer__title {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 0.6rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li + li { margin-top: 0.35rem; }
.footer__list a { color: var(--ink); text-decoration: none; }
.footer__list a:hover { color: var(--accent); text-decoration: underline; }
.footer__legal {
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--panel-edge);
  color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
}

/* Archive notice — for the 2005 air-show calendar and similar */
.notice {
  background: var(--panel); border-left: 3px solid var(--warn);
  padding: 0.85rem 1rem; margin-bottom: 1.5rem; font-size: var(--step--1);
  color: var(--ink-soft);
}

.preview-flag {
  background: var(--accent); color: var(--paper);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center; padding: 0.35rem 1rem;
}

/* ── the "what changed" tour (preview builds only) ─────────────────────────
   Scoped under .wz- so it cannot collide with the site's own styles, and the
   whole block is dead weight on a live build because the markup is not emitted. */
.wz-btn{position:fixed;right:1rem;bottom:1rem;z-index:80;display:inline-flex;
  align-items:center;gap:.5rem;background:var(--accent);color:#fff;border:0;
  border-radius:999px;padding:.7rem 1.1rem;font:inherit;font-size:.9rem;
  font-weight:600;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.28)}
.wz-btn:hover{background:var(--accent-deep)}
.wz-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wz-btn svg{width:1em;height:1em;flex:none}
body.wz-on{overflow:hidden}
body.wz-on .wz-btn{display:none}
.wz-ring{position:fixed;z-index:90;border-radius:3px;display:none;
  box-shadow:0 0 0 9999px rgba(10,16,22,.72),0 0 0 2px var(--accent);
  transition:all .22s cubic-bezier(.4,0,.2,1);pointer-events:auto}
.wz-box{position:fixed;z-index:91;display:none;background:var(--paper);
  color:var(--ink);border:1px solid var(--panel-edge);border-radius:4px;
  padding:1.1rem 1.25rem;box-shadow:0 18px 50px rgba(0,0,0,.4);max-width:430px}
body.wz-on .wz-ring,body.wz-on .wz-box{display:block}
.wz-count{margin:0 0 .35rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:600}
.wz-box h3{margin:0 0 .4rem;font-family:var(--display);font-size:1.3rem;line-height:1.15}
.wz-box{max-width:460px}
.wz-lede{margin:0 0 .7rem;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
/* The numbers strip. Wraps rather than scrolls — a card that scrolls sideways
   on a phone hides the very figure it exists to show. */
.wz-figs{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .8rem}
.wz-fig{flex:1 1 auto;min-width:6.5rem;background:var(--panel);
  border:1px solid var(--panel-edge);border-radius:3px;padding:.4rem .55rem}
.wz-fig b{display:block;font-family:var(--display);font-size:1.28rem;
  line-height:1.05;color:var(--accent)}
.wz-fig span{display:block;font-size:.74rem;line-height:1.3;color:var(--ink-soft);
  margin-top:.12rem}
.wz-fig i{display:block;font-style:normal;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);margin-top:.2rem}
/* Wrong / changed / expected. The left rule colour is the whole visual argument:
   red for the problem, accent for the fix, green for the payoff. */
.wz-part{margin:0 0 .55rem;padding-left:.65rem;border-left:2px solid var(--panel-edge)}
.wz-part:last-of-type{margin-bottom:0}
.wz-part p{margin:.1rem 0 0;font-size:.875rem;line-height:1.5;color:var(--ink-soft)}
.wz-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;
  text-transform:uppercase;font-weight:600;color:var(--ink-faint)}
.wz-wrong{border-left-color:#c0392b}
.wz-wrong .wz-k{color:#c0392b}
.wz-changed{border-left-color:var(--accent)}
.wz-changed .wz-k{color:var(--accent)}
.wz-expect{border-left-color:#1d7a4c}
.wz-expect .wz-k{color:#1d7a4c}
.wz-box[data-kind="behind"] .wz-count{color:var(--ink-faint)}
@media (max-width:30rem){.wz-box{max-width:calc(100vw - 1.5rem)}}
.wz-nav{display:flex;align-items:center;gap:.5rem;margin-top:1rem}
.wz-sp{flex:1}
.wz-nav button{font:inherit;font-size:.85rem;border-radius:3px;cursor:pointer;
  padding:.45rem .9rem;border:1px solid var(--panel-edge);background:var(--panel);
  color:var(--ink-soft);min-height:44px}
.wz-nav button:hover{color:var(--ink)}
.wz-nav .wz-next{background:var(--accent);color:#fff;border-color:transparent;font-weight:600}
.wz-nav .wz-skip{border:0;background:none}
@media (prefers-reduced-motion:reduce){.wz-ring{transition:none}}

/* ── banner + side navigation ──────────────────────────────────────────────
   Restores the shape every one of these sites actually has: a banner image
   across the top and a long list of links down the left. The first rebuild used
   a horizontal bar with six links and no banner, which is why it read as a
   different site. The layout is a grid, so on a phone the nav collapses to a
   button and the content takes the full width — which the 780px table it
   replaced could never do. */
.masthead { border-bottom: 0; }
.banner { display:block; line-height:0; background:var(--banner-bg, transparent); }
.banner__img { display:block; width:100%; max-width:var(--banner-max, 1100px);
  height:auto; margin:0 auto; }

.shell { display:grid; gap:var(--gap); grid-template-columns:1fr;
  padding-block:clamp(1rem,3vw,2rem); align-items:start; }
@media (min-width:62rem) {
  .shell { grid-template-columns:minmax(12rem,15rem) minmax(0,1fr); }
}

.sidenav__list { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:2px; }
.sidenav__list a { display:block; padding:.6rem .8rem; min-height:44px;
  text-decoration:none; color:var(--nav-ink,var(--ink)); font-size:.95rem;
  line-height:1.3; border-radius:var(--radius);
  background:var(--nav-bg,var(--panel)); border:1px solid var(--nav-edge,var(--panel-edge)); }
.sidenav__list a:hover { background:var(--nav-bg-hover,var(--accent-wash));
  color:var(--nav-ink-hover,var(--accent-deep)); }
.sidenav__list a[aria-current="page"] { background:var(--accent); color:#fff;
  border-color:transparent; font-weight:600; }
.sidenav__cta { margin-top:.6rem; }
.sidenav__cta .btn { width:100%; text-align:center; }

/* On a phone the list is hidden behind the Menu button. site.js already toggles
   aria-expanded on .nav-toggle; this keys off that rather than a second class. */
@media (max-width:61.99rem) {
  .nav-toggle { display:inline-flex; }
  .sidenav { display:none; }
  .nav-toggle[aria-expanded="true"] + .sidenav { display:block; }
}
@media (min-width:62rem) { .nav-toggle { display:none; } .sidenav { display:block; } }

/* A dark site (airbornesa is #000) needs the content panel to stay readable. */
body[data-bg="dark"] { background:#000; }
body[data-bg="dark"] .shell > main { background:var(--paper); border-radius:var(--radius);
  padding:clamp(1rem,3vw,2rem); }

/* One outbound link to the sister site that owns this query. Styled as a quiet
   editorial note rather than a promo box: it is there to send a reader who
   wants the other thing, and to tell Google which page is the answer. */
.ownerref {
  margin: 1.75rem 0 0;
  padding: .75rem .9rem;
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .95rem;
}
.ownerref__k {
  display: block;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: .1rem;
}
.ownerref a { color: var(--accent); }

/* POPIA consent. Deliberately plain and legible rather than small print: the
   record we keep is the wording the person actually read, so it has to be
   readable. Two separate opt-ins, never one bundled checkbox. */
.consent { margin: 1.4rem 0 .4rem; padding: .9rem 1rem; border: 1px solid var(--panel-edge);
  border-radius: var(--r); background: var(--panel); }
.consent__row { display: flex; gap: .6rem; align-items: flex-start;
  margin-bottom: .6rem; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.consent__row input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; flex: none; }
.consent__note { margin: .5rem 0 0; font-size: .82rem; line-height: 1.45;
  color: var(--ink-faint); }
.cf-turnstile { margin: 1rem 0 0; }

/* Enquiry form, mirroring Les's field set. Two columns on desktop so a
   thirteen-field form does not read as a wall; one column under 34rem. */
.fieldgrid { display: grid; gap: .9rem 1.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.1rem; }
.field { margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; padding: .6rem .7rem; min-height: 44px;
  border: 1px solid var(--panel-edge); border-radius: var(--r);
  background: var(--paper); color: var(--ink); width: 100%; }
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.req { color: #c0392b; font-weight: 700; }
/* The honeypot must be unreachable to people and invisible to screen readers,
   but NOT display:none — some bots skip hidden fields, which is the one thing
   that would make it useless. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; }
.enquiry__actions { margin: 1.2rem 0 0; }
@media (max-width: 34rem) { .fieldgrid { grid-template-columns: 1fr; } }

/* flyza's licence checkboxes. Its form lets an enquirer tick several, unlike
   the single dropdown on the other four, so this is a real list not a select. */
.checkset { border: 1px solid var(--panel-edge); border-radius: var(--r);
  padding: .8rem .9rem; margin: 0; }
.checkset legend { font-size: .86rem; font-weight: 600; color: var(--ink-soft);
  padding: 0 .3rem; }
.checkset__row { display: flex; gap: .55rem; align-items: flex-start;
  padding: .3rem 0; font-size: .92rem; cursor: pointer; }
.checkset__row input { margin-top: .22rem; width: 1.05rem; height: 1.05rem;
  flex: none; }
@media (min-width: 34rem) {
  .checkset { column-count: 2; column-gap: 1.4rem; }
  .checkset legend { column-span: all; }
}


/* flyza — his colours, sampled from his own banner.
 *
 * The blue that dominates the photo-strip banner.
 *
 * Tokens only: no selector below this line and no hex literal outside :root. The
 * layout, type scale and spacing come from shared/css/base.css, so the page reads
 * as modern while the colour reads as his.
 *
 * The accent is darkened until it carries white text at 4.5:1 — the originals use
 * these colours on white at ratios as low as 2:1. Surface tints are set at an
 * ABSOLUTE lightness, never by shifting a brand colour, or a navy becomes a
 * mid-blue panel no body text can sit on.
 */
:root {
  --paper:       #fbfbfd;
  --panel:       #ececf3;
  --panel-edge:  #d3d3e3;
  --rule-soft:   #e0e0eb;
  --accent:      #303090;
  --accent-deep: #23236a;
  --accent-wash: #eeeef9;
  --airspace:    #4848a8;
  --focus:       #4848a8;
  --banner-bg:   #ffffff;
  --banner-max:  1100px;
  --nav-bg:      #f0f0f7;
  --nav-edge:    #d7d7e5;
  --nav-ink:     #282879;
  --nav-bg-hover:#ddddee;
}