@media (max-width:1180px){.shell{width:min(var(--shell),calc(100% - 42px))}.nav{grid-template-columns:190px auto auto}.brand img{width:145px;height:64px}.nav-menu{gap:22px}.hero-grid{grid-template-columns:1fr}.hero{padding-top:58px}.hero-visual{min-height:560px}.portfolio-featured{grid-template-columns:1fr}.portfolio-grid{grid-template-columns:repeat(3,1fr)}.services-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.site-header{padding:10px 0}.nav{grid-template-columns:1fr auto;padding:10px 14px}.brand img{width:132px;height:60px}.nav-toggle{display:flex}.nav-menu{position:absolute;left:21px;right:21px;top:88px;display:none;flex-direction:column;align-items:flex-start;gap:0;padding:18px;border:1px solid rgba(246,190,17,.25);border-radius:20px;background:rgba(6,6,6,.96);box-shadow:0 24px 70px rgba(0,0,0,.55)}.nav-menu.open{display:flex}.nav-link{width:100%;padding:14px}.nav-cta{display:none}.section{padding:70px 0}.hero{min-height:auto}.hero-title{font-size:44px}.hero-text{font-size:17px}.hero-actions{align-items:stretch}.btn-lg{width:100%}.value-row{gap:14px}.phone-stage{height:500px}.hero-phone{width:255px}.phone-left{left:4%;top:60px}.phone-right{right:3%;top:95px}.stage-base{width:360px}.services-grid,.portfolio-grid,.contact-grid,.about-grid{grid-template-columns:1fr}.process-wrap{grid-template-columns:1fr;gap:30px}.process-line{display:none}.process-step{display:grid;grid-template-columns:80px 1fr;text-align:left;column-gap:18px;align-items:center}.process-icon{width:74px;height:74px;margin:0;grid-row:span 2}.process-icon img{width:38px}.process-step p{margin:0;max-width:none}.featured-card{grid-template-columns:1fr;min-height:auto}.featured-visual{min-height:auto}.featured-visual img{width:min(330px,100%)}.contact-panel,.contact-intro,.contact-actions{flex-direction:column;align-items:flex-start}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:grid}.modal-list{grid-template-columns:1fr}.modal h2{font-size:34px}}
@media (max-width:520px){.shell{width:calc(100% - 28px)}.hero-title{font-size:38px}.hero-visual{min-height:420px}.phone-stage{height:410px}.hero-phone{width:210px}.phone-left{left:-8px}.phone-right{right:-10px}.section-heading h2{font-size:30px}.portfolio-grid{grid-template-columns:1fr}.service-card,.project-form,.contact-card,.featured-card{padding:22px}.contact-intro h2{font-size:28px}.whatsapp-bubble{width:68px;height:68px}.footer-brand img{width:145px}.modal-card{padding:20px}}

/* ==============================
   V6 FIXES — portfolio modal, process arrow flow, Android responsiveness
   ============================== */
html, body{max-width:100%;overflow-x:hidden}

/* Portfolio cards: keep previews polished but show full image inside modal */
.portfolio-card,.featured-card{touch-action:manipulation}
.featured-visual img{object-fit:cover;object-position:center}
.portfolio-thumb img{object-position:center}

