/* ============================================================================
   ANDECO Production stylesheet
   Component classes (Button, Eyebrow, Card, Badge, Icon, Input, Select,
   Checkbox) recreated from the ANDECO Design System, plus site layout,
   the dark marketing surfaces, and shared interaction styles.
   Depends on the token custom properties in colors/typography/spacing/base.css.
   ========================================================================= */

/* ---- Dark marketing site defaults ------------------------------------- */
body { margin: 0; background: #070f22; }

/* [hidden] must win over component display rules (tab panels toggle via it). */
[hidden] { display: none !important; }

/* Links on the dark surfaces (component classes below override for chrome). */
a { color: var(--electric-blue); text-decoration: none; }
a:hover { color: #ffffff; text-decoration: none; }

/* Visible focus ring for keyboard users on every interactive control. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid transparent;   /* paints in forced-colors mode */
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* On the white card the cyan ring alone is 1.6:1, so add a dark inner ring. */
.card :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring-on-light), 0 0 0 5px var(--focus-ring);
}
/* L-5b: re-assert at matching specificity so nothing later in the file can strip
   the outline off a form control. box-shadow alone is discarded in High Contrast,
   so the outline is the only indicator that survives there. */
.field__box input:focus-visible,
.field__box--select select:focus-visible,
.andeco-textarea:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 2px;
}
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}

/* ---- Layout helpers --------------------------------------------------- */
.container { max-width: var(--container-xl); margin: 0 auto; padding: 0 40px; width: 100%; }
.section { padding: clamp(80px, 10vh, 120px) 40px; }
.section--tight { padding: clamp(60px, 8vh, 90px) 40px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Icon ------------------------------------------------------------- */
.icon { object-fit: contain; display: inline-block; }

/* ---- Eyebrow ---------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--eyebrow-font); font-weight: var(--eyebrow-weight);
  font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase; color: var(--andeco-blue);
}
.eyebrow--on-dark { color: var(--electric-blue); }
.eyebrow--muted { color: var(--text-muted); }
.eyebrow__mark { width: 8px; height: 13px; overflow: visible; flex: 0 0 auto; }

/* ---- Button ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); font-family: var(--body-font);
  font-weight: var(--weight-semibold); letter-spacing: 0.01em;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 0 14px; height: 34px; font-size: var(--text-sm); }
.btn--md { padding: 0 20px; height: 44px; font-size: var(--text-base); }
.btn--lg { padding: 0 28px; height: 54px; font-size: var(--text-md); }
.btn--full { width: 100%; }
.btn--primary { background: var(--action-primary); color: var(--action-primary-text); border-color: var(--action-primary); }
.btn--primary:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); color: var(--action-primary-text); }
.btn--dark { background: var(--marian-blue); color: var(--white); border-color: var(--marian-blue); }
.btn--dark:hover { background: var(--blue-800); border-color: var(--blue-800); color: var(--white); }
.btn--secondary { background: var(--surface-card); color: var(--action-secondary-text); border-color: var(--action-secondary-border); }
.btn--secondary:hover { background: var(--action-secondary-hover-bg); color: var(--action-secondary-text); }
.btn--ghost { background: transparent; color: var(--action-secondary-text); border-color: transparent; }
.btn--ghost:hover { background: var(--action-secondary-hover-bg); }

/* ---- Card ------------------------------------------------------------- */
.card { border-radius: var(--radius-lg); padding: var(--space-6); }
.card--default { background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); color: var(--text-body); }
.card--outline { background: var(--surface-card); border: 1px solid var(--border-default); color: var(--text-body); }
.card--accent  { background: var(--surface-accent); border: 1px solid var(--blue-100); color: var(--text-body); }
.card--brand   { background: var(--surface-brand); border: 1px solid var(--marian-blue); box-shadow: var(--shadow-lg); color: var(--text-on-dark); }
.card--pad-8 { padding: var(--space-8); }

/* ---- Badge ------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body-font); font-weight: var(--weight-semibold);
  font-size: var(--text-xs); letter-spacing: 0.02em; line-height: 1;
  padding: 5px 10px; border-radius: var(--radius-pill);
}
.badge--blue { background: var(--action-primary); color: var(--white); }   /* L-5a: white text needs 4.5:1 */

