/*
Theme Name:   ASC Datum
Theme URI:    https://www.ascprocess.co.uk/
Description:  Divi child theme carrying the ASC Process Systems UK design
              system: warm ivory ground, a three-step navy descent down
              each page, ASC yellow rationed to the places it carries
              meaning, and Sora self-hosted at light weights.
Author:       ASC Process Systems UK
Template:     Divi
Version:      1.0.0
License:      Proprietary — ASC Process Systems UK
Text Domain:  asc-datum
*/

/* =========================================================
   ASC Process Systems UK

   Register: aerospace & defence prime supplier.
   Datum. Warm ivory ground, a three-step navy descent down the
   page, ASC yellow rationed to the few places it means something,
   Sora at light weights and one family only, hairline rules,
   no gradients, no shadows, a lot of air.

   Yellow is never text on ivory — at 1.45:1 it cannot be. It is a
   mark (the datum line, the eyebrow bar) or a ground that carries
   ink text. On navy it becomes the accent colour proper, 10.4:1.

   Occam's razor: if a rule, border, shadow or colour is not
   carrying meaning, it is not here.

    1 Tokens      2 Base        3 Layout     4 Primitives
    5 Header      6 Hero        7 Cards      8 Tiers
    9 Editorial  10 Safety     11 Forms     12 Footer
   13 Preview    14 Utilities
   ========================================================= */

/* ---------- 0. Type ----------
   Sora, SIL Open Font License 1.1 (see assets/fonts/OFL.txt).
   Self-hosted: no third-party request, no font CDN in the privacy
   notice, one 33 KB variable file covering every weight we use. */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("assets/fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("assets/fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* Ground — warm ivory, the counterweight to the navy */
  --paper:     #f7f6f3;
  --paper-2:   #efeee9;

  /* The navy descent. One job each, deepening down the page.
     Section 14.5% lightness, closing band 12.4%, footer/type 11.0%. */
  --ink:        #0f1829;   /* type, solid buttons, footer ground  16.4:1 on ivory */
  --navy:       #10203a;   /* the dark section, mid-page          15.1:1 white     */
  --navy-deep:  #0c1b33;   /* closing band                        15.9:1 white     */

  /* ASC brand */
  --asc-yellow:        #f7ca2e;
  --asc-yellow-bright: #ffde00;
  --asc-ink:           #231f20;
  --asc-red:           #a8322a;

  /* Ink greys on ivory */
  --mid:   #48515f;   /* body copy            7.4:1 */
  --faint: #646d7e;   /* labels and captions  4.8:1 */

  /* Light greys on navy */
  --on-ink:       #f4f6fa;   /* 15.1:1 */
  --on-ink-mid:   #a9b6c9;   /*  7.9:1 */
  --on-ink-faint: #8794a9;   /*  5.3:1 */

  /* Hairlines */
  --rule:        #e5e3dd;
  --rule-strong: #cfccc3;

  /* Semantic defaults. Ivory is the default ground; the dark
     surfaces below redefine these six and nothing else has to know. */
  --bg:          var(--paper);
  --text:        var(--ink);
  --text-muted:  var(--mid);
  --text-faint:  var(--faint);
  --border:      var(--rule);
  --border-firm: var(--rule-strong);

  /* Small uppercase labels, and the small marks (ticks, icons).
     Yellow on ivory is 1.45:1, so on light grounds both are ink. */
  --label-ink: var(--faint);
  --mark:      var(--ink);
  --accent:    var(--ink);

  /* Type — one family. Labels earn their difference from
     weight, size and tracking, not a second face. */
  --font: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: var(--font);

  --step--2: 0.6875rem;
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0:  clamp(0.9375rem, 0.91rem + 0.13vw, 1rem);
  --step-1:  clamp(1.0625rem, 1.01rem + 0.26vw, 1.25rem);
  --step-2:  clamp(1.3125rem, 1.19rem + 0.6vw, 1.75rem);
  --step-3:  clamp(1.625rem, 1.36rem + 1.3vw, 2.625rem);
  --step-4:  clamp(2rem, 1.55rem + 2.2vw, 3.625rem);
  --step-5:  clamp(2.375rem, 1.6rem + 3.6vw, 5rem);

  /* Space */
  --gutter: clamp(1.25rem, 4.5vw, 3.25rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --max-w: 1360px;
  --max-w-text: 60ch;

  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root { color-scheme: light; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Display sizes run light. Weight is never the thing doing the shouting. */
h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 300;
  color: var(--text);
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 200; letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: var(--step-3); letter-spacing: -0.03em; }
h3 { font-size: var(--step-2); letter-spacing: -0.022em; }
h4 { font-size: var(--step-1); font-weight: 400; letter-spacing: -0.014em; }

p { margin: 0 0 1.2em; max-width: var(--max-w-text); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; color: var(--text); }

a {
  color: var(--text);
  text-decoration-color: var(--asc-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--text); text-decoration-color: var(--ink); }

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: 0.45em; }

:focus-visible { outline: 2px solid var(--asc-yellow); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--asc-yellow); color: var(--asc-ink); }

