@charset "UTF-8";

/* =========================================================
   MEMBUMI CONSULTING
   Responsive System
   File: assets/css/responsive.css
   ========================================================= */


/* =========================================================
   01. GLOBAL RESPONSIVE SAFETY
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

main,
section,
header,
footer,
.site-header,
.site-footer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.container,
.container--wide,
.container--narrow,
.site-header__inner,
.site-nav,
.site-nav__list,
.grid,
.split,
.stack,
.cluster,
.media-frame,
.card,
.stat,
.site-footer__top,
.site-footer__bottom {
  min-width: 0;
}

img,
svg,
video,
canvas,
picture,
figure {
  max-width: 100%;
}


/* =========================================================
   02. LARGE DESKTOP
   1600px and above
   ========================================================= */

@media (min-width: 1600px) {
  :root {
    --container-width: 1440px;
    --container-wide: 1660px;
    --header-height: 88px;
  }

  .site-header__brand img {
    width: 194px;
  }

  .site-nav__list {
    gap: 1.15rem;
  }

  .site-nav__link {
    font-size: 0.86rem;
  }

  .site-nav__item--cta .btn {
    min-height: 46px;
    padding-inline: 1.25rem;
  }
}


/* =========================================================
   03. STANDARD DESKTOP
   Maximum 1440px
   ========================================================= */

@media (max-width: 1440px) {
  :root {
    --container-width: 1320px;
    --container-wide: 1440px;
    --container-padding: clamp(1.5rem, 3vw, 3rem);
    --header-height: 84px;
  }

  .site-header__inner {
    gap: clamp(1rem, 2vw, 1.75rem);
  }

  .site-header__brand img {
    width: 184px;
  }

  .site-header.is-scrolled .site-header__brand img {
    width: 174px;
  }

  .site-nav__list {
    gap: clamp(0.7rem, 1vw, 1rem);
  }

  .site-nav__link {
    font-size: 0.81rem;
  }

  .site-nav__item--cta .btn {
    min-height: 43px;
    padding-inline: 1.05rem;
    font-size: 0.8rem;
  }

  .site-footer__top {
    grid-template-columns:
      minmax(250px, 1.15fr) repeat(3, minmax(135px, 0.62fr));
    gap: clamp(2rem, 4vw, 4rem);
  }
}


/* =========================================================
   04. SMALL DESKTOP / LAPTOP
   Maximum 1280px
   ========================================================= */

@media (max-width: 1280px) {
  :root {
    --container-width: 1180px;
    --header-height: 80px;
  }

  .site-header.is-scrolled {
    min-height: 70px;
  }

  .site-header__inner {
    gap: 1rem;
  }

  .site-header__brand img {
    width: 174px;
  }

  .site-header.is-scrolled .site-header__brand img {
    width: 164px;
  }

  .site-nav__list {
    gap: 0.7rem;
  }

  .site-nav__link {
    min-height: 40px;
    font-size: 0.78rem;
  }

  .site-nav__item--cta {
    margin-left: 0.1rem;
  }

  .site-nav__item--cta .btn {
    min-height: 42px;
    padding-inline: 0.95rem;
    font-size: 0.78rem;
  }

  .split {
    gap: clamp(2.5rem, 5vw, 5rem);
  }

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

  .site-footer__top {
    grid-template-columns:
      minmax(250px, 1.2fr) repeat(3, minmax(130px, 0.7fr));
    gap: clamp(2rem, 3vw, 3rem);
  }
}


/* =========================================================
   05. NAVIGATION COLLAPSE
   Maximum 1180px
   Must stay aligned with main.js breakpoint
   ========================================================= */

@media (max-width: 1180px) {
  :root {
    --header-height: 78px;
  }

  .site-header {
    position: sticky;
  }

  .site-header__inner {
    gap: var(--space-4);
  }

  .site-header__brand img {
    width: 178px;
    max-height: 54px;
  }

  .site-header.is-scrolled .site-header__brand img {
    width: 168px;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-overlay);

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    width: min(420px, 100%);
    max-width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    padding:
      calc(var(--header-height) + 1.5rem) clamp(1.25rem, 4vw, 2rem) max(1.5rem, env(safe-area-inset-bottom));

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    background-color: var(--color-white);
    border-left: 1px solid var(--color-border);
    box-shadow: -20px 0 60px rgba(43, 0, 53, 0.15);

    transform: translate3d(100%, 0, 0);

    transition:
      visibility var(--transition-base),
      opacity var(--transition-base),
      transform var(--transition-slow);
  }

  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  .site-nav__list {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.35rem;
    width: 100%;
  }

  .site-nav__item {
    width: 100%;
  }

  .site-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);

    width: 100%;
    min-height: 54px;
    padding: 0.82rem 0.95rem;

    font-size: 0.96rem;
    font-weight: var(--font-semibold);
    line-height: 1.3;
    text-align: left;

    color: var(--color-text-dark);
    background-color: transparent;
    border-radius: var(--radius-md);
  }

  button.site-nav__link {
    justify-content: space-between;
  }

  .site-nav__link::after {
    display: none;
  }

  .site-nav__link:hover,
  .site-nav__link:focus-visible,
  .site-nav__item.is-parent-active>.site-nav__link,
  .site-nav__item:has(.nav-dropdown__link.is-active)>.site-nav__link {
    color: var(--color-primary);
    background-color: var(--color-lilac-light);
  }

  .site-nav__link.is-active {
    color: var(--color-white);
    background-color: var(--color-primary);
  }

  .site-nav__link.is-active .site-nav__chevron {
    color: var(--color-white);
  }

  .site-nav__chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .site-nav__item.is-open>.site-nav__link .site-nav__chevron,
  .site-nav__item:focus-within>.site-nav__link .site-nav__chevron {
    transform: rotate(180deg);
  }

  /*
   * Mobile dropdown memakai document flow.
   * Semua posisi desktop di-reset agar submenu tidak melompat
   * ke bawah menu Lainnya/Kontak.
   */
  .site-nav__item--dropdown {
    overflow: visible;
  }

  .site-nav__item--dropdown>.nav-dropdown {
    position: static;
    inset: auto;

    display: grid;
    grid-template-rows: 0fr;

    width: 100%;
    min-width: 0;
    max-height: none;
    margin: 0;
    padding: 0;

    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    transform: none;

    transition:
      grid-template-rows 260ms cubic-bezier(0.22, 1, 0.36, 1),
      margin-top 260ms ease,
      opacity 180ms ease,
      visibility 180ms ease;
  }

  .site-nav__item--dropdown>.nav-dropdown::before {
    display: none;
  }

  .site-nav__item--dropdown>.nav-dropdown>.nav-dropdown__list {
    min-height: 0;
    padding: 0;
    overflow: hidden;

    background-color: var(--color-cream-light);
    border: 0 solid var(--color-border-light);
    border-radius: var(--radius-md);
  }

  /*
   * Selector ini sengaja lebih spesifik dari rule desktop:
   * .site-nav__item.is-open .nav-dropdown
   * agar transform translate(-50%) desktop benar-benar hilang.
   */
  .site-nav__item--dropdown.is-open>.nav-dropdown {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    grid-template-rows: 1fr;

    width: 100%;
    margin-top: 0.45rem;

    visibility: visible;
    opacity: 1;
    pointer-events: auto;

    transform: none;
  }

  .site-nav__item--dropdown.is-open>.nav-dropdown>.nav-dropdown__list {
    padding: 0.42rem;
    border-width: 1px;
  }

  .site-nav__item--dropdown>.nav-dropdown .nav-dropdown__list {
    width: 100%;
    gap: 0.15rem;
  }

  .site-nav__item--dropdown>.nav-dropdown .nav-dropdown__link {
    width: 100%;
    min-height: 44px;
    padding: 0.72rem 0.8rem;

    font-size: 0.86rem;
    color: var(--color-text-dark);
    background-color: transparent;
    border-radius: 10px;
  }

  .site-nav__item--dropdown>.nav-dropdown .nav-dropdown__link:hover,
  .site-nav__item--dropdown>.nav-dropdown .nav-dropdown__link:focus-visible,
  .site-nav__item--dropdown>.nav-dropdown .nav-dropdown__link.is-active {
    color: var(--color-primary);
    background-color: var(--color-lilac-light);
  }

  .site-nav__item--dropdown>.nav-dropdown .nav-dropdown__link span[aria-hidden="true"] {
    flex: 0 0 auto;
    color: var(--color-orange);
  }

  .nav-dropdown__link:hover,
  .nav-dropdown__link:focus-visible,
  .nav-dropdown__link.is-active {
    transform: none;
  }

  .site-nav__item--cta {
    position: static;
    flex-shrink: 0;

    margin: 0.75rem 0 0;
    padding-top: 0.9rem;

    border-top: 1px solid var(--color-border-light);
  }

  .site-nav__item--cta .btn {
    width: 100%;
    min-height: 50px;
    padding-inline: 1.25rem;
    font-size: 0.9rem;
  }

  .menu-toggle {
    position: relative;
    z-index: calc(var(--z-overlay) + 2);
    display: inline-flex;
    flex: 0 0 auto;
  }

  .nav-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) - 1);

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    background-color: rgba(43, 0, 53, 0.46);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    transition:
      visibility var(--transition-base),
      opacity var(--transition-base);
  }

  .nav-overlay.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav__item:hover .nav-dropdown {
    visibility: visible;
    opacity: 1;
  }
}


/* =========================================================
   06. TABLET LANDSCAPE
   Maximum 1024px
   ========================================================= */

@media (max-width: 1024px) {
  :root {
    --container-padding: clamp(1.25rem, 4vw, 2.25rem);
    --text-3xl: 1.8rem;
    --text-4xl: 2.35rem;
    --text-5xl: 3.1rem;
    --text-6xl: 4rem;
  }

  .section {
    padding-block: clamp(5rem, 10vw, 7rem);
  }

  .section--compact {
    padding-block: clamp(3.5rem, 8vw, 5rem);
  }

  .section--large {
    padding-block: clamp(5.5rem, 11vw, 8rem);
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 4.5rem);
  }

  .split>* {
    width: 100%;
    min-width: 0;
  }

  .split--reverse> :first-child {
    order: 2;
  }

  .split--reverse> :last-child {
    order: 1;
  }

  .split .media-frame {
    width: min(100%, 760px);
    margin-inline: auto;
  }

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

  .section__header {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
  }

  .quote-card {
    padding: clamp(2rem, 6vw, 3.5rem);
  }

  .quote-card::after {
    right: -55px;
    bottom: -55px;
    width: 140px;
    height: 140px;
  }

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

  .form-group--full {
    grid-column: auto;
  }

  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem clamp(2rem, 6vw, 4rem);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__description {
    max-width: 620px;
  }
}


/* =========================================================
   07. TABLET PORTRAIT
   Maximum 820px
   ========================================================= */

@media (max-width: 820px) {
  :root {
    --header-height: 74px;
  }

  html {
    scroll-padding-top: calc(var(--header-height) + 18px);
  }

  .site-header.is-scrolled {
    min-height: 68px;
  }

  .site-header__brand img {
    width: 166px;
    max-height: 50px;
  }

  .site-header.is-scrolled .site-header__brand img {
    width: 158px;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
  }

  .container,
  .container--wide,
  .container--narrow {
    width: calc(100% - (var(--container-padding) * 2));
    max-width: 100%;
  }

  .display-title {
    max-width: 760px;
  }

  .text-lead {
    font-size: clamp(1.04rem, 2.5vw, 1.22rem);
  }

  .section__header {
    max-width: 760px;
  }

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

  .card {
    padding: clamp(1.4rem, 4vw, 2rem);
  }

  .card__number {
    width: 52px;
    height: 52px;
  }

  .media-frame--wide {
    aspect-ratio: 16 / 9;
  }

  .site-footer::before {
    top: -150px;
    right: -170px;
    width: 360px;
    height: 360px;
    border-width: 58px;
  }

  .site-footer__logo {
    width: min(200px, 100%) !important;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .floating-whatsapp {
    right: 1rem;
    bottom: 1rem;
    min-width: 54px;
    min-height: 54px;
  }

  .floating-whatsapp__label {
    display: none;
  }
}


/* =========================================================
   08. MOBILE
   Maximum 640px
   ========================================================= */

@media (max-width: 640px) {
  :root {
    --container-padding: 1.15rem;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --heading-hero: clamp(2.7rem, 12.6vw, 4rem);
    --heading-section: clamp(2rem, 9.6vw, 3rem);
    --heading-card: clamp(1.32rem, 5.8vw, 1.72rem);
  }

  body {
    font-size: 0.96rem;
  }

  .site-header__inner {
    gap: var(--space-3);
  }

  .site-header__brand img {
    width: 156px;
  }

  .site-header.is-scrolled .site-header__brand img {
    width: 150px;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
  }

  .menu-toggle svg {
    width: 20px;
    height: 20px;
  }

  .site-nav {
    width: 100%;
    max-width: none;
    padding:
      calc(var(--header-height) + 1.15rem) 1.1rem max(1.25rem, env(safe-area-inset-bottom));
    border-left: 0;
  }

  .site-nav__link {
    min-height: 52px;
    padding: 0.8rem 0.9rem;
    font-size: 0.94rem;
  }


  .nav-dropdown__link {
    min-height: 44px;
    padding: 0.72rem 0.75rem;
    font-size: 0.85rem;
  }

  .section {
    padding-block: 4.5rem;
  }

  .section--compact {
    padding-block: 3.25rem;
  }

  .section--large {
    padding-block: 5.5rem;
  }

  .section__header {
    margin-bottom: 2.4rem;
  }

  .section__header .text-lead {
    margin-top: var(--space-5);
  }

  .display-title {
    line-height: 0.98;
  }

  .section-title {
    line-height: 1.03;
  }

  .text-lead {
    font-size: 1.03rem;
    line-height: 1.65;
  }

  .eyebrow {
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: 0.68rem;
  }

  .eyebrow::before {
    width: 22px;
  }

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

  .cluster {
    align-items: stretch;
  }

  .cluster .btn {
    width: 100%;
  }

  .btn {
    min-height: 50px;
    padding: 0.85rem 1.2rem;
  }

  .btn--lg {
    min-height: 54px;
    padding: 0.95rem 1.35rem;
  }

  .card {
    padding: 1.4rem;
  }

  .card:hover {
    transform: none;
  }

  .card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-5);
  }

  .card__number {
    width: 50px;
    height: 50px;
    margin-bottom: var(--space-5);
  }

  .card__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .media-frame--portrait {
    aspect-ratio: 4 / 5;
  }

  .media-frame--landscape,
  .media-frame--wide {
    aspect-ratio: 4 / 3;
  }

  .media-frame:hover img {
    transform: none;
  }

  .quote-card {
    padding: 1.7rem;
  }

  .quote-card::after {
    right: -40px;
    bottom: -40px;
    width: 108px;
    height: 108px;
  }

  .quote-card__mark {
    font-size: 3rem;
  }

  .quote-card__text {
    font-size: clamp(1.62rem, 7.8vw, 2.25rem);
  }

  .quote-card__source {
    margin-top: var(--space-6);
  }

  .stat {
    padding-block: var(--space-5);
  }

  .stat__value {
    font-size: clamp(2.4rem, 12vw, 3.5rem);
  }

  .form {
    gap: var(--space-5);
  }

  .form-grid {
    gap: var(--space-4);
  }

  .form-control {
    min-height: 52px;
  }

  textarea.form-control {
    min-height: 140px;
  }

  .breadcrumb {
    font-size: 0.78rem;
  }

  .decorative-orb,
  .decorative-ring {
    transform: scale(0.72);
  }

  .site-footer {
    padding-top: 4.25rem;
  }

  .site-footer::before {
    top: -125px;
    right: -175px;
    width: 305px;
    height: 305px;
    border-width: 46px;
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.35rem;
  }

  .site-footer__brand {
    grid-column: auto;
  }

  .site-footer__logo {
    width: min(184px, 100%) !important;
    padding: 7px 9px !important;
  }

  .site-footer__description {
    max-width: 100%;
  }

  .site-footer__bottom {
    padding-block: var(--space-5);
  }

  .site-footer__legal {
    flex-direction: column;
    gap: var(--space-2);
  }

  .floating-whatsapp {
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    border-radius: 50%;
  }
}


/* =========================================================
   09. SMALL MOBILE
   Maximum 420px
   ========================================================= */

@media (max-width: 420px) {
  :root {
    --container-padding: 1rem;
    --header-height: 70px;
    --heading-hero: clamp(2.45rem, 12.8vw, 3.35rem);
    --heading-section: clamp(1.9rem, 10vw, 2.62rem);
  }

  .site-header.is-scrolled {
    min-height: 64px;
  }

  .site-header__brand img {
    width: 142px;
  }

  .site-header.is-scrolled .site-header__brand img {
    width: 137px;
  }

  .menu-toggle {
    width: 40px;
    height: 40px;
  }

  .site-nav {
    padding:
      calc(var(--header-height) + 1rem) 0.9rem max(1rem, env(safe-area-inset-bottom));
  }

  .site-nav__link {
    min-height: 50px;
    padding-inline: 0.8rem;
    font-size: 0.92rem;
  }


  .display-title {
    letter-spacing: -0.045em;
  }

  .section-title {
    letter-spacing: -0.03em;
  }

  .text-lead {
    font-size: 1rem;
  }

  .btn {
    width: 100%;
  }

  .card {
    padding: 1.22rem;
  }

  .quote-card {
    padding: 1.45rem;
  }

  .quote-card__text {
    font-size: clamp(1.48rem, 8.2vw, 1.95rem);
  }

  .media-placeholder {
    min-height: 250px;
  }

  .site-footer__logo {
    width: min(172px, 100%) !important;
  }
}


/* =========================================================
   10. SHORT VIEWPORT
   ========================================================= */

@media (max-height: 720px) and (max-width: 1180px) {
  .site-nav {
    padding-top: calc(var(--header-height) + 0.8rem);
  }

  .site-nav__link {
    min-height: 46px;
  }

  .site-nav__item--cta {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
  }
}


/* =========================================================
   11. TOUCH DEVICE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .card:hover,
  .btn:hover,
  .media-frame:hover img,
  .social-link:hover,
  .floating-whatsapp:hover {
    transform: none;
  }

  .site-nav__item:hover .nav-dropdown {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .site-nav__item.is-open .nav-dropdown {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}


/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .site-nav,
  .nav-overlay,
  .site-header,
  .site-header__brand img,
  .site-nav__chevron {
    transition: none !important;
  }

  .decorative-orb,
  .decorative-ring {
    transform: none !important;
  }
}


/* =========================================================
   13. PRINT
   ========================================================= */

/* =========================================================
   MOBILE NAVIGATION LAYER FIX
   ========================================================= */

@media (max-width: 1180px) {

  /*
   * Header harus berada di atas overlay.
   * Sebelumnya site-header memakai z-index 500,
   * sementara nav-overlay memakai sekitar 900.
   */


  .site-nav {
    z-index: calc(var(--z-overlay) + 3);
  }

  .menu-toggle {
    position: relative;
    z-index: calc(var(--z-overlay) + 4);

    overflow: hidden;
  }

  .nav-overlay {
    z-index: var(--z-overlay);
  }

  /*
   * Sembunyikan floating WhatsApp saat drawer terbuka
   * agar tidak masuk ke atas overlay.
   */
  body.is-locked .floating-whatsapp {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /*
   * Hamburger dan close icon memakai posisi yang sama.
   * Jadi keduanya tidak lagi tampil berdampingan.
   */
  .menu-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 21px;
    height: 21px;

    transform: translate(-50%, -50%);
  }

  .menu-toggle [data-menu-icon] {
    display: block !important;
  }

  .menu-toggle [data-close-icon] {
    display: none !important;
  }

  .menu-toggle.is-open [data-menu-icon] {
    display: none !important;
  }

  .menu-toggle.is-open [data-close-icon] {
    display: block !important;
  }
}

/* =========================================================
   MOBILE DRAWER SCROLLED STATE FIX
   ========================================================= */

@media (max-width: 1180px) {

  /*
   * Saat menu terbuka, header harus menempel ke viewport.
   * Sticky tidak stabil ketika html/body dikunci.
   */
  html.is-locked .site-header,
  body.is-locked .site-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    width: 100% !important;
    min-height: var(--header-height);

    z-index: calc(var(--z-overlay) + 2);

    /*
     * backdrop-filter bisa membuat fixed child
     * dihitung relatif ke header, bukan viewport.
     */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.is-locked .site-header__inner,
  body.is-locked .site-header__inner {
    width: min(calc(100% - (var(--container-padding) * 2)),
        var(--container-wide));

    min-height: var(--header-height);
    margin-inline: auto;
  }

  /*
   * Drawer selalu berada di viewport penuh.
   */
  html.is-locked .site-nav,
  body.is-locked .site-nav {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    width: min(420px, 100%);
    max-width: 100%;

    height: 100vh;
    height: 100svh;
    height: 100dvh;

    z-index: calc(var(--z-overlay) + 3);
  }

  html.is-locked .site-nav.is-open,
  body.is-locked .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;

    transform: translate3d(0, 0, 0);
  }

  html.is-locked .menu-toggle,
  body.is-locked .menu-toggle {
    position: relative;
    z-index: calc(var(--z-overlay) + 4);
  }

  html.is-locked .nav-overlay,
  body.is-locked .nav-overlay {
    position: fixed;
    inset: 0;

    z-index: var(--z-overlay);
  }
}

@media (max-width: 640px) {

  html.is-locked .site-nav,
  body.is-locked .site-nav {
    width: 100%;
    max-width: none;
  }
}


/* =========================================================
   FULLSCREEN MOBILE DRAWER
   ========================================================= */

@media (max-width: 640px) {

  /*
   * Di mobile drawer sudah memenuhi layar,
   * jadi overlay tidak perlu memberikan blur.
   */
  .nav-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-nav {
    background-color: var(--color-white);
  }
}


