/* ============================================================
   BURVIC — legacy design, extended for the rebuilt marketing site.
   Loaded after burvic.css + elevate.css (both untouched: the staff
   panel and portal share them). Everything here is written in the
   original design's own variables, colours and spacing:
   ink / paper / mist / cobalt / sun, Bricolage + Figtree,
   pill buttons, 16px cards, 10px inputs.
   It holds: (1) what used to be inline style="" in the legacy
   markup (CSP style-src 'self' forbids it), (2) legacy-style
   components for content the old site never had (ten service
   lines, Presence bundles, the client journey, presence-check
   results, server-rendered form errors), (3) no-JS fallbacks.
   ============================================================ */

/* ---------- 1. Shell ---------- */
main:focus { outline: none; }
.skip-link:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

/* No-JS: the burger cannot open the drawer, so the drawer shows as a plain list. */
.no-js .nav-burger { display: none; }
@media (max-width: 900px) {
  .no-js .nav-drawer { display: block; position: static; border-top: 1px solid var(--line); }
}
@media (min-width: 901px) {
  .nav-drawer { display: none !important; }
}
.nav-drawer .btn--ghost { color: var(--ink); }

/* The drawer theme row is its own class (one .theme-toggle per page for tooling);
   these are the .theme-toggle base rules it used to inherit. */
.theme-toggle--row {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  width: 100%; border: 0; border-radius: 10px; margin: 6px 0 0; padding: 13px 10px;
  background: transparent; color: var(--ink); cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 1.1rem;
  transition: background 0.18s, color 0.18s;
}
.theme-toggle--row:hover { background: var(--mist); }
.theme-toggle--row svg { width: 19px; height: 19px; flex: 0 0 19px; }
.theme-toggle--row .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle--row .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle--row .icon-moon { display: none; }

/* Nav fits seven links + login + toggle + CTA between 901 and ~1180px. */
@media (max-width: 1180px) {
  .site-head__bar { gap: 16px; }
  .site-nav a { padding: 10px 10px; font-size: 0.94rem; }
  .site-nav .btn { margin-left: 4px; }
}

/* Footer: brand + four link columns. */
.site-foot__grid--5 { grid-template-columns: 1.6fr repeat(4, 1fr); }
@media (max-width: 1100px) { .site-foot__grid--5 { grid-template-columns: 1fr 1fr 1fr; } .site-foot__grid--5 > :first-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .site-foot__grid--5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-foot__grid--5 { grid-template-columns: 1fr; } }
.site-foot__hours { font-size: 0.88rem; color: rgba(255, 255, 255, 0.66); }
.site-foot__bottom a { color: rgba(255, 255, 255, 0.78); }

