/* /work/ Our work (builder D, 11 Nov 2026). The four sites big, the ad wall, six real emails, links to the services. */

/* ---------- hero: index of the four sites on the sky band ---------- */
.wo-hero .p-hero-in{padding-bottom:60px}
.wo-stage{padding-bottom:88px}
.wo-stage .p-band{top:130px}
.wo-index{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.wo-card{display:flex;flex-direction:column;border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 2px 6px rgba(3,46,74,.06),0 30px 60px rgba(3,46,74,.18);transition:transform .6s var(--ease)}
.wo-card:hover{transform:translateY(-5px)}
.wo-bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 12px;background:#F2F6F9;border-bottom:1px solid #E1E9EF}
.wo-bar i{width:7px;height:7px;border-radius:50%;background:#D3DDE6}
.wo-bar i:first-child{background:#FF8A80}.wo-bar i:nth-child(2){background:#FFD27A}.wo-bar i:nth-child(3){background:#7FDCA4}
.wo-shot{display:block;height:180px;overflow:hidden;background:#0B0B12}
.wo-shot img{width:295px;height:184px;max-width:none}
.wo-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px 17px 18px}
.wo-meta > span:first-child{display:flex;flex-direction:column;line-height:1.3}
.wo-meta b{font-size:18px;font-weight:700;letter-spacing:-.015em}
.wo-meta small{margin-top:2px;font-size:13.5px;font-weight:500;color:var(--ink-3)}
.wo-go{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--ice);color:var(--sky-deep);transition:background .3s,color .3s}
.wo-card:hover .wo-go{background:var(--navy);color:#fff}
.wo-proof{margin-top:60px}
.wo-proof .t-pf{border-left-color:rgba(3,46,74,.22)}
.wo-proof .t-pf span{color:rgba(3,46,74,.84)}

/* ---------- the four sites ---------- */
.cs-sec{padding:116px 0 0;background:#fff}
.cs-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:56px}
.cs-sec-head .h2{margin-top:22px}
.cs-sec-lead{max-width:330px;padding-bottom:10px;font-size:19px;line-height:1.5;font-weight:500;color:var(--ink-2)}
.cs + .cs{margin-top:32px}
.cs-panel{position:relative;overflow:hidden;border-radius:44px;padding:52px 56px 0}
.cs-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.26) 1.2px,transparent 1.4px);background-size:22px 22px}
.cs-head{position:relative;z-index:1;display:grid;grid-template-columns:400px 1fr;gap:64px;align-items:start}
.cs-no{display:block;font-size:156px;line-height:.78;font-weight:900;letter-spacing:-.07em;margin-left:-8px}
.cs-name{position:relative;margin-top:-52px;font-size:58px;line-height:1.02;font-weight:700;letter-spacing:-.04em}
.cs-tags{display:flex;gap:8px;margin-top:20px}
.cs-about{padding-top:12px}
.cs-line{max-width:620px;font-size:19px;line-height:1.55;font-weight:500}
.cs-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px;max-width:660px}
.cs-spec{position:relative;padding:14px 18px 15px;border-radius:18px}
.cs-spec dt{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cs-spec dd{margin-top:5px;font-size:24px;line-height:1.1;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.cs-spec-ad dd a{border-bottom:2px solid currentColor}
.cs-spec-ad img{position:absolute;right:12px;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.cs-links{display:flex;align-items:center;gap:26px;margin-top:26px}
.cs-more{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;font-weight:700;padding-bottom:3px;border-bottom:2px solid currentColor}
.cs-stage{position:relative;z-index:1;height:560px;margin-top:52px}
.cs-browser{position:absolute;top:0;width:880px}
.cs-l .cs-browser{left:0}
.cs-r .cs-browser{right:0}
.cs-view{--vh:600px;position:relative;height:600px;overflow:hidden;background:#0B0B12}
.cs-tall{width:880px;height:3789px;max-width:none}
.cs-phone{position:absolute;bottom:40px;width:250px}
.cs-l .cs-phone{left:800px}
.cs-r .cs-phone{left:22px}
.cs-phone .ph-scr{width:236px;height:511px;border-radius:25px}
.cs-phone img{width:236px;height:511px}

/* colours: sky, navy, deep, ice */
.cs-c1 .cs-panel{color:var(--navy);background:radial-gradient(760px 460px at 18% 0%,rgba(255,255,255,.42),rgba(255,255,255,0) 70%),linear-gradient(150deg,#86D0FB 0%,#38AEF5 55%,#1DA1F2 100%)}
.cs-c1 .cs-no{color:rgba(255,255,255,.5)}
.cs-c1 .cs-line{color:rgba(3,46,74,.86)}
.cs-c1 .cs-spec{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.78)}
.cs-c1 .cs-spec dt{color:rgba(3,46,74,.64)}
.cs-c2 .cs-panel{color:#fff;background:radial-gradient(760px 460px at 82% 0%,rgba(29,161,242,.32),rgba(29,161,242,0) 70%),linear-gradient(150deg,#0A3D5F 0%,#032E4A 55%,#021C2E 100%)}
.cs-c2 .cs-dots{background-image:radial-gradient(rgba(29,161,242,.3) 1.2px,transparent 1.4px)}
.cs-c2 .cs-no{color:#0C4C76}
.cs-c2 .cs-line{color:rgba(255,255,255,.82)}
.cs-c2 .cs-spec{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13)}
.cs-c2 .cs-spec dt{color:var(--sky)}
.cs-c3 .cs-panel{color:#fff;background:radial-gradient(760px 460px at 18% 0%,rgba(127,205,251,.45),rgba(127,205,251,0) 70%),linear-gradient(150deg,#1590DD 0%,#0B79BC 55%,#0A6DAE 100%)}
.cs-c3 .cs-no{color:rgba(255,255,255,.2)}
.cs-c3 .cs-line{color:rgba(255,255,255,.88)}
.cs-c3 .cs-spec{background:rgba(2,28,46,.2);border:1px solid rgba(255,255,255,.16)}
.cs-c3 .cs-spec dt{color:#A9DEFF}
.cs-c4 .cs-panel{color:var(--navy);background:radial-gradient(760px 460px at 82% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),linear-gradient(150deg,#EEF8FF 0%,#D2ECFD 100%)}
.cs-c4 .cs-dots{background-image:radial-gradient(rgba(29,161,242,.2) 1.2px,transparent 1.4px)}
.cs-c4 .cs-no{color:#B4DDFB}
.cs-c4 .cs-line{color:var(--ink-2)}
.cs-c4 .cs-spec{background:#fff;border:1px solid #DCEDFA}
.cs-c4 .cs-spec dt{color:var(--sky-deep)}
.cs-c4 .tag{background:#fff;box-shadow:0 4px 12px rgba(3,46,74,.06)}

/* live: the tall screenshots scroll slowly; ?static rests at the top */
@keyframes csscroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + var(--vh)))}}
.js .cs.in .cs-tall{animation:csscroll 48s ease-in-out 1.4s infinite alternate}
.js .cs-stage:hover .cs-tall{animation-play-state:paused}

/* ---------- ad wall ---------- */
.wa-sec{position:relative;overflow:hidden;margin-top:120px;padding:104px 0 100px;color:#fff;background:
  radial-gradient(circle at calc(100% - 150px) 30px, rgba(0,0,0,0) 449px, rgba(29,161,242,.2) 450px, rgba(29,161,242,.2) 451.5px, rgba(0,0,0,0) 452.5px),
  radial-gradient(circle at calc(100% - 150px) 30px, rgba(0,0,0,0) 649px, rgba(29,161,242,.12) 650px, rgba(29,161,242,.12) 651.5px, rgba(0,0,0,0) 652.5px),
  radial-gradient(900px 560px at 85% 0%, rgba(29,161,242,.26), rgba(29,161,242,0) 70%),
  radial-gradient(800px 500px at 20% 90%, rgba(29,161,242,.16), rgba(29,161,242,0) 70%),
  linear-gradient(180deg,#053658 0%,#032E4A 40%,#021C2E 100%)}
.wa-sec .acc{color:var(--sky)}
.wa-head{display:grid;grid-template-columns:1fr 400px;gap:60px;align-items:end;margin-bottom:52px}
.wa-head .h2{margin-top:22px}
.wa-p{margin-top:20px;max-width:540px;font-size:19px;line-height:1.55;font-weight:500;color:rgba(255,255,255,.8)}
.wa-fact{padding:26px 28px 24px;border-radius:26px;color:var(--navy);background:radial-gradient(300px 220px at 85% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),linear-gradient(160deg,#8DD3FB 0%,#3DB0F5 60%,#1DA1F2 100%);box-shadow:0 30px 60px rgba(1,14,26,.45)}
.wa-fact b{display:block;font-size:60px;line-height:1;font-weight:700;letter-spacing:-.045em}
.wa-fact p{margin-top:10px;font-size:15.5px;line-height:1.5;font-weight:600;color:rgba(3,46,74,.86)}
.wa-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:30px 20px}
.wa-img{display:block;position:relative;width:232px;height:232px;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 36px rgba(1,14,26,.5);transition:transform .5s var(--ease)}
.wa-img img{width:232px;height:232px;max-width:none}
.wa-ad:hover .wa-img{transform:translateY(-5px)}
.wa-cap{display:flex;flex-direction:column;margin-top:14px;padding-left:2px;line-height:1.3}
.wa-cap b{font-size:16px;font-weight:700}
.wa-cap small{margin-top:2px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.6)}
.wa-foot{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:52px;padding-top:32px;border-top:1px solid rgba(255,255,255,.12)}
.wa-foot p{font-size:17px;line-height:1.5;font-weight:500;color:rgba(255,255,255,.8)}

/* ---------- emails ---------- */
.we-sec{position:relative;overflow:hidden;padding:104px 0 104px;color:var(--navy);background:
  radial-gradient(circle at calc(100% - 150px) 30px, rgba(0,0,0,0) 449px, rgba(255,255,255,.34) 450px, rgba(255,255,255,.34) 451.5px, rgba(0,0,0,0) 452.5px),
  radial-gradient(circle at calc(100% - 150px) 30px, rgba(0,0,0,0) 649px, rgba(255,255,255,.2) 650px, rgba(255,255,255,.2) 651.5px, rgba(0,0,0,0) 652.5px),
  radial-gradient(900px 520px at 85% 0%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%),
  radial-gradient(800px 500px at 30% 85%, rgba(255,255,255,.3), rgba(255,255,255,0) 70%),
  linear-gradient(180deg,#80CFFB 0%,#45B5F6 45%,#1DA1F2 100%)}
.we-head{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:end;margin-bottom:52px}
.we-head .h2{margin-top:22px}
.we-p{margin-top:22px;max-width:560px;font-size:19px;line-height:1.55;font-weight:500;color:rgba(3,46,74,.86)}
.we-nums{display:flex;gap:16px}
.we-n{min-width:176px;padding:22px 24px 20px;border-radius:24px;background:#fff;box-shadow:var(--sh-card)}
.we-n b{display:block;font-size:52px;line-height:1;font-weight:700;letter-spacing:-.045em}
.we-n span{display:block;margin-top:8px;font-size:15px;font-weight:600;color:var(--ink-2)}
/* email rail: shared .ems-rail loop from site.css (real MultiFunded emails + demo designs), captions with a source tag */
.we-rail{margin-top:-16px}
.we-row{gap:24px;padding-right:24px}
.we-item{flex:none;width:190px}
.we-ph{width:190px;padding:7px;border-radius:31px;transition:transform .6s var(--ease)}
.we-ph .ph-scr{width:176px;height:375px;border-radius:24px}
.we-ph img{width:176px;height:375px}
.we-item:hover .we-ph{transform:translateY(-6px)}
.we-cap{display:flex;flex-direction:column;margin-top:18px;padding-right:6px;line-height:1.3}
.we-tag{align-self:flex-start;display:inline-flex;align-items:center;height:24px;margin-bottom:10px;padding:0 10px;border-radius:99px;background:var(--navy);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.we-tag-demo{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1px rgba(3,46,74,.14)}
.we-cap small{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(3,46,74,.68)}
.we-cap b{margin-top:5px;font-size:15px;font-weight:700}
.we-foot{display:flex;justify-content:center;margin-top:52px}

/* ---------- services ---------- */
.ws-sec{padding:116px 0 72px;background:#fff}
.ws-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px}
.ws-head .h2{margin-top:22px}
.ws-lead{max-width:360px;padding-bottom:8px;font-size:18px;line-height:1.55;font-weight:500;color:var(--ink-2)}
.ws-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ws{position:relative;display:flex;flex-direction:column;min-height:340px;padding:28px 26px 26px;border-radius:30px;overflow:hidden;box-shadow:0 24px 50px rgba(3,46,74,.14);transition:transform .6s var(--ease)}
.ws:hover{transform:translateY(-5px)}
.ws-top{display:flex;justify-content:space-between;align-items:flex-start}
.ws-no{font-size:64px;line-height:.85;font-weight:900;letter-spacing:-.06em}
.ws-ic{width:112px;height:112px;margin:-20px -18px 0 0}
.ws-t{margin-top:auto;font-size:28px;line-height:1.05;font-weight:700;letter-spacing:-.03em}
.ws-p{margin-top:10px;font-size:15.5px;line-height:1.5;font-weight:500;opacity:.88}
.ws-more{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-size:15px;font-weight:700}
.ws-more .arr{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;transition:transform .5s var(--ease)}
.ws:hover .ws-more .arr{transform:translateX(4px)}
.ws-1{color:var(--navy);background:radial-gradient(300px 260px at 50% 0%,rgba(255,255,255,.4),rgba(255,255,255,0) 70%),linear-gradient(175deg,#74C9FA 0%,#33ACF4 60%,#1DA1F2 100%)}
.ws-1 .ws-no{color:var(--navy)}
.ws-1 .arr{background:var(--navy);color:#fff}
.ws-2{color:#fff;background:radial-gradient(300px 260px at 50% 0%,rgba(29,161,242,.3),rgba(29,161,242,0) 70%),linear-gradient(175deg,#0A3D5F 0%,#032E4A 60%,#021C2E 100%)}
.ws-2 .ws-no{color:var(--sky)}
.ws-2 .arr{background:var(--sky);color:var(--navy)}
.ws-3{color:var(--navy);background:radial-gradient(300px 260px at 50% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),linear-gradient(175deg,#EEF8FF 0%,#D4ECFD 100%)}
.ws-3 .ws-no{color:var(--sky)}
.ws-3 .arr{background:var(--navy);color:#fff}
.ws-4{color:#fff;background:radial-gradient(300px 260px at 50% 0%,rgba(127,205,251,.4),rgba(127,205,251,0) 70%),linear-gradient(175deg,#1388D2 0%,#0A6DAE 60%,#075C95 100%)}
.ws-4 .ws-no{color:#fff}
.ws-4 .arr{background:#fff;color:var(--deep)}
.ws-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin-top:34px;font-size:16px;font-weight:500;color:var(--ink-2)}
.ws-note a{font-weight:700;color:var(--navy);padding-bottom:2px;border-bottom:2px solid var(--sky)}
.ws-note a:hover{color:var(--sky-deep)}

/* ---------- PHONE (designed at 390) ---------- */
@media (max-width:760px){
  .wo-hero .p-hero-in{padding-bottom:40px}
  .wo-stage{padding-bottom:56px}
  .wo-stage .p-band{top:92px}
  .wo-index{grid-template-columns:1fr 1fr;gap:12px}
  .wo-card{border-radius:16px}
  .wo-bar{height:18px;gap:4px;padding:0 9px}
  .wo-bar i{width:5px;height:5px}
  .wo-shot{height:104px}
  .wo-shot img{width:100%;height:auto}
  .wo-meta{padding:10px 12px 12px}
  .wo-meta b{font-size:15px}
  .wo-meta small{font-size:11.5px}
  .wo-go{display:none}
  .wo-proof{margin-top:40px}

  .cs-sec{padding-top:72px}
  .cs-sec-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:32px}
  .cs-sec-head .h2-xl{font-size:38px}
  .cs-sec-lead{padding-bottom:0;font-size:16px}
  .cs + .cs{margin-top:20px}
  .cs-panel{border-radius:28px;padding:30px 20px 0}
  .cs-head{grid-template-columns:1fr;gap:18px}
  .cs-no{font-size:100px;margin-left:-5px}
  .cs-name{margin-top:-34px;font-size:38px}
  .cs-tags{margin-top:14px}
  .cs-about{padding-top:0}
  .cs-line{font-size:16px}
  .cs-specs{gap:8px;margin-top:18px}
  .cs-spec{padding:11px 12px 12px;border-radius:14px}
  .cs-spec dt{font-size:10px;letter-spacing:.06em}
  .cs-spec dd{font-size:16.5px;white-space:normal}
  .cs-spec-ad img{display:none}
  .cs-links{flex-direction:column;align-items:stretch;gap:16px;margin-top:20px}
  .cs-links .btn{justify-content:space-between}
  .cs-more{align-self:flex-start}
  .cs-stage{height:322px;margin-top:28px}
  .cs-browser{width:310px;border-radius:12px}
  .cs-browser .bw-bar{height:30px;gap:8px;padding:0 10px}
  .cs-browser .dots{width:34px;gap:4px}
  .cs-browser .dots i{width:6px;height:6px}
  .cs-browser .bw-url{height:20px;font-size:10.5px;border-radius:6px}
  .cs-browser .bw-sp{width:12px}
  .cs-view{--vh:340px;height:340px}
  .cs-tall{width:310px;height:1335px}
  .cs-phone{bottom:22px;width:118px;padding:5px;border-radius:20px}
  .cs-l .cs-phone{left:auto;right:-6px}
  .cs-r .cs-phone{left:-6px}
  .cs-phone .ph-scr{width:108px;height:234px;border-radius:16px}
  .cs-phone img{width:108px;height:234px}

  .wa-sec{margin-top:72px;padding:72px 0 72px}
  .wa-head{grid-template-columns:1fr;gap:28px;margin-bottom:34px}
  .wa-p{font-size:16px}
  .wa-fact{padding:20px 22px;border-radius:22px}
  .wa-fact b{font-size:46px}
  .wa-fact p{font-size:14.5px}
  .wa-grid{grid-template-columns:1fr 1fr;gap:22px 14px}
  .wa-img{width:168px;height:168px;border-radius:18px}
  .wa-img img{width:168px;height:168px}
  .wa-cap{margin-top:10px}
  .wa-cap b{font-size:14.5px}
  .wa-cap small{font-size:12.5px}
  .wa-foot{flex-direction:column;align-items:stretch;gap:18px;margin-top:36px;padding-top:26px}
  .wa-foot p{font-size:15.5px}
  .wa-foot .btn{justify-content:space-between}

  .we-sec{padding:72px 0 72px}
  .we-head{grid-template-columns:1fr;gap:26px;margin-bottom:34px}
  .we-p{font-size:16px}
  .we-nums{gap:12px}
  .we-n{flex:1;min-width:0;padding:16px 18px 15px;border-radius:20px}
  .we-n b{font-size:40px}
  .we-n span{font-size:13.5px}
  .we-rail{margin-top:-14px}
  .we-row{gap:14px;padding-right:20px}
  .we-item{width:156px;scroll-snap-align:start}
  .we-ph{width:156px;padding:6px;border-radius:26px}
  .we-ph .ph-scr{width:144px;height:307px;border-radius:20px}
  .we-ph img{width:144px;height:307px}
  .we-tag{height:22px;margin-bottom:8px;font-size:11px}
  .we-cap{margin-top:12px}
  .we-cap small{font-size:10.5px}
  .we-cap b{font-size:14px}
  .we-foot{margin-top:36px}
  .we-foot .btn{width:100%;justify-content:space-between}

  .ws-sec{padding:72px 0 40px}
  .ws-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:28px}
  .ws-lead{padding-bottom:0;font-size:16px}
  .ws-grid{grid-template-columns:1fr;gap:12px}
  .ws{min-height:0;padding:22px 22px 22px;border-radius:24px}
  .ws-no{font-size:48px}
  .ws-ic{width:84px;height:84px;margin:-14px -10px -20px 0}
  .ws-t{margin-top:12px;font-size:25px}
  .ws-p{font-size:15px}
  .ws-more{margin-top:16px}
  .ws-note{flex-direction:column;gap:8px;margin-top:28px;text-align:center;font-size:15px}
  .ws-note span[aria-hidden]{display:none}
}