/* ============================================================================
   SemperWise — page-level components.

   theme.css is the template: tokens, chrome (top bar, header, mega menu,
   footer), buttons, sections, cards, motion. THIS file is only what individual
   pages need on top of it — service-page furniture, the detection-coverage
   figures, blog layout, legal pages, the product preview, contact forms.

   It loads AFTER theme.css and must never fight it. Everything theme.css
   already defines was mechanically stripped out of here when the two were
   split; if you find yourself re-styling .btn, .section, header or .mega-*,
   you are editing the wrong file.

   ---------------------------------------------------------------------------
   TOKEN BRIDGE
   ---------------------------------------------------------------------------
   These components were written against an older palette. Rather than rewrite
   two thousand lines of rules by hand — which is how you lose a value you did
   not know mattered — the old token names are re-pointed at the new ones here.

   That has a useful property: a component that has not been touched still
   picks up the new colours AND still responds to the light/dark switch,
   because every name below resolves to a themed token rather than to a fixed
   hex value. When you next rewrite one of these components, use the theme's
   own token names and delete its dependency from this list.
   ========================================================================== */
:root{
  /* structure */
  --container:   min(var(--maxw), 92%);
  --header-h:    76px;
  --radius:      12px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* type */
  --font-head: "Space Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: Manrope, "Segoe UI", Helvetica, Arial, sans-serif;

  /* brand — mapped onto the theme palette */
  --navy-900: var(--navy);
  --navy-850: #05203f;
  --navy-800: var(--navy2);
  --navy-700: #0a3a70;
  --navy-600: var(--blue);
  --teal:     var(--blue);
  --gold:     var(--orange);
  --white:    #fff;
  --paper:    var(--surface-2);
  --paper-2:  var(--surface);
  --muted-2:  #7f91a7;

  /* on-dark text: unchanged between themes, because the surfaces that use it
     (the product panel, the two photographic bands) stay dark in both */
  --on-dark:      #eaf1fb;
  --on-dark-soft: #a9bfd6;
  --dark-line:    rgba(120,200,240,.16);
  --dark-card:    rgba(255,255,255,.04);

  --grad-accent: linear-gradient(120deg, var(--blue), var(--cyan));
  --shadow-sm:   0 2px 10px rgba(3,21,45,.06);
}

[data-theme="light"]{
  --muted-2: #6d8099;
  --shadow-sm: 0 2px 10px rgba(10,44,86,.05);
  /* On light ground the flat cyan is too pale to carry a line or an icon, so
     the bridge follows the theme's own deeper light-mode accents. */
  --teal: var(--grad-a);
  --gold: var(--grad-c);
}

/* --------------------------------------------------------------------------
   8. Platform cards
   -------------------------------------------------------------------------- */

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

.pcard{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              border-color 0.3s var(--ease);
}

.pcard:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }

.pcard-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 26px;
}

.pcard-top .tag{ display: inline-flex; align-items: center; gap: 7px; }

.pcard-top .tag::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.pcard h3{ font-size: 1.6rem; margin-bottom: 10px; }

.pcard > p{ font-size: 0.94rem; margin-bottom: 26px; }

.pcard .link-arrow{ margin-top: auto; }

.pcard-metrics{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 20px 0 24px;
  border-top: 1px solid var(--line);
}

.pcard-metrics b{
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: var(--teal);
  line-height: 1.1;
}

.pcard-metrics small{
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: block;
  margin-top: 4px;
}
/* Flagship card */
.pcard--flag{
  background: linear-gradient(150deg, var(--navy-600), var(--navy-800) 55%, var(--navy-900));
  border-color: transparent;
  color: var(--on-dark-soft);
  box-shadow: var(--shadow-lg);
}

.pcard--flag h3{ color: var(--white); }

.pcard--flag .pcard-top{ color: rgba(234, 241, 251, 0.75); }

.pcard--flag .pcard-top .tag::before{ background: var(--cyan); }

.pcard--flag .pcard-metrics{ border-top-color: rgba(255, 255, 255, 0.16); }

.pcard--flag .pcard-metrics b{ color: var(--cyan); }

.pcard--flag .pcard-metrics small{ color: rgba(234, 241, 251, 0.6); }

.pcard--flag .link-arrow{ color: var(--cyan); }
/* Module chip cloud */
.modules{
  margin-top: 44px;
  padding-top: 38px;
  border-top: 1px solid var(--line);
}

.modules h4{
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-family: var(--font-body);
  margin-bottom: 20px;
}

.chips li{
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.82rem;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
              transform 0.2s var(--ease), background 0.2s var(--ease);
}

.chips li:hover{
  border-color: var(--teal);
  color: var(--teal);
  transform: translateY(-2px);
}

.section--paper .chips li{ background: var(--surface); }
/* A module chip that has a page of its own becomes a link. The anchor inherits
   the chip's colour so a linked chip and a plain one look identical until you
   hover — the list should read as a list of modules, not as a list of links
   with some gaps in it. */
.chips li a{ color: inherit; text-decoration: none; }

.chips li:has(a){ border-style: solid; }

.chips li:has(a):hover{ background: var(--surface); }
/* --------------------------------------------------------------------------
   9. Pillars
   -------------------------------------------------------------------------- */
.pillars{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.pillar{
  padding: 30px 24px 34px;
  border-right: 1px solid var(--line);
  position: relative;
  transition: background 0.3s var(--ease);
}

.pillar:last-child{ border-right: 0; }

.pillar::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.pillar:hover{ background: var(--surface-2); }

.pillar:hover::before{ transform: scaleX(1); }

.pillar .num{
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  display: block;
  margin-bottom: 22px;
}

.pillar h3{
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.pillar p{ font-size: 0.86rem; line-height: 1.6; }

.pillars-note{
  margin-top: 26px;
  font-size: 0.92rem;
  color: var(--muted-2);
}
/* --------------------------------------------------------------------------
   10. Lifecycle band
   -------------------------------------------------------------------------- */
.cycle-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.cycle-visual{ max-width: 300px; margin-inline: auto; width: 100%; }

.cycle-visual svg{ animation: spin 60s linear infinite; }

.cycle-steps{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--dark-line);
  margin-top: 46px;
}

.cycle-steps li{
  padding: 26px 12px 0;
  position: relative;
  border-right: 1px solid var(--dark-line);
}

.cycle-steps li:last-child{ border-right: 0; }

.cycle-steps li::before{
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(63, 216, 232, 0.8);
}

.cycle-steps .num{
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 10px;
}

.cycle-steps h3{
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cycle-steps p{ font-size: 0.82rem; line-height: 1.55; }
/* --------------------------------------------------------------------------
   11. Stats
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   12. Services tabs
   -------------------------------------------------------------------------- */
.tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}

.tab{
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.25s var(--ease);
}

.tab:hover{ border-color: var(--teal); color: var(--teal); }

.tab[aria-selected="true"]{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.tab-panel{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: clamp(26px, 3.4vw, 40px);
}

.tab-panel[hidden]{ display: none; }

.tab-panel-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.tab-panel-head h3{ font-size: 1.5rem; margin: 0; }

.tab-panel-head p{ max-width: 560px; font-size: 0.92rem; margin: 0; }

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

.service-list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink);
  padding: 3px 0;
}