/* ---------- 2. Ex-inline utilities (spacing and measure from the legacy markup) ---------- */
.u-mt-6 { margin-top: 6px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-18 { margin-top: 18px; }
.u-mt-22 { margin-top: 22px; }
.u-mt-26 { margin-top: 26px; }
.u-mt-34 { margin-top: 34px; }
.u-mt-40 { margin-top: clamp(28px, 4vw, 40px); }
.u-center-x { margin-inline: auto; }
.u-measure-h1 { max-width: 24ch; }
.u-soft { color: var(--ink-soft); }
.u-small { font-size: 0.92rem; }
.u-self-start { align-self: start; }
.u-block { display: block; }
.u-nolist { list-style: none; padding: 0; }
.u-gap-18 { display: grid; gap: 18px; }
.on-cobalt, .section--cobalt h2, .section--cobalt h3 { color: #fff; }
.on-cobalt-soft { color: rgba(255, 255, 255, 0.82); }
.section--sun .lede { color: rgba(15, 23, 51, 0.78); }
.page-hero__ctas { margin-top: 26px; }
.page-hero .hero__note { margin-top: 16px; }

/* Sun price tag used inline in a panel (legacy wrote position/transform inline). */
.price-card__tag--inline {
  position: static; display: inline-block; transform: none; margin-bottom: 14px;
  background: var(--sun); color: var(--on-sun); font-weight: 700; font-size: 0.85rem;
  padding: 5px 16px; border-radius: var(--r-pill); white-space: nowrap;
}
.panel h3.panel__title { font-size: 1.6rem; }
.price-card__amount--md { font-size: 2.2rem; margin-top: 6px; }
.panel--ink { background: var(--ink-surface); color: #fff; border-color: var(--ink-surface); }
.panel--ink h2, .panel--ink h3 { color: #fff; }
.panel--ink p { color: rgba(255, 255, 255, 0.78); }
.panel--ink a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.panel > p + p { margin-top: 10px; }

/* ---------- 3. Home ---------- */
/* Numbers band: legacy set these colours inline. Label alpha raised .75 -> .88 for 4.5:1 on cobalt. */
.numbers .stat-row strong { color: #fff; }
.numbers .stat-row span { color: rgba(255, 255, 255, 0.88); }

/* Four-up price cards ("where to start"). */
.price-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .price-grid--4 { grid-template-columns: 1fr 1fr; row-gap: 30px; } }
@media (max-width: 600px) { .price-grid--4 { grid-template-columns: 1fr; } }
.price-card__amount--sm { font-size: 1.55rem; line-height: 1.15; }
.price-card__amount--sm::first-letter { text-transform: uppercase; }
.price-card__link { color: inherit; }
.price-card__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.price-grid--4 .price-card { position: relative; transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s, border-color 0.22s; }
.price-grid--4 .price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--cobalt); }
.price-grid--4 .price-card:focus-within { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.price-grid--4 .price-card--hot:focus-within { outline-color: var(--sun); }
.price-grid--4 .price-card > p { margin-top: 12px; }
.price-card--hot .price-card__link { color: #fff; }

/* Seven-step client journey on cobalt (legacy .steps, wrapped to two rows). */
.steps--journey { grid-template-columns: repeat(4, 1fr); row-gap: clamp(28px, 4vw, 44px); }
@media (min-width: 901px) { .steps--journey .step:nth-child(4n)::after { display: none; } }
@media (max-width: 900px) { .steps--journey { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps--journey { grid-template-columns: 1fr; } }
.steps--journey a, .section--cobalt p a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; background-image: none; }
.steps--journey a:hover, .section--cobalt p a:not(.btn):hover { color: var(--sun); }
.section--cobalt .btn--ghost:not(.btn--onblue) { color: #fff; border-color: rgba(255, 255, 255, 0.6); }

/* CTA band with two buttons. */
.cta-band__actions { margin: 32px auto 0; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: none; }
.cta-band .cta-band__actions .btn { margin-top: 0; }
.btn--onsun { border-color: rgba(15, 23, 51, 0.6); color: var(--on-sun); }
.btn--onsun:hover { border-color: var(--on-sun); }
/* The rebuilt home h1 is twice the legacy length: one step smaller so it sets in four lines, not six. */
.hero__copy h1.h1--long { font-size: clamp(2.3rem, 4.5vw, 3.6rem); }

/* ---------- 4. Services hub + service pages ---------- */
.tile-grid + .svc-proof { margin-top: 26px; }
.tile--link { position: relative; display: flex; flex-direction: column; transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s, border-color 0.22s; }
.tile--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--cobalt); }
.tile--link h3 a { color: var(--ink); }
.tile--link h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.tile--link h3 a:hover { text-decoration: none; }
.tile--link:focus-within { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.tile--link h3 a:focus-visible { outline: none; }
.tile__go { margin-top: auto; padding-top: 18px; font-weight: 700; color: var(--cobalt); }
.tick-list--sm { font-size: 0.95rem; gap: 8px; margin-bottom: 4px; }
.tick-list--sm li svg { width: 18px; height: 18px; flex-basis: 18px; }
.section--mist .tile { border-color: transparent; }
.panel .price-card__amount--md + p { margin-top: 6px; }
.cmp__price { font-weight: 700; color: var(--ink); white-space: nowrap; }
.cmp caption { caption-side: top; }
.steps-wrap .steps:has(> :nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
.steps-wrap .steps:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .steps-wrap .steps:has(> :nth-child(5)), .steps-wrap .steps:has(> :nth-child(3):last-child) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps-wrap .steps:has(> :nth-child(5)), .steps-wrap .steps:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; } }

/* ---------- 5. Pricing ---------- */
.price-card__inc { font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); margin-top: 2px; }
.price-card > p.price-card__inc { margin-top: 2px; font-size: 0.92rem; }
.price-card--hot > p.price-card__inc { color: rgba(255, 255, 255, 0.9); }
.price-card--hot .btn--sun { color: var(--on-sun); }
.price-card .btn--ghost { justify-content: center; }
.cmp thead th small + small { margin-top: 0; font-weight: 500; }
.cmp tbody th a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cmp tbody th a:hover { color: var(--cobalt); }
.panel .price-note { margin-inline: auto; }
.panel .price-note + .price-note { margin-top: 12px; font-weight: 500; color: var(--ink-soft); }
.section-head .lede a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 6. Work, case studies, industries ---------- */
.work-card__sum { color: rgba(255, 255, 255, 0.82); margin-top: 10px; font-size: 0.98rem; }
.work-card__links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.work-card__links a { color: #fff; font-weight: 700; }
.work-card__links a.work-card__live { color: var(--sun); }
.work-grid .work-card h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); }
@media (min-width: 900px) { .work-grid .work-card:last-child:nth-child(odd) { grid-column: 4 / span 6; } }
.case-shot { padding-top: 0; }
.case-shot__img { width: 100%; height: auto; border-radius: var(--r-card); box-shadow: var(--shadow); }
.feature-row--top { align-items: start; }
.feature-row--top h2 + .tick-list { margin-top: 16px; }
.tile-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .tile-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tile-grid--4 { grid-template-columns: 1fr; } }
.ev-case .work-card__result { max-width: none; }

