/* ==========================================================================
   Apex Cyber - Base & Layout
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* clears the sticky header on anchor jumps */
}

body {
  font-family: var(--ac-font-body);
  font-size: var(--ac-step-0);
  line-height: 1.65;
  color: var(--ac-fg);
  background: var(--ac-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--ac-font-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: var(--ac-step-5); }
h2 { font-size: var(--ac-step-4); }
h3 { font-size: var(--ac-step-2); }
h4 { font-size: var(--ac-step-1); }

p { text-wrap: pretty; }
p, li { max-width: 68ch; }

a { color: var(--ac-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ac-accent-hi); }

/* Long tokens (URLs, IDs) reflow instead of blowing out the layout */
.ac-breakable { overflow-wrap: anywhere; }

/* --- Focus: visible, high-contrast, never removed --- */
:focus-visible {
  outline: 3px solid var(--ac-accent);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.ac-skip-link {
  position: absolute; left: var(--ac-sp-4); top: -100px;
  z-index: var(--ac-z-modal);
  background: var(--ac-accent); color: var(--ac-on-accent);
  padding: var(--ac-sp-3) var(--ac-sp-5);
  border-radius: var(--ac-radius-sm);
  font-weight: 600; text-decoration: none;
  transition: top var(--ac-dur) var(--ac-ease);
}
.ac-skip-link:focus { top: var(--ac-sp-4); color: var(--ac-on-accent); }

.ac-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Layout primitives --- */
.ac-container {
  width: 100%;
  max-width: var(--ac-container);
  margin-inline: auto;
  padding-inline: var(--ac-gutter);
}
.ac-container--wide { max-width: 1400px; }

.ac-section { padding-block: var(--ac-section-y); position: relative; }
.ac-section--tight { padding-block: calc(var(--ac-section-y) * 0.6); }
.ac-section--surface { background: var(--ac-surface); }

.ac-stack > * + * { margin-top: var(--ac-sp-4); }
.ac-grid { display: grid; gap: var(--ac-sp-5); }

/* --- Section heading block --- */
.ac-section-head { max-width: 46rem; margin-bottom: var(--ac-sp-7); }
.ac-section-head--center { margin-inline: auto; text-align: center; }
.ac-section-head--center p { margin-inline: auto; }
.ac-section-head p {
  color: var(--ac-fg-muted);
  font-size: var(--ac-step-1);
  margin-top: var(--ac-sp-4);
}

/* --- Eyebrow: pill + live dot, lifted from the reference art direction --- */
.ac-eyebrow {
  display: inline-flex; align-items: center; gap: var(--ac-sp-2);
  font-family: var(--ac-font-head);
  font-size: var(--ac-step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-fg-muted);
  background: var(--ac-surface-2);
  border: 1px solid var(--ac-border);
  border-radius: 100px;
  padding: 0.4rem 0.9rem;
  margin-bottom: var(--ac-sp-5);
}
.ac-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ac-accent);
  box-shadow: 0 0 0 3px rgb(240 130 30 / 0.18);
  flex: none;
}

/* Accent word inside a heading */
.ac-hl { color: var(--ac-accent); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.ac-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ac-sp-2);
  min-height: 48px;              /* comfortably over the 44px target floor */
  padding: 0.75rem 1.5rem;
  font-family: var(--ac-font-head);
  font-size: var(--ac-step-0);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--ac-radius-sm);
  cursor: pointer;
  transition: background var(--ac-dur) var(--ac-ease),
              border-color var(--ac-dur) var(--ac-ease),
              color var(--ac-dur) var(--ac-ease),
              transform var(--ac-dur-fast) var(--ac-ease);
}
.ac-btn:active { transform: translateY(1px); }

.ac-btn--primary { background: var(--ac-accent); color: var(--ac-on-accent); }
.ac-btn--primary:hover { background: var(--ac-accent-hi); color: var(--ac-on-accent); }

.ac-btn--ghost {
  background: transparent; color: var(--ac-fg);
  border-color: var(--ac-border-strong);
}
.ac-btn--ghost:hover { border-color: var(--ac-accent); color: var(--ac-accent-hi); background: rgb(240 130 30 / 0.06); }

