/* ═══════════════════════════════════════════════════════════════════
   galacticagroup.eu — H2 "Blueprint Ink" design system
   Grounds: steel #14171B (dark) / engineering paper #EFF0F2 (light)
   Accents: cool silver #A9AFB6 on dark / blueprint navy #1E3D5C as ink
   Type: Manrope Variable (headings 800) / Inter Variable (body)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --steel: #14171B;
  --paper: #EFF0F2;
  --text-d: #F1F3F5;
  --dim-d: rgba(241, 243, 245, 0.62);
  --faint-d: rgba(241, 243, 245, 0.40);
  --ink: #171C22;
  --ink-2: #565F68;
  --silver: #A9AFB6;
  --navy: #1E3D5C;
  --line-d: rgba(255, 255, 255, 0.08);
  --line-l: rgba(30, 61, 92, 0.16);
  --grid-d: rgba(255, 255, 255, 0.033);
  --grid-l: rgba(30, 61, 92, 0.055);
  --footer: #0F1216;
  --muted: #8A929A;
  --r-s: 6px;
  --r-m: 10px;
  --max-w: 1080px;
  --head: 'Manrope Variable', Manrope, system-ui, sans-serif;
  --body: 'Inter Variable', Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); background: var(--steel); color: var(--text-d); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img, svg { max-width: 100%; display: block; }

.wrap { max-width: var(--max-w); margin: 0 auto; }

/* ── grounds ─────────────────────────────────────────────────────── */
.dk { background: var(--steel); color: var(--text-d); }
.lt { background: var(--paper); color: var(--ink); }
.gridded-dk {
  background-image: linear-gradient(var(--grid-d) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-d) 1px, transparent 1px);
  background-size: 26px 26px;
}
.gridded-lt {
  background-image: linear-gradient(var(--grid-l) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-l) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* ── nav ─────────────────────────────────────────────────────────── */
.nav { position: relative; height: 68px; display: flex; align-items: center; padding: 0 32px; border-bottom: 1px solid var(--line-d); background: var(--steel); }
.nav-logo { display: flex; align-items: center; gap: 11px; }
.nav-hex { color: var(--silver); flex-shrink: 0; }
.nav-wm { line-height: 1.15; }
.nav-wm b { display: block; font-family: var(--head); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--text-d); }
.nav-wm i { display: block; font-style: normal; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint-d); }
.nav-links { display: flex; gap: 30px; margin-left: auto; font-size: 13.5px; font-weight: 500; }
.nav-links a { color: var(--dim-d); transition: color 0.15s ease; }
.nav-links a:hover { color: var(--text-d); }
.nav-burger { display: none; margin-left: auto; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-burger i { display: block; width: 24px; height: 1.5px; background: var(--text-d); border-radius: 2px; margin: 5px 0; }

/* ── shared section grammar ──────────────────────────────────────── */
.sec { padding: 84px 32px 92px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 11px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--silver); }
.eyebrow i { display: block; width: 24px; height: 1px; background: var(--silver); flex-shrink: 0; }
.eyebrow.ink { color: var(--navy); }
.eyebrow.ink i { background: var(--navy); }
.eyebrow.center { justify-content: center; }
.h2 { font-family: var(--head); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; }
.lead { font-size: 15.5px; line-height: 1.68; margin-top: 15px; max-width: 660px; color: var(--dim-d); }
.lt .lead { color: var(--ink-2); }
.lead strong { font-weight: 600; color: var(--text-d); }
.lt .lead strong { color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; padding: 13px 22px; border-radius: var(--r-s); border: 1px solid var(--silver); color: var(--text-d); transition: background 0.15s ease; }
.btn:hover { background: rgba(169, 175, 182, 0.1); }
.ghost { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; padding: 13px 16px; color: var(--dim-d); }
.ghost em, .ghost-ink em, .btn-ink em { font-style: normal; }
.ghost em { color: var(--silver); }
.btn-ink { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; padding: 13px 22px; border-radius: var(--r-s); border: 1px solid var(--ink); color: var(--ink); margin-top: 28px; transition: background 0.15s ease; }
.btn-ink:hover { background: rgba(23, 28, 34, 0.05); }
.btn-ink em { color: var(--navy); }
.ghost-ink { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); margin-top: 28px; }
.ghost-ink em { color: var(--navy); }
.cta-row { margin-top: 40px; }

