: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);
  --text-em-shadow: 0 0 30px rgba(232, 255, 50, .15);
  --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-bg: #121514;
  --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: #ffffff;
  --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);
  /* Light mode panel overrides for pricing tabs */
  --panel-bg: rgba(255, 255, 255, 0.88);
  --panel-bg-flat: rgba(255, 255, 255, 0.88);
  --panel-border: rgba(5, 7, 4, .15);
  /* Light mode button overrides — no neon yellow */
  --btn-bg: #536600;
  --btn-color: #ffffff;
  --btn-shadow: rgba(83, 102, 0, .24);
  --input-shadow: rgba(184, 210, 0, .18);
  --text-em-shadow: none;
  color-scheme: light;
  background: var(--body-gradient);
  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: auto 1fr auto;
  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;
  justify-content: center;
  gap: 20px;
  color: #e9ece8;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow: hidden;
}

.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;
  white-space: nowrap;
  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: var(--accent-hover-color);
  border-color: var(--accent-hover-color);
}

/* Light mode: use dark olive green for better contrast */
body.light .btn.accent {
  background: #536600;
  border-color: #536600;
  color: #ffffff;
}

body.light .btn.accent:hover {
  background: #3f4f00;
  border-color: #3f4f00;
  color: #ffffff;
}

.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: var(--text-em-shadow);
}

.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;
  flex-shrink: 0;
}

.nav-actions .navbtn {
  margin-right: 0;
  flex-shrink: 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-panel.open .mobile-nav a:nth-child(8) {
  transition-delay: 0.34s;
}

.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.38s;
}

.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;
  }
}

/* ==========================================================================
   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);
}

/* Full-width image hero inside the modal */
.bespoke-modal-icon:has(img) {
  width: calc(100% + 64px);   /* bleed past the modal padding (32px * 2) */
  margin-left: -32px;
  margin-right: -32px;
  margin-top: -40px;
  margin-bottom: 28px;
  height: 280px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
}

.bespoke-modal-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Animation code container */
.bespoke-modal-icon:has(.bespoke-modal-anim) {
  width: calc(100% + 64px);   /* bleed past the modal padding (32px * 2) */
  margin-left: -32px;
  margin-right: -32px;
  margin-top: -40px;
  margin-bottom: 28px;
  padding: 36px 16px;
  background: radial-gradient(circle at center, #161b19 0%, #0d100f 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 -8px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0;
  height: auto;
  min-height: 220px;
}

body.light .bespoke-modal-icon:has(.bespoke-modal-anim) {
  background: radial-gradient(circle at center, #fbfcfb 0%, #f0f3ef 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 -8px 24px rgba(0, 0, 0, 0.03);
}

.bespoke-modal-anim {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bespoke-modal-anim svg {
  width: 250px;
  height: auto;
  max-width: 100%;
  display: block;
}

.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 var(--btn-shadow);
}

.sticky-contact-btn.phone:hover {
  box-shadow: 0 12px 30px var(--btn-shadow);
}

@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;
    }
  }

/* Pricing Plans ==========================================================*/
.pricing-page {
  padding-bottom: clamp(56px, 7vw, 92px);
}

.pricing-hero h2 {
  max-width: 860px;
}

.pricing-hero h2 em {
  color: var(--accent);
  font-style: normal;
  text-shadow: var(--text-em-shadow);
}

body.light .pricing-hero h2 em {
  color: #536600;
  text-shadow: none;
}

.pricing-lead {
  color: var(--muted);
  max-width: 640px;
}

/* Trust badges row under hero */
.pricing-trust-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-top: 28px;
}

.pricing-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .01em;
  text-transform: uppercase;
  padding: 0 20px;
}

.pricing-trust-item:first-child {
  padding-left: 0;
}

.pricing-trust-item i {
  font-size: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

body.light .pricing-trust-item i {
  color: #536600;
}

.pricing-trust-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--divider-color);
  flex-shrink: 0;
}

.pricing-shell {
  display: grid;
  gap: 30px;
  margin-top: var(--page-section-gap);
}

/* ── Tab bar ── */
.pricing-tabs {
  width: 100%;
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg-flat);
  /* Desktop: wrap into rows when there are many categories */
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: hidden;
}

.pricing-tab {
  /* Each tab grows but never below 120px */
  flex: 1 1 120px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border: 0;
  border-right: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  position: relative;
  text-align: center;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}

