@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Nunito+Sans:wght@500;600;700;800&display=swap');
:root{
  --bg:#08111f;--bg2:#0b1427;--card:#0f1a31;--card2:#111f39;--line:rgba(255,255,255,.09);
  --text:#f7faff;--muted:#bfd0e6;--muted2:#95a8c4;--brand:#7c5cff;--brand2:#22d3ee;--brand3:#34d399;
  --shadow:0 20px 60px rgba(2,8,22,.42);--radius:28px;--max:1720px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:
radial-gradient(circle at 8% 0%,rgba(124,92,255,.22),transparent 26%),
radial-gradient(circle at 92% 8%,rgba(34,211,238,.16),transparent 24%),
linear-gradient(180deg,#07111f 0%,#091425 40%,#08111f 100%);color:var(--text);font-family:'Nunito Sans',system-ui,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button,input,textarea,select{font:inherit}
.container,.container-wide{width:min(calc(100% - 28px),var(--max));margin:0 auto}.container{max-width:1320px}.container-wide{max-width:1720px}
.site-header{position:sticky;top:0;z-index:40;background:rgba(7,12,24,.72);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}.brand{display:flex;align-items:center;gap:14px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:.01em}.brand img{height:68px;width:auto;object-fit:contain}.brand small{display:block;color:var(--muted2);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;margin-top:2px}
.nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.nav a{padding:11px 14px;border-radius:999px;color:#dbe8f7;font-weight:800;font-size:.97rem;transition:.22s ease}.nav a:hover,.nav a.active{background:rgba(255,255,255,.08);color:#fff;transform:translateY(-1px)}
.top-cta{display:flex;gap:10px;align-items:center}.mini-contact{display:flex;gap:12px;align-items:center;color:#d3e2f4;font-weight:700;font-size:.92rem}.mini-contact span{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}

/* ===== v7a menu toggle vertical centering fix - FULLY CENTERED ===== */
.site-header .menu-toggle {
  width: 48px;
  height: 48px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  transition: background 0.22s ease, border-color 0.22s ease;
}
.site-header .menu-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}
.site-header .menu-toggle span {
  display: none !important;
}
/* Custom centered icon using pseudo-element for perfect vertical alignment */
.site-header .menu-toggle::before {
  content: '';
  display: block;
  width: 24px;
  height: 18px;
  background: 
    linear-gradient(to bottom, 
      #ffffff 0 2.5px, 
      transparent 2.5px 7.75px, 
      #ffffff 7.75px 10.25px, 
      transparent 10.25px 15.5px, 
      #ffffff 15.5px 18px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 18px;
  margin: 0;
  position: static;
  transform: none;
  top: auto;
  left: auto;
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:18px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;transition:.22s ease;cursor:pointer;box-shadow:0 10px 30px rgba(2,8,22,.18)}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.18);box-shadow:0 16px 36px rgba(2,8,22,.28)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));border:none;color:#fff;box-shadow:0 16px 38px rgba(30,34,104,.35)}
.btn-primary:hover{background:linear-gradient(135deg,#8e74ff,#38ddf4);box-shadow:0 18px 42px rgba(43,64,160,.38)}
.btn-green{background:linear-gradient(135deg,#25d366,#2dd4bf);border:none;color:#06221b;box-shadow:0 16px 38px rgba(13,85,58,.34)}
.btn-green:hover{background:linear-gradient(135deg,#3be078,#53e7cb);box-shadow:0 18px 42px rgba(13,85,58,.42)}
.section{padding:64px 0}.section.tight{padding:48px 0}.section.dark{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04)}
.hero{padding:34px 0 42px}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:24px;align-items:stretch}.hero-copy,.hero-visual,.glass-card,.metric-card,.service-card,.package-card,.contact-panel,.portfolio-card,.faq-card,.cta-panel,.process-card,.info-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--line);box-shadow:var(--shadow);border-radius:32px}
.hero-copy{padding:38px 34px 34px}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#d8e8ff}.eyebrow:before{content:'';width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--brand2),var(--brand3))}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;line-height:1.08;margin:0 0 14px}h1{font-size:clamp(2.2rem,4.8vw,4.3rem);max-width:11ch;margin-top:18px}h2{font-size:clamp(1.8rem,3.1vw,3rem);max-width:15ch}h3{font-size:1.25rem}p{margin:0 0 12px;color:var(--muted)}.lead{font-size:1.09rem;max-width:62ch}.text-strong{color:#e8f2ff}.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.keyword-row,.tag-row,.footer-badges,.service-tags{display:flex;gap:10px;flex-wrap:wrap}.keyword-row span,.tag-row span,.footer-badges span,.service-tags span{padding:10px 13px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-weight:800;color:#e1ecfa;font-size:.88rem}
.hero-visual{padding:24px;position:relative;overflow:hidden;display:grid;place-items:center;min-height:620px}.hero-visual img.design-art{width:100%;height:auto}.floating-note{position:absolute;padding:14px 16px;border-radius:22px;background:rgba(8,15,30,.78);border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);max-width:250px}.floating-note strong{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:1rem;margin-bottom:6px}.floating-note p{margin:0;color:#d9e8fa;font-size:.92rem}.note-1{left:18px;bottom:26px}.note-2{right:18px;top:26px}
.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:26px}.section-head p{max-width:54ch}.grid-4,.grid-3,.grid-2,.pricing-grid,.portfolio-grid,.footer-grid,.contact-grid,.stats-grid,.faq-grid{display:grid;gap:18px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2,.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pricing-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.portfolio-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.faq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric-card,.service-card,.package-card,.portfolio-card,.faq-card,.process-card,.info-card{padding:22px;position:relative;overflow:hidden}.metric-card strong{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:2rem;margin-bottom:8px}.metric-card p{margin-bottom:0}.icon-bubble{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(34,211,238,.18));border:1px solid rgba(255,255,255,.12);font-size:1.3rem;margin-bottom:16px}
.service-card .art{border-radius:24px;overflow:hidden;border:1px solid var(--line);margin-bottom:18px;background:#0d162a}.service-card .art img{width:100%;height:220px;object-fit:cover;background:#0d162a}.service-card:hover,.package-card:hover,.portfolio-card:hover,.faq-card:hover,.process-card:hover,.info-card:hover,.metric-card:hover{transform:translateY(-4px);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;border-color:rgba(255,255,255,.16);box-shadow:0 26px 70px rgba(2,8,22,.48)}
.page-hero{padding:38px 0 18px}.page-banner{padding:30px 28px;border-radius:34px;background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(34,211,238,.12),rgba(52,211,153,.12));border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden}.page-banner:before,.page-banner:after{content:'';position:absolute;border-radius:50%;filter:blur(32px)}.page-banner:before{width:180px;height:180px;right:-40px;top:-30px;background:rgba(124,92,255,.34)}.page-banner:after{width:140px;height:140px;left:24px;bottom:-54px;background:rgba(34,211,238,.22)}.page-banner h1{font-size:clamp(1.95rem,4vw,3.2rem);max-width:none}.page-banner p{max-width:72ch}
.process-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.process-card small{display:block;color:#9db1cc;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.portfolio-card{padding:0}.portfolio-card .thumb{position:relative;overflow:hidden;border-radius:28px 28px 0 0;background:#0d162a}.portfolio-card .thumb img{width:100%;aspect-ratio:16/11;object-fit:cover;transition:transform .35s ease}.portfolio-card:hover .thumb img{transform:scale(1.06)}.browser-bar{position:absolute;left:14px;right:14px;top:14px;height:34px;border-radius:999px;background:rgba(8,15,28,.72);backdrop-filter:blur(8px);display:flex;align-items:center;gap:7px;padding:0 12px;border:1px solid rgba(255,255,255,.1)}.browser-bar span{width:9px;height:9px;border-radius:50%;background:#ff8a8a}.browser-bar span:nth-child(2){background:#ffd56a}.browser-bar span:nth-child(3){background:#61e08d}.zoom-btn{position:absolute;right:16px;bottom:16px;border:none;background:rgba(8,15,28,.84);color:#fff;padding:12px 14px;border-radius:16px;font-weight:800;cursor:pointer;border:1px solid rgba(255,255,255,.12)}.zoom-btn:hover{background:rgba(18,28,50,.92)}.portfolio-copy{padding:18px 20px 22px}.portfolio-copy p{margin-bottom:10px}.portfolio-meta{display:flex;gap:10px;flex-wrap:wrap}.portfolio-meta span{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.8rem;font-weight:800}
.package-card.popular{outline:2px solid rgba(34,211,238,.4)}.price{font-family:'Plus Jakarta Sans',sans-serif;font-size:2rem;font-weight:800;margin:10px 0;color:#fff}.price small{font-size:1rem;color:#a9bdd8}.package-card ul,.info-card ul{list-style:none;padding:0;margin:0 0 18px}.package-card li,.info-card li{padding-left:22px;position:relative;color:#dce7f7;margin:8px 0}.package-card li:before,.info-card li:before{content:'✓';position:absolute;left:0;top:0;color:#53e7cb;font-weight:900}
.contact-layout{display:grid;grid-template-columns:1.06fr .94fr;gap:18px}.contact-panel{padding:26px}.contact-panel h2{max-width:none}.contact-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.info-card strong{display:block;font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:6px}.map-card{padding:0;overflow:hidden}.map-card iframe{width:100%;height:260px;border:0;display:block}.contact-visual{padding:18px;display:grid;gap:18px}.contact-visual .art img{border-radius:24px;border:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.input,textarea{width:100%;padding:14px 15px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:#fff} textarea{min-height:130px;resize:vertical}.input::placeholder,textarea::placeholder{color:#92a6c5}
.footer{padding:34px 0 46px;border-top:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}.footer-grid{grid-template-columns:1.1fr .8fr .8fr}.footer-brand{display:grid;gap:14px}.footer-links{display:grid;gap:10px}.footer-links a{color:#d7e5f8;font-weight:700}.footer-note{padding:18px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--line)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}.reveal.in{opacity:1;transform:none}
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:10px;border:none;padding:15px 18px;border-radius:18px;background:linear-gradient(135deg,#25d366,#2dd4bf);color:#06221b;font-family:'Plus Jakarta Sans',sans-serif;font-weight:900;box-shadow:0 18px 38px rgba(13,85,58,.34);cursor:pointer;transition:.22s ease}.wa-fab:hover{transform:translateY(-2px);background:linear-gradient(135deg,#35dd73,#53e7cb)}
.wa-modal,.lightbox{position:fixed;inset:0;display:none;place-items:center;background:rgba(5,10,18,.8);padding:18px;z-index:90}.wa-modal.open,.lightbox.open{display:grid}.wa-panel{width:min(540px,100%);border-radius:30px;background:linear-gradient(180deg,#0e172b,#0b1424);border:1px solid var(--line);box-shadow:0 28px 90px rgba(0,0,0,.5);overflow:hidden}.wa-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;background:linear-gradient(135deg,#25d366,#2dd4bf);color:#06221b}.wa-head strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.15rem}.wa-close,.lightbox-close{width:42px;height:42px;border:none;border-radius:14px;background:rgba(0,0,0,.12);color:inherit;font-size:1.3rem;cursor:pointer}.wa-body{padding:20px}.wa-note{padding:13px 14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);margin-bottom:14px;color:#e1ecfa}
.lightbox figure{margin:0}.lightbox img{max-width:min(1280px,92vw);max-height:78vh;border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.55)}.lightbox figcaption{text-align:center;margin-top:12px;color:#e1ecfa;font-weight:800}
.seo-strip{padding:18px 0}.seo-strip .container-wide{display:flex;flex-wrap:wrap;gap:10px}.seo-strip span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-weight:900;color:#dce9f8}
@media(max-width:1200px){.grid-4,.pricing-grid,.stats-grid,.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-grid,.contact-layout,.footer-grid{grid-template-columns:1fr}.hero-visual{min-height:460px}.process-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){
/* Mobile menu toggle - perfectly centered */
.site-header .menu-toggle {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px;
}
.site-header .menu-toggle::before {
  width: 24px;
  height: 18px;
  background-size: 24px 18px;
}
.nav{display:none;position:absolute;left:14px;right:14px;top:74px;padding:14px;border-radius:22px;background:#0e172a;border:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav.open{display:flex}.top-cta{display:none}.grid-3,.grid-2,.faq-grid,.portfolio-grid,.pricing-grid,.stats-grid,.process-strip,.contact-quick,.form-grid{grid-template-columns:1fr}.section-head{flex-direction:column;align-items:start}.hero{padding-top:78px}.hero-copy{padding:28px 22px}.page-banner{padding:24px 20px}.container,.container-wide{width:min(calc(100% - 18px),var(--max))}.wa-fab span:last-child{display:none}}

/* header tidy + mobile menu behavior fix */
.brand{gap:12px;min-width:0;flex:0 1 auto}
.brand img{height:40px;flex:0 0 auto}
.brand span{display:flex;flex-direction:column;min-width:0;line-height:1.02}
.brand span>span{font-size:1.02rem;white-space:nowrap}
.brand small{font-size:.60rem;letter-spacing:.18em;white-space:nowrap}
.nav-wrap{gap:16px}
.top-cta{margin-left:auto}
@media(max-width:1100px){.mini-contact{display:none}}
@media(max-width:860px){
  .nav-wrap{position:relative}
  .brand img{height:36px}
  .brand span>span{font-size:.96rem}
  .brand small{font-size:.56rem;letter-spacing:.14em}
  .site-header .menu-toggle {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .menu-toggle:hover{background:rgba(255,255,255,.1)}
}


.brand-logo-only{display:inline-flex;align-items:center;gap:0}.brand-logo-only img{display:block;height:56px;width:auto;max-width:100%}@media(max-width:768px){.brand-logo-only img{height:48px}}


/* v6d larger creative logo */
.site-header{background:rgba(7,12,24,.78);backdrop-filter:blur(18px)}
.nav-wrap{padding:8px 0;min-height:78px;gap:18px}
.brand-logo-only{display:inline-flex;align-items:center;line-height:0;flex:0 0 auto}
.brand-logo-only img{display:block;height:68px;width:auto;max-width:min(44vw,320px)}
@media (max-width: 1024px){
  .nav-wrap{min-height:72px;padding:7px 0}
  .brand-logo-only img{height:62px;max-width:46vw}
}
@media (max-width: 768px){
  .nav-wrap{min-height:66px;padding:6px 0;gap:12px}
  .brand-logo-only img{height:54px;max-width:56vw}
}
@media (max-width: 460px){
  .brand-logo-only img{height:50px;max-width:60vw}
}


/* v6e user-selected JClick signature logo */
.brand-logo-only img{height:72px;width:auto;max-width:min(40vw,300px);object-fit:contain}
.footer .brand-logo-only img{height:64px;max-width:min(38vw,280px)}
@media (max-width: 1024px){.brand-logo-only img{height:66px;max-width:44vw}.footer .brand-logo-only img{height:58px}}
@media (max-width: 768px){.brand-logo-only img{height:56px;max-width:56vw}.footer .brand-logo-only img{height:52px;max-width:52vw}}
@media (max-width: 460px){.brand-logo-only img{height:50px;max-width:62vw}.footer .brand-logo-only img{height:46px;max-width:58vw}}

.brand-logo-only img{height:68px;width:auto;object-fit:contain}
.footer .brand img{height:56px;width:auto;object-fit:contain}
@media(max-width:900px){.brand img,.brand-logo-only img{height:56px}.footer .brand img{height:48px}}
@media(max-width:640px){.brand img,.brand-logo-only img{height:48px}.footer .brand img{height:42px}}


/* v6h header spacing + hero left-side polish */
.site-header .nav{margin-left:34px;}
.brand-logo-only{margin-right:18px;}
@media (max-width: 1100px){.site-header .nav{margin-left:22px;}.brand-logo-only{margin-right:10px;}}
@media (max-width: 860px){.site-header .nav{margin-left:0;}.brand-logo-only{margin-right:0;}}
.hero-copy{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 70px rgba(2,8,22,.36)}
.hero-copy:before{content:'';position:absolute;inset:0;border-radius:32px;background:radial-gradient(circle at top left, rgba(52,211,153,.12), transparent 28%),radial-gradient(circle at right center, rgba(34,211,238,.12), transparent 24%);pointer-events:none}
.hero-copy > *{position:relative;z-index:1}
.hero-copy h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2.15rem,4vw,4rem);line-height:1.05;letter-spacing:-.035em;max-width:11.8ch}
.hero-copy .lead{max-width:60ch;font-size:1.03rem;color:#dfeaf8}
.hero-copy .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.hero-copy .eyebrow:before{content:'';width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 0 6px rgba(52,211,153,.12)}
.hero-mini-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hero-mini-points span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:#e6eef9;font-weight:800;font-size:.86rem}
.keyword-row{margin-top:18px}
.button-row{margin-top:20px}
@media (max-width: 860px){.hero-copy h1{font-size:clamp(1.9rem,9vw,3rem);max-width:none}.hero-copy .lead{max-width:none;font-size:.98rem}.hero-mini-points{gap:8px}.hero-mini-points span{font-size:.81rem;padding:9px 12px}}


/* contact form spacing fix */
.contact-brief-form,
.wa-body form[data-wa-form]{
  display:grid;
  gap:14px;
  margin-top:16px;
}
.contact-brief-form .button-row,
.wa-body form[data-wa-form] .button-row{
  margin-top:2px;
}
.contact-brief-form textarea,
.wa-body form[data-wa-form] textarea{
  display:block;
}


/* footer contact + badge refinement */
.footer-note{
  display:grid;
  gap:12px;
  align-content:start;
}
.footer-note h3{
  margin:0 0 2px;
}
.footer-note p{
  margin:0;
}
.footer-note .button-row{
  margin-top:4px;
}
.footer-note .text-strong{
  display:grid;
  gap:6px;
  line-height:1.65;
  margin-top:4px;
}
.footer-note .text-strong br{
  display:none;
}

.keyword-row span,
.tag-row span,
.footer-badges span,
.service-tags span{
  padding:8px 12px;
  border-radius:16px;
  line-height:1.35;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:40px;
}

.footer-badges{
  gap:12px;
  align-items:flex-start;
}


/* footer quick links vertical clean fix */
.footer-links{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}
.footer-links a{
  display:block;
  line-height:1.4;
  padding:2px 0;
}
.footer-links a{
  display:flex;
  align-items:center;
  min-height:22px;
  line-height:1.45;
  padding:2px 0;
}
@media (max-width: 640px){
  .footer-links{
    grid-template-columns:1fr;
    gap:8px;
  }
}


/* real image replacement refinement */
.hero-visual img.design-art{
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:28px;
  border:1px solid var(--line);
}
.contact-visual .art img{
  width:100%;
  height:320px;
  object-fit:cover;
  object-position:center;
}
.service-card .art img{
  width:100%;
  height:220px;
  object-fit:cover;
  object-position:center;
}
@media (max-width: 1200px){
  .hero-visual img.design-art{
    min-height:420px;
  }
}
@media (max-width: 640px){
  .hero-visual{
    min-height:340px;
    padding:16px;
  }
  .hero-visual img.design-art{
    min-height:300px;
    border-radius:22px;
  }
  .contact-visual .art img,
  .service-card .art img{
    height:auto;
    aspect-ratio:16/10;
  }
}


/* footer 3-column refine only */
.site-footer .footer-grid,
.footer-grid{
  align-items:start;
  gap:28px;
}

.site-footer .footer-intro,
.site-footer .footer-links-wrap,
.site-footer .footer-note,
.footer-intro,
.footer-links-wrap,
.footer-note{
  align-self:start;
}

.site-footer .footer-intro{
  max-width:340px;
}

.site-footer .footer-links,
.footer-links{
  margin-top:6px;
  gap:4px;
}

.site-footer .footer-links a,
.footer-links a{
  padding:1px 0;
  line-height:1.35;
}

.site-footer .footer-note,
.footer-note{
  gap:10px;
  padding:18px;
  border-radius:18px;
}

.site-footer .footer-note .button-row,
.footer-note .button-row{
  margin-top:2px;
}

.site-footer .footer-note .text-strong,
.footer-note .text-strong{
  gap:4px;
  line-height:1.5;
  margin-top:2px;
}

@media (max-width: 900px){
  .site-footer .footer-grid,
  .footer-grid{
    gap:22px;
  }
  .site-footer .footer-intro{
    max-width:none;
  }
  .site-footer .footer-note,
  .footer-note{
    padding:16px;
  }
}

@media (max-width: 640px){
  .site-footer .footer-grid,
  .footer-grid{
    gap:18px;
  }
  .site-footer .footer-links,
  .footer-links{
    gap:3px;
  }
  .site-footer .footer-note,
  .footer-note{
    padding:14px;
    border-radius:16px;
  }
}

/* FINAL footer tighten + copyright */
.site-footer{
  padding:40px 0 18px;
}

.footer-grid{
  gap:18px !important;
}

.footer-intro p{
  margin-bottom:10px;
}

.footer-links{
  gap:2px !important;
}

.footer-note{
  padding:16px !important;
}

.footer-note p{
  margin-bottom:6px;
}

.footer-bottom{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:13px;
  opacity:0.7;
  text-align:center;
}

@media(max-width:768px){
  .site-footer{
    padding:30px 0 14px;
  }
  .footer-grid{
    gap:14px !important;
  }
}

/* FIX GAP between quick links and quotation box ONLY */
.footer-grid{
  grid-template-columns: 1.1fr 0.9fr 1.1fr !important;
  column-gap:16px !important;
}

.footer-links-wrap{
  max-width:180px;
}

.footer-note{
  margin-left:0 !important;
}

/* tighter alignment */
.footer-links-wrap,
.footer-note{
  justify-self:start;
}


/* contact page right-side empty gap tighten only */
.contact-grid{
  align-items:start;
  gap:22px !important;
}
.contact-card,
.contact-side,
.contact-info-card{
  margin-top:0 !important;
  align-self:start;
}
.contact-card{
  padding-top:18px !important;
}
@media (max-width: 900px){
  .contact-grid{
    gap:18px !important;
  }
}


/* contact page right column proper fix only */
.contact-layout{
  align-items:start !important;
}

.contact-layout .contact-visual{
  display:flex !important;
  flex-direction:column;
  gap:12px !important;
  align-self:start !important;
  height:auto !important;
}

.contact-layout .contact-visual .art{
  margin-bottom:0 !important;
}

.contact-layout .contact-visual .info-card,
.contact-layout .contact-visual .faq-card{
  margin:0 !important;
}

@media (max-width: 900px){
  .contact-layout .contact-visual{
    gap:10px !important;
  }
}


/* contact page map moved to right column only */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1fr !important;
  gap:18px !important;
  align-items:start !important;
}

.contact-layout .contact-panel,
.contact-layout .contact-visual{
  align-self:start !important;
}

.contact-layout .contact-visual{
  display:flex !important;
  flex-direction:column;
  gap:12px !important;
}

.contact-layout .contact-visual .art{
  margin-bottom:0 !important;
}

.contact-layout .contact-visual .map-card{
  padding:0 !important;
  overflow:hidden;
}

.contact-layout .contact-visual .map-card iframe{
  width:100%;
  height:260px;
  border:0;
  display:block;
}

@media (max-width: 900px){
  .contact-layout{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .contact-layout .contact-visual .map-card iframe{
    height:240px;
  }
}

@media (max-width: 640px){
  .contact-layout .contact-quick{
    grid-template-columns:1fr !important;
  }
  .contact-layout .form-grid{
    grid-template-columns:1fr !important;
  }
  .contact-layout .contact-visual .map-card iframe{
    height:220px;
  }
}


/* contact page exact left-right order fix only */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1fr !important;
  gap:18px !important;
  align-items:start !important;
}

.contact-panel,
.contact-visual{
  align-self:start !important;
}

.contact-visual{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.contact-visual .art{
  margin-bottom:0 !important;
}

.contact-visual .info-card,
.contact-visual .faq-card,
.contact-visual .map-card{
  margin:0 !important;
}

.map-card{
  padding:0 !important;
  overflow:hidden !important;
}

.map-card iframe{
  width:100%;
  height:250px;
  border:0;
  display:block;
}

@media (max-width: 900px){
  .contact-layout{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .map-card iframe{
    height:230px;
  }
}

@media (max-width: 640px){
  .contact-quick,
  .form-grid{
    grid-template-columns:1fr !important;
  }
  .map-card iframe{
    height:220px;
  }
}


/* contact page balanced two-column qc fix only */
.contact-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:18px !important;
  align-items:start !important;
}
.contact-layout > .contact-panel,
.contact-layout > .contact-visual{
  align-self:start !important;
  min-width:0 !important;
}
.contact-layout > .contact-panel{
  display:block !important;
}
.contact-layout > .contact-visual{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}
.contact-layout > .contact-visual .art{
  margin-bottom:0 !important;
}
.contact-layout > .contact-visual .info-card,
.contact-layout > .contact-visual .faq-card,
.contact-layout > .contact-visual .map-card{
  margin:0 !important;
}
.contact-layout > .contact-visual .map-card{
  padding:0 !important;
  overflow:hidden !important;
}
.contact-layout > .contact-visual .map-card iframe{
  width:100%;
  height:250px;
  border:0;
  display:block;
}
@media (max-width: 900px){
  .contact-layout{
    grid-template-columns:1fr !important;
  }
  .contact-layout > .contact-visual .map-card iframe{
    height:230px;
  }
}
@media (max-width: 640px){
  .contact-quick,
  .form-grid{
    grid-template-columns:1fr !important;
  }
  .contact-layout > .contact-visual .map-card iframe{
    height:220px;
  }
}


/* contact page equal-height columns only */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1fr !important;
  gap:18px !important;
  align-items:stretch !important;
}

.contact-layout > .contact-panel,
.contact-layout > .contact-visual{
  height:100% !important;
}

.contact-layout > .contact-panel{
  display:flex !important;
  flex-direction:column !important;
}

.contact-layout > .contact-visual{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.contact-layout > .contact-visual .art{
  margin-bottom:0 !important;
}

.contact-layout > .contact-visual .map-card{
  margin-top:auto !important;
}

.contact-layout > .contact-visual .map-card iframe{
  width:100%;
  height:340px !important;
  border:0;
  display:block;
}

@media (max-width: 900px){
  .contact-layout{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }
  .contact-layout > .contact-panel,
  .contact-layout > .contact-visual{
    height:auto !important;
  }
  .contact-layout > .contact-visual .map-card{
    margin-top:0 !important;
  }
  .contact-layout > .contact-visual .map-card iframe{
    height:240px !important;
  }
}

@media (max-width: 640px){
  .contact-layout .contact-quick,
  .contact-layout .form-grid{
    grid-template-columns:1fr !important;
  }
  .contact-layout > .contact-visual .map-card iframe{
    height:220px !important;
  }
}

/* PERFECT equal height using flex grow */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1fr !important;
  gap:18px !important;
  align-items:stretch !important;
}

.contact-layout > .contact-panel,
.contact-layout > .contact-visual{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}

/* make content stretch */
.contact-layout > .contact-panel > *{
  flex-shrink:0;
}

.contact-layout > .contact-visual > *{
  flex-shrink:0;
}

/* push map to fill remaining space */
.contact-layout > .contact-visual .map-card{
  margin-top:auto !important;
  display:flex;
}

.contact-layout > .contact-visual .map-card iframe{
  width:100%;
  height:100%;
  min-height:360px;
  flex:1;
  border:0;
}

/* ensure left also fills nicely */
.contact-layout > .contact-panel{
  justify-content:space-between;
}

@media (max-width: 900px){
  .contact-layout{
    grid-template-columns:1fr !important;
  }
  .contact-layout > .contact-panel,
  .contact-layout > .contact-visual{
    height:auto !important;
  }
  .contact-layout > .contact-visual .map-card iframe{
    min-height:240px;
  }
}

/* footer quick links wider spacing */
.footer-links{
  gap:10px !important;
}

.footer-links a{
  padding:6px 0 !important;
  line-height:1.6 !important;
}

.portfolio-item.is-hidden{display:none}
.portfolio-card .thumb img{display:block}


.portfolio-toolbar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;margin-top:26px;text-align:center}
.portfolio-count{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted)}
.portfolio-count strong{font-size:1.5rem;line-height:1;color:var(--text)}
.portfolio-toolbar .btn{min-width:220px;justify-content:center}

.portfolio-closing{max-width:760px;margin:18px auto 0;text-align:center;color:var(--muted)}
.portfolio-closing p{margin:0}
.portfolio-cta-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px}
.portfolio-cta-panel .button-row{margin:0}
@media(max-width:860px){.portfolio-cta-panel{flex-direction:column;align-items:flex-start}.portfolio-cta-panel .button-row{width:100%}.portfolio-cta-panel .btn{width:100%;justify-content:center}}


.section-head.section-head-portfolio{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;margin-bottom:30px}
.section-head.section-head-portfolio > div{display:flex;flex-direction:column;align-items:center;justify-content:center}
.section-head.section-head-portfolio .portfolio-intro-text{max-width:760px;margin:0 auto;color:#cfdcf1}
.portfolio-toolbar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;margin:26px auto 0;text-align:center}
.portfolio-count{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;color:#cfdcf1}
.portfolio-count strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.2rem;color:#fff}
.thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,11,20,.04) 0%,rgba(6,11,20,.12) 55%,rgba(6,11,20,.55) 100%);opacity:0;transition:opacity .28s ease;pointer-events:none}
.portfolio-card:hover .thumb::after,.portfolio-card:focus-within .thumb::after{opacity:1}
.zoom-btn{position:absolute;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%) scale(.88);width:58px;height:58px;padding:0;border:none;border-radius:999px;display:grid;place-items:center;background:rgba(8,15,28,.78);backdrop-filter:blur(8px);color:#fff;cursor:pointer;border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 30px rgba(0,0,0,.28);opacity:0;transition:transform .28s ease, opacity .28s ease, background .28s ease}
.zoom-btn span{font-size:1.15rem;line-height:1}
.portfolio-card:hover .zoom-btn,.portfolio-card:focus-within .zoom-btn{opacity:1;transform:translate(-50%,-50%) scale(1)}
.zoom-btn:hover{background:rgba(22,34,60,.92)}
@media(max-width:860px){.section-head.section-head-portfolio{align-items:center}.section-head.section-head-portfolio > div{align-items:center}.zoom-btn{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.home-portfolio-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}.home-portfolio-head>div,.home-portfolio-head p{max-width:820px;margin-left:auto;margin-right:auto}.home-portfolio-head h2:empty{display:none}


/* global typography polish across entire site */
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
main p,
main li,
main blockquote,
main .lead,
main .wa-note,
main .footer-note p,
main .portfolio-copy p,
main .service-card p,
main .metric-card p,
main .package-card p,
main .faq-card p,
main .process-card p,
main .info-card p,
main .page-banner p,
main .contact-panel p,
main .hero-copy p,
.site-footer p,
.site-footer li{
  text-align:left;
  line-height:1.74;
  letter-spacing:.005em;
  word-spacing:normal;
  hyphens:none;
  overflow-wrap:break-word;
}
.section-head.section-head-portfolio p,
.home-portfolio-head p,
.portfolio-intro-text,
.center-text{
  text-align:center;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.hero-copy .lead,
.page-banner p,
.section-head p,
.glass-card p,
.contact-panel p,
.cta-panel p{
  max-width:72ch;
}
.portfolio-copy p,
.service-card p,
.metric-card p,
.package-card p,
.faq-card p,
.process-card p,
.info-card p{
  text-wrap:pretty;
}

main h1,
main h2,
main h3,
main h4,
.site-footer h2,
.site-footer h3,
.site-footer h4{
  letter-spacing:-.02em;
  line-height:1.18;
}
.nav a,
.btn,
.button-row a,
.button-row button,
.keyword-row span,
.tag-row span,
.footer-badges span,
.service-tags span,
.portfolio-meta span,
.browser-bar,
.eyebrow,
.mini-contact,
small,
label,
input,
textarea,
select,
.footer-links a,
.top-cta,
.wa-fab,
.zoom-btn,
.lightbox figcaption,
figcaption{
  text-align:left;
  hyphens:none;
  word-spacing:normal;
}
.section-head p,
.page-banner p,
.hero-copy .lead,
.site-footer .footer-note p,
.contact-panel p,
.cta-panel p{
  max-width:none;
}
@media (max-width: 768px){
  main p,
  main li,
  main blockquote,
  main .lead,
  main .wa-note,
  .site-footer p,
  .site-footer li{
    text-align:left;
    hyphens:none;
    word-spacing:normal;
    max-width:none;
  }
  .section-head.section-head-portfolio p,
  .home-portfolio-head p,
  .portfolio-intro-text,
  .center-text{
    text-align:center;
  }
}


/* About page readability tuning */
.page-about main .glass-card p,
.page-about main .section-head p,
.page-about main .process-card p,
.page-about main .page-banner p{
  text-align:left;
  text-wrap:pretty;
  max-width:70ch;
  margin-left:0;
  margin-right:0;
  hyphens:none;
  word-spacing:normal;
}
.page-about main .section-head{align-items:start}
.page-about main .section-head p{max-width:68ch}
@media (max-width: 768px){
  .page-about main .glass-card p,
  .page-about main .section-head p,
  .page-about main .process-card p,
  .page-about main .page-banner p{
    text-align:left;
    max-width:none;
  }
}


/* About page: Our Approach section layout */
.page-about .about-approach-head{
  display:grid;
  grid-template-columns:minmax(0,0.95fr) minmax(0,1.4fr);
  align-items:center;
  gap:34px;
  margin-bottom:26px;
}
.page-about .about-approach-head > div{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
}
.page-about .about-approach-head .eyebrow{
  margin-bottom:10px;
}
.page-about .about-approach-head h2{
  max-width:16ch;
  margin:0;
  text-align:left;
  font-size:clamp(1.5rem,2vw,2rem);
  line-height:1.25;
}
.page-about .about-approach-head p{
  max-width:none;
  margin:0;
  text-align:left;
  line-height:1.8;
  letter-spacing:.005em;
  word-spacing:normal;
  text-wrap:pretty;
  hyphens:none;
  align-self:center;
}
@media (max-width: 768px){
  .page-about .about-approach-head{
    grid-template-columns:1fr;
    gap:14px;
  }
  .page-about .about-approach-head h2,
  .page-about .about-approach-head p{
    max-width:none;
  }
}


/* global eyebrow + heading + paragraph spacing polish */
.eyebrow{
  margin-bottom:16px;
}
.eyebrow + h1,
.eyebrow + h2,
.eyebrow + h3,
.eyebrow + h4{
  margin-top:0;
}
h1 + p,
h2 + p,
h3 + p,
h4 + p{
  margin-top:12px;
}
.page-banner .eyebrow{
  margin-bottom:18px;
}
.page-banner h1 + p,
.page-banner h2 + p{
  margin-top:14px;
}
.contact-panel .eyebrow,
.hero-copy .eyebrow,
.hero-copy .keyword-row{
  margin-bottom:18px;
}
.contact-panel h2 + p,
.contact-panel h3 + p,
.contact-layout h2 + p,
.contact-layout h3 + p{
  margin-top:14px;
}
.section-head .eyebrow{
  margin-bottom:14px;
}
.section-head h2 + p{
  margin-top:14px;
}
.portfolio-copy .eyebrow{
  margin-bottom:12px;
}
@media (max-width: 768px){
  .eyebrow{
    margin-bottom:14px;
  }
  h1 + p,
  h2 + p,
  h3 + p,
  h4 + p{
    margin-top:10px;
  }
}


/* premium motion + hover refinements */
.reveal{transition:opacity .65s ease,transform .65s cubic-bezier(.22,1,.36,1)}
.reveal[data-reveal-delay="1"]{transition-delay:.05s}
.reveal[data-reveal-delay="2"]{transition-delay:.1s}
.reveal[data-reveal-delay="3"]{transition-delay:.15s}
.reveal[data-reveal-delay="4"]{transition-delay:.2s}
.portfolio-card,.service-card,.price-card,.contact-card,.stat-card{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.portfolio-card:hover,.service-card:hover,.price-card:hover,.contact-card:hover,.stat-card:hover{transform:translateY(-6px);box-shadow:0 24px 65px rgba(3,10,25,.34);border-color:rgba(125,211,252,.28)}
.portfolio-card .thumb img{transition:transform .5s ease,filter .3s ease}
.portfolio-card:hover .thumb img{transform:scale(1.03)}
.zoom-btn{transition:transform .22s ease,background .22s ease,box-shadow .22s ease}
.zoom-btn:hover{transform:scale(1.06);box-shadow:0 12px 28px rgba(0,0,0,.28)}
.hero-visual .floating-note{transition:transform .3s ease,box-shadow .3s ease}
.hero-visual:hover .floating-note{box-shadow:0 18px 40px rgba(3,10,24,.3)}
.hero-visual:hover .note-1{transform:translateY(-4px)}
.hero-visual:hover .note-2{transform:translateY(4px)}

/* portfolio filter */
.portfolio-filter{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 24px}
.filter-chip{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#dce9f8;padding:12px 16px;border-radius:999px;font:800 .92rem/1 'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:all .22s ease}
.filter-chip:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.filter-chip.is-active{background:linear-gradient(135deg,#25d366,#2dd4bf);color:#06221b;border-color:transparent;box-shadow:0 14px 28px rgba(13,85,58,.28)}
.portfolio-item.is-filtered{display:none!important}
.portfolio-empty{display:none;margin-top:8px;padding:22px;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.04);text-align:center;color:#d7e5f8;font-weight:700}
.portfolio-empty.show{display:block}

@media (prefers-reduced-motion: reduce){
  .reveal,.portfolio-card,.service-card,.price-card,.contact-card,.stat-card,.portfolio-card .thumb img,.zoom-btn,.hero-visual .floating-note{transition:none!important}
}


/* ===== advanced conversion upgrades ===== */
.reveal{transition-delay:calc(var(--reveal-delay, 0) * 70ms)}
.trust-section{padding-top:20px}
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.trust-card{padding:24px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.trust-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.16);box-shadow:0 26px 70px rgba(2,8,22,.48)}
.trust-card strong{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.08rem;margin-bottom:10px;color:#fff}
.trust-card p{margin:0;color:#d7e5f8}
.wa-fab{border-radius:999px;padding:15px 18px 15px 16px}
.wa-fab span:first-child{font-size:1.05rem}
.portfolio-card .zoom-btn{width:50px;height:50px;border-radius:50%;padding:0;display:grid;place-items:center;font-size:0}
.portfolio-card .zoom-btn::before{content:'🔍';font-size:1.05rem;line-height:1}
.btn,.portfolio-filter button,.zoom-btn,.metric-card,.service-card,.package-card,.portfolio-card,.faq-card,.process-card,.info-card,.trust-card{will-change:transform}
@media(max-width:1200px){.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.trust-grid{grid-template-columns:1fr}.wa-fab span:last-child{display:inline}.wa-fab{right:14px;bottom:14px;padding:14px 16px}}

/* ===== icon cleanup: single thicker magnifier on homepage + portfolio ===== */
.portfolio-card .zoom-btn{
  width:66px !important;
  height:66px !important;
  padding:0 !important;
  border-radius:999px !important;
  background:rgba(8,15,28,.84) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.28) !important;
  position:absolute;
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  transform:translate(-50%,-50%) scale(.9);
  display:grid !important;
  place-items:center;
  overflow:hidden;
  font-size:0 !important;
}
.portfolio-card .zoom-btn span{display:none !important}
.portfolio-card .zoom-btn::before{
  content:'' !important;
  display:block;
  width:28px;
  height:28px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%273.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%276.5%27/%3E%3Cpath%20d%3D%27M16%2016l4.5%204.5%27/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:28px 28px;
}
.portfolio-card .zoom-btn::after{content:none !important;display:none !important}
.portfolio-card:hover .zoom-btn,
.portfolio-card:focus-within .zoom-btn{opacity:1;transform:translate(-50%,-50%) scale(1)}
.portfolio-card .zoom-btn:hover{transform:translate(-50%,-50%) scale(1.05) !important;background:rgba(18,28,50,.94) !important;box-shadow:0 16px 34px rgba(0,0,0,.32) !important}
@media(max-width:860px){
  .portfolio-card .zoom-btn{width:62px !important;height:62px !important;opacity:1;transform:translate(-50%,-50%) scale(1)}
  .portfolio-card .zoom-btn::before{width:26px;height:26px;background-size:26px 26px}
}


/* ===== final magnifier refinement: larger and perfectly centered ===== */
.portfolio-card .zoom-btn{
  width:68px !important;
  height:68px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}
.portfolio-card .zoom-btn span,
.portfolio-card .zoom-btn i,
.portfolio-card .zoom-btn svg{display:none !important}
.portfolio-card .zoom-btn::before{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:32px !important;
  height:32px !important;
  margin-left:-16px !important;
  margin-top:-16px !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:32px 32px !important;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%273.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2710.5%27%20cy%3D%2710.5%27%20r%3D%276.7%27/%3E%3Cpath%20d%3D%27M15.8%2015.8L20.4%2020.4%27/%3E%3C/svg%3E") !important;
}
.portfolio-card .zoom-btn::after{content:none !important;display:none !important}
@media(max-width:860px){
  .portfolio-card .zoom-btn{width:64px !important;height:64px !important}
  .portfolio-card .zoom-btn::before{width:30px !important;height:30px !important;margin-left:-15px !important;margin-top:-15px !important;background-size:30px 30px !important}
}


/* mobile compatibility cleanup: footer + homepage hero notes */
@media (max-width: 768px){
  .footer{
    padding-bottom: 110px;
  }
  .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    align-items: stretch;
  }
  .footer-brand,
  .footer-links,
  .footer-note,
  .footer-links-wrap{
    width: 100%;
    max-width: none !important;
    justify-self: stretch;
    align-self: stretch;
  }
  .footer-links{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px !important;
    margin-top: 0;
  }
  .footer-links h3{
    margin-bottom: 6px;
  }
  .footer-links a{
    min-height: auto;
    padding: 3px 0 !important;
    line-height: 1.45 !important;
  }
  .footer-badges{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }
  .footer-badges span{
    width: 100%;
    min-height: 44px;
  }
  .footer-note{
    padding: 18px !important;
    border-radius: 20px;
  }
  .footer-note .button-row,
  .footer-note .btn,
  .footer-note button{
    width: 100%;
    justify-content: center;
  }
  .footer-note .text-strong{
    gap: 8px;
  }

  .hero-grid{
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
  .hero-visual{
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 14px;
    place-items: stretch;
    min-height: auto !important;
    padding: 18px;
  }
  .hero-visual img.design-art{
    order: 0;
    width: 100%;
    min-height: auto !important;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
  }
  .hero-visual .floating-note{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100%;
    max-width: none;
    padding: 16px 18px;
    border-radius: 20px;
  }
  .hero-visual .note-2{
    order: 1;
  }
  .hero-visual .note-1{
    order: 2;
  }
}

@media (max-width: 480px){
  .footer{
    padding-bottom: 104px;
  }
  .footer-badges{
    grid-template-columns: 1fr;
  }
  .hero-visual{
    padding: 14px;
    gap: 12px;
  }
  .hero-visual img.design-art{
    border-radius: 20px;
  }
  .hero-visual .floating-note{
    padding: 14px 16px;
    border-radius: 18px;
  }
}




/* ===== all-pages top-gap optimisation ===== */
main > section:first-child{
  padding-top: 34px !important;
}

@media (min-width: 769px){
  .hero{
    padding-top: 34px !important;
    padding-bottom: 42px !important;
  }
  .page-hero{
    padding-top: 38px !important;
    padding-bottom: 18px !important;
  }
  section{
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .section.tight{
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (max-width: 768px){
  main > section:first-child{
    padding-top: 20px !important;
  }
  .hero{
    padding-top: 20px !important;
    padding-bottom: 30px !important;
  }
  .page-hero{
    padding-top: 20px !important;
    padding-bottom: 12px !important;
  }
  section{
    padding-top: 42px;
    padding-bottom: 42px;
  }
  .section.tight{
    padding-top: 32px;
    padding-bottom: 32px;
  }
}



/* language switch */
.lang-switch{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  white-space:nowrap;
  flex:0 0 auto;
}
.lang-switch a{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:.88rem;
  color:#d8e8ff;
  opacity:.85;
}
.lang-switch a:hover,
.lang-switch a.active{
  color:#fff;
  opacity:1;
}
.lang-switch .sep{
  color:rgba(255,255,255,.35);
}
@media(max-width:1280px){
  .nav-wrap{flex-wrap:wrap}
  .top-cta{margin-left:0}
}
@media(max-width:860px){
  .lang-switch{
    order:3;
    width:max-content;
    margin-top:6px;
  }
}


/* multilingual header alignment + localized text tidy */
.site-header .nav-wrap{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:18px;
}
.site-header .brand-logo-only{grid-column:1; margin-right:0;}
.site-header .nav{
  grid-column:2;
  margin-left:0;
  min-width:0;
  justify-content:center;
  justify-self:center;
}
.site-header .lang-switch{
  grid-column:3;
  justify-self:center;
  width:148px;
  min-width:148px;
  justify-content:center;
  padding:8px 16px;
  gap:10px;
}
.site-header .lang-switch a{
  min-width:2.8em;
  padding:4px 2px;
  text-align:center;
  border-radius:999px;
}
.site-header .lang-switch a.active{
  background:rgba(255,255,255,.09);
}
.site-header .top-cta{
  grid-column:4;
  justify-self:end;
  margin-left:0;
  min-width:max-content;
}
.site-header .mini-contact{
  justify-content:flex-end;
}
.site-header .mini-contact span{
  white-space:nowrap;
}

.pricing-grid,.harga-grid,.价格-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

html[lang='ms'] .nav a,
html[lang^='zh'] .nav a{
  line-height:1.2;
  text-align:center;
}
html[lang='ms'] .nav{
  flex-wrap:nowrap;
  gap:8px;
}
html[lang='ms'] .nav a{
  padding:10px 11px;
  font-size:.91rem;
  white-space:nowrap;
}
html[lang='ms'] .page-banner h1,
html[lang^='zh'] .page-banner h1,
html[lang='ms'] .hero-copy h1,
html[lang^='zh'] .hero-copy h1{
  max-width:none;
  line-height:1.16;
  letter-spacing:-.02em;
}
html[lang='ms'] .page-banner p,
html[lang^='zh'] .page-banner p,
html[lang='ms'] .hero-copy .lead,
html[lang^='zh'] .hero-copy .lead{
  max-width:70ch;
}
html[lang^='zh'] body{
  font-family:'Noto Sans SC','Microsoft YaHei','PingFang SC','Hiragino Sans GB','Source Han Sans SC','Nunito Sans',system-ui,sans-serif;
}
html[lang^='zh'] h1,
html[lang^='zh'] h2,
html[lang^='zh'] h3,
html[lang^='zh'] h4,
html[lang^='zh'] .nav a,
html[lang^='zh'] .btn,
html[lang^='zh'] .eyebrow{
  font-family:'Noto Sans SC','Microsoft YaHei','PingFang SC','Hiragino Sans GB','Source Han Sans SC','Plus Jakarta Sans',sans-serif;
}
html[lang^='zh'] p,
html[lang^='zh'] li,
html[lang^='zh'] .info-card,
html[lang^='zh'] .package-card{
  word-break:keep-all;
  overflow-wrap:break-word;
}

@media(max-width:1280px){
  .site-header .nav-wrap{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:'brand lang cta' 'nav nav nav';
  }
  .site-header .brand-logo-only{grid-area:brand;}
  .site-header .lang-switch{grid-area:lang;}
  .site-header .top-cta{grid-area:cta;}
  .site-header .nav{
    grid-area:nav;
    width:100%;
    justify-self:stretch;
    justify-content:center;
  }
}
@media(max-width:1100px){
  .site-header .nav-wrap{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:'brand nav lang';
  }
  .site-header .brand-logo-only{grid-area:brand;}
  .site-header .nav{grid-area:nav; width:auto; justify-self:center;}
  .site-header .lang-switch{grid-area:lang;}
  .site-header .top-cta{display:none;}
}
@media(max-width:860px){
  .site-header .nav-wrap{
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:'brand lang toggle' 'nav nav nav';
    gap:10px 16px;
  }
  .site-header .brand-logo-only{grid-area:brand; min-width:0;}
  .site-header .lang-switch{
    grid-area:lang;
    width:136px;
    min-width:136px;
    margin-top:0;
    order:initial;
    justify-self:center;
  }
  .site-header 
.menu-toggle {
    width: 48px;
    height: 48px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
  }
  .site-header .menu-toggle span {
    display: none !important;
  }
  .site-header .menu-toggle::before {
    content: '';
    display: block;
    width: 24px;
    height: 18px;
    background: 
      linear-gradient(to bottom, 
        #ffffff 0 2.5px, 
        transparent 2.5px 7.75px, 
        #ffffff 7.75px 10.25px, 
        transparent 10.25px 15.5px, 
        #ffffff 15.5px 18px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 18px;
    margin: 0;
    position: static;
    transform: none;
  }
  .site-header .nav{
    grid-area:nav;
    left:0;
    right:0;
    top:calc(100% + 8px);
    margin-left:0;
  }
}
@media(max-width:1200px){
  .pricing-grid,.harga-grid,.价格-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:860px){
  .pricing-grid,.harga-grid,.价格-grid{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .site-header .lang-switch{
    width:132px;
    min-width:132px;
    padding:7px 12px;
    gap:8px;
  }
  .site-header .lang-switch a{min-width:2.35em; font-size:.84rem;}
}


/* v4 header lock: desktop and mobile both use dropdown menu */
.site-header .nav-wrap{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto auto;
  grid-template-areas:'brand lang cta toggle';
  align-items:center;
  gap:14px 18px;
}
.site-header .brand-logo-only{grid-area:brand;justify-self:start;min-width:0;}
.site-header .lang-switch{
  grid-area:lang;
  justify-self:center;
  width:184px;
  min-width:184px;
  max-width:184px;
  padding:9px 18px;
  gap:12px;
  border-radius:999px;
}
.site-header .lang-switch a{
  min-width:3em;
  padding:5px 4px;
  line-height:1;
}
.site-header .top-cta{
  grid-area:cta;
  justify-self:end;
  min-width:max-content;
  margin-left:0;
}
.site-header 
.menu-toggle {
    width: 48px;
    height: 48px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}
.site-header .menu-toggle span {
    display: none !important;
}
.site-header .menu-toggle::before {
    content: '';
    display: block;
    width: 24px;
    height: 18px;
    background: 
      linear-gradient(to bottom, 
        #ffffff 0 2.5px, 
        transparent 2.5px 7.75px, 
        #ffffff 7.75px 10.25px, 
        transparent 10.25px 15.5px, 
        #ffffff 15.5px 18px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 18px;
    margin: 0;
    position: static;
    transform: none;
}
.site-header .menu-toggle:hover{background:rgba(255,255,255,.12);}
.site-header .nav{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  left:auto;
  width:min(360px,calc(100vw - 24px));
  padding:14px;
  border-radius:24px;
  background:#0e172a;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  display:none;
  z-index:70;
  margin-left:0;
}
.site-header .nav.open{display:flex;}
.site-header .nav a{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  white-space:nowrap;
  line-height:1.2;
}
html[lang='ms'] .site-header .nav,
html[lang^='zh'] .site-header .nav{
  width:min(380px,calc(100vw - 24px));
}
html[lang='ms'] .site-header .nav a,
html[lang^='zh'] .site-header .nav a{
  white-space:normal;
}
@media(max-width:1100px){
  .site-header .mini-contact{display:none;}
}
@media(max-width:860px){
  .site-header .nav-wrap{
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:'brand lang toggle';
    gap:10px 14px;
  }
  .site-header .top-cta{display:none;}
  .site-header .lang-switch{
    width:176px;
    min-width:176px;
    max-width:176px;
    padding:9px 18px;
  }
  .site-header 
.menu-toggle {
    width: 48px;
    height: 48px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}
.site-header .menu-toggle span {
    display: none !important;
}
.site-header .menu-toggle::before {
    content: '';
    display: block;
    width: 24px;
    height: 18px;
    background: 
      linear-gradient(to bottom, 
        #ffffff 0 2.5px, 
        transparent 2.5px 7.75px, 
        #ffffff 7.75px 10.25px, 
        transparent 10.25px 15.5px, 
        #ffffff 15.5px 18px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 18px;
    margin: 0;
    position: static;
    transform: none;
}
  .site-header .nav{
    top:calc(100% + 8px);
    right:0;
    width:min(340px,calc(100vw - 18px));
  }
}
@media(max-width:560px){
  .site-header .lang-switch{
    width:168px;
    min-width:168px;
    max-width:168px;
    padding:8px 16px;
    gap:10px;
  }
  .site-header .lang-switch a{min-width:2.9em;font-size:.84rem;}
  .site-header 
.menu-toggle {
    width: 48px;
    height: 48px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}
.site-header .menu-toggle span {
    display: none !important;
}
.site-header .menu-toggle::before {
    content: '';
    display: block;
    width: 24px;
    height: 18px;
    background: 
      linear-gradient(to bottom, 
        #ffffff 0 2.5px, 
        transparent 2.5px 7.75px, 
        #ffffff 7.75px 10.25px, 
        transparent 10.25px 15.5px, 
        #ffffff 15.5px 18px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 18px;
    margin: 0;
    position: static;
    transform: none;
}
}
@media(max-width:420px){
  .site-header .lang-switch{
    width:160px;
    min-width:160px;
    max-width:160px;
    padding:8px 14px;
    gap:8px;
  }
  .site-header .lang-switch a{min-width:2.7em;font-size:.82rem;}
  .site-header 
.menu-toggle {
    width: 48px;
    height: 48px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}
.site-header .menu-toggle span {
    display: none !important;
}
.site-header .menu-toggle::before {
    content: '';
    display: block;
    width: 24px;
    height: 18px;
    background: 
      linear-gradient(to bottom, 
        #ffffff 0 2.5px, 
        transparent 2.5px 7.75px, 
        #ffffff 7.75px 10.25px, 
        transparent 10.25px 15.5px, 
        #ffffff 15.5px 18px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 18px;
    margin: 0;
    position: static;
    transform: none;
}
}


/* v5 desktop-only hard lock for language switch + clearer menu icon */
@media (min-width: 861px){
  .site-header .nav-wrap{
    position:relative;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:'brand cta toggle';
    gap:14px 18px;
  }
  .site-header .brand-logo-only{grid-area:brand;}
  .site-header .top-cta{grid-area:cta; justify-self:end;}
  .site-header .menu-toggle{
    grid-area:toggle;
    display:grid;
    place-items:center;
    width:56px;
    height:48px;
    min-width:56px;
    padding:0;
    border-radius:16px;
    font-size:0;
    color:transparent;
    position:relative;
    background:rgba(255,255,255,.05);
    border:1px solid var(--line);
    box-shadow:none;
  }
  .site-header .menu-toggle::before{
    content:'';
    display:block;
    width:26px;
    height:18px;
    margin:0;
    border-radius:2px;
    background:
      linear-gradient(to bottom,
        #ffffff 0 2.5px,
        transparent 2.5px 7.75px,
        #ffffff 7.75px 10.25px,
        transparent 10.25px 15.5px,
        #ffffff 15.5px 18px);
  }
  .site-header .menu-toggle:hover{
    background:rgba(255,255,255,.08);
  }
  .site-header .lang-switch{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:200px;
    min-width:200px;
    max-width:200px;
    height:46px;
    padding:0 18px;
    gap:12px;
    justify-content:center;
    z-index:3;
  }
  .site-header .lang-switch a{
    min-width:3.1em;
    padding:0;
    line-height:1;
    text-align:center;
  }
  .site-header .lang-switch .sep{flex:0 0 auto;}
  .site-header .nav{
    top:calc(100% + 10px);
    right:0;
    left:auto;
  }
}

/* page-enter-fade */
.load-animate-target{
  opacity:0;
  transform:translateY(18px) scale(.995);
  filter:blur(6px);
  animation:page-enter-fade .72s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--load-order, 0) * 85ms);
  will-change:transform,opacity,filter;
}
@keyframes page-enter-fade{
  from{
    opacity:0;
    transform:translateY(18px) scale(.995);
    filter:blur(6px);
  }
  to{
    opacity:1;
    transform:none;
    filter:none;
  }
}
@media (prefers-reduced-motion: reduce){
  .load-animate-target{
    opacity:1;
    transform:none;
    filter:none;
    animation:none;
  }
}


/* enhanced site motion without layout changes */
:root{
  --motion-ease:cubic-bezier(.22,1,.36,1);
}
.motion-enhanced body{
  overflow-x:hidden;
}
.hero::before,
.page-banner::before{
  content:'';
  position:absolute;
  inset:auto -8% -22% auto;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(12,177,166,.12), rgba(12,177,166,0) 70%);
  pointer-events:none;
  animation:orb-drift 12s ease-in-out infinite;
}
.page-banner,
.hero,
.section,
.cta-panel,
.contact-visual,
.art,
.site-header,
.footer,
.service-card,
.portfolio-card,
.package-card,
.price-card,
.contact-card,
.info-card,
.metric-card,
.process-card,
.thumb,
.section-head,
.page-hero,
.hero-copy,
.hero-visual{
  position:relative;
}
.site-header{
  animation:header-settle .85s var(--motion-ease);
}
.brand-logo-only,
.brand span{
  transform-origin:left center;
  animation:logo-settle .9s var(--motion-ease);
}
.nav a,
.lang-switch a{
  position:relative;
  transition:transform .28s ease,color .28s ease,opacity .28s ease;
}
.nav a::after,
.lang-switch a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:2px;
  transform:scaleX(0);
  transform-origin:left center;
  background:currentColor;
  opacity:.35;
  transition:transform .3s ease, opacity .3s ease;
}
.nav a:hover,
.nav a:focus-visible,
.lang-switch a:hover,
.lang-switch a:focus-visible{
  transform:translateY(-1px);
}
.nav a:hover::after,
.nav a:focus-visible::after,
.lang-switch a:hover::after,
.lang-switch a:focus-visible::after{
  transform:scaleX(1);
}
.section-head > *{
  animation:content-rise .8s var(--motion-ease) both;
  animation-delay:calc(var(--motion-order, 0) * 60ms);
}
.eyebrow{
  letter-spacing:.08em;
  animation:eyebrow-glide .9s var(--motion-ease) both;
}
.hero-copy > *:not(.button-row),
.page-banner > *{
  animation:content-rise .9s var(--motion-ease) both;
  animation-delay:calc(var(--motion-order, 0) * 70ms);
}
.button-row .btn,
.top-cta .btn,
.filter-chip,
.zoom-btn,
.load-more-wrap .btn,
[data-contact-action],
[data-wa-open]{
  transition:transform .28s ease, box-shadow .28s ease, filter .28s ease;
}
.button-row .btn:hover,
.top-cta .btn:hover,
.filter-chip:hover,
.zoom-btn:hover,
.load-more-wrap .btn:hover,
[data-contact-action]:hover,
[data-wa-open]:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 28px rgba(15,23,42,.14);
  filter:saturate(1.05);
}
.btn-primary,
.btn-green,
.zoom-btn,
.filter-chip.is-active{
  overflow:hidden;
}
.btn-primary::before,
.btn-green::before,
.zoom-btn::before,
.filter-chip.is-active::before{
  content:'';
  position:absolute;
  inset:-120% auto -120% -35%;
  width:34%;
  transform:rotate(16deg) translateX(-220%);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events:none;
}
.btn-primary:hover::before,
.btn-green:hover::before,
.zoom-btn:hover::before,
.filter-chip.is-active::before{
  animation:shine-sweep .9s ease;
}
.hero-visual .floating-note,
.icon-bubble,
.browser-bar{
  animation:floating-card 6s ease-in-out infinite;
}
.hero-visual .note-2,
.icon-bubble:nth-child(2),
.portfolio-card:nth-child(odd) .browser-bar{
  animation-delay:-2s;
}
.hero-visual .note-1,
.icon-bubble:nth-child(1),
.portfolio-card:nth-child(even) .browser-bar{
  animation-delay:-1s;
}
.service-card,
.portfolio-card,
.package-card,
.price-card,
.contact-card,
.info-card,
.metric-card,
.process-card,
.contact-visual,
.art,
.cta-panel{
  transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}
.service-card:hover,
.portfolio-card:hover,
.package-card:hover,
.price-card:hover,
.contact-card:hover,
.info-card:hover,
.metric-card:hover,
.process-card:hover,
.contact-visual:hover,
.art:hover,
.cta-panel:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px rgba(15,23,42,.12);
}
.thumb{
  overflow:hidden;
}
.thumb img{
  transition:transform .7s var(--motion-ease), filter .4s ease;
  transform-origin:center center;
}
.portfolio-card:hover .thumb img,
.contact-visual:hover img,
.art:hover img{
  transform:scale(1.045);
}
.portfolio-copy > *,.service-card > *,.package-card > *,.price-card > *,.contact-card > *,.info-card > *,.metric-card > *,.process-card > *{
  animation:content-rise .7s var(--motion-ease) both;
  animation-delay:calc(var(--motion-order, 0) * 55ms);
}
.reveal.reveal-soft-left{transform:translate3d(-22px,12px,0);}
.reveal.reveal-soft-right{transform:translate3d(22px,12px,0);}
.reveal.reveal-rise{transform:translate3d(0,24px,0) scale(.985);}
.reveal.in.reveal-soft-left,
.reveal.in.reveal-soft-right,
.reveal.in.reveal-rise{transform:none;}
.footer{
  overflow:hidden;
}
.footer::before{
  content:'';
  position:absolute;
  inset:auto 10% 100% auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(12,177,166,.16), rgba(12,177,166,0) 72%);
  animation:orb-drift 13s ease-in-out infinite reverse;
  pointer-events:none;
}
.wa-fab{
  animation:fab-breathe 2.8s ease-in-out infinite;
}
@keyframes orb-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.8;}
  50%{transform:translate3d(-12px,-14px,0) scale(1.06);opacity:1;}
}
@keyframes floating-card{
  0%,100%{transform:translateY(0px);}
  50%{transform:translateY(-8px);}
}
@keyframes header-settle{
  from{transform:translateY(-14px);opacity:0;}
  to{transform:none;opacity:1;}
}
@keyframes logo-settle{
  from{transform:translateX(-8px) scale(.96);opacity:0;}
  to{transform:none;opacity:1;}
}
@keyframes content-rise{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:none;}
}
@keyframes eyebrow-glide{
  from{opacity:0;transform:translateY(10px);letter-spacing:.16em;}
  to{opacity:1;transform:none;letter-spacing:.08em;}
}
@keyframes shine-sweep{
  from{transform:rotate(16deg) translateX(-220%);}
  to{transform:rotate(16deg) translateX(520%);}
}
@keyframes fab-breathe{
  0%,100%{transform:scale(1);box-shadow:0 12px 28px rgba(34,197,94,.28);}
  50%{transform:scale(1.05);box-shadow:0 18px 34px rgba(34,197,94,.34);}
}
@media (prefers-reduced-motion: reduce){
  .hero::before,
  .page-banner::before,
  .section-head > *,
  .eyebrow,
  .hero-copy > *:not(.button-row),
  .page-banner > *,
  .hero-visual .floating-note,
  .icon-bubble,
  .browser-bar,
  .site-header,
  .brand-logo-only,
  .brand span,
  .wa-fab,
  .footer::before{
    animation:none!important;
  }
  .service-card:hover,
  .portfolio-card:hover,
  .package-card:hover,
  .price-card:hover,
  .contact-card:hover,
  .info-card:hover,
  .metric-card:hover,
  .process-card:hover,
  .contact-visual:hover,
  .art:hover,
  .cta-panel:hover,
  .button-row .btn:hover,
  .top-cta .btn:hover,
  .filter-chip:hover,
  .zoom-btn:hover,
  .load-more-wrap .btn:hover,
  [data-contact-action]:hover,
  [data-wa-open]:hover,
  .portfolio-card:hover .thumb img,
  .contact-visual:hover img,
  .art:hover img,
  .nav a:hover,
  .lang-switch a:hover{
    transform:none!important;
    box-shadow:none!important;
    filter:none!important;
  }
}


/* final logo sizing fix */
.brand-logo-only img{height:78px;width:auto;max-width:min(48vw,420px);object-fit:contain}
.footer .brand-logo-only img{height:70px;max-width:min(44vw,360px)}
@media (max-width: 1024px){.brand-logo-only img{height:70px;max-width:50vw}.footer .brand-logo-only img{height:62px;max-width:46vw}}
@media (max-width: 768px){.brand-logo-only img{height:60px;max-width:58vw}.footer .brand-logo-only img{height:54px;max-width:54vw}}
@media (max-width: 460px){.brand-logo-only img{height:52px;max-width:66vw}.footer .brand-logo-only img{height:46px;max-width:60vw}}



/* === exact user request: only 2 changes === */

/* 1) Make magnifier static (no moving / no running effect) */
.portfolio-card .zoom-btn,
.portfolio-card:hover .zoom-btn,
.portfolio-card:focus-within .zoom-btn,
.zoom-btn,
.zoom-btn:hover{
  transform: translate(-50%,-50%) scale(1) !important;
  transition: none !important;
  animation: none !important;
}

/* 2) Header always stays at top when scrolling + logo slightly smaller */
.site-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}
body{
  padding-top: 96px !important;
}
.brand-logo-only img{
  height: 62px !important;
  max-width: min(36vw,260px) !important;
}
@media (max-width: 1024px){
  .brand-logo-only img{
    height: 58px !important;
    max-width: 40vw !important;
  }
}
@media (max-width: 768px){
  body{
    padding-top: 84px !important;
  }
  .brand-logo-only img{
    height: 50px !important;
    max-width: 52vw !important;
  }
}
@media (max-width: 460px){
  body{
    padding-top: 78px !important;
  }
  .brand-logo-only img{
    height: 46px !important;
    max-width: 56vw !important;
  }
}




/* === only magnifier image movement fix === */
.portfolio-card .thumb img,
.portfolio-card:hover .thumb img,
.portfolio-card:focus-within .thumb img{
  transform: none !important;
  transition: none !important;
  animation: none !important;
}




/* === FINAL FIX: completely stop ANY image movement inside portfolio === */
.portfolio-card img,
.portfolio-card:hover img,
.portfolio-card:focus-within img{
  transform: none !important;
  transition: none !important;
  animation: none !important;
}




/* === exact override for portfolio image hover zoom === */
.portfolio-card .thumb img{
  transition: none !important;
}
.portfolio-card:hover .thumb img,
.portfolio-card:focus-within .thumb img{
  transform: scale(1) !important;
  transition: none !important;
  animation: none !important;
}


/* 2026-04-07 safe footer + package accent refinements */
.footer-links a{
  position:relative;
  padding-left:22px !important;
}
.footer-links a::before{
  content:'•';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-52%);
  font-size:1.25rem;
  line-height:1;
  color:rgba(125,211,252,.95);
}

.footer-note .text-strong span{
  position:relative;
  display:block;
  padding-left:28px;
}
.footer-note .text-strong span::before{
  position:absolute;
  left:0;
  top:0;
  font-size:1rem;
  line-height:1.6;
}
.footer-note .text-strong span:nth-child(1)::before{content:'📞';}
.footer-note .text-strong span:nth-child(2)::before{content:'✉️';}
.footer-note .text-strong span:nth-child(3)::before{content:'📍';}
.footer-note .text-strong span:nth-child(4)::before{content:'📍';}
.footer-note .text-strong span:nth-child(5)::before{content:'📍';}

.page-pricing .pricing-grid .package-card,
body:has(.pricing-grid) .pricing-grid .package-card{
  border-width:1px;
}
.page-pricing .pricing-grid .package-card:nth-child(1),
body:has(.pricing-grid) .pricing-grid .package-card:nth-child(1){
  background:linear-gradient(180deg,rgba(56,189,248,.12),rgba(255,255,255,.03));
  border-color:rgba(56,189,248,.28);
}
.page-pricing .pricing-grid .package-card:nth-child(2),
body:has(.pricing-grid) .pricing-grid .package-card:nth-child(2){
  background:linear-gradient(180deg,rgba(16,185,129,.12),rgba(255,255,255,.03));
  border-color:rgba(16,185,129,.30);
}
.page-pricing .pricing-grid .package-card:nth-child(3),
body:has(.pricing-grid) .pricing-grid .package-card:nth-child(3){
  background:linear-gradient(180deg,rgba(168,85,247,.12),rgba(255,255,255,.03));
  border-color:rgba(168,85,247,.28);
}
.page-pricing .pricing-grid .package-card:nth-child(4),
body:has(.pricing-grid) .pricing-grid .package-card:nth-child(4){
  background:linear-gradient(180deg,rgba(245,158,11,.13),rgba(255,255,255,.03));
  border-color:rgba(245,158,11,.30);
}

.page-pricing .pricing-grid .package-card:nth-child(1) > .eyebrow,
body:has(.pricing-grid) .pricing-grid .package-card:nth-child(1) > .eyebrow{
  background:rgba(56,189,248,.16);
  border-color:rgba(56,189,248,.28);
  color:#d9f4ff;
}
.page-pricing .pricing-grid .package-card:nth-child(1) > .eyebrow::before,
body:has(.pricing-grid) .pricing-grid .package-card:nth-child(1) > .eyebrow::before{background:#38bdf8;}

.page-pricing .pricing-grid .package-card:nth-child(2) > .eyebrow,
body:has(.pricing-grid) .pricing-grid .package-card:nth-child(2) > .eyebrow{
  background:rgba(16,185,129,.16);
  border-color:rgba(16,185,129,.28);
  color:#ddfff2;
}
.page-pricing .pricing-grid .package-card:nth-child(2) > .eyebrow::before,
body:has(.pricing-grid) .pricing-grid .package-card:nth-child(2) > .eyebrow::before{background:#10b981;}

.page-pricing .pricing-grid .package-card:nth-child(3) > .eyebrow,
body:has(.pricing-grid) .pricing-grid .package-card:nth-child(3) > .eyebrow{
  background:rgba(168,85,247,.16);
  border-color:rgba(168,85,247,.28);
  color:#f2e7ff;
}
.page-pricing .pricing-grid .package-card:nth-child(3) > .eyebrow::before,
body:has(.pricing-grid) .pricing-grid .package-card:nth-child(3) > .eyebrow::before{background:#a855f7;}

.page-pricing .pricing-grid .package-card:nth-child(4) > .eyebrow,
body:has(.pricing-grid) .pricing-grid .package-card:nth-child(4) > .eyebrow{
  background:rgba(245,158,11,.16);
  border-color:rgba(245,158,11,.28);
  color:#fff0cf;
}
.page-pricing .pricing-grid .package-card:nth-child(4) > .eyebrow::before,
body:has(.pricing-grid) .pricing-grid .package-card:nth-child(4) > .eyebrow::before{background:#f59e0b;}

/* 2026-04-07 final tiny refinement: single address icon + package hover lift */
.footer-note .text-strong span:nth-child(3){
  padding-left:28px;
}
.footer-note .text-strong span:nth-child(4),
.footer-note .text-strong span:nth-child(5){
  padding-left:28px;
}
.footer-note .text-strong span:nth-child(3)::before{content:'🏢';}
.footer-note .text-strong span:nth-child(4)::before,
.footer-note .text-strong span:nth-child(5)::before{content:'';}

.page-pricing .pricing-grid,
body:has(.pricing-grid) .pricing-grid{
  perspective:1200px;
}
.page-pricing .pricing-grid .package-card,
body:has(.pricing-grid) .pricing-grid .package-card{
  transform-origin:center center;
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, filter .24s ease;
  z-index:1;
}
.page-pricing .pricing-grid .package-card:hover,
.page-pricing .pricing-grid .package-card:focus-within,
body:has(.pricing-grid) .pricing-grid .package-card:hover,
body:has(.pricing-grid) .pricing-grid .package-card:focus-within{
  transform:translateY(-12px) scale(1.035);
  z-index:6;
  box-shadow:0 30px 70px rgba(2,8,22,.45);
}


/* 2026-04-07 pricing hover exact fix - pricing pages only */
body.page-pricing .pricing-grid{
  perspective:1200px;
}
body.page-pricing .pricing-grid .package-card{
  position:relative;
  transform:translateY(0) scale(1) translateZ(0);
  transform-origin:center center;
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease, filter .26s ease !important;
  z-index:1;
}
body.page-pricing .pricing-grid .package-card:hover,
body.page-pricing .pricing-grid .package-card:focus-within{
  transform:translateY(-14px) scale(1.04) translateZ(0) !important;
  z-index:8;
  box-shadow:0 34px 76px rgba(2,8,22,.50) !important;
}


/* 2026-04-07 website care package refinement - maintenance pages only */
body.page-maintenance .section > .container-wide > .grid-2{
  perspective:1200px;
}
body.page-maintenance .section > .container-wide > .grid-2 > .package-card:nth-child(1){
  background:linear-gradient(180deg,rgba(56,189,248,.12),rgba(255,255,255,.03));
  border-color:rgba(56,189,248,.28);
}
body.page-maintenance .section > .container-wide > .grid-2 > .package-card:nth-child(2){
  background:linear-gradient(180deg,rgba(16,185,129,.12),rgba(255,255,255,.03));
  border-color:rgba(16,185,129,.30);
}
body.page-maintenance .section > .container-wide > .grid-2 > .package-card:nth-child(1) > .eyebrow{
  background:rgba(56,189,248,.16);
  border-color:rgba(56,189,248,.28);
  color:#d9f4ff;
}
body.page-maintenance .section > .container-wide > .grid-2 > .package-card:nth-child(1) > .eyebrow::before{background:#38bdf8;}
body.page-maintenance .section > .container-wide > .grid-2 > .package-card:nth-child(2) > .eyebrow{
  background:rgba(16,185,129,.16);
  border-color:rgba(16,185,129,.28);
  color:#ddfff2;
}
body.page-maintenance .section > .container-wide > .grid-2 > .package-card:nth-child(2) > .eyebrow::before{background:#10b981;}
body.page-maintenance .section > .container-wide > .grid-2 > .package-card{
  position:relative;
  transform:translateY(0) scale(1) translateZ(0);
  transform-origin:center center;
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease, filter .26s ease !important;
  z-index:1;
}
body.page-maintenance .section > .container-wide > .grid-2 > .package-card:hover,
body.page-maintenance .section > .container-wide > .grid-2 > .package-card:focus-within{
  transform:translateY(-14px) scale(1.04) translateZ(0) !important;
  z-index:8;
  box-shadow:0 34px 76px rgba(2,8,22,.50) !important;
}
@media (hover:none), (pointer:coarse){
  body.page-maintenance .section > .container-wide > .grid-2 > .package-card:hover,
  body.page-maintenance .section > .container-wide > .grid-2 > .package-card:focus-within{
    transform:translateY(0) scale(1) translateZ(0) !important;
    box-shadow:var(--shadow) !important;
  }
}

/* 2026-04-07 portfolio magnifier final static fix */
.portfolio-card .zoom-btn::before,
.portfolio-card:hover .zoom-btn::before,
.portfolio-card:focus-within .zoom-btn::before,
.portfolio-card .zoom-btn:hover::before{
  animation:none !important;
  content:none !important;
  display:none !important;
}
.portfolio-card .zoom-btn,
.portfolio-card:hover .zoom-btn,
.portfolio-card:focus-within .zoom-btn,
.portfolio-card .zoom-btn:hover{
  transform:translate(-50%,-50%) scale(1) !important;
  transition:none !important;
  filter:none !important;
  box-shadow:0 14px 30px rgba(0,0,0,.28) !important;
}

/* 2026-04-07 portfolio magnifier icon restore + static hover only */
.portfolio-card .zoom-btn::before,
.portfolio-card:hover .zoom-btn::before,
.portfolio-card:focus-within .zoom-btn::before,
.portfolio-card .zoom-btn:hover::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:32px !important;
  height:32px !important;
  margin-left:-16px !important;
  margin-top:-16px !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:32px 32px !important;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%273.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2710.5%27%20cy%3D%2710.5%27%20r%3D%276.7%27/%3E%3Cpath%20d%3D%27M15.8%2015.8L20.4%2020.4%27/%3E%3C/svg%3E") !important;
  animation:none !important;
  transform:none !important;
  opacity:1 !important;
}
.portfolio-card .zoom-btn::after,
.portfolio-card:hover .zoom-btn::after,
.portfolio-card:focus-within .zoom-btn::after,
.portfolio-card .zoom-btn:hover::after{
  content:none !important;
  display:none !important;
}
.portfolio-card .zoom-btn,
.portfolio-card:hover .zoom-btn,
.portfolio-card:focus-within .zoom-btn,
.portfolio-card .zoom-btn:hover{
  transform:translate(-50%,-50%) scale(1) !important;
  transition:none !important;
  animation:none !important;
}