.skip-link {
  position: absolute; left: 0.5rem; top: -100px; z-index: 200;
  background: var(--asc-yellow); color: var(--asc-ink);
  padding: 0.75rem 1.2rem; border-radius: var(--radius);
  font-size: var(--step--1); font-weight: 600; text-decoration: none;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 0.5rem; color: var(--asc-ink); }

/* ---------- 3. Layout ---------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--max-w)); margin-inline: auto; }
.wrap--narrow { max-width: 840px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--alt { background: var(--navy); }
.section--raised { background: var(--paper-2); }

/* Ivory is now the default ground, so .section--paper only has to hold its
   own when it follows a dark band. Kept as an explicit class because the
   templates use it to mark long-form reading (Resources, Safety, legal). */
.section--paper { background: var(--paper); color: var(--text); }

.grid { display: grid; gap: clamp(1.25rem, 2.2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); }
.grid--pair { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.split { display: grid; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.1fr 0.9fr; }
  .split--wide-right { grid-template-columns: 0.9fr 1.1fr; }
}

/* ---------- 4. Primitives ---------- */

/* The one recurring brand device: a small yellow bar, then a mono label. */
.eyebrow {
  display: flex; align-items: center; gap: 0.85rem;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 1.75rem;
  max-width: none;
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 2px;
  background: var(--mark); flex-shrink: 0;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  font-weight: 300;
  color: var(--text-muted);
  max-width: 54ch;
}

.section-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center p { margin-inline: auto; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 1.8rem;
  font-family: inherit; font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.01em; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: #1a2d4e; border-color: #1a2d4e; color: var(--paper); }
.btn--outline { background: transparent; color: var(--text); border-color: var(--border-firm); }
.btn--outline:hover { border-color: var(--text); color: var(--text); }
.btn--full { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--text);
}
.arrow-link::after {
  content: ""; width: 0.9rem; height: 0.5rem; background: var(--asc-yellow);
  clip-path: polygon(0 42%, 62% 42%, 62% 0, 100% 50%, 62% 100%, 62% 58%, 0 58%);
  transition: transform 0.2s var(--ease);
}
.arrow-link:hover::after { transform: translateX(4px); }

/* Mono data label */
.datum {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
}

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}

/* Thin utility strip above the nav — where the USA/UK switch lives. */
.utility-bar {
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
}
.utility-bar__inner {
  display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem;
  min-height: 38px; color: var(--mid);
}
/* 11px, so it needs the full 4.5:1 — the lighter grey measured 4.01
   once the header's translucent ground was composited. */
.utility-bar a { color: var(--mid); text-decoration: none; }
.utility-bar a:hover { color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--asc-yellow); text-decoration-thickness: 2px; }
.utility-bar__sep { color: var(--faint); }
@media (max-width: 800px) { .utility-bar { display: none; } }

