/* site.css: the AKJ visual layer, from the Argon concept (03, H-006: home, service template,
   component sheet; Gemini 4 Argon, 2026-10-23), composed by script with PATCH 1-9 and 06's A1-A7
   (reviews/R-001). Tokens live in tokens.css. Rules: orange text only on Onyx; text on orange is
   Onyx; never fade text; 44 px targets; motion only through js/ui.js (GSAP), never pre-hidden in CSS. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }
}

img, svg {
  display: block;
  max-width: 100%;
}

/* Focus States */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  background: var(--akj-orange);
  color: var(--akj-onyx);
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--akj-onyx);
}

.skip-link:focus {
  top: 16px;
}

/* Layout Container & Sections */
.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .container {
    padding: 0 32px;
  }
}

@media (min-width: 1200px) {
  .container {
    padding: 0 48px;
  }
}

.section {
  padding: 56px 0;
  border-bottom: 1px solid rgba(34, 40, 49, 0.14);
  position: relative;
}

@media (min-width: 1024px) {
  .section {
    padding: 80px 0;
  }
}

.section--surface {
  background-color: var(--color-surface);
}

.panel-onyx {
  background-color: var(--color-panel);
  color: var(--color-on-panel);
  border-bottom: var(--rule);
}

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  margin-top: 0;
  line-height: 1.15;
  text-align: left;
}

h1 {
  font-size: var(--fs-display);
  margin-bottom: 20px;
}

h2 {
  font-size: var(--fs-section);
  margin-bottom: 16px;
}

h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  margin-bottom: 12px;
}

p {
  margin-top: 0;
  margin-bottom: 16px;
  text-align: left;
  max-width: 68ch;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-support);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: var(--rule);
}

.panel-onyx .accent-word {
  color: var(--akj-orange);
}

/* Placeholders (Strict Rule) */
.ph {
  display: inline-block;
  background-color: var(--akj-light-grey);
  color: var(--akj-onyx);
  border: 1px dashed var(--akj-onyx);
  padding: 2px 6px;
  font-family: var(--font-body);
  font-size: var(--fs-support);
  font-weight: 500;
  line-height: 1.35;
  vertical-align: baseline;
  word-break: break-word;
}

/* Photo Slots */
.photo-slot {
  background-color: var(--akj-light-grey);
  color: var(--akj-onyx);
  border: 2px solid var(--akj-onyx);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  gap: 12px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.photo-slot--4-3  { aspect-ratio: 4 / 3; }

.photo-slot--16-9 { aspect-ratio: 16 / 9; }

.photo-slot svg {
  width: 36px;
  height: 36px;
  stroke: var(--akj-onyx);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}

.photo-slot .ph {
  font-size: 14px;
  text-align: center;
}

/* Decorative Angled Slash (Used max twice on page) */
.angled-slash {
  display: inline-block;
  width: 32px;
  height: 6px;
  background-color: var(--akj-orange);
  transform: skewX(-11deg);
  margin-bottom: 16px;
}

/* Icons */
.icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}

/* Buttons & Links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap-min);
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--akj-onyx);
  transition: transform var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease;
  text-align: left;
}

.btn--sm {
  min-height: var(--tap-min);
  padding: 6px 14px;
  font-size: var(--fs-support);
}

.btn--primary {
  background-color: var(--color-cta-bg);
  color: var(--color-cta-text);
  border-color: var(--akj-onyx);
}

.panel-onyx .btn--primary {
  border-color: var(--akj-orange);
}

.btn--secondary {
  background-color: var(--akj-white);
  color: var(--akj-onyx);
  border-color: var(--akj-onyx);
}

@media (hover: hover) {
  .btn--primary:hover,
  .btn--primary:focus-visible {
    background-color: var(--akj-onyx);
    color: var(--akj-white);
    border-color: var(--akj-onyx);
    transform: translateY(-2px);
  }
  .panel-onyx .btn--primary:hover,
  .panel-onyx .btn--primary:focus-visible {
    background-color: var(--akj-white);
    color: var(--akj-onyx);
    border-color: var(--akj-white);
  }
  .btn--secondary:hover,
  .btn--secondary:focus-visible {
    background-color: var(--akj-onyx);
    color: var(--akj-white);
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:focus-visible {
    transform: none !important;
  }
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-min);
  padding: 6px 4px;
  color: var(--akj-onyx);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.text-link--on-dark {
  color: var(--akj-white);
}

@media (hover: hover) {
  .text-link:hover,
  .text-link:focus-visible {
    text-decoration-color: var(--akj-orange);
  }
}

/* Header & Lockups (Identical to home-concept.html) */
.site-header {
  background-color: var(--akj-white);
  border-bottom: var(--rule);
  position: relative;
  z-index: 200;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand-link {
  text-decoration: none;
  color: var(--akj-onyx);
  display: inline-block;
}

.lockup-desktop {
  display: none;
}

.lockup-desktop .mark-img {
  width: 100%;
  height: auto;
}

.lockup-desktop .lockup-rule {
  height: 2px;
  background-color: var(--akj-orange);
  margin: 6px 0;
  border: 0;
}

.lockup-desktop .lockup-descriptor {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--akj-onyx);
}

.lockup-mobile {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

.lockup-mobile .mark-img {
  width: 88px;
  height: auto;
  flex-shrink: 0;
}

.lockup-mobile .mobile-live-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--akj-onyx);
}

.brand-link.img-fallback .mark-img,
.brand-link.img-fallback .lockup-rule,
.brand-link.img-fallback .lockup-descriptor {
  display: none !important;
}

.brand-link .fallback-plain-text {
  display: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--akj-onyx);
}

.brand-link.img-fallback .fallback-plain-text {
  display: inline;
}

@media (min-width: 768px) {
  .lockup-desktop {
    display: block;
    flex-shrink: 0;
  }
  .lockup-mobile {
    display: none;
  }
}

/* Navigation */
.desktop-nav-wrap {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-nav-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    justify-content: space-between;
    margin-left: 24px;
  }
}

.main-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-item {
  position: relative;
}

.nav-link,
.nav-submenu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-min);
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--akj-onyx);
  background: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  .nav-link:hover,
  .nav-submenu-btn:hover {
    background-color: var(--akj-light-grey);
  }
}

.nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background-color: var(--akj-white);
  border: 2px solid var(--akj-onyx);
  border-top: var(--rule);
  padding: 8px 0;
  list-style: none;
  margin: 0;
  display: none;
  z-index: 300;
}

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

.nav-submenu a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 8px 16px;
  color: var(--akj-onyx);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}

.nav-submenu a[aria-current="page"] {
  background-color: var(--akj-light-grey);
  font-weight: 600;
  border-left: 4px solid var(--akj-orange);
}

@media (hover: hover) {
  .nav-submenu a:hover,
  .nav-submenu a:focus-visible {
    background-color: var(--akj-light-grey);
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobile Menu Toggle & Panel */
.mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 8px 12px;
  background-color: var(--akj-white);
  color: var(--akj-onyx);
  border: 2px solid var(--akj-onyx);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .mobile-menu-btn {
    display: none;
  }
}

.mobile-menu-panel {
  display: none;
  background-color: var(--akj-white);
  border-top: 2px solid var(--akj-onyx);
  border-bottom: var(--rule);
  padding: 16px;
}

.mobile-menu-panel.is-open {
  display: block;
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav-list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  color: var(--akj-onyx);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--akj-light-grey);
}

.mobile-nav-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  border-left: var(--rule);
}

/* Desktop Slim Sticky Bar */
.desktop-sticky-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--akj-onyx);
  color: var(--akj-white);
  border-bottom: var(--rule);
  z-index: 250;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--motion-base) ease, visibility 0s linear var(--motion-base);
}

@media (min-width: 1024px) {
  .desktop-sticky-bar {
    display: block;
  }
  .desktop-sticky-bar.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--motion-base) ease;
  }
}

.desktop-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  gap: 16px;
}

.desktop-sticky-brand {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--akj-white);
  text-decoration: none;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.desktop-sticky-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.desktop-sticky-links a:not(.btn) {
  color: var(--akj-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
}

/* Breadcrumb Slot */
.breadcrumb-bar {
  background-color: var(--akj-light-grey);
  border-bottom: 1px solid rgba(34, 40, 49, 0.16);
  padding: 8px 0;
}

.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-support);
}

.breadcrumb-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 4px;
  color: var(--akj-onyx);
  font-weight: 500;
  text-decoration: underline;
}

.breadcrumb-sep {
  font-weight: 600;
  color: var(--akj-onyx);
}

/* Grids */
.grid-12 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

@media (min-width: 768px) {
  .grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.col-5 { grid-column: 1 / -1; }

.col-6 { grid-column: 1 / -1; }

.col-7 { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .col-6 { grid-column: span 6; }
}

@media (min-width: 1024px) {
  .col-5 { grid-column: span 5; }
  .col-7 { grid-column: span 7; }
}

.cards-grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 28px;
}

@media (min-width: 768px) {
  .cards-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cards-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cards-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 28px;
}

@media (min-width: 768px) {
  .cards-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Headline word clip for GSAP */
.h1-word-clip {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.h1-word-inner {
  display: inline-block;
}

.hero-direct-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid rgba(34, 40, 49, 0.2);
}

/* Forms & Inputs */
.form-box {
  background-color: var(--akj-light-grey);
  color: var(--akj-onyx);
  border: 2px solid var(--akj-onyx);
  border-top: 4px solid var(--akj-orange);
  padding: 24px;
}

@media (min-width: 768px) {
  .form-box {
    padding: 32px;
  }
}

.form-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 600px) {
  .form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-fieldset {
  border: 0;
  margin: 0 0 18px 0;
  padding: 0;
}

.form-label {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--akj-onyx);
  display: block;
}

.form-optional {
  font-weight: 400;
  font-size: var(--fs-support);
}

.form-helper {
  font-size: var(--fs-support);
  color: var(--akj-onyx);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--akj-onyx);
  background-color: var(--akj-white);
  border: 2px solid var(--akj-onyx);
  border-radius: 0;
}

.form-textarea {
  min-height: 110px;
  resize: vertical;
}

.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-width: 3px;
}

/* Radio Group */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-min);
  padding: 8px 16px;
  background-color: var(--akj-white);
  border: 2px solid var(--akj-onyx);
  cursor: pointer;
  font-weight: 500;
}

.radio-option input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--akj-onyx);
}

/* Consent box (D-024): optional, unticked; the whole label is the click target */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.form-checkbox {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0.1rem 0 0;
  accent-color: var(--akj-onyx);
}
.form-check-label {
  cursor: pointer;
}

/* File Input & Photo State List */
.file-drop {
  background-color: var(--akj-white);
  border: 2px dashed var(--akj-onyx);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-input {
  font-family: var(--font-body);
  font-size: var(--fs-support);
  min-height: var(--tap-min);
  padding: 8px 0;
  width: 100%;
}

.photo-upload-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.photo-upload-item {
  background-color: var(--akj-white);
  border: 2px solid var(--akj-onyx);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.photo-upload-item--failed {
  border-left: 6px solid var(--akj-onyx);
}

.photo-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.photo-name {
  font-weight: 600;
  font-size: var(--fs-support);
  word-break: break-all;
}

.photo-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-support);
  font-weight: 600;
  padding: 2px 8px;
  background-color: var(--akj-light-grey);
  border: 1px solid var(--akj-onyx);
}

.photo-progress-track {
  width: 100%;
  height: 8px;
  background-color: var(--akj-light-grey);
  border: 1px solid var(--akj-onyx);
}

.photo-progress-bar {
  height: 100%;
  background-color: var(--akj-onyx);
}

.photo-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-support);
  font-weight: 600;
  color: var(--akj-onyx);
  background-color: var(--akj-white);
  padding: 6px 8px;
  border: 1px solid var(--akj-onyx);
  border-left: 4px solid var(--akj-onyx);
}

.form-error.is-visible {
  display: flex;
}

.form-success {
  display: none;
  background-color: var(--akj-white);
  color: var(--akj-onyx);
  border: 2px solid var(--akj-onyx);
  border-left: 6px solid var(--akj-orange);
  padding: 20px;
  margin-top: 20px;
}

.form-success.is-visible {
  display: block;
}

/* Cards */
.card {
  background-color: var(--akj-white);
  color: var(--akj-onyx);
  border: 2px solid var(--akj-onyx);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: transform var(--motion-fast) ease;
}

.card--service {
  border-top: 4px solid var(--akj-orange);
}

.card--crosslink {
  background-color: var(--akj-onyx);
  color: var(--akj-white);
  border-color: var(--akj-onyx);
  border-top: 4px solid var(--akj-orange);
}

@media (hover: hover) {
  .card--service:hover,
  .card--article:hover,
  .card--crosslink:hover {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card--service:hover,
  .card--article:hover,
  .card--crosslink:hover {
    transform: none;
  }
}

.card-header-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Checklists */
.check-list,
.doc-checklist {
  list-style: none;
  padding: 0;
  margin: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.doc-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--akj-white);
  border: 2px solid var(--akj-onyx);
  padding: 14px 16px;
}

/* Animated Steps */
.steps-track {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-top: 36px;
  padding-left: 28px;
}

.steps-line-wrap {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 10px;
  width: 2px;
  background-color: rgba(34, 40, 49, 0.2);
}

.steps-line {
  width: 100%;
  height: 100%;
  background-color: var(--akj-orange);
  transform-origin: top center;
}

@media (min-width: 768px) {
  .steps-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-left: 0;
    padding-top: 32px;
  }
  .steps-line-wrap {
    top: 22px;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
  }
  .steps-line {
    transform-origin: left center;
  }
}

.step-item {
  background-color: var(--akj-white);
  border: 2px solid var(--akj-onyx);
  padding: 24px;
  position: relative;
}

.step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--akj-onyx);
  color: var(--akj-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 14px;
  border-bottom: 3px solid var(--akj-orange);
}

/* FAQs */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}

.faq-item {
  background-color: var(--akj-white);
  border: 2px solid var(--akj-onyx);
}

.faq-summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

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

.faq-indicator {
  width: 24px;
  height: 24px;
  border: 2px solid var(--akj-onyx);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 600;
}

.faq-item[open] .faq-summary {
  border-bottom: var(--rule);
  background-color: var(--akj-light-grey);
}

.faq-item[open] .faq-indicator::before {
  content: "−";
}

.faq-item:not([open]) .faq-indicator::before {
  content: "+";
}

.faq-body {
  padding: 20px;
}

/* Footer */
.site-footer {
  background-color: var(--akj-light-grey);
  color: var(--akj-onyx);
  border-top: 2px solid var(--akj-onyx);
  padding: 56px 0 36px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  }
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: var(--rule);
  padding-bottom: 6px;
  margin-bottom: 12px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  color: var(--akj-onyx);
  text-decoration: none;
  font-weight: 500;
}