.service-list li::before{
  content: "";
  flex: none;
  width: 16px; height: 16px;
  margin-top: 5px;
  border-radius: 50%;
  background: rgba(23, 184, 196, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%2317b8c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100%;
}
/* --------------------------------------------------------------------------
   13. Why us / vision-mission
   -------------------------------------------------------------------------- */

.vm-card:last-child{ border-left-color: var(--gold); margin-bottom: 0; }

.vm-card .eyebrow{ margin-bottom: 12px; }

.vm-card:last-child .eyebrow{ color: var(--gold); }

.vm-card:last-child .eyebrow::before{ background: var(--gold); }
/* Values strip */

.values div h4{
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: var(--teal);
  font-family: var(--font-head);
  letter-spacing: 0;
}

.values div p{ font-size: 0.8rem; line-height: 1.55; }
/* --------------------------------------------------------------------------
   14. Industries
   -------------------------------------------------------------------------- */
.industry-chips{ display: flex; flex-wrap: wrap; gap: 10px; }

.industry-chips li{
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--dark-line);
  background: var(--dark-card);
  color: var(--on-dark);
  font-size: 0.88rem;
  font-weight: 500;
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease),
              background 0.22s var(--ease), color 0.22s var(--ease);
}

.industry-chips li:hover{
  transform: translateY(-3px);
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(63, 216, 232, 0.07);
}
/* --------------------------------------------------------------------------
   15. Module groups — the detailed half of the Platform story
   -------------------------------------------------------------------------- */
.module-groups{ display: grid; gap: 34px; }

.module-group-title{
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.module-group-num{
  font-family: var(--font-head);
  color: var(--gold);
  letter-spacing: 0.1em;
}

.module-group-count{
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  text-transform: none;
}

.chips li.is-soon{
  border-style: dashed;
  border-color: rgba(217, 154, 30, 0.5);
  color: var(--muted);
}

.chips li.is-soon:hover{ border-color: var(--gold); color: var(--gold); }

.badge{
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(217, 154, 30, 0.4);
  background: rgba(217, 154, 30, 0.08);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
}
/* Inline variant that sits after a module name inside a chip or mega link. */
.badge--inline{
  font-size: 0.56rem;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: 1px;
}
/* --------------------------------------------------------------------------
   16. CTA band
   -------------------------------------------------------------------------- */
.cta-band{
  position: relative;
  background: var(--navy-900);
  padding: clamp(48px, 5vw, 76px) 0;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.cta-band::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 110%, rgba(23, 184, 196, 0.30), transparent 65%),
    radial-gradient(ellipse 40% 60% at 15% 0%, rgba(27, 58, 122, 0.55), transparent 70%);
  z-index: -1;
}

.cta-band h2{
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  color: var(--white);
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: 18px;
}

.cta-band p{
  color: var(--on-dark-soft);
  max-width: 620px;
  margin: 0 auto 32px;
}

.cta-actions{ display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* --------------------------------------------------------------------------
   17. Contact
   -------------------------------------------------------------------------- */

.contact-rows{ margin-top: 32px; }

.contact-rows li{
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 16px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
  color: var(--ink);
}

.contact-rows li:last-child{ border-bottom: 1px solid var(--line); }

.contact-rows dt, .contact-rows .label{
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-top: 3px;
}

.contact-rows a:hover{ color: var(--teal); }

.form-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  padding: clamp(26px, 3.2vw, 38px);
}

.form-card > header{ margin-bottom: 24px; }

.form-card h3{
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.form-card > header p{
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0;
}

.field{ margin-bottom: 18px; }

.field label{
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}

.field input, .field select, .field textarea{
  width: 100%;
  font: inherit;
  font-size: 0.94rem;
  color: var(--ink);
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}

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

.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  background: var(--surface);
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(23, 184, 196, 0.16);
}

.field input::placeholder, .field textarea::placeholder{ color: var(--muted); opacity: 1; }

.field [aria-invalid="true"]{ border-color: #d6455b; background: #fdf3f4; }

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

.error{
  display: none;
  margin-top: 6px;
  font-size: 0.78rem;
  color: #c33448;
}

.error.is-visible{ display: block; }

.form-note{
  margin-top: 14px;
  font-size: 0.76rem;
  color: var(--muted-2);
  text-align: center;
}

.form-card .btn-primary{ width: 100%; justify-content: center; margin-top: 6px; }

.form-success{
  text-align: center;
  padding: 26px 10px;
}

.form-success .tick{
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(23, 184, 196, 0.12);
  color: var(--teal);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  font-size: 1.6rem;
}

.form-success h3{ margin-bottom: 8px; }

[hidden]{ display: none !important; }
/* --------------------------------------------------------------------------
   19b. Sub-page furniture — page head, legal pages, detail tables, "soon"
   All of it reuses the existing tokens; no new design language.
   -------------------------------------------------------------------------- */
/* .page-head, .crumbs and the banner furniture now live in theme.css, shared
   with .svc-hero — see "THE PAGE BANNER" there. They were defined in both
   files, and because this one loads second it silently won, which is why
   editing the template appeared to do nothing. */

/* --- Detail tables (company details) ------------------------------------ */
.detail-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.detail-table{
  margin: 0;
  border-top: 1px solid var(--line);
}

.detail-table > div{
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.detail-table dt{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-top: 3px;
}

.detail-table dd{
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
}

.detail-table a:hover{ color: var(--teal); }

.detail-table--wide > div{ grid-template-columns: 260px minmax(0, 1fr); }

.detail-aside{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}

.detail-aside .badge{ margin-bottom: 16px; }

.detail-aside h3{ font-size: 1.18rem; margin-bottom: 10px; }

.detail-aside p{ font-size: 0.92rem; }

.detail-aside .btn{ margin-top: 8px; }

.contact-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.contact-address{ font-style: normal; line-height: 1.6; }
/* --- "Under development" pages ------------------------------------------ */
.soon-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4.5vw, 60px);
  align-items: start;
}

.soon-title{ font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 18px 0 14px; }

.soon-actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.soon-panel{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  padding: 30px 28px;
}

.soon-panel h3{
  font-size: 0.78rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 18px;
}

.soon-list{ display: grid; gap: 15px; }

.soon-list li{ padding-left: 20px; position: relative; }

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

.soon-list b{ display: block; color: var(--ink); font-size: 0.96rem; }

.soon-list small{ display: block; font-size: 0.86rem; color: var(--muted); margin-top: 2px; }

.soon-note{
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}

