/* RaBBLi Automations — site.css
   Black + one purple. Archivo only. 1px deep-purple rules. No cards, no shadows, no gradients that paint colour. */

/* ---------- 1. Tokens ---------- */
:root {
  --black: #000000;
  --black-alt: #060509;
  --purple: #7024DD;
  --deep: #350E6E;
  --white: #FFFFFF;
  --muted: #B8B3C2;

  --font: Archivo, 'Liberation Sans', Arial, Helvetica, sans-serif;
  --fs-display: clamp(2.25rem, 1.2rem + 2.2vw, 3.25rem);
  --fs-h1: clamp(2rem, 1.3rem + 2vw, 3rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-tagline: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --fs-nav: 0.9375rem;
  --lh-display: 1.02;
  --lh-h: 1.12;
  --lh-body: 1.55;
  --measure: 66ch;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --container: 72rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 8vw, 7.5rem);
  --hero-pad: clamp(3rem, 6vw, 6rem);
  --header-h: 64px;
  --notice-h: 36px;
  --stripe-h: 24px;
  --btn-h: 48px;
  --mark: clamp(200px, 30vw, 400px);
  --mark-px: 400px;
  --feed-h: 120px;
  --feed-pos: 55%;                 /* horizontal slice of the (rotated) field shown in the feed strip; tuned by screenshot */

  --radius: 6px;
  --rule: 1px solid var(--deep);
  --rule-brand: 2px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-hover: 120ms;
  --t-ui: 220ms;
  --t-feed: 350ms;
  --t-climb: 450ms;
  --t-flicker: 180ms;
  --t-pad: 120ms;
}

html.notice-hidden { --notice-h: 0px; }

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

html {
  background: var(--black);
  color-scheme: dark;
  caret-color: var(--purple);
  accent-color: var(--purple);
  scrollbar-color: var(--deep) var(--black);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--muted);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-stretch: 100%;
  overflow-x: clip;
}
body.nav-open { overflow: hidden; }

::selection { background: var(--purple); color: var(--white); }

:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.notice :focus-visible, .btn-primary:focus-visible { outline-color: var(--white); }

a {
  color: var(--white);
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  text-decoration-color: currentColor;
  transition: text-decoration-color var(--t-hover) var(--ease);
}
a:hover { text-decoration-color: var(--purple); text-decoration-thickness: 2px; }

img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
dl, dt, dd { margin: 0; }

h1, h2, h3 {
  margin: 0;
  color: var(--white);
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
h2 { font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h); letter-spacing: -0.01em; }
h3 { font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: 0; }

.page-h1 { font-weight: 700; font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.015em; }
.tagline { font-style: italic; font-weight: 400; font-size: var(--fs-tagline); line-height: 1.4; color: var(--muted); }
.label {
  font-weight: 700;
  font-stretch: 125%;
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.small { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.measure { max-width: var(--measure); }
.tnum { font-variant-numeric: tabular-nums; }

.container {
  box-sizing: content-box;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main { display: block; scroll-margin-top: 72px; }
.section { padding-block: var(--section-pad); }
.field-alt { background: var(--black-alt); }

/* Rule: the one thicker rule under h1s */
.rule {
  width: 64px;
  height: var(--rule-brand);
  background: var(--purple);
  margin: var(--s4) 0 var(--s6);
}

/* ---------- 3. Buttons and the Copy control ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--s5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--purple); border-color: var(--purple); color: var(--white); }
.btn-primary:hover, .btn-primary:active { background: var(--white); border-color: var(--white); color: var(--black); }
.btn-secondary { background: transparent; border-color: var(--deep); color: var(--white); }
.btn-secondary:hover, .btn-secondary:active { border-color: var(--purple); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
@media (max-width: 599.98px) {
  .actions { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .actions .btn { width: 100%; }
}

.copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 44px;
  padding: 0 var(--s4);
  border-radius: var(--radius);
  border: 1px solid var(--deep);
  background: transparent;
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 1;
  transition: border-color var(--t-hover) var(--ease);
}
.copy::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.copy:hover { border-color: var(--purple); }
.copy.is-copied { border-color: var(--purple); }
.email-control { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; }
.email-control .email, .email-control a { color: var(--white); font-size: 1.0625rem; }

/* ---------- 4. Skip link ---------- */
.skip {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--s5);
  background: var(--purple);
  color: var(--white);
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.skip:focus, .skip:focus-visible {
  clip: auto;
  clip-path: none;
  width: auto;
  height: 48px;
  overflow: visible;
  outline-color: var(--white);
}

/* ---------- 5. Preview notice ---------- */
.notice {
  height: var(--notice-h);
  overflow: hidden;
  background: var(--purple);
  color: var(--white);
  transition: height 200ms var(--ease);
}
.notice.is-hiding { height: 0; }
html.notice-hidden .notice { display: none; }
.notice-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  height: 36px;
}
.notice-text {
  margin: 0;
  min-width: 0;
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--white);
}
.notice-short { display: none; }
@media (max-width: 599.98px) {
  .notice-long { display: none; }
  .notice-short { display: inline; }
  .notice-inner { gap: var(--s2); }
  .notice-hide { padding: 0 var(--s1); }
}
.notice-hide {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 44px;
  padding: 0 var(--s2);
  border-radius: 0;
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 1;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--t-hover) var(--ease);
}
.notice-hide::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.notice-hide:hover { text-decoration-color: var(--white); }

