/* =========================================================
   WABO SOFTWARE — STYLE.CSS
========================================================= */

:root {
    --bg: #0B0813;
    --purple: #A31FFC;
    --violet: #8B5CF6;
    --button: #7B2FBE;
    --card: #120E25;
    --stroke: #3B2E6F;
    --white: #FFFFFF;
    --muted: #C9BDD8;
    --header-height: 76px;
  
    font-family:
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
  
    color: #FFFFFF;
    background: var(--bg);
    scroll-behavior: smooth;
  }
  
  
  /* =========================================================
     RESET
  ========================================================= */
  
  * {
    box-sizing: border-box;
  }
  
  html {
    scroll-padding-top: var(--header-height);
  }
  
  body {
    margin: 0;
    overflow-x: hidden;
    background: var(--bg);
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button {
    font: inherit;
  }
  
  img {
    max-width: 100%;
    display: block;
  }
  
  em {
    font-style:normal;
    color: #C37BFF;
  }
  
  h1,
  h2,
  h3,
  p {
    margin-top: 0;
  }
  
  h1,
  h2 {
    letter-spacing: -0.052em;
    line-height: 1.08;
  }
  
  p {
    line-height: 1.7;
  }
  
  section[id],
  #enquiries {
    scroll-margin-top: var(--header-height);
  }
  
  
  /* =========================================================
     GENERAL
  ========================================================= */
  
  .section {
    position: relative;
    isolation: isolate;
  }
  
  .section-inner {
    width: min(1320px, calc(100% - 112px));
    margin: auto;
    position: relative;
    z-index: 1;
  }
  
  .eyebrow {
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.25em;
    margin-bottom: 28px;
  }
  
  
  /* =========================================================
     HEADER
  ========================================================= */
  
  .site-header {
    height: var(--header-height);
  
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
  
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    gap: 22px;
  
    padding:
      0
      clamp(22px, 4.5vw, 76px);
  
    background:
      rgba(20, 11, 34, 0.78);
  
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  
    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.11);
  }
  
  
  /* =========================================================
     BRAND
  ========================================================= */
  
  .brand {
    display: flex;
    align-items: center;
  
    gap: 12px;
  
    white-space: nowrap;
  
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.01em;
  }
  
  .brand img {
    width: 44px;
    height: 44px;
  
    object-fit: contain;
  }
  
  
  /* =========================================================
     DESKTOP NAV
  ========================================================= */
  
  .desktop-nav {
    position: relative;
  
    display: flex;
    align-items: center;
  
    gap: clamp(15px, 2.25vw, 36px);
  
    height: 100%;
  }
  
  .nav-link {
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.025em;
  
    color: #E3DCE9;
  
    white-space: nowrap;
  
    transition:
      color 0.25s ease;
  }
  
  .nav-link:hover {
    color: #DCC6FF;
  }
  
  
  /* P1 — improved active contrast */
  
  .nav-link.is-active {
    color: #D7BEFF;
  }
  
  
  /* =========================================================
     ACTIVE UNDERLINE
  ========================================================= */
  
  .active-line {
    position: absolute;
  
    bottom: 17px;
    left: 0;
  
    width: 0;
    height: 3px;
  
    border-radius: 4px;
  
    background: #B58AFF;
  
    transition:
      transform 0.38s
        cubic-bezier(.22, 1, .36, 1),
      width 0.38s
        cubic-bezier(.22, 1, .36, 1),
      opacity 0.2s ease;
  
    pointer-events: none;
  }
  
  
  /* =========================================================
     BUTTONS
  ========================================================= */
  
  .header-cta,
  .pill-button {
    background: var(--button);
  
    border-radius: 13px;
  
    color: #FFFFFF;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    gap: 14px;
  
    font-weight: 650;
    white-space: nowrap;
  
    transition:
      background 0.25s ease,
      transform 0.25s ease;
  }
  
  .header-cta {
    padding: 14px 24px;
  
    font-size: 0.9rem;
  }
  
  .header-cta:hover,
  .pill-button:hover {
    background: #9741D7;
  
    transform:
      translateY(-2px);
  }
  
  .pill-button {
    padding: 17px 27px;
  
    margin-top: 22px;
  
    background:
      rgba(123, 47, 190, 0.9);
  }
  
  
  /*
     Contact Us is a CTA,
     NOT an active navigation tab.
  */
  
  .header-cta.is-active,
  .header-cta:active {
    box-shadow: none;
  }
  
  
  /* =========================================================
     MOBILE NAV BASE
  ========================================================= */
  
  .menu-toggle,
  .mobile-nav {
    display: none;
  }
  
  
  /* =========================================================
     HOME
  ========================================================= */
  
  .home {
    min-height: 100svh;
  
    display: grid;
    place-items: center;
  
    overflow: clip;
  
    background: #0C0914;
  
    isolation: isolate;
  }
  
  .home-image {
    position: absolute;
    inset: 0;
  
    background-image:
      url("assets/images/wabo-office.png");
  
    background-size: cover;
  
    background-position:
      center 18%;
  
    background-repeat:
      no-repeat;
  
    background-attachment:
      fixed;
  
    z-index: -3;
  }
  
  .home-shade {
    position: absolute;
    inset: 0;
  
    background:
      linear-gradient(
        180deg,
        rgba(7, 6, 16, 0.15),
        rgba(7, 6, 16, 0.34) 34%,
        rgba(7, 6, 16, 0.69) 100%
      );
  
    z-index: -2;
  }
  
  
  /* =========================================================
     HOME COPY
  ========================================================= */
  
  .home-copy {
    text-align: center;
  
    position: relative;
    z-index: 2;
  
    width:
      min(
        1120px,
        calc(100% - 48px)
      );
  
    padding:
      calc(var(--header-height) + 85px)
      0
      170px;
  
    transition:
      opacity 0.15s ease;
  }
  
  .home-copy h1 {
    font-size:
      clamp(
        3rem,
        6.25vw,
        6.5rem
      );
  
    font-weight: 800;
  
    margin-bottom: 25px;
  
    text-shadow:
      8px 8px 8px
      rgba(0, 0, 0, 0.45);
  }
  
  .home-copy h1 em {
    color: #B55AFA;
  }
  
  .home-copy > p:last-child {
    font-size:
      clamp(
        1rem,
        1.5vw,
        1.3rem
      );
  
    max-width: 850px;
  
    margin:
      0 auto;
  
    color: #F6F2FA;
  
    text-shadow:
      0 2px 4px rgba(0, 0, 0, 0.9),
      0 4px 12px rgba(0, 0, 0, 0.75),
      0 8px 24px rgba(0, 0, 0, 0.45);
  }
  
  
  /* =========================================================
     HERO CURVE
  ========================================================= */
  
  .hero-convex {
    position: absolute;
  
    bottom: -1px;
    left: 0;
  
    width: 100%;
  
    height:
      clamp(
        90px,
        11vw,
        155px
      );
  
    z-index: 3;
  
    pointer-events: none;
  
    overflow: visible;
  }
  
  .hero-convex svg {
    width: 100%;
    height: 100%;
  
    display: block;
  
    overflow: visible;
  }
  
  
  /* =========================================================
     ABOUT
  ========================================================= */
  
  .about {
    background: #A31FFC;
  
    display: flex;
    align-items: flex-start;
  
    overflow: hidden;
  
    padding:
      clamp(96px, 9vw, 120px)
      0;
  
    margin-top: -1px;
  }
  
  .about::before {
    content: "";
  
    position: absolute;
    inset: 0;
  
    background:
      radial-gradient(
        ellipse at 70% 50%,
        rgba(65, 0, 130, 0.6),
        transparent 58%
      ),
      radial-gradient(
        ellipse at 20% 95%,
        rgba(56, 0, 118, 0.35),
        transparent 55%
      );
  
    pointer-events: none;
  }
  
  .about-orbit {
    position: absolute;
  
    border:
      1px solid
      rgba(255, 255, 255, 0.14);
  
    border-radius: 50%;
  
    pointer-events: none;
  }
  
  .orbit-one {
    width: 1000px;
    height: 700px;
  
    right: -230px;
    top: -180px;
  
    transform:
      rotate(22deg);
  }
  
  .orbit-two {
    width: 1000px;
    height: 600px;
  
    right: -350px;
    bottom: -380px;
  
    transform:
      rotate(-18deg);
  }
  
  
  /* =========================================================
     ABOUT MAIN
  ========================================================= */
  
  .about-main {
    display: grid;
  
    grid-template-columns:
      1.1fr 0.9fr;
  
    align-items: center;
  
    gap: 5vw;
  }
  
  .about-copy h2 {
    font-size:
      clamp(
        2.45rem,
        4vw,
        4.6rem
      );
  
    max-width: 780px;
  
    margin-bottom: 20px;
  }
  
  
  /* P1 contrast */
  
  .about-copy > p:last-child {
    font-size:
      clamp(
        1rem,
        1.2vw,
        1.18rem
      );
  
    color: #FFFFFF;
  
    max-width: 700px;
  }
  
  
  /* =========================================================
     ABOUT BIG LOGO — JS CONTROLS OPACITY
  ========================================================= */
  
  .big-logo {
    width:
      min(
        100%,
        490px
      );
  
    max-height: 340px;
  
    object-fit: contain;
  
    justify-self: center;
  
    opacity: 0;
  
    filter:
      drop-shadow(
        0 22px 35px
        rgba(37, 0, 74, 0.25)
      );
  
    will-change: opacity;

    transition:
        transform 0.32s cubic-bezier(.22, 1, .36, 1),
        filter 0.32s ease;
  }

  .big-logo:hover {
    transform: translateY(-8px) scale(1.06);
  
    filter:
      drop-shadow(
        0 30px 42px
        rgba(37, 0, 74, 0.38)
      );
  }
  
  
  /* =========================================================
     ABOUT VALUES
  ========================================================= */
  
  .values {
    display: grid;
  
    grid-template-columns:
      repeat(4, 1fr);
  
    margin-top:
      clamp(
        50px,
        6vw,
        80px
      );
  }
  
  .value {
    display: flex;
  
    gap: 16px;
  
    padding:
      0 26px;
  
    border-right:
      1px solid
      rgba(255, 255, 255, 0.35);
  }
  
  .value:first-child {
    padding-left: 0;
  }
  
  .value:last-child {
    padding-right: 0;
  
    border-right: 0;
  }
  
  .value-icon {
    display: grid;
    place-items: center;
  
    flex: none;
  
    width: 62px;
    height: 62px;
  
    border-radius: 50%;
  
    border:
      1px solid
      rgba(255, 255, 255, 0.5);
  
    background:
      rgba(255, 255, 255, 0.1);
  
    color: #FFFFFF;
  
    box-shadow:
      inset 0 0 22px
      rgba(255, 255, 255, 0.1);
  }
  
  .feature-svg {
    display: block;
  
    width: 24px;
    height: 24px;
  }
  
  .value h3 {
    font-size: 1.08rem;
  
    line-height: 1.25;
  
    margin:
      6px 0 12px;
  }
  
  
  /* P1 contrast */
  
  .value p {
    color: #FFFFFF;
  
    font-size: 0.9rem;
  
    margin: 0;
  }
  
  
  /* =========================================================
     DARK RUN
  ========================================================= */
  
  .dark-run {
    position: relative;
  
    background: var(--bg);
  
    isolation: isolate;
  
    overflow: hidden;
  }
  
  .ambient {
    position: absolute;
  
    border-radius: 50%;
  
    pointer-events: none;
  
    z-index: -1;
  
    filter: blur(145px);
  }
  
  .ambient-one {
    width: 58vw;
    height: 58vw;
  
    left: -22vw;
    top: 5%;
  
    background: #6D0BD2;
  
    opacity: 0.42;
  }
  
  .ambient-two {
    width: 58vw;
    height: 58vw;
  
    right: -23vw;
    top: 26%;
  
    background: #A31FFC;
  
    opacity: 0.38;
  }
  
  .ambient-three {
    width: 60vw;
    height: 60vw;
  
    left: -20vw;
    top: 49%;
  
    background: #6F2BE0;
  
    opacity: 0.38;
  }
  
  .ambient-four {
    width: 65vw;
    height: 65vw;
  
    right: -25vw;
    top: 76%;
  
    background: #A31FFC;
  
    opacity: 0.3;
  }
  
  
  /* =========================================================
     CONTENT SECTIONS
     P1: no forced full viewport
  ========================================================= */
  
  .content-section {
    display: flex;
    align-items: center;
  
    min-height: 0;
  
    padding:
      clamp(96px, 9vw, 120px)
      0;
  }
  
  .section-heading {
    max-width: 770px;
  
    margin-bottom: 48px;
  }
  
  .section-heading h2,
  .split h2 {
    font-size:
      clamp(
        2.9rem,
        5vw,
        5.8rem
      );
  
    margin-bottom: 25px;
  }
  
  .section-heading > p:last-child,
  .split-copy > p:not(.eyebrow) {
    font-size: 1.15rem;
  
    color: var(--muted);
  
    max-width: 680px;
  }
  
  
  /* =========================================================
     SOLUTIONS
  ========================================================= */
  
  .solution-grid {
    display: grid;
  
    grid-template-columns:
      repeat(3, 1fr);
  
    gap: 22px;
  }
  
  .solution-card {
    min-height: 238px;
  
    border-radius: 24px;
  
    background: var(--card);
  
    border:
      1.5px solid
      var(--stroke);
  
    padding: 34px;
  
    box-shadow:
      0 8px 24px
      rgba(123, 47, 190, 0.15);
  
    transition:
      transform 0.3s
        cubic-bezier(.2, .8, .2, 1),
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }
  
  .solution-card:hover {
    transform:
      translateY(-8px);
  
    border-color: #8B5CF6;
  
    box-shadow:
      0 22px 45px
      rgba(123, 47, 190, 0.3);
  }
  
  
  /* =========================================================
     UNIFIED SOLUTION ICONS
  ========================================================= */
  
  .card-icon {
    display: inline-grid;
  
    place-items: center;
  
    width: 48px;
    height: 48px;
  
    border-radius: 13px;
  
    color: #D5ADFF;
  
    background: #27153F;
  
    margin-bottom: 24px;
  }
  
  .card-icon .feature-svg {
    width: 24px;
    height: 24px;
  }
  
  .solution-card h3 {
    font-size: 1.23rem;
  
    margin-bottom: 13px;
  }
  
  .solution-card p {
    color: var(--muted);
  
    font-size: 0.96rem;
  
    margin: 0;
  }
  
  
  /* =========================================================
     PARTNERS / CAREERS
  ========================================================= */
  
  .split {
    display: grid;
  
    grid-template-columns:
      1fr 1fr;
  
    align-items: center;
  
    gap:
      clamp(
        40px,
        7vw,
        120px
      );
  }
  
  .split-copy {
    max-width: 630px;
  }
  
  .picture-frame {
    position: relative;
  
    border-radius: 24px;
  
    border:
      1.5px solid
      var(--stroke);
  
    background: #120E25;
  
    box-shadow:
      0 8px 24px
      rgba(123, 47, 190, 0.15);
  
    aspect-ratio: 1.22;
  
    overflow: hidden;
  }
  
  .picture-frame img {
    width: 100%;
    height: 100%;
  
    object-fit: cover;
  }
  
  .picture-frame::after {
    content: "";
  
    position: absolute;
  
    inset: 30% 0 0;
  
    background:
      linear-gradient(
        transparent,
        rgba(11, 8, 19, 0.6)
      );
  
    pointer-events: none;
  }
  
  .picture-label {
    position: absolute;
  
    z-index: 1;
  
    bottom: 28px;
    left: 28px;
  
    font-size: 0.76rem;
  
    letter-spacing: 0.18em;
  
    font-weight: 700;
  }
  
  
  /*
     Partners + Careers motion
     is controlled directly by JS.
  */
  
  #partners .split-copy,
  #partners .picture-frame,
  #careers .split-copy,
  #careers .picture-frame {
    transition: none;
  
    will-change:
      transform,
      opacity;
  }
  
  
  /* =========================================================
     CORPORATE INFORMATION
  ========================================================= */
  
  .closing-section {
    position: relative;
  }
  
  .corporate {
    min-height: 0;
  
    background:
      linear-gradient(
        135deg,
        #140D23,
        #0B0813 80%
      );
  
    color: #FFFFFF;
  
    padding:
      clamp(96px, 9vw, 120px)
      0;
  }
  
  .corporate .eyebrow {
    color: #BB90F7;
  
    margin-bottom: 14px;
  
    font-size: 0.73rem;
  
    letter-spacing: 0.13em;
  }
  
  .corporate-head {
    display: flex;
  
    justify-content: space-between;
    align-items: end;
  
    gap: 40px;
  
    margin-bottom: 40px;
  }
  
  .corporate-head h2 {
    font-size:
      clamp(
        2rem,
        3.25vw,
        3.5rem
      );
  
    margin: 0;
  
    letter-spacing: -0.045em;
  }
  
  .corporate-head > p {
    max-width: 300px;
  
    text-align: right;
  
    margin: 0;
  
    color: #C9BDD8;
  
    font-size: 1rem;
  }
  
  .corporate-head strong {
    color: #B58CFF;
  }
  
  .corporate-facts-grid {
    display: grid;
  
    grid-template-columns:
      1fr 1fr;
  
    gap: 16px;
  }
  
  .corporate-fact {
    background: #120E25;
  
    border:
      1.5px solid
      #3B2E6F;
  
    color: #FFFFFF;
  
    box-shadow:
      0 8px 24px
      rgba(123, 47, 190, 0.15);
  
    border-radius: 20px;
  
    padding:
      clamp(
        18px,
        2vw,
        28px
      );
  
    display: flex;
    flex-direction: column;
  
    gap: 12px;
  }
  
  .corporate-fact > span:first-child {
    color: #C7A4F7;
  
    font-size: 0.76rem;
  
    font-weight: 800;
  
    letter-spacing: 0.04em;
  }
  
  .corporate-fact strong {
    color: #F9F5FF;
  
    font-size:
      clamp(
        0.98rem,
        1.1vw,
        1.15rem
      );
  
    font-weight: 650;
  
    line-height: 1.5;
  }
  
  .office-fact {
    grid-column: 1 / -1;
  }
  
  
  /* =========================================================
     COPY ADDRESS BUTTON
  ========================================================= */
  
  .office-address-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .office-address-row strong {
    flex: 0 1 auto;
  }
  
  .copy-address {
    flex: none;
  
    display: inline-grid;
    place-items: center;
  
    width: 32px;
    height: 32px;
  
    padding: 0;
  
    border: 0;
    border-radius: 7px;
  
    background: transparent;
    color: #C7A4F7;
  
    cursor: pointer;
  
    transition:
      color 0.2s ease,
      background 0.2s ease,
      transform 0.2s ease;
  }
  
  .copy-address:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
  }
  
  .copy-address svg {
    display: block;
  }
  
  .copy-feedback {
    min-height: 1em;
    color: #C9BDD8;
    font-size: 0.72rem;
  }
  
  
  /* =========================================================
     BILLING
  ========================================================= */
  
  .billing-note {
    color: #C9BDD8;
  
    margin:
      24px 0 0;
  
    font-size: 0.92rem;
  }
  
  .billing-note a {
    color: #D3B2FF;
  
    text-decoration: underline;
  
    text-underline-offset: 3px;
  }
  
  
  /* =========================================================
     BUSINESS ENQUIRIES
     P1: deliberate compact closing band
  ========================================================= */
  
  .enquiries {
    min-height: 0;
  
    display: block;
  
    background: #1B102A;
  
    padding:
      42px 0 0;
  }
  
  .enquiry-layout {
    display: grid;
  
    grid-template-columns:
      minmax(0, 1.4fr)
      minmax(0, 0.6fr);
  
    align-items: center;
  
    gap:
      clamp(
        30px,
        5vw,
        90px
      );
  }
  
  .enquiry-message h2 {
    font-size:
      clamp(
        1.25rem,
        1.75vw,
        1.7rem
      );
  
    line-height: 1.2;
  
    letter-spacing: -0.025em;
  
    margin:
      0 0 8px;
  }
  
  .enquiry-message p {
    font-size:
      clamp(
        0.9rem,
        1vw,
        1rem
      );
  
    line-height: 1.5;
  
    color: #E2D8EE;
  
    margin:
      0 0 12px;
  }
  
  .enquiry-message .pill-button {
    margin: 0;
  
    padding:
      11px 20px;
  
    font-size: 0.85rem;
  }
  
  .enquiry-details {
    display: flex;
  
    flex-direction: column;
  
    gap: 6px;
  
    font-size: 0.92rem;
  }
  
  .enquiry-details .eyebrow {
    color: #C19BDC;
  
    margin:
      0 0 4px;
  
    font-size: 0.72rem;
  
    letter-spacing: 0.09em;
  }
  
  .enquiry-details a {
    color: #D6C9E2;
    text-underline-offset: 4px;
  }
  
  .enquiry-details span {
    color: #D6C9E2;
  }
  
  
  /* =========================================================
     FOOTER
  ========================================================= */
  
  .enquiries footer {
    position: relative;
  
    margin-top:
      clamp(
        28px,
        4vh,
        48px
      );
  
    padding:
      18px
      clamp(
        22px,
        4.5vw,
        76px
      );
  
    border-top:
      1px solid
      rgba(255, 255, 255, 0.13);
  
    display: flex;
  
    align-items: center;
  
    justify-content: space-between;
  
    gap: 15px;
  
    flex-wrap: wrap;
  
    color: #BDAECB;
  
    font-size: 0.78rem;
  }
  
  
  /* =========================================================
     STANDARD REVEAL
  ========================================================= */
  
  .reveal {
    opacity: 0;
  
    transform:
      translateY(48px);
  
    transition:
      opacity 0.8s ease,
      transform 0.8s
        cubic-bezier(.2, .8, .2, 1);
  }
  
  .reveal.in-view {
    opacity: 1;
  
    transform:
      translateY(0);
  }
  
  
  /* =========================================================
     STAGGER
  ========================================================= */
  
  .values .value:nth-child(2),
  .solution-grid .solution-card:nth-child(2) {
    transition-delay: 0.09s;
  }
  
  .values .value:nth-child(3),
  .solution-grid .solution-card:nth-child(3) {
    transition-delay: 0.18s;
  }
  
  .values .value:nth-child(4) {
    transition-delay: 0.27s;
  }
  
  .solution-grid .solution-card:nth-child(5) {
    transition-delay: 0.09s;
  }
  
  .solution-grid .solution-card:nth-child(6) {
    transition-delay: 0.18s;
  }
  
  
  /* =========================================================
     KEYBOARD FOCUS
  ========================================================= */
  
  .site-header a:focus-visible,
  .site-header button:focus-visible,
  .mobile-nav a:focus-visible,
  .pill-button:focus-visible,
  .copy-address:focus-visible,
  .enquiries a:focus-visible,
  .billing-note a:focus-visible,
  footer a:focus-visible {
    outline:
      2px solid
      #FFFFFF;
  
    outline-offset: 4px;
  }
  
  
  /* =========================================================
     MEDIUM DESKTOP
  ========================================================= */
  
  @media (max-width: 1100px) {
  
    .section-inner {
      width:
        min(
          calc(100% - 60px),
          1320px
        );
    }
  
    .brand {
      gap: 7px;
    }
  
    .brand span {
      font-size: 0.82rem;
    }
  
    .desktop-nav {
      gap: 14px;
    }
  
    .nav-link {
      font-size: 0.69rem;
    }
  
    .header-cta {
      padding:
        12px 15px;
  
      font-size: 0.8rem;
    }
  
    .about-main {
      gap: 25px;
    }
  
    .value {
      padding:
        0 16px;
    }
  
  }
  
  
  /* =========================================================
     MOBILE / TABLET
  ========================================================= */
  
  @media (max-width: 800px) {
  
    :root {
      --header-height: 68px;
    }
  
  
    /* HEADER */
  
    .site-header {
      padding:
        0 20px;
    }
  
    .brand img {
      width: 40px;
      height: 40px;
    }
  
    .desktop-nav,
    .header-cta {
      display: none;
    }
  
  
    /* HAMBURGER */
  
    .menu-toggle {
      display: flex;
  
      flex-direction: column;
  
      justify-content: center;
  
      gap: 5px;
  
      width: 40px;
      height: 40px;
  
      padding: 8px;
  
      border: 0;
  
      background: none;
  
      cursor: pointer;
    }
  
    .menu-toggle span {
      width: 24px;
      height: 2px;
  
      background: #FFFFFF;
  
      border-radius: 2px;
    }
  
  
    /* MOBILE MENU */
  
    .mobile-nav {
      display: flex;
  
      position: absolute;
  
      top: var(--header-height);
      left: 0;
      right: 0;
  
      background:
        rgba(19, 10, 32, 0.98);
  
      backdrop-filter:
        blur(20px);
  
      -webkit-backdrop-filter:
        blur(20px);
  
      flex-direction: column;
  
      padding:
        12px 22px 25px;
  
      box-shadow:
        0 15px 25px
        rgba(0, 0, 0, 0.3);
    }
  
    .mobile-nav[hidden] {
      display: none;
    }
  
    .mobile-nav a {
      position: relative;
  
      padding:
        13px 8px;
  
      border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);
  
      color: #E3DCE9;
  
      transition:
        color 0.2s ease,
        background 0.2s ease;
    }
  
    .mobile-nav a:hover {
      color: #FFFFFF;
  
      background:
        rgba(139, 92, 246, 0.08);
    }
  
  
    /*
       Current visible / clicked section
    */
  
    .mobile-nav a.is-active {
      color: #E3D2FF;
  
      font-weight: 700;
  
      background:
        rgba(139, 92, 246, 0.12);
    }
  
    .mobile-nav a.is-active::before {
      content: "";
  
      position: absolute;
  
      left: 0;
      top: 50%;
  
      width: 3px;
      height: 22px;
  
      border-radius: 3px;
  
      background: #B58AFF;
  
      transform:
        translateY(-50%);
    }
  
  
    /* GENERAL */
  
    .section-inner {
      width:
        calc(100% - 42px);
    }
  
  
    /* HOME */
  
    .home-image {
      background-attachment: scroll;
  
      background-position:
        center 18%;
    }
  
    .home-copy {
      padding:
        130px 0
        155px;
    }
  
    .home-copy h1 {
      font-size:
        clamp(
          2.65rem,
          8.5vw,
          4.8rem
        );
    }
  
    .hero-convex {
      height:
        clamp(
          85px,
          15vw,
          125px
        );
    }
  
  
    /* ABOUT */
  
    .about {
      min-height: 0;
  
      padding:
        96px 0;
    }
  
    .about-main,
    .split {
      grid-template-columns: 1fr;
  
      gap: 35px;
    }
  
    .big-logo {
      width:
        min(
          72%,
          300px
        );
    }
  
    .values {
      grid-template-columns:
        repeat(2, 1fr);
  
      row-gap: 34px;
  
      margin-top: 55px;
    }
  
    .value {
      flex-direction: column;
  
      gap: 10px;
    }
  
    .value:nth-child(2) {
      border-right: 0;
    }
  
    .value:nth-child(3) {
      padding-left: 0;
    }
  
  
    /* CONTENT */
  
    .content-section {
      min-height: 0;
  
      padding:
        96px 0;
    }
  
    .solution-grid {
      grid-template-columns:
        repeat(2, 1fr);
    }
  
  
    /* CAREERS */
  
    .careers-split .picture-frame {
      order: 2;
    }
  
    .careers-split .split-copy {
      order: 1;
    }
  
  
    /* CORPORATE */
  
    .corporate {
      padding:
        96px 0;
    }
  
    .corporate-head {
      flex-direction: column;
  
      align-items: flex-start;
  
      gap: 12px;
    }
  
    .corporate-head > p {
      text-align: left;
    }
  
  
    /* ENQUIRIES */
  
    .enquiry-layout {
      grid-template-columns:
        minmax(0, 1.35fr)
        minmax(0, 1fr);
  
      gap:
        clamp(
          18px,
          3vw,
          40px
        );
    }
  
    .enquiry-layout > * {
      min-width: 0;
    }
  
    .enquiry-details a {
      overflow-wrap: anywhere;
    }
  
  }
  
  
  /* =========================================================
     PHONE
  ========================================================= */
  
  @media (max-width: 520px) {
  
    .brand {
      font-size: 0.8rem;
  
      gap: 8px;
    }
  
    .brand span {
      font-size: 0.8rem;
    }
  
  
    /* =====================================================
       P1 — INTENTIONAL MOBILE HERO BREAK
    ===================================================== */
  
    .home-copy {
      width:
        calc(100% - 32px);
  
      padding:
        120px 0
        135px;
    }
  
    .home-copy h1 {
      font-size:
        clamp(
          2.15rem,
          10.3vw,
          3.1rem
        );
  
      line-height: 1.06;
  
      letter-spacing: -0.055em;
    }
  
    /*
       First line:
       Technology That Drives
  
       Second line:
       Business Forward
    */
  
    .hero-desktop-break {
      display: block;
    }
  
    .hero-final-phrase {
      white-space: nowrap;
    }
  
    .home-copy > p:last-child {
      font-size: 0.97rem;
    }
  
    .hero-convex {
      height: 92px;
    }

    @media (max-width: 520px) {
        .hero-desktop-break {
          display: none;
        }
      
        #home-title em {
          white-space: nowrap;
        }
      
        .hero-final-phrase {
          display: block;
          white-space: nowrap;
        }
      }
  
  
    /* ABOUT */
  
    .about {
      padding:
        84px 0;
    }
  
    .about-copy h2,
    .section-heading h2,
    .split h2 {
      font-size:
        clamp(
          2.15rem,
          8.3vw,
          2.9rem
        );
    }
  
    .values {
      grid-template-columns: 1fr;
  
      gap: 25px;
  
      margin-top: 42px;
    }
  
    .value,
    .value:first-child,
    .value:nth-child(3),
    .value:last-child {
      flex-direction: row;
  
      border: 0;
  
      border-bottom:
        1px solid
        rgba(255, 255, 255, 0.25);
  
      padding:
        0 0 20px;
    }
  
    .value-icon {
      width: 54px;
      height: 54px;
    }
  
  
    /* SOLUTIONS */
  
    .content-section {
      padding:
        84px 0;
    }
  
    .solution-grid {
      grid-template-columns: 1fr;
    }
  
    .solution-card {
      min-height: 0;
    }
  
    .picture-frame {
      aspect-ratio: 1.05;
    }
  
  
    /* CORPORATE */
  
    .corporate {
      padding:
        84px 0;
    }
  
    .corporate-facts-grid {
      grid-template-columns: 1fr;
    }
  
    .office-fact {
      grid-column: auto;
    }
  
    .corporate-fact {
      padding: 22px;
    }
  
  
    /* ENQUIRIES */
  
    .enquiries {
      padding:
        34px 0 0;
    }
  
    .enquiry-layout {
      grid-template-columns: 1fr;
  
      gap: 28px;
    }
  
    .enquiries footer {
      margin-top: 32px;
  
      font-size: 0.7rem;
    }
  
  }
  
  
  /* =========================================================
     VERY SMALL PHONE
  ========================================================= */
  
  @media (max-width: 390px) {
  
    .home-copy h1 {
      font-size:
        clamp(
          2rem,
          10vw,
          2.55rem
        );
    }
  
    .hero-final-phrase {
      white-space: nowrap;
    }
  
  }
  
  
  /* =========================================================
     REDUCED MOTION
  ========================================================= */
  
  @media (prefers-reduced-motion: reduce) {
  
    html {
      scroll-behavior: auto;
    }
  
    *,
    *::before,
    *::after {
      animation-duration:
        0.01ms !important;
  
      transition-duration:
        0.01ms !important;
    }
  
    .reveal {
      opacity: 1;
  
      transform: none;
    }
  
    .big-logo {
      opacity: 1 !important;
  
      will-change: auto;
    }
  
    #partners .split-copy,
    #partners .picture-frame,
    #careers .split-copy,
    #careers .picture-frame {
      opacity: 1 !important;
  
      transform: none !important;
  
      will-change: auto;
    }
  
    .solution-card:hover {
      transform: none;
    }
  
  }

  /* =========================================================
   WHAT WE DO — RESTORE PREVIOUS SIZE ONLY
   Do not change any other section
========================================================= */

