/* ==========================================================================
   Trunnion — shared stylesheet
   One dark base, one bright accent. Nothing else.
   Sections alternate white / very light grey. Max content width 1200px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Dark base */
  --navy:        #101B2D;
  --navy-soft:   #16243A;
  --navy-line:   #24374F;

  /* Ink on light */
  --ink:         #17202E;
  --muted:       #525F70;
  --line:        #E2E6EC;

  /* Surfaces */
  --bg:          #FFFFFF;
  --bg-alt:      #F4F5F7;

  /* The one accent. Two tints of the same hue so text passes AA on both
     light and dark surfaces — visually it reads as a single colour. */
  --accent:      #F97316; /* on dark backgrounds, buttons, rules */
  --accent-ink:  #C2410C; /* accent text on light backgrounds */
  --accent-lift: #FFB27A; /* focus rings on dark backgrounds */
  --accent-soft: #FFF2E8;

  /* Shape */
  --radius:      14px;
  --radius-sm:   10px;
  --shadow:      0 1px 2px rgba(16, 27, 45, .05), 0 8px 24px rgba(16, 27, 45, .07);
  --shadow-lift: 0 2px 6px rgba(16, 27, 45, .07), 0 18px 40px rgba(16, 27, 45, .13);

  /* Rhythm */
  --maxw:        1200px;
  --gutter:      24px;
  --pad-y:       clamp(56px, 8vw, 96px);

  /* Type scale. Body is the 18px base; these are the steps below it. */
  --fs-sm:       .95rem;  /* secondary text: hints, captions, footer, labels */
  --fs-xs:       .82rem;  /* fine print: legal line, meta */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Clears the sticky header so an anchored heading is not hidden under it. */
:target, [id] { scroll-margin-top: 104px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) { body { font-size: 18px; } }

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

