/* ===================================================================
   /web-design — featured showcase page
   Every "screenshot" on this page is drawn in CSS. No image files.
   =================================================================== */

/* ---------- generated site preview card ---------- */
.mk{display:block;width:100%;border-radius:10px;overflow:hidden;background:var(--pa,#fff);
    border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px -24px rgba(0,0,0,.8)}
.mk__bar{display:flex;align-items:center;gap:4px;padding:7px 9px;background:var(--c0)}
.mk__bar i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3);flex:none}
.mk__bar u{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.14);margin-left:5px}
.mk__body{display:block;padding:11px;background:var(--pa)}
.mk__big{display:block;height:34px;border-radius:6px;margin-bottom:8px;
         background:linear-gradient(120deg,var(--c0),var(--c1))}
.mk__band{display:block;height:22px;border-radius:5px;margin-bottom:8px;background:var(--ac);opacity:.85}
.mk__l{display:block;height:5px;border-radius:3px;background:var(--c1);opacity:.28;margin-bottom:6px}
.mk__l.w80{width:80%}.mk__l.w70{width:70%}.mk__l.w60{width:60%}
.mk__l.w55{width:55%}.mk__l.w50{width:50%}.mk__l.w45{width:45%}
.mk__btn{display:block;width:40%;height:12px;border-radius:999px;background:var(--ac);margin-top:9px}
.mk__grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}
.mk__grid i{height:26px;border-radius:5px;background:var(--c1);opacity:.2}
.mk__grid i:nth-child(2){background:var(--ac);opacity:.55}
.mk__split{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-items:center}
.mk__blk{height:46px;border-radius:6px;background:linear-gradient(140deg,var(--c1),var(--ac))}
.mk__txt{display:block}
.mk__txt b{display:block;height:7px;width:70%;border-radius:3px;background:var(--c0);margin-bottom:5px}
.mk__txt u{display:block;height:4px;border-radius:3px;background:var(--c1);opacity:.25;margin-bottom:4px}
.mk__txt u.w70{width:70%}
.mk__gal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-bottom:8px}
.mk__gal i{height:30px;border-radius:5px;background:var(--c1);opacity:.22}
.mk__gal i.tall{height:30px;background:var(--ac);opacity:.6}
.mk__rows{display:grid;gap:5px;margin-top:8px}
.mk__rows i{height:13px;border-radius:4px;background:var(--c1);opacity:.17}
.mk__rows i:first-child{opacity:.4;background:var(--ac)}
.mk__two{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.mk__two i{height:22px;border-radius:5px;background:var(--c1);opacity:.2}

/* ================= HERO: the living wall ================= */
.wd-hero{position:relative;min-height:100svh;display:grid;align-items:center;
         background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.wd-wall{position:absolute;inset:-14% -6%;z-index:0;perspective:1400px;perspective-origin:50% 45%}
.wd-wall__deck{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);
               gap:clamp(12px,1.6vw,22px);
               transform:rotateX(var(--rx,13deg)) rotateY(var(--ry,-11deg)) rotateZ(var(--rz,4deg)) scale(1.18);
               transform-style:preserve-3d;transition:transform .9s cubic-bezier(.22,.61,.36,1);
               will-change:transform}
@media(max-width:900px){.wd-wall__deck{grid-template-columns:repeat(3,1fr)}}
.wcol{position:relative;overflow:hidden}
.wcol__in{display:grid;gap:clamp(12px,1.6vw,22px);
          animation:wscroll var(--dur,40s) linear infinite;animation-direction:var(--dir,normal);
          will-change:transform}
@keyframes wscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
.wd-wall.pause .wcol__in{animation-play-state:paused}

.wd-hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(118% 78% at 22% 50%, rgba(10,24,46,.97) 24%, rgba(10,24,46,.82) 46%, rgba(10,24,46,.28) 72%, transparent 88%),
    linear-gradient(180deg, rgba(10,24,46,.9) 0%, rgba(10,24,46,.34) 28%, rgba(10,24,46,.42) 66%, rgba(10,24,46,.96) 100%)}

.wd-hero__in{position:relative;z-index:2;padding:clamp(90px,13vh,150px) var(--gut) clamp(60px,9vh,96px)}
.wd-kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
           letter-spacing:.2em;text-transform:uppercase;color:var(--sky);
           background:rgba(126,176,232,.12);border:1px solid rgba(126,176,232,.3);
           padding:7px 15px;border-radius:999px;backdrop-filter:blur(8px)}
.wd-kicker i{width:6px;height:6px;border-radius:50%;background:var(--sky);animation:kp 2.2s ease-in-out infinite}
@keyframes kp{0%,100%{opacity:1}50%{opacity:.25}}