.header-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: 80px;
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; color: var(--text); }
.brand:hover { color: var(--text); }
.brand__logo { width: clamp(140px, 16vw, 186px); height: auto; color: currentColor; }
.brand__logo svg, .brand__logo img { width: 100%; height: auto; display: block; }

.nav { display: none; }
@media (min-width: 1100px) {
  .nav { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; margin-right: 1.25rem; }
}
.nav a {
  position: relative; padding: 0.55rem 0.85rem;
  font-size: 0.875rem; font-weight: 400; color: var(--text-muted);
  text-decoration: none; transition: color 0.15s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: -0.15rem;
  height: 2px; background: var(--asc-yellow);
}
.site-header .nav,
.site-header .nav ul {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.site-header .nav li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0;
    padding: 0;
}

.site-header .nav li::marker {
    content: none !important;
}

.site-header .nav li::before,
.site-header .nav li::after {
    content: none !important;
    display: none !important;
}
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-actions .btn { display: none; }
@media (min-width: 1100px) { .header-actions .btn { display: inline-flex; } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); cursor: pointer;
  transition: border-color 0.15s var(--ease);
}
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.icon-btn svg { width: 19px; height: 19px; }
.nav-toggle { display: inline-flex; }
@media (min-width: 1100px) { .nav-toggle { display: none; } }

.mobile-nav {
  position: fixed; inset: 0; z-index: 150;
  background: var(--paper);
  padding: 1.5rem var(--gutter) 3rem; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.28s var(--ease);
  visibility: hidden;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; margin-bottom: 2.5rem;
}
.mobile-nav nav a {
  display: block; padding: 1rem 0;
  font-size: 1.375rem; font-weight: 300; letter-spacing: -0.02em;
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.mobile-nav nav a:hover { color: var(--faint); }
.mobile-nav .btn { margin-top: 2.5rem; }
body.nav-open { overflow: hidden; }

/* ---------- 6. Hero ---------- */
.hero { position: relative; background: var(--paper); overflow: hidden; }
.hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(4rem, 10vw, 9rem);
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}
@media (min-width: 1040px) { .hero__inner--split { grid-template-columns: 1.05fr 0.95fr; } }
.hero__content { max-width: 46rem; }
.hero h1 { margin-bottom: 1.6rem; font-size: var(--step-5); }

/* The single highlight device: yellow rule under one phrase. */
.hero h1 em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.1em;
  height: 3px; background: var(--asc-yellow);
}
.hero__lede { font-size: var(--step-1); font-weight: 300; line-height: 1.6; color: var(--text-muted); max-width: 46ch; }
.hero__figure { display: none; }
@media (min-width: 1040px) {
  .hero__figure { display: block; position: relative; }
  .hero__figure img, .hero__figure svg { width: 100%; height: auto; }
}

.hero--page .hero__inner {
  display: block;
  padding-block: clamp(2.75rem, 5.5vw, 5rem) clamp(2.5rem, 5vw, 4.5rem);
}
.hero--page h1 { font-size: var(--step-4); }

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  list-style: none; padding: 0; margin: 0 0 2rem;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.45rem; opacity: 0.5; }
.breadcrumb a { color: var(--text-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); }

