/* ExtraPokerMoney — Option A (round 5's dark photographic layout) upgraded with direction B's
   gold system: the approved spade medallion, struck-gold buttons, gold numerals and rules, milled
   chip badges, suit ornaments, and serif display type. System fonts only. The only script is the
   contact form's (contact.js). Text colours are AA-checked against every ground they sit on. */

:root {
  color-scheme: dark;
  /* Option A grounds */
  --ink: #070a08;
  --deep: #0b120e;
  --felt: #132018;
  --felt2: #182a1f;
  --green: #173327;
  --green-deep: #132a1f;
  --line: #5a4d2d;
  --line-soft: rgba(196, 163, 90, .26);
  /* text on dark: cream 12.2-16:1, dim 7.4-9.8:1, muted 5.4-7.1:1 */
  --cream: #ede6d6;
  --dim: #beb5a3;
  --muted: #a39a89;
  /* gold text: 6.3-8.3:1 (gold), 10.2-13.5:1 (gold2) */
  --gold: #c4a35a;
  --gold2: #e8d48a;
  --red-lt: #d4717a;
  /* B's paper palette, used only inside the hand-review diagram */
  --paper-3: #f8f4ec;
  --ink-paper: #1b1a17;
  --soft: #4d483f;
  --hair: #c9bea9;
  --hair-data: #8a7c6a;
  --brass-lt: #dcc594;
  --brass-deep: #7f611f;
  /* B's struck gold */
  --gold-rule: linear-gradient(90deg, #6d4c14, #b0862f 22%, #e8d48a 50%, #b0862f 78%, #6d4c14);
  --gold-face: linear-gradient(180deg, #f9edc2 0%, #ead08b 38%, #d4af5a 64%, #bb9039 100%);
  --gold-face-hi: linear-gradient(180deg, #fdf5d8 0%, #f0da9c 38%, #dcb967 64%, #c39a42 100%);
  --serif: "Palatino Linotype", Palatino, P052, "URW Palladio L", "Book Antiqua", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--cream);
  font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; }
img { max-width: 100%; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
a { color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  padding: 12px 16px; background: var(--gold2); color: var(--ink);
  font: 600 15px/1 var(--sans); text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; }

/* ---------- The mark: B's gold-spade medallion ---------- */
.m-out { fill: var(--green-deep); }
.m-groove { fill: none; stroke: #3d2a0a; }
.m-field { fill: var(--green); }
.m-field-edge { fill: none; stroke: #0f2016; stroke-width: .9; opacity: .8; }
.m-sheen { fill: url(#goldSheen); }

/* ---------- Header ---------- */
.site-header { position: relative; background: var(--ink); }
.site-header::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--gold-rule); opacity: .75; }
.header-inner {
  width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; min-height: 92px;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
}
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--cream); text-decoration: none; margin-right: auto; }
.brand .mark { width: 50px; height: 50px; flex: none; }
.brand-text { display: grid; gap: 5px; }
.wordmark { font: 400 28px/1 var(--serif); letter-spacing: -.005em; color: var(--gold2); }
.descriptor { font: 500 10px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }

.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 32px); }
.nav a, .footer-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  color: var(--dim); text-decoration: none;
  font: 500 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  background: var(--gold-rule) left calc(50% + 12px) / 0 1px no-repeat;
  transition: background-size .25s ease, color .25s ease;
}
.nav a:hover, .nav a[aria-current="page"], .footer-nav a:hover { color: var(--cream); background-size: 100% 1px; }
.narrow-only { display: none; }