.wd-h1{margin-top:26px;font-size:clamp(38px,6.6vw,80px);line-height:1.0;letter-spacing:-.045em;font-weight:600;max-width:15ch}
.wd-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.wd-line>span{display:block;transform:translateY(110%);
              animation:wrise 1.15s cubic-bezier(.19,1,.22,1) forwards}
.wd-line:nth-child(2)>span{animation-delay:.13s}
@keyframes wrise{to{transform:translateY(0)}}
.wd-h1 em{font-style:normal;background:linear-gradient(100deg,#9CC6F5,#4E8FD4 55%,#7EB0E8);
          -webkit-background-clip:text;background-clip:text;color:transparent}
.wd-sub{margin-top:26px;font-size:clamp(16px,2vw,19.5px);line-height:1.62;color:rgba(255,255,255,.8);
        max-width:56ch;opacity:0;animation:wfade .9s ease .5s forwards}
.wd-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;opacity:0;
        animation:wfade .9s ease .68s forwards}
@keyframes wfade{to{opacity:1}}
.wd-scroll{position:absolute;left:var(--gut);bottom:-6px;display:inline-flex;align-items:center;gap:10px;
           font-size:10.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
           color:rgba(255,255,255,.42);opacity:0;animation:wfade .9s ease 1s forwards}
