/* project 3 */
#cs3{--slate:#343F4C; --slate2:#2A333E; --teal:#33C3D0; --navy:#25306C; --call:#3F74C1; --arrow:#1E88E5; --gray:#EEF1F5; --warm:#FDF7EE; --gold:#F7C873; background:var(--gray); color:#1F2933}
.c3-hero{background:var(--slate); color:#F4F7FA; padding:64px 0 0; text-align:center; overflow:hidden}
.c3l{color:#B9C6D3}
.c3-kick{font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin:36px 0 8px; font-weight:600}
.c3-hero h1{font-size:clamp(40px,6.4vw,84px); margin:0 0 18px; font-weight:700; max-width:16ch; margin-left:auto; margin-right:auto}
.c3-lead{max-width:56ch; margin:0 auto 56px; color:#C9D3DD; font-size:clamp(17px,1.8vw,21px)}
.c3-facts{background:#fff; border-bottom:1px solid #DDE3EA}
.c3-facts .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding-top:40px; padding-bottom:40px; font-size:16px}
.c3-facts span{display:block; font-size:14px; color:#6B7785; margin-bottom:4px}
.c3-band{padding:104px 0}
.c3-band.light{background:var(--gray)}
.c3-band.slate{background:var(--slate); color:#F4F7FA}
.c3-band.warm{background:var(--warm)}
.c3n p{color:#46515E}
.cap.c3 h2{color:#F4F7FA} .cap.c3 p{color:#C9D3DD}
.cap.c3d h2{color:#1F2933} .cap.c3d p{color:#56616E}
/* before/after drawings */
.c3bna .bna-col{background:#fff; color:#1F2933; box-shadow:0 24px 48px -30px rgba(0,0,0,.6)}
.c3bna .bna-list{color:#56616E}
.c3bna .bna-list li{border-top-color:#E4E9EF}
.c3bna .bna-list li::before{background:#B8C2CD}
.c3bna .bna-col:last-child .bna-list li::before{background:var(--teal)}
.c3bna .bna-tag.was{background:#E4E9EF; color:#56616E}
.c3t{background:var(--teal)!important; color:#fff!important}
.two-win{display:grid; grid-template-columns:1fr 34px 1fr; align-items:center; gap:6px; aspect-ratio:16/10; background:#F1F4F8; border-radius:10px; padding:14px}
.win{background:#fff; border:1px solid #D5DCE4; border-radius:6px; height:78%; padding:10px; display:flex; flex-direction:column; gap:6px}
.win.slide{background:#FFFDF6}
.w-h{margin:0; font-size:12px; font-weight:700; color:#3A4552}
.win i,.w-row i{display:block; height:5px; background:#D5DCE4; border-radius:3px}
.win i.s{width:60%}
.w-shot{flex:1; background:#E4E9EF; border-radius:4px; margin-top:4px}
.swap{display:flex; flex-direction:column; gap:6px; align-items:center}
.swap b{display:block; width:26px; height:3px; background:#8A96A3; position:relative}
.swap b:first-child::after{content:""; position:absolute; right:-2px; top:-4px; border-left:7px solid #8A96A3; border-top:5px solid transparent; border-bottom:5px solid transparent}
.swap b:last-child::after{content:""; position:absolute; left:-2px; top:-4px; border-right:7px solid #8A96A3; border-top:5px solid transparent; border-bottom:5px solid transparent}
.w-bar{height:12px; background:#46515E; border-radius:3px}
.w-row{display:grid; grid-template-columns:18px 1fr 1fr; gap:6px; align-items:center; padding:6px 0}
.w-row em{display:block; width:18px; height:14px; background:var(--teal); border-radius:3px}
.w-btns{display:flex; gap:6px; justify-content:center; margin-top:auto}
.w-btns span{width:40px; height:12px; border-radius:3px; background:#F2C230}
.w-btns span + span{background:var(--teal)}
.one-win{position:relative; aspect-ratio:16/10; background:#fff; border:1px solid #D5DCE4; border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:6px}
.one-win .w-row em.hl{box-shadow:0 0 0 2px #E53935}
.call{position:absolute; left:34%; top:26%; width:56%; background:#fff; border:2.5px solid var(--call); border-radius:14px; padding:12px 14px; font-family:"Merriweather", Georgia, serif; font-size:clamp(12px,1.2vw,15px); line-height:1.35; color:#1F2933; box-shadow:0 8px 20px -10px rgba(0,0,0,.3)}
.call .arr{position:absolute; left:-44px; top:8px; width:36px; height:14px; background:var(--arrow)}
.call .arr::before{content:""; position:absolute; left:-12px; top:-7px; border-right:14px solid var(--arrow); border-top:14px solid transparent; border-bottom:14px solid transparent}
/* walkthrough */
.walk{display:flex; flex-direction:column; gap:96px; max-width:1120px; margin:0 auto}
.step{display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:center}
.step.flip{grid-template-columns:1fr 340px}
.step.flip .st-t{order:2}
.st-t{background:#fff; border:2.5px solid var(--call); border-radius:18px; padding:26px 28px; position:relative}
.st-n{display:inline-block; font-family:var(--display); font-weight:700; font-size:14px; color:#fff; background:var(--slate); padding:4px 12px; border-radius:999px; margin-bottom:12px}
.st-t h3{font-size:26px; margin-bottom:8px; color:#1F2933}
.st-t p{margin:0; color:#46515E; font-size:16px}
.step .laptop{max-width:none; width:100%}
.c3g{max-width:1080px; margin:0 auto 32px}
.wide1{max-width:1080px; margin:0 auto}
.c3-goals{list-style:none; margin:0 auto; padding:0; max-width:820px; border-top:1px solid #D5DCE4}
.c3-goals li{display:grid; grid-template-columns:150px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid #D5DCE4; font-size:18px}
.c3-goals b{font-family:var(--display); font-size:22px; color:var(--navy)}
.c3res{grid-template-columns:repeat(2,1fr)!important; max-width:760px}
.c3res strong{color:var(--teal)!important}
.c3res strong.was{color:#F4F7FA!important}
.c3res span{color:#C9D3DD!important}
.c3res small{color:#AEBBC8!important}
.c3rn{color:#AEBBC8!important; max-width:66ch!important}
.c3nav{border-top:1px solid #D5DCE4}
@media (max-width:900px){
  .c3-facts .wrap{grid-template-columns:1fr 1fr}
  .step,.step.flip{grid-template-columns:1fr; gap:28px}
  .step.flip .st-t{order:0}
  .walk{gap:64px}
  .c3-band{padding:72px 0}
  .c3-goals li{grid-template-columns:1fr; gap:4px}
}
@media (max-width:560px){.c3res{grid-template-columns:1fr!important}.call .arr{display:none}.call{left:12%; width:76%}}


.c3-cs{background:#fff; border-bottom:1px solid #DDE3EA}
.c3-cs .wrap{display:grid; grid-template-columns:1fr 1fr; gap:0; padding-top:0; padding-bottom:0}
.cs-col{padding:72px 56px 72px 0}
.cs-col.so{padding:72px 0 72px 56px; border-left:1px solid #DDE3EA}
.cs-lab{display:inline-block; margin:0 0 18px; font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:5px 14px; border-radius:999px}
.ch .cs-lab{background:#FCE8E6; color:#B3261E}
.so .cs-lab{background:#DDF5F7; color:#0E7C86}
.cs-col h2{font-size:clamp(26px,2.8vw,36px); color:#1F2933; margin-bottom:14px; max-width:18ch}
.cs-col p:last-child{margin:0; color:#46515E; font-size:17px; max-width:48ch}
@media (max-width:900px){.c3-cs .wrap{grid-template-columns:1fr}.cs-col,.cs-col.so{padding:48px 0}.cs-col.so{border-left:none; border-top:1px solid #DDE3EA}}
.laptop .screen img.full{aspect-ratio:auto; object-fit:initial}