[hidden]{display:none!important}

:root {
  /* Layout: one 1200px column; a single Midnight hero on Home, Ivory page headers elsewhere, Midnight footer with the logo on a white panel */
  --midnight: #1E2260; --blue: #2E3192; --gold: #D9AE52; --gold-text: #8A6A1F; --deep-red: #B3122B;
  --ivory: #F7F5F0; --mist: #F2F3F8; --white: #FFFFFF; --slate: #3A3D52; --graphite: #1C1E2E; --caption: #5E6275;
  --line: #DADCE6; --field: #8A8EA3; --on-dark: #E6E7F0; --on-dark-quiet: #C3C6DD; --dark-hover: #2A2F78; --dark-rule: #3A3F7A;
  --rn-bg: #FFF4D6; --rn-fg: #5C4300; --rn-line: #B98A1E;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 40px); --max: 1200px;
  /* Type scale in rem, so text follows the visitor's own size setting */
  --fs-body: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);      /* 16 px on phones, 18 px on wide screens */
  --fs-small: 0.875rem; --fs-label: 0.8125rem;              /* captions 14 px; capitals 13 px */
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.375rem);  /* 19 to 22 px */
  --fs-h3: clamp(1.3125rem, 1.15rem + 0.45vw, 1.5rem);      /* 21 to 24 px */
  --fs-h2: clamp(1.75rem, 2.9vw, 2.375rem);                 /* 28 to 38 px */
  --fs-h1: clamp(2.375rem, 4.4vw, 3.625rem);                /* 38 to 58 px */
  --fs-display: clamp(3rem, 7vw, 6.25rem);                  /* 48 to 100 px */
  /* Spacing on the blueprint's 8 px base (8, 16, 24, 40, 64, 112), radii and widths */
  --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 7rem;
  --section-pad: clamp(3.5rem, 8vw, 7rem); --card-pad: clamp(1.5rem, 2.2vw, 1.75rem);
  --radius: 8px; --radius-pill: 999px; --measure: 46rem;
  color-scheme: light;
}
body { margin: 0; background: var(--white); color: var(--slate); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.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; }
.container { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 8px; z-index: 20; background: var(--white); color: var(--midnight); padding: 8px 12px; border-radius: 6px; font-weight: 600; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.on-dark :focus-visible, .site-footer :focus-visible, .preview-bar :focus-visible { outline-color: var(--gold); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--midnight); text-wrap: balance; margin: 0; }
h1, h2, h3, .display, .lead { overflow-wrap: anywhere; }   /* a long word wraps instead of pushing the page sideways when text is enlarged */
h1 { font-size: var(--fs-h1); line-height: 1.08; }
h1:focus { outline: none; }
h2 { font-size: var(--fs-h2); line-height: 1.16; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 14px; }
a { color: var(--blue); text-underline-offset: 3px; }
a:not(.btn):hover { text-decoration-thickness: 2px; }
.kicker { font-family: var(--sans); font-weight: 600; font-size: var(--fs-label); line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deep-red); margin: 0 0 12px; text-wrap: balance; }
.rule { width: 56px; height: 3px; background: var(--gold); margin: 20px 0; }
.lead { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--fs-lead); line-height: 1.45; color: var(--gold-text); max-width: 40rem; }
.measure { max-width: var(--measure); }
.caption, figcaption { font-style: italic; font-size: var(--fs-small); color: var(--caption); }
.text-link { font-weight: 600; display: inline-block; padding-block: 2px; }
sup.r { font-size: 0.6em; line-height: 0; vertical-align: super; font-weight: inherit; }
h1 sup.r, h2 sup.r, h3 sup.r, .display sup.r { font-size: 0.42em; vertical-align: 0.95em; }
.text-link::after { content: " \2192"; content: " \2192" / ""; }
.ext::after { content: "\2197"; content: "\2197" / ""; margin-left: 0.25em; }

/* Preview bar (not part of the website design) */
.preview-bar { background: var(--graphite); color: var(--on-dark); font-size: 0.8125rem; line-height: 1.4; }
.preview-bar .container { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding-block: 8px; }
.preview-bar strong { color: var(--white); }
.preview-toggle { font: 600 0.8125rem/1 var(--sans); background: transparent; color: var(--white); border: 1px solid var(--on-dark-quiet); border-radius: 6px; min-height: 32px; padding: 0 12px; cursor: pointer; }
.preview-toggle:hover { background: #2C2F45; }

/* Header */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.brand { display: inline-block; padding: 16px; margin: -16px; line-height: 0; border-radius: 8px; }
.logo-box { position: relative; display: inline-block; line-height: 0; }
.logo-box img { height: 92px; width: auto; display: block; }
.logo-box .reg { position: absolute; left: 85.3%; bottom: 1.6%; font: 600 8px/1 var(--sans); color: var(--midnight); }
.nav-desktop { display: none; }
.nav-desktop ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.nav-desktop a:not(.btn) { color: var(--midnight); text-decoration: none; font-weight: 600; font-size: 0.9375rem; padding-block: 8px; border-bottom: 2px solid transparent; }
.nav-desktop a:not(.btn):hover { border-bottom-color: var(--line); }
.nav-desktop a[aria-current] { border-bottom-color: var(--midnight); }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--midnight); border-radius: 8px; background: var(--white); color: var(--midnight); font: 600 1rem/1 var(--sans); cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; }
.mobile-menu { border-top: 1px solid var(--line); background: var(--white); }
.mobile-menu ul { list-style: none; margin: 0; padding: 8px 0 24px; display: grid; }
.mobile-menu li a:not(.btn) { display: block; padding: 12px 0; color: var(--midnight); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-menu li.sub a { padding-left: 20px; font-weight: 400; }
.mobile-menu a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.mobile-menu .btn { margin-top: 20px; }
@media (min-width: 960px) { .nav-desktop { display: block; } .menu-btn, .mobile-menu { display: none !important; } }
body[data-route="foundation"] .cta-header { display: none; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 8px; font: 600 1rem/1.2 var(--sans); text-decoration: none; border: 1.5px solid transparent; transition: background-color 0.15s, color 0.15s, border-color 0.15s; cursor: pointer; box-sizing: border-box; text-align: center; }
.btn-primary { background: var(--midnight); color: var(--white); }
.btn-primary:hover { background: var(--blue); }
.btn-primary:active { background: var(--graphite); }
.btn-secondary { background: transparent; color: var(--midnight); border-color: var(--midnight); }
.btn-secondary:hover { background: var(--mist); }
.btn-secondary:active { background: var(--line); }
.btn-light { background: var(--white); color: var(--midnight); }
.btn-light:hover { background: var(--on-dark); }
.btn-light:active { background: var(--on-dark-quiet); }
.btn-outline-light { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline-light:hover { background: var(--dark-hover); }
.btn-outline-light:active { background: var(--dark-rule); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Sections */
.section { padding-block: var(--section-pad); }
.section--ivory { background: var(--ivory); }
.section--mist { background: var(--mist); }
.section-head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head .intro, .section-intro { margin-top: 14px; }
.more { margin-top: 28px; }

/* Home hero */
.hero { background: var(--midnight); color: var(--on-dark); padding-block: clamp(64px, 10vw, 120px); }
.hero .kicker { color: var(--gold); }
.display { font-size: var(--fs-display); line-height: 1.0; color: var(--white); max-width: 14ch; }
.hero-lead { font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.45; color: var(--white); max-width: 38rem; }
.hero-promise { margin-top: 16px; max-width: 38rem; color: var(--on-dark); }
.hero-note { margin-top: 16px; font-size: 0.875rem; color: var(--on-dark-quiet); }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero-index { display: none; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; } .hero-index { display: block; } }
.hero-index-label { font-size: 0.875rem; color: var(--on-dark-quiet); margin-bottom: 10px; }
.hero-index ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dark-rule); }
.hero-index li { border-bottom: 1px solid var(--dark-rule); }
.hero-index a { display: grid; gap: 2px; padding: 14px 8px; text-decoration: none; color: var(--white); border-radius: 4px; }
.hero-index a:hover { background: var(--dark-hover); }
.hi-name { font-family: var(--serif); font-weight: 600; font-size: 1.3125rem; line-height: 1.25; }
.hi-tag { font-size: 0.9375rem; color: var(--on-dark-quiet); }

/* Page header */
.page-header { background: var(--ivory); padding-block: clamp(48px, 7vw, 88px); }
.page-header .grid { display: grid; gap: 40px; align-items: center; }
.page-header .grid > * { min-width: 0; }
@media (min-width: 900px) { .page-header .grid.has-aside { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.page-header .intro { margin-top: 20px; max-width: 40rem; }
.pill { display: inline-block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--midnight); border: 1.5px solid var(--midnight); border-radius: 6px; padding: 4px 10px; margin-top: 22px; }
.pill--soon { border-style: dashed; border-color: var(--caption); color: var(--slate); }

/* Photos */
.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; max-width: 100%; }

/* Rule list */
.rule-list { margin: 0; display: grid; }
.rule-list > div { display: grid; gap: 6px; padding-block: 20px; border-top: 1px solid var(--line); }
.rule-list > div:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .rule-list > div { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; } }
.rule-list dt { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; color: var(--midnight); }
.rule-list dd { margin: 0; }

/* Problems and services */
.problem-grid { display: grid; gap: 28px; }
@media (min-width: 700px) { .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .problem-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .problem h3 { min-height: 2.6em; box-sizing: content-box; } }
.problem { display: grid; gap: 12px; align-content: start; }
.problem h3 { font-size: var(--fs-h3); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.svc-link { display: grid; gap: 4px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; text-decoration: none; color: var(--slate); }
.svc-link:hover { border-color: var(--midnight); }
.svc-name { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--midnight); }
.svc-for { font-size: 0.875rem; color: var(--caption); }
.svc-tag { font-size: 0.9375rem; }
.svc-link--soon { border-style: dashed; border-color: var(--field); }
.svc-status { font-size: 0.8125rem; font-weight: 600; color: var(--caption); }
.problem .note { font-size: 0.875rem; color: var(--caption); }

/* Service cards (services page) */
.svc-grid { display: grid; gap: 20px; }
@media (min-width: 800px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.svc-card { background: var(--mist); border-radius: var(--radius); padding: var(--card-pad); display: flex; flex-direction: column; gap: 10px; }
.svc-card dl { flex: 1 0 auto; align-content: start; }
.svc-card .kicker { margin: 0; }
.svc-card h3 { font-size: var(--fs-h3); }
.svc-card dl { margin: 0; display: grid; gap: 8px; }
.svc-card dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--caption); }
.svc-card dd { margin: 0; }
.svc-card .pill { margin-top: 4px; align-self: flex-start; }
/* Services grouped by the problem they solve */
.svc-groups { display: grid; gap: 40px; }
.svc-group { display: grid; gap: 18px; padding-top: 28px; border-top: 1px solid var(--line); }
.svc-group:first-child { padding-top: 0; border-top: 0; }
.svc-problem { font-size: var(--fs-h3); line-height: 1.3; }
.svc-problem-col { display: grid; gap: 18px; align-content: start; }
@media (max-width: 999px) { .svc-problem-col .photo { max-width: 420px; } }
@media (min-width: 1000px) { .svc-group { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 40px; } .svc-grid--single .svc-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
/* Home and Services: the engagement path without its descriptions */
.flow--compact .flow-meta { margin-bottom: 0; }
/* Contact: what happens next, beside the form */
.steps--aside { gap: 18px; }
.steps--aside li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.steps--aside .num { width: 32px; height: 32px; font-size: 1rem; line-height: 32px; }
.steps--aside h3 { font-size: 1.125rem; margin-bottom: 2px; }
.way-mail { font: 600 clamp(1.25rem, 2.2vw, 1.375rem)/1.3 var(--serif); }
.way-mail a { display: inline-block; line-height: 1.3; color: var(--midnight); text-underline-offset: 4px; text-decoration-thickness: 1px; word-break: break-word; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.num { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--midnight); font: 600 1.1875rem/40px var(--serif); text-align: center; }
.when { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--caption); margin: 4px 0 6px; }
@media (min-width: 1000px) { .steps--row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps--row li { grid-template-columns: 1fr; } }

/* Splits and cards */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.split--top { align-items: start; }
.card { background: var(--mist); border-radius: var(--radius); padding: var(--card-pad); }
.section--ivory .card, .section--mist .card { background: var(--white); }
.card h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.diff-grid { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 700px) { .diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .diff-grid > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .diff-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .diff-grid > * { grid-column: span 2; } .diff-grid > :nth-child(-n+2) { grid-column: span 3; } .diff-grid > :last-child { grid-column: span 2; } }
.grid-3 { display: grid; gap: 16px; }
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-3.grid-3--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.section-head .rule { margin-bottom: 0; }
.usp { font-family: var(--serif); font-size: clamp(1.3125rem, 2.6vw, 1.6875rem); line-height: 1.4; color: var(--midnight); max-width: 50rem; }
.discreet { margin-top: 28px; font-weight: 600; color: var(--midnight); }

/* Cards with a single destination: the whole card is the link */
.card--link { position: relative; transition: box-shadow 0.15s; }
.card--link .stretched::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card--link:hover, .card--link:focus-within { box-shadow: inset 0 0 0 1.5px var(--midnight); }

/* Fields on service pages */
.facts { display: grid; gap: 22px; margin: 0; }
.facts dd { margin: 0; }
.facts .label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--caption); margin-bottom: 4px; }
.ticks { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.phases { list-style: none; counter-reset: ph; margin: 0; padding: 0; display: grid; gap: 10px; }
.phases li { counter-increment: ph; position: relative; padding-left: 40px; min-height: 28px; }
.phases li::before { content: counter(ph); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--midnight); font: 600 0.875rem/28px var(--serif); text-align: center; }
.options { margin: 0; display: grid; }
.options > div { display: grid; gap: 4px; padding-block: 16px; border-top: 1px solid var(--line); }
.options > div:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .options > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; } }
.options dt { font-weight: 600; color: var(--midnight); }
.options dd { margin: 0; }
.addons { margin-top: 20px; }

