/* Synergy facelift — October 2026. Loaded after site.css, service-visuals.css and growth.css on every page.
   Navy/gold identity retained; tighter type scale, 8px spacing rhythm, consistent card radius. */
:root{
 --ink:#14334d;--navy:#0f2a40;--navy-2:#163a57;--paper:#f6f5f1;--muted:#56646e;--gold:#b4a17a;--gold-strong:#c9b183;--gold-ink:#7d6640;
 --line:#dfe3e4;--blue:#e8eef1;--white:#fff;--radius:14px;--radius-sm:10px;
 --shadow-sm:0 1px 2px #0f2a400d,0 4px 14px #0f2a400a;--shadow-md:0 2px 6px #0f2a400f,0 18px 40px #0f2a4014;
 --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:72px;--s7:96px
}
body{font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a:hover{color:var(--gold-ink)}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(38px,4.6vw,66px);letter-spacing:-.035em}
h2{font-size:clamp(28px,2.9vw,42px)}
h3{font-size:21px;line-height:1.25;letter-spacing:-.015em}
.lead{font-size:18px;line-height:1.65}
.wrap{max-width:1240px;padding:0 48px}
.section{padding:var(--s7) 0}
.eyebrow{font-size:11.5px;letter-spacing:.14em;margin-bottom:var(--s2);color:var(--gold-ink)}
.eyebrow:before{width:18px;background:var(--gold)}
.section-head{margin-bottom:var(--s5)}
.text-link{font-weight:600;font-size:13.5px;border-bottom-color:var(--gold);padding-bottom:3px;color:var(--ink)}
.text-link:hover{border-bottom-color:var(--ink)}

