/* ============================================================================
   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 rf- 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 */
  --rf-ink: #1A1A1A;            /* nav, footer, ink text */
  --rf-dark: #141414;           /* hero, problem-solution, offerings, faq bg */
  --rf-dark-2: #1A1B19;         /* approach bg */
  --rf-dark-3: #0D0D0D;         /* aiframework destination */
  --rf-terminal: #0F0F0F;       /* problem-solution terminal panel */
  --rf-preload: #0d0d10;        /* preloader overlay */
  --rf-dropdown: #1F1F1F;       /* nav dropdown panels */
  --rf-approach-border: #2E2F2D;

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

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

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

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

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

/* ---- Scoped reset. Applies within the refresh layout body. --------------- */
.rf-body,
.rf-body * {
  box-sizing: border-box;
}
.rf-body {
  margin: 0;
  font-family: var(--rf-font-sans);
  font-weight: 400;
  color: var(--rf-ink);
  background: var(--rf-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
}
.rf-body h1, .rf-body h2, .rf-body h3, .rf-body h4, .rf-body p {
  margin: 0;
}
/* :where() keeps this reset at ~zero specificity so component link classes
   (.rf-nav__link, .rf-foot__link, etc.) always win over it. */
:where(.rf-body) a {
  color: inherit;
  text-decoration: none;
}
.rf-body img,
.rf-body video {
  max-width: 100%;
  display: block;
}
.rf-body button {
  font-family: inherit;
  cursor: pointer;
}

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

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

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

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

/* Keyboard focus: designed :focus-visible states so keyboard users get the
   same finish as the hover states (UA default outlines read unfinished). */
.rf-btn-primary:focus-visible,
.rf-nav__link:focus-visible,
.rf-nav__cta:focus-visible,
.rf-nav__item:focus-visible,
.rf-nav__toggle:focus-visible {
  outline: 2px solid var(--rf-red);
  outline-offset: 3px;
}
.rf-btn-ghost:focus-visible {
  outline: 2px solid var(--rf-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) {
  .rf-btn-ghost { padding-block: 10px; }
}

/* ---- Icons --------------------------------------------------------------- */
.rf-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rf-arrow { transition: transform .3s var(--rf-ease); }
a:hover > .rf-arrow,
button:hover > .rf-arrow,
.rf-arrow-group:hover .rf-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(--rf-ease), transform .7s var(--rf-ease);
  transition-delay: var(--rf-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;
  }
  .rf-marquee-track { animation: none !important; }
}

/* ---- Site chrome utilities (spec 008) -------------------------------------
   The transition chrome shim retired here: every page now carries rf-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(--rf-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(--rf-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(--rf-red-deep);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--rf-red);
  outline-offset: 3px;
}
.grecaptcha-badge { visibility: hidden; }