/* CastleSoft - site stylesheet (no frameworks). */

/* ---------- Fonts (self-hosted, Latin subset) ---------- */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/roboto-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/open-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/open-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/open-sans-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/montserrat-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/montserrat-latin-400-normal.woff2") format("woff2"); }

/* ---------- Base ---------- */
:root {
  --c-text: #111111;
  --c-muted: #595959;
  --c-link: #2f6aad;
  --c-link-hover: #245891;
  --c-header: #000000;
  --c-footer: #333333;
  --c-rule: #404040;
  --c-overlay: rgba(0, 0, 0, 0.6);
  --f-body: "Open Sans", Arial, sans-serif;
  --f-head: "Roboto", Arial, sans-serif;
  --max: 1140px;
  --gutter: 20px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 48px; /* keep anchored headings clear of the sticky header */
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3 {
  font-family: var(--f-head);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.6em;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }

p {
  margin: 0 0 1em;
}

a {
  color: var(--c-link);
}

a:hover,
a:focus {
  color: var(--c-link-hover);
}

:focus-visible {
  outline: 3px solid #f2a900;
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 100;
  padding: 8px 16px;
  background: #ffffff;
  color: var(--c-text);
}

.skip-link:focus {
  top: 8px;
}

/* ---------- Header and navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-header);
  color: #ffffff;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-family: var(--f-head);
  font-weight: 500;
  text-decoration: none;
}

.brand:hover,
.brand:focus {
  color: #ffffff;
}

.brand img {
  width: 28px;
  height: 28px;
}

.nav-toggle,
.nav-toggle-label {
  display: none;
}

.nav-list,
.sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list {
  display: flex;
  gap: 4px;
}

.nav-list > li {
  position: relative;
}

.nav-list a {
  display: block;
  padding: 10px 16px;
  color: #ffffff;
  font-family: var(--f-head);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav-list a:hover,
.nav-list a:focus,
.nav-list a[aria-current="page"] {
  color: #bfbfbf;
}

.has-sub > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.sub-list {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: 6px 0;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

/* Menus near the right edge open leftwards so they never overflow the window. */
.nav-list > li:nth-last-child(-n+2) > .sub-list {
  left: auto;
  right: 0;
}

.has-sub:hover > .sub-list,
.has-sub:focus-within > .sub-list {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.sub-list a {
  color: var(--c-text);
  font-weight: 400;
}

.sub-list a:hover,
.sub-list a:focus {
  background: #f2f2f2;
  color: #000000;
}

/* ---------- Sections ---------- */
.section {
  padding: 70px 0;
}

.section-title {
  text-align: center;
}

.section-dark {
  position: relative;
  color: #ffffff;
  background-color: #1a1a1a;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-overlay);
}

.section-dark > .wrap {
  position: relative;
}

.section-dark a {
  color: #ffffff;
}

.bg-office-1 { background-image: url("/images/bg-office-1.webp"); }
.bg-office-2 { background-image: url("/images/bg-office-2.webp"); }

/* ---------- Video hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 925px;
  overflow: hidden;
  color: #ffffff;
  background: #222222 center / cover no-repeat;
}

.hero-home { background-image: url("/media/hero-home-poster-1080.webp"); }
.hero-contact { background-image: url("/media/hero-contact-poster-1080.webp"); min-height: min(60vh, 600px); }

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Logo, title and tagline sit in one centred column on the left (as on the original site)
   and zoom in when the page loads. */
.hero-content {
  position: relative;
  z-index: 1;
  width: max(440px, calc((100% - 1140px) / 2 + 421px));
  padding: 50px 10px 40px;
  text-align: center;
  animation: hero-zoom-in 2s ease-out both;
}

@keyframes hero-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }

  50% {
    opacity: 1;
  }

  to {
    transform: scale(1);
  }
}

.hero-logo {
  width: 315px;
  margin: 0 auto 8px;
}