/* Tables */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 1rem; }
table.data caption { text-align: left; }
table.data th { text-align: left; font-size: 0.875rem; font-weight: 600; color: var(--midnight); border-bottom: 1.5px solid var(--midnight); padding: 10px 12px 10px 0; }
table.data td { border-bottom: 1px solid var(--line); padding: 14px 12px 14px 0; vertical-align: top; }
table.data td:first-child { font-weight: 600; color: var(--midnight); }
@media (max-width: 699px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; }
  table.stack tr { padding-block: 14px; border-bottom: 1px solid var(--line); }
  table.stack td { border: 0; padding: 3px 0; }
  table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--caption); }
}
.chip { display: inline-block; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; border-radius: 999px; padding: 2px 10px; border: 1.5px solid var(--midnight); color: var(--midnight); white-space: nowrap; }
.chip--live { background: var(--midnight); color: var(--white); }
.chip--planned { border-style: dashed; border-color: var(--caption); color: var(--slate); }

/* FAQ */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 600; color: var(--midnight); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; content: "+" / ""; position: absolute; right: 4px; top: 14px; font: 400 1.5rem/1 var(--sans); color: var(--midnight); }
.faq details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.faq .answer { padding: 0 0 20px; max-width: 46rem; }

/* CTA band */
.cta-band { background: var(--ivory); }
.cta-band .scope-note { margin-top: 20px; font-size: 0.9375rem; color: var(--caption); max-width: 44rem; }

/* Corridor diagram */
.diagram { background: var(--white); border-radius: 8px; padding: 12px; }
.diagram svg { display: block; width: 100%; height: auto; max-width: 100%; }
.d-line { stroke: var(--midnight); stroke-width: 2; fill: none; }
.d-node { fill: var(--white); stroke: var(--midnight); stroke-width: 2; }
.d-hub { fill: var(--midnight); }
.d-name { font: 600 21px var(--serif); fill: var(--midnight); }
.d-sub { font: 400 15px var(--sans); fill: var(--caption); }
.d-hub-text { font: 600 15px var(--sans); fill: var(--white); }
@media (max-width: 599px) { .diagram { display: none; } }

/* Forms */
.form { display: grid; gap: 20px; }
.field label, .field .legend { display: block; font-weight: 600; color: var(--midnight); margin-bottom: 6px; }
.field .hint { font-size: 0.875rem; color: var(--caption); margin: -2px 0 6px; }
.req { color: var(--deep-red); font-weight: 600; }
.form input[type="text"], .form input[type="email"], .form select, .form textarea { width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--field); border-radius: 8px; font: inherit; color: var(--slate); background: var(--white); }
.form textarea { min-height: 140px; resize: vertical; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--deep-red); border-width: 2px; }
.error { color: var(--deep-red); font-size: 0.875rem; margin-top: 6px; }
.check { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--midnight); }
.check label { font-weight: 400; color: var(--slate); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.error-summary { border: 2px solid var(--deep-red); border-radius: 8px; padding: 16px 20px; }
.error-summary h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.error-summary ul { margin: 0; padding-left: 20px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); text-decoration: underline; cursor: pointer; text-align: left; }
.success { border: 2px solid var(--midnight); border-radius: 8px; padding: 20px 24px; background: var(--mist); }
.success h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.booking { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); display: grid; gap: 14px; align-content: start; }
.booking h2 { font-size: var(--fs-h3); }
.booking ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: start; } }
#form-title { scroll-margin-top: 140px; }
#form-title:focus { outline: none; }
.reach { display: grid; gap: 14px; margin: 0; }
.reach dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--caption); }
.reach dd { margin: 0; }
a.tel { display: inline-block; padding-block: 2px; }
.ph { background: var(--rn-bg); color: var(--rn-fg); border-radius: 4px; padding: 0 4px; }

/* Legal drafts */
.legal-draft h2 { font-size: var(--fs-h3); margin: 36px 0 10px; }
.legal-draft p, .legal-draft ul { max-width: 46rem; }
.legal-draft ul { padding-left: 20px; display: grid; gap: 6px; margin: 10px 0 0; }
.legal-draft .table-wrap { margin-top: 18px; }
.draft-flag { border: 1.5px solid var(--deep-red); border-radius: 8px; padding: 14px 18px; color: var(--slate); max-width: 46rem; }
.draft-flag strong { color: var(--deep-red); }

/* Footer */
.site-footer { background: var(--midnight); color: var(--on-dark); padding-block: 44px 24px; font-size: 0.9375rem; }
/* five columns on wide screens (brand, services, company, follow, legal), all starting on one line;
   below that the brand row comes first, then the four link lists, two or four across */
.footer-grid { display: grid; gap: 28px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .footer-brand .logo-panel { grid-row: 1 / span 3; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: auto; display: block; } }
.logo-panel { display: inline-block; background: var(--white); padding: 16px; border-radius: 8px; line-height: 0; }
.footer-tagline { font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; color: var(--gold); margin-top: 16px; }
@media (min-width: 700px) and (max-width: 999px) { .footer-brand .footer-tagline { margin-top: 0; } }
.footer-place { margin-top: 4px; color: var(--on-dark); }
.site-footer .footer-contact { margin-top: 8px; gap: 0; }
.site-footer .footer-contact a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer h2 { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-quiet); margin-bottom: 6px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer li a { display: inline-block; padding-block: 3px; }
.site-footer a:hover { text-decoration: underline; }
.legal-lines { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--dark-rule); font-size: 0.875rem; line-height: 1.5; color: var(--on-dark-quiet); display: grid; gap: 4px; }
.legal-lines p + p { margin-top: 0; }

/* Review notes (preview only) */
.rn { display: inline-block; margin-top: 10px; font: 600 0.8125rem/1.35 var(--sans); color: var(--rn-fg); background: var(--rn-bg); border: 1px dashed var(--rn-line); border-radius: 6px; padding: 3px 8px; letter-spacing: 0; text-transform: none; font-style: normal; }
.rn-block { border: 1.5px dashed var(--rn-line); background: var(--rn-bg); color: var(--rn-fg); border-radius: 8px; padding: 16px 20px; margin-top: 28px; }
.rn-block strong { color: var(--rn-fg); }
.hide-review .rn, .hide-review .rn-block { display: none !important; }
figure .rn { display: block; width: fit-content; }

/* Service icons */
.svc-icon { display: block; width: 28px; height: 28px; color: var(--midnight); }
.svc-icon svg { display: block; width: 28px; height: 28px; }
.svc-link .svc-icon { margin-bottom: 4px; }
.svc-icon--sm, .svc-icon--sm svg { width: 24px; height: 24px; }
.svc-card .svc-icon { margin-bottom: 6px; }

/* Engagement flow */
.flow { list-style: none; margin: 0; padding: 0; display: grid; }
.flow-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding-bottom: 28px; align-content: start; }
.flow-step:last-child { padding-bottom: 0; }
.flow-step::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--midnight); }
.flow-step:last-child::before { display: none; }
.flow-num { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--midnight); font: 600 1.375rem/48px var(--serif); text-align: center; }
.flow-step h3 { font-size: var(--fs-h3); }
.flow-meta { display: inline-block; margin: 8px 0 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--midnight); border: 1.5px solid var(--midnight); border-radius: 999px; padding: 3px 10px; }
.flow-meta + p { margin-top: 0; font-size: 1rem; }
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
  .flow-step { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 0; }
  .flow-step::before { left: 56px; right: -20px; top: 23px; bottom: auto; width: auto; height: 2px; }
  .flow-step::after { content: ""; position: absolute; right: -22px; top: 18px; border-left: 10px solid var(--midnight); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
  .flow-step:last-child::after { display: none; }
}
.chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1.5px solid var(--midnight); border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--midnight); text-decoration: none; }
.chips a:hover { background: var(--mist); }

/* The 90-day Momentum Sprint */
.sprint { margin: 0; }
.sprint-head { display: grid; gap: 4px; margin-bottom: 28px; }
.sprint-title { font: 600 clamp(1.3125rem, 2.4vw, 1.625rem)/1.25 var(--serif); color: var(--midnight); }
.sprint-sub { color: var(--slate); }
.sprint-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 20px; margin: 0 10px; }
.sprint-month { position: relative; border-top: 4px solid var(--midnight); margin-top: 8px; }
.sprint-tick { position: absolute; top: -12px; width: 2px; height: 14px; margin-left: -1px; background: var(--midnight); }
.sprint-dot { position: absolute; top: 0; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--gold); border: 3px solid var(--midnight); box-sizing: border-box; }
.sprint-points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); font-size: 0.9375rem; line-height: 1.35; }
.sprint-points li { display: grid; gap: 2px; }
.sprint-points strong { color: var(--midnight); }
.sprint-points .sp-0 { grid-column: 1 / 2; text-align: left; }
.sprint-points .sp-30 { grid-column: 2 / 4; text-align: center; }
.sprint-points .sp-60 { grid-column: 4 / 6; text-align: center; }
.sprint-points .sp-90 { grid-column: 6 / 7; text-align: right; }
.sprint-track--open { display: block; }
.sprint-line { position: absolute; left: 0; right: 0; top: 8px; border-top: 4px solid var(--midnight); }
.sprint-points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sprint-points--3 .sp-mid { text-align: center; }
.sprint-points--3 .sp-end { text-align: right; }
.gantt-row--sprint { padding-top: 14px; border-top: 1px dashed var(--line); }
.gantt-row--sprint + .gantt-row--sprint { padding-top: 0; border-top: 0; }
.gantt-bar.gantt-bar--sprint { background: var(--gold); box-shadow: inset 0 0 0 2px var(--midnight); }
@media (max-width: 639px) {
  .sprint-track { display: none; }
  .sprint-points { position: relative; margin-top: 0; padding-left: 32px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sprint-points::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 4px; background: var(--midnight); }
  .sprint-points [class^="sp-"] { position: relative; grid-column: auto; text-align: left; }
  .sprint-points [class^="sp-"]::before { content: ""; position: absolute; left: -32px; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 3px solid var(--midnight); box-sizing: border-box; }
}

/* Momentum Score dial: Midnight segments with gold icons (the icon rule on Midnight), a white hub and one gold dial rule.
   From 640 px each segment is its list item, clipped to shape, so its Midnight background is real; on phones the SVG draws
   the ring and the names sit in a key below it. */
.mwheel { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .mwheel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 64px; } }
.mw-graphic { position: relative; width: 100%; max-width: 600px; margin-inline: auto; container: mwheel / inline-size; }
.mw-stage { position: relative; aspect-ratio: 1 / 1; max-width: 100%; container-type: inline-size; }
.mw-ring { display: block; width: 100%; height: 100%; }
.mw-dial { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.mw-tick { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.mw-seg { fill: var(--midnight); }
.mw-sicon { color: var(--gold); }
/* the hub text scales with the graphic, so it always fits its circle */
.mw-hub { position: absolute; z-index: 1; left: 50%; top: 50%; width: 40%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); margin: 0; padding: 0 6%; box-sizing: border-box; border-radius: 50%; background: var(--white); display: grid; align-content: center; justify-items: center; gap: 4px; text-align: center; }
.mw-hub::before { content: ""; position: absolute; inset: 4.2%; border: 1.5px solid var(--gold); border-radius: 50%; pointer-events: none; }
.mw-num { font-family: var(--serif); font-weight: 600; font-size: 44px; font-size: clamp(40px, 13cqi, 76px); line-height: 1; color: var(--midnight); }
.mw-label { font-family: var(--sans); font-weight: 600; font-size: 14px; font-size: clamp(14px, 2.9cqi, 17px); line-height: 1.25; color: var(--slate); text-wrap: balance; }
/* Key layout (phones, and any width where the visitor's text size is too large for the ring): the names in a key below */
.mw-areas { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr)); gap: 14px 12px; }
.mw-lab { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; }
.mw-i { display: block; width: 24px; height: 24px; color: var(--midnight); }
.mw-i svg { display: block; width: 24px; height: 24px; }
.mw-name { font-family: var(--serif); font-weight: 600; font-size: 1rem; line-height: 1.2; color: var(--midnight); }
.mw-name .nowrap { white-space: normal; }
/* Ring layout: each segment is its list item, clipped to shape, with the name inside it */
@container mwheel (min-width: 30em) {
  .mw-seg, .mw-sicon { display: none; }
  .mw-areas { position: absolute; inset: 0; display: block; margin: 0; }
  .mw-area { position: absolute; inset: 0; clip-path: var(--clip); background: var(--midnight); }
  .mw-lab { position: absolute; left: var(--cx); top: var(--cy); width: 24%; transform: translate(-50%, -50%); grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: center; text-align: center; }
  .mw-i, .mw-i svg { width: 30px; height: 30px; }
  .mw-i { color: var(--gold); }
  .mw-name { font-size: 1.0625rem; color: var(--white); }
  .mw-name .nowrap { white-space: nowrap; }
}
@media (max-width: 639px) { .mw-graphic { max-width: 420px; } }
.mw-facts { margin: 0; display: grid; gap: 28px; }
.mw-facts > div::before { content: ""; display: block; width: 40px; height: 3px; background: var(--gold); margin-bottom: 14px; }
.mw-facts dt { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; color: var(--midnight); }
.mw-facts dd { margin: 6px 0 0; text-wrap: pretty; }
@media (min-width: 640px) and (max-width: 999px) { .mw-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* Phase timelines */
.gantt { display: grid; gap: 16px; }
.gantt-scale, .gantt-row { display: grid; gap: 6px 24px; align-items: center; }
.gantt-scale .gantt-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--caption); }
.gantt-weeks { display: grid; font-size: 0.8125rem; color: var(--caption); font-variant-numeric: tabular-nums; }
.gantt-weeks span { border-left: 1px solid var(--line); padding-left: 4px; min-height: 18px; white-space: nowrap; }
.gantt-weeks .gantt-then { border-left-style: dashed; padding-left: 0; text-align: center; }
@media (max-width: 599px) { .gantt-weeks span:not(.lab):not(.gantt-then) { border-left-color: transparent; } }
.gantt-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.gantt-label { font-size: 1rem; line-height: 1.45; }
.gantt-label strong { color: var(--midnight); }
.gantt-when { color: var(--caption); white-space: nowrap; }
.gantt-detail { display: block; font-size: 0.9375rem; color: var(--slate); }
.gantt-track { display: grid; height: 16px; border-bottom: 1px solid var(--line); }
.gantt-bar { height: 16px; border-radius: 8px; background: var(--midnight); }
.gantt-bar--ongoing { background: transparent; border: 2px dashed var(--midnight); box-sizing: border-box; }
@media (min-width: 900px) { .gantt-scale, .gantt-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* Corridor map */
.map-band { background: var(--midnight); color: var(--on-dark); }
.map-band .container { padding-block: clamp(40px, 6vw, 72px); }
.map-figure { margin: 0; }
.map-figure svg { display: block; width: 100%; height: auto; }
.map-figure figcaption { margin-top: 18px; font-size: 0.9375rem; color: var(--on-dark-quiet); max-width: 46rem; }
.map-figure .map-wide { display: none; }
.map-figure .map-narrow { max-width: 420px; }
@media (min-width: 700px) { .map-figure .map-wide { display: block; } .map-figure .map-narrow { display: none; } }

/* Featured row (home) */
.feature-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--white); }
.feature-visual { position: relative; background: var(--midnight); color: var(--on-dark); min-height: 200px; display: grid; place-items: center; padding: 24px; }
.feature-visual--stats { place-items: start; align-content: end; gap: 14px; }
.feature-play { position: absolute; top: 20px; left: 24px; width: 36px; height: 36px; color: var(--gold); }
.feature-play svg { width: 36px; height: 36px; display: block; }
.feature-asof { font-size: 0.875rem; color: var(--on-dark-quiet); }
.feature-body { padding: var(--card-pad); display: flex; flex-direction: column; gap: 10px; flex: 1 0 auto; }
.feature-body h3 { font-size: var(--fs-h3); }
.feature-link { margin-top: auto; padding-top: 6px; }
.mini-score { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 8px; }
.mini-score span { border: 1.5px solid var(--on-dark-quiet); border-radius: 6px; }
.mini-score .ms-core { background: var(--white); border-color: var(--white); color: var(--midnight); font: 600 1.25rem/41px var(--serif); text-align: center; }
.mini-map { width: 100%; max-width: 320px; height: auto; display: block; }

