.ml-realcolors main p{color:inherit}
.ml-realcolors .hero{padding:0;gap:normal;align-items:normal;grid-template-columns:none}
.ml-realcolors main .eyebrow{font-size:11px!important}
/* Real Colors page, preview rebuild, round 3 (2026-10-27: phone hero, natural skin under the gels, steps readable at once,
   less repetition, tighter page). Round 2 (2026-10-27). Pairs with the Home and About previews: same tokens,
   fonts, header, footer and Georgia-italic second lines. Each section has its own idea:
   I stage gels on the room · II paint you tap, the flood, the swirl · III one journey of four
   threads · IV the two facilitators at full height · V wall-scale quotes · VI questions beside the room · VII close.
   Grounds hand off by gradient; there are no boxes, cards or section rules. */

html:has(> body.ml-realcolors){
  --paper:#f8f5ed;
  --warm:#f2e8d8;
  --navy:#172d3d;
  --navy-2:#13263a;
  --ink-a:#172d3d;
  --coral:#f04d49;
  --accent:#c8372f;
  --cream:#f8f5ed;
  --cream-2:#c8d2d9;
  /* Real Colors (the Home preview's tones: the live petal stops, lightened so navy type stays AA) */
  --rc-blue:#8fc6e5;  --rc-blue-1:#c4e4f4;  --rc-blue-d:#5fa8d6;  --rc-blue-x:#3f86bb;
  --rc-gold:#ebc96f;  --rc-gold-1:#f7e5b4;  --rc-gold-d:#dcae3e;  --rc-gold-x:#b98a1f;
  --rc-orange:#ef9f72;--rc-orange-1:#fbd2b4;--rc-orange-d:#e5814e;--rc-orange-x:#c9612f;
  --rc-green:#acc59c; --rc-green-1:#dbe8cc; --rc-green-d:#88a877; --rc-green-x:#5f8550;
  --header-h:86px;
  --serif:Georgia,"Times New Roman",serif;
  --gut:max(44px,calc((100vw - 1440px) / 2));
}
@media (max-width:1250px){html:has(> body.ml-realcolors){--header-h:78px}}
@media (max-width:850px){html:has(> body.ml-realcolors){--gut:24px}}
@media (max-width:600px){html:has(> body.ml-realcolors){--header-h:74px;--gut:20px}}
@media (max-width:360px){html:has(> body.ml-realcolors){--gut:16px}}

