/* ==========================================================================
   Re:Motive Media — "Registration" direction
   Component CSS. Design tokens (color/type/spacing) live in theme.json;
   this file covers layout + interaction that Global Styles can't express.
   Every selector is scoped to an rm-* class applied via the block's
   "Additional CSS class(es)" field, so nothing here touches core block
   defaults or other themes/plugins.
   ========================================================================== */

:root{
  /* Brand typeface for BOTH colour modes. These two overrides lived in the
     light block only, so light rendered the Saira brand system while dark
     fell through to theme.json's Archivo and Newsreader: two different
     typefaces depending on the toggle. The font is not a mode decision;
     it sits on html[data-theme] so the modes differ in colour alone, and
     the attribute selector keeps it ahead of WP's global-styles :root
     block regardless of print order. v1.66.4 briefly swapped this to
     Space Grotesk site-wide; reverted in v1.66.5 to Saira, per the
     brand-guideline JSON's original spec, with Space Grotesk kept only
     as a scoped accent on the footer column headings (.rm-footer__heading
     in this file). */
  --rm-line: rgba(255,255,255,.16);
  --rm-line-soft: rgba(255,255,255,.08);
  --rm-ink-70: rgba(255,255,255,.72);
  --rm-ink-55: rgba(255,255,255,.55);
  --rm-blend: screen;
}
html[data-theme]{
  --wp--preset--font-family--archivo: 'Saira', 'Saira Fallback', system-ui, sans-serif;
  --wp--preset--font-family--newsreader: 'Saira', 'Saira Fallback', system-ui, sans-serif;
}

/* ---- LIGHT mode colour override ----
   Dark ("Registration") is the baseline defined in theme.json, so only the
   light variant needs overriding here. Because these are the same custom
   properties WP generates from theme.json (--wp--preset--color--*,
   --wp--preset--font-family--*), every block that already uses var()
   picks up the swap automatically — no template or component-selector
   changes needed. */
[data-theme="light"]{
  --wp--preset--color--ink: #1e1e1e;
  --wp--preset--color--paper: #f7f4ec;
  --wp--preset--color--paper-2: #f0f8ff;
  --wp--preset--color--card: #ffffff;
  --wp--preset--color--cyan: #00a2ff;
  --wp--preset--color--cyan-dark: #00308f;
  --wp--preset--color--magenta: #ff449f;
  --wp--preset--color--magenta-dark: #cd360b;
  --wp--preset--color--accent-3: #f2f216;
  --wp--preset--color--accent-3-dark: #008110;
  --rm-line: rgba(30,30,30,.14);
  --rm-line-soft: rgba(30,30,30,.07);
  --rm-ink-70: rgba(30,30,30,.7);
  /* Was .55, which computes to #7e7d7b on the paper background: 3.68:1,
     under the 4.5:1 minimum for the eyebrows, card tags, dates and helper
     text that use it. .64 clears the threshold at 4.7:1 while keeping the
     muted relationship to the primary ink. The dark-mode value is
     unchanged; at 5.96:1 it already passes. */
  --rm-ink-55: rgba(30,30,30,.64);
  --rm-blend: multiply;
}
body{ transition:background-color .25s ease, color .25s ease; }

/* ---- Light/Dark toggle (in header.html) ---- */
.rm-theme-toggle{
  display:inline-flex; align-items:center; gap:.55rem;
  background:transparent; border:none; cursor:pointer; font:inherit;
  padding:.65rem .25rem; min-height:44px;
}
/* The thumb was positioned with hand-computed pixels that did not account
   for the track's border under border-box sizing. It sat 3px from the top
   against 5px below, and the 18px travel left it 5px from the right end
   against 3px on the left, so it read as slightly high and never quite
   reaching the far side. The geometry is derived now: the thumb centres
   vertically with top/translateY, and the travel is calculated from the
   track's own measurements, so the two end states are exact mirrors. */
.rm-theme-toggle__track{
  --tg-w:44px; --tg-h:24px; --tg-border:2px; --tg-inset:3px; --tg-thumb:14px;
  position:relative; box-sizing:border-box;
  width:var(--tg-w,44px); height:var(--tg-h,24px); border-radius:999px;
  /* Outlined track, filled thumb. The ink-filled track read as a solid
     dark blob wherever the label was absent; an outline with a solid dot
     reads as a switch in both colour modes.
     Every var() below carries a literal fallback: on an install whose
     optimisation plugin strips custom properties, the unresolved sizes
     collapsed the control to a small empty pill with no visible thumb,
     which is what a visitor reported as a stray box beside the menu. */
  background:transparent; border:var(--tg-border,2px) solid var(--wp--preset--color--ink,#1e1e1e);
  flex:none;
}
.rm-theme-toggle__thumb{
  position:absolute; top:50%; left:var(--tg-inset,3px);
  width:var(--tg-thumb,14px); height:var(--tg-thumb,14px); border-radius:50%;
  background:var(--wp--preset--color--ink,#1e1e1e);
  transform:translateY(-50%);
  transition:transform .22s cubic-bezier(.6,0,.3,1);
}
[data-theme="light"] .rm-theme-toggle__thumb{
  transform:translate(
    calc(var(--tg-w,44px) - (2 * var(--tg-border,2px)) - (2 * var(--tg-inset,3px)) - var(--tg-thumb,14px)),
    -50%);
}
.rm-theme-toggle__label{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--rm-ink-70); }

@media (prefers-reduced-motion: reduce){
  .rm-hero__display .rt::before,
  .rm-hero__display .rt::after,
  .rm-plate__fill,
  .rm-row,
  .rm-ticker__track{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* ---- Signature device: the registration mark ---------------------------
   A tiny crosshair of three multiply-blended plate colours, rendered as a
   background SVG so it survives content edits (never lives in RichText). */
.rm-eyebrow{
  /* flex, not inline-flex: core's constrained layout centres children
     with auto margins, which do nothing on inline-level boxes, so an
     inline-flex eyebrow stayed pinned to the container's padding edge
     while every block sibling centred on the measure. As a flex block
     the eyebrow's box clamps and centres like its siblings and the
     crosshair and text sit flush left inside it. */
  display:flex; align-items:center; gap:.55rem;
  font-size:.72rem !important; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:var(--rm-ink-55);
}
.rm-eyebrow::before{
  content:""; width:14px; height:14px; flex:none; display:inline-block;
  background-image:
    radial-gradient(circle at 35% 40%, rgba(0,184,230,.85) 0 45%, transparent 46%),
    radial-gradient(circle at 65% 40%, rgba(240,32,143,.85) 0 45%, transparent 46%),
    radial-gradient(circle at 50% 68%, rgba(242,194,0,.85) 0 45%, transparent 46%);
  mix-blend-mode:var(--rm-blend);
}

/* ---- Inline accent (used in place of custom spans so RichText keeps it) */
mark.rm-mark{ background:none; color:var(--wp--preset--color--magenta-dark); }
.rm-cta mark.rm-mark{ color:var(--wp--preset--color--magenta); }

/* ---- Skip link — visually hidden until keyboard-focused, then pinned
   above everything (including the sticky nav) so it's never obscured. ---- */
.rm-skip-link{
  position:absolute; top:-999px; left:0; z-index:100;
  background:var(--wp--preset--color--contrast-bg); color:var(--wp--preset--color--contrast-text);
  padding:.9rem 1.4rem; font-size:.85rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; text-decoration:none;
}
.rm-skip-link:focus{ top:0; left:0; }

/* ---- Accessibility: underline links within body/comment content only.
   Our nav, buttons, and component links (rm-nav__links, rm-section-link,
   etc.) are deliberately not underlined — they're distinguished from
   surrounding text by colour, hover state, position in a nav region, or
   an arrow icon, which satisfies WCAG 1.4.1 without literal underlines.
   Genuine body-content prose (future blog posts/pages, comments) doesn't
   have those other cues, so links there get underlined explicitly. This
   currently affects nothing on the homepage (no matching elements exist
   yet) — it's here so the moment real post/page/comment content appears,
   it's correct by default. */
.entry-content a,
.wp-block-post-content a,
.comment-content a,
.comment-body a{
  text-decoration:underline;
}

/* =================== NAV =================== */
.rm-nav{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--wp--preset--color--paper) 92%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rm-line);
}

/* WCAG 2.4.11 Focus Not Obscured (Minimum): scroll-padding-top on the root
   is the general fix — it covers plain Tab-key focus moving to *any*
   element near the top of the viewport, with or without an id, which
   browsers scroll into view using the scroll-padding mechanism. The
   :where([id]) rule below additionally covers anchor-fragment jumps
   (clicking a Services/Work/Contact nav link) specifically. Value
   matches the sticky nav's approximate height plus a small buffer. */
html{ scroll-padding-top:100px; }
:where([id]){ scroll-margin-top:100px; }

/* WCAG 2.4.7/1.4.11: a single fixed outline colour can't guarantee 3:1
   contrast against every background this design uses (navy, cream,
   cyan, magenta, green/yellow all appear as backgrounds somewhere). A
   two-tone "sandwich" ring — one light, one dark — guarantees at least one ring
   contrasts against any background colour, without needing per-surface
   overrides. Scoped to the theme's own content regions so it can't leak
   into unrelated wp-admin or plugin UI. */
.rm-nav :focus-visible,
.rm-hero :focus-visible,
.rm-section :focus-visible,
.rm-cta :focus-visible,
.rm-footer :focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 4px #000;
  border-radius:2px;
}