/* Stat callouts */
.stats { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; }
.stat { display: flex; flex-direction: column-reverse; gap: 2px; }
.stat dd { margin: 0; font: 600 clamp(1.875rem, 3.4vw, 2.5rem)/1.05 var(--serif); color: var(--midnight); font-variant-numeric: tabular-nums; }
.stat dt { font-size: 0.875rem; color: var(--caption); }
.stats--dark .stat dd { color: var(--white); }
.stats--dark .stat dt { color: var(--on-dark-quiet); }

/* Symbols: 2 px line icons at every size, Midnight on light circles */
.ico { display: block; width: 100%; height: 100%; }
.ico * { vector-effect: non-scaling-stroke; }
.icon-tile { display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--mist); color: var(--midnight); }
.icon-tile .ico { width: 28px; height: 28px; }
.icon-tile--sm { width: 40px; height: 40px; }
.icon-tile--sm .ico { width: 22px; height: 22px; }
.icon-tile--lg { width: 64px; height: 64px; background: var(--white); border: 1px solid var(--line); margin-bottom: 20px; }
.icon-tile--lg .ico { width: 34px; height: 34px; }
.icon-tile--on-mist { background: var(--white); }
.svc-link .icon-tile { margin-bottom: 6px; }
.svc-card .icon-tile { margin-bottom: 8px; }

/* Media controls: one button per moving video */
.media-toggle { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px; background: rgba(30, 34, 96, 0.86); color: var(--white); font: 600 0.8125rem/1 var(--sans); cursor: pointer; }
.media-toggle:hover { background: var(--midnight); border-color: var(--white); }
.media-toggle .mt-ico { display: none; width: 18px; height: 18px; }
.media-toggle[data-state="playing"] .mt-pause, .media-toggle[data-state="paused"] .mt-play, .media-toggle[data-state="ended"] .mt-replay, .media-toggle:not([data-state]) .mt-play { display: block; }

/* Home hero: Vancouver Harbour video */
.hero--video { position: relative; padding-block: 0; overflow: hidden; }
.hero-media { position: relative; background: var(--midnight); }
.hero-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-controls { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12px; z-index: 2; display: flex; justify-content: flex-end; align-items: center; gap: 10px; pointer-events: none; }
.hero-controls > * { pointer-events: auto; }
.hero-controls .media-toggle { position: static; }
.hero-place { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px 6px 9px; border-radius: 999px; background: rgba(30, 34, 96, 0.86); color: var(--white); font-size: 0.875rem; font-weight: 600; line-height: 1.2; }
.hero-place .ico { width: 16px; height: 16px; flex: none; }
.hero-inner { width: 100%; padding-block: clamp(36px, 7vw, 56px) clamp(44px, 8vw, 64px); }
.hero-copy { max-width: 40rem; }
@media (max-width: 599px) {
  .hero-controls { bottom: 8px; }
  .hero-place { font-size: 0.8125rem; padding: 5px 10px 5px 8px; }
  .media-toggle { width: 40px; padding: 0; justify-content: center; }
  .media-toggle .mt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .service-strip a { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px; }
  .service-strip .icon-tile { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
  .service-strip .icon-tile .ico { width: 24px; height: 24px; }
  .ss-name { font-size: 1.125rem; }
  .ss-tag { font-size: 0.875rem; }
}
@media (min-width: 900px) {
  .hero--video { min-height: clamp(640px, 84vh, 800px); display: grid; align-items: center; }
  .hero-media { position: absolute; inset: 0; }
  .hero-video { height: 100%; aspect-ratio: auto; }
  .hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    /* the veil stays at 0.92 or more until just past the end of the text column at every width, so text keeps 4.5:1 over the brightest sky */
    background: linear-gradient(90deg, rgba(30, 34, 96, 0.96) 0, rgba(30, 34, 96, 0.92) max(720px, calc(50% + 140px)),
      rgba(30, 34, 96, 0.5) max(1000px, calc(50% + 420px)), rgba(30, 34, 96, 0.2) 100%); }
  .hero-inner { position: relative; z-index: 1; padding-block: 104px 176px; }
  .hero-controls { left: auto; bottom: 112px; justify-content: flex-end; }
}

/* Service strip: five services with symbols, overlapping the hero on wide screens */
.service-strip-wrap { position: relative; z-index: 2; padding-block: 28px 4px; }
.service-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.service-strip a { display: grid; align-content: start; gap: 6px; height: 100%; box-sizing: border-box; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 22px 20px; text-decoration: none; color: var(--slate); transition: border-color 0.15s; }
.service-strip a:hover { border-color: var(--midnight); }
.service-strip .icon-tile { margin-bottom: 10px; }
.ss-name { font: 600 1.1875rem/1.25 var(--serif); color: var(--midnight); }
.ss-tag { font-size: 0.9375rem; line-height: 1.45; }
.hero-notes { padding-block: 0; }
@media (min-width: 900px) { .service-strip-wrap { margin-top: -96px; padding-block: 0 8px; } }
@media (min-width: 1100px) { .service-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Featured row media */
.feature-media { position: relative; aspect-ratio: 16 / 9; background: var(--midnight); overflow: hidden; }
.feature-media video, .feature-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature-visual { aspect-ratio: 16 / 9; min-height: 0; box-sizing: border-box; }

/* Closing band on Home: city walkers under a Midnight veil */
.cta-band--video { position: relative; overflow: hidden; background: var(--midnight); color: var(--on-dark); }
.cta-media { position: absolute; inset: 0; }
.cta-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cta-media::after { content: ""; position: absolute; inset: 0; background: rgba(30, 34, 96, 0.88); }
.cta-band--video .container { position: relative; z-index: 1; }
.cta-band--video h2 { color: var(--white); }
.cta-band--video .section-intro { color: var(--on-dark); }
.cta-band--video .scope-note { color: var(--on-dark-quiet); }

/* Corridor route map video */
.map-video-wrap { position: relative; display: none; border-radius: 8px; overflow: hidden; background: var(--midnight); }
.map-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
@media (min-width: 700px) { .map-video-wrap { display: block; } }

/* Contact: three ways to reach us */
.ways { display: grid; gap: 16px; }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.way { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); }
.way h3 { font-size: var(--fs-h3); margin-top: 8px; }
.way-big { font: 600 clamp(1.5rem, 2.6vw, 1.75rem)/1.25 var(--serif); }
.way-big a { color: var(--midnight); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.way-action { margin-top: auto; padding-top: 10px; }

/* Services: brand, creative and event capabilities as grouped tiles, an events panel and a Brand Standard panel */
.cap-groups { display: grid; gap: clamp(40px, 5vw, 56px); margin-top: clamp(40px, 5vw, 64px); }
.cap-band { display: grid; gap: 18px; }
.cap-band-label { display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--midnight); }
.cap-band > .cap-band-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cap-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.cap-tile { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: var(--card-pad); border-radius: var(--radius); background: var(--mist); }
.cap-tile h4, .cap-panel h4 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; color: var(--midnight); text-wrap: balance; }
.cap-inc { margin: 0; }
.cap-where { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.5; color: var(--midnight); }
.cap-label { display: block; margin-bottom: 4px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--caption); }
.cap-feature { display: grid; gap: 16px; }
@media (min-width: 960px) { .cap-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.cap-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: clamp(28px, 3.4vw, 44px); border-radius: var(--radius); }
.cap-panel-head { display: flex; align-items: center; gap: 14px; }
.cap-path-label { margin: 4px 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--caption); }
.cap-events { background: var(--midnight); color: var(--on-dark); }
.cap-events h4 { color: var(--white); }
.cap-events .cap-band-label, .cap-events .cap-path-label, .cap-events .cap-label { color: var(--on-dark-quiet); }
.cap-events .cap-where { border-top-color: var(--dark-rule); color: var(--white); }
.icon-tile--dark { background: var(--dark-hover); color: var(--white); }
.event-steps { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 32px; counter-reset: ev; }
@media (min-width: 640px) { .event-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; } }
.event-steps li { counter-increment: ev; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; padding-block: 12px; border-top: 1px solid var(--dark-rule); color: var(--white); }
.event-steps li::before { content: counter(ev, decimal-leading-zero); font: 600 1.125rem/1 var(--serif); color: var(--gold); }
.cap-measure { margin: 0; color: var(--on-dark); }
.cap-consistency { background: var(--mist); }
.cap-consistency .icon-tile { background: var(--white); }
.phase-list { list-style: none; margin: 0; padding: 0; display: grid; }
.phase-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-block: 10px; border-top: 1px solid var(--line); }
.phase-list li:last-child { border-bottom: 1px solid var(--line); }
.phase-name { font-weight: 600; color: var(--midnight); }
.phase-when { font-size: var(--fs-small); color: var(--caption); white-space: nowrap; }
/* tiles line up title, text and "Where it sits" across a row; phones put the icon beside the title */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 600px) {
    .cap-grid { row-gap: 0; }
    .cap-tile { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; margin-bottom: 16px; }
    .cap-tile .cap-where { margin-top: 0; }
  }
}
@media (max-width: 599px) {
  .cap-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 20px; }
  .cap-tile .icon-tile { width: 40px; height: 40px; }
  .cap-tile .icon-tile .ico { width: 22px; height: 22px; }
  .cap-tile .cap-inc, .cap-tile .cap-where { grid-column: 1 / -1; }
  .cap-panel { padding: 24px 20px; }
}
.cap-link { margin: 0; }

/* Client stories (draft) and the Home teaser */
.story-list { display: grid; gap: 20px; }
@media (min-width: 1000px) { .story-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.story { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--white); }
.story-head { display: flex; align-items: center; gap: 16px; }
.story-head .kicker { margin-bottom: 4px; }
.story-head h2 { font-size: var(--fs-h3); line-height: 1.25; }
.story-head .icon-tile { background: var(--mist); }
.story-client { margin: 0; color: var(--slate); }
.story-grid { display: grid; gap: 20px 32px; }
@media (min-width: 640px) { .story-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.story-grid h3 { margin-bottom: 10px; font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--caption); }
.story-stats { flex-direction: column; gap: 14px; }
.story-stats + .caption { margin-top: 10px; }
.story-today { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--slate); }
.story-today strong { color: var(--midnight); }
.teaser-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.teaser-card { display: flex; flex-direction: column; gap: 10px; }
.teaser-card .kicker { margin: 0; }
.teaser-card h3 { margin: 0; }
.teaser-card p { margin: 0; }
.teaser-card .teaser-fact { color: var(--slate); }
.teaser-card .teaser-fact strong { font-family: var(--serif); font-size: 1.375rem; color: var(--midnight); }
.teaser-card .more { margin-top: auto; padding-top: 6px; }
.cap-events .text-link { color: var(--white); }