.hero-title {
  margin: 0;
  font-family: "Montserrat", var(--f-head);
  font-size: 4.5rem;
  font-weight: 300;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

.hero-tagline {
  margin: 0;
  font-family: "Montserrat", var(--f-head);
  font-size: 1.125rem;
  font-weight: 400;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .hero video {
    display: none;
  }

  .hero-content {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---------- Built on the Right Foundations (white band between the hero video and the counters) ---------- */
.foundations-intro {
  max-width: 680px;
  margin: 0 auto 40px;
  color: var(--c-muted);
}

.foundations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.capability {
  padding-top: 16px;
  border-top: 2px solid var(--c-footer);
}

.capability h3 {
  margin-bottom: 14px;
  font-size: 1.25rem;
  font-weight: 500;
}

/* Static labels: flat, borderless and without hover states so they don't read as buttons. */
.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tech-tags li {
  padding: 3px 10px;
  border-radius: 3px;
  background: #f2f2f2;
  color: #333333;
  font-size: 0.875rem;
  line-height: 1.6;
  cursor: default;
}

@media (max-width: 991px) {
  .foundations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 40px;
  }
}

@media (max-width: 575px) {
  .foundations-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .foundations-intro {
    margin-bottom: 28px;
  }
}

/* Home "Built on the Right Foundations" refinements, scoped to .foundations so the Team page's
   governance grid (which reuses the base rules above) is unaffected. Subgrid rows keep each
   group's heading, description and labels aligned across columns. */
.foundations .foundations-intro {
  max-width: 720px;
}

.foundations .foundations-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.foundations .capability {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 18px 20px 20px;
}

/* The two core capabilities get a restrained surface tint; specialist groups keep the same rule and type. */
.foundations .capability-core {
  background: #f5f5f5;
}

.foundations .capability h3 {
  margin: 0 0 6px;
}

.foundations .capability-desc {
  margin: 0 0 14px;
  color: var(--c-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.foundations .tech-tags {
  align-content: flex-start;
  gap: 6px;
}

.foundations .tech-tags li {
  padding: 2px 9px;
  line-height: 1.5;
  white-space: nowrap;
}

.foundations .capability-core .tech-tags li {
  background: #ffffff;
}

/* Abbreviations inside static labels: no dotted underline that could read as a link. */
.foundations .tech-tags abbr[title] {
  text-decoration: none;
  cursor: default;
}

@media (max-width: 1099px) {
  .foundations .foundations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .foundations .foundations-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ---------- Counters ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 0;
  text-align: center;
}

.stats div {
  display: flex;
  flex-direction: column-reverse;
}

.stats dt {
  font-size: 1.125rem;
}

.stats dd {
  margin: 0;
  font-family: var(--f-head);
  font-size: 3.75rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums; /* steady digit widths while counting */
}

/* ---------- Vision & mission quote ---------- */
.quote {
  max-width: 900px;
  margin: 0 auto;
}

.quote-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
}

.quote h2 {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1rem;
  font-style: italic;
  font-weight: 700;
}

.quote p {
  margin-bottom: 1.5em;
}

.signature {
  margin: 0;
  font-family: var(--f-head);
  font-size: 1.5rem;
  font-weight: 700;
}

.signature-role {
  margin: 0;
  color: var(--c-muted);
  font-family: var(--f-head);
  font-size: 1.125rem;
}

/* ---------- CastleSoft Group division tiles (logo + line icons) ---------- */
.group-icons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 360px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.group-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 1;
  background: #f5f5f5;
  color: var(--c-footer);
  font-family: var(--f-head);
  font-weight: 500;
}

.group-tile img,
.group-tile svg {
  width: 64px;
  height: 64px;
}

.group-tile svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Supported platforms ---------- */
.platforms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px 30px;
  margin-top: 50px;
  text-align: center;
}

.platforms img {
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
}

.platforms h3 {
  font-size: 2rem;
}

.platforms ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- Social icons (footer) ---------- */
.social {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social a {
  display: block;
  padding: 8px;
  color: var(--c-footer);
}

.social a:hover,
.social a:focus {
  color: #000000;
}

.social svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

/* ---------- Content pages ---------- */
.page {
  padding: 60px 0;
}

.page-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px 70px;
  align-items: start;
}

.page-grid > :last-child {
  padding-left: 40px;
  border-left: 2px solid var(--c-rule);
}

.page-grid.no-rule > :last-child {
  padding-left: 0;
  border-left: 0;
}

.page-media img {
  margin: 0 auto;
}

.prose h2 {
  margin-top: 1.5em;
  font-size: 1.25rem;
  font-weight: 700;
}

.prose h2:first-child {
  margin-top: 0;
}

.lead-heading {
  font-size: 1.5rem;
  font-weight: 500;
}

/* ---------- Contact ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.steps li {
  padding: 22px;
  background: #f5f5f5;
  border-top: 2px solid var(--c-footer);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--c-footer);
  color: #ffffff;
  font-family: var(--f-head);
  font-weight: 500;
}

.steps h3 {
  margin-bottom: 0.3em;
  font-size: 1.125rem;
  font-weight: 500;
}

.steps p {
  margin: 0;
}

.enquiry-help {
  max-width: 680px;
  margin: 0 auto 40px;
  text-align: center;
}

.enquiry-help h2 {
  font-size: 1.5rem;
}

.checklist {
  display: inline-block;
  margin: 0 0 20px;
  padding-left: 1.2em;
  text-align: left;
}

.checklist li {
  margin-bottom: 4px;
}

.reassurance {
  margin-top: 16px;
  color: var(--c-muted);
  font-size: 0.9375rem;
}

.office-hours {
  margin: 14px 0 0;
}

.offices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 30px;
}

.office {
  padding: 28px;
  border: 1px solid #dddddd;
  border-radius: 6px;
}

.office h2 {
  font-size: 1.5rem;
}

.office address {
  font-style: normal;
}

.contact-email {
  font-size: 1.125rem;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 48px 0 24px;
  background: var(--c-footer);
  color: #ffffff;
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.footer-brand img {
  width: 56px;
  height: 56px;
}

.footer-brand p {
  max-width: 280px;
  margin: 12px 0 10px;
  color: #d9d9d9;
}

.footer-heading {
  margin: 0 0 10px;
  font-family: var(--f-head);
  font-weight: 500;
}

.footer-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li {
  margin-bottom: 6px;
}

.site-footer .footer-links a,
.site-footer .footer-links .link-button {
  color: #d9d9d9;
  text-decoration: none;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus,
.site-footer .footer-links .link-button:hover,
.site-footer .footer-links .link-button:focus {
  color: #ffffff;
  text-decoration: underline;
}

.site-footer .social {
  gap: 2px;
  margin-left: -8px;
}

.site-footer .social a {
  color: #ffffff;
}

.site-footer .social a:hover,
.site-footer .social a:focus {
  color: #bfbfbf;
}

.site-footer .social svg {
  width: 24px;
  height: 24px;
}

.footer-base {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid #4d4d4d;
  color: #bfbfbf;
  font-size: 0.8125rem;
}

.footer-base p {
  margin: 0 0 4px;
}

/* ---------- Buttons (calls to action) ---------- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 4px;
  font-family: var(--f-head);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.btn.btn-dark { background: var(--c-footer); border-color: var(--c-footer); color: #ffffff; }
.btn.btn-dark:hover, .btn.btn-dark:focus { background: #000000; border-color: #000000; color: #ffffff; }
.btn.btn-outline { border-color: var(--c-footer); color: var(--c-footer); }
.btn.btn-outline:hover, .btn.btn-outline:focus { background: var(--c-footer); color: #ffffff; }
.btn.btn-light { background: #ffffff; border-color: #ffffff; color: #111111; }
.btn.btn-light:hover, .btn.btn-light:focus { background: #e6e6e6; border-color: #e6e6e6; color: #111111; }
.btn.btn-outline-light { border-color: #ffffff; color: #ffffff; }
.btn.btn-outline-light:hover, .btn.btn-outline-light:focus { background: rgba(255, 255, 255, 0.15); color: #ffffff; }

.cta-actions,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hero-actions {
  margin-top: 24px;
}

/* Subtle shade behind the hero text column so white text stays legible on every video frame. */
.hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.18) 40%, rgba(0, 0, 0, 0) 65%);
  pointer-events: none;
}