/* The row is a child of the constrained .rm-nav, so without the wide
   measure above it sat at the 740px contentSize, centred, out of step with
   the 1320px content below it. At 740px its intrinsic width (about 773px
   after the Insights link landed in v1.15.1) exceeded the box, so
   flex-wrap dropped the theme toggle onto its own line at every width,
   desktop included. With the row on the wide measure there is room for one
   line, so wrapping is switched off and the collapse below is deliberate. */
.rm-nav__row{ display:flex; align-items:center; justify-content:space-between; min-height:84px; gap:1.5rem; flex-wrap:nowrap; padding-block:.5rem; }
.rm-brand{ display:flex; align-items:center; }
.rm-brand img{ height:42px; width:auto; }
.rm-nav__links{ font-size:1rem; font-weight:600; letter-spacing:.02em; }
.rm-nav__links .wp-block-navigation-item a{ position:relative; padding-block:.6rem !important; text-decoration:none !important; }
/* Core's navigation block underlines the link text on hover, which stacked
   a browser underline directly above the magenta bar. The bar is the only
   hover mark this nav uses. */
.rm-nav__links .wp-block-navigation-item a:hover,
.rm-nav__links .wp-block-navigation-item a:focus,
.rm-nav__links .wp-block-navigation-item a:focus-visible{ text-decoration:none !important; }
.rm-nav__links .wp-block-navigation-item a::after{
  /* 3px: the 2px bar read as a hairline against the nav's 16px bold
     type, particularly in dark mode. The offset drops with the height so
     the gap between text and bar is unchanged. */
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:var(--wp--preset--color--magenta); transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease;
}
.rm-nav__links .wp-block-navigation-item a:hover::after,
.rm-nav__links .wp-block-navigation-item a:focus-visible::after{ transform:scaleX(1); }
.rm-nav__cta{ white-space:nowrap; }
.rm-nav__cta a{ font-size:.82rem !important; }

