/* =========================================================
   WIZZIOSOFT SOLUTIONS — PORTFOLIO PAGE
   ========================================================= */

.portfolio-page-body,
.case-study-body {
  background: var(--paper);
}
.desktop-nav .active-link {
  color: var(--blue);
}
.desktop-nav .active-link::after {
  transform: scaleX(1);
}

/* HERO */
.portfolio-hero {
  position: relative;
  min-height: 100svh;
  padding: 165px 0 55px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 42%, rgba(37,171,225,.15), transparent 30%),
    linear-gradient(180deg,#fcfdff,#f0f5ff);
}
.portfolio-grid-bg,
.featured-grid,
.agency-grid,
.case-grid-bg,
.case-visual-grid,
.case-outcome-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(40,56,144,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,56,144,.05) 1px,transparent 1px);
  background-size: 64px 64px;
  opacity: .4;
  mask-image: linear-gradient(to bottom,transparent,black 18%,black 80%,transparent);
}
.portfolio-glow {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.portfolio-glow.glow-a {
  width:650px;height:650px;right:-200px;top:0;
  background:radial-gradient(circle,rgba(37,171,225,.2),transparent 68%);
}
.portfolio-glow.glow-b {
  width:600px;height:600px;left:-320px;bottom:-330px;
  background:radial-gradient(circle,rgba(89,82,215,.12),transparent 68%);
}
.portfolio-hero-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr);
  align-items:center;
  gap:45px;
}
.page-breadcrumb {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:32px;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.page-breadcrumb strong { color:var(--blue); }
.page-breadcrumb a:hover { color:var(--cyan); }

.portfolio-hero-title {
  margin:0;
  font:700 clamp(68px,7.1vw,120px)/.9 "Manrope",sans-serif;
  letter-spacing:-.07em;
}
.portfolio-hero-title em {
  color:var(--cyan);
  font-style:normal;
  font-weight:500;
}
.portfolio-hero-description {
  max-width:680px;
  margin:38px 0 0;
  color:var(--text);
  font-size:clamp(18px,1.5vw,21px);
}
.portfolio-hero-actions {
  display:flex;
  align-items:center;
  gap:32px;
  margin-top:38px;
}

/* HERO ART */
.portfolio-hero-art {
  position:relative;
  min-height:670px;
  perspective:1300px;
}
.work-stack {
  position:absolute;
  width:70%;
  aspect-ratio:1.17/1;
  padding:12px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(18,26,85,.1);
  border-radius:22px;
  box-shadow:0 35px 80px rgba(25,42,118,.16);
  backdrop-filter:blur(15px);
}
.work-stack-one { left:17%;top:13%;z-index:4;transform:rotate(-3deg); }
.work-stack-two { left:-1%;top:35%;z-index:3;transform:rotate(-10deg) scale(.86); }
.work-stack-three { right:-2%;top:34%;z-index:2;transform:rotate(10deg) scale(.84); }
.stack-browser {
  height:100%;
  overflow:hidden;
  border-radius:14px;
}
.stack-top {
  display:flex;align-items:center;gap:5px;height:38px;padding:0 13px;color:rgba(255,255,255,.55);
  background:#11193c;border-bottom:1px solid rgba(255,255,255,.1);font-size:7px;letter-spacing:.1em;
}
.stack-top i { width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3); }
.stack-top span { margin-left:auto; }
.stack-industrial {
  position:relative;
  height:calc(100% - 38px);
  padding:38px 32px;
  overflow:hidden;
  color:white;
  background:radial-gradient(circle at 77% 46%,rgba(37,171,225,.3),transparent 24%),linear-gradient(145deg,#121a55,#253894);
}
.stack-industrial small,.stack-store small,.stack-saas small {
  font-size:6px;letter-spacing:.14em;
}
.stack-industrial h3,.stack-store h3,.stack-saas h3 {
  margin:40px 0 0;font:650 clamp(31px,3.2vw,48px)/.95 "Manrope";letter-spacing:-.06em;
}
.stack-ring {
  position:absolute;right:8%;top:22%;display:grid;place-items:center;width:135px;height:135px;border:1px solid rgba(255,255,255,.25);border-radius:50%;
}
.stack-ring::before { content:"";position:absolute;inset:24px;border:1px dashed var(--cyan);border-radius:50%; }
.stack-ring span { color:var(--cyan);font-size:8px; }

.stack-store-nav,.stack-saas-nav {
  display:flex;justify-content:space-between;align-items:center;height:38px;padding:0 13px;background:#f4eee8;border-bottom:1px solid rgba(60,40,20,.1);font-size:7px;
}
.stack-store-nav strong,.stack-saas-nav strong { font:800 10px "Manrope";letter-spacing:.13em; }
.stack-store {
  position:relative;height:calc(100% - 38px);padding:34px 24px;overflow:hidden;background:#d9c2aa;
}
.stack-store h3 { color:#2a231f; }
.blade-shape {
  position:absolute;right:-12%;bottom:7%;width:68%;height:20%;background:linear-gradient(120deg,#aaa,#f7f7f7 44%,#898989);border-radius:100% 0 10% 100%;transform:rotate(-20deg);
}
.stack-saas-nav { background:#f5f6ff; }
.stack-saas {
  position:relative;height:calc(100% - 38px);padding:34px 24px;overflow:hidden;background:linear-gradient(145deg,#f2f4ff,#cbd3ff);
}
.mini-dashboard {
  position:absolute;right:7%;bottom:7%;display:flex;align-items:end;gap:6px;width:45%;height:36%;padding:14px;background:white;border:1px solid #dfe4ff;border-radius:10px;
}
.mini-dashboard i { flex:1;height:35%;background:#4e60d1;border-radius:3px 3px 0 0; }
.mini-dashboard i:nth-child(2){height:62%}.mini-dashboard i:nth-child(3){height:48%}.mini-dashboard i:nth-child(4){height:83%;background:var(--cyan)}

.work-orbit {
  position:absolute;
  left:50%;top:50%;
  border:1px solid rgba(40,56,144,.14);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.work-orbit.orbit-one { width:620px;height:620px; }
.work-orbit.orbit-two { width:500px;height:500px;border-style:dashed; }
.work-orbit.orbit-three { width:730px;height:330px;transform:translate(-50%,-50%) rotate(-17deg);border-color:rgba(37,171,225,.18); }
.work-float {
  position:absolute;z-index:7;display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 45px rgba(25,42,118,.13);backdrop-filter:blur(14px);
}
.work-float strong { color:var(--cyan);font:700 19px "Manrope"; }
.work-float span { color:var(--muted);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.07em; }
.work-float-a { left:2%;bottom:8%; }
.work-float-b { right:0;top:10%; }

.portfolio-hero-foot {
  position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:28px;color:var(--muted);border-top:1px solid var(--line);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
}
.portfolio-hero-foot p { margin:0; }
.portfolio-hero-foot > div { display:flex;align-items:center;gap:12px; }
.portfolio-hero-foot i { width:4px;height:4px;background:var(--cyan);border-radius:50%; }

/* FEATURED CASE */
.featured-case { background:white; }
.featured-case-link { display:block; }
.featured-case-visual {
  position:relative;
  height:720px;
  padding:0;
  overflow:hidden;
  background:linear-gradient(135deg,#23357f,#20b9e5);
  border-radius:30px;
}
.featured-project-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .7s var(--ease);
}
.featured-case-link:hover .featured-project-image { transform:scale(1.025); }
.featured-grid {
  opacity:.38;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
}
.featured-browser {
  position:relative;z-index:2;height:645px;overflow:hidden;background:#11193c;border:1px solid rgba(255,255,255,.25);border-radius:20px 20px 0 0;box-shadow:0 45px 90px rgba(5,15,55,.28);transition:transform .7s var(--ease);
}
.featured-case-link:hover .featured-browser { transform:translateY(-12px); }
.featured-browser-top {
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:48px;padding:0 18px;color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.1);font-size:8px;letter-spacing:.1em;
}
.featured-browser-top > div { display:flex;gap:5px; }
.featured-browser-top i { width:6px;height:6px;background:rgba(255,255,255,.3);border-radius:50%; }
.featured-browser-top b { justify-self:end;color:#65f1bc;font-size:7px;letter-spacing:.12em; }
.featured-screen {
  position:relative;height:calc(100% - 48px);overflow:hidden;color:white;background:radial-gradient(circle at 75% 45%,rgba(37,171,225,.3),transparent 24%),linear-gradient(145deg,#11193c,#253894);
}
.featured-nav {
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:25px 35px;font-size:9px;letter-spacing:.1em;
}
.featured-nav strong { font:800 15px "Manrope"; }
.featured-nav i { justify-self:end;font-style:normal;color:var(--cyan); }
.featured-copy { position:relative;z-index:2;padding:70px 60px; }
.featured-copy small { color:rgba(255,255,255,.55);font-size:8px;letter-spacing:.16em; }
.featured-copy h2 { margin:55px 0 20px;font:650 clamp(70px,7vw,110px)/.88 "Manrope";letter-spacing:-.07em; }
.featured-copy h2 em { color:var(--cyan);font-style:normal;font-weight:500; }
.featured-copy p { color:rgba(255,255,255,.62); }
.featured-technical { position:absolute;right:3%;top:16%;width:45%;height:75%; }
.tech-circle {
  position:absolute;right:12%;top:15%;display:grid;place-items:center;width:310px;height:310px;border:1px solid rgba(255,255,255,.18);border-radius:50%;
}
.tech-circle::before,.tech-circle::after { content:"";position:absolute;inset:45px;border:1px dashed rgba(37,171,225,.7);border-radius:50%; }
.tech-circle::after { inset:92px;border-style:solid;border-color:rgba(255,255,255,.23); }
.tech-circle span { color:var(--cyan);font-size:11px; }
.tech-circle i { position:absolute;top:7%;left:23%;width:10px;height:10px;background:var(--cyan);border-radius:50%;box-shadow:0 0 0 8px rgba(37,171,225,.12); }
.tech-lines { position:absolute;left:-10%;right:-10%;bottom:9%;display:grid;gap:18px;transform:rotate(-11deg); }
.tech-lines i { height:1px;background:rgba(255,255,255,.13); }

.featured-case-info {
  position:relative;
  display:grid;
  grid-template-columns:1fr .8fr auto;
  align-items:center;
  gap:45px;
  padding:28px 0 0;
}
.featured-case-info > div:first-child p { margin:0 0 5px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em; }
.featured-case-info h2 { margin:0;font:650 clamp(30px,3vw,45px)/1 "Manrope";letter-spacing:-.05em; }
.featured-summary { margin:0;color:var(--text);font-size:14px; }
.featured-meta { grid-column:1/3;display:flex;flex-wrap:wrap;gap:7px;margin-top:-15px; }
.featured-meta span,.card-tags span { padding:6px 10px;background:var(--paper);border-radius:999px;color:#606887;font-size:9px; }
.featured-arrow {
  grid-column:3;grid-row:1/3;display:grid;place-items:center;width:62px;height:62px;border:1px solid var(--line);border-radius:50%;font-size:24px;transition:.35s;
}
.featured-case-link:hover .featured-arrow { color:white;background:var(--cyan);border-color:var(--cyan);transform:rotate(45deg); }

/* PROJECT GRID */
.portfolio-projects { background:var(--paper); }
.portfolio-projects-head,.industries-head {
  display:flex;justify-content:space-between;align-items:end;gap:70px;margin-bottom:65px;
}
.portfolio-projects-head > p,.industries-head > p { max-width:430px;color:var(--text); }
.portfolio-filter {
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:35px;
}
.portfolio-filter button {
  display:flex;align-items:center;gap:13px;padding:11px 15px;color:#5c6482;background:white;border:1px solid var(--line);border-radius:999px;font-size:10px;font-weight:700;cursor:pointer;transition:.3s;
}
.portfolio-filter button span { color:var(--muted);font-size:8px; }
.portfolio-filter button:hover,.portfolio-filter button.active { color:white;background:var(--navy);border-color:var(--navy); }
.portfolio-filter button.active span { color:rgba(255,255,255,.58); }

.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px 24px;
}
.portfolio-card {
  min-width:0;
  transition:opacity .35s,transform .45s var(--ease);
}
.portfolio-card.is-hidden {
  display:none;
}
.portfolio-card-wide {
  grid-column:1/-1;
}
.portfolio-card-visual {
  position:relative;
  height:600px;
  padding:0;
  overflow:hidden;
  border-radius:25px;
}
.portfolio-project-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .7s var(--ease);
}
.portfolio-card:hover .portfolio-project-image { transform:scale(1.035); }
.portfolio-card-wide .portfolio-card-visual { height:690px; padding:65px 8% 0; }
.visual-industrial { background:linear-gradient(135deg,#2b3c88,#20b9e5); }
.visual-sharpening { background:linear-gradient(135deg,#f2d7bb,#b9916d); }
.visual-saas { background:linear-gradient(135deg,#e4e5ff,#aebcff); }
.visual-agency { background:linear-gradient(135deg,#e7f7ff,#dcdcff); }
.visual-growth { background:linear-gradient(135deg,#dce9ff,#b9c8ff); }
.visual-property { background:linear-gradient(135deg,#cfe3ec,#7895a3); }

.card-browser {
  position:relative;height:100%;overflow:hidden;background:white;border:1px solid rgba(255,255,255,.28);border-radius:18px 18px 0 0;box-shadow:0 35px 70px rgba(20,34,96,.2);transition:transform .7s var(--ease);
}
.portfolio-card:hover .card-browser { transform:translateY(-10px); }
.card-browser-bar {
  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;letter-spacing:.1em;
}
.card-browser-bar i { width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3); }
.card-browser-bar span { margin-left:auto; }
.card-industrial-screen {
  position:relative;height:calc(100% - 42px);padding:55px;overflow:hidden;color:white;background:radial-gradient(circle at 76% 44%,rgba(37,171,225,.3),transparent 24%),linear-gradient(145deg,#11193c,#253894);
}
.card-industrial-screen small { color:rgba(255,255,255,.55);font-size:7px;letter-spacing:.15em; }
.card-industrial-screen h3 { margin:60px 0 0;font:650 clamp(62px,6vw,96px)/.9 "Manrope";letter-spacing:-.07em; }
.industrial-dial { position:absolute;right:10%;top:18%;display:grid;place-items:center;width:280px;height:280px;border:1px solid rgba(255,255,255,.2);border-radius:50%; }
.industrial-dial::before { content:"";position:absolute;inset:48px;border:1px dashed var(--cyan);border-radius:50%; }
.industrial-dial span { color:var(--cyan);font-size:10px; }
.industrial-track { position:absolute;left:-5%;right:-5%;bottom:12%;display:grid;gap:18px;transform:rotate(-8deg); }
.industrial-track i { height:1px;background:rgba(255,255,255,.15); }

.store-mini-nav,.saas-mini-nav {
  display:flex;justify-content:space-between;align-items:center;height:55px;padding:0 22px;background:#f4eee8;border-bottom:1px solid rgba(60,40,20,.1);font-size:8px;
}
.store-mini-nav strong,.saas-mini-nav strong { font:800 13px "Manrope";letter-spacing:.13em; }
.store-mini-screen { position:relative;height:calc(100% - 55px);padding:48px 35px;overflow:hidden;background:#d9c2aa; }
.store-mini-screen small { font-size:6px;letter-spacing:.15em; }
.store-mini-screen h3 { margin:55px 0 25px;font:600 clamp(44px,4.6vw,72px)/.94 "Manrope";letter-spacing:-.065em; }
.store-mini-screen button { padding:10px 13px;color:white;background:#2a231f;border:0;border-radius:999px;font-size:8px; }
.knife-form { position:absolute;right:-12%;bottom:9%;width:74%;height:17%;background:linear-gradient(120deg,#aaa,#f7f7f7 43%,#858585);border-radius:100% 0 10% 100%;transform:rotate(-21deg); }
.knife-form::after { content:"";position:absolute;right:-28%;top:8%;width:34%;height:84%;background:#513729;border-radius:0 16px 16px 0; }

.saas-mini-nav { background:#f7f8ff; }
.saas-mini-nav button { padding:8px 11px;color:white;background:var(--navy);border:0;border-radius:999px;font-size:7px; }
.saas-mini-copy { padding:45px 30px 0; }
.saas-mini-copy small { color:#626caa;font-size:6px;letter-spacing:.15em; }
.saas-mini-copy h3 { margin:30px 0;font:650 clamp(40px,4vw,62px)/.95 "Manrope";letter-spacing:-.06em; }
.saas-ui { position:absolute;right:6%;bottom:-2%;display:grid;grid-template-columns:48px 1fr;width:70%;height:42%;overflow:hidden;background:white;border:1px solid #dfe4ff;border-radius:13px;box-shadow:0 25px 55px rgba(50,70,160,.16); }
.saas-ui aside { display:grid;align-content:start;gap:15px;padding:17px;border-right:1px solid #e7eaff; }
.saas-ui aside i { width:14px;height:3px;background:#cbd2ed;border-radius:3px; }
.saas-ui main { padding:18px; }
.saas-ui main > div { display:flex;justify-content:space-between;align-items:end; }
.saas-ui main strong { font:700 20px "Manrope"; }
.saas-ui main span { color:var(--muted);font-size:7px; }
.saas-ui main > i { display:block;height:80px;margin-top:22px;background:linear-gradient(to top,rgba(73,99,221,.22),transparent);clip-path:polygon(0 80%,14% 60%,27% 73%,40% 32%,53% 48%,67% 20%,81% 37%,100% 0,100% 100%,0 100%); }

.visual-agency { position:relative; }
.agency-grid { opacity:.5; }
.agency-word {
  position:absolute;left:4%;bottom:-7%;color:transparent;-webkit-text-stroke:1px rgba(40,56,144,.12);font:800 190px/1 "Manrope";letter-spacing:-.09em;
}
.agency-copy { position:relative;z-index:2;padding:80px 6%; }
.agency-copy small { color:var(--blue);font-size:8px;font-weight:800;letter-spacing:.16em; }
.agency-copy h3 { margin:75px 0 0;font:650 clamp(70px,7vw,110px)/.9 "Manrope";letter-spacing:-.07em; }
.agency-copy h3 em { color:var(--cyan);font-style:normal;font-weight:500; }
.agency-orbit { position:absolute;right:7%;top:15%;width:340px;height:340px;border:1px solid rgba(40,56,144,.2);border-radius:50%; }
.agency-orbit::before,.agency-orbit::after { content:"";position:absolute;inset:45px;border:1px dashed rgba(37,171,225,.7);border-radius:50%; }
.agency-orbit::after { inset:100px;border-style:solid;border-color:rgba(40,56,144,.18); }
.agency-orbit i:first-child { position:absolute;left:20%;top:10%;width:10px;height:10px;background:var(--cyan);border-radius:50%;box-shadow:0 0 0 8px rgba(37,171,225,.12); }

.growth-board {
  height:100%;padding:26px;background:white;border-radius:18px 18px 0 0;box-shadow:0 35px 70px rgba(30,45,110,.16);
}
.growth-head { display:flex;justify-content:space-between;color:var(--navy);font-size:9px;font-weight:700; }
.growth-head b { color:#1ca270;font-size:7px;letter-spacing:.12em; }
.growth-metrics { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px; }
.growth-metrics article { display:grid;padding:17px;background:#f7f9ff;border:1px solid var(--line);border-radius:12px; }
.growth-metrics span { color:var(--muted);font-size:8px; }
.growth-metrics strong { margin:15px 0 3px;font:700 27px "Manrope"; }
.growth-metrics i { color:#16936a;font-size:8px;font-style:normal; }
.growth-chart { display:flex;align-items:end;gap:9px;height:280px;margin-top:35px;padding-top:35px;border-bottom:1px solid var(--line); }
.growth-chart i { flex:1;height:var(--h);background:linear-gradient(var(--cyan),var(--blue));border-radius:5px 5px 0 0; }

.property-mini { position:relative;height:100%;overflow:hidden;color:white;background:#7895a3;border-radius:18px 18px 0 0;box-shadow:0 35px 70px rgba(20,40,60,.18); }
.property-top { position:absolute;z-index:4;left:0;right:0;display:flex;justify-content:space-between;padding:22px;font-size:8px;letter-spacing:.12em; }
.property-sky { position:absolute;inset:0;background:linear-gradient(#b9d6e1 0 45%,#718b95 45%); }
.property-building { position:absolute;right:5%;bottom:0;width:68%;height:68%;background:linear-gradient(90deg,#3b4f57,#82969c);clip-path:polygon(15% 10%,100% 0,100% 100%,0 100%,0 23%); }
.property-building i { position:relative;display:inline-block;width:16%;height:22%;margin:12% 3% 0 4%;background:linear-gradient(#bdd7df,#77929d);border:4px solid #3f555e; }
.property-copy { position:absolute;z-index:3;left:30px;bottom:35px; }
.property-copy small { font-size:6px;letter-spacing:.15em; }
.property-copy h3 { margin:8px 0 0;font:600 clamp(36px,3.5vw,55px)/1 "Manrope";letter-spacing:-.05em; }

.portfolio-card-info {
  display:grid;grid-template-columns:1fr auto;gap:25px;align-items:center;padding:22px 3px 0;
}
.portfolio-card-info p { margin:0 0 4px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em; }
.portfolio-card-info h3 { margin:0;font:650 25px "Manrope";letter-spacing:-.04em; }
.card-tags { grid-column:1;display:flex;gap:7px;flex-wrap:wrap;margin-top:-8px; }
.portfolio-card-info > b {
  grid-column:2;grid-row:1/3;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;font-size:19px;transition:.35s;
}
.portfolio-card:hover .portfolio-card-info > b { color:white;background:var(--cyan);border-color:var(--cyan);transform:rotate(45deg); }

.portfolio-note {
  display:flex;justify-content:space-between;align-items:center;gap:35px;margin-top:65px;padding-top:25px;color:var(--muted);border-top:1px solid var(--line);font-size:11px;
}
.portfolio-note p { margin:0; }
.portfolio-note a { color:var(--navy);font-weight:700; }

/* APPROACH */
.portfolio-approach {
  position:relative;
  color:white;
  background:var(--navy);
}
.portfolio-approach::before {
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 4% 50%,rgba(37,171,225,.19),transparent 30%),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;
}
.portfolio-approach-grid { position:relative;z-index:2;display:grid;grid-template-columns:.82fr 1fr;gap:115px; }
.portfolio-approach-sticky { position:sticky;top:125px;align-self:start; }
.portfolio-approach-sticky > p { max-width:520px;margin:38px 0;color:rgba(255,255,255,.62);font-size:18px; }
.portfolio-approach-list { border-top:1px solid var(--line-light); }
.portfolio-approach-list article { display:grid;grid-template-columns:60px 1fr;gap:25px;padding:48px 0;border-bottom:1px solid var(--line-light); }
.portfolio-approach-list article > span { color:var(--cyan);font-size:10px;font-weight:800; }
.portfolio-approach-list small { color:rgba(255,255,255,.38);font-size:8px;font-weight:800;letter-spacing:.15em; }
.portfolio-approach-list h3 { margin:12px 0;font:600 clamp(29px,3vw,43px)/1.06 "Manrope";letter-spacing:-.045em; }
.portfolio-approach-list p { max-width:610px;margin:0;color:rgba(255,255,255,.57); }

/* INDUSTRIES */
.portfolio-industries { background:white; }
.industries-cloud { display:flex;flex-wrap:wrap;gap:12px; }
.industries-cloud span {
  flex:1 1 250px;display:grid;place-items:center;min-height:105px;padding:20px;color:#59617f;background:var(--paper);border:1px solid var(--line);border-radius:16px;font:600 16px "Manrope";transition:.35s;
}
.industries-cloud span:hover { color:white;background:var(--navy);border-color:var(--navy);transform:translateY(-5px); }
.portfolio-contact { padding-top:150px;padding-bottom:150px; }

/* RESPONSIVE */
@media (max-width:1180px) {
  .portfolio-hero-grid { grid-template-columns:.86fr 1.14fr;gap:20px; }
  .portfolio-hero-title { font-size:clamp(62px,6.8vw,94px); }
  .portfolio-approach-grid { gap:70px; }
}
@media (max-width:960px) {
  .portfolio-hero { min-height:auto;padding-top:145px; }
  .portfolio-hero-grid { grid-template-columns:1fr; }
  .portfolio-hero-copy { max-width:840px; }
  .portfolio-hero-art { width:min(100%,760px);min-height:650px;margin:10px auto 0; }
  .portfolio-projects-head,.industries-head { align-items:start;flex-direction:column; }
  .portfolio-card-visual { height:520px; }
  .portfolio-card-wide .portfolio-card-visual { height:620px; }
  .portfolio-approach-grid { grid-template-columns:1fr; }
  .portfolio-approach-sticky { position:relative;top:auto; }
}
@media (max-width:680px) {
  .portfolio-hero { padding-top:126px;padding-bottom:35px; }
  .portfolio-hero-title { font-size:clamp(54px,15.5vw,74px); }
  .portfolio-hero-description { margin-top:28px;font-size:17px; }
  .portfolio-hero-actions { align-items:flex-start;flex-direction:column;gap:24px; }
  .portfolio-hero-art { min-height:470px;margin-top:35px; }
  .work-stack { width:78%;padding:8px;border-radius:16px; }
  .work-stack-one { left:12%;top:10%; }
  .work-stack-two { left:-5%;top:39%; }
  .work-stack-three { right:-5%;top:36%; }
  .stack-industrial { padding:26px 20px; }
  .stack-industrial h3,.stack-store h3,.stack-saas h3 { font-size:30px; }
  .stack-ring { width:90px;height:90px; }
  .mini-dashboard { width:55%; }
  .work-orbit { display:none; }
  .work-float { padding:9px 11px; }
  .work-float strong { font-size:15px; }
  .work-float-a { left:-5px;bottom:2%; }
  .work-float-b { right:-5px;top:3%; }
  .portfolio-hero-foot { align-items:flex-start;flex-direction:column;gap:15px; }
  .featured-case-visual { height:520px;padding:0;border-radius:22px; }
  .featured-browser { height:485px; }
  .featured-nav { grid-template-columns:1fr auto;padding:18px; }
  .featured-nav span { display:none; }
  .featured-copy { padding:55px 25px; }
  .featured-copy h2 { margin-top:38px;font-size:56px; }
  .featured-technical { width:60%;right:-7%; }
  .tech-circle { width:160px;height:160px; }
  .featured-case-info { grid-template-columns:1fr auto;gap:20px; }
  .featured-summary,.featured-meta { grid-column:1; }
  .featured-arrow { grid-column:2;grid-row:1/4;width:50px;height:50px; }
  .portfolio-grid { grid-template-columns:1fr; }
  .portfolio-card-wide { grid-column:auto; }
  .portfolio-card-visual,.portfolio-card-wide .portfolio-card-visual { height:470px;padding:0; }
  .card-industrial-screen { padding:35px 22px; }
  .card-industrial-screen h3 { font-size:50px; }
  .industrial-dial { width:155px;height:155px;right:4%; }
  .store-mini-screen { padding:38px 23px; }
  .store-mini-screen h3 { font-size:47px; }
  .agency-copy { padding:55px 8%; }
  .agency-copy h3 { margin-top:45px;font-size:55px; }
  .agency-orbit { width:180px;height:180px;right:-5%; }
  .agency-word { font-size:105px; }
  .portfolio-note { align-items:flex-start;flex-direction:column; }
  .portfolio-approach-list article { grid-template-columns:42px 1fr; }
}