/* ============================================================
   RyOne site — shared static-style classes
   Extracted from repeated inline `style="..."` attributes across
   the .dc.html pages (static pass — no {{ }} dynamic values here;
   those stay inline, driven by component state/props).
   ============================================================ */

/* ---- Layout shells ---- */
.page-shell { background: var(--surface-page); min-height: 100vh; }
.container { max-width: var(--container-max); margin: 0 auto; }
.container-hero { max-width: var(--container-max); margin: 0 auto; padding: 56px 0 40px; }
.container-cta { max-width: var(--container-max); margin: 0 auto; text-align: center; padding: 60px 0; }
.spacer-100 { height: 100px; }

/* ---- Section padding ---- */
.pad-60 { padding: 60px 40px 0; }
.pad-72 { padding: 72px 40px 0; }
.pad-100 { padding: 100px 40px 0; }
.pad-110 { padding: 110px 40px 0; }

/* ---- Grids & rows ---- */
.grid-2-18 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Page-specific grids — each used once in its source file, but still
   classed (rather than left as inline style) so the responsive rules
   below have something to target. */
.case-modal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--n-1); margin-bottom: 30px; }
.capabilities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin-bottom: 28px; }
.gsa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.mission-grid { max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.partners-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 50px; align-items: center; }
.stat-strip-grid { background: var(--n-1); border-radius: var(--radius-2xl); display: grid; grid-template-columns: repeat(4, 1fr); }
.sectors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--n-3); }
.contact-grid { max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 56px; }
.row-divider { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--n-3); }
.row-center-20 { display: flex; align-items: center; gap: 20px; }
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }

/* ---- Scroll-reveal (paired with the data-reveal="1" JS hook —
   componentDidMount sets el.style.opacity/transform directly, which
   overrides these class defaults, so moving the initial state into a
   class here doesn't change that behavior) ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal-slow { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-mb44 { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); margin-bottom: 44px; }

/* ---- Headings ---- */
.h1-hero { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 5vw, 58px); color: var(--text-primary); margin: 20px 0 0; }
.h2-section { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); color: var(--text-primary); margin: 16px 0 0; }
.h2-cta { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4vw, 44px); color: var(--text-primary); margin: 0 0 14px; }

/* ---- Eyebrows (small uppercase labels) ---- */
.eyebrow-muted { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-4); margin-bottom: 16px; }
.eyebrow-primary { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.eyebrow-yellow { font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); }

/* ---- Body copy ---- */
.lead-text { font-family: var(--font-body); font-size: 18px; line-height: 28px; color: var(--text-secondary); max-width: 640px; margin: 20px 0 0; }
.cta-subtext { font-family: var(--font-body); font-size: 16px; color: var(--text-secondary); max-width: 420px; margin: 0 auto 32px; }
.body-text { font-family: var(--font-body); font-size: 14px; line-height: 24px; color: var(--text-secondary); margin: 0; }
.body-text-tight { font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--text-secondary); margin: 0; }
.body-text-sm { font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); margin: 0; }
.text-13-muted { font-family: var(--font-body); font-size: 13px; color: var(--n-4); }
.text-meta-dark { font-family: var(--font-body); font-size: 14px; color: var(--n-6); margin-top: 2px; }
.text-footer-link { font-family: var(--font-body); font-size: 14px; color: var(--n-6); }

/* ---- Spacing utilities ---- */
.mb-22 { margin-bottom: 22px; }
.mb-40 { margin-bottom: 40px; }

/* ---- Icon chips / media overlays ---- */
.icon-circle-36 { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--n-3); display: flex; align-items: center; justify-content: center; color: var(--n-5); }
.icon-circle-40 { width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--n-3); display: flex; align-items: center; justify-content: center; color: var(--n-5); }
.media-icon-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85); }

/* ============================================================
   Dynamic-style pass — same idea, but for elements that mix static
   CSS with a {{ tone/state }}-driven value (a card's tone color, the
   active nav link, a filter pill's selected state, ...). Only the
   truly-variable properties (background/color/border/order — never
   layout/typography) stay as inline style="..." at the call site;
   everything constant about the element's shape lives here.
   ============================================================ */

/* Site header + nav (SiteNav.dc.html) */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(252, 252, 253, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); transition: background .2s var(--ease-out); }
.nav-link-desktop { font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: var(--radius-pill); transition: all .2s var(--ease-out); }
.nav-link-mobile { font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 12px 8px; }

/* Work page filter pills (rc-filter-pill already carries the
   transition/cursor/appearance reset from Work.dc.html's own <style>) */
.filter-pill-base { font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 10px 18px; border-radius: var(--radius-pill); }

/* Tone-driven "branch" cards (About's "How we're built", Home's
   "Who we build for") */
.branch-card { background: var(--surface-card); border-radius: var(--radius-2xl); padding: 28px; min-height: 230px; display: flex; flex-direction: column; }
.branch-icon-tile { width: 44px; height: 44px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.branch-kind-label { font-family: var(--font-body); font-weight: 700; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.sector-icon-tile { width: 44px; height: 44px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }

/* Services page discipline blocks. Base grid for .rc-service-block lives
   here (not in Services.dc.html's own <style>) so it stays earlier in the
   cascade than the responsive overrides below it in this same file —
   .rc-service-block's page-local <style> block loads after site.css, so a
   plain (non-@media) rule there would win the specificity tie and silently
   defeat the mobile override otherwise. */
.rc-service-block { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 70px 0; border-top: 1px solid var(--border-subtle); }
.service-icon-tile { width: 44px; height: 44px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; }
.service-icon-tile-lg { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.bullet-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.service-visual { height: 340px; border-radius: var(--radius-2xl); overflow: hidden; position: relative; }

/* Case card/modal tone-driven media + eyebrow text */
.absolute-fill { position: absolute; inset: 0; }
.case-card-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.case-modal-media { height: 220px; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; position: relative; overflow: hidden; }
.case-modal-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Contact form textarea (the Input component handles its own inputs;
   this is the one raw <textarea>) */
.textarea-field { width: 100%; border-radius: var(--radius-md); border: none; padding: 14px; font-family: var(--font-body); font-size: 14px; color: var(--text-primary); resize: vertical; }

/* ============================================================
   Responsive — none of the grids above had a mobile fallback, so
   every multi-column layout stayed multi-column at any width,
   overflowing the viewport (that's the "squished into a left
   column" bug: the page got wider than the screen, so only the
   left edge of the real layout was ever visible without scrolling
   right). Two tiers: tablet loosens the widest grids, phone
   collapses everything still cramped down to one or two columns.
   ============================================================ */
@media (max-width: 860px) {
  .grid-4, .grid-3, .pillars-grid, .stat-strip-grid, .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .grid-4, .grid-3, .grid-2-18, .pillars-grid, .footer-grid,
  .mission-grid, .partners-grid, .gsa-grid, .capabilities-grid,
  .sectors-grid, .rc-service-block { grid-template-columns: 1fr; }
  .team-grid, .case-modal-stats { grid-template-columns: repeat(2, 1fr); }
  .rc-service-block { gap: 24px; }
}