.soon-note a{ color: var(--teal); font-weight: 600; }
/* --- Legal pages -------------------------------------------------------- */
.legal{ max-width: 74ch; }

.legal-lede{
  font-size: 1.08rem;
  color: var(--ink);
  padding-bottom: 26px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.legal h2{
  font-size: 1.3rem;
  margin: 40px 0 12px;
}

.legal h2:first-of-type{ margin-top: 30px; }

.legal p{ font-size: 1rem; }

.legal a{ color: var(--teal); font-weight: 500; }

.legal a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.legal code{
  font-size: 0.88em;
  background: var(--surface);
  border-radius: 5px;
  padding: 2px 6px;
}

.legal-list{ margin: 0 0 1em; display: grid; gap: 10px; }

.legal-list li{
  position: relative;
  padding-left: 22px;
  font-size: 1rem;
}

.legal-list li::before{
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.legal-list b{ color: var(--ink); }

.legal-contact{
  margin-top: 44px;
  padding: 26px 28px;
  border-left: 3px solid var(--teal);
  border-radius: 4px var(--radius) var(--radius) 4px;
  background: var(--surface-2);
}

.legal-contact h3{ font-size: 1.06rem; margin-bottom: 10px; }

.legal-note{
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted-2);
}
/* --- Footer address block ----------------------------------------------- */
.footer-address{
  font-style: normal;
  font-size: 0.87rem;
  line-height: 1.7;
  margin: 18px 0 14px;
  color: var(--on-dark-soft);
}

.footer-address strong{ color: var(--on-dark); font-weight: 600; }

.footer-address a:hover{ color: var(--cyan); }
/* Office labels are blocks, so each address starts on its own line. */
.footer-office{
  display: block;
  margin-top: 9px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.footer-office-contact{ display: block; margin-top: 9px; }

.footer-status{
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--on-dark-soft);
  padding: 9px 13px;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: 4px;
}
/* --------------------------------------------------------------------------
   19c. Product preview, architecture, traction, services summary
   -------------------------------------------------------------------------- *//* --- Product preview (interface concept, NOT a screenshot) --------------- */
.preview{ margin: 44px 0 0; }

.preview-frame{
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-900);
  box-shadow: 0 30px 70px rgba(5, 11, 26, 0.28), 0 0 60px rgba(23, 184, 196, 0.10);
}

.preview-chrome{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  background: var(--navy-800);
  border-bottom: 1px solid var(--dark-line);
}

.preview-dots{ display: flex; gap: 6px; flex: none; }

.preview-dots i{ width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }

.preview-url{
  font-size: 0.74rem;
  color: var(--on-dark-soft);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
}
/* The honesty label. Must remain visible at every width. */
.preview-tag{
  margin-left: auto;
  flex: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(217, 154, 30, 0.5);
  background: rgba(217, 154, 30, 0.10);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}

.preview-body{ display: grid; grid-template-columns: 180px minmax(0, 1fr); }

.preview-side{
  border-right: 1px solid var(--dark-line);
  padding: 20px 16px;
  background: rgba(255,255,255,.02);
}

.preview-brand{
  display: block;
  font-family: var(--font-head);
  font-size: 0.9rem;
  color: var(--on-dark-soft);
  margin-bottom: 18px;
}

.preview-brand b{ color: var(--cyan); font-weight: 700; }

.preview-side li{
  font-size: 0.8rem;
  color: var(--on-dark-soft);
  padding: 9px 11px;
  border-radius: 8px;
}

.preview-side li.is-active{ background: rgba(63,216,232,.12); color: var(--cyan); font-weight: 600; }

.preview-main{ padding: 20px; display: grid; gap: 14px; }

.preview-row{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }

.preview-tile{
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  padding: 15px 16px;
}

.preview-tile b{ display: block; font-family: var(--font-head); font-size: 1.7rem; color: var(--on-dark); line-height: 1.1; }

.preview-tile small{ font-size: 0.68rem; color: var(--on-dark-soft); }

.preview-label{
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-bottom: 8px;
}

.preview-tile--score{ background: linear-gradient(150deg, rgba(23,184,196,.18), rgba(10,23,48,.5)); }

.preview-score{ color: var(--cyan) !important; }

.preview-score small{ font-size: 0.9rem; color: var(--on-dark-soft); }

