/* =========================================================
   WIZZIOSOFT SOLUTIONS — CASE STUDY PAGE
   ========================================================= */

.case-hero {
  position:relative;
  min-height:100svh;
  padding:165px 0 75px;
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 36%,rgba(37,171,225,.16),transparent 30%),
    linear-gradient(180deg,#fcfdff,#edf3ff);
}
.case-grid-bg { opacity:.45; }
.case-glow {
  position:absolute;right:-250px;top:-80px;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,171,225,.22),transparent 68%);
}
.case-breadcrumb {
  position:relative;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:38px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.case-breadcrumb strong { color:var(--blue); }
.case-hero-heading {
  position:relative;z-index:2;display:grid;grid-template-columns:1.28fr .72fr;align-items:end;gap:90px;
}
.case-category { color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase; }
.case-title {
  margin:0;font:700 clamp(70px,7.6vw,125px)/.88 "Manrope";letter-spacing:-.075em;
}
.case-title em { color:var(--cyan);font-style:normal;font-weight:500; }
.case-hero-side { padding-bottom:10px; }
.case-hero-side > p { color:var(--text);font-size:19px; }
.case-tags { display:flex;flex-wrap:wrap;gap:7px;margin-top:25px; }
.case-tags span { padding:7px 11px;background:white;border:1px solid var(--line);border-radius:999px;color:#5d6584;font-size:9px;font-weight:700; }

.case-hero-visual {
  position:relative;
  z-index:2;
  min-height:760px;
  margin-top:80px;
  padding:70px max(45px,6vw) 0;
  overflow:hidden;
  background:linear-gradient(135deg,#263681,#20b9e5);
}
.case-visual-grid {
  opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
}
.case-main-browser {
  position:relative;z-index:2;height:700px;overflow:hidden;color:white;background:#11193c;border:1px solid rgba(255,255,255,.25);border-radius:20px 20px 0 0;box-shadow:0 45px 95px rgba(5,15,55,.3);
}
.case-browser-top {
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:50px;padding:0 18px;color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.1);font-size:8px;letter-spacing:.1em;
}
.case-browser-top > div { display:flex;gap:5px; }
.case-browser-top i { width:6px;height:6px;background:rgba(255,255,255,.3);border-radius:50%; }
.case-browser-top b { justify-self:end;color:#65f1bc;font-size:7px;letter-spacing:.12em; }
.case-browser-screen {
  position:relative;height:calc(100% - 50px);overflow:hidden;background:radial-gradient(circle at 75% 44%,rgba(37,171,225,.3),transparent 24%),linear-gradient(145deg,#11193c,#253894);
}
.case-browser-nav {
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:25px 35px;font-size:9px;letter-spacing:.1em;
}
.case-browser-nav strong { font:800 15px "Manrope"; }
.case-browser-nav i { justify-self:end;color:var(--cyan);font-style:normal; }
.case-browser-copy { position:relative;z-index:2;padding:70px 65px; }
.case-browser-copy small { color:rgba(255,255,255,.55);font-size:8px;letter-spacing:.16em; }
.case-browser-copy h2 { margin:55px 0 22px;font:650 clamp(75px,7.5vw,120px)/.87 "Manrope";letter-spacing:-.075em; }
.case-browser-copy h2 em { color:var(--cyan);font-style:normal;font-weight:500; }
.case-browser-copy p { max-width:520px;color:rgba(255,255,255,.62); }
.case-browser-copy button { padding:11px 15px;color:var(--navy);background:white;border:0;border-radius:999px;font-size:8px; }
.case-technical-visual { position:absolute;right:3%;top:14%;width:46%;height:78%; }
.case-tech-ring { position:absolute;right:8%;top:17%;display:grid;place-items:center;width:340px;height:340px;border:1px solid rgba(255,255,255,.2);border-radius:50%; }
.case-tech-ring::before,.case-tech-ring::after { content:"";position:absolute;inset:47px;border:1px dashed rgba(37,171,225,.75);border-radius:50%; }
.case-tech-ring::after { inset:110px;border-style:solid;border-color:rgba(255,255,255,.23); }
.case-tech-ring span { color:var(--cyan);font-size:11px; }
.case-tech-ring i { position:absolute;left:18%;top:8%;width:10px;height:10px;background:var(--cyan);border-radius:50%;box-shadow:0 0 0 8px rgba(37,171,225,.12); }
.case-tech-lines { position:absolute;left:-10%;right:-10%;bottom:8%;display:grid;gap:19px;transform:rotate(-10deg); }
.case-tech-lines i { height:1px;background:rgba(255,255,255,.14); }
.case-float {
  position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.35);border-radius:14px;box-shadow:0 18px 45px rgba(5,15,55,.18);backdrop-filter:blur(14px);
}
.case-float strong { color:var(--cyan);font:700 19px "Manrope"; }
.case-float span { color:var(--muted);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.07em; }
.case-float-a { left:3%;bottom:10%; }
.case-float-b { right:2%;top:10%; }

.case-meta {
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:40px;border-top:1px solid var(--line);
}
.case-meta > div { padding:0 28px;border-right:1px solid var(--line); }
.case-meta > div:first-child { padding-left:0; }
.case-meta > div:last-child { border-right:0; }
.case-meta span,.case-meta strong { display:block; }
.case-meta span { margin-bottom:7px;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; }
.case-meta strong { color:var(--navy);font-size:13px; }

/* OVERVIEW */
.case-overview { background:white; }
.case-overview-grid { display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,.72fr);gap:95px; }
.case-overview-side { display:flex;flex-direction:column;justify-content:space-between; }
.case-objectives { margin-top:55px;border-top:1px solid var(--line); }
.case-objectives small { display:block;padding:20px 0;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.14em; }
.case-objectives > div { display:grid;grid-template-columns:42px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line); }
.case-objectives span { color:var(--cyan);font-size:9px;font-weight:800; }
.case-objectives p { margin:0;color:var(--navy);font-size:13px;font-weight:600; }

/* CHALLENGE */
.case-challenge { position:relative;color:white;background:var(--navy); }
.case-challenge::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 3% 45%,rgba(37,171,225,.18),transparent 28%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,70px 70px,70px 70px; }
.case-two-col { position:relative;z-index:2;display:grid;grid-template-columns:.82fr 1fr;gap:115px; }
.case-sticky { position:sticky;top:125px;align-self:start; }
.case-sticky > p { max-width:510px;margin:38px 0 0;color:rgba(255,255,255,.62);font-size:18px; }
.challenge-list { border-top:1px solid var(--line-light); }
.challenge-list article { display:grid;grid-template-columns:60px 1fr;gap:25px;padding:48px 0;border-bottom:1px solid var(--line-light); }
.challenge-list article > span { color:var(--cyan);font-size:10px;font-weight:800; }
.challenge-list h3 { margin:0 0 13px;font:600 clamp(29px,3vw,43px)/1.06 "Manrope";letter-spacing:-.045em; }
.challenge-list p { max-width:610px;margin:0;color:rgba(255,255,255,.57); }

