/* Green Mind mobile layout — clean edition */

@media (max-width: 820px) {
  :root {
    --head-w: clamp(98px, 27vw, 112px);
    --menu-w: min(54vw, 212px);
    --split: clamp(100px, 28vw, 116px);
    --menu-y: 43%;
    --brand-y: 80%;
    --brand-w: min(84vw, 326px);
    --mobile-gutter: clamp(12px, 3.8vw, 16px);
    --edge-head-w: clamp(112px, 31vw, 128px);
    --edge-rail: clamp(72px, 19vw, 82px);
    --edge-button: calc(var(--edge-head-w) / 4);
  }
  html, body {
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  .page {
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
  }
  @supports(height:100dvh) {
    .page {
      height: 100dvh;
      min-height: 100dvh;
    }
  }
  button, a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  h1, h2, h3, h4, p, li, span, strong, small, a {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  img, svg {
    max-width: 100%;
  }
  .page::before {
    background-size: 30px 30px;
    opacity: .14;
  }
  .network svg {
    opacity: .58;
  }
  .safe-zone {
    width: 96vw;
    height: 66svh;
    filter: blur(14px);
  }
  /* Main mobile menu */

  .logo-shell {
    top: 44.7%;
    width: var(--head-w);
    transform: translate(-50%,-58%);
  }
  .stage-menu .logo-half.left {
    transform: translateX(calc(-1 * var(--split)));
  }
  .stage-menu .logo-half.right {
    transform: translateX(var(--split));
  }
  .menu-wrap {
    top: var(--menu-y);
    width: var(--menu-w);
  }
  .menu {
    gap: 6px;
  }
  .menu-item {
    min-height: 42px;
    padding: 0 10px;
    font-size: clamp(12.5px,3.55vw,14px);
    line-height: 1.15;
    clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
    box-shadow: 0 8px 18px rgba(9,46,53,.11);
  }
  .menu-item span {
    width: 100%;
    text-align: center;
    white-space: normal;
  }
  .brand {
    top: var(--brand-y);
    width: var(--brand-w);
  }
  /* Shared scrolling subpage shell */

  .offerings-experience, .why-experience {
    position: fixed;
    inset: 0;
    height: 100svh;
    padding: calc(16px + env(safe-area-inset-top)) var(--mobile-gutter) calc(34px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    background: linear-gradient(135deg,rgba(247,250,250,.97),rgba(234,244,255,.94));
    scrollbar-width: thin;
    scrollbar-color: rgba(8,105,237,.25) transparent;
  }
  @supports(height:100dvh) {
    .offerings-experience, .why-experience {
      height: 100dvh;
    }
  }
  .offerings-experience::-webkit-scrollbar, .why-experience::-webkit-scrollbar {
    width: 4px;
  }
  .offerings-experience::-webkit-scrollbar-thumb, .why-experience::-webkit-scrollbar-thumb {
    background: rgba(8,105,237,.24);
    border-radius: 99px;
  }
  .offerings-experience__inner, .why-experience__inner {
    width: 100%;
    height: auto;
    min-height: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
  .offerings-heading, .why-heading {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 2px;
    text-align: center;
  }
  .offerings-heading h1, .why-heading h1 {
    width: 100%;
    margin: 0;
    padding: 0 4px;
    font-size: clamp(28px,7.8vw,34px);
    line-height: 1.08;
    letter-spacing: -.04em;
    text-wrap: balance;
  }
  .offerings-divider, .why-divider {
    left: auto;
    width: 100%;
    height: 5px;
    margin: 11px auto 0;
    transform-origin: center;
    display: none;
  }
  .offerings-ready .offerings-divider, .why-ready .why-divider {
    transform: scaleX(1);
  }
  .offerings-flight.to-title, .why-flight.to-title {
    left: 50%!important;
    top: calc(14px + env(safe-area-inset-top))!important;
    width: calc(100vw - (var(--mobile-gutter)*2))!important;
    height: 48px!important;
    transform: translateX(-50%);
    font-size: clamp(27px,7.6vw,33px)!important;
    line-height: 1.05;
    text-align: center;
  }
  /* Offerings — green half at right edge */

  .offerings-mode .brand, .offerings-mode .menu-wrap {
    opacity: 0!important;
    visibility: hidden!important;
    pointer-events: none!important;
  }
  .offerings-mode .logo-shell {
    left: auto;
    right: 0;
    top: 50%;
    /* width: var(--edge-head-w); */
    transform: translate(50%,-50%);
    z-index: 40;
    filter: drop-shadow(-10px 14px 22px rgba(0,92,67,.16));
    overflow: visible;
  }
  .offerings-mode .logo-whole {
    opacity: 0!important;
    animation: none!important;
  }
  .offerings-mode .split-layer {
    opacity: 1!important;
  }
  .offerings-mode .logo-half.left {
    opacity: 1!important;
    transform: none!important;
  }
  .offerings-mode .logo-half.right {
    opacity: 0!important;
    transform: none!important;
  }
  .offerings-back {
    left: 25%;
    top: 50%;
    z-index: 60;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.82);
    background: rgba(0,92,67,.72);
    box-shadow: 0 11px 26px rgba(0,53,39,.25),inset 0 1px 0 rgba(255,255,255,.34);
  }
  .offerings-ready .offerings-back {
    opacity: 1!important;
    visibility: visible!important;
    pointer-events: auto!important;
    transform: translate(-50%,-50%) scale(1)!important;
  }
  .offerings-cards {
    width: calc(100% - var(--edge-rail));
    max-width: none;
    margin: 18px var(--edge-rail) 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }
  .offering-card {
    width: 100%;
    max-width: 100%;
    scroll-margin-top: 88px;
  }
  .offering-card:hover {
    transform: none;
  }
  .offerings-cards:has(.offering-card.is-open) .offering-card:not(.is-open) {
    opacity: 1;
    filter: none;
    transform: none;
  }
  .offering-card__toggle {
    min-height: 0;
    padding: 15px 13px 14px;
    grid-template-columns: minmax(0,1fr) 34px;
    column-gap: 9px;
    align-content: center;
  }
  .offering-card__eyebrow {
    margin-bottom: 6px;
    font-size: 9.6px;
    line-height: 1.25;
    letter-spacing: .09em;
  }
  .offering-card__title {
    font-size: clamp(19px,5.3vw,23px);
    line-height: 1.14;
  }
  .offering-card__copy {
    margin-top: 7px;
    max-width: 100%;
    font-size: 11.8px;
    line-height: 1.47;
  }
  .offering-card__icon {
    width: 33px;
    height: 33px;
  }
  .offering-card__body {
    max-height: 0;
  }
  .offering-card.is-open .offering-card__body {
    max-height: 2600px;
    opacity: 1;
  }
  .offering-card__content {
    padding: 13px 13px 15px;
  }
  .service-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 0;
    padding: 0;
  }
  .service-list li {
    min-width: 0;
    padding-left: 16px;
    font-size: 11.4px;
    line-height: 1.47;
  }
  .offering-card__footer {
    margin-top: 14px;
  }
  .collaboration-button {
    width: 100%;
    min-height: 46px;
    padding: 9px 10px;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
  }
  /* Why — blue half at left edge */

  .why-mode .brand, .why-mode .menu-wrap {
    opacity: 0!important;
    visibility: hidden!important;
    pointer-events: none!important;
  }
  .why-mode .logo-shell {
    left: 0;
    right: auto;
    top: 50%;
    /* width: var(--edge-head-w); */
    transform: translate(-50%,-50%);
    z-index: 40;
    filter: drop-shadow(10px 14px 22px rgba(8,105,237,.17));
    overflow: visible;
  }
  .why-mode .logo-whole {
    opacity: 0!important;
    animation: none!important;
  }
  .why-mode .split-layer {
    opacity: 1!important;
  }
  .why-mode .logo-half.left {
    opacity: 0!important;
    transform: none!important;
  }
  .why-mode .logo-half.right {
    opacity: 1!important;
    transform: none!important;
  }
  .why-back {
    position: fixed;
    left: var(--edge-button);
    top: 50%;
    z-index: 70;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.82);
    background: rgba(8,105,237,.72);
    box-shadow: 0 11px 26px rgba(8,105,237,.25),inset 0 1px 0 rgba(255,255,255,.34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%,-50%) scale(.86);
  }
  .why-ready .why-back {
    opacity: 1!important;
    visibility: visible!important;
    pointer-events: auto!important;
    transform: translate(-50%,-50%) scale(1)!important;
  }
  .why-layout {
    position: relative!important;
    left: auto!important;
    top: auto!important;
    flex: none;
    width: calc(100% - var(--edge-rail));
    max-width: none;
    margin: 18px 0 0 var(--edge-rail);
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }
  .why-cards {
    width: 100%;
    display: grid;
    gap: 10px;
    align-content: start;
  }
  .why-card {
    width: 100%;
    max-width: 100%;
    scroll-margin-top: 88px;
  }
  .why-card:hover {
    transform: none;
  }
  .why-cards:has(.why-card.is-open) .why-card:not(.is-open) {
    opacity: 1;
    filter: none;
  }
  .why-card__toggle {
    min-height: 0;
    padding: 13px 12px;
    grid-template-columns: minmax(0,1fr) 32px;
    gap: 8px;
  }
  .why-card__toggle>span:first-child {
    min-width: 0;
  }
  .why-card__title {
    font-size: clamp(17px,4.8vw,20px);
    line-height: 1.17;
  }
  .why-card__summary {
    margin-top: 4px;
    font-size: 10.8px;
    line-height: 1.42;
  }
  .why-card__icon {
    width: 31px;
    height: 31px;
  }
  .why-card__body {
    max-height: 0;
  }
  .why-card.is-open .why-card__body, .why-card--engine.is-open .why-card__body {
    max-height: 6000px;
    opacity: 1;
  }
  .why-card__content, .why-card--engine .why-card__content {
    padding: 12px 11px 14px;
    overflow: hidden;
  }
  .why-contact {
    position: static;
    width: 100%;
    margin: 0;
  }
  .why-contact a {
    width: 100%;
    min-height: 66px;
    padding: 10px 11px;
    grid-template-columns: 34px minmax(0,1fr) 17px;
    gap: 8px;
  }
  .why-contact__copy {
    min-width: 0;
  }
  .why-contact__copy strong {
    font-size: 12.2px;
    overflow-wrap: anywhere;
  }
  .why-contact__copy small {
    font-size: 8.8px;
  }
  /* Engine */

  .engine-grid, .why-card--engine .engine-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .engine-profile, .why-card--engine .engine-profile {
    display: grid;
    grid-template-columns: 104px minmax(0,1fr);
    gap: 9px;
    align-items: start;
  }
  .engine-photo, .why-card--engine .engine-photo {
    width: 104px!important;
    max-width: 100%;
  }
  .engine-stats {
    gap: 5px;
  }
  .engine-stats span {
    padding: 6px 7px;
  }
  .engine-stats strong {
    font-size: 10.8px;
  }
  .engine-stats small {
    font-size: 8.9px;
    line-height: 1.2;
  }
  .engine-copy {
    min-width: 0;
  }
  .engine-eyebrow {
    font-size: 9.5px;
  }
  .engine-copy h3 {
    font-size: clamp(22px,6vw,26px);
  }
  .engine-role {
    font-size: 11.4px;
    line-height: 1.4;
  }
  .engine-lead, .why-card--engine .engine-lead {
    font-size: 11.2px!important;
    line-height: 1.49!important;
  }
  .engine-context-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
  }
  .engine-mini-card {
    padding: 9px 10px 10px;
  }
  .engine-mini-card h4 {
    font-size: 9.5px;
  }
  .engine-mini-card p {
    font-size: 10.2px;
    line-height: 1.43;
  }
  .engine-badges, .why-card--engine .engine-badges {
    justify-content: center;
    gap: 5px;
    margin: 11px auto 8px;
    text-align: center;
  }
  .engine-badges span, .why-card--engine .engine-badges span {
    max-width: 100%;
    padding: 5px 7px;
    font-size: 9px;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }
  .profile-links, .why-card--engine .profile-links {
    display: grid!important;
    grid-template-columns: 1fr;
    gap: 7px;
    margin: 9px auto 0;
    width: 100%;
  }
  .profile-links a, .why-card--engine .profile-links a {
    width: 100%;
    min-width: 0!important;
    padding: 8px 9px;
  }
  .profile-links strong {
    font-size: 10px;
  }
  .profile-links small {
    font-size: 8.4px;
  }
  /* Approach */

  .approach-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .approach-copy p {
    font-size: 11px;
    line-height: 1.48;
  }
  .approach-outcomes {
    gap: 6px;
  }
  .approach-outcomes span {
    min-height: 36px;
    padding: 7px 8px 7px 23px;
    font-size: 10.2px;
    line-height: 1.3;
  }
  .approach-visual {
    width: min(100%,246px);
    margin: 0 auto;
  }
  .approach-center {
    width: 48%;
    padding: 9px;
  }
  .approach-center span {
    font-size: 8.8px;
  }
  .approach-center strong {
    font-size: clamp(12px,3.4vw,14px);
  }
  .approach-center p {
    max-width: 88px;
    font-size: 7px;
    line-height: 1.22;
  }
  /* Values */

  .values-shell {
    gap: 8px;
  }
  .values-core {
    display: grid;
    grid-template-columns: 35px minmax(0,1fr);
    gap: 8px;
    padding: 9px;
  }
  .values-shield {
    width: 35px;
    height: 35px;
  }
  .values-shield svg {
    width: 20px;
    height: 20px;
  }
  .values-core strong {
    font-size: 12.8px;
  }
  .values-core p {
    font-size: 9.8px;
    line-height: 1.4;
  }
  .values-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .value-node {
    grid-template-columns: 30px minmax(0,1fr);
    gap: 8px;
    padding: 8px;
  }
  .value-icon {
    width: 30px;
    height: 30px;
  }
  .value-node strong {
    font-size: 10.7px;
  }
  .value-node p {
    font-size: 9.6px;
    line-height: 1.38;
  }
  .values-promise {
    justify-content: center;
    gap: 5px;
    text-align: center;
  }
  .values-promise span {
    max-width: 100%;
    padding: 5px 7px;
    font-size: 8.9px;
    white-space: normal;
  }
  /* Let's get to work — inside central gap */

  .work-mode .logo-shell {
    top: 45%;
    width: var(--head-w);
    transform: translate(-50%,-58%);
  }
  .work-mode .logo-half.left {
    transform: translateX(calc(-1 * var(--split)))!important;
  }
  .work-mode .logo-half.right {
    transform: translateX(var(--split))!important;
  }
  .work-contact-panel {
    position: fixed;
    left: 50%;
    top: 45%;
    bottom: auto;
    width: min(54vw,212px);
    max-width: calc(100vw - 112px);
    max-height: min(58svh,338px);
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translate(-50%,-50%) translateY(10px) scale(.98);
    z-index: 20;
    top: 26% !important;
  }
  @supports(height:100dvh) {
    .work-contact-panel {
      max-height: min(58dvh,338px);
    }
  }
  .work-ready .work-contact-panel {
    transform: translate(-50%,-50%) scale(1);
  }
  .work-leaving .work-contact-panel {
    transform: translate(-50%,-50%) translateY(8px) scale(.98);
  }
  .work-contact-panel__inner {
    padding: 12px 8px 10px;
  }
  .work-contact-panel h2 {
    padding-inline: 27px;
    font-size: clamp(17px,4.9vw,20px);
    line-height: 1.12;
    text-wrap: balance;
  }
  .work-back {
    left: 7px;
    top: 7px;
    width: 31px;
    height: 31px;
  }
  .work-back span {
    font-size: 19px;
  }
  .work-contact-rule {
    width: 68px;
    height: 3px;
    margin: 9px auto;
  }
  .work-contact-label {
    margin-bottom: 7px;
    font-size: 11px;
  }
  .work-contact-list {
    gap: 6px;
  }
  .work-contact-link {
    min-height: 42px;
    grid-template-columns: 29px minmax(0,1fr) 12px;
    gap: 5px;
    padding: 5px 5px 5px 4px;
  }
  .work-contact-icon {
    width: 29px;
    height: 29px;
  }
  .work-contact-icon svg {
    width: 15px;
    height: 15px;
  }
  .work-contact-copy {
    min-width: 0;
  }
  .work-contact-copy small {
    font-size: 7.5px;
  }
  .work-contact-copy strong {
    font-size: clamp(8px, 1.55vw, 4.2px);
    line-height: 1.18;
    overflow-wrap: anywhere;
  }
  .work-contact-arrow {
    font-size: 12px;
  }
  .work-mode .brand {
    top: 81%;
    bottom: auto;
    width: min(78vw,294px);
    opacity: 1!important;
    transform: translate(-50%,0) scale(1)!important;
  }
}