.ac-btn--block { width: 100%; }
.ac-btn[disabled], .ac-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.ac-btn .ac-btn__spinner { display: none; }
.ac-btn[data-loading="true"] .ac-btn__spinner { display: inline-block; }

.ac-btn-row { display: flex; flex-wrap: wrap; gap: var(--ac-sp-4); }

/* Arrow link */
.ac-arrow-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--ac-font-head); font-weight: 600;
  text-decoration: none; color: var(--ac-accent);
  min-height: 44px;
}
.ac-arrow-link svg { transition: transform var(--ac-dur) var(--ac-ease); flex: none; }
.ac-arrow-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.ac-header {
  position: sticky; top: 0; z-index: var(--ac-z-nav);
  background: rgb(10 13 18 / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ac-border);
  transition: border-color var(--ac-dur) var(--ac-ease);
}
.ac-header__inner {
  display: flex; align-items: center; gap: var(--ac-sp-5);
  min-height: 72px;
  flex-wrap: nowrap;
}
/* Let the brand compress rather than push the toggle off-screen. */
.ac-brand { min-width: 0; }
.ac-brand img { max-width: 100%; }
.ac-brand { display: inline-flex; align-items: center; flex-shrink: 1; }
.ac-brand img { width: 158px; height: auto; }

.ac-nav { margin-left: auto; margin-right: var(--ac-sp-3); }
.ac-nav__list {
  display: flex; align-items: center; gap: var(--ac-sp-2);
  list-style: none; padding: 0; margin: 0;
}
.ac-nav__list a {
  display: flex; align-items: center;
  min-height: 44px; padding: 0 var(--ac-sp-4);
  font-family: var(--ac-font-head); font-weight: 500;
  font-size: var(--ac-step-0);
  color: var(--ac-fg); text-decoration: none;
  border-radius: var(--ac-radius-sm);
  position: relative;
  transition: color var(--ac-dur) var(--ac-ease), background var(--ac-dur) var(--ac-ease);
}
.ac-nav__list a:hover { color: var(--ac-accent-hi); background: rgb(255 255 255 / 0.04); }

/* Current page: not colour alone - an underline bar carries it too */
.ac-nav__list .current-menu-item > a,
.ac-nav__list .current_page_item > a,
.ac-nav__list [aria-current="page"] { color: var(--ac-accent); }
.ac-nav__list .current-menu-item > a::after,
.ac-nav__list .current_page_item > a::after,
.ac-nav__list [aria-current="page"]::after {
  content: ''; position: absolute; left: var(--ac-sp-4); right: var(--ac-sp-4); bottom: 6px;
  height: 2px; background: var(--ac-accent); border-radius: 2px;
}

/* Phone number - prominent, as requested */
.ac-nav-phone {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--ac-sp-2);
  min-height: 44px; padding: 0 var(--ac-sp-4);
  font-family: var(--ac-font-head); font-weight: 600;
  color: var(--ac-fg); text-decoration: none;
  border: 1px solid var(--ac-border-strong);
  border-radius: var(--ac-radius-sm);
  white-space: nowrap;
  transition: border-color var(--ac-dur) var(--ac-ease), color var(--ac-dur) var(--ac-ease);
}
.ac-nav-phone__label {
  color: var(--ac-fg-muted); font-weight: 500;
  font-size: var(--ac-step--1);
  padding-right: var(--ac-sp-2);
  border-right: 1px solid var(--ac-border-strong);
}
.ac-nav-phone:hover { border-color: var(--ac-accent); color: var(--ac-accent-hi); }
.ac-nav-phone svg { flex: none; color: var(--ac-accent); }

.ac-nav-toggle {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--ac-border-strong);
  border-radius: var(--ac-radius-sm); color: var(--ac-fg); cursor: pointer;
}

