/*
Theme Name: ELIZMO
Theme URI: https://elizmo.co
Author: ELIZMO
Description: Programs, operating documents and workflows for small teams. Accessible block theme with client-owned systems.
Version: 1.8.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elizmo
*/

/* ------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------ */
:root {
  --site-width: 1200px;
  --site-gutter: 24px;
  --rv-teal: #173F3D;
  --rv-teal-deep: #0F2E2E;
  --rv-sage: #9CC3AE;
  --rv-spruce: #2F6762;
  --rv-white: #FFFFFF;
  --rv-bone: #F3EFE8;
  --rv-paper: var(--rv-bone);
  --rv-mist: #EBF4F4;
  --rv-ink: #1A1A1A;
  --rv-slate: #5E6867;
  --rv-line: #CBD7D6;
  --rv-charcoal: #383B3E;
  --rv-radius-card: 12px;
  --rv-radius-control: 6px;
  /* Type. Every family falls back to installed system faces for offline renders. */
  --rv-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --rv-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rv-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --rv-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --rv-font: var(--rv-font-body);
  /* Depth */
  --rv-shadow-card: 0 1px 2px rgba(15, 46, 46, .04), 0 10px 28px -6px rgba(15, 46, 46, .07), inset 0 1px 0 rgba(255, 255, 255, .85);
  --rv-shadow-card-hover: 0 2px 4px rgba(15, 46, 46, .06), 0 20px 40px -12px rgba(15, 46, 46, .20), inset 0 1px 0 rgba(255, 255, 255, .85);
  --rv-shadow-float: 0 1px 2px rgba(15, 46, 46, .06), 0 28px 56px -20px rgba(15, 46, 46, .30);
  /* Motion */
  --rv-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--rv-white); color: var(--rv-ink); font-family: var(--rv-font-body); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
input, select, textarea, table, pre, code { font-family: inherit; }
button, input, select, textarea { font-size: inherit; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1rem; max-width: 60ch; text-wrap: pretty; overflow-wrap: break-word; }
h1, h2, h3, h4 { color: var(--rv-teal); margin: 0 0 1rem; font-family: var(--rv-font-display); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.25rem + 3.4vw, 4rem); line-height: 1.05; letter-spacing: -0.026em; word-spacing: .02em; max-width: 18ch; }
h2 { font-size: 46px; line-height: 1.12; letter-spacing: -0.022em; word-spacing: .02em; max-width: 24ch; }
h3 { font-size: 24px; line-height: 1.25; letter-spacing: -0.012em; font-weight: 600; }
h4 { font-size: 18px; line-height: 1.4; font-weight: 600; }
a { color: var(--rv-spruce); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Focus: Deep Teal on light surfaces, White inside .rv-dark bands and teal window chrome. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--rv-teal); outline-offset: 4px; }
:where(.rv-dark, .rv-workflow-heading) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--rv-white); }

/* ------------------------------------------------------------------
   Shared 1200px grid. Header, content and footer share identical edges.
   ------------------------------------------------------------------ */
.rv-container, .elizmo-header-inner, .elizmo-footer-inner { width: min(var(--site-width), calc(100% - (2 * var(--site-gutter)))); max-width: none; margin-inline: auto; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > *, main > *, .wp-block-post-content > * { margin-block-start: 0; }
.wp-site-blocks > main, .wp-site-blocks > header, .wp-site-blocks > footer, .wp-block-post-content, .elizmo-revamp { width: 100%; max-width: none; }
.wp-site-blocks > main, .wp-block-post-content, .elizmo-revamp { padding: 0; }
.wp-site-blocks > .alignfull, .elizmo-revamp.alignfull { margin-inline: 0; }
.elizmo-revamp > section { margin: 0; }
.skip-link { position: absolute; top: 8px; left: var(--site-gutter); z-index: 20; padding: 10px 16px; background: var(--rv-white); color: var(--rv-teal); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.elizmo-header { position: relative; z-index: 2; background: var(--rv-white); border-bottom: 1px solid var(--rv-line); }
.elizmo-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.elizmo-logo { margin: 0; line-height: 0; }
.elizmo-logo a { display: inline-block; padding-block: 16px; }
.elizmo-logo img { width: 180px; height: auto; }
.elizmo-nav { display: flex; align-items: center; gap: 28px; font-family: var(--rv-font-display); }
.elizmo-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; color: var(--rv-teal); }
.elizmo-nav a:hover, .elizmo-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.elizmo-nav .elizmo-nav-contact { background: var(--rv-teal); color: var(--rv-white); border-radius: var(--rv-radius-control); padding: 10px 16px; box-shadow: 0 1px 2px rgba(15, 46, 46, .12), inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform 220ms var(--rv-ease), box-shadow 220ms var(--rv-ease); }

/* ------------------------------------------------------------------
   Type roles and controls
   ------------------------------------------------------------------ */
.rv-label, .rv-card-num, .elizmo-eyebrow { display: block; font-family: var(--rv-font-mono); font-size: 13px; line-height: 1.45; font-weight: 600; text-transform: none; letter-spacing: -0.01em; color: var(--rv-spruce); margin: 0 0 16px; }
.rv-label::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 10px; vertical-align: .3em; background: currentColor; }
.rv-lede { margin: 24px 0; font-family: var(--rv-font-serif); font-size: 22px; line-height: 1.5; font-weight: 500; letter-spacing: -0.005em; color: var(--rv-ink); }
.rv-microcopy, .rv-small { font-size: 14px; line-height: 1.6; color: var(--rv-slate); }
.rv-microcopy { margin-top: 14px; margin-bottom: 0; font-family: var(--rv-font-serif); font-style: italic; font-size: 17px; }
.rv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.rv-button, .wp-element-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px solid var(--rv-teal); border-radius: var(--rv-radius-control); padding: 12px 20px; background: var(--rv-teal); color: var(--rv-white); font-family: var(--rv-font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.4; text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 46, 46, .12), inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform 220ms var(--rv-ease), box-shadow 220ms var(--rv-ease), background-color 220ms var(--rv-ease); }
.rv-button:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; box-shadow: 0 2px 4px rgba(15, 46, 46, .10), 0 10px 20px -8px rgba(15, 46, 46, .35); }
.rv-button-secondary { background: rgba(255, 255, 255, .6); color: var(--rv-teal); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.rv-button-secondary:hover { background: var(--rv-white); }

/* Action links carry a quiet arrow that steps forward on hover. */
.rv-area a::after, .rv-approach a::after { content: "\2192" / ""; display: inline-block; margin-left: 8px; text-decoration: none; transition: transform 220ms var(--rv-ease); }

/* ------------------------------------------------------------------
   Surfaces
   Hero: Bone with a warm top-left highlight, a faint Spruce glow behind the
   visual column and a fine 32px architectural grid that fades out.
   Dark bands: square, Deep Teal into Teal-deep with a Spruce glow.
   ------------------------------------------------------------------ */
.rv-hero { position: relative; isolation: isolate; padding-block: 64px;
  background:
    radial-gradient(55% 75% at 0% 0%, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(45% 65% at 80% 55%, rgba(47, 103, 98, .04) 0%, rgba(47, 103, 98, .04) 35%, rgba(47, 103, 98, 0) 72%),
    var(--rv-bone); }
.rv-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(23, 63, 61, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 63, 61, .035) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 60% 35%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 85% 90% at 60% 35%, #000 35%, transparent 100%); }
.rv-hero-layout { display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: 48px; }
.rv-hero-layout > *, .rv-section-head > *, .rv-service-head > * { min-width: 0; }
.rv-section { padding-block: 88px; }
.rv-bone { background: linear-gradient(180deg, var(--rv-bone), var(--rv-paper)); }
.rv-dark { position: relative; color: var(--rv-white); border-radius: 0; border-top: 1px solid rgba(156, 195, 174, .32);
  background:
    radial-gradient(70% 90% at 88% -10%, rgba(47, 103, 98, .62) 0%, rgba(47, 103, 98, 0) 60%),
    radial-gradient(60% 80% at -5% 110%, rgba(156, 195, 174, .10) 0%, rgba(156, 195, 174, 0) 60%),
    linear-gradient(180deg, var(--rv-teal) 0%, var(--rv-teal-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.rv-dark h2, .rv-dark h3, .rv-dark p, .rv-dark a { color: var(--rv-white); }
.rv-dark .rv-label, .rv-dark .rv-card-num { color: var(--rv-sage); }
.rv-dark .rv-button { background: var(--rv-bone); border-color: var(--rv-bone); color: var(--rv-teal); box-shadow: 0 1px 2px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .7); }
.rv-dark .rv-button:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 14px 28px -10px rgba(0, 0, 0, .45); }

/* ------------------------------------------------------------------
   Cards: 12px radius, layered ambient shadow, Spruce indicator on key cards.
   ------------------------------------------------------------------ */
.rv-section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 32px; }
.rv-section-head > p { max-width: 38ch; margin: 0 0 16px; }
.rv-area-grid, .rv-problem-grid, .rv-service-grid, .rv-audience-grid, .rv-control-grid { display: grid; gap: 24px; }
.rv-area-grid, .rv-problem-grid, .rv-service-grid.rv-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rv-service-grid, .rv-audience-grid, .rv-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-area, .rv-service-card, .rv-audience-card, .rv-control-card { position: relative; background: var(--rv-white); border: 1px solid var(--rv-line); border-radius: var(--rv-radius-card); padding: 28px; box-shadow: var(--rv-shadow-card);
  transition: transform 220ms var(--rv-ease), box-shadow 220ms var(--rv-ease), border-color 220ms var(--rv-ease); }
.rv-area::before, .rv-service-card::before { content: ""; position: absolute; top: -1px; left: 28px; width: 36px; height: 3px; border-radius: 0 0 3px 3px; background: var(--rv-spruce); transition: width 220ms var(--rv-ease); }
.rv-service-grid:not(.rv-three) > :last-child:nth-child(odd), .rv-control-grid > :last-child:nth-child(odd), .rv-audience-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 24px) / 2); }
.rv-service-card p, .rv-audience-card p, .rv-control-card p, .rv-problem-grid p { margin-bottom: 0; }
.rv-area { display: flex; flex-direction: column; }
.rv-area p { margin-bottom: 12px; }
.rv-area a { margin-top: auto; padding-top: 12px; font-family: var(--rv-font-display); font-size: 16px; font-weight: 600; }
/* The whole entrance card is clickable through its one link. */
.rv-area a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rv-problem-grid article { border-top: 1px solid rgba(156, 195, 174, .55); padding-top: 24px; }
.rv-problem-grid h3 { max-width: 25ch; }
.rv-prompts .rv-card-num { margin-bottom: 12px; }

