/* ============ MARKETING SITE STYLES ============ */
    /* ==========================================================================
   THE COUNSELOR GROUP — Design System
   Inspired by: Brunswick Group, Teneo, FGS Global, Lazard, Charterhouse Capital
   Aesthetic: quiet authority — senior, restrained, global
   ========================================================================== */

    /* ---------- 1. Tokens ---------- */
    :root {
      /* — Color (deep ink + antique gold + warm cream) — */
      --ink: #0E1B2C;
      --ink-2: #14233A;
      --ink-3: #1B2F4A;
      --gold: #B89968;
      --gold-2: #C9AC7D;
      /* hover */
      --gold-3: #8B7048;
      /* deep gold for ink backgrounds */
      --cream: #FAF6F0;
      --cream-2: #F1ECE3;
      --paper: #FFFFFF;
      --line: rgba(14, 27, 44, 0.10);
      --line-2: rgba(14, 27, 44, 0.18);
      --line-gold: rgba(184, 153, 104, 0.35);
      --mute: #5C6779;
      --mute-2: #8A93A1;

      /* — Type — */
      --font-display: 'Cormorant Garamond', 'Cormorant', 'Times New Roman', serif;
      --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-eyebrow: 'Inter', sans-serif;

      /* — Scale — */
      --t-hero: clamp(48px, 6.5vw, 92px);
      --t-h1: clamp(40px, 5vw, 72px);
      --t-h2: clamp(32px, 3.6vw, 52px);
      --t-h3: clamp(24px, 2.2vw, 32px);
      --t-h4: 20px;
      --t-body: 17px;
      --t-small: 14px;
      --t-eyebrow: 12px;

      /* — Space — */
      --s-1: 4px;
      --s-2: 8px;
      --s-3: 12px;
      --s-4: 16px;
      --s-5: 24px;
      --s-6: 32px;
      --s-7: 48px;
      --s-8: 64px;
      --s-9: 96px;
      --s-10: 128px;

      /* — Layout — */
      --container: 1280px;
      --container-narrow: 920px;
      --radius: 2px;

      /* — Motion — */
      --ease: cubic-bezier(0.19, 1, 0.22, 1);
    }

    /* ---------- 2. Reset ---------- */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: var(--font-body);
      font-size: var(--t-body);
      line-height: 1.65;
      color: var(--ink);
      background: var(--cream);
      font-feature-settings: "ss01", "cv11";
    }

    img,
    svg {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font: inherit;
      cursor: pointer;
      border: 0;
      background: none;
    }

    input,
    textarea,
    select {
      font: inherit;
      color: inherit;
    }

    /* ---------- 3. Typography ---------- */
    h1,
    h2,
    h3,
    h4,
    h5 {
      font-family: var(--font-display);
      font-weight: 300;
      letter-spacing: -0.01em;
      line-height: 1.08;
      color: var(--ink);
      margin: 0;
    }
    h4, h5 { font-weight: 600; }
    strong, em { font-weight: 800; font-style: normal; }

    h1 {
      font-size: var(--t-h1);
    }

    h2 {
      font-size: var(--t-h2);
    }

    h3 {
      font-size: var(--t-h3);
      line-height: 1.2;
    }

    h4 {
      font-size: var(--t-h4);
      line-height: 1.3;
    }

    p {
      margin: 0 0 1em;
      color: var(--ink);
    }

    .lead {
      font-size: 19px;
      line-height: 1.6;
      color: var(--ink);
      max-width: 60ch;
    }

    .eyebrow {
      font-family: var(--font-eyebrow);
      font-size: var(--t-eyebrow);
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink);
    }

    .eyebrow--gold {
      color: var(--gold);
    }

    .serif-italic {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 400;
    }

    /* gold underline accent under headings */
    .heading-line {
      display: inline-block;
      position: relative;
      padding-bottom: var(--s-4);
    }

    .heading-line::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 64px;
      height: 2px;
      background: var(--gold);
    }

    .heading-line.center::after {
      left: 50%;
      transform: translateX(-50%);
    }

    /* ---------- 4. Layout ---------- */
    .container {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--s-6);
    }

    .container--narrow {
      max-width: var(--container-narrow);
    }

    .section {
      padding: var(--s-9) 0;
    }

    .section--lg {
      padding: calc(var(--s-9) + 32px) 0;
    }

    .section--sm {
      padding: var(--s-8) 0;
    }

    .grid {
      display: grid;
      gap: var(--s-6);
    }

    .grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .flex {
      display: flex;
    }

    .flex-between {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .flex-center {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .gap-4 {
      gap: var(--s-4);
    }

    .gap-5 {
      gap: var(--s-5);
    }

    .gap-6 {
      gap: var(--s-6);
    }

    .divider {
      height: 1px;
      background: var(--line);
      border: 0;
      margin: 0;
    }

    .divider-gold {
      width: 48px;
      height: 1px;
      background: var(--gold);
      border: 0;
      margin: var(--s-4) 0;
    }

    .divider-gold.center {
      margin-left: auto;
      margin-right: auto;
    }

    /* ---------- 5. Buttons ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--s-3);
      padding: 16px 36px;
      font-family: var(--font-eyebrow);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      border: 1px solid transparent;
      transition: all .35s var(--ease);
      cursor: pointer;
    }

    .btn--ink {
      background: var(--ink);
      color: var(--cream);
    }

    .btn--ink:hover {
      background: var(--ink-3);
    }

    .btn--outline {
      background: transparent;
      border-color: var(--ink);
      color: var(--ink);
    }

    .btn--outline:hover {
      background: var(--ink);
      color: var(--cream);
    }

    .btn--gold {
      background: var(--gold);
      border-color: transparent;
      color: var(--ink);
    }

    .btn--gold:hover {
      background: var(--ink);
      color: var(--gold);
    }

    .btn--ghost {
      padding: 0;
      gap: var(--s-3);
    }

    .btn--ghost::after {
      content: "";
      width: 24px;
      height: 1px;
      background: currentColor;
      transition: width .35s var(--ease);
    }

    .btn--ghost:hover::after {
      width: 40px;
    }

    /* ---------- 6. Header / Nav ---------- */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(250, 246, 240, 0.94);
      backdrop-filter: saturate(150%) blur(8px);
      -webkit-backdrop-filter: saturate(150%) blur(8px);
      border-bottom: 1px solid var(--line);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 0;
    }

    .nav__logo {
      display: flex;
      align-items: center;
      gap: var(--s-3);
    }

    .nav__logo svg {
      height: 56px;
      width: auto;
    }

    .nav__menu {
      display: flex;
      align-items: center;
      gap: var(--s-7);
    }

    .nav__menu a {
      font-family: var(--font-display);
      font-size: 17px;
      letter-spacing: 0.01em;
      color: var(--ink);
      position: relative;
      padding: 6px 0;
      transition: color .25s var(--ease);
    }

    .nav__menu a:hover {
      color: var(--gold);
    }

    .nav__menu a.is-active {
      color: var(--ink);
    }

    .nav__menu a.is-active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1.5px;
      background: var(--gold);
    }

    .nav__right {
      display: flex;
      align-items: center;
      gap: var(--s-5);
    }

    .lang-switch {
      display: inline-flex;
      gap: 6px;
      font-family: var(--font-eyebrow);
      font-size: 12px;
      letter-spacing: 0.18em;
      font-weight: 500;
      color: var(--mute);
    }

    .lang-switch button {
      color: var(--mute);
      padding: 4px 6px;
      cursor: pointer;
      letter-spacing: 0.18em;
    }

    .lang-switch button.is-active {
      color: var(--ink);
      border-bottom: 1px solid var(--gold);
    }

    .lang-switch span {
      color: var(--line-2);
    }

    .nav__burger {
      display: none;
      padding: 6px;
    }

    .nav__burger span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: var(--ink);
      margin: 5px 0;
      transition: transform .3s var(--ease), opacity .3s var(--ease);
    }

    /* ---------- 7. Hero ---------- */
    .hero {
      position: relative;
      display: grid;
      grid-template-columns: 1.05fr 1.15fr;
      align-items: stretch;
      min-height: 78vh;
      background: var(--cream);
    }

    .hero__copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: var(--s-9) var(--s-7) var(--s-9) 0;
      padding-left: max(var(--s-7), calc((100vw - var(--container)) / 2 + var(--s-6)));
    }

    .hero__title {
      font-size: var(--t-hero);
    }

    .hero__lead {
      margin-top: var(--s-6);
      max-width: 44ch;
      color: var(--ink);
      font-size: 18px;
    }

    .hero__cta {
      margin-top: var(--s-7);
    }

    .hero__media {
      position: relative;
      overflow: hidden;
      background: #1f2c40;
    }

    .hero__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero__media::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--cream) 0%, transparent 18%);
      pointer-events: none;
    }

    /* ---------- 8. Pillar Cards (Home) ---------- */
    .pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line);
    }

    .pillar {
      padding: var(--s-8) var(--s-6);
      border-right: 1px solid var(--line);
    }

    .pillar:last-child {
      border-right: 0;
    }

    .pillar h3 {
      font-family: var(--font-eyebrow);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .pillar>.divider-gold {
      margin-top: 12px;
      margin-bottom: var(--s-5);
    }

    .pillar__list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .pillar__list li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 0;
      border-bottom: 1px solid var(--line);
      font-family: var(--font-display);
      font-size: 19px;
      color: var(--ink);
      transition: color .2s var(--ease);
    }

    .pillar__list li:last-child {
      border-bottom: 0;
    }

    .pillar__list a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .pillar__list a:hover {
      color: var(--gold);
    }

    .pillar__list .arrow {
      color: var(--gold);
      font-size: 14px;
      transition: transform .3s var(--ease);
    }

    .pillar__list a:hover .arrow {
      transform: translateX(6px);
    }

    /* ---------- 9. Page Header (interior pages) ---------- */
    .page-header {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      background: var(--cream);
      align-items: stretch;
      min-height: 460px;
    }

    .page-header__copy {
      padding: var(--s-9) var(--s-7);
      padding-left: max(var(--s-7), calc((100vw - var(--container)) / 2 + var(--s-6)));
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .page-header__copy h1 {
      font-size: var(--t-h1);
    }

    .page-header__copy p {
      max-width: 50ch;
      margin-top: var(--s-5);
    }

    .page-header__media {
      position: relative;
      overflow: hidden;
    }

    .page-header__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.92;
    }

    .page-header__media::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--cream) 0%, transparent 25%);
    }

    /* ---------- 10. Service / Index Cards (Advisory) ---------- */
    .service-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
      background: var(--paper);
    }

    .service {
      padding: var(--s-8) var(--s-7);
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      position: relative;
      background: var(--paper);
      transition: background .35s var(--ease);
    }

    .service:hover {
      background: var(--cream-2);
    }

    .service__num {
      font-family: var(--font-display);
      color: var(--gold);
      font-size: 22px;
      letter-spacing: 0.05em;
      display: block;
      margin-bottom: var(--s-2);
    }

    .service__num+.divider-gold {
      width: 32px;
      margin: var(--s-2) 0 var(--s-5);
    }

    .service h3 {
      font-size: 26px;
      margin-bottom: var(--s-4);
    }

    .service p {
      color: var(--mute);
      font-size: 16px;
      margin: 0;
    }

    /* ---------- 11. Experience Lines (icon list) ---------- */
    .exp-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: var(--s-9);
      align-items: start;
    }

    .exp-lines {
      border-top: 1px solid var(--line);
    }

    .exp-line {
      display: grid;
      grid-template-columns: 80px 1fr 32px;
      gap: var(--s-5);
      align-items: center;
      padding: var(--s-6) 0;
      border-bottom: 1px solid var(--line);
    }

    .exp-line__icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--cream-2);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .exp-line__icon svg {
      width: 26px;
      height: 26px;
      stroke: var(--gold);
      fill: none;
    }

    .exp-line__icon::after {
      content: "";
      position: absolute;
      left: 64px;
      top: 50%;
      width: 16px;
      height: 1px;
      background: var(--gold);
    }

    .exp-line h4 {
      font-family: var(--font-eyebrow);
      font-size: 13px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      margin-bottom: var(--s-2);
    }

    .exp-line p {
      color: var(--mute);
      margin: 0;
      font-size: 16px;
    }

    .exp-line__chev {
      color: var(--gold);
      font-size: 18px;
    }

    .pull-quote {
      position: relative;
      padding-left: var(--s-7);
      border-left: 0;
      background: linear-gradient(180deg, var(--cream-2) 0%, transparent 100%);
      padding: var(--s-8) var(--s-6);
      border-radius: 1px;
    }

    .pull-quote .qmark {
      font-family: var(--font-display);
      font-size: 56px;
      color: var(--gold);
      line-height: 0.6;
      display: block;
      margin-bottom: var(--s-4);
    }

    .pull-quote h2 {
      font-weight: 400;
      line-height: 1.15;
    }

    .pull-quote h2 em {
      font-style: italic;
      color: var(--ink-3);
    }

    .pull-quote .divider-gold {
      margin-top: var(--s-6);
    }

    /* ---------- 12. Founder / Person ---------- */
    .founder-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: var(--s-9);
      align-items: start;
    }

    .founder-image {
      aspect-ratio: 4 / 5;
      background: var(--cream-2);
      overflow: hidden;
      position: relative;
    }

    .founder-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .founder__name {
      font-size: var(--t-h2);
    }

    .founder__role {
      font-family: var(--font-eyebrow);
      font-size: 13px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-top: var(--s-3);
    }

    .founder__bio {
      margin-top: var(--s-5);
      max-width: 56ch;
    }

    .founder__bio p {
      color: var(--ink);
      font-size: 17px;
    }

    .cred-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-6);
      margin-top: var(--s-7);
      padding-top: var(--s-7);
      border-top: 1px solid var(--line-gold);
    }

    .cred__icon {
      width: 32px;
      height: 32px;
      color: var(--gold);
      margin-bottom: var(--s-3);
    }

    .cred h5 {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 500;
      margin-bottom: var(--s-2);
    }

    .cred p {
      color: var(--mute);
      font-size: 14px;
      margin: 0;
    }

    /* ---------- 13. Contact ---------- */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: var(--s-9);
      align-items: start;
    }

    .contact-list {
      list-style: none;
      padding: 0;
      margin: var(--s-7) 0 0;
    }

    .contact-list li {
      display: flex;
      align-items: center;
      gap: var(--s-5);
      padding: var(--s-5) 0;
      border-bottom: 1px solid var(--line);
      font-size: 16px;
    }

    .contact-list li:last-child {
      border-bottom: 0;
    }

    .contact-list .icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--cream-2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold);
      flex-shrink: 0;
    }

    .form {
      display: grid;
      gap: var(--s-5);
    }

    .field {
      display: grid;
      gap: 8px;
    }

    .field label {
      font-family: var(--font-eyebrow);
      font-size: 11px;
      letter-spacing: 0.22em;
      font-weight: 500;
      text-transform: uppercase;
      color: var(--mute);
    }

    .field input,
    .field textarea {
      background: var(--paper);
      border: 1px solid var(--line);
      padding: 14px 18px;
      font-size: 15px;
      color: var(--ink);
      outline: 0;
      transition: border-color .25s var(--ease);
      font-family: var(--font-body);
    }

    .field input:focus,
    .field textarea:focus {
      border-color: var(--gold);
    }

    .field textarea {
      min-height: 120px;
      resize: vertical;
    }

    .how-we-work {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-6);
      padding: var(--s-8) 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--cream-2);
    }

    .how-we-work__item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--s-4);
      padding: 0 var(--s-5);
    }

    .how-we-work__item:not(:last-child) {
      border-right: 1px solid var(--line);
    }

    .how-we-work__item svg {
      color: var(--gold);
      width: 26px;
      height: 26px;
    }

    .how-we-work__item span {
      font-family: var(--font-display);
      font-size: 18px;
    }

    .how-we-work__title {
      text-align: center;
      font-family: var(--font-eyebrow);
      font-size: 13px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: var(--s-7);
    }

    .how-we-work__title::after {
      content: "";
      display: block;
      width: 32px;
      height: 1px;
      background: var(--gold);
      margin: var(--s-3) auto 0;
    }

    /* ---------- 14. CTA Bar ---------- */
    .cta-bar {
      background: var(--ink);
      color: var(--cream);
      padding: var(--s-8) var(--s-6);
      text-align: center;
    }

    .cta-bar h3 {
      color: var(--cream);
      font-family: var(--font-eyebrow);
      font-size: 16px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-weight: 500;
      margin-bottom: var(--s-5);
    }

    .cta-bar h3::after {
      content: "";
      display: block;
      width: 48px;
      height: 1px;
      background: var(--gold);
      margin: var(--s-4) auto 0;
    }

    .cta-bar .btn--gold {
      margin-top: var(--s-3);
    }

    /* ---------- 15. Footer ---------- */
    .site-footer {
      background: var(--ink);
      color: var(--cream);
      padding: var(--s-9) 0 var(--s-6);
    }

    .site-footer .container {
      display: grid;
      gap: var(--s-7);
    }

    .footer__top {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: var(--s-7);
    }

    .footer__brand svg {
      height: 70px;
      width: auto;
    }

    .footer__brand p {
      margin-top: var(--s-5);
      color: rgba(250, 246, 240, .7);
      font-size: 14px;
      max-width: 38ch;
    }

    .footer__col h5 {
      color: var(--cream);
      font-family: var(--font-eyebrow);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      margin-bottom: var(--s-4);
      font-weight: 500;
    }

    .footer__col ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: var(--s-3);
    }

    .footer__col a {
      color: rgba(250, 246, 240, .72);
      font-size: 14px;
      transition: color .25s var(--ease);
    }

    .footer__col a:hover {
      color: var(--gold-2);
    }

    .footer__bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: var(--s-5);
      border-top: 1px solid rgba(250, 246, 240, .12);
      color: rgba(250, 246, 240, .55);
      font-size: 13px;
    }

    .footer__bottom .tagline {
      font-family: var(--font-display);
      font-style: italic;
      color: rgba(250, 246, 240, .7);
      font-size: 15px;
    }

    /* ---------- 16. Insights / Editorial ---------- */
    .insights-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-7);
    }

    .article-card {
      display: flex;
      flex-direction: column;
    }

    .article-card__media {
      aspect-ratio: 4 / 3;
      background: var(--cream-2);
      overflow: hidden;
      margin-bottom: var(--s-5);
    }

    .article-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .9s var(--ease);
    }

    .article-card:hover .article-card__media img {
      transform: scale(1.04);
    }

    .article-card .meta {
      font-family: var(--font-eyebrow);
      font-size: 12px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: var(--s-3);
    }

    .article-card h3 {
      font-size: 24px;
      line-height: 1.25;
      margin-bottom: var(--s-3);
      transition: color .25s var(--ease);
    }

    .article-card:hover h3 {
      color: var(--gold);
    }

    .article-card p {
      color: var(--mute);
      font-size: 15px;
    }

    .feature-article {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: var(--s-8);
      align-items: center;
      margin-bottom: var(--s-9);
      padding-bottom: var(--s-9);
      border-bottom: 1px solid var(--line);
    }

    .feature-article__media {
      aspect-ratio: 4/3;
      overflow: hidden;
    }

    .feature-article__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .feature-article h2 {
      font-size: var(--t-h2);
      margin: var(--s-4) 0 var(--s-5);
    }

    .feature-article .lead {
      color: var(--mute);
    }

    /* ---------- 17. Case Studies ---------- */
    .case-row {
      display: grid;
      grid-template-columns: 220px 1fr 200px;
      gap: var(--s-7);
      padding: var(--s-7) 0;
      border-bottom: 1px solid var(--line);
      align-items: start;
    }

    .case-row:first-child {
      border-top: 1px solid var(--line);
    }

    .case-row__sector {
      font-family: var(--font-eyebrow);
      font-size: 12px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
    }

    .case-row__sector .meta {
      display: block;
      color: var(--mute);
      margin-top: var(--s-2);
      letter-spacing: 0.1em;
    }

    .case-row h3 {
      font-size: 26px;
      margin-bottom: var(--s-3);
    }

    .case-row p {
      color: var(--mute);
      font-size: 16px;
      margin: 0;
    }

    .case-row__outcome {
      font-family: var(--font-display);
      font-style: italic;
      color: var(--ink);
      font-size: 22px;
      line-height: 1.3;
      border-left: 1px solid var(--gold);
      padding-left: var(--s-5);
    }

    /* ---------- 18. Press ---------- */
    .press-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--s-6);
      border-top: 1px solid var(--line);
    }

    .press-item {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: var(--s-5);
      padding: var(--s-6);
      border-bottom: 1px solid var(--line);
    }

    .press-item:nth-child(odd) {
      border-right: 1px solid var(--line);
    }

    .press-item__date {
      font-family: var(--font-eyebrow);
      font-size: 11px;
      letter-spacing: 0.22em;
      color: var(--gold);
      text-transform: uppercase;
    }

    .press-item__date .outlet {
      display: block;
      color: var(--ink);
      margin-top: var(--s-2);
      font-family: var(--font-display);
      font-size: 18px;
      letter-spacing: 0;
      text-transform: none;
      font-style: italic;
    }

    .press-item h4 {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.3;
      margin-bottom: var(--s-3);
    }

    .press-item p {
      color: var(--mute);
      font-size: 14px;
      margin: 0;
    }

    /* ---------- 18b. Manifesto / Statement of intent ---------- */
    .manifesto {
      background: var(--cream);
      padding: var(--s-10) 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      text-align: center;
    }

    .manifesto .container {
      max-width: 980px;
    }

    .manifesto .eyebrow {
      display: block;
      text-align: center;
      color: var(--gold);
      margin-bottom: var(--s-5);
    }

    .manifesto .eyebrow::after {
      content: "";
      display: block;
      width: 32px;
      height: 1px;
      background: var(--gold);
      margin: var(--s-3) auto 0;
    }

    .manifesto h2 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(28px, 3vw, 44px);
      line-height: 1.32;
      letter-spacing: -0.005em;
    }

    .manifesto h2 em {
      color: var(--ink-3);
      font-style: italic;
    }

    .manifesto .signature {
      margin-top: var(--s-6);
      font-family: var(--font-display);
      font-style: italic;
      color: var(--mute);
      font-size: 17px;
    }

    /* ---------- 18c. Approach (4 numbered steps) ---------- */
    .approach {
      padding: var(--s-9) 0;
      background: var(--paper);
    }

    .approach__intro {
      text-align: center;
      margin-bottom: var(--s-8);
    }

    .approach__intro .eyebrow {
      display: inline-block;
      color: var(--gold);
    }

    .approach__intro h2 {
      margin-top: var(--s-4);
    }

    .approach__intro h2::after {
      content: "";
      display: block;
      width: 48px;
      height: 1px;
      background: var(--gold);
      margin: var(--s-5) auto 0;
    }

    .approach__intro p {
      color: var(--mute);
      max-width: 56ch;
      margin: var(--s-5) auto 0;
    }

    .approach-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .approach-step {
      padding: var(--s-7) var(--s-6);
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      position: relative;
    }

    .approach-step__num {
      font-family: var(--font-display);
      font-size: 22px;
      color: var(--gold);
      letter-spacing: 0.05em;
      display: block;
      margin-bottom: var(--s-3);
    }

    .approach-step__num::after {
      content: "";
      display: block;
      width: 24px;
      height: 1px;
      background: var(--gold);
      margin-top: var(--s-3);
    }

    .approach-step h4 {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      margin-top: var(--s-5);
      margin-bottom: var(--s-3);
    }

    .approach-step p {
      color: var(--mute);
      font-size: 15px;
      margin: 0;
    }

    /* ---------- 18d. Featured Engagement (case tease) ---------- */
    .featured-engagement {
      background: var(--ink);
      color: var(--cream);
      padding: var(--s-10) 0;
      position: relative;
      overflow: hidden;
    }

    .featured-engagement::before {
      content: "";
      position: absolute;
      top: 0;
      right: -10%;
      width: 60%;
      height: 100%;
      background: radial-gradient(ellipse at center, rgba(184, 153, 104, 0.18) 0%, transparent 60%);
      pointer-events: none;
    }

    .featured-engagement .container {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: var(--s-9);
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .featured-engagement .eyebrow {
      color: var(--gold-2);
      margin-bottom: var(--s-4);
    }

    .featured-engagement h2 {
      color: var(--cream);
      font-size: clamp(32px, 3.4vw, 48px);
      line-height: 1.18;
      margin-bottom: var(--s-5);
    }

    .featured-engagement .meta {
      font-family: var(--font-eyebrow);
      font-size: 12px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(250, 246, 240, 0.55);
      margin-bottom: var(--s-5);
    }

    .featured-engagement p {
      color: rgba(250, 246, 240, 0.78);
      font-size: 17px;
      max-width: 56ch;
    }

    .featured-engagement .quote {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 26px;
      color: var(--cream);
      border-left: 1px solid var(--gold);
      padding-left: var(--s-6);
      line-height: 1.35;
    }

    .featured-engagement .btn--gold {
      margin-top: var(--s-5);
    }

    /* ---------- 18e. Split block (Insight + Founder) ---------- */
    .split-block {
      padding: var(--s-9) 0;
      background: var(--cream);
    }

    .split-block .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-9);
      align-items: stretch;
    }

    .split-card {
      background: var(--paper);
      padding: var(--s-7) var(--s-7);
      border-top: 2px solid var(--gold);
      display: flex;
      flex-direction: column;
    }

    .split-card .eyebrow {
      color: var(--gold);
      margin-bottom: var(--s-4);
    }

    .split-card h3 {
      font-size: 28px;
      line-height: 1.2;
      margin-bottom: var(--s-4);
    }

    .split-card p {
      color: var(--mute);
      font-size: 16px;
      flex: 1;
    }

    .split-card .btn--ghost {
      margin-top: var(--s-5);
      font-family: var(--font-eyebrow);
      font-size: 12px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink);
      align-self: flex-start;
    }

    .split-card--founder {
      background: var(--ink);
      color: var(--cream);
      border-top-color: var(--gold);
    }

    .split-card--founder .eyebrow {
      color: var(--gold-2);
    }

    .split-card--founder h3 {
      color: var(--cream);
    }

    .split-card--founder p {
      color: rgba(250, 246, 240, 0.75);
    }

    .split-card--founder .btn--ghost {
      color: var(--gold-2);
    }

    /* ---------- 18f. Global Presence ---------- */
    .global-presence {
      padding: var(--s-9) 0;
      background: var(--paper);
      border-top: 1px solid var(--line);
    }

    .global-presence .intro {
      text-align: center;
      margin-bottom: var(--s-8);
    }

    .global-presence .intro .eyebrow {
      color: var(--gold);
    }

    .global-presence .intro h2 {
      margin-top: var(--s-4);
    }

    .global-presence .intro h2::after {
      content: "";
      display: block;
      width: 48px;
      height: 1px;
      background: var(--gold);
      margin: var(--s-5) auto 0;
    }

    .cities {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 1px solid var(--line-gold);
    }

    .city {
      padding: var(--s-7) var(--s-6);
      border-right: 1px solid var(--line);
      text-align: center;
    }

    .city:last-child {
      border-right: 0;
    }

    .city__name {
      font-family: var(--font-display);
      font-size: 36px;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: var(--s-2);
    }

    .city__role {
      font-family: var(--font-eyebrow);
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: var(--s-4);
    }

    .city__role::after {
      content: "";
      display: block;
      width: 24px;
      height: 1px;
      background: var(--gold);
      margin: var(--s-3) auto 0;
    }

    .city__copy {
      color: var(--mute);
      font-size: 14px;
      max-width: 30ch;
      margin: 0 auto;
    }

    /* ---------- 18g. Closing pull-quote ---------- */
    .closing-quote {
      padding: var(--s-10) 0;
      background: var(--cream-2);
      text-align: center;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .closing-quote .container {
      max-width: 920px;
    }

    .closing-quote .qmark {
      font-family: var(--font-display);
      font-size: 80px;
      color: var(--gold);
      line-height: 0.6;
      display: block;
      margin-bottom: var(--s-4);
    }

    .closing-quote h2 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(30px, 3.2vw, 46px);
      line-height: 1.3;
      letter-spacing: -0.005em;
    }

    .closing-quote h2 em {
      font-style: italic;
      color: var(--ink-3);
    }

    .closing-quote .attr {
      margin-top: var(--s-6);
      font-family: var(--font-eyebrow);
      font-size: 12px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--mute);
    }

    /* responsive add-ons */
    @media (max-width: 1024px) {
      .approach-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .featured-engagement .container {
        grid-template-columns: 1fr;
        gap: var(--s-7);
      }

      .split-block .container {
        grid-template-columns: 1fr;
        gap: var(--s-6);
      }

      .cities {
        grid-template-columns: 1fr;
      }

      .city {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }
    }

    @media (max-width: 720px) {
      .approach-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ---------- 19. Anim ---------- */
    .fade-up {
      opacity: 0;
      transform: translate3d(0, 20px, 0);
      transition: opacity .9s var(--ease), transform .9s var(--ease);
      will-change: transform, opacity;
    }

    .fade-up.is-in {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    /* ---------- 20. Responsive ---------- */
    @media (max-width: 1024px) {
      .hero {
        grid-template-columns: 1fr;
        min-height: auto;
      }

      .hero__copy {
        padding: var(--s-9) var(--s-6);
      }

      .hero__media {
        aspect-ratio: 16/10;
      }

      .page-header {
        grid-template-columns: 1fr;
      }

      .page-header__copy {
        padding: var(--s-8) var(--s-6);
      }

      .page-header__media {
        aspect-ratio: 16/9;
      }

      .pillars {
        grid-template-columns: 1fr;
      }

      .pillar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .service-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .exp-grid,
      .founder-grid,
      .contact-grid,
      .feature-article {
        grid-template-columns: 1fr;
        gap: var(--s-7);
      }

      .insights-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer__top {
        grid-template-columns: 1fr 1fr;
      }

      .case-row {
        grid-template-columns: 1fr;
        gap: var(--s-4);
      }

      .case-row__outcome {
        border-left: 0;
        border-top: 1px solid var(--gold);
        padding-left: 0;
        padding-top: var(--s-4);
      }
    }

    @media (max-width: 720px) {
      :root {
        --t-hero: 44px;
        --t-h1: 38px;
        --t-h2: 30px;
      }

      .nav__menu {
        display: none;
      }

      .nav__burger {
        display: block;
      }

      .nav__menu.is-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--cream);
        border-bottom: 1px solid var(--line);
        padding: var(--s-6);
        gap: var(--s-4);
      }

      .service-grid,
      .insights-grid,
      .press-grid,
      .how-we-work {
        grid-template-columns: 1fr;
      }

      .press-item:nth-child(odd) {
        border-right: 0;
      }

      .footer__top {
        grid-template-columns: 1fr;
      }

      .footer__bottom {
        flex-direction: column;
        gap: var(--s-3);
        text-align: center;
      }

      .cred-row {
        grid-template-columns: 1fr;
      }

      .container {
        padding: 0 var(--s-5);
      }
    }


    /* ============ ADMIN PANEL STYLES ============ */
    /* ==========================================================================
   THE COUNSELOR GROUP — ADMIN
   Backstage of the marketing site. Same palette, denser UI, work-mode.
   ========================================================================== */

    :root {
      /* palette inherited */
      --ink: #0E1B2C;
      --ink-2: #14233A;
      --ink-3: #1B2F4A;
      --gold: #B89968;
      --gold-2: #C9AC7D;
      --gold-3: #8B7048;
      --cream: #FAF6F0;
      --cream-2: #F1ECE3;
      --paper: #FFFFFF;
      --line: rgba(14, 27, 44, 0.10);
      --line-2: rgba(14, 27, 44, 0.18);
      --line-gold: rgba(184, 153, 104, 0.35);
      --mute: #5C6779;
      --mute-2: #8A93A1;
      --hover: rgba(184, 153, 104, 0.10);

      --ok: #2E7D5B;
      --warn: #B47A2A;
      --error: #B23A48;

      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-body: 'Inter', -apple-system, sans-serif;

      --sidebar: 248px;
      --topbar: 64px;
      --inspector: 360px;

      --r: 4px;
      --r-lg: 8px;

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

    /* reset */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 1.5;
      color: var(--ink);
      background: var(--cream);
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font: inherit;
      cursor: pointer;
      border: 0;
      background: none;
      color: inherit;
    }

    input,
    textarea,
    select {
      font: inherit;
      color: inherit;
    }

    /* ===== app layout ===== */
    .app {
      display: grid;
      grid-template-columns: var(--sidebar) 1fr;
      min-height: 100vh;
    }

    /* ===== sidebar ===== */
    .sb {
      background: var(--ink);
      color: var(--cream);
      padding: 18px 0 24px;
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .sb__logo {
      padding: 0 20px 18px;
      border-bottom: 1px solid rgba(250, 246, 240, .08);
      margin-bottom: 14px;
    }

    .sb__logo img {
      height: 56px;
      width: auto;
    }

    .sb__group-label {
      font-family: var(--font-body);
      font-size: 10.5px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(250, 246, 240, .4);
      padding: 18px 20px 8px;
    }

    .sb__nav {
      padding: 0 8px;
      flex: 1;
      overflow-y: auto;
    }

    .sb__nav a {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 12px;
      margin-bottom: 1px;
      color: rgba(250, 246, 240, .78);
      font-size: 14px;
      border-radius: var(--r);
      border-left: 2px solid transparent;
      transition: background .2s var(--ease), color .2s var(--ease);
    }

    .sb__nav a:hover {
      background: rgba(250, 246, 240, .06);
      color: var(--cream);
    }

    .sb__nav a.is-active {
      background: rgba(184, 153, 104, .12);
      color: var(--cream);
      border-left-color: var(--gold);
    }

    .sb__nav svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      opacity: .85;
    }

    .sb__nav a.is-active svg {
      opacity: 1;
      color: var(--gold);
    }

    .sb__nav .badge {
      margin-left: auto;
      font-size: 11px;
      background: var(--gold);
      color: var(--ink);
      padding: 1px 7px;
      border-radius: 999px;
      font-weight: 600;
    }

    .sb__user {
      border-top: 1px solid rgba(250, 246, 240, .08);
      padding: 14px 20px 4px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .sb__avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--gold);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 13px;
      flex-shrink: 0;
    }

    .sb__user-meta {
      line-height: 1.25;
    }

    .sb__user-meta strong {
      display: block;
      font-weight: 500;
      color: var(--cream);
    }

    .sb__user-meta span {
      font-size: 12px;
      color: rgba(250, 246, 240, .5);
    }

    /* ===== main + topbar ===== */
    .main {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .tb {
      height: var(--topbar);
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      padding: 0 24px;
      gap: 18px;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .tb__crumbs {
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--mute);
    }

    .tb__crumbs strong {
      color: var(--ink);
      font-weight: 500;
    }

    .tb__crumbs .sep {
      color: var(--line-2);
      margin: 0 8px;
    }

    .tb__title {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 500;
      margin: 0;
      letter-spacing: -0.005em;
    }

    .tb__spacer {
      flex: 1;
    }

    .tb__actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tb__lang {
      display: inline-flex;
      border: 1px solid var(--line);
      border-radius: var(--r);
      overflow: hidden;
      font-size: 12px;
      font-weight: 500;
    }

    .tb__lang button {
      padding: 6px 10px;
      letter-spacing: .12em;
      color: var(--mute);
    }

    .tb__lang button.is-active {
      background: var(--ink);
      color: var(--cream);
    }

    .tb__status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--mute);
      margin-right: 6px;
    }

    .tb__status .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--warn);
    }

    .tb__status.is-published .dot {
      background: var(--ok);
    }

    /* ===== content area ===== */
    .content {
      padding: 28px 28px 64px;
      flex: 1;
      min-width: 0;
    }

    .content--with-inspector {
      display: grid;
      grid-template-columns: 1fr var(--inspector);
      gap: 24px;
    }

    /* ===== cards / panels ===== */
    .card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
    }

    .card__head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--line);
    }

    .card__title {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 500;
      margin: 0;
    }

    .card__sub {
      font-size: 13px;
      color: var(--mute);
      margin: 2px 0 0;
    }

    .card__body {
      padding: 20px;
    }

    .card__foot {
      padding: 14px 20px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    /* ===== buttons ===== */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 500;
      border-radius: var(--r);
      border: 1px solid transparent;
      transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
      white-space: nowrap;
    }

    .btn svg {
      width: 14px;
      height: 14px;
    }

    .btn--primary {
      background: var(--ink);
      color: var(--cream);
    }

    .btn--primary:hover {
      background: var(--ink-3);
    }

    .btn--ghost {
      color: var(--ink);
      border-color: var(--line);
      background: var(--paper);
    }

    .btn--ghost:hover {
      background: var(--cream-2);
    }

    .btn--gold {
      background: var(--gold);
      color: var(--ink);
    }

    .btn--gold:hover {
      background: var(--gold-2);
    }

    .btn--danger {
      color: var(--error);
      border-color: var(--line);
      background: var(--paper);
    }

    .btn--danger:hover {
      background: rgba(178, 58, 72, .06);
      border-color: rgba(178, 58, 72, .3);
    }

    .btn--sm {
      padding: 5px 10px;
      font-size: 12px;
    }

    .btn--icon {
      padding: 7px;
    }

    /* ===== forms ===== */
    .field {
      display: grid;
      gap: 6px;
      margin-bottom: 14px;
    }

    .field label {
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--mute);
      font-weight: 500;
    }

    .field .hint {
      font-size: 12px;
      color: var(--mute-2);
      margin-top: 2px;
    }

    .field input[type="text"],
    .field input[type="email"],
    .field input[type="url"],
    .field input[type="number"],
    .field input[type="password"],
    .field textarea,
    .field select {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 9px 12px;
      font-size: 14px;
      color: var(--ink);
      outline: 0;
      transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
      width: 100%;
    }

    .field input:focus,
    .field textarea:focus,
    .field select:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(184, 153, 104, .12);
    }

    .field textarea {
      resize: vertical;
      min-height: 80px;
      font-family: var(--font-body);
    }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .toggle {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none;
    }

    .toggle input {
      display: none;
    }

    .toggle .track {
      width: 32px;
      height: 18px;
      background: var(--line-2);
      border-radius: 999px;
      position: relative;
      transition: background .2s var(--ease);
    }

    .toggle .track::before {
      content: "";
      position: absolute;
      left: 2px;
      top: 2px;
      width: 14px;
      height: 14px;
      background: var(--paper);
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
      transition: transform .2s var(--ease);
    }

    .toggle input:checked+.track {
      background: var(--gold);
    }

    .toggle input:checked+.track::before {
      transform: translateX(14px);
    }

    .toggle .label {
      font-size: 13px;
      color: var(--ink);
    }

    /* ===== chips & badges ===== */
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 999px;
      font-weight: 500;
    }

    .chip--gold {
      background: rgba(184, 153, 104, .14);
      color: var(--gold-3);
    }

    .chip--ink {
      background: rgba(14, 27, 44, .06);
      color: var(--ink);
    }

    .chip--ok {
      background: rgba(46, 125, 91, .10);
      color: var(--ok);
    }

    .chip--warn {
      background: rgba(180, 122, 42, .10);
      color: var(--warn);
    }

    .chip--mute {
      background: rgba(92, 103, 121, .10);
      color: var(--mute);
    }

    /* ===== tables ===== */
    .tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }

    .tbl th {
      text-align: left;
      font-weight: 500;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--mute);
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
    }

    .tbl td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
    }

    .tbl tr:hover td {
      background: var(--cream-2);
    }

    .tbl .row-actions {
      display: inline-flex;
      gap: 4px;
      opacity: 0;
      transition: opacity .18s;
    }

    .tbl tr:hover .row-actions {
      opacity: 1;
    }

    /* ===== KPI grid ===== */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 28px;
    }

    .kpi {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: 18px 20px;
    }

    .kpi__label {
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--mute);
    }

    .kpi__value {
      font-family: var(--font-display);
      font-size: 36px;
      font-weight: 500;
      color: var(--ink);
      line-height: 1.1;
      margin-top: 8px;
    }

    .kpi__delta {
      font-size: 12px;
      color: var(--mute);
      margin-top: 4px;
    }

    .kpi__delta.is-up {
      color: var(--ok);
    }

    .kpi__delta.is-down {
      color: var(--error);
    }

    /* ===== page editor ===== */
    .pe-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: 12px 16px;
      margin-bottom: 16px;
    }

    .pe-toolbar .left {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pe-canvas {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: 14px;
      min-height: 60vh;
    }

    .block {
      background: var(--cream);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      margin-bottom: 12px;
      overflow: hidden;
      transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
    }

    .block:hover {
      border-color: var(--gold);
      box-shadow: 0 4px 16px rgba(14, 27, 44, .04);
    }

    .block.is-selected {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(184, 153, 104, .16);
    }

    .block.is-hidden {
      opacity: .55;
      background: repeating-linear-gradient(45deg, var(--cream), var(--cream) 8px, var(--cream-2) 8px, var(--cream-2) 16px);
    }

    .block__head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      cursor: grab;
    }

    .block__handle {
      color: var(--mute-2);
      font-size: 18px;
      line-height: 1;
      cursor: grab;
    }

    .block__type {
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 500;
    }

    .block__title {
      font-size: 13px;
      color: var(--ink);
      font-weight: 500;
    }

    .block__meta {
      font-size: 12px;
      color: var(--mute);
      margin-left: auto;
    }

    .block__actions {
      display: flex;
      gap: 4px;
    }

    .block__actions button {
      padding: 5px;
      color: var(--mute);
      border-radius: var(--r);
      transition: background .18s, color .18s;
    }

    .block__actions button:hover {
      background: var(--cream-2);
      color: var(--ink);
    }

    .block__actions button.danger:hover {
      color: var(--error);
    }

    .block__body {
      padding: 14px 16px;
      font-size: 13px;
      color: var(--mute);
      line-height: 1.5;
    }

    .block__body strong {
      color: var(--ink);
      font-weight: 500;
    }

    .block__preview {
      font-family: var(--font-display);
      font-size: 17px;
      color: var(--ink);
      font-weight: 500;
      margin-bottom: 4px;
    }

    .add-block {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 10px;
      background: transparent;
      border: 1px dashed var(--line-2);
      border-radius: var(--r-lg);
      color: var(--mute);
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 500;
      margin: 6px 0 12px;
      transition: background .18s, border-color .18s, color .18s;
    }

    .add-block:hover {
      background: var(--cream-2);
      border-color: var(--gold);
      color: var(--gold-3);
    }

    .add-block svg {
      width: 14px;
      height: 14px;
    }

    /* inspector */
    .inspector {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      align-self: start;
      position: sticky;
      top: calc(var(--topbar) + 28px);
    }

    .inspector__head {
      padding: 14px 18px;
      border-bottom: 1px solid var(--line);
    }

    .inspector__title {
      font-size: 14px;
      font-weight: 500;
      margin: 0;
    }

    .inspector__sub {
      font-size: 11px;
      color: var(--mute);
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-top: 2px;
    }

    .inspector__body {
      padding: 16px 18px;
      max-height: calc(100vh - var(--topbar) - 200px);
      overflow-y: auto;
    }

    .inspector__sect {
      border-top: 1px solid var(--line);
      margin-top: 16px;
      padding-top: 16px;
    }

    .inspector__sect:first-of-type {
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }

    .inspector__sect-title {
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 500;
      margin-bottom: 10px;
    }

    /* ===== modal ===== */
    .modal {
      position: fixed;
      inset: 0;
      background: rgba(14, 27, 44, 0.6);
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .modal.is-open {
      display: flex;
    }

    .modal__panel {
      background: var(--paper);
      border-radius: var(--r-lg);
      width: 100%;
      max-width: 880px;
      max-height: 86vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .modal__head {
      padding: 18px 22px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
    }

    .modal__title {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      margin: 0;
    }

    .modal__close {
      margin-left: auto;
      padding: 6px;
      color: var(--mute);
      border-radius: var(--r);
    }

    .modal__close:hover {
      background: var(--cream-2);
      color: var(--ink);
    }

    .modal__body {
      padding: 22px;
      overflow-y: auto;
    }

    .modal__foot {
      padding: 14px 22px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    /* block library grid */
    .bl-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .bl-tile {
      background: var(--cream);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: 16px;
      cursor: pointer;
      transition: background .18s, border-color .18s, transform .18s;
      text-align: left;
    }

    .bl-tile:hover {
      background: var(--paper);
      border-color: var(--gold);
      transform: translateY(-1px);
    }

    .bl-tile__icon {
      width: 36px;
      height: 36px;
      background: rgba(184, 153, 104, .14);
      color: var(--gold);
      border-radius: var(--r);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }

    .bl-tile__icon svg {
      width: 18px;
      height: 18px;
    }

    .bl-tile__title {
      font-size: 14px;
      font-weight: 500;
      color: var(--ink);
    }

    .bl-tile__desc {
      font-size: 12px;
      color: var(--mute);
      margin-top: 2px;
      line-height: 1.4;
    }

    /* ===== media library ===== */
    .media-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 14px;
    }

    .media-item {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--r);
      overflow: hidden;
      cursor: pointer;
      transition: border-color .18s, transform .18s;
    }

    .media-item:hover {
      border-color: var(--gold);
      transform: translateY(-1px);
    }

    .media-item__thumb {
      aspect-ratio: 4/3;
      background: var(--cream-2);
      position: relative;
      overflow: hidden;
    }

    .media-item__thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .media-item__thumb .type {
      position: absolute;
      top: 8px;
      left: 8px;
      background: rgba(14, 27, 44, .85);
      color: var(--cream);
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 999px;
    }

    .media-item__meta {
      padding: 8px 10px;
    }

    .media-item__name {
      font-size: 12px;
      color: var(--ink);
      font-weight: 500;
    }

    .media-item__sub {
      font-size: 11px;
      color: var(--mute-2);
      margin-top: 2px;
    }

    /* ===== inbox ===== */
    .inbox-row {
      display: grid;
      grid-template-columns: 36px 1fr auto;
      gap: 14px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      cursor: pointer;
      transition: background .18s;
    }

    .inbox-row:hover {
      background: var(--cream-2);
    }

    .inbox-row.is-unread {
      background: rgba(184, 153, 104, .04);
    }

    .inbox-row.is-unread .inbox-from {
      font-weight: 600;
    }

    .inbox-from {
      font-size: 14px;
      color: var(--ink);
    }

    .inbox-subject {
      font-size: 13px;
      color: var(--ink);
      margin-top: 2px;
    }

    .inbox-preview {
      font-size: 12px;
      color: var(--mute);
      margin-top: 2px;
    }

    .inbox-time {
      font-size: 12px;
      color: var(--mute-2);
      white-space: nowrap;
    }

    .inbox-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--cream-2);
      color: var(--gold-3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 13px;
    }

    /* ===== translations editor ===== */
    .tr-row {
      display: grid;
      grid-template-columns: 200px 1fr 1fr;
      gap: 14px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
      align-items: start;
    }

    .tr-key {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px;
      color: var(--mute);
      padding-top: 6px;
    }

    .tr-row textarea {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 8px 10px;
      font-size: 13px;
      font-family: var(--font-body);
      resize: vertical;
      min-height: 38px;
    }

    .tr-row textarea:focus {
      border-color: var(--gold);
      outline: 0;
      box-shadow: 0 0 0 3px rgba(184, 153, 104, .12);
    }

    /* ===== login ===== */
    .login {
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: var(--cream);
      position: relative;
      overflow: hidden;
    }

    .login::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 70% 30%, rgba(184, 153, 104, .18) 0%, transparent 60%);
      pointer-events: none;
    }

    .login__panel {
      width: 100%;
      max-width: 420px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: 36px 36px 28px;
      position: relative;
      z-index: 1;
    }

    .login__logo {
      text-align: center;
      margin-bottom: 20px;
    }

    .login__logo img {
      height: 88px;
    }

    .login__title {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      text-align: center;
      margin: 0 0 4px;
    }

    .login__sub {
      text-align: center;
      font-size: 13px;
      color: var(--mute);
      margin-bottom: 24px;
    }

    .login__divider {
      width: 32px;
      height: 1px;
      background: var(--gold);
      margin: 18px auto;
    }

    /* ===== utility ===== */
    .row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .row-between {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .muted {
      color: var(--mute);
    }

    .gold {
      color: var(--gold);
    }

    .center {
      text-align: center;
    }

    .mt-2 {
      margin-top: 8px;
    }

    .mt-4 {
      margin-top: 16px;
    }

    .mt-6 {
      margin-top: 24px;
    }

    .mb-2 {
      margin-bottom: 8px;
    }

    .mb-4 {
      margin-bottom: 16px;
    }

    .mb-6 {
      margin-bottom: 24px;
    }

    .divider-h {
      height: 1px;
      background: var(--line);
      border: 0;
      margin: 16px 0;
    }

    .empty {
      text-align: center;
      padding: 48px 20px;
      color: var(--mute);
    }

    .empty .empty__icon {
      width: 56px;
      height: 56px;
      background: var(--cream-2);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--gold);
      margin-bottom: 14px;
    }

    /* responsive — collapse sidebar to icon-only on narrow */
    @media (max-width: 1100px) {
      :root {
        --sidebar: 64px;
      }

      .sb__logo img {
        height: 30px;
      }

      .sb__group-label,
      .sb__nav a span:not(.badge),
      .sb__user-meta {
        display: none;
      }

      .sb__user {
        justify-content: center;
        padding: 14px 6px 4px;
      }

      .sb__nav a {
        justify-content: center;
        padding: 10px;
      }
    }

    @media (max-width: 900px) {
      .content--with-inspector {
        grid-template-columns: 1fr;
      }

      .inspector {
        position: static;
      }

      .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .field-row {
        grid-template-columns: 1fr;
      }

      .bl-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .tr-row {
        grid-template-columns: 1fr;
      }
    }


    /* ============ LAUNCHER (top global switcher) ============ */
    .launcher {
      position: fixed;
      bottom: 16px;
      right: 16px;
      z-index: 9999;
      background: var(--ink);
      color: var(--cream);
      padding: 8px;
      border-radius: 999px;
      box-shadow: 0 8px 32px rgba(14, 27, 44, 0.25);
      display: flex;
      gap: 4px;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
    }

    .launcher button {
      padding: 8px 16px;
      border-radius: 999px;
      color: rgba(250, 246, 240, 0.7);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 500;
      font-size: 11px;
      transition: background .2s, color .2s;
    }

    .launcher button:hover {
      color: var(--cream);
    }

    .launcher button.is-active {
      background: var(--gold);
      color: var(--ink);
    }

    .launcher__page {
      position: fixed;
      bottom: 70px;
      right: 16px;
      z-index: 9999;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 12px 36px rgba(14, 27, 44, 0.2);
      padding: 14px;
      display: none;
      width: 240px;
      max-height: 60vh;
      overflow-y: auto;
      font-family: 'Inter', sans-serif;
    }

    .launcher__page.is-open {
      display: block;
    }

    .launcher__page h5 {
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--mute);
      font-weight: 500;
      margin: 0 0 6px;
      padding: 4px 8px;
    }

    .launcher__page a {
      display: block;
      padding: 7px 10px;
      border-radius: 4px;
      font-size: 13px;
      color: var(--ink);
      text-decoration: none;
      transition: background .15s;
    }

    .launcher__page a:hover {
      background: var(--cream-2);
    }

    .launcher__page a.is-active {
      background: rgba(184, 153, 104, 0.14);
      color: var(--gold-3);
      font-weight: 500;
    }

    @media print {

      .launcher,
      .launcher__page {
        display: none !important;
      }
    }
  