/* Cookie banner and preferences: Reject is as prominent as Accept; the banner never hides a focused control */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--midnight); color: var(--on-dark); border-top: 3px solid var(--gold); padding-block: 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
.consent-inner { display: grid; gap: 16px 40px; align-items: center; }
@media (min-width: 960px) { .consent-inner { grid-template-columns: minmax(0, 1fr) auto; } }
.consent h2 { color: var(--white); font-size: var(--fs-h3); margin-bottom: 6px; }
.consent p { color: var(--on-dark); font-size: 1rem; line-height: 1.5; max-width: var(--measure); }
.consent-text a { color: var(--white); text-decoration-thickness: 1px; }
.consent .rn { margin-top: 10px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 599px) { .consent { padding-block: 16px calc(16px + env(safe-area-inset-bottom, 0px)); } .consent-inner { gap: 14px; } .consent h2 { font-size: 1.25rem; margin-bottom: 4px; } .consent p { font-size: 0.9375rem; } .consent .rn { margin-top: 8px; } .consent .consent-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .consent .consent-actions [data-consent="manage"] { grid-column: 1 / -1; } .consent .btn { padding: 0 12px; } }
html.has-consent-banner { scroll-padding-bottom: var(--consent-h, 220px); }
html.has-consent-banner body { padding-bottom: var(--consent-h, 220px); }
.consent-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--radius); background: var(--white); color: var(--slate); }
.consent-dialog::backdrop { background: rgba(28, 30, 46, 0.6); }
.consent-form { position: relative; padding: var(--card-pad); display: grid; gap: 16px; }
.consent-form h2 { font-size: var(--fs-h3); padding-right: 48px; }
.consent-cats { display: grid; }
.consent-cat { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; padding-block: 16px; border-top: 1px solid var(--line); }
.consent-cat:last-child { border-bottom: 1px solid var(--line); }
.consent-cat-name { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--midnight); }
.consent-cat-desc { margin-top: 4px; font-size: var(--fs-small); color: var(--caption); }
.consent-cat .rn { margin-top: 8px; }
.consent-always { flex: none; margin: 2px 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--midnight); }
.switch { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 52px; height: 30px; margin: 0; border-radius: 999px; border: 2px solid var(--field); background: var(--white); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.switch::before { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--field); transition: transform 0.15s; }
.switch:checked { background: var(--midnight); border-color: var(--midnight); }
.switch:checked::before { transform: translateX(22px); background: var(--white); }
.consent-form .consent-actions { margin-top: 4px; }
.consent-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--midnight); font: 400 1.75rem/1 var(--sans); cursor: pointer; }
.consent-close:hover { background: var(--mist); }
.site-footer .linklike { display: inline-block; padding-block: 3px; color: var(--white); text-decoration: none; font-size: inherit; }
.site-footer .linklike:hover { text-decoration: underline; }

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

/* Option 2 layout: the concept's one-page order in the brand system. White header with the logo as registered; Ivory hero
   with the harbour photo and an overlapping white card; a starting-point list with its panel beside it; Midnight for the
   content panel and the closing band; Ivory footer with the logo on a white panel. Colours and type come from the tokens above. */
:root { --bizcan-red: #E3242B; }
@media (prefers-reduced-motion: no-preference) { html.o2-smooth { scroll-behavior: smooth; } }   /* on after load, so deep links land at once */
.o2-page [id] { scroll-margin-top: 16px; }
.preview-bar a { color: var(--white); text-decoration-thickness: 1px; }

/* Header */
.o2-header { background: var(--white); border-bottom: 1px solid var(--line); }
.o2-header-inner { display: flex; align-items: center; gap: 16px 28px; padding-block: 20px; }
.o2-logo { margin-right: auto; line-height: 0; }
.o2-nav { display: none; }
.o2-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(18px, 2vw, 28px); }
.o2-nav a[aria-current] { border-bottom-color: var(--midnight); }
.o2-nav a { display: inline-block; color: var(--midnight); text-decoration: none; font-weight: 600; font-size: 0.9375rem; padding-block: 10px; border-bottom: 2px solid transparent; }
.o2-nav a:hover { border-bottom-color: var(--midnight); }
.mobile-menu a[aria-current] { color: var(--blue); }
.o2-talk { display: none !important; }
@media (min-width: 600px) { .o2-talk { display: inline-flex !important; } }
@media (min-width: 960px) { .o2-nav { display: block; } }
.o2-header .mobile-menu .btn { margin-top: 20px; }

/* Hero, after the development site: display headline, photo with captions, and an approach card overlapping it */
.o2-hero { background: var(--ivory); padding-block: clamp(40px, 6vw, 88px) clamp(72px, 9vw, 120px); }
.o2-hero-grid { display: grid; gap: 40px; align-items: start; }
.o2-hero-grid > * { min-width: 0; }
@media (min-width: 960px) { .o2-hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: clamp(48px, 5vw, 88px); } }
.o2-hero .kicker { margin-bottom: 24px; }
.o2-display { font-size: clamp(2.75rem, 5.6vw, 5.5rem); line-height: 1.0; letter-spacing: -0.018em; max-width: none; text-wrap: initial; }
.o2-line { display: block; }
.o2-accent { color: var(--gold-text); }
.o2-hero-lead { margin-top: 32px !important; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; color: var(--slate); max-width: 33rem; }
.o2-hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.o2-btn-go::after, .o2-link--go::after { content: "\2197"; content: "\2197" / ""; margin-left: 12px; font-weight: 400; }
.o2-link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; color: var(--midnight); text-decoration: none; }
.o2-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.o2-link--down::after { content: "\2193"; content: "\2193" / ""; margin-left: 12px; font-weight: 400; }
.o2-hero-call { margin-top: 4px !important; }
.o2-hero-note { margin-top: 28px !important; font-size: var(--fs-small); color: var(--caption); max-width: 32rem; }
.o2-mark::before { content: ""; display: inline-block; width: 9px; height: 9px; background: var(--bizcan-red); margin-right: 12px; vertical-align: 0.06em; }
.o2-hero-media { position: relative; }
.o2-hero-figure { position: relative; margin: 0; max-width: 100%; background: var(--mist); }
.o2-hero-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; }
@media (min-width: 960px) { .o2-hero-figure img { aspect-ratio: 1 / 1.04; } }
/* The harbour video from the current site fills the picture slot; the round button pauses it (WCAG 2.2.2) */
.o2-hero-video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 28% 50%; background: var(--mist); }
@media (min-width: 960px) { .o2-hero-video { aspect-ratio: 1 / 1.04; } }
.o2-hero-figure .media-toggle { width: 40px; padding: 0; justify-content: center; }
.o2-hero-figure .media-toggle .mt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 959px) { .o2-hero-figure .media-toggle { bottom: 70px; } }
.o2-hero-tags { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0; font: 600 0.75rem/1.25 var(--sans); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--midnight); }
.o2-hero-tags span { background: var(--white); padding: 8px 10px; }
.o2-hero-tags span:last-child { margin-left: auto; }
@media (min-width: 960px) { .o2-hero-tags { font-size: 0.6875rem; letter-spacing: 0.1em; } .o2-hero-tags span { padding: 7px 9px; } }
.o2-hero-tags span:last-child::after { content: "\2197"; content: "\2197" / ""; margin-left: 8px; }
.o2-approach { position: relative; z-index: 1; margin: -56px 12px 0; background: var(--white); border: 1px solid var(--line); padding: 26px 24px 8px; }
@media (min-width: 600px) { .o2-approach { margin-inline: 24px; max-width: 28rem; } }
@media (min-width: 960px) { .o2-approach { position: absolute; left: -36px; top: 50%; width: min(28rem, 82%); max-width: none; margin: 0; padding: 32px 30px 8px; } }
.o2-approach .kicker { margin-bottom: 16px; }
.o2-approach-text { font-family: var(--serif); font-weight: 400; font-size: clamp(1.625rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--midnight); }
.o2-approach-text span { display: block; }
.o2-approach-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; margin-top: 24px; border-top: 1px solid var(--line); color: var(--midnight); text-decoration: none; }
.o2-approach-link::after { content: "\2197"; content: "\2197" / ""; font-size: 1.125rem; }
.o2-approach-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Growth system strip */
.o2-strip { background: var(--ivory); }
.o2-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-block: 22px 26px; border-top: 1px solid var(--line); }
.o2-strip .container { padding-block: 0; }
.o2-strip-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--caption); }
.o2-strip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 6px; }
.o2-strip-list li { font-size: 1.0625rem; color: var(--midnight); }
@media (max-width: 599px) { .o2-strip-list { column-gap: 20px; } }
@media (min-width: 600px) { .o2-strip-list li + li::before { content: "\00B7"; content: "\00B7" / ""; margin-inline: 14px; color: var(--caption); font-weight: 600; } }

/* Section heads and two-column text */
.o2-head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 48px); }
.o2-head .section-intro { margin-top: 14px; }
.o2-head--split { max-width: none; display: grid; gap: 14px 64px; align-items: end; }
@media (min-width: 900px) { .o2-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .o2-head--split .section-intro { margin-top: 0; max-width: 34rem; } }
.o2-two { display: grid; gap: 20px 64px; }
.o2-two > * { min-width: 0; }
@media (min-width: 900px) { .o2-two { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .o2-two--top { align-items: start; } .o2-two--mid { align-items: center; } }
.o2-big { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.45; color: var(--midnight); }
.o2-two .more { margin-top: 24px; }

/* Starting-point picker: each challenge is a button followed by its panel (an accordion on phones);
   on wide screens the list sits on the left and the open panel beside it */
.o2-picker { display: grid; }
.o2-pick-h { margin: 0; font: inherit; }
.o2-pick { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 16px; align-items: center; margin: 0; padding: 16px; text-align: left; background: transparent; color: var(--slate); border: 0; border-top: 1px solid var(--line); border-radius: 0; font: inherit; cursor: pointer; }
.o2-pick .icon-tile { width: 44px; height: 44px; background: var(--white); }
.o2-pick .icon-tile .ico { width: 24px; height: 24px; }
.o2-pick-text { display: grid; gap: 2px; min-width: 0; }
.o2-pick-name { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: var(--midnight); }
.o2-pick-line { font-size: 0.9375rem; line-height: 1.4; color: var(--slate); }
.o2-chev { width: 9px; height: 9px; margin: 0 6px 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); color: var(--midnight); transition: transform 0.15s; }
.o2-pick-h:last-of-type .o2-pick { border-bottom: 1px solid var(--line); }
.o2-pick:hover { background: var(--white); }
.o2-pick[aria-expanded="true"] { background: var(--midnight); border-top-color: transparent; border-radius: var(--radius); }
.o2-pick[aria-expanded="true"] .o2-pick-name { color: var(--white); }
.o2-pick[aria-expanded="true"] .o2-pick-line { color: var(--on-dark); }
.o2-pick[aria-expanded="true"] .o2-chev { color: var(--gold); transform: rotate(-135deg); margin-bottom: -4px; }
.o2-pick[aria-expanded="true"] .icon-tile { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--dark-rule); }
.o2-panel { background: var(--white); border-radius: var(--radius); padding: clamp(22px, 3vw, 40px); margin: 8px 0 18px; }
@media (min-width: 900px) {
  .o2-picker { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(5, auto) 1fr; column-gap: clamp(24px, 4vw, 56px); align-items: start; }
  .o2-pick-h { grid-column: 1; }
  .o2-panel { grid-column: 2; grid-row: 1 / -1; margin: 0; }
  .o2-chev, .o2-pick[aria-expanded="true"] .o2-chev { transform: rotate(-45deg); margin: 0 6px; }
}
.o2-panel-svc { font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; color: var(--blue); margin-bottom: 6px; }
.o2-panel .kicker { margin-bottom: 14px; }
.o2-panel-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.625rem, 2.5vw, 2.25rem); line-height: 1.15; color: var(--midnight); text-wrap: balance; }
.o2-panel-text { margin-top: 14px !important; max-width: 40rem; }
.o2-panel h4 { font-family: var(--sans); font-weight: 600; font-size: var(--fs-label); line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--caption); margin: 26px 0 12px; }
.o2-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.o2-ticks li { position: relative; padding-left: 28px; }
.o2-ticks li::before { content: ""; position: absolute; left: 3px; top: 0.45em; width: 12px; height: 6px; border-left: 2px solid var(--midnight); border-bottom: 2px solid var(--midnight); transform: rotate(-45deg); }
@media (min-width: 700px) { .o2-panel .o2-ticks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; } }
.o2-start { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.o2-start p { flex: 1 1 18rem; max-width: 30rem; margin: 0; }
.o2-start-label { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--caption); margin-bottom: 2px; }
.o2-start strong { color: var(--midnight); }
.o2-start-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* How we work: four steps */
.o2-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; }
.o2-steps > li { display: grid; align-content: start; row-gap: 10px; padding-top: 24px; border-top: 1px solid var(--line); }
.o2-steps p { margin: 0; }
.o2-step-top { display: flex; align-items: center; gap: 12px; }
.o2-step-name { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--caption); }
.o2-steps h3 { font-size: var(--fs-h3); }
.o2-output { padding-top: 6px; font-size: var(--fs-small); color: var(--slate); }
.o2-output-label { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--midnight); }
@media (min-width: 700px) { .o2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 44px; } }
@media (min-width: 1100px) {
  .o2-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); row-gap: 10px; }
  .o2-steps > li { grid-row: 1 / span 4; grid-template-rows: subgrid; }
}
.o2-keep { margin-top: 44px; padding: 20px 24px; background: var(--ivory); border-radius: var(--radius); max-width: 62rem; }
.o2-keep strong { color: var(--midnight); }