@media (hover: hover) {
  .footer-links a:hover {
    text-decoration: underline;
  }
}

.footer-bottom {
  border-top: 1px solid rgba(34, 40, 49, 0.2);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--fs-support);
}

/* Sticky Mobile Bar (<768px) */
.mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--akj-onyx);
  border-top: var(--rule);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  z-index: 400;
}

@media (min-width: 768px) {
  .mobile-sticky-bar {
    display: none;
  }
}

.mobile-sticky-action {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px;
  color: var(--akj-white);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.mobile-sticky-action:last-child {
  background-color: var(--akj-orange);
  color: var(--akj-onyx);
  border-right: none;
}

.panel-onyx :focus-visible,
.desktop-sticky-bar :focus-visible,
.mobile-sticky-bar :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

@media (min-width: 1024px) {
  .section {
    padding: 88px 0;
  }
}

.photo-slot--16-10 { aspect-ratio: 16 / 10; }

.photo-slot--1-1   { aspect-ratio: 1 / 1; }

.btn--on-dark {
  background-color: transparent;
  color: var(--akj-white);
  border-color: var(--akj-white);
}

@media (hover: hover) {
  .btn--primary:hover,
  .btn--primary:focus-visible {
    background-color: var(--akj-onyx);
    color: var(--akj-white);
    border-color: var(--akj-onyx);
    transform: translateY(-2px);
  }
  .panel-onyx .btn--primary:hover,
  .panel-onyx .btn--primary:focus-visible {
    background-color: var(--akj-white);
    color: var(--akj-onyx);
    border-color: var(--akj-white);
  }
  .btn--secondary:hover,
  .btn--secondary:focus-visible {
    background-color: var(--akj-onyx);
    color: var(--akj-white);
    transform: translateY(-2px);
  }
  .btn--on-dark:hover,
  .btn--on-dark:focus-visible {
    background-color: var(--akj-white);
    color: var(--akj-onyx);
    transform: translateY(-2px);
  }
}

@media (min-width: 768px) {
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 6; }
  .col-5 { grid-column: span 6; }
}

@media (min-width: 1024px) {
  .col-7 { grid-column: span 7; }
  .col-5 { grid-column: span 5; }
}

.cards-grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 32px;
}

/* Team Auto-Fit Grid (Supports 2 to 6 cards cleanly) */
.team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 48px;
}

@media (min-width: 640px) {
  .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* Hero Choice Paths */
.hero-paths {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 28px 0 20px;
}

@media (min-width: 640px) {
  .hero-paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.path-box {
  background-color: var(--akj-light-grey);
  border: 2px solid var(--akj-onyx);
  border-top: var(--rule);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.path-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.hero-direct-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid rgba(34, 40, 49, 0.2);
}

@media (hover: hover) {
  .card--service:hover,
  .card--article:hover {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card--service:hover,
  .card--article:hover {
    transform: none;
  }
}

/* Bullets */
.check-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-onyx .form-box {
  background-color: var(--akj-white);
  color: var(--akj-onyx);
  border-color: var(--akj-white);
  border-top: 4px solid var(--akj-orange);
}

.form-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--akj-onyx);
}

.form-input {
  width: 100%;
  min-height: var(--tap-min);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--akj-onyx);
  background-color: var(--akj-white);
  border: 2px solid var(--akj-onyx);
  border-radius: 0;
}

.form-input[aria-invalid="true"] {
  border-width: 3px;
}

.form-error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-support);
  font-weight: 600;
  color: var(--akj-onyx);
  background-color: var(--akj-light-grey);
  padding: 6px 8px;
  border-left: 4px solid var(--akj-onyx);
}

.form-success {
  display: none;
  background-color: var(--akj-white);
  color: var(--akj-onyx);
  border: 2px solid var(--akj-onyx);
  border-left: 6px solid var(--akj-orange);
  padding: 20px;
  margin-top: 16px;
}

/* Section 7: City Chips & Counter */
.chip-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.city-chip {
  background-color: var(--akj-white);
  color: var(--akj-onyx);
  border: 2px solid var(--akj-onyx);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 15px;
}

.counter-box {
  background-color: var(--akj-onyx);
  color: var(--akj-white);
  padding: 28px;
  border-bottom: 4px solid var(--akj-orange);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.counter-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--akj-orange);
}

/* Contact Details List */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* ===== AKJ build additions (01): generator markup, no-JS fallbacks, consent, draft marking ===== */

img, svg, video { max-width: 100%; height: auto; }
main { overflow-wrap: break-word; }   /* break only a word that cannot fit, never mid-word in tables or counters (DR-002 M-02) */
.prose a { overflow-wrap: anywhere; }

/* PATCH 6 + PATCH 1 without JavaScript: the mobile panel is simply open, the desktop submenu opens on hover or focus */
html:not(.js) .mobile-menu-btn { display: none; }
html:not(.js) .mobile-menu-panel { display: block; }
@media (min-width: 1024px) { html:not(.js) .mobile-menu-panel { display: none; } }
html:not(.js) .nav-item:hover .nav-submenu,
html:not(.js) .nav-item:focus-within .nav-submenu { display: block; }
.mobile-nav-group { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; font-weight: 600; }

/* draft build marking: placeholders and unconfirmed facts are easy to see */
.draft-bar { margin: 0; padding: 8px 16px; background: var(--akj-light-grey); border-bottom: 2px dashed var(--akj-onyx); font-size: var(--fs-support); }
p.ph, div.ph, li.ph { display: block; padding: 8px 12px; max-width: 68ch; }
.gated-block { border: 2px dashed var(--akj-onyx); padding: 16px; margin: 16px 0; }
.gated-label { display: inline-block; font-size: var(--fs-support); font-weight: 600; background: var(--akj-light-grey); padding: 2px 8px; margin-bottom: 8px; }
.notice { border: 2px solid var(--akj-onyx); border-left: 6px solid var(--akj-orange); background: var(--akj-white); padding: 12px 16px; max-width: 68ch; }

/* generic content the generator renders (articles, cities, legal, hub lists) */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 40px; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 8px; }
.prose blockquote { margin: 16px 0; padding-left: 16px; border-left: 4px solid var(--akj-orange); }
.prose a, .link { color: var(--akj-onyx); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.byline, .meta, .note { font-size: var(--fs-support); }
.tag { display: inline-block; background: var(--akj-onyx); color: var(--akj-white); padding: 2px 8px; font-size: var(--fs-support); font-weight: 600; }
.cards { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.cards .card h3 a { color: var(--akj-onyx); }
.city-list { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.city-list li { display: inline-flex; }
.city-list li > a, .city-list li > span { display: inline-flex; align-items: center; min-height: var(--tap-min); background: var(--akj-white); color: var(--akj-onyx); border: 2px solid var(--akj-onyx); padding: 8px 16px; font-weight: 600; font-size: 15px; }
.city-list li > a { text-decoration: underline; text-underline-offset: 4px; }
.nap { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.nap dt { font-weight: 600; }
.nap dd { margin: 0; }
.hours { list-style: none; margin: 0; padding: 0; }
dl.faq dt { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin-top: 20px; }
dl.faq dd { margin: 6px 0 0; }
.hero { margin: 24px 0; }
.hero img { width: 100%; height: auto; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter button { min-height: var(--tap-min); padding: 0 16px; background: var(--akj-white); color: var(--akj-onyx); border: 2px solid var(--akj-onyx); font: inherit; font-weight: 600; cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--akj-onyx); color: var(--akj-white); }
.draft-only { border: 2px dashed var(--akj-onyx); padding: 0 16px; margin: 24px 0; }
.related { margin-top: 40px; }
[hidden] { display: none !important; }

/* forms (src/form-render.js + js/forms.js): concept look on the generator's markup */
.lead-form .form-intro { font-size: var(--fs-support); }
.lead-form .req { font-weight: 600; }
.lead-form .field-error { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-support); font-weight: 600; color: var(--akj-onyx); background: var(--akj-white); padding: 6px 8px; border: 1px solid var(--akj-onyx); border-left: 4px solid var(--akj-onyx); }
.lead-form .form-status:empty { display: none; }
.lead-form .form-status { margin: 20px 0; background: var(--akj-white); color: var(--akj-onyx); border: 2px solid var(--akj-onyx); border-left: 6px solid var(--akj-orange); padding: 20px; }
.lead-form .form-status h3 { margin-bottom: 8px; }
.lead-form .form-fine { font-size: var(--fs-support); margin-top: 12px; }
.lead-form .form-fine a, .lead-form .file-drop a { display: inline-block; padding: 10px 2px; color: var(--akj-onyx); font-weight: 600; } /* PATCH 4 */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.photo-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.photo-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--akj-white); border: 2px solid var(--akj-onyx); padding: 10px 12px; min-height: var(--tap-min); font-size: var(--fs-support); font-weight: 600; word-break: break-all; }
.photo-list li.photo-note { border-style: dashed; font-weight: 400; }
.photo-list progress { width: 8rem; height: 8px; accent-color: var(--akj-onyx); }
.link-btn { min-height: var(--tap-min); padding: 0 8px; background: none; border: 0; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.is-sent .form-group, .is-sent .form-fieldset, .is-sent .form-intro, .is-sent .hp, .is-sent [data-submit], .is-sent .form-fine, .is-sent .file-drop > p, .is-sent .file-drop .form-group { display: none; }

/* consent banner (shown by js/consent.js only) */
.consent { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 450; max-width: 40rem; margin: 0 auto; padding: 16px 20px; background: var(--akj-white); color: var(--akj-onyx); border: 2px solid var(--akj-onyx); border-top: 4px solid var(--akj-orange); }
.consent h2 { font-size: 1.25rem; margin-bottom: 8px; }
.consent-opt { display: flex; align-items: center; gap: 10px; min-height: var(--tap-min); margin: 0; }
.consent-opt input { width: 22px; height: 22px; flex: none; accent-color: var(--akj-onyx); }
.consent-opt label { font-weight: 500; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
@media (min-width: 768px) { .consent { bottom: 16px; } }
.site-footer .link-btn { padding: 0; min-height: var(--tap-min); font-weight: 500; text-decoration: none; }

/* 404 and thank-you */
.page-simple { padding: 56px 0 88px; }

@media print {
  .mobile-sticky-bar, .desktop-sticky-bar, .consent, .mobile-menu-btn { display: none !important; }
}

/* links on dark panels stay white with an orange-on-hover underline (orange text only on Onyx) */
.panel-onyx a:not(.btn) { color: var(--akj-white); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.panel-onyx .ph { color: var(--akj-onyx); }
.counter-label { font-weight: 600; }
.reviews-block { border-top: var(--rule); padding-top: 40px; margin-top: 40px; }
.link { color: var(--akj-onyx); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* header fit between 1024 and 1200 px: labels never wrap; the Call link joins the CTA from 1200 px */
.nav-link, .nav-submenu-btn { white-space: nowrap; }
.header-actions .text-link { display: none; }
@media (min-width: 1200px) { .header-actions .text-link { display: inline-flex; } }

/* reduced motion: no animation or transition anywhere (ui.js also skips GSAP under this setting) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.draft-bar p { margin: 0; max-width: none; }

/* gated blocks (draft review only): readable on light and dark panels */
.gated-label { color: var(--akj-onyx); }
.panel-onyx .gated-block, .card--crosslink.gated-block { border-color: var(--akj-white); }
/* prose details 09's drafts use */
.prose h3 { margin-top: 28px; }
.prose table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: var(--fs-support); }
.prose th, .prose td { border: 1px solid var(--akj-onyx); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--akj-light-grey); }
/* simple pages (404, thank-you): link lists are full-size targets */
.page-simple .link-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.page-simple .link-list a { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 12px; border: 2px solid var(--akj-onyx); color: var(--akj-onyx); font-weight: 600; text-decoration: none; }

/* R-011 N-1: the privacy link beside the forms is a full 44 px target */
.lead-form .form-fine a, .lead-form .file-drop a { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 2px; }
/* R-011 N-2: a larger mobile mark so GROUP stays legible (brand minimum-size exception: mark + live name) */
.lockup-mobile .mark-img { width: 100px; }

/* ---- D-042 premium redesign, "Second Life" (03 REDESIGN_v2: DIRECTION, MOTION_SPEC, TIERS, BANNER) ------
   Content is in the HTML at its end state; js/ui.js sets start states only when <html data-motion> allows.
   Orange is text only on Onyx (.panel-onyx / .on-panel), a fill or a rule elsewhere (brand v1.1). */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* expo.out: arrivals */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* power3.inOut: wipes, openings */
  --t-xs: 150ms; --t-sm: 240ms; --t-md: 480ms; --t-lg: 800ms;
}

/* New-management banner (BANNER.md): in the flow above the header; dismissed state applied before paint */
.mgmt { background: var(--akj-onyx); color: var(--akj-white); font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.mgmt-inner { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.mgmt-dot { flex: 0 0 auto; width: 18px; height: 2px; background: var(--akj-orange); }
.mgmt p { margin: 0; flex: 1 1 auto; padding: 0.4rem 0; }
.mgmt a { color: var(--akj-white); text-decoration: underline; text-underline-offset: 3px; margin-left: 0.35rem; }
.mgmt-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -12px; border: 0; background: transparent; color: var(--akj-white); cursor: pointer; }
.mgmt-close .icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.mgmt a:focus-visible, .mgmt-close:focus-visible { outline: 3px solid var(--akj-white); outline-offset: 2px; }
html.mgmt-off .mgmt, .mgmt[hidden] { display: none; }
/* the close button's space is reserved from first paint (no shift); without JavaScript it cannot work */
html:not(.js) .mgmt-close { visibility: hidden; }

/* Hero (M2-M8): Onyx blueprint, the line-art vehicle; text first on phones so the h1 stays the LCP element */
.hero-v2 { position: relative; overflow: hidden; color: var(--akj-white); }
.hero-v2::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 35%, #000 80%, transparent); }
.hero-v2-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: min(720px, calc(100svh - 130px)); padding-top: 56px; padding-bottom: 72px; }
.panel-onyx .hero-eyebrow { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akj-orange); padding-bottom: 10px;
  background-color: var(--akj-onyx); background-image: linear-gradient(var(--akj-orange), var(--akj-orange)); background-position: left bottom; background-size: 100% 2px; background-repeat: no-repeat; }  /* the rule is a background so it draws without touching the text; solid Onyx under orange text (no grid line) */
.hero-v2 h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.02; letter-spacing: -0.01em; margin: 22px 0; }
.hero-v2 h1 .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }  /* added by js/ui.js only, on intro visits; the negative margin keeps the h1 height, so the split moves nothing */
.hero-v2 h1 .line > span { display: inline-block; }
.hero-lede { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); max-width: 34em; margin: 0 0 32px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-v2 .hero-direct-contacts { border-top-color: rgba(255, 255, 255, 0.25); margin-top: 24px; }
.hero-v2 .hero-direct-contacts a { color: var(--akj-white); }
.hero-chip { display: flex; align-items: baseline; gap: 10px; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.25); font-size: 1rem; }
.panel-onyx .hero-chip-num { font-family: var(--font-display); font-weight: 600; font-size: 2.75rem; line-height: 1; color: var(--akj-orange); font-variant-numeric: tabular-nums; display: inline-block; min-width: 1ch; }
.hero-art { position: relative; z-index: 1; align-self: end; }  /* anchored to the row, not centred on the copy: a font swap in the copy never moves it */
.car { display: block; width: 100%; height: auto; overflow: visible; }
.car .ln { fill: none; stroke: var(--akj-white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.car .acc { fill: none; stroke: var(--akj-orange); stroke-width: 2.2; stroke-linecap: round; }
.car .car-ticks { stroke: var(--akj-orange); stroke-width: 1.6; opacity: 0; }
.car .car-engine { opacity: 0; }
.hero-slash { position: absolute; right: -6%; bottom: -1px; width: 46%; height: 10px; background: var(--akj-orange); transform: skewX(-10deg); transform-origin: right; }
@media (max-width: 860px) {
  .hero-v2-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 36px; padding-bottom: 56px; gap: 18px; }
  .hero-art { max-width: 440px; margin-top: 8px; }
  .panel-onyx .hero-chip-num { font-size: 2.25rem; }
}

/* Buttons (M13): a white slash sweeps across on hover and focus when motion is allowed; colour only otherwise */
.btn--ghost { background: transparent; color: var(--akj-white); border-color: var(--akj-white); }
.btn-arrow { transition: transform var(--t-sm) var(--ease-out); }
/* every button keeps its own pseudo-elements inside it (DR-002 M-01; 03 PASS A3) */
.btn { position: relative; isolation: isolate; overflow: hidden; }
/* the sweep is opt-in: hero and final-CTA primaries only (.btn--sweep) */
html[data-motion="phone"] .btn--sweep::before, html[data-motion="desktop"] .btn--sweep::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--akj-white); transform: translateX(-120%) skewX(-10deg); transition: transform var(--t-md) var(--ease-out); }
@media (hover: hover) {
  html[data-motion] .btn--sweep:hover, html[data-motion] .btn--sweep:focus-visible { background-color: var(--color-cta-bg); color: var(--akj-onyx); transform: none; }
  html[data-motion="phone"] .btn--sweep:hover::before, html[data-motion="desktop"] .btn--sweep:hover::before { transform: translateX(0) skewX(-10deg) scaleX(1.2); }
  .btn:hover .btn-arrow { transform: translateX(4px); }
  .btn--ghost:hover { color: var(--akj-onyx); background: var(--akj-white); }
}
html[data-motion="phone"] .btn--sweep:focus-visible::before, html[data-motion="desktop"] .btn--sweep:focus-visible::before { transform: translateX(0) skewX(-10deg) scaleX(1.2); }
.btn--ghost:focus-visible { color: var(--akj-onyx); outline: 3px solid var(--akj-white); outline-offset: 2px; }
.btn:focus-visible .btn-arrow { transform: translateX(4px); }