.preview-delta{ font-size: 0.7rem; color: #4ad6a4; }

.preview-bar{ height: 6px; border-radius: 3px; background: rgba(255,255,255,.10); margin: 9px 0 5px; overflow: hidden; }

.preview-bar i{ display: block; height: 100%; background: var(--grad-accent); }

.preview-chips{ display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }

.sev--c{ background: rgba(214,69,91,.18); color: #ff8ea0; }

.sev--h{ background: rgba(217,154,30,.18); color: #f0c04f; }

.preview-panel{ border: 1px solid var(--dark-line); border-radius: var(--radius); background: rgba(255,255,255,.03); }

.preview-panel-head{
  display: flex; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dark-line);
  font-size: 0.74rem;
  color: var(--on-dark);
}

.preview-muted{ color: var(--on-dark-soft); font-size: 0.7rem; }

.preview-list li{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: 0.78rem;
  color: var(--on-dark-soft);
  border-bottom: 1px solid rgba(120,170,220,.07);
}

.preview-list li:last-child{ border-bottom: 0; }

.preview-list .preview-muted{ margin-left: auto; }

.sev-dot{ width: 7px; height: 7px; border-radius: 50%; flex: none; }

.sev-dot.sev--c{ background: #d6455b; }

.sev-dot.sev--h{ background: var(--gold); }

.sev-dot.sev--m{ background: #6b8fd6; }

.sev-dot.sev--l{ background: rgba(255,255,255,.3); }

.preview-frameworks{
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  padding: 15px 16px;
}

.preview-fw{ display: flex; flex-wrap: wrap; gap: 8px; }

.preview-fw span{
  font-size: 0.72rem;
  color: var(--on-dark-soft);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
}

.preview-fw b{ color: var(--cyan); }

.preview-caption{
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--muted-2);
  max-width: 70ch;
}
/* --- Architecture (AWS) -------------------------------------------------- */
.arch-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.arch-item{
  border-top: 2px solid var(--cyan);
  padding-top: 18px;
}

.arch-item:nth-child(even){ border-top-color: var(--gold); }

.arch-item h3{ font-size: 1.04rem; margin-bottom: 8px; }

.arch-item p{ font-size: 0.9rem; line-height: 1.6; }
/* --- Traction stats (value + label + detail) ----------------------------- */
.stat--wide small{
  display: block;
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}
/* --- Services summary cards --------------------------------------------- */

.svc-count{
  display: inline-block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 12px;
}
/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px){
.platform-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* With three cards the flagship spans the row; with four it stays 2x2. */
.platform-grid:not(.platform-grid--4) .pcard--flag{ grid-column: 1 / -1; }

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

.pillar:nth-child(3){ border-right: 0; }

.pillar:nth-child(n+4){ border-top: 1px solid var(--line); }

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

.cycle-steps li:nth-child(3n){ border-right: 0; }

.cycle-steps li:nth-child(n+4){ padding-top: 34px; margin-top: 14px; }

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

.footer-brand{ grid-column: 1 / -1; }
}
/* Mega panels need breathing room before the nav collapses. */
@media (min-width: 1101px) and (max-width: 1240px){
.mega-cols--5{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

@media (max-width: 1100px){
.main-nav{
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: rgba(5, 11, 26, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--dark-line);
    padding: 18px 0 26px;
    margin: 0;
    display: none;
    /* dvh tracks the collapsing mobile URL bar; vh is the fallback. */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(26px, env(safe-area-inset-bottom));
  }

.main-nav.is-open{ display: block; }

.nav-link::after, .nav-trigger::after{ display: none; }
/* Mega panels become in-place accordions inside the overlay menu. */

.nav-trigger[aria-expanded="true"]{ background: none; }

.mega::before{ display: none; }

.mega-cols--5{ grid-template-columns: 1fr; gap: 22px; }

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

.mega-scrim{ display: none; }

.nav-toggle{ display: block; }

.header-cta{ display: none; }

.nav-cta-mobile{ display: block; }

.nav-cta-mobile a{
    border-bottom: 0;
    margin-top: 18px;
    text-align: center;
    border-radius: var(--radius-pill);
    background: var(--grad-accent);
    color: var(--navy-900);
    font-weight: 700;
  }

.nav-cta-mobile a:hover{ color: var(--navy-900); }

.site-header:not(.is-stuck).has-open-nav{ background: rgba(5, 11, 26, 0.96); }

.hero-visual{ order: -1; max-width: 380px; }

.hero-sub{ max-width: none; }

.cycle-grid{ grid-template-columns: 1fr; }

.cycle-visual{ max-width: 220px; }

.detail-grid, .soon-grid{ grid-template-columns: 1fr; }

.service-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The mock sidebar is chrome, not content — drop it before it squeezes the data. */
.preview-body{ grid-template-columns: 1fr; }

.preview-side{ display: none; }
}

@media (max-width: 680px){
.platform-grid--4{ grid-template-columns: 1fr; }

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

.pillar{ border-right: 1px solid var(--line); border-top: 1px solid var(--line); }

.pillar:nth-child(2n){ border-right: 0; }

.pillar:nth-child(-n+2){ border-top: 0; }

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

.cycle-steps li{ border-right: 1px solid var(--dark-line); }

.cycle-steps li:nth-child(2n){ border-right: 0; }

.cycle-steps li:nth-child(n+3){ padding-top: 34px; margin-top: 14px; }

.arch-grid{ grid-template-columns: 1fr; }

.preview-row{ grid-template-columns: 1fr; }

.preview-chrome{ flex-wrap: wrap; gap: 8px 12px; }

.preview-tag{ margin-left: 0; order: 3; width: 100%; text-align: center; }

.preview-main{ padding: 14px; }

.preview-list li{ flex-wrap: wrap; row-gap: 3px; }

.preview-list .preview-muted{ margin-left: 17px; width: 100%; }

.preview-fw span{ font-size: 0.68rem; padding: 5px 10px; }

.tab-panel-head{ display: block; }

.tab-panel-head p{ margin-top: 10px; }
}

@media (max-width: 520px){
.service-list{ grid-template-columns: 1fr; }

.field-row{ grid-template-columns: 1fr; gap: 0; }

.contact-rows li{ grid-template-columns: 1fr; gap: 4px; }

.detail-table > div, .detail-table--wide > div{ grid-template-columns: 1fr; gap: 4px; }

.cta-actions{ flex-direction: column; }
}
/* --------------------------------------------------------------------------
   20b. Mobile refinements
   Everything below targets touch/handset use specifically: legible minimum
   type, 44px tap targets, no iOS focus-zoom, and tighter vertical rhythm.
   -------------------------------------------------------------------------- *//* --- Tap targets: 44px minimum on anything touch-driven ------------------ */
@media (max-width: 1100px){/* iOS zooms the page when a focused field is under 16px. */
.field input, .field select, .field textarea{ font-size: 16px; padding: 14px 15px; }

.field textarea{ min-height: 128px; }

.footer-col li{ margin-bottom: 0; }

.footer-col a{ display: block; padding: 12px 0; }

.footer-bottom{ padding-bottom: max(28px, env(safe-area-inset-bottom)); }

.footer-bottom nav{ gap: 0 22px; }

.footer-bottom a{ display: inline-block; padding: 11px 0; }

.contact-rows a{ display: inline-block; padding: 10px 0; }

.mega-links--plain a{ padding-block: 12px; }

.mega-more{ display: inline-block; padding: 12px 0; }

.mega-product-grid a{ padding: 16px; }

.crumbs a{ display: inline-block; padding: 12px 0; }

.detail-table a, .legal a, .footer-address a{ padding-block: 2px; }

.tab{ padding: 13px 20px; }

.chips li{ padding: 11px 16px; }

.industry-chips li{ padding: 13px 20px; }
}
/* --- Readable minimum type ---------------------------------------------- */
@media (max-width: 1100px){
.eyebrow{ font-size: 0.75rem; letter-spacing: 0.17em; }

.badge{ font-size: 0.72rem; }

.mega-more{ font-size: 0.82rem; }

.mega-product-grid small{ font-size: 0.82rem; }

.pcard-top{ font-size: 0.72rem; letter-spacing: 0.14em; }

.pcard-metrics small{ font-size: 0.68rem; letter-spacing: 0.1em; }

.pcard > p{ font-size: 1rem; }

.pillar .num, .cycle-steps .num{ font-size: 0.75rem; }

.pillar p, .cycle-steps p{ font-size: 0.95rem; }

.pillar h3, .cycle-steps h3{ font-size: 1.06rem; }

.modules h4, .footer-col h2{ font-size: 0.75rem; letter-spacing: 0.15em; }

.chips li, .service-list li{ font-size: 0.95rem; }

.values div p{ font-size: 0.95rem; }

.footer-col a{ font-size: 0.95rem; }

.footer-bottom{ font-size: 0.88rem; }

.contact-rows .label, .field label, .detail-table dt{ font-size: 0.72rem; letter-spacing: 0.13em; }

.soon-list small, .legal-note, .soon-note{ font-size: 0.9rem; }

.footer-address, .footer-status{ font-size: 0.92rem; }

.contact-rows li{ font-size: 1rem; }

.form-card > header p{ font-size: 0.8rem; }

.form-note{ font-size: 0.84rem; }
}
/* --- Hero: chips move out from over the video --------------------------- */
@media (max-width: 1100px){
.hero-visual{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 560px;
  }

.hero-video-frame{ grid-column: 1 / -1; }
}
/* --- Density and layout at handset widths -------------------------------- */
@media (max-width: 680px){
.section-head{ margin-bottom: 24px; }
/* The intro line under a section heading sat at the default paragraph measure,
   running most of the container width and reading as body copy rather than as a
   caption on the heading. */
.section-head > p{ max-width: 74ch; }

/* A scrolling strip beats three wrapped rows of pills. */
.tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-bottom: 26px;
  }

.tabs::-webkit-scrollbar{ display: none; }

.tab{ flex: none; scroll-snap-align: start; }

.modules{ margin-top: 34px; padding-top: 30px; }

.contact-rows li{ padding: 14px 0; }
}

@media (max-width: 400px){
.hero h1{ font-size: 2.15rem; }

.section-head h2{ font-size: 1.8rem; }

.cta-band h2{ font-size: 1.8rem; }

.pcard{ padding: 26px 20px; }

.pcard-metrics{ grid-template-columns: repeat(3, 1fr); gap: 8px; }

.pcard-metrics b{ font-size: 1.3rem; }

.pcard-metrics small{ font-size: 0.68rem; letter-spacing: 0.05em; }

.form-card{ padding: 22px 18px; }
}
/* Only the narrowest handsets need the single-column fallback. */
@media (max-width: 361px){
.hero-visual{ grid-template-columns: 1fr; }
}
/* --- Landscape handsets: the hero must not need a full scroll ------------ */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1100px){
.hero h1{ font-size: 2.1rem; }

.hero-visual{ order: 0; max-width: none; }
}
/* ==========================================================================
   20. Service pages and shared content components
   Added with the service-page build. Everything below reuses the tokens above;
   no new colours are introduced.
   ========================================================================== *//* --- Illustrations ------------------------------------------------------- */
.ill{
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* Illustration motion.
   These are CSS animations rather than SVG <animate> elements on purpose: the
   prefers-reduced-motion block at the end of this file can switch CSS off, but
   it has no reach into SMIL, which keeps running however the visitor has their
   system configured. Anything that moves in an illustration must be driven
   from here so that guarantee holds.
   Movement is slow and loops quietly — it should reward a second look, never
   compete with the copy for attention. */
.ill [class*="ill-anim"]{ transform-box: fill-box; transform-origin: center; }

.ill-anim-spin{ animation: ill-spin 14s linear infinite; }

.ill-anim-spin-r{ animation: ill-spin 22s linear infinite reverse; }

.ill-anim-pulse{ animation: ill-pulse 3.2s ease-in-out infinite; }

.ill-anim-flow{ animation: ill-flow 3.4s ease-in-out infinite; }

.ill-anim-trace{ stroke-dasharray: 5 6; animation: ill-trace 2.6s linear infinite; }

.ill-anim-fade{ animation: ill-fade 4.2s ease-in-out infinite; }
/* Stagger, so grouped elements breathe out of step rather than in unison. */
.ill-d1{ animation-delay: .35s; }

.ill-d2{ animation-delay: .7s; }

.ill-d3{ animation-delay: 1.05s; }

.ill-d4{ animation-delay: 1.4s; }

.ill-d5{ animation-delay: 1.75s; }

@keyframes ill-spin{ to { transform: rotate(360deg); } }

@keyframes ill-pulse{ 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } }

@keyframes ill-flow{ 0% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }

@keyframes ill-trace{ to { stroke-dashoffset: -22; } }

@keyframes ill-fade{ 0%, 100% { opacity: .22; } 50% { opacity: .9; } }
/* --- Service page hero ---------------------------------------------------
   Its ground, padding, breadcrumbs, eyebrow, h1 and lead are shared with
   .page-head in theme.css — see "THE PAGE BANNER" there. Only the two-column
   layout below is specific to service pages.
   ------------------------------------------------------------------------- */
.svc-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  position: relative;
  z-index: 1;
}

.svc-hero-fig{
  margin: 0;
  /* The illustration has no intrinsic size, so it filled whatever column it was
     given — 415px tall beside a 250px text column, and it alone was what kept
     the banner from getting shorter. Capped, and the SVG scales to fit. */
  max-height: 300px;
  display: flex;
  justify-content: center;
}
.svc-hero-fig > svg,
.svc-hero-fig img{ max-height: 300px; width: auto; max-width: 100%; }

.page-head-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.svc-hero-stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(24px, 2.8vw, 34px);
  padding-top: 22px;
  border-top: 1px solid var(--dark-line);
  position: relative;
  z-index: 1;
}