/* Process */
.rv-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.rv-steps li { border-top: 1px solid var(--rv-line); padding-top: 24px; }
.rv-step-number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--rv-radius-card); background: linear-gradient(180deg, var(--rv-spruce), var(--rv-teal)); color: var(--rv-white); font-family: var(--rv-font-mono); font-size: 14px; font-weight: 600; margin-bottom: 18px; box-shadow: 0 6px 14px -6px rgba(15, 46, 46, .5), inset 0 1px 0 rgba(255, 255, 255, .18); }
.rv-steps h3 { font-size: 22px; }
.rv-steps p { font-size: 16px; margin-bottom: 0; }

/* Closing band */
.rv-closing { display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.rv-closing h2 { max-width: 22ch; }
.rv-closing p:last-child { margin-bottom: 0; }
.rv-closing > .rv-button { flex-shrink: 0; }

/* Services */
.rv-jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rv-jump a { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--rv-line); border-radius: var(--rv-radius-control); padding: 10px 16px; color: var(--rv-teal); font-family: var(--rv-font-display); font-size: 15px; font-weight: 600; text-decoration: none; background: rgba(255, 255, 255, .7); box-shadow: var(--rv-shadow-card); transition: border-color 220ms var(--rv-ease), transform 220ms var(--rv-ease); }
.rv-jump a:hover { text-decoration: underline; border-color: var(--rv-spruce); }
.rv-scope-note { margin: 28px 0 0; }
.rv-scope-note + .rv-scope-note { margin-top: 12px; }
.rv-service-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(300px, 380px); gap: 24px 32px; align-items: start; margin-bottom: 40px; }
.rv-area-medallion { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid var(--rv-line); border-radius: var(--rv-radius-card); background: var(--rv-white); font-family: var(--rv-font-mono); font-size: 17px; font-weight: 600; color: var(--rv-teal); box-shadow: var(--rv-shadow-card); }
.rv-service-head h2 { max-width: 20ch; }
.rv-service-head p:last-child { margin-bottom: 0; }
.rv-boundary { background: var(--rv-white); border: 1px solid var(--rv-line); border-left: 3px solid var(--rv-spruce); border-radius: var(--rv-radius-card); padding: 20px 24px; margin: 24px auto 0; font-size: 16px; max-width: 75ch; box-shadow: var(--rv-shadow-card); }
.rv-local-cta { margin: 28px 0 0; }

/* About */
.rv-approach { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.rv-approach > div p:last-child { margin-bottom: 0; }
.rv-approach a { font-family: var(--rv-font-display); font-weight: 600; }

/* Contact */
.rv-contact-hero { padding-block: 24px 56px; }
.rv-contact-hero .rv-label { margin-bottom: 12px; }
.rv-contact-hero .rv-copy-status { min-height: 18px; margin-top: 6px; }
.rv-contact-hero h1 { max-width: 18ch; margin-bottom: 14px; font-size: clamp(2.5rem, 1.25rem + 2.9vw, 3.5rem); }
.rv-contact-layout { grid-template-columns: 1.2fr .8fr; align-items: start; }
.rv-contact-layout .rv-email-preview { margin-top: 8px; }
.rv-contact-hero .rv-lede { margin: 14px 0 0; max-width: 60ch; font-size: 19px; line-height: 1.45; }
.rv-contact-hero .rv-actions { margin-top: 16px; }
.rv-copy-status { display: block; font-size: 14px; line-height: 1.4; min-height: 20px; margin-top: 8px; color: var(--rv-spruce); font-weight: 600; }
.rv-email-fallback { margin: 6px 0 0; }
.rv-helper { margin: 24px 0 0; font-size: 14px; line-height: 1.6; color: var(--rv-slate); }

/* Topic picker: native radios, styled as pills. */
.rv-topic-picker { margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.rv-topic-legend { padding: 0; margin: 0 0 6px; font-family: var(--rv-font-mono); font-size: 13px; font-weight: 600; color: var(--rv-spruce); }
.rv-topic-options { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-topic { position: relative; display: inline-flex; }
.rv-topic input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rv-topic span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--rv-line); border-radius: 999px; background: rgba(255, 255, 255, .75); color: var(--rv-teal); font-family: var(--rv-font-display); font-size: 14px; font-weight: 600; line-height: 1.2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: background-color 220ms var(--rv-ease), border-color 220ms var(--rv-ease), color 220ms var(--rv-ease), box-shadow 220ms var(--rv-ease); }
.rv-topic:hover span { border-color: var(--rv-spruce); }
.rv-topic input:checked + span { background: var(--rv-teal); border-color: var(--rv-teal); color: var(--rv-white); box-shadow: 0 6px 14px -8px rgba(15, 46, 46, .6); }
.rv-topic input:checked + span::before { content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--rv-sage); }
.rv-topic input:focus-visible + span { outline: 3px solid var(--rv-teal); outline-offset: 3px; }

/* Email draft preview */
.rv-email-preview { border: 1px solid var(--rv-line); border-radius: 14px; background: var(--rv-white); box-shadow: var(--rv-shadow-float); overflow: hidden; }
.rv-email-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: linear-gradient(180deg, var(--rv-spruce), var(--rv-teal)); color: var(--rv-white); }
.rv-email-bar-title { font-family: var(--rv-font-mono); font-size: 12px; font-weight: 600; color: var(--rv-white); }
.rv-email-meta { margin: 0; padding: 4px 20px; border-bottom: 1px solid var(--rv-line); }
.rv-email-meta > div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 10px 0; font-size: 14px; line-height: 1.45; }
.rv-email-meta > div + div { border-top: 1px solid var(--rv-line); }
.rv-email-meta dt { font-family: var(--rv-font-mono); font-size: 12px; color: var(--rv-slate); padding-top: 1px; }
.rv-email-meta dd { margin: 0; color: var(--rv-teal); font-weight: 600; overflow-wrap: anywhere; }
.rv-email-body { padding: 18px 20px 4px; }
.rv-email-body p { max-width: none; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dashed rgba(23, 63, 61, .16); font-size: 15px; line-height: 1.6; color: var(--rv-ink); }
.rv-email-body [data-email-topic] { color: var(--rv-teal); }
.rv-email-note { max-width: none; margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--rv-line); background: var(--rv-paper); font-size: 13px; line-height: 1.5; color: var(--rv-slate); }