/* STRATEGY */
.case-strategy { background:var(--paper); }
.case-section-head,.case-outcome-head {
  display:flex;justify-content:space-between;align-items:end;gap:70px;margin-bottom:70px;
}
.case-section-head > p,.case-outcome-head > p { max-width:440px;color:var(--text); }
.strategy-steps { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.strategy-steps article {
  min-height:420px;padding:30px;background:white;border:1px solid var(--line);border-radius:22px;
}
.strategy-steps article > span { color:var(--cyan);font-size:9px;font-weight:800; }
.strategy-steps small { display:block;margin-top:55px;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.14em; }
.strategy-steps h3 { margin:20px 0;font:600 29px/1.12 "Manrope";letter-spacing:-.045em; }
.strategy-steps p { color:var(--text);font-size:14px; }

/* DESIGN */
.case-design { background:white; }
.design-system-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.design-card {
  position:relative;min-height:430px;padding:30px;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:22px;
}
.design-card > small { color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.14em; }
.colour-system { display:grid;grid-template-columns:repeat(4,1fr);height:270px;margin-top:45px;overflow:hidden;border-radius:16px; }
.colour-system i { position:relative;background:var(--c); }
.colour-system span { position:absolute;left:50%;bottom:15px;color:white;font:700 7px "DM Sans";letter-spacing:.08em;transform:translateX(-50%) rotate(-90deg);transform-origin:center; }
.colour-system i:last-child span { color:var(--navy); }
.design-card-type { background:linear-gradient(145deg,#f5f8ff,#e9f5ff); }
.design-card-type h3 { margin:65px 0 50px;font:650 clamp(55px,5vw,82px)/.9 "Manrope";letter-spacing:-.07em; }
.design-card-type h3 em { color:var(--cyan);font-style:normal;font-weight:500; }
.design-card-type > div { display:flex;justify-content:space-between;color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.1em; }
.design-card-motion { color:white;background:linear-gradient(145deg,#11193c,#253894); }
.motion-orbit { position:relative;display:grid;place-items:center;width:250px;height:250px;margin:35px auto 25px;border:1px solid rgba(255,255,255,.2);border-radius:50%; }
.motion-orbit::before { content:"";position:absolute;inset:38px;border:1px dashed var(--cyan);border-radius:50%; }
.motion-orbit::after { content:"";position:absolute;inset:85px;border:1px solid rgba(255,255,255,.2);border-radius:50%; }
.motion-orbit i:first-child { position:absolute;left:18%;top:8%;width:10px;height:10px;background:var(--cyan);border-radius:50%;box-shadow:0 0 0 8px rgba(37,171,225,.12); }
.motion-orbit span { color:var(--cyan);font-size:10px; }
.design-card-motion p { color:rgba(255,255,255,.57);font-size:13px; }
.layout-grid-demo { display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;height:250px;margin-top:45px; }
.layout-grid-demo i { background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 15px 35px rgba(25,42,118,.08); }
.layout-grid-demo i:first-child { grid-column:1/3; }
.layout-grid-demo i:nth-child(4) { grid-column:2/4; }
.design-card-grid p { margin-top:28px;color:var(--text);font-size:13px; }

/* SCREENS */
.case-screens {
  min-height:calc(100svh - var(--header-h));
  padding:clamp(32px,5vh,54px) 0 clamp(26px,4vh,42px);
  overflow:hidden;color:white;background:var(--navy);
}
.case-screens .section-title { font-size:clamp(48px,5vw,78px); }
.screen-showcase {
  display:flex;gap:28px;width:max-content;margin-top:clamp(28px,5vh,52px);
  padding-left:max(48px,calc((100vw - var(--container))/2));
  padding-right:max(48px,calc((100vw - var(--container))/2));
}
.screen-card {
  width:min(75vw,980px);height:clamp(300px,calc(55svh - 35px),540px);
  flex:none;padding:clamp(28px,4vh,50px) clamp(28px,3vw,50px) 0;border-radius:25px;
}
.screen-home { background:linear-gradient(135deg,#2b3c88,#20b9e5); }
.screen-service { background:linear-gradient(135deg,#dfe7ff,#aebfff); }
.screen-contact { background:linear-gradient(135deg,#dff7ff,#c9caff); }
.screen-browser { height:100%;overflow:hidden;border-radius:18px 18px 0 0;box-shadow:0 35px 70px rgba(5,15,55,.22); }
.screen-top { display:flex;align-items:center;gap:5px;height:42px;padding:0 15px;color:rgba(255,255,255,.55);background:#11193c;border-bottom:1px solid rgba(255,255,255,.1);font-size:7px; }
.screen-top i { width:6px;height:6px;background:rgba(255,255,255,.3);border-radius:50%; }
.screen-top span { margin-left:auto; }
.screen-home-ui { position:relative;height:calc(100% - 42px);padding:45px;color:white;background:radial-gradient(circle at 77% 43%,rgba(37,171,225,.3),transparent 25%),linear-gradient(145deg,#11193c,#253894); }
.screen-nav { display:flex;justify-content:space-between;font-size:8px;letter-spacing:.1em; }
.screen-home-ui > small,.screen-service-ui > small,.screen-contact-ui > small { display:block;margin-top:65px;color:rgba(255,255,255,.55);font-size:7px;letter-spacing:.15em; }
.screen-home-ui h3,.screen-service-ui h3,.screen-contact-ui h3 { margin:35px 0 0;font:650 clamp(62px,6vw,95px)/.9 "Manrope";letter-spacing:-.07em; }
.screen-home-ui h3 em { color:var(--cyan);font-style:normal;font-weight:500; }
.screen-circle { position:absolute;right:7%;top:18%;display:grid;place-items:center;width:245px;height:245px;border:1px solid rgba(255,255,255,.2);border-radius:50%; }
.screen-circle::before { content:"";position:absolute;inset:40px;border:1px dashed var(--cyan);border-radius:50%; }
.screen-circle span { color:var(--cyan);font-size:9px; }

.screen-service-ui { position:relative;height:calc(100% - 42px);padding:45px;color:var(--navy);background:linear-gradient(145deg,#f7f9ff,#d9e2ff); }
.screen-service-ui > small { color:var(--blue); }
.screen-service-ui h3 { font-size:70px; }
.service-diagram { position:absolute;right:6%;bottom:6%;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;gap:10px;width:47%;height:45%;padding:25px;background:white;border:1px solid var(--line);border-radius:16px; }
.service-diagram i { height:35%;background:var(--blue);border-radius:5px 5px 0 0; }
.service-diagram i:nth-child(2){height:62%}.service-diagram i:nth-child(3){height:48%;background:#4d70d0}.service-diagram i:nth-child(4){height:85%;background:var(--cyan)}

.screen-contact-ui { height:calc(100% - 42px);padding:45px;color:var(--navy);background:linear-gradient(145deg,#f7f9ff,#e3f6ff); }
.screen-contact-ui > small { color:var(--blue); }
.screen-contact-ui h3 { font-size:70px; }
.contact-form-demo { display:grid;gap:10px;width:46%;margin-left:auto;margin-top:-70px; }
.contact-form-demo i { height:45px;background:white;border:1px solid var(--line);border-radius:9px; }
.contact-form-demo button { height:45px;color:white;background:var(--navy);border:0;border-radius:999px;font-size:8px; }

/* DEVELOPMENT */
.case-development { background:white; }
.case-development-grid { display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:90px; }
.development-stack { display:flex;flex-wrap:wrap;gap:8px;margin-top:38px; }
.development-stack span { padding:8px 12px;background:var(--paper);border:1px solid var(--line);border-radius:999px;color:#59617f;font-size:9px;font-weight:700; }
.code-showcase { margin-top:80px;overflow:hidden;color:#c4ccef;background:#0b123b;border-radius:22px;box-shadow:0 35px 80px rgba(5,15,55,.18); }
.code-showcase-top { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:48px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.1);font-size:8px; }
.code-showcase-top > div { display:flex;gap:5px; }
.code-showcase-top i { width:6px;height:6px;background:rgba(255,255,255,.25);border-radius:50%; }
.code-showcase-top b { justify-self:end;color:#65f1bc;font-size:7px;letter-spacing:.12em; }
.code-showcase-body { display:grid;grid-template-columns:60px 1fr;min-height:320px; }
.code-showcase-body aside { display:grid;align-content:start;gap:12px;padding:28px 20px;color:#53608d;border-right:1px solid rgba(255,255,255,.08);font:11px monospace; }
.code-showcase pre { margin:0;padding:35px;overflow:auto;font:15px/2 monospace; }
.code-showcase em { color:#a99cff;font-style:normal; }
.code-showcase strong { color:#49d7f4;font-weight:400; }

/* OUTCOME */
.case-outcome { position:relative;overflow:hidden;color:white;background:linear-gradient(145deg,#1a236c,#11193c); }
.case-outcome-grid-bg { opacity:.4;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); }
.case-outcome > .container { position:relative;z-index:2; }
.case-outcome-head > p { color:rgba(255,255,255,.6); }
.outcome-cards { display:grid;grid-template-columns:repeat(4,1fr);margin-top:70px;border-top:1px solid var(--line-light);border-left:1px solid var(--line-light); }
.outcome-cards article { min-height:250px;padding:30px;border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light); }
.outcome-cards span { color:var(--cyan);font-size:9px;font-weight:800; }
.outcome-cards strong { display:block;margin:55px 0 13px;font:650 clamp(35px,3.5vw,52px)/1 "Manrope";letter-spacing:-.055em; }
.outcome-cards p { margin:0;color:rgba(255,255,255,.58);font-size:13px; }
.case-outcome blockquote { max-width:1100px;margin:90px 0 0;font:500 clamp(35px,4.5vw,67px)/1.15 "Manrope";letter-spacing:-.05em; }

/* NEXT */
.next-project { background:var(--paper); }
.next-project-head { display:flex;justify-content:space-between;margin-bottom:25px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em; }
.next-project-head p { margin:0; }
.next-project-head a { color:var(--navy);font-weight:700; }
.next-project-link { display:block; }
.next-project-visual { position:relative;height:600px;padding:55px;overflow:hidden;color:#2a231f;background:linear-gradient(135deg,#f2d7bb,#b9916d);border-radius:27px; }
.next-store-nav { position:relative;z-index:3;display:flex;justify-content:space-between; }
.next-store-nav strong { font:800 17px "Manrope";letter-spacing:.14em; }
.next-store-copy { position:relative;z-index:2;margin-top:90px; }
.next-store-copy small { font-size:8px;letter-spacing:.16em; }
.next-store-copy h3 { margin:50px 0 0;font:600 clamp(70px,7vw,110px)/.9 "Manrope";letter-spacing:-.07em; }
.next-blade { position:absolute;right:-6%;bottom:7%;width:62%;height:18%;background:linear-gradient(120deg,#aaa,#f7f7f7 43%,#858585);border-radius:100% 0 10% 100%;transform:rotate(-20deg);box-shadow:0 20px 40px rgba(55,35,20,.18); }
.next-blade::after { content:"";position:absolute;right:-27%;top:8%;width:33%;height:84%;background:#513729;border-radius:0 17px 17px 0; }
.next-project-info { display:flex;justify-content:space-between;align-items:center;padding-top:24px; }
.next-project-info p { margin:0 0 4px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em; }
.next-project-info h2 { margin:0;font:650 38px "Manrope";letter-spacing:-.05em; }
.next-project-info > span { display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--line);border-radius:50%;font-size:22px;transition:.35s; }
.next-project-link:hover .next-project-info > span { color:white;background:var(--cyan);border-color:var(--cyan);transform:rotate(45deg); }
.case-contact { padding-top:150px;padding-bottom:150px; }

@media (min-width:681px) and (max-height:700px) {
  .case-screens { padding:24px 0 20px; }
  .case-screens .section-kicker { margin-bottom:18px; }
  .case-screens .section-title { font-size:clamp(42px,4vw,58px); }
  .screen-showcase { margin-top:22px; }
  .screen-card {
    height:max(280px,calc(100svh - var(--header-h) - 210px));
    padding:24px 28px 0;
  }
  .screen-home-ui,.screen-service-ui,.screen-contact-ui { padding:22px 28px; }
  .screen-home-ui > small,.screen-service-ui > small,.screen-contact-ui > small { margin-top:22px; }
  .screen-home-ui h3,.screen-service-ui h3,.screen-contact-ui h3 { margin-top:20px;font-size:46px; }
  .screen-circle { width:130px;height:130px; }
  .screen-circle::before { inset:24px; }
  .contact-form-demo { margin-top:-40px; }
}

/* RESPONSIVE */
@media (max-width:1180px) {
  .case-hero-heading { gap:45px; }
  .case-title { font-size:clamp(64px,7vw,98px); }
  .case-two-col { gap:70px; }
}
@media (max-width:960px) {
  .case-hero { min-height:auto;padding-top:145px; }
  .case-hero-heading { grid-template-columns:1fr;gap:40px; }
  .case-hero-side { max-width:650px; }
  .case-hero-visual { min-height:650px;padding:50px 35px 0; }
  .case-main-browser { height:600px; }
  .case-meta { grid-template-columns:1fr 1fr;row-gap:30px; }
  .case-meta > div:nth-child(2) { border-right:0; }
  .case-overview-grid,.case-two-col,.case-development-grid { grid-template-columns:1fr; }
  .case-sticky { position:relative;top:auto; }
  .strategy-steps { grid-template-columns:1fr 1fr; }
  .screen-card { width:85vw; }
  .outcome-cards { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  .case-hero { padding-top:126px;padding-bottom:60px; }
  .case-title { font-size:clamp(54px,15.5vw,73px); }
  .case-hero-side > p { font-size:17px; }
  .case-hero-visual { min-height:500px;margin-top:55px;padding:25px 18px 0; }
  .case-main-browser { height:475px; }
  .case-browser-nav { grid-template-columns:1fr auto;padding:18px; }
  .case-browser-nav span { display:none; }
  .case-browser-copy { padding:52px 25px; }
  .case-browser-copy h2 { margin-top:38px;font-size:55px; }
  .case-browser-copy p { display:none; }
  .case-technical-visual { width:60%;right:-8%; }
  .case-tech-ring { width:160px;height:160px; }
  .case-float { padding:9px 11px; }
  .case-float strong { font-size:15px; }
  .case-float-a { left:2%;bottom:5%; }
  .case-float-b { right:1%;top:5%; }
  .case-meta { grid-template-columns:1fr;gap:0; }
  .case-meta > div { padding:18px 0;border-right:0;border-bottom:1px solid var(--line); }
  .challenge-list article { grid-template-columns:42px 1fr; }
  .case-section-head,.case-outcome-head { align-items:start;flex-direction:column; }
  .strategy-steps,.design-system-grid { grid-template-columns:1fr; }
  .strategy-steps article { min-height:360px; }
  .case-screens { min-height:auto;padding:88px 0; }
  .case-screens .section-title { font-size:clamp(48px,13vw,64px); }
  .screen-showcase {
    width:100%;padding:0 18px 14px;margin-top:45px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:18px;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  }
  .screen-showcase::-webkit-scrollbar { height:4px; }
  .screen-showcase::-webkit-scrollbar-thumb { background:rgba(255,255,255,.28);border-radius:999px; }
  .screen-card { width:92vw;height:480px;padding:25px 25px 0; }
  .screen-card { scroll-snap-align:start; }
  .screen-home-ui,.screen-service-ui,.screen-contact-ui { padding:30px 22px; }
  .screen-home-ui h3,.screen-service-ui h3,.screen-contact-ui h3 { font-size:52px; }
  .screen-circle { width:150px;height:150px;right:2%; }
  .service-diagram { width:60%; }
  .contact-form-demo { width:62%;margin-top:-15px; }
  .code-showcase-body { grid-template-columns:40px 1fr; }
  .code-showcase pre { padding:24px 18px;font-size:11px; }
  .outcome-cards { grid-template-columns:1fr; }
  .next-project-visual { height:470px;padding:30px 24px; }
  .next-store-copy { margin-top:65px; }
  .next-store-copy h3 { font-size:58px; }
}