.svc-hero-stats b{
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--on-dark);
  line-height: 1;
  letter-spacing: -0.03em;
}

.svc-hero-stats span{
  display: block;
  margin-top: 9px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
/* --- Long-form prose ----------------------------------------------------- */
.prose{
  /* 76ch was too long a line to track comfortably. 68 is the top of the range
     that still reads as a column rather than a wall. */
  max-width: 68ch;
  font-size: 15.5px;
  line-height: 1.82;
}
.prose > p{ margin: 0 0 1.15em; }
.prose > p:last-child{ margin-bottom: 0; }
/* A heading that follows a paragraph needs clear space above it; one that opens
   the block does not. */
.prose > :is(h2,h3) + p{ margin-top: 0; }
.prose > p + :is(h2,h3){ margin-top: 1.7em; }

/* --- .prose--split -------------------------------------------------------
   A page intro is a heading and two or three paragraphs. Left-aligned in one
   column it left more than half a desktop screen empty, and the eye had to
   travel back past all that white to find the next section.

   On a wide viewport the heading moves into its own column beside the body —
   the same shape as .head-split on the home page, so the site reads as one
   thing. Below 1040px it collapses back to the single column, which is the
   right layout for a narrow screen.

   It is opt-in and NOT on .prose itself, because .prose is also the blog
   article body: long-form reading wants one uninterrupted column. */
@media (min-width: 1040px){
  /* :has(> h2) is load-bearing, not decoration. Without it the rule also fires
     on an element that has no heading — including a bare <p> that carries the
     class by mistake, whose own inline <a> children then become grid items and
     scatter into the second column. Ask for the heading; no heading, no split. */
  .prose--split:has(> h2){
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
    column-gap: clamp(36px, 4vw, 60px);
    align-items: start;
  }
  .prose--split:has(> h2) > h2{ grid-column: 1; grid-row: 1; margin-top: 0; }
  .prose--split:has(> h2) > :not(h2){ grid-column: 2; max-width: 68ch; }
  /* The first paragraph aligns with the heading's cap-height rather than
     sitting a line below it. */
  .prose--split:has(> h2) > :not(h2):first-of-type{ margin-top: 0; }
}

.prose h2{
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin-bottom: 0.6em;
}

.prose p{
  font-size: 1.03rem;
  line-height: 1.75;
  margin-bottom: 1.1em;
}

.section--dark .prose p{ color: var(--on-dark-soft); }
/* --- Feature grid -------------------------------------------------------- */
.feat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 22px;
}