/* Full image modal fix: no crop, no cut, Android friendly */
.modal.open{display:flex;align-items:flex-start;justify-content:center;padding:24px 14px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal-backdrop{position:fixed}
.modal-card{width:min(1080px,calc(100vw - 28px));max-height:none;margin:0 auto 24px;overflow:visible;border-radius:30px;padding:26px;background:linear-gradient(145deg,#15161b,#07080a)}
.modal-close{position:sticky;top:10px;float:right;margin:0 0 8px auto;z-index:8;background:rgba(14,14,16,.88);backdrop-filter:blur(12px);box-shadow:0 12px 34px rgba(0,0,0,.35)}
.modal-portfolio{clear:both}
.modal-media-wrap{width:100%;max-height:none;border-radius:24px;border:1px solid rgba(246,190,17,.26);background:radial-gradient(circle at 50% 0%,rgba(246,190,17,.10),rgba(255,255,255,.025) 48%,rgba(0,0,0,.22));padding:12px;margin:0 0 22px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.modal-media{width:auto;max-width:100%;height:auto;max-height:none;object-fit:contain;border:0;border-radius:18px;margin:0;background:transparent;box-shadow:0 24px 70px rgba(0,0,0,.38)}
.modal-portfolio h3{margin:22px 0 10px;font-size:20px;color:#fff}

/* Premium process arrow-flow */
.process-wrap{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;min-height:0;align-items:stretch;padding:8px 0 18px}
.process-line{display:none!important}
.process-step{position:relative;text-align:left;padding:26px 22px 24px;border:1px solid rgba(246,190,17,.24);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.060),rgba(255,255,255,.018));box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 20px 60px rgba(0,0,0,.24);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,opacity .45s ease;overflow:visible;opacity:.72;transform:translateY(10px)}
.process-wrap.is-visible .process-step{opacity:1;transform:translateY(0)}
.process-wrap.is-visible .process-step:nth-of-type(1){transition-delay:.02s}
.process-wrap.is-visible .process-step:nth-of-type(2){transition-delay:.16s}
.process-wrap.is-visible .process-step:nth-of-type(3){transition-delay:.30s}
.process-wrap.is-visible .process-step:nth-of-type(4){transition-delay:.44s}
.process-step:hover{transform:translateY(-7px);border-color:rgba(246,190,17,.66);box-shadow:0 28px 80px rgba(0,0,0,.42),0 0 45px rgba(246,190,17,.10)}
.process-step:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 0%,rgba(246,190,17,.13),transparent 45%);opacity:.65;pointer-events:none}
.process-step>*{position:relative;z-index:2}
.process-icon{width:82px;height:82px;margin:0 0 18px;border-radius:24px;border:1px solid rgba(246,190,17,.55);background:radial-gradient(circle at 50% 25%,rgba(246,190,17,.20),rgba(255,255,255,.035));box-shadow:0 0 32px rgba(246,190,17,.14),inset 0 1px 0 rgba(255,255,255,.10)}
.process-icon img{width:42px;height:42px}
.process-step h3{font-size:23px;margin:0 0 10px;letter-spacing:-.025em;color:#fff}
.process-step p{max-width:none;margin:0;color:var(--muted);line-height:1.66;font-size:14.5px}
.process-step:not(:last-child)::after{content:"➜";position:absolute;right:-31px;top:46px;width:30px;height:30px;border-radius:999px;display:grid;place-items:center;color:#111;font-size:18px;font-weight:950;background:linear-gradient(135deg,#ffe789,#f6be11 58%,#c98500);box-shadow:0 0 26px rgba(246,190,17,.42);z-index:5;opacity:.55;transform:translateX(-8px) scale(.88);transition:opacity .45s ease,transform .45s ease}
.process-wrap.is-visible .process-step:not(:last-child)::after{opacity:1;transform:translateX(0) scale(1)}
.process-wrap.is-visible .process-step:nth-of-type(1)::after{transition-delay:.22s}
.process-wrap.is-visible .process-step:nth-of-type(2)::after{transition-delay:.40s}
.process-wrap.is-visible .process-step:nth-of-type(3)::after{transition-delay:.58s}

@media (max-width:1180px){
  .process-wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 44px}
  .process-step:nth-of-type(2)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-30px;transform:translate(-50%,-8px) scale(.88)}
  .process-wrap.is-visible .process-step:nth-of-type(2)::after{transform:translate(-50%,0) scale(1)}
}

@media (max-width:820px){
  .section{padding:64px 0}
  .shell{width:calc(100% - 30px)}
  .nav-menu{max-height:calc(100vh - 112px);overflow:auto}
  .hero-copy{text-align:left}
  .hero-title{font-size:clamp(35px,10vw,44px);letter-spacing:-.045em;line-height:1.04}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:12px}
  .value-row{display:grid;grid-template-columns:1fr;gap:11px}
  .services-grid,.portfolio-grid,.contact-grid,.about-grid{grid-template-columns:1fr!important}
  .portfolio-featured{grid-template-columns:1fr!important;gap:18px;margin-bottom:40px}
  .featured-card{grid-template-columns:1fr!important;padding:22px;gap:14px;border-radius:24px}
  .featured-copy h3{font-size:34px}
  .featured-visual{min-height:0;padding-top:6px}
  .featured-visual img{width:min(100%,360px);max-height:none;object-fit:contain}
  .portfolio-thumb img{aspect-ratio:16/11;object-fit:cover}

  .process-wrap{grid-template-columns:1fr!important;gap:28px;padding:4px 0 10px}
  .process-step{display:grid!important;grid-template-columns:72px 1fr;grid-template-rows:auto auto;padding:20px 18px;border-radius:22px;column-gap:16px;align-items:start;text-align:left;min-height:0}
  .process-icon{grid-row:1 / span 2;width:66px;height:66px;margin:0;border-radius:20px}
  .process-icon img{width:34px;height:34px}
  .process-step h3{font-size:21px;margin:2px 0 7px}
  .process-step p{font-size:14px;line-height:1.62;margin:0;max-width:none}
  .process-step:not(:last-child)::after{content:"↓";left:31px;right:auto;top:auto;bottom:-31px;width:28px;height:28px;font-size:17px;transform:translateY(-8px) scale(.88)}
  .process-wrap.is-visible .process-step:not(:last-child)::after{transform:translateY(0) scale(1)}

  .modal.open{padding:10px 8px;align-items:flex-start}
  .modal-card{width:calc(100vw - 16px);padding:16px;border-radius:22px;margin:0 auto 12px}
  .modal-close{top:6px;width:42px;height:42px;border-radius:13px;font-size:26px}
  .modal h2{font-size:30px;line-height:1.08}
  .modal-media-wrap{padding:8px;border-radius:18px;margin-bottom:18px}
  .modal-media{border-radius:14px;max-width:100%;width:100%;height:auto;object-fit:contain}
  .modal-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .modal-actions .btn{width:100%;white-space:normal;line-height:1.25}
  .modal-list{grid-template-columns:1fr!important}
}

@media (max-width:520px){
  .section{padding:56px 0}
  .hero-title{font-size:36px}
  .section-heading h2{font-size:29px;line-height:1.15}
  .section-heading.center{margin-bottom:34px}
  .service-card,.project-form,.contact-card,.featured-card{padding:20px}
  .portfolio-body{padding:16px 16px 18px}
  .contact-actions .btn,.contact-panel .btn{width:100%;white-space:normal;line-height:1.25}
  .contact-actions strong{font-size:21px}
  .modal-card{padding:14px;border-radius:20px}
  .modal-media-wrap{padding:6px}
}