/* =================== HERO =================== */
.rm-hero{ position:relative; overflow:hidden; padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3rem,6vw,5rem) !important; }
.rm-hero::before{
  content:""; position:absolute; right:clamp(-60px,1vw,20px); top:8%;
  width:clamp(220px,26vw,420px); aspect-ratio:838/645;
  opacity:.2; pointer-events:none; mix-blend-mode:var(--rm-blend); z-index:0;
  background-image:url('../images/remotive-mark.png');
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
/* AVIF is 21KB against the PNG's 50KB. The PNG declaration above stays the
   default so a browser without AVIF support never sees this block; the
   image-set() test is the reliable AVIF feature query, since
   @supports(background-image:url(...)) is true everywhere and would tell
   us nothing about format support. */
@supports (background-image:image-set(url('../images/remotive-mark.avif') type('image/avif'))){
  .rm-hero::before{
    background-image:image-set(url('../images/remotive-mark.avif') type('image/avif'),
                               url('../images/remotive-mark.png') type('image/png'));
  }
}
.rm-hero > *{ position:relative; z-index:1; }

/* Direct children of is-layout-constrained sections default to WP's
   narrow 740px "content" measure (theme.json settings.layout.contentSize)
   — appropriate for reading-width prose, too narrow for this homepage's
   bold marketing layout. Explicit override to the wide 1320px measure
   instead (theme.json's wideSize), applied uniformly to every child in
   each affected section so they all share one consistent box and stay
   mutually left-aligned, rather than centering just the elements that
   individually need more room (which would misalign left edges against
   this left-aligned design's other elements — this design isn't
   centered, so two different centered widths side by side would look
   like a ragged, unintentional-looking left margin). Not reliant on
   WP's alignwide class cascade — fully explicit and self-contained. */
.rm-measure-wide,
.rm-hero > *,
#services > *,
#work > *,
#problem > *,
#why > *,
#about > *,
.rm-nav__row,
.rm-footer > * {
  max-width:var(--wp--style--global--wide-size) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* The interior-page alignment pass (v1.25.0) applies .rm-measure-wide to
   section wrappers on Services, Case Studies, Contact, the two landing
   pages and the blog list views. The max-width above widens the wrapper
   itself, but a constrained group's children — and children of nested
   constrained groups like .rm-service-detail — are clamped by core's
   layout rule to var(--wp--style--global--content-size), so they would
   still render at 740px, centred, inside the widened box. Custom
   properties resolve at the element where they are read, so redefining
   the content-size variable on the wrapper makes every constrained
   descendant clamp to the wide measure instead, however deeply nested,
   with no per-child overrides. Elements with their own explicit caps
   (60ch lists, 54ch leads, the 520px form) keep them and stay pinned to
   the shared left edge by their own zeroed side margins. */
.rm-measure-wide{
  --wp--style--global--content-size: var(--wp--style--global--wide-size);
}
.rm-hero__display{
  margin:0 0 1.6rem !important;
  font-size:var(--wp--preset--font-size--display) !important;
  line-height:.94 !important;
}
.rm-hero__display .rt{ position:relative; display:inline-block; }
.rm-hero__display .rt::before,
.rm-hero__display .rt::after{
  content:attr(data-t); position:absolute; inset:0; z-index:-1;
  mix-blend-mode:var(--rm-blend); opacity:0;
  transition:opacity .18s ease, transform .18s ease;
}
.rm-hero__display .rt::before{ color:var(--wp--preset--color--cyan); }
.rm-hero__display .rt::after{ color:var(--wp--preset--color--magenta); }
.rm-hero__display .rt:hover::before{ opacity:.85; transform:translate(-6px,3px); }
.rm-hero__display .rt:hover::after{ opacity:.85; transform:translate(6px,-3px); }
.rm-hero__display .is-magenta{ color:var(--wp--preset--color--magenta-dark); }
.rm-hero__sub{ font-size:var(--wp--preset--font-size--lead) !important; color:var(--rm-ink-70) !important; max-width:44ch; margin-bottom:2rem !important; }
.rm-hero__actions{ margin-bottom:1.1rem !important; }
.rm-hero__reassure{ font-size:.8rem !important; color:var(--rm-ink-55) !important; font-weight:600; letter-spacing:.01em; }

/* =================== TICKER =================== */
.rm-ticker{ background:var(--wp--preset--color--ink); color:var(--wp--preset--color--paper); overflow:hidden; }
.rm-ticker__track{ display:flex; width:max-content; animation:rm-scroll 26s linear infinite; }
/* Paused off-screen via IntersectionObserver (assets/js/ticker.js) — a
   continuously-running animation costs nothing visible while scrolled
   out of view, but still keeps compositing/repainting on most browsers
   unless explicitly paused, so this is a real (if small) performance win
   on longer sessions. */
.rm-ticker__track.is-paused{ animation-play-state:paused; }
@keyframes rm-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.rm-ticker__item{
  padding:.85rem 2.4rem; font-size:.85rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.18);
}

/* =================== SECTION WRAPPER =================== */
.rm-section{ padding-block:clamp(4.5rem,9vw,8rem) !important; }
/* Consecutive sections were each contributing a full block of padding, so
   the space between one section's last line and the next section's eyebrow
   came to 256px on a desktop screen: not rhythm, a hole. The templates try
   to say this already with an inline padding-top:0 on stacked sections,
   but the rule above carries !important and overrode it. Rather than drop
   that flag, which other rules rely on, a following section states its own
   smaller top padding: enough to separate, not enough to strand. */
.rm-section + .rm-section{ padding-top:clamp(2.5rem,5vw,4rem) !important; }
/* Both sides of the join, so the space between two sections is one
   comfortable block rather than two stacked ones. A section that opens or
   closes a run keeps its full padding, which is what separates the page's
   content from the header and the footer. */
.rm-section:has(+ .rm-section){ padding-bottom:clamp(2.5rem,5vw,4rem) !important; }
/* The call-to-action band brings its own generous padding, so the section
   handing over to it does not need a full block underneath as well. */
.rm-section:has(+ .rm-cta){ padding-bottom:clamp(2.5rem,5vw,4rem) !important; }

/* The `#services > *` / `#work > *` overrides further down widen the section
   *children* to the 1320px wide measure, but a constrained group's own box
   still falls back to the theme's own 740px content measure — so those
   children were
   trapped inside a 740px, horizontally-centred parent and rendered
   half-width and shifted inward, misaligned with the full-bleed hero above
   them. Widening the section wrappers themselves to the wide measure, pinned
   to the left edge, lets the content share the hero's left margin and span
   the intended width. The full-bleed bands (.rm-stats, .rm-cta) are
   alignfull and unaffected. */
/* Centred on the wide measure, the same as the header row and the footer.
   v1.16.2 pinned these hard left to cure a hero that had its headline on one
   edge and its sub-heading floating in the middle. That fixed the hero's
   internal alignment but broke the page's: at 1900px the content sat 48px
   from the left with a 532px gap on the right, while the header and footer
   sat centred. Three different alignments on one page. Centring all of them
   gives the main content the same breathing space on both sides. */
#services, #work, #problem, #why, #about{
  max-width:var(--wp--style--global--wide-size) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* =================== SECTION HEAD =================== */
.rm-section-head{ display:flex !important; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:2.75rem !important; flex-wrap:wrap; }
.rm-section-head .rm-eyebrow{ margin-bottom:.9rem; display:inline-flex; }
.rm-section-link a{ display:inline-block; padding:.5rem 0; }
.rm-section-link{ font-size:.82rem !important; font-weight:700; text-transform:uppercase; letter-spacing:.05em; border-bottom:2px solid var(--wp--preset--color--magenta); padding-bottom:2px; }

/* =================== SERVICES ("plates") =================== */
.rm-plates{
  display:grid !important;
  /* minmax(0,1fr), not bare 1fr — grid tracks sized with a bare `fr`
     unit still respect each cell's min-content width by default (the
     implicit minimum is `auto`, not 0), so a track whose content is
     wider than an even third can force that whole column wider than
     its siblings even though every track is nominally "1fr". Explicit
     minmax(0,1fr) removes that implicit minimum and guarantees true
     equal thirds regardless of content. */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px !important; background:var(--rm-line); border:1px solid var(--rm-line);
}
.rm-plate{
  position:relative; background:var(--wp--preset--color--card); padding:2.2rem 1.8rem 2rem !important;
  /* flex-start, not space-between: with the fill pulled out of flow, the
     three remaining children (swatch row, name, description) were spread
     across the full 230px, floating the swatch, name and copy apart with
     uneven gaps. Top-stacking keeps a tight, deliberate rhythm; the card's
     min-height still gives the grid its even row bottoms. */
  min-height:230px; display:flex !important; flex-direction:column; justify-content:flex-start;
  overflow:hidden; isolation:isolate;
}
.rm-plate__fill{
  position:absolute !important; inset:0; z-index:-1; transform:translateY(100%);
  transition:transform .28s cubic-bezier(.6,0,.3,1);
  min-height:0 !important;
}
.rm-plate:hover .rm-plate__fill, .rm-plate:focus-within .rm-plate__fill{ transform:translateY(0); }
.rm-plate--cyan .rm-plate__fill{ background:var(--wp--preset--color--cyan); }
.rm-plate--magenta .rm-plate__fill{ background:var(--wp--preset--color--magenta); }
.rm-plate--accent-3 .rm-plate__fill{ background:var(--wp--preset--color--accent-3); }
.rm-plate--ink .rm-plate__fill{ background:var(--wp--preset--color--ink); }
.rm-plate--ink:hover, .rm-plate--ink:focus-within{ color:var(--wp--preset--color--paper); }
.rm-plate--key{ background:repeating-linear-gradient(45deg, var(--wp--preset--color--paper-2) 0 2px, var(--wp--preset--color--card) 2px 10px); }
.rm-plate--key .rm-plate__fill{ display:none; }
.rm-plate__top{ display:flex !important; align-items:center; justify-content:space-between; }
.rm-plate__id{ font-size:.68rem !important; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--rm-ink-55); margin:0 !important; }
.rm-plate:hover .rm-plate__id{ color:inherit; opacity:.75; }
.rm-plate__swatch{ width:16px; height:16px; border:1.5px solid var(--wp--preset--color--ink); flex:none; }
.rm-plate--cyan .rm-plate__swatch{ background:var(--wp--preset--color--cyan); }
.rm-plate--magenta .rm-plate__swatch{ background:var(--wp--preset--color--magenta); }
.rm-plate--accent-3 .rm-plate__swatch{ background:var(--wp--preset--color--accent-3); }
.rm-plate--ink .rm-plate__swatch{ background:var(--wp--preset--color--ink); }
.rm-plate--key .rm-plate__swatch{ background:transparent; border-style:dashed; }
.rm-plate__name{ font-size:1.5rem !important; letter-spacing:-.01em; margin:1.1rem 0 .5rem !important; }
.rm-plate__desc{ font-size:.92rem !important; color:var(--rm-ink-70) !important; line-height:1.5; margin:0 !important; text-transform:none; font-weight:400; }
.rm-plate:hover .rm-plate__desc, .rm-plate--ink:hover .rm-plate__desc{ color:inherit !important; opacity:.9; }
.rm-plates__note{ margin-top:1.25rem !important; margin-left:max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important; margin-right:0 !important; font-size:.82rem !important; color:var(--rm-ink-55) !important; max-width:60ch; }

/* =================== PROOF: featured spread =================== */
.rm-spread{ border:1px solid var(--rm-line) !important; margin-bottom:1px !important; gap:0 !important; }
.rm-spread__image{
  background:
    linear-gradient(135deg, rgba(0,184,230,.9), rgba(240,32,143,.85) 55%, rgba(242,194,0,.9)),
    var(--wp--preset--color--ink);
  min-height:420px; position:relative; display:flex !important; align-items:flex-end;
}
.rm-spread__image-label{
  color:var(--wp--preset--color--paper) !important; font-weight:900 !important; font-size:1.1rem !important;
  letter-spacing:.04em; text-transform:uppercase; mix-blend-mode:difference;
  padding:1.8rem !important; margin:0 !important;
}
.rm-spread__body{ background:var(--wp--preset--color--card); padding:clamp(2rem,4vw,3.5rem) !important; display:flex !important; flex-direction:column; justify-content:center; }
.rm-spread__metric{ font-size:var(--wp--preset--font-size--stat) !important; color:var(--wp--preset--color--magenta-dark) !important; line-height:1 !important; margin:0 0 .4rem !important; }
.rm-spread__label{ font-size:.82rem !important; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--rm-ink-70) !important; margin-bottom:1.6rem !important; }
.rm-spread__body p.has-drop-cap:first-letter{
  font-family:var(--wp--preset--font-family--newsreader); font-weight:600; font-size:3.4rem;
  line-height:.8; padding:.05em .12em 0 0; color:var(--wp--preset--color--ink);
}
.rm-spread__body p.has-drop-cap{ font-size:1rem !important; line-height:1.7; color:var(--rm-ink-70) !important; margin:0 0 1.5rem !important; }
.rm-spread__quote{ font-family:var(--wp--preset--font-family--newsreader) !important; font-style:italic; font-weight:500;
  font-size:clamp(1.15rem,1.8vw,1.45rem) !important; border-left:3px solid var(--wp--preset--color--magenta) !important;
  border-width:0 0 0 3px !important; padding-left:1.1rem !important; margin:0 !important; color:var(--wp--preset--color--ink); }
