/* ExactThemes site layer: header, menus, interactions, motion, responsive.
   Loaded after common.css and each page's own styles. */
html,body{overflow-x:clip}
body{width:auto}
html{scroll-behavior:smooth;scroll-padding-top:96px}
img{max-width:100%}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:6px}
button{font:inherit;color:inherit}

/* ---------- announcement bar ---------- */
.bar a{color:#fff;display:block}
.bar a:hover b{text-decoration-thickness:2px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;transition:background .3s,box-shadow .3s}
.hdr.scrolled{background:rgba(21,18,15,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 #2F2923}
.hin{height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr nav.links{height:auto;display:flex;gap:30px;align-items:center;font-size:16px}
.hdr nav.links>a,.ddbtn{color:#D9D0C4;transition:color .2s;position:relative;padding:8px 0}
.hdr nav.links>a:hover,.ddbtn:hover,.dd.open .ddbtn{color:#fff}
.hdr nav.links>a[aria-current]{color:#fff}
.hdr nav.links>a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--or)}
.ddbtn{background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ddbtn svg{transition:transform .25s}
.dd.open .ddbtn svg{transform:rotate(180deg)}
.dd{position:relative}
.mega{position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%,8px);width:660px;background:#1E1A16;border:1px solid #2F2923;border-radius:22px;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px;opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.mega:before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.dd.open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega h6{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7D7368;margin:6px 10px 8px}
.mi{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;transition:background .2s}
.mi:hover,.mi[aria-current]{background:#2A231D}
.mi i{width:40px;height:40px;border-radius:11px;background:#2A231D;color:var(--or);display:grid;place-items:center;flex:none;transition:background .2s,color .2s}
.mi:hover i{background:var(--or);color:#fff}
.mi svg{width:20px;height:20px}
.mi b{display:block;color:#fff;font-weight:600;font-size:15px}
.mi small{display:block;color:#A79D90;font-size:13px;margin-top:2px}
.mega .mfoot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #2F2923;margin-top:4px;padding:14px 10px 2px;font-size:14px;color:#A79D90}
.mega .mfoot a{color:var(--or);font-weight:600}
.navcta{display:flex;align-items:center;gap:20px;font-size:15px}
.navcta .tel{color:#D9D0C4}
.navcta .tel:hover{color:#fff}
.burger{display:none;width:46px;height:46px;border-radius:14px;border:1px solid #3A322B;background:#1E1A16;cursor:pointer;place-items:center}
.burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;margin:3px 0;transition:transform .25s}

/* ---------- mobile drawer ---------- */
.drawer{position:fixed;inset:0;z-index:80;background:#15120F;display:flex;flex-direction:column;padding:0 22px 28px;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);overflow-y:auto;visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer .dtop{height:80px;display:flex;align-items:center;justify-content:space-between;flex:none}
.drawer .close{width:46px;height:46px;border-radius:14px;border:1px solid #3A322B;background:#1E1A16;cursor:pointer;color:#fff;font-size:24px;line-height:1}
.drawer .dl{display:grid;gap:2px;margin-top:10px}
.drawer .dl>a,.drawer summary{font-size:26px;font-weight:700;letter-spacing:-.02em;padding:14px 4px;border-bottom:1px solid #2A231D;display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none}
.drawer summary::-webkit-details-marker{display:none}
.drawer details[open] summary span{transform:rotate(45deg)}
.drawer summary span{color:var(--or);transition:transform .25s;font-weight:400}
.drawer .ds{display:grid;gap:4px;padding:10px 0 14px}
.drawer .ds a{display:flex;gap:12px;align-items:center;padding:10px 6px;border-radius:12px;font-size:17px;color:#E5DDD2}
.drawer .ds a i{width:36px;height:36px;border-radius:10px;background:#2A231D;color:var(--or);display:grid;place-items:center}
.drawer .ds a svg{width:18px;height:18px}
.drawer .dcta{margin-top:auto;padding-top:28px;display:grid;gap:12px}
.drawer .dcta .btn{justify-content:center}
.drawer .dcta p{color:#A79D90;font-size:14px;text-align:center}
body.lock{overflow:hidden}

/* ---------- floating WhatsApp ---------- */
.fab{position:fixed;right:22px;bottom:22px;z-index:55;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px rgba(0,0,0,.35);transition:transform .2s}
.fab:hover{transform:scale(1.07)}
.fab svg{width:32px;height:32px}
.fab:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:ring 2.4s ease-out infinite}
@keyframes ring{from{transform:scale(1);opacity:.7}to{transform:scale(1.6);opacity:0}}

/* ---------- toast ---------- */
.tmsg{position:fixed;left:50%;bottom:30px;z-index:90;transform:translate(-50%,20px);background:#fff;color:var(--ink);font-weight:600;font-size:15px;padding:12px 20px;border-radius:30px;box-shadow:0 20px 40px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.3s}
.tmsg.show{opacity:1;transform:translate(-50%,0)}

/* ---------- links on cards ---------- */
a.svc,a.pc{color:inherit;cursor:pointer}
a.svc .arr,a.pc .arr{transition:background .2s,color .2s,transform .2s,border-color .2s}
a.svc:hover .arr,a.pc:hover .arr{background:var(--or);border-color:var(--or);color:#fff;transform:translateX(3px)}
a.svc:hover h4{color:var(--or)}
.group.dark a.svc:hover h4{color:var(--or2)}
.btn{transition:transform .2s,box-shadow .2s,background .2s}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(248,108,13,.35)}
.btn.ghost:hover{border-color:var(--or)}
.btn svg{transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}

/* hover lift */
.card,.ic3,.val,.mem,.plan,.nx,.pc,.rv,.hcard,.sc,.rs,.vmc{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.card:hover,.ic3:hover,.val:hover,.mem:hover,.plan:hover,.nx:hover,.rv:hover,.hcard:hover,.sc:hover,.rs:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.18)}
.card .shot img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .shot img{transform:scale(1.03)}
.ic3 .ic,.val .ic,.nx .ic{transition:background .3s,color .3s}
.ic3:hover .ic,.val:hover .ic,.nx:hover .ic{background:var(--or);color:#fff}

/* ---------- FAQ accordion ---------- */
.q .t{width:100%;background:none;border:0;text-align:left;cursor:pointer;gap:20px;padding:0;color:inherit}
.q .t i{flex:none;transition:transform .3s,background .3s,color .3s}
.q.open .t i{transform:rotate(180deg)}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.q.open .a{grid-template-rows:1fr}
.q .a>div{overflow:hidden}

/* ---------- form controls ---------- */
.opts button,.filters button{cursor:pointer;background:none;transition:background .2s,border-color .2s,color .2s}
.opts button:hover{border-color:var(--or)}
.filters button{height:42px;padding:0 20px;border-radius:22px;border:1px solid #D9CFC1;display:inline-flex;align-items:center;font-size:15px;font-weight:500;color:#5E564C;background:#fff;white-space:nowrap}
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
input.inp,textarea.inp{width:100%;font:inherit;font-size:16px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
textarea.inp{resize:vertical;min-height:90px;padding:14px 16px;line-height:1.5}
input.inp:focus,textarea.inp:focus{border-color:var(--or);box-shadow:0 0 0 4px rgba(248,108,13,.15)}
input.inp::placeholder,textarea.inp::placeholder{color:#A79D90}
.cp{cursor:pointer;background:none;transition:background .2s,color .2s}
.cp:hover{background:#2A231D;color:#fff}
.prev .msg{transition:background .3s}
.prev .msg.flash{background:#C5EDB0}
.range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--or) var(--p,50%),#2E2822 var(--p,50%));outline:none;margin:22px 0 4px;cursor:pointer}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 0 0 7px rgba(248,108,13,.3);cursor:grab}
.range::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 7px rgba(248,108,13,.3);cursor:grab}
.rv.hide{display:none}

/* ---------- motion ---------- */
[data-r]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
[data-r].in{opacity:1;transform:none}
.circ svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.6,.1,.2,1) .4s}
.circ.in svg path{stroke-dashoffset:0}
.float{animation:flt 7s ease-in-out infinite alternate}
.float.f2{animation-duration:8.5s;animation-delay:-3s}
.float.f3{animation-duration:6s;animation-delay:-1.5s}
@keyframes flt{from{translate:0 0}to{translate:0 -14px}}
.pop{animation:pop .7s cubic-bezier(.2,1.4,.4,1) both;animation-delay:var(--d,.6s)}
@keyframes pop{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
.cycle strong,.cycle small{transition:opacity .35s,transform .35s;display:block}
.cycle.swap strong,.cycle.swap small{opacity:0;transform:translateY(6px)}
.cycle .ic{transition:background .35s,color .35s}
.marq{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients .marq ul{display:flex;justify-content:flex-start;gap:64px;width:max-content;animation:mq 38s linear infinite}
.clients .marq:hover ul{animation-play-state:paused}
.clients .marq li{white-space:nowrap;transition:color .2s}
.clients .marq li:hover{color:#fff}
@keyframes mq{to{transform:translateX(-50%)}}
.hero .grid-bg,.phero .grid-bg{animation:gridpan 40s linear infinite}
@keyframes gridpan{to{background-position:56px 56px,56px 56px}}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-r]{opacity:1;transform:none}
  .circ svg path{stroke-dashoffset:0}
}

/* ---------- responsive: tablet ---------- */
@media (max-width:1100px){
  .hdr nav.links,.navcta .tel{display:none}
  .burger{display:grid}
  .wrap{width:auto!important;padding:0 28px}
  .hero .wrap,.phero .inner{grid-template-columns:minmax(0,1fr)!important;gap:40px!important}
  .phero .inner{margin-top:30px!important}
  .hero h1,.phero h1{font-size:60px!important}
  .thero h1{font-size:60px!important}
  .values .wrap{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .values div.v{padding:26px 20px!important;border-right:0!important;border-bottom:1px solid #E7DFD3}
  .cols,.wgrid,.vm,.story,.two,.hl,.remote,.faq .wrap,.bud,.pair,.wpg{grid-template-columns:minmax(0,1fr)!important}
  .steps,.vals,.team,.psteps,.tl,.mstats,.wpg3,.inc,.g3,.res,.next,.plans,.wfoot,.gal,.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .plat,.soc2{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .wall{columns:3!important}
  .ctabox{grid-template-columns:minmax(0,1fr)!important;padding:48px!important}
  .clients .wrap{flex-direction:column;align-items:flex-start!important;gap:18px!important}
  .clients p{width:auto!important}
  .marq{width:100%}
  .shead{flex-direction:column;align-items:flex-start!important;gap:18px}
  .tl:before{display:none}
  .faq .wrap{gap:40px!important}
  .story{gap:30px!important}
  .hcard{grid-template-columns:minmax(0,1fr)!important}
  .hcard img{height:260px}
  .psteps{border-radius:20px}
  .ps{border-bottom:1px solid var(--line)}
  .mstats div{border-bottom:1px solid var(--line)}
  .gal{grid-template-rows:none!important;grid-auto-rows:220px}
  .stage,.stage2,.collage{margin-left:auto;margin-right:auto}
  .builder{max-width:640px}
  .cm{max-width:none!important}
}

/* ---------- responsive: phone ---------- */
@media (max-width:720px){
  .wrap{padding:0 18px}
  .hin{height:68px}
  .drawer .dtop{height:68px}
  .navcta .btn{display:none}
  .bar{font-size:12.5px;padding:9px 12px}
  h2,.faq h2{font-size:34px!important;line-height:1.08!important}
  .hero h1,.phero h1,.thero h1{font-size:42px!important;line-height:1.02!important}
  .ctabox h2{font-size:36px!important}
  .hero p.lead,.phero .lead,.thero .lead{font-size:17px!important}
  .hero{padding-top:20px!important}
  .sec,.services,.work,.process{padding:72px 0!important}
  .faq{padding-bottom:72px!important}
  .faq .wrap{padding-top:64px!important}
  .steps,.vals,.team,.psteps,.tl,.mstats,.wpg3,.inc,.g3,.res,.next,.plans,.wfoot,.plat,.soc2,.gal,.fgrid,.row2,.sends{grid-template-columns:minmax(0,1fr)!important}
  .wall{columns:1!important}
  .ctas{flex-direction:column;align-items:stretch}
  .ctas .btn{justify-content:center}
  .mini,.facts{flex-wrap:wrap;gap:14px 26px!important}
  .group{padding:22px!important;border-radius:22px}
  .svc{grid-template-columns:44px minmax(0,1fr)!important;gap:14px!important}
  .svc .ic{width:44px!important;height:44px!important}
  .svc .arr{display:none!important}
  .chips{flex-wrap:wrap}
  .ctabox{padding:34px 24px!important;border-radius:26px!important}
  .ctabox .btn.wa{font-size:15px}
  .legal{flex-direction:column;gap:8px}
  .filters{overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:8px;margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
  .scorebar{flex-direction:column;align-items:stretch!important}
  .card.big .shot{height:280px!important}
  .card .meta{flex-direction:column;align-items:flex-start!important;gap:10px}
  .gal{grid-auto-rows:210px}
  .gal div{grid-column:auto!important;grid-row:auto!important}
  .builder{padding:22px!important;border-radius:22px!important}
  .prev .msg{margin-left:0!important}
  .globe{height:340px!important}
  .pin{font-size:13px!important;padding:6px 12px 6px 6px!important}
  .pin b{width:24px!important;height:24px!important;font-size:11px!important}
  .bud{padding:24px!important}
  .bud .big{font-size:48px!important}
  .names span{font-size:16px!important;padding:10px 18px!important}
  .fcap{flex-direction:column;align-items:flex-start!important;gap:10px}
  .pc{padding:20px!important}
  .vmc{padding:30px!important}
  .vmc h3{font-size:28px!important}
  .blk{padding:28px!important}
  .blk h3{font-size:25px!important}
  .q .t{font-size:18px!important}
  .values .wrap{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v strong{font-size:32px!important}
  .fab{right:16px;bottom:16px;width:56px;height:56px}
  .clients ul{font-size:19px!important}
  footer{padding-top:150px!important}
  .soc2 .sc{flex-direction:row;align-items:center}
  .thero{margin-top:36px!important}
  .scorebar>div{padding:14px 18px!important}
}

/* fixes */
.v strong .cnt,.mstats strong .cnt{font-size:inherit!important;color:inherit!important;font-weight:inherit}
.flow a{color:inherit}
@media (max-width:720px){
  .flow{flex-direction:column;gap:8px!important;text-align:center}
  .flow .line{display:none}
}
.opts button{font-size:14px;font-weight:500;border:1px solid #E2D9CC;border-radius:20px;padding:8px 14px;color:#5E564C;min-height:40px}
.opts button.on{background:#FFF0E5;border-color:var(--or);color:var(--or)}
.opts button.on:before{content:"✓ ";font-weight:700}
.cmi .cp{border:1px solid #3A322B}
.hdr .mega .mi>span{display:block}