/* Below 1024px the menu goes off-canvas, but the phone stays in the bar. */
@media (max-width: 1024px) {
  /* backdrop-filter on an ancestor makes it the containing block for
     position:fixed descendants, which collapses the off-canvas panel into the
     header box. Drop the blur below the off-canvas breakpoint and paint the
     header solid instead. */
  .ac-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--ac-bg);
  }
  .ac-nav-toggle { display: inline-flex; margin-left: var(--ac-sp-3); }
  .ac-nav-phone { margin-left: auto; }
  .ac-nav {
    z-index: var(--ac-z-overlay);
    position: fixed; inset: 0 0 0 auto;
    width: min(360px, 86vw);
    background: var(--ac-surface);
    border-left: 1px solid var(--ac-border);
    padding: 88px var(--ac-sp-5) var(--ac-sp-6);
    transform: translateX(100%);
    transition: transform var(--ac-dur-slow) var(--ac-ease-out);
    overflow-y: auto;
    margin-left: 0; margin-right: 0;
  }
  .ac-nav[data-open="true"] { transform: translateX(0); }
  .ac-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .ac-nav__list a { min-height: 56px; padding-inline: var(--ac-sp-3); border-bottom: 1px solid var(--ac-border); border-radius: 0; }
  .ac-nav__list .current-menu-item > a::after,
  .ac-nav__list .current_page_item > a::after { left: var(--ac-sp-3); right: auto; width: 20px; bottom: 10px; }
  .ac-nav__cta { margin-top: var(--ac-sp-5); }
  .ac-nav-scrim {
    position: fixed; inset: 0; background: rgb(0 0 0 / 0.6);
    z-index: calc(var(--ac-z-nav) - 1); border: 0; padding: 0; cursor: pointer;
  }
}
@media (min-width: 1025px) {
  .ac-nav-scrim { display: none; }
  /* The in-menu CTA belongs to the off-canvas panel only; on desktop the
     phone button and hero CTAs already cover it. */
  .ac-nav__cta { display: none; }
}

@media (max-width: 620px) {
  .ac-nav-phone__label { display: none; }
  .ac-nav-phone { padding-inline: var(--ac-sp-3); gap: var(--ac-sp-1); }
  .ac-brand img { width: 124px; }
  .ac-header__inner { gap: var(--ac-sp-2); min-height: 64px; }
}
/* Keep the number itself visible at every width - it is the point of the
   element, and hiding it would leave an icon-only link with no accessible
   name. Shrink the surrounding furniture instead. */
@media (max-width: 440px) {
  .ac-brand img { width: 104px; }
  .ac-nav-phone { font-size: var(--ac-step--1); padding-inline: var(--ac-sp-2); }
  .ac-nav-toggle { width: 44px; height: 44px; margin-left: var(--ac-sp-2); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.ac-hero { position: relative; isolation: isolate; overflow: hidden; }
.ac-hero__media { position: absolute; inset: 0; z-index: -2; }
.ac-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ac-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, var(--ac-bg) 22%, rgb(10 13 18 / 0.82) 48%, rgb(10 13 18 / 0.45) 100%),
    linear-gradient(to top, var(--ac-bg) 2%, transparent 42%);
}
.ac-hero__inner {
  padding-block: clamp(4rem, 2rem + 10vw, 8.5rem) clamp(3rem, 1.5rem + 7vw, 6rem);
  max-width: 44rem;
}

/* The hero already ends on generous padding. When a section follows it
   directly on the same background, the two paddings stack into a large void,
   so trim the follower's top padding. */
.ac-hero + .ac-section { padding-top: calc(var(--ac-section-y) * 0.55); }
.ac-hero h1 { margin-bottom: var(--ac-sp-5); }
.ac-hero__lede {
  font-size: var(--ac-step-1);
  color: var(--ac-fg-muted);
  margin-bottom: var(--ac-sp-6);
  max-width: 38rem;
}
.ac-hero__points {
  list-style: none; padding: 0; margin: var(--ac-sp-6) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--ac-sp-3) var(--ac-sp-5);
}
.ac-hero__points li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--ac-step--1); color: var(--ac-fg-muted);
  max-width: none;
}
.ac-hero__points svg { color: var(--ac-accent); flex: none; }

