/* Allred Systems mockup v3 — "Technical Workshop"
   Refined-minimal pass 2026-08-03. Source of truth: Brand/Style_guide.md.
   Direction (operator-approved): precise, honest repair workshop. No warmth.
   Sora (display) + JetBrains Mono (technical) + IBM Plex Sans (body).
   Bright #74D7FF is fill/decoration on DARK only. #1163A8 is the on-light blue.
   Motion 2: zero JS deps for visuals. Slider removed; diagnostic report replaces it. */

:root {
  /* Ink + neutrals */
  --as-ink: #16212c;          /* near-black blue, headings/body on light */
  --as-navy: #223040;          /* dark anchor */
  --as-navy-deep: #1a2734;     /* darker navy for layered dark sections */
  --as-navy-panel: #2b3c4f;
  --as-slate: #5b6977;
  --as-slate-2: #7a8895;
  --as-border: #d9e2eb;
  --as-border-strong: #c3d0db;
  --as-white: #ffffff;

  /* Two-tier blue */
  --as-blue: #74d8ff;          /* accent fill/decoration on DARK only */
  --as-blue-deep: #5fcbf8;
  --as-blue-ink: #1163a8;       /* readable blue on light: links/eyebrows/icons */
  --as-pale: #eef7fc;
  --as-pale-2: #f4f9fc;
  --as-pale-line: #dce9f2;

  /* Red (sparing — urgency/repair only) */
  --as-red: #9c1809;
  --as-red-bright: #b51d0c;
  --as-red-soft: #fdeeeb;

  /* Blueprint grid */
  --as-grid-dark: rgba(116, 215, 255, 0.07);
  --as-grid-dark-strong: rgba(116, 215, 255, 0.13);
  --as-grid-light: rgba(17, 99, 168, 0.06);

  /* Spacing (8px base) */
  --as-space-xs: 0.5rem;
  --as-space-sm: 0.75rem;
  --as-space-md: 1rem;
  --as-space-lg: 1.5rem;
  --as-space-xl: 2rem;
  --as-space-2xl: 3rem;
  --as-space-3xl: 4.5rem;
  --as-container: 1200px;
  --as-container-narrow: 860px;

  /* Radius — restrained, engineered (less pill) */
  --as-radius: 10px;
  --as-radius-sm: 7px;
  --as-radius-xs: 4px;

  /* Shadow — lighter, 1px-line-led */
  --as-shadow-sm: 0 1px 2px rgba(17,19,24,0.05);
  --as-shadow-md: 0 6px 18px rgba(17,19,24,0.07);
  --as-shadow-lg: 0 14px 30px rgba(17,19,24,0.10);
  --as-shadow-blue: 0 10px 22px rgba(116,215,255,0.22);
  --as-shadow-red: 0 10px 22px rgba(156,24,9,0.20);

  /* Type */
  --as-font-head: "Sora", "Segoe UI", system-ui, sans-serif;
  --as-font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --as-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --as-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --as-dur: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--as-font-body);
  color: var(--as-slate);
  background: var(--as-white);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--as-font-head);
  color: var(--as-ink);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 var(--as-space-md);
}
h1 { font-size: clamp(2.35rem, 1.5rem + 3.4vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 1.0rem + 0.8vw, 1.45rem); font-weight: 600; }
h4 { font-size: clamp(1.0rem, 0.9rem + 0.4vw, 1.15rem); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 var(--as-space-md); }

a { color: var(--as-blue-ink); text-decoration-color: rgba(17,99,168,0.4); text-underline-offset: 3px; }
a:hover { color: var(--as-ink); text-decoration-color: var(--as-blue-ink); }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--as-blue-ink); outline-offset: 3px; border-radius: 3px; }

.container { width: 100%; max-width: var(--as-container); margin: 0 auto; padding: 0 var(--as-space-lg); }
.narrow { max-width: var(--as-container-narrow); }