/* Stat strip */
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  border-top: 1px solid var(--rule);
}
.stat-strip__item {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem) clamp(1.75rem, 3vw, 2.5rem) 0;
  border-right: 1px solid var(--rule);
}
.stat-strip__item:last-child { border-right: none; }
.stat-strip__value {
  display: block; font-size: clamp(2rem, 3.2vw, 2.875rem);
  font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-strip__value small { font-size: 0.45em; font-weight: 400; color: var(--label-ink); margin-left: 0.15em; letter-spacing: 0; }
.stat-strip__label {
  display: block; margin-top: 0.8rem;
  font-family: var(--mono); font-size: var(--step--2); line-height: 1.5;
  letter-spacing: 0.08em; color: var(--text-faint); max-width: 26ch;
}

/* ---------- 7. Cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.4vw, 2.25rem);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
a.card, a.card:hover { color: var(--text); text-decoration: none; }
.card--link:hover { border-color: var(--border-firm); background: var(--paper-2); }
.card--link:hover h3 { color: var(--text); }
.card h3 { font-size: var(--step-1); font-weight: 400; margin-bottom: 0.65rem; transition: color 0.18s var(--ease); }
.card p { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.65; margin-bottom: 1.5rem; }
.card .arrow-link { margin-top: auto; }
.card__index {
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.14em;
  color: var(--label-ink); margin-bottom: 1.25rem;
}
.card__icon { width: 30px; height: 30px; margin-bottom: 1.35rem; color: var(--mark); stroke-width: 1.25; }

/* Product card with a visual */
.product-card { overflow: hidden; padding: 0; }
.product-card__visual {
  aspect-ratio: 16 / 10; position: relative; overflow: hidden;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  display: grid; place-items: center;
}
.product-card__visual img { width: 88%; height: auto; object-fit: contain; }
.product-card__visual svg { width: 100%; height: 100%; }
.product-card__body { padding: clamp(1.6rem, 2.4vw, 2.25rem); display: flex; flex-direction: column; flex: 1; }
.product-card__tag {
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--label-ink); margin-bottom: 0.85rem;
}
.product-card h3 { font-size: var(--step-2); font-weight: 300; }

/* Spec list */
.specs { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 1px solid var(--border); }
.specs li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--border); margin: 0; font-size: 0.875rem;
}
.specs__key { color: var(--text-faint); }
.specs__val { font-family: var(--mono); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 2rem 0 0; }
.checklist li { position: relative; padding-left: 1.9rem; margin-bottom: 1rem; color: var(--text-muted); line-height: 1.65; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.9rem; height: 0.45rem;
  border-left: 1.5px solid var(--mark); border-bottom: 1.5px solid var(--mark);
  transform: rotate(-45deg);
}
.checklist li strong { color: var(--text); }

/* Numbered process */
.process { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.process > li { counter-increment: step; position: relative; padding-left: 4.5rem; padding-bottom: 3rem; margin: 0; }
.process > li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--label-ink); font-variant-numeric: tabular-nums;
}
.process > li::after {
  content: ""; position: absolute; left: 0.6rem; top: 2rem; bottom: 0.6rem; width: 1px; background: var(--border);
}
.process > li:last-child { padding-bottom: 0; }
.process > li:last-child::after { display: none; }
.process h3 { font-size: var(--step-1); font-weight: 400; margin-bottom: 0.5rem; }
.process p { color: var(--text-muted); font-size: 0.9375rem; }

/* ---------- 8. Tier cards (CPC Appward / Enterprise / Legacy) ---------- */
.tiers { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { background: var(--paper); padding: clamp(1.75rem, 2.6vw, 2.5rem); display: flex; flex-direction: column; }
.tier--featured { background: var(--paper-2); }
.tier__flag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--asc-ink); background: var(--asc-yellow);
  padding: 0.3rem 0.65rem; border-radius: 100px; margin-bottom: 1.25rem;
}
.tier__flag--quiet { background: transparent; color: var(--text-faint); border: 1px solid var(--border-firm); padding: 0.28rem 0.63rem; }
.tier h3 { font-size: var(--step-2); font-weight: 300; margin-bottom: 0.35rem; }
.tier__sub { font-family: var(--mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.1em; color: var(--label-ink); margin-bottom: 1.25rem; text-transform: uppercase; }
.tier p { color: var(--text-muted); font-size: 0.9375rem; }
.tier .checklist { margin-top: 1.5rem; }
.tier .checklist li { font-size: 0.875rem; margin-bottom: 0.7rem; }
.tier .btn { margin-top: auto; align-self: flex-start; }
.tier .btn-row { margin-top: auto; padding-top: 2rem; }

/* ---------- 9. Editorial ---------- */
.industry {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 250px; padding: 1.6rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; background: var(--ink); color: var(--on-ink); text-decoration: none;
  transition: border-color 0.2s var(--ease);
}
.industry::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,24,41,0) 26%, rgba(15,24,41,0.97) 66%);
}
.industry__art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.industry > h3, .industry > p { position: relative; z-index: 2; }
.industry:hover { border-color: var(--border-firm); color: var(--on-ink); }
.industry:hover .industry__art { transform: scale(1.04); }
.industry { border-color: var(--border); }
.industry h3 { font-size: var(--step-1); font-weight: 400; color: var(--on-ink); margin-bottom: 0.3rem; }
.industry p { font-size: 0.8125rem; color: var(--on-ink-faint); margin: 0; }

