/* index.html */
:root {
      --bg: #050505;
      --panel: #111111;
      --panel-2: #171717;
      --line: rgba(255, 255, 255, .11);
      --line-soft: rgba(255, 255, 255, .07);
      --text: #ffffff;
      --muted: #b9b9b9;
      --blue: #ffd21f;
      --blue-dark: #e7b900;
      --orange: #ffd21f;
      --radius-lg: 40px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-width: 320px;
      background:
        radial-gradient(circle at 18% 8%, rgba(255, 210, 31, .14), transparent 28rem),
        radial-gradient(circle at 88% 22%, rgba(255, 210, 31, .1), transparent 24rem),
        var(--bg);
      color: var(--text);
      font-family: "Golos Text", Arial, sans-serif;
      line-height: 1.55;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

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

    .page {
      overflow: hidden;
    }

    .container {
      width: min(calc(100% - 40px), var(--max));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(5, 5, 5, .86);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line-soft);
    }

    .nav {
      min-height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: .01em;
    }

    .brand-logo {
      width: 56px;
      height: 56px;
      object-fit: contain;
      flex: 0 0 auto;
      filter: drop-shadow(0 0 12px rgba(255, 210, 31, .25));
    }

    .brand-name {
      color: #fff;
      font-size: 15px;
      line-height: 1.05;
      text-transform: uppercase;
    }

    .menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;
      color: rgba(255, 255, 255, .78);
      font-size: 14px;
      font-weight: 600;
    }

    .menu a:hover { color: #fff; }

    .socials {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255, 255, 255, .78);
      font-size: 13px;
      font-weight: 600;
    }

    .socials a {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: rgba(255, 255, 255, .82);
      background: rgba(255, 255, 255, .03);
      transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
    }

    .socials svg {
      width: 16px;
      height: 16px;
      display: block;
      fill: currentColor;
    }

    .socials .client-login {
      width: auto;
      min-width: 118px;
      padding: 0 16px;
      border-radius: 999px;
      color: #050505;
      background: var(--blue);
      border-color: var(--blue);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .socials a:hover { color: var(--orange); }

    .socials a:hover {
      border-color: rgba(255, 210, 31, .58);
      background: rgba(255, 210, 31, .1);
      transform: translateY(-2px);
    }

    .socials .client-login:hover {
      color: #050505;
      background: var(--blue-dark);
      border-color: var(--blue-dark);
    }

    .mobile-dot {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 50%;
      place-items: center;
      color: #fff;
      font-size: 20px;
    }

    .hero {
      min-height: min(780px, calc(100vh - 150px));
      padding: 72px 0 34px;
      position: relative;
      isolation: isolate;
      z-index: 0;
      overflow: hidden;
    }

    .hero-paths {
      --path-color: #fcde0c;
      position: absolute;
      inset: -10% -8% -6%;
      z-index: 2;
      overflow: hidden;
      pointer-events: none;
      opacity: .34;
      contain: layout paint style;
    }

    .hero-paths svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .hero-paths path {
      fill: none;
      stroke: var(--path-color);
      stroke-linecap: round;
      opacity: var(--path-opacity);
      vector-effect: non-scaling-stroke;
      stroke-dasharray: .3 1;
      stroke-dashoffset: var(--path-offset-start);
      animation: hero-path-flow var(--path-duration) linear infinite;
      animation-delay: var(--path-delay);
    }

    .hero-paths .path-flow {
      opacity: var(--path-opacity);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(5, 5, 5, .98) 0%, rgba(5, 5, 5, .94) 44%, rgba(5, 5, 5, .88) 100%),
        radial-gradient(circle at 70% 48%, rgba(255, 210, 31, .16), transparent 36rem);
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto -10% -10% auto;
      width: min(55vw, 780px);
      aspect-ratio: 1;
      z-index: 1;
      background: radial-gradient(circle at center, rgba(255, 210, 31, .46) 0%, rgba(255, 210, 31, .18) 42%, rgba(5, 5, 5, 0) 70%);
      opacity: .54;
      animation: heroRadialDrift 9s ease-in-out infinite;
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(340px, 520px);
      align-items: center;
      gap: 52px;
      position: relative;
      z-index: 3;
    }

    .eyebrow {
      margin: 0 0 20px;
      color: var(--orange);
      font-size: 15px;
      font-weight: 700;
    }

    h1, h2, h3, h4, p { margin-top: 0; }

    h1 {
      max-width: 720px;
      margin-bottom: 25px;
      font-size: clamp(48px, 8vw, 104px);
      line-height: .93;
      letter-spacing: 0;
      font-weight: 800;
    }

    .hero-copy {
      max-width: 585px;
      color: var(--muted);
      font-size: 18px;
      margin-bottom: 34px;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px;
    }

    .btn {
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 24px;
      border-radius: 40px;
      font-size: 15px;
      font-weight: 700;
      border: 1px solid transparent;
      white-space: nowrap;
      transition: transform .24s ease, background-color .24s ease, border-color .24s ease, box-shadow .24s ease;
    }

    .btn-primary {
      background: var(--blue);
      color: #050505;
      box-shadow: 0 14px 36px rgba(255, 210, 31, .22);
    }

    .btn-primary:hover { background: var(--blue-dark); }

    .btn:hover {
      transform: translateY(-3px);
    }

    .hero-media {
      position: relative;
    }

    .hero-media::before {
      content: "";
      position: absolute;
      width: 145px;
      height: 145px;
      right: -26px;
      bottom: 30px;
      border-radius: 36px;
      background: var(--orange);
      z-index: 0;
      animation: accentFloat 6s ease-in-out infinite;
    }

    .hero-gradient-spacer {
      position: absolute;
      width: min(56vw, 750px);
      aspect-ratio: 1;
      right: -54px;
      bottom: -72px;
      z-index: 0;
      border-radius: 50%;
      background: radial-gradient(circle at center, rgba(255, 210, 31, .68) 0%, rgba(255, 210, 31, .2) 52%, rgba(5, 5, 5, 0) 72%);
      opacity: .42;
      filter: blur(2px);
      animation: gradientBreath 8s ease-in-out infinite;
    }

    .hero-media img {
      position: relative;
      z-index: 1;
      width: 100%;
      max-height: 660px;
      object-fit: contain;
      border-radius: var(--radius-lg);
      animation: heroFloat 7s ease-in-out infinite;
    }

    .section {
      padding: 86px 0;
    }

    .section-head {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: end;
      gap: 42px;
      margin-bottom: 46px;
    }

    .section h2 {
      margin-bottom: 0;
      font-size: clamp(34px, 5vw, 62px);
      line-height: 1.02;
      letter-spacing: 0;
      font-weight: 800;
    }

    .section-copy {
      color: var(--muted);
      margin-bottom: 0;
    }

    .home-about-intro {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
      gap: 64px;
      align-items: start;
      margin-bottom: 44px;
    }

    .home-about-copy h2 {
      max-width: 740px;
      font-size: clamp(38px, 5vw, 64px);
    }

    .home-about-copy > p {
      margin: 26px 0 0;
      max-width: 710px;
      color: var(--muted);
      font-size: 17px;
    }

    .home-belief-stack {
      display: grid;
      gap: 26px;
      padding-top: 34px;
    }

    .home-belief-card {
      padding-bottom: 26px;
      border-bottom: 1px solid var(--line);
    }

    .home-belief-card:first-child {
      padding-top: 26px;
      border-top: 1px solid var(--line);
    }

    .home-belief-card h3 {
      margin-bottom: 12px;
      font-size: 22px;
      line-height: 1.15;
    }

    .home-belief-card p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .home-values-teaser {
      display: grid;
      grid-template-columns: minmax(280px, .8fr) minmax(0, 1fr);
      gap: 42px;
      align-items: center;
      padding: 42px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background:
        linear-gradient(135deg, rgba(252, 222, 12, .08), transparent 40%),
        var(--panel-2);
    }

    .home-values-teaser h3 {
      margin-bottom: 14px;
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1;
    }

    .home-values-teaser p {
      margin-bottom: 0;
      color: var(--muted);
    }

    .home-values-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 28px;
    }

    .home-values-list span {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 56px;
      border-bottom: 1px solid var(--line);
      font-weight: 800;
    }

    .home-values-list span::before {
      content: "";
      width: 9px;
      height: 9px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--accent);
    }

    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .portfolio-card {
      position: relative;
      min-height: 420px;
      overflow: hidden;
      border-radius: var(--radius-md);
      background: var(--panel);
      transition: transform .28s ease, box-shadow .28s ease;
    }

    .portfolio-card img {
      width: 100%;
      height: 100%;
      min-height: 420px;
      object-fit: cover;
      transition: transform .45s ease;
    }

    .portfolio-card:hover img { transform: scale(1.05); }

    .portfolio-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 26px 54px rgba(0, 0, 0, .3);
    }

    .portfolio-card span {
      position: absolute;
      left: 22px;
      bottom: 22px;
      right: 22px;
      padding: 16px 18px;
      background: rgba(5, 5, 5, .78);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      font-weight: 700;
      backdrop-filter: blur(14px);
    }

    .services {
      background: #080808;
      border-top: 1px solid var(--line-soft);
      border-bottom: 1px solid var(--line-soft);
    }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .service-card {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      border-radius: var(--radius-md);
      background: var(--panel);
      border: 1px solid var(--line-soft);
      transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
    }

    .service-card:hover {
      transform: translateY(-8px);
      border-color: rgba(255, 210, 31, .52);
      box-shadow: 0 22px 46px rgba(0, 0, 0, .28);
    }

    .service-card img {
      width: 100%;
      aspect-ratio: 1 / .84;
      object-fit: cover;
    }

    .service-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 24px;
    }

    .service-body h3 {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .service-body p {
      color: var(--muted);
      margin-bottom: 22px;
      font-size: 15px;
    }

    .link-more {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      font-weight: 700;
      font-size: 14px;
    }

    .link-more::after {
      content: "->";
      color: var(--orange);
    }

    .contact {
      padding-bottom: 0;
    }

    .contact-panel {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, 480px);
      gap: 48px;
      align-items: center;
      padding: 58px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--blue);
      color: #050505;
    }

    .contact-panel h2 {
      color: #050505;
      max-width: 620px;
    }

    .contact-panel p {
      max-width: 560px;
      color: rgba(5, 5, 5, .74);
      font-size: 17px;
      margin-bottom: 28px;
    }

    .contact-panel .btn {
      background: #050505;
      color: #ffd21f;
    }

    .contact-panel img {
      width: 100%;
      aspect-ratio: 1.05;
      object-fit: cover;
      border-radius: 28px;
    }

    .site-footer {
      padding: 70px 0 28px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(150px, .7fr));
      gap: 42px;
      padding-bottom: 50px;
      border-bottom: 1px solid var(--line);
    }

    .footer-brand h2 {
      max-width: 280px;
      margin: 18px 0 0;
      font-size: 40px;
      line-height: 1;
    }

    .footer-col h3 {
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .footer-col a,
    .footer-col p {
      display: block;
      margin: 0 0 11px;
      color: #fff;
      font-weight: 600;
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-top: 24px;
      color: var(--muted);
      font-size: 14px;
    }

    .js [data-animate] {
      opacity: 0;
      transform: translate3d(0, 26px, 0);
      transition:
        opacity .75s cubic-bezier(.22, 1, .36, 1),
        transform .75s cubic-bezier(.22, 1, .36, 1);
      transition-delay: var(--delay, 0ms);
      will-change: opacity, transform;
    }

    .js [data-animate="fade"] {
      transform: none;
    }

    .js [data-animate="down"] {
      transform: translate3d(0, -22px, 0);
    }

    .js [data-animate="left"] {
      transform: translate3d(-28px, 0, 0);
    }

    .js [data-animate="right"] {
      transform: translate3d(28px, 0, 0);
    }

    .js [data-animate].is-visible {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    @keyframes heroFloat {
      0%, 100% { transform: translate3d(0, 0, 0); }
      50% { transform: translate3d(0, -14px, 0); }
    }

    @keyframes heroRadialDrift {
      0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
      50% { transform: translate3d(-24px, -20px, 0) scale(1.06); }
    }

    @keyframes hero-path-flow {
      0% {
        stroke-dasharray: .3 1;
        stroke-dashoffset: var(--path-offset-start);
      }
      50% {
        stroke-dashoffset: var(--path-offset-end);
      }
      100% {
        stroke-dasharray: .3 1;
        stroke-dashoffset: var(--path-offset-end);
      }
    }

    @keyframes gradientBreath {
      0%, 100% { transform: scale(.96); opacity: .34; }
      50% { transform: scale(1.06); opacity: .5; }
    }

    @keyframes accentFloat {
      0%, 100% { transform: translate3d(0, 0, 0); }
      50% { transform: translate3d(0, -12px, 0); }
    }

    @keyframes markPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 31, .34); }
      50% { box-shadow: 0 0 0 8px rgba(255, 210, 31, 0); }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }

      .js [data-animate] {
        opacity: 1;
        transform: none;
      }

      .hero-paths path {
        animation: none !important;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        opacity: .42;
      }
    }

    @media (max-width: 1023px) {
      .menu,
      .site-header .socials { display: none; }

      .mobile-dot { display: grid; }

      .hero {
        min-height: auto;
        padding-top: 66px;
      }

      .hero-paths {
        inset: -8% -56% -4% -48%;
        opacity: .5;
      }

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

      .hero-media {
        max-width: 560px;
      }

      .section-head,
      .home-about-intro,
      .home-values-teaser,
      .contact-panel {
        grid-template-columns: 1fr;
      }

      .home-belief-stack {
        padding-top: 0;
      }

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

      .review-portrait {
        max-width: 260px;
      }

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

    @media (max-width: 640px) {
      .container {
        width: min(calc(100% - 28px), var(--max));
      }

      .nav { min-height: 72px; }

      h1 {
        font-size: clamp(46px, 15vw, 72px);
      }

      .hero-copy,
      .section-copy,
      .contact-panel p {
        font-size: 16px;
      }

      .hero-media::before {
        width: 98px;
        height: 98px;
        right: -14px;
      }

      .brand-logo {
        width: 48px;
        height: 48px;
      }

      .brand-name {
        font-size: 13px;
      }

      .hero-gradient-spacer {
        width: 116vw;
        right: -42vw;
        bottom: -28px;
      }

      .section {
        padding: 62px 0;
      }

      .home-about-copy > p,
      .home-values-teaser p {
        font-size: 15px;
      }

      .home-about-intro {
        gap: 32px;
        margin-bottom: 36px;
      }

      .home-about-copy h2,
      .home-values-teaser h3 {
        font-size: clamp(34px, 11vw, 46px);
      }

      .home-values-teaser {
        padding: 28px;
        border-radius: 24px;
      }

      .home-values-list {
        grid-template-columns: 1fr;
      }

      .home-values-list span {
        min-height: 52px;
      }

      .portfolio-grid,
      .service-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .portfolio-card,
      .portfolio-card img {
        min-height: 330px;
      }

      .contact-panel {
        padding: 28px;
        border-radius: 28px;
      }

      .footer-bottom {
        flex-direction: column;
      }
    }

/* pages/about.html */
:root {
      --bg: #050505;
      --page: #070911;
      --panel: #10151f;
      --panel-2: #0d1119;
      --line: rgba(255, 255, 255, .11);
      --line-soft: rgba(255, 255, 255, .07);
      --text: #ffffff;
      --muted: #b9b9b9;
      --accent: #fcde0c;
      --accent-dark: #d7ba00;
      --radius-md: 16px;
      --max: 1240px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-width: 320px;
      background: var(--page);
      color: var(--text);
      font-family: "Golos Text", Arial, sans-serif;
      line-height: 1.55;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

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

    .page { overflow: hidden; }

    .container {
      width: min(calc(100% - 40px), var(--max));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(5, 5, 5, .86);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line-soft);
    }

    .nav {
      min-height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .brand-logo {
      width: 56px;
      height: 56px;
      object-fit: contain;
      flex: 0 0 auto;
      filter: drop-shadow(0 0 12px rgba(252, 222, 12, .25));
    }

    .brand-name {
      color: #fff;
      font-size: 14px;
      white-space: nowrap;
    }

    .menu,
    .socials {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .menu a {
      color: #e8e8e8;
      font-size: 14px;
      font-weight: 600;
    }

    .menu a[aria-current="page"],
    .menu a:hover { color: var(--accent); }

    .socials { gap: 13px; }

    .socials a:not(.client-login) {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: #fff;
    }

    .socials svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
    }

    .client-login {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 18px;
      border-radius: 999px;
      background: var(--accent);
      color: #050505;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }

    .mobile-dot {
      display: none;
      width: 40px;
      height: 40px;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--accent);
      font-size: 26px;
      line-height: 1;
    }

    .page-hero {
      position: relative;
      min-height: 520px;
      display: grid;
      align-items: center;
      padding: 88px 0;
      background:
        linear-gradient(90deg, rgba(5, 5, 5, .92), rgba(5, 5, 5, .72)),
        radial-gradient(circle at 82% 20%, rgba(210, 167, 0, .26), transparent 34%),
        var(--page);
      isolation: isolate;
    }

    .page-hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 42%;
      background: linear-gradient(180deg, transparent, var(--page));
      z-index: -1;
    }

    .hero-copy {
      width: min(760px, 100%);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      color: var(--accent);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .eyebrow::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 18px rgba(252, 222, 12, .55);
    }

    .page-hero h1,
    .intro-copy h2,
    .values-copy h2,
    .contact-strip h2,
    .footer-brand h2 {
      margin: 0;
      font-weight: 800;
      line-height: .98;
      letter-spacing: 0;
    }

    .page-hero h1 {
      font-size: clamp(72px, 12vw, 150px);
    }

    .page-hero p {
      max-width: 660px;
      margin: 24px 0 0;
      color: #dfdfdf;
      font-size: clamp(17px, 2vw, 22px);
    }

    .about-main {
      padding: 112px 0 120px;
      background: var(--page);
    }

    .intro-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 70px;
      align-items: start;
      margin-bottom: 78px;
    }

    .intro-copy h2 {
      max-width: 740px;
      font-size: clamp(38px, 5.8vw, 72px);
    }

    .intro-copy > p {
      margin: 30px 0 0;
      max-width: 720px;
      color: var(--muted);
      font-size: 17px;
    }

    .belief-stack {
      display: grid;
      gap: 28px;
      padding-top: 42px;
    }

    .belief-card {
      padding-bottom: 28px;
      border-bottom: 1px solid var(--line);
    }

    .belief-card:first-child {
      border-top: 1px solid var(--line);
      padding-top: 28px;
    }

    .belief-card h3 {
      margin: 0 0 12px;
      font-size: 22px;
      line-height: 1.15;
    }

    .belief-card p {
      margin: 0;
      color: var(--muted);
    }

    .image-collage {
      display: grid;
      grid-template-columns: 1.1fr .8fr 1fr;
      grid-template-rows: 210px 170px 220px;
      gap: 18px;
      margin-bottom: 112px;
    }

    .image-collage img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius-md);
      filter: saturate(.94) contrast(1.04);
    }

    .image-collage img:nth-child(1) {
      grid-row: span 2;
    }

    .image-collage img:nth-child(2) {
      margin-top: 48px;
    }

    .image-collage img:nth-child(3) {
      grid-row: span 2;
    }

    .image-collage img:nth-child(4) {
      grid-column: 1 / 2;
    }

    .image-collage img:nth-child(5) {
      grid-column: 2 / 4;
    }

    .values-section {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 72px;
      align-items: start;
      padding: 74px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background:
        linear-gradient(135deg, rgba(252, 222, 12, .09), transparent 38%),
        var(--panel-2);
    }

    .values-copy h2 {
      font-size: clamp(36px, 5vw, 66px);
    }

    .values-copy p {
      margin: 24px 0 0;
      color: var(--muted);
      font-size: 17px;
    }

    .values-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 34px;
    }

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

    .values-list li {
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 64px;
      border-bottom: 1px solid var(--line);
      color: #fff;
      font-size: 18px;
      font-weight: 700;
    }

    .values-list li::before {
      content: "";
      width: 10px;
      height: 10px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--accent);
    }

    .contact-strip {
      margin-top: 96px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 46px;
      align-items: center;
      padding: 42px;
      border-radius: 28px;
      background: var(--accent);
      color: #050505;
    }

    .contact-strip h2 {
      max-width: 780px;
      font-size: clamp(36px, 5vw, 64px);
    }

    .contact-strip p {
      margin: 18px 0 0;
      max-width: 720px;
      color: rgba(5, 5, 5, .72);
      font-weight: 600;
    }

    .contact-strip .eyebrow {
      color: #050505;
    }

    .contact-strip .eyebrow::before {
      background: #050505;
      box-shadow: none;
    }

    .contact-strip img {
      width: 100%;
      max-height: 280px;
      object-fit: contain;
      justify-self: end;
    }

    .site-footer {
      padding: 70px 0 28px;
      background: var(--bg);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(150px, .7fr));
      gap: 42px;
      padding-bottom: 50px;
      border-bottom: 1px solid var(--line);
    }

    .footer-brand h2 {
      max-width: 280px;
      margin: 18px 0 0;
      font-size: 40px;
    }

    .footer-col h3 {
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .footer-col a,
    .footer-col p {
      display: block;
      margin: 0 0 11px;
      color: #fff;
      font-weight: 600;
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-top: 24px;
      color: var(--muted);
      font-size: 14px;
    }

    @media (max-width: 1023px) {
      .menu,
      .site-header .socials { display: none; }

      .mobile-dot { display: grid; }

      .intro-grid,
      .values-section,
      .contact-strip,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .belief-stack {
        padding-top: 0;
      }

      .image-collage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, 220px);
      }

      .image-collage img:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
        margin-top: 0;
      }

      .image-collage img:nth-child(5) {
        grid-column: 1 / -1;
      }

      .values-section {
        padding: 46px;
      }

      .contact-strip img {
        justify-self: start;
      }
    }

    @media (max-width: 640px) {
      .container {
        width: min(calc(100% - 28px), var(--max));
      }

      .nav { min-height: 72px; }

      .brand-logo {
        width: 48px;
        height: 48px;
      }

      .page-hero {
        min-height: 360px;
        padding: 60px 0;
      }

      .page-hero h1 {
        font-size: clamp(54px, 22vw, 82px);
      }

      .page-hero p,
      .intro-copy > p,
      .values-copy p,
      .contact-strip p {
        font-size: 15px;
      }

      .about-main {
        padding: 76px 0 88px;
      }

      .intro-grid {
        gap: 34px;
        margin-bottom: 52px;
      }

      .intro-copy h2,
      .values-copy h2,
      .contact-strip h2 {
        font-size: clamp(34px, 11vw, 46px);
      }

      .image-collage {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 230px);
        gap: 14px;
        margin-bottom: 70px;
      }

      .image-collage img:nth-child(5) {
        grid-column: auto;
      }

      .values-section,
      .contact-strip {
        padding: 28px;
        border-radius: 20px;
      }

      .values-list {
        grid-template-columns: 1fr;
      }

      .values-list li {
        min-height: 56px;
        font-size: 16px;
      }

      .footer-bottom {
        flex-direction: column;
      }
    }