/* ============================================================
   V2 PREMIUM POLISH + 480px MOBILE FIRST + UX TWEAKS
   Additive — design tokens korunarak.
   ============================================================ */

/* Smooth scroll + better focus */
html{scroll-behavior:smooth}
*:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* Section card hover lift (cards in listings) */
.article-card,.press-item,.case-row,.feature-article{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.article-card:hover,.press-item:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(14,27,44,.08)}

/* Sticky header on scroll */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,240,.94);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease
}
.site-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 4px 24px rgba(14,27,44,.04)}

/* Buttons: ensure 44px tap target */
.btn,a.btn,button.btn{min-height:44px}
.btn--gold{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%);
  color:var(--ink);border:0;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(184,153,104,.32);filter:brightness(1.05)}
.btn--ghost{
  background:transparent;color:var(--ink);
  border:1.5px solid var(--ink);transition:all .2s ease
}
.btn--ghost:hover{background:var(--ink);color:var(--cream)}

/* Lang switch tap targets */
.lang-switch a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* ---------- TABLET 1024px ---------- */
@media (max-width:1024px){
  .container{padding-left:24px;padding-right:24px}
  .page-header{padding:48px 0 28px}
  .page-header__media{margin-top:24px;max-height:280px;border-radius:14px;overflow:hidden}
  .insights-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}
  .press-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}
  .feature-article{grid-template-columns:1fr!important;gap:24px!important}
  .case-row{grid-template-columns:1fr!important;gap:14px!important;padding:24px 0!important}
}