/* ---------- 7. About ---------- */
.person { display: flex; align-items: center; gap: 16px; }
.person__initials {
  width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cobalt-solid); color: var(--sun);
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
}
.person h3 { font-size: 1.3rem; }

/* ---------- 8. Forms (server-rendered errors in the legacy field style) ---------- */
.form .form-grid { margin-top: 4px; }
.field .hint--block { display: block; }
.field .field__error { color: var(--err-line); font-size: 0.9rem; font-weight: 600; display: flex; gap: 6px; align-items: baseline; margin: 0; }
.field .field__error span { font-weight: 800; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--err-line); }
.field.has-error label { color: var(--err-fg); }
.error-summary {
  margin-bottom: 22px; padding: 18px 20px; border-radius: var(--r-input);
  background: var(--err-bg); color: var(--err-fg); border-left: 5px solid var(--err-line);
}
.error-summary:focus { outline: 3px solid var(--err-line); outline-offset: 2px; }
.error-summary h2 { font-size: 1.2rem; color: var(--err-fg); }
.error-summary ul { margin-top: 8px; padding-left: 18px; display: grid; gap: 4px; }
.error-summary a { color: var(--err-fg); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background-image: none; }
.field--check { flex-direction: row; align-items: flex-start; gap: 12px; }
.field--check input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; padding: 0; accent-color: var(--cobalt); }
.field--check label { font-weight: 500; font-size: 0.97rem; }
.field--group { border: 0; padding: 0; min-width: 0; }
.field--group legend { font-weight: 700; font-size: 0.95rem; margin-bottom: 10px; padding: 0; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 18px; }
.checks .field--check { display: flex; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin-top: 18px; }
.form > .field__error { margin-top: 10px; }
.contact__aside .panel h2 { line-height: 1.05; }
.contact__aside .panel--ink p + p { margin-top: 10px; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.95em; }
.hero__note .mono { font-weight: 700; color: var(--ink); }