/* ---------- 6. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  background: var(--black);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--deep);
  display: none;
}
html:not(.js) .site-header::after, .site-header.is-scrolled::after { display: block; }
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s6);
  height: var(--header-h);
}
.logo { display: inline-flex; align-items: center; height: 44px; text-decoration: none; margin-right: auto; }
.logo-oneline { display: none; }
.logo-stack { display: block; }
@media (min-width: 900px) {
  .logo-oneline { display: block; }
  .logo-stack { display: none; }
}

.nav-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--white);
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .bar { transform-origin: 12px 12px; transition: transform var(--t-ui) var(--ease); }
.nav-toggle[aria-expanded="true"] .bar-1 { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar-2 { transform: translateY(-4px) rotate(-45deg); }

.site-nav { display: flex; align-items: center; }
.site-nav-inner { display: flex; align-items: center; gap: var(--s6); }
.site-nav ul { display: flex; align-items: center; gap: var(--s6); }
.site-nav nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: var(--white);
  font-weight: 500;
  font-size: var(--fs-nav);
  line-height: 1;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--t-hover) var(--ease);
}
.site-nav nav a:hover { text-decoration-color: var(--deep); text-decoration-thickness: 2px; }
.site-nav nav a[aria-current="page"], .site-nav nav a[aria-current="page"]:hover { text-decoration-color: var(--purple); }
.site-nav .btn { height: 40px; }

@media (min-width: 800px) {
  .nav-toggle { display: none; }
}
@media (max-width: 799.98px) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    align-items: stretch;
    grid-template-rows: 0fr;
    background: var(--black);
    transition: grid-template-rows var(--t-ui) var(--ease);
  }
  .site-nav-inner { display: block; min-height: 0; overflow: hidden; }
  .site-nav.is-open, html:not(.js) .site-nav { grid-template-rows: 1fr; }
  .site-nav ul { display: block; padding: 0 var(--gutter); }
  .site-nav li { border-top: var(--rule); }
  .site-nav nav a { display: flex; align-items: center; height: 56px; min-height: 56px; padding: 0; }
  .site-nav .btn { display: flex; width: auto; height: 48px; margin: var(--s4) var(--gutter); }
  .site-nav .drawer-cta { border-top: var(--rule); border-bottom: var(--rule); }
  /* Closed drawer: out of the tab order and the accessibility tree; visibility waits for the 220ms collapse */
  html.js .site-nav:not(.is-open) .site-nav-inner { visibility: hidden; transition: visibility 0s linear var(--t-ui); }
  html.js .site-nav.is-open .site-nav-inner { visibility: visible; transition-delay: 0s; }
  html.reduce .site-nav-inner { transition: none; }
  /* No JS: the drawer is in normal flow under the logo row, not painted over the hero; the dead toggle goes */
  html:not(.js) .site-header { position: static; height: auto; }
  html:not(.js) .header-inner { flex-wrap: wrap; height: auto; row-gap: 0; }
  html:not(.js) .logo { height: var(--header-h); }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { position: static; width: 100%; }
}

