/* ============================================================================
   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.
   ============================================================================ */

/* 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; }
}

/* ---- TRANSITION-ONLY chrome shim (spec 001, research R3) ------------------
   The rf- nav and footer render on every page, but the .rf-body reset applies
   only to refreshed pages. This gives the chrome its typography/box model on
   not-yet-ported pages. Remove when every page carries class="rf-body". */
.rf-nav, .rf-nav *,
.rf-foot, .rf-foot * {
  box-sizing: border-box;
}
.rf-nav, .rf-foot {
  font-family: var(--rf-font-sans);
  line-height: 1.5;
  margin: 0;
}
/* The rf-nav is position:fixed. Refreshed pages compensate in their own
   sections (e.g. .rf-hero padding-top); unported pages started below the old
   in-flow nav, so give them equivalent top padding (64px bar, 68px ≥1280px). */
body:not(.rf-body) {
  padding-top: 64px;
}
@media (min-width: 1280px) {
  body:not(.rf-body) {
    padding-top: 68px;
  }
}