.section { padding: var(--as-space-2xl) 0; }
@media (min-width: 900px) { .section { padding: var(--as-space-3xl) 0; } }
.section--pale { background: var(--as-pale); }
.section--pale2 { background: var(--as-pale-2); }
.section--navy { background: var(--as-navy); }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy p { color: rgba(255,255,255,0.78); }

/* ---- Mono technical labels (eyebrows / tags / spec lines) ---- */
.eyebrow, .tag, .spec {
  font-family: var(--as-font-mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--as-blue-ink);
  display: inline-block;
  margin-bottom: var(--as-space-md);
}
.eyebrow { position: relative; padding-left: 1.6rem; }
.eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1rem; height: 1px;
  background: var(--as-blue-ink); transform: translateY(-50%);
}
.eyebrow--dark { color: var(--as-blue); padding-left: 0; }
.eyebrow--dark::before { display: none; }
.eyebrow--red { color: var(--as-red); }
.eyebrow--red::before { background: var(--as-red); }
.section--navy .eyebrow { color: var(--as-blue); padding-left: 0; }
.section--navy .eyebrow::before { display: none; }

/* Spec line — mono detail row (e.g. "$125 / service call / first hour included") */
.spec { color: var(--as-slate); text-transform: none; letter-spacing: 0.06em; }
.spec strong { color: var(--as-ink); font-weight: 600; }
.section--navy .spec { color: rgba(255,255,255,0.7); }
.section--navy .spec strong { color: #fff; }

.lede { font-size: 1.12rem; max-width: 60ch; line-height: 1.6; }
.section-head { max-width: 66ch; margin-bottom: var(--as-space-xl); }
.section--navy .section-head p { color: rgba(255,255,255,0.78); }

/* Pills — engineered chips */
.pill {
  display: inline-block;
  background: var(--as-white); border: 1px solid var(--as-border);
  color: var(--as-ink); font-family: var(--as-font-mono); font-size: 0.72rem;
  font-weight: 500; letter-spacing: 0.06em;
  padding: 0.3rem 0.7rem; border-radius: var(--as-radius-xs);
}
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill-row--area .pill { background: var(--as-pale); }
.section--navy .pill { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); }

/* ---------- Buttons — engineered, less rounded ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--as-font-head); font-weight: 600; font-size: 0.95rem;
  padding: 0.8rem 1.4rem; border-radius: var(--as-radius-xs);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  letter-spacing: -0.01em;
  transition: transform var(--as-dur) var(--as-ease), background var(--as-dur) var(--as-ease),
              box-shadow var(--as-dur) var(--as-ease), border-color var(--as-dur) var(--as-ease);
}
.btn--primary { background: var(--as-blue); color: var(--as-navy); box-shadow: var(--as-shadow-blue); }
.btn--primary:hover { background: var(--as-blue-deep); transform: translateY(-1px); }
.btn--secondary { background: var(--as-red); color: #fff; box-shadow: var(--as-shadow-red); }
.btn--secondary:hover { background: var(--as-red-bright); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--as-ink); border-color: var(--as-ink); }
.btn--outline:hover { background: var(--as-ink); color: #fff; }
.section--navy .btn--outline { color: #fff; border-color: rgba(255,255,255,0.55); }
.section--navy .btn--outline:hover { background: #fff; color: var(--as-navy); border-color: #fff; }
/* Final CTA: the tertiary View Services button sits on the navy cta-band;
   fill it solid white so it reads as a real button, not a dark low-contrast ghost. */
