/* Adamant Tech brand v1.0 (30 Sep 2026): navy #0B2545, Adamant Blue #3378EE,
   granite white #F3F3F0. Archivo ExtraBold for headings, IBM Plex Sans for text.
   Fonts are self-hosted (no third-party requests: the privacy page promises none).
   Rules from the guidelines: one blue, no grey text, blue only for buttons,
   accents and large type; small text stays navy. */

@font-face { font-family: 'Archivo'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('images/fonts/archivo-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('images/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('images/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }

:root:root {
  --font-display: 'Archivo', 'Arial Black', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --heading-weight: 800;
  --heading-spacing: -0.01em;
  --brand-navy: #0B2545;
  --brand-blue: #3378EE;
  --brand-granite: #F3F3F0;
}

/* Header: primary logo on the left, links on the right.
   !important because the header's scoped rules carry Astro's attribute selectors
   and would otherwise win on specificity. */
header div.container.nav.has-logo { grid-template-columns: auto 1fr !important; padding-block: 0.75rem !important; }
header div.container.nav.has-logo a.logo { grid-column: 1 !important; width: auto !important; justify-content: flex-start !important; }
header div.container.nav.has-logo a.logo img { width: auto !important; height: 4.25rem !important; max-width: none !important; }
header div.container.nav.has-logo nav.links,
header div.container.nav.has-logo details.menu { grid-column: 2 !important; justify-self: end !important; }
header div.container.nav.has-logo nav.links a { font-weight: 600; }

/* Header: the logo (cropped to its navy bar) spans both rows. ADAMANT sits beside the
   tab row and TECH beside the navy service bar, with the logo's middle line on the
   boundary. The open tab moves next to the logo and is solid navy, touching the
   logo's bar, so tab, bar and service bar read as one shape. Other tabs follow;
   About and Contact sit at the far right. The Home link stays in the mobile menu only. */
header { --logo-h: 8rem; --row-h: 4rem; --logo-w: calc(var(--logo-h) * 113 / 70); }
header div.container.nav.has-logo { padding-block: 0 !important; column-gap: 0 !important; }
header div.container.nav.has-logo a.logo img { height: var(--logo-h) !important; display: block; }
header div.container.nav.has-logo a.logo { width: var(--logo-w) !important; flex-shrink: 0; }
header div.container.nav.has-logo nav.links {
  justify-self: stretch !important; align-self: stretch; align-items: stretch; gap: 0.35rem !important;
}
header div.container.nav.has-logo nav.links a { display: flex; align-items: center; }
header div.container.nav.has-logo nav.links a:first-child { display: none; }
header div.container.nav.has-logo nav.links :is(a[href='/personal-home'],a[href='/small-business'],a[href='/enterprise'],a[href='/contact']) {
  font-size: 1.05rem; color: var(--brand-navy) !important; padding: 0 1rem; text-decoration: none;
}
header div.container.nav.has-logo nav.links :is(a[href='/personal-home'],a[href='/small-business'],a[href='/enterprise'],a[href='/contact']):hover { background: color-mix(in srgb, var(--brand-navy) 8%, transparent); }
header div.container.nav.has-logo nav.links :is(a[href='/personal-home'],a[href='/small-business'],a[href='/enterprise'],a[href='/contact'])[aria-current] {
  background: var(--brand-navy); color: var(--brand-granite) !important;
}
header div.container.nav.has-logo nav.links a:last-child { margin-left: auto; }

/* Inside a section the tab row is half the logo's height; the logo hangs down beside
   the service bar, whose navy starts at the logo's right edge. */
@media all {
  header div.container.nav.has-logo { height: var(--row-h); }
  header div.container.nav.has-logo a.logo {
    align-self: start; align-items: flex-start; height: var(--row-h); position: relative; z-index: 2;
  }
  header:not(:has(nav.subnav))::after {
    content: ''; display: block; height: calc(var(--logo-h) - var(--row-h));
    background: linear-gradient(90deg, var(--brand-granite) calc(max(0px, (100% - var(--max-width)) / 2) + 1.25rem + var(--logo-w) - 1px), var(--brand-navy) 0);
  }
  header:has(nav.subnav) nav.subnav {
    background: linear-gradient(90deg,
      var(--brand-granite) calc(max(0px, (100% - var(--max-width)) / 2) + 1.25rem + var(--logo-w) - 1px),
      var(--brand-navy) 0) !important;
  }
  header:has(nav.subnav) nav.subnav .container {
    min-height: calc(var(--logo-h) - var(--row-h));
    padding-left: calc(1.25rem + var(--logo-w) + 1rem); align-items: center; gap: 1.1rem;
  }
}
/* the logo and both bars keep the same height at every width; only the top bar's contents change */

/* About / Contact when open: navy with a blue underline (blue text is too faint at this size) */
header div.container.nav.has-logo nav.links a:not(:is(a[href='/personal-home'],a[href='/small-business'],a[href='/enterprise'],a[href='/contact']))[aria-current],
header div.container.nav.has-logo details.menu nav a[aria-current] {
  color: var(--brand-navy) !important;
  text-decoration: underline;
  text-decoration-color: var(--brand-blue);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.4rem;
}
header div.container.nav.has-logo details.menu { align-self: center; }

/* Service bar under the open tab: navy, granite names, current one in Adamant Blue */
header nav.subnav { background: var(--brand-navy) !important; border-top: 0; }
header nav.subnav a { color: var(--brand-granite) !important; font-family: var(--font-body); font-size: 0.92rem !important; }
header nav.subnav a[aria-current] {
  color: var(--brand-blue) !important; border-bottom: 2px solid var(--brand-blue) !important; font-weight: 400;
}

/* Buttons: blue, with text large enough to read on the blue */
main .btn, main #cta .btn { font-size: 1.2rem; font-weight: 700; }
main .btn-primary:hover { background: var(--brand-navy); }
main .btn-outline { color: var(--brand-navy); border-color: var(--brand-navy); }
main .btn-outline:hover { background: var(--brand-navy); color: var(--brand-granite); }

/* Links in running text: navy, underlined in blue */
main a:not(.btn) {
  color: var(--brand-navy) !important;
  text-decoration: underline;
  text-decoration-color: var(--brand-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
main a:not(.btn):hover { text-decoration-color: var(--brand-navy); }

/* Hero: navy, as in the guidelines' website mock-up */
main section.hero.hero { background: var(--brand-navy); color: var(--brand-granite); }
main section.hero h1 { color: var(--brand-granite); }
main section.hero p { color: var(--brand-granite); }
main section.hero .btn-primary { background: var(--brand-blue); color: var(--brand-granite); }
main section.hero .btn-primary:hover { background: var(--brand-granite); color: var(--brand-navy); }
main section.hero .btn-outline { color: var(--brand-granite); border-color: var(--brand-granite); }
main section.hero .btn-outline:hover { background: var(--brand-granite); color: var(--brand-navy); }

/* Stats band: navy with blue figures (large type only) */
main section.stats.stats { background: var(--brand-navy); color: var(--brand-granite); }
main section.stats .value { color: var(--brand-blue); }
main section.stats .label { opacity: 1; }

/* Closing call to action: navy, blue button */
main section#cta { background: var(--brand-navy); color: var(--brand-granite); }
main section#cta p { opacity: 1; }
main section#cta .btn { background: var(--brand-blue); color: var(--brand-granite); }
main section#cta .btn:hover { background: var(--brand-granite); color: var(--brand-navy); }

/* Footer: no grey text */
footer .notices, footer .badge img { opacity: 1; }
footer a { color: var(--brand-navy); }

/* Four-step process on the home page: one row on wide screens */
@media (min-width: 70rem) {
  main section#features div.grid { grid-template-columns: repeat(4, 1fr); }
}

/* The open tab already links to the section overview, so the bar lists services only */
header nav.subnav .container a:first-child { display: none; }


/* ---- v2: the services bar. A script moves it into the header, under the tabs, as the navy service bar ---- */
nav.service-row { background: var(--brand-navy); position: relative; font-size: 0.95rem; }
nav.service-row .container { display: flex; align-items: center; gap: 1rem; overflow: visible !important; }
nav.service-row .sr-items { display: flex; flex-wrap: nowrap; gap: 1.4rem; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; align-items: center; }
nav.service-row a:not(.btn) { color: var(--brand-granite) !important; font-weight: 400; text-decoration: none; border-bottom: 2px solid transparent; }
nav.service-row a:not(.btn):hover { border-bottom-color: var(--brand-granite); }
nav.service-row strong { color: #fff; font-weight: 400; font-size: inherit; white-space: nowrap; border-bottom: 2px solid var(--brand-blue); }
nav.service-row .sr-more { flex: none; }
nav.service-row .sr-more summary { cursor: pointer; list-style: none; font-size: 1.4rem; line-height: 1; color: var(--brand-granite); padding: 0 0.25rem; }
nav.service-row .sr-more summary::-webkit-details-marker { display: none; }
nav.service-row .sr-panel { position: absolute; right: 0; top: 100%; z-index: 30; display: flex; flex-direction: column; gap: 0.7rem; background: var(--brand-navy); border-radius: 0 0 4px 4px; padding: 0.9rem 1.2rem; box-shadow: 0 8px 20px rgba(11,37,69,.25); min-width: 13rem; }
/* un-moved fallback (no script) */
main nav.service-row { padding: 0.7rem 1.1rem; margin-bottom: 1.5rem; border-radius: 4px; }
/* the live rule that hides a service bar's first link must not apply to this bar */
header nav.service-row .sr-items a:first-child { display: inline !important; }

/* ---- landing cards: graphic + blurb ---- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
main a.svc-card:not(.btn) { display: block; text-decoration: none !important; color: var(--brand-navy) !important; border: 1px solid #D5DCE8; border-radius: 6px; overflow: hidden; background: #fff; transition: border-color .15s, transform .15s; }
main a.svc-card:hover { border-color: var(--brand-blue); transform: translateY(-2px); }
.svc-card img { display: block; width: 100%; height: auto; }
.svc-card h3 { margin: 0.9rem 1rem 0.3rem; font-size: 1.1rem; }
.svc-card p { margin: 0 1rem 1.1rem; font-size: 0.93rem; line-height: 1.45; }

/* ---- footer: one line of name, links and contact; then copyright; then small print ---- */
footer .container { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; row-gap: 0.25rem; }
footer .container > p:first-child { order: 1; margin: 0; }
footer .container > p:first-child::after { content: ' -'; font-weight: 400; }
footer .container > nav { order: 2; margin: 0; gap: 0; }
footer .container > nav a + a::before, footer .container > nav a:first-child::before { content: none; }
footer .container > nav a + a::before { content: '|'; margin: 0 0.75rem; color: var(--brand-navy); }
footer .container > p.contact { order: 3; margin: 0; }
footer .container > p.contact::before { content: '|'; margin-right: 0.75rem; }
footer .container > p.contact br { display: none; }
footer .container > p:not(.contact):not(:first-child) { order: 4; flex-basis: 100%; margin: 0.35rem 0 0; }
footer .container > .smallprint { order: 5; flex-basis: 100%; }
footer .contact { display: block !important; }

/* footer: the copyright / registration / POPIA line is small print */
footer .container > p:not(.contact):not(:first-child) { font-size: 0.75rem; line-height: 1.5; }
footer .container > p:empty { display: none; }
/* navy band and hero meet with no white line */
header { border-bottom: 0 !important; }

/* contact bar: label + value */
nav.service-row .sr-items > span { color: var(--brand-granite); font-size: 0.95rem; }
nav.service-row .sr-items > span em { font-style: normal; opacity: .7; margin-right: .4rem; }


/* ---- v2.1 header ----
   Selected and unselected items are the same size and weight, so nothing shifts when one is selected.
   Tab text sits on the logo's ADAMANT line (centre 2.76rem down) and service-bar text on its TECH line
   (centre 1.27rem below the bar's top). The selected Contact tab is Adamant Blue and runs to the screen's edge. */
header { overflow-x: clip; }
@media all {
  header div.container.nav.has-logo nav.links a { padding-top: 1.5rem !important; box-sizing: border-box; }
  header:has(nav.subnav) nav.subnav .container { align-items: flex-start; padding-top: 0.57rem; }
  nav.service-row .sr-items a, nav.service-row .sr-items strong, nav.service-row .sr-items span { line-height: 1.4rem; }
  nav.service-row .sr-more summary { line-height: 1.4rem; }
}
/* "Consulting" divider inside the services bar */
nav.service-row .sr-items > .sr-sep { color: var(--brand-granite); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; padding-left: 1.4rem; border-left: 1px solid rgba(243,243,240,.35); }
nav.service-row .sr-panel .sr-sep { border-left: 0; padding-left: 0; margin-top: 0.3rem; }


/* ---- v2.2 quick-contact icons: WhatsApp, phone, e-mail, in the tab row, to the right of Contact ---- */
header div.container.nav.has-logo { grid-template-columns: auto 1fr auto !important; }
header .nav .quick { grid-column: 3; grid-row: 1; align-self: start; margin-top: 1.9rem; margin-left: 0.6rem; position: relative; z-index: 3; }
header .nav .quick a { color: var(--brand-navy); }
header .nav .quick a:hover { color: var(--brand-blue); background: color-mix(in srgb, var(--brand-navy) 8%, transparent); }
@media (max-width: 900px) {
  header .nav .quick { grid-column: 2; align-self: start; justify-self: end; margin: 1.9rem 3.6rem 0 0; }
}

/* ---- v2.3 contact bar icons ---- */
nav.contact-bar .sr-items > span.cb { display: inline-flex; align-items: center; gap: 0.45rem; }
nav.contact-bar svg { width: 1.05rem; height: 1.05rem; color: var(--brand-blue); flex: none; }

/* ---- v2.5 service bar: ONE line, same type as the tabs, aligned to the TECH line of the logo.
   Consulting is a dropdown at the end of the line. Below 900px the bar is hidden and the
   services move into the burger menu at the top. ---- */
header nav.service-row:not(.contact-bar) .sr-items { flex-wrap: nowrap; overflow: visible; white-space: nowrap; gap: 1.3rem; }
header nav.service-row:not(.contact-bar) .sr-items a,
header nav.service-row:not(.contact-bar) .sr-items strong,
header nav.service-row:not(.contact-bar) .sr-group > summary { font-size: 1.05rem !important; font-weight: 600 !important; font-family: var(--font-body); line-height: 1.4rem; }
header nav.service-row .sr-group { position: relative; display: inline-block; }
header nav.service-row .sr-group > .sr-panel { right: auto; left: 0; top: calc(100% + 2rem); }
header nav.service-row .sr-group > summary { display: block; list-style: none; cursor: pointer; color: var(--brand-granite); border-bottom: 2px solid transparent; }
header nav.service-row .sr-group > summary::-webkit-details-marker { display: none; }
header nav.service-row .sr-group > summary::after { content: ' \25BE'; font-size: 0.85em; }
header nav.service-row .sr-group > summary:hover { border-bottom-color: var(--brand-granite); }
header nav.service-row .sr-group.has-current > summary { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
header nav.service-row .sr-group .sr-panel a, header nav.service-row .sr-group .sr-panel strong { font-size: 1rem !important; font-weight: 600 !important; }
header nav.service-row .sr-group .sr-panel strong { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
header nav.service-row .sr-items > strong { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }

/* top bar only: burger menu at 900px and below, current item in Adamant Blue. The navy services bar stays. */
header .menu nav { max-height: 75vh; overflow-y: auto; }
header .menu nav a { color: var(--brand-navy); font-weight: 600; text-decoration: none; }
header div.container.nav.has-logo details.menu nav a[aria-current] { color: var(--brand-blue) !important; text-decoration: none; }
@media (max-width: 900px) {
  header div.container.nav.has-logo nav.links { display: none !important; }
  header div.container.nav.has-logo details.menu { display: block !important; grid-column: 2; grid-row: 1; justify-self: end; align-self: start; margin-top: 1.65rem; }
  header .nav .quick { grid-row: 1; }
}
header div.container.nav.has-logo details.menu { z-index: 60; }
header div.container.nav.has-logo details.menu nav { z-index: 61; }
/* services bar overflow menu (one line, extra items in its own burger) */
nav.service-row .sr-more .sr-panel a, nav.service-row .sr-more .sr-panel strong { font-size: 1rem !important; font-weight: 600 !important; }
nav.service-row .sr-more .sr-panel strong { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
nav.service-row .sr-more .sr-panel .mn-head { color: var(--brand-granite); opacity: 0.7; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
nav.service-row .sr-more summary { cursor: pointer; list-style: none; font-size: 1.4rem; line-height: 1; color: var(--brand-granite); padding: 0 0.25rem; }
nav.service-row .sr-more summary::-webkit-details-marker { display: none; }

/* ---- v2.4 icons match the letterhead: thin outline, Adamant Blue ---- */
header .nav .quick a { color: var(--brand-blue); }
header .nav .quick a:hover { color: var(--brand-navy); background: color-mix(in srgb, var(--brand-navy) 8%, transparent); }
/* the legacy rule that hides a subnav's first link must not hide the first item in the overflow panel */
header nav.subnav .sr-panel > a:first-child, header nav.subnav .sr-group .sr-panel > a:first-child { display: inline !important; }

/* ---- v2.6 the second bar never changes size, type or position, on any page ---- */
header nav.service-row .sr-items { align-items: flex-start !important; }
header nav.service-row .sr-items > a,
header nav.service-row .sr-items > strong,
header nav.service-row .sr-items > span,
header nav.service-row .sr-items > .sr-group > summary {
  box-sizing: border-box; height: 1.4rem; line-height: 1.4rem !important;
  font-size: 1.05rem !important; font-weight: 600 !important; font-family: var(--font-body);
}
header nav.contact-bar .sr-items > span, header nav.contact-bar .sr-items a { color: var(--brand-granite) !important; font-size: 1.05rem !important; font-weight: 600 !important; }
header nav.contact-bar .sr-items > span { display: inline-flex; align-items: center; gap: 0.5rem; }

/* ---- v2.7 quick-contact icons are as big as the burger button; order: e-mail, WhatsApp, call ---- */
header .nav .quick { gap: 0.5rem !important; margin-top: 1.65rem !important; }
header .nav .quick a { width: 2.4rem !important; height: 2.4rem !important; }
header .nav .quick svg { width: 1.6rem !important; height: 1.6rem !important; }
@media (max-width: 900px) {
  header .nav .quick { margin: 1.65rem 3.9rem 0 0 !important; }
}
nav.contact-bar svg { width: 1.3rem; height: 1.3rem; }

/* ---- v2.8 one left text line: tab text, services-bar text and page content start at the same x
   (container edge + logo width + the tab's 1rem padding). Page heading sits closer to the header. ---- */
@media (min-width: 1000px) {
  main section.container, main section > .container { padding-left: calc(1.25rem + (8rem * 113 / 70) + 1rem); }
}
main > section:not(.hero):first-child { padding-top: 1.75rem; }

/* ---- v2.9 home hero slides: titles sit in the second bar like a services bar; the selected one is Adamant Blue ---- */
header nav.slide-tabs .sr-items > a { color: var(--brand-granite) !important; text-decoration: none; border-bottom: 2px solid transparent; }
header nav.slide-tabs .sr-items > a:hover { border-bottom-color: var(--brand-granite); }
header nav.slide-tabs .sr-items > a[aria-selected="true"] { color: var(--brand-blue) !important; border-bottom-color: var(--brand-blue); }
header nav.slide-tabs .sr-items > a:first-child { display: inline !important; }
.hero.slides .slide { min-height: 22rem; }

/* ---- v2.10 solid header: no see-through tab row when scrolling ---- */
header { background: var(--brand-granite) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---- v2.10 the home splash fills the screen below the header ---- */
.hero.slides, main > .hero { min-height: calc(100svh - 8rem); display: flex; flex-direction: column; justify-content: center; padding-block: 3rem !important; }
.hero.slides .slide { min-height: 0; }

/* ---- v2.10 persona panels: navy slices, line icons centred, granite text ---- */
main section#features .panel { background: var(--brand-navy); color: var(--brand-granite); }
main section#features .panel:nth-child(2) { background: color-mix(in srgb, var(--brand-navy) 88%, var(--brand-blue)); }
main section#features .panel img { inset: 3rem auto auto 4rem; width: 6.5rem; height: 6.5rem; object-fit: contain; mix-blend-mode: screen; transform-origin: left top; }
main section#features .panel:hover img, main section#features .panel:focus-visible img { transform: scale(1.6); }
main section#features .panel .title { color: var(--brand-granite); }
main section#features .panel .desc { color: var(--brand-granite); }
main section#features .panel .more { color: var(--brand-blue); }

/* ---- v2.11 the logo's bar runs the full width of the page, through the logo: same thickness and height as the logo's bar
   (logo viewBox 26-96 tall; bar from 58.27 to 63.73) ---- */
header::before {
  content: ''; position: absolute; left: 0; z-index: 1; pointer-events: none;
  top: calc(var(--logo-h) * 32.27 / 70); height: calc(var(--logo-h) * 5.46 / 70);
  right: 0;
  background: var(--brand-navy);
}

/* ---- v2.12 menu words in the logo's typeface (Archivo ExtraBold), capitals two-thirds the height of ADAMANT's.
   Each row is centred on its logo word: the capitals' middle line is ADAMANT's (top row) or TECH's (second row),
   so the header mirrors around the logo's bar. --unit is one logo unit (70 per logo height). ---- */
header:not(#_) { --unit: calc(var(--logo-h) / 70); --menu-cap: calc(var(--unit) * 13.06 * 2 / 3); --menu-size: calc(var(--menu-cap) / 0.687); --tab-pad: calc(var(--unit) * 18.08); --bar-pad: calc(var(--unit) * 4.75); }
header:not(#_) div.container.nav.has-logo nav.links a,
header:not(#_) nav.service-row .sr-items > a, header:not(#_) nav.service-row .sr-items > strong, header:not(#_) nav.service-row .sr-items > span,
header:not(#_) nav.service-row .sr-items > .sr-group > summary {
  font-family: var(--font-display) !important; font-weight: 800 !important; font-size: var(--menu-size) !important;
  line-height: 1 !important; letter-spacing: 0;
}
header:not(#_) div.container.nav.has-logo nav.links a { padding-top: var(--tab-pad) !important; align-items: flex-start !important; }
header:not(#_):has(nav.subnav) nav.subnav .container { padding-top: var(--bar-pad) !important; align-items: flex-start !important; }
header:not(#_) nav.service-row .sr-items > a, header:not(#_) nav.service-row .sr-items > strong, header:not(#_) nav.service-row .sr-items > span,
header:not(#_) nav.service-row .sr-items > .sr-group > summary { height: auto !important; padding-bottom: 0.25rem; }
header:not(#_) nav.service-row:not(.contact-bar) .sr-items { gap: 1.1rem !important; }

/* ---- v2.13 quick-contact icons: Adamant Blue, sized and weighted to the menu words, tight, at the right edge,
   centred on ADAMANT's middle line. Contact is always a navy tab (the call to action), on every page; icons are solid glyphs. ---- */
header:not(#_) .nav .quick { justify-self: end; gap: 0.15rem !important; margin: calc(var(--unit) * 24.17 - 1.15rem) 0 0 0.5rem !important; }
header:not(#_) .nav .quick a { width: 2.3rem !important; height: 2.3rem !important; color: var(--brand-blue) !important; border-radius: 4px; }
header:not(#_) .nav .quick a:hover { color: var(--brand-navy) !important; background: color-mix(in srgb, var(--brand-blue) 14%, transparent) !important; }
header:not(#_) .nav .quick svg { width: 1.6rem !important; height: 1.6rem !important; }
header:not(#_) div.container.nav.has-logo nav.links a[href="/contact"] { background: var(--brand-navy) !important; color: var(--brand-granite) !important; }
header:not(#_) div.container.nav.has-logo nav.links a[href="/contact"]:hover { background: color-mix(in srgb, var(--brand-navy) 82%, var(--brand-blue)) !important; }
header:not(#_) nav.contact-bar .sr-items > span, header:not(#_) nav.contact-bar .sr-items a { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: var(--menu-size) !important; line-height: 1 !important; }
header:not(#_) nav.contact-bar .sr-items > span { gap: 0.55rem; align-items: center; }
header:not(#_) nav.contact-bar svg { width: 1.45rem !important; height: 1.45rem !important; }

/* ---- v2.14 page body: from where the logo ends to the right edge of the page. The column under the logo stays
   empty (room for a left banner later). Text starts on the menu words' line (logo end + 1rem). Wide screens only;
   below 1000px the body uses the full width. ---- */
@media (min-width: 1000px) {
  main section.container, main section > .container {
    max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
    padding-left: calc(max(0px, (100% - var(--max-width)) / 2) + 1.25rem + (8rem * 113 / 70) + 1rem) !important;
    padding-right: 2rem !important;
  }
}

/* ---- v2.15 the header is exactly as tall as the logo's arrow (its tips at 31.95 and 90.05 logo units): no empty band
   above or below. The logo keeps its size (--unit = 8rem / 70); the header logo is cropped to the arrow, and each
   row is half the arrow's height, so the rows still meet at the middle of the logo's bar. ---- */
header:not(#_) {
  --unit: calc(8rem / 70); --logo-h: calc(var(--unit) * 58.1); --row-h: calc(var(--unit) * 29.05); --logo-w: calc(var(--unit) * 113);
  --tab-pad: calc(var(--unit) * 12.13); --bar-pad: calc(var(--unit) * 4.75);
}
header:not(#_)::before { top: calc(var(--unit) * 26.32); height: calc(var(--unit) * 5.46); }
header:not(#_) .nav .quick { margin-top: calc(var(--unit) * 18.22 - 1.15rem) !important; }
.hero.slides, main > .hero { min-height: calc(100svh - (8rem * 58.1 / 70)) !important; }

/* ---- v2.16 hard left edge: the page body starts exactly on the logo's right edge (where the navy bar starts and
   the tab boxes start), no inset. Less space between the header and a page's heading. ---- */
@media (min-width: 1000px) {
  main section.container, main section > .container {
    padding-left: calc(max(0px, (100% - var(--max-width)) / 2) + 1.25rem + (8rem * 113 / 70)) !important;
  }
}
main > section:not(.hero):first-child { padding-top: 1.25rem !important; }
main > section:not(.hero):first-child > h1:first-child, main > section:not(.hero):first-child .crumb:first-child { margin-top: 0 !important; }

/* ---- v2.17 the white column under the logo runs down the whole page: every coloured band in the body (the splash,
   the closing call to action, tinted sections) starts on the logo's right edge. Wide screens only. ---- */
@media (min-width: 1000px) {
  main > section {
    background-image: linear-gradient(90deg, var(--brand-granite) calc(max(0px, (100% - var(--max-width)) / 2) + 1.25rem + (8rem * 113 / 70)), transparent 0) !important;
  }
}

/* ---- v2.18 persona panels carry photographs: the photo fills the slice, a navy fade at the foot keeps the text
   legible, and the photo eases in under the pointer. Licences: images-src/LICENCES.md ---- */
main section#features .panel img { inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; mix-blend-mode: normal !important; transform-origin: center !important; }
main section#features .panel:nth-child(1) img { object-position: 55% center; }
main section#features .panel:nth-child(2) img { object-position: 50% 30%; }
main section#features .panel:nth-child(3) img { object-position: 22% center; }
main section#features .panel:hover img, main section#features .panel:focus-visible img { transform: scale(1.06) !important; }
main section#features .panel::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,37,69,.10) 0%, rgba(11,37,69,.30) 45%, rgba(11,37,69,.92) 100%); }
main section#features .panel .text { z-index: 1; }

/* ---- v2.19 footer on the same line as the page body (the logo's right edge), slimmer; the small print is two lines:
   copyright and registration, then the POPIA line and the Information Regulator. ---- */
footer { padding-block: 0.5rem !important; margin-top: 1.25rem !important; }
@media (min-width: 1000px) {
  footer > .container { max-width: none !important; margin: 0 !important; padding-right: 2rem !important;
    padding-left: calc(max(0px, (100% - var(--max-width)) / 2) + 1.25rem + (8rem * 113 / 70)) !important; }
}
footer .container > .smallprint { margin-top: 0.1rem !important; }
footer .notices { font-size: 0.75rem !important; line-height: 1.5 !important; }
footer .notices a { text-decoration: underline; text-underline-offset: 2px; }
footer .notices, footer .notices a { color: var(--brand-navy) !important; }

/* ---- v2.20 the body line is the left edge of the logo's navy upright (107.54 logo units), where the dark blue
   starts, not the logo's outer edge (113): text, coloured bands and the footer all start there. ---- */
@media (min-width: 1000px) {
  main section.container, main section > .container, footer > .container {
    padding-left: calc(max(0px, (100% - var(--max-width)) / 2) + 1.25rem + (8rem * 107.54 / 70)) !important;
  }
  main > section {
    background-image: linear-gradient(90deg, var(--brand-granite) calc(max(0px, (100% - var(--max-width)) / 2) + 1.25rem + (8rem * 107.54 / 70)), transparent 0) !important;
  }
}

/* ---- v2.21 slide photos: navy-toned (the photo's light and shade over the navy), starting on the body line so the
   white column under the logo stays clean ---- */
.hero.slides .slide-bg { mix-blend-mode: luminosity; opacity: 0.42; }
@media (min-width: 1000px) {
  .hero.slides .slide-bg { left: calc(max(0px, (100% - var(--max-width)) / 2) + 1.25rem + (8rem * 107.54 / 70)); width: auto; right: 0; }
}

/* ---- v2.22 post pages (an <article>) follow the same body line and top spacing as every other page ---- */
@media (min-width: 1000px) {
  main article.container {
    max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-right: 2rem !important;
    padding-left: calc(max(0px, (100% - var(--max-width)) / 2) + 1.25rem + (8rem * 107.54 / 70)) !important;
  }
  main article.container .page-img { max-width: none; }
}
main > article:first-child { padding-top: 1.25rem !important; }
main article.container .page-img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: 0; }

/* ---- v2.23 tables in page text (Credits): left-aligned, ruled rows ---- */
main .prose table { border-collapse: collapse; width: 100%; max-width: 60rem; margin: 0.5rem 0 1.5rem; font-size: 0.95rem; }
main .prose th, main .prose td { text-align: left; padding: 0.5rem 1.25rem 0.5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--brand-navy) 15%, transparent); vertical-align: top; }
main .prose th { font-weight: 600; border-bottom-color: var(--brand-navy); }

/* ---- v2.24 wide screens (above 1440px): the layout keeps the laptop's proportions (80% of the window), so a large
   or 4K display has no wide empty margin; text and logo grow more gently than the window. ---- */
@media (min-width: 1441px) {
  /* text and logo grow a quarter as fast as the window (2560 -> 19.1px, 3840 -> 22.7px root) */
  html { font-size: calc(16px + (100vw - 1440px) / 360); }
  /* the layout keeps the laptop's proportions: 72rem at 1440px is 80% of the window */
  :root:root { --max-width: 80vw; }
}

/* ---- v2.25 service cards: at most three per row at any width (nine cards stay a clean 3 x 3) ---- */
main .svc-grid { grid-template-columns: repeat(auto-fit, minmax(max(16rem, calc((100% - 2 * 1.25rem) / 3)), 1fr)) !important; max-width: 72rem; }

/* ---- v2.26 wide screens: the footer is fixed to the bottom of the window, always visible. The page keeps exactly
   the footer's height free at its end (--footer-h, measured by the script in parts/footer.md), so nothing hides
   behind it and the page is never stretched. Phones keep the footer at the end of the page. ---- */
@media (min-width: 1000px) {
  body > footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; margin: 0 !important; background: var(--brand-granite); }
  body { padding-bottom: var(--footer-h, 7rem); }
}

/* ---- v2.27 persona panels: the "who it is for" line is light on the photo; a deeper fade for the longer text ---- */
main section#features .panel .who { color: var(--brand-granite) !important; font-size: 0.95rem; opacity: 0.9; }
main section#features .panel::after { background: linear-gradient(180deg, rgba(11,37,69,.10) 0%, rgba(11,37,69,.45) 38%, rgba(11,37,69,.94) 72%, rgba(11,37,69,.97) 100%) !important; }

/* ---- v2.28 page headings start on the menu words' line (the body line + the logo upright's width + the tab's 1rem),
   larger, in Adamant Blue (large type may be blue; small text stays navy). Persona pages open with a photo banner. ---- */
main :is(section, article).page > h1, main .prose h2 {
  color: var(--brand-blue) !important; margin-left: calc((8rem * 5.46 / 70) + 1rem) !important;
}
main :is(section, article).page > h1 { font-size: 2.6rem !important; line-height: 1.1; margin-bottom: 0.4rem; }
main .prose h2 { font-size: 1.6rem !important; margin-top: 2.2rem !important; }
main :is(section, article).page > .subtitle, main article.page > .crumb, main article.page > .meta { margin-left: calc((8rem * 5.46 / 70) + 1rem); }
main section.page > img.page-img[src*="persona-"] { width: 100%; max-width: none; aspect-ratio: 21 / 8; object-fit: cover; object-position: center 35%; border-radius: 0; margin: 0.5rem 0 1.75rem; }

/* ---- v2.29 phones and narrow windows (900px and below): the header scales to 70% (it is all in logo units, so the
   logo, both rows and the menu words stay aligned); the icons sit clear of the menu button; the second bar swipes
   sideways rather than cutting items off. Page headings drop the wide-screen indent. ---- */
@media (max-width: 900px) {
  header:not(#_) { --unit: calc(5.6rem / 70); }
  header:not(#_) .nav .quick { margin-right: 3rem !important; gap: 0 !important; }
  header:not(#_) .nav .quick a { width: 2.1rem !important; height: 2.1rem !important; }
  header:not(#_) .nav .quick svg { width: 1.35rem !important; height: 1.35rem !important; }
  header:not(#_) nav.subnav .sr-items { overflow-x: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-right: 1.25rem; }
  header:not(#_) nav.subnav .sr-items::-webkit-scrollbar { display: none; }
  header:not(#_) nav.subnav .sr-items > * { display: inline-flex !important; flex: none; }
  header:not(#_) nav.subnav .sr-more { display: none !important; }
  .hero.slides, main > .hero { min-height: calc(100svh - (5.6rem * 58.1 / 70)) !important; }
}
@media (max-width: 999px) {
  main :is(section, article).page > h1, main .prose h2, main :is(section, article).page > .subtitle, main article.page > .crumb, main article.page > .meta { margin-left: 0 !important; }
  main :is(section, article).page > h1 { font-size: 2.1rem !important; }
}
@media (max-width: 900px) { header:not(#_) div.container.nav.has-logo details.menu { margin-top: calc(var(--unit) * 18.22 - 1rem) !important; } }

/* ---- copy review (11 Oct 2026): footer trimmed. The contact block is gone (the header icons and the
   Contact page carry it) and About / Work / News moved into the Contact page's second bar, so the
   remaining footer is one smaller line: name, then Privacy / Terms / Credits, then the small print. ---- */
footer .container > p.contact { display: none !important; }
footer { font-size: 0.8rem !important; }
footer .container > nav a + a::before { content: '/'; }
/* one text size, weight and rhythm across the whole footer — tight line spacing */
footer, footer .container > p, footer .container > nav a, footer .notices, footer .notices a { font-size: 0.8rem !important; line-height: 1.3; }
footer .container > p:not(.contact):not(:first-child) { font-size: 0.8rem !important; margin: 0.2rem 0 0 !important; }
footer .container > .smallprint { margin-top: 0.2rem !important; }
footer .container > nav { row-gap: 0.2rem; }
footer .notices { margin: 0.2rem 0 0 !important; }