/* ---------- Buttons: B's struck gold on A's dark ground ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0;
  font: 600 14px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.btn-gold {
  color: #1b1a17; background: var(--gold-face);
  box-shadow: inset 0 1px 0 rgba(255, 251, 235, .9), inset 0 -2px 0 rgba(91, 63, 19, .3),
    0 0 0 1px #8f6a24, 0 14px 28px -14px rgba(0, 0, 0, .9);
}
.btn-gold:hover { background: var(--gold-face-hi); transform: translateY(-1px); }
.btn-line { color: var(--cream); box-shadow: inset 0 0 0 1px var(--gold); }
.btn-line:hover { color: var(--gold2); box-shadow: inset 0 0 0 2px var(--gold2); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 12px; }
.btn-arrow { font-size: 17px; letter-spacing: 0; transition: transform .25s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; gap: 14px 12px; margin-top: 30px; }

.text-link, .card-link {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--gold2);
  font: 600 13px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  background: var(--gold-rule) left calc(50% + 11px) / 0 1px no-repeat; transition: background-size .25s ease;
}
.text-link:hover, .card-link:hover { background-size: 100% 1px; }
.text-link span, .card-link span { margin-left: 8px; font-size: 16px; letter-spacing: 0; }

/* ---------- Type ---------- */
.kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  color: var(--gold); font: 600 12px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase;
}
.kicker a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -15px; color: inherit; text-decoration: none; }
.kicker a:hover { color: var(--gold2); }
.numeral { color: var(--gold2); font: italic 400 30px/1 var(--serif); letter-spacing: .02em; text-transform: none; }
.kicker-rule { width: 36px; height: 2px; background: var(--gold-rule); flex: none; }
h1 { font: 400 clamp(38px, 4.6vw, 64px)/1.06 var(--serif); letter-spacing: -.02em; margin-top: 22px; }
h1 em, .statement em, .footer-tag em { color: var(--gold2); }
h2 { font: 400 clamp(32px, 3.6vw, 48px)/1.1 var(--serif); letter-spacing: -.01em; margin-top: 18px; }
.lede { margin-top: 20px; max-width: 58ch; color: var(--dim); font: 400 19px/1.6 var(--serif); }
.section-head > p:not(.kicker):not(.lede) { margin-top: 16px; color: var(--dim); max-width: 62ch; }
.section-head .lede + .lede { margin-top: 12px; }

/* ---------- Photos: A's bordered panels with B's double gold frame ---------- */
.media { background: var(--deep); padding: 10px; box-shadow: 0 0 0 1px var(--line), 0 0 0 6px var(--ink), 0 0 0 7px var(--line-soft), 0 34px 60px -34px #000; }
.media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Home hero ---------- */
.hero { background: var(--deep); padding: clamp(44px, 6vw, 88px) 0 clamp(52px, 6vw, 92px); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
/* "Study the decision," needs 8.03px per px of size in P052; capped so it holds one line in the copy column. */
.hero h1 { font-size: clamp(36px, 4vw, 58px); }
.hero .lede { font-size: 18.5px; }

/* ---------- Four-suit rule (B) ---------- */
.suit-rule { display: flex; align-items: center; gap: 18px; padding: 34px 0; }
.suit-rule::before, .suit-rule::after { content: ""; flex: 1; height: 1px; background: var(--gold-rule); opacity: .8; }
.suit-rule svg { width: 112px; height: 24px; flex: none; }
.suit-gold { fill: var(--gold); }
.suit-red { fill: var(--red-lt); }
.suit-band { background: var(--deep); }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 8vw, 112px) 0; }
.felt { background: var(--felt); }
.deep { background: var(--deep); }
.section-head { max-width: 760px; }
.head-row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.media-split { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }

/* ---------- Service cards (A's three-up grid; title before photo, as in B) ---------- */
.cards { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.card {
  display: flex; flex-direction: column; background: var(--deep);
  border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 30px 50px -36px #000;
  transition: border-color .25s ease;
}
.card:hover { border-color: var(--gold); }
.card-head { padding: 24px 26px 18px; }
.card-no, .row-text .card-no {
  display: flex; align-items: center; gap: 12px;
  color: var(--gold2); font: italic 400 32px/1 var(--serif); letter-spacing: .02em;
}
.card-no::after { content: ""; width: 44px; height: 2px; background: var(--gold-rule); }
.card h3, .service-row h3 { margin-top: 12px; font: 400 clamp(25px, 2.2vw, 30px)/1.15 var(--serif); }
.card-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-block: 1px solid var(--line); }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 26px 22px; }
.card-body > p:first-child { color: var(--dim); font: 400 17.5px/1.6 var(--serif); }
.bring { margin-top: auto; padding-top: 18px; color: var(--muted); font: 400 14.5px/1.55 var(--sans); }
.card-body .bring { margin-top: 18px; border-top: 1px solid var(--line-soft); }
.bring span { display: block; margin-bottom: 6px; color: var(--gold); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.card-link { margin-top: auto; padding-top: 10px; align-self: flex-start; }
.row-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
  margin-top: 48px; padding-top: 32px; background: var(--gold-rule) top / 100% 1px no-repeat;
}
.row-cta p { max-width: 36ch; font: 400 21px/1.4 var(--serif); }

