/* Rubato Group — site shell only.
   Header, footer, contact form and responsive behaviour. This file adds NOTHING
   to the design language: every color, radius and size below is a token from
   rubato-tokens.css. If you need a new value, add it there, not here. */

/* ---------- Block-theme reset so sections can go edge to edge ---------- */
/* Archivo is the default for everything. Without this, any element that isn't
   carrying an explicit rb- type class (.rb-list rows, .rb-card body copy, table
   cells, editor-authored paragraphs) falls back to the browser's serif.
   theme.json sets the same thing for block-theme output; this covers the rest. */
body { margin: 0; background: var(--rb-navy-tempo); color: var(--rb-white-warm);
       font: 400 18px/1.65 var(--rb-font-structure); }
.wp-site-blocks > * { margin-block: 0; }
.rb-section > .rb-container > *:first-child { margin-top: 0; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--rb-blue-signal); outline-offset: 3px; }

/* Skip link */
.rb-skip { position: absolute; left: -9999px; color: var(--rb-white-warm); }
.rb-skip:focus { left: 24px; top: 16px; z-index: 100; background: var(--rb-coral);
                 color: var(--rb-navy-tempo); padding: 12px 20px; border-radius: var(--rb-radius-pill);
                 font: 500 15px/1 var(--rb-font-structure); text-decoration: none; }

/* ---------- Header ---------- */
.rb-header { position: sticky; top: 0; z-index: 50; background: rgba(13,24,48,.92);
             backdrop-filter: saturate(140%) blur(10px);
             border-bottom: 1px solid var(--rb-navy-border); }
.rb-header__inner { max-width: var(--rb-container); margin: 0 auto;
                    padding: 18px var(--rb-gutter); display: flex; align-items: center;
                    justify-content: space-between; gap: 32px; }
.rb-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
           color: var(--rb-white-warm); }
.rb-logo svg { width: 34px; height: auto; display: block; }
.rb-logo__word { font: 500 17px/1 var(--rb-font-structure); letter-spacing: .26em; }

.rb-nav { display: flex; align-items: center; gap: 30px; }
.rb-nav a { font: 400 15px/1 var(--rb-font-structure); color: var(--rb-white-warm);
            text-decoration: none; white-space: nowrap; padding: 6px 0;
            border-bottom: 1px solid transparent; transition: color 140ms ease, border-color 140ms ease; }
.rb-nav a:hover { color: var(--rb-blue-signal); border-bottom-color: var(--rb-blue-signal); }
.rb-nav a[aria-current="page"] { color: var(--rb-blue-signal); border-bottom-color: var(--rb-blue-signal); }
.rb-nav .rb-btn { padding: 12px 24px; font-size: 14px; border-bottom: 0; color: var(--rb-navy-tempo); }
.rb-nav .rb-btn:hover { color: var(--rb-navy-tempo); border-bottom-color: transparent; }

/* Mobile toggle — hidden until the nav can no longer hold one line (~1024px) */
.rb-navtoggle { display: none; background: none; border: 1px solid var(--rb-navy-border);
                border-radius: var(--rb-radius-pill); color: var(--rb-white-warm);
                font: 500 13px/1 var(--rb-font-structure); letter-spacing: .12em;
                text-transform: uppercase; padding: 11px 18px; cursor: pointer; }

@media (max-width: 1023px) {
  .rb-navtoggle { display: inline-block; }
  .rb-nav { position: absolute; left: 0; right: 0; top: 100%; display: none;
            flex-direction: column; align-items: stretch; gap: 0;
            background: var(--rb-navy-tempo); border-bottom: 1px solid var(--rb-navy-border);
            padding: 8px var(--rb-gutter) 28px; }
  .rb-nav.is-open { display: flex; }
  .rb-nav a { padding: 16px 0; border-bottom: 1px solid var(--rb-navy-border); }
  .rb-nav .rb-btn { margin-top: 20px; text-align: center; align-self: flex-start; }
}