/* Steps (M10): the rail draws, the numbers pop, the text rises */
.steps-v2-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.steps-v2-rail { position: absolute; left: 28px; right: 28px; top: 28px; height: 2px; background: rgba(34, 40, 49, 0.18); }
.steps-v2-rail i { position: absolute; inset: 0; background: var(--akj-orange); transform-origin: left; }
.steps-v2-step { position: relative; }
.steps-v2-num { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; background: var(--akj-onyx); color: var(--akj-white); font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1; }
.steps-v2-step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; margin: 22px 0 8px; }
.steps-v2-step p { margin: 0; max-width: 24em; }
@media (max-width: 860px) {
  .steps-v2-track { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .steps-v2-rail { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; }
  .steps-v2-rail i { transform-origin: top; }
  .steps-v2-step { padding-left: 80px; }
  .steps-v2-num { position: absolute; left: 0; top: 0; }
  .steps-v2-step h3 { margin-top: 12px; }
}

/* Coverage band (M11): the one confirmed counter, tabular figures in a fixed box */
.band-v2 { position: relative; overflow: hidden; }
.band-v2-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.band-v2-count { margin: 0; display: grid; justify-items: start; }
.band-v2 .counter-number { font-family: var(--font-display); font-weight: 600; font-size: clamp(6rem, 12vw, 10.5rem); line-height: 0.9; color: var(--akj-orange); font-variant-numeric: tabular-nums; min-width: 1ch; }
.band-v2 .counter-label { font-weight: 600; margin-top: 6px; }
@media (max-width: 860px) { .band-v2-inner { grid-template-columns: minmax(0, 1fr); } }

/* Desktop-tier textures (M9; Higgsfield, abstract only): phones and reduced motion never request them.
   Masked away from the text column and kept faint, so text sits on near-pure Onyx (contrast measured by 03). */
.hero-tex { position: absolute; inset: -10% 0; pointer-events: none; background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 70%); mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 70%); }
html[data-motion="desktop"] .hero-tex { background-image: url("/assets/textures/steel-sparks-b-960.webp?v=53"); opacity: 0.16; }
@media (min-width: 1281px) {
  html[data-motion="desktop"] .hero-tex { background-image: url("/assets/textures/steel-sparks-b-1920.webp?v=53"); }
}

/* Welcome intro (03 INTRO_STORYBOARD v1.2, D-043; DR-001 #2). js/consent.js marks <html data-intro="play"> before
   first paint; this cover is the same picture as frame 0, so js/ui.js mounting the overlay is seamless, and it
   opens by itself at 1.2 s if no overlay follows. The real page paints underneath (the hero h1 is the LCP element). */
html[data-intro="play"] body::before { content: ""; position: fixed; inset: 0; z-index: 999; background-color: var(--akj-onyx); background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 48px 48px; animation: akj-cover-fail 0s linear 1.2s forwards; }
@keyframes akj-cover-fail { to { visibility: hidden; } }
/* the stage is a mark-sized crop of the clip (720 x 336): mark <= 280 px desktop (brand minimum 220), <= 56 vw phone, below the h1 painted area */
.intro-v2 { position: fixed; inset: 0; z-index: 1000; --mark: min(280px, 56vw); }  /* still about 58k px² at 1440: below the 64 px h1 (about 81k px²) */
.intro-v2-half { position: absolute; inset: 0; background: var(--akj-onyx); }
.intro-v2-half::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 48px 48px; }
.intro-v2-a { clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%); }
.intro-v2-b { clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%); }
.intro-v2-seam { position: absolute; top: 0; left: 58%; width: 5px; height: 100%; margin-left: -2.5px; background: var(--akj-orange); transform-origin: 50% 0; transform: scaleY(0); }
.intro-v2-stage { position: absolute; left: 50%; top: 50%; width: calc(var(--mark) * 1.2113); aspect-ratio: 720 / 336; transform: translate(-50%, -58%); }
.intro-v2-stage video { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
.intro-v2-still { position: absolute; left: -0.926%; top: -3.455%; width: 101.85%; height: auto; opacity: 0; display: block; }  /* the header's reversed WebP on the clip's exact geometry */
.intro-v2-lock { position: absolute; left: 8.71%; width: 82.56%; top: 89.64%; }
.intro-v2-rule { height: 2px; background: var(--akj-orange); transform: scaleX(0); }
.intro-v2-desc { overflow: hidden; margin-top: 8px; text-align: center; white-space: nowrap; }
.intro-v2-desc span { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: max(14px, calc(var(--mark) * 0.058)); line-height: 1.1; letter-spacing: 0.2em; text-transform: uppercase; color: var(--akj-white); transform: translateY(110%); }
.intro-v2-skip { position: absolute; right: clamp(20px, 5vw, 90px); bottom: max(24px, env(safe-area-inset-bottom)); min-height: 44px; padding: 0 18px; border: 2px solid var(--akj-white); background: transparent; color: var(--akj-white); font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.intro-v2-skip:focus-visible { outline: 3px solid var(--akj-white); outline-offset: 2px; }
@media print { .intro-v2, html[data-intro="play"] body::before { display: none; } }

/* Video blocks: the poster image is the content; the video sits on top once it plays */
.video-block { position: relative; overflow: hidden; background: var(--akj-onyx); }
.video-block img, .video-block video { display: block; width: 100%; height: auto; }
.video-block video { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 100%); transition: clip-path 0.5s ease; }
.video-block.is-playing video { clip-path: inset(0); }
.video-toggle { position: absolute; right: 0.75rem; bottom: 0.75rem; min-height: 44px; padding: 0.5rem 0.9rem; border: 2px solid var(--akj-white); background: rgba(34, 40, 49, 0.85); color: var(--akj-white); font: inherit; font-weight: 600; cursor: pointer; }
.video-toggle:focus-visible { outline: 3px solid var(--akj-orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .video-block video { transition: none; } }

/* ---- D-043: Onyx header and footer with the reversed mark, no plate (03 H-059, REDESIGN_v2 v1.2) ----------
   The reversed WebP carries ~10% transparent margins, trimmed with negative margins so the clear space is the
   brand's 10% of the visible mark. Orange stays a rule or a fill; text here is white. */
.site-header { background-color: var(--akj-onyx); color: var(--akj-white); border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 2px solid var(--akj-orange); }
.header-inner { --logo-w: 132px; padding-top: calc(var(--logo-w) * 0.081); padding-bottom: calc(var(--logo-w) * 0.081); }
@media (min-width: 768px) { .header-inner { --logo-w: 272px; } }
.brand-link { color: var(--akj-white); }
.lockup-desktop, .lockup-mobile, .footer-lockup { background: none; padding: 0; }
.lockup-desktop { width: var(--logo-w); flex-direction: column; align-items: center; }
@media (min-width: 768px) { .lockup-desktop { display: flex; } }
.lockup-desktop .mark-img, .lockup-mobile .mark-img, .footer-lockup .mark-img { display: block; width: var(--logo-w); height: auto; margin: calc(var(--logo-w) * -0.085) 0 calc(var(--logo-w) * -0.1); }
.lockup-desktop .lockup-descriptor, .footer-lockup .lockup-descriptor { align-self: stretch; margin: 0 8.7%; padding-top: 6px; border-top: 2px solid var(--akj-orange); font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; color: var(--akj-white); white-space: nowrap; }
.lockup-mobile { gap: 12px; }
.lockup-mobile .mark-img { width: var(--logo-w); flex-shrink: 0; }
.lockup-mobile .mobile-live-name { color: var(--akj-white); }
.nav-link, .nav-submenu-btn { color: var(--akj-white); position: relative; }
.nav-link::after, .nav-submenu-btn::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--akj-orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-sm) var(--ease-out); }
@media (hover: hover) {
  .nav-link:hover, .nav-submenu-btn:hover { background-color: rgba(255, 255, 255, 0.08); }
  .nav-link:hover::after, .nav-submenu-btn:hover::after { transform: scaleX(1); }
}
.nav-link:focus-visible::after, .nav-submenu-btn:focus-visible::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { font-weight: 600; }
.header-actions .text-link { color: var(--akj-white); }
.header-actions .btn { white-space: nowrap; min-width: 160px; justify-content: center; }   /* DR-001 #7: the CTA never wraps */
.mobile-menu-btn { background-color: transparent; color: var(--akj-white); border-color: var(--akj-white); }
.header-inner :focus-visible { outline-color: var(--color-focus-on-dark); }
.nav-submenu :focus-visible { outline-color: var(--akj-onyx); }  /* the submenu and the phone panel stay white surfaces */
.site-header .ph, .site-footer .ph, .desktop-sticky-bar .ph { color: var(--akj-onyx); }
.desktop-sticky-brand { gap: 12px; --logo-w: 112px; }
.desktop-sticky-brand .mark-img { width: var(--logo-w); height: auto; margin: calc(var(--logo-w) * -0.085) 0 calc(var(--logo-w) * -0.1); }

.site-footer { background-color: var(--akj-onyx); color: var(--akj-white); border-top: 2px solid var(--akj-orange); }
.footer-brand { display: inline-block; text-decoration: none; margin-bottom: 20px; }
.footer-lockup { --logo-w: 272px; display: flex; flex-direction: column; align-items: center; width: var(--logo-w); max-width: 100%; }  /* block-level: one box, no border fragments */
@media (max-width: 400px) { .footer-lockup { --logo-w: 220px; } }
.footer-heading { color: var(--akj-white); border-bottom-color: var(--akj-orange); }
.footer-links a, .site-footer .link-btn, .site-footer a:not(.btn) { color: var(--akj-white); }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.2); }
.site-footer :focus-visible { outline-color: var(--color-focus-on-dark); }

/* orange text sits on solid Onyx, never on a grid line or texture pixel (DR-001 §4 textures) */
.hero-v2 .accent-word, .hero-v2 .hero-chip-num { background-color: var(--akj-onyx); }

/* DR-001 #7 visible defects */
a { color: inherit; }                                         /* no browser-default blue anywhere */
.form-group.form-check { flex-direction: row; align-items: flex-start; }   /* the consent box sits beside its label */
.file-input { display: block; width: 100%; max-width: 100%; min-height: var(--tap-min); padding: 8px 0; font: inherit; color: var(--akj-onyx); }
.file-input::file-selector-button { min-height: var(--tap-min); margin-right: 12px; padding: 0 18px; border: 2px solid var(--akj-onyx); background: var(--akj-white); color: var(--akj-onyx); font: inherit; font-weight: 600; cursor: pointer; }
.file-input:focus-visible { outline: 3px solid var(--akj-onyx); outline-offset: 2px; }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }   /* a single card keeps its card width */

/* ---- REDESIGN_v2 v1.2 (03 H-061-03, SECTIONS.md, FORMS.md; DR-001 #8, #9): type scale, the four section types,
   the brand icon set and the form layout. Cards carry a 2 px orange top rule and no outline; Onyx outlines stay
   only on inputs, secondary buttons and focus. Orange text only on Onyx. ------------------------------------- */
h2 { font-size: clamp(1.625rem, 2.3vw, 2rem); line-height: 1.12; }                 /* 26 / 32 px */
h3 { font-size: clamp(1.25rem, 1.6vw, 1.375rem); line-height: 1.2; }               /* 20 / 22 px */
.statement { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.01em; }  /* 32 / 48 px, at most two per page */
.eyebrow { font-size: 14px; letter-spacing: 0.12em; padding-bottom: 10px; border-bottom: 0;
  background-image: linear-gradient(var(--akj-orange), var(--akj-orange)); background-position: left bottom; background-size: 100% 2px; background-repeat: no-repeat; }
.panel-onyx .eyebrow { background-color: var(--akj-onyx); }