.cta-band .btn--outline { background: #fff; color: var(--as-navy); border-color: #fff; }
.cta-band .btn--outline:hover { background: rgba(255,255,255,0.88); color: var(--as-navy); border-color: rgba(255,255,255,0.88); transform: translateY(-1px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--as-space-md); }
.btn:focus-visible { outline: 2px solid var(--as-blue-ink); outline-offset: 3px; }

/* ---------- Blueprint grid texture (dark sections) ---------- */
.hero, .page-hero, .cta-band, .section--navy { position: relative; }
.hero::before, .page-hero::before, .cta-band::before, .section--navy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--as-grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--as-grid-dark) 1px, transparent 1px),
    linear-gradient(var(--as-grid-dark-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--as-grid-dark-strong) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
  opacity: 0.9;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--as-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--as-space-md); min-height: 64px; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand-mark {
  width: 36px; height: 36px; border-radius: var(--as-radius-xs);
  background: var(--as-navy); color: var(--as-blue);
  display: grid; place-items: center;
  font-family: var(--as-font-mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0;
  border: 1px solid var(--as-navy-deep);
}
.brand-name { font-family: var(--as-font-head); font-weight: 700; color: var(--as-ink); font-size: 1.0rem; line-height: 1.1; letter-spacing: -0.02em; }
.brand-sub { display: block; font-family: var(--as-font-mono); font-weight: 400; font-size: 0.62rem; color: var(--as-slate); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 1px; }

.nav { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 1020px) { .nav { display: flex; } }
.nav a {
  font-family: var(--as-font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--as-ink); text-decoration: none; position: relative; padding: 0.35rem 0;
  text-transform: uppercase;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: var(--as-blue-ink); transform: scaleX(0); transform-origin: left; transition: transform 0.26s var(--as-ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-cta { display: none; font-family: var(--as-font-mono); font-size: 0.8rem; letter-spacing: 0.02em; }
@media (min-width: 1020px) { .header-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--as-navy); color: #fff; border: 0; border-radius: var(--as-radius-xs);
  font-family: var(--as-font-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.06em;
  padding: 0.55rem 0.95rem; cursor: pointer; text-transform: uppercase;
}
@media (min-width: 1020px) { .nav-toggle { display: none; } }
.mobile-nav { display: none; border-top: 1px solid var(--as-border); background: #fff; }
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: var(--as-space-sm) 0; }
.mobile-nav a { display: block; padding: 0.65rem var(--as-space-lg); font-family: var(--as-font-mono); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--as-ink); }
.mobile-nav a:hover { background: var(--as-pale); }

/* ---------- Hero ---------- */
.hero { background: var(--as-navy); color: #fff; overflow: hidden; }
.hero-inner { position: relative; display: grid; gap: var(--as-space-xl); padding-block: var(--as-space-2xl); align-items: center; }
@media (min-width: 980px) {
  .hero-inner { grid-template-columns: 1.08fr 0.92fr; gap: var(--as-space-3xl); padding-block: var(--as-space-3xl); }
}
.hero h1 { color: #fff; }
.hero h1 .accent { color: var(--as-blue); }
.hero p { color: rgba(255,255,255,0.78); }
.hero .lede { font-size: 1.14rem; }
.hero .eyebrow { color: var(--as-blue); }
.hero-spec {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: var(--as-space-lg);
  padding-top: var(--as-space-md); border-top: 1px solid rgba(255,255,255,0.16);
  font-family: var(--as-font-mono); font-size: 0.8rem; color: rgba(255,255,255,0.72); letter-spacing: 0.04em;
}
.hero-spec span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-spec span::before { content: ""; width: 6px; height: 6px; background: var(--as-blue); display: inline-block; }

/* Duotone media — the cool, cohesive image treatment.
   Aspect ratio lives on the WRAPPER (reliable); the img fills it absolutely
   with object-fit:cover so it never stretches tall. */
.hero-media, .split-media, .service-card-media { position: relative; overflow: hidden; }
.hero-media { aspect-ratio: 16 / 11; border-radius: var(--as-radius-sm); border: 1px solid rgba(116,215,255,0.22); box-shadow: var(--as-shadow-lg); }
.hero-media img, .split-media img, .service-card-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) sepia(0.16) hue-rotate(155deg) saturate(1.05) brightness(1);
  transition: transform 0.6s var(--as-ease);
}
.hero-media::after, .split-media::after, .service-card-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(34,48,64,0), rgba(22,33,44,0.26));
  box-shadow: inset 0 0 0 1px rgba(116,215,255,0.08);
}
/* Corner registration marks on the hero frame */
.hero-media::before {
  content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--as-blue), var(--as-blue)) top left / 14px 1px no-repeat,
    linear-gradient(var(--as-blue), var(--as-blue)) top left / 1px 14px no-repeat,
    linear-gradient(var(--as-blue), var(--as-blue)) top right / 14px 1px no-repeat,
    linear-gradient(var(--as-blue), var(--as-blue)) top right / 1px 14px no-repeat,
    linear-gradient(var(--as-blue), var(--as-blue)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--as-blue), var(--as-blue)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--as-blue), var(--as-blue)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--as-blue), var(--as-blue)) bottom right / 1px 14px no-repeat;
  opacity: 0.55;
}