/* Content growth: photo beside a Midnight panel */
.o2-split { display: grid; background: var(--midnight); }
.o2-split > * { min-width: 0; }
@media (min-width: 960px) { .o2-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.o2-split-media { position: relative; margin: 0; aspect-ratio: 3 / 2; max-width: 100%; background: var(--dark-rule); }
.o2-split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) { .o2-split-media { aspect-ratio: auto; min-height: 520px; } }
.o2-split-panel { padding-block: clamp(48px, 6vw, 96px); padding-inline: var(--gutter); color: var(--on-dark); }
@media (min-width: 960px) { .o2-split-panel { padding-inline: clamp(40px, 5vw, 88px); } }
.o2-split-inner { max-width: 34rem; }
.o2-split-panel .kicker { color: var(--gold); }
.o2-split-panel h2 { color: var(--white); }
.o2-split-panel p { color: var(--on-dark); }
.o2-split-lead { margin-top: 18px !important; }
.o2-flow { list-style: none; margin: 28px 0; padding: 16px 0; border-block: 1px solid var(--dark-rule); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.o2-flow li { font-family: var(--serif); font-weight: 600; font-size: 1.125rem; color: var(--white); }
.o2-flow li:not(:last-child)::after { content: "\2192"; content: "\2192" / ""; margin-left: 14px; color: var(--gold); font-family: var(--sans); }
.o2-split .o2-ticks li { color: var(--on-dark); }
.o2-split .o2-ticks li::before { border-color: var(--gold); }
.o2-where { margin-top: 24px !important; font-size: var(--fs-small); color: var(--on-dark-quiet) !important; }
.o2-split .text-link { color: var(--gold); }
.o2-split-acts { margin-top: 18px !important; display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* Responsible AI */
.o2-chips { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.o2-chips li { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 0.9375rem; line-height: 1.4; color: var(--midnight); }
.o2-ai-note { margin-top: 20px !important; }

/* Ways to work together */
.o2-ways { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.o2-ways > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.o2-ways p { margin: 0; }
.o2-ways .num { grid-row: span 3; }
.o2-way-name h3 { font-size: var(--fs-h3); }
.o2-way-for { margin-top: 4px !important; font-size: var(--fs-small); color: var(--caption); }
.o2-way-when { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--midnight); }
@media (min-width: 900px) {
  .o2-ways > li { grid-template-columns: 40px minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2.4fr); column-gap: 28px; align-items: start; }
  .o2-ways .num { grid-row: auto; }
  .o2-way-when { text-align: right; padding-top: 6px; }
}
.o2-scope-line { margin-top: 24px !important; font-size: 0.9375rem; color: var(--caption); max-width: 44rem; }

/* Client stories (14 October, at the client's request): on Home a carousel that shows one story at a time and moves on its own,
   each story with the client's logo (exactly as supplied, on a white tile), a one-line synopsis and Know more; each client
   has a case study page. The controls come first in the carousel, so keyboard users reach Pause before the stories. */
.o2-story-logo { display: flex; align-items: center; justify-content: center; height: 112px; padding: 12px; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); }
.o2-story-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 80px; }
.o2-car-bar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 16px; }
.o2-car-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 16px;
  border: 1.5px solid var(--midnight); border-radius: 999px; background: transparent; color: var(--midnight); font: 600 0.9375rem/1 var(--sans); cursor: pointer; }
.o2-car-btn:hover { background: var(--white); }
.o2-car-btn:active { background: var(--line); }
.o2-car-btn svg { display: block; width: 18px; height: 18px; flex: none; }
.o2-car-prev, .o2-car-next { width: 44px; padding: 0; }
.o2-car-toggle .o2-car-i-play, .o2-car-toggle.is-stopped .o2-car-i-pause { display: none; }
.o2-car-toggle.is-stopped .o2-car-i-play { display: block; }
.o2-car-viewport { overflow: hidden; border-radius: var(--radius); }
.o2-car-track { list-style: none; margin: 0; padding: 0; display: flex; transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.o2-car-slide { flex: 0 0 100%; min-width: 0; }
.o2-car-card { box-sizing: border-box; display: grid; gap: 24px 56px; align-items: center; height: 100%; padding: clamp(20px, 3.2vw, 44px); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 800px) { .o2-car-card { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); } }
.o2-car-logo { height: clamp(150px, 17vw, 230px); }
.o2-car-logo img { max-width: 78%; max-height: 74%; }
.o2-car-copy { min-width: 0; }
.o2-car-copy p { margin: 0; }
.o2-car-copy .kicker { margin-bottom: 10px; }
.o2-car-copy h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
.o2-car-line { margin-top: 14px !important; font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.45; color: var(--slate); max-width: 38rem; }
.o2-car-service { margin-top: 12px !important; font-size: var(--fs-small); font-weight: 600; }
.o2-car-service a { display: inline-block; padding-block: 4px; }
.o2-car-more { margin-top: 18px !important; }
.o2-car-dots { display: flex; justify-content: center; gap: 4px; margin-top: 14px; }
.o2-car-dot { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; }
.o2-car-dot span { display: block; width: 10px; height: 10px; border: 1.5px solid var(--midnight); border-radius: 50%; }
.o2-car-dot:hover span { background: var(--line); }
.o2-car-dot[aria-current="true"] span { background: var(--midnight); }
@media (prefers-reduced-motion: reduce) { .o2-car-track { transition: none; } }
/* Case study pages */
.o2-case-figure { margin: 0; }
.o2-case-logo { height: clamp(180px, 22vw, 300px); }
.o2-case-logo img { max-width: 70%; max-height: 70%; }
.o2-case { display: grid; gap: 40px 64px; }
@media (min-width: 900px) { .o2-case { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; } }
.o2-case-aside h2 { margin-bottom: 12px; font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; line-height: 1.4; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--caption); }
.o2-case-facts { margin: 0; border-top: 1px solid var(--line); }
.o2-case-facts > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.o2-case-facts dt { font-size: var(--fs-small); color: var(--caption); }
.o2-case-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--midnight); }
.o2-case-body { min-width: 0; max-width: 48rem; }
.o2-case-part + .o2-case-part { margin-top: 52px; }
.o2-case-part h2 { margin-bottom: 14px; font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem); line-height: 1.2; }
.o2-case-part > p { font-size: 1.0625rem; line-height: 1.7; }
.o2-case-work { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0 32px; }
@media (min-width: 700px) { .o2-case-work { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.o2-case-work li { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.o2-case-work h3 { margin-bottom: 6px; font-size: 1.125rem; line-height: 1.3; }
.o2-case-work p { margin: 0; }
.o2-case-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 20px 40px; margin-top: 6px; }
.o2-case-stats .stat { max-width: 20rem; }
.o2-case-stats + .caption { margin-top: 12px; }
.o2-case-sits { padding: 22px 24px; background: var(--ivory); border-radius: var(--radius); }
.o2-case-sits p { margin: 0; }
.o2-case-sits p + p { margin-top: 10px; }
.o2-case-more-h { margin-bottom: clamp(24px, 3vw, 36px); }
.o2-case-tile .o2-story-logo { height: 96px; margin-bottom: 6px; }
.o2-case-tile .o2-story-logo img { max-height: 64px; }
.o2-case-tile .o2-tile-title { font-size: 1.375rem; }

/* About */
.o2-place { margin-top: 28px !important; padding-top: 18px; border-top: 1px solid var(--line); }
.o2-place-label { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--midnight); margin-bottom: 2px; }
.o2-commit-h { font-size: var(--fs-h3); margin-bottom: 14px; }
.o2-commit { margin: 0; border-top: 1px solid var(--line); }
.o2-commit > div { display: grid; gap: 2px 20px; padding-block: 14px; border-bottom: 1px solid var(--line); }
@media (min-width: 600px) { .o2-commit > div { grid-template-columns: 8.5rem minmax(0, 1fr); } }
.o2-commit dt { font-family: var(--serif); font-weight: 600; color: var(--midnight); }
.o2-commit dd { margin: 0; }

/* A wider conversation: Media and Foundation */
.o2-wider { display: grid; gap: 24px; }
@media (min-width: 900px) { .o2-wider { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .o2-wider.o2-wider--one { grid-template-columns: minmax(0, 1fr); max-width: 56rem; } }   /* one card while the Foundation is hidden */
.o2-wide-card { background: var(--white); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); min-width: 0; }
.o2-wide-card h3 { font-size: var(--fs-h3); }
.o2-wide-card .pill { margin-top: 12px; }
.o2-wide-tag { margin-top: 10px !important; font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); line-height: 1.4; color: var(--gold-text); }
.o2-card-text { margin-top: 14px !important; }
.o2-wide-card .caption { margin-top: 12px !important; }
.o2-card-act { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Closing band */
.o2-cta { background: var(--midnight); color: var(--on-dark); padding-block: clamp(56px, 8vw, 104px); }
.o2-cta .kicker { color: var(--gold); }
.o2-cta h2 { color: var(--white); font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.1; max-width: 21ch; }
.o2-cta-text { margin-top: 16px !important; color: var(--on-dark); font-size: var(--fs-lead); line-height: 1.5; max-width: 36rem; }
.o2-cta-inner { display: grid; gap: 28px 64px; align-items: end; }
.o2-cta-inner > * { min-width: 0; }
@media (min-width: 900px) { .o2-cta-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.o2-cta-note { margin-top: 12px !important; font-size: var(--fs-small); color: var(--on-dark-quiet); }
.o2-cta-more { margin-top: 16px !important; }
.o2-cta .text-link { color: var(--gold); }

/* Contact */
.o2-contact { display: grid; gap: 40px; }
.o2-contact > * { min-width: 0; }
@media (min-width: 960px) { .o2-contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.o2-contact .lead { margin-top: 16px; }
.o2-reach { margin: 28px 0 0; display: grid; gap: 16px; }
.o2-reach dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--caption); }
.o2-reach dd { margin: 2px 0 0; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; line-height: 1.35; color: var(--midnight); overflow-wrap: anywhere; }
.o2-reach a { display: inline-block; padding-block: 2px; color: var(--midnight); }
.o2-next { margin-top: 36px; }
.o2-next h3 { font-size: 1.25rem; margin-bottom: 16px; }
.o2-form-card { background: var(--ivory); border-radius: var(--radius); padding: clamp(22px, 3vw, 40px); }
.o2-form-card > h2, .o2-form-card > h3 { font-size: var(--fs-h3); }
.o2-form-card .error-summary h3, .o2-form-card .success h3, .o2-form-card .error-summary h4, .o2-form-card .success h4 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--midnight); margin: 0 0 8px; }
/* Send us a message: the client's HubSpot form (25 October). The launch copy shows it on request, inside .o2-hsform. */
.o2-form-lead { margin-top: 8px; }
.o2-hsform { margin-top: 24px; }
.o2-hsform-open, .o2-hsform-actions { margin: 0; }
.o2-hsform-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.o2-hsform-gate .caption { margin-top: 16px; max-width: 34rem; }
.o2-hsform-status { margin: 0 0 12px; }
.o2-form-alt { margin-top: 20px; }
.o2-next .steps h4 { font-family: var(--serif); font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--midnight); margin: 0 0 2px; }
#form-title { scroll-margin-top: 24px; }

/* Notes on what changed from the concept (preview only) */
.o2-review { padding-block: 0 56px; }
.hide-review .o2-review { display: none; }
.o2-review .rn-block ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; }

/* Footer */
.o2-footer { background: var(--ivory); border-top: 1px solid var(--line); padding-block: 48px 28px; font-size: 0.9375rem; }
.o2-footer-grid { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.o2-footer-brand { grid-column: 1 / -1; }
@media (min-width: 700px) { .o2-footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .o2-footer-grid { grid-template-columns: minmax(0, 1.55fr) repeat(5, minmax(0, 1fr)); } .o2-footer-brand { grid-column: auto; } }
.o2-footer h2 { font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--caption); margin-bottom: 6px; }
.o2-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.o2-footer li a, .o2-footer .linklike { display: inline-block; padding-block: 3px; color: var(--midnight); text-decoration: none; font-size: inherit; }
.o2-footer li a:hover, .o2-footer .linklike:hover { text-decoration: underline; }
.o2-footer-tag { margin-top: 18px !important; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; color: var(--midnight); }
.o2-footer-place { margin-top: 4px !important; color: var(--slate); }
.o2-footer-contact { margin-top: 10px !important; }
.o2-footer .o2-footer-contact a { display: inline; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.o2-legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 0.875rem; line-height: 1.5; color: var(--caption); }
.o2-legal p + p { margin-top: 0; }

/* ===== Inner pages (13 October) ===== */
.o2-two > div > h2 + p, .o2-two > div > h2 + .o2-big { margin-top: 18px; }
.o2-page [data-view] > section:first-child { scroll-margin-top: 0; }
.o2-phero { background: var(--ivory); padding-block: clamp(32px, 5vw, 72px) clamp(44px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.o2-phero-grid { display: grid; gap: 32px; align-items: center; }
.o2-phero-grid > * { min-width: 0; }
.o2-phero-copy { max-width: 46rem; }
@media (min-width: 960px) { .o2-phero-grid--media { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: clamp(48px, 5vw, 80px); } }
.o2-phero h1 { font-size: clamp(2.25rem, 1.35rem + 3.1vw, 3.625rem); line-height: 1.06; letter-spacing: -0.012em; }
.o2-phero .rule { margin: 22px 0 18px; }
.o2-phero .pill { margin: 0 0 14px; }
.o2-phero-text { margin-top: 14px !important; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; color: var(--slate); max-width: 40rem; }
.o2-phero .lead + .o2-phero-text { margin-top: 12px !important; }
.o2-phero .actions { margin-top: 24px; }
.o2-phero-icon { margin-bottom: 16px; }
.o2-phero-figure { margin: 0; max-width: 100%; }
.o2-phero-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--mist); }
.o2-phero-figure--wide img { aspect-ratio: 3 / 2; }   /* About's group photo (5 November): no one cropped out */
.o2-crumb { margin: 0 0 14px !important; }
.o2-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--midnight); font-weight: 600; text-decoration: none; }
.o2-back::before { content: "\2190"; content: "\2190" / ""; margin-right: 10px; font-weight: 400; }
.o2-back:hover { text-decoration: underline; text-underline-offset: 4px; }

.o2-sub { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--midnight); margin: 0 0 14px; }
.o2-sub--gap { margin-top: 40px; }
.o2-lede { margin-top: 18px !important; font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: var(--midnight); }
.o2-note { margin-top: 16px !important; }
.o2-for { margin-top: 22px !important; padding-top: 16px; border-top: 1px solid var(--line); }
.o2-for-label, .o2-outcome-label, .o2-scope-label, .o2-mini, .o2-toc-label { display: block; font: 600 var(--fs-label)/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--caption); margin: 0 0 6px; }
.o2-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.o2-lines li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.o2-outcome { margin-top: 28px; padding: 20px 22px; background: var(--ivory); border-left: 3px solid var(--midnight); }
.o2-outcome p:last-child { color: var(--midnight); }