/* ------------------------------------------------------------------
   Window chrome shared by the workflow studio and the email preview.
   ------------------------------------------------------------------ */
.rv-window-dots { display: inline-flex; gap: 6px; }
.rv-window-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.rv-window-dots span:first-child { background: var(--rv-sage); box-shadow: 0 0 0 3px rgba(156, 195, 174, .18); }
.rv-window-dots span:nth-child(2) { background: rgba(243, 239, 232, .55); }

/* ------------------------------------------------------------------
   Deliverable blueprint cards (Services heads, About hero).
   ------------------------------------------------------------------ */
.rv-blueprint { margin: 0; padding: 20px 22px 22px; border: 1px solid var(--rv-line); border-radius: 14px; background:
    linear-gradient(rgba(23, 63, 61, .03) 1px, transparent 1px) 0 0 / 100% 24px, var(--rv-white);
  box-shadow: var(--rv-shadow-card); font-size: 14px; line-height: 1.45; }
.rv-blueprint-head { display: grid; gap: 4px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--rv-line); }
.rv-blueprint-kicker { font-family: var(--rv-font-mono); font-size: 11px; font-weight: 600; color: var(--rv-spruce); }
.rv-blueprint-title { font-family: var(--rv-font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--rv-teal); }
.rv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px solid var(--rv-line); border-radius: 999px; background: var(--rv-paper); color: var(--rv-teal); font-family: var(--rv-font-mono); font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.rv-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rv-spruce); }
.rv-chip-ok { background: var(--rv-teal); border-color: var(--rv-teal); color: var(--rv-white); }
.rv-chip-ok::before { background: var(--rv-sage); }
.rv-blueprint-foot strong { color: var(--rv-teal); }
.rv-blueprint-foot { max-width: none; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rv-line); font-size: 13px; line-height: 1.45; color: var(--rv-slate); }

/* Area 1: module sequence */
.rv-module-track { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 0 0 14px; padding: 0; }
.rv-module-track li { display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 6px; font-family: var(--rv-font-mono); font-size: 11px; font-weight: 600; color: var(--rv-white); background: var(--rv-teal); }
.rv-module-track li:nth-child(n+3) { background: var(--rv-spruce); }
.rv-module-track li:nth-child(n+5) { background: var(--rv-mist); color: var(--rv-teal); box-shadow: inset 0 0 0 1px var(--rv-line); }
.rv-module-track li:nth-child(2n+1):not(:first-child) { margin-left: 4px; }
.rv-blueprint-rows { margin: 0; }
.rv-blueprint-rows > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--rv-line); }
.rv-blueprint-rows dt { color: var(--rv-slate); }
.rv-blueprint-rows dd { margin: 0; color: var(--rv-teal); font-weight: 600; }

/* Area 2: document index */
.rv-index-list { list-style: none; margin: 0; padding: 0; }
.rv-index-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 11px 0; border-top: 1px solid var(--rv-line); }
.rv-index-note { margin-left: 24px; font-size: 13px; color: var(--rv-slate); }
.rv-index-list li:first-child { border-top: 0; padding-top: 0; }
.rv-index-name { display: inline-flex; align-items: center; gap: 10px; color: var(--rv-teal); font-weight: 600; }
.rv-index-list .rv-index-name::before { content: ""; flex: none; width: 14px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M1.75.75h6.5l4 4v12.5h-10.5z' fill='%23fff' stroke='%232F6762' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8.25.75v4h4' fill='none' stroke='%232F6762' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M4 9.5h6M4 12.5h6' stroke='%232F6762' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 18px no-repeat; }

/* Area 3: workflow map with a gated review node */
.rv-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rv-flow li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 9px 12px 9px 36px; border: 1px solid var(--rv-line); border-radius: 8px; background: var(--rv-white); }
.rv-flow li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: 1.5px solid var(--rv-spruce); background: var(--rv-white); }
.rv-flow li + li::after { content: ""; position: absolute; left: 17px; top: -15px; height: 14px; border-left: 1.5px solid var(--rv-spruce); }
.rv-flow-step { font-family: var(--rv-font-display); font-weight: 700; color: var(--rv-teal); }
.rv-flow-note { font-size: 13px; color: var(--rv-slate); }
.rv-flow .rv-flow-gate { border: 2px solid var(--rv-teal); background: var(--rv-mist); }
.rv-flow .rv-flow-gate::before { border: 2px solid var(--rv-teal); border-radius: 3px; background: var(--rv-teal); }
.rv-flow .rv-flow-gate::after, .rv-flow .rv-flow-gate + li::after { border-left-style: dashed; }

/* About: client-owned architecture */
.rv-ownership { padding: 22px; box-shadow: var(--rv-shadow-float); }
.rv-layer { padding: 16px 18px; border-radius: 10px; border: 1px solid var(--rv-line); background: var(--rv-white); }
.rv-layer p { margin: 0; max-width: none; }
.rv-layer-tag { font-family: var(--rv-font-mono); font-size: 11px; font-weight: 600; color: var(--rv-spruce); }
.rv-layer-title { margin: 2px 0 10px !important; font-family: var(--rv-font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--rv-teal); }
.rv-layer-client { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; border: 2px solid var(--rv-teal); background: linear-gradient(180deg, var(--rv-mist), var(--rv-white)); }
.rv-layer-client .rv-layer-tag, .rv-layer-client .rv-layer-title { grid-column: 1; }
.rv-layer-client .rv-chip { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.rv-layer-client .rv-layer-items { grid-column: 1 / -1; }
.rv-layer-items { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.rv-layer-items li { padding: 3px 10px; border: 1px solid var(--rv-line); border-radius: 6px; background: var(--rv-white); font-size: 13px; color: var(--rv-teal); font-weight: 600; }
.rv-layer-link { position: relative; display: flex; justify-content: center; gap: 56px; padding: 18px 0; font-family: var(--rv-font-mono); font-size: 11px; font-weight: 600; color: var(--rv-slate); }
.rv-layer-link::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1.5px dashed var(--rv-spruce); }
.rv-layer-link span { position: relative; padding: 2px 8px; border-radius: 999px; background: var(--rv-white); border: 1px solid var(--rv-line); }
.rv-layer-link span:first-child::after { content: "\2191" / ""; margin-left: 6px; color: var(--rv-spruce); }
.rv-layer-link span:last-child::after { content: "\2193" / ""; margin-left: 6px; color: var(--rv-spruce); }
.rv-layer-elizmo { background: var(--rv-paper); }

/* ------------------------------------------------------------------
   Workflow studio.
   Selectable HTML only. Every stage is visible without JavaScript; once
   enhanced, panels share one grid cell so switching never shifts layout.
   ------------------------------------------------------------------ */
.rv-workflow { position: relative; border: 1px solid var(--rv-teal); border-radius: 14px; background: var(--rv-white); color: var(--rv-ink); box-shadow: var(--rv-shadow-float); overflow: clip; }
.rv-workflow-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 14px 24px 18px; background: radial-gradient(80% 140% at 100% 0%, rgba(47, 103, 98, .55), rgba(47, 103, 98, 0) 60%), linear-gradient(180deg, var(--rv-spruce), var(--rv-teal)); border-bottom: 1px solid var(--rv-teal-deep); color: var(--rv-white); }
.rv-workflow-heading .rv-window-dots { grid-column: 1; grid-row: 1; }
.rv-workflow-heading .rv-sample-badge { grid-column: 1 / -1; }
.rv-workflow-heading h3 { grid-column: 1 / -1; margin: 0; font-size: 20px; line-height: 1.3; color: var(--rv-white); }
.rv-sample-badge { display: inline-flex; align-items: center; justify-self: start; gap: 8px; max-width: none; margin: 0; padding: 4px 12px 4px 10px; border: 1px dashed rgba(156, 195, 174, .75); border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--rv-white); font-family: var(--rv-font-mono); font-size: 12px; line-height: 1.45; font-weight: 600; }
.rv-sample-badge::before { content: ""; flex: none; width: 7px; height: 7px; border: 1.5px solid var(--rv-sage); border-radius: 50%; }