.hero-badge {
  position: absolute; right: -10px; bottom: -16px; z-index: 3;
  background: var(--as-navy-deep); border: 1px solid rgba(116,215,255,0.3); border-radius: var(--as-radius-xs);
  padding: 0.85rem 1.15rem; box-shadow: var(--as-shadow-md); max-width: 240px;
}
.hero-badge .b-label { font-family: var(--as-font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--as-blue); display: block; margin-bottom: 0.3rem; }
.hero-badge strong { display: block; font-family: var(--as-font-head); color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.hero-badge span { font-family: var(--as-font-body); font-size: 0.82rem; color: rgba(255,255,255,0.72); }
@media (max-width: 620px) { .hero-badge { position: static; margin-top: var(--as-space-md); max-width: none; } }

/* ---------- Uiverse Text Wipe (addon) — workshop-adapted, no glow ----------
   Source: uiverse quick-chicken-50 (satyamchaudharydev, MIT). Stroke outline text
   that scan-fills with accent blue on load. Used ONCE on the hero answer phrase
   as a signature "diagnostic scan" moment. Motion 2 (pure CSS), reduced-motion safe.
   No neon drop-shadow (Local trust 5 disqualifies glow). Scan-fill uses
   white-space:normal so multi-line text still aligns (a left→right scan bar). */
.utw-wipe {
  position: relative; display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.45);
  line-height: inherit; letter-spacing: inherit; font: inherit;
}
.utw-wipe__actual { display: inline-block; }
.utw-wipe__fill {
  position: absolute; inset: 0; width: 0; overflow: hidden;
  color: var(--as-blue);
  -webkit-text-stroke: 1.5px var(--as-blue);
  white-space: normal; pointer-events: none;
  border-right: 3px solid var(--as-blue);
  transition: width 1s var(--as-ease);
}
@keyframes utw-wipe-in { from { width: 0; } to { width: 100%; border-right-color: transparent; } }
.utw-wipe--in .utw-wipe__fill {
  animation: utw-wipe-in 1.1s var(--as-ease) 0.2s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .utw-wipe__fill { width: 100% !important; animation: none !important; transition: none !important; border-right: 0; }
}