/* brand icons: symbols do not inherit the sprite's attributes */
.icon--brand { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* photo slots: an Onyx field with white line-art until AKJ's photos arrive (fixed ratios) */
.photo-slot--3-2 { aspect-ratio: 3 / 2; }
.ways-tile .photo-slot, .photo-slot:has(.slot-art) { background-color: var(--akj-onyx); color: var(--akj-white); border: 0; }
.photo-slot .slot-art { width: 58%; height: auto; fill: none; stroke: var(--akj-white); stroke-width: 3; stroke-linejoin: round; }
.ways-tile--scrap .photo-slot { background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 32px 32px; }

/* (b) edge-bleed split: Two ways to sell */
.ways-v2 { padding: clamp(72px, 9vw, 128px) 0; }
.ways-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.ways-tile { display: flex; flex-direction: column; padding: 0 0 36px; border-top: 2px solid var(--akj-orange); border-bottom: 0; background: var(--akj-light-grey); color: var(--akj-onyx); }
.ways-tile.panel-onyx { background: var(--akj-onyx); color: var(--akj-white); }
.ways-tile > :not(.photo-slot) { margin-left: 36px; margin-right: 36px; }
.ways-tile h3 { font-size: clamp(1.5rem, 2vw, 1.75rem); margin-top: 28px; margin-bottom: 6px; }
.ways-support { margin-bottom: 18px; }
.ways-facts { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.ways-facts li { display: flex; align-items: center; gap: 12px; }
.ways-tile .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 860px) { .ways-tiles { grid-template-columns: minmax(0, 1fr); } .ways-tile > :not(.photo-slot) { margin-left: 24px; margin-right: 24px; } }

/* (d) dense info grid: the coverage band, static number, cities on 20% white rules */
.band-v2 { padding: clamp(56px, 6vw, 72px) 0 calc(clamp(56px, 6vw, 72px) + 16px); }
.band-v2-inner { align-items: end; }
.cities { list-style: none; margin: 8px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-width: 720px; }
.cities li { padding: 14px 16px 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.2); font-weight: 600; font-size: 17px; }
@media (max-width: 860px) { .band-v2-inner { grid-template-columns: minmax(0, 1fr); } }

/* (c) process track: 96 px Onyx tiles, 2 px orange border, 64 px orange numerals; a 48 x 2 px rule on each card */
.steps-v2 { padding: clamp(72px, 9vw, 128px) 0; }
.steps-v2-rail { left: 48px; right: 48px; top: 47px; }
.steps-v2-num { width: 96px; height: 96px; border: 2px solid var(--akj-orange); font-size: 4rem; }
.steps-v2-track .steps-v2-num { color: var(--akj-orange); background-color: var(--akj-onyx); }   /* orange numeral on its own Onyx tile */
.steps-v2-card { margin-top: 24px; padding-top: 16px; background-image: linear-gradient(var(--akj-orange), var(--akj-orange)); background-position: left top; background-size: 48px 2px; background-repeat: no-repeat; }
.steps-v2-card h3 { margin-top: 0; }
@media (max-width: 860px) {
  .steps-v2-track { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .steps-v2-rail { left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px; height: auto; }
  .steps-v2-rail i { transform-origin: top; }
  .steps-v2-step { padding-left: 88px; min-height: 64px; }
  .steps-v2-num { position: absolute; left: 0; top: 0; width: 64px; height: 64px; font-size: 2.5rem; }
  .steps-v2-card { margin-top: 0; padding-top: 14px; }
}

/* (a) Onyx stage: the final CTA statement and the page's second slash */
.final-v2 { padding: clamp(72px, 9vw, 128px) 0; overflow: hidden; }
.final-v2 .statement { margin: 0 0 20px; max-width: 18ch; }
.final-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn--lg { min-height: 56px; padding: 12px 28px; }
.final-slash { width: 38%; }

/* people: never stretch one card */
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); } }

/* compact step track (40 px tiles): quote rail, Sell band */
.mini-track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 20px; }
.mini-track li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.mini-track .mini-track-num { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; background-color: var(--akj-onyx); color: var(--akj-orange); border: 2px solid var(--akj-orange); font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1; }
.track-band { padding: 16px 20px; margin-bottom: 0; border-top: 2px solid var(--akj-orange); border-bottom: 0; }
.track-band .mini-track li { color: var(--akj-white); }

/* Get a quote: Onyx band, sticky rail + form card on Light Grey */
.quote-hero { padding: clamp(32px, 4vw, 56px) 0; }
.quote-hero h1 { margin-bottom: 8px; }
.quote-hero .hero-lede { margin: 0; }
.quote-band { background: var(--akj-light-grey); padding: clamp(24px, 4vw, 64px) 0; }
.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.quote-rail { display: grid; gap: 28px; align-content: start; }
.quote-rail .mini-track { flex-direction: column; }
.rail-title { font-size: 1.25rem; margin-bottom: 12px; }
.ready-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ready-list li { display: flex; align-items: center; gap: 12px; }
.rail-note { font-size: var(--fs-support); margin: 0; }
.quote-card .lead-form.form-box { background: var(--akj-white); border: 0; border-top: 2px solid var(--akj-orange); padding: 20px; }
.quote-card .lead-form > h2 { font-size: 1.375rem; }   /* H-088-03 §6: shown, as on Sell (S-17) */
.ready-details { margin-top: 16px; background: var(--akj-white); padding: 0 20px; border-top: 2px solid var(--akj-orange); }
.ready-details summary { min-height: var(--tap-min); display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.ready-details .ready-list { padding-bottom: 16px; }
/* H-088-03 v47: on Sell/Scrap phones "What to have ready" is a closed disclosure above the form (CSS swap, no JS
   flip, so nothing moves after paint); 768 px and up keep the open list */
.ready-details--hero { display: none; color: var(--akj-onyx); margin: 16px 0 0; }
@media (max-width: 767px) { .form-hero-copy .hero-ready { display: none; } .ready-details--hero { display: block; } }
@media (max-width: 1023px) { .quote-ready, .rail-note { display: none; } .quote-rail .mini-track { flex-direction: row; } .quote-rail .mini-track-num { width: 32px; height: 32px; font-size: 1.125rem; } }
@media (min-width: 1024px) {
  .quote-layout { grid-template-columns: 360px minmax(0, 1fr); gap: 40px; align-items: start; }
  .quote-rail { position: sticky; top: 96px; }
  .quote-card .lead-form.form-box { padding: 40px; }
  .ready-details { display: none; }
}

/* form controls (FORMS.md): 56 px inputs, Kanit legends over an orange rule, consent grid, Add photos button */
.form-section { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.form-legend { display: block; width: 100%; margin-bottom: 16px; padding: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  background-image: linear-gradient(var(--akj-orange), var(--akj-orange)); background-position: left bottom; background-size: 48px 2px; background-repeat: no-repeat; }
.form-input, .form-select { min-height: 56px; font-size: 1.125rem; }
.form-textarea { font-size: 1.125rem; }
.form-label { font-size: 1rem; }
.form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible, .form-checkbox:focus-visible { outline: 3px solid var(--akj-onyx); outline-offset: 2px; }
.form-group.form-check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.form-checkbox { width: 24px; height: 24px; margin: 0; }
.lead-form .form-fine a, .lead-form .file-drop a, .form-helper a { color: var(--akj-onyx); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.photo-add .file-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }   /* still focusable and operable */
.photo-add-btn { min-height: 48px; align-self: flex-start; cursor: pointer; }
.photo-add .file-input:focus-visible + .photo-add-btn { outline: 3px solid var(--akj-onyx); outline-offset: 2px; }
.lead-form [data-submit] { min-height: 56px; }
@media (max-width: 860px) { .lead-form [data-submit] { width: 100%; justify-content: center; } }
/* phones: the rail is one line of three 32 px tiles joined by a rule; the step names stay for screen readers */
@media (max-width: 1023px) {
  .quote-rail { gap: 12px; }
  .quote-rail .mini-track { flex-wrap: nowrap; gap: 0; align-items: center; }
  .quote-rail .mini-track li { flex: 0 0 auto; gap: 0; }
  .quote-rail .mini-track li + li::before { content: ""; width: 28px; height: 2px; background: var(--akj-onyx); }
  .quote-rail .mini-track li > span:not(.mini-track-num) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .quote-hero { padding: 24px 0; }
  .quote-rail .hero-direct-contacts { display: none; }   /* phones: the call bar already carries Call and WhatsApp */
}
.card--team { border: 0; border-top: 2px solid var(--akj-orange); background: var(--akj-light-grey); }   /* cards: orange top rule, no outline */

/* ---- Inner pages in Second Life (03 INNER_PAGES.md v1.0): compact Onyx hero with the breadcrumb in the band,
   section types instead of stripes, cards with a top rule and no outline, one final CTA. ---------------------- */
.page-hero { padding: 56px 0 72px; border-bottom: 0; }
.page-hero h1 { margin: 0 0 12px; font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.02; letter-spacing: -0.015em; }
.page-hero .hero-lede { margin: 0; max-width: 52ch; font-size: clamp(1.125rem, 1.4vw, 1.25rem); }
.page-hero .eyebrow { margin-bottom: 14px; }
@media (max-width: 860px) { .page-hero { padding: 24px 0; } .page-hero h1 { font-size: 2rem; } }
.breadcrumb-inband { margin-bottom: 18px; font-size: 14px; }
.breadcrumb-inband .breadcrumb-list { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.breadcrumb-inband .breadcrumb-list li { display: inline-flex; align-items: center; }
.breadcrumb-inband a { color: var(--akj-white); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: var(--tap-min); }
.breadcrumb-inband strong { font-weight: 600; }
.breadcrumb-inband .breadcrumb-sep { margin: 0 8px; }
.cities-more { margin: 0 0 24px; font-weight: 600; }
.cities a { color: var(--akj-white); text-decoration: none; display: inline-flex; gap: 6px; }
.cities a:hover, .cities a:focus-visible { text-decoration: underline; }
.slot-caption { position: absolute; left: 16px; bottom: 12px; font-size: 14px; color: var(--akj-white); }

/* a section of type (d) on White or Light Grey: no stripes, no rule between sections */
.sec { padding: clamp(56px, 6vw, 72px) 0; }
.sec--grey { background: var(--akj-light-grey); }
.sec h2 { margin-bottom: 20px; }
.icon-checklist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; max-width: 68ch; }
.icon-checklist li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; }
.icon-checklist .icon--brand { margin-top: 2px; }
.checklist-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
@media (max-width: 860px) { .checklist-cols { grid-template-columns: minmax(0, 1fr); } }

/* cards: Light Grey on White with a 2 px orange top rule, no outline */
.cards-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.card-v2 { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--akj-light-grey); border-top: 2px solid var(--akj-orange); }
.sec--grey .card-v2 { background: var(--akj-white); }
.card-v2 h3 { margin: 0; }
.card-v2 p { margin: 0; }
.card-v2 .photo-slot { margin: -24px -24px 8px; width: calc(100% + 48px); }
.card-label { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; }

/* About: team cards without photos (an initial tile, name, role) */
.team-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); gap: 24px; justify-content: start; margin: 0; padding: 0; list-style: none; }
.team-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 24px; background: var(--akj-light-grey); border-top: 2px solid var(--akj-orange); }
.team-initial { display: grid; place-items: center; width: 64px; height: 64px; font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; line-height: 1; }
.team-v2 .team-initial { background-color: var(--akj-onyx); color: var(--akj-orange); }   /* orange initial on its own Onyx tile */
.team-name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; }
.team-role { margin: 0; }
.team-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
@media (max-width: 860px) { .team-layout { grid-template-columns: minmax(0, 1fr); } }

/* Contact: Onyx info panel beside the message form card */
.contact-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }
.info-panel { padding: 32px; border-top: 2px solid var(--akj-orange); border-bottom: 0; }
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.info-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; }
.info-list .info-label { display: block; font-weight: 600; margin-bottom: 2px; }
.info-list p { margin: 0; }
.contact-card .lead-form.form-box { background: var(--akj-white); border: 0; border-top: 2px solid var(--akj-orange); padding: 32px; }

/* FAQs: grouped accordion with a sticky topic index on desktop */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; } .faq-index { position: sticky; top: 96px; align-self: start; } }
.faq-index ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.faq-index a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--akj-onyx); font-weight: 600; }
.faq-topic { margin: 0 0 40px; }
.faq-topic-label { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 12px;
  background-image: linear-gradient(var(--akj-orange), var(--akj-orange)); background-position: left bottom; background-size: 48px 2px; background-repeat: no-repeat; padding-bottom: 8px; }
.faq-summary .faq-indicator::before { transition: transform 200ms var(--ease-out); }

/* guides: featured split + card grid */
.featured-guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; background: var(--akj-light-grey); border-top: 2px solid var(--akj-orange); margin-bottom: 40px; }
.featured-guide .featured-body { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 860px) { .featured-guide { grid-template-columns: minmax(0, 1fr); } }

/* article: 68ch body, meta line, numbered H2 tiles, callouts, optional "On this page" rail */
.article-layout { display: grid; grid-template-columns: minmax(0, 68ch); gap: 48px; justify-content: start; }
@media (min-width: 1200px) { .article-layout { grid-template-columns: minmax(0, 68ch) 280px; } .toc-rail { position: sticky; top: 96px; align-self: start; } }
.article-meta { margin: 12px 0 0; font-size: var(--fs-support); }
.toc-rail h2 { font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; }
.toc-rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc-rail a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--akj-onyx); }
.prose blockquote, .callout { margin: 24px 0; padding: 20px 24px; background: var(--akj-light-grey); border-top: 2px solid var(--akj-orange); border-left: 0; }

/* legal: compact hero, 68ch body, sticky contents on desktop, a plain closing link */
.legal-layout { display: grid; grid-template-columns: minmax(0, 68ch); gap: 48px; justify-content: start; }
@media (min-width: 1200px) { .legal-layout { grid-template-columns: 240px minmax(0, 68ch); } .legal-toc { position: sticky; top: 96px; align-self: start; } }
@media (max-width: 1199px) { .legal-toc { display: none; } }
.legal-close { margin-top: 40px; }