/* ---------- MOBILE 768px ---------- */
@media (max-width:768px){
  .container{padding-left:18px;padding-right:18px}
  .nav__menu a{font-size:15px;padding:14px 16px;min-height:44px;display:flex;align-items:center}
  .hero__title,.hero h1{font-size:clamp(34px,7vw,52px)!important;line-height:1.05!important}
  .hero__lead,.lead{font-size:16px!important;line-height:1.5!important}
  .insights-grid{grid-template-columns:1fr!important;gap:18px!important}
  .press-grid{grid-template-columns:1fr!important;gap:18px!important}
  .section{padding:40px 0!important}
  .cta-bar{padding:36px 0!important;text-align:center}
  .cta-bar h3{font-size:20px!important;letter-spacing:.12em!important;margin-bottom:18px}
  .cta-bar .container{flex-direction:column;gap:16px}
  .page-header h1,.heading-line{font-size:clamp(28px,6vw,42px)!important}
  .feature-article__media{aspect-ratio:16/10!important;height:auto!important}
  .article-card__media{aspect-ratio:16/10!important;height:auto!important}
  .footer{padding:32px 18px!important;text-align:left}
  .footer .container{flex-direction:column;gap:24px}
}

/* ---------- iPhone SE 375px ---------- */
@media (max-width:480px){
  .container{padding-left:16px;padding-right:16px}
  .nav{flex-wrap:nowrap;gap:8px;padding-top:10px!important;padding-bottom:10px!important}
  .nav__logo img{max-width:160px;height:auto}
  .nav__right{gap:4px}
  .nav__burger{min-width:44px;min-height:44px}

  /* Hero & section sizing */
  .hero,.page-header{padding:32px 0 24px!important}
  .hero__title,.hero h1{font-size:30px!important}
  .hero__lead,.lead{font-size:15px!important}
  .heading-line,h2{font-size:24px!important}
  h3{font-size:20px!important}
  body{font-size:16px}

  /* Press / insights / engagements lists */
  .insights-grid,.press-grid{gap:14px!important}
  .article-card h3,.press-item h4{font-size:18px!important;margin-top:10px!important}

  /* Case rows */
  .case-row{padding:18px 0!important;gap:10px!important}
  .case-row h3{font-size:18px!important;margin:6px 0 8px}
  .case-row__sector{display:flex;flex-wrap:wrap;gap:6px}
  .case-row .meta{font-size:11px}

  /* Detail pages tweaks */
  .page-header__media{display:none}
  .prose{font-size:15px!important;line-height:1.7!important}

  /* CTA */
  .cta-bar h3{font-size:16px!important;letter-spacing:.1em!important}
  .btn,.btn--gold,.btn--ghost{padding:14px 22px!important;font-size:12px;letter-spacing:.12em;width:auto;display:inline-flex}

  /* Form */
  input,textarea,select{font-size:16px!important;min-height:48px}
  textarea{min-height:120px}

  /* Tables stack on tiny screens (e.g. press date row) */
  .press-item__date{font-size:12px;letter-spacing:.06em}

  /* Footer */
  .footer{font-size:13px!important}
  .footer .container{gap:18px!important}
  .footer-cols{grid-template-columns:1fr!important;gap:20px!important}

  /* Lang switch */
  .lang-switch{gap:2px}
  .lang-switch a{font-size:13px!important;padding:8px 10px}
}

/* Lazy fade-in for images */
img{opacity:1;transition:opacity .3s ease}
img[loading="lazy"]:not(.is-loaded){opacity:0}

/* Prevent text overflow on small screens */
h1,h2,h3,h4,p{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}

/* Better link underlines */
a{text-underline-offset:3px;text-decoration-thickness:1px}