/* ==========================================================================
   Doncaster Personnel UK - mockup stylesheet
   Design language lifted from doncasterpersonnel.co.za
   ========================================================================== */

:root {
  --orange:      #F68835;
  --orange-dark: #E0742A;
  --green:       #00A859;
  --green-dark:  #008F4B;
  --ink:         #1A1C1D;
  --ink-soft:    #212729;
  --body:        #5A5A5A;
  --pale:        #F2F7F8;
  --yellow:      #FDF315;
  --line:        #E6EBEC;
  --white:       #FFFFFF;

  --r-sm: 8px;
  --r:    16px;
  --r-lg: 32px;
  --r-pill: 100px;

  --shadow: 0 2px 20px rgba(26, 28, 29, 0.06);
  --shadow-lift: 0 12px 34px rgba(26, 28, 29, 0.10);

  --container: 1440px;
  --header-h: 103px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 3.5vw, 2.75rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.95rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

strong { color: var(--ink); font-weight: 700; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: 96px 0; }
.section--pale { background: var(--pale); }
.section--tight { padding: 64px 0; }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body);
  font-weight: 600;
  margin-bottom: 14px;
  display: block;
}

.lede { font-size: 1.02rem; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 30px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-lift); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.btn--orange { background: var(--orange); }
.btn--orange:hover { background: var(--green); }
.btn--green  { background: var(--green); }
.btn--green:hover { background: var(--orange); }
.btn--block  { width: 100%; max-width: 520px; }
.btn--lg     { padding: 16px 42px; font-size: 1rem; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom-left-radius: var(--r);
  border-bottom-right-radius: var(--r);
  box-shadow: 0 1px 0 var(--line);
  transition: box-shadow 0.3s ease;
}

.site-header.is-stuck { box-shadow: 0 6px 24px rgba(26, 28, 29, 0.08); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

.brand img { height: 95px; width: auto; }

.nav { display: flex; align-items: center; gap: 34px; }

.nav a {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 0;
  transition: color 0.2s ease;
}

/* orange on hover, green for the page you are on. No underline. */
.nav a:hover,
.nav a:focus-visible { color: var(--orange); }
.nav a[aria-current="page"] { color: var(--green); }
.nav a[aria-current="page"]:hover { color: var(--green); }

.nav-toggle {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  width: 56px; height: 36px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--orange);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.nav-toggle:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  margin: 4px auto;
  background: var(--white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] { background: var(--green); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero */

.hero { padding: 44px 0 88px; }

.hero__team { margin-bottom: 48px; }
.hero__team .eyebrow { display: block; margin-bottom: 18px; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.team-card { margin: 0; }

/* A fixed shape rather than a fixed height, so the photo scales in proportion
   and the framing is identical at every screen width. A fixed height let the
   card turn into a wide letterbox on narrower screens and cut off heads.
   --focus-y sets how far down each photo the crop sits; it is set per photo
   in the HTML so the eye lines match across the row. */
.team-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  object-position: 50% var(--focus-y, 20%);
  border-radius: var(--r);
}

.team-card figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.hero__copy {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 88px;
  align-items: start;
}

.hero__copy h1 { margin-bottom: 0; }

.hero__aside { font-size: 1.08rem; line-height: 1.7; }
.hero__aside .btn { margin-top: 12px; font-size: 0.95rem; }

.hero__aside p:first-child { color: var(--ink); font-weight: 700; }

/* ----------------------------------------------------------------- stats */

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  margin: 8px 0 40px;
}

.stat__number {
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
}

.stat__label {
  display: block;
  margin-top: 12px;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--body);
  max-width: 140px;
}

/* ----------------------------------------------------------- split block */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.split img { border-radius: var(--r); width: 100%; object-fit: cover; }

.split--wide-left { grid-template-columns: 0.32fr 1fr; }

/* ------------------------------------------------------------ value band */

