/* RCA Living — v4 "Living Beyond Boundaries": ROX red on warm pearl/ivory neutrals, charcoal→burgundy depth, Onest */
:root{
  --bg-base:#FFFFFF;--bg-muted:#F4F4F2;--surface:#FFFFFF;--surface-raised:#1A1A1D;
  --heading:#0A0A0B;--body:#2B2D31;--muted:#5A5D61;
  --accent:#D1162D;--accent-hover:#B5122A;--accent-pressed:#9A0F24;--accent-text:#C8102E;--accent-text-dark:#FF6B7C;--rox-red:#ED1B34;
  --orange:#F05A24;--yellow:#FBB615;--blue:#0074A7;
  --black:#0A0A0B;--black-2:#121214;--on-dark:#F4F4F2;--on-dark-muted:#A3A6AA;
  --line:#DCDDDE;--line-strong:#85888C;--line-dark:#2A2B2E;
  --success:#1D7A47;--error:#C8102E;--warning:#A35B00;--focus:#0A0A0B;
  --g-primary:linear-gradient(120deg,#D1162D 0%,#9A0F24 100%);
  --g-warm:linear-gradient(90deg,#D1162D 0%,#F05A24 60%,#FBB615 100%);
  --g-ambient:#FFFFFF;
  --g-hero-overlay:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 45%,transparent 75%);
  --g-cta:radial-gradient(60% 90% at 100% 100%,rgba(209,22,45,.45),transparent 60%),#0A0A0B;
  --g-mesh:radial-gradient(45% 60% at 85% 15%,rgba(209,22,45,.30),transparent 65%),radial-gradient(40% 50% at 10% 95%,rgba(242,163,58,.12),transparent 65%),linear-gradient(160deg,#1B1A1C 0%,#221518 70%,#2E0F15 100%);
  --f-display:'Onest','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --f-sans:'Onest','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --e-out:cubic-bezier(.16,1,.3,1);--e-std:cubic-bezier(.2,0,0,1);--e-io:cubic-bezier(.65,0,.35,1);--e-pt:cubic-bezier(.76,0,.24,1);
  --d-fast:160ms;--d-hover:240ms;--d-card:480ms;--d-reveal:720ms;--d-page:900ms;
  --r-xs:2px;--r-pill:999px;
  /* v4 warm neutrals + depth */
  --ivory:#FBF9F5;--pearl:#F6F2EC;--champ:#EAE0D2;--sand:#D9CBB8;--bronze:#8A6A4B;--warm-gray:#6B6661;
  --char:#1B1A1C;--char-2:#242225;--burg:#3E0D17;--crimson:#9A0F24;--coral:#E8553E;--amber:#F2A33A;
  --g-ivory:linear-gradient(180deg,#FBF9F5 0%,#FFFFFF 100%);
  --g-champ:linear-gradient(160deg,#F4EEE5 0%,#EAE0D2 100%);
  --g-depth:linear-gradient(160deg,#1B1A1C 0%,#26161A 62%,#3E0D17 100%);
  --g-ribbon:linear-gradient(90deg,#9A0F24 0%,#D1162D 45%,#E8553E 80%,#F2A33A 100%);
  --g-glow:radial-gradient(50% 70% at 85% 10%,rgba(209,22,45,.10),transparent 65%),radial-gradient(40% 60% at 5% 100%,rgba(242,163,58,.10),transparent 65%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#FFFFFF;color:var(--body);font-family:var(--f-sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--accent-text)}a:hover{color:var(--accent-hover)}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:clamp(20px,4.4vw,64px)}
.nav-desk{display:flex}.nav-mob{display:none}
@media (max-width:1023px){.nav-desk{display:none!important}.nav-mob{display:flex!important}}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sec-dark :where(a,button,input,select,textarea,[tabindex]):focus-visible,.sec-mesh :where(a,button,input,select,textarea,[tabindex]):focus-visible,.on-dark:focus-visible{outline-color:#FFFFFF}

/* type — one family, weight 500 + negative tracking (ROX "Measured Ground") */
.t-display{font-family:var(--f-display);font-weight:500;font-size:clamp(46px,7.2vw,104px);line-height:.96;letter-spacing:-.035em;color:var(--heading);margin:0;text-wrap:balance}
.t-h1{font-family:var(--f-display);font-weight:500;font-size:clamp(38px,5.4vw,80px);line-height:.98;letter-spacing:-.03em;color:var(--heading);margin:0;text-wrap:balance}
.t-h2{font-family:var(--f-display);font-weight:500;font-size:clamp(30px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em;color:var(--heading);margin:0;text-wrap:balance}
.t-h3{font-family:var(--f-sans);font-weight:500;font-size:clamp(22px,2vw,30px);line-height:1.2;letter-spacing:-.012em;color:var(--heading);margin:0}
.t-h4{font-family:var(--f-sans);font-weight:600;font-size:22px;line-height:1.3;letter-spacing:-.005em;color:var(--heading);margin:0}
.t-lead{font-size:clamp(18px,1.5vw,21px);line-height:1.5;margin:0;color:var(--body)}
.t-small{font-size:15px;line-height:1.6;margin:0}
.t-cap{font-size:13px;line-height:1.45;color:var(--muted);margin:0}
.t-over{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin:0;display:inline-flex;align-items:center;gap:10px}
.t-over::before{content:"";width:20px;height:2px;background:var(--accent)}
.t-num{font-family:var(--f-display);font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.g-text{color:var(--accent-text)}
.g-text-warm{color:var(--accent-text-dark)}
.sec-dark .g-text,.sec-mesh .g-text{color:var(--accent-text-dark)}
.measure{max-width:680px}

/* sections */
.sec{position:relative;padding-block:clamp(96px,9vw,128px)}
.sec-muted{background:var(--pearl)}
.sec-ambient{background:var(--g-glow),var(--g-ivory)}
.sec-champ{background:var(--g-champ)}
.sec-ivory{background:var(--ivory)}
.sec-dark{background:var(--g-depth);color:var(--on-dark-muted)}
.cta-band{position:relative;background:radial-gradient(55% 120% at 100% 0%,rgba(209,22,45,.12),transparent 60%),radial-gradient(40% 80% at 0% 100%,rgba(242,163,58,.12),transparent 60%),linear-gradient(135deg,#FBF9F5 0%,#F1E8DC 100%);color:var(--body);overflow:hidden}
.cta-band::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--g-ribbon)}
.ribbon{height:3px;background:var(--g-ribbon)}
.t-bronze{color:var(--bronze)}
.sec-dark :is(.t-display,.t-h1,.t-h2,.t-h3,.t-h4){color:var(--on-dark)}
.sec-dark .t-over,.sec-mesh .t-over{color:var(--accent-text-dark)}
.sec-dark .t-cap{color:var(--on-dark-muted)}
.sec-dark .t-lead{color:#D4D6D9}
.sec-mesh{background:var(--g-mesh);color:var(--on-dark-muted)}
.sec-mesh :is(.t-h1,.t-h2,.t-h3,.t-h4){color:var(--on-dark)}
.hair{border:0;border-top:1px solid var(--line);margin:0}

/* buttons — red is punctuation: one primary per view */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 24px;border-radius:var(--r-xs);font:600 15px/1.2 var(--f-sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background-color var(--d-fast) var(--e-std),color var(--d-fast),border-color var(--d-fast),transform var(--d-fast) var(--e-std);isolation:isolate;overflow:hidden}
.btn .arr{transition:transform var(--d-hover) var(--e-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn:active{transform:scale(.985)}
.btn-primary,.btn-warm{background:var(--accent);color:#FFFFFF}
.btn-primary::after,.btn-warm::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-hover);transform:scaleX(0);transform-origin:left;transition:transform var(--d-card) var(--e-out)}
.btn-primary:hover,.btn-warm:hover{color:#FFFFFF}
.btn-primary:hover::after,.btn-warm:hover::after{transform:scaleX(1)}
.btn-primary:active,.btn-warm:active{background:var(--accent-pressed)}
.btn-outline{background:transparent;color:var(--heading);border-color:var(--heading)}
.btn-outline:hover{background:var(--heading);color:#FFFFFF}
.btn-ghost{background:transparent;color:var(--on-dark);border-color:rgba(244,244,242,.55)}
.btn-ghost:hover{background:#FFFFFF;color:var(--black);border-color:#FFFFFF}
.btn-white{background:#FFFFFF;color:var(--black)}
.btn-white:hover{background:var(--accent);color:#FFFFFF}
.btn[disabled],.btn[aria-disabled=true]{background:#ECECEA;color:#8E9195;cursor:not-allowed}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-xs);border:1px solid var(--line-strong);background:transparent;color:var(--heading);cursor:pointer;transition:background-color var(--d-fast),color var(--d-fast),border-color var(--d-fast)}
.icon-btn:hover{background:var(--heading);border-color:var(--heading);color:#fff}
.sec-dark .icon-btn,.sec-mesh .icon-btn,.on-dark.icon-btn{border-color:#7C7F84;color:var(--on-dark)}
.sec-dark .icon-btn:hover,.sec-mesh .icon-btn:hover,.on-dark.icon-btn:hover{background:#fff;color:var(--black)}
.ul{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--d-hover) var(--e-out)}
.ul:hover,.ul[aria-current=page]{background-size:100% 1px}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;color:var(--heading);padding:8px 0;background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1px no-repeat;transition:background-size var(--d-hover) var(--e-out)}
.link-arrow .arr{transition:transform var(--d-hover) var(--e-out)}
.link-arrow:hover{background-size:0 1px}
.link-arrow:hover .arr{transform:translateX(4px)}
.sec-dark .link-arrow,.sec-mesh .link-arrow{color:var(--on-dark)}

/* chips & tags */
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;color:var(--heading);font:500 14px var(--f-sans);cursor:pointer;transition:background-color var(--d-fast),color var(--d-fast),border-color var(--d-fast)}
.chip:hover{border-color:var(--heading)}
.chip[aria-pressed=true],.chip[aria-selected=true]{background:var(--heading);border-color:var(--heading);color:#fff}
.tag{display:inline-flex;align-items:center;gap:6px;font:600 10.5px/1 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:var(--r-pill);background:rgba(0,0,0,.72);color:#F4F4F2}
.tag-illu{background:rgba(255,255,255,.9);color:var(--black)}
.tag-tbc{background:#FBE9EB;color:var(--accent-text)}
.tag-demo{background:var(--accent);color:#fff}

/* media — square corners (radius-none) */
.media{position:relative;overflow:hidden;background:#ECECEA}
.media>img,.media .mi{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.lift:hover .media>img,.lift:hover .mi{transform:scale(1.03)}
.media .grade{display:none}
.media .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 55%)}
.cap-illu{position:absolute;left:14px;bottom:14px}

/* depth cards — subtle */
.tilt{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .6s var(--e-out)}
.tilt .glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 45%);opacity:0;transition:opacity .4s}
.tilt:hover .glare{opacity:1}
.tilt .lift-z{transform:translateZ(24px)}

/* forms */
.field{display:flex;flex-direction:column;gap:8px}
.label{font-size:15px;font-weight:600;color:var(--heading)}
.input{height:52px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--r-xs);background:#fff;font:16px var(--f-sans);color:var(--heading);transition:border-color var(--d-fast),box-shadow var(--d-fast)}
textarea.input{height:auto;padding:14px 16px;line-height:1.6;resize:vertical}
.input:hover{border-color:var(--heading)}
.input:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--heading);box-shadow:inset 0 -2px 0 var(--accent)}
.field:focus-within .label{color:var(--accent-text)}
.label{transition:color var(--d-fast)}
.input[aria-invalid=true]{border-color:var(--error)}
.err{font-size:13px;color:var(--error)}

/* sticky stages */
.track{position:relative}
.stage{position:sticky;top:0;height:clamp(560px,100dvh,960px);overflow:hidden}

/* reveal — progressive enhancement */
@supports (animation-timeline:view()){
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  .rv-l{animation:rvl linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .mask{animation:mask linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  .zoom-out{animation:zo linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  .par-slow{animation:ps linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .par-fast{animation:pf linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .bar-grow{animation:bg linear both;animation-timeline:view();animation-range:entry 20% cover 50%;transform-origin:left}
  .line-grow{animation:lg linear both;animation-timeline:view();animation-range:entry 30% exit 50%;transform-origin:top}
}
@keyframes rv{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes rvl{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}}
@keyframes mask{from{clip-path:inset(12% 8% 12% 8%)}to{clip-path:inset(0 0 0 0)}}
@keyframes zo{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes ps{from{transform:translateY(-5%)}to{transform:translateY(5%)}}
@keyframes pf{from{transform:translateY(10%)}to{transform:translateY(-10%)}}
@keyframes bg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lg{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- page transitions: rendered by rca-pt.js (mask · depth · match · editorial) ---------- */
main:focus{outline:none}
.page-in{animation:pagein 1s var(--e-out) .55s both}
@keyframes pagein{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
/* load-time masked headline reveal */
.h-reveal{animation:hrev 1.1s var(--e-out) .35s both}
@keyframes hrev{from{clip-path:inset(0 0 100% 0);transform:translateY(.35em)}to{clip-path:inset(0 0 -10% 0);transform:none}}
/* scroll vocabulary v4 — chosen per content weight, not one fade everywhere */
@supports (animation-timeline:view()){
  .rv-clip{animation:rvclip linear both;animation-timeline:view();animation-range:entry 5% cover 40%}
  .rv-clip-r{animation:rvclipr linear both;animation-timeline:view();animation-range:entry 5% cover 40%}
  .rv-depth{animation:rvdepth linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  .rv-track{animation:rvtrack linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .scrub-x{animation:scrubx linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@keyframes rvclip{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rvclipr{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes rvdepth{from{opacity:0;transform:perspective(1200px) translateY(56px) rotateX(9deg)}to{opacity:1;transform:none}}
@keyframes rvtrack{from{opacity:.0;letter-spacing:.02em}to{opacity:1;letter-spacing:-.03em}}
@keyframes scrubx{from{transform:translateX(6%)}to{transform:translateX(-6%)}}
/* mobile menu */
.mnav-item{animation:mnav .7s var(--e-out) both}
@keyframes mnav{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.drawer-in{animation:drawer .62s cubic-bezier(.76,0,.24,1) both}
@keyframes drawer{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.drawer-out{animation:drawerout .42s cubic-bezier(.76,0,.24,1) both}
@keyframes drawerout{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}

@keyframes cue{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(8px);opacity:1}}
.cue{animation:cue 2.4s ease-in-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(209,22,45,.55)}100%{box-shadow:0 0 0 16px rgba(209,22,45,0)}}
.pulse{animation:pulse 2s var(--e-out) infinite}
@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin .8s linear infinite}
@keyframes fade{from{opacity:0}to{opacity:1}}.fade{animation:fade .4s var(--e-out) both}
.snap{scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}.snap::-webkit-scrollbar{display:none}.snap>*{scroll-snap-align:start}
.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 (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rca-pt{display:none!important}}
@media (hover:none){.tilt{transform:none!important}.tilt .glare{display:none}}