.pricing-tab i {
  font-size: 17px;
  color: var(--muted-2);
  flex-shrink: 0;
  transition: color .18s ease;
}

/* active underline indicator */
.pricing-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}

.pricing-tab:hover {
  color: var(--text);
  background: var(--rgba-05);
}

.pricing-tab:hover i {
  color: var(--accent);
}

.pricing-tab.active {
  color: var(--accent);
  background: var(--rgba-05);
}

.pricing-tab.active i {
  color: var(--accent);
}

.pricing-tab.active::after {
  transform: scaleX(1);
}

/* Light mode tab overrides */
body.light .pricing-tabs {
  background: #ffffff;
  border-color: rgba(5, 7, 4, .15);
}

body.light .pricing-tab {
  color: var(--muted);
  border-right-color: rgba(5, 7, 4, .10);
  border-bottom-color: rgba(5, 7, 4, .10);
}

body.light .pricing-tab:hover {
  color: var(--text);
  background: rgba(5, 7, 4, .03);
}

body.light .pricing-tab.active {
  color: #536600;
  background: rgba(83, 102, 0, .06);
}

body.light .pricing-tab.active i {
  color: #536600;
}

body.light .pricing-tab.active::after {
  background: #536600;
}

/* ── Panel ── */
.pricing-panel {
  display: none;
}

.pricing-panel.active {
  display: block;
}

/* ── Grid & Cards ── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.pricing-card.featured {
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 1px var(--accent-soft);
}

/* Badge on featured card */
.pricing-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  /* Dark mode: neon yellow — Light mode: overridden below */
  background: var(--btn-bg);
  color: var(--btn-color);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* Light mode badge: use the proper dark olive green instead of neon yellow */
body.light .pricing-badge {
  background: #536600;
  color: #ffffff;
}

.pricing-card h2 {
  margin: 0 0 12px;
  font-size: 21px;
  letter-spacing: -.035em;
}

.pricing-price {
  color: var(--accent);
  font-size: clamp(32px, 4.4vw, 44px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.055em;
}

/* Light mode price: slightly darker for contrast */
body.light .pricing-price {
  color: #536600;
}

.pricing-note {
  margin: 8px 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--panel-border);
  color: var(--muted);
  font-size: 13px;
}

.pricing-card ul {
  display: grid;
  gap: 13px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.pricing-card li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.pricing-card li i {
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

body.light .pricing-card li i {
  color: #536600;
}

.pricing-cta {
  width: 100%;
  margin-top: auto;
}

/* Light mode CTA button */
body.light .pricing-cta.btn.accent {
  background: #536600;
  border-color: #536600;
  color: #ffffff;
}

body.light .pricing-cta.btn.accent:hover {
  background: #3f4f00;
  border-color: #3f4f00;
}

.pricing-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  margin: 14px auto 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  transition: color .2s ease;
}

.pricing-phone i {
  color: var(--accent);
  font-size: 16px;
}

body.light .pricing-phone i {
  color: #536600;
}

.pricing-phone:hover {
  color: var(--accent);
}

body.light .pricing-phone:hover {
  color: #536600;
}

/* ── Custom CTA Band ── */
.pricing-custom-cta {
  margin-top: 48px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  box-shadow: var(--shadow);
}

.pricing-custom-cta__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 32px 40px;
}

.pricing-custom-cta__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  font-size: 26px;
  color: var(--accent);
}

body.light .pricing-custom-cta__icon {
  background: rgba(83, 102, 0, .10);
  border-color: rgba(83, 102, 0, .35);
  color: #536600;
}

.pricing-custom-cta__body {
  flex: 1;
  min-width: 0;
}

.pricing-custom-cta__body h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--text);
}

.pricing-custom-cta__body p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.pricing-custom-cta__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.pricing-custom-cta__secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: color .2s ease;
}

.pricing-custom-cta__secondary i {
  font-size: 17px;
  color: var(--muted-2);
  transition: color .2s ease;
}

.pricing-custom-cta__secondary:hover {
  color: var(--text);
}

.pricing-custom-cta__secondary:hover i {
  color: var(--accent);
}

body.light .pricing-custom-cta__secondary:hover i {
  color: #536600;
}

body.light .pricing-custom-cta {
  background: #ffffff;
  border-color: rgba(5, 7, 4, .15);
}

.pricing-preview .pricing-grid--preview {
  margin-top: 4px;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .pricing-tab {
    font-size: 10px;
    padding: 10px 12px;
  }
}

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