/* =========================================================
   HOME HERO RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {
  .home-hero {
    min-height: auto;
    padding-block:
      clamp(5rem, 8vw, 6.75rem) clamp(3.75rem, 6vw, 5rem);
  }

  .home-hero__layout {
    grid-template-columns:
      minmax(0, 1fr) minmax(360px, 0.78fr);
    gap: clamp(2.75rem, 5vw, 5rem);
  }

  .home-hero__title {
    font-size: clamp(4rem, 6.4vw, 6rem);
  }

  .home-hero__visual-shell {
    width: min(100%, 540px);
  }

  .home-hero__floating-card--principle {
    right: -0.5rem;
  }

  .home-hero__floating-card--stat {
    left: -0.75rem;
  }
}


@media (max-width: 1024px) {
  .home-hero {
    align-items: flex-start;

    min-height: auto;
    padding-block:
      clamp(4.75rem, 8vw, 6rem) clamp(4rem, 7vw, 5rem);
  }

  .home-hero::before {
    background-size: 60px 60px;
    mask-image:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.52),
        transparent 76%);
  }

  .home-hero::after {
    top: 46%;
    right: -8%;

    width: min(70vw, 620px);
  }

  .home-hero__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(3.75rem, 8vw, 5rem);
  }

  .home-hero__content {
    max-width: 800px;
  }

  .home-hero__title {
    max-width: 780px;
    font-size: clamp(4.2rem, 9.3vw, 6.2rem);
  }

  .home-hero__description {
    max-width: 760px;
  }

  .home-hero__visual {
    width: 100%;
  }

  .home-hero__visual-shell {
    width: min(100%, 640px);
    margin-inline: auto;
  }

  .home-hero__scroll {
    margin-top: clamp(2.5rem, 5vw, 3.25rem);
  }

  .home-hero__orb {
    top: 38%;
  }

  .home-hero__ring {
    bottom: -125px;
  }
}


@media (max-width: 820px) {
  .home-hero {
    padding-top: clamp(4rem, 8vw, 5rem);
  }

  .home-hero__intro {
    align-items: flex-start;
    gap: var(--space-3);
  }

  .home-hero__title {
    max-width: 690px;
    font-size: clamp(3.7rem, 10.8vw, 5.3rem);
  }

  .home-hero__description {
    max-width: 680px;
    font-size: 1.08rem;
  }

  .home-hero__visual-shell {
    width: min(100%, 560px);
  }

  .home-hero__floating-card--principle {
    top: 2.25rem;
    right: 0;

    width: min(240px, 45%);
  }

  .home-hero__floating-card--stat {
    left: 0;
  }

  .home-hero__scroll {
    margin-top: 2.5rem;
  }
}


@media (max-width: 640px) {
  .home-hero {
    padding-block: 3.75rem 3.5rem;
  }

  .home-hero::before {
    opacity: 0.28;
    background-size: 46px 46px;
  }

  .home-hero::after {
    top: 55%;
    right: -32%;

    width: 110vw;
    opacity: 0.16;
  }

  .home-hero__layout {
    gap: 3.25rem;
  }

  .home-hero__intro {
    flex-direction: column;
    margin-bottom: 1.6rem;
  }

  .home-hero__eyebrow {
    max-width: 100%;
    min-height: 34px;

    padding: 0.52rem 0.72rem;

    font-size: 0.66rem;
    line-height: 1.35;
  }

  .home-hero__location {
    padding-left: 0.9rem;
    font-size: 0.7rem;
  }

  .home-hero__title {
    font-size: clamp(3.1rem, 14.3vw, 4.2rem);
    line-height: 0.91;
    letter-spacing: -0.048em;
  }

  .home-hero__description {
    margin-top: 1.5rem;

    font-size: 1rem;
    line-height: 1.7;
  }

  .home-hero__actions {
    align-items: stretch;

    width: 100%;
    margin-top: 1.8rem;
  }

  .home-hero__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .home-hero__assurance {
    gap: 0.85rem 1.1rem;
    margin-top: 1.7rem;
  }

  .home-hero__assurance-item {
    font-size: 0.72rem;
  }

  .home-hero__assurance-dot {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 4px rgba(240, 125, 32, 0.1);
  }

  .home-hero__visual-shell {
    width: min(100%, 500px);
    padding: 0.7rem 0.15rem 2.7rem;
  }

  .home-hero__visual-shell::before {
    top: 0;
    right: 0;
    bottom: 15%;
    left: 9%;

    border-radius: 34px;
    transform: rotate(3deg);
  }

  .home-hero__figure {
    border-radius: 28px;
  }

  .home-hero__floating-card--stat {
    left: 0.6rem;
    bottom: 0.25rem;

    min-width: 155px;
    padding: 0.82rem 0.95rem;

    border-radius: 16px;
  }

  .home-hero__floating-card--stat strong {
    font-size: 2.35rem;
  }

  .home-hero__floating-card--stat span {
    font-size: 0.66rem;
  }

  .home-hero__floating-card--principle {
    top: 1.65rem;
    right: 0.55rem;

    width: min(210px, 47%);
    padding: 0.8rem 0.85rem;

    border-radius: 16px;
  }

  .home-hero__floating-label {
    font-size: 0.58rem;
  }

  .home-hero__floating-card--principle p {
    font-size: 0.96rem;
  }

  .home-hero__orb {
    top: 48%;
    right: -68px;

    width: 138px;
    height: 138px;
  }

  .home-hero__ring {
    bottom: -98px;
    left: -108px;

    width: 190px;
    height: 190px;

    border-width: 30px;
  }

  .home-hero__scroll {
    display: none;
  }
}


@media (max-width: 480px) {
  .home-hero {
    padding-top: 3.25rem;
  }

  .home-hero__title {
    font-size: clamp(2.85rem, 14.8vw, 3.75rem);
  }

  .home-hero__description {
    font-size: 0.96rem;
  }

  .home-hero__assurance {
    justify-content: flex-start;
  }

  .home-hero__visual-shell {
    padding-bottom: 4.35rem;
  }

  .home-hero__floating-card--principle {
    display: none;
  }

  .home-hero__floating-card--stat {
    right: 0.55rem;
    bottom: 0.45rem;
    left: 0.55rem;

    flex-direction: row;
    align-items: center;
    gap: 0.8rem;

    min-width: 0;
    padding: 0.82rem 0.9rem;
  }

  .home-hero__floating-card--stat strong {
    flex: 0 0 auto;
    font-size: 2.15rem;
  }

  .home-hero__floating-card--stat span {
    max-width: 140px;
    margin-top: 0;
  }
}


@media (max-width: 380px) {
  .home-hero__title {
    font-size: clamp(2.6rem, 14.8vw, 3.3rem);
  }

  .home-hero__eyebrow {
    font-size: 0.61rem;
  }

  .home-hero__location {
    font-size: 0.66rem;
  }

  .home-hero__assurance {
    gap: 0.75rem;
  }

  .home-hero__assurance-item {
    font-size: 0.68rem;
  }
}


@media (max-height: 720px) and (min-width: 1025px) {
  .home-hero {
    min-height: auto;
    padding-block: 4.5rem 3.75rem;
  }

  .home-hero__title {
    font-size: clamp(4rem, 6.5vw, 5.75rem);
  }

  .home-hero__visual-shell {
    width: min(100%, 510px);
  }
}

/* =========================================================
   ABOUT PAGE RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {
  .about-hero {
    padding-block:
      clamp(5.5rem, 9vw, 7.5rem) clamp(4.5rem, 7vw, 6rem);
  }

  .about-hero__layout {
    grid-template-columns:
      minmax(0, 1fr) minmax(360px, 0.78fr);

    gap: clamp(3rem, 5vw, 5rem);
  }

  .about-hero__content .display-title {
    font-size: clamp(3.8rem, 6.1vw, 5.8rem);
  }

  .about-hero__visual {
    width: min(100%, 540px);
  }
}


@media (max-width: 1024px) {
  .about-hero {
    padding-block:
      clamp(4.75rem, 8vw, 6rem) clamp(4.5rem, 7vw, 5.5rem);
  }

  .about-hero::before {
    background-size: 60px 60px;

    mask-image:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.5),
        transparent 80%);
  }

  .about-hero .breadcrumb {
    margin-bottom: 2.25rem;
  }

  .about-hero__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(3.25rem, 7vw, 4.75rem);
  }

  .about-hero__content {
    max-width: 820px;
  }

  .about-hero__content .display-title {
    max-width: 800px;

    font-size: clamp(4rem, 9vw, 5.8rem);
  }

  .about-hero__content .text-lead {
    max-width: 760px;
  }

  .about-hero__visual {
    width: min(100%, 720px);
    aspect-ratio: 16 / 10;

    margin-inline: auto;
  }

  .about-hero__orb {
    top: 42%;
    right: -72px;
  }

  .about-hero__ring {
    bottom: -130px;
  }

  .about-hero+.section .media-frame {
    min-height: 0;
  }

  section[aria-labelledby="principles-title"] .grid--3> :last-child {
    grid-column: 1 / -1;
  }

  section[aria-label="Perjalanan singkat Membumi Consulting"] .grid> :last-child {
    grid-column: 1 / -1;
  }

  section[aria-label="Perjalanan singkat Membumi Consulting"] .stat__description {
    max-width: 52ch;
  }
}


@media (max-width: 820px) {
  .about-hero {
    padding-top: clamp(4rem, 8vw, 5rem);
  }

  .about-hero__content .display-title {
    font-size: clamp(3.5rem, 10.8vw, 5rem);
  }

  .about-hero__content .text-lead {
    font-size: 1.08rem;
  }

  .about-hero__visual {
    width: min(100%, 640px);
  }

  .about-hero__visual::after {
    right: 1rem;
    bottom: 1rem;

    width: 88px;
    border-width: 13px;
  }

  .about-hero+.section .split {
    gap: 3rem;
  }

  section[aria-labelledby="principles-title"] .card {
    padding: 1.75rem;
  }

  section[aria-label="Perjalanan singkat Membumi Consulting"] .stat {
    padding: 1.75rem;
  }

  section[aria-labelledby="work-title"] .grid--4 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 640px) {
  .about-hero {
    padding-block: 3.5rem 4rem;
  }

  .about-hero::before {
    opacity: 0.24;
    background-size: 46px 46px;
  }

  .about-hero .breadcrumb {
    margin-bottom: 1.75rem;
  }

  .about-hero__layout {
    gap: 3rem;
  }

  .about-hero__content .display-title {
    font-size: clamp(3rem, 13.8vw, 4rem);
    line-height: 0.94;
    letter-spacing: -0.045em;
  }

  .about-hero__content .text-lead {
    margin-top: 1.5rem;

    font-size: 1rem;
    line-height: 1.7;
  }

  .about-hero__content .cluster {
    align-items: stretch;

    width: 100%;
    margin-top: 1.8rem;
  }

  .about-hero__content .cluster .btn {
    width: 100%;
  }

  .about-hero__visual {
    width: 100%;
    aspect-ratio: 4 / 3;

    border-radius: 26px;
  }

  .about-hero__visual::after {
    right: 0.85rem;
    bottom: 0.85rem;

    width: 70px;
    border-width: 10px;
  }

  .about-hero__visual:hover img {
    transform: scale(1.015);
  }

  .about-hero__orb {
    top: 52%;
    right: -70px;

    width: 135px;
    height: 135px;
  }

  .about-hero__ring {
    bottom: -95px;
    left: -105px;

    width: 190px;
    height: 190px;

    border-width: 30px;
  }

  .about-hero+.section .media-frame {
    aspect-ratio: 4 / 3;
  }

  section[aria-labelledby="principles-title"] .grid--3> :last-child {
    grid-column: auto;
  }

  section[aria-label="Perjalanan singkat Membumi Consulting"] .grid> :last-child {
    grid-column: auto;
  }

  section[aria-label="Perjalanan singkat Membumi Consulting"] .stat {
    padding: 1.4rem;
  }

  section[aria-label="Perjalanan singkat Membumi Consulting"] .stat__description {
    max-width: 100%;
  }

  section[aria-labelledby="work-title"] .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  section[aria-labelledby="work-title"] .card--primary:hover {
    transform: none;
  }

  .section--cream .check-list {
    gap: 0.8rem;
  }

  .section--cream .check-list__item {
    padding:
      0.85rem 0.9rem 0.85rem 2.15rem;

    line-height: 1.6;
  }

  .section--cream .check-list__item::before {
    top: 1.3rem;
    left: 0.9rem;
  }
}


@media (max-width: 420px) {
  .about-hero {
    padding-top: 3rem;
  }

  .about-hero__content .display-title {
    font-size: clamp(2.7rem, 13.8vw, 3.45rem);
  }

  .about-hero__content .text-lead {
    font-size: 0.96rem;
  }

  .about-hero__visual {
    aspect-ratio: 1 / 1;
    border-radius: 22px;
  }

  .about-hero__visual::after {
    width: 58px;
    border-width: 8px;
  }

  section[aria-labelledby="principles-title"] .card {
    padding: 1.35rem;
  }

  section[aria-label="Perjalanan singkat Membumi Consulting"] .stat {
    padding: 1.25rem;
  }

  .section--cream .check-list__item {
    padding-left: 2rem;
  }

  .section--cream .check-list__item::before {
    left: 0.8rem;
  }
}


@media (prefers-reduced-motion: reduce) {
  .about-hero__visual img {
    transform: none !important;
  }
}

/* =========================================================
   COMMUNITY & ASSOCIATION PAGE RESPONSIVE
   ========================================================= */


/* =========================================================
   LAPTOP
   Maximum 1280px
   ========================================================= */

@media (max-width: 1280px) {
  .community-hero {
    min-height: auto;

    padding-block:
      clamp(5rem, 8vw, 7rem) clamp(4.5rem, 7vw, 6rem);
  }

  .community-hero__layout {
    grid-template-columns:
      minmax(0, 1fr) minmax(390px, 0.78fr);

    gap: clamp(3rem, 5vw, 5rem);
  }

  .community-hero__title {
    font-size: clamp(3.9rem, 6vw, 5.8rem);
  }

  .community-network {
    width: min(100%, 540px);
  }

  .community-network__caption {
    right: -1%;
  }

  .community-reality__layout {
    grid-template-columns:
      minmax(0, 0.76fr) minmax(460px, 1.24fr);

    gap: clamp(3rem, 6vw, 6rem);
  }

  .community-framework__card {
    padding: 2rem;
  }

  .community-journey__layout {
    grid-template-columns:
      minmax(0, 1fr) minmax(390px, 0.78fr);

    gap: clamp(3rem, 6vw, 6rem);
  }

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

  .community-engagement__layout {
    grid-template-columns:
      minmax(0, 0.75fr) minmax(460px, 1.25fr);

    gap: clamp(3rem, 6vw, 6rem);
  }
}


/* =========================================================
   TABLET LANDSCAPE
   Maximum 1024px
   ========================================================= */

@media (max-width: 1024px) {
  .community-hero {
    padding-block:
      clamp(4.5rem, 8vw, 6rem) clamp(4.5rem, 7vw, 5.5rem);
  }

  .community-hero::before {
    top: -210px;
    left: -190px;

    width: 390px;
    height: 390px;

    border-width: 58px;
  }

  .community-hero::after {
    right: -190px;
    bottom: -220px;

    width: 350px;
    height: 350px;
  }

  .community-hero__mesh {
    background-size: 60px 60px;

    mask-image:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.82),
        transparent 84%);
  }

  .community-hero__breadcrumb {
    margin-bottom: 2.5rem;
  }

  .community-hero__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: clamp(3.5rem, 8vw, 5rem);
  }

  .community-hero__content {
    max-width: 850px;
  }

  .community-hero__title {
    max-width: 850px;

    font-size: clamp(4rem, 9vw, 6rem);
  }

  .community-hero__lead {
    max-width: 780px;
  }

  .community-network {
    width: min(100%, 650px);
    margin-inline: auto;
  }

  .community-reality__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 3.5rem;
  }

  .community-reality__intro {
    position: static;

    max-width: 820px;
  }

  .community-reality__cards {
    max-width: 820px;
  }

  .community-framework__header {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.5rem;
  }

  .community-framework__header .text-lead {
    justify-self: start;

    max-width: 760px;
  }

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

  .community-framework__card {
    grid-column: auto;
  }

  .community-journey__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 4rem;
  }

  .community-journey__content {
    max-width: 820px;
  }

  .community-journey__panel {
    width: min(100%, 820px);
  }

  .community-engagement__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 3.5rem;
  }

  .community-engagement__intro {
    max-width: 820px;
  }

  .community-engagement__cards {
    max-width: 820px;
  }

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


/* =========================================================
   TABLET PORTRAIT
   Maximum 820px
   ========================================================= */

@media (max-width: 820px) {
  .community-hero {
    padding-top: clamp(4rem, 8vw, 5rem);
  }

  .community-hero__title {
    font-size: clamp(3.5rem, 10.5vw, 5rem);
  }

  .community-hero__lead {
    font-size: 1.08rem;
  }

  .community-network {
    width: min(100%, 580px);
  }

  .community-network__caption {
    width: min(205px, 44%);
  }

  .community-reality__card {
    padding: 1.5rem;
  }

  .community-framework__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-framework__card {
    min-height: 0;
    padding: 1.75rem;
  }

  .community-framework__card h3 {
    font-size: clamp(2rem, 5.8vw, 3rem);
  }

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

  .community-lanes__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-partners__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .community-note__card {
    grid-template-columns:
      62px minmax(0, 1fr);
  }

  .community-note__icon {
    width: 58px;
    height: 58px;
  }

  .community-cta__title {
    font-size: clamp(3rem, 8vw, 4.7rem);
  }
}


/* =========================================================
   MOBILE
   Maximum 640px
   ========================================================= */