/* Surfaces the browser would otherwise draw in nobody's design system. */
::selection { background: #FFDFC7; color: var(--ink); }
.band--dark ::selection, .site-header ::selection, .site-footer ::selection,
.hero ::selection, .page-header ::selection { background: rgba(249,115,22,.35); color: #FFFFFF; }
input, textarea, select { caret-color: var(--accent-ink); }
html { scrollbar-color: #B7C0CC var(--bg-alt); }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.35rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.2; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.35; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-ink); text-underline-offset: .18em; }
a:hover { color: var(--ink); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

strong { font-weight: 700; }

/* Focus — always visible, always keyboard reachable */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: 4px;
}
.site-header :focus-visible,
.site-footer :focus-visible,
.band--dark :focus-visible,
.hero :focus-visible { outline-color: var(--accent-lift); }

/* Spam trap. Positioned off screen rather than display:none, because some bots
   skip fields they can tell are hidden. Real people never see or tab to it. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.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;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--navy);
  padding: .6rem 1rem; border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: var(--navy); }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.band { padding: var(--pad-y) 0; }
.band--alt  { background: var(--bg-alt); }
.band--dark { background: var(--navy); color: #FFFFFF; }
.band--dark h1, .band--dark h2, .band--dark h3 { color: #FFFFFF; }
.band--dark p { color: #D5DBE4; }
.band--tight { padding: clamp(40px, 5vw, 64px) 0; }

.measure     { max-width: 62ch; }
.measure-wide{ max-width: 74ch; }
.center      { text-align: center; margin-left: auto; margin-right: auto; }

.stack > * + * { margin-top: 1rem; }

/* Utilities standing in for what used to be inline style attributes. */
.section-foot { margin-top: 2.5rem; }
.tight  { margin-bottom: .4rem; }
.loose  { margin-bottom: 1.4rem; }
.h-sub  { font-size: 1.4rem; }
.card__name { margin-top: 1.2rem; }
.card__meta--spaced { margin-top: 1.2rem; }
.btn-row--center { justify-content: center; }

/* Eyebrow — the signature label above every section heading */
.eyebrow {
  display: block;
  margin: 0 0 .9rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.band--dark .eyebrow,
.hero .eyebrow,
.page-header .eyebrow,
.site-footer .eyebrow { color: var(--accent); }

.section-head { margin-bottom: clamp(32px, 4vw, 52px); }
.section-head p { color: var(--muted); }
.band--dark .section-head p { color: #D5DBE4; }

/* --------------------------------------------------------------------------
   4. Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--accent { background: var(--accent); color: var(--navy); }
.btn--accent:hover { background: #FF8A34; color: var(--navy); transform: translateY(-1px); }

.btn--outline { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.45); }
.btn--outline:hover { background: rgba(255,255,255,.1); color: #FFFFFF; border-color: #FFFFFF; }

.btn--dark { background: var(--navy); color: #FFFFFF; }
.btn--dark:hover { background: var(--navy-soft); color: #FFFFFF; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }

/* Text link with an arrow — the accent is used here and nowhere else */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  color: var(--accent-ink);
  text-decoration: none;
}
.arrow-link::after { content: "\2192"; transition: transform .18s ease; }
.arrow-link { min-height: 44px; }

/* A link with nowhere to go must look unfinished. Without this the dead
   ones read as working and only fail on click, which is the worse failure. */
.link-pending {
  padding-bottom: .12em;
  border-bottom: 1px dashed #E0A277;
  color: var(--accent-ink);
  text-decoration: none;
  cursor: not-allowed;
}
.link-pending::after {
  content: " (link pending)";
  font-size: .8em;
  font-weight: 400;
  opacity: .85;
}
.band--dark .link-pending,
.site-footer .link-pending { color: #FFC79B; border-bottom-color: rgba(249,115,22,.5); }
.site-footer .link-pending::after {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.arrow-link:hover { color: var(--ink); text-decoration: underline; }
.arrow-link:hover::after { transform: translateX(3px); }
.band--dark .arrow-link, .hero .arrow-link { color: var(--accent); }
.band--dark .arrow-link:hover, .hero .arrow-link:hover { color: #FFFFFF; }

/* Phone shown beside the primary button */
.call-out { display: flex; flex-direction: column; gap: .1rem; }
.call-out__label { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.call-out__number {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-decoration: none;
}
.call-out__number { display: inline-flex; align-items: center; min-height: 44px; }
.call-out__number:hover { color: var(--accent); }
.band:not(.band--dark) .call-out__label { color: var(--accent-ink); }
.band:not(.band--dark) .call-out__number { color: var(--ink); }
.band:not(.band--dark) .call-out__number:hover { color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  color: #FFFFFF;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 82px;
  padding-top: .75rem;
  padding-bottom: .75rem;
  flex-wrap: wrap;
}

.logo {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  min-height: 44px;
  color: #FFFFFF;
  text-decoration: none;
}
.logo:hover { color: #FFFFFF; }

/* The lockup is masked rather than placed as <img> so it inherits the
   surrounding colour. currentColor is white on both the header and the
   footer today; a light surface would need no change. */
.logo__lockup {
  display: block;
  width: 155px;
  height: 34px;
  background: currentColor;
  -webkit-mask: url("../img/trunnion-lockup.svg") left center / contain no-repeat;
          mask: url("../img/trunnion-lockup.svg") left center / contain no-repeat;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  order: 3;
  padding: .55rem .9rem;
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: 0; padding: 0;
  list-style: none;
}
.site-nav li { margin: 0; }
.site-nav a {
  display: inline-block;
  padding: .35rem 0;
  color: #E7EBF1;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: #FFFFFF; border-bottom-color: var(--accent); }
.site-nav a[aria-current="page"] { color: #FFFFFF; border-bottom-color: var(--accent); }

.header-cta { display: flex; align-items: center; gap: 1.1rem; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--accent); }
.header-phone { min-height: 44px; padding-block: .5rem; }
.header-phone svg { flex: none; }

/* The primary CTA stays reachable at every width; the phone number is what
   compresses, since the button is the thing a decided visitor is looking for.
   No ::after label swap here — generated content is announced by screen
   readers and would double up with the visually-hidden "Call us on". */
@media (max-width: 1080px) {
  .header-cta { gap: .75rem; }
  .header-phone { font-size: .9rem; }
  .header-cta .btn { padding: .7rem 1.1rem; font-size: var(--fs-sm); }
}
@media (max-width: 560px) {
  .header-phone span:not(.sr-only) { display: none; }
  .header-phone { padding-inline: .55rem; }
}

@media (max-width: 900px) {
  .header-inner { min-height: 68px; }
  .html-js .nav-toggle { display: inline-flex; }
  .html-js .site-nav {
    order: 4;
    flex-basis: 100%;
    display: none;
    padding: .5rem 0 1rem;
    border-top: 1px solid var(--navy-line);
  }
  .html-js body.nav-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { padding: .7rem 0; border-bottom: 1px solid var(--navy-line); }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--navy-line); color: var(--accent); }
  .header-phone { font-size: var(--fs-sm); }
}

/* --------------------------------------------------------------------------
   6. Hero (home) and page headers (inner pages)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy);
  color: #FFFFFF;
  overflow: hidden;
}
/* Placeholder ground for the hero photograph. Replace the gradient below with
   a real image: background-image: url("assets/img/hero.jpg"); + the overlay. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 480px at 72% 12%, rgba(86, 132, 196, .16), transparent 64%),
    radial-gradient(760px 460px at 8% 92%, rgba(56, 105, 168, .22), transparent 62%),
    linear-gradient(160deg, #0C1524 0%, #16243A 62%, #101B2D 100%);
}
.hero__inner {
  position: relative;
  /* padding-block, not the shorthand: the shorthand would reset .wrap's
     horizontal gutter and slam the headline against the viewport edge. */
  padding-block: clamp(64px, 9vw, 128px) clamp(56px, 8vw, 104px);
}
.hero h1 { max-width: 19ch; }
/* Deliberately not a second headline: one display voice per hero. */
.hero__lead {
  margin: 0 0 1.75rem;
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 400;
  line-height: 1.6;
  color: #C6CEDA;
}
.hero__actions { margin-top: 2rem; }
.hero__note {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.16);
  max-width: 66ch;
  color: #C6CEDA;
  font-size: var(--fs-sm);
}

.page-header { background: var(--navy); color: #FFFFFF; }
.page-header__inner { padding-block: clamp(48px, 6.5vw, 88px) clamp(44px, 6vw, 80px); }
.page-header h1 { max-width: 20ch; }
.page-header p { color: #D5DBE4; font-size: 1.05rem; max-width: 62ch; }
.page-header .btn-row { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   7. Cards — one component, reused for services, industries and insights
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #D3DAE4; }
.card h3 { margin-bottom: .6rem; }
/* A linked card heading is a heading first. The accent is reserved for the
   arrow link below it, so the card has one coloured call to action, not two. */
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--accent-ink); text-decoration: underline; }
.card p { color: var(--muted); font-size: 1rem; }
.card .arrow-link { margin-top: auto; padding-top: 1.4rem; align-self: flex-start; }
.card__meta {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: .8rem;
  padding: .25rem .7rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.card .card__answer { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); color: var(--ink); font-size: 1rem; }
.card--flat { box-shadow: none; }
.card--flat:hover { transform: none; box-shadow: var(--shadow); }

/* Service section — a heading and its hook on the left, the story on the right. */
.service { display: grid; gap: clamp(20px, 3vw, 48px); align-items: start; }
@media (min-width: 900px) { .service { grid-template-columns: .85fr 1.15fr; } }
.service__head h2 { margin-bottom: .6rem; }
.service__hook {
  max-width: 26ch;
  font-size: clamp(1.05rem, 1.5vw, 1.15rem);
  line-height: 1.5;
  color: var(--muted);
}
.service__body { max-width: 62ch; }
.service__body p { color: var(--ink); }
.service__included {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  max-width: 30ch;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.service__included strong { color: var(--ink); }
.service__body .arrow-link { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   8. Benefit blocks (How We Help)
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(32px, 5vw, 64px); align-items: stretch; }
.split > .ph { display: flex; }
.split > .ph > .ph__box { flex: 1; }

/* Photographs keep the aspect ratio they were shot at. An earlier version
   stretched them to the height of the text column and cropped to fill, which
   at 940px threw away half the width of the picture and read as a heavy zoom.
   The column is aligned to the top instead, so a long text block leaves space
   below the photo rather than eating into it. width/height on the <img> hold
   the space while it loads. */
.photo { margin: 0; }
.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
@media (min-width: 940px) {
  .split > .photo { align-self: start; }
}
@media (min-width: 940px) { .split { grid-template-columns: 1.05fr .95fr; } }
@media (min-width: 940px) { .split--flip > :first-child { order: 2; } }

.benefits { display: grid; gap: 28px; }
@media (min-width: 620px) { .benefits { grid-template-columns: repeat(2, 1fr); } }

.benefit h3 { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .45rem; }
.benefit h3::before {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: #B7C0CC;
  transform: translateY(-2px);
}
.benefit p { color: var(--muted); font-size: 1rem; margin-bottom: 0; }

/* Checklist — "What's included as standard" */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 720px) { .checklist { grid-template-columns: repeat(2, 1fr); } }
.checklist li { position: relative; margin: 0; padding-left: 2.15rem; }
.checklist li::before {
  content: "\2713";
  position: absolute; left: 0; top: .1rem;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--navy);
  font-size: .8rem;
  font-weight: 800;
}
.checklist strong { display: block; }
.checklist span { color: var(--muted); font-size: var(--fs-sm); }
.band--dark .checklist span { color: #C6CEDA; }

/* Numbered steps (contact page, our story) */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 22px; }
.steps li { position: relative; margin: 0; padding-left: 3.1rem; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 800;
}
.band--dark .steps li::before { background: rgba(249,115,22,.18); color: var(--accent); }
.steps strong { display: block; }
.steps span { color: var(--muted); font-size: var(--fs-sm); }
.band--dark .steps span { color: #C6CEDA; }

/* --------------------------------------------------------------------------
   9. Placeholders — every unverified item is marked
   -------------------------------------------------------------------------- */
.ph { margin: 0; }
.ph__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  padding: 24px;
  min-height: 260px;
  background:
    repeating-linear-gradient(135deg, #EDEFF3 0 12px, #E6E9EE 12px 24px);
  border: 2px dashed #B9C2CE;
  border-radius: var(--radius);
  color: #46536A;
  text-align: left;
}
.ph__box--tall { min-height: 360px; }
.ph__box--wide { min-height: 300px; }
.ph__box--square { aspect-ratio: 1 / 1; min-height: 0; }
.ph__tag {
  align-self: flex-start;
  padding: .25rem .7rem;
  background: var(--navy);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ph__desc { font-size: var(--fs-sm); line-height: 1.5; }
.ph figcaption { margin-top: .6rem; font-size: .85rem; color: var(--muted); }

/* Placeholder token used inline in copy, e.g. [PHONE] */
.token {
  display: inline-block;
  padding: 0 .35em;
  background: var(--accent-soft);
  border: 1px dashed #E0A277;
  border-radius: 5px;
  font-weight: 700;
  color: var(--accent-ink);
  white-space: nowrap;
}
.band--dark .token, .site-footer .token, .hero .token,
.site-header .token, .page-header .token {
  background: rgba(249,115,22,.16);
  border-color: rgba(249,115,22,.5);
  color: #FFC79B;
}

/* Accreditation badges */
.badges { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .badges { grid-template-columns: repeat(4, 1fr); } }
.badge {
  display: grid; place-items: center;
  gap: .4rem;
  padding: 20px 12px;
  min-height: 132px;
  background: var(--bg);
  border: 2px dashed #B9C2CE;
  border-radius: var(--radius);
  text-align: center;
  font-size: .85rem;
  color: #46536A;
}
.badge strong { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   10. Forms — one shared contact form, plus the footer newsletter
   -------------------------------------------------------------------------- */
.form-card a:not(.btn) { display: inline-block; padding-block: .5rem; }
.consent a { display: inline; min-height: 0; }
.form-card {
  padding: clamp(24px, 3vw, 40px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 1.15rem; }
.field label { display: block; margin-bottom: .35rem; font-weight: 700; font-size: var(--fs-sm); }
.field .hint { display: block; margin-top: .3rem; font-size: .85rem; color: var(--muted); }
.req { color: var(--accent-ink); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .75rem .9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid #C8D0DA;
  border-radius: var(--radius-sm);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #9DA9B8; }

/* :user-invalid, not :invalid — an empty required field is not an error
   until the visitor has actually interacted with it. */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-color: #B3261E; border-width: 2px; }
.field input:user-invalid + .hint,
.field textarea:user-invalid ~ .hint { color: #8C1D18; font-weight: 600; }
.field input:user-valid,
.field textarea:user-valid { border-color: #4A7C59; }

.newsletter input:user-invalid { border-color: #FFB4AB; background: rgba(255,180,171,.12); }
.newsletter input:user-valid { border-color: rgba(160,220,180,.6); }

.field--row { display: grid; gap: 1.15rem; }
@media (min-width: 620px) { .field--row { grid-template-columns: repeat(2, 1fr); } }

.consent { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1.4rem; font-size: var(--fs-sm); color: var(--muted); }
.consent input { flex: none; width: 20px; height: 20px; margin-top: .25rem; }

.form-note { margin-top: 1.2rem; font-size: .9rem; color: var(--muted); }

.newsletter { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.newsletter label { display: block; width: 100%; font-size: .9rem; color: #C9D0DA; margin-bottom: .1rem; }
.newsletter input {
  flex: 1 1 190px;
  min-width: 0;
  padding: .7rem .9rem;
  font: inherit;
  font-size: var(--fs-sm);
  color: #FFFFFF;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-sm);
}
.newsletter input::placeholder { color: #9FAAB9; }
.newsletter button {
  flex: none;
  padding: .7rem 1.2rem;
  font: inherit;
  font-weight: 700;
  color: var(--navy);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.newsletter button:hover { background: #FF8A34; }

/* --------------------------------------------------------------------------
   11. Closing CTA band
   -------------------------------------------------------------------------- */
.cta-band { background: var(--navy); color: #FFFFFF; }
.cta-band .wrap { padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px); }
.cta-band h2 { max-width: 22ch; }
.cta-band p { color: #D5DBE4; }
.cta-band__inner { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 940px) { .cta-band__inner { grid-template-columns: 1.1fr .9fr; } }
.cta-band .review-link { color: #D5DBE4; font-size: var(--fs-sm); }
.cta-band .review-link a { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-soft); color: #C9D0DA; padding: clamp(48px, 6vw, 76px) 0 0; }
.site-footer a { color: #C9D0DA; text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }

.footer-grid { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 700px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; } }

.footer-brand .logo { margin-right: 0; margin-bottom: .9rem; }
.footer-brand p { font-size: var(--fs-sm); color: #C9D0DA; }

.footer-col h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0; font-size: var(--fs-sm); }
.footer-col li a { display: inline-block; padding-block: .6rem; }

.footer-contact { font-size: var(--fs-sm); }
.footer-contact a { display: inline-block; padding-block: .55rem; }
.footer-contact .footer-phone { display: block; font-size: 1.3rem; font-weight: 700; color: #FFFFFF; margin-bottom: .3rem; }
.footer-contact .footer-phone:hover { color: var(--accent); text-decoration: none; }

.footer-legal {
  margin-top: clamp(36px, 4vw, 56px);
  padding: 1.5rem 0;
  border-top: 1px solid var(--navy-line);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: #A9B3C1;
}

/* --------------------------------------------------------------------------
   13. Legal pages — long-form prose
   -------------------------------------------------------------------------- */
/* Blog articles. Same idea as the legal pages but without a rule above every
   heading — on a four minute read that made the page look like a contract. */
.article { max-width: 68ch; }
.article p { color: var(--ink); }
.article ul { color: var(--ink); }
.article li { margin-bottom: .5rem; }
.article h2 {
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  margin-top: 2.6rem;
  margin-bottom: .8rem;
}
.article__meta {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-bottom: 2.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.article__note {
  margin-top: 2.6rem;
  padding: 1.1rem 1.35rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.article__note p { margin-bottom: 0; }

/* Sources. Long URLs are allowed to break rather than push the page sideways. */
.sources { max-width: 68ch; font-size: var(--fs-sm); color: var(--muted); padding-left: 1.4rem; }
.sources li { margin-bottom: .8rem; }
.sources a { overflow-wrap: anywhere; }

.legal { max-width: 74ch; }
.legal h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  margin-top: 2.8rem;
  padding-top: 2.8rem;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p { color: var(--ink); }
.legal ul { color: var(--ink); }

/* Numbered clauses on legal pages — hanging indent so the numbers line up. */
.legal .clause { padding-left: 3.4rem; text-indent: -3.4rem; }
.legal .clause > b { font-weight: 700; font-variant-numeric: tabular-nums; }
/* text-indent inherits into inline-block children, which would drag a placeholder
   token back over the text beside it. */
.legal .clause .token { text-indent: 0; }
.legal .defs dt { font-weight: 700; margin-top: 1rem; }
.legal .defs dd { margin: .2rem 0 0; }
@media (max-width: 520px) { .legal .clause { padding-left: 2.6rem; text-indent: -2.6rem; } }

.legal-meta {
  margin-bottom: 2.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg-alt);
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.legal-meta p { color: var(--muted); font-size: var(--fs-sm); }

.legal-toc { margin-bottom: 3rem; }
.legal-toc h2 {
  margin: 0 0 .9rem;
  padding: 0;
  border: 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.legal-toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 2.5rem; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }
.legal-toc li { margin-bottom: 0; break-inside: avoid; }
.legal-toc a { display: inline-block; padding-block: .5rem; color: var(--ink); text-decoration: none; }
.legal-toc a:hover { color: var(--accent-ink); text-decoration: underline; }

/* Editorial marker. Every one of these must be resolved and deleted before the
   page is published — see README.md. */
.legal-note {
  margin: 1.2rem 0 1.6rem;
  padding: 1rem 1.25rem;
  background: var(--accent-soft);
  border: 2px dashed #E0A277;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: #7A2E08;
}
.legal-note p { color: #7A2E08; font-size: var(--fs-sm); margin-bottom: .6rem; }
.legal-note p:last-child { margin-bottom: 0; }
.legal-note strong {
  display: inline-block;
  margin-bottom: .35rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   14. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   15. Realism mode
   Placeholders are loud on purpose: they must not be shipped by accident.
   But loud placeholders also hijack the visual hierarchy, so nobody can
   judge the real composition. Add data-preview="realistic" to the <html>
   tag to mute them and see the page as it will actually look.
   -------------------------------------------------------------------------- */
html[data-preview="realistic"] .token {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-weight: inherit;
}
html[data-preview="realistic"] .link-pending { border-bottom: 0; color: inherit; }
html[data-preview="realistic"] .link-pending::after { content: ""; }
html[data-preview="realistic"] .ph__box,
html[data-preview="realistic"] .badge {
  background: #E9ECF0;
  border: 1px solid var(--line);
  color: transparent;
}
html[data-preview="realistic"] .ph__tag,
html[data-preview="realistic"] .ph__desc { visibility: hidden; }
html[data-preview="realistic"] .legal-note { display: none; }