/* ---- Form fields (Input / Select / textarea) -------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-family: var(--body-font); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-strong); }
.field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.field__box {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-card); border: 1px solid var(--ink-500);
  border-radius: var(--radius-sm); padding: 0 14px; height: 44px;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.field__box:focus-within { border-color: var(--andeco-blue); box-shadow: var(--shadow-focus); }
.field__box input {
  border: none; background: transparent;
  font-family: var(--body-font); font-size: var(--text-base);
  color: var(--text-strong); width: 100%; height: 100%;
}
.field__box--select { position: relative; padding: 0; }
.field__box, .andeco-textarea, .m-stack > * { min-width: 0; }   /* L-9c: default min-width:auto on flex/grid children caused a 39px page pan on contact.html at 320px */
.field__box--select select { min-width: 0;
  appearance: none; -webkit-appearance: none; border: none;
  background: transparent; font-family: var(--body-font); font-size: var(--text-base);
  color: var(--text-strong); width: 100%; height: 100%;
  padding: 0 38px 0 14px; cursor: pointer;
}
.field__chevron { position: absolute; right: 12px; pointer-events: none; }
.andeco-textarea {
  font-family: var(--body-font); font-size: 15px; color: var(--text-strong);
  border: 1px solid var(--ink-500); border-radius: var(--radius-md);
  padding: 12px 14px; width: 100%; box-sizing: border-box; resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.andeco-textarea:focus { border-color: var(--andeco-blue); box-shadow: var(--shadow-focus); }

/* ---- Checkbox --------------------------------------------------------- */
.checkbox { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-family: var(--body-font); font-size: var(--text-base); color: var(--text-body); }
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__box {
  width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; border-radius: var(--radius-xs);
  border: 1.5px solid var(--ink-500); background: var(--surface-card);   /* L-5c: 4.86:1, was --border-strong at 2.05:1 */
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.checkbox__box svg { opacity: 0; }
.checkbox input:checked + .checkbox__box { background: var(--andeco-blue); border-color: var(--andeco-blue); }
.checkbox input:checked + .checkbox__box svg { opacity: 1; }
.checkbox input:focus-visible + .checkbox__box { box-shadow: 0 0 0 2px var(--focus-ring-on-light), 0 0 0 5px var(--focus-ring); }   /* L-5b: span, so the .card :is() rule misses it */

/* ---- Site header ------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 240ms var(--ease-standard), border-color 240ms var(--ease-standard), backdrop-filter 240ms var(--ease-standard);
}
.site-header.is-scrolled {
  background: rgba(9,17,38,0.82);
  border-bottom-color: rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-header__inner { max-width: var(--container-xl); margin: 0 auto; padding: 0 40px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 26px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 36px; }
.nav-link { font-family: var(--body-font); font-size: 15px; color: rgba(255,255,255,0.82); font-weight: 400; text-decoration: none; transition: color 160ms var(--ease-standard); }
.nav-link:hover { color: #ffffff; text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--electric-blue); font-weight: 600; }
.site-header__cta { display: flex; align-items: center; }
.nav-link--cta { display: none; }   /* drawer-only; the header button covers desktop */
.nav-toggle { display: none; }

/* ---- Site footer ------------------------------------------------------ */
.site-footer { background: var(--blue-950); color: rgba(255,255,255,0.82); }
.site-footer__grid { max-width: var(--container-xl); margin: 0 auto; padding: 64px 40px 32px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.site-footer__col { display: flex; flex-direction: column; gap: 14px; }
.site-footer__blurb { display: flex; flex-direction: column; gap: 16px; }
.site-footer__blurb img { height: 24px; width: auto; }
.site-footer__blurb p { font-family: var(--body-font); font-size: 14px; line-height: 1.65; max-width: 320px; margin: 0; }
.site-footer__heading { font-family: var(--body-font); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.5); }
.foot-link { color: rgba(255,255,255,0.82); text-decoration: none; font-size: 14px; font-family: var(--body-font); }
.foot-link:hover { color: #ffffff; text-decoration: none; }
.site-footer__span { font-family: var(--body-font); font-size: 14px; }
.site-footer__bar { max-width: var(--container-xl); margin: 0 auto; padding: 20px 40px; border-top: 1px solid rgba(255,255,255,0.14); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.site-footer__bar span { font-family: var(--body-font); font-size: 12.5px; color: rgba(255,255,255,0.5); }

/* ---- Scroll reveal ---------------------------------------------------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- Noise → signal slider ------------------------------------------- */
input[type=range].andeco-scrub { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--andeco-blue), var(--electric-blue)); outline: none; }
input[type=range].andeco-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--andeco-blue); cursor: grab; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
input[type=range].andeco-scrub::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--andeco-blue); cursor: grab; }