.ml-realcolors *,.ml-realcolors *::before,.ml-realcolors *::after{box-sizing:border-box}
html:has(> body.ml-realcolors){scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body.ml-realcolors{margin:0;background:var(--paper);color:var(--ink-a);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
.ml-realcolors img{display:block;max-width:100%;height:auto}
.ml-realcolors a{color:inherit;text-decoration:none}
.ml-realcolors button{font:inherit;cursor:pointer;color:inherit}
.ml-realcolors p,.ml-realcolors h1,.ml-realcolors h2,.ml-realcolors h3,.ml-realcolors figure,.ml-realcolors blockquote,.ml-realcolors ol{margin:0}
.ml-realcolors main{overflow-x:clip}
.ml-realcolors a:focus-visible,.ml-realcolors button:focus-visible,.ml-realcolors summary:focus-visible{outline:2px solid var(--coral);outline-offset:5px;border-radius:2px}
.ml-realcolors .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:1250px){.ml-realcolors.homepage .site-header .nav.is-open{display:flex}}
/* 44px hit areas on the copied header, without changing how it looks */
@media (min-width:1251px){.ml-realcolors.homepage .site-header .nav>a:not(.button){display:inline-flex;align-items:center;min-height:44px}}
.ml-realcolors.homepage .nav>a[aria-current="page"]:not(.button){color:var(--red-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.ml-realcolors .language-switch button{position:relative}
.ml-realcolors .language-switch button::after{content:"";position:absolute;inset:-6px -2px}
.ml-realcolors .brand,.ml-realcolors .footer-brand{min-height:44px}
@media (max-width:600px){.ml-realcolors.homepage .menu-toggle{width:44px;height:44px;padding:12px}}

.ml-realcolors main h1,.ml-realcolors main h2,.ml-realcolors main h3{font-family:var(--display);font-weight:650;letter-spacing:-.055em;color:inherit;margin:0}
.ml-realcolors main em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.045em}
.ml-realcolors .eyebrow{font-size:11px;font-weight:750;letter-spacing:.14em;line-height:1.7;margin-bottom:20px}
.ml-realcolors .poster{font-size:clamp(46px,7vw,124px);font-weight:800;line-height:.92;letter-spacing:-.064em;text-wrap:balance}
.ml-realcolors .poster>span,.ml-realcolors .poster>em{display:block}
.ml-realcolors .poster em{font-weight:400;letter-spacing:-.04em}
.ml-realcolors .reg{font-size:.9em;vertical-align:.12em;margin-left:.08em}
.ml-realcolors .cap-line{display:block;width:34px;height:1px;background:var(--coral)}

.ml-realcolors .btn{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;padding:16px 23px;min-height:55px;background:var(--navy);color:#fff;font-size:14px;font-weight:650;line-height:1.4;border-radius:3px;box-shadow:0 7px 14px #172d3d14;transition:background .18s,transform .18s}
.ml-realcolors .btn>span:last-child{font-size:20px;line-height:1}
.ml-realcolors .btn:hover{background:#304c5d;transform:translateY(-2px)}
.ml-realcolors .btn--light{background:var(--cream);color:var(--navy);box-shadow:0 10px 24px #0b161f40}
.ml-realcolors .btn--light:hover{background:#fff}
.ml-realcolors .text-link{display:inline-flex;align-items:center;gap:18px;min-height:44px;border-bottom:1px solid currentColor;font-size:13px;font-weight:650;line-height:1.4}
.ml-realcolors .text-link:hover{color:var(--accent)}
.ml-realcolors .actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px}

/* =========================================================
   I · Hero: the room under stage gels, the title in the photo
   ========================================================= */
.ml-realcolors .hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:max(640px,calc(100svh - var(--header-h)));background:var(--navy);color:var(--cream)}
.ml-realcolors .hero-stage{position:absolute;inset:0;z-index:-1;overflow:hidden;container-type:size}
.ml-realcolors .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:brightness(.64) saturate(.86) contrast(1.06)}
/* four gels: cones of coloured light from above, swaying slowly, added to the room (screen) */
.ml-realcolors .hero-gels{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none}
/* Natural skin: the gels are masked off the faces and hands in the photo. Soft elliptical holes are placed in
   the photo's own coordinates (fractions of the 1280x853 frame) and mapped through the object-fit:cover crop
   with container units: --dw/--dh = the drawn photo size, --ox/--oy = its offset, --px/--py = object-position.
   Keep --px/--py in step with .hero-photo's object-position. Each hole keeps ~10-16% of the gel (a hint of
   stage light, no colour cast). Browsers without container units drop the mask (gels everywhere, as before). */
.ml-realcolors .hero-gels{--px:.5;--py:.22;
  --dw:max(100cqw,150.06cqh);--dh:max(66.64cqw,100cqh);
  --ox:calc((100cqw - var(--dw)) * var(--px));--oy:calc((100cqh - var(--dh)) * var(--py));
  --hole:rgba(0,0,0,.1) 0,rgba(0,0,0,.16) 42%,#000 100%;
  -webkit-mask-image:
    radial-gradient(calc(var(--dw) * .1) calc(var(--dh) * .2) at calc(var(--ox) + var(--dw) * .207) calc(var(--oy) + var(--dh) * .2),var(--hole)),
    radial-gradient(calc(var(--dw) * .05) calc(var(--dh) * .08) at calc(var(--ox) + var(--dw) * .121) calc(var(--oy) + var(--dh) * .48),var(--hole)),
    radial-gradient(calc(var(--dw) * .095) calc(var(--dh) * .19) at calc(var(--ox) + var(--dw) * .672) calc(var(--oy) + var(--dh) * .3),var(--hole)),
    radial-gradient(calc(var(--dw) * .05) calc(var(--dh) * .08) at calc(var(--ox) + var(--dw) * .79) calc(var(--oy) + var(--dh) * .49),var(--hole)),
    radial-gradient(calc(var(--dw) * .13) calc(var(--dh) * .22) at calc(var(--ox) + var(--dw) * .14) calc(var(--oy) + var(--dh) * .77),var(--hole)),
    radial-gradient(calc(var(--dw) * .09) calc(var(--dh) * .16) at calc(var(--ox) + var(--dw) * .55) calc(var(--oy) + var(--dh) * .69),var(--hole)),
    radial-gradient(calc(var(--dw) * .1) calc(var(--dh) * .18) at calc(var(--ox) + var(--dw) * .9) calc(var(--oy) + var(--dh) * .62),var(--hole));
  -webkit-mask-composite:source-in;
  mask-image:
    radial-gradient(calc(var(--dw) * .1) calc(var(--dh) * .2) at calc(var(--ox) + var(--dw) * .207) calc(var(--oy) + var(--dh) * .2),var(--hole)),
    radial-gradient(calc(var(--dw) * .05) calc(var(--dh) * .08) at calc(var(--ox) + var(--dw) * .121) calc(var(--oy) + var(--dh) * .48),var(--hole)),
    radial-gradient(calc(var(--dw) * .095) calc(var(--dh) * .19) at calc(var(--ox) + var(--dw) * .672) calc(var(--oy) + var(--dh) * .3),var(--hole)),
    radial-gradient(calc(var(--dw) * .05) calc(var(--dh) * .08) at calc(var(--ox) + var(--dw) * .79) calc(var(--oy) + var(--dh) * .49),var(--hole)),
    radial-gradient(calc(var(--dw) * .13) calc(var(--dh) * .22) at calc(var(--ox) + var(--dw) * .14) calc(var(--oy) + var(--dh) * .77),var(--hole)),
    radial-gradient(calc(var(--dw) * .09) calc(var(--dh) * .16) at calc(var(--ox) + var(--dw) * .55) calc(var(--oy) + var(--dh) * .69),var(--hole)),
    radial-gradient(calc(var(--dw) * .1) calc(var(--dh) * .18) at calc(var(--ox) + var(--dw) * .9) calc(var(--oy) + var(--dh) * .62),var(--hole));
  mask-composite:intersect}
.ml-realcolors .hero-gels i{position:absolute;top:-34%;left:var(--sx);width:150vmax;height:150%;margin-left:-75vmax;transform-origin:50% 0;transform:rotate(var(--a));opacity:var(--o,.9);
  background:conic-gradient(from calc(180deg - var(--w) / 2) at 50% 0,transparent 0deg,var(--g) calc(var(--w) * .38),var(--g) calc(var(--w) * .62),transparent var(--w),transparent 360deg);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.35) 18%,#000 34%,#000 62%,transparent 96%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.35) 18%,#000 34%,#000 62%,transparent 96%);
  animation:gel-sway var(--t,23s) ease-in-out var(--d,0s) infinite alternate}
.ml-realcolors .hero-gels .g-blue{--sx:6%;--a:-17deg;--w:30deg;--g:#2f8ae8;--t:21s;--d:-4s}
.ml-realcolors .hero-gels .g-gold{--sx:38%;--a:-6deg;--w:24deg;--g:#f7b928;--t:26s;--d:-11s;--o:.74}
.ml-realcolors .hero-gels .g-orange{--sx:66%;--a:9deg;--w:26deg;--g:#f56a2a;--t:24s;--d:-7s;--o:.84}
.ml-realcolors .hero-gels .g-green{--sx:96%;--a:19deg;--w:30deg;--g:#58b545;--t:28s;--d:-16s;--o:.8}
@keyframes gel-sway{from{transform:rotate(calc(var(--a) - 6deg))}to{transform:rotate(calc(var(--a) + 6deg))}}
.ml-realcolors .hero-scrim{position:absolute;inset:0;
  background:linear-gradient(to top,var(--navy) 0,rgba(23,45,61,.94) 16%,rgba(23,45,61,.72) 34%,rgba(23,45,61,.28) 52%,rgba(23,45,61,0) 66%),
             linear-gradient(to right,rgba(19,38,58,.7) 0,rgba(19,38,58,.3) 30%,rgba(19,38,58,0) 60%)}
.ml-realcolors .hero-copy{position:relative;padding:clamp(120px,14vh,220px) var(--gut) clamp(22px,2.6vw,40px)}
.ml-realcolors .hero-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:clamp(12px,1.4vw,22px);color:#eef3f6}
.ml-realcolors .dots{display:inline-flex;gap:5px}
.ml-realcolors .dots i{display:block;width:8px;height:8px;border-radius:50%;background:var(--rc-blue)}
.ml-realcolors .dots i:nth-child(2){background:var(--rc-gold)}
.ml-realcolors .dots i:nth-child(3){background:var(--rc-orange)}
.ml-realcolors .dots i:nth-child(4){background:var(--rc-green)}
.ml-realcolors .hero h1,html[lang="es"] .ml-realcolors .hero h1{font-size:clamp(54px,min(8.8vw,17svh),168px);font-weight:800;line-height:.88;letter-spacing:-.066em;color:#fbf8f1;text-shadow:0 2px 30px #0b161f59}
.ml-realcolors .hero h1>span,.ml-realcolors .hero h1>em{display:block}
.ml-realcolors .hero h1 em{font-weight:400;letter-spacing:-.045em;margin-top:.04em;color:var(--rc-gold-1)}
.ml-realcolors .hero-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.62fr) auto;align-items:center;gap:20px clamp(28px,3vw,56px);margin-top:clamp(22px,2.6vw,42px)}
.ml-realcolors .hero-lead{font:400 clamp(18px,1.45vw,23px)/1.42 var(--serif);max-width:30em;color:#f2f5f7}
.ml-realcolors .hero-cert{display:flex;flex-direction:column;padding-left:16px;border-left:2px solid var(--rc-gold);font-size:14px;line-height:1.45;color:#eef3f6}
.ml-realcolors .hero-cert strong{font-weight:700;color:#fff}
.ml-realcolors .hero .actions{justify-content:flex-end}
.ml-realcolors .hero .text-link{color:#fff}
.ml-realcolors .hero .text-link:hover{color:var(--rc-gold-1)}
.ml-realcolors .hero-cap{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0 var(--gut);padding:0 0 clamp(18px,2vw,30px);font:italic 400 15px/1.4 var(--serif);color:#e3eaee}
@media (max-width:1100px){
  .ml-realcolors .hero-row{grid-template-columns:minmax(0,1fr) auto}
  .ml-realcolors .hero-cert{grid-row:2}
  .ml-realcolors .hero .actions{grid-row:2;grid-column:2}
}
/* Phone: its own crop. The photo is a shorter band (104vw) framed on the whole table so Chad (left) and Fallon
   (right) are both in; the title starts under their faces and the primary button follows the title directly,
   so both are on the first screen. The lead and the facilitator line follow the button. */
@media (max-width:760px){
  .ml-realcolors .hero{min-height:0}
  .ml-realcolors .hero-stage{bottom:auto;height:min(104vw,540px)}
  .ml-realcolors .hero-photo{object-position:34% 0}
  .ml-realcolors .hero-gels{--px:.34;--py:0}
  .ml-realcolors .hero-gels i{width:220vmax;margin-left:-110vmax}
  .ml-realcolors .hero-gels .g-blue{--sx:-4%}
  .ml-realcolors .hero-gels .g-green{--sx:104%}
  .ml-realcolors .hero-scrim{background:linear-gradient(to top,var(--navy) 0,var(--navy) 5%,rgba(23,45,61,.9) 24%,rgba(23,45,61,.74) 40%,rgba(23,45,61,.36) 54%,rgba(23,45,61,0) 66%)}
  .ml-realcolors .hero-copy{padding-top:calc(min(104vw,540px) - 196px);padding-bottom:26px}
  .ml-realcolors .hero-eyebrow{margin-bottom:10px}
  .ml-realcolors .hero h1,html[lang="es"] .ml-realcolors .hero h1{font-size:clamp(40px,11.8vw,64px);line-height:.9}
  .ml-realcolors .hero-row{display:flex;flex-direction:column;align-items:stretch;gap:18px;margin-top:18px}
  .ml-realcolors .hero .actions{order:-1;justify-content:flex-start;gap:4px 24px}
  .ml-realcolors .hero .actions .btn{flex:1 1 100%}
  .ml-realcolors .hero-lead{font-size:18px;margin-top:6px}
  .ml-realcolors .hero-cap{justify-content:flex-start;font-size:14px;padding-bottom:20px}
}

/* =========================================================
   II · Same situation. Four ways of seeing it. — paint you tap
   Static (default): four still bands of colour.  .is-live (realcolors.js): one full screen, tap to flood.
   ========================================================= */
.ml-realcolors .rcx{position:relative;background:var(--navy);color:var(--cream)}
.ml-realcolors .rcx-flood,.ml-realcolors .rcx-forms,.ml-realcolors .rcx-tap{display:none}
.ml-realcolors .rcx-intro{position:relative;z-index:3;text-align:center;padding:clamp(72px,8vw,130px) var(--gut) 0}
.ml-realcolors .rcx-intro .eyebrow{color:#eef3f6}
.ml-realcolors .rcx-intro .poster{font-size:clamp(46px,7.4vw,136px)}
.ml-realcolors .rcx-intro .poster em{color:var(--rc-gold-1)}
.ml-realcolors .rcx-situation{position:relative;z-index:3;text-align:center;padding:clamp(26px,3vw,46px) var(--gut) clamp(48px,5vw,80px)}
.ml-realcolors .rcx-sit-label{font-size:11px;font-weight:750;letter-spacing:.14em;line-height:1.7;margin-bottom:8px}
.ml-realcolors .rcx-sit{font:400 clamp(26px,3vw,50px)/1.16 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.ml-realcolors .rcx-tap{margin-top:16px;font-size:14px}
/* static bands */
.ml-realcolors .rcx-panel{--c:var(--rc-blue);--p:var(--navy);position:relative;z-index:2;padding:clamp(64px,7vw,120px) var(--gut);color:var(--navy);
  background:linear-gradient(to bottom,var(--p) 0,var(--c) clamp(60px,9vw,140px),var(--c) 100%)}
.ml-realcolors .rcx-panel.v-gold{--c:var(--rc-gold);--p:var(--rc-blue)}
.ml-realcolors .rcx-panel.v-orange{--c:var(--rc-orange);--p:var(--rc-gold)}
.ml-realcolors .rcx-panel.v-green{--c:var(--rc-green);--p:var(--rc-orange)}
.ml-realcolors .rcx-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:clamp(14px,1.6vw,24px)}
.ml-realcolors .rcx-cname{font-size:12px;font-weight:750;letter-spacing:.16em}
.ml-realcolors .rcx-lens{font-family:var(--display);font-size:clamp(19px,1.6vw,26px);font-weight:700;letter-spacing:-.03em}
.ml-realcolors .rcx-q p{margin:0}
.ml-realcolors .rcx-ex{margin-top:clamp(14px,1.6vw,26px);font-size:11px;font-weight:750;letter-spacing:.14em}
.ml-realcolors .rcx-q{font-size:clamp(34px,4.6vw,84px)}
/* the four voices */
.ml-realcolors .v-blue .rcx-q{font-family:var(--serif);font-style:italic;font-weight:400;line-height:1.05;letter-spacing:-.035em;max-width:15em}
.ml-realcolors .v-blue .rcx-q p::before{content:"“"}
.ml-realcolors .v-blue .rcx-q p::after{content:"”"}
.ml-realcolors .v-gold .rcx-q{font-family:var(--display);font-weight:750;line-height:1;letter-spacing:-.055em;max-width:17em}
.ml-realcolors .v-gold .rcx-q p>span{display:block}
.ml-realcolors .v-gold .rcx-q p>span+span{margin-top:.18em;padding-top:.2em;border-top:3px solid currentColor}
.ml-realcolors .v-gold .rcx-label{padding-bottom:10px;border-bottom:1px solid currentColor}
.ml-realcolors .v-orange .rcx-q{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.045em;max-width:13em}
.ml-realcolors .v-orange .rcx-q p{transform:rotate(-2.5deg);transform-origin:0 50%}
.ml-realcolors .v-green .rcx-q{font-family:var(--serif);font-weight:400;font-style:normal;line-height:1.14;letter-spacing:-.03em;max-width:17em;padding-left:.45em;border-left:3px solid currentColor}
.ml-realcolors .v-green .rcx-q{font-size:clamp(30px,4vw,74px)}

/* ---- live (realcolors.js adds .is-live; .is-still too when reduced motion is on) ---- */
.ml-realcolors .rcx.is-live{--pool-h:clamp(170px,31%,330px)}
.ml-realcolors .rcx.is-live .rcx-screen{position:relative;height:var(--screen-h,calc(100svh - var(--header-h)));min-height:600px;overflow:clip;display:flex;flex-direction:column;
  background:radial-gradient(120% 70% at 50% 100%,#1d3a50 0,rgba(29,58,80,0) 70%)}
.ml-realcolors .rcx.is-live .rcx-flood{display:block;position:absolute;inset:0;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30px,#000 calc(100% - 60px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 30px,#000 calc(100% - 60px),transparent 100%)}
@property --r{syntax:"<length>";inherits:false;initial-value:0px}
.ml-realcolors .rcx-flood span{--r:0px;position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(circle at var(--x,50%) var(--y,50%),#000 var(--r),transparent calc(var(--r) + 24vmax));mask-image:radial-gradient(circle at var(--x,50%) var(--y,50%),#000 var(--r),transparent calc(var(--r) + 24vmax))}
.ml-realcolors .rcx-flood span:not(.is-on){-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0,transparent 100%);mask-image:radial-gradient(circle at 50% 50%,transparent 0,transparent 100%)}
.ml-realcolors .rcx-flood span.is-on{--r:190vmax;transition:--r 1.3s cubic-bezier(.5,.05,.25,1)}
.ml-realcolors .rcx.is-still .rcx-flood span.is-on{transition:none}

.ml-realcolors .rcx.is-live .rcx-copy{order:1;flex:1 1 auto;min-height:0;position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:clamp(18px,3svh,40px) var(--gut) 0;pointer-events:none;transition:color .5s}
.ml-realcolors .rcx.is-live .rcx-forms{order:2;display:block;position:relative;z-index:2;flex:0 0 var(--pool-h);height:var(--pool-h)}
.ml-realcolors .rcx.is-live.has-choice .rcx-copy{color:var(--navy)}
.ml-realcolors .rcx.is-measuring,.ml-realcolors .rcx.is-measuring *{transition:none !important;animation:none !important}

/* the pools */
.ml-realcolors .rcx-form{--pw:clamp(230px,23vw,400px);position:absolute;left:var(--fx);bottom:var(--fb);width:var(--pw);height:calc(var(--pw) * .5);translate:-50% 0;padding:0;border:0;background:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;color:var(--navy)}
.ml-realcolors .rcx-form[data-color="blue"]{--fx:13%;--fb:30%;--pw:clamp(240px,24vw,420px)}
.ml-realcolors .rcx-form[data-color="gold"]{--fx:37.5%;--fb:9%;--pw:clamp(220px,22vw,390px)}
.ml-realcolors .rcx-form[data-color="orange"]{--fx:62.5%;--fb:27%;--pw:clamp(230px,23vw,400px)}
.ml-realcolors .rcx-form[data-color="green"]{--fx:87%;--fb:7%;--pw:clamp(240px,24.5vw,430px)}
.ml-realcolors .rcx-ink{position:absolute;inset:-12% -6% -18%;display:block;transition:opacity .6s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.ml-realcolors .rcx-ink svg{display:block;width:100%;height:100%;overflow:visible}
.ml-realcolors .rcx-name{position:absolute;left:50%;top:50%;translate:-50% -50%;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;
  font-family:var(--display);font-size:clamp(17px,1.45vw,22px);font-weight:800;letter-spacing:-.02em;white-space:nowrap;color:var(--navy)}
.ml-realcolors .rcx-name::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;transition:background .3s}
.ml-realcolors .rcx-form[aria-pressed="true"] .rcx-name::before{background:currentColor}
.ml-realcolors .rcx-check{display:inline-block;max-width:0;overflow:hidden;opacity:0;font-weight:800;transition:max-width .4s,opacity .4s}
.ml-realcolors .rcx-form.is-seen .rcx-check{max-width:1.2em;opacity:1}
@media (hover:hover){.ml-realcolors .rcx-form:hover .rcx-ink{transform:scale(1.035)}}
.ml-realcolors .rcx-form:active .rcx-ink{transform:scale(.97)}
.ml-realcolors .rcx-form:focus-visible{outline:none}
.ml-realcolors .rcx-form:focus-visible .rcx-name{outline:2px solid var(--navy);outline-offset:3px;border-radius:3px;background:#f8f5edcc}
.ml-realcolors .rcx-form[aria-pressed="true"] .rcx-ink{opacity:.42}
.ml-realcolors .rcx-form.is-splash .rcx-ink{animation:pool-splash .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes pool-splash{0%{transform:scale(1)}30%{transform:scale(1.12,.9)}60%{transform:scale(.96,1.05)}100%{transform:scale(1)}}
/* wet paint: the body breathes, the sheen slides */
.ml-realcolors .pool-body{transform-box:fill-box;transform-origin:50% 50%;animation:pool-breathe var(--pt,7s) ease-in-out var(--pd,0s) infinite alternate}
.ml-realcolors .pool-sheen{transform-box:fill-box;transform-origin:50% 50%;animation:pool-sheen var(--pt,7s) ease-in-out var(--pd,0s) infinite alternate}
@keyframes pool-breathe{from{transform:scale(1,1)}to{transform:scale(1.025,.97)}}
@keyframes pool-sheen{from{transform:translate(0,0)}to{transform:translate(3%,4%)}}
.ml-realcolors .rcx.is-paused .pool-body,.ml-realcolors .rcx.is-paused .pool-sheen{animation-play-state:paused}

.ml-realcolors .rcx.is-live .rcx-intro,.ml-realcolors .rcx.is-live .rcx-situation,.ml-realcolors .rcx.is-live .rcx-panels{position:relative;z-index:3;width:min(1180px,100%);padding:0}
.ml-realcolors .rcx.is-live .rcx-intro .poster{font-size:clamp(44px,min(6.6vw,11.5svh),124px)}
.ml-realcolors .rcx.is-live .rcx-situation{margin-top:clamp(18px,3svh,44px)}
.ml-realcolors .rcx.is-live .rcx-sit{font-size:clamp(24px,min(3vw,5.6svh),50px)}
.ml-realcolors .rcx.is-live .rcx-tap{display:block}
.ml-realcolors .rcx.is-live .rcx-panels{display:none}
.ml-realcolors .rcx.is-live .rcx-panel{background:none;padding:0;color:inherit}
.ml-realcolors .rcx.is-live .rcx-panel[hidden]{display:none}
/* once a colour is chosen: the title steps aside, the situation becomes the line above the perspective */
.ml-realcolors .rcx.is-live.has-choice .rcx-intro,.ml-realcolors .rcx.is-live.has-choice .rcx-tap{display:none}
.ml-realcolors .rcx.is-live.has-choice .rcx-situation{margin:0 0 clamp(18px,3svh,48px);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 14px}
.ml-realcolors .rcx.is-live.has-choice .rcx-sit-label{margin:0}
.ml-realcolors .rcx.is-live.has-choice .rcx-sit{font-size:clamp(18px,1.6vw,24px)}
.ml-realcolors .rcx.is-live.has-choice .rcx-panels{display:block}
.ml-realcolors .rcx.is-live .rcx-panel{display:flex;flex-direction:column;align-items:center;text-align:center}
.ml-realcolors .rcx.is-live .rcx-panel .rcx-label{justify-content:center}
.ml-realcolors .rcx.is-live .v-blue .rcx-q{font-size:clamp(40px,min(5.8vw,9.6svh),108px);max-width:14em}
.ml-realcolors .rcx.is-live .v-gold,.ml-realcolors .rcx.is-live .v-orange,.ml-realcolors .rcx.is-live .v-green{align-items:flex-start;text-align:left;width:fit-content;max-width:100%;margin-inline:auto}
.ml-realcolors .rcx.is-live .v-gold .rcx-label,.ml-realcolors .rcx.is-live .v-orange .rcx-label,.ml-realcolors .rcx.is-live .v-green .rcx-label{justify-content:flex-start}
.ml-realcolors .rcx.is-live .v-gold .rcx-label{align-self:stretch}
.ml-realcolors .rcx.is-live .v-gold .rcx-q{font-size:clamp(36px,min(4.8vw,8.4svh),90px)}
.ml-realcolors .rcx.is-live .v-orange .rcx-q{font-size:clamp(42px,min(6.2vw,10svh),120px)}
.ml-realcolors .rcx.is-live .v-green .rcx-q{font-size:clamp(34px,min(4.6vw,8.2svh),86px)}
/* each voice arrives its own way */
.ml-realcolors .rcx.is-live:not(.is-still) .v-blue .rcx-q{animation:in-blue 1.1s cubic-bezier(.2,.7,.2,1) .12s both}
.ml-realcolors .rcx.is-live:not(.is-still) .v-gold .rcx-q p>span{animation:in-gold .7s cubic-bezier(.7,0,.2,1) .15s both}
.ml-realcolors .rcx.is-live:not(.is-still) .v-gold .rcx-q p>span+span{animation-delay:.42s}
.ml-realcolors .rcx.is-live:not(.is-still) .v-orange .rcx-q{animation:in-orange .55s cubic-bezier(.3,1.5,.5,1) .1s both}
.ml-realcolors .rcx.is-live:not(.is-still) .v-green .rcx-q{animation:in-green 1.4s cubic-bezier(.2,.6,.2,1) .15s both}
.ml-realcolors .rcx.is-live:not(.is-still) .rcx-panel .rcx-label,.ml-realcolors .rcx.is-live:not(.is-still) .rcx-panel .rcx-ex{animation:in-soft .6s ease .05s both}
@keyframes in-blue{from{opacity:0;transform:translateY(26px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes in-gold{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes in-orange{from{opacity:0;transform:scale(.8) rotate(-5deg)}to{opacity:1;transform:none}}
@keyframes in-green{from{opacity:0;letter-spacing:.02em}to{opacity:1;letter-spacing:-.03em}}
@keyframes in-soft{from{opacity:0}to{opacity:1}}

/* the ending: all four paints stirred into one */
.ml-realcolors .rcx-all{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:clamp(24px,4vw,70px);
  padding:clamp(20px,2.4vw,50px) var(--gut) clamp(150px,13vw,230px);overflow:hidden;
  background:linear-gradient(to bottom,rgba(23,45,61,0) 0,rgba(23,45,61,0) calc(100% - clamp(150px,13vw,230px)),#2c4152 calc(100% - clamp(150px,13vw,230px) * .72),#9aa3a6 calc(100% - clamp(150px,13vw,230px) * .4),#e4ded2 calc(100% - clamp(150px,13vw,230px) * .16),var(--paper) 100%)}
.ml-realcolors .rcx-mix{position:relative;width:min(42vw,660px);aspect-ratio:1;margin-left:calc(-1 * var(--gut) - 5vw);justify-self:start}
.ml-realcolors .rcx-mix svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ml-realcolors .rcx-all-title{font-size:clamp(44px,6vw,112px);color:#fbf8f1}
.ml-realcolors .rcx-all-title em{color:var(--rc-gold-1)}
.ml-realcolors .rcx-note{max-width:34em;margin-top:clamp(22px,2.4vw,38px);font:400 clamp(17px,1.35vw,20px)/1.6 var(--serif);color:#dfe6eb}
.ml-realcolors .mx-arm path{fill:none;stroke-linecap:round}
.ml-realcolors .mx-shadow{filter:url(#mx-blur)}
.ml-realcolors .rcx-all.is-armed .rcx-mix svg{transform:rotate(-150deg) scale(.86);opacity:0}
.ml-realcolors .rcx-all.is-armed .mx-arm path{stroke-dasharray:1 1;stroke-dashoffset:1}
.ml-realcolors .rcx-all.is-armed .mx-core{opacity:0;transform:scale(.3)}
.ml-realcolors .rcx-all.is-armed.is-on .rcx-mix svg{transform:none;opacity:1;transition:transform 3.2s cubic-bezier(.22,.7,.18,1),opacity .6s ease}
.ml-realcolors .rcx-all.is-armed.is-on .mx-arm path{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.3,.55,.2,1) calc(var(--i) * .14s)}
.ml-realcolors .rcx-all.is-armed.is-on .mx-core{opacity:1;transform:none;transition:opacity 1.2s ease 2.1s,transform 1.6s cubic-bezier(.2,.7,.2,1) 2.1s}
.ml-realcolors .mx-core{transform-box:fill-box;transform-origin:50% 50%}
.ml-realcolors .rcx-all.is-armed .rcx-all-copy>*{opacity:0;transform:translateY(26px)}
.ml-realcolors .rcx-all.is-armed.is-on .rcx-all-copy>*{opacity:1;transform:none;transition:opacity 1s ease 1s,transform 1.3s cubic-bezier(.2,.7,.2,1) 1s}
.ml-realcolors .rcx-all.is-armed.is-on .rcx-all-copy>.rcx-note{transition-delay:1.5s}

@media (max-width:760px){
  .ml-realcolors .rcx.is-live{--pool-h:clamp(190px,34%,260px)}
  .ml-realcolors .rcx.is-live .rcx-screen{min-height:560px}
  .ml-realcolors .rcx.is-live .rcx-copy{justify-content:center;padding-top:20px}
  .ml-realcolors .rcx-form[data-color="blue"]{--fx:27%;--fb:52%;--pw:47vw}
  .ml-realcolors .rcx-form[data-color="gold"]{--fx:75%;--fb:56%;--pw:45vw}
  .ml-realcolors .rcx-form[data-color="orange"]{--fx:26%;--fb:8%;--pw:46vw}
  .ml-realcolors .rcx-form[data-color="green"]{--fx:74%;--fb:4%;--pw:48vw}
  .ml-realcolors .rcx-name{font-size:17px}
  .ml-realcolors .rcx.is-live .rcx-intro .poster{font-size:clamp(36px,min(11.4vw,7.6svh),56px)}
  .ml-realcolors .rcx.is-live .rcx-situation{margin-top:18px}
  .ml-realcolors .rcx.is-live .rcx-sit{font-size:clamp(22px,6.4vw,30px)}
  .ml-realcolors .rcx.is-live.has-choice .rcx-situation{margin-bottom:16px;flex-direction:column;align-items:center;gap:2px}
  .ml-realcolors .rcx.is-live.has-choice .rcx-sit{font-size:17px}
  .ml-realcolors .rcx.is-live .v-blue .rcx-q{font-size:clamp(30px,min(9.2vw,5.8svh),46px)}
  .ml-realcolors .rcx.is-live .v-gold .rcx-q{font-size:clamp(26px,min(8vw,5.2svh),40px)}
  .ml-realcolors .rcx.is-live .v-orange .rcx-q{font-size:clamp(30px,min(9.4vw,6svh),48px)}
  .ml-realcolors .rcx.is-live .v-green .rcx-q{font-size:clamp(25px,min(7.8vw,5svh),38px)}
  .ml-realcolors .rcx-lens{font-size:18px}
  .ml-realcolors .rcx-all{grid-template-columns:minmax(0,1fr);padding-top:10px;text-align:left}
  .ml-realcolors .rcx-all{padding-bottom:130px;background:linear-gradient(to bottom,rgba(23,45,61,0) 0,rgba(23,45,61,0) calc(100% - 130px),#2c4152 calc(100% - 94px),#9aa3a6 calc(100% - 52px),#e4ded2 calc(100% - 20px),var(--paper) 100%)}
  .ml-realcolors .rcx-mix{width:108vw;margin:0 0 -6vw -4vw;justify-self:center}
  .ml-realcolors .rcx-all-title{font-size:clamp(38px,11vw,58px)}
}

/* =========================================================
   III · The journey: four threads, one piece
   ========================================================= */
.ml-realcolors .journey{position:relative;z-index:2;color:var(--navy);padding:clamp(24px,3vw,56px) 0 clamp(24px,2.6vw,50px);background:var(--paper)}
.ml-realcolors .jr-head{padding:0 var(--gut)}
.ml-realcolors .jr-head .poster{font-size:clamp(52px,8.8vw,164px);line-height:.88;letter-spacing:-.066em}
.ml-realcolors .jr-body{position:relative;margin-top:clamp(18px,2.4vw,40px)}
.ml-realcolors .jr-art{position:relative;height:clamp(230px,22vw,380px)}
.ml-realcolors .jr-art svg{position:absolute;left:0;top:0;display:block;overflow:visible}
.ml-realcolors .jr-art .jr-band{stroke:#f8f5ed;stroke-width:2.5px;stroke-linejoin:round}
@media (max-width:900px){.ml-realcolors .jr-art svg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 82%,transparent 97%);mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 82%,transparent 97%)}}
.ml-realcolors .jr-steps{list-style:none;margin:clamp(6px,1vw,18px) 0 0;padding:0 var(--gut);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(22px,2.6vw,48px)}
.ml-realcolors .jr-step{--c:var(--rc-blue-x)}
.ml-realcolors .jr-step[data-c="gold"]{--c:var(--rc-gold-x)}
.ml-realcolors .jr-step[data-c="orange"]{--c:var(--rc-orange-x)}
.ml-realcolors .jr-step[data-c="green"]{--c:var(--rc-green-x)}
.ml-realcolors .jr-n{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.08em;margin-bottom:clamp(10px,1vw,16px)}
.ml-realcolors .jr-n::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c)}
.ml-realcolors main .jr-title{font-size:clamp(28px,3.1vw,54px);font-weight:800;line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.ml-realcolors .jr-text{margin-top:clamp(12px,1.2vw,20px);max-width:22em;font:400 clamp(17px,1.3vw,20px)/1.5 var(--serif)}
/* played once, on view: ONLY the threads draw in. The step titles and lines are fully visible from the start;
   nothing readable waits on a timed sequence. A step's dot swells to full size as its thread arrives (decoration). */
.ml-realcolors .journey.is-armed .jr-art svg{transition:clip-path 1.25s cubic-bezier(.45,.05,.3,1)}
.ml-realcolors .jr-n::before{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.ml-realcolors .journey.is-armed .jr-step:not(.is-in) .jr-n::before{transform:scale(.6)}
@media (max-width:900px){
  .ml-realcolors .jr-body{display:block}
  .ml-realcolors .jr-art{position:absolute;left:0;top:0;bottom:0;width:30vw;height:auto}
  .ml-realcolors .jr-steps{display:flex;flex-direction:column;gap:clamp(56px,13vw,90px);margin:0;padding:clamp(40px,9vw,70px) var(--gut) clamp(40px,9vw,70px) calc(30vw + 8px)}
  .ml-realcolors .jr-head .poster{font-size:clamp(46px,13.6vw,74px)}
  .ml-realcolors main .jr-title{font-size:clamp(28px,8.4vw,40px)}
  .ml-realcolors .jr-text{font-size:18px}
}

/* =========================================================
   IV · Led by Chad & Fallon: both photos, full height, side by side
   ========================================================= */
.ml-realcolors .led{position:relative;isolation:isolate;color:var(--cream);background:linear-gradient(to bottom,var(--paper) 0,var(--paper) 30%,var(--navy) 60%,var(--navy) 100%)}
.ml-realcolors .led-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;height:clamp(600px,90svh,1040px)}
.ml-realcolors .led-ph{position:relative;margin:0;overflow:hidden}
.ml-realcolors .led-ph img{position:absolute;left:0;right:0;bottom:0;top:clamp(40px,4vw,80px);width:100%;height:calc(100% - clamp(40px,4vw,80px));object-fit:cover}
.ml-realcolors .led-chad img{object-position:46% 0}
.ml-realcolors .led-fallon img{object-position:62% 0}
.ml-realcolors .led-pair::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:clamp(150px,13vw,240px);background:linear-gradient(to bottom,var(--paper) 0,var(--paper) 22%,rgba(248,245,237,.62) 50%,rgba(248,245,237,.18) 78%,rgba(248,245,237,0) 100%);pointer-events:none}
.ml-realcolors .led-pair::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:80%;background:linear-gradient(to top,var(--navy) 0,rgba(23,45,61,.95) 22%,rgba(23,45,61,.9) 42%,rgba(23,45,61,.86) 58%,rgba(23,45,61,.56) 76%,rgba(23,45,61,0) 100%);pointer-events:none}
.ml-realcolors .led-copy{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:24px clamp(40px,5vw,90px);
  margin-top:calc(-1 * clamp(330px,30vw,520px));padding:0 var(--gut) clamp(56px,5.6vw,100px)}
.ml-realcolors .led-copy .eyebrow{grid-column:1/-1;margin:0;color:#fff;text-shadow:0 1px 10px #0b161fcc}
.ml-realcolors .led-copy .poster{grid-column:1/-1;font-size:clamp(50px,8.4vw,160px);line-height:.88;letter-spacing:-.066em;color:#fbf8f1;text-shadow:0 2px 30px #0b161f73}
.ml-realcolors .led-copy .poster em{color:var(--rc-gold-1)}
.ml-realcolors .led-body{grid-column:2;margin-top:clamp(4px,1vw,16px)}
.ml-realcolors .led-body p{font:400 clamp(18px,1.45vw,23px)/1.48 var(--serif);letter-spacing:-.01em;margin-bottom:22px;color:#eef3f6}
.ml-realcolors .led .text-link{color:#fff}
.ml-realcolors .led .text-link:hover{color:var(--rc-gold-1)}
@media (max-width:900px){
  .ml-realcolors .led-copy{grid-template-columns:1fr}
  .ml-realcolors .led-body{grid-column:1}
}
@media (max-width:760px){
  .ml-realcolors .led-pair{height:clamp(460px,78svh,660px);gap:3px}
  .ml-realcolors .led-chad img{object-position:44% 0}
  .ml-realcolors .led-fallon img{object-position:71% 0}
  .ml-realcolors .led-copy{margin-top:-170px;padding-bottom:56px}
  .ml-realcolors .led-copy .poster{font-size:clamp(44px,12.6vw,66px)}
  .ml-realcolors .led-body p{font-size:19px}
}

/* =========================================================
   V · From people in the room: wall-scale quotes on navy
   ========================================================= */
.ml-realcolors .voices{position:relative;padding:clamp(30px,3.6vw,70px) var(--gut) clamp(70px,7vw,130px);background:var(--navy);color:var(--cream)}
.ml-realcolors .voices>.eyebrow{color:#eef3f6;margin-bottom:clamp(24px,2.4vw,44px)}
.ml-realcolors .quote{--q:var(--rc-blue)}
.ml-realcolors .quote.q-gold{--q:var(--rc-gold)}
.ml-realcolors .quote.q-orange{--q:var(--rc-orange)}
.ml-realcolors .quote blockquote p{margin:0}
.ml-realcolors .quote>blockquote{font:400 clamp(40px,5.6vw,108px)/1.04 var(--serif);letter-spacing:-.04em;color:var(--q);text-indent:-.4em;text-wrap:pretty}
.ml-realcolors .quote.q-blue>blockquote{max-width:15.5em}
/* the two smaller voices: side by side under Sarah, each still in its colour, no boxes */
.ml-realcolors .quote-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:40px clamp(40px,6vw,120px);margin-top:clamp(70px,7vw,130px)}
.ml-realcolors .quote-pair .quote>blockquote{font-size:clamp(24px,2.3vw,40px);line-height:1.18;letter-spacing:-.025em;text-indent:-.36em;max-width:22em}
.ml-realcolors .quote.q-gold>blockquote{font-style:italic}
.ml-realcolors .quote figcaption{display:flex;flex-direction:column;margin-top:clamp(20px,2.2vw,34px);padding-left:16px;border-left:2px solid var(--q);font-size:14px;line-height:1.5;color:#e3eaee}
.ml-realcolors .quote figcaption strong{font-weight:700;color:#fff}
.ml-realcolors .quote-full{margin-top:12px}
.ml-realcolors .quote-full summary{display:inline-flex;align-items:center;gap:14px;min-height:44px;list-style:none;cursor:pointer;font-size:13px;font-weight:650;border-bottom:1px solid currentColor;color:#fff}
.ml-realcolors .quote-full summary::-webkit-details-marker{display:none}
.ml-realcolors .quote-full summary:hover{color:var(--q)}
.ml-realcolors .quote-full blockquote{max-width:40em;margin-top:16px;font:400 clamp(18px,1.4vw,21px)/1.6 var(--serif);color:#e3eaee}
.ml-realcolors .plus{position:relative;display:inline-block;width:14px;height:14px;flex:0 0 auto}
.ml-realcolors .plus::before,.ml-realcolors .plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ml-realcolors .plus::after{transform:rotate(90deg)}
.ml-realcolors details[open]>summary .plus::after{transform:rotate(0)}
.ml-realcolors details[open]>summary .plus::before{transform:rotate(180deg)}
@media (max-width:760px){
  .ml-realcolors .quote>blockquote{font-size:clamp(32px,9vw,44px)}
  .ml-realcolors .quote-pair{grid-template-columns:minmax(0,1fr);gap:48px;margin-top:64px}
  .ml-realcolors .quote-pair .quote>blockquote{font-size:clamp(22px,6.2vw,28px)}
}

/* =========================================================
   VI · FAQ: a big question list beside a photo from the room
   ========================================================= */
.ml-realcolors .faq{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 clamp(40px,5vw,96px);padding:0 var(--gut) clamp(40px,4vw,76px) 0;
  background:linear-gradient(to bottom,var(--navy) 0,#2c4152 30px,#9aa3a6 100px,#e4ded2 150px,var(--paper) 190px,var(--paper) 100%)}
/* the ribbon from III closes the page: one striped ribbon of the four colours flowing down the column (real-colors.js).
   Its ends dissolve into the paper; it starts below the navy-to-paper fade. */
.ml-realcolors .faq-ribbon{position:relative;margin:clamp(120px,10vw,170px) 0 0;align-self:stretch;min-height:clamp(480px,40vw,720px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 80%,transparent 100%)}
.ml-realcolors .faq-ribbon svg{position:absolute;left:0;top:0;display:block;will-change:transform}
.ml-realcolors .faq-ribbon path{stroke:#f8f5ed;stroke-width:2.5px;stroke-linejoin:round}
.ml-realcolors .faq-ribbon.is-flowing svg{animation:faq-flow var(--flow-t,28s) linear infinite}
.ml-realcolors .faq-ribbon.is-paused svg{animation-play-state:paused}
@keyframes faq-flow{from{transform:translate3d(var(--flow-x0,0),var(--flow-y0,0),0)}to{transform:translate3d(0,0,0)}}
.ml-realcolors .faq-main{padding-top:clamp(150px,12vw,210px)}
.ml-realcolors .faq-head .poster{font-size:clamp(46px,5.6vw,104px);line-height:.9;letter-spacing:-.066em}
.ml-realcolors .faq-list{margin-top:clamp(26px,3vw,52px)}
.ml-realcolors .faq-list details{--c:var(--rc-blue)}
.ml-realcolors .faq-list .f-gold{--c:var(--rc-gold)}
.ml-realcolors .faq-list .f-orange{--c:var(--rc-orange)}
.ml-realcolors .faq-list .f-green{--c:var(--rc-green)}
.ml-realcolors .faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:clamp(10px,1.1vw,18px) 0;list-style:none;cursor:pointer}
.ml-realcolors .faq-list summary::-webkit-details-marker{display:none}
.ml-realcolors .f-q{font-family:var(--display);font-size:clamp(23px,2.4vw,40px);font-weight:750;letter-spacing:-.045em;line-height:1.12;
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:.3em;text-underline-offset:-.14em;text-decoration-skip-ink:none;transition:text-decoration-color .4s ease}
.ml-realcolors .faq-list summary:hover .f-q,.ml-realcolors .faq-list details[open] .f-q{text-decoration-color:var(--c)}
.ml-realcolors .faq-list summary .plus{width:22px;height:22px}
.ml-realcolors .faq-list details>p{max-width:32em;padding:0 0 clamp(22px,2.4vw,38px);font:400 clamp(18px,1.45vw,22px)/1.55 var(--serif)}
.ml-realcolors .faq-list details[open]>p{animation:in-faq .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes in-faq{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .ml-realcolors .faq{grid-template-columns:1fr;padding:0 0 clamp(44px,9vw,70px);
    background:linear-gradient(to bottom,var(--navy) 0,#2c4152 24px,#9aa3a6 70px,#e4ded2 105px,var(--paper) 130px,var(--paper) 100%)}
  .ml-realcolors .faq-ribbon{min-height:0;height:clamp(150px,40vw,240px);margin:110px 0 0;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%)}
  .ml-realcolors .faq-main{padding:0 var(--gut);margin-top:8px;position:relative}
  .ml-realcolors .faq-head .poster{font-size:clamp(44px,12.4vw,64px)}
}

/* =========================================================
   VII · The close
   ========================================================= */
.ml-realcolors .closing{position:relative;isolation:isolate;overflow:hidden;text-align:center;color:var(--cream);padding:clamp(170px,13vw,220px) var(--gut) clamp(64px,6vw,100px);
  background:linear-gradient(to bottom,var(--paper) 0,#cdc4b5 36px,#6c7479 100px,#24394a 160px,var(--navy) 196px,#172938 100%)}
.ml-realcolors .closing-light{position:absolute;z-index:-1;left:0;right:0;bottom:-24vw;height:44vw;pointer-events:none;mix-blend-mode:screen;opacity:.34}
.ml-realcolors .closing-light i{position:absolute;bottom:0;width:40vw;height:36vw;border-radius:50%;filter:blur(60px);animation:gl-drift 30s ease-in-out infinite alternate}
.ml-realcolors .closing-light i:nth-child(1){left:-8vw;background:var(--rc-blue)}
.ml-realcolors .closing-light i:nth-child(2){left:20vw;background:var(--rc-gold);animation-delay:-7s}
.ml-realcolors .closing-light i:nth-child(3){left:46vw;background:var(--rc-orange);animation-delay:-13s}
.ml-realcolors .closing-light i:nth-child(4){left:70vw;background:var(--rc-green);animation-delay:-20s}
@keyframes gl-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(4%,-6%) scale(1.08)}}
.ml-realcolors .closing .poster{font-size:clamp(48px,8vw,150px);line-height:.92;letter-spacing:-.066em;font-weight:800;color:var(--cream)}
.ml-realcolors .closing .poster em{font-weight:400;letter-spacing:-.045em;color:var(--rc-gold)}
.ml-realcolors .closing-lead{max-width:560px;margin:24px auto 28px;font:400 clamp(18px,1.5vw,22px)/1.5 var(--serif);color:var(--cream-2)}
.ml-realcolors .closing-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:0 30px;margin-top:22px}
.ml-realcolors .closing-contact a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:#e3eaee}
.ml-realcolors .closing-contact a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.ml-realcolors .program-note{margin-top:clamp(24px,2.6vw,44px);font-size:12.5px;color:#eef3f6}
.ml-realcolors .program-note a{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#ffffff80}
.ml-realcolors .closing-spectrum{position:absolute;left:0;right:0;bottom:0;display:flex;height:5px}
.ml-realcolors .closing-spectrum i{flex:1;background:var(--rc-blue)}
.ml-realcolors .closing-spectrum i:nth-child(2){background:var(--rc-gold)}
.ml-realcolors .closing-spectrum i:nth-child(3){background:var(--rc-orange)}
.ml-realcolors .closing-spectrum i:nth-child(4){background:var(--rc-green)}
@media (max-width:600px){.ml-realcolors .closing{padding-top:150px;padding-bottom:56px}.ml-realcolors .closing .poster{font-size:clamp(40px,11.6vw,62px)}.ml-realcolors .closing-lead{font-size:17px}.ml-realcolors .closing .btn{width:100%}}
.ml-realcolors .site-footer.ending-footer{border-top:0;background:#172938}
.ml-realcolors .ending-footer-links a{min-height:44px}
.ml-realcolors.homepage .nav .button{min-height:44px}

@media (prefers-reduced-motion:reduce){
  html:has(> body.ml-realcolors){scroll-behavior:auto}
  .ml-realcolors .btn,.ml-realcolors .text-link{transition:none}
  .ml-realcolors .btn:hover{transform:none}
  .ml-realcolors .hero-gels i,.ml-realcolors .closing-light i,.ml-realcolors .faq-ribbon svg,.ml-realcolors .pool-body,.ml-realcolors .pool-sheen{animation:none}
  .ml-realcolors .rcx-ink{transition:none}
  .ml-realcolors .rcx-form.is-splash .rcx-ink{animation:none}
  .ml-realcolors .plus::before,.ml-realcolors .plus::after,.ml-realcolors .f-q{transition:none}
  .ml-realcolors .faq-list details[open]>p{animation:none}
}