.case { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 900px) {
  .case { grid-template-columns: 0.95fr 1.05fr; }
  .case--flip .case__visual { order: 2; }
}
.case__visual { background: var(--paper-2); min-height: 300px; position: relative; display: grid; place-items: center; }
.case__visual img { width: 90%; }
.case__visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.case__body { padding: clamp(2rem, 3.5vw, 3.25rem); }
.case__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.tag {
  display: inline-block; padding: 0.3rem 0.7rem;
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500; color: var(--text-faint); border: 1px solid var(--border-firm); border-radius: 100px;
}
.case__results {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 1.5rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--border);
}
.case__results .stat-strip__value { font-size: clamp(1.625rem, 2.4vw, 2.125rem); }

.logo-wall {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.logo-wall__item {
  background: var(--bg); padding: 2.1rem 1rem; display: grid; place-items: center; text-align: center;
  font-size: 0.9375rem; font-weight: 400; letter-spacing: 0.02em; color: var(--text-faint);
  transition: color 0.2s var(--ease);
}
.logo-wall__item:hover { color: var(--text); }

.quote { padding: 0; margin: 0; border: 0; }
.quote blockquote {
  margin: 0 0 1.75rem; font-size: var(--step-3); font-weight: 200;
  line-height: 1.3; letter-spacing: -0.03em; color: var(--text); max-width: 24ch;
}
.quote figcaption { font-family: var(--mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.1em; color: var(--text-faint); }
.quote figcaption strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 0.25rem; }

.accordion { border-top: 1px solid var(--border); }
.accordion details { border-bottom: 1px solid var(--border); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0; font-size: var(--step-1); font-weight: 300; color: var(--text);
  cursor: pointer; list-style: none; transition: color 0.15s var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; width: 0.8rem; height: 0.8rem; flex-shrink: 0; background: var(--mark);
  clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%);
  transition: transform 0.25s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(135deg); }
.accordion summary:hover { color: var(--text-muted); }
.accordion__body { padding-bottom: 1.75rem; color: var(--text-muted); max-width: 62ch; }

/* ---------- 10. Safety ---------- */

/* Hazard chevron rule — the one place the yellow/black pairing is literal.
   Used sparingly: it marks safety-critical content, nothing else. */
.hazard-rule {
  height: 3px; border: 0; margin: 0;
  background-color: #f7ca2e
}

.safety-note {
  border-left: 3px solid var(--asc-yellow);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 2rem 0;
}
.safety-note p { color: var(--text-muted); }
.safety-note strong { color: var(--text); display: block; margin-bottom: 0.3rem; }

.safety-card { border-color: var(--border-firm); }
.safety-card .card__icon { color: var(--mark); }