/* ---- Kinetic hero headline ------------------------------------------- */
@keyframes wordUp { from { opacity: 0; transform: translateY(115%); } to { opacity: 1; transform: translateY(0); } }
@keyframes floatCue { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(9px); opacity: 1; } }
.hero-word { display: inline-block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.12em; vertical-align: bottom; }
.hero-word > span { display: inline-block; animation: wordUp .9s cubic-bezier(.16,1,.3,1) both; }
.scroll-cue { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: floatCue 2.4s ease-in-out infinite; }
.scroll-cue span { font-family: var(--body-font); font-size: 11px; letter-spacing: 0.18em; color: rgba(255,255,255,0.6); text-transform: uppercase; }
.scroll-cue__line { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(151,233,242,0.9), transparent); }

/* ---- Home: role pills ------------------------------------------------- */
.role-pill { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.8); }
.role-pill:hover { border-color: rgba(255,255,255,0.32); color: #fff; }
.role-pill.is-active { background: var(--action-primary); border-color: var(--action-primary); color: #fff; }   /* L-5a */

/* ---- Home: who-we-serve preview cards --------------------------------- */
.who-card:hover { background: rgba(86,151,204,0.12) !important; border-color: var(--andeco-blue) !important; transform: translateY(-4px); }

/* ---- Home: lifecycle stage tabs + detail panel ------------------------ */
.stage-tab { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 18px 16px; border-radius: var(--radius-md); cursor: pointer; text-align: left; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12); transition: background .25s var(--ease-standard), border-color .25s var(--ease-standard), transform .25s var(--ease-standard); }
.stage-tab:hover { border-color: rgba(255,255,255,0.28); }
.stage-tab.is-active { background: rgba(86,151,204,0.22); border-color: var(--andeco-blue); }
.stage-tab__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); }   /* L-5e: 0.4 measured 3.78:1 */
.stage-tab.is-active .stage-tab__num { color: var(--electric-blue); }
.stage-tab__name { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.6); }
.stage-tab.is-active .stage-tab__name { color: #fff; }
.stage-panel { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; background: linear-gradient(120deg,rgba(38,68,146,0.28),rgba(10,23,48,0.4)); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: clamp(28px,4vw,48px); }
.stage-panel__badge { width: 96px; height: 96px; flex: 0 0 auto; border-radius: var(--radius-lg); background: rgba(86,151,204,0.16); display: flex; align-items: center; justify-content: center; }
@media (max-width: 860px) { .stage-panel { grid-template-columns: 1fr; } }

/* ---- About: prime/partner posture toggle ------------------------------ */
.posture-btn { flex: 1; padding: 14px; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 600; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.6); transition: all .25s var(--ease-standard); }
.posture-btn.is-active { background: rgba(86,151,204,0.22); border-color: var(--andeco-blue); color: #fff; }

/* ---- Services: capability cards --------------------------------------- */
.cap-card { text-align: left; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 24px; transition: background .25s var(--ease-standard), border-color .25s var(--ease-standard); display: flex; flex-direction: column; gap: 0; }
.cap-card:hover { border-color: rgba(255,255,255,0.28); }
.cap-card.is-active { background: rgba(86,151,204,0.20); border-color: var(--andeco-blue); }
.cap-card__num { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.55); }   /* L-5e */
.cap-card.is-active .cap-card__num { color: var(--electric-blue); }
/* L-8: the disclosure trigger. Inherits the heading's type so the card reads
   exactly as it did when the whole tile was a button. */
