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

    :root {
      --navy:      #0A1628;
      --navy-mid:  #EDF1F7;
      --navy-light:#E2E8F1;
      --teal:      #00B4A6;
      --teal-dark: #009B8E;
      --white:     #FFFFFF;
      --grey-100:  #F4F6F9;
      --grey-400:  #8E9DB8;
      --grey-600:  #5A6B85;
      --text:      #10203A;
      --text-dim:  #51617A;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: #FFFFFF;
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* ── NAV ─────────────────────────────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 5%;
      height: 88px;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid transparent;
      box-shadow: 0 2px 10px rgba(10,22,40,0.06);
    }

    .nav-logo {
      display: flex; align-items: center; gap: 12px; text-decoration: none;
    }
    .nav-logo img { height: 72px; width: auto; display: block; }
    .nav-brand {
      font-size: 1.15rem; font-weight: 700; letter-spacing: 0.04em;
      color: var(--navy); text-transform: uppercase;
    }
    .nav-brand span { color: var(--teal); }

    .nav-links {
      display: flex; align-items: center; gap: 2rem; list-style: none;
    }
    .nav-links a {
      color: var(--text-dim); text-decoration: none; font-size: 0.9rem;
      font-weight: 500; transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--navy); }

    .nav-cta {
      background: var(--teal); color: var(--navy) !important;
      padding: 0.5rem 1.25rem; border-radius: 6px; font-weight: 600 !important;
      font-size: 0.875rem !important; transition: background 0.2s !important;
    }
    .nav-cta:hover { background: var(--teal-dark) !important; color: var(--navy) !important; }

    .blink-cursor {
      color: var(--teal, #00B4A6);
      font-style: normal;
      animation: blink-caret 1s step-end infinite;
      margin-left: 3px;
    }
    @keyframes blink-caret {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0; }
    }
    #rotate-word {
      display: inline-block;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    #rotate-word.fade-out {
      opacity: 0;
      transform: translateY(-8px);
    }

    /* ── HERO ─────────────────────────────────────────────────────── */
    #hero {
      /* Was min-height:100vh, which on a short or very tall viewport left
         huge dead bands above and below the content. Cap it so the hero is
         generous but never taller than it needs to be, and match the 100px
         vertical rhythm the other sections use. */
      min-height: min(88vh, 820px);
      display: flex; flex-direction: column; justify-content: center;
      padding: 160px 5% 100px;
      position: relative; overflow: hidden;
    }
    @media (max-width: 900px) {
      #hero { min-height: auto; padding: 120px 5% 72px; }
    }
    #hero::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(0,180,166,0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 4rem; align-items: center; max-width: 1200px; margin: 0 auto; width: 100%;
    }

    .hero-title {
      font-size: clamp(2.4rem, 5vw, 3.6rem);
      font-weight: 900; line-height: 1.08; letter-spacing: -0.02em;
      color: var(--navy); margin-bottom: 1.5rem;
    }
    .hero-title em {
      font-style: normal; color: var(--teal);
    }

    .hero-sub {
      font-size: 1.05rem; color: var(--text-dim); line-height: 1.75;
      max-width: 520px; margin-bottom: 2.5rem;
    }

    .hero-actions {
      display: flex; gap: 1rem; flex-wrap: wrap;
    }

    .btn-primary {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: var(--teal); color: var(--navy);
      padding: 0.85rem 1.75rem; border-radius: 8px;
      font-weight: 700; font-size: 0.95rem; text-decoration: none;
      transition: background 0.2s, transform 0.15s; white-space: nowrap;
    }
    .btn-primary:hover { background: var(--teal-dark); transform: translateY(-1px); }

    .btn-outline {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: transparent; color: var(--navy);
      padding: 0.85rem 1.75rem; border-radius: 8px;
      font-weight: 600; font-size: 0.95rem; text-decoration: none;
      border: 1.5px solid rgba(0,0,0,0.2);
      transition: border-color 0.2s, color 0.2s;
    }
    .btn-outline:hover { border-color: var(--teal); color: var(--teal); }

    /* ── TRUST BADGES ─────────────────────────────────────────────── */
    .trust-bar {
      border-top: 1px solid rgba(0,0,0,0.06);
      border-bottom: 1px solid rgba(0,0,0,0.06);
      padding: 1.5rem 5%;
      background: #F1F4F9;
    }
    .trust-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
    }
    .trust-label {
      font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--text-dim); white-space: nowrap;
    }
    .trust-badges {
      display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
    }
    .trust-badge {
      font-size: 0.85rem; font-weight: 600; color: var(--grey-400);
      padding: 0.3rem 0.9rem;
      border: 1px solid rgba(0,0,0,0.1); border-radius: 4px;
      transition: color 0.2s, border-color 0.2s;
    }
    .trust-badge:hover { color: var(--teal); border-color: var(--teal); }

    /* ── SECTION BASE ────────────────────────────────────────────── */
    section { padding: 100px 5%; }

    .section-label {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--teal); margin-bottom: 0.75rem;
    }
    .section-title {
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      font-weight: 800; color: var(--navy); line-height: 1.15; letter-spacing: -0.02em;
      margin-bottom: 1rem;
    }
    .section-sub {
      font-size: 1rem; color: var(--text-dim); max-width: 560px; line-height: 1.75;
      margin-bottom: 3.5rem;
    }

    .section-inner { max-width: 1200px; margin: 0 auto; }

    /* ── VALUE PROPS ──────────────────────────────────────────────── */
    .value-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem; margin-top: 3rem;
    }
    .value-card {
      padding: 1.75rem;
      background: var(--navy-mid);
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: 12px;
    }
    .value-icon {
      width: 44px; height: 44px;
      background: rgba(0,180,166,0.12);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1rem; font-size: 1.3rem;
    }
    .value-card h3 {
      font-size: 0.95rem; font-weight: 700; color: var(--navy);
      margin-bottom: 0.5rem;
    }
    .value-card p { font-size: 0.875rem; color: var(--text-dim); line-height: 1.65; }

    /* ── SERVICES ─────────────────────────────────────────────────── */
    #services { background: var(--navy-mid); }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 1.5rem;
    }

    .service-card {
      background: var(--navy-mid);
      border: 1px solid rgba(0,0,0,0.07);
      border-radius: 14px;
      padding: 2rem;
      transition: border-color 0.25s, transform 0.2s;
      position: relative; overflow: hidden;
    }
    .service-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: var(--teal); opacity: 0;
      transition: opacity 0.25s;
    }
    .service-card:hover { border-color: rgba(0,180,166,0.3); transform: translateY(-3px); }
    .service-card:hover::before { opacity: 1; }

    .service-num {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
      color: var(--teal); text-transform: uppercase; margin-bottom: 0.65rem;
    }
    .service-card h3 {
      font-size: 1.15rem; font-weight: 700; color: var(--navy);
      margin-bottom: 0.4rem;
    }
    .service-tagline {
      font-size: 0.85rem; color: var(--teal); font-weight: 500;
      margin-bottom: 1rem;
    }
    .service-desc {
      font-size: 0.875rem; color: var(--text-dim); line-height: 1.7;
      margin-bottom: 1.5rem;
    }
    .service-list {
      list-style: none; display: flex; flex-direction: column; gap: 0.45rem;
    }
    .service-list li {
      font-size: 0.825rem; color: var(--text-dim);
      display: flex; align-items: center; gap: 0.6rem;
    }
    .service-list li::before {
      content: ''; flex-shrink: 0;
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--teal);
    }

    /* ── CREDENTIALS ──────────────────────────────────────────────── */
    .certs-tabs {
      display: flex; gap: 0.5rem; margin-bottom: 2.5rem;
    }
    .cert-tab {
      padding: 0.5rem 1.25rem; border-radius: 6px; cursor: pointer;
      font-size: 0.875rem; font-weight: 600;
      border: 1.5px solid rgba(0,0,0,0.1);
      color: var(--text-dim); background: transparent;
      transition: all 0.2s;
    }
    .cert-tab.active {
      background: var(--teal); color: var(--navy);
      border-color: var(--teal);
    }

    .cert-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.25rem;
    }
    .cert-card {
      background: var(--navy-mid);
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: 12px;
      padding: 1.5rem;
      transition: border-color 0.2s;
    }
    .cert-card:hover { border-color: rgba(0,180,166,0.25); }

    .cert-acronym {
      font-size: 1.5rem; font-weight: 900; color: var(--teal);
      letter-spacing: -0.02em; margin-bottom: 0.25rem;
    }
    .cert-name {
      font-size: 0.8rem; font-weight: 600; color: var(--navy);
      margin-bottom: 0.75rem; line-height: 1.35;
    }
    .cert-meaning {
      font-size: 0.8rem; color: var(--text-dim); line-height: 1.65;
    }

    /* ── ABOUT ────────────────────────────────────────────────────── */
    #about { background: var(--navy-mid); }

    .about-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start;
    }
    .about-body p {
      color: var(--text-dim); font-size: 1rem; line-height: 1.8;
      margin-bottom: 1.25rem;
    }

    .about-stats {
      display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem;
    }
    .stat {
      padding: 1.25rem;
      background: var(--navy-mid);
      border: 1px solid rgba(0,0,0,0.07);
      border-radius: 10px;
    }
    .stat-label {
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 0.4rem;
    }
    .stat-value {
      font-size: 0.95rem; font-weight: 700; color: var(--navy);
    }

    .about-right {}
    .person-card {
      background: var(--navy-mid);
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 14px;
      overflow: hidden; margin-bottom: 1.5rem;
    }
    .person-header {
      padding: 1.75rem 1.75rem 1.25rem;
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .person-name {
      font-size: 1.15rem; font-weight: 800; color: var(--navy);
      margin-bottom: 0.25rem;
    }
    .person-title {
      font-size: 0.825rem; color: var(--teal); font-weight: 500;
    }
    .person-tags {
      padding: 1.25rem 1.75rem;
      display: flex; flex-wrap: wrap; gap: 0.5rem;
    }
    .about-tag {
      font-size: 0.75rem; font-weight: 600;
      padding: 0.3rem 0.75rem; border-radius: 4px;
      background: rgba(0,180,166,0.1);
      border: 1px solid rgba(0,180,166,0.2);
      color: var(--teal);
    }

    .cve-block {
      background: var(--navy-mid);
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 14px; overflow: hidden;
    }
    .cve-header {
      padding: 1rem 1.5rem;
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em;
      text-transform: uppercase; color: var(--text-dim);
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .cve-list { list-style: none; }
    .cve-item {
      padding: 0.85rem 1.5rem;
      border-bottom: 1px solid rgba(0,0,0,0.04);
      display: flex; flex-direction: column; gap: 0.2rem;
    }
    .cve-item:last-child { border-bottom: none; }
    .cve-id {
      font-size: 0.8rem; font-weight: 700; color: var(--teal); font-family: monospace;
    }
    .cve-desc {
      font-size: 0.78rem; color: var(--text-dim);
    }

    /* ── CONTACT ──────────────────────────────────────────────────── */
    .contact-grid {
      display: grid; grid-template-columns: 1fr 1.4fr; gap: 5rem; align-items: start;
    }
    .contact-info { display: flex; flex-direction: column; gap: 1.75rem; }
    .contact-item h4 {
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.12em; color: var(--teal); margin-bottom: 0.35rem;
    }
    .contact-item p, .contact-item a {
      font-size: 0.95rem; color: var(--text-dim);
      text-decoration: none; line-height: 1.6;
    }
    .contact-item a:hover { color: var(--teal); }

    form {
      background: var(--navy-mid);
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 16px; padding: 2.5rem;
    }
    .form-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    }
    .form-group { margin-bottom: 1.25rem; }
    label {
      display: block; font-size: 0.8rem; font-weight: 600;
      color: var(--text-dim); margin-bottom: 0.4rem;
      letter-spacing: 0.03em;
    }
    input, textarea, select {
      width: 100%;
      background: #FFFFFF;
      border: 1px solid rgba(0,0,0,0.1);
      border-radius: 8px;
      padding: 0.75rem 1rem;
      font-family: inherit; font-size: 0.9rem;
      color: var(--navy);
      transition: border-color 0.2s;
      -webkit-appearance: none;
    }
    input::placeholder, textarea::placeholder { color: var(--grey-600); }
    input:focus, textarea:focus, select:focus {
      outline: none; border-color: var(--teal);
    }
    select { color: var(--grey-600); cursor: pointer; }
    select option { color: var(--navy); background: #FFFFFF; }
    textarea { resize: vertical; min-height: 120px; }
    .form-submit {
      width: 100%;
      background: var(--teal); color: var(--navy);
      border: none; border-radius: 8px;
      padding: 0.9rem 1.5rem;
      font-family: inherit; font-size: 0.95rem; font-weight: 700;
      cursor: pointer; transition: background 0.2s, transform 0.15s;
      margin-top: 0.5rem;
    }
    .form-submit:hover { background: var(--teal-dark); transform: translateY(-1px); }

    /* ── FOOTER ──────────────────────────────────────────────────── */
    footer {
      background: #EDF1F7;
      border-top: 1px solid rgba(0,0,0,0.06);
      padding: 60px 5% 30px;
    }
    .footer-inner { max-width: 1200px; margin: 0 auto; }
    .footer-top {
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr 1fr;
      gap: 3rem; padding-bottom: 3rem;
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .footer-brand {}
    .footer-brand-line {
      display: flex; align-items: center; gap: 10px; margin-bottom: 1rem;
    }
    .footer-brand-line img { height: 38px; width: auto; display: block; }
    .footer-brand-name {
      font-size: 1rem; font-weight: 700; color: var(--navy);
      text-transform: uppercase; letter-spacing: 0.06em;
    }
    .footer-tagline {
      font-size: 0.8rem; color: var(--text-dim); line-height: 1.65;
      max-width: 240px;
    }
    .footer-col .footer-head {
      /* was h5; promoted to h2 for valid heading order */
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.12em; color: var(--text-dim); margin-bottom: 1rem;
    }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
    .footer-links a {
      font-size: 0.85rem; color: var(--grey-600); text-decoration: none;
      transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--teal); }
    .footer-bottom {
      padding-top: 1.75rem;
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 1rem;
    }
    .footer-legal { font-size: 0.78rem; color: var(--grey-600); }

    /* ── RESPONSIVE ───────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .hero-grid { grid-template-columns: 1fr; text-align: center; }
      .hero-sub { margin: 0 auto 2.5rem; }
      .hero-actions { justify-content: center; }
      .about-grid { grid-template-columns: 1fr; gap: 3rem; }
      .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
    }
    @media (max-width: 640px) {
      .nav-logo img { height: 46px; }
      nav { padding: 0 4%; }
      .nav-links { display: none; }
      section { padding: 70px 4%; }
      .form-row { grid-template-columns: 1fr; }
      .footer-top { grid-template-columns: 1fr; }
      .about-stats { grid-template-columns: 1fr 1fr; }
    }

    /* ── ACCREDITATIONS ──────────────────────────────────────────── */
    .trust-strip {
      border-top: 1px solid rgba(0,0,0,0.06);
      border-bottom: 1px solid rgba(0,0,0,0.06);
      background: #F1F4F9;
      padding: 1.6rem 6%;
    }
    .trust-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; align-items: center; justify-content: center;
      gap: 2.6rem; flex-wrap: wrap;
    }
    .trust-label {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--grey-600); white-space: nowrap;
    }
    .trust-item {
      display: flex; align-items: center; gap: 0.6rem;
      color: var(--text); font-size: 0.9rem; font-weight: 600;
      text-decoration: none; transition: color 0.2s;
    }
    .trust-item:hover { color: var(--teal); }
    .trust-item svg { flex-shrink: 0; }
    .trust-item .badge-img { height: 40px; width: auto; display: block; }

    .accred-band {
      background: linear-gradient(180deg, rgba(0,180,166,0.06), transparent 70%);
      border: 1px solid rgba(0,180,166,0.22);
      border-radius: 16px;
      padding: 2rem;
      margin-bottom: 3rem;
    }
    .accred-head {
      display: flex; align-items: baseline; gap: 0.9rem;
      flex-wrap: wrap; margin-bottom: 0.5rem;
    }
    .accred-head h3 {
      font-size: 1.35rem; font-weight: 800; color: var(--navy); letter-spacing: -0.01em;
    }
    .accred-note { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 1.75rem; max-width: 70ch; }
    .accred-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 1.1rem;
    }
    .accred-card {
      background: var(--navy-mid);
      border: 1px solid rgba(0,0,0,0.07);
      border-radius: 12px;
      padding: 1.4rem;
      display: flex; flex-direction: column; gap: 0.85rem;
      transition: border-color 0.2s, transform 0.2s;
      text-decoration: none;
    }
    .accred-card:hover { border-color: rgba(0,180,166,0.5); transform: translateY(-2px); }
    .accred-badge {
      height: 76px; display: flex; align-items: center; justify-content: flex-start;
    }
    .accred-badge img { max-height: 76px; max-width: 100%; width: auto; display: block; }
    /* shown only when the official badge file is not present yet */
    .accred-badge .badge-fallback {
      display: none;
      height: 72px; width: 72px; border-radius: 10px;
      background: rgba(0,180,166,0.10); border: 1px dashed rgba(0,180,166,0.45);
      color: var(--teal); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
      align-items: center; justify-content: center; text-align: center; padding: 0.4rem;
      text-transform: uppercase; line-height: 1.25;
    }
    .accred-badge.is-missing img { display: none; }
    .accred-badge.is-missing .badge-fallback { display: flex; }
    .accred-name { font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
    .accred-desc { font-size: 0.87rem; color: var(--text-dim); line-height: 1.55; }
    .accred-verify {
      font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em;
      color: var(--teal); text-transform: uppercase; margin-top: auto;
    }
    @media (max-width: 640px) {
      .trust-inner { gap: 1.4rem; }
      .accred-band { padding: 1.4rem; }
    }

    .trust-badge.accredited {
      display: flex; align-items: center; gap: 0.7rem;
      color: var(--text); text-decoration: none;
      padding: 0.5rem 0.9rem; line-height: 1.3;
    }
    .trust-badge.accredited:hover { color: var(--teal); border-color: rgba(0,180,166,0.5); }
    .trust-badge.accredited em { font-style: normal; color: var(--text-dim); font-weight: 500; }
    .trust-badge.accredited:hover em { color: var(--teal); }
    .accred-badge.inline { height: 38px; }
    .accred-badge.inline img { max-height: 38px; }
    .accred-badge.inline .badge-fallback {
      height: 34px; width: 34px; font-size: 0.55rem; border-radius: 8px;
    }

    /* A missing official badge collapses cleanly instead of leaving an empty
       box, so the cards still read as finished before the real art arrives. */
    .accred-badge.is-missing { display: none; }
    .accred-card { border-top: 2px solid var(--teal); }
    .trust-badge.accredited .accred-badge.inline.is-missing { display: flex; height: auto; }
    .trust-badge.accredited .accred-badge.inline.is-missing .badge-fallback {
      display: flex; height: auto; width: auto; border: 0; background: none;
      color: var(--teal); padding: 0;
    }

    /* Official CREST / IASME badges are artworked for white backgrounds. Drop them
       inside a .badge-plate so they sit on white rather than clashing with navy. */
    .badge-plate {
      display: inline-flex; align-items: center; justify-content: center;
      background: #FFFFFF; border-radius: 10px; padding: 0.6rem 0.75rem;
      margin-bottom: 0.9rem;
    }
    .badge-plate img { max-height: 60px; width: auto; display: block; }
    .trust-badge .badge-plate { padding: 0.35rem 0.45rem; margin: 0; border-radius: 7px; }
    .trust-badge .badge-plate img { max-height: 30px; }

    /* the two credential boxes read as a matched pair */
    #team-certifications { margin-bottom: 1.75rem; }
    #team-certifications .certs-tabs { margin-bottom: 1.25rem; }
    #team-certifications .cert-card { background: var(--navy-light); }

    /* ── HERO ACCREDITATIONS ──────────────────────────────────────────
       The CREST and IASME marks are artworked for white backgrounds, so they
       sit on a white panel rather than straight on the navy. CREST is given the
       full width of the panel; the other three run smaller beneath a divider. */
    .hero-accreds { display: flex; justify-content: center; align-items: center; }
    .accred-panel {
      display: flex; flex-direction: column; align-items: center;
      background: #FFFFFF; border-radius: 18px;
      padding: 2rem 2.25rem 1.75rem;
      width: 100%; max-width: 420px;
      box-shadow: 0 18px 48px rgba(0,0,0,0.32);
      text-decoration: none;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .accred-panel:hover {
      transform: translateY(-4px);
      box-shadow: 0 24px 60px rgba(0,180,166,0.22), 0 18px 48px rgba(0,0,0,0.32);
    }
    .ap-primary { display: flex; align-items: flex-start; justify-content: center; gap: 1.1rem; }
    .ap-primary img { width: 140px; height: auto; display: block; }
    .ap-divider {
      display: block; width: 100%; height: 1px;
      background: #E4E9F0; margin: 1.5rem 0 1.25rem;
    }
    /* The three row marks are supplied as very different artwork: Cyber
       Essentials and IASME Cyber Assurance are wide logos on white, while
       Quality Principles is a self-contained dark grey tile. Sized only by
       height they read as two loose logos and one odd grey box.
       Giving each an identical plate - same width, same height, same
       border - makes them a matched set. object-fit keeps each logo's own
       aspect ratio inside its plate. */
    .ap-row {
      display: flex; align-items: center; justify-content: center;
      /* .75rem not .85rem: five 94px badges need 306px of the 308px
         content width. At .85rem they break to 2 per line and leave an
         orphan on the last row. A sixth badge needs smaller tiles. */
      gap: .75rem; width: 100%; flex-wrap: wrap;
    }
    .ap-row img {
      flex: 0 0 auto;
      display: block;
      box-sizing: border-box;
      width: 94px; height: 64px;
      padding: 7px 9px;
      object-fit: contain;
      background: #FFFFFF;
      border: 1px solid #E4E9F0;
      border-radius: 9px;
    }

    @media (max-width: 900px) {
      .hero-accreds { margin-top: 2.5rem; }
      .accred-panel { max-width: 380px; margin: 0 auto; }
    }
    @media (max-width: 420px) {
      .accred-panel { padding: 1.5rem 1.25rem 1.25rem; }
      .ap-primary img { width: 116px; }
      .ap-row { gap: 1rem; }
      .ap-row img { width: 80px; height: 56px; padding: 6px 7px; }
    }

    /* ══════════════════════════════════════════════════════════════════
       FORCED LAYOUT OVERRIDES
       Appended last so they win on cascade order. No markup was changed.
       ══════════════════════════════════════════════════════════════════ */

    /* 1 — Company Accreditations: exactly 2 per row, block centred.
       Was repeat(auto-fit, minmax(230px, 1fr)), which gave 4 across on
       desktop and reflowed at every breakpoint. */
    .accred-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      max-width: 780px;
      margin-left: auto;
      margin-right: auto;
      justify-items: stretch;
    }
    /* an odd last card would sit alone on the left — centre it instead */
    .accred-grid > .accred-card:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      width: calc(50% - 0.55rem);
      justify-self: center;
    }

    /* 2 — Team certifications: all 3 on one row, both tabs, block centred.
       Each tab holds exactly 3 cards, so they sit as a single line rather
       than 2 + 1. */
    .cert-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      max-width: 1120px;
      margin-left: auto;
      margin-right: auto;
    }

    /* 3 — Tags under Daly Whyte: locked to 2 per row at every width.
       Was flex-wrap, so the count changed with the viewport. Grid with two
       equal tracks cannot reflow; minmax(0,1fr) stops long labels widening
       a column, so the pills never shrink or grow relative to each other. */
    .person-tags {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
    }
    .person-tags > .about-tag {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      flex: none;
      width: 100%;
      box-sizing: border-box;
      hyphens: auto;
    }

    /* 4 — Services: exactly 2 per row, block centred.
       Was repeat(auto-fit, minmax(340px, 1fr)), which gave 3 across on wide
       screens and reflowed to 1 on narrow. */
    .services-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }
    .services-grid > .service-card:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      width: calc(50% - 0.75rem);
      justify-self: center;
    }

    /* keep the forced pairs on mobile — the point is that they never reflow */
    @media (max-width: 640px) {
      .accred-grid, .cert-grid, .services-grid { max-width: 100%; }
      .person-tags > .about-tag { font-size: 0.7rem; padding: 0.3rem 0.5rem; }
    }
  
    /* ══════════════════════════════════════════════════════════════════
       INTERIOR PAGE STYLES
       Added for service and location pages. Nothing above this comment
       has been changed from the original homepage stylesheet.
       ══════════════════════════════════════════════════════════════════ */

    /* Utility classes replacing former inline style attributes,
       so the CSP no longer needs 'unsafe-inline' for style-src. */
    .is-hidden      { display: none !important; }
    .teal-strong    { color: var(--teal); font-weight: 700; }
    .form-msg       { display: none; margin-top: 1rem; padding: 1rem;
                      border-radius: 8px; font-size: 0.875rem; }
    .form-msg.ok    { display: block; background: rgba(0,180,166,.1);
                      border: 1px solid rgba(0,180,166,.3); color: var(--teal); }
    .form-msg.err   { display: block; background: rgba(220,53,69,.1);
                      border: 1px solid rgba(220,53,69,.3); color: #dc3545; }

    /* ── SKIP LINK (accessibility) ─────────────────────────────────── */
    .skip-link {
      position: absolute; left: -9999px; top: 0; z-index: 200;
      background: var(--teal); color: var(--navy); padding: .75rem 1.25rem;
      font-weight: 700; border-radius: 0 0 8px 0; text-decoration: none;
    }
    .skip-link:focus { left: 0; }

    /* ── PAGE HERO (interior) ──────────────────────────────────────── */
    .page-hero {
      padding: 11.25rem 5% 3rem;
      background:
        radial-gradient(ellipse 90% 60% at 15% 0%, rgba(0,180,166,.10), transparent 60%),
        #F4F7FB;
      border-bottom: 1px solid rgba(0,180,166,.10);
    }
    .page-hero-inner { max-width: 1200px; margin: 0 auto; }
    .page-hero h1 {
      font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 900;
      line-height: 1.08; letter-spacing: -0.03em; color: var(--navy);
      margin: .75rem 0 1.25rem; max-width: 18ch;
    }
    .page-hero .lede {
      font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--text-dim);
      max-width: 62ch; line-height: 1.7;
    }
    .page-hero .hero-actions { margin-top: 2.25rem; }

    /* ── BREADCRUMBS ───────────────────────────────────────────────── */
    /* CRITICAL: the base stylesheet styles the bare `nav` element as the
       fixed 68px header bar. The breadcrumb is also a <nav>, so without a
       full reset it inherits position:fixed/top:0 and paints directly over
       the real navbar — hiding it on every interior page. Do not remove. */
    nav.crumbs {
      position: static; top: auto; left: auto; right: auto; z-index: auto;
      height: auto; padding: 0; margin: 0;
      background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
      border-bottom: 0; display: block;
    }
    .crumbs { font-size: .8125rem; color: var(--grey-600); }
    .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; }
    .crumbs a { color: var(--grey-400); text-decoration: none; }
    .crumbs a:hover { color: var(--teal); }
    .crumbs li + li::before { content: "/"; margin-right: .45rem; color: #3C4A63; }
    .crumbs [aria-current] { color: var(--teal); }

    /* ── PROSE ─────────────────────────────────────────────────────── */
    .prose { max-width: 68ch; }
    .prose > * + * { margin-top: 1.15rem; }
    .prose > :first-child { margin-top: 0; }
    .prose p { color: var(--text-dim); font-size: 1.0125rem; line-height: 1.78; }
    .prose h2 {
      font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--navy);
      letter-spacing: -0.02em; margin-top: 3rem; line-height: 1.2;
    }
    .prose h3 {
      font-size: 1.175rem; font-weight: 700; color: var(--navy);
      margin-top: 2.1rem; letter-spacing: -0.01em;
    }
    .prose ul, .prose ol { padding-left: 1.15rem; }
    .prose li {
      color: var(--text-dim); margin-bottom: .6rem; font-size: 1.0125rem;
      line-height: 1.7; padding-left: .35rem;
    }
    .prose li::marker { color: var(--teal); }
    .prose strong { color: var(--text); font-weight: 600; }
    .prose a { color: var(--teal); text-decoration: none;
               border-bottom: 1px solid rgba(0,180,166,.35); }
    .prose a:hover { border-bottom-color: var(--teal); }
    /* Code blocks & inline code — introduced by the vulnerability research
       (CVE) pages for PoC requests and payloads. The global reset zeroes pre
       padding/margins and the browser default (white-space:pre) never wraps,
       so long request lines and JSON payloads overflowed the content column.
       These rules wrap them and give the block an intentional panel look. */
    .prose code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      font-size: 0.9em; color: var(--text);
      background: var(--navy-mid); border: 1px solid rgba(0,0,0,.07);
      border-radius: 4px; padding: 0.08em 0.35em; overflow-wrap: anywhere;
    }
    .prose pre {
      background: var(--navy-mid); border: 1px solid rgba(0,0,0,.09);
      border-radius: 8px; padding: 1rem 1.15rem; max-width: 100%; overflow-x: auto;
    }
    .prose pre code {
      display: block; background: none; border: 0; border-radius: 0; padding: 0;
      font-size: 0.85rem; line-height: 1.6; color: var(--text);
      white-space: pre-wrap; overflow-wrap: anywhere;
    }

    .content-wrap { padding: 2.75rem 5% 5rem; }
    .content-inner { max-width: 1200px; margin: 0 auto; }
    .content-grid {
      display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 4rem;
      align-items: start;
    }

    /* ── SIDEBAR ───────────────────────────────────────────────────── */
    /* 88px nav + 24px breathing room. If the nav height changes, this and
       scroll-margin-top must change with it. */
    .side { position: sticky; top: 112px; display: grid; gap: 1.25rem; }
    .side-card {
      background: var(--navy-mid); border: 1px solid rgba(0,180,166,.14);
      border-radius: 12px; padding: 1.5rem;
    }
    .side-card h3 {
      font-size: .78rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .11em; color: var(--teal); margin-bottom: 1rem;
    }
    .side-card p { font-size: .875rem; color: var(--text-dim); line-height: 1.65; }
    /* Match .side-list a — the sidebar's established link treatment.
       Bright teal with a permanent underline fought the "Where We Work"
       card directly above and made the column look like two designs. */
    .side-card a { color: var(--text-dim); text-decoration: none;
                   transition: color .18s; }
    .side-card a:hover { color: var(--teal); }
    /* .side-card a above sets teal, which outranks .btn-primary on
       specificity (0,1,1 vs 0,1,0) — without this the button renders
       teal text on a teal fill and disappears. */
    .side-card a.btn-primary,
    .side-card a.btn-primary:hover,
    .side-card a.btn-primary:visited { color: var(--navy); border-bottom: 0; }
    .side-card a.btn-outline,
    .side-card a.btn-outline:hover { border-bottom: 0; }
    .side-list { list-style: none; display: grid; gap: .6rem; }
    .side-list a {
      color: var(--text-dim); text-decoration: none; font-size: .875rem;
      display: block; padding: .3rem 0; transition: color .18s;
    }
    .side-list a:hover, .side-list a[aria-current] { color: var(--teal); }
    .side-cta {
      background: linear-gradient(150deg, rgba(0,180,166,.13), rgba(0,180,166,.03));
      border: 1px solid rgba(0,180,166,.3);
    }
    .side-cta .btn-primary { width: 100%; text-align: center; margin-top: 1rem; }

    /* ── KEY FACTS STRIP ───────────────────────────────────────────── */
    .facts {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
      gap: 1px; background: rgba(0,180,166,.14); border: 1px solid rgba(0,180,166,.14);
      border-radius: 12px; overflow: hidden;
      /* No margin-top: the capsule is the first element in its column and
         must align with the top of the sidebar card beside it. */
      margin: 0 0 2.5rem;
    }
    .fact { background: var(--navy-mid); padding: 1.4rem 1.5rem; }
    .fact dt {
      font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
      color: var(--grey-600); font-weight: 700; margin-bottom: .45rem;
    }
    .fact dd { font-size: .95rem; color: var(--text); font-weight: 600; line-height: 1.5; }

    /* ── FAQ ───────────────────────────────────────────────────────── */
    .faq { display: grid; gap: .75rem; margin-top: 1.5rem; max-width: 68ch; }
    .faq details {
      background: var(--navy-mid); border: 1px solid rgba(0,180,166,.12);
      border-radius: 10px; overflow: hidden;
    }
    .faq details[open] { border-color: rgba(0,180,166,.3); }
    .faq summary {
      cursor: pointer; padding: 1.1rem 1.35rem; font-weight: 600;
      color: var(--navy); font-size: .975rem; list-style: none;
      display: flex; justify-content: space-between; gap: 1rem; align-items: center;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after {
      content: "+"; color: var(--teal); font-size: 1.3rem; font-weight: 400;
      line-height: 1; flex-shrink: 0;
    }
    .faq details[open] summary::after { content: "\2212"; }
    .faq summary:hover { color: var(--teal); }
    .faq .faq-body { padding: 0 1.35rem 1.25rem; }
    .faq .faq-body p { color: var(--text-dim); font-size: .935rem; line-height: 1.72; }

    /* ── CTA BAND ──────────────────────────────────────────────────── */
    .cta-band { padding: 4.5rem 5%; border-top: 1px solid rgba(0,180,166,.12);
                background: var(--navy-mid); }
    .cta-inner { max-width: 780px; margin: 0 auto; text-align: center; }
    .cta-inner h2 {
      font-size: clamp(1.6rem,3.4vw,2.3rem); font-weight: 800; color: var(--navy);
      letter-spacing: -0.02em; margin-bottom: 1rem;
    }
    .cta-inner p { color: var(--text-dim); margin-bottom: 2rem;
                   max-width: 52ch; margin-inline: auto; }
    .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

    /* ── RELATED ───────────────────────────────────────────────────── */
    .related {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
      gap: 1.25rem; margin-top: 1.75rem;
    }
    .related a {
      background: var(--navy-mid); border: 1px solid rgba(0,180,166,.12);
      border-radius: 12px; padding: 1.4rem; text-decoration: none; display: block;
      transition: transform .2s, border-color .2s;
    }
    .related a:hover { transform: translateY(-3px); border-color: rgba(0,180,166,.38); }
    .related .r-title { display: block; color: var(--navy); font-weight: 700;
                        font-size: 1rem; margin-bottom: .45rem; line-height: 1.35; }
    .related .r-desc  { display: block; color: var(--text-dim); font-size: .855rem;
                        line-height: 1.6; }

    /* ── LOCAL / COVERAGE ──────────────────────────────────────────── */
    .coverage {
      display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem;
    }
    .coverage span {
      background: rgba(0,180,166,.08); border: 1px solid rgba(0,180,166,.22);
      color: var(--text-dim); padding: .42rem .85rem; border-radius: 100px;
      font-size: .8125rem;
    }

    @media (max-width: 980px) {
      .content-grid { grid-template-columns: 1fr; gap: 3rem; }
      .side { position: static; }
      .page-hero { padding: 9.75rem 5% 2.25rem; }
    }

    .mt-lg   { margin-top: 3rem !important; }
    .mt-sm   { margin-top: .6rem; }
    .callout { margin-bottom: 2.5rem; border-color: rgba(0,180,166,.32); }
    .callout h3 { color: var(--teal); }
    /* The global reset zeroes p margins and .side-card p sets none, so
       consecutive paragraphs in a callout ran together. Give them a break. */
    .callout p + p { margin-top: 1rem; }

    body.e404 { padding-top: 88px; }

    /* ── ABOUT SIDEBAR: CVE tags + facts panel ──────────────────────── */
    /* CVE identifiers inline in the At a Glance disclosure row */
    .fact-row dd.cve-ids {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: .78rem; line-height: 1.75;
    }
    .fact-row dd.cve-ids a {
      color: var(--text-dim); text-decoration: none;
      border-bottom: 1px solid rgba(0,180,166,.25);
      transition: color .18s, border-color .18s;
      white-space: nowrap;
    }
    .fact-row dd.cve-ids a:hover {
      color: var(--teal); border-bottom-color: var(--teal);
    }

    .fact-block {
      background: var(--navy-mid);
      border: 1px solid rgba(0,180,166,.14);
      border-radius: 12px; padding: 1.5rem; margin-top: 1.25rem;
    }
    .fact-header {
      font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .11em; color: var(--teal); margin-bottom: 1.1rem;
    }
    .fact-list { display: grid; gap: .9rem; }
    .fact-row { display: grid; gap: .15rem; }
    .fact-row dt {
      font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
      color: var(--grey-600); font-weight: 700;
    }
    .fact-row dd { font-size: .85rem; color: var(--text-dim); line-height: 1.5; }
    /* Inline verification link, sits at the end of a fact-row value */
    .fact-inline-link {
      color: var(--teal); text-decoration: none; white-space: nowrap;
      border-bottom: 1px solid rgba(0,180,166,.3);
      transition: border-color .18s;
    }
    .fact-inline-link:hover { border-bottom-color: var(--teal); }

    /* ── CERT GRID: mobile collapse ─────────────────────────────────────
       The base stylesheet pins .cert-grid to repeat(3, minmax(0,1fr))
       with !important so the three team certifications share one row on
       desktop. That override also applied on phones, forcing three
       ~110px columns into a 390px viewport and wrapping every card to
       one word per line. These rules undo it below the breakpoints. */
    @media (max-width: 900px) {
      .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      /* odd card out spans the full width rather than sitting half-empty */
      .cert-grid > .cert-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
    }

    @media (max-width: 640px) {
      .cert-grid { grid-template-columns: 1fr !important; }
      .cert-grid > .cert-card:last-child:nth-child(odd) { grid-column: auto; }
      .cert-card { padding: 1.25rem; }
      /* long certification names must not force horizontal overflow */
      .cert-card h4, .cert-card h5 { overflow-wrap: anywhere; hyphens: auto; }
    }

    /* Tab row wraps rather than squashing on narrow screens */
    @media (max-width: 520px) {
      .cert-tabs { flex-wrap: wrap; gap: .5rem; }
      .cert-tab { flex: 1 1 auto; text-align: center; }
    }

    /* Same problem, same fix: .accred-grid and .services-grid are also
       pinned with !important and stayed at 2 columns down to 390px. */
    @media (max-width: 640px) {
      .accred-grid, .services-grid { grid-template-columns: 1fr !important; }
      .accred-grid > *:last-child:nth-child(odd),
      .services-grid > *:last-child:nth-child(odd) {
        grid-column: auto; width: auto; justify-self: stretch;
      }
    }

    /* mobile nav toggle */
    .nav-toggle { display:none; background:none; border:0; color:var(--teal);
                  font-size:1.5rem; cursor:pointer; line-height:1; padding:.25rem .5rem; }
    /* Seven nav items need to collapse earlier than the original 860px.
       Between ~861-1150px the row overflowed the fixed 68px bar and pushed
       items (and sometimes the logo) off-screen. */
    nav { flex-wrap: nowrap; }
    .nav-links { flex-wrap: nowrap; }
    .nav-links a { white-space: nowrap; }

    /* Tighten spacing just above the collapse point so seven items never
       crowd the logo. The old (min-width:861px) variant of this rule was
       dead once the hamburger moved to 1200px. */
    @media (max-width: 1450px) and (min-width: 1251px) {
      .nav-links { gap: 1.25rem; font-size: .9rem; }
    }

    @media (max-width: 1250px) {
      .nav-toggle { display:block; }
      .nav-links { position:fixed; top:88px; left:0; right:0; flex-direction:column;
                   align-items:stretch; gap:0; background:rgba(255,255,255,0.97);
                   border-bottom:1px solid rgba(0,180,166,.15); padding:.5rem 5% 1.25rem;
                   display:none; max-height:calc(100vh - 88px); overflow-y:auto; }
      .nav-links.open { display:flex; }
      .nav-links li { padding:.65rem 0; border-bottom:1px solid rgba(0,0,0,.05); }
      .nav-links .nav-cta { display:inline-block; margin-top:.75rem; }
    }

    .service-card h3 a.svc-link { color: inherit; text-decoration: none; }
    .service-card h3 a.svc-link:hover { color: var(--teal); }
    .service-list a { color: var(--text-dim); text-decoration: none;
                      border-bottom: 1px dotted rgba(0,180,166,.4); }
    .service-list a:hover { color: var(--teal); }

    /* Panel opens by default on desktop, so the bubble copy needs room to
       breathe without the card feeling cramped. */

    /* Toggle shows a close glyph while the panel is open, so the control
       reads as "dismiss" rather than "open" once it is already showing. */

    /* ── SECTION RHYTHM ─────────────────────────────────────────────────
       All sections were a flat 100px top and bottom at every width, which
       is generous on desktop and wasteful on a phone. Scale it. */
    @media (max-width: 900px) {
      #services, #credentials, #about, #contact { padding-top: 72px; padding-bottom: 72px; }
    }
    @media (max-width: 640px) {
      #services, #credentials, #about, #contact { padding-top: 56px; padding-bottom: 56px; }
      footer { padding-top: 44px; }
      .section-title { margin-bottom: 1.5rem; }
    }

    /* Badge panel: stop the shield dominating on small screens, and give
       the whole card a little less padding so it does not swamp the hero. */
    @media (max-width: 640px) {
      .accred-panel { padding: 1.5rem 1.5rem 1.25rem; max-width: 340px; }
      .ap-primary img { width: 108px; }
      .ap-divider { margin: 1.15rem 0 1rem; }
    }

    /* ── SCROLL CUES ────────────────────────────────────────────────────
       Sit at the foot of each homepage section and point at the next one.
       Anchor links, so they work with JavaScript disabled and keyboard
       users get them in the normal tab order. */
    .scroll-cue {
      display: flex; flex-direction: column; align-items: center; gap: .85rem;
      width: max-content; margin: 4rem auto 0;
      padding: .9rem 1.6rem; border-radius: 12px;
      text-decoration: none; color: var(--teal);
      transition: color .2s, background .2s;
    }
    .scroll-cue:hover { background: rgba(0,180,166,.06); }
    .scroll-cue:hover, .scroll-cue:focus-visible { color: var(--teal-dark); }
    .scroll-cue:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

    .scroll-cue-text {
      font-size: 1rem; font-weight: 700; letter-spacing: .22em;
      text-transform: uppercase;
    }
    .scroll-cue-arrow {
      width: 34px; height: 34px;
      border-right: 4px solid currentColor;
      border-bottom: 4px solid currentColor;
      transform: rotate(45deg);
      animation: cue-bob 2.4s ease-in-out infinite;
    }
    .scroll-cue:hover .scroll-cue-arrow { animation-play-state: paused; }
    @keyframes cue-bob {
      0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .55; }
      50%      { transform: rotate(45deg) translate(5px, 5px); opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .scroll-cue-arrow { animation: none; opacity: .8; }
    }
    @media (max-width: 640px) {
      .scroll-cue { margin-top: 2.75rem; padding: .75rem 1.2rem; }
      .scroll-cue-text { font-size: .85rem; }
      .scroll-cue-arrow { width: 20px; height: 20px; }
    }

    /* Services band: the grid inside needs no extra top gap because the
       band already provides padding. */
    #services-band .services-grid { margin-top: 0; }

    /* The nav is fixed at 68px, so any anchor jump lands with the heading
       hidden underneath it. scroll-margin-top pushes each target clear.
       This affects the existing nav and footer anchors too, not just the
       scroll cues. */
    :target { scroll-margin-top: 108px; }
    section[id], [id^="accred-"], #accreditations, #team-certifications,
    #contact, #about, #credentials, #services, #main {
      scroll-margin-top: 108px;
    }

    /* Hero cue: sits below the hero grid rather than after a content
       block, so it needs less clearance above than the section cues. The
       hero already has two buttons, so this is a quieter fallback for
       anyone who scrolls straight past them. */
    .scroll-cue--hero {
      margin-top: 2.75rem;
      color: var(--teal);
    }
    .scroll-cue--hero:hover { color: var(--teal-dark); }
    @media (max-width: 900px) {
      .scroll-cue--hero { margin-top: 2rem; }
    }

    /* ── TEAM CERTIFICATION STRIP ───────────────────────────────────────
       Individual images rather than one composited banner: each gets its
       own alt text, they stay sharp at any zoom, and swapping one badge
       does not mean regenerating the whole strip. White plates because
       the badges are mixed - CISSP is dark text on transparent and
       vanishes against the navy section background without one. */
    .cert-strip {
      display: flex; flex-wrap: wrap; align-items: center;
      justify-content: center; gap: 1rem;
      margin: 0 0 2rem;
    }
    .cert-strip img {
      flex: 0 0 auto; box-sizing: content-box;
      height: 64px; width: auto;
      padding: 9px 11px;
      background: #FFFFFF;
      border: 1px solid #E4E9F0;
      border-radius: 10px;
      transition: transform .18s, border-color .18s;
    }
    .cert-strip img:hover {
      transform: translateY(-2px);
      border-color: rgba(0,180,166,.45);
    }
    @media (max-width: 640px) {
      .cert-strip { gap: .7rem; margin-bottom: 1.5rem; }
      .cert-strip img { height: 48px; padding: 7px 9px; border-radius: 9px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cert-strip img { transition: none; }
      .cert-strip img:hover { transform: none; }
    }

    /* ── ABOUT PAGE: person blocks ──────────────────────────────────── */
    .person-block {
      border-top: 1px solid rgba(0,180,166,.18);
      padding-top: 2rem; margin-top: 2.75rem;
    }
    /* .prose spaces its DIRECT children with `> * + *`. Paragraphs inside
       .person-block are one level deeper, so they inherited no spacing at
       all and ran together. Re-apply the same rhythm inside the block. */
    .person-block > * + * { margin-top: 1.15rem; }
    .person-block > .person-h { margin-top: 0; }
    .person-block > .person-role { margin-top: .3rem; }
    .person-block > p:first-of-type { margin-top: 1.5rem; }
    .person-eyebrow {
      font-size: .7rem; font-weight: 700; letter-spacing: .16em;
      text-transform: uppercase; color: var(--teal); margin-bottom: .5rem;
    }
    .prose h2.person-h {
      font-size: 1.75rem; margin: 0 0 .2rem; letter-spacing: -.02em;
    }
    .person-role {
      font-size: 1rem; color: var(--text-dim);
    }
    .person-facts { margin-top: 1.5rem; }
    .person-facts .fact-row { margin-bottom: .9rem; }

    /* Homepage about teaser */
    .about-lead {
      color: var(--text-dim); font-size: 1.0625rem; line-height: 1.75;
      margin-bottom: 1.15rem; max-width: 68ch;
    }
    #about .btn-outline { margin-top: .85rem; }

    /* A leading h2 carries margin-top: 3rem, meant to separate it from the
       text above. When it is the FIRST thing in .prose there is nothing
       above it, so that margin just drops the heading below the sidebar
       card and leaves a dead band under the hero. Reset it. */
    .prose > *:first-child { margin-top: 0; }
    .prose > h2:first-child,
    .prose > h3:first-child { margin-top: 0; }

    /* ── FACTS CAPSULE ALIGNMENT ────────────────────────────────────────
       .fact cells carry 1.5rem of horizontal padding, so the capsule's
       TEXT sat 24px right of the headings below it, which align to the
       capsule's border. Pull the capsule out by its own padding plus the
       1px border so the text lines up instead. The card then bleeds
       slightly wider than the prose column, which reads as deliberate. */
    .facts {
      margin-left: calc(-1.5rem - 1px);
      margin-right: calc(-1.5rem - 1px);
      margin-top: 0;
    }
    @media (max-width: 900px) {
      /* Column padding is tighter here, so a full bleed would clip. */
      .facts { margin-left: 0; margin-right: 0; }
    }

/* ── Article / press-release, privacy page, misc (moved out of inline styles for CSP) ── */
#main .content-grid > div, #main .content-grid > aside { min-width: 0; }
.pr-figure { float: right; width: 190px; max-width: 40%; margin: .25rem 0 1rem 1.75rem; }
.pr-figure img { width: 100%; height: auto; display: block; border-radius: 12px; }
.pr-lead { font-size: 1.15rem; line-height: 1.6; }
.pr-cta-inline { margin: 1.75rem 0; }
.pr-meta { color: var(--text-dim); font-weight: 600; font-size: .95rem; margin: -.25rem 0 0; }
.prose a.btn-primary, .prose a.btn-outline { color: var(--navy); border-bottom: 0; }
.prose a.btn-primary:hover { color: var(--navy); border-bottom: 0; }
@media (max-width:640px){ .pr-figure { float: none; width: auto; max-width: 100%; margin: 0 0 1.5rem; } }

.cve-pending { color: var(--text-dim); font-size: 0.85em; }

.pp-meta { color: var(--text-dim); font-size: .95rem; margin: -.25rem 0 2rem; }
.pp-summary { background: var(--navy-mid); border: 1px solid rgba(0,180,166,.32); border-left: 4px solid var(--teal); border-radius: 12px; padding: 1.25rem 1.5rem; margin: 0 0 2.5rem; }
.pp-summary p { margin: 0; color: var(--text); }
.pp-toc { background: var(--navy-mid); border: 1px solid rgba(0,0,0,.06); border-radius: 12px; padding: 1.4rem 1.75rem; margin: 0 0 2.75rem; }
.pp-toc h2 { margin-top: 0 !important; font-size: 1.1rem; }
.pp-toc ol { margin: .75rem 0 0; padding-left: 1.25rem; column-count: 2; column-gap: 2.5rem; }
.pp-toc li { margin: .3rem 0; break-inside: avoid; }
.pp-toc a { color: var(--text); text-decoration: none; }
.pp-toc a:hover { color: var(--teal); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.5rem; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .7rem .9rem; border: 1px solid var(--navy-light); vertical-align: top; }
.prose thead th { background: var(--navy-mid); color: var(--navy); font-weight: 700; }
@media (max-width:620px){ .pp-toc ol { column-count: 1; } }

.side-logo { display: block; max-width: 150px; height: auto; margin: .6rem auto 0; border-radius: 8px; }

.ap-row img.ap-wide { width: 158px; }

.ap-cb { display:block; margin-top:.55rem; font-size:.62rem; font-weight:700; letter-spacing:.045em; text-transform:uppercase; color:var(--teal); text-align:center; line-height:1.3; }

.ap-cb { display: flex; flex-direction: column; align-items: center; width: max-content; max-width: 100%; margin: .9rem auto .2rem; gap: .5rem; }
.ap-cb img { display: block; width: 170px; height: auto; }
.footer-cb-badge { display: block; margin-top: 1.1rem; width: 210px; max-width: 100%; height: auto; background: #fff; border-radius: 8px; padding: 9px 13px; box-sizing: border-box; }

/* ── Cyber Essentials quote form ─────────────────────────────── */
.ce-quote-section { padding: 3rem 5%; background: #F4F7FB; border-top: 1px solid rgba(0,180,166,.10); }
.ce-quote-inner { max-width: 760px; margin: 0 auto; }
.ce-quote-inner h2 { font-size: clamp(1.5rem,3vw,2rem); font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.ce-quote-inner > p { color: var(--text-dim); margin: .5rem 0 1.5rem; line-height: 1.7; }
.ce-quote { background: #fff; border: 2px solid var(--teal); border-radius: 16px; padding: 1.6rem; box-shadow: 0 14px 38px rgba(0,180,166,.16); }
.ceq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ceq-field { display: flex; flex-direction: column; }
.ceq-field label, .ceq-addons legend { font-size: .85rem; font-weight: 600; color: var(--navy); margin-bottom: .35rem; }
.ceq-field input, .ceq-field select { padding: .7rem .8rem; border: 1px solid rgba(10,22,40,.15); border-radius: 9px; font: inherit; color: var(--text); background: #fff; }
.ceq-field input:focus, .ceq-field select:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
.ceq-addons { border: 0; padding: 0; margin: 1.1rem 0 0; }
.ceq-addons legend { padding: 0; }
.ceq-check { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .9rem; border: 1px solid rgba(10,22,40,.12); border-radius: 9px; margin-top: .5rem; color: var(--text); cursor: pointer; }
.ceq-check input {
  -webkit-appearance: none; appearance: none;
  width: 1.2rem; height: 1.2rem; flex: 0 0 auto; margin-top: .1rem;
  border: 2px solid rgba(10,22,40,.3); border-radius: 5px; background: #fff;
  cursor: pointer; position: relative;
}
.ceq-check input:checked { background: var(--teal); border-color: var(--teal); }
.ceq-check input:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ceq-check input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.ceq-price { margin-left: auto; font-weight: 700; color: var(--navy); white-space: nowrap; padding-left: .6rem; }
.ceq-ct { display: flex; flex-direction: column; }
.ceq-ct strong { color: var(--navy); font-weight: 700; }
.ceq-cd { font-size: .82rem; color: var(--text-dim); font-weight: 400; margin-top: .15rem; line-height: 1.45; }
.ceq-total { margin: 1.2rem 0 1rem; font-size: 1.05rem; color: var(--text); }
.ceq-total strong { font-size: 1.5rem; color: var(--navy); }
.ceq-vat { color: var(--text-dim); font-size: .9rem; }
.ceq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#ce-quote-form .btn-primary { width: 100%; border: 0; cursor: pointer; font: inherit; }
@media (max-width: 600px) { .ceq-grid { grid-template-columns: 1fr; } }

.ceq-hint { margin: .35rem 0 0; font-size: .82rem; color: var(--text-dim); }
.ceq-check:has(input:checked) { border-color: var(--teal); background: rgba(0,180,166,.07); }

.ceq-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.ceq-actions > button { flex: 1 1 auto; text-align: center; border: 0; cursor: pointer; font: inherit; }
.ceq-actions .btn-outline { border: 1px solid rgba(10,22,40,.2); }
.ceq-actions button[disabled] { opacity: .55; cursor: not-allowed; }

.ceq-contact { margin: .8rem 0 0; font-size: .9rem; color: var(--text-dim); }
.ceq-contact a { color: var(--teal); }

[hidden] { display: none !important; }

.ce-quote-section { scroll-margin-top: 90px; }

/* ── About page ─────────────────────────────────────────────── */
.about-page-hero { padding-bottom: 0; background: linear-gradient(180deg,#f4f7fb,#ffffff); }
.about-hero { max-width:760px; margin:0 auto; padding:3.5rem 2rem 2rem; }
.about-hero .eyebrow { margin-bottom:.6rem; }
.about-hero h1 { font-size:2.5rem; line-height:1.08; margin:0 0 1rem; }
.about-hero .lede { font-size:1.12rem; color:var(--text-dim); }
.about-hero .hero-actions { margin-top:1.4rem; }
.about-body { max-width:760px; margin:0 auto; padding:1rem 2rem 0; }
.about-body h2 { margin-top:2rem; }
.pullquote { margin:2rem 0; padding:1.4rem 1.6rem; border-left:4px solid var(--teal); background:#f4f7fb; border-radius:0 12px 12px 0; font-size:1.15rem; color:var(--navy); font-weight:600; }
.creds { max-width:1000px; margin:2.5rem auto; padding:2rem; background:#fff; border:1px solid #e3e8ef; border-radius:16px; }
.creds h3 { text-align:center; margin:0 0 1.4rem; color:var(--navy); }
.creds-row { display:flex; flex-wrap:wrap; gap:2rem 2.5rem; align-items:center; justify-content:center; }
.creds-row img { height:56px; width:auto; }
.about-sig { font-weight:800; color:var(--navy); margin-top:1.6rem; }
.about-sig span { display:block; font-weight:500; color:var(--text-dim); font-size:.95rem; }
@media (max-width:820px){ .about-hero h1{font-size:2rem;} }

/* ── Video embed ── */
.offer-video { max-width: 760px; margin: 2rem auto 0; padding: 0 2rem; }
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 38px rgba(10,22,40,.14); background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── DCC enquiry: Cyber Essentials checkbox ─────────────────── */
.form-check { margin-top:.2rem; }
.form-check label { display:flex; align-items:flex-start; gap:.6rem; font-weight:500; cursor:pointer; line-height:1.4; }
.form-check input { margin-top:.2rem; width:18px; height:18px; flex:0 0 auto; accent-color:var(--teal); }

.dcc-hero-badge{height:74px;width:auto;display:block;margin:0 0 1rem;}

/* ── Sidebar fact list (inline links, e.g. DCC 'At a glance') ─── */
.side-facts { list-style: none; display: grid; gap: .55rem; font-size: .875rem; color: var(--text-dim); line-height: 1.4; }
.side-facts a { color: var(--teal); text-decoration: none; font-weight: 600; }
.side-facts a:hover { text-decoration: underline; }

/* ── Buy form trust/verification line ──────────────────────── */
.buy-trust { margin: -.2rem 0 1.2rem; font-size: .9rem; line-height: 1.5; color: var(--text-dim); }
.buy-trust a { color: var(--teal); text-decoration: none; font-weight: 600; }
.buy-trust a:hover { text-decoration: underline; }

/* ── DCC enquiry form: card with breathing room (inside content-wrap) ── */
.content-wrap > .ce-quote-section { margin: 2.75rem 0; border-top: 0; border-radius: 16px; }
.content-wrap > .ce-quote-section + .content-inner { margin-top: 0; }

.creds-row img.creds-crest { height: 88px; }

/* ── Fixed-fee pentest buy form ────────────────────────────── */
.pt-addons { border: 1px solid #e3e8ef; border-radius: 12px; padding: 1.1rem 1.2rem; margin: 1.2rem 0; }
.pt-addons h4 { margin: 0 0 .3rem; font-size: 1rem; color: var(--navy); }
.pt-addon { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .9rem; border: 1.5px solid #e3e8ef; border-radius: 10px; margin-bottom: .6rem; transition: border-color .15s, background .15s; }
.pt-addon:last-of-type { margin-bottom: 0; }
.pt-addon > input[type=checkbox] { margin-top: .25rem; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--teal); }
.pt-addon .ar-t { font-weight: 600; color: var(--navy); }
.pt-addon .ar-d { font-size: .85rem; color: var(--text-dim); }
.pt-addon .ar-p { margin-left: auto; font-weight: 700; color: var(--navy); white-space: nowrap; padding-left: .6rem; }
.pt-stepper { display: inline-flex; align-items: center; border: 1px solid #d5dbe4; border-radius: 8px; overflow: hidden; }
.pt-stepper button { width: 36px; height: 36px; border: 0; background: #f4f7fb; color: var(--navy); font-size: 1.25rem; cursor: pointer; line-height: 1; }
.pt-stepper button:hover { background: #e8eef6; }
.pt-stepper input { width: 46px; text-align: center; border: 0; border-left: 1px solid #e3e8ef; border-right: 1px solid #e3e8ef; height: 36px; font: inherit; -moz-appearance: textfield; }
.pt-stepper input::-webkit-outer-spin-button, .pt-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pt-total { display: flex; align-items: baseline; justify-content: space-between; margin: 1.1rem 0; padding-top: 1rem; border-top: 1px solid #e3e8ef; color: var(--navy); font-weight: 600; }
.pt-total .pt-amt { font-size: 1.6rem; font-weight: 800; }
.pt-addon-ip { padding-left: calc(.9rem + 18px + .7rem); }
.pt-ip-control { margin-left: auto; display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--navy); white-space: nowrap; }
.pt-note { text-align: center; margin: .7rem 0 0; font-size: .85rem; color: var(--text-dim); }

.fixedfee-cards a { border: 2px solid var(--teal); }

.ce-quote-inner > p a { color: var(--teal); font-weight: 600; text-decoration: none; }
.ce-quote-inner > p a:hover { text-decoration: underline; }

.form-privacy { margin: .8rem 0 0; text-align: center; font-size: .85rem; color: var(--text-dim); }

/* ── Selected-state highlight for options across all forms ──────── */
.pt-addon:has(input:checked), .pt-addon.is-active { border-color: var(--teal); background: rgba(0,180,166,.07); }
.form-check { border: 1px solid #e3e8ef; border-radius: 10px; padding: .75rem .9rem; transition: border-color .15s, background .15s; }
.form-check:has(input:checked) { border-color: var(--teal); background: rgba(0,180,166,.07); }

/* --- article byline (author + dates), added 2026-09-18 --- */
.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem;
  margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--grey-600);
}
.byline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.byline a:hover { color: var(--brand, #0b5); }
.byline time { color: var(--text-dim); }
.byline .byline-creds {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); border-left: 1px solid currentColor; padding-left: 0.85rem;
}
.byline .byline-updated { font-size: 0.8rem; color: var(--text-dim); }
@media (max-width: 560px) {
  .byline .byline-creds { border-left: 0; padding-left: 0; flex-basis: 100%; }
}

/* --- hero: slogan demoted out of the H1 so the heading carries the service terms --- */
.hero-slogan {
  /* sits between the H1 and the intro paragraph: close to the title it belongs
     to, with a clear break before the body copy */
  margin: 0 0 1.85rem; font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: 600; color: var(--text-dim); line-height: 1.3;
}
/* Was 0.85rem, when the headline was one block of large type. It now ends
   with the service line in smaller, lighter type, which sits too close in
   size and weight to the slogan for that gap to read as a break. */
.hero-title:has(+ .hero-slogan) { margin-bottom: 1.7rem; }
@media (max-width: 900px) { .hero-slogan { text-align: center; } }
.hero-slogan #rotate-word { color: var(--navy, inherit); font-style: italic; font-weight: 700; }

/* --- prose table responsive: keep wide tables from breaking the page on phones --- */
.prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto;
               -webkit-overflow-scrolling: touch; border-collapse: collapse; }
.prose table caption { text-align: left; font-size: .85rem; color: var(--text-dim);
                       padding-bottom: .5rem; white-space: normal; }
.prose th, .prose td { white-space: normal; }
@media (min-width: 720px) { .prose table { display: table; } }
@media (max-width: 719px) {
  .prose table { font-size: .88rem; }
  .prose th, .prose td { min-width: 8.5rem; }
}

/* --- pull quotes in articles --- */
.prose blockquote {
  margin: 1.5rem 0; padding: 0.85rem 0 0.85rem 1.35rem;
  border-left: 3px solid var(--brand, #14b8a6);
  color: var(--text-dim); font-size: 1.02rem; font-style: italic;
}
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: 0.6rem; }

/* --- overflow guard: images never wider than their container --- */
.creds { max-width: min(1000px, 100%); box-sizing: border-box; }
.creds-row picture, .creds-row img { max-width: 100%; }

/* --- checkbox and radio sizing -----------------------------------------
   The base rule `input, textarea, select { width:100%; padding:.75rem 1rem }`
   applies to EVERY input, checkboxes and radios included. With border-box
   sizing, that padding inflated a 1.2rem checkbox into a 36x28 rectangle and
   threw the tick mark off centre, so a ticked box did not read as ticked.
   Reset the text-input styling on these two types, and centre the tick with
   percentages so it stays right whatever size the box is. */
input[type="checkbox"], input[type="radio"] {
  padding: 0;
  width: 1.2rem; height: 1.2rem;
  min-width: 1.2rem; min-height: 1.2rem;
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }

.ceq-check input, .form-check input, .pt-addon > input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  border: 2px solid rgba(10,22,40,.3); border-radius: 5px;
  background: #fff; position: relative; transition: background .15s, border-color .15s;
}
.ceq-check input:checked, .form-check input:checked,
.pt-addon > input[type="checkbox"]:checked {
  background: var(--teal); border-color: var(--teal);
}
.ceq-check input:checked::after, .form-check input:checked::after,
.pt-addon > input[type="checkbox"]:checked::after {
  content: ""; position: absolute;
  left: 50%; top: 46%;
  width: 28%; height: 56%;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.ceq-check input:focus-visible, .form-check input:focus-visible,
.pt-addon > input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}
.form-check input, .pt-addon > input[type="checkbox"] { margin-top: .15rem; }

/* ── Lead form directly beneath the hero (urgent/fast penetration testing) ──
   The form section shares the hero's background colour, so the 44px of
   .content-wrap padding plus the 44px margin from the rule above put a band of
   white between two identical greys. Its centred 760px inner block also sat
   196px right of the hero and the prose, giving three different left edges in
   three consecutive blocks.

   Keyed on .lead-top rather than #enquire: a dozen DCC pages already use
   id="enquire" and their inset card is correct as it is.

   calc(100% / 18) is 5.5556%, which is the wrap's 5%-of-border-box side padding
   expressed against its content box, which is what a percentage margin or padding
   actually resolves against. A literal 5% lands 6px inside the hero's edge. */
.content-wrap > .ce-quote-section.lead-top {
  margin: -2.75rem calc(-100% / 18) 2.75rem;
  padding: 2.25rem calc(100% / 18) 2.75rem;
  border-radius: 0;
}
.lead-top > .ce-quote-inner { max-width: 1200px; margin: 0 auto; }
.lead-top .ce-quote { max-width: 760px; }
@media (max-width: 700px) {
  .content-wrap > .ce-quote-section.lead-top { padding-top: 1.75rem; }
}

/* ── Trust summary on the homepage credentials band ───────────────────────────
   Replaces the four accreditation cards. Two columns from 640px, because the
   items are a short label and two lines of detail rather than a paragraph, and
   a single column of four wastes the width on desktop. */
.trust-summary {
  list-style: none;
  margin: 0 0 1.9rem;
  padding: 0;
  display: grid;
  gap: 1.1rem 2.2rem;
}
.trust-summary > li {
  padding-left: 1rem;
  border-left: 2px solid var(--teal);
}
.trust-summary strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: .3rem; }
.trust-summary span { display: block; color: var(--text-dim); font-size: .95rem; line-height: 1.55; }
.trust-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.55rem;
  border-top: 1px solid rgba(0, 180, 166, .22);
}
.trust-actions .btn-primary { flex: 0 0 auto; }
.trust-actions-note {
  flex: 1 1 22rem;
  margin: 0;
  color: var(--text-dim);
  font-size: .9rem;
  line-height: 1.55;
  max-width: 60ch;
}
@media (min-width: 640px) { .trust-summary { grid-template-columns: 1fr 1fr; } }

/* The homepage certification cards sit outside .prose, so a link inside one fell
   back to the browser default blue with a full underline. Only the PraCSP card
   has ever carried a link, which is why this had not come up. Same declarations
   as .prose a rather than a second link style. */
.cert-meaning a { color: var(--teal); text-decoration: none;
                  border-bottom: 1px solid rgba(0,180,166,.35); }
.cert-meaning a:hover { border-bottom-color: var(--teal); }

/* The strip was built for a centred homepage section. In the Trust Center it sits
   in a left-aligned prose column directly above the certifications table, where a
   centred second row of three floats away from the table's left edge. Align it to
   the column instead. */
.prose .cert-strip { justify-content: flex-start; margin-top: 1.6rem; }

/* ── Homepage hero: benefit headline, service line beneath ────────────────────
   The service phrases stay inside the h1 and stay contiguous, so the exact-match
   wording is intact for search, but they sit at half size under the line that
   speaks to the reader. */
.hero-title-alt {
  display: block;
  margin-top: 1.35rem;   /* the title above sets line-height 1.08, so this needs
                            more than it looks like to read as a separate line */
  font-size: .44em;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--text-dim);
}
.hero-title-alt em { font-style: normal; color: var(--teal); }
.hero-sub-2 { margin-top: -1.4rem; }

/* Phone and tablet: the headline plus the intro pushed both buttons off the
   first screen, so there was nothing to click without scrolling. Reorder the
   column so a call to action follows the slogan, and step the headline down so
   it fits. Desktop order is unchanged. */
@media (max-width: 900px) {
  .hero-content { display: flex; flex-direction: column; }
  .hero-content .hero-title   { order: 1; }
  .hero-content .hero-slogan  { order: 2; }
  .hero-content .hero-actions { order: 3; margin-bottom: 2.25rem; }
  .hero-content .hero-sub     { order: 4; margin-bottom: 1.1rem; }
  .hero-content .hero-sub-2   { order: 5; margin-top: 0; margin-bottom: 0; }
}
@media (max-width: 640px) {
  .hero-title { font-size: 2.05rem; }
  .hero-title-alt { font-size: .52em; margin-top: 1rem; }
}

/* Hero intro, desktop only: 1.75 line-height on two paragraphs pushed the
   buttons to the very bottom edge of a 900px window. Tighter leading and less
   space before the actions puts them back on the first screen without changing
   the column order, which below 900px is already reordered. */
@media (min-width: 901px) {
  .hero-content .hero-sub   { line-height: 1.62; margin-bottom: 1.15rem; }
  .hero-content .hero-sub-2 { margin-top: 0; margin-bottom: 1.9rem; }
}

/* Hero title, desktop sizing: the headline grew to three lines and pushed the
   buttons off a 900px window again. A slightly smaller cap and a tighter gap
   below put them back without touching the mobile sizes, which are set in their
   own query below 640px. */
@media (min-width: 901px) {
  /* margin-bottom is not set here: .hero-title:has(+ .hero-slogan) above is
     more specific and owns that gap. */
  .hero-title { font-size: clamp(2.4rem, 4.4vw, 3.15rem); }
}


/* ── Full-page lead gen: free external attack surface review ──────────────────
   Replaces the corner contact launcher. Opens 6s after arrival on every page
   and every device; once closed it stays closed for 30 days, tracked in
   localStorage by js/site.js.

   The dialog is a genuine full-viewport takeover rather than a small modal,
   which is what was asked for. A full-screen dialog on mobile is the pattern
   Google's intrusive-interstitial guidance targets; a 5s delay does little to
   reduce that exposure, since the guidance is about content being covered
   shortly after arriving from search. Set deliberately, see js/site.js. */
.lg-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; overscroll-behavior: contain;
  animation: lgIn .22s ease-out;
}
.lg-overlay[hidden] { display: none; }
@keyframes lgIn { from { opacity: 0; } to { opacity: 1; } }

.lg-scrim { position: fixed; inset: 0; background: rgba(10, 22, 40, .58); }
@supports (backdrop-filter: blur(2px)) { .lg-scrim { backdrop-filter: blur(2px); } }

.lg-dialog {
  position: relative; width: 100%; max-width: 560px;
  max-height: calc(100vh - 2rem); overflow-y: auto;
  background: #fff; border-radius: 18px;
  box-shadow: 0 30px 70px rgba(10, 22, 40, .35);
  padding: 2rem 1.5rem 1.75rem;
  animation: lgCard .24s cubic-bezier(.2,.7,.3,1);
}
@keyframes lgCard { from { opacity: 0; transform: translateY(14px) scale(.985); }
                    to   { opacity: 1; transform: none; } }

.lg-close {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-size: 1.45rem; line-height: 1; font-weight: 400; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(10, 22, 40, .25);
  transition: background .16s, transform .16s;
}
.lg-close:hover { background: #c0392b; transform: scale(1.06); }
.lg-close:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.lg-logo    { display: block; height: 54px; width: auto; margin: 0 0 1.1rem; }
.lg-eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .12em;
              text-transform: uppercase; color: var(--teal); margin: 0 0 .5rem; }
.lg-title   { font-size: clamp(1.85rem, 6vw, 2.5rem); font-weight: 900;
              line-height: 1.07; letter-spacing: -.02em; color: var(--navy);
              margin: 0 0 .9rem; }
.lg-lede    { font-size: .97rem; line-height: 1.55; color: var(--text-dim);
              margin: 0 0 1.1rem; }

.lg-list { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .45rem; }
.lg-list li { position: relative; padding-left: 1.4rem; font-size: .9rem;
              color: var(--navy); line-height: 1.4; }
.lg-list li::before { content: ""; position: absolute; left: 0; top: .45em;
                      width: .5rem; height: .5rem; border-radius: 50%;
                      background: var(--teal); }

/* The global `form { background; border; padding: 2.5rem }` rule applies here
   too. Keep the card, but at a padding that suits two fields rather than six. */
.lg-kicker { font-size: .92rem; line-height: 1.45; font-weight: 700; color: var(--navy);
             margin: 1.05rem 0 1.3rem; padding-left: .9rem;
             border-left: 3px solid var(--teal); }
.lg-form   { margin: 0 0 .9rem; padding: 1.1rem; border-radius: 12px; }
.lg-fields { display: grid; gap: .3rem; }
.lg-label  { font-size: .82rem; font-weight: 700; color: var(--navy); margin-top: .7rem; }
.lg-label:first-child { margin-top: 0; }
.lg-input  { width: 100%; padding: .85rem .95rem; font: inherit; font-size: 1rem;
             color: var(--navy); background: #fff;
             border: 1px solid var(--navy-light); border-radius: 10px; }
.lg-input:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
.lg-input.err   { border-color: #c0392b; }

.lg-submit { width: 100%; margin-top: 1.1rem; padding: .95rem 1.2rem;
             font: inherit; font-size: 1.02rem; font-weight: 800;
             color: var(--navy); background: var(--teal);
             border: 0; border-radius: 10px; cursor: pointer; }
.lg-submit:hover:not(:disabled) { background: #00D4C4; }
.lg-submit:disabled { opacity: .65; cursor: default; }
.lg-submit:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.lg-msg { margin: .8rem 0 0; font-size: .9rem; min-height: 1.2em; }
.lg-msg.ok  { color: #0b7a6f; font-weight: 600; }
.lg-msg.err { color: #c0392b; font-weight: 600; }

.lg-small   { font-size: .8rem; line-height: 1.5; color: var(--text-dim); margin: 0; }
.lg-small a { color: var(--teal); }
/* Method note. Deliberately the quietest thing in the card: it answers the
   'is this legal' reflex without making that question look important. */
.lg-note    { font-size: .76rem; line-height: 1.45; color: var(--text-dim);
              margin: .85rem 0 0; padding-top: .8rem;
              border-top: 1px solid rgba(10,22,40,.1); opacity: .85; }

/* Reopens it on demand once dismissed. */
.lg-toggle {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 9000;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.1rem .7rem .9rem;
  font: inherit; font-size: .88rem; font-weight: 700; color: var(--navy);
  background: var(--teal); border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(10,22,40,.18);
}
.lg-toggle:hover { background: #00D4C4; }
.lg-toggle:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.lg-toggle-ico { font-size: .7rem; line-height: 1; }

@media (min-width: 700px) {
  .lg-dialog { padding: 2.2rem 2rem 1.8rem; }
  .lg-logo   { height: 58px; margin-bottom: 1.1rem; }
}

/* Wide enough for two columns, which keeps the card a box rather than a tall
   strip that has to scroll inside itself. */
@media (min-width: 900px) {
  .lg-dialog { max-width: 860px; padding: 2.4rem 2.4rem 2rem; }
  .lg-inner  { display: grid; grid-template-columns: 1fr 330px;
               column-gap: 2.6rem; align-items: start; }
  .lg-logo   { grid-column: 1 / -1; }
  .lg-copy   { grid-column: 1; }
  .lg-side   { grid-column: 2; }
  .lg-list   { margin-bottom: 0; }
  .lg-kicker { margin-bottom: 0; }
  /* Full-width footer band under both columns, so the method note reads as a
     footnote to the whole card rather than to the form. */
  .lg-note   { grid-column: 1 / -1; margin-top: 1.5rem; }
  .lg-title  { font-size: 2.1rem; }
}
/* Phones: keep the card a card. Without this the content runs to the full
   height of the viewport and the scrim disappears, which is the thing we were
   asked to move away from. */
@media (max-width: 560px) {
  .lg-dialog  { padding: 1.35rem 1.15rem 1.1rem; border-radius: 16px; }
  .lg-logo    { height: 32px; margin-bottom: .45rem; }
  .lg-title   { font-size: 1.5rem; margin-bottom: .45rem; }
  .lg-lede    { font-size: .88rem; line-height: 1.45; margin-bottom: .7rem; }
  .lg-list    { gap: .28rem; margin-bottom: .6rem; }
  .lg-kicker  { font-size: .84rem; margin: .6rem 0; padding-left: .7rem; }
  .lg-list li { font-size: .86rem; }
  .lg-form    { padding: .8rem; margin-bottom: .6rem; }
  .lg-label   { font-size: .78rem; margin-top: .45rem; margin-bottom: .2rem; }
  .lg-input   { padding: .62rem .75rem; font-size: 16px; }
  .lg-submit  { margin-top: .7rem; padding: .75rem 1rem; font-size: .98rem; }
  .lg-small   { font-size: .75rem; line-height: 1.4; margin-top: .5rem; }
  .lg-note    { font-size: .72rem; line-height: 1.36; margin-top: .5rem; padding-top: .45rem; }
  .lg-close   { width: 36px; height: 36px; top: .55rem; right: .55rem; font-size: 1.3rem; }
  /* The status line reserves a row even when empty, which on a phone is the
     difference between the card fitting and the submit button being pushed
     below an internal scroll. Let it take space only when it has something
     to say. */
  .lg-msg     { min-height: 0; margin-top: .5rem; }
  .lg-list li { line-height: 1.32; }
}
@media (max-width: 420px) {
  .lg-toggle { right: 1rem; bottom: 1rem; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) { .lg-overlay { animation: none; } }
@media print { .lg-root { display: none; } }

/* ── Awareness Month promo strip (homepage) ───────────────────────────
   Campaign furniture, so it is written to be deleted in one block when the
   month is over: remove the markup and these rules together. */
.am-strip { background: var(--navy); color: #fff; padding: 0; }
.am-inner { max-width: 1100px; margin: 0 auto; padding: 1.6rem 2rem;
            display: flex; flex-wrap: wrap; align-items: center;
            gap: 1rem 2rem; justify-content: space-between; }
.am-copy { flex: 1 1 420px; }
.am-kicker { margin: 0 0 .3rem; font-size: .78rem; font-weight: 800;
             letter-spacing: .09em; text-transform: uppercase; color: var(--teal); }
.am-head { margin: 0 0 .35rem; font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.25; }
.am-sub { margin: 0; font-size: .97rem; line-height: 1.5; color: rgba(255,255,255,.82); }
.am-strip .btn-primary { flex: 0 0 auto; }
@media (max-width: 640px) {
  .am-inner { padding: 1.3rem 1.15rem; }
  .am-head { font-size: 1.18rem; }
  .am-strip .btn-primary { width: 100%; text-align: center; }
}