/* =====================================================================
   PROMERA — RESPONSIVE LAYER + EXTRA MOTION
   Loaded AFTER styles.css. It only adds/overrides layout rules for
   tablets, phones and very large screens. No content is changed.
   To turn it off: remove the responsive.css <link> and responsive.js
   <script> from index.html.
   Breakpoints: 1228 · 1100 · 940 · 900 · 640 · 480 · 360 (+ landscape)
   ===================================================================== */

/* ---------- Global safety ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:clip;max-width:100%}
img,video,svg{max-width:100%}
section{overflow-x:clip}
.bgtitle{font-size:clamp(28px,9vw,120px);overflow-wrap:anywhere}
p,h1,h2,h3,h4,li{overflow-wrap:break-word}
.muted,.card{min-width:0}

/* ---------- Extra-large screens ---------- */
@media(min-width:1600px){
  .wrap{max-width:1320px}
  .hero h1{font-size:clamp(40px,5.2vw,88px)}
}
@media(min-width:2200px){
  html{font-size:112.5%}
  .wrap{max-width:1500px}
}

/* ---------- Laptops / small desktops ---------- */
@media(max-width:1228px){
  .navin.wrap{padding-left:24px!important;padding-right:24px!important}
}
@media(max-width:1100px){
  .navlinks{gap:22px}
  .ba-grid{gap:20px}
  .ba-tag{font-size:12px;padding:6px 10px}
  .ba-title{font-size:19px}
  .ba-desc{font-size:14px}
  .step .card{width:300px!important}
}

/* ---------- Mobile navigation (hamburger) ---------- */
.nav-toggle,.mnav{display:none}

/* ---------- Tablets & below ---------- */
@media(max-width:940px){
  .hero{padding:48px 0 76px}
  .herogrid{gap:34px}
  .herogrid>div:last-child{width:100%;max-width:540px;margin:0 auto}
  /* entrance: vertical instead of sideways so nothing pokes out of the screen */
  .hero .herogrid>div:last-child{animation:heroIn 1s cubic-bezier(.16,1,.3,1) .45s backwards}
}

@media(max-width:900px){
  section{padding:68px 0}
  .bighead{margin-bottom:30px}

  /* nav */
  .navin.wrap{padding:10px 18px!important;gap:10px}
  .navin .btn{margin-left:auto;padding:10px 16px!important;font-size:13px!important;white-space:nowrap}
  .logo-img{height:50px;max-width:130px}
  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:44px;height:44px;border-radius:12px;border:1px solid var(--border2);background:var(--surface);
    cursor:pointer;padding:0;flex-shrink:0;-webkit-appearance:none;appearance:none
  }
  .nav-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--text);transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .2s}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mnav{
    display:grid;position:absolute;left:0;right:0;top:100%;
    background:var(--bg);
    border-bottom:1px solid var(--border);box-shadow:0 24px 40px -24px rgba(22,78,74,.45);
    padding:6px 18px 16px;max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow:auto;
    visibility:hidden;opacity:0;transform:translateY(-10px);
    transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1),visibility 0s .4s
  }
  .mnav.open{visibility:visible;opacity:1;transform:none;transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1),visibility 0s}
  .mnav a{
    display:flex;align-items:center;justify-content:space-between;padding:15px 6px;font-size:16.5px;font-weight:600;
    color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);
    opacity:0;transform:translateX(-14px);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1),color .2s
  }
  .mnav a::after{content:'↗';color:var(--muted);font-weight:400;font-size:14px}
  .mnav a:last-child{border-bottom:0}
  .mnav.open a{opacity:1;transform:none;transition-delay:calc(var(--i)*55ms + 80ms)}
  .mnav a:active{color:var(--pink)}

  /* testimonials (inline 2fr/1fr grid) */
  #testiGrid{grid-template-columns:1fr!important;gap:16px!important}

  /* process steps (inline flex row + fixed 340px card) */
  .step{padding:30px 0}
  .step>div{flex-direction:column;gap:16px!important}
  .step .card{width:100%!important}
  .step h3{font-size:22px!important}

  /* story */
  .storygrid{gap:36px}
  .storygrid>div:first-child{width:100%;max-width:380px;margin:0 auto}

  /* services / results */
  .svc-grid{gap:30px}
  .svc-grid h3{font-size:25px!important}
  .case{gap:30px}
  .gstack-wrap{max-width:340px}

  /* results block under the case study */
  #results .wrap>div[style*="margin-top:100px"]{margin-top:64px!important}
  .problems{margin-top:40px;gap:16px}

  /* footer */
  .cgrid{gap:34px}
  footer{padding-top:52px}
  .foot-bottom{margin-top:34px}

  /* iOS: 16px inputs stop the page zooming when a field is focused */
  .field,textarea,select.field{font-size:16px}

  /* hero floating chips sit above the form without overflowing */
  .float-card{top:0!important}
  .float-card:nth-of-type(1){left:0!important;right:auto!important}
  .float-card:nth-of-type(2){right:0!important;left:auto!important}
  .form-card{margin-top:78px!important}

  /* touch devices: no hover-tilt */
  .card-3d:hover{transform:none}
}

