/* Our Research Approach page.
   Loaded after app.css / uxp-*.css, so everything here is scoped to .ra-page —
   no bare html/body/* resets: this sheet must not leak into the shared nav,
   footer or any other page. */

.ra-page{--ra-purple:var(--color-brand,#1f18e2);--ra-lime:var(--color-accent,#e0f100);--ra-ink:#111;--ra-muted:#626262;overflow:clip;letter-spacing:0;color:var(--ra-ink)}
.ra-page *,.ra-page *::before,.ra-page *::after{box-sizing:border-box;letter-spacing:0}
.ra-page a{text-decoration:none}
.ra-page button{font:inherit;-webkit-tap-highlight-color:transparent}
.ra-page a,.ra-page summary{-webkit-tap-highlight-color:transparent}
.ra-page [hidden]{display:none!important}
.ra-page p{margin:0}
.ra-page h1,.ra-page h2,.ra-page h3{margin:0;font-weight:600}
.ra-page .uxp-hero h1{font-weight:700}
.ra-page h1,.ra-page h2,.ra-page h3,.ra-page p,.ra-page li,.ra-page dd{overflow-wrap:break-word}
.ra-page :is(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--ra-purple);outline-offset:6px}
/* ScrollSmoother scrolls with JS and applies --nav-offset itself; scroll-margin
   only covers the no-JS / reduced-motion fallback path. */
.ra-page [id]{scroll-margin-top:var(--nav-offset,120px)}

/* Matches .container-site exactly (max-width 1240 + 24px gutters) so every row
   on this page lines up with the fixed nav pill and the footer. */
.ra-wrap{width:100%;max-width:1240px;padding-inline:1.5rem;margin-inline:auto}

.ra-kicker{font-size:11px;font-weight:700;line-height:1.6;color:var(--ra-purple)}
.ra-small-label{font-size:10px;line-height:1.7;font-weight:700;color:#666}
.ra-section-note{font-size:12px;line-height:1.7;color:#999}
.ra-text-link{font-size:13px;font-weight:600;display:inline-flex;gap:25px;align-items:center;color:#111}
.ra-text-link span{color:var(--ra-purple);font-size:23px;line-height:1}
.ra-button{display:inline-flex;justify-content:space-between;align-items:center;gap:28px;min-height:51px;padding:14px 21px;border-radius:4px;background:var(--ra-purple);color:#fff;font-weight:600;font-size:13px;line-height:1.5;transition:background .2s,color .2s,transform .2s}
.ra-button>span{font-size:21px;line-height:1}
.ra-button:hover{background:#111;color:var(--ra-lime);transform:translateY(-2px)}

.ra-section-top{display:flex;align-items:baseline;justify-content:space-between;gap:25px}

.ra-section{padding:92px 0}
.ra-heading-row{display:grid;grid-template-columns:1.2fr .8fr;gap:90px;align-items:end;margin-top:27px;margin-bottom:40px}
.ra-heading-row h2,.ra-brief h2,.ra-quality h2,.ra-faq h2{font-size:51px;line-height:1.12}
.ra-heading-row>p,.ra-body-copy{font-size:16px;line-height:1.85;color:var(--ra-muted);max-width:490px}

/* 01 — Process */
.ra-process{background:#111;color:#fff;padding:78px 0 30px}
.ra-process .ra-kicker{color:var(--ra-lime)}
.ra-process .ra-heading-row>p{color:#aaa}
.ra-process .ra-heading-row{margin-bottom:35px}
.ra-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid #383838}
.ra-tabs button{position:relative;padding:19px 15px;min-height:84px;border:0;text-align:left;background:#191919;color:#aaa;font-size:13px;line-height:1.5;cursor:pointer;transition:background .2s,color .2s}
.ra-tabs button+button{border-left:1px solid #333}
.ra-tabs button span{display:block;font-size:10px;color:#777;margin-bottom:8px}
.ra-tabs button[aria-selected=true]{background:var(--ra-lime);color:#111}
.ra-tabs button[aria-selected=true] span{color:var(--ra-purple)}
.ra-tabs button:hover:not([aria-selected=true]){background:#292929;color:#fff}
.ra-stage{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;padding:44px 0 35px;min-height:450px;animation:raIn .3s ease}
.ra-stage-num{font-size:11px;color:var(--ra-lime);display:block;margin-bottom:20px}
.ra-stage-copy h3{font-size:37px;line-height:1.15;max-width:470px}
.ra-stage-copy .ra-stage-intro{font-size:17px;line-height:1.65;color:#eee;margin:20px 0 16px}
.ra-stage-copy>p:not(.ra-stage-intro){color:#999;font-size:14px;line-height:1.9}
.ra-stage-copy ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:9px}
.ra-stage-copy li{position:relative;padding-left:19px;color:#bbb;font-size:12px;line-height:1.6}
.ra-stage-copy li:before{content:'+';position:absolute;left:0;color:var(--ra-lime)}
.ra-stage-label{font-size:11px;line-height:1.6;font-weight:600;color:#aaa;padding-bottom:17px;border-bottom:1px solid #333}
.ra-evidence-thread{padding:14px 0 0}
.ra-evidence-thread>div{padding:12px 0 15px 23px;border-left:1px solid #3d3d3d;position:relative}
.ra-evidence-thread>div:before{content:'';position:absolute;left:-3px;top:17px;width:5px;height:5px;background:var(--ra-lime)}
.ra-evidence-thread span{color:#8c8c8c;font-size:9px;font-weight:600}
.ra-evidence-thread p{font-size:16px;line-height:1.6;color:#ddd;margin-top:7px}
.ra-stage-output{margin-top:12px;padding-top:20px;border-top:1px solid #333}
.ra-stage-output>span{display:block;color:#999;font-size:9px;margin-bottom:8px}
.ra-stage-output>strong{font-weight:500;color:var(--ra-lime);font-size:21px;line-height:1.5}
.ra-process-foot{border-top:1px solid #333;display:flex;gap:30px;align-items:center;justify-content:space-between;padding-top:22px}
.ra-process-foot p{color:#888;font-size:11px;line-height:1.7;max-width:650px}
.ra-next{display:flex;align-items:center;gap:35px;border:0;background:none;color:#eee;font-size:12px;padding:10px 0;cursor:pointer;white-space:nowrap}
.ra-next>span{color:var(--ra-lime);font-size:21px}

/* 02 — Brief */
.ra-brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.ra-brief h2{margin:27px 0 25px}
.ra-brief h2>span{color:var(--ra-purple)}
.ra-brief-list{list-style:none;padding:0;margin:0}
.ra-brief-list>li{display:grid;grid-template-columns:40px 1fr;gap:20px;padding:28px 0;border-top:1px solid #d8d8df}
.ra-brief-list>li>span{color:var(--ra-purple);font-size:12px}
.ra-brief-list h3{font-size:22px;margin-bottom:12px}
.ra-brief-list p{font-size:15px;line-height:1.8;color:#666}

/* 03 — Methods */
.ra-methods{background:#f5f5f8;border-top:1px solid #e5e5eb;border-bottom:1px solid #e5e5eb}
.ra-method-tabs{display:flex;gap:28px;border-bottom:1px solid #ccc}
.ra-method-tabs>button{padding:16px 4px 18px;min-height:52px;color:#777;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;font-size:15px;cursor:pointer}
.ra-method-tabs>button[aria-selected=true]{border-color:var(--ra-purple);color:var(--ra-purple);font-weight:600}
.ra-method-panel{display:grid;grid-template-columns:1.1fr .85fr;gap:100px;padding-top:40px;min-height:315px;animation:raIn .3s ease}
.ra-method-panel h3{font-size:31px;line-height:1.25;max-width:560px;margin:12px 0 19px}
.ra-method-panel p{font-size:15px;line-height:1.8;color:#666;max-width:540px}
.ra-tags{list-style:none;padding:0;margin:22px 0 0;display:flex;gap:9px 22px;flex-wrap:wrap}
.ra-tags>li{font-size:11px;font-weight:600;color:var(--ra-purple);padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--ra-purple) 28%,#fff)}
.ra-method-panel dl{margin:0}
.ra-method-panel dl>div{padding:0 0 15px;margin-bottom:15px;border-bottom:1px solid #ddd}
.ra-method-panel dt{font-size:10px;color:#666;font-weight:600;margin-bottom:7px}
.ra-method-panel dd{margin:0;font-size:15px;line-height:1.6;color:#111}

/* Full-bleed photo — caption text keeps the .ra-wrap gutter on every width. */
.ra-photo{position:relative;display:block;overflow:hidden;margin:0;height:490px;background:#111}
.ra-photo img{width:100%;height:100%;object-fit:cover;object-position:center 47%;display:block;opacity:.75}
.ra-photo figcaption{position:absolute;inset:0;padding-block:50px;padding-inline:max(1.5rem,calc((100% - 1240px) / 2 + 1.5rem));display:flex;flex-direction:column;justify-content:flex-end;background:#0002;color:#fff}
.ra-photo figcaption>span{font-size:10px;line-height:1.6;background:#111;padding:6px 9px;width:fit-content}
.ra-photo figcaption p{font-size:44px;font-weight:500;line-height:1.18;margin-top:20px;text-shadow:0 2px 12px #0008}
.ra-photo strong{font-weight:500;background:var(--ra-lime);color:#111;padding:0 8px;text-shadow:none}

/* 04 — Global */
.ra-global{background:var(--ra-lime)}
.ra-global .ra-kicker{color:#111}
.ra-global .ra-heading-row>p{color:#41450a}
.ra-global-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px;margin-top:48px}
.ra-global-flow article{border-top:1px solid #858c20;padding-top:22px;position:relative}
.ra-global-flow article>span{font-size:10px;line-height:1.7;font-weight:700;color:#444b00}
.ra-global-flow h3{font-size:22px;line-height:1.3;margin:22px 0 15px}
.ra-global-flow p{font-size:14px;color:#41450a;line-height:1.9}
.ra-recruitment{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;border-top:1px solid #858c20;padding-top:30px;margin-top:50px}
.ra-recruitment h3{font-size:20px;line-height:1.4}
.ra-recruitment p{font-size:13px;line-height:1.9;color:#41450a}

/* 05 — Outputs */
.ra-output-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ra-output-card{display:flex;flex-direction:column;border:1px solid #ddd;border-radius:6px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.ra-output-art{height:190px;flex:none;padding:26px;display:flex;flex-direction:column;justify-content:space-between;position:relative;background:#f5f5f8}
.ra-output-art>span{font-size:9px;color:#777;line-height:1.6}
.ra-output-art>b{font-size:10px;font-weight:500;color:#555;line-height:1.7}
.ra-art-lines{display:grid;gap:9px}
.ra-art-lines i{height:8px;width:95%;background:color-mix(in srgb,var(--ra-purple) 18%,#fff)}
.ra-art-lines i:nth-child(2){width:70%;background:var(--ra-purple)}
.ra-art-lines i:nth-child(3){width:82%;background:var(--ra-lime)}
.ra-journey-art{background:color-mix(in srgb,var(--ra-purple) 5%,#fff)}
.ra-journey-nodes{display:flex;align-items:center;justify-content:space-between;position:relative}
.ra-journey-nodes:before{content:'';position:absolute;top:50%;height:1px;width:100%;background:color-mix(in srgb,var(--ra-purple) 30%,#fff)}
.ra-journey-nodes i{width:15px;height:15px;background:#fff;border:2px solid var(--ra-purple);border-radius:50%;z-index:1}
.ra-journey-nodes i:nth-child(3){background:var(--ra-purple)}
.ra-priority-rows{display:grid;gap:7px}
.ra-priority-rows i{font-size:11px;line-height:1.7;font-style:normal;padding:6px 10px;background:#fff;border-left:3px solid var(--ra-purple)}
.ra-priority-rows i:nth-child(2){border-color:color-mix(in srgb,var(--ra-purple) 55%,#fff)}
.ra-priority-rows i:nth-child(3){border-color:var(--ra-lime)}
.ra-output-text{flex:1 1 auto;padding:27px;transition:background .2s}
.ra-output-text>span{font-size:9px;font-weight:600;color:var(--ra-purple)}
.ra-output-text h3{font-size:23px;line-height:1.25;margin:15px 0}
.ra-output-text p{font-size:14px;line-height:1.8;color:#666}
.ra-output-note{font-size:12px;line-height:1.9;color:#777;border-top:1px solid #ddd;padding-top:22px;margin-top:30px!important}

/* 06 — Quality */
.ra-quality{border-top:1px solid #ddd;border-bottom:1px solid #ddd;background:#fafafa}
.ra-quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:95px;margin-top:28px;align-items:start}
.ra-quality h2>span{color:#777}
.ra-quality-items>article{display:grid;grid-template-columns:40px 1fr;gap:20px;padding:0 0 25px;margin-bottom:23px;border-bottom:1px solid #ddd}
.ra-quality-items>article:last-child{margin:0;padding-bottom:0;border-bottom:0}
.ra-quality-items>article>span{color:var(--ra-purple);font-size:11px}
.ra-quality h3{font-size:19px;margin-bottom:9px}
.ra-quality p{font-size:14px;line-height:1.85;color:#666}

/* FAQ */
.ra-faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:100px;align-items:start}
.ra-faq h2{margin:24px 0 30px}
.ra-faq details{border-bottom:1px solid #ddd}
.ra-faq details:first-child{border-top:1px solid #ddd}
.ra-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;padding:22px 0;font-size:16px;font-weight:500;line-height:1.5;cursor:pointer}
.ra-faq summary::-webkit-details-marker{display:none}
.ra-faq summary>span{flex:none;font-size:23px;color:var(--ra-purple);font-weight:400;transition:transform .2s}
.ra-faq details[open] summary>span{transform:rotate(45deg)}
.ra-faq details>p{color:#666;font-size:14px;line-height:1.9;padding:0 30px 25px 0}

/* Closing */
.ra-closing{padding:80px 0 65px;background:#111;color:#fff}
.ra-closing .ra-kicker{color:var(--ra-lime)}
.ra-closing h2{font-size:69px;line-height:1.1;margin:30px 0 40px;max-width:1100px}
.ra-closing h2>span{color:var(--ra-lime)}
.ra-closing h2>em{font-style:normal;color:var(--ra-lime);font-weight:400;font-size:46px}
.ra-closing-bottom{display:flex;align-items:center;justify-content:space-between;gap:35px;border-top:1px solid #333;padding-top:30px}
.ra-closing-bottom p{font-size:14px;line-height:1.9;color:#aaa}
.ra-closing .ra-button{background:var(--ra-purple);color:#fff}
.ra-closing .ra-button:hover{background:var(--ra-lime);color:#111}

@keyframes raIn{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

@media(hover:hover) and (pointer:fine){
  .ra-output-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px color-mix(in srgb,var(--ra-purple) 8%,transparent)}
  .ra-output-card:hover .ra-output-text{background:var(--ra-purple)}
  .ra-output-card:hover .ra-output-text :is(h3,p){color:#fff}
  .ra-output-card:hover .ra-output-text>span{color:var(--ra-lime)}
  .ra-text-link:hover{color:var(--ra-purple)}
}

@media(max-width:1000px){
  .ra-heading-row,.ra-stage,.ra-method-panel,.ra-brief-grid,.ra-quality-grid,.ra-faq-grid{gap:45px}
  .ra-heading-row h2,.ra-brief h2,.ra-quality h2,.ra-faq h2{font-size:42px}
  .ra-tabs button{font-size:11px;padding:17px 10px}
  .ra-stage-copy h3{font-size:31px}
  .ra-stage{min-height:480px}
  .ra-output-grid{gap:15px}
  .ra-output-text{padding:23px}
  .ra-output-art{padding:21px}
  .ra-recruitment{gap:40px}
  .ra-closing h2{font-size:60px}
}

@media(max-width:760px){
  .ra-section{padding:60px 0}
  .ra-heading-row{grid-template-columns:1fr;gap:22px;margin-top:23px;margin-bottom:32px}
  .ra-heading-row h2,.ra-brief h2,.ra-quality h2,.ra-faq h2{font-size:38px}
  .ra-heading-row>p,.ra-body-copy{font-size:15px;max-width:600px}
  .ra-section-note{font-size:10px}
  .ra-process{padding:55px 0 25px}
  .ra-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#333;border:0}
  .ra-tabs button{font-size:12px;min-height:72px;padding:13px 12px}
  .ra-tabs button+button{border:0}
  .ra-tabs button span{margin-bottom:6px}
  .ra-stage{grid-template-columns:1fr;gap:30px;padding:30px 0;min-height:0}
  .ra-stage-copy h3{font-size:32px}
  .ra-stage-copy .ra-stage-intro{font-size:16px}
  .ra-stage-copy>p:not(.ra-stage-intro){font-size:14px}
  .ra-stage-evidence{border-top:1px solid #333;padding-top:22px}
  .ra-stage-output>strong{font-size:20px}
  .ra-process-foot{align-items:flex-start;gap:20px}
  .ra-process-foot p{font-size:10px}
  .ra-next{gap:18px;font-size:11px}
  .ra-brief-grid,.ra-quality-grid,.ra-faq-grid{grid-template-columns:1fr;gap:35px}
  .ra-brief h2{margin-top:22px}
  .ra-brief-list>li{padding:24px 0}
  .ra-brief-list h3{font-size:21px}
  .ra-method-tabs{gap:0;justify-content:space-between}
  .ra-method-tabs>button{font-size:14px;padding:15px 4px}
  .ra-method-panel{grid-template-columns:1fr;min-height:0;gap:30px;padding-top:30px}
  .ra-method-panel h3{font-size:28px}
  .ra-method-panel p{font-size:14px}
  .ra-method-panel dd{font-size:14px}
  .ra-photo{height:400px}
  .ra-photo img{object-position:55% 42%;opacity:.85}
  .ra-photo figcaption{padding-block:30px;padding-inline:1.25rem;background:#0003}
  .ra-photo figcaption p{font-size:33px}
  .ra-global-flow{grid-template-columns:1fr;gap:28px;margin-top:35px}
  .ra-global-flow h3{font-size:22px;margin:15px 0 10px}
  .ra-global-flow p{max-width:550px}
  .ra-recruitment{grid-template-columns:1fr;gap:15px;margin-top:33px;padding-top:25px}
  .ra-section-top>.ra-small-label{max-width:140px;text-align:right;font-size:9px}
  .ra-methods .ra-section-top>.ra-text-link{font-size:10px;gap:12px;max-width:130px}
  .ra-output-grid{grid-template-columns:1fr;gap:22px}
  .ra-output-art{height:180px}
  .ra-output-text{padding:25px}
  .ra-output-card h3{font-size:24px}
  .ra-output-note{font-size:11px}
  .ra-quality-grid{margin-top:22px}
  .ra-quality-items>article{grid-template-columns:30px 1fr;gap:15px}
  .ra-faq h2{margin:20px 0 22px}
  .ra-faq-grid{gap:28px}
  .ra-faq summary{font-size:15px;min-height:76px}
  .ra-closing{padding:56px 0 45px}
  .ra-closing h2{font-size:46px;margin:25px 0 30px}
  .ra-closing h2>em{font-size:31px}
  .ra-closing-bottom{flex-direction:column;align-items:flex-start;gap:25px}
  .ra-closing-bottom p{font-size:13px}
}

/* .container-site drops to 20px gutters at 640 — keep .ra-wrap in step. */
@media(max-width:640px){
  .ra-wrap{padding-inline:1.25rem}
  .ra-photo figcaption{padding-inline:1.25rem}
}

@media(max-width:380px){
  .ra-heading-row h2,.ra-brief h2,.ra-quality h2,.ra-faq h2{font-size:32px}
  .ra-tabs button{font-size:10px;padding:12px 9px}
  .ra-closing h2{font-size:39px}
  .ra-closing h2>em{font-size:27px}
  .ra-stage-copy h3{font-size:29px}
  .ra-button{font-size:12px;padding:13px 17px;gap:18px}
  .ra-photo figcaption p{font-size:28px}
}

@media(prefers-reduced-motion:reduce){
  .ra-page *,.ra-page *::before,.ra-page *::after{animation:none!important;transition:none!important}
  .ra-button:hover,.ra-output-card:hover{transform:none}
}