/* ---------- 11. Forms ---------- */
.form-grid { display: grid; gap: 1.35rem; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-field--full { grid-column: 1 / -1; }
}
.form-field { display: flex; flex-direction: column; gap: 0.1rem; }
.form-field--full > .btn { align-self: start; }
@media (max-width: 639px) { .form-field--full > .btn { align-self: stretch; } }
.form-field label {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}
.form-field .req { color: var(--text); }
.form-field .hint {
  display: block; margin-top: 0.3rem; font-family: var(--font); font-size: 0.8125rem;
  color: var(--text-faint); letter-spacing: 0; text-transform: none; font-weight: 400;
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 0.85rem 1rem;
  font-family: inherit; font-size: 0.9375rem; color: var(--text);
  background: #ffffff; border: 1px solid var(--border-firm); border-radius: var(--radius);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.form-field textarea { resize: vertical; min-height: 150px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(247, 202, 46, 0.45);
}
.form-field input:user-invalid, .form-field textarea:user-invalid { border-color: var(--asc-red); }
.form-field .req { font-weight: 600; }

.form-consent {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-size: 0.875rem; color: var(--text-muted); line-height: 1.55;
}
.form-consent input { width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--asc-yellow); }
.form-status { padding: 0.95rem 1.15rem; border-radius: var(--radius); font-size: 0.9375rem; border-left: 3px solid; }
.form-status[data-state="success"] { background: rgba(247, 202, 46, 0.18); border-color: var(--asc-yellow); color: var(--text); }
.form-status[data-state="error"] { background: rgba(168, 50, 42, 0.10); border-color: var(--asc-red); color: var(--text); }
.form-status[hidden] { display: none; }

.contact-card { border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.25rem); }
.contact-card h3 { font-size: var(--step-1); font-weight: 400; margin-bottom: 0.3rem; }
.contact-card__role {
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.14em;
  font-weight: 500; text-transform: uppercase; color: var(--label-ink); margin-bottom: 1rem;
}
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
  display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 0.85rem;
  font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted);
}
.contact-list li:last-child { margin-bottom: 0; }
.contact-list svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 0.28rem; color: var(--mark); stroke-width: 1.5; }
.contact-list a { color: var(--text); text-decoration: none; }
.contact-list a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--asc-yellow); text-decoration-thickness: 2px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy-deep); }
.cta-band__inner { display: grid; gap: 2.5rem; align-items: center; padding-block: clamp(3.5rem, 7vw, 6rem); }
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1.35fr 1fr; }
  .cta-band .btn-row { justify-content: flex-end; margin-top: 0; }
}
.cta-band h2 { margin-bottom: 0.85rem; max-width: 20ch; }
.cta-band p { color: var(--text-muted); margin: 0; max-width: 46ch; }

/* ---------- 12. Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink-mid); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; font-size: 0.9375rem; }
.site-footer a { color: var(--on-ink-mid); text-decoration: none; }
.site-footer a:hover { color: var(--asc-yellow); }
.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
  padding-bottom: 3rem; border-bottom: 1px solid var(--rule);
}
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } }
.footer-brand .brand { margin-bottom: 1.5rem; }
.footer-brand p { color: var(--on-ink-faint); font-size: 0.875rem; max-width: 32ch; line-height: 1.7; }
.footer-col h4 {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ink); margin-bottom: 1.25rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.7rem; font-size: 0.875rem; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding-top: 2rem; font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.06em; color: var(--on-ink-faint);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; padding: 0; margin: 0; }
.footer-bottom li { margin: 0; }

/* ---------- 13. Preview index ---------- */
.preview-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.preview-card {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: var(--text); display: flex; flex-direction: column;
  transition: border-color 0.2s var(--ease);
}
.preview-card:hover { border-color: var(--border-firm); color: var(--text); }
.preview-card__frame {
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2);
  border-bottom: 1px solid var(--border); position: relative;
}
.preview-card__frame iframe {
  width: 1440px; height: 900px; border: 0;
  transform: scale(0.278); transform-origin: top left;
  position: absolute; top: 0; left: 0; pointer-events: none;
}
.preview-card__body { padding: 1.35rem 1.5rem 1.6rem; }
.preview-card__body h3 { font-size: var(--step-1); font-weight: 400; margin-bottom: 0.3rem; }
.preview-card__body p { font-size: 0.875rem; color: var(--text-faint); margin: 0; }