/* Service directory */
.o2-directory { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.o2-dir-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 20px; align-items: center; padding: 24px 12px; border-bottom: 1px solid var(--line); color: var(--slate); text-decoration: none; }
.o2-dir-row:hover { background: var(--ivory); }
.o2-dir-row .icon-tile { width: 52px; height: 52px; }
.o2-dir-text { display: grid; gap: 4px; min-width: 0; }
@media (min-width: 900px) { .o2-dir-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: center; } .o2-dir-line { grid-column: 2; grid-row: 1 / span 3; } }
.o2-dir-for { font: 600 var(--fs-label)/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep-red); }
.o2-dir-name { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); line-height: 1.2; color: var(--midnight); }
.o2-dir-tag { font-family: var(--serif); font-style: italic; font-size: 1.125rem; color: var(--gold-text); }
.o2-dir-line { color: var(--slate); }
.o2-dir-go::after { content: "\2197"; content: "\2197" / ""; font-size: 1.25rem; color: var(--midnight); }

/* Deliverables, options and inputs on the service pages */
.o2-deliver { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 40px; }
@media (min-width: 800px) { .o2-deliver { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.o2-deliver li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 14px; padding: 22px 0; border-top: 1px solid var(--line); }
.o2-deliver-num { font: 600 1.125rem/1.4 var(--serif); color: var(--midnight); }
.o2-deliver h3 { font-size: 1.1875rem; line-height: 1.35; margin-bottom: 6px; }
.o2-deliver p { margin: 0; }
.o2-also { display: grid; gap: 28px 48px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (min-width: 800px) { .o2-also { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.o2-options { margin: 0; border-top: 1px solid var(--line); }
.o2-options > div { display: grid; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 600px) { .o2-options > div { grid-template-columns: 11.5rem minmax(0, 1fr); } }
@media (min-width: 900px) { .o2-options--wide > div { grid-template-columns: 17rem minmax(0, 1fr); } }
.o2-options dt { font-family: var(--serif); font-weight: 600; color: var(--midnight); }
.o2-options dd { margin: 0; }
.o2-addons { margin-top: 20px !important; font-size: 0.9375rem; }
.o2-start-line { margin-top: 24px !important; padding-top: 18px; border-top: 1px solid var(--line); }
.o2-start-line .o2-start-label { display: block; }
.o2-cols2 { display: grid; gap: 28px 40px; }
@media (min-width: 700px) { .o2-cols2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.o2-ai-split { margin-top: 44px; }
.o2-scope { padding: 22px 24px; background: var(--ivory); border-radius: var(--radius); max-width: 62rem; }
.section--ivory .o2-scope { background: var(--white); }
.o2-scope p + p { margin-top: 8px; }
.o2-two .o2-scope { margin-top: 32px; }
.o2-brand-row { display: grid; gap: 16px 64px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .o2-brand-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.o2-brand-row > * { min-width: 0; }
.o2-related { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 0 48px; }
.o2-cards.o2-tiers { margin-bottom: clamp(40px, 5vw, 56px); }

/* 5 November, evening: a client story without a logo file yet shows its short name as plain text; the More client stories grid
   fits four other stories (two, then four across) */
.o2-story-logo--text span { font-family: var(--serif); font-weight: 600; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); letter-spacing: 0.08em; color: #13163F; }
@media (min-width: 640px) { .o2-tiles.o2-case-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .o2-tiles.o2-case-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Five stories on the Work page: two across with the last one full width, then three across (3 + 2) */
@media (min-width: 640px) { .o2-tiles.o3-stories-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o2-tiles.o3-stories-5 > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .o2-tiles.o3-stories-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o2-tiles.o3-stories-5 > li:last-child:nth-child(odd) { grid-column: auto; } }
.o3-work-site { margin-top: 10px; }


/* ---- 5 November, 20:13 (final site) ---- */
/* Ordinal suffixes (25th, 3rd) in superscript, without loosening the line */
sup.ord { font-size: 0.62em; line-height: 0; vertical-align: 0.45em; margin-left: 0.03em; }
/* The logo collage beside Our work (rebuilt 5 November, night): white cards in a plain grid, the logos upright and never stretched
   (each image fills a fixed box and is scaled to fit inside it). The cards drift a little as the page scrolls and the pointer moves
   (--sy, --mx and --my come from COLLAGE_JS); nothing moves for visitors who reduce motion. */
.o3-logo-collage { margin: 0; min-width: 0; }
.o3-lc { list-style: none; margin: 0; padding: clamp(16px, 2.6vw, 28px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px); align-items: stretch;
  background: radial-gradient(120% 90% at 25% 15%, var(--white) 0%, var(--ivory) 55%, var(--mist) 100%);
  border: 1px solid var(--line); border-radius: var(--radius); }
.o3-lc-card { grid-column: span 2; box-sizing: border-box; display: grid; align-content: center; row-gap: 8px; min-width: 0;
  padding: 14px 12px 12px; background: #FFFFFF; border-radius: 14px; text-align: center;
  box-shadow: 0 1px 0 rgba(19, 22, 63, 0.06), 0 2px 6px rgba(19, 22, 63, 0.10), 0 14px 26px -12px rgba(19, 22, 63, 0.32);
  transform: translate3d(calc(var(--mx, 0) * var(--d, 0) * 6px),
    calc(var(--oy, 0px) + var(--sy, 0) * var(--d, 0) * 10px + var(--my, 0) * var(--d, 0) * 4px + var(--lift, 0px)), 0);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; }
.o3-lc-card--wide { grid-column: span 4; }
.o3-lc-card.is-near { box-shadow: 0 1px 0 rgba(19, 22, 63, 0.06), 0 6px 12px rgba(19, 22, 63, 0.12), 0 22px 34px -14px rgba(19, 22, 63, 0.42); }
.o3-lc-card.is-far { box-shadow: 0 1px 0 rgba(19, 22, 63, 0.05), 0 2px 5px rgba(19, 22, 63, 0.08), 0 10px 18px -10px rgba(19, 22, 63, 0.26); }
.o3-lc-logo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; }
.o3-lc-card--wide .o3-lc-logo { aspect-ratio: 3 / 1; }
.o3-lc-logo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.o3-lc-name { display: block; font: 600 0.75rem/1.25 var(--sans); letter-spacing: 0.01em; color: #3A3D52; }
.o3-lc-cap { margin-top: 10px; font-size: var(--fs-small); color: var(--caption); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .o3-lc-card:hover { --lift: -6px; } }
@media (prefers-reduced-motion: reduce) { .o3-lc-card { transform: none; transition: none; } }
@media (max-width: 959px) { .o3-logo-collage { max-width: 34rem; } }
@media (max-width: 719px) { .o3-lc-card { transform: none !important; } }   /* phones: the cards sit still, evenly spaced */
/* The client stories (home and Work): one continuous row that loops, the next story peeking in at the edge */
.o3-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.o3-strip-track { position: relative; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 6px 4px 12px; scroll-padding-inline: 4px; border-radius: var(--radius); }
.o3-strip-track::-webkit-scrollbar { display: none; }
.o3-strip-track:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.o3-strip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 20px; }
.o3-strip-list > li { scroll-snap-align: start; }
@media (min-width: 640px) { .o3-strip-list { grid-auto-columns: calc((100% - 40px) / 2.25); } }
@media (min-width: 1100px) { .o3-strip-list { grid-auto-columns: calc((100% - 60px) / 3.25); } }
.o3-strip-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.o3-strip-more { margin-top: 20px; }
.o2-tile-svc { position: relative; z-index: 1; margin: 0; font-size: var(--fs-small); font-weight: 600; }
.o2-tile-svc a { display: inline-block; padding-block: 4px; }
.o3-strip-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--midnight);
  display: inline-grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(19, 22, 63, 0.08); }
.o3-strip-btn:hover { border-color: var(--midnight); }
.o3-strip-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.o3-strip-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 639px) {
  .o3-strip { grid-template-columns: minmax(0, 1fr) auto auto; }
  .o3-strip-track { grid-column: 1 / -1; grid-row: 1; }
  .o3-strip-btn--prev { grid-column: 2; grid-row: 2; }
  .o3-strip-btn--next { grid-column: 3; grid-row: 2; } }

.o2-phases-wrap { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.o2-phases { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .o2-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .o2-phases { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.o2-phases li { background: var(--white); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 2px; }
.o2-phase-name { font-family: var(--serif); font-weight: 600; color: var(--midnight); }
.o2-phase-when { font-size: var(--fs-small); color: var(--caption); }

/* Cards and lists */
.o2-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.o2-cards > li { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; min-width: 0; }
.section--mist .o2-cards > li, .section--ivory .o2-cards > li { border-color: transparent; }
.o2-cards h3 { font-size: 1.25rem; margin-bottom: 8px; }
.o2-cards .kicker { margin-bottom: 8px; }
@media (min-width: 700px) { .o2-cards--2, .o2-cards--3, .o2-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .o2-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .o2-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.o2-link-stack { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.o2-link-stack li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.o2-inline-figure { margin: 28px 0 0; }
.o2-inline-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }

/* Branding: project tabs and the supplied visuals */
.o2-tablist { display: grid; gap: 8px; margin-bottom: 16px; }
@media (min-width: 800px) { .o2-tablist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.o2-tab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; min-height: 64px; margin: 0; padding: 14px 18px; text-align: left; background: var(--white); color: var(--midnight); border: 1px solid var(--line); border-radius: var(--radius); font: inherit; cursor: pointer; }
.o2-tab:hover { border-color: var(--midnight); }
.o2-tab[aria-selected="true"] { background: var(--midnight); border-color: var(--midnight); color: var(--white); }
.o2-tab-num { font: 600 1rem/1 var(--serif); }
.o2-tab-text { display: grid; gap: 2px; min-width: 0; }
.o2-tab-stage { font: 600 var(--fs-label)/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--caption); }
.o2-tab[aria-selected="true"] .o2-tab-stage { color: var(--on-dark-quiet); }
.o2-tab-name { font: 600 1.125rem/1.3 var(--serif); }
.o2-tabpanel { display: grid; gap: 32px; background: var(--white); border-radius: var(--radius); padding: clamp(22px, 3vw, 40px); }
.o2-tabpanel > * { min-width: 0; }
@media (min-width: 960px) { .o2-tabpanel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; } }
.o2-tab-title { font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem); line-height: 1.15; }
.o2-mini { margin: 24px 0 10px; }
.o2-tabpanel .o2-chips { margin-top: 0; }
.o2-tabpanel .o2-chips li { background: var(--ivory); border-color: transparent; }
.o2-tabpanel .actions { margin-top: 24px; }
.o2-tabs-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 18px; font-size: var(--fs-small); color: var(--caption); }
.o2-tabs-foot p { margin: 0; }
.o2-visual { margin: 0; max-width: 100%; }
.o2-visual img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 967; }
.o2-visual figcaption { margin-top: 10px; }
.o2-compare h3 { margin-bottom: 8px; }

/* Content loop */
.o2-loop { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .o2-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .o2-loop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.o2-loop li { background: var(--white); border-radius: var(--radius); padding: 22px 24px; }
.o2-loop-num { display: block; font: 600 0.9375rem/1 var(--serif); color: var(--caption); margin-bottom: 12px; }
.o2-loop h3 { font-size: 1.25rem; margin-bottom: 6px; }
.o2-loop p { margin: 0; }

/* Perspectives (formerly Insights) */
.o2-byline { margin-top: 18px !important; font-size: 0.9375rem; font-weight: 600; line-height: 1.5; color: var(--midnight); }
.o2-byline-meta { font-weight: 400; color: var(--caption); }
.o2-book { margin-top: 22px !important; }
.o2-brief { padding: 22px 26px 24px; background: var(--ivory); border-top: 3px solid var(--gold); border-radius: 0 0 var(--radius) var(--radius); }
.o2-brief .o2-mini { margin: 0 0 12px; }
.o2-brief .o2-ticks li { font-size: 1rem; line-height: 1.55; }
.o2-article-opening { margin-top: 36px; }
.o2-article-opening p, .o2-article-part li { font-size: 1.0625rem; line-height: 1.7; }
.o2-article-opening p + p, .o2-article-part p + p { margin-top: 14px; }
.o2-article-opening + .o2-article-part, .o2-pull + .o2-article-part { margin-top: 40px; }
.o2-list-lead { margin-top: 18px !important; font-weight: 600; color: var(--midnight); }
.o2-article-part .o2-ticks { margin-top: 12px; gap: 8px; }
.o2-pull { margin-top: 40px; padding-left: 24px; border-left: 3px solid var(--gold); }
.o2-pull p { margin: 0; font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.4; color: var(--midnight); }
.o2-qlist { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: q; border-top: 1px solid var(--line); }
.o2-qlist li { counter-increment: q; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 8px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.o2-qlist li::before { content: counter(q, decimal-leading-zero); content: counter(q, decimal-leading-zero) / ""; font-family: var(--serif); font-weight: 600; color: var(--midnight); }
.o2-article-part.o2-article-close { margin-top: 48px; }
.o2-tile-meta { font-size: var(--fs-small); color: var(--caption); }
@media (min-width: 900px) { .o2-tiles.o2-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; } }
.o2-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 900px) { .o2-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.o2-tile { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.o2-tile:hover { border-color: var(--midnight); }
.o2-tile:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.o2-tile .kicker { margin: 0; }
.o2-tile p { margin: 0; }
.o2-tile-title { font-size: 1.5rem; line-height: 1.2; }
.o2-tile-link { color: var(--midnight); text-decoration: none; }
.o2-tile-link:focus-visible { outline: none; }
.o2-tile-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.o2-tile-more { margin-top: auto !important; padding-top: 8px; font-weight: 600; color: var(--midnight); }
.o2-tile-more::after { content: "\2197"; content: "\2197" / ""; margin-left: 10px; font-weight: 400; }
.o2-article { display: grid; gap: 32px; }
@media (min-width: 960px) { .o2-article { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 64px; align-items: start; } }
.o2-article-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.o2-article-toc a { display: block; padding-block: 2px; color: var(--midnight); }
.o2-article-body { max-width: 42rem; }
.o2-article-part + .o2-article-part { margin-top: 40px; }
.o2-article-part h2 { font-size: var(--fs-h3); margin-bottom: 12px; }
.o2-article-part p { font-size: 1.0625rem; line-height: 1.7; }

/* Home hero from the current site (Option 1), without the service cards that overlap the foot of its hero there
   (13 October): the text sits a little above centre and the place label and pause button sit at the foot of the video */
@media (min-width: 900px) {
  .o2-page .hero--video .hero-inner { padding-block: 104px 128px; }
  .o2-page .hero--video .hero-controls { bottom: 24px; }
}

/* The missing connection and the approach card (home; 14 October, after the client's reference): the copy on the left, and on
   the right a near-square creative-planning photo with its two tags along the top and the approach card (Ivory, Gold top
   rule) over its lower left, hanging below the photo. Phones: the copy, then the photo with the card over its foot. */
.o2-gap-grid { display: grid; gap: 40px; }
.o2-gap-copy { min-width: 0; }
.o2-gap-copy h2 + .o2-big { margin-top: 18px; }
.o2-approach-frame { position: relative; min-width: 0; }
.o2-approach-figure { position: relative; margin: 0; max-width: 100%; background: var(--mist); }
.o2-approach-figure img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 60% 50%; }
.o2-approach-figure .o2-hero-tags { top: 16px; left: 16px; right: 16px; font-size: 0.8125rem; letter-spacing: 0.12em; }
.o2-approach-figure .o2-hero-tags span { padding: 7px 10px; background: var(--ivory); }
.o2-approach-frame .o2-approach { margin: -72px 12px 0; background: var(--ivory); border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: var(--radius); }
@media (min-width: 600px) { .o2-approach-frame .o2-approach { margin-inline: 24px; max-width: 30rem; } }
@media (min-width: 960px) {
  .o2-gap-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .o2-gap-copy { grid-column: 1 / 6; }
  .o2-gap .o2-approach-frame { grid-column: 7 / -1; margin-bottom: 112px; }
  .o2-approach-figure .o2-hero-tags { top: 20px; left: 20px; right: 20px; }
  .o2-approach-frame .o2-approach { box-sizing: border-box; position: absolute; left: -44px; top: auto; bottom: -112px; width: 80%;
    max-width: 30rem; margin: 0; padding: 32px 30px 8px; }
}
/* MUSE Creative Awards (13 October): a compact winner badge in Home's About section that links to the award in full on the
   About page (the seal, the category, the entry and the MUSE winner entry). The seal sits on a white tile. */
.o2-award-seal-tile { flex: none; display: block; padding: 3px; background: #FFFFFF; border-radius: 6px; line-height: 0; }
.o2-award-seal-tile img { display: block; width: 28px; height: auto; }
.o2-award-label { font-size: var(--fs-label); font-weight: 600; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); }
.o2-award-badge { display: inline-flex; align-items: center; gap: 14px; max-width: 100%; margin-top: 24px; padding: 10px 16px 10px 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); color: var(--midnight); text-decoration: none; }
.o2-award-badge:hover { border-color: var(--midnight); }
.o2-award-badge-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.o2-award-badge-title { font-size: var(--fs-small); font-weight: 600; line-height: 1.35; color: var(--midnight); }
.o2-award-arrow { flex: none; display: block; width: 18px; height: 18px; color: var(--midnight); }
.o2-award-panel { display: flex; align-items: flex-start; gap: 28px; padding: clamp(22px, 3vw, 32px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.o2-award-panel .o2-award-seal-tile img { width: 84px; }
.o2-award-panel-text { flex: 1; min-width: 0; }
.o2-award-panel-text p { margin: 0; }
.o2-award-panel .o2-award-panel-title { margin-top: 6px; font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; color: var(--midnight); }
.o2-award-facts { display: grid; margin: 18px 0 0; }
.o2-award-facts div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding-block: 10px; border-top: 1px solid var(--line); }
.o2-award-facts dt { font-size: var(--fs-small); font-weight: 600; color: var(--midnight); }
.o2-award-facts dd { margin: 0; font-size: var(--fs-small); color: var(--slate); }
.o2-award-panel .o2-award-link { margin-top: 10px; font-size: var(--fs-small); }
.o2-award-link a { display: inline-block; padding-block: 4px; }
@media (max-width: 479px) {
  .o2-award-panel { flex-direction: column; gap: 18px; }
  .o2-award-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* ---------------------------------------------------------------- Restrained motion and finish (3 November, from the client's web brief)
   The harbour video stays the one hero moment. Everything else is quiet: sections ease in once as they reach the screen,
   buttons, links and cards answer the pointer, pages cross-fade where the browser supports view transitions, and articles
   show a thin Gold reading line. Only transform and opacity move; visitors who reduce motion see none of it. FX in
   build_option2.py switches all of it off. */
.text-link::after { content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: 0.3em; }
.ext::after { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  html.fx-reveal [data-reveal] { transition: opacity 560ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 560ms cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms); }
  html.fx-reveal [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(14px); }
  .btn { transition: transform 160ms ease; }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0) scale(0.985); }
  .text-link::after, .ext::after { transition: transform 200ms ease; }
  .text-link:hover::after { transform: translateX(3px); }
  a.ext:hover::after { transform: translate(1px, -1px); }
  .o2-bento .o2-dir-row, .o2-tile { transition: transform 220ms ease; }
  .o2-bento .o2-dir-row:hover, .o2-tile:hover { transform: translateY(-2px); }
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: ease; }
}
.o2-header { view-transition-name: o2-header; }
@media print { html.fx-reveal [data-reveal] { opacity: 1 !important; transform: none !important; } .o2-sticky-cta, .o2-progress { display: none !important; } }
.o2-progress { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html.fx .o2-progress { display: block; position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 30; height: 3px;
      background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
      animation: o2-progress linear both; animation-timeline: scroll(root block); }
    @keyframes o2-progress { to { transform: scaleX(1); } }
  }
}