.rm-spread__quote cite{ display:block; font-style:normal; font-family:var(--wp--preset--font-family--archivo); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--rm-ink-55); margin-top:.6rem; }

/* ---- Proof: case study rows ---- */
/* Core's flow layout puts a 24px margin between sibling blocks, which here
   sat between rows that are meant to be a continuous list divided by their
   own hairlines. It was invisible while every row was transparent, and
   appeared as a band of dead space the moment one row took a hover
   background, which read as the row growing or jumping. The rows are
   contiguous; the hairline is the separator. */
.rm-rows{ border-inline:1px solid var(--rm-line); border-bottom:1px solid var(--rm-line); }
.rm-rows > * + *{ margin-block-start:0 !important; }
.rm-row{
  align-items:center !important; gap:1.25rem !important;
  padding:1.35rem 1.6rem !important; border-top:1px solid var(--rm-line);
  transition:background .15s ease;
}
.rm-row:hover{ background:var(--wp--preset--color--card); }
.rm-row__metric{ font-size:1.6rem !important; margin:0 !important; }
.rm-row__client{ font-weight:700 !important; font-size:.98rem !important; margin:0 !important; text-transform:none !important; letter-spacing:0 !important; }
.rm-row__desc{ font-size:.88rem !important; color:var(--rm-ink-70) !important; margin:0 !important; }
.rm-row__link{ font-size:.85rem !important; font-weight:700; white-space:nowrap; }
.rm-row__link a{ color:var(--wp--preset--color--ink); display:inline-block; padding:.6rem 0; }
.rm-row:hover .rm-row__link a{ color:var(--wp--preset--color--magenta-dark); }

/* =================== STATS =================== */
.rm-stats{ border-top:1px solid var(--rm-line) !important; border-bottom:1px solid var(--rm-line) !important; gap:0 !important; }
.rm-stat{ padding:clamp(2.5rem,5vw,3.5rem) 1.5rem !important; text-align:center; border-left:1px solid var(--rm-line); }
.rm-stat:first-child{ border-left:none; }
.rm-stat__value{ font-size:var(--wp--preset--font-size--stat) !important; line-height:1 !important; margin:0 0 .6rem !important; }
.rm-stat--cyan .rm-stat__value{ color:var(--wp--preset--color--cyan-dark) !important; }
.rm-stat--magenta .rm-stat__value{ color:var(--wp--preset--color--magenta-dark) !important; }
.rm-stat--accent-3 .rm-stat__value{ color:var(--wp--preset--color--accent-3-dark) !important; }
.rm-stat__label{ font-size:.82rem !important; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--rm-ink-70) !important; margin:0 !important; }

/* The band is a full-bleed rule between two sections, so it needs no
   breathing room of its own: the sections on either side already supply
   their own generous padding, and at full section rhythm that read as two
   large empty areas rather than as a divider. Halved where a section meets
   the band, and only there, so every other section keeps its spacing. */
.rm-section:has(+ .rm-stats){ padding-bottom:clamp(2rem,4vw,3.5rem) !important; }
.rm-stats + .rm-section{ padding-top:clamp(2rem,4vw,3.5rem) !important; }
/* :has() is unsupported in a few older browsers, where the section above
   simply keeps its normal padding; the band still reads correctly, just
   with more space above it. */

/* =================== CTA =================== */
/* The band keeps its full-bleed dark background, but its contents now sit on
   the same centred wide measure as every other section, and read left to
   right like the rest of the page. It was previously a 740px centred column
   with centred text, which was a third layout language on a page that only
   has two. The padding expression centres the content without needing a
   wrapper element in the template: it is the root padding until the viewport
   is wider than the wide measure, and half the leftover after that.

   The arrangement echoes .rm-section-head, used by "What we do / All
   services": the statement sits on the left and the thing you act on sits on
   the right, sharing a baseline. */
.rm-cta{
  text-align:left;
  /* The band used to take its height from its children's margins, which the
     grid removed. Explicit block padding is the honest way to state it, and
     it keeps the rhythm close to .rm-section without matching it exactly,
     since this band is a punctuation mark rather than a full section. */
  padding-block:clamp(3.5rem,7vw,6rem);
  /* This band is measured a little narrower than the wide layout the rest
     of the page uses. The headline sits on one line while the form column
     is fixed, so every extra pixel of viewport landed in the flexible
     track between them, and past about 1500px that gap read as a hole in
     the middle of the band. Capping the band's own measure keeps the two
     halves in conversation without moving either away from its edge. */
  --rm-cta-measure:min(var(--wp--style--global--wide-size, 1320px), 1140px);
  padding-inline:max(var(--wp--custom--root-padding, clamp(1.25rem,5vw,3rem)),
                     calc((100% - var(--rm-cta-measure)) / 2)) !important;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(min(340px,100%),400px);
  column-gap:clamp(1.75rem,3.5vw,3.5rem);
  row-gap:1rem;
  align-items:center;
}
/* The constrained layout would otherwise clamp each child to the 740px
   content measure and centre it, which is what the grid is replacing. */