#solutions .section-heading {
    margin-bottom: 30px;
  }
  
  #solutions .section-heading h2 {
    font-size: clamp(2.4rem, 3.85vw, 4.4rem);
    margin-bottom: 20px;
  }
  
  #solutions .section-heading > p:last-child {
    font-size: clamp(1rem, 1.15vw, 1.12rem);
  }
  
  
  /* Previous What We Do card dimensions */
  
  #solutions .solution-card {
    min-height: 185px;
    padding: clamp(22px, 2vw, 29px);
  }
  
  #solutions .card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
  }
  
  #solutions .card-icon .feature-svg {
    width: 24px;
    height: 24px;
  }
  
  #solutions .solution-card h3 {
    font-size: 1.12rem;
    margin-bottom: 10px;
  }
  
  #solutions .solution-card p {
    font-size: 0.91rem;
  }
  
  
  /* Tablet — preserve existing 2-column layout */
  
  @media (max-width: 800px) {
  
    #solutions .section-heading h2 {
      font-size: clamp(2.3rem, 6vw, 3.6rem);
    }
  
    #solutions .solution-card {
      min-height: 0;
    }
  
  }
  
  
  /* Mobile — preserve existing 1-column layout */
  
  @media (max-width: 520px) {
  
    #solutions .section-heading h2 {
      font-size: clamp(2.15rem, 8.3vw, 2.9rem);
    }
  
  }

  #solutions .solution-card:hover,
  #solutions .solution-card.reveal.in-view:hover {
    transform: translateY(-12px) scale(1.018);

    border-color: #8B5CF6;

    box-shadow:
        0 22px 45px
        rgba(123, 47, 190, 0.30);
    }