/* ==========================================================================
   Cards
   ========================================================================== */
.ac-card {
  position: relative;
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  padding: var(--ac-sp-6);
  height: 100%;
  display: flex; flex-direction: column;
  transition: border-color var(--ac-dur) var(--ac-ease), background var(--ac-dur) var(--ac-ease);
}
.ac-card:hover { border-color: var(--ac-border-strong); background: var(--ac-surface-2); }

/* Corner bracket - echoes the reticle geometry in the logo mark */
.ac-card::after {
  content: ''; position: absolute; top: -1px; right: -1px;
  width: 18px; height: 18px;
  border-top: 2px solid var(--ac-accent);
  border-right: 2px solid var(--ac-accent);
  border-top-right-radius: var(--ac-radius);
  opacity: 0; transition: opacity var(--ac-dur) var(--ac-ease);
}
.ac-card:hover::after, .ac-card:focus-within::after { opacity: 1; }

.ac-card__icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--ac-radius-sm);
  background: rgb(240 130 30 / 0.1);
  border: 1px solid rgb(240 130 30 / 0.22);
  color: var(--ac-accent);
  margin-bottom: var(--ac-sp-5);
}
.ac-card h3 { margin-bottom: var(--ac-sp-3); }
.ac-card p { color: var(--ac-fg-muted); font-size: var(--ac-step-0); }
.ac-card__foot { margin-top: auto; padding-top: var(--ac-sp-5); }

/* Stretched link: whole card is the target, link text stays the accessible name */
.ac-card__link::before { content: ''; position: absolute; inset: 0; z-index: 1; }

.ac-cards-3 { display: grid; gap: var(--ac-sp-5); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ac-cards-2 { display: grid; gap: var(--ac-sp-5); grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

/* ==========================================================================
   Split media section
   ========================================================================== */
.ac-split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .ac-split { grid-template-columns: 1fr 1fr; }
  .ac-split--reverse .ac-split__media { order: 2; }
}
.ac-split__media { position: relative; border-radius: var(--ac-radius-lg); overflow: hidden; }
.ac-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Dark grade so bright stock photography sits inside the dark theme */
.ac-split__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgb(10 13 18 / 0.12), rgb(10 13 18 / 0.5));
  pointer-events: none;
}
.ac-split__body h2 { margin-bottom: var(--ac-sp-5); }
.ac-split__body p { color: var(--ac-fg-muted); }
.ac-split__body > * + * { margin-top: var(--ac-sp-4); }

.ac-checklist { list-style: none; padding: 0; margin-top: var(--ac-sp-5); display: grid; gap: var(--ac-sp-3); }
.ac-checklist li { display: flex; gap: var(--ac-sp-3); align-items: flex-start; color: var(--ac-fg-muted); }
.ac-checklist svg { color: var(--ac-accent); flex: none; margin-top: 4px; }

/* ==========================================================================
   Process steps
   ========================================================================== */
.ac-steps { display: grid; gap: var(--ac-sp-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); counter-reset: acstep; }
.ac-step {
  position: relative;
  padding: var(--ac-sp-6) var(--ac-sp-5);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  background: var(--ac-surface);
}
.ac-step__num {
  font-family: var(--ac-font-head);
  font-size: var(--ac-step-3);
  font-weight: 700;
  color: var(--ac-accent);
  line-height: 1;
  display: block;
  margin-bottom: var(--ac-sp-4);
}
.ac-step h3 { font-size: var(--ac-step-1); margin-bottom: var(--ac-sp-3); }
.ac-step p { color: var(--ac-fg-muted); font-size: var(--ac-step-0); }

/* ==========================================================================
   Node ornament - derived from the network/padlock geometry in the logo
   ========================================================================== */
.ac-node-rule {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-block: var(--ac-sp-7);
  color: var(--ac-border);
}
.ac-node-rule::before, .ac-node-rule::after {
  content: ''; height: 1px; flex: 1 1 auto; max-width: 180px;
  background: linear-gradient(to right, transparent, var(--ac-border));
}
.ac-node-rule::after { background: linear-gradient(to left, transparent, var(--ac-border)); }
.ac-node-rule svg { color: var(--ac-accent); margin-inline: var(--ac-sp-4); flex: none; }