@media (max-width: 640px) {
  .community-hero {
    padding-block: 3.5rem 4rem;
  }

  .community-hero::before {
    top: -150px;
    left: -160px;

    width: 300px;
    height: 300px;

    border-width: 44px;
  }

  .community-hero::after {
    right: -160px;
    bottom: -170px;

    width: 280px;
    height: 280px;
  }

  .community-hero__mesh {
    opacity: 0.12;
    background-size: 46px 46px;
  }

  .community-hero__breadcrumb {
    margin-bottom: 1.75rem;
  }

  .community-hero__layout {
    gap: 3rem;
  }

  .community-hero__eyebrow {
    margin-bottom: 1.5rem;

    font-size: 0.65rem;
  }

  .community-hero__eyebrow::before {
    width: 26px;
  }

  .community-hero__title {
    font-size: clamp(3rem, 14vw, 4.1rem);
    line-height: 0.92;

    letter-spacing: -0.047em;
  }

  .community-hero__lead {
    margin-top: 1.5rem;

    font-size: 1rem;
    line-height: 1.7;
  }

  .community-hero__actions {
    align-items: stretch;

    width: 100%;
    margin-top: 1.8rem;
  }

  .community-hero__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .community-hero__signals {
    gap: 0.85rem 1rem;

    margin-top: 1.7rem;
  }

  .community-hero__signals span {
    font-size: 0.62rem;
  }


  /* COMMUNITY NETWORK */

  .community-network {
    width: min(100%, 470px);
  }

  .community-network__core {
    width: 112px;
    height: 112px;

    border-width: 8px;
  }

  .community-network__core strong {
    font-size: 1.35rem;
  }

  .community-network__node {
    width: 78px;
    height: 78px;
  }

  .community-network__node strong {
    font-size: 0.62rem;
  }

  .community-network__node span {
    font-size: 0.82rem;
  }

  .community-network__node--one {
    top: 2%;
    left: 39%;
  }

  .community-network__node--two {
    top: 32%;
    right: 0;
  }

  .community-network__node--three {
    right: 14%;
    bottom: 0;
  }

  .community-network__node--four {
    bottom: 11%;
    left: 0;
  }

  .community-network__orbit--two {
    top: 4%;
    right: 8%;

    width: 66px;
    height: 66px;

    border-width: 12px;
  }

  .community-network__caption {
    right: 0.25rem;
    bottom: 13%;

    width: min(180px, 46%);
    padding: 0.75rem 0.8rem;
  }

  .community-network__caption strong {
    font-size: 0.9rem;
  }


  /* ORGANIZATION REALITY */

  .community-reality {
    padding-block: 4.75rem;
  }

  .community-reality__layout {
    gap: 2.75rem;
  }

  .community-reality__card {
    grid-template-columns:
      48px minmax(0, 1fr);

    gap: 1rem;

    padding: 1.25rem;
  }

  .community-reality__card:hover {
    transform: none;
  }

  .community-reality__number {
    width: 46px;
    height: 46px;

    font-size: 1rem;
  }

  .community-reality__card h3 {
    font-size: 1.35rem;
  }


  /* COMMUNITY FRAMEWORK */

  .community-framework {
    padding-block: 4.75rem;
  }

  .community-framework__header {
    margin-bottom: 2.75rem;
  }

  .community-framework__grid {
    gap: 1rem;
  }

  .community-framework__card {
    padding: 1.4rem;

    border-radius: 22px;
  }

  .community-framework__card:hover {
    transform: none;
  }

  .community-framework__top {
    margin-bottom: 1.75rem;
  }

  .community-framework__index {
    font-size: 2.4rem;
  }

  .community-framework__tag {
    min-height: 32px;

    font-size: 0.56rem;
  }

  .community-framework__card h3 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .community-framework__card>p {
    margin-top: 1rem;

    font-size: 0.88rem;
  }

  .community-framework__card ul {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.7rem;
    margin-top: 1.5rem;
  }


  /* MEMBER JOURNEY */

  .community-journey {
    padding-block: 4.75rem;
  }

  .community-journey__layout {
    gap: 3rem;
  }

  .community-journey__steps {
    margin-top: 2rem;
  }

  .community-journey__steps li {
    grid-template-columns:
      46px minmax(0, 1fr);

    gap: 1rem;
  }

  .community-journey__steps li>span {
    width: 44px;
    height: 44px;
  }

  .community-journey__steps strong {
    font-size: 1.3rem;
  }

  .community-journey__panel {
    padding: 1.4rem;

    border-radius: 24px;
  }

  .community-journey__panel-head {
    margin-bottom: 2rem;
  }

  .community-journey__panel-head strong {
    font-size: 1.9rem;
  }

  .community-journey__panel::after {
    right: -65px;
    bottom: -65px;

    width: 150px;
    height: 150px;

    border-width: 24px;
  }


  /* COLLABORATION LANES */

  .community-lanes {
    padding-block: 4.75rem;
  }

  .community-lanes__header {
    margin-bottom: 2.75rem;
  }

  .community-lanes__grid {
    gap: 1rem;
  }

  .community-lane {
    grid-template-columns:
      52px minmax(0, 1fr);

    gap: 1rem;

    padding: 1.25rem;

    border-radius: 20px;
  }

  .community-lane:hover {
    transform: none;
  }

  .community-lane__number {
    width: 48px;
    height: 48px;

    font-size: 1.05rem;
  }

  .community-lane h3 {
    font-size: 1.6rem;
  }


  /* ENGAGEMENT */

  .community-engagement {
    padding-block: 4.75rem;
  }

  .community-engagement__layout {
    gap: 2.75rem;
  }

  .community-engagement__card {
    grid-template-columns:
      50px minmax(0, 1fr);

    gap: 1rem;

    padding: 1.25rem;
  }

  .community-engagement__card:hover {
    transform: none;
  }

  .community-engagement__card>span {
    width: 48px;
    height: 48px;

    font-size: 1.05rem;
  }

  .community-engagement__card h3 {
    font-size: 1.4rem;
  }


  /* PARTNER ECOSYSTEM */

  .community-partners {
    padding-block: 4.75rem;
  }

  .community-partners__header {
    margin-bottom: 2.75rem;
  }

  .community-partners__header h2 {
    font-size: clamp(2.3rem, 9vw, 3.3rem);
  }

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

    gap: 0.75rem;
  }

  .community-partners__item {
    min-height: 125px;
    padding: 1rem;
  }

  .community-partners__item:hover {
    transform: none;
  }


  /* NOTE */

  .community-note {
    padding-block: 3.75rem;
  }

  .community-note__card {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.25rem;
    padding: 1.4rem;

    border-radius: 22px;
  }

  .community-note__icon {
    width: 54px;
    height: 54px;

    font-size: 1.5rem;
  }

  .community-note h2 {
    font-size: 1.8rem;
  }


  /* FAQ */

  .community-faq-section {
    padding-block: 4.75rem;
  }

  .community-faq__trigger {
    gap: 1rem;

    padding: 1.15rem;

    font-size: 0.92rem;
  }

  .community-faq__trigger span {
    width: 32px;
    height: 32px;

    font-size: 1.2rem;
  }

  .community-faq__panel {
    padding:
      0 1.15rem 1.15rem;
  }


  /* CTA */

  .community-cta {
    padding-block: 4.75rem;
  }

  .community-cta::before {
    background-size: 48px 48px;
  }

  .community-cta__orbit {
    right: -120px;
    bottom: -120px;

    width: 250px;
    height: 250px;

    border-width: 42px;
  }

  .community-cta__title {
    font-size: clamp(2.75rem, 12vw, 3.8rem);
  }

  .community-cta__description {
    font-size: 0.98rem;
  }

  .community-cta__actions {
    align-items: stretch;

    width: 100%;
  }

  .community-cta__actions .btn {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   SMALL MOBILE
   Maximum 420px
   ========================================================= */

@media (max-width: 420px) {
  .community-hero {
    padding-top: 3rem;
  }

  .community-hero__title {
    font-size: clamp(2.65rem, 13.8vw, 3.45rem);
  }

  .community-hero__lead {
    font-size: 0.96rem;
  }

  .community-hero__signals {
    gap: 0.7rem;
  }

  .community-hero__signals span {
    padding-left: 0.85rem;

    font-size: 0.58rem;
  }


  /* NETWORK SIMPLIFICATION */

  .community-network {
    width: 100%;
  }

  .community-network__core {
    width: 98px;
    height: 98px;

    border-width: 7px;
  }

  .community-network__core-label {
    font-size: 0.5rem;
  }

  .community-network__core strong {
    font-size: 1.15rem;
  }

  .community-network__node {
    width: 66px;
    height: 66px;
  }

  .community-network__node span {
    font-size: 0.72rem;
  }

  .community-network__node strong {
    font-size: 0.55rem;
  }

  .community-network__caption {
    display: none;
  }

  .community-network__orbit--two {
    width: 52px;
    height: 52px;

    border-width: 10px;
  }


  /* STACKED CARDS */

  .community-reality__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-reality__number {
    width: 42px;
    height: 42px;
  }

  .community-framework__card {
    padding: 1.2rem;
  }

  .community-framework__top {
    align-items: flex-start;
  }

  .community-framework__card h3 {
    font-size: 1.95rem;
  }

  .community-journey__steps li {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-journey__steps li>span {
    width: 42px;
    height: 42px;
  }

  .community-lane {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-lane__number {
    width: 44px;
    height: 44px;
  }

  .community-engagement__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-engagement__card>span {
    width: 44px;
    height: 44px;
  }

  .community-partners__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-partners__item {
    min-height: 105px;
  }

  .community-note h2 {
    font-size: 1.65rem;
  }

  .community-faq__trigger {
    align-items: flex-start;

    font-size: 0.88rem;
  }

  .community-cta__title {
    font-size: clamp(2.45rem, 12vw, 3.2rem);
  }
}


/* =========================================================
   SHORT VIEWPORT
   ========================================================= */

@media (max-height: 720px) and (min-width: 1025px) {
  .community-hero {
    min-height: auto;

    padding-block: 4.5rem 4rem;
  }

  .community-hero__title {
    font-size: clamp(3.8rem, 5.8vw, 5.4rem);
  }

  .community-network {
    width: min(100%, 500px);
  }
}


/* =========================================================
   TOUCH DEVICE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .community-network__node:hover,
  .community-reality__card:hover,
  .community-framework__card:hover,
  .community-lane:hover,
  .community-engagement__card:hover,
  .community-partners__item:hover {
    transform: none;
  }

  .community-network__node:hover {
    color: var(--color-text-dark);
    background-color:
      rgba(255, 255, 255, 0.95);
  }

  .community-framework__card:hover {
    border-color: var(--color-border);

    box-shadow:
      0 16px 42px rgba(43, 0, 53, 0.07);
  }

  .community-framework__card--governance:hover {
    border-color:
      rgba(255, 255, 255, 0.08);
  }

  .community-lane:hover {
    color: inherit;
    background: var(--color-white);
    border-color: var(--color-border);

    box-shadow: none;
  }

  .community-lane:hover .community-lane__number {
    color: var(--color-white);
    background-color: var(--color-primary);
  }

  .community-lane:hover h3 {
    color: var(--color-plum);
  }

  .community-lane:hover p {
    color: var(--color-text-soft);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .community-network__node,
  .community-reality__card,
  .community-framework__card,
  .community-lane,
  .community-engagement__card,
  .community-partners__item,
  .community-faq__trigger span {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   ARTIKEL & EDUKASI PAGE RESPONSIVE
   ========================================================= */


/* =========================================================
   LAPTOP
   Maximum 1280px
   ========================================================= */

@media (max-width: 1280px) {
  .insights-hero {
    padding-block:
      clamp(4.5rem, 7vw, 6rem) clamp(5rem, 8vw, 7rem);
  }

  .insights-hero__layout {
    grid-template-columns:
      minmax(0, 0.86fr) minmax(450px, 1.14fr);

    gap: clamp(3rem, 5vw, 5rem);
  }

  .insights-hero__title {
    font-size: clamp(3.9rem, 6vw, 5.8rem);
  }

  .featured-story {
    grid-template-columns:
      minmax(0, 1fr) minmax(230px, 0.82fr);
  }

  .featured-story__media {
    min-height: 470px;
  }

  .insights-topics__grid {
    gap: 0.9rem;
  }

  .insights-topic {
    min-height: 230px;
  }

  .insight-card--large {
    grid-template-columns:
      minmax(0, 1fr) minmax(280px, 0.86fr);
  }

  .insights-guides__layout {
    grid-template-columns:
      minmax(0, 0.72fr) minmax(500px, 1.28fr);

    gap: clamp(3rem, 6vw, 6rem);
  }

  .insights-principles__grid {
    gap: 0.9rem;
  }
}


/* =========================================================
   TABLET LANDSCAPE
   Maximum 1024px
   ========================================================= */

@media (max-width: 1024px) {
  .insights-hero {
    padding-block:
      clamp(4rem, 7vw, 5.5rem) clamp(4.5rem, 7vw, 6rem);
  }

  .insights-hero::before {
    top: -190px;
    right: -190px;

    width: 360px;
    height: 360px;

    border-width: 54px;
  }

  .insights-hero::after {
    bottom: -220px;
    left: -180px;

    width: 340px;
    height: 340px;
  }

  .insights-hero__paper {
    background-size: 100% 28px;
  }

  .insights-hero__breadcrumb {
    margin-bottom: 2rem;
  }

  .insights-hero__masthead {
    margin-bottom: 3.5rem;
  }

  .insights-hero__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 4rem;
  }

  .insights-hero__content {
    max-width: 850px;
  }

  .insights-hero__title {
    max-width: 850px;

    font-size: clamp(4rem, 9vw, 6rem);
  }

  .insights-hero__lead {
    max-width: 760px;
  }

  .featured-story {
    width: min(100%, 880px);
    margin-inline: auto;
  }

  .featured-story__media {
    min-height: 440px;
  }

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

  .insights-topic {
    min-height: 220px;
  }

  .insights-latest__header {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.5rem;
  }

  .insights-latest__header .text-lead {
    justify-self: start;

    max-width: 760px;
  }

  .insight-card {
    grid-column: span 6;
  }

  .insight-card--large {
    grid-column: 1 / -1;
    grid-row: auto;

    min-height: 520px;
  }

  .insight-card--quote {
    grid-column: span 6;
  }

  .insights-guides__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 3.5rem;
  }

  .insights-guides__intro {
    position: static;

    max-width: 820px;
  }

  .insights-guides__list {
    max-width: 880px;
  }

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

  .insights-principles__grid article {
    min-height: 230px;
  }
}


/* =========================================================
   TABLET PORTRAIT
   Maximum 820px
   ========================================================= */

@media (max-width: 820px) {
  .insights-hero__masthead {
    grid-template-columns:
      minmax(0, 1fr) auto;
  }

  .insights-hero__line {
    display: none;
  }

  .insights-hero__edition--right {
    justify-self: end;
  }

  .insights-hero__title {
    font-size: clamp(3.5rem, 10.5vw, 5rem);
  }

  .insights-hero__lead {
    font-size: 1.08rem;
  }

  .featured-story {
    grid-template-columns: minmax(0, 1fr);
  }

  .featured-story__media {
    min-height: 390px;
    aspect-ratio: 16 / 10;
  }

  .featured-story__content {
    min-height: 390px;
  }

  .insight-card--large {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .insight-card--large .insight-card__media {
    min-height: 380px;
    aspect-ratio: 16 / 10;
  }

  .insight-card--large h3 {
    font-size: clamp(2.3rem, 6vw, 3.5rem);
  }

  .guide-row {
    grid-template-columns:
      54px minmax(0, 1fr);
  }

  .guide-row__type {
    grid-column: 2;
    justify-self: start;
  }

  .insights-note__card {
    grid-template-columns:
      62px minmax(0, 1fr);
  }

  .insights-note__icon {
    width: 58px;
    height: 58px;
  }

  .insights-cta__title {
    font-size: clamp(3rem, 8vw, 4.7rem);
  }
}


/* =========================================================
   MOBILE
   Maximum 640px
   ========================================================= */

@media (max-width: 640px) {
  .insights-hero {
    padding-block: 3.25rem 4.25rem;
  }

  .insights-hero::before {
    top: -150px;
    right: -160px;

    width: 290px;
    height: 290px;

    border-width: 42px;
  }

  .insights-hero::after {
    bottom: -165px;
    left: -150px;

    width: 270px;
    height: 270px;
  }

  .insights-hero__paper {
    opacity: 0.24;
    background-size: 100% 24px;
  }

  .insights-hero__breadcrumb {
    margin-bottom: 1.65rem;
  }

  .insights-hero__masthead {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.85rem;
    margin-bottom: 2.75rem;
    padding-block: 0.9rem;
  }

  .insights-hero__edition--right {
    align-items: flex-start;
    justify-self: start;

    text-align: left;
  }

  .insights-hero__layout {
    gap: 3rem;
  }

  .insights-hero__eyebrow {
    margin-bottom: 1.4rem;

    font-size: 0.64rem;
  }

  .insights-hero__eyebrow::before {
    width: 26px;
  }

  .insights-hero__title {
    font-size: clamp(3rem, 14vw, 4.1rem);
    line-height: 0.92;

    letter-spacing: -0.047em;
  }

  .insights-hero__lead {
    margin-top: 1.45rem;

    font-size: 1rem;
    line-height: 1.7;
  }

  .insights-hero__actions {
    align-items: stretch;

    width: 100%;
    margin-top: 1.8rem;
  }

  .insights-hero__actions .btn {
    width: 100%;
    min-width: 0;
  }


  /* FEATURED STORY */

  .featured-story {
    border-radius: 24px;
  }

  .featured-story__media {
    min-height: 280px;
    aspect-ratio: 4 / 3;
  }

  .featured-story:hover .featured-story__media img {
    transform: scale(1.015);
  }

  .featured-story__content {
    min-height: 0;

    padding: 1.4rem;
  }

  .featured-story__meta {
    margin-bottom: 1.5rem;
  }

  .featured-story__content h2 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .featured-story__content p {
    margin-top: 1rem;
  }

  .featured-story__content a {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
  }


  /* TOPIC INDEX */

  .insights-topics {
    padding-block: 4.75rem;
  }

  .insights-topics__header {
    margin-bottom: 2.75rem;
  }

  .insights-topics__grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.9rem;
  }

  .insights-topic {
    min-height: 180px;
    padding: 1.25rem;

    border-radius: 20px;
  }

  .insights-topic:hover {
    transform: none;
  }

  .insights-topic__number {
    margin-bottom: 2.4rem;

    font-size: 2.4rem;
  }

  .insights-topic h3 {
    max-width: 280px;

    font-size: 1.8rem;
  }


  /* LATEST ARTICLES */

  .insights-latest {
    padding-block: 4.75rem;
  }

  .insights-latest__header {
    margin-bottom: 2.75rem;
  }

  .insights-grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
  }

  .insight-card,
  .insight-card--large,
  .insight-card--quote {
    grid-column: auto;

    border-radius: 22px;
  }

  .insight-card:hover {
    transform: none;
  }

  .insight-card__media,
  .insight-card--large .insight-card__media {
    min-height: 250px;
    aspect-ratio: 4 / 3;
  }

  .insight-card:hover .insight-card__media img {
    transform: none;
  }

  .insight-card__content {
    padding: 1.35rem;
  }

  .insight-card h3,
  .insight-card--large h3 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .insight-card__status {
    margin-top: 1.5rem;
  }

  .insight-card--quote {
    min-height: 300px;
    padding: 1.4rem;
  }

  .insight-card--quote blockquote {
    font-size: clamp(1.85rem, 8vw, 2.5rem);
  }


  /* PRACTICAL GUIDES */

  .insights-guides {
    padding-block: 4.75rem;
  }

  .insights-guides__layout {
    gap: 2.75rem;
  }

  .guide-row {
    grid-template-columns:
      46px minmax(0, 1fr);

    gap: 1rem;

    padding: 1.2rem;

    border-radius: 20px;
  }

  .guide-row:hover {
    transform: none;
  }

  .guide-row__number {
    width: 44px;
    height: 44px;

    font-size: 1rem;
  }

  .guide-row h3 {
    font-size: 1.35rem;
  }

  .guide-row__type {
    grid-column: 2;

    min-height: 30px;

    font-size: 0.52rem;
  }


  /* EDITORIAL PRINCIPLES */

  .insights-principles {
    padding-block: 4.75rem;
  }

  .insights-principles__header {
    margin-bottom: 2.75rem;
  }

  .insights-principles__header h2 {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }

  .insights-principles__grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.9rem;
  }

  .insights-principles__grid article {
    min-height: 0;
    padding: 1.3rem;

    border-radius: 20px;
  }

  .insights-principles__grid article:hover {
    transform: none;
  }

  .insights-principles__grid article>span {
    margin-bottom: 2rem;
  }


  /* EDUCATION NOTE */

  .insights-note {
    padding-block: 3.75rem;
  }

  .insights-note__card {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.25rem;
    padding: 1.4rem;

    border-radius: 22px;
  }

  .insights-note__icon {
    width: 54px;
    height: 54px;

    font-size: 1.5rem;
  }

  .insights-note h2 {
    font-size: 1.8rem;
  }


  /* CTA */

  .insights-cta {
    padding-block: 4.75rem;
  }

  .insights-cta::before {
    background-size: 48px 48px;
  }

  .insights-cta__shape {
    right: -120px;
    bottom: -120px;

    width: 250px;
    height: 250px;

    border-width: 42px;
  }

  .insights-cta__title {
    font-size: clamp(2.75rem, 12vw, 3.8rem);
  }

  .insights-cta__description {
    font-size: 0.98rem;
  }

  .insights-cta__actions {
    align-items: stretch;

    width: 100%;
  }

  .insights-cta__actions .btn {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   SMALL MOBILE
   Maximum 420px
   ========================================================= */

@media (max-width: 420px) {
  .insights-hero {
    padding-top: 2.9rem;
  }

  .insights-hero__edition strong {
    font-size: 0.66rem;
  }

  .insights-hero__title {
    font-size: clamp(2.65rem, 13.8vw, 3.45rem);
  }

  .insights-hero__lead {
    font-size: 0.96rem;
  }

  .featured-story__media {
    min-height: 230px;
  }

  .featured-story__content {
    padding: 1.2rem;
  }

  .featured-story__content h2 {
    font-size: 1.95rem;
  }

  .insights-topic {
    min-height: 165px;
  }

  .insights-topic__arrow {
    width: 34px;
    height: 34px;
  }

  .insight-card__media,
  .insight-card--large .insight-card__media {
    min-height: 215px;
  }

  .insight-card__content {
    padding: 1.2rem;
  }

  .insight-card h3,
  .insight-card--large h3 {
    font-size: 1.95rem;
  }

  .guide-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-row__type {
    grid-column: auto;
  }

  .guide-row__number {
    width: 42px;
    height: 42px;
  }

  .insights-principles__header h2 {
    font-size: clamp(2.3rem, 10vw, 3rem);
  }

  .insights-note h2 {
    font-size: 1.65rem;
  }

  .insights-cta__title {
    font-size: clamp(2.45rem, 12vw, 3.2rem);
  }
}


/* =========================================================
   SHORT VIEWPORT
   ========================================================= */

@media (max-height: 720px) and (min-width: 1025px) {
  .insights-hero {
    padding-block: 4rem;
  }

  .insights-hero__masthead {
    margin-bottom: 2.75rem;
  }

  .insights-hero__title {
    font-size: clamp(3.8rem, 5.8vw, 5.4rem);
  }

  .featured-story__media {
    min-height: 430px;
  }
}


/* =========================================================
   TOUCH DEVICE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .featured-story:hover .featured-story__media img,
  .insights-topic:hover,
  .insight-card:hover,
  .guide-row:hover,
  .insights-principles__grid article:hover {
    transform: none;
  }

  .insights-topic:hover {
    background-color:
      rgba(255, 255, 255, 0.07);

    border-color:
      rgba(255, 255, 255, 0.12);

    box-shadow: none;
  }

  .insight-card:hover {
    border-color: var(--color-border);

    box-shadow:
      0 15px 38px rgba(43, 0, 53, 0.06);
  }

  .guide-row:hover {
    background-color: var(--color-cream-light);
    border-color: var(--color-border);

    box-shadow: none;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .featured-story__media img,
  .insights-topic,
  .insight-card,
  .insight-card__media img,
  .guide-row,
  .insights-principles__grid article {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   TIM KAMI PAGE V2 RESPONSIVE
   Consultant, Specialist & Divisions
   ========================================================= */


/* =========================================================
   LAPTOP
   Maximum 1280px
   ========================================================= */

@media (max-width: 1280px) {
  .team-v2-hero {
    min-height: auto;

    padding-block:
      clamp(5rem, 8vw, 7rem) clamp(4.5rem, 7vw, 6rem);
  }

  .team-v2-hero__layout {
    grid-template-columns:
      minmax(0, 1fr) minmax(360px, 0.68fr);

    gap: clamp(3rem, 5vw, 5rem);
  }

  .team-v2-hero__title {
    font-size: clamp(3.9rem, 6vw, 5.8rem);
  }

  .team-v2-hero__summary {
    padding: 2rem;
  }

  .team-people__grid {
    gap: 1.25rem;
  }

  .team-person--featured {
    grid-template-columns:
      minmax(0, 1.08fr) minmax(340px, 0.92fr);
  }

  .team-person--featured .team-person__photo {
    min-height: 570px;
  }

  .team-divisions__grid {
    gap: 1.25rem;
  }

  .team-division {
    padding: 2rem;
  }

  .team-flow__steps {
    gap: 0.9rem;
  }

  .team-flow__step {
    min-height: 310px;
    padding: 1.5rem;
  }

  .team-culture__layout {
    grid-template-columns:
      minmax(470px, 1.08fr) minmax(0, 0.92fr);

    gap: clamp(3rem, 6vw, 6rem);
  }

  .team-culture__media {
    min-height: 580px;
  }
}


/* =========================================================
   TABLET LANDSCAPE
   Maximum 1024px
   ========================================================= */

@media (max-width: 1024px) {
  .team-v2-hero {
    padding-block:
      clamp(4.5rem, 8vw, 6rem) clamp(4.5rem, 7vw, 5.5rem);
  }

  .team-v2-hero::before {
    top: -210px;
    right: -190px;

    width: 390px;
    height: 390px;

    border-width: 58px;
  }

  .team-v2-hero::after {
    bottom: -220px;
    left: -180px;

    width: 350px;
    height: 350px;
  }

  .team-v2-hero__pattern {
    background-size: 60px 60px;

    mask-image:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.84),
        transparent 86%);
  }

  .team-v2-hero__breadcrumb {
    margin-bottom: 2.5rem;
  }

  .team-v2-hero__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: clamp(3.5rem, 8vw, 5rem);
  }

  .team-v2-hero__content {
    max-width: 870px;
  }

  .team-v2-hero__title {
    max-width: 870px;

    font-size: clamp(4rem, 9vw, 6rem);
  }

  .team-v2-hero__lead {
    max-width: 780px;
  }

  .team-v2-hero__summary {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .team-people__header {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.5rem;
  }

  .team-people__header .text-lead {
    justify-self: start;

    max-width: 760px;
  }

  .team-person {
    grid-column: span 6;
  }

  .team-person--featured {
    grid-column: 1 / -1;

    grid-template-columns:
      minmax(0, 1fr) minmax(330px, 0.82fr);
  }

  .team-person--featured .team-person__photo {
    min-height: 540px;
  }

  .team-person__photo {
    min-height: 420px;
  }

  .team-divisions__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-division {
    min-height: 0;
  }

  .team-division h3 {
    max-width: 720px;
  }

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

  .team-flow__steps::before {
    display: none;
  }

  .team-flow__step {
    min-height: 290px;
  }

  .team-culture__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 4rem;
  }

  .team-culture__media {
    width: min(100%, 900px);
    min-height: 540px;
  }

  .team-culture__content {
    max-width: 820px;
  }
}


