/* Showcase page: bold stages, device mockups, motion. Loaded last. */
.projects-page{overflow-x:clip}
.projects-page header,.projects-page .projects-hero{background:transparent}
.projects-page main{display:block}
.sc-eyebrow{font:700 12px/1.6 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 20px;display:inline-block;background:rgba(0,40,59,.55);padding:9px 16px;border-radius:999px}
.sc-eyebrow.dark{background:var(--ink)}
/* ---------- hero ---------- */
.sc-hero{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:3%;align-items:center;padding:60px 6% 110px;min-height:760px;overflow:hidden}
.sc-hero h1,.sc-hero .hero-slogan{font-size:clamp(70px,8.4vw,136px);line-height:.92;color:#fff;letter-spacing:-.03em;animation:cdmrise .9s cubic-bezier(.2,.8,.2,1) .1s both}
.sc-hero h1 i,.sc-hero .hero-slogan i{color:var(--orange)}
.sc-hero-text{color:#fff;font-size:20px;max-width:520px;margin:28px 0 36px;animation:cdmrise .9s .45s cubic-bezier(.2,.8,.2,1) both}
.sc-hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;animation:cdmrise .9s .65s cubic-bezier(.2,.8,.2,1) both}
.sc-ghost{color:#fff;font-weight:800;border-bottom:2px solid var(--orange);padding-bottom:4px}
.sc-hero-art{position:relative;height:640px;perspective:1400px}
.sc-disc{position:absolute;right:-6%;top:2%;width:min(600px,46vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffb04d,var(--orange) 50%,#f27a00);animation:cdmfloat 9s ease-in-out infinite}
.sc-float{position:absolute;filter:drop-shadow(0 34px 44px rgba(0,40,59,.45))}
.sc-float .sc-browser{width:100%}
.sc-float.f1{left:0;top:4%;width:76%;rotate:-6deg;translate:var(--tx,0) var(--ty,0);animation:cdmrise 1s .3s cubic-bezier(.2,.8,.2,1) both}
.sc-float.f2{right:-2%;top:36%;width:70%;rotate:5deg;animation:cdmrise 1s .55s cubic-bezier(.2,.8,.2,1) both}
.sc-float.f3{left:46%;top:-2%;width:22%;rotate:8deg;animation:cdmrise 1s .8s cubic-bezier(.2,.8,.2,1) both}
.sc-float.f3 .sc-phone{animation:cdmfloat 6s ease-in-out infinite}
/* ---------- device frames ---------- */
.sc-browser{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.sc-bar{display:flex;align-items:center;gap:7px;background:#eef1f3;padding:11px 14px;border-bottom:1px solid #dde2e5}
.sc-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.sc-bar i:nth-child(2){background:#febc2e}.sc-bar i:nth-child(3){background:#28c840}
.sc-bar span{margin-left:12px;flex:1;background:#fff;border-radius:999px;padding:5px 14px;font:600 12px/1.4 Arial,sans-serif;color:#46606c;text-align:center;max-width:340px}
.sc-browser img{display:block;width:100%;height:auto}
.sc-phone{background:#111;border-radius:34px;padding:9px;box-shadow:0 0 0 2px #2a2a2a;width:100%}
.sc-phone img{display:block;width:100%;height:auto;border-radius:26px}
/* ---------- project stages ---------- */
.sc-project{position:relative;overflow:hidden;padding:130px 6% 140px}
.sc-project:before{content:"";position:absolute;left:-10%;right:-10%;top:-60px;height:120px;background:var(--bg-prev,var(--blue));border-radius:0 0 50% 50%/0 0 100% 100%}
.sc-project-inner{position:relative;max-width:1320px;margin:auto;display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center}
.sc-project.reverse .sc-project-inner{grid-template-columns:1fr 1.25fr}
.sc-project.reverse .sc-stage{order:2}
.sc-stage{position:relative}
.sc-num{position:absolute;left:-12px;top:-86px;font:700 clamp(150px,18vw,280px)/1 'Brand Condensed','Arial Narrow',Arial,sans-serif;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.28);pointer-events:none;user-select:none}
.sc-devices{position:relative;transform-style:preserve-3d;transition:transform .25s ease-out;padding-bottom:60px}
.sc-devices .sc-browser{box-shadow:0 44px 80px rgba(0,0,0,.45)}
.sc-devices .sc-phone{position:absolute;right:-26px;bottom:0;width:27%;rotate:5deg;box-shadow:0 0 0 2px #2a2a2a,0 34px 60px rgba(0,0,0,.5);animation:cdmfloat 7s ease-in-out infinite}
.sc-project.reverse .sc-devices .sc-phone{right:auto;left:-26px;rotate:-5deg}
.sc-browser img{transition:scale .9s cubic-bezier(.2,.8,.2,1);transform-origin:50% 0}
.sc-devices:hover .sc-browser img{scale:1.04}
.sc-copy{position:relative;z-index:2;color:#fff}
.sc-label{font:700 12px/1.4 Arial,sans-serif;letter-spacing:.16em;margin:0 0 18px;color:#fff}
.sc-label span{color:var(--sc-accent)}
.sc-copy h2{font-size:clamp(54px,6vw,100px);line-height:.96;color:#fff;letter-spacing:-.03em;margin-bottom:22px}
.sc-copy h2 i{color:var(--sc-accent)}
.sc-copy h2 .heading-dot{color:var(--sc-accent)}
.sc-lead{font-size:20px;color:#fff;margin:0 0 22px;max-width:520px}
.sc-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;padding:0}
.sc-chips li{font:700 12px/1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:11px 16px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35);transition:background .2s,translate .2s}
.sc-chips li:hover{background:#fff;color:var(--sc-ink);translate:0 -3px}
.sc-facts{margin:0 0 32px;display:grid;gap:14px}
.sc-facts div{background:rgba(0,0,0,.2);border-radius:18px;padding:18px 22px;border-left:5px solid var(--sc-accent)}
.sc-facts dt{font:700 11px/1.4 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--sc-accent);margin-bottom:6px}
.sc-facts dd{margin:0;color:#fff}
.sc-btn{display:inline-flex;align-items:center;gap:16px;background:var(--sc-accent);color:var(--sc-ink);font-weight:800;font-size:17px;padding:19px 32px;border-radius:999px;box-shadow:0 14px 30px rgba(0,0,0,.35);transition:translate .2s,box-shadow .2s,background .2s}
.sc-btn:hover{translate:0 -4px;box-shadow:0 22px 40px rgba(0,0,0,.45);background:#fff}
/* brand stages */
.sc-project.jg{--sc-accent:#fff;--sc-ink:#c8102e;--bg-prev:#0399d4;background:linear-gradient(135deg,#e4163a,#c8102e 45%,#8f0a20)}
.sc-project.jg .sc-label span,.sc-project.jg .sc-facts dt{color:#fff}
.sc-project.jg .sc-copy h2 i{color:transparent;-webkit-text-stroke:2px #fff}
.sc-project.dog{--sc-accent:#c8963e;--sc-ink:#182a1e;--bg-prev:#c8102e;background:linear-gradient(135deg,#2e4a35,#243b2a 50%,#182a1e)}
.sc-project.cdm{--sc-accent:#ff951a;--sc-ink:#00283b;--bg-prev:#243b2a;background:linear-gradient(135deg,#0399d4,#0288c4 55%,#006a99)}
.sc-project.cdm .sc-btn{color:#00283b}
/* ---------- principles ---------- */
.sc-principles{position:relative;background:#fff;padding:120px 6% 110px;text-align:left}
.sc-principles:before{content:"";position:absolute;left:-10%;right:-10%;top:-60px;height:120px;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0}
.sc-principles h2{font-size:clamp(46px,5.4vw,88px);color:var(--blue);line-height:.98;letter-spacing:-.03em;max-width:1000px}
.sc-principles h2 i{color:var(--orange)}.sc-principles h2 .heading-dot{color:var(--orange)}
.sc-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.sc-pgrid article{background:#eaf8fd;border-radius:24px;padding:36px 32px;transition:translate .3s,background .3s,box-shadow .3s}
.sc-pgrid article:hover{translate:0 -10px;background:var(--orange);box-shadow:0 24px 44px rgba(0,60,95,.25)}
.sc-pgrid span{font:700 64px/1 'Brand Condensed','Arial Narrow',Arial,sans-serif;color:var(--orange);transition:color .3s}
.sc-pgrid h3{font-size:34px;color:var(--blue);margin:14px 0 10px;transition:color .3s}
.sc-pgrid p{color:#35505e;margin:0;transition:color .3s}
.sc-pgrid article:hover span,.sc-pgrid article:hover h3,.sc-pgrid article:hover p{color:#fff}
.sc-note{margin:34px 0 0;color:#46606c;font-size:14px}
/* ---------- disclosure ---------- */
.sc-disclosure{background:linear-gradient(135deg,var(--orange),#f27a00);padding:110px 6%;color:#fff}
.sc-disclosure .sc-eyebrow{background:rgba(0,40,59,.55)}
.sc-disclosure h2{font-size:clamp(52px,6.6vw,110px);color:#fff;line-height:.96;letter-spacing:-.03em}
.sc-disclosure h2 i{color:transparent;-webkit-text-stroke:2.5px #fff}.sc-disclosure h2 .heading-dot{color:#fff}
.sc-disclosure p:last-child{font-size:20px;max-width:560px;margin-top:26px}
/* ---------- reveals ---------- */
.js-sc [data-sc]{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js-sc [data-sc=left]{transform:translateX(-80px)}
.js-sc [data-sc=right]{transform:translateX(80px)}
.js-sc [data-sc=up]{transform:translateY(46px)}
.js-sc [data-sc].in{opacity:1;transform:none}
@media(max-width:1000px){
 .sc-hero{grid-template-columns:1fr;padding:40px 6% 70px;min-height:0}
 .sc-hero-art{height:430px;margin-top:20px}
 .sc-project{padding:90px 6% 100px}
 .sc-project-inner,.sc-project.reverse .sc-project-inner{grid-template-columns:1fr;gap:44px}
 .sc-project.reverse .sc-stage{order:0}
 .sc-pgrid{grid-template-columns:1fr}
 .sc-num{top:-60px}
}
@media(max-width:600px){
 .sc-hero h1,.sc-hero .hero-slogan{font-size:19vw}
 .sc-hero-art{height:340px}
 .sc-float.f3{display:none}
 .sc-devices .sc-phone,.sc-project.reverse .sc-devices .sc-phone{width:32%;right:-6px;left:auto}
 .sc-copy h2{font-size:17vw}
 .sc-btn,.btn-big{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.sc-disc,.sc-devices .sc-phone,.sc-float.f3 .sc-phone{animation:none}.js-sc [data-sc]{opacity:1;transform:none}}
.sc-hero h1,.sc-hero .hero-slogan{font-size:clamp(60px,6.9vw,116px)}
.sc-hero-actions .btn-big{border-radius:999px;background:var(--orange);color:var(--ink)}
.projects-page header .desktop-nav a[aria-current="page"]{background:none!important;box-shadow:none!important;color:#fff!important;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:8px;text-decoration-thickness:3px}
.projects-page header .desktop-nav a:last-child{background:var(--orange)!important;color:var(--ink)!important}
.sc-num{display:none}
@media(min-width:1001px){.sc-num{display:block}}
.projects-page .projects-cta{background:linear-gradient(135deg,#00405c,#00283b);color:#fff}
.projects-page .projects-cta .section-label,.projects-page .projects-cta p,.projects-page .projects-cta h2,.projects-page .phone-link{color:#fff}
.projects-page .projects-cta h2 i,.projects-page .projects-cta .heading-dot{color:var(--orange)}
.projects-page .projects-cta .btn-light{background:var(--orange);border-color:var(--orange);color:#00283b;border-radius:999px;font-weight:800;padding:18px 30px}
.projects-page .projects-cta .btn-light:hover{background:#fff;color:#00283b}

/* ===== closing call to action v2: big blue stage, orange disc, huge headline ===== */
.projects-page .projects-cta{position:relative;overflow:hidden;display:block;text-align:center;background:linear-gradient(160deg,#0399d4,#0288c4 55%,#00648d);color:#fff;padding:150px 6% 150px}
.projects-page .projects-cta:before{content:"";position:absolute;left:50%;top:50%;width:min(980px,90vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffb04d,var(--orange) 50%,#f27a00);opacity:.96;animation:cdmfloat 10s ease-in-out infinite}
.projects-page .projects-cta:after{content:"";position:absolute;left:50%;top:50%;width:min(1180px,108vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:3px dashed rgba(255,255,255,.4);animation:cdmspin2 80s linear infinite;pointer-events:none}
@keyframes cdmspin2{to{rotate:360deg}}
.projects-page .projects-cta>div{position:relative;z-index:2;max-width:860px;margin:0 auto}
.projects-page .projects-cta .section-label{display:inline-block;background:#00283b;color:#fff;padding:9px 18px;border-radius:999px;letter-spacing:.16em;margin-bottom:26px}
.projects-page .projects-cta h2{font-size:clamp(64px,9vw,150px);line-height:.92;color:#fff;letter-spacing:-.03em;margin-bottom:34px;text-shadow:0 4px 0 rgba(0,70,110,.25)}
.projects-page .projects-cta h2 i{color:#00283b}
.projects-page .projects-cta h2 .heading-dot{color:#fff}
.projects-page .projects-cta p{color:#fff;font-size:21px;font-weight:600;max-width:560px;margin:0 auto 34px}
.projects-page .projects-cta .btn-light{display:inline-flex;gap:18px;align-items:center;background:#00283b;border-color:#00283b;color:#fff;border-radius:999px;font-weight:800;font-size:19px;padding:22px 40px;box-shadow:0 18px 38px rgba(0,40,59,.45)}
.projects-page .projects-cta .btn-light:hover{background:#fff;color:#00283b;translate:0 -4px}
.projects-page .projects-cta .phone-link{display:block;margin-top:26px;color:#00283b;font-weight:800;font-size:19px;text-decoration:underline;text-underline-offset:5px}
@media(max-width:700px){.projects-page .projects-cta{padding:100px 6%}.projects-page .projects-cta h2{font-size:17vw}.projects-page .projects-cta .btn-light{width:100%;justify-content:center}}
.projects-page .projects-cta h2{color:#00283b;text-shadow:none}
.projects-page .projects-cta h2 i{color:#fff;text-shadow:0 5px 0 #00283b}
.projects-page .projects-cta h2 .heading-dot{color:#00283b}
.projects-page .projects-cta p{color:#00283b}
/* phone call button */
.projects-page .projects-cta .call-btn{display:inline-flex;align-items:center;gap:16px;margin-top:22px;padding:10px 32px 10px 10px;border-radius:999px;background:#fff;color:#00283b;text-decoration:none;box-shadow:0 18px 38px rgba(0,40,59,.35);transition:translate .2s,box-shadow .2s}
.projects-page .projects-cta .call-btn:hover{translate:0 -4px;box-shadow:0 26px 46px rgba(0,40,59,.45)}
.ph-badge{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#00283b;flex:none;animation:phring 2.4s ease-in-out infinite}
.ph-ico{width:28px;height:28px;fill:#fff;transform-origin:50% 50%;animation:phshake 2.4s ease-in-out infinite}
.ph-text{display:flex;flex-direction:column;text-align:left;line-height:1.2}
.ph-text small{font:700 11px/1.4 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#a74700}
.ph-text b{font:800 21px/1.25 Arial,sans-serif;color:#00283b;letter-spacing:-.01em}
@keyframes phring{0%,60%,100%{box-shadow:0 0 0 0 rgba(0,40,59,.35)}75%{box-shadow:0 0 0 14px rgba(0,40,59,0)}}
@keyframes phshake{0%,55%,100%{rotate:0deg}60%{rotate:-14deg}65%{rotate:12deg}70%{rotate:-10deg}75%{rotate:8deg}80%{rotate:0deg}}
@media(max-width:700px){.projects-page .projects-cta .call-btn{width:100%;justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.ph-badge,.ph-ico{animation:none}}
/* clickable phone illustration */
.projects-page .projects-cta .call-phone{position:absolute;right:max(24px,calc((100vw - 1320px)/2));bottom:70px;z-index:3;display:block;width:230px;margin:0;padding:0;background:none;box-shadow:none;transform-origin:50% 100%;rotate:9deg;animation:cpshake 3.2s ease-in-out infinite;filter:drop-shadow(0 34px 34px rgba(0,40,59,.5));transition:scale .25s}
.projects-page .projects-cta .call-phone:hover,.projects-page .projects-cta .call-phone:focus-visible{scale:1.07;animation-play-state:paused}
.cp-body{display:block;position:relative;background:#101820;border-radius:38px;padding:11px;box-shadow:inset 0 0 0 2px #2a3944}
.cp-notch{position:absolute;left:50%;top:15px;width:68px;height:18px;margin-left:-34px;background:#101820;border-radius:12px;z-index:2}
.cp-screen{display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(180deg,#0399d4,#00405c);border-radius:28px;padding:46px 14px 20px;min-height:400px;color:#fff;gap:2px}
.cp-screen small{font:700 10px/1.4 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#cfeefb;margin-bottom:12px}
.cp-avatar{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:var(--orange);color:#00283b;font:700 46px/1 'Brand Condensed','Arial Narrow',Arial,sans-serif;margin-bottom:10px;box-shadow:0 0 0 0 rgba(255,149,26,.6);animation:cpring 1.6s ease-out infinite}
.cp-screen b{font:700 30px/1.1 'Brand Condensed','Arial Narrow',Arial,sans-serif;letter-spacing:.01em}
.cp-num{font:700 15px/1.4 Arial,sans-serif;letter-spacing:.04em}
.cp-actions{display:flex;gap:34px;margin:30px 0 14px}
.cp-actions i{display:grid;place-items:center;width:54px;height:54px;border-radius:50%}
.cp-no{background:#e5484d;position:relative}
.cp-no:after{content:"";width:22px;height:4px;border-radius:2px;background:#fff}
.cp-yes{background:#2fbf71;animation:cpbounce 1.2s ease-in-out infinite}
.cp-yes svg{width:26px;height:26px;fill:#fff}
.cp-screen em{font:italic 700 13px/1.4 Georgia,serif;color:#ffd9a6}
@keyframes cpshake{0%,62%,100%{rotate:9deg}66%{rotate:3deg}70%{rotate:15deg}74%{rotate:3deg}78%{rotate:14deg}82%{rotate:6deg}88%{rotate:9deg}}
@keyframes cpring{0%{box-shadow:0 0 0 0 rgba(255,149,26,.65)}100%{box-shadow:0 0 0 26px rgba(255,149,26,0)}}
@keyframes cpbounce{50%{translate:0 -5px}}
@media(max-width:1180px){.projects-page .projects-cta .call-phone{position:relative;right:auto;bottom:auto;margin:50px auto 0;rotate:0deg;animation:none}}
@media(prefers-reduced-motion:reduce){.projects-page .projects-cta .call-phone,.cp-avatar,.cp-yes{animation:none}}
.projects-page .projects-cta .call-phone,.projects-page .projects-cta .call-phone *{text-decoration:none!important}
@media(min-width:1181px){
 .projects-page .projects-cta>div{margin-left:calc(50% - 640px);margin-right:auto;max-width:720px;text-align:center}
 .projects-page .projects-cta h2{font-size:clamp(60px,7.2vw,116px)}
 .projects-page .projects-cta:before{translate:-62% -50%}
 .projects-page .projects-cta:after{translate:-57% -50%}
}
.projects-page .projects-cta>div:last-child{position:relative}
@media(min-width:1181px){
 .projects-page .projects-cta>div{margin-left:calc(50% - 600px)}
 .projects-page .projects-cta .call-phone{right:max(40px,calc((100vw - 1320px)/2 + 20px));bottom:auto;top:50%;margin-top:-230px}
}
.cp-screen b{font-size:27px;line-height:1.05;margin-bottom:6px}
.cp-num{margin-top:4px}
.sc-principles,.projects-cta{overflow-x:clip}.projects-page main{overflow-x:clip}

/* round 5: link to each project write-up */
.sc-more{display:inline-block;margin:18px 0 0 22px;font-weight:800;color:inherit;text-decoration:underline;text-decoration-color:var(--sun);text-underline-offset:5px}
@media(max-width:760px){.sc-more{display:block;margin:16px 0 0}}
/* round 26: still logo on the phone */
.call-phone .cp-logo{display:block;width:130px;height:auto;margin:-4px 0 6px}
/* end round 26 */