/* ==========================================================================
   Industries
   ========================================================================== */
.ac-industry {
  position: relative; overflow: hidden;
  border-radius: var(--ac-radius-lg);
  border: 1px solid var(--ac-border);
  min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--ac-sp-6);
  isolation: isolate;
  transition: border-color var(--ac-dur) var(--ac-ease);
}
.ac-industry:hover { border-color: var(--ac-accent); }
.ac-industry__media { position: absolute; inset: 0; z-index: -2; }
.ac-industry__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ac-dur-slow) var(--ac-ease-out); }
.ac-industry:hover .ac-industry__media img { transform: scale(1.04); }
.ac-industry::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(10 13 18 / 0.96) 18%, rgb(10 13 18 / 0.72) 52%, rgb(10 13 18 / 0.35) 100%);
}
/* Sized so the longest label ("Transport & Logistics") stays on one line at
   card width; otherwise it wraps to two and its first line sits higher than
   the single-line titles beside it. */
.ac-industry h3 {
  margin-bottom: var(--ac-sp-3);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  text-wrap: nowrap;
}
@media (max-width: 420px) {
  /* Single column here, so wrapping costs nothing and beats overflow. */
  .ac-industry h3 { text-wrap: balance; }
}
.ac-industry p { color: var(--ac-fg-muted); font-size: var(--ac-step-0); }
.ac-industry__tags { list-style: none; padding: 0; margin: 0 0 var(--ac-sp-4); display: flex; flex-wrap: wrap; gap: var(--ac-sp-2); }
.ac-industry__tags li {
  font-size: var(--ac-step--1); color: var(--ac-fg-muted); max-width: none;
  border: 1px solid var(--ac-border-strong); border-radius: 100px; padding: 0.2rem 0.7rem;
  background: rgb(10 13 18 / 0.55);
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.ac-cta-band { position: relative; isolation: isolate; overflow: hidden; border-block: 1px solid var(--ac-border); }
.ac-cta-band__media { position: absolute; inset: 0; z-index: -2; }
.ac-cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.ac-cta-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--ac-bg) 30%, rgb(10 13 18 / 0.86) 65%, rgb(10 13 18 / 0.6));
}
.ac-cta-band__inner { padding-block: clamp(3rem, 2rem + 5vw, 5.5rem); max-width: 42rem; }
.ac-cta-band h2 { margin-bottom: var(--ac-sp-4); }
.ac-cta-band p { color: var(--ac-fg-muted); font-size: var(--ac-step-1); margin-bottom: var(--ac-sp-6); }

/* ==========================================================================
   Footer
   ========================================================================== */