/* ---------- 14. Utilities ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }


/* ---------- 15. Dark surfaces ----------
   The navy bands redefine the semantic tokens and nothing downstream
   has to know which ground it is sitting on. Yellow becomes the accent
   colour proper here: 10.4:1 on navy, against 1.45:1 on ivory. */
.section--alt,
.cta-band,
.site-footer,
.industry {
  --text:        var(--on-ink);
  --text-muted:  var(--on-ink-mid);
  --text-faint:  var(--on-ink-faint);
  --border:      rgba(244, 246, 250, 0.16);
  --border-firm: rgba(244, 246, 250, 0.30);
  --label-ink:   var(--asc-yellow);
  --mark:        var(--asc-yellow);
  --accent:      var(--asc-yellow);
  color: var(--text);
}
.section--alt { --bg: var(--navy); }
.cta-band     { --bg: var(--navy-deep); }
.site-footer  { --bg: var(--ink); }
.industry     { --bg: var(--ink); }

/* On navy the primary button is yellow; on ivory it is ink. Same button,
   and it is legible on both — which is the whole point of the token set. */
.section--alt .btn--primary,
.cta-band .btn--primary {
  background: var(--asc-yellow); color: var(--asc-ink); border-color: var(--asc-yellow);
}
.section--alt .btn--primary:hover,
.cta-band .btn--primary:hover {
  background: var(--asc-yellow-bright); border-color: var(--asc-yellow-bright); color: var(--asc-ink);
}
.section--alt .arrow-link,
.cta-band .arrow-link { color: var(--asc-yellow); }
.section--alt .card--link:hover,
.cta-band .card--link:hover { background: rgba(244, 246, 250, 0.04); }
.section--alt .card--link:hover h3 { color: var(--asc-yellow); }
.section--alt .tier { background: var(--navy); }
.section--alt .tier--featured { background: #16294a; }
.section--alt .logo-wall__item { background: var(--navy); }
.section--alt .case__visual,
.section--alt .product-card__visual { background: #16294a; }
.section--alt .form-field input,
.section--alt .form-field select,
.section--alt .form-field textarea {
  background: rgba(244, 246, 250, 0.05); color: var(--on-ink); border-color: rgba(244, 246, 250, 0.22);
}
.section--alt .form-field input:focus,
.section--alt .form-field select:focus,
.section--alt .form-field textarea:focus { border-color: var(--asc-yellow); }
.section--alt .accordion summary:hover { color: var(--asc-yellow); }
.site-footer .brand { color: var(--on-ink); }

@media print {
  .site-header, .mobile-nav, .cta-band, .site-footer, .btn, .nav-toggle { display: none !important; }
  body, .hero, .section, .section--alt, .card, .tier { background: #fff !important; color: #000 !important; }
  h1, h2, h3, h4, p, li, td, th { color: #000 !important; }
  .card, .tier, .tiers, .case, .accordion details { border-color: #bbb !important; }
  a { text-decoration: underline; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* =========================================================
   16. Divi
   Pages on the Datum template do not render Divi's chrome at
   all, so there is very little to undo. What is here covers
   the two places Divi's own markup shows through: a Contact
   Form module dropped into the enquiry page, and any Divi
   button used outside the Datum templates.
   ========================================================= */

/* WordPress core markup that appears inside page content */
.asc-datum .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.asc-datum .alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.asc-datum .alignright { float: right; margin: 0 0 1rem 1.5rem; }
.asc-datum .aligncenter { display: block; margin-inline: auto; }
.asc-datum figure { margin: 0; }
.asc-datum .wp-caption-text,
.asc-datum figcaption { font-size: 0.8125rem; color: var(--text-faint); }

/* The admin bar is 32px tall and would sit over a sticky header. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* Divi Contact Form module, styled to match the hand-built form */
.asc-datum .et_pb_contact_form_container { padding: 0; }
.asc-datum .et_pb_contact_main_title { display: none; }
.asc-datum .et_pb_contact_field { padding: 0 0 1.35rem; }
.asc-datum .et_pb_contact_field_options_title,
.asc-datum .et_pb_contact_field label {
  font-family: var(--font); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
  display: block; margin-bottom: 0.45rem;
}
.asc-datum .et_pb_contact_field input,
.asc-datum .et_pb_contact_field select,
.asc-datum .et_pb_contact_field textarea,
.asc-datum .et_pb_contact_field .input {
  width: 100%; padding: 0.85rem 1rem;
  font-family: var(--font); font-size: 0.9375rem; color: var(--text);
  background: #ffffff; border: 1px solid var(--border-firm);
  border-radius: var(--radius);
}
.asc-datum .et_pb_contact_field input:focus,
.asc-datum .et_pb_contact_field textarea:focus,
.asc-datum .et_pb_contact_field .input:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(247, 202, 46, 0.45);
}
.asc-datum .et_pb_contact_submit,
.asc-datum .et_pb_button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.8rem;
  font-family: var(--font); font-size: var(--step--1); font-weight: 500;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--radius);
}
.asc-datum .et_pb_contact_submit:hover,
.asc-datum .et_pb_button:hover {
  background: #1a2d4e; border-color: #1a2d4e; color: var(--paper);
}
/* Divi appends an arrow glyph to buttons on hover; the Datum buttons
   do not have one, and half a button growing on hover is a jump. */
.asc-datum .et_pb_button::after { display: none !important; }
.asc-datum .et_pb_button { padding: 0.95rem 1.8rem !important; }

/* Contact Form 7, for sites using that instead */
.asc-datum .wpcf7 label {
  display: block;
  font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}
.asc-datum .wpcf7 input[type="text"],
.asc-datum .wpcf7 input[type="email"],
.asc-datum .wpcf7 input[type="tel"],
.asc-datum .wpcf7 select,
.asc-datum .wpcf7 textarea {
  width: 100%; padding: 0.85rem 1rem; margin-top: 0.45rem;
  font-family: var(--font); font-size: 0.9375rem; color: var(--text);
  background: #ffffff; border: 1px solid var(--border-firm); border-radius: var(--radius);
}
.asc-datum .wpcf7 input[type="submit"] {
  padding: 0.95rem 1.8rem; font-family: var(--font); font-size: var(--step--1);
  font-weight: 500; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--radius); cursor: pointer;
}
/* =========================================================
   DIVI COMPATIBILITY
   ========================================================= */

body.asc-datum {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font) !important;
}

/* ASC Datum controls heading colours, not Divi */
body.asc-datum h1,
body.asc-datum h2,
body.asc-datum h3,
body.asc-datum h4,
body.asc-datum h5,
body.asc-datum h6 {
    color: var(--text) !important;
    font-family: var(--font) !important;
}

/* Remove Divi spacing around ASC HTML */
body.asc-datum .et_pb_section {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
}

body.asc-datum .et_pb_row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.asc-datum .et_pb_column,
body.asc-datum .et_pb_code,
body.asc-datum .et_pb_code_inner {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
}
/* =========================================================
   Contact Form 7 spacing
   ========================================================= */

.wpcf7 .form-grid {
    row-gap: 0.5rem;
    column-gap: 0.9rem;
}

.wpcf7 .form-field {
    gap: 0.09rem;
    margin: 0;
}

.wpcf7 .form-field label {
    display: block;
    margin: 0 0 0rem 0;
    padding: 0;
    line-height: 1.2;
}

.wpcf7 .wpcf7-form-control-wrap {
    display: block;
    margin: 0;
    padding: 0;
}

.wpcf7 .wpcf7-form-control,
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea,
.wpcf7 p {
    margin: 0 !important;
}