/* ---------- Footer ---------- */
.rb-footer { background: var(--rb-navy-tempo); border-top: 1px solid var(--rb-navy-border); }
.rb-footer__inner { max-width: var(--rb-container); margin: 0 auto; padding: 72px var(--rb-gutter) 40px; }
.rb-footer__top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.rb-footer__tag { color: var(--rb-blue-muted); font: 400 17px/1.6 var(--rb-font-structure); margin: 18px 0 0; }
.rb-footer__nav { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.rb-footer__nav a { font: 400 15px/1 var(--rb-font-structure); color: var(--rb-white-warm); text-decoration: none; }
.rb-footer__nav a:hover { color: var(--rb-blue-signal); }
.rb-footer__rhythm { margin: 56px 0 0; color: var(--rb-blue-muted);
                     font: 400 14px/1 var(--rb-font-structure); letter-spacing: .1em; }
.rb-footer__legal { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rb-navy-border);
                    display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
                    font: 400 14px/1 var(--rb-font-structure); color: var(--rb-blue-muted); }
.rb-footer__legal a { color: var(--rb-blue-muted); text-decoration: none; }
.rb-footer__legal a:hover { color: var(--rb-blue-signal); }

@media (max-width: 900px) {
  .rb-footer__top { grid-template-columns: 1fr; gap: 36px; }
  .rb-footer__rhythm { margin-top: 36px; }
}

/* ---------- Contact form ---------- */
.rb-form { display: grid; gap: 26px; }
.rb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rb-field { display: grid; gap: 9px; }
.rb-field label { font: 500 11px/1 var(--rb-font-structure); letter-spacing: .24em;
                  text-transform: uppercase; color: var(--rb-blue-muted); }
.rb-field input, .rb-field textarea {
  font: 400 17px/1.5 var(--rb-font-structure); color: var(--rb-white-warm);
  background: #132340; border: 1px solid var(--rb-navy-border); border-radius: 12px;
  padding: 15px 18px; width: 100%; box-sizing: border-box;
  transition: border-color 140ms ease; }
.rb-field input::placeholder, .rb-field textarea::placeholder { color: var(--rb-blue-muted); }
.rb-field input:focus, .rb-field textarea:focus { outline: none; border-color: var(--rb-blue-signal); }
.rb-field textarea { min-height: 150px; resize: vertical; }

/* Multi-select chips — checkbox styled as a pill, coral only once chosen (a decision) */
.rb-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.rb-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rb-chip span { display: inline-block; cursor: pointer;
                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: 10px 18px; transition: all 140ms ease; }
.rb-chip input:hover + span { border-color: var(--rb-blue-signal); color: var(--rb-white-warm); }
.rb-chip input:checked + span { background: var(--rb-coral); border-color: var(--rb-coral);
                                color: var(--rb-navy-tempo); }
.rb-chip input:focus-visible + span { outline: 2px solid var(--rb-blue-signal); outline-offset: 3px; }

.rb-form__submit { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.rb-form__micro { font-family: var(--rb-font-judgment); font-weight: 300; font-style: italic;
                  font-size: 17px; line-height: 1.5; color: var(--rb-blue-muted); margin: 0; }
.rb-hp { position: absolute; left: -9999px; }
.rb-form__notice { border-radius: 12px; padding: 18px 22px; margin: 0 0 28px;
                   font: 400 17px/1.5 var(--rb-font-structure); }
.rb-form__notice--ok  { background: rgba(88,176,232,.12); border: 1px solid var(--rb-blue-signal);
                        color: var(--rb-white-warm); }
.rb-form__notice--err { background: rgba(240,128,104,.12); border: 1px solid var(--rb-coral);
                        color: var(--rb-white-warm); }

@media (max-width: 700px) { .rb-form__row { grid-template-columns: 1fr; } }

/* ---------- Small layout helpers used by the patterns ---------- */
.rb-center { text-align: center; }
.rb-measure { max-width: 64ch; }
.rb-stack-s > * + *, .rb-stack-s > .wp-block-group__inner-container > * + * { margin-top: 18px; }
.rb-stack-m > * + *, .rb-stack-m > .wp-block-group__inner-container > * + * { margin-top: 28px; }
.rb-stack-l > * + *, .rb-stack-l > .wp-block-group__inner-container > * + * { margin-top: 44px; }
.rb-lede { font-size: 20px; line-height: 1.6; color: var(--rb-blue-light); }
.rb-section--paper .rb-lede { color: var(--rb-ink-body); }
.rb-rule { border: 0; border-top: 1px solid var(--rb-navy-border); margin: 0; }
.rb-section--paper .rb-rule { border-top-color: var(--rb-paper-border); }

/* Numbered capability / principle cards */
.rb-grid-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .rb-grid-cards-3 { grid-template-columns: 1fr; gap: 24px; } }