/* ---------- Proof strip (spec sheet) ---------- */
.proof { background: var(--as-navy-deep); color: rgba(255,255,255,0.85); border-block: 1px solid rgba(255,255,255,0.08); }
.proof-grid { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 720px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .proof-grid { grid-template-columns: repeat(4, 1fr); } }
.proof-card {
  padding: var(--as-space-xl) var(--as-space-lg);
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 1000px) { .proof-card { border-bottom: 0; } .proof-card:nth-child(4n) { border-right: 0; } }
@media (min-width: 720px) and (max-width: 999px) { .proof-card:nth-child(2n) { border-right: 0; } }
.proof-card .proof-num { font-family: var(--as-font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--as-blue); display: block; margin-bottom: 0.6rem; }
.proof-card .proof-icon { color: var(--as-blue); margin-bottom: 0.5rem; display: block; }
.proof-card strong { display: block; font-family: var(--as-font-head); color: #fff; font-size: 1.0rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.25rem; }
.proof-card span { font-size: 0.88rem; color: rgba(255,255,255,0.66); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: var(--as-space-lg); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: #fff; border: 1px solid var(--as-border); border-radius: var(--as-radius);
  padding: var(--as-space-lg); box-shadow: var(--as-shadow-sm);
  display: flex; flex-direction: column; gap: 0.4rem;
  transition: transform var(--as-dur) var(--as-ease), box-shadow var(--as-dur) var(--as-ease), border-color var(--as-dur) var(--as-ease);
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--as-blue-ink); transform: scaleY(0); transform-origin: top; transition: transform 0.34s var(--as-ease);
}
.card--red::before { background: var(--as-red); }
.card:hover { transform: translateY(-3px); box-shadow: var(--as-shadow-md); border-color: var(--as-border-strong); }
.card:hover::before { transform: scaleY(1); }
.card p { margin-bottom: 0.6rem; font-size: 0.96rem; }
.card-link {
  margin-top: auto; font-family: var(--as-font-mono); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--as-blue-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; text-transform: uppercase;
}
.card-link::after { content: "\2192"; transition: transform 0.25s var(--as-ease); }
.card-link:hover { color: var(--as-ink); }
.card-link:hover::after { transform: translateX(4px); }
.card-icon {
  width: 38px; height: 38px; border-radius: var(--as-radius-xs);
  background: var(--as-pale); color: var(--as-blue-ink); display: grid; place-items: center;
  font-family: var(--as-font-mono); font-weight: 500; font-size: 0.82rem; margin-bottom: 0.5rem;
  border: 1px solid var(--as-pale-line);
}
.card--red .card-icon { background: var(--as-red-soft); color: var(--as-red); border-color: #f7d9d3; }
.card h3 { margin-bottom: 0.35rem; }

.service-card-media { aspect-ratio: 16 / 10; border-radius: var(--as-radius) var(--as-radius) 0 0; margin: calc(var(--as-space-lg) * -1) calc(var(--as-space-lg) * -1) var(--as-space-lg); border-bottom: 1px solid var(--as-border); }
.card:hover .service-card-media img { transform: scale(1.04); }

/* ---------- Unique Card Hover (addon) ---------- */
.uch [data-uch-card] { will-change: transform; transition: transform 0.25s var(--as-ease), box-shadow var(--as-dur) var(--as-ease); transform-style: preserve-3d; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .uch [data-uch-card]:hover { transform: perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-4px); box-shadow: var(--as-shadow-md); }
  .uch [data-uch-card]:hover .service-card-media img { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .uch [data-uch-card]:hover { transform: none; } }

/* ---------- Steps ---------- */
.steps { display: grid; gap: var(--as-space-lg) var(--as-space-xl); grid-template-columns: 1fr; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { border-top: 1px solid var(--as-border); padding-top: var(--as-space-md); }
.step-num { font-family: var(--as-font-mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.14em; color: var(--as-blue-ink); display: block; margin-bottom: 0.4rem; }
.section--navy .step-num { color: var(--as-blue); }
.section--navy .step { border-top-color: rgba(255,255,255,0.16); }
.section--navy .step h3 { color: #fff; }
.step h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }

/* ---------- Split ---------- */
.split { display: grid; gap: var(--as-space-xl); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--as-space-3xl); } .split--flip .split-media { order: -1; } }
.split-media { aspect-ratio: 3 / 2; border-radius: var(--as-radius); border: 1px solid var(--as-border); box-shadow: var(--as-shadow-sm); }

/* ---------- Diagnostic report (replaces the dropped slider) ----------
   Static, mono, 1px-line spec sheet. Proof-first. Motion 0 (reveal only). */
.diag {
  position: relative; max-width: 760px; margin: 0 auto;
  background: var(--as-navy-deep); color: rgba(255,255,255,0.85);
  border: 1px solid rgba(116,215,255,0.22); border-radius: var(--as-radius);
  box-shadow: var(--as-shadow-md); overflow: hidden;
}
.diag::before { /* faint internal grid */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(116,215,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,215,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.diag-head {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--as-space-md);
  padding: 0.9rem var(--as-space-lg); border-bottom: 1px solid rgba(255,255,255,0.12);
  font-family: var(--as-font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--as-blue);
}
.diag-head .case { color: rgba(255,255,255,0.5); }
.diag-body { position: relative; padding: var(--as-space-lg); }
.diag-grid { display: grid; gap: 0; }
.diag-row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--as-space-md);
  padding: 0.6rem 0; border-bottom: 1px dashed rgba(255,255,255,0.12);
  font-family: var(--as-font-mono); font-size: 0.88rem;
}
.diag-row:last-child { border-bottom: 0; }
.diag-row .k { color: rgba(255,255,255,0.72); display: inline-flex; align-items: center; gap: 0.55rem; }
.diag-row .k::before { content: "\25B8"; color: var(--as-blue); }
.diag-row .v { color: #fff; font-weight: 500; letter-spacing: 0.02em; }
.diag-row .v.ok { color: var(--as-blue); }
.diag-row .v.warn { color: #ffce8a; }
.diag-row .v.bad { color: #ff9c8a; }
.diag-verdict {
  position: relative; margin-top: var(--as-space-md); padding: var(--as-space-md) var(--as-space-lg);
  border-top: 1px solid rgba(255,255,255,0.12); background: rgba(116,215,255,0.06);
}
.diag-verdict .vlabel { font-family: var(--as-font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--as-blue); display: block; margin-bottom: 0.35rem; }
.diag-verdict p { margin: 0; color: rgba(255,255,255,0.86); font-size: 0.98rem; }
.diag-verdict p strong { color: #fff; }
.diag-note { position: relative; text-align: center; font-family: var(--as-font-mono); font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: var(--as-space-md); letter-spacing: 0.04em; }

/* ---------- Scope of work checklist (service detail pages — replaces slider) ---------- */
.scope { max-width: 720px; margin: 0 auto; }
.scope-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--as-border); }
.scope-row {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.9rem; align-items: baseline;
  padding: 0.8rem 0; border-bottom: 1px solid var(--as-border);
  font-family: var(--as-font-mono); font-size: 0.9rem; color: var(--as-ink); letter-spacing: 0.01em;
}
.scope-row .n { color: var(--as-blue-ink); font-weight: 500; letter-spacing: 0.04em; }
.scope-row span:last-child { color: var(--as-slate); font-family: var(--as-font-body); font-size: 0.98rem; letter-spacing: 0; }

/* ---------- Testimonials (static grid) ---------- */
.testimonial-grid { display: grid; grid-template-columns: 1fr; gap: var(--as-space-lg); }
@media (min-width: 760px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
  background: #fff; border: 1px solid var(--as-border); border-radius: var(--as-radius);
  padding: 1.6rem; box-shadow: var(--as-shadow-sm); display: flex; flex-direction: column; gap: 0.75rem;
}
.testimonial blockquote { margin: 0; position: relative; }
.testimonial blockquote::before { content: "\201C"; position: absolute; left: -0.1rem; top: -1.6rem; font-family: var(--as-font-head); font-size: 3.2rem; color: var(--as-pale-line); line-height: 1; }
.testimonial blockquote p { color: var(--as-slate); font-size: 1.02rem; line-height: 1.6; margin: 0; }
.testimonial cite { color: var(--as-ink); font-weight: 600; font-style: normal; font-size: 0.86rem; font-family: var(--as-font-head); letter-spacing: -0.01em; display: block; }
.testimonial cite::before { content: "\2014\00A0"; color: var(--as-slate-2); }
.testimonial .stars { color: var(--as-blue-ink); letter-spacing: 0.18em; font-size: 0.9rem; }
.testimonial-note { font-size: 0.86rem; color: var(--as-slate); max-width: 64ch; }

/* ---------- FAQ accordion ---------- */
.accordion { border-top: 1px solid var(--as-border); }
.accordion-item { border: 1px solid var(--as-border); border-radius: var(--as-radius-sm); box-shadow: var(--as-shadow-sm); margin-bottom: var(--as-space-sm); overflow: hidden; }
.accordion-item details { padding: 0; }
.accordion-item summary {
  cursor: pointer; list-style: none; font-family: var(--as-font-head); font-weight: 600;
  color: var(--as-ink); font-size: 1.0rem; padding: var(--as-space-md) var(--as-space-lg); display: flex; justify-content: space-between; gap: var(--as-space-md); align-items: center; letter-spacing: -0.01em;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after { content: "+"; font-family: var(--as-font-mono); font-size: 1.2rem; color: var(--as-blue-ink); line-height: 1; transition: transform 0.25s var(--as-ease); }
.accordion-item details[open] summary { background: var(--as-pale); border-bottom: 1px solid var(--as-pale-line); }
.accordion-item details[open] summary::after { transform: rotate(45deg); }
.accordion-item details p { margin: 0; padding: var(--as-space-md) var(--as-space-lg) var(--as-space-lg); max-width: 72ch; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--as-navy); color: #fff; }
.cta-inner { position: relative; display: grid; gap: var(--as-space-lg); padding-block: var(--as-space-2xl); align-items: center; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: 1.3fr 1fr; padding-block: var(--as-space-3xl); } }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.78); }