/* =========================================================
   TABLET PORTRAIT
   Maximum 820px
   ========================================================= */

@media (max-width: 820px) {
  .team-v2-hero {
    padding-top: clamp(4rem, 8vw, 5rem);
  }

  .team-v2-hero__title {
    font-size: clamp(3.5rem, 10.5vw, 5rem);
  }

  .team-v2-hero__lead {
    font-size: 1.08rem;
  }

  .team-v2-hero__summary {
    width: min(100%, 680px);
  }

  .team-person--featured {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-person--featured .team-person__photo {
    min-height: 500px;
    aspect-ratio: 4 / 3;
  }

  .team-person--featured .team-person__photo::after {
    background:
      linear-gradient(180deg,
        transparent 55%,
        rgba(43, 0, 53, 0.28));
  }

  .team-person--featured .team-person__content {
    min-height: 430px;
  }

  .team-person {
    grid-column: span 6;
  }

  .team-person__photo {
    min-height: 390px;
  }

  .team-person h3 {
    font-size: clamp(2rem, 5.5vw, 2.8rem);
  }

  .team-person--featured h3 {
    font-size: clamp(2.7rem, 7vw, 4rem);
  }

  .team-division {
    padding: 1.75rem;
  }

  .team-division h3 {
    font-size: clamp(2rem, 5.8vw, 3rem);
  }

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

  .team-flow__step {
    min-height: 270px;
  }

  .team-culture__media {
    min-height: 480px;
  }

  .team-v2-note__card {
    grid-template-columns:
      62px minmax(0, 1fr);
  }

  .team-v2-note__icon {
    width: 58px;
    height: 58px;
  }

  .team-v2-cta__title {
    font-size: clamp(3rem, 8vw, 4.7rem);
  }
}


/* =========================================================
   MOBILE
   Maximum 640px
   ========================================================= */

@media (max-width: 640px) {
  .team-v2-hero {
    padding-block: 3.5rem 4rem;
  }

  .team-v2-hero::before {
    top: -150px;
    right: -160px;

    width: 300px;
    height: 300px;

    border-width: 44px;
  }

  .team-v2-hero::after {
    bottom: -170px;
    left: -160px;

    width: 280px;
    height: 280px;
  }

  .team-v2-hero__pattern {
    opacity: 0.12;
    background-size: 46px 46px;
  }

  .team-v2-hero__breadcrumb {
    margin-bottom: 1.75rem;
  }

  .team-v2-hero__layout {
    gap: 3rem;
  }

  .team-v2-hero__eyebrow {
    margin-bottom: 1.5rem;

    font-size: 0.65rem;
  }

  .team-v2-hero__eyebrow::before {
    width: 26px;
  }

  .team-v2-hero__title {
    font-size: clamp(3rem, 14vw, 4.1rem);
    line-height: 0.92;

    letter-spacing: -0.047em;
  }

  .team-v2-hero__lead {
    margin-top: 1.5rem;

    font-size: 1rem;
    line-height: 1.7;
  }

  .team-v2-hero__actions {
    align-items: stretch;

    width: 100%;
    margin-top: 1.8rem;
  }

  .team-v2-hero__actions .btn {
    width: 100%;
    min-width: 0;
  }


  /* HERO SUMMARY */

  .team-v2-hero__summary {
    width: 100%;
    padding: 1.4rem;

    border-radius: 24px;
  }

  .team-v2-hero__summary::before {
    top: -60px;
    right: -55px;

    width: 155px;
    height: 155px;
  }

  .team-v2-hero__summary::after {
    right: 1.2rem;
    bottom: 1.2rem;

    width: 58px;
    height: 58px;

    border-width: 11px;
  }

  .team-v2-hero__summary-label {
    margin-bottom: 2rem;
  }

  .team-v2-hero__summary>strong {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .team-v2-hero__summary>p {
    font-size: 0.86rem;
  }

  .team-v2-hero__summary-points {
    padding-right: 4rem;
  }


  /* CONSULTANTS */

  .team-people {
    padding-block: 4.75rem;
  }

  .team-people__header {
    margin-bottom: 2.75rem;
  }

  .team-people__grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
  }

  .team-person,
  .team-person--featured {
    grid-column: auto;

    border-radius: 22px;
  }

  .team-person:hover {
    transform: none;
  }

  .team-person__photo,
  .team-person--featured .team-person__photo {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .team-person:hover .team-person__photo img {
    transform: none;
  }

  .team-person__content,
  .team-person--featured .team-person__content {
    min-height: 0;
    padding: 1.4rem;
  }

  .team-person--featured .team-person__content::after {
    right: -45px;
    bottom: -45px;

    width: 120px;
    height: 120px;

    border-width: 20px;
  }

  .team-person__category {
    min-height: 32px;
    margin-bottom: 1.4rem;

    font-size: 0.55rem;
  }

  .team-person h3,
  .team-person--featured h3 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .team-person__role {
    font-size: 0.62rem;
  }

  .team-person__description,
  .team-person--featured .team-person__description {
    margin-top: 1rem;

    font-size: 0.86rem;
  }

  .team-person__focus {
    margin-top: 1.6rem;
    padding-top: 0;
  }

  .team-person__focus span {
    min-height: 30px;

    font-size: 0.52rem;
  }


  /* DIVISIONS */

  .team-divisions {
    padding-block: 4.75rem;
  }

  .team-divisions__header {
    margin-bottom: 2.75rem;
  }

  .team-divisions__header .text-lead {
    margin-top: 1.5rem;
  }

  .team-divisions__grid {
    gap: 1rem;
  }

  .team-division {
    padding: 1.4rem;

    border-radius: 22px;
  }

  .team-division:hover {
    transform: none;
  }

  .team-division__top {
    margin-bottom: 1.75rem;
  }

  .team-division__number {
    font-size: 2.4rem;
  }

  .team-division__code {
    min-width: 44px;
    min-height: 32px;

    font-size: 0.56rem;
  }

  .team-division h3 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .team-division>p {
    margin-top: 1rem;

    font-size: 0.88rem;
  }

  .team-division ul {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.7rem;
    margin-top: 1.5rem;
  }


  /* TEAM FLOW */

  .team-flow {
    padding-block: 4.75rem;
  }

  .team-flow__header {
    margin-bottom: 2.75rem;
  }

  .team-flow__steps {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
  }

  .team-flow__step {
    display: grid;
    grid-template-columns:
      58px minmax(0, 1fr);

    min-height: 0;
    gap: 1rem;
    padding: 1.3rem;

    border-radius: 20px;
  }

  .team-flow__step:hover {
    transform: none;
  }

  .team-flow__step>span {
    width: 54px;
    height: 54px;
    margin-bottom: 0;

    font-size: 1.1rem;
  }

  .team-flow__step strong {
    font-size: 1.5rem;
  }


  /* COLLABORATION CULTURE */

  .team-culture {
    padding-block: 4.75rem;
  }

  .team-culture__layout {
    gap: 3rem;
  }

  .team-culture__media {
    min-height: 370px;

    border-radius: 24px;
  }

  .team-culture__media:hover img {
    transform: none;
  }

  .team-culture__media figcaption {
    right: 1.1rem;
    bottom: 1.1rem;
    left: 1.1rem;

    font-size: 1.7rem;
  }

  .team-culture__values {
    margin-top: 2rem;
  }

  .team-culture__values>div {
    grid-template-columns:
      46px minmax(0, 1fr);

    gap: 1rem;
    padding: 0.9rem;
  }

  .team-culture__values>div:hover {
    transform: none;
  }

  .team-culture__values span {
    width: 44px;
    height: 44px;

    font-size: 1rem;
  }

  .team-culture__values strong {
    font-size: 0.78rem;
  }


  /* NOTE */

  .team-v2-note {
    padding-block: 3.75rem;
  }

  .team-v2-note__card {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.25rem;
    padding: 1.4rem;

    border-radius: 22px;
  }

  .team-v2-note__icon {
    width: 54px;
    height: 54px;

    font-size: 1.5rem;
  }

  .team-v2-note h2 {
    font-size: 1.8rem;
  }


  /* CTA */

  .team-v2-cta {
    padding-block: 4.75rem;
  }

  .team-v2-cta::before {
    background-size: 48px 48px;
  }

  .team-v2-cta__shape {
    right: -120px;
    bottom: -120px;

    width: 250px;
    height: 250px;

    border-width: 42px;
  }

  .team-v2-cta__shape::after {
    inset: 32px;
  }

  .team-v2-cta__title {
    font-size: clamp(2.75rem, 12vw, 3.8rem);
  }

  .team-v2-cta__description {
    font-size: 0.98rem;
  }

  .team-v2-cta__actions {
    align-items: stretch;

    width: 100%;
  }

  .team-v2-cta__actions .btn {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   SMALL MOBILE
   Maximum 420px
   ========================================================= */

@media (max-width: 420px) {
  .team-v2-hero {
    padding-top: 3rem;
  }

  .team-v2-hero__title {
    font-size: clamp(2.65rem, 13.8vw, 3.45rem);
  }

  .team-v2-hero__lead {
    font-size: 0.96rem;
  }

  .team-v2-hero__summary {
    padding: 1.2rem;
  }

  .team-v2-hero__summary>strong {
    font-size: 2rem;
  }

  .team-v2-hero__summary-points {
    padding-right: 0;
  }

  .team-v2-hero__summary::after {
    display: none;
  }

  .team-person__photo,
  .team-person--featured .team-person__photo {
    aspect-ratio: 4 / 5.35;
  }

  .team-person__content,
  .team-person--featured .team-person__content {
    padding: 1.2rem;
  }

  .team-person h3,
  .team-person--featured h3 {
    font-size: 1.95rem;
  }

  .team-person__focus {
    gap: 0.45rem;
  }

  .team-division {
    padding: 1.2rem;
  }

  .team-division__top {
    align-items: flex-start;
  }

  .team-division h3 {
    font-size: 1.95rem;
  }

  .team-flow__step {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-flow__step>span {
    width: 50px;
    height: 50px;
  }

  .team-culture__media {
    min-height: 310px;
  }

  .team-culture__media figcaption {
    font-size: 1.45rem;
  }

  .team-culture__values>div {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-culture__values span {
    width: 42px;
    height: 42px;
  }

  .team-v2-note h2 {
    font-size: 1.65rem;
  }

  .team-v2-cta__title {
    font-size: clamp(2.45rem, 12vw, 3.2rem);
  }
}


/* =========================================================
   SHORT VIEWPORT
   ========================================================= */

@media (max-height: 720px) and (min-width: 1025px) {
  .team-v2-hero {
    min-height: auto;

    padding-block: 4.5rem 4rem;
  }

  .team-v2-hero__title {
    font-size: clamp(3.8rem, 5.8vw, 5.4rem);
  }

  .team-v2-hero__summary {
    padding: 1.6rem;
  }

  .team-v2-hero__summary-label {
    margin-bottom: 1.8rem;
  }

  .team-v2-hero__summary-points {
    margin-top: 1.8rem;
  }
}


/* =========================================================
   TOUCH DEVICE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .team-person:hover,
  .team-person:hover .team-person__photo img,
  .team-division:hover,
  .team-flow__step:hover,
  .team-culture__media:hover img,
  .team-culture__values>div:hover {
    transform: none;
  }

  .team-person:hover {
    border-color: var(--color-border);

    box-shadow:
      0 16px 42px rgba(43, 0, 53, 0.07);
  }

  .team-person--featured:hover {
    border-color:
      rgba(255, 255, 255, 0.08);
  }

  .team-division:hover {
    border-color: var(--color-border);

    box-shadow:
      0 16px 42px rgba(43, 0, 53, 0.07);
  }

  .team-division--legal:hover {
    border-color:
      rgba(255, 255, 255, 0.08);
  }

  .team-flow__step:hover {
    background-color:
      rgba(255, 255, 255, 0.075);

    border-color:
      rgba(255, 255, 255, 0.12);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .team-person,
  .team-person__photo img,
  .team-division,
  .team-flow__step,
  .team-culture__media img,
  .team-culture__values>div {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   PARTNER KAMI PAGE RESPONSIVE
   Collaboration Portfolio & Partner Ecosystem
   ========================================================= */


/* =========================================================
   LAPTOP
   Maximum 1280px
   ========================================================= */

@media (max-width: 1280px) {
  .partners-hero {
    min-height: auto;

    padding-block:
      clamp(5rem, 8vw, 7rem) clamp(4.5rem, 7vw, 6rem);
  }

  .partners-hero__layout {
    grid-template-columns:
      minmax(0, 1fr) minmax(410px, 0.8fr);

    gap: clamp(3rem, 5vw, 5rem);
  }

  .partners-hero__title {
    font-size: clamp(3.9rem, 6vw, 5.8rem);
  }

  .partners-hero__visual {
    width: min(100%, 570px);
    min-height: 610px;
  }

  .partners-statement__layout {
    grid-template-columns:
      minmax(0, 0.68fr) minmax(470px, 1.32fr);

    gap: clamp(3rem, 6vw, 6rem);
  }

  .partners-stories__grid {
    gap: 1.25rem;
  }

  .partner-story--large {
    grid-template-columns:
      minmax(0, 1.05fr) minmax(310px, 0.95fr);
  }

  .partner-story--wide {
    grid-template-columns:
      minmax(0, 1fr) minmax(280px, 0.9fr);
  }

  .partners-ecosystem__grid {
    gap: 0.9rem;
  }

  .partner-sector {
    min-height: 300px;
    padding: 1.5rem;
  }

  .partners-logo-grid {
    gap: 0.9rem;
  }

  .partner-logo {
    min-height: 160px;
  }

  .partners-models__grid {
    gap: 0.9rem;
  }

  .partner-model {
    min-height: 285px;
    padding: 1.5rem;
  }
}


/* =========================================================
   TABLET LANDSCAPE
   Maximum 1024px
   ========================================================= */

@media (max-width: 1024px) {
  .partners-hero {
    padding-block:
      clamp(4.5rem, 8vw, 6rem) clamp(4.5rem, 7vw, 5.5rem);
  }

  .partners-hero::before {
    top: -210px;
    left: -190px;

    width: 390px;
    height: 390px;

    border-width: 58px;
  }

  .partners-hero::after {
    right: -190px;
    bottom: -220px;

    width: 350px;
    height: 350px;
  }

  .partners-hero__pattern {
    background-size: 60px 60px;

    mask-image:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.84),
        transparent 86%);
  }

  .partners-hero__breadcrumb {
    margin-bottom: 2.5rem;
  }

  .partners-hero__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: clamp(3.5rem, 8vw, 5rem);
  }

  .partners-hero__content {
    max-width: 870px;
  }

  .partners-hero__title {
    max-width: 870px;

    font-size: clamp(4rem, 9vw, 6rem);
  }

  .partners-hero__lead {
    max-width: 780px;
  }

  .partners-hero__visual {
    width: min(100%, 690px);
    min-height: 650px;
    margin-inline: auto;
  }


  /* PARTNERSHIP STATEMENT */

  .partners-statement__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 3.5rem;
  }

  .partners-statement__intro {
    position: static;

    max-width: 820px;
  }

  .partners-statement__content {
    max-width: 900px;
  }


  /* COLLABORATION STORIES */

  .partners-stories__header {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.5rem;
  }

  .partners-stories__header .text-lead {
    justify-self: start;

    max-width: 760px;
  }

  .partner-story {
    grid-column: span 6;
  }

  .partner-story--large {
    grid-column: 1 / -1;
    grid-row: auto;

    min-height: 540px;
  }

  .partner-story--wide {
    grid-column: 1 / -1;
  }

  .partner-story__media {
    min-height: 330px;
  }

  .partner-story--large .partner-story__media {
    min-height: 540px;
  }

  .partner-story--wide .partner-story__media {
    min-height: 420px;
  }


  /* PARTNER ECOSYSTEM */

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

  .partner-sector {
    min-height: 275px;
  }


  /* LOGO WALL */

  .partners-logo-wall__header {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.5rem;
  }

  .partners-logo-wall__header .text-lead {
    justify-self: start;

    max-width: 760px;
  }

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

  .partner-logo {
    min-height: 155px;
  }


  /* PARTNERSHIP MODELS */

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

  .partner-model {
    min-height: 270px;
  }
}


/* =========================================================
   TABLET PORTRAIT
   Maximum 820px
   ========================================================= */

@media (max-width: 820px) {
  .partners-hero {
    padding-top: clamp(4rem, 8vw, 5rem);
  }

  .partners-hero__title {
    font-size: clamp(3.5rem, 10.5vw, 5rem);
  }

  .partners-hero__lead {
    font-size: 1.08rem;
  }

  .partners-hero__visual {
    width: min(100%, 610px);
    min-height: 590px;
  }

  .partners-hero__image--primary {
    width: 78%;
    height: 73%;
  }

  .partners-hero__image--secondary {
    width: 45%;
    height: 45%;
  }

  .partners-hero__badge--top {
    width: min(210px, 43%);
  }

  .partners-hero__badge--bottom {
    max-width: 230px;
  }

  .partners-statement__content>p {
    font-size: clamp(2rem, 6vw, 3.1rem);
  }

  .partner-story--large,
  .partner-story--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .partner-story--large .partner-story__media,
  .partner-story--wide .partner-story__media {
    min-height: 420px;
    aspect-ratio: 16 / 10;
  }

  .partner-story--large .partner-story__content {
    min-height: 390px;
  }

  .partner-story--large h3 {
    font-size: clamp(2.6rem, 7vw, 4rem);
  }

  .partner-sector {
    min-height: 260px;
  }

  .partners-note__card {
    grid-template-columns:
      62px minmax(0, 1fr);
  }

  .partners-note__icon {
    width: 58px;
    height: 58px;
  }

  .partners-cta__title {
    font-size: clamp(3rem, 8vw, 4.7rem);
  }
}


/* =========================================================
   MOBILE
   Maximum 640px
   ========================================================= */

@media (max-width: 640px) {
  .partners-hero {
    padding-block: 3.5rem 4rem;
  }

  .partners-hero::before {
    top: -150px;
    left: -160px;

    width: 300px;
    height: 300px;

    border-width: 44px;
  }

  .partners-hero::after {
    right: -160px;
    bottom: -170px;

    width: 280px;
    height: 280px;
  }

  .partners-hero__pattern {
    opacity: 0.12;
    background-size: 46px 46px;
  }

  .partners-hero__breadcrumb {
    margin-bottom: 1.75rem;
  }

  .partners-hero__layout {
    gap: 3rem;
  }

  .partners-hero__eyebrow {
    margin-bottom: 1.5rem;

    font-size: 0.65rem;
  }

  .partners-hero__eyebrow::before {
    width: 26px;
  }

  .partners-hero__title {
    font-size: clamp(3rem, 14vw, 4.1rem);
    line-height: 0.92;

    letter-spacing: -0.047em;
  }

  .partners-hero__lead {
    margin-top: 1.5rem;

    font-size: 1rem;
    line-height: 1.7;
  }

  .partners-hero__actions {
    align-items: stretch;

    width: 100%;
    margin-top: 1.8rem;
  }

  .partners-hero__actions .btn {
    width: 100%;
    min-width: 0;
  }


  /* HERO VISUAL */

  .partners-hero__visual {
    width: 100%;
    min-height: 520px;
  }

  .partners-hero__visual::before {
    top: 7%;
    right: 2%;
    bottom: 5%;
    left: 8%;

    border-radius: 30px;
  }

  .partners-hero__image--primary {
    width: 82%;
    height: 70%;

    border-radius: 28px;
  }

  .partners-hero__image--secondary {
    width: 48%;
    height: 43%;

    border-width: 6px;
    border-radius: 22px;
  }

  .partners-hero__image:hover img {
    transform: none;
  }

  .partners-hero__badge--top {
    top: 8%;

    width: min(190px, 47%);
    padding: 0.8rem 0.9rem;

    border-radius: 15px;
  }

  .partners-hero__badge--top strong {
    font-size: 0.98rem;
  }

  .partners-hero__badge--bottom {
    right: 0;
    bottom: 4%;

    max-width: 205px;
    padding: 0.7rem 0.8rem;

    border-radius: 15px;
  }

  .partners-hero__badge--bottom strong {
    font-size: 2rem;
  }

  .partners-hero__badge--bottom span {
    font-size: 0.61rem;
  }


  /* PARTNERSHIP STATEMENT */

  .partners-statement {
    padding-block: 4.75rem;
  }

  .partners-statement__layout {
    gap: 2.75rem;
  }

  .partners-statement__content>p {
    font-size: clamp(1.9rem, 9vw, 2.7rem);
  }

  .partners-statement__principles {
    gap: 0.5rem;

    margin-top: 1.75rem;
  }

  .partners-statement__principles span {
    min-height: 34px;
    padding: 0.5rem 0.68rem;

    font-size: 0.54rem;
  }


  /* COLLABORATION STORIES */

  .partners-stories {
    padding-block: 4.75rem;
  }

  .partners-stories__header {
    margin-bottom: 2.75rem;
  }

  .partners-stories__grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
  }

  .partner-story,
  .partner-story--large,
  .partner-story--wide {
    grid-column: auto;

    border-radius: 22px;
  }

  .partner-story:hover {
    transform: none;
  }

  .partner-story__media,
  .partner-story--large .partner-story__media,
  .partner-story--wide .partner-story__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .partner-story:hover .partner-story__media img {
    transform: none;
  }

  .partner-story__content,
  .partner-story--large .partner-story__content {
    min-height: 0;
    padding: 1.4rem;
  }

  .partner-story__category {
    min-height: 32px;
    margin-bottom: 1.4rem;

    font-size: 0.54rem;
  }

  .partner-story h3,
  .partner-story--large h3 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .partner-story__content p {
    margin-top: 1rem;
  }

  .partner-story__meta {
    margin-top: 1.5rem;
    padding-top: 0;
  }


  /* PARTNER ECOSYSTEM */

  .partners-ecosystem {
    padding-block: 4.75rem;
  }

  .partners-ecosystem__header {
    margin-bottom: 2.75rem;
  }

  .partners-ecosystem .text-lead {
    margin-top: 1.5rem;
  }

  .partners-ecosystem__grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
  }

  .partner-sector {
    min-height: 220px;
    padding: 1.3rem;

    border-radius: 20px;
  }

  .partner-sector:hover {
    transform: none;
  }

  .partner-sector__number {
    margin-bottom: 2.5rem;

    font-size: 2.5rem;
  }

  .partner-sector h3 {
    font-size: 1.75rem;
  }


  /* LOGO WALL */

  .partners-logo-wall {
    padding-block: 4.75rem;
  }

  .partners-logo-wall__header {
    margin-bottom: 2.75rem;
  }

  .partners-logo-group+.partners-logo-group {
    margin-top: 3rem;
  }

  .partners-logo-group__heading {
    align-items: flex-start;

    gap: 0.9rem;
    margin-bottom: 1.3rem;
    padding-bottom: 1rem;
  }

  .partners-logo-group__heading>span {
    width: 38px;
    height: 38px;

    font-size: 0.9rem;
  }

  .partners-logo-group__heading h3 {
    padding-top: 0.3rem;

    font-size: 1.55rem;
  }

  .partners-logo-grid,
  .partners-logo-grid--extended {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 0.75rem;
  }

  .partner-logo {
    min-height: 130px;
    padding: 1rem;

    border-radius: 18px;
  }

  .partner-logo:hover {
    transform: none;
  }

  .partner-logo>span {
    font-size: 1.2rem;
  }

  .partner-logo>small {
    font-size: 0.5rem;
  }

  .partner-logo img {
    max-width: 82%;
    max-height: 52px;
  }

  .partner-logo:hover img {
    transform: none;
  }


  /* PARTNERSHIP MODELS */

  .partners-models {
    padding-block: 4.75rem;
  }

  .partners-models__header {
    margin-bottom: 2.75rem;
  }

  .partners-models__grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
  }

  .partner-model {
    min-height: 0;
    padding: 1.35rem;

    border-radius: 20px;
  }

  .partner-model:hover {
    transform: none;
  }

  .partner-model>span {
    margin-bottom: 2.5rem;

    font-size: 2.2rem;
  }

  .partner-model h3 {
    margin-top: 0;

    font-size: 1.6rem;
  }


  /* PUBLICATION NOTE */

  .partners-note {
    padding-block: 3.75rem;
  }

  .partners-note__card {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.25rem;
    padding: 1.4rem;

    border-radius: 22px;
  }

  .partners-note__icon {
    width: 54px;
    height: 54px;

    font-size: 1.5rem;
  }

  .partners-note h2 {
    font-size: 1.8rem;
  }


  /* CTA */

  .partners-cta {
    padding-block: 4.75rem;
  }

  .partners-cta::before {
    background-size: 48px 48px;
  }

  .partners-cta__shape {
    right: -120px;
    bottom: -120px;

    width: 250px;
    height: 250px;

    border-width: 42px;
  }

  .partners-cta__shape::after {
    inset: 32px;
  }

  .partners-cta__title {
    font-size: clamp(2.75rem, 12vw, 3.8rem);
  }

  .partners-cta__description {
    font-size: 0.98rem;
  }

  .partners-cta__actions {
    align-items: stretch;

    width: 100%;
  }

  .partners-cta__actions .btn {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   SMALL MOBILE
   Maximum 420px
   ========================================================= */

@media (max-width: 420px) {
  .partners-hero {
    padding-top: 3rem;
  }

  .partners-hero__title {
    font-size: clamp(2.65rem, 13.8vw, 3.45rem);
  }

  .partners-hero__lead {
    font-size: 0.96rem;
  }


  /* HERO VISUAL SIMPLIFICATION */

  .partners-hero__visual {
    min-height: 455px;
  }

  .partners-hero__image--primary {
    width: 88%;
    height: 70%;
  }

  .partners-hero__image--secondary {
    width: 52%;
    height: 42%;
  }

  .partners-hero__badge--top {
    display: none;
  }

  .partners-hero__badge--bottom {
    right: 0;
    bottom: 2%;

    max-width: 190px;
  }


  /* STORIES */

  .partners-statement__content>p {
    font-size: 1.9rem;
  }

  .partner-story__media,
  .partner-story--large .partner-story__media,
  .partner-story--wide .partner-story__media {
    aspect-ratio: 4 / 3.2;
  }

  .partner-story__content,
  .partner-story--large .partner-story__content {
    padding: 1.2rem;
  }

  .partner-story h3,
  .partner-story--large h3 {
    font-size: 1.95rem;
  }


  /* LOGOS */

  .partners-logo-grid,
  .partners-logo-grid--extended {
    grid-template-columns: minmax(0, 1fr);
  }

  .partner-logo {
    min-height: 125px;
  }

  .partner-logo img {
    max-width: 75%;
    max-height: 58px;
  }


  /* OTHER SECTIONS */

  .partner-sector {
    min-height: 205px;
  }

  .partner-model>span {
    margin-bottom: 2rem;
  }

  .partners-note h2 {
    font-size: 1.65rem;
  }

  .partners-cta__title {
    font-size: clamp(2.45rem, 12vw, 3.2rem);
  }
}


/* =========================================================
   SHORT VIEWPORT
   ========================================================= */

@media (max-height: 720px) and (min-width: 1025px) {
  .partners-hero {
    min-height: auto;

    padding-block: 4.5rem 4rem;
  }

  .partners-hero__title {
    font-size: clamp(3.8rem, 5.8vw, 5.4rem);
  }

  .partners-hero__visual {
    min-height: 560px;
  }

  .partners-hero__badge--top {
    top: 8%;
  }
}


/* =========================================================
   TOUCH DEVICE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .partners-hero__image:hover img,
  .partner-story:hover,
  .partner-story:hover .partner-story__media img,
  .partner-sector:hover,
  .partner-logo:hover,
  .partner-logo:hover img,
  .partner-model:hover {
    transform: none;
  }

  .partner-story:hover {
    border-color: var(--color-border);

    box-shadow:
      0 16px 42px rgba(43, 0, 53, 0.07);
  }

  .partner-story--large:hover {
    border-color:
      rgba(255, 255, 255, 0.08);
  }

  .partner-sector:hover {
    background-color:
      rgba(255, 255, 255, 0.075);

    border-color:
      rgba(255, 255, 255, 0.12);
  }

  .partner-logo:hover {
    background-color: var(--color-cream-light);
    border-color: var(--color-border);

    box-shadow: none;
  }

  .partner-logo:hover img {
    filter: grayscale(1);
    opacity: 0.72;
  }

  .partner-model:hover {
    color: inherit;
    background: var(--color-white);
    border-color: var(--color-border);

    box-shadow:
      0 14px 34px rgba(43, 0, 53, 0.055);
  }

  .partner-model:hover h3 {
    color: var(--color-plum);
  }

  .partner-model:hover p {
    color: var(--color-text-soft);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .partners-hero__image img,
  .partner-story,
  .partner-story__media img,
  .partner-sector,
  .partner-logo,
  .partner-logo img,
  .partner-model {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   KONTAK PAGE RESPONSIVE
   Contact Concierge & Initial Brief
   ========================================================= */


/* =========================================================
   LAPTOP
   Maximum 1280px
   ========================================================= */

@media (max-width: 1280px) {
  .contact-hero {
    min-height: auto;

    padding-block:
      clamp(5rem, 8vw, 7rem) clamp(4.5rem, 7vw, 6rem);
  }

  .contact-hero__layout {
    grid-template-columns:
      minmax(0, 1fr) minmax(370px, 0.7fr);

    gap: clamp(3rem, 5vw, 5rem);
  }

  .contact-hero__title {
    font-size: clamp(3.9rem, 6vw, 5.8rem);
  }

  .contact-desk {
    padding: 2rem;
  }

  .contact-channels__grid {
    gap: 0.9rem;
  }

  .contact-channel {
    min-height: 305px;
    padding: 1.5rem;
  }

  .contact-routing__grid {
    gap: 1.25rem;
  }

  .contact-route {
    grid-template-columns:
      66px minmax(0, 1fr);

    padding: 1.8rem;
  }

  .contact-route__code {
    width: 60px;
    height: 60px;
  }

  .contact-brief__layout {
    grid-template-columns:
      minmax(0, 0.72fr) minmax(520px, 1.28fr);

    gap: clamp(3rem, 6vw, 6rem);
  }

  .contact-office__layout {
    grid-template-columns:
      minmax(470px, 1.08fr) minmax(0, 0.92fr);

    gap: clamp(3rem, 6vw, 6rem);
  }

  .contact-office__map,
  .contact-office__map iframe {
    min-height: 570px;
  }

  .contact-response__steps {
    gap: 0.9rem;
  }

  .contact-response__step {
    min-height: 285px;
    padding: 1.5rem;
  }
}


/* =========================================================
   TABLET LANDSCAPE
   Maximum 1024px
   ========================================================= */

@media (max-width: 1024px) {
  .contact-hero {
    padding-block:
      clamp(4.5rem, 8vw, 6rem) clamp(4.5rem, 7vw, 5.5rem);
  }

  .contact-hero::before {
    top: -210px;
    right: -190px;

    width: 390px;
    height: 390px;

    border-width: 58px;
  }

  .contact-hero::after {
    bottom: -220px;
    left: -180px;

    width: 350px;
    height: 350px;
  }

  .contact-hero__paper {
    background-size: 100% 28px;
  }

  .contact-hero__breadcrumb {
    margin-bottom: 2.5rem;
  }

  .contact-hero__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: clamp(3.5rem, 8vw, 5rem);
  }

  .contact-hero__content {
    max-width: 870px;
  }

  .contact-hero__title {
    max-width: 870px;

    font-size: clamp(4rem, 9vw, 6rem);
  }

  .contact-hero__lead {
    max-width: 780px;
  }

  .contact-desk {
    width: min(100%, 760px);
    margin-inline: auto;
  }


  /* CONTACT CHANNELS */

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

  .contact-channel {
    min-height: 285px;
  }


  /* INQUIRY ROUTING */

  .contact-routing__header {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.5rem;
  }

  .contact-routing__header .text-lead {
    justify-self: start;

    max-width: 760px;
  }


  /* CONTACT BRIEF */

  .contact-brief__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 4rem;
  }

  .contact-brief__intro {
    position: static;

    max-width: 850px;
  }

  .contact-brief__tips {
    max-width: 760px;
  }

  .contact-form {
    width: min(100%, 900px);
  }


  /* OFFICE */

  .contact-office__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 4rem;
  }

  .contact-office__map {
    width: min(100%, 900px);
  }

  .contact-office__map,
  .contact-office__map iframe {
    min-height: 520px;
  }

  .contact-office__content {
    max-width: 820px;
  }


  /* RESPONSE FLOW */

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

  .contact-response__steps::before {
    display: none;
  }

  .contact-response__step {
    min-height: 260px;
  }
}