.value-band {
  background: var(--yellow);
  border-radius: var(--r-lg);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.value-band h2 { margin-bottom: 0; }
.value-band p { color: var(--ink-soft); }

/* ------------------------------------------------------------- industries */

.pill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.pill {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 24px;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pill:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}

.check-list li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

/* ------------------------------------------------------------ service row */

.srv-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.srv-row:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.srv-row h3 { margin-bottom: 0; }
.srv-row img {
  border-radius: var(--r);
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* proportional; a fixed 190px became a 655x190 strip on tablets */
  object-fit: cover;
  object-position: 50% var(--focus-y, 50%);
}

/* ---------------------------------------------------------------- benefits */

.benefit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--white);
  border-radius: var(--r);
  padding: 12px;
  margin-bottom: 20px;
}

.benefit img { border-radius: var(--r); width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: 50% var(--focus-y, 50%); }
.benefit__text { padding: 24px 32px 24px 12px; }
.benefit--flip .benefit__media { order: 2; }
.benefit--flip .benefit__text { padding: 24px 12px 24px 32px; }
.benefit h3 { font-size: 1.45rem; margin-bottom: 6px; }
.benefit p { margin-bottom: 32px; font-size: 0.94rem; }
.benefit p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- cta band */

.cta-band { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }

.cta-band__panel {
  background: var(--pale);
  border-radius: var(--r);
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-band__panel h2 { margin-bottom: 28px; }
.cta-band__panel .btn { align-self: flex-start; }
.cta-band__media {
  border-radius: var(--r);
  overflow: hidden;
  min-height: 300px;
}

.cta-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------------ forms */

.form-card {
  background: var(--pale);
  border-radius: var(--r);
  padding: 36px;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }

.field {
  width: 100%;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(246, 136, 53, 0.18);
}

textarea.field { min-height: 130px; resize: vertical; }

.form-note {
  font-size: 0.8rem;
  color: var(--body);
  margin-top: 14px;
}

/* Spam trap. Pushed off-canvas rather than display:none, because some bots
   read the computed style and skip anything hidden that way.
   The visibility line matters: this form sits inside a .reveal wrapper that
   is visibility:hidden until scrolled into view, and visibility inherits, so
   without this the trap would read as hidden to a bot that never scrolls. */
.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: visible;
}

.form-status {
  font-size: 0.88rem;
  font-weight: 500;
  margin-top: 14px;
}

.form-status--ok { color: var(--green); }
.form-status--error { color: #C0392B; }

.form-legal {
  font-size: 0.72rem;
  color: var(--body);
  opacity: 0.75;
  margin-top: 10px;
}

.form-legal a,
.form-note a { text-decoration: underline; }

/* Google's floating badge duplicates the wording above, so hide the badge and
   keep the written credit, which is what Google's terms actually require. */
.grecaptcha-badge { visibility: hidden; }

/* -------------------------------------------------------- contact banner */

.contact-hero {
  background: var(--orange);
  padding: 72px 0 88px;
}

.contact-hero h1 {
  color: var(--white);
  text-align: center;
  margin-bottom: 48px;
  font-size: 4rem;        /* 64px, as on the SA contact page */
  line-height: 1.1;
}

@media (max-width: 1024px) { .contact-hero h1 { font-size: 3rem; } }      /* 48px */
@media (max-width: 767px)  { .contact-hero h1 { font-size: 2.375rem; } }  /* 38px */

/* Matched to the SA contact page: a 1220px block on wide screens with orange
   either side, keeping about 60px of margin on laptops and easing down to the
   site's usual 24px on phones. */
.contact-hero .container {
  max-width: 1340px;
  padding-inline: clamp(24px, 4.5vw, 60px);
}

.contact-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; align-items: stretch; }

/* The cards share the form's height, so the first lines up with the top of
   the form and the last with the bottom, with even gaps between them. */
.contact-cards { display: flex; flex-direction: column; gap: 40px; }