/* --- even last rows -------------------------------------------------------
   `auto-fit` picks the most columns that fit, which is right when the item
   count divides into it and wrong when it does not. At container width these
   grids resolve to four columns, so a six-item grid rendered 4 + 2 and left two
   empty cells sitting under the content — on the service-page template that
   happened twice on the same page.

   The grid cannot know its own length in plain CSS, but `:has()` can ask: "is
   the 6th child also the last?". Counts that divide badly by four are moved to
   three columns, where they fill.

   Wrapped in @supports and a min-width so an older engine, or a narrow screen,
   simply keeps the auto-fit behaviour it has now. Nothing regresses; some
   browsers just get the tidier row.
   ------------------------------------------------------------------------- */
@supports selector(:has(*)){
  @media (min-width: 940px){
    .feat-grid:has(> :nth-child(5):last-child),
    .feat-grid:has(> :nth-child(6):last-child),
    .feat-grid:has(> :nth-child(9):last-child),
    .engage:has(> :nth-child(5):last-child),
    .engage:has(> :nth-child(6):last-child),
    .engage:has(> :nth-child(9):last-child),
    .phases:has(> :nth-child(5):last-child),
    .phases:has(> :nth-child(9):last-child){
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

.feat{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 26px 24px;
  border-top: 3px solid var(--teal);
}

.feat:nth-child(even){ border-top-color: var(--gold); }

.feat h3{ font-size: 1.02rem; margin-bottom: 10px; }

.feat p{ font-size: 0.92rem; line-height: 1.65; }

.feat-grid--tight .feat{ padding: 22px 20px; }

.section--dark .feat{
  background: var(--dark-card);
  border-color: var(--dark-line);
  border-top-color: var(--cyan);
}

.section--dark .feat:nth-child(even){ border-top-color: var(--gold); }

.section--dark .feat p{ color: var(--on-dark-soft); }
/* --- Numbered phase list ------------------------------------------------- */
.phases{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
  counter-reset: phase;
}

.phases li{
  border-top: 1px solid var(--dark-line);
  padding-top: 22px;
}

.phases h3{
  font-size: 1rem;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.phases p{ font-size: 0.92rem; line-height: 1.65; }

.section--dark .phases p{ color: var(--on-dark-soft); }

.section:not(.section--dark) .phases li{ border-top-color: var(--line); }
/* --- Standards ----------------------------------------------------------- */
.standards-wrap{
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 34px;
  border-top: 1px solid var(--dark-line);
}

.standards-head{
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
}

.standards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.standards li{
  border: 1px solid var(--dark-line);
  border-radius: 10px;
  background: var(--dark-card);
  padding: 14px 16px;
}

.standards b{
  display: block;
  font-family: var(--font-head);
  font-size: 0.92rem;
  color: var(--on-dark);
  margin-bottom: 4px;
}

.standards small{
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--on-dark-soft);
}
/* --- Signals ------------------------------------------------------------- */
.signal-grid{
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.signal-grid h2{ font-size: clamp(1.8rem, 3.6vw, 2.6rem); }

.signal-grid .btn{ margin-top: 8px; }

.signal-list{ display: grid; gap: 12px; }

.signal-list li{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px 16px 52px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}

.signal-list li::before{
  content: "";
  position: absolute;
  left: 20px;
  top: 21px;
  width: 15px;
  height: 9px;
  border-left: 2.5px solid var(--teal);
  border-bottom: 2.5px solid var(--teal);
  transform: rotate(-45deg);
}
/* --- Engagement model ---------------------------------------------------- */
.engage{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.engage-step{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  background: var(--surface);
}

.engage-num{
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--teal);
  margin-bottom: 12px;
}

.engage-step h3{ font-size: 1.02rem; margin-bottom: 8px; }

.engage-step p{ font-size: 0.9rem; line-height: 1.6; }

.section--dark .engage-step{
  background: var(--dark-card);
  border-color: var(--dark-line);
}

.section--dark .engage-step p{ color: var(--on-dark-soft); }

.section--dark .engage-num{ color: var(--cyan); }

.section--paper .engage-step{ background: var(--surface); }
/* --- FAQ ----------------------------------------------------------------- */

.faq-item{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  position: relative;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.01rem;
  color: var(--ink);
  line-height: 1.4;
}

.faq-item summary::-webkit-details-marker{ display: none; }

.faq-item summary::after{
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.faq-item[open] summary::after{ transform: rotate(-135deg); margin-top: -2px; }

.faq-item summary:hover{ color: var(--navy-600); }

.faq-answer{
  padding: 0 24px 22px;
  font-size: 0.96rem;
  line-height: 1.72;
  color: var(--muted);
  max-width: 78ch;
}

.section--dark .faq-item{
  background: var(--dark-card);
  border-color: var(--dark-line);
}

.section--dark .faq-item summary{ color: var(--on-dark); }

.section--dark .faq-answer{ color: var(--on-dark-soft); }

.faq-jump{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.faq-jump a{
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  padding: 9px 18px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.faq-jump a:hover{ border-color: var(--teal); color: var(--teal); }
/* --- Related services ---------------------------------------------------- */
.related h3{
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 22px;
}

.related-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.related-card{
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px 20px;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}

.related-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }

.related-kicker{
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.related-card b{
  display: block;
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 7px;
}

.related-card small{
  display: block;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 14px;
}

.related-go{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
/* --- Detection coverage -------------------------------------------------- */
.cov-hero{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}

.cov-hero .stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }

.cov-fig{ margin: 0; }

.cov-note{
  margin-top: 34px;
  padding: 22px 26px;
  border-left: 3px solid var(--cyan);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.cov-note p{ font-size: 0.95rem; line-height: 1.7; color: var(--on-dark-soft); }

.cov-note strong{ color: var(--on-dark); }

.eng-groups{ display: grid; gap: 22px; }

.eng-group{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: clamp(26px, 3.4vw, 38px);
}

.eng-head{ display: flex; gap: 20px; align-items: flex-start; margin-bottom: 26px; }

.eng-num{
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
  flex: none;
}

.eng-head h3{ font-size: 1.3rem; margin-bottom: 8px; }

.eng-head p{ font-size: 0.96rem; line-height: 1.65; max-width: 72ch; }

.eng-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  padding: 22px 0;
  border-block: 1px solid var(--line);
  margin-bottom: 24px;
}

.eng-stats b{
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
}

.eng-stats small{
  display: block;
  margin-top: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.eng-detail{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 0; }

.eng-detail dt{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 6px;
}

.eng-detail dd{ margin: 0; font-size: 0.9rem; line-height: 1.62; }
/* --- Severity bars ------------------------------------------------------- */
.sev-bars{ display: grid; gap: 16px; max-width: 820px; }

.sev-row{ display: grid; grid-template-columns: 88px 1fr 68px; gap: 16px; align-items: center; }

.sev-label{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

.sev-track{
  height: 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.sev-fill{ display: block; height: 100%; border-radius: var(--radius-pill); }

.sev-fill--c{ background: #e0574f; }

.sev-fill--h{ background: var(--gold); }

.sev-fill--m{ background: var(--teal); }

.sev-fill--l{ background: rgba(63, 216, 232, 0.55); }

.sev-fill--i{ background: rgba(157, 176, 205, 0.45); }

.sev-num{
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--on-dark);
  text-align: right;
}
/* --- Honesty notes ------------------------------------------------------- */
.notes-list{ display: grid; gap: 14px; max-width: 880px; margin-inline: auto; }

.notes-list li{
  position: relative;
  padding: 18px 22px 18px 52px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.94rem;
  line-height: 1.65;
}

.notes-list li::before{
  content: "";
  position: absolute;
  left: 22px;
  top: 24px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}
/* --- Grid variants ------------------------------------------------------- */
.stats--four{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

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

.section--dark .svc-card{
  background: var(--dark-card);
  border-color: var(--dark-line);
}

.section--dark .svc-card h3{ color: var(--on-dark); }

.section--dark .svc-card p{ color: var(--on-dark-soft); }
/* --- Service links inside the tab panels --------------------------------- */
.svc-links{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.svc-link{
  display: block;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px 18px;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.svc-link:hover{ transform: translateX(3px); border-left-color: var(--gold); }

.svc-link b{
  display: block;
  font-family: var(--font-head);
  font-size: 0.94rem;
  color: var(--ink);
  margin-bottom: 3px;
}

.svc-link small{ font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
/* --- Light-background lifecycle ------------------------------------------ */
.cycle-steps--light li{ border-top-color: var(--line); }

.cycle-steps--light h3{ color: var(--ink); }

.cycle-steps--light p{ color: var(--muted); }
/* --- Form additions ------------------------------------------------------ *//* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-alert{
  background: rgba(217, 154, 30, 0.12);
  border: 1px solid rgba(217, 154, 30, 0.5);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 18px;
}

.form-alert a{ color: var(--navy-600); text-decoration: underline; }

.form-success .form-note{ margin-top: 14px; }

.form-success .form-note a{ color: var(--teal); font-weight: 600; }
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1040px){
.svc-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

@media (max-width: 980px){
.svc-hero-grid, .cov-hero, .signal-grid{ grid-template-columns: 1fr; }

.svc-hero-fig{ order: 1; max-height: 210px; margin-top: 24px; }
.svc-hero-fig > svg, .svc-hero-fig img{ max-height: 210px; }

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

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

@media (max-width: 720px){
/* (.svc-hero padding is set with .page-head in theme.css) */

.svc-hero-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.svc-grid--3, .svc-grid--4{ grid-template-columns: 1fr; }

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

.eng-head{ flex-direction: column; gap: 10px; }

.sev-row{ grid-template-columns: 74px 1fr 56px; gap: 12px; }

.faq-item summary{ padding: 17px 48px 17px 18px; font-size: 0.96rem; }

.faq-answer{ padding: 0 18px 18px; font-size: 0.92rem; }

.signal-list li{ padding: 14px 16px 14px 46px; font-size: 0.9rem; }
}

@media (max-width: 520px){
.stats--four{ grid-template-columns: 1fr; }

.cov-hero .stats{ grid-template-columns: 1fr; }

/* Two up, not one. Four single-column rows added more height to the banner
   than the numbers were worth. */
.svc-hero-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }

.page-head-actions .btn{ width: 100%; justify-content: center; }
}

@media (min-width: 1101px) and (max-width: 1320px){
.header-cta .btn{ padding: 9px 16px; font-size: 0.82rem; }
}
/* ==========================================================================
   21. Blog
   ========================================================================== *//* --- Byline, date, read time (hero and cards) ------------------------------ */
.blog-meta{ display: flex; align-items: center; gap: 14px; margin-top: 30px; }

.blog-meta-text{ display: flex; flex-direction: column; gap: 4px; }

.blog-meta-author{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--on-dark);
}

.blog-meta-line{
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--on-dark-soft);
}

.blog-meta-line time{ color: inherit; }

.blog-meta--light .blog-meta-author{ color: var(--ink); }

.blog-meta--light .blog-meta-line{ color: var(--muted); }
/* --- Author avatar: a monogram, not a headshot — see includes/content/blog.php */
.author-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: var(--navy-900);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.author-avatar--lg{ width: 60px; height: 60px; font-size: 1.05rem; }
/* --- Table of contents (reuses .faq-jump) ---------------------------------- */
.blog-toc{ margin-bottom: clamp(36px, 5vw, 58px); }
/* --- Body bullet lists ------------------------------------------------------ */
.prose ul.blog-list{ display: grid; gap: 11px; margin: 0 0 1.1em; }

.prose ul.blog-list li{
  position: relative;
  padding-left: 24px;
  font-size: 1.03rem;
  line-height: 1.7;
}

.prose ul.blog-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad-accent);
}

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

.section--dark .prose strong{ color: var(--on-dark); }
/* --- In-article stat strip --------------------------------------------------- */
.blog-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  max-width: 76ch;
  margin: 8px 0 40px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.blog-stats b{
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--teal);
  line-height: 1.1;
}

.blog-stats span{
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.4;
}
/* --- "How SemperWise helps" callout ------------------------------------------ */
.blog-callout{
  max-width: 76ch;
  margin: 8px 0 40px;
  padding: 32px 34px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900) 70%);
  box-shadow: var(--shadow-md);
}

.blog-callout .eyebrow{ color: var(--cyan); }

.blog-callout .eyebrow::before{ background: var(--cyan); }

.blog-callout h3{ color: var(--white); font-size: 1.4rem; margin-bottom: 0.5em; }

.blog-callout p{ color: var(--on-dark-soft); margin-bottom: 22px; }

.blog-callout strong{ color: var(--white); }
/* --- Tags --------------------------------------------------------------------- */
.blog-tags{ margin: 6px 0 30px; }

.blog-tags a{ display: block; margin: -8px -15px; padding: 8px 15px; }
/* --- Share row ------------------------------------------------------------------ */
.share-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 26px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
}

.share-label{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.share-row a, .share-row button.share-copy{
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  padding: 7px 16px;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.share-row a:hover, .share-row button.share-copy:hover{ border-color: var(--teal); color: var(--teal); }

.share-row button.share-copy.is-copied{ border-color: var(--teal); color: var(--teal); }
/* --- Sources -------------------------------------------------------------------- */
.blog-sources{
  max-width: 76ch;
  margin-top: 44px;
  padding: 24px 26px;
  border-left: 3px solid var(--gold);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.blog-sources h3{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}

.blog-sources ul{ display: grid; gap: 9px; }

.blog-sources a{ font-size: 0.86rem; color: var(--navy-600); text-decoration: underline; text-underline-offset: 3px; }

.blog-sources a:hover{ color: var(--teal); }
/* --- Author card ------------------------------------------------------------------ */
.author-card{
  display: flex;
  gap: 20px;
  align-items: flex-start;
  max-width: 76ch;
  margin-top: 48px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.author-card-name{ font-family: var(--font-head); font-weight: 700; color: var(--ink); margin-bottom: 2px; }

.author-card-role{
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}

.author-card-bio{ font-size: 0.9rem; line-height: 1.65; color: var(--muted); margin: 0; }
/* --- Filter note on /blog ------------------------------------------------------------ */
.blog-filter-note{ margin-top: 16px; font-size: 0.9rem; color: var(--muted); }

.blog-filter-note a{ color: var(--teal); font-weight: 600; }
/* --- Card grid (index page and homepage teaser) --------------------------------------- */
.blog-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.blog-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}

.blog-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }

.blog-card-media{ display: block; line-height: 0; background: var(--navy-900); }

.blog-card-media svg{ display: block; width: 100%; height: auto; }

.blog-card-body{ display: flex; flex-direction: column; padding: 24px 24px 26px; flex-grow: 1; }

.blog-card-cat{
  display: inline-block;
  align-self: flex-start;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy-600);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  margin-bottom: 16px;
}

.blog-card h2,.blog-card h3{ font-size: 1.18rem; margin-bottom: 10px; }

.blog-card-body > p{ font-size: 0.92rem; line-height: 1.6; color: var(--muted); margin-bottom: 22px; flex-grow: 1; }

.blog-card .blog-meta{ margin-top: 0; }

.blog-card--feature{ grid-column: 1 / -1; flex-direction: row; }

.blog-card--feature .blog-card-media{ flex: 0 0 42%; }

.blog-card--feature .blog-card-media svg{ width: 100%; height: 100%; object-fit: cover; }

.blog-card--feature .blog-card-body{ justify-content: center; padding: 36px 40px; }

.blog-card--feature h3{ font-size: clamp(1.5rem, 2.6vw, 2rem); }

.blog-card--feature .blog-card-body > p{ font-size: 1rem; max-width: 56ch; }
/* --- Responsive ------------------------------------------------------------------------ */
@media (max-width: 980px){
.blog-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.blog-card--feature{ flex-direction: column; }

.blog-card--feature .blog-card-media{ flex-basis: auto; }

.blog-card--feature .blog-card-media svg{ height: auto; }

.blog-card--feature .blog-card-body{ padding: 24px 24px 26px; }

.author-card{ flex-direction: column; }

.blog-callout{ padding: 26px 24px; }
}
/* ========================================================== FRAMEWORK FACTS
   The generated block on a framework page: real clause counts from the control
   library that ships, and the evidence the platform gathers by itself. Sits in
   a section--paper band, so it reads as fact rather than as more prose. */
.fw-facts{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px; margin-top: 8px;
}

.fw-fact{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 22px 20px;
}

.fw-fact-n{ font-family: var(--font-head); font-size: 2.4rem; line-height: 1; font-weight: 700; color: var(--teal); }

.fw-fact-l{ font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 8px 0 10px; }

.fw-fact p{ font-size: .9rem; line-height: 1.6; color: var(--muted); margin: 0; }

.fw-groups{ margin-top: 32px; }

.fw-sub{ font-size: 1.05rem; margin: 0 0 14px; }

.fw-group-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }

.fw-group-list li{
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; font-size: .88rem; display: inline-flex; align-items: center; gap: 8px;
}

.fw-group-n{ font-weight: 700; color: var(--teal); }

.fw-collectors li::before{ content: "✓"; color: var(--teal); font-weight: 700; }

.fw-note{ font-size: .88rem; line-height: 1.65; color: var(--muted); margin: 14px 0 0; }

.fw-note--wide{
  margin-top: 30px; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--teal); border-radius: 12px; padding: 18px 20px;
}

.fw-note--wide strong{ display: block; color: var(--ink); margin-bottom: 5px; }

@media (max-width: 640px){
.fw-fact-n{ font-size: 2rem; }
}
/* --- classes the split left behind ---------------------------------------
   Found by bin/audit-css: each of these is used in the markup and had no rule,
   so the element rendered as an unstyled block. See that script's header for
   why this keeps happening and what it now prevents.
   ------------------------------------------------------------------------- */

/* A generic grid, used where a page needs a row of cards without a component
   of its own (e.g. the stack cards on /technology-security, which were
   rendering as a single stacked column). */
.grid{ display: grid; gap: 22px; }
.grid--2{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--4{ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* A centred section heading. /detection-coverage asks for one and was getting
   a left-aligned block. */
.section-head--center{ margin-inline: auto; text-align: center; max-width: 780px; }
.section-head--center .eyebrow{ justify-content: center; }
.section-head--center > p{ margin-inline: auto; }

/* The brand tile at the foot of the Company mega panel. */
.mega-promo--brand{ text-align: center; }
.mega-promo--brand img{ width: 88px; height: auto; margin: 0 auto 10px;
  filter: drop-shadow(0 0 12px rgba(63, 216, 232, 0.35)); }
.mega-promo--brand p{ font-size: 11.5px; }

/* --- framework index on a hub page ---------------------------------------
   Sits inside .section--dark, which stays dark in both themes, so the chips
   keep their dark-ground treatment from theme.css and need no light override.
   ------------------------------------------------------------------------- */
.fw-index{ margin-top: clamp(32px, 4vw, 48px); padding-top: 30px; border-top: 1px solid var(--dark-line); }
.fw-index .fw-group{ display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.fw-index .fw-group + .fw-group{ margin-top: 14px; }
.fw-index .fw-label{ margin: 0; flex: none; min-width: 96px; }
.fw-index .fw-chips{ flex: 1 1 320px; }
@media (max-width: 620px){
  .fw-index .fw-group{ display: block; }
  .fw-index .fw-label{ margin-bottom: 8px; }
}

/* --- blog post FAQs -------------------------------------------------------
   Rendered visibly because the FAQPage schema they feed describes them. Reuses
   the accordion the service pages use, at article width.
   ------------------------------------------------------------------------- */
.blog-faq{ margin-top: clamp(36px, 4vw, 52px); padding-top: 30px; border-top: 1px solid var(--line); }
.blog-faq h2{ font-size: 1.5rem; margin-bottom: 18px; }
.blog-faq details{ border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  margin-bottom: 10px; }
.blog-faq summary{ cursor: pointer; padding: 15px 18px; font-weight: 700; font-size: 0.98rem;
  list-style: none; color: var(--ink); }
.blog-faq summary::-webkit-details-marker{ display: none; }
.blog-faq details[open] summary{ padding-bottom: 6px; }
.blog-faq .a{ padding: 0 18px 16px; font-size: 0.94rem; line-height: 1.75; color: var(--muted); }