@media (max-width: 360px) {
  :root {
    --head-w: 96px;
    --split: 100px;
    --menu-w: min(54vw,190px);
    --brand-w: min(86vw,302px);
    --edge-head-w: 110px;
    --edge-rail: 68px;
  }
  .menu-item {
    min-height: 39px;
    font-size: 12px;
    padding-inline: 8px;
  }
  .offerings-heading h1, .why-heading h1 {
    font-size: 27px;
  }
  .offering-card__title {
    font-size: 18px;
  }
  .offering-card__copy, .service-list li {
    font-size: 10.8px;
  }
  .why-card__title {
    font-size: 16.3px;
  }
  .why-card__summary {
    font-size: 10.2px;
  }
  .engine-profile, .why-card--engine .engine-profile {
    grid-template-columns: 92px minmax(0,1fr);
  }
  .engine-photo, .why-card--engine .engine-photo {
    width: 92px!important;
  }
  .approach-visual {
    width: min(100%,226px);
  }
  .work-contact-panel {
    width: min(54vw,190px);
    max-width: calc(100vw - 104px);
  }
}

@media (max-width:820px) and (orientation:landscape) and (max-height:520px) {
  :root {
    --head-w: 82px;
    --split: 88px;
    --menu-w: min(40vw,176px);
    --menu-y: 43%;
    --brand-y: 88%;
    --brand-w: min(46vw,280px);
    --edge-head-w: 94px;
    --edge-rail: 60px;
  }
  .menu {
    gap: 4px;
  }
  .menu-item {
    min-height: 31px;
    font-size: 10.7px;
  }
  .offerings-experience, .why-experience {
    padding-top: 10px;
  }
  .offerings-heading h1, .why-heading h1 {
    font-size: 22px;
  }
  .offerings-cards, .why-layout {
    margin-top: 10px;
  }
  .work-contact-panel {
    top: 48%;
    max-height: calc(100dvh - 18px);
    width: min(42vw,205px);
    top: 26% !important;
  }
  .work-mode .brand {
    opacity: 0!important;
  }
}