/* ── hero ────────────────────────────────────────────────────────── */
.hero { padding: 72px 32px 68px; }
.hero-h1 { font-family: var(--head); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.08; }
.hero-sub { font-size: 17px; line-height: 1.65; max-width: 640px; margin-top: 18px; color: var(--dim-d); }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin: 32px 0; }
.hero-trust { font-size: 12.5px; color: var(--faint-d); }
.hero-trust b { color: var(--dim-d); font-weight: 600; }

/* ── where we operate / chart ────────────────────────────────────── */
.ops-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.legend-desktop { margin-top: 32px; max-width: 460px; }
.chart svg { width: 100%; height: auto; }
.chart-desktop { margin-top: 6px; }
.chart-mobile { display: none; }
.legend { margin-top: 20px; background: #FFFFFF; border-radius: var(--r-m); overflow: hidden; box-shadow: 0 1px 10px rgba(23, 28, 34, 0.06); }
.legend-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line-l); }
.legend-row:last-child { border-bottom: none; }
.legend-n { width: 20px; height: 20px; border-radius: 50%; border: 1.2px solid var(--navy); color: var(--navy); font-family: var(--head); font-weight: 800; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.legend-body { flex: 1; min-width: 0; }
.legend-body b { display: block; font-family: var(--head); font-weight: 700; font-size: 14px; color: var(--ink); }
.legend-body i { display: block; font-style: normal; font-size: 11px; color: var(--ink-2); margin-top: 1px; }
.legend-st { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: right; flex-shrink: 0; }
.legend-st.on { color: var(--navy); }

/* ── what we deploy / tiles ──────────────────────────────────────── */
.sec-divided { padding-top: 0; }
.sec-divided .wrap { border-top: 1px solid var(--line-l); padding-top: 84px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.tile { background: #FFFFFF; border-top: 2px solid var(--navy); border-radius: 0 0 var(--r-m) var(--r-m); padding: 22px 20px; box-shadow: 0 1px 10px rgba(23, 28, 34, 0.06); }
.tile b { display: block; font-family: var(--head); font-weight: 800; font-size: 15.5px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 6px; }
.tile p { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }

/* ── deployment model / located sequence ─────────────────────────── */
.track { position: relative; margin-top: 52px; }
.rail { position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: var(--line-d); }
.rail::after { content: ""; position: absolute; right: -1px; top: -3.5px; border-left: 7px solid var(--silver); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; list-style: none; }
.tick { display: block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--silver); background: var(--steel); margin-bottom: 16px; }
.tick.on { background: var(--silver); }
.loc { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint-d); margin-bottom: 8px; }
.loc.je { color: var(--silver); }
.step-n { display: none; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--silver); }
.step-t { display: block; font-family: var(--head); font-weight: 700; font-size: 14.5px; line-height: 1.3; margin-bottom: 7px; }
.step-d { font-size: 12.5px; line-height: 1.55; color: var(--dim-d); }

/* ── remediation / fault patterns ────────────────────────────────── */
.rem-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; }
.faults-head { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy); padding-bottom: 14px; border-bottom: 1.5px solid var(--navy); }
.fault { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line-l); }
.fault:last-child { border-bottom: none; }
.fx { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1.2px solid rgba(23, 28, 34, 0.35); color: rgba(23, 28, 34, 0.55); font-size: 10px; line-height: 16px; text-align: center; margin-top: 2px; }
.ft { font-size: 14.5px; color: var(--ink); line-height: 1.55; }
.fault.fix { padding-top: 19px; }
.fault.fix .fx { border-color: var(--navy); color: #FFFFFF; background: var(--navy); }
.fault.fix .ft { font-family: var(--head); font-weight: 700; color: var(--navy); }

/* ── for architects ──────────────────────────────────────────────── */
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 46px; padding-top: 34px; border-top: 1px solid var(--line-d); }
.point b { display: block; font-family: var(--head); font-weight: 700; font-size: 15px; line-height: 1.3; margin-bottom: 8px; }
.point p { font-size: 13px; line-height: 1.6; color: var(--dim-d); }

