/* ===========================================================================
   GEEKS360 iD — DIGITAL BUSINESS CARD
   ---------------------------------------------------------------------------
   Dark counterpart to the geeks360.com.au design system. The brand values are
   identical to the website's assets/css/base.css; what changes is that this
   surface is dark, so the neutral ramp is inverted and the accessible-orange
   rule flips: on white, brand orange fails AA for text and --g-accent-ink is
   used instead; on brand navy, #F58220 reaches 4.80:1 and is allowed as text.

   Contrast, measured against the surfaces they actually sit on:
     #FFFFFF  on #0A1E38 ............ 16.9:1
     #DCE5F0  on #0A1E38 ............ 13.0:1
     #9DB0C9  on #0A1E38 ............  7.0:1   (muted copy)
     #F58220  on #0A1E38 ............  6.3:1   (accent text, eyebrows)
     #12355B  on #F58220 ............  4.8:1   (primary button)
   =========================================================================== */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin.6438d7b8ea.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;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.920711de9a.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;
}

:root {
  --ink:            #12355B;
  --ink-soft:       #1B4A7A;
  --ink-deep:       #0A1E38;
  --accent:         #F58220;
  --accent-warm:    #FF9A45;

  --bg:             #0A1E38;
  --text:           #FFFFFF;
  --text-body:      #DCE5F0;
  --text-muted:     #9DB0C9;

  --surface:        rgba(255, 255, 255, 0.045);
  --surface-hover:  rgba(255, 255, 255, 0.075);
  --border:         rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.20);

  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;

  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 2.75rem;

  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shell: 552px;
  --gutter: clamp(1.125rem, 0.5rem + 2.6vw, 1.75rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.4s;

  --shadow:    0 14px 38px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.44);
}

/* ===========================================================================
   RESET
   =========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
  background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--text-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The page ground: brand navy lifted by a warm accent glow behind the hero and
   a cool one low down, so a long scroll does not flatten into a single slab. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(78rem 42rem at 50% -14rem, rgba(245, 130, 32, 0.16), transparent 62%),
    radial-gradient(52rem 40rem at 12% 42%, rgba(27, 74, 122, 0.55), transparent 60%),
    linear-gradient(180deg, #0C2542 0%, #0A1E38 46%, #081729 100%);
}

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

h1, h2, h3 {
  margin: 0;
  color: var(--text);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--accent); text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

/* Visible keyboard focus — required for accessibility, do not remove. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.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;
  top: -120px;
  left: var(--gutter);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ===========================================================================
   SHELL
   =========================================================================== */

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

.stack > * + * { margin-top: var(--s4); }

.panel {
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--s2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.section-title {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}

/* ===========================================================================
   MASTHEAD
   =========================================================================== */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: 1.5rem 1.25rem;
}

.masthead__logo {
  width: 132px;
  flex: none;
}
.masthead__logo svg { width: 100%; height: auto; }

.masthead__badge {
  flex: none;
  padding: 0.3rem 0.7rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

/* ===========================================================================
   HERO
   =========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--s5) var(--s4) var(--s4);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* A single specular line across the top edge — the detail that separates a
   dark card from a dark rectangle. */
.hero::before {
  content: "";
  position: absolute;
  inset-inline: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
}

.hero__portrait {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 0 auto var(--s3);
}

.hero__portrait img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* Accent arc: a quarter-ring in brand orange, echoing the logo's open circle. */
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  transform: rotate(28deg);
}

.hero__name {
  font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.25rem);
  letter-spacing: -0.035em;
}

.hero__title {
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.hero__org {
  margin-top: 0.15rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.hero__location {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--s3);
  padding: 0.3rem 0.85rem 0.3rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.hero__location svg { width: 13px; height: 13px; flex: none; }

.hero__statement {
  max-width: 36ch;
  margin: var(--s4) auto 0;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--text-body);
  text-wrap: pretty;
}

/* ===========================================================================
   ACTIONS
   =========================================================================== */

.actions--primary {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s4);
}