/* ---------- Large phones / small tablets ---------- */
@media(max-width:640px){
  section{padding:54px 0}
  .wrap{padding:0 18px}
  .ticker{font-size:12px}
  .ticker span{margin:0 22px}
  .ticker span::after{margin-left:22px}

  .hero{padding:34px 0 60px}
  .hero h1{font-size:clamp(34px,11.2vw,56px)}
  .hero .herogrid>div:first-child>p{font-size:15px!important}
  .hero-arc{width:380px;height:380px;left:-120px}

  .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px 16px;font-size:23px}
  .stat-row span small{font-size:11.5px}

  .form-card{padding:22px!important}
  .shead{margin-bottom:34px!important}
  .shead h2{font-size:clamp(26px,8vw,38px)}

  /* heading scale */
  #process h2{font-size:clamp(26px,8vw,40px)!important}
  .rv-title{font-size:clamp(32px,10vw,56px)}
  .rv-desc{font-size:15.5px;margin:16px 0 26px}
  .rv-grid{gap:50px}
  .rv-visual{max-width:310px}
  .rv-badge{left:-12px;bottom:56px;width:88px;height:88px}
  .rv-badge-arrow{font-size:22px}
  .rv-note{right:-6px;top:50px;font-size:12px;padding:8px 12px}
  .rv-play{width:66px;height:66px;font-size:19px}
  .gstack .rv-badge{right:-6px;left:auto;bottom:44px}

  /* logo strip */
  .logocard{height:78px;padding:10px 20px;border-radius:14px}
  .logocard img{max-width:140px}
  .logo-marquee{gap:16px;animation-duration:24s}

  /* tabs */
  .tabbar,.chips{gap:8px;margin-bottom:30px}
  .tab{padding:9px 14px;font-size:13px}

  /* services dashboard */
  .dash{padding:16px}
  .mbox b{font-size:18px}
  .bars{gap:4px;height:64px}

  /* results */
  .case h3{font-size:22px!important}
  .case>div:first-child>div:nth-child(2){flex-wrap:wrap;gap:10px!important}
  .case .metricbox{flex:1 1 140px}
  .case .metricbox b{font-size:21px}
  .case .btn-outline{width:100%;justify-content:center}
  .gstack-wrap{max-width:300px}
  .gcount{font-size:11px;padding:6px 11px}

  /* process */
  .step .checklist{grid-template-columns:1fr!important}
  .stepnum{width:50px;height:50px;font-size:22px}
  .timeline{gap:5px;margin-top:34px}
  .tnode{width:34px;height:34px;font-size:12px}
  .tline{width:clamp(10px,5vw,26px)}
  .funnelrow{gap:8px;padding:9px 10px}
  .funnelrow b{width:auto!important;min-width:84px}

  /* before / after */
  .ba-grid{max-width:420px;gap:34px}
  .ba-frame{border-radius:22px;padding:8px;box-shadow:0 0 0 4px rgba(168,197,181,.55),0 20px 44px -22px rgba(22,78,74,.45)}
  .cmp{border-radius:15px}
  .ba-handle{width:44px;height:44px;margin:-22px 0 0 -22px}
  .ba-title{font-size:20px;margin-top:18px}
  .ba-tag{top:9px;font-size:11.5px;padding:6px 9px}
  .ba-tag.l{left:9px}.ba-tag.r{right:9px}

  /* testimonials */
  .tcard{padding:24px 20px}
  .tcard p{font-size:16px!important;margin:8px 0 22px!important}
  .tcard>div:nth-last-child(2){gap:14px!important}
  .tcard>div:nth-last-child(2)>div:last-child{text-align:left!important}
  .navcirc{width:44px;height:44px}
  .sidecard{padding:14px}

  /* story */
  .quote-block{font-size:17px;padding-left:16px;margin:22px 0}
  .storygrid .btn{width:100%;justify-content:center}

  /* FAQ */
  .qhead{font-size:15px;gap:14px}
  .faqgrid{gap:26px}

  /* footer */
  .cgrid h2{font-size:26px!important}
  .badges span{font-size:12px}
  .foot-bottom{flex-direction:column;text-align:center;justify-content:center;gap:14px}
  footer .logo-img{height:56px}

  /* WhatsApp button: clear of the home-bar, a bit smaller */
  .wa{width:50px;height:50px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding-bottom:0}
  .wa svg{width:24px;height:24px}

  /* image gallery lightbox */
  .glight{padding:16px;gap:16px}
  .gclose{top:max(14px,env(safe-area-inset-top,0px));right:14px}
  .gfan{width:min(260px,64vw)}
  .gnav{gap:12px}
  .gcap{min-width:0;font-size:13px}
}

