/* Update 020: Website Demo 004 — Ripple Office */
.ripple-office-demo {
    --ripple-navy: #122d47;
    --ripple-navy-deep: #091d30;
    --ripple-teal: #1d7071;
    --ripple-teal-soft: #dcebe7;
    --ripple-gold: #d9a354;
    --ripple-copper: #b96f3c;
    --ripple-paper: #f7f1e5;
    --ripple-cream: #fffaf0;
    --ripple-ink: #172638;
    --ripple-muted: #647181;
    --ripple-line: #d6d0c4;
    overflow: hidden;
    color: var(--ripple-ink);
    background: var(--ripple-paper);
}
.ripple-office-demo *,
.ripple-office-demo *::before,
.ripple-office-demo *::after { box-sizing: border-box; }
.ripple-office-demo h1,
.ripple-office-demo h2,
.ripple-office-demo h3,
.ripple-office-demo p { margin-top: 0; }
.ripple-office-demo button,
.ripple-office-demo select,
.ripple-office-demo textarea,
.ripple-office-demo input { font: inherit; }
.ripple-office-demo button,
.ripple-office-demo a { -webkit-tap-highlight-color: transparent; }
.ripple-office-disclaimer {
    padding: .72rem max(1rem, calc((100vw - 1420px) / 2 + 1.5rem));
    display: flex;
    justify-content: center;
    gap: .45rem 1rem;
    flex-wrap: wrap;
    color: #e8eef2;
    background: var(--ripple-navy-deep);
    font-size: .72rem;
    text-align: center;
}
.ripple-office-disclaimer strong {
    color: #f2c77f;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ripple-office-masthead {
    position: relative;
    z-index: 20;
    min-height: 88px;
    padding: 1rem max(1.2rem, calc((100vw - 1420px) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: minmax(240px, auto) 1fr auto;
    gap: 2rem;
    align-items: center;
    border-bottom: 1px solid rgba(18,45,71,.14);
    background: rgba(255,250,240,.97);
    box-shadow: 0 12px 35px rgba(18,45,71,.08);
}
.ripple-office-brand {
    display: inline-flex;
    gap: .85rem;
    align-items: center;
    color: var(--ripple-navy);
    text-decoration: none;
}
.ripple-office-brand > span:last-child { display: grid; }
.ripple-office-brand strong { font-size: 1.02rem; line-height: 1; }
.ripple-office-brand small { margin-top: .28rem; color: var(--ripple-muted); font-size: .64rem; }
.ripple-office-brand-mark {
    position: relative;
    width: 52px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #fff;
    background: var(--ripple-navy);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.17), 0 8px 20px rgba(18,45,71,.16);
}
.ripple-office-brand-mark i {
    position: absolute;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 50%;
}
.ripple-office-brand-mark i:first-child { width: 34px; aspect-ratio: 1; }
.ripple-office-brand-mark i:nth-child(2) { width: 46px; aspect-ratio: 1; }
.ripple-office-brand-mark b { position: relative; z-index: 2; color: #f0bd6e; font-family: var(--serif); font-size: 1.15rem; }
.ripple-office-masthead nav { display: flex; justify-content: center; gap: clamp(.8rem, 2vw, 1.8rem); }
.ripple-office-masthead nav a,
.ripple-office-back {
    color: #46596c;
    font-size: .72rem;
    font-weight: 850;
    text-decoration: none;
}
.ripple-office-masthead nav a:hover,
.ripple-office-masthead nav a:focus-visible,
.ripple-office-back:hover,
.ripple-office-back:focus-visible { color: var(--ripple-teal); }
.ripple-office-back {
    padding: .68rem .8rem;
    border: 1px solid #d3ccc0;
    border-radius: 9px;
    background: #fff;
}
.ripple-office-hero {
    position: relative;
    min-height: 800px;
    padding: clamp(4.5rem, 7vw, 8rem) max(1.5rem, calc((100vw - 1420px) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .85fr);
    gap: clamp(3rem, 6vw, 7.5rem);
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 14%, rgba(29,112,113,.2), transparent 26%),
        radial-gradient(circle at 20% 100%, rgba(217,163,84,.16), transparent 34%),
        linear-gradient(145deg, #fbf6eb, #eee6d8 58%, #dfeae6);
}
.ripple-office-hero::after {
    content: '';
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: -116px;
    height: 190px;
    border-radius: 50% 50% 0 0;
    background: var(--ripple-navy);
    transform: rotate(-1.2deg);
}
.ripple-office-hero-copy { position: relative; z-index: 5; max-width: 760px; }
.ripple-office-eyebrow {
    margin: 0 0 1rem;
    color: #76532c;
    font-size: .67rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.ripple-office-eyebrow.light { color: #edc27d; }
.ripple-office-hero h1 {
    max-width: 10ch;
    margin: 0;
    color: var(--ripple-navy);
    font-size: clamp(4.6rem, 8.5vw, 9.2rem);
    letter-spacing: -.07em;
    line-height: .84;
}
.ripple-office-hero h1 span { color: var(--ripple-copper); font-style: italic; }
.ripple-office-hero-copy > p:not(.ripple-office-eyebrow) {
    max-width: 690px;
    margin: 2rem 0 0;
    color: #4c5c6c;
    font-size: 1.05rem;
    line-height: 1.8;
}
.ripple-office-hero-actions { margin-top: 2rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.ripple-office-primary,
.ripple-office-secondary {
    min-height: 50px;
    padding: .85rem 1.15rem;
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    border-radius: 9px;
    font-size: .76rem;
    font-weight: 900;
    text-decoration: none;
}
.ripple-office-primary { color: #fff; background: var(--ripple-navy); box-shadow: 0 7px 0 #081b2d; }
.ripple-office-primary:hover,
.ripple-office-primary:focus-visible { transform: translateY(2px); box-shadow: 0 5px 0 #081b2d; }
.ripple-office-secondary { border: 1px solid #cfc7bb; color: var(--ripple-navy); background: rgba(255,255,255,.72); }
.ripple-office-hero-visual { position: relative; z-index: 3; min-height: 560px; }
.ripple-office-orbit {
    position: absolute;
    border: 1px solid rgba(18,45,71,.2);
    border-radius: 50%;
}
.ripple-office-orbit.orbit-one { inset: 3% 6% 3% 6%; }
.ripple-office-orbit.orbit-two { inset: 13% 16%; box-shadow: 0 0 0 35px rgba(18,45,71,.025), 0 0 0 70px rgba(18,45,71,.018); }
.ripple-office-flow-card {
    position: absolute;
    z-index: 4;
    width: min(300px, 64%);
    min-height: 130px;
    padding: 1.25rem;
    display: grid;
    align-content: center;
    border: 1px solid rgba(18,45,71,.16);
    border-radius: 16px;
    background: rgba(255,255,255,.93);
    box-shadow: 0 25px 60px rgba(18,45,71,.15);
}
.ripple-office-flow-card span { color: var(--ripple-copper); font-size: .58rem; font-weight: 950; letter-spacing: .11em; }
.ripple-office-flow-card strong { margin-top: .55rem; color: var(--ripple-navy); font-family: var(--serif); font-size: 1.65rem; }
.ripple-office-flow-card small { margin-top: .3rem; color: var(--ripple-muted); }
.ripple-office-flow-card.action { left: 1%; top: 3%; transform: rotate(-3deg); }
.ripple-office-flow-card.household { right: 1%; top: 33%; transform: rotate(2deg); }
.ripple-office-flow-card.market { left: 11%; bottom: 4%; transform: rotate(-1deg); }
.ripple-office-flow-card.household strong { color: var(--ripple-teal); }
.ripple-office-flow-line {
    position: absolute;
    z-index: 2;
    width: 42%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(185,111,60,.7) 0 7px, transparent 7px 13px);
    transform-origin: left center;
}
.ripple-office-flow-line::after {
    content: '›';
    position: absolute;
    right: -5px;
    top: 50%;
    color: var(--ripple-copper);
    font-size: 1.6rem;
    transform: translateY(-54%);
}
.ripple-office-flow-line.line-one { left: 37%; top: 28%; transform: rotate(22deg); }
.ripple-office-flow-line.line-two { right: 30%; bottom: 27%; transform: rotate(152deg); }
.ripple-office-map { position: absolute; right: 3%; bottom: 3%; width: 230px; height: 145px; opacity: .72; }
.ripple-office-map::before,
.ripple-office-map::after {
    content: '';
    position: absolute;
    border-radius: 55% 45% 50% 50%;
    background: rgba(29,112,113,.16);
}
.ripple-office-map::before { left: 0; top: 22px; width: 104px; height: 72px; transform: rotate(-12deg); }
.ripple-office-map::after { right: 0; top: 31px; width: 114px; height: 69px; transform: rotate(12deg); }
.ripple-office-map i { position: absolute; z-index: 3; width: 11px; aspect-ratio: 1; border: 2px solid #fff; border-radius: 50%; background: var(--ripple-teal); box-shadow: 0 0 0 7px rgba(29,112,113,.13); }
.ripple-office-map .node-a { left: 16px; top: 45px; }
.ripple-office-map .node-b { left: 92px; top: 22px; }
.ripple-office-map .node-c { right: 55px; top: 55px; }
.ripple-office-map .node-d { right: 8px; bottom: 15px; }
.ripple-office-map b { position: absolute; z-index: 2; height: 1px; background: rgba(18,45,71,.38); transform-origin: left center; }
.ripple-office-map .route-a { left: 23px; top: 51px; width: 76px; transform: rotate(-18deg); }
.ripple-office-map .route-b { left: 99px; top: 30px; width: 82px; transform: rotate(24deg); }
.ripple-office-map .route-c { right: 16px; top: 66px; width: 72px; transform: rotate(66deg); }
.ripple-office-brief {
    position: relative;
    z-index: 5;
    grid-column: 1 / -1;
    max-width: 1120px;
    margin: -1rem auto 0;
    padding: 1.5rem 1.7rem;
    display: grid;
    grid-template-columns: minmax(190px, .4fr) minmax(310px, 1fr) minmax(310px, .9fr);
    gap: 1.5rem;
    align-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 15px;
    color: #fff;
    background: rgba(9,29,48,.96);
    box-shadow: 0 25px 55px rgba(9,29,48,.22);
}
.ripple-office-brief > span { color: #efc47e; font-size: .63rem; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.ripple-office-brief blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.75rem); line-height: 1.35; }
.ripple-office-brief ol { margin: 0; padding: 0; display: grid; gap: .45rem; list-style: none; }
.ripple-office-brief li { border-bottom: 1px solid rgba(255,255,255,.12); }
.ripple-office-brief li:last-child { border-bottom: 0; }
.ripple-office-brief a { padding: .35rem 0; display: flex; justify-content: space-between; color: #e1ebef; font-size: .73rem; font-weight: 800; text-decoration: none; }
.ripple-office-brief a:hover,
.ripple-office-brief a:focus-visible { color: #efc47e; }
.ripple-office-brief p { grid-column: 1 / -1; margin: 0; color: #aebfc9; font-size: .74rem; line-height: 1.65; }
.ripple-office-brief p strong { color: #fff; }
.ripple-office-intro,
.ripple-office-consumer,
.ripple-office-notes {
    max-width: 1420px;
    margin: auto;
    padding: clamp(5rem, 8vw, 8rem) 1.5rem;
}
.ripple-office-intro > div:first-child,
.ripple-office-section-heading,
.ripple-office-notes > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .6fr);
    gap: 2rem;
    align-items: end;
}
.ripple-office-intro h2,
.ripple-office-section-heading h2,
.ripple-office-notes h2,
.ripple-office-briefing h2,
.ripple-office-public-vote h2 {
    max-width: 13ch;
    margin-bottom: 0;
    color: var(--ripple-navy);
    font-size: clamp(2.6rem, 5.5vw, 5.7rem);
    letter-spacing: -.055em;
    line-height: .95;
}
.ripple-office-intro-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.ripple-office-intro-grid article {
    min-height: 250px;
    padding: 1.5rem;
    display: grid;
    align-content: start;
    border: 1px solid var(--ripple-line);
    border-radius: 16px;
    background: #fffaf2;
}
.ripple-office-intro-grid article:nth-child(2) { transform: translateY(22px); }
.ripple-office-intro-grid span { color: var(--ripple-copper); font-family: var(--serif); font-size: 2rem; }
.ripple-office-intro-grid h3 { margin: 1.7rem 0 .8rem; color: var(--ripple-navy); font-size: 1.2rem; }
.ripple-office-intro-grid p { margin-bottom: 0; color: var(--ripple-muted); line-height: 1.7; }
.ripple-office-builder {
    position: relative;
    padding: clamp(5rem, 8vw, 8rem) max(1.5rem, calc((100vw - 1420px) / 2 + 1.5rem));
    color: #fff;
    background:
        radial-gradient(circle at 85% 18%, rgba(29,112,113,.3), transparent 23%),
        linear-gradient(145deg, var(--ripple-navy-deep), var(--ripple-navy) 65%, #174a57);
}
.ripple-office-section-heading > p { margin: 0; color: #bfd0d8; font-family: var(--serif); font-size: 1.03rem; line-height: 1.7; }
.ripple-office-builder .ripple-office-section-heading h2 { color: #fff; }
.ripple-office-builder-shell { margin-top: 3rem; display: grid; grid-template-columns: minmax(280px, .38fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ripple-office-controls {
    position: sticky;
    top: 1.25rem;
    padding: 1.35rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 15px;
    background: rgba(4,20,34,.7);
    box-shadow: 0 25px 60px rgba(0,0,0,.18);
    backdrop-filter: blur(12px);
}
.ripple-office-control-group + .ripple-office-control-group { margin-top: 1.45rem; padding-top: 1.35rem; border-top: 1px solid rgba(255,255,255,.11); }
.ripple-office-control-label,
.ripple-office-control-group.scale label > span {
    display: block;
    color: #efc47e;
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.ripple-office-choice-list { margin-top: .7rem; display: grid; gap: .55rem; }
.ripple-office-choice-list button {
    width: 100%;
    padding: .8rem;
    display: grid;
    gap: .15rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    color: #d7e3e9;
    background: rgba(255,255,255,.035);
    text-align: left;
    cursor: pointer;
}
.ripple-office-choice-list button:hover,
.ripple-office-choice-list button:focus-visible { border-color: rgba(239,196,126,.7); }
.ripple-office-choice-list button.is-active { border-color: #efc47e; color: #fff; background: rgba(217,163,84,.15); box-shadow: inset 4px 0 #efc47e; }
.ripple-office-choice-list b { font-size: .79rem; }
.ripple-office-choice-list small { color: #9fb2bd; font-size: .65rem; }
.ripple-office-select-label { margin-top: .7rem; display: grid; gap: .42rem; color: #c7d5dc; font-size: .69rem; }
.ripple-office-select-label select {
    min-height: 46px;
    padding: .65rem .75rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    color: #fff;
    background: #17364f;
}
.ripple-office-select-label option { color: #172638; background: #fff; }
.ripple-office-region-list { margin-top: .7rem; display: flex; gap: .45rem; flex-wrap: wrap; }
.ripple-office-region-list button {
    padding: .55rem .65rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: #b9cad3;
    background: transparent;
    font-size: .64rem;
    font-weight: 800;
    cursor: pointer;
}
.ripple-office-region-list button.is-active { border-color: #77c5bf; color: #fff; background: rgba(29,112,113,.42); }
.ripple-office-control-group.scale label { display: grid; gap: .45rem; }
.ripple-office-control-group.scale label strong { color: #fff; font-size: .78rem; }
.ripple-office-control-group.scale input { width: 100%; margin-top: .85rem; accent-color: #efc47e; }
.ripple-office-scale-labels { display: flex; justify-content: space-between; color: #8fa4af; font-size: .57rem; }
.ripple-office-build-button,
.ripple-office-reset-button {
    width: 100%;
    min-height: 48px;
    margin-top: 1.25rem;
    padding: .75rem 1rem;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
}
.ripple-office-build-button { display: flex; justify-content: space-between; border: 0; color: var(--ripple-navy); background: #efc47e; box-shadow: 0 6px 0 #9d6636; }
.ripple-office-build-button:hover,
.ripple-office-build-button:focus-visible { transform: translateY(2px); box-shadow: 0 4px 0 #9d6636; }
.ripple-office-reset-button { margin-top: .7rem; border: 1px solid rgba(255,255,255,.16); color: #b7c6ce; background: transparent; }
.ripple-office-results { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 15px; background: #f9f4e9; box-shadow: 0 30px 75px rgba(0,0,0,.22); }
.ripple-office-result-header {
    min-height: 86px;
    padding: 1.2rem 1.4rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    color: #fff;
    background: #173b56;
}
.ripple-office-result-header > div:first-child { display: grid; }
.ripple-office-result-header span,
.ripple-office-brief-code small { color: #afc4cf; font-size: .6rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.ripple-office-result-header strong { margin-top: .35rem; font-family: var(--serif); font-size: 1.45rem; }
.ripple-office-brief-code { min-width: 110px; padding-left: 1rem; display: grid; border-left: 1px solid rgba(255,255,255,.15); text-align: right; }
.ripple-office-brief-code strong { color: #efc47e; font-size: 1rem; }
.ripple-office-ripple-flow {
    padding: 1.25rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: .7rem;
    align-items: stretch;
}
.ripple-office-ripple-flow .stage {
    min-width: 0;
    min-height: 260px;
    padding: 1.15rem;
    display: grid;
    align-content: start;
    border: 1px solid #dad3c6;
    border-radius: 12px;
    color: var(--ripple-ink);
    background: #fff;
}
.ripple-office-ripple-flow .stage > span { color: var(--ripple-copper); font-size: .58rem; font-weight: 950; letter-spacing: .09em; }
.ripple-office-ripple-flow .stage h3 { margin: 1rem 0 .7rem; color: var(--ripple-navy); font-size: 1rem; line-height: 1.3; }
.ripple-office-ripple-flow .stage p { margin-bottom: 1rem; color: var(--ripple-muted); font-size: .75rem; line-height: 1.65; }
.ripple-office-ripple-flow .stage > div { margin-top: auto; padding-top: .8rem; display: flex; justify-content: space-between; gap: 1rem; align-items: end; border-top: 1px solid #e4ded2; }
.ripple-office-ripple-flow .stage small { color: #75808c; font-size: .57rem; font-weight: 850; text-transform: uppercase; }
.ripple-office-ripple-flow .stage div strong { color: var(--ripple-navy); font-family: var(--serif); font-size: 1.75rem; line-height: 1; }
.ripple-office-ripple-flow .stage.household { background: #eef7f4; }
.ripple-office-ripple-flow .stage.household div strong { color: var(--ripple-teal); }
.ripple-office-stage-arrow { display: grid; place-items: center; color: var(--ripple-copper); font-size: 1.45rem; font-weight: 950; }
.ripple-office-dashboard { padding: 0 1.25rem 1.25rem; display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem; }
.ripple-office-balance-card,
.ripple-office-map-card { min-width: 0; padding: 1.15rem; border: 1px solid #d7d1c4; border-radius: 12px; color: var(--ripple-ink); background: #fff; }
.ripple-office-balance-heading,
.ripple-office-map-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.ripple-office-balance-heading span,
.ripple-office-map-heading span { color: #6d7885; font-size: .61rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ripple-office-balance-heading strong { color: var(--ripple-navy); font-family: var(--serif); font-size: 2.8rem; line-height: .8; }
.ripple-office-map-heading strong { color: var(--ripple-navy); font-size: .8rem; text-align: right; }
.ripple-office-balance-track { position: relative; height: 12px; margin-top: 1rem; overflow: hidden; border-radius: 999px; background: #e9e3d8; }
.ripple-office-balance-track i { position: absolute; inset: 0 26% 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--ripple-copper), var(--ripple-gold), var(--ripple-teal)); transition: right .45s ease; }
.ripple-office-balance-card > p { margin: .75rem 0 1.2rem; color: var(--ripple-muted); font-size: .72rem; line-height: 1.55; }
.ripple-office-metric-row { display: grid; gap: .7rem; }
.ripple-office-metric-row > div { display: grid; grid-template-columns: 1fr auto; gap: .25rem .8rem; align-items: center; }
.ripple-office-metric-row span { color: #647181; font-size: .62rem; }
.ripple-office-metric-row b { color: var(--ripple-navy); font-size: .7rem; }
.ripple-office-metric-row i { grid-column: 1 / -1; position: relative; height: 5px; overflow: hidden; border-radius: 999px; background: #ebe5da; }
.ripple-office-metric-row em { position: absolute; inset: 0 22% 0 0; border-radius: inherit; background: var(--ripple-teal); transition: right .45s ease; }
.ripple-office-world-map { margin-top: .8rem; overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, #edf4f1, #e5ece9); }
.ripple-office-world-map svg { width: 100%; height: auto; display: block; }
.ripple-office-world-map .land { fill: rgba(29,112,113,.18); stroke: rgba(18,45,71,.25); stroke-width: 2; }
.ripple-office-world-map .route { fill: none; stroke: rgba(185,111,60,.65); stroke-width: 3; stroke-dasharray: 8 7; }
.ripple-office-world-map .map-node { fill: var(--ripple-teal); stroke: #fff; stroke-width: 5; transform-box: fill-box; transform-origin: center; }
.ripple-office-world-map[data-active-region="hemisphere"] .node-west,
.ripple-office-world-map[data-active-region="atlantic"] .node-atlantic,
.ripple-office-world-map[data-active-region="pacific"] .node-pacific,
.ripple-office-world-map[data-active-region="global"] .map-node { fill: var(--ripple-copper); transform: scale(1.45); }
.ripple-office-world-map.is-pulsing .map-node { animation: rippleOfficePulse .65s ease; }
@keyframes rippleOfficePulse { 50% { transform: scale(1.8); } }
.ripple-office-map-stats { margin-top: .75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ripple-office-map-stats div { padding: .65rem; display: grid; gap: .25rem; border: 1px solid #ddd7cb; border-radius: 8px; background: #faf7f0; }
.ripple-office-map-stats span { color: #707b87; font-size: .55rem; text-transform: uppercase; }
.ripple-office-map-stats strong { color: var(--ripple-navy); font-size: .9rem; }
.ripple-office-brief-actions { padding: 0 1.25rem 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; color: var(--ripple-ink); }
.ripple-office-brief-actions p { margin: 0; color: #697480; font-size: .66rem; line-height: 1.55; }
.ripple-office-brief-actions p strong { color: var(--ripple-navy); }
.ripple-office-brief-actions button { padding: .7rem .85rem; border: 1px solid #c8c1b5; border-radius: 8px; color: var(--ripple-navy); background: #fff; font-size: .67rem; font-weight: 900; cursor: pointer; }
.ripple-office-brief-actions > span { grid-column: 2; min-height: 1rem; color: var(--ripple-teal); font-size: .62rem; text-align: right; }
.ripple-office-consumer .ripple-office-section-heading > p { color: var(--ripple-muted); }
.ripple-office-consumer-shell { margin-top: 3rem; display: grid; grid-template-columns: 1fr .78fr; gap: 1.25rem; align-items: stretch; }
.ripple-office-story-form,
.ripple-office-receipt { min-width: 0; padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid var(--ripple-line); border-radius: 15px; background: #fffaf2; }
.ripple-office-story-step { display: flex; gap: .85rem; align-items: center; }
.ripple-office-story-step + label { margin-top: 1rem; }
.ripple-office-story-step:not(:first-child) { margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid #ddd6ca; }
.ripple-office-story-step > span { width: 38px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ripple-navy); font-family: var(--serif); }
.ripple-office-story-step > div { display: grid; }
.ripple-office-story-step strong { color: var(--ripple-navy); }
.ripple-office-story-step small { margin-top: .2rem; color: var(--ripple-muted); }
.ripple-office-story-form > label { display: grid; gap: .45rem; color: #4d5d6b; font-size: .71rem; font-weight: 800; }
.ripple-office-story-form select,
.ripple-office-story-form textarea { width: 100%; padding: .75rem; border: 1px solid #cfc8bc; border-radius: 8px; color: var(--ripple-ink); background: #fff; }
.ripple-office-story-form textarea { resize: vertical; line-height: 1.6; }
.ripple-office-story-form > label > small { color: #7d8791; font-weight: 600; text-align: right; }
.ripple-office-story-checks { margin-top: 1rem; }
.ripple-office-story-checks label { display: flex; gap: .6rem; align-items: flex-start; color: #596977; font-size: .68rem; line-height: 1.45; }
.ripple-office-story-checks input { margin-top: .16rem; accent-color: var(--ripple-teal); }
.ripple-office-story-form > button { width: 100%; min-height: 48px; margin-top: 1.2rem; padding: .75rem 1rem; display: flex; justify-content: space-between; border: 0; border-radius: 8px; color: #fff; background: var(--ripple-navy); font-size: .72rem; font-weight: 900; cursor: pointer; }
.ripple-office-form-status { margin: .7rem 0 0; color: var(--ripple-muted); font-size: .65rem; }
.ripple-office-form-status.is-error { color: #9b3e30; }
.ripple-office-form-status.is-good { color: var(--ripple-teal); }
.ripple-office-receipt { position: relative; overflow: hidden; color: #fff; background: var(--ripple-navy); box-shadow: 0 25px 55px rgba(18,45,71,.16); }
.ripple-office-receipt::before { content: 'RECEIPT'; position: absolute; right: -1rem; bottom: -1rem; color: rgba(255,255,255,.035); font-family: var(--serif); font-size: clamp(4rem, 8vw, 8rem); font-weight: 900; transform: rotate(-8deg); }
.ripple-office-receipt-top,
.ripple-office-receipt-body,
.ripple-office-receipt-footer { position: relative; z-index: 2; }
.ripple-office-receipt-top { padding-bottom: 1rem; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed rgba(255,255,255,.24); }
.ripple-office-receipt-top span { color: #efc47e; font-size: .58rem; font-weight: 950; letter-spacing: .1em; }
.ripple-office-receipt-top strong { font-size: .78rem; }
.ripple-office-receipt-body { padding: 1.6rem 0; display: grid; gap: .45rem; }
.ripple-office-receipt-body > span { margin-top: .8rem; color: #9fb4bf; font-size: .57rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ripple-office-receipt-body > span:first-child { margin-top: 0; }
.ripple-office-receipt-body strong { font-size: .95rem; }
.ripple-office-receipt-body p { min-height: 86px; margin: 0; color: #d8e3e8; font-family: var(--serif); font-size: 1.08rem; line-height: 1.55; }
.ripple-office-receipt-body .not-sent { color: #efc47e; }
.ripple-office-receipt-footer { padding-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-top: 1px dashed rgba(255,255,255,.24); color: #9fb4bf; font-size: .59rem; }
.ripple-office-receipt-footer i { padding: .35rem .5rem; border: 1px solid #efc47e; border-radius: 4px; color: #efc47e; font-style: normal; font-weight: 950; letter-spacing: .08em; transform: rotate(-3deg); }
.ripple-office-briefing {
    padding: clamp(5rem, 8vw, 8rem) max(1.5rem, calc((100vw - 1420px) / 2 + 1.5rem));
    color: #fff;
    background: var(--ripple-navy-deep);
}
.ripple-office-briefing > header { max-width: 960px; }
.ripple-office-briefing h2 { color: #fff; }
.ripple-office-briefing > header > p:last-child { max-width: 760px; margin: 1.5rem 0 0; color: #aebfc9; line-height: 1.75; }
.ripple-office-briefing-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ripple-office-briefing-grid article { min-height: 330px; padding: 1.4rem; display: grid; align-content: start; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.045); }
.ripple-office-briefing-grid span { color: #efc47e; font-size: .59rem; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.ripple-office-briefing-grid h3 { margin: 1.5rem 0 .8rem; color: #fff; font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; }
.ripple-office-briefing-grid p { color: #aebfc9; line-height: 1.7; }
.ripple-office-briefing-grid a { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); color: #efc47e; font-size: .69rem; font-weight: 900; text-decoration: none; }
.ripple-office-notes > header > p:last-child { margin: 0; color: var(--ripple-muted); font-family: var(--serif); line-height: 1.7; }
.ripple-office-reference-grid { margin-top: 3rem; display: grid; gap: .8rem; }
.ripple-office-reference-grid a { padding: 1.15rem 1.25rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; border: 1px solid var(--ripple-line); border-radius: 12px; color: var(--ripple-ink); background: #fffaf2; text-decoration: none; }
.ripple-office-reference-grid a:hover,
.ripple-office-reference-grid a:focus-visible { border-color: var(--ripple-teal); transform: translateX(4px); }
.ripple-office-reference-grid > a > span { color: var(--ripple-copper); font-family: var(--serif); font-size: 1.7rem; }
.ripple-office-reference-grid strong { color: var(--ripple-navy); }
.ripple-office-reference-grid p { margin: .3rem 0 0; color: var(--ripple-muted); font-size: .76rem; line-height: 1.6; }
.ripple-office-reference-grid i { color: var(--ripple-teal); font-style: normal; font-size: 1.2rem; }
.ripple-office-method-note { margin-top: 2rem; padding: clamp(1.5rem, 3vw, 2.4rem); display: grid; grid-template-columns: .25fr 1fr 1fr; gap: 1.5rem; align-items: center; border-left: 6px solid var(--ripple-copper); color: #fff; background: var(--ripple-navy); }
.ripple-office-method-note > span { color: #efc47e; font-size: .63rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.ripple-office-method-note blockquote { margin: 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; }
.ripple-office-method-note p { margin: 0; color: #b7c7cf; font-size: .73rem; line-height: 1.65; }
.ripple-office-public-vote {
    padding: clamp(4rem, 7vw, 6rem) max(1.5rem, calc((100vw - 1420px) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    border-top: 1px solid #d5cfc3;
    background: #efe7da;
}
.ripple-office-public-vote h2 { max-width: 12ch; font-size: clamp(2.5rem, 4.8vw, 4.8rem); }
.ripple-office-public-vote p:last-child { max-width: 690px; margin: 1rem 0 0; color: var(--ripple-muted); }
.ripple-office-public-vote .website-demo-vote { padding: 1rem; border: 1px solid #d1c8bb; border-radius: 12px; background: #fffaf2; }
.ripple-office-exit { padding: 1.25rem max(1.5rem, calc((100vw - 1420px) / 2 + 1.5rem)); display: flex; justify-content: space-between; gap: 1rem; background: var(--ripple-navy); }
.ripple-office-exit a { color: #d9e5ea; font-size: .7rem; font-weight: 850; text-decoration: none; }
.ripple-office-exit a:hover,
.ripple-office-exit a:focus-visible { color: #efc47e; }
@media (max-width: 1120px) {
    .ripple-office-masthead { grid-template-columns: 1fr auto; }
    .ripple-office-masthead nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; }
    .ripple-office-hero { grid-template-columns: 1fr; }
    .ripple-office-hero-copy { max-width: 900px; }
    .ripple-office-hero-visual { min-height: 520px; }
    .ripple-office-brief { grid-template-columns: .4fr 1fr; }
    .ripple-office-brief ol { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
    .ripple-office-builder-shell { grid-template-columns: 1fr; }
    .ripple-office-controls { position: relative; top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .ripple-office-control-group + .ripple-office-control-group { margin: 0; padding: 0; border: 0; }
    .ripple-office-build-button,
    .ripple-office-reset-button { align-self: end; margin-top: 0; }
    .ripple-office-ripple-flow { grid-template-columns: 1fr; }
    .ripple-office-stage-arrow { min-height: 24px; transform: rotate(90deg); }
    .ripple-office-ripple-flow .stage { min-height: 210px; }
}
@media (max-width: 860px) {
    .ripple-office-brief { grid-template-columns: 1fr; }
    .ripple-office-brief ol { grid-column: auto; grid-template-columns: 1fr; }
    .ripple-office-brief p { grid-column: auto; }
    .ripple-office-intro > div:first-child,
    .ripple-office-section-heading,
    .ripple-office-notes > header { grid-template-columns: 1fr; align-items: start; }
    .ripple-office-intro-grid,
    .ripple-office-briefing-grid { grid-template-columns: 1fr; }
    .ripple-office-intro-grid article:nth-child(2) { transform: none; }
    .ripple-office-dashboard,
    .ripple-office-consumer-shell { grid-template-columns: 1fr; }
    .ripple-office-controls { grid-template-columns: 1fr; }
    .ripple-office-method-note { grid-template-columns: 1fr; }
    .ripple-office-public-vote { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .ripple-office-masthead { grid-template-columns: 1fr; gap: 1rem; }
    .ripple-office-back { justify-self: start; }
    .ripple-office-masthead nav { grid-column: auto; grid-row: auto; width: 100%; padding-bottom: .35rem; white-space: nowrap; }
    .ripple-office-hero { min-height: 0; padding-top: 4rem; padding-bottom: 8rem; }
    .ripple-office-hero h1 { font-size: clamp(3.8rem, 18vw, 6rem); }
    .ripple-office-hero-visual { min-height: 570px; }
    .ripple-office-flow-card { width: 76%; }
    .ripple-office-flow-card.action { left: 0; }
    .ripple-office-flow-card.household { right: 0; top: 34%; }
    .ripple-office-flow-card.market { left: 2%; bottom: 5%; }
    .ripple-office-map { right: -10%; bottom: 1%; transform: scale(.75); }
    .ripple-office-brief { margin-top: 0; }
    .ripple-office-intro h2,
    .ripple-office-section-heading h2,
    .ripple-office-notes h2,
    .ripple-office-briefing h2 { font-size: clamp(2.5rem, 13vw, 4.2rem); }
    .ripple-office-result-header { align-items: flex-start; flex-direction: column; }
    .ripple-office-brief-code { padding: .8rem 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.15); text-align: left; }
    .ripple-office-ripple-flow,
    .ripple-office-dashboard,
    .ripple-office-brief-actions { padding-left: .8rem; padding-right: .8rem; }
    .ripple-office-map-stats { grid-template-columns: 1fr; }
    .ripple-office-brief-actions { grid-template-columns: 1fr; }
    .ripple-office-brief-actions > span { grid-column: auto; text-align: left; }
    .ripple-office-reference-grid a { grid-template-columns: auto 1fr; }
    .ripple-office-reference-grid i { display: none; }
    .ripple-office-public-vote { align-items: start; }
    .ripple-office-exit { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .ripple-office-world-map.is-pulsing .map-node { animation: none; }
    .ripple-office-balance-track i,
    .ripple-office-metric-row em { transition: none; }
}