:root{--navy:#061426;--navy-2:#0c2340;--navy-3:#15385d;--gold:#d4a73b;--gold-dark:#a97816;--gold-soft:#f8f0dc;--ink:#132235;--muted:#667485;--line:#e2e8ee;--soft:#f7f9fb;--white:#fff;--shadow:0 22px 60px rgba(6,20,38,.12);--container:min(1240px,calc(100% - 48px));--radius:24px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:var(--container);margin-inline:auto}.section{padding:96px 0}.section-sm{padding:64px 0}.soft{background:var(--soft)}.dark{background:var(--navy);color:#fff}.gold{color:var(--gold)}.muted{color:var(--muted)}.skip-link{position:fixed;left:14px;top:-80px;z-index:9999;background:#fff;padding:11px 16px;border-radius:10px;box-shadow:var(--shadow)}.skip-link:focus{top:14px}.top-strip{background:var(--navy);color:#dbe6f0;font-size:12px}.top-strip-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:18px}.top-strip-links{display:flex;align-items:center;gap:22px}.top-strip a{font-weight:700}.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-bottom:1px solid rgba(6,20,38,.08)}.header-inner{height:84px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;margin-right:auto}.brand img{width:185px;height:64px;object-fit:contain;border-radius:8px}.nav{display:flex;align-items:center;gap:27px}.nav a{position:relative;font-size:14px;font-weight:800;color:#344457}.nav a:hover,.nav a.active{color:var(--gold-dark)}.nav a:after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:2px;background:var(--gold);transform:scaleX(0);transition:.25s}.nav a:hover:after,.nav a.active:after{transform:scaleX(1)}.header-actions{display:flex;gap:9px;align-items:center}.icon-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:#fff;color:var(--navy)}.icon-btn svg{width:20px;height:20px}.icon-btn.whatsapp{background:#1ca96b;border-color:#1ca96b;color:#fff}.menu-toggle{display:none;border:0;background:none;padding:8px;color:var(--navy)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px;border-radius:13px;border:1px solid transparent;font-size:13px;font-weight:850;transition:transform .2s,box-shadow .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--navy);color:#fff;box-shadow:0 13px 28px rgba(6,20,38,.18)}.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 13px 28px rgba(212,167,59,.24)}.btn-light{background:#fff;color:var(--navy);border-color:var(--line)}.btn-outline{color:#fff;border-color:rgba(255,255,255,.38);background:transparent}.btn-sm{min-height:42px;padding:0 17px;border-radius:11px}.eyebrow,.section-label{display:flex;align-items:center;gap:10px;color:var(--gold-dark);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.15em}.eyebrow:before,.section-label:before{content:"";width:28px;height:2px;background:var(--gold)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:38px;margin-bottom:42px}.section-head.center{display:block;text-align:center;max-width:760px;margin:0 auto 42px}.section-head.center .section-label{justify-content:center}.section-head.center .section-label:before{display:none}.section-head h2{font-size:clamp(36px,4.5vw,60px);line-height:1.05;letter-spacing:-.045em;margin:11px 0 0}.section-head p{max-width:530px;color:var(--muted);margin:0}.hero{position:relative;overflow:hidden;padding:90px 0 76px;background:linear-gradient(135deg,#f9fbfd 0,#fff 48%,#fbf5e7 100%)}.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(6,20,38,.05) 1px,transparent 0);background-size:22px 22px;mask-image:linear-gradient(90deg,#000,transparent 80%)}.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr);gap:54px;align-items:center}.hero h1,.hero .mobile-h1{font-size:clamp(52px,6vw,84px);line-height:.99;letter-spacing:-.055em;margin:14px 0 22px;color:var(--navy)}.hero p{font-size:17px;color:var(--muted);max-width:690px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-proof{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px;padding-top:27px;border-top:1px solid var(--line)}.hero-proof div{display:grid;gap:3px}.hero-proof strong{font-size:22px;color:var(--navy)}.hero-proof span{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.hero-visual{position:relative;min-height:520px}.browser{position:absolute;inset:30px 0 50px 22px;background:#fff;border:1px solid var(--line);border-radius:25px;box-shadow:var(--shadow);overflow:hidden;transform:rotate(1.8deg)}.browser-top{height:52px;display:flex;align-items:center;gap:8px;padding:0 18px;background:#f1f4f7}.browser-top i{width:10px;height:10px;border-radius:50%;background:#cbd4dd}.browser-address{height:28px;flex:1;margin-left:10px;border-radius:10px;background:#fff}.browser-body{padding:30px}.mini-nav{display:flex;justify-content:space-between;align-items:center}.mini-logo{font-weight:900;font-size:20px;color:var(--navy)}.mini-logo em{font-style:normal;color:var(--gold)}.mini-links{display:flex;gap:18px}.mini-links span{height:8px;width:45px;border-radius:4px;background:#dfe5eb}.mini-hero{display:grid;grid-template-columns:1fr .8fr;gap:22px;align-items:center;padding:38px 0}.mini-copy h3{font-size:33px;line-height:1.05;margin:0 0 14px;color:var(--navy)}.mini-line{height:10px;border-radius:5px;background:#dce4eb;margin:8px 0}.mini-line.short{width:68%}.mini-cta{width:110px;height:38px;border-radius:11px;background:var(--gold);margin-top:22px}.mini-art{height:220px;border-radius:28px;background:linear-gradient(145deg,var(--navy),var(--navy-3));position:relative;overflow:hidden}.mini-art:before,.mini-art:after{content:"";position:absolute;border-radius:50%}.mini-art:before{width:170px;height:170px;background:rgba(212,167,59,.95);right:-40px;top:-20px}.mini-art:after{width:160px;height:160px;border:2px solid rgba(255,255,255,.35);left:32px;bottom:-70px}.seo-score{position:absolute;right:-16px;top:0;width:178px;padding:18px;background:var(--navy);color:#fff;border-radius:20px;box-shadow:0 18px 40px rgba(6,20,38,.24);transform:rotate(-4deg)}.seo-score small{display:block;color:#aab8c8;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.seo-score strong{display:block;font-size:48px;line-height:1;color:var(--gold);margin-top:7px}.seo-score span{font-size:11px}.growth-card{position:absolute;left:-5px;bottom:4px;width:220px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:18px}.growth-card strong{display:block;color:var(--navy)}.bars{height:90px;display:flex;align-items:end;gap:10px;margin-top:14px}.bars i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(var(--gold),#efd68d)}.bars i:nth-child(1){height:28%}.bars i:nth-child(2){height:45%}.bars i:nth-child(3){height:58%}.bars i:nth-child(4){height:78%}.bars i:nth-child(5){height:100%}.trust-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.trust-item{padding:24px 28px;border-right:1px solid var(--line)}.trust-item:last-child{border:0}.trust-item strong{display:block;font-size:14px;color:var(--navy)}.trust-item span{font-size:11px;color:var(--muted)}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.service-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:.25s;min-height:100%}.service-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.service-image{height:215px;background:#eef2f6;overflow:hidden}.service-image img{width:100%;height:100%;object-fit:cover}.service-copy{padding:25px;display:flex;flex-direction:column;flex:1}.service-copy span{font-size:9px;color:var(--gold-dark);font-weight:900;text-transform:uppercase;letter-spacing:.13em}.service-copy h3{font-size:23px;line-height:1.15;margin:8px 0 10px;color:var(--navy)}.service-copy p{font-size:13px;color:var(--muted);margin:0 0 19px}.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold-dark);font-size:12px;font-weight:900;margin-top:auto}.text-link:hover{gap:12px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.process-card{position:relative;padding:29px;border-radius:22px;background:#fff;border:1px solid var(--line)}.process-number{font-size:44px;line-height:1;font-weight:900;color:#eadbb8}.process-card h3{margin:18px 0 8px;font-size:19px;color:var(--navy)}.process-card p{font-size:12px;color:var(--muted);margin:0}.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}.case-image{padding:12px;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}.case-image img{border-radius:18px}.case-copy h2{font-size:clamp(38px,4.5vw,62px);line-height:1.05;letter-spacing:-.045em;margin:12px 0 19px}.check-list{list-style:none;margin:24px 0 29px;padding:0;display:grid;gap:12px}.check-list li{display:flex;gap:11px;color:#324258}.check-list li:before{content:"✓";width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--gold-soft);display:grid;place-items:center;color:var(--gold-dark);font-size:12px;font-weight:900}.review-shell{position:relative}.review-track{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.review-card{border:1px solid var(--line);border-radius:24px;padding:28px;background:#fff}.review-icon{width:43px;height:43px;border-radius:14px;background:var(--gold-soft);display:grid;place-items:center;color:var(--gold-dark);font-size:24px;font-weight:900}.review-card h3{font-size:18px;color:var(--navy);margin:19px 0 9px}.review-card p{font-size:13px;color:var(--muted)}.review-meta{margin-top:19px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;font-weight:800;color:#3d4d60}.review-note{font-size:11px;color:var(--muted);margin-top:18px;text-align:center}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}.blog-card{border:1px solid var(--line);background:#fff;border-radius:23px;overflow:hidden;transition:.25s}.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.blog-thumb{height:210px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--navy-3));padding:26px}.blog-thumb:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:rgba(212,167,59,.92);right:-45px;top:-65px}.blog-thumb span{position:relative;color:#fff;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.blog-thumb b{position:absolute;left:26px;right:26px;bottom:25px;color:#fff;font-size:25px;line-height:1.1}.blog-body{padding:23px}.blog-meta{display:flex;gap:14px;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.blog-body h3{font-size:20px;line-height:1.25;color:var(--navy);margin:11px 0}.blog-body p{font-size:12px;color:var(--muted)}.cta-band{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--navy),#0e3055);color:#fff;border-radius:30px;padding:56px}.cta-band:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(212,167,59,.13);right:-100px;top:-160px}.cta-band-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:36px}.cta-band h2{font-size:clamp(35px,4.5vw,58px);line-height:1.05;letter-spacing:-.04em;margin:0 0 12px}.cta-band p{margin:0;color:#cbd6e2;max-width:650px}.cta-actions{display:flex;gap:11px;flex-wrap:wrap}.page-hero{position:relative;overflow:hidden;padding:86px 0 70px;background:linear-gradient(135deg,#f8fafc,#fff 55%,#fbf3df)}.page-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(6,20,38,.05) 1px,transparent 0);background-size:22px 22px}.page-hero-inner{position:relative;max-width:930px}.page-hero h1,.page-hero .mobile-h1{font-size:clamp(52px,6.5vw,86px);line-height:1;letter-spacing:-.055em;color:var(--navy);margin:14px 0 21px}.page-hero p{font-size:17px;color:var(--muted);max-width:790px}.breadcrumb{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:22px}.breadcrumb a{font-weight:800;color:var(--gold-dark)}.about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}.about-art{min-height:500px;border-radius:30px;background:linear-gradient(145deg,var(--navy),var(--navy-3));position:relative;overflow:hidden;padding:42px}.about-art:before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:var(--gold);right:-130px;top:-120px}.about-art img{position:relative;width:100%;border-radius:20px;margin-top:120px;box-shadow:0 20px 50px rgba(0,0,0,.25)}.about-copy h2,.content-copy h2{font-size:clamp(38px,4.5vw,60px);line-height:1.06;letter-spacing:-.045em;margin:12px 0 20px}.about-copy p,.content-copy p{color:var(--muted)}.founder-card{display:grid;grid-template-columns:280px 1fr;gap:42px;padding:42px;border-radius:28px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}.founder-portrait{min-height:310px;border-radius:23px;background:linear-gradient(145deg,var(--navy),var(--navy-3));display:grid;place-items:center;color:#fff}.founder-portrait b{font-size:92px;color:var(--gold)}.founder-copy h2{font-size:42px;line-height:1.08;margin:7px 0 12px}.founder-copy h3{font-size:15px;color:var(--gold-dark);margin:0 0 18px}.values-grid,.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.value-card,.industry-card{border:1px solid var(--line);border-radius:22px;padding:27px;background:#fff}.value-card h3,.industry-card h3{font-size:18px;color:var(--navy);margin:12px 0 7px}.value-card p,.industry-card p{font-size:12px;color:var(--muted);margin:0}.value-icon{width:46px;height:46px;border-radius:15px;background:var(--gold-soft);display:grid;place-items:center;font-weight:900;color:var(--gold-dark)}.service-detail-hero{padding:82px 0 68px;background:linear-gradient(135deg,#f7fafc,#fff 50%,#fbf2dd)}.service-detail-grid{display:grid;grid-template-columns:1fr .85fr;gap:55px;align-items:center}.service-detail-hero h1,.service-detail-hero .mobile-h1{font-size:clamp(50px,6vw,78px);line-height:1;letter-spacing:-.05em;color:var(--navy);margin:14px 0 20px}.service-detail-hero p{color:var(--muted);font-size:16px}.service-detail-image{border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}.service-detail-image img{width:100%}.deliverables-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.deliverable{border:1px solid var(--line);border-radius:20px;padding:24px;background:#fff}.deliverable b{display:block;font-size:16px;color:var(--navy);margin-bottom:7px}.deliverable p{font-size:12px;color:var(--muted);margin:0}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:start}.sticky-card{position:sticky;top:125px;border-radius:25px;background:var(--navy);color:#fff;padding:32px}.sticky-card h3{font-size:27px;line-height:1.15;margin:0 0 14px}.sticky-card p{color:#c5d2df;font-size:13px}.sticky-card .check-list li{color:#e6eef6}.faq-list{display:grid;gap:12px}.faq{border:1px solid var(--line);border-radius:16px;background:#fff;padding:0 19px}.faq summary{list-style:none;cursor:pointer;font-weight:850;color:var(--navy);padding:18px 34px 18px 0;position:relative}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";position:absolute;right:0;top:15px;width:28px;height:28px;border-radius:50%;background:var(--gold-soft);display:grid;place-items:center;color:var(--gold-dark)}.faq[open] summary:after{content:"–"}.faq p{margin:-2px 0 18px;color:var(--muted);font-size:13px}.contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:35px}.contact-cards{display:grid;gap:14px}.contact-card{border:1px solid var(--line);border-radius:19px;padding:22px;background:#fff}.contact-card small{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:9px;font-weight:900;color:var(--gold-dark)}.contact-card strong{display:block;font-size:16px;color:var(--navy);margin-top:7px}.contact-card p{font-size:12px;color:var(--muted);margin:5px 0 0}.contact-form{border:1px solid var(--line);border-radius:26px;padding:32px;background:#fff;box-shadow:var(--shadow)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:11px;font-weight:850;color:#334357}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:13px;padding:13px 14px;outline:none;background:#fff}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,167,59,.13)}.field textarea{min-height:135px;resize:vertical}.form-note{font-size:10px;color:var(--muted);margin-top:12px}.map-frame{width:100%;height:440px;border:0;border-radius:28px}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:52px;align-items:start}.article{max-width:820px}.article h1,.article .mobile-h1{font-size:clamp(45px,6vw,72px);line-height:1.03;letter-spacing:-.05em;color:var(--navy);margin:15px 0 20px}.article-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:11px;font-weight:800;color:var(--muted);padding-bottom:24px;border-bottom:1px solid var(--line)}.article-lead{font-size:19px;color:#3c4b5c;margin:30px 0}.article h2{font-size:31px;line-height:1.2;color:var(--navy);margin:42px 0 14px}.article h3{font-size:22px;color:var(--navy);margin:30px 0 10px}.article p,.article li{color:#536273}.article ul,.article ol{display:grid;gap:10px}.article-callout{margin:30px 0;padding:24px;border-radius:18px;background:var(--gold-soft);border-left:4px solid var(--gold)}.article-sidebar{position:sticky;top:120px;display:grid;gap:18px}.sidebar-card{border:1px solid var(--line);border-radius:20px;padding:24px;background:#fff}.sidebar-card h3{margin:0 0 12px;color:var(--navy)}.sidebar-card a{display:block;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px;font-weight:800;color:#405064}.sidebar-card a:last-child{border:0}.footer{background:#041120;color:#d7e2ed;padding:76px 0 24px}.footer-grid{display:grid;grid-template-columns:1.25fr .7fr .85fr 1fr;gap:48px}.footer-brand img{width:230px;border-radius:10px}.footer-brand p{font-size:12px;color:#aebdcb;max-width:360px}.footer h3{font-size:13px;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin:0 0 18px}.footer-links{display:grid;gap:10px}.footer-links a{font-size:12px;color:#aebdcb}.footer-links a:hover{color:var(--gold)}.footer-contact{display:grid;gap:10px;font-size:12px;color:#aebdcb}.footer-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:58px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:10px;color:#8494a3}.floating-actions{position:fixed;right:18px;bottom:18px;z-index:800;display:grid;gap:9px}.float-btn{display:flex;align-items:center;gap:9px;justify-content:center;min-width:116px;height:44px;padding:0 14px;border-radius:999px;color:#fff;font-size:11px;font-weight:850;box-shadow:0 12px 28px rgba(6,20,38,.22)}.float-btn.call{background:#fff;color:var(--navy);border:1px solid var(--line)}.float-btn.whatsapp{background:#18a866}.reveal{opacity:0;transform:translateY(22px);transition:.65s ease}.reveal.visible{opacity:1;transform:none}.status-message{display:none;margin-top:14px;padding:12px 14px;border-radius:12px;background:#eef8f1;color:#15613c;font-size:12px;font-weight:700}.status-message.show{display:block}
@media(max-width:1100px){.nav{gap:17px}.header-actions .btn{display:none}.hero-grid,.service-detail-grid{grid-template-columns:1fr}.hero-visual{max-width:760px;width:100%;margin:0 auto}.hero-copy{text-align:center}.hero-copy .eyebrow{justify-content:center}.hero-copy .eyebrow:before{display:none}.hero-copy p{margin-inline:auto}.hero-actions,.hero-proof{justify-content:center}.services-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}.case-grid,.about-grid,.two-col,.contact-grid{grid-template-columns:1fr}.review-track{grid-template-columns:1fr 1fr}.review-card:last-child{grid-column:1/-1}.values-grid,.industry-grid,.deliverables-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.2fr 1fr 1fr}.footer-grid>div:nth-child(3){display:none}.article-layout{grid-template-columns:1fr}.article-sidebar{position:static;grid-template-columns:1fr 1fr}.sticky-card{position:static}.founder-card{grid-template-columns:220px 1fr}.trust-grid{grid-template-columns:repeat(2,1fr)}.trust-item:nth-child(2){border-right:0}.trust-item:nth-child(-n/**/+2){border-bottom:1px solid var(--line)}}
@media(max-width:820px){:root{--container:min(100% - 32px,720px)}.section{padding:72px 0}.top-strip-inner{justify-content:center}.top-strip-inner>span{display:none}.top-strip-links{gap:14px}.header-inner{height:74px}.brand img{width:148px;height:52px}.nav{display:none;position:fixed;inset:112px 16px auto 16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:4px}.nav.open{display:flex}.nav a{padding:13px 12px;border-radius:11px}.nav a:after{display:none}.nav a:hover,.nav a.active{background:var(--gold-soft)}.menu-toggle{display:block}.header-actions .icon-btn{display:none}.hero{padding:68px 0 56px}.hero h1,.hero .mobile-h1{font-size:56px}.hero-grid{gap:30px}.hero-visual{min-height:430px}.browser{inset:25px 12px 40px 12px}.seo-score{right:0;width:145px}.growth-card{left:0;width:180px}.mini-hero{grid-template-columns:1fr}.mini-art{display:none}.services-grid,.blog-grid,.review-track{grid-template-columns:1fr}.review-card:last-child{grid-column:auto}.case-grid{gap:34px}.founder-card{grid-template-columns:1fr}.founder-portrait{min-height:220px}.values-grid,.industry-grid,.deliverables-grid{grid-template-columns:1fr}.section-head{display:block}.section-head p{margin-top:15px}.cta-band{padding:42px 30px}.cta-band-inner{display:block}.cta-actions{margin-top:25px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.article-sidebar{grid-template-columns:1fr}.page-hero{padding:62px 0 54px}.page-hero h1,.page-hero .mobile-h1{font-size:56px}.service-detail-hero{padding:62px 0 50px}.service-detail-hero h1,.service-detail-hero .mobile-h1{font-size:54px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}
@media(max-width:560px){:root{--container:calc(100% - 26px)}.top-strip{font-size:10px}.top-strip-links a:first-child{display:none}.header-inner{height:68px}.brand img{width:130px;height:46px}.nav{inset:106px 13px auto 13px}.hero h1,.hero .mobile-h1{font-size:45px}.hero p{font-size:14px}.hero-proof{display:grid;grid-template-columns:1fr 1fr;width:100%}.hero-visual{min-height:365px}.browser{inset:24px 5px 30px 5px}.browser-body{padding:20px}.mini-hero{padding:27px 0}.mini-copy h3{font-size:27px}.seo-score{width:125px;padding:14px}.seo-score strong{font-size:39px}.growth-card{width:150px;padding:13px}.bars{height:65px}.trust-grid{grid-template-columns:1fr 1fr}.trust-item{padding:18px 15px}.trust-item strong{font-size:12px}.section{padding:60px 0}.section-head h2{font-size:38px}.service-image{height:190px}.process-grid{grid-template-columns:1fr}.case-copy h2,.about-copy h2,.content-copy h2{font-size:38px}.cta-band{border-radius:23px;padding:34px 23px}.cta-band h2{font-size:36px}.cta-actions{display:grid}.cta-actions .btn{width:100%}.page-hero h1,.page-hero .mobile-h1{font-size:44px}.page-hero p{font-size:14px}.about-art{min-height:390px;padding:25px}.about-art img{margin-top:120px}.founder-card{padding:25px}.founder-copy h2{font-size:34px}.service-detail-hero h1,.service-detail-hero .mobile-h1{font-size:43px}.contact-form{padding:23px}.footer{padding-top:58px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{display:block}.floating-actions{right:10px;bottom:10px}.float-btn{min-width:48px;width:48px;padding:0;border-radius:50%;font-size:0}.float-btn:before{font-size:18px}.float-btn.call:before{content:"☎"}.float-btn.whatsapp:before{content:"◉"}.article h1,.article .mobile-h1{font-size:42px}.article h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* =========================================================
   2026 VISUAL SYSTEM UPDATE
   Wide laptop alignment, transparent branding, real imagery,
   polished image cropping and motion with reduced-motion support.
   ========================================================= */
:root{
  --container:min(1450px,calc(100% - 40px));
  --navy:#061426;
  --navy-2:#0b223d;
  --navy-3:#143b63;
  --gold:#e0ad36;
  --gold-dark:#9b6710;
  --gold-soft:#fff6df;
  --soft:#f4f7fa;
  --line:#dde5ec;
  --shadow:0 24px 70px rgba(6,20,38,.13);
  --shadow-strong:0 32px 90px rgba(6,20,38,.2);
}
body{overflow-x:hidden;background:#fff}
.container{width:var(--container)}
.section{padding:92px 0}
.site-header{background:rgba(255,255,255,.94);transition:box-shadow .3s ease,background .3s ease,transform .3s ease}
.site-header.scrolled{box-shadow:0 12px 34px rgba(6,20,38,.09);background:rgba(255,255,255,.985)}
.header-inner{height:66px;gap:22px}
.brand{min-width:205px;overflow:visible}
.brand img{width:205px;height:44px;object-fit:contain;object-position:left center;border-radius:0;filter:none}
.footer-brand img{width:246px;height:auto;border-radius:0;object-fit:contain}
.nav{gap:25px}
.nav a{font-size:13px}
.top-strip-inner{min-height:36px}
.btn{border-radius:999px;min-height:50px;padding-inline:24px;position:relative;overflow:hidden}
.btn:before{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transition:transform .6s ease}
.btn:hover:before{transform:translateX(120%)}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(6,20,38,.15)}
.section-head{align-items:flex-end;margin-bottom:38px}
.section-head h2{max-width:820px}

/* Homepage hero */
.hero-v2{position:relative;min-height:580px;display:flex;align-items:flex-start;padding:14px 0 32px;background:linear-gradient(135deg,#f7fafc 0%,#fff 54%,#fff8e8 100%);isolation:isolate}
.hero-v2:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 1px 1px,rgba(6,20,38,.06) 1px,transparent 1.5px);background-size:24px 24px;mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.75) 40%,transparent 88%);z-index:-3}
.hero-grid-lines{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(6,20,38,.045) 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),rgba(6,20,38,.035) 50%,transparent calc(50% + .5px));background-size:220px 220px;opacity:.55}
.hero-glow{position:absolute;border-radius:50%;filter:blur(20px);z-index:-1;animation:heroGlow 9s ease-in-out infinite alternate}
.hero-glow-one{width:430px;height:430px;right:5%;top:10%;background:rgba(224,173,54,.15)}
.hero-glow-two{width:300px;height:300px;left:10%;bottom:-120px;background:rgba(35,112,187,.09);animation-delay:-3s}
.hero-grid-v2{display:grid;grid-template-columns:minmax(520px,.88fr) minmax(620px,1.12fr);gap:34px;align-items:start;position:relative}
.hero-copy-v2{padding:16px 0 20px;max-width:710px}
.hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{font-size:clamp(55px,5.3vw,82px);line-height:.98;letter-spacing:-.06em;margin:15px 0 22px;color:var(--navy);text-wrap:balance}
.hero-copy-v2 h1 span,.hero-copy-v2 .mobile-h1 span{display:block;color:var(--gold-dark)}
.hero-copy-v2 p{font-size:17px;line-height:1.75;color:#617082;max-width:660px;margin:0}
.hero-copy-v2 .hero-actions{margin-top:30px}
.hero-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.hero-tags span{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(6,20,38,.1);background:rgba(255,255,255,.82);backdrop-filter:blur(8px);border-radius:999px;padding:8px 13px;font-size:10px;font-weight:850;letter-spacing:.04em;color:#435267;box-shadow:0 8px 20px rgba(6,20,38,.05)}
.hero-tags span:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.hero-stage{position:relative;min-height:510px;perspective:1200px}
.hero-photo{position:absolute;inset:0 18px 58px 38px;border-radius:34px;overflow:hidden;background:linear-gradient(145deg,#0b223d,#143b63);box-shadow:var(--shadow-strong);border:1px solid rgba(255,255,255,.8);transform-style:preserve-3d}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 52%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);animation:slowZoom 14s ease-in-out infinite alternate}
.hero-photo:hover img{transform:scale(1.055)}
.hero-photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(4,17,32,.83) 100%)}
.hero-photo-caption{position:absolute;left:28px;bottom:27px;color:#fff;display:grid;gap:3px;z-index:2}
.hero-photo-caption small{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#f4d88d;font-weight:850}
.hero-photo-caption strong{font-size:20px;line-height:1.2;max-width:350px}
.hero-project-card{position:absolute;left:0;bottom:2px;width:min(360px,52%);background:#fff;border-radius:20px;padding:9px;box-shadow:0 24px 55px rgba(6,20,38,.22);border:1px solid rgba(6,20,38,.1);animation:floatCard 5.8s ease-in-out infinite}
.hero-project-card img{width:100%;aspect-ratio:16/8.2;object-fit:contain;object-position:center;background:#f5f7f9;padding:5px;border-radius:13px;border:1px solid #e4eaf0}
.hero-project-card span{display:grid;padding:10px 8px 5px;gap:1px}
.hero-project-card b{font-size:10px;color:var(--gold-dark);text-transform:uppercase;letter-spacing:.1em}
.hero-project-card em{font-style:normal;font-size:12px;font-weight:850;color:var(--navy)}
.hero-score-card{position:absolute;right:0;top:38px;display:flex;align-items:center;gap:10px;background:rgba(6,20,38,.94);color:#fff;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);border-radius:18px;padding:14px 17px;box-shadow:0 18px 42px rgba(6,20,38,.22);animation:floatCard 6.4s ease-in-out infinite reverse}
.hero-score-card small{display:block;color:#b8c7d6;font-size:9px;text-transform:uppercase;letter-spacing:.09em}
.hero-score-card strong{font-size:13px}
.pulse-dot{width:10px;height:10px;border-radius:50%;background:#2ecf83;box-shadow:0 0 0 0 rgba(46,207,131,.65);animation:pulseDot 2s infinite}
.hero-code-chip{position:absolute;right:38px;bottom:45px;border-radius:999px;padding:10px 15px;background:#fff;color:var(--navy);font:800 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;border:1px solid var(--line);box-shadow:0 12px 28px rgba(6,20,38,.12)}
.hero-scroll-note{position:relative;display:flex;align-items:center;gap:11px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#788596;margin-top:6px}
.hero-scroll-note span{display:block;width:44px;height:1px;background:#9ea9b5;position:relative;overflow:hidden}
.hero-scroll-note span:after{content:"";position:absolute;inset:0;background:var(--gold);transform:translateX(-100%);animation:scrollLine 2.4s ease-in-out infinite}

/* Animated service strip */
.service-marquee{overflow:hidden;background:var(--navy);color:#fff;border-block:1px solid rgba(255,255,255,.08);padding:14px 0}
.marquee-track{width:max-content;display:flex;align-items:center;gap:28px;white-space:nowrap;animation:marquee 26s linear infinite}
.marquee-track span{font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.13em;color:#dce6ef}
.marquee-track i{font-style:normal;color:var(--gold);font-size:12px}
.service-marquee:hover .marquee-track{animation-play-state:paused}

/* Stat strip */
.trust-strip{background:#fff}
.trust-item{padding:25px 30px;min-height:118px;display:flex;flex-direction:column;justify-content:center}
.trust-item strong{font-size:30px;line-height:1;color:var(--gold-dark);letter-spacing:-.04em}
.trust-item b{font-size:12px;color:var(--navy);margin-top:8px}
.trust-item span{font-size:10px;color:var(--muted)}

/* Real-image service cards */
.services-grid{gap:22px}
.service-card{border-radius:27px;box-shadow:0 7px 24px rgba(6,20,38,.045);will-change:transform;transform-style:preserve-3d}
.service-card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);opacity:0;transition:.3s}
.service-card:hover:after{opacity:1}
.service-image{height:238px;position:relative;background:linear-gradient(145deg,#dfe8ef,#f8fafb)}
.service-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,20,38,.16));pointer-events:none}
.service-image img,.web-photo,.remote-image{width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.service-card:hover .service-image img{transform:scale(1.06)}
.service-image[data-image="webdev"] img{object-position:center 58%}
.service-image[data-image="seo"] img{object-position:center center}
.service-image[data-image="landing"] img{object-position:center 54%}
.service-image[data-image="google"] img{object-position:center 48%}
.service-image[data-image="ecommerce"] img{object-position:center center}
.service-image[data-image="redesign"] img{object-position:center 44%}
.service-copy{padding:26px 27px 28px}
.service-copy h3{font-size:22px}

/* Client project visual presentation */
.case-grid{grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr);gap:58px}
.case-image{position:relative;padding:0;border-radius:27px;overflow:hidden;background:#fff;box-shadow:var(--shadow-strong);transform-style:preserve-3d}
.case-image img{width:100%;aspect-ratio:16/9.6;object-fit:cover;object-position:center center;border-radius:0;transition:transform .8s ease}
.case-image:hover img{transform:scale(1.025)}
.project-browser-bar{height:44px;padding:0 15px;display:flex;align-items:center;gap:7px;background:#f1f4f7;border-bottom:1px solid #e1e6eb}
.project-browser-bar i{width:8px;height:8px;border-radius:50%;background:#c7d0d9}
.project-browser-bar i:first-child{background:#ee786e}.project-browser-bar i:nth-child(2){background:#e8bd57}.project-browser-bar i:nth-child(3){background:#69bd77}
.project-browser-bar span{margin-left:8px;flex:1;background:#fff;border:1px solid #e0e6ec;border-radius:999px;padding:5px 12px;font-size:9px;color:#718092;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Website experiences showcase */
.website-showcase{background:linear-gradient(180deg,#fff 0%,#f4f7fa 100%)}
.showcase-grid{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:1fr 1fr;gap:20px}
.showcase-card{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;min-height:265px;background:#fff;border:1px solid var(--line);border-radius:27px;overflow:hidden;box-shadow:0 10px 32px rgba(6,20,38,.055);transition:transform .35s ease,box-shadow .35s ease;transform-style:preserve-3d}
.showcase-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.showcase-large{grid-row:1/3;display:flex;flex-direction:column;min-height:550px}
.showcase-media{overflow:hidden;min-height:220px;background:#dfe8ef}
.showcase-large .showcase-media{min-height:340px;flex:1}
.showcase-media.portrait{min-height:100%}
.showcase-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.showcase-large .showcase-media img{object-position:center center}
.showcase-card:nth-child(2) .showcase-media img{object-position:center center}
.showcase-card:nth-child(3) .showcase-media img{object-position:center center}
.showcase-card:hover .showcase-media img{transform:scale(1.055)}
.showcase-copy{padding:26px;display:flex;flex-direction:column;justify-content:center}
.showcase-copy span{font-size:9px;text-transform:uppercase;letter-spacing:.13em;font-weight:900;color:var(--gold-dark)}
.showcase-copy h3{font-size:25px;line-height:1.12;margin:8px 0 11px;color:var(--navy)}
.showcase-large .showcase-copy h3{font-size:31px}
.showcase-copy p{font-size:12px;color:var(--muted);margin:0 0 15px}
.showcase-copy b{font-size:11px;color:var(--gold-dark);margin-top:auto}

/* Page heroes with subtle imagery */
.page-hero-modern{position:relative;overflow:hidden;padding:78px 0 66px;background:linear-gradient(105deg,#f6f9fb 0%,#fff 65%)}
.page-hero-modern:after{content:"";position:absolute;right:-4%;top:0;width:44%;height:100%;background-image:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.58) 36%,transparent 100%),var(--page-hero-image);background-size:cover;background-position:center;opacity:.17;filter:saturate(.7);pointer-events:none}
.page-hero-modern .page-hero-inner{position:relative;z-index:1;max-width:1060px;margin-left:0}
.page-hero-modern h1,.page-hero-modern .mobile-h1{max-width:1000px}

/* About imagery */
.about-grid{grid-template-columns:minmax(0,1.02fr) minmax(460px,.98fr);gap:60px}
.about-art{min-height:590px;padding:0;background:none;border-radius:31px;overflow:visible}
.about-photo-wrap{position:relative;height:100%;min-height:590px;border-radius:31px;overflow:hidden;box-shadow:var(--shadow-strong);background:#dfe7ee;transform-style:preserve-3d}
.about-photo-wrap>img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.about-photo-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(6,20,38,.82) 100%)}
.about-logo-float{position:absolute;left:24px;top:24px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);border-radius:17px;padding:12px 15px;width:205px;box-shadow:0 15px 36px rgba(6,20,38,.17)}
.about-logo-float img{width:100%;height:auto;margin:0}
.about-caption{position:absolute;left:28px;right:28px;bottom:27px;color:#fff;display:grid;gap:3px}
.about-caption span{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#f4d68a;font-weight:900}
.about-caption b{font-size:22px;line-height:1.25;max-width:440px}

/* Service detail hero images */
.service-detail-grid{grid-template-columns:minmax(500px,.95fr) minmax(540px,1.05fr);gap:48px}
.service-detail-image{position:relative;min-height:480px;border-radius:30px;background:#e2e9ef;box-shadow:var(--shadow-strong);transform-style:preserve-3d}
.service-detail-image img{width:100%;height:100%;min-height:480px;object-fit:cover;object-position:center center;transition:transform .8s ease}
.service-detail-image:hover img{transform:scale(1.04)}
.service-image-label{position:absolute;left:22px;right:22px;bottom:20px;background:rgba(6,20,38,.88);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.15);padding:13px 16px;border-radius:14px;font-size:10px;font-weight:800;letter-spacing:.04em}

/* Blog imagery */
.blog-card{overflow:hidden;border-radius:25px;transition:transform .3s ease,box-shadow .3s ease}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.blog-thumb{position:relative;isolation:isolate;height:230px;background-image:var(--thumb-image);background-size:cover;background-position:center;overflow:hidden}
.blog-thumb:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,38,.05) 20%,rgba(6,20,38,.87) 100%);z-index:-1}
.blog-thumb:after{content:"";position:absolute;inset:0;background:var(--thumb-image) center/cover;z-index:-2;transition:transform .8s ease}
.blog-card:hover .blog-thumb:after{transform:scale(1.06)}
.blog-thumb span,.blog-thumb b{position:relative;z-index:1;color:#fff}
.blog-thumb span{background:rgba(224,173,54,.92);color:var(--navy)}

/* Contact and cards */
.contact-grid{grid-template-columns:minmax(340px,.72fr) minmax(620px,1.28fr);gap:28px}
.contact-form{padding:36px;border-radius:28px}
.contact-card,.deliverable,.value-card,.industry-card,.review-card,.sidebar-card{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.contact-card:hover,.deliverable:hover,.value-card:hover,.industry-card:hover,.review-card:hover,.sidebar-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(6,20,38,.09);border-color:#cad5df}

/* Footer spacing and logo */
.footer{padding-top:70px}
.footer-grid{grid-template-columns:1.2fr .7fr .9fr 1fr;gap:40px}
.footer-brand p{margin-top:18px}

/* Reveal / movement */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.reveal.from-left{transform:translateX(-42px)}
.reveal.from-right{transform:translateX(42px)}
.reveal.scale-up{transform:scale(.94)}
.reveal.visible{opacity:1;transform:none}
[data-tilt]{transition:transform .28s ease,box-shadow .28s ease}

@keyframes heroGlow{to{transform:translate3d(24px,-18px,0) scale(1.08)}}
@keyframes slowZoom{0%{transform:scale(1)}100%{transform:scale(1.055)}}
@keyframes floatCard{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
@keyframes pulseDot{70%{box-shadow:0 0 0 12px rgba(46,207,131,0)}100%{box-shadow:0 0 0 0 rgba(46,207,131,0)}}
@keyframes scrollLine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(110%)}}
@keyframes marquee{to{transform:translateX(-50%)}}

@media(max-width:1250px){
  :root{--container:min(100% - 32px,1180px)}
  .header-inner{gap:17px}.brand{min-width:190px}.brand img{width:190px}.nav{gap:18px}.header-actions .btn{padding-inline:18px}
  .hero-grid-v2{grid-template-columns:minmax(470px,.9fr) minmax(520px,1.1fr);gap:20px}
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{font-size:clamp(52px,5.4vw,70px)}
  .hero-stage{min-height:525px}.hero-photo{inset:15px 10px 70px 35px}
  .showcase-card{grid-template-columns:.82fr 1.18fr}
  .service-detail-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1050px){
  .hero-v2{padding-top:36px}
  .hero-grid-v2{grid-template-columns:1fr;gap:14px}
  .hero-copy-v2{text-align:center;max-width:850px;margin-inline:auto;padding-bottom:15px}
  .hero-copy-v2 .eyebrow{justify-content:center}.hero-copy-v2 .eyebrow:before{display:none}
  .hero-copy-v2 p{margin-inline:auto}.hero-copy-v2 .hero-actions,.hero-tags{justify-content:center}
  .hero-stage{width:min(850px,100%);margin-inline:auto;min-height:575px}
  .hero-photo{inset:8px 30px 75px 30px}
  .case-grid,.about-grid,.service-detail-grid{grid-template-columns:1fr}
  .about-art,.about-photo-wrap{min-height:530px}
  .showcase-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .showcase-large{grid-column:1/-1;grid-row:auto;min-height:520px}
  .showcase-card{grid-template-columns:1fr;min-height:430px}.showcase-media.portrait{min-height:260px}
  .contact-grid{grid-template-columns:1fr}
  .page-hero-modern:after{width:58%;opacity:.11}
}
@media(max-width:820px){
  :root{--container:calc(100% - 28px)}
  .header-inner{height:66px}.brand{min-width:auto}.brand img{width:155px;height:38px}
  .hero-v2{min-height:auto;padding:42px 0 44px}
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{font-size:52px}.hero-copy-v2 p{font-size:15px}
  .hero-stage{min-height:500px}.hero-photo{inset:8px 12px 78px 12px;border-radius:27px}
  .hero-project-card{width:56%}.hero-score-card{right:2px;top:35px}.hero-code-chip{right:10px;bottom:35px}
  .hero-scroll-note{justify-content:center;margin-top:18px}
  .service-image{height:230px}
  .showcase-grid{grid-template-columns:1fr}.showcase-large{grid-column:auto;min-height:460px}.showcase-card{min-height:420px}
  .showcase-media,.showcase-large .showcase-media{min-height:260px}
  .page-hero-modern{padding:62px 0 54px}.page-hero-modern:after{display:none}
  .about-art,.about-photo-wrap{min-height:470px}
  .service-detail-image,.service-detail-image img{min-height:400px}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
}
@media(max-width:560px){
  :root{--container:calc(100% - 24px)}
  .section{padding:62px 0}
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{font-size:43px;line-height:1.01}.hero-copy-v2 h1 span,.hero-copy-v2 .mobile-h1 span{display:inline}
  .hero-copy-v2 .hero-actions{display:grid}.hero-copy-v2 .btn{width:100%}
  .hero-tags{gap:7px}.hero-tags span{font-size:9px;padding:7px 10px}
  .hero-stage{min-height:410px}.hero-photo{inset:0 0 72px;border-radius:23px}.hero-photo-caption{left:18px;bottom:18px}.hero-photo-caption strong{font-size:16px}
  .hero-project-card{left:-2px;width:63%;padding:6px;border-radius:16px}.hero-project-card span{padding:7px 5px 3px}.hero-project-card em{font-size:9px}
  .hero-score-card{top:22px;right:-5px;padding:10px 12px;border-radius:14px}.hero-score-card strong{font-size:10px}.hero-score-card small{font-size:7px}
  .hero-code-chip{display:none}
  .marquee-track{gap:20px}.marquee-track span{font-size:10px}
  .trust-item{min-height:100px;padding:20px 16px}.trust-item strong{font-size:25px}.trust-item b{font-size:10px}.trust-item span{font-size:8px}
  .service-image{height:205px}.service-copy{padding:22px}
  .project-browser-bar{height:37px}.project-browser-bar span{font-size:7px}
  .showcase-card,.showcase-large{min-height:0}.showcase-media,.showcase-large .showcase-media{min-height:230px}.showcase-copy{padding:22px}.showcase-copy h3,.showcase-large .showcase-copy h3{font-size:23px}
  .about-art,.about-photo-wrap{min-height:410px}.about-logo-float{width:165px;left:16px;top:16px}.about-caption{left:20px;right:20px;bottom:20px}.about-caption b{font-size:17px}
  .service-detail-image,.service-detail-image img{min-height:315px}.service-image-label{left:13px;right:13px;bottom:13px}
  .blog-thumb{height:205px}
  .contact-form{padding:22px}
  .footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  .hero-glow,.hero-photo img,.hero-project-card,.hero-score-card,.pulse-dot,.marquee-track,.hero-scroll-note span:after{animation:none!important}
  [data-tilt]{transform:none!important}
}
.about-art img{margin:0}
.image-fallback{background:linear-gradient(135deg,#e8eef3 0%,#f8f1df 100%);position:relative}
.image-fallback:after{content:"Image loads when the website is online";position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:#718092;font-size:11px;font-weight:800;letter-spacing:.04em}


/* Final navigation, laptop hero and client-project image refinements */
.project-visual-label{
  position:absolute;
  left:20px;
  bottom:20px;
  z-index:3;
  display:grid;
  gap:2px;
  max-width:calc(100% - 40px);
  padding:12px 15px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  color:#fff;
  background:rgba(6,20,38,.88);
  backdrop-filter:blur(10px);
  box-shadow:0 15px 34px rgba(6,20,38,.2)
}
.project-visual-label span{
  color:#f4d68a;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase
}
.project-visual-label b{font-size:12px;line-height:1.25}
.hasthas-product-visual{background:#f4f6f8}
.hasthas-product-visual img{
  object-fit:contain;
  object-position:center;
  background:linear-gradient(145deg,#fff,#f2f5f7)
}
.hero-copy-v2,.hero-stage{align-self:start}
.hero-copy-v2 .eyebrow{margin-top:0}
@media(min-width:1051px){
  .hero-grid-v2{padding-top:0}
  .hero-scroll-note{margin-top:-4px}
}
@media(max-width:1250px) and (min-width:1051px){
  .header-inner{height:64px}
  .brand{min-width:178px}
  .brand img{width:178px;height:38px}
  .hero-v2{padding-top:10px}
  .hero-copy-v2{padding-top:14px}
  .hero-stage{min-height:485px}
}
@media(max-width:560px){
  .project-visual-label{left:12px;bottom:12px;max-width:calc(100% - 24px);padding:9px 11px}
  .project-visual-label b{font-size:10px}
}

/* Final compact header and sample-project card */
.hero-project-card.sample-project img{object-fit:cover;object-position:center 48%;padding:0;background:#eef1f4}
.hero-project-card.sample-project span{background:#fff}
@media(min-width:1251px){.hero-copy-v2{padding-top:14px}.hero-v2{padding-top:12px}}


/* ==========================================================
   July 2026 — compact inner-page heroes and expanded work
   ========================================================== */

/* Keep the navigation wordmark compact and free from tagline space */
.header-inner{height:72px}
.brand img{width:174px;height:46px;object-fit:contain;object-position:left center;border-radius:0}

/* Connected, compact inner-page opening area */
.inner-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:32px 0 38px;
  color:var(--ink);
  background:
    radial-gradient(circle at 82% 20%,rgba(212,167,59,.20),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(21,56,93,.09),transparent 30%),
    linear-gradient(118deg,#f7fafc 0%,#fff 52%,#fbf4e3 100%);
  border-bottom:1px solid var(--line)
}
.inner-hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.55;
  background-image:radial-gradient(circle at 1px 1px,rgba(6,20,38,.075) 1px,transparent 0);
  background-size:24px 24px;
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 56%,transparent 100%)
}
.inner-hero:after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-110px;
  bottom:-190px;
  width:470px;
  height:470px;
  border:1px solid rgba(212,167,59,.28);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(212,167,59,.045),0 0 0 78px rgba(6,20,38,.025)
}
.inner-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(340px,.78fr);
  gap:38px;
  align-items:stretch
}
.inner-hero-copy{padding:5px 0;align-self:center}
.inner-hero .breadcrumb{margin:0 0 13px;font-size:10px}
.inner-hero .eyebrow{margin-bottom:10px}
.inner-hero h1,.inner-hero .mobile-h1{
  max-width:830px;
  margin:0;
  color:var(--navy);
  font-size:clamp(40px,4.45vw,64px);
  line-height:1.01;
  letter-spacing:-.052em
}
.inner-hero p{
  max-width:720px;
  margin:17px 0 0;
  color:#5c6b7b;
  font-size:15px;
  line-height:1.72
}
.inner-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.inner-hero-actions .btn{min-height:44px;padding:0 17px}
.inner-hero-panel{
  position:relative;
  align-self:stretch;
  min-height:276px;
  padding:23px;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(150deg,#061426 0%,#0d2948 70%,#15385d 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:25px;
  box-shadow:0 24px 55px rgba(6,20,38,.18)
}
.inner-hero-panel:before{
  content:"";
  position:absolute;
  right:-55px;
  top:-55px;
  width:170px;
  height:170px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(212,167,59,.5),rgba(212,167,59,0) 68%)
}
.panel-kicker{position:relative;color:#f3d681;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.16em}
.inner-hero-panel h2{position:relative;margin:8px 0 17px;font-size:22px;line-height:1.18;letter-spacing:-.025em}
.hero-quick-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-quick-card{
  min-height:78px;
  padding:13px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:rgba(255,255,255,.065);
  transition:transform .25s ease,background .25s ease,border-color .25s ease
}
a.hero-quick-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.11);border-color:rgba(244,214,138,.45)}
.hero-quick-card span{display:block;color:#aebdcd;font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.11em}
.hero-quick-card strong{display:block;margin-top:5px;color:#fff;font-size:12px;line-height:1.35}
.hero-panel-feature{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:11px;
  padding:13px 14px;
  border-radius:14px;
  background:#fff;
  color:var(--navy)
}
.hero-panel-feature small{display:block;color:var(--gold-dark);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}
.hero-panel-feature b{display:block;margin-top:2px;font-size:12px;line-height:1.3}
.hero-panel-arrow{flex:0 0 31px;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:var(--gold-soft);font-weight:900}
.hero-contact-list{position:relative;display:grid;gap:9px}
.hero-contact-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(255,255,255,.06)}
.hero-contact-item i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(212,167,59,.18);color:#f4d68a;font-size:12px;font-style:normal;font-weight:900}
.hero-contact-item span{display:block;color:#aebdcd;font-size:8px;text-transform:uppercase;letter-spacing:.1em;font-weight:850}
.hero-contact-item strong{display:block;color:#fff;font-size:11px;line-height:1.35}
.page-content-section{padding-top:62px}

/* Faster, purposeful opening animation */
.inner-hero-copy>*{opacity:0;animation:innerHeroRise .55s ease forwards}
.inner-hero-copy>*:nth-child(2){animation-delay:.04s}
.inner-hero-copy>*:nth-child(3){animation-delay:.09s}
.inner-hero-copy>*:nth-child(4){animation-delay:.14s}
.inner-hero-copy>*:nth-child(5){animation-delay:.19s}
.inner-hero-panel{opacity:0;animation:innerHeroPanel .65s .12s cubic-bezier(.2,.75,.2,1) forwards}
@keyframes innerHeroRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes innerHeroPanel{from{opacity:0;transform:translateX(22px) scale(.985)}to{opacity:1;transform:none}}

/* Expanded project showcase */
.projects-section{background:linear-gradient(180deg,#fff 0%,#f7f9fb 100%)}
.project-stack{display:grid;gap:28px}
.project-feature{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  min-height:455px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:0 19px 50px rgba(6,20,38,.08)
}
.project-feature.reverse{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)}
.project-feature.reverse .project-feature-visual{order:2}
.project-feature-visual{position:relative;min-height:420px;overflow:hidden;background:#e7edf2}
.project-feature-visual>img{width:100%;height:100%;object-fit:cover;object-position:center}
.project-feature-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,20,38,.32))}
.project-feature-copy{display:flex;flex-direction:column;justify-content:center;padding:48px}
.project-feature-copy h3{margin:10px 0 14px;color:var(--navy);font-size:clamp(34px,3.4vw,50px);line-height:1.04;letter-spacing:-.045em}
.project-feature-copy>p{margin:0;color:var(--muted);font-size:14px}
.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin:21px 0 25px}
.project-tag{padding:7px 10px;border:1px solid var(--line);border-radius:99px;color:#45566a;background:#f8fafc;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.project-actions{display:flex;gap:10px;flex-wrap:wrap}
.project-live-badge{position:absolute;z-index:3;top:18px;left:18px;display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:99px;background:rgba(6,20,38,.88);backdrop-filter:blur(8px);color:#fff;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.1em}
.project-live-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:#2bdc91;box-shadow:0 0 0 4px rgba(43,220,145,.16)}

/* Local, responsive visual for the Zamm Clothing live landing page */
.storefront-preview{position:absolute;inset:24px;background:#f7f3eb;border:8px solid #fff;border-radius:22px;box-shadow:0 22px 46px rgba(6,20,38,.18);overflow:hidden;transform:rotate(-1deg)}
.storefront-top{height:46px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid rgba(6,20,38,.08)}
.storefront-brand{font-size:20px;font-weight:950;letter-spacing:-.08em;color:#111}.storefront-brand em{font-style:normal;color:#c5922c}
.storefront-links{display:flex;gap:15px}.storefront-links i{display:block;width:35px;height:5px;border-radius:4px;background:#d9d6cf}
.storefront-hero{position:relative;height:220px;padding:31px;overflow:hidden;color:#fff;background:linear-gradient(120deg,#171717 0%,#343434 57%,#75634d 100%)}
.storefront-hero:before{content:"";position:absolute;right:10%;bottom:-45px;width:180px;height:250px;border-radius:95px 95px 35px 35px;background:linear-gradient(160deg,#ded5c4,#9f8a6f);transform:rotate(8deg);box-shadow:inset 0 0 0 16px rgba(255,255,255,.1)}
.storefront-hero:after{content:"Z";position:absolute;right:72px;bottom:24px;color:rgba(20,20,20,.78);font-size:84px;font-weight:950;line-height:1}
.storefront-hero span,.storefront-hero h4,.storefront-hero b{position:relative;z-index:2;display:block;max-width:55%}
.storefront-hero span{color:#e5c77a;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.18em}
.storefront-hero h4{margin:8px 0 11px;font-size:30px;line-height:1.02;letter-spacing:-.04em}
.storefront-hero b{width:max-content;padding:8px 12px;border-radius:99px;background:#fff;color:#111;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.storefront-products{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:11px;background:#fff}
.storefront-product{position:relative;height:92px;overflow:hidden;border-radius:9px;background:linear-gradient(145deg,#ede7dc,#c9bdab)}
.storefront-product:nth-child(2){background:linear-gradient(145deg,#d9dedf,#89979c)}
.storefront-product:nth-child(3){background:linear-gradient(145deg,#e1d8cb,#a27862)}
.storefront-product:before{content:"";position:absolute;left:50%;top:18px;width:45px;height:61px;transform:translateX(-50%);clip-path:polygon(25% 0,41% 9%,59% 9%,75% 0,100% 18%,84% 35%,78% 100%,22% 100%,16% 35%,0 18%);background:rgba(30,30,30,.83)}
.storefront-product:nth-child(2):before{background:#e8e3da}.storefront-product:nth-child(3):before{background:#423730}

@media (max-width:1050px){
  .inner-hero-grid{grid-template-columns:minmax(0,1fr) 330px;gap:25px}
  .inner-hero h1,.inner-hero .mobile-h1{font-size:clamp(40px,5.2vw,58px)}
  .project-feature,.project-feature.reverse{grid-template-columns:1fr 1fr}
  .project-feature-copy{padding:34px}
}
@media (max-width:820px){
  .header-inner{height:68px}
  .brand img{width:155px;height:42px}
  .inner-hero{padding:25px 0 30px}
  .inner-hero-grid{grid-template-columns:1fr;gap:22px}
  .inner-hero-panel{min-height:auto}
  .inner-hero h1,.inner-hero .mobile-h1{font-size:clamp(38px,8vw,54px)}
  .page-content-section{padding-top:50px}
  .project-feature,.project-feature.reverse{grid-template-columns:1fr}
  .project-feature.reverse .project-feature-visual{order:0}
  .project-feature-visual{min-height:365px}
  .project-feature-copy{padding:31px}
}
@media (max-width:560px){
  .inner-hero{padding:20px 0 25px}
  .inner-hero h1,.inner-hero .mobile-h1{font-size:37px;line-height:1.02}
  .inner-hero p{font-size:13px;line-height:1.65}
  .hero-quick-grid{grid-template-columns:1fr}
  .hero-quick-card{min-height:64px}
  .inner-hero-panel{padding:18px;border-radius:20px}
  .project-feature{border-radius:23px}
  .project-feature-visual{min-height:300px}
  .project-feature-copy{padding:25px 21px}
  .storefront-preview{inset:16px}
  .storefront-hero{height:175px;padding:22px}
  .storefront-hero h4{font-size:23px}
  .storefront-hero:before{right:3%;width:135px;height:205px}
  .storefront-hero:after{right:50px;font-size:64px}
  .storefront-products{display:none}
}
@media (prefers-reduced-motion:reduce){.inner-hero-copy>*,.inner-hero-panel{opacity:1;animation:none}}

/* ==========================================================
   July 2026 — larger laptop composition for inner-page heroes
   Enlarges the visual panel, typography and actions so the
   opening area fills laptop screens with balanced alignment.
   ========================================================== */
@media (min-width:1100px){
  .inner-hero{
    min-height:590px;
    padding:48px 0 54px;
    display:flex;
    align-items:center
  }
  .inner-hero-grid{
    width:100%;
    grid-template-columns:minmax(0,1.12fr) minmax(500px,.88fr);
    gap:52px;
    align-items:stretch
  }
  .inner-hero-copy{
    padding:14px 0;
    display:flex;
    flex-direction:column;
    justify-content:center
  }
  .inner-hero .breadcrumb{
    margin-bottom:17px;
    font-size:11px
  }
  .inner-hero .eyebrow{
    margin-bottom:14px;
    font-size:12px
  }
  .inner-hero h1,.inner-hero .mobile-h1{
    max-width:900px;
    font-size:clamp(58px,4.65vw,76px);
    line-height:.99
  }
  .inner-hero p{
    max-width:790px;
    margin-top:22px;
    font-size:17px;
    line-height:1.72
  }
  .inner-hero-actions{
    gap:13px;
    margin-top:30px
  }
  .inner-hero-actions .btn{
    min-height:54px;
    padding:0 25px;
    font-size:14px
  }
  .inner-hero-panel{
    min-height:420px;
    padding:31px;
    border-radius:30px;
    display:flex;
    flex-direction:column;
    justify-content:center
  }
  .panel-kicker{font-size:10px}
  .inner-hero-panel h2{
    margin:10px 0 22px;
    font-size:28px;
    line-height:1.16
  }
  .hero-quick-grid{gap:13px}
  .hero-quick-card{
    min-height:96px;
    padding:17px;
    border-radius:16px
  }
  .hero-quick-card span{font-size:9px}
  .hero-quick-card strong{
    margin-top:7px;
    font-size:14px;
    line-height:1.36
  }
  .hero-panel-feature{
    margin-top:14px;
    padding:16px 17px;
    border-radius:16px
  }
  .hero-panel-feature small{font-size:9px}
  .hero-panel-feature b{font-size:14px}
  .hero-panel-arrow{
    flex-basis:38px;
    width:38px;
    height:38px
  }
  .hero-contact-list{gap:12px}
  .hero-contact-item{
    gap:13px;
    padding:14px 15px;
    border-radius:15px
  }
  .hero-contact-item i{
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:14px
  }
  .hero-contact-item span{font-size:9px}
  .hero-contact-item strong{font-size:13px}
}

@media (min-width:1100px) and (max-height:780px){
  .inner-hero{min-height:520px;padding:34px 0 40px}
  .inner-hero h1,.inner-hero .mobile-h1{font-size:clamp(52px,4.25vw,68px)}
  .inner-hero-panel{min-height:370px;padding:27px}
  .hero-quick-card{min-height:82px;padding:14px}
}

/* ==========================================================
   Homepage laptop hero alignment refinement — July 2026
   ========================================================== */
.hero-scroll-note{display:none!important}

@media(min-width:1251px){
  .hero-v2{
    min-height:640px;
    padding:18px 0 28px;
    align-items:center;
  }
  .hero-grid-v2{
    grid-template-columns:minmax(460px,.78fr) minmax(0,1.22fr);
    gap:42px;
    align-items:center;
  }
  .hero-copy-v2{
    max-width:640px;
    padding:10px 0 18px;
    align-self:center;
  }
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{
    font-size:clamp(58px,4.75vw,74px);
    line-height:.99;
    margin:14px 0 20px;
  }
  .hero-copy-v2 p{
    max-width:610px;
    font-size:16px;
    line-height:1.7;
  }
  .hero-copy-v2 .hero-actions{margin-top:25px}
  .hero-tags{margin-top:24px}
  .hero-stage{
    min-height:590px;
    width:100%;
    align-self:center;
  }
  .hero-photo{
    inset:0 0 28px 18px;
    border-radius:36px;
  }
  .hero-photo img{
    object-position:center 48%;
  }
  .hero-project-card{
    left:-10px;
    bottom:0;
    width:min(330px,44%);
  }
  .hero-score-card{
    right:22px;
    top:28px;
  }
  .hero-code-chip{
    right:22px;
    bottom:42px;
  }
}

@media(max-width:1250px) and (min-width:1051px){
  .hero-v2{
    min-height:590px;
    padding:14px 0 26px;
    align-items:center;
  }
  .hero-grid-v2{
    grid-template-columns:minmax(420px,.82fr) minmax(0,1.18fr);
    gap:28px;
    align-items:center;
  }
  .hero-copy-v2{
    max-width:560px;
    padding:8px 0 16px;
    align-self:center;
  }
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{
    font-size:clamp(52px,5vw,62px);
    line-height:1;
    margin:13px 0 18px;
  }
  .hero-copy-v2 p{
    max-width:540px;
    font-size:15px;
    line-height:1.65;
  }
  .hero-copy-v2 .hero-actions{margin-top:22px}
  .hero-tags{margin-top:21px}
  .hero-stage{
    min-height:535px;
    width:100%;
    align-self:center;
  }
  .hero-photo{
    inset:0 0 26px 12px;
    border-radius:31px;
  }
  .hero-photo img{object-position:center 48%}
  .hero-project-card{
    left:-8px;
    bottom:0;
    width:min(300px,47%);
  }
  .hero-score-card{
    right:15px;
    top:24px;
  }
  .hero-code-chip{
    right:15px;
    bottom:38px;
  }
}



/* ==========================================================
   Homepage top bar removal and laptop hero fit — July 2026
   Keeps the complete hero text, buttons and benefit tags visible
   inside common laptop browser heights.
   ========================================================== */
@media (min-width:1051px){
  .hero-v2{
    min-height:580px;
    padding:6px 0 20px;
    align-items:flex-start;
  }
  .hero-grid-v2{
    grid-template-columns:minmax(535px,.92fr) minmax(0,1.08fr);
    gap:34px;
    align-items:start;
  }
  .hero-copy-v2{
    max-width:690px;
    padding:2px 0 10px;
    align-self:start;
  }
  .hero-copy-v2 .eyebrow{
    margin-top:0;
  }
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{
    font-size:clamp(53px,4vw,66px);
    line-height:.98;
    margin:8px 0 14px;
    letter-spacing:-.055em;
  }
  .hero-copy-v2 p{
    max-width:650px;
    font-size:15.5px;
    line-height:1.58;
  }
  .hero-copy-v2 .hero-actions{
    margin-top:18px;
  }
  .hero-tags{
    margin-top:16px;
  }
  .hero-stage{
    min-height:555px;
    align-self:start;
  }
  .hero-photo{
    inset:0 0 24px 12px;
  }
  .hero-project-card{
    bottom:0;
  }
}

@media (min-width:1450px){
  .hero-grid-v2{
    grid-template-columns:minmax(570px,.9fr) minmax(0,1.1fr);
    gap:40px;
  }
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{
    font-size:66px;
  }
  .hero-stage{
    min-height:565px;
  }
}

@media (min-width:1051px) and (max-height:760px){
  .hero-v2{
    min-height:540px;
    padding-top:2px;
  }
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{
    font-size:clamp(50px,3.75vw,61px);
    margin-bottom:12px;
  }
  .hero-copy-v2 p{
    font-size:15px;
    line-height:1.5;
  }
  .hero-copy-v2 .hero-actions{
    margin-top:15px;
  }
  .hero-tags{
    margin-top:13px;
  }
  .hero-stage{
    min-height:520px;
  }
}


/* ==========================================================
   Screenshot-directed visual refinements — July 2026
   Process/review box styling, cleaner article cards, compact
   website-experience section and richer inner-page heroes.
   ========================================================== */

/* Designed process cards instead of plain white boxes */
.process-section{position:relative;overflow:hidden}
.process-section:before{content:"";position:absolute;left:-120px;top:70px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(212,167,59,.14),transparent 68%);pointer-events:none}
.process-grid{position:relative;isolation:isolate}
.process-card{position:relative;isolation:isolate;overflow:hidden;min-height:235px;padding:31px 28px 28px;border:1px solid #dce4eb;background:linear-gradient(150deg,#fff 0%,#fbfcfd 70%,#f7f0df 130%);box-shadow:0 14px 34px rgba(6,20,38,.06);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.process-card:before{content:"";position:absolute;z-index:-1;right:-54px;top:-62px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(212,167,59,.24),rgba(212,167,59,.03) 62%,transparent 64%)}
.process-card:after{position:absolute;right:22px;top:20px;width:42px;height:42px;display:grid;place-items:center;border-radius:14px;border:1px solid rgba(6,20,38,.08);background:rgba(255,255,255,.74);color:var(--navy);font-size:16px;font-weight:900;box-shadow:0 10px 25px rgba(6,20,38,.07)}
.process-card:nth-child(1):after{content:"◎"}.process-card:nth-child(2):after{content:"▦"}.process-card:nth-child(3):after{content:"</>";font-size:10px}.process-card:nth-child(4):after{content:"✓"}
.process-card:hover{transform:translateY(-8px);border-color:#cfdae4;box-shadow:0 24px 50px rgba(6,20,38,.12)}
.process-card:hover:after{background:var(--navy);color:#fff;border-color:var(--navy)}
.process-number{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:22px;background:linear-gradient(145deg,#fff5d8,#f4dfaa);border:1px solid #ead49b;color:#a97816;font-size:31px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 25px rgba(169,120,22,.12)}
.process-card h3{margin:23px 0 9px;font-size:20px;letter-spacing:-.02em}
.process-card p{font-size:12.5px;line-height:1.65}
@media(min-width:900px){.process-grid:before{content:"";position:absolute;z-index:-1;left:7%;right:7%;top:66px;height:2px;background:linear-gradient(90deg,transparent,rgba(212,167,59,.45) 10%,rgba(212,167,59,.45) 90%,transparent)}}

/* More polished client-experience cards */
.review-track{gap:22px}
.review-card{position:relative;isolation:isolate;overflow:hidden;min-height:280px;padding:32px 30px 28px;background:linear-gradient(150deg,#fff 0%,#fbfcfe 74%,#f8f0dc 145%);border:1px solid #dce4eb;box-shadow:0 14px 34px rgba(6,20,38,.055)}
.review-card:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--gold),#f0d98f 58%,transparent)}
.review-card:after{content:"“";position:absolute;z-index:-1;right:16px;top:2px;color:rgba(212,167,59,.13);font-family:Georgia,serif;font-size:132px;line-height:1}
.review-card:nth-child(2):before{background:linear-gradient(90deg,var(--navy-3),#6f89a5 58%,transparent)}
.review-card:nth-child(3):before{background:linear-gradient(90deg,#17845a,#78c5a7 58%,transparent)}
.review-icon{width:54px;height:54px;border-radius:18px;background:linear-gradient(145deg,#fff7df,#f6dfaa);border:1px solid #ead49b;color:#a97816;box-shadow:0 9px 23px rgba(169,120,22,.11)}
.review-card h3{max-width:82%;margin:22px 0 10px;font-size:20px;line-height:1.25;letter-spacing:-.025em}
.review-card p{font-size:13px;line-height:1.7}
.review-meta{display:inline-flex;align-items:center;margin-top:22px;padding:9px 12px;border:1px solid #e1e7ec;border-radius:999px;background:#f8fafc;color:#3c4d60;font-size:9px;line-height:1.4;text-transform:uppercase;letter-spacing:.065em}
.review-card:hover{transform:translateY(-8px);box-shadow:0 24px 52px rgba(6,20,38,.12)}
.review-note{margin-top:22px}

/* Rebuilt article-card presentation: clean image, badge and readable content */
.blog-grid{gap:24px}
.blog-card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100%;border:1px solid #dde5ec;border-radius:26px;background:#fff;box-shadow:0 12px 32px rgba(6,20,38,.055);overflow:hidden}
.blog-card:before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--gold),#f0d98f 48%,transparent 88%)}
.blog-card:hover{transform:translateY(-8px);box-shadow:0 25px 55px rgba(6,20,38,.13);border-color:#cfdbe5}
.blog-thumb{display:block;position:relative;isolation:isolate;height:auto;aspect-ratio:16/8.8;padding:0;background-image:var(--thumb-image);background-size:cover;background-position:center;overflow:hidden}
.blog-thumb:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(6,20,38,.04),rgba(6,20,38,.08) 52%,rgba(6,20,38,.62) 100%)}
.blog-thumb:after{content:"";position:absolute;z-index:-2;inset:0;background:var(--thumb-image) center/cover;transition:transform .8s ease,filter .4s ease}
.blog-card:hover .blog-thumb:after{transform:scale(1.065);filter:saturate(1.06)}
.blog-thumb span{position:absolute;z-index:2;left:18px;bottom:16px;padding:8px 11px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(6,20,38,.74);backdrop-filter:blur(9px);color:#fff;font-size:8.5px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;box-shadow:0 8px 22px rgba(6,20,38,.16)}
.blog-thumb b{display:none!important}
.blog-body{display:flex;flex-direction:column;flex:1;padding:25px 25px 26px}
.blog-meta{order:0;display:flex;justify-content:space-between;gap:10px;padding-bottom:13px;border-bottom:1px solid #e7ecf0;color:#708092;font-size:8.5px;font-weight:850;letter-spacing:.075em}
.blog-meta span:last-child{color:var(--gold-dark)}
.blog-body h3{order:1;margin:16px 0 10px;color:var(--navy);font-size:20px;line-height:1.25;letter-spacing:-.028em}
.blog-body p{order:2;margin:0 0 20px;color:var(--muted);font-size:12.5px;line-height:1.65}
.blog-body .text-link{order:3;margin-top:auto;width:max-content;padding:9px 12px;border-radius:999px;background:var(--gold-soft);color:var(--gold-dark);font-size:10px}
.blog-body .text-link:hover{gap:8px;background:#f3e3b9}
.insights-section .section-head{align-items:center}

/* The website-experience block was too large on laptop screens */
@media(min-width:1100px){
  .website-showcase{padding:72px 0}
  .website-showcase .section-head{margin-bottom:30px;align-items:center}
  .website-showcase .section-head h2{max-width:760px;font-size:clamp(39px,3.7vw,52px);line-height:1.04}
  .website-showcase .section-head p{max-width:470px;font-size:13px;line-height:1.65}
  .website-showcase .showcase-grid{grid-template-columns:1.18fr .82fr;grid-template-rows:224px 224px;gap:18px}
  .website-showcase .showcase-card{min-height:224px;border-radius:24px}
  .website-showcase .showcase-large{min-height:466px}
  .website-showcase .showcase-large .showcase-media{min-height:282px}
  .website-showcase .showcase-media{min-height:0}
  .website-showcase .showcase-media.portrait{min-height:224px}
  .website-showcase .showcase-copy{padding:21px 22px}
  .website-showcase .showcase-copy h3{margin:6px 0 8px;font-size:20px}
  .website-showcase .showcase-large .showcase-copy h3{font-size:27px}
  .website-showcase .showcase-copy p{font-size:11px;line-height:1.55;margin-bottom:10px}
}

/* Add meaningful, homepage-like proof content to About, Services, Blog and Contact heroes */
.inner-hero-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px;max-width:800px}
.inner-hero-highlights>span{display:flex;align-items:center;gap:10px;min-width:0;padding:12px 13px;border:1px solid rgba(6,20,38,.1);border-radius:15px;background:rgba(255,255,255,.68);backdrop-filter:blur(8px);box-shadow:0 10px 25px rgba(6,20,38,.045)}
.inner-hero-highlights i{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(212,167,59,.13)}
.inner-hero-highlights>span>span{display:grid;min-width:0}
.inner-hero-highlights b{overflow:hidden;color:var(--navy);font-size:10px;line-height:1.3;white-space:nowrap;text-overflow:ellipsis}
.inner-hero-highlights small{overflow:hidden;color:#708092;font-size:8.5px;line-height:1.45;white-space:nowrap;text-overflow:ellipsis}

@media(min-width:1100px){
  .inner-hero{min-height:630px;padding:44px 0 48px}
  .inner-hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(500px,.88fr);gap:46px}
  .inner-hero-panel{min-height:445px}
  .inner-hero-copy{padding:8px 0}
  .inner-hero h1,.inner-hero .mobile-h1{font-size:clamp(54px,4.35vw,70px)}
  .inner-hero p{margin-top:18px;font-size:16px}
  .inner-hero-actions{margin-top:24px}
}

@media(max-width:900px){
  .inner-hero-highlights{grid-template-columns:1fr 1fr}
  .process-card,.review-card{min-height:0}
}
@media(max-width:560px){
  .inner-hero-highlights{grid-template-columns:1fr;margin-top:18px}
  .inner-hero-highlights>span{padding:11px 12px}
  .blog-thumb{aspect-ratio:16/9.4}
  .blog-body{padding:22px 20px 23px}
  .process-card,.review-card{padding:25px 22px}
}

/* Keep the richer inner heroes fitted on shorter laptop screens */
@media(min-width:1100px) and (max-height:800px){
  .inner-hero{min-height:555px;padding:32px 0 36px}
  .inner-hero-grid{gap:38px}
  .inner-hero h1,.inner-hero .mobile-h1{font-size:clamp(50px,4vw,64px)}
  .inner-hero p{margin-top:15px;font-size:15px;line-height:1.62}
  .inner-hero-actions{margin-top:19px}
  .inner-hero-actions .btn{min-height:48px;padding-inline:21px}
  .inner-hero-highlights{margin-top:17px;gap:8px}
  .inner-hero-highlights>span{padding:10px 11px}
  .inner-hero-panel{min-height:390px;padding:27px}
  .inner-hero-panel h2{font-size:25px;margin-bottom:18px}
  .hero-quick-card{min-height:82px;padding:14px}
}

/* ==========================================================
   Unified enlarged laptop heroes — About, Services, Blog,
   and Contact Us. Matches the visual weight of the homepage
   hero while preserving the existing tablet/mobile layouts.
   ========================================================== */
@media (min-width:1100px){
  .inner-hero{
    min-height:max(640px,calc(100vh - 72px));
    padding:38px 0 44px;
    display:flex;
    align-items:center;
  }
  .inner-hero-grid{
    width:100%;
    grid-template-columns:minmax(0,1.12fr) minmax(500px,.88fr);
    gap:44px;
    align-items:center;
  }
  .inner-hero-copy{
    min-width:0;
    padding:8px 0 12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .inner-hero .breadcrumb{
    margin-bottom:16px;
    font-size:11px;
  }
  .inner-hero .eyebrow{
    margin-bottom:13px;
    font-size:12px;
    letter-spacing:.16em;
  }
  .inner-hero .eyebrow:before{width:34px}
  .inner-hero h1,.inner-hero .mobile-h1{
    max-width:930px;
    font-size:clamp(64px,4.35vw,80px);
    line-height:.975;
    letter-spacing:-.058em;
    font-weight:900;
    text-wrap:balance;
    text-shadow:0 1px 0 rgba(255,255,255,.9);
  }
  .inner-hero p{
    max-width:820px;
    margin-top:20px;
    color:#526274;
    font-size:17.5px;
    line-height:1.68;
  }
  .inner-hero-actions{
    gap:13px;
    margin-top:25px;
  }
  .inner-hero-actions .btn{
    min-height:56px;
    padding-inline:27px;
    font-size:14px;
  }
  .inner-hero-highlights{
    max-width:860px;
    gap:11px;
    margin-top:22px;
  }
  .inner-hero-highlights>span{
    min-height:66px;
    padding:13px 14px;
    border-radius:17px;
    background:rgba(255,255,255,.82);
    box-shadow:0 13px 30px rgba(6,20,38,.065);
  }
  .inner-hero-highlights i{
    flex-basis:10px;
    width:10px;
    height:10px;
  }
  .inner-hero-highlights b{font-size:11.5px}
  .inner-hero-highlights small{font-size:9.5px}
  .inner-hero-panel{
    width:100%;
    min-height:500px;
    padding:34px;
    border-radius:32px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-shadow:0 30px 75px rgba(6,20,38,.22);
  }
  .panel-kicker{font-size:10.5px}
  .inner-hero-panel h2{
    margin:11px 0 23px;
    font-size:30px;
    line-height:1.14;
  }
  .hero-quick-grid{gap:14px}
  .hero-quick-card{
    min-height:105px;
    padding:18px;
    border-radius:18px;
  }
  .hero-quick-card span{font-size:9.5px}
  .hero-quick-card strong{
    margin-top:7px;
    font-size:15px;
    line-height:1.34;
  }
  .hero-panel-feature{
    margin-top:15px;
    padding:17px 18px;
    border-radius:18px;
  }
  .hero-panel-feature small{font-size:9.5px}
  .hero-panel-feature b{font-size:14.5px}
  .hero-panel-arrow{
    flex-basis:40px;
    width:40px;
    height:40px;
  }
  .hero-contact-list{gap:13px}
  .hero-contact-item{
    gap:14px;
    min-height:74px;
    padding:15px 16px;
    border-radius:17px;
  }
  .hero-contact-item i{
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:15px;
  }
  .hero-contact-item span{font-size:9.5px}
  .hero-contact-item strong{font-size:14px}
}

/* Keep every hero fully usable on shorter laptop browser windows. */
@media (min-width:1100px) and (max-height:800px){
  .inner-hero{
    min-height:calc(100vh - 72px);
    padding:25px 0 30px;
  }
  .inner-hero-grid{
    grid-template-columns:minmax(0,1.13fr) minmax(470px,.87fr);
    gap:36px;
  }
  .inner-hero h1,.inner-hero .mobile-h1{
    font-size:clamp(57px,4vw,69px);
    line-height:.98;
  }
  .inner-hero p{
    margin-top:15px;
    font-size:15.5px;
    line-height:1.55;
  }
  .inner-hero-actions{margin-top:18px}
  .inner-hero-actions .btn{
    min-height:50px;
    padding-inline:22px;
    font-size:13px;
  }
  .inner-hero-highlights{
    margin-top:16px;
    gap:8px;
  }
  .inner-hero-highlights>span{
    min-height:57px;
    padding:10px 11px;
  }
  .inner-hero-highlights b{font-size:10px}
  .inner-hero-highlights small{font-size:8.5px}
  .inner-hero-panel{
    min-height:420px;
    padding:27px;
  }
  .inner-hero-panel h2{
    margin-bottom:18px;
    font-size:25px;
  }
  .hero-quick-grid{gap:11px}
  .hero-quick-card{
    min-height:83px;
    padding:14px;
  }
  .hero-quick-card strong{font-size:13px}
  .hero-panel-feature{
    margin-top:12px;
    padding:14px 15px;
  }
  .hero-contact-list{gap:10px}
  .hero-contact-item{
    min-height:61px;
    padding:12px 13px;
  }
}

/* ==========================================================
   Homepage full-screen laptop hero — July 2026
   Keeps the complete hero as the only opening-screen section,
   enlarges the main content and aligns both CTA buttons cleanly.
   ========================================================== */
@media (min-width:1051px){
  .hero-v2{
    min-height:calc(100svh - 72px);
    padding:24px 0 28px;
    align-items:center;
  }
  .hero-grid-v2{
    min-height:calc(100svh - 124px);
    grid-template-columns:minmax(520px,.9fr) minmax(0,1.1fr);
    gap:40px;
    align-items:center;
  }
  .hero-copy-v2{
    max-width:710px;
    padding:0;
    align-self:center;
  }
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{
    font-size:clamp(58px,4.45vw,72px);
    line-height:.98;
    margin:12px 0 18px;
  }
  .hero-copy-v2 p{
    max-width:670px;
    font-size:17px;
    line-height:1.65;
  }
  .hero-copy-v2 .hero-actions{
    align-items:stretch;
    margin-top:27px;
  }
  .hero-copy-v2 .hero-actions .btn{
    min-height:54px;
    padding-inline:25px;
    font-size:14px;
  }
  .hero-tags{
    margin-top:22px;
  }
  .hero-tags span{
    padding:9px 14px;
    font-size:10.5px;
  }
  .hero-stage{
    width:100%;
    height:clamp(520px,calc(100svh - 124px),680px);
    min-height:0;
    align-self:center;
  }
  .hero-photo{
    inset:0 0 30px 16px;
  }
  .hero-project-card{
    left:-8px;
    bottom:0;
    width:min(340px,45%);
  }
  .hero-score-card{
    right:18px;
    top:30px;
  }
  .hero-code-chip{
    right:20px;
    bottom:44px;
  }
}

@media (min-width:1450px){
  .hero-grid-v2{
    grid-template-columns:minmax(600px,.92fr) minmax(0,1.08fr);
    gap:48px;
  }
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{
    font-size:72px;
  }
}

@media (min-width:1051px) and (max-height:760px){
  .hero-v2{
    min-height:calc(100svh - 72px);
    padding:18px 0 22px;
  }
  .hero-grid-v2{
    min-height:calc(100svh - 112px);
  }
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{
    font-size:clamp(52px,4vw,61px);
    margin:9px 0 14px;
  }
  .hero-copy-v2 p{
    font-size:15.5px;
    line-height:1.52;
  }
  .hero-copy-v2 .hero-actions{
    margin-top:19px;
  }
  .hero-copy-v2 .hero-actions .btn{
    min-height:50px;
    font-size:13px;
  }
  .hero-tags{
    margin-top:16px;
  }
  .hero-tags span{
    padding:8px 12px;
    font-size:10px;
  }
  .hero-stage{
    height:clamp(500px,calc(100svh - 112px),640px);
  }
}

/* ==========================================================
   Homepage laptop hero typography emphasis — July 2026
   Enlarges and strengthens the complete left-side hero content
   while preserving the large visual and first-screen alignment.
   ========================================================== */
@media (min-width:1051px){
  .hero-grid-v2{
    grid-template-columns:minmax(560px,.96fr) minmax(0,1.04fr);
    gap:36px;
  }
  .hero-copy-v2{
    max-width:740px;
  }
  .hero-copy-v2 .eyebrow{
    font-size:12.5px;
    letter-spacing:.145em;
    color:#9a6810;
  }
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{
    font-size:clamp(64px,4.8vw,82px);
    line-height:.965;
    letter-spacing:-.062em;
    margin:13px 0 20px;
    font-weight:800;
  }
  .hero-copy-v2 p{
    max-width:700px;
    font-size:18.5px;
    line-height:1.58;
    color:#526276;
    font-weight:500;
  }
  .hero-copy-v2 .hero-actions{
    gap:14px;
    margin-top:28px;
  }
  .hero-copy-v2 .hero-actions .btn{
    min-height:58px;
    padding-inline:29px;
    font-size:15px;
    border-radius:15px;
  }
  .hero-tags{
    gap:10px;
    margin-top:24px;
  }
  .hero-tags span{
    padding:10px 15px;
    font-size:11.5px;
  }
}

@media (min-width:1450px){
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{
    font-size:82px;
  }
}

@media (min-width:1051px) and (max-height:760px){
  .hero-grid-v2{
    grid-template-columns:minmax(560px,.97fr) minmax(0,1.03fr);
    gap:32px;
  }
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{
    font-size:clamp(64px,4.7vw,72px);
    line-height:.96;
    margin:10px 0 15px;
  }
  .hero-copy-v2 p{
    max-width:690px;
    font-size:18px;
    line-height:1.47;
  }
  .hero-copy-v2 .hero-actions{
    margin-top:21px;
  }
  .hero-copy-v2 .hero-actions .btn{
    min-height:56px;
    padding-inline:27px;
    font-size:14.5px;
  }
  .hero-tags{
    margin-top:18px;
  }
  .hero-tags span{
    padding:9px 14px;
    font-size:11px;
  }
}


/* Inner pages rebuilt with the homepage hero layout — July 2026 */
.inner-page-home-style .hero-project-card img{object-fit:cover;object-position:center;padding:0;background:#eef1f4}
.inner-page-home-style .hero-project-card span{background:#fff}
.inner-page-home-style .hero-project-card em{line-height:1.35}
.inner-page-home-style.about-home-style-hero .hero-photo img{object-position:center 48%}
.inner-page-home-style.services-home-style-hero .hero-photo img{object-position:center 54%}
.inner-page-home-style.blog-home-style-hero .hero-photo img{object-position:center 48%}
.inner-page-home-style.contact-home-style-hero .hero-photo img{object-position:center 45%}
@media (min-width:1051px){
  .inner-page-home-style .hero-copy-v2 h1,.inner-page-home-style .hero-copy-v2 .mobile-h1{text-wrap:balance}
  .inner-page-home-style .hero-project-card{width:min(350px,47%)}
}
@media (max-width:560px){
  .inner-page-home-style .hero-copy-v2 h1 span,.inner-page-home-style .hero-copy-v2 .mobile-h1 span{display:block}
  .inner-page-home-style .hero-project-card em{font-size:8.5px}
}


/* About Who We Are hero and direct inner-page starts — July 2026 */
.direct-page-start{
  padding-top:72px;
}
.about-who-hero{
  position:relative;
  overflow:hidden;
  min-height:calc(100vh - 76px);
  display:flex;
  align-items:center;
  padding:42px 0 54px;
  background:linear-gradient(135deg,#f7fafc 0%,#fff 56%,#fff8e8 100%);
  isolation:isolate;
}
.about-who-hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:radial-gradient(circle at 1px 1px,rgba(6,20,38,.06) 1px,transparent 1.5px);
  background-size:24px 24px;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.52) 45%,#000 100%);
}
.about-who-hero:after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-110px;
  top:-150px;
  width:470px;
  height:470px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(212,167,59,.19),transparent 68%);
  pointer-events:none;
}
.about-who-grid{
  grid-template-columns:minmax(0,1.04fr) minmax(500px,.96fr);
  gap:64px;
  align-items:center;
}
.about-who-hero .about-art,
.about-who-hero .about-photo-wrap{
  min-height:590px;
}
.about-who-hero .about-photo-wrap{
  border:8px solid rgba(255,255,255,.92);
  box-shadow:0 28px 70px rgba(6,20,38,.2);
}
.about-who-copy{
  max-width:680px;
}
.about-who-copy .section-label{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 13px;
  border:1px solid #e4d5ad;
  border-radius:999px;
  background:#fff7df;
  color:#9b6d13;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.about-who-copy h1,.about-who-copy .mobile-h1{
  margin:15px 0 20px;
  color:var(--navy);
  font-size:clamp(55px,4.8vw,76px);
  line-height:.98;
  letter-spacing:-.058em;
  text-wrap:balance;
}
.about-who-copy > p{
  max-width:650px;
  margin:0 0 13px;
  color:#526274;
  font-size:16px;
  line-height:1.68;
}
.about-who-copy .check-list{
  margin:22px 0 0;
  grid-template-columns:1fr 1fr;
  column-gap:18px;
  row-gap:11px;
}
.about-who-copy .check-list li{
  color:#334357;
  font-size:12px;
  line-height:1.5;
}
.about-who-actions{
  margin-top:26px;
  justify-content:flex-start;
}
.about-who-actions .btn{
  min-height:56px;
  padding-inline:31px;
  font-size:14px;
  box-shadow:0 14px 30px rgba(166,116,18,.2);
}
@media (min-width:1051px) and (max-height:780px){
  .about-who-hero{
    min-height:640px;
    padding:24px 0 32px;
  }
  .about-who-grid{
    gap:48px;
  }
  .about-who-hero .about-art,
  .about-who-hero .about-photo-wrap{
    min-height:530px;
  }
  .about-who-copy h1,.about-who-copy .mobile-h1{
    font-size:clamp(52px,4.2vw,66px);
    margin:12px 0 16px;
  }
  .about-who-copy > p{
    font-size:14.5px;
    line-height:1.55;
  }
  .about-who-copy .check-list{
    margin-top:16px;
  }
  .about-who-actions{
    margin-top:19px;
  }
}
@media (max-width:1100px){
  .about-who-hero{
    min-height:auto;
    padding:52px 0 64px;
  }
  .about-who-grid{
    grid-template-columns:1fr;
    gap:42px;
  }
  .about-who-copy{
    max-width:none;
  }
  .about-who-copy h1,.about-who-copy .mobile-h1{
    font-size:clamp(48px,7vw,68px);
  }
}
@media (max-width:820px){
  .direct-page-start{padding-top:50px}
  .about-who-hero{
    padding:38px 0 52px;
  }
  .about-who-hero .about-art,
  .about-who-hero .about-photo-wrap{
    min-height:480px;
  }
  .about-who-copy .check-list{
    grid-template-columns:1fr;
  }
}
@media (max-width:560px){
  .direct-page-start{padding-top:38px}
  .about-who-hero{
    padding:27px 0 44px;
  }
  .about-who-hero .about-art,
  .about-who-hero .about-photo-wrap{
    min-height:390px;
  }
  .about-who-copy h1,.about-who-copy .mobile-h1{
    font-size:43px;
    line-height:1.01;
  }
  .about-who-copy > p{
    font-size:14px;
  }
  .about-who-actions .btn{
    width:100%;
  }
}

/* Clear About title, compact Services/Blog headings and enhanced Contact cards — July 2026 */
.about-who-hero .about-art::before{
  display:none !important;
  content:none !important;
}
.about-who-hero .about-art,
.about-who-hero .about-photo-wrap{
  position:relative;
  z-index:1;
}
.about-who-copy{
  position:relative;
  z-index:3;
  padding-left:4px;
}
.about-who-copy h1,.about-who-copy .mobile-h1{
  max-width:700px;
  text-wrap:pretty;
}

.compact-page-intro{
  position:relative;
  overflow:hidden;
  padding:42px 0 12px;
  background:linear-gradient(180deg,#f7fafc 0%,#fff 100%);
}
.compact-page-intro::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(6,20,38,.055) 1px,transparent 1.5px);
  background-size:23px 23px;
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.22) 72%,transparent);
}
.compact-intro-card{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  align-items:center;
  gap:48px;
  overflow:hidden;
  min-height:290px;
  padding:48px 52px;
  border-radius:32px;
  background:linear-gradient(135deg,#07172b 0%,#102d4c 64%,#173b60 100%);
  box-shadow:0 25px 65px rgba(6,20,38,.18);
  color:#fff;
}
.compact-intro-card::before{
  content:"";
  position:absolute;
  z-index:-2;
  width:360px;
  height:360px;
  right:-125px;
  top:-170px;
  border-radius:50%;
  background:linear-gradient(145deg,#e1ad2f,#f0ca67);
  opacity:.95;
}
.compact-intro-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:235px;
  height:235px;
  right:115px;
  bottom:-155px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 0 38px rgba(255,255,255,.035),0 0 0 76px rgba(255,255,255,.025);
}
.compact-blog-intro .compact-intro-card{
  background:linear-gradient(135deg,#0b2037 0%,#143b5d 66%,#1b496e 100%);
}
.compact-blog-intro .compact-intro-card::before{
  background:linear-gradient(145deg,#c6911d,#e4b94e);
}
.compact-intro-copy{
  position:relative;
  z-index:2;
  max-width:840px;
}
.compact-intro-copy .section-label{
  color:#f5d77f;
}
.compact-intro-copy .section-label::before{
  background:#e7b231;
}
.compact-intro-copy h1,.compact-intro-copy .mobile-h1{
  margin:13px 0 16px;
  max-width:900px;
  color:#fff;
  font-size:clamp(43px,4.4vw,66px);
  line-height:1.01;
  letter-spacing:-.052em;
  text-wrap:balance;
}
.compact-intro-copy p{
  max-width:760px;
  margin:0;
  color:#cbd8e5;
  font-size:15px;
  line-height:1.7;
}
.compact-intro-side{
  position:relative;
  z-index:2;
  display:grid;
  justify-items:start;
  gap:24px;
}
.compact-intro-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.compact-intro-tags span{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.09);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:10px;
  font-weight:850;
  letter-spacing:.025em;
}
.compact-intro-side .btn{
  min-height:54px;
  padding-inline:24px;
  font-size:13px;
}
.services-content-start,
.blog-content-start{
  padding-top:62px;
}

.contact-grid{
  align-items:start;
}
.contact-cards{
  gap:15px;
}
.contact-panel-title{
  padding:5px 4px 13px;
}
.contact-panel-title h1,.contact-panel-title .mobile-h1{
  margin:12px 0 11px;
  color:var(--navy);
  font-size:clamp(36px,3.3vw,49px);
  line-height:1.04;
  letter-spacing:-.045em;
}
.contact-panel-title p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}
.contact-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:126px;
  padding:22px 52px 21px 82px;
  border:1px solid #dbe4ec;
  border-radius:22px;
  background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);
  box-shadow:0 12px 30px rgba(6,20,38,.07);
}
.contact-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 auto 0 0;
  width:5px;
  background:var(--gold);
}
.contact-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-55px;
  top:-62px;
  width:145px;
  height:145px;
  border-radius:50%;
  background:rgba(212,167,59,.07);
}
.contact-card-icon{
  position:absolute;
  left:21px;
  top:24px;
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border-radius:14px;
  background:var(--navy);
  color:#fff;
  box-shadow:0 10px 24px rgba(6,20,38,.17);
}
.contact-card-icon svg{
  width:20px;
  height:20px;
}
.contact-card small{
  color:#9a6a10;
  font-size:9px;
  letter-spacing:.13em;
}
.contact-card strong{
  margin-top:5px;
  font-size:16px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.contact-card p{
  max-width:290px;
  margin-top:5px;
  line-height:1.5;
}
.contact-card-arrow{
  position:absolute;
  right:20px;
  top:19px;
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border:1px solid #dfe6ec;
  border-radius:50%;
  background:#fff;
  color:var(--navy);
  font-size:13px;
  font-weight:900;
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
.contact-card:hover{
  transform:translateY(-5px);
  border-color:#d7bd78;
  box-shadow:0 20px 46px rgba(6,20,38,.12);
}
.contact-card:hover .contact-card-arrow{
  transform:translate(2px,-2px);
  background:var(--navy);
  color:#fff;
}
.contact-card-whatsapp::before{
  background:#17a768;
}
.contact-card-whatsapp .contact-card-icon{
  background:#17a768;
}
.contact-card-email::before{
  background:#396a9a;
}
.contact-card-email .contact-card-icon{
  background:#315f8d;
}
.contact-card-location::before{
  background:#c58c19;
}
.contact-card-location .contact-card-icon{
  background:#c58c19;
}
.contact-form{
  background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
  border-color:#dbe3ea;
  box-shadow:0 22px 58px rgba(6,20,38,.11);
}

@media (min-width:1051px) and (max-height:780px){
  .compact-page-intro{padding-top:28px}
  .compact-intro-card{min-height:245px;padding:35px 44px}
  .compact-intro-copy h1,.compact-intro-copy .mobile-h1{font-size:clamp(40px,3.8vw,55px);margin:9px 0 11px}
  .compact-intro-copy p{font-size:13px;line-height:1.55}
  .services-content-start,.blog-content-start{padding-top:48px}
}
@media (max-width:1100px){
  .compact-intro-card{
    grid-template-columns:1fr;
    gap:28px;
  }
  .compact-intro-side{
    grid-template-columns:1fr auto;
    width:100%;
    align-items:center;
  }
}
@media (max-width:820px){
  .compact-page-intro{padding:28px 0 8px}
  .compact-intro-card{padding:36px 30px;border-radius:26px;min-height:auto}
  .compact-intro-copy h1,.compact-intro-copy .mobile-h1{font-size:clamp(39px,7.5vw,55px)}
  .compact-intro-side{grid-template-columns:1fr;gap:18px}
  .services-content-start,.blog-content-start{padding-top:48px}
  .contact-panel-title{padding-bottom:8px}
}
@media (max-width:560px){
  .about-who-copy{padding-left:0}
  .compact-page-intro{padding-top:20px}
  .compact-intro-card{padding:29px 23px;border-radius:23px}
  .compact-intro-card::before{width:230px;height:230px;right:-120px;top:-120px}
  .compact-intro-copy h1,.compact-intro-copy .mobile-h1{font-size:38px;line-height:1.02}
  .compact-intro-copy p{font-size:13px;line-height:1.6}
  .compact-intro-tags span{min-height:34px;padding-inline:11px;font-size:9px}
  .compact-intro-side .btn{width:100%}
  .services-content-start,.blog-content-start{padding-top:38px}
  .contact-panel-title h1,.contact-panel-title .mobile-h1{font-size:37px}
  .contact-card{padding:20px 44px 19px 72px;min-height:120px}
  .contact-card-icon{left:17px;top:22px;width:40px;height:40px}
  .contact-card-arrow{right:14px;top:15px}
}

/* Founder profile photo update */
.founder-portrait.founder-photo{
  position:relative;
  display:block;
  min-height:430px;
  overflow:hidden;
  background:#e8edf2;
  box-shadow:0 16px 36px rgba(6,20,38,.16);
}
.founder-portrait.founder-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center 18%;
  border-radius:inherit;
}
.founder-copy h3{
  max-width:720px;
  line-height:1.45;
}
@media(max-width:1100px){
  .founder-portrait.founder-photo{min-height:390px}
}
@media(max-width:820px){
  .founder-portrait.founder-photo{
    min-height:0;
    aspect-ratio:4/5;
    max-height:640px;
  }
}
@media(max-width:560px){
  .founder-portrait.founder-photo{
    aspect-ratio:4/5;
    max-height:none;
  }
}

/* ==========================================================
   Mobile navigation and alignment refinement — July 2026
   Keeps Home/About/Services/Blog/Contact accessible, places
   Call + WhatsApp in the mobile header, and tightens page starts.
   ========================================================== */
@media (max-width:820px){
  html{scroll-padding-top:72px}
  body.menu-open::before{
    content:"";
    position:fixed;
    inset:58px 0 0;
    z-index:998;
    background:rgba(6,20,38,.42);
    backdrop-filter:blur(3px);
  }
  .site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.985);
  }
  .header-inner{
    position:relative;
    height:58px;
    gap:5px;
  }
  .brand{
    min-width:0;
    margin-right:auto;
  }
  .brand img{
    width:112px;
    height:34px;
    object-fit:contain;
    object-position:left center;
  }
  .header-actions{
    gap:5px;
    flex:0 0 auto;
  }
  .header-actions > .btn-primary{display:none!important}
  .header-actions .icon-btn{
    display:grid!important;
    width:36px;
    height:36px;
    border-radius:12px;
    box-shadow:0 7px 18px rgba(6,20,38,.08);
  }
  .header-actions .icon-btn svg{
    width:17px;
    height:17px;
  }
  .header-actions .icon-btn.whatsapp{
    border-color:#18a866;
    background:#18a866;
  }
  .menu-toggle{
    display:grid!important;
    place-items:center;
    width:38px;
    height:38px;
    padding:0;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    box-shadow:0 7px 18px rgba(6,20,38,.08);
    font-size:0;
  }
  .menu-toggle svg{display:none}
  .menu-toggle::before{
    content:"☰";
    color:var(--navy);
    font-size:21px;
    line-height:1;
    font-weight:800;
  }
  .menu-toggle[aria-expanded="true"]::before{
    content:"×";
    font-size:28px;
    font-weight:500;
  }
  .nav{
    display:none;
    position:fixed;
    z-index:1002;
    inset:68px 10px auto 10px;
    max-height:calc(100svh - 82px);
    overflow:auto;
    padding:12px;
    border:1px solid rgba(6,20,38,.12);
    border-radius:20px;
    background:#fff;
    box-shadow:0 24px 60px rgba(6,20,38,.24);
    flex-direction:column;
    align-items:stretch;
    gap:5px;
  }
  .nav.open{display:flex}
  .nav::before{
    content:"Website Menu";
    padding:5px 10px 8px;
    color:#8592a0;
    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .nav a{
    display:flex;
    align-items:center;
    min-height:46px;
    padding:0 14px;
    border-radius:12px;
    color:#26384c;
    font-size:14px;
    font-weight:800;
  }
  .nav a::after{display:none}
  .nav a:hover,.nav a.active{
    color:var(--navy);
    background:linear-gradient(90deg,#fff4d5,#f9fbfd);
  }
  .nav a.active::before{
    content:"";
    width:7px;
    height:7px;
    margin-right:9px;
    border-radius:50%;
    background:var(--gold);
  }

  /* Homepage opening section */
  .hero-v2{
    min-height:auto;
    padding:16px 0 34px;
    align-items:flex-start;
  }
  .hero-grid-v2{
    grid-template-columns:1fr;
    gap:20px;
    padding-top:0;
  }
  .hero-copy-v2{
    max-width:none;
    margin:0;
    padding:0;
    text-align:center;
  }
  .hero-copy-v2 .eyebrow{
    justify-content:center;
    max-width:330px;
    margin:0 auto;
    font-size:9.5px;
    line-height:1.45;
    letter-spacing:.11em;
  }
  .hero-copy-v2 .eyebrow::before{display:none}
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{
    max-width:390px;
    margin:9px auto 13px;
    font-size:clamp(38px,10.4vw,46px);
    line-height:.99;
    letter-spacing:-.055em;
    text-wrap:balance;
  }
  .hero-copy-v2 h1 span,.hero-copy-v2 .mobile-h1 span{display:inline}
  .hero-copy-v2 p{
    max-width:370px;
    margin:0 auto;
    font-size:14px;
    line-height:1.55;
  }
  .hero-copy-v2 .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:17px;
  }
  .hero-copy-v2 .hero-actions .btn{
    width:100%;
    min-height:48px;
    padding:0 12px;
    border-radius:13px;
    font-size:11.5px;
    white-space:nowrap;
  }
  .hero-tags{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:13px;
  }
  .hero-tags span{
    justify-content:center;
    min-height:33px;
    padding:6px 8px;
    font-size:8.7px;
    line-height:1.2;
  }
  .hero-stage{
    width:100%;
    min-height:345px;
    margin:0 auto;
  }
  .hero-photo{
    inset:0 0 58px;
    border-radius:22px;
  }
  .hero-photo-caption{
    left:15px;
    right:15px;
    bottom:15px;
  }
  .hero-photo-caption small{font-size:7px}
  .hero-photo-caption strong{font-size:15px}
  .hero-project-card{
    left:-2px;
    bottom:0;
    width:62%;
    padding:6px;
    border-radius:16px;
  }
  .hero-project-card span{padding:7px 5px 3px}
  .hero-project-card b{font-size:7.5px}
  .hero-project-card em{font-size:9px}
  .hero-score-card{
    top:17px;
    right:-3px;
    padding:9px 10px;
    border-radius:13px;
  }
  .hero-score-card small{font-size:6.5px}
  .hero-score-card strong{font-size:9.5px}
  .hero-code-chip{display:none}

  /* About opening section: content first, image second */
  .about-who-hero{
    min-height:auto;
    padding:22px 0 40px;
  }
  .about-who-grid{gap:25px}
  .about-who-copy{
    order:1;
    padding:0;
    text-align:left;
  }
  .about-who-hero .about-art{order:2}
  .about-who-copy .section-label{
    padding:8px 11px;
    font-size:9px;
  }
  .about-who-copy h1,.about-who-copy .mobile-h1{
    margin:11px 0 14px;
    font-size:clamp(38px,10vw,45px);
    line-height:1;
  }
  .about-who-copy > p{
    font-size:13.5px;
    line-height:1.62;
  }
  .about-who-copy .check-list{
    grid-template-columns:1fr;
    gap:9px;
    margin-top:17px;
  }
  .about-who-actions{margin-top:19px}
  .about-who-actions .btn{
    width:100%;
    min-height:50px;
  }
  .about-who-hero .about-art,
  .about-who-hero .about-photo-wrap{
    min-height:350px;
  }
  .about-logo-float{
    width:145px;
    left:14px;
    top:14px;
    padding:9px 11px;
  }
  .about-caption{
    left:17px;
    right:17px;
    bottom:17px;
  }

  /* Compact Services and Blog headings */
  .compact-page-intro{padding:17px 0 6px}
  .compact-intro-card{
    grid-template-columns:1fr;
    gap:20px;
    min-height:auto;
    padding:27px 22px;
    border-radius:22px;
  }
  .compact-intro-copy h1,.compact-intro-copy .mobile-h1{
    margin:10px 0 12px;
    font-size:clamp(35px,9.3vw,42px);
    line-height:1.01;
  }
  .compact-intro-copy p{
    font-size:13px;
    line-height:1.6;
  }
  .compact-intro-side{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }
  .compact-intro-tags{gap:7px}
  .compact-intro-tags span{
    min-height:32px;
    padding:0 10px;
    font-size:8.5px;
  }
  .compact-intro-side .btn{
    width:100%;
    min-height:48px;
  }
  .services-content-start,.blog-content-start{padding-top:34px}

  /* Contact page starts closer to the header */
  .direct-page-start{padding-top:24px}
  .contact-panel-title{padding:0 0 9px}
  .contact-panel-title h1,.contact-panel-title .mobile-h1{
    margin:9px 0 10px;
    font-size:clamp(35px,9.3vw,42px);
    line-height:1.02;
  }
  .contact-panel-title p{font-size:13px}
  .contact-card{
    min-height:112px;
    padding:18px 40px 17px 66px;
    border-radius:19px;
  }
  .contact-card-icon{
    left:14px;
    top:18px;
    width:38px;
    height:38px;
    border-radius:12px;
  }
  .contact-card-icon svg{width:18px;height:18px}
  .contact-card-arrow{right:12px;top:13px}
  .contact-card strong{font-size:14px}
  .contact-card p{font-size:11px}
  .contact-form{
    padding:21px 17px;
    border-radius:22px;
  }
  .contact-form h2{
    font-size:29px!important;
    margin:10px 0 20px!important;
  }
  .form-grid{grid-template-columns:1fr;gap:13px}
  .field.full{grid-column:auto}
  .field input,.field select,.field textarea{font-size:14px}

  /* Consistent mobile content spacing */
  .section{padding:54px 0}
  .section-head{margin-bottom:27px}
  .section-head h2{font-size:34px;line-height:1.04}
  .section-head p{font-size:13px;line-height:1.6}
  .services-grid,.blog-grid,.review-track,.values-grid,.industry-grid,.deliverables-grid{gap:15px}
  .service-card,.blog-card,.review-card,.value-card,.industry-card,.deliverable{border-radius:20px}
  .service-image{height:205px}
  .service-copy{padding:21px}
  .footer{padding-top:48px}
  .footer-grid{gap:30px}
  .footer-bottom{margin-top:34px}
}

@media (max-width:370px){
  .brand img{width:98px}
  .header-actions{gap:4px}
  .header-actions .icon-btn{width:34px;height:34px}
  .menu-toggle{width:36px;height:36px}
  .hero-copy-v2 .hero-actions{grid-template-columns:1fr}
  .hero-copy-v2 h1,.hero-copy-v2 .mobile-h1{font-size:37px}
  .hero-copy-v2 p{font-size:13.5px}
  .hero-stage{min-height:325px}
  .compact-intro-copy h1,.contact-panel-title h1,.about-who-copy h1,.compact-intro-copy .mobile-h1,.contact-panel-title .mobile-h1,.about-who-copy .mobile-h1{font-size:35px}
}

/* ==========================================================
   Founder profile proportion refinement — July 2026
   Keeps the portrait visually balanced with the text content.
   ========================================================== */
@media (min-width:1101px){
  .founder-card{
    grid-template-columns:260px minmax(0,1fr);
    align-items:center;
  }
  .founder-portrait.founder-photo{
    width:100%;
    min-height:0;
    height:auto;
    aspect-ratio:4/5;
    align-self:center;
  }
  .founder-portrait.founder-photo img{
    object-position:center 16%;
  }
}
@media (min-width:821px) and (max-width:1100px){
  .founder-card{
    align-items:center;
  }
  .founder-portrait.founder-photo{
    min-height:0;
    height:auto;
    aspect-ratio:4/5;
    align-self:center;
  }
}
@media (max-width:820px){
  .founder-portrait.founder-photo{
    aspect-ratio:3/4;
    width:min(100%,430px);
    margin-inline:auto;
  }
}

/* === Box design enhancement update === */
.value-card,
.industry-card,
.deliverable{
  position:relative;
  overflow:hidden;
  border:1px solid #dbe5ee;
  border-radius:24px;
  padding:28px 26px 24px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
  box-shadow:0 14px 34px rgba(6,20,38,.06);
}

.value-card::before,
.industry-card::before,
.deliverable::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,var(--gold) 0%,#f5d98f 55%,rgba(245,217,143,0) 100%);
}

.value-card::after,
.industry-card::after,
.deliverable::after{
  content:"";
  position:absolute;
  right:-32px;
  top:-32px;
  width:118px;
  height:118px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,167,59,.18) 0%, rgba(212,167,59,.08) 52%, rgba(212,167,59,0) 72%);
  pointer-events:none;
}

.value-card:hover,
.industry-card:hover,
.deliverable:hover{
  transform:translateY(-6px);
  border-color:#d2b66c;
  box-shadow:0 24px 48px rgba(6,20,38,.12);
}

.value-card h3,
.industry-card h3,
.deliverable b{
  position:relative;
  z-index:1;
  font-size:20px;
  line-height:1.18;
  margin:16px 0 10px;
  color:var(--navy);
}

.value-card p,
.industry-card p,
.deliverable p{
  position:relative;
  z-index:1;
  font-size:13px;
  line-height:1.72;
  color:#627182;
  margin:0;
  max-width:95%;
}

.value-icon{
  position:relative;
  z-index:1;
  width:54px;
  height:54px;
  border-radius:18px;
  background:linear-gradient(135deg,#fff4d8 0%,#f5dfaa 100%);
  color:var(--gold-dark);
  box-shadow:0 12px 24px rgba(212,167,59,.18);
  border:1px solid rgba(212,167,59,.18);
}

.industry-card h3,
.deliverable b{
  padding-right:28px;
}

.industry-card h3::after,
.deliverable b::after{
  content:"↗";
  position:absolute;
  right:0;
  top:-2px;
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:13px;
  color:var(--gold-dark);
  background:var(--gold-soft);
  border:1px solid rgba(212,167,59,.22);
}

.industry-card:nth-child(2n),
.deliverable:nth-child(2n){
  background:linear-gradient(180deg,#fffdf8 0%,#ffffff 100%);
}

.industry-card:nth-child(3n),
.deliverable:nth-child(3n){
  background:linear-gradient(180deg,#fdfefe 0%,#ffffff 100%);
}

.values-grid,
.industry-grid,
.deliverables-grid{
  gap:22px;
}

@media (max-width: 1100px){
  .values-grid,
  .industry-grid,
  .deliverables-grid{
    gap:18px;
  }
}

@media (max-width: 820px){
  .value-card,
  .industry-card,
  .deliverable{
    padding:24px 20px 20px;
    border-radius:20px;
  }

  .value-card h3,
  .industry-card h3,
  .deliverable b{
    font-size:18px;
  }

  .value-card p,
  .industry-card p,
  .deliverable p{
    font-size:12px;
    max-width:100%;
  }

  .value-icon{
    width:48px;
    height:48px;
    border-radius:16px;
  }
}


/* === Zamm Clothing preview + fully clickable cards === */
.clothing-project-visual .zamm-clothing-interface{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:#f5f3ee;
}

.clothing-project-visual::after{
  background:linear-gradient(180deg,rgba(6,20,38,.02) 58%,rgba(6,20,38,.18));
  pointer-events:none;
}

[data-card-href]{
  cursor:pointer;
}

[data-card-href]:focus-visible{
  outline:3px solid rgba(212,167,59,.72);
  outline-offset:5px;
}

.service-card[data-card-href],
.blog-card[data-card-href],
.project-feature[data-card-href],
.showcase-card[data-card-href]{
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}

.service-card[data-card-href]:hover,
.blog-card[data-card-href]:hover,
.project-feature[data-card-href]:hover,
.showcase-card[data-card-href]:hover{
  border-color:rgba(212,167,59,.48);
  box-shadow:0 24px 55px rgba(6,20,38,.13);
}

.service-card[data-card-href] .text-link,
.blog-card[data-card-href] .text-link{
  position:relative;
  z-index:2;
}

@media(max-width:820px){
  .clothing-project-visual .zamm-clothing-interface{
    object-fit:cover;
    object-position:center top;
  }
}


/* === Balanced hero layout for all six service pages === */
.service-detail-hero{
  position:relative;
  overflow:hidden;
  padding:58px 0 62px;
  background:linear-gradient(135deg,#f7fafc 0%,#ffffff 50%,#fbf2dd 100%);
}
.service-detail-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(6,20,38,.045) 1px,transparent 0);
  background-size:22px 22px;
  mask-image:linear-gradient(90deg,#000,transparent 78%);
}
.service-detail-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(440px,1fr);
  gap:52px;
  align-items:center;
  min-height:min(660px,calc(100svh - 122px));
}
.service-detail-grid>div:first-child{
  max-width:670px;
}
.service-detail-hero h1,.service-detail-hero .mobile-h1{
  font-size:clamp(44px,4.25vw,68px);
  line-height:1.01;
  letter-spacing:-.052em;
  margin:14px 0 20px;
  text-wrap:balance;
}
.service-detail-hero p{
  max-width:650px;
  font-size:16px;
  line-height:1.72;
}
.service-detail-image{
  position:relative;
  width:100%;
  height:520px;
  min-height:520px;
  border:1px solid rgba(6,20,38,.1);
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 25px 70px rgba(6,20,38,.16);
  background:#e9eef3;
}
.service-detail-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.service-detail-image .service-image-label{
  position:absolute;
  left:24px;
  right:24px;
  bottom:22px;
  width:auto;
  padding:15px 18px;
  border-radius:15px;
  color:#fff;
  background:rgba(6,20,38,.88);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(6,20,38,.22);
}
@media (max-width:1100px){
  .service-detail-grid{
    grid-template-columns:minmax(0,1fr) minmax(390px,.9fr);
    gap:36px;
    min-height:auto;
  }
  .service-detail-image{height:460px;min-height:460px}
  .service-detail-hero h1,.service-detail-hero .mobile-h1{font-size:clamp(42px,5vw,58px)}
}
@media (max-width:900px){
  .service-detail-hero{padding:46px 0 52px}
  .service-detail-grid{grid-template-columns:1fr;gap:34px}
  .service-detail-grid>div:first-child{max-width:none;text-align:left}
  .service-detail-image{height:380px;min-height:380px}
}
@media (max-width:560px){
  .service-detail-hero{padding:30px 0 38px}
  .service-detail-hero h1,.service-detail-hero .mobile-h1{font-size:clamp(38px,11vw,48px);margin:11px 0 16px}
  .service-detail-hero p{font-size:14px;line-height:1.65}
  .service-detail-image{height:285px;min-height:285px;border-radius:22px}
  .service-detail-image .service-image-label{left:14px;right:14px;bottom:14px;padding:11px 13px;font-size:11px}
}

/* The expanded blog library remains clean and consistent. */
.blog-grid{align-items:stretch}
.blog-card{height:100%}
.blog-body{display:flex;flex-direction:column;height:auto;flex:1}
.blog-body .text-link{margin-top:auto}


/* ==========================================================
   Web-photo card update: Home process, Services process,
   About values and Who We Serve — July 2026
   ========================================================== */

.process-grid{align-items:stretch}
.process-grid:before{display:none!important}
.process-card{
  padding:0!important;
  min-height:100%!important;
  display:flex;
  flex-direction:column;
  border-radius:24px!important;
  background:#fff!important;
  overflow:hidden!important;
}
.process-card:before,.process-card:after{display:none!important}
.process-card-image{
  position:relative;
  height:170px;
  overflow:hidden;
  background:#e8edf2;
}
.process-card-image:after,
.value-card-image:after,
.industry-card-image:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(6,20,38,.02),rgba(6,20,38,.1));
  pointer-events:none;
}
.process-card-image img,
.value-card-image img,
.industry-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s ease;
}
.process-card:hover img,
.value-card:hover img,
.industry-card:hover img{transform:scale(1.055)}
.process-card .process-number{
  position:absolute;
  z-index:2;
  left:18px;
  bottom:16px;
  width:58px;
  height:58px;
  border-radius:18px;
  font-size:24px;
  background:rgba(255,245,216,.95);
  backdrop-filter:blur(8px);
  box-shadow:0 12px 28px rgba(6,20,38,.18);
}
.process-card-copy{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:24px 25px 26px;
}
.process-card-copy h3{margin:0 0 9px!important;font-size:20px}
.process-card-copy p{margin:0;font-size:12.5px;line-height:1.65;color:var(--muted)}

.value-card,.industry-card{
  padding:0!important;
  display:flex;
  flex-direction:column;
  min-height:100%;
  overflow:hidden!important;
  background:#fff!important;
}
.value-card::before,.value-card::after,
.industry-card::before,.industry-card::after{display:none!important}
.value-card-image,.industry-card-image{
  position:relative;
  height:190px;
  overflow:hidden;
  background:#e8edf2;
}
.value-card .value-icon{
  position:absolute;
  z-index:2;
  left:18px;
  bottom:16px;
  width:52px;
  height:52px;
  margin:0;
  background:rgba(255,245,216,.95);
  backdrop-filter:blur(8px);
  box-shadow:0 12px 28px rgba(6,20,38,.17);
}
.value-card-copy,.industry-card-copy{
  padding:23px 25px 26px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.value-card-copy h3,.industry-card-copy h3{
  padding:0!important;
  margin:0 0 9px!important;
  font-size:20px;
}
.industry-card-copy h3::after{display:none!important}
.value-card-copy p,.industry-card-copy p{
  max-width:100%!important;
  font-size:12.5px;
  line-height:1.65;
  margin:0;
  color:var(--muted);
}
.industry-card-image{height:172px}

@media(max-width:1100px){
  .process-card-image{height:190px}
  .value-card-image{height:210px}
  .industry-card-image{height:190px}
}
@media(max-width:820px){
  .process-card,.value-card,.industry-card{border-radius:20px!important}
  .process-card-image,.value-card-image,.industry-card-image{height:205px}
  .process-card-copy,.value-card-copy,.industry-card-copy{padding:21px 20px 23px}
  .process-card-copy h3,.value-card-copy h3,.industry-card-copy h3{font-size:19px}
}
@media(max-width:480px){
  .process-card-image,.value-card-image,.industry-card-image{height:185px}
}


/* === Final laptop alignment, richer content, image cards and FAQ update === */
body > .top-strip{display:none!important}
.site-header{top:0}

/* Home: remove the four-stat strip and bring services closer to the hero. */
.home-page .hero{padding-bottom:48px}
.home-page .hero + .section{padding-top:72px}
.home-page .trust-strip{display:none!important}

/* Service detail first screen. */
.service-page .service-detail-hero{
  padding:38px 0 46px;
  background:linear-gradient(135deg,#f8fafc 0%,#fff 52%,#fbf3e2 100%);
}
.service-page .service-detail-grid{
  grid-template-columns:minmax(0,.94fr) minmax(520px,1.06fr);
  gap:50px;
  align-items:center;
}
.service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
  font-size:clamp(50px,5vw,72px);
  line-height:1.01;
  margin:11px 0 17px;
  max-width:780px;
}
.service-page .service-detail-hero p{
  font-size:16px;
  line-height:1.72;
  margin:0;
  max-width:720px;
}
.service-page .service-hero-extra{
  margin-top:12px!important;
  font-size:14px!important;
  line-height:1.65!important;
  color:#415166!important;
}
.service-hero-points{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:grid;
  gap:9px;
}
.service-hero-points li{
  position:relative;
  padding-left:30px;
  color:#26384d;
  font-size:13px;
  font-weight:750;
}
.service-hero-points li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:1px;
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--gold-soft);
  color:var(--gold-dark);
  font-size:11px;
  font-weight:900;
}
.service-page .service-detail-hero .hero-actions{margin-top:23px}
.service-page .service-detail-image{
  height:520px;
  min-height:0;
  border-radius:30px;
}
.service-page .service-detail-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.service-page main > .section:not(.service-detail-hero){padding:76px 0}
.service-page .section-head.center{margin-bottom:32px}

/* Image-based service feature boxes. */
.service-page .deliverables-grid{gap:22px}
.service-page .deliverable{
  padding:0 0 23px!important;
  overflow:hidden;
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:24px;
}
.deliverable-media{
  width:100%;
  height:168px;
  overflow:hidden;
  background:#e9eef3;
  margin-bottom:21px;
}
.deliverable-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.deliverable:hover .deliverable-media img{transform:scale(1.055)}
.service-page .deliverable b{
  display:block;
  margin:0 22px 8px!important;
  font-size:18px;
  line-height:1.22;
  padding-right:0;
}
.service-page .deliverable b:after{display:none!important}
.service-page .deliverable p{
  margin:0 22px!important;
  max-width:none;
  font-size:12.5px;
  line-height:1.65;
}

/* Blog articles start closer to the header and avoid the empty breadcrumb area. */
.article-page main > .section:first-child{padding:44px 0 72px}
.article-page .article-layout{gap:44px}
.article-page .article h1,.article-page .article .mobile-h1{margin-top:10px;font-size:clamp(48px,5.5vw,70px)}
.article-page .article .eyebrow{margin-bottom:4px}
.article-page .article-sidebar{top:104px}
.article-faq-block{
  margin:42px 0 30px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#f8fafc;
}
.article-faq-block h2{margin:0 0 18px!important;font-size:30px!important}
.article-faq-block .faq{margin-top:10px}

/* Expanded About content. */
.about-depth-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
  gap:62px;
  align-items:center;
}
.about-depth-copy h2{
  margin:12px 0 20px;
  font-size:clamp(40px,4.5vw,60px);
  line-height:1.04;
  letter-spacing:-.045em;
}
.about-depth-copy p{color:var(--muted);font-size:14px;line-height:1.8}
.about-depth-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.about-depth-card{
  padding:24px;
  border:1px solid var(--line);
  border-radius:21px;
  background:linear-gradient(180deg,#fff,#fbfcfe);
  box-shadow:0 14px 35px rgba(6,20,38,.06);
}
.about-depth-card span{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:13px;
  background:var(--gold-soft);
  color:var(--gold-dark);
  font-size:11px;
  font-weight:900;
}
.about-depth-card h3{margin:16px 0 8px;font-size:18px;color:var(--navy)}
.about-depth-card p{margin:0;font-size:12px;color:var(--muted);line-height:1.65}

/* FAQ presentation across main pages and services. */
.faq-section{position:relative;overflow:hidden}
.faq-section:before{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  border-radius:50%;
  right:-150px;
  top:-170px;
  background:radial-gradient(circle,rgba(212,167,59,.16),rgba(212,167,59,0) 70%);
  pointer-events:none;
}
.faq-grid{grid-template-columns:1fr 1fr;gap:14px 18px}
.faq-grid .faq{height:max-content}
.faq-grid .faq summary{font-size:14px}

/* General first-section spacing after removal of the black top strip. */
.about-page main > .section:first-child,
.services-page main > .compact-page-intro:first-child,
.blog-page main > .compact-page-intro:first-child,
.contact-page main > .section:first-child{margin-top:0}

@media(max-width:1180px){
  .service-page .service-detail-grid{grid-template-columns:1fr 1fr;gap:34px}
  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{font-size:54px}
  .service-page .service-detail-image{height:480px}
  .about-depth-grid{grid-template-columns:1fr;gap:36px}
}

@media(max-width:820px){
  .home-page .hero{padding-bottom:34px}
  .home-page .hero + .section{padding-top:56px}
  .service-page .service-detail-hero{padding:30px 0 42px}
  .service-page .service-detail-grid{grid-template-columns:1fr;gap:28px}
  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{font-size:45px}
  .service-page .service-detail-hero p{font-size:14px}
  .service-page .service-detail-image{height:330px}
  .service-page main > .section:not(.service-detail-hero){padding:62px 0}
  .deliverable-media{height:190px}
  .article-page main > .section:first-child{padding:30px 0 58px}
  .article-page .article h1,.article-page .article .mobile-h1{font-size:45px}
  .article-faq-block{padding:20px}
  .about-depth-cards{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
}


/* =========================================================
   Final layout, instant-loading and light/dark-mode update
   ========================================================= */
html{scroll-behavior:smooth!important}

/* Tighter page rhythm: remove excessive gaps between titles and sections. */
.section{padding:62px 0!important}
.section-sm{padding:44px 0!important}
.section-head{margin-bottom:28px!important;gap:26px!important}
.section-head.center{margin-bottom:28px!important}
.section-head h2{margin-top:8px!important}
.section-label,.eyebrow{margin-bottom:0!important}
.section + .section{margin-top:0!important}
.compact-page-intro{padding-top:54px!important;padding-bottom:34px!important}
.page-content-section,.services-content-start,.direct-page-start{padding-top:40px!important}
.service-detail-hero{padding:58px 0 48px!important}
.service-detail-grid{gap:42px!important}
.article-layout{padding-top:0!important}
.article h1,.article .mobile-h1{margin-top:8px!important}
.article-lead{margin:22px 0!important}
.article h2{margin-top:30px!important}
.footer{padding-top:58px!important}

/* Instant image presentation with stable dimensions. */
img{content-visibility:auto}
.remote-image,.deliverable-media img{opacity:1!important}
.deliverable-media{height:150px;overflow:hidden;background:#e9eef3;border-radius:18px 18px 0 0;margin:-24px -24px 20px}
.deliverable-media img{width:100%;height:100%;object-fit:cover;display:block}
.deliverable{overflow:hidden;padding-top:24px!important}
.services-extra-content{background:#fff}
.service-explain-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:start}
.service-explain-copy h2{font-size:clamp(36px,4.3vw,58px);line-height:1.06;letter-spacing:-.045em;margin:10px 0 18px;color:var(--navy)}
.service-explain-copy p{color:var(--muted);font-size:15px;margin:0 0 14px}
.service-explain-points{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.service-explain-points article{padding:22px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#fff,#faf6ea);box-shadow:0 12px 28px rgba(6,20,38,.06)}
.service-explain-points strong{display:block;color:var(--navy);font-size:16px;margin-bottom:8px}
.service-explain-points span{display:block;color:var(--muted);font-size:12px;line-height:1.65}

/* Stronger FAQ card design. */
.faq-list{gap:12px!important}
.faq{position:relative;overflow:hidden;border:1px solid #d9e3ec!important;border-left:5px solid var(--gold)!important;border-radius:18px!important;background:linear-gradient(135deg,#fff 0%,#fffdf7 100%)!important;padding:0 20px!important;box-shadow:0 12px 30px rgba(6,20,38,.06)!important}
.faq::before{content:"FAQ";position:absolute;right:68px;top:17px;font-size:9px;font-weight:900;letter-spacing:.14em;color:#b28a2f;opacity:.55}
.faq summary{min-height:64px;display:flex;align-items:center;padding:15px 118px 15px 0!important;font-size:15px!important;color:var(--navy)!important}
.faq summary::after{right:6px!important;top:50%!important;transform:translateY(-50%)!important;width:34px!important;height:34px!important;border:1px solid rgba(212,167,59,.28);box-shadow:0 6px 14px rgba(212,167,59,.16)}
.faq[open]{background:linear-gradient(135deg,#fffaf0 0%,#fff 100%)!important;border-color:#d8bd76!important}
.faq p{margin:0 54px 18px 0!important;padding-top:14px;border-top:1px solid rgba(6,20,38,.08);line-height:1.7!important}

/* Small header theme switch. */
.theme-toggle{width:42px!important;height:42px!important;font-size:18px;line-height:1;position:relative;overflow:hidden}
.theme-icon{display:none}
html:not([data-theme="dark"]) .theme-icon-moon{display:block}
html[data-theme="dark"] .theme-icon-sun{display:block}

/* Powered-by credit on every page. */
.footer-bottom{flex-wrap:wrap!important}
.powered-by-zamm{font-weight:850;color:#d7b45a;letter-spacing:.06em;text-transform:uppercase}

/* Dark mode. */
html[data-theme="dark"] body{background:#071321;color:#e8eef5;--ink:#e8eef5;--muted:#a7b4c1;--line:#26384a;--soft:#0d1b2a;--white:#102235;--gold-soft:#2b2619}
html[data-theme="dark"] .site-header{background:rgba(7,19,33,.97)!important;border-color:#26384a!important}
html[data-theme="dark"] .brand img,html[data-theme="dark"] .footer-brand img{content:url("../images/zamm-logo-transparent-dark.webp")}
html[data-theme="dark"] .nav a,html[data-theme="dark"] .menu-toggle{color:#d7e0ea}
html[data-theme="dark"] .nav a.active,html[data-theme="dark"] .nav a:hover{color:#e0b441}
html[data-theme="dark"] .hero,html[data-theme="dark"] .service-detail-hero,html[data-theme="dark"] .about-who-hero,html[data-theme="dark"] .compact-page-intro{background:linear-gradient(135deg,#091827,#0d1b2b 55%,#201b10)!important}
html[data-theme="dark"] .section,html[data-theme="dark"] .services-extra-content{background-color:#071321}
html[data-theme="dark"] .soft{background:#0d1b2a!important}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,html[data-theme="dark"] .hero h1,html[data-theme="dark"] .service-detail-hero h1,html[data-theme="dark"] .service-explain-copy h2,html[data-theme="dark"] .service-explain-points strong,html[data-theme="dark"] .deliverable b,html[data-theme="dark"] .faq summary,html[data-theme="dark"] .mobile-h1,html[data-theme="dark"] .hero .mobile-h1,html[data-theme="dark"] .service-detail-hero .mobile-h1{color:#f3f7fb!important}
html[data-theme="dark"] p,html[data-theme="dark"] li,html[data-theme="dark"] .section-head p,html[data-theme="dark"] .article p,html[data-theme="dark"] .article li{color:#a7b4c1!important}
html[data-theme="dark"] .service-card,html[data-theme="dark"] .blog-card,html[data-theme="dark"] .review-card,html[data-theme="dark"] .value-card,html[data-theme="dark"] .industry-card,html[data-theme="dark"] .deliverable,html[data-theme="dark"] .process-card,html[data-theme="dark"] .contact-card,html[data-theme="dark"] .contact-form,html[data-theme="dark"] .sidebar-card,html[data-theme="dark"] .service-explain-points article,html[data-theme="dark"] .faq{background:#102235!important;border-color:#26384a!important;box-shadow:none!important}
html[data-theme="dark"] .faq[open]{background:#15263a!important}
html[data-theme="dark"] .faq p{border-color:#26384a!important}
html[data-theme="dark"] .icon-btn,html[data-theme="dark"] .btn-light,html[data-theme="dark"] .float-btn.call{background:#102235!important;color:#f3f7fb!important;border-color:#31475d!important}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea{background:#0b1a2a!important;color:#eef4fa!important;border-color:#30465b!important}
html[data-theme="dark"] .article-callout{background:#292316!important}
html[data-theme="dark"] .footer{background:#020a13!important}

@media(max-width:1100px){
  .service-explain-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .section{padding:46px 0!important}
  .compact-page-intro{padding-top:38px!important;padding-bottom:26px!important}
  .service-detail-hero{padding:42px 0 36px!important}
  .service-explain-points{grid-template-columns:1fr}
  .deliverable-media{height:175px;margin:-24px -20px 18px}
  .faq::before{display:none}
  .faq summary{padding-right:52px!important;font-size:14px!important}
  .faq p{margin-right:0!important}
  .theme-toggle{width:38px!important;height:38px!important;font-size:16px}
  .footer-bottom{align-items:flex-start!important}
}


/* =========================================================
   Restored motion, larger homepage hero and centered page titles
   ========================================================= */

/* Restore the original slide-in reveal and interactive motion. */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)!important;
  will-change:opacity,transform;
}
.reveal.from-left{transform:translateX(-42px)}
.reveal.from-right{transform:translateX(42px)}
.reveal.scale-up{transform:scale(.94)}
.reveal.visible{opacity:1;transform:none}
[data-tilt]{transition:transform .28s ease,box-shadow .28s ease!important}
.btn,.service-card,.blog-card,.project-showcase,.value-card,.industry-card,.deliverable,.process-card,.contact-card,.faq,.showcase-card{
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background-color .28s ease!important;
}
.service-image img,.showcase-media img,.case-image img,.deliverable-media img,.hero-project-card img{
  transition:transform .45s ease!important;
}
.service-card:hover .service-image img,.showcase-card:hover .showcase-media img,.deliverable:hover .deliverable-media img{
  transform:scale(1.045);
}

/* Larger, stronger homepage hero typography on laptops. */
@media (min-width:1051px){
  .home-page .hero-grid-v2{
    grid-template-columns:minmax(595px,.99fr) minmax(0,1.01fr);
    gap:34px;
  }
  .home-page .hero-copy-v2{max-width:780px}
  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    font-size:clamp(68px,5.15vw,88px);
    line-height:.955;
    letter-spacing:-.064em;
    margin:13px 0 20px;
  }
  .home-page .hero-copy-v2 p{
    max-width:735px;
    font-size:19px;
    line-height:1.56;
  }
  .home-page .hero-copy-v2 .hero-actions .btn{
    min-height:60px;
    padding-inline:31px;
    font-size:15.5px;
  }
  .home-page .hero-tags span{
    padding:10px 15px;
    font-size:11.5px;
  }
}
@media (min-width:1500px){
  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{font-size:88px}
}
@media (min-width:1051px) and (max-height:760px){
  .home-page .hero-grid-v2{
    grid-template-columns:minmax(565px,.97fr) minmax(0,1.03fr);
    gap:30px;
  }
  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    font-size:clamp(62px,4.65vw,74px);
    margin:9px 0 14px;
  }
  .home-page .hero-copy-v2 p{
    font-size:17.5px;
    line-height:1.47;
  }
  .home-page .hero-copy-v2 .hero-actions .btn{min-height:54px}
}

/* Clean centered page introductions for Services and Blog. */
.simple-page-intro{
  position:relative;
  overflow:hidden;
  min-height:330px;
  display:flex;
  align-items:center;
  padding:70px 0 58px;
  background:linear-gradient(180deg,#f7fafc 0%,#ffffff 100%);
  border-bottom:1px solid rgba(6,20,38,.06);
}
.simple-page-intro::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(6,20,38,.045) 1px,transparent 1.5px);
  background-size:25px 25px;
  mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 75%,transparent 100%);
}
.simple-page-intro-inner{
  position:relative;
  z-index:1;
  max-width:1040px;
  margin:0 auto;
  text-align:center;
}
.simple-page-intro .section-label{
  justify-content:center;
  margin-bottom:12px!important;
}
.simple-page-intro .section-label::before{display:none}
.simple-page-intro h1,.simple-page-intro .mobile-h1{
  margin:0 auto 20px;
  color:var(--navy);
  font-size:clamp(52px,5.6vw,82px);
  line-height:1.01;
  letter-spacing:-.055em;
  text-wrap:balance;
}
.simple-page-intro p{
  max-width:900px;
  margin:0 auto;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}
.services-page .simple-page-intro + .page-content-section,
.blog-page .simple-page-intro + .page-content-section{
  padding-top:58px!important;
}
html[data-theme="dark"] .simple-page-intro{
  background:linear-gradient(180deg,#091827 0%,#0d1b2b 100%);
  border-color:#26384a;
}
html[data-theme="dark"] .simple-page-intro h1,html[data-theme="dark"] .simple-page-intro .mobile-h1{color:#f2f6fa}

@media(max-width:820px){
  .simple-page-intro{
    min-height:auto;
    padding:48px 0 40px;
  }
  .simple-page-intro h1,.simple-page-intro .mobile-h1{
    font-size:clamp(39px,11vw,52px);
    line-height:1.03;
    margin-bottom:16px;
  }
  .simple-page-intro p{
    font-size:14px;
    line-height:1.65;
  }
  .services-page .simple-page-intro + .page-content-section,
  .blog-page .simple-page-intro + .page-content-section{
    padding-top:44px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}


/* =========================================================
   Final light-only header and laptop hero alignment update
   ========================================================= */

/* Theme control removed; keep the website in its original light appearance. */
.theme-toggle{display:none!important}
.header-actions{gap:10px}

/* Opening titles no longer reserve space for eyebrow labels. */
main > section:first-child h1,
.hero-copy-v2 h1,
.about-who-copy h1,
.service-detail-hero h1,
.simple-page-intro h1,
.article h1,
.contact-panel-title h1,main > section:first-child .mobile-h1,
.hero-copy-v2 .mobile-h1,
.about-who-copy .mobile-h1,
.service-detail-hero .mobile-h1,
.simple-page-intro .mobile-h1,
.article .mobile-h1,
.contact-panel-title .mobile-h1{
  margin-top:0!important;
}

/* Homepage: move the larger title upward and preserve the balanced first screen. */
.home-page .hero-v2{padding-top:8px!important}
.home-page .hero-copy-v2{padding-top:0!important}
.home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{margin:0 0 20px!important}

/* About and Contact openings: use the released label space. */
.about-page .about-who-hero{padding-top:34px!important}
.about-page .about-who-copy h1,.about-page .about-who-copy .mobile-h1{margin-bottom:18px!important}
.contact-page main > .section:first-child{padding-top:34px!important}
.contact-page .contact-panel-title h1,.contact-page .contact-panel-title .mobile-h1{margin-bottom:12px!important}

/* Main Services and Blog page titles: compact, centred and laptop-friendly. */
.simple-page-intro{
  min-height:255px!important;
  padding:42px 0 38px!important;
}
.simple-page-intro-inner{max-width:1020px}
.simple-page-intro h1,.simple-page-intro .mobile-h1{margin:0 auto 16px!important}
.services-page .simple-page-intro h1,.services-page .simple-page-intro .mobile-h1{
  font-size:clamp(48px,4.8vw,70px)!important;
  line-height:1.02!important;
}
.blog-page .simple-page-intro h1,.blog-page .simple-page-intro .mobile-h1{
  max-width:880px;
  font-size:clamp(43px,4.15vw,62px)!important;
  line-height:1.04!important;
  letter-spacing:-.05em!important;
}
.simple-page-intro p{
  font-size:16px!important;
  line-height:1.65!important;
}
.services-page .simple-page-intro + .page-content-section,
.blog-page .simple-page-intro + .page-content-section{
  padding-top:46px!important;
}

/* Six service detail pages: align the title, copy and image from the top. */
.service-page .service-detail-hero{padding:38px 0 46px!important}
.service-page .service-detail-grid{align-items:center!important}
.service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
  margin:0 0 18px!important;
  font-size:clamp(50px,4.9vw,70px)!important;
  line-height:.99!important;
}
.service-page .service-detail-hero p{margin-top:0!important}

/* Blog articles and supporting pages begin closer to the header. */
.article-page main > .section:first-child{padding:34px 0 66px!important}
.article-page .article h1,.article-page .article .mobile-h1{margin:0 0 18px!important}
.article-page .article-layout{align-items:start}

/* General opening title rhythm for case study and legal pages. */
main > section:first-child .article h1,
main > section:first-child .page-hero h1,
main > section:first-child .service-detail-hero h1,main > section:first-child .article .mobile-h1,
main > section:first-child .page-hero .mobile-h1,
main > section:first-child .service-detail-hero .mobile-h1{margin-top:0!important}

@media (min-width:1051px) and (max-height:780px){
  .home-page .hero-v2{padding-top:4px!important;padding-bottom:24px!important}
  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{margin-bottom:14px!important}
  .simple-page-intro{min-height:230px!important;padding:34px 0 30px!important}
  .service-page .service-detail-hero{padding:28px 0 34px!important}
  .service-page .service-detail-image{height:500px!important}
}

@media (max-width:820px){
  .home-page .hero-v2{padding-top:18px!important}
  .about-page .about-who-hero{padding-top:26px!important}
  .simple-page-intro{min-height:auto!important;padding:34px 0 30px!important}
  .services-page .simple-page-intro h1,
  .blog-page .simple-page-intro h1,.services-page .simple-page-intro .mobile-h1,
  .blog-page .simple-page-intro .mobile-h1{
    font-size:clamp(36px,10vw,48px)!important;
    line-height:1.04!important;
  }
  .simple-page-intro p{font-size:14px!important}
  .service-page .service-detail-hero{padding:30px 0 36px!important}
  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
    font-size:clamp(38px,10.8vw,48px)!important;
    line-height:1.02!important;
  }
  .article-page main > .section:first-child{padding:26px 0 54px!important}
}

/* =========================================================
   Final homepage hero scale and vertical-space refinement
   ========================================================= */
@media (min-width:1051px){
  .home-page .hero-v2{
    min-height:calc(100svh - 72px)!important;
    padding:0 0 8px!important;
    align-items:center!important;
  }
  .home-page .hero-grid-v2{
    min-height:calc(100svh - 80px)!important;
    grid-template-columns:minmax(640px,1.04fr) minmax(0,.96fr)!important;
    gap:28px!important;
    align-items:center!important;
  }
  .home-page .hero-copy-v2{
    max-width:830px!important;
    padding:0!important;
    align-self:center!important;
  }
  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    max-width:820px!important;
    font-size:clamp(78px,5.7vw,94px)!important;
    line-height:.925!important;
    letter-spacing:-.067em!important;
    margin:0 0 16px!important;
  }
  .home-page .hero-copy-v2 p{
    max-width:780px!important;
    font-size:20px!important;
    line-height:1.48!important;
  }
  .home-page .hero-copy-v2 .hero-actions{
    gap:14px!important;
    margin-top:23px!important;
  }
  .home-page .hero-copy-v2 .hero-actions .btn{
    min-height:62px!important;
    padding-inline:32px!important;
    font-size:16px!important;
  }
  .home-page .hero-tags{
    gap:10px!important;
    margin-top:18px!important;
  }
  .home-page .hero-tags span{
    min-height:42px!important;
    padding:10px 16px!important;
    font-size:12px!important;
  }
  .home-page .hero-stage{
    height:calc(100svh - 92px)!important;
    max-height:700px!important;
    min-height:560px!important;
  }
}

@media (min-width:1051px) and (max-height:800px){
  .home-page .hero-v2{padding:0 0 6px!important}
  .home-page .hero-grid-v2{
    min-height:calc(100svh - 78px)!important;
    grid-template-columns:minmax(585px,1fr) minmax(0,1fr)!important;
    gap:24px!important;
  }
  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    font-size:clamp(68px,5vw,80px)!important;
    line-height:.94!important;
    margin-bottom:13px!important;
  }
  .home-page .hero-copy-v2 p{
    font-size:18px!important;
    line-height:1.43!important;
  }
  .home-page .hero-copy-v2 .hero-actions{margin-top:18px!important}
  .home-page .hero-copy-v2 .hero-actions .btn{
    min-height:55px!important;
    font-size:14px!important;
  }
  .home-page .hero-tags{margin-top:14px!important}
  .home-page .hero-tags span{
    min-height:38px!important;
    padding:8px 13px!important;
    font-size:10.5px!important;
  }
  .home-page .hero-stage{
    height:calc(100svh - 88px)!important;
    min-height:500px!important;
  }
}

@media (max-width:1050px){
  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    font-size:clamp(50px,8vw,68px)!important;
  }
}

@media (max-width:560px){
  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    font-size:clamp(42px,11vw,50px)!important;
    line-height:.98!important;
  }
}


/* =========================================================
   Homepage hero — fuller laptop height and balanced spacing
   ========================================================= */
@media (min-width:1051px){
  .home-page .hero-v2{
    min-height:calc(100svh - 72px)!important;
    padding:0 0 4px!important;
  }
  .home-page .hero-grid-v2{
    min-height:calc(100svh - 76px)!important;
    align-items:stretch!important;
  }
  .home-page .hero-copy-v2{
    align-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-height:min(700px,calc(100svh - 92px))!important;
    padding:24px 0 20px!important;
    gap:0!important;
  }
  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    font-size:clamp(84px,6.05vw,102px)!important;
    line-height:.91!important;
    margin:0 0 22px!important;
  }
  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    font-size:21px!important;
    line-height:1.5!important;
    margin:0!important;
  }
  .home-page .hero-secondary-copy{
    max-width:760px!important;
    margin:14px 0 0!important;
    font-size:15px!important;
    line-height:1.6!important;
    color:#43556a!important;
    font-weight:650!important;
  }
  .home-page .hero-copy-v2 .hero-actions{
    margin-top:25px!important;
  }
  .home-page .hero-copy-v2 .hero-actions .btn{
    min-height:64px!important;
    padding-inline:34px!important;
    font-size:16px!important;
  }
  .home-page .hero-tags{
    margin-top:20px!important;
  }
  .home-page .hero-tags span{
    min-height:44px!important;
    padding:10px 17px!important;
    font-size:12px!important;
  }
}

@media (min-width:1051px) and (max-height:820px){
  .home-page .hero-copy-v2{
    min-height:calc(100svh - 88px)!important;
    padding:12px 0 10px!important;
  }
  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    font-size:clamp(72px,5.25vw,84px)!important;
    line-height:.93!important;
    margin-bottom:15px!important;
  }
  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    font-size:18.5px!important;
    line-height:1.42!important;
  }
  .home-page .hero-secondary-copy{
    margin-top:9px!important;
    font-size:13.5px!important;
    line-height:1.45!important;
  }
  .home-page .hero-copy-v2 .hero-actions{margin-top:17px!important}
  .home-page .hero-copy-v2 .hero-actions .btn{
    min-height:56px!important;
    font-size:14px!important;
  }
  .home-page .hero-tags{margin-top:14px!important}
  .home-page .hero-tags span{
    min-height:38px!important;
    padding:8px 13px!important;
    font-size:10.5px!important;
  }
}

@media (max-width:1050px){
  .home-page .hero-secondary-copy{
    max-width:680px;
    margin:12px auto 0;
    font-size:14px;
    line-height:1.55;
    color:#43556a;
    font-weight:650;
  }
}

@media (max-width:560px){
  .home-page .hero-secondary-copy{
    margin-top:9px;
    font-size:12.5px;
    line-height:1.48;
  }
}


/* Moving client review section */
.moving-reviews-section{overflow:hidden;padding-bottom:78px}
.moving-reviews-section .section-head{margin-bottom:34px}
.moving-reviews-viewport{width:100%;overflow:hidden;padding:8px 0 24px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.moving-reviews-track{display:flex;width:max-content;animation:movingReviews 58s linear infinite;will-change:transform}
.moving-reviews-viewport:hover .moving-reviews-track{animation-play-state:paused}
.moving-reviews-set{display:flex;gap:20px;padding-right:20px}
.moving-review-card{width:380px;min-height:270px;display:flex;flex-direction:column;padding:28px;border:1px solid #dbe4ec;border-radius:24px;background:linear-gradient(145deg,#fff 0%,#fbfcfe 74%,#f8f0dc 145%);box-shadow:0 16px 38px rgba(6,20,38,.075)}
.moving-review-stars{color:var(--gold-dark);font-size:15px;letter-spacing:.16em;margin-bottom:20px}
.moving-review-card>p{font-size:15px;line-height:1.75;color:#435367;margin:0 0 26px}
.moving-review-author{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:4px}
.moving-review-author strong{font-size:15px;line-height:1.3;color:var(--navy)}
.moving-review-author span{font-size:11px;color:var(--muted);font-weight:700}
.moving-reviews-note{width:var(--container);margin:4px auto 0;text-align:center;color:var(--muted);font-size:10px}
@keyframes movingReviews{to{transform:translateX(-50%)}}
@media(max-width:820px){.moving-reviews-section{padding-bottom:58px}.moving-review-card{width:300px;min-height:255px;padding:23px}.moving-review-card>p{font-size:13px}.moving-reviews-track{animation-duration:72s}.moving-reviews-viewport{mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)}}
@media(prefers-reduced-motion:reduce){.moving-reviews-track{animation:none}.moving-reviews-viewport{overflow-x:auto}.moving-reviews-set[aria-hidden="true"]{display:none}}


/* Homepage ticker spacing and people-first local SEO content */
.home-page .service-marquee{margin-top:30px}
.local-seo-section{padding-top:70px;padding-bottom:70px;background:linear-gradient(135deg,#fff 0%,#f8fafc 62%,#fbf5e7 100%)}
.local-seo-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);gap:52px;align-items:center}
.local-seo-copy h2{font-size:clamp(40px,4.3vw,62px);line-height:1.05;letter-spacing:-.045em;color:var(--navy);margin:12px 0 20px}
.local-seo-copy p{font-size:15px;line-height:1.75;color:#526274;max-width:760px;margin:0 0 14px}
.local-seo-actions{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px}
.local-seo-points{display:grid;gap:15px}
.local-seo-card{position:relative;padding:24px 25px 22px 30px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 14px 34px rgba(6,20,38,.06)}
.local-seo-card:before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:4px;border-radius:0 4px 4px 0;background:var(--gold)}
.local-seo-card strong{display:block;color:var(--navy);font-size:17px;margin-bottom:7px}
.local-seo-card p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.65}
.service-local-context{font-weight:600;color:#43556a!important}
@media(max-width:1050px){.local-seo-grid{grid-template-columns:1fr}.local-seo-points{grid-template-columns:repeat(3,1fr)}.home-page .service-marquee{margin-top:20px}}
@media(max-width:820px){.local-seo-section{padding:54px 0}.local-seo-points{grid-template-columns:1fr}.local-seo-copy h2{font-size:clamp(34px,9vw,46px)}.home-page .service-marquee{margin-top:14px}}


/* =========================================================
   Homepage square hero image update
   ========================================================= */
.home-page .hero-stage{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  perspective:none!important;
}

.home-page .hero-photo-main{
  position:relative!important;
  inset:auto!important;
  width:min(100%,650px)!important;
  aspect-ratio:1 / 1!important;
  min-height:0!important;
  margin-left:auto!important;
  border-radius:24px!important;
  overflow:hidden!important;
  transform:none!important;
}

.home-page .hero-photo-main img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

.home-page .hero-project-card{
  display:none!important;
}

@media (min-width:1051px){
  .home-page .hero-grid-v2{
    grid-template-columns:minmax(620px,1.05fr) minmax(500px,.95fr)!important;
    align-items:center!important;
  }

  .home-page .hero-stage{
    width:100%!important;
    padding:20px 0!important;
  }
}

@media (min-width:1051px) and (max-height:820px){
  .home-page .hero-photo-main{
    width:min(100%,590px)!important;
  }
}

@media (max-width:1050px){
  .home-page .hero-stage{
    justify-content:center!important;
    width:100%!important;
    margin-top:20px!important;
  }

  .home-page .hero-photo-main{
    width:min(100%,620px)!important;
    margin-inline:auto!important;
  }
}

@media (max-width:560px){
  .home-page .hero-photo-main{
    border-radius:18px!important;
  }
}

/* =========================================================
   Homepage hero logo visibility refinement
   Keeps the square card while displaying the complete photo.
   ========================================================= */
.home-page .hero-photo-main{
  width:min(100%,700px)!important;
  background:#f7f7f5!important;
}

.home-page .hero-photo-main img{
  object-fit:contain!important;
  object-position:center!important;
  background:#f7f7f5!important;
}

@media (min-width:1051px){
  .home-page .hero-grid-v2{
    grid-template-columns:minmax(600px,1fr) minmax(570px,1fr)!important;
    gap:42px!important;
  }
}

@media (min-width:1051px) and (max-height:820px){
  .home-page .hero-photo-main{
    width:min(100%,640px)!important;
  }
}

@media (max-width:1050px){
  .home-page .hero-photo-main{
    width:min(100%,680px)!important;
  }
}


/* Homepage hero: remove white letterbox strip */
.home-page .hero-photo-main{background:transparent!important;}
.home-page .hero-photo-main img{object-fit:cover!important;object-position:center!important;background:transparent!important;display:block!important;}
nn/* Continuous homepage service ticker — no empty loop gap */n.home-page .service-marquee{n  overflow:hidden;n}n.home-page .marquee-track{n  display:flex;n  align-items:center;n  gap:0;n  width:max-content;n  white-space:nowrap;n  animation:continuousServiceTicker 24s linear infinite;n  will-change:transform;n}n.home-page .marquee-group{n  display:flex;n  align-items:center;n  gap:28px;n  flex:0 0 auto;n  padding-right:28px;n}n.home-page .service-marquee:hover .marquee-track{n  animation-play-state:running;n}n@keyframes continuousServiceTicker{n  from{transform:translate3d(0,0,0)}n  to{transform:translate3d(-50%,0,0)}n}n@media(max-width:820px){n  .home-page .marquee-group{gap:20px;padding-right:20px}n}n@media(prefers-reduced-motion:reduce){n  .home-page .marquee-track{animation:none!important}n}n
/* =========================================================
   Two-line Services and Blog page titles
   ========================================================= */
@media (min-width:821px){
  .services-page .simple-page-intro-inner{
    max-width:1240px!important;
  }
  .services-page .simple-page-intro h1{
    max-width:1220px!important;
    font-size:clamp(50px,4.35vw,68px)!important;
    line-height:1.04!important;
    text-wrap:nowrap!important;
  }
  .blog-page .simple-page-intro-inner{
    max-width:1080px!important;
  }
  .blog-page .simple-page-intro h1{
    max-width:1040px!important;
    font-size:clamp(48px,4.15vw,64px)!important;
    line-height:1.05!important;
    text-wrap:nowrap!important;
  }
  .desktop-title-break{display:block}
}
@media (max-width:820px){
  .desktop-title-break{display:none}
}


/* =========================================================
   Homepage simplified description and laptop button alignment
   ========================================================= */
@media (min-width:1051px){
  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    max-width:720px!important;
    font-size:19px!important;
    line-height:1.45!important;
  }

  .home-page .hero-secondary-copy{
    max-width:700px!important;
    margin-top:10px!important;
    font-size:14px!important;
    line-height:1.5!important;
  }

  .home-page .hero-copy-v2 .hero-actions{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:14px!important;
    margin-top:21px!important;
  }

  .home-page .hero-copy-v2 .hero-actions .btn{
    min-height:58px!important;
    padding-inline:30px!important;
    white-space:nowrap!important;
  }

  .home-page .hero-tags{
    margin-top:16px!important;
  }
}

@media (min-width:1051px) and (max-height:820px){
  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    font-size:17px!important;
    line-height:1.4!important;
  }

  .home-page .hero-secondary-copy{
    margin-top:7px!important;
    font-size:12.8px!important;
    line-height:1.4!important;
  }

  .home-page .hero-copy-v2 .hero-actions{
    margin-top:14px!important;
  }

  .home-page .hero-copy-v2 .hero-actions .btn{
    min-height:52px!important;
    padding-inline:25px!important;
    font-size:13.5px!important;
  }

  .home-page .hero-tags{
    margin-top:11px!important;
  }
}

@media (max-width:1050px){
  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    max-width:640px!important;
  }

  .home-page .hero-secondary-copy{
    max-width:610px!important;
  }
}

@media (max-width:560px){
  .home-page .hero-copy-v2 .hero-actions{
    gap:10px!important;
  }
}


/* =========================================================
   Homepage hero text spacing — fill laptop height naturally
   ========================================================= */
@media (min-width:1051px){
  .home-page .hero-grid-v2{
    align-items:stretch!important;
  }

  .home-page .hero-copy-v2{
    align-self:stretch!important;
    justify-content:flex-start!important;
    min-height:min(700px,calc(100svh - 92px))!important;
    padding:20px 0 22px!important;
  }

  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    line-height:.95!important;
    margin:0 0 28px!important;
  }

  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    line-height:1.58!important;
    margin:0!important;
  }

  .home-page .hero-secondary-copy{
    margin-top:17px!important;
    line-height:1.58!important;
  }

  .home-page .hero-copy-v2 .hero-actions{
    margin-top:30px!important;
  }

  .home-page .hero-tags{
    margin-top:23px!important;
  }
}

@media (min-width:1051px) and (max-height:820px){
  .home-page .hero-copy-v2{
    justify-content:flex-start!important;
    padding:8px 0 12px!important;
  }

  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    line-height:.95!important;
    margin-bottom:20px!important;
  }

  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    line-height:1.5!important;
  }

  .home-page .hero-secondary-copy{
    margin-top:12px!important;
    line-height:1.5!important;
  }

  .home-page .hero-copy-v2 .hero-actions{
    margin-top:23px!important;
  }

  .home-page .hero-tags{
    margin-top:18px!important;
  }
}

@media (max-width:1050px){
  .home-page .hero-copy-v2{
    padding-top:8px!important;
  }
}


/* =========================================================
   E-Commerce service hero — keep CTA buttons visible on laptops
   ========================================================= */
@media (min-width:1051px){
  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero{
    padding:22px 0 28px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-grid{
    align-items:center!important;
    gap:42px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero h1,body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero .mobile-h1{
    font-size:clamp(48px,4.45vw,64px)!important;
    line-height:.98!important;
    margin:0 0 14px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero p{
    font-size:14.5px!important;
    line-height:1.55!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-hero-extra{
    margin-top:8px!important;
    font-size:13.5px!important;
    line-height:1.5!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-hero-points{
    margin-top:13px!important;
    gap:6px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-hero-points li{
    font-size:12.5px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero .hero-actions{
    margin-top:15px!important;
    flex-wrap:nowrap!important;
    gap:12px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero .hero-actions .btn{
    min-height:50px!important;
    padding-inline:23px!important;
    white-space:nowrap!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-image{
    height:500px!important;
  }
}

@media (min-width:1051px) and (max-height:780px){
  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero{
    padding:14px 0 20px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero h1,body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero .mobile-h1{
    font-size:clamp(44px,4vw,58px)!important;
    margin-bottom:10px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero p{
    font-size:13.5px!important;
    line-height:1.46!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-hero-extra{
    margin-top:5px!important;
    font-size:12.5px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-hero-points{
    margin-top:9px!important;
    gap:4px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero .hero-actions{
    margin-top:11px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-image{
    height:470px!important;
  }
}

@media (max-width:1050px){
  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero .hero-actions{
    display:flex!important;
    flex-wrap:wrap!important;
  }
}


/* =========================================================
   Homepage laptop hero — fuller text with CTA area at bottom
   ========================================================= */
@media (min-width:1051px){
  .home-page .hero-copy-v2{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    min-height:min(700px,calc(100svh - 92px))!important;
    padding:18px 0 22px!important;
  }

  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    margin:0 0 25px!important;
    line-height:.95!important;
  }

  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    max-width:735px!important;
    font-size:20px!important;
    line-height:1.5!important;
    margin:0!important;
  }

  .home-page .hero-secondary-copy{
    max-width:720px!important;
    margin-top:15px!important;
    font-size:16px!important;
    line-height:1.55!important;
  }

  .home-page .hero-copy-v2 .hero-actions{
    margin-top:auto!important;
    padding-top:24px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:14px!important;
  }

  .home-page .hero-copy-v2 .hero-actions .btn{
    min-height:58px!important;
    padding-inline:30px!important;
    white-space:nowrap!important;
  }

  .home-page .hero-tags{
    margin-top:16px!important;
    padding-bottom:2px!important;
  }
}

@media (min-width:1051px) and (max-height:820px){
  .home-page .hero-copy-v2{
    min-height:calc(100svh - 88px)!important;
    padding:7px 0 12px!important;
  }

  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    margin-bottom:16px!important;
  }

  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    font-size:17px!important;
    line-height:1.42!important;
  }

  .home-page .hero-secondary-copy{
    margin-top:9px!important;
    font-size:13.5px!important;
    line-height:1.44!important;
  }

  .home-page .hero-copy-v2 .hero-actions{
    padding-top:14px!important;
  }

  .home-page .hero-copy-v2 .hero-actions .btn{
    min-height:51px!important;
    padding-inline:24px!important;
    font-size:13.5px!important;
  }

  .home-page .hero-tags{
    margin-top:10px!important;
  }
}

@media (max-width:1050px){
  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy),
  .home-page .hero-secondary-copy{
    max-width:650px!important;
  }

  .home-page .hero-copy-v2 .hero-actions{
    margin-top:22px!important;
    padding-top:0!important;
  }
}


/* =========================================================
   Homepage hero — balanced laptop layout
   ========================================================= */
@media (min-width:1051px){
  .home-page .hero-grid-v2{
    align-items:center!important;
  }

  .home-page .hero-copy-v2{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-self:center!important;
    min-height:0!important;
    padding:28px 0 30px!important;
  }

  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    margin:0 0 22px!important;
    line-height:.96!important;
  }

  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    max-width:720px!important;
    margin:0!important;
    font-size:18px!important;
    line-height:1.48!important;
  }

  .home-page .hero-secondary-copy{
    max-width:700px!important;
    margin:12px 0 0!important;
    font-size:14.5px!important;
    line-height:1.5!important;
  }

  .home-page .hero-copy-v2 .hero-actions{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:14px!important;
    margin:24px 0 0!important;
    padding:0!important;
  }

  .home-page .hero-copy-v2 .hero-actions .btn{
    min-height:56px!important;
    padding-inline:29px!important;
    white-space:nowrap!important;
  }

  .home-page .hero-tags{
    margin:15px 0 0!important;
    padding:0!important;
  }
}

@media (min-width:1051px) and (max-height:820px){
  .home-page .hero-copy-v2{
    justify-content:center!important;
    min-height:0!important;
    padding:12px 0 16px!important;
  }

  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    margin-bottom:15px!important;
  }

  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    font-size:16px!important;
    line-height:1.42!important;
  }

  .home-page .hero-secondary-copy{
    margin-top:8px!important;
    font-size:12.8px!important;
    line-height:1.42!important;
  }

  .home-page .hero-copy-v2 .hero-actions{
    margin-top:17px!important;
  }

  .home-page .hero-copy-v2 .hero-actions .btn{
    min-height:50px!important;
    padding-inline:23px!important;
    font-size:13.5px!important;
  }

  .home-page .hero-tags{
    margin-top:10px!important;
  }
}

@media (max-width:1050px){
  .home-page .hero-copy-v2{
    min-height:0!important;
    justify-content:flex-start!important;
  }

  .home-page .hero-copy-v2 .hero-actions{
    margin-top:20px!important;
    padding-top:0!important;
  }
}


/* =========================================================
   Services title fixed to exactly two laptop lines
   ========================================================= */
@media (min-width:821px){
  .services-page .simple-page-intro-inner{
    max-width:1380px!important;
  }

  .services-page .simple-page-intro h1,.services-page .simple-page-intro .mobile-h1{
    max-width:1360px!important;
    font-size:clamp(50px,4.15vw,66px)!important;
    line-height:1.04!important;
    letter-spacing:-.052em!important;
    white-space:nowrap!important;
  }

  .services-page .simple-page-intro h1 .desktop-title-break,.services-page .simple-page-intro .mobile-h1 .desktop-title-break{
    display:block!important;
  }
}

@media (max-width:820px){
  .services-page .simple-page-intro h1,.services-page .simple-page-intro .mobile-h1{
    white-space:normal!important;
  }
}


/* =========================================================
   July 2026 – About page team photo + premium white card styling
   ========================================================= */
.about-who-hero .about-photo-wrap>img{
  object-position:center center !important;
}
.about-who-hero .about-photo-wrap{
  background:#eef3f7 !important;
}
.about-who-hero .about-caption{
  background:linear-gradient(180deg,rgba(6,20,38,0) 0%,rgba(6,20,38,.16) 32%,rgba(6,20,38,.74) 100%);
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  padding:36px 30px 30px;
}
.about-who-hero .about-caption b{
  max-width:520px;
}

:root{
  --premium-card-border:#d9e2ea;
  --premium-card-shadow:0 16px 40px rgba(6,20,38,.06);
  --premium-card-shadow-hover:0 24px 56px rgba(6,20,38,.12);
}

.founder-card,
.about-depth-card,
.service-card,
.process-card,
.review-card,
.value-card,
.industry-card,
.deliverable,
.blog-card,
.contact-card,
.contact-form,
.sidebar-card,
.project-feature,
.local-seo-card,
.case-image,
.showcase-card,
.service-detail-image{
  border:1px solid var(--premium-card-border) !important;
  background:
    radial-gradient(circle at top right, rgba(212,167,59,.10), transparent 130px),
    linear-gradient(180deg,#ffffff 0%,#ffffff 62%,#fcfaf4 140%) !important;
  box-shadow:var(--premium-card-shadow) !important;
}

.founder-card,
.about-depth-card,
.service-card,
.process-card,
.review-card,
.value-card,
.industry-card,
.deliverable,
.blog-card,
.contact-card,
.sidebar-card,
.project-feature,
.local-seo-card,
.case-image,
.showcase-card,
.service-detail-image{
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease !important;
}

.founder-card:hover,
.about-depth-card:hover,
.service-card:hover,
.process-card:hover,
.review-card:hover,
.value-card:hover,
.industry-card:hover,
.deliverable:hover,
.blog-card:hover,
.contact-card:hover,
.sidebar-card:hover,
.project-feature:hover,
.local-seo-card:hover,
.case-image:hover,
.showcase-card:hover,
.service-detail-image:hover{
  transform:translateY(-5px);
  border-color:#ccd7e0 !important;
  box-shadow:var(--premium-card-shadow-hover) !important;
}

.about-depth-card,
.process-card,
.contact-card,
.deliverable,
.sidebar-card,
.local-seo-card,
.faq{
  position:relative;
  overflow:hidden;
}

.about-depth-card::before,
.process-card::before,
.contact-card::before,
.deliverable::before,
.sidebar-card::before,
.local-seo-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,var(--gold),#f3dd9a 50%,transparent 100%);
  opacity:.95;
}

.value-card,
.industry-card,
.service-card,
.blog-card,
.review-card,
.showcase-card{
  overflow:hidden;
}

.value-card .value-card-copy,
.industry-card .industry-card-copy,
.service-card .service-copy,
.blog-card .blog-body,
.review-card,
.contact-card,
.sidebar-card,
.deliverable,
.about-depth-card,
.founder-card{
  position:relative;
  z-index:1;
}

.value-card .value-icon,
.about-depth-card span,
.process-number{
  box-shadow:0 10px 22px rgba(212,167,59,.18);
}

.faq{
  background:linear-gradient(135deg,#ffffff 0%,#fffdf8 100%) !important;
  box-shadow:0 12px 30px rgba(6,20,38,.06) !important;
}

.contact-form{
  box-shadow:0 18px 44px rgba(6,20,38,.08) !important;
}

.field input,
.field select,
.field textarea{
  background:#fffdf9;
}

@media (max-width:820px){
  .about-who-hero .about-caption{
    padding:28px 22px 24px;
  }
  .about-who-hero .about-caption b{
    font-size:19px;
  }
}


/* =========================================================
   July 2026 – Mobile homepage hero with integrated background image
   Removes the separate hero photo on mobile and uses it as the
   hero background so the section feels cleaner and more connected.
   ========================================================= */
@media (max-width:820px){
  .home-page .hero-v2{
    position:relative!important;
    overflow:hidden!important;
    padding:14px 0 26px!important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.84) 22%, rgba(255,255,255,.93) 48%, rgba(255,255,255,.97) 100%),
      linear-gradient(135deg, rgba(248,250,252,.72) 0%, rgba(255,255,255,.28) 44%, rgba(251,245,231,.46) 100%),
      url("../images/home-hero-zamm-office-logo.webp") center center / cover no-repeat !important;
  }

  .home-page .hero-v2::after{
    content:"";
    position:absolute;
    inset:auto -14% -18% auto;
    width:250px;
    height:250px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(212,167,59,.18), rgba(212,167,59,0) 70%);
    pointer-events:none;
    z-index:0;
  }

  .home-page .hero-grid-v2{
    position:relative!important;
    z-index:2!important;
    gap:0!important;
  }

  .home-page .hero-copy-v2{
    position:relative!important;
    z-index:2!important;
    max-width:none!important;
    padding:18px 14px 0!important;
    border-radius:24px!important;
    background:linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.76) 100%)!important;
    border:1px solid rgba(255,255,255,.72)!important;
    box-shadow:0 16px 42px rgba(6,20,38,.08)!important;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }

  .home-page .hero-copy-v2 h1,
  .home-page .hero-copy-v2 p,
  .home-page .hero-copy-v2 .hero-secondary-copy,.home-page .hero-copy-v2 .mobile-h1{
    position:relative;
    z-index:2;
  }

  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    max-width:380px!important;
    margin:6px auto 12px!important;
  }

  .home-page .hero-copy-v2 p,
  .home-page .hero-secondary-copy{
    max-width:360px!important;
  }

  .home-page .hero-copy-v2 .hero-actions{
    margin-top:16px!important;
  }

  .home-page .hero-copy-v2 .hero-actions .btn{
    box-shadow:0 12px 25px rgba(6,20,38,.08)!important;
  }

  .home-page .hero-tags{
    margin-top:12px!important;
    padding-bottom:2px!important;
  }

  .home-page .hero-tags span{
    background:rgba(255,255,255,.86)!important;
    border-color:rgba(209,220,230,.92)!important;
    box-shadow:0 8px 18px rgba(6,20,38,.04)!important;
  }

  .home-page .hero-stage{
    display:none!important;
  }
}

@media (max-width:560px){
  .home-page .hero-v2{
    padding:10px 0 22px!important;
    background-position:center 54%!important;
  }

  .home-page .hero-copy-v2{
    padding:16px 12px 0!important;
    border-radius:22px!important;
  }

  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    max-width:330px!important;
  }
}


/* =========================================================
   July 2026 – Mobile homepage content order and real action icons
   ========================================================= */
.action-icon-svg{
  display:block;
  width:21px;
  height:21px;
}
.icon-btn .action-icon-svg{
  width:21px;
  height:21px;
}
.icon-btn.whatsapp .action-icon-svg{
  width:22px;
  height:22px;
}
.float-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.float-icon .action-icon-svg{
  width:18px;
  height:18px;
}
.float-label{
  display:inline-block;
}

@media (max-width:820px){
  /* Keep the requested sequence clean directly below the hero. */
  .home-page .service-marquee{
    display:none!important;
  }

  .home-page .local-seo-section{
    padding:52px 0 48px!important;
  }
  .home-page .local-seo-grid{
    display:block!important;
  }
  .home-page .local-seo-copy{
    max-width:100%!important;
  }
  .home-page .local-seo-copy h2{
    margin:10px 0 16px!important;
    font-size:clamp(34px,9vw,44px)!important;
    line-height:1.05!important;
  }
  .home-page .local-seo-copy p{
    font-size:13.5px!important;
    line-height:1.68!important;
  }
  .home-page .local-seo-points{
    display:none!important;
  }
  .home-page .local-seo-actions{
    display:grid!important;
    gap:9px!important;
    margin-top:21px!important;
  }
  .home-page .local-seo-actions .text-link{
    width:100%;
    min-height:46px;
    padding:0 15px;
    border:1px solid #d8e1e9;
    border-radius:13px;
    background:#fff;
    box-shadow:0 10px 24px rgba(6,20,38,.055);
    font-size:11px;
  }

  .home-page #mobile-services{
    padding-top:52px!important;
  }
  .home-page #mobile-work,
  .home-page #mobile-process,
  .home-page #mobile-experiences{
    scroll-margin-top:82px;
  }

  /* Make the actual phone and WhatsApp symbols unmistakable. */
  .header-actions .icon-btn{
    width:42px!important;
    height:42px!important;
  }
  .header-actions .icon-btn .action-icon-svg{
    width:20px!important;
    height:20px!important;
  }
  .header-actions .icon-btn.whatsapp .action-icon-svg{
    width:21px!important;
    height:21px!important;
  }

  .floating-actions{
    right:12px!important;
    bottom:12px!important;
    gap:10px!important;
  }
  .floating-actions .float-btn{
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
    padding:0!important;
    border-radius:50%!important;
    font-size:0!important;
  }
  .floating-actions .float-btn::before{
    display:none!important;
    content:none!important;
  }
  .floating-actions .float-label{
    display:none!important;
  }
  .floating-actions .float-icon .action-icon-svg{
    width:21px!important;
    height:21px!important;
  }
  .floating-actions .float-btn.whatsapp .action-icon-svg{
    width:23px!important;
    height:23px!important;
  }
}

@media (max-width:560px){
  .home-page .local-seo-section{
    padding:44px 0 42px!important;
  }
  .home-page #mobile-services{
    padding-top:46px!important;
  }
  .home-page #mobile-services .section-head,
  .home-page #mobile-work .section-head,
  .home-page #mobile-process .section-head,
  .home-page #mobile-experiences .section-head{
    margin-bottom:28px!important;
  }
}


/* =========================================================
   July 2026 – About mobile image background, section order,
   compact service-page heroes and image-free project inclusions
   ========================================================= */

/* Keep the requested About page sequence clear on every screen. */
.about-founder-section + .about-mission-section,
.about-mission-section + .about-value-section,
.about-value-section + .about-who-serve-section{
  scroll-margin-top:92px;
}

@media (max-width:820px){
  /* About hero: use the team image as a softly cropped background. */
  .about-page .about-who-hero{
    position:relative!important;
    min-height:auto!important;
    padding:24px 0 34px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 48%,rgba(255,255,255,.76) 100%),
      url("../images/about-zamm-team.webp") center bottom / 145% auto no-repeat!important;
  }
  .about-page .about-who-hero::before{
    display:none!important;
    content:none!important;
  }
  .about-page .about-who-hero::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    border-radius:0!important;
    background:linear-gradient(135deg,rgba(247,250,252,.34),rgba(251,245,231,.16))!important;
    pointer-events:none!important;
    z-index:0!important;
  }
  .about-page .about-who-grid{
    display:block!important;
    position:relative!important;
    z-index:2!important;
  }
  .about-page .about-who-hero .about-art{
    display:none!important;
  }
  .about-page .about-who-copy{
    position:relative!important;
    z-index:3!important;
    padding:22px 17px 20px!important;
    border:1px solid rgba(255,255,255,.86)!important;
    border-radius:24px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.67),rgba(255,255,255,.79))!important;
    box-shadow:0 18px 44px rgba(6,20,38,.08)!important;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }
  .about-page .about-who-copy h1,.about-page .about-who-copy .mobile-h1{
    margin:12px 0 14px!important;
    font-size:clamp(38px,10.4vw,45px)!important;
    line-height:1.01!important;
  }
  .about-page .about-who-copy > p{
    font-size:13.5px!important;
    line-height:1.58!important;
  }
  .about-page .about-who-copy .check-list{
    margin:17px 0 0!important;
    gap:9px!important;
  }
  .about-page .about-who-copy .check-list li{
    font-size:11.5px!important;
    line-height:1.42!important;
  }
  .about-page .about-who-actions{
    margin-top:18px!important;
  }

  /* About sections after the founder follow the requested sequence. */
  .about-page .about-mission-section{order:3}
  .about-page .about-value-section{order:4}
  .about-page .about-who-serve-section{order:5}

  /* Services overview: keep Included in Every Project cards text-only. */
  .services-page .included-project-section .deliverable-media{
    display:none!important;
  }
  .services-page .included-project-section .deliverable{
    min-height:0!important;
    padding:23px 21px!important;
  }
  .services-page .included-project-section .deliverables-grid{
    gap:13px!important;
  }


  /* Genuine call and WhatsApp symbols in header and floating actions. */
  .action-icon-svg{
    display:block!important;
    width:21px!important;
    height:21px!important;
  }
  .header-actions .icon-btn.whatsapp .action-icon-svg{
    width:22px!important;
    height:22px!important;
  }
  .floating-actions .float-btn::before{
    display:none!important;
    content:none!important;
  }
  .floating-actions .float-icon{
    display:grid!important;
    place-items:center!important;
  }
  .floating-actions .float-label{
    display:none!important;
  }
}

@media (max-width:560px){
  .about-page .about-who-hero{
    background-size:152% auto!important;
    background-position:center bottom!important;
  }
  .about-page .about-who-copy{
    padding:19px 14px 18px!important;
  }

}


/* =========================================================
   July 2026 – Exact mobile homepage section sequence with FAQs
   Hero → Website Development in Chennai → Our Services →
   Selected Website Work → How We Work → Website Experiences → FAQs
   ========================================================= */
@media (max-width:820px){
  .home-page main#mobile-main{
    display:flex!important;
    flex-direction:column!important;
  }

  .home-page #mobile-home-hero{order:1!important}
  .home-page #mobile-website-development-chennai{order:2!important}
  .home-page #mobile-services{order:3!important}
  .home-page #mobile-work{order:4!important}
  .home-page #mobile-process{order:5!important}
  .home-page #mobile-experiences{order:6!important}
  .home-page #mobile-frequently-asked-questions{order:7!important}

  /* Keep the mobile homepage limited to the requested section flow. */
  .home-page main#mobile-main > .service-marquee,
  .home-page main#mobile-main > .home-cta-section,
  .home-page main#mobile-main > .home-reviews-section{
    display:none!important;
  }

  .home-page #mobile-website-development-chennai,
  .home-page #mobile-services,
  .home-page #mobile-work,
  .home-page #mobile-process,
  .home-page #mobile-experiences,
  .home-page #mobile-frequently-asked-questions{
    scroll-margin-top:82px;
  }

  .home-page #mobile-website-development-chennai{padding-top:48px!important}
  .home-page #mobile-services{padding-top:48px!important}
  .home-page #mobile-work{padding-top:48px!important}
  .home-page #mobile-process{padding-top:48px!important}
  .home-page #mobile-experiences{padding-top:48px!important}
  .home-page #mobile-frequently-asked-questions{padding-top:48px!important}
}

@media (max-width:560px){
  .home-page #mobile-website-development-chennai,
  .home-page #mobile-services,
  .home-page #mobile-work,
  .home-page #mobile-process,
  .home-page #mobile-experiences,
  .home-page #mobile-frequently-asked-questions{
    padding-top:42px!important;
    padding-bottom:42px!important;
  }
}


/* =========================================================
   July 2026 – Homepage hero two-line description
   Keeps the desktop CTA buttons in their existing position.
   ========================================================= */
@media (min-width:1051px){
  .home-page .hero-secondary-copy.hero-description-spacer{
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    user-select:none!important;
  }
}

@media (max-width:1050px){
  .home-page .hero-secondary-copy.hero-description-spacer{
    display:none!important;
  }
}

/* =========================================================
   July 2026 – Lower the visible two-line hero description
   The invisible spacer remains in the layout, so CTA buttons
   and benefit tags keep their existing desktop position.
   ========================================================= */
@media (min-width:1051px){
  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    position:relative!important;
    transform:translateY(34px)!important;
  }
}

@media (min-width:1051px) and (max-height:820px){
  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    transform:translateY(28px)!important;
  }
}


/* =========================================================
   July 2026 – Bright Zamm gold-and-navy laptop backgrounds
   Uses soft gold, navy and white gradients throughout desktop
   pages while keeping text contrast, cards and mobile layouts clear.
   ========================================================= */
.hero-mobile-description{display:none}

@media (min-width:1051px){
  html{
    background:#f6f9fc;
  }

  body{
    background:
      radial-gradient(circle at 8% 8%,rgba(212,167,59,.13),transparent 25%),
      radial-gradient(circle at 92% 22%,rgba(6,20,38,.08),transparent 26%),
      linear-gradient(135deg,#fffdf7 0%,#f7fbff 48%,#fff8e8 100%)!important;
  }

  .site-header{
    background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,252,242,.97) 52%,rgba(247,250,253,.98))!important;
    border-bottom-color:rgba(166,116,18,.16)!important;
    box-shadow:0 10px 34px rgba(6,20,38,.055);
  }

  main{
    position:relative;
    isolation:isolate;
    background:
      linear-gradient(120deg,rgba(212,167,59,.035),transparent 30%,rgba(12,35,64,.025) 70%,rgba(212,167,59,.04))!important;
  }

  .home-page .hero-v2,
  .about-page .about-who-hero,
  .service-detail-hero,
  .page-hero,
  .page-hero-modern,
  .simple-page-intro,
  .compact-page-intro{
    background:
      radial-gradient(circle at 83% 16%,rgba(212,167,59,.25),transparent 27%),
      radial-gradient(circle at 7% 88%,rgba(12,35,64,.11),transparent 28%),
      linear-gradient(132deg,#fffefb 0%,#f7fbff 50%,#fff4d8 100%)!important;
  }

  .home-page .hero-v2::before,
  .about-page .about-who-hero::before,
  .service-detail-hero::before,
  .page-hero::before,
  .simple-page-intro::before,
  .compact-page-intro::before{
    opacity:.7;
  }

  main > .section:not(.dark),
  main > section.section:not(.dark),
  main > .page-content-section,
  main > .local-seo-section,
  main > .projects-section,
  main > .website-showcase{
    background:
      radial-gradient(circle at 94% 8%,rgba(212,167,59,.105),transparent 22%),
      radial-gradient(circle at 5% 92%,rgba(12,35,64,.055),transparent 24%),
      linear-gradient(135deg,#fffefb 0%,#f8fbfe 56%,#fffaf0 100%)!important;
  }

  main > .section.soft,
  main > section.soft,
  main > .home-process-section,
  main > .home-faq-section,
  main > .home-reviews-section,
  main > .included-project-section{
    background:
      radial-gradient(circle at 12% 12%,rgba(212,167,59,.14),transparent 24%),
      radial-gradient(circle at 90% 88%,rgba(6,20,38,.07),transparent 26%),
      linear-gradient(125deg,#fff8e8 0%,#f7fbff 52%,#fffdf8 100%)!important;
  }

  main > .section:nth-of-type(3n):not(.dark){
    background:
      radial-gradient(circle at 86% 14%,rgba(12,35,64,.075),transparent 25%),
      radial-gradient(circle at 8% 88%,rgba(212,167,59,.13),transparent 24%),
      linear-gradient(135deg,#f7fbff 0%,#fffefb 52%,#fff5dd 100%)!important;
  }

  .article-page main > .section,
  .article-page .page-content-section,
  .contact-page .page-content-section,
  .blog-page .blog-content-start,
  .services-page .services-content-start{
    background:
      radial-gradient(circle at 88% 12%,rgba(212,167,59,.11),transparent 25%),
      radial-gradient(circle at 8% 82%,rgba(12,35,64,.055),transparent 25%),
      linear-gradient(135deg,#fffdf8 0%,#f7fbff 54%,#fff9ec 100%)!important;
  }

  .section-head h2,
  .page-hero h1,
  .simple-page-intro h1,
  .service-detail-hero h1,
  .about-who-copy h1,
  .page-hero .mobile-h1,
  .simple-page-intro .mobile-h1,
  .service-detail-hero .mobile-h1,
  .about-who-copy .mobile-h1{
    text-shadow:0 2px 0 rgba(255,255,255,.72);
  }

  .hero-grid-lines{
    opacity:.52!important;
  }

  .footer{
    background:
      radial-gradient(circle at 78% 0%,rgba(212,167,59,.16),transparent 28%),
      linear-gradient(135deg,#041120,#081c33 58%,#102a48)!important;
  }
}

/* Restore the fuller four-line homepage description on mobile. */
@media (max-width:820px){
  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy):not(.hero-mobile-description),
  .home-page .hero-secondary-copy.hero-description-spacer{
    display:none!important;
  }

  .home-page .hero-mobile-description{
    display:block!important;
    max-width:380px!important;
    margin:13px auto 0!important;
    color:#566679!important;
    font-size:13px!important;
    line-height:1.48!important;
    font-weight:500!important;
    text-align:center!important;
  }

  .home-page .hero-mobile-description span{
    display:block;
  }
}

@media (max-width:560px){
  .home-page .hero-mobile-description{
    max-width:338px!important;
    font-size:12.4px!important;
    line-height:1.5!important;
    letter-spacing:-.01em;
  }
}


/* =========================================================
   July 2026 – Balanced E-Commerce service hero
   Matches the fuller, premium proportions of the Google Business hero.
   ========================================================= */
@media (min-width:1051px){
  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero{
    padding:38px 0 46px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-grid{
    grid-template-columns:minmax(0,.94fr) minmax(520px,1.06fr)!important;
    gap:50px!important;
    align-items:center!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-grid>div:first-child{
    max-width:760px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero h1,body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero .mobile-h1{
    max-width:760px!important;
    margin:0 0 18px!important;
    font-size:clamp(58px,5.25vw,76px)!important;
    line-height:.99!important;
    letter-spacing:-.052em!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero p{
    max-width:720px!important;
    margin:0!important;
    font-size:16px!important;
    line-height:1.72!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-hero-extra{
    margin-top:10px!important;
    font-size:15px!important;
    line-height:1.65!important;
    color:#415166!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .ecommerce-growth-copy{
    margin-top:7px!important;
    color:#26384d!important;
    font-size:15px!important;
    line-height:1.62!important;
    font-weight:700!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-hero-points{
    margin-top:18px!important;
    gap:9px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-hero-points li{
    font-size:13px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero .hero-actions{
    margin-top:23px!important;
    flex-wrap:wrap!important;
    gap:12px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero .hero-actions .btn{
    min-height:54px!important;
    padding-inline:26px!important;
    font-size:13px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-image{
    height:520px!important;
    min-height:0!important;
  }
}

@media (min-width:1051px) and (max-height:780px){
  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero{
    padding:28px 0 34px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero h1,body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero .mobile-h1{
    font-size:clamp(52px,4.75vw,68px)!important;
    margin-bottom:14px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero p{
    font-size:14.5px!important;
    line-height:1.55!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-hero-extra,
  body[data-page-slug="ecommerce-website-development.html"] .ecommerce-growth-copy{
    font-size:13.5px!important;
    line-height:1.5!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-hero-points{
    margin-top:13px!important;
    gap:6px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero .hero-actions{
    margin-top:16px!important;
  }

  body[data-page-slug="ecommerce-website-development.html"] .service-detail-image{
    height:490px!important;
  }
}

/* =========================================================
   July 2026 – Compact About hero on mobile
   Removes the unused top gap and keeps the Contact Us button
   visible within the opening viewport without changing desktop.
   ========================================================= */
@media (max-width:820px){
  .about-page .about-who-hero{
    padding:2px 0 18px!important;
    min-height:auto!important;
    align-items:flex-start!important;
  }

  .about-page .about-who-grid{
    margin-top:0!important;
    padding-top:0!important;
  }

  .about-page .about-who-copy{
    margin-top:0!important;
    padding:10px 14px 12px!important;
    border-radius:21px!important;
  }

  .about-page .about-who-copy h1,.about-page .about-who-copy .mobile-h1{
    margin:0 0 8px!important;
    font-size:clamp(33px,9.3vw,38px)!important;
    line-height:.99!important;
    letter-spacing:-.052em!important;
  }

  .about-page .about-who-copy > p{
    margin:0 0 7px!important;
    font-size:12.25px!important;
    line-height:1.39!important;
  }

  .about-page .about-who-copy .check-list{
    margin:9px 0 0!important;
    gap:4px!important;
  }

  .about-page .about-who-copy .check-list li{
    gap:8px!important;
    font-size:10.35px!important;
    line-height:1.25!important;
  }

  .about-page .about-who-copy .check-list li::before{
    width:20px!important;
    height:20px!important;
    flex-basis:20px!important;
    font-size:10px!important;
  }

  .about-page .about-who-actions{
    margin-top:10px!important;
  }

  .about-page .about-who-actions .btn{
    min-height:47px!important;
    padding-inline:22px!important;
    font-size:12.5px!important;
  }
}

@media (max-width:390px){
  .about-page .about-who-hero{
    padding-top:0!important;
  }

  .about-page .about-who-copy{
    padding:8px 12px 10px!important;
  }

  .about-page .about-who-copy h1,.about-page .about-who-copy .mobile-h1{
    font-size:33px!important;
  }
}


/* =========================================================
   July 2026 – Spacious, gap-free homepage service ticker
   and better-proportioned About hero typography on mobile
   ========================================================= */
.home-page .service-marquee{
  overflow:hidden!important;
  padding:17px 0!important;
}
.home-page .marquee-track{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  width:max-content!important;
  min-width:max-content!important;
  white-space:nowrap!important;
  animation:zammContinuousTicker 32s linear infinite!important;
  will-change:transform;
}
.home-page .marquee-group{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  gap:18px!important;
  padding:0 34px!important;
}
.home-page .marquee-track span{
  display:inline-block!important;
  font-size:12.5px!important;
  font-weight:850!important;
  letter-spacing:.135em!important;
  line-height:1.3!important;
}
.home-page .marquee-track i{
  display:inline-grid!important;
  place-items:center!important;
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
  font-size:11px!important;
  line-height:1!important;
}
.home-page .service-marquee:hover .marquee-track{
  animation-play-state:running!important;
}
@keyframes zammContinuousTicker{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-20%,0,0)}
}

@media (max-width:820px){
  .about-page .about-who-hero{
    min-height:calc(100svh - 68px)!important;
    padding:0 0 12px!important;
  }
  .about-page .about-who-grid{
    min-height:calc(100svh - 80px)!important;
  }
  .about-page .about-who-copy{
    display:flex!important;
    flex-direction:column!important;
    min-height:calc(100svh - 82px)!important;
    padding:10px 14px 12px!important;
  }
  .about-page .about-who-copy h1,.about-page .about-who-copy .mobile-h1{
    margin:0 0 9px!important;
    font-size:clamp(35px,9.7vw,40px)!important;
    line-height:1!important;
  }
  .about-page .about-who-copy > p{
    margin:0 0 8px!important;
    font-size:13px!important;
    line-height:1.44!important;
  }
  .about-page .about-who-copy .check-list{
    margin:9px 0 0!important;
    gap:5px!important;
  }
  .about-page .about-who-copy .check-list li{
    font-size:10.8px!important;
    line-height:1.3!important;
  }
  .about-page .about-who-actions{
    margin-top:auto!important;
    padding-top:12px!important;
  }
  .about-page .about-who-actions .btn{
    min-height:50px!important;
    font-size:13px!important;
  }
}

@media (max-width:390px){
  .about-page .about-who-copy h1,.about-page .about-who-copy .mobile-h1{
    font-size:35px!important;
  }
  .about-page .about-who-copy > p{
    font-size:12.7px!important;
    line-height:1.41!important;
  }
  .about-page .about-who-copy .check-list li{
    font-size:10.5px!important;
  }
}


/* =========================================================
   July 2026 – Mobile spacing refinement and service hero CTA visibility
   ========================================================= */
@media (max-width:820px){
  /* About hero: distribute the copy naturally so the empty area above
     the Contact Us button becomes useful breathing room. */
  .about-page .about-who-copy{
    justify-content:space-between!important;
    gap:0!important;
  }
  .about-page .about-who-copy h1,.about-page .about-who-copy .mobile-h1{
    margin:0!important;
  }
  .about-page .about-who-copy > p{
    margin:0!important;
    font-size:13.2px!important;
    line-height:1.47!important;
  }
  .about-page .about-who-copy .check-list{
    margin:0!important;
    gap:7px!important;
  }
  .about-page .about-who-copy .check-list li{
    font-size:10.9px!important;
    line-height:1.34!important;
  }
  .about-page .about-who-actions{
    margin-top:0!important;
    padding-top:0!important;
  }

  /* Services overview: pull the first service image/card upward and
     remove the unnecessary blank band below the introduction. */
  .services-page .simple-services-intro{
    padding-bottom:10px!important;
  }
  .services-page .simple-page-intro + .page-content-section,
  .services-page .services-content-start{
    padding-top:10px!important;
  }
  .services-page .services-content-start .services-grid{
    margin-top:0!important;
  }

  /* All six service detail pages: the removed three-point list gives
     the calls to action room to appear in the opening viewport. */
  .service-page .service-detail-hero{
    padding:14px 0 24px!important;
  }
  .service-page .service-detail-grid{
    grid-template-columns:1fr!important;
    gap:16px!important;
    min-height:auto!important;
    align-items:start!important;
  }
  .service-page .service-detail-grid > div:first-child{
    max-width:none!important;
  }
  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
    margin:0 0 10px!important;
    font-size:clamp(37px,10.5vw,44px)!important;
    line-height:1.01!important;
  }
  .service-page .service-detail-hero p{
    margin:0 0 7px!important;
    font-size:13.2px!important;
    line-height:1.47!important;
  }
  .service-page .service-hero-extra,
  .service-page .service-local-context{
    margin-top:0!important;
  }
  .service-page .service-detail-hero .hero-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin-top:11px!important;
  }
  .service-page .service-detail-hero .hero-actions .btn{
    width:100%!important;
    min-height:46px!important;
    padding:0 9px!important;
    font-size:10.6px!important;
    white-space:nowrap!important;
  }
  .service-page .service-detail-image{
    height:300px!important;
    min-height:300px!important;
    margin-top:-2px!important;
  }
}

@media (max-width:390px){
  .about-page .about-who-copy > p{
    font-size:12.85px!important;
    line-height:1.44!important;
  }
  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
    font-size:37px!important;
  }
  .service-page .service-detail-hero p{
    font-size:12.8px!important;
    line-height:1.44!important;
  }
  .service-page .service-detail-hero .hero-actions .btn{
    font-size:10.1px!important;
  }
}

/* =========================================================
   July 2026 – Larger laptop typography for all service heroes
   Keeps the left content visually balanced with the hero image.
   ========================================================= */
@media (min-width:1051px){
  .service-page .service-detail-hero{
    padding:30px 0 34px!important;
  }

  .service-page .service-detail-grid{
    grid-template-columns:minmax(0,.98fr) minmax(560px,1.02fr)!important;
    gap:50px!important;
    min-height:600px!important;
    align-items:center!important;
  }

  .service-page .service-detail-grid > div:first-child{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    max-width:760px!important;
    min-height:540px!important;
  }

  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
    max-width:760px!important;
    margin:0 0 20px!important;
    font-size:clamp(58px,4.75vw,76px)!important;
    line-height:1!important;
    letter-spacing:-.054em!important;
  }

  .service-page .service-detail-hero p{
    max-width:750px!important;
    margin:0 0 12px!important;
    font-size:17.5px!important;
    line-height:1.62!important;
  }

  .service-page .service-detail-hero .service-hero-extra,
  .service-page .service-detail-hero .service-local-context{
    margin-top:0!important;
    font-size:16.25px!important;
    line-height:1.58!important;
  }

  .service-page .service-detail-hero .service-local-context{
    margin-bottom:0!important;
    font-weight:700!important;
  }

  .service-page .service-detail-hero .hero-actions{
    margin-top:20px!important;
    gap:13px!important;
    flex-wrap:wrap!important;
  }

  .service-page .service-detail-hero .hero-actions .btn{
    min-height:56px!important;
    padding-inline:27px!important;
    font-size:14px!important;
  }

  .service-page .service-detail-image{
    height:540px!important;
    min-height:540px!important;
  }
}

@media (min-width:1051px) and (max-height:780px){
  .service-page .service-detail-hero{
    padding:20px 0 24px!important;
  }

  .service-page .service-detail-grid{
    min-height:540px!important;
  }

  .service-page .service-detail-grid > div:first-child{
    min-height:500px!important;
  }

  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
    font-size:clamp(52px,4.25vw,66px)!important;
    margin-bottom:15px!important;
  }

  .service-page .service-detail-hero p{
    margin-bottom:9px!important;
    font-size:15.75px!important;
    line-height:1.52!important;
  }

  .service-page .service-detail-hero .service-hero-extra,
  .service-page .service-detail-hero .service-local-context{
    font-size:14.75px!important;
    line-height:1.5!important;
  }

  .service-page .service-detail-hero .hero-actions{
    margin-top:15px!important;
  }

  .service-page .service-detail-hero .hero-actions .btn{
    min-height:52px!important;
  }

  .service-page .service-detail-image{
    height:500px!important;
    min-height:500px!important;
  }
}

/* =========================================================
   July 2026 – Larger mobile typography for all service heroes
   Keeps the CTA row at the bottom of the opening mobile view.
   ========================================================= */
@media (max-width:820px){
  .service-page .service-detail-hero{
    padding:0 0 18px!important;
  }

  .service-page .service-detail-grid{
    gap:12px!important;
  }

  .service-page .service-detail-grid > div:first-child{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    min-height:calc(100svh - 74px)!important;
    padding:14px 0 12px!important;
  }

  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
    margin:0 0 13px!important;
    font-size:clamp(40px,11.5vw,47px)!important;
    line-height:.99!important;
    letter-spacing:-.052em!important;
  }

  .service-page .service-detail-hero p,
  .service-page .service-detail-hero .service-hero-extra,
  .service-page .service-detail-hero .service-local-context{
    margin:0 0 9px!important;
    font-size:14.15px!important;
    line-height:1.47!important;
  }

  .service-page .service-detail-hero .service-local-context{
    font-weight:700!important;
  }

  .service-page .service-detail-hero .hero-actions{
    margin-top:auto!important;
    padding-top:13px!important;
    gap:8px!important;
  }

  .service-page .service-detail-hero .hero-actions .btn{
    min-height:50px!important;
    padding:0 10px!important;
    font-size:11.15px!important;
  }

  .service-page .service-detail-image{
    margin-top:0!important;
  }
}

@media (max-width:390px) and (max-height:700px){
  .service-page .service-detail-grid > div:first-child{
    min-height:calc(100svh - 70px)!important;
    padding-top:12px!important;
  }

  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
    font-size:39px!important;
    margin-bottom:11px!important;
  }

  .service-page .service-detail-hero p,
  .service-page .service-detail-hero .service-hero-extra,
  .service-page .service-detail-hero .service-local-context{
    margin-bottom:7px!important;
    font-size:13.55px!important;
    line-height:1.43!important;
  }

  .service-page .service-detail-hero .hero-actions{
    padding-top:10px!important;
  }

  .service-page .service-detail-hero .hero-actions .btn{
    min-height:48px!important;
    font-size:10.8px!important;
  }
}

/* =========================================================
   July 2026 – Balanced mobile spacing for service hero text
   Distributes the available hero height between the heading,
   descriptions and CTA row instead of leaving one empty gap.
   ========================================================= */
@media (max-width:820px){
  .service-page .service-detail-grid > div:first-child{
    justify-content:space-between!important;
    gap:0!important;
  }

  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
    margin:0!important;
  }

  .service-page .service-detail-hero p,
  .service-page .service-detail-hero .service-hero-extra,
  .service-page .service-detail-hero .service-local-context{
    margin:0!important;
    line-height:1.54!important;
  }

  .service-page .service-detail-hero .hero-actions{
    margin-top:0!important;
    padding-top:0!important;
  }
}

@media (max-width:390px) and (max-height:700px){
  .service-page .service-detail-grid > div:first-child{
    justify-content:space-between!important;
  }

  .service-page .service-detail-hero h1,
  .service-page .service-detail-hero p,
  .service-page .service-detail-hero .service-hero-extra,
  .service-page .service-detail-hero .service-local-context,
  .service-page .service-detail-hero .hero-actions,.service-page .service-detail-hero .mobile-h1{
    margin-top:0!important;
    margin-bottom:0!important;
  }
}


/* Mobile service hero background image integration */
@media (max-width: 768px) {
  .service-page .service-detail-hero{
    position: relative;
    overflow: hidden;
    padding: 18px 0 26px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  .service-page .service-detail-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.32) 18%, rgba(255,255,255,0.62) 42%, rgba(255,255,255,0.82) 68%, rgba(255,255,255,0.94) 100%) !important;
    z-index: 0;
  }
  .service-page .service-detail-grid{
    position: relative;
    z-index: 1;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    align-items: start !important;
  }
  .service-page .service-detail-grid > div:first-child{
    max-width: none !important;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 24px;
    box-shadow: 0 18px 38px rgba(6,20,38,0.12);
    padding: 18px 14px 16px !important;
  }
  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
    font-size: clamp(34px, 10vw, 46px) !important;
    line-height: 0.98 !important;
    margin: 2px 0 14px !important;
  }
  .service-page .service-detail-hero p{
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #45566a !important;
  }
  .service-page .service-detail-hero .hero-actions{
    margin-top: 14px !important;
  }
  .service-page .service-detail-hero .hero-actions .btn{
    min-height: 48px;
  }
  .service-page .service-detail-image{
    display: none !important;
  }
  body[data-page-slug="website-development.html"] .service-detail-hero{
    background-image: url("https://images.pexels.com/photos/34804001/pexels-photo-34804001.jpeg?auto=compress&cs=tinysrgb&w=900&fm=webp") !important;
  }
  body[data-page-slug="seo-optimization.html"] .service-detail-hero{
    background-image: url("https://images.pexels.com/photos/12969403/pexels-photo-12969403.jpeg?auto=compress&cs=tinysrgb&w=900&fm=webp") !important;
  }
  body[data-page-slug="landing-page-development.html"] .service-detail-hero{
    background-image: url("https://images.pexels.com/photos/6483582/pexels-photo-6483582.jpeg?auto=compress&cs=tinysrgb&w=900&fm=webp") !important;
  }
  body[data-page-slug="google-business-service-website.html"] .service-detail-hero{
    background-image: url("https://images.pexels.com/photos/7278819/pexels-photo-7278819.jpeg?auto=compress&cs=tinysrgb&w=900&fm=webp") !important;
  }
  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero{
    background-image: url("https://images.pexels.com/photos/29502362/pexels-photo-29502362.jpeg?auto=compress&cs=tinysrgb&w=900&fm=webp") !important;
  }
  body[data-page-slug="website-redesign-maintenance.html"] .service-detail-hero{
    background-image: url("https://images.pexels.com/photos/3194519/pexels-photo-3194519.jpeg?auto=compress&cs=tinysrgb&w=900&fm=webp") !important;
  }
}

/* =========================================================
   Mobile service heroes — full background image, no white card
   ========================================================= */
@media (max-width:768px){
  .service-page .service-detail-hero{
    min-height:calc(100svh - 68px)!important;
    display:flex!important;
    align-items:stretch!important;
    padding:14px 0 22px!important;
  }

  .service-page .service-detail-hero::before{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.50) 0%,
        rgba(255,255,255,.60) 24%,
        rgba(255,255,255,.69) 52%,
        rgba(255,255,255,.80) 78%,
        rgba(255,255,255,.90) 100%)!important;
  }

  .service-page .service-detail-grid{
    width:100%!important;
    min-height:100%!important;
    align-items:stretch!important;
  }

  .service-page .service-detail-grid > div:first-child{
    min-height:calc(100svh - 104px)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    padding:12px 4px 10px!important;
  }

  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
    color:var(--navy)!important;
    text-shadow:0 1px 0 rgba(255,255,255,.95),0 3px 18px rgba(255,255,255,.78)!important;
  }

  .service-page .service-detail-hero p,
  .service-page .service-detail-hero .service-hero-extra,
  .service-page .service-detail-hero .service-local-context{
    color:#25384c!important;
    text-shadow:0 1px 0 rgba(255,255,255,.95),0 2px 12px rgba(255,255,255,.82)!important;
  }

  .service-page .service-detail-hero .service-local-context{
    color:#13283d!important;
  }

  .service-page .service-detail-hero .hero-actions{
    margin-top:14px!important;
    padding-top:8px!important;
  }

  .service-page .service-detail-hero .hero-actions .btn{
    box-shadow:0 12px 28px rgba(6,20,38,.18)!important;
  }

  body[data-page-slug="website-development.html"] .service-detail-hero{background-position:center 42%!important}
  body[data-page-slug="seo-optimization.html"] .service-detail-hero{background-position:center 44%!important}
  body[data-page-slug="landing-page-development.html"] .service-detail-hero{background-position:center 46%!important}
  body[data-page-slug="google-business-service-website.html"] .service-detail-hero{background-position:center 46%!important}
  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero{background-position:center 44%!important}
  body[data-page-slug="website-redesign-maintenance.html"] .service-detail-hero{background-position:center 43%!important}
}


/* =========================================================
   July 2026 – High-contrast service hero backgrounds
   Clear white typography over service imagery on mobile and laptop.
   ========================================================= */
.service-page .service-detail-hero{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

.service-page .service-detail-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
}

.service-page .service-detail-grid{
  position:relative!important;
  z-index:1!important;
}

.service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
  color:#fff!important;
  text-shadow:0 3px 18px rgba(0,0,0,.45)!important;
}

.service-page .service-detail-hero p,
.service-page .service-detail-hero .service-hero-extra,
.service-page .service-detail-hero .service-local-context{
  color:#f4f7fb!important;
  text-shadow:0 2px 12px rgba(0,0,0,.52)!important;
}

.service-page .service-detail-hero .service-local-context{
  color:#fff!important;
  font-weight:750!important;
}

body[data-page-slug="website-development.html"] .service-detail-hero{
  background-image:url("https://images.pexels.com/photos/34804001/pexels-photo-34804001.jpeg?auto=compress&cs=tinysrgb&w=900&fm=webp")!important;
}
body[data-page-slug="seo-optimization.html"] .service-detail-hero{
  background-image:url("https://images.pexels.com/photos/12969403/pexels-photo-12969403.jpeg?auto=compress&cs=tinysrgb&w=900&fm=webp")!important;
}
body[data-page-slug="landing-page-development.html"] .service-detail-hero{
  background-image:url("https://images.pexels.com/photos/6483582/pexels-photo-6483582.jpeg?auto=compress&cs=tinysrgb&w=900&fm=webp")!important;
}
body[data-page-slug="google-business-service-website.html"] .service-detail-hero{
  background-image:url("https://images.pexels.com/photos/7278819/pexels-photo-7278819.jpeg?auto=compress&cs=tinysrgb&w=900&fm=webp")!important;
}
body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero{
  background-image:url("https://images.pexels.com/photos/29502362/pexels-photo-29502362.jpeg?auto=compress&cs=tinysrgb&w=900&fm=webp")!important;
}
body[data-page-slug="website-redesign-maintenance.html"] .service-detail-hero{
  background-image:url("https://images.pexels.com/photos/3194519/pexels-photo-3194519.jpeg?auto=compress&cs=tinysrgb&w=900&fm=webp")!important;
}

@media (min-width:769px){
  .service-page .service-detail-hero{
    min-height:calc(100svh - 84px)!important;
    display:flex!important;
    align-items:center!important;
    padding:70px 0!important;
    background-position:center center!important;
  }

  .service-page .service-detail-hero::before{
    background:
      linear-gradient(90deg,
        rgba(3,15,29,.94) 0%,
        rgba(3,15,29,.86) 38%,
        rgba(3,15,29,.56) 66%,
        rgba(3,15,29,.26) 100%)!important;
  }

  .service-page .service-detail-grid{
    display:block!important;
    min-height:0!important;
  }

  .service-page .service-detail-grid > div:first-child{
    max-width:760px!important;
    padding:34px 34px 32px!important;
    border-radius:30px!important;
    background:linear-gradient(135deg,rgba(6,20,38,.52),rgba(6,20,38,.18))!important;
    border:1px solid rgba(255,255,255,.20)!important;
    box-shadow:0 28px 70px rgba(0,0,0,.24)!important;
    backdrop-filter:blur(5px)!important;
    -webkit-backdrop-filter:blur(5px)!important;
  }

  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
    max-width:740px!important;
    font-size:clamp(58px,5.25vw,82px)!important;
    line-height:.98!important;
    letter-spacing:-.052em!important;
    margin:0 0 24px!important;
  }

  .service-page .service-detail-hero p{
    max-width:710px!important;
    font-size:17px!important;
    line-height:1.62!important;
    margin:0 0 15px!important;
  }

  .service-page .service-detail-hero .hero-actions{
    margin-top:26px!important;
  }

  .service-page .service-detail-hero .hero-actions .btn{
    min-height:58px!important;
    padding-inline:28px!important;
    font-size:14px!important;
    box-shadow:0 14px 32px rgba(0,0,0,.20)!important;
  }

  .service-page .service-detail-image{
    display:none!important;
  }

  body[data-page-slug="website-development.html"] .service-detail-hero{background-position:center 48%!important}
  body[data-page-slug="seo-optimization.html"] .service-detail-hero{background-position:center 44%!important}
  body[data-page-slug="landing-page-development.html"] .service-detail-hero{background-position:center 48%!important}
  body[data-page-slug="google-business-service-website.html"] .service-detail-hero{background-position:center 46%!important}
  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero{background-position:center 50%!important}
  body[data-page-slug="website-redesign-maintenance.html"] .service-detail-hero{background-position:center 45%!important}
}

@media (max-width:768px){
  .service-page .service-detail-hero{
    min-height:calc(100svh - 68px)!important;
    display:flex!important;
    align-items:stretch!important;
    padding:12px 0 20px!important;
    background-size:cover!important;
  }

  .service-page .service-detail-hero::before{
    background:
      linear-gradient(180deg,
        rgba(3,15,29,.63) 0%,
        rgba(3,15,29,.58) 38%,
        rgba(3,15,29,.68) 72%,
        rgba(3,15,29,.80) 100%)!important;
  }

  .service-page .service-detail-grid{
    width:100%!important;
    min-height:100%!important;
    display:block!important;
  }

  .service-page .service-detail-grid > div:first-child{
    min-height:calc(100svh - 102px)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    max-width:none!important;
    padding:14px 4px 10px!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .service-page .service-detail-hero h1,.service-page .service-detail-hero .mobile-h1{
    color:#fff!important;
    font-size:clamp(38px,10.8vw,48px)!important;
    line-height:.98!important;
    margin:0!important;
    text-shadow:0 3px 16px rgba(0,0,0,.68)!important;
  }

  .service-page .service-detail-hero p,
  .service-page .service-detail-hero .service-hero-extra,
  .service-page .service-detail-hero .service-local-context{
    color:#f8fafc!important;
    font-size:14px!important;
    line-height:1.55!important;
    margin:0!important;
    text-shadow:0 2px 9px rgba(0,0,0,.78)!important;
  }

  .service-page .service-detail-hero .service-local-context{
    color:#fff!important;
    font-weight:800!important;
  }

  .service-page .service-detail-hero .hero-actions{
    margin-top:12px!important;
    padding-top:8px!important;
  }

  .service-page .service-detail-hero .hero-actions .btn{
    min-height:50px!important;
    box-shadow:0 13px 28px rgba(0,0,0,.28)!important;
  }

  .service-page .service-detail-hero .hero-actions .btn-light{
    background:rgba(255,255,255,.96)!important;
    color:var(--navy)!important;
    border-color:rgba(255,255,255,.85)!important;
  }

  .service-page .service-detail-image{
    display:none!important;
  }

  body[data-page-slug="website-development.html"] .service-detail-hero{background-position:center 44%!important}
  body[data-page-slug="seo-optimization.html"] .service-detail-hero{background-position:center 42%!important}
  body[data-page-slug="landing-page-development.html"] .service-detail-hero{background-position:center 48%!important}
  body[data-page-slug="google-business-service-website.html"] .service-detail-hero{background-position:center 46%!important}
  body[data-page-slug="ecommerce-website-development.html"] .service-detail-hero{background-position:center 46%!important}
  body[data-page-slug="website-redesign-maintenance.html"] .service-detail-hero{background-position:center 44%!important}
}

/* =========================================================
   July 2026 – Homepage and About hero backgrounds without white cards
   The hero photos now fill the complete section on mobile and laptop.
   ========================================================= */
.home-page .hero-v2,
.about-page .about-who-hero{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
}

.home-page .hero-v2{
  background-image:url("../images/home-hero-zamm-office-logo.webp")!important;
}

.about-page .about-who-hero{
  background-image:url("../images/about-zamm-team.webp")!important;
}

.home-page .hero-v2::before,
.about-page .about-who-hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}

.home-page .hero-v2::after,
.about-page .about-who-hero::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  z-index:0!important;
  pointer-events:none!important;
}

.home-page .hero-grid-v2,
.about-page .about-who-grid{
  position:relative!important;
  z-index:2!important;
}

.home-page .hero-copy-v2,
.about-page .about-who-copy{
  position:relative!important;
  z-index:3!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.home-page .hero-stage,
.about-page .about-who-hero .about-art{
  display:none!important;
}

.home-page .hero-copy-v2 h1,
.about-page .about-who-copy h1,.home-page .hero-copy-v2 .mobile-h1,
.about-page .about-who-copy .mobile-h1{
  color:#fff!important;
  text-shadow:0 3px 20px rgba(0,0,0,.62)!important;
}

.home-page .hero-copy-v2 h1 span,.home-page .hero-copy-v2 .mobile-h1 span{
  color:#e5b23a!important;
  text-shadow:0 3px 20px rgba(0,0,0,.65)!important;
}

.home-page .hero-copy-v2 > p,
.home-page .hero-secondary-copy,
.about-page .about-who-copy > p{
  color:#f5f8fb!important;
  text-shadow:0 2px 12px rgba(0,0,0,.72)!important;
}

.about-page .about-who-copy .check-list li{
  color:#fff!important;
  text-shadow:0 2px 10px rgba(0,0,0,.68)!important;
}

.home-page .hero-tags span{
  color:#fff!important;
  background:rgba(6,20,38,.48)!important;
  border:1px solid rgba(255,255,255,.26)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
}

.home-page .hero-copy-v2 .btn-light,
.about-page .about-who-copy .btn-light{
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(255,255,255,.72)!important;
}

@media (min-width:821px){
  .home-page .hero-v2,
  .about-page .about-who-hero{
    min-height:calc(100svh - 84px)!important;
    display:flex!important;
    align-items:center!important;
    padding:58px 0!important;
  }

  .home-page .hero-v2{
    background-position:center 47%!important;
  }

  .about-page .about-who-hero{
    background-position:center 45%!important;
  }

  .home-page .hero-v2::before{
    background:linear-gradient(90deg,
      rgba(3,14,27,.94) 0%,
      rgba(3,14,27,.84) 42%,
      rgba(3,14,27,.46) 70%,
      rgba(3,14,27,.18) 100%)!important;
  }

  .about-page .about-who-hero::before{
    background:linear-gradient(90deg,
      rgba(3,14,27,.92) 0%,
      rgba(3,14,27,.82) 44%,
      rgba(3,14,27,.42) 72%,
      rgba(3,14,27,.20) 100%)!important;
  }

  .home-page .hero-v2::after,
  .about-page .about-who-hero::after{
    background:linear-gradient(180deg,rgba(6,20,38,.04),rgba(6,20,38,.16))!important;
  }

  .home-page .hero-grid-v2,
  .about-page .about-who-grid{
    display:block!important;
    min-height:0!important;
  }

  .home-page .hero-copy-v2{
    max-width:790px!important;
    min-height:0!important;
    padding:20px 0!important;
  }

  .about-page .about-who-copy{
    max-width:720px!important;
    padding:22px 0!important;
  }

  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    max-width:790px!important;
    font-size:clamp(70px,5.6vw,94px)!important;
    line-height:.94!important;
    margin:0 0 22px!important;
  }

  .about-page .about-who-copy h1,.about-page .about-who-copy .mobile-h1{
    max-width:720px!important;
    font-size:clamp(58px,5vw,78px)!important;
    line-height:.98!important;
    margin:0 0 24px!important;
  }

  .home-page .hero-copy-v2 > p:not(.hero-secondary-copy){
    max-width:720px!important;
    font-size:19px!important;
    line-height:1.55!important;
  }

  .home-page .hero-secondary-copy{
    max-width:720px!important;
    font-size:15px!important;
    line-height:1.62!important;
  }

  .about-page .about-who-copy > p{
    max-width:700px!important;
    font-size:16px!important;
    line-height:1.68!important;
  }

  .about-page .about-who-copy .check-list{
    max-width:700px!important;
  }
}

@media (max-width:820px){
  .home-page .hero-v2,
  .about-page .about-who-hero{
    min-height:calc(100svh - 68px)!important;
    display:flex!important;
    align-items:stretch!important;
    padding:12px 0 18px!important;
  }

  .home-page .hero-v2{
    background-position:center 52%!important;
  }

  .about-page .about-who-hero{
    background-position:center top!important;
  }

  .home-page .hero-v2::before{
    background:linear-gradient(180deg,
      rgba(3,14,27,.60) 0%,
      rgba(3,14,27,.60) 36%,
      rgba(3,14,27,.72) 72%,
      rgba(3,14,27,.84) 100%)!important;
  }

  .about-page .about-who-hero::before{
    background:linear-gradient(180deg,
      rgba(3,14,27,.58) 0%,
      rgba(3,14,27,.62) 35%,
      rgba(3,14,27,.74) 72%,
      rgba(3,14,27,.86) 100%)!important;
  }

  .home-page .hero-v2::after,
  .about-page .about-who-hero::after{
    background:linear-gradient(135deg,rgba(212,167,59,.09),transparent 48%)!important;
  }

  .home-page .hero-grid-v2,
  .about-page .about-who-grid{
    width:100%!important;
    min-height:100%!important;
    display:block!important;
  }

  .home-page .hero-copy-v2,
  .about-page .about-who-copy{
    min-height:calc(100svh - 98px)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:12px 5px!important;
    text-align:center!important;
  }

  .home-page .hero-copy-v2 h1,.home-page .hero-copy-v2 .mobile-h1{
    max-width:350px!important;
    margin:0 auto 16px!important;
    font-size:clamp(42px,11vw,52px)!important;
    line-height:.98!important;
  }

  .home-page .hero-copy-v2 > p,
  .home-page .hero-secondary-copy{
    max-width:350px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .about-page .about-who-copy{
    text-align:left!important;
    justify-content:space-between!important;
  }

  .about-page .about-who-copy h1,.about-page .about-who-copy .mobile-h1{
    margin:0 0 16px!important;
    font-size:clamp(39px,10.6vw,47px)!important;
    line-height:1!important;
  }

  .about-page .about-who-copy > p{
    font-size:14px!important;
    line-height:1.56!important;
  }

  .about-page .about-who-copy .check-list{
    margin-top:15px!important;
  }

  .about-page .about-who-actions{
    margin-top:16px!important;
  }

  .home-page .hero-copy-v2 .hero-actions,
  .home-page .hero-tags{
    position:relative!important;
    z-index:3!important;
  }
}

/* SEO applications content — 2026-07-26 */
.article-applications{margin:34px 0;padding:24px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.72)}
.article-applications h2{margin-top:0}
.article-applications ul{margin-bottom:14px}
.article-related-service{margin:14px 0 0!important;font-weight:700}
.article-related-service a{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px}