.ac-footer { background: var(--ac-surface); border-top: 1px solid var(--ac-border); padding-block: var(--ac-sp-8) var(--ac-sp-6); }
.ac-footer__grid { display: grid; gap: var(--ac-sp-7); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ac-footer__brand img { width: 170px; margin-bottom: var(--ac-sp-4); }
.ac-footer__brand p { color: var(--ac-fg-muted); font-size: var(--ac-step--1); }
.ac-footer h2 {
  font-size: var(--ac-step--1); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ac-fg); margin-bottom: var(--ac-sp-4); font-weight: 600;
}
.ac-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ac-sp-1); }
.ac-footer ul a, .ac-footer address a {
  color: var(--ac-fg-muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 36px; font-size: var(--ac-step-0);
}
.ac-footer ul a:hover, .ac-footer address a:hover { color: var(--ac-accent-hi); }
.ac-footer address { font-style: normal; color: var(--ac-fg-muted); display: grid; gap: var(--ac-sp-1); }
.ac-footer__bottom {
  margin-top: var(--ac-sp-7); padding-top: var(--ac-sp-5);
  border-top: 1px solid var(--ac-border);
  display: flex; flex-wrap: wrap; gap: var(--ac-sp-4); justify-content: space-between;
  color: var(--ac-fg-faint); font-size: var(--ac-step--1);
}
.ac-footer__bottom a { color: var(--ac-fg-muted); text-decoration: none; }
.ac-footer__bottom a:hover { color: var(--ac-accent-hi); }

/* ==========================================================================
   Forms
   ========================================================================== */
.ac-form { display: grid; gap: var(--ac-sp-5); }
.ac-field { display: grid; gap: var(--ac-sp-2); }
.ac-field label { font-weight: 500; font-size: var(--ac-step-0); color: var(--ac-fg); }
.ac-field .ac-req { color: var(--ac-accent); margin-left: 2px; }
.ac-field__hint { font-size: var(--ac-step--1); color: var(--ac-fg-muted); }

.ac-input, .ac-select, .ac-textarea {
  width: 100%;
  min-height: 48px;                 /* touch-friendly */
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: max(16px, var(--ac-step-0)); /* 16px min stops iOS zoom-on-focus */
  color: var(--ac-fg);
  background: var(--ac-bg);
  border: 1px solid var(--ac-border-strong);  /* 3:1 - meets non-text contrast */
  border-radius: var(--ac-radius-sm);
  transition: border-color var(--ac-dur) var(--ac-ease), background var(--ac-dur) var(--ac-ease);
}
.ac-textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.ac-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA7B8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.5rem; }
.ac-input::placeholder, .ac-textarea::placeholder { color: var(--ac-fg-faint); }
.ac-input:hover, .ac-select:hover, .ac-textarea:hover { border-color: var(--ac-fg-faint); }

/* Invalid state: colour + icon + text, never colour alone */
.ac-input[aria-invalid="true"], .ac-select[aria-invalid="true"], .ac-textarea[aria-invalid="true"] {
  border-color: var(--ac-danger);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FF6B6B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center;
  padding-right: 2.75rem;
}
.ac-textarea[aria-invalid="true"] { background-position: right 0.9rem top 0.8rem; }

.ac-field__error {
  display: flex; align-items: flex-start; gap: 0.4rem;
  color: var(--ac-danger); font-size: var(--ac-step--1); font-weight: 500;
}
.ac-field__error svg { flex: none; margin-top: 3px; }

/* Error summary - focus target after a failed submit */
.ac-form-summary {
  border: 1px solid var(--ac-danger);
  background: rgb(255 107 107 / 0.08);
  border-radius: var(--ac-radius);
  padding: var(--ac-sp-5);
}
.ac-form-summary:focus-visible { outline: 3px solid var(--ac-danger); outline-offset: 3px; }
.ac-form-summary h2 { font-size: var(--ac-step-1); color: var(--ac-fg); margin-bottom: var(--ac-sp-3); }
.ac-form-summary ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--ac-sp-1); }
.ac-form-summary a { color: var(--ac-danger); }

.ac-form-success {
  border: 1px solid var(--ac-success);
  background: rgb(74 222 128 / 0.08);
  border-radius: var(--ac-radius);
  padding: var(--ac-sp-6);
}
.ac-form-success h2 { font-size: var(--ac-step-2); margin-bottom: var(--ac-sp-3); }
.ac-form-success p { color: var(--ac-fg-muted); }

/* Honeypot - off-screen, never display:none (bots skip hidden fields) */
.ac-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ac-turnstile { min-height: 65px; }
.ac-form__consent { font-size: var(--ac-step--1); color: var(--ac-fg-muted); }

/* Contact layout */
.ac-contact-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (min-width: 900px) { .ac-contact-grid { grid-template-columns: 1.15fr 0.85fr; } }
.ac-contact-aside { display: grid; gap: var(--ac-sp-5); }
.ac-contact-card { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: var(--ac-sp-6); }
.ac-contact-card h2 { font-size: var(--ac-step-1); margin-bottom: var(--ac-sp-4); }
.ac-contact-card a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; text-decoration: none; font-weight: 500; }
.ac-contact-card p { color: var(--ac-fg-muted); font-size: var(--ac-step-0); }