/* ---------- Navigation states ---------- */
.nav-list a.nav-cta {
  margin: 4px 0 4px 10px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 4px;
}

.nav-list a.nav-cta:hover,
.nav-list a.nav-cta:focus {
  background: #ffffff;
  color: #000000;
}

.has-sub.is-current > a {
  color: #bfbfbf;
}

.sub-list a[aria-current="page"] {
  background: #f2f2f2;
  color: #000000;
  font-weight: 500;
}

/* ---------- Shared content helpers ---------- */
.narrow {
  max-width: calc(820px + 2 * var(--gutter));
}

.lead {
  margin-bottom: 1.2em;
  color: var(--c-muted);
  font-family: var(--f-head);
  font-size: 1.25rem;
}

.section-lead {
  max-width: 760px;
  margin: 0 auto 40px;
  color: var(--c-muted);
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

/* ---------- Home: service cards ---------- */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dddddd;
  border-radius: 6px;
  background: #ffffff;
}

.service-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 70%;
}

.service-card-body {
  padding: 20px 22px 24px;
}

.service-card h3 {
  margin-bottom: 0.4em;
  font-size: 1.375rem;
}

.service-card h3 a {
  color: var(--c-text);
  text-decoration: none;
}

/* The heading link covers the whole card, so the card is one clear click target. */
.service-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.service-card:hover h3 a,
.service-card h3 a:focus {
  text-decoration: underline;
}

