/* ============================================================================
   ArchitectNow website refresh, design tokens + shared primitives
   Source of truth: ~/Repos/website-refresh (React/Tailwind), styles/theme.css
   and per-component classes. Ported to hand-written CSS (no Tailwind build).
   All custom keyframes are an- prefixed to avoid collisions when merged into
   the production site alongside its animation.css.
   ============================================================================ */

/* Self-hosted DM Sans (variable, wght 100-1000, opsz 9-40) — normal + italic,
   latin + latin-ext subsets. Self-hosted so the real webfont is same-origin and
   preloaded (see _Layout.cshtml <link rel="preload">), letting it win first
   paint essentially every load. This eliminates the intermittent Google-CDN race
   where `display=optional` would lock the metric-mismatched Arial fallback in for
   a whole page view — the cause of the hero's square-period + video-overlap
   render. font-display stays `optional` (spec 005 US3, zero hero layout shift):
   preloaded + same-origin, the font is ready in time, so optional uses it rather
   than sticking with the fallback. Files under wwwroot/fonts/; to refresh, re-pull
   the woff2 URLs from Google's css2 endpoint (currently DM Sans v17). */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: optional;
  src: url("/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: optional;
  src: url("/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 100 1000;
  font-display: optional;
  src: url("/fonts/dm-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 100 1000;
  font-display: optional;
  src: url("/fonts/dm-sans-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-compatible fallback for DM Sans (spec 005 US3): sized so text set in
   the local fallback occupies the same vertical space as DM Sans, eliminating
   the layout shift under the homepage hero when the webfont swaps in.
   Metrics derived from DM Sans v15 (unitsPerEm 1000, ascent 990, descent 250)
   against Arial. */
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial");
  size-adjust: 98%;
  ascent-override: 99%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* Darks */
  --an-ink: #1A1A1A;            /* nav, footer, ink text */
  --an-dark: #141414;           /* hero, problem-solution, offerings, faq bg */
  --an-dark-2: #1A1B19;         /* approach bg */
  --an-dark-3: #0D0D0D;         /* aiframework destination */
  --an-terminal: #0F0F0F;       /* problem-solution terminal panel */
  --an-preload: #0d0d10;        /* preloader overlay */
  --an-dropdown: #1F1F1F;       /* nav dropdown panels */
  --an-approach-border: #2E2F2D;

  /* Lights */
  --an-paper: #FAFAF7;
  --an-white: #ffffff;
  --an-border: #EDEDED;
  --an-border-2: #E4E4E3;

  /* Reds */
  --an-red: #A7252C;            /* primary, on light */
  --an-red-light: #C44950;      /* on dark */
  --an-red-deep: #7c1b21;       /* cta bottom gradient */
  --an-red-card-end: #8e1f25;   /* offer card gradient end */
  --an-red-tint: #f3c6c9;
  --an-red-tint-2: #f7e2e3;
  --an-red-wash: #F4E4E5;
  /* Distinct name so error styling can diverge from brand red later. */
  --an-error: var(--an-red);

  /* Grays */
  --an-gray-1: #2D2E2C;
  --an-gray-2: #3A3B39;
  --an-gray-3: #5C5D5A;
  --an-gray-4: #6B6C6A;
  --an-gray-5: #8A8B88;
  --an-gray-6: #A8A9A6;
  --an-gray-7: #C8C8C4;

  /* Type */
  --an-font-sans: "DM Sans", "DM Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --an-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Motion */
  --an-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Scoped reset. Applies within the refresh layout body. --------------- */
.an-body,
.an-body * {
  box-sizing: border-box;
}
.an-body {
  margin: 0;
  font-family: var(--an-font-sans);
  font-weight: 400;
  color: var(--an-ink);
  background: var(--an-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* ---- Horizontal containment ----------------------------------------------
   Decorative overhang is intentional: section glows, the pre-reveal
   translateX on [data-reveal="left|right"], and full-bleed art all extend
   past the viewport by design. That overhang must be CLIPPED, never
   scrollable — otherwise the page pans sideways onto blank space.

   This must be set on BOTH html and body. Setting it on body alone relies on
   overflow propagating to the viewport, which desktop browsers honour but
   iOS Safari does not — the document keeps ~46px of horizontal extent at
   390px wide, and the user can drag the whole page off-screen.

   `clip` rather than `hidden`: `hidden` makes the element a scroll container,
   which changes what `position: sticky` sticks to (six components rely on it
   — the detail-page contact card and five section intros). `clip` does not
   create a scroll container and leaves overflow-y visible, so sticky keeps
   working. `hidden` is declared first as the fallback for anything without
   `clip` support. */
html,
.an-body {
  overflow-x: hidden;
  overflow-x: clip;
}
.an-body h1, .an-body h2, .an-body h3, .an-body h4, .an-body p {
  margin: 0;
}
/* :where() keeps this reset at ~zero specificity so component link classes
   (.an-nav__link, .an-foot__link, etc.) always win over it. */
:where(.an-body) a {
  color: inherit;
  text-decoration: none;
}
.an-body img,
.an-body video {
  max-width: 100%;
  display: block;
}
.an-body button {
  font-family: inherit;
  cursor: pointer;
}

/* ---- Layout helpers ------------------------------------------------------ */
.an-container {
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 1024px) {
  .an-container { padding-inline: 48px; }
}

/* ---- Section label: red 36x3 rule + DM Sans extrabold 18/20px ------------ */
.an-section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.an-section-label::before {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 999px;
  background: var(--an-red);
  flex-shrink: 0;
}
.an-section-label > span {
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--an-red);
}
@media (min-width: 768px) {
  .an-section-label > span { font-size: 20px; }
}
.an-section-label.is-dark::before { background: var(--an-red-light); }
.an-section-label.is-dark > span { color: var(--an-red-light); }
.an-section-label.is-center { justify-content: center; }

/* Flat red accent word on headlines (never italic). */
.an-accent { color: var(--an-red); font-style: normal; }
.an-accent-dark { color: var(--an-red-light); font-style: normal; }

/* ---- Buttons ------------------------------------------------------------- */
.an-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--an-red);
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  transition: transform .3s var(--an-ease), box-shadow .3s var(--an-ease);
}
.an-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(167, 37, 44, .35);
}
.an-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: color .3s var(--an-ease);
}

/* Keyboard focus: designed :focus-visible states so keyboard users get the
   same finish as the hover states (UA default outlines read unfinished). */
.an-btn-primary:focus-visible,
.an-nav__link:focus-visible,
.an-nav__cta:focus-visible,
.an-nav__item:focus-visible,
.an-nav__toggle:focus-visible {
  outline: 2px solid var(--an-red);
  outline-offset: 3px;
}
.an-btn-ghost:focus-visible {
  outline: 2px solid var(--an-red-light);
  outline-offset: 3px;
}

/* Mobile tap targets: quiet text links measure ~22px tall; pad the hit area
   at phone widths without changing the visual weight. */
@media (max-width: 767px) {
  .an-btn-ghost { padding-block: 10px; }
}

/* ---- Icons --------------------------------------------------------------- */
.an-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.an-arrow { transition: transform .3s var(--an-ease); }
a:hover > .an-arrow,
button:hover > .an-arrow,
.an-arrow-group:hover .an-arrow { transform: translateX(4px); }

/* ---- Scroll-reveal ------------------------------------------------------- */
/* Elements tagged data-reveal start hidden and animate in when observed.
   direction via data-reveal="up|down|left|right"; delay via data-reveal-delay (ms). */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--an-ease), transform .7s var(--an-ease);
  transition-delay: var(--an-reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="down"]  { transform: translateY(-30px); }
[data-reveal="left"]  { transform: translateX(-70px); }
[data-reveal="right"] { transform: translateX(70px); }
[data-reveal="scale"] { transform: scale(.96) translateY(20px); }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .an-marquee-track { animation: none !important; }
}

/* ---- Site chrome utilities (spec 008) -------------------------------------
   The transition chrome shim retired here: every page now carries an-body.
   These are the survivors of the deleted site.css — the only legacy rules
   with live consumers (_Layout's skip link and back-to-top, and the Google-
   injected reCAPTCHA badge, disclosed in copy on the form pages instead). */
.skip-link:focus {
  background: var(--an-red);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 12px 0;
  z-index: 10000;
}
.back-to-top {
  display: none;
  position: fixed !important;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--an-red);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease, visibility 0.3s ease;
  will-change: opacity;
}
.back-to-top:not([style*="display: none"]) { display: flex !important; }
.back-to-top:hover {
  background: var(--an-red-deep);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--an-red);
  outline-offset: 3px;
}
.grecaptcha-badge { visibility: hidden; }