/* pages/services.html */
:root {
      --bg: #050505;
      --page: #070911;
      --panel: #111722;
      --panel-2: #0e131d;
      --line: rgba(255, 255, 255, .11);
      --line-soft: rgba(255, 255, 255, .07);
      --text: #ffffff;
      --muted: #b9b9b9;
      --accent: #fcde0c;
      --accent-dark: #d7ba00;
      --radius-md: 16px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-width: 320px;
      background: var(--page);
      color: var(--text);
      font-family: "Golos Text", Arial, sans-serif;
      line-height: 1.55;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

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

    .page { overflow: hidden; }

    .container {
      width: min(calc(100% - 40px), var(--max));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(5, 5, 5, .86);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line-soft);
    }

    .nav {
      min-height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: .01em;
    }

    .brand-logo {
      width: 56px;
      height: 56px;
      object-fit: contain;
      flex: 0 0 auto;
      filter: drop-shadow(0 0 12px rgba(252, 222, 12, .25));
    }

    .brand-name {
      color: #fff;
      font-size: 15px;
      line-height: 1.05;
      text-transform: uppercase;
    }

    .menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;
      color: rgba(255, 255, 255, .78);
      font-size: 14px;
      font-weight: 600;
    }

    .menu a:hover,
    .menu a[aria-current="page"] {
      color: #fff;
    }

    .menu a[aria-current="page"] {
      text-decoration: underline;
      text-decoration-color: var(--accent);
      text-underline-offset: 8px;
      text-decoration-thickness: 2px;
    }

    .socials {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255, 255, 255, .78);
      font-size: 13px;
      font-weight: 600;
    }

    .socials a {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: rgba(255, 255, 255, .82);
      background: rgba(255, 255, 255, .03);
      transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
    }

    .socials svg {
      width: 16px;
      height: 16px;
      display: block;
      fill: currentColor;
    }

    .socials .client-login {
      width: auto;
      min-width: 118px;
      padding: 0 16px;
      border-radius: 999px;
      color: #050505;
      background: var(--accent);
      border-color: var(--accent);
      font-size: 13px;
      font-weight: 800;
    }

    .socials a:hover {
      color: var(--accent);
      border-color: rgba(252, 222, 12, .38);
      background: rgba(252, 222, 12, .08);
      transform: translateY(-2px);
    }

    .socials .client-login:hover {
      color: #050505;
      background: #fff;
      border-color: #fff;
    }

    .mobile-dot {
      display: none;
      width: 42px;
      height: 42px;
      place-items: center;
      border-radius: 50%;
      border: 1px solid var(--line);
      color: var(--accent);
    }

    .page-hero {
      position: relative;
      min-height: 384px;
      display: grid;
      place-items: center;
      isolation: isolate;
      overflow: hidden;
      background: #111;
      text-align: center;
    }

    .page-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image: radial-gradient(circle at 18% 24%, rgba(210, 167, 0, .24), transparent 32%);
      background-size: cover;
      background-position: center 42%;
      transform: scale(1.03);
    }

    .page-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(180deg, rgba(5, 7, 11, .42), rgba(5, 7, 11, .68)),
        rgba(5, 7, 11, .46);
    }

    .page-hero h1 {
      margin: 0;
      font-size: clamp(52px, 8vw, 78px);
      line-height: .95;
      letter-spacing: 0;
    }

    .page-hero p {
      width: min(650px, 100%);
      margin: 22px auto 0;
      color: rgba(255, 255, 255, .82);
      font-size: clamp(16px, 1.6vw, 20px);
      font-weight: 600;
    }

    .services-main {
      background: var(--page);
      padding: 118px 0 150px;
    }

    .services-intro {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 42px;
      align-items: end;
      margin-bottom: 28px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 22px;
      padding: 5px 13px;
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: 999px;
      color: rgba(255, 255, 255, .78);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 3px rgba(252, 222, 12, .12);
    }

    .services-intro h2 {
      max-width: 720px;
      margin: 0;
      font-size: clamp(42px, 6.1vw, 70px);
      line-height: 1.08;
      letter-spacing: 0;
    }

    .contact-link {
      justify-self: end;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      color: #fff;
      font-size: 15px;
      font-weight: 800;
      transition: color .2s ease, transform .2s ease;
    }

    .contact-link::after {
      content: "->";
      color: var(--accent);
      font-size: 18px;
      line-height: 1;
    }

    .contact-link:hover {
      color: var(--accent);
      transform: translateX(4px);
    }

    .services-mosaic {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px;
      align-items: start;
    }

    .service-tile {
      min-height: 332px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .045);
      border-radius: var(--radius-md);
      background: linear-gradient(180deg, #121822, var(--panel-2));
      box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
      transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
    }

    .service-tile:nth-child(4n + 2) { margin-top: 54px; }
    .service-tile:nth-child(4n + 3) { margin-top: 106px; }
    .service-tile:nth-child(4n + 4) { margin-top: 168px; }

    .service-tile:hover {
      transform: translateY(-8px);
      border-color: rgba(252, 222, 12, .32);
      box-shadow: 0 24px 54px rgba(0, 0, 0, .28);
    }

    .service-image {
      height: 184px;
      display: grid;
      place-items: center;
      padding: 28px 22px 8px;
    }

    .service-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }

    .service-body {
      padding: 20px 28px 28px;
    }

    .service-body h3 {
      margin: 0 0 12px;
      font-size: 25px;
      line-height: 1.1;
      letter-spacing: 0;
    }

    .service-body p {
      margin: 0 0 22px;
      color: var(--muted);
      font-size: 15px;
      font-weight: 500;
    }

    .link-more {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
    }

    .link-more::after {
      content: "->";
      color: var(--accent);
      font-size: 16px;
    }

    .site-footer {
      padding: 70px 0 28px;
      background: var(--bg);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(150px, .7fr));
      gap: 42px;
      padding-bottom: 50px;
      border-bottom: 1px solid var(--line);
    }

    .footer-brand h2 {
      max-width: 280px;
      margin: 18px 0 0;
      font-size: 40px;
      line-height: 1;
    }

    .footer-col h3 {
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .footer-col a,
    .footer-col p {
      display: block;
      margin: 0 0 11px;
      color: #fff;
      font-weight: 600;
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-top: 24px;
      color: var(--muted);
      font-size: 14px;
    }

    @media (max-width: 980px) {
      .menu,
      .site-header .socials { display: none; }

      .mobile-dot { display: grid; }

      .services-intro,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .contact-link {
        justify-self: start;
        margin-bottom: 0;
      }

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

      .service-tile:nth-child(n) {
        margin-top: 0;
      }

      .service-tile:nth-child(even) {
        margin-top: 48px;
      }
    }

    @media (max-width: 640px) {
      .container {
        width: min(calc(100% - 28px), var(--max));
      }

      .nav { min-height: 72px; }

      .brand-logo {
        width: 48px;
        height: 48px;
      }

      .brand-name { font-size: 13px; }

      .page-hero {
        min-height: 274px;
        padding: 48px 0;
      }

      .page-hero h1 {
        font-size: clamp(42px, 14vw, 56px);
      }

      .page-hero p {
        font-size: 14px;
      }

      .services-main {
        padding: 72px 0 94px;
      }

      .services-intro {
        gap: 24px;
        margin-bottom: 36px;
      }

      .services-intro h2 {
        font-size: clamp(34px, 11vw, 44px);
      }

      .services-mosaic {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .service-tile:nth-child(n) {
        margin-top: 0;
      }

      .service-tile {
        min-height: 316px;
      }

      .service-image {
        height: 172px;
      }

      .footer-bottom {
        flex-direction: column;
      }
    }

/* pages/portfolio.html */
:root {
      --bg: #050505;
      --page: #070911;
      --panel: #111722;
      --line: rgba(255, 255, 255, .11);
      --line-soft: rgba(255, 255, 255, .07);
      --text: #ffffff;
      --muted: #b9b9b9;
      --accent: #fcde0c;
      --radius-md: 16px;
      --max: 1300px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-width: 320px;
      background: var(--page);
      color: var(--text);
      font-family: "Golos Text", Arial, sans-serif;
      line-height: 1.55;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

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

    .page { overflow: hidden; }

    .container {
      width: min(calc(100% - 40px), var(--max));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(5, 5, 5, .86);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line-soft);
    }

    .nav {
      min-height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: .01em;
    }

    .brand-logo {
      width: 56px;
      height: 56px;
      object-fit: contain;
      flex: 0 0 auto;
      filter: drop-shadow(0 0 12px rgba(252, 222, 12, .25));
    }

    .brand-name {
      color: #fff;
      font-size: 15px;
      line-height: 1.05;
      text-transform: uppercase;
    }

    .menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;
      color: rgba(255, 255, 255, .78);
      font-size: 14px;
      font-weight: 600;
    }

    .menu a:hover,
    .menu a[aria-current="page"] {
      color: #fff;
    }

    .menu a[aria-current="page"] {
      text-decoration: underline;
      text-decoration-color: var(--accent);
      text-underline-offset: 8px;
      text-decoration-thickness: 2px;
    }

    .socials {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255, 255, 255, .78);
      font-size: 13px;
      font-weight: 600;
    }

    .socials a {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: rgba(255, 255, 255, .82);
      background: rgba(255, 255, 255, .03);
      transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
    }

    .socials svg {
      width: 16px;
      height: 16px;
      display: block;
      fill: currentColor;
    }

    .socials .client-login {
      width: auto;
      min-width: 118px;
      padding: 0 16px;
      border-radius: 999px;
      color: #050505;
      background: var(--accent);
      border-color: var(--accent);
      font-size: 13px;
      font-weight: 800;
    }

    .socials a:hover {
      color: var(--accent);
      border-color: rgba(252, 222, 12, .38);
      background: rgba(252, 222, 12, .08);
      transform: translateY(-2px);
    }

    .socials .client-login:hover {
      color: #050505;
      background: #fff;
      border-color: #fff;
    }

    .mobile-dot {
      display: none;
      width: 42px;
      height: 42px;
      place-items: center;
      border-radius: 50%;
      border: 1px solid var(--line);
      color: var(--accent);
    }

    .page-hero {
      position: relative;
      min-height: 252px;
      display: grid;
      place-items: center;
      isolation: isolate;
      overflow: hidden;
      background: #111;
      text-align: center;
    }

    .page-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image: radial-gradient(circle at 78% 18%, rgba(210, 167, 0, .2), transparent 36%);
      background-size: cover;
      background-position: center;
      transform: scale(1.03);
    }

    .page-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(180deg, rgba(5, 7, 11, .18), rgba(5, 7, 11, .62)),
        rgba(5, 7, 11, .22);
    }

    .page-hero h1 {
      margin: 0;
      font-size: clamp(52px, 8vw, 78px);
      line-height: .95;
      letter-spacing: 0;
    }

    .page-hero p {
      width: min(650px, 100%);
      margin: 22px auto 0;
      color: rgba(255, 255, 255, .78);
      font-size: clamp(16px, 1.6vw, 20px);
      font-weight: 600;
    }

    .portfolio-main {
      background: var(--page);
      padding: 180px 0 170px;
    }

    .portfolio-gallery {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 34px;
      row-gap: 96px;
      align-items: start;
    }

    .portfolio-item {
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .045);
      border-radius: var(--radius-md);
      background: #111722;
      box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
      transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
    }

    .portfolio-item:nth-child(even) {
      margin-top: 204px;
    }

    .portfolio-item:hover {
      transform: translateY(-8px);
      border-color: rgba(252, 222, 12, .32);
      box-shadow: 0 24px 54px rgba(0, 0, 0, .28);
    }

    .portfolio-image {
      display: block;
      overflow: hidden;
      background: #0b0f17;
    }

    .portfolio-art {
      position: relative;
      display: grid;
      min-height: 290px;
      aspect-ratio: 3 / 2;
      place-items: center;
      padding: 28px;
      color: rgba(255, 255, 255, .72);
      text-align: center;
      isolation: isolate;
    }

    .portfolio-art::before,
    .portfolio-art::after {
      position: absolute;
      inset: 0;
      content: "";
      z-index: -1;
    }

    .portfolio-art::before {
      background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 16px);
      opacity: .55;
    }

    .portfolio-art::after {
      background: radial-gradient(circle at 18% 18%, rgba(252, 222, 12, .45), transparent 34%), linear-gradient(135deg, #0b0f17 0%, #17253e 100%);
    }

    .portfolio-art--digital::after {
      background: radial-gradient(circle at 78% 22%, rgba(65, 112, 255, .8), transparent 38%), linear-gradient(135deg, #0b0f17 0%, #20345b 100%);
    }

    .portfolio-art--campaign::after {
      background: radial-gradient(circle at 22% 76%, rgba(252, 222, 12, .65), transparent 36%), linear-gradient(135deg, #17253e 0%, #0b0f17 100%);
    }

    .portfolio-art--editorial::after {
      background: linear-gradient(135deg, #0b0f17 0 46%, #725b27 46% 54%, #16243b 54% 100%);
    }

    .portfolio-art--social::after {
      background: radial-gradient(circle at 76% 72%, rgba(252, 222, 12, .75), transparent 28%), linear-gradient(135deg, #0b0f17 0%, #4a3a22 100%);
    }

    .portfolio-art--platform::after {
      background: radial-gradient(circle at 50% 50%, rgba(65, 112, 255, .6), transparent 32%), linear-gradient(135deg, #0b0f17 0%, #18213c 100%);
    }

    .portfolio-art span {
      padding: 9px 12px;
      border: 1px solid rgba(252, 222, 12, .48);
      border-radius: 999px;
      background: rgba(11, 15, 23, .24);
      color: var(--accent);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .portfolio-confidential-note {
      max-width: 720px;
      margin: 104px auto 0;
      padding: 34px;
      border: 1px solid rgba(23, 37, 62, .16);
      border-radius: 24px;
      background: rgba(255, 255, 255, .56);
    }

    .portfolio-confidential-note p:not(.eyebrow) {
      max-width: 58ch;
      margin: 0 0 24px;
      color: var(--muted);
      line-height: 1.7;
    }

    .portfolio-confidential-note .btn {
      display: inline-flex;
    }

    .portfolio-image img {
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
      opacity: .82;
      transition: transform .35s ease, opacity .35s ease;
    }

    .portfolio-item:hover .portfolio-image img {
      transform: scale(1.04);
      opacity: .94;
    }

    .portfolio-body {
      padding: 26px 32px 30px;
    }

    .portfolio-body h2 {
      margin: 0 0 20px;
      font-size: 24px;
      line-height: 1.1;
      letter-spacing: 0;
    }

    .portfolio-kicker {
      margin: 0 0 12px;
      color: var(--accent);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .portfolio-body > p:not(.portfolio-kicker) {
      margin: 0 0 22px;
      color: rgba(255, 255, 255, .72);
      line-height: 1.65;
    }

    .portfolio-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 24px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: var(--muted);
      font-size: 15px;
      font-weight: 600;
    }

    .portfolio-tags li {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .portfolio-tags li::before {
      content: "";
      width: 13px;
      height: 13px;
      border: 1px solid rgba(252, 222, 12, .72);
      border-radius: 50%;
      background:
        radial-gradient(circle at center, var(--accent) 0 2px, transparent 2.5px);
      opacity: .84;
    }

    .site-footer {
      padding: 70px 0 28px;
      background: var(--bg);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(150px, .7fr));
      gap: 42px;
      padding-bottom: 50px;
      border-bottom: 1px solid var(--line);
    }

    .footer-brand h2 {
      max-width: 280px;
      margin: 18px 0 0;
      font-size: 40px;
      line-height: 1;
    }

    .footer-col h3 {
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .footer-col a,
    .footer-col p {
      display: block;
      margin: 0 0 11px;
      color: #fff;
      font-weight: 600;
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-top: 24px;
      color: var(--muted);
      font-size: 14px;
    }

    @media (max-width: 980px) {
      .menu,
      .site-header .socials { display: none; }

      .mobile-dot { display: grid; }

      .portfolio-main { padding-top: 96px; }

      .portfolio-gallery,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .portfolio-item:nth-child(even) {
        margin-top: 0;
      }
    }

    @media (max-width: 640px) {
      .container {
        width: min(calc(100% - 28px), var(--max));
      }

      .nav { min-height: 72px; }

      .brand-logo {
        width: 48px;
        height: 48px;
      }

      .brand-name { font-size: 13px; }

      .page-hero {
        min-height: 220px;
        padding: 44px 0;
      }

      .page-hero h1 {
        font-size: clamp(42px, 14vw, 56px);
      }

      .page-hero p {
        font-size: 14px;
      }

      .portfolio-main { padding: 64px 0 98px; }

      .portfolio-gallery {
        row-gap: 78px;
      }

      .portfolio-body {
        padding: 22px 24px 26px;
      }

      .portfolio-tags {
        gap: 12px 20px;
      }

      .footer-bottom {
        flex-direction: column;
      }
    }

/* Shared disabled-link controls */
.socials .social-link {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  padding: 0;
  cursor: default;
  font: inherit;
}
.socials .social-link svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
button.client-login,
button.link-more {
  font: inherit;
  border: 0;
}

/* MonkeyMegaphoneHero */
.hero.monkey-hero {
  min-height: auto;
  padding: 48px 0 72px;
  background:
    radial-gradient(circle at 80% 24%, rgba(252, 222, 12, .1), transparent 30%),
    #f8f4eb;
}

.hero.monkey-hero::before,
.hero.monkey-hero::after {
  content: none;
}

.page-home main#top {
  scroll-margin-top: 96px;
}

.monkey-hero-card {
  position: relative;
  isolation: isolate;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 32px;
  background:
    radial-gradient(circle at 82% 56%, rgba(67, 206, 255, .09), transparent 31%),
    radial-gradient(circle at 66% 18%, rgba(154, 108, 255, .1), transparent 28%),
    linear-gradient(145deg, #050505 0%, #0b0b0d 58%, #111114 100%);
  box-shadow: 0 28px 80px rgba(18, 14, 6, .25);
}

.monkey-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 72%);
  mask-image: linear-gradient(to right, #000, transparent 72%);
}

.monkey-hero-spotlight {
  position: absolute;
  top: -270px;
  left: 35%;
  width: 720px;
  height: 560px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .68;
  filter: blur(20px);
  background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(166, 216, 255, .08) 36%, transparent 70%);
}

.monkey-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 0;
  padding: clamp(42px, 6vw, 82px);
}

.monkey-hero-copy {
  position: relative;
  z-index: 5;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.monkey-hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  color: #c9c9ce;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.monkey-hero-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fcde0c;
  box-shadow: 0 0 22px rgba(252, 222, 12, .75);
}

.hero.monkey-hero h1 {
  max-width: 690px;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(52px, 5.1vw, 78px);
  line-height: .98;
  letter-spacing: -.055em;
}

.hero.monkey-hero h1 span {
  display: block;
  color: transparent;
  background: linear-gradient(180deg, #fff 2%, #c6c7cc 76%, #8d8e96 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.monkey-hero-description {
  max-width: 600px;
  margin: 26px auto 0;
  color: #b8b8bf;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
}

.monkey-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

.monkey-hero-cta {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease, color .25s ease;
}

.monkey-hero-cta:hover,
.monkey-hero-cta:focus-visible {
  transform: translateY(-2px);
}

.monkey-hero-cta:focus-visible {
  outline: 3px solid rgba(252, 222, 12, .36);
  outline-offset: 4px;
}

.monkey-hero-cta-primary {
  color: #090909;
  background: #fcde0c;
  box-shadow: 0 12px 34px rgba(252, 222, 12, .18);
}

.monkey-hero-cta-primary:hover,
.monkey-hero-cta-primary:focus-visible {
  color: #090909;
  background: #ffe83f;
}

.monkey-hero-cta-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .05);
}

.monkey-hero-cta-secondary:hover,
.monkey-hero-cta-secondary:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, .46);
  background: rgba(255, 255, 255, .1);
}

@media (max-width: 1050px) {
  .monkey-hero-grid {
    padding: 54px 46px;
  }

  .hero.monkey-hero h1 {
    font-size: clamp(48px, 6vw, 66px);
  }
}

@media (max-width: 980px) {
  .hero.monkey-hero {
    padding: 34px 0 58px;
  }

  .monkey-hero-card {
    min-height: 0;
    border-radius: 26px;
  }

  .monkey-hero-grid {
    min-height: 0;
    padding: 52px 38px 30px;
  }

  .monkey-hero-copy {
    max-width: 620px;
    text-align: center;
  }

  .monkey-hero-eyebrow,
  .monkey-hero-actions {
    justify-content: center;
  }

  .monkey-hero-description {
    margin-inline: auto;
  }

}

@media (max-width: 520px) {
  .hero.monkey-hero {
    padding: 22px 0 42px;
  }

  .monkey-hero-card {
    border-radius: 22px;
  }

  .monkey-hero-grid {
    gap: 24px;
    padding: 40px 20px 22px;
  }

  .monkey-hero-eyebrow {
    gap: 6px;
    margin-bottom: 20px;
    font-size: 10px;
    letter-spacing: .08em;
  }

  .hero.monkey-hero h1 {
    font-size: clamp(39px, 12.3vw, 52px);
    line-height: 1;
  }

  .monkey-hero-description {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.55;
  }

  .monkey-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 26px;
  }

  .monkey-hero-cta {
    width: 100%;
  }

}
button.client-login:disabled,
button.link-more:disabled,
a[aria-disabled="true"] {
  cursor: default;
}
.footer-col span,
.footer-bottom span {
  color: var(--text);
  font-weight: 700;
  display: block;
}
.footer-bottom span {
  color: var(--muted);
  font-weight: 500;
}

/* Mobile refinement layer */
.mobile-dot {
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  font: inherit;
  cursor: pointer;
}

.mobile-dot:focus-visible,
.menu a:focus-visible,
.socials a:focus-visible,
.socials button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (max-width: 980px) {
  html,
  body {
    overflow-x: hidden;
  }

  .site-header {
    z-index: 20;
  }

  .nav {
    flex-wrap: wrap;
    gap: 12px 18px;
    padding-block: 10px;
  }

  .mobile-dot {
    display: grid;
    place-items: center;
    margin-left: auto;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
  }

  .mobile-dot:hover,
  .site-header.is-mobile-open .mobile-dot {
    color: #111;
    border-color: var(--accent);
    background: var(--accent);
  }

  .site-header .menu,
  .site-header .socials {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    max-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: max-height .24s ease, opacity .18s ease, transform .18s ease, padding .18s ease;
    visibility: hidden;
  }

  .site-header .menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .site-header .menu a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .site-header .socials {
    order: 4;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  .site-header.is-mobile-open .menu {
    max-height: 320px;
    padding-top: 8px;
  }

  .site-header.is-mobile-open .socials {
    max-height: 88px;
    padding: 12px 0 16px;
  }

  .site-header.is-mobile-open .menu,
  .site-header.is-mobile-open .socials {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  .site-header.is-mobile-open .nav {
    background: rgba(0, 0, 0, 0.96);
  }

  .hero {
    min-height: auto;
    padding: 72px 0 74px;
  }

  .hero-grid,
  .intro-grid,
  .values-section,
  .contact-strip,
  .services-intro {
    gap: 38px;
  }

  .hero h1,
  .page-hero h1 {
    overflow-wrap: anywhere;
  }

  .hero-media {
    width: min(100%, 540px);
    margin-inline: auto;
  }

  .page-hero {
    min-height: clamp(260px, 46vw, 420px);
  }

  .section,
  .about-main,
  .services-main,
  .portfolio-main {
    padding-block: 84px;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(calc(100% - 28px), var(--max));
  }

  .brand {
    min-width: 0;
  }

  .brand-logo {
    width: 46px;
    height: 46px;
  }

  .brand-name {
    max-width: 118px;
    font-size: 12px;
  }

  .nav {
    min-height: 68px;
  }

  .mobile-dot {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .hero {
    padding: 52px 0 64px;
  }

  .hero h1 {
    font-size: clamp(40px, 12.5vw, 58px);
    line-height: .98;
  }

  .page-hero {
    min-height: auto;
    padding: 50px 0 54px;
  }

  .page-hero h1 {
    font-size: clamp(38px, 13vw, 58px);
    line-height: .98;
  }

  .hero-copy,
  .page-hero p,
  .section-copy,
  .intro-copy > p,
  .values-copy p,
  .contact-strip p,
  .contact-panel p,
  .services-intro p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.65;
  }

  .section,
  .about-main,
  .services-main,
  .portfolio-main {
    padding-block: 68px;
  }

  .section-head,
  .home-about-intro,
  .home-values-teaser,
  .contact-panel,
  .services-intro {
    gap: 22px;
  }

  .section h2,
  .home-about-copy h2,
  .home-values-teaser h3,
  .intro-copy h2,
  .values-copy h2,
  .contact-strip h2,
  .services-intro h2,
  .footer-brand h2 {
    font-size: clamp(30px, 9.5vw, 44px);
    line-height: 1.05;
  }

  .portfolio-grid,
  .service-grid,
  .footer-grid,
  .intro-grid,
  .values-section,
  .contact-strip,
  .services-intro,
  .portfolio-gallery {
    grid-template-columns: 1fr;
  }

  .service-card,
  .portfolio-card,
  .belief-card,
  .home-belief-card,
  .contact-panel,
  .service-tile,
  .portfolio-item {
    border-radius: 8px;
  }

  .service-card img,
  .portfolio-card img,
  .contact-panel img,
  .service-image,
  .portfolio-image {
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
  }

  .service-image img,
  .portfolio-image img {
    height: 100%;
  }

  .image-collage {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .image-collage img:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .services-mosaic {
    grid-template-columns: 1fr;
  }

  .service-tile:nth-child(n),
  .portfolio-item:nth-child(n) {
    transform: none;
  }

  .contact-strip,
  .contact-panel {
    padding: 28px;
  }

  .footer-bottom {
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 390px) {
  .container {
    width: min(calc(100% - 24px), var(--max));
  }

  .brand-logo {
    width: 42px;
    height: 42px;
  }

  .brand-name {
    max-width: 104px;
    font-size: 11px;
  }

  .mobile-dot {
    width: 38px;
    height: 38px;
  }

  .hero h1 {
    font-size: clamp(36px, 12vw, 46px);
  }

  .page-hero h1 {
    font-size: clamp(34px, 12.5vw, 48px);
  }

  .service-body,
  .contact-panel,
  .contact-strip,
  .portfolio-body {
    padding: 24px;
  }

  .socials .client-login {
    min-width: 106px;
    padding-inline: 12px;
  }
}

/* Designed light color profile */
:root {
  --bg: #f6f0e5;
  --page: #f2eadc;
  --panel: #fffaf0;
  --panel-2: #ece2d2;
  --line: rgba(33, 29, 20, .16);
  --line-soft: rgba(33, 29, 20, .09);
  --text: #15130e;
  --muted: #686153;
  --blue: #b48c00;
  --blue-dark: #806500;
  --orange: #d2a700;
  --accent: #d2a700;
  --accent-dark: #856900;
}

html,
body {
  background:
    radial-gradient(circle at 18% 8%, rgba(210, 167, 0, .16), transparent 28rem),
    radial-gradient(circle at 88% 22%, rgba(210, 167, 0, .11), transparent 24rem),
    var(--bg);
  color: var(--text);
}

img,
video,
iframe,
.brand-logo,
.hero-media img,
.portfolio-card img,
.service-card img,
.image-collage img,
.service-image img,
.portfolio-image img,
.contact-panel img,
.contact-strip img {
  filter: none;
  mix-blend-mode: normal;
}

.site-header {
  background: rgba(255, 250, 240, .9);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 12px 32px rgba(59, 47, 14, .08);
}

.brand {
  border-radius: 18px;
}

.brand-logo {
  border-radius: 14px;
  background: #070704;
  padding: 5px;
  box-shadow: 0 8px 18px rgba(21, 19, 14, .18);
}

.brand-name,
.menu,
.menu a,
.menu a:hover,
.menu a[aria-current="page"],
.socials,
.socials a,
.socials a:not(.client-login),
.socials .social-link,
.footer-col p,
.footer-bottom span,
.values-list li,
.contact-link,
.link-more {
  color: var(--text);
}

.menu a[aria-current="page"],
.menu a:hover,
.contact-link:hover,
.link-more:hover {
  color: var(--accent-dark);
}

.menu a[aria-current="page"]::after {
  background: var(--accent-dark);
}

.socials a,
.socials a:not(.client-login),
.socials .social-link,
.mobile-dot {
  border-color: var(--line);
  background: rgba(255, 255, 255, .58);
  color: var(--text);
}

.socials a:hover,
.socials a:not(.client-login):hover,
.socials .social-link:hover,
.mobile-dot:hover,
.site-header.is-mobile-open .mobile-dot {
  border-color: rgba(210, 167, 0, .5);
  background: rgba(210, 167, 0, .16);
  color: var(--text);
}

.client-login,
.socials .client-login,
.socials .client-login:hover,
.btn-primary,
.contact-strip,
.contact-panel {
  background: var(--accent);
  color: #15130e;
}

.client-login:hover,
.socials .client-login:hover {
  border-color: var(--accent-dark);
  background: #efc71d;
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(246, 240, 229, .98) 0%, rgba(246, 240, 229, .9) 46%, rgba(246, 240, 229, .7) 100%),
    radial-gradient(circle at 70% 48%, rgba(210, 167, 0, .2), transparent 36rem);
}

.hero::after,
.hero-gradient-spacer {
  background: radial-gradient(circle at center, rgba(210, 167, 0, .5) 0%, rgba(210, 167, 0, .2) 48%, rgba(246, 240, 229, 0) 72%);
}

.hero-paths {
  --path-color: #b48c00;
}

.hero h1,
.section h2,
.page-hero h1,
.intro-copy h2,
.values-copy h2,
.services-intro h2,
.portfolio-body h2,
.contact-strip h2,
.contact-panel h2,
.footer-brand h2 {
  color: var(--text);
}

.hero-copy,
.section-copy,
.home-about-copy > p,
.home-belief-card p,
.home-values-teaser p,
.service-body p,
.intro-copy > p,
.belief-card p,
.values-copy p,
.services-intro p,
.page-hero p,
.portfolio-tags,
.footer-col h3,
.footer-bottom,
.contact-panel p,
.contact-strip p {
  color: var(--muted);
}

.page-hero p {
  display: inline-block;
  width: min(100%, 720px);
  padding: 10px 18px;
  border: 1px solid rgba(33, 29, 20, .08);
  border-radius: 18px;
  background: rgba(255, 250, 240, .78);
  color: var(--text);
  box-shadow: 0 14px 34px rgba(59, 47, 14, .08);
}

.eyebrow {
  border-color: rgba(33, 29, 20, .18);
  background: rgba(255, 250, 240, .72);
  color: var(--text);
}

.eyebrow::before,
.contact-strip .eyebrow::before,
.portfolio-tags li::before {
  background: var(--accent-dark);
}

.page-about .page-hero {
  background:
    linear-gradient(90deg, rgba(255, 250, 240, .94), rgba(255, 250, 240, .78)),
    radial-gradient(circle at 78% 24%, rgba(210, 167, 0, .25), transparent 36%),
    var(--page);
}

.page-services .page-hero,
.page-portfolio .page-hero {
  background: var(--page);
}

.page-hero::after {
  background:
    linear-gradient(180deg, rgba(255, 250, 240, .78), rgba(246, 240, 229, .9)),
    rgba(255, 250, 240, .72);
}

.page-hero::before {
  opacity: .3;
}

.page-hero::after {
  opacity: 1;
}

.page-about .page-hero::after {
  background: linear-gradient(180deg, rgba(246, 240, 229, 0), rgba(246, 240, 229, .92));
}

.services,
.site-footer {
  background:
    linear-gradient(180deg, rgba(255, 250, 240, .76), rgba(242, 234, 220, .92)),
    var(--page);
}

.portfolio-card,
.service-card,
.home-belief-card,
.belief-card,
.home-values-teaser,
.values-section,
.service-tile,
.portfolio-item {
  border-color: var(--line-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), var(--panel));
  box-shadow: 0 18px 44px rgba(59, 47, 14, .1);
}

.portfolio-card:hover,
.service-card:hover,
.service-tile:hover,
.portfolio-item:hover {
  border-color: rgba(210, 167, 0, .48);
  box-shadow: 0 24px 54px rgba(59, 47, 14, .16);
}

.portfolio-card span {
  border-color: var(--line-soft);
  background: rgba(255, 250, 240, .92);
  color: var(--text);
}

.service-image,
.portfolio-image {
  background: #f1e7d8;
}

.contact-panel .btn {
  background: #15130e;
  color: var(--accent);
}

.contact-panel .btn:hover {
  background: #332b16;
  color: #f4cf24;
}

.contact-strip p,
.contact-strip .eyebrow,
.contact-panel p {
  color: rgba(21, 19, 14, .72);
}

.contact-strip .eyebrow {
  border-color: rgba(21, 19, 14, .22);
  background: rgba(255, 250, 240, .2);
}

.footer-col a,
.footer-col p,
.footer-col span {
  color: #15130e;
}

.footer-col a:hover {
  color: var(--accent-dark);
}

@media (max-width: 980px) {
  .site-header.is-mobile-open .nav {
    background: rgba(255, 250, 240, .98);
  }

  .site-header .menu {
    border-top-color: var(--line-soft);
  }

  .site-header .menu a {
    border-bottom-color: var(--line-soft);
    color: var(--text);
  }

  .site-header .socials {
    color: var(--text);
  }
}

/* Shared shell refinements */
.site-header .brand-logo {
  width: 70px;
  height: 70px;
}

.footer-grid {
  align-items: start;
}

.footer-grid > * {
  min-width: 0;
  align-self: start;
}

@media (max-width: 980px) {
  .site-header .brand-logo {
    width: 56px;
    height: 56px;
  }
}

/* Journal index and article pages */
.page-journal .page-hero {
  background:
    radial-gradient(circle at 82% 30%, rgba(210, 167, 0, .18), transparent 30%),
    var(--page);
}

.page-hero > .container {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.page-hero .hero-copy,
.page-hero h1,
.page-hero p {
  margin-inline: auto;
}

.journal-main {
  padding: clamp(64px, 8vw, 110px) 0;
}

.journal-feature,
.journal-card,
.journal-related-card,
.journal-article-media,
.article-contact {
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), var(--panel));
  box-shadow: 0 18px 44px rgba(59, 47, 14, .1);
}

.journal-feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 30px;
}

.journal-feature-image,
.journal-card-image {
  display: block;
  overflow: hidden;
  background: #f1e7d8;
}

.journal-feature-image {
  min-height: 440px;
}

.journal-feature-image img,
.journal-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.journal-feature:hover img,
.journal-card:hover img {
  transform: scale(1.025);
}

.journal-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 64px);
}