.service-card:focus-within {
  outline: 3px solid #f2a900;
  outline-offset: 2px;
}

.service-card p {
  margin: 0;
  color: var(--c-muted);
}

/* ---------- Tinted feature and call-to-action bands ---------- */
.data-residency,
.cta-band,
.story {
  background: #f5f5f5;
}

.data-residency,
.cta-band {
  text-align: center;
}

.cta-band p {
  max-width: 680px;
  margin: 0 auto 24px;
}

/* ---------- About: timeline and divisions ---------- */
.timeline {
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--c-footer);
  list-style: none;
}

.timeline li {
  position: relative;
  padding: 0 0 22px 28px;
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 5px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--c-footer);
  border-radius: 50%;
  background: #ffffff;
}

.timeline-year {
  display: block;
  font-family: var(--f-head);
  font-size: 1.125rem;
  font-weight: 500;
}

.timeline p {
  margin: 2px 0 0;
}

.division-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}

.group-tile a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.group-tile a:hover,
.group-tile a:focus {
  background: #e9e9e9;
  color: #000000;
}

/* ---------- Service pages ---------- */
.service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 50px;
  align-items: center;
}

.service-media img {
  border-radius: 6px;
}

.service-intro h1 {
  margin-bottom: 0.3em;
}

.service-intro .cta-actions {
  justify-content: flex-start;
  margin-top: 24px;
}

.service-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
}

.service-proof h2 {
  font-size: 1.5rem;
}

.example-list {
  margin: 0;
  padding-left: 1.2em;
}

.example-list li {
  margin-bottom: 0.5em;
}