@media (min-width: 400px) {
  .actions--primary { grid-template-columns: 1fr 1fr; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.9rem 1.25rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease), transform 0.2s var(--ease),
              box-shadow 0.25s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(245, 130, 32, 0.26);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(245, 130, 32, 0.34);
}

.btn--light {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--ink);
}
.btn--light:hover,
.btn--light:focus-visible {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn:active { transform: translateY(0) scale(0.985); }

/* Secondary actions.

   One column on a phone, two from 530px up. Two columns at 375px leaves each
   tile 164px wide and an 86px text column, which truncates every one of the
   four subtitles — including the email address, which is the whole point of
   the tile. Full-width rows on a phone also give a considerably larger tap
   target (71px against the 44px minimum).

   The breakpoint is 530px rather than a rounder 480px because it was measured,
   not guessed: at 480px the text column is 138px and michael@geeks360.com.au
   still ellipsises; at 530px it clears. */
.actions--secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
}

@media (min-width: 530px) {
  .actions--secondary { grid-template-columns: 1fr 1fr; }
  /* At two columns the text column is ~167px, which an email address fills
     exactly at 12px. One step down clears it without looking undersized. */
  .actions--secondary .action__meta { font-size: 0.6875rem; }
}

/* Grid and flex items default to min-width:auto, which means a long label like
   "Book a Consultation" pushes its column past 1fr and the row overflows the
   viewport. Every level from the grid item down to the text block has to opt
   out for the ellipsis on .action__meta to be reachable. */
.actions--secondary > * { min-width: 0; }

.action {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  min-height: 62px;
  padding: 0.85rem 0.95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
              transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.action:hover,
.action:focus-visible {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.action:active { transform: translateY(0) scale(0.99); }

.action__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--accent);
  background: rgba(245, 130, 32, 0.13);
  border-radius: 10px;
  transition: background-color 0.25s var(--ease);
}
.action__icon svg { width: 17px; height: 17px; }
.action:hover .action__icon { background: rgba(245, 130, 32, 0.22); }

.action__text { min-width: 0; }

.action__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.action__meta {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===========================================================================
   TAGS
   =========================================================================== */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag {
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-body);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

/* ===========================================================================
   WHAT WE HELP WITH
   =========================================================================== */

.help {
  display: grid;
  gap: 1px;
  margin-top: var(--s3);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.help__item {
  padding: var(--s3);
  background: rgba(10, 30, 56, 0.72);
}

.help__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}
.help__title::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}

.help__text {
  margin-top: 0.35rem;
  padding-left: 1.1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ===========================================================================
   QR
   =========================================================================== */

.qr {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s3);
}

.qr__code {
  width: 124px;
  flex: none;
  padding: 10px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.qr__code svg { width: 100%; height: auto; display: block; }

.qr__copy { min-width: 0; }

.qr__url {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: break-word;
}

.qr__note {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.qr__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--s2);
}

.chip {
  padding: 0.35rem 0.7rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-body);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip:hover,
.chip:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--border-strong);
  color: var(--text);
}

/* ===========================================================================
   WALLET
   =========================================================================== */

.wallet {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s3);
}

@media (min-width: 420px) {
  .wallet { grid-template-columns: 1fr 1fr; }
}

/* Apple and Google both publish rigid artwork rules for their own badges. This
   is deliberately a Geeks360 button rather than an imitation of either badge:
   a lookalike that is not the licensed asset is worse than an honest one. */
.wallet__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.8rem 1rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), transform 0.2s var(--ease),
              border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.wallet__btn svg { width: 18px; height: 18px; flex: none; }
.wallet__btn:hover:not([aria-disabled="true"]),
.wallet__btn:focus-visible {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
}
.wallet__btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.wallet__state {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: var(--s2);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.wallet__state[hidden] { display: none; }

.wallet__dot {
  width: 7px;
  height: 7px;
  margin-top: 0.45rem;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}

/* ===========================================================================
   FORM
   =========================================================================== */

.field { margin-top: var(--s3); }

.field__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

.field__optional {
  font-weight: 500;
  color: var(--text-muted);
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: inherit;
  font-size: 1rem; /* 16px — anything smaller makes iOS Safari zoom on focus */
  line-height: 1.5;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.field__input::placeholder,
.field__textarea::placeholder { color: rgba(157, 176, 201, 0.75); }

.field__input:hover,
.field__select:hover,
.field__textarea:hover { border-color: rgba(255, 255, 255, 0.3); }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--accent);
  outline: 3px solid rgba(245, 130, 32, 0.32);
  outline-offset: 1px;
}