/* ---------- Forms ---------- */
.form-card { background: #fff; border: 1px solid var(--as-border); border-radius: var(--as-radius); padding: var(--as-space-xl); box-shadow: var(--as-shadow-sm); }
.form-card h3 { margin-top: 0; }
.field { margin-bottom: var(--as-space-md); }
.field label { display: block; font-family: var(--as-font-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--as-ink); margin-bottom: 0.4rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--as-font-body); font-size: 1rem; color: var(--as-ink);
  padding: 0.7rem 0.85rem; border: 1px solid var(--as-border-strong); border-radius: var(--as-radius-xs); background: var(--as-white);
  transition: border-color var(--as-dur) var(--as-ease), box-shadow var(--as-dur) var(--as-ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--as-blue-ink); box-shadow: 0 0 0 3px rgba(17,99,168,0.18); outline: none; }
.field textarea { min-height: 130px; resize: vertical; }
.form-note { font-family: var(--as-font-mono); font-size: 0.74rem; color: var(--as-slate); letter-spacing: 0.02em; }

.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--as-space-md); }
.contact-list li { border-bottom: 1px solid var(--as-border); padding-bottom: var(--as-space-md); }
.contact-list strong { display: block; font-family: var(--as-font-mono); color: var(--as-blue-ink); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.3rem; font-weight: 500; }
.contact-list a { font-size: 1.1rem; font-family: var(--as-font-head); font-weight: 600; text-decoration: none; color: var(--as-ink); letter-spacing: -0.01em; }
.contact-list a:hover { color: var(--as-blue-ink); }
.contact-list span { font-size: 1.02rem; color: var(--as-slate); }