/* Services: the five pathways as a bento grid (3 November). The copy is unchanged; the two wider cards lead the grid. */
.o2-directory.o2-bento { display: grid; gap: 16px; border-top: 0; }
.o2-bento > li { display: flex; min-width: 0; }
@media (min-width: 700px) { .o2-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .o2-bento > li:last-child { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .o2-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } .o2-bento > li { grid-column: span 2; }
  .o2-bento > li:nth-child(-n+2) { grid-column: span 3; } .o2-bento > li:last-child { grid-column: span 2; } }
.o2-bento .o2-dir-row { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: var(--radius); background: var(--ivory); }
.o2-bento .o2-dir-row:hover { background: var(--ivory); box-shadow: inset 0 0 0 1.5px var(--midnight); }
.o2-bento .o2-dir-text { display: grid; gap: 6px; }
@media (min-width: 900px) { .o2-bento .o2-dir-text { grid-template-columns: minmax(0, 1fr); } .o2-bento .o2-dir-line { grid-column: auto; grid-row: auto; } }
.o2-bento .o2-dir-line { margin-top: 6px; }
.o2-bento .o2-dir-go { margin-top: auto; align-self: flex-end; }
.o2-bento .o2-dir-go::after { content: "\2192"; content: "\2192" / ""; display: inline-block; }   /* a page on this site, so the plain arrow */
@media (prefers-reduced-motion: no-preference) { .o2-bento .o2-dir-go::after { transition: transform 200ms ease; } .o2-bento .o2-dir-row:hover .o2-dir-go::after { transform: translateX(3px); } }

/* Phones: the booking call to action stays within reach once the visitor has scrolled past the first screen (3 November).
   It steps aside for the cookie banner, the open menu, the closing call band and the footer, and never shows on Contact. */
.o2-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(30, 34, 96, 0.08); }
.o2-sticky-cta .btn { flex: 1 1 auto; }
@media (min-width: 720px) { .o2-sticky-cta { display: none !important; } }
@media (prefers-reduced-motion: no-preference) { .o2-sticky-cta { transition: transform 240ms ease, opacity 240ms ease; }
  .o2-sticky-cta.is-off { transform: translateY(110%); opacity: 0; } }

/* Larger touch targets for lists of links on phones and tablets (3 November): at least 44 px tall. */
@media (pointer: coarse) {
  .o2-footer li a, .o2-footer li .linklike, .o2-link-stack a, .o2-footer .o2-footer-contact a, .o2-reach a, .text-link { display: inline-flex; align-items: center; min-height: 44px; }
}


/* Event and studio photos (5 November) */
.o3-gallery { display: grid; gap: 24px 20px; }
/* Two portrait photos side by side, kept to a modest width (Media's studio, 5 November) */
.o3-gallery--2p { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; }
/* A client's own words on a story page (5 November) */
.o2-case-quote { margin: 0; padding-left: 24px; border-left: 3px solid var(--gold); max-width: 44rem; }
.o2-case-quote blockquote { margin: 0; }
.o2-case-quote p { margin: 0; font-family: var(--serif); font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); line-height: 1.45; color: var(--midnight); }
.o2-case-quote p + p { margin-top: 14px; }
.o2-case-quote figcaption { margin-top: 16px; font-size: var(--fs-small); color: var(--caption); }
.o2-case-quote-name { font-weight: 600; color: var(--midnight); }
@media (min-width: 640px) { .o3-gallery--2, .o3-gallery--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .o3-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) { .o3-gallery--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .o3-gallery--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .o3-gallery--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.o3-event { margin: 0; min-width: 0; }
.o3-event img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--mist); }
.o3-event figcaption, .o3-phero-photo figcaption { margin-top: 10px; font-size: var(--fs-small); line-height: 1.45; color: var(--caption); }
.o3-event--wide { max-width: 56rem; margin-top: 32px; }
.o3-card-figure { margin: 0 0 24px; }