/* thank-you: step 1 marked done with a visible label, not colour alone */
.steps-v2-step.is-done .steps-v2-num { border-width: 4px; }
.done-label { display: inline-block; margin-bottom: 6px; font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.thanks-icon { width: 32px; height: 32px; }
.hero-with-icon { display: flex; align-items: center; gap: 16px; }

/* 404: the line-art vehicle with its front wheel set apart (static) */
.nf-art { max-width: 520px; margin: 24px 0 8px; }
.nf-art svg { width: 100%; height: auto; display: block; }
.nf-art .ln { fill: none; stroke: var(--akj-white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nf-art .acc { fill: none; stroke: var(--akj-orange); stroke-width: 2.2; stroke-linecap: round; }
.nf-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
/* (a) hero with the quote form beside the H1 (Sell, Scrap; FORMS.md) */
.page-hero--form { padding-bottom: clamp(32px, 4vw, 64px); }
.form-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 1024px) { .form-hero { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; } }
.form-hero-copy h1 { margin-bottom: 12px; }
.form-hero-card { background: var(--akj-white); color: var(--akj-onyx); }
.form-hero-card .track-band { margin: 0; }
.form-hero-card .lead-form.form-box { background: var(--akj-white); border: 0; border-top: 0; padding: 24px; }
@media (min-width: 768px) { .form-hero-card .lead-form.form-box { padding: 32px; } }
.form-hero-card .lead-form > h2 { font-size: 1.375rem; }
.steps-v2-track--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .steps-v2-track--4 { grid-template-columns: minmax(0, 1fr); } }
.ways-intro { max-width: 68ch; margin-bottom: 24px; }
.faq-list--plain .faq-item { border-left: 0; border-right: 0; }
.photo-slot--4-5 { aspect-ratio: 4 / 5; }
.page-hero .photo-slot { max-width: 420px; justify-self: end; }
.gated-page-note { margin-top: 16px; margin-bottom: 0; }
.page-hero--article h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; }
.page-hero--article .article-meta { color: var(--akj-white); max-width: 68ch; }
.related { margin-top: 48px; }
.link-cols { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.link-cols a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.link-cols--stack { flex-direction: column; gap: 0; }
.legal-toc .link-cols a { color: var(--akj-onyx); }
.info-list--light { margin-bottom: 20px; }
.nf-more { margin-top: 20px; }
.nf-more a { color: var(--akj-white); text-decoration: underline; text-underline-offset: 3px; }
.hero-with-icon .icon--brand { width: 32px; height: 32px; color: var(--akj-white); }
.page-hero--utility .hero-with-icon .icon--brand { color: var(--akj-onyx); }   /* H-088-03 v47: white on the White utility hero was invisible */
/* Quote on phones (03 INNER_PAGES, first field to about 500 px): breadcrumb in the band, compact track */
@media (max-width: 1023px) {
  .quote-band { padding-top: 12px; }
  .quote-rail .mini-track-num { width: 28px; height: 28px; font-size: 1rem; }
  .quote-rail .mini-track li + li::before { width: 20px; }
  .quote-hero .breadcrumb-inband { margin-bottom: 8px; }
  .quote-hero .breadcrumb-inband a { min-height: 32px; }
}
.header-actions .text-link { white-space: nowrap; }   /* the confirmed number never wraps */
.gated-page-note .gated-block { display: block; max-width: 100%; overflow-wrap: anywhere; }
/* 06 R-018 D-1, D-2: links inside the white form card on an Onyx hero are Onyx; breadcrumb separators white on the band */
.panel-onyx .form-hero-card a:not(.btn) { color: var(--akj-onyx); }
.breadcrumb-inband .breadcrumb-sep, .breadcrumb-inband strong { color: var(--akj-white); }
.photo-slot--filled { padding: 0; background: var(--akj-onyx); }
.photo-slot--filled img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 1024-1439 px (iPad landscape, laptops): logo, nav, phone link and CTA did not fit; the page scrolled sideways by up to ~63 px */
@media (min-width: 1024px) and (max-width: 1439px) {
  .header-inner { --logo-w: 224px; }
  .desktop-nav-wrap { margin-left: 16px; gap: 12px; }
  .main-nav > ul { gap: 2px; }
  .nav-link, .nav-submenu-btn { padding-left: 9px; padding-right: 9px; }
  .nav-link::after, .nav-submenu-btn::after { left: 9px; right: 9px; }
}

/* ===== Mobile menu, Onyx panel (03 POLISH.md 4) ===== */
.mobile-menu-btn .icon-close { display: none; }
.mobile-menu-btn[aria-expanded="true"] .icon-close { display: inline-block; }
.mobile-menu-btn[aria-expanded="true"] .icon-menu { display: none; }
.mobile-menu-panel { background-color: var(--akj-onyx); color: var(--akj-white); border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 0; padding: 8px 16px 24px; }
.mobile-nav-list { gap: 0; }
.mobile-nav-list a {
  min-height: 56px; padding: 8px 12px 8px 16px; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2;
  color: var(--akj-white); border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-nav-list a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; background: var(--akj-orange); color: var(--akj-onyx); }
.mobile-nav-list a:focus-visible { outline: 3px solid var(--akj-white); outline-offset: -3px; }
.panel-onyx .mobile-nav-group {
  display: block; padding: 20px 16px 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--akj-orange);   /* orange text on Onyx only (brand v1.1) */
}
.mobile-nav-sub { padding: 0; border-left: 0; }
.mobile-menu-actions { display: grid; gap: 12px; margin-top: 24px; }
.mobile-menu-quote { width: 100%; min-height: 56px; justify-content: center; }
.mobile-menu-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mobile-menu-contact-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 12px;
  border: 2px solid var(--akj-white); color: var(--akj-white); font-weight: 600; text-decoration: none;
}
.mobile-menu-contact-link:focus-visible { outline: 3px solid var(--akj-white); outline-offset: 2px; }
.mobile-menu-contact-link .icon { width: 20px; height: 20px; }
@media (max-width: 1023px) {
  .js .mobile-menu-panel.is-open {
    position: fixed; left: 0; right: 0; top: var(--menu-top, 0); z-index: 60;
    height: calc(100dvh - var(--menu-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
  }
  .js.menu-open { overflow: hidden; }
  .js.menu-open .mobile-sticky-bar { display: none; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .js .mobile-menu-panel.is-open { animation: akj-menu-in 240ms cubic-bezier(.16, 1, .3, 1) both; }
  .js .mobile-menu-panel.is-open .mobile-nav-list > li { animation: akj-menu-item 300ms cubic-bezier(.16, 1, .3, 1) both; }
  .js .mobile-menu-panel.is-open .mobile-nav-list > li:nth-child(2) { animation-delay: 40ms; }
  .js .mobile-menu-panel.is-open .mobile-nav-list > li:nth-child(3) { animation-delay: 80ms; }
  .js .mobile-menu-panel.is-open .mobile-nav-list > li:nth-child(4) { animation-delay: 120ms; }
  .js .mobile-menu-panel.is-open .mobile-nav-list > li:nth-child(5) { animation-delay: 160ms; }
  .js .mobile-menu-panel.is-open .mobile-nav-list > li:nth-child(n+6) { animation-delay: 200ms; }
}
@keyframes akj-menu-in { from { transform: translateY(-8px); } to { transform: none; } }   /* transform only: copy never fades */
@keyframes akj-menu-item { from { transform: translateY(8px); } to { transform: none; } }

/* ===== 404 (03 POLISH.md 5): two columns from 860 px, the detached wheel rolls in once ===== */
.nf { min-height: calc(100vh - 160px); display: flex; align-items: center; }
.nf-grid { display: grid; gap: 24px; width: 100%; }
.nf-art { order: -1; max-width: 260px; margin: 0; }
@media (min-width: 860px) {
  .nf-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
  .nf-art { order: 0; max-width: 560px; }
}
.nf-wheel { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .nf-wheel { animation: akj-wheel-roll 1.1s cubic-bezier(.16, 1, .3, 1) 200ms both; }
}
@keyframes akj-wheel-roll { from { transform: translateX(-140px) rotate(-360deg); } to { transform: none; } }

/* ===== designed line-art in empty photo slots (03 POLISH.md 3) ===== */
.photo-slot:has(.slot-img) { background-color: var(--akj-onyx); border: 0; }
.photo-slot .slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-caption { z-index: 1; background: var(--akj-onyx); padding: 2px 8px; }   /* its own Onyx backing: white text stays readable over the line art */

/* ===== hover, focus and press (03 POLISH.md 2): cards and tiles are whole-card links ===== */
.card-v2, .ways-tile { position: relative; }
.card-v2 h3 a::after, .ways-tile h3 a::after { content: ""; position: absolute; inset: 0; }   /* never a stretched link on a .btn (M-01) */
.ways-tile h3 a { color: inherit; text-decoration: none; }
.ways-go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding-bottom: 4px; font-weight: 600; border-bottom: 2px solid var(--akj-orange); transition: gap var(--t-sm) var(--ease-out); }
.ways-go .btn-arrow { transition: transform var(--t-sm) var(--ease-out); }
@media (hover: hover) { .ways-tile:hover .ways-go { gap: 12px; } .ways-tile:hover .ways-go .btn-arrow { transform: translateX(4px); } }
.ways-tile h3 a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.card-v2 .photo-slot img, .ways-tile .photo-slot img { transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card-v2, .ways-tile, .city-list li > a { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
  .card-v2:hover, .ways-tile:hover, .city-list li > a:hover { transform: translateY(-4px); }
  .card-v2:hover .photo-slot img, .ways-tile:hover .photo-slot img { transform: scale(1.03); }
}
@media (hover: hover) {
  /* the top rule thickens 2 -> 4 px without moving the layout */
  .card-v2:hover, .ways-tile:hover { box-shadow: 0 -2px 0 var(--akj-orange); }
  .city-list li > a:hover { box-shadow: inset 0 4px 0 var(--akj-orange); }
  .faq-summary:hover { background-color: var(--akj-light-grey); }
}
.card-v2:has(a:focus-visible), .ways-tile:has(h3 a:focus-visible) { box-shadow: 0 -2px 0 var(--akj-orange); }
@media (prefers-reduced-motion: no-preference) {
  .card-v2:has(a:focus-visible), .ways-tile:has(h3 a:focus-visible) { transform: translateY(-4px); }
  .card-v2:active, .ways-tile:active { transform: scale(0.99); transition-duration: 100ms; }
  .btn:active { transform: scale(0.98); transition-duration: 100ms; }
}
.photo-upload-list .link-btn { min-height: var(--tap-min); min-width: var(--tap-min); }

/* footer bottom row: © left, credit right (D-050, 03 PASS A5) */
.footer-bottom { justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.footer-credit { font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.footer-credit a { color: inherit; text-decoration: none; font-weight: 600; }
.footer-credit a:hover, .footer-credit a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* line breaking (DR-002 M-02) */
.nowrap { white-space: nowrap; }
.panel-onyx .hero-chip-num, .hero-chip-num { flex: none; white-space: nowrap; min-width: 2ch; }
.table-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 24px; }
.table-scroll:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.table-scroll table { margin: 0; }
.table-scroll th:first-child, .table-scroll td:first-child { min-width: 9rem; }

/* ===== DR-002 Phase A: tablet, seam, sticky bar cells, banner close ===== */
/* M-07: below 1024 px the compact header and the bottom bar (Call · WhatsApp · Quote) */
@media (min-width: 768px) and (max-width: 1023px) {
  .mobile-sticky-bar { display: grid; }
  .header-inner { --logo-w: 132px; }
  .lockup-desktop { display: none; }
  .lockup-mobile { display: flex; }
}
/* S-10: no white seam above the bar: the footer makes the room, not the body */
body { padding-bottom: 0; }
@media (max-width: 1023px) {
  .site-footer { padding-bottom: calc(36px + 50px + env(safe-area-inset-bottom, 0px)); }
  .consent { bottom: calc(50px + env(safe-area-inset-bottom, 0px)); }
}
/* C-01: equal cells with 12 px inner padding; a two-cell bar where the page has no third action */
.mobile-sticky-action { padding: 6px 12px; min-width: 0; }
.mobile-sticky-action > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-sticky-bar--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile-sticky-bar--two .mobile-sticky-action:last-child { background-color: transparent; color: var(--akj-white); }
/* S-08: the banner's close button sits at the container's right edge */
.mgmt-close { margin-left: auto; }
/* S-09: the compact bar keeps Call before Get a quote and shows the current page */
.desktop-sticky-links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--akj-orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.desktop-sticky-links .text-link { white-space: nowrap; }
/* M-03: a gated block is a block, never a box drawn around running text */
.gated-block { display: block; max-width: 100%; }
.hero-parts-link { color: var(--akj-white); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; align-self: center; }

/* =====================================================================================================
   03 PASS_DR002 §A (D-050): full bleed from 320 to 2560 px and wider. Text stays in a readable column;
   backgrounds and visuals run to the screen edge. vw (never %) feeds --content, so children never overflow.
   ===================================================================================================== */
:root {
  --gutter: clamp(20px, 4vw, 96px);
  --content-max: clamp(1200px, 88vw, 2400px);   /* H-088-03 §1: grids spread to 88% at 2560; text keeps 68ch */
  --content: min(100vw - 2 * var(--gutter), var(--content-max));
  --side: calc((100vw - var(--content)) / 2);   /* the content column's outer margin */
}
html { font-size: clamp(16px, 0.25vw + 12.4px, 20px); }   /* 16 px to 1440, about 17 at 1920, 19 at 2560; phones stay 16 */
/* every template: the content column widens with the screen (no 1,360 px box with empty sides) */
.container { max-width: none; width: var(--content); padding-left: 0; padding-right: 0; }
/* the breakout grid */
.bleed { display: grid; grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] calc(var(--content) * .44) [split] calc(var(--content) * .56) [content-end] minmax(var(--gutter), 1fr) [full-end]; }
@media (max-width: 1023px) {
  .bleed { grid-template-columns: [full-start] var(--gutter) [content-start] minmax(0, 1fr) [split] 0 [content-end] var(--gutter) [full-end]; }
}

/* A2 Home hero: copy left; the drawing panel runs from the split line to the right edge */
.hero-v2 .hero-tex { display: none; }
.hero-v2 .hero-v2-inner.bleed { gap: 0; padding: 0; align-items: stretch; min-height: min(calc(100svh - 120px), 52rem); }
.hero-v2 .hero-v2-inner.bleed .hero-copy { grid-column: content-start / split; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 4rem 3rem 4rem 0; position: relative; z-index: 1; background-color: var(--akj-onyx); }   /* R-019 N-3 (03): flat Onyx under the copy, the whole cell; the texture stays in the art panel */
.hero-v2 .hero-v2-inner.bleed .hero-art { grid-column: split / full-end; grid-row: 1; position: relative; display: grid; place-items: center; align-self: stretch; max-width: none; margin: 0; padding: 3rem 0 3rem 2rem; }
/* the texture at about 20%: an Onyx veil over it (no opacity rule: the CSS gate keeps opacity for decorative layers it knows) */
html[data-motion="desktop"] .hero-v2 .hero-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(34, 40, 49, 0.8), rgba(34, 40, 49, 0.8)), url("/assets/textures/steel-sparks-b-1920.webp?v=53") center / cover; }
@media (min-width: 1921px) { html[data-motion="desktop"] .hero-v2 .hero-art::before { background-image: linear-gradient(rgba(34, 40, 49, 0.8), rgba(34, 40, 49, 0.8)), url("/assets/textures/steel-sparks-b-2560.webp?v=53"); } }
.hero-v2 .hero-v2-inner.bleed .hero-art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%); mask-image: linear-gradient(90deg, transparent, #000 25%); }
.hero-v2 .hero-v2-inner.bleed .hero-art .car { position: relative; z-index: 1; width: min(100%, 1100px); height: auto; overflow: visible; }
@media (min-width: 2560px) { .hero-v2 .hero-v2-inner.bleed .hero-art .car { width: min(100%, 1400px); } }
@media (max-width: 1023px) {
  .hero-v2 .hero-v2-inner.bleed { min-height: 0; }
  .hero-v2 .hero-v2-inner.bleed .hero-copy { grid-column: content-start / content-end; padding: 2.5rem 0 1rem; }
  .hero-v2 .hero-v2-inner.bleed .hero-art { grid-column: full-start / full-end; grid-row: 2; padding: 0 var(--gutter) 2.5rem; }
  .hero-v2 .hero-v2-inner.bleed .hero-art .car { width: min(100%, 520px); }
}

/* A3 Two ways: a full-bleed split, two halves edge to edge (White | Light Grey); the H3 link covers each half */
.ways-split { padding: 0; }
.ways-split .ways-head { padding: clamp(3.5rem, 5vw, 5rem) 0 clamp(1.75rem, 2.5vw, 2.5rem); }
.ways-split .ways-halves { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin: 0; max-width: none; }
.ways-split .ways-tile { display: grid; grid-template-rows: auto 1fr; gap: 2rem; padding: 3.5rem 3rem 4rem var(--side); border-top: 0; background: var(--akj-white); color: var(--akj-onyx); min-width: 0; }
.ways-split .ways-tile:last-child { padding: 3.5rem var(--side) 4rem 3rem; background: var(--akj-light-grey); }
.ways-split .ways-tile > * { margin-left: 0; margin-right: 0; }
.ways-split .ways-body { display: flex; flex-direction: column; }
.ways-split .ways-tile h3 { margin-top: 0; }
.ways-split .photo-slot { margin: 0; width: 100%; }
.ways-split .ways-go { margin-top: 1.25rem; }
@media (hover: hover) { .ways-split .ways-tile:hover { transform: none; box-shadow: none; } }
.ways-split .ways-tile:has(h3 a:focus-visible) { transform: none; box-shadow: none; outline: 3px solid var(--akj-onyx); outline-offset: -6px; }
.ways-split .ways-tile h3 a:focus-visible { outline: 3px solid var(--akj-onyx); outline-offset: 4px; }   /* the link keeps its own ring too */
@media (max-width: 1023px) {
  .ways-split .ways-halves { grid-template-columns: minmax(0, 1fr); }
  .ways-split .ways-tile, .ways-split .ways-tile:last-child { padding: 2.5rem var(--gutter) 3rem; }
  .ways-split .photo-slot { aspect-ratio: 16 / 9; }
}

/* A4 Coverage: the signature Onyx band, copy left, the map bleeding to the right edge */
.cov-band { display: grid; grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] calc(var(--content) * .38) [map-start] calc(var(--content) * .62) [content-end] minmax(var(--gutter), 1fr) [full-end]; overflow: hidden; border-bottom: 0; }
.cov-copy { grid-column: content-start / map-start; grid-row: 1; align-self: center; padding: 6rem 3rem 6rem 0; position: relative; z-index: 1; }
.cov-map { grid-column: map-start / full-end; grid-row: 1; align-self: center; padding: 3rem 0; min-width: 0; }
.cov-map svg { display: block; width: 100%; height: auto; }
.cov-count { margin: 1.5rem 0 0.5rem; }
.cov-band .counter-number { font-family: var(--font-display); font-weight: 600; font-size: clamp(5rem, 7vw, 9rem); line-height: 0.9; color: var(--akj-orange); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-block; min-width: 2ch; }
.cov-band h2 { margin: 0 0 1.5rem; text-wrap: balance; }
.cov-band .cities { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; max-width: none; }
.cov-band .cities li { padding: 0.55rem 0; border-top: 1px solid rgba(255, 255, 255, 0.2); font-weight: 600; font-size: 1rem; }
.cov-band .cities .cov-all { grid-column: 1 / -1; }
.cov-band .cov-more { margin: 0 0 1.5rem; }
.cov-band .cov-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; color: var(--akj-white); font-weight: 600; text-decoration: none; padding: 8px 0 4px; border-bottom: 2px solid var(--akj-orange); }   /* H-088-03 §7: a 44 px target */
.cov-band .cov-link:hover .btn-arrow, .cov-band .cov-link:focus-visible .btn-arrow { transform: translateX(4px); }
.cov-band--compact .cov-copy { padding: 4rem 3rem 4rem 0; }
.cov-band--compact .cov-map svg { max-height: 26rem; }
@media (max-width: 1023px) {
  .cov-band { grid-template-columns: [full-start] var(--gutter) [content-start] minmax(0, 1fr) [map-start] 0 [content-end] var(--gutter) [full-end]; }
  .cov-copy { grid-column: content-start / content-end; padding: 3.5rem 0 1rem; }
  .cov-map { grid-column: full-start / full-end; grid-row: 2; padding: 0 0 3rem; }
  .cov-band--compact .cov-copy { padding: 3rem 0 1rem; }
}
/* the map's own styles (were inside the SVG; moved here for the CSP) */
.akj-map { font-family: var(--font-body); }
.akj-map .g { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.akj-map .border { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.4; stroke-dasharray: 6 8; }
.akj-map #map-region-fill { fill: rgba(225, 122, 33, 0.13); }
.akj-map #map-region { fill: none; stroke: var(--akj-orange); stroke-width: 3; stroke-linejoin: round; }
.akj-map #map-river { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.akj-map .city { fill: #fff; font-size: 17px; font-weight: 600; }
.akj-map .cityb { fill: #fff; font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.akj-map .meta { fill: #abadb1; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; }   /* solid grey on Onyx (7:1), not faded text */
.akj-map .tick { fill: none; stroke: var(--akj-orange); stroke-width: 1.6; stroke-linecap: round; }
.akj-map .yardlbl { fill: var(--akj-orange); font-size: 15px; font-weight: 600; letter-spacing: 0.06em; }

/* S-03 / A8 final CTA: a light band, split headline | actions; the one tapered slash where it meets the footer */
.final-v2 { position: relative; color: var(--akj-onyx); }
.final-v2--grey { background: var(--akj-light-grey); }
.final-v2--white { background: var(--akj-white); }
.final-v2 .accent-word { color: inherit; }
.final-v2 .statement { max-width: 20ch; color: var(--akj-onyx); }
.final-v2-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
.final-v2 .final-slash { position: absolute; right: -6%; bottom: -1px; width: 38%; height: 10px; background: var(--akj-orange); color: var(--akj-onyx); transform: skewX(-10deg); transform-origin: right; }
@media (max-width: 860px) { .final-v2-inner { grid-template-columns: minmax(0, 1fr); } }
/* C-01: labels fit at 390 (Call narrower); under 360 px the icons step aside so "WhatsApp" stays whole */
.mobile-sticky-bar { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.15fr) minmax(0, 1fr); }
.mobile-sticky-action { padding: 6px 8px; font-size: 15px; gap: 5px; }
@media (max-width: 359px) { .mobile-sticky-action .icon { display: none; } }
.mobile-sticky-bar.mobile-sticky-bar--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ===== Gallery (03 PASS A6) ===== */
.gallery-hero { background: var(--akj-white); padding: clamp(3rem, 5vw, 5rem) 0 2rem; border-bottom: 1px solid rgba(34, 40, 49, 0.2); }
.gallery-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; }
.gallery-hero-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 0; }
@media (max-width: 767px) { .gallery-hero-inner { grid-template-columns: minmax(0, 1fr); } }
.gallery-band { padding: 2rem 0 4rem; }
.gallery-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }
.chip { min-height: var(--tap-min); padding: 8px 16px; border: 1px solid var(--akj-onyx); background: var(--akj-white); color: var(--akj-onyx); font: inherit; font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--akj-onyx); color: var(--akj-white); }
.gallery-grid { list-style: none; margin: 0; padding: 0 8px; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 2560px) { .gallery-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gallery-grid li[hidden] { display: none; }
.gallery-grid figure { margin: 0; }
.gallery-grid a { display: block; overflow: hidden; background: var(--akj-light-grey); }
.gallery-grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .gallery-grid a:hover img { transform: scale(1.03); } }
.gallery-grid a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.gallery-grid figcaption { padding: 8px 4px 0; font-size: var(--fs-support); }
.lightbox { width: min(100vw - 2rem, 1400px); max-height: calc(100vh - 2rem); padding: 0; border: 0; background: var(--akj-onyx); color: var(--akj-white); }
.lightbox::backdrop { background: rgba(34, 40, 49, 0.92); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; }
.lightbox figcaption, .lightbox-count { padding: 8px 16px; margin: 0; }
.lightbox-btn { position: absolute; min-width: var(--tap-min); min-height: var(--tap-min); border: 0; background: var(--akj-onyx); color: var(--akj-white); font-size: 1.25rem; cursor: pointer; }
.lightbox-btn:focus-visible { outline: 3px solid var(--akj-white); outline-offset: -3px; }
.lightbox-prev { left: 0; top: 40%; } .lightbox-next { right: 0; top: 40%; } .lightbox-close { right: 0; top: 0; }
@media (prefers-reduced-motion: no-preference) { .lightbox[open] { animation: akj-fade-in 200ms ease-out; } }
@keyframes akj-fade-in { from { transform: scale(0.98); } to { transform: none; } }
.ig-band { background: var(--akj-light-grey); padding: 3rem 0 4rem; }
.ig-band .container { margin-bottom: 1.25rem; }

