/* ---------- Fonts (WordPress build addition) ----------
   Self-hosted woff2 extracted from the design reference, per DESIGNER-RESPONSES §6.
   Variable fonts: one file per family/style covers the weights used. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 600;
             font-stretch: 100%; font-display: swap; src: url('../fonts/Archivo.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 400;
             font-display: swap; src: url('../fonts/Newsreader-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 400;
             font-display: swap; src: url('../fonts/Newsreader.woff2') format('woff2'); }

/* Rubato Group — design tokens + core components
   Enqueue after the theme stylesheet. Every value here is the source of truth;
   do not introduce colors, sizes or radii outside this file. */

:root {
  /* Color */
  --rb-navy-tempo:      #0D1830; /* page + nav + footer background */
  --rb-navy-rubato:     #1C3156; /* gradient cards, dimensional surfaces */
  --rb-navy-card:       #182A4C; /* flat cards on navy or paper */
  --rb-navy-border:     #2C4269; /* hairline borders on dark */
  --rb-blue-signal:     #58B0E8; /* information, system, data */
  --rb-blue-signal-ink: #2F7FB8; /* Signal Blue on warm paper — LARGE TEXT ONLY (3.88:1).
                                    For labels and body on paper use --rb-ink-body. */
  --rb-coral:           #F08068; /* intervention, change, primary CTA */
  --rb-coral-ink:       #C1442A; /* coral text on warm paper (contrast-safe) */
  --rb-coral-soft:      #F8C0B0; /* secondary warm accent */
  --rb-white-warm:      #EDF1F7; /* primary type on navy */
  --rb-paper:           #F5F2EC; /* warm paper section background */
  --rb-blue-muted:      #8DA0BC; /* body copy on navy */
  --rb-blue-light:      #C9D4E4; /* emphasis body copy on navy */
  --rb-ink-body:        #46536B; /* body copy on warm paper */
  --rb-paper-border:    rgba(28, 49, 86, 0.16);

  /* Type */
  --rb-font-structure: 'Archivo', system-ui, -apple-system, sans-serif;
  --rb-font-judgment:  'Newsreader', Georgia, serif;

  /* Layout */
  --rb-container: 1180px;
  --rb-gutter: 40px;
  --rb-section-y: 104px;
  --rb-radius-card: 22px;
  --rb-radius-module: 28px;
  --rb-radius-pill: 999px;
}

/* ---------- Base ---------- */
body { font-family: var(--rb-font-structure); }

/* ---------- Sections ---------- */
.rb-section          { background: var(--rb-navy-tempo); color: var(--rb-white-warm); }
.rb-section--paper   { background: var(--rb-paper);      color: var(--rb-navy-tempo); }
.rb-section--panel   { background: var(--rb-navy-card);  color: var(--rb-white-warm);
                       border-top: 1px solid var(--rb-navy-border); border-bottom: 1px solid var(--rb-navy-border); }
.rb-section--glow    { background-color: var(--rb-navy-tempo);
                       background-image: radial-gradient(120% 100% at 50% 20%, rgba(88,176,232,0.18) 0%, rgba(28,49,86,0.35) 45%, rgba(13,24,48,0) 85%),
                                         radial-gradient(rgba(141,160,188,0.15) 1px, transparent 1px);
                       background-size: auto, 26px 26px; }
.rb-container        { max-width: var(--rb-container); margin: 0 auto; padding: var(--rb-section-y) var(--rb-gutter); }