/* ---------- 7. Hero (home) ---------- */
.hero { padding-block: var(--hero-pad); overflow-x: clip; background: var(--black); }
.hero-grid { display: grid; grid-template-columns: 1fr; align-items: center; column-gap: var(--s7); }
.hero-copy { max-width: 44rem; }
.hero .tagline { margin-bottom: var(--s3); max-width: 44rem; }
.hero .h1 {
  font-weight: 800;
  font-stretch: 100%;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: var(--s4);
  max-width: 44rem;
}
.hero .h1 .line { display: block; text-wrap: balance; }
.hero .h1 .line-1 { color: var(--white); }
.hero .h1 .line-2 { color: var(--purple); }
.hero .rule { margin: 0 0 var(--s6); }

.proof { display: grid; gap: var(--s3); font-size: 1.0625rem; color: var(--muted); max-width: 44rem; }
.proof li { position: relative; padding-left: 1.75rem; }
.pad { position: absolute; left: 0; top: 0.45em; width: 12px; height: 12px; }
.pad circle {
  fill: var(--purple);
  stroke: var(--purple);
  stroke-width: 1.5;
  transition: fill var(--t-pad) var(--ease) 50ms, stroke var(--t-pad) var(--ease) 50ms;
}
.proof li:nth-child(2) .pad circle { transition-delay: 130ms; }
.proof li:nth-child(3) .pad circle { transition-delay: 210ms; }
.hero .actions { margin-top: 40px; max-width: 44rem; }

.mark-col { position: relative; }
.mark-stage {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 400px;
}
.mark-off, .mark-on {
  position: absolute;
  inset: 0;
  z-index: 1;
  -webkit-mask-image: url(/assets/img/mark-mask-800.png);
  mask-image: url(/assets/img/mark-mask-800.png);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.mark-off { background: var(--deep); }
.mark-on { background: var(--purple); clip-path: inset(0 0 0 0); }

.feed {
  position: absolute;
  z-index: 0;
  right: 50%;
  width: 100vw;
  height: var(--feed-h);
  top: calc(82% - var(--feed-h) / 2);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000000 0, #000000 calc(100% - min(160px, 40%)), transparent 100%);
  mask-image: linear-gradient(90deg, #000000 0, #000000 calc(100% - min(160px, 40%)), transparent 100%);
}
.feed-off, .feed-on { position: absolute; inset: 0; }
.feed-on { clip-path: inset(0 0 0 0); }
/* The field's traces run vertically; the strip runs horizontally. The painter is rotated a quarter turn
   so the traces run along the strip, into the threads. One instance of the wide field, no repeat. */
.feed-off::before, .feed-on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--feed-h);
  height: 100vw;
  transform-origin: 0 0;
  transform: rotate(90deg) translateY(-100%);
  -webkit-mask-image: url(/assets/img/circuit-field-wide.svg);
  mask-image: url(/assets/img/circuit-field-wide.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--mark-px) * 4.75) auto;
  mask-size: calc(var(--mark-px) * 4.75) auto;
  -webkit-mask-position: var(--feed-pos) top;
  mask-position: var(--feed-pos) top;
}
.feed-off::before { background: var(--deep); }
.feed-on::before { background: var(--purple); }

/* Under 1024: single column, copy first, mark between the buttons and the proof list */
@media (max-width: 1023.98px) {
  :root { --mark-px: 150px; --feed-h: 48px; --feed-pos: 40%; }
  .hero { padding-top: var(--s5); }
  .hero-copy { display: contents; }
  .hero .tagline { order: 1; }
  .hero .h1 { order: 2; }
  .hero .rule { order: 3; }
  .hero .actions { order: 4; margin-top: 0; }
  .mark-col { order: 5; margin-top: var(--s6); }
  .proof { order: 6; margin-top: var(--s5); }
  .mark-stage { width: 150px; max-width: 150px; margin-inline-start: auto; }
  .feed-off::before, .feed-on::before {
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
  }
}
@media (min-width: 1024px) {
  :root { --mark-px: 288px; }
  .hero-grid { grid-template-columns: 18rem 1fr; }
}
@media (min-width: 1200px) {
  :root { --mark-px: 400px; }
  .hero-grid { grid-template-columns: 26rem 1fr; }
}

/* Hero state model */
html.arm:not(.lit) .mark-on { clip-path: inset(100% 0 0 0); }
html.arm:not(.lit) .feed-on { clip-path: inset(0 100% 0 0); }
html.arm:not(.lit) .hero .h1 .line-2 { color: var(--deep); }
html.arm:not(.lit) .hero .rule { background: var(--deep); }
html.arm:not(.lit) .pad circle { fill: transparent; stroke: var(--deep); }