/* ── the group ───────────────────────────────────────────────────── */
.care { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line-l); font-size: 13px; color: var(--ink-2); max-width: 660px; }
.care em { font-style: normal; color: var(--navy); }
.care a { color: var(--navy); border-bottom: 1px solid rgba(30, 61, 92, 0.3); }

/* ── contact close — centred per group convention ────────────────── */
.close { text-align: center; }
.close .h2 { max-width: 760px; margin: 0 auto; }
.close .lead { margin-left: auto; margin-right: auto; max-width: 560px; }
.close .cta-row { margin-top: 34px; }

/* ── footer ──────────────────────────────────────────────────────── */
.foot { background: var(--footer); padding: 56px 32px 0; color: rgba(245, 245, 248, 0.45); }
.foot-top { max-width: var(--max-w); margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; padding-bottom: 44px; flex-wrap: wrap; }
.foot-brand { max-width: 340px; }
.foot-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.foot-tag { font-size: 12.5px; line-height: 1.6; }
.foot-cols { display: flex; gap: 64px; }
.foot-col h5 { font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245, 245, 248, 0.35); margin-bottom: 14px; }
.foot-col a { display: block; font-size: 13px; color: rgba(245, 245, 248, 0.62); margin-bottom: 9px; transition: color 0.15s ease; }
.foot-col a:hover { color: #FFFFFF; }
.foot-bot { max-width: var(--max-w); margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 24px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 11.5px; color: rgba(245, 245, 248, 0.38); flex-wrap: wrap; }

/* ═══ responsive ══════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .nav { height: 60px; padding: 0 24px; }
  .nav-burger { display: block; }
  .nav-links { display: none; position: absolute; top: 60px; left: 0; right: 0; z-index: 40; flex-direction: column; gap: 0; background: var(--steel); border-bottom: 1px solid var(--line-d); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 15px 24px; border-top: 1px solid var(--line-d); }

  .sec { padding: 52px 24px 56px; }
  .hero { padding: 48px 24px 46px; }
  .hero-sub { font-size: 15px; }
  .lead { font-size: 14.5px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }

  .ops-grid { display: block; }
  .legend-desktop { display: none; }
  .chart-desktop { display: none; }
  .chart-mobile { display: block; margin-top: 28px; }

  .sec-divided .wrap { padding-top: 52px; }
  .tiles { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }

  .track { margin-top: 34px; }
  .rail { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; background: rgba(255, 255, 255, 0.14); }
  .rail::after { display: none; }
  .steps { display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }
  .steps li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 15px; align-items: start; }
  .tick { grid-row: 1 / span 3; margin-left: -4px; margin-top: 4px; margin-bottom: 0; }
  .loc { margin-bottom: 4px; }
  .step-n { display: inline; }
  .step-t { display: inline; font-size: 15px; }
  .step-d { grid-column: 2; font-size: 12.5px; }

  .rem-grid { grid-template-columns: 1fr; gap: 30px; }
  .points { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; padding-top: 26px; }
  .cta-row { margin-top: 28px; }

  .foot { padding: 44px 24px 0; }
  .foot-cols { flex-direction: column; gap: 26px; }
  .foot-bot { flex-direction: column; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Append 2026-07 — interior pages
   /approach/ (.ap-, .ms-) · /where-we-operate/ (.wo-) ·
   /remediation/ (.rm-) · /architects/ (.ar-) · shared page grammar (.pg-)
   Append-only: no rules above this line were modified.
   ═══════════════════════════════════════════════════════════════════ */

/* ── shared page grammar ─────────────────────────────────────────── */
.pg-head { padding: 66px 32px 60px; }
.pg-h1 { font-family: var(--head); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.pg-sub { font-size: 16px; line-height: 1.66; max-width: 660px; margin-top: 16px; color: var(--dim-d); }
.pg-band { text-align: center; }
.pg-band .h2 { max-width: 700px; margin: 0 auto; }
.pg-band .lead { margin-left: auto; margin-right: auto; max-width: 620px; }
.points-ink { border-top-color: var(--line-l); }
.points-ink .point p { color: var(--ink-2); }
.steps-4 { grid-template-columns: repeat(4, 1fr); }

/* ── /approach/ — title block ────────────────────────────────────── */
.ap-meta { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 60px; margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--line-d); }
.ap-meta b { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint-d); margin-bottom: 5px; }
.ap-meta span { font-size: 13px; color: var(--text-d); font-weight: 500; }

