:root {
  --body-font: Inter, sans-serif;
  --menu-font: Inter, sans-serif;
  --title-font: Inter, sans-serif;
  --text-font: Inter, sans-serif;
  --icon-font: "remixicon";
  --body-bg: #020504;
  --body-bg-2: #050706;
  --body-gradient: radial-gradient(circle at 12% -8%, rgba(232, 255, 50, .08), transparent 420px), radial-gradient(circle at 85% 7%, rgba(255, 255, 255, .055), transparent 360px), linear-gradient(180deg, #020504 0%, #050706 48%, #020504 100%);
  --widget-bg: #0b0e0d;
  --widget-bg-2: #121514;
  --widget-bg-3: #191c1a;
  --dynamic-bg: var(--widget-bg-2);
  --gray-bg: #111514;
  --accent-color: #e8ff32;
  --accent-hover-color: #f0ff55;
  --accent-soft: rgba(232, 255, 50, .14);
  --white-color: #ffffff;
  --title-color: #f4f5f1;
  --title-hover-color: #e8ff32;
  --text-color: #f4f5f1;
  --meta-color: #a9afaa;
  --meta-color-2: #777d79;
  --header-bg: rgba(5, 8, 7, .72);
  --header-color: #f4f5f1;
  --header-hover-color: #e8ff32;
  --submenu-bg: var(--widget-bg-2);
  --submenu-color: #f4f5f1;
  --submenu-hover-color: #e8ff32;
  --submenu-meta-color: #a9afaa;
  --submenu-gray-bg: var(--widget-bg-3);
  --footer-bg: var(--body-bg);
  --footer-color: #f4f5f1;
  --footer-hover-color: #e8ff32;
  --footer-text-color: #a9afaa;
  --footer-meta-color: #777d79;
  --footer-gray-bg: var(--widget-bg-2);
  --footerbar-bg: #050706;
  --footerbar-color: #a9afaa;
  --footerbar-hover-color: #e8ff32;
  --btn-bg: #e8ff32;
  --btn-color: #050704;
  --btn-dark-bg: #050706;
  --btn-dark-color: #ffffff;
  --modal-bg: var(--widget-bg);
  --border-color: rgba(255, 255, 255, .105);
  --border-strong-color: rgba(255, 255, 255, .22);
  --rgba: #ffffff;
  --rgba-05: rgba(255, 255, 255, .05);
  --rgba-10: rgba(255, 255, 255, .10);
  --rgba-20: rgba(255, 255, 255, .20);
  --rgba-60: rgba(255, 255, 255, .60);
  --rgba-90: rgba(255, 255, 255, .90);
  --shadow: 0 28px 70px rgba(0, 0, 0, .42);
  --btn-shadow: rgba(232, 255, 50, .22);
  --input-shadow: rgba(232, 255, 50, .18);
  --header: 4.5rem;
  --logo: 2.5rem;
  --container: 1220px;
  --sidebar: 300px;
  --gap: 3rem;
  --base: 16/10;
  --story: 4/5;
  --card: 5/4;
  --video: 16/9;
  --square: 1/1;
  --title-weight: 900;
  --title-line-height: .98;
  --letter-spacing: -.055em;
  --line-clamp: 4;
  --rounded: 0;
  --rounded-full: 9999px;
  --bg: var(--body-bg);
  --surface: var(--widget-bg);
  --surface-2: var(--widget-bg-2);
  --surface-3: var(--widget-bg-3);
  --media-bg: #080a09;
  --media-bg-alt: #141816;
  --line: var(--border-color);
  --line-strong: var(--border-strong-color);
  --text: var(--text-color);
  --muted: var(--meta-color);
  --muted-2: var(--meta-color-2);
  --accent: var(--accent-color);
  --link-hover-color: #f8ffae;
  --link-underline: rgba(239, 255, 122, 0.72);
  --card-action-hover: #f0ff55;
  --card-action-icon-bg: #e8ff32;
  --card-action-icon-fg: #050704;
  --card-action-border-hover: rgba(232, 255, 50, 0.62);
  --card-action-soft-bg: rgba(232, 255, 50, 0.08);
  --card-action-soft-border: rgba(232, 255, 50, 0.62);
  --divider-color: rgba(255, 255, 255, 0.14);
  --logo-dark-display: none;
  --bespoke-border: rgba(255, 255, 255, 0.08);
  --bespoke-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --bespoke-text-color: var(--text);
  --bespoke-title-color: var(--accent);
  --bespoke-desc-color: var(--muted);
  --bespoke-icon-bg: linear-gradient(135deg, rgba(232, 255, 50, 0.15), rgba(232, 255, 50, 0.05));
  --bespoke-icon-border: rgba(232, 255, 50, 0.3);
  --bespoke-icon-color: var(--accent);
  --bespoke-icon-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  --bespoke-close-hover: var(--accent);
  --nav-offset: 74px;
  --home-section-gap: 58px;
  --home-section-pad: 58px;
  --site-section-gap: 40px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --page-section-gap: 48px;
  --page-pad-top: clamp(32px, 4vw, 52px);
  --page-pad-bottom: clamp(48px, 6vw, 78px);
  --hero-pad-bottom: 40px;
  --kicker-gap: 16px;
  --title-gap: 20px;
  --lead-gap: 28px;
  --content-para-gap: 16px;
  --section-head-gap: 28px;
  --panel-bg: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.018)), rgba(255,255,255,.018);
  --panel-bg-flat: rgba(255,255,255,.024);
  --panel-border: rgba(255,255,255,.12);
}

body.light {
  --bg: var(--body-bg);
  --surface: var(--widget-bg);
  --surface-2: var(--widget-bg-2);
  --surface-3: var(--widget-bg-3);
  --line: var(--border-color);
  --line-strong: var(--border-strong-color);
  --text: var(--text-color);
  --muted: var(--meta-color);
  --muted-2: var(--meta-color-2);
  --accent: var(--accent-color);
  --bespoke-text-color: var(--text);
  --bespoke-title-color: var(--accent);
  --bespoke-desc-color: var(--muted);
  --bespoke-icon-color: var(--accent);
  --bespoke-close-hover: var(--accent);
  --media-bg: #e8ebe3;
  --media-bg-alt: #f4f5ef;
  --logo-light-display: none;
  --logo-dark-display: inline-block;
  --bespoke-bg: rgba(255, 255, 255, 0.85);
  --bespoke-border: rgba(0, 0, 0, 0.07);
  --bespoke-shadow: 0 24px 64px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.60);
  --bespoke-icon-bg: linear-gradient(135deg, rgba(5, 7, 6, 0.05), rgba(5, 7, 6, 0.02));
  --bespoke-icon-border: rgba(0, 0, 0, 0.12);
  --bespoke-icon-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
  --body-bg: #eff0e9;
  --body-bg-2: #f4f5ef;
  --body-gradient: radial-gradient(circle at 12% -8%, rgba(190,214,0,.10), transparent 420px), radial-gradient(circle at 85% 7%, rgba(5,7,4,.055), transparent 360px), linear-gradient(180deg, #f4f5ef 0%, #e9ece4 100%);
  --widget-bg: #ffffff;
  --widget-bg-2: #f7f8f2;
  --widget-bg-3: #eceee6;
  --dynamic-bg: #f7f8f2;
  --gray-bg: #fafbf5;
  --accent-color: #b8d200;
  --accent-hover-color: #a6bf00;
  --accent-soft: rgba(184, 210, 0, .14);
  --title-color: #0b0e0c;
  --title-hover-color: #b8d200;
  --text-color: #0b0e0c;
  --meta-color: #4f5651;
  --meta-color-2: #68716b;
  --header-bg: rgba(255,255,255,.84);
  --header-color: #0b0e0c;
  --header-hover-color: #b8d200;
  --footer-color: #0b0e0c;
  --footer-hover-color: #b8d200;
  --footer-text-color: #313833;
  --footer-meta-color: #68716b;
  --border-color: rgba(5,7,4,.12);
  --border-strong-color: rgba(5,7,4,.24);
  --shadow: 0 22px 70px rgba(20,24,18,.09);
  --link-color: #4a5a00;
  --link-hover-color: #627400;
  --link-underline: rgba(74, 90, 0, 0.42);
  --card-action-color: #536600;
  --card-action-hover: #6a8000;
  --card-action-icon-bg: #b8d200;
  --card-action-icon-fg: #050704;
  --card-action-border-hover: rgba(83, 102, 0, 0.38);
  --card-action-soft-bg: rgba(83, 102, 0, 0.08);
  --card-action-soft-border: rgba(83, 102, 0, 0.38);
  --divider-color: var(--border-strong-color);
  --panel-bg: rgba(255,255,255,.72);
  --panel-bg-flat: rgba(255,255,255,.72);
  --panel-border: rgba(5,7,4,.12);
  color-scheme: light;
  background: var(--body-gradient);
  /* Logo displays override */
  /* Bespoke Badge / Announcement Popup Custom Variables override */
  color: var(--text);
}

@media (max-width: 900px) {
  :root {
  --site-section-gap: 42px;
  --page-section-gap: 40px;
  --home-section-gap: 44px;
  --home-section-pad: 44px;
  }
}

@media (max-width: 640px) {
  :root {
  --site-section-gap: 32px;
  --page-section-gap: 32px;
  --page-pad-top: clamp(28px, 4vw, 40px);
  --page-pad-bottom: clamp(40px, 5vw, 56px);
  --hero-pad-bottom: 28px;
  --kicker-gap: 12px;
  --title-gap: 16px;
  --lead-gap: 22px;
  --section-head-gap: 20px;
  --home-section-gap: 34px;
  --home-section-pad: 34px;
  }
}