/* =========================================================
   TABLET PORTRAIT
   Maximum 820px
   ========================================================= */

@media (max-width: 820px) {
  .contact-hero {
    padding-top: clamp(4rem, 8vw, 5rem);
  }

  .contact-hero__title {
    font-size: clamp(3.5rem, 10.5vw, 5rem);
  }

  .contact-hero__lead {
    font-size: 1.08rem;
  }

  .contact-desk {
    width: min(100%, 680px);
  }

  .contact-channel {
    min-height: 270px;
  }

  .contact-route {
    grid-template-columns:
      60px minmax(0, 1fr);
  }

  .contact-route__code {
    width: 56px;
    height: 56px;
  }

  .contact-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form__field--full {
    grid-column: auto;
  }

  .contact-office__map,
  .contact-office__map iframe {
    min-height: 470px;
  }

  .contact-note__card {
    grid-template-columns:
      62px minmax(0, 1fr);
  }

  .contact-note__icon {
    width: 58px;
    height: 58px;
  }

  .contact-cta__title {
    font-size: clamp(3rem, 8vw, 4.7rem);
  }
}


/* =========================================================
   MOBILE
   Maximum 640px
   ========================================================= */

@media (max-width: 640px) {
  .contact-hero {
    padding-block: 3.5rem 4rem;
  }

  .contact-hero::before {
    top: -150px;
    right: -160px;

    width: 300px;
    height: 300px;

    border-width: 44px;
  }

  .contact-hero::after {
    bottom: -170px;
    left: -160px;

    width: 280px;
    height: 280px;
  }

  .contact-hero__paper {
    opacity: 0.24;
    background-size: 100% 24px;
  }

  .contact-hero__breadcrumb {
    margin-bottom: 1.75rem;
  }

  .contact-hero__layout {
    gap: 3rem;
  }

  .contact-hero__eyebrow {
    margin-bottom: 1.5rem;

    font-size: 0.65rem;
  }

  .contact-hero__eyebrow::before {
    width: 26px;
  }

  .contact-hero__title {
    font-size: clamp(3rem, 14vw, 4.1rem);
    line-height: 0.92;

    letter-spacing: -0.047em;
  }

  .contact-hero__lead {
    margin-top: 1.5rem;

    font-size: 1rem;
    line-height: 1.7;
  }

  .contact-hero__actions {
    align-items: stretch;

    width: 100%;
    margin-top: 1.8rem;
  }

  .contact-hero__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .contact-hero__trust {
    gap: 0.75rem 1rem;

    margin-top: 1.7rem;
  }

  .contact-hero__trust span {
    font-size: 0.58rem;
  }


  /* CONTACT DESK */

  .contact-desk {
    width: 100%;
    padding: 1.4rem;

    border-radius: 24px;
  }

  .contact-desk__header {
    margin-bottom: 2.4rem;
  }

  .contact-desk__mark {
    width: 46px;
    height: 46px;

    font-size: 1rem;
  }

  .contact-desk>h2 {
    font-size: clamp(2.1rem, 9vw, 2.9rem);
  }

  .contact-desk>p {
    font-size: 0.86rem;
  }

  .contact-desk__details {
    margin-top: 1.7rem;
  }

  .contact-desk__details a {
    padding: 0.85rem 0.9rem;
  }

  .contact-desk__details a:hover {
    transform: none;
  }

  .contact-desk__details strong {
    font-size: 0.78rem;
  }

  .contact-desk__footer {
    margin-top: 1.8rem;
  }


  /* CONTACT CHANNELS */

  .contact-channels {
    padding-block: 4.75rem;
  }

  .contact-channels__header {
    margin-bottom: 2.75rem;
  }

  .contact-channels__grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
  }

  .contact-channel {
    min-height: 245px;
    padding: 1.3rem;

    border-radius: 20px;
  }

  .contact-channel:hover {
    transform: none;
  }

  .contact-channel__label {
    margin-top: 2.5rem;
  }

  .contact-channel h3 {
    font-size: 1.75rem;
  }


  /* INQUIRY ROUTING */

  .contact-routing {
    padding-block: 4.75rem;
  }

  .contact-routing__header {
    margin-bottom: 2.75rem;
  }

  .contact-routing__grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
  }

  .contact-route {
    grid-template-columns:
      52px minmax(0, 1fr);

    gap: 1rem;
    padding: 1.3rem;

    border-radius: 20px;
  }

  .contact-route:hover {
    transform: none;
  }

  .contact-route__code {
    width: 50px;
    height: 50px;

    font-size: 0.84rem;
  }

  .contact-route h3 {
    font-size: clamp(1.65rem, 7vw, 2.1rem);
  }

  .contact-route>a {
    grid-column: 2;

    margin-top: 1.3rem;
  }


  /* CONTACT BRIEF */

  .contact-brief {
    padding-block: 4.75rem;
  }

  .contact-brief__layout {
    gap: 3rem;
  }

  .contact-brief .text-lead {
    margin-top: 1.5rem;
  }

  .contact-brief__tips {
    margin-top: 2rem;
    padding: 1.2rem;

    border-radius: 20px;
  }

  .contact-form {
    padding: 1.35rem;

    border-radius: 24px;
  }

  .contact-form__header {
    margin-bottom: 2rem;
  }

  .contact-form__header strong {
    font-size: 1.9rem;
  }

  .contact-form__grid {
    gap: 1rem;
  }

  .contact-form__field input,
  .contact-form__field select {
    min-height: 50px;
  }

  .contact-form__field textarea {
    min-height: 150px;
  }

  .contact-form__consent {
    gap: 0.65rem;
  }

  .contact-form__submit {
    width: 100%;
  }


  /* OFFICE */

  .contact-office {
    padding-block: 4.75rem;
  }

  .contact-office__layout {
    gap: 3rem;
  }

  .contact-office__map {
    border-radius: 24px;
  }

  .contact-office__map,
  .contact-office__map iframe {
    min-height: 390px;
  }

  .contact-office__map-label {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;

    padding: 0.9rem 1rem;
  }

  .contact-office__map-label strong {
    font-size: 1.35rem;
  }

  .contact-office__address {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
  }

  .contact-office__actions {
    align-items: stretch;

    width: 100%;
  }

  .contact-office__actions .btn {
    width: 100%;
  }


  /* RESPONSE FLOW */

  .contact-response {
    padding-block: 4.75rem;
  }

  .contact-response__header {
    margin-bottom: 2.75rem;
  }

  .contact-response__steps {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
  }

  .contact-response__step {
    display: grid;
    grid-template-columns:
      58px minmax(0, 1fr);

    min-height: 0;
    gap: 1rem;
    padding: 1.3rem;

    border-radius: 20px;
  }

  .contact-response__step:hover {
    transform: none;
  }

  .contact-response__step>span {
    width: 54px;
    height: 54px;
    margin-bottom: 0;

    border-width: 6px;

    font-size: 1.05rem;
  }

  .contact-response__step strong {
    font-size: 1.45rem;
  }


  /* CONTACT NOTE */

  .contact-note {
    padding-block: 3.75rem;
  }

  .contact-note__card {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.25rem;
    padding: 1.4rem;

    border-radius: 22px;
  }

  .contact-note__icon {
    width: 54px;
    height: 54px;

    font-size: 1.5rem;
  }

  .contact-note h2 {
    font-size: 1.8rem;
  }


  /* CTA */

  .contact-cta {
    padding-block: 4.75rem;
  }

  .contact-cta::before {
    background-size: 48px 48px;
  }

  .contact-cta__shape {
    right: -120px;
    bottom: -120px;

    width: 250px;
    height: 250px;

    border-width: 42px;
  }

  .contact-cta__shape::after {
    inset: 32px;
  }

  .contact-cta__title {
    font-size: clamp(2.75rem, 12vw, 3.8rem);
  }

  .contact-cta__description {
    font-size: 0.98rem;
  }

  .contact-cta__actions {
    align-items: stretch;

    width: 100%;
  }

  .contact-cta__actions .btn {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   SMALL MOBILE
   Maximum 420px
   ========================================================= */

@media (max-width: 420px) {
  .contact-hero {
    padding-top: 3rem;
  }

  .contact-hero__title {
    font-size: clamp(2.65rem, 13.8vw, 3.45rem);
  }

  .contact-hero__lead {
    font-size: 0.96rem;
  }

  .contact-hero__trust {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-desk {
    padding: 1.2rem;
  }

  .contact-desk__status {
    font-size: 0.52rem;
  }

  .contact-desk>h2 {
    font-size: 2rem;
  }

  .contact-channel {
    min-height: 225px;
  }

  .contact-route {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-route>a {
    grid-column: auto;
  }

  .contact-route__code {
    width: 48px;
    height: 48px;
  }

  .contact-form {
    padding: 1.2rem;
  }

  .contact-form__header strong {
    font-size: 1.7rem;
  }

  .contact-office__map,
  .contact-office__map iframe {
    min-height: 330px;
  }

  .contact-office__map-label {
    position: absolute;
  }

  .contact-office__map-label strong {
    font-size: 1.2rem;
  }

  .contact-response__step {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-response__step>span {
    width: 50px;
    height: 50px;
  }

  .contact-note h2 {
    font-size: 1.65rem;
  }

  .contact-cta__title {
    font-size: clamp(2.45rem, 12vw, 3.2rem);
  }
}


/* =========================================================
   SHORT VIEWPORT
   ========================================================= */

@media (max-height: 720px) and (min-width: 1025px) {
  .contact-hero {
    min-height: auto;

    padding-block: 4.5rem 4rem;
  }

  .contact-hero__title {
    font-size: clamp(3.8rem, 5.8vw, 5.4rem);
  }

  .contact-desk {
    padding: 1.7rem;
  }

  .contact-desk__header {
    margin-bottom: 2rem;
  }

  .contact-desk__details {
    margin-top: 1.8rem;
  }
}


/* =========================================================
   TOUCH DEVICE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .contact-desk__details a:hover,
  .contact-channel:hover,
  .contact-route:hover,
  .contact-response__step:hover {
    transform: none;
  }

  .contact-channel:hover {
    color: inherit;
    background: var(--color-cream-light);
    border-color: var(--color-border);

    box-shadow: none;
  }

  .contact-channel:hover h3 {
    color: var(--color-plum);
  }

  .contact-channel:hover p {
    color: var(--color-text-soft);
  }

  .contact-channel:hover>strong {
    color: var(--color-primary);
  }

  .contact-channel:hover .contact-channel__arrow {
    color: var(--color-white);
    background-color: var(--color-primary);

    transform: none;
  }

  .contact-channel--whatsapp:hover {
    color: var(--color-white);

    background:
      linear-gradient(145deg,
        var(--color-primary),
        var(--color-plum));

    border-color:
      rgba(255, 255, 255, 0.08);
  }

  .contact-channel--whatsapp:hover h3 {
    color: var(--color-white);
  }

  .contact-channel--whatsapp:hover p {
    color: rgba(255, 255, 255, 0.66);
  }

  .contact-channel--whatsapp:hover>strong {
    color: var(--color-orange-light);
  }

  .contact-channel--whatsapp:hover .contact-channel__arrow {
    color: var(--color-plum);
    background-color: var(--color-orange);
  }

  .contact-route:hover {
    border-color: var(--color-border);

    box-shadow:
      0 15px 38px rgba(43, 0, 53, 0.06);
  }

  .contact-response__step:hover {
    border-color: var(--color-border);

    box-shadow:
      0 14px 34px rgba(43, 0, 53, 0.055);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .contact-desk__details a,
  .contact-channel,
  .contact-channel__arrow,
  .contact-route,
  .contact-route>a,
  .contact-response__step {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   KONSULTASI PAGE RESPONSIVE
   Interactive Consultation Navigator
   ========================================================= */


/* =========================================================
   LAPTOP
   Maximum 1280px
   ========================================================= */

@media (max-width: 1280px) {
  .consult-hero {
    min-height: auto;

    padding-block:
      clamp(5rem, 8vw, 7rem) clamp(4.5rem, 7vw, 6rem);
  }

  .consult-hero__layout {
    grid-template-columns:
      minmax(0, 1fr) minmax(390px, 0.72fr);

    gap: clamp(3rem, 5vw, 5rem);
  }

  .consult-hero__title {
    font-size: clamp(3.9rem, 6vw, 5.8rem);
  }

  .consult-hero__navigator {
    width: min(100%, 500px);
    padding: 2rem;
  }

  .consult-hero__navigator-orbit {
    width: min(100%, 350px);
  }

  .consult-options--stage {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .consult-option--vertical {
    min-height: 250px;
  }

  .consult-preparation__grid {
    gap: 0.9rem;
  }

  .consult-preparation-card {
    min-height: 285px;
    padding: 1.5rem;
  }
}


/* =========================================================
   TABLET LANDSCAPE
   Maximum 1024px
   ========================================================= */

@media (max-width: 1024px) {
  .consult-hero {
    padding-block:
      clamp(4.5rem, 8vw, 6rem) clamp(4.5rem, 7vw, 5.5rem);
  }

  .consult-hero::before {
    top: -210px;
    left: -190px;

    width: 390px;
    height: 390px;

    border-width: 58px;
  }

  .consult-hero::after {
    right: -190px;
    bottom: -220px;

    width: 350px;
    height: 350px;
  }

  .consult-hero__grid {
    background-size: 60px 60px;

    mask-image:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.84),
        transparent 88%);
  }

  .consult-hero__breadcrumb {
    margin-bottom: 2.5rem;
  }

  .consult-hero__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: clamp(3.5rem, 8vw, 5rem);
  }

  .consult-hero__content {
    max-width: 880px;
  }

  .consult-hero__title {
    max-width: 880px;

    font-size: clamp(4rem, 9vw, 6rem);
  }

  .consult-hero__lead {
    max-width: 780px;
  }

  .consult-hero__navigator {
    width: min(100%, 720px);
    margin-inline: auto;
  }

  .consult-hero__navigator-orbit {
    width: min(100%, 390px);
  }


  /* WIZARD HEADER */

  .consult-wizard-section__header {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.5rem;
  }

  .consult-wizard-section__header .text-lead {
    justify-self: start;

    max-width: 760px;
  }


  /* TOPIC OPTIONS */

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

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

  .consult-option--vertical {
    min-height: 230px;
  }


  /* RESULT */

  .consult-result__layout {
    grid-template-columns:
      minmax(0, 1.15fr) minmax(280px, 0.85fr);
  }

  .consult-result__facts {
    grid-template-columns: minmax(0, 1fr);
  }


  /* PREPARATION */

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

  .consult-preparation-card {
    min-height: 265px;
  }
}


/* =========================================================
   TABLET PORTRAIT
   Maximum 820px
   ========================================================= */

@media (max-width: 820px) {
  .consult-hero {
    padding-top: clamp(4rem, 8vw, 5rem);
  }

  .consult-hero__title {
    font-size: clamp(3.5rem, 10.5vw, 5rem);
  }

  .consult-hero__lead {
    font-size: 1.08rem;
  }

  .consult-hero__navigator {
    width: min(100%, 650px);
  }


  /* PROGRESS */

  .consult-wizard__progress-steps {
    gap: 0.5rem;
  }

  .consult-wizard__progress-steps li {
    font-size: 0.52rem;
  }


  /* STEPS */

  .consult-step__header {
    grid-template-columns:
      62px minmax(0, 1fr);
  }

  .consult-step__number {
    width: 58px;
    height: 58px;

    border-width: 7px;
  }

  .consult-step__header h3 {
    font-size: clamp(2.1rem, 6vw, 3.3rem);
  }


  /* STAGE OPTIONS */

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


  /* GOALS */

  .consult-goals {
    grid-template-columns: minmax(0, 1fr);
  }


  /* MODE */

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


  /* RESULT */

  .consult-result__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .consult-result__readiness {
    min-height: 290px;
  }

  .consult-result__score {
    margin-top: 2.5rem;
  }

  .consult-result__details {
    grid-template-columns: minmax(0, 1fr);
  }

  .consult-note__card {
    grid-template-columns:
      62px minmax(0, 1fr);
  }

  .consult-note__icon {
    width: 58px;
    height: 58px;
  }

  .consult-cta__title {
    font-size: clamp(3rem, 8vw, 4.7rem);
  }
}


/* =========================================================
   MOBILE
   Maximum 640px
   ========================================================= */

@media (max-width: 640px) {
  .consult-hero {
    padding-block: 3.5rem 4rem;
  }

  .consult-hero::before {
    top: -150px;
    left: -160px;

    width: 300px;
    height: 300px;

    border-width: 44px;
  }

  .consult-hero::after {
    right: -160px;
    bottom: -170px;

    width: 280px;
    height: 280px;
  }

  .consult-hero__grid {
    opacity: 0.12;
    background-size: 46px 46px;
  }

  .consult-hero__breadcrumb {
    margin-bottom: 1.75rem;
  }

  .consult-hero__layout {
    gap: 3rem;
  }

  .consult-hero__eyebrow {
    margin-bottom: 1.5rem;

    font-size: 0.65rem;
  }

  .consult-hero__eyebrow::before {
    width: 26px;
  }

  .consult-hero__title {
    font-size: clamp(3rem, 14vw, 4.1rem);
    line-height: 0.92;

    letter-spacing: -0.047em;
  }

  .consult-hero__lead {
    margin-top: 1.5rem;

    font-size: 1rem;
    line-height: 1.7;
  }

  .consult-hero__actions {
    align-items: stretch;

    width: 100%;
    margin-top: 1.8rem;
  }

  .consult-hero__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .consult-hero__features {
    align-items: flex-start;
    flex-direction: column;

    gap: 0.75rem;
    margin-top: 1.8rem;
  }


  /* HERO NAVIGATOR */

  .consult-hero__navigator {
    width: 100%;
    padding: 1.3rem;

    border-radius: 24px;
  }

  .consult-hero__navigator-top {
    padding-bottom: 1rem;
  }

  .consult-hero__navigator-orbit {
    width: min(100%, 300px);
    margin-block: 2rem;
  }

  .consult-hero__navigator-core {
    width: 108px;
    height: 108px;

    border-width: 8px;
  }

  .consult-hero__navigator-core strong {
    font-size: 1rem;
  }

  .consult-hero__navigator-node {
    min-width: 58px;
    min-height: 31px;
    padding: 0.4rem 0.55rem;

    font-size: 0.48rem;
  }

  .consult-hero__navigator-node--two {
    right: -2%;
  }

  .consult-hero__navigator-node--four {
    left: -2%;
  }

  .consult-hero__navigator>p {
    font-size: 0.8rem;
  }


  /* WIZARD SECTION */

  .consult-wizard-section {
    padding-block: 4.75rem;
  }

  .consult-wizard-section__header {
    margin-bottom: 2.75rem;
  }

  .consult-wizard {
    border-radius: 24px;
  }


  /* PROGRESS */

  .consult-wizard__progress {
    padding: 1.3rem;
  }

  .consult-wizard__progress-head {
    align-items: flex-start;
  }

  .consult-wizard__progress-head strong {
    font-size: 1.55rem;
  }

  .consult-wizard__progress-value {
    font-size: 2rem !important;
  }

  .consult-wizard__progress-track {
    margin-top: 1.4rem;
  }

  .consult-wizard__progress-steps {
    grid-template-columns:
      repeat(5, minmax(64px, 1fr));

    width: 100%;
    margin-top: 1rem;
    padding-bottom: 0.35rem;

    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .consult-wizard__progress-steps li {
    min-width: 64px;

    font-size: 0.5rem;
    white-space: nowrap;
  }


  /* STEPS */

  .consult-step {
    padding: 1.3rem;
  }

  .consult-step__header {
    grid-template-columns:
      52px minmax(0, 1fr);

    gap: 1rem;
    margin-bottom: 2.3rem;
  }

  .consult-step__number {
    width: 50px;
    height: 50px;

    border-width: 6px;

    font-size: 1rem;
  }

  .consult-step__eyebrow {
    font-size: 0.55rem;
  }

  .consult-step__header h3 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .consult-step__header p {
    margin-top: 0.9rem;

    font-size: 0.84rem;
  }

  .consult-step__actions {
    align-items: stretch;
    flex-direction: column-reverse;

    width: 100%;
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  .consult-step__actions--end {
    flex-direction: column;
  }

  .consult-step__actions .btn {
    width: 100%;
    min-width: 0;
  }


  /* OPTIONS */

  .consult-options,
  .consult-options--topics,
  .consult-options--stage {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.85rem;
  }

  .consult-option {
    grid-template-columns:
      52px minmax(0, 1fr) 30px;

    min-height: 125px;
    gap: 0.85rem;
    padding: 1rem;

    border-radius: 18px;
  }

  .consult-option:hover,
  .consult-option:has(input:checked) {
    transform: none;
  }

  .consult-option__code {
    width: 48px;
    height: 48px;

    font-size: 0.85rem;
  }

  .consult-option__content strong {
    font-size: 1.3rem;
  }

  .consult-option__content small {
    font-size: 0.7rem;
  }

  .consult-option__check {
    width: 27px;
    height: 27px;
  }

  .consult-option--vertical {
    display: grid;
    grid-template-columns:
      52px minmax(0, 1fr) 30px;

    align-items: center;

    min-height: 130px;
  }

  .consult-option--vertical .consult-option__index {
    margin-bottom: 0;
  }

  .consult-option--vertical .consult-option__check {
    position: static;
  }

  .consult-option__index {
    font-size: 2rem;
  }


  /* URGENCY */

  .consult-urgency {
    margin-top: 2rem;
    padding: 1.15rem;

    border-radius: 18px;
  }

  .consult-urgency__options {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.7rem;
  }

  .consult-urgency__options span {
    justify-content: flex-start;

    min-height: 48px;

    text-align: left;
  }


  /* GOALS */

  .consult-goals {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.8rem;
  }

  .consult-goal {
    grid-template-columns:
      46px minmax(0, 1fr);

    min-height: 88px;
    gap: 0.85rem;
    padding: 0.85rem;

    border-radius: 16px;
  }

  .consult-goal:hover,
  .consult-goal:has(input:checked) {
    transform: none;
  }

  .consult-goal>span {
    width: 42px;
    height: 42px;
  }

  .consult-goal strong {
    font-size: 0.78rem;
  }


  /* MODE */

  .consult-mode {
    margin-top: 2rem;
    padding-top: 1.7rem;
  }

  .consult-mode__options {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.8rem;
  }

  .consult-mode__options label>span {
    min-height: 92px;
    padding: 0.9rem;

    border-radius: 16px;
  }

  .consult-mode__options label:hover>span,
  .consult-mode__options input:checked+span {
    transform: none;
  }


  /* BRIEF FIELDS */

  .consult-fields {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
  }

  .consult-field--full {
    grid-column: auto;
  }

  .consult-field input,
  .consult-field select {
    min-height: 50px;
  }

  .consult-field textarea {
    min-height: 160px;
  }

  .consult-consent {
    padding: 0.9rem;

    border-radius: 16px;
  }


  /* RESULT */

  .consult-result {
    padding: 1.3rem;
  }

  .consult-result__heading {
    margin-bottom: 2.5rem;
  }

  .consult-result__status {
    min-height: 32px;

    font-size: 0.53rem;
  }

  .consult-result__heading h3 {
    font-size: clamp(2.45rem, 11vw, 3.5rem);
  }

  .consult-result__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.9rem;
  }

  .consult-result__primary,
  .consult-result__readiness,
  .consult-result__panel,
  .consult-result__summary {
    border-radius: 18px;
  }

  .consult-result__primary,
  .consult-result__readiness {
    padding: 1.2rem;
  }

  .consult-result__track {
    grid-template-columns:
      66px minmax(0, 1fr);

    gap: 1rem;
  }

  .consult-result__track-code {
    width: 62px;
    height: 62px;

    font-size: 1rem;
  }

  .consult-result__track h4 {
    font-size: clamp(1.9rem, 8vw, 2.5rem);
  }

  .consult-result__facts {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.7rem;
  }

  .consult-result__readiness {
    min-height: 250px;
  }

  .consult-result__score strong {
    font-size: clamp(4.5rem, 20vw, 6.5rem);
  }

  .consult-result__details {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.9rem;
  }

  .consult-result__panel {
    padding: 1.2rem;
  }

  .consult-result__summary {
    padding: 1.2rem;
  }

  .consult-result__summary-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .consult-result__copy {
    width: 100%;
  }

  .consult-result__summary pre {
    max-height: 360px;
    padding: 0.9rem;

    font-size: 0.7rem;
  }

  .consult-result__actions {
    align-items: stretch;
    flex-direction: column;

    width: 100%;
  }

  .consult-result__actions .btn {
    width: 100%;
    min-width: 0;
  }


  /* PREPARATION */

  .consult-preparation {
    padding-block: 4.75rem;
  }

  .consult-preparation__header {
    margin-bottom: 2.75rem;
  }

  .consult-preparation__grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
  }

  .consult-preparation-card {
    min-height: 220px;
    padding: 1.3rem;

    border-radius: 20px;
  }

  .consult-preparation-card:hover {
    transform: none;
  }

  .consult-preparation-card>span {
    margin-bottom: 2.4rem;

    font-size: 2.3rem;
  }

  .consult-preparation-card h3 {
    margin-top: 0;

    font-size: 1.65rem;
  }


  /* NOTE */

  .consult-note {
    padding-block: 3.75rem;
  }

  .consult-note__card {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.25rem;
    padding: 1.4rem;

    border-radius: 22px;
  }

  .consult-note__icon {
    width: 54px;
    height: 54px;

    font-size: 1.5rem;
  }

  .consult-note h2 {
    font-size: 1.8rem;
  }


  /* CTA */

  .consult-cta {
    padding-block: 4.75rem;
  }

  .consult-cta::before {
    background-size: 48px 48px;
  }

  .consult-cta__shape {
    right: -120px;
    bottom: -120px;

    width: 250px;
    height: 250px;

    border-width: 42px;
  }

  .consult-cta__shape::after {
    inset: 32px;
  }

  .consult-cta__title {
    font-size: clamp(2.75rem, 12vw, 3.8rem);
  }

  .consult-cta__description {
    font-size: 0.98rem;
  }

  .consult-cta__actions {
    align-items: stretch;

    width: 100%;
  }

  .consult-cta__actions .btn {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   SMALL MOBILE
   Maximum 420px
   ========================================================= */

@media (max-width: 420px) {
  .consult-hero {
    padding-top: 3rem;
  }

  .consult-hero__title {
    font-size: clamp(2.65rem, 13.8vw, 3.45rem);
  }

  .consult-hero__lead {
    font-size: 0.96rem;
  }

  .consult-hero__navigator {
    padding: 1.15rem;
  }

  .consult-hero__navigator-orbit {
    width: min(100%, 255px);
  }

  .consult-hero__navigator-core {
    width: 92px;
    height: 92px;
  }

  .consult-hero__navigator-node {
    min-width: 50px;
    min-height: 28px;

    font-size: 0.43rem;
  }

  .consult-hero__navigator-node--two {
    right: -5%;
  }

  .consult-hero__navigator-node--four {
    left: -5%;
  }


  /* WIZARD */

  .consult-wizard__progress-head {
    flex-direction: column;
    gap: 0.8rem;
  }

  .consult-wizard__progress-value {
    align-self: flex-end;

    margin-top: -2.6rem;
  }

  .consult-step {
    padding: 1.1rem;
  }

  .consult-step__header {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
  }

  .consult-step__number {
    width: 48px;
    height: 48px;
  }

  .consult-step__header h3 {
    font-size: 2rem;
  }


  /* OPTIONS */

  .consult-option,
  .consult-option--vertical {
    grid-template-columns:
      46px minmax(0, 1fr);

    min-height: 120px;
  }

  .consult-option__check,
  .consult-option--vertical .consult-option__check {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
  }

  .consult-option__code {
    width: 42px;
    height: 42px;

    font-size: 0.76rem;
  }

  .consult-option__index {
    font-size: 1.8rem;
  }

  .consult-option__content {
    padding-right: 1.6rem;
  }

  .consult-option__content strong {
    font-size: 1.2rem;
  }


  /* RESULT */

  .consult-result__track {
    grid-template-columns: minmax(0, 1fr);
  }

  .consult-result__track-code {
    width: 58px;
    height: 58px;
  }

  .consult-result__facts>div {
    padding: 0.8rem;
  }

  .consult-result__score {
    align-items: flex-end;
  }

  .consult-result__score strong {
    font-size: 4.6rem;
  }

  .consult-result__summary pre {
    font-size: 0.66rem;
  }

  .consult-note h2 {
    font-size: 1.65rem;
  }

  .consult-cta__title {
    font-size: clamp(2.45rem, 12vw, 3.2rem);
  }
}


/* =========================================================
   SHORT VIEWPORT
   ========================================================= */

@media (max-height: 720px) and (min-width: 1025px) {
  .consult-hero {
    min-height: auto;

    padding-block: 4.5rem 4rem;
  }

  .consult-hero__title {
    font-size: clamp(3.8rem, 5.8vw, 5.4rem);
  }

  .consult-hero__navigator {
    padding: 1.6rem;
  }

  .consult-hero__navigator-orbit {
    width: min(100%, 300px);
    margin-block: 1.7rem;
  }

  .consult-hero__navigator-core {
    width: 112px;
    height: 112px;
  }
}


/* =========================================================
   TOUCH DEVICE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .consult-option:hover,
  .consult-option:has(input:checked),
  .consult-goal:hover,
  .consult-goal:has(input:checked),
  .consult-mode__options label:hover>span,
  .consult-mode__options input:checked+span,
  .consult-preparation-card:hover {
    transform: none;
  }

  .consult-option:hover {
    background-color: var(--color-cream-light);
    border-color: var(--color-border);

    box-shadow:
      0 10px 28px rgba(43, 0, 53, 0.035);
  }

  .consult-option:has(input:checked) {
    background:
      linear-gradient(145deg,
        var(--color-primary),
        var(--color-plum));

    border-color: var(--color-primary);

    box-shadow:
      0 24px 54px rgba(43, 0, 53, 0.18);
  }

  .consult-goal:hover {
    background-color: var(--color-cream-light);
    border-color: var(--color-border);
  }

  .consult-goal:has(input:checked) {
    background:
      linear-gradient(145deg,
        var(--color-primary),
        var(--color-plum));

    border-color: var(--color-primary);
  }

  .consult-mode__options label:hover>span {
    background-color: var(--color-cream-light);
    border-color: var(--color-border);
  }

  .consult-mode__options input:checked+span {
    background:
      linear-gradient(145deg,
        var(--color-primary),
        var(--color-plum));

    border-color: var(--color-primary);
  }

  .consult-preparation-card:hover {
    color: inherit;
    background: var(--color-cream-light);
    border-color: var(--color-border);

    box-shadow: none;
  }

  .consult-preparation-card:hover h3 {
    color: var(--color-plum);
  }

  .consult-preparation-card:hover p {
    color: var(--color-text-soft);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .consult-wizard__progress-track>span,
  .consult-step,
  .consult-option,
  .consult-option__check,
  .consult-goal,
  .consult-mode__options label>span,
  .consult-result__score-track span,
  .consult-preparation-card {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

@media print {

  *,
  *::before,
  *::after {
    color: #000000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html,
  body {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  .site-header,
  .site-nav,
  .menu-toggle,
  .nav-overlay,
  .floating-whatsapp,
  .site-footer,
  .btn,
  .decorative-orb,
  .decorative-ring {
    display: none !important;
  }

  main,
  section,
  .container,
  .container--wide,
  .container--narrow {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: 0 !important;
  }

  .section,
  .section--compact,
  .section--large {
    padding-block: 1.5rem !important;
  }

  .grid,
  .split,
  .form-grid {
    display: block !important;
  }

  .card,
  .quote-card,
  .media-frame {
    margin-bottom: 1.25rem;
    break-inside: avoid;
    border: 1px solid #cccccc !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

/* =========================================================
   SERVICES PAGE RESPONSIVE
   ========================================================= */


/* =========================================================
   LAPTOP
   Maximum 1280px
   ========================================================= */

@media (max-width: 1280px) {
  .services-hero {
    min-height: auto;

    padding-block:
      clamp(5rem, 8vw, 6.75rem) clamp(4.5rem, 7vw, 6rem);
  }

  .services-hero__grid {
    grid-template-columns:
      minmax(0, 1fr) minmax(390px, 0.78fr);

    gap: clamp(3rem, 5vw, 5rem);
  }

  .services-hero__title {
    font-size: clamp(4rem, 6.2vw, 6rem);
  }

  .services-compass {
    padding: 1.45rem;
  }

  .services-compass__item {
    grid-template-columns:
      40px minmax(0, 1fr) 30px;

    gap: 0.85rem;
  }

  .services-diagnostic__layout {
    grid-template-columns:
      minmax(0, 0.78fr) minmax(460px, 1.22fr);

    gap: clamp(3rem, 6vw, 6rem);
  }

  .service-panel--legal,
  .service-panel--system {
    min-height: 520px;
  }

  .service-panel--tax,
  .service-panel--research {
    min-height: 500px;
  }

  .services-engagement__layout {
    grid-template-columns:
      minmax(0, 0.75fr) minmax(460px, 1.25fr);

    gap: clamp(3rem, 6vw, 6rem);
  }
}


/* =========================================================
   TABLET LANDSCAPE
   Maximum 1024px
   ========================================================= */

@media (max-width: 1024px) {
  .services-hero {
    align-items: flex-start;

    padding-block:
      clamp(4.5rem, 8vw, 6rem) clamp(4.5rem, 7vw, 5.5rem);
  }

  .services-hero::before {
    background-size: 60px 60px;

    mask-image:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.82),
        transparent 84%);
  }

  .services-hero::after {
    top: 34%;
    right: -26%;

    width: min(88vw, 760px);
  }

  .services-hero__breadcrumb {
    margin-bottom: 2.5rem;
  }

  .services-hero__grid {
    grid-template-columns: minmax(0, 1fr);

    gap: clamp(3.5rem, 8vw, 5rem);
  }

  .services-hero__content {
    max-width: 840px;
  }

  .services-hero__title {
    max-width: 820px;

    font-size: clamp(4rem, 9vw, 6rem);
  }

  .services-hero__lead {
    max-width: 780px;
  }

  .services-compass {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .services-compass__item {
    grid-template-columns:
      46px minmax(0, 1fr) 34px;
  }

  .services-diagnostic__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 3.5rem;
  }

  .services-diagnostic__intro {
    position: static;

    max-width: 820px;
  }

  .services-diagnostic__steps {
    max-width: 820px;
  }

  .service-map__header {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.5rem;
  }

  .service-map__header .text-lead {
    justify-self: start;

    max-width: 760px;
  }

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

  .service-panel--legal,
  .service-panel--system,
  .service-panel--tax,
  .service-panel--research {
    grid-column: auto;
    min-height: 100%;
  }

  .service-panel--research {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-panel__visual {
    min-height: 260px;
  }

  .service-panel__orbit--one {
    top: 12%;
    left: 25%;
  }

  .service-panel__orbit--two {
    top: 28%;
    left: 42%;
  }

  .service-panel__orbit--three {
    right: 8%;
    bottom: -25px;
  }

  .services-track {
    grid-template-columns:
      70px minmax(0, 1fr) 52px;
  }

  .services-engagement__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 3.5rem;
  }

  .services-engagement__intro {
    max-width: 800px;
  }

  .services-engagement__cards {
    max-width: 820px;
  }
}


/* =========================================================
   TABLET PORTRAIT
   Maximum 820px
   ========================================================= */

@media (max-width: 820px) {
  .services-hero {
    padding-top: clamp(4rem, 8vw, 5rem);
  }

  .services-hero__title {
    font-size: clamp(3.6rem, 10.6vw, 5.2rem);
  }

  .services-hero__lead {
    font-size: 1.08rem;
  }

  .services-compass {
    width: min(100%, 680px);
  }

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

  .services-diagnostic__step {
    padding: 1.5rem;
  }

  .service-bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-panel--legal,
  .service-panel--system,
  .service-panel--tax,
  .service-panel--research {
    min-height: 0;
  }

  .service-panel__title {
    font-size: clamp(2.25rem, 5.8vw, 3.35rem);
  }

  .service-panel__visual {
    min-height: 230px;
  }

  .services-track {
    grid-template-columns:
      60px minmax(0, 1fr) 48px;

    gap: 1.25rem;
  }

  .services-track__arrow {
    width: 46px;
    height: 46px;
  }

  .services-scope__card {
    grid-template-columns:
      68px minmax(0, 1fr);
  }

  .services-scope__icon {
    width: 64px;
    height: 64px;
  }

  .services-cta__title {
    font-size: clamp(3rem, 8vw, 4.75rem);
  }
}


/* =========================================================
   MOBILE
   Maximum 640px
   ========================================================= */

@media (max-width: 640px) {
  .services-hero {
    padding-block: 3.5rem 4rem;
  }

  .services-hero::before {
    opacity: 0.14;
    background-size: 46px 46px;
  }

  .services-hero::after {
    top: 50%;
    right: -48%;

    width: 120vw;

    border-width: 58px;
  }

  .services-hero__breadcrumb {
    margin-bottom: 1.75rem;
  }

  .services-hero__grid {
    gap: 3rem;
  }

  .services-hero__eyebrow {
    margin-bottom: 1.5rem;

    font-size: 0.66rem;
  }

  .services-hero__eyebrow::before {
    width: 26px;
  }

  .services-hero__title {
    font-size: clamp(3rem, 14vw, 4.1rem);
    line-height: 0.92;
    letter-spacing: -0.047em;
  }

  .services-hero__lead {
    margin-top: 1.5rem;

    font-size: 1rem;
    line-height: 1.7;
  }

  .services-hero__actions {
    align-items: stretch;

    width: 100%;
    margin-top: 1.8rem;
  }

  .services-hero__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .services-hero__signal {
    gap: 0.85rem 1.1rem;

    margin-top: 1.7rem;
  }

  .services-hero__signal span {
    font-size: 0.67rem;
  }

  .services-compass {
    padding: 1.1rem;

    border-radius: 24px;
  }

  .services-compass__head {
    flex-direction: column;
    align-items: flex-start;

    padding-bottom: 1.25rem;
  }

  .services-compass__title {
    font-size: 1.85rem;
  }

  .services-compass__item {
    grid-template-columns:
      38px minmax(0, 1fr);

    gap: 0.8rem;

    padding-block: 1rem;
  }

  .services-compass__item:hover {
    padding-inline: 0;
  }

  .services-compass__index {
    width: 36px;
    height: 36px;

    font-size: 0.95rem;
  }

  .services-compass__copy strong {
    font-size: 0.83rem;
  }

  .services-compass__copy span {
    font-size: 0.7rem;
  }

  .services-compass__arrow {
    display: none;
  }

  .services-compass__footer {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.65rem;
  }

  .services-diagnostic {
    padding-block: 4.5rem;
  }

  .services-diagnostic__layout {
    gap: 2.75rem;
  }

  .services-diagnostic__step {
    grid-template-columns:
      48px minmax(0, 1fr);

    gap: 1rem;

    padding: 1.25rem;
  }

  .services-diagnostic__step:hover {
    transform: none;
  }

  .services-diagnostic__number {
    width: 46px;
    height: 46px;

    font-size: 1.05rem;
  }

  .services-diagnostic__step strong {
    font-size: 1.35rem;
  }

  .service-map {
    padding-block: 4.75rem;
  }

  .service-map__header {
    margin-bottom: 2.75rem;
  }

  .service-bento {
    gap: 1rem;
  }

  .service-panel {
    padding: 1.4rem;

    border-radius: 22px;
  }

  .service-panel:hover {
    transform: none;
  }

  .service-panel--research {
    padding: 0;
  }

  .service-panel__head {
    margin-bottom: 1.75rem;
  }

  .service-panel__number {
    font-size: 2.4rem;
  }

  .service-panel__tag {
    min-height: 32px;

    font-size: 0.58rem;
  }

  .service-panel__title {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .service-panel__description {
    margin-top: 1rem;

    font-size: 0.9rem;
  }

  .service-panel__list {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.7rem;
    margin-top: 1.5rem;
  }

  .service-panel__link {
    margin-top: 1.75rem;

    font-size: 0.75rem;
  }

  .service-panel__visual {
    min-height: 190px;
  }

  .service-panel--research .service-panel__content {
    padding: 1.4rem;
  }

  .service-panel__orbit--one {
    top: 12%;
    left: 15%;

    width: 130px;
    height: 130px;
  }

  .service-panel__orbit--two {
    top: 28%;
    left: 38%;

    width: 82px;
    height: 82px;
  }

  .service-panel__orbit--three {
    right: -20px;
    bottom: -30px;

    width: 110px;
    height: 110px;

    border-width: 18px;
  }

  .services-tracks {
    padding-block: 4.75rem;
  }

  .services-tracks__header {
    margin-bottom: 2.75rem;
  }

  .services-track {
    grid-template-columns:
      44px minmax(0, 1fr);

    gap: 1rem;

    padding: 1.25rem;

    border-radius: 18px;
  }

  .services-track:hover {
    transform: none;
  }

  .services-track__index {
    align-self: start;

    font-size: 1.8rem;
  }

  .services-track__content h3 {
    font-size: 1.85rem;
  }

  .services-track__content p {
    font-size: 0.82rem;
  }

  .services-track__arrow {
    display: none;
  }

  .services-engagement {
    padding-block: 4.75rem;
  }

  .services-engagement__layout {
    gap: 2.75rem;
  }

  .engagement-card {
    grid-template-columns:
      50px minmax(0, 1fr);

    gap: 1rem;

    padding: 1.25rem;
  }

  .engagement-card:hover {
    transform: none;
  }

  .engagement-card__number {
    width: 48px;
    height: 48px;

    font-size: 1.05rem;
  }

  .engagement-card h3 {
    font-size: 1.45rem;
  }

  .services-scope {
    padding-block: 3.75rem;
  }

  .services-scope__card {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.25rem;
    padding: 1.4rem;

    border-radius: 22px;
  }

  .services-scope__icon {
    width: 58px;
    height: 58px;
  }

  .services-scope__icon svg {
    width: 26px;
    height: 26px;
  }

  .services-scope__content h2 {
    font-size: 1.8rem;
  }

  .services-faq-section {
    padding-block: 4.75rem;
  }

  .services-faq__trigger {
    gap: 1rem;

    padding: 1.15rem;

    font-size: 0.92rem;
  }

  .services-faq__trigger span {
    width: 32px;
    height: 32px;

    font-size: 1.2rem;
  }

  .services-faq__panel {
    padding:
      0 1.15rem 1.15rem;
  }

  .services-cta {
    padding-block: 4.75rem;
  }

  .services-cta::before {
    background-size: 48px 48px;
  }

  .services-cta__title {
    font-size: clamp(2.75rem, 12vw, 3.8rem);
  }

  .services-cta__description {
    font-size: 0.98rem;
  }

  .services-cta__actions {
    align-items: stretch;

    width: 100%;
  }

  .services-cta__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .services-cta__orb {
    right: -120px;
    bottom: -120px;

    width: 250px;
    height: 250px;

    border-width: 42px;
  }
}


/* =========================================================
   SMALL MOBILE
   Maximum 420px
   ========================================================= */

@media (max-width: 420px) {
  .services-hero {
    padding-top: 3rem;
  }

  .services-hero__title {
    font-size: clamp(2.65rem, 13.8vw, 3.45rem);
  }

  .services-hero__lead {
    font-size: 0.96rem;
  }

  .services-hero__signal {
    gap: 0.7rem;
  }

  .services-hero__signal span {
    padding-left: 0.85rem;

    font-size: 0.62rem;
  }

  .services-compass {
    padding: 1rem;
  }

  .services-compass__title {
    font-size: 1.65rem;
  }

  .services-compass__badge {
    min-height: 34px;

    font-size: 0.62rem;
  }

  .services-compass__item {
    grid-template-columns:
      34px minmax(0, 1fr);
  }

  .services-compass__index {
    width: 32px;
    height: 32px;

    font-size: 0.85rem;
  }

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

  .services-diagnostic__number {
    width: 42px;
    height: 42px;
  }

  .service-panel {
    padding: 1.2rem;
  }

  .service-panel--research .service-panel__content {
    padding: 1.2rem;
  }

  .service-panel__head {
    align-items: flex-start;
  }

  .service-panel__title {
    font-size: 1.95rem;
  }

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

  .services-track__index {
    margin-bottom: 0.25rem;
  }

  .engagement-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .services-scope__content h2 {
    font-size: 1.65rem;
  }

  .services-faq__trigger {
    align-items: flex-start;

    font-size: 0.88rem;
  }

  .services-cta__title {
    font-size: clamp(2.5rem, 12vw, 3.2rem);
  }
}


/* =========================================================
   SHORT VIEWPORT
   ========================================================= */

@media (max-height: 720px) and (min-width: 1025px) {
  .services-hero {
    min-height: auto;

    padding-block: 4.5rem 4rem;
  }

  .services-hero__title {
    font-size: clamp(3.8rem, 6vw, 5.6rem);
  }

  .services-compass {
    padding: 1.25rem;
  }

  .services-compass__item {
    padding-block: 0.9rem;
  }
}


/* =========================================================
   TOUCH DEVICE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .services-compass__item:hover,
  .services-diagnostic__step:hover,
  .service-panel:hover,
  .services-track:hover,
  .engagement-card:hover {
    transform: none;
  }

  .services-compass__item:hover {
    padding-inline: 0;
    background-color: transparent;
  }

  .services-track:hover {
    color: inherit;
    background: transparent;
    border-color: var(--color-border);
    box-shadow: none;
  }

  .services-track:hover .services-track__index,
  .services-track:hover .services-track__content h3 {
    color: var(--color-primary);
  }

  .services-track:hover .services-track__content p {
    color: var(--color-text-soft);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .services-compass__item,
  .services-diagnostic__step,
  .service-panel,
  .services-track,
  .engagement-card,
  .services-faq__trigger span {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   HATTRA & WELLNESS PAGE RESPONSIVE
   ========================================================= */


/* =========================================================
   LAPTOP
   Maximum 1280px
   ========================================================= */

@media (max-width: 1280px) {
  .hattra-hero {
    padding-block:
      clamp(5rem, 8vw, 7rem) clamp(4.5rem, 7vw, 6rem);
  }

  .hattra-hero__layout {
    grid-template-columns:
      minmax(0, 1fr) minmax(380px, 0.78fr);

    gap: clamp(3rem, 5vw, 5rem);
  }

  .hattra-hero__title {
    font-size: clamp(3.9rem, 6vw, 5.8rem);
  }

  .hattra-hero__visual {
    width: min(100%, 550px);
  }

  .hattra-context__layout {
    grid-template-columns:
      minmax(0, 0.78fr) minmax(460px, 1.22fr);

    gap: clamp(3rem, 6vw, 6rem);
  }

  .hattra-pathway {
    grid-template-columns:
      64px minmax(0, 1fr);
  }

  .hattra-journey__layout {
    grid-template-columns:
      minmax(350px, 0.82fr) minmax(0, 1.18fr);

    gap: clamp(3rem, 6vw, 6rem);
  }

  .hattra-collaboration__card {
    grid-template-columns:
      minmax(0, 1fr) minmax(240px, 0.55fr);
  }
}


/* =========================================================
   TABLET LANDSCAPE
   Maximum 1024px
   ========================================================= */

@media (max-width: 1024px) {
  .hattra-hero {
    padding-block:
      clamp(4.5rem, 8vw, 6rem) clamp(4.5rem, 7vw, 5.5rem);
  }

  .hattra-hero::before {
    background-size: 60px 60px;

    mask-image:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.58),
        transparent 82%);
  }

  .hattra-hero::after {
    right: -210px;
    bottom: -230px;

    width: 400px;
    height: 400px;

    border-width: 58px;
  }

  .hattra-hero__texture {
    top: 30%;
    left: -110px;
  }

  .hattra-hero__breadcrumb {
    margin-bottom: 2.25rem;
  }

  .hattra-hero__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: clamp(3.5rem, 8vw, 5rem);
  }

  .hattra-hero__content {
    max-width: 850px;
  }

  .hattra-hero__title {
    max-width: 830px;

    font-size: clamp(4rem, 9vw, 6rem);
  }

  .hattra-hero__lead {
    max-width: 780px;
  }

  .hattra-hero__visual {
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .hattra-context__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 3.5rem;
  }

  .hattra-context__intro {
    position: static;

    max-width: 820px;
  }

  .hattra-context__insights {
    max-width: 820px;
  }

  .hattra-pathways__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hattra-pathway {
    min-height: 0;
  }

  .hattra-pathway__content h3 {
    max-width: 680px;
  }

  .hattra-journey__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 4rem;
  }

  .hattra-journey__visual {
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .hattra-journey__figure {
    aspect-ratio: 16 / 10;
  }

  .hattra-journey__content {
    max-width: 820px;
  }

  .hattra-audience__card {
    grid-column: span 6;
  }

  .hattra-audience__card:nth-child(5) {
    grid-column: 4 / span 6;
  }

  .hattra-collaboration__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .hattra-collaboration__visual {
    min-height: 270px;
  }

  .hattra-collaboration__circle--one {
    top: 5%;
    left: 18%;
  }

  .hattra-collaboration__circle--two {
    top: 25%;
    left: 38%;
  }

  .hattra-collaboration__circle--three {
    right: 5%;
    bottom: -40px;
  }
}


/* =========================================================
   TABLET PORTRAIT
   Maximum 820px
   ========================================================= */

@media (max-width: 820px) {
  .hattra-hero {
    padding-top: clamp(4rem, 8vw, 5rem);
  }

  .hattra-hero__title {
    font-size: clamp(3.5rem, 10.5vw, 5rem);
  }

  .hattra-hero__lead {
    font-size: 1.08rem;
  }

  .hattra-hero__visual {
    width: min(100%, 620px);
  }

  .hattra-hero__note--top {
    right: 0;

    width: min(235px, 46%);
  }

  .hattra-hero__note--bottom {
    left: 0;
  }

  .hattra-insight {
    padding: 1.5rem;
  }

  .hattra-pathway {
    grid-template-columns:
      60px minmax(0, 1fr);

    padding: 1.75rem;
  }

  .hattra-pathway__content h3 {
    font-size: clamp(2rem, 5.8vw, 3rem);
  }

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

  .hattra-journey__quote {
    right: 1rem;
    bottom: 1rem;
  }

  .hattra-audience__card,
  .hattra-audience__card:nth-child(4),
  .hattra-audience__card:nth-child(5) {
    grid-column: span 6;
  }

  .hattra-collaboration__title {
    font-size: clamp(2.7rem, 7vw, 4rem);
  }

  .hattra-scope__layout {
    grid-template-columns:
      62px minmax(0, 1fr);
  }

  .hattra-scope__icon {
    width: 58px;
    height: 58px;
  }

  .hattra-cta__title {
    font-size: clamp(3rem, 8vw, 4.7rem);
  }
}