/* ---------- Interior page hero ---------- */
.page-hero { background: var(--as-navy); color: #fff; overflow: hidden; }
.page-hero-inner { position: relative; padding-block: var(--as-space-2xl); }
@media (min-width: 900px) { .page-hero-inner { padding-block: var(--as-space-3xl); } }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.78); }
.crumbs { font-family: var(--as-font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: var(--as-space-md); }
.crumbs a { color: rgba(255,255,255,0.7); text-decoration: none; }
.crumbs a:hover { color: var(--as-blue); }

.callout { border-left: 2px solid var(--as-blue-ink); background: var(--as-pale); border-radius: var(--as-radius-xs); padding: var(--as-space-md) var(--as-space-lg); margin: var(--as-space-lg) 0; }
.callout strong { font-family: var(--as-font-head); color: var(--as-ink); }
.callout--red { border-left-color: var(--as-red); background: var(--as-red-soft); }

.related { display: grid; gap: var(--as-space-md); grid-template-columns: 1fr; }
@media (min-width: 760px) { .related { grid-template-columns: repeat(3, 1fr); } }
.related a { display: block; padding: var(--as-space-md) var(--as-space-lg); border: 1px solid var(--as-border); border-radius: var(--as-radius-sm); text-decoration: none; color: var(--as-ink); font-family: var(--as-font-head); font-weight: 600; transition: background var(--as-dur) var(--as-ease), border-color var(--as-dur) var(--as-ease); }
.related a:hover { background: var(--as-pale); border-color: var(--as-blue-ink); color: var(--as-blue-ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--as-navy-deep); color: rgba(255,255,255,0.6); padding: var(--as-space-2xl) 0 var(--as-space-lg); border-top: 1px solid rgba(255,255,255,0.08); }
.footer-grid { display: grid; gap: var(--as-space-xl); grid-template-columns: 1fr; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.site-footer h4 { color: #fff; font-family: var(--as-font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--as-space-md); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer a { color: rgba(255,255,255,0.66); text-decoration: none; font-size: 0.92rem; }
.site-footer a:hover { color: var(--as-blue); }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: rgba(255,255,255,0.5); }
.footer-bottom { margin-top: var(--as-space-xl); padding-top: var(--as-space-md); border-top: 1px solid rgba(255,255,255,0.1); font-family: var(--as-font-mono); font-size: 0.76rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.45); display: flex; flex-wrap: wrap; gap: var(--as-space-md); justify-content: space-between; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--as-ease), transform 0.6s var(--as-ease); }
.no-js .reveal, .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--as-blue); color: var(--as-navy); padding: 0.55rem 1rem; font-family: var(--as-font-mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; z-index: 100; border-radius: 0 0 var(--as-radius-xs) 0; }
.skip-link:focus { left: var(--as-space-lg); top: var(--as-space-sm); }