/* Twelve community photos, the larger TiE photos and the PSS BizVerse episodes (5 November) */
.o3-gallery--12 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
@media (min-width: 768px) { .o3-gallery--12 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; } }
@media (min-width: 1200px) { .o3-gallery--12 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.o3-gallery-stack { display: grid; gap: 28px; }
.o3-episodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px 24px; }
@media (min-width: 720px) { .o3-episodes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.o3-episode { position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; }
.o3-episode-screen { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 10px; border-radius: var(--radius);
  background: #13163F; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.o3-episode-play, .o3-piece-play { display: grid; place-items: center; border-radius: 50%; background: #D9AE52; }
.o3-episode-play { width: 68px; height: 68px; transition: transform 0.2s ease; }
.o3-episode-play svg, .o3-piece-play svg { display: block; width: 28px; height: 28px; margin-left: 4px; fill: #1E2260; }
.o3-episode-brand { position: absolute; left: 18px; bottom: 14px; font: 600 var(--fs-label)/1.4 var(--sans); letter-spacing: 0.12em;
  text-transform: uppercase; color: #E6E7F0; }
.o3-episode-date { margin: 0; font-size: var(--fs-small); color: var(--caption); }
.o3-episode-title { margin: 0; font-size: 1.375rem; line-height: 1.3; }
.o3-episode-link { color: var(--midnight); text-decoration: none; }
.o3-episode-link::after { content: ""; position: absolute; inset: 0; }
.o3-episode:hover .o3-episode-link { text-decoration: underline; text-underline-offset: 4px; }
.o3-episode:hover .o3-episode-play { transform: scale(1.06); }
.o3-episode-desc { margin: 0; color: var(--slate); }
.o3-episode-cta { margin: 4px 0 0; font-weight: 600; color: var(--blue); }
.o3-episode { grid-template-rows: auto auto auto 1fr auto; }   /* the Watch line lines up across a row (5 November) */
@media (prefers-reduced-motion: reduce) { .o3-episode-play { transition: none; } }

/* The Work page and its viewer (5 November) */
.o3-work-head { display: grid; gap: 12px 48px; margin-bottom: clamp(24px, 3vw, 36px); }
@media (min-width: 960px) { .o3-work-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; } }
.o3-work-head h2 { margin: 0; }
.o3-work-head p { margin: 0 0 8px; }
.o3-work-head p.more { margin: 0; }
.o3-pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
@media (min-width: 768px) { .o3-pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; } }
@media (min-width: 1100px) { .o3-pieces--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.o3-piece { min-width: 0; }
.o3-piece-btn { --pp: clamp(10px, 1.4vw, 18px); position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0;
  border: 0; border-radius: var(--radius); background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); cursor: zoom-in; overflow: hidden; }
/* The piece sits whole inside the tile; the shadow follows the piece, not the tile */
.o3-piece-btn img { position: absolute; top: var(--pp); left: var(--pp); width: calc(100% - 2 * var(--pp)); height: calc(100% - 2 * var(--pp));
  object-fit: contain; filter: drop-shadow(0 2px 6px rgba(30, 34, 96, 0.2)); transition: transform 0.2s ease; }
.o3-piece-btn:hover img { transform: scale(1.03); }
.o3-piece-btn[data-video] { cursor: pointer; }
.o3-piece-static { cursor: default; }
.o3-piece-static img { filter: none; width: auto; height: auto; max-width: calc(100% - 2 * var(--pp));
  max-height: calc(100% - 2 * var(--pp)); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.o3-piece-static:hover img { transform: translate(-50%, -50%); }
.o3-piece-play { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.o3-piece-title { margin: 12px 0 2px; font-weight: 600; line-height: 1.35; color: var(--midnight); }
.o3-piece-kind { margin: 0; font-size: var(--fs-small); color: var(--caption); }
.o3-sites { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 768px) { .o3-sites { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.o3-site { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: var(--card-pad); border-radius: var(--radius); background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line); border-top: 3px solid var(--gold); }
.o3-site h3 { margin: 0; font-size: 1.375rem; line-height: 1.3; }
.o3-site p { margin: 0; }
.o3-site .o3-site-link { margin-top: auto; padding-top: 8px; }
@media (min-width: 640px) { .o2-tiles.o3-stories-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .o2-tiles.o3-stories-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.o3-viewer { width: min(96vw, 1120px); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: var(--radius);
  background: var(--white); color: var(--midnight); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); }
.o3-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.o3-viewer::backdrop { background: rgba(12, 14, 40, 0.82); }
.o3-viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--line); }
.o3-viewer-count { margin: 0; font-size: var(--fs-small); color: var(--caption); font-variant-numeric: tabular-nums; }
.o3-viewer-stage { min-height: 0; overflow: auto; display: grid; place-items: center; padding: clamp(10px, 2vw, 20px); background: var(--mist); touch-action: pan-y; }
.o3-viewer-stage img, .o3-viewer-stage video { display: block; max-width: 100%; max-height: calc(94vh - 180px); width: auto; height: auto; }
.o3-viewer-stage video { background: #000000; border-radius: 4px; }
.o3-viewer-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 12px 20px 16px;
  border-top: 1px solid var(--line); }
.o3-viewer-title { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.o3-viewer-kind { margin: 2px 0 0; font-size: var(--fs-small); color: var(--caption); }
.o3-viewer-nav { display: flex; gap: 8px; }
.o3-viewer-btn { min-width: 44px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  background: var(--white); color: var(--midnight); font: 600 var(--fs-small)/1 var(--sans); cursor: pointer; }
.o3-viewer-btn:hover { border-color: var(--midnight); }
@media (prefers-reduced-motion: reduce) { .o3-piece-btn img { transition: none; } }
.rn a { color: inherit; }   /* links in review notes keep the note's colour in both modes */

/* The souvenir flip book and film tiles (5 November) */
.o3-piece-link { cursor: pointer; }
.o3-piece-badge { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: var(--radius-pill); background: #1E2260;
  color: #FFFFFF; font: 600 var(--fs-label)/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.o3-viewer.is-book { width: min(96vw, 1400px); height: 94vh; }
.o3-viewer.is-book .o3-viewer-stage { box-sizing: border-box; height: auto; min-height: 0; padding: clamp(10px, 2vw, 24px); background: #171A45; overflow: hidden; }
.o3-book { position: relative; perspective: 2600px; transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); }
.o3-leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.35, 0.6, 0.2, 1); cursor: pointer; }
.o3-leaf.is-flipped { transform: rotateY(-180deg); }
.o3-face { position: absolute; inset: 0; overflow: hidden; background: #FFFFFF; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); }
.o3-face--back { transform: rotateY(180deg); }
.o3-viewer-stage .o3-face img, .o3-viewer-stage .o3-solo img { display: block; width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; user-select: none; pointer-events: none; border-radius: 0; }
.o3-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.o3-face--front::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 7%); }
.o3-face--back::after { background: linear-gradient(270deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 7%); }
.o3-solo { display: none; position: absolute; inset: 0; background: #FFFFFF; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: opacity 0.16s ease; cursor: pointer; }
.o3-book.is-single .o3-leaf { display: none; }
.o3-book.is-single .o3-solo { display: block; }
.o3-solo.is-out { opacity: 0; }
.o3-viewer-btn:disabled { opacity: 0.4; cursor: default; }
@media (prefers-reduced-motion: reduce) { .o3-book, .o3-leaf, .o3-solo { transition: none; } }
/* ---- Type and spacing consistency pass (5 November, final site): one size per role across pages ---- */
.o2-case-part > p, .o2-article-opening p, .o2-article-part p, .o2-article-part li { font-size: 1.125rem; line-height: 1.7; }   /* body copy 18 px everywhere */
.o2-case-part h2 { font-size: var(--fs-h2); line-height: 1.16; }   /* story section headings match every other section heading */
.o2-case-work h3, .o2-deliver h3 { font-size: 1.25rem; line-height: 1.3; }   /* card and list headings 20 px, as on the other pages */
.o2-case-tile .o2-tile-title { font-size: 1.5rem; }   /* every tile title the same size */
.o2-case-part .caption { font-size: var(--fs-small); line-height: 1.6; }
.view figcaption, .view .caption { line-height: 1.6; }   /* one caption setting (some figure captions were 1.45) */
.o3-episode-title { font-size: 1.5rem; }   /* episode titles the size of every other tile title */
h2.o2-tab-title { font-size: var(--fs-h2); line-height: 1.16; }   /* the sample's heading the size of every section heading */
h3.o2-tab-title { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; }   /* panel titles one size (as the sample sheets) */
.map-figure figcaption, .o2-map figcaption { font-size: var(--fs-small); }
.page-header h1 { letter-spacing: -0.012em; line-height: 1.06; }   /* the legal pages' titles set like every other page title */

/* People band after the hero */
.o3-people-solo { max-width: 46rem; }
.o3-people-solo .o2-big { margin-top: 18px; }
.o3-people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.o3-person { display: flex; align-items: center; gap: 18px; padding: 16px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); color: var(--midnight); text-decoration: none; }
.o3-person:hover { border-color: var(--midnight); }
.o3-person::after { content: "\2192"; content: "\2192" / ""; margin-left: auto; padding-left: 12px; color: var(--midnight); }
.o3-person-photo { width: 72px; height: 72px; flex: none; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; background: var(--ivory); }
.o3-person-text { display: grid; gap: 2px; min-width: 0; }
.o3-person-name { font: 600 1.25rem/1.25 var(--serif); }
.o3-person-role { font-size: var(--fs-small); color: var(--caption); }

/* Who we help: three cards on Home */
.o3-auds { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 900px) { .o3-auds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.o3-aud { display: flex; flex-direction: column; gap: 10px; min-width: 0; background: var(--white); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 24px 24px 22px; }
.o3-aud .kicker { margin: 0; }
.o3-aud h3 { font-size: 1.5rem; line-height: 1.2; }
.o3-aud p { margin: 0; }
.o3-aud-go { margin-top: auto !important; padding-top: 8px; }
.o3-aud-more { margin-top: 24px !important; color: var(--slate); max-width: 46rem; }

/* Who we help page: five starting points (two wide, then three) */
.o3-paths { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 700px) { .o3-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } .o3-paths > li:last-child { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .o3-paths { grid-template-columns: repeat(6, minmax(0, 1fr)); } .o3-paths > li { grid-column: span 2; } .o3-paths > li:nth-child(-n+2) { grid-column: span 3; } .o3-paths > li:last-child { grid-column: span 2; } }
.o3-path { display: flex; flex-direction: column; gap: 10px; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.o3-path .kicker { margin: 6px 0 0; }
.o3-path h3 { font-size: 1.5rem; line-height: 1.2; }
.o3-path p { margin: 0; }
.o3-path-start { margin-top: auto !important; padding: 12px 14px; background: var(--ivory); border-radius: var(--radius); font-size: 0.9375rem; }
.o3-path-start strong { color: var(--midnight); }
.o3-path .o3-aud-go { margin-top: 4px !important; padding-top: 0; }

/* Illustrative sample sheets */
.o3-sheet { min-width: 0; background: var(--ivory); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
.o3-sheet-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0 0 14px; font: 600 var(--fs-label)/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--caption); }
.o3-sheet-title { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; margin-bottom: 14px; }
.o3-sheet-context { color: var(--slate); margin: 0 0 8px; }
.o3-sheet-rows { margin: 0; display: grid; }
.o3-sheet-rows > div { display: grid; gap: 4px 20px; padding: 12px 0; border-top: 1px solid var(--line); }
@media (min-width: 600px) { .o3-sheet-rows > div { grid-template-columns: 10.5rem minmax(0, 1fr); } }
.o3-sheet-rows dt { font: 600 0.9375rem/1.45 var(--sans); color: var(--gold-text); }
.o3-sheet-rows dd { margin: 0; }
.o3-sheet .o2-mini { margin: 22px 0 8px; }
.o3-sheet-foot { margin-top: 18px !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--caption); }
.o3-sample-flag { margin-top: 20px !important; padding-left: 14px; border-left: 3px solid var(--gold); font-size: 0.9375rem; color: var(--slate); max-width: 40rem; }
.o3-sample-flag--wide { margin: 0 0 28px !important; max-width: 52rem; }
.o3-phases { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.o3-phases li { padding: 14px 0; border-top: 1px solid var(--line); }
.o3-phases p { margin: 0; }
.o3-phase-when { font: 600 1.125rem/1.35 var(--serif); color: var(--midnight); margin-bottom: 4px !important; }
.o3-phase-meta { margin-top: 6px !important; font-size: var(--fs-small); color: var(--slate); }
.o3-phase-meta span { font-weight: 600; color: var(--midnight); }
.o3-table-wrap { overflow-x: auto; margin: 8px 0 4px; }
.o3-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.9375rem; }
.o3-table th, .o3-table td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.o3-table thead th { font: 600 var(--fs-label)/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--caption); }
.o3-table tbody th { font-weight: 600; color: var(--midnight); }
@media (min-width: 960px) { .o3-sample-panel { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }

/* Leadership on About */
.o3-leaders { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 900px) { .o3-leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.o3-leader { display: grid; gap: 20px 24px; align-content: start; min-width: 0; background: var(--ivory); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); }
@media (min-width: 520px) { .o3-leader { grid-template-columns: 128px minmax(0, 1fr); } }
.o3-leader-photo { width: 128px; height: 128px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; background: var(--white); }
.o3-leader-role { margin: 0 0 6px; font: 600 var(--fs-label)/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep-red); }
.o3-leader h3 { font-size: 1.625rem; line-height: 1.2; margin-bottom: 10px; }
.o3-leader-text p:last-child { margin: 0; }

/* dark:start (follows the device; the boards stay light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --white: #1E2260; --ivory: #171A4A; --mist: #171A4A; --midnight: #FFFFFF; --slate: #E6E7F0; --caption: #C3C6DD;
  --line: #3A3F7A; --blue: #D9AE52; --deep-red: #D9AE52; --gold-text: #D9AE52; --graphite: #C3C6DD;
}
  :root:not([data-theme="light"]) :is(.hero, .o2-split, .o2-cta, .map-band, .consent, .preview-bar, .logo-box, .logo-panel) {
  --white: #FFFFFF; --ivory: #F7F5F0; --mist: #F2F3F8; --midnight: #1E2260; --slate: #3A3D52; --caption: #5E6275;
  --line: #DADCE6; --blue: #2E3192; --deep-red: #B3122B; --gold-text: #8A6A1F; --graphite: #1C1E2E;
}
  :root:not([data-theme="light"]) .o2-header-inner { padding-block: 6px; }
  :root:not([data-theme="light"]) .o2-logo .brand { display: block; width: max-content; margin: 0; padding: 14px; border-radius: 8px; background: #FFFFFF; line-height: 0; }
  :root:not([data-theme="light"]) .num { color: #1E2260; }
  :root:not([data-theme="light"]) .o2-pick[aria-expanded="true"] .o2-pick-line { color: #3A3D52; }
  :root:not([data-theme="light"]) .o2-pick[aria-expanded="true"] .o2-chev { color: #1E2260; }
  :root:not([data-theme="light"]) .o2-pick[aria-expanded="true"] .icon-tile { color: #1E2260; box-shadow: inset 0 0 0 1px #DADCE6; }
  :root:not([data-theme="light"]) .o2-tab[aria-selected="true"] .o2-tab-stage { color: #5E6275; }
  :root:not([data-theme="light"]) .o2-sticky-cta { box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35); }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --white: #1E2260; --ivory: #171A4A; --mist: #171A4A; --midnight: #FFFFFF; --slate: #E6E7F0; --caption: #C3C6DD;
  --line: #3A3F7A; --blue: #D9AE52; --deep-red: #D9AE52; --gold-text: #D9AE52; --graphite: #C3C6DD;
}
:root[data-theme="dark"] :is(.hero, .o2-split, .o2-cta, .map-band, .consent, .preview-bar, .logo-box, .logo-panel) {
  --white: #FFFFFF; --ivory: #F7F5F0; --mist: #F2F3F8; --midnight: #1E2260; --slate: #3A3D52; --caption: #5E6275;
  --line: #DADCE6; --blue: #2E3192; --deep-red: #B3122B; --gold-text: #8A6A1F; --graphite: #1C1E2E;
}
:root[data-theme="dark"] .o2-header-inner { padding-block: 6px; }
:root[data-theme="dark"] .o2-logo .brand { display: block; width: max-content; margin: 0; padding: 14px; border-radius: 8px; background: #FFFFFF; line-height: 0; }
:root[data-theme="dark"] .num { color: #1E2260; }
:root[data-theme="dark"] .o2-pick[aria-expanded="true"] .o2-pick-line { color: #3A3D52; }
:root[data-theme="dark"] .o2-pick[aria-expanded="true"] .o2-chev { color: #1E2260; }
:root[data-theme="dark"] .o2-pick[aria-expanded="true"] .icon-tile { color: #1E2260; box-shadow: inset 0 0 0 1px #DADCE6; }
:root[data-theme="dark"] .o2-tab[aria-selected="true"] .o2-tab-stage { color: #5E6275; }
:root[data-theme="dark"] .o2-sticky-cta { box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35); }
/* dark:end */

/* Media (hosting package): episodes play on the page once the visitor presses play */
.o3-yt-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0;
  border-radius: inherit; background: transparent; cursor: pointer; }
.o3-yt-play:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.o3-yt-play:hover .o3-episode-play { transform: scale(1.06); }
.o3-yt.is-playing iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; border-radius: inherit; }
.o3-yt.is-playing .o3-episode-brand { display: none; }
.o3-yt-note { margin-top: 20px; }