/* ==========================================================================
   ZNG Dijital: design tokens
   ========================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--accent: #146EF5;
	--accent-600: #0F5BD0;
	--hl: #D4E4FF;
	--tint: #F1F6FF;
	--card: #EEF1F5;
	--ink: #1F2027;
	--muted: #4B5565;
	--soft: #6B7280;
	--border: #E5E7EB;
	--black: #0F1115;
	--bg: #FFFFFF;

	--font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--r-btn: 8px;
	--r-card: 16px;
	--r-panel: 12px;

	--container: 1180px;
	--gutter: clamp(16px, 4vw, 32px);
	--section: clamp(64px, 7vw, 96px);
	--header-h: 80px;

	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
:where(body) { margin: 0; background: var(--bg); color: var(--muted); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:where(h1, h2, h3, h4, h5, h6) { margin: 0; font-family: var(--font); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
:where(p, ul, ol, figure, blockquote, dl) { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
:where(img, svg, video, iframe) { display: block; max-width: 100%; }
:where(img) { height: auto; }
:where(a) { color: inherit; text-decoration: none; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(button) { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--hl); color: var(--ink); }

.sr-only, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 1000; width: auto; height: auto; clip: auto; padding: 12px 18px; background: var(--black); color: #fff; border-radius: var(--r-btn); }
.hp { position: absolute; left: -9999px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--first { padding-top: calc(var(--section) * .5); }
.section--tight { padding-block: calc(var(--section) * .5); }
.section--flush-top { padding-top: 0; }
.section--surface { background: var(--tint); }

.accent { color: var(--accent); }
.hl { display: inline-block; padding: 0 10px 4px; margin-top: 6px; border-radius: 10px; background: var(--hl); color: var(--ink); }
.label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--tint); font: 500 13px/1 var(--font); color: var(--accent); }
.label--accent { background: var(--hl); color: var(--ink); }

.h-display, .h-1 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.15; }
.h-2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.2; }
.h-3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; }
.lead { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }

/* Centered section heading (e-adam style) */
.sec-head { display: grid; justify-items: center; gap: 12px; margin-bottom: clamp(32px, 4vw, 48px); text-align: center; }
.sec-head h2 { font-size: clamp(28px, 3vw, 40px); }
.sec-head p { font-size: 16px; color: var(--muted); }