/* =====================================================================================================
   PASS_DR002 Phase B, shared components (§2 tokens, §5)
   ===================================================================================================== */
/* §2 type scale (rem: it grows with the fluid root on large screens) and section spacing */
:root { --t-h1-home: 2.5rem; --t-h1: 2.25rem; --t-statement: 1.875rem; --t-h2: 1.75rem; --t-h3: 1.25rem; --t-lead: 1.125rem; --t-pad: 48px; --t-pad-final: 48px; }
@media (min-width: 768px) { :root { --t-h1-home: 3rem; --t-h1: 2.75rem; --t-statement: 2.25rem; --t-h2: 1.875rem; --t-pad: 64px; --t-pad-final: 64px; } }
@media (min-width: 1024px) { :root { --t-h1-home: 4rem; --t-h1: 3.5rem; --t-statement: 2.5rem; --t-h2: 2rem; --t-h3: 1.375rem; --t-lead: 1.25rem; --t-pad: 96px; --t-pad-final: 80px; } }
h1, h2, h3 { text-wrap: balance; }
h1, .page-hero h1 { font-size: var(--t-h1); }
.hero-v2 h1 { font-size: var(--t-h1-home); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
.statement { font-size: var(--t-statement); }
.hero-lede, .page-hero .hero-lede { font-size: var(--t-lead); }
.section { padding-top: var(--t-pad); padding-bottom: var(--t-pad); }
.eyebrow { display: inline-block; }   /* one rule under the whole label block, even when it wraps */

/* §2 header: the live descriptor leaves the desktop header (it stays in the footer, the intro and OG) */
.site-header .lockup-descriptor { display: none; }
.header-inner { padding-top: calc(var(--logo-w) * 0.062); padding-bottom: calc(var(--logo-w) * 0.062); }   /* H-088-03 §5: one header, mark only, 120 px at 1440 */

/* §5 final CTA: 80 / 64 / 48; statement 24ch; full-width buttons on phones; the one slash moves to the footer */
.final-v2 { padding-top: var(--t-pad-final); padding-bottom: var(--t-pad-final); }
.final-v2 .statement { max-width: 24ch; }
.final-v2 .final-slash { display: none; }
@media (max-width: 767px) { .final-actions .btn { width: 100%; justify-content: center; } }
.site-footer { position: relative; border-top: 0; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 55%; right: 0; height: 6px; background: var(--akj-orange); color: var(--akj-onyx); clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); }

/* §5 steps on a light ground: a 64 px Onyx tile with an orange numeral */
.steps-v2-track .steps-v2-num { width: 64px; height: 64px; font-size: 2.5rem; border: 0; color: var(--akj-orange); background-color: var(--akj-onyx); }

/* §5 FAQ: hairline dividers, Kanit 20 px questions, an unboxed 24 px chevron, 880 px measure */
.faq-list { max-width: 880px; }
.faq-item { border: 0; border-bottom: 1px solid rgba(34, 40, 49, 0.2); }
.faq-summary { font-size: 1.25rem; padding: 18px 0; }
.faq-item[open] .faq-summary { background: transparent; border-bottom: 0; }
.faq-indicator { border: 0; width: 24px; height: 24px; }
.faq-item .faq-indicator::before, .faq-item[open] .faq-indicator::before, .faq-item:not([open]) .faq-indicator::before { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
.faq-item[open] .faq-indicator::before { transform: rotate(-135deg) translate(-2px, -2px); }
@media (hover: hover) { .faq-summary:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; } }