/* Stage stepper */
.rv-workflow-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 20px 24px 0; border-bottom: 1px solid var(--rv-line); background: var(--rv-paper); }
.rv-workflow-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 44px; margin: 0; padding: 0 12px 18px 0; border: 0; border-radius: 0; background: none; color: var(--rv-teal); font-family: var(--rv-font-display); font-size: 14px; line-height: 1.35; text-align: left; cursor: pointer; }
.rv-workflow-tab::before { content: ""; position: absolute; top: 15px; left: 40px; right: 8px; border-top: 1px solid var(--rv-line); }
.rv-workflow-tab:last-child::before { display: none; }
.rv-workflow-tab:nth-child(2)::before { border-top-style: dashed; border-top-color: var(--rv-spruce); }
.rv-workflow-tab::after { content: ""; position: absolute; left: 0; right: 12px; bottom: -1px; height: 3px; background: transparent; }
.rv-tab-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--rv-line); border-radius: 50%; background: var(--rv-white); color: var(--rv-teal); font-family: var(--rv-font-mono); font-size: 12px; font-weight: 600; line-height: 1; transition: background-color 220ms var(--rv-ease), color 220ms var(--rv-ease), border-color 220ms var(--rv-ease), box-shadow 220ms var(--rv-ease); }
.rv-tab-label { font-weight: 600; }
.rv-workflow-tab:hover .rv-tab-label { text-decoration: underline; text-underline-offset: .2em; }
.rv-workflow-tab:focus-visible { outline-offset: 2px; }
.rv-workflow-tab-checkpoint .rv-tab-num { border: 2px solid var(--rv-teal); border-radius: 6px; }
.rv-workflow-tab[aria-selected="true"] .rv-tab-num { background: var(--rv-teal); border-color: var(--rv-teal); color: var(--rv-white); box-shadow: 0 0 0 4px rgba(47, 103, 98, .14); }
.rv-workflow-tab[aria-selected="true"]::after { background: var(--rv-teal); }

/* Panels: paper-white canvas */
.rv-workflow-panels { background: var(--rv-white); }
.rv-workflow.is-enhanced .rv-workflow-panels { display: grid; }
.rv-workflow.is-enhanced .rv-workflow-panel { grid-area: 1 / 1; }
.rv-workflow.is-enhanced .rv-workflow-panel[hidden] { display: flex !important; visibility: hidden; }
.rv-workflow-panel { display: flex; flex-direction: column; padding: 24px 24px 28px; }
/* Each stage closes with a ruled note pinned to the panel foot, so equal-height stages read as one document. */
.rv-workflow .rv-workflow-panel > :last-child { max-width: none; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rv-line); }
/* The rule spans the full panel; end padding keeps the note itself at a readable measure. */
.rv-workflow .rv-workflow-panel > p:last-child { padding-right: max(0px, calc(100% - 64ch)); }
.rv-workflow-panel > :nth-last-child(2) { margin-bottom: 16px; }
.rv-workflow-panel + .rv-workflow-panel { border-top: 1px solid var(--rv-line); }
.rv-workflow.is-enhanced .rv-workflow-panel { border-top: 0; }
.rv-workflow-panel:focus-visible { outline-offset: -4px; border-radius: var(--rv-radius-card); }
.rv-workflow-panel h4 { font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 14px; }
.rv-workflow-panel p { font-size: 16px; line-height: 1.55; margin-bottom: 14px; }
.rv-workflow-panel p:last-child { margin-bottom: 0; }
.rv-panel-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.rv-panel-step { font-family: var(--rv-font-mono); font-size: 12px; line-height: 1.4; color: var(--rv-slate); }

/* Status pills */
.rv-state { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rv-line); border-radius: 999px; padding: 4px 12px 4px 10px; background: var(--rv-mist); color: var(--rv-teal); font-family: var(--rv-font-mono); font-size: 12px; line-height: 1.45; font-weight: 600; }
.rv-state::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rv-spruce); }
.rv-state-draft { background: var(--rv-white); border-style: dashed; border-color: var(--rv-spruce); }
.rv-state-draft::before { background: transparent; border: 1.5px solid var(--rv-spruce); }
.rv-state-hold { background: var(--rv-teal); border-color: var(--rv-teal); color: var(--rv-white); box-shadow: 0 6px 14px -6px rgba(15, 46, 46, .55); }
.rv-state-hold::before { width: 4px; height: 10px; border-radius: 0; background: transparent; border-inline: 2px solid var(--rv-sage); box-sizing: content-box; }
.rv-state-done::before { background: var(--rv-sage); box-shadow: 0 0 0 2px var(--rv-spruce) inset; }

/* Stage 1: intake fields */
.rv-sample-fields { margin: 0 0 16px; border-top: 1px solid var(--rv-line); }
.rv-sample-fields > div { display: grid; grid-template-columns: 136px 1fr; gap: 16px; border-bottom: 1px solid var(--rv-line); padding: 10px 0; font-size: 14px; line-height: 1.5; }
.rv-sample-fields dt { color: var(--rv-slate); }
.rv-sample-fields dd { margin: 0; color: var(--rv-teal); font-weight: 600; overflow-wrap: anywhere; }

/* Stage 2: draft document */
.rv-document { position: relative; margin: 0 0 16px; padding: 18px 20px; border: 1px solid var(--rv-line); border-left: 3px solid var(--rv-sage); border-radius: 0 8px 8px 0; background: var(--rv-bone); box-shadow: 0 10px 20px -16px rgba(15, 46, 46, .4); }
.rv-workflow-panel .rv-doc-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; max-width: none; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rv-line); color: var(--rv-teal); font-family: var(--rv-font-display); font-size: 15px; }
.rv-doc-version { font-family: var(--rv-font-mono); font-size: 11px; font-weight: 600; color: var(--rv-slate); }
.rv-doc-outline { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.5; }
.rv-doc-outline li + li { margin-top: 6px; }
.rv-doc-outline li::marker { color: var(--rv-slate); font-family: var(--rv-font-mono); font-size: 12px; }
.rv-flag { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px dashed var(--rv-spruce); border-radius: 999px; background: var(--rv-white); color: var(--rv-teal); font-family: var(--rv-font-mono); font-size: 11px; line-height: 1.6; font-weight: 600; vertical-align: 1px; white-space: nowrap; }

/* Stage 3: team review checkpoint (gate). The gate title is the elevated status pill. */
.rv-gate { position: relative; margin: 10px 0 16px; padding: 30px 20px 18px; border: 2px solid var(--rv-teal); border-radius: var(--rv-radius-card); background: linear-gradient(180deg, var(--rv-mist), var(--rv-white)); }
.rv-workflow-panel .rv-gate-title { position: absolute; top: 0; left: 16px; right: 16px; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; width: fit-content; max-width: calc(100% - 32px); margin: 0; padding: 7px 14px 7px 10px; border: 1px solid var(--rv-teal); border-radius: 10px; background: var(--rv-white); color: var(--rv-teal); font-family: var(--rv-font-display); font-size: 14px; line-height: 1.35; box-shadow: 0 1px 2px rgba(15, 46, 46, .08), 0 10px 22px -10px rgba(15, 46, 46, .45); }
.rv-workflow-panel .rv-gate-title::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 5px; background: var(--rv-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%239CC3AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
.rv-checklist { list-style: none; margin: 0 0 16px; padding: 0; font-size: 15px; line-height: 1.5; }
.rv-checklist li { position: relative; padding-left: 28px; }
.rv-checklist li + li { margin-top: 8px; }
.rv-checklist li::before { content: ""; position: absolute; left: 0; top: .2em; width: 14px; height: 14px; border: 1.5px solid var(--rv-teal); border-radius: 3px; background: var(--rv-white); }
.rv-gate .rv-checklist { margin-bottom: 14px; }
.rv-signoff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--rv-line); font-size: 14px; line-height: 1.4; }
.rv-signoff dt { color: var(--rv-slate); margin-bottom: 2px; font-family: var(--rv-font-mono); font-size: 12px; }
.rv-signoff dd { margin: 0; color: var(--rv-teal); font-weight: 700; }

/* Stage 4: handoff index */
.rv-file-index { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.rv-file-index caption { text-align: left; font-family: var(--rv-font-display); font-weight: 600; margin-bottom: 8px; color: var(--rv-teal); }
.rv-file-index th, .rv-file-index td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--rv-line); padding: 9px 12px 9px 0; overflow-wrap: anywhere; }
.rv-file-index thead th { border-bottom: 2px solid var(--rv-teal); font-family: var(--rv-font-mono); font-size: 12px; font-weight: 600; color: var(--rv-slate); }
.rv-file-index td:first-child { width: 58%; color: var(--rv-teal); font-family: var(--rv-font-mono); font-size: 13px; font-weight: 600; }
.rv-handoff-notes { display: grid; gap: 10px; }
.rv-workflow-panel .rv-handoff-notes p { margin: 0; font-size: 14px; line-height: 1.5; }
.rv-handoff-notes strong { color: var(--rv-teal); }
.rv-workflow-noscript { font-size: 14px; padding: 0 24px 18px; margin: 0; color: var(--rv-slate); }