.rm-cta > *{ max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.rm-cta__title{ grid-column:1; grid-row:1 / span 3; align-self:center; }
.rm-cta__form{ grid-column:2; grid-row:1; }
.rm-cta__status{ grid-column:2; grid-row:2; }
.rm-cta__note{ grid-column:2; grid-row:3; }

/* Below the point where two columns stop fitting, it stacks in reading
   order and stays left-aligned, so the section still matches the others. */
@media (max-width:860px){
  /* minmax(0,1fr) rather than 1fr: a plain 1fr track cannot shrink below its
     content's minimum width, which on a 320px screen pushed the page 9px
     sideways. */
  .rm-cta{ grid-template-columns:minmax(0,1fr); }
  .rm-cta__title, .rm-cta__form, .rm-cta__status, .rm-cta__note{ grid-column:1; grid-row:auto; }
}
/* margin-left/right must stay auto so the constrained-layout centring is
   preserved; the earlier `margin:0 0 2rem` shorthand zeroed them, which
   pinned the title hard-left while the form and note (which centre
   themselves) sat in the middle — the "text all over the place" effect. */
.rm-cta__title{ font-size:clamp(2rem,4.4vw,3.4rem) !important; margin:0 !important; line-height:1.05; }
/* Keep the emphasised phrase intact so the line breaks before it
   ("READY TO GET" / "UN-IGNORED?") rather than after the hyphen. */
.rm-cta__title mark.rm-mark{ white-space:nowrap; }
.rm-cta__form{ display:flex !important; justify-content:flex-start; gap:.75rem; flex-wrap:wrap; width:100%; margin:0 !important; }
.rm-cta__form input[type="email"]{
  flex:1 1 220px; min-width:min(220px,100%); box-sizing:border-box; background:transparent; border:2px solid rgba(255,255,255,.5);
  color:var(--wp--preset--color--contrast-text); padding:1rem 1.2rem; font-size:1rem;
}
.rm-cta__form input[type="email"]::placeholder{ color:rgba(255,255,255,.5); }
.rm-cta__form button, .rm-cta__form .wp-block-button__link{
  /* Fixed near-black label: it sits on magenta in both modes, so it must
     not invert with the ink token, which turned it white in dark and
     dropped the pair to 4.25:1. */
  background:var(--wp--preset--color--magenta) !important; color:#14141f !important;
  border-color:var(--wp--preset--color--magenta) !important;
}
:root:not([data-theme="light"]) .rm-cta__form button,
:root:not([data-theme="light"]) .rm-cta__form .wp-block-button__link{
  background:var(--wp--preset--color--magenta-dark) !important;
  border-color:var(--wp--preset--color--magenta-dark) !important;
}
.rm-cta__form button{
  padding:1rem 1.6rem; font-size:.88rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; border:2px solid var(--wp--preset--color--magenta);
}
.rm-cta__form button:hover, .rm-cta__form .wp-block-button__link:hover{
  background:var(--wp--preset--color--accent-3) !important; border-color:var(--wp--preset--color--accent-3) !important;
}
.rm-cta__note{ margin-top:0 !important; font-size:.8rem !important; color:rgba(255,255,255,.55) !important; }
/* The reassurance line is reused inside the band, where its own muted
   ink colour lands on the navy surface at 1.01:1 and disappears. On the
   band it takes the band's own muted white, the same treatment the note
   beside it already uses. */
.rm-cta .rm-hero__reassure{ color:rgba(255,255,255,.62) !important; }

/* The band must invert with the mode, for the same reason fill buttons
   do: its background is contrast-bg, which in dark mode equals the navy
   paper, so the whole band merged into the page (measured ratio 1.00 in
   the v1.25.3 dark-mode verification) — white text stayed readable but
   the punctuation-mark surface vanished. In dark the band flips to
   ink-on-paper like the ticker: a white band on navy, the mirror of the
   navy band on cream that light mode keeps. The whites hardcoded inside
   the band (input border and text, placeholder, note) flip with it;
   the magenta submit button reads on either surface. :root:not(light)
   covers both the explicit dark attribute and the no-attribute default,
   and outweighs the preset utility class core marks !important. */
:root:not([data-theme="light"]) .rm-cta{
  background-color:var(--wp--preset--color--ink) !important;
  color:var(--wp--preset--color--paper) !important;
}
:root:not([data-theme="light"]) .rm-cta__form input[type="email"]{
  border-color:rgba(26,26,46,.5); color:var(--wp--preset--color--paper);
}
:root:not([data-theme="light"]) .rm-cta__form input[type="email"]::placeholder{
  color:rgba(26,26,46,.5);
}
:root:not([data-theme="light"]) .rm-cta__note,
:root:not([data-theme="light"]) .rm-cta .rm-hero__reassure{
  /* .55 computed to 3.85:1 on the inverted white band; .68 clears 4.5. */
  color:rgba(26,26,46,.68) !important;
}
/* Fill buttons sitting on the band collide with it in both modes: the
   subpage bands close with a fill button, and measured on the band the
   fill's ink background is near-identical to the light band's navy
   (1.02) and identical to the dark band's inverted white (1.00) — the
   button's shape vanishes while its label floats. On the band the fill
   flips to paper-on-ink in either mode: a cream button on the navy
   light band, a navy button on the white dark band. The magenta hover
   reads on either surface. */
.rm-cta .wp-block-button.is-style-fill > .wp-block-button__link{
  background-color:var(--wp--preset--color--paper) !important;
  color:var(--wp--preset--color--ink) !important;
  border-color:var(--wp--preset--color--paper) !important;
}

/* Honeypot — visually hidden and unreachable by keyboard/screen reader
   (not just display:none, which some bots skip filling correctly; a
   field that's technically present but never perceivable is the more
   reliable trap). Real visitors never see or reach it; if it arrives
   filled, the handler in inc/cta-form-handler.php silently discards the
   submission as spam. */
.rm-cta__honeypot{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:0;
}

/* Status message after a submit attempt (success/error), injected by
   assets/js/lead-form-status.js reading the redirect's query string. Uses
   role="status"/aria-live="polite" (set in the template) so screen
   readers announce it without stealing focus — WCAG 4.1.3. */
.rm-cta__status{
  margin-top:1rem; font-size:.85rem; font-weight:600;
  padding:.15rem 0; min-height:0;
}
.rm-cta__status[data-state="success"]{ color:var(--wp--preset--color--accent-3); }
.rm-cta__status[data-state="error"]{ color:var(--wp--preset--color--magenta); }

/* =================== FOOTER =================== */
.rm-footer{ border-top:1px solid var(--rm-line); }
.rm-footer__brand img{ height:46px; width:auto; }
.rm-footer__desc{ font-size:.9rem !important; color:var(--rm-ink-70) !important; max-width:32ch; line-height:1.55; }
/* The 32ch cap suits the brand blurb it was written for, but the same
   class dresses the contact column's email and address, boxing them
   into ~260px inside a wider column and leaving a dead right rag on the
   footer's last edge. The contact column gets the full column width. */
.rm-footer__top > .wp-block-column:last-child .rm-footer__desc{ max-width:none; }

/* Footer column balance. The brand column carried an inline 34% basis, which
   reserved far more width than its content needs and opened a dead gap before
   the first link column, while the contact column was left so narrow that the
   e-mail address broke mid-word. Overriding the flex distribution: the brand
   column sizes to roughly its content, the two link columns take an equal
   share, and the contact column takes a slightly larger one so the address and
   e-mail sit on their own lines. Top-aligned so the section headings share a
   baseline across the row. */
.rm-footer__top{ align-items:start !important; column-gap:clamp(2rem,4vw,3.5rem) !important; }
.rm-footer__desc a{ overflow-wrap:anywhere; }
/* Guarded above WP's 781px column-stacking breakpoint so it never competes
   with core's flex-basis:100% !important rule that stacks columns on mobile. */
@media (min-width:782px){
  .rm-footer__top > .wp-block-column{ flex:1 1 0 !important; }
  .rm-footer__top > .wp-block-column:first-child{ flex:1.4 1 0 !important; min-width:220px; }
  .rm-footer__top > .wp-block-column:last-child{ flex:1.25 1 0 !important; }
}
/* Between 782px and 900px the four columns squeezed the brand column to
   220px. Wrapping to two columns across that band gives an intermediate
   state, rather than jumping from four columns straight to fully stacked
   at WP core's 781px breakpoint. The :last-child selector must be
   repeated here: the four-column rules above win on specificity over a
   bare .wp-block-column even though this block comes later, and with
   flex-basis:0 surviving into the wrap band the fourth column was
   crushed to ~8px beside two 44% siblings, its content painting past
   the viewport — caught in the v1.25.1 rendered verification. */
@media (min-width:782px) and (max-width:900px){
  .rm-footer__top{ flex-wrap:wrap !important; }
  .rm-footer__top > .wp-block-column,
  .rm-footer__top > .wp-block-column:last-child{ flex:1 1 44% !important; min-width:0 !important; }
  .rm-footer__top > .wp-block-column:first-child{ flex:1 1 100% !important; }
}
/* The headings were quieter than the links they label — .72rem at 55%
   ink under .9rem full-ink links, an inverted hierarchy. Full ink and
   the heaviest weight make them read as headers while staying in the
   small-caps eyebrow register. */
.rm-footer__heading{ font-family:'Space Grotesk', 'Saira', 'Saira Fallback', system-ui, sans-serif; font-size:.92rem !important; font-weight:900; text-transform:uppercase; letter-spacing:.1em; color:var(--wp--preset--color--ink) !important; margin-bottom:1rem !important; }
/* WordPress emits its 24px block gap between the vertical navigation's
   items (on the list container, per the header-nav lesson), and stacked
   on the links' own .5rem block padding it spread each column to ~40px
   per item. The gap is zeroed on both possible carriers; the padding
   alone gives a 1rem rhythm and keeps the tap targets. */
.rm-footer__links,
.rm-footer__links .wp-block-navigation__container{ gap:0 !important; }
.rm-footer__links .wp-block-navigation-item a{ font-size:.9rem !important; display:inline-block; padding-block:.5rem !important; }
.rm-footer__links .wp-block-navigation-item a:hover{ color:var(--wp--preset--color--magenta-dark) !important; }
.rm-footer__bottom{ padding-top:1.75rem !important; border-top:1px solid var(--rm-line-soft) !important; font-size:.78rem !important; color:var(--rm-ink-55) !important; }
/* ---- Social icon links (replaces the old text-based nav-link socials) ---- */
.rm-footer__socials{ display:flex; align-items:center; flex-wrap:wrap; gap:.25rem; }
.rm-footer__socials--left{ margin-top:.25rem; }
.rm-social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:10px; box-sizing:border-box;
  color:var(--wp--preset--color--ink); opacity:.75;
  transition:opacity .15s ease, color .15s ease;
}
.rm-social-link svg{ width:20px; height:20px; display:block; }
.rm-social-link:hover, .rm-social-link:focus-visible{
  opacity:1; color:var(--wp--preset--color--magenta-dark);
}

