*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#111;background:#fff}.section{padding:110px max(5vw,40px)}a{color:inherit;text-decoration:none}.nav-wrap{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px max(4vw,28px);background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid #eee}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:#fff;font-weight:800;background:radial-gradient(circle at 35% 30%,#6f60ff,#2a1f88 50%,#0c0c13 75%);box-shadow:0 0 20px rgba(81,67,255,.35)}.brand-name{font-weight:800;letter-spacing:-.03em}.brand-name em{font-style:normal;color:#9a9a9d;font-weight:700}.nav{display:flex;align-items:center;gap:28px;font-size:14px}.nav>a:not(.btn){color:#454545}.menu-btn{display:none;border:0;background:none;font-size:28px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;border-radius:999px;font-weight:700;font-size:14px;border:1px solid #ddd;transition:.25s}.btn:hover{transform:translateY(-2px)}.btn-dark{background:#151515;color:#fff;border-color:#151515}.btn-light{background:#fff}.btn-white{background:#fff;color:#111;border-color:#fff}.hero{min-height:760px;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;background:radial-gradient(circle at 72% 18%,rgba(111,96,255,.08),transparent 28%),linear-gradient(#fff,#fff)}.pill{display:inline-flex;gap:9px;align-items:center;border:1px solid #ddd;border-radius:999px;padding:9px 13px;font-size:13px;margin-bottom:28px}.pill span{width:7px;height:7px;background:#5b4df7;border-radius:50%}.hero h1{font-size:clamp(52px,6.5vw,96px);line-height:.96;letter-spacing:-.06em;margin:0 0 26px;max-width:900px}.hero p{font-size:20px;line-height:1.55;color:#555;max-width:660px}.hero-actions{display:flex;gap:14px;margin:34px 0}.proof-row{display:flex;align-items:center;gap:12px;color:#666;font-size:13px}.dots{display:flex}.dots i{width:26px;height:26px;border-radius:50%;margin-left:-5px;border:2px solid #fff}.dots i:nth-child(1){background:#ffe47a}.dots i:nth-child(2){background:#ffb6c8}.dots i:nth-child(3){background:#9fe8d5}.dots i:nth-child(4){background:#a6dcff}.hero-visual{position:relative;height:610px}.browser-card,.phone-card{position:absolute;background:#fff;border:1px solid #e4e4e4;box-shadow:0 30px 90px rgba(0,0,0,.12);overflow:hidden}.browser-card{left:0;right:70px;bottom:25px;border-radius:22px}.browser-top{height:44px;background:#f5f5f5;display:flex;gap:8px;align-items:center;padding:0 15px}.browser-top>span{width:9px;height:9px;border-radius:50%;background:#c9c9c9}.url{margin-left:14px;background:#fff;border-radius:999px;padding:6px 14px;font-size:11px;color:#999;flex:1}.mock{min-height:420px;padding:52px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}.restaurant{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.65)),url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1200&q=80') center/cover}.barber{background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.7)),url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=800&q=80') center/cover}.mock-kicker{font-size:12px;letter-spacing:.25em;margin-bottom:12px}.mock-title{font-size:42px;font-weight:800;line-height:1.02;max-width:420px}.mock-title.small{font-size:31px}.mock-cta{margin-top:20px;width:max-content;background:#fff;color:#111;padding:11px 14px;border-radius:999px;font-size:12px;font-weight:700}.phone-card{width:210px;height:430px;right:0;top:70px;border-radius:34px;border:8px solid #111}.phone-notch{position:absolute;z-index:2;top:7px;left:50%;transform:translateX(-50%);width:80px;height:20px;border-radius:999px;background:#111}.phone-card .mock{height:100%;padding:25px}.eyebrow{color:#5549f7;font-weight:700;font-size:14px;margin-bottom:16px}.eyebrow.light{color:#8f86ff}.benefits h2,.industries h2,.before h2,.work h2,.process h2,.about h2,.cta h2{font-size:clamp(38px,4vw,64px);line-height:1.02;letter-spacing:-.05em;margin:0 0 44px;max-width:980px}.card-grid.six{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card-grid article{padding:28px;border:1px solid #e6e6e6;border-radius:24px}.card-grid article b{color:#6b5cf8}.card-grid h3{font-size:20px;margin:36px 0 8px}.card-grid p{color:#666;line-height:1.55}.dark{background:#0c0c0f;color:#fff}.split-heading{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:46px}.split-heading h2{font-size:clamp(40px,4.5vw,70px);line-height:1;letter-spacing:-.05em;margin:0;max-width:840px}.split-heading p{max-width:420px;color:#777;line-height:1.6}.dark .split-heading p{color:#aaa}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-grid article{padding:30px;border-radius:22px;background:linear-gradient(180deg,#17171b,#111114);border:1px solid #26262d}.service-grid article span{font-size:28px;color:#8d83ff}.service-grid h3{font-size:20px;margin:30px 0 10px}.service-grid p{color:#aaa;line-height:1.55}.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.industry-grid div{padding:24px;border:1px solid #e6e6e6;border-radius:18px;font-weight:700;background:linear-gradient(180deg,#fff,#fafafa)}.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.project{height:430px;border-radius:28px;padding:30px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center;position:relative;overflow:hidden}.project:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.75))}.project>*{position:relative}.project h3{font-size:40px;margin:10px 0 8px}.project p{max-width:420px;color:#ddd}.project-tag{font-size:12px;letter-spacing:.15em;text-transform:uppercase}.steak{background-image:url('https://images.unsplash.com/photo-1550966871-3ed3cdb5ed0c?auto=format&fit=crop&w=1200&q=80')}.barberp{background-image:url('https://images.unsplash.com/photo-1622287162716-f311baa1a2b8?auto=format&fit=crop&w=1200&q=80')}.hvac{background-image:url('https://images.unsplash.com/photo-1581579185169-7c3f0eac8b79?auto=format&fit=crop&w=1200&q=80')}.detail{background-image:url('https://images.unsplash.com/photo-1607860108855-64acf2078ed9?auto=format&fit=crop&w=1200&q=80')}.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}.compare-card{padding:34px;border-radius:26px;border:1px solid #e7e7e7}.compare-card.bad{background:#f7f7f7}.compare-card.good{background:#111;color:#fff}.compare-card span{font-size:12px;letter-spacing:.2em}.compare-card h3{font-size:30px}.compare-card ul{padding-left:20px;line-height:2;color:#777}.compare-card.good ul{color:#ccc}.arrow{font-size:36px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.process-grid article{border-top:1px solid #333;padding-top:24px}.process-grid b{color:#8f86ff}.process-grid h3{font-size:22px;margin:40px 0 10px}.process-grid p{color:#aaa;line-height:1.55}.about{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:center}.founder-card{position:relative;min-height:640px;border-radius:32px;overflow:hidden;background:#111}.founder-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.founder-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.78))}.founder-meta{position:absolute;left:34px;right:34px;bottom:32px;color:#fff}.founder-label{font-size:12px;letter-spacing:.18em;color:#aaa;margin-bottom:18px}.founder-meta h3{font-size:34px;margin:0 0 6px}.founder-meta p{margin:0;color:#bbb}.about-copy p{font-size:18px;line-height:1.7;color:#666}.about-copy .btn{margin-top:18px}.cta{background:linear-gradient(125deg,#161619,#09090a);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:40px}.cta h2{margin-bottom:10px}.cta p{color:#aaa;font-size:18px}.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}.contact-copy h2{font-size:clamp(48px,5.2vw,76px);line-height:.98;letter-spacing:-.05em;margin:0 0 20px}.contact-copy>p{font-size:18px;line-height:1.6;color:#666;margin-bottom:44px}.contact-card{display:flex;align-items:center;gap:18px;padding:20px;border:1px solid #e4e4e4;border-radius:20px;margin-bottom:14px}.contact-card>span{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#111;color:#fff;font-size:22px}.contact-card small{display:block;color:#777;margin-bottom:3px}.contact-card strong{font-size:17px}.form-card{border:1px solid #e0e0e0;border-radius:28px;padding:34px;position:relative}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:flex;flex-direction:column;gap:9px;font-weight:600;margin-bottom:18px}input,select,textarea{width:100%;border:1px solid #ddd;border-radius:16px;padding:16px 17px;font:inherit;font-weight:400;background:#fff;outline:none}input:focus,select:focus,textarea:focus{border-color:#7568ff;box-shadow:0 0 0 3px rgba(117,104,255,.1)}textarea{resize:vertical}.submit{width:100%;margin-top:4px}.form-note{text-align:center;color:#999;font-size:12px}.success{position:absolute;inset:0;background:#fff;border-radius:28px;display:grid;place-items:center;align-content:center;text-align:center;padding:40px}.check{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:#5b4df7;color:#fff;font-size:34px;margin-bottom:20px}.success h3{font-size:36px;margin:0 0 10px}.success p{max-width:480px;color:#666;line-height:1.55}.link-btn{background:none;border:0;text-decoration:underline;font:inherit;font-weight:600;cursor:pointer}footer{background:#09090a;color:#fff;padding:70px max(5vw,40px) 30px}.footer-brand{margin-bottom:22px}.footer-links{display:flex;gap:20px;margin:28px 0;color:#aaa}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #222;padding-top:24px;color:#777;font-size:13px}@media(max-width:980px){.nav{display:none;position:absolute;top:76px;left:18px;right:18px;flex-direction:column;align-items:stretch;background:#fff;border:1px solid #eee;border-radius:20px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.12)}.nav.open{display:flex}.menu-btn{display:block}.hero,.about,.contact{grid-template-columns:1fr}.hero{padding-top:70px}.hero-visual{height:520px}.card-grid.six,.service-grid{grid-template-columns:repeat(2,1fr)}.industry-grid{grid-template-columns:repeat(3,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}.split-heading{display:block}.split-heading p{margin-top:18px}.about{gap:36px}.founder-card{min-height:560px}}@media(max-width:640px){.section{padding:78px 22px}.nav-wrap{padding:14px 18px}.brand-name{font-size:14px}.brand-mark{width:38px;height:38px}.hero{min-height:auto;gap:20px}.hero h1{font-size:52px}.hero p{font-size:17px}.hero-actions{flex-direction:column;align-items:stretch}.hero-visual{height:430px}.browser-card{right:24px}.phone-card{width:150px;height:330px;top:40px}.mock{min-height:330px;padding:26px}.mock-title{font-size:28px}.mock-title.small{font-size:22px}.card-grid.six,.service-grid,.industry-grid,.portfolio-grid,.process-grid,.form-grid{grid-template-columns:1fr}.project{height:330px}.compare{grid-template-columns:1fr}.arrow{transform:rotate(90deg);justify-self:center}.founder-card{min-height:470px}.cta{flex-direction:column;align-items:flex-start}.footer-bottom{flex-direction:column;gap:10px}.proof-row{align-items:flex-start}.contact-card strong{font-size:14px;word-break:break-all}}