.section-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 48px); max-width: 760px; }
.section-head--row { max-width: none; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.center-btn { display: flex; justify-content: center; margin-top: 32px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: var(--r-btn); border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); font: 500 14.5px/1 var(--font); white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.btn .icon { flex-shrink: 0; transition: transform .25s var(--ease); }
.btn:hover .icon:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--primary:hover { --btn-bg: var(--accent-600); --btn-bd: var(--accent-600); }
.btn--secondary { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: var(--border); }
.btn--secondary:hover { --btn-bd: #C9CED6; --btn-bg: #FAFAFB; }
.btn--dark { --btn-bg: var(--black); --btn-bd: var(--black); }
.btn--dark:hover { --btn-bg: #2A2D34; --btn-bd: #2A2D34; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.3); }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14.5px; color: var(--ink); }
.link-arrow .icon { transition: transform .25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ==========================================================================
   Top bar + header
   ========================================================================== */
.topbar { position: relative; background: var(--black); color: #fff; font-size: 14px; overflow: hidden; }
.topbar::before { content: ""; position: absolute; left: 4%; top: 50%; width: 260px; height: 90px; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(20,110,245,.55), rgba(20,110,245,0)); pointer-events: none; }
.topbar__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; }
.topbar__msg { color: #D1D5DB; }
.topbar__msg strong { color: #fff; font-weight: 600; }
.topbar__links { display: flex; align-items: center; gap: 22px; }
.topbar__links a { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 500; }
.topbar__links a + a { padding-left: 22px; border-left: 1px solid #34373F; }
.topbar__links .icon { color: #8DB7FF; }
.topbar__links a:hover { color: #8DB7FF; }

.site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow .25s; }
.admin-bar .site-header { top: 32px; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--border), 0 8px 24px -16px rgba(15,17,21,.2); }
.site-header__inner { display: flex; align-items: center; gap: 24px; height: 100%; }

.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo img { height: 36px; width: auto; }
.site-header .logo img, .drawer .logo img { filter: brightness(0) saturate(100%); }
.logo--text { gap: 6px; font-weight: 700; color: var(--ink); }
.logo__mark { display: inline-grid; place-items: center; height: 32px; padding: 0 8px; border-radius: 8px; background: var(--black); color: #fff; font-size: 15px; }
.logo__word { font-size: 16px; letter-spacing: .04em; }

.nav { margin-inline: auto; }
.nav__list, .nav .menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav li { position: relative; display: flex; align-items: center; }
.nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-btn); font-size: 15px; font-weight: 500; color: var(--ink); transition: background .2s; }
.nav a:hover, .nav li.is-open > a { background: #F4F5F7; }
.nav .current-menu-item > a, .nav .current-menu-ancestor > a { color: var(--accent); }
.nav .menu-item-has-children > a { padding-right: 30px; }
.nav__toggle { position: absolute; right: 8px; top: 50%; display: grid; place-items: center; width: 20px; height: 20px; margin-top: -10px; padding: 0; border: 0; background: none; color: var(--ink); }
.nav .sub-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(15,17,21,.18); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.nav .sub-menu::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; }
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu, .nav li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav .sub-menu a { display: flex; width: 100%; height: auto; padding: 10px 12px; font-size: 14.5px; }

/* Services mega menu */
.nav li.has-mega { position: static; }
.nav li.has-mega > .nav__toggle { position: static; margin: 0 0 0 -30px; }
.nav__toggle .icon { transition: transform .2s; }
.nav li.has-mega.is-open > .nav__toggle .icon, .nav li.has-mega:hover > .nav__toggle .icon { transform: rotate(180deg); }
.nav .mega { position: absolute; left: 0; right: 0; top: 100%; background: linear-gradient(180deg, #fff 55%, #F8FAFD); border-top: 1px solid var(--border); box-shadow: 0 30px 60px -30px rgba(15,17,21,.3); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; }
.nav .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.nav .mega::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: rgba(15,17,21,.28); pointer-events: none; }
.nav li.has-mega:hover > .mega, .nav li.has-mega:focus-within > .mega, .nav li.has-mega.is-open > .mega { opacity: 1; visibility: visible; transform: none; }
.mega__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding-block: 28px 24px; }
.nav .mega__col { padding-inline: 18px; }
.nav .mega__col + .mega__col { border-left: 1px solid var(--border); }
.nav .mega__col:first-child { padding-left: 0; }
.nav .mega__col:last-child { padding-right: 0; }
.nav .mega__col, .nav .mega__promo { opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); transition-delay: calc(var(--i) * 40ms); }
.nav li.has-mega:hover .mega__col, .nav li.has-mega:focus-within .mega__col, .nav li.has-mega.is-open .mega__col,
.nav li.has-mega:hover .mega__promo, .nav li.has-mega:focus-within .mega__promo, .nav li.has-mega.is-open .mega__promo { opacity: 1; transform: none; }
.mega__col { display: grid; align-content: start; gap: 22px; }

/* Group tones */
.mega__group { --t: #146EF5; --tb: #EEF4FF; --tl: #D6E4FD; }
.mega__group--violet { --t: #7C3AED; --tb: #F5F3FF; --tl: #E4DCFD; }
.mega__group--amber { --t: #D97706; --tb: #FFF8EB; --tl: #FBE3B3; }
.mega__group--green { --t: #16A34A; --tb: #F0FDF4; --tl: #C9F0D6; }
.mega__group--rose { --t: #DB2777; --tb: #FDF2F8; --tl: #F9D2E6; }

/* Icon + title on one row, description below starting under the icon */
.mega__head { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: center; margin-bottom: 12px; }
.mega__head > span:last-child { display: contents; }
.mega__head small { grid-column: 1 / -1; min-height: 4.5em; }
.mega__head strong { min-height: 2.6em; display: flex; align-items: center; }
.mega__icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--tb); border: 1px solid var(--tl); color: var(--t); }
.mega__head strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.mega__head small { display: block; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--soft); }
.nav .mega__list { margin: 0; padding: 0; list-style: none; }
.nav .mega__list li { display: block; }
.nav .mega__list a { display: flex; align-items: center; gap: 10px; width: auto; height: auto; padding: 6px 8px; margin-inline: -8px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--ink); transition: background .15s, color .15s; }
.mega__i { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: #F2F4F7; color: var(--soft); transition: background .15s, color .15s; }
.mega__t { flex: 1; }
.nav .mega__list a > .icon { flex-shrink: 0; color: var(--t); opacity: 0; transform: translateX(-6px); transition: opacity .15s, transform .2s var(--ease); }
.nav .mega__list a:hover, .nav .mega__list a:focus-visible { background: var(--tb); color: var(--ink); }
.nav .mega__list a:hover .mega__i, .nav .mega__list a:focus-visible .mega__i { background: #fff; color: var(--t); box-shadow: 0 0 0 1px var(--tl); }
.nav .mega__list a:hover > .icon, .nav .mega__list a:focus-visible > .icon { opacity: 1; transform: none; }

/* Featured-work card */
.nav .mega__promo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: auto; min-height: 320px; padding: 0; border-radius: 16px; overflow: hidden; background: var(--black); color: #fff; isolation: isolate; }
.nav .mega__promo:hover { background: var(--black); }
.mega__promo-img { position: absolute; inset: 0; z-index: -1; }
.mega__promo-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.mega__promo-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,17,21,.05) 20%, rgba(15,17,21,.92) 75%); }
.nav .mega__promo:hover .mega__promo-img img { transform: scale(1.05); }
.mega__promo-body { display: grid; gap: 8px; padding: 18px; }
.mega__promo-body small { justify-self: start; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.14); font-size: 12px; font-weight: 500; }
.mega__promo-body strong { font-size: 16px; font-weight: 500; line-height: 1.35; }
.mega__promo-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 500; color: #8DB7FF; }

/* Footer strip */
.mega__foot { border-top: 1px solid var(--border); background: #F6F8FB; }
.mega__foot-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 12px; }
.mega__trust { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--muted); }
.mega__trust strong { color: var(--ink); font-weight: 600; }
.mega__logos { display: flex; }
.mega__logos > span { display: grid; place-items: center; width: 36px; height: 36px; padding: 5px; border-radius: 50%; background: #fff; border: 2px solid #F6F8FB; box-shadow: 0 0 0 1px var(--border); overflow: hidden; }
.mega__logos > span + span { margin-left: -10px; }
.mega__logos img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); }
.mega__actions { display: flex; align-items: center; gap: 18px; }
.nav .mega__actions .link-arrow { height: auto; padding: 0; color: var(--ink); }
.nav .mega__actions .link-arrow:hover { background: none; color: var(--accent); }
.nav .mega__actions .btn { height: 40px; min-height: 40px; padding: 0 14px; color: #fff; }
.nav .mega__actions .btn:hover { background: var(--accent-600); }
@media (max-width: 1280px) {
	.nav .mega__col { padding-inline: 12px; }
	.mega__head small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.nav .mega__col, .nav .mega__promo { opacity: 1; transform: none; }
}

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.menu-btn { display: none; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--r-btn); background: #fff; color: var(--ink); }

.drawer { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: #fff; transform: translateX(100%); transition: transform .3s var(--ease); visibility: hidden; }
.drawer.is-open { transform: none; visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; height: 72px; padding-inline: var(--gutter); border-bottom: 1px solid var(--border); }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px var(--gutter) 24px; }
.drawer__nav ul { margin: 0; padding: 0; list-style: none; }
.drawer__nav > ul > li { border-bottom: 1px solid var(--border); }
.drawer__nav > ul > li > a { display: block; padding: 16px 0; font-size: 19px; font-weight: 500; color: var(--ink); }
.drawer__nav .sub-menu { padding: 0 0 14px; }
.drawer__nav .sub-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 15.5px; }
.drawer__nav .sub-menu a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.drawer__nav .nav__toggle { display: none; }
/* Mega menu inside the mobile drawer: accordion of groups */
.drawer__nav li.has-mega { position: relative; }
.drawer__nav li.has-mega > .nav__toggle { position: absolute; right: 0; top: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--r-btn); background: #fff; color: var(--ink); transition: transform .2s; }
.drawer__nav li.has-mega.is-open > .nav__toggle { transform: rotate(180deg); }
.drawer__nav .mega { display: none; padding-bottom: 12px; }
.drawer__nav li.has-mega.is-open > .mega { display: block; }
.drawer__nav .mega .container { padding: 0; }
.drawer__nav .mega__grid { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0; }
.drawer__nav .mega__col { display: grid; gap: 8px; }
.drawer__nav .mega__group { padding: 12px; border-radius: var(--r-panel); background: var(--card); }
.drawer__nav .mega__head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid #DDE2EA; }
.drawer__nav .mega__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--tb); color: var(--t); }
.drawer__nav .mega__head strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.drawer__nav .mega__head small { display: none; }
.drawer__nav .mega__list a { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 15px; color: var(--ink); }
.drawer__nav .mega__list .icon { color: var(--soft); }
.drawer__nav .mega__list a > .icon { display: none; }
.drawer__nav .mega__promo, .drawer__nav .mega__foot { display: none; }
.drawer__foot { display: grid; gap: 10px; padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.drawer__foot .btn { width: 100%; }
body.drawer-open { overflow: hidden; }

/* ==========================================================================
   Hero with photo collage
   ========================================================================== */
.hero { padding-block: clamp(24px, 3vw, 40px) clamp(40px, 5vw, 64px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero__copy { display: grid; gap: 22px; justify-items: start; }
.hero__title { font-size: clamp(36px, 4vw, 52px); line-height: 1.25; letter-spacing: -.025em; }
.hero__text { max-width: 40ch; font-size: 16.5px; }

.collage { display: grid; grid-template-columns: 1fr 1.05fr .8fr 1fr; grid-template-rows: 1.1fr .75fr 1fr; gap: 14px; height: clamp(320px, 30vw, 400px); }
.collage > * { border-radius: var(--r-panel); overflow: hidden; }
.collage__tile { background: var(--card); box-shadow: 0 1px 2px rgba(15,17,21,.06); }
.collage__tile img, .collage__tile .art { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.collage__icon { display: grid; place-items: center; background: var(--tint); color: var(--accent); border: 1px solid #E3ECFD; }
.collage__icon .icon { width: 26px; height: 26px; }
.collage__a { grid-area: 1 / 1 / 2 / 2; }
.collage__b { grid-area: 2 / 1 / 3 / 2; margin: 8px 18px; }
.collage__c { grid-area: 3 / 1 / 4 / 2; }
.collage__d { grid-area: 1 / 2 / 4 / 3; }
.collage__d img { object-position: 20% top; }
.collage__e { grid-area: 1 / 3 / 2 / 4; margin: 14px 10px; }
.collage__f { grid-area: 2 / 3 / 3 / 4; }
.collage__g { grid-area: 3 / 3 / 4 / 4; margin: 14px 10px; }
.collage__h { grid-area: 1 / 4 / 2 / 5; }
.collage__i { grid-area: 2 / 4 / 3 / 5; margin: 6px 22px; }
.collage__j { grid-area: 3 / 4 / 4 / 5; }

/* ==========================================================================
   Logo tile marquee
   ========================================================================== */
.logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logo-marquee + .logo-marquee { margin-top: 16px; }
.logo-marquee__track { display: flex; gap: 16px; width: max-content; animation: marquee 55s linear infinite; }
.logo-marquee--rev .logo-marquee__track { animation-direction: reverse; animation-duration: 60s; }
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-tile { display: grid; place-items: center; width: 200px; height: 80px; padding: 16px 26px; border: 1px solid var(--border); border-radius: var(--r-panel); background: #fff; flex-shrink: 0; }
.logo-tile img { max-height: 40px; max-width: 140px; width: auto; object-fit: contain; filter: grayscale(1) contrast(1.35) brightness(.85); transition: filter .25s; }
.logo-tile:hover img { filter: none; opacity: 1; }
.logo-tile--dark { background: #1F2027; border-color: #1F2027; }
.logo-tile--dark img { filter: grayscale(1) brightness(1.1); opacity: .9; }
.logo-tile span { font-weight: 600; color: var(--soft); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(calc(-50% - 8px)); } }

/* ==========================================================================
   Photo grid (who we are)
   ========================================================================== */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: var(--r-card); overflow: hidden; }
.photo-grid__item { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--card); }
.photo-grid__item img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.photo-grid__item:hover img { transform: scale(1.04); }
.photo-grid__name { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 13.5px; font-weight: 500; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.photo-grid__item:hover .photo-grid__name, .photo-grid__item:focus-visible .photo-grid__name { opacity: 1; transform: none; }
.about-strip { display: grid; grid-template-columns: 1.3fr auto auto; gap: 32px; align-items: center; margin-top: 28px; padding: 24px 28px; border: 1px solid var(--border); border-radius: var(--r-card); }
.about-strip p { max-width: 60ch; }
.about-strip__stats { display: flex; gap: 28px; }
.about-strip__stats li { display: grid; font-size: 13px; }
.about-strip__stats strong { font-size: 28px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }

/* ==========================================================================
   Pastel band with tabs (featured work)
   ========================================================================== */
.band { padding: clamp(20px, 3vw, 32px); border-radius: 20px; background: var(--tint); }
.band__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.band__head h2 { font-size: clamp(24px, 2.4vw, 32px); }
.tabs { display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tab { flex-shrink: 0; padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; background: none; font-size: 15px; color: var(--muted); }
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }
.band__panel { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.band__panel[hidden] { display: none; }
.feature { position: relative; display: block; min-height: 180px; border-radius: var(--r-panel); overflow: hidden; background: var(--card); }
.feature--big { grid-row: span 2; min-height: 380px; }
.feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.feature:hover img { transform: scale(1.03); }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15,17,21,.78)); }
.feature__text { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; display: grid; gap: 2px; color: #fff; }
.feature__text small { font-size: 12.5px; color: #C7D2E3; }
.feature__text strong { font-size: 18px; font-weight: 600; }
.feature--big .feature__text strong { font-size: clamp(24px, 3vw, 40px); font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; line-height: 1.05; }

/* ==========================================================================
   Service cards (grey blocks with white panels)
   ========================================================================== */
.svc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.svc-card { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 24px; border-radius: var(--r-card); background: var(--card); transition: background .25s; }
.svc-card:hover { background: #E6EAF0; }
.svc-grid > :nth-child(4n+1), .svc-grid > :nth-child(4n+4) { grid-column: span 7; }
.svc-grid > :nth-child(4n+2), .svc-grid > :nth-child(4n+3) { grid-column: span 5; }
.svc-card__panel { position: relative; aspect-ratio: 16 / 7; margin-bottom: 8px; border-radius: var(--r-panel); overflow: hidden; background: #fff; }
.svc-grid > :nth-child(4n+2) .svc-card__panel, .svc-grid > :nth-child(4n+3) .svc-card__panel { aspect-ratio: auto; height: 100%; max-height: 260px; min-height: 200px; }
.svc-card__panel > img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.svc-card:hover .svc-card__panel > img { transform: scale(1.03); }
.svc-card__title { font-size: 24px; }
.svc-card__text { font-size: 15px; color: var(--muted); max-width: 58ch; }
.svc-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 500; color: var(--ink); }
.svc-card:hover .svc-card__more { color: var(--accent); }

.chipmap { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, var(--tint), #fff 60%); }
.chipmap::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; left: 20%; top: -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(20,110,245,.10), rgba(20,110,245,0)); animation: chip-glow 9s ease-in-out infinite alternate; }
.chipmap__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Base line + a flowing dashed "signal" travelling from the hub to each chip */
.chipmap__lines line { stroke: #CBD5E3; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 3 6; animation: chip-flow 1.4s linear infinite; }
.chipmap__hub { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 0 8px rgba(20,110,245,.12), 0 10px 24px -8px rgba(20,110,245,.55); transition: transform .35s var(--ease); }
.chipmap__hub::before, .chipmap__hub::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(20,110,245,.45); animation: chip-ripple 2.8s ease-out infinite; }
.chipmap__hub::after { animation-delay: 1.4s; }
.chipmap__hub .icon { animation: chip-wiggle 5s ease-in-out infinite; }
.chip-pill { position: absolute; z-index: 1; transform: translate(-50%, -50%); padding: 5px 11px; border-radius: 999px; border: 1px solid; font-size: 12px; font-weight: 500; white-space: nowrap; background: #fff; box-shadow: 0 4px 10px -6px rgba(15,17,21,.18); animation: chip-float 4.2s ease-in-out infinite; transition: box-shadow .3s; }
.chipmap__p0 { animation-delay: 0s; }
.chipmap__p1 { animation-delay: -1.1s; animation-duration: 4.8s; }
.chipmap__p2 { animation-delay: -2.3s; animation-duration: 3.9s; }
.chipmap__p3 { animation-delay: -.6s; animation-duration: 4.6s; }
.chipmap__p4 { animation-delay: -1.8s; }
.chipmap__p5 { animation-delay: -3s; animation-duration: 5s; }
.svc-card:hover .chipmap__hub, .svc-row:hover .chipmap__hub { transform: translate(-50%, -50%) scale(1.1); }
.svc-card:hover .chip-pill, .svc-row:hover .chip-pill { box-shadow: 0 8px 18px -8px rgba(15,17,21,.28); animation-duration: 2.2s; }
.svc-card:hover .chipmap__lines line, .svc-row:hover .chipmap__lines line { stroke: #9DB9EC; animation-duration: .8s; }
.chipmap.is-paused, .chipmap.is-paused *, .chipmap.is-paused *::before, .chipmap.is-paused *::after, .chipmap.is-paused::before { animation-play-state: paused !important; }
@keyframes chip-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 7px)); } }
@keyframes chip-flow { to { stroke-dashoffset: -18; } }
@keyframes chip-ripple { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes chip-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
@keyframes chip-glow { from { transform: translate(-20%, 0); } to { transform: translate(40%, 40%); } }
.chip-pill--violet { background: #F5F3FF; border-color: #DDD6FE; color: #6D28D9; }
.chip-pill--green { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.chip-pill--blue { background: var(--tint); border-color: #BFD5FB; color: var(--accent-600); }
.chip-pill--amber { background: #FFFBEB; border-color: #FDE68A; color: #B45309; }
.chip-pill--rose { background: #FDF2F8; border-color: #FBCFE8; color: #BE185D; }
.chipmap__p0 { left: 18%; top: 20%; }
/* Narrow cards: pull chips toward the centre so long labels are not clipped */
.svc-grid > :nth-child(4n+2) .chip-pill, .svc-grid > :nth-child(4n+3) .chip-pill { font-size: 11.5px; padding: 4px 9px; }
.svc-grid > :nth-child(4n+2) .chipmap__p0, .svc-grid > :nth-child(4n+3) .chipmap__p0,
.svc-grid > :nth-child(4n+2) .chipmap__p2, .svc-grid > :nth-child(4n+3) .chipmap__p2 { left: 25%; }
.svc-grid > :nth-child(4n+2) .chipmap__p1, .svc-grid > :nth-child(4n+3) .chipmap__p1 { left: 22%; }
.svc-grid > :nth-child(4n+2) .chipmap__p3, .svc-grid > :nth-child(4n+3) .chipmap__p3,
.svc-grid > :nth-child(4n+2) .chipmap__p5, .svc-grid > :nth-child(4n+3) .chipmap__p5 { left: 75%; }
.svc-grid > :nth-child(4n+2) .chipmap__p4, .svc-grid > :nth-child(4n+3) .chipmap__p4 { left: 78%; }
.chipmap__p1 { left: 14%; top: 50%; }
.chipmap__p2 { left: 18%; top: 80%; }
.chipmap__p3 { left: 82%; top: 20%; }
.chipmap__p4 { left: 86%; top: 50%; }
.chipmap__p5 { left: 82%; top: 80%; }

/* ==========================================================================
   Carousels (clients, social)
   ========================================================================== */
.carousel { position: relative; }
.carousel .carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 17vw, 250px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.slider__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-btn); border: 0; background: var(--hl); color: var(--ink); transition: background .2s, color .2s; }
.slider__btn--next { background: var(--accent); color: #fff; }
.slider__btn:hover { background: var(--accent-600); color: #fff; }
.slider__btn--prev .icon { transform: rotate(180deg); }

.client-card { position: relative; display: block; aspect-ratio: 3 / 4.2; border-radius: var(--r-panel); overflow: hidden; background: var(--black); scroll-snap-align: start; }
.client-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% top; filter: grayscale(1) contrast(1.05); transition: filter .4s, transform .6s var(--ease); }
.client-card:hover img { filter: none; transform: scale(1.04); }
.client-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,17,21,.05) 40%, rgba(15,17,21,.85)); }
.client-card__play { position: absolute; right: 12px; top: 12px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--accent); color: #fff; }
.client-card__name { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; display: grid; gap: 2px; color: #fff; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.client-card__name small { font-size: 12.5px; font-weight: 400; color: #C7D2E3; }

.reel-card { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--r-panel); overflow: hidden; background: var(--card); scroll-snap-align: start; }
.reel-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.reel-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,17,21,.25), transparent 30%, transparent 70%, rgba(15,17,21,.35)); pointer-events: none; }
.reel-card__icon { position: absolute; right: 12px; top: 12px; z-index: 1; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.reel-card__play { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255,255,255,.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255,255,255,.45); opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s var(--ease); }
.reel-card__play .icon { fill: currentColor; margin-left: 3px; }
.reel-card:hover img { transform: scale(1.05); }
.reel-card:hover .reel-card__play, .reel-card:focus-visible .reel-card__play { opacity: 1; transform: none; }
/* Few items: centred row, no arrows */
.carousel--few .carousel__track { justify-content: center; grid-auto-columns: clamp(200px, 22vw, 270px); gap: 20px; }
@media (max-width: 900px) { .carousel--few .carousel__track { justify-content: start; grid-auto-columns: 62%; } }

.social-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; }
.social-row > p { font-size: 20px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.social-row__links { display: flex; flex-wrap: wrap; gap: 12px; }
.pill { display: inline-flex; align-items: center; gap: 10px; min-width: 150px; height: 46px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--r-btn); font-size: 14.5px; color: var(--ink); background: #fff; transition: border-color .2s; }
.pill .icon:last-child { margin-left: auto; }
.pill:hover { border-color: var(--ink); }

/* ==========================================================================
   Blog (home featured + list, listing page, cards)
   ========================================================================== */
.blog-home { display: grid; grid-template-columns: 1.1fr 1fr; grid-auto-rows: auto; gap: 24px 32px; }
.blog-item { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: start; }
.blog-item--big { grid-row: span 3; grid-template-columns: 1fr; gap: 14px; }
.blog-item__img { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-panel); overflow: hidden; background: var(--card); }
.blog-item--big .blog-item__img { aspect-ratio: 16 / 9.5; }
.blog-item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.blog-item:hover .blog-item__img img { transform: scale(1.04); }
.blog-item__body { display: grid; gap: 8px; justify-items: start; }
.blog-item h3 { font-size: 20px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-item--big h3 { font-size: 24px; }
.blog-item h3 a:hover { color: var(--accent); }
.blog-item p { font-size: 15px; }
.blog-item:not(.blog-item--big) .cover { justify-content: center; align-items: center; padding: 8px; }
.blog-item:not(.blog-item--big) .cover__cat { align-self: center; font-size: 11px; text-align: center; }
.blog-item:not(.blog-item--big) .cover__mark, .blog-item:not(.blog-item--big) .cover__title { display: none; }
.read-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 6px; background: var(--hl); color: var(--ink); font-size: 12px; font-weight: 500; }
.more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.more:hover { color: var(--accent); }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.post-card { position: relative; display: flex; flex-direction: column; gap: 12px; }
.post-card__media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-panel); overflow: hidden; background: var(--card); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--soft); }
.post-card__cat { padding: 3px 8px; border-radius: 6px; background: var(--hl); color: var(--ink); font-weight: 500; }
.post-card__title { font-size: 20px; line-height: 1.3; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover .post-card__title { color: var(--accent); }
.post-card__excerpt { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card--lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; grid-column: 1 / -1; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.post-card--lead .post-card__title { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; }
.post-card--lead .post-card__body { display: grid; gap: 14px; }

.cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(14px, 2vw, 24px); background: var(--tint); color: var(--ink); overflow: hidden; }
.cover::after { content: ""; position: absolute; right: -18%; bottom: -35%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 18px solid rgba(20,110,245,.12); }
.cover--1 { background: #F1F6FF; }
.cover--2 { background: #EEF1F5; }
.cover--3 { background: #F5F3FF; }
.cover--4 { background: #F0FDF4; }
.cover__cat { position: relative; z-index: 1; align-self: flex-start; padding: 4px 9px; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 500; }
.cover__title { position: relative; z-index: 1; font-size: clamp(16px, 1.7vw, 22px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; max-width: 92%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cover__mark { position: relative; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--accent); }

.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--r-btn); border: 1px solid var(--border); font-weight: 500; font-size: 15px; color: var(--ink); }
.pagination .current { background: var(--black); border-color: var(--black); color: #fff; }

/* ==========================================================================
   Closing CTA band
   ========================================================================== */
.support { position: relative; background: #1768C9; background: linear-gradient(100deg, #1560C4 0%, var(--accent) 70%, #2B7BF7 100%); color: #fff; overflow: hidden; }
.support__inner { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: stretch; min-height: 300px; }
.support__copy { display: grid; align-content: center; gap: 12px; padding-block: 48px; }
.support h2 { color: #fff; font-size: clamp(26px, 2.4vw, 32px); font-weight: 500; }
.support__copy > p { color: rgba(255,255,255,.88); font-size: 16px; }
.support__channels { display: flex; flex-wrap: wrap; gap: 20px 26px; margin-top: 36px; }
.support__channels a { display: flex; align-items: center; gap: 12px; color: #fff; white-space: nowrap; }
.support__icon { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,.14); transition: background .2s, transform .2s var(--ease); }
.support__channels a:hover .support__icon { background: #fff; color: var(--accent); transform: scale(1.06); }
.support__channels small { display: block; font-size: 15px; color: rgba(255,255,255,.9); }
.support__channels strong { display: block; font-size: 15.5px; font-weight: 600; }

/* Visual: concentric arcs centred below the band, badges travel along them */
.support__visual { position: relative; min-height: 300px; overflow: hidden; }
.arc, .arc-orbit { position: absolute; left: 50%; top: 100%; aspect-ratio: 1; border-radius: 50%; }
.arc { transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,.75); }
.arc--1, .arc-orbit--1 { width: 330px; }
.arc--2, .arc-orbit--2 { width: 470px; }
.arc--3, .arc-orbit--3 { width: 610px; }
.arc--2 { border-color: rgba(255,255,255,.5); }
.arc--3 { border-color: rgba(255,255,255,.3); }
.arc-orbit { --dur: 40s; animation: orbit-spin var(--dur) linear infinite; animation-delay: var(--delay, 0s); }
.arc-orbit--2 { --dur: 52s; animation-direction: reverse; }
.arc-orbit--3 { --dur: 64s; }
.arc-badge { position: absolute; left: 50%; top: 0; display: grid; place-items: center; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: #fff; color: var(--accent); border: 3px solid rgba(255,255,255,.6); background-clip: padding-box; box-shadow: 0 10px 24px -8px rgba(8,30,70,.55); animation: orbit-upright var(--dur) linear infinite; animation-delay: var(--delay, 0s); }
.arc-orbit--2 .arc-badge { animation-direction: reverse; }
.arc-badge--wa { color: #16A34A; }
.support__hub { position: absolute; left: 50%; bottom: 26px; display: grid; justify-items: center; gap: 6px; width: 170px; padding-top: 34px; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #fff; color: var(--accent); box-shadow: 0 0 0 12px rgba(255,255,255,.14), 0 20px 40px -12px rgba(8,30,70,.5); }
.support__hub small { font-size: 14px; font-weight: 700; font-style: italic; color: var(--ink); }
.support__hub .icon { animation: chip-wiggle 5s ease-in-out infinite; }
.support__photo { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); object-fit: contain; object-position: bottom; }
@media (prefers-reduced-motion: reduce) {
	.arc-orbit { animation: none !important; transform: translate(-50%, -50%) rotate(var(--a, -40deg)); }
	.arc-orbit--2 { --a: 35deg; }
	.arc-orbit--3 { --a: -20deg; }
	.arc-badge { animation: none !important; transform: rotate(calc(var(--a, -40deg) * -1)); }
}
@keyframes orbit-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
/* Counter-rotate so each icon stays upright while it travels round the ring */
@keyframes orbit-upright { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--black); color: #C4C8D0; padding-top: 56px; font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.3fr; gap: 32px; padding-bottom: 36px; }
.site-footer .logo__mark { background: var(--accent); }
.site-footer .logo__word { color: #fff; }
.footer-brand { display: grid; align-content: start; gap: 16px; justify-items: start; }
.footer-brand__q { color: #fff; font-size: 16px; line-height: 1.5; }
.footer-phone { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-btn); background: #24272E; color: #fff; font-weight: 500; }
.footer-phone:hover { background: #2F333B; }
.footer-col h2 { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 16px; letter-spacing: 0; }
.footer-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-col a:hover { color: #fff; }
.footer-social { display: flex; gap: 18px; padding-bottom: 24px; }
.footer-social a { color: #fff; opacity: .9; }
.footer-social a:hover { color: #8DB7FF; }
.newsletter__field { display: flex; margin-top: 12px; padding: 4px; border-radius: 10px; border: 1px solid #2F333B; background: #181B21; }
.newsletter__field input { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border: 0; background: transparent; color: #fff; font-size: 14.5px; }
.newsletter__field input:focus { outline: none; }
.newsletter__field input::placeholder { color: #7C828D; }
.newsletter__field button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; }
.newsletter__msg { margin-top: 8px; font-size: 13.5px; color: #86EFAC; }
.newsletter__msg--err { color: #FCA5A5; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 20px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid #262930; font-size: 14px; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.footer-bottom a:hover { color: #fff; }

.wa-float { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 90; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: #1F2127; color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); }
.wa-float .icon { color: #25D366; }
.wa-float:hover { background: #2A2D34; }

/* ==========================================================================
   Inner pages: shared hero + breadcrumbs
   ========================================================================== */
.page-hero { padding-block: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px); background: var(--tint); }
.page-hero__inner { display: grid; gap: 16px; justify-items: center; text-align: center; }
.page-hero__inner > * { max-width: 780px; }
.page-hero h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.15; }
.page-hero .lead { margin-inline: auto; }
.page-hero .breadcrumbs ol { justify-content: center; }

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--soft); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: #C3C8D0; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current] { color: var(--ink); }

/* Services archive: numbered blocks */
.svc-rows { display: grid; gap: clamp(48px, 6vw, 80px); }
.svc-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(16px, 2vw, 24px); border-radius: 20px; background: var(--card); }
.svc-hero__media, .svc-row__media { position: relative; }
.svc-row__media { grid-column: 1 / span 7; aspect-ratio: 16 / 10; border-radius: var(--r-panel); overflow: hidden; background: #fff; }
.svc-row__media img, .svc-row__media .art { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.svc-row:hover .svc-row__media img { transform: scale(1.03); }
.svc-row__copy { grid-column: 8 / span 5; display: grid; gap: 14px; padding-right: 12px; }
.svc-row:nth-child(even) .svc-row__media { grid-column: 6 / span 7; order: 2; }
.svc-row:nth-child(even) .svc-row__copy { grid-column: 1 / span 5; padding: 0 0 0 12px; }
.svc-row__num { justify-self: start; padding: 4px 10px; border-radius: 6px; background: var(--hl); color: var(--ink); font-size: 13px; font-weight: 600; }
.svc-row__title { font-size: clamp(26px, 2.6vw, 34px); }
.svc-row__title a:hover { color: var(--accent); }
.scope { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.scope li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-btn); background: #fff; font-size: 14px; font-weight: 500; color: var(--ink); }
.scope li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* Service detail */
.svc-hero { padding-block: clamp(32px, 5vw, 64px); background: var(--tint); }
.svc-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.svc-hero__copy { display: grid; gap: 18px; justify-items: start; }
.svc-hero h1 { font-size: clamp(34px, 4vw, 50px); line-height: 1.18; }
.svc-hero__media { aspect-ratio: 16 / 11; border-radius: var(--r-card); overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(15,17,21,.06); }
.svc-hero__media img, .svc-hero__media .art { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.problem { display: grid; grid-template-columns: 1fr 3fr; gap: 32px; }
.problem__body { display: grid; gap: 18px; }
.problem__body p { font-size: clamp(20px, 2vw, 26px); line-height: 1.45; letter-spacing: -.01em; color: var(--ink); font-weight: 500; }
.problem__body p + p { font-size: 16.5px; font-weight: 400; color: var(--muted); letter-spacing: 0; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: var(--r-card); background: var(--card); }
.pillar__num { justify-self: start; padding: 3px 9px; border-radius: 6px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.pillar h3 { font-size: 20px; }
.pillar p { font-size: 15px; }

.includes { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.includes__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.includes__list li { display: flex; gap: 10px; align-items: flex-start; padding: 16px; border-radius: var(--r-panel); background: #fff; border: 1px solid var(--border); font-weight: 500; font-size: 15px; line-height: 1.45; color: var(--ink); }
.includes__list .icon { flex-shrink: 0; color: var(--accent); }

.dark { background: var(--tint); }
.dark .label { background: #fff; }
.benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.benefit { display: grid; gap: 8px; padding: 24px; border-radius: var(--r-card); background: #fff; }
.benefit h3 { font-size: 20px; }
.benefit p { font-size: 15px; }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.steps li { display: grid; align-content: start; gap: 10px; padding: 20px; border-radius: var(--r-card); background: var(--card); }
.steps__num { justify-self: start; padding: 3px 9px; border-radius: 6px; background: var(--hl); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.steps h3 { font-size: 17px; }
.steps p { font-size: 14.5px; }
.tech { display: flex; flex-wrap: wrap; gap: 8px; }
.tech li { padding: 8px 14px; border-radius: var(--r-btn); background: #fff; border: 1px solid var(--border); font-size: 14px; font-weight: 500; color: var(--ink); }

.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.faq__list { display: grid; gap: 10px; }
.faq__item { border-radius: var(--r-panel); background: var(--card); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 500; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { flex-shrink: 0; transition: transform .25s var(--ease); }
.faq__item[open] summary .icon { transform: rotate(45deg); }
.faq__item p { padding: 0 20px 18px; font-size: 15px; }

/* Projects */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.filter { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-btn); border: 1px solid var(--border); background: #fff; font-size: 14.5px; font-weight: 500; color: var(--ink); transition: all .2s; }
.filter:hover { border-color: #C9CED6; }
.filter.is-active { background: var(--black); border-color: var(--black); color: #fff; }
.filter sup { margin-left: 4px; font-size: 11px; opacity: .7; }
.is-hidden { display: none !important; }
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proj-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 12px 12px 16px; border-radius: var(--r-card); background: var(--card); transition: background .25s; }
.proj-card:hover { background: #E6EAF0; }
.proj-card__media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-panel); overflow: hidden; background: #fff; }
.proj-card__media img, .proj-card__media .art { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.proj-card:hover .proj-card__media img { transform: scale(1.04); }
.proj-card__overlay { display: none; }
.proj-card__meta { display: flex; flex-wrap: wrap; gap: 6px; padding-inline: 4px; }
.proj-card__meta span { padding: 3px 8px; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 500; color: var(--muted); }
.proj-card__title { padding-inline: 4px; font-size: 19px; }
.proj-card__text { padding-inline: 4px; font-size: 14.5px; }
.proj-card__link::after { content: ""; position: absolute; inset: 0; }
.proj-card:hover .proj-card__title { color: var(--accent); }

.proj-hero { padding-block: clamp(32px, 4vw, 56px) 0; }
.proj-hero__head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px 56px; align-items: end; margin-bottom: 32px; }
.proj-hero h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.1; margin-top: 14px; }
.proj-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.proj-facts div { padding: 12px 14px; border-radius: var(--r-panel); background: var(--card); }
.proj-facts dt { font-size: 12.5px; color: var(--soft); }
.proj-facts dd { margin: 2px 0 0; font-weight: 500; color: var(--ink); }
.proj-facts a { color: var(--accent); }
.proj-shot { border-radius: 20px; background: var(--tint); padding: clamp(16px, 4vw, 48px) clamp(16px, 4vw, 48px) 0; overflow: hidden; }
.proj-shot__browser { max-width: 1000px; margin-inline: auto; border-radius: 12px 12px 0 0; overflow: hidden; background: #fff; box-shadow: 0 20px 50px -20px rgba(15,17,21,.3); }
.proj-shot__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #F1F3F6; }
.proj-shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: #D4D8DF; }
.proj-shot__bar span { margin-left: 10px; padding: 3px 12px; border-radius: 6px; background: #fff; font-size: 12px; }
.proj-shot__browser img { width: 100%; }
.proj-body { display: grid; grid-template-columns: 1fr 1.8fr; gap: clamp(28px, 4vw, 64px); }
.proj-body__aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: grid; gap: 16px; justify-items: start; }
.proj-body__main { display: grid; gap: 36px; }
.proj-block { display: grid; gap: 10px; }
.proj-block h2 { font-size: clamp(22px, 2.2vw, 28px); }
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.results div { padding: 20px; border-radius: var(--r-card); background: var(--tint); }
.results strong { display: block; font-size: 34px; font-weight: 600; color: var(--accent); }
.results span { display: block; margin-top: 6px; font-size: 14px; }
.gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.gallery figure { border-radius: var(--r-panel); overflow: hidden; }
.gallery img { width: 100%; }

/* Article */
.article-hero { padding-block: clamp(32px, 4vw, 56px) 0; }
.article-hero__inner { display: grid; gap: 16px; max-width: 860px; justify-items: start; }
.article-hero h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.2; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; }
.article-meta__author { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; }
.article-meta__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--black); color: #fff; font-size: 11px; font-weight: 700; }
.article-cover { position: relative; margin-top: 32px; aspect-ratio: 21 / 9; border-radius: var(--r-card); overflow: hidden; background: var(--card); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-cover .cover__title { font-size: clamp(24px, 3vw, 40px); max-width: 24ch; -webkit-line-clamp: 4; }
.article-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 180px; gap: clamp(28px, 4vw, 56px); padding-block: clamp(40px, 5vw, 64px); }
.toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; padding: 18px; border-radius: var(--r-card); background: var(--card); }
.toc__title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc a { display: block; padding: 6px 8px; border-radius: 6px; font-size: 13.5px; line-height: 1.4; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { background: #fff; color: var(--accent); }
.share { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: grid; gap: 10px; }
.share a { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.share a:hover { color: var(--accent); }

.prose { max-width: 72ch; font-size: 17px; line-height: 1.75; color: #374151; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2em; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.25; }
.prose h3 { margin-top: 1.6em; font-size: clamp(19px, 1.8vw, 22px); line-height: 1.3; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote { padding: 16px 20px; border-radius: var(--r-panel); background: var(--tint); font-size: 18px; color: var(--ink); }
.prose img, .prose figure { border-radius: var(--r-panel); }
.prose hr { border: 0; height: 1px; background: var(--border); margin-block: 2.2em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 11px 13px; border-bottom: 1px solid var(--border); text-align: left; }
.prose th { background: var(--card); color: var(--ink); font-weight: 600; }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--card); font-size: .9em; }

.post-cta { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin-top: 48px; padding: 28px; border-radius: var(--r-card); background: var(--tint); }
.post-cta h2 { font-size: 22px; }
.post-cta p { margin-top: 6px; }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.contact__intro { display: grid; gap: 20px; position: sticky; top: calc(var(--header-h) + 24px); }
.contact__channels { display: grid; gap: 10px; }
.channel { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-panel); background: var(--card); }
.channel__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #fff; color: var(--accent); flex-shrink: 0; }
.channel small { display: block; font-size: 12.5px; color: var(--soft); }
.channel strong { font-weight: 500; font-size: 15.5px; color: var(--ink); }
a.channel:hover { background: #E6EAF0; }
.form-card { padding: clamp(22px, 3vw, 36px); border-radius: 20px; background: #fff; border: 1px solid var(--border); }
.form-card h2 { font-size: 24px; margin-bottom: 6px; }
.form-card > p { margin-bottom: 24px; }

.zng-form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zng-form .full { grid-column: 1 / -1; }
.zng-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.zng-form input:not([type=submit]):not([type=checkbox]), .zng-form select, .zng-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #D5D9E0; border-radius: var(--r-btn); background: #fff; font-size: 15.5px; font-weight: 400; color: var(--ink); transition: border-color .2s, box-shadow .2s; appearance: none; }
.zng-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234B5565' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.zng-form textarea { min-height: 130px; resize: vertical; }
.zng-form input:focus, .zng-form select:focus, .zng-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(20,110,245,.12); }
.zng-form ::placeholder { color: #9CA3AF; }
.zng-form .wpcf7-form-control-wrap { display: block; }
.zng-form .consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; font-weight: 400; color: var(--muted); }
.zng-form .consent .wpcf7-form-control-wrap { display: inline-flex; margin-top: 2px; }
.zng-form .consent input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.zng-form .wpcf7-list-item { margin: 0; }
.zng-form .submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.zng-form input[type=submit] { min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-btn); background: var(--accent); color: #fff; font-weight: 500; font-size: 15px; cursor: pointer; }
.zng-form input[type=submit]:hover { background: var(--accent-600); }
.zng-form .wpcf7-not-valid-tip { margin-top: 4px; font-size: 13px; color: #DC2626; }
.zng-form .wpcf7-response-output { margin: 18px 0 0 !important; padding: 12px 14px !important; border-radius: var(--r-btn); border: 1px solid var(--border) !important; font-size: 14.5px; }
.zng-form.sent .wpcf7-response-output { border-color: #16A34A !important; background: #F0FDF4; color: #166534; }
.form-missing { padding: 18px; border-radius: var(--r-panel); background: var(--card); }

.map { position: relative; border-radius: 20px; overflow: hidden; background: var(--card); }
.map iframe { width: 100%; height: 100%; border: 0; }
.office { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: stretch; }
.office__card { display: grid; align-content: space-between; gap: 20px; padding: clamp(22px, 3vw, 36px); border-radius: 20px; background: var(--card); }
.office__card h2 { font-size: 26px; }
.office .map { min-height: 340px; }

/* About */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.split__media { grid-column: 1 / span 6; position: relative; }
.split__copy { grid-column: 8 / span 5; display: grid; gap: 18px; justify-items: start; }
.about-collage { position: relative; aspect-ratio: 5 / 4.4; }
.about-collage__a, .about-collage__b { position: absolute; aspect-ratio: 16 / 10; border-radius: var(--r-card); overflow: hidden; background: var(--card); }
.about-collage__a { left: 0; top: 0; width: 78%; }
.about-collage__b { right: 0; bottom: 0; width: 60%; border: 6px solid #fff; }
.about-collage img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.about-collage__badge { position: absolute; left: 6%; bottom: 8%; padding: 16px 18px; border-radius: var(--r-card); background: var(--hl); color: var(--ink); max-width: 210px; }
.about-collage__badge strong { display: block; font-size: 34px; font-weight: 600; line-height: 1; }
.about-collage__badge span { font-size: 13.5px; }
.ticks { display: grid; gap: 12px; }
.ticks li { display: flex; gap: 10px; }
.ticks .icon { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.ticks strong { display: block; font-weight: 500; color: var(--ink); }
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.value { display: grid; gap: 10px; padding: 24px; border-radius: var(--r-card); background: var(--card); }
.value__num { justify-self: start; padding: 3px 9px; border-radius: 6px; background: #fff; font-size: 13px; font-weight: 600; color: var(--accent); }
.value h3 { font-size: 20px; }
.value p { font-size: 15px; }
.mission { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mission > div { display: grid; align-content: start; gap: 12px; justify-items: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-card); background: #fff; border: 1px solid var(--border); }
.mission h3 { font-size: clamp(20px, 2vw, 26px); }
.stats-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 32px; }
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.why > div { display: grid; gap: 8px; padding: 22px; border-radius: var(--r-card); background: #fff; }
.why h3 { font-size: 18px; }
.why p { font-size: 14.5px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { padding: 22px; border-radius: var(--r-card); background: #fff; }
.stat__num { display: block; font-size: clamp(36px, 4vw, 52px); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.stat__num .accent { color: var(--accent); }
.stat__label { display: block; margin-top: 8px; font-size: 14px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.member { display: grid; gap: 10px; }
.member__photo { aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: var(--card); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member h3 { font-size: 17px; }
.pullquote { max-width: 900px; margin-inline: auto; text-align: center; display: grid; gap: 16px; }
.pullquote blockquote { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.35; font-weight: 500; color: var(--ink); }
.pullquote cite { font-style: normal; }

/* Quote slider (testimonials) */
.slider { position: relative; }
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 2.2); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.quote { scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--r-card); background: var(--card); }
.quote__stars { display: flex; gap: 2px; color: #F59E0B; }
.quote__text { font-size: 17px; color: var(--ink); }
.quote__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; display: grid; place-items: center; font-weight: 600; color: var(--accent); }
.quote__who strong { display: block; color: var(--ink); font-weight: 500; }
.quote__who span { font-size: 14px; }

/* Generic */
.notfound { min-height: 55vh; display: grid; place-items: center; text-align: center; }
.notfound__code { font-size: clamp(100px, 16vw, 200px); font-weight: 700; line-height: .9; color: var(--hl); }
.page-content { padding-block: clamp(40px, 5vw, 80px); }
.page-content .prose { margin-inline: auto; }
.art { width: 100%; height: 100%; }

/* Reveal (only with JS) */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.js [data-reveal] { opacity: 1; transform: none; }
	/* Static, even logo grid when the device asks for reduced motion (no edge fade, no uneven wrapping). */
	.logo-marquee { -webkit-mask-image: none; mask-image: none; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
	.logo-marquee__track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; width: auto; animation: none; transform: none; }
	.logo-marquee__track [aria-hidden="true"] { display: none; }
	.logo-marquee + .logo-marquee { margin-top: 12px; }
	.logo-tile { width: auto; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
	.logo-marquee__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.nav { display: none; }
	.menu-btn { display: grid; }
	.header-actions { margin-left: auto; }
	.hero__grid { grid-template-columns: 1fr; }
	.hero__copy { max-width: 640px; }
	.about-strip { grid-template-columns: 1fr; gap: 18px; }
	.steps { grid-template-columns: repeat(3, 1fr); }
	.article-layout { grid-template-columns: minmax(0, 1fr); }
	.toc { position: static; max-height: none; }
	.share { position: static; display: flex; flex-wrap: wrap; gap: 18px; }
	.prose { max-width: none; }
	.team-grid { grid-template-columns: repeat(3, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
	.footer-brand, .footer-col--news { grid-column: span 3; }
	.footer-col--news { max-width: 420px; }
}

@media (max-width: 900px) {
	:root { --header-h: 68px; }
	.topbar__msg { display: none; }
	.topbar__inner { justify-content: center; }
	.section-head--row { grid-template-columns: 1fr; }
	.svc-grid > :nth-child(n) { grid-column: 1 / -1; }
	.svc-grid > :nth-child(4n+2) .svc-card__panel, .svc-grid > :nth-child(4n+3) .svc-card__panel { aspect-ratio: 16 / 8; height: auto; max-height: none; min-height: 0; }
	.band__panel { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
	.feature--big { grid-column: 1 / -1; grid-row: auto; min-height: 260px; }
	.feature { min-height: 160px; }
	.photo-grid { grid-template-columns: repeat(2, 1fr); }
	.split, .svc-row { grid-template-columns: 1fr; }
	.split__media, .split__copy, .svc-row__media, .svc-row__copy, .svc-row:nth-child(even) .svc-row__media, .svc-row:nth-child(even) .svc-row__copy { grid-column: 1 / -1 !important; order: 0; padding: 0; }
	.svc-row__copy { padding: 4px 4px 8px !important; }
	.proj-grid { grid-template-columns: repeat(2, 1fr); }
	.post-grid { grid-template-columns: repeat(2, 1fr); }
	.post-card--lead { grid-template-columns: 1fr; }
	.blog-home { grid-template-columns: 1fr; }
	.blog-item--big { grid-row: auto; }
	.svc-hero__grid, .problem, .includes, .faq, .contact, .proj-body, .office, .proj-hero__head, .stats-intro, .mission, .values { grid-template-columns: 1fr; }
	.contact__intro, .proj-body__aside { position: static; }
	.pillars, .benefits, .why { grid-template-columns: 1fr; }
	.stats { grid-template-columns: 1fr 1fr; }
	.gallery, .results { grid-template-columns: 1fr; }
	.support__inner { grid-template-columns: 1fr; }
	.support__copy { padding-bottom: 8px; }
	.support__visual { min-height: 240px; }
	.arc--1, .arc-orbit--1 { width: 260px; }
	.arc--2, .arc-orbit--2 { width: 380px; }
	.arc--3, .arc-orbit--3 { width: 500px; }
	.support__hub { width: 140px; padding-top: 26px; bottom: 16px; }
	.slider__track { grid-auto-columns: 86%; }
}

@media (max-width: 640px) {
	.topbar__links { gap: 14px; font-size: 13.5px; }
	.topbar__links a + a { padding-left: 14px; }
	.header-actions .btn { display: none; }
	.hero__title { font-size: clamp(32px, 9vw, 40px); }
	.hero .btn-row .btn { flex: 1 1 auto; }
	.collage { height: 300px; gap: 8px; grid-template-columns: 1fr 1.1fr 1fr; }
	.collage__h, .collage__i, .collage__j { display: none; }
	.collage__b, .collage__e, .collage__g { margin: 6px; }
	.logo-tile { width: 150px; height: 64px; padding: 12px 18px; }
	.logo-tile img { max-height: 32px; max-width: 110px; }
	.photo-grid__item { aspect-ratio: 4 / 3; }
	.about-strip { padding: 20px; }
	.about-strip__stats { gap: 20px; }
	.band { padding: 16px; border-radius: 16px; }
	.band__head .btn { display: none; }
	.band__panel { grid-template-columns: 1fr; }
	.feature--big { min-height: 220px; }
	.chip-pill { font-size: 11px; padding: 4px 8px; }
	.chipmap__hub { width: 52px; height: 52px; }
	.svc-card { padding: 14px 14px 20px; }
	.svc-card__panel { aspect-ratio: 16 / 10 !important; }
	.scope { grid-template-columns: 1fr; }
	.steps, .includes__list { grid-template-columns: 1fr; }
	.proj-grid, .post-grid { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.zng-form .grid { grid-template-columns: 1fr; }
	.post-cta { grid-template-columns: 1fr; }
	.social-row { flex-direction: column; align-items: flex-start; }
	.pill { min-width: 0; flex: 1 1 140px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-brand, .footer-col--news { grid-column: 1 / -1; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	.filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
	.filter { flex-shrink: 0; }
	.article-cover { aspect-ratio: 4 / 3; }
	.wa-float span { display: none; }
	.wa-float { width: 48px; padding: 0; justify-content: center; }
}

@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }