/* Page-specific styles for retail-data-ai.html (v131 tokens only). All new
   classes are prefixed .rda- so nothing collides with sitewide styles.css. */

/* Hero: centered, and no min-height (this page's hero has no side visual,
   so the sitewide big-visual hero min-height just left empty white space
   below the content). */
.rda-hero-center{min-height:0;padding-bottom:56px}
.rda-hero-center .wrap{max-width:800px;text-align:center;margin-left:auto;margin-right:auto}
.rda-hero-center .display{font-size:clamp(2.1rem,4.3vw,3.5rem)}
.rda-hero-center .lead{margin-left:auto;margin-right:auto;font-size:clamp(1.02rem,1.5vw,1.15rem)}
.rda-hero-center .hero-ctas{justify-content:center}

/* CTO pull-quote callout (Six Reasons to Call Us section). */
.rda-cto-callout{background:var(--yellow-soft);border:1px solid var(--line);border-radius:var(--radius);padding:40px 44px;margin-top:44px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.rda-cto-quote{font-size:1.12rem;line-height:1.6;color:var(--ink);font-weight:500;margin-top:14px}
.rda-cto-person{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:180px}
.rda-cto-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid var(--paper);box-shadow:var(--shadow);display:block}
.rda-cto-name{font-weight:700;font-size:.92rem}
.rda-cto-role{font-size:.8rem;color:var(--mut)}

/* Capabilities: divided row list (num + title + tagline on the left,
   description on the right) instead of the default 2-col card grid. */
.rda-cap-list{margin-top:8px;border-top:1px solid var(--line)}
.rda-cap-row{display:grid;grid-template-columns:280px 1fr;gap:40px;padding:32px 0;border-bottom:1px solid var(--line);align-items:center;scroll-margin-top:150px}
.rda-cap-row-left h3{margin:6px 0 6px}
.rda-cap-num{font-size:.78rem;font-weight:800;color:var(--yellow);-webkit-text-stroke:1px var(--ink);letter-spacing:.02em;line-height:1.7}
p.rda-cap-tagline{color:var(--mut);font-size:.86rem;font-style:italic}
.rda-cap-row-right p{color:var(--mut);font-size:.92rem;line-height:1.62;max-width:720px;margin:0}

/* Tech stack overview: simple divided rows, no card backgrounds (kept
   deliberately plain so it doesn't repeat the Reasons/Capabilities visuals). */
.rda-stack-list{margin-top:8px}
.rda-stack-row{padding:22px 0;border-top:1px solid var(--line)}
.rda-stack-row:first-child{border-top:0;padding-top:4px}
.rda-stack-row h3{font-size:1rem;margin-bottom:14px}
.rda-stack-techs{margin:0;font-size:.9rem;font-weight:500;color:var(--mut);line-height:1.7;white-space:normal}
@media(min-width:901px){
  .rda-stack-row:last-child .rda-stack-techs{white-space:nowrap;font-size:.82rem}
}

/* Case studies: 3-visible sliding-window carousel over the 4 real cases. */
.rda-case-carousel{position:relative;margin-top:8px}
.rda-case-track{margin:0}
.rda-case-link{color:inherit;text-decoration:none}
.rda-case-arrow{position:absolute;top:36%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:background .15s ease,border-color .15s ease,transform .15s ease;color:var(--ink)}
.rda-case-arrow:hover{background:var(--bone);border-color:var(--ink)}
.rda-case-arrow-left{left:-23px}
.rda-case-arrow-right{right:-23px}
.rda-case-dots{display:flex;justify-content:center;gap:10px;margin-top:32px}
.rda-case-dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer;transition:background .15s ease,transform .15s ease}
.rda-case-dot.active{background:var(--yellow);transform:scale(1.25)}

/* Recent Work cards: swap the flat grey metric background for a
   translucent photo of the actual case, instead of a plain colour block. */
.rda-case-link .case-metric{
  position:relative;overflow:hidden;isolation:isolate;
  height:144px;display:flex;flex-direction:column;justify-content:center;
}
.rda-case-link .case-metric-visual{
  position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:.22;
}
.rda-case-link .case-metric b{
  position:relative;z-index:1;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.rda-case-link .case-metric-industry{position:relative;z-index:1;margin-top:8px;display:block}

@media(max-width:900px){
  .rda-case-arrow{display:none}
}

@media(max-width:700px){
  .rda-cap-row{grid-template-columns:1fr}
  .rda-cto-callout{grid-template-columns:1fr;text-align:center;justify-items:center}
}