.journal-feature-copy h2,
.journal-card-body h2 {
  margin: 0;
  letter-spacing: -.04em;
  line-height: 1.04;
}

.journal-feature-copy h2 {
  font-size: clamp(34px, 4vw, 54px);
}

.journal-feature-copy h2 a,
.journal-card-body h2 a {
  color: var(--text);
}

.journal-feature-copy > p:not(.journal-meta),
.journal-card-body > p:not(.journal-meta) {
  color: var(--muted);
  line-height: 1.7;
}

.journal-feature-copy > p:not(.journal-meta) {
  margin: 24px 0;
}

.journal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 20px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.journal-meta span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 10px 2px 0;
  border-radius: 50%;
  background: currentColor;
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.journal-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.journal-card:hover,
.journal-related-card:hover {
  transform: translateY(-5px);
  border-color: rgba(210, 167, 0, .48);
  box-shadow: 0 24px 54px rgba(59, 47, 14, .16);
}

.journal-card-image {
  aspect-ratio: 4 / 3;
}

.journal-card-body {
  display: flex;
  min-height: 330px;
  flex: 1;
  flex-direction: column;
  padding: 28px;
}

.journal-card-body h2 {
  font-size: clamp(25px, 2.2vw, 32px);
}

.journal-card-body > p:not(.journal-meta) {
  margin: 18px 0 24px;
}