.service-proof abbr[title] {
  text-decoration: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .hero-title { font-size: 3.75rem; }
  .stats,
  .platforms { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .nav-toggle-label {
    display: block;
    padding: 10px;
    cursor: pointer;
  }

  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
    content: "";
  }

  .nav-toggle-label span {
    position: relative;
  }

  .nav-toggle-label span::before { position: absolute; top: -7px; }
  .nav-toggle-label span::after { position: absolute; top: 7px; }

  .nav-toggle {
    display: block;
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
  }

  .nav-toggle:focus-visible + .nav-toggle-label {
    outline: 3px solid #f2a900;
  }

  .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 0 16px;
    background: var(--c-header);
    max-height: calc(100vh - 44px);
    overflow-y: auto;
  }

  .nav-toggle:checked ~ .nav-list {
    display: flex;
  }

  .nav-list a {
    padding: 10px var(--gutter);
  }

  .has-sub > a::after {
    display: none;
  }

  .sub-list {
    position: static;
    min-width: 0;
    padding: 0 0 0 16px;
    background: none;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .sub-list a {
    color: #d9d9d9;
  }

  .sub-list a:hover,
  .sub-list a:focus {
    background: none;
    color: #ffffff;
  }

  .section { padding: 50px 0; }
  .section-dark { background-attachment: scroll; }
  .hero { min-height: 85vh; }
  .hero-contact { min-height: 35vh; }
  .hero-content { width: 100%; padding-top: 60px; }
  .hero-logo { width: 280px; }
  .hero-title { font-size: 3rem; }
  h1, h2 { font-size: 1.75rem; }
  .stats dd { font-size: 3rem; }

  .page-grid,
  .offices,
  .service-cards,
  .service-grid,
  .service-columns,
  .division-summary {
    grid-template-columns: minmax(0, 1fr); /* minmax lets the column shrink below image widths */
  }

  .service-cards {
    max-width: 480px;
    margin: 0 auto;
  }

  .service-media img {
    width: min(100%, 420px);
    margin: 0 auto;
  }

  .hero-home::after {
    background: rgba(0, 0, 0, 0.3);
  }

  .nav-list a.nav-cta {
    margin: 0;
    padding: 10px var(--gutter);
    border: 0;
  }

  .sub-list a[aria-current="page"] {
    background: none;
    color: #ffffff;
    text-decoration: underline;
  }

  .page-grid > :last-child {
    padding-left: 0;
    border-left: 0;
  }

  .page-media img {
    max-width: 280px;
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Team: compact agent cards on phones (portrait beside name and role, bio below). */
  .team-grid > .team-card.agent-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    flex-basis: 100%;
    padding: 18px;
    text-align: left;
  }

  .team-card.agent-card img.agent-photo {
    grid-row: 1 / 4;
    width: 72px;
    height: 72px;
    margin: 0;
  }

  .agent-card .agent-label,
  .agent-card h3,
  .agent-card .team-role {
    margin: 0;
  }

  .agent-card h3 {
    font-size: 1.25rem;
  }

  .agent-card > p:last-child {
    grid-column: 1 / -1;
    margin-top: 12px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 479px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 479px) {
  .platforms h3 { font-size: 1.5rem; }
}

/* ---------- Team ---------- */
.team-intro {
  max-width: 700px;
  margin: 0 auto 40px;
}

/* Flexbox (not grid) so an incomplete last row is centred. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.team-grid > .team-card {
  flex: 0 1 360px;
}

.team-card {
  padding: 28px;
  border: 1px solid #dddddd;
  border-radius: 6px;
  text-align: center;
}

.team-card img,
.team-initials {
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: #f2f2f2;
}

.team-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  font-family: var(--f-head);
  font-size: 3rem;
}

.team-card h2 {
  margin-bottom: 0.2em;
  font-size: 1.5rem;
}

.team-role {
  color: var(--c-muted);
  font-family: var(--f-head);
}

.team-card p:last-child {
  margin-bottom: 0;
  text-align: left;
}

/* ---------- Lists inside legal text ---------- */
.prose ul {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

.prose li {
  margin-bottom: 0.5em;
}

/* ---------- Cookie consent ---------- */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 22px;
  background: #ffffff;
  color: var(--c-text);
  border: 1px solid #cccccc;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.consent[hidden] {
  display: none;
}

.consent-text {
  flex: 1 1 420px;
  margin: 0;
  font-size: 0.9375rem;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Accept and reject are deliberately equal in weight (EU regulator guidance). */
.consent-button {
  min-width: 150px;
  padding: 10px 18px;
  border: 2px solid var(--c-footer);
  border-radius: 4px;
  background: var(--c-footer);
  color: #ffffff;
  font: 600 1rem var(--f-body);
  cursor: pointer;
}

.consent-button:hover,
.consent-button:focus {
  background: #000000;
  border-color: #000000;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.site-footer a {
  color: #ffffff;
}

@media (max-width: 479px) {
  .consent-actions,
  .consent-button {
    flex: 1 1 100%;
  }
}

/* ---------- Founder card: horizontal (photo left, details right) ---------- */
.team-grid > .team-card.founder-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 32px;
  align-items: start;
  flex-basis: 760px;
  max-width: 760px;
  text-align: left;
}

.team-card.founder-card img {
  grid-row: 1 / 4;
  align-self: center;
  margin: 0;
}

.founder-card h2 {
  margin-top: 8px;
}

.founder-card .team-role {
  margin-bottom: 12px;
}

.team-card.founder-card p:last-child {
  text-align: left;
}

@media (max-width: 767px) {
  /* Founder card on phones: photo beside name and role, bio below. */
  .team-grid > .team-card.founder-card {
    grid-template-columns: 100px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 18px;
    align-items: center;
    flex-basis: 100%;
    padding: 20px;
  }

  .team-card.founder-card img {
    grid-row: 1 / 3;
    width: 100px;
    height: 100px;
  }

  .founder-card h2 {
    margin: 0;
    font-size: 1.375rem;
  }

  .founder-card .team-role {
    margin: 0;
  }

  .founder-card > p:last-child {
    grid-column: 1 / -1;
    margin-top: 14px;
  }
}

/* ---------- AI agent team ---------- */
.agent-section {
  background: #f5f5f5;
}

.team-card h3 {
  margin-bottom: 0.2em;
  font-size: 1.5rem;
}

.agent-card {
  background: #ffffff;
}

/* AI-generated agent portraits: smaller than the founder's photo to keep the hierarchy. */
.team-card img.agent-photo {
  width: 150px;
  height: 150px;
  margin-bottom: 10px;
}

/* Plain-text AI designation under each agent portrait (not a button-like badge). */
.agent-label {
  margin: 0 0 6px;
  color: var(--c-muted);
  font-family: var(--f-head);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.team-lead {
  margin-bottom: 12px;
  font-family: var(--f-head);
  font-size: 1.5rem;
  font-weight: 500;
}

.principles .capability p {
  margin: 0;
  font-size: 0.9375rem;
}

/* ---------- Office flag buttons (Contact) ---------- */
.flag-buttons {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 24px 0 56px;
}

.flag-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--c-text);
  font-family: var(--f-head);
  font-weight: 500;
  text-decoration: none;
}

.flag-button img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}

.flag-button:hover img,
.flag-button:focus img {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.flag-button:hover,
.flag-button:focus {
  color: #000000;
}

.office-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.office-title img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .flag-button img {
    transition: none;
  }
}