.cap-card__toggle {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%;
}
.cap-card__toggle::after { content: ""; position: absolute; inset: 0; }   /* whole card stays clickable */
.cap-card { position: relative; }
.cap-card__detail { position: relative; z-index: 1; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(151,233,242,0.25); }
/* z-index lifts the revealed detail above .cap-card__toggle::after, so the text
   stays selectable and clicking it does not collapse the card. */

/* ---- Who We Serve: audience list -------------------------------------- */
.aud-btn { text-align: left; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius-md); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-left: 3px solid transparent; transition: background .25s var(--ease-standard), border-color .25s var(--ease-standard); }
.aud-btn:hover { border-color: rgba(255,255,255,0.24); }
.aud-btn__name { font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; color: rgba(255,255,255,0.76); }
.aud-btn.is-active { background: rgba(86,151,204,0.18); border-color: rgba(86,151,204,0.5); border-left-color: var(--andeco-blue); }
.aud-btn.is-active .aud-btn__name { color: #fff; }

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-word > span { animation: none !important; }
  .scroll-cue { animation: none !important; }
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 860px) {
  .m-stack { grid-template-columns: 1fr !important; }
  .m-2 { grid-template-columns: repeat(2,1fr) !important; }
  .m-fromto > div { grid-template-columns: 1fr !important; text-align: center; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
/* L-9a: the desktop header needs ~851px to fit. It used to collapse at 720px,
   so 721-859px (including 768px iPad portrait) rendered a wrapped, overflowing
   nav. Now aligned with the 860px breakpoint used everywhere else. */
@media (max-width: 860px) {
  .site-nav { display: none; }
  .site-nav.is-open { display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; background: rgba(9,17,38,0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 8px 40px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .site-nav.is-open .nav-link { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-sm); cursor: pointer; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 18px; height: 2px; background: #fff; position: relative; }
  .nav-toggle span::before { position: absolute; top: -6px; }
  .nav-toggle span::after { position: absolute; top: 6px; }
  /* L-9b: below the breakpoint the drawer used to list only the four nav pages,
     leaving no route to Contact from the header on phones. The button is kept
     and compacted where there is room, and the drawer gains its own link so the
     route survives even where the button cannot fit (see the 560px block). */
  .site-header__cta .btn { height: 38px; padding: 0 14px; font-size: var(--text-sm); }
  .site-nav.is-open .nav-link--cta { display: block; color: var(--electric-blue); font-weight: 600; }
}
@media (max-width: 560px) {
  .m-2 { grid-template-columns: 1fr !important; }
  /* L-9c: these used to target .section / .section--tight, which no element
     carries — every section uses an inline padding. Targeting the elements
     directly makes the 20px gutter actually apply. */
  main > section, body > section { padding-left: 20px !important; padding-right: 20px !important; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .container { padding: 0 20px; }
  .site-header__inner { padding: 0 20px; }
  /* At 320px the logo, hamburger and CTA button together exceed the viewport.
     Drop the button here — the drawer's own Request a Briefing link (above)
     keeps Contact reachable. */
  .site-header__cta { display: none; }
}

/* Lifecycle rail: keep rows even at every width (no orphan stage). */
@media (max-width: 1180px) { #lifecycle-tabs { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 760px)  { #lifecycle-tabs { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }

/* L-1 honeypot. Off-screen rather than display:none — some bots skip hidden
   fields but fill positioned ones. Never focusable, never announced. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* L-6: privacy + accessibility links in the footer bar. */
.site-footer__legal { display: flex; gap: 8px; align-items: center; }
.site-footer__legal .foot-link { font-size: 12.5px; }

/* WCAG 2.4.1 Bypass Blocks. Seven focusable elements precede main content on
   every page. Visually hidden until focused, then painted above the sticky
   header (z-index 60). */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--action-primary); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-family: var(--body-font); font-size: var(--text-sm); font-weight: 600;
  text-decoration: none; transition: top 120ms var(--ease-standard);
}
.skip-link:focus-visible { top: 8px; color: #fff; }