.journal-card-body .link-more {
  margin-top: auto;
}

.journal-article {
  padding: clamp(70px, 9vw, 124px) 0 0;
}

.journal-article-header {
  max-width: 980px;
  text-align: center;
}

.journal-article-header .journal-meta {
  justify-content: center;
  margin-top: 38px;
}

.journal-article-header h1 {
  max-width: 920px;
  margin: 0 auto;
  font-size: clamp(48px, 7vw, 92px);
  line-height: .98;
  letter-spacing: -.065em;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 800;
}

.article-back::before {
  content: "\2190";
  color: var(--accent-dark);
}

.article-summary {
  max-width: 760px;
  margin: 30px auto 0;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.65;
}

.journal-article-media {
  max-width: 1180px;
  margin-top: clamp(48px, 7vw, 82px);
  overflow: hidden;
  border-radius: 30px;
}

.journal-article-media img {
  display: block;
  width: 100%;
  max-height: 680px;
  object-fit: cover;
}

.journal-article-content {
  max-width: 780px;
  padding-top: clamp(58px, 8vw, 96px);
  padding-bottom: clamp(68px, 9vw, 116px);
}

.journal-article-content section + section {
  margin-top: 54px;
}

.journal-article-content h2 {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.5vw, 44px);
  letter-spacing: -.04em;
  line-height: 1.08;
}

