/* Shared case study layout (onewave-ai.com success story order, Slidr light system). Client colors come from assets/clients/clients.css via [data-client] on : --c-text for accent text, --c-accent for decorative lines, --c-primary for the hero band. Slidr's nav, footer and the Rose call to action are untouched. */ .cs-wrap{max-width:1240px; margin:0 auto; padding:0 32px;} .cs-label{display:flex; align-items:center; gap:14px; font:700 12px/1.2 Inter,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--c-text,var(--moonstone-700)); margin:0;} .cs-label.rule::before{content:""; width:28px; height:2px; background:var(--c-accent,currentColor); flex:none;} .cs-hero{position:relative; background:linear-gradient(180deg,var(--c-tint,#fff) 0,#fff 520px); padding:0;} .cs-band{background:var(--c-primary,var(--sc-500)); color:var(--c-on-primary,#fff); border-bottom:3px solid var(--c-accent,transparent);} .cs-band .cs-wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px; padding-top:22px; padding-bottom:22px;} .cs-lockup{display:flex; align-items:center; gap:22px; min-width:0;} .cs-lockup-slidr{display:block; height:46px; width:auto; flex:none;} .cs-lockup-div{flex:none; width:1px; height:46px; background:currentColor; opacity:.55;} .cs-lockup-client{display:flex; align-items:center; min-width:0;} .cs-lockup-client img{display:block; height:52px; width:auto; max-width:min(300px,52vw); object-fit:contain;} .cs-lockup-client.chip{background:#fff; border-radius:10px; padding:7px 12px;} .cs-lockup-client.chip img{height:40px;} .cs-band .cs-back{color:var(--c-on-primary,#fff);} .cs-band .cs-back:hover{color:var(--c-on-primary,#fff); text-decoration:underline; text-underline-offset:4px;} .cs-back{display:inline-flex; align-items:center; gap:10px; font:500 14.5px/1 Inter,sans-serif; color:#52586B; text-decoration:none;} .cs-back:hover{color:var(--c-text,var(--sc-500));} .cs-hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:40px 80px; align-items:start; margin-top:0; padding-top:48px;} .cs-hero h1{font-family:var(--font-display); font-weight:700; font-size:clamp(34px,4.6vw,60px); line-height:1.04; letter-spacing:-.03em; color:var(--sc-500); margin:22px 0 0; text-wrap:balance;} .cs-lede{font:400 18px/1.7 Inter,sans-serif; color:#52586B; max-width:42rem; margin:26px 0 0;} .cs-link{display:inline-flex; align-items:center; gap:10px; margin-top:28px; font:600 15.5px/1 Inter,sans-serif; color:var(--c-text,var(--moonstone-700)); text-decoration:none;} .cs-link:hover{text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--c-accent,currentColor); text-decoration-thickness:2px;} .cs-link svg{transition:transform .2s;} .cs-link:hover svg{transform:translateX(3px);} .cs-client{border-top:3px solid var(--c-primary,var(--sc-500)); padding-top:26px; margin-top:6px;} .cs-client-head{display:flex; align-items:center; gap:14px; margin:18px 0 0;} .cs-logo{height:76px; border-radius:10px; padding:8px 10px;} .cs-client-name{font:700 22px/1.2 var(--font-display); letter-spacing:-.015em; color:var(--sc-500); margin:0;} .cs-facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; margin:24px 0 0; padding:22px 0 0; border-top:1px solid rgba(36,40,62,.12);} .cs-facts div{min-width:0;} .cs-facts .wide{grid-column:1 / -1;} .cs-facts dt{font:500 12.5px/1.3 Inter,sans-serif; color:#52586B; margin:0 0 5px;} .cs-facts dd{font:500 14.5px/1.5 Inter,sans-serif; color:var(--sc-500); margin:0;} .cs-metrics{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:64px 0 0; padding:34px 0; border-top:2px solid var(--c-accent,rgba(36,40,62,.12)); border-bottom:1px solid rgba(36,40,62,.12);} .cs-metric{padding:0 28px; min-width:0;} .cs-metric:first-child{padding-left:0;} .cs-metric + .cs-metric{border-left:1px solid rgba(36,40,62,.12);} .cs-metric b{display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(32px,3.8vw,48px); line-height:1; letter-spacing:-.02em; color:var(--c-text,var(--moonstone-700));} .cs-metric span{display:block; font:600 15px/1.35 Inter,sans-serif; color:var(--sc-500); margin-top:14px;} .cs-look{background:#fff; padding:56px 0 0;} .cs-look img{display:block; width:100%; height:auto; aspect-ratio:1240/560; object-fit:cover; border-radius:18px; border:1px solid rgba(36,40,62,.1); margin-top:18px;} .cs-story{background:#fff; padding:88px 0 40px;} .cs-story-grid{display:grid; grid-template-columns:220px minmax(0,1fr); gap:80px;} .cs-toc{position:sticky; top:110px; align-self:start;} .cs-toc ol{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:4px;} .cs-toc a{display:flex; gap:16px; padding:10px 0 10px 14px; border-left:2px solid transparent; margin-left:-14px; font:500 14.5px/1.3 Inter,sans-serif; color:#52586B; text-decoration:none;} .cs-toc a span{font-size:12px; color:var(--c-text,var(--moonstone-700)); padding-top:1px;} .cs-toc a:hover, .cs-toc a.on{color:var(--sc-500);} .cs-toc a.on{border-left-color:var(--c-accent,var(--moonstone-500));} .cs-toc a.on span, .cs-toc a:hover span{color:var(--c-text,var(--moonstone-700));} .cs-part{max-width:46rem; scroll-margin-top:100px;} .cs-part + .cs-part{margin-top:56px; padding-top:56px; border-top:1px solid rgba(36,40,62,.12);} .cs-part h2{display:flex; align-items:baseline; gap:18px; font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.4vw,42px); line-height:1.1; letter-spacing:-.025em; color:var(--sc-500); margin:0;} .cs-num{font:600 15px/1 Inter,sans-serif; letter-spacing:.08em; color:var(--c-text,var(--moonstone-700));} .cs-part > p{font:400 17px/1.75 Inter,sans-serif; color:#3E4357; margin:20px 0 0;} .cs-quote{position:relative; margin:64px 0 0; padding:6px 0 6px 32px; border-left:3px solid var(--c-accent,var(--moonstone-500)); max-width:52rem;} .cs-quote blockquote{margin:18px 0 0;} .cs-quote::after{content:"\201C"; position:absolute; right:0; top:-18px; font:700 120px/1 Georgia,serif; color:var(--c-text,var(--moonstone-700)); opacity:.14; pointer-events:none;} .cs-pull{font-family:var(--font-display); font-weight:600; font-size:clamp(24px,2.8vw,34px); line-height:1.3; letter-spacing:-.015em; color:var(--sc-500); margin:0; text-wrap:balance;} .cs-full{font:400 16px/1.75 Inter,sans-serif; color:#52586B; margin:22px 0 0;} .cs-who{font:700 14.5px/1.4 Inter,sans-serif; color:var(--sc-500); margin:22px 0 0;} .cs-who span{font-weight:400; color:#52586B;} .cs-cta-sec{background:#fff; padding:56px 0 104px;} .cs-cta{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px 56px; align-items:center; background:var(--sc-500); border-radius:22px; padding:56px 56px;} .cs-cta::before{content:""; position:absolute; inset:0; background:url(/assets/motifs/route-lines.svg) 0 0/720px auto repeat; opacity:.08; pointer-events:none;} .cs-cta > *{position:relative;} .cs-cta .cs-label{color:var(--c-text,var(--moonstone-400));} .cs-cta{border-top:3px solid var(--c-primary,transparent);} .cs-cta h2{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3.4vw,40px); line-height:1.12; letter-spacing:-.02em; color:#fff; margin:16px 0 0; text-wrap:balance;} .cs-cta-btns{display:flex; flex-direction:column; align-items:center; gap:18px;} .cs-cta .cta-rose{display:inline-flex; align-items:center; gap:10px; background:var(--rose-500); color:#fff; font:600 16px/1 Inter,sans-serif; padding:17px 30px; border-radius:999px; text-decoration:none; box-shadow:0 10px 24px rgba(255,0,120,.28); white-space:nowrap;} .cs-cta .cs-more{display:inline-flex; align-items:center; gap:8px; font:600 15px/1 Inter,sans-serif; color:#fff; text-decoration:none; white-space:nowrap;} .cs-cta .cs-more:hover{color:var(--c-text,var(--moonstone-400));} @media (max-width:960px){ .cs-hero-grid{grid-template-columns:minmax(0,1fr); gap:36px;} .cs-client{max-width:36rem;} .cs-story-grid{grid-template-columns:minmax(0,1fr); gap:0;} .cs-toc{display:none;} .cs-metrics{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 0;} .cs-metric:nth-child(3){padding-left:0; border-left:0;} .cs-cta{grid-template-columns:minmax(0,1fr); padding:44px 36px;} .cs-cta-btns{align-items:flex-start;} } @media (max-width:720px){ .cs-wrap{padding:0 20px;} .cs-hero-grid{padding-top:32px;} .cs-band .cs-wrap{padding-top:16px; padding-bottom:16px; gap:14px;} .cs-lockup{gap:14px;} .cs-lockup-slidr{height:34px;} .cs-lockup-div{height:34px;} .cs-lockup-client img{height:38px;} .cs-lockup-client.chip img{height:28px;} .cs-logo{height:64px; padding:7px 9px;} .cs-label{font-size:11px; letter-spacing:.14em; gap:10px;} .cs-label.rule::before{width:20px;} .cs-lede{font-size:16.5px;} .cs-metrics{margin-top:44px; padding:28px 0;} .cs-metric{padding:0 16px;} .cs-metric span{font-size:14px; margin-top:10px;} .cs-look{padding-top:40px;} .cs-look img{aspect-ratio:4/3;} .cs-story{padding:64px 0 24px;} .cs-part > p{font-size:16px;} .cs-quote{padding-left:20px; margin-top:48px;} .cs-cta-sec{padding:40px 0 72px;} .cs-cta{padding:36px 24px; border-radius:18px;} .cs-cta .cta-rose{padding:16px 24px;} } @media (prefers-reduced-motion:reduce){ .cs-link svg{transition:none;} } .cs-metrics.rows-2{row-gap:34px;} .cs-metrics.rows-2 .cs-metric:nth-child(4n+1){padding-left:0; border-left:0;} .cs-period{font:500 13px/1.5 Inter,sans-serif; color:#52586B; margin:14px 0 0;} @media (max-width:960px){ .cs-metrics .cs-metric:nth-child(odd){padding-left:0; border-left:0;} } @media (max-width:860px){ section.cs-hero{padding-top:0 !important;} } /* Key facts, updated line, FAQ and related pages (answer-ready content, client colors). */ .cs-keyfacts{margin:26px 0 0; padding:18px 22px; background:#fff; border:1px solid rgba(36,40,62,.1); border-left:4px solid var(--c-accent,var(--moonstone-500)); border-radius:12px; max-width:44rem;} .cs-kf-title{font:700 12px/1.2 Inter,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--c-text,var(--moonstone-700)); margin:0 0 12px;} .cs-keyfacts dl{display:grid; gap:8px; margin:0;} .cs-keyfacts dl div{display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:4px 16px;} .cs-keyfacts dt{font:600 14px/1.5 Inter,sans-serif; color:var(--sc-500); margin:0;} .cs-keyfacts dd{font:400 14.5px/1.5 Inter,sans-serif; color:#3E4357; margin:0;} .cs-updated{font:600 13px/1.5 Inter,sans-serif; color:var(--c-text,var(--moonstone-700)); margin:6px 0 0;} .cs-metrics + .cs-updated{margin-top:14px;} .cs-faq{background:#fff; padding:24px 0 48px;} .cs-faq h2{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3.2vw,38px); line-height:1.1; letter-spacing:-.02em; color:var(--sc-500); margin:14px 0 0;} .cs-faq-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:28px 0 0;} .cs-qa{background:var(--c-tint,#F6F8FA); border-top:3px solid var(--c-primary,var(--moonstone-500)); border-radius:12px; padding:20px 22px;} .cs-qa h3{font:700 17px/1.35 Inter,sans-serif; color:var(--c-text,var(--sc-500)); margin:0;} .cs-qa p{font:400 15.5px/1.65 Inter,sans-serif; color:#3E4357; margin:10px 0 0;} .cs-related{margin:32px 0 0; padding-top:22px; border-top:1px solid rgba(36,40,62,.12);} .cs-related h3{font:700 12px/1.2 Inter,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#52586B; margin:0 0 12px;} .cs-related ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 28px;} .cs-related a{font:600 15.5px/1.5 Inter,sans-serif; color:var(--c-text,var(--moonstone-700)); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--c-accent,currentColor); text-decoration-thickness:2px;} .cs-related a:hover{color:var(--sc-500);} @media (max-width:720px){ .cs-keyfacts{padding:16px 16px;} .cs-keyfacts dl div{grid-template-columns:minmax(0,1fr); gap:2px;} .cs-faq-list{grid-template-columns:minmax(0,1fr);} }