html.arm.play:not(.lit) .feed-on { animation: feed var(--t-feed) var(--ease) 0ms forwards; }
html.arm.play:not(.lit) .mark-on { animation: climb var(--t-climb) var(--ease) 300ms forwards; }
html.arm.play.lit .hero .h1 .line-2 { animation: flicker-text var(--t-flicker) steps(1) 0ms 1; }
html.arm.play.lit .hero .rule { animation: flicker-rule var(--t-flicker) steps(1) 0ms 1; }

@keyframes feed { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes climb { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes flicker-text { 0% { color: var(--purple); } 33% { color: var(--deep); } 66% { color: var(--purple); } 100% { color: var(--purple); } }
@keyframes flicker-rule { 0% { background: var(--purple); } 33% { background: var(--deep); } 66% { background: var(--purple); } 100% { background: var(--purple); } }

html.reduce .mark-on, html.reduce .feed-on, html.reduce .hero .h1 .line-2, html.reduce .hero .rule, html.reduce .pad circle {
  animation: none;
  transition: none;
}

/* ---------- 8. Why bother automating? ---------- */
.why-grid { display: grid; grid-template-columns: 1fr; margin-top: var(--s6); }
.why-grid > div { padding-block: var(--s5); border-top: var(--rule); }
.why-grid > div:first-child { border-top: 0; padding-top: 0; }
.why-grid h3 { margin-bottom: var(--s2); }
@media (min-width: 800px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .why-grid > div { padding-block: 0; padding-inline: var(--s6); border-top: 0; border-left: var(--rule); }
  .why-grid > div:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- 9. What we automate (index) and the six services ---------- */
.section-head { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s6); }
.section-head a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 800px) {
  .section-head { flex-direction: row; justify-content: space-between; align-items: baseline; }
}
.service-index, .service-grid { display: grid; grid-template-columns: 1fr; }
.service-index li { border-top: var(--rule); }
.service-index a { display: block; padding: var(--s5) 0; text-decoration: none; }
.service-index h3 {
  margin-bottom: var(--s2);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--t-hover) var(--ease);
}
.service-index a:hover h3, .service-index a:focus-visible h3 { text-decoration-color: var(--purple); }
.service-index p { color: var(--muted); }

.service-grid article { padding: var(--s6) 0; border-top: var(--rule); scroll-margin-top: 88px; }
.service-grid h2 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: 0; margin-bottom: var(--s3); }
.service-grid p { color: var(--muted); max-width: var(--measure); }

@media (min-width: 800px) {
  .service-index, .service-grid { grid-template-columns: 1fr 1fr; }
  .service-index li:nth-child(even), .service-grid article:nth-child(even) { border-left: var(--rule); padding-left: var(--s6); }
  .service-index li:nth-child(odd) a { padding-right: var(--s6); }
  .service-grid article:nth-child(odd) { padding-right: var(--s6); }
}

/* ---------- 10. Steps (How it works / How a project runs) ---------- */
.steps-lead { margin-top: var(--s3); color: var(--muted); }
.steps { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--s6); margin-top: var(--s7); overflow: clip; }
.steps li { position: relative; }
.steps .step-pad { width: 14px; height: 14px; }
.steps .step-pad circle { fill: var(--purple); stroke: var(--purple); stroke-width: 1.5; }
.steps .label { display: block; margin-top: var(--s5); font-variant-numeric: tabular-nums; }
.steps h3 { margin-top: var(--s3); margin-bottom: var(--s2); }
.steps p { color: var(--muted); }
@media (max-width: 799.98px) {
  .steps::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--deep); }
  .steps li { padding-left: 32px; }
  .steps .step-pad { position: absolute; left: 0; top: 0; }
  .steps .label { margin-top: 0; }
}
@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
  .steps li::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--s7)); top: 6px; height: 2px; background: var(--deep); }
  .steps li:last-child::before { right: 0; }
  .steps .step-pad { position: relative; z-index: 1; }
  .steps-4 { grid-template-columns: repeat(2, 1fr); }
  .steps-4 li:nth-child(even)::before { right: 0; }
}
@media (min-width: 1100px) {
  .steps-4 { grid-template-columns: repeat(4, 1fr); }
  .steps-4 h3 { min-height: 2.4em; }
  .steps-4 li:nth-child(even)::before { right: calc(-1 * var(--s7)); }
  .steps-4 li:last-child::before { right: 0; }
}