.journal-article-content p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.85;
}

.journal-related {
  padding: clamp(64px, 8vw, 100px) 0;
  background: rgba(255, 255, 255, .38);
  border-block: 1px solid var(--line-soft);
}

.journal-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.journal-related-card {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 24px;
  color: var(--text);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.journal-related-card span {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.journal-related-card strong {
  max-width: 520px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.article-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 32px;
  margin-top: clamp(64px, 8vw, 100px);
  margin-bottom: clamp(64px, 8vw, 100px);
  padding: clamp(32px, 5vw, 60px);
  border-radius: 28px;
}

.article-contact h2 {
  max-width: 720px;
  margin: 12px 0 0;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.article-contact .btn {
  justify-self: start;
  background: var(--accent);
  color: #15130e;
}

@media (max-width: 980px) {
  .journal-feature,
  .article-contact {
    grid-template-columns: 1fr;
  }

  .journal-feature-image {
    min-height: 380px;
  }

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

  .journal-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .journal-feature,
  .journal-article-media {
    border-radius: 22px;
  }

  .journal-feature-image {
    min-height: 280px;
  }

  .journal-grid,
  .journal-related-grid {
    grid-template-columns: 1fr;
  }

  .journal-card:last-child {
    grid-column: auto;
  }

  .journal-card-body {
    min-height: 0;
  }

  .journal-article-header {
    text-align: left;
  }

  .journal-article-header .journal-meta {
    justify-content: flex-start;
  }

  .journal-article-header h1 {
    font-size: clamp(44px, 13vw, 66px);
  }

  .article-summary {
    margin-left: 0;
  }

}

@media (max-width: 480px) {
  .journal-meta {
    gap: 7px 12px;
  }

  .journal-meta span + span::before {
    margin-right: 7px;
  }

  .journal-feature-copy,
  .journal-card-body {
    padding: 24px;
  }

  .journal-article-content p {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journal-feature-image img,
  .journal-card-image img,
  .journal-card,
  .journal-related-card {
    transition: none;
  }
}

/* Contact teaser and standalone page */
.contact-teaser {
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: 0;
}

.contact-teaser-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(38px, 6vw, 72px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 84% 24%, rgba(255, 250, 240, .34), transparent 28%),
    var(--accent);
  color: #15130e;
}

.contact-teaser-panel::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(21, 19, 14, .13);
  border-radius: 50%;
  box-shadow:
    0 0 0 45px rgba(21, 19, 14, .035),
    0 0 0 90px rgba(21, 19, 14, .025);
}

.contact-teaser-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.contact-teaser-copy h2 {
  max-width: 680px;
  margin: 14px 0 20px;
  color: #15130e;
  font-size: clamp(42px, 6vw, 76px);
  line-height: .98;
  letter-spacing: -.055em;
}

.contact-teaser-copy > p:not(.eyebrow) {
  max-width: 620px;
  margin: 0 0 28px;
  color: rgba(21, 19, 14, .72);
  font-size: 18px;
  line-height: 1.65;
}

.contact-teaser .btn,
.contact-strip .btn {
  background: #15130e;
  color: var(--accent);
}

.contact-strip .btn {
  margin-top: 26px;
}

.page-contact .page-hero {
  background:
    radial-gradient(circle at 80% 28%, rgba(210, 167, 0, .2), transparent 30%),
    var(--page);
}

.contact-page-main {
  padding: clamp(64px, 8vw, 110px) 0;
}

.contact-hero-link {
  margin-top: 24px;
}

.contact-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "form details";
  gap: clamp(28px, 5vw, 64px);
  align-items: stretch;
}

.contact-details,
.contact-form {
  border: 1px solid var(--line-soft);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), var(--panel));
  box-shadow: 0 18px 44px rgba(59, 47, 14, .1);
}