/* =========================================================
   MOBILE
   Maximum 640px
   ========================================================= */

@media (max-width: 640px) {
  .hattra-hero {
    padding-block: 3.5rem 4rem;
  }

  .hattra-hero::before {
    opacity: 0.2;
    background-size: 46px 46px;
  }

  .hattra-hero::after {
    right: -180px;
    bottom: -180px;

    width: 310px;
    height: 310px;

    border-width: 44px;
  }

  .hattra-hero__texture {
    top: 44%;
    left: -88px;

    width: 150px;
    height: 150px;
  }

  .hattra-hero__breadcrumb {
    margin-bottom: 1.75rem;
  }

  .hattra-hero__layout {
    gap: 3rem;
  }

  .hattra-hero__eyebrow {
    margin-bottom: 1.5rem;

    font-size: 0.65rem;
  }

  .hattra-hero__eyebrow::before {
    width: 26px;
  }

  .hattra-hero__title {
    font-size: clamp(3rem, 14vw, 4.1rem);
    line-height: 0.92;
    letter-spacing: -0.047em;
  }

  .hattra-hero__lead {
    margin-top: 1.5rem;

    font-size: 1rem;
    line-height: 1.7;
  }

  .hattra-hero__actions {
    align-items: stretch;

    width: 100%;
    margin-top: 1.8rem;
  }

  .hattra-hero__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .hattra-hero__traits {
    gap: 0.85rem 1rem;

    margin-top: 1.7rem;
  }

  .hattra-hero__traits li {
    font-size: 0.64rem;
  }

  .hattra-hero__visual {
    width: 100%;

    padding:
      0.7rem 0.15rem 4.35rem;
  }

  .hattra-hero__visual::before {
    top: 0;
    right: 0;
    bottom: 18%;
    left: 10%;

    border-radius: 34px;
    transform: rotate(3deg);
  }

  .hattra-hero__figure {
    border-radius: 27px;
  }

  .hattra-hero__figure:hover img {
    transform: scale(1.015);
  }

  .hattra-hero__note--top {
    top: 1.7rem;
    right: 0.55rem;

    width: min(210px, 48%);
    padding: 0.8rem 0.85rem;

    border-radius: 16px;
  }

  .hattra-hero__note--top strong {
    font-size: 0.95rem;
  }

  .hattra-hero__note--bottom {
    right: 0.55rem;
    bottom: 0.45rem;
    left: 0.55rem;

    min-width: 0;
    padding: 0.8rem 0.9rem;

    border-radius: 16px;
  }

  .hattra-hero__note-number {
    font-size: 2.15rem;
  }

  .hattra-context {
    padding-block: 4.75rem;
  }

  .hattra-context__layout {
    gap: 2.75rem;
  }

  .hattra-insight {
    grid-template-columns:
      48px minmax(0, 1fr);

    gap: 1rem;

    padding: 1.25rem;
  }

  .hattra-insight:hover {
    transform: none;
  }

  .hattra-insight__index {
    width: 46px;
    height: 46px;

    font-size: 1rem;
  }

  .hattra-insight h3 {
    font-size: 1.35rem;
  }

  .hattra-pathways {
    padding-block: 4.75rem;
  }

  .hattra-pathways__header {
    margin-bottom: 2.75rem;
  }

  .hattra-pathways__grid {
    gap: 1rem;
  }

  .hattra-pathway {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
    padding: 1.4rem;

    border-radius: 22px;
  }

  .hattra-pathway:hover {
    transform: none;
  }

  .hattra-pathway__number {
    font-size: 2.4rem;
  }

  .hattra-pathway__content h3 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .hattra-pathway__content p {
    margin-top: 1rem;

    font-size: 0.88rem;
  }

  .hattra-pathway__content ul {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.7rem;
    margin-top: 1.5rem;
  }

  .hattra-journey {
    padding-block: 4.75rem;
  }

  .hattra-journey__layout {
    gap: 3rem;
  }

  .hattra-journey__figure {
    aspect-ratio: 4 / 5;

    border-radius: 26px;
  }

  .hattra-journey__quote {
    right: 0.7rem;
    bottom: 0.7rem;

    width: min(260px, 72%);
    padding: 1rem;
  }

  .hattra-journey__quote p {
    font-size: 0.98rem;
  }

  .hattra-journey__steps {
    margin-top: 2rem;
  }

  .hattra-journey__steps li {
    grid-template-columns:
      46px minmax(0, 1fr);

    gap: 1rem;
  }

  .hattra-journey__steps li>span {
    width: 44px;
    height: 44px;
  }

  .hattra-journey__steps strong {
    font-size: 1.3rem;
  }

  .hattra-audience {
    padding-block: 4.75rem;
  }

  .hattra-audience__header {
    margin-bottom: 2.75rem;
  }

  .hattra-audience__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hattra-audience__card,
  .hattra-audience__card:nth-child(4),
  .hattra-audience__card:nth-child(5) {
    grid-column: auto;

    min-height: 0;
    padding: 1.4rem;

    border-radius: 20px;
  }

  .hattra-audience__card:hover {
    transform: none;
  }

  .hattra-audience__label {
    margin-bottom: 1.25rem;
  }

  .hattra-audience__card h3 {
    font-size: 1.85rem;
  }

  .hattra-collaboration {
    padding-block: 4.5rem;
  }

  .hattra-collaboration__card {
    min-height: 0;

    border-radius: 26px;
  }

  .hattra-collaboration__content {
    padding: 1.5rem;
  }

  .hattra-collaboration__title {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }

  .hattra-collaboration__content p {
    font-size: 0.9rem;
  }

  .hattra-collaboration__actions {
    align-items: stretch;

    width: 100%;
  }

  .hattra-collaboration__actions .btn {
    width: 100%;
  }

  .hattra-collaboration__visual {
    min-height: 210px;
  }

  .hattra-collaboration__circle--one {
    top: 8%;
    left: 8%;

    width: 150px;
    height: 150px;
  }

  .hattra-collaboration__circle--two {
    top: 28%;
    left: 34%;

    width: 92px;
    height: 92px;
  }

  .hattra-collaboration__circle--three {
    right: -20px;
    bottom: -25px;

    width: 120px;
    height: 120px;

    border-width: 20px;
  }

  .hattra-collaboration__line--one {
    width: 150px;
  }

  .hattra-collaboration__line--two {
    width: 130px;
  }

  .hattra-scope {
    padding-block: 3.75rem;
  }

  .hattra-scope__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.25rem;
    padding: 1.4rem;

    border-radius: 22px;
  }

  .hattra-scope__icon {
    width: 54px;
    height: 54px;

    font-size: 1.5rem;
  }

  .hattra-scope h2 {
    font-size: 1.8rem;
  }

  .hattra-faq-section {
    padding-block: 4.75rem;
  }

  .hattra-faq__trigger {
    gap: 1rem;

    padding: 1.15rem;

    font-size: 0.92rem;
  }

  .hattra-faq__trigger span {
    width: 32px;
    height: 32px;

    font-size: 1.2rem;
  }

  .hattra-faq__panel {
    padding:
      0 1.15rem 1.15rem;
  }

  .hattra-cta {
    padding-block: 4.75rem;
  }

  .hattra-cta::before {
    background-size: 48px 48px;
  }

  .hattra-cta__title {
    font-size: clamp(2.75rem, 12vw, 3.8rem);
  }

  .hattra-cta__description {
    font-size: 0.98rem;
  }

  .hattra-cta__actions {
    align-items: stretch;

    width: 100%;
  }

  .hattra-cta__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .hattra-cta__shape {
    right: -120px;
    bottom: -120px;

    width: 250px;
    height: 250px;

    border-width: 42px;
  }
}