/* Tablet: scroll the tab bar horizontally instead of wrapping */
@media (max-width: 860px) {
  .pricing-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: flex-start;
    border-bottom: 2px solid var(--panel-border);
  }

  .pricing-tabs::-webkit-scrollbar {
    display: none;
  }

  .pricing-tab {
    flex: 0 0 auto;
    min-width: 130px;
    min-height: 52px;
    scroll-snap-align: start;
    /* No bottom border — bar itself acts as separator */
    border-bottom: 0;
    border-right: 1px solid var(--panel-border);
    padding: 8px 14px;
    font-size: 10px;
  }

  .pricing-tab:last-child {
    border-right: 0;
  }

  .pricing-tab::after {
    /* on scroll-bar layout, move indicator to bottom of the container */
    bottom: -2px;
  }

  body.light .pricing-tab {
    border-right-color: rgba(5, 7, 4, .10);
  }
}

@media (max-width: 700px) {

  /* -- Horizontal category tab bar -- */
  .pricing-tab {
    min-width: 120px;
    font-size: 9px;
    padding: 8px 10px;
  }

  /* -- Trust row -- */
  .pricing-trust-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    margin-top: 24px;
  }

  .pricing-trust-item {
    padding: 0;
    font-size: 11px;
    justify-content: flex-start;
  }

  .pricing-trust-sep {
    display: none;
  }

  /* -- CTA band -- */
  .pricing-custom-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 22px;
  }

  .pricing-custom-cta__actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .pricing-custom-cta__actions .btn {
    flex: 1;
    justify-content: center;
    min-width: 140px;
  }

  /* ── Mobile vertical plan tab layout ── */

  /* Panel becomes a flex row: left nav | right card */
  .pricing-panel.active {
    display: flex;
    align-items: flex-start;
    gap: 0;
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
    overflow: hidden;
  }

  /* Left vertical nav injected by JS */
  .pricing-plan-nav {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 44px;
    border-right: 1px solid var(--panel-border);
    background: var(--panel-bg-flat);
    align-self: stretch;
  }

  .pricing-plan-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--panel-border);
    border-right: 3px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
    cursor: pointer;
    /* Vertical text: bottom-to-top */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    transition: color .16s ease, background .16s ease, border-left-color .16s ease;
    /* border-left becomes the top border visually after rotate */
    flex: 1;
    width: 100%;
    min-height: 48px;
  }

  .pricing-plan-nav__item:last-child {
    border-bottom: 0;
  }

  /* Star icon: counter-rotate so it stays upright */
  .pricing-plan-nav__item i {
    font-size: 12px;
    color: var(--accent);
    flex-shrink: 0;
    transform: rotate(180deg);
    writing-mode: horizontal-tb;
  }

  .pricing-plan-nav__item.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-right-color: var(--accent);
  }

  .pricing-plan-nav__item:hover:not(.active) {
    color: var(--text);
    background: var(--rgba-05);
  }

  /* Light mode overrides */
  body.light .pricing-plan-nav {
    background: #f4f6ef;
    border-right-color: rgba(5, 7, 4, .12);
  }

  body.light .pricing-plan-nav__item {
    border-bottom-color: rgba(5, 7, 4, .10);
  }

  body.light .pricing-plan-nav__item.active {
    color: #536600;
    background: rgba(83, 102, 0, .08);
    border-right-color: #536600;
  }

  body.light .pricing-plan-nav__item i {
    color: #536600;
  }

  body.light .pricing-plan-nav__item:hover:not(.active) {
    color: var(--text);
    background: rgba(5, 7, 4, .04);
  }

  /* Right side grid: hide all cards, show only active */
  .pricing-grid {
    display: contents;
    /* let cards be direct flex children of the panel */
  }

  .pricing-card {
    display: none;
    flex: 1;
    min-height: 0;
    padding: 24px 18px 20px;
    border: 0;
    box-shadow: none;
    animation: fadeCardIn .2s ease;
  }

  .pricing-card--active {
    display: flex;
  }

  /* Badge needs repositioning inside the card on mobile */
  .pricing-card--active .pricing-badge {
    position: static;
    transform: none;
    display: inline-flex;
    margin: 0 0 12px;
    align-self: flex-start;
  }

  @keyframes fadeCardIn {
    from {
      opacity: 0;
      transform: translateX(8px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}