/* §5 policy tables (S-14): Kanit header on Light Grey, hairline rows, 12 / 16 padding; stacked rows below 600 px */
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.table-scroll th { font-family: var(--font-display); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; background: var(--akj-light-grey); text-align: left; }
.table-scroll th, .table-scroll td { padding: 12px 16px; border: 0; border-bottom: 1px solid #d9dcdf; vertical-align: top; }
@media (max-width: 599px) {
  .table-scroll { overflow: visible; }
  .table-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-scroll tr { display: block; padding: 8px 0; border-bottom: 1px solid #d9dcdf; }
  .table-scroll td { display: block; border: 0; padding: 4px 0; }
  .table-scroll td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; }
  .table-scroll th:first-child, .table-scroll td:first-child { min-width: 0; }
}

/* §5 footer (S-16): three link columns on desktop, a two-column grid on phones; the mark's transparent margin offset */
.footer-lockup { margin-left: calc(220px * -0.094); }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: minmax(16rem, 1.3fr) repeat(3, minmax(0, 1fr)); column-gap: 3rem; } }
/* the mark rendered at 251 px: max-width 100% inside the shrink-to-fit inline-block link; 272 as in the header */
@media (min-width: 401px) { .footer-lockup, .footer-lockup .mark-img { max-width: none; } }
/* H-088-03 v47 phone footer (<= 700 px): Sell and Company side by side, Legal as one inline link row, tighter padding */
@media (max-width: 767px) {
  .site-footer { padding-top: 32px; }
  .footer-grid { row-gap: 24px; margin-bottom: 20px; }
  .footer-grid > .footer-legal { grid-column: 1 / -1; }
  .footer-legal .footer-heading { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .footer-legal .footer-links { flex-direction: row; flex-wrap: wrap; gap: 0 16px; font-size: 14px; }
  .footer-brand { margin-bottom: 12px; }
}   /* H-088-03 §2: the brand column and three link columns span the content width */
@media (max-width: 767px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid > div:first-child { grid-column: 1 / -1; } }

/* §5 consent (S-08): a docked bottom bar on desktop; on phones side-by-side buttons and no call bar until a choice */
@media (min-width: 1024px) {
  .consent { max-width: none; left: 0; right: 0; bottom: 0; margin: 0; border-width: 4px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: center; padding: 16px var(--side); }
  .consent h2, .consent > p:not(.consent-actions) { grid-column: 1; margin: 0; }
  .consent h2 { margin-bottom: 4px; }
  .consent .consent-actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}
@media (max-width: 1023px) {
  .consent-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consent-actions .btn { width: 100%; justify-content: center; }
  html:has(.consent:not([hidden])) .mobile-sticky-bar { display: none; }
  html:has(.consent:not([hidden])) .consent { bottom: 0; }
}

/* §5 intro (S-19): no box: the clip fades at its edge and no grid line meets it */
.intro-v2-stage video, .intro-v2-still { -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); }
.intro-v2-half::after { -webkit-mask-image: radial-gradient(circle at 50% 45%, transparent 0 18vmin, #000 34vmin); mask-image: radial-gradient(circle at 50% 45%, transparent 0 18vmin, #000 34vmin); }

/* PASS_DR002 §2 utility hero (W): Onyx H1 on White, the label's orange rule, a right column at >= 1024 px */
.page-hero--utility { background: var(--akj-white); color: var(--akj-onyx); border-bottom: 1px solid rgba(34, 40, 49, 0.2); padding: 48px 0; }
@media (min-width: 768px) { .page-hero--utility { padding: 64px 0; } }
@media (min-width: 1024px) { .page-hero--utility { padding: 96px 0 72px; } }
.page-hero--utility .breadcrumb-inband a, .page-hero--utility .breadcrumb-inband li, .page-hero--utility .breadcrumb-inband { color: var(--akj-onyx); }
.page-hero--utility .eyebrow { color: var(--akj-onyx); background-color: transparent; }
.page-hero--utility .breadcrumb-inband .breadcrumb-sep, .page-hero--utility .breadcrumb-inband strong { color: var(--akj-onyx); }   /* R-019 J-1: were White on the White hero */
.page-hero--utility .accent-word { color: inherit; }
.utility-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
@media (min-width: 1024px) { .utility-inner { grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr); } }
.utility-inner > .photo-slot { margin: 0; }
.hero-actions-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 24px 0 0; }
.hero-card { background: var(--akj-light-grey); border-top: 2px solid var(--akj-orange); padding: 24px; display: grid; gap: 12px; align-content: start; }
.hero-card p { margin: 0; }
.hero-card .card-label { margin: 0; font-size: 14px; }
.hero-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hero-card .text-link { color: var(--akj-onyx); }
.hero-card--meta p { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }

/* §3 Sell / Scrap: the left column is sticky and holds "What to have ready"; text | illustration sections */
.hero-ready { margin: 24px 0; }
.hero-ready-title { font-size: 1.125rem; margin: 0 0 12px; color: var(--akj-white); }
@media (min-width: 1024px) { .page-hero--form .form-hero-copy { position: sticky; top: 80px; align-self: start; } }
.split-art { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 4rem; align-items: center; }
@media (min-width: 1024px) { .split-art { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.split-art > .photo-slot { margin: 0; }
.split-text.checklist-cols { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
/* §3 Quote contact strip; Thank-you done step */
.contact-strip { background: var(--akj-light-grey); padding: 24px 0; }
.contact-strip-inner { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.contact-strip-label { font-family: var(--font-display); font-weight: 600; }
.contact-strip .text-link { color: var(--akj-onyx); }
.steps-v2-track .steps-v2-step.is-done .steps-v2-num { background-color: var(--akj-orange); color: var(--akj-onyx); }
.hero-actions-row .btn { min-height: 48px; }
/* Phones: one action per line, as at 375. At 412 the call link fitted beside the button in the Arial fallback and
   wrapped once Inter 600 loaded (phone CLS 0.094 Surrey, 0.07 About on v45); stacking leaves nothing to re-wrap. */
@media (max-width: 479px) { .hero-actions-row { flex-direction: column; align-items: flex-start; } }
.split-text .text-link--on-dark { color: var(--akj-onyx); }   /* the maps link on a light ground */
/* §3 Abandoned (S-25): the caution as a Light Grey callout; Call / WhatsApp on Onyx under the checklist */
.callout-grey { background: var(--akj-light-grey); border-top: 2px solid var(--akj-orange); padding: 24px; }
.callout-onyx { padding: 24px; margin-top: 24px; }
.callout-onyx .card-label { margin: 0 0 8px; color: var(--akj-white); }
.callout-onyx .btn--secondary { color: var(--akj-white); border-color: var(--akj-white); background: transparent; }
.reviews-panel { max-width: 880px; margin-inline: auto; background: var(--akj-white); border-top: 2px solid var(--akj-orange); padding: clamp(24px, 4vw, 48px); display: grid; gap: 2rem; text-align: center; }
.reviews-wrong { border-top: 1px solid rgba(34, 40, 49, 0.2); padding-top: 2rem; }
/* H-088-03 §4 Sell/Scrap below 768: each long section is a disclosure (H2 as summary, the first open; js/ui.js
   closes the rest on phones). Shipped open, so without JavaScript nothing is hidden; on wider screens always open */
.m-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.m-fold > summary::-webkit-details-marker { display: none; }
.m-fold > summary > h2 { margin: 0 0 16px; }
@media (max-width: 767px) {
  .m-fold { border-top: 1px solid rgba(34, 40, 49, 0.2); }
  .m-fold > summary { cursor: pointer; min-height: 56px; padding: 12px 0; }
  .m-fold > summary > h2 { margin: 0; font-size: 1.375rem; }
  .m-fold[open] > summary { margin-bottom: 8px; }
  .m-fold + .m-fold { margin-top: 0; }
  .checklist-cols:has(> .m-fold) { gap: 0; }
}
@media (min-width: 768px) {
  .m-fold > summary .faq-indicator { display: none; }
  .js .m-fold > summary { pointer-events: none; }
}
/* H-088-03 §3 Service areas: "Collection" as the full-bleed split (copy in the content column, the art to the edge) */
.collection-split { padding: 0; }
.collection-split .collection-copy { grid-column: content-start / split; grid-row: 1; align-self: center; padding: 4rem 3rem 4rem 0; }
.collection-split .bleed > .photo-slot { grid-column: split / full-end; grid-row: 1; margin: 0; max-width: none; max-height: 28rem; justify-self: stretch; }
@media (max-width: 1023px) {
  .collection-split .collection-copy { grid-column: content-start / content-end; padding: 3rem 0 1.5rem; }
  .collection-split .bleed > .photo-slot { grid-column: full-start / full-end; grid-row: 2; }
}
/* H-088-03 §3 at >= 1024: the reviews panel splits Read | Leave across the content width; the Quote contact strip
   puts the label and phone hours left, Call and WhatsApp right */
@media (min-width: 1024px) {
  .reviews-panel { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4rem; text-align: left; }
  .contact-strip-inner > span:last-child { order: 1; margin-right: auto; }
  .contact-strip-inner > a { order: 2; }
}
.article-art { margin: 0 0 2.5rem; max-width: 68ch; }
.toc-mobile { margin-top: 16px; border-top: 1px solid rgba(34, 40, 49, 0.2); padding-top: 8px; }
.toc-mobile summary { min-height: var(--tap-min); display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.toc-mobile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc-mobile a { display: inline-flex; min-height: var(--tap-min); align-items: center; color: var(--akj-onyx); }
@media (min-width: 1200px) { .toc-mobile { display: none; } }
@media (max-width: 1199px) { .toc-rail { display: none; } }
.contact-form-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 4rem; align-items: start; }
@media (min-width: 1024px) { .contact-form-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
@media (max-width: 599px) { .contact-card { padding: 20px; } }
/* §3 FAQs: the index is a chip row on phones and tablets (sticky rail from 1024 px) */
@media (max-width: 1023px) {
  .faq-index ul { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 4px; }
  .faq-index a { white-space: nowrap; border: 1px solid var(--akj-onyx); padding: 8px 14px; }
}
.nf-gap { height: 48px; background: var(--akj-white); }
.nf { min-height: 0; }
/* Home length (PASS §6: <= 4,500 px at 1440): 16:9 tile art, a slimmer coverage band, split team, two-column FAQ */
.ways-split .photo-slot { aspect-ratio: 16 / 9; }
.ways-split .ways-tile { padding-top: 2.5rem; padding-bottom: 3rem; gap: 1.5rem; }
.cov-copy { padding-top: 4rem; padding-bottom: 4rem; }
.cov-map { padding: 2rem 0; }
/* H-088-03 Home height (<= 4,700 px production at 1440, <= 6,000 at 390): Two ways <= 720, map band <= 660,
   team one row <= 420, footer <= 480 */
.ways-split .ways-head { padding: 2.5rem 0 1.25rem; }
.ways-split .ways-tile, .ways-split .ways-tile:last-child { padding-top: 2.25rem; padding-bottom: 2.5rem; gap: 1.5rem; }
.ways-split .photo-slot { aspect-ratio: 3 / 2; max-height: 18rem; }   /* 03 asked 22rem; 18 keeps the band <= 720 at 1440 */
.ways-split .photo-slot .slot-img { object-fit: contain; }
.cov-copy { padding-top: 2.75rem; padding-bottom: 2.75rem; }
.cov-map { padding: 1.5rem 0; }
.cov-map svg { max-height: 34rem; }
.cov-band .counter-number { font-size: clamp(4rem, 5.5vw, 7rem); }
.cov-band .cities li { padding: 0.35rem 0; line-height: 1.4; }
.cov-band h2 { margin-bottom: 1rem; }
.site-footer { padding-top: 40px; }
@media (min-width: 1024px) { .site-footer { padding-bottom: 24px; } }   /* below 1024 the footer keeps room for the call bar (S-10) */
.footer-grid { margin-bottom: 28px; }
@media (max-width: 767px) {
  .ways-split .ways-head { padding: 2rem 0 1rem; }
  .ways-split .ways-tile, .ways-split .ways-tile:last-child { padding-top: 2rem; padding-bottom: 2rem; }
  .ways-split .photo-slot { aspect-ratio: 16 / 9; }
  .cov-copy { padding-top: 2.5rem; padding-bottom: 0.5rem; }
  .footer-grid { gap: 20px; }
}
.team-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 4rem; align-items: center; }
.team-row-copy h2 { margin-bottom: 0.75rem; }
.team-row-copy p, .team-row-cards p { margin: 0 0 0.75rem; }
.team-row-cards { display: grid; gap: 1rem; }
.team-row .team-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.team-v2 .team-card { grid-template-columns: 96px minmax(0, 1fr); padding: 0; gap: 20px; background: transparent; border-top: 0; }
.team-v2 .team-initial { width: 96px; height: 96px; }
.team-v2 .team-initial .icon--brand { width: 44px; height: 44px; }
@media (max-width: 479px) {
  .team-row .team-v2 { grid-template-columns: minmax(0, 1fr); }
  .team-v2 .team-card { grid-template-columns: 72px minmax(0, 1fr); }
  .team-v2 .team-initial { width: 72px; height: 72px; }
}
@media (min-width: 1024px) {
  .team-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .home-faqs .faq-list { column-count: 2; column-gap: 3rem; max-width: none; }
  .home-faqs .faq-item { break-inside: avoid; }
}
.tag-draft { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid currentColor; font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; vertical-align: middle; }

/* H-088-03 v47 Scrap phones: Two ways as two compact link rows, no art */
@media (max-width: 767px) {
  .ways-split--compact .photo-slot { display: none; }
  .ways-split--compact .ways-tile, .ways-split--compact .ways-tile:last-child { padding-top: 1.25rem; padding-bottom: 1.25rem; gap: 0; }
  .ways-split--compact .ways-head { padding-bottom: 0.5rem; }
  .ways-split--compact .ways-go { margin-top: 0.5rem; }
  .ways-split--compact .ways-support { display: none; }   /* a link row: the title and its arrow */
}
/* H-088-03 v47 phones: the coverage band's cities as one comma line and the map at 60% */
.cov-line { display: none; margin: 0 0 1.25rem; font-weight: 600; }
.cov-line a { color: var(--akj-white); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .cov-band .cov-cities { display: none; }
  .cov-line { display: block; }
  .cov-map svg { width: 60%; margin-inline: auto; }
}
/* H-088-03 v48 Sell/Scrap phones: compact steps — a 40 px Onyx tile with the orange numeral left of the H3, the text
   under it, no rail, 24 px between steps */
@media (max-width: 767px) {
  .steps-v2--compact { padding: 48px 0; }
  .steps-v2--compact .steps-v2-track { gap: 24px; }
  .steps-v2--compact .steps-v2-rail { display: none; }
  .steps-v2--compact .steps-v2-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; padding-left: 0; min-height: 0; }
  .steps-v2--compact .steps-v2-num { position: static; width: 40px; height: 40px; font-size: 1.5rem; }
  .steps-v2--compact .steps-v2-card { display: contents; }
  .steps-v2--compact .steps-v2-card h3 { margin: 0; font-size: 1.125rem; }
  .steps-v2--compact .steps-v2-card > :not(h3) { grid-column: 1 / -1; margin-top: 8px; }
}
/* R-019 J-3: map labels at 14 px or more on screen (--map-px = map units per CSS px, set by js/ui.js; 1.45 is the
   1440 value for no-JS). Below 768 px the labels would need huge sizes: they hide, and the comma line names the cities */
.akj-map .city { font-size: max(17px, calc(14px * var(--map-px, 1.45))); }
.akj-map .cityb { font-size: max(26px, calc(18px * var(--map-px, 1.45))); }
.akj-map .meta, .akj-map .yardlbl { font-size: max(15px, calc(14px * var(--map-px, 1.45))); }
@media (max-width: 767px) { .akj-map text { display: none; } }   /* the phone map is 60% wide (v48) */
/* R-019 N-1 Quote phones: the step names show under the numbers (they were screen-reader only), three equal columns */
@media (max-width: 1023px) {
  .quote-rail .mini-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-items: start; }   /* R-021 N-4: badges level */
  .quote-rail .mini-track li { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; font-size: 14px; line-height: 1.25; }
  .quote-rail .mini-track li + li::before { content: none; }
  .quote-rail .mini-track li > span:not(.mini-track-num) { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
}
/* R-020 #2: a first visit shows the banner from the first frame (js/consent.js sets html.consent-pending in the head),
   ahead of the [hidden] it carries until DOMContentLoaded; the phone call bar steps aside as it does for the open banner */
html.consent-pending .consent[data-consent] { display: block !important; }
@media (min-width: 1024px) { html.consent-pending .consent[data-consent] { display: grid !important; } }
@media (max-width: 1023px) {
  html.consent-pending .mobile-sticky-bar { display: none; }
  html.consent-pending .consent { bottom: 0; }
}

/* =====================================================================================================================
   MOTION_V2 (D-053, 03 H-091-03): the data-anim layer, first-frame hero motion and the micro-interactions.
   Start states exist only on .a-pre, which js/ui.js adds on the motion tiers; the heroes use keyframes keyed on
   <html data-motion> (set in the head before paint). Transform, clip-path, background-size and stroke only: copy never
   fades or clips. Reduced motion (tier off) sets neither, so every page is its end state.
   ===================================================================================================================== */
:root { --a-out: cubic-bezier(.16, 1, .3, 1); --a-io: cubic-bezier(.65, 0, .35, 1); --a-back: cubic-bezier(.34, 1.56, .64, 1); --a-k: 1; --a-y: 28px; }
@media (max-width: 767px) { :root { --a-k: .8; --a-y: 14px; } }

/* rise · stagger */
.a-pre[data-anim="rise"], .a-pre[data-anim="stagger"] > * { transform: translateY(var(--a-y)); }
.a-in[data-anim="rise"], .a-in[data-anim="stagger"] > * { transform: none; transition: transform calc(.8s * var(--a-k)) var(--a-out) calc(var(--i, 0) * 70ms); }
/* rule: the label underline draws */
.a-pre[data-anim="rule"] { background-size: 0% 2px; }
.a-in[data-anim="rule"] { background-size: 100% 2px; transition: background-size calc(.5s * var(--a-k)) var(--a-io); }
/* panel: the ground wipes in from the left behind the content (light grounds only: the copy stays readable) */
.a-pre[data-anim="panel"], .a-in[data-anim="panel"] { background-color: transparent; position: relative; isolation: isolate; }
.a-pre[data-anim="panel"]::before, .a-in[data-anim="panel"]::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--a-bg); transform: scaleX(0); transform-origin: left; }
.a-in[data-anim="panel"]::before { transform: none; transition: transform calc(.9s * var(--a-k)) var(--a-io); }
/* frame: a slot or photo reveals left to right (decorative: clip allowed), the image settles */
.a-pre[data-anim="frame"] { clip-path: inset(0 100% 0 0); }
.a-in[data-anim="frame"] { clip-path: inset(0 0 0 0); transition: clip-path calc(.9s * var(--a-k)) var(--a-io); }
@media (min-width: 768px) {
  .a-pre[data-anim="frame"] > img { transform: scale(1.08); }
  .a-in[data-anim="frame"] > img { transform: none; transition: transform 1.2s var(--a-out); }
}
/* draw: line art stroke by stroke (pathLength="1"), the orange accents 300 ms later */
.a-pre[data-anim="draw"] [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.a-in[data-anim="draw"] [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset calc(1.2s * var(--a-k)) var(--a-io); }
.a-in[data-anim="draw"] :is(.o, .t, .acc)[pathLength], .a-in[data-anim="draw"] :is(.o, .t, .acc) [pathLength] { transition-delay: .3s; }
/* icon: each brand icon in an animated block draws once */
.a-pre .icon--brand { stroke-dasharray: 64; stroke-dashoffset: 64; }
.a-in .icon--brand { stroke-dasharray: 64; stroke-dashoffset: 0; transition: stroke-dashoffset calc(.6s * var(--a-k)) var(--a-io) calc(var(--i, 0) * 60ms); }
/* slash: the footer's tapered slash draws from the left */
.a-pre[data-anim="slash"]::before { transform: scaleX(0); transform-origin: left; }
.a-in[data-anim="slash"]::before { transform: none; transform-origin: left; transition: transform .8s var(--a-out); }
/* the Two ways go-line: the arrow nudges 4 px once as its tile arrives */
@keyframes a-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }
.a-in .a-nudge .btn-arrow, .a-in.a-nudge .btn-arrow { animation: a-nudge .6s var(--a-io) .5s 1; }

/* heroes: they are on screen at first paint, so they move with keyframes from the first frame */
@keyframes a-rise { from { transform: translateY(var(--a-y)); } }
@keyframes a-rule { from { background-size: 0% 2px; } }
@keyframes a-frame { from { clip-path: inset(0 100% 0 0); } }
@keyframes a-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes a-icon { from { stroke-dasharray: 64; stroke-dashoffset: 64; } to { stroke-dasharray: 64; stroke-dashoffset: 0; } }
@keyframes a-pop { from { transform: scale(.6); } }
:root:is([data-motion="desktop"], [data-motion="phone"]) :is(.page-hero, .quote-hero) :is(h1, .hero-lede, .hero-actions-row, .hero-direct-contacts, .hero-ready, .ready-details--hero, .hero-card, .nf-links) { animation: a-rise calc(.8s * var(--a-k)) var(--a-out) both; }
:root:is([data-motion="desktop"], [data-motion="phone"]) :is(.page-hero, .quote-hero) :is(.hero-lede, .nf-links) { animation-delay: 80ms; }
:root:is([data-motion="desktop"], [data-motion="phone"]) .page-hero :is(.hero-actions-row, .hero-direct-contacts, .hero-ready, .ready-details--hero) { animation-delay: 160ms; }
:root:is([data-motion="desktop"], [data-motion="phone"]) .page-hero .hero-card { animation-delay: 220ms; }
:root:is([data-motion="desktop"], [data-motion="phone"]) :is(.page-hero, .quote-hero) .eyebrow { animation: a-rule calc(.5s * var(--a-k)) var(--a-io) both; }
:root:is([data-motion="desktop"], [data-motion="phone"]) .page-hero .photo-slot { animation: a-frame calc(.9s * var(--a-k)) var(--a-io) 100ms both; }
:root:is([data-motion="desktop"], [data-motion="phone"]) :is(.page-hero .slot-svg, .nf-art svg) [pathLength] { animation: a-draw calc(1.2s * var(--a-k)) var(--a-io) 200ms both; }
:root:is([data-motion="desktop"], [data-motion="phone"]) :is(.page-hero .slot-svg, .nf-art svg) :is(.o, .t, .acc)[pathLength] { animation-delay: 500ms; }
:root:is([data-motion="desktop"], [data-motion="phone"]) :is(.page-hero, .quote-hero) .icon--brand { animation: a-icon calc(.6s * var(--a-k)) var(--a-io) 300ms both; }
/* Sell / Scrap: the form card slides up 24 px (the card, never the fields one by one) */
:root:is([data-motion="desktop"], [data-motion="phone"]) .page-hero .form-hero-card { animation: a-rise .9s var(--a-out) 150ms both; --a-y: 24px; }
/* Quote: the step tiles pop in sequence */
:root:is([data-motion="desktop"], [data-motion="phone"]) .quote-rail .mini-track-num { animation: a-pop .36s var(--a-back) both; }
:root:is([data-motion="desktop"], [data-motion="phone"]) .quote-rail .mini-track li:nth-child(1) .mini-track-num { animation-delay: .1s; }
:root:is([data-motion="desktop"], [data-motion="phone"]) .quote-rail .mini-track li:nth-child(2) .mini-track-num { animation-delay: .22s; }
:root:is([data-motion="desktop"], [data-motion="phone"]) .quote-rail .mini-track li:nth-child(3) .mini-track-num { animation-delay: .34s; }
/* 404: the body draws first (0.8 s), then the loose wheel rolls in */
:root:is([data-motion="desktop"], [data-motion="phone"]) .nf-wheel { animation-delay: .8s; }

/* micro-interactions (MOTION_V2 §5); focus rings stay instant */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:not(.btn--sweep):hover { transform: translateY(-2px); }
  .text-link .icon { transition: transform var(--t-sm) var(--ease-out); }
  .text-link:hover .icon { transform: translateX(4px); }
  .text-link:hover { text-decoration-thickness: 3px; }
  .card-v2:hover .icon--brand, .ways-tile:hover .icon--brand, .team-card:hover .icon--brand { animation: a-icon .6s var(--a-io) 1; }
}
/* the coverage list lifts its city on the map (js/ui.js); the others go quiet by colour, never by opacity */
.akj-map text.city, .akj-map text.cityb { transform-box: fill-box; transform-origin: center; transition: transform 200ms var(--a-out), fill 200ms var(--a-out); }
.akj-map.has-hot text.city:not(.is-hot), .akj-map.has-hot text.cityb:not(.is-hot) { fill: #8a9097; }
.akj-map text.is-hot { fill: var(--akj-orange); transform: scale(1.15); text-decoration: underline; }
/* form fields: an orange underline grows from the left on focus (the focus ring itself is instant) */
.lead-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea) { background-image: linear-gradient(var(--akj-orange), var(--akj-orange)); background-position: left bottom; background-repeat: no-repeat; background-size: 0% 2px; }
.lead-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea):focus { background-size: 100% 2px; }
@media (prefers-reduced-motion: no-preference) {
  .lead-form :is(input, textarea) { transition: background-size 200ms var(--a-out); }
}
/* submit: "Sending…" with a 2 px orange bar running along the button's foot until the reply (js/forms.js .is-sending) */
.lead-form [data-submit] { position: relative; overflow: hidden; }
.lead-form [data-submit].is-sending::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--akj-orange); color: var(--akj-onyx); transform-origin: left; animation: a-sending 1.2s var(--a-io) infinite; }
@keyframes a-sending { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1) translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .lead-form [data-submit].is-sending::after { animation: none; transform: none; } }
/* FAQ: the answer opens and closes in height; it rises 8 px as it appears */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .faq-list { interpolate-size: allow-keywords; }
    .faq-item::details-content { block-size: 0; overflow-y: clip; transition: block-size 280ms var(--a-io), content-visibility 280ms allow-discrete; }
    .faq-item[open]::details-content { block-size: auto; }
  }
  @keyframes a-rise8 { from { transform: translateY(8px); } }
  .faq-item[open] .faq-body { animation: a-rise8 280ms var(--a-out); }
}
/* the slim sticky bar tucks away (js/ui.js shows it on scroll up) */
.desktop-sticky-bar { transition: transform 240ms var(--a-out); }
/* page to page (D-054, MOTION_V2 §8.2): the "slash cut". Every page is still a real load (no router, no SEO effect); the new
   page is revealed through a 450 ms wipe at the brand slash angle (58% -> 42%, right to left) over the old one (no dim:
   the CSS gate keeps filter off anything that holds text); the header keeps its own layer and does not move. Browsers without cross-document view transitions just navigate */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(site-header) { animation: none; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: akj-cut-new 450ms cubic-bezier(.65, 0, .35, 1) both; }
  @keyframes akj-cut-new {
    from { clip-path: polygon(116% 0, 132% 0, 116% 100%, 100% 100%); }
    to { clip-path: polygon(-32% 0, 132% 0, 116% 100%, -48% 100%); }
  }
}
/* Thank-you: the done tile's check mark draws (0.6 s) */
.done-check { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
:root:is([data-motion="desktop"], [data-motion="phone"]) .done-check path { animation: a-draw .6s var(--a-io) .4s both; }
/* MOTION_V2 §4: the inline slot art (scripts/inline-slots.mjs dropped the files' own <style>, which the CSP blocks) */
.photo-slot:has(.slot-svg) { background-color: var(--akj-onyx); border: 0; }
.photo-slot .slot-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.slot-svg .l { fill: none; stroke: var(--akj-white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.slot-svg .o { fill: none; stroke: var(--akj-orange); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.slot-svg .t { fill: none; stroke: var(--akj-orange); stroke-width: 1.4; stroke-linecap: round; }
.slot-svg .d { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.4; stroke-dasharray: 4 6; stroke-linecap: round; }
.slot-svg .g { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
/* the "On this page" lists: a 2 px orange bar marks the section in view and slides between items (js/ui.js) */
.toc-rail a, .legal-toc a { box-shadow: inset 2px 0 0 transparent; padding-left: 10px; }
.toc-rail a.is-active, .legal-toc a.is-active { box-shadow: inset 2px 0 0 var(--akj-orange); }
@media (prefers-reduced-motion: no-preference) { .toc-rail a, .legal-toc a { transition: box-shadow 240ms var(--a-out); } }
/* band (03, H-092-01 reply): an Onyx band never wipes its ground (white copy would sit on white); its map grid layer
   wipes in and a 2 px orange top rule draws from the left. The rule is a fill (orange as a rule, never text) */
.cov-band { position: relative; }
.cov-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1; background-color: var(--akj-orange); color: var(--akj-onyx); transform-origin: left; }
.a-pre[data-anim="band"]::before { transform: scaleX(0); }
.a-in[data-anim="band"]::before { transform: none; transition: transform .8s var(--a-out); }
.a-pre[data-anim="band"] .akj-map .g { clip-path: inset(0 100% 0 0); }
.a-in[data-anim="band"] .akj-map .g { clip-path: inset(0 0 0 0); transition: clip-path calc(.9s * var(--a-k)) var(--a-io); }
/* R-022 N-1 / N-2: blocks already on the first screen at load move with keyframes from the first frame, as the heroes do */
@keyframes a-wipe { from { transform: scaleX(0); } }
:root:is([data-motion="desktop"], [data-motion="phone"]) #contact.sec--grey { background-color: transparent; position: relative; isolation: isolate; }
:root:is([data-motion="desktop"], [data-motion="phone"]) #contact.sec--grey::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--akj-light-grey); transform-origin: left; animation: a-wipe calc(.9s * var(--a-k)) var(--a-io) 200ms both; }
:root:is([data-motion="desktop"], [data-motion="phone"]) #contact .contact-card { --a-y: 24px; animation: a-rise .9s var(--a-out) 350ms both; }
:root:is([data-motion="desktop"], [data-motion="phone"]) body:has(.nf) .site-footer::before { transform-origin: left; animation: a-wipe .8s var(--a-out) .9s both; }
:root:is([data-motion="desktop"], [data-motion="phone"]) body:has(.nf) .footer-grid > * { animation: a-rise calc(.7s * var(--a-k)) var(--a-out) both; }
:root:is([data-motion="desktop"], [data-motion="phone"]) body:has(.nf) .footer-grid > :nth-child(2) { animation-delay: 70ms; }
:root:is([data-motion="desktop"], [data-motion="phone"]) body:has(.nf) .footer-grid > :nth-child(3) { animation-delay: 140ms; }
:root:is([data-motion="desktop"], [data-motion="phone"]) body:has(.nf) .footer-grid > :nth-child(4) { animation-delay: 210ms; }
/* H-096-11: no WhatsApp cell until WhatsApp Business is set up: Call + Quote, or Call alone on the quote page */
.mobile-sticky-bar.mobile-sticky-bar--cq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mobile-sticky-bar.mobile-sticky-bar--one { grid-template-columns: minmax(0, 1fr); }