/* Final mobile integrity fixes */

@media (max-width:820px) {
  /* Why return button is a page-level fixed control, above the side head. */

  #whyBack {
    position: fixed!important;
    left: var(--edge-button)!important;
    right: auto!important;
    top: 50%!important;
    z-index: 100!important;
    width: 42px!important;
    height: 42px!important;
    display: grid!important;
    place-items: center!important;
    opacity: 0!important;
    visibility: hidden!important;
    pointer-events: none!important;
    transform: translate(-50%,-50%) scale(.86)!important;
  }
  #page.why-mode.why-ready #whyBack {
    opacity: 1!important;
    visibility: visible!important;
    pointer-events: auto!important;
    transform: translate(-50%,-50%) scale(1)!important;
  }
  #page:not(.why-mode) #whyBack, #page.why-leaving #whyBack {
    opacity: 0!important;
    visibility: hidden!important;
    pointer-events: none!important;
  }
  /* Override late desktop Engine rules that use !important. */

  .why-card--engine.is-open .why-card__body {
    max-height: 9999px!important;
    overflow: hidden!important;
  }
  .why-card--engine .why-card__content {
    padding: 12px 11px 14px!important;
  }
  .why-card--engine .engine-grid {
    display: grid!important;
    grid-template-columns: 1fr!important;
    gap: 13px!important;
    align-items: start!important;
  }
  .why-card--engine .engine-profile {
    display: grid!important;
    grid-template-columns: 104px minmax(0,1fr)!important;
    gap: 9px!important;
    align-items: start!important;
    align-self: start!important;
  }
  .why-card--engine .engine-photo {
    width: 104px!important;
  }
  .why-card--engine .engine-badges {
    margin: 11px auto 8px!important;
    gap: 5px!important;
  }
  .why-card--engine .engine-badges span {
    padding: 5px 7px!important;
    font-size: 9px!important;
    line-height: 1.15!important;
    white-space: normal!important;
  }
  .why-card--engine .profile-links {
    display: grid!important;
    grid-template-columns: 1fr!important;
    width: 100%!important;
    margin: 9px 0 0!important;
    gap: 7px!important;
  }
  .why-card--engine .profile-links a {
    width: 100%!important;
    min-width: 0!important;
    padding: 8px 9px!important;
  }
}