.field__textarea { min-height: 108px; resize: vertical; }

.field__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%239DB0C9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  padding-right: 2.4rem;
}
.field__select option { color: #12355B; background: #FFFFFF; }

.field__input[aria-invalid="true"],
.field__textarea[aria-invalid="true"],
.field__select[aria-invalid="true"] { border-color: #FF8A8A; }

.field__error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #FFB3B3; /* 8.4:1 on the panel surface */
}
.field__error:empty { display: none; }

/* The honeypot. Off-screen rather than display:none, because a bot that reads
   computed styles skips display:none fields; it is also aria-hidden and
   removed from the tab order so it is inert for anyone using the page. */
.field--trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit { width: 100%; margin-top: var(--s4); }

.form__note {
  margin-top: var(--s2);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.form__status {
  margin-top: var(--s3);
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
}
.form__status[hidden] { display: none; }
.form__status--ok {
  color: #D6F5E3;
  background: rgba(52, 168, 108, 0.16);
  border-color: rgba(82, 214, 142, 0.45);
}
.form__status--error {
  color: #FFDCDC;
  background: rgba(200, 60, 60, 0.16);
  border-color: rgba(255, 138, 138, 0.45);
}

/* ===========================================================================
   FOOTER
   =========================================================================== */

.footer {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  margin-bottom: var(--s2);
  font-size: 0.8125rem;
  font-weight: 600;
}
.footer__links a { color: var(--text-body); }
.footer__links a:hover { color: var(--accent); }

.footer__meta {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ===========================================================================
   MOTION
   ---------------------------------------------------------------------------
   Reveal is opt-in from JS: the .reveal class is only added once the observer
   is running, so with JS disabled every section is visible from the start
   rather than permanently transparent.
   =========================================================================== */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .btn:hover, .action:hover, .wallet__btn:hover, .chip:hover { transform: none; }
}

/* ===========================================================================
   PRINT
   =========================================================================== */

@media print {
  body::before { display: none; }
  body { background: #FFFFFF; color: #2D3748; }
  .hero, .panel { background: #FFFFFF; border-color: #E2E8F0; box-shadow: none; }
  h1, h2, h3, .hero__org, .action__label, .qr__url { color: #12355B; }
  .hero__title { color: #A85410; }
  .text-muted, .help__text, .qr__note, .footer__meta, .action__meta { color: #5A6880; }
  .actions--primary, .wallet, .form, .skip-link, .qr__downloads { display: none; }
}

/* ===========================================================================
   UTILITIES
   ---------------------------------------------------------------------------
   These exist so the markup carries no `style` attributes. The production
   Content-Security-Policy sets `style-src 'self'` with no 'unsafe-inline',
   which blocks inline style attributes as well as <style> blocks — so a single
   `style="margin-top:1rem"` anywhere in the page would either be silently
   dropped or force the policy to be weakened for every element on the page.
   =========================================================================== */

.u-mt-3 { margin-top: var(--s3); }
.u-mt-4 { margin-top: var(--s4); }
.u-center { justify-content: center; }
.u-title-sm { font-size: 1.5rem; }

/* Standalone message pages (404, and the no-JavaScript enquiry response) reuse
   the hero surface but are not a profile hero. */
.message-page { margin-top: var(--s4); }
.message-page .hero__name { font-size: 1.5rem; }

/* Privacy note under the enquiry form. */
.form__privacy {
  margin-top: var(--s2);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.form__privacy a {
  color: var(--text-body);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form__privacy a:hover,
.form__privacy a:focus-visible { color: var(--accent); }