/* Buttons */
.btn{border-radius:var(--radius-sm);gap:10px;padding:14px 22px;font-size:14px;font-weight:600;min-height:48px;box-shadow:0 1px 0 #0000000d}
.btn:hover{background:var(--navy-2)}
.btn.outline{border-color:#b9c6ce;background:#fff0}
.btn.outline:hover{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn.gold{background:var(--gold-strong);border-color:var(--gold-strong);color:var(--navy)}
.btn.gold:hover{background:#d8c49b;border-color:#d8c49b;color:var(--navy)}
.btn.outline-light{background:#fff0;border-color:#ffffff59;color:#fff}
.btn.outline-light:hover{background:#ffffff14;border-color:#fff;color:#fff}

/* Language bar + header */
.language-nav{background:var(--navy);border:0;padding:7px 48px;gap:20px;font-size:12px;color:#c9d5de}
.language-nav a{color:#c9d5de}
.language-nav a:hover{color:#fff}
.language-nav [aria-current]{color:#fff;text-decoration-color:var(--gold-strong)}
.header{background:#ffffffeb;-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid #e6e9ea}
.navrow{height:74px}
.brand img{width:146px}
.navlinks{gap:28px;font-size:14px;font-weight:500}
.navlinks a:not(.btn){position:relative;padding:6px 0}
.navlinks a[aria-current=page]{border-bottom:0}
.navlinks a[aria-current=page]:not(.btn):after,.navlinks a:not(.btn):hover:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);border-radius:2px}
.navrow .btn{min-height:40px;padding:10px 16px}
html{scroll-padding-top:90px}

/* Home + localised home hero: product-led, dark */
.hero-feature{position:relative;overflow:hidden;background:radial-gradient(900px 500px at 85% 20%,#2a5577 0,#0f2a4000 60%),linear-gradient(160deg,#0f2a40 0,#12324c 55%,#0d2436 100%);color:#e6edf2;padding:var(--s6) 0 var(--s7)}
.hero-feature:after{content:'';position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,#c9b18300,#c9b18399,#c9b18300)}
.hero-feature h1{color:#fff;font-size:clamp(40px,5vw,72px);line-height:1.02;margin-bottom:var(--s3)}
.hero-feature h1 em{color:var(--gold-strong)}
.hero-feature .eyebrow{color:var(--gold-strong)}
.hero-feature .lead{color:#c5d3dd;font-size:18px;max-width:540px}
.hero-feature .micro{color:#9fb3c2}
.hero-feature [data-cyberport-membership]{display:inline-block;margin:0 0 var(--s3);padding:6px 12px;border:1px solid #ffffff26;border-radius:999px;font-size:12px;color:#d6e0e7;background:#ffffff0a}
.hero-feature .actions{margin:0 0 var(--s3)}
.hero-feature .hero-grid,.hero-feature .localized-hero{grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.hero-chips li{font-size:12.5px;color:#d6e0e7;padding:6px 12px;border-radius:999px;background:#ffffff12;border:1px solid #ffffff1f}
.localized-feature .localized-hero>div>.btn{margin-top:var(--s1)}

/* Real-work screenshot stack */
.work-stack{position:relative;margin:0 0 40px;aspect-ratio:1.12}
.work-frame{position:absolute;display:block;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 30px 60px #04111c66,0 0 0 1px #ffffff1f;transition:transform .35s ease}
.work-frame .browser-bar{display:flex;align-items:center;gap:10px;height:24px;padding:0 10px;background:#f3f4f5;color:#69737a;font:10px/1 Arial,sans-serif}
.work-frame .browser-bar>span:first-child{color:#c3c8cb;letter-spacing:2px;font-size:8px}
.work-frame img{width:100%;aspect-ratio:1.6;object-fit:cover;object-position:top}
.work-frame-back{width:64%;top:0;inset-inline-end:0;opacity:.92}
.work-frame-main{width:84%;top:14%;inset-inline-start:0;z-index:2}
.work-frame-front{width:48%;bottom:4%;inset-inline-end:2%;z-index:3}
.work-frame:hover,.work-frame:focus-visible{transform:translateY(-6px);color:inherit}
.work-stack figcaption{position:absolute;top:calc(100% + 14px);inset-inline-start:0;font-size:11.5px;line-height:1.5;color:#95aaba;max-width:92%}

/* Logo proof band */
.logo-band{background:#fff;border-bottom:1px solid var(--line);padding:var(--s5) 0 var(--s5)}
.logo-band .client-proof{padding:0}
.logo-band .client-proof-heading{margin-bottom:var(--s3)}
.logo-band .client-logo-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.logo-band .client-logo{min-height:88px;padding:16px;border-radius:var(--radius-sm);border-color:#eceeee;background:#fff}
.logo-band .client-logo:hover{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.logo-band .client-logo img{height:48px}
.logo-band .client-logo-frg{padding:6px}
.logo-band .client-logo-frg img{height:76px}

/* Cards: services, offers, partners, contact */
.grid3{gap:20px}
.service{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4) 28px;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s,transform .2s}
.service:hover{border-color:#cdbf9f;box-shadow:var(--shadow-md)}
.service .number{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:26px;padding:0 10px;border-radius:999px;background:#f3eee3;color:var(--gold-ink);font-weight:700;font-size:11.5px;margin-bottom:var(--s3)}
.service h3{font-size:22px;margin-bottom:12px}
.service p{font-size:15px;line-height:1.6}
.service ul{font-size:14px;padding-left:18px}
html[dir=rtl] .service ul{padding-left:0;padding-right:18px}
.section.white .service{background:var(--paper);box-shadow:none}
.services-band .service{background:var(--paper)}
.offer-card .eyebrow{margin-bottom:var(--s1)}
.offer-card dl{font-size:14.5px}
.offer-card dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);margin-top:18px}
.offer-card .btn{align-self:stretch}
.partner,.contact-panel{border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.property-offers .service-illustration{margin:0 0 var(--s3)}
.property-offers .service-illustration img{border-radius:var(--radius-sm)}

/* Project / case cards */
.case-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s}
.case-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.case-card .case-image{margin:0;border-radius:0}
.case-card>.tag,.case-card>h3,.case-card>p,.case-card>.text-link{margin-left:24px;margin-right:24px}
.case-card>.tag{margin-top:22px;color:var(--gold-ink);font-weight:700}
.case-card h3{font-size:22px}
.case-card>.text-link{margin-bottom:24px}
.case-card .case-image.website-preview{border-radius:0;padding:16px 16px 34px;aspect-ratio:auto}
.case-card .preview-caption{bottom:11px;left:16px}
.section.white .case-card{background:var(--paper)}
.projects-band{background:var(--paper)}
.projects-band .section-head h2,.services-band h2{max-width:720px}
.post-card .tag{font-weight:600}

/* Dark bands */
.workflow-section,.split-band,.video-examples{background:linear-gradient(160deg,#0f2a40,#14385a)}
.workflow-grid li{border-top-color:#ffffff26}
.workflow-bottom .btn{background:var(--gold-strong);border-color:var(--gold-strong);color:var(--navy)}

/* Page heroes (interior) */
.page-hero{background:linear-gradient(180deg,#fff 0,var(--paper) 100%);padding:var(--s6) 0 var(--s5);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(34px,4vw,58px);letter-spacing:-.03em;line-height:1.06}
.breadcrumbs{margin-bottom:var(--s3);font-size:12.5px}
.breadcrumbs a{color:var(--gold-ink)}
.visual-hero{background:linear-gradient(180deg,#fff 0,var(--paper) 100%)}
.visual-hero h1{letter-spacing:-.03em;font-weight:600}
.visual-hero h1 em{color:var(--gold-ink)}
.visual-service-card{border-radius:var(--radius);box-shadow:var(--shadow-sm);border-color:var(--line)}
.visual-card-copy h4{font-weight:600;font-size:21px}
.real-example{border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.service-jumps a{font-weight:500}
details{padding:20px 0}
summary{font-weight:600;font-size:18px}

/* Article library */
.listing-search{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow-sm);gap:16px;margin-bottom:var(--s4)}
.listing-search label{font-weight:600}
.listing-search input{border-radius:var(--radius-sm);border-color:#c9d3d8;max-width:none;flex:1;padding:12px 16px}
.listing-search input:focus{border-color:var(--ink)}
.is-blog .grid3{gap:24px}
.is-blog .post-card,.localized-main .post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:0 0 22px;box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s}
.is-blog .post-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.is-blog .post-card .blog-thumbnail{margin:0 0 18px;border-radius:0;aspect-ratio:16/9}
.is-blog .post-card>.tag,.is-blog .post-card>h3,.is-blog .post-card>p,.is-blog .post-card>.text-link{margin-left:22px;margin-right:22px}
.is-blog .post-card .tag{display:inline-block;align-self:flex-start;font-size:11px;letter-spacing:.08em;color:var(--gold-ink);background:#f3eee3;padding:4px 10px;border-radius:999px;margin-bottom:12px}
.is-blog .post-card h3{font-size:19px;line-height:1.35;letter-spacing:-.01em;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.is-blog .post-card h3 a:hover{color:var(--gold-ink)}
.is-blog .post-card .text-link{margin-top:auto;align-self:flex-start}
.post-card{border-top-color:var(--line)}

/* Article reading view */
.is-article .page-hero{padding:var(--s5) 0 var(--s4)}
.is-article .page-hero h1{font-size:clamp(30px,3.3vw,46px);max-width:860px;line-height:1.12}
.article{max-width:760px;padding:var(--s5) 24px var(--s6);font-size:18px;line-height:1.75;color:#24394a}
.article h2{font-size:clamp(24px,2.3vw,30px);margin-top:var(--s5);margin-bottom:var(--s2)}
.article h3{font-size:21px;margin-top:var(--s4)}
.article img{border-radius:var(--radius-sm)}
.article a{border-bottom:1px solid var(--gold);color:var(--ink)}
.article blockquote{margin:var(--s4) 0;padding:6px 0 6px 20px;border-left:3px solid var(--gold);color:var(--muted)}
.article ul,.article ol{padding-left:22px}
.article-back{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);font-size:15px}
.article .note,.note{border-radius:var(--radius-sm);border-left:3px solid var(--gold)}

/* Case-study pages */
.is-case .case-top{gap:56px}
.is-case .case-top img{border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md)}
.case-details{gap:24px}
.case-details>div{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px}
.website-project-shot img{border-radius:var(--radius)}

/* Closing CTA + footer */
.cta{background:linear-gradient(135deg,#0f2a40 0,#173f5f 100%);color:#e6edf2;padding:var(--s6) 0}
.cta h2{color:#fff}
.cta p{color:#c5d3dd}
.cta .eyebrow{color:var(--gold-strong)}
.cta .btn{background:var(--gold-strong);border-color:var(--gold-strong);color:var(--navy)}
.cta .btn:hover{background:#d8c49b}
footer{background:#0b2133;border-top:3px solid var(--gold)}
.footer-brand{font-weight:600}
.footer-grid h3{color:#fff;font-size:12px;letter-spacing:.12em}
.book img{border-radius:4px}

/* Forms */
.project-brief input:not([type=checkbox]),.project-brief select,.project-brief textarea{border-radius:var(--radius-sm);border-color:#c3ced4}
.project-brief button{border-radius:var(--radius-sm)}

@media(max-width:1100px){
 .logo-band .client-logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .hero-feature .hero-grid,.hero-feature .localized-hero{gap:40px}
}
@media(max-width:1050px){.wrap{padding:0 32px}.language-nav{padding:7px 32px}}
@media(max-width:860px){
 .hero-feature .hero-grid,.hero-feature .localized-hero{grid-template-columns:1fr}
 .work-stack{max-width:620px;margin-bottom:64px}
}
@media(max-width:780px){
 .wrap{padding:0 20px}
 .section{padding:var(--s6) 0}
 .navrow{height:64px}
 .navlinks{top:64px;background:#fff;box-shadow:var(--shadow-md)}
 .navlinks a:not(.btn):after{display:none}
 .brand img{width:126px}
 .language-nav{padding:6px 16px;gap:12px;font-size:11.5px}
 .hero-feature{padding:var(--s5) 0 var(--s6)}
 .hero-feature h1{font-size:clamp(36px,10.5vw,48px)}
 .hero-feature .lead{font-size:16px}
 .hero-feature .actions .btn{flex:1 1 auto}
 .hero-feature .hero-chips{display:none}
 .work-stack{aspect-ratio:1.12;margin-bottom:64px}
 .work-frame .browser-bar{height:18px;font-size:8px}
 .page-hero{padding:var(--s5) 0 var(--s4)}
 .page-hero h1{font-size:clamp(30px,8.4vw,40px)}
 .is-article .page-hero h1{font-size:clamp(26px,7vw,34px)}
 .article{font-size:17px;padding:var(--s4) 20px var(--s5)}
 .service{padding:24px 22px}
 .listing-search{padding:14px}
 .listing-search input{width:100%}
 .case-card>.tag,.case-card>h3,.case-card>p,.case-card>.text-link{margin-left:20px;margin-right:20px}
 .cta{padding:var(--s5) 0}
}
@media(max-width:650px){
 .logo-band{padding:var(--s4) 0}
 .logo-band .client-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .logo-band .client-logo{min-height:76px;padding:12px}
 .logo-band .client-logo img{height:40px}
 .logo-band .client-logo-frg img{height:64px}
}
@media(prefers-reduced-motion:reduce){
 .work-frame,.case-card,.service,.is-blog .post-card{transition:none}
 .work-frame:hover,.case-card:hover,.is-blog .post-card:hover{transform:none}
}
.page-hero+.section,.visual-hero+.section{padding-top:var(--s5)}