/* ---------- Small phones ---------- */
@media(max-width:480px){
  .wrap{padding:0 16px}
  .navin.wrap{padding:8px 14px!important}
  .logo-img{height:44px;max-width:108px}
  .navin .btn{padding:9px 13px!important;font-size:12.5px!important}
  .stat-row{font-size:21px}
  .float-card{padding:9px 12px}
  .hero .herogrid>div:first-child>p{line-height:1.65!important}
  .eyebrow{font-size:12px;padding:5px 13px}
  .ba-tag{font-size:11px}
  .tab{font-size:12.5px;padding:8px 12px}
  .checklist li{font-size:14px}
  .stat2{gap:8px}
  .stat2 b{font-size:18px}
  .rv-visual{max-width:280px}
}
@media(max-width:360px){
  .logo-img{height:40px;max-width:92px}
  .navin .btn{padding:8px 11px!important;font-size:12px!important}
  .hero h1{font-size:33px}
  .bgtitle{font-size:27px}
  .float-card b{font-size:14px!important}
  .ba-tag{font-size:10.5px;padding:5px 7px}
  .case .metricbox{flex-basis:100%}
}

/* ---------- Landscape phones (short screens) ---------- */
@media(max-height:520px) and (orientation:landscape){
  section{padding:48px 0}
  .hero{padding:28px 0 48px}
  .mnav{max-height:calc(100vh - 62px)}
  .gfan{width:min(190px,42vh)}
  .gtitle h3{display:none}
  .glight{gap:10px}
}

/* ---------- Touch devices ---------- */
@media(hover:none){
  .btn-pink:hover,.pcard2:hover,.metricbox:hover,.mbox:hover{transform:none}
  .gstack:hover .gfront,.gstack:hover .g1,.gstack:hover .g2{transform:none}
  .rv-stage:hover .rv-play{transform:none}
  .tab,.btn,.navcirc,.sidecard,.qitem,.gnav button{-webkit-user-select:none;user-select:none}
  .btn:active,.tab:active,.navcirc:active,.gnav button:active{transform:scale(.95)}
  .sidecard:active{transform:scale(.98)}
  .pcard2:active{transform:translateY(-3px)}
}

/* =====================================================================
   EXTRA MOTION (only for people who have not asked for reduced motion)
   ===================================================================== */
@media(prefers-reduced-motion:no-preference){
  /* on phones, side-slides become gentle rises (no sideways overflow) */
  @media(max-width:900px){
    .anim-ready .ai.from-l:not(.vis),.anim-ready .ai.from-r:not(.vis){transform:translateY(34px)}
    .case>:first-child,.case>:last-child{animation:popIn .7s cubic-bezier(.16,1,.3,1) backwards}
  }

  /* progress bars fill, chart bars grow when scrolled into view */
  .grow-ready .pbar i{transform:scaleX(0);transform-origin:0 50%}
  .grow-ready .pbar.in i{transform:none;transition:transform 1.3s cubic-bezier(.16,1,.3,1) .15s}
  .grow-ready .bars i{transform:scaleY(0);transform-origin:50% 100%}
  .grow-ready .bars.in i{transform:none;transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--bi,0)*55ms + .1s)}

  /* tap / press feedback + smoother tab changes */
  .tab{transition:background .25s,color .25s,border-color .25s,transform .2s}
  .btn{transition:transform .2s,box-shadow .2s,background .2s}
  .btn:active{transform:scale(.97)}
  .qitem{transition:background .25s}

  /* soft pulse on the WhatsApp button so it is noticed on small screens */
  @keyframes waPulse{0%{box-shadow:0 8px 22px -4px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 8px 22px -4px rgba(37,211,102,.5),0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 8px 22px -4px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,0)}}
  .wa{animation:waPulse 2.8s ease-out 2s infinite,popIn .7s cubic-bezier(.16,1,.3,1) 1.2s backwards}

  /* testimonial dots + nav button hover */
  .dots i{transition:width .3s,background .3s}
  .navcirc{transition:transform .2s,background .2s}
  .navcirc:hover{background:var(--surface2)}
}

@media(prefers-reduced-motion:reduce){
  .mnav,.mnav a,.nav-toggle span{transition:none!important}
  .wa{animation:none!important}
}