.contact-cards .info-card {
  flex: 1 1 auto;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Embedded map below the form, as on the SA site. The wrapper carries the
   rounded corners and clips the iframe, which does not round reliably on its
   own. Maps have no faces to crop, so a fixed height is fine here. */
.contact-map {
  margin-top: 54px;
  height: 456px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--pale);
}

.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }

.info-card {
  background: var(--white);
  border-radius: var(--r);
  padding: 28px 32px;
  margin-bottom: 20px;
}

.info-card h3 { font-size: 1.35rem; margin-bottom: 14px; }

.info-card__row {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  font-size: 0.98rem;
}

.info-card__row svg { flex: none; width: 22px; height: 22px; stroke: var(--ink); }

.info-card__row a { color: inherit; overflow-wrap: anywhere; transition: color 0.2s ease; }
.info-card__row a:hover,
.info-card__row a:focus-visible { color: var(--orange); }

.placeholder {
  display: inline-block;
  background: var(--pale);
  border: 1px dashed #C2CFD2;
  border-radius: var(--r-sm);
  padding: 3px 12px;
  color: var(--body);
  font-size: 0.88rem;
}

.social-row { display: flex; gap: 16px; }
.social-row a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--pale);
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.social-row a:hover { background: var(--orange); transform: translateY(-2px); }
.social-row a:hover svg { fill: var(--white); }
.social-row svg { width: 17px; height: 17px; fill: var(--ink); stroke: none; transition: fill 0.25s ease; }

/* --------------------------------------------------------------- accordion */

.acc { border-radius: var(--r-sm); overflow: hidden; margin-bottom: 10px; }

.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--pale);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px 22px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.acc__btn:hover { background: #E8F0F1; }
.acc__btn[aria-expanded="true"] { background: var(--green); color: var(--white); border-color: var(--green); }
.acc__icon { flex: none; font-size: 1.25rem; line-height: 1; transition: transform 0.3s ease; }
.acc__btn[aria-expanded="true"] .acc__icon { transform: rotate(45deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}

.acc__panel > div { overflow: hidden; }
.acc__panel.is-open { grid-template-rows: 1fr; }
.acc__panel p { padding: 18px 22px 4px; font-size: 0.94rem; }
.acc__panel ul { margin: 10px 0 4px; padding: 0 22px 0 42px; font-size: 0.94rem; }
.acc__panel ul ul { padding-left: 22px; margin: 6px 0; }
.acc__panel li { margin-bottom: 8px; }
.acc__panel li:last-child { margin-bottom: 0; }
.acc__panel li::marker { color: var(--orange); }
.acc__panel p + ul { margin-top: 4px; }
.acc__panel > div > *:last-child { padding-bottom: 16px; }

/* -------------------------------------------------------------- page hero */

.page-hero { padding: 32px 0 0; }
.page-hero img { border-radius: var(--r); width: 100%; height: 400px; object-fit: cover; }

.page-intro { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; padding: 56px 0 24px; }
.page-intro h1 { margin-bottom: 28px; }

/* --------------------------------------------------------- service detail */

.srv-detail {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 48px;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
  margin-bottom: 24px;
}

.srv-detail img { border-radius: var(--r); width: 100%; height: 320px; object-fit: cover; object-position: 50% var(--focus-y, 50%); }
.srv-detail h3 { margin-bottom: 10px; }
.srv-detail__sub { color: var(--ink); font-weight: 700; font-size: 0.94rem; margin-bottom: 10px; }
.srv-detail__body { margin-bottom: 26px; font-size: 0.96rem; }

/* ------------------------------------------------------------------ footer */

.site-footer { background: var(--pale); padding: 72px 0 32px; }

.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-top h4 { font-size: 1.12rem; margin-bottom: 18px; }
.footer-top ul { list-style: none; margin: 0; padding: 0; }
.footer-top li { margin-bottom: 10px; font-size: 0.94rem; }
.footer-top li a { transition: color 0.2s ease, padding-left 0.2s ease; }
.footer-top li a:hover { color: var(--green); padding-left: 4px; }
.footer-top li a::before { content: "›"; margin-right: 10px; color: var(--body); }

.footer-card {
  background: var(--white);
  border-radius: var(--r);
  padding: 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
}

.footer-card img { height: 54px; width: auto; margin-bottom: 18px; }
.footer-card h4 { font-size: 1.05rem; margin-bottom: 14px; }
.footer-card p { font-size: 0.88rem; }
.footer-card .info-card__row { font-size: 0.9rem; margin-bottom: 10px; }

.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body);
}
.footer-base a:hover,
.footer-base a:focus-visible { color: var(--orange); }