/* ---------- Features and facts ---------- */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.features li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; padding: 22px 0; border-top: 1px solid var(--line-soft); }
.features li:first-child { border-top: 0; padding-top: 0; }
.features .suit-badge { grid-row: span 2; }
.features h3 { font: 400 23px/1.2 var(--serif); }
.features p { margin-top: 6px; color: var(--dim); }
.features.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 44px; }
.features.three li { padding: 0; border: 0; grid-template-columns: 1fr; row-gap: 16px; align-content: start; }
.features.three .suit-badge { grid-row: auto; }
.suit-badge {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle, var(--green) 0 60%, transparent 61%), var(--gold-rule);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}
.suit-badge .suit { width: 34px; height: 34px; fill: var(--gold2); }
.suit-badge .suit-heart, .suit-badge .suit-diamond { fill: var(--red-lt); }

/* ---------- Method (B), on A's dark ground ---------- */
.method-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(36px, 4vw, 52px); }
.method-grid .section-head { grid-column: 1 / span 5; grid-row: 1; }
.statement { grid-column: 7 / span 6; grid-row: 1; align-self: end; font: 400 clamp(24px, 2.6vw, 36px)/1.3 var(--serif); letter-spacing: -.01em; }
.diagram { grid-column: 1 / span 5; grid-row: 2 / span 2; }
.method { grid-column: 7 / span 6; grid-row: 2; list-style: none; margin: 0; padding: 0; }
.method li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 20px; padding: 20px 0; border-top: 1px solid var(--line-soft); }
.method li:first-child { padding-top: 0; border-top: 0; }
.method .chip { grid-row: span 2; }
.method h3 { margin-top: 2px; font: 400 22px/1.2 var(--serif); }
.method p { margin-top: 6px; color: var(--dim); font-size: 15.5px; }
.chip {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background:
    radial-gradient(circle, var(--green) 0 55%, #0f2016 56% 58%, transparent 59%),
    repeating-conic-gradient(rgba(74, 51, 12, .55) 0 5deg, transparent 5deg 15deg),
    linear-gradient(135deg, #6d4c14, #c9a24a 28%, #fdf6d5 44%, #e3c883 54%, #9c7530 76%, #5b3f13);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 8px 16px -10px #000;
}
.chip svg { width: 100%; height: 100%; }
.chip text { fill: var(--gold2); font: 400 21px var(--serif); }
.table-note { grid-column: 7 / span 6; grid-row: 3; align-self: end; padding: 4px 0 4px 18px; border-left: 2px solid var(--gold); }
.table-note h3 { color: var(--gold); font: 600 12px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.table-note ul { margin: 12px 0 0; padding: 0; list-style: none; }
.table-note li { margin-top: 8px; color: var(--dim); font-size: 15.5px; }
.diagram .plate-art { width: 100%; height: auto; aspect-ratio: 600 / 440; box-shadow: 0 0 0 1px var(--line), 0 0 0 6px var(--ink), 0 0 0 7px var(--line-soft), 0 34px 60px -34px #000; }
.pa-sheet { fill: var(--paper-3); stroke: var(--hair); stroke-width: 1; }
.pa-rule { stroke: var(--ink-paper); stroke-width: 1; fill: none; }
.pa-rule.thin { stroke-width: .6; opacity: .38; }
.pa-title { fill: var(--ink-paper); font: 600 19px var(--sans); letter-spacing: 3.2px; }
.pa-note { fill: var(--soft); font: 400 15px var(--sans); letter-spacing: .3px; }
.pa-label { fill: var(--soft); font: 500 13px var(--sans); letter-spacing: 1.2px; }
.pa-num { fill: var(--soft); font: 600 15px var(--sans); }
.pa-edge { fill: none; stroke: var(--hair-data); stroke-width: 1.5; }
.pa-edge.hot { stroke: var(--brass-deep); stroke-width: 2.4; }
.pa-node { fill: var(--paper-3); stroke: var(--ink-paper); stroke-width: 1.2; }
.pa-node.hot { fill: var(--green); stroke: var(--green); }
.pa-cell { fill: none; stroke: var(--hair); stroke-width: 1; }
.pa-cell.warm { fill: var(--brass-lt); fill-opacity: .5; }
.pa-cell.hot { fill: var(--green); fill-opacity: .88; stroke: var(--green); }
.pa-bar, .pa-dot { fill: var(--hair-data); }
.pa-bar.hot, .pa-dot.hot, .pa-pip-mark { fill: var(--brass-deep); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--deep); padding: clamp(52px, 7vw, 104px) 0 clamp(20px, 3vw, 40px); }
.page-hero h1 { max-width: 18ch; }
.page-hero.has-pic { padding-bottom: clamp(36px, 4vw, 56px); }
.has-pic .page-hero-inner { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.prose { padding-top: clamp(0px, 5vw, 64px); }
.prose p { color: var(--dim); font: 400 19px/1.65 var(--serif); }
.prose p + p { margin-top: 18px; }

/* ---------- Services page rows ---------- */
.service-rows { display: grid; gap: clamp(48px, 6vw, 80px); margin-top: 48px; }
.service-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; scroll-margin-top: 24px; }
.service-row:nth-child(even) .row-media { order: 2; }
.row-text > p:not(.card-no):not(.bring) { margin-top: 14px; color: var(--dim); }
.row-text > p:nth-of-type(2) { font: 400 19px/1.6 var(--serif); color: var(--cream); }
.row-text b { color: var(--cream); font-weight: 600; }
.row-text .bring { margin-top: 20px; border-top: 1px solid var(--line-soft); }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--line-soft); }
.faq { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 0;
  cursor: pointer; list-style: none; font: 400 21px/1.35 var(--serif); color: var(--cream);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 6px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: translateY(-3px) rotate(45deg); transition: transform .25s ease;
}
.faq[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq summary:hover { color: var(--gold2); }
.faq p { padding: 0 40px 22px 0; color: var(--dim); }
.faq p a { color: var(--gold2); }

/* ---------- CTA band (A's contact section, B's prompts) ---------- */
.cta-band { background: var(--green); padding: clamp(60px, 7vw, 100px) 0; border-top: 1px solid var(--line); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 36px clamp(32px, 5vw, 80px); align-items: start; }
.cta-band .lede { color: #d8d1c2; }
.has-photo .cta-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.has-photo .cta-media { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.prompts { margin: 0; }
.has-photo .prompts { grid-column: 1; }
.prompts div { padding: 18px 0; border-top: 1px solid rgba(232, 212, 138, .28); }
.prompts div:first-child { border-top: 0; padding-top: 0; }
.prompts dt { display: flex; align-items: center; gap: 10px; color: var(--gold2); font: 600 11px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.dt-suit { width: 18px; height: 18px; fill: var(--gold2); }
.prompts dd { margin: 8px 0 0; color: #efe9dc; font: 400 18px/1.5 var(--serif); }
.cta-band .media { background: var(--green-deep); box-shadow: 0 0 0 1px var(--line), 0 0 0 6px var(--green), 0 0 0 7px var(--line-soft), 0 34px 60px -34px #000; }

/* ---------- Contact form ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.enquiry-form { padding: clamp(24px, 3.4vw, 44px); background: var(--deep); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 30px 50px -36px #000; }
.enquiry-form h2 { margin-top: 0; font-size: clamp(28px, 2.8vw, 36px); }
.form-note { margin-top: 8px; color: var(--muted); font-size: 14.5px; }
.req { color: var(--gold2); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.field { display: grid; gap: 8px; margin-top: 22px; }
.field label { color: var(--cream); font: 600 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px;
  background: var(--ink); color: var(--cream); font: 400 17px/1.4 var(--sans);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 150px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gold); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold2); outline-offset: 1px; border-color: var(--gold2); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--red-lt); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { margin-top: 20px; color: var(--muted); font-size: 14px; }
.form-actions { margin-top: 22px; }
.form-status { margin-top: 16px; min-height: 1.6em; color: var(--dim); font-size: 15.5px; }
.form-status[data-kind="ok"] { color: var(--gold2); }
.form-status[data-kind="warn"] { color: var(--gold2); }
.form-status[data-kind="error"] { color: var(--red-lt); }
.aside-title { margin: 32px 0 20px; font-size: clamp(24px, 2.4vw, 30px); }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--ink); padding: 48px 0 44px; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--gold-rule); }
.site-footer::after { content: ""; position: absolute; inset: 5px 0 auto; height: 1px; background: var(--gold-rule); opacity: .7; }
.footer-inner { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.brand-sm { gap: 12px; margin-right: 0; }
.brand-sm .mark { width: 32px; height: 32px; }
.brand-sm .wordmark { font-size: 24px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px clamp(16px, 2.4vw, 30px); }
.footer-tag { margin-top: 22px; color: var(--dim); font: italic 400 20px/1.3 var(--serif); }
.risk { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); max-width: 72ch; color: var(--muted); font-size: 14px; }
.copyright { margin-top: 10px; color: var(--muted); font-size: 13px; }

/* ---------- Responsive ---------- */
/* Between the hero's two-column and stacked layouts, an even split keeps both hero buttons on one row. */
@media (max-width: 1320px) {
  .hero-inner, .has-pic .page-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 1080px) {
  .prose { padding-top: 0; }
  .hero-inner, .has-pic .page-hero-inner, .split, .media-split, .cta-grid, .has-photo .cta-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-media { max-width: 760px; }
  .hero h1 { font-size: clamp(36px, 6.4vw, 58px); }
  .cards { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .features.three { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .features.three li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; row-gap: 0; }
  .features.three .suit-badge { grid-row: span 2; }
  .method-grid .section-head, .statement { grid-column: 1 / -1; grid-row: auto; }
  .diagram { grid-column: 1 / span 7; grid-row: 3 / span 2; }
  .method { grid-column: 8 / span 5; grid-row: 3; }
  .table-note { grid-column: 8 / span 5; grid-row: 4; align-self: start; }
  .method li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .method .chip { width: 40px; height: 40px; }
  .has-photo .cta-media, .has-photo .prompts { grid-column: 1; grid-row: auto; }
  .cta-media { max-width: 620px; }
  .contact-aside .media { max-width: 620px; }
}

@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; min-height: 0; padding-top: 14px; row-gap: 6px; }
  .brand .mark { width: 42px; height: 42px; }
  .wordmark { font-size: 23px; }
  .nav { order: 3; width: 100%; justify-content: space-between; gap: 4px; padding-bottom: 4px; }
  .nav a { font-weight: 600; letter-spacing: .1em; }
  .service-row { grid-template-columns: minmax(0, 1fr); }
  .service-row:nth-child(even) .row-media { order: 0; }
  .row-media { max-width: 680px; }
}

@media (max-width: 720px) {
  .diagram, .method, .table-note { grid-column: 1 / -1; grid-row: auto; }
  .actions .btn, .row-cta .btn, .form-actions .btn { width: 100%; }
  .actions { flex-direction: column; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .footer-top { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .descriptor { display: none; }
  .brand { gap: 10px; }
  .brand .mark { width: 36px; height: 36px; }
  .wordmark { font-size: 20px; }
  .join { padding: 0 14px; font-size: 11px; }
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  .nav a { font-size: 11.5px; letter-spacing: .06em; padding: 0 1px; }
  .card-head { padding: 20px 18px 14px; }
  .card-body { padding: 18px 18px 20px; }
  .media { padding: 8px; }
  .enquiry-form { padding: 22px 18px; }
}

/* Forced colours drop gradients and shadows: gold surfaces fall back to system-colour edges. */
@media (forced-colors: active) {
  .btn, .card, .enquiry-form, .media { border: 1px solid CanvasText; }
  .kicker-rule, .card-no::after, .suit-rule::before, .suit-rule::after, .site-header::after,
  .site-footer::before, .site-footer::after { forced-color-adjust: none; background: CanvasText; }
  .chip, .suit-badge { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}