.contact-details {
  grid-area: details;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  position: static;
  overflow: hidden;
}

.contact-details-copy {
  padding: clamp(30px, 4vw, 48px);
}

.contact-details h2,
.contact-form h2 {
  margin: 14px 0 20px;
  color: var(--text);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.contact-details h2 {
  font-size: clamp(34px, 4vw, 50px);
}

.contact-details-copy > p:not(.eyebrow),
.contact-form-heading > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.contact-office {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 0 clamp(30px, 4vw, 48px) clamp(30px, 4vw, 48px);
}

.contact-office > div {
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.contact-office span {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.contact-office p,
.contact-office a {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  line-height: 1.55;
}

.contact-visual {
  overflow: hidden;
  aspect-ratio: 1.55;
  background: #eadcc5;
}

.contact-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.contact-form {
  grid-area: form;
  padding: clamp(30px, 5vw, 56px);
}

.contact-form h2 {
  font-size: clamp(38px, 5vw, 58px);
}

.contact-form-heading {
  margin-bottom: 38px;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.form-field {
  min-width: 0;
}

.form-field-wide {
  grid-column: 1 / -1;
}

.form-field label {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.form-field label span {
  color: var(--accent-dark);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 250, 240, .72);
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.form-field input,
.form-field select {
  min-height: 54px;
  padding: 0 16px;
}

.form-field textarea {
  min-height: 180px;
  padding: 16px;
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent-dark);
  background: #fffdf8;
  box-shadow: 0 0 0 4px rgba(210, 167, 0, .14);
}

.form-field [aria-invalid="true"] {
  border-color: #a62d24;
  box-shadow: 0 0 0 4px rgba(166, 45, 36, .1);
}

.field-help,
.field-error {
  margin: 8px 2px 0;
  font-size: 13px;
  line-height: 1.45;
}

.field-help {
  color: var(--muted);
}

.field-error {
  min-height: 19px;
  color: #8f211a;
  font-weight: 700;
}

.contact-form-actions {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 28px;
}

.contact-submit {
  flex: 0 0 auto;
}

.contact-submit:disabled {
  cursor: not-allowed;
  background: #d7cfbe;
  color: #716b60;
  opacity: 1;
}

.contact-form-status {
  max-width: 390px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .contact-page-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "form" "details";
  }

  .contact-form {
    order: -1;
  }

  .contact-details {
    order: 0;
    position: static;
  }

  .contact-visual {
    aspect-ratio: 2.1;
  }
}

@media (max-width: 720px) {
  .contact-teaser-panel,
  .contact-details,
  .contact-form {
    border-radius: 22px;
  }

  .contact-form-grid,
  .contact-office {
    grid-template-columns: 1fr;
  }

  .form-field-wide {
    grid-column: auto;
  }

  .contact-form-actions {
    flex-direction: column;
  }

  .contact-visual {
    aspect-ratio: 1.4;
  }
}

@media (max-width: 480px) {
  .contact-teaser-panel,
  .contact-details-copy,
  .contact-form {
    padding: 26px;
  }

  .contact-office {
    padding: 0 26px 26px;
  }

  .contact-teaser-copy > p:not(.eyebrow) {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-field input,
  .form-field select,
  .form-field textarea {
    transition: none;
  }
}

/* Admin access */
.site-header .socials .admin-login {
  display: inline-flex;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #fcde0c;
  border-radius: 50%;
  color: #050505;
  background: #fcde0c;
}

.site-header .socials .admin-login svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-header .socials .admin-login:hover {
  color: #fcde0c;
  border-color: #173c5e;
  background: #173c5e;
  transform: translateY(-2px);
}

.site-header .socials .admin-login:focus-visible {
  outline: 3px solid rgba(252, 222, 12, .45);
  outline-offset: 4px;
}

@media (max-width: 980px) {
  .site-header .socials {
    display: flex;
    order: 0;
    flex-basis: auto;
    width: auto;
    max-height: none;
    margin-left: auto;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  .site-header .socials .social-link {
    display: none;
  }

  .site-header .mobile-dot {
    margin-left: 0;
  }
}

/* Text-first Home and About recovery */
.service-card {
  overflow: visible;
}

.service-card .service-body {
  min-height: 244px;
  padding: 28px;
}

.portfolio-refresh-panel {
  display: grid;
  gap: 18px;
  max-width: 760px;
  padding: clamp(30px, 5vw, 54px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(210, 167, 0, .14), rgba(255, 250, 240, .9));
  box-shadow: 0 20px 46px rgba(59, 47, 14, .1);
}

.portfolio-refresh-panel .eyebrow {
  margin: 0;
  justify-self: start;
}

.portfolio-refresh-panel h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(30px, 4.5vw, 50px);
  line-height: 1.04;
}

.portfolio-refresh-panel > p:not(.eyebrow) {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}

.portfolio-refresh-panel .link-more {
  justify-self: start;
  color: var(--text);
}

.page-about .contact-strip {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

@media (max-width: 640px) {
  .service-card .service-body {
    min-height: 0;
    padding: 24px;
  }

  .portfolio-refresh-panel {
    padding: 28px;
  }
}

/* Public static keyboard focus layer */
:where(.page, [data-cms-render="static-html"]) :is(a, button, input, select, textarea):focus-visible,
.site-header .mobile-dot:focus-visible,
.site-header .socials .admin-login:focus-visible {
  outline: 3px solid #fcde0c;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px #173c5e;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fcde0c;
  color: #050505;
  font-weight: 800;
  transform: translateY(-180%);
  transition: transform .2s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.media-placeholder {
  display: grid;
  width: 100%;
  min-height: 180px;
  aspect-ratio: 1.55;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(252, 222, 12, .18), transparent 50%),
    repeating-linear-gradient(135deg, rgba(23, 60, 94, .14) 0 2px, transparent 2px 12px),
    #eadcc5;
  color: #173c5e;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .site-header.is-mobile-open .menu {
    display: flex;
  }

  .site-header.is-mobile-open .socials {
    display: flex;
  }
}

/* Deliberate image slots: reserved geometry, no external image requests. */
.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid #bdb5a4;
  border-radius: 12px;
  background: #eee7d8;
  color: #554b34;
  font-size: 16px;
  font-weight: 600;
}
.image-placeholder svg { width: 40px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.image-placeholder--dark { background: #22221c; border-color: #666348; color: #f4df70; }
.monkey-hero-grid:has(> .image-placeholder) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.monkey-hero-grid:has(> .image-placeholder) .monkey-hero-copy { text-align: left; min-width: 0; }
.monkey-hero-grid:has(> .image-placeholder) .monkey-hero-actions { justify-content: flex-start; }
.service-card > .image-placeholder { border-radius: 12px 12px 0 0; }
.service-image > .image-placeholder { height: 100%; }
.journal-feature-image > .image-placeholder, .journal-card-image > .image-placeholder { height: 100%; }
.portfolio-refresh-panel { margin-top: 24px; }
.values-section > .image-placeholder { margin-block: 24px; }
/* Supplied hospitality case studies. */
.page-portfolio .portfolio-item:nth-child(even) { margin-top: 0; }
.page-portfolio .portfolio-item { scroll-margin-top: 112px; }
.portfolio-cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
  padding: clamp(28px, 4vw, 48px);
}
.portfolio-cover--calcutta { background: #593b2b; color: #fff0d4; }
.portfolio-cover--olio { background: #354338; color: #fff5df; }
.portfolio-cover > span {
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
}
.portfolio-cover > small { margin-top: 32px; font-size: 15px; }
.page-portfolio .portfolio-body > p { color: var(--muted); }
.page-portfolio .portfolio-body > .portfolio-context { margin: -8px 0 20px; font-size: 14px; }
.portfolio-case-study { margin-top: 28px; border-top: 1px solid var(--line-soft); }
.portfolio-case-study > summary {
  padding: 20px 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}
.portfolio-case-study > summary::marker { color: var(--accent-dark); }
.portfolio-case-study > summary:hover { color: #6c4d13; }
.portfolio-case-study > summary:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.portfolio-case-content { padding-bottom: 6px; }
.portfolio-case-content h3 { margin: 30px 0 12px; color: var(--text); font-size: 20px; line-height: 1.25; }
.portfolio-case-content h3:first-child { margin-top: 8px; }
.portfolio-case-content p,
.portfolio-case-content ul { margin: 0 0 18px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.portfolio-case-content ul { padding-left: 20px; }
.portfolio-case-content li + li { margin-top: 10px; }
.portfolio-case-content strong { color: var(--text); font-weight: 600; }
.portfolio-case-content .link-more { margin-top: 12px; color: var(--text); }
.portfolio-feature-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.portfolio-feature-links a { padding-block: 8px; color: var(--text); text-decoration: underline; text-underline-offset: 5px; font-weight: 600; }
.portfolio-feature-links a:hover { color: #6c4d13; }
@media (max-width: 640px) {
  .portfolio-cover { min-height: 250px; }
  .page-portfolio .portfolio-gallery { row-gap: 40px; }
}
@media (max-width: 1023px) {
  .monkey-hero-grid:has(> .image-placeholder) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}