@media (max-width: 480px) { .brand-sub { display: none; } }

/* ---------- Mobile banner breathing room (operator: banners felt tight) ----------
   Placed LAST so it overrides the per-component base rules (hero/page-hero/cta
   bases are defined earlier in the file). */
@media (max-width: 720px) {
  .container { padding-left: 1.75rem; padding-right: 1.75rem; }
  .hero-inner { padding-block: 3.75rem 3.25rem; gap: 2.25rem; }
  .page-hero-inner { padding-block: 3.5rem 3rem; }
  .cta-inner { padding-block: 3.25rem; gap: 1.25rem; }
  .hero h1 { margin-bottom: 1.25rem; }
  .hero-spec { margin-top: 1.75rem; }
}

/* ---------- Header gutter on pages still served by this stylesheet ----------
   The global header sits inside .container and reads --ars-gutter for its own
   edge. This stylesheet widens .container to 1.5rem (and 1.75rem under 720px),
   so the header has to follow or the logo and Menu button sit inboard of the
   page text. The 1.5rem case is picked up automatically through
   --as-space-lg; only the mobile step needs stating.
   Delete this block together with the rest of the file once every page is
   ported to the Bootstrap-first build. */
@media (max-width: 720px) {
  .ars-header .navbar { --ars-gutter: 1.75rem; }
}

/* The header is global but this stylesheet is not: its .btn base (0.8rem 1.4rem)
   outranks Bootstrap's .btn-sm, so the header CTA rendered 53px tall here and
   36px on the ported pages. Match the ported size. Delete with this file. */
.ars-header .btn {
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  border-radius: 5px;
}