.wd-scroll span{width:30px;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.wd-scroll span::after{content:"";position:absolute;inset:0;background:var(--sky);
                       animation:wsweep 2.1s cubic-bezier(.65,0,.35,1) infinite}
@keyframes wsweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ================= marquee ================= */
.mq{background:var(--ink);color:#fff;padding:clamp(26px,3.4vw,40px) 0;overflow:hidden}
.mq__wrap{transform:rotate(-1.4deg) scale(1.05)}
.mq__row{overflow:hidden;white-space:nowrap}
.mq__row+.mq__row{margin-top:10px;opacity:.42}
.mq__in{display:inline-flex;align-items:center;gap:22px;
        animation:mqslide 34s linear infinite;will-change:transform}
.mq__row--rev .mq__in{animation-direction:reverse;animation-duration:44s}
@keyframes mqslide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.mq__in span{font-size:clamp(18px,2.6vw,30px);font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.mq__in em{font-style:normal;color:var(--sky);font-size:clamp(14px,1.8vw,20px)}

/* ================= scroll-driven device morph ================= */
.morph{position:relative;height:320vh;background:var(--paper)}
.morph__stick{position:sticky;top:0;height:100svh;display:grid;place-items:center;
              padding:0 var(--gut);overflow:hidden}
.morph__rail{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(60px,9vh,96px);
             width:min(320px,62vw);height:2px;border-radius:2px;background:var(--line)}
.morph__rail i{display:block;height:100%;width:0;border-radius:2px;
               background:linear-gradient(90deg,var(--sky),var(--blue))}
.morph__frame{width:var(--w,1040px);max-width:92vw;background:#fff;border:1px solid var(--line);
              border-radius:var(--r,18px);overflow:hidden;
              box-shadow:0 40px 90px -50px rgba(10,24,46,.6);
              transition:border-radius .3s ease}
.morph__bar{display:flex;align-items:center;gap:5px;padding:10px 13px;background:var(--paper-2);
            border-bottom:1px solid var(--line)}
.morph__bar i{width:7px;height:7px;border-radius:50%;background:var(--line-2);flex:none}
.morph__bar u{flex:1;height:7px;border-radius:4px;background:var(--line);margin-left:8px}
.morph__screen{padding:clamp(14px,2vw,26px);display:grid;gap:clamp(12px,1.6vw,20px)}
.ms__nav{display:flex;align-items:center;gap:10px}
.ms__nav b{width:62px;height:11px;border-radius:4px;background:var(--navy);flex:none}
.ms__nav span{width:38px;height:7px;border-radius:4px;background:var(--line-2)}
.ms__nav em{margin-left:auto;width:72px;height:22px;border-radius:999px;background:var(--blue)}
.ms__hero{display:grid;gap:9px;padding:clamp(14px,2.4vw,30px);border-radius:12px;
          background:linear-gradient(135deg,var(--navy),var(--navy-2));position:relative;overflow:hidden}
.ms__hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
                 background:radial-gradient(closest-side,rgba(126,176,232,.25),transparent)}
.ms__hero b{width:58%;height:17px;border-radius:5px;background:#fff}
.ms__hero u{width:74%;height:7px;border-radius:4px;background:rgba(255,255,255,.3)}
.ms__hero u.w60{width:54%}
.ms__hero i{width:104px;height:26px;border-radius:999px;background:var(--sky);margin-top:6px}
.ms__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.2vw,14px)}
.ms__grid i{height:clamp(52px,7vw,84px);border-radius:10px;background:var(--paper-3);
            border:1px solid var(--line)}
.ms__foot{display:grid;gap:7px}
.ms__foot u{height:6px;border-radius:4px;background:var(--line)}
.ms__foot u.w40{width:40%}
.morph__screen[data-m="tablet"] .ms__grid{grid-template-columns:repeat(2,1fr)}
.morph__screen[data-m="tablet"] .ms__nav span:nth-child(4){display:none}
.morph__screen[data-m="phone"] .ms__grid{grid-template-columns:1fr}
.morph__screen[data-m="phone"] .ms__nav span{display:none}
.morph__screen[data-m="phone"] .ms__nav em{width:46px;height:18px}
.morph__screen[data-m="phone"] .ms__hero b{width:84%}
.morph__tags{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(86px,12vh,130px);
             display:flex;gap:9px}
.morph__tags span{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
                  color:var(--ink-45);padding:6px 13px;border-radius:999px;border:1px solid var(--line);
                  background:#fff;transition:color .3s,border-color .3s,background .3s}
.morph__tags span.on{color:#fff;background:var(--blue);border-color:var(--blue)}

/* ================= before / after ================= */
.ba{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
    aspect-ratio:1.95/1;background:#fff;cursor:ew-resize;user-select:none;-webkit-user-select:none;
    box-shadow:0 34px 70px -46px rgba(10,24,46,.55)}
@media(max-width:620px){.ba{aspect-ratio:4/3}}
.ba__pane{position:absolute;inset:0}
.ba__pane--after{clip-path:inset(0 0 0 var(--split,50%))}
.ba__tag{position:absolute;bottom:14px;font-size:10px;font-weight:700;letter-spacing:.15em;
         text-transform:uppercase;padding:6px 13px;border-radius:999px;backdrop-filter:blur(6px)}
.ba__tag--l{left:14px;background:rgba(10,24,46,.7);color:#fff}
.ba__tag--r{right:14px;background:var(--sky);color:var(--navy)}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;
            background:#fff;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(10,24,46,.12);z-index:4}
.ba__handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
              width:46px;height:46px;border-radius:50%;background:#fff;
              box-shadow:0 10px 26px -10px rgba(10,24,46,.7)}
.ba__handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:10px;
                 border-left:2px solid var(--blue);border-right:2px solid var(--blue);z-index:2}

/* the dated site */
.old{position:absolute;inset:0;background:#EDE9E1;font-family:Georgia,"Times New Roman",serif;
     overflow:hidden;display:flex;flex-direction:column}
.old__bar{display:flex;align-items:center;gap:14px;padding:11px 16px;background:#2E3A46;color:#D8DEE5;
          font-size:clamp(8px,1vw,11px)}
.old__bar b{font-size:clamp(10px,1.3vw,15px);color:#fff;letter-spacing:.04em;margin-right:auto}
.old__hero{padding:clamp(16px,3vw,40px);text-align:center}
.old__hero b{display:block;font-size:clamp(13px,2.4vw,28px);color:#2E3A46;margin-bottom:12px}
.old__hero u{display:block;height:5px;border-radius:0;background:#BFB8AC;margin:0 auto 6px;width:78%}
.old__hero u.w60{width:52%}
.old__hero i{display:inline-block;margin-top:12px;font-style:normal;font-size:clamp(8px,1.1vw,12px);
             padding:7px 16px;background:linear-gradient(180deg,#6FA8DC,#3D7EBF);color:#fff;
             border:1px solid #2F6399;border-radius:3px}
.old__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 clamp(16px,3vw,40px)}
.old__cols i{height:clamp(30px,5vw,56px);background:#DCD6CA;border:1px solid #C6BFB1}
.old__cols--b{margin-top:10px}
.old__cols--b i{height:clamp(20px,3.4vw,38px)}
.old__foot{margin-top:auto;padding:10px 0;text-align:center;background:#2E3A46;
           color:#9AA7B4;font-size:clamp(7px,.86vw,10px);letter-spacing:.02em}

/* the rebuild */
.new{position:absolute;inset:0;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.new__bar{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--line)}
.new__bar b{width:54px;height:10px;border-radius:4px;background:var(--navy)}
.new__bar span{width:30px;height:6px;border-radius:4px;background:var(--line-2)}
.new__bar em{margin-left:auto;width:66px;height:20px;border-radius:999px;background:var(--blue)}
.new__hero{margin:clamp(12px,2vw,22px);padding:clamp(16px,3vw,36px);border-radius:14px;
           background:linear-gradient(135deg,var(--navy),var(--navy-2));display:grid;gap:9px;
           position:relative;overflow:hidden}
.new__hero::after{content:"";position:absolute;right:-50px;top:-50px;width:190px;height:190px;border-radius:50%;
                  background:radial-gradient(closest-side,rgba(126,176,232,.3),transparent)}
.new__hero b{width:62%;height:clamp(12px,1.8vw,18px);border-radius:5px;background:#fff}
.new__hero u{width:72%;height:6px;border-radius:4px;background:rgba(255,255,255,.32)}
.new__hero u.w50{width:48%}
.new__hero i{width:92px;height:24px;border-radius:999px;background:var(--sky);margin-top:5px}
.new__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 clamp(12px,2vw,22px)}
.new__grid i{height:clamp(32px,5vw,58px);border-radius:10px;background:var(--paper-2);
             border:1px solid var(--line)}
.new__rows{display:grid;gap:7px;margin:clamp(12px,2vw,20px) clamp(12px,2vw,22px) 0}
.new__rows u{height:6px;border-radius:4px;background:var(--line)}
.new__rows u.w70{width:70%}
.new__foot{display:flex;align-items:center;gap:9px;
           margin:auto clamp(12px,2vw,22px) clamp(14px,2.2vw,24px);
           padding-top:clamp(10px,1.6vw,16px);border-top:1px solid var(--line)}
.new__foot b{width:44px;height:8px;border-radius:4px;background:var(--navy)}
.new__foot span{width:26px;height:5px;border-radius:4px;background:var(--line-2)}
.new__foot em{margin-left:auto;width:52px;height:16px;border-radius:999px;background:var(--sky)}

/* ================= tilt gallery ================= */
.tilts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;perspective:1100px}
@media(max-width:900px){.tilts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.tilts{grid-template-columns:1fr}}
.tilt{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--navy);
      padding:clamp(18px,2.2vw,26px);transform-style:preserve-3d;
      transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(0);
      transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s;
      box-shadow:0 20px 44px -30px rgba(10,24,46,.6);will-change:transform}
.tilt:hover,.tilt:focus-visible{box-shadow:0 44px 80px -40px rgba(10,24,46,.85)}
.tilt__sheen{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
             transition:opacity .4s;
             background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
                        rgba(255,255,255,.17),transparent 62%)}
.tilt:hover .tilt__sheen,.tilt:focus-visible .tilt__sheen{opacity:1}
.tilt__art{display:block;transform:translateZ(38px);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.tilt:hover .tilt__art{transform:translateZ(58px) scale(1.02)}
.tilt figcaption{display:block;margin-top:18px;transform:translateZ(22px)}
.tilt figcaption b{display:block;font-size:15.5px;font-weight:600;color:#fff;letter-spacing:-.015em}
.tilt figcaption span{display:block;margin-top:5px;font-size:13px;color:rgba(255,255,255,.58)}

/* ================= stages ================= */
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.stages{grid-template-columns:1fr}}
.stage{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;
       transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.stage:hover{transform:translateY(-4px);border-color:var(--sky);
             box-shadow:0 24px 48px -34px rgba(10,24,46,.5)}
.stage b{font-size:11px;font-weight:700;letter-spacing:.17em;color:var(--sky);font-variant-numeric:tabular-nums}
.stage h3{margin-top:12px;font-size:17px}
.stage p{margin-top:10px;font-size:14px;color:var(--ink-70);line-height:1.62}

/* ================= closing band ================= */
.wd-close{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--blue-dk));
          color:#fff;text-align:center;padding:clamp(66px,10vw,118px) 0}
.wd-close::after{content:"";position:absolute;left:50%;top:-45%;width:76vw;height:76vw;max-width:900px;
                 max-height:900px;transform:translateX(-50%);border-radius:50%;pointer-events:none;
                 background:radial-gradient(closest-side,rgba(126,176,232,.19),transparent 70%)}
.wd-close__in{position:relative;z-index:2}
.wd-close .eyebrow{color:var(--sky)}
.wd-close h2{margin:16px auto 0;max-width:19ch;font-size:clamp(28px,4.6vw,50px)}
.wd-close p{margin:18px auto 0;max-width:52ch;color:rgba(255,255,255,.8);font-size:16.5px}

/* ================= reduced motion ================= */
@media(prefers-reduced-motion:reduce){
  .wcol__in,.mq__in{animation:none}
  .wd-line>span{transform:none;animation:none}
  .wd-sub,.wd-cta,.wd-scroll{opacity:1;animation:none}
  .wd-scroll span::after{animation:none}
  .wd-kicker i{animation:none}
  .morph{height:auto}
  .morph__stick{position:static;height:auto;padding:clamp(40px,6vw,70px) var(--gut)}
  .morph__rail,.morph__tags{display:none}
  .tilt{transform:none}
}