/* ==========================================================================
   HOD ENERGY design kit (hod-kit.css)
   Shared tokens and base components for the rebuilt pages.
   RTL first: every spacing and position uses logical properties.
   Self-hosted fonts only, no external requests.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Polin";
  src: url("../fonts/Polin-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Polin";
  src: url("../fonts/Polin-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Polin";
  src: url("../fonts/Polin-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Colour: HOD ENERGY */
  --navy-900: #0D2531;   /* headings, dark bands, footer */
  --navy-800: #133447;
  --navy-700: #1E4A63;
  --blue-800: #145578;   /* button hover */
  --blue-700: #1B6A93;   /* primary buttons and links (white on it 5.95:1) */
  --blue-600: #237EAD;   /* icons, focus ring, text of 24px+ only */
  --blue-100: #E3F0F7;
  --blue-50:  #F1F7FB;
  --sky-300:  #6FB4DB;   /* accents on navy only, never on white */
  --text:          #1C2B35;
  --text-muted:    #4F606C;
  --border-strong: #6B7C88;
  --line:          #DCE3E8;
  --surface:       #FFFFFF;
  --surface-alt:   #F6F8FA;
  --on-dark-muted: #C5D3DC;
  --sun-500:  #F5A524;   /* tiny highlights only, never text on white */

  /* Colour: INTERSOL sub-brand */
  --intersol-600:  #2755A6; /* INTERSOL buttons and links */
  --intersol-cyan: #00AEEF; /* graphics, and on navy only */

  /* Type */
  --font: "Polin", "Assistant", "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  --fs-display: clamp(2.5rem, 1.6rem + 3.2vw, 4rem);
  --lh-display: 1.1;
  --fs-h1: clamp(2.125rem, 1.6rem + 1.9vw, 3rem);
  --lh-h1: 1.15;
  --fs-h2: clamp(1.75rem, 1.4rem + 1.3vw, 2.375rem);
  --lh-h2: 1.2;
  --fs-h3: clamp(1.375rem, 1.25rem + .45vw, 1.625rem);
  --lh-h3: 1.3;
  --fs-lead: clamp(1.1875rem, 1.1rem + .35vw, 1.3125rem); /* 19 -> 21px */
  --lh-lead: 1.65;
  --fs-body: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  --lh-body: 1.7;
  --fs-small: clamp(.9375rem, .9rem + .15vw, 1rem);      /* 15 -> 16px */
  --fs-eyebrow: clamp(.875rem, .85rem + .1vw, .9375rem); /* 14 -> 15px */
  --measure: 68ch;

  /* Space: 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-pad: var(--space-8);   /* 64px on mobile */
  --container: 1200px;
  --gutter: 20px;                  /* 20px on mobile, 24px above */

  /* Shape */
  --radius-sm: 6px;   /* buttons, inputs */
  --radius-md: 10px;  /* cards */
  --radius-lg: 14px;  /* media */
  --shadow-1: 0 1px 2px rgba(13, 37, 49, .06);
  --shadow-2: 0 6px 16px -4px rgba(13, 37, 49, .12);

  /* Motion */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: ease;

  /* Context (light surface). .on-dark swaps these. */
  --fg: var(--text);
  --fg-heading: var(--navy-900);
  --fg-muted: var(--text-muted);
  --link: var(--blue-700);
  --link-hover: var(--blue-800);
  --rule: var(--line);
  --focus: var(--blue-600);
  --icon: var(--blue-600);
  --card-bg: var(--surface);
  --callout-bg: var(--blue-50);
  --callout-accent: var(--blue-700);
}

@media (min-width: 480px) {
  :root { --gutter: 24px; }
}
@media (min-width: 960px) {
  :root { --section-pad: var(--space-9); } /* 96px on desktop */
}

/* Dark context: navy bands, footer, dark header. */
.on-dark {
  --fg: #FFFFFF;
  --fg-heading: #FFFFFF;
  --fg-muted: var(--on-dark-muted);
  --link: #FFFFFF;
  --link-hover: var(--sky-300);
  --rule: rgba(197, 211, 220, .2);
  --focus: var(--sky-300);
  --icon: var(--sky-300);
  --card-bg: var(--navy-800);
  --callout-bg: var(--navy-800);
  --callout-accent: var(--sky-300);
  background-color: var(--navy-900);
  color: var(--fg);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--fg);
  background: var(--surface);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-inline-size: 100%; }
img { block-size: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  color: var(--fg-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

p { margin: 0; max-inline-size: var(--measure); text-wrap: pretty; }
p + p { margin-block-start: var(--space-4); }

b, strong { font-weight: 600; }
em, i, cite, address, dfn { font-style: normal; } /* no italics in the kit */

ul, ol { margin: 0; padding: 0; }

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease);
}
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