/* FORM FIX */
.success[hidden]{display:none!important}
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* PORTFOLIO V4 — agency showcase */
.portfolio-v4{background:linear-gradient(180deg,#fff 0%,#fbfbfc 100%);overflow:hidden}
.portfolio-heading{margin-bottom:70px}
.agency-showcase{display:flex;flex-direction:column;gap:125px}
.agency-project{display:grid;grid-template-columns:.31fr .69fr;gap:56px;align-items:center}
.agency-project.layout-right{grid-template-columns:.69fr .31fr}
.agency-project.layout-right .agency-copy{order:2}
.agency-project.layout-right .agency-visual{order:1}

.agency-copy{padding:16px 0}
.agency-kicker{display:block;color:#6657f5;font-size:12px;font-weight:800;letter-spacing:.13em;margin-bottom:16px}
.agency-copy h3{font-size:clamp(40px,4.3vw,66px);line-height:.98;letter-spacing:-.055em;margin:0 0 22px}
.agency-copy p{font-size:18px;line-height:1.68;color:#666;max-width:430px}
.agency-meta{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;margin-top:30px}
.agency-meta span{display:block;width:38px;height:1px;background:#111}

.agency-visual{position:relative;min-height:610px;border-radius:36px;border:1px solid #ededed;overflow:hidden}
.visual-warm{background:
  radial-gradient(circle at 12% 12%,rgba(255,218,174,.56),transparent 28%),
  linear-gradient(135deg,#faf6ef,#fff)}
.visual-amber{background:
  radial-gradient(circle at 86% 10%,rgba(218,155,89,.20),transparent 31%),
  linear-gradient(135deg,#f9f5ef,#fff)}
.visual-cool{background:
  radial-gradient(circle at 18% 14%,rgba(51,92,255,.16),transparent 32%),
  linear-gradient(135deg,#f4f7fb,#fff)}
.visual-blue{background:
  radial-gradient(circle at 82% 12%,rgba(39,133,209,.18),transparent 33%),
  linear-gradient(135deg,#f4f8fb,#fff)}

.screen-shell{position:absolute;top:7%;right:5%;width:79%;height:86%;border-radius:20px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.07);box-shadow:0 34px 95px rgba(0,0,0,.20)}
.screen-shell:before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);pointer-events:none;z-index:2}
.screen-shell img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

.phone-shell{position:absolute;bottom:6%;width:150px;height:300px;border-radius:31px;overflow:hidden;background:#111;border:7px solid #111;box-shadow:0 28px 65px rgba(0,0,0,.32);z-index:3}
.phone-shell:before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:58px;height:13px;border-radius:999px;background:#111;z-index:4}
.phone-shell img{width:100%;height:100%;object-fit:cover;display:block}
.left-phone{left:4%}
.right-phone{right:4%}

.agency-project.layout-left .screen-shell{right:4%}
.agency-project.layout-left .right-phone{right:auto;left:4%}
.agency-project.layout-right .screen-shell{left:4%;right:auto}
.agency-project.layout-right .left-phone{left:auto;right:4%}

@media(max-width:980px){
  .agency-project,.agency-project.layout-right{grid-template-columns:1fr;gap:28px}
  .agency-project.layout-right .agency-copy,.agency-project.layout-right .agency-visual{order:initial}
  .agency-visual{min-height:520px}
  .screen-shell{width:84%}
}
@media(max-width:640px){
  .agency-showcase{gap:76px}
  .agency-copy p{font-size:16px}
  .agency-visual{min-height:405px;border-radius:26px}
  .screen-shell{top:7%;width:88%;height:82%;right:2%!important;left:auto!important;border-radius:14px}
  .phone-shell{width:108px;height:220px;border-width:5px;border-radius:22px;bottom:4%}
  .agency-project.layout-left .right-phone,
  .agency-project.layout-right .left-phone{left:1%;right:auto}
}


/* ---------- V5 PREMIUM HOVER POLISH ---------- */
.card-grid article{
  position:relative;
  overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.card-grid article::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  box-shadow:inset 0 0 0 1px rgba(94,79,246,.55);
  transition:opacity .28s ease;
}
.card-grid article:hover{
  transform:translateY(-8px);
  border-color:rgba(94,79,246,.38);
  box-shadow:0 22px 50px rgba(17,17,17,.10);
  background:linear-gradient(180deg,#fff,#fbfaff);
}
.card-grid article:hover::after{opacity:1}
.card-grid article b{
  display:inline-block;
  transition:transform .28s ease, color .28s ease;
}
.card-grid article:hover b{
  transform:translateY(-2px) scale(1.08);
  color:#4e3df5;
}

.service-grid article{
  position:relative;
  overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.service-grid article::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 10%,rgba(114,98,255,.18),transparent 38%);
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
}
.service-grid article:hover{
  transform:translateY(-8px);
  border-color:rgba(126,111,255,.48);
  box-shadow:0 24px 55px rgba(0,0,0,.32);
  background:linear-gradient(180deg,#1b1b22,#121216);
}
.service-grid article:hover::before{opacity:1}
.service-grid article span,
.service-grid article h3,
.service-grid article p{
  position:relative;
  z-index:1;
}
.service-grid article span{
  display:inline-block;
  transition:transform .28s ease, filter .28s ease;
}
.service-grid article:hover span{
  transform:translateY(-3px) scale(1.12);
  filter:drop-shadow(0 0 10px rgba(126,111,255,.35));
}

.industry-grid div{
  cursor:default;
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
.industry-grid div:hover{
  transform:translateY(-6px);
  border-color:rgba(94,79,246,.34);
  box-shadow:0 16px 36px rgba(17,17,17,.08);
  background:linear-gradient(180deg,#fff,#faf9ff);
}

.process-grid article{
  transition:transform .24s ease, border-color .24s ease;
}
.process-grid article:hover{
  transform:translateY(-5px);
  border-top-color:#7568ff;
}

.agency-project{
  transition:transform .28s ease;
}
.agency-project:hover{
  transform:translateY(-4px);
}
.agency-project .agency-visual{
  transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}
.agency-project:hover .agency-visual{
  transform:translateY(-6px);
  border-color:rgba(94,79,246,.28);
  box-shadow:0 26px 70px rgba(17,17,17,.12);
}

@media (hover:none){
  .card-grid article:hover,
  .service-grid article:hover,
  .industry-grid div:hover,
  .process-grid article:hover,
  .agency-project:hover,
  .agency-project:hover .agency-visual{
    transform:none;
    box-shadow:initial;
  }
}


/* ===== V14 FINAL — clean, reference-driven case study composition ===== */
.hero-clean{display:block;min-height:740px;padding-top:118px;padding-bottom:92px;background:radial-gradient(circle at 78% 18%,rgba(103,86,255,.08),transparent 26%),linear-gradient(180deg,#fff,#fbfbff)}
.hero-copy-clean{max-width:1180px}
.hero-copy-clean h1{font-size:clamp(76px,8vw,136px);line-height:.84;letter-spacing:-.075em;max-width:1260px;margin:32px 0 34px}
.hero-copy-clean>p{max-width:800px;font-size:22px;line-height:1.55;color:#5f5f64}

.portfolio-v14{background:#fff;overflow:hidden}
.case-study-list{display:flex;flex-direction:column;gap:145px;margin-top:78px}
.case-study{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(290px,.72fr);gap:58px;align-items:center}
.case-study.case-right{grid-template-columns:minmax(290px,.72fr) minmax(0,1.75fr)}
.case-copy>span{font-size:12px;font-weight:800;letter-spacing:.13em;color:#6253f7}
.case-copy h3{font-size:clamp(44px,4.2vw,70px);line-height:.98;letter-spacing:-.055em;margin:16px 0 20px}
.case-copy p{font-size:18px;line-height:1.66;color:#67676d;max-width:420px}
.case-meta{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;margin-top:28px}.case-meta i{display:block;width:38px;height:1px;background:#111}

.case-visual{height:660px;border-radius:34px;position:relative;overflow:hidden;border:1px solid #ececf0;background:#f6f4f2}
.case-backdrop{position:absolute;inset:-22px;background-size:cover;background-position:center;filter:blur(10px) saturate(.88);opacity:.52;transform:scale(1.04)}
.bella-backdrop{background-image:url('https://id.marinabaysands.com/content/dam/marinabaysands/restaurants-listing/cut/cut-1080x610.jpg')}
.barber-backdrop{background-image:url('https://d3m9l0v76dty0.cloudfront.net/konimbo_dev_main/files-uploaded-by-lambda/admin/areeb/a3ee681f1fbc365ea3aaf2e5d8f8f0d2d7c3a4fb/3843178971.png')}
.detail-backdrop{background-image:url('https://d2xsxph8kpxj0f.cloudfront.net/310519663378210706/C4wjd5etj6SVbXiHmc27gD/detailing-hero-bRmk4Vh3CqMvp5M355LXDh.webp')}
.hvac-backdrop{background-image:url('https://www.guide-artisan.fr/img/actualites/960x640/climatiseur-sous-dimensionne-ou-sur-dimensionne-quels-sont-les-risques-et-les-consequences-pour-votre-systeme-de-climatisation.jpg')}

.browser-shell{position:absolute;left:6%;top:5%;width:81%;height:89%;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 36px 90px rgba(0,0,0,.26);border:1px solid rgba(0,0,0,.08);z-index:2}
.case-barber .browser-shell,.case-hvac .browser-shell{left:13%}
.browser-chrome{height:40px;background:#f4f4f4;display:flex;align-items:center;gap:7px;padding:0 12px}.browser-chrome i{width:8px;height:8px;border-radius:50%;background:#cacaca}.browser-chrome span{margin-left:8px;flex:1;background:#fff;border-radius:999px;text-align:center;padding:6px;color:#aaa;font-size:10px}
.mini-site{height:calc(100% - 40px);display:flex;flex-direction:column;background:#111;overflow:hidden}.mini-nav{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#101011;color:#ddd;font-size:8px;flex:none}.mini-nav b{font-size:13px;letter-spacing:.06em;color:#fff}.mini-nav strong{color:#d5964c}.light-nav{background:#fff;color:#34556b}.light-nav b{color:#176da7}.light-nav strong{color:#176da7}
.mini-hero{height:235px;background-size:cover;background-position:center;position:relative;flex:none}.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.91),rgba(0,0,0,.48) 52%,rgba(0,0,0,.08))}.hvac-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(239,249,255,.98),rgba(239,249,255,.72) 55%,rgba(239,249,255,.10))}.mini-hero-copy{position:absolute;z-index:2;left:5%;top:50%;transform:translateY(-50%);max-width:58%;color:#fff}.mini-hero-copy small{font-size:6.5px;letter-spacing:.18em}.mini-hero-copy h4{font-size:31px;line-height:.97;letter-spacing:-.04em;margin:9px 0 10px}.mini-hero-copy p{font-size:9px;line-height:1.45;color:#ddd;max-width:290px}.mini-hero-copy button{border:0;border-radius:3px;padding:8px 10px;margin-top:10px;font-size:6px;font-weight:800}.dark-mini-copy{color:#16364d}.dark-mini-copy p{color:#4d7085}
.bella-hero{background-image:url('https://acatering.lovable.app/assets/svc-almuerzos-HdYn7yFA.jpg');background-position:center 54%}.bella-hero button{background:#d2aa72;color:#111}
.barber-hero{background-image:url('https://storage.googleapis.com/appaka-swissbarbers-images/blog/4770253b-a485-46f1-83c8-0af981afd577/luxury-barber-experience-original.jpg');background-position:center 42%}.barber-hero button{background:#d69048;color:#111}
.detail-hero{background-image:url('https://m.blueverse.ae/images/hero-car.jpg');background-position:center 54%}.detail-hero button{background:#2a78ff;color:#fff}
.hvac-hero{background-image:url('https://cdn.prod.website-files.com/68d11b2c43a7b995a2a94b39/68d243cbc89ec3d7c322f3bd_Your-Aircon-is-Cooling-Again--Tips-for-Maintaining-Efficiency-and-Comfort-in-SA-%281%29.webp');background-position:center 45%}.hvac-hero button{background:#176da7;color:#fff}

.mini-label{text-align:center;background:#151517;color:#fff;font-size:8px;font-weight:800;letter-spacing:.08em;padding:8px;flex:none}.light-label{background:#f4fbff;color:#176da7}
.mini-services{display:grid;gap:7px;padding:7px 10px;background:#111;flex:none}.mini-services.three{grid-template-columns:repeat(3,1fr)}.mini-services.four{grid-template-columns:repeat(4,1fr)}.light-services{background:#f4fbff}
.photo-service{height:68px;position:relative;border-radius:4px;overflow:hidden;background-size:cover;background-position:center;color:#fff;padding:8px;display:flex;flex-direction:column;justify-content:flex-end}.photo-service:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 15%,rgba(0,0,0,.82))}.photo-service span,.photo-service small{position:relative;z-index:2}.photo-service span{font-size:6.5px;font-weight:800}.photo-service small{font-size:5.5px;color:#ddd;margin-top:2px}
.bella-s1{background-image:url('https://www.restaurantware.com/cdn/shop/files/RWP1170WGD-3-LR.jpg?v=1774438948&width=600')}.bella-s2{background-image:url('https://acatering.lovable.app/assets/svc-almuerzos-HdYn7yFA.jpg')}.bella-s3{background-image:url('https://id.marinabaysands.com/content/dam/marinabaysands/restaurants-listing/cut/cut-1080x610.jpg')}
.barber-s1{background-image:url('https://payment-ag.de/assets/hero-barbershop-DVEyQvI-.jpg')}.barber-s2{background-image:url('https://img1.wsimg.com/isteam/ip/2b33ff5b-939c-4097-bd41-477940da6775/barber.png')}.barber-s3{background-image:url('https://storage.googleapis.com/appaka-swissbarbers-images/blog/4770253b-a485-46f1-83c8-0af981afd577/luxury-barber-experience-original.jpg')}.barber-s4{background-image:url('https://d3m9l0v76dty0.cloudfront.net/konimbo_dev_main/files-uploaded-by-lambda/admin/areeb/a3ee681f1fbc365ea3aaf2e5d8f8f0d2d7c3a4fb/3843178971.png')}
.detail-s1{background-image:url('https://nahileo.online/imgs/ceramic-coating-car-application.jpg')}.detail-s2{background-image:url('https://d2xsxph8kpxj0f.cloudfront.net/310519663378210706/C4wjd5etj6SVbXiHmc27gD/detailing-hero-bRmk4Vh3CqMvp5M355LXDh.webp')}.detail-s3{background-image:url('https://top-choicedetailing.com/wp-content/uploads/2025/03/interior-detailing.jpg'),url('https://primary.jwwb.nl/pexels/68/6873185.jpeg')}
.hvac-s1{background-image:url('https://koala.sh/api/image/v2-rj61x-zhv1h.jpg?dream=&height=832&width=1216')}.hvac-s2{background-image:url('https://www.guide-artisan.fr/img/actualites/960x640/climatiseur-sous-dimensionne-ou-sur-dimensionne-quels-sont-les-risques-et-les-consequences-pour-votre-systeme-de-climatisation.jpg')}.hvac-s3{background-image:url('https://cdn.prod.website-files.com/68d11b2c43a7b995a2a94b39/68d243cbc89ec3d7c322f3bd_Your-Aircon-is-Cooling-Again--Tips-for-Maintaining-Efficiency-and-Comfort-in-SA-%281%29.webp')}.hvac-s4{background-image:url('https://koala.sh/api/image/v2-rj61x-zhv1h.jpg?dream=&height=832&width=1216')}

.mini-lower,.barber-info-row,.detail-lower,.hvac-lower{height:86px;display:grid;gap:1px;background:#2a2a2c;flex:none}.mini-lower{grid-template-columns:1fr 1fr}.reservation-mini{background:#141416;color:#fff;padding:11px 13px}.reservation-mini b{font-size:8px}.reservation-mini>div{display:flex;gap:4px;margin-top:6px}.reservation-mini span,.reservation-mini button{font-size:5.5px;padding:4px 5px;background:#fff;color:#111;border:0}.bella-room{background:url('https://id.marinabaysands.com/content/dam/marinabaysands/restaurants-listing/cut/cut-1080x610.jpg') center/cover}
.barber-info-row{grid-template-columns:1fr 1fr .8fr}.barber-tools-photo{background:url('https://img1.wsimg.com/isteam/ip/2b33ff5b-939c-4097-bd41-477940da6775/barber.png') center/cover}.barber-chair-photo{background:url('https://d3m9l0v76dty0.cloudfront.net/konimbo_dev_main/files-uploaded-by-lambda/admin/areeb/a3ee681f1fbc365ea3aaf2e5d8f8f0d2d7c3a4fb/3843178971.png') center/cover}.barber-map{background:#151517;color:#fff;padding:11px;display:flex;flex-direction:column;gap:5px}.barber-map b{font-size:7px;color:#d69048}.barber-map span{font-size:6px;color:#ccc}
.detail-lower{grid-template-columns:1.15fr .7fr .7fr}.detail-process{background:#12151a;color:#fff;padding:10px;display:flex;flex-direction:column;gap:4px}.detail-process b{font-size:8px}.detail-process span{font-size:6px;color:#aaa}.detail-process button{font-size:6px;background:#2a78ff;color:#fff;border:0;padding:5px}.detail-before,.detail-after{background-size:cover;background-position:center;position:relative}.detail-before{background-image:url('https://primary.jwwb.nl/pexels/68/6873185.jpeg')}.detail-after{background-image:url('https://d2xsxph8kpxj0f.cloudfront.net/310519663378210706/C4wjd5etj6SVbXiHmc27gD/detailing-hero-bRmk4Vh3CqMvp5M355LXDh.webp')}.detail-before span,.detail-after span{position:absolute;left:6px;bottom:6px;color:#fff;font-size:6px;font-weight:800;background:rgba(0,0,0,.55);padding:3px 4px}
.hvac-lower{grid-template-columns:.8fr 1fr .9fr;background:#d8e6ef}.review-panel,.hvac-contact{background:#fff;color:#16344a;padding:10px;display:flex;flex-direction:column;gap:5px}.review-panel b{font-size:10px;color:#176da7}.review-panel span,.hvac-contact span{font-size:6px;color:#678095}.hvac-outdoor{background:url('https://koala.sh/api/image/v2-rj61x-zhv1h.jpg?dream=&height=832&width=1216') center/cover}.hvac-contact b{font-size:7px}.hvac-contact button{font-size:6px;background:#176da7;color:#fff;border:0;padding:5px}.mini-footer{height:24px;background:#111;color:#a9a9ad;font-size:5.5px;display:flex;align-items:center;justify-content:center;letter-spacing:.08em;flex:none}.light-footer{background:#fff;color:#58768a}

.premium-phone{position:absolute;width:132px!important;height:286px!important;border:7px solid #111!important;border-radius:30px!important;background:#111!important;overflow:hidden;z-index:5;box-shadow:0 28px 58px rgba(0,0,0,.30);padding:0!important}.right-phone-v14{right:2.5%;bottom:7%}.left-phone-v14{left:2.5%;bottom:7%}.phone-screen{width:100%;height:100%;background:#111;display:flex;flex-direction:column}.mobile-brand{height:42px;padding:22px 10px 0;color:#fff;font-size:6px;font-weight:800;letter-spacing:.06em;background:#111}.dark-brand{background:#fff;color:#176da7}.mobile-hero{height:155px;position:relative;background-size:cover;background-position:center;flex:none}.mobile-hero>div:last-child{position:absolute;left:10px;right:8px;bottom:12px;z-index:2;color:#fff}.mobile-hero small{font-size:5px;letter-spacing:.12em}.mobile-hero h5{font-size:16px;line-height:1;margin:5px 0 8px}.mobile-hero button{border:0;border-radius:999px;padding:6px 7px;font-size:5px;font-weight:800}.bella-mobile-hero{background-image:url('https://www.restaurantware.com/cdn/shop/files/RWP1170WGD-3-LR.jpg?v=1774438948&width=600')}.bella-mobile-hero button{background:#d2aa72}.barber-mobile-hero{background-image:url('https://payment-ag.de/assets/hero-barbershop-DVEyQvI-.jpg')}.barber-mobile-hero button{background:#d69048}.detail-mobile-hero{background-image:url('https://d2xsxph8kpxj0f.cloudfront.net/310519663378210706/C4wjd5etj6SVbXiHmc27gD/detailing-hero-bRmk4Vh3CqMvp5M355LXDh.webp')}.detail-mobile-hero button{background:#2a78ff;color:#fff}.hvac-phone-screen{background:#fff}.hvac-mobile-hero{background-image:url('https://www.guide-artisan.fr/img/actualites/960x640/climatiseur-sous-dimensionne-ou-sur-dimensionne-quels-sont-les-risques-et-les-consequences-pour-votre-systeme-de-climatisation.jpg')}.hvac-mobile-hero .dark-phone-copy{position:absolute;left:10px;right:8px;bottom:12px;z-index:2;color:#16364d}.hvac-mobile-hero button{background:#176da7;color:#fff}.mobile-cards{height:50px;display:grid;grid-template-columns:1fr 1fr;background:#171719;color:#fff}.mobile-cards span{font-size:5px;display:grid;place-items:center;border-right:1px solid #29292c}.mobile-bottom{flex:1;background:#0f0f10;color:#8b8b91;font-size:4.5px;display:grid;place-items:center}.light-mobile-cards{background:#f4fbff;color:#176da7}.light-mobile-bottom{background:#fff;color:#678095}

.case-study{transition:transform .28s ease}.case-study:hover{transform:translateY(-4px)}.case-visual{transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease}.case-study:hover .case-visual{transform:translateY(-6px);border-color:rgba(94,79,246,.25);box-shadow:0 30px 75px rgba(17,17,17,.12)}
@media(max-width:1050px){.case-study,.case-study.case-right{grid-template-columns:1fr;gap:30px}.case-study.case-right .case-copy{order:2}.case-study.case-right .case-visual{order:1}.case-visual{height:600px}}
@media(max-width:680px){.hero-clean{min-height:auto;padding-top:90px;padding-bottom:74px}.hero-copy-clean h1{font-size:58px;line-height:.9}.hero-copy-clean>p{font-size:18px}.case-study-list{gap:84px}.case-visual{height:455px;border-radius:24px}.browser-shell,.case-barber .browser-shell,.case-hvac .browser-shell{left:3%;top:4%;width:94%;height:92%}.premium-phone{display:none!important}.mini-nav{padding:0 10px}.mini-nav span{font-size:0}.mini-nav strong{font-size:7px}.mini-hero{height:210px}.mini-hero-copy{left:4%;max-width:78%}.mini-hero-copy h4{font-size:27px}.mini-services.four{grid-template-columns:repeat(2,1fr)}.mini-services.four .photo-service:nth-child(n+3){display:none}.mini-lower,.barber-info-row,.detail-lower,.hvac-lower{display:none}.case-copy h3{font-size:48px}}


/* ===== V15B — phone OUTSIDE the large mockup area ===== */

/* Leave room between the mockup block and the descriptive text */
.case-study,
.case-study.case-right{
  gap: 104px !important;
}

/* Let the phone physically leave the large visual panel */
.case-visual{
  overflow: visible !important;
}

/* Keep the blurred/photo background visually contained inside the rounded panel */
.case-backdrop{
  border-radius: 34px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 34px);
}

/* Desktop website remains inside the large visual panel */
.browser-shell{
  width: 86% !important;
}

/* BELLA + GLOSSWORKS: phone sits OUTSIDE on the right */
.case-bella .right-phone-v14,
.case-detail .right-phone-v14{
  right: -86px !important;
  left: auto !important;
  bottom: 58px !important;
}

/* BARBER + HVAC: phone sits OUTSIDE on the left */
.case-barber .left-phone-v14,
.case-hvac .left-phone-v14{
  left: -86px !important;
  right: auto !important;
  bottom: 58px !important;
}

/* Give the phone a clean floating treatment like the references */
.premium-phone{
  z-index: 30 !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.24) !important;
}

/* On tablet, keep it closer so it doesn't collide with copy */
@media (max-width: 1180px) and (min-width: 681px){
  .case-study,
  .case-study.case-right{
    gap: 72px !important;
  }

  .case-bella .right-phone-v14,
  .case-detail .right-phone-v14{
    right: -58px !important;
  }

  .case-barber .left-phone-v14,
  .case-hvac .left-phone-v14{
    left: -58px !important;
  }
}

/* Mobile remains clean: no floating phone */
@media (max-width: 680px){
  .case-study,
  .case-study.case-right{
    gap: 30px !important;
  }

  .case-visual{
    overflow: hidden !important;
  }

  .premium-phone{
    display: none !important;
  }

  .browser-shell,
  .case-barber .browser-shell,
  .case-hvac .browser-shell{
    width: 94% !important;
  }
}