/* Quote pair: "the brief says" / "Second Tempo asks" */
.rb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
           border-top: 1px solid var(--rb-navy-border); }
.rb-pair__brief, .rb-pair__asks { padding: 26px 32px 26px 0; border-bottom: 1px solid var(--rb-navy-border); }
.rb-pair__brief { color: var(--rb-blue-muted); font-family: var(--rb-font-judgment);
                  font-weight: 300; font-style: italic; font-size: 21px; line-height: 1.4; }
.rb-pair__asks { color: var(--rb-white-warm); font-size: 17px; line-height: 1.55; }
/* NOTE: --rb-blue-signal-ink (#2F7FB8) on warm paper is 3.88:1 — it clears the
   3:1 large-text bar but NOT the 4.5:1 body bar, so it cannot carry an 11px
   label. Small labels on paper take --rb-ink-body, matching .rb-eyebrow. */
.rb-pair__head { font: 500 11px/1 var(--rb-font-structure); letter-spacing: .24em;
                 text-transform: uppercase; color: var(--rb-blue-signal); padding-bottom: 16px; }
.rb-pair__head--asks { color: var(--rb-coral); }
.rb-section--paper .rb-pair__head { color: var(--rb-ink-body); }
.rb-section--paper .rb-pair__head--asks { color: var(--rb-coral-ink); }
@media (max-width: 700px) {
  .rb-pair { grid-template-columns: 1fr; }
  .rb-pair__head, .rb-pair__head--asks { padding-top: 20px; }
  .rb-pair__brief { border-bottom: 0; padding-bottom: 12px; }
}

/* Signals index rows */
.rb-signals { border-top: 1px solid var(--rb-paper-border); }
.rb-signal { display: grid; grid-template-columns: 170px 1fr auto; gap: 28px; align-items: baseline;
             padding: 26px 0; border-bottom: 1px solid var(--rb-paper-border); text-decoration: none; }
.rb-signal__cat { font: 500 11px/1.4 var(--rb-font-structure); letter-spacing: .24em;
                  text-transform: uppercase; color: var(--rb-ink-body); }
.rb-signal__title { font: 500 22px/1.35 var(--rb-font-structure); color: var(--rb-navy-tempo); margin: 0; }
.rb-signal__arrow { color: var(--rb-coral-ink); font-size: 20px; }
.rb-signal:hover .rb-signal__title { color: var(--rb-coral-ink); }
@media (max-width: 700px) { .rb-signal { grid-template-columns: 1fr auto; }
                            .rb-signal__cat { grid-column: 1 / -1; } }

/* Logo / founder placeholder slots — deliberately obvious so nothing ships by accident */
.rb-slot { display: grid; place-items: center; text-align: center; gap: 8px;
           min-height: 120px; padding: 24px;
           border: 1px dashed var(--rb-navy-border); border-radius: var(--rb-radius-card);
           color: var(--rb-blue-muted); font: 400 13px/1.5 var(--rb-font-structure); }
.rb-section--paper .rb-slot { border-color: var(--rb-paper-border); color: var(--rb-ink-body); }
.rb-slot strong { font: 500 11px/1 var(--rb-font-structure); letter-spacing: .24em;
                  text-transform: uppercase; color: var(--rb-coral); }
.rb-section--paper .rb-slot strong { color: var(--rb-coral-ink); }
.rb-slot--portrait { min-height: 300px; }

/* Figures */
.rb-figure--wide { aspect-ratio: 16 / 7; border-radius: var(--rb-radius-module); }
.rb-figure--clean { border-radius: var(--rb-radius-card); }
.rb-figure--tall { aspect-ratio: 4 / 5; }
@media (max-width: 700px) { .rb-figure--wide { aspect-ratio: 4 / 3; } }

/* Anchor offset so #verticals links clear the sticky header */
[id] { scroll-margin-top: 96px; }

/* ---------- Layout utilities used by page content ----------
   Page content carries NO inline styles: everything an editor sees in the block
   editor is a class from this list. That keeps core blocks canonical (Gutenberg
   never flags "unexpected content") and keeps every value inside the token set. */
.rb-mt-xs  { margin-top: 14px; }
.rb-mt-s   { margin-top: 18px; }
.rb-mt-m   { margin-top: 28px; }
.rb-mt-l   { margin-top: 44px; }
.rb-mt-xl  { margin-top: 56px; }
.rb-mt-xxl { margin-top: 72px; }
.rb-mb-s   { margin-bottom: 18px; }

.rb-w-hero   { max-width: 940px; margin-left: auto; margin-right: auto; }
.rb-w-center { max-width: 820px; margin-left: auto; margin-right: auto; }
.rb-w-narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.rb-w-head   { max-width: 860px; }
.rb-w-col    { max-width: 900px; }
.rb-w-copy   { max-width: 64ch; }
.rb-center .rb-w-copy { margin-left: auto; margin-right: auto; }

.rb-pt-s   { padding-top: 8px; }
.rb-container.rb-flush { padding-top: 0; }
.rb-emph   { color: var(--rb-blue-light); }
.rb-section--paper .rb-emph { color: var(--rb-ink-body); }

.rb-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.rb-center .rb-actions { justify-content: center; }

.rb-fill { display: flex; flex-direction: column; justify-content: center; }

/* Stage labels on the Second Tempo strip */
.rb-stage { font: 500 11px/1 var(--rb-font-structure); letter-spacing: .2em;
            text-transform: uppercase; color: var(--rb-blue-signal); margin: 0 0 12px; }
.rb-stage--shift { color: var(--rb-coral); }
.rb-stage + .rb-body { font-size: 17px; }

/* Card number variants */
.rb-card__num--wide { letter-spacing: .24em; }

/* The Shift module is the intervention point — the one module that carries coral */
.rb-module--accent { border-color: var(--rb-coral); }

.rb-grid-2--wide { gap: 88px; }
.rb-note { font-size: 15px; }
.rb-num { color: var(--rb-blue-signal); }
.rb-h2--module { font-size: clamp(28px, 2.6vw, 38px); }
.rb-card .rb-mt-s { font-size: 17px; line-height: 1.6; }
.rb-num--accent { color: var(--rb-coral); }
.rb-h1--contact { font-size: clamp(34px, 3.8vw, 54px); }

/* Pills used as anchor links (the Verticals jump nav) */
a.rb-pill { text-decoration: none; }
a.rb-pill:hover { border-color: var(--rb-blue-signal); color: var(--rb-white-warm); }
.rb-section--paper a.rb-pill:hover { border-color: var(--rb-blue-signal-ink); color: var(--rb-navy-tempo); }

/* Quote pair on warm paper — no inline styles, so the surface rules live here */
.rb-section--paper .rb-pair { border-top-color: var(--rb-paper-border); }
.rb-section--paper .rb-pair__head,
.rb-section--paper .rb-pair__brief,
.rb-section--paper .rb-pair__asks { border-bottom-color: var(--rb-paper-border); }
.rb-section--paper .rb-pair__brief { color: var(--rb-ink-body); }
.rb-section--paper .rb-pair__asks { color: var(--rb-navy-tempo); }

.rb-signal__open { display: block; margin-top: 14px; color: var(--rb-coral); }
.rb-section--paper .rb-signals .rb-signal__open { color: var(--rb-coral-ink); }
.rb-signal-card .rb-signal__open { color: var(--rb-coral); }

/* "The brief says / Second Tempo asks" rendered as cards (reference §3). */
.rb-pair-card__brief { font-family: var(--rb-font-judgment); font-weight: 300; font-style: italic;
                       font-size: 21px; line-height: 1.4; color: var(--rb-blue-light); margin: 0; }
.rb-pair-card__label { font: 500 11px/1 var(--rb-font-structure); letter-spacing: .24em;
                       text-transform: uppercase; color: var(--rb-coral); margin: 22px 0 10px; }
.rb-pair-card__asks  { font-size: 17px; line-height: 1.55; color: var(--rb-white-warm); margin: 0; }

/* Second Tempo's five method stages use the module's anatomy without its box —
   the reference renders that section with no rounded or gradient surfaces. The
   Shift stage is marked by its coral number and coral statement lines, not by a
   border, so no extra decoration is invented here. */
.rb-stage-block { color: var(--rb-white-warm); }
.rb-stage-block .rb-body, .rb-stage-block p { color: var(--rb-blue-muted); }
.rb-stage-block .rb-statement { color: var(--rb-coral); }