@media (max-width:360px) {
  #whyBack {
    width: 39px!important;
    height: 39px!important;
  }
  .why-card--engine .engine-profile {
    grid-template-columns: 92px minmax(0,1fr)!important;
  }
  .why-card--engine .engine-photo {
    width: 92px!important;
  }
}

/* Final spacing calibration after multi-viewport review */

@media (max-width:820px) {
  :root {
    --edge-rail: clamp(80px,22vw,90px);
  }
  .offerings-back {
    left: 50%!important;
  }
}

@media (max-width:360px) {
  :root {
    --edge-rail: 76px;
  }
}

/* Exact side-rail geometry: override higher-specificity desktop tablet rules. */

@media (max-width:820px) {
  .offerings-experience__inner .offerings-cards {
    position: relative!important;
    left: auto!important;
    top: auto!important;
    width: calc(100% - var(--edge-rail))!important;
    max-width: none!important;
    margin: 18px var(--edge-rail) 0 0!important;
    transform: translateY(18px) scale(.99)!important;
  }
  .offerings-ready .offerings-experience__inner .offerings-cards {
    transform: none!important;
  }
  .why-experience__inner .why-layout {
    position: relative!important;
    left: auto!important;
    top: auto!important;
    width: calc(100% - var(--edge-rail))!important;
    max-width: none!important;
    margin: 18px 0 0 var(--edge-rail)!important;
    display: grid!important;
    grid-template-columns: 1fr!important;
    gap: 12px!important;
    transform: translateY(18px) scale(.99)!important;
  }
  .why-ready .why-experience__inner .why-layout {
    transform: none!important;
  }
}

@media (max-width:360px) {
  :root {
    --edge-rail: 84px;
  }
}