/*
  ohnyx.co.nz stylesheet. Brand: orange #ED6725 on near-black #1E1C1A, Barlow (web).
  Block outlines and type labels render ONLY for signed-in editors (body.editing).
  Type floor per the fleet build standard: nothing under 14px, reading text 16px+.
  Fonts self-hosted: platform CSP is font-src 'self'. Every colour pair 4.5:1 or better.
*/
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --split: minmax(0, .82fr) minmax(0, 1.18fr);
  --orange: #ED6725;
  --orange-dark: #C9511A;   /* on white: 4.6:1 for text on orange buttons we use white on #C9511A hover */
  --ink: #1E1C1A;
  --ink-2: #2A2724;
  --paper: #FFFFFF;
  --grey-1: #F3F4F6;
  --grey-2: #E5E7EB;
  --grey-3: #9CA3AF;
  --grey-4: #4B5563;
  --stack: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --max: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Jump links land below the sticky header. */
[id] { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 300 17px/1.6 var(--stack); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 500; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(34px, 5vw, 58px); }
h1 .big { display: block; font-weight: 600; font-size: 1.25em; text-transform: uppercase; letter-spacing: 0; }
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: 21px; }
p { margin: 0 0 1em; }
.in { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.lede { font-size: 20px; max-width: 60ch; }
.lede.centre { margin: -8px auto 24px; text-align: center; }
.eyebrow { font-size: 15px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; font-weight: 500; }
.caption { font-size: 14px; color: var(--grey-4); }
.prose { max-width: 68ch; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { padding-left: 1.2em; }
.prose a { color: var(--orange-dark); }
.actions { margin-top: 24px; }

/* Buttons: 44px minimum. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 26px; border: 2px solid var(--orange); background: var(--orange); color: var(--paper); text-decoration: none; font-weight: 500; font-size: 16px; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.btn-sm { padding: 8px 16px; font-size: 14px; letter-spacing: .06em; }
.more { display: inline-block; min-height: 44px; line-height: 44px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; text-decoration: none; color: var(--orange-dark); }
.more::after { content: ' \2192'; }
.band-orange .more, .band-dark .more { color: inherit; }

/* Bands: each block picks its background; text colours follow. */
.band-white { background: var(--paper); color: var(--ink); }
.band-grey { background: var(--grey-1); color: var(--ink); }
.band-orange { background: var(--orange); color: var(--paper); }
.band-dark { background: var(--ink); color: var(--paper); }
.band-orange .eyebrow, .band-dark .eyebrow, .band-orange .caption, .band-dark .caption { color: inherit; opacity: .9; }
.band-orange .btn { background: var(--ink); border-color: var(--ink); }
.band-orange .btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.band-orange .prose a, .band-dark .prose a { color: inherit; }
.band-orange .card, .band-dark .card { color: var(--ink); }

/* Chrome */
.chrome { position: sticky; top: 0; background: var(--ink); color: var(--paper); z-index: 10; }
.chrome-in { max-width: var(--max); margin: 0 auto; padding: 0 24px; min-height: 84px; display: flex; align-items: center; gap: 28px; }
.mark img { height: 50px; width: auto; }
.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav-item { position: relative; }
.nav a { display: inline-block; padding: 10px 12px; min-height: 44px; text-decoration: none; font-size: 16px; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--orange); }
.nav-sub { display: none; position: absolute; top: 100%; left: 0; background: var(--ink-2); min-width: 240px; padding: 6px 0; }
.nav-sub a { display: block; font-weight: 400; }
.nav-item.has-children:hover .nav-sub, .nav-item.has-children:focus-within .nav-sub { display: block; } /* phones: see the media queries */
.chrome-side { display: flex; align-items: center; gap: 20px; }
.chrome-phone { color: var(--orange); font-weight: 500; font-size: 18px; text-decoration: none; white-space: nowrap; }
.chrome-remote { color: #C9CCD1; font-size: 14px; text-decoration: none; white-space: nowrap; }
.chrome-remote:hover { color: var(--paper); }
@media (max-width: 800px) { .chrome-remote { display: none; } }
.nav-toggle, .nav .nav-cta { display: none; }
/* Phones and tablets: one slim row (logo, phone, Menu); the menu opens as a panel under it. */
@media (max-width: 900px) {
  .chrome-in { min-height: 64px; gap: 16px; }
  [id] { scroll-margin-top: 72px; }
  .mark img { height: 40px; }
  .chrome-side { margin-left: auto; gap: 16px; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--paper); font: 500 16px/1 var(--stack); cursor: pointer; }
  .nav-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .2s, background-color .2s; }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; }
  .nav-open .nav-toggle-bars { background: transparent; }
  .nav-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 8px 24px 28px; background: var(--ink); max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; box-shadow: 0 24px 40px rgba(0,0,0,.35); }
  .nav-open .nav { display: flex; }
  .nav a { display: block; padding: 12px 0; font-size: 18px; }
  .nav-sub { position: static; display: block; min-width: 0; padding: 0 0 4px 16px; background: none; }
  .nav-sub a { padding-block: 8px; font-size: 16px; color: #C9CCD1; }
  .nav .nav-cta { margin-top: 16px; text-align: center; }
}
@media (max-width: 600px) {
  .chrome-in { padding-inline: 16px; gap: 12px; }
  .mark img { height: 34px; }
  .chrome-phone { font-size: 16px; }
  .chrome-cta { display: none; }
  .nav { padding-inline: 16px; }
  .nav .nav-cta { display: block; }
}

/* Blocks */
.blk { position: relative; padding: 72px 0; }
.blk + .blk.band-white, .blk + .blk.band-grey { padding-top: 64px; }

/* Hero */
.blk-hero { padding: 96px 0; }
.hero-split .in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.hero-split.no-img .in { grid-template-columns: 1fr; }
.hero-copy { max-width: 62ch; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 32px; }
.cert-badge { display: inline-block; line-height: 0; transition: transform 140ms ease; }
.cert-badge:hover { transform: translateY(-2px); }
.hero-actions .cert-badge img { height: 112px; width: auto; }
@media (max-width: 800px) { .hero-actions .cert-badge img { height: 88px; } }
.hero-img { width: 100%; }
.hero-bg { background-size: cover; background-position: center; min-height: 560px; display: flex; align-items: center; }
.hero-bg::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(30,28,26,.82) 0%, rgba(30,28,26,.55) 60%, rgba(30,28,26,.35) 100%); }
.hero-bg .in { position: relative; z-index: 1; width: 100%; }
.hero-bg h1 { font-weight: 300; }
.hero-bg .lede { color: var(--paper); }