/* ── /approach/ — method statement document ──────────────────────── */
.ms-doc { background: #FFFFFF; border-radius: var(--r-m); box-shadow: 0 1px 10px rgba(23, 28, 34, 0.06); overflow: hidden; margin-top: 46px; }
.ms-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px 28px; flex-wrap: wrap; padding: 20px 30px; border-bottom: 1.5px solid var(--navy); }
.ms-ref { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy); }
.ms-title { font-family: var(--head); font-weight: 800; font-size: 15.5px; letter-spacing: -0.01em; color: var(--ink); }
.ms-issue { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ms-step { display: grid; grid-template-columns: 120px 1fr; gap: 30px; padding: 32px 30px; border-bottom: 1px solid var(--line-l); }
.ms-step:last-child { border-bottom: none; }
.ms-n { font-family: var(--head); font-weight: 800; font-size: 21px; color: var(--navy); line-height: 1; }
.ms-loc { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.ms-loc.je { color: var(--navy); }
.ms-t { font-family: var(--head); font-weight: 800; font-size: 16.5px; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.ms-b { font-size: 14px; line-height: 1.68; color: var(--ink-2); max-width: 640px; }
.ms-issued { margin-top: 16px; padding-top: 13px; border-top: 1px dashed var(--line-l); font-size: 12px; color: var(--ink-2); }
.ms-issued b { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); margin-right: 10px; }

/* ── /where-we-operate/ — page-scale chart + hub cards ───────────── */
.wo-chart { max-width: 760px; margin: 46px auto 0; }
.wo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 46px; }
.wo-card { background: #FFFFFF; border-radius: var(--r-m); box-shadow: 0 1px 10px rgba(23, 28, 34, 0.06); overflow: hidden; border-top: 2px solid transparent; }
.wo-card.on { border-top-color: var(--navy); }
.wo-chead { display: flex; align-items: center; gap: 12px; padding: 16px 22px 14px; border-bottom: 1px solid var(--line-l); }
.wo-n { width: 22px; height: 22px; border-radius: 50%; border: 1.2px solid var(--navy); color: var(--navy); font-family: var(--head); font-weight: 800; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wo-chead b { font-family: var(--head); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); flex: 1; }
.wo-st { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wo-st.on { color: var(--navy); }
.wo-data { padding: 12px 22px 6px; }
.wo-row { display: flex; gap: 14px; padding: 5px 0; font-size: 12.5px; }
.wo-row b { width: 84px; flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.wo-row span { color: var(--ink); font-weight: 500; }
.wo-body { padding: 10px 22px 22px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.wo-para { font-size: 14px; line-height: 1.68; color: var(--dim-d); max-width: 660px; margin-top: 14px; }

/* ── /remediation/ — case rows ───────────────────────────────────── */
.rm-rows { margin-top: 40px; }
.rm-case { display: grid; grid-template-columns: 1fr 1.35fr; gap: 44px; padding: 32px 0; border-bottom: 1px solid var(--line-l); }
.rm-case:first-child { padding-top: 8px; }
.rm-case:last-child { border-bottom: none; }
.rm-sym { display: flex; gap: 14px; align-items: flex-start; }
.rm-sym b { font-family: var(--head); font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.45; }
.rm-tag { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy); margin-bottom: 8px; }
.rm-diag p { font-size: 14px; line-height: 1.68; color: var(--ink-2); max-width: 560px; }
.rm-fix { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; }
.rm-fix .fx { border-color: var(--navy); color: #FFFFFF; background: var(--navy); }
.rm-fix span + span, .rm-fix > span:last-child { font-family: var(--head); font-weight: 700; font-size: 13.5px; color: var(--navy); line-height: 1.5; padding-top: 1px; }

/* ── /architects/ — commitments + stage ledger ───────────────────── */
.ar-rows { margin-top: 40px; }
.ar-com { display: grid; grid-template-columns: 1fr 1.5fr; gap: 44px; padding: 34px 0; border-bottom: 1px solid var(--line-l); }
.ar-com:first-child { padding-top: 8px; }
.ar-com:last-child { border-bottom: none; }
.ar-com > b { font-family: var(--head); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.3; }
.ar-body { font-size: 14px; line-height: 1.68; color: var(--ink-2); max-width: 580px; }
.ar-list { margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--line-l); font-size: 12px; line-height: 1.7; color: var(--ink-2); }
.ar-list b { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); margin-right: 10px; }
.ar-ledger { margin-top: 46px; }
.ar-stage { display: grid; grid-template-columns: 250px 1fr; gap: 36px; padding: 24px 0; border-bottom: 1px solid var(--line-d); }
.ar-stage:last-child { border-bottom: none; }
.ar-sn { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver); margin-bottom: 6px; }
.ar-st { font-family: var(--head); font-weight: 700; font-size: 16px; line-height: 1.35; }
.ar-sd { font-size: 13.5px; line-height: 1.65; color: var(--dim-d); max-width: 620px; }

/* ── responsive — interior pages ─────────────────────────────────── */
@media (max-width: 860px) {
  .pg-head { padding: 48px 24px 44px; }
  .pg-sub { font-size: 15px; }

  .ap-meta { grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 32px; }

  .ms-doc { margin-top: 32px; }
  .ms-head { padding: 18px 20px; }
  .ms-step { display: block; padding: 26px 20px; }
  .ms-side { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
  .ms-side .ms-loc { margin-top: 0; }

  .wo-chart { margin-top: 32px; }
  .wo-cards { grid-template-columns: 1fr; margin-top: 32px; }

  .rm-case { display: block; padding: 26px 0; }
  .rm-diag { margin-top: 16px; }

  .ar-com { display: block; padding: 26px 0; }
  .ar-com > b { display: block; margin-bottom: 12px; font-size: 17px; }
  .ar-stage { display: block; padding: 20px 0; }
  .ar-st { display: block; margin-bottom: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Append 2026-07 — /contact/ (.ct-) + /thank-you/ (.tk-)
   Append-only: no rules above this line were modified.
   Translated from the Innovation/Protection patterns into Blueprint Ink:
   no icon webfont (drawn hairline glyphs), navy ink on paper, no
   phone row (none published on this site).
   ═══════════════════════════════════════════════════════════════════ */

/* ── /contact/ — shared form vocabulary ──────────────────────────── */
.ct-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; align-items: start; }
.ct-info .h2 { max-width: 320px; }
.ct-details { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line-l); }
.ct-detail { display: flex; align-items: flex-start; gap: 13px; }
.ct-ico { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--line-l); border-radius: var(--r-s); display: grid; place-items: center; color: var(--navy); }
.ct-dl { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ct-dv { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.ct-dv:hover { color: var(--navy); }
.ct-note { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin-top: 20px; }

.ct-form { background: #FFFFFF; border: 1px solid var(--line-l); border-radius: var(--r-m); padding: 34px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ct-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.ct-label { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.ct-input, .ct-select, .ct-textarea { font-family: var(--body); width: 100%; border: 1px solid var(--line-l); border-radius: var(--r-s); background: var(--paper); color: var(--ink); font-size: 14px; transition: border-color 0.15s ease; }
.ct-input, .ct-select { height: 46px; padding: 0 13px; }
.ct-select { padding-right: 38px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23565F68' stroke-width='1.4'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; }
.ct-textarea { min-height: 118px; padding: 12px 13px; resize: vertical; line-height: 1.55; }
.ct-input:focus, .ct-select:focus, .ct-textarea:focus { outline: none; border-color: var(--navy); }
.ct-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 5px; }
.ct-radios--col { grid-template-columns: 1fr; }
.ct-radio { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.ct-radio input { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; min-width: 17px; border: 1px solid var(--line-l); border-radius: 50%; background: #FFFFFF; cursor: pointer; position: relative; margin: 0; transition: border-color 0.15s ease; }
.ct-radio input:hover, .ct-radio input:checked { border-color: var(--navy); }
.ct-radio input:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--navy); }
.ct-radio input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ct-check { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 24px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.ct-check input { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; min-width: 17px; border: 1px solid var(--line-l); border-radius: 3px; background: #FFFFFF; cursor: pointer; position: relative; margin-top: 1px; transition: border-color 0.15s ease; }
.ct-check input:hover { border-color: var(--navy); }
.ct-check input:checked { border-color: var(--navy); background: var(--navy); }
.ct-check input:checked::after { content: ''; position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 4px; height: 8px; border: solid #FFFFFF; border-width: 0 1.6px 1.6px 0; }
.ct-check input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ct-check a { color: var(--navy); text-decoration: underline; }
.ct-hp { position: absolute; left: -9999px; }
.ct-submit { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; padding: 13px 24px; border-radius: var(--r-s); border: 1px solid var(--navy); background: var(--navy); color: #FFFFFF; cursor: pointer; font-family: var(--body); transition: opacity 0.15s ease; }
.ct-submit:hover { opacity: 0.88; }
.ct-cond { display: none; margin: -4px 0 18px; background: rgba(30, 61, 92, 0.045); border: 1px solid rgba(30, 61, 92, 0.2); border-radius: var(--r-s); padding: 18px 18px 14px; }
.ct-cond--on { display: block; }
.ct-cond-l { font-size: 12.5px; font-weight: 500; color: var(--ink); margin-bottom: 11px; }

/* ── Option B — title-block header on the form panel ─────────────── */
.ct-tb { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 44px; margin: 0 0 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line-l); }
.ct-tb b { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ct-tb span { font-size: 12.5px; color: var(--ink); font-weight: 500; }

/* ── Option C — enquiry record rail ──────────────────────────────── */
.ct-rail { display: flex; flex-direction: column; gap: 0; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line-l); }
.ct-rl { display: grid; grid-template-columns: 26px 1fr; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line-l); }
.ct-rl:last-child { border-bottom: none; }
.ct-rn { font-family: var(--head); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; color: var(--navy); padding-top: 2px; }
.ct-rt { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ct-rd { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin-top: 2px; }

@media (max-width: 860px) {
  .ct-grid { grid-template-columns: 1fr; gap: 36px; }
  .ct-info .h2 { max-width: none; }
  .ct-form { padding: 24px 20px; }
  .ct-row { grid-template-columns: 1fr; gap: 0; }
  .ct-radios { grid-template-columns: 1fr; }
  .ct-tb { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .ct-submit { width: 100%; justify-content: center; }
}

/* ── /thank-you/ — what happens next ─────────────────────────────── */
.tk-head { text-align: center; }
.tk-head .pg-h1 { max-width: 620px; margin: 0 auto; }
.tk-head .pg-sub { margin-left: auto; margin-right: auto; text-align: center; max-width: 540px; }
.tk-head .cta-row { margin-top: 32px; }
.tk-nx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.tk-step { border-top: 1px solid var(--line-l); padding-top: 20px; }
.tk-n { font-family: var(--head); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; color: var(--navy); display: block; margin-bottom: 10px; }
.tk-t { font-family: var(--head); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 8px; }
.tk-d { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }

@media (max-width: 860px) {
  .tk-nx { grid-template-columns: 1fr; gap: 0; margin-top: 30px; }
  .tk-step { padding: 18px 0; }
  .tk-step:last-child { padding-bottom: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   Append 2026-07 — sticky nav · CMS logo image · footer Option B
   Append-only: no rules above this line were modified.
   ═══════════════════════════════════════════════════════════════════ */

/* ── sticky header ──────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 60; }

/* ── CMS logo image (replaces drawn mark when uploaded) ─────────── */
.nav-logo-img { height: 52px; width: auto; display: block; }
.foot-logo-img { height: 42px; width: auto; display: block; }

/* ── footer Option B — contact column, notes, bottom-bar legal ──── */
.foot-origin-tag { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245, 245, 248, 0.38); margin-top: 16px; }
.foot-contact-email { display: block; font-size: 13px; color: rgba(245, 245, 248, 0.82); margin-bottom: 10px; transition: color 0.15s ease; }
.foot-contact-email:hover { color: #FFFFFF; }
.foot-contact-line { display: block; font-size: 12.5px; line-height: 1.55; color: rgba(245, 245, 248, 0.5); margin-bottom: 6px; }
.foot-col-note { display: block; font-size: 12px; line-height: 1.5; color: rgba(245, 245, 248, 0.4); margin-top: 8px; }
.foot-legal-links { display: flex; gap: 22px; }
.foot-legal-links a { color: rgba(245, 245, 248, 0.38); transition: color 0.15s ease; }
.foot-legal-links a:hover { color: rgba(245, 245, 248, 0.75); }

@media (max-width: 720px) {
  .nav-logo-img { height: 42px; }
  .foot-legal-links { gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Append 2026-07 — header content inset (full-width bar, wide side padding)
   Append-only: moves the header's flex layout from .nav onto the new
   .nav-inner. The bar spans full width; .nav-inner adds symmetric 56px
   side padding so the logo/nav sit inboard from the viewport edges,
   Jersey-style (NOT a centred max-width column). .nav stays the full-width
   bar — background, border, sticky, and the mobile drawer's positioning
   context are all preserved.
   ═══════════════════════════════════════════════════════════════════ */
.nav { display: block; padding: 0; }
.nav-inner { max-width: none; margin: 0; height: 68px; display: flex; align-items: center; padding: 0 56px; }

@media (max-width: 860px) {
  .nav-inner { height: 60px; padding: 0 24px; }
  /* drawer spans the full bar, flush under the header */
  .nav-links { left: 0; right: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   Append 2026-08 — /privacy/ legal body (.lg-)
   Append-only: no rules above this line were modified.
   ═══════════════════════════════════════════════════════════════════ */
.lg { background: var(--paper); padding: 72px 32px 84px; }
.lg-inner { max-width: 760px; margin: 0 auto; }
.lg-meta { font-size: 12.5px; color: var(--ink-2); margin-bottom: 42px; padding-bottom: 20px; border-bottom: 1px solid var(--line-l); }
.lg-meta b { color: var(--ink); font-weight: 600; }
.lg-s { margin-bottom: 34px; }
.lg-s:last-child { margin-bottom: 0; }
.lg-h { font-family: var(--head); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 12px; display: flex; align-items: baseline; gap: 11px; }
.lg-h i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--navy); flex-shrink: 0; }
.lg-b { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.lg-b p { margin-bottom: 13px; }
.lg-b p:last-child { margin-bottom: 0; }
.lg-b strong { color: var(--ink); font-weight: 600; }
.lg-b a { color: var(--navy); text-decoration: underline; }
.lg-b ul { margin: 0 0 13px; padding-left: 18px; }
.lg-b li { margin-bottom: 6px; }
.lg-b li::marker { color: var(--navy); }
.lg-box { background: #FFFFFF; border: 1px solid var(--line-l); border-radius: var(--r-m); padding: 26px 28px; margin-top: 40px; }
.lg-box h3 { font-family: var(--head); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px; }
.lg-box p { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin-bottom: 6px; }
.lg-box p:last-child { margin-bottom: 0; }
.lg-box a { color: var(--navy); text-decoration: underline; }

@media (max-width: 860px) {
  .lg { padding: 48px 24px 60px; }
  .lg-meta { margin-bottom: 32px; }
  .lg-h { font-size: 17px; }
  .lg-b { font-size: 14px; }
  .lg-box { padding: 22px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Append 2026-08 — mobile nav: group-style full-screen takeover.
   Verbatim port of the verticals' block (protection.je), values kept
   exactly; selectors retargeted from `> li > a` to `> a` because this
   site's nav uses bare <a> tags, not <ul><li>. Colours mapped to EU
   tokens (--text-d / --dim-d) since EU has no --t-90/--t-60 scale.
   Breakpoint 1023px to match the verticals (tablets included).
   Append-only — no existing rules modified.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  body.nav-open{overflow:hidden;}
  .nav-links:not(.open){display:none;}
  .nav-links.open{
    display:flex;position:fixed;inset:0;width:100%;height:100dvh;
    transform:none;background:var(--steel);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:0;padding:92px 32px 40px;border-bottom:none;overflow-y:auto;
    max-height:none;opacity:1;pointer-events:auto;z-index:240;left:0;
  }
  /* links — Protection's exact sizing (30px / 600 / -0.6px), EU colour */
  .nav-links.open > a{
    font-family:var(--head);font-weight:600;font-size:30px;
    letter-spacing:-0.6px;color:rgba(241,243,245,0.9);padding:18px 0;
    border-radius:0;display:block;width:100%;border-top:none;
  }
  .nav-links.open > a:hover{color:var(--text-d);}
  /* hamburger fixed top-right, above overlay; bars → × */
  .nav-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;top:0;right:16px;height:60px;width:44px;z-index:250;}
  .nav-burger.is-x{position:fixed;}
  .nav-burger.is-x i{position:absolute;top:50%;left:50%;margin:0;width:24px;}
  .nav-burger.is-x i:nth-child(1){transform:translate(-50%,-50%) rotate(45deg);}
  .nav-burger.is-x i:nth-child(2){opacity:0;}
  .nav-burger.is-x i:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg);}
  /* foot — Protection's exact values */
  .nav-links.open .nav-mobile-foot{
    margin-top:auto;width:100%;padding-top:28px;
    border-top:1px solid var(--line-d);
    display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  }
  .nav-links.open .nav-mobile-enquiry{
    display:inline-flex;align-items:center;gap:9px;width:auto;align-self:flex-start;
    border:1px solid var(--line-d);color:var(--dim-d);
    font-family:var(--body);font-size:14px;font-weight:500;
    letter-spacing:0;padding:13px 22px;border-radius:6px;
    transition:border-color .15s,color .15s;
  }
  .nav-links.open .nav-mobile-enquiry:hover{border-color:rgba(255,255,255,0.35);color:var(--text-d);}
  .nav-links.open .nav-mobile-enquiry em{font-style:normal;}
  /* write line — Protection is 14px inline; EU address is longer, so it
     wraps to its own line instead of clipping. Only deviation from source. */
  .nav-links.open .nav-mobile-write{font-family:var(--body);font-size:14px;color:rgba(241,243,245,0.45);margin:0;padding:0;}
  .nav-links.open .nav-mobile-write a{color:var(--dim-d);text-decoration:underline;text-underline-offset:3px;margin-left:8px;font-size:14px;padding:0;}
  .nav-links.open .nav-mobile-reach{
    font-family:var(--body);font-size:11px;letter-spacing:0.14em;
    text-transform:uppercase;color:rgba(241,243,245,0.4);opacity:.6;margin:0;
  }
}
@media (min-width:1024px){ .nav-mobile-foot{display:none;} }