/* Presence check tables */
.board { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.board--static { margin-top: 14px; }
.board--static th, .board--static td { padding: 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.board--static tbody tr:last-child th, .board--static tbody tr:last-child td { border-bottom: 0; }
.board--static thead th { font-size: 0.85rem; color: var(--ink-soft); }
.board--static tbody th { font-weight: 600; padding-right: 14px; }
.board--static td { white-space: nowrap; color: var(--ink-soft); }
.board-wrap .board { min-width: 600px; }
.board-wrap .board td:last-child { color: var(--ink-soft); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.status-pill svg { flex: none; }
.status-pill--ok { background: var(--ok-bg); color: var(--ok-fg); }
.status-pill--warn { background: var(--warn-bg); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--sun-deep); }
.status-pill--fail { background: var(--err-bg); color: var(--err-fg); }
.status-pill--info { background: var(--mist-deep); color: var(--cobalt); }
.board__row--fail th { color: var(--err-fg); }

/* Support strip with two actions */
.review-strip__h { font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -0.02em; max-width: 30ch; }
.review-strip__h .dot { color: var(--sun); }
.review-strip p.review-strip__actions { display: flex; flex-wrap: wrap; gap: 12px; opacity: 1; margin-top: 0; max-width: none; }
.btn--onink { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.btn--onink:hover { border-color: #fff; }
:root[data-theme="dark"] .btn--onink { border-color: var(--line-control); color: var(--ink); }

/* ---------- 9. Articles: guides and legal pages (legacy .article, extended) ---------- */
.article h3 { font-size: 1.15rem; margin-top: 24px; }
.article ul:not(.tick-list) { margin-top: 12px; padding-left: 22px; display: grid; gap: 8px; }
.article ul:not(.tick-list) li::marker { color: var(--cobalt); }
.article li { line-height: 1.6; }
.article > :first-child { margin-top: 0; }
.article h2[id], .article h3[id] { scroll-margin-top: 96px; }
.article table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.95rem; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article .abn { font-weight: 700; }
.article--legal p, .article--legal li { color: var(--ink-soft); }
.article--legal strong, .article--legal a { color: var(--ink); }
.article--legal a { color: var(--cobalt); }
.article cite { font-style: italic; }

/* ---------- 10. Fixes found by the a11y gate ---------- */
/* burvic.js and elevate.js each add a back-to-top button in the same corner; keep elevate's. */
.to-top { display: none; }
/* Small screens: long tags and buttons wrap instead of pushing the page sideways. */
@media (max-width: 420px) {
  .price-card__tag--inline { white-space: normal; }
  .btn { white-space: normal; text-align: center; justify-content: center; max-width: 100%; }
}
.hero__note > span { min-width: 0; }
/* Error-summary links stack closely: give each a 24px target (WCAG 2.5.8). */
.error-summary li a { display: inline-block; min-height: 24px; padding-block: 2px; }

/* ---------- 11. Case-study gallery (legacy set --dc-perspective inline) ---------- */
.depth-carousel { --dc-perspective: 1400px; }

/* ---------- 12. Performance budget ---------- */
/* Legacy heroRise faded the hero copy in from opacity 0, which held the LCP (the
   lede) back ~2 s on a throttled phone. Same rise, no fade, so text paints at once. */
@keyframes heroRiseSolid { from { transform: translateY(22px); } to { transform: none; } }
.hero__copy h1, .hero__copy .lede, .hero__copy .hero__ctas { animation-name: heroRiseSolid; }
@media (prefers-reduced-motion: reduce) {
  .hero__copy h1, .hero__copy .lede, .hero__copy .hero__ctas { animation: none; }
}