/* ------------------------------------------------------------ intro splash */

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #EA4F9D 0%, #F0728A 45%, #F59753 100%);
  animation: splashOut 0.75s cubic-bezier(0.4, 0, 0.2, 1) 2.1s forwards;
}

.splash__inner { text-align: center; padding: 24px; }

.splash__logo {
  width: min(575px, 84vw); /* wider UK logo: keeps the lettering the same size as before */
  margin: 0 auto;
  /* the logo artwork is dark, so flip it to solid white over the gradient */
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  animation: splashIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.splash__country {
  display: block;
  margin-top: 22px;
  color: #FFFFFF;
  font-size: clamp(0.82rem, 1.6vw, 1.05rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-weight: 500;
  text-indent: 0.42em;
  opacity: 0;
  transform: translateY(10px);
  animation: splashIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

@keyframes splashIn {
  to { opacity: 1; transform: none; }
}

@keyframes splashOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

body.is-splashing { overflow: hidden; }

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

/* -------------------------------------------------------------- animation */

/* fadeInUp, matched to the live SA site: animate.css keyframes, 1.25s, ease.
   The travel is 100% of the element's own height, exactly as Elementor does it. */
.js .reveal { visibility: hidden; }

.js .reveal.is-in {
  visibility: visible;
  animation: fadeInUp 1.25s ease both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { visibility: visible; animation: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 980px) {
  .section { padding: 68px 0; }

  .nav {
    position: fixed;
    z-index: 70;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: var(--pale);
    padding: 20px 24px 28px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { font-size: 0.85rem; letter-spacing: 0.08em; padding: 14px 0; width: 100%; }
  .nav-toggle { display: block; }
  .brand img { height: 62px; }

  .hero__copy,
  .split, .split--wide-left,
  .value-band,
  .benefit, .benefit--flip .benefit__media,
  .cta-band,
  .contact-layout,
  .page-intro,
  .srv-detail,
  .footer-top,
  .footer-card { grid-template-columns: 1fr; gap: 32px; }

  .benefit--flip .benefit__media { order: 0; }
  .benefit__text, .benefit--flip .benefit__text { padding: 8px 20px 24px; }
  .srv-row { grid-template-columns: 1fr; gap: 20px; }
  .contact-map { margin-top: 32px; }
  .contact-cards { gap: 20px; }
  /* stacked: a proportional shape instead of a fixed height, which cut people
     off the sides on phones and letterboxed them on tablets */
  .srv-detail img { height: auto; aspect-ratio: 16 / 9; }
  .benefit img { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .pill-grid { grid-template-columns: 1fr 1fr; }
  .check-list { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .value-band { padding: 40px 28px; }
  .cta-band__panel { padding: 44px 32px; }
  .footer-base { flex-direction: column; gap: 10px; }
}

@media (max-width: 620px) {
  .contact-map { height: 300px; }
  .form-grid { grid-template-columns: 1fr; }
  .pill-grid { grid-template-columns: 1fr; }
  .stats { gap: 32px; }
  .stat { flex: 1 1 40%; }
  .page-hero img { height: 240px; }
}


/* ---------------------------------------------------------- legal pages */

/* Text a screen reader announces but the eye does not see, used for
   "(opens in a new tab)" on links that open a new tab. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.legal { padding: 64px 0 96px; }

/* comfortable reading width for long text, left aligned */
.legal__inner { max-width: 72ch; }

.legal h1 { margin-bottom: 8px; }
.legal__updated { font-size: 0.88rem; margin-bottom: 36px; }
.legal .lede { font-size: 1.08rem; color: var(--ink); margin-bottom: 8px; }

.legal h2 { font-size: 1.5rem; margin: 48px 0 14px; }
.legal h3 { font-size: 1.08rem; font-weight: 600; margin: 26px 0 8px; }

.legal ul { padding-left: 1.2em; margin: 0 0 1rem; }
.legal li { margin-bottom: 6px; }

.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover,
.legal a:focus-visible { color: var(--orange); }

/* tables scroll inside themselves on narrow screens rather than pushing
   the page wider than the phone */
.legal__table { overflow-x: auto; margin: 8px 0 18px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.legal th,
.legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.legal th { color: var(--ink); font-weight: 600; background: var(--pale); }
.legal td:first-child { color: var(--ink); font-weight: 500; width: 34%; }

.legal__summary {
  margin-top: 56px;
  padding: 28px 32px;
  background: var(--pale);
  border-radius: var(--r);
}
.legal__summary h2 { margin-top: 0; }
.legal__summary ul { list-style: none; padding: 0; margin: 0; }
.legal__summary li { margin-bottom: 8px; }
.legal__summary li:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
  .legal { padding: 40px 0 64px; }
  .legal h2 { font-size: 1.3rem; margin-top: 40px; }
  .legal__summary { padding: 22px 20px; }
  .legal td:first-child { width: auto; }
}


/* ------------------------------------------------- privacy policy dialog */

/* The footer and contact form links point at privacy.html and work on their
   own. This turns them into a dialog over the current page, so nobody has to
   leave a half filled form to read the policy. The text is fetched from
   privacy.html itself, so there is only ever one copy of the wording. */

.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.privacy-modal[hidden] { display: none; }

.privacy-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 28, 29, 0.55);
  animation: privacy-fade 0.2s ease-out;
}

.privacy-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(780px, 100%);
  max-height: min(860px, 88vh);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  animation: privacy-rise 0.24s ease-out;
}

@keyframes privacy-fade { from { opacity: 0; } }
@keyframes privacy-rise { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .privacy-modal__backdrop,
  .privacy-modal__panel { animation: none; }
}

.privacy-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding: 22px 20px 22px 40px;
  border-bottom: 1px solid var(--line);
}

.privacy-modal__bar h2 {
  margin: 0;
  font-size: 1.35rem;
  color: var(--ink);
}

.privacy-modal__close {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--body);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.privacy-modal__close svg { width: 18px; height: 18px; fill: currentColor; }
.privacy-modal__close:hover { background: var(--pale); color: var(--ink); }
.privacy-modal__close:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.privacy-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 40px 36px;
}

/* The policy arrives inside its own .legal wrapper so that every rule above
   still applies to it. Only the things the page needs and the dialog does not
   are undone here: the page's own top and bottom padding, its reading width,
   which the narrower panel already sets, and its <h1>, which the bar above
   the text has already said. */
.privacy-modal__body .legal { padding: 0; }
.privacy-modal__body .legal__inner { max-width: none; }
.privacy-modal__body .legal__inner > h1 { display: none; }
.privacy-modal__body .legal__updated { margin-top: 24px; }

.privacy-modal__status { padding: 40px 0; color: var(--body); }

.privacy-modal__full {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

/* This line sits outside the policy text, so it needs the same link
   treatment '.legal a' gives everything inside it. */
.privacy-modal__full a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.privacy-modal__full a:hover,
.privacy-modal__full a:focus-visible { color: var(--orange); }

body.is-modal-open { overflow: hidden; }

@media (max-width: 620px) {
  .privacy-modal { padding: 0; }

  .privacy-modal__panel {
    width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }

  .privacy-modal__bar { padding: 14px 12px 14px 20px; }
  .privacy-modal__bar h2 { font-size: 1.15rem; }
  .privacy-modal__body { padding: 4px 20px 32px; }
}