.display { font-size: var(--fs-display); line-height: var(--lh-display); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.small { font-size: var(--fs-small); line-height: 1.6; }
.muted { color: var(--fg-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1.4;
  color: var(--blue-700);
}
.on-dark .eyebrow { color: var(--sky-300); }

/* A 24px dimension line with end ticks: |———| */
.dim-mark {
  flex: none;
  inline-size: 24px;
  block-size: 11px;
  color: var(--blue-600);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 1px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 50% / 1px 100% no-repeat;
}
.on-dark .dim-mark { color: var(--sky-300); }

/* ---------- Focus ---------- */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- Layout ---------- */
.container {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); background: var(--surface); }
.section--alt { background: var(--surface-alt); }
.section--navy { background: var(--navy-900); }

.section-head {
  display: grid;
  gap: var(--space-3);
  margin-block-end: var(--space-7);
}
.section-head p { color: var(--fg-muted); }

/* Two-part layout: a narrow side (5) and a wide side (7) */
.split { display: grid; gap: var(--space-7); }
.split > .section-head { margin-block-end: 0; }
@media (min-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
    align-items: start;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 48px;
  padding-block: var(--space-2);
  padding-inline: var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn--sm { min-block-size: 44px; padding-inline: var(--space-4); font-size: 1rem; }

/* Primary: blue-700, hover blue-800 */
.btn--primary { background: var(--blue-700); border-color: var(--blue-700); color: #FFFFFF; }
.btn--primary:hover { background: var(--blue-800); border-color: var(--blue-800); color: #FFFFFF; }

/* Secondary: outline on light surfaces */
.btn--secondary { background: transparent; border-color: var(--border-strong); color: var(--navy-900); }
.btn--secondary:hover { background: var(--blue-50); border-color: var(--navy-900); color: var(--navy-900); }
.on-dark .btn--secondary { color: #FFFFFF; border-color: var(--sky-300); }
.on-dark .btn--secondary:hover { background: rgba(111, 180, 219, .12); border-color: var(--sky-300); color: #FFFFFF; }

/* Outline on dark: sky-300 */
.btn--outline-dark { background: transparent; border-color: var(--sky-300); color: var(--sky-300); }
.btn--outline-dark:hover { background: rgba(111, 180, 219, .12); color: #FFFFFF; }

/* Primary on dark: white with navy text */
.btn--light { background: #FFFFFF; border-color: #FFFFFF; color: var(--navy-900); }
.btn--light:hover { background: var(--blue-100); border-color: var(--blue-100); color: var(--navy-900); }

/* INTERSOL button, inside INTERSOL surfaces only */
.btn--intersol { background: var(--intersol-600); border-color: var(--intersol-600); color: #FFFFFF; }

/* Arrows point the RTL way: forward is to the left. */
.has-arrow::after,
.has-arrow-down::after {
  content: "";
  flex: none;
  inline-size: 1.125em;
  block-size: 1.125em;
  background-color: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  transition: transform var(--dur-2) var(--ease);
}
.has-arrow { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.has-arrow-down { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
.has-arrow:hover::after { transform: translateX(-3px); }      /* RTL forward */
.has-arrow-down:hover::after { transform: translateY(2px); }
.has-arrow:dir(ltr)::after { scale: -1 1; }

/* Standalone text link with an arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
@media (min-width: 640px) {
  .card { padding: var(--space-6); }
}
.on-dark .card { box-shadow: none; }
.card p { color: var(--fg-muted); }
.card__foot { margin-block-start: auto; padding-block-start: var(--space-3); }

.card-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 960px) {
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Square icon tile at the top of a card */
.icon-tile {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  color: var(--icon);
}
.on-dark .icon-tile { background: var(--navy-800); } /* sky-300 icon stays on navy */
.icon-tile svg { inline-size: 26px; block-size: 26px; }

/* INTERSOL card: INTERSOL logo, INTERSOL link colour, a thin cyan accent line */
.card--intersol { overflow: hidden; }
.card--intersol::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: var(--intersol-cyan);
}
.card--intersol .card__logo { block-size: 48px; display: flex; align-items: center; }
.card--intersol .card__logo img { block-size: 30px; inline-size: auto; }
.card--intersol a { color: var(--intersol-600); }
.card--intersol a:hover { color: var(--intersol-600); } /* the underline marks hover */

/* ---------- Lists ---------- */
.checklist { list-style: none; display: grid; gap: var(--space-4); }
.checklist li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.checklist li::before {
  content: "";
  inline-size: 24px;
  block-size: 24px;
  margin-block-start: .2em;
  background: var(--mark) center / 24px 24px no-repeat;
}
.checklist--yes { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E3F0F7'/%3E%3Cpath d='M7.5 12.4l3.1 3.1 5.9-6.4' fill='none' stroke='%231B6A93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.checklist--no { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='none' stroke='%236B7C88'/%3E%3Cpath d='M8 12h8' fill='none' stroke='%234F606C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Scope card, "what it does not decide" */
.card--scope-out {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-strong);
  box-shadow: none;
}

/* ---------- Steps: a chained dimension line, |——|——|——|——| ---------- */
.steps {
  --tick: var(--navy-900);
  --chain: var(--border-strong);
  list-style: none;
  counter-reset: step;
  position: relative;
  display: grid;
  gap: 0;
}
.steps > li {
  counter-increment: step;
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding-block: 0 var(--space-6);
  padding-inline: var(--space-6) 0;
}
.steps > li::before,
.steps > li::after,
.steps::after {
  content: "";
  position: absolute;
}
/* vertical chain on small screens */
.steps > li::before {
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  background: var(--chain);
}
.steps > li::after,
.steps::after {
  inset-inline-start: -6px;
  inline-size: 13px;
  block-size: 1px;
  background: var(--tick);
}
.steps > li::after { inset-block-start: 0; }
.steps::after { inset-block-end: 0; }
.steps p { color: var(--fg-muted); }
.step__num {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1;
}
.step__num::before { content: counter(step); }

@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps > li { padding-block: var(--space-6) 0; padding-inline: 0 var(--space-6); }
  .steps > li::before {
    inset-block: 0 auto;
    inset-inline: 0;
    inline-size: auto;
    block-size: 1px;
  }
  .steps > li::after,
  .steps::after {
    inset-block-start: -6px;
    inline-size: 1px;
    block-size: 13px;
  }
  .steps > li::after { inset-inline-start: 0; }
  .steps::after { inset-block-end: auto; inset-inline-start: auto; inset-inline-end: 0; }
}

/* ---------- Signer ---------- */
.signer { align-items: flex-start; gap: var(--space-5); }
.signer__id { display: flex; align-items: center; gap: var(--space-4); }
.signer__id p { margin: 0; }
.signer-body { display: grid; gap: var(--space-6); align-content: start; }
.signer__initials {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #FFFFFF;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1;
}
.on-dark .signer__initials { background: var(--sky-300); color: var(--navy-900); }
/* .card .x beats `.card p`, so the name keeps the heading colour inside the card. */
.card .signer__name,
.signer__name {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--fg-heading);
}
.signer__role { color: var(--fg-muted); margin-block-start: 0; }
.card .signer__cred,
.signer__cred {
  inline-size: 100%;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--rule);
  color: var(--fg);
}

/* ---------- Callout ---------- */
.callout {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--callout-bg);
  border-inline-start: 3px solid var(--callout-accent);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}
.callout p { color: var(--fg); }

/* ---------- Form controls ---------- */
.form-card {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}
@media (min-width: 640px) {
  .form-card { padding: var(--space-7); }
}
.form-grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}
.field { display: grid; gap: var(--space-2); min-inline-size: 0; }
.field > label,
.choice-group > legend {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-900);
}
.req { color: var(--blue-700); margin-inline-start: var(--space-1); }

.input,
.textarea {
  inline-size: 100%;
  min-block-size: 48px;
  padding-block: var(--space-3);
  padding-inline: var(--space-3);
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input[dir="ltr"] { text-align: end; } /* ltr value, aligned with the RTL column */
.textarea { min-block-size: 144px; resize: vertical; }
.input:hover,
.textarea:hover { border-color: var(--navy-700); }
.input:focus-visible,
.textarea:focus-visible {
  border-color: var(--blue-700);
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

.choice-group { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.choice-group > legend { padding: 0; margin-block-end: var(--space-2); }
.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 48px;
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
@media (max-width: 479.98px) {
  .choice { padding-inline: var(--space-2); }
}
.choice:hover { border-color: var(--navy-700); }
.choice:has(input:checked) { border-color: var(--blue-700); background: var(--blue-50); }
.choice input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  inline-size: 20px;
  block-size: 20px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.choice input::before {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--blue-700);
  transform: scale(0);
  transition: transform var(--dur-1) var(--ease);
}
.choice input:checked { border-color: var(--blue-700); }
.choice input:checked::before { transform: scale(1); }
.choice input:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }

.form-actions {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}
.form-actions .btn { min-inline-size: 160px; }
.form-note { color: var(--text-muted); }

/* ---------- Ribbon (mock switcher) ---------- */
.ribbon {
  background: var(--blue-100);
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.ribbon .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-2);
}
.ribbon p { margin: 0; }
.ribbon a { color: var(--blue-700); font-weight: 600; }
.ribbon a:hover { color: var(--blue-800); }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 2; }
.header-bar {
  background: var(--surface);
  border-block-end: 1px solid var(--rule);
}
.header-bar.on-dark { background: var(--navy-900); }
.header-bar .container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand nav cta";
  align-items: center;
  column-gap: var(--space-6);
  min-block-size: 80px;
}
.brand { grid-area: brand; display: inline-flex; border-radius: var(--radius-sm); }
.brand img { block-size: 40px; inline-size: auto; }
.header-cta { grid-area: cta; }
/* Keep the logo and the button at their own size when the nav wraps beneath
   and widens both columns. In RTL, start is the right side, end the left. */
.brand { justify-self: start; }
.header-cta { justify-self: end; }

.site-nav { grid-area: nav; }
.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-5);
}
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg);
  text-decoration: none;
}
.site-nav a:hover { color: var(--link-hover); }
.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 4px;
  block-size: 2px;
  background: transparent;
  transition: background-color var(--dur-2) var(--ease);
}
.site-nav a[aria-current="page"] { color: var(--fg-heading); font-weight: 600; }
.site-nav a[aria-current="page"]::after { background: var(--blue-600); }
.on-dark .site-nav a { color: var(--on-dark-muted); }
.on-dark .site-nav a:hover { color: #FFFFFF; }
.on-dark .site-nav a[aria-current="page"] { color: #FFFFFF; }
.on-dark .site-nav a[aria-current="page"]::after { background: var(--sky-300); }

/* Below 1080px: logo and button on the first row, the nav wraps beneath. */
@media (max-width: 1079.98px) {
  .header-bar .container {
    grid-template-columns: auto auto;
    grid-template-areas: "brand cta" "nav nav";
    justify-content: space-between;
    row-gap: var(--space-2);
    padding-block: var(--space-3) var(--space-2);
    min-block-size: 0;
  }
  .site-nav ul { justify-content: flex-start; gap: 0 var(--space-4); }
  .site-nav a { font-size: .9375rem; min-block-size: 36px; }
}

/* ---------- Hero (shared structure) ---------- */
.hero { position: relative; isolation: isolate; padding-block: var(--space-8); }
@media (min-width: 960px) {
  .hero { padding-block: var(--space-9); }
}
.hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--space-8); }
}
.hero__text { display: grid; gap: var(--space-5); justify-items: start; }
.hero__text .lead { color: var(--fg); }
.hero__note {
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--rule);
  color: var(--fg-muted);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }
@media (max-width: 479.98px) {
  .hero__actions { display: grid; inline-size: 100%; }
}
.hero__media { inline-size: 100%; max-inline-size: 560px; justify-self: center; }

/* ---------- Line drawing (roof plan) ---------- */
.drawing {
  --dw-outline: var(--navy-900);
  --dw-line: var(--navy-700);
  --dw-panel: var(--navy-700);
  --dw-panel-fill: var(--blue-50);
  --dw-dim: var(--blue-600);
  --dw-ext: var(--border-strong);
  --dw-hi: var(--sun-500);
  inline-size: 100%;
  block-size: auto;
}
.on-dark .drawing {
  --dw-outline: #FFFFFF;
  --dw-line: var(--on-dark-muted);
  --dw-panel: var(--sky-300);
  --dw-panel-fill: rgba(111, 180, 219, .1);
  --dw-dim: var(--sky-300);
  --dw-ext: rgba(197, 211, 220, .45);
}
.drawing .dw-outline { fill: none; stroke: var(--dw-outline); stroke-width: 1.5; stroke-linejoin: round; }
.drawing .dw-line { fill: none; stroke: var(--dw-line); stroke-width: 1; }
.drawing .dw-panels rect { fill: var(--dw-panel-fill); stroke: var(--dw-panel); stroke-width: 1; }
.drawing .dw-hi { fill: rgba(245, 165, 36, .22); stroke: var(--dw-hi); stroke-width: 2; }
.drawing .dw-ext { fill: none; stroke: var(--dw-ext); stroke-width: .75; stroke-dasharray: 3 3; }
.drawing .dw-dim { fill: none; stroke: var(--dw-dim); stroke-width: 1; }
.drawing .dw-tick { fill: none; stroke: var(--dw-dim); stroke-width: 1.5; stroke-linecap: square; }

/* ---------- Footer ---------- */
.site-footer {
  padding-block: var(--space-7);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.footer-grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--space-7);
  }
}
.footer-brand img { block-size: 40px; inline-size: auto; }
.footer-info { display: grid; gap: var(--space-1); color: var(--on-dark-muted); }
.footer-info p { margin: 0; }
.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.site-footer a { color: #FFFFFF; }
.site-footer a:hover { color: var(--sky-300); }

/* ---------- Forced colours (Windows High Contrast) ---------- */
/* Background colours are replaced there, so the custom dot would vanish:
   fall back to the native radio, which shows its checked state. */
@media (forced-colors: active) {
  .choice input { appearance: auto; -webkit-appearance: auto; }
  .choice input::before { content: none; }
}

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