/* ==========================================================================
   Scroll reveal - opacity/transform only, no layout properties
   ========================================================================== */
/* Scoped to .js: without JavaScript these elements are never revealed, so
   hiding them unconditionally would make the content permanently invisible.
   The .js class is set by an inline script in <head>. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--ac-dur-slow) var(--ac-ease-out), transform var(--ac-dur-slow) var(--ac-ease-out);
}
.js [data-reveal-stagger].is-visible > * { animation: ac-rise var(--ac-dur-slow) var(--ac-ease-out) backwards; }
[data-reveal-stagger].is-visible > *:nth-child(1) { animation-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { animation-delay: 60ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { animation-delay: 120ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { animation-delay: 180ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { animation-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { animation-delay: 300ms; }
@keyframes ac-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Reduced motion - final state rendered immediately
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .ac-industry:hover .ac-industry__media img { transform: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .ac-header, .ac-footer, .ac-cta-band, .ac-nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* ==========================================================================
   Interior page hero - shorter than the homepage hero
   ========================================================================== */
.ac-hero__inner--page { padding-block: clamp(3rem, 2rem + 6vw, 5.5rem); max-width: 50rem; }
.ac-hero--page h1 { font-size: var(--ac-step-4); }

/* The lifted-summary paragraph that answer engines are pointed at */
.ac-answer { line-height: 1.6; }

/* Industry cards bottom-align their body; the auto margin from .ac-card__foot
   would fight that, so neutralise it here. */
.ac-industry .ac-card__foot { margin-top: var(--ac-sp-4); padding-top: 0; }

/* Because the card content is anchored to the bottom, any variation in blurb
   or link height pushes the heading up and the three titles stop lining up.
   The copy is written to a matching length; this floor holds the alignment
   even if one blurb wraps shorter. Only needed once the cards sit side by
   side. */
@media (min-width: 900px) {
  .ac-industry p { min-height: calc(2 * 1.65em); }
}

/* Icon badge sits above the heading in split bodies */
.ac-split__body .ac-card__icon { margin-bottom: var(--ac-sp-4); }
.ac-split__body > .ac-card__icon + h2 { margin-top: 0; }

/* ==========================================================================
   Editor content (default page template)
   ========================================================================== */
.ac-entry h2 { font-size: var(--ac-step-3); margin-top: var(--ac-sp-7); }
.ac-entry h3 { margin-top: var(--ac-sp-6); }
.ac-entry p, .ac-entry li { color: var(--ac-fg-muted); }
.ac-entry ul, .ac-entry ol { padding-left: 1.25rem; display: grid; gap: var(--ac-sp-2); }
.ac-entry blockquote {
  border-left: 3px solid var(--ac-accent);
  padding-left: var(--ac-sp-5);
  color: var(--ac-fg);
  font-size: var(--ac-step-1);
}
.ac-entry table { width: 100%; border-collapse: collapse; }
.ac-entry th, .ac-entry td { border: 1px solid var(--ac-border); padding: var(--ac-sp-3); text-align: left; }
.ac-entry th { background: var(--ac-surface-2); font-family: var(--ac-font-head); }
.ac-entry code {
  background: var(--ac-surface-2); border: 1px solid var(--ac-border);
  border-radius: 4px; padding: 0.1em 0.4em; font-size: 0.9em;
}
/* Wide content scrolls inside its own box rather than the page body */
.ac-entry .wp-block-table, .ac-entry pre { overflow-x: auto; max-width: 100%; }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination { display: flex; gap: var(--ac-sp-2); flex-wrap: wrap; margin-top: var(--ac-sp-7); }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--ac-sp-3);
  border: 1px solid var(--ac-border-strong); border-radius: var(--ac-radius-sm);
  color: var(--ac-fg); text-decoration: none;
}
.pagination .page-numbers.current { background: var(--ac-accent); color: var(--ac-on-accent); border-color: var(--ac-accent); }

/* WordPress admin bar offset for the sticky header */
body.admin-bar .ac-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ac-header { top: 46px; } }