/* =========================================================
   SMALL MOBILE
   Maximum 420px
   ========================================================= */

@media (max-width: 420px) {
  .hattra-hero {
    padding-top: 3rem;
  }

  .hattra-hero__title {
    font-size: clamp(2.65rem, 13.8vw, 3.45rem);
  }

  .hattra-hero__lead {
    font-size: 0.96rem;
  }

  .hattra-hero__traits {
    gap: 0.7rem;
  }

  .hattra-hero__traits li {
    padding-left: 0.85rem;

    font-size: 0.6rem;
  }

  .hattra-hero__visual {
    padding-bottom: 4.2rem;
  }

  .hattra-hero__note--top {
    display: none;
  }

  .hattra-hero__note--bottom {
    flex-direction: row;
  }

  .hattra-insight {
    grid-template-columns: minmax(0, 1fr);
  }

  .hattra-insight__index {
    width: 42px;
    height: 42px;
  }

  .hattra-pathway {
    padding: 1.2rem;
  }

  .hattra-pathway__content h3 {
    font-size: 1.95rem;
  }

  .hattra-journey__quote {
    position: relative;
    right: auto;
    bottom: auto;

    width: calc(100% - 1.2rem);
    margin:
      -3rem auto 0;
  }

  .hattra-journey__steps li {
    grid-template-columns: minmax(0, 1fr);
  }

  .hattra-journey__steps li>span {
    width: 42px;
    height: 42px;
  }

  .hattra-collaboration__content {
    padding: 1.25rem;
  }

  .hattra-collaboration__title {
    font-size: clamp(2.3rem, 11vw, 3rem);
  }

  .hattra-collaboration__visual {
    min-height: 180px;
  }

  .hattra-scope h2 {
    font-size: 1.65rem;
  }

  .hattra-faq__trigger {
    align-items: flex-start;

    font-size: 0.88rem;
  }

  .hattra-cta__title {
    font-size: clamp(2.45rem, 12vw, 3.2rem);
  }
}


/* =========================================================
   SHORT VIEWPORT
   ========================================================= */

@media (max-height: 720px) and (min-width: 1025px) {
  .hattra-hero {
    padding-block: 4.5rem 4rem;
  }

  .hattra-hero__title {
    font-size: clamp(3.8rem, 5.8vw, 5.4rem);
  }

  .hattra-hero__visual {
    width: min(100%, 510px);
  }

  .hattra-hero__note--top {
    top: 2.5rem;
  }
}


/* =========================================================
   TOUCH DEVICE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .hattra-hero__figure:hover img,
  .hattra-insight:hover,
  .hattra-pathway:hover,
  .hattra-audience__card:hover {
    transform: none;
  }

  .hattra-audience__card:hover {
    color: inherit;
    background: var(--color-white);
    border-color: var(--color-border);
    box-shadow: none;
  }

  .hattra-audience__card:hover h3 {
    color: var(--color-plum);
  }

  .hattra-audience__card:hover p {
    color: var(--color-text-soft);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .hattra-hero__figure img,
  .hattra-insight,
  .hattra-pathway,
  .hattra-audience__card,
  .hattra-faq__trigger span {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   LEGALITAS PERUSAHAAN PAGE RESPONSIVE
   ========================================================= */


/* =========================================================
   LAPTOP
   Maximum 1280px
   ========================================================= */

@media (max-width: 1280px) {
  .legal-hero {
    min-height: auto;

    padding-block:
      clamp(5rem, 8vw, 7rem) clamp(4.5rem, 7vw, 6rem);
  }

  .legal-hero__layout {
    grid-template-columns:
      minmax(0, 1fr) minmax(390px, 0.78fr);

    gap: clamp(3rem, 5vw, 5rem);
  }

  .legal-hero__title {
    font-size: clamp(4rem, 6.2vw, 6rem);
  }

  .legal-dossier {
    padding: 1.5rem;
  }

  .legal-dossier__row {
    grid-template-columns:
      66px minmax(0, 1fr) 32px;

    gap: 0.85rem;
  }

  .legal-why__layout {
    grid-template-columns:
      minmax(0, 0.76fr) minmax(460px, 1.24fr);

    gap: clamp(3rem, 6vw, 6rem);
  }

  .legal-scope__card {
    padding: 2rem;
  }

  .legal-matrix__row {
    grid-template-columns:
      minmax(155px, 0.7fr) minmax(160px, 0.82fr) minmax(190px, 1.05fr) minmax(200px, 1.12fr);
  }

  .legal-roadmap__steps {
    gap: 0.9rem;
  }

  .legal-roadmap__step {
    padding: 1.5rem;
  }

  .legal-checklist__layout {
    grid-template-columns:
      minmax(0, 0.78fr) minmax(450px, 1.22fr);

    gap: clamp(3rem, 6vw, 6rem);
  }
}


/* =========================================================
   TABLET LANDSCAPE
   Maximum 1024px
   ========================================================= */

@media (max-width: 1024px) {
  .legal-hero {
    padding-block:
      clamp(4.5rem, 8vw, 6rem) clamp(4.5rem, 7vw, 5.5rem);
  }

  .legal-hero::before {
    top: -190px;
    right: -190px;

    width: 390px;
    height: 390px;

    border-width: 58px;
  }

  .legal-hero::after {
    bottom: -220px;
    left: -180px;

    width: 340px;
    height: 340px;
  }

  .legal-hero__grid-pattern {
    background-size: 60px 60px;

    mask-image:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.82),
        transparent 84%);
  }

  .legal-hero__breadcrumb {
    margin-bottom: 2.5rem;
  }

  .legal-hero__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: clamp(3.5rem, 8vw, 5rem);
  }

  .legal-hero__content {
    max-width: 850px;
  }

  .legal-hero__title {
    max-width: 840px;

    font-size: clamp(4rem, 9vw, 6rem);
  }

  .legal-hero__lead {
    max-width: 780px;
  }

  .legal-dossier {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .legal-dossier__row {
    grid-template-columns:
      76px minmax(0, 1fr) 34px;
  }

  .legal-why__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 3.5rem;
  }

  .legal-why__intro {
    position: static;

    max-width: 820px;
  }

  .legal-why__points {
    max-width: 820px;
  }

  .legal-scope__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-scope__card {
    min-height: 0;
  }

  .legal-scope__card h3 {
    max-width: 720px;
  }

  .legal-matrix__header {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.5rem;
  }

  .legal-matrix__header .text-lead {
    justify-self: start;

    max-width: 760px;
  }

  .legal-matrix__table {
    overflow-x: auto;

    scrollbar-width: thin;
    scrollbar-color:
      var(--color-primary) var(--color-lilac-light);
  }

  .legal-matrix__table::-webkit-scrollbar {
    height: 8px;
  }

  .legal-matrix__table::-webkit-scrollbar-track {
    background-color: var(--color-lilac-light);
  }

  .legal-matrix__table::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: var(--radius-pill);
  }

  .legal-matrix__row {
    min-width: 900px;
  }

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

  .legal-roadmap__steps::before {
    display: none;
  }

  .legal-checklist__layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 3.5rem;
  }

  .legal-checklist__content {
    max-width: 820px;
  }

  .legal-checklist__board {
    max-width: 820px;
  }
}


/* =========================================================
   TABLET PORTRAIT
   Maximum 820px
   ========================================================= */

@media (max-width: 820px) {
  .legal-hero {
    padding-top: clamp(4rem, 8vw, 5rem);
  }

  .legal-hero__title {
    font-size: clamp(3.6rem, 10.6vw, 5.2rem);
  }

  .legal-hero__lead {
    font-size: 1.08rem;
  }

  .legal-dossier {
    width: min(100%, 680px);
  }

  .legal-dossier__top {
    gap: 1.25rem;
  }

  .legal-dossier__footer {
    grid-template-columns:
      minmax(0, 1fr) 54px;
  }

  .legal-why__point {
    padding: 1.5rem;
  }

  .legal-scope__card {
    padding: 1.75rem;
  }

  .legal-scope__card h3 {
    font-size: clamp(2.1rem, 5.8vw, 3rem);
  }

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

  .legal-roadmap__step {
    padding: 1.5rem;
  }

  .legal-roadmap__number {
    width: 62px;
    height: 62px;
  }

  .legal-disclaimer__card {
    grid-template-columns:
      66px minmax(0, 1fr);
  }

  .legal-disclaimer__icon {
    width: 62px;
    height: 62px;
  }

  .legal-cta__title {
    font-size: clamp(3rem, 8vw, 4.7rem);
  }
}


/* =========================================================
   MOBILE
   Maximum 640px
   ========================================================= */

@media (max-width: 640px) {
  .legal-hero {
    padding-block: 3.5rem 4rem;
  }

  .legal-hero::before {
    top: -145px;
    right: -160px;

    width: 300px;
    height: 300px;

    border-width: 44px;
  }

  .legal-hero::after {
    bottom: -160px;
    left: -150px;

    width: 280px;
    height: 280px;
  }

  .legal-hero__grid-pattern {
    opacity: 0.12;
    background-size: 46px 46px;
  }

  .legal-hero__breadcrumb {
    margin-bottom: 1.75rem;
  }

  .legal-hero__layout {
    gap: 3rem;
  }

  .legal-hero__eyebrow {
    margin-bottom: 1.5rem;

    font-size: 0.65rem;
  }

  .legal-hero__eyebrow::before {
    width: 26px;
  }

  .legal-hero__title {
    font-size: clamp(3rem, 14vw, 4.1rem);
    line-height: 0.92;

    letter-spacing: -0.047em;
  }

  .legal-hero__lead {
    margin-top: 1.5rem;

    font-size: 1rem;
    line-height: 1.7;
  }

  .legal-hero__actions {
    align-items: stretch;

    width: 100%;
    margin-top: 1.8rem;
  }

  .legal-hero__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .legal-hero__assurance {
    gap: 0.85rem 1rem;

    margin-top: 1.7rem;
  }

  .legal-hero__assurance span {
    font-size: 0.63rem;
  }

  .legal-dossier {
    padding: 1.1rem;

    border-radius: 24px;
  }

  .legal-dossier__top {
    flex-direction: column;
    align-items: flex-start;

    padding-bottom: 1.25rem;
  }

  .legal-dossier__top h2 {
    font-size: 1.85rem;
  }

  .legal-dossier__status {
    min-height: 34px;

    font-size: 0.6rem;
  }

  .legal-dossier__row {
    grid-template-columns:
      58px minmax(0, 1fr) 30px;

    gap: 0.7rem;

    padding-block: 1rem;
  }

  .legal-dossier__row:hover {
    padding-inline: 0;
  }

  .legal-dossier__label {
    font-size: 0.56rem;
  }

  .legal-dossier__row strong {
    font-size: 0.8rem;
  }

  .legal-dossier__mark {
    width: 28px;
    height: 28px;
  }

  .legal-dossier__footer {
    grid-template-columns:
      minmax(0, 1fr) 48px;

    gap: 1rem;
  }

  .legal-dossier__seal {
    width: 46px;
    height: 46px;

    font-size: 1rem;
  }

  .legal-why {
    padding-block: 4.75rem;
  }

  .legal-why__layout {
    gap: 2.75rem;
  }

  .legal-why__point {
    grid-template-columns:
      48px minmax(0, 1fr);

    gap: 1rem;

    padding: 1.25rem;
  }

  .legal-why__point:hover {
    transform: none;
  }

  .legal-why__point>span {
    width: 46px;
    height: 46px;

    font-size: 1rem;
  }

  .legal-why__point h3 {
    font-size: 1.35rem;
  }

  .legal-scope {
    padding-block: 4.75rem;
  }

  .legal-scope__header {
    margin-bottom: 2.75rem;
  }

  .legal-scope__grid {
    gap: 1rem;
  }

  .legal-scope__card {
    padding: 1.4rem;

    border-radius: 22px;
  }

  .legal-scope__card:hover {
    transform: none;
  }

  .legal-scope__head {
    margin-bottom: 1.75rem;
  }

  .legal-scope__number {
    font-size: 2.4rem;
  }

  .legal-scope__tag {
    min-height: 32px;

    font-size: 0.56rem;
  }

  .legal-scope__card h3 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .legal-scope__card>p {
    margin-top: 1rem;

    font-size: 0.88rem;
  }

  .legal-scope__card ul {
    grid-template-columns: minmax(0, 1fr);

    gap: 0.7rem;
    margin-top: 1.5rem;
  }

  .legal-matrix {
    padding-block: 4.75rem;
  }

  .legal-matrix__header {
    margin-bottom: 2.75rem;
  }

  .legal-matrix__table {
    display: grid;
    gap: 1rem;

    overflow: visible;

    background-color: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;
  }

  .legal-matrix__row--head {
    display: none;
  }

  .legal-matrix__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    min-width: 0;
    overflow: hidden;

    background-color: var(--color-white);

    border: 1px solid var(--color-border);
    border-radius: 20px;

    box-shadow:
      0 12px 32px rgba(43, 0, 53, 0.06);
  }

  .legal-matrix__row>div {
    position: relative;

    display: block;

    padding: 1rem 1.1rem;

    font-size: 0.82rem;

    border-right: 0;
    border-bottom:
      1px solid var(--color-border-light);
  }

  .legal-matrix__row>div:last-child {
    border-bottom: 0;
  }

  .legal-matrix__row>div:first-child {
    display: flex;
    align-items: center;

    padding: 1.1rem;

    background-color: var(--color-lilac-light);
  }

  .legal-matrix__row>div:nth-child(n + 2) {
    padding-top: 2.2rem;
  }

  .legal-matrix__row>div:nth-child(n + 2)::before {
    position: absolute;
    top: 0.7rem;
    left: 1.1rem;

    font-size: 0.57rem;
    font-weight: var(--font-bold);

    color: var(--color-orange);

    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .legal-matrix__row>div:nth-child(2)::before {
    content: "Fokus Utama";
  }

  .legal-matrix__row>div:nth-child(3)::before {
    content: "Kebutuhan Umum";
  }

  .legal-matrix__row>div:nth-child(4)::before {
    content: "Output Pendampingan";
  }

  .legal-roadmap {
    padding-block: 4.75rem;
  }

  .legal-roadmap__header {
    margin-bottom: 2.75rem;
  }

  .legal-roadmap__steps {
    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;
  }

  .legal-roadmap__step {
    display: grid;
    grid-template-columns:
      58px minmax(0, 1fr);

    gap: 1rem;

    padding: 1.3rem;
  }

  .legal-roadmap__step:hover {
    transform: none;
  }

  .legal-roadmap__number {
    width: 54px;
    height: 54px;
    margin-bottom: 0;

    font-size: 1.1rem;
  }

  .legal-roadmap__label {
    margin-bottom: 0.45rem;
  }

  .legal-roadmap__step h3 {
    font-size: 1.5rem;
  }

  .legal-checklist {
    padding-block: 4.75rem;
  }

  .legal-checklist__layout {
    gap: 2.75rem;
  }

  .legal-checklist__content .btn {
    width: 100%;
  }

  .legal-checklist__board {
    gap: 0.75rem;

    padding: 1rem;

    border-radius: 22px;
  }

  .legal-checklist__item {
    grid-template-columns:
      40px minmax(0, 1fr);

    gap: 0.9rem;

    padding: 0.9rem;
  }

  .legal-checklist__item:hover {
    transform: none;
  }

  .legal-checklist__check {
    width: 38px;
    height: 38px;
  }

  .legal-checklist__item strong {
    font-size: 0.8rem;
  }

  .legal-disclaimer {
    padding-block: 3.75rem;
  }

  .legal-disclaimer__card {
    grid-template-columns: minmax(0, 1fr);

    gap: 1.25rem;

    padding: 1.4rem;

    border-radius: 22px;
  }

  .legal-disclaimer__icon {
    width: 56px;
    height: 56px;

    font-size: 1.5rem;
  }

  .legal-disclaimer h2 {
    font-size: 1.8rem;
  }

  .legal-faq-section {
    padding-block: 4.75rem;
  }

  .legal-faq__trigger {
    gap: 1rem;

    padding: 1.15rem;

    font-size: 0.92rem;
  }

  .legal-faq__trigger span {
    width: 32px;
    height: 32px;

    font-size: 1.2rem;
  }

  .legal-faq__panel {
    padding:
      0 1.15rem 1.15rem;
  }

  .legal-cta {
    padding-block: 4.75rem;
  }

  .legal-cta__lines {
    background-size: 48px 48px;
  }

  .legal-cta::after {
    right: -120px;
    bottom: -120px;

    width: 250px;
    height: 250px;

    border-width: 42px;
  }

  .legal-cta__title {
    font-size: clamp(2.75rem, 12vw, 3.8rem);
  }

  .legal-cta__description {
    font-size: 0.98rem;
  }

  .legal-cta__actions {
    align-items: stretch;

    width: 100%;
  }

  .legal-cta__actions .btn {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   SMALL MOBILE
   Maximum 420px
   ========================================================= */

@media (max-width: 420px) {
  .legal-hero {
    padding-top: 3rem;
  }

  .legal-hero__title {
    font-size: clamp(2.65rem, 13.8vw, 3.45rem);
  }

  .legal-hero__lead {
    font-size: 0.96rem;
  }

  .legal-hero__assurance {
    gap: 0.7rem;
  }

  .legal-hero__assurance span {
    padding-left: 0.85rem;

    font-size: 0.59rem;
  }

  .legal-dossier {
    padding: 1rem;
  }

  .legal-dossier__top h2 {
    font-size: 1.65rem;
  }

  .legal-dossier__row {
    grid-template-columns:
      minmax(0, 1fr) 28px;
  }

  .legal-dossier__label {
    grid-column: 1 / -1;

    margin-bottom: -0.4rem;
  }

  .legal-dossier__row strong {
    font-size: 0.78rem;
  }

  .legal-dossier__footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-dossier__seal {
    display: none;
  }

  .legal-why__point {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-why__point>span {
    width: 42px;
    height: 42px;
  }

  .legal-scope__card {
    padding: 1.2rem;
  }

  .legal-scope__head {
    align-items: flex-start;
  }

  .legal-scope__card h3 {
    font-size: 1.95rem;
  }

  .legal-roadmap__step {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-roadmap__number {
    width: 50px;
    height: 50px;
  }

  .legal-checklist__item {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-checklist__check {
    width: 36px;
    height: 36px;
  }

  .legal-disclaimer h2 {
    font-size: 1.65rem;
  }

  .legal-faq__trigger {
    align-items: flex-start;

    font-size: 0.88rem;
  }

  .legal-cta__title {
    font-size: clamp(2.45rem, 12vw, 3.2rem);
  }
}


/* =========================================================
   SHORT VIEWPORT
   ========================================================= */

@media (max-height: 720px) and (min-width: 1025px) {
  .legal-hero {
    min-height: auto;

    padding-block: 4.5rem 4rem;
  }

  .legal-hero__title {
    font-size: clamp(3.8rem, 5.8vw, 5.4rem);
  }

  .legal-dossier {
    padding: 1.25rem;
  }

  .legal-dossier__row {
    padding-block: 0.9rem;
  }
}


/* =========================================================
   TOUCH DEVICE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .legal-dossier__row:hover,
  .legal-why__point:hover,
  .legal-scope__card:hover,
  .legal-roadmap__step:hover,
  .legal-checklist__item:hover {
    transform: none;
  }

  .legal-dossier__row:hover {
    padding-inline: 0;
    background-color: transparent;
  }

  .legal-scope__card:hover {
    border-color: var(--color-border);

    box-shadow:
      0 16px 42px rgba(43, 0, 53, 0.07);
  }

  .legal-scope__card--primary:hover {
    border-color:
      rgba(255, 255, 255, 0.08);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .legal-dossier__row,
  .legal-why__point,
  .legal-scope__card,
  .legal-roadmap__step,
  .legal-checklist__item,
  .legal-faq__trigger span {
    transform: none !important;
    transition: none !important;
  }
}