/* Hero (compact) studio */
.rv-workflow-compact .rv-workflow-panel h4 { font-size: 20px; }

/* See-the-work (wide) studio: vertical stage rail beside the document. */
.rv-proof-intro { max-width: 60ch; margin-bottom: 36px; }
.rv-proof-intro h2 { max-width: 24ch; }
@media (min-width: 961px) {
  .rv-workflow-wide { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
  .rv-workflow-wide .rv-workflow-heading, .rv-workflow-wide noscript { grid-column: 1 / -1; }
  .rv-workflow-wide .rv-workflow-heading { padding-inline: 28px; }
  .rv-workflow-wide .rv-workflow-tabs { grid-template-columns: 1fr; align-content: start; padding: 28px 24px 28px 28px; border-bottom: 0; border-right: 1px solid var(--rv-line); background: linear-gradient(180deg, var(--rv-bone), var(--rv-paper)); }
  .rv-workflow-wide .rv-workflow-tab { flex-direction: row; align-items: center; gap: 14px; padding: 0 0 28px; }
  .rv-workflow-wide .rv-workflow-tab:last-child { padding-bottom: 0; }
  .rv-workflow-wide .rv-workflow-tab::before { top: 36px; bottom: 4px; left: 16px; right: auto; border-top: 0; border-left: 1px solid var(--rv-line); }
  .rv-workflow-wide .rv-workflow-tab:nth-child(2)::before { border-left-style: dashed; border-left-color: var(--rv-spruce); }
  .rv-workflow-wide .rv-workflow-tab::after { display: none; }
  .rv-workflow-wide .rv-tab-num { flex: none; }
  .rv-workflow-wide .rv-workflow-tab[aria-selected="true"] .rv-tab-label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
  .rv-workflow-wide .rv-workflow-panel { padding: 28px 36px 32px; }
  .rv-workflow-wide .rv-workflow-panel > p, .rv-workflow-wide .rv-handoff-notes p { max-width: 64ch; }
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.elizmo-footer { background: linear-gradient(180deg, var(--rv-bone), var(--rv-paper)); border-top: 1px solid var(--rv-line); padding-block: 56px 24px; }
.elizmo-footer-grid { display: grid; grid-template-columns: 1.4fr .7fr .9fr; gap: 48px; }
.elizmo-footer .elizmo-logo a { padding-top: 0; }
.elizmo-footer-description { font-size: 16px; max-width: 39ch; margin: 8px 0 0; }
.elizmo-footer nav { display: flex; flex-direction: column; align-items: start; gap: 6px; }
.elizmo-footer nav a { display: inline-flex; align-items: center; min-height: 36px; font-size: 16px; }
.elizmo-footer-email { font-size: 16px; }
.elizmo-copyright { margin: 32px 0 0; border-top: 1px solid var(--rv-line); padding-top: 20px; font-size: 14px; color: var(--rv-slate); }
.elizmo-copyright p { margin: 0; }

/* ------------------------------------------------------------------
   Interaction: tactile hover (pointer devices only)
   ------------------------------------------------------------------ */
@media (hover: hover) {
  .rv-area:hover, .rv-service-card:hover, .rv-audience-card:hover, .rv-control-card:hover { border-color: var(--rv-spruce); box-shadow: var(--rv-shadow-card-hover); }
  .rv-area:hover::before, .rv-service-card:hover::before { width: 56px; }
}

/* ------------------------------------------------------------------
   Motion. Everything below runs only when the visitor allows motion.
   Initial states never drop below opacity .01, so static capture still reads.
   ------------------------------------------------------------------ */
@keyframes rv-rise { from { opacity: .01; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance stagger */
  .rv-hero-copy > *, .rv-hero > .rv-container:not(.rv-hero-layout) > *, .rv-hero-layout > :not(.rv-hero-copy) { animation: rv-rise 360ms var(--rv-ease) both; }
  .rv-hero-copy > :nth-child(2), .rv-hero > .rv-container:not(.rv-hero-layout) > :nth-child(2) { animation-delay: 60ms; }
  .rv-hero-copy > :nth-child(3), .rv-hero > .rv-container:not(.rv-hero-layout) > :nth-child(3) { animation-delay: 120ms; }
  .rv-hero-copy > :nth-child(4), .rv-hero > .rv-container:not(.rv-hero-layout) > :nth-child(4) { animation-delay: 180ms; }
  .rv-hero-copy > :nth-child(n+5), .rv-hero > .rv-container:not(.rv-hero-layout) > :nth-child(n+5) { animation-delay: 240ms; }
  .rv-hero-layout > :not(.rv-hero-copy) { animation-duration: 520ms; animation-delay: 180ms; }

  /* Scroll reveal (classes added by site.js for content below the fold) */
  .rv-motion .rv-reveal { opacity: .01; transform: translateY(14px); transition: opacity 320ms var(--rv-ease), transform 320ms var(--rv-ease); transition-delay: var(--rv-delay, 0ms); }
  .rv-motion .rv-reveal.is-visible { opacity: 1; transform: none; }

  /* Workflow cross-fade */
  .rv-workflow.is-enhanced .rv-workflow-panel { transition: opacity 280ms var(--rv-ease), transform 280ms var(--rv-ease); }
  .rv-workflow.is-enhanced .rv-workflow-panel[hidden] { opacity: 0; transform: translateY(6px); }

  .rv-button:hover, .elizmo-nav .elizmo-nav-contact:hover { transform: translateY(-1px); }
  .rv-area a:hover::after, .rv-approach a:hover::after, .rv-area:hover a::after { transform: translateX(4px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rv-area:hover, .rv-service-card:hover, .rv-audience-card:hover, .rv-control-card:hover { transform: translateY(-3px); }
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .rv-service-head { grid-template-columns: 56px minmax(0, 1fr); }
  .rv-service-head .rv-blueprint { grid-column: 2; max-width: 520px; }
}
@media (max-width: 1024px) {
  .rv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .rv-hero-layout, .rv-area-grid, .rv-problem-grid, .rv-service-grid.rv-three { grid-template-columns: 1fr; }
  .rv-hero-layout { gap: 40px; }
  .rv-section-head, .rv-closing { flex-direction: column; align-items: start; gap: 24px; }
  .rv-section-head > p { max-width: 60ch; margin-bottom: 0; }
  .rv-approach { grid-template-columns: 1fr; gap: 16px; }
  .rv-ownership, .rv-email-preview { max-width: 560px; }
  .elizmo-footer-grid { gap: 24px; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  h2 { font-size: 30px; line-height: 1.14; }
  h3 { font-size: 21px; }
  .elizmo-header-inner { flex-wrap: wrap; gap: 0; padding-block: 6px 12px; }
  .elizmo-logo img { width: 150px; }
  .elizmo-logo a { padding-block: 10px; }
  .elizmo-nav { width: 100%; gap: 20px; }
  .elizmo-nav a { font-size: 15px; }
  .elizmo-nav .elizmo-nav-contact { margin-left: auto; padding: 10px 14px; }
  .rv-hero { padding-block: 40px; }
  .rv-section { padding-block: 56px; }
  .rv-lede { margin-block: 20px; font-size: 20px; }
  .rv-actions { align-items: stretch; }
  .rv-actions .rv-button { width: 100%; }
  .rv-area, .rv-service-card, .rv-audience-card, .rv-control-card { padding: 24px; }
  .rv-area::before, .rv-service-card::before { left: 24px; }
  .rv-service-grid, .rv-audience-grid, .rv-control-grid { grid-template-columns: 1fr; }
  .rv-service-grid:not(.rv-three) > :last-child:nth-child(odd), .rv-control-grid > :last-child:nth-child(odd), .rv-audience-grid > :last-child:nth-child(odd) { width: 100%; }
  .rv-steps { grid-template-columns: 1fr; }
  .rv-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding-top: 20px; }
  .rv-step-number { margin: 0; }
  .rv-steps h3 { margin-bottom: 8px; }
  .rv-service-head { grid-template-columns: 40px 1fr; gap: 16px; }
  .rv-service-head .rv-blueprint { grid-column: 1 / -1; }
  .rv-area-medallion { width: 40px; height: 40px; font-size: 14px; }
  .rv-jump { gap: 8px; }
  .rv-jump a { padding: 8px 12px; font-size: 14px; }
  .rv-boundary { padding: 18px 20px; }
  .rv-blueprint { padding: 18px; }
  .rv-layer-link { gap: 24px; }
  .rv-layer-client { grid-template-columns: minmax(0, 1fr); }
  .rv-layer-client .rv-chip { grid-column: 1; grid-row: auto; justify-self: start; margin-bottom: 12px; }

  /* Studio: 2x2 stage chips replace the horizontal rail. */
  .rv-workflow-heading { padding: 12px 16px 16px; }
  .rv-workflow-heading h3 { font-size: 18px; }
  .rv-sample-badge { align-items: flex-start; border-radius: 8px; padding: 6px 10px; font-size: 11px; }
  .rv-sample-badge::before { margin-top: .4em; }
  .rv-workflow-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px 16px; }
  .rv-workflow-tab { flex-direction: row; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border: 1px solid var(--rv-line); border-radius: 8px; background: var(--rv-white); font-size: 13px; line-height: 1.3; overflow: hidden; }
  .rv-workflow-tab::before, .rv-workflow-tab::after { display: none; }
  .rv-tab-num { flex: none; width: 28px; height: 28px; font-size: 11px; }
  .rv-workflow-tab[aria-selected="true"] { border-color: var(--rv-teal); background: var(--rv-mist); box-shadow: inset 0 0 0 1px var(--rv-teal); }
  .rv-workflow-panel { padding: 20px 16px 22px; }
  .rv-workflow-panel h4, .rv-workflow-compact .rv-workflow-panel h4 { font-size: 19px; }
  .rv-workflow-panel p { font-size: 15px; }
  .rv-sample-fields > div { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
  .rv-document { padding: 16px; }
  .rv-gate { padding: 34px 14px 16px; }
  .rv-workflow-panel .rv-gate-title { left: 10px; right: 10px; font-size: 13px; }
  .rv-checklist { font-size: 14px; }
  .rv-file-index { font-size: 13px; }
  .rv-file-index td:first-child { width: 55%; font-size: 12px; }
  .rv-workflow-noscript { padding-inline: 16px; }

  .rv-contact-hero { padding-block: 18px 40px; }
  .rv-contact-hero .rv-label { margin-bottom: 8px; }
  .rv-contact-hero h1 { margin-bottom: 10px; font-size: 2.25rem; }
  .rv-topic-legend { margin-bottom: 2px; }
  .rv-topic-options { gap: 6px; }
  .rv-topic span { min-height: 38px; padding: 7px 12px; font-size: 13px; }
  .rv-contact-hero .rv-lede { margin: 10px 0 0; font-size: 18px; line-height: 1.45; }
  .rv-contact-hero .rv-copy-status { min-height: 16px; margin-top: 4px; }
  .rv-contact-hero .rv-actions { gap: 10px; margin-top: 14px; }
  .rv-contact-hero .rv-button { padding: 11px 16px; }
  .rv-email-fallback { font-size: 16px; }
  .elizmo-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .elizmo-footer { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media print {
  .skip-link, .elizmo-nav, .rv-workflow-tabs, .rv-topic-picker { display: none; }
  .rv-workflow-panel[hidden], .rv-workflow.is-enhanced .rv-workflow-panel[hidden] { display: flex !important; visibility: visible; opacity: 1; transform: none; }
  .rv-workflow.is-enhanced .rv-workflow-panels { display: block; }
  .rv-reveal { opacity: 1 !important; transform: none !important; }
  .rv-workflow, .rv-area, .rv-service-card, .rv-audience-card, .rv-control-card, .rv-blueprint, .rv-email-preview { box-shadow: none; }
  .rv-hero, .rv-dark, .rv-bone { background: var(--rv-white); }
  .rv-hero::before { display: none; }
  .rv-section, .rv-hero { padding-block: 24px; }
  .rv-dark { color: var(--rv-ink); border-top: 0; }
  .rv-dark h2, .rv-dark h3, .rv-dark p, .rv-dark a { color: var(--rv-teal); }
  .rv-area, .rv-service-card, .rv-control-card, .rv-workflow-panel { break-inside: avoid; }
}

/* ==================================================================
   1.8.0 layer (ELIZMO Brand Guide v1.1, Addenda 2, 3 and 4).
   Deep Teal hero, larger type, alternating Deep Teal, Bone, White and
   Mist bands, line icons, sticky header, hover lift. Ten colors only.
   ================================================================== */
:root {
  --rv-band: clamp(72px, 3.2vw + 80px, 128px);
  --rv-radius-card: 16px;
  --rv-radius-control: 8px;
  --rv-shadow-card: 0 1px 2px rgba(15, 46, 46, .05), 0 14px 32px -12px rgba(15, 46, 46, .16);
  --rv-shadow-card-hover: 0 2px 4px rgba(15, 46, 46, .06), 0 28px 48px -16px rgba(15, 46, 46, .28);
  --rv-shadow-panel: 0 2px 6px rgba(15, 46, 46, .18), 0 40px 80px -24px rgba(0, 0, 0, .55);
}
html { scroll-padding-top: 104px; }

/* Type scale */
h1 { font-size: clamp(2.75rem, 1.2rem + 4.2vw, 5rem); line-height: 1.02; letter-spacing: -0.034em; max-width: 15ch; }
h2 { font-size: clamp(2.125rem, 1.25rem + 2.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.03em; max-width: 22ch; }
h3 { font-size: 24px; }
.rv-label { font-size: 13px; letter-spacing: .02em; margin-bottom: 20px; }
.rv-lede { font-size: clamp(20px, 1rem + .5vw, 24px); line-height: 1.5; }
.rv-section-intro { max-width: 820px; margin-bottom: 56px; }
.rv-section-intro > p:not(.rv-label) { max-width: 60ch; }
.rv-section-intro h2 { margin-bottom: 20px; }
.rv-section-intro p:last-child { margin-bottom: 0; }

/* Sticky header */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar header.wp-block-template-part { top: 32px; }
.elizmo-header { border-bottom: 1px solid var(--rv-line); transition: box-shadow 220ms var(--rv-ease); }
.is-scrolled .elizmo-header { box-shadow: 0 10px 28px -18px rgba(15, 46, 46, .45); }
.elizmo-header-inner { min-height: 80px; }
.elizmo-nav { gap: 32px; }
.elizmo-nav a { font-size: 16px; }
.elizmo-nav .elizmo-nav-contact { min-height: 46px; padding: 11px 20px; border-radius: var(--rv-radius-control); font-weight: 700; }
.elizmo-nav .elizmo-nav-contact:hover { box-shadow: 0 2px 4px rgba(15, 46, 46, .10), 0 12px 24px -10px rgba(15, 46, 46, .45); }

/* Buttons */
.rv-button, .wp-element-button { min-height: 54px; padding: 14px 26px; border-radius: var(--rv-radius-control); font-size: 16px; font-weight: 700; }
.rv-button:hover { text-decoration: none; box-shadow: 0 2px 4px rgba(15, 46, 46, .10), 0 16px 32px -12px rgba(15, 46, 46, .45); }
.rv-button-secondary { background: var(--rv-white); }

/* Bands */
.rv-section { padding-block: var(--rv-band); }
.rv-bone { background: var(--rv-bone); }
.rv-mist { background: var(--rv-mist); }
.rv-dark { border-top: 0; }
.rv-dark p { color: var(--rv-white); }

/* Hero on Deep Teal with a Sage 32 px grid and a Spruce glow */
.rv-hero { padding-block: clamp(64px, 4vw + 48px, 120px) clamp(72px, 5vw + 56px, 136px); color: var(--rv-white);
  background:
    radial-gradient(60% 80% at 92% 8%, rgba(47, 103, 98, .70) 0%, rgba(47, 103, 98, 0) 62%),
    radial-gradient(50% 70% at 0% 100%, rgba(47, 103, 98, .35) 0%, rgba(47, 103, 98, 0) 60%),
    linear-gradient(180deg, var(--rv-teal) 0%, var(--rv-teal-deep) 100%); }
.rv-hero::before { background-image: linear-gradient(rgba(156, 195, 174, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(156, 195, 174, .07) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 30%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 80% 90% at 70% 30%, #000 30%, transparent 100%); }
.rv-hero h1 { color: var(--rv-white); margin-bottom: 8px; }
.rv-accent { color: var(--rv-sage); }
.rv-hero .rv-label, .rv-hero .rv-topic-legend, .rv-hero .rv-copy-status { color: var(--rv-sage); }
.rv-hero-copy > p, .rv-hero > .rv-container > p, .rv-hero .rv-lede { color: var(--rv-white); }
.rv-hero .rv-lede { max-width: 46ch; }
.rv-hero .rv-microcopy { color: var(--rv-sage); }
.rv-hero-copy > p > a, .rv-hero > .rv-container > p > a { color: var(--rv-white); }
.rv-hero .rv-actions { margin-top: 36px; gap: 14px; }
.rv-hero .rv-button { background: var(--rv-bone); border-color: var(--rv-bone); color: var(--rv-teal); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 14px 28px -14px rgba(0, 0, 0, .6); }
.rv-hero .rv-button:hover { background: var(--rv-white); border-color: var(--rv-white); }
.rv-hero .rv-button-secondary { background: transparent; border-color: rgba(156, 195, 174, .7); color: var(--rv-white); box-shadow: none; }
.rv-hero .rv-button-secondary:hover { background: transparent; border-color: var(--rv-white); color: var(--rv-white); }
.rv-hero-layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; }
:where(.rv-hero) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--rv-white); }
:where(.rv-workflow-tabs, .rv-workflow-panels, .rv-blueprint, .rv-email-preview) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--rv-teal); }

/* Light cards inside the hero keep their own ink */
.rv-hero .rv-workflow, .rv-hero .rv-blueprint, .rv-hero .rv-email-preview { color: var(--rv-ink); border-color: var(--rv-teal-deep); box-shadow: var(--rv-shadow-panel); }
.rv-hero .rv-workflow { border-radius: 20px; }
.rv-hero .rv-blueprint, .rv-hero .rv-email-preview { border-radius: 18px; }
.rv-hero .rv-workflow-panel { padding: 28px 28px 30px; }

/* Services hero jump links, contact topic pills */
.rv-hero .rv-jump a { min-height: 48px; padding: 12px 18px; border-color: rgba(156, 195, 174, .6); background: transparent; color: var(--rv-white); box-shadow: none; }
.rv-hero .rv-jump a:hover { border-color: var(--rv-white); text-decoration: none; }
.rv-hero .rv-jump .rv-icon { width: 20px; height: 20px; margin-right: 10px; color: var(--rv-sage); }
.rv-hero .rv-scope-note { max-width: 62ch; }
.rv-hero .rv-topic span { background: transparent; border-color: rgba(156, 195, 174, .6); color: var(--rv-white); box-shadow: none; }
.rv-hero .rv-topic:hover span { border-color: var(--rv-white); }
.rv-hero .rv-topic input:checked + span { background: var(--rv-bone); border-color: var(--rv-bone); color: var(--rv-teal); }
.rv-hero .rv-topic input:checked + span::before { background: var(--rv-teal); }
.rv-hero .rv-topic input:focus-visible + span { outline-color: var(--rv-white); }
.rv-contact-hero { padding-block: clamp(48px, 3vw + 40px, 96px) clamp(64px, 4vw + 48px, 120px); }
.rv-contact-hero h1 { font-size: clamp(2.5rem, 1.2rem + 3.2vw, 4.25rem); }

/* Line icons: our own 24 px drawings, stroke only, currentColor */
.rv-icon { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rv-icon-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; border-radius: 14px; background: var(--rv-teal); color: var(--rv-sage); box-shadow: 0 10px 20px -12px rgba(15, 46, 46, .7); }
.rv-dark .rv-icon-tile { background: transparent; color: var(--rv-sage); box-shadow: inset 0 0 0 1px rgba(156, 195, 174, .55); }

/* Where work gets stuck (Bone) */
.rv-problem-grid { gap: 32px; }
.rv-problem-grid article { border-top: 2px solid var(--rv-teal); padding-top: 28px; }
.rv-problem-grid .rv-card-num { color: var(--rv-spruce); font-size: 14px; }
.rv-problem-grid h3 { font-size: 26px; }
.rv-problem-grid p { color: var(--rv-ink); }

/* Starting point offerings (Deep Teal, numbered, icons) */
.rv-dark .rv-area { padding: 36px 32px 32px; background: transparent; border: 1px solid rgba(156, 195, 174, .4); border-radius: 20px; box-shadow: none; }
.rv-dark .rv-area::before { display: none; }
.rv-area-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.rv-dark .rv-area .rv-card-num { margin: 0; font-size: 14px; }
.rv-dark .rv-area h3 { font-size: 28px; margin-bottom: 14px; }
.rv-dark .rv-area a { color: var(--rv-white); padding-top: 20px; }

/* How we protect your work (Mist strip) */
.rv-protect { padding-block: clamp(64px, 2vw + 72px, 112px); }
.rv-protect-head { display: flex; justify-content: space-between; align-items: end; gap: 48px; margin-bottom: 48px; }
.rv-protect-head h2 { margin: 0; max-width: 20ch; }
.rv-protect-head p { margin: 0; max-width: 40ch; color: var(--rv-slate); }
.rv-protect-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rv-protect-grid li { padding: 28px 24px; border-radius: var(--rv-radius-card); background: var(--rv-white); border: 1px solid var(--rv-line); box-shadow: var(--rv-shadow-card); transition: transform 220ms var(--rv-ease), box-shadow 220ms var(--rv-ease); }
.rv-protect-grid .rv-icon-tile, .rv-control-card .rv-icon-tile { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 20px; }
.rv-protect-grid .rv-icon, .rv-control-card .rv-icon { width: 24px; height: 24px; }
.rv-protect-grid h3 { font-size: 19px; line-height: 1.3; margin-bottom: 8px; }
.rv-protect-grid p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--rv-slate); }

/* Process (White) with icon tiles */
.rv-steps { gap: 32px; margin-top: 0; }
.rv-steps li { position: relative; border-top: 0; padding-top: 0; }
.rv-step-top { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.rv-step-top::after { content: ""; flex: 1; border-top: 1px dashed var(--rv-line); }
.rv-steps li:last-child .rv-step-top::after { display: none; }
.rv-step-number { width: auto; height: auto; margin: 0; background: none; box-shadow: none; color: var(--rv-spruce); font-size: 14px; border-radius: 0; }
.rv-steps h3 { font-size: 22px; margin-bottom: 10px; }

/* Cards everywhere: larger, softer, lift on hover */
.rv-area, .rv-service-card, .rv-audience-card, .rv-control-card { padding: 32px; }
.rv-area-medallion { width: 64px; height: 64px; border: 0; border-radius: 16px; background: var(--rv-teal); color: var(--rv-sage); box-shadow: 0 12px 24px -12px rgba(15, 46, 46, .7); }
.rv-area-medallion .rv-icon { width: 30px; height: 30px; }
.rv-service-head { grid-template-columns: 64px minmax(0, 1fr) minmax(300px, 400px); gap: 24px 40px; margin-bottom: 56px; }
.rv-closing h2 { max-width: 18ch; }

/* Footer */
.elizmo-footer { background: var(--rv-bone); padding-block: 72px 28px; }

@media (hover: hover) {
  .rv-dark .rv-area:hover { border-color: var(--rv-sage); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
  .rv-protect-grid li:hover { border-color: var(--rv-spruce); box-shadow: var(--rv-shadow-card-hover); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rv-area:hover, .rv-service-card:hover, .rv-audience-card:hover, .rv-control-card:hover, .rv-protect-grid li:hover { transform: translateY(-4px); }
  .rv-button:hover, .elizmo-nav .elizmo-nav-contact:hover { transform: translateY(-2px); }
}

/* Scroll reveal (1.8.0): site.js stages only content below the fold, reveals it before it
   enters the viewport, and a failsafe shows everything shortly after load. */
@media (prefers-reduced-motion: no-preference) {
  .rv-motion .rv-reveal { opacity: 0; transform: translateY(18px); transition: opacity 480ms var(--rv-ease), transform 560ms var(--rv-ease); transition-delay: var(--rv-delay, 0ms); }
  .rv-motion .rv-reveal.is-visible { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .rv-protect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-service-head { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .rv-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .rv-protect-head { flex-direction: column; align-items: start; gap: 16px; }
  .rv-hero .rv-workflow { max-width: 640px; }
}
@media (max-width: 600px) {
  h2 { font-size: 32px; line-height: 1.1; }
  .rv-hero { padding-block: 48px 64px; }
  .rv-section { padding-block: 72px; }
  .rv-protect { padding-block: 64px; }
  .rv-section-intro { margin-bottom: 36px; }
  .rv-protect-grid { grid-template-columns: 1fr; }
  .rv-dark .rv-area { padding: 28px 24px 24px; }
  .rv-area, .rv-service-card, .rv-audience-card, .rv-control-card { padding: 24px; }
  .rv-area-top { margin-bottom: 24px; }
  .rv-dark .rv-area h3 { font-size: 24px; }
  .rv-problem-grid h3 { font-size: 22px; }
  .rv-steps li { display: block; }
  .rv-step-top { margin-bottom: 16px; }
  .rv-step-top::after { display: none; }
  .rv-service-head { grid-template-columns: 48px 1fr; gap: 16px; }
  .rv-area-medallion { width: 48px; height: 48px; border-radius: 12px; }
  .rv-area-medallion .rv-icon { width: 24px; height: 24px; }
  .rv-hero .rv-workflow-panel { padding: 20px 16px 22px; }
  .elizmo-header-inner { min-height: 0; }
  .elizmo-nav { gap: 20px; }
  .elizmo-nav a { font-size: 15px; }
  .elizmo-nav .elizmo-nav-contact { min-height: 44px; padding: 10px 14px; }
}
@media print {
  header.wp-block-template-part { position: static; }
  .rv-hero { background: var(--rv-white); color: var(--rv-ink); }
  .rv-hero h1, .rv-hero-copy > p, .rv-hero > .rv-container > p { color: var(--rv-teal); }
  .rv-reveal { opacity: 1 !important; transform: none !important; }
}

/* Heading to grid spacing, contact headline spacing */
.rv-section .rv-container > h2 { margin-bottom: 48px; }
.rv-contact-hero h1 { margin-bottom: 28px; }
@media (max-width: 600px) { .rv-section .rv-container > h2 { margin-bottom: 32px; } .rv-contact-hero h1 { margin-bottom: 20px; } }
.rv-sample-badge { background: transparent; }
.rv-contact-sub { margin: 0 0 28px; font-size: 19px; line-height: 1.5; max-width: 52ch; }
.rv-contact-hero h1 { margin-bottom: 16px; }

/* Round 2 (owner feedback 2026-11-05) */
/* Home offerings: deeper card fill and a visible link pill so the cards read as clickable on every device */
.rv-dark .rv-area { background: var(--rv-teal-deep); }
.rv-dark .rv-area p { margin-bottom: 28px; }
.rv-dark .rv-area a { align-self: flex-start; display: inline-flex; align-items: center; min-height: 46px; margin-top: auto; padding: 10px 20px; border: 1px solid rgba(156, 195, 174, .7); border-radius: 999px; color: var(--rv-white); text-decoration: none; transition: background-color 220ms var(--rv-ease), color 220ms var(--rv-ease), border-color 220ms var(--rv-ease); }
.rv-dark .rv-area:hover a, .rv-dark .rv-area a:focus-visible { background: var(--rv-bone); border-color: var(--rv-bone); color: var(--rv-teal); }

/* Services hero: service area panel */
.rv-area-panel { display: grid; padding: 8px 24px 12px; border: 1px solid var(--rv-teal-deep); border-radius: 20px; background: var(--rv-white); color: var(--rv-ink); box-shadow: var(--rv-shadow-panel); }
.rv-area-panel-head { display: grid; gap: 4px; max-width: none; margin: 0; padding: 18px 0 16px; border-bottom: 1px dashed var(--rv-line); }
.rv-area-panel a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; align-items: center; gap: 16px; margin: 0 -12px; padding: 16px 12px; border-radius: 12px; color: var(--rv-teal); text-decoration: none; transition: background-color 220ms var(--rv-ease); }
.rv-area-panel a + a { border-top: 1px solid var(--rv-line); }
.rv-area-panel .rv-icon-tile { width: 48px; height: 48px; border-radius: 12px; }
.rv-area-panel .rv-icon-tile .rv-icon { width: 24px; height: 24px; }
.rv-row-text { display: grid; gap: 2px; min-width: 0; }
.rv-row-text strong { font-family: var(--rv-font-display); font-size: 18px; line-height: 1.3; color: var(--rv-teal); }
.rv-row-text span { font-size: 14px; line-height: 1.45; color: var(--rv-slate); }
.rv-row-arrow { width: 22px; height: 22px; color: var(--rv-spruce); transition: transform 220ms var(--rv-ease); }
.rv-area-panel a:hover { background: var(--rv-mist); }
.rv-area-panel a:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.rv-area-panel a:focus-visible { outline: 3px solid var(--rv-teal); outline-offset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .rv-area-panel a:hover .rv-row-arrow { transform: translateX(4px); }
}
@media (max-width: 960px) {
  .rv-area-panel { max-width: 560px; }
}
@media (max-width: 600px) {
  .rv-area-panel { padding: 4px 16px 8px; }
  .rv-area-panel a { grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; margin: 0 -8px; padding: 14px 8px; }
  .rv-area-panel .rv-icon-tile { width: 40px; height: 40px; }
  .rv-row-text strong { font-size: 17px; }
}
.rv-area-panel { overflow: hidden; }
.rv-area-panel a { margin: 0 -24px; padding: 16px 24px; border-radius: 0; }
@media (max-width: 600px) { .rv-area-panel a { margin: 0 -16px; padding: 14px 16px; } }

/* Round 3: plain outcome lists in the workflow box and sample cards */
.rv-plain-list { list-style: none; margin: 0 0 16px; padding: 0; }
.rv-plain-list li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--rv-line); font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--rv-teal); }
.rv-plain-list li:first-child { border-top: 0; }
.rv-plain-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--rv-spruce); }
.rv-blueprint .rv-plain-list { margin-bottom: 0; }
.rv-workflow-panel .rv-doc-line { margin: 0; font-size: 15px; color: var(--rv-ink); }
.rv-workflow-panel .rv-gate { margin-top: 34px; }

/* Round 4: email preview behaves as a preview; icon tiles respond on hover */
.rv-email-preview { cursor: pointer; transition: transform 220ms var(--rv-ease), box-shadow 220ms var(--rv-ease); }
.rv-email-body p { color: var(--rv-slate); font-style: italic; }
.rv-email-body [data-email-topic] { font-style: normal; }
.rv-icon-tile { transition: background-color 220ms var(--rv-ease), color 220ms var(--rv-ease), box-shadow 220ms var(--rv-ease); }
.rv-icon-tile .rv-icon { transition: transform 260ms var(--rv-ease); }
@media (hover: hover) {
  .rv-area:hover .rv-icon-tile, .rv-protect-grid li:hover .rv-icon-tile, .rv-control-card:hover .rv-icon-tile, .rv-area-panel a:hover .rv-icon-tile { background: var(--rv-sage); color: var(--rv-teal); box-shadow: 0 10px 20px -12px rgba(15, 46, 46, .5); }
  .rv-email-preview:hover { box-shadow: 0 2px 6px rgba(15, 46, 46, .18), 0 48px 90px -24px rgba(0, 0, 0, .6); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rv-area:hover .rv-icon-tile .rv-icon, .rv-protect-grid li:hover .rv-icon-tile .rv-icon, .rv-control-card:hover .rv-icon-tile .rv-icon, .rv-area-panel a:hover .rv-icon-tile .rv-icon { transform: scale(1.12); }
  .rv-email-preview:hover { transform: translateY(-3px); }
}

/* Round 5: fuller draft stage; centered ownership diagram */
.rv-doc-skeleton { display: grid; gap: 9px; margin: 4px 0 14px; }
.rv-doc-skeleton span { display: block; height: 8px; border-radius: 4px; background: var(--rv-line); }
.rv-doc-skeleton span:nth-child(1) { width: 92%; }
.rv-doc-skeleton span:nth-child(2) { width: 78%; }
.rv-doc-skeleton span:nth-child(3) { width: 86%; }
.rv-doc-skeleton span:nth-child(4) { width: 54%; }
.rv-workflow-panel .rv-draft-meta { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--rv-line); border-radius: var(--rv-radius-card); background: var(--rv-mist); }
.rv-ownership .rv-layer { text-align: center; }
.rv-ownership .rv-layer-items { justify-content: center; }
.rv-ownership .rv-layer-client { display: block; }
.rv-ownership .rv-layer-client .rv-chip { margin: 0 0 10px; }
.rv-ownership .rv-layer-title { margin: 2px 0 12px !important; }