*,*::before,*::after {box-sizing: border-box;}
html {scroll-behavior: smooth; -webkit-text-size-adjust: 100%;}
body {margin: 0; padding-top: var(--nav-offset, 74px); color-scheme: dark; color: var(--text); font-family: Inter, Arial, sans-serif; background:
    radial-gradient(circle at 12% -8%, rgba(232, 255, 50, .08), transparent 420px),
    radial-gradient(circle at 85% 7%, rgba(255, 255, 255, .055), transparent 360px),
    linear-gradient(180deg, #020504 0%, #050706 48%, #020504 100%); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
body:before {content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px); background-size: 88px 88px; mask-image: radial-gradient(circle at 50% 4%, black, transparent 72%);}
img,picture,video,canvas,svg {display: block; max-width: 100%; height: auto;}
a {color: inherit; text-decoration: none;}
button,input,textarea,select {font: inherit;}

/* Content / prose links — one system site-wide */
:is( .home-rich-text,.sa-rich-content,.rich-text,.article-body,.case-story,.service-includes,.legal-panel,.modal-copy,.atene-cookie-policy-link,.empty-state,.faq-list ) a:not(.btn):not(.more):not(.logo) {color: var(--link-color); border-bottom: 1px solid var(--link-underline); text-decoration: none; font-weight: 700; transition: color .18s ease, border-color .18s ease;}
:is( .home-rich-text,.sa-rich-content,.rich-text,.article-body,.case-story,.service-includes,.legal-panel,.modal-copy,.atene-cookie-policy-link,.empty-state,.faq-list ) a:not(.btn):not(.more):not(.logo):hover {color: var(--link-hover-color); border-bottom-color: var(--link-hover-color);}
:is( .home-rich-text,.sa-rich-content,.rich-text,.article-body,.case-story,.service-includes,.legal-panel,.modal-copy,.atene-cookie-policy-link,.empty-state,.faq-list ) a:not(.btn):not(.more):not(.logo) :is(strong,b) {color: inherit; font-weight: 900;}
.wrap {width: min(100% - 64px, 1220px); margin-inline: auto;}
.nav {position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: 16px; background: transparent; transform: translateY(0); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform;}
.nav.nav--hidden {transform: translateY(calc(-1 * var(--nav-offset))); pointer-events: none;}

@media (prefers-reduced-motion: reduce) {
  .nav {transition: none;}
}

.navin {min-height: 58px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: 14px; border: 1px solid rgba(255,255,255,.11); background: rgba(5, 8, 7, .72); backdrop-filter: blur(16px); box-shadow: 0 20px 60px rgba(0,0,0,.24);}
.logo {display: inline-flex; align-items: center; width: max-content; margin: 0; font-size: 27px; font-weight: 900; letter-spacing: -.055em; line-height: 1;}
.logo a {display: inline-flex; align-items: center; color: inherit; text-decoration: none;}
.nav .logo {padding-left: 0;}
.logo span {color: var(--accent); font-size: .68em; margin-left: 2px;}
.menu {display: flex; align-items: center; gap: 26px; color: #e9ece8; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;}
.menu a,.foot a,.more,.social i {transition: color .22s ease, opacity .22s ease, transform .22s ease;}
.menu a:hover,.foot a:hover,.more:hover,.social i:hover {color: var(--card-action-color);}
.navbtn {justify-self: end; margin-right: 14px;}
.btn {min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 22px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.018); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .01em; text-transform: uppercase; cursor: pointer; transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;}
.btn i {font-size: 18px; transition: transform .22s ease;}
.btn:hover {transform: translateY(-2px); border-color: rgba(232,255,50,.78); background: rgba(232,255,50,.06);}
.btn:hover i,.more:hover i,.note a:hover i {transform: translate(2px, -2px);}
.btn.accent {background: var(--accent); border-color: var(--accent); color: #050704;}
.btn.accent:hover {background: #f0ff55;}
.btn.dark {background: #050706; border-color: #050706; color: #fff;}
.hero {min-height: 530px; display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(430px, .97fr); align-items: center; gap: clamp(42px, 6vw, 88px); padding: 62px 0 56px;}
.kicker {display: flex; align-items: center; gap: 12px; margin: 0 0 23px; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .045em; text-transform: uppercase;}
.kicker:before {content: ""; width: 9px; height: 9px; background: var(--accent); box-shadow: 0 0 18px rgba(232,255,50,.42);}
h1,.hero h2,.about-hero h2,.listing-hero h2,.service-hero h2,.case-hero h2,.article-hero h2,.article-hero h2,.notfound h2 {max-width: 610px; margin: 0 0 24px; font-size: clamp(52px, 6.1vw, 82px); line-height: .94; letter-spacing: -.079em; font-weight: 900;}
h1 em,.hero h2 em {color: var(--accent); font-style: normal; text-shadow: 0 0 30px rgba(232,255,50,.15);}
.lead {max-width: 455px; margin: 0 0 36px; color: #c4cac5; font-size: 15px; line-height: 1.62;}
.actions {display: flex; flex-wrap: wrap; gap: 16px;}
.art {position: relative; min-height: 390px; isolation: isolate;}
.art:before {content: ""; position: absolute; left: 74px; top: 52px; width: 378px; height: 300px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.012); z-index: -1;}
.photo {position: absolute; left: 84px; top: 0; width: 386px; height: 344px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); background:
    linear-gradient(135deg, transparent 0 28%, rgba(255,255,255,.82) 28% 42%, transparent 42%),
    linear-gradient(112deg, #111312 0 34%, #dfdfda 34% 47%, #4b4e49 47% 63%, #151615 63%); filter: grayscale(1); box-shadow: var(--shadow);}
.photo:before {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 44%), linear-gradient(90deg, rgba(0,0,0,.26), transparent 46%, rgba(0,0,0,.38));}
.dots {position: absolute; width: 166px; height: 166px; background-image: radial-gradient(rgba(255,255,255,.31) 1.55px, transparent 1.8px); background-size: 21px 21px; opacity: .78;}
.d1 {left: 8px; top: 184px;}
.d2 {right: 42px; top: 0;}
.years {position: absolute; right: 58px; top: 90px; width: 90px; height: 90px; padding: 0; border: 1px solid var(--divider-color); background: rgba(8,10,9,.8); backdrop-filter: blur(14px); box-shadow: 0 18px 54px rgba(0,0,0,.34); display: flex; align-items: center; justify-content: center; text-align: center;}
.years strong {display: block; color: var(--card-action-color); font-size: 38px; line-height: 1; letter-spacing: -.06em;}
.years span {display: block; margin-top: 8px; font-size: 11px; line-height: 1.35; font-weight: 900; text-transform: uppercase;}
.note {position: absolute; right: 10px; bottom: 18px; width: 440px; max-width: calc(100% - 20px); display: flex; align-items: stretch; background: rgba(20,22,21,.91); border: 1px solid rgba(255,255,255,.035); box-shadow: 0 24px 70px rgba(0,0,0,.34); backdrop-filter: blur(14px);}
.note-years {display: flex; align-items: center; justify-content: center; padding-left: 24px; padding-right: 20px; font-size: 28px; font-weight: 900; color: var(--accent); border-right: 1px solid rgba(255,255,255,.1); flex-shrink: 0;}
.note p {margin: 0; padding: 16px 20px; font-size: 14px; line-height: 1.45; flex: 1; display: flex; align-items: center;}
.note a {width: 62px; display: grid; place-items: center; background: var(--accent); color: #050704; font-size: 26px; flex-shrink: 0; transition: background .22s ease, color .22s ease;}
.note a i {transition: transform .22s ease;}
.brands {margin: 0 calc(50% - 50vw); padding: 24px calc(50vw - 50%); background: linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,.035)); border-top: 1px solid var(--divider-color); border-bottom: 1px solid var(--divider-color);}
.brands p {margin: 0 0 20px; color: #929894; font-size: 11px; font-weight: 900; letter-spacing: .075em; text-transform: uppercase;}
.brands div {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 26px; align-items: center;}
.brands span {min-width: 0; display: flex; align-items: center; gap: 8px; color: #b9beba; font-size: 20px; font-weight: 800; opacity: .92; white-space: nowrap;}
.brands span i {color: #c9cdc9; font-size: 20px;}
.section {padding: 42px 0 0;}
.section header,.insights header {display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 28px;}
h2 {margin: 0; font-size: clamp(31px, 3.4vw, 43px); line-height: .99; letter-spacing: -.056em; font-weight: 900;}
.more {display: inline-flex; align-items: center; gap: 14px; margin-bottom: 8px; color: #eef0ed; font-size: 12px; font-weight: 900; text-transform: uppercase;}
.more i {font-size: 16px; transition: transform .22s ease;}
.cards,.works {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;}
.cards article,.cards .service-item {min-height: 214px; display: flex; flex-direction: column; padding: 22px; border: 1px solid rgba(255,255,255,.075); background:
    linear-gradient(135deg, rgba(255,255,255,.078), rgba(255,255,255,.028)),
    var(--surface-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); transition: transform .24s ease, border-color .24s ease, background .24s ease;}
.cards article:hover,.cards .service-item:hover,.works article:hover .thumb,.posts article:hover {transform: translateY(-4px); border-color: rgba(232,255,50,.72);}
.cards article:hover,.cards .service-item:hover {background: linear-gradient(135deg, var(--card-action-soft-bg), rgba(255,255,255,.035)), var(--surface-2); border-color: var(--card-action-border-hover);}
.cards article > i,.cards .service-item > i {width: 36px; height: 36px; display: grid; place-items: center; margin-top: 4px; margin-bottom: 24px; background: var(--card-action-icon-bg); color: var(--card-action-icon-fg); font-size: 18px; font-style: normal; font-weight: 900;}
.cards article > i.white,.cards .service-item > i.white {background: #f0f0ed;}
.cards h3,.cards h2 {margin: 0 0 14px; font-size: 17px; letter-spacing: -.03em;}
.cards p {margin: 0 0 18px; color: #b9beb9; font-size: 13px; line-height: 1.56;}
.cards footer {margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 20px;}
.cards footer i {font-size: 15px; color: var(--card-action-color);}
.thumb {position: relative; height: 152px; display: grid; place-items: center; margin-bottom: 15px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); background: #111; transition: transform .24s ease, border-color .24s ease, filter .24s ease;}
.thumb:after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 42%, rgba(0,0,0,.24)); pointer-events: none;}
.t1 {background: radial-gradient(circle at 26% 40%, rgba(255,255,255,.18), transparent 16%), linear-gradient(135deg, #050605, #252824 48%, #070908);}
.t2 {background: linear-gradient(90deg, #dcdedb 0 24%, transparent 24% 78%, #e5e5e1 78%), radial-gradient(circle at center, #202321, #050605);}
.t2 i {width: 92px; height: 142px; border: 7px solid #111; border-radius: 24px; background: radial-gradient(circle at 75% 72%, var(--accent) 0 8px, transparent 9px), linear-gradient(#151817, #050606); box-shadow: 0 0 0 1px rgba(255,255,255,.2);}
.t3 {background: repeating-linear-gradient(160deg, transparent 0 18px, rgba(255,255,255,.055) 19px 22px), linear-gradient(135deg, #272a27, #050605);}
.t4 {background: linear-gradient(90deg, #f1f1ec 0 34%, #ded4bb 34%);}
.t4 i {width: 62px; height: 110px; border-radius: 10px 10px 18px 18px; background: linear-gradient(#191a17 0 16%, #e4dfcf 16%); box-shadow: 84px 22px 0 -10px #9b957f;}
.works p {display: flex; justify-content: space-between; gap: 14px; align-items: center; margin: 0;}
.works strong {font-size: 16px; letter-spacing: -.02em;}
.works span {color: #9ca19d; font-size: 11px; font-weight: 800; text-transform: uppercase;}
.insights {display: grid; grid-template-columns: 410px 1fr; gap: 34px; align-items: stretch; padding-top: 62px;}
.insights aside {min-height: 278px; height: 100%; align-self: stretch; padding: 35px 34px 28px; border: 1px solid rgba(255,255,255,.055); background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); display: flex; flex-direction: column;}
.testimonial-panel {flex: 1 1 auto; min-height: 100%; display: flex; flex-direction: column;}
.testimonial-content {flex: 1 1 auto; min-height: 0; overflow: hidden;}
.testimonial-content blockquote {margin-bottom: 0; min-height: 5.5em; max-height: 11em; overflow-y: auto; padding-right: 4px;}
.testimonial-footer {flex-shrink: 0; margin-top: auto; padding-top: 20px;}
.insights aside .arrows {margin-top: 14px;}
.stars {color: var(--accent); font-size: 18px; letter-spacing: 3px; margin-bottom: 20px;}
blockquote {margin: 0 0 28px; color: #e6e9e5; font-size: 18px; line-height: 1.38;}
.person {display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; color: #f1f2ef; font-size: 13px; font-weight: 900;}
.person-avatar {width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 1px solid rgba(232,255,50,.42); background: rgba(232,255,50,.08); flex-shrink: 0;}
.person-avatar img {width: 100%; height: 100%; object-fit: cover; display: block; background-color: var(--media-bg);}
.person-avatar img.person-favicon {object-fit: contain; padding: 11px; background: rgba(255,255,255,.94);}
.person-initials {color: var(--card-action-color); font-size: 16px; font-weight: 900; letter-spacing: -.03em; line-height: 1;}
.person-info {min-width: 0;}
.person-name {display: block; line-height: 1.25;}
.person-role {display: block; margin-top: 4px; color: #9ba09d; font-weight: 500;}
.person span {display: block; margin-top: 4px; color: #9ba09d; font-weight: 500;}
.arrows {display: flex; justify-content: flex-end; gap: 10px;}
.arrows button {width: 42px; height: 42px; color: white; border: 1px solid rgba(255,255,255,.2); background: transparent; cursor: pointer; transition: border-color .22s ease, color .22s ease;}
.arrows button:hover {border-color: var(--card-action-border-hover); color: var(--card-action-color);}
.posts {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;}
.posts article {min-height: 158px; display: grid; align-content: end; padding: 18px; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(180deg, transparent 0 46%, rgba(9,10,9,.95) 46%), repeating-linear-gradient(140deg, #181a18 0 7px, #272a27 8px 12px); transition: transform .24s ease, border-color .24s ease;}
.posts article:nth-child(2) {background: linear-gradient(180deg, transparent 0 46%, rgba(9,10,9,.95) 46%), repeating-linear-gradient(160deg, #262925 0 7px, #080908 8px 15px);}
.posts article:nth-child(3) {background: linear-gradient(180deg, transparent 0 46%, rgba(9,10,9,.95) 46%), linear-gradient(135deg, #4e514c, #111311);}
.posts h3 {min-height: 48px; margin: 0 0 10px; font-size: 15px; line-height: 1.18; letter-spacing: -.02em;}
.posts p {display: flex; justify-content: space-between; align-items: center; margin: 0; color: #9ba09d; font-size: 11px;}
.posts p i,.works p i {color: var(--card-action-color); font-size: 15px;}
.cta {margin-top: 24px; padding: 30px 44px; display: grid; grid-template-columns: 1fr auto; align-items: center; color: #050704; background: linear-gradient(100deg, var(--accent), #f1ff55 55%, #dffd24); box-shadow: 0 24px 70px rgba(232,255,50,.12);}
.cta h2 {font-size: clamp(28px, 4vw, 39px); color: #050704;}
.cta p {margin: 8px 0 0; color: rgba(5,7,4,.72); font-size: 15px;}
.foot {padding: 36px 0 24px; border-top: 1px solid var(--divider-color);}
.footgrid {display: grid; grid-template-columns: 1.45fr .75fr .9fr .9fr 1.4fr; gap: 48px; padding-bottom: 30px;}
.foot p,.foot a,.foot input {display: block; color: #a5aaa7; font-size: 12px; line-height: 1.55;}
.foot .foot-title {margin: 0 0 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;}
.social {display: flex; gap: 17px; margin-top: 20px; color: #cfd2cd; font-size: 16px;}
.foot form {display: grid; grid-template-columns: 1fr 42px; height: 44px; margin-top: 16px;}
.foot input {width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.24); border-right: 0; padding: 0 14px; background: transparent; outline: 0;}
.foot input:focus {border-color: rgba(232,255,50,.7);}
.foot button {color: white; border: 1px solid rgba(255,255,255,.34); background: transparent; cursor: pointer; transition: border-color .22s ease, color .22s ease;}
.foot button:hover {color: var(--card-action-color); border-color: var(--card-action-border-hover);}
.copy {display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; border-top: 1px solid var(--divider-color); color: #8d928e; font-size: 12px;}
.footer-language-switcher {display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.025);}
.footer-language-switcher a {min-width: 32px; min-height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; color: #a5aaa7; font-size: 10px; font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: .04em;}
.footer-language-switcher a.active {background: var(--accent); color: #050704;}
.reveal {opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease;}
.reveal.show {opacity: 1; transform: none;}

@media (max-width: 1080px) {
  .navin {grid-template-columns: 1fr auto;}
  .menu {display: none;}
  .hero,.insights {grid-template-columns: 1fr;}
  .hero {gap: 34px;}
  .art {min-height: 380px; max-width: 580px;}
  .cards,.works,.posts,.brands div,.footgrid {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .brands span {font-size: 19px;}
}

@media (max-width: 700px) {
  .wrap {width: min(100% - 24px, 1220px);}
  .nav {padding-top: 10px;}
  .navin {position: relative; min-height: 60px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding-inline: 10px;}
  .nav .logo {grid-column: 2; justify-self: center; padding-left: 0; font-size: 22px;}
  .nav-actions {display: contents;}
  .navbtn {display: none;}
  .menu-toggle {grid-column: 1; grid-row: 1; justify-self: start;}
  .theme-toggle {grid-column: 3; grid-row: 1; justify-self: end;}
  /* ── Hero ── */
  .hero {min-height: auto; padding: 36px 0 24px; gap: 0;}
  .actions {gap: 10px;}
  .actions .btn {flex: 1 1 calc(50% - 5px); min-width: 0; font-size: 11px; padding: 0 14px;}
  h1,.hero h2,.about-hero h2,.listing-hero h2,.service-hero h2,.case-hero h2,.article-hero h2,.article-hero h2,.notfound h2 {font-size: clamp(40px, 13vw, 56px); letter-spacing: -.07em;}
  .lead {font-size: 14px; margin-bottom: 24px;}
  /* ── Hero art: show as a compact image strip ── */
  .art {display: block !important; position: relative; width: 100%; min-height: 220px; max-width: 100%; margin-top: 28px; overflow: hidden;}
  .art:before {display: none;}
  .dots {display: none;}
  .photo {position: relative; left: auto; top: auto; width: 100%; height: 220px; border-radius: 0;}
  .years {position: absolute; right: 12px; top: 12px; width: 68px; height: 68px; padding: 0; display: flex; align-items: center; justify-content: center;}
  .years strong {font-size: 24px;}
  .note {display: none;}
  /* ── Stats: 3-col compact row ── */
  .stats {display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; max-width: 100% !important; margin-top: 20px !important;}
  .stats p {padding-top: 10px;}
  .stats strong {font-size: 20px;}
  .stats span {font-size: 10px; margin-top: 4px;}
  /* ── Cards / Works / Posts ── */
  .cards,.works {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
  .posts {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
  .footgrid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;}
  .section header,.insights header {grid-template-columns: 1fr; gap: 12px;}
  /* ── Insights ── */
  .insights {padding-top: 0;}
  /* ── Brands ── */
  .brands div {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .brands span {font-size: 17px;}
  /* ── More link ── */
  .more {margin-bottom: 0;}
  /* ── Copy ── */
  .copy {flex-direction: column; align-items: flex-start; gap: 10px;}
}

/* Added interaction and interface upgrades */
.progress {position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 3px; background: transparent;}
.progress span {display: block; width: 0%; height: 100%; background: var(--accent); box-shadow: 0 0 18px rgba(232,255,50,.55);}
.nav-actions {justify-self: end; display: flex; align-items: center; gap: 10px; margin-right: 0;}
.nav-actions .navbtn {margin-right: 0;}
.language-switcher {min-height: 36px; display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); background: rgba(255,255,255,.025);}
.language-switcher a {min-width: 34px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;}
.language-switcher a.active {background: var(--accent); color: #050704;}
.mobile-language-switcher {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px;}
.mobile-language-switcher a {min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 900;}
.mobile-language-switcher a.active {border-color: var(--accent); background: var(--accent); color: #050704;}
.icon-btn {width: 44px; height: 44px; display: inline-grid; place-items: center; color: var(--text); border: 0; background: transparent; cursor: pointer; transition: color .22s ease, transform .22s ease;}
.menu a.active,.mobile-nav a.active {color: var(--card-action-color);}
.icon-btn:hover {color: var(--card-action-color); transform: translateY(-2px);}
.menu-toggle {display: none;}
.mobile-panel {position: fixed; inset: 0; z-index: 15000; display: flex; align-items: flex-start; justify-content: center; padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left)); background:
    radial-gradient(circle at 12% 0%, rgba(232,255,50,.12), transparent 42%),
    rgba(2,5,4,.9); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.34s ease, visibility 0.34s ease; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.mobile-panel.open {opacity: 1; visibility: visible; pointer-events: auto;}
.mobile-shell {width: min(100%, 520px); min-height: 100%; display: flex; flex-direction: column; gap: 22px; transform: translateY(22px); opacity: 0; transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;}
.mobile-panel.open .mobile-shell {transform: translateY(0); opacity: 1;}
.mobile-head {display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.mobile-intro {display: grid; gap: 10px;}
.mobile-intro h2 {margin: 0; font-size: clamp(30px, 8vw, 42px); line-height: 0.98; letter-spacing: -.06em;}
.mobile-lead {margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 36ch;}
.mobile-nav {display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto;}
.mobile-nav a {display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; min-height: 58px; padding: 10px 14px; border: 1px solid var(--panel-border); background: var(--panel-bg); color: inherit; text-decoration: none; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0; transform: translateY(14px); transition:
    opacity 0.34s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease;}
.mobile-nav a > i:first-child {width: 44px; height: 44px; display: grid; place-items: center; background: var(--card-action-icon-bg); color: var(--card-action-icon-fg); font-size: 20px;}
.mobile-nav-arrow {color: var(--card-action-color); font-size: 18px; transition: transform 0.22s ease;}
.mobile-panel.open .mobile-nav a {opacity: 1; transform: translateY(0);}
.mobile-panel.open .mobile-nav a:nth-child(1) {transition-delay: 0.06s;}
.mobile-panel.open .mobile-nav a:nth-child(2) {transition-delay: 0.10s;}
.mobile-panel.open .mobile-nav a:nth-child(3) {transition-delay: 0.14s;}
.mobile-panel.open .mobile-nav a:nth-child(4) {transition-delay: 0.18s;}
.mobile-panel.open .mobile-nav a:nth-child(5) {transition-delay: 0.22s;}
.mobile-panel.open .mobile-nav a:nth-child(6) {transition-delay: 0.26s;}
.mobile-panel.open .mobile-nav a:nth-child(7) {transition-delay: 0.30s;}
.mobile-nav a:hover,.mobile-nav a:focus-visible {border-color: var(--card-action-border-hover); background: linear-gradient(135deg, var(--card-action-soft-bg), rgba(255,255,255,.02));}
.mobile-nav a:hover .mobile-nav-arrow,.mobile-nav a:focus-visible .mobile-nav-arrow {transform: translate(2px, -2px);}
.mobile-nav a.active {border-color: var(--card-action-border-hover); color: var(--card-action-color);}
.mobile-foot {margin-top: 0; padding-top: 8px; opacity: 0; transform: translateY(14px); transition:
    opacity 0.34s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);}
.mobile-panel.open .mobile-foot {opacity: 1; transform: translateY(0); transition-delay: 0.34s;}
.mobile-foot .btn {width: 100%; justify-content: center;}
body.mobile-menu-open {overflow: hidden;}

@media (prefers-reduced-motion: reduce) {
  .mobile-panel,.mobile-shell,.mobile-nav a {transition: none !important;}
}

.stats {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 520px; margin-top: 38px;}
.stats p {margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line-strong);}
.stats strong {display: block; color: var(--text); font-size: 25px; line-height: 1; letter-spacing: -.05em;}
.stats span {display: block; margin-top: 7px; color: var(--muted-2); font-size: 12px; font-weight: 700;}
.spotlight {position: relative; overflow: hidden;}
.spotlight:before {content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(232,255,50,.13), transparent 42%); opacity: 0; transition: opacity .24s ease;}
.spotlight:hover:before {opacity: 1;}
.spotlight > * {position: relative; z-index: 1;}
.service-cards .service-item {cursor: pointer; color: inherit; text-decoration: none;}
.process .steps {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;}
.steps article {min-height: 196px; padding: 24px; border: 1px solid rgba(255,255,255,.075); background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.018)); transition: transform .24s ease, border-color .24s ease;}
.steps article:hover {transform: translateY(-4px); border-color: rgba(232,255,50,.7);}
.steps span {display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 34px; color: #050704; background: var(--accent); font-weight: 900; font-size: 13px;}
.steps h3,.start-steps h2 {margin: 0 0 12px; font-size: 18px; letter-spacing: -.03em;}
.steps p {margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55;}
.filters {display: flex; flex-wrap: wrap; gap: 10px; margin: -4px 0 24px;}
.filters button {min-height: 38px; padding: 0 16px; color: var(--muted); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.018); font-size: 12px; font-weight: 900; text-transform: uppercase; cursor: pointer; transition: background .22s ease, color .22s ease, border-color .22s ease;}
.filters button.active,.filters button:hover {color: var(--card-action-icon-fg); border-color: var(--card-action-icon-bg); background: var(--card-action-icon-bg);}
.work-item.is-hidden {display: none;}
.case {position: absolute; inset: auto 14px 14px 14px; z-index: 2; display: grid; gap: 7px; padding: 14px; background: rgba(5,7,6,.82); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); transform: translateY(14px); opacity: 0; transition: opacity .24s ease, transform .24s ease;}
.thumb:hover .case {transform: translateY(0); opacity: 1;}
.case small {color: var(--muted-2); font-size: 10px; font-weight: 800; text-transform: uppercase;}
.case strong {color: var(--text); font-size: 13px;}
.service-modal {position: fixed; inset: 0; z-index: 110; display: none; place-items: center; padding: 22px; background: rgba(2,5,4,.72); backdrop-filter: blur(18px);}
.service-modal.open {display: grid;}
.modal-card {position: relative; width: min(100%, 560px); padding: 34px; border: 1px solid var(--line-strong); background: rgba(10,13,12,.96); box-shadow: var(--shadow);}
.modal-close {position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--text); border: 1px solid rgba(255,255,255,.18); background: transparent; cursor: pointer;}
.modal-copy {color: var(--muted); line-height: 1.6;}
.modal-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px;}
.modal-list span {display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); color: var(--text); font-size: 13px;}
.modal-list i {color: var(--card-action-color);}
body.light .mobile-panel,body.light .service-modal {background: rgba(244,245,239,.72);}
body.light .navin,body.light .modal-card {background: rgba(255,255,255,.84);}
body.light .btn:not(.accent):not(.dark),body.light .icon-btn {color: #0b0e0c; background: rgba(0,0,0,.02);}
body.light .menu a,body.light .more,body.light .mobile-nav a {color: #111512;}
body.light .photo,body.light .thumb {filter: none;}
body.light .note,body.light .years,body.light .case {background: rgba(255,255,255,.84); color: #0b0e0c;}
body.light .btn.dark {background: #050706; color: white;}
body.light .stars {color: #b4ca00;}

@media (max-width: 1080px) {
  .menu-toggle {display: inline-grid;}
  .theme-toggle {display: inline-grid;}
  .process .steps {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 700px) {
  .nav-actions {display: contents;}
  .navbtn {display: none;}
  .menu-toggle {grid-column: 1; grid-row: 1; justify-self: start;}
  .theme-toggle {display: inline-grid;}
  .theme-toggle {grid-column: 3; grid-row: 1; justify-self: end;}
  .menu-toggle {display: inline-grid;}
  .stats {max-width: 100%;}
  .process .steps,.modal-list {grid-template-columns: 1fr;}
  .filters {gap: 8px;}
  .filters button {flex: 1 1 calc(50% - 8px); padding: 0 10px;}
  .modal-card {padding: 28px 22px 22px;}
}

/* Case study detail page */
.works .work-item {display: block; color: inherit;}
.case-hero {display: block;}
.case-hero h1,.case-hero h2 {max-width: 780px; margin-bottom: 22px;}
.case-meta {display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 0; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line-strong); background: none;}
.case-meta p {display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 28px 0 0; border: 0; min-width: min(100%, 180px);}
.case-meta p + p {padding-left: 28px; border-left: 1px solid var(--divider-color);}
.case-meta span {color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;}
.case-meta strong {text-align: left; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--text);}
.case-cover {margin-bottom: 54px;}
.case-cover .thumb {height: clamp(310px, 46vw, 560px); margin: 0; border-color: rgba(255,255,255,.12); box-shadow: var(--shadow);}
.case-cover .thumb b {font-size: clamp(34px, 7vw, 84px); letter-spacing: -.06em;}
.case-story {display: grid; grid-template-columns: .9fr 1.1fr; gap: 58px; padding: 18px 0 46px; border-bottom: 1px solid var(--divider-color);}
.case-story > p {margin: 0; color: var(--muted); font-size: 18px; line-height: 1.65;}
.case-split {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 42px 0 22px;}
.case-split article {min-height: 230px; padding: 28px; border: 1px solid rgba(255,255,255,.075); background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.018));}
.case-split span {display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; margin-bottom: 44px; color: #050704; background: var(--accent); font-weight: 900; font-size: 13px;}
.case-split h3 {margin: 0 0 12px; font-size: 21px; letter-spacing: -.04em;}
.case-split p {margin: 0; color: var(--muted); line-height: 1.6;}
.case-results {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 20px 0 52px;}
.case-results p {margin: 0; padding: 24px; border: 1px solid rgba(255,255,255,.095); background: rgba(255,255,255,.025);}
.case-results strong {display: block; color: var(--card-action-color); font-size: clamp(38px, 5vw, 62px); line-height: 1; letter-spacing: -.06em;}
.case-results span {display: block; margin-top: 12px; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-transform: lowercase;}
.case-results span::first-letter {text-transform: uppercase;}
.case-results--4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
.about-team-intro {padding-bottom: 28px; border-bottom: 0;}
.about-wrap .team {padding-top: 0; padding-bottom: 52px;}
.about-wrap .team > div {margin-top: 0;}
.case-gallery {display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: repeat(2, 220px); gap: 22px; padding-bottom: 54px;}
.gallery-tile {border: 1px solid rgba(255,255,255,.09); background: linear-gradient(135deg, #181b18, #050605); overflow: hidden;}
.g1 {grid-row: span 2; background: linear-gradient(135deg, rgba(232,255,50,.14), transparent 38%), repeating-linear-gradient(145deg, #090b0a 0 18px, #242823 19px 22px);}
.g2 {background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.2), transparent 18%), linear-gradient(135deg, #262a26, #050605);}
.g3 {background: linear-gradient(90deg, #eceee8 0 40%, #a79f86 40% 100%);}
.next-case {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 48px); margin-bottom: 0; padding: clamp(40px, 4.5vw, 52px) clamp(36px, 4vw, 48px); color: #050704; background: var(--accent); border: 1px solid rgba(5,7,4,.06); box-sizing: border-box;}
.next-case > div {display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 14px); min-width: 0; padding: 0;}
.next-case .kicker {margin: 0; color: #050704;}
.next-case .kicker::after {display: none;}
.next-case h2 {margin: 0; padding: 0; color: #050704; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.06; letter-spacing: -.05em;}
.next-case .kicker::before {background: #050704; box-shadow: none;}
.next-case .btn {flex-shrink: 0; min-height: 52px; padding: 0 clamp(24px, 2.8vw, 32px); gap: 12px; align-self: center;}
.next-case .btn:hover {transform: translateY(-2px); border-color: #050704; background: #111411; color: #fff;}
body.light .case-split article,body.light .case-results p {background: rgba(255,255,255,.7);}
body.light .case-meta {background: transparent !important; border-color: transparent;}
body.light .case-story {border-bottom-color: rgba(5,7,4,.12);}

/* About page uses case-study layout without portfolio meta sidebar */
.about-wrap .case-hero h2,.about-wrap .about-hero h2 {max-width: 780px;}
.about-wrap .case-split {grid-template-columns: repeat(3, minmax(0, 1fr));}

@media (max-width: 1100px) {
  .case-results--4 {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .about-wrap .case-split {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

.values {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 42px 0 54px;}
.values article,.team article {border: 1px solid rgba(255,255,255,.12); background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    rgba(255,255,255,.018); backdrop-filter: blur(10px);}
.values article {min-height: 230px; padding: 28px;}
.values i {display: inline-grid; width: 42px; height: 42px; place-items: center; margin-bottom: 42px; color: #050704; background: var(--accent); font-size: 20px;}
.values h3,.team h3 {margin: 0 0 12px; font-size: 21px; letter-spacing: -.04em;}
.values p,.team p {margin: 0; color: var(--muted); line-height: 1.6;}
.team {padding: 8px 0 70px;}
.team > .kicker {margin-bottom: 18px;}
.team > div {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;}
.team article {min-height: 300px; padding: 26px;}
.team article > span {width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 34px; border: 1px solid var(--card-action-border-hover); color: var(--card-action-color); background: var(--card-action-soft-bg); font-size: 18px; font-weight: 900; letter-spacing: -.03em;}
.team .team-avatar {overflow: hidden; padding: 0; background: var(--media-bg);}
.team .team-avatar img {width: 100%; height: 100%; display: block; object-fit: cover; background-color: var(--media-bg);}
.team p strong {display: inline-block; margin-bottom: 7px; color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: .05em;}
body.light .values article,body.light .team article {background: rgba(255,255,255,.72); border-color: rgba(5,7,4,.12);}

@media (max-width: 700px) {
  .case-meta-cards {grid-template-columns: 1fr;}
  .case-meta {flex-direction: column; gap: 18px;}
  .case-meta p {width: 100%; padding: 0; min-width: 0;}
  .case-meta p + p {padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--divider-color);}
}

@media (max-width: 900px) {
  .case-story,.case-split,.case-results,.case-results--4,.case-meta-cards,.next-case,.values,.team > div {grid-template-columns: 1fr;}
  .case-gallery {grid-template-columns: 1fr; grid-template-rows: repeat(3, 220px);}
  .g1 {grid-row: auto;}
  .values article,.team article {min-height: 0;}
}

@media (max-width: 560px) {
  .case-results--4 {grid-template-columns: 1fr;}
}

@media (max-width: 700px) {
  .case-hero {gap: 30px;}
  .case-story > p {font-size: 15px;}
  .values {padding-bottom: 34px;}
  .team {padding-bottom: 46px;}
  .case-cover .thumb {height: 300px;}
  .next-case {grid-template-columns: 1fr; align-items: stretch; gap: 24px; padding: 32px 28px;}
  .next-case .btn {width: 100%; align-self: stretch;}
}

/* Service detail pages */
.service-hero {display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 58px; align-items: center;}
.service-hero h1,.service-hero h2 {max-width: 720px;}
.service-emblem {min-height: 300px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); background:
    radial-gradient(circle at 50% 45%, rgba(232,255,50,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: var(--shadow);}
.service-emblem i {width: 118px; height: 118px; display: grid; place-items: center; color: var(--card-action-icon-fg); background: var(--card-action-icon-bg); font-size: 54px;}
.case-wrap .service-hero .actions {margin-top: 28px;}
.case-meta-cards {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 0 0 52px;}
.case-meta-cards p {margin: 0; padding: 24px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--panel-border); background: var(--panel-bg-flat); backdrop-filter: blur(10px);}
.case-meta-cards span {color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;}
.case-meta-cards strong {color: var(--text); font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em;}
body.light .case-meta-cards p {background: rgba(255, 255, 255, 0.72); border-color: rgba(5, 7, 4, 0.12);}
.case-emblem--photo {padding: 0; overflow: hidden; background: var(--media-bg);}
.case-emblem--photo img,.case-emblem--photo .post-img {width: 100%; height: 100%; min-height: 300px; display: block; object-fit: cover; object-position: center;}
.service-includes {display: grid; grid-template-columns: .9fr 1.1fr; gap: 58px; padding: 42px 0 20px;}
.include-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
.include-grid span {min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); color: var(--text); font-size: 13px; font-weight: 800;}
.include-grid i {color: var(--card-action-color); font-size: 17px;}
body.light .service-emblem,body.light .include-grid span {background: rgba(255,255,255,.72);}

@media (max-width: 900px) {
  .service-hero,.service-includes,.case-wrap .service-hero,.page-hero {grid-template-columns: 1fr;}
  .service-emblem,.case-emblem--photo img,.case-emblem--photo .post-img,.page-hero-media,.page-hero-media.case-emblem--photo img,.page-hero-media.case-emblem--photo .post-img {min-height: 240px;}
}

@media (max-width: 700px) {
  .service-hero {gap: 30px;}
  .include-grid {grid-template-columns: 1fr;}
}

/* Listing pages */
.listing-hero {max-width: 860px;}
.page-hero {max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 58px; align-items: center;}
.page-hero-copy {min-width: 0;}
.page-hero-copy h1,.page-hero-copy h2 {max-width: 780px;}
.page-hero-copy .lead {max-width: 680px;}
.page-hero-media {min-height: 300px;}
.page-hero-media.case-emblem--photo {padding: 0; overflow: hidden; background: var(--media-bg);}
.page-hero-media.case-emblem--photo img,.page-hero-media.case-emblem--photo .post-img {width: 100%; height: 100%; min-height: 300px; display: block; object-fit: cover; object-position: center;}
.listing-hero h1,.listing-hero h2 {max-width: 860px;}
.listing-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding-bottom: 0;}
.listing-card {min-height: 260px; display: flex; flex-direction: column; padding: 24px; color: inherit; border: 1px solid rgba(255,255,255,.085); background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); transition: transform .24s ease, border-color .24s ease;}
.listing-card:hover {transform: translateY(-4px); border-color: var(--card-action-border-hover);}
.listing-card > i {width: 42px; height: 42px; display: grid; place-items: center; margin-top: 6px; margin-bottom: 28px; color: var(--card-action-icon-fg); background: var(--card-action-icon-bg); font-size: 21px;}
.listing-card span {margin-bottom: 12px; color: var(--card-action-color); font-size: 12px; font-weight: 900;}
.listing-card h3,.listing-card h2 {margin: 0 0 12px; font-size: 19px; letter-spacing: -.03em;}
.listing-card p {margin: 0; color: var(--muted); font-size: 13px; line-height: 1.58;}
.listing-work {padding-bottom: 58px;}
.article-list {display: grid; padding-bottom: 58px; border-top: 1px solid var(--divider-color);}
.article-row {min-height: 108px; display: grid; grid-template-columns: 150px 1fr 42px; gap: 28px; align-items: center; color: inherit; border-bottom: 1px solid var(--divider-color); transition: color .22s ease;}
.article-row:hover h3,.article-row:hover i {color: var(--card-action-color);}
.article-row span {color: var(--muted-2); font-size: 12px; font-weight: 800;}
.article-row h3,.article-row h2 {margin: 0; font-size: clamp(22px, 3vw, 34px); line-height: 1.05; letter-spacing: -.055em; transition: color .22s ease;}
.article-row i {justify-self: end; color: var(--muted-2); font-size: 22px; transition: color .22s ease, transform .22s ease;}
.article-row:hover i {transform: translate(2px, -2px);}
.start-hero {max-width: 920px;}
.start-steps {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding-bottom: 58px;}
body.light .listing-card,body.light .article-row,body.light .article-list {border-color: rgba(5,7,4,.12);}

@media (max-width: 1080px) {
  .listing-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .start-steps {grid-template-columns: 1fr;}
}

@media (max-width: 700px) {
  .listing-grid {grid-template-columns: 1fr;}
  .article-row {grid-template-columns: 1fr 34px; gap: 8px 18px; padding: 22px 0;}
  .article-row span {grid-column: 1 / -1;}
}

/* Article detail pages */
.article-hero {max-width: 900px;}
.article-hero h1,.article-hero h2,.article-hero h2 {max-width: 900px;}
.article-hero > span {display: block; margin-top: 24px; color: var(--muted-2); font-size: 12px; font-weight: 900; text-transform: uppercase;}
.article-cover {height: clamp(260px, 38vw, 460px); border: 1px solid rgba(255,255,255,.1); background-color: var(--surface-3); box-shadow: var(--shadow);}
.article-body {max-width: 780px; padding: 44px 0 70px;}
.article-body p {margin: 0 0 24px; color: var(--muted); font-size: 18px; line-height: 1.75;}

@media (max-width: 700px) {
  .article-body p {font-size: 15px;}
}
/* Design polish: themes, rhythm, real images, marquee, footer */
body.light::before {opacity: .42;}
body.light .mobile-panel,body.light .service-modal {background: rgba(244,245,239,.76);}
body.light .navin {background: rgba(255,255,255,.88); border-color: rgba(5,7,4,.08); box-shadow: 0 10px 40px rgba(5,7,4,.05);}
body.light .modal-card {background: rgba(255,255,255,.88);}
body.light .lead,body.light .cards p,body.light .steps p,body.light .case-story > p,body.light .case-split p,body.light .service-includes p,body.light .listing-card p,body.light .article-body p,body.light .modal-copy,body.light blockquote,body.light .foot p,body.light .foot a,body.light .foot input {color: var(--muted);}
body.light .brands p,body.light .brands span,body.light .stats span,body.light .works span,body.light .case-meta span,body.light .case-results span,body.light .article-row span,body.light .article-hero > span,body.light time {color: var(--muted-2);}
body.light .stats p {border-top-color: var(--line-strong);}
body.light h1,body.light h2,body.light h3,body.light .cards h3,body.light .cards h2,body.light .steps h3,body.light .start-steps h2,body.light .works strong,body.light .posts h3,body.light .person,body.light .case-meta strong,body.light .case-split h3,body.light .listing-card h3,body.light .listing-card h2,body.light .article-row h3,body.light .article-row h2,body.light .article-body,body.light .foot .foot-title,body.light .copy,body.light .copy a {color: var(--text);}
body.light .listing-card span,body.light .case-results strong,body.light .menu a:hover,body.light .more:hover,body.light .social i:hover,body.light .article-row:hover h3,body.light .article-row:hover i {color: var(--card-action-color); background: transparent; border-color: transparent;}
body.light .more,body.light .more i {color: var(--text);}
body.light .more:hover,body.light .more:hover i {color: var(--card-action-color);}
body.light .posts p i,body.light .works p i,body.light .article-row i {color: var(--card-action-color); background: transparent; border-color: transparent;}
body.light .include-grid i {color: var(--card-action-color);}
body.light .btn:not(.accent):not(.dark),body.light .icon-btn,body.light .arrows button,body.light .modal-close,body.light .foot button {color: var(--text); background: rgba(255,255,255,.62); border-color: rgba(5,7,4,.18);}
body.light .kicker {color: var(--text); background: transparent; border-color: transparent;}
body.light h1 em,body.light .hero h2 em {color: #0b0e0c; background: linear-gradient(to bottom, transparent 52%, rgba(184, 210, 0, 0.52) 52%); padding: 0 4px 2px; border-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone;}
body.light .btn.accent,body.light .filters button.active,body.light .filters button:hover,body.light .note a,body.light .cards article > i,body.light .cards .service-item > i,body.light .steps span,body.light .listing-card > i,body.light .ui-card--icon .ui-card__icon,body.light .ui-card--service .ui-card__icon,body.light .sa-service-card > i,body.light .service-emblem i,body.light .case-split span,body.light .service-area-list .listing-card > i,body.light .contact-card > i {background: var(--card-action-icon-bg); color: var(--card-action-icon-fg);}
body.light .cards article,body.light .cards .service-item,body.light .steps article,body.light .insights aside,body.light .case-split article,body.light .case-results p,body.light .listing-card,body.light .include-grid span,body.light .service-emblem,body.light .article-row,body.light .article-list,body.light .article-body,body.light .case-story {background: rgba(255,255,255,.72); border-color: rgba(5,7,4,.12);}
.hero {margin-bottom: 58px;}
.brand-section {margin: 0 0 86px; padding: 0; overflow: hidden;}
.section,.insights,.location-section {position: relative; padding-top: 78px; margin-top: 0;}
.section + .section,.section + .insights,.insights + .location-section,.location-section + .cta {margin-top: 26px;}
.section header,.insights header {margin-bottom: 28px;}
.section header > div,.insights header > div,.location-copy {min-width: 0;}
.section header .kicker,.insights header .kicker,.location-section .kicker,.article-related-head .kicker,:is( .listing-hero,.about-hero,.service-hero,.case-hero,.article-hero,.contact-hero,.legal-hero,.sa-hero,.sa-section-head ) .kicker,.service-area-group header .kicker {width: 100%;}
.section header .kicker::after,.insights header .kicker::after,.location-section .kicker::after,.article-related-head .kicker::after,:is( .listing-hero,.about-hero,.service-hero,.case-hero,.article-hero,.contact-hero,.legal-hero,.sa-hero,.sa-section-head ) .kicker::after,.service-area-group header .kicker::after {content: ""; height: 1px; flex: 1 1 auto; min-width: 54px; margin-left: 16px; background: linear-gradient(90deg, rgba(232,255,50,.72), rgba(232,255,50,.18) 42%, transparent 100%);}
body.light .section header .kicker::after,body.light .insights header .kicker::after,body.light .location-section .kicker::after,body.light .article-related-head .kicker::after,body.light :is( .listing-hero,.about-hero,.service-hero,.case-hero,.article-hero,.contact-hero,.legal-hero,.sa-hero,.sa-section-head ) .kicker::after,body.light .service-area-group header .kicker::after {background: linear-gradient(90deg, rgba(127,148,0,.78), rgba(127,148,0,.28) 42%, transparent 100%);}
body.light .kicker::before {background: #9fb500; box-shadow: 0 0 16px rgba(127,148,0,.28);}
.section h2,.insights h2,.location-section h2 {margin-top: 0;}
.brand-heading {width: min(var(--container), calc(100vw - 48px)); max-width: none; margin: 0 auto 14px; padding: 0; display: block;}
.brand-heading::after {content: none; display: none;}
.brand-heading p {margin: 0; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;}
.brands.brand-marquee {width: min(var(--container), calc(100vw - 48px)); margin: 0 auto; padding: 22px 0; overflow: hidden; border: 0; background: linear-gradient(90deg, rgba(255,255,255,.075), rgba(255,255,255,.035) 50%, rgba(255,255,255,.07)); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), inset 0 -1px 0 rgba(255,255,255,.045); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);}
body.light .brands.brand-marquee {background: linear-gradient(90deg, rgba(5,7,4,.06), rgba(5,7,4,.028) 50%, rgba(5,7,4,.055)); box-shadow: inset 0 1px 0 rgba(5,7,4,.055), inset 0 -1px 0 rgba(5,7,4,.045);}
.brands.brand-marquee .brand-track {display: flex !important; width: max-content; gap: 0; animation: brandScroll 24s linear infinite; will-change: transform;}
.brands.brand-marquee .brand-set {display: flex !important; grid-template-columns: none !important; flex: 0 0 auto; align-items: center; gap: clamp(34px, 5vw, 72px); padding-right: clamp(34px, 5vw, 72px);}
.brands.brand-marquee span {flex: 0 0 auto; min-width: max-content; display: inline-flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: clamp(18px, 2vw, 24px); font-weight: 800; opacity: .92;}
.brands.brand-marquee span i {color: var(--card-action-color); font-size: 1.05em;}
.brands.brand-marquee:hover .brand-track {animation-play-state: paused;}
@keyframes brandScroll {from { transform: translateX(0); } to { transform: translateX(-50%); };}
@keyframes heartFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  30%  { opacity: 1; transform: translateY(-18px) scale(1.25); }
  70%  { opacity: 0.7; transform: translateY(-48px) scale(0.95); }
  100% { opacity: 0; transform: translateY(-72px) scale(0.6); }
}

#work .work-item,.listing-work .work-item {display: grid; grid-template-rows: 1fr auto; min-height: 246px; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)); overflow: hidden; color: inherit; text-decoration: none; transition: transform .24s ease, border-color .24s ease;}
#work .work-item:hover,.listing-work .work-item:hover {transform: translateY(-4px); border-color: var(--card-action-border-hover);}
#work .thumb,.listing-work .thumb,.case-cover .thumb {position: relative; height: 168px; margin: 0; overflow: hidden; border: 0; background: var(--media-bg); background-image: none !important;}
.thumb > .post-img,#work .thumb > img,.listing-work .thumb > img,.case-cover .thumb > img {position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; opacity: 1; filter: none; background-color: var(--media-bg);}
#work .thumb::after,.listing-work .thumb::after,.case-cover .thumb::after {content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 48%, rgba(0,0,0,.18)); pointer-events: none;}
#work .thumb > b,#work .thumb > i,.listing-work .thumb > b,.listing-work .thumb > i,.case-cover .thumb > b,.case-cover .thumb > i {display: none !important;}
#work .thumb .case,.listing-work .thumb .case {z-index: 2;}
#work .work-item > p,.listing-work .work-item > p {min-height: 76px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin: 0; padding: 16px; background: rgba(7,9,8,.94);}
.post-img {display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; opacity: 1; filter: none;}
.post-image {display: block; width: 100%; height: 168px; min-height: 168px; overflow: hidden; background: var(--media-bg);}
.post-image > .post-img {position: static;}
body.light #work .work-item,body.light .listing-work .work-item {border-color: rgba(5,7,4,.13); background: rgba(255,255,255,.72);}
body.light #work .work-item > p,body.light .listing-work .work-item > p {background: rgba(255,255,255,.9);}
body.light #work .thumb,body.light .listing-work .thumb,body.light .case-cover .thumb,body.light .post-image {background: var(--media-bg); background-image: none !important;}
body.light .thumb > .post-img,body.light .post-image > .post-img {filter: none; opacity: 1;}
.location-section {display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 46px; align-items: stretch;}
.location-copy {padding: 42px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));}
.location-copy > p:not(.kicker) {max-width: 560px; color: var(--muted); font-size: 18px; line-height: 1.65;}
.location-actions {display: grid; gap: 14px; margin-top: 28px;}
.location-actions a,.location-actions span {display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 18px; color: var(--text); text-decoration: none; border: 1px solid var(--line); background: rgba(255,255,255,.025); font-weight: 800;}
.location-actions i {color: var(--card-action-color); font-size: 20px;}
.map-card.google-map {min-height: 480px; height: 100%; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2);}
.map-card.google-map iframe {display: block !important; width: 100% !important; height: 100% !important; min-height: 480px; border: 0 !important; filter: grayscale(1) contrast(.96) brightness(.86);}
body.light .location-copy,body.light .location-actions a,body.light .location-actions span,body.light .map-card.google-map {background: rgba(255,255,255,.72); border-color: rgba(5,7,4,.12);}
body.light .map-card.google-map iframe {filter: grayscale(.2) contrast(1) brightness(1);}
body.light .art::before {border-color: rgba(5,7,4,.14); background: rgba(255,255,255,.42); box-shadow: 0 22px 70px rgba(20,24,18,.07);}
body.light .dots {background-image: radial-gradient(rgba(36,43,38,.34) 1.55px, transparent 1.8px); opacity: .72;}
body.light .d1 {opacity: .6;}
body.light .d2 {opacity: .68;}
body.light .photo {border-color: rgba(5,7,4,.16); background: linear-gradient(135deg, transparent 0 28%, rgba(255,255,255,.86) 28% 42%, transparent 42%), linear-gradient(112deg, #cfd4cb 0 34%, #fbfcf7 34% 47%, #7f8780 47% 63%, #e3e6de 63%); filter: grayscale(1) contrast(1.03); box-shadow: 0 24px 70px rgba(20,24,18,.12);}
body.light .photo::before {background: linear-gradient(180deg, rgba(255,255,255,.24), transparent 44%), linear-gradient(90deg, rgba(5,7,4,.12), transparent 46%, rgba(5,7,4,.16));}
body.light .years,body.light .note {border-color: rgba(5,7,4,.12); background: rgba(255,255,255,.78); box-shadow: 0 16px 48px rgba(20,24,18,.14), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(18px);}
body.light .years span,body.light .note p {color: #4f5651;}
body.light .years strong {color: var(--accent);}
body.light .note-years {color: var(--text); border-right-color: var(--line);}
body.light .note a {background: var(--card-action-icon-bg); color: var(--card-action-icon-fg);}
.cta {margin-top: 64px; margin-bottom: 46px;}
.foot {position: relative; margin-top: 0; padding-top: 42px; border-top: 0; isolation: isolate;}
.foot::before,.copy::before {content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(232,255,50,.55) 0, rgba(232,255,50,.16) 26%, transparent 50%, rgba(232,255,50,.16) 74%, rgba(232,255,50,.55) 100%); pointer-events: none;}
.foot::before {top: 0; z-index: 1;}
.copy {position: relative; margin-top: 30px; padding-top: 22px; border-top: 0;}
.copy::before {top: 0;}
.foot p,.foot a,.foot input,.copy {font-size: 14px; line-height: 1.72;}
.foot .foot-title {margin-bottom: 18px; font-size: 13.5px; line-height: 1.2; letter-spacing: .055em;}
.foot .logo {font-size: 30px;}
.footgrid {gap: 34px;}
body.light .foot::before,body.light .copy::before {background: linear-gradient(90deg, rgba(127,148,0,.58) 0, rgba(127,148,0,.22) 26%, transparent 50%, rgba(127,148,0,.22) 74%, rgba(127,148,0,.58) 100%);}
body.light .foot p,body.light .foot a,body.light .foot input {color: #313833;}
body.light .foot .foot-title,body.light .copy,body.light .copy span,body.light .copy a {color: #111512;}
body.light .foot .logo {color: #090d0a;}
body.light .foot input::placeholder {color: rgba(49,56,51,.72);}
body.light .foot input {border-color: rgba(5, 7, 4, 0.18);}
body.light .foot input:focus {border-color: rgba(5, 7, 4, 0.45);}
body.light .foot a:hover {color: #6f8300;}
body.light .footer-language-switcher {border-color: rgba(5,7,4,.14); background: rgba(5,7,4,.025);}
body.light .footer-language-switcher a {color: #313833;}
body.light .footer-language-switcher a.active {background: var(--accent); color: #050704;}

@media (min-width: 1081px) {
  #work .works,.listing-work.works {grid-template-columns: repeat(5, minmax(0, 1fr));}
}

@media (max-width: 1080px) {
  .hero {margin-bottom: 44px;}
  .brand-section {margin-bottom: 64px;}
  .section,.insights,.location-section {padding-top: 62px;}
  #work .thumb,.listing-work .thumb,.post-image {height: 160px; min-height: 160px;}
  .location-section {grid-template-columns: 1fr;}
  .map-card.google-map,.map-card.google-map iframe {min-height: 420px;}
}

@media (max-width: 700px) {
  .brand-section {margin-bottom: 50px;}
  .brand-heading,.brands.brand-marquee {width: calc(100vw - 36px);}
  .brands.brand-marquee .brand-track {animation-duration: 18s;}
  .section,.insights,.location-section {padding-top: 52px;}
  .section + .section,.section + .insights,.insights + .location-section,.location-section + .cta {margin-top: 18px;}
  .section header .kicker::after,.insights header .kicker::after,.location-section .kicker::after,.article-related-head .kicker::after,:is( .listing-hero,.about-hero,.service-hero,.case-hero,.article-hero,.contact-hero,.legal-hero,.sa-hero,.sa-section-head ) .kicker::after,.service-area-group header .kicker::after {min-width: 28px;}
  #work .thumb,.listing-work .thumb,.post-image {height: 150px; min-height: 150px;}
  .case-cover .thumb {height: 250px;}
  .location-copy {padding: 28px 22px;}
  .map-card.google-map,.map-card.google-map iframe {min-height: 330px;}
  .cta {margin-top: 46px; margin-bottom: 34px;}
  .foot p,.foot a,.foot input,.copy {font-size: 14px;}
  .foot .foot-title {font-size: 13px;}
}
/* Contact page */
.contact-wrap {padding-bottom: 0;}
.contact-hero:not(.page-hero) {max-width: 980px;}
.contact-hero.page-hero {max-width: none; width: 100%;}
.contact-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 10px 0 8px;}
.contact-card {min-height: 250px; display: flex; flex-direction: column; align-items: flex-start; padding: 28px; color: inherit; text-decoration: none; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); transition: transform .24s ease, border-color .24s ease, background .24s ease;}
.contact-card:hover {transform: translateY(-4px); border-color: var(--card-action-border-hover);}
.contact-card > i {width: 46px; height: 46px; display: grid; place-items: center; margin-top: 6px; margin-bottom: 22px; background: var(--card-action-icon-bg); color: var(--card-action-icon-fg); font-size: 22px;}
.contact-card span {margin-bottom: 10px; color: var(--card-action-color); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em;}
.contact-card strong {display: block; margin-bottom: 14px; color: var(--text); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.05; letter-spacing: -.045em;}
.contact-card p {margin: auto 0 0; color: var(--muted); font-size: 14px; line-height: 1.58;}
.contact-location {grid-template-columns: 1fr; margin-top: 22px;}
body.light .contact-card {background: rgba(255,255,255,.72); border-color: rgba(5,7,4,.12);}
body.light .contact-card:hover {border-color: rgba(127,148,0,.62);}
body.light .contact-card span {color: #7f9400;}
body.light .contact-card p {color: var(--muted);}

@media (max-width: 900px) {
  .contact-grid {grid-template-columns: 1fr;}
  .contact-card {min-height: 210px;}
}
/* Active navigation state */
.menu a.active::after {opacity: 1; transform: scaleX(1);}
body.light .menu a.active,body.light .mobile-nav a.active {color: var(--card-action-color);}
/* Global footer spacing */
.foot {margin-top: clamp(46px, 6vw, 82px);}
.cta + .foot {margin-top: 0;}
main:not(:has(.cta)) + .foot {margin-top: clamp(56px, 7vw, 96px);}
.contact-wrap {padding-bottom: 0;}

@media (max-width: 700px) {
  .foot,main:not(:has(.cta)) + .foot {margin-top: 44px;}
  .cta + .foot {margin-top: 0;}
}
/* Final section rhythm */
.section + .section,.section + .insights,.insights + .location-section {margin-top: clamp(34px, 4vw, 58px);}
.location-section + .cta {margin-top: clamp(78px, 8vw, 120px) !important;}
.contact-grid + .contact-location {margin-top: clamp(62px, 7vw, 96px) !important;}
.contact-location + .foot,.contact-wrap + .foot {margin-top: clamp(62px, 7vw, 96px) !important;}
.cta {margin-bottom: clamp(48px, 5vw, 72px) !important;}

@media (max-width: 700px) {
  .section + .section,.section + .insights,.insights + .location-section {margin-top: 22px;}
  .location-section + .cta,.contact-grid + .contact-location {margin-top: 52px !important;}
  .cta {margin-bottom: 38px !important;}
}
/* Unified home section spacing */
body:has(#about) .brand-section,body:has(#about) .section,body:has(#about) .insights,body:has(#about) .location-section,body:has(#about) .cta {margin-top: 0 !important;}
body:has(#about) .brand-section,body:has(#about) .section,body:has(#about) .insights,body:has(#about) .location-section {margin-bottom: var(--home-section-gap) !important; padding-top: 0 !important;}
body:has(#about) .section,body:has(#about) .insights,body:has(#about) .location-section {padding-top: var(--home-section-pad) !important;}
body:has(#about) .cta {margin-top: 0 !important; margin-bottom: var(--home-section-gap) !important;}
body:has(#about) .location-section + .cta,body:has(#about) .section + .section,body:has(#about) .section + .insights,body:has(#about) .insights + .location-section {margin-top: 0 !important;}

/* Unified section spacing across the whole site */
main > section {margin-top: 0 !important; margin-bottom: 0 !important;}
main > section + section {margin-top: var(--site-section-gap) !important;}
.brand-section + .section {margin-top: 24px !important;}
body:has(#about) .brand-section {margin-bottom: 0 !important;}
body:has(#about) .brand-section + .section {margin-top: 24px !important;}
.section,.insights,.location-section {padding-top: 0 !important;}
.brand-section,.contact-grid,.contact-location,.cta {margin-top: 0 !important; margin-bottom: 0 !important;}
.location-section + .cta,.contact-grid + .contact-location,.section + .section,.section + .insights,.insights + .location-section {margin-top: var(--site-section-gap) !important;}
.cta {margin-bottom: var(--site-section-gap) !important;}

/* Authoritative section spacing */
main > section,main > .section,main > .insights,main > .location-section,main > .brand-section,main > .cta {margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important;}
.hero {margin-bottom: 0 !important; padding-top: clamp(44px, 5vw, 62px) !important;}
main > section + section {margin-top: var(--site-section-gap) !important;}
.section + .section,.section + .insights,.insights + .location-section,.location-section + .cta,.contact-grid + .contact-location {margin-top: var(--site-section-gap) !important;}
.cta {margin-top: 0 !important; margin-bottom: 0 !important;}
.cta + .foot,main + .foot {margin-top: var(--site-section-gap) !important;}

@media (max-width: 640px) {
  .hero {padding-top: 34px !important;}
  .brand-section + .section {margin-top: 18px !important;}
  body:has(#about) .brand-section + .section {margin-top: 18px !important;}
}
/* CTA outer spacing only */
.location-section + .cta {margin-top: var(--site-section-gap) !important;}
.cta {margin-top: var(--site-section-gap) !important; margin-bottom: var(--site-section-gap) !important;}
.cta + .foot {margin-top: 0 !important;}
/* CTA to footer spacing fix */
.cta {margin-top: var(--site-section-gap) !important; margin-bottom: 0 !important;}
.cta + .foot,main:has(.cta) + .foot {margin-top: var(--site-section-gap) !important;}
/* CTA inner padding restore */
main > .cta,.cta {min-height: 108px !important; padding: 42px 44px !important; padding-block: 42px !important; display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; gap: 28px !important;}
.cta h2 {margin: 0 !important; line-height: 1.05 !important;}
.cta p {margin: 8px 0 0 !important;}

@media (max-width: 700px) {
  main > .cta,.cta {min-height: auto !important; padding: 28px 24px !important; grid-template-columns: 1fr !important; gap: 22px !important;}
  .cta .btn {width: 100% !important;}
}

/* Removed duplicate navin overrides — handled in primary 700px block above */

/* ==========================================================================
   Contact Page Styles & Forms
   ========================================================================== */
.contact-section {display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: stretch; margin-top: 54px;}
.contact-form-container {background: var(--surface-2); border: 1px solid var(--line-strong); padding: 42px 38px; box-shadow: var(--shadow); transition: border-color 0.3s ease, box-shadow 0.3s ease;}
.contact-form-container:hover {border-color: var(--accent);}
.contact-form-row {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.contact-field-group {display: flex; flex-direction: column; gap: 8px;}
.contact-field-group label {font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); letter-spacing: 0.05em;}
.contact-input {width: 100%; min-height: 48px; padding: 0 16px; background: var(--surface-3); border: 1px solid var(--line); color: var(--text); outline: none; font-size: 14px; font-family: inherit; transition: border-color 0.22s ease, box-shadow 0.22s ease;}
.contact-input:focus {border-color: var(--accent); box-shadow: 0 0 12px var(--input-shadow);}
textarea.contact-input {min-height: 140px; padding: 14px 16px; resize: vertical; line-height: 1.6;}
.contact-map-container {width: 100%; height: 100%; min-height: 480px;}

@media (max-width: 992px) {
  .contact-section {grid-template-columns: 1fr; gap: 38px;}
  .contact-map-container {min-height: 380px; height: 380px;}
}

@media (max-width: 576px) {
  .contact-form-row {grid-template-columns: 1fr; gap: 18px;}
  .contact-form-container {padding: 30px 24px;}
}

/* ==========================================================================
   Portfolio Listing — Filter Section
   ========================================================================== */
.portfolio-filter-section {display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px;}
.portfolio-count {margin: 0; color: var(--muted-2); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;}
.portfolio-count span {color: var(--card-action-color); font-size: 15px; font-weight: 900;}

/* Smooth hide/show animation for filtered items */
.portfolio-list .ui-card--media {transition: opacity .24s ease, transform .24s ease;}
.portfolio-list .ui-card--media.is-hidden {opacity: 0; transform: scale(.97); pointer-events: none;}

@media (max-width: 700px) {
  .portfolio-filter-section {flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 20px;}
}

/* ==========================================================================
   Çerez Politikası (Cookie Consent Banner) — Premium Glassmorphic Design
   ========================================================================== */
.atene-cookie-banner {position: fixed; bottom: 24px; right: 24px; width: 420px; max-width: calc(100vw - 48px); z-index: 10000; background: rgba(8, 10, 9, 0.76); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 24px; color: #fff; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; transform: translateY(20px) scale(0.98); pointer-events: none;}
.atene-cookie-banner.show {opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;}
.atene-cookie-content {display: flex; flex-direction: column; gap: 16px;}
.atene-cookie-header {display: flex; align-items: center; gap: 12px;}
.atene-cookie-icon-wrapper {width: 38px; height: 38px; display: grid; place-items: center; background: var(--accent); color: #050704; font-size: 18px; border-radius: 4px;}
.atene-cookie-header .atene-cookie-title {margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: #fff;}
.atene-cookie-body p {margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.7);}

/* Custom preferences checkboxes */
.atene-cookie-preferences {display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-top: 1px solid var(--divider-color); border-bottom: 1px solid var(--divider-color);}
.atene-preference-row {display: flex; justify-content: space-between; align-items: center; gap: 16px;}
.atene-preference-info {display: flex; flex-direction: column; gap: 2px;}
.atene-preference-title {font-size: 13px; font-weight: 800; color: #fff;}
.atene-preference-desc {font-size: 11px; color: rgba(255, 255, 255, 0.5); line-height: 1.4;}

/* Toggles / Switches styling */
.atene-switch {position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0;}
.atene-switch input {opacity: 0; width: 0; height: 0;}
.atene-slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.15); transition: .3s; border-radius: 20px;}
.atene-slider:before {position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: #fff; transition: .3s; border-radius: 50%;}
.atene-switch input:checked + .atene-slider {background-color: var(--accent);}
.atene-switch input:checked + .atene-slider:before {transform: translateX(16px); background-color: #050704;}
.atene-switch input:disabled + .atene-slider {opacity: 0.6; cursor: not-allowed;}

/* Buttons inside cookie banner */
.atene-cookie-actions {display: flex; flex-direction: column; gap: 12px;}
.atene-cookie-main-actions {display: flex; gap: 8px; flex-wrap: wrap;}
.btn-cookie-accent,.btn-cookie-muted,.btn-cookie-link {font-size: 12px; font-weight: 800; height: 38px; padding: 0 16px; cursor: pointer; transition: opacity 0.2s ease, background 0.2s ease; border: 0; display: inline-flex; align-items: center; justify-content: center;}
.btn-cookie-accent {background: var(--accent); color: #050704; border-radius: 4px;}
.btn-cookie-accent:hover {opacity: 0.9;}
.btn-cookie-muted {background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px;}
.btn-cookie-muted:hover {background: rgba(255, 255, 255, 0.15);}
.btn-cookie-link {background: transparent; color: rgba(255, 255, 255, 0.7); text-decoration: underline;}
.btn-cookie-link:hover {color: #fff;}
.atene-cookie-policy-link {text-align: right; margin-top: 4px;}
.atene-cookie-policy-link a {font-size: 11px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px;}

/* Floating Trigger Button */
.atene-cookie-trigger {position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: rgba(8, 10, 9, 0.8); color: var(--card-action-color); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; z-index: 9999; display: grid; place-items: center; font-size: 20px; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; opacity: 0.85;}
.atene-cookie-trigger:hover {transform: scale(1.1) rotate(15deg); opacity: 1; background: var(--accent); color: #050704;}

/* Theme Adaptations: Light Mode */
body.light .atene-cookie-banner {background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(5, 7, 4, 0.1); box-shadow: 0 20px 50px rgba(5, 7, 4, 0.15); color: var(--text);}
body.light .atene-cookie-header .atene-cookie-title {color: var(--text);}
body.light .atene-cookie-body p {color: var(--muted);}
body.light .atene-preference-title {color: var(--text);}
body.light .atene-preference-desc {color: var(--muted-2);}
body.light .atene-slider {background-color: rgba(5, 7, 4, 0.1);}
body.light .atene-slider:before {background-color: #fff;}
body.light .atene-switch input:checked + .atene-slider {background-color: var(--accent);}
body.light .atene-switch input:checked + .atene-slider:before {background-color: #050704;}
body.light .btn-cookie-muted {background: rgba(5, 7, 4, 0.05); color: var(--text); border: 1px solid rgba(5, 7, 4, 0.12);}
body.light .btn-cookie-muted:hover {background: rgba(5, 7, 4, 0.08);}
body.light .btn-cookie-link {color: var(--muted);}
body.light .btn-cookie-link:hover {color: var(--text);}
body.light .atene-cookie-policy-link a {color: var(--link-color);}
body.light .atene-cookie-trigger {background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(5, 7, 4, 0.1); box-shadow: 0 10px 30px rgba(5, 7, 4, 0.08); color: var(--text);}
body.light .atene-cookie-trigger:hover {background: var(--accent); color: #050704;}

@media (max-width: 576px) {
  .atene-cookie-banner {bottom: 12px; right: 12px; left: 12px; width: auto; max-width: none; padding: 20px;}
  .atene-cookie-trigger {bottom: 12px; right: 12px; width: 42px; height: 42px; font-size: 18px;}
}

/* 2026 public UI refresh */
.listing-wrap,.service-wrap,.case-wrap,.article-wrap,.about-wrap,.contact-wrap,.legal-wrap {position: relative;}
.listing-wrap::before,.service-wrap::before,.case-wrap::before,.article-wrap::before,.about-wrap::before,.contact-wrap::before,.legal-wrap::before {content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(180deg, #000 0, transparent 72%);}
.listing-hero,.service-hero,.case-hero,.article-hero,.about-hero,.contact-hero,.legal-hero {position: relative; border-bottom: 0;}
.listing-hero .lead,.service-hero .lead,.case-hero .lead,.article-hero .lead,.contact-hero .lead,.legal-hero .lead {max-width: 680px;}
.listing-card,.contact-card,.case-split article,.case-results p,.include-grid span,.legal-panel,.faq-list details,.start-info-grid > div {border-color: rgba(255,255,255,.12) !important; background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    rgba(255,255,255,.018) !important; backdrop-filter: blur(10px);}
.listing-card {position: relative; overflow: hidden;}
.listing-card::after {content: "\ea6c"; font-family: remixicon; position: absolute; right: 22px; bottom: 18px; color: var(--card-action-color); font-size: 22px; opacity: 0; transform: translate(-4px, 4px); transition: opacity .22s ease, transform .22s ease;}
.listing-card:hover::after {opacity: 1; transform: translate(0, 0);}
.service-list {grid-template-columns: repeat(3, minmax(0, 1fr));}
.service-list .listing-card {min-height: 0; padding: 26px 28px 32px;}
.service-wrap .service-list .listing-card > i {margin-bottom: 22px;}
.service-wrap .service-list .listing-card span {margin-bottom: 14px;}
.service-wrap .service-list .listing-card h2 {margin-bottom: 14px;}
.service-wrap .service-list .listing-card p {padding-right: 32px; line-height: 1.65;}
.article-list {gap: 16px; border-top: 0;}
.article-row {min-height: 150px; grid-template-columns: 132px 1fr 52px; padding: 22px 26px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.024);}
.article-row:hover {border-color: var(--card-action-soft-border); background: var(--card-action-soft-bg);}
.article-cover {overflow: hidden; background-size: cover; background-position: center;}
.article-body {margin-inline: auto;}
.related-articles {display: grid; grid-template-columns: .55fr 1fr; gap: 28px; padding: 0 0 68px;}
.related-articles > div {display: grid; gap: 12px;}
.related-articles a {min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 18px; color: var(--text); border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.024); font-weight: 800;}
.related-articles a:hover {color: var(--card-action-color); border-color: var(--card-action-border-hover);}
.contact-grid {align-items: stretch;}
.contact-card {min-height: 230px;}
.contact-section {align-items: stretch;}
.contact-form-container,.contact-map-container {border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.024); box-shadow: var(--shadow);}
.contact-form-container {padding: 30px;}
.project-request-form {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px;}
.start-info-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin-top: 56px;}
.faq-section {display: grid; grid-template-columns: .7fr 1.3fr; gap: 42px; padding: 0 0 78px;}
.faq-heading {position: sticky; top: 110px; align-self: start;}
.faq-list {display: grid; gap: 12px;}
.faq-list details {padding: 0 22px; border: 1px solid rgba(255,255,255,.12);}
.faq-list summary {min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--text); font-weight: 900; cursor: pointer; list-style: none;}
.faq-list summary::-webkit-details-marker {display: none;}
.faq-list summary::after {content: "\ea13"; font-family: remixicon; color: var(--card-action-color); font-size: 20px; transition: transform .2s ease;}
.faq-list details[open] summary::after {transform: rotate(45deg);}
.faq-list p {margin: -4px 0 22px; color: var(--muted); line-height: 1.65;}
.legal-panel {max-width: 900px; margin-bottom: 80px; padding: 34px; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow);}
.legal-panel section + section {margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--divider-color);}
.legal-panel h3 {margin: 0 0 10px; font-size: 22px; letter-spacing: -.03em;}
.legal-panel p {margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7;}
body.light .listing-wrap::before,body.light .service-wrap::before,body.light .case-wrap::before,body.light .article-wrap::before,body.light .about-wrap::before,body.light .contact-wrap::before,body.light .legal-wrap::before {background:
    linear-gradient(90deg, rgba(5,7,4,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(5,7,4,.045) 1px, transparent 1px);}
body.light .listing-hero,body.light .service-hero,body.light .case-hero,body.light .article-hero,body.light .about-hero,body.light .contact-hero,body.light .legal-hero,body.light .legal-panel section + section {border-color: rgba(5,7,4,.12);}
body.light .listing-card,body.light .contact-card,body.light .case-split article,body.light .case-results p,body.light .include-grid span,body.light .legal-panel,body.light .faq-list details,body.light .start-info-grid > div,body.light .article-row,body.light .related-articles a,body.light .contact-form-container,body.light .contact-map-container {border-color: rgba(5,7,4,.12) !important; background: rgba(255,255,255,.72) !important;}

@media (max-width: 1080px) {
  .service-list,.start-info-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 760px) {
  .service-list,.project-request-form,.start-info-grid,.faq-section,.related-articles {grid-template-columns: 1fr;}
  .faq-heading {position: static;}
  .article-row {grid-template-columns: 1fr 34px; padding: 20px;}
}

/* ==========================================================================
   Pagination — Premium Minimalist Design
   ========================================================================== */
.pagination {display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; margin-bottom: 24px;}
.pagination a {display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02); color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; transition: all 0.2s ease;}
.pagination a:hover {border-color: var(--card-action-border-hover); background: rgba(232, 255, 50, 0.05); color: var(--card-action-color);}
.pagination a.active {background: var(--card-action-icon-bg); border-color: var(--card-action-icon-bg); color: var(--card-action-icon-fg);}
.pagination a.disabled {opacity: 0.4; pointer-events: none;}
body.light .pagination a {border-color: rgba(5, 7, 4, 0.1); background: rgba(5, 7, 4, 0.02); color: var(--text);}
body.light .pagination a:hover {border-color: var(--card-action-border-hover); background: rgba(83, 102, 0, 0.06); color: var(--card-action-color);}
body.light .pagination a.active {background: var(--card-action-icon-bg); border-color: var(--card-action-icon-bg); color: var(--card-action-icon-fg);}

/* Shared page shell repair: keep subpage content away from the raw background edge */
.listing-wrap::before,.service-wrap::before,.case-wrap::before,.article-wrap::before,.about-wrap::before,.contact-wrap::before,.legal-wrap::before {opacity: .42; mask-image: linear-gradient(180deg, transparent 0, #000 120px, transparent 78%);}
.listing-hero,.service-hero,.case-hero,.article-hero,.about-hero,.contact-hero,.legal-hero {padding-top: 0 !important;}
.case-story,.service-includes {padding: clamp(26px, 3vw, 38px) !important; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.024);}
.case-story > div,.case-story > p,.case-story > .home-rich-text,.service-includes > div,.service-includes .include-grid {min-width: 0;}
.case-story .kicker,.service-includes .kicker {margin-top: 0;}
body.light .case-story,body.light .service-includes {border-color: rgba(5,7,4,.12); background: rgba(255,255,255,.72);}

@media (max-width: 760px) {
  .listing-wrap,.service-wrap,.case-wrap,.article-wrap,.about-wrap,.contact-wrap,.legal-wrap {padding-top: 34px; padding-bottom: 46px;}
  .case-story,.service-includes {padding: 22px !important;}
}

/* 2026 CMS content, service areas, portfolio and blog responsive layer */
.home-rich-text {max-width: 760px; color: var(--muted); font-size: 15px; line-height: 1.72;}
.hero .home-rich-text {margin: 0 0 36px;}
.home-rich-text p,.home-rich-text ul,.home-rich-text ol,.home-rich-text blockquote {margin: 0 0 16px;}
.home-rich-text p:last-child,.home-rich-text ul:last-child,.home-rich-text ol:last-child,.home-rich-text blockquote:last-child {margin-bottom: 0;}
.home-rich-text strong,.home-rich-text b {color: var(--text); font-weight: 900;}
.home-rich-text ul,.home-rich-text ol {padding-left: 20px;}
.home-rich-text li + li {margin-top: 8px;}
.home-seo-content {max-width: 980px;}
.home-seo-content .home-rich-text {max-width: 820px; padding: 24px 28px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.024);}
.service-area-list {display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 22px;}
.service-area-list .listing-card {min-height: 268px; padding: 24px;}
.service-area-list .listing-card > i {width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 26px; background: var(--card-action-icon-bg); color: var(--card-action-icon-fg); font-size: 20px;}
.include-grid a {min-height: 54px; display: inline-flex; align-items: center; gap: 10px; color: var(--text); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.025); padding: 14px 16px; font-size: 13px; font-weight: 800; line-height: 1.25;}
.include-grid a:hover {color: var(--card-action-hover); border-color: var(--card-action-border-hover);}
.listing-work.works {display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;}
.listing-work .work-item {min-width: 0; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.018);}
.listing-work .thumb {height: 178px; margin-bottom: 0;}
.listing-work .work-item > p {min-height: 84px; grid-template-columns: 1fr; align-content: center; gap: 6px;}
.listing-work .work-item > p span {justify-self: start;}
.article-list {gap: 14px; border-top: 0;}
.article-row {min-height: 124px; display: grid !important; grid-template-columns: 104px 132px minmax(0, 1fr) 48px !important; gap: 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--panel-border); background: var(--panel-bg-flat);}
.article-row:hover {border-color: var(--card-action-soft-border); background: var(--card-action-soft-bg);}
.article-row-image {width: 104px; height: 78px; display: block; overflow: hidden; background: var(--media-bg); border: 1px solid rgba(255,255,255,.1);}
.article-row-image img {width: 100%; height: 100%; object-fit: cover; display: block; background: var(--media-bg);}
.article-row h2 {min-width: 0; font-size: clamp(21px, 2.45vw, 30px); line-height: 1.08;}
.article-row > span:not(.article-row-image) {color: var(--muted-2); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;}
body.light .home-seo-content .home-rich-text,body.light .article-row,body.light .listing-work .work-item,body.light .include-grid a {border-color: rgba(5,7,4,.12); background: rgba(255,255,255,.72);}

@media (max-width: 1180px) {
  .service-area-list,.listing-work.works {grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}
}

@media (max-width: 760px) {
  .home-seo-content .home-rich-text {padding: 20px;}
  .service-area-list,.listing-work.works,.posts {grid-template-columns: 1fr !important; gap: 18px;}
  .service-area-list .listing-card {min-height: auto; padding: 22px;}
  .listing-work .thumb,.post-image {height: 190px; min-height: 190px;}
  .listing-work .work-item > p {min-height: auto; padding: 16px;}
  .posts .ui-card--media {min-height: auto; grid-template-rows: 190px auto auto;}
  .posts .ui-card--media .ui-card__media {height: 190px; min-height: 190px;}
  .article-list {gap: 12px;}
  .article-row {min-height: 104px; grid-template-columns: 86px minmax(0, 1fr) 34px !important; gap: 10px 14px; padding: 14px;}
  .article-row-image {width: 86px; height: 72px; grid-column: 1; grid-row: 1 / span 2;}
  .article-row > span:not(.article-row-image) {grid-column: 2; grid-row: 1; align-self: end; font-size: 10px;}
  .article-row h2 {grid-column: 2; grid-row: 2; font-size: 17px; line-height: 1.16; letter-spacing: -.03em;}
  .article-row i {grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end;}
}

@media (max-width: 420px) {
  .article-row {grid-template-columns: 78px minmax(0, 1fr) 28px !important; padding: 12px;}
  .article-row-image {width: 78px; height: 66px;}
  .article-row h2 {font-size: 16px;}
}

/* Dynamic portfolio gallery */
.case-gallery {grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-template-rows: auto; gap: 18px;}
.gallery-tile img {width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block;}

/* Homepage + blog mobile hierarchy */
@media (max-width: 700px) {
  #work .works,.listing-work.works {grid-template-columns: 1fr !important; gap: 16px;}
  .insights .posts {grid-template-columns: 1fr !important; gap: 14px;}
  .insights .posts .ui-card--media {grid-template-rows: 170px auto auto; min-height: auto;}
  .insights .posts .ui-card--media .ui-card__media {height: 170px; min-height: 170px;}
  .article-body {overflow-wrap: anywhere;}
  .article-body img,.article-cover {max-width: 100%;}
  .article-wrap .article-grid {grid-template-columns: 1fr !important; gap: 28px;}
}

@media (max-width: 520px) {
  .insights .posts {gap: 12px;}
  .article-list .article-row {grid-template-columns: 72px minmax(0, 1fr) 24px !important;}
}

/* Service Area detail page */
main.sa-page {display: flex; flex-direction: column; gap: 0;}
.sa-hero {display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(340px, .97fr); gap: clamp(28px, 4vw, 42px); align-items: start;}
.sa-hero-copy {align-self: center; min-width: 0;}
.sa-hero-media {min-width: 0; width: 100%;}
.sa-hero-media .contact-form-container {width: 100%; margin: 0; padding: clamp(22px, 2.4vw, 30px);}
.sa-hero-media .contact-form-container h3,.sa-hero-media .contact-form-lead {text-align: center;}
.sa-hero-media .contact-form-lead {margin-bottom: var(--space-sm);}
.sa-hero-media .contact-form {gap: var(--space-sm);}
.sa-hero-media .contact-form-row {gap: var(--space-sm);}
.sa-hero-media .contact-input {min-height: 42px; font-size: 13px;}
.sa-hero-media .contact-field-group label {font-size: 9px;}
.sa-hero-media .contact-recaptcha {margin-bottom: 0;}
.sa-hero-media .contact-submit {width: 100%; justify-content: center;}
.sa-hero h1 {margin: 0 0 18px; font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -.06em;}
.sa-hero-media img,.sa-hero-emblem {width: 100%; min-height: 320px; object-fit: cover; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02);}
.sa-hero-emblem {display: grid; place-items: center; font-size: 72px; color: var(--card-action-color);}
.sa-intro {max-width: 820px; margin-bottom: 18px; color: var(--muted); font-size: 17px; line-height: 1.7;}
.sa-section {padding: 54px 0 10px;}
.sa-section-head {display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; margin-bottom: 28px;}
.sa-section-head h2 {margin: 0; font-size: clamp(26px, 3.5vw, 38px); letter-spacing: -.05em;}
.sa-service-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;}
.sa-service-card {display: grid; gap: 10px; padding: 22px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); color: inherit; text-decoration: none; min-height: 210px;}
.sa-service-card > i {width: 40px; height: 40px; display: grid; place-items: center; background: var(--card-action-icon-bg); color: var(--card-action-icon-fg); font-size: 20px;}
.sa-service-card h3 {margin: 0; font-size: 18px;}
.sa-service-card p {margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55;}
.sa-service-card > span {margin-top: auto; color: var(--card-action-color); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;}
.sa-rich-content {width: 100%; max-width: none; box-sizing: border-box; padding: clamp(28px, 3vw, 36px) clamp(28px, 3.5vw, 40px); border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02);}
.sa-portfolio-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;}
.sa-blog-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;}
.sa-portfolio-card,.sa-blog-card {display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); overflow: hidden; min-width: 0;}
.sa-portfolio-thumb,.sa-blog-image {display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--surface-3);}
.sa-portfolio-thumb img,.sa-blog-image img {width: 100%; height: 100%; object-fit: cover; display: block;}
.sa-portfolio-body,.sa-blog-body {display: flex; flex-direction: column; gap: 10px; padding: 18px; flex: 1;}
.sa-portfolio-body h3,.sa-blog-body h3 {margin: 0; font-size: 18px; line-height: 1.2;}
.sa-portfolio-body h3 a,.sa-blog-body h3 a {color: inherit; text-decoration: none;}
.sa-portfolio-meta,.sa-blog-meta {display: flex; gap: 10px; margin: 0; color: var(--muted-2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em;}
.sa-portfolio-client {margin: 0; color: var(--muted); font-size: 13px;}
.sa-portfolio-body .btn,.sa-blog-body .btn {margin-top: auto; align-self: flex-start;}
.sa-zip-box {max-width: 860px; padding: 24px 28px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); color: var(--muted); line-height: 1.7;}
.sa-zip-box strong {color: var(--text);}
.sa-nearby-lead {max-width: 820px; margin: 0 0 20px; color: var(--muted); line-height: 1.65;}
.sa-nearby-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;}
.sa-nearby-card {display: grid; gap: 8px; padding: 20px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); color: inherit; text-decoration: none;}
.sa-nearby-card i {color: var(--card-action-color); font-size: 20px;}
.sa-nearby-card span {color: var(--muted); font-size: 13px; line-height: 1.5;}
.sa-cta {margin-top: 48px; margin-bottom: 40px; padding: 36px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg, rgba(232,255,50,.08), rgba(255,255,255,.02));}
.sa-cta h2 {margin: 0 0 10px; font-size: clamp(24px, 3vw, 34px);}
.sa-cta p {margin: 0; color: var(--muted); max-width: 640px; line-height: 1.65;}

@media (max-width: 1080px) {
  .sa-hero {grid-template-columns: 1fr;}
  .sa-hero-copy {align-self: auto;}
  .sa-service-grid,.sa-portfolio-grid,.sa-blog-grid,.sa-nearby-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 700px) {
  .sa-hero {gap: 22px;}
  .sa-hero-media img,.sa-hero-emblem {min-height: 220px;}
  .sa-hero-media .contact-form-row {grid-template-columns: 1fr;}
  .sa-section {padding-top: 42px;}
  .sa-section-head {grid-template-columns: 1fr;}
  .sa-service-grid,.sa-portfolio-grid,.sa-blog-grid,.sa-nearby-grid {grid-template-columns: 1fr; gap: 16px;}
  .sa-rich-content,.sa-zip-box {padding: 20px;}
  .sa-cta {grid-template-columns: 1fr;}
  .sa-cta .btn {width: 100%; justify-content: center;}
}

/* ==========================================================================
   Site-wide spacing & surface rhythm (authoritative)
   ========================================================================== */

/* Typography rhythm */
.kicker {margin: 0 0 var(--kicker-gap);}
h1,.hero h2,.about-hero h2,.listing-hero h2,.service-hero h2,.case-hero h2,.article-hero h2,.notfound h2,.sa-hero h1 {margin: 0 0 var(--title-gap);}
.lead,.sa-intro {margin: 0 0 var(--lead-gap);}
h2 {margin: 0;}
.section header,.insights header,.service-area-group header,.sa-section-head {margin-bottom: var(--section-head-gap);}

/* Shared rich text (CMS, homepage, service areas, articles) */
.home-rich-text,.rich-text,.sa-rich-content,.article-body {color: var(--muted); font-size: 15px; line-height: 1.72;}
.home-rich-text p,.rich-text p,.sa-rich-content p,.article-body p,.home-rich-text ul,.rich-text ul,.sa-rich-content ul,.article-body ul,.home-rich-text ol,.rich-text ol,.sa-rich-content ol,.article-body ol,.home-rich-text blockquote,.rich-text blockquote,.sa-rich-content blockquote {margin: 0 0 var(--content-para-gap);}
.home-rich-text p:last-child,.rich-text p:last-child,.sa-rich-content p:last-child,.article-body p:last-child,.home-rich-text ul:last-child,.rich-text ul:last-child,.sa-rich-content ul:last-child,.article-body ul:last-child,.home-rich-text ol:last-child,.rich-text ol:last-child,.sa-rich-content ol:last-child,.article-body ol:last-child,.home-rich-text blockquote:last-child,.rich-text blockquote:last-child,.sa-rich-content blockquote:last-child {margin-bottom: 0;}
.article-body h2,.article-body h3,.article-body h4,.home-rich-text h2,.home-rich-text h3,.home-rich-text h4,.sa-rich-content h2,.sa-rich-content h3,.sa-rich-content h4,.rich-text h2,.rich-text h3,.rich-text h4 {margin-top: var(--space-xl); margin-bottom: var(--space-sm); color: var(--text); font-weight: 900; letter-spacing: -.04em; line-height: 1.15;}
.article-body h2:first-child,.article-body h3:first-child,.article-body h4:first-child,.home-rich-text h2:first-child,.home-rich-text h3:first-child,.home-rich-text h4:first-child,.sa-rich-content h2:first-child,.sa-rich-content h3:first-child,.sa-rich-content h4:first-child,.rich-text h2:first-child,.rich-text h3:first-child,.rich-text h4:first-child {margin-top: 0;}
.home-rich-text h2,.sa-rich-content h2,.rich-text h2,.article-body h2 {font-size: clamp(26px, 3.5vw, 36px);}
.home-rich-text h3,.sa-rich-content h3,.rich-text h3,.article-body h3 {font-size: clamp(22px, 3vw, 28px);}
.home-rich-text h4,.sa-rich-content h4,.rich-text h4,.article-body h4 {font-size: clamp(18px, 2.5vw, 22px);}
.home-rich-text img,.sa-rich-content img,.rich-text img,.article-body img,.rich-text-img {width: 100%; max-width: 100%; height: auto; display: block; margin: var(--space-lg) auto; border: 1px solid var(--panel-border); border-radius: 4px; box-shadow: var(--shadow);}
.home-rich-text strong,.home-rich-text b,.sa-rich-content strong,.sa-rich-content b,.rich-text strong,.rich-text b,.article-body strong,.article-body b {color: var(--text); font-weight: 900;}
.home-rich-text ul li::marker,.sa-rich-content ul li::marker,.rich-text ul li::marker,.article-body ul li::marker,.case-story ul li::marker,.legal-panel ul li::marker,.faq-list ul li::marker {color: var(--card-action-color);}

/* Unified panel surfaces */
.listing-card,.contact-card,.case-split article,.case-results p,.include-grid span,.legal-panel,.faq-list details,.start-info-grid > div,.home-seo-content .home-rich-text,.case-story,.service-includes,.contact-form-container,.contact-map-container,.sa-service-card,.sa-portfolio-card,.sa-blog-card,.sa-rich-content,.sa-zip-box,.sa-nearby-card,.article-row,.listing-work .work-item,.include-grid a {border-color: var(--panel-border) !important; background: var(--panel-bg) !important;}
.article-row,.listing-work .work-item,.contact-form-container,.contact-map-container,.case-story,.service-includes {background: var(--panel-bg-flat) !important;}
body.light .listing-card,body.light .contact-card,body.light .case-split article,body.light .case-results p,body.light .include-grid span,body.light .legal-panel,body.light .faq-list details,body.light .start-info-grid > div,body.light .article-row,body.light .related-articles a,body.light .contact-form-container,body.light .contact-map-container,body.light .case-story,body.light .service-includes,body.light .sa-service-card,body.light .sa-portfolio-card,body.light .sa-blog-card,body.light .sa-rich-content,body.light .sa-zip-box,body.light .sa-nearby-card,body.light .listing-work .work-item,body.light .include-grid a,body.light .home-seo-content .home-rich-text {background: var(--panel-bg) !important; border-color: var(--panel-border) !important;}

/* Page shells */
main.listing-wrap,main.service-wrap,main.case-wrap,main.article-wrap,main.about-wrap,main.contact-wrap,main.legal-wrap,main.sa-page {padding-top: var(--page-pad-top); padding-bottom: var(--page-pad-bottom);}

/* Unified subpage heroes */
.listing-hero,.service-hero,.case-hero,.article-hero,.about-hero,.contact-hero,.legal-hero,.sa-hero {position: relative; min-height: 0; align-content: start; padding-top: 0 !important; padding-bottom: var(--hero-pad-bottom) !important; border-bottom: 0 !important;}

/* Subpage section rhythm */
main[class*="-wrap"] > section + section,main[class*="-wrap"] > section + .service-area-group,main[class*="-wrap"] > .service-area-group + .service-area-group,main[class*="-wrap"] > .contact-grid + section,main[class*="-wrap"] > .portfolio-filter-section + .portfolio-list {margin-top: var(--page-section-gap) !important;}
main.sa-page > section + section,main.sa-page > .sa-section + .sa-section,main.sa-page > .sa-hero + .sa-section {margin-top: var(--page-section-gap) !important;}

/* Mobile hero system — listing, services, portfolio, blog, contact, service areas */
@media (max-width: 900px) {
  .page-hero,.service-hero,.sa-hero {grid-template-columns: 1fr !important; gap: clamp(22px, 5vw, 34px); align-items: start;}
  .page-hero-copy,.sa-hero-copy {align-self: auto; width: 100%;}
  .page-hero-media,.service-emblem,.sa-hero-media img,.sa-hero-emblem,.page-hero-media.case-emblem--photo img,.page-hero-media.case-emblem--photo .post-img,.case-emblem--photo img,.case-emblem--photo .post-img {width: 100%; min-height: clamp(200px, 44vw, 260px);}
}

@media (max-width: 700px) {
  main.listing-wrap,main.service-wrap,main.case-wrap,main.article-wrap,main.about-wrap,main.contact-wrap,main.legal-wrap,main.sa-page {padding-top: clamp(18px, 5vw, 30px);}
  :is( .listing-hero,.page-hero,.service-hero,.case-hero,.article-hero,.about-hero,.contact-hero,.legal-hero,.start-hero,.sa-hero ) {padding-bottom: clamp(18px, 4vw, 26px) !important;}
  :is( .page-hero-copy h1,.page-hero-copy h2,.listing-hero h1,.listing-hero h2,.service-hero h1,.service-hero h2,.case-hero h1,.case-hero h2,.article-hero h1,.article-hero h2,.about-hero h1,.about-hero h2,.contact-hero h1,.contact-hero h2,.legal-hero h1,.legal-hero h2,.start-hero h1,.start-hero h2,.sa-hero h1,.notfound h2 ) {font-size: clamp(30px, 10.5vw, 46px); line-height: 1.04; letter-spacing: -.06em; max-width: none;}
  .article-page .article-hero h1 {font-size: clamp(30px, 10vw, 44px); max-width: none;}
  :is( .page-hero,.service-hero,.sa-hero ) {gap: 20px;}
  :is( .page-hero-copy .lead,.service-hero .lead,.listing-hero .lead,.case-hero .lead,.article-hero .lead,.about-hero .lead,.contact-hero .lead,.legal-hero .lead,.start-hero .lead,.sa-hero .lead,.article-lead ) {font-size: 14px; line-height: 1.65; max-width: none; margin-bottom: 18px;}
  .page-hero-media,.service-emblem,.sa-hero-media img,.sa-hero-emblem,.page-hero-media.case-emblem--photo img,.page-hero-media.case-emblem--photo .post-img,.case-emblem--photo img,.case-emblem--photo .post-img {min-height: clamp(170px, 46vw, 210px);}
  .service-emblem i {width: 84px; height: 84px; font-size: 38px;}
  :is( .service-hero .actions,.case-wrap .service-hero .actions,.sa-hero .actions ) {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;}
  :is( .service-hero .actions .btn,.sa-hero .actions .btn ) {flex: 1 1 calc(50% - 5px); min-width: 0; font-size: 11px; padding: 0 14px; min-height: 42px;}
  .listing-hero,.start-hero,.article-hero,.contact-hero:not(.page-hero) {max-width: none; width: 100%;}
  .case-hero .case-meta {gap: 14px 0; margin-top: 18px; padding-top: 16px;}
  .case-hero .case-meta p {min-width: calc(50% - 12px); padding-right: 12px;}
  .case-hero .case-meta p + p {padding-left: 12px;}
  .sa-hero-copy {align-self: auto;}
  .sa-hero h1 {font-size: clamp(30px, 10vw, 44px);}
}

@media (max-width: 480px) {
  :is( .service-hero .actions .btn,.sa-hero .actions .btn ) {flex: 1 1 100%;}
}

/* Article detail keeps tight hero-to-content flow */
main[class*="-wrap"] > .article-hero + * {margin-top: 0;}
.service-area-group header .kicker {margin-bottom: var(--kicker-gap);}
.service-area-group header h2 {margin: 0;}
.page-section {padding-top: 0;}
.page-section--spaced {margin-top: var(--page-section-gap) !important; padding-top: 0 !important;}

/* Empty / not-found states */
.empty-state {padding: var(--space-2xl) var(--space-md); text-align: center; border: 1px dashed var(--line-strong); background: var(--panel-bg-flat); box-shadow: var(--shadow);}
.empty-state--centered {display: flex; flex-direction: column; align-items: center;}
.empty-state__icon {width: 80px; height: 80px; display: grid; place-items: center; margin: 0 auto var(--space-md); border-radius: 50%; background: var(--card-action-soft-bg); color: var(--card-action-color); font-size: 38px;}
.empty-state h2,.empty-state h3 {margin: 0 0 var(--space-2xs); font-size: 21px; font-weight: 800; letter-spacing: -.03em;}
.empty-state p {margin: 0 auto var(--space-md); max-width: 420px; color: var(--muted); font-size: 14px; line-height: 1.6;}
.empty-state p:last-child {margin-bottom: 0;}
.not-found-shell {min-height: 70vh; display: flex; align-items: center; justify-content: center;}
.not-found-shell .empty-state {max-width: 600px; width: 100%;}
.not-found-shell .empty-state__icon--warn {display: block; width: auto; height: auto; margin: 0 auto var(--space-md); background: none; border-radius: 0; font-size: 54px; color: #ff6347;}
.not-found-shell h2 {font-size: 28px; font-weight: 900; letter-spacing: -.04em;}
.notfound {min-height: calc(100vh - var(--nav-offset, 74px)); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: clamp(34px, 5vw, 74px); padding-bottom: clamp(54px, 7vw, 96px);}
.notfound-hero {display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: clamp(34px, 6vw, 82px); align-items: center;}
.notfound-copy {min-width: 0;}
.notfound .kicker {max-width: 620px;}
.notfound h1 {max-width: 700px; margin: 0 0 var(--title-gap); font-size: clamp(46px, 6.5vw, 88px); line-height: .94; letter-spacing: -.075em; font-weight: 900;}
.notfound .lead {max-width: 560px;}
.notfound-panel {position: relative; min-height: 390px; padding: clamp(24px, 3.2vw, 34px); border: 1px solid var(--panel-border); background: var(--panel-bg); box-shadow: var(--shadow); overflow: hidden;}
.notfound-panel::before {content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 50% 18%, #000, transparent 72%); pointer-events: none;}
.notfound-panel::after {content: ""; position: absolute; left: clamp(24px, 3.2vw, 34px); right: clamp(24px, 3.2vw, 34px); top: clamp(150px, 18vw, 188px); height: 1px; background: linear-gradient(90deg, var(--card-action-border-hover), transparent);}
.notfound-code {position: relative; z-index: 1; margin: 0 0 clamp(42px, 5vw, 58px); color: var(--text); font-size: clamp(98px, 11vw, 150px); line-height: .78; letter-spacing: -.085em; font-weight: 900;}
.notfound-panel-title {position: relative; z-index: 1; max-width: 310px; margin: 0 0 8px; color: var(--text); font-size: 20px; line-height: 1.18; letter-spacing: -.035em; font-weight: 900;}
.notfound-panel-text {position: relative; z-index: 1; max-width: 310px; margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.6;}
.notfound-links {position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
.notfound-links a {min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--panel-border); background: rgba(255,255,255,.025); color: var(--text); font-size: 13px; font-weight: 850; transition: transform .22s ease, border-color .22s ease, background .22s ease;}
.notfound-links a:hover {transform: translateY(-3px); border-color: var(--card-action-border-hover); background: var(--card-action-soft-bg);}
.notfound-links i {width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; background: var(--card-action-icon-bg); color: var(--card-action-icon-fg); font-size: 18px;}
body.light .notfound-panel {background: var(--panel-bg); border-color: var(--panel-border);}
body.light .notfound-panel::before {background-image: linear-gradient(90deg, rgba(5,7,4,.055) 1px, transparent 1px), linear-gradient(180deg, rgba(5,7,4,.045) 1px, transparent 1px);}
body.light .notfound-links a {background: rgba(255,255,255,.58); border-color: var(--panel-border);}
.contact-form-container h3,.contact-form-title {margin: 0 0 var(--space-2xs); font-size: 24px; font-weight: 900; letter-spacing: -.04em;}
.contact-recaptcha {margin-bottom: var(--space-md);}
.contact-submit {align-self: flex-start; min-height: 48px; cursor: pointer;}
.empty-state .actions {display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap;}
.contact-form-lead {margin: 0 0 var(--space-md); color: var(--muted); font-size: 13px; line-height: 1.5;}
.contact-form {display: flex; flex-direction: column; gap: var(--space-md);}
.alert-box {display: flex; align-items: center; gap: 10px; padding: 14px 18px; margin-bottom: var(--space-md); font-size: 13px; font-weight: 600; border: 1px solid transparent;}
.alert-box i {font-size: 18px; flex-shrink: 0;}
.alert-box--success {background: var(--card-action-soft-bg); border-color: var(--card-action-border-hover); color: var(--text);}
.alert-box--success i {color: var(--card-action-color);}
.alert-box--error {background: rgba(255,99,71,.08); border-color: #ff6347; color: var(--text);}
.alert-box--error i {color: #ff6347;}

/* Service area detail sections */
.sa-section {padding: 0;}
.sa-cta {margin-top: var(--page-section-gap); margin-bottom: 0;}
.sa-nearby-lead {margin: 0 0 var(--space-md);}

/* Homepage section rhythm (final) */
.section > .listing-grid,.home-service-areas .listing-grid {padding-bottom: 0;}
main > section + section,.section + .section,.section + .insights,.insights + .location-section,.location-section + .cta,.contact-grid + .contact-location {margin-top: var(--site-section-gap) !important;}
.cta {margin-bottom: var(--site-section-gap) !important;}
.cta + .foot,main + .foot {margin-top: var(--site-section-gap) !important;}

@media (max-width: 760px) {
  .case-story,.service-includes {padding: 22px !important;}
  .empty-state {padding: var(--space-xl) var(--space-sm);}
  .notfound {min-height: auto; padding-top: 26px; padding-bottom: 52px;}
  .notfound-hero {grid-template-columns: 1fr; gap: 28px;}
  .notfound h1 {font-size: clamp(38px, 12vw, 52px); max-width: none;}
  .notfound-panel {min-height: 0; padding: 22px;}
  .notfound-panel::after {top: 116px; left: 22px; right: 22px;}
  .notfound-code {font-size: clamp(72px, 23vw, 94px); margin-bottom: 34px;}
  .notfound-links {grid-template-columns: 1fr;}
  .notfound-links a {min-height: 58px;}
}

/* ==========================================================================
   Blog article detail — premium layout
   ========================================================================== */
.article-page .article-top {padding-bottom: var(--hero-pad-bottom); border-bottom: 1px solid var(--panel-border);}
.article-page .article-hero {max-width: 920px; padding: 0; border-bottom: 0;}
.article-category-kicker {margin-bottom: var(--kicker-gap);}
.article-page .article-hero h1 {max-width: 920px; margin: 0 0 var(--title-gap); font-size: clamp(36px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -.065em;}
.article-lead {max-width: 760px; margin: 0; font-size: clamp(16px, 2.1vw, 20px); line-height: 1.65;}
.article-cover-wrap {margin-top: var(--page-section-gap); margin-bottom: 0;}
.article-page .article-cover-wrap {margin-bottom: 0;}
.article-page .article-top + .article-layout {margin-top: var(--page-section-gap);}
.article-page .article-cover-wrap + .article-layout {margin-top: clamp(44px, 5.5vw, 64px);}
.article-page .article-cover {position: relative; height: clamp(280px, 42vw, 540px); overflow: hidden; border: 1px solid var(--panel-border); background-color: var(--media-bg); background-size: cover; background-position: center; box-shadow: var(--shadow);}
.article-cover-overlay {position: absolute; inset: 0; background:
    linear-gradient(180deg, rgba(2,5,4,.08), rgba(2,5,4,.22) 68%, rgba(2,5,4,.48)),
    linear-gradient(90deg, rgba(2,5,4,.12), transparent 42%, rgba(2,5,4,.18)); pointer-events: none;}
.article-layout {display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: start;}
.article-main {min-width: 0;}
.article-content-panel {padding: clamp(28px, 4vw, 42px); border: 1px solid var(--panel-border); background: var(--panel-bg-flat); box-shadow: var(--shadow);}
.article-page .article-body {max-width: none; padding: 0; font-size: 17px; line-height: 1.78;}
.article-page .article-body h2,.article-page .article-body h3,.article-page .article-body h4 {margin-top: var(--space-xl); margin-bottom: var(--space-sm); color: var(--text); font-weight: 900; letter-spacing: -.04em; line-height: 1.15;}
.article-page .article-body h2 {font-size: clamp(26px, 3.5vw, 36px);}
.article-page .article-body h3 {font-size: clamp(22px, 3vw, 28px);}
.article-page .article-body h4 {font-size: clamp(18px, 2.5vw, 22px);}
.article-page .article-body blockquote {margin: var(--space-lg) 0; padding: 22px 24px; border-left: 3px solid var(--accent); background: linear-gradient(90deg, rgba(232,255,50,.06), transparent); color: var(--text); font-size: clamp(18px, 2.4vw, 22px); font-style: italic; line-height: 1.6;}
.article-page .article-body blockquote p {margin: 0; color: inherit; font-size: inherit; line-height: inherit;}
.article-page .article-body img {width: 100%; height: auto; margin: var(--space-lg) 0; border: 1px solid var(--panel-border); box-shadow: var(--shadow);}
.article-page .article-body ul,.article-page .article-body ol {margin-bottom: var(--space-md); padding-left: 22px;}
.article-page .article-body li + li {margin-top: 10px;}
.article-page .article-body ul li::marker {color: var(--card-action-color);}
.article-page .article-layout {margin-bottom: 0;}
.article-page .article-layout + .article-page-cta {margin-top: clamp(52px, 6vw, 72px) !important;}
.article-page .article-page-cta + .article-related {margin-top: clamp(52px, 6vw, 72px) !important;}
.article-related {margin-top: var(--page-section-gap); padding-top: 0; border-top: 0;}
.article-aside {position: sticky; top: 104px; display: grid; gap: 14px;}
.article-aside-card {padding: 20px 22px; border: 1px solid var(--panel-border); background: var(--panel-bg);}
.article-aside-label {margin: 0 0 8px; color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;}
.article-aside-value {display: block; color: var(--text); font-size: 15px; font-weight: 800; line-height: 1.35;}
.article-aside-card--cta {display: grid; gap: 14px; background:
    linear-gradient(135deg, rgba(232,255,50,.08), rgba(255,255,255,.02)),
    var(--panel-bg-flat);}
.article-aside-copy {margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6;}
.article-aside-card--cta .btn {width: 100%;}
.article-related-head {display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; margin-bottom: var(--section-head-gap);}
.article-related-head .kicker {margin-bottom: var(--kicker-gap);}
.article-related-head h2 {margin: 0; font-size: clamp(28px, 3.5vw, 40px); letter-spacing: -.05em;}
body.light .article-page .article-top,body.light .article-related {border-color: var(--panel-border);}
body.light .article-category-kicker::before {box-shadow: 0 0 18px rgba(127,148,0,.35);}
body.light .article-content-panel,body.light .article-aside-card {background: var(--panel-bg); border-color: var(--panel-border);}

@media (max-width: 1080px) {
  .article-layout {grid-template-columns: 1fr; gap: 28px;}
  .article-aside {position: static; grid-template-columns: repeat(2, minmax(0, 1fr));}
  .article-aside-card--cta {grid-column: 1 / -1;}
  .article-related-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 700px) {
  .article-page .article-cover {height: 240px;}
  .article-content-panel {padding: 22px 20px;}
  .article-page .article-layout + .article-page-cta,.article-page .article-page-cta + .article-related {margin-top: 40px !important;}
  .article-aside {grid-template-columns: 1fr;}
  .article-related-head {grid-template-columns: 1fr; gap: 12px;}
  .article-related-grid {grid-template-columns: 1fr;}
}

/* ==========================================================================
   Unified UI cards (includes/card.php)
   ========================================================================== */
.ui-card-grid {display: grid; gap: 22px;}
.ui-card-grid--4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
.ui-card-grid--3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.ui-card-grid--2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.ui-card-grid--1 {grid-template-columns: 1fr;}
.ui-card:not(.ui-card--media),.listing-card,.portfolio-card,.sa-service-card {position: relative; color: inherit; text-decoration: none; border: 1px solid var(--panel-border); background: var(--panel-bg); backdrop-filter: blur(10px); transition: transform .24s ease, border-color .24s ease;}
.ui-card:not(.ui-card--media):hover,.listing-card:hover,.portfolio-card:hover,.sa-service-card:hover {transform: translateY(-4px); border-color: var(--card-action-border-hover);}

/* Icon card */
.ui-card--icon,.listing-card {display: flex; flex-direction: column; min-height: 268px; padding: 26px 28px 32px; overflow: hidden;}
.ui-card--icon .ui-card__icon,.listing-card > i {width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 22px; background: var(--card-action-icon-bg); color: var(--card-action-icon-fg); font-size: 20px;}
.ui-card--icon .ui-card__number,.listing-card span {margin-bottom: 14px; color: var(--card-action-color); font-size: 12px; font-weight: 900;}
.ui-card--icon .ui-card__title,.listing-card h2,.listing-card h3 {margin: 0 0 14px; font-size: 19px; letter-spacing: -.03em; line-height: 1.2;}
.ui-card--icon .ui-card__desc,.listing-card p {margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65;}
.ui-card--icon > .ui-card__arrow {position: absolute; right: 22px; bottom: 18px; color: var(--card-action-color); font-size: 22px; opacity: 0; transform: translate(-4px, 4px); transition: opacity .22s ease, transform .22s ease;}
.listing-card::after {content: "\ea6c"; font-family: remixicon; position: absolute; right: 22px; bottom: 18px; color: var(--card-action-color); font-size: 22px; opacity: 0; transform: translate(-4px, 4px); transition: opacity .22s ease, transform .22s ease;}
.ui-card--icon:hover > .ui-card__arrow,.listing-card:hover::after {opacity: 1; transform: translate(0, 0);}

/* Media card */
.ui-card--media {min-height: 246px; display: grid; grid-template-rows: 168px auto auto; align-content: stretch; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.09); background: var(--media-bg); color: inherit; text-decoration: none; transition: transform .24s ease, border-color .24s ease;}
.ui-card--media:hover {transform: translateY(-4px); border-color: var(--card-action-border-hover);}
.ui-card--media .ui-card__media,.post-image {display: block; width: 100%; height: 168px; min-height: 168px; overflow: hidden; background: var(--media-bg);}
.ui-card--media .ui-card__media img,.post-image > .post-img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; background-color: var(--media-bg);}
.ui-card--media .ui-card__title {min-height: 44px; margin: 0; padding: 16px 18px 8px; background: rgba(7,9,8,.94); font-size: 15px; line-height: 1.18; letter-spacing: -.02em;}
.ui-card--media .ui-card__footer {min-height: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 0 18px 16px; background: rgba(7,9,8,.94); color: #9ba09d; font-size: 11px;}
.ui-card--media .ui-card__meta {color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none;}
.ui-card--media .ui-card__footer > i {flex-shrink: 0; color: var(--card-action-color); font-size: 15px;}
body.light .ui-card--media {border-color: rgba(5,7,4,.13); background: rgba(255,255,255,.72);}
body.light .ui-card--media .ui-card__title,body.light .ui-card--media .ui-card__footer {background: rgba(255,255,255,.9);}
body.light .ui-card--media .ui-card__media,body.light .post-image {background: var(--media-bg);}
body.light .article-row-image {border-color: rgba(5,7,4,.12);}

/* Portfolio card */
.ui-card--portfolio,.portfolio-card {display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0;}
.ui-card--portfolio .ui-card__media,.portfolio-card-media {position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--media-bg); background-image: none !important;}
.ui-card--portfolio .ui-card__media img,.portfolio-card-media img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; background-color: var(--media-bg);}
.ui-card--portfolio .ui-card__media::after,.portfolio-card-media::after {content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 48%, rgba(0,0,0,.22)); pointer-events: none;}
.ui-card--portfolio .ui-card__body,.portfolio-card-body {display: flex; flex-direction: column; gap: 10px; padding: 20px 52px 24px 22px; flex: 1;}
.ui-card--portfolio .ui-card__meta-row,.portfolio-card-meta {display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.ui-card--portfolio .ui-card__number,.portfolio-card-num {color: var(--card-action-color); font-size: 12px; font-weight: 900;}
.ui-card--portfolio .ui-card__label,.portfolio-card-cat {color: var(--muted-2); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; text-align: right;}
.ui-card--portfolio .ui-card__title,.portfolio-card-body h2 {margin: 0; font-size: 19px; letter-spacing: -.03em; line-height: 1.2;}
.ui-card--portfolio .ui-card__desc,.portfolio-card-body p {margin: 0; color: var(--muted); font-size: 13px; line-height: 1.58;}
.ui-card--portfolio > .ui-card__arrow {position: absolute; right: 22px; bottom: 18px; color: var(--card-action-color); font-size: 22px; opacity: 0; transform: translate(-4px, 4px); transition: opacity .22s ease, transform .22s ease; z-index: 2;}
.ui-card--portfolio:hover > .ui-card__arrow {opacity: 1; transform: translate(0, 0);}

/* Service link card */
.ui-card--service,.sa-service-card {display: grid; gap: 10px; padding: 22px; min-height: 210px; overflow: hidden; background: var(--panel-bg-flat);}
.ui-card--service .ui-card__icon,.sa-service-card > i {width: 40px; height: 40px; display: grid; place-items: center; background: var(--card-action-icon-bg); color: var(--card-action-icon-fg); font-size: 20px;}
.ui-card--service .ui-card__title,.sa-service-card h3 {margin: 0; font-size: 18px; line-height: 1.2;}
.ui-card--service .ui-card__desc,.sa-service-card p {margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55;}
.ui-card--service .ui-card__link,.sa-service-card > span {margin-top: auto; color: var(--card-action-color); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; transition: color .18s ease;}
.ui-card--service:hover .ui-card__link,.sa-service-card:hover > span {color: var(--card-action-hover);}
body.light .ui-card:not(.ui-card--media),body.light .listing-card,body.light .portfolio-card,body.light .sa-service-card {background: var(--panel-bg); border-color: var(--panel-border);}
body.light .ui-card--icon .ui-card__number,body.light .listing-card span,body.light .ui-card--portfolio .ui-card__number,body.light .portfolio-card-num,body.light .ui-card--service .ui-card__link,body.light .sa-service-card > span {color: var(--card-action-color);}
body.light .ui-card--icon > .ui-card__arrow,body.light .listing-card::after,body.light .ui-card--portfolio > .ui-card__arrow,body.light .ui-card--media .ui-card__footer > i {color: var(--card-action-color);}
body.light .ui-card--media .ui-card__title,body.light .ui-card--media .ui-card__footer {color: var(--text);}
body.light .sa-nearby-card i {color: var(--card-action-color);}

@media (max-width: 1080px) {
  .ui-card-grid--4,.ui-card-grid--3 {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 700px) {
  .ui-card-grid--4,.ui-card-grid--3,.ui-card-grid--2 {grid-template-columns: 1fr;}
  .ui-card--media {grid-template-rows: 150px auto auto;}
  .ui-card--media .ui-card__media {height: 150px; min-height: 150px;}
  .ui-card--icon,.listing-card {min-height: 0; padding: 22px 22px 28px;}
  .ui-card--portfolio .ui-card__body,.portfolio-card-body {padding: 18px 48px 20px 18px;}
}

img.lazy-img,[data-lazy-bg]:not(.is-loaded) {background-color: var(--media-bg); background-image: linear-gradient(
    110deg,
    var(--media-bg) 8%,
    var(--media-bg-alt) 18%,
    var(--media-bg) 33%
  ); background-size: 200% 100%; animation: media-placeholder-shimmer 1.35s ease-in-out infinite;}
img.lazy-img.is-loaded,[data-lazy-bg].is-loaded {animation: lazy-fade-in .35s ease; background-image: none;}
@keyframes media-placeholder-shimmer {0% { background-position: 100% 0; }
  100% { background-position: -100% 0; };}
@keyframes lazy-fade-in {from { opacity: .72; }
  to { opacity: 1; };}

/* ==========================================================================
   Bespoke Centered Modal & Backdrop Overlay
   ========================================================================== */
.bespoke-modal-overlay {position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; padding: 20px;}
.bespoke-modal-overlay.show {opacity: 1; pointer-events: auto;}
.bespoke-modal {position: relative; width: 100%; max-width: 460px; background: var(--bespoke-bg); border: 1px solid var(--bespoke-border); box-shadow: var(--bespoke-shadow); color: var(--bespoke-text-color); padding: 40px 32px; border-radius: 0; display: flex; flex-direction: column; align-items: center; text-align: center; transform: scale(0.94) translateY(20px); transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);}
.bespoke-modal-overlay.show .bespoke-modal {transform: scale(1) translateY(0);}
.bespoke-modal-close {position: absolute; top: 16px; right: 16px; background: transparent; border: 0; color: var(--muted-2); font-size: 22px; cursor: pointer; padding: 4px; transition: color 0.2s, transform 0.2s; display: flex; align-items: center; justify-content: center; line-height: 1;}
.bespoke-modal-close:hover {color: var(--bespoke-close-hover); transform: rotate(90deg);}
.bespoke-modal-icon {width: 64px; height: 64px; background: var(--bespoke-icon-bg); border: 1px solid var(--bespoke-icon-border); color: var(--bespoke-icon-color); display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 24px; box-shadow: var(--bespoke-icon-shadow);}
.bespoke-modal-icon img {width: 100%; height: 100%; object-fit: cover;}
.bespoke-modal-body {margin-bottom: 28px;}
.bespoke-modal-body h2 {margin: 0 0 10px 0; font-size: 21px; font-weight: 900; color: var(--bespoke-title-color); letter-spacing: -0.02em; text-transform: uppercase;}
.bespoke-modal-body p {margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--bespoke-desc-color);}
.bespoke-modal-actions {display: flex; gap: 12px; width: 100%; justify-content: center;}
.bespoke-modal-actions .btn {min-height: 46px; font-size: 12px; padding: 0 24px; flex: 1; max-width: 180px;}

/* ==========================================================================
   Sticky Contact Buttons (WhatsApp & Call)
   ========================================================================== */
.sticky-contact {position: fixed; left: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 999;}
.sticky-contact-btn {width: 48px; height: 48px; border-radius: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: box-shadow 0.25s, opacity 0.25s; text-decoration: none; cursor: pointer;}
.sticky-contact-btn.whatsapp {background: #25d366; border: 1px solid #1ebd59; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.2);}
.sticky-contact-btn.whatsapp:hover {box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35);}
.sticky-contact-btn.phone {background: var(--accent); color: #050704; border: 1px solid var(--accent); box-shadow: 0 8px 24px rgba(232, 255, 50, 0.2);}
.sticky-contact-btn.phone:hover {box-shadow: 0 12px 30px rgba(232, 255, 50, 0.35);}

@media (max-width: 768px) {
  .sticky-contact {left: 16px; bottom: 16px; gap: 10px;}
  .sticky-contact-btn {width: 46px; height: 46px; font-size: 22px;}
}

/* ==========================================================================
   Logo & Navbar Dark/Light Theme Display & Optimizations
   ========================================================================== */
.logo-light {display: var(--logo-light-display) !important;}
.logo-dark {display: var(--logo-dark-display) !important;}

@media (min-width: 701px) {
  .navin {display: flex !important; justify-content: space-between !important; align-items: center !important; padding-inline: 20px !important;}
}

.logo {font-size: 21px !important; white-space: nowrap; flex-shrink: 0;}
.menu {margin-inline: 24px !important;}

/* ==========================================================================
   Insights Section Layout Modifiers
   ========================================================================== */
.insights.no-testimonials {grid-template-columns: 1fr;}
.insights.no-articles {grid-template-columns: 1fr;}

/* ==========================================================================
   Project Request Form Styles
   ========================================================================== */
.contact-field:focus,form textarea:focus,form select:focus {border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(232,255,50,0.08);}
@media (max-width: 768px) {
  .project-request-form {grid-template-columns: 1fr !important;}
  .project-request-form div[style*="grid-column:span 2"],.project-request-form > div:last-child {grid-column: span 1 !important;}
}