/* =================== RESPONSIVE =================== */
@media (max-width:900px){
  .rm-plates{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rm-spread{ flex-direction:column !important; }
  .rm-spread__image{ min-height:260px; }
  /* Previously display:none here, which dropped the proof-row descriptions
     on every tablet. That is content loss rather than a layout change, so
     the text stays and the row reflows instead. */
  .rm-row__desc{ font-size:.85rem; }
  .rm-stats{ flex-direction:column !important; }
  .rm-stat{ border-left:none; border-top:1px solid var(--rm-line); }
  .rm-stat:first-child{ border-top:none; }

  /* Extra breathing room in the mobile nav overlay specifically — base
     rules above (.6rem/.5rem, applied at every width) already satisfy
     WCAG 2.5.8's 24x24px minimum; this is just added comfort on touch. */
  .rm-nav__links .wp-block-navigation-item a{ padding-block:.85rem !important; }
}
@media (max-width:600px){
  .rm-plates{ grid-template-columns:1fr; }
  /* Was .rm-hero__mark, a class that appears in no template, so this rule
     had never once hidden anything and the watermark sat behind the
     headline on every phone. The mark is drawn by .rm-hero::before. */
  .rm-hero::before{ display:none; }
  .rm-row{ flex-direction:column !important; align-items:flex-start !important; }
}


/* =================== HOMEPAGE FRAME COMPONENTS (v1.14.0) =================== */

/* Longer positioning headline sits below display-word scale. */
.rm-hero__display.is-statement{ font-size:clamp(2rem,5.2vw,3.75rem) !important; line-height:1.06; }

/* Section head spacing for the #about wp:html section, which still uses
   the flat eyebrow/h2 markup. Problem and Why moved to the shared
   .rm-section-head wrapper in v1.65.6 to carry a right-aligned link like
   the Services/Work/Team sections, so their spacing now comes from
   .rm-section-head .rm-eyebrow and no longer needs a rule here; keeping
   a stale #problem > h2 selector around after the h2 stopped being a
   direct child would just be dead weight. */
#about .rm-eyebrow{ display:inline-flex; margin:0 0 .9rem; }
#about > h2{ margin:0 0 .25rem; }

/* Problem we solve + Why us */
/* Both grids carry eight items at four per row, by explicit request, so
   the columns are explicit rather than intrinsic: 4 across on desktop, 2
   on tablets, 1 on phones. Every tier fills its rows evenly. */
.rm-problems,
.rm-whys{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:1.75rem; }
@media (max-width:1100px){
  .rm-problems,
  .rm-whys{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .rm-problems,
  .rm-whys{ grid-template-columns:1fr; }
}
.rm-problem{ border-top:2px solid var(--rm-line); padding-top:.9rem; }
.rm-problem h3{ font-size:1.05rem; margin:0 0 .35rem; line-height:1.2; }
.rm-problem p{ font-size:.92rem; color:var(--rm-ink-70); margin:0; }

/* What we do — three modular blocks */
/* Three items, so this resolves to 3, 2 or 1 columns and never orphans a
   card. 290px is the measured point below which the longest service line
   ("Own performance marketing, digital marketing and SEO across Singapore
   and Malaysia") starts breaking badly. */
.rm-blocks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:1.5rem; margin-top:1.75rem; }
.rm-block{ display:flex; flex-direction:column; background:var(--wp--preset--color--card); border:1px solid var(--rm-line); border-top:3px solid var(--rm-line); border-radius:6px; padding:1.2rem 1.25rem; }
.rm-block--create{ border-top-color:var(--wp--preset--color--magenta); }
.rm-block--capture{ border-top-color:var(--wp--preset--color--cyan); }
.rm-block--data{ border-top-color:var(--wp--preset--color--accent-3-dark); }
.rm-block__name{ font-size:1.2rem; margin:0 0 .1rem; line-height:1.15; }
/* magenta on paper is 2.90:1 and cyan 2.51:1, both under the 3:1 that
   even large bold text needs. The -dark ramp of each hue carries the same
   identity at 4.63:1 and 10.5:1, and the dark mode keeps the bright
   accents, which read at 4.02:1 and 5.84:1 on the card surface. */
.rm-block--create .rm-block__name{ color:var(--wp--preset--color--magenta-dark); }
/* On the card surface the dark palette's magenta-dark reads 4.02:1,
   short of 4.5. Cards are lighter than the page, so the on-card accent
   is lifted one step; navy-surface uses keep the palette value. */
:root:not([data-theme="light"]) .rm-block--create .rm-block__name,
:root:not([data-theme="light"]) .rm-spread__metric{ color:#ff66b8 !important; }
.rm-block--capture .rm-block__name{ color:var(--wp--preset--color--cyan-dark); }
.rm-block--data .rm-block__name{ color:var(--wp--preset--color--accent-3-dark); }
.rm-block__role{ font-size:.85rem; color:var(--rm-ink-70); margin:0 0 .9rem; }
.rm-block__list{ flex:1 1 auto; }
.rm-block__list p{ margin:0 0 .65rem; font-size:.92rem; color:var(--rm-ink-70); }
.rm-block__list strong{ display:block; color:var(--wp--preset--color--ink); font-weight:700; }
.rm-block__outcome{ margin:.4rem 0 0; padding-top:.7rem; border-top:1px solid var(--rm-line); font-size:.85rem; font-weight:700; }
.rm-blocks__note{ margin-top:1.15rem !important; font-size:.95rem; color:var(--rm-ink-70); }

/* Why Re:Motive */
.rm-why h3{ font-size:1.05rem; margin:0 0 .35rem; line-height:1.2; }
.rm-why p{ font-size:.9rem; color:var(--rm-ink-70); margin:0; }

/* About teaser */
.rm-about__lead{ font-size:1.15rem; line-height:1.5; max-width:52ch; margin:0 0 .5rem !important; }
/* Team grid. Six members, so the steps are 6 across on wide desktop, 3 on
   compact desktop and tablet, 2 from 700px down. Portraits stay legible at
   two across on the narrowest screens, so this grid does not collapse to
   one column the way the abstract tiles did. */
/* Four per row everywhere, per the standing instruction: the homepage
   teaser and the About grid share the tier set, 4 on desktop, 2 on
   tablets, 1 on phones. */
.rm-team{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:1.75rem; }
@media (max-width:1100px){
  .rm-team{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .rm-team{ grid-template-columns:1fr; }
}
.rm-team__member{ margin:0; }
.rm-team__photo{
  aspect-ratio:4/5; border-radius:6px; overflow:hidden;
  background:linear-gradient(135deg,var(--rm-line),var(--wp--preset--color--paper-2));
  display:flex; align-items:flex-end; padding:.6rem;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--rm-ink-55);
}
.rm-team__photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; }

/* ---- Before/after hover portraits ----
   Two crops of the same person layered in one tile: the base sits as the
   tile's background, the alternate fades in over it on hover or touch.
   URLs are stylesheet-relative, so the static templates need no theme
   path. To add a member, ship assets/team/<person>.avif and
   <person>-alt.avif and repeat this pair of rules for their data-person. */
.rm-team__photo{ position:relative; }
.rm-team__photo::after{
  content:""; position:absolute; inset:0;
  background-position:center top; background-size:cover;
  /* Opacity only: composited on the GPU, no layout or paint work, and
     held under 300ms so the swap feels immediate. */
  opacity:0; transition:opacity .25s ease;
}
/* Hover runs only where hover is a real capability; on touch screens a
   hover state would stick after the first tap. Touch gets :active
   instead, which releases with the finger. */
@media (hover:hover){
  .rm-team__photo:hover::after{ opacity:1; }
}
.rm-team__photo:active::after{ opacity:1; }
/* Cutout portraits over the tile's own gradient: the background stays
   constant through the swap and follows the colour mode, so only the
   pose cross-fades. The ::after layer repeats the gradient so the base
   pose is fully covered at the end of the fade. */
/* Per-member portrait rules are generated at enqueue time from the Theme
   Options roster (remotive_team_portrait_css() in inc/theme-options.php),
   for every slug whose AVIF pair ships in assets/team/. Nothing is
   hardcoded here, so adding a member in the tab plus two image files is
   the whole job. */
.rm-team__name{ display:block; margin-top:.6rem; font-size:1rem; line-height:1.2; }
.rm-team__role{ display:block; font-size:.82rem; color:var(--rm-ink-70); }
.rm-team__bio{ margin:.45rem 0 0; font-size:.88rem; color:var(--rm-ink-70); }
/* The About grid differs from the teaser only in breathing room. */
.rm-team--full{ gap:1.75rem; }

/* The frame grids above are intrinsic, so they need no breakpoints. */


/* Primary fill buttons must invert with the mode. theme.json points the
   button background at contrast-bg, which in dark mode equals the navy
   paper, so fill buttons vanished into the page. ink/paper flip correctly:
   a near-black button on light, a white button on dark, both readable. */
.wp-block-button.is-style-fill > .wp-block-button__link{
  background-color:var(--wp--preset--color--ink) !important;
  color:var(--wp--preset--color--paper) !important;
  border-color:var(--wp--preset--color--ink) !important;
}
.wp-block-button.is-style-fill > .wp-block-button__link:hover{
  background-color:var(--wp--preset--color--magenta) !important;
  border-color:var(--wp--preset--color--magenta) !important;
  color:#fff !important;
}

/* =================== 404 =================== */
.rm-main--404{ text-align:center; padding-block:clamp(4rem,10vw,9rem) !important; }
.rm-main--404 .rm-eyebrow{ display:inline-flex; }
.rm-404__title{ font-size:clamp(2rem,5vw,3.5rem); line-height:1.06; margin:.4rem 0 .8rem; }
.rm-404__text{ color:var(--rm-ink-70); max-width:46ch; margin:0 auto 1.75rem; font-size:1.05rem; }
.rm-404__search{ max-width:32rem; margin:0 auto 1.5rem; }
.rm-404__actions{ justify-content:center !important; }

/* =================== DESKTOP HERO + TICKER FIXES (v1.16.2) =================== */
/* The hero's children share the same centred wide measure as everything
   else, so the hero's left edge lines up with the sections below it and with
   the header above. The text inside stays left-aligned; it is the box that
   is centred, which is exactly what the header row and footer do. */
.rm-hero > *{ margin-left:auto !important; margin-right:auto !important; }
/* The sub is the one hero child narrower than the measure (56ch), and the
   auto side margins that centre every child's 1320px box centred this
   smaller box too — reopening the "headline on one edge, sub-heading
   floating in the middle" gap that v1.16.2 fought. The left margin is
   set to the same inset the full-width siblings compute for themselves
   ((100% − wide)/2, floored at 0 below the wide measure), so the sub's
   left edge sits exactly on the headline's at every viewport width.
   Scoped to .rm-hero: the About page reuses the class inside
   .rm-about-hero, where no sibling sits on the wide measure, so the
   wide-edge inset would misalign it there. */
.rm-hero .rm-hero__sub{
  max-width:56ch !important;
  margin-left:max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
  margin-right:0 !important;
}

/* Full bleed now comes from the alignfull group wrapping this block in
   front-page.html, which is WordPress's own mechanism and the same one
   .rm-stats and .rm-cta use. The previous 100vw plus negative-margin
   approach measured the scrollbar into the width, so it could overflow by
   the scrollbar's width on platforms that reserve space for it, and the
   body overflow rule then hid that. Both are gone. */


/* =================== RESPONSIVE HEADER + TYPE (v1.17.0) =================== */

/* Header states, set by the row's measured intrinsic width in a real
   browser render (Chromium, the theme's own Archivo files, a 120px logo)
   rather than a conventional breakpoint.

   Above 1000px  full row: logo, links, CTA, toggle, one line, no wrap.
   1000 to 981   compact: tighter gaps and link padding buy back space.
   980 to 783    the CTA leaves the row. Measured, the full set needs
                 ~873px against 705–884px of available space across this
                 band, so the CTA — which duplicates the hero's primary
                 action — never actually fit here; the old 782px cut-off
                 left up to ~168px of horizontal page scroll at 783px.
   782 to 601    squeeze: even without the CTA the row's fixed items
                 measure ~674px against as little as 541px, so the link
                 gaps and padding tighten, the logo drops to 32px, and
                 the toggle loses its text label (its aria-label and the
                 track itself still identify it) — ~530px at the 601px
                 floor, with slack for a wider logo.
   600 and below the navigation block's own overlay menu takes over. */
/* Flex items shrink below their intrinsic width by default, so the
   navigation block was squeezed to 304px against the ~343px its five links
   need and wrapped internally to two lines on tablet. Holding the three
   fixed items at their natural size and letting only the links block flex
   keeps the row on one line. */
/* Scoped above 600px, which is where the navigation block's own overlay
   menu takes over. Holding the intrinsic width below that point would push
   the inline links past the viewport if the overlay ever failed to engage,
   so the row stays free to shrink there. */
@media (min-width:601px){
  /* Held at its intrinsic width so the five links stay on one line at
     default text size. Under 200 percent text zoom the same rule made the
     row overflow the viewport, failing 1.4.4, because the block could
     neither shrink nor wrap. It may now wrap internally, which happens
     only when the links genuinely do not fit: at default size the row is
     unchanged, and under zoom the nav takes a second line instead of
     pushing the page sideways. */
  .rm-nav__links{ flex:0 1 auto; min-width:0; }
  .rm-nav__links .wp-block-navigation__container{ flex-wrap:wrap; }
}
.rm-brand, .rm-nav__cta, .rm-theme-toggle{ flex:0 0 auto; }
.rm-nav__row{ min-width:0; }
.rm-nav__links{ min-width:0; }

@media (max-width:1000px){
  .rm-nav__row{ gap:1rem; }
  .rm-nav__links{ font-size:.9rem; }
  .rm-nav__links .wp-block-navigation-item a{ padding-inline:.35rem !important; }
  .rm-brand img{ height:36px; }
}
/* CTA stays on mobile; compact sizing lives in critical.css. */
/* The navigation block's flex gap is emitted on its list container, not
   on the nav element — a squeeze that only set gap on .rm-nav__links left
   the 24px gaps between links untouched, which is why the first version
   of this band still overflowed by ~69px when rendered. Both are covered
   here so the rule holds whichever element carries the layout gap. */
@media (min-width:601px) and (max-width:782px){
  .rm-nav__links,
  .rm-nav__links .wp-block-navigation__container{ gap:.5rem !important; }
  .rm-nav__links .wp-block-navigation-item a{ padding-inline:.25rem !important; }
  .rm-brand img{ height:32px; }
  .rm-theme-toggle__label{ font-size:.68rem; }
}

/* The display clamp floors at 2rem, but the content box keeps narrowing
   below it, so the headline stopped tracking its container under 375px.
   A lower floor on the narrowest screens keeps the line count sane. */
@media (max-width:390px){
  .rm-hero__display.is-statement{ font-size:clamp(1.65rem,7.5vw,2rem) !important; }
}

/* WebMCP lead tools stop before submission. Highlight the visible form that
   an agent prepared so the visitor can inspect it before pressing submit. */
.rm-webmcp-active{
  outline:3px solid var(--wp--preset--color--magenta);
  outline-offset:6px;
}

/* =================== MOBILE-FIRST HARDENING (v1.46.0) ===================
   Additive only. Every rule below either adds a protection the theme did
   not have or raises a value that failed a mobile standard; none replaces
   an existing layout, renames anything, or removes a desktop style. Each
   was written against a measured failure at one or more of the audited
   widths (320 to 1280). */

/* ---- 1. Long unbreakable strings (LOW RISK) ----
   A long URL, a compound word or a slug pasted into content sets a
   min-content width larger than a phone viewport and pushes the whole
   document sideways. Applied to text containers rather than globally, so
   layout wrappers and flex rows are untouched. */
.entry-content, .rm-post__content, .rm-page__content, .rm-legal__content,
.rm-cs-card__desc, .rm-post-card__excerpt, .rm-row__desc, .rm-team__bio{
  overflow-wrap:break-word;
}
.entry-content a, .rm-post__content a, .rm-page__content a, .rm-legal__content a{
  overflow-wrap:anywhere;
}

/* ---- 2. Wide tables (LOW RISK) ----
   Content tables had no mobile treatment at all: a four-column table sets
   its min-content width and overflows. The figure scrolls horizontally
   instead, keeping every column readable, and is focusable so the scroll
   is reachable by keyboard. The theme's own case tables are included. */
.entry-content .wp-block-table, .rm-post__content .wp-block-table,
.rm-case-table{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.entry-content .wp-block-table table, .rm-post__content .wp-block-table table{
  min-width:32rem;
}
.wp-block-table:focus-visible{ outline:2px solid var(--wp--preset--color--magenta); outline-offset:2px; }

/* ---- 3. Code blocks (LOW RISK) ----
   A long command line behaved like an unbreakable word. Preformatted text
   scrolls within its own box rather than widening the page. */
.entry-content pre, .rm-post__content pre, pre.wp-block-code, pre.wp-block-preformatted{
  overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch;
}
.entry-content code, .rm-post__content code{ overflow-wrap:anywhere; }

/* ---- 4. Media and embeds (LOW RISK) ----
   Images already scale; embeds had no constraint, so an iframe with fixed
   attributes could exceed the viewport. */
.entry-content img, .rm-post__content img, .rm-page__content img{ max-width:100%; height:auto; }
.wp-block-embed__wrapper iframe, .entry-content iframe, .rm-post__content iframe,
.entry-content video, .rm-post__content video{ max-width:100%; }

/* ---- 5. Form controls (LOW RISK, fixes measured overflow) ----
   Inputs and textareas overflowed their container by 6 to 14px at 320 to
   480px because the default content-box sizing added padding and border
   on top of a 100% width. This is the one measured horizontal overflow
   on the About and Contact pages. */
.rm-cta__form input, .rm-cta__form textarea, .rm-cta__form select,
.rm-about-form input, .rm-about-form textarea, .rm-about-form select,
.rm-contact-form input, .rm-contact-form textarea, .rm-contact-form select{
  box-sizing:border-box; max-width:100%; width:100%;
}
/* iOS zooms the page when a focused control's text is below 16px. Raising
   the control font size on small screens only leaves desktop untouched. */
@media (max-width:600px){
  .rm-cta__form input, .rm-cta__form textarea, .rm-cta__form select,
  .rm-about-form input, .rm-about-form textarea, .rm-about-form select,
  .rm-contact-form input, .rm-contact-form textarea, .rm-contact-form select{
    font-size:16px;
  }
  /* Submit controls and form fields get a comfortable touch height. */
  .rm-cta__form button, .rm-about-form button, .rm-contact-form button,
  .rm-cta__form input:not([type="checkbox"]):not([type="radio"]),
  .rm-about-form input:not([type="checkbox"]):not([type="radio"]),
  .rm-contact-form input:not([type="checkbox"]):not([type="radio"]){
    min-height:44px;
  }
}

/* ---- 6. Touch target size (LOW RISK) ----
   Footer links, pagination links and inline section links measured 15 to
   17px tall, under the 24px WCAG 2.5.8 minimum and well under the 44px
   comfort target. Padding is added rather than height, so the text
   position and the existing underline treatments are unchanged. */
/* 2.5.8 Target Size (Minimum) applies to pointer input at every viewport
   width, not only on touch, so these run unscoped. Links inside running
   sentences are excluded under the criterion's inline exception; the
   targets here are standalone navigation and list links, which were
   measuring 15 to 17px tall. Padding is added rather than height, so text
   positions and underline treatments are unchanged. */
.rm-footer__links a, .rm-footer__nav a, .rm-footer nav a, .rm-footer__desc a,
.rm-footer__contact a, .rm-contact-card a,
.rm-pagination a, .wp-block-query-pagination a,
.rm-section-link, .rm-row__link, .rm-cs-card__link, .rm-sidebar__card a,
.rm-sidebar__recent-title a{
  display:inline-block; padding-block:.5rem; min-height:24px;
}
@media (max-width:782px){
  .wp-block-button__link{ min-height:44px; display:inline-flex; align-items:center; }
}

/* ---- 7. Small text floor (LOW RISK) ----
   Eyebrows and card tags rendered at 11.5px, below the 12px readability
   floor for body-adjacent text on phones. Raised on small screens only,
   so the desktop typographic scale is unchanged. */
@media (max-width:782px){
  /* The base rule sets this size with !important (it defends against a
     block-level font-size preset), so the mobile floor has to match that
     weight to apply at all. */
  .rm-eyebrow{ font-size:.78rem !important; }
}

/* ---- 8. Sticky header safety (LOW RISK) ----
   A sticky header on a short landscape phone screen can occupy most of
   the viewport. Releasing it below 480px tall keeps content reachable. */
@media (max-height:480px) and (orientation:landscape){
  .rm-nav{ position:static !important; }
}

/* ---- 9. Reduced motion (LOW RISK, accessibility) ----
   The ticker animates continuously. Users asking for reduced motion get a
   static strip; the portrait cross-fade and other transitions collapse to
   an instant state change rather than disappearing. */
@media (prefers-reduced-motion:reduce){
  .rm-ticker__track{ animation:none !important; transform:none !important; }
  .rm-team__photo::after{ transition-duration:.01ms !important; }
  *{ scroll-behavior:auto !important; }
}

/* ---- Section lead (v1.60.0) ----
   The line under a section heading. Every section head on the site carries
   one, so the type, colour and measure are defined once here rather than
   per page. Pinned to the shared left edge like the theme's other capped
   elements, since a constrained wrapper would otherwise centre it. */
.rm-section-lead{
  /* !important because the section wrappers widen their children with the
     same flag; without it the lead inherits the full wide measure and runs
     to 1320px while every other lead sits at a readable length. */
  max-width:62ch !important;
  margin:.15rem 0 2rem !important;
  color:var(--rm-ink-70);
  font-size:1.02rem;
  line-height:1.65;
}

/* The homepage sections widen every direct child with an ID-scoped rule,
   which outranks a class selector however many !importants it carries.
   The lead is matched at the same specificity so it keeps its reading
   measure inside those sections. */
#problem > .rm-section-lead,
#services > .rm-section-lead,
#why > .rm-section-lead,
#work > .rm-section-lead,
#about > .rm-section-lead{
  max-width:62ch !important;
  /* Those same ID rules centre their children with auto margins, which
     floats the lead into the middle of the section while the heading above
     it stays left. Zeroed here for the same reason and at the same
     specificity. */
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ---- Contact Form 7, when that plugin is active (v1.63.0) ----
   The plugin outputs its own markup, which arrives unstyled against a theme
   this specific. These rules give a CF7 form the same fields, button and
   spacing as the theme's built-in forms, so a site owner can use either
   without the page looking like two different sites. */
.wpcf7-form p{ margin:0 0 1rem; }
.wpcf7-form label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:.35rem; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea{
  box-sizing:border-box; width:100%;
  /* 16px so iOS does not zoom the page when a field takes focus. */
  font-size:16px; font-family:inherit;
  padding:.7rem .85rem;
  color:var(--wp--preset--color--ink);
  background:transparent;
  border:1px solid var(--rm-line);
  border-radius:6px;
}
.wpcf7-form textarea{ min-height:9rem; resize:vertical; }
.wpcf7-form input:focus-visible,
.wpcf7-form select:focus-visible,
.wpcf7-form textarea:focus-visible{
  outline:2px solid var(--wp--preset--color--magenta); outline-offset:2px; border-color:transparent;
}
.wpcf7-form input[type="submit"]{
  min-height:44px; padding:0 1.5rem;
  font-weight:700; font-size:.9rem; letter-spacing:.02em;
  color:var(--wp--preset--color--paper);
  background:var(--wp--preset--color--ink);
  border:0; border-radius:6px; cursor:pointer;
}
.wpcf7-form input[type="submit"]:hover{ background:var(--wp--preset--color--magenta); }
.wpcf7-form input[type="submit"]:focus-visible{ outline:2px solid var(--wp--preset--color--magenta); outline-offset:3px; }
.wpcf7-not-valid-tip{ color:var(--wp--preset--color--magenta); font-size:.82rem; margin-top:.3rem; }
.wpcf7-response-output{
  margin:1rem 0 0 !important; padding:.8rem 1rem !important;
  border:1px solid var(--rm-line) !important; border-left:3px solid var(--wp--preset--color--magenta) !important;
  border-radius:6px; font-size:.9rem;
}

/* ---- Footer index links and the case study column (v1.65.0) ----
   The "All services" and "All case studies" links close each column and
   point at its index, so the index page keeps its own internal link now
   that the children are listed individually. */
.rm-footer__all a{ font-weight:700 !important; }
/* Case study labels are longer than a service name, so the column takes a
   slightly smaller size and tighter line height rather than forcing every
   label onto two lines. */
.rm-footer__links--cases a{ font-size:.86rem !important; line-height:1.45 !important; }