/* ---------- 11. Partner line ---------- */
.partner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding-block: var(--s5);
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.partner img { flex: none; }
@media (max-width: 599.98px) {
  .partner { flex-direction: column; align-items: flex-start; gap: var(--s4); }
}

/* ---------- 12. Closing CTA band ---------- */
.cta {
  position: relative;
  overflow: hidden;
  overflow-x: clip;
  padding-block: var(--section-pad);
  background: var(--black);
}
.cta-field {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000000 22%, #000000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000000 22%, #000000 78%, transparent 100%);
}
.cta-field-paint {
  position: absolute;
  inset: 0;
  background: var(--deep);
  -webkit-mask-image: url(/assets/img/circuit-field-wide.svg);
  mask-image: url(/assets/img/circuit-field-wide.svg);
  -webkit-mask-size: 1400px auto;
  mask-size: 1400px auto;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.cta-content { position: relative; z-index: 1; max-width: 36rem; }
.cta-content .cta-line { margin-top: var(--s3); font-style: italic; font-size: var(--fs-tagline); line-height: 1.4; color: var(--muted); }
.cta-content .cta-body { margin-top: var(--s3); color: var(--muted); }
.cta-content .actions { margin-top: var(--s6); }
@media (min-width: 800px) {
  .cta-content { max-width: min(36rem, calc(60% - var(--s6))); }
}
@media (max-width: 799.98px) {
  .cta { padding-bottom: calc(var(--section-pad) + 128px); }
  .cta-field {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 30%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000000 15%, #000000 85%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000000 15%, #000000 85%, transparent 100%);
  }
  .cta-field-paint { -webkit-mask-position: center top; mask-position: center top; }
}

/* ---------- 13. Page heads (about / services) ---------- */
.page-head { padding-block: var(--hero-pad); background: var(--black); }
.page-head .rule { margin: var(--s4) 0 var(--s5); }
.page-head .intro { max-width: var(--measure); color: var(--muted); }
.page-head .intro p + p { margin-top: var(--s4); }
.page-head .actions { margin-top: var(--s6); }
.about-h1 { max-width: 22ch; }

/* ---------- 14. Company facts ---------- */
.facts { display: grid; grid-template-columns: 1fr; border-top: var(--rule); border-bottom: var(--rule); }
.facts > div { padding-block: var(--s5); border-top: var(--rule); }
.facts > div:first-child { border-top: 0; }
.facts dd { margin-top: var(--s2); color: var(--white); font-weight: 700; font-size: 1.25rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
@media (min-width: 800px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts > div { padding-inline: var(--s6); border-top: 0; border-left: var(--rule); }
  .facts > div:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- 15. Footer ---------- */
.site-footer { border-top: var(--rule); background: var(--black); }
.footer-inner { padding-top: var(--s8); padding-bottom: var(--s7); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s6); }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s7); }
}
.footer-brand .tagline { margin-top: var(--s4); max-width: 30ch; }
.footer-h { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: 0; margin-bottom: var(--s3); }
.footer-company p { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.footer-company p + p { margin-top: var(--s2); }
.footer-contact ul { display: grid; gap: var(--s3); }
.footer-contact li { display: flex; align-items: center; gap: var(--s3); min-height: 44px; }
.footer-contact a { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; font-size: 1.0625rem; }
.footer-contact .site-url { color: var(--muted); }
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: var(--rule);
}
.footer-partner { display: flex; align-items: center; gap: var(--s4); }
.footer-copy { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 599.98px) {
  .footer-row { flex-direction: column; align-items: flex-start; gap: var(--s4); }
}
.stripe {
  height: var(--stripe-h);
  width: 100%;
  background: url(/assets/img/stripe-tile.png) repeat-x;
  background-size: 48px 48px;
}

/* ---------- 16. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mark-on, .feed-on, .hero .h1 .line-2, .hero .rule, .pad circle { animation: none !important; transition: none !important; }
  .site-nav, .nav-toggle .bar, .notice { transition: none !important; }
}
html.reduce .site-nav, html.reduce .nav-toggle .bar, html.reduce .notice { transition: none; }