/* Text with optional image */
.blk-text.has-img .in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.blk-text.has-img.img-left .text-copy { order: 2; }
.text-img { width: 100%; }
/* Full-bleed image: the photo fills its half of the section top to bottom and runs to the screen edge, like the What We Do rack below. No frame, no gap. */
.blk-text.img-bleed, .blk + .blk-text.img-bleed { padding: 0; overflow: hidden; }
.blk-text.img-bleed .in { gap: 0; align-items: stretch; grid-template-columns: var(--split); }
.blk-text.img-bleed .text-copy { padding: 104px 72px 104px 0; align-self: center; }
.blk-text.img-bleed.img-left .text-copy { padding: 104px 0 104px 72px; }
.blk-text.img-bleed.img-left .in { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.blk-text.img-bleed .text-img { align-self: stretch; height: 100%; min-height: 540px; object-fit: cover; object-position: 50% 62%; width: calc(100% + max(24px, (100vw - var(--max)) / 2 + 24px)); max-width: none; margin-right: calc(-1 * max(24px, (100vw - var(--max)) / 2 + 24px)); }
.blk-text.img-bleed.img-left .text-img { margin-right: 0; margin-left: calc(-1 * max(24px, (100vw - var(--max)) / 2 + 24px)); }
.blk-text.img-bleed h2 { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; margin-bottom: 20px; }
.blk-text.img-bleed .prose p { font-size: 18px; line-height: 1.65; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.blk-cards h2 { text-align: center; }
.card { background: var(--paper); border: 1px solid var(--grey-2); display: flex; flex-direction: column; }
.card-img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.card-body { padding: 24px; }
.plan .price { font-size: 32px; font-weight: 500; }
.plan .price span { font-size: 16px; font-weight: 300; color: var(--grey-4); }
.blk-cta { text-align: center; }
.blk-cta .lede { margin-inline: auto; }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 12px; }
.person .role { color: var(--grey-4); font-size: 15px; }
blockquote { margin: 0; }
.blk-quote blockquote { max-width: 60ch; font-size: 24px; font-weight: 300; }
.blk-quotes h2 { text-align: center; }
.quote { background: var(--paper); color: var(--ink); padding: 28px; border-top: 4px solid var(--orange); font-size: 16px; }
.quote footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 15px; color: var(--grey-4); }
.quote footer img { height: 36px; width: auto; }
.logo-row { display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: center; justify-content: center; }
.logo-row img { height: 40px; width: auto; }
.blk-logos h2 { text-align: center; }
details.faq { border-top: 1px solid var(--grey-2); padding: 12px 0; }
details.faq summary { cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.ph { display: flex; align-items: center; justify-content: center; background: var(--grey-1); border: 1px dashed var(--grey-3); color: var(--grey-4); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.ph-wide { aspect-ratio: 16/6; }
.ph-face { aspect-ratio: 1; }
.ph-logo { height: 40px; padding: 0 16px; }

/* Form */
.enq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; }
.enq label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 500; }
.enq .wide, .enq button, .enq .errs { grid-column: 1 / -1; }
.enq input, .enq textarea { font: inherit; padding: 10px 12px; min-height: 44px; border: 1px solid var(--grey-3); background: var(--paper); color: var(--ink); }
.enq .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq button { justify-self: start; cursor: pointer; }
.errs { color: #B91C1C; padding-left: 1.2em; }
.band-dark .errs, .band-orange .errs { color: inherit; }
.ok { font-size: 20px; }

/* Footer */
.foot { background: var(--ink); color: var(--paper); }
.foot-in { max-width: var(--max); margin: 0 auto; padding: 48px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; font-size: 15px; align-items: start; }
.foot a { color: var(--paper); }
.foot img { height: 40px; width: auto; margin-bottom: 12px; }
.foot-legal { text-align: right; }
.foot .cert-badge { display: block; width: max-content; margin-top: 16px; }
.foot .cert-badge img { height: 88px; width: auto; margin: 0; }
.foot-social { margin-top: 12px; display: flex; gap: 16px; }
.foot-built { grid-template-columns: auto repeat(auto-fit, minmax(160px, 1fr)); }
.foot-col { display: flex; flex-direction: column; gap: 6px; }
.foot-col h4 { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--grey-3); font-weight: 500; }
.foot-built .foot-legal { grid-column: 1 / -1; text-align: left; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; }
/* Built footer: a slightly deeper black than the Get in touch band so the two read as separate, quiet link columns, and a base bar for copyright and legal. */
.foot:has(.foot-built) { background: #161412; border-top: 1px solid rgba(255,255,255,.06); }
.foot-built { grid-template-columns: minmax(180px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr)); gap: 40px; padding: 64px 24px 48px; }
.foot-built .foot-logo { height: 36px; width: auto; margin: 0; }
.foot-built .cert-badge { margin-top: 24px; }
.foot-built .cert-badge img { height: 76px; }
.foot-built .foot-col { gap: 10px; }
.foot-built .foot-col h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .16em; color: var(--grey-3); font-weight: 600; }
.foot-built .foot-col a, .foot-built .foot-col span { color: #C9CCD1; text-decoration: none; font-size: 15px; line-height: 1.45; }
.foot-built .foot-col a:hover { color: var(--paper); }
.foot-base { border-top: 1px solid rgba(255,255,255,.08); }
.foot-base-in { max-width: var(--max); margin: 0 auto; padding: 20px 24px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13px; color: var(--grey-3); }
.foot-base nav { display: flex; gap: 24px; }
.foot-base a { color: var(--grey-3); text-decoration: none; }
.foot-base a:hover { color: var(--paper); }
@media (max-width: 800px) {
  .foot-built { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 48px 24px 36px; }
  .foot-built .foot-brand { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
  .foot-built .cert-badge { margin-top: 0; }
  .foot-built .cert-badge img { height: 64px; }
}
.ed-top { background: var(--orange); color: var(--paper); padding: 8px 24px; display: flex; gap: 20px; font-size: 14px; }
.ed-top a { color: var(--paper); }
.wf-draft { background: #FEF3C7; color: #B45309; padding: 8px 20px; font-size: 14px; text-align: center; }

/* Signed-in editors see the page exactly as visitors do, plus the edit bar. Block outlines and labels live only in the on-page editor below. */

/* On-page editor canvas (body.previewing, rendered by PagePreview). The editor
   bar and dashed outlines go; each block gets a toolbar and an add button drawn
   by public/js/editor.js; the block being edited gets the orange ring. */
.previewing .ed-top { display: none; }
.previewing .blk { outline: none; cursor: pointer; }
.previewing .blk::before { content: none; }
.previewing .blk:hover { outline: 1px dashed rgba(237,103,37,.6); outline-offset: -1px; }
.previewing .blk.is-active { outline: 2px solid var(--orange); outline-offset: -2px; }
.previewing [data-f]:hover { box-shadow: 0 0 0 2px rgba(237,103,37,.35); border-radius: 2px; }
.previewing .ed-tools { position: absolute; top: 8px; right: 8px; z-index: 5; display: none; align-items: center; gap: 4px; background: var(--ink); color: var(--paper); padding: 4px 6px; border-radius: 6px; font: 500 13px/1 var(--stack); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.previewing .blk:hover .ed-tools, .previewing .blk.is-active .ed-tools { display: inline-flex; }
.previewing .ed-tools-name { padding: 0 6px 0 2px; opacity: .8; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.previewing .ed-tools button { font: inherit; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--paper); cursor: pointer; }
.previewing .ed-tools button:hover { background: rgba(255,255,255,.15); }
.previewing .ed-tools button[disabled] { opacity: .35; cursor: default; }
.previewing .ed-tools button[data-act="del"]:hover { background: #B91C1C; }
.previewing .ed-add { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); z-index: 6; display: none; font: 500 13px/1 var(--stack); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--orange); background: var(--paper); color: var(--orange); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.previewing .blk:hover .ed-add, .previewing .blk.is-active .ed-add { display: inline-block; }
.previewing .ed-add:hover { background: var(--orange); color: var(--paper); }
.previewing .ed-add-first { position: static; display: inline-block; transform: none; margin: 48px auto; }
.previewing main:has(.ed-add-first) { text-align: center; }

@media (max-width: 800px) {
  .hero-split .in, .blk-text.has-img .in, .cols, .enq { grid-template-columns: 1fr; }
  .blk-text.has-img.img-left .text-copy { order: 0; }
  .blk-text.img-bleed .in { grid-template-columns: 1fr; }
  .blk-text.img-bleed .text-copy, .blk-text.img-bleed.img-left .text-copy { padding: 56px 0 48px; order: 0; }
  .blk-text.img-bleed .text-img, .blk-text.img-bleed.img-left .text-img { order: 1; width: calc(100% + 48px); margin: 0 -24px; min-height: 0; height: 64vw; max-height: 420px; }
  .blk { padding: 48px 0; }
  .blk-hero { padding: 64px 0; }
  .hero-bg { min-height: 440px; }
  .foot-legal { text-align: left; }
}

/* Display face option and dark page theme (per page, set in the admin). */
@font-face { font-family: 'Barlow Condensed'; src: url('/fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
.headings-condensed h1, .headings-condensed h2 { font-family: 'Barlow Condensed', 'Barlow', 'Arial Narrow', sans-serif; font-weight: 700; letter-spacing: 0; line-height: 0.95; }
.headings-condensed h1 { font-size: clamp(44px, 7vw, 104px); }
.headings-condensed h2 { font-size: clamp(34px, 4.2vw, 56px); }
.theme-dark { background: var(--ink); color: var(--paper); }
.theme-dark .band-white { background: var(--ink); color: var(--paper); }
.theme-dark .band-grey { background: var(--ink-2); color: var(--paper); }
.theme-dark .band-white .lede, .theme-dark .band-grey .lede, .theme-dark .band-white .caption, .theme-dark .band-grey .caption, .theme-dark .prose { color: inherit; }
.theme-dark .prose a, .theme-dark .more { color: var(--paper); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.theme-dark .card, .theme-dark .quote { background: var(--ink-2); color: var(--paper); border-color: var(--line, #3A3530); }
.theme-dark .quote footer { color: var(--muted, #A8A29B); }
.theme-dark .ph { background: var(--ink-2); border-color: #4B463F; color: #A8A29B; }
.theme-dark details.faq { border-color: #3A3530; }
.theme-dark .enq input, .theme-dark .enq textarea { background: var(--ink-2); color: var(--paper); border-color: #4B463F; }
.theme-dark .foot { border-top: 1px solid #3A3530; }
.ph-hero { aspect-ratio: 4/3; padding: 24px; text-align: center; text-transform: none; letter-spacing: 0; font-size: 15px; line-height: 1.4; }
.ph-tall { aspect-ratio: 4/5; padding: 24px; text-align: center; text-transform: none; letter-spacing: 0; font-size: 15px; line-height: 1.4; }
.ph-note { position: absolute; top: 12px; right: 16px; z-index: 1; font-size: 13px; color: #C9C3BC; max-width: 40ch; text-align: right; }
.blk-text .prose ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 14px; }
.blk-text.has-img .text-img, .blk-text.has-img .ph-tall { align-self: center; }

/* Tables inside rich text (rate schedule, IT plans). Horizontal scroll on small screens. */
.prose { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; margin: 16px 0; }
.prose th, .prose td { border: 1px solid var(--grey-2); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--grey-1); font-weight: 500; }
.theme-dark .prose th { background: var(--ink-2); }
.theme-dark .prose th, .theme-dark .prose td { border-color: #3A3530; }
.prose td:empty::after { content: ''; }
.blk-text .prose { max-width: none; }
.blk-text:not(.has-img) .prose { max-width: 78ch; }

/* Short page header for inner pages (title only over the photo). */
.hero-bg.compact { min-height: 0; padding: 72px 0; }
.hero-bg.compact h1 { font-size: clamp(36px, 4.6vw, 64px); margin: 0; }
.hero-bg.compact .lede { margin: 12px 0 0; }
/* Two columns: optional boxed right column. */
.blk-two .cols { align-items: start; }
.blk-two .col h3 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 16px; }
.blk-two .col-left > .prose > p:first-child { font-size: 22px; font-weight: 400; }
.blk-two.right-orange .col-right { background: var(--orange); color: var(--paper); padding: 56px 48px; }
.blk-two.right-dark .col-right { background: var(--ink); color: var(--paper); padding: 56px 48px; }
.blk-two.right-grey .col-right { background: var(--grey-1); padding: 56px 48px; }
.blk-two.right-orange .col-right .prose, .blk-two.right-dark .col-right .prose, .blk-two.right-orange .col-right .prose a, .blk-two.right-dark .col-right .prose a { color: inherit; }
.blk-two.right-orange .col-right h3 { color: var(--ink); text-transform: uppercase; }
/* Cards: plain columns with round icons, as on the About page. */
.cards-plain .card { background: transparent; border: 0; }
.cards-plain .card-img { width: 150px; height: 150px; aspect-ratio: 1; object-fit: contain; margin: 0 0 8px; }
.cards-plain .card-body { padding: 0; }
.cards-plain h3 { font-size: 32px; }
.band-grey .card { border-color: transparent; }
.blk-cards .card-body h3 { margin-bottom: 10px; }

/* Plan cards, as on the Managed IT page: centred head with ring, ticked features in groups. */
.blk-pricing .grid { align-items: start; }
.plan { padding: 0; }
.plan-head { text-align: center; padding: 32px 24px 20px; }
.plan-ring { display: block; width: 36px; height: 36px; margin: 0 auto 12px; border: 4px solid var(--orange); border-radius: 50%; }
.plan-head h3 { font-size: 34px; margin: 0 0 4px; }
.plan-sub { margin: 0; color: var(--grey-4); font-weight: 500; font-size: 16px; }
.plan .price { font-size: 30px; font-weight: 500; margin: 8px 0 0; }
.plan-body { padding: 8px 28px 32px; max-width: none; font-size: 16px; }
.plan-body p { margin: 0 0 14px; }
.plan-body p strong { font-weight: 600; color: var(--ink); }
.plan-body ul { list-style: none; padding: 0; margin: 0 0 14px; }
.plan-body li { position: relative; padding-left: 26px; margin: 0 0 10px; }
.plan-body li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 7px; border-left: 2.5px solid #2E9E5B; border-bottom: 2.5px solid #2E9E5B; transform: rotate(-45deg); }
.cta-link { margin: 20px 0 0; font-size: 18px; }
.cta-link a { color: var(--orange); text-decoration: none; font-weight: 500; }
.band-dark .btn { background: var(--orange); border-color: var(--orange); color: var(--paper); }

/* Centred text block with optional looping video (the Gold badge). */
.blk-text.align-center .text-copy { text-align: center; margin: 0 auto; max-width: 70ch; }
.blk-text.align-center .prose { margin: 0 auto; }
.blk-text.align-center .eyebrow { font-size: 22px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.blk-text.align-center h2 { font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); }
.text-video { display: block; width: 240px; max-width: 60%; margin: 36px auto 0; }
/* Logos, large */
.logos-large .logo-row { gap: 40px 72px; }
.logos-large .logo-row img { height: 64px; }
.logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logo-strip { display: flex; align-items: center; width: max-content; animation: logo-scroll calc(var(--n, 8) * 4s) linear infinite; }
.logo-marquee:hover .logo-strip { animation-play-state: paused; }
.logo-cell { flex: none; display: flex; align-items: center; justify-content: center; height: 104px; padding: 0 40px; }
/* Sized by Media::logoBox so every logo covers about the same area. Muted until hovered. */
.logo-cell img { display: block; width: var(--w, auto); height: var(--h, 40px); object-fit: contain; filter: grayscale(1); opacity: .75; transition: opacity 200ms ease; }
.logo-cell:hover img { opacity: 1; }
.logos-scroll { padding: 40px 0 24px; }
/* Straight after another white section the two paddings stack into a gap; take most of this one away. */
.band-white + .logos-scroll.band-white, .band-grey + .logos-scroll.band-grey { padding-top: 0; }
.logos-scroll h2 { margin: 0 0 8px; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-4); }
@media (max-width: 800px) {
  .logos-scroll { padding: 32px 0; }
  .logo-cell { height: 84px; padding: 0 24px; }
  .logo-cell img { width: calc(var(--w, 120px) * .78); height: calc(var(--h, 40px) * .78); }
}
@keyframes logo-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-strip { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .logo-cell[aria-hidden] { display: none; }
}
/* Testimonials, one at a time (design: business-docs/ohnyx-website/Testimonial Slider Carousel).
   Works without JS as a scroll-snap strip; public/js/site.js adds arrows, dots, autoplay. */
.tm { position: relative; max-width: 1240px; margin: 0 auto; }
.tm-panel { background: var(--grey-1); border: 1px solid var(--grey-2); padding: clamp(28px, 3vw, 44px) 0; overflow: hidden; }
/* Testimonials straight into the partners strip: one tight gap, not two section paddings. */
.blk-quotes:has(+ .logos-scroll) { padding-bottom: 24px; }
.tm-track { display: flex; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.tm-track::-webkit-scrollbar { display: none; }
.tm.js .tm-track { overflow: visible; scroll-snap-type: none; transition: transform 2480ms cubic-bezier(.4, .05, .2, 1); }
.tm-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(14px, 1.6vw, 20px); background: none; border: 0; padding: 0 clamp(52px, 7vw, 108px); box-sizing: border-box; margin: 0; }
.tm-slide .qtitle { margin: 0; font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.01em; text-wrap: balance; color: var(--ink); }
.tm-slide .stars { color: var(--orange); font-size: 22px; letter-spacing: 4px; margin: 0; }
.tm-quote { margin: 0; max-width: 92ch; font-size: 17px; line-height: 1.65; color: var(--grey-4); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.tm-by { margin: 0; font-weight: 700; font-style: italic; color: var(--ink); }
.tm-logo { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 216px; height: 92px; margin-top: 0; padding: 8px; text-decoration: none; transition: transform 140ms ease, opacity 140ms ease; }
a.tm-logo:hover { transform: translateY(-2px); opacity: .85; }
.tm-logo img { display: block; width: 100%; height: 76px; object-fit: contain; }
.tm-mark { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; background: var(--ink); }
.tm-mark b { font-family: 'Barlow Condensed', var(--stack); font-weight: 700; text-transform: uppercase; font-size: 28px; line-height: .95; letter-spacing: .01em; color: var(--orange); padding: 0 10px; }
.tm-mark small { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--paper); }
.tm-prev, .tm-next { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; display: none; place-items: center; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--orange); transition: color 140ms ease; }
.tm-prev svg, .tm-next svg { width: 20px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tm-qmark { width: 36px; height: 36px; fill: var(--grey-3); flex: none; }
.tm.js .tm-prev, .tm.js .tm-next { display: grid; }
.tm-prev { left: clamp(4px, 1vw, 14px); } .tm-next { right: clamp(4px, 1vw, 14px); }
.tm-prev:hover, .tm-next:hover { color: var(--orange-dark); }
.dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.dots a { width: 8px; height: 8px; border-radius: 50%; background: var(--grey-3); display: block; padding: 8px; box-sizing: content-box; background-clip: content-box; transition: background-color 180ms ease; }
.dots a:hover { background-color: var(--orange); }
.dots a.on { width: 10px; height: 10px; padding: 7px; background-color: var(--ink); }
.dots a:focus:not(:focus-visible), .tm-prev:focus:not(:focus-visible), .tm-next:focus:not(:focus-visible) { outline: 0; }
.dots a:focus-visible, .tm-prev:focus-visible, .tm-next:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.theme-dark .tm-panel { background: var(--ink-2); border-color: #3A3530; }
.theme-dark .tm-slide .qtitle, .theme-dark .tm-by { color: var(--paper); }
.theme-dark .tm-quote { color: var(--grey-3); }
@media (prefers-reduced-motion: reduce) { .tm.js .tm-track { transition: none; } }

/* ---- Carousel looks (testimonials block "look"). None of them use the grey panel. ---- */
.quotes-carousel .tm-panel { background: none; border: 0; padding: 0; }
.quotes-carousel .tm-qmark { fill: var(--orange); width: 34px; height: 34px; }
.quotes-carousel .tm-slide { gap: 14px; }
.quotes-carousel .tm-slide .qtitle { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; }
.quotes-carousel .tm-slide .stars { font-size: 15px; letter-spacing: 3px; }
.quotes-carousel .tm-quote { max-width: 60ch; font-size: clamp(17px, 1.5vw, 20px); font-weight: 300; line-height: 1.6; color: var(--ink); display: block; -webkit-line-clamp: unset; overflow: visible; }
/* Never cut a client's words short: the whole quote always shows. */
.quotes-carousel .tm-by { margin-top: 4px; font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-4); }
.quotes-carousel .tm-logo { width: 180px; height: 64px; padding: 0; margin-top: 6px; }
.quotes-carousel .tm-logo img { height: 52px; }

/* Editorial: open, a hairline above and below, arrows outside the text column. */
.look-editorial .tm { max-width: 1000px; border-top: 1px solid var(--grey-2); border-bottom: 1px solid var(--grey-2); padding: 40px 0; }
.look-editorial .tm-slide { padding: 0 64px; }
.look-editorial .tm-prev { left: 0; } .look-editorial .tm-next { right: 0; }

/* Split: section heading and arrows on the left, the quote large on the right. */
@media (min-width: 900px) {
  .look-split .in { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; column-gap: 72px; align-items: start; }
  .look-split h2 { text-align: left; margin: 0; padding-top: 6px; }
  .look-split h2::after { content: ''; display: block; width: 48px; height: 3px; margin-top: 18px; background: var(--orange); }
  .look-split .tm { max-width: none; margin: 0; padding-bottom: 72px; }
  .look-split .tm-slide { align-items: flex-start; text-align: left; padding: 0; }
  .look-split .tm-qmark { width: 48px; height: 48px; }
  .look-split .tm-quote { max-width: 58ch; font-size: clamp(19px, 1.7vw, 23px); }
  .look-split .tm-logo { justify-content: flex-start; }
  .look-split .tm-logo img { object-position: left center; }
  .look-split .tm-prev, .look-split .tm-next { top: auto; bottom: 0; transform: none; width: 48px; height: 48px; border: 1px solid var(--grey-2); border-radius: 50%; }
  .look-split .tm-prev svg, .look-split .tm-next svg { width: 10px; height: 20px; }
  .look-split .tm-prev { left: 0; } .look-split .tm-next { left: 60px; right: auto; }
  .look-split .tm-prev:hover, .look-split .tm-next:hover { border-color: var(--orange); }
}

/* Dark: near-black band, white type, client logos on small white chips so they still read. */
.blk-quotes.look-dark { background: var(--ink); }
.look-dark h2, .look-dark .tm-slide .qtitle { color: var(--paper); }
.look-dark .tm-quote { color: #E5E7EB; }
.look-dark .tm-by { color: var(--grey-3); }
.look-dark .tm { max-width: 1000px; }
.look-dark .tm-slide { padding: 0 64px; }
.look-dark .tm-prev { left: 0; } .look-dark .tm-next { right: 0; }
.look-dark .tm-logo { width: auto; height: auto; padding: 10px 18px; background: #fff; border-radius: 6px; }
.look-dark .tm-logo img { width: auto; max-width: 160px; height: 40px; }
.blk-quotes.look-dark:has(+ .logos-scroll) { padding-bottom: 72px; }
.blk-quotes.look-split:has(+ .logos-scroll) { padding-bottom: 56px; }
.blk-quotes.look-dark + .logos-scroll { padding-top: 48px; }

@media (max-width: 800px) {
  .look-editorial .tm, .look-dark .tm { padding: 28px 0; }
  .look-editorial .tm-slide, .look-dark .tm-slide, .look-split .tm-slide { padding: 0 40px; }
}
/* Contact form beside intro */
.form-two .in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.form-two .enq { max-width: none; }
.form-intro .prose p:has(strong:only-child) { font-size: 20px; }
.form-side h3 { margin-bottom: 20px; }
.blk-two .col h3 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
/* CTA rows */
.cta-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.band-grey .cta-row .btn, .band-white .cta-row .btn { background: var(--orange); border-color: var(--orange); color: var(--paper); }
@media (max-width: 800px) { .form-two .in { grid-template-columns: 1fr; } .tm-panel { padding: 28px 0; } .tm-slide { padding: 0 44px; } .tm-quote { -webkit-line-clamp: 8; } }

/* ===== What We Do rack (cards block, Services style). Agreed 2026-09-26. Built against docs/projects/ohnyx-website-rebuild/design-avoid-list.md.
   Orange block with the heading and a booking prompt beside a black panel; a glowing pulse runs down the track and each service's light
   flashes as it passes, then stays lit. Motion starts when the section is on screen (site.js); reduced motion shows the lights steadily lit. ===== */
.wwd-rack { --pulse: 3.6s; --led-off: #4A2410; --track: #3A3530; padding: 0; }
.wwd-rack .in { display: grid; grid-template-columns: var(--split); }
.wwd-rack h2 { margin: 0; text-align: left; color: var(--ink); font: 700 clamp(56px, 7vw, 104px)/.9 'Barlow Condensed', var(--stack); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.rack-side { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 88px 48px 88px 0; }
.rack-cta p { margin: 0 0 16px; font-size: 20px; font-weight: 500; color: var(--ink); }
.rack-cta .btn { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rack-cta .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.rack-panel { position: relative; background: var(--ink); padding: 88px 56px 72px 104px; margin-right: calc(-1 * max(24px, (100vw - var(--max)) / 2 + 24px)); padding-right: max(56px, calc((100vw - var(--max)) / 2 + 24px)); }
.rack-track { position: absolute; left: 56px; top: 88px; bottom: 72px; width: 4px; background: var(--track); overflow: hidden; }
.rack-pulse { position: absolute; display: block; left: 0; top: -96px; width: 4px; height: 96px; border-radius: 4px; background: linear-gradient(180deg, rgba(237,103,37,0), var(--orange) 70%, #FFD9C4); box-shadow: 0 0 16px 4px rgba(237,103,37,.85), 0 0 3px 1px #FFD9C4; }
.rack-row { position: relative; padding-bottom: 48px; max-width: 60ch; }
.rack-row:last-child { padding-bottom: 0; }
.rack-row::before { content: ''; position: absolute; left: -55px; top: 6px; width: 18px; height: 18px; background: var(--orange); box-shadow: 0 0 10px 2px rgba(237,103,37,.55); }
.rack-row h3 { margin: 0 0 10px; font-size: 26px; font-weight: 700; color: var(--paper); }
.rack-row .prose { margin: 0 0 16px; }
.rack-row .prose p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: #D6D0CA; max-width: 58ch; }
.rack-row .prose p:last-child { margin-bottom: 0; }
.rack-row a.txt { color: var(--paper); font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--orange); }
.rack-row a.txt:hover { text-decoration-color: var(--paper); }
.rack-row .cert-row { display: flex; align-items: center; gap: 16px; }
.rack-row .cert-row .cert-badge { flex: none; } .rack-row .cert-row .cert-badge img { height: 68px; width: auto; }
@media (prefers-reduced-motion: no-preference) {
  .rack-row::before { background: var(--led-off); box-shadow: none; animation: led var(--pulse) linear infinite; animation-delay: calc(var(--t) * var(--pulse)); }
  .rack-pulse { animation: rack-run var(--pulse) linear infinite; }
  .js-live .wwd-rack:not(.live) .rack-pulse, .js-live .wwd-rack:not(.live) .rack-row::before { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .rack-pulse { display: none; } }
@keyframes led {
  0% { background: #FFD9C4; box-shadow: 0 0 22px 8px rgba(237,103,37,.95), 0 0 4px 2px #fff; }
  14%, 100% { background: var(--orange); box-shadow: 0 0 10px 2px rgba(237,103,37,.55); }
}
@keyframes rack-run { from { top: -96px; } to { top: 100%; } }
@media (max-width: 900px) {
  .wwd-rack .in { grid-template-columns: 1fr; }
  .rack-side { padding: 56px 0 40px; }
  .rack-panel { margin: 0 -24px; padding: 48px 24px 48px 64px; }
  .rack-track { left: 28px; top: 48px; bottom: 48px; }
  .rack-row::before { left: -43px; }
}

/* ===== Hero, FREEDOM style: the photo as the whole background, FREEDOM set solid white across the sky ===== */
.blk.hf { position: relative; padding: 72px 0 0; overflow: hidden; background-color: var(--ink); background-size: cover; background-position: 50% 44%; min-height: 86vh; display: flex; flex-direction: column; justify-content: flex-end; }
.hf::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,28,26,.25) 0%, rgba(30,28,26,0) 30%, rgba(30,28,26,.35) 55%, rgba(30,28,26,.88) 100%); }
.hf > * { position: relative; }
/* Capped at the content column: full-bleed read as too shouty on wide screens (2026-09-27). */
.hf .hf-word { margin: 0 auto auto; padding: 2vw 0 .02em; width: 100%; max-width: var(--max); text-align: center; font: 700 min(22.6vw, 272px)/.8 'Barlow Condensed', var(--stack); letter-spacing: -.02em; color: rgba(255,255,255,.94); text-shadow: 0 2px 30px rgba(30,28,26,.18); }
.hf .hf-copy { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 88px; align-items: start; padding-block: 64px 20px; }
.hf h1 { margin: 0; font-weight: 400; font-size: clamp(36px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -.02em; color: var(--paper); text-wrap: balance; }
.hf .hf-body p { margin: 0 0 16px; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.9); max-width: 54ch; }
.hf .hf-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 24px !important; }
.hf .hf-link { color: var(--paper); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--orange); }
.hf .hf-credit { margin: 0 auto; padding-block: 8px 28px; font-size: 12px; color: rgba(255,255,255,.6); text-align: right; }
.hf .hf-credit a { color: inherit; text-decoration: none; } .hf .hf-credit a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .blk.hf { padding-top: 40px; min-height: 0; }
  .hf .hf-word { font-size: 22.4vw; margin-bottom: 42vw; }
  .hf .hf-copy { grid-template-columns: 1fr; row-gap: 18px; padding-block: 36px 12px; }
  .hf .hf-credit { text-align: left; padding-bottom: 44px; }
}

/* ===== Inner-page header (hero style band) and the About blocks: timeline, values, statement, links ===== */
.blk.ih { position: relative; padding: 0; min-height: 46vh; display: flex; align-items: flex-end; background-color: var(--ink); background-size: cover; background-position: 50% 40%; color: var(--paper); }
.ih::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,28,26,.15) 0%, rgba(30,28,26,.35) 45%, rgba(30,28,26,.85) 100%); }
.ih .ih-in { position: relative; width: 100%; padding-block: 120px 56px; }
.ih h1 { margin: 0 0 14px; font: 700 clamp(52px, 7.4vw, 104px)/.9 'Barlow Condensed', var(--stack); letter-spacing: -.01em; }
.ih .ih-lede { margin: 0; max-width: 40ch; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: rgba(255,255,255,.92); }

.ab-story .in { max-width: 980px; }
.ab-step { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); column-gap: 64px; align-items: center; padding-block: 28px; }
.ab-step p { margin: 0; font-size: 21px; line-height: 1.6; color: var(--ink); max-width: 46ch; }
.ab-step .ab-year { font: 700 clamp(64px, 8vw, 116px)/.85 'Barlow Condensed', var(--stack); color: var(--orange); letter-spacing: -.01em; }
.ab-step:nth-child(2) .ab-year { color: var(--ink); }

.blk.ab-way { padding-block: 88px; }
.ab-way-line { margin: 0; font: 700 clamp(64px, 10vw, 150px)/.85 'Barlow Condensed', var(--stack); color: var(--ink); letter-spacing: -.01em; }
.ab-way-note { margin: 18px 0 0; font-size: 19px; color: var(--ink); }

.ab-you-in { display: grid; grid-template-columns: var(--split); column-gap: 72px; align-items: start; }
.ab-you h2 { margin: 0; font-weight: 400; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.ab-you p { margin: 0 0 16px; font-size: 19px; line-height: 1.7; color: var(--grey-4); max-width: 54ch; }
.ab-cert { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.ab-cert .cert-badge img { width: 76px; height: auto; display: block; }
.ab-cert p { margin: 0; font-size: 17px; color: var(--ink); }
.ab-cert a { color: var(--orange-dark); font-weight: 500; }

.blk.ab-next { padding-block: 8px 88px; }
.ab-next-in { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.ab-go { display: block; padding: 28px 0; text-decoration: none; color: var(--ink); }
.ab-go-t { display: block; font-weight: 500; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 10px; text-decoration-color: var(--orange); }
.ab-go-s { display: block; margin-top: 14px; font-size: 17px; color: var(--grey-4); }
.ab-go:hover .ab-go-t { color: var(--orange-dark); }

.ph-slot { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, #E5E7EB 0 14px, #EDEEF1 14px 28px); color: var(--grey-4); font-size: 15px; text-align: center; padding: 16px; }
.blk.ab-team { padding: 0; }
.blk + .blk.ab-team, .blk + .blk.ab-split { padding: 0; }
.ab-team-photo { width: 100%; aspect-ratio: 16 / 6.5; }
.ab-pair-in { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, .5fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
.ab-person { margin: 0; }
.ab-portrait { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ab-person figcaption { margin-top: 12px; font-size: 16px; color: var(--grey-4); }
.ab-person strong { display: block; font-weight: 500; font-size: 19px; color: var(--ink); }
.ab-pair-copy { padding-left: 24px; }
.ab-pair-copy h2, .ab-split-copy h2 { margin: 0 0 20px; font-weight: 400; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.02em; }
.ab-pair-copy p, .ab-split-copy p { margin: 0 0 16px; font-size: 19px; line-height: 1.7; color: var(--grey-4); max-width: 52ch; }

.blk.ab-facts { padding-block: 80px; }
.ab-facts-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.1fr); grid-template-rows: auto auto; gap: 48px 56px; align-items: start; }
.ab-fact p { margin: 0; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.85); max-width: 30ch; }
.ab-fact .ab-big { font: 700 clamp(72px, 9vw, 132px)/.85 'Barlow Condensed', var(--stack); color: var(--paper); margin-bottom: 14px; max-width: none; }
.ab-fact-lead { grid-row: span 2; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.ab-fact-lead .ab-big { font-size: clamp(110px, 15vw, 220px); color: var(--orange); }
.ab-fact-cert { grid-column: 2 / span 2; display: flex; align-items: center; gap: 24px; }
.ab-fact-cert .cert-badge img { width: 88px; height: auto; display: block; }
.ab-mid { display: block; font-weight: 500; font-size: 26px; color: var(--paper); margin-bottom: 4px; }

.blk.ab-split { padding: 0; }
.ab-split-in { display: grid; grid-template-columns: var(--split); }
.ab-split-copy { padding: 88px 64px 88px max(24px, calc((100vw - var(--max)) / 2 + 24px)); }
.ab-split-way { display: flex; flex-direction: column; justify-content: center; padding: 88px 56px; }

@media (max-width: 900px) {
  .blk.ih { min-height: 0; }
  .ih .ih-in { padding-block: 96px 36px; }
  .ab-step { grid-template-columns: 1fr; row-gap: 8px; padding-block: 20px; }
  .ab-step p { font-size: 19px; }
  .blk.ab-way { padding-block: 56px; }
  .ab-you-in { grid-template-columns: 1fr; row-gap: 20px; }
  .ab-next-in { grid-template-columns: 1fr; }
  .ab-go { padding: 20px 0; }
  .ab-team-photo { aspect-ratio: 4 / 3; }
  .ab-pair-in { grid-template-columns: 1fr 1fr; gap: 20px; }
  .ab-pair-copy { grid-column: 1 / -1; padding-left: 0; }
  .ab-facts-in { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .ab-fact-lead { grid-column: 1 / -1; grid-row: auto; }
  .ab-fact-cert { grid-column: 1 / -1; }
  .ab-split-in { grid-template-columns: 1fr; }
  .ab-split-copy { padding: 56px 24px; }
  .ab-split-way { padding: 56px 24px; }
}
@media (max-width: 600px) {
  .ab-split-copy, .ab-split-way { padding-inline: 16px; }
}

.blk.ab-values { padding-block: 96px; }
.ab-values-in { display: grid; grid-template-columns: var(--split); column-gap: 72px; align-items: start; }
.ab-values h2 { margin: 0; font-weight: 400; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.02em; color: var(--paper); }
.ab-vlist { list-style: none; margin: 0; padding: 0; }
.ab-vlist li { margin: 0 0 22px; font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; color: var(--paper); }
.ab-vlist li:last-child { margin-bottom: 0; }
.ab-vlist li::first-letter { color: var(--orange); }
.blk + .blk.ab-values { padding-top: 96px; }
@media (max-width: 900px) {
  .blk.ab-values, .blk + .blk.ab-values { padding-block: 64px; }
  .ab-values-in { grid-template-columns: 1fr; row-gap: 28px; }
}
.blk.ab-way2, .blk + .blk.ab-way2 { padding: 0; }
.ab-way2-in { display: grid; grid-template-columns: var(--split); }
.ab-way2-side { display: flex; flex-direction: column; justify-content: center; padding: 96px 56px 96px max(24px, calc((100vw - var(--max)) / 2 + 24px)); }
.ab-way2-side .ab-way-line { font-size: clamp(64px, 7.6vw, 124px); }
.ab-way2-side .ab-way-note { max-width: 34ch; line-height: 1.55; }
.ab-way2-panel { display: flex; align-items: center; padding: 96px max(24px, calc((100vw - var(--max)) / 2 + 24px)) 96px 72px; }
@media (max-width: 900px) {
  .ab-way2-in { grid-template-columns: 1fr; }
  .ab-way2-side { padding: 56px 24px; }
  .ab-way2-panel { padding: 48px 24px 56px; }
}
@media (max-width: 600px) { .ab-way2-side, .ab-way2-panel { padding-inline: 16px; } }

/* ===== Our People: team hero + roster (hero style `team`, team style `roster`) ===== */
.blk.ht { padding: 0; }
.ht-photo { display: block; width: 100%; aspect-ratio: 21 / 9; max-height: 78vh; object-fit: cover; }
.ht .ht-copy { display: grid; grid-template-columns: var(--split); column-gap: 88px; align-items: end; padding-block: 88px 64px; }
.ht h1 { margin: 0; font-weight: 400; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -.02em; }
.ht p { margin: 0; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.9); max-width: 52ch; }
.ht .ht-names { margin-top: 14px; font-size: 15px; color: rgba(255,255,255,.7); }
.blk.roster { padding-block: 88px; }
.rs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 88px; }
.rs-p.has-photo { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; }
.rs-p img { width: 112px; aspect-ratio: 1; object-fit: cover; }
.rs-p h3 { font-size: 26px; margin: 0; }
.rs-p .role { color: var(--orange-dark); font-weight: 500; margin: 2px 0 10px; }
.rs-p .prose p { font-size: 17px; line-height: 1.7; }
.rs-contact { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 0; font-size: 17px; font-weight: 500; }
.rs-contact a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--orange); }
.band-dark .rs-p .role { color: var(--orange); }
@media (max-width: 900px) {
  .ht-photo { aspect-ratio: 4 / 3; }
  .ht .ht-copy { grid-template-columns: 1fr; row-gap: 18px; padding-block: 48px 44px; }
  .blk.roster { padding-block: 56px; }
  .rs-grid { grid-template-columns: 1fr; gap: 48px; }
  .rs-p.has-photo { grid-template-columns: 88px minmax(0, 1fr); gap: 18px; }
  .rs-p img { width: 88px; }
}
.ab-vlist-big li { margin-bottom: 28px; font: 700 clamp(48px, 5.4vw, 84px)/.95 'Barlow Condensed', var(--stack); letter-spacing: -.01em; }
.ab-vlist-big li::first-letter { color: inherit; }
.ab-vlist-big li span { display: block; margin-top: 10px; font: 300 18px/1.5 var(--stack); letter-spacing: 0; color: rgba(255,255,255,.75); }

/* The values line types itself out (site.js adds .typing, then .typed); a block caret blinks after it. */
.ab-way2-side .ab-way-note { margin-top: 28px; }
.ab-way-line .tc { visibility: hidden; }
.ab-way-line .tc.on .caret, .ab-way-line .caret { visibility: visible; }
.ab-way-line .tc.on { visibility: visible; }
.ab-way-line .caret { display: inline-block; width: .42em; height: .78em; margin-left: .06em; vertical-align: -.02em; background: var(--ink); }
.ab-way-line.typing .caret { animation: none; }
.ab-way-line.typed .caret { animation: caret-blink 1.1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ab-way-line.typed .caret { animation: none; } }
.ab-way-line .tc:has(.caret) { white-space: nowrap; }
@media (max-width: 600px) { .ab-way2-side .ab-way-line { font-size: 14.2vw; } }

/* ===== Desktop dropdowns: an arrow beside the item, a white panel hanging from the header,
   the parent page first, and a short line under each page. ===== */
@media (min-width: 901px) {
  .chrome .nav { align-self: stretch; flex-wrap: nowrap; }
  .chrome .nav-item { display: flex; align-items: center; }
  .nav-item.has-children > a { padding-right: 2px; }
  .nav-caret { width: 28px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .nav-caret::before { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); translate: 0 -2px; transition: transform .18s, translate .18s; }
  .nav-item:hover .nav-caret::before, .nav-item.open .nav-caret::before { transform: rotate(225deg); translate: 0 2px; color: var(--orange); }
  .nav-caret:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
  .chrome .nav-sub { display: block; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility 0s .16s; top: 100%; left: -8px; min-width: 300px; padding: 10px; background: var(--paper); box-shadow: 0 18px 40px rgba(0,0,0,.22); }
  .chrome .nav-item:hover .nav-sub, .chrome .nav-item.open .nav-sub { visibility: visible; opacity: 1; transform: none; transition: opacity .16s, transform .16s; }
  .chrome .nav-sub a { display: block; padding: 12px 14px; color: var(--ink); min-height: 0; }
  .chrome .nav-sub a b { display: block; font-weight: 500; font-size: 17px; }
  .chrome .nav-sub a span { display: block; margin-top: 2px; font-size: 14px; font-weight: 300; color: var(--grey-4); }
  .chrome .nav-sub a:hover, .chrome .nav-sub a[aria-current="page"] { background: var(--grey-1); }
  .chrome .nav-sub a:hover b, .chrome .nav-sub a[aria-current="page"] b { color: var(--orange-dark); }
}
/* Phones: the arrow buttons aren't needed, every page is already listed in the open menu. */
@media (max-width: 900px) {
  .nav-caret { display: none; }
  .nav-sub a b { font-weight: inherit; }
  .nav-sub a span { display: none; }
  .nav-sub .nav-sub-parent { display: none; }
}

/* Footer brand: badge centred under the logo (desktop); side by side on phones as before. */
.foot-built .foot-brand { display: flex; flex-direction: column; align-items: center; width: max-content; }
.foot-built .foot-brand .cert-badge { margin-top: 28px; }
@media (max-width: 800px) {
  .foot-built .foot-brand { flex-direction: row; width: auto; }
  .foot-built .foot-brand .cert-badge { margin-top: 0; }
}

/* ===== Comparison table (block `compare`): dark by default, third column highlighted orange ===== */
.blk.blk-compare { padding-block: 72px 88px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp-note { margin: 0 0 28px; font-size: 18px; opacity: .8; }
.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 17px; }
.cmp th:first-child, .cmp td:first-child { width: 46%; }
.cmp thead th { position: sticky; top: 84px; z-index: 1; padding: 18px 12px; text-align: center; font: 700 26px/1 'Barlow Condensed', var(--stack); background: var(--ink-2); color: var(--paper); }
.cmp thead th:first-child { background: transparent; }
.cmp thead th.hi { background: var(--orange); color: var(--ink); }
.cmp .cmp-grp { padding: 36px 12px 10px; text-align: left; font-size: 20px; font-weight: 600; }
.cmp td { padding: 12px; text-align: center; }
.cmp td:first-child { text-align: left; }
.cmp tbody tr:nth-child(even) td { background: rgba(255,255,255,.05); }
.cmp td.hi { background: rgba(237,103,37,.16) !important; }
.cmp-tick { color: var(--orange); font-weight: 700; font-size: 20px; }
.band-white .cmp thead th:not(.hi):not(:first-child), .band-grey .cmp thead th:not(.hi):not(:first-child) { background: var(--ink); }
.band-white .cmp tbody tr:nth-child(even) td, .band-grey .cmp tbody tr:nth-child(even) td { background: var(--grey-1); }
.band-white .cmp-tick, .band-grey .cmp-tick { color: var(--orange-dark); }
.cmp-stack { display: none; }
.cmp-plan { padding: 32px 0; }
.cmp-plan + .cmp-plan { margin-top: 8px; }
.cmp-plan h3 { margin: 0 0 12px; font: 700 40px/1 'Barlow Condensed', var(--stack); }
.cmp-plan.hi h3 { color: var(--orange); }
.cmp-lead { margin: 0 0 12px; font-weight: 600; }
.cmp-plan h4 { margin: 18px 0 6px; font-size: 17px; font-weight: 600; }
.cmp-plan ul { list-style: none; margin: 0; padding: 0; }
.cmp-plan li { padding: 4px 0; font-size: 17px; line-height: 1.5; opacity: .9; }
@media (max-width: 900px) {
  .blk.blk-compare { padding-block: 40px 56px; }
  .cmp { display: none; }
  .cmp-stack { display: block; }
}
/* Closing band on orange: dark text and link, so both read against the orange. */
.blk-cta.band-orange { color: var(--ink); }
.blk-cta.band-orange .cta-link a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ===== Contact page: contact strip, offices with maps, standalone form ===== */
.blk.blk-cstrip { padding-block: 56px; }
.blk-cstrip .in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.cs-num { display: inline-block; white-space: nowrap; font: 700 clamp(56px, 6vw, 92px)/.9 'Barlow Condensed', var(--stack); letter-spacing: -.01em; text-decoration: none; color: var(--orange); }
.cs-hours { margin: 12px 0 0; font-size: 20px; line-height: 1.5; opacity: .88; }
.cs-mail p { margin: 0 0 18px; font-size: 20px; line-height: 1.5; }
.cs-mail p:last-child { margin-bottom: 0; }
.cs-mail span { display: block; }
.cs-mail a, .of-dir { font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--orange); }
.blk.blk-offices { padding-block: 80px; }
.blk-offices .in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.of { display: flex; flex-direction: column; }
.of h2 { margin: 0 0 12px; font: 700 clamp(44px, 4.6vw, 64px)/.95 'Barlow Condensed', var(--stack); }
.of p { margin: 0 0 4px; font-size: 19px; }
.of .of-post { margin-top: 10px; color: var(--grey-4); font-size: 17px; }
.of-dir { align-self: flex-start; margin: 16px 0 24px; }
.of-map { display: block; width: 100%; aspect-ratio: 3 / 2; margin-top: auto; border: 1px solid var(--grey-2); background: var(--grey-2); }
.blk-form:not(.form-two) .form-side h3 { margin: 0 0 22px; font: 700 clamp(32px, 3vw, 42px)/1 'Barlow Condensed', var(--stack); }
@media (max-width: 900px) {
  .blk.blk-cstrip { padding-block: 44px; }
  .blk-cstrip .in, .blk-offices .in { grid-template-columns: 1fr; gap: 28px; }
  .cs-hours, .cs-mail p { font-size: 18px; }
  .blk.blk-offices { padding-block: 48px; }
  .of-map { aspect-ratio: 16 / 9; }
  .blk-offices .in { gap: 48px; }
}
/* Shorter header band when the contact strip follows it, so the phone number sits in the first screen. */
.blk.ih:has(+ .blk-cstrip) { min-height: 30vh; }
.blk.ih:has(+ .blk-cstrip) .ih-in { padding-block: 72px 36px; }
@media (max-width: 900px) { .blk.ih:has(+ .blk-cstrip) { min-height: 0; } .blk.ih:has(+ .blk-cstrip) .ih-in { padding-block: 56px 28px; } }
/* Comparison table on phones: each plan its own solid panel, Prime on orange; the "to its right" note only makes sense beside the table. */
@media (max-width: 900px) {
  .blk-compare .cmp-note { display: none; }
  .cmp-plan { padding: 28px 24px 32px; margin: 0 -24px; background: rgba(255,255,255,.05); }
  .cmp-plan + .cmp-plan { margin-top: 16px; }
  .cmp-plan.hi { background: var(--orange); color: var(--ink); }
  .cmp-plan.hi h3 { color: var(--ink); }
  .cmp-plan.hi li { opacity: 1; }
  .band-white .cmp-plan, .band-grey .cmp-plan { background: var(--grey-1); }
  .band-white .cmp-plan.hi, .band-grey .cmp-plan.hi { background: var(--orange); }
}