/* ---------- Type ---------- */
.rb-eyebrow { font: 500 11px/1 var(--rb-font-structure); letter-spacing: .24em; text-transform: uppercase; color: var(--rb-blue-muted); }
.rb-section--paper .rb-eyebrow { color: var(--rb-ink-body); }
.rb-h1 { color: inherit; font: 500 clamp(38px,4.6vw,66px)/1.1 var(--rb-font-structure); letter-spacing: -.02em; margin: 0; text-wrap: pretty; }
.rb-h2 { color: inherit; font: 500 clamp(32px,3.6vw,52px)/1.1 var(--rb-font-structure); letter-spacing: -.02em; margin: 0; text-wrap: pretty; }
.rb-h3 { color: inherit; font: 500 30px/1.15 var(--rb-font-structure); margin: 0; }
.rb-body { font: 400 18px/1.65 var(--rb-font-structure); color: var(--rb-blue-muted); margin: 0; }
.rb-section--paper .rb-body { color: var(--rb-ink-body); }
/* Newsreader: ONE phrase inside a headline, or a standalone statement. Never a paragraph. */
.rb-h1 em, .rb-h2 em, .rb-h3 em { font-family: var(--rb-font-judgment); font-weight: 300; font-style: italic; letter-spacing: 0; }
.rb-em { font-family: var(--rb-font-judgment); font-weight: 300; font-style: italic; letter-spacing: 0; }
.rb-statement { font: 500 24px/1.35 var(--rb-font-structure); color: var(--rb-coral); margin: 0; }
.rb-section--paper .rb-statement { color: var(--rb-coral-ink); }

/* ---------- Cards ---------- */
.rb-card { background: var(--rb-navy-card); color: var(--rb-white-warm);
           border: 1px solid var(--rb-navy-border); border-radius: var(--rb-radius-card); padding: 40px 36px 44px; }
.rb-card__num { font: 500 11px/1 var(--rb-font-structure); letter-spacing: .2em; color: var(--rb-blue-signal); }
.rb-card p { color: var(--rb-blue-muted); }
.rb-module { background: linear-gradient(160deg, var(--rb-navy-rubato) 0%, #152743 100%); color: var(--rb-white-warm);
             border: 1px solid var(--rb-navy-border); border-radius: var(--rb-radius-module); padding: 56px 48px; }

/* A dark card or module can sit on a warm-paper section. When it does, everything
   inside it keeps dark-surface colors — this block restores them after the
   .rb-section--paper rules. Never override colors inside .rb-card / .rb-module. */
.rb-section--paper .rb-card,
.rb-section--paper .rb-module            { color: var(--rb-white-warm); }
.rb-section--paper .rb-card p,
.rb-section--paper .rb-module p,
.rb-section--paper .rb-card .rb-body,
.rb-section--paper .rb-module .rb-body   { color: var(--rb-blue-muted); }
.rb-section--paper .rb-card .rb-eyebrow,
.rb-section--paper .rb-module .rb-eyebrow { color: var(--rb-blue-muted); }
.rb-section--paper .rb-card .rb-statement,
.rb-section--paper .rb-module .rb-statement { color: var(--rb-coral); }
.rb-section--paper .rb-card .rb-list,
.rb-section--paper .rb-module .rb-list   { color: var(--rb-blue-light); }
.rb-section--paper .rb-card .rb-list > *,
.rb-section--paper .rb-module .rb-list > * { border-bottom-color: var(--rb-navy-border); }
.rb-section--paper .rb-card .rb-pill,
.rb-section--paper .rb-module .rb-pill   { color: var(--rb-blue-light); border-color: var(--rb-navy-border); }
.rb-section--paper .rb-card .rb-link,
.rb-section--paper .rb-module .rb-link   { color: var(--rb-white-warm); border-bottom-color: rgba(237,241,247,.35); }
.rb-section--paper .rb-card .rb-link:hover,
.rb-section--paper .rb-module .rb-link:hover { color: var(--rb-blue-signal); border-bottom-color: var(--rb-blue-signal); }

/* ---------- Pills (capability lists) ---------- */
.rb-pill { display: inline-block; font: 400 14px/1 var(--rb-font-structure); color: var(--rb-blue-light);
           border: 1px solid var(--rb-navy-border); border-radius: var(--rb-radius-pill); padding: 8px 16px; }
.rb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* Pills directly on warm paper (not inside a card or module) */
.rb-section--paper .rb-pill { color: var(--rb-ink-body); border-color: var(--rb-paper-border); }

/* ---------- Rules list (the hairline stack used site-wide) ---------- */
.rb-list { display: grid; gap: 10px; font-size: 17px; color: var(--rb-blue-light); }
.rb-list > * { border-bottom: 1px solid var(--rb-navy-border); padding-bottom: 10px; }
.rb-section--paper .rb-list { color: var(--rb-ink-body); }
.rb-section--paper .rb-list > * { border-bottom-color: var(--rb-paper-border); }

/* ---------- Buttons + links ---------- */
.rb-btn { display: inline-block; font: 500 15px/1 var(--rb-font-structure); color: var(--rb-navy-tempo);
          background: var(--rb-coral); border-radius: var(--rb-radius-pill); padding: 16px 30px; text-decoration: none;
          transition: background 140ms ease; }
.rb-btn:hover { background: var(--rb-coral-soft); }
.rb-link { font: 400 15px/1 var(--rb-font-structure); color: var(--rb-white-warm); text-decoration: none;
           border-bottom: 1px solid rgba(237,241,247,.35); padding-bottom: 3px; }
.rb-link:hover { color: var(--rb-blue-signal); border-bottom-color: var(--rb-blue-signal); }
.rb-section--paper .rb-link { color: var(--rb-navy-tempo); border-bottom-color: rgba(13,24,48,.3); }
.rb-section--paper .rb-link:hover { color: var(--rb-coral-ink); border-bottom-color: var(--rb-coral-ink); }

/* ---------- Photography ---------- */
.rb-figure { position: relative; overflow: hidden; }
.rb-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* On navy: let the frame dissolve into the page */
.rb-figure--bleed::after { content: ''; position: absolute; inset: 0; pointer-events: none;
                           background: linear-gradient(180deg, rgba(24,42,76,0) 55%, rgba(24,42,76,.92) 100%); }
/* Pulse overlay sits on the photo, uniformly scaled, anchored to the bottom */
.rb-figure__pulse { position: absolute; left: 0; bottom: 40px; width: 100%; height: auto; pointer-events: none; }

/* ---------- Grids ---------- */
.rb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.rb-grid-cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rb-grid-cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.rb-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }

@media (max-width: 900px) {
  :root { --rb-section-y: 72px; --rb-gutter: 24px; }
  .rb-grid-2, .rb-grid-cards-2, .rb-grid-cards-4, .rb-grid-5 { grid-template-columns: 1fr; gap: 32px; }
  .rb-module, .rb-card { padding: 32px 24px; }
}

/* ---------- Module padding variants ----------
   Measured per instance across the eight reference pages. 56/48 is the default
   (11 instances); these are the documented exceptions. */
.rb-module--wide { padding: 64px 56px; }
.rb-module--tall { padding: 72px 56px; }
.rb-module--cta  { padding: 80px 56px;
                   background-image: radial-gradient(110% 100% at 50% 0%, rgba(88,176,232,.18) 0%, rgba(28,49,86,0) 70%);
                   background-color: var(--rb-navy-rubato); }
@media (max-width: 900px) {
  .rb-module--wide, .rb-module--tall, .rb-module--cta { padding: 32px 24px; }
}

/* Signals index rendered as cards (reference Home §9 uses 3 cards at 36/30/40/30). */
.rb-signal-card { background: var(--rb-navy-card); border: 1px solid var(--rb-navy-border);
                  border-radius: var(--rb-radius-card); padding: 36px 30px 40px; display: block;
                  text-decoration: none; transition: border-color 140ms ease; }
.rb-signal-card:hover { border-color: var(--rb-blue-signal); }
.rb-signal-card .rb-signal__cat { color: var(--rb-blue-signal); }
.rb-signal-card .rb-signal__title { color: var(--rb-white-warm); margin: 14px 0 0; font-size: 20px; }
.rb-signal-card:hover .rb-signal__title { color: var(--rb-blue-signal); }

/* Card padding variants, measured per instance in the reference. 40/36/44/36 is
   the default; the compact form is used in dense card grids (Why We Build's
   principles, Second Tempo's practice pairs). */
.rb-card--compact { padding: 36px 32px 40px; }